oui-kit/lib/modal/oui-modal.styl

🎯 *UI toolkit with a French touch* 🇫🇷

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

:root {
  --modal-radius: px(8);
  --modal-separator: transparent;
  --modal-bg: var(--dialog-bg, var(--s2-bg));
  --modal-speed: 400ms;
  --modal-blur: 2px;
  --modal-backdrop: rgba(0, 0, 0, 0.5);
}

/* .oui-modal-active {
  &, body {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
} */
.oui-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  // height: var(--visible-height, 100%);
  z-index: -z-index-overlay;
  background: var(--modal-backdrop);
  cursor: default;
  will-change: transform;
  isolation: isolate;
  backdrop-filter: blur(var(--modal-blur));
  -webkit-backdrop-filter: blur(var(--modal-blur));

  // clip-path: rect(0 0 100% 100%);

  // Background overlay
  ._modal_overlay {
    display: flex;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }

  ._modal_container {
    width: Min(52ch, 90vw);
  }

  &._modal_size_small ._modal_container {
    width: Min(36ch, 90vw);
  }

  &._modal_size_large ._modal_container {
    width: Min(80ch, 90vw);
    height: Min(px(800), 90vh);
  }

  @media -media-desktop {
    &._modal_size_max ._modal_container {
      width: calc(100vw - 4rem);
      max-width: calc(100vw - 4rem);
      height: calc(100vh - 4rem);
      max-height: calc(100vh - 4rem);
    }
  }

  ._modal_container {
    z-index: -z-index-modal;
    will-change: transform;
    opacity: 1;
    overflow: hidden;
    use: stack-y;
    position: relative;
    box-shadow: lg;
    background: var(--modal-bg);
    border: 1px solid var(--modal-separator);
    border-radius: var(--modal-radius);
    max-height: 75vh;
    transform: translate3d(0, 0, 0);

    modalSheet() {
      border: inherit;
      border-radius: inherit;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      max-height: 100%;
      // margin-top: 44;
      border-top-left-radius: var(--modal-radius);
      border-top-right-radius: var(--modal-radius);
      
      .virtual-keyboard & {
        padding-bottom: 0;

        ._modal_footer {
          transition: border var(--modal-speed);
          --modal-separator: var(--t3-bg);
          padding-bottom: var(--safe-bottom, 0);
        }

        ._modal_bottom_space {
          height: calc(100vh - var(--visible-height, 0)) !important;
        }
      }
    }

    @media -media-mobile {
      :has(._modal_sheet) & {
        modalSheet();
      }
    }

    :has(._modal_force_sheet) & {
      modalSheet();
    }
  }

  ._modal_title {
    use: stack-y;
    font-weight: 600;
    padding-right: 40;
    padding-bottom: 16;
  }

  ._modal_header {
    use: stack-y;
    border-bottom: 1px solid var(--modal-separator, -gray-200);
    padding: 16;
    padding-bottom: 0;
    min-height: 48;
  }

  ._modal_close {
    position: absolute;
    top: 2;
    right: 2;
    background: transparent;
    border-radius: var(--modal-radius);
    // z-index: 99999;
    font-size: 16;
    cursor: unquote("pointer");
    color: inherit;
    padding: 12;
    border: none;
    appearance: none;

    &:hover {
      color: var(--p1-fg);
    }
  }

  ._modal_footer {
    border-top: 1px solid var(--modal-separator, -gray-200);
    text-align: right;
    // white-space: nowrap;
    padding: 16;
  }

  ._modal_body {
    use: stack-item-grow;
    use: stack-item-scroll;
    margin: 0;
    min-height: 32;
    padding-y: 16;
    padding-x: 16;
    padding-bottom: calc(var(--safe-bottom, 0) + 16px);
    position: relative;
    display: block;
  }

  ._modal_header + ._modal_body {
    padding-top: 0;
  }

  &._modal_has_footer ._modal_body {
    // todo: 4px to allow focus ring to show up correctly
    padding-bottom: 4;
  }

  &-transition {
    &-enter-active, &-leave-active {
      transition-property: all;
      transition-duration: var(--modal-speed);
      transition-timing-function: ease;

      ._modal_container {
        transition-property: opacity transform;
        transition-duration: var(--modal-speed);
        transition-timing-function: ease;
      }
    }

    &-enter-active {
      animation: oui-blur-in var(--modal-speed);
    }

    &-leave-active {
      animation: oui-blur-out var(--modal-speed);
    }

    &-enter-from, &-leave-to {
      background-color: rgba(0, 0, 0, 0);

      ._modal_container {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
      }
    }
  }
}

.oui-dialog {
  input {
    width: 100%;
  }
}

/* Let's define an animation: */
@keyframes oui-blur-in {
  from {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background-color: rgba(0, 0, 0, 0);
  }

  to {
    backdrop-filter: blur(var(--modal-blur));
    -webkit-backdrop-filter: blur(var(--modal-blur));
    background: var(--modal-backdrop);
  }
}

@keyframes oui-blur-out {
  from {
    backdrop-filter: blur(var(--modal-blur));
    -webkit-backdrop-filter: blur(var(--modal-blur));
    background: var(--modal-backdrop);
  }

  to {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background-color: rgba(0, 0, 0, 0);
  }
}