@utrecht/components/backdrop/dist/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
.utrecht-backdrop {
  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
  --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
  animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
  animation-name: utrecht-backdrop-fade-in;
  animation-timing-function: ease-in-out;
  background-color: var(--utrecht-backdrop-background-color);
  color: var(--utrecht-backdrop-color);
  opacity: var(--_utrecht-backdrop-opacity);
  -webkit-user-select: none;
  user-select: none;
  display: block;
  inset-block-end: 0;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  position: absolute;
  z-index: var(--utrecht-backdrop-z-index);
}
@keyframes utrecht-backdrop-fade-in {
  from {
    opacity: 0%;
  }
  to {
    opacity: var(--_utrecht-backdrop-opacity);
  }
}
@media (prefers-reduced-motion: reduce) {
  .utrecht-backdrop {
    --_utrecht-backdrop-fade-in-animation-duration: 0;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .utrecht-backdrop {
    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
  }
}

.utrecht-backdrop--reduced-motion {
  --_utrecht-backdrop-fade-in-animation-duration: 0;
}

.utrecht-backdrop--reduced-transparency {
  --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
}

.utrecht-backdrop--viewport {
  position: fixed;
}