@itcase/ui 1.8.159 → 1.8.160

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 (97) hide show
  1. package/dist/css/components/Accordion/Accordion.css +90 -10
  2. package/dist/css/components/Avatar/Avatar.css +219 -12
  3. package/dist/css/components/AvatarStack/AvatarStack.css +54 -8
  4. package/dist/css/components/Badge/Badge.css +1131 -25
  5. package/dist/css/components/Breadcrumbs/Breadcrumbs.css +27 -5
  6. package/dist/css/components/Button/Button.css +467 -21
  7. package/dist/css/components/Cell/Cell.css +31 -6
  8. package/dist/css/components/Checkbox/Checkbox.css +10896 -164
  9. package/dist/css/components/Checkmark/Checkmark.css +60 -9
  10. package/dist/css/components/Chips/Chips.css +53 -7
  11. package/dist/css/components/Choice/Choice.css +123 -13
  12. package/dist/css/components/Choice/css/__item/choice__item_size.css +78 -8
  13. package/dist/css/components/Code/Code.css +55 -11
  14. package/dist/css/components/DatePeriod/DatePeriod.css +61 -11
  15. package/dist/css/components/Divider/Divider.css +35 -15
  16. package/dist/css/components/Dot/Dot.css +41 -7
  17. package/dist/css/components/Dropdown/Dropdown.css +66 -10
  18. package/dist/css/components/Flex/Flex.css +239 -40
  19. package/dist/css/components/Flex/css/__item/flex__item_align.css +51 -8
  20. package/dist/css/components/Flex/css/__item/flex__item_direction.css +11 -4
  21. package/dist/css/components/Flex/css/__item/flex__item_grow.css +5 -4
  22. package/dist/css/components/Flex/css/__item/flex__item_justify-content.css +17 -4
  23. package/dist/css/components/Grid/Grid.css +2207 -106
  24. package/dist/css/components/Grid/css/__item/grid__item_align-self.css +53 -4
  25. package/dist/css/components/Grid/css/__item/grid__item_column.css +270 -9
  26. package/dist/css/components/Grid/css/__item/grid__item_justify-self.css +66 -8
  27. package/dist/css/components/Grid/css/__item/grid__item_row.css +270 -9
  28. package/dist/css/components/Group/Group.css +5220 -117
  29. package/dist/css/components/HeroTitle/HeroTitle.css +27 -4
  30. package/dist/css/components/Icon/Icon.css +7601 -99
  31. package/dist/css/components/Input/Input.css +42 -10
  32. package/dist/css/components/InputPassword/InputPassword.css +42 -10
  33. package/dist/css/components/Label/Label.css +34 -6
  34. package/dist/css/components/Link/Link.css +14 -4
  35. package/dist/css/components/List/List.css +425 -23
  36. package/dist/css/components/Loader/Loader.css +79 -9
  37. package/dist/css/components/Logo/Logo.css +84 -13
  38. package/dist/css/components/MenuItem/MenuItem.css +105 -15
  39. package/dist/css/components/Modal/Modal.css +103 -9
  40. package/dist/css/components/Notification/Notification.css +39 -5
  41. package/dist/css/components/Notification/css/__item/notification__item_size.css +39 -5
  42. package/dist/css/components/Pagination/Pagination.css +82 -19
  43. package/dist/css/components/Pagination/css/__item/pagination__item.css +11 -4
  44. package/dist/css/components/Pagination/css/__item/pagination__item_size.css +15 -5
  45. package/dist/css/components/Radio/Radio.css +11019 -155
  46. package/dist/css/components/RangeSlider/RangeSlider.css +2584 -64
  47. package/dist/css/components/ScrollToView/ScrollToView.css +1974 -10
  48. package/dist/css/components/Search/Search.css +34 -6
  49. package/dist/css/components/Search/css/search-input/search-input_size.css +34 -6
  50. package/dist/css/components/Segmented/Segmented.css +60 -8
  51. package/dist/css/components/Segmented/css/__item/segmaented__item.css +60 -8
  52. package/dist/css/components/Select/Select.css +456 -25
  53. package/dist/css/components/Select/css/__input-container/select__input-container.css +369 -12
  54. package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css +20 -4
  55. package/dist/css/components/Switch/Switch.css +53 -7
  56. package/dist/css/components/Tab/Tab.css +79 -10
  57. package/dist/css/components/Text/Text.css +61 -12
  58. package/dist/css/components/Textarea/Textarea.css +32 -4
  59. package/dist/css/components/Tile/Tile.css +49 -6
  60. package/dist/css/components/Title/Title.css +53 -5
  61. package/dist/css/components/Tooltip/Tooltip.css +21 -5
  62. package/dist/css/components/Warning/Warning.css +6 -8
  63. package/dist/css/styles/align/align.css +20 -3
  64. package/dist/css/styles/align/align_horizontal-reverse.css +188 -4
  65. package/dist/css/styles/align/align_horizontal.css +188 -4
  66. package/dist/css/styles/align/align_vertical-reverse.css +176 -4
  67. package/dist/css/styles/align/align_vertical.css +176 -4
  68. package/dist/css/styles/align-items/align-items.css +16 -3
  69. package/dist/css/styles/align-self/align-self.css +17 -4
  70. package/dist/css/styles/blur/blur.css +78 -5
  71. package/dist/css/styles/border/border.css +224 -10
  72. package/dist/css/styles/border-color/border-color.css +24322 -53
  73. package/dist/css/styles/border-width/border-width.css +52 -4
  74. package/dist/css/styles/bundle.css +96767 -7865
  75. package/dist/css/styles/caret-color/caret-color.css +276 -8
  76. package/dist/css/styles/cursor/cursor.css +21 -5
  77. package/dist/css/styles/elevation/elevation.css +23 -4
  78. package/dist/css/styles/elevation/elevation_hover.css +37 -4
  79. package/dist/css/styles/fill/fill.css +7646 -70
  80. package/dist/css/styles/fill/fill_gradient.css +519 -12
  81. package/dist/css/styles/flex/flex-grow.css +5 -4
  82. package/dist/css/styles/hover/hover-fill-color.css +836 -9
  83. package/dist/css/styles/hover/hover-item-color.css +1074 -9
  84. package/dist/css/styles/hover/hover-text-color.css +1074 -9
  85. package/dist/css/styles/justify-content/justify-content.css +32 -4
  86. package/dist/css/styles/opacity/opacity.css +70 -5
  87. package/dist/css/styles/placeholder-text-color/placeholder-text-color.css +354 -8
  88. package/dist/css/styles/svg-color/svg_fill.css +1018 -9
  89. package/dist/css/styles/svg-color/svg_fill_hover.css +471 -8
  90. package/dist/css/styles/svg-color/svg_path_fill.css +354 -8
  91. package/dist/css/styles/text-align/text-align.css +8 -4
  92. package/dist/css/styles/text-color/text-color.css +3570 -45
  93. package/dist/css/styles/text-decoration/text-decoration.css +5 -4
  94. package/dist/css/styles/text-gradient/text-gradient.css +1182 -12
  95. package/dist/css/styles/text-style/text-style.css +5 -4
  96. package/dist/css/styles/text-weight/text-weight.css +147 -7
  97. package/package.json +7 -7
