Mercurial > nebulaweb3

comparison default/assets/scss/components/_forms.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }