@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

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,53 @@
 // Bullet list classiques
-ul.list , ol.list{
-    margin-left: 30px;
-    li {
-        margin-bottom: 5px;
+ul.list,
+ol.list {
+  list-style-type: none;
+
+  li {
+    padding: $spacing-4;
+    position: relative;
+
+    .list-item_content {
+      display: flex;
+      align-items: center;
+      &_puce {
+        margin-right: $spacing-4;
+      }
     }
-}
-
-ul.list {
-  list-style: disc;
 
-  ul.list {
-    list-style: circle;
-  }
-}
 
-// Listes avec icônes
-ul.icon-list > li {
-    display: flex;
-    align-items: center;
+    &.has-action {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      @include hover();
 
-    span[disabled] {
-        opacity: 0.5;
-    }
+      .list-item_action {
+        & >:first-child {
+          margin: 0px !important;
+          cursor: pointer;
+        }
 
-    .icon {
-        flex: none;
-    }
-}
+        .radio label.radio-label:empty, 
+        .checkbox label.checkbox-label:empty {
+          padding: $spacing-1 $spacing-1 $spacing-1 calc($spacing-1 + 10px);        
+        }
 
-dl.dl {
-    dt {
-        font-weight: $weight-semibold;
-        margin-bottom: 5px;
+      } 
 
-        &:not(:first-child) {
-            margin-top: 20px;
-        }
     }
 
-    dd {
-        color: getColor('font');
-        font-size: $size-7;
+    div b {
+      margin-bottom: $spacing-2 ;
     }
 
-    &:not(:first-child) {
-        margin-top: 20px;
+    .divider {
+      position: absolute;
+      bottom: calc(-1 * $spacing-4);
+      width: 100%;
     }
 
-    &.is-alternate {
-        dt {
-            color: getColor('font');
-            font-size: $size-7;
-        }
-
-        dd {
-            color: getColor('font');
-            font-size: $size-6;
-        }
-    }
+  }
+  
 }
+

package/framework/src/elements/_loader.scss

@@ -16,7 +16,7 @@ $loader-items-bottom-offset: -40px;
         display: block;
         width: $loader-item-width;
         height: $loader-item-height;
-        border-radius: 50%;
+        border-radius: 9999px;
     }
 
     .loader-body {

package/framework/src/elements/_other.scss

@@ -30,8 +30,8 @@
 
 .number {
     align-items: center;
-    background-color: getColor('grey-light');
-    border-radius: $radius-rounded;
+    background-color: getBGColor('neutral-dark');
+    border-radius: 9999px;
     display: inline-flex;
     font-size: $size-medium;
     height: 2em;

package/framework/src/elements/_paragraph.scss

@@ -12,8 +12,7 @@ $text-levels-mobile: (
 );
 
 
-.paragraph {
-    &.text {
+.text {
         @each $text-level in $text-levels {
             $i: index($text-levels, $text-level);
             $font-size: nth($text-level, 1);
@@ -26,10 +25,10 @@ $text-levels-mobile: (
                 font-family: $family-primary;
                 margin-bottom: $margin-bottom;
             }
+        }
 
-            &.is-inverted {
-                color: getColor('background');
-            }
+        &.is-inverted {
+          color: getColor('background');
         }
 
         @include mobile {
@@ -51,28 +50,7 @@ $text-levels-mobile: (
             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;
-
-        &::after {
-            content: none;
-        }
 
-        &.is-static::after {
-            margin-bottom: 0;
-        }
-    }
-}
 
 .paragraph:not(:last-child) {
     margin-bottom: 10px;

package/framework/src/elements/_progress.scss

@@ -9,7 +9,7 @@ $progressbar-small: 5px;
   @include block;
 
   border: none;
-  border-radius: $radius-rounded;
+  border-radius: 9999px;
   display: block;
   height: $progressbar-height;
   overflow: hidden;
@@ -18,8 +18,10 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
+  background-color: getBGColor('hovered');
+
   &::-webkit-progress-bar {
-    background-color: getColor('grey-light');
+    background-color: getBGColor('font');
     border-radius: $progressbar-height;
   }
 
@@ -33,12 +35,6 @@ $progressbar-small: 5px;
     border-radius: $progressbar-height;
   }
 
-  &::-ms-fill {
-    background-color: getColor('font');
-    border: none;
-    border-radius: $progressbar-height;
-  }
-
   &:not(:last-child) {
     margin-bottom: 7.5px;
   }
@@ -71,12 +67,11 @@ $progressbar-small: 5px;
 
 .progress.is-stacked {
   display: flex;
-  background-color: getColor('grey-light');
   border-radius: $progressbar-height;
 
   .progress-bar {
     height: $progressbar-height;
-    background-color: getVariantColor('alternate',2);
+    background-color: getColor('font');
 
     &:first-child {
       border-radius: $progressbar-height 0 0 $progressbar-height;
@@ -100,10 +95,10 @@ $progressbar-small: 5px;
 
 // Progress Bar circle
 $progress-circle-slices: (
-  secondary: getColor('alternate'),
+  secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getColor('grey-light')
+  empty: getBGColor('neutral-dark')
 );
 
 .progress-circle {
@@ -113,7 +108,7 @@ $progress-circle-slices: (
   --progress-circle-spacing-color: 255, 255, 255;
   --progress-circle-spacing-deg: calc(1deg * var(--progress-circle-spacing));
 
-  border-radius: 50%;
+  border-radius: 9999px;
   height: var(--progress-circle-size);
   margin: 40px;
   position: relative;
@@ -151,8 +146,8 @@ $progress-circle-slices: (
 
 .progress-circle-slice::before,
 .progress-circle-slice::after {
-  border: var(--progress-circle-border-width) solid rgba(0,0,0,0);
-  border-radius: 50%;
+  border: var(--progress-circle-border-width) solid rgba(0, 0, 0, 0);
+  border-radius: 9999px;
   content: '';
   height: 100%;
   left: 0;
@@ -181,9 +176,7 @@ $slides-concat: '';
 
       clip-path: inset(0 calc(50% * (var(--#{$name}-check) / var(--#{$name}-check))) 0 0);
     }
-  }
-
-  @else {
+  } @else {
     .progress-circle-background-#{$name} {
       --#{$name}-start: 0;
     }
@@ -204,9 +197,7 @@ $slides-concat: '';
 
   @if $i == 1 {
     $slides-concat: var(--#{$name});
-  }
-
-  @else {
+  } @else {
     $slides-concat: $slides-concat + ' + ' + var(--#{$name});
   }
 }

package/framework/src/elements/_radio.scss

@@ -36,7 +36,7 @@
     label.radio-label {
         &:before,
         &:after {
-            border-radius: 50%;
+            border-radius: 9999px;
         }
     }
 }
@@ -59,7 +59,7 @@
 
     input:checked:disabled ~ label.radio-label {
         &:after {
-            background-color: getColor('grey');
+            background-color: getColor('neutral');
             top: 19px;
             right: 19px;
         }