@trilogy-ds/styles 0.0.1-alpha-prompt

package/framework/src/components/_loader.scss

@@ -0,0 +1,126 @@
+$loader-item-width: 60px;
+$loader-item-height: 30px;
+$loader-items-lateral-offset: -25px;
+$loader-items-bottom-offset: -40px;
+
+.loader {
+    width: $loader-item-width;
+    height: $loader-item-height;
+    background-color: transparent;
+    position: relative;
+
+    &::after,
+    &::before,
+    .loader-body {
+        content: '';
+        display: block;
+        width: $loader-item-width;
+        height: $loader-item-height;
+        border-radius: 9999px;
+    }
+
+    .loader-body {
+        visibility: hidden;
+        background-color: getColor('accent');
+        animation: 2.5s linear 0s forwards infinite top_item;
+    }
+
+    &::after,
+    &::before {
+        position: absolute;
+        bottom: $loader-items-bottom-offset;
+    }
+
+    &::before {
+        width: 20px;
+        height: 20px;
+        left: calc(50% - 10px);
+        z-index: zindex('small');
+        background-color: getColor('font');
+        animation: 2.5s linear 0s forwards infinite left_item;
+    }
+
+    &::after {
+        width: 20px;
+        height: 20px;
+        right: calc(50% - 20px);
+        background-color: getColor('main');
+        animation: 2.5s linear 0s forwards infinite right_item;
+    }
+
+    @keyframes top_item {
+        0% {
+            visibility: visible;
+            transform: scale(0, 0);
+        }
+
+        50% {
+            visibility: visible;
+            transform: scale(1, 0);
+        }
+
+        65%,
+        100% {
+            visibility: visible;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes left_item {
+        0% {
+            transform: rotate(55deg) scale(1);
+        }
+
+        45% {
+            width: $loader-item-width;
+            height: $loader-item-height;
+            transform: rotate(55deg) scale(1);
+        }
+
+        50%,
+        54% {
+            transform: rotate(55deg) scale(1.5);
+        }
+
+        60% {
+            transform: rotate(55deg) scale(1);
+        }
+
+        65%,
+        100% {
+            transform: rotate(55deg) scale(1);
+            width: $loader-item-width;
+            height: $loader-item-height;
+            left: $loader-items-lateral-offset;
+        }
+    }
+
+    @keyframes right_item {
+        0% {
+            transform: rotate(-55deg) scale(1);
+        }
+
+        45% {
+            width: $loader-item-width;
+            height: $loader-item-height;
+            transform: rotate(-55deg) scale(1);
+        }
+
+        50%,
+        54% {
+            transform: rotate(-55deg) scale(1.5);
+        }
+
+        60% {
+            transform: rotate(-55deg) scale(1);
+        }
+
+        65%,
+        100% {
+            transform: rotate(-55deg) scale(1);
+            width: $loader-item-width;
+            height: $loader-item-height;
+            right: $loader-items-lateral-offset;
+        }
+    }
+}

package/framework/src/components/_modal.scss

@@ -0,0 +1,232 @@
+$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
+);
+
+body:has(.modal.is-active) {
+  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;
+
+    content: '';
+    background-color: rgba(#000, 0.86);
+  }
+
+  &.is-active {
+    opacity: 1;
+    visibility: inherit;
+    transition: opacity 250ms ease-in-out,
+    visibility 0ms linear;
+
+    .modal-content {
+      transform: translateY(0);
+    }
+  }
+
+  @include tablet {
+    justify-content: center;
+    @each $name, $dimension in $modal-dimensions {
+      &.is-#{$name} {
+        .modal-content {
+          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%);
+
+    @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;
+      }
+    }
+
+    // If Close Icon Modal & Title Modal are sibling elements, override margin
+    .modal-close ~ .modal-title {
+      margin-top: -32px;
+    }
+
+    .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;
+      }
+
+      @include desktop {
+        font-size: $size-3-desktop;
+      }
+
+      .modal-close {
+        @include delete;
+
+        background-color: getColor('background');
+        display: block;
+        height: $modal-close-dimensions;
+        width: $modal-close-dimensions;
+        z-index: zindex('large');
+
+        #{$hoverSelector} {
+          background-color: getColor('neutral-fade');
+        }
+
+        &::after,
+        &::before {
+          background-color: getColor('font');
+        }
+
+        &:focus-visible,
+        &:focus:focus-visible {
+          outline: 2px solid getColor('font') !important;
+          outline-offset: 2px;
+        }
+        &:focus{
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    .modal-body {
+      padding: 0 $spacing-5 $spacing-5 ;
+    }
+    &:has(>.modal-footer) > .modal-body {
+      padding-bottom: 0;
+    }
+
+    .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;
+
+        .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);
+      }
+    }
+  }
+}

package/framework/src/components/_otp.scss

@@ -0,0 +1,73 @@
+.otp-list {
+  display: flex;
+  flex-wrap: nowrap;
+
+  .otp {
+    @include hover();
+    outline: none;
+    border: var(--border);
+    border-radius: var(--radius-small);
+    background: transparent;
+    width: 33px;
+    height: 40px;
+    margin: 4px 4px 0 4px;
+    text-align: center;
+    color: getColor('main');
+
+    &:first-child {
+      margin: 4px 4px 0 0;
+    }
+
+    &:last-child {
+      margin: 4px 0 0 4px;
+    }
+
+  }
+
+  &.is-danger {
+    .otp {
+      border: 1px solid getColor('error');
+    }
+  }
+
+  &.is-filled {
+    .otp {
+      color: getColor('font')
+    }
+  }
+
+  &.is-focus {
+    .otp {
+      border: 1px solid getColor('font');;
+      color: getColor('font')
+    }
+  }
+
+
+  &.is-error {
+    .otp {
+      border: 1px solid getColor('error');
+      color: getColor('font')
+    }
+  }
+
+}
+
+.otp-list:focus-within {
+  .otp {
+    border: 1px solid getColor('font');;
+    color: getColor('font');
+  }
+}
+
+.otp-list.is-error:focus-within {
+  .otp {
+    border: 1px solid getColor('error');
+    color: getColor('font');
+  }
+}
+
+.help {
+  font-size: $text-12;
+  margin-top: 4px;
+}

package/framework/src/components/_pagination.scss

@@ -0,0 +1,83 @@
+.pagination {
+  font-size: $size-normal;
+  margin: -2.5px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis {
+    @include control;
+    @include unselectable;
+    font-size: 1em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    justify-content: center;
+    margin: 2.5px;
+    text-align: center;
+  }
+
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis {
+    @include hover();
+    color: getColor('font');
+    min-width: 2.25em;
+    height: 35px;
+    width: 35px;
+    border-radius: 9999px;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    white-space: nowrap;
+
+    &[aria-disabled=true]{
+      border-color: transparent !important;
+    }
+  }
+
+  .pagination-list {
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .pagination-previous {
+    order: 1;
+  }
+
+  .pagination-list {
+    order: 2;
+  }
+
+  .pagination-next {
+    order: 3;
+  }
+
+  .pagination-link {
+    &[aria-current] {
+      background-color: getColor('font');
+      color: getColor('background');
+      #{$hoverSelector}, &:focus, &:focus-within {
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.25),
+            rgba(0, 0, 0, 0.25)
+        ) getColor('font') !important;
+      }
+    }
+  }
+
+  .pagination-ellipsis {
+    pointer-events: none;
+  }
+
+}
+
+