@steroidsjs/bootstrap 3.0.0-beta.86 → 3.0.0-beta.87

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 (67) hide show
  1. package/content/Accordion/AccordionItemView.scss +6 -6
  2. package/content/Alert/AlertView.scss +15 -15
  3. package/content/Avatar/AvatarView.scss +11 -11
  4. package/content/Badge/BadgeView.scss +20 -20
  5. package/content/Calendar/CalendarView.scss +24 -24
  6. package/content/Calendar/CaptionElement.scss +12 -12
  7. package/content/Card/CardView.scss +10 -10
  8. package/content/Detail/DetailView.scss +12 -12
  9. package/content/DropDown/DropDownView.scss +3 -3
  10. package/content/Menu/MenuItemView.scss +4 -4
  11. package/content/Menu/MenuView.scss +3 -3
  12. package/form/AutoCompleteField/AutoCompleteFieldView.scss +34 -34
  13. package/form/Button/ButtonView.scss +24 -24
  14. package/form/CheckboxField/CheckboxFieldView.scss +24 -24
  15. package/form/DateField/DateFieldView.scss +2 -2
  16. package/form/DateRangeField/DateRangeFieldView.scss +2 -2
  17. package/form/DateTimeField/DateTimeFieldView.scss +2 -2
  18. package/form/DateTimeRangeField/DateTimeRangeFieldView.scss +2 -2
  19. package/form/DropDownField/DropDownFieldView.scss +44 -44
  20. package/form/DropDownFieldItem/DropDownFieldItemView.scss +12 -12
  21. package/form/FieldLayout/FieldLayoutView.scss +26 -26
  22. package/form/FieldList/FieldListItemView.scss +2 -2
  23. package/form/FieldList/FieldListView.scss +9 -9
  24. package/form/FieldSet/FieldSetView.scss +2 -2
  25. package/form/FileField/FileFieldItemView.scss +17 -17
  26. package/form/FileField/FileFieldView.scss +2 -2
  27. package/form/ImageField/ImageFieldView.scss +2 -2
  28. package/form/InputField/InputFieldView.scss +32 -32
  29. package/form/NumberField/NumberFieldView.scss +22 -22
  30. package/form/PasswordField/PasswordFieldView.scss +21 -21
  31. package/form/RadioField/RadioFieldView.scss +25 -25
  32. package/form/RateField/RateFieldView.scss +9 -9
  33. package/form/SliderField/SliderFieldView.scss +16 -16
  34. package/form/SwitcherField/SwitcherFieldView.scss +18 -18
  35. package/form/TextField/TextFieldView.scss +21 -21
  36. package/form/TimeField/TimeFieldView.scss +2 -2
  37. package/form/TimeField/TimePanelView.scss +11 -11
  38. package/form/TimeRangeField/TimeRangeFieldView.scss +2 -2
  39. package/layout/Header/HeaderView.scss +14 -14
  40. package/layout/Loader/LoaderView.scss +2 -2
  41. package/layout/ProgressBar/CircleProgressBarView.scss +8 -8
  42. package/layout/ProgressBar/LineProgressBarView.scss +9 -9
  43. package/layout/Sidebar/FooterIcons/FooterIcons.scss +1 -1
  44. package/layout/Sidebar/SidebarLogo/SidebarLogo.scss +7 -7
  45. package/layout/Sidebar/SidebarUser/SidebarUser.scss +5 -5
  46. package/layout/Sidebar/SidebarView.scss +8 -8
  47. package/layout/Skeleton/SkeletonView.scss +6 -6
  48. package/layout/Tooltip/TooltipView.scss +2 -2
  49. package/list/Empty/EmptyView.scss +2 -2
  50. package/list/FlexGrid/FlexGridView.scss +4 -4
  51. package/list/Grid/GridView.scss +14 -14
  52. package/list/Grid/views/ContentColumnView/ContentColumnView.scss +8 -8
  53. package/list/Grid/views/DiagramColumnView/DiagramColumnView.scss +12 -12
  54. package/list/List/ListView.scss +2 -2
  55. package/list/Pagination/PaginationButtonView.scss +14 -14
  56. package/list/Steps/StepItemView.scss +13 -13
  57. package/list/Steps/StepsView.scss +2 -2
  58. package/modal/Modal/ModalView.scss +12 -12
  59. package/nav/Breadcrubms/BreadcrumbsView.scss +5 -5
  60. package/nav/ButtonGroup/ButtonGroupView.scss +4 -4
  61. package/nav/Nav/NavBarView.scss +4 -4
  62. package/nav/Nav/NavIconView.scss +5 -5
  63. package/nav/Nav/NavTabsView.scss +8 -8
  64. package/nav/Tree/TreeView.scss +6 -6
  65. package/package.json +1 -1
  66. package/typography/Text/TextView.scss +4 -4
  67. package/typography/Title/TitleView.scss +4 -4
