dsfr.scss

@import 'colors';

// overwrite DSFR style for SimpleFormatComponent, some user use markdown with
// ordered list having paragraph between list item
ol.fr-ol-content--override {
  list-style-type: decimal;

  li::marker {
    content: inherit;
  }
}

// with Marianne font, weight of font is less bolder, so bold it up
.button.primary {
  font-weight: bold;
}

trix-editor.fr-input {
  max-height: none;
}

.fr-header {
  .fr-notice {
    // get back link underlined in notices, because they are usually hidden in headers
    --underline-img: linear-gradient(0deg, currentColor, currentColor);
  }
}

// Fix firefox < 80, Safari < 15.4, Chrome < 83 not supporting "appearance: auto" on inputs
// This rule was set by DSFR for DSFR design, but broke our legacy forms.
input[type='checkbox'] {
  -moz-appearance: checkbox;
  -moz-appearance: auto;

  -webkit-appearance: checkbox;
  -webkit-appearance: auto;
}

input[type='radio'] {
  -moz-appearance: radio;
  -moz-appearance: auto;

  -webkit-appearance: radio;
  -webkit-appearance: auto;
}

// remove additional calendar icon on date input already handle by Firefox navigator
@-moz-document url-prefix() {
  .fr-input[type='date'] {
    background-image: none;
  }
}

.fr-btn.fr-btn--icon-left[target='_blank'] {
  &::after {
    display: none;
  }
}

// dans le DSFR il est possible d’avoir un bouton seulement avec une icone mais j’ai du surcharger ici pour eviter d’avoir des marges de l’icone. Je n’ai pas bien compris pourquoi
.fr-btns-group--sm.fr-btns-group--icon-left
  .fr-btn[class*=' fr-icon-'].icon-only::before {
  margin-left: 0;
  margin-right: 0;
}

.fr-btn.fr-btn--secondary.danger {
  color: $light-red;
  box-shadow: 0px 0px 0px 1px $light-red;
}

// on utilise le dropdown de sélecteur de langue pour un autre usage donc on veut retirer l’icone
.fr-translate .fr-translate__btn.custom-fr-translate-no-icon::before {
  display: none;
}

// on souhaite que le dropdown s’adapate correctement en largeur
.fr-translate .fr-menu__list.max-content {
  width: max-content;
}

// on applique le comportement desktop du sélecteur de langue aux terminaux de toute dimension
.fr-translate .fr-menu__list {
  display: grid;
  grid-template-rows: repeat(var(--rows), auto);
  grid-auto-flow: column;
}

.fr-translate__language[aria-current]:not([aria-current='false']) {
  display: inline-flex;
}

// on veut ajouter un gris plus clair dans le side_menu
.fr-sidemenu__item .fr-sidemenu__link.custom-link-grey {
  color: var(--text-disabled-grey);
}

// on veut ferrer à droite le dropdown de sélecteur de langue
@media (min-width: 62em) {
  .fr-nav__item.custom-fr-translate-flex-end {
    align-items: flex-end;
  }
}

// improve readability in Windows High Contrast Mode
@media screen and (forced-colors: active) {
  .fr-input,
  .fr-select,
  .fr-btn {
    border: 2px solid var(--border-action-high-grey);
  }

  .fr-radio-group input[type='radio'] {
    opacity: 1;
  }

  .fr-tabs__tab[aria-selected='true']:not(:disabled) {
    border: 5px solid var(--border-action-high-grey);
  }

  .fr-tabs__tab {
    border: 2px solid var(--border-action-high-grey);
  }
}

// On restaure la visibilité des éléments .fr-search-bar .fr-label (en appliquant les valeurs par défaut des différentes propriétés)
// Et on utilise la classe .sr-only pour masquer les éléments souhaités au cas par cas
.fr-search-bar .fr-label {
  position: initial;
  width: initial;
  height: initial;
  padding: initial;
  margin: initial;
  overflow: initial;
  clip: initial;
  white-space: initial;
  border: initial;
  display: block; // Pour cette valeur spécifique, on récupère celle de .fr-label
}

// We use the DSFR badge design to highlight the email in FranceConnect page
// but we don't want it to be uppercase
.fr-badge--lowercase {
  text-transform: lowercase;
}
// We use the DSFR badge design to highlight a warning in the combobox
// but as it is a two sentences warning, we want to keep the original case
.fr-badge--no-text-transform {
  text-transform: none;
}

// Caption is bold, but all-procedures table use fr-tag in caption
.fr-table caption .fr-tag {
  font-weight: normal;
}

// We remove the line height because it creates unharmonized spaces - most of all in table
.fr-tags-group > li {
  line-height: inherit;
}

.fr-cell--numeric {
  font-variant-numeric: tabular-nums;
}

.fr-text--monospace {
  font-family: monospace;
}

// We don't want badge to split in two lines
.fr-tag.no-wrap {
  white-space: nowrap;
}

.fr-nav__btn.hide-chevron {
  min-height: 2.5rem !important;
  height: auto !important;
  padding: 0.25rem 0.75rem !important;

  &::after {
    display: none !important;
  }
}

// We want labels to be centered inside dossiers table
.fr-table .fr-tags-group .fr-tag {
  margin-top: 0.5rem;
}

// Improve tabs alignment because we are not displaying the border around the page content
.fr-tabs__list {
  padding-left: 0;
}

.fr-tabs__list li:first-child .fr-tabs__tab {
  margin-left: 0;
}

.fr-header__tools .fr-btns-group .fr-btn {
  margin-bottom: 0;
}

// We increase from 6rem the max-width to avoid truncating hint in header search
@media (min-width: 62em) {
  .fr-header__tools .fr-header__search {
    max-width: 30rem;
  }
}

// overide tab used as navigation in the header
.fr-tabs__tab[aria-current='page']:not(:disabled) {
  background-image:
    linear-gradient(
      0deg,
      var(--border-active-blue-france),
      var(--border-active-blue-france)
    ),
    linear-gradient(
      0deg,
      var(--border-default-grey),
      var(--border-default-grey)
    ),
    linear-gradient(
      0deg,
      var(--border-default-grey),
      var(--border-default-grey)
    ),
    linear-gradient(
      0deg,
      var(--border-default-grey),
      var(--border-default-grey)
    );
  background-color: var(--background-default-grey);

  --idle: transparent;
  --hover: var(--background-default-grey-hover);
  --active: var(--background-default-grey-active);
  color: var(--text-active-blue-france);
}

.fr-tabs__tab[aria-current='page'] {
  background-size:
    100% 2px,
    1px calc(100% - 1px),
    1px calc(100% - 1px),
    0 1px;
}

// la classe fr-unhidden-md a un display inherit, qui fait hériter une valeur qui ne convient pas
.unhidden-md {
  @media (min-width: 48em) {
    display: initial !important;
  }
}

// Variante pour afficher en flex à partir de md.
.unhidden-flex-md {
  @media (min-width: 48em) {
    display: flex !important;
  }
}

// we add fr-message--warning as only error/valid/exists
.fr-message--warning::before {
  flex: 0 0 auto;
  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%;
  --icon-size: 1rem;
  content: '';
  display: inline-block;
  margin-right: 0.25rem;
  margin-top: 0.125rem;
}

.fr-message--warning::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m12.866 3 9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0ZM11 16v2h2v-2h-2Zm0-7v5h2V9h-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m12.866 3 9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0ZM11 16v2h2v-2h-2Zm0-7v5h2V9h-2Z'/%3E%3C/svg%3E");
}

.fr-message--warning {
  color: var(--text-default-warning);
}

.fr-modal__body {
  scroll-padding-bottom: 130px; /* hauteur des boutons sticky + marge */
}

// fix https://github.com/demarche-numerique/demarche.numerique.gouv.fr/issues/12648
.dossier-edit .fr-fieldset {
  align-items: flex-end;
}

// DSFR 1.14.3 added display:flex + flex-direction:row on .fr-notice__body
// (absent in 1.12.1). When a notice contains rich content like a <ul>,
// children must wrap to preserve the vertical layout.
.fr-notice__body:has(> ul) {
  flex-wrap: wrap;

  > * {
    flex-basis: 100%;
  }
}

// Supprime l'ombre du composant fr-tabs pour que l'onglet actif s'affiche sans ombre
.fr-tabs {
  box-shadow: none;
}

// Accordéons de la page suivi-et-décision
#suivi-et-decision .fr-accordion__btn {
  color: var(--text-title-grey);
  font-weight: bold;
}

#suivi-et-decision .fr-collapse--expanded {
  padding-bottom: 3rem;
}

#suivi-et-decision .fr-collapse--expanded > :last-child {
  margin-bottom: 0;
}

// Réduit le margin droit du toggle lorsqu'il n'y a pas de label associé
.fr-toggle.fr-toggle--no-label label::before {
  margin-right: 0.5rem;
}

// On veut que pouvoir styler un bouton comme un lien dsfr. Sauf que le style des liens est callé sur href, pas valide niveau html de mettre ca sur un bouton
// alors on duplique.
[data-href] {
  background-image: var(--underline-img), var(--underline-img);
  background-position:
    var(--underline-x) 100%,
    var(--underline-x) calc(100% - var(--underline-thickness));
  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--underline-hover-width) calc(var(--underline-thickness) * 2),
    var(--underline-idle-width) var(--underline-thickness);
  transition: background-size;
}

// Hack pour la modale d'instruction qui est déclarée
// à l'interieur d'un groupe de boutons
.fr-btns-group--inline-md #modal-instruction-button .fr-btn.fr-btn--close {
  margin-left: auto;
}