scu-web-components 1.0.0 → 1.1.0

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-vertical-tab-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-vertical-tab-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-vertical-tab-container-scw-icon-icon-vector-mixins.scss

@@ -0,0 +1,61 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    background-color: var( --scw-color-grey-02 );
+  } 
+}
+
+@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-vertical-tab-container-scw-icon-icon-vector-vars.scss

@@ -0,0 +1,26 @@
+
+
+$background-color: var( --scw-color-grey-02 );
+$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-vertical-tab-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.9 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.9 );
+  margin-top: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 2.7 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 3.9 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.9 );
+  padding-top: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 2.7 );
+}

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-vertical-tab-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: 32.47%;
+$bottom: calc( var( --scw-spacing-1 ) * 2.7 );
+$left: calc( var( --scw-spacing-1 ) * 3.9 );
+$left-percent: 50%;
+$right: calc( var( --scw-spacing-1 ) * 3.9 );
+$padding-left: 0px;
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: 0px;

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

@@ -0,0 +1,25 @@
+
+
+$background-color: rgba(0,0,0,0);
+$width: 128px;
+$height: 77px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: VERTICAL;
+$primary-axis-align-items: CENTER;
+$counter-axis-align-items: CENTER;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 0;
+$top: var( --scw-spacing-1 );
+$top-percent: 50%;
+$bottom: var( --scw-spacing-1 );
+$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-vertical-tab-mixins.scss

@@ -0,0 +1,79 @@
+
+
+
+@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);
+  }
+  border-width: 0px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    border-color: var( --scw-color-grey-02 );
+  } 
+}
+
+@mixin sizing {
+  width: 128px;
+  height: 97px;
+}
+
+@mixin width {
+  width: 128px;
+}
+
+@mixin height {
+  height: 97px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-bottom: 0px; 
+        --margin-bottom: 0px; 
+      } 
+}
+
+@mixin absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 34.2 );
+  width: 128px;
+  top: calc( var( --scw-spacing-1 ) * 27.2728515625 );
+  height: 97px; 
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 34.2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 21.1 );
+  margin-top: calc( var( --scw-spacing-1 ) * 27.2728515625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 41.1271484375 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 34.2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 21.1 );
+  padding-top: calc( var( --scw-spacing-1 ) * 27.2728515625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 41.1271484375 );
+}

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

@@ -0,0 +1,54 @@
+
+
+
+@mixin text (
+  $themeVar: false
+) { 
+  text-align: CENTER;
+  font: var( --scw-type-text-bold-03-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  } 
+}
+
+@mixin sizing {
+  width: 73px;
+  height: 23px;
+}
+
+@mixin width {
+  width: 73px;
+}
+
+@mixin height {
+  height: 23px;
+}
+
+@mixin padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}

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

@@ -0,0 +1,31 @@
+
+
+$characters: 'Menu Item';
+$font-size: 0.9375rem;
+$text-align-horizontal: CENTER;
+$text-align-vertical: CENTER;
+$text-transform: none;
+$color: var( --scw-color-grey-02 );
+$font-family: 'Proxima Nova';
+$font-weight: 700;
+$line-height: 1.406rem;
+$letter-spacing: 0rem;
+$font: var( --scw-type-text-bold-03-font );
+$width: 73px;
+$height: 23px;
+$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: 50%;
+$bottom: 0px;
+$left: calc( var( --scw-spacing-1 ) * 1.5 );
+$left-percent: 50%;
+$right: calc( var( --scw-spacing-1 ) * 1.5 );

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

@@ -0,0 +1,68 @@
+
+
+
+@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: 103px;
+  height: 23px;
+}
+
+@mixin width {
+  width: 103px;
+}
+
+@mixin height {
+  height: 23px;
+}
+
+@mixin padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 ); 
+        --margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 ); 
+      } 
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: var( --scw-spacing-4 );
+  margin-bottom: 0px;
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: var( --scw-spacing-4 );
+  padding-bottom: 0px;
+}

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

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

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

@@ -0,0 +1,68 @@
+
+
+
+@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: 103px;
+  height: 63px;
+}
+
+@mixin width {
+  width: 103px;
+}
+
+@mixin height {
+  height: 63px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-bottom: 0px; 
+        --margin-bottom: 0px; 
+      } 
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_style-vertical-tab-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: 40px;
+  height: 40px;
+}
+
+@mixin width {
+  width: 40px;
+}
+
+@mixin height {
+  height: 40px;
+}
+
+@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-vertical-tab-size-small-container-scw-icon-icon-vars.scss

@@ -0,0 +1,25 @@
+
+
+$background-color: rgba(0,0,0,0);
+$width: 40px;
+$height: 40px;
+$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;