react-toolbox/components/dialog/style.scss

@import "../variables";
@import "../mixins";

$dialog-color-title: unquote("rgb(#{$color-black})") !default;
$dialog-color-white: unquote("rgb(#{$color-white})") !default;
$dialog-content-padding: 2.4 * $unit;
$dialog-navigation-padding: .8 * $unit;
$dialog-translate-y: 4 * $unit;

.root {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $z-index-high;
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  pointer-events: none;
  justify-content: center;
  align-content: center;
  align-items: center;

  > .content {
    opacity: 0;
    transform: translateY(-$dialog-translate-y);
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $color-overlay;
  opacity: 0;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: opacity;
}

.content {
  display: flex;
  max-width: 96vw;
  max-height: 96vh;
  flex-direction: column;
  background-color: $dialog-color-white;
  border-radius: $border-radius;
  box-shadow: $zdepth-shadow-5;
  transition-delay: $animation-delay;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: opacity, transform;
}

.title {
  @include typo-title();
  margin-bottom: 1.6 * $unit;
  color: $dialog-color-title;
  flex-grow: 0;
}

.body {
  padding: $dialog-content-padding;
  overflow-y: scroll;
  color: $color-text-secondary;
  flex-grow: 2;
}

.navigation {
  padding: $dialog-navigation-padding;
  text-align: right;
  flex-grow: 0;
}

.button {
  min-width: 0;
  padding-right: $dialog-navigation-padding;
  padding-left: $dialog-navigation-padding;
  margin-left: $dialog-navigation-padding;
}

.active {
  pointer-events: all;

  > .overlay {
    opacity: $color-overlay-opacity;
  }

  > .content {
    opacity: 1;
    transform: translateY(0%);
  }
}

.small > .content {
  width: 30vw;
}

.normal > .content {
  width: 50vw;
}

.large > .content {
  width: 96vw;
}