maz-ui 3.4.0 → 3.4.1

package/css/main.css

@@ -422,372 +422,6 @@ html.dark {
             transform: translate(100%, 0);
   }
 
-html.--backdrop-present {
-  overflow-y: hidden;
-  height: 100vh;
-}
-
-.m-backdrop.bottom-sheet-anim-enter-active,
-.m-backdrop.bottom-sheet-anim-leave-active {
-  -webkit-transition: opacity ease-in-out 250ms;
-  transition: opacity ease-in-out 250ms;
-}
-
-.m-backdrop.bottom-sheet-anim-enter-active .m-backdrop-content, .m-backdrop.bottom-sheet-anim-leave-active .m-backdrop-content {
-    -webkit-transition: -webkit-transform ease-in-out 250ms;
-    transition: -webkit-transform ease-in-out 250ms;
-    transition: transform ease-in-out 250ms;
-    transition: transform ease-in-out 250ms, -webkit-transform ease-in-out 250ms;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-  }
-
-.m-backdrop.bottom-sheet-anim-enter-from,
-.m-backdrop.bottom-sheet-anim-leave-to {
-  opacity: 0;
-}
-
-.m-backdrop.bottom-sheet-anim-enter-from .m-backdrop-content, .m-backdrop.bottom-sheet-anim-leave-to .m-backdrop-content {
-    -webkit-transform: translateY(100%);
-            transform: translateY(100%);
-  }
-
-.m-backdrop.modal-anim-enter-active,
-.m-backdrop.modal-anim-leave-active {
-  -webkit-transition: opacity ease-in-out 250ms;
-  transition: opacity ease-in-out 250ms;
-}
-
-.m-backdrop.modal-anim-enter-active .m-backdrop-content, .m-backdrop.modal-anim-leave-active .m-backdrop-content {
-    -webkit-transition: -webkit-transform ease-in-out 250ms;
-    transition: -webkit-transform ease-in-out 250ms;
-    transition: transform ease-in-out 250ms;
-    transition: transform ease-in-out 250ms, -webkit-transform ease-in-out 250ms;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-  }
-
-.m-backdrop.modal-anim-enter-from,
-.m-backdrop.modal-anim-leave-to {
-  opacity: 0;
-}
-
-.m-backdrop.modal-anim-enter-from .m-backdrop-content, .m-backdrop.modal-anim-leave-to .m-backdrop-content {
-    -webkit-transform: translateY(-25px);
-            transform: translateY(-25px);
-  }
-
-.m-backdrop.backdrop-anim-enter-active,
-.m-backdrop.backdrop-anim-leave-active {
-  -webkit-transition: opacity ease-in-out 250ms;
-  transition: opacity ease-in-out 250ms;
-}
-
-.m-backdrop.backdrop-anim-enter-from,
-.m-backdrop.backdrop-anim-leave-to {
-  opacity: 0;
-}
-
-.m-backdrop {
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  opacity: 1;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-backdrop-filter: blur(3px);
-          backdrop-filter: blur(3px);
-  z-index: 1050;
-}
-
-.m-backdrop-overlay {
-    -ms-touch-action: none;
-        touch-action: none
-  }
-
-.m-backdrop-overlay {
-    position: absolute;
-  }
-
-.m-backdrop-overlay {
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-  }
-
-.m-backdrop-overlay {
-    background-color: var(--maz-bg-overlay);
-  }
-
-.m-backdrop-overlay:not(.--disabled) {
-      cursor: pointer;
-    }
-
-.m-backdrop-content {
-    position: relative;
-  }
-
-.m-backdrop-content {
-    z-index: 1;
-  }
-
-.m-backdrop-content:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-.m-backdrop.--bottom-sheet .m-backdrop-content {
-      position: absolute;
-    }
-
-.m-backdrop.--bottom-sheet .m-backdrop-content {
-      bottom: 0px;
-    }
-
-.m-backdrop.--bottom-sheet .m-backdrop-content {
-      left: 0px;
-    }
-
-.m-backdrop.--bottom-sheet .m-backdrop-content {
-      right: 0px;
-    }
-
-.m-backdrop.--fullscreen {
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
-  }
-
-@media (min-width: 576px) {
-    .m-backdrop.--fullscreen {
-      -webkit-box-align: center;
-          -ms-flex-align: center;
-              align-items: center;
-    }
-  }
-
-.m-backdrop.--fullscreen.--center-top {
-      -webkit-box-align: start;
-          -ms-flex-align: start;
-              align-items: flex-start;
-    }
-
-@media (min-width: 576px) {
-      .m-backdrop.--fullscreen.--center-top {
-        padding-top: 7rem;
-      }
-    }
-
-.m-backdrop.--fullscreen .m-backdrop-content {
-      position: relative;
-    }
-
-.m-backdrop.--fullscreen .m-backdrop-content {
-      width: 100%;
-    }
-
-@media (min-width: 576px) {
-      .m-backdrop.--fullscreen .m-backdrop-content {
-        width: auto;
-      }
-    }
-
-.m-drawer {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-}
-
-.m-drawer .m-drawer-content-wrap {
-    overflow-y: auto;
-  }
-
-.m-drawer .m-drawer-content-wrap {
-    background-color: var(--maz-color-bg-light);
-  }
-
-.m-drawer .m-drawer-content-wrap {
-    color: var(--maz-color-text);
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    z-index: 1;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    height: 4rem;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    background-color: var(--maz-color-bg);
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    background-clip: padding-box;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-header {
-    -webkit-box-shadow: 0 5px 10px 0 hsla(0, 0%, 0%, 0.05);
-            box-shadow: 0 5px 10px 0 hsla(0, 0%, 0%, 0.05);
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-body {
-    z-index: 0;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-body {
-    min-height: 0px;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-body {
-    -webkit-box-flex: 1;
-        -ms-flex: 1 1 0%;
-            flex: 1 1 0%;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-body {
-    overflow-x: auto;
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-body {
-    background-color: var(--maz-color-bg-light);
-  }
-
-.m-drawer .m-drawer-content-wrap > .m-drawer-body {
-    background-clip: padding-box;
-  }
-
-.m-drawer.--right {
-    /* & .m-backdrop-content > .m-drawer-content-wrap {
-      @apply lap-s:maz-h-auto;
-    } */
-  }
-
-.m-drawer.--right .m-backdrop-content {
-      height: auto;
-    }
-
-.m-drawer.--right .m-backdrop-content {
-      min-height: 100vh;
-    }
-
-.m-drawer.--right .m-backdrop-content {
-      -webkit-transition: all 0.45s;
-      transition: all 0.45s;
-      width: 100%;
-    }
-
-@media (min-width: 768px) {
-
-.m-drawer.--right .m-backdrop-content {
-        width: var(--maz-drawer-size)
-    }
-      }
-
-.m-drawer.--right.backdrop-anim-enter-from > .m-backdrop-content,
-    .m-drawer.--right.backdrop-anim-leave-to > .m-backdrop-content {
-      opacity: 0;
-      -webkit-transform: translateX(100%);
-              transform: translateX(100%);
-    }
-
-.m-drawer.--top {
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
-  }
-
-.m-drawer.--top .m-backdrop-content {
-      -webkit-transition: all 0.45s;
-      transition: all 0.45s;
-      width: 100%;
-      height: 100vh;
-    }
-
-@media (min-width: 768px) {
-
-.m-drawer.--top .m-backdrop-content {
-        height: auto
-    }
-      }
-
-.m-drawer.--top.backdrop-anim-enter-from > .m-backdrop-content,
-    .m-drawer.--top.backdrop-anim-leave-to > .m-backdrop-content {
-      opacity: 0;
-      -webkit-transform: translateY(-100%);
-              transform: translateY(-100%);
-    }
-
-.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
-    pointer-events: auto;
-  }
-
-.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
-    height: 100%;
-  }
-
-.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
-    width: 100%;
-  }
-
-.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-  }
-
-.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
-    -webkit-box-shadow: 0 5px 10px 0 hsla(0, 0%, 0%, 0.05);
-            box-shadow: 0 5px 10px 0 hsla(0, 0%, 0%, 0.05);
-  }
-
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -976,6 +610,14 @@ html.--backdrop-present {
   left: 0px;
 }
 
+.maz-bottom-0 {
+  bottom: 0px;
+}
+
+.maz-left-0 {
+  left: 0px;
+}
+
 .maz-top-4 {
   top: 1rem;
 }
@@ -984,10 +626,6 @@ html.--backdrop-present {
   top: 0px;
 }
 
-.maz-left-0 {
-  left: 0px;
-}
-
 .maz-left-4 {
   left: 1rem;
 }
@@ -1000,10 +638,6 @@ html.--backdrop-present {
   left: 0.25rem;
 }
 
-.maz-bottom-0 {
-  bottom: 0px;
-}
-
 .maz-top-3 {
   top: 0.75rem;
 }
@@ -1020,10 +654,18 @@ html.--backdrop-present {
   top: -50%;
 }
 
+.maz-z-default-backdrop {
+  z-index: 1050;
+}
+
 .maz-z-1 {
   z-index: 1;
 }
 
+.maz-z-0 {
+  z-index: 0;
+}
+
 .maz-z-20 {
   z-index: 20;
 }
@@ -1032,22 +674,10 @@ html.--backdrop-present {
   z-index: 100;
 }
 
-.maz-z-0 {
-  z-index: 0;
-}
-
-.maz-z-default-backdrop {
-  z-index: 1050;
-}
-
 .maz-z-2 {
   z-index: 2;
 }
 
-.maz-z-50 {
-  z-index: 50;
-}
-
 .maz-m-0 {
   margin: 0px;
 }
@@ -1132,6 +762,10 @@ html.--backdrop-present {
   display: none;
 }
 
+.maz-h-5 {
+  height: 1.25rem;
+}
+
 .maz-h-12 {
   height: 3rem;
 }
@@ -1140,18 +774,22 @@ html.--backdrop-present {
   height: 1.5rem;
 }
 
-.maz-h-5 {
-  height: 1.25rem;
+.maz-h-16 {
+  height: 4rem;
 }
 
-.maz-h-1\/2 {
-  height: 50%;
+.maz-h-auto {
+  height: auto;
 }
 
 .maz-h-full {
   height: 100%;
 }
 
+.maz-h-1\/2 {
+  height: 50%;
+}
+
 .maz-h-4 {
   height: 1rem;
 }
@@ -1160,14 +798,6 @@ html.--backdrop-present {
   height: 2rem;
 }
 
-.maz-h-16 {
-  height: 4rem;
-}
-
-.maz-h-auto {
-  height: auto;
-}
-
 .maz-h-9 {
   height: 2.25rem;
 }
@@ -1184,26 +814,26 @@ html.--backdrop-present {
   max-height: 100%;
 }
 
-.maz-min-h-\[6\.25rem\] {
-  min-height: 6.25rem;
-}
-
 .maz-min-h-0 {
   min-height: 0px;
 }
 
-.maz-w-full {
-  width: 100%;
+.maz-min-h-\[6\.25rem\] {
+  min-height: 6.25rem;
 }
 
-.maz-w-12 {
-  width: 3rem;
+.maz-w-full {
+  width: 100%;
 }
 
 .maz-w-5 {
   width: 1.25rem;
 }
 
+.maz-w-12 {
+  width: 3rem;
+}
+
 .maz-w-0 {
   width: 0px;
 }
@@ -1383,12 +1013,6 @@ html.--backdrop-present {
           align-items: center;
 }
 
-.maz-items-stretch {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-}
-
 .maz-justify-start {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
@@ -1769,14 +1393,14 @@ html.--backdrop-present {
   background-color: var(--maz-color-bg-lighter);
 }
 
-.maz-bg-overlay {
-  background-color: var(--maz-bg-overlay);
-}
-
 .maz-bg-color-light {
   background-color: var(--maz-color-bg-light);
 }
 
+.maz-bg-overlay {
+  background-color: var(--maz-bg-overlay);
+}
+
 .maz-bg-bg-light {
   background-color: var(--maz-bg-color-light);
 }