@trilogy-ds/styles 0.0.1-beta.8 → 0.0.3-beta-v4

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/_input-gauge.scss

@@ -1,37 +1,36 @@
 
-    .field .security-gauge-container {
-        width: 100%;
-        .security-gauge {
-            height: 4px;
-            background: getColor('grey-disabled');
-            border-radius: 4px;
-            margin: 8px 0;
-            .gauge {
-                height: 100%;
-                border-radius: 4px;
-            }
-        }
+.field .security-gauge-container {
+  width: 100%;
 
-        .security-gauge-verifies {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .security {
-                display: flex;
-                align-items: center;
-                margin-bottom: 4px;
-                .icon {
-                    position: relative;
-                    color: getColor('grey');
-                    width: 16px;
-                    margin-right: 8px;
-                    font-size: 16px;
-                    margin-bottom:  -1px;
+  .security-gauge {
+    height: 4px;
+    background: getColor('disabled');
+    border-radius: var(--radius-small);
+    margin: 8px 0;
 
-                    .is-success {
-                        background-color: getColor('success')
-                    }
-                }
-            }
-        }
+    .gauge {
+      height: 100%;
+      border-radius: var(--radius-small);
     }
+  }
+
+  .security-gauge-verifies {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .security {
+      display: flex;
+      align-items: center;
+      margin-bottom: 4px;
+
+      .icon {
+        position: relative;
+        width: 16px;
+        margin-right: 8px;
+        font-size: 16px;
+        margin-bottom: -1px;
+      }
+    }
+  }
+}

package/framework/src/elements/_input-icons.scss

@@ -1,41 +1,43 @@
 .field {
 
-    .has-icons-left {
-        input {
-            padding-left: 45px;
-        }
-        label {
-            left: 45px;
-        }
-        .icon-left
-         {
-            position: absolute;
-            height: 100%;
-            width: 45px;
-            left: 0;
+  .has-icons-left {
+    input {
+      padding-left: 45px;
+
+      &:active,
+      &:focus,
+      &:focus-visible:not(.has-icons-left):not(disabled) {
+        padding-left: 44px !important;
+      }
 
-            i {
-                font-size: 20px;
-            }
+      label {
+        left: 45px;
+      }
+      .icon-left {
+        position: absolute;
+        height: 100%;
+        width: 45px;
+        left: 0;
+        i {
+          font-size: 20px;
         }
+      }
 
 
     }
+  }
+  .has-icons-right {
+    .icon-right {
+      position: absolute;
+      height: 100%;
+      width: 45px;
+      z-index: 10;
+      right: 0;
+      left: auto;
 
-    .has-icons-right {
-        .icon-right
-         {
-            position: absolute;
-            height: 100%;
-            width: 45px;
-            z-index: 10;
-            right: 0;
-            left: auto;
-            i {
-                font-size: 20px;
-            }
-        }
+      i {
+        font-size: 20px;
+      }
     }
-
-
+  }
 }

package/framework/src/elements/_link.scss

@@ -1,79 +1,52 @@
-.link:not([disabled]) {
-    position: relative;
-    font-size: 14px;
-    font-weight: $weight-medium;
-    color: getColor('alternate');
-    box-decoration-break: clone;
-    padding: $spacing-2;
-    margin: -8px;
-    text-decoration: underline;
-    cursor: pointer;
+.link {
+  [disabled] {
+    @include disabledRulesWithoutBG;
+  }
+}
 
-    &:not(p .link) {
-        text-decoration-line: underline;
-        text-decoration-style: solid;
-        text-decoration-thickness: 2px;
-        text-underline-offset: 4px;
-    }
+.link:not([disabled]) {
+  @extend %link-states;
 
-    &:hover {
-        filter: brightness(70%);
-    }
+  position: relative;
+  font-weight: $weight-normal;
+  color: getColor($link-colors);
+  box-decoration-break: clone;
+  text-decoration: underline 2px solid;
+  text-underline-offset: 4px;
+  cursor: pointer;
 
-      &:focus,
-      &:focus-visible,
-      &.is-focused,
-      &:active,
-      &.is-active {
-        filter: brightness(50%);
-      }
+  &.has-icon {
+    display: inline-flex;
+    align-items: center;
 
-    @include desktop {
-        &:not(.is-static) {
-            display: inline-flex;
-            border-bottom-width: 0;
-        }
+    &::after {
+      width: calc(100% - 48px);
+      bottom: 5.5px;
     }
+  }
 
-    &.has-icon {
-        display: inline-flex;
-        align-items: center;
-
-        &::after {
-            width: calc(100% - 48px);
-            bottom: 5.5px;
-        }
-    }
+  &.is-inverted {
+    color: getColor('background');
 
-    &.is-static::after {
-        margin-bottom: 4px;
-    }
-
-    &.is-inverted {
+    &.has-icon {
+      > .icon {
         color: getColor('background');
-
-      &.has-icon {
-        > .icon {
-          color: getColor('background');
-        }
       }
     }
+  }
 
-    @include touch {
-        white-space: normal !important;
-        box-decoration-break: clone;
-        display: inline;
-    }
+  @include touch {
+    white-space: normal !important;
+    box-decoration-break: clone;
+    display: inline;
+  }
 }
 
-@keyframes sliding-link {
-    50% {
-        left: 100%;
-        right: 0;
-    }
-
-    50.01% {
-        left: 0;
-        right: 100%;
-    }
+.text .link:not([disabled]) {
+  text-underline-offset: 2px;
+  text-decoration: underline 1px solid;
+  &:hover {
+    font-weight: $weight-normal;
+    filter: brightness(0.8);
+  }
 }

package/framework/src/elements/_list.scss

@@ -1,61 +1,62 @@
 // Bullet list classiques
-ul.list , ol.list{
-    margin-left: 30px;
-    li {
-        margin-bottom: 5px;
+ul.list,
+ol.list {
+  list-style: disc inside;
+  display: grid;
+  row-gap: $spacing-3;
+
+  li.list-item {
+    &:has(.icon) {
+      list-style: none;
+      display: flex;
     }
-}
-
-ul.list {
-  list-style: disc;
 
-  ul.list {
-    list-style: circle;
-  }
-}
-
-// Listes avec icônes
-ul.icon-list > li {
-    display: flex;
-    align-items: center;
-
-    span[disabled] {
-        opacity: 0.5;
+    .icon {
+      margin-right: $spacing-2;
+      justify-content: flex-start;
+      align-items: flex-start;
     }
 
-    .icon {
-        flex: none;
+    .list-item-content {
+      display: inline-grid;
+
+      &_puce {
+        margin-right: $spacing-4;
+      }
     }
-}
 
-dl.dl {
-    dt {
-        font-weight: $weight-semibold;
-        margin-bottom: 5px;
+    &.has-action {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-        &:not(:first-child) {
-            margin-top: 20px;
+      .list-item_action {
+        & > :first-child {
+          margin: 0 !important;
+          cursor: pointer;
         }
-    }
 
-    dd {
-        color: getColor('font');
-        font-size: $size-7;
+        .radio label.radio-label:empty,
+        .checkbox label.checkbox-label:empty {
+          padding: $spacing-1 $spacing-1 $spacing-1 calc($spacing-1 + 10px);
+        }
+      }
     }
 
-    &:not(:first-child) {
-        margin-top: 20px;
+    div b {
+      margin-bottom: $spacing-2;
     }
+  }
 
-    &.is-alternate {
-        dt {
-            color: getColor('font');
-            font-size: $size-7;
-        }
+  &.has-divider {
+    li {
+      border-bottom: var(--border);
+      padding-bottom: $spacing-3;
 
-        dd {
-            color: getColor('font');
-            font-size: $size-6;
-        }
+      &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
     }
+  }
 }

package/framework/src/elements/_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/elements/_other.scss

@@ -5,40 +5,3 @@
 .delete {
     @include delete;
 }
-
-.heading {
-    display: block;
-    font-size: 11px;
-    letter-spacing: 1px;
-    margin-bottom: 5px;
-    text-transform: uppercase;
-}
-
-.highlight {
-    @include block;
-
-    font-weight: $weight-normal;
-    max-width: 100%;
-    overflow: hidden;
-    padding: 0;
-
-    pre {
-        overflow: auto;
-        max-width: 100%;
-    }
-}
-
-.number {
-    align-items: center;
-    background-color: getColor('grey-light');
-    border-radius: $radius-rounded;
-    display: inline-flex;
-    font-size: $size-medium;
-    height: 2em;
-    justify-content: center;
-    margin-right: 15px;
-    min-width: 2.5em;
-    padding: 2.5px 5px;
-    text-align: center;
-    vertical-align: top;
-}

package/framework/src/elements/_paragraph.scss

@@ -12,90 +12,56 @@ $text-levels-mobile: (
 );
 
 
-.paragraph {
-    &.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);
-            $margin-bottom: nth($text-level, 3);
-
-            &.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-level-#{$i} {
-                    margin-bottom: $margin-bottom;
-                }
-            }
-        }
-
-        &.is-wrapped {
-            word-break: break-word;
-        }
-
-        &.bold {
-            font-weight: $weight-bold;
-        }
-    }
-}
-
-
-.paragraph,
 .text {
-    & a.link:not([disabled]),
-    a {
-        padding: $spacing-1;
-        margin: -4px;
-        text-decoration: underline;
-        font-size: unset;
-        font-weight: $weight-medium;
+  @each $text-level in $text-levels {
+    $i: index($text-levels, $text-level);
+    $font-size: nth($text-level, 1);
+    $line-height: nth($text-level, 2);
+
+    &.is-level-#{$i} {
+      font-size: $font-size;
+      line-height: $line-height;
+      font-family: $family-primary;
+    }
+  }
 
-        &::after {
-            content: none;
-        }
+  &.is-inverted {
+    color: getColor('background');
+  }
 
-        &.is-static::after {
-            margin-bottom: 0;
-        }
+  @include mobile {
+    @each $text-level-mobile in $text-levels-mobile {
+      $i: index($text-levels-mobile, $text-level-mobile);
     }
-}
+  }
 
-.paragraph:not(:last-child) {
-    margin-bottom: 10px;
+  &.is-wrapped {
+    word-break: break-word;
+  }
+
+  &.bold {
+    font-weight: $weight-bold;
+  }
 }
 
 .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;
 }