@utrecht/components/alert-dialog/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.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/* stylelint-disable-next-line block-no-empty */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/* No good use case for `--ok` yet */
/*
Apply `.utrecht-alert-dialog` to any element with this class name, with one exception.

The HTML `<dialog>` element must have `display: none` until the `open` attribute is set,
so do not apply these styles to an HTML `<dialog>` element without `open` attribute.
*/
.utrecht-alert-dialog:not(dialog:not([open])) {
  --utrecht-alert-dialog-margin-block-start: auto;
  --utrecht-alert-dialog-margin-block-end: auto;
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
  border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
  border-radius: var(--utrecht-alert-border-radius, 0);
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
  column-gap: var(--utrecht-alert-column-gap);
  display: flex;
  flex-direction: row;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
  padding-block-end: var(--utrecht-alert-padding-block-end);
  padding-block-start: var(--utrecht-alert-padding-block-start);
  padding-inline-end: var(--utrecht-alert-padding-inline-end);
  padding-inline-start: var(--utrecht-alert-padding-inline-start);
  border-color: var(--utrecht-alert-dialog-border-color);
  border-radius: var(--utrecht-alert-dialog-border-radius, 0);
  border-style: solid;
  border-width: var(--utrecht-alert-dialog-border-width, 0); /* reset HTML <dialog> border by default */
  box-shadow: var(--utrecht-alert-dialog-box-shadow);
  max-block-size: var(--utrecht-alert-dialog-max-block-size);
  max-inline-size: var(--utrecht-alert-dialog-max-inline-size);
  min-block-size: var(--utrecht-alert-dialog-min-block-size);
  min-inline-size: var(--utrecht-alert-dialog-min-inline-size);
}

.utrecht-alert-dialog::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;
}
@keyframes utrecht-backdrop-fade-in {
  from {
    opacity: 0%;
  }
  to {
    opacity: var(--_utrecht-backdrop-opacity);
  }
}
@media (prefers-reduced-motion: reduce) {
  .utrecht-alert-dialog::backdrop {
    --_utrecht-backdrop-fade-in-animation-duration: 0;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .utrecht-alert-dialog::backdrop {
    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
  }
}

.utrecht-alert-dialog__icon {
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
  --utrecht-icon-size: var(--utrecht-alert-icon-size);
  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
}

.utrecht-alert-dialog__message {
  row-gap: var(--utrecht-alert-message-row-gap);
}

.utrecht-alert-dialog--error {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-error-color);
}

.utrecht-alert-dialog--info {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-info-color);
}

.utrecht-alert-dialog--warning {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-warning-color);
}