@sc-360-v2/storefront-cms-library 0.2.46 → 0.2.49

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/dist/cart.scss CHANGED
@@ -16,45 +16,86 @@
16
16
  height: 100%;
17
17
  }
18
18
 
19
- .icon {
20
- position: relative;
21
- cursor: pointer;
19
+ .cart__section {
22
20
  display: flex;
23
21
  align-items: center;
24
- justify-content: center;
25
-
22
+ cursor: pointer;
23
+ gap: 8px;
24
+ .cart__div {
25
+ position: relative;
26
+ .badge {
27
+ height: 20px;
28
+ border-radius: 4px;
29
+ background-color: #ffc402;
30
+ position: absolute;
31
+ top: -3px;
32
+ display: inline-block;
33
+ width: 20px;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ right: -7px;
38
+ }
39
+ }
26
40
  svg {
27
- width: 100%;
28
- height: 100%;
29
- max-width: 20px;
30
- max-height: 20px;
31
- // width: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
32
- // height: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
33
-
34
41
  path {
35
- // stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
42
+ stroke: #fff;
36
43
  }
37
44
  }
38
- }
45
+ .cart__content {
46
+ font-size: 14px;
47
+ display: flex;
48
+ flex-direction: column;
49
+ list-style: none;
50
+ line-height: 18px;
51
+ color: #fff;
52
+ margin-left: 5px;
39
53
 
40
- .cart-count {
41
- position: absolute;
42
- top: 4px;
43
- right: 10px;
44
- background-color: #243dc6;
45
- color: white;
46
- font-size: 10px;
47
- font-weight: bold;
48
- min-width: 16px;
49
- height: 16px;
50
- border-radius: 30%;
51
- display: flex;
52
- align-items: center;
53
- justify-content: center;
54
- line-height: 1;
55
- padding: 2px;
56
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
54
+ .cart__total {
55
+ font-weight: 600;
56
+ font-size: 16px;
57
+ }
58
+ }
57
59
  }
60
+ // .icon {
61
+ // position: relative;
62
+ // cursor: pointer;
63
+ // display: flex;
64
+ // align-items: center;
65
+ // justify-content: center;
66
+
67
+ // svg {
68
+ // width: 100%;
69
+ // height: 100%;
70
+ // max-width: 20px;
71
+ // max-height: 20px;
72
+ // // width: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
73
+ // // height: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
74
+
75
+ // path {
76
+ // // stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
77
+ // }
78
+ // }
79
+ // }
80
+
81
+ // .cart-count {
82
+ // position: absolute;
83
+ // top: 4px;
84
+ // right: 10px;
85
+ // background-color: #243dc6;
86
+ // color: white;
87
+ // font-size: 10px;
88
+ // font-weight: bold;
89
+ // min-width: 16px;
90
+ // height: 16px;
91
+ // border-radius: 30%;
92
+ // display: flex;
93
+ // align-items: center;
94
+ // justify-content: center;
95
+ // line-height: 1;
96
+ // padding: 2px;
97
+ // box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
98
+ // }
58
99
 
59
100
  &[data-show-shadow="false"] {
60
101
  --_show-shadow: none;
@@ -0,0 +1,42 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
+ $resizeActive: '[data-cms-element-resizer="true"]';
6
+ [data-div-type="element"] {
7
+ &[data-element-type="categoryDetails"] {
8
+ // width: var(--_sf-con-nw-wh);
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-categ-ele-nw-wh-vl,
15
+ var(--_ctm-tab-categ-ele-nw-wh-vl, var(--_ctm-categ-ele-nw-wh-vl))
16
+ )
17
+ )
18
+ );
19
+ // width: calc(1% * var(--_ctm-prod-lt-wh, auto));
20
+ // width: ;
21
+
22
+ // width: 100%;
23
+ // height: var(--_ctm-pro-lt-ht) !important;
24
+ // width: 100%;
25
+ height: auto;
26
+ margin: var(--_ctm-categ-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
27
+ background: var(--_ctm-categ-dn-bd-cr);
28
+
29
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
30
+ // min-height: 100px !important;
31
+ // }
32
+
33
+ & > div {
34
+ &.wrapper {
35
+ width: 100%;
36
+ // grid-template-rows: auto !important;
37
+ grid-template-columns: 100% !important;
38
+ // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
39
+ }
40
+ }
41
+ }
42
+ }