@trilogy-ds/styles 0.0.1-beta.29 → 0.0.1-beta.31

package/framework/src/components/_segmented-control.scss

@@ -20,7 +20,6 @@
     height: 42px;
     color: getColor('font');
     background-color: getBGColor('neutral');
-    font-family: $body-family;
 
     &:not(:last-child) {
       margin-right: 4px;
@@ -42,7 +41,6 @@
     &.is-active {
       background-color: getColor('main');
       color: invertColor('main');
-      font-weight: 600;
     }
   }
 }

package/framework/src/components/_tabs.scss

@@ -99,7 +99,6 @@
       background-color: transparent;
       border: none;
       color: getColor('font');
-      font-family: $body-family;
       text-decoration: none;
       outline: none;
       padding: 6px 14px;
@@ -121,13 +120,10 @@
         font-size: $text-14;
       }
 
-
       &.is-active {
         color: getColor('main');
-        font-weight: $weight-semibold;
         position: relative;
         border-bottom-color: getColor('main');
-
       }
 
       &:hover:not(.is-disabled) {

package/framework/src/elements/_all.scss

@@ -16,7 +16,6 @@
 @import 'loader';
 @import 'link';
 @import 'list';
-@import 'notification';
 @import 'toaster';
 @import 'progress';
 @import 'paragraph';

package/framework/src/elements/_button.scss

@@ -40,7 +40,6 @@ $button-border-width: 2px !default;
   cursor: pointer;
   justify-content: center;
   text-align: center;
-  font-family: $body-family;
   white-space: nowrap;
   padding: 0 $spacing-4;
   text-decoration: inherit;
@@ -62,4 +61,14 @@ $button-border-width: 2px !default;
     }
   }
 
+  &[disabled],
+  &[aria-disabled=true] {
+    background-color: getBGColorValue('main') !important;
+    color: getBGColorValue('disabled') !important
+  }
+
+  &.is-loading {
+    background-color: getColorValue('neutral');
+  }
+
 }

package/framework/src/elements/_chips.scss

@@ -45,7 +45,6 @@
     border-radius: 9999px;
     color: getColor('font');
     display: inline-flex;
-    font-weight: 400;
     font-size: $size-normal;
     height: 32px;
     justify-content: center;
@@ -60,7 +59,6 @@
       &.is-active {
         background-color: getColor('main');
         color: white;
-        font-weight: 600;
         border: var(--border-active);
         padding: 5px 15px;
 

package/framework/src/elements/_entry.scss

@@ -4,7 +4,6 @@
 
   padding-left: $spacing-4;
   padding-right: $spacing-4;
-  font-family: $body-family;
   font-size: $size-medium;
   max-width: 100%;
   width: 100%;

package/framework/src/elements/_list.scss

@@ -1,25 +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;
+    @include hover();
+
+    .list-item_content {
+      display: flex;
+      align-items: center;
+      &_puce {
+        margin-right: $spacing-4;
+      }
     }
-}
 
-ul.list {
-  list-style: disc;
 
-  ul.list {
-    list-style: circle;
-  }
-}
+    &.has-action {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  
+      .list-item_action {
+        & >:first-child {
+          margin: 0px !important;
+          cursor: pointer;
+        }
+
+        .radio label.radio-label:empty, 
+        .checkbox label.checkbox-label:empty {
+          padding: $spacing-1 $spacing-1 $spacing-1 calc($spacing-1 + 10px);        
+        }
 
-// Listes avec icônes
-ul.icon-list > li {
-    display: flex;
-    align-items: center;
+      } 
 
-    .icon {
-        flex: none;
     }
+
+    div b {
+      margin-bottom: $spacing-2 ;
+    }
+
+    .divider {
+      position: absolute;
+      bottom: calc(-1 * $spacing-4);
+      width: 100%;
+    }
+
+  }
+  
 }
+

package/framework/src/elements/_select.scss

@@ -20,7 +20,6 @@
   display: inline-block;
   max-width: 100%;
   position: relative;
-  font-family: $body-family;
   border-radius: var(--radius-small);
   background-color: getColor('background');
   display: block;
@@ -37,7 +36,7 @@
     max-width: 100%;
     width: 100%;
     font-size: 1em;
-    font-family: $body-family;
+    font-family: $family-sans-serif;
     color: getColor('font');
     cursor: pointer;
     -webkit-appearance: none;

package/framework/src/elements/_table.scss

