@sc-360-v2/storefront-cms-library 0.3.43 → 0.3.44

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.
@@ -753,7 +753,7 @@ $dark-color: #343a40;
753
753
  &_shipping_option_container {
754
754
  display: flex;
755
755
  flex-direction: column;
756
- gap: var(--_ctm-lt-me-as-pt-io-hl-gp);
756
+ gap: 6px;
757
757
 
758
758
  @media (max-width: 500px) {
759
759
  flex-direction: row;
@@ -896,13 +896,14 @@ $dark-color: #343a40;
896
896
 
897
897
  @media (min-width: 768px) {
898
898
  grid-template-columns: 1fr 1fr;
899
+ gap: 32px;
899
900
  }
900
901
  }
901
902
 
902
903
  &__group {
903
904
  display: flex;
904
905
  flex-direction: column;
905
- gap: var(--_ctm-lt-sg-md-le-gp);
906
+ gap: 4px;
906
907
 
907
908
  .chk_shipping_method_heading {
908
909
  color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
@@ -1007,6 +1008,18 @@ $dark-color: #343a40;
1007
1008
  border-color: #2563eb;
1008
1009
  }
1009
1010
  }
1011
+
1012
+ // order level shipping
1013
+ .order_level_shipping {
1014
+ display: flex;
1015
+ gap: 24px;
1016
+ .order_level_shipping_img {
1017
+ width: 120px;
1018
+ height: 120px;
1019
+ background-color: var(--_gray-100);
1020
+ border-radius: 6px;
1021
+ }
1022
+ }
1010
1023
  }
1011
1024
 
