@trilogy-ds/styles 4.15.3 → 4.16.1

package/framework/src/components/_button.scss

@@ -68,8 +68,12 @@ $button-border-width: 2px !default;
   [aria-disabled=true] {
     pointer-events: none;
   }
-  .icon{
-    justify-content: start;
+  &:has(.icon) {
+    gap: $spacing-2;
+  }
+
+  .icon {
+    width: auto;
   }
 
   &.is-loading {

package/framework/src/components/_checkbox.scss

@@ -31,7 +31,8 @@
 
 .checkbox,
 .checkbox-tile {
-  input:checked ~ label.checkbox-label {
+  input:checked ~ label.checkbox-label,
+  input:checked ~ .checkbox-container {
     &:before {
       background-color: getColor('main');
     }
@@ -44,7 +45,8 @@
     }
   }
 
-  label.checkbox-label {
+  label.checkbox-label,
+  .checkbox-container {
     &:before,
     &:after {
       border-radius: var(--radius-small);
@@ -53,7 +55,8 @@
 }
 
 .checkbox-tile {
-  input:checked ~ label.checkbox-label {
+  input:checked ~ label.checkbox-label,
+  input:checked ~ .checkbox-container {
     &:after {
       top: 15px;
       left: 15px;

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

@@ -833,7 +833,7 @@
   }
 
   &.is-gapless {
-    --ColumnGap: 0;
+    --ColumnGap: 0px;
   }
 
   $itemWidth: calc((100% / (var(--ColumnFraction))) - ((((var(--ColumnFraction)) - 1) / (var(--ColumnFraction))) * var(--ColumnGap)));

package/framework/src/components/_link.scss

@@ -2,6 +2,10 @@
   [disabled] {
     @include disabledRulesWithoutBG;
   }
+
+  &.is-small {
+    font-size: $size-6;
+  }
 }
 
 .link:not([disabled]) {

package/framework/src/components/_radio.scss

@@ -31,7 +31,8 @@
 
 .radio,
 .radio-tile {
-  input:checked ~ label.radio-label {
+  input:checked ~ label.radio-label,
+  input:checked ~ .radio-container {
     cursor: default;
 
     &:after {
@@ -41,7 +42,8 @@
     }
   }
 
-  label.radio-label {
+  label.radio-label,
+  .radio-container {
     &:before,
     &:after {
       border-radius: 9999px;
@@ -61,18 +63,19 @@
       @include hoverRules()
     }
   }
-
 }
 
 .radio-tile {
-  input:checked ~ label.radio-label {
+  input:checked ~ label.radio-label,
+  input:checked ~ .radio-container {
     &:after {
       top: 18px;
       left: 18px;
     }
   }
 
-  input:checked:disabled ~ label.radio-label {
+  input:checked:disabled ~ label.radio-label,
+  input:checked:disabled ~ .radio-container {
     &:after {
       background-color: getColor('neutral');
       top: 19px;

package/framework/src/components/_stepper.scss

@@ -143,20 +143,36 @@
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  padding-top: $spacing-2;
   gap: $spacing-1;
   .icon {
     font-size: 20px;
     height: auto;
   }
+}
 
-  @include touch {
-    position: absolute;
-    top: 10px;
-    left: 0;
-  }
+.stepper-wrapper > .stepper-item > .step-label {
+  padding-top: $spacing-2;
+    @include touch {
+      position: absolute;
+      top: 10px;
+      left: 0;
+    }
 }
 
+.stepper-container > .stepper-content > .step-label {
+  transition: opacity 0.3s ease-in-out;
+  animation: fadeInLabel 0.4s ease-out;
+}
+
+.stepper-content {
+  margin-bottom: $spacing-3 !important;
+}
+
+.stepper-steps {
+  margin-bottom: $spacing-2 !important;
+}
+
+
 @include desktop {
   .step-count {
     display: none;
@@ -180,6 +196,20 @@
       display: none;
     }
   }
+
+  .stepper-container > .stepper-steps {
+    font-size: 12px !important;
+    line-height: 18px !important;
+  }
+
+  .stepper-container > .stepper-content > .step-label {
+    font-size: 14px !important;
+    line-height: 18px !important;
+  }
+
+  .stepper-container > .stepper-content > .icon {
+    font-size: 16px !important;
+  }
 }
 
 @include tablet-only {
@@ -194,9 +224,9 @@
 
   .stepper-item:not(.is-current) {
     display: flex;
-
+  
     .step-label {
-      display: none;
+    display: none;
     }
   }
 }
@@ -214,3 +244,11 @@
   }
 }
 
+@keyframes fadeInLabel {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -44,6 +44,60 @@
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
+    &.is-grid {
+      display: grid;
+      & > .#{$type}-tile {
+        width: 100%;
+        max-width: none;
+      }
+    }
+    @for $i from 1 through 12 {
+      &.is-grid-cols-#{$i} {
+        grid-template-columns: repeat(#{$i}, 1fr);
+      }
+    }
+    @include mobile {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-mobile-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include tablet {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-tablet-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include touch {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-touch-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include desktop {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-desktop-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include widescreen {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-widescreen-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
+    @include fullhd {
+      @for $i from 1 through 12 {
+        &.is-grid-cols-fullhd-#{$i} {
+          grid-template-columns: repeat(#{$i}, 1fr);
+        }
+      }
+    }
   }
 
   //BOTH
@@ -51,7 +105,8 @@
   .#{$type}-tile {
     position: relative;
 
-    label.#{$type}-label {
+    label.#{$type}-label, 
+    .#{$type}-container {
       cursor: pointer;
       font-size: 14px;
 
@@ -73,7 +128,8 @@
       position: absolute;
       outline: none;
 
-      &:checked ~ label.#{$type}-label {
+      &:checked ~ label.#{$type}-label,  
+      &:checked ~ .#{$type}-container {
         border-color: getColor('main');
 
         &:before {
@@ -84,18 +140,22 @@
           background-color: getColor('main');
         }
       }
-      &:focus-visible ~ label.#{$type}-label:before {
+
+      &:focus-visible ~ label.#{$type}-label:before,
+      &:focus-visible ~ .#{$type}-container:before {
         outline: 1px solid;
       }
 
       &:disabled,
       &:disabled:checked {
-        & ~ label.checkbox-label {
+        & ~ label.checkbox-label,
+        & ~ .checkbox-container {
           &:after {
             background-color: getColor('disabled-fade');
           }
         }
-        & ~ label.radio-label {
+        & ~ label.radio-label,
+        & ~ .radio-container {
           &:after {
             background-color: getColor('disabled');
           }
@@ -103,7 +163,8 @@
       }
 
       &:disabled {
-        & ~ label.#{$type}-label {
+        & ~ label.#{$type}-label,
+         & ~ .#{$type}-container {
           &:after {
             background-color: transparent;
           }
@@ -164,11 +225,14 @@
 
     input:disabled,
     input:disabled:checked {
-      & ~ label.#{$type}-label {
+      & ~ label.#{$type}-label,
+      & ~ .#{$type}-container {
         @include disabledRules;
       }
     }
-    &:has(input:focus-visible) label.#{$type}-label{
+
+    &:has(input:focus-visible) label.#{$type}-label,
+    &:has(input:focus-visible) .#{$type}-container{
       outline:  1px solid;
     }
 
@@ -180,7 +244,8 @@
       margin-right: 0;
     }
 
-    label.#{$type}-label {
+    label.#{$type}-label,
+    .#{$type}-container {
       display: block;
       position: relative;
       padding: 40px 16px 16px;
@@ -195,24 +260,32 @@
         left: 16px;
       }
 
-      span.#{$type}-title {
+      span.#{$type}-title,
+      label.#{$type}-title {
         font-weight: bold;
         width: 100%;
         display: block;
         font-size: 16px;
       }
+
+      label.#{$type}-title {
+        cursor: pointer;
+      }
     }
 
     input {
-      &:not(:disabled):not(:checked) ~ label.radio-label {
+      &:not(:disabled):not(:checked) ~ label.radio-label,
+       &:not(:disabled):not(:checked) ~ .radio-container {
         @include label-states;
       }
 
-      &:not(:disabled) ~ label.checkbox-label {
+      &:not(:disabled) ~ label.checkbox-label,
+      &:not(:disabled) ~ .checkbox-container {
         @include label-states;
       }
 
-      &:checked:not(:disabled) ~ label.#{$type}-label {
+      &:checked:not(:disabled) ~ label.#{$type}-label,
+       &:checked:not(:disabled) ~ .#{$type}-container {
         border-color: getColor('main');
         border-width: 2px;
         padding: 15px;
@@ -223,20 +296,23 @@
           left: 15px;
         }
 
-        span.#{$type}-title {
+        span.#{$type}-title,
+        label.#{$type}-title  {
           color: getColor('main');
         }
       }
 
       &:disabled {
-        & ~ label.#{$type}-label {
+        & ~ label.#{$type}-label,
+        & ~ .#{$type}-container  {
           &:before {
             border-color: getColor('disabled') !important;
           }
         }
       }
 
-      &:disabled:checked ~ label.#{$type}-label {
+      &:disabled:checked ~ label.#{$type}-label,
+      &:disabled:checked ~ .#{$type}-container {
         .checkbox-title {
           color: getColor('disabled');
         }
@@ -263,13 +339,15 @@
       }
 
       input {
-        &:checked:not(:disabled) ~ label.#{$type}-label {
+        &:checked:not(:disabled) ~ label.#{$type}-label,
+        &:checked:not(:disabled) ~ .#{$type}-container {
           padding: ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-4 - 1px) ($spacing-8 - 1px);
         }
 
       }
 
-      label.#{$type}-label {
+      label.#{$type}-label,
+      .#{$type}-container {
         width: 100%;
         display: flex;
         align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.15.3",
+  "version": "4.16.1",
   "author": "Bouygues Telecom",
   "repository": {
     "type": "git",

package/framework/src/components/_stepper-legacy.scss

@@ -1,217 +0,0 @@
-@use "sass:math";
-
-.stepper-wrapper {
-  display: flex;
-  position: relative;
-  justify-content: space-between;
-  min-height: 44px;
-  gap: $spacing-4;
-
-  @include touch {
-    gap: $spacing-2;
-  }
-
-  .stepper-item {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    &:before {
-      content: "";
-      display: block;
-      height: 4px;
-      border-radius: var(--radius-small);
-      background-size: 200% !important;
-      background-color: getColor('neutral');
-    }
-
-    &.is-error {
-
-      &:before {
-        background-color: getColor('error') !important;
-
-      }
-
-      &.is-current {
-        &:before {
-          animation: progress 1s;
-        }
-
-      }
-
-      .step-bars {
-        background: getColor('error') !important;
-      }
-
-      color: getColor('font');
-
-      .step-label {
-
-        &::before {
-          content: "";
-          mask-image: url('./assets/icons/all/times.svg') !important;
-          background-color: getColor('error') !important;
-          border-width: 0;
-          mask-size: 20px;
-          width: 20px;
-          height: 20px;
-          align-self: baseline;
-          margin-top: 2px;
-        }
-
-        .icon {
-          display: none;
-        }
-      }
-    }
-
-    &.is-done {
-
-      &:before {
-        background-color: getColor('font');
-      }
-
-      .step-bars {
-        background: getColor('font');
-        transition: background-color 1s ease-in-out;
-      }
-
-      .step-label {
-        &::before {
-          content: "";
-          mask-image: url('./assets/icons/all/check-circle.svg');
-          background-color: getColor('success');
-          border-width: 0;
-          min-width: 20px;
-          mask-size: 20px;
-          height: 20px;
-          align-self: baseline;
-          margin-top: 2px;
-        }
-      }
-    }
-
-    &.is-current,
-    &.is-active {
-
-      &:before {
-        background-color: getColor('main');
-        animation: progress 1s;
-      }
-
-      .step-bars {
-        background: getColor('main');
-      }
-
-      .step-label {
-        font-style: normal;
-        font-weight: 600;
-        font-size: 20px;
-        line-height: 22px;
-        width: max-content;
-
-        .icon [class^=tri-], .icon [class*=" tri-"] {
-          height: 22px;
-          width: 22px;
-          margin: 0 4px 0 -4px;
-        }
-
-        @include tablet-only {
-          width: 90% !important;
-        }
-
-        @include mobile {
-          font-size: 18px;
-          width: 90%;
-        }
-      }
-    }
-  }
-
-  .step-bars {
-    height: 4px;
-    background: getColor('disabled');
-    border-radius: var(--radius-small);
-    display: none;
-  }
-
-  .step-label {
-    display: flex;
-    align-items: center;
-    color: getColor('font');
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    padding-top: $spacing-2;
-    gap: $spacing-1;
-
-    .icon {
-      font-size: 20px;
-      height: auto;
-    }
-
-    @include touch {
-      position: absolute;
-      top: 10px;
-      left: 0;
-    }
-  }
-
-  @include desktop {
-    .step-count {
-      display: none;
-    }
-  }
-
-  @include mobile {
-    .step-count {
-      position: absolute;
-      top: 23px;
-      right: 8px;
-      font-size: 14px;
-      line-height: 18px;
-      font-weight: 600;
-    }
-
-    .stepper-item:not(.is-current) {
-      display: flex;
-
-      .step-label {
-        display: none;
-      }
-    }
-  }
-
-  @include tablet-only {
-    .step-count {
-      position: absolute;
-      top: 24px;
-      right: 8px;
-      font-size: 14px;
-      line-height: 18px;
-      font-weight: 600;
-    }
-
-    .stepper-item:not(.is-current) {
-      display: flex;
-
-      .step-label {
-        display: none;
-      }
-    }
-  }
-
-
-  @keyframes progress {
-    0%, 100% {
-      background-image: linear-gradient(to right, transparent 0, transparent 50%, getColor('neutral') 50%, getColor('neutral') 100%);
-    }
-    0% {
-      background-position: 100% 0;
-    }
-    100% {
-      background-position: 0 0;
-    }
-  }
-}