oui-kit/lib/basic/oui-notice.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-notice {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  use: center;
  text-align: center;
  color: var(--s2-fg);
  background: var(--notice-bg, inherit);
  overflow: auto;

  &._notice_cover {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: var(--visible-height, 100%);
    will-change: transform;
    isolation: isolate;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    background: var(--notice-bg, var(--bg, inherit));
  }

  &-body {
    use: stack-y;
    max-width: unquote("min(40ch, 75%)");
  }

  svg {
    size: 1em;
  }

  &-title {
    font-size: 32;
    font-weight: 500;
  }

  &-icon svg {
    color: var(--notice-fg);
    size: 64;
  }

  &-message {
    line-height: 1.45;
    white-space: pre-line;
  }

  &-icon + &-message {
    margin-top: 24;
  }

  &-icon + &-title {
    margin-top: 8;
  }

  &-title + &-message {
    margin-top: 24;
  }

  &-footer {
    margin-top: 16;
    font-size: rex(13);
  }
}