chore(global): DSFR v1.7.1

GouvernementFR · Jul 22, 2022 · b225a08 · b225a08
2 parents b496b7c + c95eca2
commit b225a08
Show file tree

Hide file tree

Showing 23 changed files with 101 additions and 84 deletions.
diff --git a/module/color/mixin/_element.scss b/module/color/mixin/_element.scss
@@ -205,9 +205,18 @@ $COLOR: constant.$value;
   @include _element($prop, border, $tokens, $options, $value);
 }
 
-@mixin no-border($breakpoint: null) {
+@mixin no-border($options: ()) {
+  $breakpoint: map.get($options, breakpoint);
+  $legacy: map.get($options, legacy);
   @include media-query.respond-from($breakpoint) {
-    border: 0;
+    @if $legacy {
+      @include legacy.is(ie11) {
+        border: 0;
+      }
+    }
+    @else {
+      border: 0;
+    }
   }
 }
 
@@ -254,8 +263,17 @@ $COLOR: constant.$value;
 /// Supprime la shadow-box sur l'élément
 /// @access public
 /// @param {string} $breakpoint - la shadow-box est retiré à partir d'un breakpoint si celui-ci est défini
-@mixin no-box-shadow($breakpoint: null) {
+@mixin no-box-shadow($options) {
+  $breakpoint: map.get($options, breakpoint);
+  $legacy: map.get($options, legacy);
   @include media-query.respond-from($breakpoint) {
-    box-shadow: none;
+    @if $legacy {
+      @include legacy.is(ie11) {
+        box-shadow: none;
+      }
+    }
+    @else {
+      box-shadow: none;
+    }
   }
 }
diff --git a/module/elevation/mixin/_drop.scss b/module/elevation/mixin/_drop.scss
@@ -1,5 +1,17 @@
-@mixin drop() {
-  z-index: auto;
-  filter: none;
-  background: transparent;
+@use 'sass:map';
+@use 'module/legacy';
+
+@mixin drop($options: ()) {
+  $legacy: map.get($options, legacy);
+  @if $legacy {
+    @include legacy.is(ie11) {
+      z-index: auto;
+      background: transparent;
+    }
+  }
+  @else {
+    z-index: auto;
+    background: transparent;
+    filter: none;
+  }
 }
diff --git a/module/elevation/mixin/_elevate.scss b/module/elevation/mixin/_elevate.scss
@@ -9,10 +9,10 @@
   $layer: list.nth(string.split($level, '-'), 1);
   $legacy: map.get($options, legacy);
 
+  @include z-index.z-index($level, $legacy);
+  @include background.background($layer, $options);
+
   @if not $legacy {
-    @include z-index.z-index($level);
     @include shadow.shadow($layer);
   }
-
-  @include background.background($layer, $options);
 }
diff --git a/module/elevation/mixin/_z-index.scss b/module/elevation/mixin/_z-index.scss
@@ -1,8 +1,17 @@
 @use 'sass:map';
 @use 'module/elevation/variable/z-indexes';
+@use 'module/legacy';
 
-@mixin z-index($level) {
+@mixin z-index($level, $legacy: false) {
   @if map.has-key(z-indexes.$values, $level) {
-    z-index: calc(var(--ground) + #{map.get(z-indexes.$values, $level)});
+    $z-index: map.get(z-indexes.$values, $level);
+    @if $legacy {
+      @include legacy.is(ie11) {
+        z-index: #{$z-index};
+      }
+    }
+    @else {
+      z-index: calc(var(--ground) + #{$z-index});
+    }
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Système de Design de l'Etat - DSFR",
   "repository": "git@github.com:GouvernementFR/dsfr.git",
   "author": "Service d'Information du Gouvernement <jean-charles.hourdeaux@pm.gouv.fr>",

diff --git a/src/component/consent/style/_scheme.scss b/src/component/consent/style/_scheme.scss
@@ -30,4 +30,11 @@
       }
     }
   }
+
+  #{ns(consent-service)} {
+    &:last-of-type,
+    #{ns(consent-service)} {
+      @include color.no-box-shadow((legacy: $legacy));
+    }
+  }
 }
diff --git a/src/component/consent/style/module/_manager.scss b/src/component/consent/style/module/_manager.scss
@@ -3,8 +3,6 @@
 /// @group consent
 ////
 
-@use 'module/color';
-
 #{ns(consent-manager)} {
   &__header {
     @include padding-top(0);
@@ -46,8 +44,4 @@
     @include margin-bottom(-12v);
     @include margin-top(4v);
   }
-
-  #{ns(consent-service)}:last-of-type {
-    @include color.no-box-shadow;
-  }
 }
