144 lines
3.2 KiB
SCSS
144 lines
3.2 KiB
SCSS
// # Dropdown
|
|
// Defines styling for dropdowns
|
|
|
|
// *******************************************************
|
|
// ## Variables
|
|
// *******************************************************
|
|
|
|
$dropdown-zindex : 100 !default;
|
|
$dropdown-divider-color : $color-border !default;
|
|
$dropdown-background : $sidebar-background !default;
|
|
$dropdown-button-color : darken($color-button, 15%) !default;
|
|
$dropdown-border-color : $color-border !default;
|
|
$dropdown-button-hover-color : $color-button-hover !default;
|
|
$dropdown-border-radius : 1px !default;
|
|
|
|
|
|
// *******************************************************
|
|
// ## Dropdown div
|
|
// *******************************************************
|
|
|
|
.dropdown
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-menu
|
|
{
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: $dropdown-zindex;
|
|
display: none; // none by default, but block on "open" of the menu
|
|
float: left;
|
|
min-width: 160px;
|
|
padding: 0;
|
|
margin: 2px 0 0; // override default ul
|
|
list-style: none;
|
|
font-size: $font-size-base;
|
|
background-color: $dropdown-background;
|
|
border: 1px solid $dropdown-border-color;
|
|
border-radius: $dropdown-border-radius;
|
|
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.dropdown-menu.open { display:block; }
|
|
|
|
.dropdown-menu.dropdown-left
|
|
{
|
|
left: auto;
|
|
right: 4%;
|
|
}
|
|
|
|
.dropdown-menu.dropdown-left .dropdown-caret {
|
|
right: 14px;
|
|
left: auto;
|
|
}
|
|
|
|
// *******************************************************
|
|
// ## Dropdown caret
|
|
// *******************************************************
|
|
|
|
.dropdown-caret
|
|
{
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 14px;
|
|
width: 18px;
|
|
height: 10px;
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-caret .caret-outer
|
|
{
|
|
position: absolute;
|
|
border-left: 9px solid transparent;
|
|
border-right: 9px solid transparent;
|
|
border-bottom: 9px solid rgba(0,0,0,0.1);
|
|
height: auto;
|
|
left: 0;
|
|
top: 0;
|
|
width: auto;
|
|
display: inline-block;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.dropdown-caret .caret-inner
|
|
{
|
|
position: absolute;
|
|
display: inline-block;
|
|
margin-top: -1px;
|
|
top: 0;
|
|
top: 1px;
|
|
border-left: 9px solid transparent;
|
|
border-right: 9px solid transparent;
|
|
border-bottom: 9px solid $dropdown-background;
|
|
}
|
|
|
|
// *******************************************************
|
|
// ## Dropdown buttons
|
|
// *******************************************************
|
|
|
|
.dropdown .buttons
|
|
{
|
|
border-bottom: 1px solid $color-border;
|
|
|
|
/* Clear fix */
|
|
&:before,
|
|
&:after
|
|
{
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
&:after
|
|
{
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.dropdown .buttons:last-child { border-bottom: none; }
|
|
|
|
.dropdown .button
|
|
{
|
|
border: 0;
|
|
background-color: transparent;
|
|
color: $dropdown-button-color;
|
|
width: 100%;
|
|
text-align: center;
|
|
float: left;
|
|
line-height: $line-height-base;
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.dropdown .button:hover { color: $dropdown-button-hover-color; }
|
|
|
|
.dropdown .button:focus,
|
|
.dropdown .button:hover
|
|
{
|
|
outline: none;
|
|
}
|
|
|
|
.dropdown .button.size-2 { width: 50%; }
|
|
.dropdown .button.size-3 { width: 33%; }
|