@papillonbits/components 0.17.0 → 0.18.0
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/build/primer/Button/ButtonGroup.scss +96 -0
- package/build/primer/Button/misc.scss +65 -38
- package/build/primer/Form/FormControl.scss +669 -0
- package/build/primer/Form/index.scss +2 -0
- package/build/primer/Icon/Icon.part.js +30 -0
- package/build/primer/Icon/Icon.prop.js +10 -0
- package/build/primer/Layout/index.scss +9 -0
- package/build/primer/Layout/layout.scss +183 -0
- package/build/primer/Layout/mixins.scss +106 -0
- package/build/primer/Layout/page-layout.scss +386 -0
- package/build/primer/Layout/stack.scss +219 -0
- package/build/primer/Navigation/UnderlineNav/UnderlineNav.scss +0 -1
- package/build/primer/SVG/icon/accessibility-inset-16.svg +1 -0
- package/build/primer/SVG/icon/cache-16.svg +1 -0
- package/build/primer/SVG/icon/checkbox-16.svg +1 -0
- package/build/primer/SVG/icon/checkbox-24.svg +1 -0
- package/build/primer/SVG/icon/command-palette-16.svg +1 -0
- package/build/primer/SVG/icon/command-palette-24.svg +1 -0
- package/build/primer/SVG/icon/git-merge-queue-16.svg +1 -0
- package/build/primer/SVG/icon/paperclip-16.svg +1 -0
- package/build/primer/SVG/icon/paperclip-24.svg +1 -0
- package/build/primer/SVG/icon/search-24.svg +1 -1
- package/build/primer/SVG/icon/shield-slash-16.svg +1 -0
- package/build/primer/SVG/icon/table-16.svg +1 -1
- package/build/primer/SVG/icon/tasklist-16.svg +1 -1
- package/build/primer/SVG/icon/tasklist-24.svg +1 -1
- package/build/primer/SelectMenu/SelectMenu.scss +0 -1
- package/package.json +4 -4
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
// stylelint-disable custom-property-pattern, no-descending-specificity, declaration-block-no-redundant-longhand-properties
|
|
2
|
+
// stylelint-disable max-nesting-depth
|
|
3
|
+
// stylelint-disable selector-max-specificity
|
|
4
|
+
// stylelint-disable no-duplicate-selectors
|
|
5
|
+
|
|
6
|
+
$Layout-divider-color: var(--color-border-default) !default;
|
|
7
|
+
$Layout-responsive-variant-max-breakpoint: 'md' !default;
|
|
8
|
+
|
|
9
|
+
:root {
|
|
10
|
+
--Layout-pane-width: #{map-get($sidebar-width, 'sm')};
|
|
11
|
+
--Layout-content-width: 100%;
|
|
12
|
+
--Layout-template-columns: 1fr var(--Layout-pane-width);
|
|
13
|
+
--Layout-template-areas: 'content pane';
|
|
14
|
+
--Layout-column-gap: #{$spacer-3};
|
|
15
|
+
--Layout-row-gap: #{$spacer-3};
|
|
16
|
+
|
|
17
|
+
// the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
|
|
18
|
+
// stylelint-disable length-zero-no-unit
|
|
19
|
+
--Layout-outer-spacing-x: 0px; // wrapper margin x
|
|
20
|
+
--Layout-outer-spacing-y: 0px; // wrapper margin y
|
|
21
|
+
--Layout-inner-spacing-min: 0px; // default region padding
|
|
22
|
+
--Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
|
|
23
|
+
// stylelint-enable length-zero-no-unit
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.PageLayout {
|
|
27
|
+
display: block;
|
|
28
|
+
// stylelint-disable-next-line primer/spacing
|
|
29
|
+
margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x);
|
|
30
|
+
|
|
31
|
+
// multi-column desktop-friendly layout
|
|
32
|
+
|
|
33
|
+
@include breakpoint($Layout-responsive-variant-max-breakpoint) {
|
|
34
|
+
// Set a `content` region width, to work with loading states when
|
|
35
|
+
// `pane` is not yet loaded. See https://github.com/primer/css/pull/1818
|
|
36
|
+
$Layout-content-full-width: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));
|
|
37
|
+
|
|
38
|
+
&.PageLayout--panePos-start {
|
|
39
|
+
--Layout-template-columns: var(--Layout-pane-width) #{$Layout-content-full-width};
|
|
40
|
+
--Layout-template-areas: 'pane content';
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.PageLayout--panePos-end {
|
|
44
|
+
--Layout-template-columns: #{$Layout-content-full-width} var(--Layout-pane-width);
|
|
45
|
+
--Layout-template-areas: 'content pane';
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// header divider
|
|
49
|
+
|
|
50
|
+
.PageLayout-header--hasDivider {
|
|
51
|
+
// stylelint-disable-next-line primer/spacing
|
|
52
|
+
padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
|
|
53
|
+
// stylelint-disable-next-line primer/borders
|
|
54
|
+
border-bottom: $border-width solid $Layout-divider-color;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// footer divider
|
|
58
|
+
|
|
59
|
+
.PageLayout-footer--hasDivider {
|
|
60
|
+
// stylelint-disable-next-line primer/spacing
|
|
61
|
+
padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
|
|
62
|
+
// stylelint-disable-next-line primer/borders
|
|
63
|
+
border-top: $border-width solid $Layout-divider-color;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// pane divider
|
|
67
|
+
|
|
68
|
+
&.PageLayout--hasPaneDivider {
|
|
69
|
+
&.PageLayout--panePos-start {
|
|
70
|
+
.PageLayout-pane {
|
|
71
|
+
// stylelint-disable-next-line primer/borders
|
|
72
|
+
border-right: $border-width solid $Layout-divider-color;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:not(.PageLayout--columnGap-none) {
|
|
76
|
+
.PageLayout-pane {
|
|
77
|
+
// stylelint-disable-next-line primer/spacing
|
|
78
|
+
padding-right: calc(var(--Layout-column-gap) - #{$border-width});
|
|
79
|
+
// stylelint-disable-next-line primer/spacing
|
|
80
|
+
margin-right: calc(var(--Layout-column-gap) * -1);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.PageLayout-content {
|
|
84
|
+
// stylelint-disable-next-line primer/spacing
|
|
85
|
+
margin-left: var(--Layout-column-gap);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&.PageLayout--panePos-end {
|
|
91
|
+
.PageLayout-pane {
|
|
92
|
+
// stylelint-disable-next-line primer/borders
|
|
93
|
+
border-left: $border-width solid $Layout-divider-color;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:not(.PageLayout--columnGap-none) {
|
|
97
|
+
.PageLayout-pane {
|
|
98
|
+
// stylelint-disable-next-line primer/spacing
|
|
99
|
+
padding-left: calc(var(--Layout-column-gap) - #{$border-width});
|
|
100
|
+
// stylelint-disable-next-line primer/spacing
|
|
101
|
+
margin-left: calc(var(--Layout-column-gap) * -1);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.PageLayout-content {
|
|
105
|
+
// stylelint-disable-next-line primer/spacing
|
|
106
|
+
margin-right: var(--Layout-column-gap);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// sticky pane
|
|
113
|
+
|
|
114
|
+
.PageLayout-pane--sticky {
|
|
115
|
+
position: sticky;
|
|
116
|
+
top: 0;
|
|
117
|
+
max-height: 100vh;
|
|
118
|
+
overflow: auto;
|
|
119
|
+
scrollbar-width: thin;
|
|
120
|
+
|
|
121
|
+
@supports (max-height: 100dvh) {
|
|
122
|
+
max-height: 100dvh;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// content width
|
|
127
|
+
|
|
128
|
+
[class^='PageLayout-content-centered-'] {
|
|
129
|
+
max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
|
|
130
|
+
margin-right: auto;
|
|
131
|
+
margin-left: auto;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&.PageLayout--hasPaneDivider {
|
|
135
|
+
[class^='PageLayout-content-centered-'] {
|
|
136
|
+
max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + (var(--Layout-column-gap) * 2));
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&.PageLayout--panePos-start {
|
|
141
|
+
[class^='PageLayout-content-centered-'] > [class^='container-'] {
|
|
142
|
+
margin-left: 0;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&.PageLayout--panePos-end {
|
|
147
|
+
[class^='PageLayout-content-centered-'] > [class^='container-'] {
|
|
148
|
+
margin-right: 0;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@each $breakpoint in map-keys($breakpoints) {
|
|
153
|
+
.PageLayout-content-centered-#{$breakpoint} {
|
|
154
|
+
--Layout-content-width: #{map-get($breakpoints, $breakpoint)};
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// pane width
|
|
159
|
+
|
|
160
|
+
@each $breakpoint in map-keys($sidebar-width) {
|
|
161
|
+
@include breakpoint($breakpoint) {
|
|
162
|
+
--Layout-pane-width: #{map-get($sidebar-width, $breakpoint)};
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&.PageLayout--paneWidth-narrow {
|
|
167
|
+
@each $breakpoint in map-keys($sidebar-narrow-width) {
|
|
168
|
+
@include breakpoint($breakpoint) {
|
|
169
|
+
--Layout-pane-width: #{map-get($sidebar-narrow-width, $breakpoint)};
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&.PageLayout--paneWidth-wide {
|
|
175
|
+
@each $breakpoint in map-keys($sidebar-wide-width) {
|
|
176
|
+
@include breakpoint($breakpoint) {
|
|
177
|
+
--Layout-pane-width: #{map-get($sidebar-wide-width, $breakpoint)};
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
// responsive behaviors on narrow viewports
|
|
184
|
+
|
|
185
|
+
@media (max-width: #{map-get($breakpoints, $Layout-responsive-variant-max-breakpoint) - 0.02px}) {
|
|
186
|
+
// variant: stackRegions
|
|
187
|
+
|
|
188
|
+
&.PageLayout--responsive-stackRegions {
|
|
189
|
+
--Layout-template-columns: 1fr;
|
|
190
|
+
|
|
191
|
+
// responsive-panePos: end (default)
|
|
192
|
+
--Layout-template-areas: 'content' 'pane';
|
|
193
|
+
|
|
194
|
+
// responsive-panePos: start
|
|
195
|
+
&.PageLayout--responsive-panePos-start {
|
|
196
|
+
--Layout-template-areas: 'pane' 'content';
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// variant: separateRegions
|
|
201
|
+
|
|
202
|
+
&.PageLayout--responsive-separateRegions {
|
|
203
|
+
--Layout-template-columns: 1fr;
|
|
204
|
+
--Layout-template-areas: 'content';
|
|
205
|
+
|
|
206
|
+
&.PageLayout--responsive-primary-content {
|
|
207
|
+
--Layout-template-areas: 'content';
|
|
208
|
+
|
|
209
|
+
.PageLayout-pane {
|
|
210
|
+
display: none;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
&.PageLayout--responsive-primary-pane {
|
|
215
|
+
--Layout-template-areas: 'pane';
|
|
216
|
+
|
|
217
|
+
.PageLayout-content {
|
|
218
|
+
display: none;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// region dividers on narrow viewports
|
|
224
|
+
|
|
225
|
+
.PageLayout-region--dividerNarrow-line-before {
|
|
226
|
+
position: relative;
|
|
227
|
+
// stylelint-disable-next-line primer/spacing
|
|
228
|
+
margin-top: var(--Layout-row-gap);
|
|
229
|
+
|
|
230
|
+
&::before {
|
|
231
|
+
@include Layout-line-divider;
|
|
232
|
+
|
|
233
|
+
top: calc(#{$border-width * -1} - var(--Layout-row-gap));
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.PageLayout-region--dividerNarrow-line-after {
|
|
238
|
+
position: relative;
|
|
239
|
+
// stylelint-disable-next-line primer/spacing
|
|
240
|
+
margin-bottom: var(--Layout-row-gap);
|
|
241
|
+
|
|
242
|
+
&::after {
|
|
243
|
+
@include Layout-line-divider;
|
|
244
|
+
|
|
245
|
+
bottom: calc(#{$border-width * -1} - var(--Layout-row-gap));
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.PageLayout-region--dividerNarrow-filled-before {
|
|
250
|
+
position: relative;
|
|
251
|
+
// stylelint-disable-next-line primer/spacing
|
|
252
|
+
margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
|
|
253
|
+
|
|
254
|
+
&::after {
|
|
255
|
+
@include Layout-filled-divider;
|
|
256
|
+
|
|
257
|
+
top: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.PageLayout-region--dividerNarrow-filled-after {
|
|
262
|
+
position: relative;
|
|
263
|
+
// stylelint-disable-next-line primer/spacing
|
|
264
|
+
margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
|
|
265
|
+
|
|
266
|
+
&::before {
|
|
267
|
+
@include Layout-filled-divider;
|
|
268
|
+
|
|
269
|
+
bottom: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
// PageLayout-wrapper bundles header, footer, pane, and content regions
|
|
276
|
+
.PageLayout-wrapper {
|
|
277
|
+
display: grid;
|
|
278
|
+
grid: auto-flow / 1fr;
|
|
279
|
+
row-gap: var(--Layout-row-gap);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
// PageLayout-columns wrap pane and content regions
|
|
283
|
+
// If layout has no pane, PageLayout-columns is not present
|
|
284
|
+
.PageLayout-columns {
|
|
285
|
+
display: grid;
|
|
286
|
+
column-gap: var(--Layout-column-gap);
|
|
287
|
+
row-gap: var(--Layout-row-gap);
|
|
288
|
+
grid-template-columns: var(--Layout-template-columns);
|
|
289
|
+
grid-template-rows: 1fr;
|
|
290
|
+
grid-template-areas: var(--Layout-template-areas);
|
|
291
|
+
|
|
292
|
+
.PageLayout-content {
|
|
293
|
+
// stylelint-disable-next-line primer/spacing
|
|
294
|
+
padding-right: var(--Layout-inner-spacing-max);
|
|
295
|
+
// stylelint-disable-next-line primer/spacing
|
|
296
|
+
padding-left: var(--Layout-inner-spacing-max);
|
|
297
|
+
grid-area: content;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.PageLayout-pane {
|
|
301
|
+
grid-area: pane;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
// outer spacing
|
|
306
|
+
|
|
307
|
+
.PageLayout--outerSpacing-normal {
|
|
308
|
+
--Layout-outer-spacing-x: #{$spacer-3};
|
|
309
|
+
--Layout-outer-spacing-y: #{$spacer-3};
|
|
310
|
+
|
|
311
|
+
@include breakpoint(lg) {
|
|
312
|
+
--Layout-outer-spacing-x: #{$spacer-4};
|
|
313
|
+
--Layout-outer-spacing-y: #{$spacer-4};
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.PageLayout--outerSpacing-condensed {
|
|
318
|
+
--Layout-outer-spacing-x: #{$spacer-3};
|
|
319
|
+
--Layout-outer-spacing-y: #{$spacer-3};
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
// inner spacing
|
|
323
|
+
|
|
324
|
+
.PageLayout--innerSpacing-normal {
|
|
325
|
+
--Layout-inner-spacing-min: #{$spacer-3};
|
|
326
|
+
--Layout-inner-spacing-max: #{$spacer-3};
|
|
327
|
+
|
|
328
|
+
@include breakpoint(lg) {
|
|
329
|
+
--Layout-inner-spacing-max: #{$spacer-4};
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.PageLayout--innerSpacing-condensed {
|
|
334
|
+
--Layout-inner-spacing-min: #{$spacer-3};
|
|
335
|
+
--Layout-inner-spacing-max: #{$spacer-3};
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
// column gap
|
|
339
|
+
|
|
340
|
+
.PageLayout--columnGap-normal {
|
|
341
|
+
--Layout-column-gap: #{$spacer-3};
|
|
342
|
+
|
|
343
|
+
@include breakpoint(lg) {
|
|
344
|
+
--Layout-column-gap: #{$spacer-4};
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.PageLayout--columnGap-condensed {
|
|
349
|
+
--Layout-column-gap: #{$spacer-3};
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.PageLayout--columnGap-none {
|
|
353
|
+
// the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
|
|
354
|
+
// stylelint-disable-next-line length-zero-no-unit
|
|
355
|
+
--Layout-column-gap: 0px;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
// row gap
|
|
359
|
+
|
|
360
|
+
.PageLayout--rowGap-normal {
|
|
361
|
+
--Layout-row-gap: #{$spacer-3};
|
|
362
|
+
|
|
363
|
+
@include breakpoint(lg) {
|
|
364
|
+
--Layout-row-gap: #{$spacer-4};
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.PageLayout--rowGap-none {
|
|
369
|
+
// the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
|
|
370
|
+
// stylelint-disable length-zero-no-unit
|
|
371
|
+
--Layout-row-gap: 0px;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.PageLayout--rowGap-condensed {
|
|
375
|
+
--Layout-row-gap: #{$spacer-3};
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
// regions
|
|
379
|
+
|
|
380
|
+
.PageLayout-header,
|
|
381
|
+
.PageLayout-content,
|
|
382
|
+
.PageLayout-pane,
|
|
383
|
+
.PageLayout-footer {
|
|
384
|
+
// stylelint-disable-next-line primer/spacing
|
|
385
|
+
padding: var(--Layout-inner-spacing-min);
|
|
386
|
+
}
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
// stylelint-disable custom-property-pattern
|
|
2
|
+
// Stack layout helper component
|
|
3
|
+
|
|
4
|
+
.Stack {
|
|
5
|
+
// A Stack component lays elements horizontally or vertically on the page.
|
|
6
|
+
//
|
|
7
|
+
// Stack is a simple abstraction of CSS' Flexbox. Use it to structure elements
|
|
8
|
+
// that are visually grouped, following the same direction.
|
|
9
|
+
//
|
|
10
|
+
// Markup structure
|
|
11
|
+
// ================
|
|
12
|
+
//
|
|
13
|
+
// .Stack
|
|
14
|
+
// ├─ &.Stack--dir-[ inline | block ]-[ whenNarrow | whenRegular | whenWide ]
|
|
15
|
+
// ├─ &.Stack--gap-[ none | condensed | normal | spacious ]-[ whenNarrow | whenRegular | whenWide ]
|
|
16
|
+
// ├─ &.Stack--align-[ start | center | end | baseline ]-[ whenNarrow | whenRegular | whenWide ]
|
|
17
|
+
// ├─ &.Stack--alignWrap-[ start | center | end | distribute | distributeEvenly ]-[ whenNarrow | whenRegular | whenWide ]
|
|
18
|
+
// ├─ &.Stack--spread-[ start | center | end | distribute | distributeEvenly ]-[ whenNarrow | whenRegular | whenWide ]
|
|
19
|
+
// ├─ &.Stack--wrap-[ whenNarrow | whenRegular | whenWide ]
|
|
20
|
+
// ├─ &.Stack--nowrap-[ whenNarrow | whenRegular | whenWide ]
|
|
21
|
+
// ├─ &.Stack--showDividers-[ whenNarrow | whenRegular | whenWide ]
|
|
22
|
+
// │
|
|
23
|
+
// ├─ .Stack-divider
|
|
24
|
+
// ├─ .Stack-item
|
|
25
|
+
// │ ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
|
|
26
|
+
// │ ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
|
|
27
|
+
|
|
28
|
+
$Stack-gap-default: var(--primer-stack-gap-normal, 16px);
|
|
29
|
+
|
|
30
|
+
--Stack-gap-whenRegular: #{$Stack-gap-default};
|
|
31
|
+
--Stack-gap-whenNarrow: #{$Stack-gap-default};
|
|
32
|
+
--Stack-gap-whenWide: var(--Stack-gap-whenRegular);
|
|
33
|
+
--Stack-divider-color: var(--color-border-default);
|
|
34
|
+
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-flow: column;
|
|
37
|
+
align-items: stretch;
|
|
38
|
+
align-content: flex-start;
|
|
39
|
+
gap: var(--Stack-gap-whenRegular);
|
|
40
|
+
|
|
41
|
+
@media ($viewport-narrow) {
|
|
42
|
+
gap: var(--Stack-gap-whenNarrow);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media ($viewport-wide) {
|
|
46
|
+
gap: var(--Stack-gap-whenWide);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@mixin Stack--modifiers($viewportRange: '') {
|
|
51
|
+
// direction
|
|
52
|
+
|
|
53
|
+
.Stack--dir-inline#{$viewportRange} {
|
|
54
|
+
flex-flow: row;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.Stack--dir-block#{$viewportRange} {
|
|
58
|
+
flex-flow: column;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// gap
|
|
62
|
+
|
|
63
|
+
.Stack--gap-none#{$viewportRange} {
|
|
64
|
+
--Stack-gap#{$viewportRange}: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.Stack--gap-condensed#{$viewportRange} {
|
|
68
|
+
--Stack-gap#{$viewportRange}: var(--primer-stack-gap-condensed, 8px);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.Stack--gap-normal#{$viewportRange} {
|
|
72
|
+
--Stack-gap#{$viewportRange}: var(--primer-stack-gap-normal, 16px);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// There's no .Stack--gap-spacious-whenNarrow
|
|
76
|
+
// Narrow viewports render `spacious` gap as `normal`
|
|
77
|
+
@if $viewportRange != '-whenNarrow' {
|
|
78
|
+
.Stack--gap-spacious#{$viewportRange} {
|
|
79
|
+
--Stack-gap#{$viewportRange}: var(--primer-stack-gap-spacious, 24px);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// align
|
|
84
|
+
|
|
85
|
+
.Stack--align-start#{$viewportRange} {
|
|
86
|
+
align-items: flex-start;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.Stack--align-center#{$viewportRange} {
|
|
90
|
+
align-items: center;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.Stack--align-end#{$viewportRange} {
|
|
94
|
+
align-items: flex-end;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.Stack--align-baseline#{$viewportRange} {
|
|
98
|
+
align-items: baseline;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// alignWrap
|
|
102
|
+
|
|
103
|
+
.Stack--alignWrap-start#{$viewportRange} {
|
|
104
|
+
align-content: flex-start;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.Stack--alignWrap-center#{$viewportRange} {
|
|
108
|
+
align-content: center;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.Stack--alignWrap-end#{$viewportRange} {
|
|
112
|
+
align-content: flex-end;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.Stack--alignWrap-distribute#{$viewportRange} {
|
|
116
|
+
align-content: space-between;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.Stack--alignWrap-distributeEvenly#{$viewportRange} {
|
|
120
|
+
align-content: space-evenly;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// spread
|
|
124
|
+
|
|
125
|
+
.Stack--spread-start#{$viewportRange} {
|
|
126
|
+
justify-content: flex-start;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.Stack--spread-center#{$viewportRange} {
|
|
130
|
+
justify-content: center;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.Stack--spread-end#{$viewportRange} {
|
|
134
|
+
justify-content: flex-end;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.Stack--spread-distribute#{$viewportRange} {
|
|
138
|
+
justify-content: space-between;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.Stack--spread-distributeEvenly#{$viewportRange} {
|
|
142
|
+
justify-content: space-evenly;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// wrap
|
|
146
|
+
|
|
147
|
+
.Stack--wrap#{$viewportRange} {
|
|
148
|
+
flex-wrap: wrap;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.Stack--nowrap#{$viewportRange} {
|
|
152
|
+
flex-wrap: nowrap;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// showDividers
|
|
156
|
+
|
|
157
|
+
.Stack--showDividers#{$viewportRange} > .Stack-divider,
|
|
158
|
+
.Stack--showDividers#{$viewportRange} > .Stack-item > .Stack-divider {
|
|
159
|
+
display: block;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
|
|
163
|
+
:not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
|
|
164
|
+
border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
|
|
165
|
+
inline-size: auto;
|
|
166
|
+
block-size: 0;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.Stack--dir-inline#{$viewportRange} > .Stack-divider,
|
|
170
|
+
.Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
|
|
171
|
+
border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
|
|
172
|
+
inline-size: 0;
|
|
173
|
+
block-size: auto;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Stack-divider
|
|
178
|
+
|
|
179
|
+
.Stack-divider {
|
|
180
|
+
display: none;
|
|
181
|
+
padding: 0;
|
|
182
|
+
margin: 0;
|
|
183
|
+
border: 0;
|
|
184
|
+
align-self: stretch;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// Stack-item
|
|
188
|
+
|
|
189
|
+
.Stack-item {
|
|
190
|
+
flex: 0 1 auto;
|
|
191
|
+
min-inline-size: 0;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@mixin Stack-item--modifiers($viewportRange: '') {
|
|
195
|
+
.Stack-item--expand#{$viewportRange} {
|
|
196
|
+
flex-grow: 1;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.Stack-item--keepSize#{$viewportRange} {
|
|
200
|
+
flex-shrink: 0;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Responsive composition
|
|
205
|
+
|
|
206
|
+
@media ($viewport-narrow) {
|
|
207
|
+
@include Stack--modifiers('-whenNarrow');
|
|
208
|
+
@include Stack-item--modifiers('-whenNarrow');
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
@media ($viewport-regular) {
|
|
212
|
+
@include Stack--modifiers('-whenRegular');
|
|
213
|
+
@include Stack-item--modifiers('-whenRegular');
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@media ($viewport-wide) {
|
|
217
|
+
@include Stack--modifiers('-whenWide');
|
|
218
|
+
@include Stack-item--modifiers('-whenWide');
|
|
219
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm2 4a2 2 0 01-1.05 1.76c.115.069.222.15.32.24h2.98a.75.75 0 010 1.5H9.888l.608 5.67a.75.75 0 11-1.492.16L8.754 11H7.246l-.25 2.33a.75.75 0 11-1.49-.16l.607-5.67H3.75a.75.75 0 010-1.5h2.98a1.87 1.87 0 01.32-.24A2 2 0 1110 4z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 5.724c.241.15.503.286.779.407C4.525 6.68 6.195 7 8 7c1.805 0 3.475-.32 4.722-.869.622-.274 1.172-.62 1.578-1.04.408-.426.7-.965.7-1.591s-.292-1.165-.7-1.59c-.406-.422-.956-.767-1.579-1.041C11.476.32 9.806 0 8 0 6.195 0 4.525.32 3.279.869c-.623.274-1.173.62-1.579 1.04-.408.426-.7.965-.7 1.591v9c0 .626.292 1.165.7 1.59.406.422.956.767 1.579 1.041C4.525 15.68 6.195 16 8 16c.45 0 .89-.02 1.317-.058a.75.75 0 10-.134-1.494c-.381.034-.777.052-1.183.052-1.647 0-3.102-.295-4.117-.742-.51-.224-.874-.47-1.101-.707-.224-.233-.282-.418-.282-.551v-2.276c.164.102.334.196.507.28 1.102.543 2.582.89 4.204.975a.75.75 0 00.078-1.498c-1.476-.077-2.746-.392-3.62-.822C2.738 8.7 2.5 8.248 2.5 8V5.724zm0-2.224c0-.133.058-.318.282-.55.227-.237.592-.484 1.1-.708C4.899 1.795 6.354 1.5 8 1.5c1.647 0 3.102.295 4.117.742.51.224.874.47 1.101.707.224.233.282.418.282.551 0 .133-.058.318-.282.55-.227.237-.592.484-1.1.708C11.101 5.205 9.646 5.5 8 5.5c-1.647 0-3.102-.295-4.117-.742-.51-.224-.874-.47-1.101-.707-.224-.233-.282-.418-.282-.551z"/><path d="M14.49 7.582a.375.375 0 00-.66-.313l-3.625 4.625a.375.375 0 00.295.606h2.127l-.619 2.922a.375.375 0 00.666.304l3.125-4.125A.375.375 0 0015.5 11h-1.778l.769-3.418z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 2.75a.25.25 0 01.25-.25h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75zM2.75 1A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1H2.75zm9.03 5.28a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.28 9.28a.75.75 0 00-1.06-1.06l-5.97 5.97-2.47-2.47a.75.75 0 00-1.06 1.06l3 3a.75.75 0 001.06 0l6.5-6.5z"/><path fill-rule="evenodd" d="M3.75 2A1.75 1.75 0 002 3.75v16.5c0 .966.784 1.75 1.75 1.75h16.5A1.75 1.75 0 0022 20.25V3.75A1.75 1.75 0 0020.25 2H3.75zM3.5 3.75a.25.25 0 01.25-.25h16.5a.25.25 0 01.25.25v16.5a.25.25 0 01-.25.25H3.75a.25.25 0 01-.25-.25V3.75z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M6.354 8.04l-4.773 4.773a.75.75 0 101.061 1.06L7.945 8.57a.75.75 0 000-1.06L2.642 2.206a.75.75 0 00-1.06 1.061L6.353 8.04zM8.75 11.5a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3.045 18.894L9.94 12 3.045 5.106a.75.75 0 011.06-1.061l7.425 7.425a.75.75 0 010 1.06l-7.424 7.425a.75.75 0 01-1.061-1.06zm8.205.606a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.75 4.5a1.25 1.25 0 100-2.5 1.25 1.25 0 000 2.5z"/><path fill-rule="evenodd" d="M3 7.75a.75.75 0 011.5 0v2.878a2.251 2.251 0 11-1.5 0V7.75zm.75 5.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/><path d="M8.75 5.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z"/><path fill-rule="evenodd" d="M14.5 8.25a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-1.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12.212 3.02a1.75 1.75 0 00-2.478.003l-5.83 5.83a3.007 3.007 0 00-.88 2.127c0 .795.315 1.551.88 2.116.567.567 1.333.89 2.126.89.79 0 1.548-.321 2.116-.89l5.48-5.48a.75.75 0 011.061 1.06l-5.48 5.48a4.494 4.494 0 01-3.177 1.33c-1.2 0-2.345-.487-3.187-1.33a4.485 4.485 0 01-1.32-3.177c0-1.195.475-2.341 1.32-3.186l5.83-5.83a3.25 3.25 0 015.553 2.297c0 .863-.343 1.691-.953 2.301L7.439 12.39a2.01 2.01 0 01-1.416.593 2 2 0 01-1.412-.593 1.991 1.991 0 010-2.828l5.48-5.48a.75.75 0 011.06 1.06l-5.48 5.48a.491.491 0 000 .707.5.5 0 00.352.154.509.509 0 00.356-.154l5.833-5.827a1.755 1.755 0 000-2.481z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19.187 3.588a2.75 2.75 0 00-3.889 0L5.575 13.31a4.5 4.5 0 106.364 6.364l8.662-8.662a.75.75 0 011.061 1.06L13 20.735a6 6 0 01-8.485-8.485l9.723-9.723a4.25 4.25 0 116.01 6.01l-9.193 9.193a2.638 2.638 0 01-1.858.779 2.626 2.626 0 01-1.854-.779c-.196-.196-.338-.47-.43-.726a2.825 2.825 0 01-.168-.946c0-.7.284-1.373.775-1.864l8.132-8.131a.75.75 0 111.06 1.06l-8.131 8.132a1.144 1.144 0 00-.336.803 1.326 1.326 0 00.146.587c.01.018.018.028.02.032.22.215.501.332.786.332.29 0 .58-.121.798-.34l9.192-9.192a2.75 2.75 0 000-3.89z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.25 2a8.25 8.25 0 105.28 14.59l5.69 5.69a.75.75 0 101.06-1.06l-5.69-5.69A8.25 8.25 0 0010.25 2zM3.5 10.25a6.75 6.75 0 1113.5 0 6.75 6.75 0 01-13.5 0z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8.533.133a1.75 1.75 0 00-1.066 0l-2.091.67a.75.75 0 00.457 1.428l2.09-.67a.25.25 0 01.153 0l5.25 1.68a.25.25 0 01.174.239V7c0 .233-.008.464-.025.694a.75.75 0 101.495.112c.02-.27.03-.538.03-.806V3.48a1.75 1.75 0 00-1.217-1.667L8.533.133z"/><path fill-rule="evenodd" d="M1 2.857l-.69-.5a.75.75 0 11.88-1.214l14.5 10.5a.75.75 0 11-.88 1.214l-1.282-.928c-.995 1.397-2.553 2.624-4.864 3.608-.425.181-.905.18-1.329 0-2.447-1.042-4.049-2.356-5.032-3.855C1.32 10.182 1 8.566 1 7V2.857zm1.5 1.086V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297.05.02.106.02.153 0 2.127-.905 3.439-1.982 4.237-3.108L2.5 3.943z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zM1.5 6.5v7.75c0 .138.112.25.25.25H5v-8H1.5zM5 5H1.5V1.75a.25.25 0 01.25-.25H5V5zm1.5 1.5v8h7.75a.25.25 0 00.25-.25V6.5h-8zm8-1.5h-8V1.5h7.75a.25.25 0 01.25.25V5z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 3.5v3h3v-3h-3zM2 2a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V3a1 1 0 00-1-1H2zm4.655 8.595a.75.75 0 010 1.06L4.03 14.28a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.97.97 2.095-2.095a.75.75 0 011.06 0zM9.75 2.5a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zm0 5a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zm0 5a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 6a1 1 0 011-1h5a1 1 0 011 1v5a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm1.5 4.5v-4h4v4h-4z"/><path d="M12.75 5.5a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zm0 6a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zm0 6a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zm-2.97-2.53a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 111.06-1.06l1.47 1.47 2.97-2.97a.75.75 0 011.06 0z"/></svg>
|