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

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