@lucca-front/scss 7.2.0 → 7.3.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +1 -1
  3. package/src/components/_button.scss +109 -74
  4. package/src/components/_form.scss +2 -5
  5. package/src/components/inputs/checkbox/_checkbox.scss +41 -37
  6. package/src/components/inputs/radio/_radio.scss +49 -49
  7. package/src/components/inputs/radio-buttons/_radio-buttons.scss +46 -21
  8. package/src/components/inputs/switch/_switch.scss +8 -7
  9. package/src/components/inputs/textfield/_textfield.framed.scss +8 -59
  10. package/src/components/inputs/textfield/_textfield.outlined.scss +15 -6
  11. package/src/components/inputs/textfield/_textfield.scss +6 -5
  12. package/src/mixins/_forms.scss +28 -24
  13. package/src/theming/_commons.scss +1 -1
  14. package/src/theming/components/_radio.theme.scss +1 -1
  15. package/src/theming/components/_switch.theme.scss +1 -1
  16. package/src/theming/components/_textfield.theme.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "7.2.0",
3
+ "version": "7.3.0-rc.0",
4
4
  "description": "a scss-framework based on trello's css naming",
5
5
  "main": "src/main.scss",
6
6
  "scripts": {},
package/src/components/_button.scss CHANGED
@@ -5,29 +5,24 @@
5
5
  background-color: _color($palette);
6
6
  color: _color($palette, "text");
7
7
 
8
- &:hover:not([disabled]) {
9
- background-color: _color($palette, "600");
10
- box-shadow: _theme('commons.box-shadow.xs');
11
- }
8
+ &:not([disabled], .is-disabled) {
9
+ &:hover {
10
+ background-color: _color($palette, "600");
11
+ box-shadow: _theme('commons.box-shadow.xs');
12
+ }
12
13
 
13
- &:focus {
14
- box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($palette, "200");
15
- outline: none;
16
- background-color: _color($palette, "600");
17
- }
14
+ &:focus {
15
+ box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($palette, "200");
16
+ outline: none;
17
+ background-color: _color($palette, "600");
18
+ }
18
19
 
19
- &:active:not([disabled]) {
20
- background-color: _color($palette, "800");
21
- box-shadow: 0 0 0 4px _color($palette, "300");
20
+ &:active {
21
+ background-color: _color($palette, "800");
22
+ box-shadow: 0 0 0 4px _color($palette, "300");
23
+ }
22
24
  }
23
25
 
24
- &[disabled],
25
- &.is-disabled {
26
- background-color: _color($palette, "500");
27
- color: _color($palette, "300");
28
- cursor: default;
29
- pointer-events: none;
30
- }
31
26
 
32
27
  .button-counter {
33
28
  background-color: _color($palette, "500");
@@ -35,33 +30,37 @@
35
30
  }
36
31
 
37
32
  @mixin buttonLinkColoring($palette) {
38
- &:focus:not([disabled]) {
39
- box-shadow: 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "300");
40
- background: _color($palette, "100");
33
+ &:not([disabled], .is-disabled) {
34
+ &:focus {
35
+ box-shadow: 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "300");
36
+ background: _color($palette, "100");
37
+ }
41
38
  }
42
39
  }
43
40
 
44
41
  @mixin buttonOutlineColoring($palette) {
45
- box-shadow: inset 0 0 0 1px _color($palette, "400");
46
- color: _color($palette);
47
-
48
- &:hover:not([disabled]) {
49
- background-color: _color($palette, "100");
42
+ &:not([disabled], .is-disabled) {
50
43
  color: _color($palette);
51
- box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), inset 0 0 0 1px _color($palette, "400");
52
- }
44
+ box-shadow: inset 0 0 0 1px _color($palette, "400");
53
45
 
54
- &:focus:not([disabled]) {
55
- background-color: _color($palette, "100");
56
- color: _color($palette);
57
- box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "400");
58
- outline: none;
59
- }
46
+ &:hover {
47
+ background-color: _color($palette, "100");
48
+ color: _color($palette);
49
+ box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _color($palette, "400");
50
+ }
60
51
 
