travis-web/app/styles/app/modules/dropdown.sass
2015-11-11 18:57:02 +01:00

135 lines
2.3 KiB
Sass

/*
* Dashboard Activation Dropdown
*/
$dropdown-border: #C3D9DB
.dropdown--db
@include resetul
border-radius: 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
*/
.filter
position: relative
img
max-width: 20px
max-height: 20px
margin-right: .5em
margin-top: -0.1em
border-radius: 50%
overflow: hidden
.filter--org
float: left
.filter-current
padding: .9em 0
cursor: pointer
a
color: $teal-dark
.filter-dropdown
@include resetul
position: absolute
top: 3em
min-width: 14em
background-color: $white
border-radius: 2px
overflow: hidden
border: 1px solid $cream-dark
border-top: none
z-index: 40
display: none
li
white-space: nowrap
a
display: inline-block
width: 100%
padding: 10px 10px 10px 20px
&:hover
color: $white
background : $teal-dark
.is-selected
a
font-weight: 600
&.is-open
display: block
.dropdown
position: relative
.dropdown--classic
width: 10.7rem
.dropdown-button
height: 28px
background-color: $grey-lighter
border: none
color: $white
line-height: 1
font-size: $font-size-normal
&:hover,
&:focus
background-color: #8b9595
.icon-cog-light
position: relative
top: 0.15em
left: -0.2em
.icon-arrow-down
border-top-color: $white
@media #{$medium-up}
float: right
.dropdown-menu
@include resetul
@extend %border-bottom-4px
position: absolute
top: 29px // height of the button +1
width: 100%
z-index: 70
overflow: hidden
background-color: $grey-lighter
display: none
a
@extend %inline-block
width: 100%
padding: .4em 2em
color: $white
&:hover
background-color: darken($grey-lighter, 10)
&.display
display: block