scu-web-components 0.0.94 → 0.0.95

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-container-scw-icon-mixins.scss

@@ -0,0 +1,57 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin sizing {
+  width: 50px;
+  height: 50px;
+}
+
+@mixin width {
+  width: 50px;
+}
+
+@mixin height {
+  height: 50px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin figma-autolayout { 
+   
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 3.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.6 );
+  margin-top: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 3.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.6 );
+  padding-top: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+}

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-container-scw-icon-vars.scss

@@ -0,0 +1,25 @@
+
+
+$background-color: rgba(0,0,0,0);
+$width: 50px;
+$height: 50px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: 0px;
+$top-percent: 25.77%;
+$bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+$left: calc( var( --scw-spacing-1 ) * 3.6 );
+$left-percent: 50%;
+$right: calc( var( --scw-spacing-1 ) * 3.6 );
+$padding-left: 0px;
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-container-vars.scss

@@ -10,15 +10,15 @@ $corner-radius-top-right: 8px;
 $corner-radius-bottom-right: 8px;
 $corner-radius-bottom-left: 8px;
 $width: 122px;
-$height: 47px;
+$height: 97px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
 $layout-context: FLEX;
-$layout-mode: HORIZONTAL;
+$layout-mode: VERTICAL;
 $primary-axis-align-items: CENTER;
 $counter-axis-align-items: CENTER;
-$item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
+$item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 0;
 $top: var( --scw-spacing-2 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-mixins.scss

@@ -21,7 +21,7 @@
 
 @mixin sizing {
   width: 142px;
-  height: 87px;
+  height: 137px;
 }
 
 @mixin width {
@@ -29,7 +29,7 @@
 }
 
 @mixin height {
-  height: 87px;
+  height: 137px;
 }
 
 @mixin padding {
@@ -56,24 +56,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 22.2 );
+  left: calc( var( --scw-spacing-1 ) * 52.9 );
   width: 142px;
-  top: calc( var( --scw-spacing-1 ) * 2.9 );
-  height: 87px; 
+  top: calc( var( --scw-spacing-1 ) * 0.6 );
+  height: 137px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 22.2 );
-  margin-right: calc( var( --scw-spacing-1 ) * 37.7 );
-  margin-top: calc( var( --scw-spacing-1 ) * 2.9 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 31 );
+  margin-left: calc( var( --scw-spacing-1 ) * 52.9 );
+  margin-right: calc( var( --scw-spacing-1 ) * 17.9 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 51.4 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 22.2 );
-  padding-right: calc( var( --scw-spacing-1 ) * 37.7 );
-  padding-top: calc( var( --scw-spacing-1 ) * 2.9 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 31 );
+  padding-left: calc( var( --scw-spacing-1 ) * 52.9 );
+  padding-right: calc( var( --scw-spacing-1 ) * 17.9 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 51.4 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-label-mixins.scss

@@ -55,7 +55,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: 0px;
+  margin-top: var( --scw-spacing-5 );
   margin-bottom: 0px;
 }
 
@@ -63,6 +63,6 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: 0px;
+  padding-top: var( --scw-spacing-5 );
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-label-vars.scss

@@ -13,8 +13,8 @@ $counter-axis-align-items: CENTER;
 $item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
 $layout-align: INHERIT;
 $layout-grow: 0;
-$top: 0px;
-$top-percent: 50%;
+$top: var( --scw-spacing-5 );
+$top-percent: 78.09%;
 $bottom: 0px;
 $left: 0px;
 $left-percent: 50%;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-mixins.scss

@@ -22,7 +22,7 @@
 
 @mixin sizing {
   width: 100px;
-  height: 39px;
+  height: 89px;
 }
 
 @mixin width {
@@ -30,7 +30,7 @@
 }
 
 @mixin height {
-  height: 39px;
+  height: 89px;
 }
 
 @mixin padding {
@@ -42,7 +42,7 @@
 
 @mixin figma-autolayout { 
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   padding-left: 0px;
@@ -50,8 +50,8 @@
   padding-top: 0px;
   padding-bottom: 0px;
   & > *:not(:last-child) { 
-        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
-        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+        margin-bottom: 0px; 
+        --margin-bottom: 0px; 
       } 
 }
 

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-scw-icon-icon-mixins.scss

@@ -0,0 +1,61 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin sizing {
+  width: 50px;
+  height: 50px;
+}
+
+@mixin width {
+  width: 50px;
+}
+
+@mixin height {
+  height: 50px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin figma-autolayout { 
+   
+}
+
+@mixin absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px; 
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-scw-icon-icon-vars.scss

@@ -0,0 +1,25 @@
+
+
+$background-color: rgba(0,0,0,0);
+$width: 50px;
+$height: 50px;
+$constraint-horizontal: STRETCH;
+$constraint-vertical: STRETCH;
+$constrain-proportions: false;
+$layout-context: ABSOLUTE;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: MIN;
+$layout-grow: 0;
+$top: 0px;
+$top-percent: 50%;
+$bottom: 0px;
+$left: 0px;
+$left-percent: 50%;
+$right: 0px;
+$padding-left: 0px;
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-scw-icon-icon-vector-mixins.scss

@@ -0,0 +1,61 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
+  } @else {
+    background-color: var( --scw-color-grey-092 );
+  } 
+}
+
+@mixin sizing {
+  width: 44.6429px;
+  height: 39.5416px;
+}
+
+@mixin width {
+  width: 44.6429px;
+}
+
+@mixin height {
+  height: 39.5416px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin figma-autolayout { 
+   
+}
+
+@mixin absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.26787109375 );
+  right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );
+  top: calc( var( --scw-spacing-1 ) * 0.5228515625 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 ); 
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );
+}

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-scw-icon-icon-vector-vars.scss

