@anydigital/bricks 0.26.0-alpha.2 → 0.27.0-alpha
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/assets/breakout.css +40 -95
- package/assets/bricks.css +65 -293
- package/assets/bricks.theme.css +23 -0
- package/package.json +3 -7
- package/postcss.config.js +3 -6
- package/src/{_base.css → _classless.css} +12 -5
- package/src/_tricks.css +12 -0
- package/src/breakout.css +95 -0
- package/src/bricks.css +6 -5
- package/src/bricks.theme.css +23 -0
- /package/src/{_prism.css → _refactor/_prism.css} +0 -0
- /package/src/{_prose.css → _refactor/_prose.css} +0 -0
- /package/src/{_util.css → _refactor/_util.css} +0 -0
package/assets/breakout.css
CHANGED
|
@@ -5,11 +5,18 @@
|
|
|
5
5
|
padding-inline: 10%;
|
|
6
6
|
max-width: calc(10% + 65ch + 10%);
|
|
7
7
|
|
|
8
|
-
/*
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
/* Breakout direct children only */
|
|
9
|
+
& > * {
|
|
10
|
+
&:is(
|
|
11
|
+
table,
|
|
12
|
+
pre,
|
|
13
|
+
figure, video, iframe, canvas,
|
|
14
|
+
/* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
|
|
15
|
+
p > img, p > picture,
|
|
16
|
+
/* Custom utility classes for other tags that need to be broken out */
|
|
17
|
+
.breakout-item,
|
|
18
|
+
.breakout-item-max
|
|
19
|
+
) {
|
|
13
20
|
width: fit-content;
|
|
14
21
|
min-width: 100%;
|
|
15
22
|
max-width: 125%;
|
|
@@ -17,19 +24,14 @@
|
|
|
17
24
|
transform: translateX(-50%);
|
|
18
25
|
}
|
|
19
26
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
/* Respect inline blocks' min-width */
|
|
23
|
-
|
|
24
|
-
.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist) {
|
|
27
|
+
/* Respect img/picture min-width */
|
|
28
|
+
&:is(p > img, p > picture) {
|
|
25
29
|
min-width: auto;
|
|
26
30
|
}
|
|
27
31
|
|
|
28
|
-
/* Tables are so special :( */
|
|
29
|
-
|
|
30
|
-
.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
|
|
32
|
+
/* Tables are so special :( */
|
|
33
|
+
&:is(table) {
|
|
31
34
|
/* Let them full-bleed */
|
|
32
|
-
width: -moz-max-content;
|
|
33
35
|
width: max-content;
|
|
34
36
|
min-width: auto;
|
|
35
37
|
max-width: 100vw;
|
|
@@ -41,110 +43,53 @@
|
|
|
41
43
|
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
42
44
|
}
|
|
43
45
|
|
|
44
|
-
/* Max out the width of the element */
|
|
45
|
-
|
|
46
|
-
.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
|
|
46
|
+
/* Max out the width of the element */
|
|
47
|
+
&.breakout-item-max {
|
|
47
48
|
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
48
49
|
}
|
|
49
|
-
|
|
50
|
-
.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
|
|
51
|
-
position: relative;
|
|
52
50
|
}
|
|
51
|
+
}
|
|
53
52
|
|
|
54
|
-
.breakout-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
position: absolute;
|
|
58
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.breakout-headings h3:not([class])::before {
|
|
62
|
-
content: "";
|
|
63
|
-
display: block;
|
|
64
|
-
position: absolute;
|
|
65
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.breakout-headings h4:not([class])::before {
|
|
69
|
-
content: "";
|
|
70
|
-
display: block;
|
|
71
|
-
position: absolute;
|
|
72
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
73
|
-
}
|
|
53
|
+
.breakout-all > * {
|
|
54
|
+
&:is(h2, h3, h4, hr):not([class]) {
|
|
55
|
+
position: relative;
|
|
74
56
|
|
|
75
|
-
|
|
57
|
+
&::before {
|
|
76
58
|
content: "";
|
|
77
59
|
display: block;
|
|
78
60
|
position: absolute;
|
|
79
|
-
background
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
.breakout-headings h2:not([class])::before {
|
|
83
|
-
width: 10em;
|
|
84
|
-
right: 100%;
|
|
85
|
-
margin-right: 1rem;
|
|
86
|
-
height: 0.3em;
|
|
87
|
-
top: 50%;
|
|
88
|
-
transform: translateY(-50%);
|
|
89
|
-
background: linear-gradient(
|
|
90
|
-
to left,
|
|
91
|
-
rgba(0, 0, 0, 10%),
|
|
92
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
93
|
-
transparent
|
|
94
|
-
);
|
|
61
|
+
background: lightgray;
|
|
62
|
+
opacity: 50%;
|
|
95
63
|
}
|
|
64
|
+
}
|
|
96
65
|
|
|
97
|
-
|
|
66
|
+
&:is(h2, h3, h4):not([class]) {
|
|
67
|
+
&::before {
|
|
98
68
|
width: 10em;
|
|
99
69
|
right: 100%;
|
|
100
70
|
margin-right: 1rem;
|
|
101
|
-
height: 0.
|
|
71
|
+
height: 0.25em;
|
|
102
72
|
top: 50%;
|
|
103
73
|
transform: translateY(-50%);
|
|
104
|
-
background: linear-gradient(
|
|
105
|
-
to left,
|
|
106
|
-
rgba(0, 0, 0, 10%),
|
|
107
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
108
|
-
transparent
|
|
109
|
-
);
|
|
74
|
+
background: linear-gradient(to left, lightgray, gainsboro 10%, transparent);
|
|
110
75
|
}
|
|
111
76
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
height: 0.3em;
|
|
117
|
-
top: 50%;
|
|
118
|
-
transform: translateY(-50%);
|
|
119
|
-
background: linear-gradient(
|
|
120
|
-
to left,
|
|
121
|
-
rgba(0, 0, 0, 10%),
|
|
122
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
123
|
-
transparent
|
|
124
|
-
);
|
|
77
|
+
&:where(hr + &) {
|
|
78
|
+
&::before {
|
|
79
|
+
display: none !important;
|
|
80
|
+
}
|
|
125
81
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
height: 0.
|
|
82
|
+
}
|
|
83
|
+
&:is(hr) {
|
|
84
|
+
height: 0.5rem;
|
|
129
85
|
border: none;
|
|
130
86
|
overflow: visible;
|
|
131
|
-
}
|
|
132
87
|
|
|
133
|
-
|
|
88
|
+
&::before {
|
|
134
89
|
width: 100vw;
|
|
135
90
|
left: 50%;
|
|
136
91
|
height: 100%;
|
|
137
92
|
transform: translateX(-50%);
|
|
138
93
|
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
display: none !important;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.breakout-headings hr + h3::before {
|
|
145
|
-
display: none !important;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.breakout-headings hr + h4::before {
|
|
149
|
-
display: none !important;
|
|
150
|
-
}
|
|
94
|
+
}
|
|
95
|
+
}
|
package/assets/bricks.css
CHANGED
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
* Framework-agnostic CSS utility helpers
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
html,
|
|
9
|
-
body {
|
|
6
|
+
html {
|
|
7
|
+
/* Prevent horizontal overflow and scrolling, modern way */
|
|
10
8
|
overflow-x: clip;
|
|
9
|
+
|
|
10
|
+
/* Font smoothing */
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
12
|
+
-moz-osx-font-smoothing: grayscale;
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
body {
|
|
@@ -17,181 +19,25 @@ body {
|
|
|
17
19
|
/* Make the body a flex container with column layout; main fills space */
|
|
18
20
|
display: flex;
|
|
19
21
|
flex-direction: column;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
body > main {
|
|
22
|
+
> main {
|
|
23
23
|
flex-grow: 1;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
-webkit-font-smoothing: antialiased;
|
|
29
|
-
-moz-osx-font-smoothing: grayscale;
|
|
26
|
+
/* Hyphenation */
|
|
30
27
|
hyphens: auto;
|
|
31
28
|
/* Links and tables are better (safer) without hyphenation */
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
body a,body table {
|
|
29
|
+
a,
|
|
30
|
+
table {
|
|
35
31
|
hyphens: none;
|
|
36
32
|
}
|
|
37
|
-
|
|
38
|
-
.prose {
|
|
39
|
-
/* Container-like behavior with auto margins */
|
|
40
|
-
width: 100%;
|
|
41
|
-
margin-inline: auto;
|
|
42
|
-
|
|
43
|
-
/* Helper for multi-line subtitles */
|
|
44
33
|
}
|
|
45
34
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
font-weight: 300;
|
|
51
|
-
/* Workaround to prevent underline inside links */
|
|
52
|
-
display: inline-block;
|
|
53
|
-
width: 100%;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.prose a {
|
|
57
|
-
text-underline-offset: 0.1em;
|
|
58
|
-
text-decoration-thickness: 1px;
|
|
59
|
-
/* Don't underline links that point to anchors */
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.prose a[href^="#"] {
|
|
63
|
-
text-decoration: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.prose a:hover {
|
|
67
|
-
text-decoration-thickness: 2px;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* Helper to insert icons in links */
|
|
71
|
-
|
|
72
|
-
.prose a i {
|
|
73
|
-
height: 1em;
|
|
74
|
-
margin-right: 0.25em;
|
|
75
|
-
font-style: normal;
|
|
76
|
-
/* Workaround to prevent underline */
|
|
77
|
-
display: inline-block;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.prose a i img {
|
|
81
|
-
height: 100%;
|
|
82
|
-
margin: 0;
|
|
83
|
-
position: relative;
|
|
84
|
-
bottom: -0.15em;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.prose img:not(:where(.prose > img,.prose > p > img)) {
|
|
88
|
-
margin-top: 0;
|
|
89
|
-
margin-bottom: 1em;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/* Support for markdown anchors */
|
|
93
|
-
|
|
94
|
-
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
|
|
95
|
-
position: relative;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.prose h1 .header-anchor,.prose h2 .header-anchor,.prose h3 .header-anchor,.prose h4 .header-anchor,.prose h5 .header-anchor,.prose h6 .header-anchor {
|
|
99
|
-
display: none;
|
|
100
|
-
position: absolute;
|
|
101
|
-
right: 100%;
|
|
102
|
-
top: 0;
|
|
103
|
-
padding-right: 0.2ch;
|
|
104
|
-
color: rgba(0, 0, 0, 0.25);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.prose h1:hover .header-anchor,.prose h2:hover .header-anchor,.prose h3:hover .header-anchor,.prose h4:hover .header-anchor,.prose h5:hover .header-anchor,.prose h6:hover .header-anchor {
|
|
108
|
-
display: block;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
/* Support for `breakout-css` headings */
|
|
112
|
-
|
|
113
|
-
.prose h1:hover::before {
|
|
114
|
-
margin-right: 1.5ch !important;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.prose h2:hover::before {
|
|
118
|
-
margin-right: 1.5ch !important;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.prose h3:hover::before {
|
|
122
|
-
margin-right: 1.5ch !important;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.prose h4:hover::before {
|
|
126
|
-
margin-right: 1.5ch !important;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.prose h5:hover::before {
|
|
130
|
-
margin-right: 1.5ch !important;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.prose h6:hover::before {
|
|
134
|
-
margin-right: 1.5ch !important;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.prose h1 {
|
|
138
|
-
margin-bottom: 0.5em !important;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.prose h1 sub {
|
|
142
|
-
font-size: 50%;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.prose th,.prose td {
|
|
146
|
-
/* Keep extra space on the right for better horizontal scroll on mobile */
|
|
147
|
-
padding: 1rem 2rem 1rem 0;
|
|
148
|
-
vertical-align: top;
|
|
149
|
-
/* Workaround to widen particular columns */
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.prose th hr,.prose td hr {
|
|
153
|
-
width: 12ch;
|
|
154
|
-
height: 0;
|
|
155
|
-
margin: 0;
|
|
156
|
-
visibility: hidden;
|
|
157
|
-
/* &.ch16 {
|
|
158
|
-
width: 16ch;
|
|
159
|
-
} */
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
/* Workaround for headings in Markdown tables */
|
|
163
|
-
|
|
164
|
-
.prose th big,.prose td big {
|
|
165
|
-
font-weight: bold;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
.prose th {
|
|
169
|
-
vertical-align: bottom;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.prose blockquote {
|
|
173
|
-
font-weight: 300;
|
|
174
|
-
}
|
|
35
|
+
pre {
|
|
36
|
+
padding: 1rem 1.5rem;
|
|
37
|
+
padding-inline-end: 2rem;
|
|
38
|
+
}
|
|
175
39
|
|
|
176
|
-
|
|
177
|
-
margin-top: -1em;
|
|
178
|
-
text-align: right;
|
|
179
|
-
font-style: italic;
|
|
180
|
-
font-weight: 300;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.prose blockquote + figcaption::before {
|
|
184
|
-
content: "—";
|
|
185
|
-
margin-right: 0.25em;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.prose code[data-caption]::before {
|
|
189
|
-
content: attr(data-caption);
|
|
190
|
-
display: block;
|
|
191
|
-
margin-bottom: 1.5em;
|
|
192
|
-
opacity: 0.5;
|
|
193
|
-
font-style: italic;
|
|
194
|
-
}
|
|
40
|
+
/* @import "./_prose"; */
|
|
195
41
|
|
|
196
42
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
197
43
|
|
|
@@ -200,11 +46,18 @@ body a,body table {
|
|
|
200
46
|
padding-inline: 10%;
|
|
201
47
|
max-width: calc(10% + 65ch + 10%);
|
|
202
48
|
|
|
203
|
-
/*
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
49
|
+
/* Breakout direct children only */
|
|
50
|
+
& > * {
|
|
51
|
+
&:is(
|
|
52
|
+
table,
|
|
53
|
+
pre,
|
|
54
|
+
figure, video, iframe, canvas,
|
|
55
|
+
/* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
|
|
56
|
+
p > img, p > picture,
|
|
57
|
+
/* Custom utility classes for other tags that need to be broken out */
|
|
58
|
+
.breakout-item,
|
|
59
|
+
.breakout-item-max
|
|
60
|
+
) {
|
|
208
61
|
width: fit-content;
|
|
209
62
|
min-width: 100%;
|
|
210
63
|
max-width: 125%;
|
|
@@ -212,19 +65,14 @@ body a,body table {
|
|
|
212
65
|
transform: translateX(-50%);
|
|
213
66
|
}
|
|
214
67
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
/* Respect inline blocks' min-width */
|
|
218
|
-
|
|
219
|
-
.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist) {
|
|
68
|
+
/* Respect img/picture min-width */
|
|
69
|
+
&:is(p > img, p > picture) {
|
|
220
70
|
min-width: auto;
|
|
221
71
|
}
|
|
222
72
|
|
|
223
|
-
/* Tables are so special :( */
|
|
224
|
-
|
|
225
|
-
.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
|
|
73
|
+
/* Tables are so special :( */
|
|
74
|
+
&:is(table) {
|
|
226
75
|
/* Let them full-bleed */
|
|
227
|
-
width: -moz-max-content;
|
|
228
76
|
width: max-content;
|
|
229
77
|
min-width: auto;
|
|
230
78
|
max-width: 100vw;
|
|
@@ -236,147 +84,71 @@ body a,body table {
|
|
|
236
84
|
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
237
85
|
}
|
|
238
86
|
|
|
239
|
-
/* Max out the width of the element */
|
|
240
|
-
|
|
241
|
-
.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
|
|
87
|
+
/* Max out the width of the element */
|
|
88
|
+
&.breakout-item-max {
|
|
242
89
|
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
243
90
|
}
|
|
244
|
-
|
|
245
|
-
.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
|
|
246
|
-
position: relative;
|
|
247
91
|
}
|
|
92
|
+
}
|
|
248
93
|
|
|
249
|
-
.breakout-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
position: absolute;
|
|
253
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.breakout-headings h3:not([class])::before {
|
|
257
|
-
content: "";
|
|
258
|
-
display: block;
|
|
259
|
-
position: absolute;
|
|
260
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.breakout-headings h4:not([class])::before {
|
|
264
|
-
content: "";
|
|
265
|
-
display: block;
|
|
266
|
-
position: absolute;
|
|
267
|
-
background-color: rgba(0, 0, 0, 5%);
|
|
268
|
-
}
|
|
94
|
+
.breakout-all > * {
|
|
95
|
+
&:is(h2, h3, h4, hr):not([class]) {
|
|
96
|
+
position: relative;
|
|
269
97
|
|
|
270
|
-
|
|
98
|
+
&::before {
|
|
271
99
|
content: "";
|
|
272
100
|
display: block;
|
|
273
101
|
position: absolute;
|
|
274
|
-
background
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
.breakout-headings h2:not([class])::before {
|
|
278
|
-
width: 10em;
|
|
279
|
-
right: 100%;
|
|
280
|
-
margin-right: 1rem;
|
|
281
|
-
height: 0.3em;
|
|
282
|
-
top: 50%;
|
|
283
|
-
transform: translateY(-50%);
|
|
284
|
-
background: linear-gradient(
|
|
285
|
-
to left,
|
|
286
|
-
rgba(0, 0, 0, 10%),
|
|
287
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
288
|
-
transparent
|
|
289
|
-
);
|
|
102
|
+
background: lightgray;
|
|
103
|
+
opacity: 50%;
|
|
290
104
|
}
|
|
105
|
+
}
|
|
291
106
|
|
|
292
|
-
|
|
107
|
+
&:is(h2, h3, h4):not([class]) {
|
|
108
|
+
&::before {
|
|
293
109
|
width: 10em;
|
|
294
110
|
right: 100%;
|
|
295
111
|
margin-right: 1rem;
|
|
296
|
-
height: 0.
|
|
112
|
+
height: 0.25em;
|
|
297
113
|
top: 50%;
|
|
298
114
|
transform: translateY(-50%);
|
|
299
|
-
background: linear-gradient(
|
|
300
|
-
to left,
|
|
301
|
-
rgba(0, 0, 0, 10%),
|
|
302
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
303
|
-
transparent
|
|
304
|
-
);
|
|
115
|
+
background: linear-gradient(to left, lightgray, gainsboro 10%, transparent);
|
|
305
116
|
}
|
|
306
117
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
height: 0.3em;
|
|
312
|
-
top: 50%;
|
|
313
|
-
transform: translateY(-50%);
|
|
314
|
-
background: linear-gradient(
|
|
315
|
-
to left,
|
|
316
|
-
rgba(0, 0, 0, 10%),
|
|
317
|
-
rgba(0, 0, 0, 5%) 10%,
|
|
318
|
-
transparent
|
|
319
|
-
);
|
|
118
|
+
&:where(hr + &) {
|
|
119
|
+
&::before {
|
|
120
|
+
display: none !important;
|
|
121
|
+
}
|
|
320
122
|
}
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
height: 0.
|
|
123
|
+
}
|
|
124
|
+
&:is(hr) {
|
|
125
|
+
height: 0.5rem;
|
|
324
126
|
border: none;
|
|
325
127
|
overflow: visible;
|
|
326
|
-
}
|
|
327
128
|
|
|
328
|
-
|
|
129
|
+
&::before {
|
|
329
130
|
width: 100vw;
|
|
330
131
|
left: 50%;
|
|
331
132
|
height: 100%;
|
|
332
133
|
transform: translateX(-50%);
|
|
333
134
|
}
|
|
334
|
-
|
|
335
|
-
.breakout-headings hr + h2::before {
|
|
336
|
-
display: none !important;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
.breakout-headings hr + h3::before {
|
|
340
|
-
display: none !important;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.breakout-headings hr + h4::before {
|
|
344
|
-
display: none !important;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
/* after prose to override it */
|
|
348
|
-
|
|
349
|
-
/* Prism.js */
|
|
350
|
-
|
|
351
|
-
.token.treeview-part .entry-line {
|
|
352
|
-
width: 2.5em !important;
|
|
353
|
-
opacity: 25%;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
.token.treeview-part .entry-name:last-child {
|
|
357
|
-
opacity: 50%;
|
|
358
135
|
}
|
|
136
|
+
}
|
|
359
137
|
|
|
360
|
-
|
|
361
|
-
display: none !important;
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
/* Utility classes and fixes */
|
|
138
|
+
/* @import "./_prism"; */
|
|
365
139
|
|
|
366
|
-
/*
|
|
140
|
+
/* @import "./_util"; */
|
|
367
141
|
|
|
368
|
-
.
|
|
369
|
-
|
|
142
|
+
table.borderless {
|
|
143
|
+
td {
|
|
144
|
+
border: none;
|
|
370
145
|
}
|
|
146
|
+
}
|
|
371
147
|
|
|
372
|
-
/*
|
|
148
|
+
/* Favicons in links @TODO: add to tricks-wiki */
|
|
373
149
|
|
|
374
|
-
a
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
150
|
+
a > i > img {
|
|
151
|
+
max-height: 1.25em;
|
|
152
|
+
margin-top: calc(-0.25em / 2);
|
|
153
|
+
margin-inline-end: 0.25em;
|
|
378
154
|
}
|
|
379
|
-
|
|
380
|
-
a.whitespace-nowrap span {
|
|
381
|
-
white-space: normal;
|
|
382
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/bricks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0-alpha",
|
|
4
4
|
"description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
|
|
5
5
|
"style": "./src/bricks.css",
|
|
6
6
|
"exports": {
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
"./dist": "./dist/bricks.css"
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
|
-
"postcss": "postcss src
|
|
12
|
-
"build": "npm run postcss -- --no-map
|
|
11
|
+
"postcss": "postcss './src/!(_)*.css' --dir ./assets",
|
|
12
|
+
"build": "npm run postcss -- --no-map",
|
|
13
13
|
"start": "npm run postcss -- --watch",
|
|
14
14
|
"prepublishOnly": "npm run build"
|
|
15
15
|
},
|
|
@@ -30,10 +30,6 @@
|
|
|
30
30
|
"postcss": "^8.4.33",
|
|
31
31
|
"postcss-cli": "^11.0.0",
|
|
32
32
|
"postcss-import": "^16.1.1",
|
|
33
|
-
"postcss-preset-env": "^10.6.0",
|
|
34
33
|
"prettier-plugin-jinja-template": "^2.1.0"
|
|
35
|
-
},
|
|
36
|
-
"dependencies": {
|
|
37
|
-
"@anydigital/breakout-css": "^0.11.1"
|
|
38
34
|
}
|
|
39
35
|
}
|
package/postcss.config.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
body {
|
|
1
|
+
html {
|
|
2
|
+
/* Prevent horizontal overflow and scrolling, modern way */
|
|
4
3
|
overflow-x: clip;
|
|
4
|
+
|
|
5
|
+
/* Font smoothing */
|
|
6
|
+
-webkit-font-smoothing: antialiased;
|
|
7
|
+
-moz-osx-font-smoothing: grayscale;
|
|
5
8
|
}
|
|
6
9
|
|
|
7
10
|
body {
|
|
@@ -15,8 +18,7 @@ body {
|
|
|
15
18
|
flex-grow: 1;
|
|
16
19
|
}
|
|
17
20
|
|
|
18
|
-
|
|
19
|
-
-moz-osx-font-smoothing: grayscale;
|
|
21
|
+
/* Hyphenation */
|
|
20
22
|
hyphens: auto;
|
|
21
23
|
/* Links and tables are better (safer) without hyphenation */
|
|
22
24
|
a,
|
|
@@ -24,3 +26,8 @@ body {
|
|
|
24
26
|
hyphens: none;
|
|
25
27
|
}
|
|
26
28
|
}
|
|
29
|
+
|
|
30
|
+
pre {
|
|
31
|
+
padding: 1rem 1.5rem;
|
|
32
|
+
padding-inline-end: 2rem;
|
|
33
|
+
}
|
package/src/_tricks.css
ADDED
package/src/breakout.css
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
|
+
|
|
3
|
+
.breakout {
|
|
4
|
+
/* Prepare the container for breakout elements */
|
|
5
|
+
padding-inline: 10%;
|
|
6
|
+
max-width: calc(10% + 65ch + 10%);
|
|
7
|
+
|
|
8
|
+
/* Breakout direct children only */
|
|
9
|
+
& > * {
|
|
10
|
+
&:is(
|
|
11
|
+
table,
|
|
12
|
+
pre,
|
|
13
|
+
figure, video, iframe, canvas,
|
|
14
|
+
/* Only breakout img/picture wrapped in <p> to avoid breaking badges, etc. */
|
|
15
|
+
p > img, p > picture,
|
|
16
|
+
/* Custom utility classes for other tags that need to be broken out */
|
|
17
|
+
.breakout-item,
|
|
18
|
+
.breakout-item-max
|
|
19
|
+
) {
|
|
20
|
+
width: fit-content;
|
|
21
|
+
min-width: 100%;
|
|
22
|
+
max-width: 125%;
|
|
23
|
+
margin-left: 50%;
|
|
24
|
+
transform: translateX(-50%);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Respect img/picture min-width */
|
|
28
|
+
&:is(p > img, p > picture) {
|
|
29
|
+
min-width: auto;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Tables are so special :( */
|
|
33
|
+
&:is(table) {
|
|
34
|
+
/* Let them full-bleed */
|
|
35
|
+
width: max-content;
|
|
36
|
+
min-width: auto;
|
|
37
|
+
max-width: 100vw;
|
|
38
|
+
padding-inline: 7.5%;
|
|
39
|
+
|
|
40
|
+
/* Let them scroll */
|
|
41
|
+
display: block;
|
|
42
|
+
overflow-x: auto;
|
|
43
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Max out the width of the element */
|
|
47
|
+
&.breakout-item-max {
|
|
48
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.breakout-all > * {
|
|
54
|
+
&:is(h2, h3, h4, hr):not([class]) {
|
|
55
|
+
position: relative;
|
|
56
|
+
|
|
57
|
+
&::before {
|
|
58
|
+
content: "";
|
|
59
|
+
display: block;
|
|
60
|
+
position: absolute;
|
|
61
|
+
background: lightgray;
|
|
62
|
+
opacity: 50%;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:is(h2, h3, h4):not([class]) {
|
|
67
|
+
&::before {
|
|
68
|
+
width: 10em;
|
|
69
|
+
right: 100%;
|
|
70
|
+
margin-right: 1rem;
|
|
71
|
+
height: 0.25em;
|
|
72
|
+
top: 50%;
|
|
73
|
+
transform: translateY(-50%);
|
|
74
|
+
background: linear-gradient(to left, lightgray, gainsboro 10%, transparent);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&:where(hr + &) {
|
|
78
|
+
&::before {
|
|
79
|
+
display: none !important;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
&:is(hr) {
|
|
84
|
+
height: 0.5rem;
|
|
85
|
+
border: none;
|
|
86
|
+
overflow: visible;
|
|
87
|
+
|
|
88
|
+
&::before {
|
|
89
|
+
width: 100vw;
|
|
90
|
+
left: 50%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
transform: translateX(-50%);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
package/src/bricks.css
CHANGED
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
* Framework-agnostic CSS utility helpers
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
@import "./
|
|
7
|
-
@import "./_prose";
|
|
8
|
-
@import "
|
|
9
|
-
@import "./_prism";
|
|
10
|
-
@import "./_util";
|
|
6
|
+
@import "./_classless";
|
|
7
|
+
/* @import "./_prose"; */
|
|
8
|
+
@import "./breakout";
|
|
9
|
+
/* @import "./_prism"; */
|
|
10
|
+
/* @import "./_util"; */
|
|
11
|
+
@import "./_tricks";
|
|
File without changes
|
|
File without changes
|
|
File without changes
|