a43ea992a9
* Updated search select component styling - Fixed styling for better readability and access to delete action * Added changelog file
128 lines
2.3 KiB
SCSS
128 lines
2.3 KiB
SCSS
.ember-power-select-dropdown {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
|
|
&.ember-power-select-dropdown.ember-basic-dropdown-content--below {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.ember-power-select-trigger {
|
|
border: 0;
|
|
border-radius: $radius;
|
|
padding-right: 0;
|
|
|
|
&--active {
|
|
outline-width: 3px;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.ember-power-select-trigger:focus,
|
|
.ember-power-select-trigger--active {
|
|
border: 0;
|
|
}
|
|
|
|
.ember-power-select-status-icon {
|
|
display: none;
|
|
}
|
|
|
|
.ember-power-select-search {
|
|
left: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
transform: translateY(-100%);
|
|
z-index: -1;
|
|
|
|
&::after {
|
|
background: $white;
|
|
bottom: $spacing-xxs;
|
|
content: '';
|
|
left: $spacing-xxs + $spacing-l;
|
|
position: absolute;
|
|
right: $spacing-xxs;
|
|
top: $spacing-xxs;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.ember-power-select-search-input {
|
|
background: transparent;
|
|
border: 0;
|
|
padding: $spacing-xxs $spacing-s;
|
|
padding-left: $spacing-xxs + $spacing-l;
|
|
}
|
|
|
|
div > .ember-power-select-options {
|
|
background: $white;
|
|
border: $base-border;
|
|
box-shadow: $box-shadow-middle;
|
|
margin: -4px $spacing-xs 0;
|
|
padding: $spacing-xxs 0;
|
|
|
|
.ember-power-select-option,
|
|
.ember-power-select-option[aria-current='true'] {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ember-power-select-option[aria-current='true'] {
|
|
background-color: $menu-item-hover-background-color;
|
|
color: $menu-item-hover-color;
|
|
}
|
|
|
|
.ember-power-select-option--no-matches-message {
|
|
color: $grey;
|
|
font-size: $size-8;
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: uppercase;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: transparent;
|
|
color: $grey;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-select-list-item {
|
|
align-items: center;
|
|
display: flex;
|
|
padding: $spacing-xxs;
|
|
justify-content: space-between;
|
|
border-bottom: $light-border;
|
|
|
|
.control .button {
|
|
color: $grey-light;
|
|
min-width: auto;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-select-list-key {
|
|
color: $grey;
|
|
font-size: $size-8;
|
|
}
|
|
|
|
.ember-power-select-dropdown.ember-basic-dropdown-content {
|
|
animation: none;
|
|
|
|
.ember-power-select-options {
|
|
animation: drop-fade-above 0.15s;
|
|
}
|
|
}
|
|
|
|
.search-select .search-icon {
|
|
position: absolute;
|
|
width: 20px;
|
|
top: 5px;
|
|
}
|