@trilogy-ds/styles 0.0.1-beta-130 → 0.0.1-beta-131

package/framework/src/elements/_paragraph.scss

@@ -14,66 +14,54 @@ $text-levels-mobile: (
 
 .text {
   @each $text-level in $text-levels {
-            $i: index($text-levels, $text-level);
-            $font-size: nth($text-level, 1);
-            $line-height: nth($text-level, 2);
-            $margin-bottom: nth($text-level, 3);
+    $i: index($text-levels, $text-level);
+    $font-size: nth($text-level, 1);
+    $line-height: nth($text-level, 2);
 
-            &.is-level-#{$i} {
-                font-size: $font-size;
-                line-height: $line-height;
-                font-family: $family-primary;
-                margin-bottom: $margin-bottom;
-            }
-        }
-
-        &.is-inverted {
-          color: getColor('background');
-        }
-
-        @include mobile {
-            @each $text-level-mobile in $text-levels-mobile {
-                $i: index($text-levels-mobile, $text-level-mobile);
-                $margin-bottom: nth($text-level-mobile, 3);
-
-                &.is-level-#{$i} {
-                    margin-bottom: $margin-bottom;
-                }
-            }
-        }
+    &.is-level-#{$i} {
+      font-size: $font-size;
+      line-height: $line-height;
+      font-family: $family-primary;
+    }
+  }
 
-        &.is-wrapped {
-            word-break: break-word;
-        }
+  &.is-inverted {
+    color: getColor('background');
+  }
 
-        &.bold {
-            font-weight: $weight-bold;
-        }
+  @include mobile {
+    @each $text-level-mobile in $text-levels-mobile {
+      $i: index($text-levels-mobile, $text-level-mobile);
     }
+  }
 
+  &.is-wrapped {
+    word-break: break-word;
+  }
 
-.paragraph:not(:last-child) {
-    margin-bottom: 10px;
+  &.bold {
+    font-weight: $weight-bold;
+  }
 }
 
 .span {
-    font-style: inherit;
-    font-weight: inherit;
+  font-style: inherit;
+  font-weight: inherit;
 }
 
 .strong {
-    color: inherit;
-    font-weight: $weight-bold;
+  color: inherit;
+  font-weight: $weight-bold;
 }
 
 .sup {
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-    top: -0.4em;
-    font-size: 0.7em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+  top: -0.4em;
+  font-size: 0.7em;
 }
 
 .small {
-    font-size: 0.875em;
+  font-size: 0.875em;
 }

package/framework/src/elements/_progress.scss

@@ -201,3 +201,23 @@ $slides-concat: '';
     $slides-concat: $slides-concat + ' + ' + var(--#{$name});
   }
 }
+
+.progress-legends {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .progress-legend-start {
+    grid-column: 1;
+    text-align: left;
+  }
+
+  .progress-legend-center {
+    grid-column: 2;
+    text-align: center;
+  }
+
+  .progress-legend-end {
+    grid-column: 3;
+    text-align: right;
+  }
+}

package/framework/src/elements/_switch.scss

@@ -1,6 +1,11 @@
 .switch {
   position: relative;
   margin: 8px;
+  width: fit-content;
+
+  &.is-fullwidth {
+    width: 100%;
+  }
 
   input {
     display: none;
@@ -8,6 +13,7 @@
     &:disabled ~ label,
     &:disabled:checked ~ label {
       cursor: not-allowed;
+
       &:before {
         background-color: getColor('disabled');
       }

package/framework/src/elements/_table.scss

@@ -153,7 +153,9 @@
     }
   }
 
-  &:not(.is-bordered).is-comparative {
+  &.has-border-all {
+    border: 1px solid getColor('neutral-fade');
+
     th {
       border-right: 1px solid getColor('neutral-fade');
     }
@@ -165,26 +167,24 @@
     }
   }
 
-  &.is-compact {
-    td,
+  &.has-border-inner {
     th {
-      padding: math.div(20px, 3) math.div(20px, 3);
+      &:not(:last-child) {
+        border-right: 1px solid getColor('neutral-fade');
+      }
+    }
+
+    td {
+      &:not(:last-child) {
+        border-right: 1px solid getColor('neutral-fade');
+      }
     }
   }
 
-  &.is-bordered {
+  &.is-compact {
     td,
     th {
-      border-width: 1px;
-    }
-
-    tr {
-      &:last-child {
-        td,
-        th {
-          border-bottom-width: 1px;
-        }
-      }
+      padding: math.div(20px, 3) math.div(20px, 3);
     }
   }
 

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,11 +45,11 @@ $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};
@@ -66,42 +65,47 @@ $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 +115,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 +134,8 @@ $gap :
 
   }
 
-  @include tablet{
-
-    @each $key, $value in $columnSize{
+  @include tablet {
+    @each $key, $value in $columnSize {
       > .column.is-#{$key}-tablet {
         flex: none;
         --ColumnFraction: #{$value};
@@ -147,9 +149,8 @@ $gap :
 
   }
 
-  @include touch{
-
-    @each $key, $value in $columnSize{
+  @include touch {
+    @each $key, $value in $columnSize {
       > .column.is-#{$key}-touch {
         flex: none;
         --ColumnFraction: #{$value};
@@ -163,9 +164,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 +179,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 +194,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 +211,45 @@ $gap :
 
   @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-vcentered {
+
+  &.is-aligned-start {
+    align-self: start;
+  }
+
+  &.is-aligned-center {
     align-self: center;
   }
 
+  &.is-aligned-end {
+    align-self: end;
+  }
+
 
   @include mobile {
     &.is-narrow-mobile {
@@ -260,7 +262,6 @@ $gap :
     &.is-narrow-tablet {
       flex: none;
     }
-
   }
 
   @include touch {
@@ -290,7 +291,7 @@ $gap :
 }
 
 .columns {
-  gap : 24px;
+  gap: 24px;
 
   &.is-scrollable {
     position: relative;
@@ -304,18 +305,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 +342,7 @@ $gap :
   }
 
   @include mobile {
-    gap : 16px;
+    gap: 16px;
 
   }
 
@@ -349,7 +353,6 @@ $gap :
 
   &.is-gapless {
     gap: 0;
-    --ColumnGap: 0px; // must be px because is used in calc.
   }
 
   &.is-mobile {
@@ -389,7 +392,7 @@ $gap :
       flex-direction: row;
     }
   }
-  @include mobile{
+  @include mobile {
     &.is-fullbleed {
       width: 100vw !important;
       margin-left: 50%;
@@ -399,15 +402,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-130",
+  "version": "0.0.1-beta-131",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [