@trilogy-ds/styles 0.0.1-beta-117 → 0.0.1-beta-121

package/framework/src/components/_autolayout.scss

@@ -8,6 +8,12 @@ body:not(.is-tight) {
   .box:not(:last-child) {
     margin-bottom: 24px;
   }
+  *:has(+.divider):not(:last-child) {
+    margin-bottom: 24px;
+  }
+  .divider:not(:last-child) {
+    margin-bottom: 24px;
+  }
   .table:not(:last-child) {
     margin-bottom: 24px;
   }
@@ -153,6 +159,12 @@ body:not(.is-tight) {
   .box:not(:last-child) {
       margin-bottom: 16px;
     }
+  *:has(+.divider):not(:last-child) {
+      margin-bottom: 16px;
+    }
+  .divider:not(:last-child) {
+      margin-bottom: 16px;
+    }
   .table:not(:last-child) {
       margin-bottom: 16px;
     }

package/framework/src/components/_price.scss

@@ -1,11 +1,11 @@
 $price-levels: (
-    ($text-64),
-    ($text-56),
-    ($text-44),
-    ($text-32),
-    ($text-28),
-    ($text-24),
-    ($text-20),
+    [$text-64, $text-44, $text-28, $text-16],
+    [$text-56, $text-32, $text-22, $text-16],
+    [$text-48, $text-28, $text-16, $text-16],
+    [$text-40, $text-24, $text-10, $text-10],
+    [$text-36, $text-20, $text-10, $text-10],
+    [$text-24, $text-20, $text-10, $text-10],
+    [$text-20, $text-20, $text-10, $text-10],
 );
 
 .price-container {
@@ -13,80 +13,25 @@ $price-levels: (
   align-items: baseline;
   column-gap: 12px;
   flex-wrap: wrap;
-
-  .overline {
-    width: 100%;
-    flex: none;
-    margin: 0;
-    --font-size: #{$text-64};
-    font-size: calc(var(--font-size) * 0.4);
-
-    @each $price-level in $price-levels {
-      $i: index($price-levels, $price-level);
-      $font-size: nth($price-level, 1);
-
-      &:has(~ .price.is-level-#{$i}:not(.is-striked)) {
-        --font-size: #{$font-size};
-      }
-    }
-  }
-}
-
-.price {
-  display: inline-flex;
-  font-weight: $weight-semibold;
-  line-height: 0.8;
-  margin-bottom: 0;
-
-  &:not(.is-inlined) {
-    font-size: $text-44;
-  }
+  --font-size: #{$text-64};
+  --tag-period-size:#{$text-16};
 
   @each $price-level in $price-levels {
     $i: index($price-levels, $price-level);
     $font-size: nth($price-level, 1);
+    $striked-font-size: nth($price-level, 2);
+    $tag-size: nth($price-level, 3);
+    $tag-period-size: nth($price-level, 4);
 
     &.is-level-#{$i} {
-      font-size: $font-size;
-
-      @if $i == 1 {
-        + .price-tag {
-          span:nth-child(2) {
-            font-size: $text-16;
-          }
-        }
-      }
-
-      @if $i == 2 {
-        + .price-tag {
-          font-size: 22px;
-          span:nth-child(2) {
-            font-size: $text-16;
-          }
-        }
-      }
-
-      @if $i == 3 {
-        + .price-tag {
-          font-size: 16px;
-          span:nth-child(2) {
-            font-size: $text-16;
-          }
-        }
-      }
-
-      @if $i < 4 {
-        + .price-tag {
-          span:nth-child(2) {
-            place-self: flex-end;
-            margin-bottom: 3px;
-          }
-        }
-      }
+      --font-size: #{$font-size};
+      --striked-font-size: #{$striked-font-size};
+      --tag-amount-size: #{$tag-size};
+      --tag-period-size: #{$tag-period-size};
 
       @if $i > 4 {
         .price-details {
-          padding-left: 2px !important;
+          padding-left: 2px;
         }
       }
       @if $i > 3 {
@@ -96,11 +41,47 @@ $price-levels: (
             margin-left: -6px;
             border-radius: 1px;
           }
-          font-size: $text-10;
           padding: 4px !important;
         }
       }
     }
+  }
+
+  .overline {
+    width: 100%;
+    flex: none;
+    margin: 0;
+    font-size: calc(var(--font-size) * 0.4);
+  }
+
+  .price {
+    font-size: var(--font-size);
+    &.is-striked {
+      font-size: var(--striked-font-size);
+    }
+  }
+
+  .price-tag {
+    padding: calc(var(--tag-period-size)/2);
+    font-size: var(--tag-amount-size);
+
+    &:before {
+      margin-left:calc(4px - var(--tag-period-size));
+    }
+
+    .tag-period {
+      font-size: var(--tag-period-size);
+      margin-bottom: calc( calc( var(--tag-period-size) - 10px) / 2);
+    }
+  }
+
+}
+
+.price {
+  display: inline-flex;
+  font-weight: $weight-semibold;
+  line-height: 0.8;
+  margin-bottom: 0;
 
     // the details : cents + period
 
@@ -138,9 +119,6 @@ $price-levels: (
       }
     }
 
-
-  }
-
   &.is-inverted {
     color: getColor('background');
   }
