scinote-web/app/assets/stylesheets/shared/select.scss

103 lines
1.9 KiB
SCSS
Raw Normal View History

.sn-select {
align-items: center;
border: $border-default;
border-color: var(--sn-light-grey);
border-radius: $border-radius-default;
box-sizing: border-box;
cursor: pointer;
display: flex;
padding: .5rem .625rem .5rem 1rem;
position: relative;
&.sn-select--blank {
.sn-select__value {
color: var(--sn-grey);
}
}
&.sn-select--search.sn-select--open {
.sn-select__value {
display: none;
}
}
&.sn-select--search:not(.sn-select--open) {
line-height: normal;
}
.sn-select__value {
all: unset;
display: inline-block;
flex-grow: 1;
line-height: 1.625rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.disabled {
background: var(--sn-sleepy-grey);
cursor: default;
pointer-events: none;
.caret {
border-top-color: var(--sn-grey);
}
}
.sn-select__options {
display: none;
}
.sn-select__search-input {
background: transparent;
border: 0;
display: none;
outline: 0;
width: calc(100% - 1.5em);
}
&.sn-select--open {
background: $color-white;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: var(--sn-science-blue);
.sn-select__search-input {
display: block;
}
.sn-select__options {
background: var(--sn-white);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: $flyout-shadow;
display: block;
left: 0;
max-height: 300px;
overflow: hidden;
top: 2.5rem;
width: 100%;
z-index: 9999;
}
.sn-select__option {
line-height: 1.75rem;
overflow: hidden;
padding: .5rem 1rem;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100%);
}
.sn-select__no-options {
color: var(--sn-grey);
padding: .5em;
}
.sn-select__option:hover {
background: var(--sn-super-light-grey);
}
}
}