@ptcwebops/ptcw-design 3.2.2 → 3.2.4

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.
@@ -0,0 +1,593 @@
1
+ div.center {
2
+ text-align: center;
3
+ }
4
+ div.center.dotted h1::before,
5
+ div.center.dotted h2::before,
6
+ div.center.dotted h3::before,
7
+ div.center.dotted h4::before,
8
+ div.center.dotted h5::before,
9
+ div.center.dotted h6::before {
10
+ left: 50%;
11
+ transform: translateX(-50%);
12
+ }
13
+ div.left {
14
+ text-align: left;
15
+ }
16
+ div.left.dotted h1::before,
17
+ div.left.dotted h2::before,
18
+ div.left.dotted h3::before,
19
+ div.left.dotted h4::before,
20
+ div.left.dotted h5::before,
21
+ div.left.dotted h6::before {
22
+ left: 0%;
23
+ }
24
+ div.right {
25
+ text-align: right;
26
+ }
27
+ div.right.dotted h1::before,
28
+ div.right.dotted h2::before,
29
+ div.right.dotted h3::before,
30
+ div.right.dotted h4::before,
31
+ div.right.dotted h5::before,
32
+ div.right.dotted h6::before {
33
+ right: 0%;
34
+ }
35
+ div.inherit {
36
+ text-align: inherit;
37
+ }
38
+ div.dotted h1::before,
39
+ div.dotted h2::before,
40
+ div.dotted h3::before,
41
+ div.dotted h4::before,
42
+ div.dotted h5::before,
43
+ div.dotted h6::before {
44
+ content: "";
45
+ position: absolute;
46
+ top: -6px;
47
+ width: 30%;
48
+ display: block;
49
+ border-top: 3px dashed var(--color-green-07);
50
+ }
51
+ div.solid h1,
52
+ div.solid h2,
53
+ div.solid h3,
54
+ div.solid h4,
55
+ div.solid h5,
56
+ div.solid h6 {
57
+ padding-top: 12px;
58
+ }
59
+ div.solid h1::before,
60
+ div.solid h2::before,
61
+ div.solid h3::before,
62
+ div.solid h4::before,
63
+ div.solid h5::before,
64
+ div.solid h6::before {
65
+ content: "";
66
+ position: absolute;
67
+ width: 100%;
68
+ height: 0.7px;
69
+ background-color: var(--color-gray-03);
70
+ opacity: 0.9;
71
+ left: 0px;
72
+ top: 0;
73
+ }
74
+ div.solid h1::after,
75
+ div.solid h2::after,
76
+ div.solid h3::after,
77
+ div.solid h4::after,
78
+ div.solid h5::after,
79
+ div.solid h6::after {
80
+ content: "";
81
+ position: absolute;
82
+ width: 56px;
83
+ height: 2px;
84
+ background-color: var(--color-green-07);
85
+ top: -2px;
86
+ left: 0px;
87
+ }
88
+ div.is-standard h1,
89
+ div.is-standard h2,
90
+ div.is-standard h3,
91
+ div.is-standard h4,
92
+ div.is-standard h5,
93
+ div.is-standard h6 {
94
+ display: inline-block;
95
+ position: relative;
96
+ }
97
+ div.is-standard h1 {
98
+ font-size: var(--ptc-font-size-xxx-large);
99
+ line-height: var(--ptc-line-height-densest);
100
+ font-weight: var(--ptc-font-weight-extrabold);
101
+ letter-spacing: 0px;
102
+ color: var(--color-gray-10);
103
+ }
104
+ @media only screen and (min-width: 768px) {
105
+ div.is-standard h1 {
106
+ font-size: var(--ptc-font-size-xxxx-large);
107
+ }
108
+ }
109
+ div.is-standard h2 {
110
+ font-size: var(--ptc-font-size-x-large);
111
+ line-height: var(--ptc-line-height-densest);
112
+ font-weight: var(--ptc-font-weight-extrabold);
113
+ color: var(--color-gray-10);
114
+ }
115
+ @media only screen and (min-width: 768px) {
116
+ div.is-standard h2 {
117
+ font-size: var(--ptc-font-size-xx-large);
118
+ }
119
+ }
120
+ div.is-plm-hub h1,
121
+ div.is-plm-hub h2,
122
+ div.is-plm-hub h3,
123
+ div.is-plm-hub h4,
124
+ div.is-plm-hub h5,
125
+ div.is-plm-hub h6 {
126
+ display: inline-block;
127
+ position: relative;
128
+ margin-block-start: 0em;
129
+ margin-block-end: 0em;
130
+ margin-inline-start: 0px;
131
+ margin-inline-end: 0px;
132
+ color: var(--color-white) !important;
133
+ }
134
+ div.margin-flush {
135
+ margin-top: 0;
136
+ margin-bottom: 0;
137
+ }
138
+ div.margin-flush h1,
139
+ div.margin-flush h2,
140
+ div.margin-flush h3,
141
+ div.margin-flush h4,
142
+ div.margin-flush h5 {
143
+ margin-top: 0;
144
+ margin-bottom: 0;
145
+ }
146
+ div.margin-top-2 {
147
+ margin-top: var(--ptc-element-spacing-02);
148
+ margin-bottom: 0;
149
+ }
150
+ div.margin-top-3 {
151
+ margin-top: var(--ptc-element-spacing-03);
152
+ margin-bottom: 0;
153
+ }
154
+ div.margin-top-4 {
155
+ margin-top: var(--ptc-element-spacing-04);
156
+ margin-bottom: 0;
157
+ }
158
+ div.margin-top-5 {
159
+ margin-top: var(--ptc-element-spacing-05);
160
+ margin-bottom: 0;
161
+ }
162
+ div.margin-top-6 {
163
+ margin-top: var(--ptc-element-spacing-06);
164
+ margin-bottom: 0;
165
+ }
166
+ div.margin-bottom-2 {
167
+ margin-bottom: var(--ptc-element-spacing-02);
168
+ margin-top: 0;
169
+ }
170
+ div.margin-bottom-3 {
171
+ margin-bottom: var(--ptc-element-spacing-03);
172
+ margin-top: 0;
173
+ }
174
+ div.margin-bottom-4 {
175
+ margin-bottom: var(--ptc-element-spacing-04);
176
+ margin-top: 0;
177
+ }
178
+ div.margin-bottom-5 {
179
+ margin-bottom: var(--ptc-element-spacing-05);
180
+ margin-top: 0;
181
+ }
182
+ div.margin-bottom-6 {
183
+ margin-bottom: var(--ptc-element-spacing-06);
184
+ margin-top: 0;
185
+ }
186
+ div.margin-2 {
187
+ margin-top: var(--ptc-element-spacing-02);
188
+ margin-bottom: var(--ptc-element-spacing-02);
189
+ }
190
+ div.margin-3 {
191
+ margin-top: var(--ptc-element-spacing-03);
192
+ margin-bottom: var(--ptc-element-spacing-03);
193
+ }
194
+ div.margin-4 {
195
+ margin-top: var(--ptc-element-spacing-04);
196
+ margin-bottom: var(--ptc-element-spacing-04);
197
+ }
198
+ div.margin-5 {
199
+ margin-top: var(--ptc-element-spacing-05);
200
+ margin-bottom: var(--ptc-element-spacing-05);
201
+ }
202
+ div.margin-5 h4 {
203
+ margin-top: 0;
204
+ margin-bottom: 0;
205
+ }
206
+ div.margin-6 {
207
+ margin-top: var(--ptc-element-spacing-06);
208
+ margin-bottom: var(--ptc-element-spacing-06);
209
+ }
210
+ div.margin-9 {
211
+ margin-top: var(--ptc-element-spacing-09);
212
+ margin-bottom: var(--ptc-element-spacing-09);
213
+ }
214
+ div.green h1,
215
+ div.green h2,
216
+ div.green h3,
217
+ div.green h4,
218
+ div.green h5,
219
+ div.green h6 {
220
+ text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-green-07);
221
+ }
222
+ div.blue h1,
223
+ div.blue h2,
224
+ div.blue h3,
225
+ div.blue h4,
226
+ div.blue h5,
227
+ div.blue h6 {
228
+ text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-blue-07);
229
+ }
230
+ div.red h1,
231
+ div.red h2,
232
+ div.red h3,
233
+ div.red h4,
234
+ div.red h5,
235
+ div.red h6 {
236
+ text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-red-07);
237
+ }
238
+ div.orange h1,
239
+ div.orange h2,
240
+ div.orange h3,
241
+ div.orange h4,
242
+ div.orange h5,
243
+ div.orange h6 {
244
+ text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-orange-07);
245
+ }
246
+ div.slate-grey h1,
247
+ div.slate-grey h2,
248
+ div.slate-grey h3,
249
+ div.slate-grey h4,
250
+ div.slate-grey h5,
251
+ div.slate-grey h6 {
252
+ text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-gray-07);
253
+ }
254
+ div.w-3 h1,
255
+ div.w-3 h2,
256
+ div.w-3 h3,
257
+ div.w-3 h4,
258
+ div.w-3 h5,
259
+ div.w-3 h6 {
260
+ font-weight: var(--ptc-font-weight-thin);
261
+ }
262
+ div.w-4 h1,
263
+ div.w-4 h2,
264
+ div.w-4 h3,
265
+ div.w-4 h4,
266
+ div.w-4 h5,
267
+ div.w-4 h6 {
268
+ font-weight: var(--ptc-font-weight-regular);
269
+ }
270
+ div.w-5 h1,
271
+ div.w-5 h2,
272
+ div.w-5 h3,
273
+ div.w-5 h4,
274
+ div.w-5 h5,
275
+ div.w-5 h6 {
276
+ font-weight: var(--ptc-font-weight-medium);
277
+ }
278
+ div.w-6 h1,
279
+ div.w-6 h2,
280
+ div.w-6 h3,
281
+ div.w-6 h4,
282
+ div.w-6 h5,
283
+ div.w-6 h6 {
284
+ font-weight: var(--ptc-font-weight-semibold);
285
+ }
286
+ div.w-7 h1,
287
+ div.w-7 h2,
288
+ div.w-7 h3,
289
+ div.w-7 h4,
290
+ div.w-7 h5,
291
+ div.w-7 h6 {
292
+ font-weight: var(--ptc-font-weight-bold);
293
+ }
294
+ div.w-8 h1,
295
+ div.w-8 h2,
296
+ div.w-8 h3,
297
+ div.w-8 h4,
298
+ div.w-8 h5,
299
+ div.w-8 h6 {
300
+ font-weight: var(--ptc-font-weight-extrabold);
301
+ }
302
+ div.w-9 h1,
303
+ div.w-9 h2,
304
+ div.w-9 h3,
305
+ div.w-9 h4,
306
+ div.w-9 h5,
307
+ div.w-9 h6 {
308
+ font-weight: var(--ptc-font-weight-black);
309
+ }
310
+ div.xx-small h1,
311
+ div.xx-small h2,
312
+ div.xx-small h3,
313
+ div.xx-small h4,
314
+ div.xx-small h5,
315
+ div.xx-small h6 {
316
+ font-size: var(--ptc-font-size-xx-small);
317
+ }
318
+ div.x-small h1,
319
+ div.x-small h2,
320
+ div.x-small h3,
321
+ div.x-small h4,
322
+ div.x-small h5,
323
+ div.x-small h6 {
324
+ font-size: var(--ptc-font-size-x-small);
325
+ }
326
+ div.small h1,
327
+ div.small h2,
328
+ div.small h3,
329
+ div.small h4,
330
+ div.small h5,
331
+ div.small h6 {
332
+ font-size: var(--ptc-font-size-small);
333
+ }
334
+ div.medium h1,
335
+ div.medium h2,
336
+ div.medium h3,
337
+ div.medium h4,
338
+ div.medium h5,
339
+ div.medium h6 {
340
+ font-size: var(--ptc-font-size-medium);
341
+ }
342
+ div.large h1,
343
+ div.large h2,
344
+ div.large h3,
345
+ div.large h4,
346
+ div.large h5,
347
+ div.large h6 {
348
+ font-size: var(--ptc-font-size-large);
349
+ }
350
+ div.large h3 {
351
+ font-size: var(--ptc-font-size-medium);
352
+ }
353
+ @media only screen and (min-width: 768px) {
354
+ div.large h3 {
355
+ font-size: var(--ptc-font-size-large);
356
+ }
357
+ }
358
+ div.x-large h1,
359
+ div.x-large h2,
360
+ div.x-large h3,
361
+ div.x-large h4,
362
+ div.x-large h5,
363
+ div.x-large h6 {
364
+ font-size: var(--ptc-font-size-x-large);
365
+ }
366
+ div.xx-large h1,
367
+ div.xx-large h2,
368
+ div.xx-large h3,
369
+ div.xx-large h4 {
370
+ font-size: var(--ptc-font-size-x-large);
371
+ }
372
+ @media only screen and (min-width: 768px) {
373
+ div.xx-large h1,
374
+ div.xx-large h2,
375
+ div.xx-large h3,
376
+ div.xx-large h4 {
377
+ font-size: var(--ptc-font-size-xx-large);
378
+ }
379
+ }
380
+ div.xxx-large h1,
381
+ div.xxx-large h2,
382
+ div.xxx-large h3,
383
+ div.xxx-large h4,
384
+ div.xxx-large h5,
385
+ div.xxx-large h6 {
386
+ font-size: var(--ptc-font-size-xx-large);
387
+ }
388
+ @media only screen and (min-width: 768px) {
389
+ div.xxx-large h1,
390
+ div.xxx-large h2,
391
+ div.xxx-large h3,
392
+ div.xxx-large h4,
393
+ div.xxx-large h5,
394
+ div.xxx-large h6 {
395
+ font-size: var(--ptc-font-size-xxx-large);
396
+ }
397
+ }
398
+ div.xxxx-large h1,
399
+ div.xxxx-large h2,
400
+ div.xxxx-large h3,
401
+ div.xxxx-large h4,
402
+ div.xxxx-large h5,
403
+ div.xxxx-large h6 {
404
+ font-size: var(--ptc-font-size-xxx-large);
405
+ }
406
+ @media screen and (min-width: 769px) {
407
+ div.xxxx-large h1,
408
+ div.xxxx-large h2,
409
+ div.xxxx-large h3,
410
+ div.xxxx-large h4,
411
+ div.xxxx-large h5,
412
+ div.xxxx-large h6 {
413
+ font-size: var(--ptc-font-size-xxxx-large);
414
+ }
415
+ }
416
+ div.xx-large-allbp h1,
417
+ div.xx-large-allbp h2,
418
+ div.xx-large-allbp h3,
419
+ div.xx-large-allbp h4,
420
+ div.xx-large-allbp h5,
421
+ div.xx-large-allbp h6 {
422
+ font-size: var(--ptc-font-size-xx-large);
423
+ }
424
+ div.xxxx-large-allbp h1,
425
+ div.xxxx-large-allbp h2,
426
+ div.xxxx-large-allbp h3,
427
+ div.xxxx-large-allbp h4,
428
+ div.xxxx-large-allbp h5,
429
+ div.xxxx-large-allbp h6 {
430
+ font-size: var(--ptc-font-size-xxxx-large);
431
+ }
432
+ div.xxxx-large-desktop h1,
433
+ div.xxxx-large-desktop h2,
434
+ div.xxxx-large-desktop h3,
435
+ div.xxxx-large-desktop h4,
436
+ div.xxxx-large-desktop h5,
437
+ div.xxxx-large-desktop h6 {
438
+ font-size: var(--ptc-font-size-xxx-large);
439
+ }
440
+ @media only screen and (min-width: 992px) {
441
+ div.xxxx-large-desktop h1,
442
+ div.xxxx-large-desktop h2,
443
+ div.xxxx-large-desktop h3,
444
+ div.xxxx-large-desktop h4,
445
+ div.xxxx-large-desktop h5,
446
+ div.xxxx-large-desktop h6 {
447
+ font-size: var(--ptc-font-size-xxxx-large);
448
+ }
449
+ }
450
+ div.xxxx-large-store h1,
451
+ div.xxxx-large-store h2,
452
+ div.xxxx-large-store h3,
453
+ div.xxxx-large-store h4,
454
+ div.xxxx-large-store h5,
455
+ div.xxxx-large-store h6 {
456
+ font-size: var(--ptc-font-size-xxx-large);
457
+ }
458
+ @media only screen and (min-width: 992px) {
459
+ div.xxxx-large-store h1,
460
+ div.xxxx-large-store h2,
461
+ div.xxxx-large-store h3,
462
+ div.xxxx-large-store h4,
463
+ div.xxxx-large-store h5,
464
+ div.xxxx-large-store h6 {
465
+ font-size: var(--ptc-font-size-xxxx-large);
466
+ }
467
+ }
468
+ div.densest h1,
469
+ div.densest h2,
470
+ div.densest h3,
471
+ div.densest h4,
472
+ div.densest h5,
473
+ div.densest h6 {
474
+ line-height: var(--ptc-line-height-densest);
475
+ }
476
+ div.denser h1,
477
+ div.denser h2,
478
+ div.denser h3,
479
+ div.denser h4,
480
+ div.denser h5,
481
+ div.denser h6 {
482
+ line-height: var(--ptc-line-height-denser);
483
+ }
484
+ div.dense h1,
485
+ div.dense h2,
486
+ div.dense h3,
487
+ div.dense h4,
488
+ div.dense h5,
489
+ div.dense h6 {
490
+ line-height: var(--ptc-line-height-dense);
491
+ }
492
+ div.normal h1,
493
+ div.normal h2,
494
+ div.normal h3,
495
+ div.normal h4,
496
+ div.normal h5,
497
+ div.normal h6 {
498
+ line-height: var(--ptc-line-height-normal);
499
+ }
500
+ div.loose h1,
501
+ div.loose h2,
502
+ div.loose h3,
503
+ div.loose h4,
504
+ div.loose h5,
505
+ div.loose h6 {
506
+ line-height: var(--ptc-line-height-loose);
507
+ }
508
+ div.looser h1,
509
+ div.looser h2,
510
+ div.looser h3,
511
+ div.looser h4,
512
+ div.looser h5,
513
+ div.looser h6 {
514
+ line-height: var(--ptc-line-height-looser);
515
+ }
516
+ div.paragraph h1,
517
+ div.paragraph h2,
518
+ div.paragraph h3,
519
+ div.paragraph h4,
520
+ div.paragraph h5,
521
+ div.paragraph h6 {
522
+ line-height: var(--ptc-line-height-paragraph);
523
+ }
524
+ div.black h1,
525
+ div.black h2,
526
+ div.black h3,
527
+ div.black h4,
528
+ div.black h5,
529
+ div.black h6 {
530
+ color: var(--color-black);
531
+ }
532
+ div.white h1,
533
+ div.white h2,
534
+ div.white h3,
535
+ div.white h4,
536
+ div.white h5,
537
+ div.white h6 {
538
+ color: var(--color-white);
539
+ }
540
+ div.gray-1 h1,
541
+ div.gray-1 h2,
542
+ div.gray-1 h3,
543
+ div.gray-1 h4,
544
+ div.gray-1 h5,
545
+ div.gray-1 h6 {
546
+ color: var(--color-gray-01);
547
+ }
548
+ div.gray h1,
549
+ div.gray h2,
550
+ div.gray h3,
551
+ div.gray h4,
552
+ div.gray h5,
553
+ div.gray h6 {
554
+ color: var(--color-gray-10);
555
+ }
556
+ div.gray-darker h1,
557
+ div.gray-darker h2,
558
+ div.gray-darker h3,
559
+ div.gray-darker h4,
560
+ div.gray-darker h5,
561
+ div.gray-darker h6 {
562
+ color: var(--color-gray-11);
563
+ }
564
+ div.ellipsis-boxing h1,
565
+ div.ellipsis-boxing h2,
566
+ div.ellipsis-boxing h3,
567
+ div.ellipsis-boxing h4,
568
+ div.ellipsis-boxing h5,
569
+ div.ellipsis-boxing h6 {
570
+ display: -webkit-box;
571
+ -webkit-line-clamp: 1;
572
+ -webkit-box-orient: vertical;
573
+ overflow: hidden;
574
+ text-overflow: ellipsis;
575
+ overflow-wrap: break-word;
576
+ padding-bottom: 0;
577
+ }
578
+ div.block h1,
579
+ div.block h2,
580
+ div.block h3,
581
+ div.block h4,
582
+ div.block h5,
583
+ div.block h6 {
584
+ display: block;
585
+ }
586
+
587
+ :host {
588
+ word-break: break-word;
589
+ -webkit-hyphens: auto;
590
+ -moz-hyphens: auto;
591
+ -ms-hyphens: auto;
592
+ hyphens: auto;
593
+ }