1012
1025
  .chk_payment-options {
@@ -1100,7 +1113,7 @@ $dark-color: #343a40;
1100
1113
 
1101
1114
  &_left_container {
1102
1115
  display: flex;
1103
- gap: var(--_ctm-lt-pt-os-cr-vl-gp);
1116
+ gap: 12px;
1104
1117
  align-items: flex-start;
1105
1118
 
1106
1119
  @media (max-width: 500px) {
@@ -1163,7 +1176,6 @@ $dark-color: #343a40;
1163
1176
  &__info_wrapper {
1164
1177
  display: flex;
1165
1178
  flex-direction: column;
1166
- gap: var(--_ctm-lt-ll-ad-it-gp);
1167
1179
  white-space: nowrap;
1168
1180
 
1169
1181
  .chk_payment_options_name {
@@ -1312,6 +1324,9 @@ $dark-color: #343a40;
1312
1324
  line-height: var(--_ctm-dn-pt-os-dn-pt-hg-dn-le-ht);
1313
1325
  letter-spacing: var(--_ctm-dn-pt-os-dn-pt-hg-dn-lr-sg);
1314
1326
  text-decoration: var(--_ctm-dn-pt-os-dn-pt-hg-dn-ue);
1327
+ &.pl_0 {
1328
+ padding-left: 0px;
1329
+ }
1315
1330
  }
1316
1331
 
1317
1332
  &_form_wrapper {
@@ -1753,7 +1768,6 @@ $dark-color: #343a40;
1753
1768
  gap: 6px;
1754
1769
  background-color: var(--_ctm-dn-pt-os-dn-ne-dn-bd-cr);
1755
1770
  border-color: var(--_ctm-dn-pt-os-dn-ne-dn-br-cr);
1756
- border-radius: var(--_ctm-dn-pt-os-dn-ne-dn-br-rs);
1757
1771
  border-style: var(--_ctm-dn-pt-os-dn-ne-dn-br-se);
1758
1772
  border-width: var(--_ctm-dn-pt-os-dn-ne-dn-br-wh);
1759
1773
  color: var(--_ctm-dn-pt-os-dn-ne-dn-cr);
@@ -1920,3 +1934,180 @@ $dark-color: #343a40;
1920
1934
  }
1921
1935
  }
1922
1936
  }
1937
+
1938
+ // credit card form syles
1939
+ .chk_cred_form_details {
1940
+ border-top: 1px solid var(--_gray-300);
1941
+ padding: 16px;
1942
+ .chk_basic_form_title {
1943
+ font-size: 14px;
1944
+ margin-bottom: 16px;
1945
+ font-weight: 600;
1946
+ }
1947
+ .chk_form_fields {
1948
+ h3 {
1949
+ font-size: 14px;
1950
+ margin-bottom: 8px;
1951
+ }
1952
+ display: flex;
1953
+ flex-direction: column;
1954
+ gap: 24px;
1955
+ width: 500px;
1956
+ .chk_form_field {
1957
+ width: 100%;
1958
+ &.expiry_details {
1959
+ width: 80px;
1960
+ }
1961
+
1962
+ display: flex;
1963
+ flex-direction: column;
1964
+ gap: 6px;
1965
+ width: 100%;
1966
+
1967
+ .chk_form_field_label {
1968
+ font-size: 14px;
1969
+ color: var(--_gray-600);
1970
+ }
1971
+ .chk_form_field_inp {
1972
+ height: 40px;
1973
+ border: 1px solid var(--_gray-300);
1974
+ border-radius: 4px;
1975
+ padding-inline: 10px;
1976
+ &:placeholder-shown {
1977
+ color: var(--_gray-400);
1978
+ padding-left: 16px;
1979
+ }
1980
+ }
1981
+ .error_msg {
1982
+ display: block;
1983
+ color: var(--_error-700);
1984
+ font-size: 12px;
1985
+ }
1986
+ }
1987
+
1988
+ .checkbox {
1989
+ width: auto;
1990
+
1991
+ label {
1992
+ display: flex;
1993
+ align-items: center;
1994
+ gap: 8px;
1995
+ cursor: pointer;
1996
+ position: relative;
1997
+ user-select: none;
1998
+
1999
+ input[type="checkbox"] {
2000
+ display: none;
2001
+
2002
+ &:checked + .custom-checkbox::after {
2003
+ opacity: 1;
2004
+ }
2005
+ }
2006
+
2007
+ .custom-checkbox {
2008
+ width: 16px;
2009
+ height: 16px;
2010
+ border: 2px solid var(--_primary-400);
2011
+ border-radius: 4px;
2012
+ position: relative;
2013
+ display: inline-block;
2014
+ box-sizing: border-box;
2015
+
2016
+ &::after {
2017
+ content: "";
2018
+ position: absolute;
2019
+ left: 3px;
2020
+ top: 0px;
2021
+ width: 4px;
2022
+ height: 8px;
2023
+ border: solid var(--_primary-400);
2024
+ border-width: 0 1px 1px 0;
2025
+ transform: rotate(45deg);
2026
+ opacity: 0;
2027
+ transition: opacity 0.2s ease-in-out;
2028
+ }
2029
+ }
2030
+ }
2031
+ }
2032
+ .expiry_details {
2033
+ display: flex;
2034
+ gap: 12px;
2035
+ .cvv_inp {
2036
+ width: 110px;
2037
+ }
2038
+ }
2039
+ }
2040
+ }
2041
+
2042
+ // giftcard form styles
2043
+ .chk_gift_card_details {
2044
+ border-top: 1px solid var(--_gray-300);
2045
+ padding: 16px;
2046
+ .chk_gift_card_form {
2047
+ display: flex;
2048
+ flex-direction: column;
2049
+ gap: 16px;
2050
+ max-width: 480px;
2051
+ .chk_gift_cart_form_title {
2052
+ font-size: 14px;
2053
+ font-weight: 600;
2054
+ }
2055
+
2056
+ .chk_gift_form_fields {
2057
+ display: flex;
2058
+ gap: 12px;
2059
+ width: 100%;
2060
+ .chk_gift_inp_field {
2061
+ display: flex;
2062
+ flex-direction: column;
2063
+ gap: 6px;
2064
+ width: 100%;
2065
+ label {
2066
+ color: var(--_gray-600);
2067
+ }
2068
+ .chk_gift_inp {
2069
+ border: 1px solid var(--_gray-300);
2070
+ border-radius: 6px;
2071
+ height: 40px;
2072
+ padding-inline: 10px;
2073
+ }
2074
+ &.pin {
2075
+ width: 110px;
2076
+ }
2077
+ .error_msg {
2078
+ display: block;
2079
+ color: var(--_error-700);
2080
+ font-size: 12px;
2081
+ }
2082
+ }
2083
+ .error_msg {
2084
+ color: var(--_error-700);
2085
+ font-size: 14px;
2086
+ }
2087
+ }
2088
+ }
2089
+ }
2090
+ .chk_form_actions {
2091
+ display: flex;
2092
+ gap: 12px;
2093
+ .chk_sav_btn {
2094
+ padding: 12px 16px;
2095
+ background-color: var(--_primary-400);
2096
+ border-radius: 6px;
2097
+ color: var(--_base-white);
2098
+ &:hover {
2099
+ background-color: var(--_primary-500);
2100
+ }
2101
+ }
2102
+ .chk_can_btn {
2103
+ padding: 12px 16px;
2104
+ background-color: transparent;
2105
+ border-radius: 6px;
2106
+ color: var(--_gray-600);
2107
+ padding-inline: 10px;
2108
+ &:hover {
2109
+ background-color: var(--_gray-50);
2110
+ color: var(--_gray-900);
2111
+ }
2112
+ }
2113
+ }
@@ -1,6 +1,12 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
+ $flex: "flx";
5
+ $grid: "grd";
6
+ $flexRow: "rw";
7
+ $flexRowReverse: "rw-rv";
8
+ $flexColumn: "cln";
9
+ $flexColumnReverse: "cln-rv";
4
10
  [data-div-type="element"] {
5
11
  &[data-element-type="layouter-pro-item"] {
6
12
  // width: var(--_sf-con-nw-wh);
@@ -28,16 +34,46 @@
28
34
  background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
29
35
  background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
30
36
  border-radius: prepareMediaVariable(--_ctm-layout-dn-br-rs);
37
+
38
+ display: var(--_d-flex) !important;
39
+ // flex-direction: column;
40
+ // gap: prepareMediaVariable(--_ctm-layout-lt-im-gp);
41
+ // align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
42
+ column-gap: prepareMediaVariable(--_ctm-layout-lt-cn-gp);
43
+ row-gap: prepareMediaVariable(--_ctm-layout-lt-rw-gp);
44
+
45
+ &:is(.#{$flex} > *) {
46
+ display: var(--_d-flex) !important;
47
+ flex-wrap: prepareMediaVariable(--_ctm-layout-lt-fx-wp);
48
+ overflow: prepareMediaVariable(--_ctm-layout-lt-fx-ow);
49
+
50
+ &.#{$flexRow} {
51
+ flex-direction: row;
52
+ align-items: prepareMediaVariable(--_ctm-layout-lt-an-is);
53
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
54
+ }
55
+ &.#{$flexRowReverse} {
56
+ flex-direction: row-reverse;
57
+ align-items: prepareMediaVariable(--_ctm-layout-lt-an-is);
58
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
59
+ }
60
+ &.#{$flexColumn} {
61
+ flex-direction: column;
62
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-an-is);
63
+ align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
64
+ }
65
+ &.#{$flexColumnReverse} {
66
+ flex-direction: column-reverse;
67
+ justify-content: prepareMediaVariable(--_ctm-layout-lt-an-is);
68
+ align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
69
+ }
70
+ }
71
+
31
72
  &[data-show-border="true"] {
32
73
  border-color: prepareMediaVariable(--_ctm-layout-dn-br-cr);
33
74
  border-style: prepareMediaVariable(--_ctm-layout-dn-br-se);
34
75
  border-width: prepareMediaVariable(--_ctm-layout-dn-br-wh);
35
76
  }
