@trilogy-ds/styles 0.0.1-beta-149 → 0.0.1-beta-151

package/framework/src/elements/_box.scss

@@ -1,20 +1,16 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$font-size-header: 15;
-$font-line-height-header: 1.5;
-$padding-top-bottom-header: 8;
-
-
 :root {
-  --padding-box : #{$spacing-5};
+  --padding-box: #{$spacing-5};
   @include mobile {
-    --padding-box : #{$spacing-4};
+    --padding-box: #{$spacing-4};
   }
 }
 
 $highlighted-border-width: 4px;
 
+
 a.box {
   cursor: pointer;
   transition: box-shadow $animation-duration;
@@ -44,6 +40,16 @@ a.box {
     outline: var(--border-active);
   }
 
+  &.is-offset-header {
+    @include tablet {
+      margin-top: 40px;
+
+      &.is-fullheight {
+        height: calc(100% - 40px);
+      }
+    }
+  }
+
   &.is-fullheight {
     .box-content {
       flex-grow: 1;
@@ -54,22 +60,13 @@ a.box {
     box-shadow: none;
     border: var(--border);
 
-    &.has-hat > .is-hat {
-      left: -1px;
-      right: -1px;
-    }
-
     .box-header {
-      margin-top: calc(var(--padding-box)*-1 - 1px);
-      margin-left: calc(var(--padding-box)*-1 - 1px);
-      margin-right: calc(var(--padding-box)*-1 - 1px);
+      margin-top: calc(var(--padding-box) * -1 - 1px);
+      margin-left: calc(var(--padding-box) * -1 - 1px);
+      margin-right: calc(var(--padding-box) * -1 - 1px);
     }
   }
 
-  &.is-header-offset {
-    margin-top: #{$font-size-header * $font-line-height-header + 2 * $padding-top-bottom-header}px;
-  }
-
   &.is-highlighted {
     border-left: $highlighted-border-width solid transparent;
     border-top-left-radius: calc(var(--radius) + $highlighted-border-width);
@@ -78,14 +75,14 @@ a.box {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
-      &.is-#{$brandName}{
+      &.is-#{$brandName} {
         border-left-color: $color;
         border-left-width: $highlighted-border-width;
       }
     }
 
-    .box-header{
-      margin-left: calc(var(--padding-box)*-1 - $highlighted-border-width);
+    .box-header {
+      margin-left: calc(var(--padding-box) * -1 - $highlighted-border-width);
     }
   }
 
@@ -93,9 +90,9 @@ a.box {
     z-index: inherit;
     background-color: getColor('font');
     color: getColor('background');
-    margin-top: calc(var(--padding-box)*-1);
-    margin-left: calc(var(--padding-box)*-1);
-    margin-right: calc(var(--padding-box)*-1);
+    margin-top: calc(var(--padding-box) * -1);
+    margin-left: calc(var(--padding-box) * -1);
+    margin-right: calc(var(--padding-box) * -1);
     padding: 8px;
     padding-left: var(--padding-box);
     padding-right: var(--padding-box);
@@ -107,9 +104,12 @@ a.box {
     align-items: center;
     font-weight: $weight-semibold;
     border-radius: var(--radius) var(--radius) 0 0;
-    text-align: center;
+    height: 40px;
+
     @include tablet {
+      flex-direction: row;
       align-items: center;
+      justify-content: space-between;
     }
 
     > p:not(:last-child),
@@ -128,16 +128,18 @@ a.box {
   }
 
   .box-content {
-    margin-left: calc(var(--padding-box)*-1);
-    margin-right: calc(var(--padding-box)*-1);
+    margin-left: calc(var(--padding-box) * -1);
+    margin-right: calc(var(--padding-box) * -1);
     padding: var(--padding-box);
-    &:first-child{
-      margin-top: calc(var(--padding-box)*-1);
+
+    &:first-child {
+      margin-top: calc(var(--padding-box) * -1);
       border-top-left-radius: var(--radius);
       border-top-right-radius: var(--radius);
     }
-    &:last-child{
-      margin-bottom: calc(var(--padding-box)*-1);
+
+    &:last-child {
+      margin-bottom: calc(var(--padding-box) * -1);
       border-bottom-left-radius: var(--radius);
       border-bottom-right-radius: var(--radius);
     }
@@ -147,8 +149,8 @@ a.box {
     }
 
     > .is-unboxed {
-      margin-left: calc(var(--padding-box)*-1);
-      margin-right: calc(var(--padding-box)*-1);
+      margin-left: calc(var(--padding-box) * -1);
+      margin-right: calc(var(--padding-box) * -1);
     }
 
     &.is-transparent {
@@ -157,9 +159,9 @@ a.box {
   }
 
   .box-footer {
-    margin-left: calc(var(--padding-box)*-1);
-    margin-right: calc(var(--padding-box)*-1);
-    margin-bottom: calc(var(--padding-box)*-1);
+    margin-left: calc(var(--padding-box) * -1);
+    margin-right: calc(var(--padding-box) * -1);
+    margin-bottom: calc(var(--padding-box) * -1);
     padding: var(--padding-box);
     border-top: 1px solid getColor('neutral-fade');
     border-bottom-left-radius: var(--radius);

package/framework/src/elements/_image.scss

@@ -1,59 +1,69 @@
 .image {
+  display: block;
+  position: relative;
+
+  &.is-justified-start,
+  &.is-justified-center,
+  &.is-justified-end {
+    display: flex;
+  }
+
+  img {
     display: block;
-    position: relative;
+    max-width: 100%;
 
-    img {
-        display: block;
-        max-width: 100%;
+    &.b-loaded {
+      height: auto;
+    }
 
-        &.b-loaded {
-            height: auto;
-        }
+    &.is-circled {
+      border-radius: 50%;
     }
+  }
 }
 
 .b-lazy {
-    transition: opacity 250ms ease-in-out;
-    opacity: 0;
+  transition: opacity 250ms ease-in-out;
+  opacity: 0;
 
-    &.b-loaded {
-        opacity: 1;
+  &.b-loaded {
+    opacity: 1;
 
-        &.has-bg-image {
-            &.has-bg-gradient {
-                &::before {
-                    opacity: 0;
-                }
-            }
+    &.has-bg-image {
+      &.has-bg-gradient {
+        &::before {
+          opacity: 0;
         }
+      }
     }
+  }
 
-    &.has-bg-image {
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: cover;
+  &.has-bg-image {
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+
+    &.has-bg-gradient {
+      z-index: zindex('void');
+      opacity: 1;
+
+      &::before {
+        content: '';
+        opacity: 1;
         position: absolute;
         top: 0;
-        bottom: 0;
         left: 0;
         right: 0;
-        height: 100%;
-
-        &.has-bg-gradient {
-            z-index: zindex('void');
-            opacity: 1;
-
-            &::before {
-                content: '';
-                opacity: 1;
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                z-index: zindex('tiny');
-                transition: opacity 750ms ease-in-out;
-            }
-        }
+        bottom: 0;
+        z-index: zindex('tiny');
+        transition: opacity 750ms ease-in-out;
+      }
     }
+  }
 }

package/framework/src/elements/_list.scss

@@ -1,53 +1,62 @@
 // Bullet list classiques
 ul.list,
 ol.list {
-  list-style-type: none;
+  list-style: disc inside;
+  display: grid;
+  row-gap: $spacing-3;
 
-  li {
-    padding: $spacing-4;
-    position: relative;
-
-    .list-item_content {
+  li.list-item {
+    &:has(.icon) {
+      list-style: none;
       display: flex;
-      align-items: center;
+    }
+
+    .icon {
+      margin-right: $spacing-2;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+
+    .list-item-content {
+      display: inline-grid;
+
       &_puce {
         margin-right: $spacing-4;
       }
     }
 
-
     &.has-action {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      @include hover();
 
       .list-item_action {
-        & >:first-child {
-          margin: 0px !important;
+        & > :first-child {
+          margin: 0 !important;
           cursor: pointer;
         }
 
-        .radio label.radio-label:empty, 
+        .radio label.radio-label:empty,
         .checkbox label.checkbox-label:empty {
-          padding: $spacing-1 $spacing-1 $spacing-1 calc($spacing-1 + 10px);        
+          padding: $spacing-1 $spacing-1 $spacing-1 calc($spacing-1 + 10px);
         }
-
-      } 
-
+      }
     }
 
     div b {
-      margin-bottom: $spacing-2 ;
+      margin-bottom: $spacing-2;
     }
+  }
 
-    .divider {
-      position: absolute;
-      bottom: calc(-1 * $spacing-4);
-      width: 100%;
-    }
+  &.has-divider {
+    li {
+      border-bottom: var(--border);
+      padding-bottom: $spacing-3;
 
+      &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+    }
   }
-  
 }
-

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/_radio.scss

@@ -2,17 +2,22 @@
 
 .radios {
   width: 100%;
-  column-gap: 16px;
+  gap: 16px;
   display: flex;
   flex-wrap: wrap;
+  flex-direction: column;
 
-  &.is-vertical {
-    row-gap: 16px;
+  @include tablet {
+    flex-direction: row;
+
+    &.is-vertical-desktop {
+      flex-direction: column;
+    }
   }
 
   @include mobile {
-    &:not(.is-mobile){
-      display: block;
+    &.is-horizontal-mobile {
+      flex-direction: row;
     }
   }
 
@@ -25,51 +30,52 @@
 
 .radio,
 .radio-tile {
-    input:checked ~ label.radio-label {
-        cursor: default;
-        &:after {
-            content: '';
-            width: 12px;
-            height: 12px;
-        }
+  input:checked ~ label.radio-label {
+    cursor: default;
+
+    &:after {
+      content: '';
+      width: 12px;
+      height: 12px;
     }
+  }
 
-    label.radio-label {
-        &:before,
-        &:after {
-            border-radius: 9999px;
-        }
+  label.radio-label {
+    &:before,
+    &:after {
+      border-radius: 9999px;
     }
+  }
 }
 
 .radio {
-    input:checked ~ label.radio-label {
-        &:after {
-            left: 3px;
-        }
+  input:checked ~ label.radio-label {
+    &:after {
+      left: 3px;
     }
+  }
 
-    input:not(:disabled):not(:checked) ~ label.radio-label:hover {
-        &:before {
-            @include hoverRules()
-        }
+  input:not(:disabled):not(:checked) ~ label.radio-label:hover {
+    &:before {
+      @include hoverRules()
     }
-      
+  }
+
 }
 
 .radio-tile {
-    input:checked ~ label.radio-label {
-        &:after {
-            top: 18px;
-            right: 18px;
-        }
+  input:checked ~ label.radio-label {
+    &:after {
+      top: 18px;
+      right: 18px;
     }
+  }
 
-    input:checked:disabled ~ label.radio-label {
-        &:after {
-            background-color: getColor('neutral');
-            top: 19px;
-            right: 19px;
-        }
+  input:checked:disabled ~ label.radio-label {
+    &:after {
+      background-color: getColor('neutral');
+      top: 19px;
+      right: 19px;
     }
+  }
 }

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/elements/_tag.scss

@@ -2,10 +2,10 @@ $tag-delete-margin: 1px !default;
 
 // container pour multi-tags ou tags avec actions
 .tags {
+  display: flex;
+  justify-content: flex-start;
   align-items: center;
-  display: inline-flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
   margin-bottom: 16px;
 
   // multi-tags : ajout d'une marge bottom, supprimable par facette