@trilogy-ds/styles 0.0.1-beta-sc-2 → 0.0.1-beta-151

package/framework/src/grid/_columns.scss

@@ -3,40 +3,39 @@
 $columnWidth: calc((100% / (var(--ColumnFraction))) - ((((var(--ColumnFraction)) - 1) / (var(--ColumnFraction))) * var(--ColumnGap)));
 $offsetWidth: calc((100% / (var(--offset))) - ((((var(--offset)) - 1) / (var(--offset))) * var(--ColumnGap)) + var(--ColumnGap));
 
-$columnSize : (
-  "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)
+$columnSize: (
+  "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)
 );
 
+$columnNumber: 12;
 %flex-none {
   flex: none;
 }
 
 
-$gap :
-  4px,
-  8px,
-  12px,
-  16px,
-  24px,
-  32px,
-  40px,
-  48px,
-  54px,
-  62px
-;
+$gap: 4px,
+8px,
+12px,
+16px,
+24px,
+32px,
+40px,
+48px,
+54px,
+62px;
 
 .columns {
   display: flex;
@@ -46,62 +45,62 @@ $gap :
     flex: none;
   }
 
-  .column[class*="is-"]:not(.is-narrow){
-    width:  #{$columnWidth};
+  .column[class*="is-"]:not(.is-narrow) {
+    width: #{$columnWidth};
   }
 
-  @each $key, $value in $columnSize{
+  @each $key, $value in $columnSize {
     > .column.is-#{$key} {
       flex: none;
       --ColumnFraction: #{$value};
     }
-
-    .column.is-offset-#{$key} {
-      --offset: #{$value};
-      margin-left: $offsetWidth;
-    }
   }
 
   @for $i from 1 through length($gap) {
     $item: nth($gap, $i);
     &.is-mobile.has-gap-#{$i} {
       gap: $item;
+
       .column {
         --ColumnGap: #{$item};
       }
     }
 
-    @include tablet{
+    @include tablet {
       &.has-gap-#{$i}:not(.is-desktop) {
         gap: $item;
+
         .column {
           --ColumnGap: #{$item};
         }
       }
     }
 
-    @include desktop{
+    @include desktop {
       &.has-gap-#{$i},
       &.has-gap-#{$i}-desktop {
         gap: $item;
+
         .column {
           --ColumnGap: #{$item};
         }
       }
     }
 
-    @include widescreen{
+    @include widescreen {
       &.has-gap-#{$i}-widescreen {
         gap: $item;
+
         .column {
           --ColumnGap: #{$item};
         }
       }
     }
 
-    @include fullhd{
+    @include fullhd {
       &.has-gap-#{$i}-fullhd {
         gap: $item;
+
         .column {
           --ColumnGap: #{$item};
         }
@@ -111,13 +110,12 @@ $gap :
   }
 
 
-
-  @include mobile{
-    &.is-peek{
+  @include mobile {
+    &.is-peek {
       padding-right: 15%;
     }
 
-    @each $key, $value in $columnSize{
+    @each $key, $value in $columnSize {
       & > .column.is-#{$key}-mobile {
         flex: none;
         --ColumnFraction: #{$value};
@@ -131,9 +129,8 @@ $gap :
 
   }
 
-  @include tablet{
-
-    @each $key, $value in $columnSize{
+  @include tablet {
+    @each $key, $value in $columnSize {
       > .column.is-#{$key}-tablet {
         flex: none;
         --ColumnFraction: #{$value};
@@ -145,11 +142,21 @@ $gap :
       }
     }
 
-  }
+    &.is-aligned-start {
+      align-items: start !important;
+    }
+
+    &.is-aligned-center {
+      align-items: center !important;
+    }
 
-  @include touch{
+    &.is-aligned-end {
+      align-items: end !important;
+    }
+  }
 
-    @each $key, $value in $columnSize{
+  @include touch {
+    @each $key, $value in $columnSize {
       > .column.is-#{$key}-touch {
         flex: none;
         --ColumnFraction: #{$value};
@@ -163,9 +170,8 @@ $gap :
 
   }
 
-  @include desktop{
-
-    @each $key, $value in $columnSize{
+  @include desktop {
+    @each $key, $value in $columnSize {
       > .column.is-#{$key}-desktop {
         flex: none;
         --ColumnFraction: #{$value};
@@ -179,10 +185,9 @@ $gap :
 
   }
 
-  @include widescreen{
-
-    @each $key, $value in $columnSize{
-      > .column.is-#{$key}-widescreen{
+  @include widescreen {
+    @each $key, $value in $columnSize {
+      > .column.is-#{$key}-widescreen {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -195,10 +200,9 @@ $gap :
 
   }
 
-  @include fullhd{
-
-    @each $key, $value in $columnSize{
-      > .column.is-#{$key}-fullhd{
+  @include fullhd {
+    @each $key, $value in $columnSize {
+      > .column.is-#{$key}-fullhd {
         flex: none;
         --ColumnFraction: #{$value};
       }
@@ -213,41 +217,44 @@ $gap :
 
   @include mobile {
     --ColumnGap: 16px;
-    &:not(.is-mobile){
+    &:not(.is-mobile) {
       flex-direction: column;
+
       > .column,
-      > .column[class*="is-"]{
+      > .column[class*="is-"] {
         --ColumnFraction: 1;
       }
     }
+
+    &.is-aligned-start {
+      align-items: unset !important;
+    }
+
+    &.is-aligned-center {
+      align-items: unset !important;
+    }
+
+    &.is-aligned-end {
+      align-items: unset !important;
+    }
   }
-  @include tablet-only{
-    &.is-desktop{
+  @include tablet-only {
+    &.is-desktop {
       flex-direction: column;
+
       > .column,
-      > .column[class*="is-"]{
+      > .column[class*="is-"] {
         --ColumnFraction: 1;
       }
     }
   }
-
-  &.is-mobile>.column.is-narrow{
-    flex: none;
-  }
-
 }
 
-
-
 .column {
   display: block;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  &.is-vcentered {
-    align-self: center;
-  }
-
 
   @include mobile {
     &.is-narrow-mobile {
@@ -260,7 +267,6 @@ $gap :
     &.is-narrow-tablet {
       flex: none;
     }
-
   }
 
   @include touch {
@@ -290,7 +296,7 @@ $gap :
 }
 
 .columns {
-  gap : 24px;
+  gap: 24px;
 
   &.is-scrollable {
     position: relative;
@@ -304,18 +310,21 @@ $gap :
     padding: 8px;
     scroll-padding: 8px;
 
-    >.column {
+    > .column {
       scroll-snap-align: start;
-      &:last-child{
+
+      &:last-child {
         scroll-snap-align: end;
       }
     }
-    &:not(.has-scrollbar){
+
+    &:not(.has-scrollbar) {
       &::-webkit-scrollbar {
         scrollbar-width: none;
       }
     }
-    &.has-scrollbar{
+
+    &.has-scrollbar {
       &::-webkit-scrollbar {
         height: 8px;
       }
@@ -338,7 +347,7 @@ $gap :
   }
 
   @include mobile {
-    gap : 16px;
+    gap: 16px;
 
   }
 
@@ -349,11 +358,21 @@ $gap :
 
   &.is-gapless {
     gap: 0;
-    --ColumnGap: 0px; // must be px because is used in calc.
   }
 
   &.is-mobile {
     display: flex;
+
+    @each $key, $value in $columnSize {
+      .column.is-offset-#{$key} {
+        --offset: #{$value};
+        margin-left: $offsetWidth;
+      }
+    }
+
+    .column.is-narrow {
+      flex: none;
+    }
   }
 
   &.is-multiline {
@@ -389,7 +408,7 @@ $gap :
       flex-direction: row;
     }
   }
-  @include mobile{
+  @include mobile {
     &.is-fullbleed {
       width: 100vw !important;
       margin-left: 50%;
@@ -399,15 +418,16 @@ $gap :
     &.is-fullbleed {
       scroll-padding: 24px;
     }
-    &.is-fullbleed.is-scrollable .column{
+    &.is-fullbleed.is-scrollable .column {
       scroll-snap-align: start;
       scroll-padding: 24px;
     }
-    .scroll-view{
+    .scroll-view {
       overflow: inherit;
     }
   }
 }
-:root{
-  --slider-size:min(100%, 1348px);
+
+:root {
+  --slider-size: min(100%, 1348px);
 }

package/framework/src/grid/_rows.scss

@@ -1,16 +1,13 @@
-
-$gap :
-  4px,
-  8px,
-  12px,
-  16px,
-  24px,
-  32px,
-  40px,
-  48px,
-  54px,
-  62px
-;
+$gap: 4px,
+8px,
+12px,
+16px,
+24px,
+32px,
+40px,
+48px,
+54px,
+62px;
 
 
 .rows {
@@ -21,10 +18,17 @@ $gap :
   height: 100%;
   gap: 24px;
 
-  @include mobile{
+  @include mobile {
     gap: 16px;
   }
 
+  @for $i from 1 through length($gap) {
+    $item: nth($gap, $i);
+    &.has-gap-#{$i} {
+      gap: $item;
+    }
+  }
+
   &.is-aligned-end {
     justify-content: flex-end;
   }
@@ -42,6 +46,7 @@ $gap :
     display: block;
     flex-grow: 1;
     flex-shrink: 1;
+
     &.is-narrow {
       flex-grow: 0;
     }

package/framework/src/layout/_hero.scss

@@ -127,30 +127,6 @@ $overlap-desktop: 30px;
         padding-top: 80px;
         padding-bottom: 80px;
       }
-
-      .suptitle {
-        display: none;
-
-        @include desktop {
-          display: block;
-          margin-bottom: 30px;
-          font-size: 19px;
-          text-transform: uppercase;
-        }
-      }
-
-      .title {
-        font-size: 32px;
-        margin-bottom: 25px;
-
-        @include desktop {
-          font-size: 52px;
-        }
-      }
-
-      .button {
-        width: auto;
-      }
     }
 
     &.is-overlapped {
@@ -163,8 +139,4 @@ $overlap-desktop: 30px;
       }
     }
   }
-
-  &.is-centered {
-    text-align: center;
-  }
 }

package/framework/src/theming/common_partials.scss

@@ -2,6 +2,7 @@
 
 :root {
   --radius: 8px;
+  --radius-medium: 8px;
   --radius-small: 4px;
   --radius-large: 16px;
   --border: 1px solid #{getColor('neutral')};

package/framework/src/utilities/_mixins.scss

@@ -379,6 +379,13 @@
 }
 
 @mixin checkbox-and-radio($type) {
+  //TILES WRAPPER
+  .#{$type}-tiles {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
   //BOTH
   .#{$type},
   .#{$type}-tile {
@@ -480,9 +487,6 @@
     position: relative;
     max-width: 160px;
     display: inline-block;
-    margin: 0;
-    margin-right: 16px;
-    margin-top: 16px;
     text-align: center;
 
     input:disabled,
@@ -523,7 +527,6 @@
     }
 
     input {
-
       &:not(:disabled):not(:checked) ~ label.radio-label {
         @include label-states;
       }
@@ -568,8 +571,7 @@
       justify-content: space-between;
       align-items: center;
       max-width: unset;
-      width: auto;
-      margin: 16px 0;
+      width: 100%;
       position: relative;
 
       &.is-narrow {

package/package.json

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