@@ -208,16 +186,14 @@ $price-levels: (
 }
 
 .price-tag {
+  line-height: 1em;
   align-self: center;
   background-color: getColor('accent');
-  margin-left: 10px;
   border-radius: 6px;
   display: inline-flex;
   color: getColor('background');
   height: fit-content;
-  padding: 8px;
   font-size: 28px;
-  line-height: 1em;
   align-items: baseline;
   position: relative;
   margin-left: -4px;
@@ -228,7 +204,7 @@ $price-levels: (
     border-left-color: getColor('accent');
     transform: rotate(45deg);
     border-style: solid;
-    border-width: 5px;
+    border-width: 6px;
     border-radius: 2px;
     pointer-events: none;
     position: absolute;
@@ -241,4 +217,7 @@ $price-levels: (
     height: 0;
     width: 0;
   }
+  .tag-period {
+    place-self: flex-end;
+  }
 }

package/framework/src/elements/_alert.scss

@@ -18,6 +18,14 @@ a.alert {
   box-shadow: none;
   padding: $spacing-4;
 
+  &.is-banner {
+
+    text-align: center;
+    border-radius: 0;
+    border: none !important;
+
+  }
+
   .text:first-child,
   .title:first-child {
     line-height: normal;

package/framework/src/elements/_badge.scss

@@ -3,7 +3,7 @@
   margin-right: 0.6em;
 }
 
-@mixin badge {
+.badge {
   display: inline-flex;
   border-radius: 9999px;
   color: getColor('background');
@@ -27,32 +27,18 @@
   }
 
   &.is-inverted {
-    color: getColor('main');
+    color: getColor('main') !important;
     background: getColor('background');
   }
 }
 
-.badge {
-  @include badge;
-}
-
 .badge-and-text {
   display: flex;
   align-items: center;
-
-  .badge {
-    position: relative;
-    margin-right: 60px;
-  }
+  gap: $text-40;
 
   p {
     margin-bottom: 0 !important;
-
-    & + .badge {
-      margin-left: 60px;
-      margin-right: 0;
-    }
-
   }
 
 }

package/framework/src/elements/_button.scss

@@ -19,14 +19,6 @@ $button-border-width: 2px !default;
   .has-text-centered & {
     justify-content: center;
   }
-
-  &.is-mobile {
-    flex-wrap: wrap;
-
-    .button {
-      margin-bottom: 16px;
-    }
-  }
 }
 
 .button {

package/framework/src/elements/_chips.scss

@@ -2,7 +2,7 @@
 
 .chips-list {
   align-items: center;
-  display: inline-flex;
+  display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: $spacing-2;
@@ -12,6 +12,14 @@
     justify-content: center;
   }
 
+  &.is-scrollable {
+    flex-wrap: nowrap;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   &.is-multiple {
     .chips:before {
       content: "";

package/framework/src/elements/_container.scss

@@ -21,14 +21,10 @@
 
   @include desktop {
     max-width: $desktop - 2 * $gap;
-    width: $desktop - 2 * $gap;
-
-    &.is-fluid {
-      margin-left: $gap;
-      margin-right: $gap;
-      max-width: none;
-      width: auto;
-    }
+    margin-left: $gap;
+    margin-right: $gap;
+    max-width: none;
+    width: auto;
   }
 
   @include until-widescreen {
@@ -51,34 +47,11 @@
   }
 
   @include fullhd {
+    margin: 0 auto;
     max-width: $fullhd - 2 * $gap;
     width: $fullhd - 2 * $gap;
   }
 
-  &:not(.is-fluid) {
-    @include desktop {
-      width: 904px;
-      max-width: 904px;
-    }
-
-    @include widescreen {
-      width: 1160px;
-      max-width: 1160px;
-    }
-
-    @include fullhd {
-      width: 1308px;
-      max-width: 1308px;
-    }
-  }
-
-  &.is-fluid {
-    @include fullhd {
-      margin: 0 auto;
-      max-width: $fullhd - 2 * $gap;
-    }
-  }
-
   &.is-medium {
     max-width: 960px;
     margin: auto;
@@ -95,14 +68,12 @@ header .navbar,
 header,
 footer {
   > .container {
-    &.is-fluid {
-      @include desktop {
-        margin: 0 auto;
-      }
+    @include desktop {
+      margin: 0 auto;
+    }
 
-      @include fullhd {
-        max-width: 100%;
-      }
+    @include fullhd {
+      max-width: 100%;
     }
   }
 }

package/framework/src/elements/_paragraph.scss

@@ -13,7 +13,9 @@ $text-levels-mobile: (
 
 
 .text {
-        @each $text-level in $text-levels {
+  line-height: $text-20;
+
+  @each $text-level in $text-levels {
             $i: index($text-levels, $text-level);
             $font-size: nth($text-level, 1);
             $line-height: nth($text-level, 2);

package/framework/src/elements/_select.scss

@@ -3,10 +3,22 @@
   position: relative;
   input { cursor: pointer;}
 
-  .field.focus .control input:first-child, 
-  .field.focus .input.select-native { 
-    border: 2px solid currentColor;
-   }
+  select {
+    width: 100%;
+    @include input;
+    &:focus {
+      padding-left: 15px !important;
+    }
+  }
+
+  .has-icons-left {
+    select {
+      padding-left: 45px;
+      &:focus {
+        padding-left: 44px !important;
+      }
+    }
+  }
 
   &-options { 
     box-shadow: 0 0 8px #0000001a; 
@@ -19,6 +31,35 @@
     right: 0;
   }
 
+  .field {
+    &.focus {
+      &:after{
+        @include arrow('up');
+        right: 12px;
+        top:50%;
+        transform: translate(-50%,-50%);
+      }
+    }
+    &:not(.focus) {
+      &:after{
+        @include arrow();
+        right: 12px;
+        top:50%;
+        transform: translate(-50%,-50%);
+      }
+    }
+  } 
+
+
+  &-trilogy_modal_open {
+    position: fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    z-index: 1000;
+  }
+
   .radio-tile {
     input:checked {
       &~label.radio-label {
@@ -50,49 +91,6 @@
       font-size: $text-20 !important;
     }
   } 
-
-  .control:not(.has-icons-left.has-icons-right) {
-    .select-native.multiple.input {
-      padding-left:0 !important;
-      select option {padding-left: 16px;}
-    }
-  }
-
-  &-native {
-    position: relative;
-    select {
-      width: 100%;
-      border:none;
-      height: 100%;
-      background-color: transparent;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      text-indent: 1px;
-      outline: none;
-      color:  getColor('main');
-      font-size: $text-16 !important;
-    }
-
-    &.input {
-      padding-top: 0px !important;
-      padding-bottom: 0px !important;
-    }
-
-    &.multiple.input{
-      height: auto !important;
-      padding-right: 0 !important;
-      select { padding-top: 0 !important; }
-    }
-  }
-
-  &-trilogy_modal_open {
-    position: fixed;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    z-index: 1000;
-  }
 }
 
 

package/framework/src/elements/_switch.scss

@@ -46,7 +46,6 @@
       width: 44px;
       height: 22px;
       background-color: getColor('neutral');
-      margin-left: 16px;
     }
 
     &:after {

package/framework/src/grid/_columns.scss

@@ -4,7 +4,6 @@ $columnWidth: calc((100% / (var(--ColumnFraction))) - ((((var(--ColumnFraction))
 $offsetWidth: calc((100% / (var(--offset))) - ((((var(--offset)) - 1) / (var(--offset))) * var(--ColumnGap)) + var(--ColumnGap));
 
 $columnSize : (
-  "gapless"     : 0,
   "1"     : math.div(12, 1),
   "2"     : math.div(12, 2),
   "3"     : math.div(12, 3),
@@ -93,9 +92,6 @@ $gap :
     }
   }
 
-
-
-
   @for $i from 1 through length($gap) {
     $item: nth($gap, $i);
     &.is-mobile.has-gap-#{$i} {

package/framework/src/utilities/_controls.scss

@@ -1,7 +1,7 @@
 $control-border-width: 1px !default;
 
 $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
-$control-padding-horizontal: 20px;
+$control-padding-horizontal: 16px;
 
 @mixin control {
   -moz-appearance: none;

package/package.json

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