package/form/InputField/InputFieldView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  :root {
4
4
  --lead-icon-default-color: #e5e9eb;
@@ -26,8 +26,8 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
26
26
 
27
27
  height: 34px;
28
28
 
29
- font-family: vars.$font-family-nunito;
30
- font-weight: vars.$font-weight-sm;
29
+ font-family: variables.$font-family-nunito;
30
+ font-weight: variables.$font-weight-sm;
31
31
  line-height: 24px;
32
32
 
33
33
  &__input-wrapper {
@@ -37,8 +37,8 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
37
37
  }
38
38
 
39
39
  &__input {
40
- color: vars.$text-color;
41
- font-family: vars.$font-family-nunito;
40
+ color: variables.$text-color;
41
+ font-family: variables.$font-family-nunito;
42
42
 
43
43
  width: 100%;
44
44
  height: 100%;
@@ -46,12 +46,12 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
46
46
  padding: 0 8px;
47
47
  outline: none;
48
48
 
49
- background-color: vars.$element-field-background-color;
50
- border: 1px solid vars.$element-border-color;
49
+ background-color: variables.$element-field-background-color;
50
+ border: 1px solid variables.$element-border-color;
51
51
  border-radius: inherit;
52
52
 
53
53
  &::placeholder {
54
- color: vars.$element-placeholder-color;
54
+ color: variables.$element-placeholder-color;
55
55
  font-size: inherit;
56
56
  }
57
57
  }
@@ -74,7 +74,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
74
74
  }
75
75
 
76
76
  &:not(#{$root}_disabled):focus-within::before {
77
- border: 4px solid vars.$primary-light;
77
+ border: 4px solid variables.$primary-light;
78
78
  transform: translateX(-4px) translateY(-4px);
79
79
  border-radius: 16px;
80
80
  opacity: 1;
@@ -87,14 +87,14 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
87
87
 
88
88
  &::before {
89
89
  transform: none;
90
- border: 1px solid vars.$primary;
90
+ border: 1px solid variables.$primary;
91
91
  opacity: 1;
92
92
  }
93
93
  }
94
94
 
95
95
  &_disabled {
96
96
  #{$root}__input {
97
- background-color: vars.$element-background-color-disabled;
97
+ background-color: variables.$element-background-color-disabled;
98
98
  border-color: transparent;
99
99
  }
100
100
  }
@@ -106,7 +106,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
106
106
 
107
107
 
