Mercurial > hg > NetworkVis

comparison query_builder/selectize/dist/less/selectize.less @ 26:22be4ea663a7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Trying to work out having json request from neo4j display properly in drop down selectize box
author arussell
date Tue, 01 Dec 2015 02:07:13 -0500
parents
children
comparison
equal deleted inserted replaced
25:f82512502b31 26:22be4ea663a7
1 @import "plugins/drag_drop";
2 @import "plugins/dropdown_header";
3 @import "plugins/optgroup_columns";
4 @import "plugins/remove_button";
5
6 // base styles
7
8 @selectize-font-family: inherit;
9 @selectize-font-smoothing: inherit;
10 @selectize-font-size: 13px;
11 @selectize-line-height: 18px;
12
13 @selectize-color-text: #303030;
14 @selectize-color-border: #d0d0d0;
15 @selectize-color-highlight: rgba(125,168,208,0.2);
16 @selectize-color-input: #fff;
17 @selectize-color-input-full: @selectize-color-input;
18 @selectize-color-disabled: #fafafa;
19 @selectize-color-item: #f2f2f2;
20 @selectize-color-item-text: @selectize-color-text;
21 @selectize-color-item-border: #d0d0d0;
22 @selectize-color-item-active: #e8e8e8;
23 @selectize-color-item-active-text: @selectize-color-text;
24 @selectize-color-item-active-border: #cacaca;
25 @selectize-color-dropdown: #fff;
26 @selectize-color-dropdown-border: @selectize-color-border;
27 @selectize-color-dropdown-border-top: #f0f0f0;
28 @selectize-color-dropdown-item-active: #f5fafd;
29 @selectize-color-dropdown-item-active-text: #495c68;
30 @selectize-color-dropdown-item-create-text: rgba(red(@selectize-color-text), green(@selectize-color-text), blue(@selectize-color-text), 0.5);
31 @selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text;
32 @selectize-color-optgroup: @selectize-color-dropdown;
33 @selectize-color-optgroup-text: @selectize-color-text;
34 @selectize-lighten-disabled-item: 30%;
35 @selectize-lighten-disabled-item-text: 30%;
36 @selectize-lighten-disabled-item-border: 30%;
37 @selectize-opacity-disabled: 0.5;
38
39 @selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1);
40 @selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
41 @selectize-border: 1px solid @selectize-color-border;
42 @selectize-dropdown-border: 1px solid @selectize-color-dropdown-border;
43 @selectize-border-radius: 3px;
44
45 @selectize-width-item-border: 0;
46 @selectize-max-height-dropdown: 200px;
47
48 @selectize-padding-x: 8px;
49 @selectize-padding-y: 8px;
50 @selectize-padding-item-x: 6px;
51 @selectize-padding-item-y: 2px;
52 @selectize-padding-dropdown-item-x: @selectize-padding-x;
53 @selectize-padding-dropdown-item-y: 5px;
54 @selectize-margin-item-x: 3px;
55 @selectize-margin-item-y: 3px;
56
57 @selectize-arrow-size: 5px;
58 @selectize-arrow-color: #808080;
59 @selectize-arrow-offset: 15px;
60
61 @selectize-caret-margin: 0 2px 0 0;
62 @selectize-caret-margin-rtl: 0 4px 0 -2px;
63
64 .selectize-border-radius (@radii) {
65 -webkit-border-radius: @radii;
66 -moz-border-radius: @radii;
67 border-radius: @radii;
68 }
69 .selectize-unselectable () {
70 -webkit-user-select: none;
71 -moz-user-select: none;
72 -ms-user-select: none;
73 user-select: none;
74 }
75 .selectize-box-shadow (@shadow) {
76 -webkit-box-shadow: @shadow;
77 box-shadow: @shadow;
78 }
79 .selectize-box-sizing (@type: border-box) {
80 -webkit-box-sizing: @type;
81 -moz-box-sizing: @type;
82 box-sizing: @type;
83 }
84 .selectize-vertical-gradient (@color-top, @color-bottom) {
85 background-color: mix(@color-top, @color-bottom, 60%);
86 background-image: -moz-linear-gradient(top, @color-top, @color-bottom); // FF 3.6+
87 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@color-top), to(@color-bottom)); // Safari 4+, Chrome 2+
88 background-image: -webkit-linear-gradient(top, @color-top, @color-bottom); // Safari 5.1+, Chrome 10+
89 background-image: -o-linear-gradient(top, @color-top, @color-bottom); // Opera 11.10
90 background-image: linear-gradient(to bottom, @color-top, @color-bottom); // Standard, IE10
91 background-repeat: repeat-x;
92 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color-top),argb(@color-bottom))); // IE9 and down
93 }
94
95 .selectize-control {
96 position: relative;
97 }
98
99 .selectize-dropdown, .selectize-input, .selectize-input input {
100 color: @selectize-color-text;
101 font-family: @selectize-font-family;
102 font-size: @selectize-font-size;
103 line-height: @selectize-line-height;
104 -webkit-font-smoothing: @selectize-font-smoothing;
105 }
106
107 .selectize-input, .selectize-control.single .selectize-input.input-active {
108 background: @selectize-color-input;
109 cursor: text;
110 display: inline-block;
111 }
112
113 .selectize-input {
114 border: @selectize-border;
115 padding: @selectize-padding-y @selectize-padding-x;
116 display: inline-block;
117 width: 100%;
118 overflow: hidden;
119 position: relative;
120 z-index: 1;
121 .selectize-box-sizing(border-box);
122 .selectize-box-shadow(@selectize-shadow-input);
123 .selectize-border-radius(@selectize-border-radius);
124
125 .selectize-control.multi &.has-items {
126 @padding-x: @selectize-padding-x;
127 @padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
128 @padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y - @selectize-width-item-border;
129 padding: @padding-top @padding-x @padding-bottom;
130 }
131
132 &.full {
133 background-color: @selectize-color-input-full;
134 }
135 &.disabled, &.disabled * {
136 cursor: default !important;
137 }
138 &.focus {
139 .selectize-box-shadow(@selectize-shadow-input-focus);
140 }
141 &.dropdown-active {
142 .selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
143 }
144
145 > * {
146 vertical-align: baseline;
147 display: -moz-inline-stack;
148 display: inline-block;
149 zoom: 1;
150 *display: inline;
151 }
152 .selectize-control.multi & > div {
153 cursor: pointer;
154 margin: 0 @selectize-margin-item-x @selectize-margin-item-y 0;
155 padding: @selectize-padding-item-y @selectize-padding-item-x;
156 background: @selectize-color-item;
157 color: @selectize-color-item-text;
158 border: @selectize-width-item-border solid @selectize-color-item-border;
159
160 &.active {
161 background: @selectize-color-item-active;
162 color: @selectize-color-item-active-text;
163 border: @selectize-width-item-border solid @selectize-color-item-active-border;
164 }
165 }
166 .selectize-control.multi &.disabled > div {
167 &, &.active {
168 color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text);
169 background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item);
170 border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
171 }
172 }
173 > input {
174 &::-ms-clear {
175 display: none;
176 }
177 display: inline-block !important;
178 padding: 0 !important;
179 min-height: 0 !important;
180 max-height: none !important;
181 max-width: 100% !important;
182 margin: @selectize-caret-margin !important;
183 text-indent: 0 !important;
184 border: 0 none !important;
185 background: none !important;
186 line-height: inherit !important;
187 -webkit-user-select: auto !important;
188 .selectize-box-shadow(none) !important;
189 &:focus { outline: none !important; }
190 }
191 }
192
193 .selectize-input::after {
194 content: ' ';
195 display: block;
196 clear: left;
197 }
198
199 .selectize-input.dropdown-active::before {
200 content: ' ';
201 display: block;
202 position: absolute;
203 background: @selectize-color-dropdown-border-top;
204 height: 1px;
205 bottom: 0;
206 left: 0;
207 right: 0;
208 }
209
210 .selectize-dropdown {
211 position: absolute;
212 z-index: 10;
213 border: @selectize-dropdown-border;
214 background: @selectize-color-dropdown;
215 margin: -1px 0 0 0;
216 border-top: 0 none;
217 .selectize-box-sizing(border-box);
218 .selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
219 .selectize-border-radius(0 0 @selectize-border-radius @selectize-border-radius);
220
221 [data-selectable] {
222 cursor: pointer;
223 overflow: hidden;
224 .highlight {
225 background: @selectize-color-highlight;
226 .selectize-border-radius(1px);
227 }
228 }
229 [data-selectable], .optgroup-header {
230 padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
231 }
232 .optgroup:first-child .optgroup-header {
233 border-top: 0 none;
234 }
235 .optgroup-header {
236 color: @selectize-color-optgroup-text;
237 background: @selectize-color-optgroup;
238 cursor: default;
239 }
240 .active {
241 background-color: @selectize-color-dropdown-item-active;
242 color: @selectize-color-dropdown-item-active-text;
243 &.create {
244 color: @selectize-color-dropdown-item-create-active-text;
245 }
246 }
247 .create {
248 color: @selectize-color-dropdown-item-create-text;
249 }
250 }
251
252 .selectize-dropdown-content {
253 overflow-y: auto;
254 overflow-x: hidden;
255 max-height: @selectize-max-height-dropdown;
256 }
257
258 .selectize-control.single .selectize-input {
259 &, input { cursor: pointer; }
260 &.input-active, &.input-active input { cursor: text; }
261
262 &:after {
263 content: ' ';
264 display: block;
265 position: absolute;
266 top: 50%;
267 right: @selectize-arrow-offset;
268 margin-top: round((-1 * @selectize-arrow-size / 2));
269 width: 0;
270 height: 0;
271 border-style: solid;
272 border-width: @selectize-arrow-size @selectize-arrow-size 0 @selectize-arrow-size;
273 border-color: @selectize-arrow-color transparent transparent transparent;
274 }
275 &.dropdown-active:after {
276 margin-top: @selectize-arrow-size * -0.8;
277 border-width: 0 @selectize-arrow-size @selectize-arrow-size @selectize-arrow-size;
278 border-color: transparent transparent @selectize-arrow-color transparent;
279 }
280 }
281
282 .selectize-control.rtl {
283 &.single .selectize-input:after {
284 left: @selectize-arrow-offset;
285 right: auto;
286 }
287 .selectize-input > input {
288 margin: @selectize-caret-margin-rtl !important;
289 }
290 }
291
292 .selectize-control .selectize-input.disabled {
293 opacity: @selectize-opacity-disabled;
294 background-color: @selectize-color-disabled;
295 }