/* Select Field
========================================================================== */
select { display: none; } select.browser-default { display: block; }
select {
background-color: $select-background; width: 100%; padding: $select-padding; border: $select-border; border-radius: $select-radius; height: $input-height;
}
.input-field {
& > select { display: block; position: absolute; width: 0; pointer-events: none; height: 0; top: 0; left: 0; opacity: 0; }
}
.select-label {
position: absolute;
}
.select-wrapper {
&.valid { & > input.select-dropdown { @extend %valid-input-style; } & + label:after { @extend %custom-success-message; } } &.invalid { & > input.select-dropdown { @extend %invalid-input-style; } & + label:after { @extend %custom-error-message; } } &.valid + label, &.invalid + label { width: 100%; pointer-events: none; } & + label:after { @extend %input-after-style; } position: relative; input.select-dropdown { position: relative; cursor: pointer; background-color: transparent; border: none; border-bottom: $input-border; outline: none; height: $input-height; line-height: $input-height; width: 100%; font-size: $input-font-size; margin: $input-margin; padding: 0; display: block; user-select:none; } span.caret { color: initial; position: absolute; right: 0; top: 0; bottom: 0; height: 10px; margin: auto 0; font-size: 10px; line-height: 10px; } & + label { position: absolute; top: -26px; font-size: $label-font-size; }
}
// Disabled styles select:disabled {
color: $input-disabled-color;
}
.select-wrapper.disabled {
span.caret, & + label { color: $input-disabled-color; }
}
.select-wrapper input.select-dropdown:disabled {
color: $input-disabled-color; cursor: default; user-select: none;
}
.select-wrapper i {
color: $select-disabled-color;
}
.select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup {
color: $select-disabled-color; background-color: transparent;
}
.select-dropdown.dropdown-content {
li { &.active { background-color: transparent; } &:hover { background-color: $select-option-hover; } &.selected { background-color: $select-option-focus; } }
}
// Prefix Icons .prefix ~ .select-wrapper {
margin-left: 3rem; width: 92%; width: calc(100% - 3rem);
}
.prefix ~ label { margin-left: 3rem; }
// Icons .select-dropdown li {
img { height: $dropdown-item-height - 10; width: $dropdown-item-height - 10; margin: 5px 15px; float: right; }
}
// Optgroup styles .select-dropdown li.optgroup {
border-top: 1px solid $dropdown-hover-bg-color; &.selected > span { color: rgba(0, 0, 0, .7); } & > span { color: rgba(0, 0, 0, .4); } & ~ li.optgroup-option { padding-left: 1rem; }
}