108
108
  &::before {
109
- border: 1px solid vars.$danger;
109
+ border: 1px solid variables.$danger;
110
110
  border-radius: 16px;
111
111
  transform: translateX(-1px) translateY(-1px);
112
112
  opacity: 1;
@@ -116,13 +116,13 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
116
116
  //Sizes
117
117
  &_size {
118
118
  &_lg {
119
- color: vars.$text-color;
120
- height: vars.$input-height-lg;
121
- border-radius: vars.$radius-large;
119
+ color: variables.$text-color;
120
+ height: variables.$input-height-lg;
121
+ border-radius: variables.$radius-large;
122
122
 
123
123
  #{$root}__input {
124
- font-size: vars.$font-size-lg;
125
- border-radius: vars.$radius-large;
124
+ font-size: variables.$font-size-lg;
125
+ border-radius: variables.$radius-large;
126
126
  }
127
127
 
128
128
  #{$root}__addon-before,
@@ -140,13 +140,13 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
140
140
  }
141
141
 
142
142
  &_md {
143
- color: vars.$text-color;
144
- height: vars.$input-height-md;
145
- border-radius: vars.$radius-large;
143
+ color: variables.$text-color;
144
+ height: variables.$input-height-md;
145
+ border-radius: variables.$radius-large;
146
146
 
147
147
  #{$root}__input {
148
- border-radius: vars.$radius-large;
149
- font-size: vars.$font-size-base;
148
+ border-radius: variables.$radius-large;
149
+ font-size: variables.$font-size-base;
150
150
  }
151
151
 
152
152
  #{$root}__addon-before,
@@ -167,13 +167,13 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
167
167
  }
168
168
 
169
169
  &_sm {
170
- color: vars.$text-color;
171
- height: vars.$input-height-sm;
172
- border-radius: vars.$radius-small;
170
+ color: variables.$text-color;
171
+ height: variables.$input-height-sm;
172
+ border-radius: variables.$radius-small;
173
173
 
174
174
  #{$root}__input {
175
- font-size: vars.$font-size-sm;
176
- border-radius: vars.$radius-small;
175
+ font-size: variables.$font-size-sm;
176
+ border-radius: variables.$radius-small;
177
177
  }
178
178
 
179
179
  #{$root}__addon-before,
@@ -225,7 +225,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
225
225
 
226
226
  &__icon-clear {
227
227
  svg > * {
228
- stroke: vars.$text-color
228
+ stroke: variables.$text-color
229
229
  }
230
230
 
231
231
  width: 24px;
@@ -267,7 +267,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
267
267
  border: none;
268
268
  }
269
269
  &::before {
270
- border: 1px solid vars.$element-border-color;
270
+ border: 1px solid variables.$element-border-color;
271
271
  opacity: 1;
272
272
  }
273
273
  }
@@ -278,7 +278,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
278
278
  border-bottom-right-radius: 0;
279
279
  }
280
280
  &::before {
281
- border: 1px solid vars.$element-border-color;
281
+ border: 1px solid variables.$element-border-color;
282
282
  opacity: 1;
283
283
  }
284
284
  }
@@ -286,8 +286,8 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
286
286
  &__addon-before,
287
287
  &__addon-after {
288
288
  padding: 11px 12px;
289
- background-color: vars.$element-background-color-disabled;
290
- color: vars.$text-color;
289
+ background-color: variables.$element-background-color-disabled;
290
+ color: variables.$text-color;
291
291
  }
292
292
 
293
293
  &__addon-before {
package/form/NumberField/NumberFieldView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  :root {
4
4
  --number-field-arrow-color: #414141;
@@ -16,7 +16,7 @@ $number-field-arrow-color: var(--number-field-arrow-color);
16
16
  position: relative;
17
17
  padding: 0;
18
18
 
19
- font-family: vars.$font-family-nunito;
19
+ font-family: variables.$font-family-nunito;
20
20
 
21
21
  // Hide default arrows
22
22
  /* Chrome, Safari, Edge, Opera */
@@ -68,7 +68,7 @@ $number-field-arrow-color: var(--number-field-arrow-color);
68
68
  cursor: not-allowed;
69
69
  }
70
70
  span > svg > path {
71
- stroke: vars.$element-background-color-disabled;
71
+ stroke: variables.$element-background-color-disabled;
72
72
  }
73
73
  }
74
74
 
@@ -82,11 +82,11 @@ $number-field-arrow-color: var(--number-field-arrow-color);
82
82
  #{$root} {
83
83
  &__input {
84
84
  height: 56px;
85
- border-radius: vars.$radius-large;
86
- font-size: vars.$font-size-lg;
85
+ border-radius: variables.$radius-large;
86
+ font-size: variables.$font-size-lg;
87
87
 
88
88
  &-effects {
89
- border-radius: vars.$radius-large;
89
+ border-radius: variables.$radius-large;
90
90
  }
91
91
  }