diff --git a/src/component/consent/style/module/_services.scss b/src/component/consent/style/module/_services.scss
@@ -4,7 +4,6 @@
 ////
 
 @use 'module/spacing';
-@use 'module/color';
 
 /**
 * Consent service correspond à un bloc de finalité (titre, radios, description)
@@ -136,7 +135,6 @@
   #{ns(consent-service)} {
     &,
     &:last-child {
-      @include color.no-box-shadow;
       > #{ns(fieldset)} {
         @include padding(0);
       }

diff --git a/src/component/footer/example/sample/footer.ejs b/src/component/footer/example/sample/footer.ejs
@@ -8,7 +8,7 @@ else data.id = uniqueId('footer');
 if (footer.top === true) data.top = { categories: {label: 'Nom de la catégorie', link: 'Lien de navigation'}};
 
 if (footer.brand === true) {
-  data.brand = brandData('footer', footer.logo !== false, false, footer.operator !== undefined);
+  data.brand = brandData('footer', footer.logo, false, footer.operator);
 }
 
 if (footer.content === true) data.content = {

diff --git a/src/component/footer/style/module/_partners.scss b/src/component/footer/style/module/_partners.scss
@@ -3,8 +3,6 @@
 /// @group Footer
 ////
 
-@use 'module/color';
-
 /**
  * La partie "partners" du footer est constituée de logos organisés
  * en partenaires principaux (ferré à gauche) et secondaires (ferrés à droite)
@@ -14,12 +12,8 @@
     @include margin-top(4v);
     @include padding-top(4v);
 
-    /**
-    * Style des liens qui entourent les logos partenaires
-    */
     a {
       @include display-flex(null, center, center);
-      @include color.no-box-shadow;
     }
 
     /**
@@ -116,7 +110,6 @@
     * On surcharge le style du lien pour les logos secondaires
     */
     #{ns(footer)}__partners-link {
-      @include color.no-box-shadow;
       @include margin-bottom(2v);
     }
 

diff --git a/src/component/header/example/sample/header.ejs b/src/component/header/example/sample/header.ejs
@@ -6,7 +6,7 @@ const data = {body: {}, menu: menu};
 let hasNavbar = false;
 let hasMenu = false;
 
-data.body.brand = brandData('header', header.logo !== undefined, header.service !== undefined, header.operator !== undefined, header.beta === true, '/');
+data.body.brand = brandData('header', header.logo, header.service, header.operator, header.beta === true, '/');
 
 if (header.links !== undefined || header.search) {
   hasNavbar = true;

diff --git a/src/component/header/style/_legacy.scss b/src/component/header/style/_legacy.scss
@@ -37,13 +37,9 @@
         overflow: visible;
       }
     }
-  }
-}
 
-@include respond-from(lg) {
-  @include legacy.is(ie11) {
-    #{ns(header)} {
-      #{ns(modal)} {
+    #{ns(modal)} {
+      @include respond-from(lg) {
         position: static;
         overflow: visible;
       }

diff --git a/src/component/header/style/_scheme.scss b/src/component/header/style/_scheme.scss
@@ -13,16 +13,20 @@
       @include elevation.elevate(raised, (legacy: $legacy));
     }
 
+    &__service {
+      @include color.box-shadow(default grey, (legacy:$legacy), top-1-in);
+    }
+
     @include media-query.respond-from(lg) {
+      @include elevation.elevate(raised, (legacy: $legacy));
+
       &__brand {
-        @include elevation.drop();
+        @include elevation.drop((legacy:$legacy));
       }
-      @include elevation.elevate(raised, (legacy: $legacy));
-    }
 
-    &__service {
-      @include color.box-shadow(default grey, (legacy:$legacy), top-1-in);
-      @include color.no-box-shadow(lg);
+      &__service {
+        @include color.no-box-shadow((legacy:$legacy));
+      }
     }
 
     &__menu-links {
@@ -32,21 +36,13 @@
 
       #{ns(btn)} {
         @include btn-kind-scheme(4, $legacy);
-        @include color.box-shadow(default grey, (legacy:$legacy), bottom-1-in);
-        @include color.no-box-shadow;
-      }
-
-      ul > li:last-child #{ns(btn)} {
-        @include color.no-box-shadow;
+        @include color.no-box-shadow((legacy: $legacy));
       }
     }
 
     &__tools-links {
       #{ns(btn)} {
         @include btn-kind-scheme(4, $legacy);
-        @include after {
-          @include color.box-shadow(default grey, (legacy:$legacy));
-        }
       }
     }
 