@@ -0,0 +1,26 @@
+
+
+$background-color: var( --scw-color-grey-092 );
+$blend-mode: NORMAL;
+$width: 44.6429px;
+$height: 39.5416px;
+$constraint-horizontal: STRETCH;
+$constraint-vertical: STRETCH;
+$constrain-proportions: false;
+$layout-context: ABSOLUTE;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: MIN;
+$layout-grow: 0;
+$top: calc( var( --scw-spacing-1 ) * 0.5228515625 );
+$top-percent: 50%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );
+$left: calc( var( --scw-spacing-1 ) * 0.26787109375 );
+$left-percent: 50%;
+$right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );
+$padding-left: 0px;
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-scw-icon-mixins.scss

@@ -0,0 +1,57 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin sizing {
+  width: 50px;
+  height: 50px;
+}
+
+@mixin width {
+  width: 50px;
+}
+
+@mixin height {
+  height: 50px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin figma-autolayout { 
+   
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 2.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.5 );
+  margin-top: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 3.9 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 2.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.5 );
+  padding-top: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 3.9 );
+}

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-scw-icon-vars.scss

@@ -0,0 +1,25 @@
+
+
+$background-color: rgba(0,0,0,0);
+$width: 50px;
+$height: 50px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: 0px;
+$top-percent: 28.09%;
+$bottom: calc( var( --scw-spacing-1 ) * 3.9 );
+$left: calc( var( --scw-spacing-1 ) * 2.5 );
+$left-percent: 50%;
+$right: calc( var( --scw-spacing-1 ) * 2.5 );
+$padding-left: 0px;
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-container-vars.scss

@@ -10,15 +10,15 @@ $corner-radius-top-right: 8px;
 $corner-radius-bottom-right: 8px;
 $corner-radius-bottom-left: 8px;
 $width: 100px;
-$height: 39px;
+$height: 89px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
 $layout-context: FLEX;
-$layout-mode: HORIZONTAL;
+$layout-mode: VERTICAL;
 $primary-axis-align-items: CENTER;
 $counter-axis-align-items: CENTER;
-$item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
+$item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 0;
 $top: var( --scw-spacing-2 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-mixins.scss

@@ -21,7 +21,7 @@
 
 @mixin sizing {
   width: 110px;
-  height: 79px;
+  height: 129px;
 }
 
 @mixin width {
@@ -29,7 +29,7 @@
 }
 
 @mixin height {
-  height: 79px;
+  height: 129px;
 }
 
 @mixin padding {
@@ -56,24 +56,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 60.2 );
+  left: calc( var( --scw-spacing-1 ) * 69.5 );
   width: 110px;
-  top: calc( var( --scw-spacing-1 ) * 3.3 );
-  height: 79px; 
+  top: calc( var( --scw-spacing-1 ) * 1.4 );
+  height: 129px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 60.2 );
-  margin-right: calc( var( --scw-spacing-1 ) * 2.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 3.3 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 31.4 );
+  margin-left: calc( var( --scw-spacing-1 ) * 69.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 51.4 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 60.2 );
-  padding-right: calc( var( --scw-spacing-1 ) * 2.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 3.3 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 31.4 );
+  padding-left: calc( var( --scw-spacing-1 ) * 69.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 51.4 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-size-small-vars.scss

@@ -5,7 +5,7 @@ $stroke-color: var( --scw-color-grey-02 );
 $stroke-weight: 0px;
 $stroke-align: INSIDE;
 $width: 110px;
-$height: 79px;
+$height: 129px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -16,12 +16,12 @@ $counter-axis-align-items: CENTER;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 3.3 );
-$top-percent: 17.02%;
-$bottom: calc( var( --scw-spacing-1 ) * 31.4 );
-$left: calc( var( --scw-spacing-1 ) * 60.2 );
-$left-percent: 88.66%;
-$right: calc( var( --scw-spacing-1 ) * 2.9 );
+$top: calc( var( --scw-spacing-1 ) * 1.4 );
+$top-percent: 11.95%;
+$bottom: calc( var( --scw-spacing-1 ) * 51.4 );
+$left: calc( var( --scw-spacing-1 ) * 69.5 );
+$left-percent: 88.24%;
+$right: calc( var( --scw-spacing-1 ) * 4.5 );
 $padding-left: calc( var( --scw-spacing-1 ) * 0.5 );
 $padding-right: calc( var( --scw-spacing-1 ) * 0.5 );
 $padding-top: var( --scw-spacing-2 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-button-vars.scss

@@ -5,7 +5,7 @@ $stroke-color: var( --scw-color-grey-02 );
 $stroke-weight: 0px;
 $stroke-align: INSIDE;
 $width: 142px;
-$height: 87px;
+$height: 137px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -16,12 +16,12 @@ $counter-axis-align-items: CENTER;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 2.9 );
-$top-percent: 17.02%;
-$bottom: calc( var( --scw-spacing-1 ) * 31 );
-$left: calc( var( --scw-spacing-1 ) * 22.2 );
-$left-percent: 39.54%;
-$right: calc( var( --scw-spacing-1 ) * 37.7 );
+$top: calc( var( --scw-spacing-1 ) * 0.6 );
+$top-percent: 11.34%;
+$bottom: calc( var( --scw-spacing-1 ) * 51.4 );
+$left: calc( var( --scw-spacing-1 ) * 52.9 );
+$left-percent: 70.59%;
+$right: calc( var( --scw-spacing-1 ) * 17.9 );
 $padding-left: var( --scw-spacing-1 );
 $padding-right: var( --scw-spacing-1 );
 $padding-top: var( --scw-spacing-2 );