@trilogy-ds/styles 0.0.26-esm-cjs → 0.0.28-esm-cjs

package/framework/src/base/_all.scss

@@ -1,6 +1,5 @@
 @charset "utf-8";
 
-@import "color";
 @import "reset";
 @import "generic";
 @import "fonts";

package/framework/src/components/_accordion.scss

@@ -18,7 +18,7 @@
     flex-direction: column;
     background-color: getColor('background');
     font-size: $size-normal;
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
     border-radius: var(--radius);
     margin: 8px 0;
     min-height: 56px;

package/framework/src/components/_autolayout.scss

@@ -29,6 +29,9 @@ body:not(.is-tight) {
   .stepper:not(.flex-box > .stepper):not(:last-child) {
     margin-bottom: 24px;
   }
+  .alert:not(.flex-box > .alert):not(:last-child) {
+    margin-bottom: 24px;
+  }
   .pagination:not(.flex-box > .pagination):not(:last-child) {
     margin-bottom: 24px;
   }
@@ -41,9 +44,6 @@ body:not(.is-tight) {
   .range:not(.flex-box > .range):not(:last-child) {
     margin-bottom: 24px;
   }
-  .stepper:not(.flex-box > .stepper):not(:last-child) {
-    margin-bottom: 24px;
-  }
   .price-container:not(.flex-box > .price-container):not(:last-child) {
     margin-bottom: 12px;
   }
@@ -195,6 +195,9 @@ body:not(.is-tight) {
   .stepper:not(.flex-box > .stepper):not(:last-child) {
       margin-bottom: 16px;
     }
+  .alert:not(.flex-box > .alert):not(:last-child) {
+      margin-bottom: 16px;
+    }
   .pagination:not(.flex-box > .pagination):not(:last-child) {
       margin-bottom: 16px;
     }
@@ -207,9 +210,6 @@ body:not(.is-tight) {
   .range:not(.flex-box > .range):not(:last-child) {
       margin-bottom: 16px;
     }
-  .stepper:not(.flex-box > .stepper):not(:last-child) {
-      margin-bottom: 16px;
-    }
   .price-container:not(.flex-box > .price-container):not(:last-child) {
       margin-bottom: 8px;
     }

package/framework/src/components/_box.scss

@@ -54,7 +54,7 @@ a.box {
 
   &.is-flat {
     box-shadow: none;
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
 
     .box-header {
       margin-top: calc(var(--padding-box) * -1 - 1px);

package/framework/src/components/_card.scss

@@ -67,7 +67,7 @@ $basis-values: (
 
   &.is-flat {
     box-shadow: none;
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
 
     .card-content {
       padding-left: 20px;
@@ -112,7 +112,7 @@ $basis-values: (
         flex-basis: map-get($basis-values, 'is-#{$i}');
       }
     }
-    
+
     .card-image {
       max-width: 100%;
 
@@ -236,7 +236,7 @@ $basis-values: (
     .card-image {
       order: 2;
     }
-    
+
     .card-content {
       order: 1;
     }

package/framework/src/components/_container.scss

@@ -40,24 +40,17 @@
 
   @include widescreen {
     max-width: $widescreen - 2 * $gap;
-    width: $widescreen - 2 * $gap;
   }
 
   @include fullhd {
     margin: 0 auto;
     max-width: $fullhd - 2 * $gap;
-    width: $fullhd - 2 * $gap;
   }
 
   &.is-medium {
     max-width: 960px;
     margin: auto;
   }
-
-  &.is-fullwidth {
-    max-width: 100%;
-    width: 100%;
-  }
 }
 
 main,

package/framework/src/components/_divider.scss

@@ -3,6 +3,7 @@
   flex: 1;
   height: 1px;
   background-color: getColor('neutral');
+  border: 1px solid #{getColor('stroke-fade')};
 }
 
 .divider {

package/framework/src/components/_dropdown.scss

@@ -0,0 +1,195 @@
+@use 'sass:math';
+@import "../utilities/spacing";
+
+$dropdown-border-radius: var(--radius-small);
+$dropdown-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+$dropdown-item-padding-vertical: 12px;
+$dropdown-item-padding-horizontal: 16px;
+
+.dropdown {
+  position: relative;
+  display: block;
+
+  &.is-active {
+    .dropdown-menu {
+      display: block;
+    }
+  }
+}
+
+.dropdown-trigger {
+  display: inline-block;
+}
+
+.dropdown-manual {
+  .dropdown-menu {
+    top: 100%;
+    margin-top: 0px;
+    &[data-position="upward"] {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 85px;
+    }
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  margin-top: 15px;
+  background-color: getColor('background');
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-shadow;
+  overflow: hidden;
+  max-height: 300px;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: max-content;
+  min-width: 200px;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+
+  &[data-position="upward"] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 15px;
+    transform: translateY(10px);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: getColor('main-fade');
+    border-radius: 3px;
+  }
+}
+
+.dropdown-content {
+  padding: 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
+  color: getColor('font');
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border: none;
+  border-radius: $dropdown-border-radius;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.4;
+
+  .icon {
+    margin-right: 12px;
+    flex-shrink: 0;
+
+    &.is-smaller {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &:not(:disabled):not([aria-disabled="true"]) {
+    #{$hoverSelector},
+    &:focus {
+      background-color: getColor('main-fade');
+      outline: none;
+    }
+
+    &:active {
+      background-color: getColor('main-fade');
+    }
+  }
+
+  &.is-active {
+    background-color: getColor('main-fade');
+    font-weight: $weight-semibold;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    color: getColor('disabled');
+    cursor: not-allowed;
+    background-color: transparent;
+
+    .icon {
+      opacity: 0.5;
+    }
+  }
+}
+
+.dropdown-item:disabled, .dropdown-item[aria-disabled=true] {
+  background-color: transparent !important;
+}
+
+.dropdown-group {
+  &:not(:first-child) {
+    border-top: 2px solid getColor('neutral-fade');
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
+
+  .dropdown-item {
+    &:first-child {
+      border-top: none;
+    }
+  }
+
+  &.is-no-separator {
+    border-top: none;
+  }
+}
+
+@include mobile {
+  .dropdown-menu {
+    left: 0;
+    max-height: 250px;
+    width: max-content;
+    min-width: 200px;
+  }
+}
+
+.dropdown.is-active .dropdown-menu {
+  opacity: 1;
+  transform: translateY(0);
+
+  &[data-position="upward"] {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdown-menu.is-visible {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+
+  &[data-position="upward"] {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/framework/src/components/_flex-box.scss

@@ -859,6 +859,7 @@
   .flex-item {
     flex-grow: 1;
     &.is-narrow {
+      flex: none;
       width: auto;
     }
 

package/framework/src/components/_index.scss

@@ -16,6 +16,7 @@
 @import 'container';
 @import 'countdown';
 @import 'date-picker';
+@import 'dropdown';
 @import 'divider';
 @import 'fab';
 @import 'flex-box';

package/framework/src/components/_table.scss

@@ -26,7 +26,7 @@
 
   td,
   th {
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
     border-width: 0;
     padding: 20px;
     vertical-align: top;
@@ -71,7 +71,7 @@
     }
 
     td {
-      border-bottom: var(--border);
+      border-bottom: 1px solid #{getColor('stroke-fade')};
 
       > p {
         margin: 0;
@@ -153,15 +153,15 @@
   }
 
   &.has-border-all {
-    border: var(--border);
+    border: 1px solid #{getColor('stroke-fade')};
 
     th {
-      border-right: var(--border);
+      border-right: 1px solid #{getColor('stroke-fade')};
     }
 
     td {
       &:not(:last-child) {
-        border-right: var(--border);
+        border-right: 1px solid #{getColor('stroke-fade')};
       }
     }
   }
@@ -169,13 +169,13 @@
   &.has-border-inner {
     th {
       &:not(:last-child) {
-        border-right: var(--border);
+        border-right: 1px solid #{getColor('stroke-fade')};
       }
     }
 
     td {
       &:not(:last-child) {
-        border-right: var(--border);
+        border-right: 1px solid #{getColor('stroke-fade')};
       }
     }
   }
@@ -215,7 +215,7 @@
 
       tr:not(:first-child) {
         td {
-          border-top: var(--border);
+          border-top: 1px solid #{getColor('stroke-fade')};
         }
       }
 

package/framework/src/components/alert/_alert.scss

@@ -41,7 +41,7 @@ a.alert {
     padding-bottom: 0 !important;
   }
 
-  .icon {
+  &-icon {
     padding: 0;
   }
 
@@ -58,7 +58,7 @@ a.alert {
       background-color: fadeColor($name);
       border: 1px solid getColor($name);
 
-      .icon {
+      .alert-icon {
         color: getColor($name);
       }
     }

package/framework/src/components/progress/_progress.scss

@@ -1,7 +1,5 @@
 @use "sass:math";
 
-@import "../../base/color";
-
 $progressbar-height: 10px;
 $progressbar-small: 5px;
 

package/framework/src/trilogy.scss

@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 @import "utilities/all";
+@import "base/color";
 @import "base/all";
 @import "elements";
 @import "components";

package/framework/src/utilities/variables/_color.scss

@@ -12,6 +12,7 @@ $suffix: '';
 $colors: (
   'background': [#fff, 'white', 'main'],
   'stroke':[ #727272, 'stroke', 'white' ],
+  'stroke-fade':[ #cadbe8, 'stroke-fade', 'white' ],
   'transparent': ['transparent', 'transparent', 'transparent'],
   'main':[ #3d5d7e, 'main', 'white'],
   'main-fade':[ #eff2f8, 'main-fade', 'white'],

package/framework/src/utilities/variables/_responsiveness.scss

@@ -1,7 +1,7 @@
 // The container horizontal gap, which acts as the offset for breakpoints
-$gap: 20px !default;
+$gap: 24px !default;
 
 $tablet: 768px !default;
-$desktop: 984px + 2 * $gap !default;
-$widescreen: 1200px + 2 * $gap !default;
-$fullhd: 1348px + 2 * $gap !default;
+$desktop: 976px + 2 * $gap !default;
+$widescreen: 1192px + 2 * $gap !default;
+$fullhd: 1340px + 2 * $gap !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.26-esm-cjs",
+  "version": "0.0.28-esm-cjs",
   "author": "Bouygues Telecom",
   "repository": {
     "type": "git",