92
92
 
@@ -104,11 +104,11 @@ $number-field-arrow-color: var(--number-field-arrow-color);
104
104
  #{$root} {
105
105
  &__input {
106
106
  height: 46px;
107
- border-radius: vars.$radius-large;
108
- font-size: vars.$font-size-base;
107
+ border-radius: variables.$radius-large;
108
+ font-size: variables.$font-size-base;
109
109
 
110
110
  &-effects {
111
- border-radius: vars.$radius-large;
111
+ border-radius: variables.$radius-large;
112
112
  }
113
113
  }
114
114
 
@@ -126,10 +126,10 @@ $number-field-arrow-color: var(--number-field-arrow-color);
126
126
  #{$root} {
127
127
  &__input {
128
128
  height: 34px;
129
- font-size: vars.$font-size-sm;
129
+ font-size: variables.$font-size-sm;
130
130
 
131
131
  &-effects {
132
- border-radius: vars.$radius-small;
132
+ border-radius: variables.$radius-small;
133
133
  }
134
134
  }
135
135
 
@@ -147,31 +147,31 @@ $number-field-arrow-color: var(--number-field-arrow-color);
147
147
  &__input {
148
148
  width: 100%;
149
149
  outline: none;
150
- border: 1px solid vars.$element-border-color;
151
- border-radius: vars.$radius-small;
150
+ border: 1px solid variables.$element-border-color;
151
+ border-radius: variables.$radius-small;
152
152
  padding: 5px 22px 5px 8px;
153
153
  line-height: 24px;
154
154
  z-index: 1;
155
- font-weight: vars.$font-weight-sm;
156
- color: vars.$text-color;
155
+ font-weight: variables.$font-weight-sm;
156
+ color: variables.$text-color;
157
157
 
158
- background-color: vars.$element-field-background-color;
158
+ background-color: variables.$element-field-background-color;
159
159
 
160
160
  &::placeholder {
161
- color: vars.$element-placeholder-color;
161
+ color: variables.$element-placeholder-color;
162
162
  }
163
163
 
164
164
  &:disabled {
165
- background-color: vars.$element-background-color-disabled;
166
- color: vars.$element-placeholder-color-disabled;
165
+ background-color: variables.$element-background-color-disabled;
166
+ color: variables.$element-placeholder-color-disabled;
167
167
  }
168
168
 
169
169
  &:hover:not(:disabled):not(:focus) {
170
- border-color: vars.$element-border-color-hover;
170
+ border-color: variables.$element-border-color-hover;
171
171
  }
172
172
 
173
173
  &:active:not(:disabled) {
174
- border: 1px solid vars.$primary;
174
+ border: 1px solid variables.$primary;
175
175
  }
176
176
  }
177
177
 
@@ -190,7 +190,7 @@ $number-field-arrow-color: var(--number-field-arrow-color);
190
190
  width: 100%;
191
191
  height: 100%;
192
192
  background-color: transparent;
193
- border: 4px solid vars.$primary-light;
193
+ border: 4px solid variables.$primary-light;
194
194
  opacity: 0;
195
195
  pointer-events: none;
196
196
  }
