@trilogy-ds/styles 0.0.1-beta.9 → 0.0.1-calendar

package/framework/src/{elements → components}/_icon.scss

@@ -71,7 +71,7 @@ $size: (
         max-width: 100%;
     }
 
-    @each $name, $pair in $colors-brand-funcionnal {
+    @each $name, $pair in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
@@ -85,13 +85,13 @@ $size: (
     }
 
     &.is-circled {
-        border-radius: 100%;
+        border-radius: 9999px;
         text-align: center;
     }
 
     &.is-stretched {
         transform: skewX(-#{$icon-stretching-level});
-        border-top-right-radius: $radius-large;
+        border-top-right-radius: 9px;
         background-color: getColor('font');
 
       [class^="tri-"],
@@ -240,7 +240,7 @@ $size: (
             right: 0;
             width: $icon-dimensions-default;
             height: $icon-dimensions-default;
-            border-radius: 100%;
+            border-radius: 9999px;
             background-color: getColor('main');
         }
 

package/framework/src/components/_image.scss

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

package/framework/src/components/_index.scss

@@ -0,0 +1,48 @@
+@charset "utf-8";
+@import '../utilities/spacing';
+
+@import 'accordion';
+@import 'alert';
+@import 'autocomplete';
+@import 'autolayout';
+@import 'badge';
+@import 'box';
+@import 'breadcrumb';
+@import 'button';
+@import 'calendar';
+@import 'card';
+@import 'checkbox';
+@import 'chips';
+@import 'container';
+@import 'countdown';
+@import 'divider';
+@import 'fab';
+@import 'flex-box';
+@import 'icon';
+@import 'image';
+@import 'input';
+@import 'link';
+@import 'list';
+@import 'loader';
+@import 'modal';
+@import 'otp';
+@import 'pagination';
+@import 'popover';
+@import 'price';
+@import 'product-tour';
+@import 'progress';
+@import 'radio';
+@import 'range';
+@import 'scroll-view';
+@import 'segmented-control';
+@import 'select';
+@import 'stepper';
+@import 'sticker';
+@import 'switch';
+@import 'table';
+@import 'tabs';
+@import 'tag';
+@import 'text';
+@import 'textarea';
+@import 'timeline';
+@import 'title';

package/framework/src/components/_link.scss

@@ -0,0 +1,58 @@
+.link {
+  [disabled] {
+    @include disabledRulesWithoutBG;
+  }
+}
+
+.link:not([disabled]) {
+  @extend %link-states;
+
+  position: relative;
+  font-weight: $weight-normal;
+  color: getColor($link-colors);
+  box-decoration-break: clone;
+  text-decoration: underline;
+  text-decoration-thickness : 2px;
+  text-underline-offset: 4px;
+  cursor: pointer;
+
+  &.has-icon {
+    display: inline-block;
+    align-items: center;
+
+    &::after {
+      width: calc(100% - 48px);
+      bottom: 5.5px;
+    }
+
+    .icon {
+      vertical-align: middle;
+    }
+  }
+
+  &.is-inverted {
+    color: getColor('background');
+
+    &.has-icon {
+      > .icon {
+        color: getColor('background');
+      }
+    }
+  }
+
+  @include touch {
+    white-space: normal !important;
+    box-decoration-break: clone;
+    display: inline;
+  }
+}
+
+.text .link:not([disabled]) {
+  text-underline-offset: 2px;
+  text-decoration: underline;
+  text-decoration-thickness : 1px;
+  &:hover {
+    font-weight: $weight-normal;
+    filter: brightness(0.8);
+  }
+}

package/framework/src/components/_list.scss

@@ -0,0 +1,66 @@
+// Bullet list classiques
+ol.list {
+  counter-reset: customCounter;
+
+  & > li.list-item {
+    counter-increment: customCounter;
+    &:not(:has(.icon)) {
+      &::before{
+        content: counter(customCounter) ". ";
+        margin-right:$spacing-4;
+        font-weight: $weight-bold;
+        font-size: $text-14 !important;
+        font-family: $family-secondary;
+        line-height: 1.5 !important;
+
+      }
+    }
+  }
+}
+
+ul.list {
+  li.list-item {
+    &:not(:has(.icon)) {
+      &::before{
+        content:'.';
+        margin-right:$spacing-4;
+        font-weight: 900;
+        font-size: $text-24;
+        line-height: 8px;
+      }
+    }
+  }
+}
+
+ul.list,
+ol.list {
+  display: grid;
+  row-gap: $spacing-3;
+
+  li.list-item {
+    display: flex;
+    &:has(.icon) {
+      list-style: none;
+      display: flex;
+    }
+    .icon {
+      margin-right: $spacing-2;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+    .list-item-content {
+      flex: 1; 
+    }
+  }
+
+  &.has-divider {
+    li {
+      border-bottom: var(--border);
+      padding-bottom: $spacing-3;
+      &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+    }
+  }
+}

package/framework/src/{elements → components}/_loader.scss

@@ -16,12 +16,12 @@ $loader-items-bottom-offset: -40px;
         display: block;
         width: $loader-item-width;
         height: $loader-item-height;
-        border-radius: 50%;
+        border-radius: 9999px;
     }
 
     .loader-body {
         visibility: hidden;
-        background-color: getColor('alternate');
+        background-color: getColor('accent');
         animation: 2.5s linear 0s forwards infinite top_item;
     }
 

package/framework/src/components/_modal.scss

@@ -2,207 +2,231 @@ $modal-content-width: 640px !default;
 $modal-content-margin-mobile: 20px !default;
 $modal-close-dimensions: 40px !default;
 $modal-dimensions: (
-    'xsmall': 40vw,
-    'small': 50vw,
-    'medium': 60vw,
-    'large': 70vw,
-    'xlarge': 80vw
+  'xsmall': 40vw,
+  'small': 50vw,
+  'medium': 60vw,
+  'large': 70vw,
+  'xlarge': 80vw
 );
 
 body:has(.modal.is-active) {
-    height: 100%;
-    overflow: hidden
+  height: 100%;
+  overflow: hidden
 }
 
 .modal {
+  @include overlay;
+
+  position: fixed;
+  z-index: zindex('modal');
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 250ms ease-in-out,
+  visibility 0ms linear 250ms;
+
+  // overlay
+  &::after {
     @include overlay;
 
-    position: fixed;
-    z-index: zindex('modal');
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    visibility: hidden;
-    opacity: 0;
-    transition:
-        opacity 250ms ease-in-out,
-        visibility 0ms linear 250ms;
-
-    // overlay
-    &::after {
-        @include overlay;
+    content: '';
+    background-color: rgba(#000, 0.86);
+  }
+
+  &.is-active {
+    opacity: 1;
+    visibility: inherit;
+    transition: opacity 250ms ease-in-out,
+    visibility 0ms linear;
 
-        content: '';
-        background-color: rgba(#000, 0.86);
+    .modal-content {
+      transform: translateY(0);
     }
+  }
 
-    &.is-active {
-        opacity: 1;
-        visibility: inherit;
-        transition:
-            opacity 250ms ease-in-out,
-            visibility 0ms linear;
+  @include tablet {
+    justify-content: center;
+    @each $name, $dimension in $modal-dimensions {
+      &.is-#{$name} {
         .modal-content {
-            transform: translateY(0);
+          width: $dimension;
         }
+      }
     }
+  }
+
+  // spécificité pour le bouton en position: relative par défaut
+  .button {
+    position: static;
+  }
+
+  .modal-content {
+    background-color: getColor('background');
+    border-radius: var(--radius) var(--radius) 0 0;
+    color: getColor('font');
+    overflow: auto;
+    position: relative;
+    margin: 0 $modal-content-margin-mobile;
+    max-height: calc(100vh - 40px);
+    width: 100%;
+    z-index: zindex('tiny');
+    transition: transform ease-in-out 250ms;
+    transform: translateY(50%);
 
-    // gestion des tailles
     @include tablet {
-        justify-content: center;
-        @each $dimension in $dimensions-extended {
-            &.is-#{$dimension} {
-                .modal-content {
-                    width: map-get($modal-dimensions, $dimension);
-                }
-            }
-        }
+      max-height: calc(100vh - 120px);
+      width: $modal-content-width;
+      border-radius: $radius;
     }
 
-    // spécificité pour le bouton en position: relative par défaut
-    .button {
-        position: static;
+    // Annulation des propriétés du composant box, se trouvant dans une modal
+    > .box {
+      background-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+      padding: 0;
+      max-height: inherit;
+
+      .box-content {
+        background-color: transparent;
+        border-radius: 0;
+        padding: 0;
+        padding-bottom: 30px;
+        margin: 0;
+        text-align: inherit;
+      }
     }
 
-    // ancien overlay : n'a plus d'utilité mais conservée pour rétrocompatibilité
-    .modal-background {
-        display: none;
+    // If Close Icon Modal & Title Modal are sibling elements, override margin
+    .modal-close ~ .modal-title {
+      margin-top: -32px;
     }
 
-    .modal-content {
-        background-color: getColor('background');
-        border-radius: $radius $radius 0 0;
-        color: getColor('font');
-        overflow: auto;
-        position: relative;
-        padding: 0 30px 30px;
-        margin: 0 $modal-content-margin-mobile;
-        max-height: calc(100vh - 40px);
+    .modal-header {
+      padding: $spacing-5;
+      color: getColor('font');
+      font-family: $family-primary;
+      font-size: $size-3;
+      font-weight: $weight-semibold;
+      line-height: 1.1;
+      background-color: getColor('background');
+      z-index: zindex('medium');
+      position: sticky;
+      top: 0;
+      width: 100%;
+      word-wrap: break-word;
+      display: flex;
+      justify-content: space-between;
+
+      &:has(.modal-close) {
+        flex-direction: row-reverse;
+      }
+
+      &:has(.icon) {
         text-align: center;
-        width: 100%;
-        z-index: zindex('tiny');
-        transition: transform ease-in-out 250ms;
-        transform: translateY(100%);
-
-        &.is-fullwidth {
-          width: 100% !important;
-        }
+      }
 
-        @include tablet {
-            max-height: calc(100vh - 120px);
-            width: $modal-content-width;
-            border-radius: $radius;
-        }
-
-        // Annulation des propriétés du composant box, se trouvant dans une modal
-        > .box {
-            background-color: transparent;
-            border-radius: 0;
-            box-shadow: none;
-            padding: 0;
-            max-height: inherit;
-
-            .box-content {
-                background-color: transparent;
-                border-radius: 0;
-                padding: 0;
-                padding-bottom: 30px;
-                margin: 0;
-                text-align: inherit;
-            }
-        }
-
-        .modal-footer {
-            position: sticky;
-            background: getColor('background');
-            bottom: -30px;
-            margin: 30px -30px -30px;
-            padding: 20px 30px;
-        }
+      @include desktop {
+        font-size: $size-3-desktop;
+      }
 
-        // If Close Icon Modal & Title Modal are sibling elements, override margin
-        .modal-close ~ .modal-title   {
-          margin-top: -32px;
-        }
-    }
-
-    .modal-close {
+      .modal-close {
         @include delete;
 
         background-color: getColor('background');
-        position: sticky;
-        top: 20px;
-        left: 100%;
         display: block;
         height: $modal-close-dimensions;
         width: $modal-close-dimensions;
-        z-index: zindex('medium');
+        z-index: zindex('large');
 
-        &:hover {
-            background-color: getColor('grey-light');
+        #{$hoverSelector} {
+          background-color: getColor('neutral-fade');
         }
 
         &::after,
         &::before {
-            background-color: getColor('font');
+          background-color: getColor('font');
         }
-    }
 
-    .modal-title {
-        color: getColor('font');
-        font-family: $family-sans-serif;
-        font-size: $size-3;
-        font-weight: $weight-semibold;
-        line-height: 1.1;
-        background-color: getColor('background');
-        z-index: zindex('small');
-        position: sticky;
-        top: 0;
-        padding: 20px 0;
-        width: 100%;
-        word-wrap: break-word;
-
-        @include desktop {
-            font-size: $size-3-desktop;
+        &:focus-visible,
+        &:focus:focus-visible {
+          outline: 2px solid getColor('font') !important;
+          outline-offset: 2px;
+        }
+        &:focus{
+          background-color: transparent !important;
         }
+      }
     }
 
-    // version "panel" de la modal
-    &.is-panel {
-        &::after {
-            position: fixed;
-        }
+    .modal-body {
+      padding: 0 $spacing-5 $spacing-5 ;
+    }
+    &:has(>.modal-footer) > .modal-body {
+      padding-bottom: 0;
+    }
 
-        .modal-content {
-            border-radius: 0;
-            position: fixed;
-            right: 0;
-            top: 0;
-            min-height: 100%;
-            height: 100%;
-            max-height: none;
-            margin: 0;
-            text-align: left;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            transform: translateX(100%);
-
-            @include tablet {
-                max-width: 375px;
-            }
-
-            .modal-footer {
-                margin-top: auto;
-            }
-        }
+    .modal-footer {
+      padding: $spacing-5;
+      position: sticky;
+      width: 100%;
+      background: getColor('background');
+      bottom: 0;
+
+      .buttons {
+        display: flex;
+        flex-direction: column-reverse;
+      }
+
+      @include tablet {
+        display: flex;
+        justify-content: flex-end;
 
-        &.is-active {
-            .modal-content {
-                transform: translateX(0);
-            }
+        .buttons {
+          flex-direction: row;
         }
+      }
+    }
+  }
+
+  // version "panel" de la modal
+  &.is-panel {
+    &::after {
+      position: fixed;
+    }
+
+    .modal-content {
+      border-radius: 0;
+      position: fixed;
+      right: 0;
+      top: 0;
+      min-height: 100%;
+      height: 100%;
+      max-height: none;
+      margin: 0;
+      text-align: left;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      transform: translateX(100%);
+
+      @include tablet {
+        max-width: 375px;
+      }
+
+      .modal-footer {
+        margin-top: auto;
+      }
+    }
+
+    &.is-active {
+      .modal-content {
+        transform: translateX(0);
+      }
     }
+  }
 }