diff --git a/module/selector/_index.scss b/module/selector/_index.scss index 95f2727f9..4e54e7ac0 100644 --- a/module/selector/_index.scss +++ b/module/selector/_index.scss @@ -2,3 +2,4 @@ @forward 'function/associate'; @forward 'mixin/namespace'; @forward 'mixin/theme'; +@forward 'mixin/current'; diff --git a/module/selector/mixin/_current.scss b/module/selector/mixin/_current.scss new file mode 100644 index 000000000..c14626720 --- /dev/null +++ b/module/selector/mixin/_current.scss @@ -0,0 +1,15 @@ +/// Ajout d'un sélecteur pour l'élément courant +/// @access public + +@mixin current { + &[aria-current]:not([aria-current="false"]) { + @content; + }; +} + +@mixin not-current { + &:not([aria-current]), + &[aria-current="false"]{ + @content; + } +} diff --git a/src/component/breadcrumb/style/_legacy.scss b/src/component/breadcrumb/style/_legacy.scss index b5d0796e0..1c9ef085e 100644 --- a/src/component/breadcrumb/style/_legacy.scss +++ b/src/component/breadcrumb/style/_legacy.scss @@ -4,6 +4,7 @@ //// @use 'module/legacy'; +@use 'module/selector'; @include legacy.is(ie11) { /** @@ -13,7 +14,7 @@ @include disable-list-style-legacy; &__link { - &:not([aria-current]) { + @include selector.not-current { @include icon-legacy(arrow-right-s-line, sm, after); } } diff --git a/src/component/breadcrumb/style/_module.scss b/src/component/breadcrumb/style/_module.scss index c13f144bf..0b53b06de 100644 --- a/src/component/breadcrumb/style/_module.scss +++ b/src/component/breadcrumb/style/_module.scss @@ -4,6 +4,7 @@ //// @use 'module/spacing'; +@use 'module/selector'; /** un padding de 4px et une marge négative en compensation sont mis en place afin d'éviter de couper le focus. @@ -82,7 +83,7 @@ un padding de 4px et une marge négative en compensation sont mis en place afin @include hover-underline; @include padding(0); - &[aria-current] { + @include selector.current { pointer-events: none; cursor: default; @include disable-underline; diff --git a/src/component/breadcrumb/style/_scheme.scss b/src/component/breadcrumb/style/_scheme.scss index 0fb9214a5..7ae2c44e7 100644 --- a/src/component/breadcrumb/style/_scheme.scss +++ b/src/component/breadcrumb/style/_scheme.scss @@ -4,13 +4,16 @@ //// @use 'module/color'; +@use 'module/selector'; @mixin _breadcrumb-scheme($legacy: false) { #{ns(breadcrumb)} { @include color.text(mention grey, (legacy:$legacy)); - &__link[aria-current] { - @include color.text(active grey, (legacy:$legacy)); + &__link { + @include selector.current { + @include color.text(default grey, (legacy:$legacy)); + } } } } diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index 548dde0ca..13c16c46d 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -4,6 +4,7 @@ //// @use 'module/spacing'; +@use 'module/selector'; #{ns(nav)} { @include disable-underline; @@ -42,7 +43,7 @@ // @include z-index(auto); - &[aria-current] { + @include selector.current { @include before { @include absolute(auto, null, 0, 0, 100%, 2px); @include margin-top(0); @@ -94,7 +95,7 @@ @include enable-tint; - &[aria-current] { + @include selector.current { position: relative; @include before('', block) { @include absolute(50%, null, null, 0, 2px, 6v); @@ -106,9 +107,11 @@ &__link { display: block; - &[aria-current]:not([href]) { - pointer-events: none; - cursor: default; + &:not([href]) { + @include selector.current { + pointer-events: none; + cursor: default; + } } } diff --git a/src/component/navigation/style/scheme/_default.scss b/src/component/navigation/style/scheme/_default.scss index a1ed00799..020629548 100644 --- a/src/component/navigation/style/scheme/_default.scss +++ b/src/component/navigation/style/scheme/_default.scss @@ -4,6 +4,7 @@ //// @use 'module/color'; +@use 'module/selector'; @mixin _navigation-scheme-nav($legacy: false) { #{ns(nav)} { @@ -11,7 +12,7 @@ &__btn { @include color.text(action-high grey, (legacy: $legacy)); - &[aria-current] { + @include selector.current { @include color.text(active blue-france, (legacy: $legacy)); @include before { @include color.background(active blue-france, (legacy: $legacy)); diff --git a/src/component/pagination/style/_contrast-scheme.scss b/src/component/pagination/style/_contrast-scheme.scss index d5c3f80ec..a357c7472 100644 --- a/src/component/pagination/style/_contrast-scheme.scss +++ b/src/component/pagination/style/_contrast-scheme.scss @@ -5,12 +5,13 @@ @use 'module/color'; @use 'module/media-query'; +@use 'module/selector'; @mixin _pagination-contrast-scheme($legacy: false) { @include media-query.high-contrast() { #{ns(pagination)} { &__link { - &[aria-current] { + @include selector.current { @include color.border(active blue-france, (legacy: $legacy, hover: true)); } } diff --git a/src/component/pagination/style/_contrast.scss b/src/component/pagination/style/_contrast.scss index 053bc641a..6593dc960 100644 --- a/src/component/pagination/style/_contrast.scss +++ b/src/component/pagination/style/_contrast.scss @@ -4,11 +4,13 @@ //// @use 'module/media-query'; +@use 'module/selector'; + @include media-query.high-contrast() { #{ns(pagination)} { &__link { - &[aria-current] { + @include selector.current { justify-content: center; @include padding(calc(1v - 1px) calc(3v - 1px)); } diff --git a/src/component/pagination/style/_module.scss b/src/component/pagination/style/_module.scss index f566c9cdb..b198e8fa0 100644 --- a/src/component/pagination/style/_module.scss +++ b/src/component/pagination/style/_module.scss @@ -3,6 +3,8 @@ /// @group pagination //// +@use 'module/selector'; + @include build-pagination(); #{ns(pagination)} { @@ -34,9 +36,11 @@ @include disable-underline; @include relative; - &[aria-current]:not([href]) { - cursor: default; - pointer-events: none; + &:not([href]) { + @include selector.current { + cursor: default; + pointer-events: none; + } } &--first { diff --git a/src/component/pagination/style/_scheme.scss b/src/component/pagination/style/_scheme.scss index f710fefe4..c4c88c1be 100644 --- a/src/component/pagination/style/_scheme.scss +++ b/src/component/pagination/style/_scheme.scss @@ -5,18 +5,19 @@ @use 'module/color'; @use 'module/disabled'; +@use 'module/selector'; @mixin _pagination-scheme($legacy: false) { #{ns(pagination)} { @include color.text(action-high grey, (legacy: $legacy)); &__link { - &[aria-current] { + @include selector.current { @include color.background(active blue-france, (legacy: $legacy, hover: true)); @include color.text(inverted blue-france, (legacy: $legacy)); } - &:not([aria-current]) { + @include selector.not-current { @include disabled.selector((can-be-link: true), (legacy: $legacy, text: true,)); } } diff --git a/src/component/sidemenu/style/_scheme.scss b/src/component/sidemenu/style/_scheme.scss index b6ead368e..985c61b50 100644 --- a/src/component/sidemenu/style/_scheme.scss +++ b/src/component/sidemenu/style/_scheme.scss @@ -6,6 +6,7 @@ @use 'module/color'; @use 'module/elevation'; @use 'module/media-query'; +@use 'module/selector'; @mixin _sidemenu-scheme($legacy: false) { #{ns(sidemenu)} { @@ -68,7 +69,7 @@ &__btn { @include color.text(action-high blue-france, (legacy:$legacy)); - &[aria-current] { + @include selector.current { @include color.text(active blue-france, (legacy:$legacy)); @include before { @include color.background(border active blue-france, (legacy:$legacy)); diff --git a/src/component/sidemenu/style/module/_action.scss b/src/component/sidemenu/style/module/_action.scss index d63a194a3..c83fac8fb 100644 --- a/src/component/sidemenu/style/module/_action.scss +++ b/src/component/sidemenu/style/module/_action.scss @@ -3,6 +3,8 @@ /// @group sidemenu //// +@use 'module/selector'; + /** * Styles du bouton et du lien d'accès direct du sidemnu */ @@ -19,7 +21,7 @@ @include enable-tint; - &[aria-current] { + @include selector.current { @include before('') { @include absolute(3v, null, 3v, 0, 2px); } @@ -29,9 +31,11 @@ } #{ns(sidemenu__link)} { - &[aria-current]:not([href]) { - pointer-events: none; - cursor: default; + &:not([href]) { + @include selector.current { + pointer-events: none; + cursor: default; + } } } diff --git a/src/component/translate/style/_module.scss b/src/component/translate/style/_module.scss index 997f1bdc7..864542fe6 100644 --- a/src/component/translate/style/_module.scss +++ b/src/component/translate/style/_module.scss @@ -4,6 +4,7 @@ //// @use 'module/animate'; +@use 'module/selector'; #{ns(translate)} { --rows: 8; @@ -36,7 +37,7 @@ &__language { white-space: nowrap; - &[aria-current] { + @include selector.current { display: none; @include respond-from(lg) { display: inline-flex;