package/dist/css/components/Accordion/Accordion.css CHANGED
@@ -15,14 +15,30 @@
15
15
  flex-direction: column;
16
16
  }
17
17
  }
18
- @each $val in row, row-reverse, column, column-reverse {
19
- &_$(val) {
18
+ &_row {
20
19
  ^^&__wrapper {
21
20
  display: flex;
22
- flex-direction: $(val);
21
+ flex-direction: row;
22
+ }
23
+ }
24
+ &_row-reverse {
25
+ ^^&__wrapper {
26
+ display: flex;
27
+ flex-direction: row-reverse;
28
+ }
29
+ }
30
+ &_column {
31
+ ^^&__wrapper {
32
+ display: flex;
33
+ flex-direction: column;
34
+ }
35
+ }
36
+ &_column-reverse {
37
+ ^^&__wrapper {
38
+ display: flex;
39
+ flex-direction: column-reverse;
23
40
  }
24
41
  }
25
- }
26
42
  }
27
43
  }
28
44
  .accordion-item {
@@ -56,19 +72,83 @@
56
72
  }
57
73
  .accordion-item {
58
74
  &_size {
59
- @each $size in xxl, xl, l, m, s, xs, xxs {
60
- &_$(size) {
75
+ &_xxl {
61
76
  ^^&__header {
62
- padding: var(--accordion-item-header-$(size)-padding);
63
- gap: var(--accordion-item-header-$(size)-gap);
77
+ padding: var(--accordion-item-header-xxl-padding);
78
+ gap: var(--accordion-item-header-xxl-gap);
64
79
  }
65
80
  ^^&__content {
66
81
  &-inner {
67
- padding: var(--accordion-item-content-$(size)-padding);
82
+ padding: var(--accordion-item-content-xxl-padding);
83
+ }
84
+ }
85
+ }
86
+ &_xl {
87
+ ^^&__header {
88
+ padding: var(--accordion-item-header-xl-padding);
89
+ gap: var(--accordion-item-header-xl-gap);
90
+ }
91
+ ^^&__content {
92
+ &-inner {
93
+ padding: var(--accordion-item-content-xl-padding);
94
+ }
95
+ }
96
+ }
97
+ &_l {
98
+ ^^&__header {
99
+ padding: var(--accordion-item-header-l-padding);
100
+ gap: var(--accordion-item-header-l-gap);
101
+ }
102
+ ^^&__content {
103
+ &-inner {
104
+ padding: var(--accordion-item-content-l-padding);
105
+ }
106
+ }
107
+ }
108
+ &_m {
109
+ ^^&__header {
110
+ padding: var(--accordion-item-header-m-padding);
111
+ gap: var(--accordion-item-header-m-gap);
112
+ }
113
+ ^^&__content {
114
+ &-inner {
115
+ padding: var(--accordion-item-content-m-padding);
116
+ }
117
+ }
118
+ }
119
+ &_s {
120
+ ^^&__header {
121
+ padding: var(--accordion-item-header-s-padding);
122
+ gap: var(--accordion-item-header-s-gap);
123
+ }
124
+ ^^&__content {
125
+ &-inner {
126
+ padding: var(--accordion-item-content-s-padding);
127
+ }
128
+ }
129
+ }
130
+ &_xs {
131
+ ^^&__header {
132
+ padding: var(--accordion-item-header-xs-padding);
133
+ gap: var(--accordion-item-header-xs-gap);
134
+ }
135
+ ^^&__content {
136
+ &-inner {
137
+ padding: var(--accordion-item-content-xs-padding);
138
+ }
139
+ }
140
+ }
141
+ &_xxs {
142
+ ^^&__header {
143
+ padding: var(--accordion-item-header-xxs-padding);
144
+ gap: var(--accordion-item-header-xxs-gap);
145
+ }
146
+ ^^&__content {
147
+ &-inner {
148
+ padding: var(--accordion-item-content-xxs-padding);
68
149
  }
69
150
  }
70
151
  }
71
- }
72
152
  }
73
153
  }
74
154
  .accordion-item {
package/dist/css/components/Avatar/Avatar.css CHANGED
@@ -53,30 +53,237 @@
53
53
  /* stylelint-disable prettier/prettier */
54
54
  .avatar {
55
55
  &_size {
56
- @each $size in 16, 20, 24, 32, 40, 48, 56, 96, 144, 240,
57
- 240 {
58
- &_$(size) {
56
+ &_16 {
59
57
  ^^&__wrapper {
60
- width: $(size)px;
61
- height: $(size)px;
58
+ width: 16px;
59
+ height: 16px;
62
60
  display: flex;
63
61
  justify-content: center;
64
62
  align-items: center;
65
63
  ^^^&__badge {
66
- right: var(--avatar-badge-$(size)-position-right);
67
- bottom: var(--avatar-badge-$(size)-position-bottom);
64
+ right: var(--avatar-badge-16-position-right);
65
+ bottom: var(--avatar-badge-16-position-bottom);
68
66
  }
69
67
  ^^^&__image {
70
- width: $(size)px;
71
- height: $(size)px;
68
+ width: 16px;
69
+ height: 16px;
72
70
  & .image__item {
73
- width: $(size)px;
74
- height: $(size)px;
71
+ width: 16px;
72
+ height: 16px;
73
+ }
74
+ }
75
+ }
76
+ }
77
+ &_20 {
78
+ ^^&__wrapper {
79
+ width: 20px;
80
+ height: 20px;
81
+ display: flex;
82
+ justify-content: center;
83
+ align-items: center;
84
+ ^^^&__badge {
85
+ right: var(--avatar-badge-20-position-right);
86
+ bottom: var(--avatar-badge-20-position-bottom);
87
+ }
88
+ ^^^&__image {
89
+ width: 20px;
90
+ height: 20px;
91
+ & .image__item {
92
+ width: 20px;
93
+ height: 20px;
94
+ }
95
+ }
96
+ }
97
+ }
98
+ &_24 {
99
+ ^^&__wrapper {
100
+ width: 24px;
101
+ height: 24px;
102
+ display: flex;
103
+ justify-content: center;
104
+ align-items: center;
105
+ ^^^&__badge {
106
+ right: var(--avatar-badge-24-position-right);
107
+ bottom: var(--avatar-badge-24-position-bottom);
108
+ }
109
+ ^^^&__image {
110
+ width: 24px;
111
+ height: 24px;
112
+ & .image__item {
113
+ width: 24px;
114
+ height: 24px;
115
+ }
116
+ }
117
+ }
118
+ }
119
+ &_32 {
120
+ ^^&__wrapper {
121
+ width: 32px;
122
+ height: 32px;
123
+ display: flex;
124
+ justify-content: center;
125
+ align-items: center;
126
+ ^^^&__badge {
127
+ right: var(--avatar-badge-32-position-right);
128
+ bottom: var(--avatar-badge-32-position-bottom);
129
+ }
130
+ ^^^&__image {
131
+ width: 32px;
132
+ height: 32px;
133
+ & .image__item {
134
+ width: 32px;
135
+ height: 32px;
136
+ }
137
+ }
138
+ }
139
+ }
140
+ &_40 {
141
+ ^^&__wrapper {
142
+ width: 40px;
143
+ height: 40px;
144
+ display: flex;
145
+ justify-content: center;
146
+ align-items: center;
147
+ ^^^&__badge {
148
+ right: var(--avatar-badge-40-position-right);
149
+ bottom: var(--avatar-badge-40-position-bottom);
150
+ }
151
+ ^^^&__image {
152
+ width: 40px;
153
+ height: 40px;
154
+ & .image__item {
155
+ width: 40px;
156
+ height: 40px;
157
+ }
158
+ }
159
+ }
160
+ }
161
+ &_48 {
162
+ ^^&__wrapper {
163
+ width: 48px;
164
+ height: 48px;
165
+ display: flex;
166
+ justify-content: center;
167
+ align-items: center;
168
+ ^^^&__badge {
169
+ right: var(--avatar-badge-48-position-right);
170
+ bottom: var(--avatar-badge-48-position-bottom);
171
+ }
172
+ ^^^&__image {
173
+ width: 48px;
174
+ height: 48px;
175
+ & .image__item {
176
+ width: 48px;
177
+ height: 48px;
178
+ }
179
+ }
180
+ }
181
+ }
182
+ &_56 {
183
+ ^^&__wrapper {
184
+ width: 56px;
185
+ height: 56px;
186
+ display: flex;
187
+ justify-content: center;
188
+ align-items: center;
189
+ ^^^&__badge {
190
+ right: var(--avatar-badge-56-position-right);
191
+ bottom: var(--avatar-badge-56-position-bottom);
192
+ }
193
+ ^^^&__image {
194
+ width: 56px;
195
+ height: 56px;
196
+ & .image__item {
197
+ width: 56px;
198
+ height: 56px;
199
+ }
200
+ }
201
+ }
202
+ }
203
+ &_96 {
204
+ ^^&__wrapper {
205
+ width: 96px;
206
+ height: 96px;
207
+ display: flex;
208
+ justify-content: center;
209
+ align-items: center;
210
+ ^^^&__badge {
211
+ right: var(--avatar-badge-96-position-right);
212
+ bottom: var(--avatar-badge-96-position-bottom);
213
+ }
214
+ ^^^&__image {
215
+ width: 96px;
216
+ height: 96px;
217
+ & .image__item {
218
+ width: 96px;
219
+ height: 96px;
220
+ }
221
+ }
222
+ }
223
+ }
224
+ &_144 {
225
+ ^^&__wrapper {
226
+ width: 144px;
227
+ height: 144px;
228
+ display: flex;
229
+ justify-content: center;
230
+ align-items: center;
231
+ ^^^&__badge {
232
+ right: var(--avatar-badge-144-position-right);
233
+ bottom: var(--avatar-badge-144-position-bottom);
234
+ }
235
+ ^^^&__image {
236
+ width: 144px;
237
+ height: 144px;
238
+ & .image__item {
239
+ width: 144px;
240
+ height: 144px;
241
+ }
242
+ }
243
+ }
244
+ }
245
+ &_240 {
246
+ ^^&__wrapper {
247
+ width: 240px;
248
+ height: 240px;
249
+ display: flex;
250
+ justify-content: center;
251
+ align-items: center;
252
+ ^^^&__badge {
253
+ right: var(--avatar-badge-240-position-right);
254
+ bottom: var(--avatar-badge-240-position-bottom);
255
+ }
256
+ ^^^&__image {
257
+ width: 240px;
258
+ height: 240px;
259
+ & .image__item {
260
+ width: 240px;
261
+ height: 240px;
262
+ }
263
+ }
264
+ }
265
+ }
266
+ &_240 {
267
+ ^^&__wrapper {
268
+ width: 240px;
269
+ height: 240px;
270
+ display: flex;
271
+ justify-content: center;
272
+ align-items: center;
273
+ ^^^&__badge {
274
+ right: var(--avatar-badge-240-position-right);
275
+ bottom: var(--avatar-badge-240-position-bottom);
276
+ }
277
+ ^^^&__image {
278
+ width: 240px;
279
+ height: 240px;
280
+ & .image__item {
281
+ width: 240px;
282
+ height: 240px;
75
283
  }
76
284
  }
77
285
  }
78
286
  }
79
- }
80
287
  }
81
288
  }
82
289
  .avatar_status {
package/dist/css/components/AvatarStack/AvatarStack.css CHANGED
@@ -41,26 +41,72 @@ div.avatar {
41
41
  align-items: flex-start;
42
42
  }
43
43
  }
44
- @each $val in row, row-reverse, column, column-reverse {
45
- &_$(val) {
44
+ &_row {
46
45
  display: flex;
47
- flex-direction: $(val);
46
+ flex-direction: row;
47
+ align-items: flex-start;
48
+ }
49
+ &_row-reverse {
50
+ display: flex;
51
+ flex-direction: row-reverse;
52
+ align-items: flex-start;
53
+ }
54
+ &_column {
55
+ display: flex;
56
+ flex-direction: column;
57
+ align-items: flex-start;
58
+ }
59
+ &_column-reverse {
60
+ display: flex;
61
+ flex-direction: column-reverse;
48
62
  align-items: flex-start;
49
63
  }
50
- }
51
64
  }
52
65
  }
53
66
  div.avatar-stack {
54
67
  &_size {
55
- @each $size in 56, 40, 32, 24, 20, 16 {
56
- &_$(size) {
68
+ &_56 {
57
69
  & .avatar-stack__item {
58
70
  &:not(:first-child) {
59
- margin: 0 0 0 var(--avatar-stack-size-$(size)-gap);
71
+ margin: 0 0 0 var(--avatar-stack-size-56-gap);
72
+ }
73
+ }
74
+ }
75
+ &_40 {
76
+ & .avatar-stack__item {
77
+ &:not(:first-child) {
78
+ margin: 0 0 0 var(--avatar-stack-size-40-gap);
79
+ }
80
+ }
81
+ }
82
+ &_32 {
83
+ & .avatar-stack__item {
84
+ &:not(:first-child) {
85
+ margin: 0 0 0 var(--avatar-stack-size-32-gap);
86
+ }
87
+ }
88
+ }
89
+ &_24 {
90
+ & .avatar-stack__item {
91
+ &:not(:first-child) {
92
+ margin: 0 0 0 var(--avatar-stack-size-24-gap);
93
+ }
94
+ }
95
+ }
96
+ &_20 {
97
+ & .avatar-stack__item {
98
+ &:not(:first-child) {
99
+ margin: 0 0 0 var(--avatar-stack-size-20-gap);
100
+ }
101
+ }
102
+ }
103
+ &_16 {
104
+ & .avatar-stack__item {
105
+ &:not(:first-child) {
106
+ margin: 0 0 0 var(--avatar-stack-size-16-gap);
60
107
  }
61
108
  }
62
109
  }
63
- }
64
110
  }
65
111
  }
66
112
  .avatar-stack {