@sc-360-v2/storefront-cms-library 0.4.62 → 0.4.63

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 (4) hide show
  1. package/dist/cart-details.scss +150 -4
  2. package/dist/cart-summary.scss +2728 -2728
  3. package/dist/customization-tree.scss +161 -160
  4. package/package.json +1 -1
package/dist/customization-tree.scss CHANGED
@@ -1,160 +1,161 @@
1
- $Gray-900: #101828;
2
- $border-color: #a5a5a5;
3
- $Gray-600: #475467;
4
- $link-color: #243dc6;
5
-
6
- .customTreeWrapper {
7
- padding: 20px 20px 20px 145px;
8
-
9
- h3 {
10
- color: $Gray-900;
11
- font-size: 18px;
12
- font-weight: 700;
13
- line-height: 28px;
14
- margin-bottom: 12px;
15
- }
16
- .treeNode {
17
- position: relative;
18
- &::after {
19
- content: "";
20
- position: absolute;
21
- bottom: 0;
22
- left: 0;
23
- width: 100%;
24
- border-bottom: 1px dotted var(--_gray-300);
25
- }
26
- }
27
- .treeNode,
28
- .treeItem {
29
- position: relative;
30
- padding-left: 16px;
31
- border-left: 1px dotted var(--_gray-300);
32
- margin: 24px 0;
33
- }
34
-
35
- .dotLine {
36
- position: absolute;
37
- left: -5px;
38
- }
39
-
40
- // Base dot
41
- .dot {
42
- background-color: #7c90ab;
43
- border-radius: 50%;
44
- display: inline-block;
45
-
46
- &.default {
47
- width: 8px;
48
- height: 8px;
49
- margin-bottom: 6px;
50
- }
51
-
52
- &.small {
53
- width: 6px;
54
- height: 6px;
55
- margin: 6px 0 0 2px;
56
- }
57
- }
58
-
59
- .itemDetails {
60
- margin: 15px 0;
61
- p {
62
- color: $Gray-600;
63
- font-size: 12px;
64
- font-weight: 500;
65
- line-height: 18px;
66
- }
67
- }
68
-
69
- .category {
70
- color: $Gray-900;
71
- font-size: 12px;
72
- font-weight: 700;
73
- line-height: 18px;
74
- }
75
-
76
- .type {
77
- font-size: 12px;
78
- color: #555;
79
- margin-bottom: 2px;
80
- }
81
-
82
- .value {
83
- font-size: 14px;
84
- color: #333;
85
- max-width: 400px;
86
- word-break: break-word;
87
- }
88
- .itemValue {
89
- display: flex;
90
- color: var(--_gray-900);
91
- font-size: 14px;
92
- font-weight: 500;
93
- line-height: 20px;
94
- & > span {
95
- font-weight: 500;
96
- color: var(--_gray-900);
97
- }
98
- .link {
99
- color: $link-color;
100
- font-size: 14px;
101
- font-weight: 400;
102
- line-height: 20px;
103
- white-space: nowrap;
104
- display: inline-block;
105
- margin-left: 8px;
106
-
107
- &:hover {
108
- text-decoration: underline;
109
- }
110
- }
111
- }
112
- }
113
-
114
- // customization tree
115
-
116
- .modal-overlay-main-element {
117
- .modal-overlay-backdrop {
118
- position: fixed;
119
- top: 0;
120
- left: 0;
121
- width: 100%;
122
- height: 100%;
123
- background-color: rgba(0, 0, 0, 0.2);
124
- z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
125
- animation: fadeIn 0.4s forwards;
126
- cursor: auto;
127
- }
128
- .modal-overlay-container {
129
- position: fixed;
130
- top: 50%;
131
- left: 50%;
132
- transform: translate(-50%, -50%);
133
- background-color: var(--_base-white);
134
- width: var(--_sf-ml-wh, 450px);
135
- max-width: 250px;
136
- height: 300px;
137
- padding: 12px;
138
- border-radius: 6px;
139
- display: flex;
140
- flex-direction: column;
141
- gap: 12px;
142
- z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
143
- cursor: auto;
144
- .custom_image_overlay {
145
- .custom_image_container {
146
- height: 230px;
147
- width: 100%;
148
- background-color: var(--_gray-200);
149
- }
150
- .custom_image_footer {
151
- width: 100%;
152
- background-color: var(-_base-white);
153
- display: flex;
154
- justify-content: space-between;
155
- align-items: center;
156
- padding: 16px;
157
- }
158
- }
159
- }
160
- }
1
+ $Gray-900: #101828;
2
+ $border-color: #a5a5a5;
3
+ $Gray-600: #475467;
4
+ $link-color: #243dc6;
5
+
6
+ .customTreeWrapper {
7
+ // padding: 20px 20px 20px 145px;
8
+ padding: 0 20px;
9
+
10
+ h3 {
11
+ color: $Gray-900;
12
+ font-size: 18px;
13
+ font-weight: 700;
14
+ line-height: 28px;
15
+ margin-bottom: 12px;
16
+ }
17
+ .treeNode {
18
+ position: relative;
19
+ &::after {
20
+ content: "";
21
+ position: absolute;
22
+ bottom: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ border-bottom: 1px dotted var(--_gray-300);
26
+ }
27
+ }
28
+ .treeNode,
29
+ .treeItem {
30
+ position: relative;
31
+ padding-left: 16px;
32
+ border-left: 1px dotted var(--_gray-300);
33
+ margin: 24px 0;
34
+ }
35
+
36
+ .dotLine {
37
+ position: absolute;
38
+ left: -5px;
39
+ }
40
+
41
+ // Base dot
42
+ .dot {
43
+ background-color: #7c90ab;
44
+ border-radius: 50%;
45
+ display: inline-block;
46
+
47
+ &.default {
48
+ width: 8px;
49
+ height: 8px;
50
+ margin-bottom: 6px;
51
+ }
52
+
53
+ &.small {
54
+ width: 6px;
55
+ height: 6px;
56
+ margin: 6px 0 0 2px;
57
+ }
58
+ }
59
+
60
+ .itemDetails {
61
+ margin: 15px 0;
62
+ p {
63
+ color: $Gray-600;
64
+ font-size: 12px;
65
+ font-weight: 500;
66
+ line-height: 18px;
67
+ }
68
+ }
69
+
70
+ .category {
71
+ color: $Gray-900;
72
+ font-size: 12px;
73
+ font-weight: 700;
74
+ line-height: 18px;
75
+ }
76
+
77
+ .type {
78
+ font-size: 12px;
79
+ color: #555;
80
+ margin-bottom: 2px;
81
+ }
82
+
83
+ .value {
84
+ font-size: 14px;
85
+ color: #333;
86
+ max-width: 400px;
87
+ word-break: break-word;
88
+ }
89
+ .itemValue {
90
+ // display: flex;
91
+ color: var(--_gray-900);
92
+ font-size: 14px;
93
+ font-weight: 500;
94
+ line-height: 20px;
95
+ & > span {
96
+ font-weight: 500;
97
+ color: var(--_gray-900);
98
+ }
99
+ .link {
100
+ color: $link-color;
101
+ font-size: 14px;
102
+ font-weight: 400;
103
+ line-height: 20px;
104
+ white-space: nowrap;
105
+ display: inline-block;
106
+ margin-left: 8px;
107
+
108
+ &:hover {
109
+ text-decoration: underline;
110
+ }
111
+ }
112
+ }
113
+ }
114
+
115
+ // customization tree
116
+
117
+ .modal-overlay-main-element {
118
+ .modal-overlay-backdrop {
119
+ position: fixed;
120
+ top: 0;
121
+ left: 0;
122
+ width: 100%;
123
+ height: 100%;
124
+ background-color: rgba(0, 0, 0, 0.2);
125
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
126
+ animation: fadeIn 0.4s forwards;
127
+ cursor: auto;
128
+ }
129
+ .modal-overlay-container {
130
+ position: fixed;
131
+ top: 50%;
132
+ left: 50%;
133
+ transform: translate(-50%, -50%);
134
+ background-color: var(--_base-white);
135
+ width: var(--_sf-ml-wh, 450px);
136
+ max-width: 250px;
137
+ height: 300px;
138
+ padding: 12px;
139
+ border-radius: 6px;
140
+ display: flex;
141
+ flex-direction: column;
142
+ gap: 12px;
143
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
144
+ cursor: auto;
145
+ .custom_image_overlay {
146
+ .custom_image_container {
147
+ height: 230px;
148
+ width: 100%;
149
+ background-color: var(--_gray-200);
150
+ }
151
+ .custom_image_footer {
152
+ width: 100%;
153
+ background-color: var(-_base-white);
154
+ display: flex;
155
+ justify-content: space-between;
156
+ align-items: center;
157
+ padding: 16px;
158
+ }
159
+ }
160
+ }
161
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.4.62",
3
+ "version": "0.4.63",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {