mirror of https://github.com/rancher/ui.git
116 lines
2.6 KiB
SCSS
116 lines
2.6 KiB
SCSS
$dropdown-bg : $body-bg !default;
|
|
|
|
$dropdown-border : $light-grey !default;
|
|
$dropdown-fallback-border : transparent !default;
|
|
$dropdown-divider-bg : $light-grey !default;
|
|
|
|
$dropdown-link-color : $link-color !default;
|
|
$dropdown-link-hover-color : $body-bg !default;
|
|
$dropdown-link-hover-bg : $link-color !default;
|
|
|
|
$dropdown-link-active-color : white !default;
|
|
$dropdown-link-active-bg : $link-color !default;
|
|
|
|
$dropdown-link-disabled-color : $mid-grey !default;
|
|
|
|
$dropdown-header-color : $mid-grey !default;
|
|
$dropdown-caret-color : $mid-grey !default;
|
|
|
|
|
|
// The dropdown wrapper (div)
|
|
.dropup,
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
// The dropdown menu (ul)
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 100%;
|
|
left: 0;
|
|
display: none; // none by default, but block on "open" of the menu
|
|
float: left;
|
|
min-width: 200px;
|
|
max-width: 240px;
|
|
padding: 0;
|
|
margin: 0; // override default ul
|
|
list-style: none;
|
|
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
|
background: $dropdown-bg;
|
|
border: 1px solid $dropdown-border; // IE8 fallback
|
|
border: 1px solid $dropdown-border;
|
|
background-clip: padding-box;
|
|
|
|
// Links within the dropdown menu
|
|
> li > a {
|
|
display: block;
|
|
padding: 8px 18px;
|
|
clear: both;
|
|
font-weight: normal;
|
|
color: $dropdown-link-color;
|
|
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
|
@extend .clip;
|
|
|
|
// Hover/Focus state
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
color: $dropdown-link-hover-color;
|
|
background-color: $dropdown-link-hover-bg;
|
|
}
|
|
}
|
|
|
|
// Active state
|
|
> .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: $dropdown-link-active-color;
|
|
text-decoration: none;
|
|
outline: 0;
|
|
background-color: $dropdown-link-active-bg;
|
|
}
|
|
}
|
|
|
|
// Disabled state
|
|
//
|
|
// Gray out text and ensure the hover/focus state remains gray
|
|
> .disabled > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: $dropdown-link-disabled-color;
|
|
}
|
|
|
|
// Nuke hover/focus effects
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
// cursor: @cursor-disabled;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
border-top: 1px solid $dropdown-divider-bg;
|
|
}
|
|
}
|
|
|
|
.resource-actions {
|
|
>li {
|
|
&:nth-child(2) {
|
|
margin-top: 4px;
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
.resource-actions-tabbable {
|
|
height: 0;
|
|
visibility: hidden;
|
|
}
|