@lyra/components/lib/dialogs/styles/DefaultDialog.css

Basic UX components

@import 'part:@lyra/base/theme/variables-style';

@keyframes reveal {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 0;
    transform: scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

:root {
  --dialog-padding: var(--small-padding);
  --dialog-header-height: 3rem;
  --dialog-functions-height: calc(2em + (var(--medium-padding) * 2));
  --dialog-max-height: calc(100vh - 200px);
}

.root {
  position: fixed;
  z-index: var(--zindex-portal);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--backdrop-background-color);
  animation-name: fadeIn;
  animation-duration: 0.1s;
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
  animation-iteration-count: once;
  composes: flexCenter from 'part:@lyra/base/theme/layout/positioning-style';
}

.default {
  composes: root;
}

.danger {
  composes: root;
  background-color: color(var(--body-bg) a(90%));

  @nest & a {
    color: inherit;
  }
}

.success {
  composes: root;
  background-color: color(var(--body-bg) a(90%));

  @nest & a {
    color: inherit;
  }
}

.info {
  composes: root;
  background-color: color(var(--body-bg) a(90%));

  @nest & a {
    color: inherit;
  }
}

.warning {
  composes: root;
  background-color: color(var(--body-bg) a(90%));

  @nest & a {
    color: inherit;
  }
}

.dialog {
  composes: shadow-24dp from 'part:@lyra/base/theme/shadows-style';
  border: 0;
  border-radius: var(--border-radius-large);
  padding: 0;
  animation-name: reveal;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
  animation-iteration-count: once;
  transform-origin: center;
  height: auto;
  width: calc(100vw - var(--medium-padding) * 2);
  box-sizing: border-box;
  background-color: var(--body-bg);
  transition: all 0.3s linear;

  @nest .danger & {
    background-color: var(--state-danger-color);
    color: var(--state-danger-color--text);
  }

  @nest .success & {
    background-color: var(--state-success-color);
    color: var(--state-success-color--text);
  }

  @nest .warning & {
    background-color: var(--state-warning-color);
    color: var(--state-warning-color--text);
  }

  @nest .warning & {
    background-color: var(--state-warning-color);
    color: var(--state-warning-color--text);
  }

  @media (--screen-medium) {
    width: auto;
    height: auto;
  }
}

.isClosed {
  display: none;
}

.isOpen {
  display: flex;
}

.header {
  height: var(--dialog-header-height);
  line-height: var(--dialog-header-height);
  color: inherit;
  border-bottom: 1px solid var(--gray-light);

  @nest .danger & {
    border-bottom: 1px solid var(--state-danger-color--text);
  }
}

.inner {
  display: block;
  position: relative;
}

.content {
  composes: scrollY from 'part:@lyra/base/theme/layout/scrolling-style';
  box-sizing: border-box;
  max-height: calc(100vh - 50px);
  max-width: 100vw;

  @nest .hasFunctions & {
    max-height: calc(100vh - 6rem);
  }
}

.title {
  line-height: inherit;
  padding: 0 var(--dialog-padding);
  font-size: var(--font-size-h4);
  font-weight: 300;
  margin: 0;

  @media (--screen-medium) {
    margin-right: 2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.closeButton {
  position: absolute;
  color: inherit;
  top: 0.5rem;
  right: 0.5rem;
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  outline: none;
  cursor: default;
  transition: transform 0.1s linear;

  &:hover {
    transform: scale(1.2);
  }

  &:active {
    transform: scale(0.8);
  }
}

.closeButtonOutside {
  composes: closeButton;
  composes: shadow-5dp from 'part:@lyra/base/theme/shadows-style';
  color: var(--black);
  border-radius: 50%;
  background-color: var(--component-bg);
  font-size: 1rem;
  top: -1rem;
  right: -1rem;
  z-index: 1;
  height: 2rem;
  width: 2rem;

  & svg {
    height: 1rem;
    width: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.footer {
  font-size: var(--font-size-small);
  box-sizing: border-box;
  padding: var(--medium-padding);
  background-color: color(var(--body-bg) a(50%));
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  display: flex;

  @nest .default & {
    border-top: 1px solid var(--component-border-color);
  }
}