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

package/framework/src/grid/_columns.scss

@@ -3,39 +3,40 @@
 $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;
@@ -45,11 +46,11 @@ $gap: 4px,
     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};
@@ -65,47 +66,42 @@ $gap: 4px,
     $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};
         }
@@ -115,12 +111,13 @@ $gap: 4px,
   }
 
 
-  @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};
@@ -134,8 +131,9 @@ $gap: 4px,
 
   }
 
-  @include tablet {
-    @each $key, $value in $columnSize {
+  @include tablet{
+
+    @each $key, $value in $columnSize{
       > .column.is-#{$key}-tablet {
         flex: none;
         --ColumnFraction: #{$value};
@@ -149,8 +147,9 @@ $gap: 4px,
 
   }
 
-  @include touch {
-    @each $key, $value in $columnSize {
+  @include touch{
+
+    @each $key, $value in $columnSize{
       > .column.is-#{$key}-touch {
         flex: none;
         --ColumnFraction: #{$value};
@@ -164,8 +163,9 @@ $gap: 4px,
 
   }
 
-  @include desktop {
-    @each $key, $value in $columnSize {
+  @include desktop{
+
+    @each $key, $value in $columnSize{
       > .column.is-#{$key}-desktop {
         flex: none;
         --ColumnFraction: #{$value};
@@ -179,9 +179,10 @@ $gap: 4px,
 
   }
 
-  @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};
       }
@@ -194,9 +195,10 @@ $gap: 4px,
 
   }
 
-  @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};
       }
@@ -211,45 +213,41 @@ $gap: 4px,
 
   @include mobile {
     --ColumnGap: 16px;
-    &:not(.is-mobile) {
+    &:not(.is-mobile){
       flex-direction: column;
-
       > .column,
-      > .column[class*="is-"] {
+      > .column[class*="is-"]{
         --ColumnFraction: 1;
       }
     }
   }
-  @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-aligned-start {
-    align-self: start;
-  }
-
-  &.is-aligned-center {
+  &.is-vcentered {
     align-self: center;
   }
 
-  &.is-aligned-end {
-    align-self: end;
-  }
-
 
   @include mobile {
     &.is-narrow-mobile {
@@ -262,6 +260,7 @@ $gap: 4px,
     &.is-narrow-tablet {
       flex: none;
     }
+
   }
 
   @include touch {
@@ -291,7 +290,7 @@ $gap: 4px,
 }
 
 .columns {
-  gap: 24px;
+  gap : 24px;
 
   &.is-scrollable {
     position: relative;
@@ -305,21 +304,18 @@ $gap: 4px,
     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;
       }
@@ -342,7 +338,7 @@ $gap: 4px,
   }
 
   @include mobile {
-    gap: 16px;
+    gap : 16px;
 
   }
 
@@ -353,6 +349,7 @@ $gap: 4px,
 
   &.is-gapless {
     gap: 0;
+    --ColumnGap: 0px; // must be px because is used in calc.
   }
 
   &.is-mobile {
@@ -392,7 +389,7 @@ $gap: 4px,
       flex-direction: row;
     }
   }
-  @include mobile {
+  @include mobile{
     &.is-fullbleed {
       width: 100vw !important;
       margin-left: 50%;
@@ -402,16 +399,15 @@ $gap: 4px,
     &.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,13 +1,16 @@
-$gap: 4px,
-8px,
-12px,
-16px,
-24px,
-32px,
-40px,
-48px,
-54px,
-62px;
+
+$gap :
+  4px,
+  8px,
+  12px,
+  16px,
+  24px,
+  32px,
+  40px,
+  48px,
+  54px,
+  62px
+;
 
 
 .rows {
@@ -18,17 +21,10 @@ $gap: 4px,
   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;
   }
@@ -46,7 +42,6 @@ $gap: 4px,
     display: block;
     flex-grow: 1;
     flex-shrink: 1;
-
     &.is-narrow {
       flex-grow: 0;
     }

package/framework/src/layout/_hero.scss

@@ -127,6 +127,30 @@ $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 {
@@ -139,4 +163,8 @@ $overlap-desktop: 30px;
       }
     }
   }
+
+  &.is-centered {
+    text-align: center;
+  }
 }

package/framework/src/theming/common_partials.scss

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

package/framework/src/utilities/_mixins.scss

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

package/package.json

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