36
-
37
- display: var(--_d-flex) !important;
38
- flex-direction: column;
39
- gap: prepareMediaVariable(--_ctm-layout-lt-im-gp);
40
- align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
41
77
  }
42
78
  }
43
79
  }
@@ -12,9 +12,9 @@ $flexColumnReverse: "cln-rv";
12
12
  &[data-element-type="layouter-pro"] {
13
13
  // width: var(--_sf-con-nw-wh);
14
14
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
15
- // width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
15
+ width: calc(1% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
16
16
  max-width: 100% !important;
17
- width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
17
+ // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
18
18
  // width: 100%;
19
19
  // height: var(--_ctm-con-lt-ht);
20
20
  margin: prepareMediaVariable(--_ctm-layou-lt-mn);
@@ -1,6 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @use "../functions.scss" as *;
3
+ @use "./functions.scss" as *;
4
4
 
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="orderStatus"] {
@@ -986,11 +986,51 @@
986
986
  );
987
987
 
988
988
  h3 {
989
- font-size: 14px;
990
- color: #667085;
989
+ // font-size: 14px;
990
+ // color: #667085;
991
991
  margin-bottom: 24px;
992
- line-height: 20px;
993
- font-weight: 400;
992
+ // line-height: 20px;
993
+ // font-weight: 400;
994
+ padding: var(
995
+ --_ctm-mob-dn-pt-wt-pt-te-pg,
996
+ var(--_ctm-tab-dn-pt-wt-pt-te-im-pg, var(--_ctm-dn-pt-wt-pt-te-pg))
997
+ );
998
+ font-family: var(
999
+ --_ctm-mob-dn-pt-wt-pt-te-ft-fy,
1000
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-fy, var(--_ctm-dn-pt-wt-pt-te-ft-fy))
1001
+ );
1002
+ font-size: var(
1003
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se,
1004
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se, var(--_ctm-dn-pt-wt-pt-te-ft-se))
1005
+ );
1006
+ color: var(
1007
+ --_ctm-mob-dn-pt-wt-pt-te-cr,
1008
+ var(--_ctm-tab-dn-pt-wt-pt-te-cr, var(--_ctm-dn-pt-wt-pt-te-cr))
1009
+ );
1010
+ font-weight: var(
1011
+ --_ctm-mob-dn-pt-wt-pt-te-ft-wt,
1012
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-wt, var(--_ctm-dn-pt-wt-pt-te-ft-wt))
1013
+ );
1014
+ text-decoration: var(
1015
+ --_ctm-mob-dn-pt-wt-pt-te-ue,
1016
+ var(--_ctm-tab-dn-pt-wt-pt-te-ue, var(--_ctm-dn-pt-wt-pt-te-ue))
1017
+ );
1018
+ letter-spacing: var(
1019
+ --_ctm-mob-dn-pt-wt-pt-te-lr-sg,
1020
+ var(--_ctm-tab-dn-pt-wt-pt-te-lr-sg, var(--_ctm-dn-pt-wt-pt-te-lr-sg))
1021
+ );
1022
+ line-height: var(
1023
+ --_ctm-mob-dn-pt-wt-pt-te-le-ht,
1024
+ var(--_ctm-tab-dn-pt-wt-pt-te-le-ht, var(--_ctm-dn-pt-wt-pt-te-le-ht))
1025
+ );
1026
+ font-style: var(
1027
+ --_ctm-mob-dn-pt-wt-pt-te-ft-se-ic,
1028
+ var(--_ctm-tab-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-dn-pt-wt-pt-te-ft-se-ic))
1029
+ );
1030
+ text-align: var(
1031
+ --_ctm-mob-dn-pt-wt-pt-te-tt-an,
1032
+ var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an))
1033
+ );
994
1034
  }
