@sc-360-v2/storefront-cms-library 0.5.52 → 0.5.54
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 +442 -467
- package/dist/allocations-quota-details.scss +451 -0
- package/dist/allocations.scss +284 -13
- package/dist/builder.js +1 -1
- package/dist/cart-summary.scss +237 -854
- package/dist/faq.scss +48 -5
- package/dist/hotspot.scss +1 -1
- package/dist/icon-list.scss +19 -1
- package/dist/image-temp.scss +15 -2
- package/dist/language-selector.scss +99 -33
- package/dist/login.scss +49 -9
- package/dist/my-templates.scss +11 -2
- package/dist/my-wishlist.scss +27 -17
- package/dist/order-status.scss +228 -136
- package/dist/profile.scss +44 -19
- package/dist/quota-details.scss +111 -11
- package/dist/repeater-item.scss +34 -22
- package/dist/request-for-quotes.scss +15 -1
- package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +17 -1
- package/dist/types/builder/tools/element-edit/cartSummary.d.ts +187 -0
- package/dist/types/builder/tools/element-edit/icon-list.d.ts +22 -0
- package/dist/types/builder/tools/element-edit/iconLibrary.d.ts +7 -1
- package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +0 -1
- package/dist/types/builder/tools/element-edit/language-menu.d.ts +0 -15
- package/dist/types/builder/tools/element-edit/orderStatus.d.ts +320 -187
- package/dist/types/builder/tools/element-edit/userElements.d.ts +197 -7
- package/dist/user-elements.scss +259 -221
- package/package.json +1 -1
package/dist/user-elements.scss
CHANGED
|
@@ -4,6 +4,36 @@
|
|
|
4
4
|
|
|
5
5
|
$resizerId: "[data-cms-tool='cms-element-resizer']";
|
|
6
6
|
$resizeActive: '[data-cms-element-resizer="true"]';
|
|
7
|
+
$overflowSelector: ".flex__overflow";
|
|
8
|
+
|
|
9
|
+
// Image Position stores the same compass values the image element uses (they map to
|
|
10
|
+
// Sirv's `canvas.position`); these are their CSS object-position equivalents.
|
|
11
|
+
$imagePositions: (
|
|
12
|
+
"north": center top,
|
|
13
|
+
"northeast": right top,
|
|
14
|
+
"northwest": left top,
|
|
15
|
+
"center": center center,
|
|
16
|
+
"south": center bottom,
|
|
17
|
+
"southeast": right bottom,
|
|
18
|
+
"southwest": left bottom,
|
|
19
|
+
"east": right center,
|
|
20
|
+
"west": left center,
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
// Every divider in this widget is an absolutely positioned pseudo-element, so it takes
|
|
24
|
+
// no space of its own and a thick one used to grow back over the text beside it.
|
|
25
|
+
// Pairing this offset with `dividerGapReserve` on the item itself keeps the whole
|
|
26
|
+
// divider inside the gap at any weight, with half the item spacing clear either side.
|
|
27
|
+
@function dividerGapOffset($spacing-var, $weight-var) {
|
|
28
|
+
@return calc(
|
|
29
|
+
-1 * (#{prepareMediaVariable($spacing-var)} / 2) - #{prepareMediaVariable($weight-var)}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin dividerGapReserve($weight-var, $side: bottom) {
|
|
34
|
+
margin-#{$side}: prepareMediaVariable($weight-var);
|
|
35
|
+
}
|
|
36
|
+
|
|
7
37
|
[data-div-type="element"] {
|
|
8
38
|
&[data-element-type="userElements"] {
|
|
9
39
|
// width: var(
|
|
@@ -509,23 +539,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
509
539
|
|
|
510
540
|
&[data-display-type="Vertical"] {
|
|
511
541
|
&[data-show-divider="true"] {
|
|
542
|
+
.user__element__item:not(:last-child) {
|
|
543
|
+
@include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
|
|
544
|
+
}
|
|
545
|
+
|
|
512
546
|
.user__element__item:not(:last-child)::before {
|
|
513
547
|
content: "";
|
|
514
548
|
position: absolute;
|
|
515
549
|
left: 0;
|
|
516
550
|
right: 0;
|
|
517
|
-
bottom:
|
|
518
|
-
-1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
|
|
519
|
-
);
|
|
551
|
+
bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
|
|
520
552
|
|
|
521
|
-
height:
|
|
522
|
-
|
|
523
|
-
var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
|
|
524
|
-
);
|
|
525
|
-
background-color: var(
|
|
526
|
-
--_ctm-mob-dn-wt-se-dr-cr,
|
|
527
|
-
var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
|
|
528
|
-
);
|
|
553
|
+
height: prepareMediaVariable(--_ctm-dn-wt-se-dr-wt);
|
|
554
|
+
background-color: prepareMediaVariable(--_ctm-dn-wt-se-dr-cr);
|
|
529
555
|
}
|
|
530
556
|
}
|
|
531
557
|
|
|
@@ -622,29 +648,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
622
648
|
width: 100%;
|
|
623
649
|
}
|
|
624
650
|
}
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
651
|
+
// This row divider was drawn unconditionally, so the section's Divider
|
|
652
|
+
// toggle had nothing to switch off in the maximized layout.
|
|
653
|
+
&[data-show-divider="true"] {
|
|
654
|
+
.embla__slide:not(:last-child) {
|
|
655
|
+
@include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt, right);
|
|
656
|
+
}
|
|
628
657
|
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
|
|
639
|
-
) /
|
|
640
|
-
2
|
|
641
|
-
)
|
|
642
|
-
);
|
|
643
|
-
height: 100%;
|
|
644
|
-
width: var(
|
|
645
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
|
|
646
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
|
|
647
|
-
);
|
|
658
|
+
.embla__slide:not(:last-child)::before {
|
|
659
|
+
content: "";
|
|
660
|
+
position: absolute;
|
|
661
|
+
|
|
662
|
+
background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
|
|
663
|
+
right: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
664
|
+
height: 100%;
|
|
665
|
+
width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
666
|
+
}
|
|
648
667
|
}
|
|
649
668
|
.quota_label {
|
|
650
669
|
white-space: nowrap;
|
|
@@ -664,30 +683,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
664
683
|
.allowance_label_wrapper {
|
|
665
684
|
flex-shrink: 0;
|
|
666
685
|
}
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
686
|
+
// Same: gated on the section's own Divider toggle.
|
|
687
|
+
&[data-show-divider="true"] {
|
|
688
|
+
.embla__slide:not(:last-child) {
|
|
689
|
+
@include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt, right);
|
|
690
|
+
}
|
|
670
691
|
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
)
|
|
684
|
-
);
|
|
685
|
-
height: 100%;
|
|
686
|
-
width: var(
|
|
687
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
|
|
688
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
|
|
689
|
-
);
|
|
690
|
-
left: unset;
|
|
692
|
+
.embla__slide:not(:last-child)::before {
|
|
693
|
+
content: "";
|
|
694
|
+
position: absolute;
|
|
695
|
+
|
|
696
|
+
background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
|
|
697
|
+
right: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
698
|
+
height: 100%;
|
|
699
|
+
// Was reading the quota weight, so Allowance > Divider Weight did nothing
|
|
700
|
+
// and the quota's weight drove this divider instead.
|
|
701
|
+
width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
702
|
+
left: unset;
|
|
703
|
+
}
|
|
691
704
|
}
|
|
692
705
|
.allowance_vertical_scroll_wrapper {
|
|
693
706
|
width: unset;
|
|
@@ -781,23 +794,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
781
794
|
}
|
|
782
795
|
|
|
783
796
|
&[data-show-divider="true"] {
|
|
797
|
+
.user__element__item:not(:last-child) {
|
|
798
|
+
@include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
|
|
799
|
+
}
|
|
800
|
+
|
|
784
801
|
.user__element__item:not(:last-child)::before {
|
|
785
802
|
content: "";
|
|
786
803
|
position: absolute;
|
|
787
804
|
top: 0;
|
|
788
805
|
bottom: 0;
|
|
789
|
-
right:
|
|
790
|
-
-1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
|
|
791
|
-
);
|
|
806
|
+
right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
|
|
792
807
|
|
|
793
|
-
width:
|
|
794
|
-
|
|
795
|
-
var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
|
|
796
|
-
);
|
|
797
|
-
background-color: var(
|
|
798
|
-
--_ctm-mob-dn-wt-se-dr-cr,
|
|
799
|
-
var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
|
|
800
|
-
);
|
|
808
|
+
width: prepareMediaVariable(--_ctm-dn-wt-se-dr-wt);
|
|
809
|
+
background-color: prepareMediaVariable(--_ctm-dn-wt-se-dr-cr);
|
|
801
810
|
}
|
|
802
811
|
}
|
|
803
812
|
}
|
|
@@ -822,6 +831,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
822
831
|
.user_elements_user_name_wrapper {
|
|
823
832
|
display: flex;
|
|
824
833
|
gap: 6px;
|
|
834
|
+
// Keeps the avatar and the trailing icon on the name's centre line instead of
|
|
835
|
+
// stretching them to the row height.
|
|
836
|
+
align-items: center;
|
|
825
837
|
&[data-has-link="true"] {
|
|
826
838
|
cursor: pointer;
|
|
827
839
|
&:hover {
|
|
@@ -839,6 +851,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
839
851
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg);
|
|
840
852
|
text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an);
|
|
841
853
|
text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ue);
|
|
854
|
+
text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-tm);
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
// The user's avatar, driven by its own User Logo design section.
|
|
858
|
+
.user_elements_user_logo {
|
|
859
|
+
width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-wh);
|
|
860
|
+
height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-ht);
|
|
861
|
+
flex-shrink: 0;
|
|
862
|
+
object-fit: cover;
|
|
863
|
+
// Padding is part of the configured size rather than added on top of it.
|
|
864
|
+
box-sizing: border-box;
|
|
865
|
+
padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-pg);
|
|
866
|
+
background-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-bd-cr);
|
|
867
|
+
border-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-cr);
|
|
868
|
+
border-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-se);
|
|
869
|
+
border-width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-wh);
|
|
870
|
+
border-radius: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-br-rs);
|
|
871
|
+
box-shadow: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-ae)
|
|
872
|
+
prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-br)
|
|
873
|
+
prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-sd)
|
|
874
|
+
prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-lo-dn-sw-cr);
|
|
875
|
+
// Which part of the picture survives the crop to the configured box. The
|
|
876
|
+
// control stores the image element's compass values, so they are mapped to
|
|
877
|
+
// their CSS equivalents here.
|
|
878
|
+
@each $point, $position in $imagePositions {
|
|
879
|
+
&[data-object-position="#{$point}"] {
|
|
880
|
+
object-position: $position;
|
|
881
|
+
}
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
// Mirroring. Both axes are separate attributes, so the combined case needs
|
|
885
|
+
// its own rule or the second transform would replace the first.
|
|
886
|
+
&[data-flip-x="true"] {
|
|
887
|
+
transform: scaleX(-1);
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
&[data-flip-y="true"] {
|
|
891
|
+
transform: scaleY(-1);
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
&[data-flip-x="true"][data-flip-y="true"] {
|
|
895
|
+
transform: scale(-1, -1);
|
|
896
|
+
}
|
|
842
897
|
}
|
|
843
898
|
|
|
844
899
|
.icon {
|
|
@@ -878,6 +933,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
878
933
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg);
|
|
879
934
|
text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an);
|
|
880
935
|
text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ue);
|
|
936
|
+
text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-tt-tm);
|
|
881
937
|
|
|
882
938
|
.icon {
|
|
883
939
|
cursor: pointer;
|
|
@@ -905,6 +961,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
905
961
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg);
|
|
906
962
|
text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an);
|
|
907
963
|
text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ue);
|
|
964
|
+
text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-tt-tm);
|
|
908
965
|
|
|
909
966
|
.icon {
|
|
910
967
|
cursor: pointer;
|
|
@@ -932,6 +989,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
932
989
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg);
|
|
933
990
|
text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an);
|
|
934
991
|
text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ue);
|
|
992
|
+
text-transform: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-tm);
|
|
935
993
|
|
|
936
994
|
.icon {
|
|
937
995
|
cursor: pointer;
|
|
@@ -954,39 +1012,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
954
1012
|
content: "";
|
|
955
1013
|
margin-left: calc(prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-im-gp) / 2);
|
|
956
1014
|
// margin-top: 3px;
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
|
|
964
|
-
);
|
|
1015
|
+
// The divider is a dot, so Divider Weight is its diameter. Both sizes were
|
|
1016
|
+
// fixed here, which is why the Divider Weight control did nothing.
|
|
1017
|
+
width: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt);
|
|
1018
|
+
height: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt);
|
|
1019
|
+
flex-shrink: 0;
|
|
1020
|
+
background-color: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr);
|
|
965
1021
|
margin-block: auto;
|
|
1022
|
+
// Divider Shape. Round is the shape the widget has always used, so it is
|
|
1023
|
+
// what an element without the setting still gets.
|
|
966
1024
|
border-radius: 50%;
|
|
967
|
-
|
|
968
|
-
// position: absolute;
|
|
969
|
-
// left: 0;
|
|
970
|
-
// right: 0;
|
|
971
|
-
// bottom: calc(
|
|
972
|
-
// -1 *
|
|
973
|
-
// (
|
|
974
|
-
// var(
|
|
975
|
-
// --_ctm-mob-lt-ur-io-im-sg,
|
|
976
|
-
// var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
|
|
977
|
-
// ) /
|
|
978
|
-
// 2
|
|
979
|
-
// )
|
|
980
|
-
// );
|
|
1025
|
+
}
|
|
981
1026
|
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
// );
|
|
1027
|
+
// Divider Shape: a plain rule spanning the row instead of a dot. Weight is
|
|
1028
|
+
// its thickness, so only the cross-axis size changes.
|
|
1029
|
+
&[data-divider-shape="Divider"] .child:not(:last-child)::after {
|
|
1030
|
+
height: auto;
|
|
1031
|
+
align-self: stretch;
|
|
1032
|
+
margin-block: 0;
|
|
1033
|
+
border-radius: 0;
|
|
990
1034
|
}
|
|
991
1035
|
// .user_elements_user_name_wrapper {
|
|
992
1036
|
// width: 100%;
|
|
@@ -1069,6 +1113,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1069
1113
|
}
|
|
1070
1114
|
|
|
1071
1115
|
.quote_item_wrapper {
|
|
1116
|
+
// Set only on the storefront, where clicking a quota row selects that
|
|
1117
|
+
// allocation and its profile. Builder/preview rows are dummy data.
|
|
1118
|
+
&[data-is-clickable="true"] {
|
|
1119
|
+
cursor: pointer;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1072
1122
|
display: flex;
|
|
1073
1123
|
flex-direction: row;
|
|
1074
1124
|
gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
|
|
@@ -1151,58 +1201,33 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1151
1201
|
}
|
|
1152
1202
|
|
|
1153
1203
|
&[data-show-divider="true"] {
|
|
1204
|
+
.quote_item_wrapper:not(:last-child) {
|
|
1205
|
+
@include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1154
1208
|
.quote_item_wrapper:not(:last-child)::before {
|
|
1155
1209
|
content: "";
|
|
1156
1210
|
position: absolute;
|
|
1157
1211
|
left: 0;
|
|
1158
1212
|
right: 0;
|
|
1159
|
-
bottom:
|
|
1160
|
-
-1 *
|
|
1161
|
-
(
|
|
1162
|
-
var(
|
|
1163
|
-
--_ctm-mob-lt-qa-im-sg,
|
|
1164
|
-
var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
|
|
1165
|
-
) /
|
|
1166
|
-
2
|
|
1167
|
-
)
|
|
1168
|
-
);
|
|
1213
|
+
bottom: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1169
1214
|
|
|
1170
|
-
height:
|
|
1171
|
-
|
|
1172
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
|
|
1173
|
-
);
|
|
1174
|
-
background-color: var(
|
|
1175
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
|
|
1176
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
|
|
1177
|
-
);
|
|
1215
|
+
height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1216
|
+
background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
|
|
1178
1217
|
}
|
|
1179
1218
|
&[data-content-alignment="Vertical"] {
|
|
1180
1219
|
.quota_label_wrapper {
|
|
1181
1220
|
width: 100%;
|
|
1182
1221
|
position: relative;
|
|
1222
|
+
@include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1183
1223
|
&::after {
|
|
1184
1224
|
content: "";
|
|
1185
1225
|
position: absolute;
|
|
1186
1226
|
left: 0;
|
|
1187
1227
|
right: 0;
|
|
1188
|
-
bottom:
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
var(
|
|
1192
|
-
--_ctm-mob-lt-qa-im-sg,
|
|
1193
|
-
var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
|
|
1194
|
-
) /
|
|
1195
|
-
2
|
|
1196
|
-
)
|
|
1197
|
-
);
|
|
1198
|
-
height: var(
|
|
1199
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
|
|
1200
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
|
|
1201
|
-
);
|
|
1202
|
-
background-color: var(
|
|
1203
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
|
|
1204
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
|
|
1205
|
-
);
|
|
1228
|
+
bottom: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1229
|
+
height: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1230
|
+
background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr);
|
|
1206
1231
|
}
|
|
1207
1232
|
}
|
|
1208
1233
|
}
|
|
@@ -1365,59 +1390,34 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1365
1390
|
}
|
|
1366
1391
|
}
|
|
1367
1392
|
&[data-show-divider="true"] {
|
|
1393
|
+
.allowance_item_wrapper:not(:last-child) {
|
|
1394
|
+
@include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1368
1397
|
.allowance_item_wrapper:not(:last-child)::before {
|
|
1369
1398
|
content: "";
|
|
1370
1399
|
position: absolute;
|
|
1371
1400
|
left: 0;
|
|
1372
1401
|
right: 0;
|
|
1373
|
-
bottom:
|
|
1374
|
-
-1 *
|
|
1375
|
-
(
|
|
1376
|
-
var(
|
|
1377
|
-
--_ctm-mob-lt-ae-im-sg,
|
|
1378
|
-
var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
|
|
1379
|
-
) /
|
|
1380
|
-
2
|
|
1381
|
-
)
|
|
1382
|
-
);
|
|
1402
|
+
bottom: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1383
1403
|
|
|
1384
|
-
height:
|
|
1385
|
-
|
|
1386
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
|
|
1387
|
-
);
|
|
1388
|
-
background-color: var(
|
|
1389
|
-
--_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
|
|
1390
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
|
|
1391
|
-
);
|
|
1404
|
+
height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1405
|
+
background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
|
|
1392
1406
|
}
|
|
1393
1407
|
&[data-content-alignment="Vertical"] {
|
|
1394
1408
|
.allowance_label_wrapper {
|
|
1395
1409
|
width: 100%;
|
|
1396
1410
|
position: relative;
|
|
1397
1411
|
gap: 10px;
|
|
1412
|
+
@include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1398
1413
|
&::after {
|
|
1399
1414
|
content: "";
|
|
1400
1415
|
position: absolute;
|
|
1401
1416
|
left: 0;
|
|
1402
1417
|
right: 0;
|
|
1403
|
-
bottom:
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
var(
|
|
1407
|
-
--_ctm-mob-lt-ae-im-sg,
|
|
1408
|
-
var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
|
|
1409
|
-
) /
|
|
1410
|
-
2
|
|
1411
|
-
)
|
|
1412
|
-
);
|
|
1413
|
-
height: var(
|
|
1414
|
-
--_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
|
|
1415
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
|
|
1416
|
-
);
|
|
1417
|
-
background-color: var(
|
|
1418
|
-
--_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
|
|
1419
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
|
|
1420
|
-
);
|
|
1418
|
+
bottom: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1419
|
+
height: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1420
|
+
background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr);
|
|
1421
1421
|
}
|
|
1422
1422
|
}
|
|
1423
1423
|
}
|
|
@@ -1499,6 +1499,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1499
1499
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
|
|
1500
1500
|
text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
|
|
1501
1501
|
text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
|
|
1502
|
+
text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-tm);
|
|
1503
|
+
|
|
1504
|
+
&#{$overflowSelector} {
|
|
1505
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
1506
|
+
}
|
|
1502
1507
|
}
|
|
1503
1508
|
|
|
1504
1509
|
.label {
|
|
@@ -1511,6 +1516,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1511
1516
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
|
|
1512
1517
|
text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
|
|
1513
1518
|
text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
|
|
1519
|
+
text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-tm);
|
|
1520
|
+
|
|
1521
|
+
&#{$overflowSelector} {
|
|
1522
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
1523
|
+
}
|
|
1514
1524
|
}
|
|
1515
1525
|
.value {
|
|
1516
1526
|
color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
|
|
@@ -1522,6 +1532,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1522
1532
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
|
|
1523
1533
|
text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
|
|
1524
1534
|
text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
|
|
1535
|
+
text-transform: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-tm);
|
|
1536
|
+
|
|
1537
|
+
&#{$overflowSelector} {
|
|
1538
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
1539
|
+
}
|
|
1525
1540
|
}
|
|
1526
1541
|
|
|
1527
1542
|
.secondary_info_divider {
|
|
@@ -2132,10 +2147,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2132
2147
|
var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
|
|
2133
2148
|
);
|
|
2134
2149
|
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
var(--_ctm-tab-dn-dn-se-dn-se-wt-se-br-wh, var(--_ctm-dn-dn-se-wt-se-br-wh))
|
|
2138
|
-
);
|
|
2150
|
+
// The tablet name carried a doubled `dn-se-`, so tablet fell through to desktop.
|
|
2151
|
+
border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh);
|
|
2139
2152
|
|
|
2140
2153
|
// border: 1px solid
|
|
2141
2154
|
// var(
|
|
@@ -2173,9 +2186,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2173
2186
|
// var(--_ctm-tab-dn-dn-se-lt-ss-it-ad-mn-qy-sg, var(--_ctm-dn-dn-se-lt-ss-it-ad-mn-qy-sg))
|
|
2174
2187
|
// );
|
|
2175
2188
|
display: flex;
|
|
2176
|
-
gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
|
|
2177
2189
|
|
|
2178
2190
|
.option:hover {
|
|
2191
|
+
--_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm);
|
|
2179
2192
|
--_sf-hr-bd-cr: var(
|
|
2180
2193
|
--_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
|
|
2181
2194
|
var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
|
|
@@ -2200,11 +2213,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2200
2213
|
--_ctm-mob-dn-dn-se-im-se-hr-se-pg,
|
|
2201
2214
|
var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
|
|
2202
2215
|
);
|
|
2203
|
-
--_sf-hr-im-gp: var(
|
|
2204
|
-
--_ctm-mob-dn-dn-se-im-se-hr-se-im-gp,
|
|
2205
|
-
var(--_ctm-tab-dn-dn-se-im-se-hr-se-im-gp, var(--_ctm-dn-dn-se-im-se-hr-se-im-gp))
|
|
2206
|
-
);
|
|
2207
|
-
|
|
2208
2216
|
// for shadow
|
|
2209
2217
|
--_sf-hr-sw-ae: var(
|
|
2210
2218
|
--_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
|
|
@@ -2265,6 +2273,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2265
2273
|
}
|
|
2266
2274
|
|
|
2267
2275
|
.option[data-selected="true"] {
|
|
2276
|
+
--_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm);
|
|
2268
2277
|
--_sf-sd-bd-cr: var(
|
|
2269
2278
|
--_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
|
|
2270
2279
|
var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
|
|
@@ -2365,8 +2374,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2365
2374
|
position: relative;
|
|
2366
2375
|
box-sizing: border-box;
|
|
2367
2376
|
|
|
2377
|
+
// An option holds a single label, so Item Style has no items to space — the
|
|
2378
|
+
// gap was dropped from the schema rather than left as a control doing nothing.
|
|
2368
2379
|
padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
|
|
2369
|
-
gap: var(--_sf-hr-im-gp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-im-gp));
|
|
2370
2380
|
border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
|
|
2371
2381
|
|
|
2372
2382
|
background-color: var(
|
|
@@ -2437,6 +2447,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2437
2447
|
prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
|
|
2438
2448
|
);
|
|
2439
2449
|
text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
|
|
2450
|
+
text-transform: var(
|
|
2451
|
+
--_sf-sd-txt-tr,
|
|
2452
|
+
prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
|
|
2453
|
+
);
|
|
2440
2454
|
}
|
|
2441
2455
|
}
|
|
2442
2456
|
}
|
|
@@ -2452,57 +2466,39 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2452
2466
|
&[data-flex-direction="row"] {
|
|
2453
2467
|
overflow-x: auto;
|
|
2454
2468
|
}
|
|
2469
|
+
// Both offsets used to be measured off `--_ctm-dn-dn-se-lt-ss-gp-bn-is`, which
|
|
2470
|
+
// belongs to the commented-out `dropdownStyle.layoutSettings` and is therefore
|
|
2471
|
+
// never emitted. The calc was invalid, so the divider never positioned at all.
|
|
2472
|
+
// The list's own item gap is the spacing these options actually sit in.
|
|
2455
2473
|
&[data-show-divider="true"] {
|
|
2456
2474
|
&[data-flex-direction="row"] {
|
|
2475
|
+
.option:not(:last-child) {
|
|
2476
|
+
@include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt, right);
|
|
2477
|
+
}
|
|
2478
|
+
|
|
2457
2479
|
.option:not(:last-child)::before {
|
|
2458
2480
|
content: "";
|
|
2459
2481
|
position: absolute;
|
|
2460
2482
|
top: 0;
|
|
2461
2483
|
bottom: 0; /* For full height divider */
|
|
2462
|
-
right:
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
var(
|
|
2466
|
-
--_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
|
|
2467
|
-
var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
|
|
2468
|
-
) /
|
|
2469
|
-
2
|
|
2470
|
-
)
|
|
2471
|
-
); /* Half of your gap, assuming divider is centered in the gap */
|
|
2472
|
-
width: var(
|
|
2473
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-wt,
|
|
2474
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
|
|
2475
|
-
); /* Divider thickness */
|
|
2476
|
-
background-color: var(
|
|
2477
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-cr,
|
|
2478
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
|
|
2479
|
-
); /* Divider color */
|
|
2484
|
+
right: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
|
|
2485
|
+
width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt); /* Divider thickness */
|
|
2486
|
+
background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr); /* Divider color */
|
|
2480
2487
|
}
|
|
2481
2488
|
}
|
|
2482
2489
|
&[data-flex-direction="column"] {
|
|
2490
|
+
.option:not(:last-child) {
|
|
2491
|
+
@include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt);
|
|
2492
|
+
}
|
|
2493
|
+
|
|
2483
2494
|
.option:not(:last-child)::before {
|
|
2484
2495
|
content: "";
|
|
2485
2496
|
position: absolute;
|
|
2486
2497
|
left: 0;
|
|
2487
2498
|
right: 0;
|
|
2488
|
-
bottom:
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
var(
|
|
2492
|
-
--_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
|
|
2493
|
-
var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
|
|
2494
|
-
) /
|
|
2495
|
-
2
|
|
2496
|
-
)
|
|
2497
|
-
);
|
|
2498
|
-
height: var(
|
|
2499
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-wt,
|
|
2500
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
|
|
2501
|
-
);
|
|
2502
|
-
background-color: var(
|
|
2503
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-cr,
|
|
2504
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
|
|
2505
|
-
);
|
|
2499
|
+
bottom: dividerGapOffset(--_ctm-dn-dn-se-wt-dn-im-gp, --_ctm-dn-dn-se-wt-se-dr-wt);
|
|
2500
|
+
height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-wt);
|
|
2501
|
+
background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-dr-cr);
|
|
2506
2502
|
}
|
|
2507
2503
|
}
|
|
2508
2504
|
}
|
|
@@ -2513,7 +2509,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2513
2509
|
align-items: center;
|
|
2514
2510
|
position: relative;
|
|
2515
2511
|
.language__name {
|
|
2516
|
-
padding-right
|
|
2512
|
+
// Clearance for the absolutely positioned caret. It was `padding-right`,
|
|
2513
|
+
// which the section's own padding would have had to fight with; as a margin
|
|
2514
|
+
// the Padding control owns all four sides cleanly.
|
|
2515
|
+
margin-right: 20px;
|
|
2517
2516
|
font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
|
|
2518
2517
|
font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se);
|
|
2519
2518
|
color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr);
|
|
@@ -2523,6 +2522,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2523
2522
|
text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-an);
|
|
2524
2523
|
letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-lr-sg);
|
|
2525
2524
|
line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-le-ht);
|
|
2525
|
+
// Padding and Text Transform were declared in the schema but read nowhere.
|
|
2526
|
+
padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-pg);
|
|
2527
|
+
text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-tm);
|
|
2528
|
+
|
|
2529
|
+
&#{$overflowSelector} {
|
|
2530
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
2531
|
+
}
|
|
2526
2532
|
}
|
|
2527
2533
|
}
|
|
2528
2534
|
|
|
@@ -2542,14 +2548,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2542
2548
|
);
|
|
2543
2549
|
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
|
|
2544
2550
|
text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
|
|
2551
|
+
text-transform: var(
|
|
2552
|
+
--_sf-hr-txt-tr,
|
|
2553
|
+
prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-tm)
|
|
2554
|
+
);
|
|
2545
2555
|
white-space: nowrap;
|
|
2556
|
+
|
|
2557
|
+
// Item Style clamps the option label. `white-space: nowrap` above would stop
|
|
2558
|
+
// the box ever wrapping, so the clamp resets it.
|
|
2559
|
+
&#{$overflowSelector} {
|
|
2560
|
+
white-space: normal;
|
|
2561
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
2562
|
+
}
|
|
2546
2563
|
}
|
|
2547
2564
|
|
|
2548
2565
|
//Dropdown
|
|
2566
|
+
// The placeholder shown while nothing is selected. Widget Style's typography tab
|
|
2567
|
+
// is labelled "Placeholder Text" and drives it — none of it was read before.
|
|
2549
2568
|
.value__selected__new {
|
|
2550
2569
|
width: 100%;
|
|
2551
2570
|
// padding: 8px 12px;
|
|
2552
2571
|
text-align: left;
|
|
2572
|
+
font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy);
|
|
2573
|
+
font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se);
|
|
2574
|
+
color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr);
|
|
2575
|
+
font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt);
|
|
2576
|
+
font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic);
|
|
2577
|
+
text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue);
|
|
2578
|
+
text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an);
|
|
2579
|
+
letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg);
|
|
2580
|
+
line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht);
|
|
2581
|
+
text-transform: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-tm);
|
|
2582
|
+
|
|
2583
|
+
&#{$overflowSelector} {
|
|
2584
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
2585
|
+
}
|
|
2553
2586
|
}
|
|
2554
2587
|
.est__dropdown__main {
|
|
2555
2588
|
position: relative;
|
|
@@ -2584,6 +2617,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2584
2617
|
align-items: center;
|
|
2585
2618
|
width: 100%;
|
|
2586
2619
|
padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-pg);
|
|
2620
|
+
// Item Gap used to sit on `.language__conatiner`, which wraps a single
|
|
2621
|
+
// child, so it spaced nothing. The button is where the widget's own items
|
|
2622
|
+
// (icon and label) sit — same place the variant picker applies it.
|
|
2623
|
+
gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
|
|
2587
2624
|
}
|
|
2588
2625
|
|
|
2589
2626
|
.est__dropdown__icon {
|
|
@@ -2618,10 +2655,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2618
2655
|
border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-wh);
|
|
2619
2656
|
border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-se);
|
|
2620
2657
|
border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-cr);
|
|
2621
|
-
//
|
|
2622
|
-
//
|
|
2623
|
-
//
|
|
2624
|
-
//
|
|
2658
|
+
// Gap between the trigger box (Widget Style) and this panel, from
|
|
2659
|
+
// Widget Dropdown > Top Spacing. The offset used to borrow the layout's
|
|
2660
|
+
// option/label spacing, which is a different concept and is no longer
|
|
2661
|
+
// emitted at all.
|
|
2662
|
+
margin-top: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-tp-sg);
|
|
2625
2663
|
gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp);
|
|
2626
2664
|
// padding: 2px;
|
|
2627
2665
|
// border-radius: 4px;
|