@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

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.
Files changed (104) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +2 -2
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/enums/index.d.ts +5 -1
  91. package/dist/types/builder/index.d.ts +3 -1
  92. package/dist/types/builder/interfaces/global.d.ts +5 -0
  93. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  94. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  95. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  96. package/dist/uom-selector.scss +1569 -383
  97. package/dist/variant-picker.scss +1593 -481
  98. package/dist/video.scss +212 -53
  99. package/dist/volume-pricing.scss +775 -196
  100. package/dist/widget.scss +14 -0
  101. package/package.json +1 -1
  102. package/dist/editor-core.scss +0 -537
  103. package/dist/tab-panel.scss +0 -93
  104. package/dist/text-editor.scss +0 -331
package/dist/scroll.scss CHANGED
@@ -6,50 +6,79 @@ $max-items: 50;
6
6
  [data-div-type="element"] {
7
7
  &[data-element-type="scroll"] {
8
8
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
9
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
13
+ )
14
+ );
15
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
11
16
  aspect-ratio: 1 / var(--_sf-aspect-ratio);
12
17
 
13
18
  & > .wrapper {
14
- width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
15
- height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
19
+ width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
20
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
21
+
16
22
  overflow: hidden;
17
23
  white-space: nowrap;
18
24
 
19
25
  &[data-widget-shadow="true"] {
20
- box-shadow: var(--_ctm-dn-sl-cr-sw-ae, var(--_tst-dn-sl-cr-sw-ae))
21
- var(--_ctm-dn-sl-cr-sw-br, var(--_tst-vo-se-sw-br))
22
- var(--_ctm-dn-sl-cr-sw-sd, var(--_tst-vo-se-sw-sd))
23
- var(--_ctm-dn-sl-cr-sw-cr, var(--_tst-dn-sl-cr-sw-cr));
26
+ box-shadow: var(
27
+ --_ctm-mob-dn-sl-cr-sw-ae,
28
+ var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))
29
+ )
30
+ var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br)))
31
+ var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd)))
32
+ var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
24
33
  }
25
34
 
26
35
  // .scroll__container {
