initial mistakeHEADmain

1 files changed, 168 insertions, 0 deletions

diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss
new file mode 100644
index 0000000..af5cb16
--- /dev/null
+++ b/app/assets/stylesheets/components/_modal.scss
@@ -0,0 +1,168 @@
+/**
+ * Modal (<dialog>)
+ */
+
+:root {
+  --scrollbar-width: 0px;
+}
+
+dialog {
+  display: flex;
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  width: inherit;
+  min-width: 100%;
+  height: inherit;
+  min-height: 100%;
+  padding: var(--spacing);
+  border: 0;
+  backdrop-filter: var(--modal-overlay-backdrop-filter);
+  background-color: var(--modal-overlay-background-color);
+  color: var(--color);
+
+  // Content
+  article {
+    $close-selector: if($enable-classes, ".close", "a[rel='prev']");
+    max-height: calc(100vh - var(--spacing) * 2);
+    overflow: auto;
+
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        max-width: map-get($viewports, "sm");
+      }
+    }
+
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        max-width: map-get($viewports, "md");
+      }
+    }
+
+    > header,
+    > footer {
+      padding: calc(var(--block-spacing-vertical) * 0.5)
+        var(--block-spacing-horizontal);
+    }
+
+    > header {
+      #{$close-selector} {
+        margin: 0;
+        margin-left: var(--spacing);
+        float: right;
+      }
+    }
+
+    > footer {
+      text-align: right;
+
+      [role="button"] {
+        margin-bottom: 0;
+
+        &:not(:first-of-type) {
+          margin-left: calc(var(--spacing) * 0.5);
+        }
+      }
+    }
+
+    p {
+      &:last-of-type {
+        margin: 0;
+      }
+    }
+
+    // Close icon
+    #{$close-selector} {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      margin-top: calc(var(--block-spacing-vertical) * -0.5);
+      margin-bottom: var(--typography-spacing-vertical);
+      margin-left: auto;
+      background-image: var(--icon-close);
+      background-position: center;
+      background-size: auto 1rem;
+      background-repeat: no-repeat;
+      opacity: 0.5;
+
+      @if $enable-transitions {
+        transition: opacity var(--transition);
+      }
+
+      &:is([aria-current], :hover, :active, :focus) {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Closed state
+  &:not([open]),
+  &[open="false"] {
+    display: none;
+  }
+}
+
+// Utilities
+@if $enable-classes {
+  .modal-is-open {
+    padding-right: var(--scrollbar-width, 0px);
+    overflow: hidden;
+    pointer-events: none;
+    touch-action: none;
+
+    dialog {
+      pointer-events: auto;
+    }
+  }
+}
+
+// Animations
+@if ($enable-classes and $enable-transitions) {
+  $animation-duration: 0.2s;
+
+  :where(.modal-is-opening, .modal-is-closing) {
+    dialog,
+    dialog > article {
+      animation-duration: $animation-duration;
+      animation-timing-function: ease-in-out;
+      animation-fill-mode: both;
+    }
+
+    dialog {
+      animation-duration: ($animation-duration * 4);
+      animation-name: modal-overlay ;
+
+      > article {
+        animation-delay: $animation-duration;
+        animation-name: modal;
+      }
+    }
+  }
+
+  .modal-is-closing {
+    dialog,
+    dialog > article {
+      animation-delay: 0s;
+      animation-direction: reverse;
+    }
+  }
+
+  @keyframes modal-overlay {
+    from {
+      backdrop-filter: none;
+      background-color: transparent;
+    }
+  }
+
+  @keyframes modal {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+  }
+}