@sc-360-v2/storefront-cms-library 0.5.64 → 0.5.66
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/dist/allocationDetails.scss +34 -53
- package/dist/builder.js +1 -1
- package/dist/cart-summary.scss +12 -0
- package/dist/category-groups-product-options.scss +36 -24
- package/dist/countdown.scss +47 -4
- package/dist/filters.scss +345 -84
- package/dist/icons-builder.js +1 -1
- package/dist/icons-website.js +1 -1
- package/dist/icons.js +1 -1
- package/dist/index.js +1 -1
- package/dist/login.scss +6 -2
- package/dist/map.scss +25 -0
- package/dist/product-actions.scss +2872 -2585
- package/dist/product-highlights.scss +48 -50
- package/dist/product-image-allocation.scss +35 -59
- package/dist/product-options.scss +120 -24
- package/dist/quotes.scss +84 -3
- package/dist/search-results-heading.scss +4 -10
- package/dist/table.scss +141 -39
- package/dist/types/builder/tools/element-edit/cartSummary.d.ts +11 -20
- package/dist/types/builder/tools/element-edit/countdown.d.ts +8 -2
- package/dist/types/builder/tools/element-edit/filters.d.ts +3 -0
- package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -0
- package/dist/types/builder/tools/element-edit/quotes.d.ts +50 -0
- package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts +33 -59
- package/dist/types/builder/tools/element-edit/table.d.ts +14 -0
- package/dist/uploadMedia.js +1 -1
- package/package.json +1 -1
package/dist/cart-summary.scss
CHANGED
|
@@ -2809,6 +2809,18 @@ $overflowSelector: ".flex__overflow";
|
|
|
2809
2809
|
}
|
|
2810
2810
|
}
|
|
2811
2811
|
|
|
2812
|
+
// The `<hr>` between the summary rows. The 1px dashed base is kept so a page saved
|
|
2813
|
+
// before Layout > Show Divider grew style and thickness controls looks unchanged, and
|
|
2814
|
+
// the thickness var repeats 1px as its own fallback for the same reason. Style arrives
|
|
2815
|
+
// as `data-divider-style` — a controls value, like the Line element's `data-line-style`
|
|
2816
|
+
// — and is enumerated here because CSS cannot read an attribute into a property.
|
|
2812
2817
|
.border_dashed {
|
|
2813
2818
|
border: 1px dashed var(--_thm-cs-be-se-3);
|
|
2819
|
+
border-width: prepareMediaVariable(--_ctm-lt-dr-ts, 1px);
|
|
2820
|
+
|
|
2821
|
+
@each $style in solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden {
|
|
2822
|
+
&[data-divider-style="#{$style}"] {
|
|
2823
|
+
border-style: $style;
|
|
2824
|
+
}
|
|
2825
|
+
}
|
|
2814
2826
|
}
|
|
@@ -9,6 +9,18 @@
|
|
|
9
9
|
@return prepareMediaVariable($newVar, prepareMediaVariable($legacyVar));
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
// The value text's typography is not state-aware — the Option Value Text Style panel has
|
|
13
|
+
// no Default / Hover / Selected picker — so its keys sit flat on optionValueTextStyle
|
|
14
|
+
// rather than under defaultState. Three shapes can be on disk, so resolve in order: the
|
|
15
|
+
// flat variable, then the defaultState-nested one saved while the section still had the
|
|
16
|
+
// picker, then the pre-split optionValueStyle.defaultState one.
|
|
17
|
+
@function optionValueTextDefaultVar($flatVar, $stateVar, $legacyVar) {
|
|
18
|
+
@return prepareMediaVariable(
|
|
19
|
+
$flatVar,
|
|
20
|
+
prepareMediaVariable($stateVar, prepareMediaVariable($legacyVar))
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
12
24
|
// Verbatim copy of the ProductOptions swatch styling (styles/elements/product-options.scss),
|
|
13
25
|
// rebound to the Category Groups productOptions design/layout CSS-variable paths.
|
|
14
26
|
// ONLY the variable paths differ from product-options.scss — keep the two in sync.
|
|
@@ -459,23 +471,23 @@
|
|
|
459
471
|
}
|
|
460
472
|
|
|
461
473
|
.option__value__text {
|
|
462
|
-
color: var(--_sf-hr-cr, #{
|
|
463
|
-
font-family: var(--_sf-hr-ft-fy, #{
|
|
464
|
-
text-transform: var(--_sf-hr-tt-tm, #{
|
|
465
|
-
word-wrap: var(--_sf-hr-wd-wp, #{
|
|
466
|
-
word-break: var(--_sf-hr-wd-bk, #{
|
|
467
|
-
font-size: var(--_sf-hr-ft-se, #{
|
|
468
|
-
font-weight: var(--_sf-hr-ft-wt, #{
|
|
474
|
+
color: var(--_sf-hr-cr, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-cr)});
|
|
475
|
+
font-family: var(--_sf-hr-ft-fy, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-fy)});
|
|
476
|
+
text-transform: var(--_sf-hr-tt-tm, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-tm)});
|
|
477
|
+
word-wrap: var(--_sf-hr-wd-wp, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-wp)});
|
|
478
|
+
word-break: var(--_sf-hr-wd-bk, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-bk)});
|
|
479
|
+
font-size: var(--_sf-hr-ft-se, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se)});
|
|
480
|
+
font-weight: var(--_sf-hr-ft-wt, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-wt)});
|
|
469
481
|
font-style: var(
|
|
470
482
|
--_sf-hr-ft-se-ic,
|
|
471
|
-
#{
|
|
483
|
+
#{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se-ic)}
|
|
472
484
|
);
|
|
473
|
-
text-align: var(--_sf-hr-tt-an, #{
|
|
474
|
-
letter-spacing: var(--_sf-hr-lr-sg, #{
|
|
485
|
+
text-align: var(--_sf-hr-tt-an, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-an)});
|
|
486
|
+
letter-spacing: var(--_sf-hr-lr-sg, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-lr-sg)});
|
|
475
487
|
// The pre-split key is `le-ht-dc`; the new section is read under both spellings
|
|
476
488
|
// so whichever one the converter writes resolves.
|
|
477
|
-
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht, #{
|
|
478
|
-
text-decoration: var(--_sf-hr-ue, #{
|
|
489
|
+
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-le-ht-dc)}));
|
|
490
|
+
text-decoration: var(--_sf-hr-ue, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ue)});
|
|
479
491
|
// The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
|
|
480
492
|
// broke onto a second line inside it. Keep it on one line.
|
|
481
493
|
white-space: nowrap;
|
|
@@ -536,20 +548,20 @@
|
|
|
536
548
|
// }
|
|
537
549
|
|
|
538
550
|
.option__value__text {
|
|
539
|
-
color: var(--_sf-hr-cr, #{
|
|
540
|
-
font-family: var(--_sf-hr-ft-fy, #{
|
|
541
|
-
text-transform: var(--_sf-hr-tt-tm, #{
|
|
542
|
-
word-wrap: var(--_sf-hr-wd-wp, #{
|
|
543
|
-
word-break: var(--_sf-hr-wd-bk, #{
|
|
544
|
-
font-size: var(--_sf-hr-ft-se, #{
|
|
545
|
-
font-weight: var(--_sf-hr-ft-wt, #{
|
|
546
|
-
font-style: var(--_sf-hr-ft-se-ic, #{
|
|
547
|
-
text-align: var(--_sf-hr-tt-an, #{
|
|
548
|
-
letter-spacing: var(--_sf-hr-lr-sg, #{
|
|
551
|
+
color: var(--_sf-hr-cr, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-cr, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-cr)});
|
|
552
|
+
font-family: var(--_sf-hr-ft-fy, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-fy)});
|
|
553
|
+
text-transform: var(--_sf-hr-tt-tm, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-tm)});
|
|
554
|
+
word-wrap: var(--_sf-hr-wd-wp, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-wp)});
|
|
555
|
+
word-break: var(--_sf-hr-wd-bk, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-wd-bk)});
|
|
556
|
+
font-size: var(--_sf-hr-ft-se, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se)});
|
|
557
|
+
font-weight: var(--_sf-hr-ft-wt, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-wt)});
|
|
558
|
+
font-style: var(--_sf-hr-ft-se-ic, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ft-se-ic, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ft-se-ic)});
|
|
559
|
+
text-align: var(--_sf-hr-tt-an, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-tt-an)});
|
|
560
|
+
letter-spacing: var(--_sf-hr-lr-sg, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-lr-sg)});
|
|
549
561
|
// The pre-split key is `le-ht-dc`; the new section is read under both spellings
|
|
550
562
|
// so whichever one the converter writes resolves.
|
|
551
|
-
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht, #{
|
|
552
|
-
text-decoration: var(--_sf-hr-ue, #{
|
|
563
|
+
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-le-ht-dc, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-le-ht-dc)}));
|
|
564
|
+
text-decoration: var(--_sf-hr-ue, #{optionValueTextDefaultVar(--_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-tt-se-dt-se-ue, --_ctm-catego-dn-pt-gd-dn-pt-os-pt-os-dn-on-ve-se-dt-se-ue)});
|
|
553
565
|
// The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
|
|
554
566
|
// broke onto a second line inside it. Keep it on one line.
|
|
555
567
|
white-space: nowrap;
|
package/dist/countdown.scss
CHANGED
|
@@ -48,6 +48,12 @@ $dividerValues: (
|
|
|
48
48
|
// padding: var(--_lt-pg);
|
|
49
49
|
// width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
|
|
50
50
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
51
|
+
// Size bounds for the whole countdown. 480px is the narrowest the widget lays out
|
|
52
|
+
// cleanly — below it the counters and the title start fighting for the same space
|
|
53
|
+
// — and 600px keeps it from stretching so wide that the two sit far apart. The
|
|
54
|
+
// Width control still applies between the two.
|
|
55
|
+
// min-width: 480px !important;
|
|
56
|
+
min-width: 600px !important;
|
|
51
57
|
width: var(
|
|
52
58
|
--_sf-el-wh-st-mx,
|
|
53
59
|
calc(
|
|
@@ -292,6 +298,10 @@ $dividerValues: (
|
|
|
292
298
|
display: flex;
|
|
293
299
|
flex-direction: column;
|
|
294
300
|
position: relative;
|
|
301
|
+
// Same reasoning as `.countdown`: without this the title's own width acts as a
|
|
302
|
+
// floor, so the text column refuses to give ground and squeezes the counters
|
|
303
|
+
// out of the widget instead of the two sharing what space there is.
|
|
304
|
+
min-width: 0;
|
|
295
305
|
|
|
296
306
|
background-color: var(
|
|
297
307
|
--_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
|
|
@@ -318,13 +328,20 @@ $dividerValues: (
|
|
|
318
328
|
);
|
|
319
329
|
h1 {
|
|
320
330
|
white-space: nowrap;
|
|
331
|
+
// The title is deliberately kept on one line, so once the column is narrower
|
|
332
|
+
// than the words it has to be cut off rather than bleed across the counters
|
|
333
|
+
// beside it — which is what "SESSIO" running under the digits was.
|
|
334
|
+
overflow: hidden;
|
|
335
|
+
text-overflow: ellipsis;
|
|
321
336
|
}
|
|
322
337
|
}
|
|
323
338
|
|
|
324
339
|
.content__container {
|
|
325
340
|
display: flex;
|
|
326
341
|
flex-direction: column;
|
|
327
|
-
|
|
342
|
+
// Text Container Width, from the widget's text-container layout. 100% is what
|
|
343
|
+
// was hardcoded here, so an untouched countdown is unchanged.
|
|
344
|
+
width: prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-tt-cr-wh, 100%);
|
|
328
345
|
gap: #{prepareMediaVariable(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg)};
|
|
329
346
|
|
|
330
347
|
h1 {
|
|
@@ -534,11 +551,24 @@ $dividerValues: (
|
|
|
534
551
|
width: 100%;
|
|
535
552
|
display: grid;
|
|
536
553
|
grid-auto-flow: column;
|
|
554
|
+
// Counters and dividers on one centre line. Grid items stretch by default, so
|
|
555
|
+
// each column filled the row height and its contents settled wherever their own
|
|
556
|
+
// box put them — which is why the dividers never lined up with the digits.
|
|
557
|
+
align-items: center;
|
|
558
|
+
// And centred along the row. Auto tracks absorb the widget's spare width, but
|
|
559
|
+
// `.countdown__element` is `width: max-content`, so a counter cannot stretch
|
|
560
|
+
// and was left sitting at the START of its track — while a divider, having no
|
|
561
|
+
// width of its own, did stretch and centred its icon in the middle of its own
|
|
562
|
+
// track. The two settled to different places, so a divider never landed
|
|
563
|
+
// halfway between the counters either side of it.
|
|
564
|
+
justify-items: center;
|
|
537
565
|
column-gap: 4px;
|
|
538
566
|
text-align: center;
|
|
539
567
|
|
|
540
|
-
|
|
541
|
-
|
|
568
|
+
// No scrolling here: the element carries a 480px floor (see the min-width on
|
|
569
|
+
// the root below), which is enough to lay the counters out in full, so there
|
|
570
|
+
// is nothing to scroll to. The counters keep their natural minimum size and
|
|
571
|
+
// the text column beside them gives way first.
|
|
542
572
|
&[data-text-align="left"] {
|
|
543
573
|
.countdown__element .countdown__digits {
|
|
544
574
|
justify-content: flex-start;
|
|
@@ -802,14 +832,27 @@ $dividerValues: (
|
|
|
802
832
|
);
|
|
803
833
|
}
|
|
804
834
|
}
|
|
835
|
+
// The divider between two counters. `.countdown` is a column grid, so this is a
|
|
836
|
+
// grid item sitting beside the `.countdown__element` boxes.
|
|
837
|
+
//
|
|
838
|
+
// `align-self: center` matters: grid items stretch by default, so the separator
|
|
839
|
+
// filled the row's full height and the icon inside it centred against that,
|
|
840
|
+
// rather than against the digits it sits between. The `margin-top: 6px` that
|
|
841
|
+
// used to nudge it back was a guess at one particular counter height and threw
|
|
842
|
+
// the alignment out again at any other size.
|
|
805
843
|
.separator {
|
|
806
844
|
display: flex;
|
|
807
845
|
align-items: center;
|
|
808
846
|
justify-content: center;
|
|
847
|
+
align-self: center;
|
|
848
|
+
// Kills the inline-SVG baseline gap, which otherwise adds a few pixels under
|
|
849
|
+
// the glyph and reads as the icon sitting high.
|
|
850
|
+
line-height: 0;
|
|
851
|
+
flex-shrink: 0;
|
|
809
852
|
svg {
|
|
810
853
|
width: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
|
|
811
854
|
height: prepareMediaVariable(--_ctm-dn-dr-se-in-se);
|
|
812
|
-
|
|
855
|
+
display: block;
|
|
813
856
|
|
|
814
857
|
path {
|
|
815
858
|
stroke: prepareMediaVariable(--_ctm-dn-dr-se-in-c1);
|