@sc-360-v2/storefront-cms-library 0.5.77 → 0.5.79

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 (9) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/custom-fonts.scss +103 -100
  3. package/dist/employee-bulk-order.scss +4060 -4060
  4. package/dist/filters.scss +13 -0
  5. package/dist/mega-menu-container.scss +152 -152
  6. package/dist/mega-menu.scss +10 -0
  7. package/dist/spotlight.scss +1706 -1706
  8. package/dist/user-elements.scss +18 -0
  9. package/package.json +1 -1
package/dist/filters.scss CHANGED
@@ -838,6 +838,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
838
838
  display: flex;
839
839
  align-items: center;
840
840
  width: 100%;
841
+ transition: all 400ms ease;
841
842
 
842
843
  padding: prepareMediaVariable(
843
844
  --_ctm-dn-sh-br-dt-se-pg,
@@ -1729,6 +1730,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1729
1730
  }
1730
1731
  }
1731
1732
 
1733
+ .filter__empty {
1734
+ display: flex;
1735
+ align-items: center;
1736
+ justify-content: center;
1737
+ width: 100%;
1738
+ min-height: 100px;
1739
+ margin-top: 12px;
1740
+ border-radius: 6px;
1741
+ background: rgb(247 247 247);
1742
+ font-weight: bolder;
1743
+ }
1744
+
1732
1745
  .clear__btn {
1733
1746
  display: flex;
1734
1747
  align-items: center;
package/dist/mega-menu-container.scss CHANGED
@@ -1,152 +1,152 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $vtl: "[data-element-type='mega-menu'] > .vtl";
5
- [data-div-type="element"] {
6
- &[data-element-type="mgContainer"] {
7
- // width: var(--_sf-con-nw-wh);
8
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
- // width: calc(1% * var(--_ctm-mgcon-ele-nw-wh-vl, auto));
10
- // width: 100%;
11
- // height: var(--_ctm-con-lt-ht);
12
- // margin: var(--_ctm-mgcon-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
13
-
14
- // width: 100%;
15
- // background: var(--_ctm-mgcon-dn-bd-cr);
16
- // width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
17
- &:is(#{$vtl} *) {
18
- --_sf-bm-gls-wdth-vl: prepareMediaVariable(--_ctm-mgcon-lt-wh);
19
- }
20
- width: var(--_sf-bm-gls-wdth-vl, 100vw);
21
- min-height: var(--_ctm-mgcon-lt-mn-ht);
22
- margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
23
-
24
- & > div {
25
- &.wrapper {
26
- // width: 100%;
27
- width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
28
- margin-inline: auto;
29
- height: 100%;
30
- padding: var(--_ctm-mob-mgcon-lt-pg, var(--_ctm-tab-mgcon-lt-pg, var(--_ctm-mgcon-lt-pg)));
31
-
32
- &:is([data-background-type="color"] > *).wrapper {
33
- background-color: #{prepareMediaVariable(--_ctm-mgcon-dn-bd-cr)};
34
- }
35
-
36
- &:is([data-background-type="gradient"] > *).wrapper {
37
- --_sf-mgcon-gradient-angle: calc(
38
- #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg
39
- );
40
- --_sf-mgcon-gradient-start-color: #{prepareMediaVariable(
41
- --_ctm-mgcon-dn-gt-st-cr,
42
- transparent
43
- )};
44
- --_sf-mgcon-gradient-start-position: calc(
45
- #{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%
46
- );
47
- --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
48
- --_ctm-mgcon-dn-gt-ed-cr,
49
- transparent
50
- )};
51
- --_sf-mgcon-gradient-end-position: calc(
52
- #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%
53
- );
54
- --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
55
- }
56
-
57
- &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
58
- background-image: linear-gradient(
59
- var(--_sf-mgcon-gradient-angle),
60
- var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
61
- var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
62
- );
63
- }
64
-
65
- &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
66
- background-image: radial-gradient(
67
- circle at var(--_sf-mgcon-gradient-position),
68
- var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
69
- var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
70
- );
71
- }
72
- &:is([data-background-type="image"] > *).wrapper {
73
- background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
74
- background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
75
- background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
76
- background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
77
- background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
78
- background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
79
- }
80
-
81
- // background-color: var(
82
- // --_ctm-mob-mgcon-dn-bd-cr,
83
- // var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
84
- // );
85
- // background-image: var(
86
- // --_ctm-mob-mgcon-dn-bd-ie,
87
- // var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
88
- // );
89
- // background-attachment: var(
90
- // --_ctm-mob-mgcon-dn-bd-at,
91
- // var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
92
- // );
93
- // background-position: var(
94
- // --_ctm-mob-mgcon-dn-bd-pn,
95
- // var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
96
- // );
97
- // background-repeat: var(
98
- // --_ctm-mob-mgcon-dn-bd-rt,
99
- // var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
100
- // );
101
- // background-size: var(
102
- // --_ctm-mob-mgcon-dn-bd-se,
103
- // var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
104
- // );
105
- border-radius: var(
106
- --_ctm-mob-mgcon-dn-br-rs,
107
- var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
108
- );
109
- border-color: var(
110
- --_ctm-mob-mgcon-dn-br-cr,
111
- var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
112
- );
113
- border-style: var(
114
- --_ctm-mob-mgcon-dn-br-se,
115
- var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
116
- );
117
- border-width: var(
118
- --_ctm-mob-mgcon-dn-br-wh,
119
- var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
120
- );
121
- box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
122
- prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
123
- prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
124
- // box-shadow: var(
125
- // --_hover-show-shadow,
126
- // var(
127
- // --_sf-hr-bx-sw,
128
- // var(
129
- // --_show-shadow,
130
- // var(
131
- // --_ctm-mob-dn-dt-se-sw-ae,
132
- // var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
133
- // )
134
- // var(
135
- // --_ctm-mob-dn-dt-se-sw-br,
136
- // var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
137
- // )
138
- // var(
139
- // --_ctm-mob-dn-dt-se-sw-sd,
140
- // var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
141
- // )
142
- // var(
143
- // --_ctm-mob-dn-dt-se-sw-cr,
144
- // var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
145
- // )
146
- // )
147
- // )
148
- // );
149
- }
150
- }
151
- }
152
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $vtl: "[data-element-type='mega-menu'] > .vtl";
5
+ [data-div-type="element"] {
6
+ &[data-element-type="mgContainer"] {
7
+ // width: var(--_sf-con-nw-wh);
8
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
+ // width: calc(1% * var(--_ctm-mgcon-ele-nw-wh-vl, auto));
10
+ // width: 100%;
11
+ // height: var(--_ctm-con-lt-ht);
12
+ // margin: var(--_ctm-mgcon-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
13
+
14
+ // width: 100%;
15
+ // background: var(--_ctm-mgcon-dn-bd-cr);
16
+ // width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
17
+ // Custom property values are not evaluated by Sass, so the function needs
18
+ // interpolation. Falls back to 100vw while no width has been set.
19
+ --_sf-bm-gls-wdth-vl: #{prepareMediaVariable(--_ctm-mgcon-lt-wh, 100vw)};
20
+ width: var(--_sf-bm-gls-wdth-vl, 100vw);
21
+ min-height: var(--_ctm-mgcon-lt-mn-ht);
22
+ margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
23
+
24
+ & > div {
25
+ &.wrapper {
26
+ // width: 100%;
27
+ width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
28
+ margin-inline: auto;
29
+ height: 100%;
30
+ padding: var(--_ctm-mob-mgcon-lt-pg, var(--_ctm-tab-mgcon-lt-pg, var(--_ctm-mgcon-lt-pg)));
31
+
32
+ &:is([data-background-type="color"] > *).wrapper {
33
+ background-color: #{prepareMediaVariable(--_ctm-mgcon-dn-bd-cr)};
34
+ }
35
+
36
+ &:is([data-background-type="gradient"] > *).wrapper {
37
+ --_sf-mgcon-gradient-angle: calc(
38
+ #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ae, 90)} * 1deg
39
+ );
40
+ --_sf-mgcon-gradient-start-color: #{prepareMediaVariable(
41
+ --_ctm-mgcon-dn-gt-st-cr,
42
+ transparent
43
+ )};
44
+ --_sf-mgcon-gradient-start-position: calc(
45
+ #{prepareMediaVariable(--_ctm-mgcon-dn-gt-st-pn, 0)} * 1%
46
+ );
47
+ --_sf-mgcon-gradient-end-color: #{prepareMediaVariable(
48
+ --_ctm-mgcon-dn-gt-ed-cr,
49
+ transparent
50
+ )};
51
+ --_sf-mgcon-gradient-end-position: calc(
52
+ #{prepareMediaVariable(--_ctm-mgcon-dn-gt-ed-pn, 100)} * 1%
53
+ );
54
+ --_sf-mgcon-gradient-position: #{prepareMediaVariable(--_ctm-mgcon-dn-gt-pn, center)};
55
+ }
56
+
57
+ &:is([data-gradient-type="Linear Gradient"] > *).wrapper {
58
+ background-image: linear-gradient(
59
+ var(--_sf-mgcon-gradient-angle),
60
+ var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
61
+ var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
62
+ );
63
+ }
64
+
65
+ &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
66
+ background-image: radial-gradient(
67
+ circle at var(--_sf-mgcon-gradient-position),
68
+ var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
69
+ var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
70
+ );
71
+ }
72
+ &:is([data-background-type="image"] > *).wrapper {
73
+ background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
74
+ background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
75
+ background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
76
+ background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
77
+ background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
78
+ background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
79
+ }
80
+
81
+ // background-color: var(
82
+ // --_ctm-mob-mgcon-dn-bd-cr,
83
+ // var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
84
+ // );
85
+ // background-image: var(
86
+ // --_ctm-mob-mgcon-dn-bd-ie,
87
+ // var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
88
+ // );
89
+ // background-attachment: var(
90
+ // --_ctm-mob-mgcon-dn-bd-at,
91
+ // var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
92
+ // );
93
+ // background-position: var(
94
+ // --_ctm-mob-mgcon-dn-bd-pn,
95
+ // var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
96
+ // );
97
+ // background-repeat: var(
98
+ // --_ctm-mob-mgcon-dn-bd-rt,
99
+ // var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
100
+ // );
101
+ // background-size: var(
102
+ // --_ctm-mob-mgcon-dn-bd-se,
103
+ // var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
104
+ // );
105
+ border-radius: var(
106
+ --_ctm-mob-mgcon-dn-br-rs,
107
+ var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
108
+ );
109
+ border-color: var(
110
+ --_ctm-mob-mgcon-dn-br-cr,
111
+ var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
112
+ );
113
+ border-style: var(
114
+ --_ctm-mob-mgcon-dn-br-se,
115
+ var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
116
+ );
117
+ border-width: var(
118
+ --_ctm-mob-mgcon-dn-br-wh,
119
+ var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
120
+ );
121
+ box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
122
+ prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
123
+ prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
124
+ // box-shadow: var(
125
+ // --_hover-show-shadow,
126
+ // var(
127
+ // --_sf-hr-bx-sw,
128
+ // var(
129
+ // --_show-shadow,
130
+ // var(
131
+ // --_ctm-mob-dn-dt-se-sw-ae,
132
+ // var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
133
+ // )
134
+ // var(
135
+ // --_ctm-mob-dn-dt-se-sw-br,
136
+ // var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
137
+ // )
138
+ // var(
139
+ // --_ctm-mob-dn-dt-se-sw-sd,
140
+ // var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
141
+ // )
142
+ // var(
143
+ // --_ctm-mob-dn-dt-se-sw-cr,
144
+ // var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
145
+ // )
146
+ // )
147
+ // )
148
+ // );
149
+ }
150
+ }
151
+ }
152
+ }
package/dist/mega-menu.scss CHANGED
@@ -422,12 +422,20 @@ $defaultValues: (
422
422
  // `Item`-suffixed vars so it stays independent of the caret.
423
423
  &.flex__menu__item__leading__icon {
424
424
  flex: 0 0 auto;
425
+ // Vertical alignment against the label (start | center | end).
426
+ align-self: prepareMediaVariable(
427
+ --_ctm-meg-dn-mu-im-se-dt-se-vl-at-im,
428
+ center
429
+ );
425
430
  margin-inline-end: prepareMediaVariable(
426
431
  --_ctm-meg-dn-mu-im-se-dt-se-in-gp-im,
427
432
  0px
428
433
  );
429
434
 
435
+ // Inline, the svg sits on the baseline inside SirvIcon's wrapper span,
436
+ // which then reserves descender space and throws off align-self.
430
437
  svg {
438
+ display: block;
431
439
  width: var(
432
440
  --_sf-it-at-in-se-im,
433
441
  var(
@@ -461,10 +469,12 @@ $defaultValues: (
461
469
 
462
470
  &.flex__menu__item__icon {
463
471
  pointer-events: all;
472
+ align-self: prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-vl-at, center);
464
473
  &[data-rotate="true"] {
465
474
  --_sf-svg-tr: 180deg;
466
475
  }
467
476
  svg {
477
+ display: block;
468
478
  width: var(
469
479
  --_sf-it-at-in-se,
470
480
  var(