@telekom/scale-components/dist/collection/components/modal/modal.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  --spacing-x: var(--telekom-spacing-composition-space-06);
  --background-overlay: var(
    --telekom-color-background-backdrop,
    rgba(108, 108, 108, 0.7)
  );

  --max-height-window: calc(
    100vh - (2 * var(--telekom-spacing-composition-space-19))
  );
  --min-height-window: ; /* undefined by design */
  --radius-window: var(--telekom-radius-large);
  --box-shadow-window: var(--telekom-shadow-top);
  --background-window: var(--telekom-color-background-surface);
  --color-window: var(--telekom-color-text-and-icon-standard);

  /*
    we're rudimentarily creating a grid here
    in the following modal--size-*,
    with 6, 8 and 12 columns

    -spacing-56 !== --telekom-spacing-unrelated-sm
  */
  --size-window-small: calc(
    (6 * var(--telekom-spacing-unit-x14, 3.5rem)) +
      (5 * var(--telekom-spacing-composition-space-10))
  );
  --size-window-default: calc(
    (8 * var(--telekom-spacing-unit-x14, 3.5rem)) +
      (7 * var(--telekom-spacing-composition-space-10))
  );
  --size-window-large: calc(
    (12 * var(--telekom-spacing-unit-x14, 3.5rem)) +
      (11 * var(--telekom-spacing-composition-space-10))
  );

  --spacing-x-header: var(--telekom-spacing-composition-space-08);
  --spacing-y-header: var(--telekom-spacing-composition-space-08);

  --border-bottom-header-has-scroll: var(--telekom-line-weight-standard) solid
    var(--telekom-color-ui-subtle);

  --font-family-heading: var(--telekom-typography-font-family-sans);
  --font-size-heading: var(--telekom-typography-font-size-callout);
  --font-weight-heading: var(--telekom-typography-font-weight-extra-bold);

  --spacing-close-button: var(--telekom-spacing-composition-space-04);
  --radius-close-button: var(--telekom-radius-standard);
  --transition-close-button: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --box-shadow-close-button-focus: 0 0 0 var(--telekom-line-weight-highlight)
    var(--telekom-color-functional-focus-standard);
  --color-close-button: var(--telekom-color-text-and-icon-standard);
  --color-close-button-hover: var(--telekom-color-primary-hovered);
  --color-close-button-active: var(--telekom-color-primary-pressed);

  --spacing-x-body-wrapper: var(--telekom-spacing-composition-space-08);
  --spacing-y-body: var(--telekom-spacing-composition-space-08);

  --spacing-actions: var(--telekom-spacing-composition-space-06)
    var(--telekom-spacing-composition-space-08)
    var(--telekom-spacing-composition-space-08);

  --spacing-x-actions-slotted: var(--telekom-spacing-composition-space-04);
  --background-actions-has-scroll: var(
    --telekom-color-background-surface-subtle
  );
}

.modal {
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  display: none;
  z-index: 100;
  position: fixed;
  background: var(--background-overlay);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);
}

.modal.modal--is-open {
  display: flex;
}

.modal__backdrop {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  position: absolute;
}

.modal__window {
  width: 100%;
  height: auto;
  display: flex;
  z-index: 1;
  position: relative;
  overflow-y: auto;
  flex-direction: column;
  background-color: var(--background-window);
  color: var(--color-window);
  max-height: var(--max-height-window);
  min-height: var(--min-height-window);
  border-radius: var(--radius-window);
  box-shadow: var(--box-shadow-window);
}

.modal__window .modal__body-wrapper {
  overflow-y: auto;
  flex-shrink: 1;
  flex-grow: 1;
}

.modal--size-small .modal__window {
  max-width: var(--size-window-small);
}

.modal--size-default .modal__window {
  max-width: var(--size-window-default);
}

.modal--size-large .modal__window {
  max-width: var(--size-window-large);
}

@media (max-height: 30em) {
  .modal__window {
    max-height: calc(100vh - var(--telekom-spacing-composition-space-08));
  }
}

/* a11y: transparent border for Windows HCM */
.modal__window:after {
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid transparent;
  height: 100%;
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border-radius: var(--radius-window);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: space-between;
  margin-left: var(--spacing-x-header);
  margin-right: var(--spacing-x-header);
  padding-top: var(--spacing-y-header);
  padding-bottom: var(--spacing-y-header);
}

.modal--has-scroll .modal__header {
  border-bottom: var(--border-bottom-header-has-scroll);
}

.modal__heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heading);
}

.modal__close-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-close-button);
  margin-bottom: calc(-2 * var(--spacing-close-button));
  border: 0;
  border-radius: var(--radius-close-button);
  outline: none;
  color: var(--color-close-button);
  background: transparent;
  transition: var(--transition-close-button);
  transform: translate(
    var(--spacing-close-button),
    calc(-1 * var(--spacing-close-button))
  );
  appearance: none;
  cursor: pointer;
  user-select: none;
}

.modal__close-button:focus {
  box-shadow: var(--box-shadow-close-button-focus);
}

.modal__close-button:hover {
  color: var(--color-close-button-hover);
}

.modal__close-button:active {
  color: var(--color-close-button-active);
}

.modal__body-wrapper {
  padding-left: var(--spacing-x-body-wrapper);
  padding-right: var(--spacing-x-body-wrapper);
}

.modal--has-body .modal__body-wrapper {
  min-height: var(--telekom-spacing-related-lg);
}

/* we use `margin` and top padding because we want to allow "margin collapse" */
/* @see https://web.dev/learn/css/spacing/#margin-collapse */
.modal--has-body .modal__body {
  margin-top: 0;
  margin-bottom: 0;
}
.modal--has-body:not(.modal--has-actions) .modal__body {
  margin-bottom: var(--spacing-y-body);
}
.modal--has-scroll.modal--has-body .modal__body {
  margin-top: var(--spacing-y-body);
  margin-bottom: var(--spacing-y-body);
}

.modal--has-body .modal__body ::slotted(*) {
  font: var(--telekom-text-style-body);
}
.modal--has-body .modal__body ::slotted(*:not([slot]):first-child) {
  margin-top: 0;
}
.modal--has-body .modal__body ::slotted(*:not([slot]):last-of-type) {
  margin-bottom: 0;
}

.modal__actions {
  display: none;
  flex-shrink: 0;
  justify-content: flex-end;
  padding: var(--spacing-actions);
}

.modal__actions ::slotted(*) {
  margin-left: var(--spacing-x-actions-slotted);
}

.modal--has-actions .modal__actions {
  display: flex;
}

.modal--align-actions-left .modal__actions {
  justify-content: flex-start;
}

.modal--has-scroll .modal__actions {
  background-color: var(--background-actions-has-scroll);
}