/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ SIDEMENU \* ˍˍˍˍˍˍˍˍˍ */ .fr-sidemenu { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; --underline-img: none; --text-spacing: 0; --title-spacing: 0; position: relative; margin-left: -1rem; margin-right: -1rem; /** * Titre facultatif */ /** * Variantes du sidemenu proposées juste à partir du breakpoint md */ box-shadow: inset 0 -1px 0 0 var(--border-default-grey), inset 0 1px 0 0 var(--border-default-grey); /* @include elevation.elevate(raised, (legacy:$legacy)); @include respond-from(md) { @include elevation.drop((legacy:$legacy)); } */ } .fr-sidemenu a:not([href]) { cursor: default; } .fr-sidemenu .fr-collapse { margin: -0.25rem -0.25rem 0; padding: 0.25rem 0.25rem 0; } .fr-sidemenu .fr-collapse.fr-collapsing { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .fr-sidemenu__title { padding: 1rem 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--text-title-grey); box-shadow: inset 0 -1px 0 0 var(--border-default-grey); } .fr-sidemenu__list { font-weight: 700; } .fr-sidemenu__list .fr-sidemenu__list { margin: 0 1rem 1rem; font-weight: 400; } .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__link, .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__btn { font-size: 1rem; line-height: 1.5rem; font-weight: 400; } .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__link, .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__list .fr-sidemenu__btn { font-size: 0.875rem; line-height: 1.5rem; } .fr-sidemenu__item { position: relative; } .fr-sidemenu__item::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: 0 -1px 0 0 var(--border-default-grey), inset 0 -1px 0 0 var(--border-default-grey); } .fr-sidemenu__item .fr-sidemenu__item .fr-sidemenu__item::before { content: none; } .fr-sidemenu__inner { /** * Ce wrapper ne sert que pour la version mobile * On l'utilise pour l'ouverture/fermeture du sidemenu entier */ } .fr-sidemenu__inner > .fr-collapse { margin: -0.25rem 0.75rem 0; padding: 0.25rem 0.75rem 0; } /** * Styles du bouton et du lien d'accès direct du sidemnu */ .fr-sidemenu__link, .fr-sidemenu__btn { position: relative; display: flex; flex-direction: row; align-items: center; width: 100%; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5rem; text-align: left; font-weight: 700; --hover-tint: var(--hover); --active-tint: var(--active); color: var(--text-action-high-blue-france); } .fr-sidemenu__link[aria-current]:not([aria-current=false])::before, .fr-sidemenu__btn[aria-current]:not([aria-current=false])::before { content: ""; position: absolute; top: 0.75rem; bottom: 0.75rem; left: 0; width: 2px; background-color: var(--border-active-blue-france); --idle: transparent; --hover: var(--border-active-blue-france-hover); --active: var(--border-active-blue-france-active); } .fr-sidemenu__link:not([href])[aria-current]:not([aria-current=false]) { pointer-events: none; cursor: default; } /** * Style du bouton du sidemnenu pour ouvrir/refermer les listes de niveaux 1 et 2 * Bouton pour la version mobile pour ouvrir/refermer le sidemenu */ .fr-sidemenu__btn[aria-expanded] { display: flex; flex-direction: row; align-items: center; } .fr-sidemenu__btn[aria-expanded]::after { flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/arrow-down-s-line.svg"); mask-image: url("../../icons/system/arrow-down-s-line.svg"); --icon-size: 1rem; content: ""; margin-left: auto; margin-right: 0; transition: transform 0.3s; } .fr-sidemenu__btn[aria-expanded=true]::after { transform: rotate(-180deg); } /** * Modificateur pour le bouton en version mobile permettant d'ouvrir/refermer le sidemenu * L'icône de gauche est défini dans _sidemenu.scss (provisoire) */ .fr-sidemenu__inner > .fr-sidemenu__btn { width: 100%; font-weight: 500; /** * Ajout de l'icône de menu en mode mobile (provisoire) */ } .fr-sidemenu__inner > .fr-sidemenu__btn::after { margin-right: 1rem; } .fr-sidemenu__inner > .fr-sidemenu__btn::before { flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/menu-2-fill.svg"); mask-image: url("../../icons/system/menu-2-fill.svg"); --icon-size: 1rem; content: ""; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-sidemenu__item .fr-sidemenu__link, .fr-sidemenu__item .fr-sidemenu__btn { color: var(--text-action-high-grey); } .fr-sidemenu__item:first-child::before { box-shadow: inset 0 -1px 0 0 var(--border-default-grey); } .fr-sidemenu__item:last-child::before { box-shadow: 0 -1px 0 0 var(--border-default-grey); } .fr-sidemenu__link[aria-current]:not([aria-current=false]), .fr-sidemenu__btn[aria-current]:not([aria-current=false]) { color: var(--text-active-blue-france); } .fr-sidemenu__btn[aria-expanded=true] { background-color: var(--background-open-blue-france); --idle: transparent; --hover: var(--background-open-blue-france-hover); --active: var(--background-open-blue-france-active); } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! media md */ .fr-sidemenu { margin-left: 0; margin-right: 0; padding-right: 2rem; /** * Modificateur pour que le sidemenu s'adapte à un affichage à droite du contenu * La bordure se met sur la gauche */ /** * Modificateur pour que le sidemenu soit sticky */ /** * Modificateur pour que le sidemenu soit à la fois sticky et prenne toute la hauteur de la page */ box-shadow: none; } .fr-sidemenu .fr-collapse { margin-left: -0.25rem; margin-right: -0.25rem; padding-left: 0.25rem; padding-right: 0.25rem; } .fr-sidemenu__title { margin: 0 0 1.5rem; padding: 0; box-shadow: none; } .fr-sidemenu__list .fr-sidemenu__list { margin: 0 1rem 1rem; } .fr-sidemenu__list { margin: 0; } .fr-sidemenu__item::before { content: none; } .fr-sidemenu__inner { padding: 0 1.5rem 0 0; box-shadow: inset -1px 0 0 0 var(--border-default-grey); } .fr-sidemenu__inner > .fr-collapse { padding: 0; margin: 0; overflow: initial; max-height: none; } .fr-sidemenu__inner > .fr-collapse::before { display: none; } .fr-sidemenu__inner > .fr-collapse:not(.fr-collapse--expanded) { visibility: inherit; } .fr-sidemenu--right { padding-left: 2rem; padding-right: 0; } .fr-sidemenu--right .fr-sidemenu__inner { padding: 0 1rem 0 2rem; border-right: 0; box-shadow: inset 1px 0 0 0 var(--border-default-grey); } .fr-sidemenu--sticky { position: sticky; top: 0; } .fr-sidemenu--sticky .fr-sidemenu__inner { padding-top: 0.5rem; overflow: auto; max-height: 100vh; } .fr-sidemenu--sticky-full-height { position: sticky; top: 0; height: 100vh; } .fr-sidemenu--sticky-full-height .fr-sidemenu__inner { padding-top: 0.5rem; overflow: auto; height: 100%; } .fr-sidemenu__link, .fr-sidemenu__btn { margin: 0; width: 100%; } .fr-sidemenu__btn[aria-expanded] { padding: 0.75rem 2.5rem 0.75rem 1rem; } .fr-sidemenu__btn[aria-expanded]::after { margin-right: -1.5rem; } .fr-sidemenu__inner > .fr-sidemenu__btn { display: none; } } @media (min-width: 62em) { /*! media lg */ } @media (min-width: 78em) { /*! media xl */ }