@andreyshpigunov/x 0.5.5 → 0.5.8

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 (26) hide show
  1. package/assets/css/app.css +1 -1
  2. package/dist/x.css +1 -1
  3. package/index.html +1 -1
  4. package/package.json +1 -1
  5. package/postcss.config.cjs +1 -1
  6. package/src/components/x/app.css +12 -0
  7. package/src/components/x/buttons.css +179 -183
  8. package/src/components/x/colors.css +47 -51
  9. package/src/components/x/dropdown.css +124 -128
  10. package/src/components/x/flex.css +137 -141
  11. package/src/components/x/flow.css +31 -35
  12. package/src/components/x/form.css +92 -125
  13. package/src/components/x/grid.css +95 -99
  14. package/src/components/x/helpers.css +974 -978
  15. package/src/components/x/icons.css +35 -39
  16. package/src/components/x/links.css +54 -58
  17. package/src/components/x/modal.css +214 -218
  18. package/src/components/x/reset.css +163 -166
  19. package/src/components/x/scroll.css +68 -72
  20. package/src/components/x/sheets.css +2 -6
  21. package/src/components/x/slider.css +70 -74
  22. package/src/components/x/space.css +26 -30
  23. package/src/components/x/sticky.css +14 -18
  24. package/src/components/x/typo.css +122 -126
  25. package/src/components/x/variables.css +205 -209
  26. package/src/css/x.css +31 -28
package/src/components/x/dropdown.css CHANGED
@@ -7,148 +7,144 @@ All right reserved.
7
7
  ----------------------------------------*/
8
8
 
9
9
 
