@import “../sadui”;
.pretty-dropdown {
@extend %pretty-dropdown-sm; @extend %pretty-dropdown-style-default; .pretty-dropdown-label { color: $colorWhite; }
}
%pretty-dropdown-style-default {
.pretty-dropdown-layer { @include border-radius(0.1em); border: 1px solid (darken($colorInactive, 10)); @include background-image(linear-gradient(top, $colorInactive, $colorActive)); } .pretty-dropdown-menu { > ul { background-color: $colorInactive; @include border-radius(0.1em); li { &.is-selected { background-color: $colorActive; } } } } .pretty-dropdown-icon-container { border-left: 1px solid (darken($colorInactive, 20)); } &.is-disabled { @include opacity(0.2); }
}
%pretty-dropdown-sm {
$dropdownHeight: 1.25em; $iconAreaWidth: 1.25em; .pretty-dropdown-layer { margin-right: $iconAreaWidth; > * { line-height: $dropdownHeight; height: $dropdownHeight; } } .pretty-dropdown-label { margin-left: 0.5em; margin-right: 0.5em; } .pretty-dropdown-icon-container { width: $iconAreaWidth; } .pretty-dropdown-menu > li { padding-left: 0.5em; }
}
%pretty-dropdown-lg {
$dropdownHeight: 2.5em; $iconAreaWidth: 2.5em; .pretty-dropdown-layer { margin-right: $iconAreaWidth; > * { line-height: $dropdownHeight; height: $dropdownHeight; } } .pretty-dropdown-label { margin-left: 1em; margin-right: 1em; } .pretty-dropdown-icon-container { width: $iconAreaWidth; } .pretty-dropdown-menu > li { padding-left: 1em; }
}