@codegouvfr/react-dsfr/dsfr/component/password/password.main.css

French State Design System React integration library

/*!
 * DSFR v1.8.5 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@charset "UTF-8";

/* ¯¯¯¯¯¯¯¯¯ *\
  Password
\* ˍˍˍˍˍˍˍˍˍ */
.fr-password {
  position: relative;

  --text-spacing: 0 0 0.5rem 0;
}

.fr-password [data-fr-capslock]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%233a3a3a' d='M22.668 0C23.4023 0 24 .5977 24 1.332v21.336c0 .7343-.5977 1.332-1.332 1.332H1.332C.5977 24 0 23.4023 0 22.668V1.332C0 .5977.5977 0 1.332 0Zm-1.336 2.668H2.668v18.664h18.664Zm-4.664 12.664V18H7.332v-2.668ZM12 5.332 16.668 10H14v3.332h-4V10H7.332Zm0 0'/></svg>");
  background-image: var(--data-uri-svg);
}

.fr-password__checkbox {
  position: absolute;
  top: 0;
  right: 0;
}

.fr-password__input {
  margin-bottom: 0.75rem;
}

.fr-password__label {
  padding-right: 6rem;
}

.fr-password__btn {
  background-color: transparent;

  --hover: inherit;
  --active: inherit;
  color: var(--text-action-high-blue-france);
}

.fr-password__btn:disabled,
a.fr-password__btn:not([href]) {
  color: var(--text-disabled-grey);
  background-color: transparent;

  --hover: inherit;
  --active: inherit;
}

:root:where([data-fr-theme="dark"]) .fr-password [data-fr-capslock]::before {
  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23cecece' d='M22.668 0C23.4023 0 24 .5977 24 1.332v21.336c0 .7343-.5977 1.332-1.332 1.332H1.332C.5977 24 0 23.4023 0 22.668V1.332C0 .5977.5977 0 1.332 0Zm-1.336 2.668H2.668v18.664h18.664Zm-4.664 12.664V18H7.332v-2.668ZM12 5.332 16.668 10H14v3.332h-4V10H7.332Zm0 0'/></svg>");
}

.fr-password .fr-password__checkbox .fr-label {
  color: var(--text-default-grey);
}

@media (min-width: 36em) {
  /*! media sm */
}

@media (min-width: 48em) {
  /*! media md */
}

@media (min-width: 62em) {
  /*! media lg */
}

@media (min-width: 78em) {
  /*! media xl */
}