10
- @layer dropdown {
10
+ [x-dropdown] {
11
+ display: none;
12
+ list-style: none;
13
+ position: absolute;
14
+ top: 100%;
15
+ z-index: 1000;
16
+ opacity: 0;
17
+ min-width: 22rem;
18
+ max-width: var(--dropdown-max-width);
19
+ max-height: clamp(0px, 80vh, 500px);
20
+ overflow: auto;
21
+ list-style: none;
22
+ padding: var(--dropdown-padding);
23
+ margin: 0;
24
+ background-color: var(--dropdown-backgroud-color);
25
+ border: none;
26
+ box-shadow: var(--dropdown-box-shadow);
27
+ border-radius: var(--dropdown-border-radius);
28
+ transform: scale(.95);
29
+ transform-origin: top;
30
+ transition: opacity .15s ease-out,
31
+ transform .15s ease-out;
32
+ pointer-events: none;
33
+ overscroll-behavior: contain;
11
34
 
12
- [x-dropdown] {
13
- display: none;
14
- list-style: none;
15
- position: absolute;
16
- top: 100%;
17
- z-index: 1000;
18
- opacity: 0;
19
- min-width: 22rem;
20
- max-width: var(--dropdown-max-width);
21
- max-height: clamp(0px, 80vh, 500px);
22
- overflow: auto;
23
- list-style: none;
24
- padding: var(--dropdown-padding);
35
+ @media (min-width: 768px) {
36
+ max-width: calc(var(--dropdown-max-width) * 1.2);
37
+ }
38
+
39
+ & > li {
25
40
  margin: 0;
26
- background-color: var(--dropdown-backgroud-color);
27
- border: none;
28
- box-shadow: var(--dropdown-box-shadow);
29
- border-radius: var(--dropdown-border-radius);
30
- transform: scale(.95);
31
- transform-origin: top;
32
- transition: opacity .15s ease-out,
33
- transform .15s ease-out;
34
- pointer-events: none;
35
- overscroll-behavior: contain;
36
-
37
- @media (min-width: 768px) {
38
- max-width: calc(var(--dropdown-max-width) * 1.2);
39
- }
40
-
41
- & > li {
42
- margin: 0;
43
- }
44
-
45
- &::-webkit-scrollbar {
46
- width: var(--scroll-scrollbar-size);
47
- height: var(--scroll-scrollbar-size);
48
- }
49
-
50
- &::-webkit-scrollbar-track {
51
- background-color: none;
52
- border-radius: var(--scroll-scrollbar-size);
53
- }
54
-
55
- &::-webkit-scrollbar-thumb {
56
- border-radius: var(--scroll-scrollbar-size);
57
- background-color: var(--scroll-scrollbar-thumb-background);
58
- will-change: background-color;
59
- transition: background .2s ease-out;
60
- cursor: pointer;
61
- }
62
-
63
- &::-webkit-scrollbar-thumb:hover {
64
- background-color: var(--scroll-scrollbar-thumb-background-hover);
65
- }
66
-
67
- &::-webkit-scrollbar-button,
68
- &::-webkit-scrollbar-track-piece,
69
- &::-webkit-scrollbar-corner,
70
- &::-webkit-resizer {
71
- display: none;
41
+ }
42
+
43
+ &::-webkit-scrollbar {
44
+ width: var(--scroll-scrollbar-size);
45
+ height: var(--scroll-scrollbar-size);
46
+ }
47
+
48
+ &::-webkit-scrollbar-track {
49
+ background-color: none;
50
+ border-radius: var(--scroll-scrollbar-size);
51
+ }
52
+
53
+ &::-webkit-scrollbar-thumb {
54
+ border-radius: var(--scroll-scrollbar-size);
55
+ background-color: var(--scroll-scrollbar-thumb-background);
56
+ will-change: background-color;
57
+ transition: background .2s ease-out;
58
+ cursor: pointer;
59
+ }
60
+
61
+ &::-webkit-scrollbar-thumb:hover {
62
+ background-color: var(--scroll-scrollbar-thumb-background-hover);
63
+ }
64
+
65
+ &::-webkit-scrollbar-button,
66
+ &::-webkit-scrollbar-track-piece,
67
+ &::-webkit-scrollbar-corner,
68
+ &::-webkit-resizer {
69
+ display: none;
70
+ }
71
+ }
72
+
73
+ .dropdown {
74
+ position: relative;
75
+
76
+ &.dropdown_right > [x-dropdown] {
77
+ right: 0;
78
+ left: auto;
79
+ }
80
+ &.dropdown_bottom > [x-dropdown] {
81
+ bottom: 100%;
82
+ top: auto;
83
+ transform-origin: bottom;
84
+ }
85
+ &.dropdown_ready > [x-dropdown] {
86
+ display: block;
87
+ pointer-events: auto;
88
+ }
89
+ &.dropdown_open > [x-dropdown] {
90
+ opacity: 1;
91
+ transform: scale(1);
92
+ }
93
+ &.dropdown_wrap > [x-dropdown] li {
94
+ & > a,
95
+ & > span {
96
+ white-space: wrap;
72
97
  }
73
98
  }
99
+ }
100
+
101
+
102
+ [x-dropdown] {
74
103
 
75
- .dropdown {
76
- position: relative;
104
+ & li {
77
105
 
78
- &.dropdown_right > [x-dropdown] {
79
- right: 0;
80
- left: auto;
81
- }
82
- &.dropdown_bottom > [x-dropdown] {
83
- bottom: 100%;
84
- top: auto;
85
- transform-origin: bottom;
106
+ &.divider {
107
+ height: 0;
108
+ padding: 0;
109
+ margin: var(--dropdown-padding) calc(-1 * var(--dropdown-padding));
110
+ border-bottom: 1px solid var(--dropdown-divider-color);
86
111
  }
87
- &.dropdown_ready > [x-dropdown] {
112
+
113
+ & > a,
114
+ & > span {
88
115
  display: block;
89
- pointer-events: auto;
90
- }
91
- &.dropdown_open > [x-dropdown] {
92
- opacity: 1;
93
- transform: scale(1);
116
+ padding: var(--dropdown-item-padding);
117
+ line-height: 1.4;
118
+ font-size: var(--dropdown-item-font-size);
119
+ color: var(--dropdown-item-font-color);
120
+ white-space: nowrap;
121
+ text-overflow: ellipsis;
122
+ text-decoration: none;
123
+ overflow: hidden;
124
+ border: none;
125
+ border-radius: calc(var(--dropdown-border-radius) / 2);
126
+ background: var(--dropdown-item-background-color);
94
127
  }
95
- &.dropdown_wrap > [x-dropdown] li {
96
- & > a,
97
- & > span {
98
- white-space: wrap;
99
- }
100
- }
101
- }
102
-
103
-
104
- [x-dropdown] {
105
128
 
106
- & li {
107
-
108
- &.divider {
109
- height: 0;
110
- padding: 0;
111
- margin: var(--dropdown-padding) calc(-1 * var(--dropdown-padding));
112
- border-bottom: 1px solid var(--dropdown-divider-color);
113
- }
129
+ & > a {
130
+ will-change: color, background, transform;
131
+ transition: all .1s ease-out;
132
+ transform: scale(1);
133
+ transform-origin: bottom center;
114
134
 
115
- & > a,
116
- & > span {
117
- display: block;
118
- padding: var(--dropdown-item-padding);
119
- line-height: 1.4;
120
- font-size: var(--dropdown-item-font-size);
121
- color: var(--dropdown-item-font-color);
122
- white-space: nowrap;
123
- text-overflow: ellipsis;
124
- text-decoration: none;
125
- overflow: hidden;
126
- border: none;
127
- border-radius: calc(var(--dropdown-border-radius) / 2);
128
- background: var(--dropdown-item-background-color);
135
+ &:focus-visible,
136
+ &.focus-visible,
137
+ &:hover,
138
+ &.hover,
139
+ &:active,
140
+ &.active {
141
+ color: var(--dropdown-item-font-color-hover);
142
+ background: var(--dropdown-item-background-color-hover);
129
143
  }
130
144
 
131
- & > a {
132
- will-change: color, background, transform;
133
- transition: all .1s ease-out;
134
- transform: scale(1);
135
- transform-origin: bottom center;
136
-
137
- &:focus-visible,
138
- &.focus-visible,
139
- &:hover,
140
- &.hover,
141
- &:active,
142
- &.active {
143
- color: var(--dropdown-item-font-color-hover);
144
- background: var(--dropdown-item-background-color-hover);
145
- }
146
-
147
- &:active {
148
- transform: scale(.99);
149
- }
145
+ &:active {
146
+ transform: scale(.99);
150
147
  }
151
148
  }
152
149
  }
153
-
154
150
  }
package/src/components/x/flex.css CHANGED
@@ -29,173 +29,169 @@ All right reserved.
29
29
 
30
30
  .flex > .c[1-12]/[1-12] (s,m,l,xl) - column width "column/columns"
31
31
  */
32
+
33
+ .flex { display: flex }
32
34
 
33
- @layer flex {
34
-
35
- .flex { display: flex }
35
+ [class*=flex] {
36
+ /* Columns */
37
+ @for $cols from 1 to 12 {
38
+ @for $col from 1 to $cols {
39
+ & > .c$(col)\/$(cols) {
40
+ flex-basis: calc($(col) / $(cols) * 100%);
41
+ max-width: calc($(col) / $(cols) * 100%);
42
+ }
43
+ }
44
+ }
36
45
 
37
- [class*=flex] {
38
- /* Columns */
46
+ @media (min-width: 640px) {
39
47
  @for $cols from 1 to 12 {
40
48
  @for $col from 1 to $cols {
41
- & > .c$(col)\/$(cols) {
49
+ & > .s\:c$(col)\/$(cols) {
42
50
  flex-basis: calc($(col) / $(cols) * 100%);
43
51
  max-width: calc($(col) / $(cols) * 100%);
44
52
  }
45
53
  }
46
54
  }
47
-
48
- @media (min-width: 640px) {
49
- @for $cols from 1 to 12 {
50
- @for $col from 1 to $cols {
51
- & > .s\:c$(col)\/$(cols) {
52
- flex-basis: calc($(col) / $(cols) * 100%);
53
- max-width: calc($(col) / $(cols) * 100%);
54
- }
55
- }
56
- }
57
- }
58
-
59
- @media (min-width: 768px) {
60
- @for $cols from 1 to 12 {
61
- @for $col from 1 to $cols {
62
- & > .m\:c$(col)\/$(cols) {
63
- flex-basis: calc($(col) / $(cols) * 100%);
64
- max-width: calc($(col) / $(cols) * 100%);
65
- }
55
+ }
56
+
57
+ @media (min-width: 768px) {
58
+ @for $cols from 1 to 12 {
59
+ @for $col from 1 to $cols {
60
+ & > .m\:c$(col)\/$(cols) {
61
+ flex-basis: calc($(col) / $(cols) * 100%);
62
+ max-width: calc($(col) / $(cols) * 100%);
66
63
  }
67
64
  }
68
65
  }
69
-
70
- @media (min-width: 1024px) {
71
- @for $cols from 1 to 12 {
72
- @for $col from 1 to $cols {
73
- & > .l\:c$(col)\/$(cols) {
74
- flex-basis: calc($(col) / $(cols) * 100%);
75
- max-width: calc($(col) / $(cols) * 100%);
76
- }
66
+ }
67
+
68
+ @media (min-width: 1024px) {
69
+ @for $cols from 1 to 12 {
70
+ @for $col from 1 to $cols {
71
+ & > .l\:c$(col)\/$(cols) {
72
+ flex-basis: calc($(col) / $(cols) * 100%);
73
+ max-width: calc($(col) / $(cols) * 100%);
77
74
  }
78
75
  }
79
76
  }
80
-
81
- @media (min-width: 1280px) {
82
- @for $cols from 1 to 12 {
83
- @for $col from 1 to $cols {
84
- & > .xl\:c$(col)\/$(cols) {
85
- flex-basis: calc($(col) / $(cols) * 100%);
86
- max-width: calc($(col) / $(cols) * 100%);
87
- }
77
+ }
78
+
79
+ @media (min-width: 1280px) {
80
+ @for $cols from 1 to 12 {
81
+ @for $col from 1 to $cols {
82
+ & > .xl\:c$(col)\/$(cols) {
83
+ flex-basis: calc($(col) / $(cols) * 100%);
84
+ max-width: calc($(col) / $(cols) * 100%);
88
85
  }
89
86
  }
90
87
  }
91
88
  }
89
+ }
90
+
91
+ .fr { flex-direction: row }
92
+ .fc { flex-direction: column }
93
+ .fw { flex-wrap: wrap }
94
+ .fnw { flex-wrap: nowrap }
95
+
96
+ .ais { align-items: stretch }
97
+ .aifs { align-items: flex-start }
98
+ .aic { align-items: center }
99
+ .aife { align-items: flex-end }
100
+
101
+ .jcfs { justify-content: flex-start }
102
+ .jcc { justify-content: center }
103
+ .jcfe { justify-content: flex-end }
104
+ .jcsb { justify-content: space-between }
105
+ .jcsa { justify-content: space-around }
106
+ .jcse { justify-content: space-evenly }
107
+
108
+ .no-shrink { flex-shrink: 0 }
109
+ .no-grow { flex-grow: 0 }
110
+
111
+ @media (min-width: 640px) {
112
+ .s\:fr { flex-direction: row }
113
+ .s\:fc { flex-direction: column }
114
+ .s\:fw { flex-wrap: wrap }
115
+ .s\:fnw { flex-wrap: nowrap }
92
116
 
93
- .fr { flex-direction: row }
94
- .fc { flex-direction: column }
95
- .fw { flex-wrap: wrap }
96
- .fnw { flex-wrap: nowrap }
117
+ .s\:ais { align-items: stretch }
118
+ .s\:aifs { align-items: flex-start }
119
+ .s\:aic { align-items: center }
120
+ .s\:aife { align-items: flex-end }
97
121
 
98
- .ais { align-items: stretch }
99
- .aifs { align-items: flex-start }
100
- .aic { align-items: center }
101
- .aife { align-items: flex-end }
122
+ .s\:jcfs { justify-content: flex-start }
123
+ .s\:jcc { justify-content: center }
124
+ .s\:jcfe { justify-content: flex-end }
125
+ .s\:jcsb { justify-content: space-between }
126
+ .s\:jcsa { justify-content: space-around }
127
+ .s\:jcse { justify-content: space-evenly }
102
128
 
103
- .jcfs { justify-content: flex-start }
104
- .jcc { justify-content: center }
105
- .jcfe { justify-content: flex-end }
106
- .jcsb { justify-content: space-between }
107
- .jcsa { justify-content: space-around }
108
- .jcse { justify-content: space-evenly }
129
+ .s\:no-shrink { flex-shrink: 0 }
130
+ .s\:no-grow { flex-grow: 0 }
131
+ }
132
+
133
+ @media (min-width: 768px) {
134
+ .m\:fr { flex-direction: row }
135
+ .m\:fc { flex-direction: column }
136
+ .m\:fw { flex-wrap: wrap }
137
+ .m\:fnw { flex-wrap: nowrap }
109
138
 
110
- .no-shrink { flex-shrink: 0 }
111
- .no-grow { flex-grow: 0 }
139
+ .m\:ais { align-items: stretch }
140
+ .m\:aifs { align-items: flex-start }
141
+ .m\:aic { align-items: center }
142
+ .m\:aife { align-items: flex-end }
112
143
 
113
- @media (min-width: 640px) {
114
- .s\:fr { flex-direction: row }
115
- .s\:fc { flex-direction: column }
116
- .s\:fw { flex-wrap: wrap }
117
- .s\:fnw { flex-wrap: nowrap }
118
-
119
- .s\:ais { align-items: stretch }
120
- .s\:aifs { align-items: flex-start }
121
- .s\:aic { align-items: center }
122
- .s\:aife { align-items: flex-end }
123
-
124
- .s\:jcfs { justify-content: flex-start }
125
- .s\:jcc { justify-content: center }
126
- .s\:jcfe { justify-content: flex-end }
127
- .s\:jcsb { justify-content: space-between }
128
- .s\:jcsa { justify-content: space-around }
129
- .s\:jcse { justify-content: space-evenly }
130
-
131
- .s\:no-shrink { flex-shrink: 0 }
132
- .s\:no-grow { flex-grow: 0 }
133
- }
144
+ .m\:jcfs { justify-content: flex-start }
145
+ .m\:jcc { justify-content: center }
146
+ .m\:jcfe { justify-content: flex-end }
147
+ .m\:jcsb { justify-content: space-between }
148
+ .m\:jcsa { justify-content: space-around }
149
+ .m\:jcse { justify-content: space-evenly }
134
150
 
135
- @media (min-width: 768px) {
136
- .m\:fr { flex-direction: row }
137
- .m\:fc { flex-direction: column }
138
- .m\:fw { flex-wrap: wrap }
139
- .m\:fnw { flex-wrap: nowrap }
140
-
141
- .m\:ais { align-items: stretch }
142
- .m\:aifs { align-items: flex-start }
143
- .m\:aic { align-items: center }
144
- .m\:aife { align-items: flex-end }
145
-
146
- .m\:jcfs { justify-content: flex-start }
147
- .m\:jcc { justify-content: center }
148
- .m\:jcfe { justify-content: flex-end }
149
- .m\:jcsb { justify-content: space-between }
150
- .m\:jcsa { justify-content: space-around }
151
- .m\:jcse { justify-content: space-evenly }
152
-
153
- .m\:no-shrink { flex-shrink: 0 }
154
- .m\:no-grow { flex-grow: 0 }
155
- }
151
+ .m\:no-shrink { flex-shrink: 0 }
152
+ .m\:no-grow { flex-grow: 0 }
153
+ }
154
+
155
+ @media (min-width: 1024px) {
156
+ .l\:fr { flex-direction: row }
157
+ .l\:fc { flex-direction: column }
158
+ .l\:fw { flex-wrap: wrap }
159
+ .l\:fnw { flex-wrap: nowrap }
156
160
 
157
- @media (min-width: 1024px) {
158
- .l\:fr { flex-direction: row }
159
- .l\:fc { flex-direction: column }
160
- .l\:fw { flex-wrap: wrap }
161
- .l\:fnw { flex-wrap: nowrap }
162
-
163
- .l\:ais { align-items: stretch }
164
- .l\:aifs { align-items: flex-start }
165
- .l\:aic { align-items: center }
166
- .l\:aife { align-items: flex-end }
167
-
168
- .l\:jcfs { justify-content: flex-start }
169
- .l\:jcc { justify-content: center }
170
- .l\:jcfe { justify-content: flex-end }
171
- .l\:jcsb { justify-content: space-between }
172
- .l\:jcsa { justify-content: space-around }
173
- .l\:jcse { justify-content: space-evenly }
174
-
175
- .l\:no-shrink { flex-shrink: 0 }
176
- .l\:no-grow { flex-grow: 0 }
177
- }
161
+ .l\:ais { align-items: stretch }
162
+ .l\:aifs { align-items: flex-start }
163
+ .l\:aic { align-items: center }
164
+ .l\:aife { align-items: flex-end }
178
165
 
179
- @media (min-width: 1280px) {
180
- .xl\:fr { flex-direction: row }
181
- .xl\:fc { flex-direction: column }
182
- .xl\:fw { flex-wrap: wrap }
183
- .xl\:fnw { flex-wrap: nowrap }
184
-
185
- .xl\:ais { align-items: stretch }
186
- .xl\:aifs { align-items: flex-start }
187
- .xl\:aic { align-items: center }
188
- .xl\:aife { align-items: flex-end }
189
-
190
- .xl\:jcfs { justify-content: flex-start }
191
- .xl\:jcc { justify-content: center }
192
- .xl\:jcfe { justify-content: flex-end }
193
- .xl\:jcsb { justify-content: space-between }
194
- .xl\:jcsa { justify-content: space-around }
195
- .xl\:jcse { justify-content: space-evenly }
196
-
197
- .xl\:no-shrink { flex-shrink: 0 }
198
- .xl\:no-grow { flex-grow: 0 }
199
- }
166
+ .l\:jcfs { justify-content: flex-start }
167
+ .l\:jcc { justify-content: center }
168
+ .l\:jcfe { justify-content: flex-end }
169
+ .l\:jcsb { justify-content: space-between }
170
+ .l\:jcsa { justify-content: space-around }
171
+ .l\:jcse { justify-content: space-evenly }
172
+
173
+ .l\:no-shrink { flex-shrink: 0 }
174
+ .l\:no-grow { flex-grow: 0 }
175
+ }
200
176
 
177
+ @media (min-width: 1280px) {
178
+ .xl\:fr { flex-direction: row }
179
+ .xl\:fc { flex-direction: column }
180
+ .xl\:fw { flex-wrap: wrap }
181
+ .xl\:fnw { flex-wrap: nowrap }
182
+
183
+ .xl\:ais { align-items: stretch }
184
+ .xl\:aifs { align-items: flex-start }
185
+ .xl\:aic { align-items: center }
186
+ .xl\:aife { align-items: flex-end }
187
+
188
+ .xl\:jcfs { justify-content: flex-start }
189
+ .xl\:jcc { justify-content: center }
190
+ .xl\:jcfe { justify-content: flex-end }
191
+ .xl\:jcsb { justify-content: space-between }
192
+ .xl\:jcsa { justify-content: space-around }
193
+ .xl\:jcse { justify-content: space-evenly }
194
+
195
+ .xl\:no-shrink { flex-shrink: 0 }
196
+ .xl\:no-grow { flex-grow: 0 }
201
197
  }
package/src/components/x/flow.css CHANGED
@@ -12,51 +12,47 @@ All right reserved.
12
12
  .flow.s[0-10] (s,m,l,xl) - vertical space
13
13
  */
14
14
 
15
- @layer flow {
15
+ .flow {
16
16
 
17
- .flow {
18
-
19
- & > * { margin: 0 }
20
-
17
+ & > * { margin: 0 }
18
+
19
+ @for $i from 0 to 10 {
20
+ &.s$(i) > * {
21
+ margin-bottom: var(--space-$(i));
22
+ }
23
+ }
24
+
25
+ @media (min-width: 640px) {
21
26
  @for $i from 0 to 10 {
22
- &.s$(i) > * {
27
+ &.s\:s$(i) > * {
23
28
  margin-bottom: var(--space-$(i));
24
29
  }
25
30
  }
26
-
27
- @media (min-width: 640px) {
28
- @for $i from 0 to 10 {
29
- &.s\:s$(i) > * {
30
- margin-bottom: var(--space-$(i));
31
- }
32
- }
33
- }
34
-
35
- @media (min-width: 768px) {
36
- @for $i from 0 to 10 {
37
- &.m\:s$(i) > * {
38
- margin-bottom: var(--space-$(i));
39
- }
31
+ }
32
+
33
+ @media (min-width: 768px) {
34
+ @for $i from 0 to 10 {
35
+ &.m\:s$(i) > * {
36
+ margin-bottom: var(--space-$(i));
40
37
  }
41
38
  }
42
-
43
- @media (min-width: 1024px) {
44
- @for $i from 0 to 10 {
45
- &.l\:s$(i) > * {
46
- margin-bottom: var(--space-$(i));
47
- }
39
+ }
40
+
41
+ @media (min-width: 1024px) {
42
+ @for $i from 0 to 10 {
43
+ &.l\:s$(i) > * {
44
+ margin-bottom: var(--space-$(i));
48
45
  }
49
46
  }
50
-
51
- @media (min-width: 1280px) {
52
- @for $i from 0 to 10 {
53
- &.xl\:s$(i) > * {
54
- margin-bottom: var(--space-$(i));
55
- }
47
+ }
48
+
49
+ @media (min-width: 1280px) {
50
+ @for $i from 0 to 10 {
51
+ &.xl\:s$(i) > * {
52
+ margin-bottom: var(--space-$(i));
56
53
  }
57
54
  }
58
-
59
- & > *:last-child { margin-bottom: 0 }
60
55
  }
61
-
56
+
57
+ & > *:last-child { margin-bottom: 0 }
62
58
  }