61
- &:active:not([disabled]) {
62
- background-color: _color($palette, "200");
63
- color: _color($palette);
64
- box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color($palette, "200"), inset 0 0 0 1px _color($palette, "500");
52
+ &:focus {
53
+ background-color: _color($palette, "100");
54
+ color: _color($palette);
55
+ box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "400");
56
+ outline: none;
57
+ }
58
+
59
+ &:active {
60
+ background-color: _color($palette, "200");
61
+ color: _color($palette);
62
+ box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color($palette, "200"), inset 0 0 0 1px _color($palette, "500");
63
+ }
65
64
  }
66
65
 
67
66
  .button-counter {
@@ -188,17 +187,17 @@
188
187
  }
189
188
 
190
189
  &.mod-invert {
191
- color: white;
190
+ color: _color('white');
192
191
 
193
- &:hover, &:focus {
194
- &:not([disabled]) {
192
+ &:not([disabled], .is-disabled) {
193
+ &:hover, &:focus {
195
194
  background-color: rgba(255, 255, 255, .1);
196
- color: white;
195
+ color: _color('white');
197
196
  }
198
- }
199
197
 
200
- &:focus {
201
- box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
198
+ &:focus {
199
+ box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
200
+ }
202
201
  }
203
202
  }
204
203
  }
@@ -209,8 +208,8 @@
209
208
  width: 2rem;
210
209
 
211
210
  &::before {
212
- content: "";
213
211
  @include makeIcon("arrow_south");
212
+ content: "";
214
213
  height: 0;
215
214
  vertical-align: text-top;
216
215
  }
@@ -220,37 +219,41 @@
220
219
  }
221
220
  }
222
221
 
