@rhavenside/baseline-ui 1.0.10 → 1.0.12

package/dist/baseline.css

@@ -3672,11 +3672,14 @@ textarea {
   overflow-x: hidden;
   overflow-y: auto;
   outline: 0;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   padding: var(--spacing-md);
 }
+.bl-modal.bl-modal-open {
+  display: flex;
+}
 
 .bl-modal-backdrop {
   position: absolute;
@@ -3688,6 +3691,13 @@ textarea {
   background: var(--color-bg-overlay);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  opacity: 0;
+}
+.bl-modal.bl-modal-open .bl-modal-backdrop {
+  animation: bl-modal-backdrop-fade-in var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing .bl-modal-backdrop {
+  animation: bl-modal-backdrop-fade-out var(--transition-duration-slow) var(--transition-ease-out) forwards;
 }
 
 .bl-modal-dialog {
@@ -3713,6 +3723,60 @@ textarea {
     max-width: 800px;
   }
 }
+.bl-modal.bl-modal-open.bl-modal-top-left .bl-modal-dialog {
+  animation: bl-modal-slide-from-top-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-top .bl-modal-dialog {
+  animation: bl-modal-slide-from-top var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-top-right .bl-modal-dialog {
+  animation: bl-modal-slide-from-top-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-left .bl-modal-dialog {
+  animation: bl-modal-slide-from-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-centered .bl-modal-dialog {
+  animation: bl-modal-fade-in var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-right .bl-modal-dialog {
+  animation: bl-modal-slide-from-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-bottom-left .bl-modal-dialog {
+  animation: bl-modal-slide-from-bottom-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-bottom .bl-modal-dialog {
+  animation: bl-modal-slide-from-bottom var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-open.bl-modal-bottom-right .bl-modal-dialog {
+  animation: bl-modal-slide-from-bottom-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-top-left .bl-modal-dialog {
+  animation: bl-modal-slide-to-top-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-top .bl-modal-dialog {
+  animation: bl-modal-slide-to-top var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-top-right .bl-modal-dialog {
+  animation: bl-modal-slide-to-top-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-left .bl-modal-dialog {
+  animation: bl-modal-slide-to-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-centered .bl-modal-dialog {
+  animation: bl-modal-fade-out var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-right .bl-modal-dialog {
+  animation: bl-modal-slide-to-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-bottom-left .bl-modal-dialog {
+  animation: bl-modal-slide-to-bottom-left var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-bottom .bl-modal-dialog {
+  animation: bl-modal-slide-to-bottom var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
+.bl-modal.bl-modal-closing.bl-modal-bottom-right .bl-modal-dialog {
+  animation: bl-modal-slide-to-bottom-right var(--transition-duration-slow) var(--transition-ease-out) forwards;
+}
 
 .bl-modal-content {
   position: relative;
@@ -3809,16 +3873,22 @@ textarea {
   }
 }
 
+.bl-modal.bl-modal-top-left {
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-xl) !important;
+}
+
 .bl-modal.bl-modal-top {
   align-items: flex-start !important;
   justify-content: center !important;
   padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-md) !important;
 }
 
-.bl-modal.bl-modal-bottom {
-  align-items: flex-end !important;
-  justify-content: center !important;
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl) var(--spacing-md) !important;
+.bl-modal.bl-modal-top-right {
+  align-items: flex-start !important;
+  justify-content: flex-end !important;
+  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md) var(--spacing-md) !important;
 }
 
 .bl-modal.bl-modal-left {
@@ -3830,6 +3900,11 @@ textarea {
   margin-right: auto;
 }
 
+.bl-modal.bl-modal-centered {
+  align-items: center !important;
+  justify-content: center !important;
+}
+
 .bl-modal.bl-modal-right {
   align-items: center !important;
   justify-content: flex-end !important;
@@ -3839,11 +3914,216 @@ textarea {
   margin-left: auto;
 }
 
-.bl-modal.bl-modal-centered {
-  align-items: center !important;
+.bl-modal.bl-modal-bottom-left {
+  align-items: flex-end !important;
+  justify-content: flex-start !important;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl) var(--spacing-xl) !important;
+}
+
+.bl-modal.bl-modal-bottom {
+  align-items: flex-end !important;
   justify-content: center !important;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl) var(--spacing-md) !important;
+}
+
+.bl-modal.bl-modal-bottom-right {
+  align-items: flex-end !important;
+  justify-content: flex-end !important;
+  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl) var(--spacing-md) !important;
 }
 
+@keyframes bl-modal-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-backdrop-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-from-top {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-from-bottom {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-from-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-from-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-from-top-left {
+  from {
+    transform: translate(-100%, -100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-from-top-right {
+  from {
+    transform: translate(100%, -100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-from-bottom-left {
+  from {
+    transform: translate(-100%, 100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-from-bottom-right {
+  from {
+    transform: translate(100%, 100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes bl-modal-slide-to-top {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-to-bottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-to-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-to-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-to-top-left {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(-100%, -100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-to-top-right {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(100%, -100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-to-bottom-left {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(-100%, 100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-slide-to-bottom-right {
+  from {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate(100%, 100%);
+    opacity: 0;
+  }
+}
+@keyframes bl-modal-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
 .bl-dropdown {
   position: relative;
   display: inline-block;