fleet/frontend/components/forms/fields/Dropdown/_styles.scss
2016-11-10 10:33:04 -06:00

89 lines
1.3 KiB
SCSS

.Select {
.Select-control {
border: 1px solid $accent-medium;
border-radius: 2px;
height: 40px;
}
.Select-value {
font-size: $medium;
}
&--single {
> .Select-control {
.Select-value {
line-height: 38px;
}
}
}
.Select-arrow {
border-top-color: $brand;
}
&.is-focused {
.Select-control {
border: 1px solid $brand;
}
&:not(.is-open) {
.Select-control {
box-shadow: none;
}
}
}
&.is-open {
.Select-control {
box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.08);
}
}
.Select-menu-outer {
margin-top: 2px;
box-shadow: 0 1px 3px 1px rgba($black, 0.05);
border: solid 1px $accent-light;
border-radius: 2px;
}
.Select-option {
color: $text-dark;
font-size: $medium;
&.is-focused {
background-color: $brand;
color: $white;
.Select-icon {
color: $brand-ultralight;
}
}
&.is-disabled {
color: $silver;
.Select-icon {
visibility: hidden;
opacity: 0;
}
}
}
.Select-icon {
color: $accent-medium;
}
&.Select--multi {
.Select-option {
&.is-disabled {
color: $text-dark;
cursor: default;
&.is-focused {
background-color: $brand;
color: $white;
}
}
}
}
}