@sc-360-v2/storefront-cms-library 0.5.53 → 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 +9 -248
- package/dist/allocations-quota-details.scss +451 -0
- package/dist/allocations.scss +112 -0
- package/dist/builder.js +1 -1
- package/dist/hotspot.scss +1 -1
- package/dist/language-selector.scss +4 -4
- package/dist/login.scss +49 -9
- package/dist/order-status.scss +228 -136
- package/dist/repeater-item.scss +2 -2
- package/dist/request-for-quotes.scss +1 -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/language-menu.d.ts +0 -1
- package/dist/types/builder/tools/element-edit/orderStatus.d.ts +320 -187
- package/dist/types/builder/tools/element-edit/userElements.d.ts +192 -7
- package/dist/user-elements.scss +253 -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%;
|
|
@@ -1157,58 +1201,33 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1157
1201
|
}
|
|
1158
1202
|
|
|
1159
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
|
+
|
|
1160
1208
|
.quote_item_wrapper:not(:last-child)::before {
|
|
1161
1209
|
content: "";
|
|
1162
1210
|
position: absolute;
|
|
1163
1211
|
left: 0;
|
|
1164
1212
|
right: 0;
|
|
1165
|
-
bottom:
|
|
1166
|
-
-1 *
|
|
1167
|
-
(
|
|
1168
|
-
var(
|
|
1169
|
-
--_ctm-mob-lt-qa-im-sg,
|
|
1170
|
-
var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
|
|
1171
|
-
) /
|
|
1172
|
-
2
|
|
1173
|
-
)
|
|
1174
|
-
);
|
|
1213
|
+
bottom: dividerGapOffset(--_ctm-lt-qa-im-sg, --_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1175
1214
|
|
|
1176
|
-
height:
|
|
1177
|
-
|
|
1178
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
|
|
1179
|
-
);
|
|
1180
|
-
background-color: var(
|
|
1181
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
|
|
1182
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
|
|
1183
|
-
);
|
|
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);
|
|
1184
1217
|
}
|
|
1185
1218
|
&[data-content-alignment="Vertical"] {
|
|
1186
1219
|
.quota_label_wrapper {
|
|
1187
1220
|
width: 100%;
|
|
1188
1221
|
position: relative;
|
|
1222
|
+
@include dividerGapReserve(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt);
|
|
1189
1223
|
&::after {
|
|
1190
1224
|
content: "";
|
|
1191
1225
|
position: absolute;
|
|
1192
1226
|
left: 0;
|
|
1193
1227
|
right: 0;
|
|
1194
|
-
bottom:
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
var(
|
|
1198
|
-
--_ctm-mob-lt-qa-im-sg,
|
|
1199
|
-
var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
|
|
1200
|
-
) /
|
|
1201
|
-
2
|
|
1202
|
-
)
|
|
1203
|
-
);
|
|
1204
|
-
height: var(
|
|
1205
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
|
|
1206
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
|
|
1207
|
-
);
|
|
1208
|
-
background-color: var(
|
|
1209
|
-
--_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
|
|
1210
|
-
var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
|
|
1211
|
-
);
|
|
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);
|
|
1212
1231
|
}
|
|
1213
1232
|
}
|
|
1214
1233
|
}
|
|
@@ -1371,59 +1390,34 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1371
1390
|
}
|
|
1372
1391
|
}
|
|
1373
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
|
+
|
|
1374
1397
|
.allowance_item_wrapper:not(:last-child)::before {
|
|
1375
1398
|
content: "";
|
|
1376
1399
|
position: absolute;
|
|
1377
1400
|
left: 0;
|
|
1378
1401
|
right: 0;
|
|
1379
|
-
bottom:
|
|
1380
|
-
-1 *
|
|
1381
|
-
(
|
|
1382
|
-
var(
|
|
1383
|
-
--_ctm-mob-lt-ae-im-sg,
|
|
1384
|
-
var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
|
|
1385
|
-
) /
|
|
1386
|
-
2
|
|
1387
|
-
)
|
|
1388
|
-
);
|
|
1402
|
+
bottom: dividerGapOffset(--_ctm-lt-ae-im-sg, --_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1389
1403
|
|
|
1390
|
-
height:
|
|
1391
|
-
|
|
1392
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
|
|
1393
|
-
);
|
|
1394
|
-
background-color: var(
|
|
1395
|
-
--_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
|
|
1396
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
|
|
1397
|
-
);
|
|
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);
|
|
1398
1406
|
}
|
|
1399
1407
|
&[data-content-alignment="Vertical"] {
|
|
1400
1408
|
.allowance_label_wrapper {
|
|
1401
1409
|
width: 100%;
|
|
1402
1410
|
position: relative;
|
|
1403
1411
|
gap: 10px;
|
|
1412
|
+
@include dividerGapReserve(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt);
|
|
1404
1413
|
&::after {
|
|
1405
1414
|
content: "";
|
|
1406
1415
|
position: absolute;
|
|
1407
1416
|
left: 0;
|
|
1408
1417
|
right: 0;
|
|
1409
|
-
bottom:
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
var(
|
|
1413
|
-
--_ctm-mob-lt-ae-im-sg,
|
|
1414
|
-
var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
|
|
1415
|
-
) /
|
|
1416
|
-
2
|
|
1417
|
-
)
|
|
1418
|
-
);
|
|
1419
|
-
height: var(
|
|
1420
|
-
--_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
|
|
1421
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
|
|
1422
|
-
);
|
|
1423
|
-
background-color: var(
|
|
1424
|
-
--_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
|
|
1425
|
-
var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
|
|
1426
|
-
);
|
|
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);
|
|
1427
1421
|
}
|
|
1428
1422
|
}
|
|
1429
1423
|
}
|
|
@@ -1505,6 +1499,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1505
1499
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
|
|
1506
1500
|
text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
|
|
1507
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
|
+
}
|
|
1508
1507
|
}
|
|
1509
1508
|
|
|
1510
1509
|
.label {
|
|
@@ -1517,6 +1516,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1517
1516
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
|
|
1518
1517
|
text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
|
|
1519
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
|
+
}
|
|
1520
1524
|
}
|
|
1521
1525
|
.value {
|
|
1522
1526
|
color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
|
|
@@ -1528,6 +1532,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1528
1532
|
letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
|
|
1529
1533
|
text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
|
|
1530
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
|
+
}
|
|
1531
1540
|
}
|
|
1532
1541
|
|
|
1533
1542
|
.secondary_info_divider {
|
|
@@ -2138,10 +2147,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2138
2147
|
var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
|
|
2139
2148
|
);
|
|
2140
2149
|
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
var(--_ctm-tab-dn-dn-se-dn-se-wt-se-br-wh, var(--_ctm-dn-dn-se-wt-se-br-wh))
|
|
2144
|
-
);
|
|
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);
|
|
2145
2152
|
|
|
2146
2153
|
// border: 1px solid
|
|
2147
2154
|
// var(
|
|
@@ -2179,9 +2186,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2179
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))
|
|
2180
2187
|
// );
|
|
2181
2188
|
display: flex;
|
|
2182
|
-
gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
|
|
2183
2189
|
|
|
2184
2190
|
.option:hover {
|
|
2191
|
+
--_sf-hr-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-hr-se-tt-tm);
|
|
2185
2192
|
--_sf-hr-bd-cr: var(
|
|
2186
2193
|
--_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
|
|
2187
2194
|
var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
|
|
@@ -2206,11 +2213,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2206
2213
|
--_ctm-mob-dn-dn-se-im-se-hr-se-pg,
|
|
2207
2214
|
var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
|
|
2208
2215
|
);
|
|
2209
|
-
--_sf-hr-im-gp: var(
|
|
2210
|
-
--_ctm-mob-dn-dn-se-im-se-hr-se-im-gp,
|
|
2211
|
-
var(--_ctm-tab-dn-dn-se-im-se-hr-se-im-gp, var(--_ctm-dn-dn-se-im-se-hr-se-im-gp))
|
|
2212
|
-
);
|
|
2213
|
-
|
|
2214
2216
|
// for shadow
|
|
2215
2217
|
--_sf-hr-sw-ae: var(
|
|
2216
2218
|
--_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
|
|
@@ -2271,6 +2273,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2271
2273
|
}
|
|
2272
2274
|
|
|
2273
2275
|
.option[data-selected="true"] {
|
|
2276
|
+
--_sf-sd-txt-tr: prepareMediaVariable(--_ctm-dn-dn-se-im-se-sd-se-tt-tm);
|
|
2274
2277
|
--_sf-sd-bd-cr: var(
|
|
2275
2278
|
--_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
|
|
2276
2279
|
var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
|
|
@@ -2371,8 +2374,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2371
2374
|
position: relative;
|
|
2372
2375
|
box-sizing: border-box;
|
|
2373
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.
|
|
2374
2379
|
padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
|
|
2375
|
-
gap: var(--_sf-hr-im-gp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-im-gp));
|
|
2376
2380
|
border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
|
|
2377
2381
|
|
|
2378
2382
|
background-color: var(
|
|
@@ -2443,6 +2447,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2443
2447
|
prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
|
|
2444
2448
|
);
|
|
2445
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
|
+
);
|
|
2446
2454
|
}
|
|
2447
2455
|
}
|
|
2448
2456
|
}
|
|
@@ -2458,57 +2466,39 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2458
2466
|
&[data-flex-direction="row"] {
|
|
2459
2467
|
overflow-x: auto;
|
|
2460
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.
|
|
2461
2473
|
&[data-show-divider="true"] {
|
|
2462
2474
|
&[data-flex-direction="row"] {
|
|
2475
|
+
.option:not(:last-child) {
|
|
2476
|
+
@include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt, right);
|
|
2477
|
+
}
|
|
2478
|
+
|
|
2463
2479
|
.option:not(:last-child)::before {
|
|
2464
2480
|
content: "";
|
|
2465
2481
|
position: absolute;
|
|
2466
2482
|
top: 0;
|
|
2467
2483
|
bottom: 0; /* For full height divider */
|
|
2468
|
-
right:
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
var(
|
|
2472
|
-
--_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
|
|
2473
|
-
var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
|
|
2474
|
-
) /
|
|
2475
|
-
2
|
|
2476
|
-
)
|
|
2477
|
-
); /* Half of your gap, assuming divider is centered in the gap */
|
|
2478
|
-
width: var(
|
|
2479
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-wt,
|
|
2480
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
|
|
2481
|
-
); /* Divider thickness */
|
|
2482
|
-
background-color: var(
|
|
2483
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-cr,
|
|
2484
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
|
|
2485
|
-
); /* 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 */
|
|
2486
2487
|
}
|
|
2487
2488
|
}
|
|
2488
2489
|
&[data-flex-direction="column"] {
|
|
2490
|
+
.option:not(:last-child) {
|
|
2491
|
+
@include dividerGapReserve(--_ctm-dn-dn-se-wt-se-dr-wt);
|
|
2492
|
+
}
|
|
2493
|
+
|
|
2489
2494
|
.option:not(:last-child)::before {
|
|
2490
2495
|
content: "";
|
|
2491
2496
|
position: absolute;
|
|
2492
2497
|
left: 0;
|
|
2493
2498
|
right: 0;
|
|
2494
|
-
bottom:
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
var(
|
|
2498
|
-
--_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
|
|
2499
|
-
var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
|
|
2500
|
-
) /
|
|
2501
|
-
2
|
|
2502
|
-
)
|
|
2503
|
-
);
|
|
2504
|
-
height: var(
|
|
2505
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-wt,
|
|
2506
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
|
|
2507
|
-
);
|
|
2508
|
-
background-color: var(
|
|
2509
|
-
--_ctm-mob-dn-dn-se-wt-se-dr-cr,
|
|
2510
|
-
var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
|
|
2511
|
-
);
|
|
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);
|
|
2512
2502
|
}
|
|
2513
2503
|
}
|
|
2514
2504
|
}
|
|
@@ -2519,7 +2509,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2519
2509
|
align-items: center;
|
|
2520
2510
|
position: relative;
|
|
2521
2511
|
.language__name {
|
|
2522
|
-
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;
|
|
2523
2516
|
font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
|
|
2524
2517
|
font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se);
|
|
2525
2518
|
color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr);
|
|
@@ -2529,6 +2522,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2529
2522
|
text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-an);
|
|
2530
2523
|
letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-lr-sg);
|
|
2531
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
|
+
}
|
|
2532
2532
|
}
|
|
2533
2533
|
}
|
|
2534
2534
|
|
|
@@ -2548,14 +2548,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2548
2548
|
);
|
|
2549
2549
|
line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
|
|
2550
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
|
+
);
|
|
2551
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
|
+
}
|
|
2552
2563
|
}
|
|
2553
2564
|
|
|
2554
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.
|
|
2555
2568
|
.value__selected__new {
|
|
2556
2569
|
width: 100%;
|
|
2557
2570
|
// padding: 8px 12px;
|
|
2558
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
|
+
}
|
|
2559
2586
|
}
|
|
2560
2587
|
.est__dropdown__main {
|
|
2561
2588
|
position: relative;
|
|
@@ -2590,6 +2617,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2590
2617
|
align-items: center;
|
|
2591
2618
|
width: 100%;
|
|
2592
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);
|
|
2593
2624
|
}
|
|
2594
2625
|
|
|
2595
2626
|
.est__dropdown__icon {
|
|
@@ -2624,10 +2655,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
2624
2655
|
border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-wh);
|
|
2625
2656
|
border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-se);
|
|
2626
2657
|
border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-cr);
|
|
2627
|
-
//
|
|
2628
|
-
//
|
|
2629
|
-
//
|
|
2630
|
-
//
|
|
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);
|
|
2631
2663
|
gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp);
|
|
2632
2664
|
// padding: 2px;
|
|
2633
2665
|
// border-radius: 4px;
|