@sc-360-v2/storefront-cms-library 0.4.28 → 0.4.29

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.
@@ -436,6 +436,12 @@
436
436
  display: flex;
437
437
  width: 600px;
438
438
  gap: 12px;
439
+ .option-dropdown {
440
+ label {
441
+ display: block;
442
+ margin-bottom: 6px;
443
+ }
444
+ }
439
445
 
440
446
  .dropdown-with-input-section {
441
447
  gap: 6px;
@@ -1826,7 +1826,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1826
1826
  .review_cart-main {
1827
1827
  border: 1px solid var(--_gray-200);
1828
1828
  border-radius: 6px;
1829
- margin: 24px;
1829
+ // margin: 24px;
1830
1830
  padding: 24px 24px 8px 24px;
1831
1831
  max-height: 550px;
1832
1832
  overflow-y: auto;
@@ -1848,6 +1848,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1848
1848
  ul {
1849
1849
  display: flex;
1850
1850
  align-items: center;
1851
+ list-style: none;
1851
1852
  li {
1852
1853
  line-height: 20px;
1853
1854
  font-size: 14px;
@@ -1875,12 +1876,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1875
1876
  }
1876
1877
  .shipping_address {
1877
1878
  display: flex;
1879
+ grid-template-columns: auto auto auto;
1878
1880
  padding: 24px 0;
1879
1881
  border-bottom: 1px solid var(--_gray-200);
1880
1882
  .shipping {
1881
- min-width: 45%;
1883
+ min-width: 40%;
1882
1884
  margin-right: 16px;
1883
1885
  border-right: 1px solid var(--_gray-200);
1886
+ padding-right: 12px;
1884
1887
  &:last-of-type {
1885
1888
  border-right: 0;
1886
1889
  }
@@ -1899,7 +1902,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1899
1902
  }
1900
1903
  }
1901
1904
  .cart_main {
1902
- width: 10%;
1905
+ width: 150px;
1903
1906
  display: flex;
1904
1907
  gap: 16px;
1905
1908
  align-items: center;
@@ -1911,7 +1914,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1911
1914
  background: #ffd700;
1912
1915
  border-radius: 4px;
1913
1916
  left: 15px;
1914
- padding: 2px;
1917
+ padding: 2px 6px;
1915
1918
  line-height: normal;
1916
1919
  color: #1f1930;
1917
1920
  font-weight: 400;
@@ -1932,7 +1935,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1932
1935
  }
1933
1936
 
1934
1937
  .cart-items {
1935
- h6 {
1938
+ h6,
1939
+ .cart-items-title {
1936
1940
  font-size: 14px;
1937
1941
  font-weight: 600;
1938
1942
  color: var(--_gray-900);
@@ -1956,6 +1960,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1956
1960
  border-radius: 4px;
1957
1961
  }
1958
1962
  .product_item-details {
1963
+ list-style: none;
1959
1964
  .product_item-name {
1960
1965
  font-size: 14px;
1961
1966
  font-weight: 700;
@@ -1969,6 +1974,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1969
1974
  }
1970
1975
  .product_item-specs {
1971
1976
  display: flex;
1977
+ list-style: none;
1972
1978
  li {
1973
1979
  color: var(--_gray-600);
1974
1980
  font-size: 14px;
@@ -0,0 +1,226 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ .default__dropdown {
6
+ position: relative;
7
+ width: 100%;
8
+
9
+ .bo-dropdown__container {
10
+ padding: 8px 12px;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: space-between;
14
+ border: 1px solid var(--_gray-300);
15
+ border-radius: 4px;
16
+ background-color: var(--_base-white);
17
+ min-height: 40px;
18
+ cursor: pointer;
19
+ transition: 0.2s ease;
20
+ padding-inline: 12px !important;
21
+ // .bod-trigger-left {
22
+ // padding-left: 12px;
23
+ // }
24
+ .bo-dropdown__actions {
25
+ // padding-right: 12px;
26
+ .bo-dropdown__clear-btn {
27
+ span {
28
+ display: flex;
29
+ }
30
+ }
31
+ }
32
+ .bod-trigger-left {
33
+ width: -webkit-fill-available;
34
+ }
35
+ }
36
+
37
+ .bo-dropdown__container--search {
38
+ padding: 0;
39
+ cursor: text;
40
+ }
41
+
42
+ .bo-dropdown__container--disabled {
43
+ cursor: not-allowed;
44
+ opacity: 0.6;
45
+ }
46
+
47
+ .bo-dropdown__value-wrapper {
48
+ flex: 1;
49
+ min-width: 0;
50
+ }
51
+
52
+ .bo-dropdown__placeholder {
53
+ color: #9ca3af;
54
+ font-size: 14px;
55
+ white-space: nowrap;
56
+ overflow: hidden;
57
+ text-overflow: ellipsis;
58
+ }
59
+
60
+ .bo-dropdown__selected {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 8px;
64
+ }
65
+
66
+ .bo-dropdown__selected-info {
67
+ display: flex;
68
+ flex-direction: column;
69
+ min-width: 0;
70
+ }
71
+
72
+ .bo-dropdown__selected-name {
73
+ font-weight: normal;
74
+ color: #111827;
75
+ white-space: nowrap;
76
+ overflow: hidden;
77
+ text-overflow: ellipsis;
78
+ }
79
+
80
+ .bo-dropdown__selected-code {
81
+ font-size: 12px;
82
+ color: #6b7280;
83
+ white-space: nowrap;
84
+ overflow: hidden;
85
+ text-overflow: ellipsis;
86
+ }
87
+
88
+ .bo-dropdown__actions {
89
+ display: flex;
90
+ align-items: center;
91
+ gap: 4px;
92
+ flex-shrink: 0;
93
+ }
94
+
95
+ .bo-dropdown__clear-btn,
96
+ .bo-dropdown__toggle-btn {
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ width: 20px;
101
+ height: 20px;
102
+ border: none;
103
+ background: none;
104
+ cursor: pointer;
105
+ border-radius: 4px;
106
+ }
107
+
108
+ .bo-dropdown__chevron {
109
+ transition: transform 0.2s ease;
110
+ }
111
+
112
+ .bo-dropdown__chevron--open {
113
+ transform: rotate(180deg);
114
+ }
115
+
116
+ .bo-dropdown__panel {
117
+ position: absolute;
118
+ top: 100%;
119
+ left: 0;
120
+ right: 0;
121
+ z-index: 1000;
122
+ margin-top: 4px;
123
+ background-color: #ffffff;
124
+ border: 1px solid #d1d5db;
125
+ border-radius: 8px;
126
+ box-shadow:
127
+ 0 10px 15px -3px rgba(0, 0, 0, 0.1),
128
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
129
+ max-height: 320px;
130
+ overflow: hidden;
131
+ }
132
+
133
+ .bo-dropdown__list {
134
+ max-height: 240px;
135
+ overflow-y: auto;
136
+ margin: 0;
137
+ padding: 0;
138
+ list-style: none;
139
+ padding: 4px;
140
+ display: flex;
141
+ flex-direction: column;
142
+ gap: 2px;
143
+ }
144
+
145
+ .bo-dropdown__option {
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 8px;
149
+ padding: 8px 12px;
150
+ cursor: pointer;
151
+ }
152
+
153
+ .bo-dropdown__option:last-child {
154
+ border-bottom: none;
155
+ }
156
+
157
+ .bo-dropdown__option--highlighted {
158
+ @include BgColorLighter(var(--_thm-cs-at-py), 10%);
159
+ color: var(--_thm-cs-at-py);
160
+ border-radius: 4px;
161
+ }
162
+
163
+ .bo-dropdown__option--selected {
164
+ background-color: var(--_base-white);
165
+ border-radius: 4px;
166
+ }
167
+
168
+ .bo-dropdown__check {
169
+ svg path {
170
+ stroke: var(--_thm-cs-at-py);
171
+ }
172
+ }
173
+
174
+ .bo-dropdown__option-text {
175
+ flex: 1;
176
+ min-width: 0;
177
+ }
178
+
179
+ .bo-dropdown__option-name {
180
+ font-weight: 500;
181
+ color: #111827;
182
+ font-size: 13px;
183
+ line-height: 1.2;
184
+ margin-bottom: 1px;
185
+ white-space: nowrap;
186
+ overflow: hidden;
187
+ text-overflow: ellipsis;
188
+ }
189
+
190
+ .bo-dropdown__option-code {
191
+ font-size: 11px;
192
+ color: #6b7280;
193
+ line-height: 1.2;
194
+ white-space: nowrap;
195
+ overflow: hidden;
196
+ text-overflow: ellipsis;
197
+ }
198
+
199
+ .bo-dropdown__empty,
200
+ .bo-dropdown__loading {
201
+ padding: 24px 12px;
202
+ text-align: center;
203
+ color: #6b7280;
204
+ }
205
+
206
+ .bo-dropdown__empty-title {
207
+ display: block;
208
+ font-weight: 500;
209
+ margin-bottom: 4px;
210
+ }
211
+
212
+ .bo-dropdown__empty-sub {
213
+ font-size: 12px;
214
+ color: #9ca3af;
215
+ }
216
+
217
+ @keyframes pulse {
218
+ 0%,
219
+ 100% {
220
+ opacity: 0.4;
221
+ }
222
+ 50% {
223
+ opacity: 1;
224
+ }
225
+ }
226
+ }
package/dist/filters.scss CHANGED
@@ -114,6 +114,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
114
114
  .filter__Header {
115
115
  display: flex;
116
116
  justify-content: space-between;
117
+ align-items: center;
117
118
  gap: 12px;
118
119
 
119
120
  h2 {
@@ -316,7 +317,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
316
317
  // }
317
318
  .selected_item {
318
319
  display: flex;
319
- gap: 8px;
320
+ gap: 6px;
320
321
  border: 1px solid var(--_thm-cs-be-se-3);
321
322
  border-radius: 30px;
322
323
  padding: 6px 12px;
@@ -1280,8 +1281,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1280
1281
 
1281
1282
  .clear__btn {
1282
1283
  svg {
1283
- width: 18px;
1284
- height: 18px;
1284
+ width: 16px;
1285
+ height: 16px;
1285
1286
  &:hover {
1286
1287
  path {
1287
1288
  stroke: var(--_gray-900);
@@ -2094,40 +2095,89 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2094
2095
  height: 5px;
2095
2096
  margin: 16px 0 30px 0px;
2096
2097
  // background-color: var(--_primary-400);
2098
+ // background: linear-gradient(
2099
+ // to right,
2100
+ // var(
2101
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2102
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2103
+ // )
2104
+ // 0%,
2105
+ // var(
2106
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2107
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2108
+ // )
2109
+ // var(--left),
2110
+ // var(
2111
+ // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2112
+ // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2113
+ // )
2114
+ // var(--left),
2115
+ // var(
2116
+ // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2117
+ // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2118
+ // )
2119
+ // var(--right),
2120
+ // var(
2121
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2122
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2123
+ // )
2124
+ // var(--right),
2125
+ // var(
2126
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2127
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
2128
+ // )
2129
+ // 100%
2130
+ // );
2131
+
2097
2132
  background: linear-gradient(
2098
2133
  to right,
2099
2134
  var(
2100
- --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2101
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2135
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2136
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2102
2137
  )
2103
2138
  0%,
2104
2139
  var(
2105
- --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2106
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2140
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2141
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2107
2142
  )
2108
2143
  var(--left),
2109
2144
  var(
2110
- --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2111
- var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2145
+ --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2146
+ var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2112
2147
  )
2113
2148
  var(--left),
2114
2149
  var(
2115
- --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2116
- var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2150
+ --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2151
+ var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2117
2152
  )
2118
2153
  var(--right),
2119
2154
  var(
2120
- --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2121
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2155
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2156
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2122
2157
  )
2123
2158
  var(--right),
2124
2159
  var(
2125
- --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2126
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
2160
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2161
+ var(
2162
+ --_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr,
2163
+ var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc)
2164
+ )
2127
2165
  )
2128
2166
  100%
2129
2167
  );
2130
- border-radius: 5px;
2168
+ // background-color: var(
2169
+ // --_sf-hr-bd-cr,
2170
+ // #{prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)}
2171
+ // );
2172
+ // border-radius: 5px;
2173
+ border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-rs));
2174
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-cr));
2175
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-wh));
2176
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-se));
2177
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae))
2178
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br))
2179
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd))
2180
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr));
2131
2181
  }
