gorbenko.pavel
13db1388a3
Tests / test (push) Successful in 4m19s
Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/6
158 lines
3.2 KiB
SCSS
158 lines
3.2 KiB
SCSS
@import '../../../../styles/design-tokens';
|
|
|
|
.root {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 11px 13px;
|
|
border: 1px solid $gray-300;
|
|
border-radius: $r-sm;
|
|
background: #fff;
|
|
font-family: $font-sans;
|
|
font-size: 13.5px;
|
|
color: $gray-900;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: .18s;
|
|
|
|
@include input-focus-gold;
|
|
|
|
&:disabled { background: $gray-50; color: $gray-400; cursor: not-allowed; }
|
|
&.open { border-color: $gold-500; box-shadow: 0 0 0 3px rgba(212,160,30,.12); }
|
|
}
|
|
|
|
.value {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Двухстрочный триггер — название сверху, мелкая серая подпись (url) снизу,
|
|
// как itemSub в списке. Отдельно от .value, у которого одна строка целиком
|
|
// участвует в ellipsis и не может параллельно нести подпись другим кеглем.
|
|
.valueStack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.valueMain {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.valueSub {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 11px;
|
|
color: $gray-400;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.placeholder { color: $gray-400; }
|
|
|
|
.chevron { color: $gray-400; flex-shrink: 0; }
|
|
|
|
.menu {
|
|
// position/top/left/width задаются инлайн из DropdownPortal (position: fixed
|
|
// по координатам триггера) — портал рендерится в document.body, чтобы список
|
|
// не обрезался overflow-y: auto модалки (Modal.module.scss .box).
|
|
background: #fff;
|
|
border-radius: $r-md;
|
|
box-shadow: $sh-modal;
|
|
border: 1px solid $gray-200;
|
|
padding: 6px;
|
|
z-index: 400;
|
|
max-height: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.search {
|
|
padding: 9px 12px;
|
|
border: 0;
|
|
border-bottom: 1px solid $gray-200;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-family: $font-sans;
|
|
font-size: 13.5px;
|
|
outline: 0;
|
|
margin-bottom: 6px;
|
|
flex-shrink: 0;
|
|
|
|
&::placeholder { color: $gray-400; }
|
|
}
|
|
|
|
.list {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.item {
|
|
padding: 9px 12px;
|
|
border-radius: $r-sm;
|
|
cursor: pointer;
|
|
font-size: 13.5px;
|
|
color: $gray-700;
|
|
transition: .1s;
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
border: 0;
|
|
background: transparent;
|
|
font-family: $font-sans;
|
|
|
|
&:hover, &.active { background: $gold-50; color: $navy-900; }
|
|
&.selected { font-weight: 600; color: $navy-900; }
|
|
}
|
|
|
|
.itemSub {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: $gray-400;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.empty {
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
color: $gray-400;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.errorText {
|
|
padding: 10px 12px;
|
|
color: $red-500;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sentinel {
|
|
height: 30px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $gray-400;
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.clear {
|
|
margin-top: 6px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid $gray-100;
|
|
flex-shrink: 0;
|
|
}
|