less-rails-semantic_ui 2.0.2.0 → 2.0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.travis.yml +2 -2
- data/Appraisals +3 -3
- data/README.md +1 -1
- data/assets/javascripts/semantic_ui/definitions/behaviors/api.js +14 -1
- data/assets/javascripts/semantic_ui/definitions/behaviors/form.js +135 -91
- data/assets/javascripts/semantic_ui/definitions/behaviors/visibility.js +9 -6
- data/assets/javascripts/semantic_ui/definitions/modules/checkbox.js +16 -3
- data/assets/javascripts/semantic_ui/definitions/modules/dropdown.js +67 -20
- data/assets/javascripts/semantic_ui/definitions/modules/modal.js +12 -10
- data/assets/javascripts/semantic_ui/definitions/modules/popup.js +92 -59
- data/assets/javascripts/semantic_ui/definitions/modules/sidebar.js +0 -1
- data/assets/javascripts/semantic_ui/definitions/modules/sticky.js +14 -11
- data/assets/javascripts/semantic_ui/definitions/modules/transition.js +6 -3
- data/assets/stylesheets/semantic_ui/definitions/collections/form.less +6 -1
- data/assets/stylesheets/semantic_ui/definitions/collections/menu.less +35 -15
- data/assets/stylesheets/semantic_ui/definitions/collections/message.less +1 -2
- data/assets/stylesheets/semantic_ui/definitions/collections/table.less +22 -11
- data/assets/stylesheets/semantic_ui/definitions/elements/button.less +17 -20
- data/assets/stylesheets/semantic_ui/definitions/elements/container.less +1 -6
- data/assets/stylesheets/semantic_ui/definitions/elements/divider.less +1 -0
- data/assets/stylesheets/semantic_ui/definitions/elements/icon.less +13 -0
- data/assets/stylesheets/semantic_ui/definitions/elements/input.less +2 -2
- data/assets/stylesheets/semantic_ui/definitions/elements/segment.less +20 -16
- data/assets/stylesheets/semantic_ui/definitions/elements/step.less +35 -25
- data/assets/stylesheets/semantic_ui/definitions/modules/accordion.less +2 -1
- data/assets/stylesheets/semantic_ui/definitions/modules/checkbox.less +99 -62
- data/assets/stylesheets/semantic_ui/definitions/modules/modal.less +1 -1
- data/assets/stylesheets/semantic_ui/definitions/modules/popup.less +7 -0
- data/assets/stylesheets/semantic_ui/themes/basic/elements/step.overrides +3 -0
- data/assets/stylesheets/semantic_ui/themes/basic/elements/step.variables +12 -4
- data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.variables +15 -3
- data/assets/stylesheets/semantic_ui/themes/default/collections/form.variables +1 -1
- data/assets/stylesheets/semantic_ui/themes/default/collections/menu.variables +12 -11
- data/assets/stylesheets/semantic_ui/themes/default/collections/table.variables +11 -2
- data/assets/stylesheets/semantic_ui/themes/default/elements/icon.overrides +2 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/segment.variables +6 -5
- data/assets/stylesheets/semantic_ui/themes/default/elements/step.variables +6 -3
- data/assets/stylesheets/semantic_ui/themes/default/globals/site.variables +10 -9
- data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.variables +32 -11
- data/assets/stylesheets/semantic_ui/themes/github/elements/segment.variables +0 -1
- data/assets/stylesheets/semantic_ui/themes/github/elements/step.variables +7 -1
- data/less-rails-semantic_ui.gemspec +1 -1
- data/lib/less/rails/semantic_ui/version.rb +1 -1
- metadata +3 -3
@@ -372,6 +372,19 @@ i.inverted.circular.grey.icon {
|
|
372
372
|
color: @white !important;
|
373
373
|
}
|
374
374
|
|
375
|
+
/* Black */
|
376
|
+
i.black.icon {
|
377
|
+
color: @black !important;
|
378
|
+
}
|
379
|
+
i.inverted.black.icon {
|
380
|
+
color: @lightBlack !important;
|
381
|
+
}
|
382
|
+
i.inverted.bordeblack.black.icon,
|
383
|
+
i.inverted.circular.black.icon {
|
384
|
+
background-color: @black !important;
|
385
|
+
color: @white !important;
|
386
|
+
}
|
387
|
+
|
375
388
|
/*-------------------
|
376
389
|
Sizes
|
377
390
|
--------------------*/
|
@@ -433,8 +433,8 @@
|
|
433
433
|
}
|
434
434
|
.ui[class*="left action"].input > input {
|
435
435
|
border-left: none;
|
436
|
-
border-top-left-radius: 0px;
|
437
|
-
border-bottom-left-radius: 0px;
|
436
|
+
border-top-left-radius: 0px !important;
|
437
|
+
border-bottom-left-radius: 0px !important;
|
438
438
|
}
|
439
439
|
|
440
440
|
/*--------------------
|
@@ -34,7 +34,7 @@
|
|
34
34
|
|
35
35
|
.ui.segment {
|
36
36
|
position: relative;
|
37
|
-
background
|
37
|
+
background: @background;
|
38
38
|
box-shadow: @boxShadow;
|
39
39
|
margin: @margin;
|
40
40
|
padding: @padding;
|
@@ -56,7 +56,7 @@
|
|
56
56
|
padding-left: 0em;
|
57
57
|
padding-right: 0em;
|
58
58
|
|
59
|
-
background
|
59
|
+
background: none transparent;
|
60
60
|
border-radius: 0px;
|
61
61
|
box-shadow: none;
|
62
62
|
border: none;
|
@@ -197,7 +197,7 @@
|
|
197
197
|
left: 0%;
|
198
198
|
|
199
199
|
border-top: 1px solid @borderColor;
|
200
|
-
background
|
200
|
+
background: @stackedPageBackground;
|
201
201
|
|
202
202
|
width: 100%;
|
203
203
|
height: @stackedHeight;
|
@@ -370,6 +370,7 @@
|
|
370
370
|
/* Horizontal Segment */
|
371
371
|
.ui.horizontal.segments > .segment {
|
372
372
|
flex: 1 1 auto;
|
373
|
+
-ms-flex: 1 1 0px; /* Solves #2550 MS Flex */
|
373
374
|
margin: 0em;
|
374
375
|
min-width: 0px;
|
375
376
|
background-color: transparent;
|
@@ -639,19 +640,21 @@
|
|
639
640
|
border: none;
|
640
641
|
box-shadow: none;
|
641
642
|
}
|
643
|
+
.ui.inverted.segment,
|
644
|
+
.ui.primary.inverted.segment {
|
645
|
+
background: @invertedBackground;
|
646
|
+
color: @invertedTextColor;
|
647
|
+
}
|
648
|
+
|
649
|
+
/* Nested */
|
642
650
|
.ui.inverted.segment .segment {
|
643
651
|
color: @textColor;
|
644
652
|
}
|
645
653
|
.ui.inverted.segment .inverted.segment {
|
646
|
-
color: @
|
647
|
-
}
|
648
|
-
.ui.inverted.segment,
|
649
|
-
.ui.primary.inverted.segment {
|
650
|
-
background-color: @black;
|
651
|
-
color: @white;
|
654
|
+
color: @invertedTextColor;
|
652
655
|
}
|
653
656
|
|
654
|
-
|
657
|
+
/* Attached */
|
655
658
|
.ui.inverted.attached.segment {
|
656
659
|
border-color: @solidWhiteBorderColor;
|
657
660
|
}
|
@@ -685,26 +688,27 @@
|
|
685
688
|
Attached
|
686
689
|
--------------------*/
|
687
690
|
|
688
|
-
|
691
|
+
/* Middle */
|
692
|
+
.ui.attached.segment {
|
689
693
|
top: 0px;
|
690
694
|
bottom: 0px;
|
695
|
+
border-radius: 0px;
|
691
696
|
margin: 0em @attachedHorizontalOffset;
|
692
697
|
width: @attachedWidth;
|
693
698
|
max-width: @attachedWidth;
|
694
|
-
border-radius: 0px;
|
695
699
|
box-shadow: @attachedBoxShadow;
|
696
700
|
border: @attachedBorder;
|
697
701
|
}
|
698
|
-
.ui.
|
702
|
+
.ui.attached + .ui.attached.segment:not(.top) {
|
699
703
|
border-top: none;
|
700
704
|
}
|
701
705
|
|
702
706
|
/* Top */
|
703
707
|
.ui[class*="top attached"].segment {
|
704
|
-
top: @attachedTopOffset;
|
705
708
|
bottom: 0px;
|
706
|
-
margin-top: @verticalMargin;
|
707
709
|
margin-bottom: 0em;
|
710
|
+
top: @attachedTopOffset;
|
711
|
+
margin-top: @verticalMargin;
|
708
712
|
border-radius: @borderRadius @borderRadius 0em 0em;
|
709
713
|
}
|
710
714
|
.ui.segment[class*="top attached"]:first-child {
|
@@ -713,9 +717,9 @@
|
|
713
717
|
|
714
718
|
/* Bottom */
|
715
719
|
.ui.segment[class*="bottom attached"] {
|
716
|
-
top: @attachedBottomOffset;
|
717
720
|
bottom: 0px;
|
718
721
|
margin-top: 0em;
|
722
|
+
top: @attachedBottomOffset;
|
719
723
|
margin-bottom: @verticalMargin;
|
720
724
|
box-shadow: @attachedBottomBoxShadow;
|
721
725
|
border-radius: 0em 0em @borderRadius @borderRadius;
|
@@ -49,33 +49,16 @@
|
|
49
49
|
border: @stepsBorder;
|
50
50
|
}
|
51
51
|
|
52
|
+
/* First Steps */
|
52
53
|
.ui.steps:first-child {
|
53
54
|
margin-top: 0em;
|
54
55
|
}
|
56
|
+
|
57
|
+
/* Last Steps */
|
55
58
|
.ui.steps:last-child {
|
56
59
|
margin-bottom: 0em;
|
57
60
|
}
|
58
61
|
|
59
|
-
.ui.steps .step:first-child {
|
60
|
-
padding-left: @horizontalPadding;
|
61
|
-
border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
|
62
|
-
}
|
63
|
-
.ui.steps .step:last-child {
|
64
|
-
border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
|
65
|
-
}
|
66
|
-
.ui.steps .step:only-child {
|
67
|
-
-webkit-border-radius: @stepsBorderRadius;
|
68
|
-
-moz-border-radius: @stepsBorderRadius;
|
69
|
-
border-radius: @stepsBorderRadius;
|
70
|
-
}
|
71
|
-
|
72
|
-
.ui.steps .step:last-child {
|
73
|
-
border-right: none;
|
74
|
-
margin-right: 0em;
|
75
|
-
}
|
76
|
-
.ui.steps .step:last-child:after {
|
77
|
-
display: @lastArrowDisplay;
|
78
|
-
}
|
79
62
|
|
80
63
|
/*******************************
|
81
64
|
Singular
|
@@ -99,9 +82,10 @@
|
|
99
82
|
border-radius: @borderRadius;
|
100
83
|
border: @border;
|
101
84
|
border-right: @divider;
|
85
|
+
transition: @transition;
|
102
86
|
}
|
103
87
|
|
104
|
-
|
88
|
+
/* Arrow */
|
105
89
|
.ui.steps .step:after {
|
106
90
|
display: none;
|
107
91
|
position: absolute;
|
@@ -118,13 +102,30 @@
|
|
118
102
|
border-color: @borderColor;
|
119
103
|
border-width: @arrowBorderWidth;
|
120
104
|
|
105
|
+
transition: @transition;
|
121
106
|
transform: translateY(-50%) translateX(50%) rotate(-45deg);
|
122
107
|
}
|
123
108
|
|
124
|
-
|
125
|
-
.ui.steps .step:
|
126
|
-
|
109
|
+
/* First Step */
|
110
|
+
.ui.steps .step:first-child {
|
111
|
+
padding-left: @horizontalPadding;
|
112
|
+
border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
|
113
|
+
}
|
114
|
+
|
115
|
+
/* Only Step */
|
116
|
+
.ui.steps .step:only-child {
|
117
|
+
border-radius: @stepsBorderRadius;
|
118
|
+
}
|
119
|
+
|
120
|
+
/* Last Step */
|
121
|
+
.ui.steps .step:last-child {
|
122
|
+
border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
|
127
123
|
}
|
124
|
+
.ui.steps .step:last-child {
|
125
|
+
border-right: none;
|
126
|
+
margin-right: 0em;
|
127
|
+
}
|
128
|
+
|
128
129
|
|
129
130
|
/*******************************
|
130
131
|
Content
|
@@ -223,6 +224,7 @@
|
|
223
224
|
justify-content: flex-start;
|
224
225
|
border-radius: @borderRadius;
|
225
226
|
padding: @verticalPadding @horizontalPadding;
|
227
|
+
border-right: none;
|
226
228
|
border-bottom: @verticalDivider;
|
227
229
|
}
|
228
230
|
.ui.vertical.steps .step:first-child {
|
@@ -253,6 +255,9 @@
|
|
253
255
|
.ui.vertical.steps .step:last-child:after {
|
254
256
|
display: @verticalLastArrowDisplay;
|
255
257
|
}
|
258
|
+
.ui.vertical.steps .active.step:last-child:after {
|
259
|
+
display: @verticalActiveLastArrowDisplay;
|
260
|
+
}
|
256
261
|
|
257
262
|
|
258
263
|
/*---------------
|
@@ -344,7 +349,12 @@
|
|
344
349
|
.ui.steps .active.step:after {
|
345
350
|
display: @activeArrowDisplay;
|
346
351
|
}
|
347
|
-
|
352
|
+
.ui.steps .step:last-child:after {
|
353
|
+
display: @lastArrowDisplay;
|
354
|
+
}
|
355
|
+
.ui.steps .active.step:last-child:after {
|
356
|
+
display: @activeLastArrowDisplay;
|
357
|
+
}
|
348
358
|
|
349
359
|
/* Active Hover */
|
350
360
|
.ui.steps .link.active.step:hover::after,
|
@@ -49,6 +49,8 @@
|
|
49
49
|
line-height: @checkboxLineHeight;
|
50
50
|
min-width: @checkboxSize;
|
51
51
|
}
|
52
|
+
|
53
|
+
/* HTML Checkbox */
|
52
54
|
.ui.checkbox input[type="checkbox"],
|
53
55
|
.ui.checkbox input[type="radio"] {
|
54
56
|
cursor: pointer;
|
@@ -163,8 +165,7 @@
|
|
163
165
|
.ui.checkbox label:active::after {
|
164
166
|
color: @checkboxPressedColor;
|
165
167
|
}
|
166
|
-
.ui.checkbox input
|
167
|
-
.ui.checkbox input[type="radio"]:active ~ label {
|
168
|
+
.ui.checkbox input:active ~ label {
|
168
169
|
color: @labelPressedColor;
|
169
170
|
}
|
170
171
|
|
@@ -172,22 +173,17 @@
|
|
172
173
|
Focus
|
173
174
|
---------------*/
|
174
175
|
|
175
|
-
.ui.checkbox input
|
176
|
-
.ui.checkbox input
|
177
|
-
|
178
|
-
|
179
|
-
background: @checkboxFocusedBackground;
|
180
|
-
border-color: @checkboxFocusedBorderColor;
|
176
|
+
.ui.checkbox input:focus ~ .box:before,
|
177
|
+
.ui.checkbox input:focus ~ label:before {
|
178
|
+
background: @checkboxFocusBackground;
|
179
|
+
border-color: @checkboxFocusBorderColor;
|
181
180
|
}
|
182
|
-
.ui.checkbox input
|
183
|
-
.ui.checkbox input
|
184
|
-
|
185
|
-
.ui.checkbox input[type="radio"]:focus ~ label:after {
|
186
|
-
color: @checkboxFocusedColor;
|
181
|
+
.ui.checkbox input:focus ~ .box:after,
|
182
|
+
.ui.checkbox input:focus ~ label:after {
|
183
|
+
color: @checkboxFocusCheckColor;
|
187
184
|
}
|
188
|
-
.ui.checkbox input
|
189
|
-
|
190
|
-
color: @labelFocusedColor;
|
185
|
+
.ui.checkbox input:focus ~ label {
|
186
|
+
color: @labelFocusColor;
|
191
187
|
}
|
192
188
|
|
193
189
|
/*--------------
|
@@ -209,13 +205,13 @@
|
|
209
205
|
Indeterminate
|
210
206
|
---------------*/
|
211
207
|
|
212
|
-
.ui.checkbox input
|
213
|
-
.ui.checkbox input
|
208
|
+
.ui.checkbox input:indeterminate ~ .box:before,
|
209
|
+
.ui.checkbox input:indeterminate ~ label:before {
|
214
210
|
background: @checkboxIndeterminateBackground;
|
215
211
|
border-color: @checkboxIndeterminateBorderColor;
|
216
212
|
}
|
217
|
-
.ui.checkbox input
|
218
|
-
.ui.checkbox input
|
213
|
+
.ui.checkbox input:indeterminate ~ .box:after,
|
214
|
+
.ui.checkbox input:indeterminate ~ label:after {
|
219
215
|
opacity: @checkboxIndeterminateCheckOpacity;
|
220
216
|
color: @checkboxIndeterminateCheckColor;
|
221
217
|
}
|
@@ -224,12 +220,18 @@
|
|
224
220
|
Active Focus
|
225
221
|
---------------*/
|
226
222
|
|
227
|
-
.ui.checkbox input
|
228
|
-
.ui.checkbox input
|
229
|
-
.ui.checkbox input
|
230
|
-
.ui.checkbox input
|
231
|
-
background: @
|
232
|
-
border-color: @
|
223
|
+
.ui.checkbox input:indeterminate:focus ~ .box:before,
|
224
|
+
.ui.checkbox input:indeterminate:focus ~ label:before,
|
225
|
+
.ui.checkbox input:checked:focus ~ .box:before,
|
226
|
+
.ui.checkbox input:checked:focus ~ label:before {
|
227
|
+
background: @checkboxActiveFocusBackground;
|
228
|
+
border-color: @checkboxActiveFocusBorderColor;
|
229
|
+
}
|
230
|
+
.ui.checkbox input:indeterminate:focus ~ .box:after,
|
231
|
+
.ui.checkbox input:indeterminate:focus ~ label:after,
|
232
|
+
.ui.checkbox input:checked:focus ~ .box:after,
|
233
|
+
.ui.checkbox input:checked:focus ~ label:after {
|
234
|
+
color: @checkboxActiveFocusCheckColor;
|
233
235
|
}
|
234
236
|
|
235
237
|
|
@@ -262,21 +264,17 @@
|
|
262
264
|
|
263
265
|
/* Initialized checkbox moves input below element
|
264
266
|
to prevent manually triggering */
|
265
|
-
.ui.checkbox input
|
266
|
-
.ui.checkbox input[type="radio"].hidden {
|
267
|
+
.ui.checkbox input.hidden {
|
267
268
|
z-index: -1;
|
268
269
|
}
|
269
270
|
|
270
271
|
/* Selectable Label */
|
271
|
-
.ui.checkbox input
|
272
|
-
.ui.checkbox input[type="radio"].hidden + label {
|
272
|
+
.ui.checkbox input.hidden + label {
|
273
273
|
cursor: pointer;
|
274
274
|
user-select: none;
|
275
275
|
}
|
276
276
|
|
277
277
|
|
278
|
-
|
279
|
-
|
280
278
|
/*******************************
|
281
279
|
Types
|
282
280
|
*******************************/
|
@@ -330,16 +328,42 @@
|
|
330
328
|
background-color: @bulletColor;
|
331
329
|
}
|
332
330
|
|
331
|
+
/* Focus */
|
332
|
+
.ui.radio.checkbox input:focus ~ .box:before,
|
333
|
+
.ui.radio.checkbox input:focus ~ label:before {
|
334
|
+
background-color: @radioFocusBackground;
|
335
|
+
}
|
336
|
+
.ui.radio.checkbox input:focus ~ .box:after,
|
337
|
+
.ui.radio.checkbox input:focus ~ label:after {
|
338
|
+
background-color: @radioFocusBulletColor;
|
339
|
+
}
|
340
|
+
|
341
|
+
/* Indeterminate */
|
342
|
+
.ui.radio.checkbox input:indeterminate ~ .box:after,
|
343
|
+
.ui.radio.checkbox input:indeterminate ~ label:after {
|
344
|
+
opacity: 0;
|
345
|
+
}
|
346
|
+
|
333
347
|
/* Active */
|
334
|
-
.ui.radio.checkbox input
|
335
|
-
.ui.radio.checkbox input
|
348
|
+
.ui.radio.checkbox input:checked ~ .box:before,
|
349
|
+
.ui.radio.checkbox input:checked ~ label:before {
|
336
350
|
background-color: @radioActiveBackground;
|
337
351
|
}
|
338
|
-
.ui.radio.checkbox input
|
339
|
-
.ui.radio.checkbox input
|
352
|
+
.ui.radio.checkbox input:checked ~ .box:after,
|
353
|
+
.ui.radio.checkbox input:checked ~ label:after {
|
340
354
|
background-color: @radioActiveBulletColor;
|
341
355
|
}
|
342
356
|
|
357
|
+
/* Active Focus */
|
358
|
+
.ui.radio.checkbox input:focus:checked ~ .box:before,
|
359
|
+
.ui.radio.checkbox input:focus:checked ~ label:before {
|
360
|
+
background-color: @radioActiveFocusBackground;
|
361
|
+
}
|
362
|
+
.ui.radio.checkbox input:focus:checked ~ .box:after,
|
363
|
+
.ui.radio.checkbox input:focus:checked ~ label:after {
|
364
|
+
background-color: @radioActiveFocusBulletColor;
|
365
|
+
}
|
366
|
+
|
343
367
|
/*--------------
|
344
368
|
Slider
|
345
369
|
---------------*/
|
@@ -349,8 +373,7 @@
|
|
349
373
|
}
|
350
374
|
|
351
375
|
/* Input */
|
352
|
-
.ui.slider.checkbox input
|
353
|
-
.ui.slider.checkbox input[type="radio"] {
|
376
|
+
.ui.slider.checkbox input {
|
354
377
|
width: @sliderWidth;
|
355
378
|
height: @sliderHeight;
|
356
379
|
}
|
@@ -408,10 +431,8 @@
|
|
408
431
|
}
|
409
432
|
|
410
433
|
/* Focus */
|
411
|
-
.ui.slider.checkbox input
|
412
|
-
.ui.slider.checkbox input
|
413
|
-
.ui.slider.checkbox input[type="radio"]:focus ~ .box:before,
|
414
|
-
.ui.slider.checkbox input[type="radio"]:focus ~ label:before {
|
434
|
+
.ui.slider.checkbox input:focus ~ .box:before,
|
435
|
+
.ui.slider.checkbox input:focus ~ label:before {
|
415
436
|
background-color: @toggleFocusColor;
|
416
437
|
border: none;
|
417
438
|
}
|
@@ -427,19 +448,29 @@
|
|
427
448
|
}
|
428
449
|
|
429
450
|
/* Active */
|
430
|
-
.ui.slider.checkbox :checked ~ .box,
|
431
|
-
.ui.slider.checkbox :checked ~ label {
|
432
|
-
color: @sliderOnLabelColor;
|
451
|
+
.ui.slider.checkbox input:checked ~ .box,
|
452
|
+
.ui.slider.checkbox input:checked ~ label {
|
453
|
+
color: @sliderOnLabelColor !important;
|
433
454
|
}
|
434
|
-
.ui.slider.checkbox :checked ~ .box:before,
|
435
|
-
.ui.slider.checkbox :checked ~ label:before {
|
436
|
-
background-color: @sliderOnLineColor;
|
455
|
+
.ui.slider.checkbox input:checked ~ .box:before,
|
456
|
+
.ui.slider.checkbox input:checked ~ label:before {
|
457
|
+
background-color: @sliderOnLineColor !important;
|
437
458
|
}
|
438
|
-
.ui.slider.checkbox :checked ~ .box:after,
|
439
|
-
.ui.slider.checkbox :checked ~ label:after {
|
459
|
+
.ui.slider.checkbox input:checked ~ .box:after,
|
460
|
+
.ui.slider.checkbox input:checked ~ label:after {
|
440
461
|
left: @sliderTravelDistance;
|
441
462
|
}
|
442
463
|
|
464
|
+
/* Active Focus */
|
465
|
+
.ui.slider.checkbox input:focus:checked ~ .box,
|
466
|
+
.ui.slider.checkbox input:focus:checked ~ label {
|
467
|
+
color: @sliderOnFocusLabelColor !important;
|
468
|
+
}
|
469
|
+
.ui.slider.checkbox input:focus:checked ~ .box:before,
|
470
|
+
.ui.slider.checkbox input:focus:checked ~ label:before {
|
471
|
+
background-color: @sliderOnFocusLineColor !important;
|
472
|
+
}
|
473
|
+
|
443
474
|
|
444
475
|
/*--------------
|
445
476
|
Toggle
|
@@ -450,8 +481,7 @@
|
|
450
481
|
}
|
451
482
|
|
452
483
|
/* Input */
|
453
|
-
.ui.toggle.checkbox input
|
454
|
-
.ui.toggle.checkbox input[type="radio"] {
|
484
|
+
.ui.toggle.checkbox input {
|
455
485
|
width: @toggleWidth;
|
456
486
|
height: @toggleHeight;
|
457
487
|
}
|
@@ -505,18 +535,14 @@
|
|
505
535
|
transition: @toggleHandleTransition;
|
506
536
|
}
|
507
537
|
|
508
|
-
.ui.toggle.checkbox input
|
509
|
-
.ui.toggle.checkbox input
|
510
|
-
.ui.toggle.checkbox input[type="radio"] ~ .box:after,
|
511
|
-
.ui.toggle.checkbox input[type="radio"] ~ label:after {
|
538
|
+
.ui.toggle.checkbox input ~ .box:after,
|
539
|
+
.ui.toggle.checkbox input ~ label:after {
|
512
540
|
left: @toggleOffOffset;
|
513
541
|
}
|
514
542
|
|
515
543
|
/* Focus */
|
516
|
-
.ui.toggle.checkbox input
|
517
|
-
.ui.toggle.checkbox input
|
518
|
-
.ui.toggle.checkbox input[type="radio"]:focus ~ .box:before,
|
519
|
-
.ui.toggle.checkbox input[type="radio"]:focus ~ label:before {
|
544
|
+
.ui.toggle.checkbox input:focus ~ .box:before,
|
545
|
+
.ui.toggle.checkbox input:focus ~ label:before {
|
520
546
|
background-color: @toggleFocusColor;
|
521
547
|
border: none;
|
522
548
|
}
|
@@ -531,17 +557,28 @@
|
|
531
557
|
/* Active */
|
532
558
|
.ui.toggle.checkbox input:checked ~ .box,
|
533
559
|
.ui.toggle.checkbox input:checked ~ label {
|
534
|
-
color: @toggleOnLabelColor;
|
560
|
+
color: @toggleOnLabelColor !important;
|
535
561
|
}
|
536
562
|
.ui.toggle.checkbox input:checked ~ .box:before,
|
537
563
|
.ui.toggle.checkbox input:checked ~ label:before {
|
538
|
-
background-color: @toggleOnLaneColor;
|
564
|
+
background-color: @toggleOnLaneColor !important;
|
539
565
|
}
|
540
566
|
.ui.toggle.checkbox input:checked ~ .box:after,
|
541
567
|
.ui.toggle.checkbox input:checked ~ label:after {
|
542
568
|
left: @toggleOnOffset;
|
543
569
|
}
|
544
570
|
|
571
|
+
|
572
|
+
/* Active Focus */
|
573
|
+
.ui.toggle.checkbox input:focus:checked ~ .box,
|
574
|
+
.ui.toggle.checkbox input:focus:checked ~ label {
|
575
|
+
color: @toggleOnFocusLabelColor !important;
|
576
|
+
}
|
577
|
+
.ui.toggle.checkbox input:focus:checked ~ .box:before,
|
578
|
+
.ui.toggle.checkbox input:focus:checked ~ label:before {
|
579
|
+
background-color: @toggleOnFocusLaneColor !important;
|
580
|
+
}
|
581
|
+
|
545
582
|
/*******************************
|
546
583
|
Variations
|
547
584
|
*******************************/
|