@papillonbits/css 0.64.0 → 0.66.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/base/base.scss +17 -1
- package/build/primer/base/normalize.scss +1 -1
- package/build/primer/support/mixins/typography.scss +18 -12
- package/build/primer/support/variables/layout.scss +75 -54
- package/build/primer/support/variables/misc.scss +1 -0
- package/build/primer/support/variables/typography.scss +4 -4
- package/build/primer/truncate/truncate.scss +17 -12
- package/build/primer/utilities/borders.scss +8 -9
- package/build/primer/utilities/margin.scss +9 -9
- package/build/primer/utilities/padding.scss +9 -9
- package/build/primer/utilities/typography.scss +151 -69
- package/package.json +2 -2
|
@@ -18,7 +18,7 @@ button {
|
|
|
18
18
|
|
|
19
19
|
body {
|
|
20
20
|
font-family: $body-font;
|
|
21
|
-
font-size: $body-font-size;
|
|
21
|
+
font-size: var(--body-font-size, $body-font-size);
|
|
22
22
|
line-height: $body-line-height;
|
|
23
23
|
color: var(--color-fg-default);
|
|
24
24
|
background-color: var(--color-canvas-default);
|
|
@@ -38,6 +38,22 @@ strong {
|
|
|
38
38
|
font-weight: $font-weight-bold;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
fieldset {
|
|
42
|
+
padding: 0;
|
|
43
|
+
margin: 0;
|
|
44
|
+
border: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
label {
|
|
48
|
+
font-weight: $font-weight-bold;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Custom styling for HTML5 validation bubbles (WebKit only)
|
|
52
|
+
::placeholder {
|
|
53
|
+
color: var(--color-fg-subtle);
|
|
54
|
+
opacity: 1; // override opacity in normalize.css
|
|
55
|
+
}
|
|
56
|
+
|
|
41
57
|
// Horizontal lines
|
|
42
58
|
//
|
|
43
59
|
// TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s
|
|
@@ -12,32 +12,32 @@
|
|
|
12
12
|
// Heading mixins for use within components
|
|
13
13
|
// These match heading utilities in utilities/typography
|
|
14
14
|
@mixin h1 {
|
|
15
|
-
font-size: $h1-size;
|
|
15
|
+
font-size: var(--h1-size, $h1-size);
|
|
16
16
|
font-weight: $font-weight-bold;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
@mixin h2 {
|
|
20
|
-
font-size: $h2-size;
|
|
20
|
+
font-size: var(--h2-size, $h2-size);
|
|
21
21
|
font-weight: $font-weight-bold;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin h3 {
|
|
25
|
-
font-size: $h3-size;
|
|
25
|
+
font-size: var(--h3-size, $h3-size);
|
|
26
26
|
font-weight: $font-weight-bold;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
@mixin h4 {
|
|
30
|
-
font-size: $h4-size;
|
|
30
|
+
font-size: var(--h4-size, $h4-size);
|
|
31
31
|
font-weight: $font-weight-bold;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
@mixin h5 {
|
|
35
|
-
font-size: $h5-size;
|
|
35
|
+
font-size: var(--h5-size, $h5-size);
|
|
36
36
|
font-weight: $font-weight-bold;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
@mixin h6 {
|
|
40
|
-
font-size: $h6-size;
|
|
40
|
+
font-size: var(--h6-size, $h6-size);
|
|
41
41
|
font-weight: $font-weight-bold;
|
|
42
42
|
}
|
|
43
43
|
|
|
@@ -45,24 +45,30 @@
|
|
|
45
45
|
// There are no responsive mixins for h4-h6 because they are small
|
|
46
46
|
// and don't need to be smaller on mobile.
|
|
47
47
|
@mixin f1-responsive {
|
|
48
|
-
font-size: $h1-size-mobile;
|
|
48
|
+
font-size: var(--h1-size-mobile, $h1-size-mobile);
|
|
49
49
|
|
|
50
50
|
// 32px on desktop
|
|
51
|
-
@include breakpoint(md) {
|
|
51
|
+
@include breakpoint(md) {
|
|
52
|
+
font-size: var(--h1-size, $h1-size);
|
|
53
|
+
}
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
@mixin f2-responsive {
|
|
55
|
-
font-size: $h2-size-mobile;
|
|
57
|
+
font-size: var(--h2-size-mobile, $h2-size-mobile);
|
|
56
58
|
|
|
57
59
|
// 24px on desktop
|
|
58
|
-
@include breakpoint(md) {
|
|
60
|
+
@include breakpoint(md) {
|
|
61
|
+
font-size: var(--h2-size, $h2-size);
|
|
62
|
+
}
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
@mixin f3-responsive {
|
|
62
|
-
font-size: $h3-size-mobile;
|
|
66
|
+
font-size: var(--h3-size-mobile, $h3-size-mobile);
|
|
63
67
|
|
|
64
68
|
// 20px on desktop
|
|
65
|
-
@include breakpoint(md) {
|
|
69
|
+
@include breakpoint(md) {
|
|
70
|
+
font-size: var(--h3-size, $h3-size);
|
|
71
|
+
}
|
|
66
72
|
}
|
|
67
73
|
|
|
68
74
|
// These use the mixins from above for responsive heading sizes.
|
|
@@ -9,16 +9,14 @@ $display-values: (
|
|
|
9
9
|
inline-flex,
|
|
10
10
|
none,
|
|
11
11
|
table,
|
|
12
|
-
table-cell
|
|
13
|
-
) !default;
|
|
12
|
+
table-cell) !default;
|
|
14
13
|
|
|
15
14
|
// maps edges to respective corners for border-radius
|
|
16
15
|
$edges: (
|
|
17
16
|
top: (top-left, top-right),
|
|
18
17
|
right: (top-right, bottom-right),
|
|
19
18
|
bottom: (bottom-right, bottom-left),
|
|
20
|
-
left: (bottom-left, top-left)
|
|
21
|
-
) !default;
|
|
19
|
+
left: (bottom-left, top-left)) !default;
|
|
22
20
|
|
|
23
21
|
// These are our margin and padding utility spacers. The default step size we
|
|
24
22
|
// use is 8px. This gives us a key of:
|
|
@@ -32,13 +30,13 @@ $edges: (
|
|
|
32
30
|
$spacer: 8px !default;
|
|
33
31
|
|
|
34
32
|
// Our spacing scale
|
|
35
|
-
$spacer-0: 0 !default;
|
|
36
|
-
$spacer-1: $spacer * 0.5 !default;
|
|
37
|
-
$spacer-2: $spacer !default;
|
|
38
|
-
$spacer-3: $spacer * 2 !default;
|
|
39
|
-
$spacer-4: $spacer * 3 !default;
|
|
40
|
-
$spacer-5: $spacer * 4 !default;
|
|
41
|
-
$spacer-6: $spacer * 5 !default;
|
|
33
|
+
$spacer-0: 0 !default; // 0
|
|
34
|
+
$spacer-1: $spacer * 0.5 !default; // 4px
|
|
35
|
+
$spacer-2: $spacer !default; // 8px
|
|
36
|
+
$spacer-3: $spacer * 2 !default; // 16px
|
|
37
|
+
$spacer-4: $spacer * 3 !default; // 24px
|
|
38
|
+
$spacer-5: $spacer * 4 !default; // 32px
|
|
39
|
+
$spacer-6: $spacer * 5 !default; // 40px
|
|
42
40
|
|
|
43
41
|
// The list of spacer values
|
|
44
42
|
$spacers: (
|
|
@@ -66,9 +64,9 @@ $spacer-map: (
|
|
|
66
64
|
// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
|
|
67
65
|
// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
|
|
68
66
|
// 80, 96, etc.
|
|
69
|
-
$spacer-7:
|
|
70
|
-
$spacer-8:
|
|
71
|
-
$spacer-9:
|
|
67
|
+
$spacer-7: $spacer * 6 !default; // 48px
|
|
68
|
+
$spacer-8: $spacer * 8 !default; // 64px
|
|
69
|
+
$spacer-9: $spacer * 10 !default; // 80px
|
|
72
70
|
$spacer-10: $spacer * 12 !default; // 96px
|
|
73
71
|
$spacer-11: $spacer * 14 !default; // 112px
|
|
74
72
|
$spacer-12: $spacer * 16 !default; // 128px
|
|
@@ -82,45 +80,43 @@ $spacers-large: (
|
|
|
82
80
|
12: $spacer-12,
|
|
83
81
|
) !default;
|
|
84
82
|
|
|
85
|
-
// stylelint-disable-next-line function-no-unknown
|
|
86
83
|
$spacer-map-extended: map-merge(
|
|
87
|
-
(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
$spacers-large,
|
|
84
|
+
(0: 0,
|
|
85
|
+
1: $spacer-1,
|
|
86
|
+
2: $spacer-2,
|
|
87
|
+
3: $spacer-3,
|
|
88
|
+
4: $spacer-4,
|
|
89
|
+
5: $spacer-5,
|
|
90
|
+
6: $spacer-6,
|
|
91
|
+
),
|
|
92
|
+
$spacers-large,
|
|
97
93
|
) !default;
|
|
98
94
|
|
|
99
95
|
// Em spacer variables
|
|
100
96
|
$em-spacer-1: 0.0625em !default; // 1/16
|
|
101
|
-
$em-spacer-2: 0.125em !default;
|
|
102
|
-
$em-spacer-3: 0.25em !default;
|
|
103
|
-
$em-spacer-4: 0.375em !default;
|
|
104
|
-
$em-spacer-5: 0.5em !default;
|
|
105
|
-
$em-spacer-6: 0.75em !default;
|
|
97
|
+
$em-spacer-2: 0.125em !default; // 1/8
|
|
98
|
+
$em-spacer-3: 0.25em !default; // 1/4
|
|
99
|
+
$em-spacer-4: 0.375em !default; // 3/8
|
|
100
|
+
$em-spacer-5: 0.5em !default; // 1/2
|
|
101
|
+
$em-spacer-6: 0.75em !default; // 3/4
|
|
106
102
|
|
|
107
103
|
// Size scale
|
|
108
104
|
// Used for buttons, inputs, labels, avatars etc.
|
|
109
105
|
$size: 16px !default;
|
|
110
106
|
|
|
111
107
|
$size-0: 0 !default;
|
|
112
|
-
$size-1: $size !default;
|
|
113
|
-
$size-2: $size-1 +
|
|
114
|
-
$size-3: $size-2 +
|
|
115
|
-
$size-4: $size-3 +
|
|
116
|
-
$size-5: $size-4 +
|
|
117
|
-
$size-6: $size-5 +
|
|
118
|
-
$size-7: $size-6 +
|
|
119
|
-
$size-8: $size-7 + 16px !default;
|
|
108
|
+
$size-1: $size !default; // 16px
|
|
109
|
+
$size-2: $size-1 + 4px !default; // 20px
|
|
110
|
+
$size-3: $size-2 + 4px !default; // 24px
|
|
111
|
+
$size-4: $size-3 + 4px !default; // 28px
|
|
112
|
+
$size-5: $size-4 + 4px !default; // 32px
|
|
113
|
+
$size-6: $size-5 + 8px !default; // 40px
|
|
114
|
+
$size-7: $size-6 + 8px !default; // 48px
|
|
115
|
+
$size-8: $size-7 + 16px !default; // 64px
|
|
120
116
|
|
|
121
117
|
// Fixed-width container variables
|
|
122
118
|
$container-width: 980px !default;
|
|
123
|
-
$grid-gutter:
|
|
119
|
+
$grid-gutter: 10px !default;
|
|
124
120
|
|
|
125
121
|
// Breakpoint widths
|
|
126
122
|
$width-xs: 0 !default;
|
|
@@ -144,8 +140,7 @@ $breakpoints: (
|
|
|
144
140
|
sm: $width-sm,
|
|
145
141
|
md: $width-md,
|
|
146
142
|
lg: $width-lg,
|
|
147
|
-
xl: $width-xl
|
|
148
|
-
) !default;
|
|
143
|
+
xl: $width-xl) !default;
|
|
149
144
|
|
|
150
145
|
// Viewport ranges
|
|
151
146
|
// Soon to be provided by Primer Primitives directly
|
|
@@ -171,39 +166,65 @@ $responsive-positions: (
|
|
|
171
166
|
relative,
|
|
172
167
|
absolute,
|
|
173
168
|
fixed,
|
|
174
|
-
sticky
|
|
175
|
-
) !default;
|
|
169
|
+
sticky) !default;
|
|
176
170
|
|
|
177
171
|
$sidebar-width: (
|
|
178
172
|
sm: 220px,
|
|
179
173
|
md: 256px,
|
|
180
|
-
lg: 296px
|
|
181
|
-
) !default;
|
|
174
|
+
lg: 296px) !default;
|
|
182
175
|
|
|
183
176
|
$sidebar-narrow-width: (
|
|
184
177
|
md: 240px,
|
|
185
|
-
lg: 256px
|
|
186
|
-
) !default;
|
|
178
|
+
lg: 256px) !default;
|
|
187
179
|
|
|
188
180
|
$sidebar-wide-width: (
|
|
189
181
|
lg: 320px,
|
|
190
|
-
xl: 336px
|
|
191
|
-
) !default;
|
|
182
|
+
xl: 336px) !default;
|
|
192
183
|
|
|
193
184
|
$gutter: (
|
|
194
185
|
md: $spacer-3,
|
|
195
186
|
lg: $spacer-4,
|
|
196
|
-
xl: $spacer-5
|
|
197
|
-
) !default;
|
|
187
|
+
xl: $spacer-5) !default;
|
|
198
188
|
|
|
199
189
|
$gutter-condensed: (
|
|
200
190
|
md: $spacer-3,
|
|
201
191
|
lg: $spacer-3,
|
|
202
|
-
xl: $spacer-4
|
|
203
|
-
) !default;
|
|
192
|
+
xl: $spacer-4) !default;
|
|
204
193
|
|
|
205
194
|
$gutter-spacious: (
|
|
206
195
|
md: $spacer-4,
|
|
207
196
|
lg: $spacer-5,
|
|
208
|
-
xl: $spacer-6
|
|
197
|
+
xl: $spacer-6) !default;
|
|
198
|
+
|
|
199
|
+
// rem unit support
|
|
200
|
+
|
|
201
|
+
$spacer-map-rem: (
|
|
202
|
+
0: 0,
|
|
203
|
+
1: var(--base-size-4, 4px),
|
|
204
|
+
2: var(--base-size-8, 8px),
|
|
205
|
+
3: var(--base-size-16, 16px),
|
|
206
|
+
4: var(--base-size-24, 24px),
|
|
207
|
+
5: var(--base-size-32, 32px),
|
|
208
|
+
6: var(--base-size-40, 40px),
|
|
209
|
+
) !default;
|
|
210
|
+
|
|
211
|
+
$spacers-large-rem: (
|
|
212
|
+
7: var(--base-size-48, 48px),
|
|
213
|
+
8: var(--base-size-64, 64px),
|
|
214
|
+
9: var(--base-size-80, 80px),
|
|
215
|
+
10: var(--base-size-96, 96px),
|
|
216
|
+
11: var(--base-size-112, 112px),
|
|
217
|
+
12: var(--base-size-128, 128px),
|
|
218
|
+
) !default;
|
|
219
|
+
|
|
220
|
+
$spacer-map-rem-extended: map-merge(
|
|
221
|
+
(0: 0,
|
|
222
|
+
1: var(--base-size-4, 4px),
|
|
223
|
+
2: var(--base-size-8, 8px),
|
|
224
|
+
3: var(--base-size-16, 16px),
|
|
225
|
+
4: var(--base-size-24, 24px),
|
|
226
|
+
5: var(--base-size-32, 32px),
|
|
227
|
+
6: var(--base-size-40, 40px),
|
|
228
|
+
),
|
|
229
|
+
$spacers-large-rem,
|
|
209
230
|
) !default;
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
$border-width: 1px !default;
|
|
5
5
|
$border-style: solid !default;
|
|
6
6
|
$border: $border-width $border-style var(--color-border-default) !default;
|
|
7
|
+
$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
|
|
7
8
|
|
|
8
9
|
// Border Radius
|
|
9
10
|
$border-radius-1: 4px !default;
|
|
@@ -21,10 +21,10 @@ $h6-size: 12px !default;
|
|
|
21
21
|
$font-size-small: 12px !default;
|
|
22
22
|
|
|
23
23
|
// Font weights
|
|
24
|
-
$font-weight-bold: 600 !default;
|
|
25
|
-
$font-weight-semibold: 500 !default;
|
|
26
|
-
$font-weight-normal: 400 !default;
|
|
27
|
-
$font-weight-light: 300 !default;
|
|
24
|
+
$font-weight-bold: var(--base-text-weight-semibold, 600) !default;
|
|
25
|
+
$font-weight-semibold: var(--base-text-weight-medium, 500) !default;
|
|
26
|
+
$font-weight-normal: var(--base-text-weight-normal, 400) !default;
|
|
27
|
+
$font-weight-light: var(--base-text-weight-light, 300) !default;
|
|
28
28
|
|
|
29
29
|
// Line heights
|
|
30
30
|
$lh-condensed-ultra: 1 !default;
|
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
// css-truncate will shorten text with an ellipsis.
|
|
1
|
+
// https://raw.githubusercontent.com/primer/view_components/main/app/components/primer/truncate.pcss
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
/* CSS truncate */
|
|
4
|
+
|
|
5
|
+
/* css-truncate will shorten text with an ellipsis. */
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
.css-truncate {
|
|
8
|
+
/* css-truncate-overflow will shorten text with an ellipsis when overflowing */
|
|
8
9
|
&.css-truncate-overflow,
|
|
9
|
-
.css-truncate-overflow,
|
|
10
|
+
& .css-truncate-overflow,
|
|
10
11
|
&.css-truncate-target,
|
|
11
|
-
.css-truncate-target {
|
|
12
|
+
& .css-truncate-target {
|
|
12
13
|
overflow: hidden;
|
|
13
14
|
text-overflow: ellipsis;
|
|
14
15
|
white-space: nowrap;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
/* css-truncate-target will shorten text with an ellipsis and a max width */
|
|
18
19
|
&.css-truncate-target,
|
|
19
|
-
.css-truncate-target {
|
|
20
|
+
& .css-truncate-target {
|
|
20
21
|
display: inline-block;
|
|
21
22
|
max-width: 125px;
|
|
22
23
|
vertical-align: top;
|
|
@@ -30,20 +31,24 @@
|
|
|
30
31
|
}
|
|
31
32
|
}
|
|
32
33
|
|
|
34
|
+
// https://raw.githubusercontent.com/primer/view_components/main/app/components/primer/beta/truncate.pcss
|
|
35
|
+
|
|
36
|
+
// /* Truncate */
|
|
37
|
+
|
|
33
38
|
.Truncate {
|
|
34
39
|
display: inline-flex;
|
|
35
40
|
min-width: 0;
|
|
36
41
|
max-width: 100%;
|
|
37
42
|
|
|
38
|
-
> .Truncate-text {
|
|
43
|
+
& > .Truncate-text {
|
|
39
44
|
min-width: 1ch;
|
|
40
45
|
max-width: fit-content;
|
|
41
46
|
overflow: hidden;
|
|
42
47
|
text-overflow: ellipsis;
|
|
43
48
|
white-space: nowrap;
|
|
44
49
|
|
|
45
|
-
+ .Truncate-text {
|
|
46
|
-
margin-left:
|
|
50
|
+
& + .Truncate-text {
|
|
51
|
+
margin-left: var(--primer-control-small-gap, 4px);
|
|
47
52
|
}
|
|
48
53
|
|
|
49
54
|
&.Truncate-text--primary {
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
.border#{$variant}-left-0 { border-left: 0 !important; }
|
|
36
36
|
|
|
37
37
|
// Rounded corners
|
|
38
|
-
.rounded#{$variant} { border-radius: $border-radius !important; }
|
|
38
|
+
.rounded#{$variant} { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
|
|
39
39
|
.rounded#{$variant}-0 { border-radius: 0 !important; }
|
|
40
|
-
.rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
|
|
41
|
-
.rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
|
|
42
|
-
.rounded#{$variant}-3 { border-radius: $border-radius-3 !important; }
|
|
40
|
+
.rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
|
|
41
|
+
.rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
|
|
42
|
+
.rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
|
|
43
43
|
|
|
44
44
|
@each $edge, $corners in $edges {
|
|
45
45
|
.rounded#{$variant}-#{$edge}-0 {
|
|
@@ -50,19 +50,19 @@
|
|
|
50
50
|
|
|
51
51
|
.rounded#{$variant}-#{$edge}-1 {
|
|
52
52
|
@each $corner in $corners {
|
|
53
|
-
border-#{$corner}-radius: $border-radius-1 !important;
|
|
53
|
+
border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.rounded#{$variant}-#{$edge}-2 {
|
|
58
58
|
@each $corner in $corners {
|
|
59
|
-
border-#{$corner}-radius: $border-radius-2 !important;
|
|
59
|
+
border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.rounded#{$variant}-#{$edge}-3 {
|
|
64
64
|
@each $corner in $corners {
|
|
65
|
-
border-#{$corner}-radius: $border-radius-3 !important;
|
|
65
|
+
border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}
|
|
@@ -70,10 +70,9 @@
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
/* Add a 50% border-radius to make something into a circle */
|
|
73
|
-
.circle { border-radius: 50% !important; }
|
|
73
|
+
.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
|
|
74
74
|
|
|
75
75
|
/* Change the border style to dashed, in conjunction with another utility */
|
|
76
76
|
.border-dashed {
|
|
77
|
-
// stylelint-disable-next-line primer/borders
|
|
78
77
|
border-style: dashed !important;
|
|
79
78
|
}
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
@each $breakpoint, $variant in $responsive-variants {
|
|
12
12
|
@include breakpoint($breakpoint) {
|
|
13
13
|
// Loop through the spacer values
|
|
14
|
-
@each $scale, $size in $spacer-map-extended {
|
|
15
|
-
@if ($scale < length($spacer-map)) {
|
|
14
|
+
@each $scale, $size in $spacer-map-rem-extended {
|
|
15
|
+
@if ($scale < length($spacer-map-rem)) {
|
|
16
16
|
/* Set a $size margin to all sides at $breakpoint */
|
|
17
17
|
.m#{$variant}-#{$scale} { margin: $size !important; }
|
|
18
18
|
}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
/* Set a $size margin on the bottom at $breakpoint */
|
|
23
23
|
.mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
|
|
24
24
|
|
|
25
|
-
@if ($scale < length($spacer-map)) {
|
|
25
|
+
@if ($scale < length($spacer-map-rem)) {
|
|
26
26
|
/* Set a $size margin on the right at $breakpoint */
|
|
27
27
|
.mr#{$variant}-#{$scale} { margin-right: $size !important; }
|
|
28
28
|
/* Set a $size margin on the left at $breakpoint */
|
|
@@ -31,19 +31,19 @@
|
|
|
31
31
|
|
|
32
32
|
@if ($size != 0) {
|
|
33
33
|
/* Set a negative $size margin on top at $breakpoint */
|
|
34
|
-
.mt#{$variant}-n#{$scale} { margin-top:
|
|
34
|
+
.mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size) !important; }
|
|
35
35
|
/* Set a negative $size margin on the bottom at $breakpoint */
|
|
36
|
-
.mb#{$variant}-n#{$scale} { margin-bottom:
|
|
36
|
+
.mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size) !important; }
|
|
37
37
|
|
|
38
|
-
@if ($scale < length($spacer-map)) {
|
|
38
|
+
@if ($scale < length($spacer-map-rem)) {
|
|
39
39
|
/* Set a negative $size margin on the right at $breakpoint */
|
|
40
|
-
.mr#{$variant}-n#{$scale} { margin-right :
|
|
40
|
+
.mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size) !important; }
|
|
41
41
|
/* Set a negative $size margin on the left at $breakpoint */
|
|
42
|
-
.ml#{$variant}-n#{$scale} { margin-left :
|
|
42
|
+
.ml#{$variant}-n#{$scale} { margin-left : calc(-1 * $size) !important; }
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
@if ($scale < length($spacer-map)) {
|
|
46
|
+
@if ($scale < length($spacer-map-rem)) {
|
|
47
47
|
/* Set a $size margin on the left & right at $breakpoint */
|
|
48
48
|
.mx#{$variant}-#{$scale} {
|
|
49
49
|
margin-right: $size !important;
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
@each $breakpoint, $variant in $responsive-variants {
|
|
11
11
|
@include breakpoint($breakpoint) {
|
|
12
12
|
// Loop through the spacer values
|
|
13
|
-
@each $scale, $size in $spacer-map-extended {
|
|
14
|
-
@if ($scale < length($spacer-map)) {
|
|
13
|
+
@each $scale, $size in $spacer-map-rem-extended {
|
|
14
|
+
@if ($scale < length($spacer-map-rem)) {
|
|
15
15
|
/* Set a $size padding to all sides at $breakpoint */
|
|
16
16
|
.p#{$variant}-#{$scale} { padding: $size !important; }
|
|
17
17
|
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
/* Set a $size padding to the left at $breakpoint */
|
|
26
26
|
.pl#{$variant}-#{$scale} { padding-left: $size !important; }
|
|
27
27
|
|
|
28
|
-
@if ($scale < length($spacer-map)) {
|
|
28
|
+
@if ($scale < length($spacer-map-rem)) {
|
|
29
29
|
/* Set a $size padding to the left & right at $breakpoint */
|
|
30
30
|
.px#{$variant}-#{$scale} {
|
|
31
31
|
padding-right: $size !important;
|
|
@@ -44,16 +44,16 @@
|
|
|
44
44
|
|
|
45
45
|
// responsive padding for containers
|
|
46
46
|
.p-responsive {
|
|
47
|
-
padding-right: $spacer-3 !important;
|
|
48
|
-
padding-left: $spacer-3 !important;
|
|
47
|
+
padding-right: var(--base-size-16, $spacer-3) !important;
|
|
48
|
+
padding-left: var(--base-size-16, $spacer-3) !important;
|
|
49
49
|
|
|
50
50
|
@include breakpoint(sm) {
|
|
51
|
-
padding-right: $spacer-6 !important;
|
|
52
|
-
padding-left: $spacer-6 !important;
|
|
51
|
+
padding-right: var(--base-size-40, $spacer-6) !important;
|
|
52
|
+
padding-left: var(--base-size-40, $spacer-6) !important;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
@include breakpoint(lg) {
|
|
56
|
-
padding-right: $spacer-3 !important;
|
|
57
|
-
padding-left: $spacer-3 !important;
|
|
56
|
+
padding-right: var(--base-size-16, $spacer-3) !important;
|
|
57
|
+
padding-left: var(--base-size-16, $spacer-3) !important;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -20,40 +20,47 @@
|
|
|
20
20
|
|
|
21
21
|
/* Set the font size to 26px */
|
|
22
22
|
.h1 {
|
|
23
|
-
|
|
24
|
-
font-size: $h1-size-mobile !important;
|
|
23
|
+
font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
|
|
25
24
|
|
|
26
|
-
@include breakpoint(md) {
|
|
25
|
+
@include breakpoint(md) {
|
|
26
|
+
font-size: var(--h1-size, $h1-size) !important;
|
|
27
|
+
}
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
/* Set the font size to 22px */
|
|
30
31
|
.h2 {
|
|
31
|
-
|
|
32
|
-
font-size: $h2-size-mobile !important;
|
|
32
|
+
font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
|
|
33
33
|
|
|
34
|
-
@include breakpoint(md) {
|
|
34
|
+
@include breakpoint(md) {
|
|
35
|
+
font-size: var(--h2-size, $h2-size) !important;
|
|
36
|
+
}
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
/* Set the font size to 18px */
|
|
38
40
|
.h3 {
|
|
39
|
-
|
|
40
|
-
font-size: $h3-size-mobile !important;
|
|
41
|
+
font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
|
|
41
42
|
|
|
42
|
-
@include breakpoint(md) {
|
|
43
|
+
@include breakpoint(md) {
|
|
44
|
+
font-size: var(--h3-size, $h3-size) !important;
|
|
45
|
+
}
|
|
43
46
|
}
|
|
44
47
|
|
|
45
48
|
/* Set the font size to #{$h4-size} */
|
|
46
49
|
.h4 {
|
|
47
|
-
font-size: $h4-size !important;
|
|
50
|
+
font-size: var(--h4-size, $h4-size) !important;
|
|
48
51
|
}
|
|
49
52
|
|
|
50
53
|
/* Set the font size to #{$h5-size} */
|
|
51
|
-
.h5 {
|
|
54
|
+
.h5 {
|
|
55
|
+
font-size: var(--h5-size, $h5-size) !important;
|
|
56
|
+
}
|
|
52
57
|
|
|
53
58
|
// Does not include color property like typography base
|
|
54
59
|
// styles, color should be applied with color utilities.
|
|
55
60
|
/* Set the font size to #{$h6-size} */
|
|
56
|
-
.h6 {
|
|
61
|
+
.h6 {
|
|
62
|
+
font-size: var(--h6-size, $h6-size) !important;
|
|
63
|
+
}
|
|
57
64
|
|
|
58
65
|
// Heading utilities
|
|
59
66
|
.h1,
|
|
@@ -61,102 +68,123 @@
|
|
|
61
68
|
.h3,
|
|
62
69
|
.h4,
|
|
63
70
|
.h5,
|
|
64
|
-
.h6 {
|
|
71
|
+
.h6 {
|
|
72
|
+
font-weight: var(--base-text-weight-semibold, $font-weight-bold) !important;
|
|
73
|
+
}
|
|
65
74
|
|
|
66
75
|
// Type utilities that match type sale
|
|
67
76
|
/* Set the font size to 26px */
|
|
68
77
|
.f1 {
|
|
69
|
-
|
|
70
|
-
font-size: $h1-size-mobile !important;
|
|
78
|
+
font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
|
|
71
79
|
|
|
72
|
-
@include breakpoint(md) {
|
|
80
|
+
@include breakpoint(md) {
|
|
81
|
+
font-size: var(--h1-size, $h1-size) !important;
|
|
82
|
+
}
|
|
73
83
|
}
|
|
74
84
|
|
|
75
85
|
/* Set the font size to 22px */
|
|
76
86
|
.f2 {
|
|
77
|
-
|
|
78
|
-
font-size: $h2-size-mobile !important;
|
|
87
|
+
font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
|
|
79
88
|
|
|
80
|
-
@include breakpoint(md) {
|
|
89
|
+
@include breakpoint(md) {
|
|
90
|
+
font-size: var(--h2-size, $h2-size) !important;
|
|
91
|
+
}
|
|
81
92
|
}
|
|
82
93
|
|
|
83
94
|
/* Set the font size to 18px */
|
|
84
95
|
.f3 {
|
|
85
|
-
|
|
86
|
-
font-size: $h3-size-mobile !important;
|
|
96
|
+
font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
|
|
87
97
|
|
|
88
|
-
@include breakpoint(md) {
|
|
98
|
+
@include breakpoint(md) {
|
|
99
|
+
font-size: var(--h3-size, $h3-size) !important;
|
|
100
|
+
}
|
|
89
101
|
}
|
|
90
102
|
|
|
91
103
|
/* Set the font size to #{$h4-size} */
|
|
92
104
|
.f4 {
|
|
93
|
-
font-size: $h4-size !important;
|
|
105
|
+
font-size: var(--h4-size, $h4-size) !important;
|
|
94
106
|
|
|
95
|
-
@include breakpoint(md) {
|
|
107
|
+
@include breakpoint(md) {
|
|
108
|
+
font-size: var(--h4-size, $h4-size) !important;
|
|
109
|
+
}
|
|
96
110
|
}
|
|
97
111
|
|
|
98
112
|
/* Set the font size to #{$h5-size} */
|
|
99
|
-
.f5 {
|
|
113
|
+
.f5 {
|
|
114
|
+
font-size: var(--h5-size, $h5-size) !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
100
117
|
/* Set the font size to #{$h6-size} */
|
|
101
|
-
.f6 {
|
|
118
|
+
.f6 {
|
|
119
|
+
font-size: var(--h6-size, $h6-size) !important;
|
|
120
|
+
}
|
|
102
121
|
|
|
103
122
|
// Type utils with light weight that match type scale
|
|
104
123
|
/* Set the font size to 40px and weight to light */
|
|
105
124
|
.f00-light {
|
|
106
|
-
|
|
107
|
-
font-
|
|
108
|
-
font-weight: $font-weight-light !important;
|
|
125
|
+
font-size: var(--h00-size-mobile, $h00-size-mobile) !important;
|
|
126
|
+
font-weight: var(--base-text-weight-light, $font-weight-light) !important;
|
|
109
127
|
|
|
110
|
-
@include breakpoint(md) {
|
|
128
|
+
@include breakpoint(md) {
|
|
129
|
+
font-size: var(--h00-size, $h00-size) !important;
|
|
130
|
+
}
|
|
111
131
|
}
|
|
112
132
|
|
|
113
133
|
/* Set the font size to 32px and weight to light */
|
|
114
134
|
.f0-light {
|
|
115
|
-
|
|
116
|
-
font-
|
|
117
|
-
font-weight: $font-weight-light !important;
|
|
135
|
+
font-size: var(--h0-size-mobile, $h0-size-mobile) !important;
|
|
136
|
+
font-weight: var(--base-text-weight-light, $font-weight-light) !important;
|
|
118
137
|
|
|
119
|
-
@include breakpoint(md) {
|
|
138
|
+
@include breakpoint(md) {
|
|
139
|
+
font-size: var(--h0-size, $h0-size) !important;
|
|
140
|
+
}
|
|
120
141
|
}
|
|
121
142
|
|
|
122
143
|
/* Set the font size to 26px and weight to light */
|
|
123
144
|
.f1-light {
|
|
124
|
-
|
|
125
|
-
font-
|
|
126
|
-
font-weight: $font-weight-light !important;
|
|
145
|
+
font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
|
|
146
|
+
font-weight: var(--base-text-weight-light, $font-weight-light) !important;
|
|
127
147
|
|
|
128
|
-
@include breakpoint(md) {
|
|
148
|
+
@include breakpoint(md) {
|
|
149
|
+
font-size: var(--h1-size, $h1-size) !important;
|
|
150
|
+
}
|
|
129
151
|
}
|
|
130
152
|
|
|
131
153
|
/* Set the font size to 22px and weight to light */
|
|
132
154
|
.f2-light {
|
|
133
|
-
|
|
134
|
-
font-
|
|
135
|
-
font-weight: $font-weight-light !important;
|
|
155
|
+
font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
|
|
156
|
+
font-weight: var(--base-text-weight-light, $font-weight-light) !important;
|
|
136
157
|
|
|
137
|
-
@include breakpoint(md) {
|
|
158
|
+
@include breakpoint(md) {
|
|
159
|
+
font-size: var(--h2-size, $h2-size) !important;
|
|
160
|
+
}
|
|
138
161
|
}
|
|
139
162
|
|
|
140
163
|
// Same size and weight as .lead but without color property
|
|
141
164
|
/* Set the font size to 18px and weight to light */
|
|
142
165
|
.f3-light {
|
|
143
|
-
|
|
144
|
-
font-
|
|
145
|
-
font-weight: $font-weight-light !important;
|
|
166
|
+
font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
|
|
167
|
+
font-weight: var(--base-text-weight-light, $font-weight-light) !important;
|
|
146
168
|
|
|
147
|
-
@include breakpoint(md) {
|
|
169
|
+
@include breakpoint(md) {
|
|
170
|
+
font-size: var(--h3-size, $h3-size) !important;
|
|
171
|
+
}
|
|
148
172
|
}
|
|
149
173
|
|
|
150
174
|
// Smallest text size
|
|
151
175
|
/* Set the font size to ${#h6-size} */
|
|
152
|
-
.text-small {
|
|
176
|
+
.text-small {
|
|
177
|
+
font-size: var(--h6-size, $h6-size) !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// 12px
|
|
153
181
|
|
|
154
182
|
/* Large leading paragraphs */
|
|
155
183
|
.lead {
|
|
156
184
|
// stylelint-disable-next-line primer/spacing
|
|
157
185
|
margin-bottom: 30px;
|
|
158
|
-
font-size: $h3-size;
|
|
159
|
-
font-weight: $font-weight-light;
|
|
186
|
+
font-size: var(--h3-size, $h3-size);
|
|
187
|
+
font-weight: var(--base-text-weight-light, $font-weight-light);
|
|
160
188
|
}
|
|
161
189
|
|
|
162
190
|
// Line-height variations
|
|
@@ -166,14 +194,26 @@
|
|
|
166
194
|
// Responsive line-height
|
|
167
195
|
@each $breakpoint, $variant in $responsive-variants {
|
|
168
196
|
@include breakpoint($breakpoint) {
|
|
197
|
+
|
|
169
198
|
/* Set the line height to ultra condensed */
|
|
170
|
-
.lh#{$variant}-condensed-ultra {
|
|
199
|
+
.lh#{$variant}-condensed-ultra {
|
|
200
|
+
line-height: $lh-condensed-ultra !important;
|
|
201
|
+
}
|
|
202
|
+
|
|
171
203
|
/* Set the line height to condensed */
|
|
172
|
-
.lh#{$variant}-condensed {
|
|
204
|
+
.lh#{$variant}-condensed {
|
|
205
|
+
line-height: $lh-condensed !important;
|
|
206
|
+
}
|
|
207
|
+
|
|
173
208
|
/* Set the line height to default */
|
|
174
|
-
.lh#{$variant}-default {
|
|
209
|
+
.lh#{$variant}-default {
|
|
210
|
+
line-height: $lh-default !important;
|
|
211
|
+
}
|
|
212
|
+
|
|
175
213
|
/* Set the line height to zero */
|
|
176
|
-
.lh#{$variant}-0 {
|
|
214
|
+
.lh#{$variant}-0 {
|
|
215
|
+
line-height: 0 !important;
|
|
216
|
+
}
|
|
177
217
|
}
|
|
178
218
|
}
|
|
179
219
|
|
|
@@ -181,34 +221,72 @@
|
|
|
181
221
|
// Responsive text alignment
|
|
182
222
|
@each $breakpoint, $variant in $responsive-variants {
|
|
183
223
|
@include breakpoint($breakpoint) {
|
|
224
|
+
|
|
184
225
|
/* Text align to the right */
|
|
185
|
-
.text#{$variant}-right {
|
|
226
|
+
.text#{$variant}-right {
|
|
227
|
+
text-align: right !important;
|
|
228
|
+
}
|
|
229
|
+
|
|
186
230
|
/* Text align to the left */
|
|
187
|
-
.text#{$variant}-left {
|
|
231
|
+
.text#{$variant}-left {
|
|
232
|
+
text-align: left !important;
|
|
233
|
+
}
|
|
234
|
+
|
|
188
235
|
/* Text align to the center */
|
|
189
|
-
.text#{$variant}-center {
|
|
236
|
+
.text#{$variant}-center {
|
|
237
|
+
text-align: center !important;
|
|
238
|
+
}
|
|
190
239
|
}
|
|
191
240
|
}
|
|
192
241
|
|
|
193
242
|
// Text styles
|
|
194
243
|
/* Set the font weight to normal */
|
|
195
|
-
.text-normal {
|
|
244
|
+
.text-normal {
|
|
245
|
+
font-weight: $font-weight-normal !important;
|
|
246
|
+
}
|
|
247
|
+
|
|
196
248
|
/* Set the font weight to bold */
|
|
197
|
-
.text-bold {
|
|
198
|
-
|
|
199
|
-
|
|
249
|
+
.text-bold {
|
|
250
|
+
font-weight: $font-weight-bold !important;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.text-semibold {
|
|
254
|
+
font-weight: $font-weight-semibold !important;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.text-light {
|
|
258
|
+
font-weight: $font-weight-light !important;
|
|
259
|
+
}
|
|
260
|
+
|
|
200
261
|
/* Set the font to italic */
|
|
201
|
-
.text-italic {
|
|
262
|
+
.text-italic {
|
|
263
|
+
font-style: italic !important;
|
|
264
|
+
}
|
|
265
|
+
|
|
202
266
|
/* Make text uppercase */
|
|
203
|
-
.text-uppercase {
|
|
267
|
+
.text-uppercase {
|
|
268
|
+
text-transform: uppercase !important;
|
|
269
|
+
}
|
|
270
|
+
|
|
204
271
|
/* Underline text */
|
|
205
|
-
.text-underline {
|
|
272
|
+
.text-underline {
|
|
273
|
+
text-decoration: underline !important;
|
|
274
|
+
}
|
|
275
|
+
|
|
206
276
|
/* Don't underline text */
|
|
207
|
-
.no-underline {
|
|
277
|
+
.no-underline {
|
|
278
|
+
text-decoration: none !important;
|
|
279
|
+
}
|
|
280
|
+
|
|
208
281
|
/* Don't wrap white space */
|
|
209
|
-
.no-wrap {
|
|
282
|
+
.no-wrap {
|
|
283
|
+
white-space: nowrap !important;
|
|
284
|
+
}
|
|
285
|
+
|
|
210
286
|
/* Normal white space */
|
|
211
|
-
.ws-normal {
|
|
287
|
+
.ws-normal {
|
|
288
|
+
white-space: normal !important;
|
|
289
|
+
}
|
|
212
290
|
|
|
213
291
|
/* Force long "words" to wrap if they exceed the width of the container */
|
|
214
292
|
.wb-break-word {
|
|
@@ -228,14 +306,18 @@
|
|
|
228
306
|
*
|
|
229
307
|
* see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
|
|
230
308
|
*/
|
|
231
|
-
.wb-break-all {
|
|
309
|
+
.wb-break-all {
|
|
310
|
+
word-break: break-all !important;
|
|
311
|
+
}
|
|
232
312
|
|
|
233
313
|
.text-emphasized {
|
|
234
|
-
font-weight: $font-weight-bold;
|
|
314
|
+
font-weight: var(--base-text-weight-semibold, $font-weight-bold);
|
|
235
315
|
}
|
|
236
316
|
|
|
237
317
|
// List styles
|
|
238
|
-
.list-style-none {
|
|
318
|
+
.list-style-none {
|
|
319
|
+
list-style: none !important;
|
|
320
|
+
}
|
|
239
321
|
|
|
240
322
|
/* Set to monospace font */
|
|
241
323
|
.text-mono {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@papillonbits/css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.66.0",
|
|
4
4
|
"description": "Papillon Bits CSS",
|
|
5
5
|
"homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/css",
|
|
6
6
|
"repository": {
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"build-acceptance": "npm run build",
|
|
24
24
|
"build-release": "npm run build"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "3186eff1b8bba8d23ec961014b4e8b229e7f8b78"
|
|
27
27
|
}
|