prepare org filter markup and styles
This commit is contained in:
Lisa Passing
parent
26ffa632f1
commit
94aea59450
|
|
@ -49,6 +49,7 @@
|
|||
@import "app/components/buttons";
|
||||
@import "app/components/icons";
|
||||
@import "app/components/search";
|
||||
@import "app/components/dropdown";
|
||||
|
||||
@import "app/layout";
|
||||
@import "app/layouts/dashboard";
|
||||
|
|
|
|||
113
app/styles/app/components/dropdown.sass
Normal file
113
app/styles/app/components/dropdown.sass
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/*
|
||||
* Dashboard Activation Dropdown
|
||||
*/
|
||||
|
||||
$dropdown-border: #C3D9DB
|
||||
|
||||
.dropdown--db
|
||||
@include resetul
|
||||
@extend %br-4px
|
||||
position: absolute
|
||||
padding: .8em .5em
|
||||
z-index: 90
|
||||
width: 12.5em;
|
||||
right: 0;
|
||||
top: 4em;
|
||||
border: 2px $dropdown-border solid;
|
||||
background-color: $white
|
||||
display: none
|
||||
a
|
||||
display: block
|
||||
padding: 0.4em 1em .2em
|
||||
&:hover
|
||||
background-color: $dropdown-color
|
||||
color: $white
|
||||
&:before
|
||||
content: ""
|
||||
width: 1.2em
|
||||
height: 1.2em
|
||||
display: block
|
||||
position: absolute
|
||||
top: -0.7em;
|
||||
right: 1.1em;
|
||||
background-color: $white
|
||||
border-top: solid 2px $dropdown-border;
|
||||
border-left: solid 2px $dropdown-border;
|
||||
transform: rotate(45deg);
|
||||
|
||||
|
||||
/*
|
||||
* Dashboard Organizations Dropdown
|
||||
*/
|
||||
|
||||
.current-org-avatar
|
||||
display : inline-block
|
||||
height : 20px
|
||||
width : 20px
|
||||
vertical-align: top
|
||||
margin : -5px 5px 0 0
|
||||
|
||||
.dropdown--org
|
||||
float : left
|
||||
|
||||
.dropdown--org ul
|
||||
text-align : left
|
||||
display : inline
|
||||
margin : 0
|
||||
padding : 0
|
||||
list-style : none
|
||||
z-index : 1000
|
||||
|
||||
.dropdown--org ul li
|
||||
background : $white
|
||||
position : relative
|
||||
display : inline-block
|
||||
padding : 10px 0 10px 0
|
||||
margin-right : -4px
|
||||
margin-top : 0
|
||||
cursor : pointer
|
||||
border-radius : 0px
|
||||
|
||||
.dropdown--org li.filters-start:hover
|
||||
background-color : #fff
|
||||
|
||||
.dropdown--org ul li ul
|
||||
padding : 0
|
||||
position : absolute
|
||||
top : 35px
|
||||
left : 0
|
||||
width : 200px
|
||||
display : none
|
||||
opacity : 0
|
||||
visibility : hidden
|
||||
box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
|
||||
|
||||
.dropdown--org ul li ul li
|
||||
display : block
|
||||
line-height : 23px
|
||||
padding-left : 20px
|
||||
|
||||
.dropdown--org ul li ul li:first-child
|
||||
border-top-left-radius : 4px
|
||||
border-top-right-radius : 4px
|
||||
|
||||
.dropdown--org ul li ul li:last-child
|
||||
border-bottom-left-radius : 4px
|
||||
border-bottom-right-radius : 4px
|
||||
|
||||
.dropdown--org ul li ul li div
|
||||
display : inline-block
|
||||
width : 20px
|
||||
height : 20px
|
||||
margin-right : 5px
|
||||
text-indent : -9999px
|
||||
border-radius : 100px
|
||||
|
||||
.dropdown--org ul li ul li:hover
|
||||
background : #5e869a
|
||||
color : $white
|
||||
|
||||
.dropdown--org ul li:hover ul
|
||||
display : block
|
||||
opacity : 1
|
||||
visibility : visible
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/*
|
||||
* Dashboard
|
||||
* @todo: split into components: filter, search
|
||||
* Dashboard List
|
||||
*/
|
||||
|
||||
@mixin colorDbelements($color)
|
||||
|
|
@ -19,7 +18,6 @@
|
|||
|
||||
$db-gray: #C9C9C9
|
||||
$db-text-color: #ACAAAA
|
||||
$dropdown-border: #C3D9DB
|
||||
|
||||
.dashboard
|
||||
color: $db-text-color
|
||||
|
|
@ -97,7 +95,6 @@ $dropdown-border: #C3D9DB
|
|||
left: 0
|
||||
height: 100%
|
||||
width: 2.5em
|
||||
// background-color: $db-gray
|
||||
border-top-left-radius: 4px
|
||||
border-bottom-left-radius: 4px
|
||||
|
||||
|
|
@ -160,40 +157,12 @@ $dropdown-border: #C3D9DB
|
|||
height: 2em
|
||||
right: 0
|
||||
|
||||
.db-burger:hover ~ .dropdown,
|
||||
.dropdown:hover
|
||||
display: block
|
||||
|
||||
.dropdown
|
||||
@include resetul
|
||||
@extend %br-4px
|
||||
position: absolute
|
||||
padding: .8em .5em
|
||||
z-index: 90
|
||||
width: 12.5em;
|
||||
right: 0;
|
||||
top: 4em;
|
||||
border: 2px $dropdown-border solid;
|
||||
background-color: $white
|
||||
.dropdown--db
|
||||
display: none
|
||||
a
|
||||
display: block
|
||||
padding: 0.4em 1em .2em
|
||||
&:hover
|
||||
background-color: $dropdown-color
|
||||
color: $white
|
||||
&:before
|
||||
content: ""
|
||||
width: 1.2em
|
||||
height: 1.2em
|
||||
display: block
|
||||
position: absolute
|
||||
top: -0.7em;
|
||||
right: 1.1em;
|
||||
background-color: $white
|
||||
border-top: solid 2px $dropdown-border;
|
||||
border-left: solid 2px $dropdown-border;
|
||||
transform: rotate(45deg);
|
||||
|
||||
.db-burger:hover ~ .dropdown--db,
|
||||
.dropdown--db:hover
|
||||
display: block
|
||||
|
||||
.dashboard-starred,
|
||||
.dashboard-active,
|
||||
|
|
@ -244,79 +213,6 @@ $dropdown-border: #C3D9DB
|
|||
h2, h3, p, button, .db-status
|
||||
opacity: .7
|
||||
|
||||
|
||||
// .current-org-avatar
|
||||
// display : inline-block
|
||||
// height : 20px
|
||||
// width : 20px
|
||||
// vertical-align: top
|
||||
// margin : -5px 5px 0 0
|
||||
|
||||
// #filters
|
||||
// float : left
|
||||
|
||||
// #filters ul
|
||||
// text-align : left
|
||||
// display : inline
|
||||
// margin : 0
|
||||
// padding : 0
|
||||
// list-style : none
|
||||
// z-index : 1000
|
||||
|
||||
// #filters ul li
|
||||
// background : $white
|
||||
// position : relative
|
||||
// display : inline-block
|
||||
// padding : 10px 0 10px 0
|
||||
// margin-right : -4px
|
||||
// margin-top : 0
|
||||
// cursor : pointer
|
||||
// border-radius : 0px
|
||||
|
||||
// #filters li.filters-start:hover
|
||||
// background-color : #fff
|
||||
|
||||
// #filters ul li ul
|
||||
// padding : 0
|
||||
// position : absolute
|
||||
// top : 35px
|
||||
// left : 0
|
||||
// width : 200px
|
||||
// display : none
|
||||
// opacity : 0
|
||||
// visibility : hidden
|
||||
// box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
|
||||
|
||||
// #filters ul li ul li
|
||||
// display : block
|
||||
// line-height : 23px
|
||||
// padding-left : 20px
|
||||
|
||||
// #filters ul li ul li:first-child
|
||||
// border-top-left-radius : 4px
|
||||
// border-top-right-radius : 4px
|
||||
|
||||
// #filters ul li ul li:last-child
|
||||
// border-bottom-left-radius : 4px
|
||||
// border-bottom-right-radius : 4px
|
||||
|
||||
// #filters ul li ul li div
|
||||
// display : inline-block
|
||||
// width : 20px
|
||||
// height : 20px
|
||||
// margin-right : 5px
|
||||
// text-indent : -9999px
|
||||
// border-radius : 100px
|
||||
|
||||
// #filters ul li ul li:hover
|
||||
// background : #5e869a
|
||||
// color : $white
|
||||
|
||||
// #filters ul li:hover ul
|
||||
// display : block
|
||||
// opacity : 1
|
||||
// visibility : visible
|
||||
|
||||
// #views
|
||||
// float : left
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<div id="filters-search" class="section section--white section--maxheight">
|
||||
<div class="row">
|
||||
<!--
|
||||
<div class="small-6 medium-3 large-2 columns" id="filters">
|
||||
<div class="small-6 medium-3 large-2 columns dropdown--org" id="filters">
|
||||
<ul>
|
||||
<li class="filters-start">
|
||||
<div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div>
|
||||
|
|
@ -15,8 +14,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
<!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
|
||||
{{!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
|
||||
<ul>
|
||||
<li class="views-start">
|
||||
View all repos <div class="arrow-down"></div>
|
||||
|
|
@ -28,7 +26,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div> --}}
|
||||
<div class="search">
|
||||
{{filter-input placeholder="Search all repositories" class="search-field"
|
||||
action="updateFilter" on="key-up"}}
|
||||
|
|
@ -57,7 +55,7 @@
|
|||
<div class="db-burger">
|
||||
<span class="icon icon-burger"></span>
|
||||
</div>
|
||||
<ul class="dropdown">
|
||||
<ul class="dropdown--db">
|
||||
<li><a href="#" title="">Deactivate repository</a></li>
|
||||
<li><a href="#" title="">Trigger a build</a></li>
|
||||
</ul>
|
||||
|
|
@ -97,7 +95,7 @@
|
|||
<div class="db-burger">
|
||||
<span class="icon icon-burger"></span>
|
||||
</div>
|
||||
<ul class="dropdown">
|
||||
<ul class="dropdown--db">
|
||||
<li><a href="#" title="">Deactivate repository</a></li>
|
||||
<li><a href="#" title="">Trigger a build</a></li>
|
||||
</ul>
|
||||
|
|
@ -123,7 +121,7 @@
|
|||
<div class="db-burger">
|
||||
<span class="icon icon-burger"></span>
|
||||
</div>
|
||||
<ul class="dropdown">
|
||||
<ul class="dropdown--db">
|
||||
<li><a href="#" title="">Deactivate repository</a></li>
|
||||
<li><a href="#" title="">Trigger a build</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user