|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 BASIC
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7
|
|
|
8 /* Basic Form
|
|
|
9 ========================*/
|
|
|
10 select,
|
|
|
11 button,
|
|
|
12 textarea,
|
|
|
13 input {
|
|
|
14 font-family: inherit;
|
|
|
15 @include placeholder {
|
|
|
16 color: $text-muted;
|
|
|
17 opacity: 1;
|
|
|
18 }
|
|
|
19 }
|
|
|
20
|
|
|
21 .form-group {
|
|
|
22 position: relative;
|
|
|
23 }
|
|
|
24
|
|
|
25 .form-text { color: #8d9ea7 }
|
|
|
26
|
|
|
27 label {
|
|
|
28 text-transform: uppercase;
|
|
|
29 font-weight: 700;
|
|
|
30 color: #222;
|
|
|
31 font-size: 12px;
|
|
|
32 font-family: $headings-font-family;
|
|
|
33
|
|
|
34 .radiobox &,
|
|
|
35 .checkbox & {
|
|
|
36 font-weight: 400;
|
|
|
37 text-transform: none;
|
|
|
38 }
|
|
|
39 }
|
|
|
40
|
|
|
41 .col-form-label {
|
|
|
42 @include padding( calc(#{$input-padding-y} + #{$input-btn-border-width}) null);
|
|
|
43
|
|
|
44 }
|
|
|
45
|
|
|
46 .input-group-addon {
|
|
|
47 border: 1px solid $input-border-color;
|
|
|
48 &:first-child { border-right: 0 }
|
|
|
49 i { font-size: rem(18) }
|
|
|
50 }
|
|
|
51
|
|
|
52 .bootstrap-tagsinput .label-info {
|
|
|
53 background: $info;
|
|
|
54 }
|
|
|
55
|
|
|
56 .checkbox {
|
|
|
57 position: relative;
|
|
|
58 padding: $input-padding-y 0 ;
|
|
|
59 border-width: 1px;
|
|
|
60 &, label, span.label-text {
|
|
|
61 border-style: solid;
|
|
|
62 border-color: transparent;
|
|
|
63 }
|
|
|
64 + .checkbox { padding-top: 0 }
|
|
|
65 input[type="checkbox"] {
|
|
|
66 opacity: 0;
|
|
|
67 &:disabled + label {
|
|
|
68 cursor: not-allowed;
|
|
|
69 }
|
|
|
70 }
|
|
|
71 label {
|
|
|
72 padding-left: 0;
|
|
|
73 cursor: pointer;
|
|
|
74 margin-bottom: 0;
|
|
|
75 border-width: inherit;
|
|
|
76 font-weight: inherit;
|
|
|
77 font-size: inherit;
|
|
|
78 color: inherit;
|
|
|
79 }
|
|
|
80 .label-text {
|
|
|
81 position: relative;
|
|
|
82 padding-left: em(30);
|
|
|
83 border-width: inherit;
|
|
|
84 font-weight: inherit;
|
|
|
85 color: inherit;
|
|
|
86 &:after {
|
|
|
87 @include position(absolute, 50% null null 0);
|
|
|
88 content: "";
|
|
|
89 font-family: "feather";
|
|
|
90 font-feature-settings: 'liga';
|
|
|
91 font-size: $font-size-base;
|
|
|
92 border-color: #eee;
|
|
|
93 border-style: solid;
|
|
|
94 border-width: inherit;
|
|
|
95 @include size( em(18) );
|
|
|
96 line-height: 1;
|
|
|
97 transform: translateY(-50%);
|
|
|
98 transition: all 0.5s ease;
|
|
|
99 color: #fff;
|
|
|
100 display: flex;
|
|
|
101 align-items: center;
|
|
|
102 justify-content: center;
|
|
|
103 }
|
|
|
104 }
|
|
|
105
|
|
|
106 &.checkbox-circle {
|
|
|
107 span.label-text::after {
|
|
|
108 border-radius: 100%;
|
|
|
109 }
|
|
|
110 }
|
|
|
111
|
|
|
112 &.checkbox-rounded {
|
|
|
113 span.label-text::after {
|
|
|
114 border-radius: 5px;
|
|
|
115 }
|
|
|
116 }
|
|
|
117
|
|
|
118 &.checkbox-full-bg {
|
|
|
119 margin-bottom: em(10);
|
|
|
120 span.label-text {
|
|
|
121 font-size: em(14);
|
|
|
122 letter-spacing: -.05em;
|
|
|
123 font-weight: 500;
|
|
|
124 }
|
|
|
125 span.label-text::after {
|
|
|
126 background: #f9f9f9;
|
|
|
127 border-radius: 3px;
|
|
|
128 font-size: rem(12);
|
|
|
129 }
|
|
|
130 }
|
|
|
131
|
|
|
132 &.checkbox-lg {
|
|
|
133 span.label-text {
|
|
|
134 padding-left: em(40);
|
|
|
135 }
|
|
|
136 span.label-text::after {
|
|
|
137 @include size(em(38));
|
|
|
138 }
|
|
|
139 }
|
|
|
140
|
|
|
141 &.checkbox-md {
|
|
|
142 span.label-text {
|
|
|
143 margin-left: em(33);
|
|
|
144 }
|
|
|
145 span.label-text,
|
|
|
146 span.label-text::after {
|
|
|
147 @include size(em(28));
|
|
|
148 }
|
|
|
149 }
|
|
|
150
|
|
|
151 input[type=checkbox]:checked + .label-text:after {
|
|
|
152 content: "\e925";
|
|
|
153 background: #eee;
|
|
|
154 border-color: #ddd;
|
|
|
155 color: $body-color;
|
|
|
156 }
|
|
|
157
|
|
|
158 input[type=checkbox]:disabled + .label-text:after {
|
|
|
159 opacity: 0.5;
|
|
|
160 cursor: not-allowed;
|
|
|
161 }
|
|
|
162
|
|
|
163 &.checkbox-star {
|
|
|
164 .label-text:after {
|
|
|
165 @include size(1em);
|
|
|
166 content: '\e9bf';
|
|
|
167 color: $text-muted;
|
|
|
168 border: 0;
|
|
|
169 font-size: inherit;
|
|
|
170 }
|
|
|
171
|
|
|
172 input[type=checkbox]:checked + .label-text:after {
|
|
|
173 content: '\e9bf';
|
|
|
174 color: $warning;
|
|
|
175 background: none;
|
|
|
176 }
|
|
|
177 }
|
|
|
178
|
|
|
179 @each $col, $val in $theme-colors {
|
|
|
180 &.checkbox-#{$col} {
|
|
|
181 input[type=checkbox]:checked + span.label-text::after {
|
|
|
182 background: $val;
|
|
|
183 border-color: $val;
|
|
|
184 color: #fff;
|
|
|
185 }
|
|
|
186 }
|
|
|
187 &.checkbox-full-bg.checkbox-#{$col} {
|
|
|
188 input[type="checkbox"]:checked + span.label-text::after {
|
|
|
189 color: #fff;
|
|
|
190 }
|
|
|
191 }
|
|
|
192 }
|
|
|
193
|
|
|
194 @each $col, $val in $colors {
|
|
|
195 &.checkbox-#{$col} {
|
|
|
196 input[type=checkbox]:checked + span.label-text::after {
|
|
|
197 background: $val;
|
|
|
198 border-color: $val;
|
|
|
199 color: #fff;
|
|
|
200 }
|
|
|
201 }
|
|
|
202 &.checkbox-full-bg.checkbox-#{$col} {
|
|
|
203 input[type="checkbox"]:checked + span.label-text::after {
|
|
|
204 color: #fff;
|
|
|
205 }
|
|
|
206 }
|
|
|
207 }
|
|
|
208
|
|
|
209 body.rtl & {
|
|
|
210 .label-text {
|
|
|
211 padding-left: 0;
|
|
|
212 padding-right: em(30);
|
|
|
213 &:after {
|
|
|
214 left: auto;
|
|
|
215 right: 0;
|
|
|
216 }
|
|
|
217 }
|
|
|
218 }
|
|
|
219 }
|
|
|
220
|
|
|
221 .radiobox {
|
|
|
222 padding: $input-padding-y 0 ;
|
|
|
223 + .radiobox { padding-top: 0 }
|
|
|
224 input[type="radio"] {
|
|
|
225 position: absolute;
|
|
|
226 opacity: 0;
|
|
|
227 pointer-events: none;
|
|
|
228 &:disabled + label { cursor: not-allowed }
|
|
|
229 }
|
|
|
230 label {
|
|
|
231 cursor: pointer;
|
|
|
232 font-weight: normal;
|
|
|
233 margin-bottom: 0;
|
|
|
234 border-width: inherit;
|
|
|
235 font-weight: inherit;
|
|
|
236 font-size: inherit;
|
|
|
237 color: inherit;
|
|
|
238 }
|
|
|
239 span.label-text {
|
|
|
240 position: relative;
|
|
|
241 padding-left: em(30);
|
|
|
242 border-width: inherit;
|
|
|
243 font-weight: inherit;
|
|
|
244 color: inherit;
|
|
|
245 &:before {
|
|
|
246 content: "";
|
|
|
247 @include size( em(20) );
|
|
|
248 display: inline-block;
|
|
|
249 background: none;
|
|
|
250 border: 1px solid #ddd;
|
|
|
251 border-radius: 100%;
|
|
|
252 vertical-align: middle;
|
|
|
253 @include position(absolute, 50% null null 0);
|
|
|
254 transform: translateY(-50%);
|
|
|
255 }
|
|
|
256 &:after {
|
|
|
257 content: "";
|
|
|
258 @include size(em(10));
|
|
|
259 display: inline-block;
|
|
|
260 border-radius: 100%;
|
|
|
261 background: $primary;
|
|
|
262 @include position(absolute, 50% null null 0);
|
|
|
263 transform: translateY(-50%) translateX(5px) scale(0);
|
|
|
264 opacity: 0;
|
|
|
265 transition: all 0.3s ease;
|
|
|
266 }
|
|
|
267 }
|
|
|
268
|
|
|
269 &.radiobox-lg {
|
|
|
270 span.label-text {
|
|
|
271 padding-left: em(40);
|
|
|
272 }
|
|
|
273 span.label-text::after {
|
|
|
274 @include size(em(38));
|
|
|
275 }
|
|
|
276 }
|
|
|
277
|
|
|
278 &.radiobox-md {
|
|
|
279 span.label-text {
|
|
|
280 margin-left: em(33);
|
|
|
281 }
|
|
|
282 span.label-text,
|
|
|
283 span.label-text::after {
|
|
|
284 @include size(em(28));
|
|
|
285 }
|
|
|
286 }
|
|
|
287
|
|
|
288 input[type="radio"]:checked + span.label-text {
|
|
|
289 &:after {
|
|
|
290 transform: translateY(-50%) translateX(5px) scale(1);
|
|
|
291 opacity: 1;
|
|
|
292 transition-delay: 0.1s;
|
|
|
293 }
|
|
|
294 &:before {
|
|
|
295 border-color: $primary;
|
|
|
296 }
|
|
|
297 }
|
|
|
298
|
|
|
299 input[type="radio"]:disabled + span.label-text {
|
|
|
300 &:after, &:before { opacity: 0.5 }
|
|
|
301 }
|
|
|
302
|
|
|
303 @each $col, $val in $colors {
|
|
|
304 &.radio-#{$col} {
|
|
|
305 input[type=radio]:checked + span.label-text::after {
|
|
|
306 background: $val;
|
|
|
307 }
|
|
|
308 input[type=radio]:checked + span.label-text::before {
|
|
|
309 border-color: $val;
|
|
|
310 }
|
|
|
311 }
|
|
|
312 }
|
|
|
313
|
|
|
314 @each $col, $val in $theme-colors {
|
|
|
315 &.radio-#{$col} {
|
|
|
316 input[type=radio]:checked + span.label-text::after {
|
|
|
317 background: $val;
|
|
|
318 }
|
|
|
319 input[type=radio]:checked + span.label-text::before {
|
|
|
320 border-color: $val;
|
|
|
321 }
|
|
|
322 }
|
|
|
323 }
|
|
|
324
|
|
|
325 body.rtl & {
|
|
|
326 .label-text {
|
|
|
327 padding-left: 0;
|
|
|
328 padding-right: em(30);
|
|
|
329 &:before,
|
|
|
330 &:after {
|
|
|
331 left: auto;
|
|
|
332 right: 0;
|
|
|
333 }
|
|
|
334 &:after {
|
|
|
335 transform: translateY(-50%) translateX(-50%) scale(0)
|
|
|
336 }
|
|
|
337 }
|
|
|
338 input[type="radio"]:checked + span.label-text:after {
|
|
|
339 transform: translateY(-50%) translateX(-50%) scale(1)
|
|
|
340 }
|
|
|
341 }
|
|
|
342 }
|
|
|
343
|
|
|
344 .checkbox input[type=checkbox],
|
|
|
345 .checkbox-inline input[type=checkbox],
|
|
|
346 .radio input[type=radio],
|
|
|
347 .radio-inline input[type=radio] {
|
|
|
348 position: absolute;
|
|
|
349 }
|
|
|
350
|
|
|
351 .form-input-icon {
|
|
|
352 position: relative;
|
|
|
353
|
|
|
354 > i {
|
|
|
355 @include position(absolute, 50% null null rem(10) );
|
|
|
356 transform: translateY(-50%);
|
|
|
357 line-height: 1;
|
|
|
358 z-index: 3;
|
|
|
359 text-align: center;
|
|
|
360 color: #b8beca;
|
|
|
361 }
|
|
|
362
|
|
|
363 .form-control {
|
|
|
364 padding-left: rem(40);
|
|
|
365 }
|
|
|
366 }
|
|
|
367
|
|
|
368 .form-input-icon-right {
|
|
|
369 > i {
|
|
|
370 left: auto;
|
|
|
371 right: rem(10)
|
|
|
372 }
|
|
|
373
|
|
|
374 .form-control {
|
|
|
375 padding-left: 1rem;
|
|
|
376 padding-right: rem(40);
|
|
|
377 }
|
|
|
378 }
|
|
|
379
|
|
|
380 .form-control-rounded {
|
|
|
381 border-radius: 500px;
|
|
|
382 }
|
|
|
383
|
|
|
384 .form-material {
|
|
|
385 .form-control {
|
|
|
386 &:disabled,
|
|
|
387 &.disabled {
|
|
|
388 cursor: not-allowed;
|
|
|
389 color: rgba($content-color, .5);
|
|
|
390 }
|
|
|
391 }
|
|
|
392
|
|
|
393 input, textarea, select {
|
|
|
394 &, &:focus {
|
|
|
395 box-shadow: none;
|
|
|
396 }
|
|
|
397 @include placeholder{
|
|
|
398 opacity: 0;
|
|
|
399 }
|
|
|
400 }
|
|
|
401
|
|
|
402 .form-group {
|
|
|
403 position: relative;
|
|
|
404 }
|
|
|
405
|
|
|
406 .form-group > label {
|
|
|
407 @include position(absolute, 50% null null 0 );
|
|
|
408 transform: translateY(-50%);
|
|
|
409 margin-bottom: 0;
|
|
|
410 transition: all 0.3s ease;
|
|
|
411 pointer-events: none;
|
|
|
412 opacity: 0.7;
|
|
|
413 }
|
|
|
414
|
|
|
415
|
|
|
416 .input-focused,
|
|
|
417 .input-has-value {
|
|
|
418 input {
|
|
|
419 @include placeholder {
|
|
|
420 opacity: 1;
|
|
|
421 }
|
|
|
422 }
|
|
|
423 }
|
|
|
424
|
|
|
425 .form-group > input[type="file"] {
|
|
|
426 padding-top: 1em;
|
|
|
427 }
|
|
|
428
|
|
|
429 .form-group > textarea + label {
|
|
|
430 top: calc(#{$input-padding-y} * 2);
|
|
|
431 }
|
|
|
432
|
|
|
433 .form-group {
|
|
|
434 > input[type="file"] + label,
|
|
|
435 > select + label,
|
|
|
436 &.input-has-value label,
|
|
|
437 &.input-focused label {
|
|
|
438 font-size: .75em;
|
|
|
439 top: 0;
|
|
|
440 opacity: 1;
|
|
|
441 }
|
|
|
442 }
|
|
|
443
|
|
|
444 .form-control {
|
|
|
445 border-radius: 0;
|
|
|
446 border: 0;
|
|
|
447 padding-left: 0;
|
|
|
448 padding-right: 0;
|
|
|
449 background-color: rgba(0, 0, 0, 0);
|
|
|
450 background-position: center bottom, center calc(99%);
|
|
|
451 background-repeat: no-repeat;
|
|
|
452 background-size: 0 2px, 100% 1px;
|
|
|
453 transition: background 0s ease-out 0s;
|
|
|
454 background-image: linear-gradient($color-scheme, $color-scheme), linear-gradient(#e4e9f0, #e4e9f0);
|
|
|
455 padding: calc(#{$input-padding-y} + 4px) 0;
|
|
|
456 }
|
|
|
457
|
|
|
458 .form-control-icon {
|
|
|
459 .input-group .form-control,
|
|
|
460 label {
|
|
|
461 padding-left: rem(35)
|
|
|
462 }
|
|
|
463 .input-group > i {
|
|
|
464 @include position(absolute, 50% null null 0);
|
|
|
465 transform: translateY(-50%);
|
|
|
466 }
|
|
|
467
|
|
|
468 &.input-has-value label,
|
|
|
469 &.input-focused label {
|
|
|
470 padding-left: 0;
|
|
|
471 }
|
|
|
472
|
|
|
473 &.form-control-icon-right {
|
|
|
474 label,
|
|
|
475 .form-control {
|
|
|
476 padding-left: 0;
|
|
|
477 padding-right: rem(35);
|
|
|
478 }
|
|
|
479 .input-group > i {
|
|
|
480 left: auto;
|
|
|
481 right: 0;
|
|
|
482 }
|
|
|
483 }
|
|
|
484 }
|
|
|
485
|
|
|
486 .form-control:focus {
|
|
|
487 background-size: 100% 2px, 100% 1px;
|
|
|
488 outline: 0 none;
|
|
|
489 transition-duration: 0.3s;
|
|
|
490 }
|
|
|
491
|
|
|
492 body.rtl & {
|
|
|
493 .form-group > label {
|
|
|
494 left: auto;
|
|
|
495 right: 0;
|
|
|
496 }
|
|
|
497 }
|
|
|
498 }
|
|
|
499
|
|
|
500 .form-bordered {
|
|
|
501 .form-group {
|
|
|
502 padding-bottom: $form-group-margin-bottom;
|
|
|
503 border-bottom: 1px solid #f2f2f2;
|
|
|
504
|
|
|
505 &:first-child { padding-top: $form-group-margin-bottom }
|
|
|
506 &:last-child { border-bottom: 0 }
|
|
|
507 }
|
|
|
508 }
|
|
|
509
|
|
|
510 .has-feedback label ~ .form-control-feedback {
|
|
|
511 top: 50%;
|
|
|
512 transform: translateY(-50%);
|
|
|
513 right: em(15);
|
|
|
514 }
|
|
|
515
|
|
|
516 /* File Dropzone
|
|
|
517 ========================*/
|
|
|
518 .dropzone {
|
|
|
519 position: relative;
|
|
|
520 border: 2px dashed #ddd;
|
|
|
521 .dz-message {
|
|
|
522 margin: 0;
|
|
|
523 @include position(absolute, 0);
|
|
|
524 span {
|
|
|
525 @include position(absolute, 50% 50% null null);
|
|
|
526 transform: translateY(-50%) translateX(50%);
|
|
|
527 }
|
|
|
528 }
|
|
|
529 .dz-preview {
|
|
|
530 .dz-progress { margin-top: 0 }
|
|
|
531 .dz-details { @include size(100%) }
|
|
|
532
|
|
|
533 .dz-success-mark {
|
|
|
534 @include position(absolute, 50% 50% null null);
|
|
|
535 transform: translateY(-50%) translateX(50%);
|
|
|
536 }
|
|
|
537
|
|
|
538 .dz-success-mark,
|
|
|
539 .dz-error-mark {
|
|
|
540 @include size( rem(54) );
|
|
|
541 }
|
|
|
542
|
|
|
543 &.dz-error {
|
|
|
544 .dz-image {
|
|
|
545 background: $danger;
|
|
|
546 }
|
|
|
547 .dz-details {
|
|
|
548 .dz-filename,
|
|
|
549 .dz-size {
|
|
|
550 opacity: 0.5;
|
|
|
551 }
|
|
|
552 }
|
|
|
553 .dz-error-mark {
|
|
|
554 animation: none;
|
|
|
555 margin: 0;
|
|
|
556 @include position(absolute, 50% 50% null null);
|
|
|
557 transform: translateY(-50%) translateX(-50%);
|
|
|
558 }
|
|
|
559 .dz-error-message {
|
|
|
560 color: #fff;
|
|
|
561 background: $danger;
|
|
|
562
|
|
|
563 &:after {
|
|
|
564 border-bottom-color: $danger;
|
|
|
565 }
|
|
|
566 }
|
|
|
567 }
|
|
|
568 }
|
|
|
569
|
|
|
570 .dz-preview .dz-remove {
|
|
|
571 padding: em(5,9);
|
|
|
572 @include position(absolute, null 0 0 0);
|
|
|
573 z-index: 100;
|
|
|
574 display: block;
|
|
|
575 background: $color-scheme;
|
|
|
576 color: #fff;
|
|
|
577 transition: all 0.3s ease;
|
|
|
578 font-size: em(9);
|
|
|
579 text-transform: uppercase;
|
|
|
580 font-weight: bold;
|
|
|
581 letter-spacing: 0.1em;
|
|
|
582 border-bottom-left-radius: 20px;
|
|
|
583 border-bottom-right-radius: 20px;
|
|
|
584
|
|
|
585 &:hover {
|
|
|
586 text-decoration: none;
|
|
|
587 }
|
|
|
588 }
|
|
|
589
|
|
|
590 .dz-image-preview{
|
|
|
591 .dz-remove {
|
|
|
592 opacity: 0;
|
|
|
593 }
|
|
|
594
|
|
|
595 &:hover .dz-remove {
|
|
|
596 opacity: 1;
|
|
|
597 }
|
|
|
598 }
|
|
|
599
|
|
|
600 }
|
|
|
601
|
|
|
602
|
|
|
603 /* Spectrum Color Picker
|
|
|
604 ========================*/
|
|
|
605 .colorpicker{
|
|
|
606 .input-group-addon {
|
|
|
607 cursor: pointer;
|
|
|
608 position: relative;
|
|
|
609 i {
|
|
|
610 width: 1em;
|
|
|
611 display: block;
|
|
|
612
|
|
|
613 &:after {
|
|
|
614 content: '';
|
|
|
615 background: inherit;
|
|
|
616 @include position(absolute,0);
|
|
|
617 display: block;
|
|
|
618 }
|
|
|
619 }
|
|
|
620 }
|
|
|
621 }
|
|
|
622
|
|
|
623 .sp-container {
|
|
|
624 background: #f9f9f9;
|
|
|
625 border: 1px solid #ddd;
|
|
|
626 }
|
|
|
627
|
|
|
628 .sp-input {
|
|
|
629 border: 1px solid #ddd;
|
|
|
630 &:focus {
|
|
|
631 border-color: #ccc;
|
|
|
632 }
|
|
|
633 }
|
|
|
634
|
|
|
635
|
|
|
636 /* Date Range Picker
|
|
|
637 ========================*/
|
|
|
638 .predefinedRanges {
|
|
|
639 display: inline-block;
|
|
|
640 }
|
|
|
641
|
|
|
642 .daterangepicker {
|
|
|
643
|
|
|
644 td.active {
|
|
|
645 &, &:hover {
|
|
|
646 background-color: $color-scheme;
|
|
|
647 }
|
|
|
648 }
|
|
|
649
|
|
|
650 .input-mini.active {
|
|
|
651 border-color: $color-scheme;
|
|
|
652 }
|
|
|
653
|
|
|
654 body.rtl & {
|
|
|
655 .ranges ul {
|
|
|
656 padding-right: 0;
|
|
|
657 }
|
|
|
658 }
|
|
|
659 }
|
|
|
660
|
|
|
661 .daterangepicker.dropdown-menu {
|
|
|
662 box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
663 width: auto;
|
|
|
664 padding: em(10) em(15);
|
|
|
665 z-index: 10;
|
|
|
666
|
|
|
667 &.show-calendar {
|
|
|
668 padding-top: em(20);
|
|
|
669 }
|
|
|
670
|
|
|
671 .calendar-table {
|
|
|
672 border: 1px solid $theme-border-color;
|
|
|
673 border-left: 0;
|
|
|
674
|
|
|
675 tbody {
|
|
|
676 color: #666;
|
|
|
677 }
|
|
|
678 }
|
|
|
679
|
|
|
680 .left .calendar-table {
|
|
|
681 border-left: 1px solid $theme-border-color;
|
|
|
682 }
|
|
|
683
|
|
|
684 .range_inputs {
|
|
|
685 margin-left: em(15);
|
|
|
686 }
|
|
|
687 }
|
|
|
688
|
|
|
689 .ranges {
|
|
|
690 width: rem(180);
|
|
|
691 padding: 0;
|
|
|
692
|
|
|
693 ul {
|
|
|
694 margin-bottom: em(10);
|
|
|
695 }
|
|
|
696
|
|
|
697 li {
|
|
|
698 margin: 0;
|
|
|
699 padding: em(5) em(20);
|
|
|
700 color: $nav-sub-link-hover-color;
|
|
|
701 background: transparent;
|
|
|
702 border-radius: 0;
|
|
|
703 border: 0;
|
|
|
704
|
|
|
705 &:hover {
|
|
|
706 border: 0;
|
|
|
707 color: $nav-sub-link-hover-color;
|
|
|
708 background: $nav-link-hover-color;
|
|
|
709 }
|
|
|
710
|
|
|
711 &.active {
|
|
|
712 background: $color-scheme;
|
|
|
713 border: 0;
|
|
|
714 &:hover { color: #fff; }
|
|
|
715 }
|
|
|
716 }
|
|
|
717 }
|
|
|
718
|
|
|
719
|
|
|
720 /* Date Picker
|
|
|
721 ========================*/
|
|
|
722 .datepicker {
|
|
|
723 margin: 0 auto;
|
|
|
724
|
|
|
725 &.dropdown-menu {
|
|
|
726 width: auto;
|
|
|
727 padding: em(15) em(25);
|
|
|
728 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
|
|
|
729 }
|
|
|
730
|
|
|
731 tbody {
|
|
|
732 color: #666;
|
|
|
733 }
|
|
|
734
|
|
|
735 table tr td span.active,
|
|
|
736 table tr td span.active:hover,
|
|
|
737 td .month.active {
|
|
|
738 background: $color-scheme !important;
|
|
|
739 }
|
|
|
740
|
|
|
741 td.active,
|
|
|
742 td.selected {
|
|
|
743 background: $color-scheme !important;
|
|
|
744 }
|
|
|
745 }
|
|
|
746
|
|
|
747
|
|
|
748 /* Select2 Select Dropdown
|
|
|
749 ========================*/
|
|
|
750 .select2-selection__rendered {
|
|
|
751 .select2-container--default .select2-selection--single &,
|
|
|
752 .select2-container--default .select2-selection--multiple & {
|
|
|
753 background: none;
|
|
|
754 line-height: $input-height !important;
|
|
|
755 margin-bottom: rem(-2);
|
|
|
756 padding-left: 1em;
|
|
|
757 }
|
|
|
758 }
|
|
|
759
|
|
|
760 .select2-container--default {
|
|
|
761 max-width: 100%;
|
|
|
762
|
|
|
763 &.select2 {
|
|
|
764 width: 100% !important;
|
|
|
765 }
|
|
|
766
|
|
|
767 .select2-selection--single {
|
|
|
768 border: 1px solid #ccc;
|
|
|
769 padding-right: rem(10);
|
|
|
770 height: #{$input-height} !important;
|
|
|
771
|
|
|
772 .select2-selection__arrow {
|
|
|
773 top: 50%;
|
|
|
774 transform: translateY(-50%);
|
|
|
775 right: rem(15);
|
|
|
776 }
|
|
|
777 }
|
|
|
778
|
|
|
779 .select2-selection--multiple {
|
|
|
780 min-height: #{$input-height} !important;
|
|
|
781 height: auto;
|
|
|
782 line-height: 1;
|
|
|
783 border: 1px solid #ccc;
|
|
|
784
|
|
|
785 .select2-selection__rendered {
|
|
|
786 display: flex;
|
|
|
787 flex-wrap: wrap;
|
|
|
788 align-items: center;
|
|
|
789
|
|
|
790 .select2-selection__choice {
|
|
|
791 display: flex-item;
|
|
|
792 margin: em(5,12) em(2,12);
|
|
|
793 border-radius: 20px;
|
|
|
794 font-size: rem(12);
|
|
|
795 line-height: 2em;
|
|
|
796 padding-right: rem(10);
|
|
|
797 background: $info;
|
|
|
798 color: #fff;
|
|
|
799 border-color: $info;
|
|
|
800
|
|
|
801 &:first-child { margin-left: 0 }
|
|
|
802 }
|
|
|
803 }
|
|
|
804
|
|
|
805 .select2-search__field {
|
|
|
806 margin-top: 0;
|
|
|
807 margin-bottom: 0;
|
|
|
808 }
|
|
|
809
|
|
|
810 .select2-selection__rendered .select2-selection__choice {
|
|
|
811 }
|
|
|
812 .select2-selection__choice__remove {
|
|
|
813 width: rem(15);
|
|
|
814 text-align: center;
|
|
|
815 color: #fff;
|
|
|
816 opacity: 0.4;
|
|
|
817 &:hover {
|
|
|
818 opacity: 1;
|
|
|
819 color: #fff;
|
|
|
820 }
|
|
|
821 }
|
|
|
822 }
|
|
|
823
|
|
|
824 &.select2-container--focus .select2-selection--multiple{
|
|
|
825 border-color: $info;
|
|
|
826 }
|
|
|
827
|
|
|
828 .select2-seach--inline {
|
|
|
829 line-height: 1.3 !important;
|
|
|
830 }
|
|
|
831
|
|
|
832 &.select2-container--open .select2-selection--single {
|
|
|
833 border-color: $info;
|
|
|
834 }
|
|
|
835
|
|
|
836 .select2-results__option[aria-selected="true"] {
|
|
|
837 display: none;
|
|
|
838 }
|
|
|
839
|
|
|
840 .select2-results__option--highlighted[aria-selected] {
|
|
|
841 background: $info;
|
|
|
842 }
|
|
|
843 }
|
|
|
844
|
|
|
845 body.rtl {
|
|
|
846 .select2-results__options {
|
|
|
847 padding-right: 0;
|
|
|
848 }
|
|
|
849 }
|
|
|
850
|
|
|
851
|
|
|
852 /* SelectPicker Select Dropdown
|
|
|
853 ========================*/
|
|
|
854 .bootstrap-select{
|
|
|
855 &.btn-group .dropdown-toggle .bs-caret {
|
|
|
856 @include position(absolute, 0);
|
|
|
857 .caret {
|
|
|
858 transform: translateY(-50%);
|
|
|
859 line-height: 1;
|
|
|
860 margin: 0;
|
|
|
861 }
|
|
|
862 }
|
|
|
863 &.open {
|
|
|
864 .dropdown-menu {
|
|
|
865 display: none;
|
|
|
866 }
|
|
|
867 &.show .dropdown-menu {
|
|
|
868 display: block;
|
|
|
869 }
|
|
|
870 }
|
|
|
871 .dropdown-menu {
|
|
|
872 li {
|
|
|
873 a {
|
|
|
874 line-height: 2em;
|
|
|
875 display: block;
|
|
|
876 width: 100%;
|
|
|
877 color: lighten($body-color, 20%);
|
|
|
878 padding: em(5) em(20);
|
|
|
879
|
|
|
880 &:hover,
|
|
|
881 &:focus {
|
|
|
882 color: $body-color;
|
|
|
883 background: #f7fafc;
|
|
|
884 }
|
|
|
885
|
|
|
886 span {
|
|
|
887 &::before {
|
|
|
888 font-family: "feather";
|
|
|
889 font-feature-settings: "liga";
|
|
|
890 font-size: rem(18);
|
|
|
891 font-weight: 600;
|
|
|
892 }
|
|
|
893 }
|
|
|
894
|
|
|
895 .glyphicon-ok::before {
|
|
|
896 content: "\e925";
|
|
|
897 }
|
|
|
898 }
|
|
|
899 }
|
|
|
900 }
|
|
|
901
|
|
|
902 .dropdown-menu[aria-expanded="true"] {
|
|
|
903 display: block;
|
|
|
904 }
|
|
|
905
|
|
|
906 .dropdown-menu {
|
|
|
907 a[aria-selected="true"] {
|
|
|
908 color: #fff !important;
|
|
|
909 background: $primary !important;
|
|
|
910 }
|
|
|
911 }
|
|
|
912 }
|
|
|
913
|
|
|
914 .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
|
|
|
915 top: 50%;
|
|
|
916 transform: translateY(-50%);
|
|
|
917 margin-top: 0;
|
|
|
918 }
|
|
|
919
|
|
|
920
|
|
|
921 /* Tags Input
|
|
|
922 ========================*/
|
|
|
923 .bootstrap-tagsinput {
|
|
|
924 width: 100%;
|
|
|
925 .tag {
|
|
|
926 font-size: rem(12);
|
|
|
927 padding: em(4,12) em(10,12);
|
|
|
928 border-radius: 100px;
|
|
|
929 display: inline-block;
|
|
|
930 margin: em(5,12) 0;
|
|
|
931 [data-role="remove"]::after {
|
|
|
932 content: "\e9ea";
|
|
|
933 font-family: "feather";
|
|
|
934 font-feature-settings: "liga";
|
|
|
935 line-height: 1;
|
|
|
936 vertical-align: middle;
|
|
|
937 padding: 0;
|
|
|
938 margin: 0;
|
|
|
939 }
|
|
|
940 }
|
|
|
941 input[type="text"] {
|
|
|
942 min-width: rem(150);
|
|
|
943 line-height: 2;
|
|
|
944 }
|
|
|
945
|
|
|
946 .input-group & {
|
|
|
947 &:first-child {
|
|
|
948 border-top-right-radius: 0;
|
|
|
949 border-bottom-right-radius: 0;
|
|
|
950 }
|
|
|
951 &:not(:first-child):not(:nth-last-child(2)) {
|
|
|
952 border-radius: 0;
|
|
|
953 }
|
|
|
954 &:nth-last-child(2) {
|
|
|
955 border-top-left-radius: 0;
|
|
|
956 border-bottom-left-radius: 0;
|
|
|
957 }
|
|
|
958 }
|
|
|
959 }
|
|
|
960
|
|
|
961 /* Switchery
|
|
|
962 =======================*/
|
|
|
963 .switchery {
|
|
|
964 width: em(60);
|
|
|
965 > small {
|
|
|
966 box-shadow: none;
|
|
|
967 }
|
|
|
968 }
|
|
|
969
|
|
|
970 .switchery-small {
|
|
|
971 height: rem(24);
|
|
|
972 border-radius: rem(24);
|
|
|
973
|
|
|
974 > small {
|
|
|
975 @include size( rem(24) );
|
|
|
976 }
|
|
|
977 }
|
|
|
978
|
|
|
979 .switchery-large {
|
|
|
980 width: em(80);
|
|
|
981 }
|
|
|
982
|
|
|
983 /* Touchspin
|
|
|
984 =======================*/
|
|
|
985 .bootstrap-touchspin {
|
|
|
986 .input-group-btn-vertical {
|
|
|
987 min-width: rem(20);
|
|
|
988 .bootstrap-touchspin-down,
|
|
|
989 .bootstrap-touchspin-up {
|
|
|
990 display: block;
|
|
|
991 font-size: 9px;
|
|
|
992 @include size(20px, 50%);
|
|
|
993 @include position(absolute, 0 0 null null);
|
|
|
994 i {
|
|
|
995 @include position(absolute, 50% null null 50%);
|
|
|
996 transform: translateY(-50%) translateX(-50%);
|
|
|
997 font-size: 14px;
|
|
|
998 line-height: 1;
|
|
|
999 font-style: normal;
|
|
|
1000 }
|
|
|
1001 }
|
|
|
1002
|
|
|
1003 .bootstrap-touchspin-up i::before {
|
|
|
1004 content: "+";
|
|
|
1005 }
|
|
|
1006 .bootstrap-touchspin-down {
|
|
|
1007 top: calc(50% + 2px);
|
|
|
1008 i:before {
|
|
|
1009 content: "-";
|
|
|
1010 }
|
|
|
1011 }
|
|
|
1012 }
|
|
|
1013 }
|
|
|
1014
|
|
|
1015
|
|
|
1016 /* MultiSelect
|
|
|
1017 ========================*/
|
|
|
1018 .ms-container {
|
|
|
1019 width: 100%;
|
|
|
1020 .ms-list {
|
|
|
1021 border-radius: 0;
|
|
|
1022 &.ms-focus {
|
|
|
1023 border-color: $color-scheme;
|
|
|
1024 box-shadow: 0 0 7px -2px $color-scheme;
|
|
|
1025 }
|
|
|
1026 }
|
|
|
1027 .ms-selection,
|
|
|
1028 .ms-selectable {
|
|
|
1029 li {
|
|
|
1030 line-height: 2;
|
|
|
1031 &.ms-hover {
|
|
|
1032 background: $color-scheme;
|
|
|
1033 }
|
|
|
1034 }
|
|
|
1035 }
|
|
|
1036
|
|
|
1037 body.rtl & {
|
|
|
1038 .ms-optgroup {
|
|
|
1039 padding-right: 0;
|
|
|
1040 }
|
|
|
1041
|
|
|
1042 .ms-optgroup-label {
|
|
|
1043 padding-right: 5px;
|
|
|
1044 }
|
|
|
1045 }
|
|
|
1046 }
|
|
|
1047
|
|
|
1048 .multi-step-signup {
|
|
|
1049 .multi-step-form {
|
|
|
1050 fieldset {
|
|
|
1051 text-align: center;
|
|
|
1052 display: none;
|
|
|
1053 &.active {
|
|
|
1054 display: block;
|
|
|
1055 }
|
|
|
1056 textarea {
|
|
|
1057 resize: none;
|
|
|
1058 }
|
|
|
1059 input[type=number]::-webkit-inner-spin-button,
|
|
|
1060 input[type=number]::-webkit-outer-spin-button {
|
|
|
1061 -webkit-appearance: none;
|
|
|
1062 -moz-appearance: none;
|
|
|
1063 appearance: none;
|
|
|
1064 margin: 0;
|
|
|
1065 }
|
|
|
1066 }
|
|
|
1067 }
|
|
|
1068
|
|
|
1069 .steps-tab {
|
|
|
1070 li {
|
|
|
1071 padding: 0 80px;
|
|
|
1072 position: relative;
|
|
|
1073 }
|
|
|
1074 a {
|
|
|
1075 line-height: 40px;
|
|
|
1076 font-size: 12px;
|
|
|
1077 color: #fff;
|
|
|
1078 }
|
|
|
1079
|
|
|
1080 .step {
|
|
|
1081 display: block;
|
|
|
1082 margin-left: 25%;
|
|
|
1083 width: 40px;
|
|
|
1084 height: 40px;
|
|
|
1085 line-height: 30px;
|
|
|
1086 color: $color-scheme;
|
|
|
1087 background-color: #F5F7FA;
|
|
|
1088 border: 5px solid map-get($theme-colors, color-scheme);
|
|
|
1089 font-size: 0.8rem;
|
|
|
1090 border-radius: 50%;
|
|
|
1091 z-index: 1;
|
|
|
1092 }
|
|
|
1093
|
|
|
1094 @media (max-width: 768px) {
|
|
|
1095 li {
|
|
|
1096 padding: 0 20px;
|
|
|
1097 }
|
|
|
1098 }
|
|
|
1099
|
|
|
1100 li::before {
|
|
|
1101 content: "";
|
|
|
1102 top: 18px;
|
|
|
1103 width: 100%;
|
|
|
1104 height: 5px;
|
|
|
1105 z-index: -1;
|
|
|
1106 display: block;
|
|
|
1107 position: absolute;
|
|
|
1108 left: -50%;
|
|
|
1109 background-color: map-get($theme-colors, color-scheme);
|
|
|
1110 opacity: .7;
|
|
|
1111 }
|
|
|
1112
|
|
|
1113
|
|
|
1114 li:first-child::before {
|
|
|
1115 display: none;
|
|
|
1116 }
|
|
|
1117
|
|
|
1118 li:last-child::after {
|
|
|
1119 display: none;
|
|
|
1120 }
|
|
|
1121
|
|
|
1122 ul{
|
|
|
1123 li.done{
|
|
|
1124 .step {
|
|
|
1125 background-color: $color-scheme;
|
|
|
1126 border-color: $color-scheme;
|
|
|
1127 color: #FFF;
|
|
|
1128 }
|
|
|
1129
|
|
|
1130 &::before {
|
|
|
1131 background-color: $color-scheme;
|
|
|
1132 opacity: 1;
|
|
|
1133 }
|
|
|
1134 }
|
|
|
1135 }
|
|
|
1136
|
|
|
1137 ul{
|
|
|
1138 li.active{
|
|
|
1139 .step {
|
|
|
1140 border-color: $color-scheme;
|
|
|
1141 background-color: #FFF;
|
|
|
1142 color: $color-scheme;
|
|
|
1143 }
|
|
|
1144
|
|
|
1145 &::before {
|
|
|
1146 background-color: $color-scheme;
|
|
|
1147 opacity: 1;
|
|
|
1148 }
|
|
|
1149 }
|
|
|
1150 }
|
|
|
1151 }
|
|
|
1152
|
|
|
1153 body.rtl & {
|
|
|
1154 .steps-tab li::before {
|
|
|
1155 left: auto;
|
|
|
1156 right: calc(-50% - 10px);
|
|
|
1157 }
|
|
|
1158 }
|
|
|
1159 }
|
|
|
1160
|
|
|
1161
|
|
|
1162 /* Bootstrap Wysiwyg
|
|
|
1163 ========================*/
|
|
|
1164 .wysihtml5-sandbox {
|
|
|
1165 width: 100% !important;
|
|
|
1166 border: 1px solid #eee !important;
|
|
|
1167 padding: 20px !important;
|
|
|
1168 }
|
|
|
1169
|
|
|
1170 ul.wysihtml5-toolbar {
|
|
|
1171 border: 1px solid #eee;
|
|
|
1172 border-bottom: 0;
|
|
|
1173 > li {
|
|
|
1174 margin: 0;
|
|
|
1175
|
|
|
1176 .btn {
|
|
|
1177 background: none;
|
|
|
1178 border: 0;
|
|
|
1179
|
|
|
1180 .glyphicon {
|
|
|
1181 margin-right: 1em;
|
|
|
1182 }
|
|
|
1183
|
|
|
1184 &:active,
|
|
|
1185 &:focus {
|
|
|
1186 background: none;
|
|
|
1187 }
|
|
|
1188 }
|
|
|
1189 }
|
|
|
1190
|
|
|
1191 body.rtl & {
|
|
|
1192 > li .btn .glyphicon {
|
|
|
1193 margin-right: 0;
|
|
|
1194 margin-left: 1em;
|
|
|
1195 }
|
|
|
1196 }
|
|
|
1197 }
|
|
|
1198
|
|
|
1199 ul.wysihtml5-toolbar > li .modal {
|
|
|
1200 .btn {
|
|
|
1201 background: $primary;
|
|
|
1202 color: #fff;
|
|
|
1203 }
|
|
|
1204 .checkbox {
|
|
|
1205 label{
|
|
|
1206 padding-left: 30px;
|
|
|
1207 position: relative;
|
|
|
1208 &:before {
|
|
|
1209 content: '';
|
|
|
1210 font-family: 'Material Icons';
|
|
|
1211 font-feature-settings: 'liga';
|
|
|
1212 border: 1px solid #ddd;
|
|
|
1213 display: block;
|
|
|
1214 @include size(20px);
|
|
|
1215 line-height: 20px;
|
|
|
1216 text-align: center;
|
|
|
1217 color: #fff;
|
|
|
1218 @include position(absolute, 0 null null 0);
|
|
|
1219 }
|
|
|
1220
|
|
|
1221 &.checkbox-checked:before {
|
|
|
1222 background: $primary;
|
|
|
1223 border-color: $primary;
|
|
|
1224 content: 'check';
|
|
|
1225 }
|
|
|
1226
|
|
|
1227 }
|
|
|
1228 }
|
|
|
1229 }
|
|
|
1230
|
|
|
1231 .input-group {
|
|
|
1232 body.rtl & {
|
|
|
1233 .input-group-btn-vertical:first-child:last-child .btn,
|
|
|
1234 .input-group-btn-vertical .btn,
|
|
|
1235 .input-group-btn:first-child:last-child .btn,
|
|
|
1236 .input-group-btn .btn,
|
|
|
1237 .input-group-addon:first-child:last-child,
|
|
|
1238 .input-group-addon {
|
|
|
1239 border-radius: $border-radius;
|
|
|
1240 }
|
|
|
1241 .input-group-btn-vertical:first-child .btn,
|
|
|
1242 .input-group-btn:first-child .btn,
|
|
|
1243 .input-group-addon:first-child {
|
|
|
1244 border-top-left-radius: 0;
|
|
|
1245 border-bottom-left-radius: 0;
|
|
|
1246 border-right: 1px solid $theme-border-color;
|
|
|
1247 border-left: 0;
|
|
|
1248 }
|
|
|
1249 .input-group-btn-vertical:last-child .btn,
|
|
|
1250 .input-group-btn:last-child .btn,
|
|
|
1251 .input-group-addon:last-child {
|
|
|
1252 border-top-right-radius: 0;
|
|
|
1253 border-bottom-right-radius: 0;
|
|
|
1254 border-left: 1px solid $theme-border-color;
|
|
|
1255 border-right: 0;
|
|
|
1256 }
|
|
|
1257 .input-group-btn-vertical:not(:first-child):not(:last-child) .btn,
|
|
|
1258 .input-group-btn:not(:first-child):not(:last-child) .btn,
|
|
|
1259 .input-group-addon:not(:first-child):not(:last-child) {
|
|
|
1260 border-radius: 0;
|
|
|
1261 }
|
|
|
1262
|
|
|
1263 .form-control:first-child:last-child,
|
|
|
1264 .form-control {
|
|
|
1265 border-radius: $border-radius;
|
|
|
1266 }
|
|
|
1267 .form-control:first-child {
|
|
|
1268 border-top-left-radius: 0;
|
|
|
1269 border-bottom-left-radius: 0;
|
|
|
1270 }
|
|
|
1271 .form-control:last-child {
|
|
|
1272 border-top-right-radius: 0;
|
|
|
1273 border-bottom-right-radius: 0;
|
|
|
1274 }
|
|
|
1275 .form-control:not(:first-child):not(:last-child) {
|
|
|
1276 border-radius: 0;
|
|
|
1277 }
|
|
|
1278 }
|
|
|
1279 }
|
|
|
1280
|
|
|
1281 input[data-plugin="knob"] {
|
|
|
1282 right: 50% !important;
|
|
|
1283 transform: translateX(50%) !important;
|
|
|
1284 }
|
