@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.60

package/dist/position-module.scss

@@ -1,95 +1,98 @@
-@use "sass:map";
-@use "sass:list";
-
-@use "./functions.scss" as *;
-@use "./prefix-list.scss" as *;
-
-$elementDragging: "[data-cms-new-element-dragging-v2='true']";
-$dataResizerTrue: '[data-cms-element-resizer="true"]';
-$activeElementSelector: "[data-has-clicked='true']";
-$editor: '[data-page-id="cms__template__editor"]';
-$var: "--_sf-width-rsp-psn";
-
-@function convertListToCommaSeparateString($list) {
-  $items: ();
-  @each $key, $value in $list {
-    $sl: ".#{$value}";
-    $items: list.append($items, $sl, comma);
-  }
-
-  @return $items;
-}
-
-$position: (
-  class: (
-    absolute: "flx-abs",
-    fixed: "flx-fxd",
-    sticky: "flx-stk",
-    relative: "flx-rel",
-  ),
-  zIndex: "--_ctm-flex-z-index",
-  attributes: (
-    horizontal: "data-position-horizonal",
-    vertical: "data-position-vertical",
-  ),
-  data: (
-    horizontal: (
-      right: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
-      left: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
-    ),
-    vertical: (
-      top: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
-      bottom: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
-    ),
-  ),
-);
-
-@mixin FlexPositionModuleStyles() {
-  $cls: map.get($position, class);
-  $zIndex: map.get($position, zIndex);
-  $attributes: map.get($position, attributes);
-  $data: map.get($position, data);
-  $pa: map.get($cls, absolute);
-  $pr: map.get($cls, relative);
-
-  :is(#{convertListToCommaSeparateString($cls)}) {
-    @each $key, $value in $data {
-      @each $key1, $value1 in $value {
-        &[#{map.get($attributes, $key)}="#{$key1}"] {
-          #{$key1}: #{$value1};
-        }
-      }
-    }
-    // @if(){
-
-    // }
-    // z-index: var(#{$zIndex});
-    &:is(.#{$pr}, .#{pa}) {
-      &:is(#{$editor} *) {
-        &#{$activeElementSelector} {
-          z-index: var(#{$zIndex});
-        }
-      }
-      &:not(#{$editor} *) {
-        z-index: var(#{$zIndex});
-      }
-    }
-    &:not(.#{$pr}, .#{pa}) {
-      z-index: var(#{$zIndex});
-    }
-    @each $key, $value in $cls {
-      &.#{$value} {
-        &:is(:not(#{$elementDragging}, #{$dataResizerTrue})) {
-          position: var(--_p-#{$key}) !important;
-          @if ($key == fixed) {
-            @include FlexUpdatedPrefixCSSVariable($var);
-            width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
-          }
-          @if not list.index((sticky, relative), $key) {
-            margin: 0px !important;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+@use "./functions.scss" as *;
+@use "./prefix-list.scss" as *;
+
+$elementDragging: "[data-cms-new-element-dragging-v2='true']";
+$dataResizerTrue: '[data-cms-element-resizer="true"]';
+$activeElementSelector: "[data-has-clicked='true']";
+$editor: '[data-page-id="cms__template__editor"]';
+$var: "--_sf-width-rsp-psn";
+
+@function convertListToCommaSeparateString($list) {
+  $items: (
+  );
+
+@each $key, $value in $list {
+  $sl: ".#{$value}";
+  $items: list.append($items, $sl, comma);
+}
+
+@return $items;
+}
+
+$position: (
+  class: (absolute: "flx-abs",
+    fixed: "flx-fxd",
+    sticky: "flx-stk",
+    relative: "flx-rel",
+  ),
+  zIndex: "--_ctm-flex-z-index",
+  attributes: (horizontal: "data-position-horizonal",
+    vertical: "data-position-vertical",
+  ),
+  data: (horizontal: (right: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
+      left: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
+    ),
+    vertical: (top: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
+      bottom: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
+    ),
+  ),
+);
+
+@mixin FlexPositionModuleStyles() {
+  $cls: map.get($position, class);
+  $zIndex: map.get($position, zIndex);
+  $attributes: map.get($position, attributes);
+  $data: map.get($position, data);
+  $pa: map.get($cls, absolute);
+  $pr: map.get($cls, relative);
+
+  :is(#{convertListToCommaSeparateString($cls)}) {
+    @each $key, $value in $data {
+      @each $key1, $value1 in $value {
+        &[#{map.get($attributes, $key)}="#{$key1}"] {
+          #{$key1}: #{$value1};
+        }
+      }
+    }
+
+    // @if(){
+
+    // }
+    // z-index: var(#{$zIndex});
+    &:is(.#{$pr}, .#{pa}) {
+      &:is(#{$editor} *) {
+        &#{$activeElementSelector} {
+          z-index: var(#{$zIndex});
+        }
+      }
+
+      &:not(#{$editor} *) {
+        z-index: var(#{$zIndex});
+      }
+    }
+
+    &:not(.#{$pr}, .#{pa}) {
+      z-index: var(#{$zIndex});
+    }
+
+    @each $key, $value in $cls {
+      &.#{$value} {
+        &:is(:not(#{$elementDragging}, #{$dataResizerTrue})) {
+          position: var(--_p-#{$key}) !important;
+
+          @if ($key ==fixed) {
+            @include FlexUpdatedPrefixCSSVariable($var);
+            width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
+          }
+
+          @if not list.index((sticky, relative), $key) {
+            margin: 0px !important;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/prefix-list.scss

@@ -1,86 +1,97 @@
-@use "sass:map";
-@use "sass:list";
-
-@use "./functions.scss" as *;
-
-$dataElementType: "data-element-type";
-$elementSelector: "[data-div-type='element']";
-$dataLayerElementType: "data-layer-element-type";
-
-$prefixList: (
-  section: sec,
-  grid: gri,
-  container: con,
-  stack: sta,
-  repeater: rep,
-  repeater-item: repe,
-  product: pro,
-  category: cat,
-  categoryWidget: cate,
-  brand: bran,
-  subCategory: subc,
-  productDetails: prod,
-  categoryDetails: categ,
-  lightboxv2: lig,
-  layouter: lay,
-  layouter-item: layo,
-  layouter-pro: layou,
-  layouter-pro-item: layout,
-  tbs-v2: tbs,
-  tbsContainer: tbsco,
-  marchandiserSets: march,
-  buyForWithTabs: buy,
-  buyForTabsContainer: buyFo,
-  spotlight: spo,
-  categoryGroups: catego,
-  mega-menu: meg,
-  mgContainer: mgcon,
-  cartWrapper: cartw,
-);
-
-$VariableTypes: (
-  width: "lt-wh",
-  maxHeight: "lt-mx-ht",
-  transform: "trsnf-vl",
-);
-
-@function convertListToCommaSeparateString($list) {
-  $items: ();
-  @each $key, $value in $list {
-    $sl: "[#{$dataElementType}=#{$key}]";
-    $items: list.append($items, $sl, comma);
-  }
-
-  @return $items;
-}
-
-@function convertIntoActualVariable($prefix, $type) {
-  // $types: (
-  //   width: "lt-wh",
-  //   maxHeight: "lt-mx-ht",
-  //   transform: "trsnf-vl",
-  // );
-  $suffix: map.get($VariableTypes, $type);
-  @return --_ctm-#{$prefix}-#{$suffix};
-}
-
-@mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false, $type: width, $defaultValue: inherit) {
-  $selector: "";
-  @if ($isLayer == false) {
-    $selector: $dataElementType;
-  } @else {
-    $selector: $dataLayerElementType;
-  }
-  @each $key, $value in $prefixList {
-    &[#{$selector}="#{$key}"] {
-      #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, $type), $defaultValue)};
-    }
-  }
-  @if ($type != maxHeight) {
-    &#{$elementSelector} {
-      &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
-        #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type)}, $defaultValue)};
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+@use "./functions.scss" as *;
+
+$dataElementType: "data-element-type";
+$elementSelector: "[data-div-type='element']";
+$dataLayerElementType: "data-layer-element-type";
+
+$prefixList: (
+  section: sec,
+  grid: gri,
+  container: con,
+  stack: sta,
+  repeater: rep,
+  repeater-item: repe,
+  product: pro,
+  category: cat,
+  categoryWidget: cate,
+  brand: bran,
+  subCategory: subc,
+  productDetails: prod,
+  categoryDetails: categ,
+  lightboxv2: lig,
+  layouter: lay,
+  layouter-item: layo,
+  layouter-pro: layou,
+  layouter-pro-item: layout,
+  tbs-v2: tbs,
+  tbsContainer: tbsco,
+  marchandiserSets: march,
+  buyForWithTabs: buy,
+  buyForTabsContainer: buyFo,
+  spotlight: spo,
+  categoryGroups: catego,
+  mega-menu: meg,
+  mgContainer: mgcon,
+  cartWrapper: cartw,
+);
+
+$VariableTypes: (
+  width: "lt-wh",
+  maxHeight: "lt-mx-ht",
+  transform: "trsnf-vl",
+);
+
+@function convertListToCommaSeparateString($list) {
+  $items: (
+  );
+
+@each $key, $value in $list {
+  $sl: "[#{$dataElementType}=#{$key}]";
+  $items: list.append($items, $sl, comma);
+}
+
+@return $items;
+}
+
+@function convertIntoActualVariable($prefix, $type) {
+  // $types: (
+  //   width: "lt-wh",
+  //   maxHeight: "lt-mx-ht",
+  //   transform: "trsnf-vl",
+  // );
+  $suffix: map.get($VariableTypes, $type);
+  @return --_ctm-#{$prefix}-#{$suffix};
+}
+
+@mixin FlexUpdatedPrefixCSSVariable($var, $isLayer: false, $type: width, $defaultValue: inherit) {
+  $selector: "";
+
+  @if ($isLayer ==false) {
+    $selector: $dataElementType;
+  }
+
+  @else {
+    $selector: $dataLayerElementType;
+  }
+
+  @each $key, $value in $prefixList {
+    &[#{$selector}="#{$key}"] {
+      #{$var}: #{prepareMediaVariable(convertIntoActualVariable($value, $type), $defaultValue)};
+    }
+  }
+
+  @if ($type !=maxHeight) {
+    &#{$elementSelector} {
+      &:is(:not(#{convertListToCommaSeparateString($prefixList)})) {
+        #{$var}: #{prepareMediaVariable(--_ctm-#{map.get($VariableTypes, $type)},
+        $defaultValue)
+      }
+
+      ;
+    }
+  }
+}
+}