995
1035
 
996
1036
  .items-grid {
@@ -1123,44 +1163,44 @@
1123
1163
  // color: var(--_gray-900);
1124
1164
  // line-height: 20px;
1125
1165
  padding: var(
1126
- --_ctm-mob-dn-pt-wt-pt-te-pg,
1127
- var(--_ctm-tab-dn-pt-wt-pt-te-im-pg, var(--_ctm-dn-pt-wt-pt-te-pg))
1166
+ --_ctm-mob-dn-pt-wt-pt-ne-pg,
1167
+ var(--_ctm-tab-dn-pt-wt-pt-ne-im-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1128
1168
  );
1129
1169
  font-family: var(
1130
- --_ctm-mob-dn-pt-wt-pt-te-ft-fy,
1131
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-fy, var(--_ctm-dn-pt-wt-pt-te-ft-fy))
1170
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
1171
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
1132
1172
  );
1133
1173
  font-size: var(
1134
- --_ctm-mob-dn-pt-wt-pt-te-ft-se,
1135
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-se, var(--_ctm-dn-pt-wt-pt-te-ft-se))
1174
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-se,
1175
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se))
1136
1176
  );
1137
1177
  color: var(
1138
- --_ctm-mob-dn-pt-wt-pt-te-cr,
1139
- var(--_ctm-tab-dn-pt-wt-pt-te-cr, var(--_ctm-dn-pt-wt-pt-te-cr))
1178
+ --_ctm-mob-dn-pt-wt-pt-ne-cr,
1179
+ var(--_ctm-tab-dn-pt-wt-pt-ne-cr, var(--_ctm-dn-pt-wt-pt-ne-cr))
1140
1180
  );
1141
1181
  font-weight: var(
1142
- --_ctm-mob-dn-pt-wt-pt-te-ft-wt,
1143
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-wt, var(--_ctm-dn-pt-wt-pt-te-ft-wt))
1182
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-wt,
1183
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-dn-pt-wt-pt-ne-ft-wt))
1144
1184
  );
1145
1185
  text-decoration: var(
1146
- --_ctm-mob-dn-pt-wt-pt-te-ue,
1147
- var(--_ctm-tab-dn-pt-wt-pt-te-ue, var(--_ctm-dn-pt-wt-pt-te-ue))
1186
+ --_ctm-mob-dn-pt-wt-pt-ne-ue,
1187
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ue, var(--_ctm-dn-pt-wt-pt-ne-ue))
1148
1188
  );
