@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.75

package/dist/brand.scss

@@ -4,21 +4,29 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
-
 [data-div-type="element"] {
   &[data-element-type="brand"] {
     // width: var(--_sf-con-nw-wh);
-    width: var(--_sf-el-wh-st-mx,
-        calc(1% * var(--_ctm-mob-bran-ele-nw-wh-vl,
-            var(--_ctm-tab-bran-ele-nw-wh-vl, var(--_ctm-bran-ele-nw-wh-vl, var(--_sf-nw-wh))))));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-bran-ele-nw-wh-vl,
+            var(--_ctm-tab-bran-ele-nw-wh-vl, var(--_ctm-bran-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
     grid-template-columns: 100% !important;
     grid-template-rows: auto !important;
     // height: var(
     //   --_ctm-mob-bran-lt-ht,
     //   var(--_ctm-tab-bran-lt-ht, var(--_ctm-bran-lt-ht))
     // ) !important;
-    margin: var(--_ctm-mob-bran-lt-mn,
-        var(--_ctm-tab-bran-lt-mn, var(--_ctm-bran-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn))));
+    margin: var(
+      --_ctm-mob-bran-lt-mn,
+      var(--_ctm-tab-bran-lt-mn, var(--_ctm-bran-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn)))
+    );
 
     &[data-background-type="color"] {
       background-color: prepareMediaVariable(--_ctm-bran-dn-bd-cr);
@@ -27,21 +35,29 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     &[data-background-type="gradient"] {
       --_sf-bran-gradient-angle: calc(#{prepareMediaVariable(--_ctm-bran-dn-gt-ae, 90)} * 1deg);
       --_sf-bran-gradient-start-color: #{prepareMediaVariable(--_ctm-bran-dn-gt-st-cr, transparent)};
-      --_sf-bran-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-bran-dn-gt-st-pn, 0)} * 1%);
+      --_sf-bran-gradient-start-position: calc(
+        #{prepareMediaVariable(--_ctm-bran-dn-gt-st-pn, 0)} * 1%
+      );
       --_sf-bran-gradient-end-color: #{prepareMediaVariable(--_ctm-bran-dn-gt-ed-cr, transparent)};
-      --_sf-bran-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-bran-dn-gt-ed-pn, 100)} * 1%);
+      --_sf-bran-gradient-end-position: calc(
+        #{prepareMediaVariable(--_ctm-bran-dn-gt-ed-pn, 100)} * 1%
+      );
       --_sf-bran-gradient-position: #{prepareMediaVariable(--_ctm-bran-dn-gt-pn, center)};
 
       &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(var(--_sf-bran-gradient-angle),
-            var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
-            var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position));
+        background-image: linear-gradient(
+          var(--_sf-bran-gradient-angle),
+          var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
+          var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position)
+        );
       }
 
       &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(circle at var(--_sf-bran-gradient-position),
-            var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
-            var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position));
+        background-image: radial-gradient(
+          circle at var(--_sf-bran-gradient-position),
+          var(--_sf-bran-gradient-start-color) var(--_sf-bran-gradient-start-position),
+          var(--_sf-bran-gradient-end-color) var(--_sf-bran-gradient-end-position)
+        );
       }
     }
 
@@ -81,30 +97,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     padding: var(--_ctm-mob-bran-lt-pg, var(--_ctm-tab-bran-lt-pg, var(--_ctm-bran-lt-pg)));
 
     // height: 100%;
-    border-color: var(--_ctm-mob-bran-dn-br-cr,
-      var(--_ctm-tab-bran-dn-br-cr, var(--_ctm-bran-dn-br-cr)));
-    border-style: var(--_ctm-mob-bran-dn-br-se,
-      var(--_ctm-tab-bran-dn-br-se, var(--_ctm-bran-dn-br-se)));
-    border-width: var(--_ctm-mob-bran-dn-br-wh,
-      var(--_ctm-tab-bran-dn-br-wh, var(--_ctm-bran-dn-br-wh)));
-
+    border-color: var(
+      --_ctm-mob-bran-dn-br-cr,
+      var(--_ctm-tab-bran-dn-br-cr, var(--_ctm-bran-dn-br-cr))
+    );
+    border-style: var(
+      --_ctm-mob-bran-dn-br-se,
+      var(--_ctm-tab-bran-dn-br-se, var(--_ctm-bran-dn-br-se))
+    );
+    border-width: var(
+      --_ctm-mob-bran-dn-br-wh,
+      var(--_ctm-tab-bran-dn-br-wh, var(--_ctm-bran-dn-br-wh))
+    );
     // "Show Border" switch. The border above is painted from CSS variables, so the
     // switch arrives as a data attribute and zeroes the width when it is off.
     &[data-show-border="false"] {
       border-width: 0;
       border-style: none;
     }
-
-    border-radius: var(--_ctm-mob-bran-dn-br-rs,
-      var(--_ctm-tab-bran-dn-br-rs, var(--_ctm-bran-dn-br-rs)));
-    box-shadow: var(--_show-shadow,
-      var(--_ctm-mob-bran-dn-sw-ae, var(--_ctm-tab-bran-dn-sw-ae, var(--_ctm-bran-dn-sw-ae))) var(--_ctm-mob-bran-dn-sw-br, var(--_ctm-tab-bran-dn-sw-br, var(--_ctm-bran-dn-sw-br))) var(--_ctm-mob-bran-dn-sw-sd, var(--_ctm-tab-bran-dn-sw-sd, var(--_ctm-bran-dn-sw-sd))) var(--_ctm-mob-bran-dn-sw-cr, var(--_ctm-tab-bran-dn-sw-cr, var(--_ctm-bran-dn-sw-cr))));
+    border-radius: var(
+      --_ctm-mob-bran-dn-br-rs,
+      var(--_ctm-tab-bran-dn-br-rs, var(--_ctm-bran-dn-br-rs))
+    );
+    box-shadow: var(
+      --_show-shadow,
+      var(--_ctm-mob-bran-dn-sw-ae, var(--_ctm-tab-bran-dn-sw-ae, var(--_ctm-bran-dn-sw-ae)))
+        var(--_ctm-mob-bran-dn-sw-br, var(--_ctm-tab-bran-dn-sw-br, var(--_ctm-bran-dn-sw-br)))
+        var(--_ctm-mob-bran-dn-sw-sd, var(--_ctm-tab-bran-dn-sw-sd, var(--_ctm-bran-dn-sw-sd)))
+        var(--_ctm-mob-bran-dn-sw-cr, var(--_ctm-tab-bran-dn-sw-cr, var(--_ctm-bran-dn-sw-cr)))
+    );
 
     // &:not(:has(#{$resizerId}#{$resizeActive})) {
     //   min-height: 100px !important;
     // }
 
-    &>div {
+    & > div {
       &.wrapper {
         width: 100%;
         grid-template-columns: 100% !important;
@@ -112,4 +139,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}