package/form/PasswordField/PasswordFieldView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  :root {
4
4
  --security-bar-background: #eef1f2;
@@ -21,7 +21,7 @@ $eye-filled-color: var(--eye-filled-color);
21
21
 
22
22
  position: relative;
23
23
  line-height: 24px;
24
- font-weight: vars.$font-weight-sm;
24
+ font-weight: variables.$font-weight-sm;
25
25
 
26
26
  &__container {
27
27
  position: relative;
@@ -38,7 +38,7 @@ $eye-filled-color: var(--eye-filled-color);
38
38
 
39
39
  border-radius: 16px;
40
40
 
41
- border: 4px solid vars.$primary-light;
41
+ border: 4px solid variables.$primary-light;
42
42
  transition: opacity 150ms ease-in-out;
43
43
  opacity: 0;
44
44
  pointer-events: none;
@@ -52,25 +52,25 @@ $eye-filled-color: var(--eye-filled-color);
52
52
  &__input {
53
53
  width: 100%;
54
54
  height: 100%;
55
- border-radius: vars.$radius-small;
56
- border: 1px solid vars.$element-border-color;
55
+ border-radius: variables.$radius-small;
56
+ border: 1px solid variables.$element-border-color;
57
57
  outline: none;
58
58
  padding-left: 8px;
59
59
  padding-right: 42px;
60
60
 
61
- background-color: vars.$element-field-background-color;
62
- color: vars.$text-color;
61
+ background-color: variables.$element-field-background-color;
62
+ color: variables.$text-color;
63
63
 
64
64
  &::placeholder {
65
- color: vars.$element-placeholder-color;
65
+ color: variables.$element-placeholder-color;
66
66
  }
67
67
 
68
68
  &:hover {
69
- border: 1px solid vars.$element-border-color-hover;
69
+ border: 1px solid variables.$element-border-color-hover;
70
70
  }
71
71
 
72
72
  &:not(:disabled):active {
73
- border: 1px solid vars.$primary;
73
+ border: 1px solid variables.$primary;
74
74
  }
75
75
 
76
76
  &:not(:disabled):focus {
@@ -79,7 +79,7 @@ $eye-filled-color: var(--eye-filled-color);
79
79
 
80
80
  &:disabled {
81
81
  border: none;
82
- background-color: vars.$element-background-color-disabled;
82
+ background-color: variables.$element-background-color-disabled;
83
83
  }
84
84
  }
85
85
 
@@ -95,8 +95,8 @@ $eye-filled-color: var(--eye-filled-color);
95
95
  }
96
96
 
97
97
  #{$root}__input {
98
- border-radius: vars.$radius-large;
99
- font-size: vars.$font-size-lg;
98
+ border-radius: variables.$radius-large;
99
+ font-size: variables.$font-size-lg;
100
100
  }
101
101
  }
102
102
 
@@ -110,14 +110,14 @@ $eye-filled-color: var(--eye-filled-color);
110
110
  }
111
111
 
112
112
  #{$root}__input {
113
- border-radius: vars.$radius-large;
114
- font-size: vars.$font-size-base;
113
+ border-radius: variables.$radius-large;
114
+ font-size: variables.$font-size-base;
115
115
  }
116
116
  }
117
117
 
118
118
  &_sm {
119
119
  #{$root}__container {
120
- height: vars.$input-height-sm;
120
+ height: variables.$input-height-sm;
121
121
 
122
122
  &::before {
123
123
  border-radius: 12px;
@@ -126,8 +126,8 @@ $eye-filled-color: var(--eye-filled-color);
126
126
  }
127
127
 
128
128
  #{$root}__input {
129
- border-radius: vars.$radius-small;
130
- font-size: vars.$font-size-sm;
129
+ border-radius: variables.$radius-small;
130
+ font-size: variables.$font-size-sm;
131
131
  }
132
132
  }
133
133
  }
@@ -152,17 +152,17 @@ $eye-filled-color: var(--eye-filled-color);
152
152
 
153
153
  &_danger::before {
154
154
  width: 33%;
155
- background-color: vars.$danger;
155
+ background-color: variables.$danger;
156
156
  }
157
157
 
158
158
  &_warning::before {
159
159
  width: 66%;
160
- background-color: vars.$warning;
160
+ background-color: variables.$warning;
161
161
  }
162
162
 
163
163
  &_success::before {
164
164
  width: 100%;
165
- background-color: vars.$success;
165
+ background-color: variables.$success;
166
166
  }
167
167
  }
168
168
 