1149
1189
  letter-spacing: var(
1150
- --_ctm-mob-dn-pt-wt-pt-te-lr-sg,
1151
- var(--_ctm-tab-dn-pt-wt-pt-te-lr-sg, var(--_ctm-dn-pt-wt-pt-te-lr-sg))
1190
+ --_ctm-mob-dn-pt-wt-pt-ne-lr-sg,
1191
+ var(--_ctm-tab-dn-pt-wt-pt-ne-lr-sg, var(--_ctm-dn-pt-wt-pt-ne-lr-sg))
1152
1192
  );
1153
1193
  line-height: var(
1154
- --_ctm-mob-dn-pt-wt-pt-te-le-ht,
1155
- var(--_ctm-tab-dn-pt-wt-pt-te-le-ht, var(--_ctm-dn-pt-wt-pt-te-le-ht))
1194
+ --_ctm-mob-dn-pt-wt-pt-ne-le-ht,
1195
+ var(--_ctm-tab-dn-pt-wt-pt-ne-le-ht, var(--_ctm-dn-pt-wt-pt-ne-le-ht))
1156
1196
  );
1157
1197
  font-style: var(
1158
- --_ctm-mob-dn-pt-wt-pt-te-ft-se-ic,
1159
- var(--_ctm-tab-dn-pt-wt-pt-te-ft-se-ic, var(--_ctm-dn-pt-wt-pt-te-ft-se-ic))
1198
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-se-ic,
1199
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ne-ft-se-ic))
1160
1200
  );
1161
1201
  text-align: var(
1162
- --_ctm-mob-dn-pt-wt-pt-te-tt-an,
1163
- var(--_ctm-tab-dn-pt-wt-pt-te-tt-an, var(--_ctm-dn-pt-wt-pt-te-tt-an))
1202
+ --_ctm-mob-dn-pt-wt-pt-ne-tt-an,
1203
+ var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an))
1164
1204
  );
1165
1205
  }
1166
1206
 
@@ -1439,7 +1479,7 @@
1439
1479
 
1440
1480
  /* ───────── Order Attributes ───────── */
1441
1481
  .order-attributes {
1442
- border-top: 1px dashed #e0e0e0;
1482
+ border-top: 1px solid #eaecf0;
1443
1483
  padding-top: 24px;
1444
1484
 
1445
1485
  h4 {
@@ -1,7 +1,7 @@
1
1
  @use "sass:map";
2
2
  @use "./functions.scss" as *;
3
3
  @use "./prefix-list.scss" as *;
4
-
4
+ $var: "--_ctm-sf-or-mx-ht";
5
5
  $overflow: (
6
6
  class: (
7
7
  scrollable: "flx-oflow",
@@ -15,7 +15,7 @@ $overflow: (
15
15
  );
16
16
 
17
17
  $overflowValues: (
18
- scroll: scroll,
18
+ scroll: auto,
19
19
  hidden: hidden,
20
20
  visible: visible,
21
21
  // auto: auto,
@@ -43,7 +43,8 @@ $overflowValues: (
43
43
  // Apply max-height if vertical is scroll and max-height is set
44
44
  &[#{map.get($attrs, vertical)}="scroll"] {
45
45
  &[#{map.get($attrs, maxHeight)}] {
46
- max-height: var(--cms-max-height) !important;
46
+ @include FlexUpdatedPrefixCSSVariable($var, false, maxHeight);
47
+ max-height: var(#{$var}, 100%) !important;
47
48
  }
48
49
  }
49
50
 
@@ -10,13 +10,19 @@ $elementDragging: "[data-cms-new-element-dragging-v2='true']";
10
10
  $dataResizerTrue: '[data-cms-element-resizer="true"]';
11
11
  $fullView: '[data-view-state="full"]';
12
12
  $var: "--_sf-width-rb-vl";
13
+ $selector: "[data-element-type='layouter-pro']";
13
14
 
14
15
  @mixin FlexElementResponsiveBehaviourStyles() {
15
16
  #{$elementSelector} {
16
17
  &#{$rb_cls} {
17
18
  &:not(#{$fullView, $elementDragging, $dataResizerTrue}) {
18
19
  @include FlexUpdatedPrefixCSSVariable(#{$var});
19
- width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
20
+ &:is(#{$selector}) {
21
+ width: min(var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}), 100%) !important;
22
+ }
23
+ &:is(:not(#{$selector})) {
24
+ width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
25
+ }
20
26
  }
21
27
  }
22
28
  }