React-select with customized css is added
This commit is contained in:
parent
108f01acf7
commit
7db3fbd574
|
@ -0,0 +1,7 @@
|
||||||
|
/**
|
||||||
|
* React Select
|
||||||
|
* ============
|
||||||
|
* Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
|
||||||
|
* https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
|
||||||
|
* MIT License: https://github.com/JedWatson/react-select
|
||||||
|
*/
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import "control";
|
||||||
|
@import "menu";
|
||||||
|
@import "mixins";
|
||||||
|
@import "multi";
|
||||||
|
@import "spinner";
|
|
@ -0,0 +1,303 @@
|
||||||
|
//
|
||||||
|
// 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; }
|
||||||
|
}
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import "select";
|
||||||
|
@import "control";
|
||||||
|
@import "menu";
|
||||||
|
@import "mixins";
|
||||||
|
@import "multi";
|
||||||
|
@import "spinner";
|
|
@ -0,0 +1,77 @@
|
||||||
|
//
|
||||||
|
// Select Menu
|
||||||
|
// ------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// wrapper around the menu
|
||||||
|
|
||||||
|
.Select-menu-outer {
|
||||||
|
// Unfortunately, having both border-radius and allows scrolling using overflow defined on the same
|
||||||
|
// element forces the browser to repaint on scroll. However, if these definitions are split into an
|
||||||
|
// outer and an inner element, the browser is able to optimize the scrolling behavior and does not
|
||||||
|
// have to repaint on scroll.
|
||||||
|
@include border-bottom-radius( $select-input-border-radius );
|
||||||
|
background-color: $select-input-bg;
|
||||||
|
border: 1px solid $select-input-border-color;
|
||||||
|
border-top-color: mix($select-input-bg, $select-input-border-color, 50%);
|
||||||
|
box-shadow: $select-menu-box-shadow;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: -1px;
|
||||||
|
max-height: $select-menu-max-height;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: $select-menu-zindex;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// wrapper
|
||||||
|
|
||||||
|
.Select-menu {
|
||||||
|
max-height: ($select-menu-max-height - 2px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// options
|
||||||
|
|
||||||
|
.Select-option {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: $select-option-bg;
|
||||||
|
color: $select-option-color;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
padding: $select-padding-vertical $select-padding-horizontal;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
@include border-bottom-radius( $select-input-border-radius );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-selected {
|
||||||
|
background-color: $select-option-selected-bg;
|
||||||
|
color: $select-option-selected-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-focused {
|
||||||
|
background-color: $select-option-focused-bg;
|
||||||
|
color: $select-option-focused-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-disabled {
|
||||||
|
color: $select-option-disabled-color;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// no results
|
||||||
|
|
||||||
|
.Select-noresults {
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $select-noresults-color;
|
||||||
|
cursor: default;
|
||||||
|
display: block;
|
||||||
|
padding: $select-padding-vertical $select-padding-horizontal;
|
||||||
|
}
|
|
@ -0,0 +1,52 @@
|
||||||
|
//
|
||||||
|
// Mixins
|
||||||
|
// ------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
|
||||||
|
@mixin size($width, $height)
|
||||||
|
{
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
}
|
||||||
|
@mixin square($size)
|
||||||
|
{
|
||||||
|
@include size($size, $size);
|
||||||
|
}
|
||||||
|
@mixin border-top-radius($radius)
|
||||||
|
{
|
||||||
|
border-top-right-radius: $radius;
|
||||||
|
border-top-left-radius: $radius;
|
||||||
|
}
|
||||||
|
@mixin border-right-radius($radius)
|
||||||
|
{
|
||||||
|
border-bottom-right-radius: $radius;
|
||||||
|
border-top-right-radius: $radius;
|
||||||
|
}
|
||||||
|
@mixin border-bottom-radius($radius)
|
||||||
|
{
|
||||||
|
border-bottom-right-radius: $radius;
|
||||||
|
border-bottom-left-radius: $radius;
|
||||||
|
}
|
||||||
|
@mixin border-left-radius($radius)
|
||||||
|
{
|
||||||
|
border-bottom-left-radius: $radius;
|
||||||
|
border-top-left-radius: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Vendor Prefixes
|
||||||
|
|
||||||
|
@mixin animation($animation)
|
||||||
|
{
|
||||||
|
-webkit-animation: $animation;
|
||||||
|
-o-animation: $animation;
|
||||||
|
animation: $animation;
|
||||||
|
}
|
||||||
|
@mixin box-sizing($boxmodel)
|
||||||
|
{
|
||||||
|
-webkit-box-sizing: $boxmodel;
|
||||||
|
-moz-box-sizing: $boxmodel;
|
||||||
|
box-sizing: $boxmodel;
|
||||||
|
}
|
|
@ -0,0 +1,111 @@
|
||||||
|
//
|
||||||
|
// Multi-Select
|
||||||
|
// ------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Base
|
||||||
|
|
||||||
|
.Select--multi {
|
||||||
|
|
||||||
|
// add margin to the input element
|
||||||
|
.Select-input {
|
||||||
|
vertical-align: middle;
|
||||||
|
// border: 1px solid transparent;
|
||||||
|
margin-left: $select-padding-horizontal;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
&.Select--rtl .Select-input {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: $select-padding-horizontal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// reduce margin once there is value
|
||||||
|
&.has-value .Select-input {
|
||||||
|
margin-left: $select-item-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Items
|
||||||
|
.Select-value {
|
||||||
|
background-color: $select-item-bg;
|
||||||
|
border-radius: $select-item-border-radius;
|
||||||
|
border: 1px solid $select-item-border-color;
|
||||||
|
color: $select-item-color;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: $select-item-font-size;
|
||||||
|
margin-left: $select-item-gutter;
|
||||||
|
margin-top: $select-item-gutter;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
// common
|
||||||
|
.Select-value-icon,
|
||||||
|
.Select-value-label {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// label
|
||||||
|
.Select-value-label {
|
||||||
|
@include border-right-radius( $select-item-border-radius );
|
||||||
|
cursor: default;
|
||||||
|
padding: $select-item-padding-vertical $select-item-padding-horizontal;
|
||||||
|
}
|
||||||
|
a.Select-value-label {
|
||||||
|
color: $select-item-color;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// icon
|
||||||
|
.Select-value-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
@include border-left-radius( $select-item-border-radius );
|
||||||
|
border-right: 1px solid $select-item-border-color;
|
||||||
|
|
||||||
|
// move the baseline up by 1px
|
||||||
|
padding: ($select-item-padding-vertical - 1) $select-item-padding-horizontal ($select-item-padding-vertical + 1);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $select-item-hover-bg;
|
||||||
|
color: $select-item-hover-color;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: $select-item-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.Select--rtl {
|
||||||
|
.Select-value {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: $select-item-gutter;
|
||||||
|
}
|
||||||
|
.Select-value-icon {
|
||||||
|
border-right: none;
|
||||||
|
border-left: 1px solid $select-item-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Select--multi.is-disabled {
|
||||||
|
.Select-value {
|
||||||
|
background-color: $select-item-disabled-bg;
|
||||||
|
border: 1px solid $select-item-disabled-border-color;
|
||||||
|
color: $select-item-disabled-color;
|
||||||
|
}
|
||||||
|
// icon
|
||||||
|
.Select-value-icon {
|
||||||
|
cursor: not-allowed;
|
||||||
|
border-right: 1px solid $select-item-disabled-border-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background-color: $select-item-disabled-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,75 @@
|
||||||
|
/**
|
||||||
|
* React Select
|
||||||
|
* ============
|
||||||
|
* Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
|
||||||
|
* https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
|
||||||
|
* MIT License: https://github.com/JedWatson/react-select
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Variables
|
||||||
|
// ------------------------------
|
||||||
|
|
||||||
|
// control options
|
||||||
|
$select-input-bg: #fff !default;
|
||||||
|
$select-input-bg-disabled: #f9f9f9 !default;
|
||||||
|
$select-input-bg-focus: $select-input-bg !default;
|
||||||
|
$select-input-border-color: #e5eef9 !default;
|
||||||
|
$select-input-border-radius: 3px !default;
|
||||||
|
$select-input-border-focus: #08c !default; // blue
|
||||||
|
$select-input-box-shadow-focus: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus, 50%) !default;
|
||||||
|
$select-input-border-width: 1px !default;
|
||||||
|
$select-input-height: 40px !default;
|
||||||
|
$select-input-internal-height: ($select-input-height - ($select-input-border-width * 2)) !default;
|
||||||
|
$select-input-placeholder: #aaa !default;
|
||||||
|
$select-text-color: #333 !default;
|
||||||
|
$select-link-hover-color: $select-input-border-focus !default;
|
||||||
|
$select-input-hover-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !default;
|
||||||
|
|
||||||
|
$select-padding-vertical: 8px !default;
|
||||||
|
$select-padding-horizontal: 10px !default;
|
||||||
|
|
||||||
|
// menu options
|
||||||
|
$select-menu-zindex: 1000 !default;
|
||||||
|
$select-menu-max-height: 200px !default;
|
||||||
|
$select-menu-box-shadow: $select-input-hover-box-shadow !default;
|
||||||
|
|
||||||
|
$select-option-color: lighten($select-text-color, 20%) !default;
|
||||||
|
$select-option-bg: $select-input-bg !default;
|
||||||
|
$select-option-focused-color: $select-text-color !default;
|
||||||
|
$select-option-focused-bg: #f2f9fc !default; // pale blue
|
||||||
|
$select-option-selected-color: $select-text-color !default;
|
||||||
|
$select-option-selected-bg: #f5faff !default; // lightest blue
|
||||||
|
$select-option-disabled-color: lighten($select-text-color, 60%) !default;
|
||||||
|
|
||||||
|
$select-noresults-color: lighten($select-text-color, 40%) !default;
|
||||||
|
|
||||||
|
// clear "x" button
|
||||||
|
$select-clear-size: floor(($select-input-height / 2)) !default;
|
||||||
|
$select-clear-color: #999 !default;
|
||||||
|
$select-clear-hover-color: #D0021B !default; // red
|
||||||
|
$select-clear-width: ($select-input-internal-height / 2) !default;
|
||||||
|
|
||||||
|
// arrow indicator
|
||||||
|
$select-arrow-color: #999 !default;
|
||||||
|
$select-arrow-color-hover: #666 !default;
|
||||||
|
$select-arrow-width: 5px !default;
|
||||||
|
|
||||||
|
// loading indicator
|
||||||
|
$select-loading-size: 16px !default;
|
||||||
|
$select-loading-color: $select-text-color !default;
|
||||||
|
$select-loading-color-bg: $select-input-border-color !default;
|
||||||
|
|
||||||
|
// multi-select item
|
||||||
|
$select-item-border-radius: 3px !default;
|
||||||
|
$select-item-gutter: 5px !default;
|
||||||
|
$select-item-padding-vertical: 2px !default;
|
||||||
|
$select-item-padding-horizontal: 5px !default;
|
||||||
|
$select-item-font-size: .9em !default;
|
||||||
|
$select-item-color: #08c !default; // pale blue
|
||||||
|
$select-item-bg: #f2f9fc !default;
|
||||||
|
$select-item-border-color: #e5eef9 !default;
|
||||||
|
$select-item-hover-color: darken($select-item-color, 5%) !default; // pale blue
|
||||||
|
$select-item-hover-bg: darken($select-item-bg, 5%) !default;
|
||||||
|
$select-item-disabled-color: #333 !default;
|
||||||
|
$select-item-disabled-bg: #fcfcfc !default;
|
||||||
|
$select-item-disabled-border-color: darken($select-item-disabled-bg, 10%) !default;
|
|
@ -0,0 +1,24 @@
|
||||||
|
//
|
||||||
|
// Spinner
|
||||||
|
// ------------------------------
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
@mixin Select-spinner($size, $orbit, $satellite)
|
||||||
|
{
|
||||||
|
@include animation( Select-animation-spin 400ms infinite linear );
|
||||||
|
@include square($size);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: floor(($size / 8)) solid $orbit;
|
||||||
|
border-right-color: $satellite;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes Select-animation-spin {
|
||||||
|
to { transform: rotate(1turn); }
|
||||||
|
}
|
||||||
|
@-webkit-keyframes Select-animation-spin {
|
||||||
|
to { -webkit-transform: rotate(1turn); }
|
||||||
|
}
|
Loading…
Reference in New Issue