@apolitical/component-library 10.4.8 → 10.4.10
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/index.js +48 -48
- package/index.mjs +3852 -3852
- package/package.json +6 -2
- package/style.css +1 -1
- package/styles/base/_overlays.scss +0 -4
- package/styles/base/form/_fields.scss +9 -0
- package/styles/build.scss +9 -0
- package/styles/components-legacy.scss +9291 -0
- package/styles/index.scss +2 -1
- package/styles/overrides/misc.scss +23 -0
- package/styles/overrides/navigator-theme.scss +48 -0
- package/styles/overrides-legacy.scss +622 -0
- package/styles/uclasses/README.md +1 -1
package/styles/index.scss
CHANGED
|
@@ -2,4 +2,5 @@
|
|
|
2
2
|
@layer splash, tailwindreset, reset, base, elements, components, pages, overrides;
|
|
3
3
|
|
|
4
4
|
// noinspection Stylelint
|
|
5
|
-
@import 'functions', 'variables', 'mixins', 'reset', 'base'
|
|
5
|
+
@import 'functions', 'variables', 'mixins', 'reset', 'base', 'components-legacy',
|
|
6
|
+
'overrides-legacy';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// Deliberately unlayered (not wrapped in an `@layer` block) — see
|
|
2
|
+
// `navigator-theme.scss` in this folder for why. Both rules below exist only
|
|
3
|
+
// in the compiled `global.css` output today, with no `.scss` source anywhere
|
|
4
|
+
// in the repo; ported here so they survive the next `build:uclasses` run.
|
|
5
|
+
|
|
6
|
+
#content-wrapper:has(.no-content-padding) {
|
|
7
|
+
padding-bottom: 0 !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// AI-399: the legacy `.v1styles` reset (in @layer base) hardcodes
|
|
11
|
+
// `text-align: left` on tables, breaking RTL pages (e.g. Arabic). `start`
|
|
12
|
+
// makes table text follow the inherited direction. Unlayered so it beats
|
|
13
|
+
// @layer base.
|
|
14
|
+
.v1styles table,
|
|
15
|
+
.v1styles table p,
|
|
16
|
+
.v1styles table li {
|
|
17
|
+
text-align: start;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.v1styles .table .table-header-cell {
|
|
21
|
+
background: var(--nue-white-1, #f0f0f3);
|
|
22
|
+
color: #111827;
|
|
23
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// Deliberately unlayered (not wrapped in an `@layer` block), matching
|
|
2
|
+
// `uclasses.scss` — these need to beat the `base`/`components` layers
|
|
3
|
+
// regardless of specificity, the same reason uclasses' utility classes are
|
|
4
|
+
// unlayered.
|
|
5
|
+
// This file exists because `build:uclasses` (`uclasses.sh`) referenced a
|
|
6
|
+
// path that no longer existed after the frontend->services folder migration,
|
|
7
|
+
// so it silently stopped running. In the meantime these rules were hand-added
|
|
8
|
+
// directly to the compiled `global.css` output instead of to any `.scss`
|
|
9
|
+
// source. Ported here so they survive the next `build:uclasses` run.
|
|
10
|
+
|
|
11
|
+
// Navigator: the legacy `.el-box` / `.el-button` primitives bake in brand/grey
|
|
12
|
+
// colours and don't consume the runtime theme tokens, so they ignore
|
|
13
|
+
// `[data-theme="navigator"]`. These overrides make them token-driven inside
|
|
14
|
+
// the navigator section. Only LoginWall uses these primitives inside
|
|
15
|
+
// navigator today. (Originally added in #9718.)
|
|
16
|
+
[data-theme='navigator'] .el-box-default {
|
|
17
|
+
background-color: hsl(var(--card));
|
|
18
|
+
border-color: hsl(var(--border));
|
|
19
|
+
color: hsl(var(--foreground));
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
[data-theme='navigator'] .el-button.primary {
|
|
23
|
+
background: hsl(var(--primary));
|
|
24
|
+
border-color: hsl(var(--primary));
|
|
25
|
+
color: hsl(var(--primary-foreground));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
[data-theme='navigator'] .el-button.primary:hover {
|
|
29
|
+
background: hsl(var(--button-primary-hover));
|
|
30
|
+
border-color: hsl(var(--button-primary-hover));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[data-theme='navigator'] .el-button.secondary {
|
|
34
|
+
background: hsl(var(--secondary));
|
|
35
|
+
border-color: hsl(var(--primary));
|
|
36
|
+
color: hsl(var(--secondary-foreground));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='navigator'] .el-button.secondary:hover {
|
|
40
|
+
background: hsl(var(--muted));
|
|
41
|
+
color: hsl(var(--secondary-foreground));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Navigator: the legacy loading spinner bakes in a brand colour rather than
|
|
45
|
+
// consuming the runtime theme tokens. (Originally added in #9864.)
|
|
46
|
+
[data-theme='navigator'] .spinner {
|
|
47
|
+
border-top-color: hsl(var(--primary));
|
|
48
|
+
}
|
|
@@ -0,0 +1,622 @@
|
|
|
1
|
+
/* stylelint-disable */
|
|
2
|
+
// Verbatim extraction of the `overrides` layer from
|
|
3
|
+
// `@apolitical/component-library@10.4.9`'s compiled `style.css`. See
|
|
4
|
+
// `components-legacy.scss` for why this is a faithful copy rather than a
|
|
5
|
+
// hand-curated subset.
|
|
6
|
+
@layer overrides {
|
|
7
|
+
.v1styles .url{
|
|
8
|
+
font-weight:900}
|
|
9
|
+
.tooltip{
|
|
10
|
+
width:11.25rem;
|
|
11
|
+
background:rgba(21,25,33,.9);
|
|
12
|
+
position:absolute;
|
|
13
|
+
margin-top:.5rem;
|
|
14
|
+
padding:.5rem .75rem;
|
|
15
|
+
color:#fff;
|
|
16
|
+
box-sizing:border-box;
|
|
17
|
+
border-radius:.5rem;
|
|
18
|
+
display:block;
|
|
19
|
+
z-index:1500;
|
|
20
|
+
opacity:0;
|
|
21
|
+
cursor:default}
|
|
22
|
+
@media (prefers-reduced-motion: no-preference){
|
|
23
|
+
.tooltip{
|
|
24
|
+
transition:opacity .1s ease-in-out 0s}
|
|
25
|
+
}
|
|
26
|
+
.tooltip.extra-padding{
|
|
27
|
+
padding:.75rem 1rem}
|
|
28
|
+
.tooltip.has-pointer:before{
|
|
29
|
+
content:"";
|
|
30
|
+
width:0;
|
|
31
|
+
height:0;
|
|
32
|
+
position:absolute;
|
|
33
|
+
top:-.375rem;
|
|
34
|
+
left:50%;
|
|
35
|
+
transform:translate(-50%);
|
|
36
|
+
border:.375rem solid transparent;
|
|
37
|
+
border-top-width:0;
|
|
38
|
+
border-bottom-color:#151921e6}
|
|
39
|
+
.tooltip.has-pointer.bottom:before{
|
|
40
|
+
top:auto;
|
|
41
|
+
bottom:-.375rem;
|
|
42
|
+
border-top-color:#151921e6;
|
|
43
|
+
border-bottom-color:transparent;
|
|
44
|
+
border-bottom-width:0;
|
|
45
|
+
border-top-width:.375rem}
|
|
46
|
+
.tooltip.has-form{
|
|
47
|
+
padding:0}
|
|
48
|
+
.tooltip.closed,.tooltip.opening,.tooltip.closing{
|
|
49
|
+
opacity:0}
|
|
50
|
+
.tooltip.open{
|
|
51
|
+
opacity:1}
|
|
52
|
+
.tooltip .content.hidden{
|
|
53
|
+
width:0;
|
|
54
|
+
height:0;
|
|
55
|
+
display:block;
|
|
56
|
+
overflow:hidden}
|
|
57
|
+
.tooltip p,.tooltip li,.tooltip small,.tooltip dt,.tooltip dd{
|
|
58
|
+
color:inherit;
|
|
59
|
+
font-weight:500;
|
|
60
|
+
line-height:initial}
|
|
61
|
+
.tooltip p:last-child,.tooltip li:last-child,.tooltip small:last-child,.tooltip dt:last-child,.tooltip dd:last-child{
|
|
62
|
+
margin-bottom:0}
|
|
63
|
+
.tooltip ul{
|
|
64
|
+
list-style:none;
|
|
65
|
+
margin:0;
|
|
66
|
+
padding:0}
|
|
67
|
+
.tooltip li{
|
|
68
|
+
margin:0 0 .5rem}
|
|
69
|
+
.tooltip a{
|
|
70
|
+
color:inherit;
|
|
71
|
+
font-weight:inherit;
|
|
72
|
+
-webkit-text-decoration:underline transparent;
|
|
73
|
+
text-decoration:underline transparent}
|
|
74
|
+
.tooltip a:hover,.tooltip a:focus{
|
|
75
|
+
text-decoration-color:currentcolor}
|
|
76
|
+
.tooltip .form{
|
|
77
|
+
padding:.25rem}
|
|
78
|
+
.tooltip .form.show-labels{
|
|
79
|
+
padding:.5rem .75rem 0}
|
|
80
|
+
.tooltip .form.show-labels dd{
|
|
81
|
+
margin-right:-.75rem;
|
|
82
|
+
margin-left:-.75rem}
|
|
83
|
+
.tooltip .form.show-labels p{
|
|
84
|
+
margin-bottom:.75rem}
|
|
85
|
+
.tooltip .form.show-labels p.button-wrapper{
|
|
86
|
+
margin:0;
|
|
87
|
+
padding:0}
|
|
88
|
+
.tooltip .form.show-labels strong{
|
|
89
|
+
margin-bottom:.5rem;
|
|
90
|
+
display:block}
|
|
91
|
+
.tooltip .form.show-labels label{
|
|
92
|
+
width:auto;
|
|
93
|
+
height:auto;
|
|
94
|
+
overflow:visible}
|
|
95
|
+
.tooltip .form dt,.tooltip .form dd{
|
|
96
|
+
margin:0}
|
|
97
|
+
.tooltip .form .field-label{
|
|
98
|
+
margin-bottom:0}
|
|
99
|
+
.tooltip .form label,.tooltip .form .button-wrapper{
|
|
100
|
+
width:0;
|
|
101
|
+
height:0;
|
|
102
|
+
display:block;
|
|
103
|
+
overflow:hidden;
|
|
104
|
+
margin:0}
|
|
105
|
+
.tooltip .form .button-wrapper:focus-within{
|
|
106
|
+
width:auto;
|
|
107
|
+
height:auto;
|
|
108
|
+
overflow:visible}
|
|
109
|
+
.tooltip .form input{
|
|
110
|
+
background:transparent;
|
|
111
|
+
padding:.5rem .75rem;
|
|
112
|
+
color:inherit;
|
|
113
|
+
border-radius:.5rem;
|
|
114
|
+
border:none}
|
|
115
|
+
.tooltip .form input::-moz-placeholder{
|
|
116
|
+
color:inherit;
|
|
117
|
+
opacity:.7}
|
|
118
|
+
.tooltip .form input::placeholder{
|
|
119
|
+
color:inherit;
|
|
120
|
+
opacity:.7}
|
|
121
|
+
.tooltip .form input:focus{
|
|
122
|
+
box-shadow:0 0 0 .25rem #afabef inset}
|
|
123
|
+
.tooltip.extra-padding .form input{
|
|
124
|
+
padding:.75rem 1rem}
|
|
125
|
+
.tooltip .form .error{
|
|
126
|
+
margin-top:.5rem;
|
|
127
|
+
padding:.5rem .75rem}
|
|
128
|
+
.tooltip.extra-padding .form .error{
|
|
129
|
+
padding:.75rem 1rem}
|
|
130
|
+
.tooltip .form button.tertiary{
|
|
131
|
+
color:inherit;
|
|
132
|
+
right:0}
|
|
133
|
+
.icon-bulleted-list dd li{
|
|
134
|
+
padding:0;
|
|
135
|
+
background:none}
|
|
136
|
+
.icon-bulleted-list dd li:before{
|
|
137
|
+
display:none}
|
|
138
|
+
.connection-cta-wrapper .more-menu button{
|
|
139
|
+
margin-top:.1875rem}
|
|
140
|
+
.connection-cta-wrapper button.left.icon.ellipsis:before{
|
|
141
|
+
margin-left:.0625rem}
|
|
142
|
+
.member.card{
|
|
143
|
+
max-width:18.75rem;
|
|
144
|
+
border:.0625rem solid rgb(192,203,223);
|
|
145
|
+
border-radius:1rem;
|
|
146
|
+
flex-direction:column}
|
|
147
|
+
.member.card:hover{
|
|
148
|
+
box-shadow:0 .25rem 1rem #2a31411a}
|
|
149
|
+
.member.card figure{
|
|
150
|
+
width:2.5rem;
|
|
151
|
+
height:2.5rem;
|
|
152
|
+
margin:0 0 .75rem;
|
|
153
|
+
border:.1041875rem solid rgb(64,74,97);
|
|
154
|
+
box-sizing:border-box}
|
|
155
|
+
.member.card>a{
|
|
156
|
+
background:none;
|
|
157
|
+
padding:1rem;
|
|
158
|
+
text-align:center;
|
|
159
|
+
border-radius:1rem;
|
|
160
|
+
flex-direction:column}
|
|
161
|
+
.member.card>a:hover .name,.member.card>a:focus .name,.member.card>a:focus-within .name{
|
|
162
|
+
color:currentcolor}
|
|
163
|
+
.member.card .details{
|
|
164
|
+
width:auto;
|
|
165
|
+
margin-top:0;
|
|
166
|
+
font-size:.875rem}
|
|
167
|
+
.member.card .details .name{
|
|
168
|
+
justify-content:center}
|
|
169
|
+
.member.card small{
|
|
170
|
+
font-size:.75rem;
|
|
171
|
+
color:#151921;
|
|
172
|
+
line-height:1rem}
|
|
173
|
+
.member.card .location{
|
|
174
|
+
color:#404a61;
|
|
175
|
+
display:block}
|
|
176
|
+
.member.card button.tertiary{
|
|
177
|
+
height:2rem;
|
|
178
|
+
right:0;
|
|
179
|
+
bottom:3rem;
|
|
180
|
+
margin-bottom:-2rem;
|
|
181
|
+
padding:.5625rem}
|
|
182
|
+
.member.card.has-profile-link>a{
|
|
183
|
+
padding-bottom:3.75rem}
|
|
184
|
+
.additional-content a{
|
|
185
|
+
text-decoration:underline;
|
|
186
|
+
font-weight:700}
|
|
187
|
+
.action-button.tertiary{
|
|
188
|
+
text-decoration:none}
|
|
189
|
+
.discussion-button.is-liked{
|
|
190
|
+
color:#a63798}
|
|
191
|
+
#wrapper.bold #footer{
|
|
192
|
+
margin-top:0}
|
|
193
|
+
@media only screen and (max-width: 769px){
|
|
194
|
+
.activities-feed{
|
|
195
|
+
width:100vw;
|
|
196
|
+
position:relative;
|
|
197
|
+
left:50%;
|
|
198
|
+
transform:translate(-50%);
|
|
199
|
+
box-sizing:border-box}
|
|
200
|
+
.activities-feed .filters{
|
|
201
|
+
padding-right:.75rem;
|
|
202
|
+
padding-left:.75rem}
|
|
203
|
+
}
|
|
204
|
+
.action-bar>ul>li>button:hover,.action-bar>ul>li>button:focus,.action-bar>ul>li>button:active{
|
|
205
|
+
background-color:#fff}
|
|
206
|
+
.dropdown-wrapper .dropdown-menu .action-bar>ul>li{
|
|
207
|
+
font-size:inherit!important;
|
|
208
|
+
line-height:normal!important}
|
|
209
|
+
.dropdown-wrapper .dropdown-menu .action-bar>ul>li>button{
|
|
210
|
+
bottom:0;
|
|
211
|
+
right:.3125rem}
|
|
212
|
+
.dropdown-wrapper .dropdown-menu .action-bar>p{
|
|
213
|
+
font-size:inherit!important;
|
|
214
|
+
line-height:normal!important;
|
|
215
|
+
text-transform:none!important;
|
|
216
|
+
font-weight:400!important;
|
|
217
|
+
margin:0!important}
|
|
218
|
+
.options-wrapper.with-pills label:focus,.options-wrapper.with-pills label:focus-visible{
|
|
219
|
+
box-shadow:0 0 0 .25rem inset #c0cbdf}
|
|
220
|
+
.rating li:hover~li button:before,.rating li:focus~li button:before,.rating li:focus-within~li button:before{
|
|
221
|
+
-webkit-mask-image:url(https://assets.apolitical.co/icons/star_empty.svg);
|
|
222
|
+
mask-image:url(https://assets.apolitical.co/icons/star_empty.svg)}
|
|
223
|
+
.tooltip{
|
|
224
|
+
width:11.25rem;
|
|
225
|
+
background:rgba(21,25,33,.9);
|
|
226
|
+
position:absolute;
|
|
227
|
+
margin-top:.5rem;
|
|
228
|
+
padding:.5rem .75rem;
|
|
229
|
+
color:#fff;
|
|
230
|
+
box-sizing:border-box;
|
|
231
|
+
border-radius:.5rem;
|
|
232
|
+
display:block;
|
|
233
|
+
z-index:1500;
|
|
234
|
+
opacity:0;
|
|
235
|
+
cursor:default}
|
|
236
|
+
@media (prefers-reduced-motion: no-preference){
|
|
237
|
+
.tooltip{
|
|
238
|
+
transition:opacity .1s ease-in-out 0s}
|
|
239
|
+
}
|
|
240
|
+
.tooltip.extra-padding{
|
|
241
|
+
padding:.75rem 1rem}
|
|
242
|
+
.tooltip.has-pointer:before{
|
|
243
|
+
content:"";
|
|
244
|
+
width:0;
|
|
245
|
+
height:0;
|
|
246
|
+
position:absolute;
|
|
247
|
+
top:-.375rem;
|
|
248
|
+
left:50%;
|
|
249
|
+
transform:translate(-50%);
|
|
250
|
+
border:.375rem solid transparent;
|
|
251
|
+
border-top-width:0;
|
|
252
|
+
border-bottom-color:#151921e6}
|
|
253
|
+
.tooltip.has-pointer.bottom:before{
|
|
254
|
+
top:auto;
|
|
255
|
+
bottom:-.375rem;
|
|
256
|
+
border-top-color:#151921e6;
|
|
257
|
+
border-bottom-color:transparent;
|
|
258
|
+
border-bottom-width:0;
|
|
259
|
+
border-top-width:.375rem}
|
|
260
|
+
.tooltip.has-form{
|
|
261
|
+
padding:0}
|
|
262
|
+
.tooltip.closed,.tooltip.opening,.tooltip.closing{
|
|
263
|
+
opacity:0}
|
|
264
|
+
.tooltip.open{
|
|
265
|
+
opacity:1}
|
|
266
|
+
.tooltip .content.hidden{
|
|
267
|
+
width:0;
|
|
268
|
+
height:0;
|
|
269
|
+
display:block;
|
|
270
|
+
overflow:hidden}
|
|
271
|
+
.tooltip p,.tooltip li,.tooltip small,.tooltip dt,.tooltip dd{
|
|
272
|
+
color:inherit;
|
|
273
|
+
font-weight:500;
|
|
274
|
+
line-height:initial}
|
|
275
|
+
.tooltip p:last-child,.tooltip li:last-child,.tooltip small:last-child,.tooltip dt:last-child,.tooltip dd:last-child{
|
|
276
|
+
margin-bottom:0}
|
|
277
|
+
.tooltip ul{
|
|
278
|
+
list-style:none;
|
|
279
|
+
margin:0;
|
|
280
|
+
padding:0}
|
|
281
|
+
.tooltip li{
|
|
282
|
+
margin:0 0 .5rem}
|
|
283
|
+
.tooltip a{
|
|
284
|
+
color:inherit;
|
|
285
|
+
font-weight:inherit;
|
|
286
|
+
-webkit-text-decoration:underline transparent;
|
|
287
|
+
text-decoration:underline transparent}
|
|
288
|
+
.tooltip a:hover,.tooltip a:focus{
|
|
289
|
+
text-decoration-color:currentcolor}
|
|
290
|
+
.tooltip .form{
|
|
291
|
+
padding:.25rem}
|
|
292
|
+
.tooltip .form.show-labels{
|
|
293
|
+
padding:.5rem .75rem 0}
|
|
294
|
+
.tooltip .form.show-labels dd{
|
|
295
|
+
margin-right:-.75rem;
|
|
296
|
+
margin-left:-.75rem}
|
|
297
|
+
.tooltip .form.show-labels p{
|
|
298
|
+
margin-bottom:.75rem}
|
|
299
|
+
.tooltip .form.show-labels p.button-wrapper{
|
|
300
|
+
margin:0;
|
|
301
|
+
padding:0}
|
|
302
|
+
.tooltip .form.show-labels strong{
|
|
303
|
+
margin-bottom:.5rem;
|
|
304
|
+
display:block}
|
|
305
|
+
.tooltip .form.show-labels label{
|
|
306
|
+
width:auto;
|
|
307
|
+
height:auto;
|
|
308
|
+
overflow:visible}
|
|
309
|
+
.tooltip .form dt,.tooltip .form dd{
|
|
310
|
+
margin:0}
|
|
311
|
+
.tooltip .form .field-label{
|
|
312
|
+
margin-bottom:0}
|
|
313
|
+
.tooltip .form label,.tooltip .form .button-wrapper{
|
|
314
|
+
width:0;
|
|
315
|
+
height:0;
|
|
316
|
+
display:block;
|
|
317
|
+
overflow:hidden;
|
|
318
|
+
margin:0}
|
|
319
|
+
.tooltip .form .button-wrapper:focus-within{
|
|
320
|
+
width:auto;
|
|
321
|
+
height:auto;
|
|
322
|
+
overflow:visible}
|
|
323
|
+
.tooltip .form input{
|
|
324
|
+
background:transparent;
|
|
325
|
+
padding:.5rem .75rem;
|
|
326
|
+
color:inherit;
|
|
327
|
+
border-radius:.5rem;
|
|
328
|
+
border:none}
|
|
329
|
+
.tooltip .form input::-moz-placeholder{
|
|
330
|
+
color:inherit;
|
|
331
|
+
opacity:.7}
|
|
332
|
+
.tooltip .form input::placeholder{
|
|
333
|
+
color:inherit;
|
|
334
|
+
opacity:.7}
|
|
335
|
+
.tooltip .form input:focus{
|
|
336
|
+
box-shadow:0 0 0 .25rem #afabef inset}
|
|
337
|
+
.tooltip.extra-padding .form input{
|
|
338
|
+
padding:.75rem 1rem}
|
|
339
|
+
.tooltip .form .error{
|
|
340
|
+
margin-top:.5rem;
|
|
341
|
+
padding:.5rem .75rem}
|
|
342
|
+
.tooltip.extra-padding .form .error{
|
|
343
|
+
padding:.75rem 1rem}
|
|
344
|
+
.tooltip .form button.tertiary{
|
|
345
|
+
color:inherit;
|
|
346
|
+
right:0}
|
|
347
|
+
.tooltip.link-editor{
|
|
348
|
+
min-width:10rem;
|
|
349
|
+
width:-moz-fit-content;
|
|
350
|
+
width:fit-content}
|
|
351
|
+
.tooltip.link-editor:not(.has-form){
|
|
352
|
+
padding-right:.25rem;
|
|
353
|
+
padding-left:.25rem}
|
|
354
|
+
.tooltip.link-editor li{
|
|
355
|
+
margin-bottom:0}
|
|
356
|
+
.tooltip.link-editor a.tertiary,.tooltip.link-editor button.tertiary{
|
|
357
|
+
text-decoration:underline;
|
|
358
|
+
text-decoration-color:transparent}
|
|
359
|
+
.tooltip.link-editor a.tertiary:hover,.tooltip.link-editor a.tertiary:focus,.tooltip.link-editor button.tertiary:hover,.tooltip.link-editor button.tertiary:focus{
|
|
360
|
+
text-decoration-color:currentcolor}
|
|
361
|
+
.toolbar ul{
|
|
362
|
+
margin:0;
|
|
363
|
+
padding:.5rem}
|
|
364
|
+
.toolbar li{
|
|
365
|
+
margin:0 .5rem 0 0}
|
|
366
|
+
.toolbar .tooltip{
|
|
367
|
+
width:-moz-fit-content;
|
|
368
|
+
width:fit-content;
|
|
369
|
+
margin-left:1rem;
|
|
370
|
+
bottom:3.8125rem;
|
|
371
|
+
transform:translate(-50%);
|
|
372
|
+
word-break:normal}
|
|
373
|
+
.toolbar .ol_list .tooltip,.ol_list .toolbar .tooltip{
|
|
374
|
+
min-width:8.625rem}
|
|
375
|
+
.toolbar .ul_list .tooltip,.ul_list .toolbar .tooltip{
|
|
376
|
+
min-width:9.0625rem}
|
|
377
|
+
.toolbar ul{
|
|
378
|
+
margin:0;
|
|
379
|
+
padding:.5rem}
|
|
380
|
+
.toolbar li{
|
|
381
|
+
margin:0 .5rem 0 0}
|
|
382
|
+
.toolbar .tooltip{
|
|
383
|
+
width:-moz-fit-content;
|
|
384
|
+
width:fit-content;
|
|
385
|
+
margin-left:1rem;
|
|
386
|
+
bottom:3.8125rem;
|
|
387
|
+
transform:translate(-50%);
|
|
388
|
+
word-break:normal}
|
|
389
|
+
.toolbar .ol_list .tooltip,.ol_list .toolbar .tooltip{
|
|
390
|
+
min-width:8.625rem}
|
|
391
|
+
.toolbar .ul_list .tooltip,.ul_list .toolbar .tooltip{
|
|
392
|
+
min-width:9.0625rem}
|
|
393
|
+
.v1styles .url{
|
|
394
|
+
font-weight:900}
|
|
395
|
+
.v1styles .url{
|
|
396
|
+
font-weight:900}
|
|
397
|
+
.replies-feed>.discussion-post:hover,.thread-wrapper>ul>.discussion-post{
|
|
398
|
+
box-shadow:none}
|
|
399
|
+
.replies-feed button.icon.info-inside-circle:before{
|
|
400
|
+
width:1.25rem;
|
|
401
|
+
height:1.25rem}
|
|
402
|
+
.share-link-wrapper{
|
|
403
|
+
position:relative}
|
|
404
|
+
.share-link-wrapper .tooltip{
|
|
405
|
+
width:5.9375rem;
|
|
406
|
+
top:2.25rem;
|
|
407
|
+
left:-1.875rem}
|
|
408
|
+
.share-link-wrapper .tooltip.copied{
|
|
409
|
+
width:12.8125rem;
|
|
410
|
+
left:-5.3125rem}
|
|
411
|
+
.actions button.tertiary:not(.new){
|
|
412
|
+
right:0;
|
|
413
|
+
bottom:0}
|
|
414
|
+
.filters button,.filters label{
|
|
415
|
+
font-size:inherit}
|
|
416
|
+
.filters button.large,.filters label.large{
|
|
417
|
+
font-size:1rem}
|
|
418
|
+
.filters button.large:has(b),.filters label.large:has(b){
|
|
419
|
+
font-size:.875rem}
|
|
420
|
+
.filters button.large:has(b) b,.filters label.large:has(b) b{
|
|
421
|
+
font-size:1rem;
|
|
422
|
+
line-height:1.5rem}
|
|
423
|
+
.filters button:focus,.filters button:focus-visible,.filters label:focus,.filters label:focus-visible{
|
|
424
|
+
box-shadow:0 0 0 .25rem #c0cbdf}
|
|
425
|
+
.more-menu ul{
|
|
426
|
+
margin:0;
|
|
427
|
+
padding:.25rem}
|
|
428
|
+
.more-menu li{
|
|
429
|
+
margin:0}
|
|
430
|
+
#wrapper.bold #footer{
|
|
431
|
+
margin-top:0}
|
|
432
|
+
.full-width-section{
|
|
433
|
+
width:100vw;
|
|
434
|
+
position:relative;
|
|
435
|
+
left:50%;
|
|
436
|
+
transform:translate(-50%);
|
|
437
|
+
box-sizing:border-box}
|
|
438
|
+
.full-width-section>div,.full-width-section>aside,.full-width-section>ul{
|
|
439
|
+
width:100%;
|
|
440
|
+
padding-right:.75rem;
|
|
441
|
+
padding-left:.75rem;
|
|
442
|
+
box-sizing:border-box}
|
|
443
|
+
.full-width-section.light{
|
|
444
|
+
background:rgb(240,245,255)}
|
|
445
|
+
.full-width-section.light h1,.full-width-section.light h2,.full-width-section.light h3,.full-width-section.light h4,.full-width-section.light h5,.full-width-section.light h6{
|
|
446
|
+
position:relative;
|
|
447
|
+
padding-bottom:1rem}
|
|
448
|
+
.full-width-section.light h1:after,.full-width-section.light h2:after,.full-width-section.light h3:after,.full-width-section.light h4:after,.full-width-section.light h5:after,.full-width-section.light h6:after{
|
|
449
|
+
content:"";
|
|
450
|
+
width:4rem;
|
|
451
|
+
height:.25rem;
|
|
452
|
+
background:rgb(79,67,186);
|
|
453
|
+
position:absolute;
|
|
454
|
+
bottom:0;
|
|
455
|
+
left:0;
|
|
456
|
+
border-radius:.5rem;
|
|
457
|
+
display:block}
|
|
458
|
+
.full-width-section.light h1:first-child,.full-width-section.light h2:first-child,.full-width-section.light h3:first-child,.full-width-section.light h4:first-child,.full-width-section.light h5:first-child,.full-width-section.light h6:first-child{
|
|
459
|
+
margin-top:0}
|
|
460
|
+
.full-width-section.light.center h1,.full-width-section.light.center h2,.full-width-section.light.center h3,.full-width-section.light.center h4,.full-width-section.light.center h5,.full-width-section.light.center h6{
|
|
461
|
+
position:relative;
|
|
462
|
+
padding-bottom:1rem}
|
|
463
|
+
.full-width-section.light.center h1:after,.full-width-section.light.center h2:after,.full-width-section.light.center h3:after,.full-width-section.light.center h4:after,.full-width-section.light.center h5:after,.full-width-section.light.center h6:after{
|
|
464
|
+
content:"";
|
|
465
|
+
width:4rem;
|
|
466
|
+
height:.25rem;
|
|
467
|
+
background:rgb(79,67,186);
|
|
468
|
+
position:absolute;
|
|
469
|
+
bottom:0;
|
|
470
|
+
left:0;
|
|
471
|
+
border-radius:.5rem;
|
|
472
|
+
display:block}
|
|
473
|
+
.full-width-section.light.center h1:after,.full-width-section.light.center h2:after,.full-width-section.light.center h3:after,.full-width-section.light.center h4:after,.full-width-section.light.center h5:after,.full-width-section.light.center h6:after{
|
|
474
|
+
left:50%;
|
|
475
|
+
transform:translate(-50%)}
|
|
476
|
+
.full-width-section.dark{
|
|
477
|
+
background:rgb(23,23,23);
|
|
478
|
+
color:#fff}
|
|
479
|
+
.full-width-section.dark h1,.full-width-section.dark h2,.full-width-section.dark h3,.full-width-section.dark h4,.full-width-section.dark h5,.full-width-section.dark h6,.full-width-section.dark p,.full-width-section.dark li,.full-width-section.dark dt,.full-width-section.dark dd,.full-width-section.dark blockquote,.full-width-section.dark span:not(.pill),.full-width-section.dark div,.full-width-section.dark strong,.full-width-section.dark em,.full-width-section.dark small:not(.content-type-label),.full-width-section.dark cite{
|
|
480
|
+
color:inherit}
|
|
481
|
+
.full-width-section.medium{
|
|
482
|
+
padding:3.75rem 1.875rem}
|
|
483
|
+
.full-width-section.medium .content{
|
|
484
|
+
max-width:45.625rem;
|
|
485
|
+
margin:0 auto}
|
|
486
|
+
.full-width-section.large{
|
|
487
|
+
padding-top:3.9375rem;
|
|
488
|
+
padding-bottom:4.8125rem}
|
|
489
|
+
.full-width-section.large .content{
|
|
490
|
+
max-width:67.1875rem;
|
|
491
|
+
margin:0 auto}
|
|
492
|
+
@media only screen and (min-width: 769px){
|
|
493
|
+
.full-width-section>div,.full-width-section>aside,.full-width-section>ul{
|
|
494
|
+
padding-right:2.5rem;
|
|
495
|
+
padding-left:2.5rem}
|
|
496
|
+
.full-width-section.large{
|
|
497
|
+
padding-top:8.625rem;
|
|
498
|
+
padding-bottom:7rem}
|
|
499
|
+
}
|
|
500
|
+
@media only screen and (min-width: 1040px){
|
|
501
|
+
.full-width-section>div.content-slim,.full-width-section>aside.content-slim,.full-width-section>ul.content-slim{
|
|
502
|
+
padding-right:2rem;
|
|
503
|
+
padding-left:2rem}
|
|
504
|
+
}
|
|
505
|
+
@media only screen and (min-width: 1130px){
|
|
506
|
+
.full-width-section>div.content-slim,.full-width-section>aside.content-slim,.full-width-section>ul.content-slim{
|
|
507
|
+
padding-right:0;
|
|
508
|
+
padding-left:0}
|
|
509
|
+
}
|
|
510
|
+
#wrapper.bold #footer{
|
|
511
|
+
margin-top:0}
|
|
512
|
+
#wrapper.bold #footer{
|
|
513
|
+
margin-top:0}
|
|
514
|
+
#wrapper.bold #footer{
|
|
515
|
+
margin-top:0}
|
|
516
|
+
.filters button,.filters label{
|
|
517
|
+
font-size:inherit}
|
|
518
|
+
.filters button.large,.filters label.large{
|
|
519
|
+
font-size:1rem}
|
|
520
|
+
.filters button.large:has(b),.filters label.large:has(b){
|
|
521
|
+
font-size:.875rem}
|
|
522
|
+
.filters button.large:has(b) b,.filters label.large:has(b) b{
|
|
523
|
+
font-size:1rem;
|
|
524
|
+
line-height:1.5rem}
|
|
525
|
+
.filters button:focus,.filters button:focus-visible,.filters label:focus,.filters label:focus-visible{
|
|
526
|
+
box-shadow:0 0 0 .25rem #c0cbdf}
|
|
527
|
+
.poll-wrapper .poll-options{
|
|
528
|
+
margin:0 0 1rem}
|
|
529
|
+
.invite-modal .remove-email-button{
|
|
530
|
+
right:0;
|
|
531
|
+
top:0}
|
|
532
|
+
.banner-section,.banner-section.light{
|
|
533
|
+
padding:3rem 1.5rem}
|
|
534
|
+
.banner-section.has-extra-spacing{
|
|
535
|
+
padding-top:4.25rem;
|
|
536
|
+
padding-bottom:4.25rem}
|
|
537
|
+
.banner-section.subtle{
|
|
538
|
+
padding-top:5.125rem;
|
|
539
|
+
padding-bottom:5.125rem}
|
|
540
|
+
.banner-section.full-width-section>.content-wrapper{
|
|
541
|
+
padding-left:0;
|
|
542
|
+
padding-right:0}
|
|
543
|
+
.banner-section.light:not(.image-full-width){
|
|
544
|
+
background:rgb(255,255,255)}
|
|
545
|
+
@media only screen and (max-width: 1023px){
|
|
546
|
+
.banner-section.image-inline.has-cta{
|
|
547
|
+
padding-bottom:7.375rem}
|
|
548
|
+
.banner-section.image-inline.has-cta.has-extra-spacing{
|
|
549
|
+
padding-bottom:8.625rem}
|
|
550
|
+
.banner-section.image-inline.has-cta.subtle{
|
|
551
|
+
padding-bottom:9.5rem}
|
|
552
|
+
}
|
|
553
|
+
@media only screen and (min-width: 769px){
|
|
554
|
+
.banner-section{
|
|
555
|
+
padding-left:2.5rem;
|
|
556
|
+
padding-right:2.5rem}
|
|
557
|
+
.banner-section.has-extra-spacing{
|
|
558
|
+
padding-top:7.5rem;
|
|
559
|
+
padding-bottom:7.5rem}
|
|
560
|
+
.banner-section.subtle{
|
|
561
|
+
padding-top:10.9375rem;
|
|
562
|
+
padding-bottom:3.125rem}
|
|
563
|
+
.banner-section.full-width-section>.content-wrapper{
|
|
564
|
+
padding-right:12rem}
|
|
565
|
+
.banner-section.full-width-section.slim>.content-wrapper{
|
|
566
|
+
padding-left:0;
|
|
567
|
+
padding-right:0}
|
|
568
|
+
}
|
|
569
|
+
@media only screen and (min-width: 1024px){
|
|
570
|
+
.banner-section.has-image.image-inline.full-width-section>.content-wrapper{
|
|
571
|
+
padding-right:0}
|
|
572
|
+
}
|
|
573
|
+
@media only screen and (min-width: 1180px){
|
|
574
|
+
.banner-section.full-width-section>.content-wrapper{
|
|
575
|
+
padding-right:28rem}
|
|
576
|
+
}
|
|
577
|
+
@media only screen and (min-width: 1500px){
|
|
578
|
+
.banner-section.full-width-section.has-image.image-inline{
|
|
579
|
+
width:100%;
|
|
580
|
+
left:0;
|
|
581
|
+
transform:none;
|
|
582
|
+
padding-left:0;
|
|
583
|
+
padding-right:0}
|
|
584
|
+
}
|
|
585
|
+
.custom-content-banner{
|
|
586
|
+
background-color:#f0f5ff}
|
|
587
|
+
.custom-content-banner,.custom-content-banner.dark{
|
|
588
|
+
padding-top:1.75rem;
|
|
589
|
+
padding-bottom:3rem}
|
|
590
|
+
.custom-content-banner.dark{
|
|
591
|
+
background-color:#21184d}
|
|
592
|
+
@media only screen and (min-width: 1180px){
|
|
593
|
+
.custom-content-banner.has-image{
|
|
594
|
+
background-image:var(--image);
|
|
595
|
+
background-position:center center;
|
|
596
|
+
background-size:cover}
|
|
597
|
+
}
|
|
598
|
+
.highlight-section .highlight-container{
|
|
599
|
+
width:100%;
|
|
600
|
+
height:auto;
|
|
601
|
+
padding-left:0rem;
|
|
602
|
+
padding-right:0rem}
|
|
603
|
+
.highlight-section .highlight-image{
|
|
604
|
+
height:12.5rem}
|
|
605
|
+
@media only screen and (min-width: 1024px){
|
|
606
|
+
.highlight-section .highlight-image{
|
|
607
|
+
width:50%;
|
|
608
|
+
height:auto}
|
|
609
|
+
}
|
|
610
|
+
.highlight-section .highlight-content-wrapper{
|
|
611
|
+
padding-top:3rem;
|
|
612
|
+
padding-bottom:3rem}
|
|
613
|
+
@media only screen and (min-width: 1024px){
|
|
614
|
+
.highlight-section .highlight-content-wrapper{
|
|
615
|
+
padding-top:5rem;
|
|
616
|
+
padding-bottom:5rem}
|
|
617
|
+
.highlight-section .highlight-content-wrapper:not(.no-image){
|
|
618
|
+
width:50%}
|
|
619
|
+
}
|
|
620
|
+
#wrapper.not-found-error #content-wrapper{
|
|
621
|
+
min-height:unset}
|
|
622
|
+
}
|
|
@@ -5,7 +5,7 @@ These are utility classes that are used in the `next-ui` app and libraries. They
|
|
|
5
5
|
The starting point for the tooling to generate these classes came from [codyframe](https://github.com/codyhouse/codyframe).
|
|
6
6
|
In future we may want to expand on our small set using more of the utility classes that codyframe has, or even use something like [tailwindcss](https://tailwindcss.com/) instead.
|
|
7
7
|
|
|
8
|
-
The `global.css` file is used to define the utility classes globally and also for intellisense in the editor. If you modify the generator sass then you will need to run `pnpm build:uclasses` from the
|
|
8
|
+
The `global.css` file is used to define the utility classes globally and also for intellisense in the editor. If you modify the generator sass then you will need to run `pnpm build:uclasses` from the `services/` workspace root.
|
|
9
9
|
|
|
10
10
|
Ensure you have the recommended extension from .vscode workspace settings to get the intellisense.
|
|
11
11
|
|