@sc-360-v2/storefront-cms-library 0.2.34 → 0.2.36
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/README.md +12 -12
- package/dist/builder.js +1 -1
- package/dist/button.scss +11 -11
- package/dist/code-temp.scss +18 -24
- package/dist/common-element.scss +35 -0
- package/dist/container.scss +4 -4
- package/dist/custom-fonts.scss +59 -0
- package/dist/faq.scss +1 -1
- package/dist/filters.scss +445 -0
- package/dist/functions.scss +148 -0
- package/dist/globals.scss +94 -94
- package/dist/grid.scss +10 -4
- package/dist/hotspot.scss +224 -82
- package/dist/icons.js +1 -1
- package/dist/image-temp.scss +6 -3
- package/dist/index.js +1 -1
- package/dist/past-orders.scss +112 -0
- package/dist/product-basic-elements.scss +2 -2
- package/dist/quotes.scss +112 -0
- package/dist/repeater.scss +1 -0
- package/dist/rfqs.scss +112 -0
- package/dist/section.scss +51 -16
- package/dist/sort.scss +81 -0
- package/dist/stack.scss +36 -3
- package/dist/text-temp.scss +1 -0
- package/dist/types/builder/elements/button/index.d.ts +1 -0
- package/dist/types/builder/elements/light-box-v2/index.d.ts +45 -0
- package/dist/types/builder/enums/index.d.ts +14 -3
- package/dist/types/builder/index.d.ts +2 -1
- package/dist/types/builder/interfaces/global.d.ts +7 -1
- package/dist/types/builder/tools/element-edit/allocations.d.ts +28 -0
- package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
- package/dist/types/builder/tools/element-edit/lightBoxV2.d.ts +23 -0
- package/dist/types/builder/tools/element-edit/product-image.d.ts +2 -2
- package/dist/types/builder/tools/element-edit/staticText.d.ts +16 -0
- package/dist/variant-picker.scss +1 -1
- package/dist/widget.scss +6 -0
- package/package.json +1 -1
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
@use "sass:list";
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
|
|
4
|
+
// $breakPoints: (
|
|
5
|
+
// desktop: (
|
|
6
|
+
// min: 1024px,
|
|
7
|
+
// max: 99999px,
|
|
8
|
+
// ),
|
|
9
|
+
// mobile: (
|
|
10
|
+
// min: 100px,
|
|
11
|
+
// max: 1023px,
|
|
12
|
+
// ),
|
|
13
|
+
// laptop: (
|
|
14
|
+
// min: 1024px,
|
|
15
|
+
// max: 1367px,
|
|
16
|
+
// ),
|
|
17
|
+
// small: (
|
|
18
|
+
// min: 50px,
|
|
19
|
+
// max: 399px,
|
|
20
|
+
// ),
|
|
21
|
+
// );
|
|
22
|
+
|
|
23
|
+
$breakPoints: (
|
|
24
|
+
desktop: (
|
|
25
|
+
min: 1024px,
|
|
26
|
+
max: 99999px,
|
|
27
|
+
),
|
|
28
|
+
mobile: (
|
|
29
|
+
min: 10px,
|
|
30
|
+
max: 767px,
|
|
31
|
+
),
|
|
32
|
+
tablet: (
|
|
33
|
+
min: 768px,
|
|
34
|
+
max: 1023px,
|
|
35
|
+
),
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
@mixin prepareMediaQueries($list) {
|
|
39
|
+
@each $mediaKey, $mediaValue in $breakPoints {
|
|
40
|
+
$maxWidth: map.get($mediaValue, max);
|
|
41
|
+
$minWidth: map.get($mediaValue, min);
|
|
42
|
+
@media only screen and (max-width: #{$maxWidth}) and (min-width: #{$minWidth}) {
|
|
43
|
+
@each $key, $value in $list {
|
|
44
|
+
$value1: map.get($value, $mediaKey);
|
|
45
|
+
@if ($value1 != null) {
|
|
46
|
+
#{$key}: $value1;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@mixin restrictToLinesShow($count, $type: "optional") {
|
|
54
|
+
display: -webkit-box;
|
|
55
|
+
-webkit-line-clamp: $count;
|
|
56
|
+
overflow: clip;
|
|
57
|
+
text-overflow: ellipsis;
|
|
58
|
+
@if ($type == "optional") {
|
|
59
|
+
-webkit-box-orient: vertical;
|
|
60
|
+
} @else {
|
|
61
|
+
-webkit-box-orient: $type;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@function getListOfResponsive($desktop, $mobile, $latop: "optional") {
|
|
66
|
+
$list: (
|
|
67
|
+
desktop: $desktop,
|
|
68
|
+
mobile: $mobile,
|
|
69
|
+
);
|
|
70
|
+
@if ($latop != "optional") {
|
|
71
|
+
$list: map-merge(
|
|
72
|
+
$list,
|
|
73
|
+
(
|
|
74
|
+
laptop: $latop,
|
|
75
|
+
)
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
@return $list;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@function getTranstionValue($property, $duration: "normal") {
|
|
82
|
+
$dur: var(--_anim-duration);
|
|
83
|
+
@if ($duration == "slow") {
|
|
84
|
+
$dur: var(--_anim-duration-slow);
|
|
85
|
+
}
|
|
86
|
+
@return $property #{$dur} var(--_anim-timing-function-v4);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@function getRepeatColWidth($colcount, $colgap) {
|
|
90
|
+
@return repeat(
|
|
91
|
+
var($colcount),
|
|
92
|
+
calc((100% / var($colcount)) - (((var($colcount) - 1) * (var($colgap))) / (var($colcount))))
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@function getCommonHasNavContainer() {
|
|
97
|
+
$css: ();
|
|
98
|
+
$props: (
|
|
99
|
+
display: var(--_d-flex),
|
|
100
|
+
flex-wrap: wrap,
|
|
101
|
+
justify-content: space-between,
|
|
102
|
+
gap: var(--_default-row-gap) var(--_default-col-gap),
|
|
103
|
+
);
|
|
104
|
+
$css: map-merge($css, $props);
|
|
105
|
+
@return $css;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@mixin prepareCustomClassCSSProps($props) {
|
|
109
|
+
@each $key, $value in $props {
|
|
110
|
+
@if ($key == class) {
|
|
111
|
+
@each $classKey, $classValue in $value {
|
|
112
|
+
.#{$classKey} {
|
|
113
|
+
@each $key1, $value1 in $classValue {
|
|
114
|
+
@if ($key1 == common) {
|
|
115
|
+
@each $key2, $value2 in $value1 {
|
|
116
|
+
#{$key2}: #{$value2};
|
|
117
|
+
}
|
|
118
|
+
} @else {
|
|
119
|
+
@media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
|
|
120
|
+
@each $key2, $value2 in $value1 {
|
|
121
|
+
#{$key2}: #{$value2};
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
// @include getcssprops($classValue, $breakPoints);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
} @else {
|
|
130
|
+
#{$key} {
|
|
131
|
+
@each $key1, $value1 in $value {
|
|
132
|
+
@if ($key1 == common) {
|
|
133
|
+
@each $key2, $value2 in $value1 {
|
|
134
|
+
#{$key2}: #{$value2};
|
|
135
|
+
}
|
|
136
|
+
} @else {
|
|
137
|
+
@media only screen and (max-width: #{map.get(map.get($breakPoints, $key1), max)}) and (min-width: #{map.get(map.get($breakPoints, $key1), min)}) {
|
|
138
|
+
@each $key2, $value2 in $value1 {
|
|
139
|
+
#{$key2}: #{$value2};
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
// @include getcssprops($value, $breakPoints);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
package/dist/globals.scss
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--max-width: 1100px;
|
|
3
|
-
--border-radius: 12px;
|
|
4
|
-
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
-
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
-
"Courier New", monospace;
|
|
7
|
-
|
|
8
|
-
--foreground-rgb: 0, 0, 0;
|
|
9
|
-
--background-start-rgb: 214, 219, 220;
|
|
10
|
-
--background-end-rgb: 255, 255, 255;
|
|
11
|
-
|
|
12
|
-
--primary-glow: conic-gradient(
|
|
13
|
-
from 180deg at 50% 50%,
|
|
14
|
-
#16abff33 0deg,
|
|
15
|
-
#0885ff33 55deg,
|
|
16
|
-
#54d6ff33 120deg,
|
|
17
|
-
#0071ff33 160deg,
|
|
18
|
-
transparent 360deg
|
|
19
|
-
);
|
|
20
|
-
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
-
|
|
22
|
-
--tile-start-rgb: 239, 245, 249;
|
|
23
|
-
--tile-end-rgb: 228, 232, 233;
|
|
24
|
-
--tile-border: conic-gradient(
|
|
25
|
-
#00000080,
|
|
26
|
-
#00000040,
|
|
27
|
-
#00000030,
|
|
28
|
-
#00000020,
|
|
29
|
-
#00000010,
|
|
30
|
-
#00000010,
|
|
31
|
-
#00000080
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
--callout-rgb: 238, 240, 241;
|
|
35
|
-
--callout-border-rgb: 172, 175, 176;
|
|
36
|
-
--card-rgb: 180, 185, 188;
|
|
37
|
-
--card-border-rgb: 131, 134, 135;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@media (prefers-color-scheme: dark) {
|
|
41
|
-
:root {
|
|
42
|
-
--foreground-rgb: 255, 255, 255;
|
|
43
|
-
--background-start-rgb: 0, 0, 0;
|
|
44
|
-
--background-end-rgb: 0, 0, 0;
|
|
45
|
-
|
|
46
|
-
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
-
--secondary-glow: linear-gradient(
|
|
48
|
-
to bottom right,
|
|
49
|
-
rgba(1, 65, 255, 0),
|
|
50
|
-
rgba(1, 65, 255, 0),
|
|
51
|
-
rgba(1, 65, 255, 0.3)
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
--tile-start-rgb: 2, 13, 46;
|
|
55
|
-
--tile-end-rgb: 2, 5, 19;
|
|
56
|
-
--tile-border: conic-gradient(
|
|
57
|
-
#ffffff80,
|
|
58
|
-
#ffffff40,
|
|
59
|
-
#ffffff30,
|
|
60
|
-
#ffffff20,
|
|
61
|
-
#ffffff10,
|
|
62
|
-
#ffffff10,
|
|
63
|
-
#ffffff80
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
--callout-rgb: 20, 20, 20;
|
|
67
|
-
--callout-border-rgb: 108, 108, 108;
|
|
68
|
-
--card-rgb: 100, 100, 100;
|
|
69
|
-
--card-border-rgb: 200, 200, 200;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
* {
|
|
74
|
-
box-sizing: border-box;
|
|
75
|
-
padding: 0;
|
|
76
|
-
margin: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
html,
|
|
80
|
-
body {
|
|
81
|
-
max-width: 100vw;
|
|
82
|
-
overflow-x: hidden;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
a {
|
|
86
|
-
color: inherit;
|
|
87
|
-
text-decoration: none;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@media (prefers-color-scheme: dark) {
|
|
91
|
-
html {
|
|
92
|
-
color-scheme: dark;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--max-width: 1100px;
|
|
3
|
+
--border-radius: 12px;
|
|
4
|
+
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
+
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
+
"Courier New", monospace;
|
|
7
|
+
|
|
8
|
+
--foreground-rgb: 0, 0, 0;
|
|
9
|
+
--background-start-rgb: 214, 219, 220;
|
|
10
|
+
--background-end-rgb: 255, 255, 255;
|
|
11
|
+
|
|
12
|
+
--primary-glow: conic-gradient(
|
|
13
|
+
from 180deg at 50% 50%,
|
|
14
|
+
#16abff33 0deg,
|
|
15
|
+
#0885ff33 55deg,
|
|
16
|
+
#54d6ff33 120deg,
|
|
17
|
+
#0071ff33 160deg,
|
|
18
|
+
transparent 360deg
|
|
19
|
+
);
|
|
20
|
+
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
+
|
|
22
|
+
--tile-start-rgb: 239, 245, 249;
|
|
23
|
+
--tile-end-rgb: 228, 232, 233;
|
|
24
|
+
--tile-border: conic-gradient(
|
|
25
|
+
#00000080,
|
|
26
|
+
#00000040,
|
|
27
|
+
#00000030,
|
|
28
|
+
#00000020,
|
|
29
|
+
#00000010,
|
|
30
|
+
#00000010,
|
|
31
|
+
#00000080
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
--callout-rgb: 238, 240, 241;
|
|
35
|
+
--callout-border-rgb: 172, 175, 176;
|
|
36
|
+
--card-rgb: 180, 185, 188;
|
|
37
|
+
--card-border-rgb: 131, 134, 135;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-color-scheme: dark) {
|
|
41
|
+
:root {
|
|
42
|
+
--foreground-rgb: 255, 255, 255;
|
|
43
|
+
--background-start-rgb: 0, 0, 0;
|
|
44
|
+
--background-end-rgb: 0, 0, 0;
|
|
45
|
+
|
|
46
|
+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
+
--secondary-glow: linear-gradient(
|
|
48
|
+
to bottom right,
|
|
49
|
+
rgba(1, 65, 255, 0),
|
|
50
|
+
rgba(1, 65, 255, 0),
|
|
51
|
+
rgba(1, 65, 255, 0.3)
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
--tile-start-rgb: 2, 13, 46;
|
|
55
|
+
--tile-end-rgb: 2, 5, 19;
|
|
56
|
+
--tile-border: conic-gradient(
|
|
57
|
+
#ffffff80,
|
|
58
|
+
#ffffff40,
|
|
59
|
+
#ffffff30,
|
|
60
|
+
#ffffff20,
|
|
61
|
+
#ffffff10,
|
|
62
|
+
#ffffff10,
|
|
63
|
+
#ffffff80
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
--callout-rgb: 20, 20, 20;
|
|
67
|
+
--callout-border-rgb: 108, 108, 108;
|
|
68
|
+
--card-rgb: 100, 100, 100;
|
|
69
|
+
--card-border-rgb: 200, 200, 200;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
* {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
padding: 0;
|
|
76
|
+
margin: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
html,
|
|
80
|
+
body {
|
|
81
|
+
max-width: 100vw;
|
|
82
|
+
overflow-x: hidden;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
a {
|
|
86
|
+
color: inherit;
|
|
87
|
+
text-decoration: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media (prefers-color-scheme: dark) {
|
|
91
|
+
html {
|
|
92
|
+
color-scheme: dark;
|
|
93
|
+
}
|
|
94
|
+
}
|
package/dist/grid.scss
CHANGED
|
@@ -12,6 +12,11 @@ $elementSelector: "[data-div-type='element']";
|
|
|
12
12
|
var(--_ctm-mob-gri-dn-sw-sd, var(--_ctm-tab-gri-dn-sw-sd, var(--_ctm-gri-dn-sw-sd)))
|
|
13
13
|
var(--_ctm-mob-gri-dn-sw-cr, var(--_ctm-tab-gri-dn-sw-cr, var(--_ctm-gri-dn-sw-cr)))
|
|
14
14
|
);
|
|
15
|
+
// padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
|
|
16
|
+
|
|
17
|
+
// padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
|
|
18
|
+
// background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
|
|
19
|
+
|
|
15
20
|
&[data-show-shadow="false"] {
|
|
16
21
|
--_hide-grid-shadow: none;
|
|
17
22
|
}
|
|
@@ -44,15 +49,16 @@ $elementSelector: "[data-div-type='element']";
|
|
|
44
49
|
}
|
|
45
50
|
&[data-div-type="cms-grid-wrapper"] {
|
|
46
51
|
// padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
|
|
52
|
+
padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
|
|
53
|
+
background: var(
|
|
54
|
+
--_ctm-mob-gri-dn-bd-cr,
|
|
55
|
+
var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr))
|
|
56
|
+
);
|
|
47
57
|
width: 100%;
|
|
48
58
|
grid-area: 1/1/2/2 !important;
|
|
49
59
|
height: 100%;
|
|
50
60
|
// padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
|
|
51
61
|
display: var(--_d-grid);
|
|
52
|
-
background: var(
|
|
53
|
-
--_ctm-mob-gri-dn-bd-cr,
|
|
54
|
-
var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr))
|
|
55
|
-
);
|
|
56
62
|
border-color: var(
|
|
57
63
|
--_hide-grid-border,
|
|
58
64
|
var(--_ctm-mob-gri-dn-br-cr, var(--_ctm-tab-gri-dn-br-cr, var(--_ctm-gri-dn-br-cr)))
|