vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/styles/generic/_transitions.scss

@@ -1,4 +1,5 @@
 @use '../settings';
+@use '../tools';
 
 @mixin transition-default() {
   &-enter-active {
@@ -26,339 +27,341 @@
   }
 }
 
-// Component specific transitions
-.dialog-transition,
-.dialog-bottom-transition,
-.dialog-top-transition {
-  &-enter-active {
-    transition-duration: 225ms !important;
-    transition-timing-function: settings.$decelerated-easing !important;
-  }
+@include tools.layer('transitions') {
+  // Component specific transitions
+  .dialog-transition,
+  .dialog-bottom-transition,
+  .dialog-top-transition {
+    &-enter-active {
+      transition-duration: 225ms !important;
+      transition-timing-function: settings.$decelerated-easing !important;
+    }
 
-  &-leave-active {
-    transition-duration: 125ms !important;
-    transition-timing-function: settings.$accelerated-easing !important;
-  }
+    &-leave-active {
+      transition-duration: 125ms !important;
+      transition-timing-function: settings.$accelerated-easing !important;
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
-    pointer-events: none;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+      pointer-events: none;
+    }
   }
-}
 
-.dialog-transition {
-  &-enter-from, &-leave-to {
-    transform: scale(0.9);
-    opacity: 0;
-  }
+  .dialog-transition {
+    &-enter-from, &-leave-to {
+      transform: scale(0.9);
+      opacity: 0;
+    }
 
-  &-enter-to, &-leave-from {
-    opacity: 1;
+    &-enter-to, &-leave-from {
+      opacity: 1;
+    }
   }
-}
 
-.dialog-bottom-transition {
-  &-enter-from, &-leave-to {
-    transform: translateY(calc(50vh + 50%));
+  .dialog-bottom-transition {
+    &-enter-from, &-leave-to {
+      transform: translateY(calc(50vh + 50%));
+    }
   }
-}
 
-.dialog-top-transition {
-  &-enter-from, &-leave-to {
-    transform: translateY(calc(-50vh - 50%));
+  .dialog-top-transition {
+    &-enter-from, &-leave-to {
+      transform: translateY(calc(-50vh - 50%));
+    }
   }
-}
 
-.picker-transition,
-.picker-reverse-transition {
-  @include transition-default();
+  .picker-transition,
+  .picker-reverse-transition {
+    @include transition-default();
 
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+    }
 
-  &-leave-from,
-  &-leave-active,
-  &-leave-to {
-    position: absolute !important;
-  }
+    &-leave-from,
+    &-leave-active,
+    &-leave-to {
+      position: absolute !important;
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.picker-transition {
-  @include transition-default();
+  .picker-transition {
+    @include transition-default();
 
-  &-enter-from {
-    transform: translate(100%, 0);
-  }
+    &-enter-from {
+      transform: translate(100%, 0);
+    }
 
-  &-leave-to {
-    transform: translate(-100%, 0);
+    &-leave-to {
+      transform: translate(-100%, 0);
+    }
   }
-}
 
-.picker-reverse-transition {
-  @include transition-default();
+  .picker-reverse-transition {
+    @include transition-default();
 
-  &-enter-from {
-    transform: translate(-100%, 0);
-  }
+    &-enter-from {
+      transform: translate(-100%, 0);
+    }
 
-  &-leave-to {
-    transform: translate(100%, 0);
+    &-leave-to {
+      transform: translate(100%, 0);
+    }
   }
-}
 
-// Generic transitions
-.expand-transition {
-  @include transition-default();
+  // Generic transitions
+  .expand-transition {
+    @include transition-default();
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: height !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: height !important;
+    }
   }
-}
 
-.expand-x-transition {
-  @include transition-default();
+  .expand-x-transition {
+    @include transition-default();
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: width !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: width !important;
+    }
   }
-}
 
-.scale-transition {
-  @include transition-default();
-  @include fade-out();
+  .scale-transition {
+    @include transition-default();
+    @include fade-out();
 
-  &-enter-from {
-    opacity: 0;
-    transform: scale(0);
-  }
+    &-enter-from {
+      opacity: 0;
+      transform: scale(0);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.scale-rotate-transition {
-  @include transition-default();
-  @include fade-out();
+  .scale-rotate-transition {
+    @include transition-default();
+    @include fade-out();
 
-  &-enter-from {
-    opacity: 0;
-    transform: scale(0) rotate(-45deg);
-  }
+    &-enter-from {
+      opacity: 0;
+      transform: scale(0) rotate(-45deg);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.scale-rotate-reverse-transition {
-  @include transition-default();
-  @include fade-out();
+  .scale-rotate-reverse-transition {
+    @include transition-default();
+    @include fade-out();
 
-  &-enter-from {
-    opacity: 0;
-    transform: scale(0) rotate(45deg);
-  }
+    &-enter-from {
+      opacity: 0;
+      transform: scale(0) rotate(45deg);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.message-transition {
-  @include transition-default();
+  .message-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-    transform: translateY(-15px);
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
 
-  &-leave-from, &-leave-active {
-    position: absolute;
-  }
+    &-leave-from, &-leave-active {
+      position: absolute;
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.slide-y-transition {
-  @include transition-default();
+  .slide-y-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-    transform: translateY(-15px);
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+      transform: translateY(-15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.slide-y-reverse-transition {
-  @include transition-default();
+  .slide-y-reverse-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-    transform: translateY(15px);
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+      transform: translateY(15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.scroll-y-transition {
-  @include transition-default();
+  .scroll-y-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+    }
 
-  &-enter-from {
-    transform: translateY(-15px);
-  }
+    &-enter-from {
+      transform: translateY(-15px);
+    }
 
-  &-leave-to {
-    transform: translateY(15px);
-  }
+    &-leave-to {
+      transform: translateY(15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.scroll-y-reverse-transition {
-  @include transition-default();
+  .scroll-y-reverse-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+    }
 
-  &-enter-from {
-    transform: translateY(15px);
-  }
+    &-enter-from {
+      transform: translateY(15px);
+    }
 
-  &-leave-to {
-    transform: translateY(-15px);
-  }
+    &-leave-to {
+      transform: translateY(-15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.scroll-x-transition {
-  @include transition-default();
+  .scroll-x-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+    }
 
-  &-enter-from {
-    transform: translateX(-15px);
-  }
+    &-enter-from {
+      transform: translateX(-15px);
+    }
 
-  &-leave-to {
-    transform: translateX(15px);
-  }
+    &-leave-to {
+      transform: translateX(15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.scroll-x-reverse-transition {
-  @include transition-default();
+  .scroll-x-reverse-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+    }
 
-  &-enter-from {
-    transform: translateX(15px);
-  }
+    &-enter-from {
+      transform: translateX(15px);
+    }
 
-  &-leave-to {
-    transform: translateX(-15px);
-  }
+    &-leave-to {
+      transform: translateX(-15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.slide-x-transition {
-  @include transition-default();
+  .slide-x-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-    transform: translateX(-15px);
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+      transform: translateX(-15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.slide-x-reverse-transition {
-  @include transition-default();
+  .slide-x-reverse-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0;
-    transform: translateX(15px);
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0;
+      transform: translateX(15px);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform, opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform, opacity !important;
+    }
   }
-}
 
-.fade-transition {
-  @include transition-default();
+  .fade-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    opacity: 0 !important;
-  }
+    &-enter-from, &-leave-to {
+      opacity: 0 !important;
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: opacity !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: opacity !important;
+    }
   }
-}
 
-.fab-transition {
-  @include transition-default();
+  .fab-transition {
+    @include transition-default();
 
-  &-enter-from, &-leave-to {
-    transform: scale(0) rotate(-45deg);
-  }
+    &-enter-from, &-leave-to {
+      transform: scale(0) rotate(-45deg);
+    }
 
-  &-enter-active,
-  &-leave-active {
-    transition-property: transform !important;
+    &-enter-active,
+    &-leave-active {
+      transition-property: transform !important;
+    }
   }
 }