@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/components/_level.scss

@@ -0,0 +1,120 @@
+.level {
+    @include block;
+
+    align-items: center;
+    justify-content: space-between;
+
+    code {
+        border-radius: $radius;
+    }
+
+    img {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    // Modifiers
+    &.is-mobile {
+        display: flex;
+
+        .level-left,
+        .level-right {
+            display: flex;
+        }
+
+        .level-left + .level-right {
+            margin-top: 0;
+        }
+
+        .level-item {
+            margin-right: 7.4px;
+
+            &:not(:last-child) {
+                margin-bottom: 0;
+            }
+
+            &:not(.is-narrow) {
+                flex-grow: 1;
+            }
+        }
+    }
+
+    // Responsiveness
+    @include tablet {
+        display: flex;
+
+        & > .level-item {
+            &:not(.is-narrow) {
+                flex-grow: 1;
+            }
+        }
+    }
+}
+
+.level-item {
+    align-items: center;
+    display: flex;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: center;
+
+    .title,
+    .subtitle {
+        margin-bottom: 0;
+    }
+
+    // Responsiveness
+    @include mobile {
+        &:not(:last-child) {
+            margin-bottom: 7.5px;
+        }
+    }
+}
+
+.level-left,
+.level-right {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .level-item {
+        // Modifiers
+        &.is-flexible {
+            flex-grow: 1;
+        }
+
+        // Responsiveness
+        @include tablet {
+            &:not(:last-child) {
+                margin-right: 7.5px;
+            }
+        }
+    }
+}
+
+.level-left {
+    align-items: center;
+    justify-content: flex-start;
+
+    // Responsiveness
+    @include mobile {
+        & + .level-right {
+            margin-top: 15px;
+        }
+    }
+
+    @include tablet {
+        display: flex;
+    }
+}
+
+.level-right {
+    align-items: center;
+    justify-content: flex-end;
+
+    // Responsiveness
+    @include tablet {
+        display: flex;
+    }
+}

package/framework/src/components/_media.scss

@@ -0,0 +1,64 @@
+.media {
+    align-items: flex-start;
+    display: flex;
+    text-align: left;
+
+    .content:not(:last-child) {
+        margin-bottom: 7.5px;
+    }
+
+    .media {
+        border-top: 1px solid getColor('grey-lighter');
+        display: flex;
+        padding-top: 7.5px;
+
+        .content:not(:last-child),
+        .control:not(:last-child) {
+            margin-bottom: 5px;
+        }
+
+        .media {
+            padding-top: 5px;
+
+            & + .media {
+                margin-top: 5px;
+            }
+        }
+    }
+
+    & + .media {
+        border-top: 1px solid getColor('grey-lighter');
+        margin-top: 10px;
+        padding-top: 10px;
+    }
+
+    // Sizes
+    &.is-large {
+        & + .media {
+            margin-top: 15px;
+            padding-top: 15px;
+        }
+    }
+}
+
+.media-left,
+.media-right {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.media-left {
+    margin-right: 10px;
+}
+
+.media-right {
+    margin-left: 10px;
+}
+
+.media-content {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    text-align: left;
+}

package/framework/src/components/_menu.scss

@@ -0,0 +1,213 @@
+@use "sass:math";
+
+$menu-top: 60px;
+$menu-top-desktop: 80px;
+
+$menu-item-height: 3.125em;
+$menu-item-line-height: math.div($menu-item-height, 2);
+$menu-dropdown-item-height: 2em;
+
+.menu {
+    font-size: $text-14;
+
+    &.is-small {
+        font-size: $size-small;
+    }
+
+    &.is-large {
+        font-size: $size-large;
+    }
+
+    &.is-fixed {
+        position: fixed;
+        max-width: 374px;
+    }
+
+    li {
+        border-bottom: 1px solid getColor('grey-lighter');
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .navbar.navbar-header .navbar-menu & {
+        top: $menu-top;
+
+        @include desktop {
+            top: $menu-top-desktop;
+        }
+    }
+
+}
+
+.menu-title {
+    padding-left: 10px;
+}
+
+.menu-list {
+    line-height: 1.25;
+    padding: 10px 0;
+    border-bottom: 1px solid getColor('grey-light');
+
+    a {
+        @include unselectable;
+
+        color: getColor('font');
+        padding: 10px 0.75em;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        text-decoration: inherit;
+
+        &:hover {
+            background-color: transparent;
+            color:  getColor('alternate');
+        }
+
+        &.with-arrow::after {
+            content: "";
+            mask-image: url('./assets/icons/all/arrow-right.svg');
+            background-color: getColor('font');
+            right: 0.75em;
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            align-self: center;
+        }
+
+        &.is-active {
+            background-color: getColor('grey-light');
+            color: getColor('alternate');
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 4px;
+                height: 100%;
+                background-color: getVariantColor('alternate',2);
+            }
+        }
+
+        .badge {
+            margin-top: 1px;
+        }
+
+        .icon {
+            margin: -1px 10px 0 0;
+        }
+    }
+
+    li {
+        ul {
+            margin: 0.75em;
+            padding-left: 0.75em;
+        }
+    }
+
+    &.dropdown-menu-list,
+    &.aside-menu-list {
+        color: getColor('font');
+        border: 0;
+        background-color: getColor('background');
+        padding: 0;
+
+        li {
+            ul {
+                padding: 0;
+                margin: 0.4em 0 0.8em;
+
+                li {
+                    padding: 0;
+
+                    a {
+                        min-height: $menu-dropdown-item-height;
+                        line-height: $menu-dropdown-item-height;
+                        padding: 0 2.4em;
+                    }
+                }
+            }
+        }
+
+        li.is-active a,
+        a.is-active {
+            box-shadow: inset 4px 0 0 0 currentColor;
+            color: getVariantColor('alternate',2);
+            background: inherit;
+        }
+
+        a {
+            padding: 0 1.2em;
+            color: getColor('font');
+            min-height: $menu-dropdown-item-height;
+            line-height: $menu-dropdown-item-height;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+
+            &:hover {
+                color: getVariantColor('alternate',2);
+                background-color: getColor('grey-lighter');
+            }
+
+            sub {
+                display: inline-block;
+                height: 20px;
+                margin: 3px;
+            }
+
+            .tag {
+                height: 20px;
+                padding: 5px;
+                margin-left: 5px;
+            }
+        }
+    }
+
+    &.aside-menu-list {
+        border-right: 1px solid getColor('grey-light');
+
+        a {
+            padding-left: 1.2em;
+            padding-top: 0.8em;
+            min-height: $menu-item-height;
+            line-height: $menu-item-line-height;
+            color: getColor('font');
+
+            &:hover {
+                color: getVariantColor('alternate',2);
+                background-color: getColor('grey-lighter');
+            }
+        }
+    }
+}
+
+.menu-label {
+    color: getVariantColor('alternate',2);
+    font-size: 14px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    font-weight: $weight-semibold;
+    padding-bottom: 1em;
+    border-bottom: 2px solid currentColor;
+
+    &:not(:first-child) {
+        margin-top: 1em;
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 1em;
+    }
+}
+
+aside.menu {
+    > div {
+        padding: 10px;
+    }
+}
+
+.is-sidebar-menu ul.menu-list {
+    height: 100%;
+}

package/framework/src/components/_modal.scss

@@ -0,0 +1,201 @@
+$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);
+        }
+    }
+
+    // gestion des tailles
+    @include tablet {
+        justify-content: center;
+        @each $dimension in $dimensions-extended {
+            &.is-#{$dimension} {
+                .modal-content {
+                    width: map-get($modal-dimensions, $dimension);
+                }
+            }
+        }
+    }
+
+    // spécificité pour le bouton en position: relative par défaut
+    .button {
+        position: static;
+    }
+
+    // ancien overlay : n'a plus d'utilité mais conservée pour rétrocompatibilité
+    .modal-background {
+        display: none;
+    }
+
+    .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);
+        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;
+        }
+
+        // If Close Icon Modal & Title Modal are sibling elements, override margin
+        .modal-close ~ .modal-title   {
+          margin-top: -32px;
+        }
+    }
+
+    .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');
+
+        &:hover {
+            background-color: getColor('grey-light');
+        }
+
+        &::after,
+        &::before {
+            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;
+        }
+    }
+
+    // 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;
+
+            @include tablet {
+                max-width: 375px;
+            }
+
+            .modal-footer {
+                margin-top: auto;
+            }
+        }
+    }
+}

