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

package/framework/src/elements/_table.scss

@@ -4,295 +4,242 @@
 * @deprecated "Use box.is-paddingless instead"
 */
 .table-container.box {
-    padding: 0;
+  padding: 0;
 }
 
 .table {
-    @include block;
-
-    background-color: transparent;
-    color: getColor('grey-dark');
-
-    &:not(:last-child) {
-        margin-bottom: 30px;
+  @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%;
     }
 
-    /**
-    * @deprecated "Use multiples <tr><th> instead"
-    */
-    tbody .is-body-header {
-        background-color: getColor('grey-light');
+    &.is-selected {
+      background-color: getColor('main');
+      color: getColor('background');
+
+      a,
+      strong {
+        color: currentColor;
+      }
     }
+  }
 
-    td,
-    th {
-        border: 1px solid getColor('grey-light');
-        border-width: 0;
-        padding: 20px;
-        vertical-align: top;
-        text-align: left;
-
-        // Modifiers
-        &.is-narrow {
-            white-space: nowrap;
-            width: 1%;
-        }
+  th {
+    color: getColor('font');
+  }
 
-        &.is-selected {
-            background-color: getColor('main');
-            color: getColor('background');
-            a,
-            strong {
-                color: currentColor;
-            }
-        }
+  tr {
+    @each $name in $colors-feedback {
+      &.is-#{$name} {
+        background-color: getBGColor($name);
+      }
     }
 
     th {
-        color: getColor('font');
+      background-color: getColor('background');
     }
 
-    tr {
-        @each $name, $pair in $colors-feedback {
-          $bg-color: nth($pair, 1);
-          &.is-#{$name} {
-                background-color:getColor($bg-color);
-            }
-        }
+    th,
+    td {
+      color: getColor('font');
+      vertical-align: middle;
+    }
 
-        th {
-            background-color: getColor('background');
-        }
+    td {
+      border-bottom: 1px solid getBGColor('neutral-dark');
 
-        th,
-        td {
-            color: getColor('font');
-            vertical-align: middle;
-        }
-
-        td {
-            border-bottom: 1px solid getColor('grey-light');
+      > p {
+        margin: 0;
+      }
+    }
 
-            > p {
-                margin: 0;
-            }
-        }
+    &.is-selected {
+      background-color: getColor('main');
+      color: getColor('background');
 
-        &.is-selected {
-            background-color: getColor('main');
-            color: getColor('background');
+      a,
+      strong {
+        color: currentColor;
+      }
 
-            a,
-            strong {
-                color: currentColor;
-            }
+      td,
+      th {
+        border-color: currentColor;
+        color: currentColor;
+      }
+    }
 
-            td,
-            th {
-                border-color: currentColor;
-                color: currentColor;
-            }
-        }
+    &.is-expanded,
+    &.is-expandable:hover {
+      td {
+        color: getColor('alternate');
+        cursor: pointer;
+      }
+    }
 
-        &.is-expanded,
-        &.is-expandable:hover {
-            td {
-                color: getColor('alternate');
-                cursor: pointer;
-            }
-        }
+    &.is-expandable + .is-expansion {
+      display: none;
+    }
 
-        &.is-expandable + .is-expansion {
-            display: none;
-        }
+    &.is-expanded + .is-expansion {
+      display: table-row;
+    }
 
-        &.is-expanded + .is-expansion {
-            display: table-row;
-        }
+    &.is-expanded {
+      > td {
+        border-bottom: 0;
+      }
 
-        &.is-expanded {
-            > td {
-                border-bottom: 0;
-            }
+      .toggle {
+        transform: rotate(180deg);
+        color: inherit;
+      }
 
-            .toggle {
-                transform: rotate(180deg);
-                color: inherit;
-            }
+      + tr > td {
+        border-top: 0;
+      }
+    }
+  }
 
-            + tr > td {
-                border-top: 0;
-            }
-        }
+  thead {
+    td,
+    th {
+      border-width: 0 0 1px;
+      color: getColor('font');
     }
+  }
 
-    thead {
-        td,
-        th {
-            border-width: 0 0 1px;
-            color: getColor('font');
-        }
+  tfoot {
+    td,
+    th {
+      border-width: 2px 0 0;
+      color: getColor('font');
     }
+  }
 
-    tfoot {
+  tbody {
+    tr {
+      &:last-child {
         td,
         th {
-            border-width: 2px 0 0;
-            color: getColor('font');
+          border-bottom-width: 0;
         }
+      }
     }
+  }
 
-    tbody {
-        tr {
-            &:last-child {
-                td,
-                th {
-                    border-bottom-width: 0;
-                }
-            }
-        }
+  &:not(.is-bordered).is-comparative {
+    th {
+      border-right: 1px solid getBGColor('neutral');
     }
 
-    &:not(.is-bordered).is-comparative {
-        th {
-            border-right: 1px solid getColor('grey-lighter');
-        }
-
-        td {
-            &:not(:last-child) {
-                border-right: 1px solid getColor('grey-light');
-            }
-        }
+    td {
+      &:not(:last-child) {
+        border-right: 1px solid getBGColor('neutral-dark');
+      }
     }
+  }
 
-    &.is-compact {
-        td,
-        th {
-            padding: math.div(20px, 3) math.div(20px, 3);
-        }
+  &.is-compact {
+    td,
+    th {
+      padding: math.div(20px, 3) math.div(20px, 3);
     }
+  }
 
-    &.is-large {
-        thead {
-            height: 50px;
-
-            th {
-                color: getVariantColor('alternate',2);
-                font-weight: 600;
-                text-transform: uppercase;
-            }
-        }
-
-        tbody {
-            border-top: 1px solid #d8d8d8;
-
-            tr {
-                td {
-                    height: 40px;
-                }
-
-                &:not(.is-body-header) td {
-                    height: 96px;
-                }
-            }
-        }
+  &.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-hoverable {
-        tbody {
-            tr:not(.is-selected) {
-                &:hover {
-                    background-color: getColor('grey-lighter');
-                }
-            }
-        }
-
-        &.is-striped {
-            tbody {
-                tr:not(.is-selected) {
-                    &:hover {
-                        background-color: getColor('grey-light');
-                    }
-                }
-            }
+  &.is-striped {
+    tbody {
+      tr:not(.is-selected) {
+        &:nth-child(even) {
+          background-color: getBGColor('neutral');
         }
+      }
     }
+  }
 
-    &.is-narrow {
-        td,
-        th {
-            padding: 0.25em 0.5em;
-        }
-    }
+  .subtable {
+    background-color: getBGColor('neutral');
+    border-radius: var(--radius);
+    padding: $box-padding * 2;
 
-    &.is-striped {
-        tbody {
-            tr:not(.is-selected) {
-                &:nth-child(even) {
-                    background-color: getColor('grey-lighter');
-                }
-            }
-        }
+    @include mobile() {
+      padding: 15px;
     }
 
-    .subtable {
-        background-color: getColor('grey-lighter');
-        border-radius: $radius;
-        padding: $box-padding * 2;
+    .table {
+      background: transparent;
 
-        @include mobile() {
-            padding: 15px;
+      tr:not(:first-child) {
+        td {
+          border-top: 1px solid getColor('neutral-dark');
         }
+      }
 
-        .table {
-            background: transparent;
-
-            tr:not(:first-child) {
-                td {
-                    border-top: 1px solid getColor('grey-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/_tag.scss

@@ -1,131 +1,130 @@
-$tag-radius: $radius-rounded !default;
 $tag-delete-margin: 1px !default;
 
 // container pour multi-tags ou tags avec actions
 .tags {
-    align-items: center;
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin-bottom: 16px;
-
-    // multi-tags : ajout d'une marge bottom, supprimable par facette
-    &:not(.is-gapless) {
-        &:not(:last-child) {
-            margin-right: 8px;
-        }
-
-        .tag {
-            margin-bottom: 10px;
-        }
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 16px;
+
+  // multi-tags : ajout d'une marge bottom, supprimable par facette
+  &:not(.is-gapless) {
+    &:not(:last-child) {
+      margin-right: 8px;
     }
 
-    // multi-tags : ajout d'une marge à droite de chaque tag
-    .tag:not(:last-child) {
-        margin-right: 8px;
+    .tag {
+      margin-bottom: 10px;
     }
+  }
 
-    // centrage des tags
-    &.is-centered {
-        justify-content: center;
-    }
+  // multi-tags : ajout d'une marge à droite de chaque tag
+  .tag:not(:last-child) {
+    margin-right: 8px;
+  }
 
-    // tags avec actions
-    &.has-addons {
-        cursor: pointer;
-
-        .tag {
-            margin-right: 0;
-
-            &:not(:first-child) {
-                border-bottom-left-radius: 0;
-                border-top-left-radius: 0;
-            }
-
-            &:not(:last-child) {
-                border-bottom-right-radius: 0;
-                border-top-right-radius: 0;
-            }
-
-            &:first-child {
-                padding-right: 5px;
-            }
-
-            + .tag {
-                padding: 0;
-                position: relative;
-                width: 25px;
-                border-width: 0;
-
-                // fixme : cette règle ne devrait-elle pas s'appliquer à TOUS les buttons ?
-                cursor: inherit;
-
-                // affichage d'une fausse croix avec 2 traits penchés
-                &:empty {
-                    &::before,
-                    &::after {
-                        position: absolute;
-                        content: '';
-                        height: 10px;
-                        width: 2px;
-                        background-color: currentColor;
-                        top: 50%;
-                        left: 30%;
-                    }
-
-                    &::before {
-                        transform: translate(50%, -50%) rotate(45deg);
-                    }
-
-                    &::after {
-                        transform: translate(50%, -50%) rotate(-45deg);
-                    }
-                }
-            }
-        }
+  // centrage des tags
+  &.is-centered {
+    justify-content: center;
+  }
 
-        &.is-inverted {
-            .tag {
-                background-color: getColor(getColor('background'));
-            }
+  // tags avec actions
+  &.has-addons {
+    cursor: pointer;
+
+    .tag {
+      margin-right: 0;
+
+      &:not(:first-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:first-child {
+        padding-right: 5px;
+      }
+
+      + .tag {
+        padding: 0;
+        position: relative;
+        width: 25px;
+        border-width: 0;
+
+        // fixme : cette règle ne devrait-elle pas s'appliquer à TOUS les buttons ?
+        cursor: inherit;
+
+        // affichage d'une fausse croix avec 2 traits penchés
+        &:empty {
+          &::before,
+          &::after {
+            position: absolute;
+            content: '';
+            height: 10px;
+            width: 2px;
+            background-color: currentColor;
+            top: 50%;
+            left: 30%;
+          }
+
+          &::before {
+            transform: translate(50%, -50%) rotate(45deg);
+          }
+
+          &::after {
+            transform: translate(50%, -50%) rotate(-45deg);
+          }
         }
+      }
+    }
 
+    &.is-inverted {
+      .tag {
+        background-color: getColor(getColor('background'));
+      }
     }
+
+  }
 }
 
 .tag {
-    align-items: center;
-    background-color: getColor('background');
-    border-radius: $tag-radius;
-    color: getColor('font');
-    display: inline-flex;
-    font-size: $size-medium;
-    font-weight: $weight-medium;
-    height: 28px;
-    justify-content: center;
-    line-height: 20px;
-    padding: $spacing-1 $spacing-2;
-    white-space: nowrap;
-
-    &.is-small {
-        font-size: $text-12;
-        line-height: 15px;
-        height: 23px;
-    }
+  align-items: center;
+  background-color: getBGColor('neutral-dark');
+  border-radius: 9999px;
+  color: getColor('font');
+  display: inline-flex;
+  font-size: $size-medium;
+  font-weight: $weight-medium;
+  height: 28px;
+  justify-content: center;
+  line-height: 20px;
+  padding: $spacing-1 $spacing-2;
+  white-space: nowrap;
+
+  &.is-small {
+    font-size: $text-12;
+    line-height: 15px;
+    height: 23px;
+  }
 
 
-    @include mobile {
-        font-size: 12px;
-        line-height: 15px;
-    }
+  @include mobile {
+    font-size: 12px;
+    line-height: 15px;
+  }
 
-  @each $name, $pair in $colors-feedback {
-    $bg-color: nth($pair, 1);
+  @each $name in $colors-feedback {
     &.is-#{$name}:not(.is-inverted) {
-      background-color: getColor($bg-color);
+      background-color: getBGColor($name);
     }
     &.is-inverted.is-#{$name} {
       color: getColor($name);
+      background-color: invertColor($name);
     }
   }
 }