package/form/RadioField/RadioFieldView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  :root {
4
4
  --radio-hover-color: #651fff;
@@ -16,11 +16,11 @@ $radio-hover-color: var(--radio-hover-color);
16
16
 
17
17
  $root: &;
18
18
 
19
- font-family: vars.$font-family-nunito;
20
- color: vars.$text-color;
19
+ font-family: variables.$font-family-nunito;
20
+ color: variables.$text-color;
21
21
  line-height: 24px;
22
22
  font-weight: 400;
23
- font-size: vars.$font-size-sm;
23
+ font-size: variables.$font-size-sm;
24
24
 
25
25
  &__ellipse {
26
26
  position: absolute;
@@ -30,8 +30,8 @@ $radio-hover-color: var(--radio-hover-color);
30
30
  display: inline-block;
31
31
  width: 12px;
32
32
  height: 12px;
33
- background-color: vars.$primary;
34
- border-radius: vars.$radius-circle;
33
+ background-color: variables.$primary;
34
+ border-radius: variables.$radius-circle;
35
35
  opacity: 0;
36
36
  pointer-events: none;
37
37
  }
@@ -60,8 +60,8 @@ $radio-hover-color: var(--radio-hover-color);
60
60
  display: inline-block;
61
61
  width: 24px;
62
62
  height: 24px;
63
- border-radius: vars.$radius-circle;
64
- border: 1px solid vars.$element-border-color;
63
+ border-radius: variables.$radius-circle;
64
+ border: 1px solid variables.$element-border-color;
65
65
  margin-right: 8px;
66
66
  cursor: pointer;
67
67
 
@@ -77,8 +77,8 @@ $radio-hover-color: var(--radio-hover-color);
77
77
  position: absolute;
78
78
  top: 0;
79
79
  left: 0;
80
- border: 4px solid vars.$primary-light;
81
- border-radius: vars.$radius-circle;
80
+ border: 4px solid variables.$primary-light;
81
+ border-radius: variables.$radius-circle;
82
82
  pointer-events: none;
83
83
  opacity: 0;
84
84
 
@@ -88,11 +88,11 @@ $radio-hover-color: var(--radio-hover-color);
88
88
  }
89
89
 
90
90
  &__input:not(:disabled):not(:checked):hover + &__label::before {
91
- border-color: vars.$element-border-color-hover;
91
+ border-color: variables.$element-border-color-hover;
92
92
  }
93
93
 
94
94
  &__input:not(:disabled):not(:checked):active + &__label::before {
95
- border-color: vars.$primary;
95
+ border-color: variables.$primary;
96
96
  }
97
97
 
98
98
  &__input:not(:disabled):focus + &__label::after {
@@ -104,14 +104,14 @@ $radio-hover-color: var(--radio-hover-color);
104
104
  }
105
105
 
106
106
  &__input:checked + &__label::before {
107
- border: 1px solid vars.$primary;
107
+ border: 1px solid variables.$primary;
108
108
  }
109
109
  &__input:checked + &__label &__ellipse {
110
110
  opacity: 1;
111
111
  }
112
112
 
113
113
  &__input:not(:disabled):checked:hover + &__label::before {
114
- border-color: vars.$primary-dark;
114
+ border-color: variables.$primary-dark;
115
115
  }
116
116
 
117
117
  &__input:not(:disabled):checked:hover + &__label &__ellipse {
@@ -120,21 +120,21 @@ $radio-hover-color: var(--radio-hover-color);
120
120
  }
121
121
 
122
122
  &__input:not(:disabled):checked:active + &__label::before {
123
- border-color: vars.$primary-light;
123
+ border-color: variables.$primary-light;
124
124
  }
125
125
 
126
126
  &__input:not(:disabled):checked:active + &__label &__ellipse {
127
127
  opacity: 1;
128
- background-color: vars.$primary-light;
128
+ background-color: variables.$primary-light;
129
129
  }
130
130
 
131
131
  &__input:disabled + &__label {
132
132
  cursor: not-allowed;
133
- color: vars.$element-placeholder-color;
133
+ color: variables.$element-placeholder-color;
134
134
 
135
135
  &::before {
136
136
  cursor: not-allowed;
137
- background-color: vars.$element-background-color-disabled;
137
+ background-color: variables.$element-background-color-disabled;
138
138
  }
139
139
  }
