@sc-360-v2/storefront-cms-library 0.4.39 → 0.4.42

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.
@@ -39,7 +39,11 @@
39
39
  }
40
40
  }
41
41
  .btn__with__text {
42
- background: transparent;
42
+ // background: transparent;
43
+ background: var(
44
+ --_ctm-mob-dn-dt-se-bd-cr,
45
+ var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr))
46
+ );
43
47
  border: none;
44
48
  width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
45
49
  height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
@@ -144,11 +148,11 @@
144
148
  }
145
149
 
146
150
  &:hover {
147
- // background-color: var(
148
- // --_ctm-mob-dn-hr-se-bd-cr,
149
- // var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
150
- // );
151
- @include BgColorLighter(var(--_thm-sy-bs-dt-se-bd-cr), 10%);
151
+ background-color: var(
152
+ --_ctm-mob-dn-hr-se-bd-cr,
153
+ var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
154
+ );
155
+ // @include BgColorLighter(var(--_thm-sy-bs-dt-se-bd-cr), 10%);
152
156
  font-size: var(
153
157
  --_ctm-mob-dn-hr-se-ft-se,
154
158
  var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
@@ -465,7 +465,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
465
465
  .svg_icon {
466
466
  svg {
467
467
  path {
468
- stroke: var(--_thm-cs-be-se-3);
468
+ stroke: var(--_thm-cs-tt-ss);
469
469
  }
470
470
  }
471
471
  }
@@ -799,7 +799,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
799
799
 
800
800
  &.selected {
801
801
  border: 0.5px solid var(--_primary-400);
802
- background-color: var(--_gray-200);
802
+ background-color: var(--_thm-cs-be-se-3);
803
803
  font-weight: 600;
804
804
  font-size: 16px;
805
805
  color: var(--_primary-400);
@@ -866,6 +866,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
866
866
  align-items: flex-start;
867
867
  gap: 6px;
868
868
  width: 113px;
869
+ margin-block: 12px;
869
870
 
870
871
  .product_qty_container {
871
872
  display: flex;
@@ -882,10 +883,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
882
883
  align-items: center;
883
884
  border-radius: 8px 0px 0px 8px;
884
885
  p {
885
- color: #475467;
886
- font-size: 16px;
887
- font-weight: 400;
888
- line-height: 24px;
886
+ color: var(--_thm-ty-p1-tt-cr);
887
+ font-size: var(--_thm-ty-p1-ft-se);
888
+ font-weight: var(--_thm-ty-p1-bd);
889
+ // line-height: 24px;
890
+ line-height: var(--_thm-ty-p1-le-ht);
889
891
  }
890
892
  }
891
893
  .product_qty_input_container {
@@ -894,7 +896,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
894
896
  // position: relative;
895
897
  width: 55px;
896
898
  border-radius: 0px 4px 4px 0px;
897
- background: #fff;
899
+ background: transparent;
898
900
  border-left: 1px solid var(--_thm-cs-be-se-3);
899
901
  padding: 8px 12px;
900
902
  }
@@ -902,6 +904,10 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
902
904
  // display: flex;
903
905
  // padding: 8px 12px;
904
906
  align-items: center;
907
+ color: var(--_thm-ty-p2-tt-cr);
908
+ font-size: var(--_thm-ty-p1-ft-se);
909
+ font-weight: var(--_thm-ty-p1-bd);
910
+ line-height: var(--_thm-ty-p1-le-ht);
905
911
  // gap: 8px;
906
912
  // flex: 1 0 0;
907
913
  // align-self: stretch;
@@ -1527,7 +1533,9 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1527
1533
 
1528
1534
  border-radius: var(--toggle-height); /* Full pill shape */
1529
1535
  box-sizing: border-box;
1530
- padding: 2px;
1536
+ padding: prepareMediaVariable(
1537
+ --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg
1538
+ );
1531
1539
  }
1532
1540
  &[data-swatch-shape-selected="circle"] {
1533
1541
  & div,
@@ -1590,9 +1598,9 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1590
1598
  position: relative;
1591
1599
 
1592
1600
  &.disabled {
1593
- color: #aaa;
1594
- background-color: #f9f9f9;
1595
- border-color: #ddd;
1601
+ color: var(--_gray-500);
1602
+ background-color: var(--_gray-100);
1603
+ border-color: var(--_gray-300);
1596
1604
  cursor: not-allowed;
1597
1605
  opacity: 0.3;
1598
1606
  overflow: hidden;
@@ -1601,7 +1609,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1601
1609
  .cross-line {
1602
1610
  position: absolute;
1603
1611
  inset: 0;
1604
- background-color: #cccccc;
1612
+ background-color: var(--_gray-100);
1605
1613
  clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1606
1614
  pointer-events: none;
1607
1615
  }
@@ -1996,7 +2004,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1996
2004
  &.child {
1997
2005
  border: 0;
1998
2006
  border-radius: 0;
1999
- border-bottom: 2px solid var(--_gray-200);
2007
+ border-bottom: 2px solid var(--_thm-cs-be-se-3);
2000
2008
  }
2001
2009
  &[data-selected="true"] {
2002
2010
  --_sf-sd-bd-cr: var(
@@ -2242,9 +2250,9 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
2242
2250
  position: relative;
2243
2251
 
2244
2252
  &.disabled {
2245
- color: #aaa;
2246
- background-color: #f9f9f9;
2247
- border-color: #ddd;
2253
+ color: var(--_gray-500);
2254
+ background-color: var(--_gray-100);
2255
+ border-color: var(--_gray-300);
2248
2256
  cursor: not-allowed;
2249
2257
  overflow: hidden;
2250
2258
  }
@@ -2252,7 +2260,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
2252
2260
  .cross-line {
2253
2261
  position: absolute;
2254
2262
  inset: 0;
2255
- background-color: #cccccc;
2263
+ background-color: var(--_gray-400);
2256
2264
  clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
2257
2265
  pointer-events: none;
2258
2266
  }
@@ -2908,7 +2916,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
2908
2916
  bottom: 0;
2909
2917
  height: 2px;
2910
2918
  width: 100%;
2911
- border-bottom: 1px solid var(--_gray-200);
2919
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
2912
2920
  }
2913
2921
  }
2914
2922
  span {
@@ -2979,10 +2987,10 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
2979
2987
  .table_container,
2980
2988
  .tab__content {
2981
2989
  .table__class {
2982
- border: 1px solid var(--_gray-200);
2990
+ border: 1px solid var(--_thm-cs-be-se-3);
2983
2991
  border-radius: 8px;
2984
2992
  .custom__table {
2985
- border: 1px solid var(--_gray-200);
2993
+ border: 1px solid var(--_thm-cs-be-se-3);
2986
2994
  width: 100%;
2987
2995
  table-layout: fixed;
2988
2996
  // height: 300px;
@@ -2990,18 +2998,18 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
2990
2998
  border-collapse: collapse;
2991
2999
  &[data-header-divider="true"] {
2992
3000
  thead tr th {
2993
- border-bottom: 1px solid var(--_gray-200);
3001
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
2994
3002
  }
2995
3003
  }
2996
3004
  &[data-row-divider="true"] {
2997
3005
  tbody tr td {
2998
- border-bottom: 1px solid var(--_gray-200);
3006
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
2999
3007
  }
3000
3008
  }
3001
3009
  &[data-column-divider="true"] {
3002
3010
  tbody tr td,
3003
3011
  thead tr th {
3004
- border-right: 1px solid var(--_gray-200);
3012
+ border-right: 1px solid var(--_thm-cs-be-se-3);
3005
3013
  }
3006
3014
 
3007
3015
  tbody tr td:last-child,
@@ -3054,7 +3062,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
3054
3062
 
3055
3063
  tbody {
3056
3064
  tr {
3057
- border-bottom: 1px solid var(--_gray-200);
3065
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
3058
3066
  height: var(
3059
3067
  --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-ht,
3060
3068
  var(
@@ -3084,7 +3092,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
3084
3092
  color: var(--_gray-500);
3085
3093
  }
3086
3094
  .qty__input {
3087
- border: 1px solid var(--_gray-200);
3095
+ border: 1px solid var(--_thm-cs-be-se-3);
3088
3096
  padding-inline: 10px;
3089
3097
  text-align: center;
3090
3098
  border-radius: 6px;