package/framework/src/components/_otp.scss

@@ -0,0 +1,92 @@
+.otp-list {
+  display: flex;
+  flex-wrap: nowrap;
+
+  .otp {
+    outline: none;
+    border: 1px solid currentColor;
+    border-radius: 4px;
+    background: transparent;
+    width: 33px;
+    height: 40px;
+    margin: 4px 4px 0 4px;
+    text-align: center;
+    color: getColor('grey');
+    &:first-child {
+      margin: 4px 4px 0 0;
+    }
+
+    &:last-child {
+      margin: 4px 0 0 4px;
+    }
+
+  }
+
+  &.is-danger {
+    .otp {
+      border: 2px solid  getColor('error');
+    }
+  }
+
+  &.is-tertiary {
+    .otp {
+      border: 2px solid getColor('font');
+    }
+  }
+
+  &.is-filled {
+    .otp {
+      color: getColor('font')
+    }
+  }
+
+  &.is-focus {
+    .otp {
+      border: 2px solid getColor('alternate');;
+      color: getColor('font')
+    }
+  }
+
+
+  &.is-error {
+    .otp {
+      border: 2px solid getColor('error');
+      color: getColor('font')
+    }
+  }
+
+  &.is-tertiary {
+    .otp {
+      border: 2px solid getColor('font');
+    }
+  }
+
+  &.is-disabled {
+    .otp {
+      border: none !important;
+      background: getColor('grey-disabled');
+      pointer-events: none;
+      color: getColor('grey');
+    }
+  }
+
+}
+
+.otp-list:focus-within {
+  .otp {
+    border: 2px solid getColor('alternate');;
+    color: getColor('font');
+  }
+}
+
+.otp-list.is-error:focus-within {
+  .otp {
+    border: 2px solid getColor('error');
+    color: getColor('font');
+  }
+}
+
+.otp-error-message {
+  font-size: $text-12;
+  margin-top: 4px;
+}