breakouts 0.8.0 → 0.8.2
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.
- package/CHANGELOG.md +7 -0
- package/README.md +318 -129
- package/_index.scss +3 -0
- package/dist/breakouts.css +264 -241
- package/dist/breakouts.css.map +1 -1
- package/dist/breakouts.min.css +1 -1
- package/dist/breakouts.min.css.map +1 -1
- package/package.json +18 -6
- package/src/_index.scss +4 -13
- package/src/base/_color-tokens.scss +17 -22
- package/src/base/_color-utilities.scss +13 -101
- package/src/base/_layout.scss +60 -31
- package/src/base/_typography-base.scss +6 -0
- package/src/base/_variables.scss +20 -17
- package/src/base.scss +4 -2
- package/src/theme/_chupa-pop.scss +4 -13
- package/src/theme/_medical.scss +6 -21
- package/src/theme/_tootsie-pop.scss +8 -16
package/dist/breakouts.css
CHANGED
|
@@ -28,12 +28,12 @@ html.dark,
|
|
|
28
28
|
--color-surface: #1a1a1a;
|
|
29
29
|
--color-text: #eeeeee;
|
|
30
30
|
--color-muted: #aaaaaa;
|
|
31
|
-
--color-primary:
|
|
32
|
-
--color-secondary: #
|
|
33
|
-
--color-accent:
|
|
34
|
-
--color-success:
|
|
35
|
-
--color-error:
|
|
36
|
-
--color-warning: #
|
|
31
|
+
--color-primary: rgb(127.5, 170, 255);
|
|
32
|
+
--color-secondary: #5588ff;
|
|
33
|
+
--color-accent: rgb(255, 159.5, 192);
|
|
34
|
+
--color-success: rgb(132.7753623188, 225.7246376812, 154);
|
|
35
|
+
--color-error: rgb(237.5, 154, 162);
|
|
36
|
+
--color-warning: #ffe083;
|
|
37
37
|
color-scheme: dark;
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -41,15 +41,15 @@ html.light,
|
|
|
41
41
|
:root.light,
|
|
42
42
|
.light {
|
|
43
43
|
--color-background: #ffffff;
|
|
44
|
-
--color-surface: #
|
|
45
|
-
--color-text: #
|
|
46
|
-
--color-muted: #
|
|
47
|
-
--color-primary: #
|
|
48
|
-
--color-secondary: #
|
|
49
|
-
--color-accent: #
|
|
50
|
-
--color-success: #
|
|
51
|
-
--color-error: #
|
|
52
|
-
--color-warning: #
|
|
44
|
+
--color-surface: #f0f0f0;
|
|
45
|
+
--color-text: #111111;
|
|
46
|
+
--color-muted: #666666;
|
|
47
|
+
--color-primary: #0055ff;
|
|
48
|
+
--color-secondary: #0033aa;
|
|
49
|
+
--color-accent: #ff4081;
|
|
50
|
+
--color-success: #28a745;
|
|
51
|
+
--color-error: #dc3545;
|
|
52
|
+
--color-warning: #ffc107;
|
|
53
53
|
color-scheme: light;
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -59,15 +59,250 @@ html.light,
|
|
|
59
59
|
--color-surface: #1a1a1a;
|
|
60
60
|
--color-text: #eeeeee;
|
|
61
61
|
--color-muted: #aaaaaa;
|
|
62
|
-
--color-primary:
|
|
63
|
-
--color-secondary: #
|
|
64
|
-
--color-accent:
|
|
65
|
-
--color-success:
|
|
66
|
-
--color-error:
|
|
67
|
-
--color-warning: #
|
|
62
|
+
--color-primary: rgb(127.5, 170, 255);
|
|
63
|
+
--color-secondary: #5588ff;
|
|
64
|
+
--color-accent: rgb(255, 159.5, 192);
|
|
65
|
+
--color-success: rgb(132.7753623188, 225.7246376812, 154);
|
|
66
|
+
--color-error: rgb(237.5, 154, 162);
|
|
67
|
+
--color-warning: #ffe083;
|
|
68
68
|
color-scheme: dark;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
+
*,
|
|
72
|
+
*::before,
|
|
73
|
+
*::after {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
margin: 0;
|
|
76
|
+
padding: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
html,
|
|
80
|
+
body {
|
|
81
|
+
margin: 0;
|
|
82
|
+
padding: 0;
|
|
83
|
+
width: 100%;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
body {
|
|
87
|
+
font-family: system-ui, sans-serif;
|
|
88
|
+
font-size: 1rem;
|
|
89
|
+
line-height: 1.6;
|
|
90
|
+
color: var(--color-text);
|
|
91
|
+
background-color: var(--color-background);
|
|
92
|
+
margin: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
h1 {
|
|
96
|
+
font-size: 2.25rem;
|
|
97
|
+
line-height: 1.2;
|
|
98
|
+
margin: 2rem 0 1rem;
|
|
99
|
+
font-weight: 600;
|
|
100
|
+
color: var(--color-text);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
h2 {
|
|
104
|
+
font-size: 1.75rem;
|
|
105
|
+
line-height: 1.2;
|
|
106
|
+
margin: 2rem 0 1rem;
|
|
107
|
+
font-weight: 600;
|
|
108
|
+
color: var(--color-text);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
h3 {
|
|
112
|
+
font-size: 1.5rem;
|
|
113
|
+
line-height: 1.2;
|
|
114
|
+
margin: 2rem 0 1rem;
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
color: var(--color-text);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
h4 {
|
|
120
|
+
font-size: 1.25rem;
|
|
121
|
+
line-height: 1.2;
|
|
122
|
+
margin: 2rem 0 1rem;
|
|
123
|
+
font-weight: 600;
|
|
124
|
+
color: var(--color-text);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
h5 {
|
|
128
|
+
font-size: 1.125rem;
|
|
129
|
+
line-height: 1.2;
|
|
130
|
+
margin: 2rem 0 1rem;
|
|
131
|
+
font-weight: 600;
|
|
132
|
+
color: var(--color-text);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
h6 {
|
|
136
|
+
font-size: 1rem;
|
|
137
|
+
line-height: 1.2;
|
|
138
|
+
margin: 2rem 0 1rem;
|
|
139
|
+
font-weight: 600;
|
|
140
|
+
color: var(--color-text);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
p {
|
|
144
|
+
margin: 1rem 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
a {
|
|
148
|
+
color: var(--color-primary);
|
|
149
|
+
text-decoration: underline;
|
|
150
|
+
}
|
|
151
|
+
a:hover {
|
|
152
|
+
color: var(--color-secondary);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
:where(.breakouts, .breakouts-grid) > :is(h1, h2, h3, h4, h5, h6, p) {
|
|
156
|
+
margin-block: 0;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
:root {
|
|
160
|
+
--gap: clamp(1rem, 6vw, 3rem);
|
|
161
|
+
--full: minmax(var(--gap), 1fr);
|
|
162
|
+
--feature: minmax(0, 5rem);
|
|
163
|
+
--popout: minmax(0, 2rem);
|
|
164
|
+
--content: min(50ch, 100% - var(--gap) * 2);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.container {
|
|
168
|
+
margin-inline: auto;
|
|
169
|
+
max-width: 72rem;
|
|
170
|
+
padding-inline: 1rem;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.full-bleed,
|
|
174
|
+
.breakout {
|
|
175
|
+
width: 100vw;
|
|
176
|
+
margin-left: calc(50% - 50vw);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.full-bleed--left,
|
|
180
|
+
.breakout--left {
|
|
181
|
+
width: calc(50% + 50vw);
|
|
182
|
+
margin-left: calc(50% - 50vw);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.full-bleed--right,
|
|
186
|
+
.breakout--right {
|
|
187
|
+
width: calc(50% + 50vw);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.breakouts,
|
|
191
|
+
.breakouts-grid {
|
|
192
|
+
display: grid;
|
|
193
|
+
grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
|
|
194
|
+
row-gap: var(--gap);
|
|
195
|
+
column-gap: 0;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.breakouts > *,
|
|
199
|
+
.breakouts-grid > * {
|
|
200
|
+
grid-column: content;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.content {
|
|
204
|
+
grid-column: content;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.popout {
|
|
208
|
+
grid-column: popout;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.popout-start,
|
|
212
|
+
.popout-left {
|
|
213
|
+
grid-column: popout-start/content-end;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.popout-end,
|
|
217
|
+
.popout-right {
|
|
218
|
+
grid-column: content-start/popout-end;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.feature {
|
|
222
|
+
grid-column: feature;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.feature-start,
|
|
226
|
+
.feature-left {
|
|
227
|
+
grid-column: feature-start/content-end;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.feature-end,
|
|
231
|
+
.feature-right {
|
|
232
|
+
grid-column: content-start/feature-end;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.full {
|
|
236
|
+
grid-column: full;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.full-start,
|
|
240
|
+
.full-left {
|
|
241
|
+
grid-column: full-start/content-end;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.full-end,
|
|
245
|
+
.full-right {
|
|
246
|
+
grid-column: content-start/full-end;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(*) {
|
|
250
|
+
grid-template-columns: subgrid [popout-start feature-start full-start] [popout-end feature-end full-end];
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.content) {
|
|
254
|
+
grid-template-columns: subgrid [popout-start feature-start full-start] [popout-end feature-end full-end];
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.popout) {
|
|
258
|
+
grid-template-columns: subgrid [feature-start full-start] [] [] [feature-end full-end];
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.popout-start, .popout-left) {
|
|
262
|
+
grid-template-columns: subgrid [feature-start full-start] [] [popout-end feature-end full-end];
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.popout-end, .popout-right) {
|
|
266
|
+
grid-template-columns: subgrid [popout-start feature-start full-start] [] [feature-end full-end];
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.feature) {
|
|
270
|
+
grid-template-columns: subgrid [full-start] [] [] [] [] [full-end];
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.feature-start, .feature-left) {
|
|
274
|
+
grid-template-columns: subgrid [full-start] [] [] [popout-end feature-end full-end];
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.feature-end, .feature-right) {
|
|
278
|
+
grid-template-columns: subgrid [popout-start feature-start full-start] [] [] [full-end];
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.full) {
|
|
282
|
+
grid-template-columns: subgrid [] [] [] [] [] [] [] [];
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.full-start, .full-left) {
|
|
286
|
+
grid-template-columns: subgrid [] [] [] [] [popout-end feature-end full-end];
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
:is(.breakouts, .breakouts-grid) > :is(.breakouts, .breakouts-grid):is(.full-end, .full-right) {
|
|
290
|
+
grid-template-columns: subgrid [popout-start feature-start full-start] [] [] [] [];
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.grid {
|
|
294
|
+
display: grid;
|
|
295
|
+
grid-template-columns: 1fr minmax(0, var(--container-max-width, 64rem)) 1fr;
|
|
296
|
+
gap: var(--gap);
|
|
297
|
+
}
|
|
298
|
+
.grid > * {
|
|
299
|
+
grid-column: 2;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.grid--full > * {
|
|
303
|
+
grid-column: 1/-1;
|
|
304
|
+
}
|
|
305
|
+
|
|
71
306
|
.bg-background {
|
|
72
307
|
background-color: var(--color-background);
|
|
73
308
|
}
|
|
@@ -104,28 +339,28 @@ html.light,
|
|
|
104
339
|
background-color: var(--color-warning);
|
|
105
340
|
}
|
|
106
341
|
|
|
342
|
+
.text-color {
|
|
343
|
+
color: var(--color-text);
|
|
344
|
+
}
|
|
345
|
+
|
|
107
346
|
.text-background {
|
|
108
347
|
color: var(--color-background);
|
|
109
348
|
}
|
|
110
349
|
|
|
111
|
-
.text-
|
|
112
|
-
color: var(--color-
|
|
350
|
+
.text-surface {
|
|
351
|
+
color: var(--color-surface);
|
|
113
352
|
}
|
|
114
353
|
|
|
115
354
|
.text-primary {
|
|
116
355
|
color: var(--color-primary);
|
|
117
356
|
}
|
|
118
357
|
|
|
119
|
-
.text-accent {
|
|
120
|
-
color: var(--color-accent);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
358
|
.text-secondary {
|
|
124
359
|
color: var(--color-secondary);
|
|
125
360
|
}
|
|
126
361
|
|
|
127
|
-
.text-
|
|
128
|
-
color: var(--color-
|
|
362
|
+
.text-accent {
|
|
363
|
+
color: var(--color-accent);
|
|
129
364
|
}
|
|
130
365
|
|
|
131
366
|
.text-muted {
|
|
@@ -180,21 +415,6 @@ html.light,
|
|
|
180
415
|
color: var(--color-neutral-900);
|
|
181
416
|
}
|
|
182
417
|
|
|
183
|
-
*,
|
|
184
|
-
*::before,
|
|
185
|
-
*::after {
|
|
186
|
-
box-sizing: border-box;
|
|
187
|
-
margin: 0;
|
|
188
|
-
padding: 0;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
html,
|
|
192
|
-
body {
|
|
193
|
-
margin: 0;
|
|
194
|
-
padding: 0;
|
|
195
|
-
width: 100%;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
418
|
.m-0 {
|
|
199
419
|
margin: 0;
|
|
200
420
|
}
|
|
@@ -685,75 +905,6 @@ body {
|
|
|
685
905
|
z-index: 1000;
|
|
686
906
|
}
|
|
687
907
|
|
|
688
|
-
body {
|
|
689
|
-
font-family: system-ui, sans-serif;
|
|
690
|
-
font-size: 1rem;
|
|
691
|
-
line-height: 1.6;
|
|
692
|
-
color: var(--color-text);
|
|
693
|
-
background-color: var(--color-background);
|
|
694
|
-
margin: 0;
|
|
695
|
-
}
|
|
696
|
-
|
|
697
|
-
h1 {
|
|
698
|
-
font-size: 2.25rem;
|
|
699
|
-
line-height: 1.2;
|
|
700
|
-
margin: 2rem 0 1rem;
|
|
701
|
-
font-weight: 600;
|
|
702
|
-
color: var(--color-text);
|
|
703
|
-
}
|
|
704
|
-
|
|
705
|
-
h2 {
|
|
706
|
-
font-size: 1.75rem;
|
|
707
|
-
line-height: 1.2;
|
|
708
|
-
margin: 2rem 0 1rem;
|
|
709
|
-
font-weight: 600;
|
|
710
|
-
color: var(--color-text);
|
|
711
|
-
}
|
|
712
|
-
|
|
713
|
-
h3 {
|
|
714
|
-
font-size: 1.5rem;
|
|
715
|
-
line-height: 1.2;
|
|
716
|
-
margin: 2rem 0 1rem;
|
|
717
|
-
font-weight: 600;
|
|
718
|
-
color: var(--color-text);
|
|
719
|
-
}
|
|
720
|
-
|
|
721
|
-
h4 {
|
|
722
|
-
font-size: 1.25rem;
|
|
723
|
-
line-height: 1.2;
|
|
724
|
-
margin: 2rem 0 1rem;
|
|
725
|
-
font-weight: 600;
|
|
726
|
-
color: var(--color-text);
|
|
727
|
-
}
|
|
728
|
-
|
|
729
|
-
h5 {
|
|
730
|
-
font-size: 1.125rem;
|
|
731
|
-
line-height: 1.2;
|
|
732
|
-
margin: 2rem 0 1rem;
|
|
733
|
-
font-weight: 600;
|
|
734
|
-
color: var(--color-text);
|
|
735
|
-
}
|
|
736
|
-
|
|
737
|
-
h6 {
|
|
738
|
-
font-size: 1rem;
|
|
739
|
-
line-height: 1.2;
|
|
740
|
-
margin: 2rem 0 1rem;
|
|
741
|
-
font-weight: 600;
|
|
742
|
-
color: var(--color-text);
|
|
743
|
-
}
|
|
744
|
-
|
|
745
|
-
p {
|
|
746
|
-
margin: 1rem 0;
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
a {
|
|
750
|
-
color: var(--color-primary);
|
|
751
|
-
text-decoration: underline;
|
|
752
|
-
}
|
|
753
|
-
a:hover {
|
|
754
|
-
color: var(--color-secondary);
|
|
755
|
-
}
|
|
756
|
-
|
|
757
908
|
.text-left {
|
|
758
909
|
text-align: left;
|
|
759
910
|
}
|
|
@@ -810,132 +961,4 @@ a:hover {
|
|
|
810
961
|
line-height: 2;
|
|
811
962
|
}
|
|
812
963
|
|
|
813
|
-
:root {
|
|
814
|
-
--gap: clamp(1rem, 6vw, 3rem);
|
|
815
|
-
--full: minmax(var(--gap), 1fr);
|
|
816
|
-
--feature: minmax(0, 5rem);
|
|
817
|
-
--popout: minmax(0, 2rem);
|
|
818
|
-
--content: min(50ch, 100% - var(--gap) * 2);
|
|
819
|
-
}
|
|
820
|
-
|
|
821
|
-
.container {
|
|
822
|
-
margin-inline: auto;
|
|
823
|
-
max-width: 72rem;
|
|
824
|
-
padding-inline: 1rem;
|
|
825
|
-
}
|
|
826
|
-
|
|
827
|
-
.full-bleed {
|
|
828
|
-
width: 100vw;
|
|
829
|
-
margin-left: 50%;
|
|
830
|
-
transform: translateX(-50%);
|
|
831
|
-
}
|
|
832
|
-
|
|
833
|
-
.full-bleed--left {
|
|
834
|
-
width: 100vw;
|
|
835
|
-
margin-left: 0;
|
|
836
|
-
transform: translateX(0);
|
|
837
|
-
}
|
|
838
|
-
|
|
839
|
-
.full-bleed--right {
|
|
840
|
-
width: 100vw;
|
|
841
|
-
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
842
|
-
transform: translateX(calc(100% - 100vw));
|
|
843
|
-
}
|
|
844
|
-
|
|
845
|
-
.breakout {
|
|
846
|
-
width: 100vw;
|
|
847
|
-
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
848
|
-
}
|
|
849
|
-
|
|
850
|
-
.breakout--left {
|
|
851
|
-
width: 100vw;
|
|
852
|
-
margin-left: 0;
|
|
853
|
-
transform: translateX(0);
|
|
854
|
-
}
|
|
855
|
-
|
|
856
|
-
.breakout--right {
|
|
857
|
-
width: 100vw;
|
|
858
|
-
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
859
|
-
transform: translateX(calc(100% - 100vw));
|
|
860
|
-
}
|
|
861
|
-
|
|
862
|
-
.breakouts,
|
|
863
|
-
.breakouts-grid {
|
|
864
|
-
display: grid;
|
|
865
|
-
grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
|
|
866
|
-
row-gap: var(--gap);
|
|
867
|
-
column-gap: 0;
|
|
868
|
-
}
|
|
869
|
-
|
|
870
|
-
.breakouts > *,
|
|
871
|
-
.breakouts-grid > * {
|
|
872
|
-
grid-column: content;
|
|
873
|
-
}
|
|
874
|
-
|
|
875
|
-
.content {
|
|
876
|
-
grid-column: content;
|
|
877
|
-
}
|
|
878
|
-
|
|
879
|
-
.popout {
|
|
880
|
-
grid-column: popout;
|
|
881
|
-
}
|
|
882
|
-
|
|
883
|
-
.popout-start,
|
|
884
|
-
.popout-left {
|
|
885
|
-
grid-column: popout-start/content-end;
|
|
886
|
-
}
|
|
887
|
-
|
|
888
|
-
.popout-end,
|
|
889
|
-
.popout-right {
|
|
890
|
-
grid-column: content-start/popout-end;
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
.feature {
|
|
894
|
-
grid-column: feature;
|
|
895
|
-
}
|
|
896
|
-
|
|
897
|
-
.feature-start,
|
|
898
|
-
.feature-left {
|
|
899
|
-
grid-column: feature-start/content-end;
|
|
900
|
-
}
|
|
901
|
-
|
|
902
|
-
.feature-end,
|
|
903
|
-
.feature-right {
|
|
904
|
-
grid-column: content-start/feature-end;
|
|
905
|
-
}
|
|
906
|
-
|
|
907
|
-
.full {
|
|
908
|
-
grid-column: full;
|
|
909
|
-
}
|
|
910
|
-
|
|
911
|
-
.full-start,
|
|
912
|
-
.full-left {
|
|
913
|
-
grid-column: full-start/content-end;
|
|
914
|
-
}
|
|
915
|
-
|
|
916
|
-
.full-end,
|
|
917
|
-
.full-right {
|
|
918
|
-
grid-column: content-start/full-end;
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
.breakouts > .breakouts,
|
|
922
|
-
.breakouts > .breakouts-grid,
|
|
923
|
-
.breakouts-grid > .breakouts,
|
|
924
|
-
.breakouts-grid > .breakouts-grid {
|
|
925
|
-
grid-template-columns: inherit;
|
|
926
|
-
}
|
|
927
|
-
|
|
928
|
-
.grid {
|
|
929
|
-
display: grid;
|
|
930
|
-
grid-template-columns: 1fr minmax(0, var(--container-max-width, 64rem)) 1fr;
|
|
931
|
-
gap: var(--gap);
|
|
932
|
-
}
|
|
933
|
-
.grid > * {
|
|
934
|
-
grid-column: 2;
|
|
935
|
-
}
|
|
936
|
-
|
|
937
|
-
.grid--full > * {
|
|
938
|
-
grid-column: 1/-1;
|
|
939
|
-
}
|
|
940
|
-
|
|
941
964
|
/*# sourceMappingURL=breakouts.css.map */
|
package/dist/breakouts.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/_reset.scss","../src/base/_typography-base.scss","../src/base/_layout.scss","../src/base/_color-utilities.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography-utilities.scss"],"names":[],"mappings":"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","file":"breakouts.css"}
|
package/dist/breakouts.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;color-scheme:light}html.dark,:root.dark,.dark{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055;--color-success: #1e7e34;--color-error: #a71d2a;--color-warning: #c79100;color-scheme:dark}html.light,:root.light,.light{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab;--color-success: #71dd8a;--color-error: #ff6b6b;--color-warning: #ffdb4d;color-scheme:light}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055;--color-success: #1e7e34;--color-error: #a71d2a;--color-warning: #c79100;color-scheme:dark}}.bg-background{background-color:var(--color-background)}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.bg-muted{background-color:var(--color-muted)}.bg-success{background-color:var(--color-success)}.bg-error{background-color:var(--color-error)}.bg-warning{background-color:var(--color-warning)}.text-background{color:var(--color-background)}.text-color{color:var(--color-text)}.text-primary{color:var(--color-primary)}.text-accent{color:var(--color-accent)}.text-secondary{color:var(--color-secondary)}.text-surface{color:var(--color-surface)}.text-muted{color:var(--color-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.m-2{margin:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.m-3{margin:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.p-3{padding:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.p-4{padding:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.p-5{padding:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.p-6{padding:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.z-index-0{z-index:0}.z-index-1{z-index:1}.z-index-10{z-index:10}.z-index-100{z-index:100}.z-index-1000{z-index:1000}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-bold{font-weight:bold}.font-normal{font-weight:normal}.italic{font-style:italic}.not-italic{font-style:normal}.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-loose{line-height:2}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}.full-bleed--left{width:100vw;margin-left:0;transform:translateX(0)}.full-bleed--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/2)}.breakout--left{width:100vw;margin-left:0;transform:translateX(0)}.breakout--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakouts,.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];row-gap:var(--gap);column-gap:0}.breakouts>*,.breakouts-grid>*{grid-column:content}.content{grid-column:content}.popout{grid-column:popout}.popout-start,.popout-left{grid-column:popout-start/content-end}.popout-end,.popout-right{grid-column:content-start/popout-end}.feature{grid-column:feature}.feature-start,.feature-left{grid-column:feature-start/content-end}.feature-end,.feature-right{grid-column:content-start/feature-end}.full{grid-column:full}.full-start,.full-left{grid-column:full-start/content-end}.full-end,.full-right{grid-column:content-start/full-end}.breakouts>.breakouts,.breakouts>.breakouts-grid,.breakouts-grid>.breakouts,.breakouts-grid>.breakouts-grid{grid-template-columns:inherit}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}/*# sourceMappingURL=breakouts.min.css.map */
|
|
1
|
+
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;color-scheme:light}html.dark,:root.dark,.dark{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: rgb(127.5, 170, 255);--color-secondary: #5588ff;--color-accent: rgb(255, 159.5, 192);--color-success: rgb(132.7753623188, 225.7246376812, 154);--color-error: rgb(237.5, 154, 162);--color-warning: #ffe083;color-scheme:dark}html.light,:root.light,.light{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;color-scheme:light}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: rgb(127.5, 170, 255);--color-secondary: #5588ff;--color-accent: rgb(255, 159.5, 192);--color-success: rgb(132.7753623188, 225.7246376812, 154);--color-error: rgb(237.5, 154, 162);--color-warning: #ffe083;color-scheme:dark}}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}:where(.breakouts,.breakouts-grid)>:is(h1,h2,h3,h4,h5,h6,p){margin-block:0}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed,.breakout{width:100vw;margin-left:calc(50% - 50vw)}.full-bleed--left,.breakout--left{width:calc(50% + 50vw);margin-left:calc(50% - 50vw)}.full-bleed--right,.breakout--right{width:calc(50% + 50vw)}.breakouts,.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];row-gap:var(--gap);column-gap:0}.breakouts>*,.breakouts-grid>*{grid-column:content}.content{grid-column:content}.popout{grid-column:popout}.popout-start,.popout-left{grid-column:popout-start/content-end}.popout-end,.popout-right{grid-column:content-start/popout-end}.feature{grid-column:feature}.feature-start,.feature-left{grid-column:feature-start/content-end}.feature-end,.feature-right{grid-column:content-start/feature-end}.full{grid-column:full}.full-start,.full-left{grid-column:full-start/content-end}.full-end,.full-right{grid-column:content-start/full-end}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(*){grid-template-columns:subgrid [popout-start feature-start full-start] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.content){grid-template-columns:subgrid [popout-start feature-start full-start] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.popout){grid-template-columns:subgrid [feature-start full-start] [] [] [feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.popout-start,.popout-left){grid-template-columns:subgrid [feature-start full-start] [] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.popout-end,.popout-right){grid-template-columns:subgrid [popout-start feature-start full-start] [] [feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.feature){grid-template-columns:subgrid [full-start] [] [] [] [] [full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.feature-start,.feature-left){grid-template-columns:subgrid [full-start] [] [] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.feature-end,.feature-right){grid-template-columns:subgrid [popout-start feature-start full-start] [] [] [full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.full){grid-template-columns:subgrid [] [] [] [] [] [] [] []}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.full-start,.full-left){grid-template-columns:subgrid [] [] [] [] [popout-end feature-end full-end]}:is(.breakouts,.breakouts-grid)>:is(.breakouts,.breakouts-grid):is(.full-end,.full-right){grid-template-columns:subgrid [popout-start feature-start full-start] [] [] [] []}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}.bg-background{background-color:var(--color-background)}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.bg-muted{background-color:var(--color-muted)}.bg-success{background-color:var(--color-success)}.bg-error{background-color:var(--color-error)}.bg-warning{background-color:var(--color-warning)}.text-color{color:var(--color-text)}.text-background{color:var(--color-background)}.text-surface{color:var(--color-surface)}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-accent{color:var(--color-accent)}.text-muted{color:var(--color-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.m-2{margin:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.m-3{margin:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.p-3{padding:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.p-4{padding:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.p-5{padding:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.p-6{padding:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.z-index-0{z-index:0}.z-index-1{z-index:1}.z-index-10{z-index:10}.z-index-100{z-index:100}.z-index-1000{z-index:1000}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-bold{font-weight:bold}.font-normal{font-weight:normal}.italic{font-style:italic}.not-italic{font-style:normal}.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-loose{line-height:2}/*# sourceMappingURL=breakouts.min.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_color-tokens.scss","../src/base/_reset.scss","../src/base/_typography-base.scss","../src/base/_layout.scss","../src/base/_color-utilities.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography-utilities.scss"],"names":[],"mappings":"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","file":"breakouts.min.css"}
|