vuetify 2.5.9 → 2.5.13

package/src/styles/generic/_transitions.scss

@@ -9,305 +9,309 @@
   }
 }
 
-.v-application
-  // Component specific transitions
-  .carousel-transition {
-    &-enter {
-      transform: translate(100%, 0);
-    }
-
-    &-leave, &-leave-to {
-      position: absolute;
-      top: 0;
-      transform: translate(-100%, 0);
-    }
+// Component specific transitions
+.carousel-transition {
+  &-enter {
+    transform: translate(100%, 0);
   }
 
-  .carousel-reverse-transition {
-    &-enter {
-      transform: translate(-100%, 0);
-    }
+  &-leave, &-leave-to {
+    position: absolute;
+    top: 0;
+    transform: translate(-100%, 0);
+  }
+}
 
-    &-leave, &-leave-to {
-      position: absolute;
-      top: 0;
-      transform: translate(100%, 0);
-    }
+.carousel-reverse-transition {
+  &-enter {
+    transform: translate(-100%, 0);
   }
 
-  .dialog-transition {
-    &-enter, &-leave-to {
-      transform: scale(0.5);
-      opacity: 0;
-    }
+  &-leave, &-leave-to {
+    position: absolute;
+    top: 0;
+    transform: translate(100%, 0);
+  }
+}
 
-    &-enter-to, &-leave {
-      opacity: 1;
-    }
-  }
+.dialog-transition {
+  &-enter-active,
+  &-leave-active {
+    pointer-events: none !important;
+  }
 
-  .dialog-bottom-transition {
-    &-enter, &-leave-to {
-      transform: translateY(100%);
-    }
+  &-enter, &-leave-to {
+    transform: scale(0.5);
+    opacity: 0;
   }
 
-  .dialog-top-transition {
-    &-enter, &-leave-to {
-      transform: translateY(-100%);
-    }
+  &-enter-to, &-leave {
+    opacity: 1;
   }
+}
 
-  .picker-transition,
-  .picker-reverse-transition {
-    &-enter-active,
-    &-leave-active {
-      transition: .3s map-get($transition, 'linear-out-slow-in');
-    }
+.dialog-bottom-transition {
+  &-enter, &-leave-to {
+    transform: translateY(100%);
+  }
+}
 
-    &-enter,
-    &-leave-to {
-      opacity: 0;
-    }
+.dialog-top-transition {
+  &-enter, &-leave-to {
+    transform: translateY(-100%);
+  }
+}
 
-    &-leave,
-    &-leave-active,
-    &-leave-to {
-      position: absolute !important;
-    }
+.picker-transition,
+.picker-reverse-transition {
+  &-enter-active,
+  &-leave-active {
+    transition: .3s map-get($transition, 'linear-out-slow-in');
   }
 
-  .picker-transition {
-    &-enter {
-      transform: translate(0, 100%);
-    }
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
 
-    &-leave-to {
-      transform: translate(0, -100%);
-    }
+  &-leave,
+  &-leave-active,
+  &-leave-to {
+    position: absolute !important;
   }
+}
 
-  .picker-reverse-transition {
-    &-enter {
-      transform: translate(0, -100%);
-    }
+.picker-transition {
+  &-enter {
+    transform: translate(0, 100%);
+  }
 
-    &-leave-to {
-      transform: translate(0, 100%);
-    }
+  &-leave-to {
+    transform: translate(0, -100%);
   }
+}
 
-  .picker-title-transition {
-    &-enter-to,
-    &-leave {
-      transform: translate(0, 0);
-    }
+.picker-reverse-transition {
+  &-enter {
+    transform: translate(0, -100%);
+  }
 
-    &-enter {
-      transform: translate(-100%, 0);
-    }
+  &-leave-to {
+    transform: translate(0, 100%);
+  }
+}
 
-    &-leave-to {
-      opacity: 0;
-      transform: translate(100%, 0);
-    }
+.picker-title-transition {
+  &-enter-to,
+  &-leave {
+    transform: translate(0, 0);
+  }
 
-    &-leave,
-    &-leave-to,
-    &-leave-active {
-      position: absolute !important;
-    }
+  &-enter {
+    transform: translate(-100%, 0);
   }
 
-  .tab-transition {
-    &-enter {
-      transform: translate(100%, 0);
-    }
+  &-leave-to {
+    opacity: 0;
+    transform: translate(100%, 0);
+  }
 
-    &-leave, &-leave-active {
-      position: absolute;
-      top: 0;
-    }
+  &-leave,
+  &-leave-to,
+  &-leave-active {
+    position: absolute !important;
+  }
+}
 
-    &-leave-to {
-      position: absolute;
-      transform: translate(-100%, 0);
-    }
+.tab-transition {
+  &-enter {
+    transform: translate(100%, 0);
   }
 
-  .tab-reverse-transition {
-    &-enter {
-      transform: translate(-100%, 0);
-    }
+  &-leave, &-leave-active {
+    position: absolute;
+    top: 0;
+  }
 
-    &-leave, &-leave-to {
-      top: 0;
-      position: absolute;
-      transform: translate(100%, 0);
-    }
+  &-leave-to {
+    position: absolute;
+    transform: translate(-100%, 0);
   }
+}
 
-  // Generic transitions
-  .expand-transition {
-    @include transition-default();
+.tab-reverse-transition {
+  &-enter {
+    transform: translate(-100%, 0);
   }
 
-  .expand-x-transition {
-    @include transition-default();
+  &-leave, &-leave-to {
+    top: 0;
+    position: absolute;
+    transform: translate(100%, 0);
   }
+}
+
+// Generic transitions
+.expand-transition {
+  @include transition-default();
+}
 
-  .scale-transition {
-    @include transition-default();
+.expand-x-transition {
+  @include transition-default();
+}
 
-    &-enter, &-leave, &-leave-to {
-      opacity: 0;
-      transform: scale(0);
-    }
+.scale-transition {
+  @include transition-default();
+
+  &-enter, &-leave, &-leave-to {
+    opacity: 0;
+    transform: scale(0);
   }
+}
 
-  .scale-rotate-transition {
-    @include transition-default();
+.scale-rotate-transition {
+  @include transition-default();
 
-    &-enter, &-leave, &-leave-to {
-      opacity: 0;
-      transform: scale(0) rotate(-45deg);
-    }
+  &-enter, &-leave, &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(-45deg);
   }
+}
 
-  .scale-rotate-reverse-transition {
-    @include transition-default();
+.scale-rotate-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave, &-leave-to {
-      opacity: 0;
-      transform: scale(0) rotate(45deg);
-    }
+  &-enter, &-leave, &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(45deg);
   }
+}
 
-  .message-transition {
-    @include transition-default();
+.message-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
 
-    &-leave, &-leave-active {
-      position: absolute;
-    }
+  &-leave, &-leave-active {
+    position: absolute;
   }
+}
 
-  .slide-y-transition {
-    @include transition-default();
+.slide-y-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
   }
+}
 
-  .slide-y-reverse-transition {
-    @include transition-default();
+.slide-y-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateY(15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
   }
+}
 
-  .scroll-y-transition {
-    @include transition-default();
+.scroll-y-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateY(-15px);
-    }
+  &-enter {
+    transform: translateY(-15px);
+  }
 
-    &-leave-to {
-      transform: translateY(15px);
-    }
+  &-leave-to {
+    transform: translateY(15px);
   }
+}
 
-  .scroll-y-reverse-transition {
-    @include transition-default();
+.scroll-y-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateY(15px);
-    }
+  &-enter {
+    transform: translateY(15px);
+  }
 
-    &-leave-to {
-      transform: translateY(-15px);
-    }
+  &-leave-to {
+    transform: translateY(-15px);
   }
+}
 
-  .scroll-x-transition {
-    @include transition-default();
+.scroll-x-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateX(-15px);
-    }
+  &-enter {
+    transform: translateX(-15px);
+  }
 
-    &-leave-to {
-      transform: translateX(15px);
-    }
+  &-leave-to {
+    transform: translateX(15px);
   }
+}
 
-  .scroll-x-reverse-transition {
-    @include transition-default();
+.scroll-x-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 
-    &-enter {
-      transform: translateX(15px);
-    }
+  &-enter {
+    transform: translateX(15px);
+  }
 
-    &-leave-to {
-      transform: translateX(-15px);
-    }
+  &-leave-to {
+    transform: translateX(-15px);
   }
+}
 
-  .slide-x-transition {
-    @include transition-default();
+.slide-x-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateX(-15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
   }
+}
 
-  .slide-x-reverse-transition {
-    @include transition-default();
+.slide-x-reverse-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0;
-      transform: translateX(15px);
-    }
+  &-enter, &-leave-to {
+    opacity: 0;
+    transform: translateX(15px);
   }
+}
 
-  .fade-transition {
-    @include transition-default();
+.fade-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      opacity: 0 !important;
-    }
+  &-enter, &-leave-to {
+    opacity: 0 !important;
   }
+}
 
-  .fab-transition {
-    @include transition-default();
+.fab-transition {
+  @include transition-default();
 
-    &-enter, &-leave-to {
-      transform: scale(0) rotate(-45deg);
-    }
+  &-enter, &-leave-to {
+    transform: scale(0) rotate(-45deg);
   }
+}

package/src/styles/settings/_variables.scss

@@ -82,15 +82,15 @@ $display-breakpoints: map-deep-merge(
   (
     'print-only': 'only print',
     'screen-only': 'only screen',
-    'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
-    'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-    'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+    'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 0.02})',
+    'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 0.02})',
+    'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 0.02})',
     'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
-    'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-    'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+    'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 0.02})',
+    'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 0.02})',
     'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
-    'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-    'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+    'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 0.02})',
+    'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 0.02})',
     'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
     'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
   ),

package/src/util/helpers.ts

@@ -490,3 +490,25 @@ export function mergeDeep (
 export function fillArray<T> (length: number, obj: T) {
   return Array(length).fill(obj)
 }
+
+/**  Polyfill for Event.prototype.composedPath */
+export function composedPath (e: Event): EventTarget[] {
+  if (e.composedPath) return e.composedPath()
+
+  const path = []
+  let el = e.target as Element
+
+  while (el) {
+    path.push(el)
+
+    if (el.tagName === 'HTML') {
+      path.push(document)
+      path.push(window)
+
+      return path
+    }
+
+    el = el.parentElement!
+  }
+  return path
+}