304 lines
6.2 KiB
SCSS
Executable File
304 lines
6.2 KiB
SCSS
Executable File
//
|
|
// Control
|
|
// ------------------------------
|
|
|
|
@import 'spinner';
|
|
@import 'mixins';
|
|
|
|
.Select {
|
|
position: relative;
|
|
|
|
// disable some browser-specific behaviours that break the input
|
|
input::-webkit-contacts-auto-fill-button,
|
|
input::-webkit-credentials-auto-fill-button {
|
|
display: none !important;
|
|
}
|
|
input::-ms-clear {
|
|
display: none !important;
|
|
}
|
|
input::-ms-reveal {
|
|
display: none !important;
|
|
}
|
|
|
|
// preferred box model
|
|
&,
|
|
& div,
|
|
& input,
|
|
& span {
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
// handle disabled state
|
|
&.is-disabled {
|
|
.Select-arrow-zone {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
> .Select-control {
|
|
background-color: $select-input-bg-disabled;
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-searchable {
|
|
&.is-open > .Select-control {
|
|
cursor: text;
|
|
}
|
|
|
|
&.is-focused:not(.is-open) > .Select-control {
|
|
cursor: text;
|
|
}
|
|
}
|
|
|
|
&.is-open > .Select-control {
|
|
@include border-bottom-radius( 0 );
|
|
background: $select-input-bg;
|
|
border-color: darken($select-input-border-color, 10%) $select-input-border-color lighten($select-input-border-color, 5%);
|
|
|
|
// flip the arrow so its pointing up when the menu is open
|
|
.Select-arrow {
|
|
top: -2px;
|
|
border-color: transparent transparent $select-arrow-color;
|
|
border-width: 0 $select-arrow-width $select-arrow-width;
|
|
}
|
|
}
|
|
|
|
&.is-focused > .Select-control {
|
|
background: $select-input-bg-focus;
|
|
}
|
|
|
|
&.is-focused:not(.is-open) > .Select-control {
|
|
border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
|
|
box-shadow: $select-input-box-shadow-focus;
|
|
}
|
|
|
|
|
|
&.has-value.is-clearable.Select--single > .Select-control .Select-value {
|
|
padding-right: ($select-clear-width + $select-arrow-width * 5);
|
|
}
|
|
|
|
&.has-value.Select--single > .Select-control .Select-value,
|
|
&.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
|
|
.Select-value-label {
|
|
color: $select-text-color;
|
|
}
|
|
a.Select-value-label {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $select-link-hover-color;
|
|
outline: none;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:focus {
|
|
background: $select-input-bg-focus;
|
|
}
|
|
}
|
|
}
|
|
|
|
// fake-hide the input when the control is pseudo-focused
|
|
&.has-value.is-pseudo-focused .Select-input {
|
|
opacity: 0;
|
|
}
|
|
|
|
&.is-open .Select-arrow,
|
|
.Select-arrow-zone:hover > .Select-arrow {
|
|
border-top-color: $select-arrow-color-hover;
|
|
}
|
|
&.Select--rtl {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
// base
|
|
|
|
.Select-control {
|
|
background-color: $select-input-bg;
|
|
border-color: lighten($select-input-border-color, 5%) $select-input-border-color darken($select-input-border-color, 10%);
|
|
border-radius: $select-input-border-radius;
|
|
border: $select-input-border-width solid $select-input-border-color;
|
|
color: $select-text-color;
|
|
cursor: default;
|
|
display: table;
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
height: $select-input-height;
|
|
outline: none;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
box-shadow: $select-input-hover-box-shadow;
|
|
}
|
|
|
|
.Select-input:focus {
|
|
outline: none;
|
|
background: $select-input-bg-focus;
|
|
}
|
|
}
|
|
|
|
// placeholder
|
|
.Select-placeholder,
|
|
.Select--single > .Select-control .Select-value {
|
|
bottom: 0;
|
|
color: $select-input-placeholder;
|
|
left: 0;
|
|
line-height: $select-input-internal-height;
|
|
padding-left: $select-padding-horizontal;
|
|
padding-right: $select-padding-horizontal;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
// crop text
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
// the <input> element users type in
|
|
|
|
.Select-input {
|
|
// inherits `display: inline-block` from "react-input-autosize"
|
|
height: $select-input-internal-height;
|
|
padding-left: $select-padding-horizontal;
|
|
padding-right: $select-padding-horizontal;
|
|
vertical-align: middle;
|
|
|
|
> input {
|
|
background: none transparent;
|
|
border: 0 none;
|
|
box-shadow: none;
|
|
cursor: default;
|
|
display: inline-block;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
// height: $select-input-internal-height;
|
|
margin: 0;
|
|
outline: none;
|
|
// padding: 0;
|
|
line-height: 17px; /* For IE 8 compatibility */
|
|
padding: (($select-input-internal-height - 14) / 2 - 2) 0 (($select-input-internal-height - 14) / 2 + 2); /* For IE 8 compatibility */
|
|
-webkit-appearance: none;
|
|
|
|
.is-focused & {
|
|
cursor: text;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// fake input
|
|
.Select-control:not(.is-searchable) > .Select-input {
|
|
outline: none;
|
|
}
|
|
|
|
// loading indicator
|
|
.Select-loading-zone {
|
|
cursor: pointer;
|
|
display: table-cell;
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: $select-loading-size;
|
|
}
|
|
.Select-loading {
|
|
@include Select-spinner($select-loading-size, $select-loading-color-bg, $select-loading-color);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
// the little cross that clears the field
|
|
|
|
.Select-clear-zone {
|
|
@include animation( Select-animation-fadeIn 200ms );
|
|
color: $select-clear-color;
|
|
cursor: pointer;
|
|
display: table-cell;
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: $select-clear-width;
|
|
|
|
&:hover {
|
|
color: $select-clear-hover-color;
|
|
}
|
|
}
|
|
.Select-clear {
|
|
display: inline-block;
|
|
font-size: $select-clear-size;
|
|
line-height: 1;
|
|
}
|
|
.Select--multi .Select-clear-zone {
|
|
width: $select-clear-width;
|
|
}
|
|
|
|
.Select--multi .Select-multi-value-wrapper {
|
|
display: inline-block;
|
|
}
|
|
.Select .Select-aria-only {
|
|
position: absolute;
|
|
display: inline-block;
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
clip: rect(0,0,0,0);
|
|
overflow: hidden;
|
|
float: left;
|
|
}
|
|
|
|
|
|
// arrow indicator
|
|
|
|
.Select-arrow-zone {
|
|
cursor: pointer;
|
|
display: table-cell;
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: ($select-arrow-width * 5);
|
|
padding-right: $select-arrow-width;
|
|
|
|
.Select--rtl & {
|
|
padding-right: 0;
|
|
padding-left: $select-arrow-width;
|
|
}
|
|
}
|
|
|
|
.Select-arrow {
|
|
border-color: $select-arrow-color transparent transparent;
|
|
border-style: solid;
|
|
border-width: $select-arrow-width $select-arrow-width ($select-arrow-width / 2);
|
|
display: inline-block;
|
|
height: 0;
|
|
width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
|
|
// Animation
|
|
// ------------------------------
|
|
|
|
// fade in
|
|
|
|
@-webkit-keyframes Select-animation-fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes Select-animation-fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|