78 lines
1.7 KiB
SCSS
Executable File
78 lines
1.7 KiB
SCSS
Executable File
//
|
|
// Select Menu
|
|
// ------------------------------
|
|
|
|
|
|
// wrapper around the menu
|
|
|
|
.Select-menu-outer {
|
|
// Unfortunately, having both border-radius and allows scrolling using overflow defined on the same
|
|
// element forces the browser to repaint on scroll. However, if these definitions are split into an
|
|
// outer and an inner element, the browser is able to optimize the scrolling behavior and does not
|
|
// have to repaint on scroll.
|
|
@include border-bottom-radius( $select-input-border-radius );
|
|
background-color: $select-input-bg;
|
|
border: 1px solid $select-input-border-color;
|
|
border-top-color: mix($select-input-bg, $select-input-border-color, 50%);
|
|
box-shadow: $select-menu-box-shadow;
|
|
box-sizing: border-box;
|
|
margin-top: -1px;
|
|
max-height: $select-menu-max-height;
|
|
position: absolute;
|
|
top: 100%;
|
|
width: 100%;
|
|
z-index: $select-menu-zindex;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
|
|
// wrapper
|
|
|
|
.Select-menu {
|
|
max-height: ($select-menu-max-height - 2px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
|
|
// options
|
|
|
|
.Select-option {
|
|
box-sizing: border-box;
|
|
background-color: $select-option-bg;
|
|
color: $select-option-color;
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: $select-padding-vertical $select-padding-horizontal;
|
|
|
|
&:last-child {
|
|
@include border-bottom-radius( $select-input-border-radius );
|
|
}
|
|
|
|
&.is-selected {
|
|
background-color: $select-option-selected-bg;
|
|
color: $select-option-selected-color;
|
|
}
|
|
|
|
&.is-focused {
|
|
background-color: $select-option-focused-bg;
|
|
color: $select-option-focused-color;
|
|
}
|
|
|
|
&.is-disabled {
|
|
color: $select-option-disabled-color;
|
|
cursor: default;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// no results
|
|
|
|
.Select-noresults {
|
|
box-sizing: border-box;
|
|
color: $select-noresults-color;
|
|
cursor: default;
|
|
display: block;
|
|
padding: $select-padding-vertical $select-padding-horizontal;
|
|
}
|