@trilogy-ds/styles 4.8.2-beta-2 → 4.9.0-beta-build-1

package/framework/src/components/_flex-box.scss

@@ -0,0 +1,240 @@
+@use 'sass:math';
+
+.flex-box {
+  display: flex;
+  gap: 8px;
+  --ColumnGap: 8px;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  // DIRECTION
+  &.is-direction-column {
+    flex-direction: column;
+  }
+
+  &.is-direction-row {
+    flex-direction: row;
+  }
+
+  @include desktop {
+    &.is-direction-row-desktop {
+      flex-direction: row;
+    }
+
+    &.is-direction-column-desktop {
+      flex-direction: column;
+    }
+  }
+
+  @include tablet {
+    &.is-direction-row-tablet {
+      flex-direction: row;
+    }
+
+    &.is-direction-column-tablet {
+      flex-direction: column;
+    }
+  }
+
+  @include mobile {
+    &:has(>.flex-item):not([class*='is-direction']) {
+      flex-direction: column;
+    }
+
+    &.is-direction-row-mobile {
+      flex-direction: row;
+    }
+
+    &.is-direction-column-mobile {
+      flex-direction: column;
+    }
+  }
+
+  &.is-scrollable {
+    overflow: auto;
+    width: calc(100% + 48px) !important;
+    margin: -24px auto -24px 50% !important;
+    transform: translate(-50%);
+    padding: 24px;
+    scroll-padding: 24px;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+
+    @include mobile {
+      width: calc(100% + 32px) !important;
+      margin: -16px auto -16px 50% !important;
+      padding: 16px;
+      scroll-padding: 16px;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: auto !important;
+    }
+
+    .flex-item {
+      scroll-snap-align: center;
+    }
+  }
+
+
+  // GAP
+  $gap: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 54px, 62px;
+
+  @for $i from 1 through length($gap) {
+    $item: nth($gap, $i);
+    &.is-mobile.has-gap-#{$i} {
+      gap: $item;
+
+      > .flex-item {
+        --ColumnGap: #{$item};
+      }
+    }
+
+    @include tablet {
+      &.has-gap-#{$i}:not(.is-desktop) {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+
+    @include desktop {
+      &.has-gap-#{$i},
+      &.has-gap-#{$i}-desktop {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+
+    @include widescreen {
+      &.has-gap-#{$i}-widescreen {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+
+    @include fullhd {
+      &.has-gap-#{$i}-fullhd {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+  }
+
+  &.is-gapless {
+    gap: 0;
+
+    > .flex-item {
+      --ColumnGap: 1px;
+    }
+  }
+
+  $itemWidth: calc((100% / (var(--ColumnFraction))) - ((((var(--ColumnFraction)) - 1) / (var(--ColumnFraction))) * var(--ColumnGap)));
+  $itemSize: (
+    "1" : math.div(12, 1),
+    "2" : math.div(12, 2),
+    "3" : math.div(12, 3),
+    "4" : math.div(12, 4),
+    "5" : math.div(12, 5),
+    "6" : math.div(12, 6),
+    "7" : math.div(12, 7),
+    "8" : math.div(12, 8),
+    "9" : math.div(12, 9),
+    "10" : math.div(12, 10),
+    "11" : math.div(12, 11),
+    "12" : math.div(12, 12),
+    "full" : math.div(12, 12),
+    "half" : math.div(12, 6)
+  );
+
+  // SIZE
+  .flex-item {
+    width: 100%;
+
+    &.is-narrow {
+      width: auto;
+    }
+
+    &[class*="is-"]:not(.is-narrow) {
+      width: #{$itemWidth};
+    }
+
+    &:not(.is-narrow) {
+      @include mobile {
+        --ColumnFraction: 1;
+      }
+    }
+  }
+
+  @each $key, $value in $itemSize {
+    .flex-item.is-#{$key} {
+      flex: none;
+      --ColumnFraction: #{$value};
+    }
+  }
+
+  @include mobile {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-mobile {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include tablet {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-tablet {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include touch {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-touch {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include desktop {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-desktop {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include widescreen {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-widescreen {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include fullhd {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-fullhd {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+}

package/framework/src/components/_index.scss

@@ -16,6 +16,7 @@
 @import 'countdown';
 @import 'divider';
 @import 'fab';
+@import 'flex-box';
 @import 'icon';
 @import 'image';
 @import 'input';
@@ -34,7 +35,6 @@
 @import 'scroll-view';
 @import 'segmented-control';
 @import 'select';
-@import 'stack';
 @import 'stepper';
 @import 'sticker';
 @import 'switch';

package/framework/src/components/_segmented-control.scss

@@ -39,7 +39,6 @@
     }
 
     @include mobile {
-      padding: 0 $spacing-4;
       flex: 1 1 0;
       width: 0;
       text-overflow: ellipsis;

package/framework/src/components/input/_form.scss

@@ -416,14 +416,14 @@ $label-weight: $weight-bold;
     width: 45px;
 
     &::after {
-      @include spinner;
+      @include spinner();
       @include center(1em);
     }
   }
 
   &.is-loading {
     &::after {
-      @include spinner;
+      @include spinner();
 
       position: absolute !important;
       right: 0.625em;

package/framework/src/utilities/mixins/_spinner.scss

@@ -1,6 +1,6 @@
-@mixin spinner {
+@mixin spinner($color: 'neutral') {
   animation: spinAround 500ms infinite linear;
-  border: 2px solid getColor('neutral');
+  border: 2px solid getColor("#{$color}");
   border-radius: 290486px;
   border-right-color: transparent;
   border-top-color: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.8.2-beta-2",
+  "version": "4.9.0-beta-build-1",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [

package/framework/src/components/_stack.scss

@@ -1,43 +0,0 @@
-$gap: 4px,8px,12px,16px,24px,32px,40px,48px,54px,62px;
-
-.stack {
-    display: flex;
-
-    &.is-column {
-        flex-direction: column;
-    }
-
-    &.is-row {
-        flex-direction: row;
-    }
-
-
-
-    @for $i from 1 through length($gap) {
-      $item: nth($gap, $i);
-      &.has-gap-#{$i}{
-        gap: $item;
-      }
-
-      @include mobile {
-        &.has-gap-mobile-#{$i} {
-          gap: $item;
-        }
-      }
-
-      @include tablet {
-        &.has-gap-tablet-#{$i} {
-          gap: $item;
-        }
-      }
-
-      @include desktop {
-        &.has-gap-desktop-#{$i} {
-          gap: $item;
-        }
-      }
-    }
-
-    
-
-}