diff --git a/src/component/header/style/module/_brand.scss b/src/component/header/style/module/_brand.scss
@@ -3,14 +3,16 @@
 /// @group header
 ////
 
+@use 'module/media-query';
+
 #{ns(header)} {
   &__brand {
     @include display-flex(row, center, flex-start, wrap);
     @include margin-y(-4v, lg);
     @include size(100%);
     @include padding-x(1v);
 
-    @include respond-from(lg) {
+    @include media-query.respond-from(lg) {
       flex-wrap: nowrap;
       @include size(auto);
       @include padding-x(0);
@@ -72,7 +74,7 @@
     @include margin-x(0, lg);
     @include size(100%);
 
-    @include respond-from(lg) {
+    @include media-query.respond-from(lg) {
       width: auto;
     }
 

diff --git a/src/component/navigation/style/module/_menu.scss b/src/component/navigation/style/module/_menu.scss
@@ -3,8 +3,6 @@
 /// @group navigation
 ////
 
-@use 'module/color';
-
 #{ns(menu)} {
   @include margin(-4px -4v);
   @include padding(4px 4v);
@@ -30,15 +28,6 @@
       @include padding(0);
       @include margin-bottom(8v);
     }
-
-    & > *:first-child,
-    & > *:hover,
-    & > *:hover + * {
-      &,
-      & > #{ns(nav__link)} {
-        @include color.no-box-shadow;
-      }
-    }
   }
 
   #{ns(nav__link)} {

diff --git a/src/component/navigation/style/scheme/_menu.scss b/src/component/navigation/style/scheme/_menu.scss
@@ -14,6 +14,15 @@
 
       &__list {
         @include color.box-shadow(open blue-france, (legacy:$legacy), top-1-in);
+
+        & > *:first-child,
+        & > *:hover,
+        & > *:hover + * {
+          &,
+          & > #{ns(nav__link)} {
+            @include color.no-box-shadow((legacy:$legacy));
+          }
+        }
       }
 
       #{ns(nav__link)} {

diff --git a/src/component/sidemenu/style/_legacy.scss b/src/component/sidemenu/style/_legacy.scss
@@ -16,7 +16,7 @@
 
     &__btn {
       &[aria-expanded] {
-        @include icon-legacy(arrow-down-s-line, sm);
+        @include icon-legacy(arrow-down-s-line, sm, after);
       }
     }
   }

diff --git a/src/component/sidemenu/style/_scheme.scss b/src/component/sidemenu/style/_scheme.scss
@@ -11,20 +11,20 @@
   #{ns(sidemenu)} {
     @include color.box-shadow(default grey, (legacy:$legacy), bottom-1-in top-1-in);
     @include media-query.respond-from(md) {
-      @include color.no-box-shadow();
+      @include color.no-box-shadow((legacy: $legacy));
     }
 
     /*
-    @include elevation.elevate(raised);
+    @include elevation.elevate(raised, (legacy:$legacy));
     @include respond-from(md) {
-      @include elevation.drop;
+      @include elevation.drop((legacy:$legacy));
     }
      */
 
     @include title {
       @include color.text(title grey, (legacy:$legacy));
       @include color.box-shadow(default grey, (legacy:$legacy), bottom-1-in);
-      @include color.no-box-shadow(md);
+      @include color.no-box-shadow((breakpoint: md, legacy: $legacy));
     }
 
     @include list-item {
@@ -76,13 +76,5 @@
         }
       }
     }
-
-    /*
-    &__btn {
-      @at-root #{ns(sidemenu__inner)} > #{&} {
-        @include color.background(default grey, (legacy:$legacy));
-      }
-    }
-     */
   }
 }