demarches-normaliennes/app/assets/stylesheets/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);
  }
}

.fr-label + .fr-ds-combobox {
  // same as .fr-label + .fr-input
  margin-top: 0.5rem;
}

.fr-ds-combobox {
  .fr-autocomplete {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'%3E%3C/path%3E%3C/svg%3E");
  }
}

.fr-ds-combobox__multiple {
  .fr-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }
}

.fr-ds-combobox__menu {
  &[data-placement='top'] {
    --origin: translateY(8px);
  }

  &[data-placement='bottom'] {
    --origin: translateY(-8px);
  }

  &[data-placement='right'] {
    --origin: translateX(-8px);
  }

  &[data-placement='left'] {
    --origin: translateX(8px);
  }

  &[data-entering] {
    animation: popover-slide 200ms;
  }

  &.fr-menu {
    width: var(--trigger-width);
    top: unset;

    .fr-menu__list {
      display: block;
      width: unset;
      max-height: 300px;
      overflow: auto;
    }

    .fr-menu__item {
      &[data-selected] {
        font-weight: bold;
      }

      &[data-focused] {
        font-weight: bold;
      }
    }
  }
}

@keyframes popover-slide {
  from {
    transform: var(--origin);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 62em) {
  .fr-ds-combobox__menu {
    &.fr-menu .fr-menu__list {
      z-index: calc(var(--ground) + 1000);
      background-color: var(--background-default-grey);
      --idle: transparent;
      --hover: var(--background-overlap-grey-hover);
      --active: var(--background-overlap-grey-active);
      filter: drop-shadow(var(--overlap-shadow));
      box-shadow: inset 0 1px 0 0 var(--border-open-blue-france);
    }
  }
}

// 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-right
  .fr-btn[class*=' fr-icon-'].icon-only::after {
  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 France Connect page
// but we don't want it to be uppercase
.fr-badge--lowercase {
  text-transform: lowercase;
}

// 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;
}

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