@sc-360-v2/storefront-cms-library 0.2.96 → 0.2.98

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/button.scss CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  & > .wrapper {
25
25
  // width: 100%;
26
- // height: 100%;
26
+ height: 100%;
27
27
  }
28
28
 
29
29
  &[data-show-shadow="false"] {
@@ -446,15 +446,16 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
446
446
  // width: max-content;
447
447
 
448
448
  font-family: var(
449
- --_sf-buy-sd-ft-fy,
450
- var(
451
- --_sf-buy-hr-ft-fy,
449
+ --_sf-buy-sd-ft-fy,
452
450
  var(
453
- --_ctm-mob-buy-dn-ts-dt-se-ft-fy,
454
- var(--_ctm-tab-buy-dn-ts-dt-se-ft-fy, var(--_ctm-buy-dn-ts-dt-se-ft-fy))
451
+ --_sf-buy-hr-ft-fy,
452
+ var(
453
+ --_ctm-mob-buy-dn-ts-dt-se-ft-fy,
454
+ var(--_ctm-tab-buy-dn-ts-dt-se-ft-fy, var(--_ctm-buy-dn-ts-dt-se-ft-fy))
455
+ )
455
456
  )
456
- )
457
- );
457
+ ),
458
+ sans-serif;
458
459
  font-size: var(
459
460
  --_sf-buy-sd-ft-sz,
460
461
  var(
@@ -5,6 +5,20 @@
5
5
  $item: "flex__icon_list_item";
6
6
  $icon: "flex__ili_span_icn";
7
7
  $text: "flex__ili_span_txt";
8
+ $textContaner: "flex__ili__container";
9
+ $desc: "flex__ili__description";
10
+ $pos: (
11
+ start: (
12
+ top: 0px,
13
+ ),
14
+ center: (
15
+ top: 50%,
16
+ transform: translateY(-50%),
17
+ ),
18
+ end: (
19
+ bottom: 0,
20
+ ),
21
+ );
8
22
  [data-div-type="element"] {
9
23
  &[data-element-type="icon-list"] {
10
24
  & > .wrapper {
@@ -67,9 +81,9 @@ $text: "flex__ili_span_txt";
67
81
  --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
68
82
  --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
69
83
  --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
70
- --_txt-ht-tl: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-tt-an)};
71
- --_txt-ht-ls: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-lr-sg)};
72
- --_txt-ht-lt: #{prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht)};
84
+ --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
85
+ --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
86
+ --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht)};
73
87
  }
74
88
 
75
89
  & > span {
@@ -88,20 +102,70 @@ $text: "flex__ili_span_txt";
88
102
  }
89
103
  }
90
104
 
91
- & > .#{$text} {
92
- font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
93
- font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
94
- color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
95
- font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
96
- text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
97
- font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
98
- text-align: var(--_txt-ht-tl, prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an));
99
- letter-spacing: var(--_txt-ht-ls, prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg));
100
- line-height: var(--_txt-ht-lt, prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht));
105
+ & > div {
106
+ &.#{$textContaner} {
107
+ display: var(--_d-flex);
108
+ flex-grow: 1;
109
+ flex-direction: column;
110
+ padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
111
+ row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
112
+ &[data-show-divider="true"] {
113
+ margin-inline-start: calc(
114
+ #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} + #{prepareMediaVariable(
115
+ --_ctm-dn-lt-dr-wt
116
+ )}
117
+ );
118
+ position: relative;
119
+ @each $key, $value in $pos {
120
+ &[data-divider-pos="#{$key}"] {
121
+ &::before {
122
+ @each $key1, $value1 in $value {
123
+ #{$key1}: #{$value1};
124
+ }
125
+ }
126
+ }
127
+ }
128
+ &::before {
129
+ content: "";
130
+ background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
131
+ position: absolute;
132
+ left: calc(
133
+ -1 * calc(#{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} + #{prepareMediaVariable(
134
+ --_ctm-dn-lt-dr-wt
135
+ )})
136
+ );
137
+ width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
138
+ height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
139
+ }
140
+ }
141
+ & > .#{$text} {
142
+ font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy)),
143
+ sans-serif;
144
+ font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
145
+ color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
146
+ font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
147
+ text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
148
+ font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
149
+ text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
150
+ letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
151
+ line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
152
+ }
101
153
 
102
- a {
103
- color: inherit;
104
- text-decoration: none;
154
+ & > .#{$desc} {
155
+ font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy), sans-serif;
156
+ font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
157
+ color: prepareMediaVariable(--_ctm-dn-dn-cr);
158
+ font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
159
+ text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
160
+ font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
161
+ text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
162
+ letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
163
+ line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
164
+ }
165
+ a {
166
+ color: inherit;
167
+ text-decoration: none;
168
+ }
105
169
  }
106
170
  }
107
171
  }