@trilogy-ds/styles 4.20.2 → 4.20.4-beta.1

package/framework/src/base/_helpers.scss

@@ -791,18 +791,19 @@ $align-values: (
 }
 
 @each $alignment, $align-items in $align-values {
-  .is-aligned-#{$alignment} {
+  // FlexBox owns these breakpoints so container queries can override the viewport.
+  .is-aligned-#{$alignment}:not(:where(.flex-box)) {
     align-items: #{$align-items} !important;
   }
 
   @include mobile {
-    .is-aligned-#{$alignment}-mobile {
+    .is-aligned-#{$alignment}-mobile:not(:where(.flex-box)) {
       align-items: #{$align-items} !important;
     }
   }
 
   @include tablet {
-    .is-aligned-#{$alignment}-tablet {
+    .is-aligned-#{$alignment}-tablet:not(:where(.flex-box)) {
       align-items: #{$align-items} !important;
     }
   }
@@ -820,7 +821,7 @@ $align-values: (
   }
 
   @include desktop {
-    .is-aligned-#{$alignment}-desktop {
+    .is-aligned-#{$alignment}-desktop:not(:where(.flex-box)) {
       align-items: #{$align-items} !important;
     }
   }
@@ -832,7 +833,7 @@ $align-values: (
   }
 
   @include widescreen {
-    .is-aligned-#{$alignment}-widescreen {
+    .is-aligned-#{$alignment}-widescreen:not(:where(.flex-box)) {
       align-items: #{$align-items} !important;
     }
   }
@@ -844,7 +845,7 @@ $align-values: (
   }
 
   @include fullhd {
-    .is-aligned-#{$alignment}-fullhd {
+    .is-aligned-#{$alignment}-fullhd:not(:where(.flex-box)) {
       align-items: #{$align-items} !important;
     }
   }
@@ -856,7 +857,7 @@ $align-values: (
 }
 
 // FIXME : à supprimer car double-emploi avec .is-aligned-center (et même pas de spécificité par breakpoint)
-.is-aligned-center {
+.is-aligned-center:not(:where(.flex-box)) {
   align-items: center !important;
 }
 

package/framework/src/components/_box.scss

@@ -15,6 +15,7 @@ $radius-values: (
   'sm',
   'md',
   'lg',
+  'full'
 );
 
 $padding-values: (

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

@@ -2,6 +2,8 @@
 
 .flex-box {
   display: flex;
+  // Reset on each FlexBox to avoid inheriting a nested parent's base alignment.
+  --flex-box-align: normal;
   --ColumnGap : 8px;
   gap: var(--ColumnGap);
   flex-direction: row;
@@ -248,18 +250,22 @@
 
   // ALIGN ITEMS
   &.is-aligned-start {
+    --flex-box-align: flex-start;
     align-items: flex-start;
   }
 
   &.is-aligned-end {
+    --flex-box-align: flex-end;
     align-items: flex-end;
   }
 
   &.is-aligned-center {
+    --flex-box-align: center;
     align-items: center;
   }
 
   &.is-aligned-stretch {
+    --flex-box-align: stretch;
     align-items: stretch;
   }
 
@@ -349,6 +355,14 @@
     }
   }
 
+  // A query container replaces viewport alignment, even when none of the
+  // responsive classes matches its width. Preserve any non-responsive value.
+  @container (min-width: 0px) {
+    &[class] {
+      align-items: var(--flex-box-align);
+    }
+  }
+
   @include container-mobile {
     &.is-aligned-start-mobile {
       align-items: flex-start;
@@ -401,6 +415,42 @@
     }
   }
 
+  @include container-widescreen {
+    &.is-aligned-start-widescreen {
+      align-items: flex-start;
+    }
+
+    &.is-aligned-end-widescreen {
+      align-items: flex-end;
+    }
+
+    &.is-aligned-center-widescreen {
+      align-items: center;
+    }
+
+    &.is-aligned-stretch-widescreen {
+      align-items: stretch;
+    }
+  }
+
+  @include container-fullhd {
+    &.is-aligned-start-fullhd {
+      align-items: flex-start;
+    }
+
+    &.is-aligned-end-fullhd {
+      align-items: flex-end;
+    }
+
+    &.is-aligned-center-fullhd {
+      align-items: center;
+    }
+
+    &.is-aligned-stretch-fullhd {
+      align-items: stretch;
+    }
+  }
+
   // JUSTIFY CONTENT
   &.is-justified-start {
     justify-content: flex-start;

package/framework/src/layout/_section.scss

@@ -1,8 +1,8 @@
 .section {
-  padding: $spacing-4 $spacing-6;
+  padding: $spacing-6 $spacing-4 ;
 
   @include desktop {
-    padding: $spacing-5 $spacing-6;
+    padding: $spacing-6 $spacing-5 ;
   }
 
   &.has-background {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.20.2",
+  "version": "4.20.4-beta.1",
   "author": "Bouygues Telecom",
   "repository": {
     "type": "git",