🐛 fix(tile, navigation): retrait des sélecteur css ">" (#1049)

- Retrait des selecteurs d'enfants directs pour éviter les problèmes lors de l'ajout de balises intermediaires (cas de création de sous composants)
GouvernementFR · Nov 25, 2024 · 2bf3ed9 · 2bf3ed9
1 parent ffbed46
commit 2bf3ed9
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 62 deletions.
diff --git a/src/dsfr/component/navigation/style/module/_default.scss b/src/dsfr/component/navigation/style/module/_default.scss
@@ -33,36 +33,6 @@
         @include margin-left(5v);
       }
     }
-
-    &,
-    & > * {
-      & > #{ns(nav__link)},
-      & > #{ns(nav__btn)} {
-        font-weight: bold;
-
-        @include respond-from(lg) {
-          @include padding(4v);
-          @include margin(0);
-          @include size(auto, 100%);
-          min-height: spacing.space(14v);
-          font-weight: normal;
-
-          // @include z-index(auto);
-
-          @include selector.current {
-            @include before {
-              @include absolute(auto, null, 0, 0, 100%, 2px);
-              @include margin-top(0);
-
-              @include preference.forced-colors {
-                background-color: highlight;
-                @include height(1v);
-              }
-            }
-          }
-        }
-      }
-    }
   }
 
   @include list-item {
@@ -84,6 +54,7 @@
 
     @include respond-from(lg) {
       position: initial;
+
       @include before(none);
       align-items: flex-start;
 
@@ -95,34 +66,38 @@
 
   &__link,
   &__btn {
-    @include size(100%);
+    @include display-flex(row, center, space-between);
+    font-weight: bold;
     @include padding(3v 4v);
+    @include margin(0);
+    @include size(auto, 100%);
     @include text-style(md);
     text-align: left;
 
     @include respond-from(lg) {
+      min-height: spacing.space(14v);
+      @include padding(4v);
       @include text-style(sm);
-    }
+      font-weight: normal;
+      @include enable-tint;
 
-    @include enable-tint;
+      @include selector.current {
+        @include relative;
 
-    @include selector.current {
-      position: relative;
-      @include before('', block) {
-        @include absolute(50%, null, null, 0, 2px, 6v);
-        @include margin-top(-3v);
+        @include before('') {
+          @include absolute(auto, null, 0, 0, 100%, 2px);
+          @include margin-top(0);
 
-        @include preference.forced-colors {
-          background-color: highlight;
-          @include width(1v);
+          @include preference.forced-colors {
+            background-color: highlight;
+            @include height(1v);
+          }
         }
       }
     }
   }
 
   &__link {
-    display: block;
-
     &:not([href]) {
       @include selector.current {
         pointer-events: none;
@@ -132,10 +107,6 @@
   }
 
   &__btn {
-    @include display-flex(null, center, space-between);
-    flex-direction: row;
-    @include padding(4v 3v 4v 4v, lg);
-
     @include icon(arrow-down-s-line, sm, after) {
       @include margin-left(2v);
       @include margin-right(0);

diff --git a/src/dsfr/component/navigation/style/module/_mega-menu.scss b/src/dsfr/component/navigation/style/module/_mega-menu.scss
@@ -4,6 +4,7 @@
 ////
 
 @use 'src/module/preference';
+@use 'src/module/selector';
 
 #{ns(mega-menu)} {
   @include respond-from(lg) {
@@ -41,10 +42,22 @@
   }
 
   #{ns(nav__link)} {
-    @include padding-x(4v);
-    @include padding(3v 4v, lg);
-    @include before {
-      left: 0;
+    @include padding(3v 4v);
+    @include size(100%, auto);
+    min-height: auto;
+    font-weight: normal;
+
+    @include selector.current {
+      position: relative;
+      @include before('', block) {
+        @include absolute(50%, null, null, 0, 2px, 6v);
+        @include margin-top(-3v);
+
+        @include preference.forced-colors {
+          background-color: highlight;
+          @include width(1v);
+        }
+      }
     }
   }
 
@@ -63,7 +76,9 @@
   }
 
   &__category {
-    @include font-weight(bold);
+    #{ns(nav__link)} {
+      @include font-weight(bold);
+    }
   }
 
   &__list {

diff --git a/src/dsfr/component/navigation/style/module/_menu.scss b/src/dsfr/component/navigation/style/module/_menu.scss
@@ -4,6 +4,7 @@
 ////
 
 @use 'src/module/preference';
+@use 'src/module/selector';
 
 #{ns(menu)} {
   @include margin(-4px -4v);
@@ -39,14 +40,21 @@
   }
 
   #{ns(nav__link)} {
-    @include padding-x(4v);
-    @include before {
-      left: 0;
-    }
-    @include respond-from(lg) {
-      @include padding(3v 4v);
-      @include before {
-        left: 0;
+    @include padding(3v 4v);
+    @include size(100%, auto);
+    font-weight: normal;
+    min-height: auto;
+
+    @include selector.current {
+      position: relative;
+      @include before('', block) {
+        @include absolute(50%, null, null, 0, 2px, 6v);
+        @include margin-top(-3v);
+
+        @include preference.forced-colors {
+          background-color: highlight;
+          @include width(1v);
+        }
       }
     }
   }

diff --git a/src/dsfr/component/navigation/style/scheme/_menu.scss b/src/dsfr/component/navigation/style/scheme/_menu.scss
@@ -19,7 +19,7 @@
         & > *:hover,
         & > *:hover + * {
           &,
-          & > #{ns(nav__link)} {
+          & #{ns(nav__link)} {
             @include color.no-box-shadow((legacy:$legacy));
           }
         }

diff --git a/src/dsfr/component/tile/style/module/_default.scss b/src/dsfr/component/tile/style/module/_default.scss
@@ -41,7 +41,7 @@
     @include margin(0 auto);
     overflow: hidden;
 
-    > svg {
+    svg {
       @include size(100%, 100%);
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,7 @@ @@
         @include margin(0 auto);
         overflow: hidden;
-        > svg {
+        svg {
           @include size(100%, 100%);
         }
       }
@@ Expand Down @@