@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/DropDownField/DropDownFieldView.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use "sass:map";
2
- @use "../../scss/variables" as vars;
2
+ @use "../../scss/variables";
3
3
  @use '../../scss/mixins';
4
4
 
5
5
  :root {
@@ -53,45 +53,45 @@ $drop-down-color-themes: map.merge(
53
53
  (
54
54
  "basic": (
55
55
  "background-color": $basic-color,
56
- "hover-color": vars.$element-border-color-hover,
56
+ "hover-color": variables.$element-border-color-hover,
57
57
  "focus-color": $basic-focus-color,
58
58
  "active-color": $basic-active-color
59
59
  ),
60
60
  "primary": (
61
- "background-color": vars.$primary,
62
- "hover-color": vars.$primary-dark,
63
- "focus-color": vars.$primary-light,
64
- "active-color": vars.$primary-dark
61
+ "background-color": variables.$primary,
62
+ "hover-color": variables.$primary-dark,
63
+ "focus-color": variables.$primary-light,
64
+ "active-color": variables.$primary-dark
65
65
  ),
66
66
  "secondary": (
67
- "background-color": vars.$secondary,
68
- "hover-color": vars.$secondary-dark,
69
- "focus-color": vars.$secondary-light,
70
- "active-color": vars.$secondary-dark
67
+ "background-color": variables.$secondary,
68
+ "hover-color": variables.$secondary-dark,
69
+ "focus-color": variables.$secondary-light,
70
+ "active-color": variables.$secondary-dark
71
71
  ),
72
72
  "warning": (
73
- "background-color": vars.$warning,
74
- "hover-color": vars.$warning-dark,
75
- "focus-color": vars.$warning-light,
76
- "active-color": vars.$warning-dark
73
+ "background-color": variables.$warning,
74
+ "hover-color": variables.$warning-dark,
75
+ "focus-color": variables.$warning-light,
76
+ "active-color": variables.$warning-dark
77
77
  ),
78
78
  "danger": (
79
- "background-color": vars.$danger,
80
- "hover-color": vars.$danger-dark,
81
- "focus-color": vars.$danger-light,
82
- "active-color": vars.$danger-dark
79
+ "background-color": variables.$danger,
80
+ "hover-color": variables.$danger-dark,
81
+ "focus-color": variables.$danger-light,
82
+ "active-color": variables.$danger-dark
83
83
  ),
84
84
  "info": (
85
- "background-color": vars.$info,
86
- "hover-color": vars.$info-dark,
87
- "focus-color": vars.$info-light,
88
- "active-color": vars.$info-dark
85
+ "background-color": variables.$info,
86
+ "hover-color": variables.$info-dark,
87
+ "focus-color": variables.$info-light,
88
+ "active-color": variables.$info-dark
89
89
  ),
90
90
  "success": (
91
- "background-color": vars.$success,
92
- "hover-color": vars.$success-dark,
93
- "focus-color": vars.$success-light,
94
- "active-color": vars.$success-dark
91
+ "background-color": variables.$success,
92
+ "hover-color": variables.$success-dark,
93
+ "focus-color": variables.$success-light,
94
+ "active-color": variables.$success-dark
95
95
  )
96
96
  ),
97
97
  $drop-down-color-themes
@@ -99,7 +99,7 @@ $drop-down-color-themes: map.merge(
99
99
 
100
100
  @mixin dropDownTheme($colorMap, $root, $colorType) {
101
101
  background-color: map.get($colorMap, background-color);
102
- color: vars.$text-color;
102
+ color: variables.$text-color;
103
103
 
104
104
  &::before {
105
105
  border-color: map.get($colorMap, focus-color);
@@ -134,7 +134,7 @@ $drop-down-color-themes: map.merge(
134
134
  color: #ffffff;
135
135
 
136
136
  @if ($colorType == "basic") {
137
- color: vars.$text-color;
137
+ color: variables.$text-color;
138
138
  }
139
139
 
140
140
  @if ($colorType == "warning" or $colorType == "info") {
@@ -144,9 +144,9 @@ $drop-down-color-themes: map.merge(
144
144
  }
145
145
 
146
146
  @mixin dropDownOutlineTheme($colorMap, $root) {
147
- background-color: vars.$element-field-background-color;
147
+ background-color: variables.$element-field-background-color;
148
148
  border: 1px solid map.get($colorMap, background-color);
149
- color: vars.$text-color;
149
+ color: variables.$text-color;
150
150
 
151
151
  &::before {
152
152
  border-color: map.get($colorMap, focus-color);
@@ -205,30 +205,30 @@ $drop-down-color-themes: map.merge(
205
205
  $sizes: map.merge(
206
206
  (
207
207
  "lg": (
208
- "border-radius": vars.$radius-large,
209
- "height": vars.$input-height-lg,
208
+ "border-radius": variables.$radius-large,
209
+ "height": variables.$input-height-lg,
210
210
  "beforeTransform": translateX(-4px) translateY(-4px),
211
211
  "beforeRadius": 16px,
212
212
  "selectedItemsPadding": 16px,
213
- "font-size": vars.$font-size-lg,
213
+ "font-size": variables.$font-size-lg,
214
214
  "line-height": 24px
215
215
  ),
216
216
  "md": (
217
- "border-radius": vars.$radius-large,
218
- "height": vars.$input-height-md,
217
+ "border-radius": variables.$radius-large,
218
+ "height": variables.$input-height-md,
219
219
  "beforeTransform": translateX(-4px) translateY(-4px),
220
220
  "beforeRadius": 16px,
221
221
  "selectedItemsPadding": 12px,
222
- "font-size": vars.$font-size-base,
222
+ "font-size": variables.$font-size-base,
223
223
  "line-height": 22px
224
224
  ),
225
225
  "sm": (
226
- "border-radius": vars.$radius-small,
227
- "height": vars.$input-height-sm,
226
+ "border-radius": variables.$radius-small,
227
+ "height": variables.$input-height-sm,
228
228
  "beforeTransform": translateX(-4px) translateY(-4px),
229
229
  "beforeRadius": 12px,
230
230
  "selectedItemsPadding": 8px,
231
- "font-size": vars.$font-size-sm,
231
+ "font-size": variables.$font-size-sm,
232
232
  "line-height": 18px
233
233
  )
234
234
  ),
@@ -312,14 +312,14 @@ $drop-down-color-themes: map.merge(
312
312
  top: calc(100% + 8px);
313
313
  left: 0;
314
314
 
315
- background-color: vars.$element-background-color;
315
+ background-color: variables.$element-background-color;
316
316
 
317
317
  border: 1px solid $drop-down-border-color;
318
318
  overflow: hidden;
319
319
  border-radius: 12px;
320
320
 
321
321
  &-list {
322
- @include mixins.scrollWrapper(240px, 0, vars.$scroll-thumb-color, vars.$scroll-track-color);
322
+ @include mixins.scrollWrapper(240px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
323
323
  }
324
324
  }
325
325
 
@@ -364,12 +364,12 @@ $drop-down-color-themes: map.merge(
364
364
  border-radius: 6px;
365
365
  outline: none;
366
366
 
367
- font-size: vars.$font-size-base;
367
+ font-size: variables.$font-size-base;
368
368
  font-weight: 400;
369
369
  line-height: 22px;
370
- border: 1px solid vars.$element-border-color;
370
+ border: 1px solid variables.$element-border-color;
371
371
 
372
- color: vars.$text-color;
372
+ color: variables.$text-color;
373
373
  background-color: $search-background-color;
374
374
 
375
375
  &:hover {
package/form/DropDownFieldItem/DropDownFieldItemView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  :root {
4
4
  --drop-down-item-hover-background-color: #f5f8fa;
@@ -23,7 +23,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
23
23
  }
24
24
 
25
25
  %fontProperties {
26
- font-size: vars.$font-size-base;
26
+ font-size: variables.$font-size-base;
27
27
  font-weight: 400;
28
28
  line-height: 22px;
29
29
  }
@@ -43,8 +43,8 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
43
43
  position: relative;
44
44
  column-gap: 12px;
45
45
  align-items: center;
46
- background-color: vars.$element-background-color;
47
- color: vars.$text-color;
46
+ background-color: variables.$element-background-color;
47
+ color: variables.$text-color;
48
48
 
49
49
  &_size {
50
50
  &_lg {
@@ -76,7 +76,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
76
76
  &__img {
77
77
  width: 24px;
78
78
  height: 24px;
79
- border-radius:vars.$radius-small;
79
+ border-radius:variables.$radius-small;
80
80
  overflow: hidden;
81
81
 
82
82
  img {
@@ -146,7 +146,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
146
146
  border: none;
147
147
 
148
148
  &_visible {
149
- border-bottom: 1px solid vars.$element-border-color;
149
+ border-bottom: 1px solid variables.$element-border-color;
150
150
  }
151
151
  }
152
152
 
@@ -157,7 +157,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
157
157
  align-items: center;
158
158
 
159
159
  border: none;
160
- background-color:vars.$element-background-color;
160
+ background-color:variables.$element-background-color;
161
161
 
162
162
  &:hover {
163
163
  background-color: $drop-down-item-hover-background-color;
@@ -176,15 +176,15 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
176
176
  &__icon-chevron {
177
177
  box-shadow: none;
178
178
  svg {
179
- border: 1px solid vars.$element-border-color;
180
- border-radius: vars.$radius-small;
179
+ border: 1px solid variables.$element-border-color;
180
+ border-radius: variables.$radius-small;
181
181
  }
182
182
  }
183
183
  }
184
184
 
185
185
  &_size {
186
186
  &_lg {
187
- font-size: vars.$font-size-lg;
187
+ font-size: variables.$font-size-lg;
188
188
  line-height: 24px;
189
189
 
190
190
  .AccordionItemView__title-container {
@@ -195,7 +195,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
195
195
  }
196
196
 
197
197
  &_md {
198
- font-size: vars.$font-size-base;
198
+ font-size: variables.$font-size-base;
199
199
  line-height: 22px;
200
200
 
201
201
  .AccordionItemView__title-container {
@@ -206,7 +206,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
206
206
  }
207
207
 
208
208
  &_sm {
209
- font-size: vars.$font-size-sm;
209
+ font-size: variables.$font-size-sm;
210
210
  line-height: 18px;
211
211
 
212
212
  .AccordionItemView__title-container {
package/form/FieldLayout/FieldLayoutView.scss CHANGED
@@ -1,33 +1,33 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  .FieldLayoutView {
4
4
  margin-bottom: 1rem;
5
5
  $root: &;
6
- font-family: vars.$font-family-nunito;
6
+ font-family: variables.$font-family-nunito;
7
7
 
8
8
  &__label {
9
- font-size: vars.$font-size-sm;
9
+ font-size: variables.$font-size-sm;
10
10
  line-height: 24px;
11
- font-weight: vars.$font-weight-sm;
12
- color: vars.$text-color;
11
+ font-weight: variables.$font-weight-sm;
12
+ color: variables.$text-color;
13
13
  margin-bottom: 8px;
14
14
 
15
15
  &_size {
16
16
  &_sm {
17
- font-size: vars.$font-size-sm;
17
+ font-size: variables.$font-size-sm;
18
18
  }
19
19
  &_md {
20
- font-size: vars.$font-size-base;
20
+ font-size: variables.$font-size-base;
21
21
  }
22
22
  &_lg {
23
- font-size: vars.$font-size-lg;
23
+ font-size: variables.$font-size-lg;
24
24
  }
25
25
  }
26
26
 
27
27
  &_required:after {
28
28
  display: inline-block;
29
29
  content: "*";
30
- color: vars.$danger;
30
+ color: variables.$danger;
31
31
  margin: 0 0 0 3px;
32
32
  }
33
33
  }
@@ -50,10 +50,10 @@
50
50
  margin-top: 4px;
51
51
  font-size: 80%;
52
52
 
53
- color: vars.$text-color;
54
- font-size: vars.$font-size-sm;
53
+ color: variables.$text-color;
54
+ font-size: variables.$font-size-sm;
55
55
  line-height: 16px;
56
- font-weight: vars.$font-weight-sm;
56
+ font-weight: variables.$font-weight-sm;
57
57
 
58
58
  display: flex;
59
59
  align-items: center;
@@ -61,21 +61,21 @@
61
61
 
62
62
  &_size {
63
63
  &_lg {
64
- font-size: vars.$font-size-base;
64
+ font-size: variables.$font-size-base;
65
65
  line-height: 22px;
66
- font-weight: vars.$font-weight-sm;
66
+ font-weight: variables.$font-weight-sm;
67
67
  }
68
68
 
69
69
  &_md {
70
- font-size: vars.$font-size-sm;
70
+ font-size: variables.$font-size-sm;
71
71
  line-height: 18px;
72
- font-weight: vars.$font-weight-sm;
72
+ font-weight: variables.$font-weight-sm;
73
73
  }
74
74
 
75
75
  &_sm {
76
- font-size: vars.$font-size-xs;
76
+ font-size: variables.$font-size-xs;
77
77
  line-height: 16px;
78
- font-weight: vars.$font-weight-sm;
78
+ font-weight: variables.$font-weight-sm;
79
79
  }
80
80
  }
81
81
  }
@@ -93,30 +93,30 @@
93
93
  height: 100%;
94
94
 
95
95
  rect {
96
- color: vars.$danger;
96
+ color: variables.$danger;
97
97
  }
98
98
  }
99
99
  }
100
100
 
101
101
  &__error-text {
102
- color: vars.$danger;
102
+ color: variables.$danger;
103
103
  &_size {
104
104
  &_lg {
105
- font-size: vars.$font-size-base;
105
+ font-size: variables.$font-size-base;
106
106
  line-height: 22px;
107
- font-weight: vars.$font-weight-sm;
107
+ font-weight: variables.$font-weight-sm;
108
108
  }
109
109
 
110
110
  &_md {
111
- font-size: vars.$font-size-sm;
111
+ font-size: variables.$font-size-sm;
112
112
  line-height: 18px;
113
- font-weight: vars.$font-weight-sm;
113
+ font-weight: variables.$font-weight-sm;
114
114
  }
115
115
 
116
116
  &_sm {
117
- font-size: vars.$font-size-xs;
117
+ font-size: variables.$font-size-xs;
118
118
  line-height: 16px;
119
- font-weight: vars.$font-weight-sm;
119
+ font-weight: variables.$font-weight-sm;
120
120
  }
121
121
  }
122
122
  }
package/form/FieldList/FieldListItemView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  .FieldListItemView {
4
4
  &__remove {
@@ -15,7 +15,7 @@
15
15
  fill: #323232;
16
16
  }
17
17
  path {
18
- stroke: vars.$white;
18
+ stroke: variables.$white;
19
19
  }
20
20
  }
21
21
  }
package/form/FieldList/FieldListView.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- @use "../../scss/variables" as vars;
2
+ @use "../../scss/variables";
3
3
 
4
4
  :root {
5
5
  --background-th: var(--light-gray);
@@ -18,7 +18,7 @@ $background-td-alternating: var(--background-td-alternating);
18
18
  table {
19
19
  width: 100%;
20
20
  background-color: transparent;
21
- border: 1px solid vars.$gray-dark;
21
+ border: 1px solid variables.$gray-dark;
22
22
  border-collapse: separate;
23
23
  border-radius: 10px;
24
24
  border-spacing: 0;
@@ -27,23 +27,23 @@ $background-td-alternating: var(--background-td-alternating);
27
27
 
28
28
  th:not(:last-child),
29
29
  td:not(:last-child) {
30
- border-right: 1px solid vars.$gray-dark;
30
+ border-right: 1px solid variables.$gray-dark;
31
31
  }
32
32
 
33
33
  tr th {
34
- border-bottom: 1px solid vars.$gray-dark;
34
+ border-bottom: 1px solid variables.$gray-dark;
35
35
  background-color: $background-th;
36
- color: vars.$text-color;
36
+ color: variables.$text-color;
37
37
  font-size: 14px;
38
38
  line-height: 18px;
39
39
  }
40
40
 
41
41
  tr:not(:last-child) td {
42
- border-bottom: 1px solid vars.$gray-dark;
42
+ border-bottom: 1px solid variables.$gray-dark;
43
43
  }
44
44
 
45
45
  tfoot > tr > td {
46
- border-top: 1px solid vars.$gray-dark;
46
+ border-top: 1px solid variables.$gray-dark;
47
47
  }
48
48
 
49
49
  tr td {
@@ -60,7 +60,7 @@ $background-td-alternating: var(--background-td-alternating);
60
60
  }
61
61
 
62
62
  td {
63
- background: vars.$element-background-color;
63
+ background: variables.$element-background-color;
64
64
  }
65
65
 
66
66
  &_hasAlternatingColors {
@@ -72,7 +72,7 @@ $background-td-alternating: var(--background-td-alternating);
72
72
  &__button-add {
73
73
  svg {
74
74
  path {
75
- stroke: vars.$primary;
75
+ stroke: variables.$primary;
76
76
  }
77
77
  }
78
78
  > span {
package/form/FieldSet/FieldSetView.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- @use "../../scss/variables" as vars;
2
+ @use "../../scss/variables";
3
3
 
4
4
  :root {
5
5
  --legend-color: #152536;
@@ -19,7 +19,7 @@ $fieldset-border-color: var(--fieldset-border-color);
19
19
  border-radius: 8px;
20
20
 
21
21
  &__legend {
22
- background-color: vars.$background-color;
22
+ background-color: variables.$background-color;
23
23
  color: $legend-color;
24
24
 
25
25
  padding: 8px;
package/form/FileField/FileFieldItemView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
  @use '../../scss/mixins';
3
3
  @use '../../scss/animations' as anim;
4
4
 
@@ -26,11 +26,11 @@ $image-border-radius: 8px;
26
26
  column-gap: 8px;
27
27
  padding: 12px 30px 12px 12px;
28
28
  width: 100%;
29
- font-size: vars.$font-size-sm;
29
+ font-size: variables.$font-size-sm;
30
30
 
31
31
  &_images {
32
32
  padding: 8px;
33
- border: 1px solid vars.$gray;
33
+ border: 1px solid variables.$gray;
34
34
  border-radius: 12px;
35
35
 
36
36
  #{$root}__icon-wrapper {
@@ -40,7 +40,7 @@ $image-border-radius: 8px;
40
40
  width: $small-image-size;
41
41
  height: $small-image-size;
42
42
  border-radius: $image-border-radius;
43
- background-color: vars.$light-gray;
43
+ background-color: variables.$light-gray;
44
44
  }
45
45
  }
46
46
 
@@ -52,7 +52,7 @@ $image-border-radius: 8px;
52
52
  padding: 5px;
53
53
  width: 128px;
54
54
  height: 128px;
55
- border: 1px solid vars.$gray;
55
+ border: 1px solid variables.$gray;
56
56
  border-radius: 20px;
57
57
 
58
58
  #{$root}__title {
@@ -102,7 +102,7 @@ $image-border-radius: 8px;
102
102
  }
103
103
 
104
104
  #{$root}__link {
105
- @include mixins.svg-color(vars.$white);
105
+ @include mixins.svg-color(variables.$white);
106
106
  position: absolute;
107
107
  top: 52px;
108
108
  left: 70px;
@@ -110,7 +110,7 @@ $image-border-radius: 8px;
110
110
  opacity: 0;
111
111
 
112
112
  circle {
113
- stroke: vars.$white;
113
+ stroke: variables.$white;
114
114
  }
115
115
  }
116
116
 
@@ -126,7 +126,7 @@ $image-border-radius: 8px;
126
126
  }
127
127
 
128
128
  #{$root}__remove {
129
- @include mixins.svg-color(vars.$white);
129
+ @include mixins.svg-color(variables.$white);
130
130
  position: absolute;
131
131
  left: 30px;
132
132
  z-index: 4;
@@ -157,7 +157,7 @@ $image-border-radius: 8px;
157
157
  }
158
158
 
159
159
  &#{$root}_error {
160
- background-color: vars.$light-gray;
160
+ background-color: variables.$light-gray;
161
161
  }
162
162
 
163
163
  &#{$root}_error {
@@ -185,10 +185,10 @@ $image-border-radius: 8px;
185
185
 
186
186
  &__link {
187
187
  @include textEllipsis;
188
- color: vars.$link-color;
188
+ color: variables.$link-color;
189
189
 
190
190
  &:hover {
191
- color: vars.$link-color-hover;
191
+ color: variables.$link-color-hover;
192
192
  text-decoration: none;
193
193
  }
194
194
  }
@@ -203,21 +203,21 @@ $image-border-radius: 8px;
203
203
  }
204
204
 
205
205
  &_error {
206
- @include mixins.svg-color(vars.$danger);
206
+ @include mixins.svg-color(variables.$danger);
207
207
 
208
208
  #{$root}__icon {
209
209
  circle {
210
- fill: vars.$danger;
210
+ fill: variables.$danger;
211
211
  }
212
212
  }
213
213
 
214
214
  #{$root}__title {
215
- color: vars.$danger;
215
+ color: variables.$danger;
216
216
  }
217
217
 
218
218
  a,
219
219
  a:hover {
220
- color: vars.$danger;
220
+ color: variables.$danger;
221
221
  cursor: default;
222
222
  pointer-events: none;
223
223
  }
@@ -266,13 +266,13 @@ $image-border-radius: 8px;
266
266
  &__progress-track {
267
267
  margin-top: 4px;
268
268
  height: 4px;
269
- background-color: vars.$gray;
269
+ background-color: variables.$gray;
270
270
  border-radius: 4px;
271
271
  }
272
272
 
273
273
  &__progress-bar {
274
274
  height: inherit;
275
- background-color: vars.$primary;
275
+ background-color: variables.$primary;
276
276
  border-radius: 4px;
277
277
  }
278
278
  }
package/form/FileField/FileFieldView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  .FileFieldView {
4
4
  $root: &;
@@ -30,7 +30,7 @@
30
30
  width: 128px;
31
31
  height: 128px;
32
32
  border: 1px dashed #6F6B76;
33
- background-color: vars.$gray;
33
+ background-color: variables.$gray;
34
34
  border-radius: 20px;
35
35
 
36
36
  .ButtonView__label {
package/form/ImageField/ImageFieldView.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../../scss/variables" as vars;
1
+ @use "../../scss/variables";
2
2
 
3
3
  .ImageFieldView {
4
4
  $root: &;
@@ -20,7 +20,7 @@
20
20
 
21
21
  &__button-label {
22
22
  font-size: 16px;
23
- color: vars.$text-color;
23
+ color: variables.$text-color;
24
24
  }
25
25
 
26
26
  &__progress-bar {