@@ -4,234 +4,242 @@
 * @deprecated "Use box.is-paddingless instead"
 */
 .table-container.box {
-    padding: 0;
+  padding: 0;
 }
 
 .table {
-    @include block;
+  @include block;
+
+  background-color: transparent;
+  color: getColor('neutral-dark');
+
+  &:not(:last-child) {
+    margin-bottom: 30px;
+  }
+
+  /**
+  * @deprecated "Use multiples <tr><th> instead"
+  */
+  tbody .is-body-header {
+    background-color: getBGColor('neutral-dark');
+  }
+
+  td,
+  th {
+    border: 1px solid getBGColor('neutral-dark');
+    border-width: 0;
+    padding: 20px;
+    vertical-align: top;
+    text-align: left;
+
+    // Modifiers
+    &.is-narrow {
+      white-space: nowrap;
+      width: 1%;
+    }
 
-    background-color: transparent;
-    color: getColor('neutral-dark');
+    &.is-selected {
+      background-color: getColor('main');
+      color: getColor('background');
 
-    &:not(:last-child) {
-        margin-bottom: 30px;
+      a,
+      strong {
+        color: currentColor;
+      }
     }
+  }
+
+  th {
+    color: getColor('font');
+  }
 
-    /**
-    * @deprecated "Use multiples <tr><th> instead"
-    */
-    tbody .is-body-header {
-        background-color: getBGColor('neutral-dark');
+  tr {
+    @each $name in $colors-feedback {
+      &.is-#{$name} {
+        background-color: getBGColor($name);
+      }
     }
 
-    td,
     th {
-        border: 1px solid getBGColor('neutral-dark');
-        border-width: 0;
-        padding: 20px;
-        vertical-align: top;
-        text-align: left;
-
-        // Modifiers
-        &.is-narrow {
-            white-space: nowrap;
-            width: 1%;
-        }
-
-        &.is-selected {
-            background-color: getColor('main');
-            color: getColor('background');
-            a,
-            strong {
-                color: currentColor;
-            }
-        }
+      background-color: getColor('background');
     }
 
-    th {
-        color: getColor('font');
+    th,
+    td {
+      color: getColor('font');
+      vertical-align: middle;
     }
 
-    tr {
-        @each $name in $colors-feedback {
-          &.is-#{$name} {
-                background-color:getBGColor($name);
-            }
-        }
+    td {
+      border-bottom: 1px solid getBGColor('neutral-dark');
 
-        th {
-            background-color: getColor('background');
-        }
+      > p {
+        margin: 0;
+      }
+    }
 
-        th,
-        td {
-            color: getColor('font');
-            vertical-align: middle;
-        }
+    &.is-selected {
+      background-color: getColor('main');
+      color: getColor('background');
 
-        td {
-            border-bottom: 1px solid getBGColor('neutral-dark');
+      a,
+      strong {
+        color: currentColor;
+      }
 
-            > p {
-                margin: 0;
-            }
-        }
-
-        &.is-selected {
-            background-color: getColor('main');
-            color: getColor('background');
+      td,
+      th {
+        border-color: currentColor;
+        color: currentColor;
+      }
+    }
 
-            a,
-            strong {
-                color: currentColor;
-            }
+    &.is-expanded,
+    &.is-expandable:hover {
+      td {
+        color: getColor('alternate');
+        cursor: pointer;
+      }
+    }
 
-            td,
-            th {
-                border-color: currentColor;
-                color: currentColor;
-            }
-        }
+    &.is-expandable + .is-expansion {
+      display: none;
+    }
 
-        &.is-expanded,
-        &.is-expandable:hover {
-            td {
-                color: getColor('alternate');
-                cursor: pointer;
-            }
-        }
+    &.is-expanded + .is-expansion {
+      display: table-row;
+    }
 
-        &.is-expandable + .is-expansion {
-            display: none;
-        }
+    &.is-expanded {
+      > td {
+        border-bottom: 0;
+      }
 
-        &.is-expanded + .is-expansion {
-            display: table-row;
-        }
+      .toggle {
+        transform: rotate(180deg);
+        color: inherit;
+      }
 
-        &.is-expanded {
-            > td {
-                border-bottom: 0;
-            }
+      + tr > td {
+        border-top: 0;
+      }
+    }
+  }
 
-            .toggle {
-                transform: rotate(180deg);
-                color: inherit;
-            }
+  thead {
+    td,
+    th {
+      border-width: 0 0 1px;
+      color: getColor('font');
+    }
+  }
 
-            + tr > td {
-                border-top: 0;
-            }
-        }
+  tfoot {
+    td,
+    th {
+      border-width: 2px 0 0;
+      color: getColor('font');
     }
+  }
 
-    thead {
+  tbody {
+    tr {
+      &:last-child {
         td,
         th {
-            border-width: 0 0 1px;
-            color: getColor('font');
+          border-bottom-width: 0;
         }
+      }
     }
+  }
 
-    tfoot {
-        td,
-        th {
-            border-width: 2px 0 0;
-            color: getColor('font');
-        }
+  &:not(.is-bordered).is-comparative {
+    th {
+      border-right: 1px solid getBGColor('neutral');
     }
 
-    tbody {
-        tr {
-            &:last-child {
-                td,
-                th {
-                    border-bottom-width: 0;
-                }
-            }
-        }
+    td {
+      &:not(:last-child) {
+        border-right: 1px solid getBGColor('neutral-dark');
+      }
     }
+  }
 
-    &:not(.is-bordered).is-comparative {
-        th {
-            border-right: 1px solid getBGColor('neutral');
-        }
+  &.is-compact {
+    td,
+    th {
+      padding: math.div(20px, 3) math.div(20px, 3);
+    }
+  }
 
-        td {
-            &:not(:last-child) {
-                border-right: 1px solid getBGColor('neutral-dark');
-            }
-        }
+  &.is-bordered {
+    td,
+    th {
+      border-width: 1px;
     }
 
-    &.is-bordered {
+    tr {
+      &:last-child {
         td,
         th {
-            border-width: 1px;
-        }
-
-        tr {
-            &:last-child {
-                td,
-                th {
-                    border-bottom-width: 1px;
-                }
-            }
+          border-bottom-width: 1px;
         }
+      }
     }
+  }
 
-    &.is-fullwidth {
-        width: 100%;
-    }
+  &.is-fullwidth {
+    width: 100%;
+  }
 
-    &.is-striped {
-        tbody {
-            tr:not(.is-selected) {
-                &:nth-child(even) {
-                    background-color: getBGColor('neutral');
-                }
-            }
+  &.is-striped {
+    tbody {
+      tr:not(.is-selected) {
+        &:nth-child(even) {
+          background-color: getBGColor('neutral');
         }
+      }
     }
+  }
 
-    .subtable {
-        background-color: getBGColor('neutral');
-        border-radius: var(--radius);
-        padding: $box-padding * 2;
+  .subtable {
+    background-color: getBGColor('neutral');
+    border-radius: var(--radius);
+    padding: $box-padding * 2;
 
-        @include mobile() {
-            padding: 15px;
-        }
+    @include mobile() {
+      padding: 15px;
+    }
 
-        .table {
-            background: transparent;
+    .table {
+      background: transparent;
 
-            tr:not(:first-child) {
-                td {
-                    border-top: 1px solid getColor('neutral-dark');
-                }
-            }
+      tr:not(:first-child) {
+        td {
+          border-top: 1px solid getColor('neutral-dark');
+        }
+      }
 
-            td {
-                border: 0;
+      td {
+        border: 0;
 
-                &:first-child {
-                    padding-left: 0;
-                }
+        &:first-child {
+          padding-left: 0;
+        }
 
-                &:last-child {
-                    padding-right: 0;
-                }
-            }
+        &:last-child {
+          padding-right: 0;
         }
+      }
     }
+  }
 }
 
 .table-container {
-    @include block;
-    @include overflow-touch;
+  @include block;
+  @include overflow-touch;
 
-    overflow: auto;
-    overflow-y: hidden;
-    max-width: 100%;
+  overflow: auto;
+  overflow-y: hidden;
+  max-width: 100%;
 }

package/framework/src/elements/_textarea.scss

@@ -7,6 +7,11 @@
     border-radius: var(--radius-small);
     outline: none;
 
+    &:focus,
+    &:focus-visible {
+      padding: 15px;
+    }
+
     &::placeholder {
       font-size: 16px;
     }
@@ -48,7 +53,6 @@
       padding-left: $spacing-9;
       padding-right: $spacing-9;
 
-      #{$hoverSelector},
       &:focus,
       &:focus-visible {
         padding-left: 55px;

package/framework/src/theming/buttons_partial.scss

@@ -18,7 +18,7 @@ $button-colors: (
       filter: brightness(1.2);
     }
   }
-  &:active {
+  &:active:not(:disabled) {
     filter: brightness(0.7);
   }
 

package/framework/src/utilities/_derived-variables.scss

@@ -19,7 +19,7 @@ $colors-brand: (
 
 // Brand Color Functionnal
 $colors-brand-funcionnal: (
-  'background', 'main', 'alternate', 'info', 'success', 'error', 'warning'
+  'background', 'main', 'alternate', 'info', 'success', 'error', 'warning', 'neutral'
 );
 
 $colors-feedback: (

package/framework/src/utilities/_mixins.scss

@@ -162,6 +162,14 @@
   -webkit-overflow-scrolling: touch;
 }
 
+@mixin label-states {
+  &:focus,
+  &:active,
+  &:hover {
+    @include hover();
+  }
+}
+
 @mixin overlay($offset: 0) {
   position: absolute;
   top: $offset;
@@ -452,11 +460,7 @@
       }
     }
 
-    input:checked ~ label.#{$type}-label {
-      font-weight: bold;
-    }
-
-    &:hover {
+    &:hover &:not(disabled) {
       label.#{$type}-label {
         &:before {
           @include hoverRules();
@@ -518,12 +522,13 @@
     }
 
     input {
-      &:not(:disabled) ~ label.#{$type}-label {
-        &:focus,
-        &:active,
-        &:hover {
-          @include hover();
-        }
+
+      &:not(:disabled):not(:checked) ~ label.radio-label {
+        @include label-states;
+      }
+
+      &:not(:disabled) ~ label.checkbox-label {
+        @include label-states;
       }
 
       &:checked:not(:disabled) ~ label.#{$type}-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.1-beta.29",
+  "version": "0.0.1-beta.31",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [