@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/Textarea/Textarea.css CHANGED
@@ -34,13 +34,41 @@
34
34
  }
35
35
  .textarea {
36
36
  &&_size {
37
- @each $size in xxl, xl, l, m, s, xs, xxs {
38
- &_$(size) {
37
+ &_xxl {
39
38
  ^^&__input {
40
- padding: var(--textarea-size-$(size)-padding);
39
+ padding: var(--textarea-size-xxl-padding);
40
+ }
41
+ }
42
+ &_xl {
43
+ ^^&__input {
44
+ padding: var(--textarea-size-xl-padding);
45
+ }
46
+ }
47
+ &_l {
48
+ ^^&__input {
49
+ padding: var(--textarea-size-l-padding);
50
+ }
51
+ }
52
+ &_m {
53
+ ^^&__input {
54
+ padding: var(--textarea-size-m-padding);
55
+ }
56
+ }
57
+ &_s {
58
+ ^^&__input {
59
+ padding: var(--textarea-size-s-padding);
60
+ }
61
+ }
62
+ &_xs {
63
+ ^^&__input {
64
+ padding: var(--textarea-size-xs-padding);
65
+ }
66
+ }
67
+ &_xxs {
68
+ ^^&__input {
69
+ padding: var(--textarea-size-xxs-padding);
41
70
  }
42
71
  }
43
- }
44
72
  }
45
73
  }
46
74
  :root {
package/dist/css/components/Tile/Tile.css CHANGED
@@ -20,17 +20,60 @@
20
20
  }
21
21
  .tile {
22
22
  &_size {
23
- @each $size in xl, l, m, s, xs, xxs {
24
- &_$(size) {
25
- min-width: var(--tile-size-$(size)-min-width);
26
- padding: var(--tile-size-$(size)-padding);
23
+ &_xl {
24
+ min-width: var(--tile-size-xl-min-width);
25
+ padding: var(--tile-size-xl-padding);
27
26
  & ^^&__wrapper {
28
27
  display: flex;
29
28
  flex-flow: column;
30
- gap: var(--tile-size-$(size)-gap);
29
+ gap: var(--tile-size-xl-gap);
30
+ }
31
+ }
32
+ &_l {
33
+ min-width: var(--tile-size-l-min-width);
34
+ padding: var(--tile-size-l-padding);
35
+ & ^^&__wrapper {
36
+ display: flex;
37
+ flex-flow: column;
38
+ gap: var(--tile-size-l-gap);
39
+ }
40
+ }
41
+ &_m {
42
+ min-width: var(--tile-size-m-min-width);
43
+ padding: var(--tile-size-m-padding);
44
+ & ^^&__wrapper {
45
+ display: flex;
46
+ flex-flow: column;
47
+ gap: var(--tile-size-m-gap);
48
+ }
49
+ }
50
+ &_s {
51
+ min-width: var(--tile-size-s-min-width);
52
+ padding: var(--tile-size-s-padding);
53
+ & ^^&__wrapper {
54
+ display: flex;
55
+ flex-flow: column;
56
+ gap: var(--tile-size-s-gap);
57
+ }
58
+ }
59
+ &_xs {
60
+ min-width: var(--tile-size-xs-min-width);
61
+ padding: var(--tile-size-xs-padding);
62
+ & ^^&__wrapper {
63
+ display: flex;
64
+ flex-flow: column;
65
+ gap: var(--tile-size-xs-gap);
66
+ }
67
+ }
68
+ &_xxs {
69
+ min-width: var(--tile-size-xxs-min-width);
70
+ padding: var(--tile-size-xxs-padding);
71
+ & ^^&__wrapper {
72
+ display: flex;
73
+ flex-flow: column;
74
+ gap: var(--tile-size-xxs-gap);
31
75
  }
32
76
  }
33
- }
34
77
  }
35
78
  }
36
79
  .tile {
package/dist/css/components/Title/Title.css CHANGED
@@ -29,18 +29,66 @@
29
29
  }
30
30
  .title {
31
31
  &_size {
32
- @each $size in h1, h2, h3, h4, h5, h6 {
33
- &_$(size) {
32
+ &_h1 {
34
33
  padding: 0;
35
34
  margin: 0;
36
35
  display: flex;
37
36
  gap: 8px;
38
- @mixin $(size);
37
+ @mixin h1;
39
38
  ^^&__wrapper {
40
- gap: var(--title-size-$(size)-gap);
39
+ gap: var(--title-size-h1-gap);
40
+ }
41
+ }
42
+ &_h2 {
43
+ padding: 0;
44
+ margin: 0;
45
+ display: flex;
46
+ gap: 8px;
47
+ @mixin h2;
48
+ ^^&__wrapper {
49
+ gap: var(--title-size-h2-gap);
50
+ }
51
+ }
52
+ &_h3 {
53
+ padding: 0;
54
+ margin: 0;
55
+ display: flex;
56
+ gap: 8px;
57
+ @mixin h3;
58
+ ^^&__wrapper {
59
+ gap: var(--title-size-h3-gap);
60
+ }
61
+ }
62
+ &_h4 {
63
+ padding: 0;
64
+ margin: 0;
65
+ display: flex;
66
+ gap: 8px;
67
+ @mixin h4;
68
+ ^^&__wrapper {
69
+ gap: var(--title-size-h4-gap);
70
+ }
71
+ }
72
+ &_h5 {
73
+ padding: 0;
74
+ margin: 0;
75
+ display: flex;
76
+ gap: 8px;
77
+ @mixin h5;
78
+ ^^&__wrapper {
79
+ gap: var(--title-size-h5-gap);
80
+ }
81
+ }
82
+ &_h6 {
83
+ padding: 0;
84
+ margin: 0;
85
+ display: flex;
86
+ gap: 8px;
87
+ @mixin h6;
88
+ ^^&__wrapper {
89
+ gap: var(--title-size-h6-gap);
41
90
  }
42
91
  }
43
- }
44
92
  }
45
93
  }
46
94
  .title {
package/dist/css/components/Tooltip/Tooltip.css CHANGED
@@ -47,17 +47,33 @@
47
47
 
48
48
  .tooltip {
49
49
  &_size {
50
- @each $size in s, m, l {
51
- &_$(size) {
50
+ &_s {
52
51
  max-width: 400px;
53
52
  ^^&__inner {
54
- padding: var(--tooltip-size-$(size)-padding);
53
+ padding: var(--tooltip-size-s-padding);
55
54
  display: flex;
56
55
  flex-flow: column nowrap;
57
- gap: var(--tooltip-size-$(size)-gap);
56
+ gap: var(--tooltip-size-s-gap);
57
+ }
58
+ }
59
+ &_m {
60
+ max-width: 400px;
61
+ ^^&__inner {
62
+ padding: var(--tooltip-size-m-padding);
63
+ display: flex;
64
+ flex-flow: column nowrap;
65
+ gap: var(--tooltip-size-m-gap);
66
+ }
67
+ }
68
+ &_l {
69
+ max-width: 400px;
70
+ ^^&__inner {
71
+ padding: var(--tooltip-size-l-padding);
72
+ display: flex;
73
+ flex-flow: column nowrap;
74
+ gap: var(--tooltip-size-l-gap);
58
75
  }
59
76
  }
60
- }
61
77
  }
62
78
  }
63
79
 
package/dist/css/components/Warning/Warning.css CHANGED
@@ -14,17 +14,15 @@
14
14
  }
15
15
  }
16
16
  .warning {
17
- @each $size in l {
18
- &_size_$(size) {
19
- min-width: var(--warning-$(size)-min-width);
20
- padding: var(--warning-$(size)-padding);
21
- gap: var(--warning-$(size)-gap);
17
+ &_size_l {
18
+ min-width: var(--warning-l-min-width);
19
+ padding: var(--warning-l-padding);
20
+ gap: var(--warning-l-gap);
22
21
  ^&__content {
23
- gap: var(--warning-content-$(size)-gap);
24
- min-width: var(--warning-content-$(size)-min-width);
22
+ gap: var(--warning-content-l-gap);
23
+ min-width: var(--warning-content-l-min-width);
25
24
  }
26
25
  }
27
- }
28
26
  }
29
27
  .warning {
30
28
  &&_skeleton {
package/dist/css/styles/align/align.css CHANGED
@@ -1,8 +1,25 @@
1
- @each $selector in div, button, input, textarea {
1
+
2
2
  .align,
3
- $(selector).align {
3
+ div.align {
4
+ &_center {
5
+ margin: 0 auto;
6
+ }
7
+ }
8
+ .align,
9
+ button.align {
10
+ &_center {
11
+ margin: 0 auto;
12
+ }
13
+ }
14
+ .align,
15
+ input.align {
16
+ &_center {
17
+ margin: 0 auto;
18
+ }
19
+ }
20
+ .align,
21
+ textarea.align {
4
22
  &_center {
5
23
  margin: 0 auto;
6
24
  }
7
25
  }
8
- }
package/dist/css/styles/align/align_horizontal-reverse.css CHANGED
@@ -3,9 +3,194 @@
3
3
  flex-direction: row-reverse;
4
4
  }
5
5
 
6
- @each $selector in div, button, input, textarea {
7
- .align,
8
- $(selector).align {
6
+ .align,
7
+ div.align {
8
+ &_horizontal-reverse {
9
+ display: flex;
10
+ flex-direction: row-reverse;
11
+ @extend %align-horizontal-reverse;
12
+ &-top {
13
+ &-left {
14
+ align-items: flex-start;
15
+ @extend %align-horizontal-reverse;
16
+ }
17
+ &-center {
18
+ text-align: center;
19
+ justify-content: center;
20
+ align-items: flex-start;
21
+ @extend %align-horizontal-reverse;
22
+ }
23
+ &-right {
24
+ text-align: right;
25
+ justify-content: flex-end;
26
+ align-items: flex-start;
27
+ @extend %align-horizontal-reverse;
28
+ }
29
+ }
30
+ &-left {
31
+ align-items: center;
32
+ @extend %align-horizontal-reverse;
33
+ }
34
+ &-center {
35
+ text-align: center;
36
+ justify-content: center;
37
+ align-items: center;
38
+ @extend %align-horizontal-reverse;
39
+ }
40
+ &-right {
41
+ text-align: right;
42
+ justify-content: flex-end;
43
+ align-items: center;
44
+ @extend %align-horizontal-reverse;
45
+ }
46
+ &-bottom {
47
+ &-left {
48
+ flex-direction: row;
49
+ align-items: flex-end;
50
+ @extend %align-horizontal-reverse;
51
+ }
52
+ &-center {
53
+ text-align: center;
54
+ justify-content: center;
55
+ align-items: flex-end;
56
+ @extend %align-horizontal-reverse;
57
+ }
58
+ &-right {
59
+ text-align: right;
60
+ justify-content: flex-end;
61
+ align-items: flex-end;
62
+ @extend %align-horizontal-reverse;
63
+ }
64
+ }
65
+ }
66
+ }
67
+
68
+ .align,
69
+ button.align {
70
+ &_horizontal-reverse {
71
+ display: flex;
72
+ flex-direction: row-reverse;
73
+ @extend %align-horizontal-reverse;
74
+ &-top {
75
+ &-left {
76
+ align-items: flex-start;
77
+ @extend %align-horizontal-reverse;
78
+ }
79
+ &-center {
80
+ text-align: center;
81
+ justify-content: center;
82
+ align-items: flex-start;
83
+ @extend %align-horizontal-reverse;
84
+ }
85
+ &-right {
86
+ text-align: right;
87
+ justify-content: flex-end;
88
+ align-items: flex-start;
89
+ @extend %align-horizontal-reverse;
90
+ }
91
+ }
92
+ &-left {
93
+ align-items: center;
94
+ @extend %align-horizontal-reverse;
95
+ }
96
+ &-center {
97
+ text-align: center;
98
+ justify-content: center;
99
+ align-items: center;
100
+ @extend %align-horizontal-reverse;
101
+ }
102
+ &-right {
103
+ text-align: right;
104
+ justify-content: flex-end;
105
+ align-items: center;
106
+ @extend %align-horizontal-reverse;
107
+ }
108
+ &-bottom {
109
+ &-left {
110
+ flex-direction: row;
111
+ align-items: flex-end;
112
+ @extend %align-horizontal-reverse;
113
+ }
114
+ &-center {
115
+ text-align: center;
116
+ justify-content: center;
117
+ align-items: flex-end;
118
+ @extend %align-horizontal-reverse;
119
+ }
120
+ &-right {
121
+ text-align: right;
122
+ justify-content: flex-end;
123
+ align-items: flex-end;
124
+ @extend %align-horizontal-reverse;
125
+ }
126
+ }
127
+ }
128
+ }
129
+
130
+ .align,
131
+ input.align {
132
+ &_horizontal-reverse {
133
+ display: flex;
134
+ flex-direction: row-reverse;
135
+ @extend %align-horizontal-reverse;
136
+ &-top {
137
+ &-left {
138
+ align-items: flex-start;
139
+ @extend %align-horizontal-reverse;
140
+ }
141
+ &-center {
142
+ text-align: center;
143
+ justify-content: center;
144
+ align-items: flex-start;
145
+ @extend %align-horizontal-reverse;
146
+ }
147
+ &-right {
148
+ text-align: right;
149
+ justify-content: flex-end;
150
+ align-items: flex-start;
151
+ @extend %align-horizontal-reverse;
152
+ }
153
+ }
154
+ &-left {
155
+ align-items: center;
156
+ @extend %align-horizontal-reverse;
157
+ }
158
+ &-center {
159
+ text-align: center;
160
+ justify-content: center;
161
+ align-items: center;
162
+ @extend %align-horizontal-reverse;
163
+ }
164
+ &-right {
165
+ text-align: right;
166
+ justify-content: flex-end;
167
+ align-items: center;
168
+ @extend %align-horizontal-reverse;
169
+ }
170
+ &-bottom {
171
+ &-left {
172
+ flex-direction: row;
173
+ align-items: flex-end;
174
+ @extend %align-horizontal-reverse;
175
+ }
176
+ &-center {
177
+ text-align: center;
178
+ justify-content: center;
179
+ align-items: flex-end;
180
+ @extend %align-horizontal-reverse;
181
+ }
182
+ &-right {
183
+ text-align: right;
184
+ justify-content: flex-end;
185
+ align-items: flex-end;
186
+ @extend %align-horizontal-reverse;
187
+ }
188
+ }
189
+ }
190
+ }
191
+
192
+ .align,
193
+ textarea.align {
9
194
  &_horizontal-reverse {
10
195
  display: flex;
11
196
  flex-direction: row-reverse;
@@ -65,4 +250,3 @@
65
250
  }
66
251
  }
67
252
  }
68
- }
package/dist/css/styles/align/align_horizontal.css CHANGED
@@ -3,9 +3,194 @@
3
3
  flex-direction: row;
4
4
  }
5
5
 
6
- @each $selector in div, button, input, textarea {
7
- .align,
8
- $(selector).align {
6
+ .align,
7
+ div.align {
8
+ &_horizontal {
9
+ &_top {
10
+ align-items: flex-start;
11
+ @extend %align-horizontal;
12
+ &-left {
13
+ align-items: flex-start;
14
+ @extend %align-horizontal;
15
+ }
16
+ &-center {
17
+ text-align: center;
18
+ justify-content: center;
19
+ align-items: flex-start;
20
+ @extend %align-horizontal;
21
+ }
22
+ &-right {
23
+ text-align: right;
24
+ justify-content: flex-end;
25
+ align-items: flex-start;
26
+ @extend %align-horizontal;
27
+ }
28
+ }
29
+ &_bottom {
30
+ align-items: flex-end;
31
+ @extend %align-horizontal;
32
+ &-left {
33
+ align-items: flex-end;
34
+ @extend %align-horizontal;
35
+ }
36
+ &-center {
37
+ text-align: center;
38
+ justify-content: center;
39
+ align-items: flex-end;
40
+ @extend %align-horizontal;
41
+ }
42
+ &-right {
43
+ text-align: right;
44
+ justify-content: flex-end;
45
+ align-items: flex-end;
46
+ @extend %align-horizontal;
47
+ }
48
+ }
49
+ &-left {
50
+ align-items: center;
51
+ @extend %align-horizontal;
52
+ }
53
+ &-center {
54
+ text-align: center;
55
+ justify-content: center;
56
+ align-items: center;
57
+ @extend %align-horizontal;
58
+ }
59
+ &-right {
60
+ text-align: right;
61
+ justify-content: flex-end;
62
+ align-items: center;
63
+ @extend %align-horizontal;
64
+ }
65
+ }
66
+ }
67
+
68
+ .align,
69
+ button.align {
70
+ &_horizontal {
71
+ &_top {
72
+ align-items: flex-start;
73
+ @extend %align-horizontal;
74
+ &-left {
75
+ align-items: flex-start;
76
+ @extend %align-horizontal;
77
+ }
78
+ &-center {
79
+ text-align: center;
80
+ justify-content: center;
81
+ align-items: flex-start;
82
+ @extend %align-horizontal;
83
+ }
84
+ &-right {
85
+ text-align: right;
86
+ justify-content: flex-end;
87
+ align-items: flex-start;
88
+ @extend %align-horizontal;
89
+ }
90
+ }
91
+ &_bottom {
92
+ align-items: flex-end;
93
+ @extend %align-horizontal;
94
+ &-left {
95
+ align-items: flex-end;
96
+ @extend %align-horizontal;
97
+ }
98
+ &-center {
99
+ text-align: center;
100
+ justify-content: center;
101
+ align-items: flex-end;
102
+ @extend %align-horizontal;
103
+ }
104
+ &-right {
105
+ text-align: right;
106
+ justify-content: flex-end;
107
+ align-items: flex-end;
108
+ @extend %align-horizontal;
109
+ }
110
+ }
111
+ &-left {
112
+ align-items: center;
113
+ @extend %align-horizontal;
114
+ }
115
+ &-center {
116
+ text-align: center;
117
+ justify-content: center;
118
+ align-items: center;
119
+ @extend %align-horizontal;
120
+ }
121
+ &-right {
122
+ text-align: right;
123
+ justify-content: flex-end;
124
+ align-items: center;
125
+ @extend %align-horizontal;
126
+ }
127
+ }
128
+ }
129
+
130
+ .align,
131
+ input.align {
132
+ &_horizontal {
133
+ &_top {
134
+ align-items: flex-start;
135
+ @extend %align-horizontal;
136
+ &-left {
137
+ align-items: flex-start;
138
+ @extend %align-horizontal;
139
+ }
140
+ &-center {
141
+ text-align: center;
142
+ justify-content: center;
143
+ align-items: flex-start;
144
+ @extend %align-horizontal;
145
+ }
146
+ &-right {
147
+ text-align: right;
148
+ justify-content: flex-end;
149
+ align-items: flex-start;
150
+ @extend %align-horizontal;
151
+ }
152
+ }
153
+ &_bottom {
154
+ align-items: flex-end;
155
+ @extend %align-horizontal;
156
+ &-left {
157
+ align-items: flex-end;
158
+ @extend %align-horizontal;
159
+ }
160
+ &-center {
161
+ text-align: center;
162
+ justify-content: center;
163
+ align-items: flex-end;
164
+ @extend %align-horizontal;
165
+ }
166
+ &-right {
167
+ text-align: right;
168
+ justify-content: flex-end;
169
+ align-items: flex-end;
170
+ @extend %align-horizontal;
171
+ }
172
+ }
173
+ &-left {
174
+ align-items: center;
175
+ @extend %align-horizontal;
176
+ }
177
+ &-center {
178
+ text-align: center;
179
+ justify-content: center;
180
+ align-items: center;
181
+ @extend %align-horizontal;
182
+ }
183
+ &-right {
184
+ text-align: right;
185
+ justify-content: flex-end;
186
+ align-items: center;
187
+ @extend %align-horizontal;
188
+ }
189
+ }
190
+ }
191
+
192
+ .align,
193
+ textarea.align {
9
194
  &_horizontal {
10
195
  &_top {
11
196
  align-items: flex-start;
@@ -65,4 +250,3 @@
65
250
  }
66
251
  }
67
252
  }
68
- }