27
36
  @for $i from 1 through $max-items {
28
37
  .scroll-item[data-index="i#{$i}"] {
29
- color: var(--_ctm-dn-i#{$i}-cr, black);
30
- font-size: var(--_ctm-dn-i#{$i}-ft-se, 16px);
31
- text-align: var(--_ctm-dn-i#{$i}-tt-an, left);
32
- margin-left: var(--_ctm-dn-i#{$i}-lr-sg, 0px);
33
-
34
- color: var(--_sf-hr-fc, var(--_ctm-dn-i#{$i}-cr, var(--_tst-dn-i#{$i}-cr)));
35
- font-family: var(--_sf-hr-ff, var(--_ctm-dn-i#{$i}-ft-fy, var(--_tst-dn-i#{$i}-ft-fy))),
38
+ color: var(
39
+ --_ctm-mob-dn-i#{$i}-cr,
40
+ var(--_ctm-tab-dn-i#{$i}-cr, var(--_ctm-dn-i#{$i}-cr))
41
+ );
42
+ font-family: var(
43
+ --_ctm-mob-dn-i#{$i}-ft-fy,
44
+ var(--_ctm-tab-dn-i#{$i}-ft-fy, var(--_ctm-dn-i#{$i}-ft-fy))
45
+ ),
36
46
  sans-serif;
37
- font-size: var(--_sf-hr-fs, var(--_ctm-dn-i#{$i}-ft-se, var(--_tst-dn-i#{$i}-ft-se)));
38
- text-decoration: var(--_ctm-dn-i#{$i}-ue, var(--_tst-dn-hr-tt-ue));
39
- font-weight: var(--_sf-hr-fw, var(--_ctm-dn-i#{$i}-ft-wt, var(--_tst-dn-i#{$i}-ft-wt)));
47
+ font-size: var(
48
+ --_ctm-mob-dn-i#{$i}-ft-se,
49
+ var(--_ctm-tab-dn-i#{$i}-ft-se, var(--_ctm-dn-i#{$i}-ft-se))
50
+ );
51
+ font-weight: var(
52
+ --_ctm-mob-dn-i#{$i}-ft-wt,
53
+ var(--_ctm-tab-dn-i#{$i}-ft-wt, var(--_ctm-dn-i#{$i}-ft-wt))
54
+ );
40
55
  font-style: var(
41
- --_sf-hr-ft,
42
- var(--_ctm-dn-i#{$i}-ft-se-ic, var(--_tst-dn-i#{$i}-ft-se-ic))
56
+ --_ctm-mob-dn-i#{$i}-ft-se-ic,
57
+ var(--_ctm-tab-dn-i#{$i}-ft-se-ic, var(--_ctm-dn-i#{$i}-ft-se-ic))
58
+ );
59
+ text-align: var(
60
+ --_ctm-mob-dn-i#{$i}-tt-an,
61
+ var(--_ctm-tab-dn-i#{$i}-tt-an, var(--_ctm-dn-i#{$i}-tt-an))
43
62
  );
44
- text-align: var(--_sf-hr-ta, var(--_ctm-dn-i#{$i}-tt-an, var(--_tst-dn-i#{$i}-tt-an)));
45
63
  letter-spacing: var(
46
- --_sf-hr-ls,
47
- var(--_ctm-dn-i#{$i}-lr-sg, var(--_tst-dn-i#{$i}-lr-sg))
64
+ --_ctm-mob-dn-i#{$i}-lr-sg,
65
+ var(--_ctm-tab-dn-i#{$i}-lr-sg, var(--_ctm-dn-i#{$i}-lr-sg))
66
+ );
67
+ line-height: var(
68
+ --_ctm-mob-dn-i#{$i}-le-ht,
69
+ var(--_ctm-tab-dn-i#{$i}-le-ht, var(--_ctm-dn-i#{$i}-le-ht))
70
+ );
71
+ text-decoration: var(
72
+ --_ctm-mob-dn-i#{$i}-ue,
73
+ var(--_ctm-tab-dn-i#{$i}-ue, var(--_ctm-dn-i#{$i}-ue))
74
+ );
75
+ margin-left: var(
76
+ --_ctm-mob-dn-i#{$i}-lr-sg,
77
+ var(--_ctm-tab-dn-i#{$i}-lr-sg, var(--_ctm-dn-i#{$i}-lr-sg, 0px))
48
78
  );
49
- line-height: var(--_sf-hr-lh, var(--_ctm-dn-i#{$i}-le-ht, var(--_tst-dn-i#{$i}-le-ht)));
50
79
  }
51
- // }
52
80
  }
81
+
53
82
  &[data-pause-on-hover="true"] .scrolling {
54
83
  &:hover {
55
84
  animation-play-state: paused;
@@ -65,16 +94,16 @@ $max-items: 50;
65
94
  }
66
95
 
67
96
  &[data-scroll-speed="0.5x"] .scrolling {
68
- animation-duration: 20s;
97
+ animation-duration: 40s;
69
98
  }
70
99
  &[data-scroll-speed="1x"] .scrolling {
71
- animation-duration: 10s;
100
+ animation-duration: 20s;
72
101
  }
73
102
  &[data-scroll-speed="2x"] .scrolling {
74
- animation-duration: 5s;
103
+ animation-duration: 10s;
75
104
  }
76
105
  &[data-scroll-speed="4x"] .scrolling {
77
- animation-duration: 2.5s;
106
+ animation-duration: 5s;
78
107
  }
79
108
 
80
109
  &[data-repeat-elements="true"] .scrolling {
@@ -86,10 +115,13 @@ $max-items: 50;
86
115
  }
87
116
 
88
117
  &[data-widget-shadow="true"] .scroll__container {
89
- box-shadow: var(--_ctm-dn-sl-cr-sw-ae, var(--_tst-dn-sl-cr-sw-ae))
90
- var(--_ctm-dn-sl-cr-sw-br, var(--_tst-vo-se-sw-br))
91
- var(--_ctm-dn-sl-cr-sw-sd, var(--_tst-vo-se-sw-sd))
92
- var(--_ctm-dn-sl-cr-sw-cr, var(--_tst-dn-sl-cr-sw-cr));
118
+ box-shadow: var(
119
+ --_ctm-mob-dn-sl-cr-sw-ae,
120
+ var(--_ctm-tab-dn-sl-cr-sw-ae, var(--_ctm-dn-sl-cr-sw-ae))
121
+ )
122
+ var(--_ctm-mob-dn-sl-cr-sw-br, var(--_ctm-tab-dn-sl-cr-sw-br, var(--_ctm-dn-sl-cr-sw-br)))
123
+ var(--_ctm-mob-dn-sl-cr-sw-sd, var(--_ctm-tab-dn-sl-cr-sw-sd, var(--_ctm-dn-sl-cr-sw-sd)))
124
+ var(--_ctm-mob-dn-sl-cr-sw-cr, var(--_ctm-tab-dn-sl-cr-sw-cr, var(--_ctm-dn-sl-cr-sw-cr)));
93
125
  }
94
126
 
95
127
  &[data-widget-shadow="false"] .scroll__container {
@@ -98,9 +130,18 @@ $max-items: 50;
98
130
 
99
131
  &[data-widget-border="true"] {
100
132
  .scroll__container {
101
- border-color: var(--_ctm-dn-sl-cr-br-cr, var(--_tst-dn-sl-cr-br-cr));
102
- border-style: var(--_ctm-dn-sl-cr-br-se, var(--_tst-dn-sl-cr-br-se));
103
- border-width: var(--_ctm-dn-sl-cr-br-wh, var(--_tst-dn-sl-cr-br-wh));
133
+ border-color: var(
134
+ --_ctm-mob-dn-sl-cr-br-cr,
135
+ var(--_ctm-tab-dn-sl-cr-br-cr, var(--_ctm-dn-sl-cr-br-cr))
136
+ );
137
+ border-style: var(
138
+ --_ctm-mob-dn-sl-cr-br-se,
139
+ var(--_ctm-tab-dn-sl-cr-br-se, var(--_ctm-dn-sl-cr-br-se))
140
+ );
141
+ border-width: var(
142
+ --_ctm-mob-dn-sl-cr-br-wh,
143
+ var(--_ctm-tab-dn-sl-cr-br-wh, var(--_ctm-dn-sl-cr-br-wh))
144
+ );
104
145
  }
105
146
  }
106
147
 
@@ -112,35 +153,59 @@ $max-items: 50;
112
153
  display: flex;
113
154
  justify-content: center;
114
155
  align-items: center;
115
- background-color: var(--_ctm-dn-sl-cr-bd-cr, var(--_tst-dn-sl-cr-bd-cr));
116
- padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
117
- border-radius: var(--_ctm-dn-sl-cr-br-rs, var(--_tst-dn-sl-cr-br-rs));
156
+ background-color: var(
157
+ --_ctm-mob-dn-sl-cr-bd-cr,
158
+ var(--_ctm-tab-dn-sl-cr-bd-cr, var(--_ctm-dn-sl-cr-bd-cr))
159
+ );
160
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
161
+ border-radius: var(
162
+ --_ctm-mob-dn-sl-cr-br-rs,
163
+ var(--_ctm-tab-dn-sl-cr-br-rs, var(--_ctm-dn-sl-cr-br-rs))
164
+ );
165
+
118
166
  .scrolling {
119
167
  display: flex;
120
168
  flex-direction: row;
121
169
  justify-content: center;
122
170
  align-items: center;
123
- gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
171
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
124
172
  padding-right: 10px;
125
173
  animation-name: marquee;
126
174
  animation-timing-function: linear;
127
175
  }
128
176
 
129
177
  .divider {
130
- background-color: var(--_ctm-dn-dr-se-bd-cr, var(--_tst-dn-dr-se-bd-cr));
178
+ background-color: var(
179
+ --_ctm-mob-dn-dr-se-bd-cr,
180
+ var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
181
+ );
131
182
  padding: 3px;
132
- font-size: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
133
- color: var(--_ctm-dn-dr-se-dr-cr, var(--_tst-dn-dr-se-dr-cr));
183
+ font-size: var(
184
+ --_ctm-mob-dn-dr-se-se,
185
+ var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se))
186
+ );
187
+ color: var(
188
+ --_ctm-mob-dn-dr-se-dr-cr,
189
+ var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
190
+ );
134
191
  }
192
+
135
193
  .icon {
136
- background-color: var(--_ctm-dn-dr-se-bd-cr, var(--_tst-dn-dr-se-bd-cr));
194
+ background-color: var(
195
+ --_ctm-mob-dn-dr-se-bd-cr,
196
+ var(--_ctm-tab-dn-dr-se-bd-cr, var(--_ctm-dn-dr-se-bd-cr))
197
+ );
137
198
  padding: 3px;
199
+
138
200
  svg {
139
- width: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
140
- height: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
201
+ width: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
202
+ height: var(--_ctm-mob-dn-dr-se-se, var(--_ctm-tab-dn-dr-se-se, var(--_ctm-dn-dr-se-se)));
141
203
 
142
204
  path {
143
- stroke: var(--_ctm-dn-dr-se-dr-cr, var(--_tst-dn-dr-se-dr-cr));
205
+ stroke: var(
206
+ --_ctm-mob-dn-dr-se-dr-cr,
207
+ var(--_ctm-tab-dn-dr-se-dr-cr, var(--_ctm-dn-dr-se-dr-cr))
208
+ );
144
209
  }
145
210
  }
146
211
  }
package/dist/search-results-heading.scss ADDED
@@ -0,0 +1,282 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="searchResultsHeading"] {
6
+ width: var(
7
+ --_sf-el-wh-st-mx,
8
+ calc(
9
+ 1% *
10
+ var(
11
+ --_ctm-mob-ele-nw-wh-vl,
12
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
13
+ )
14
+ )
15
+ );
16
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
17
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
18
+
19
+ aspect-ratio: 1 / var(--_sf-aspect-ratio);
20
+ position: relative;
21
+
22
+ & > .wrapper {
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ width: 100%;
27
+ height: 100%;
28
+ }
29
+
30
+ .search__results__heading__section {
31
+ display: flex;
32
+ align-items: center;
33
+ cursor: pointer;
34
+ gap: 8px;
35
+ .search__results__heading {
36
+ position: relative;
37
+ .search__results__count {
38
+ color: var(
39
+ --_ctm-mob-dn-sh-rs-nr-cr,
40
+ var(--_ctm-tab-dn-sh-rs-nr-cr, var(--_ctm-dn-sh-rs-nr-cr))
41
+ );
42
+ font-family: var(
43
+ --_ctm-mob-dn-sh-rs-nr-ft-fy,
44
+ var(--_ctm-tab-dn-sh-rs-nr-ft-fy, var(--_ctm-dn-sh-rs-nr-ft-fy))
45
+ ),
46
+ sans-serif;
47
+ font-size: var(
48
+ --_ctm-mob-dn-sh-rs-nr-ft-se,
49
+ var(--_ctm-tab-dn-sh-rs-nr-ft-se, var(--_ctm-dn-sh-rs-nr-ft-se))
50
+ );
51
+ font-weight: var(
52
+ --_ctm-mob-dn-sh-rs-nr-ft-wt,
53
+ var(--_ctm-tab-dn-sh-rs-nr-ft-wt, var(--_ctm-dn-sh-rs-nr-ft-wt))
54
+ );
55
+ font-style: var(
56
+ --_ctm-mob-dn-sh-rs-nr-ft-se-ic,
57
+ var(--_ctm-tab-dn-sh-rs-nr-ft-se-ic, var(--_ctm-dn-sh-rs-nr-ft-se-ic))
58
+ );
59
+ text-align: var(
60
+ --_ctm-mob-dn-sh-rs-nr-tt-an,
61
+ var(--_ctm-tab-dn-sh-rs-nr-tt-an, var(--_ctm-dn-sh-rs-nr-tt-an))
62
+ );
63
+ letter-spacing: var(
64
+ --_ctm-mob-dn-sh-rs-nr-lr-sg,
65
+ var(--_ctm-tab-dn-sh-rs-nr-lr-sg, var(--_ctm-dn-sh-rs-nr-lr-sg))
66
+ );
67
+ line-height: var(
68
+ --_ctm-mob-dn-sh-rs-nr-le-ht,
69
+ var(--_ctm-tab-dn-sh-rs-nr-le-ht, var(--_ctm-dn-sh-rs-nr-le-ht))
70
+ );
71
+ text-decoration: var(
72
+ --_ctm-mob-dn-sh-rs-nr-ue,
73
+ var(--_ctm-tab-dn-sh-rs-nr-ue, var(--_ctm-dn-sh-rs-nr-ue))
74
+ );
75
+ border: var(
76
+ --_ctm-mob-dn-sh-rs-nr-bd-cr,
77
+ var(--_ctm-tab-dn-sh-rs-nr-bd-cr, var(--_ctm-dn-sh-rs-nr-bd-cr))
78
+ );
79
+ border-color: var(
80
+ --_ctm-mob-dn-sh-rs-nr-br-cr,
81
+ var(--_ctm-tab-dn-sh-rs-nr-br-cr, var(--_ctm-dn-sh-rs-nr-br-cr))
82
+ );
83
+ border-radius: var(
84
+ --_ctm-mob-dn-sh-rs-nr-br-rs,
85
+ var(--_ctm-tab-dn-sh-rs-nr-br-rs, var(--_ctm-dn-sh-rs-nr-br-rs))
86
+ );
87
+ background-color: var(
88
+ --_ctm-mob-dn-sh-rs-nr-bd-cr,
89
+ var(--_ctm-tab-dn-sh-rs-nr-bd-cr, var(--_ctm-dn-sh-rs-nr-bd-cr))
90
+ );
91
+ border-style: var(
92
+ --_ctm-mob-dn-sh-rs-nr-br-se,
93
+ var(--_ctm-tab-dn-sh-rs-nr-br-se, var(--_ctm-dn-sh-rs-nr-br-se))
94
+ );
95
+ border-width: var(
96
+ --_ctm-mob-dn-sh-rs-nr-br-wh,
97
+ var(--_ctm-tab-dn-sh-rs-nr-br-wh, var(--_ctm-dn-sh-rs-nr-br-wh))
98
+ );
99
+ box-shadow: var(
100
+ --_show-text-content-shadow,
101
+ var(
102
+ --_ctm-mob-dn-sh-rs-nr-sw-ae,
103
+ var(--_ctm-tab-dn-sh-rs-nr-sw-ae, var(--_ctm-dn-sh-rs-nr-sw-ae))
104
+ )
105
+ var(
106
+ --_ctm-mob-dn-sh-rs-nr-sw-br,
107
+ var(--_ctm-tab-dn-sh-rs-nr-sw-br, var(--_ctm-dn-sh-rs-nr-sw-br))
108
+ )
109
+ var(
110
+ --_ctm-mob-dn-sh-rs-nr-sw-sd,
111
+ var(--_ctm-tab-dn-sh-rs-nr-sw-sd, var(--_ctm-dn-sh-rs-nr-sw-sd))
112
+ )
113
+ var(
114
+ --_ctm-mob-dn-sh-rs-nr-sw-cr,
115
+ var(--_ctm-tab-dn-sh-rs-nr-sw-cr, var(--_ctm-dn-sh-rs-nr-sw-cr))
116
+ )
117
+ );
118
+ }
119
+
120
+ .search__other__text {
121
+ color: var(--_ctm-mob-dn-or-tt-cr, var(--_ctm-tab-dn-or-tt-cr, var(--_ctm-dn-or-tt-cr)));
122
+ font-family: var(
123
+ --_ctm-mob-dn-or-tt-ft-fy,
124
+ var(--_ctm-tab-dn-or-tt-ft-fy, var(--_ctm-dn-or-tt-ft-fy))
125
+ ),
126
+ sans-serif;
127
+ font-size: var(
128
+ --_ctm-mob-dn-or-tt-ft-se,
129
+ var(--_ctm-tab-dn-or-tt-ft-se, var(--_ctm-dn-or-tt-ft-se))
130
+ );
131
+ font-weight: var(
132
+ --_ctm-mob-dn-or-tt-ft-wt,
133
+ var(--_ctm-tab-dn-or-tt-ft-wt, var(--_ctm-dn-or-tt-ft-wt))
134
+ );
135
+ font-style: var(
136
+ --_ctm-mob-dn-or-tt-ft-se-ic,
137
+ var(--_ctm-tab-dn-or-tt-ft-se-ic, var(--_ctm-dn-or-tt-ft-se-ic))
138
+ );
139
+ text-align: var(
140
+ --_ctm-mob-dn-or-tt-tt-an,
141
+ var(--_ctm-tab-dn-or-tt-tt-an, var(--_ctm-dn-or-tt-tt-an))
142
+ );
143
+ letter-spacing: var(
144
+ --_ctm-mob-dn-or-tt-lr-sg,
145
+ var(--_ctm-tab-dn-or-tt-lr-sg, var(--_ctm-dn-or-tt-lr-sg))
146
+ );
147
+ line-height: var(
148
+ --_ctm-mob-dn-or-tt-le-ht,
149
+ var(--_ctm-tab-dn-or-tt-le-ht, var(--_ctm-dn-or-tt-le-ht))
150
+ );
151
+ text-decoration: var(
152
+ --_ctm-mob-dn-or-tt-ue,
153
+ var(--_ctm-tab-dn-or-tt-ue, var(--_ctm-dn-or-tt-ue))
154
+ );
155
+ background-color: var(
156
+ --_ctm-mob-dn-or-tt-bd-cr,
157
+ var(--_ctm-tab-dn-or-tt-bd-cr, var(--_ctm-dn-or-tt-bd-cr))
158
+ );
159
+ border-color: var(
160
+ --_ctm-mob-dn-or-tt-br-cr,
161
+ var(--_ctm-tab-dn-or-tt-br-cr, var(--_ctm-dn-or-tt-br-cr))
162
+ );
163
+ border-style: var(
164
+ --_ctm-mob-dn-or-tt-br-se,
165
+ var(--_ctm-tab-dn-or-tt-br-se, var(--_ctm-dn-or-tt-br-se))
166
+ );
167
+ border-width: var(
168
+ --_ctm-mob-dn-or-tt-br-wh,
169
+ var(--_ctm-tab-dn-or-tt-br-wh, var(--_ctm-dn-or-tt-br-wh))
170
+ );
171
+ border-radius: var(
172
+ --_ctm-mob-dn-or-tt-br-rs,
173
+ var(--_ctm-tab-dn-or-tt-br-rs, var(--_ctm-dn-or-tt-br-rs))
174
+ );
175
+ box-shadow: var(
176
+ --_show-text-content-shadow,
177
+ var(
178
+ --_ctm-mob-dn-or-tt-sw-ae,
179
+ var(--_ctm-tab-dn-or-tt-sw-ae, var(--_ctm-dn-or-tt-sw-ae))
180
+ )
181
+ var(
182
+ --_ctm-mob-dn-or-tt-sw-br,
183
+ var(--_ctm-tab-dn-or-tt-sw-br, var(--_ctm-dn-or-tt-sw-br))
184
+ )
185
+ var(
186
+ --_ctm-mob-dn-or-tt-sw-sd,
187
+ var(--_ctm-tab-dn-or-tt-sw-sd, var(--_ctm-dn-or-tt-sw-sd))
188
+ )
189
+ var(
190
+ --_ctm-mob-dn-or-tt-sw-cr,
191
+ var(--_ctm-tab-dn-or-tt-sw-cr, var(--_ctm-dn-or-tt-sw-cr))
192
+ )
193
+ );
194
+ }
195
+
196
+ .search__keyword__text {
197
+ color: var(--_ctm-mob-dn-sh-kd-cr, var(--_ctm-tab-dn-sh-kd-cr, var(--_ctm-dn-sh-kd-cr)));
198
+ font-family: var(
199
+ --_ctm-mob-dn-sh-kd-ft-fy,
200
+ var(--_ctm-tab-dn-sh-kd-ft-fy, var(--_ctm-dn-sh-kd-ft-fy))
201
+ ),
202
+ sans-serif;
203
+ font-size: var(
204
+ --_ctm-mob-dn-sh-kd-ft-se,
205
+ var(--_ctm-tab-dn-sh-kd-ft-se, var(--_ctm-dn-sh-kd-ft-se))
206
+ );
207
+ font-weight: var(
208
+ --_ctm-mob-dn-sh-kd-ft-wt,
209
+ var(--_ctm-tab-dn-sh-kd-ft-wt, var(--_ctm-dn-sh-kd-ft-wt))
210
+ );
211
+ font-style: var(
212
+ --_ctm-mob-dn-sh-kd-ft-se-ic,
213
+ var(--_ctm-tab-dn-sh-kd-ft-se-ic, var(--_ctm-dn-sh-kd-ft-se-ic))
214
+ );
215
+ text-align: var(
216
+ --_ctm-mob-dn-sh-kd-tt-an,
217
+ var(--_ctm-tab-dn-sh-kd-tt-an, var(--_ctm-dn-sh-kd-tt-an))
218
+ );
219
+ letter-spacing: var(
220
+ --_ctm-mob-dn-sh-kd-lr-sg,
221
+ var(--_ctm-tab-dn-sh-kd-lr-sg, var(--_ctm-dn-sh-kd-lr-sg))
222
+ );
223
+ line-height: var(
224
+ --_ctm-mob-dn-sh-kd-le-ht,
225
+ var(--_ctm-tab-dn-sh-kd-le-ht, var(--_ctm-dn-sh-kd-le-ht))
226
+ );
227
+ text-decoration: var(
228
+ --_ctm-mob-dn-sh-kd-ue,
229
+ var(--_ctm-tab-dn-sh-kd-ue, var(--_ctm-dn-sh-kd-ue))
230
+ );
231
+ background-color: var(
232
+ --_ctm-mob-dn-sh-kd-bd-cr,
233
+ var(--_ctm-tab-dn-sh-kd-bd-cr, var(--_ctm-dn-sh-kd-bd-cr))
234
+ );
235
+ border-color: var(
236
+ --_ctm-mob-dn-sh-kd-br-cr,
237
+ var(--_ctm-tab-dn-sh-kd-br-cr, var(--_ctm-dn-sh-kd-br-cr))
238
+ );
239
+ border-style: var(
240
+ --_ctm-mob-dn-sh-kd-br-se,
241
+ var(--_ctm-tab-dn-sh-kd-br-se, var(--_ctm-dn-sh-kd-br-se))
242
+ );
243
+ border-width: var(
244
+ --_ctm-mob-dn-sh-kd-br-wh,
245
+ var(--_ctm-tab-dn-sh-kd-br-wh, var(--_ctm-dn-sh-kd-br-wh))
246
+ );
247
+ border-radius: var(
248
+ --_ctm-mob-dn-sh-kd-br-rs,
249
+ var(--_ctm-tab-dn-sh-kd-br-rs, var(--_ctm-dn-sh-kd-br-rs))
250
+ );
251
+ box-shadow: var(
252
+ --_show-text-content-shadow,
253
+ var(
254
+ --_ctm-mob-dn-sh-kd-sw-ae,
255
+ var(--_ctm-tab-dn-sh-kd-sw-ae, var(--_ctm-dn-sh-kd-sw-ae))
256
+ )
257
+ var(
258
+ --_ctm-mob-dn-sh-kd-sw-br,
259
+ var(--_ctm-tab-dn-sh-kd-sw-br, var(--_ctm-dn-sh-kd-sw-br))
260
+ )
261
+ var(
262
+ --_ctm-mob-dn-sh-kd-sw-sd,
263
+ var(--_ctm-tab-dn-sh-kd-sw-sd, var(--_ctm-dn-sh-kd-sw-sd))
264
+ )
265
+ var(
266
+ --_ctm-mob-dn-sh-kd-sw-cr,
267
+ var(--_ctm-tab-dn-sh-kd-sw-cr, var(--_ctm-dn-sh-kd-sw-cr))
268
+ )
269
+ );
270
+ }
271
+ }
272
+ }
273
+
274
+ &[data-widget-shadow="false"] {
275
+ --_show-shadow: none;
276
+ }
277
+
278
+ &[data-show-shadow="false"] {
279
+ --_show-shadow: none;
280
+ }
281
+ }
282
+ }
package/dist/search.scss CHANGED
@@ -3,9 +3,19 @@
3
3
 
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="search"] {
6
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
6
+ width: var(
7
+ --_sf-el-wh-st-mx,
8
+ calc(
9
+ 1% *
10
+ var(
11
+ --_ctm-mob-ele-nw-wh-vl,
12
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
13
+ )
14
+ )
15
+ );
7
16
  height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
8
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
17
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn)));
18
+
9
19
  aspect-ratio: 1 / var(--_sf-aspect-ratio);
10
20
  position: relative;
11
21
 
@@ -19,9 +29,18 @@
19
29
 
20
30
  &[data-widget-border="true"] {
21
31
  .search-wrapper {
22
- border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr));
23
- border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se));
24
- border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh));
32
+ border-color: var(
33
+ --_ctm-mob-dn-sh-br-br-cr,
34
+ var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
35
+ );
36
+ border-style: var(
37
+ --_ctm-mob-dn-sh-br-br-se,
38
+ var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
39
+ );
40
+ border-width: var(
41
+ --_ctm-mob-dn-sh-br-br-wh,
42
+ var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
43
+ );
25
44
  }
26
45
  }
27
46
 
@@ -39,15 +58,21 @@
39
58
  align-items: center;
40
59
  width: 100%;
41
60
  height: 100%;
42
- background-color: var(--_ctm-dn-sh-br-bd-cr, var(--_tst-dn-sh-br-bd-cr));
61
+ background-color: var(
62
+ --_ctm-mob-dn-sh-br-bd-cr,
63
+ var(--_ctm-tab-dn-sh-br-bd-cr, var(--_ctm-dn-sh-br-bd-cr))
64
+ );
43
65
  box-shadow: var(
44
66
  --_show-shadow,
45
- var(--_ctm-dn-sh-br-sw-ae, var(--_tst-dn-vo-tt-cr-dn-sw-ae))
46
- var(--_ctm-dn-sh-br-sw-br, var(--_tst-vo-se-sw-br))
47
- var(--_ctm-dn-sh-br-sw-sd, var(--_tst-vo-se-sw-sd))
48
- var(--_ctm-dn-sh-br-sw-cr, var(--_tst-dn-vo-tt-cr-dn-sw-cr))
67
+ var(--_ctm-mob-dn-sh-br-sw-ae, var(--_ctm-tab-dn-sh-br-sw-ae, var(--_ctm-dn-sh-br-sw-ae)))
68
+ var(--_ctm-mob-dn-sh-br-sw-br, var(--_ctm-tab-dn-sh-br-sw-br, var(--_ctm-dn-sh-br-sw-br)))
69
+ var(--_ctm-mob-dn-sh-br-sw-sd, var(--_ctm-tab-dn-sh-br-sw-sd, var(--_ctm-dn-sh-br-sw-sd)))
70
+ var(--_ctm-mob-dn-sh-br-sw-cr, var(--_ctm-tab-dn-sh-br-sw-cr, var(--_ctm-dn-sh-br-sw-cr)))
71
+ );
72
+ border-radius: var(
73
+ --_ctm-mob-dn-sh-br-br-rs,
74
+ var(--_ctm-tab-dn-sh-br-br-rs, var(--_ctm-dn-sh-br-br-rs))
49
75
  );
50
- border-radius: var(--_ctm-dn-sh-br-br-rs, var(--_tst-dn-sh-br-br-rs));
51
76
 
52
77
  .search-icon {
53
78
  font-size: 18px;
@@ -64,15 +89,40 @@
64
89
  color: #333;
65
90
  background: transparent;
66
91
  &::placeholder {
67
- color: var(--_ctm-dn-pr-tt-cr, var(--_tst-dn-pr-tt-cr));
68
- font-family: var(--_ctm-dn-pr-tt-ft-fy, var(--_tst-dn-pr-tt-ft-fy)), sans-serif;
69
- font-size: var(--_ctm-dn-pr-tt-ft-se, var(--_tst-dn-pr-tt-ft-se));
70
- font-weight: var(--_ctm-dn-pr-tt-ft-wt, var(--_tst-dn-pr-tt-ft-wt));
71
- font-style: var(--_ctm-dn-pr-tt-ft-se-ic, var(--_tst-dn-pr-tt-ft-se-ic));
72
- text-align: var(--_ctm-dn-pr-tt-tt-an, var(--_tst-dn-pr-tt-tt-an));
73
- letter-spacing: var(--_ctm-dn-pr-tt-lr-sg, var(--_tst-dn-pr-tt-lr-sg));
74
- line-height: var(--_ctm-dn-pr-tt-le-ht, var(--_tst-dn-pr-tt-le-ht));
75
- text-decoration: var(--_ctm-dn-pr-tt-ue);
92
+ color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
93
+ font-family: var(
94
+ --_ctm-mob-dn-pr-tt-ft-fy,
95
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
96
+ ),
97
+ sans-serif;
98
+ font-size: var(
99
+ --_ctm-mob-dn-pr-tt-ft-se,
100
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se))
101
+ );
102
+ font-weight: var(
103
+ --_ctm-mob-dn-pr-tt-ft-wt,
104
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
105
+ );
106
+ font-style: var(
107
+ --_ctm-mob-dn-pr-tt-ft-se-ic,
108
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
109
+ );
110
+ text-align: var(
111
+ --_ctm-mob-dn-pr-tt-tt-an,
112
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
113
+ );
114
+ letter-spacing: var(
115
+ --_ctm-mob-dn-pr-tt-lr-sg,
116
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
117
+ );
118
+ line-height: var(
119
+ --_ctm-mob-dn-pr-tt-le-ht,
120
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
121
+ );
122
+ text-decoration: var(
123
+ --_ctm-mob-dn-pr-tt-ue,
124
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
125
+ );
76
126
  }
77
127
  }
78
128
 
@@ -84,12 +134,23 @@
84
134
  cursor: pointer;
85
135
  transition: 0.3s;
86
136
  svg {
87
- width: var(--_ctm-dn-sh-in-in-se, var(--_tst-dn-sh-in-se));
88
- height: var(--_ctm-dn-sh-in-in-se, var(--_tst-dn-sh-in-se));
137
+ width: var(
138
+ --_ctm-mob-dn-sh-in-in-se,
139
+ var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
140
+ );
141
+ height: var(
142
+ --_ctm-mob-dn-sh-in-in-se,
143
+ var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
144
+ );
145
+
89
146
  path {
90
- stroke: var(--_ctm-dn-sh-in-in-c1, var(--_tst-dn-sh-in-in-c1));
147
+ stroke: var(
148
+ --_ctm-mob-dn-sh-in-in-c1,
149
+ var(--_ctm-tab-dn-sh-in-in-c1, var(--_ctm-dn-sh-in-in-c1))
150
+ );
91
151
  }
92
152
  }
153
+
93
154
  // &:hover {
94
155
  // background: #0056b3;
95
156
  // }