2132
2182
 
2133
2183
  .slider-track {
@@ -2153,13 +2203,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2153
2203
  input[type="range"]::-webkit-slider-thumb {
2154
2204
  height: 20px;
2155
2205
  width: 20px;
2156
- border-radius: 50%;
2157
- border: 3px solid #fff;
2158
- background: var(--_base-white);
2206
+ // border-radius: 50%;
2207
+ // border: 3px solid #fff;
2208
+ border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-rs));
2209
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-cr));
2210
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-wh));
2211
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-se));
2212
+ background: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-bd-cr));
2159
2213
  pointer-events: auto;
2160
2214
  appearance: none;
2161
2215
  cursor: pointer;
2162
- box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
2216
+ // box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
2217
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae))
2218
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br))
2219
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd))
2220
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
2163
2221
  position: relative;
2164
2222
  z-index: 2; /* Ensure thumbs appear above the track */
2165
2223
  }
package/dist/modal.scss CHANGED
@@ -1587,6 +1587,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
1587
1587
  display: flex;
1588
1588
  align-items: center;
1589
1589
  gap: 12px;
1590
+ .bulk-order-pad-header-body {
1591
+ .checkout_btn {
1592
+ padding: 8px 16px;
1593
+ border-radius: 4px;
1594
+ background-color: var(--_thm-cs-at-py);
1595
+ color: var(--_base-white);
1596
+ }
1597
+ }
1590
1598
  .employee_bulk_order_header {
1591
1599
  display: flex;
1592
1600
  justify-self: end;
@@ -104,10 +104,15 @@ $rai: "repeater-advertise-item";
104
104
  display: var(--_d-grid);
105
105
  row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt);
106
106
  grid-template-columns: 100%;
107
- grid-template-rows: repeat(
108
- auto-fit,
109
- minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
110
- );
107
+ // grid-template-rows: repeat(
108
+ // auto-fit,
109
+ // minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
110
+ // );
111
+ // grid-template-rows: repeat(
112
+ // 1,
113
+ // minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
114
+ // );
115
+ grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
111
116
  width: 100%;
112
117
 
113
118
  & > div {
@@ -51,11 +51,13 @@
51
51
  }
52
52
  }
53
53
  .shipping_address {
54
- display: flex;
54
+ display: grid;
55
+ grid-template-columns: auto auto auto;
55
56
  padding: 24px 0;
56
57
  border-bottom: 1px solid var(--_gray-200);
58
+
57
59
  .shipping {
58
- min-width: 45%;
60
+ // min-width: 45%;
59
61
  margin-right: 16px;
60
62
  border-right: 1px solid var(--_gray-200);
61
63
  &:last-of-type {
@@ -76,7 +78,7 @@
76
78
  }
77
79
  }
78
80
  .cart_main {
79
- width: 10%;
81
+ // width: 10%;
80
82
  display: flex;
81
83
  gap: 16px;
82
84
  align-items: center;