@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/allocations.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use "sass:map";
|
|
1
|
+
@use "sass:map";
|
|
2
2
|
@use "sass:list";
|
|
3
3
|
@use "./functions.scss" as *;
|
|
4
4
|
|
|
@@ -633,6 +633,38 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
633
633
|
var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
|
|
634
634
|
);
|
|
635
635
|
|
|
636
|
+
// Header Text > Text Transform and the word wrap/break pair that the
|
|
637
|
+
// typography panel renders alongside it.
|
|
638
|
+
text-transform: prepareMediaVariable(--_ctm-dn-hr-tt-tt-tm, none);
|
|
639
|
+
word-wrap: prepareMediaVariable(--_ctm-dn-hr-tt-wd-wp, normal);
|
|
640
|
+
word-break: prepareMediaVariable(--_ctm-dn-hr-tt-wd-bk, normal);
|
|
641
|
+
|
|
642
|
+
// Header Text > Text Overflow. The renderer adds the class and
|
|
643
|
+
// publishes the line count, since the control is `controls`.
|
|
644
|
+
&.flex__overflow {
|
|
645
|
+
display: -webkit-box;
|
|
646
|
+
-webkit-box-orient: vertical;
|
|
647
|
+
-webkit-line-clamp: var(--_sf-line-clamp, 1);
|
|
648
|
+
overflow: hidden;
|
|
649
|
+
text-overflow: ellipsis;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
// Header Text > Text Transform and the word wrap/break pair that the
|
|
653
|
+
// typography panel renders alongside it.
|
|
654
|
+
text-transform: prepareMediaVariable(--_ctm-dn-hr-tt-tt-tm, none);
|
|
655
|
+
word-wrap: prepareMediaVariable(--_ctm-dn-hr-tt-wd-wp, normal);
|
|
656
|
+
word-break: prepareMediaVariable(--_ctm-dn-hr-tt-wd-bk, normal);
|
|
657
|
+
|
|
658
|
+
// Header Text > Text Overflow. The renderer adds the class and
|
|
659
|
+
// publishes the line count, since the control is `controls`.
|
|
660
|
+
&.flex__overflow {
|
|
661
|
+
display: -webkit-box;
|
|
662
|
+
-webkit-box-orient: vertical;
|
|
663
|
+
-webkit-line-clamp: var(--_sf-line-clamp, 1);
|
|
664
|
+
overflow: hidden;
|
|
665
|
+
text-overflow: ellipsis;
|
|
666
|
+
}
|
|
667
|
+
|
|
636
668
|
&:has(.est__dropdown__main) {
|
|
637
669
|
max-width: 200px;
|
|
638
670
|
}
|
|
@@ -641,11 +673,59 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
641
673
|
}
|
|
642
674
|
tbody {
|
|
643
675
|
.tbody__row__divider {
|
|
676
|
+
// Set by CommonTable only when the caller passed onRowClick.
|
|
677
|
+
// The cells carry it too: a <td> establishes its own cursor context,
|
|
678
|
+
// so the pointer would stop at the row padding otherwise.
|
|
679
|
+
&[data-is-clickable="true"] {
|
|
680
|
+
cursor: pointer;
|
|
681
|
+
|
|
682
|
+
.td__col__divider,
|
|
683
|
+
.td__col__divider * {
|
|
684
|
+
cursor: pointer;
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
|
|
644
688
|
background-color: var(
|
|
645
689
|
--_ctm-mob-dn-te-rw-bd-cr,
|
|
646
690
|
var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
|
|
647
691
|
);
|
|
648
692
|
|
|
693
|
+
// Table Row > Hover Background. Falls back to the default background
|
|
694
|
+
// so a row that has no hover colour set does not go transparent.
|
|
695
|
+
&:hover {
|
|
696
|
+
background-color: var(
|
|
697
|
+
--_ctm-mob-dn-te-rw-bd-cr-hr,
|
|
698
|
+
var(
|
|
699
|
+
--_ctm-tab-dn-te-rw-bd-cr-hr,
|
|
700
|
+
var(
|
|
701
|
+
--_ctm-dn-te-rw-bd-cr-hr,
|
|
702
|
+
var(
|
|
703
|
+
--_ctm-mob-dn-te-rw-bd-cr,
|
|
704
|
+
var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
|
|
705
|
+
)
|
|
706
|
+
)
|
|
707
|
+
)
|
|
708
|
+
);
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
// Table Row > Hover Background. Falls back to the default background
|
|
712
|
+
// so a row that has no hover colour set does not go transparent.
|
|
713
|
+
&:hover {
|
|
714
|
+
background-color: var(
|
|
715
|
+
--_ctm-mob-dn-te-rw-bd-cr-hr,
|
|
716
|
+
var(
|
|
717
|
+
--_ctm-tab-dn-te-rw-bd-cr-hr,
|
|
718
|
+
var(
|
|
719
|
+
--_ctm-dn-te-rw-bd-cr-hr,
|
|
720
|
+
var(
|
|
721
|
+
--_ctm-mob-dn-te-rw-bd-cr,
|
|
722
|
+
var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
|
|
723
|
+
)
|
|
724
|
+
)
|
|
725
|
+
)
|
|
726
|
+
);
|
|
727
|
+
}
|
|
728
|
+
|
|
649
729
|
height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
|
|
650
730
|
|
|
651
731
|
.td__col__divider {
|
|
@@ -746,13 +826,166 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
746
826
|
justify-content: var(justify-center);
|
|
747
827
|
}
|
|
748
828
|
|
|
829
|
+
// Border, radius and shadow for the pagination bar. None of these existed,
|
|
830
|
+
// so the panel's new controls had nothing to paint.
|
|
831
|
+
border-color: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr);
|
|
832
|
+
border-style: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none);
|
|
833
|
+
border-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0);
|
|
834
|
+
border-radius: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0);
|
|
835
|
+
box-shadow: var(
|
|
836
|
+
--_show-shadow,
|
|
837
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0)
|
|
838
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0)
|
|
839
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0)
|
|
840
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent)
|
|
841
|
+
);
|
|
842
|
+
|
|
843
|
+
&:hover {
|
|
844
|
+
background-color: var(
|
|
845
|
+
--_sf-bd-cr,
|
|
846
|
+
prepareMediaVariable(
|
|
847
|
+
--_ctm-dn-pn-hr-se-bd-cr,
|
|
848
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)
|
|
849
|
+
)
|
|
850
|
+
);
|
|
851
|
+
border-color: prepareMediaVariable(
|
|
852
|
+
--_ctm-dn-pn-hr-se-br-cr,
|
|
853
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr)
|
|
854
|
+
);
|
|
855
|
+
border-style: prepareMediaVariable(
|
|
856
|
+
--_ctm-dn-pn-hr-se-br-se,
|
|
857
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none)
|
|
858
|
+
);
|
|
859
|
+
border-width: prepareMediaVariable(
|
|
860
|
+
--_ctm-dn-pn-hr-se-br-wh,
|
|
861
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0)
|
|
862
|
+
);
|
|
863
|
+
border-radius: prepareMediaVariable(
|
|
864
|
+
--_ctm-dn-pn-hr-se-br-rs,
|
|
865
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0)
|
|
866
|
+
);
|
|
867
|
+
box-shadow: var(
|
|
868
|
+
--_show-shadow,
|
|
869
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0)
|
|
870
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0)
|
|
871
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0)
|
|
872
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent)
|
|
873
|
+
);
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
// Border, radius and shadow for the pagination bar. None of these existed,
|
|
877
|
+
// so the panel's new controls had nothing to paint.
|
|
878
|
+
border-color: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr);
|
|
879
|
+
border-style: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none);
|
|
880
|
+
border-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0);
|
|
881
|
+
border-radius: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0);
|
|
882
|
+
box-shadow: var(
|
|
883
|
+
--_show-shadow,
|
|
884
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0)
|
|
885
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0)
|
|
886
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0)
|
|
887
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent)
|
|
888
|
+
);
|
|
889
|
+
|
|
890
|
+
&:hover {
|
|
891
|
+
background-color: var(
|
|
892
|
+
--_sf-bd-cr,
|
|
893
|
+
prepareMediaVariable(
|
|
894
|
+
--_ctm-dn-pn-hr-se-bd-cr,
|
|
895
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)
|
|
896
|
+
)
|
|
897
|
+
);
|
|
898
|
+
border-color: prepareMediaVariable(
|
|
899
|
+
--_ctm-dn-pn-hr-se-br-cr,
|
|
900
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr)
|
|
901
|
+
);
|
|
902
|
+
border-style: prepareMediaVariable(
|
|
903
|
+
--_ctm-dn-pn-hr-se-br-se,
|
|
904
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none)
|
|
905
|
+
);
|
|
906
|
+
border-width: prepareMediaVariable(
|
|
907
|
+
--_ctm-dn-pn-hr-se-br-wh,
|
|
908
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0)
|
|
909
|
+
);
|
|
910
|
+
border-radius: prepareMediaVariable(
|
|
911
|
+
--_ctm-dn-pn-hr-se-br-rs,
|
|
912
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0)
|
|
913
|
+
);
|
|
914
|
+
box-shadow: var(
|
|
915
|
+
--_show-shadow,
|
|
916
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0)
|
|
917
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0)
|
|
918
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0)
|
|
919
|
+
prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent)
|
|
920
|
+
);
|
|
921
|
+
}
|
|
922
|
+
|
|
749
923
|
button {
|
|
924
|
+
// Default glyph shows, hover glyph waits. Both are in the DOM so the
|
|
925
|
+
// swap costs no re-render; when no hover icon is picked the renderer
|
|
926
|
+
// falls back to the default one, so the pair looks identical.
|
|
927
|
+
.pagination__icon {
|
|
928
|
+
display: flex;
|
|
929
|
+
|
|
930
|
+
&--hover {
|
|
931
|
+
display: none;
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
&:hover {
|
|
936
|
+
.pagination__icon {
|
|
937
|
+
display: none;
|
|
938
|
+
|
|
939
|
+
&--hover {
|
|
940
|
+
display: flex;
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
|
|
750
945
|
svg {
|
|
751
|
-
|
|
752
|
-
|
|
946
|
+
// Icon Size and Icon Color live on the pagination section's states, so
|
|
947
|
+
// the variables carry a `dt-se` / `hr-se` segment. These read
|
|
948
|
+
// `--_ctm-dn-pn-in-*` — a path nothing writes — and the svg itself was
|
|
949
|
+
// pinned to a hardcoded 18px and grey, so neither control did anything.
|
|
950
|
+
width: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
|
|
951
|
+
height: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
|
|
952
|
+
path {
|
|
953
|
+
stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500));
|
|
954
|
+
}
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
&:hover svg {
|
|
958
|
+
width: prepareMediaVariable(
|
|
959
|
+
--_ctm-dn-pn-hr-se-in-se,
|
|
960
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
|
|
961
|
+
);
|
|
962
|
+
height: prepareMediaVariable(
|
|
963
|
+
--_ctm-dn-pn-hr-se-in-se,
|
|
964
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
|
|
965
|
+
);
|
|
966
|
+
path {
|
|
967
|
+
stroke: prepareMediaVariable(
|
|
968
|
+
--_ctm-dn-pn-hr-se-in-c1,
|
|
969
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500))
|
|
970
|
+
);
|
|
971
|
+
stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500));
|
|
972
|
+
}
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
&:hover svg {
|
|
976
|
+
width: prepareMediaVariable(
|
|
977
|
+
--_ctm-dn-pn-hr-se-in-se,
|
|
978
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
|
|
979
|
+
);
|
|
980
|
+
height: prepareMediaVariable(
|
|
981
|
+
--_ctm-dn-pn-hr-se-in-se,
|
|
982
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
|
|
983
|
+
);
|
|
753
984
|
path {
|
|
754
|
-
stroke:
|
|
755
|
-
|
|
985
|
+
stroke: prepareMediaVariable(
|
|
986
|
+
--_ctm-dn-pn-hr-se-in-c1,
|
|
987
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500))
|
|
988
|
+
);
|
|
756
989
|
}
|
|
757
990
|
}
|
|
758
991
|
}
|
|
@@ -857,16 +1090,37 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
857
1090
|
);
|
|
858
1091
|
}
|
|
859
1092
|
}
|
|
1093
|
+
// Same wrong path as the svg rule above: the icon variables carry the
|
|
1094
|
+
// section's state segment. Only the "next" button has this class in the
|
|
1095
|
+
// markup, so the svg rules are what actually style both arrows — these are
|
|
1096
|
+
// kept for the text colour they contribute.
|
|
860
1097
|
.pagination__arrows {
|
|
861
|
-
color:
|
|
862
|
-
|
|
863
|
-
var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
|
|
864
|
-
);
|
|
1098
|
+
color: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1);
|
|
1099
|
+
font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se);
|
|
865
1100
|
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
1101
|
+
&:hover {
|
|
1102
|
+
color: prepareMediaVariable(
|
|
1103
|
+
--_ctm-dn-pn-hr-se-in-c1,
|
|
1104
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1)
|
|
1105
|
+
);
|
|
1106
|
+
font-size: prepareMediaVariable(
|
|
1107
|
+
--_ctm-dn-pn-hr-se-in-se,
|
|
1108
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se)
|
|
1109
|
+
);
|
|
1110
|
+
}
|
|
1111
|
+
color: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1);
|
|
1112
|
+
font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se);
|
|
1113
|
+
|
|
1114
|
+
&:hover {
|
|
1115
|
+
color: prepareMediaVariable(
|
|
1116
|
+
--_ctm-dn-pn-hr-se-in-c1,
|
|
1117
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1)
|
|
1118
|
+
);
|
|
1119
|
+
font-size: prepareMediaVariable(
|
|
1120
|
+
--_ctm-dn-pn-hr-se-in-se,
|
|
1121
|
+
prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se)
|
|
1122
|
+
);
|
|
1123
|
+
}
|
|
870
1124
|
}
|
|
871
1125
|
}
|
|
872
1126
|
}
|
|
@@ -1192,6 +1446,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1192
1446
|
display: flex;
|
|
1193
1447
|
align-items: center;
|
|
1194
1448
|
gap: 12px;
|
|
1449
|
+
// Stands in for the profile dropdown when there is only one
|
|
1450
|
+
// profile. Matches the heading beside it so the row reads as one line.
|
|
1451
|
+
.allocation_single_profile_name {
|
|
1452
|
+
color: #475467;
|
|
1453
|
+
font-size: 14px;
|
|
1454
|
+
font-weight: 600;
|
|
1455
|
+
line-height: 20px;
|
|
1456
|
+
display: flex;
|
|
1457
|
+
align-items: center;
|
|
1458
|
+
}
|
|
1459
|
+
|
|
1195
1460
|
.slider_heading {
|
|
1196
1461
|
height: auto;
|
|
1197
1462
|
}
|
|
@@ -1234,6 +1499,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
1234
1499
|
}
|
|
1235
1500
|
|
|
1236
1501
|
.allocations_slider_slide_wrapper {
|
|
1502
|
+
// Clicking an allocation selects it and its profile (it replaced the
|
|
1503
|
+
// Redeem button), so the whole slide is the hit area.
|
|
1504
|
+
&[data-is-clickable="true"] {
|
|
1505
|
+
cursor: pointer;
|
|
1506
|
+
}
|
|
1507
|
+
|
|
1237
1508
|
display: flex;
|
|
1238
1509
|
align-items: center;
|
|
1239
1510
|
gap: 12px;
|