@sc-360-v2/storefront-cms-library 0.5.14 → 0.5.16

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.
@@ -1,86 +1,175 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- .custom-upload {
6
- display: flex;
7
- &:has(.preview_image_container) {
8
- justify-content: space-between;
9
- }
10
- align-items: center;
11
- border: 1px solid var(--_gray-300);
12
- background-color: var(--_base-white);
13
- padding: 16px;
14
- border-radius: 4px;
15
- gap: 12px;
16
- .preview_image_container {
17
- width: 100%;
18
- display: flex;
19
- align-items: center;
20
- gap: 12px;
21
- .image_title {
22
- font-size: 14px;
23
- margin-top: 3px;
24
- .label {
25
- color: var(--_thm-cs-at-sy);
26
- @include restrictToLinesShow(1);
27
- }
28
- }
29
- .preview_image {
30
- height: 36px;
31
- width: 36px;
32
- border-radius: 50%;
33
- padding: 4px;
34
- background: var(--_base-white);
35
- border: 1px solid var(--_gray-300);
36
- img {
37
- width: 100%;
38
- width: 100%;
39
- object-fit: contain;
40
- }
41
- }
42
- }
43
- .clear_upload_icon {
44
- svg {
45
- width: 18px;
46
- height: 18px;
47
- }
48
- }
49
- .uploadicon {
50
- padding: 8px;
51
- display: flex;
52
- justify-content: center;
53
- align-items: center;
54
- background: var(--_gray-200);
55
- outline: 6px solid var(--_gray-100);
56
- border-radius: 50%;
57
- height: 36px;
58
- width: 36px;
59
- .svg_icon {
60
- svg {
61
- width: 20px;
62
- height: 20px;
63
- path {
64
- stroke: var(--_gray-700);
65
- }
66
- }
67
- }
68
- }
69
-
70
- .file_upload_text {
71
- display: flex;
72
- flex-direction: column;
73
- gap: 8px;
74
- .label {
75
- @include restrictToLinesShow(1);
76
- }
77
- p {
78
- color: var(--_thm-cs-at-py);
79
- font-weight: 600;
80
- }
81
- span {
82
- color: var(--_thm-cs-at-sy);
83
- font-size: 14px;
84
- }
85
- }
86
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ .custom-upload {
6
+ display: flex;
7
+ &:has(.preview_image_container) {
8
+ justify-content: space-between;
9
+ }
10
+ align-items: center;
11
+ border: 1px solid var(--_gray-300);
12
+ background-color: var(--_base-white);
13
+ padding: 16px;
14
+ border-radius: 4px;
15
+ gap: 12px;
16
+ .preview_image_container {
17
+ width: 100%;
18
+ display: flex;
19
+ align-items: center;
20
+ gap: 12px;
21
+ .image_title {
22
+ font-size: 14px;
23
+ margin-top: 3px;
24
+ .label {
25
+ color: var(--_thm-cs-at-sy);
26
+ @include restrictToLinesShow(1);
27
+ }
28
+ }
29
+ .preview_image {
30
+ height: 36px;
31
+ width: 36px;
32
+ border-radius: 50%;
33
+ padding: 4px;
34
+ background: var(--_base-white);
35
+ border: 1px solid var(--_gray-300);
36
+ img {
37
+ width: 100%;
38
+ width: 100%;
39
+ object-fit: contain;
40
+ }
41
+ }
42
+ }
43
+ .clear_upload_icon {
44
+ svg {
45
+ width: 18px;
46
+ height: 18px;
47
+ }
48
+ }
49
+ .uploadicon {
50
+ padding: 8px;
51
+ display: flex;
52
+ justify-content: center;
53
+ align-items: center;
54
+ background: var(--_gray-200);
55
+ outline: 6px solid var(--_gray-100);
56
+ border-radius: 50%;
57
+ height: 36px;
58
+ width: 36px;
59
+ .svg_icon {
60
+ svg {
61
+ width: 20px;
62
+ height: 20px;
63
+ path {
64
+ stroke: var(--_gray-700);
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ .file_upload_text {
71
+ display: flex;
72
+ flex-direction: column;
73
+ gap: 8px;
74
+ .label {
75
+ @include restrictToLinesShow(1);
76
+ }
77
+ p {
78
+ color: var(--_thm-cs-at-py);
79
+ font-weight: 600;
80
+ }
81
+ span {
82
+ color: var(--_thm-cs-at-sy);
83
+ font-size: 14px;
84
+ }
85
+ }
86
+ }
87
+
88
+ // Skeleton for the reused ProductOptions swatches (rendered inside the CMS
89
+ // builder/preview, e.g. the Category Groups product cards). Mirrors the website
90
+ // globals so the swatch placeholders keep their spacing here too.
91
+ .product_options_skeleton {
92
+ width: 100%;
93
+ .sklts_swatch {
94
+ display: flex;
95
+ gap: 8px;
96
+ margin-bottom: 8px;
97
+ }
98
+ }
99
+
100
+ // Skeleton base styles (mirrored from storefront-websites globals so reused
101
+ // element skeletons render identically inside the CMS builder/preview).
102
+ .skeleton {
103
+ background-color: #e5e7eb !important;
104
+ border: none !important;
105
+ min-height: 8px;
106
+ position: relative;
107
+ overflow: hidden;
108
+ display: block;
109
+
110
+ &--rectangular {
111
+ width: 100%;
112
+ height: 100%;
113
+ }
114
+
115
+ &--circular {
116
+ border-radius: 50%;
117
+ }
118
+
119
+ &--text {
120
+ transform-origin: 0 55%;
121
+ transform: scale(1, 0.6);
122
+ border-radius: 4px;
123
+
124
+ &::before {
125
+ content: "\00a0";
126
+ }
127
+ }
128
+
129
+ &--shimmer {
130
+ &::after {
131
+ content: "";
132
+ position: absolute;
133
+ top: 0;
134
+ left: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ background: linear-gradient(
138
+ 90deg,
139
+ transparent 0%,
140
+ rgba(255, 255, 255, 0.4) 50%,
141
+ transparent 100%
142
+ );
143
+ animation: skeleton-shimmer 1.5s infinite;
144
+ transform: translateX(-100%);
145
+ }
146
+ }
147
+
148
+ &--pulse {
149
+ animation: skeleton-pulse 1.5s ease-in-out infinite;
150
+ }
151
+ }
152
+
153
+ @keyframes skeleton-shimmer {
154
+ 0% {
155
+ transform: translateX(-100%);
156
+ }
157
+ 100% {
158
+ transform: translateX(100%);
159
+ }
160
+ }
161
+
162
+ @keyframes skeleton-pulse {
163
+ 0%,
164
+ 100% {
165
+ opacity: 1;
166
+ }
167
+ 50% {
168
+ opacity: 0.5;
169
+ }
170
+ }
171
+
172
+ .skeleton__element {
173
+ @extend .skeleton;
174
+ @extend .skeleton--shimmer;
175
+ }
@@ -1,87 +1,87 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- [data-div-type="element"] {
6
- &[data-element-type="itemStock"] {
7
- width: var(
8
- --_sf-el-wh-st-mx,
9
- calc(
10
- 1% *
11
- var(
12
- --_ctm-mob-ele-nw-wh-vl,
13
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
- )
15
- )
16
- );
17
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
18
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
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
- .item__stock__section {
31
- display: flex;
32
- align-items: center;
33
- cursor: pointer;
34
- gap: 8px;
35
- .item__stock__heading {
36
- position: relative;
37
- .item__stock__text {
38
- font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
39
- font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
40
- color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
41
- font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
42
- font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
43
- text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
44
- text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
45
- letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
46
- line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
47
- }
48
- .stock_message_conatainer {
49
- display: flex;
50
- padding: 2px 8px 2px 6px;
51
- align-items: center;
52
- gap: 4px;
53
- mix-blend-mode: multiply;
54
- background-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-bd-cr);
55
- border-width: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-wh);
56
- border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
57
- border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
58
- border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
59
- box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
60
- prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
61
- prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
62
- prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
63
-
64
- .stock_messages {
65
- font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
66
- font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
67
- color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
68
- font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
69
- font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
70
- text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
71
- text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
72
- letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
73
- line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
74
- }
75
- }
76
- }
77
- }
78
-
79
- &[data-widget-shadow="false"] {
80
- --_show-shadow: none;
81
- }
82
-
83
- &[data-show-shadow="false"] {
84
- --_show-shadow: none;
85
- }
86
- }
87
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ [data-div-type="element"] {
6
+ &[data-element-type="itemStock"] {
7
+ width: var(
8
+ --_sf-el-wh-st-mx,
9
+ calc(
10
+ 1% *
11
+ var(
12
+ --_ctm-mob-ele-nw-wh-vl,
13
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
+ )
15
+ )
16
+ );
17
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
18
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
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
+ .item__stock__section {
31
+ display: flex;
32
+ align-items: center;
33
+ cursor: pointer;
34
+ gap: 8px;
35
+ .item__stock__heading {
36
+ position: relative;
37
+ .item__stock__text {
38
+ font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
39
+ font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
40
+ color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
41
+ font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
42
+ font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
43
+ text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
44
+ text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
45
+ letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
46
+ line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
47
+ }
48
+ .stock_message_conatainer {
49
+ display: flex;
50
+ padding: 2px 8px 2px 6px;
51
+ align-items: center;
52
+ gap: 4px;
53
+ mix-blend-mode: multiply;
54
+ background-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-bd-cr);
55
+ border-width: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-wh);
56
+ border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
57
+ border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
58
+ border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
59
+ box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
60
+ prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
61
+ prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
62
+ prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);
63
+
64
+ .stock_messages {
65
+ font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
66
+ font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
67
+ color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
68
+ font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
69
+ font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
70
+ text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
71
+ text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
72
+ letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
73
+ line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
74
+ }
75
+ }
76
+ }
77
+ }
78
+
79
+ &[data-widget-shadow="false"] {
80
+ --_show-shadow: none;
81
+ }
82
+
83
+ &[data-show-shadow="false"] {
84
+ --_show-shadow: none;
85
+ }
86
+ }
87
+ }
@@ -17,7 +17,7 @@
17
17
  )
18
18
  );
19
19
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
20
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
21
21
 
22
22
  --_aspect-ratio: calc(
23
23
  1 *
package/dist/login.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  )
18
18
  );
19
19
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
20
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
21
21
  position: relative;
22
22
 
23
23
  & > .wrapper {
@@ -25,7 +25,8 @@
25
25
  // align-items: center;
26
26
  // justify-content: center;
27
27
  width: 100%;
28
- height: 100%;
28
+ // height: 100%;
29
+ min-height: prepareMediaVariable(--_ctm-lt-ht);
29
30
  }
30
31
 
31
32
  // & form {