test/styles/website/_dropdown.scss
2018-12-13 14:35:49 +01:00

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%; }