maz-ui 3.0.3 → 3.0.4

package/css/main.css

@@ -384,36 +384,35 @@ html.dark {
 * Tabs Transisiton
 */
 
-.maz-tab-transition {
-  &-enter-from {
+.maz-tab-transition-enter-from {
     -webkit-transform: translate(100%, 0);
             transform: translate(100%, 0);
   }
-  &-leave,
-  &-leave-active {
+
+.maz-tab-transition-leave,
+  .maz-tab-transition-leave-active {
     position: absolute !important;
     top: 0;
   }
-  &-leave-to {
+
+.maz-tab-transition-leave-to {
     position: absolute !important;
     -webkit-transform: translate(-100%, 0);
             transform: translate(-100%, 0);
   }
-}
 
-.maz-tab-reverse-transition {
-  &-enter-from {
+.maz-tab-reverse-transition-enter-from {
     -webkit-transform: translate(-100%, 0);
             transform: translate(-100%, 0);
   }
-  &-leave,
-  &-leave-to {
+
+.maz-tab-reverse-transition-leave,
+  .maz-tab-reverse-transition-leave-to {
     top: 0;
     position: absolute !important;
     -webkit-transform: translate(100%, 0);
             transform: translate(100%, 0);
   }
-}
 
 html.--backdrop-present {
   overflow-y: hidden;
@@ -424,7 +423,9 @@ html.--backdrop-present {
 .m-backdrop.bottom-sheet-anim-leave-active {
   -webkit-transition: opacity ease-in-out 250ms;
   transition: opacity ease-in-out 250ms;
-  & .m-backdrop-content {
+}
+
+.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;
@@ -432,22 +433,24 @@ html.--backdrop-present {
     -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-content {
+}
+
+.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-content {
+}
+
+.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;
@@ -455,16 +458,16 @@ html.--backdrop-present {
     -webkit-transform: translateY(0);
             transform: translateY(0);
   }
-}
 
 .m-backdrop.modal-anim-enter-from,
 .m-backdrop.modal-anim-leave-to {
   opacity: 0;
-  & .m-backdrop-content {
+}
+
+.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 {
@@ -496,87 +499,100 @@ html.--backdrop-present {
   -webkit-backdrop-filter: blur(3px);
           backdrop-filter: blur(3px);
   z-index: 1050;
-  &-overlay {
+}
+
+.m-backdrop-overlay {
     -ms-touch-action: none;
         touch-action: none
   }
-  &-overlay {
+
+.m-backdrop-overlay {
     position: absolute;
   }
-  &-overlay {
+
+.m-backdrop-overlay {
     top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
   }
-  &-overlay {
+
+.m-backdrop-overlay {
     background-color: var(--maz-bg-overlay);
   }
-  &-overlay {
-    &:not(.--disabled) {
+
+.m-backdrop-overlay:not(.--disabled) {
       cursor: pointer;
     }
-  }
-  &-content {
+
+.m-backdrop-content {
     position: relative;
   }
-  &-content {
+
+.m-backdrop-content {
     z-index: 1;
   }
-  &-content:focus {
+
+.m-backdrop-content:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
-  &.--bottom-sheet {
-    & .m-backdrop-content {
+
+.m-backdrop.--bottom-sheet .m-backdrop-content {
       position: absolute;
     }
-    & .m-backdrop-content {
+
+.m-backdrop.--bottom-sheet .m-backdrop-content {
       bottom: 0px;
     }
-    & .m-backdrop-content {
+
+.m-backdrop.--bottom-sheet .m-backdrop-content {
       left: 0px;
     }
-    & .m-backdrop-content {
+
+.m-backdrop.--bottom-sheet .m-backdrop-content {
       right: 0px;
     }
-  }
-  &.--fullscreen {
+
+.m-backdrop.--fullscreen {
     -webkit-box-align: start;
         -ms-flex-align: start;
             align-items: flex-start;
   }
-  @media (min-width: 576px) {
-    &.--fullscreen {
+
+@media (min-width: 576px) {
+    .m-backdrop.--fullscreen {
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
     }
   }
-  &.--fullscreen {
-    &.--center-top {
+
+.m-backdrop.--fullscreen.--center-top {
       -webkit-box-align: start;
           -ms-flex-align: start;
               align-items: flex-start;
     }
-    @media (min-width: 576px) {
-      &.--center-top {
+
+@media (min-width: 576px) {
+      .m-backdrop.--fullscreen.--center-top {
         padding-top: 7rem;
       }
     }
-    & .m-backdrop-content {
+
+.m-backdrop.--fullscreen .m-backdrop-content {
       position: relative;
     }
-    & .m-backdrop-content {
+
+.m-backdrop.--fullscreen .m-backdrop-content {
       width: 100%;
     }
-    @media (min-width: 576px) {
-      & .m-backdrop-content {
+
+@media (min-width: 576px) {
+      .m-backdrop.--fullscreen .m-backdrop-content {
         width: auto;
       }
     }
-  }
-}
 
 .m-drawer {
   -webkit-box-align: stretch;
@@ -585,145 +601,184 @@ html.--backdrop-present {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
-  & .m-drawer-content-wrap {
+}
+
+.m-drawer .m-drawer-content-wrap {
     overflow-y: auto;
   }
-  & .m-drawer-content-wrap {
+
+.m-drawer .m-drawer-content-wrap {
     background-color: var(--maz-color-bg-light);
   }
-  & .m-drawer-content-wrap {
+
+.m-drawer .m-drawer-content-wrap {
     color: var(--maz-color-text);
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     z-index: 1;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     height: 4rem;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     -ms-flex-negative: 0;
         flex-shrink: 0;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     background-color: var(--maz-color-bg);
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     background-clip: padding-box;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     padding-left: 1rem;
     padding-right: 1rem;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
   }
-  .m-drawer-content-wrap > .m-drawer-header {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-header {
     -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
             box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
   }
-  .m-drawer-content-wrap > .m-drawer-body {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-body {
     z-index: 0;
   }
-  .m-drawer-content-wrap > .m-drawer-body {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-body {
     min-height: 0px;
   }
-  .m-drawer-content-wrap > .m-drawer-body {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-body {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 0%;
             flex: 1 1 0%;
   }
-  .m-drawer-content-wrap > .m-drawer-body {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-body {
     overflow-x: auto;
   }
-  .m-drawer-content-wrap > .m-drawer-body {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-body {
     background-color: var(--maz-color-bg-light);
   }
-  .m-drawer-content-wrap > .m-drawer-body {
+
+.m-drawer .m-drawer-content-wrap > .m-drawer-body {
     background-clip: padding-box;
   }
-  &.--right {
-    & .m-backdrop-content {
+
+.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-backdrop-content {
+
+.m-drawer.--right .m-backdrop-content {
       min-height: 100vh;
     }
-    & .m-backdrop-content {
+
+.m-drawer.--right .m-backdrop-content {
       -webkit-transition: all 0.45s;
       transition: all 0.45s;
       width: 100%;
-      @media (min-width: 768px) {
-        width: var(--maz-drawer-size);
-      }
     }
-    &.backdrop-anim-enter-from > .m-backdrop-content,
-    &.backdrop-anim-leave-to > .m-backdrop-content {
+
+@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-backdrop-content > .m-drawer-content-wrap {
-      @apply lap-s:maz-h-auto;
-    } */
-  }
-  &.--top {
+
+.m-drawer.--top {
     -webkit-box-align: start;
         -ms-flex-align: start;
             align-items: flex-start;
   }
-  &.--top {
-    & .m-backdrop-content {
+
+.m-drawer.--top .m-backdrop-content {
       -webkit-transition: all 0.45s;
       transition: all 0.45s;
       width: 100%;
       height: 100vh;
-      @media (min-width: 768px) {
-        height: auto;
-      }
     }
-    &.backdrop-anim-enter-from > .m-backdrop-content,
-    &.backdrop-anim-leave-to > .m-backdrop-content {
+
+@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-backdrop-content > .m-drawer-content-wrap {
+
+.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
     pointer-events: auto;
   }
-  & .m-backdrop-content > .m-drawer-content-wrap {
+
+.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
   }
-  & .m-backdrop-content > .m-drawer-content-wrap {
+
+.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
     height: 100%;
   }
-  & .m-backdrop-content > .m-drawer-content-wrap {
+
+.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
     width: 100%;
   }
-  & .m-backdrop-content > .m-drawer-content-wrap {
+
+.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-backdrop-content > .m-drawer-content-wrap {
+
+.m-drawer .m-backdrop-content > .m-drawer-content-wrap {
     -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
             box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
   }
-}
 
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
@@ -1919,13 +1974,11 @@ html.--backdrop-present {
 }
 
 .maz-underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 
 .maz-no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
 }
 
 .maz-opacity-0 {
@@ -1965,10 +2018,10 @@ html.--backdrop-present {
 }
 
 .maz-transition {
-  -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition-duration: 150ms;
@@ -1976,10 +2029,8 @@ html.--backdrop-present {
 }
 
 .maz-transition-colors {
-  -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
-  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   -webkit-transition-duration: 150ms;

package/maz-ui.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { Component, App, Directive, Plugin } from 'vue';
 
-declare function injectStrict<T>(key: string, fallback?: T): T;
+declare function injectStrict<T>(key: string, fallback?: T): NonNullable<T>;
 
 declare type ArgumentTypes<F extends (...args: any[]) => void> = F extends (...args: infer A) => any ? A : never;
 declare type MethodTypes = {