mirror of
https://github.com/fleetdm/fleet
synced 2026-05-20 23:48:52 +00:00
89 lines
1.3 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|