redoc/lib/common/components/DropDown/dropdown.scss

71 lines
1.3 KiB
SCSS
Raw Normal View History

2016-04-19 18:50:01 +03:00
@import '../../styles/variables';
$silver: #666D71;
$background-silver: #EEEFEF;
$border: darken($background-silver, 2%);
:host {
.dk-select {
max-width: 100%;
font-family: $headers-font;
}
.dk-selected:after {
display: none;
}
// button
.dk-selected {
color: $silver;
border-color: $silver;
padding: 0.4em 0.9em 0.4em 0.4em;
border-radius: 0.4rem;
}
.dk-select-open-down .dk-selected {
border-radius: 0.4rem;
}
.dk-select-open-down .dk-selected, .dk-selected:focus, .dk-selected:hover {
border-color: $primary-color;
color: $primary-color;
}
// tick
.dk-selected:before {
border-top-color: $silver;
border-width: .35em .35em 0;
}
.dk-select-open-down .dk-selected:before,
.dk-select-open-up .dk-selected:before {
border-bottom-color: $primary-color;
border-width: 0 .35em .35em;
}
// items
.dk-select-multi:focus .dk-select-options,
.dk-select-open-down .dk-select-options,
.dk-select-open-up .dk-select-options {
border-color: $silver;
}
.dk-select-options {
margin-top: 0.2em;
border-radius: 0.4em;
}
.dk-option {
color: $black;
padding: 0.4em 0.4em;
&:hover {
background-color: $background-silver;
}
}
.dk-option-selected {
background-color: $background-silver;
}
}