1/**
2 * tom-select.css (v2.0.0)
3 * Copyright (c) contributors
4 *
5 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
6 * file except in compliance with the License. You may obtain a copy of the License at:
7 * http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software distributed under
10 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
11 * ANY KIND, either express or implied. See the License for the specific language
12 * governing permissions and limitations under the License.
13 *
14 */
15
16
17// base styles
18$select-ns: 'ts' !default;
19$select-font-family: inherit !default;
20$select-font-smoothing: inherit !default;
21$select-font-size: 1.2em !default;
22$select-line-height: 1.1 !default;
23
24$select-color-text: #303030 !default;
25$select-color-border: #d0d0d0 !default;
26$select-color-highlight: rgba(125,168,208,0.2) !default;
27$select-color-input: #fff !default;
28$select-color-input-full: $select-color-input !default;
29$select-color-disabled: #fafafa !default;
30$select-color-item: #f2f2f2 !default;
31$select-color-item-text: $select-color-text !default;
32$select-color-item-border: #d0d0d0 !default;
33$select-color-item-active: #e8e8e8 !default;
34$select-color-item-active-text: $select-color-text !default;
35$select-color-item-active-border: #cacaca !default;
36$select-color-dropdown: #fff !default;
37$select-color-dropdown-border: $select-color-border !default;
38$select-color-dropdown-border-top: #f0f0f0 !default;
39$select-color-dropdown-item-active: #f5fafd !default;
40$select-color-dropdown-item-active-text: #495c68 !default;
41$select-color-dropdown-item-create-text: rgba(red($select-color-text), green($select-color-text), blue($select-color-text), 0.5) !default;
42$select-color-dropdown-item-create-active-text: $select-color-dropdown-item-active-text !default;
43$select-color-optgroup: $select-color-dropdown !default;
44$select-color-optgroup-text: $select-color-text !default;
45$select-lighten-disabled-item: 30% !default;
46$select-lighten-disabled-item-text: 30% !default;
47$select-lighten-disabled-item-border: 30% !default;
48$select-opacity-disabled: 0.5 !default;
49
50$select-shadow-input: none !default;
51$select-shadow-input-focus: none !default;
52$select-border: 1px solid $select-color-border !default;
53$select-dropdown-border: 1px solid $select-color-dropdown-border !default;
54$select-border-radius: 3px !default;
55
56$select-width-item-border: 0 !default;
57$select-max-height-dropdown: 200px !default;
58
59$select-padding-x: 8px !default;
60$select-padding-y: 8px !default;
61$select-padding-item-x: 6px !default;
62$select-padding-item-y: 2px !default;
63$select-padding-dropdown-item-x: $select-padding-x !default;
64$select-padding-dropdown-item-y: 5px !default;
65$select-margin-item-x: 3px !default;
66$select-margin-item-y: 3px !default;
67
68$select-arrow-size: 5px !default;
69$select-arrow-color: #808080 !default;
70$select-arrow-offset: 15px !default;
71
72$select-caret-margin: 0 4px !default;
73$select-caret-margin-rtl: 0 4px 0 -2px !default;
74
75$select-spinner-size: 30px !default;
76$select-spinner-border-size: 5px !default;
77$select-spinner-border-color: $select-color-border !default;
78
79@mixin selectize-vertical-gradient($color-top, $color-bottom) {
80 background-color: mix($color-top, $color-bottom, 60%);
81 background-image: linear-gradient(to bottom, $color-top, $color-bottom);
82 background-repeat: repeat-x;
83}
84
85
86@mixin ts-caret(){
87
88 .#{$select-ns}-wrapper.single{
89
90 .#{$select-ns}-control {
91 padding-right: 2rem;
92
93 &, input {
94 cursor: pointer;
95 }
96
97 &:after {
98 content: ' ';
99 display: block;
100 position: absolute;
101 top: 50%;
102 right: $select-arrow-offset;
103 margin-top: round((-1 * $select-arrow-size / 2));
104 width: 0;
105 height: 0;
106 border-style: solid;
107 border-width: $select-arrow-size $select-arrow-size 0 $select-arrow-size;
108 border-color: $select-arrow-color transparent transparent transparent;
109 }
110 }
111
112 &.dropdown-active .#{$select-ns}-control::after {
113 margin-top: $select-arrow-size * -0.8;
114 border-width: 0 $select-arrow-size $select-arrow-size $select-arrow-size;
115 border-color: transparent transparent $select-arrow-color transparent;
116 }
117
118 &.input-active .#{$select-ns}-control,
119 &.input-active .#{$select-ns}-control input {
120 cursor: text;
121 }
122
123 }
124}
125
126//@import "./plugins/drag_drop.scss";
127//@import "./plugins/checkbox_options.scss";
128//@import "./plugins/clear_button.scss";
129//@import "./plugins/dropdown_header.scss";
130@import "./plugins/dropdown_input";
131//@import "./plugins/input_autogrow.scss";
132//@import "./plugins/optgroup_columns.scss";
133//@import "./plugins/remove_button.scss";
134
135
136.#{$select-ns}-wrapper {
137 position: relative;
138}
139
140.#{$select-ns}-dropdown,
141.#{$select-ns}-control,
142.#{$select-ns}-control input {
143 color: $select-color-text;
144 font-family: $select-font-family;
145 font-size: $select-font-size;
146 line-height: $select-line-height;
147 font-smoothing: $select-font-smoothing;
148}
149
150.#{$select-ns}-control,
151.#{$select-ns}-wrapper.single.input-active .#{$select-ns}-control {
152 background: $select-color-input;
153 cursor: text;
154}
155
156@import 'items';
157@import 'dropdown';
158
159.ts-hidden-accessible{
160 border: 0 !important;
161 clip: rect(0 0 0 0) !important;
162 clip-path: inset(50%) !important;
163 height: 1px !important;
164 overflow: hidden !important;
165 padding: 0 !important;
166 position: absolute !important;
167 width: 1px !important;
168 white-space: nowrap !important;
169}