223
- &.mod-outline,
224
- &.mod-outlined {
222
+ &.mod-outlined,
223
+ &.mod-outline { // legacy
225
224
  background-color: _color("white");
226
225
  box-shadow: inset 0 0 0 1px _color("grey", "400");
227
226
  color: _color("text.default");
228
227
 
229
- &:hover:not([disabled]) {
230
- background-color: _color("grey", "100");
231
- color: _color("text.default");
232
- box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), inset 0 0 0 1px _color("grey", "400");
233
- }
234
-
235
- &:focus:not([disabled]) {
236
- background-color: _color("grey", "100");
237
- color: _color("text.default");
238
- box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color("primary", "100"), inset 0 0 0 1px _color("primary", "400");
239
- outline: none;
240
- }
241
-
242
- &:active:not([disabled]) {
243
- background-color: _color("grey", "200");
244
- color: _color("text.default");
245
- box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color("primary", "200"), inset 0 0 0 1px _color("primary", "500");
228
+ &:not([disabled], .is-disabled) {
229
+ &:hover {
230
+ background-color: _color("grey", "100");
231
+ color: _color("text.default");
232
+ box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _color("grey", "400");
233
+ }
234
+
235
+ &:focus {
236
+ background-color: _color("grey", "100");
237
+ color: _color("text.default");
238
+ box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color("primary", "100"), inset 0 0 0 1px _color("primary", "400");
239
+ outline: none;
240
+ }
241
+
242
+ &:active {
243
+ background-color: _color("grey", "200");
244
+ color: _color("text.default");
245
+ box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color("primary", "200"), inset 0 0 0 1px _color("primary", "500");
246
+ }
246
247
  }
247
248
 
249
+
250
+
248
251
  // TODO delete this class ?
249
252
  &.mod-white {
250
253
  background-color: _color("white");
251
254
  color: _color("grey", "700");
252
255
  }
253
-
256
+
254
257
  // palette colors
255
258
  @each $name, $palette in _getMap("palettes") {
256
259
  &.palette-#{$name} {
@@ -312,6 +315,26 @@
312
315
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
313
316
 
314
317
  .button {
318
+ /* Disabled */
319
+
320
+ &.is-disabled,
321
+ &[disabled] {
322
+ outline: none;
323
+ background-color: _color('grey', 100);
324
+ color: _color('grey', 500);
325
+ cursor: default;
326
+
327
+ &.mod-outlined,
328
+ &.mod-outline { // legacy
329
+ background-color: _color('white');
330
+ border-color: _color('grey', 200);
331
+ }
332
+
333
+ &.mod-link {
334
+ color: _color('grey', 500);
335
+ background-color: transparent;
336
+ }
337
+ }
315
338
 
316
339
  /* Loading */
317
340
 
@@ -385,7 +408,7 @@
385
408
  }
386
409
 
387
410
  .button {
388
- @include buttonColoring("button.default-palette");
411
+ // @include buttonColoring("button.default-palette");
389
412
 
390
413
  border-radius: 0;
391
414
  display: block;
@@ -393,7 +416,10 @@
393
416
  padding-left: _theme("spacings.small");
394
417
  padding-right: _theme("spacings.small");
395
418
  position: relative;
396
- border-right: 1px solid rgba(0, 0, 0, .1);
419
+
420
+ &:not(.mod-outline, .mod-outlined) {
421
+ border-right: _theme('commons.divider.width') solid rgba(0, 0, 0, .1);
422
+ }
397
423
 
398
424
  &:first-child {
399
425
  border-radius: _component("button.border.radius") 0 0 _component("button.border.radius");
@@ -404,13 +430,22 @@
404
430
  border-right: 0;
405
431
  }
406
432
 
407
- &:hover, &:focus {
408
- z-index: 1;
433
+ &:not(:first-child) {
434
+ &.mod-outline,
435
+ &.mod-outlined {
436
+ margin-left: -1px;
437
+ }
409
438
  }
410
439
 
411
- &:focus {
412
- background-color: _color("primary", "600");
413
- box-shadow: none;
440
+ &:not([disabled], .is-disabled) {
441
+ &:hover, &:focus {
442
+ z-index: 1;
443
+ }
444
+
445
+ &:focus {
446
+ background-color: _color("primary", "600");
447
+ box-shadow: none;
448
+ }
414
449
  }
415
450
  }
416
451
 
package/src/components/_form.scss CHANGED
@@ -124,6 +124,7 @@
124
124
  .checkboxesfield.mod-framed,
125
125
  .radiosfield.mod-framed,
126
126
  .form.mod-framed .fieldsetWrapper {
127
+ background-color: _color("white");
127
128
  padding: 0;
128
129
  box-shadow: fakeborderoverlay(_component("field.framed.border"));
129
130
  transition: background-color _theme("commons.animations.durations.standard");
@@ -139,7 +140,7 @@
139
140
  clear: both;
140
141
  }
141
142
 
142
- &:hover {
143
+ &:not(.is-disabled):hover {
143
144
  background-color: _component("field.framed.color50");
144
145
  }
145
146
 
@@ -169,10 +170,6 @@
169
170
 
170
171
  &.is-disabled, &.is-readonly {
171
172
  background-color: _theme("commons.disabled.background");
172
-
173
- .radio-label, .checkbox-label {
174
- cursor: not-allowed;
175
- }
176
173
  }
177
174
 
178
175
  &.is-loading {
package/src/components/inputs/checkbox/_checkbox.scss CHANGED
@@ -17,30 +17,31 @@
17
17
  cursor: pointer;
18
18
  display: inline-flex;
19
19
  align-items: flex-start;
20
- transition: color _theme("commons.animations.durations.fast") ease;
20
+ transition: color _theme('commons.animations.durations.fast') ease;
21
21
 
22
22
  &::before {
23
- @include makeIcon("tick");
24
- border-radius: _component("checkbox.input.border-radius");
25
- border: 2px solid _component("checkbox.input.border.color");
23
+ @include makeIcon('tick');
24
+ background-color: _color("white");
25
+ border-radius: _component('checkbox.input.border-radius');
26
+ border: 2px solid _component('checkbox.input.border.color');
26
27
  color: transparent;
27
28
  display: block;
28
29
  flex: 0 0 auto;
29
- font-size: .8rem;
30
- height: _component("checkbox.input.size");
30
+ font-size: 0.8rem;
31
+ height: _component('checkbox.input.size');
31
32
  line-height: 1;
32
- margin-right: _component("checkbox.input.margin-right");
33
- margin-top: _component("checkbox.input.margin-top");
33
+ margin-right: _component('checkbox.input.margin-right');
34
+ margin-top: _component('checkbox.input.margin-top');
34
35
  text-align: center;
35
- transition: all _theme("commons.animations.durations.fast") ease;
36
- width: _component("checkbox.input.size");
36
+ transition: all _theme('commons.animations.durations.fast') ease;
37
+ width: _component('checkbox.input.size');
37
38
  }
38
39
 
39
40
  &:hover {
40
- color: _color("text.light");
41
+ color: _color('text.light');
41
42
 
42
43
  &::before {
43
- border-color: _component("checkbox.input.border.hover");
44
+ border-color: _component('checkbox.input.border.hover');
44
45
  }
45
46
  }
46
47
  }
@@ -61,54 +62,56 @@
61
62
  .checkbox-input:not(:disabled):checked ~ .checkbox-label {
62
63
  &:hover {
63
64
  &::before {
64
- background-color: _color($palette, "600");
65
- border-color: _color($palette, "600");
65
+ background-color: _color($palette, '600');
66
+ border-color: _color($palette, '600');
66
67
  }
67
68
  }
68
69
  }
69
70
 
70
71
  .checkbox-input:focus ~ .checkbox-label {
71
72
  &::before {
72
- box-shadow: 0 0 0 4px _color($palette, "200");
73
+ box-shadow: 0 0 0 4px _color($palette, '200');
73
74
  }
74
75
  }
75
76
  }
76
77
 
77
78
  // default color
78
- @include checkboxColoring("checkbox.default-palette");
79
+ @include checkboxColoring('checkbox.default-palette');
79
80
 
80
81
  // Status and associated palettes
81
- &.palette-error, &.is-error {
82
+ &.palette-error,
83
+ &.is-error {
82
84
  .checkbox-label {
83
85
  &::before {
84
- border-color: _color("error", "600");
86
+ border-color: _color('error', '600');
85
87
  }
86
88
  }
87
89
  }
88
- &.palette-warning, &.is-warning {
90
+ &.palette-warning,
91
+ &.is-warning {
89
92
  .checkbox-label {
90
93
  &::before {
91
- border-color: _color("warning", "600");
94
+ border-color: _color('warning', '600');
92
95
  }
93
96
  }
94
97
  }
95
- &.palette-success, &.is-success {
98
+ &.palette-success,
99
+ &.is-success {
96
100
  .checkbox-label {
97
101
  &::before {
98
- border-color: _color("success", "600");
102
+ border-color: _color('success', '600');
99
103
  }
100
104
  }
101
105
  }
102
106
 
103
107
  // palette colors
104
- @each $name, $palette in _getMap("palettes") {
108
+ @each $name, $palette in _getMap('palettes') {
105
109
  &.palette-#{$name} {
106
110
  @include checkboxColoring($name);
107
111
  }
108
112
  }
109
113
  }
110
114
 
111
-
112
115
  // MODS
113
116
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
114
117
 
@@ -134,14 +137,14 @@
134
137
 
135
138
  &.mod-small {
136
139
  .checkbox-label {
137
- font-size: _theme("sizes.small.font-size");
138
- line-height: _theme("sizes.small.line-height");
140
+ font-size: _theme('sizes.small.font-size');
141
+ line-height: _theme('sizes.small.line-height');
139
142
 
140
143
  &::before {
141
- width: _theme("sizes.small.font-size");
142
- height: _theme("sizes.small.font-size");
143
- font-size: _theme("sizes.smaller.font-size");
144
- margin-top: _component("checkbox.input.small-top");
144
+ width: _theme('sizes.small.font-size');
145
+ height: _theme('sizes.small.font-size');
146
+ font-size: _theme('sizes.smaller.font-size');
147
+ margin-top: _component('checkbox.input.small-top');
145
148
  }
146
149
  }
147
150
  }
@@ -162,22 +165,23 @@
162
165
  // STATES
163
166
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
164
167
 
165
-
166
168
  .checkbox .checkbox-input {
167
- &[disabled] {
169
+ &[disabled],
170
+ &[read-only] {
168
171
  ~ .checkbox-label {
169
- color: _color("grey");
172
+ color: _color('grey', '500');
170
173
  cursor: default;
171
174
 
172
175
  &::before {
173
- border: 2px solid _color("grey", "500");
176
+ border: 2px solid _color('grey', '500');
174
177
  }
175
178
  }
176
179
 
177
180
  &:checked ~ .checkbox-label {
178
181
  &::before {
179
- background-color: _color("grey", "500");
180
- border: 2px solid _color("grey", "500");
182
+ color: _color('grey', '500');
183
+ background-color: _color('grey', '200');
184
+ border: 2px solid _color('grey', '200');
181
185
  }
182
186
  }
183
187
  }
@@ -185,7 +189,7 @@
185
189
  ~ .checkbox-mixed ~ .checkbox-label,
186
190
  &.is-incomplete ~ .checkbox-label {
187
191
  &::before {
188
- @include makeIcon("partial");
192
+ @include makeIcon('partial');
189
193
  }
190
194
  }
191
195
  }
package/src/components/inputs/radio/_radio.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  &:checked ~ .radio-label {
16
16
  &::after {
17
- transform: scale(.55);
17
+ transform: scale(0.55);
18
18
  }
19
19
  }
20
20
  }
@@ -22,34 +22,35 @@
22
22
  .radio-label {
23
23
  cursor: pointer;
24
24
  display: inline-block;
25
- line-height: _component("radio.label.line-height");
26
- padding: _component("radio.label.padding");
27
- transition: color _theme("commons.animations.durations.fast") ease;
25
+ line-height: _component('radio.label.line-height');
26
+ padding: _component('radio.label.padding');
27
+ transition: color _theme('commons.animations.durations.fast') ease;
28
28
 
29
29
  &::before {
30
+ background-color: _color("white");
30
31
  border-radius: 50%;
31
- content: "";
32
+ content: '';
32
33
  display: block;
33
- height: _component("radio.input.size");
34
+ height: _component('radio.input.size');
34
35
  left: 0;
35
36
  position: absolute;
36
- top: _component("radio.input.top");
37
- transition: all _theme("commons.animations.durations.fast") ease;
38
- width: _component("radio.input.size");
37
+ top: _component('radio.input.top');
38
+ transition: all _theme('commons.animations.durations.fast') ease;
39
+ width: _component('radio.input.size');
39
40
  }
40
41
 
41
42
  &::after {
42
43
  border-radius: 50%;
43
44
  color: transparent;
44
- content: "";
45
+ content: '';
45
46
  display: block;
46
- height: _component("radio.input.size");
47
+ height: _component('radio.input.size');
47
48
  left: 0;
48
49
  position: absolute;
49
- top: _component("radio.input.top");
50
+ top: _component('radio.input.top');
50
51
  transform: scale(0);
51
- transition: all _theme("commons.animations.durations.fast") ease;
52
- width: _component("radio.input.size");
52
+ transition: all _theme('commons.animations.durations.fast') ease;
53
+ width: _component('radio.input.size');
53
54
  }
54
55
  }
55
56
 
@@ -58,68 +59,65 @@
58
59
 
59
60
  .radio {
60
61
  @mixin radioColoring($palette) {
61
- .radio-input:checked ~ .radio-label {
62
+
63
+ .radio-label {
62
64
  &::before {
63
- border: 2px solid _color($palette, "700");
65
+ border: 2px solid _color($palette, 700);
64
66
  }
67
+ }
65
68
 
69
+ .radio-input:checked ~ .radio-label {
66
70
  &::after {
67
- background-color: _color($palette, "700");
71
+ background-color: _color($palette, 700);
68
72
  }
73
+ }
69
74
 
75
+ .radio-input:not(:disabled):checked ~ .radio-label {
70
76
  &:hover {
71
77
  &::before {
72
- border-color: _color($palette, "600");
78
+ border-color: _color($palette, 600);
73
79
  }
74
80
 
75
81
  &::after {
76
- background-color: _color($palette, "600");
82
+ background-color: _color($palette, '600');
77
83
  }
78
84
  }
79
85
  }
80
-
81
- .radio-label {
82
- &::before {
83
- border: 2px solid _color($palette, "700");
84
- }
85
-
86
+
87
+ .radio-input:not(:disabled) ~ .radio-label {
86
88
  &:hover {
87
- &::after {
88
- background-color: _color($palette, "600");
89
- }
90
-
91
89
  &::before {
92
- border-color: _color($palette, "600");
90
+ border-color: _color($palette, 600);
93
91
  }
94
92
  }
95
93
  }
96
94
 
95
+
97
96
  .radio-input {
98
97
  &:focus ~ .radio-label {
99
98
  &::before {
100
- box-shadow: 0 0 0 4px _color($palette, "200");
101
- border-color: _color($palette, "600");
99
+ box-shadow: 0 0 0 4px _color($palette, '200');
100
+ border-color: _color($palette, '600');
102
101
  }
103
102
 
104
103
  &::after {
105
- background-color: _color($palette, "600");
104
+ background-color: _color($palette, '600');
106
105
  }
107
106
  }
108
107
  }
109
108
  }
110
109
 
111
110
  // default color
112
- @include radioColoring("radio.default-palette");
111
+ @include radioColoring('radio.default-palette');
113
112
 
114
113
  // palette colors
115
- @each $name, $palette in _getMap("palettes") {
114
+ @each $name, $palette in _getMap('palettes') {
116
115
  &.palette-#{$name} {
117
116
  @include radioColoring($name);
118
117
  }
119
118
  }
120
119
  }
121
120
 
122
-
123
121
  // MODS
124
122
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
125
123
 
@@ -132,14 +130,15 @@
132
130
  }
133
131
 
134
132
  &.mod-small .radio-label {
135
- line-height: _theme("sizes.small.line-height");
136
- font-size: _theme("sizes.small.font-size");
137
- padding: _component("radio.label.small-padding");
138
-
139
- &::before, &::after {
140
- height: _theme("sizes.small.font-size");
141
- width: _theme("sizes.small.font-size");
142
- top: _component("radio.input.small-top");
133
+ line-height: _theme('sizes.small.line-height');
134
+ font-size: _theme('sizes.small.font-size');
135
+ padding: _component('radio.label.small-padding');
136
+
137
+ &::before,
138
+ &::after {
139
+ height: _theme('sizes.small.font-size');
140
+ width: _theme('sizes.small.font-size');
141
+ top: _component('radio.input.small-top');
143
142
  }
144
143
  }
145
144
  }
@@ -148,23 +147,24 @@
148
147
  // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
149
148
 
150
149
  .radio .radio-input {
151
- &[disabled] {
150
+ &[disabled],
151
+ &[read-only] {
152
152
  ~ .radio-label {
153
- color: _color("grey");
153
+ color: _color('grey', '500');
154
154
  cursor: default;
155
155
 
156
156
  &::before {
157
- border: 2px solid _color("grey", "500");
157
+ border: 2px solid _color('grey', '500');
158
158
  }
159
159
  }
160
160
 
161
161
  &:checked ~ .radio-label {
162
162
  &::before {
163
- border: 2px solid _color("grey", "500");
163
+ border: 2px solid _color('grey', '500');
164
164
  }
165
165
 
166
166
  &::after {
167
- background-color: _color("grey", "500");
167
+ background-color: _color('grey', '500');
168
168
  }
169
169
  }
170
170
  }