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

package/framework/src/elements/_image.scss

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

package/framework/src/elements/_list.scss

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

package/framework/src/elements/_paragraph.scss

@@ -14,54 +14,66 @@ $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);
+            $i: index($text-levels, $text-level);
+            $font-size: nth($text-level, 1);
+            $line-height: nth($text-level, 2);
+            $margin-bottom: nth($text-level, 3);
 
-    &.is-level-#{$i} {
-      font-size: $font-size;
-      line-height: $line-height;
-      font-family: $family-primary;
-    }
-  }
+            &.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-inverted {
-    color: getColor('background');
-  }
+                &.is-level-#{$i} {
+                    margin-bottom: $margin-bottom;
+                }
+            }
+        }
 
-  @include mobile {
-    @each $text-level-mobile in $text-levels-mobile {
-      $i: index($text-levels-mobile, $text-level-mobile);
+        &.is-wrapped {
+            word-break: break-word;
+        }
+
+        &.bold {
+            font-weight: $weight-bold;
+        }
     }
-  }
 
-  &.is-wrapped {
-    word-break: break-word;
-  }
 
-  &.bold {
-    font-weight: $weight-bold;
-  }
+.paragraph:not(:last-child) {
+    margin-bottom: 10px;
 }
 
 .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,23 +201,3 @@ $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,22 +2,17 @@
 
 .radios {
   width: 100%;
-  gap: 16px;
+  column-gap: 16px;
   display: flex;
   flex-wrap: wrap;
-  flex-direction: column;
 
-  @include tablet {
-    flex-direction: row;
-
-    &.is-vertical-desktop {
-      flex-direction: column;
-    }
+  &.is-vertical {
+    row-gap: 16px;
   }
 
   @include mobile {
-    &.is-horizontal-mobile {
-      flex-direction: row;
+    &:not(.is-mobile){
+      display: block;
     }
   }
 
@@ -30,52 +25,51 @@
 
 .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,11 +1,6 @@
 .switch {
   position: relative;
   margin: 8px;
-  width: fit-content;
-
-  &.is-fullwidth {
-    width: 100%;
-  }
 
   input {
     display: none;
@@ -13,7 +8,6 @@
     &:disabled ~ label,
     &:disabled:checked ~ label {
       cursor: not-allowed;
-
       &:before {
         background-color: getColor('disabled');
       }

package/framework/src/elements/_table.scss

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

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