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

package/framework/src/base/_helpers.scss

@@ -433,7 +433,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 // Radius
-$radius-list: ['radius-small', 'radius'];
+$radius-list: ['radius-large', 'radius-medium', 'radius-small', 'radius'];
 
 @each $label in $radius-list {
   .has-border-#{$label} {

package/framework/src/components/_divider.scss

@@ -1,7 +1,6 @@
 .divider {
   background-color: getColor('neutral');
   height: 1px;
-  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

package/framework/src/components/_modal.scss

@@ -71,19 +71,14 @@ body:has(.modal.is-active) {
     color: getColor('font');
     overflow: auto;
     position: relative;
-    padding: 0 30px 30px;
+    padding: $spacing-5;
     margin: 0 $modal-content-margin-mobile;
     max-height: calc(100vh - 40px);
-    text-align: center;
     width: 100%;
     z-index: zindex('tiny');
     transition: transform ease-in-out 250ms;
     transform: translateY(100%);
 
-    &:has(.modal-footer) {
-      padding-bottom: 0;
-    }
-
     @include tablet {
       max-height: calc(100vh - 120px);
       width: $modal-content-width;
@@ -113,7 +108,11 @@ body:has(.modal.is-active) {
       width: 100%;
       background: getColor('background');
       bottom: 0;
-      padding: 16px;
+
+      @include tablet {
+        display: flex;
+        justify-content: flex-end;
+      }
     }
 
     // If Close Icon Modal & Title Modal are sibling elements, override margin
@@ -126,9 +125,9 @@ body:has(.modal.is-active) {
     @include delete;
 
     background-color: getColor('background');
-    position: sticky;
-    top: 20px;
-    left: 100%;
+    position: absolute;
+    top: $spacing-5;
+    right: $spacing-5;
     display: block;
     height: $modal-close-dimensions;
     width: $modal-close-dimensions;
@@ -144,11 +143,6 @@ body:has(.modal.is-active) {
     }
   }
 
-  .modal-title {
-    padding: 20px 0;
-  }
-
-  .modal-title, 
   .modal-header {
     color: getColor('font');
     font-family: $family-sans-serif;
@@ -162,6 +156,10 @@ body:has(.modal.is-active) {
     width: 100%;
     word-wrap: break-word;
 
+    &:has(.icon) {
+      text-align: center;
+    }
+
     @include desktop {
       font-size: $size-3-desktop;
     }
@@ -203,4 +201,4 @@ body:has(.modal.is-active) {
       }
     }
   }
-}
+}

package/framework/src/components/_otp.scss

@@ -67,7 +67,7 @@
   }
 }
 
-.otp-error-message {
+.help {
   font-size: $text-12;
   margin-top: 4px;
 }

package/framework/src/components/_price.scss

@@ -14,18 +14,18 @@ $price-levels: (
   column-gap: 12px;
   flex-wrap: wrap;
   --font-size: #{$text-64};
-  --tag-period-size:#{$text-16};
+  --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);
+    $strike-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};
-      --striked-font-size: #{$striked-font-size};
+      --strike-font-size: #{$strike-font-size};
       --tag-amount-size: #{$tag-size};
       --tag-period-size: #{$tag-period-size};
 
@@ -41,6 +41,7 @@ $price-levels: (
             margin-left: -6px;
             border-radius: 1px;
           }
+
           padding: 4px !important;
         }
       }
@@ -56,22 +57,23 @@ $price-levels: (
 
   .price {
     font-size: var(--font-size);
-    &.is-striked {
-      font-size: var(--striked-font-size);
+
+    &.strike {
+      font-size: var(--strike-font-size);
     }
   }
 
   .price-tag {
-    padding: calc(var(--tag-period-size)/2);
+    padding: calc(var(--tag-period-size) / 2);
     font-size: var(--tag-amount-size);
 
     &:before {
-      margin-left:calc(4px - var(--tag-period-size));
+      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);
+      margin-bottom: calc(calc(var(--tag-period-size) - 10px) / 2);
     }
   }
 
@@ -152,14 +154,14 @@ $price-levels: (
       }
     }
 
-    &.is-striked {
+    &.strike {
       &::before {
         transform: rotate(-12deg);
       }
     }
   }
 
-  &.is-striked {
+  &.strike {
     position: relative;
     color: getColor('neutral');
 
@@ -197,6 +199,7 @@ $price-levels: (
   align-items: baseline;
   position: relative;
   margin-left: -4px;
+
   &::before {
     content: '';
     border-color: transparent;
@@ -217,6 +220,7 @@ $price-levels: (
     height: 0;
     width: 0;
   }
+
   .tag-period {
     place-self: flex-end;
   }

package/framework/src/components/_progress-radial.scss

@@ -1,28 +1,28 @@
 .progress-radial {
-    background: radial-gradient(white 58%, transparent 51%),
-        conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
-    border-radius: 50%;
-    width: 124px;
-    height: 124px;
-    position: relative;
+  background: radial-gradient(white 58%, transparent 51%),
+  conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
+  border-radius: 50%;
+  width: 124px;
+  height: 124px;
+  position: relative;
 
-    .progress-radial-content {
-        border: 1px solid white;
-        border-radius: 50%;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
+  .progress-radial-content {
+    border: 1px solid white;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 
-    &.is-small {
-        width: 75px;
-        height: 75px;
-    }
+  &.is-small {
+    width: 75px;
+    height: 75px;
+  }
 }

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;
+      }
+    }
   }
-  
 }
-