140
140
 
@@ -142,19 +142,19 @@ $radio-hover-color: var(--radio-hover-color);
142
142
  cursor: not-allowed;
143
143
 
144
144
  background-color: transparent;
145
- border-color: vars.$element-background-color-disabled;
145
+ border-color: variables.$element-background-color-disabled;
146
146
  }
147
147
 
148
148
  &__input:disabled:checked + &__label &__ellipse {
149
- background-color: vars.$element-background-color-disabled;
149
+ background-color: variables.$element-background-color-disabled;
150
150
  }
151
151
 
152
152
  &_hasError {
153
153
  #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
154
- color: vars.$danger;
154
+ color: variables.$danger;
155
155
 
156
156
  &::before {
157
- border-color: vars.$danger;
157
+ border-color: variables.$danger;
158
158
  }
159
159
  }
160
160
  }
@@ -162,7 +162,7 @@ $radio-hover-color: var(--radio-hover-color);
162
162
  &_size {
163
163
  &_lg {
164
164
  #{$root}__label {
165
- font-size: vars.$font-size-lg;
165
+ font-size: variables.$font-size-lg;
166
166
  line-height: 24px;
167
167
 
168
168
  &::before {
@@ -179,7 +179,7 @@ $radio-hover-color: var(--radio-hover-color);
179
179
 
180
180
  &_md {
181
181
  #{$root}__label {
182
- font-size: vars.$font-size-base;
182
+ font-size: variables.$font-size-base;
183
183
  line-height: 22px;
184
184
 
185
185
  &::before {
@@ -203,7 +203,7 @@ $radio-hover-color: var(--radio-hover-color);
203
203
 
204
204
  &_sm {
205
205
  #{$root}__label {
206
- font-size: vars.$font-size-sm;
206
+ font-size: variables.$font-size-sm;
207
207
  line-height: 18px;
208
208
 
209
209
  &::before {
package/form/RateField/RateFieldView.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use "sass:map";
2
- @use "../../scss/variables" as vars;
2
+ @use "../../scss/variables";
3
3
 
4
4
  $ratefield-sizes: () !default;
5
5
  $ratefield-sizes: map.merge(
@@ -20,7 +20,7 @@ $ratefield-sizes: map.merge(
20
20
  "size": 24px,
21
21
  "badge-gap": 16px,
22
22
  "badge-paddings": 4px 8px,
23
- "badge-radius": vars.$radius-small,
23
+ "badge-radius": variables.$radius-small,
24
24
  ),
25
25
  ),
26
26
  $ratefield-sizes
@@ -56,7 +56,7 @@ $ratefield-sizes: map.merge(
56
56
 
57
57
  #{$root}__rate-icon {
58
58
  path {
59
- fill: vars.$primary;
59
+ fill: variables.$primary;
60
60
  }
61
61
  }
62
62
  }
@@ -78,17 +78,17 @@ $ratefield-sizes: map.merge(
78
78
  &__rate-icon {
79
79
  &.IconView svg {
80
80
  path {
81
- fill: vars.$gray;
81
+ fill: variables.$gray;
82
82
  }
83
83
  }
84
84
  }
85
85
 
86
86
  &__badge {
87
87
  display: block;
88
- background-color: vars.$primary;
89
- color: vars.$white;
90
- font-size: vars.$font-size-xs;
91
- line-height: vars.$line-height-xs;
88
+ background-color: variables.$primary;
89
+ color: variables.$white;
90
+ font-size: variables.$font-size-xs;
91
+ line-height: variables.$line-height-xs;
92
92
  }
93
93
 
94
94
  &_size {
@@ -125,7 +125,7 @@ $ratefield-sizes: map.merge(
125
125
  #{$root}__rate-icon {
126
126
  &.IconView svg {
127
127
  path {
128
- fill: vars.$light-gray;
128
+ fill: variables.$light-gray;
129
129
  }
130
130
  }
131
131
  }