You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
8.9 KiB
296 lines
8.9 KiB
// base styles
|
|
|
|
@selectize-font-family: inherit;
|
|
@selectize-font-smoothing: inherit;
|
|
@selectize-font-size: 13px;
|
|
@selectize-line-height: 18px;
|
|
|
|
@selectize-color-text: #303030;
|
|
@selectize-color-border: #d0d0d0;
|
|
@selectize-color-highlight: rgba(125,168,208,0.2);
|
|
@selectize-color-input: #fff;
|
|
@selectize-color-input-full: @selectize-color-input;
|
|
@selectize-color-disabled: #fafafa;
|
|
@selectize-color-item: #f2f2f2;
|
|
@selectize-color-item-text: @selectize-color-text;
|
|
@selectize-color-item-border: #d0d0d0;
|
|
@selectize-color-item-active: #e8e8e8;
|
|
@selectize-color-item-active-text: @selectize-color-text;
|
|
@selectize-color-item-active-border: #cacaca;
|
|
@selectize-color-dropdown: #fff;
|
|
@selectize-color-dropdown-border: @selectize-color-border;
|
|
@selectize-color-dropdown-border-top: #f0f0f0;
|
|
@selectize-color-dropdown-item-active: #f5fafd;
|
|
@selectize-color-dropdown-item-active-text: #495c68;
|
|
@selectize-color-dropdown-item-create-text: @selectize-color-text;
|
|
@selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text;
|
|
@selectize-color-optgroup: @selectize-color-dropdown;
|
|
@selectize-color-optgroup-text: @selectize-color-text;
|
|
@selectize-lighten-disabled-item: 30%;
|
|
@selectize-lighten-disabled-item-text: 30%;
|
|
@selectize-lighten-disabled-item-border: 30%;
|
|
@selectize-opacity-disabled: 0.5;
|
|
|
|
@selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1);
|
|
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
|
|
@selectize-border: 1px solid @selectize-color-border;
|
|
@selectize-dropdown-border: 1px solid @selectize-color-dropdown-border;
|
|
@selectize-border-radius: 3px;
|
|
|
|
@selectize-width-item-border: 0;
|
|
@selectize-max-height-dropdown: 200px;
|
|
|
|
@selectize-padding-x: 8px;
|
|
@selectize-padding-y: 8px;
|
|
@selectize-padding-item-x: 6px;
|
|
@selectize-padding-item-y: 2px;
|
|
@selectize-padding-dropdown-item-x: @selectize-padding-x;
|
|
@selectize-padding-dropdown-item-y: 5px;
|
|
@selectize-margin-item-x: 3px;
|
|
@selectize-margin-item-y: 3px;
|
|
|
|
@selectize-arrow-size: 5px;
|
|
@selectize-arrow-color: #808080;
|
|
@selectize-arrow-offset: 15px;
|
|
|
|
@selectize-caret-margin: 0 2px 0 0;
|
|
@selectize-caret-margin-rtl: 0 4px 0 -2px;
|
|
|
|
.selectize-border-radius (@radii) {
|
|
-webkit-border-radius: @radii;
|
|
border-radius: @radii;
|
|
}
|
|
.selectize-unselectable () {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.selectize-box-shadow (@shadow) {
|
|
-webkit-box-shadow: @shadow;
|
|
box-shadow: @shadow;
|
|
}
|
|
.selectize-box-sizing (@type: border-box) {
|
|
-webkit-box-sizing: @type;
|
|
-moz-box-sizing: @type;
|
|
box-sizing: @type;
|
|
}
|
|
.selectize-vertical-gradient (@color-top, @color-bottom) {
|
|
background-color: mix(@color-top, @color-bottom, 60%);
|
|
background-image: -moz-linear-gradient(top, @color-top, @color-bottom); // FF 3.6+
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@color-top), to(@color-bottom)); // Safari 4+, Chrome 2+
|
|
background-image: -webkit-linear-gradient(top, @color-top, @color-bottom); // Safari 5.1+, Chrome 10+
|
|
background-image: -o-linear-gradient(top, @color-top, @color-bottom); // Opera 11.10
|
|
background-image: linear-gradient(to bottom, @color-top, @color-bottom); // Standard, IE10
|
|
background-repeat: repeat-x;
|
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color-top),argb(@color-bottom))); // IE9 and down
|
|
}
|
|
|
|
.selectize-control {
|
|
position: relative;
|
|
}
|
|
|
|
.selectize-dropdown, .selectize-input, .selectize-input input {
|
|
color: @selectize-color-text;
|
|
font-family: @selectize-font-family;
|
|
font-size: @selectize-font-size;
|
|
line-height: @selectize-line-height;
|
|
-webkit-font-smoothing: @selectize-font-smoothing;
|
|
}
|
|
|
|
.selectize-input, .selectize-control.single .selectize-input.input-active {
|
|
background: @selectize-color-input;
|
|
cursor: text;
|
|
display: inline-block;
|
|
}
|
|
|
|
.selectize-input {
|
|
border: @selectize-border;
|
|
padding: @selectize-padding-y @selectize-padding-x;
|
|
display: inline-block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
.selectize-box-sizing(border-box);
|
|
.selectize-box-shadow(@selectize-shadow-input);
|
|
.selectize-border-radius(@selectize-border-radius);
|
|
|
|
.selectize-control.multi &.has-items {
|
|
@padding-x: @selectize-padding-x;
|
|
@padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
|
|
@padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y - @selectize-width-item-border;
|
|
padding: @padding-top @padding-x @padding-bottom;
|
|
}
|
|
|
|
&.full {
|
|
background-color: @selectize-color-input-full;
|
|
}
|
|
&.disabled, &.disabled * {
|
|
cursor: default !important;
|
|
}
|
|
&.focus {
|
|
.selectize-box-shadow(@selectize-shadow-input-focus);
|
|
}
|
|
&.dropdown-active {
|
|
.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
|
|
}
|
|
|
|
> * {
|
|
vertical-align: baseline;
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
*display: inline;
|
|
}
|
|
.selectize-control.multi & > div {
|
|
cursor: pointer;
|
|
margin: 0 @selectize-margin-item-x @selectize-margin-item-y 0;
|
|
padding: @selectize-padding-item-y @selectize-padding-item-x;
|
|
background: @selectize-color-item;
|
|
color: @selectize-color-item-text;
|
|
border: @selectize-width-item-border solid @selectize-color-item-border;
|
|
|
|
&.active {
|
|
background: @selectize-color-item-active;
|
|
color: @selectize-color-item-active-text;
|
|
border: @selectize-width-item-border solid @selectize-color-item-active-border;
|
|
}
|
|
}
|
|
// .selectize-control.multi &.disabled > div {
|
|
// &, &.active {
|
|
// color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text);
|
|
// background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item);
|
|
// border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
|
|
// }
|
|
// }
|
|
> input {
|
|
&::-ms-clear {
|
|
display: none;
|
|
}
|
|
display: inline-block !important;
|
|
padding: 0 !important;
|
|
min-height: 0 !important;
|
|
max-height: none !important;
|
|
max-width: 100% !important;
|
|
margin: @selectize-caret-margin !important;
|
|
text-indent: 0 !important;
|
|
border: 0 none !important;
|
|
background: none !important;
|
|
line-height: inherit !important;
|
|
-webkit-user-select: auto !important;
|
|
.selectize-box-shadow(none) !important;
|
|
&:focus { outline: none !important; }
|
|
}
|
|
}
|
|
|
|
.selectize-input::after {
|
|
content: ' ';
|
|
display: block;
|
|
clear: left;
|
|
}
|
|
|
|
.selectize-input.dropdown-active::before {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
background: @selectize-color-dropdown-border-top;
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.selectize-dropdown {
|
|
position: absolute;
|
|
z-index: 10;
|
|
border: @selectize-dropdown-border;
|
|
background: @selectize-color-dropdown;
|
|
margin: -1px 0 0 0;
|
|
border-top: 0 none;
|
|
.selectize-box-sizing(border-box);
|
|
.selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
|
|
.selectize-border-radius(0 0 @selectize-border-radius @selectize-border-radius);
|
|
|
|
[data-selectable] {
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
.highlight {
|
|
background: @selectize-color-highlight;
|
|
.selectize-border-radius(1px);
|
|
}
|
|
}
|
|
.option, .optgroup-header {
|
|
padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
|
|
}
|
|
.option, [data-disabled], [data-disabled] [data-selectable].option {
|
|
cursor: inherit;
|
|
opacity: 0.5;
|
|
}
|
|
[data-selectable].option {
|
|
opacity: 1;
|
|
}
|
|
.optgroup:first-child .optgroup-header {
|
|
border-top: 0 none;
|
|
}
|
|
.optgroup-header {
|
|
color: @selectize-color-optgroup-text;
|
|
background: @selectize-color-optgroup;
|
|
cursor: default;
|
|
}
|
|
.active {
|
|
background-color: @selectize-color-dropdown-item-active;
|
|
color: @selectize-color-dropdown-item-active-text;
|
|
&.create {
|
|
color: @selectize-color-dropdown-item-create-active-text;
|
|
}
|
|
}
|
|
.create {
|
|
color: @selectize-color-dropdown-item-create-text;
|
|
}
|
|
}
|
|
|
|
.selectize-dropdown-content {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: @selectize-max-height-dropdown;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.selectize-control.single .selectize-input {
|
|
&, input { cursor: pointer; }
|
|
&.input-active, &.input-active input { cursor: text; }
|
|
|
|
&:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: @selectize-arrow-offset;
|
|
margin-top: round((-1 * @selectize-arrow-size / 2));
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: @selectize-arrow-size @selectize-arrow-size 0 @selectize-arrow-size;
|
|
border-color: @selectize-arrow-color transparent transparent transparent;
|
|
}
|
|
&.dropdown-active:after {
|
|
margin-top: @selectize-arrow-size * -0.8;
|
|
border-width: 0 @selectize-arrow-size @selectize-arrow-size @selectize-arrow-size;
|
|
border-color: transparent transparent @selectize-arrow-color transparent;
|
|
}
|
|
}
|
|
|
|
.selectize-control.rtl {
|
|
&.single .selectize-input:after {
|
|
left: @selectize-arrow-offset;
|
|
right: auto;
|
|
}
|
|
.selectize-input > input {
|
|
margin: @selectize-caret-margin-rtl !important;
|
|
}
|
|
}
|
|
|
|
.selectize-control .selectize-input.disabled {
|
|
opacity: @selectize-opacity-disabled;
|
|
background-color: @selectize-color-disabled;
|
|
}
|