@rhavenside/baseline-ui 1.0.5 → 1.0.7

package/dist/baseline.css

@@ -3666,7 +3666,7 @@ textarea {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--z-index-modal-backdrop);
+  z-index: 1;
   width: 100vw;
   height: 100vh;
   background: var(--color-bg-overlay);
@@ -3684,18 +3684,23 @@ textarea {
   overflow-x: hidden;
   overflow-y: auto;
   outline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
 }
 
 .bl-modal-dialog {
   position: relative;
-  width: auto;
-  margin: var(--spacing-md);
+  width: 100%;
+  max-width: 500px;
+  margin: 0;
   pointer-events: none;
+  z-index: 2;
 }
 @media (min-width: 576px) {
   .bl-modal-dialog {
     max-width: 500px;
-    margin: var(--spacing-xl) auto;
   }
 }
 @media (min-width: 768px) {
@@ -3787,27 +3792,52 @@ textarea {
 }
 
 @media (min-width: 576px) {
-  .bl-modal-sm {
+  .bl-modal-sm .bl-modal-dialog {
     max-width: 300px;
   }
 }
 
 @media (min-width: 1024px) {
-  .bl-modal-lg {
+  .bl-modal-lg .bl-modal-dialog {
     max-width: 1000px;
   }
 }
 
 @media (min-width: 1024px) {
-  .bl-modal-xl {
+  .bl-modal-xl .bl-modal-dialog {
     max-width: 1200px;
   }
 }
 
-.bl-modal-centered .bl-modal-dialog {
-  display: flex;
+.bl-modal-top {
+  align-items: flex-start;
+  padding-top: var(--spacing-xl);
+}
+
+.bl-modal-bottom {
+  align-items: flex-end;
+  padding-bottom: var(--spacing-xl);
+}
+
+.bl-modal-left {
+  justify-content: flex-start;
+  padding-left: var(--spacing-xl);
+}
+.bl-modal-left .bl-modal-dialog {
+  margin-right: auto;
+}
+
+.bl-modal-right {
+  justify-content: flex-end;
+  padding-right: var(--spacing-xl);
+}
+.bl-modal-right .bl-modal-dialog {
+  margin-left: auto;
+}
+
+.bl-modal-centered {
   align-items: center;
-  min-height: calc(100% - var(--spacing-xl) * 2);
+  justify-content: center;
 }
 
 .bl-dropdown {
@@ -4510,13 +4540,6 @@ textarea {
   border-width: var(--border-width-base);
 }
 
-@font-face {
-  font-family: "Baseline Icons";
-  src: url("../fonts/baseline-icons.woff2") format("woff2"), url("../fonts/baseline-icons.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
 .bl-icon {
   display: inline-block;
   font-family: "Baseline Icons";