quasar 2.10.1 → 2.11.0

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.10.1
+ * Quasar Framework v2.11.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -468,6 +468,64 @@ $shadow-up-22 : 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-
 $shadow-up-23 : 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient !default
 $shadow-up-24 : 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient !default
 $shadows-up: ($shadow-up-1, $shadow-up-2, $shadow-up-3, $shadow-up-4, $shadow-up-5, $shadow-up-6, $shadow-up-7, $shadow-up-8, $shadow-up-9, $shadow-up-10, $shadow-up-11, $shadow-up-12, $shadow-up-13, $shadow-up-14, $shadow-up-15, $shadow-up-16, $shadow-up-17, $shadow-up-18, $shadow-up-19, $shadow-up-20, $shadow-up-21, $shadow-up-22, $shadow-up-23, $shadow-up-24)
+$dark-shadow-color         : #fff !default
+$inset-dark-shadow         : 0 7px 9px -7px rgba($dark-shadow-color, .7) inset !default
+$inset-dark-shadow-down    : 0 -7px 9px -7px rgba($dark-shadow-color, .7) inset !default
+$elevation-dark-umbra      : rgba($dark-shadow-color, .2) !default
+$elevation-dark-penumbra   : rgba($dark-shadow-color, .14) !default
+$elevation-dark-ambient    : rgba($dark-shadow-color, .12) !default
+$dark-shadow-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
+$dark-shadow-1  : 0 1px 3px $elevation-dark-umbra, 0 1px 1px $elevation-dark-penumbra, 0 2px 1px -1px $elevation-dark-ambient !default
+$dark-shadow-2  : 0 1px 5px $elevation-dark-umbra, 0 2px 2px $elevation-dark-penumbra, 0 3px 1px -2px $elevation-dark-ambient !default
+$dark-shadow-3  : 0 1px 8px $elevation-dark-umbra, 0 3px 4px $elevation-dark-penumbra, 0 3px 3px -2px $elevation-dark-ambient !default
+$dark-shadow-4  : 0 2px 4px -1px $elevation-dark-umbra, 0 4px 5px $elevation-dark-penumbra, 0 1px 10px $elevation-dark-ambient !default
+$dark-shadow-5  : 0 3px 5px -1px $elevation-dark-umbra, 0 5px 8px $elevation-dark-penumbra, 0 1px 14px $elevation-dark-ambient !default
+$dark-shadow-6  : 0 3px 5px -1px $elevation-dark-umbra, 0 6px 10px $elevation-dark-penumbra, 0 1px 18px $elevation-dark-ambient !default
+$dark-shadow-7  : 0 4px 5px -2px $elevation-dark-umbra, 0 7px 10px 1px $elevation-dark-penumbra, 0 2px 16px 1px $elevation-dark-ambient !default
+$dark-shadow-8  : 0 5px 5px -3px $elevation-dark-umbra, 0 8px 10px 1px $elevation-dark-penumbra, 0 3px 14px 2px $elevation-dark-ambient !default
+$dark-shadow-9  : 0 5px 6px -3px $elevation-dark-umbra, 0 9px 12px 1px $elevation-dark-penumbra, 0 3px 16px 2px $elevation-dark-ambient !default
+$dark-shadow-10 : 0 6px 6px -3px $elevation-dark-umbra, 0 10px 14px 1px $elevation-dark-penumbra, 0 4px 18px 3px $elevation-dark-ambient !default
+$dark-shadow-11 : 0 6px 7px -4px $elevation-dark-umbra, 0 11px 15px 1px $elevation-dark-penumbra, 0 4px 20px 3px $elevation-dark-ambient !default
+$dark-shadow-12 : 0 7px 8px -4px $elevation-dark-umbra, 0 12px 17px 2px $elevation-dark-penumbra, 0 5px 22px 4px $elevation-dark-ambient !default
+$dark-shadow-13 : 0 7px 8px -4px $elevation-dark-umbra, 0 13px 19px 2px $elevation-dark-penumbra, 0 5px 24px 4px $elevation-dark-ambient !default
+$dark-shadow-14 : 0 7px 9px -4px $elevation-dark-umbra, 0 14px 21px 2px $elevation-dark-penumbra, 0 5px 26px 4px $elevation-dark-ambient !default
+$dark-shadow-15 : 0 8px 9px -5px $elevation-dark-umbra, 0 15px 22px 2px $elevation-dark-penumbra, 0 6px 28px 5px $elevation-dark-ambient !default
+$dark-shadow-16 : 0 8px 10px -5px $elevation-dark-umbra, 0 16px 24px 2px $elevation-dark-penumbra, 0 6px 30px 5px $elevation-dark-ambient !default
+$dark-shadow-17 : 0 8px 11px -5px $elevation-dark-umbra, 0 17px 26px 2px $elevation-dark-penumbra, 0 6px 32px 5px $elevation-dark-ambient !default
+$dark-shadow-18 : 0 9px 11px -5px $elevation-dark-umbra, 0 18px 28px 2px $elevation-dark-penumbra, 0 7px 34px 6px $elevation-dark-ambient !default
+$dark-shadow-19 : 0 9px 12px -6px $elevation-dark-umbra, 0 19px 29px 2px $elevation-dark-penumbra, 0 7px 36px 6px $elevation-dark-ambient !default
+$dark-shadow-20 : 0 10px 13px -6px $elevation-dark-umbra, 0 20px 31px 3px $elevation-dark-penumbra, 0 8px 38px 7px $elevation-dark-ambient !default
+$dark-shadow-21 : 0 10px 13px -6px $elevation-dark-umbra, 0 21px 33px 3px $elevation-dark-penumbra, 0 8px 40px 7px $elevation-dark-ambient !default
+$dark-shadow-22 : 0 10px 14px -6px $elevation-dark-umbra, 0 22px 35px 3px $elevation-dark-penumbra, 0 8px 42px 7px $elevation-dark-ambient !default
+$dark-shadow-23 : 0 11px 14px -7px $elevation-dark-umbra, 0 23px 36px 3px $elevation-dark-penumbra, 0 9px 44px 8px $elevation-dark-ambient !default
+$dark-shadow-24 : 0 11px 15px -7px $elevation-dark-umbra, 0 24px 38px 3px $elevation-dark-penumbra, 0 9px 46px 8px $elevation-dark-ambient !default
+$dark-shadows: ($dark-shadow-1, $dark-shadow-2, $dark-shadow-3, $dark-shadow-4, $dark-shadow-5, $dark-shadow-6, $dark-shadow-7, $dark-shadow-8, $dark-shadow-9, $dark-shadow-10, $dark-shadow-11, $dark-shadow-12, $dark-shadow-13, $dark-shadow-14, $dark-shadow-15, $dark-shadow-16, $dark-shadow-17, $dark-shadow-18, $dark-shadow-19, $dark-shadow-20, $dark-shadow-21, $dark-shadow-22, $dark-shadow-23, $dark-shadow-24)
+$dark-shadow-up-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
+$dark-shadow-up-1  : 0 -1px 3px $elevation-dark-umbra, 0 -1px 1px $elevation-dark-penumbra, 0 -2px 1px -1px $elevation-dark-ambient !default
+$dark-shadow-up-2  : 0 -1px 5px $elevation-dark-umbra, 0 -2px 2px $elevation-dark-penumbra, 0 -3px 1px -2px $elevation-dark-ambient !default
+$dark-shadow-up-3  : 0 -1px 8px $elevation-dark-umbra, 0 -3px 4px $elevation-dark-penumbra, 0 -3px 3px -2px $elevation-dark-ambient !default
+$dark-shadow-up-4  : 0 -2px 4px -1px $elevation-dark-umbra, 0 -4px 5px $elevation-dark-penumbra, 0 -1px 10px $elevation-dark-ambient !default
+$dark-shadow-up-5  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -5px 8px $elevation-dark-penumbra, 0 -1px 14px $elevation-dark-ambient !default
+$dark-shadow-up-6  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -6px 10px $elevation-dark-penumbra, 0 -1px 18px $elevation-dark-ambient !default
+$dark-shadow-up-7  : 0 -4px 5px -2px $elevation-dark-umbra, 0 -7px 10px 1px $elevation-dark-penumbra, 0 -2px 16px 1px $elevation-dark-ambient !default
+$dark-shadow-up-8  : 0 -5px 5px -3px $elevation-dark-umbra, 0 -8px 10px 1px $elevation-dark-penumbra, 0 -3px 14px 2px $elevation-dark-ambient !default
+$dark-shadow-up-9  : 0 -5px 6px -3px $elevation-dark-umbra, 0 -9px 12px 1px $elevation-dark-penumbra, 0 -3px 16px 2px $elevation-dark-ambient !default
+$dark-shadow-up-10 : 0 -6px 6px -3px $elevation-dark-umbra, 0 -10px 14px 1px $elevation-dark-penumbra, 0 -4px 18px 3px $elevation-dark-ambient !default
+$dark-shadow-up-11 : 0 -6px 7px -4px $elevation-dark-umbra, 0 -11px 15px 1px $elevation-dark-penumbra, 0 -4px 20px 3px $elevation-dark-ambient !default
+$dark-shadow-up-12 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -12px 17px 2px $elevation-dark-penumbra, 0 -5px 22px 4px $elevation-dark-ambient !default
+$dark-shadow-up-13 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -13px 19px 2px $elevation-dark-penumbra, 0 -5px 24px 4px $elevation-dark-ambient !default
+$dark-shadow-up-14 : 0 -7px 9px -4px $elevation-dark-umbra, 0 -14px 21px 2px $elevation-dark-penumbra, 0 -5px 26px 4px $elevation-dark-ambient !default
+$dark-shadow-up-15 : 0 -8px 9px -5px $elevation-dark-umbra, 0 -15px 22px 2px $elevation-dark-penumbra, 0 -6px 28px 5px $elevation-dark-ambient !default
+$dark-shadow-up-16 : 0 -8px 10px -5px $elevation-dark-umbra, 0 -16px 24px 2px $elevation-dark-penumbra, 0 -6px 30px 5px $elevation-dark-ambient !default
+$dark-shadow-up-17 : 0 -8px 11px -5px $elevation-dark-umbra, 0 -17px 26px 2px $elevation-dark-penumbra, 0 -6px 32px 5px $elevation-dark-ambient !default
+$dark-shadow-up-18 : 0 -9px 11px -5px $elevation-dark-umbra, 0 -18px 28px 2px $elevation-dark-penumbra, 0 -7px 34px 6px $elevation-dark-ambient !default
+$dark-shadow-up-19 : 0 -9px 12px -6px $elevation-dark-umbra, 0 -19px 29px 2px $elevation-dark-penumbra, 0 -7px 36px 6px $elevation-dark-ambient !default
+$dark-shadow-up-20 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -20px 31px 3px $elevation-dark-penumbra, 0 -8px 38px 7px $elevation-dark-ambient !default
+$dark-shadow-up-21 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -21px 33px 3px $elevation-dark-penumbra, 0 -8px 40px 7px $elevation-dark-ambient !default
+$dark-shadow-up-22 : 0 -10px 14px -6px $elevation-dark-umbra, 0 -22px 35px 3px $elevation-dark-penumbra, 0 -8px 42px 7px $elevation-dark-ambient !default
+$dark-shadow-up-23 : 0 -11px 14px -7px $elevation-dark-umbra, 0 -23px 36px 3px $elevation-dark-penumbra, 0 -9px 44px 8px $elevation-dark-ambient !default
+$dark-shadow-up-24 : 0 -11px 15px -7px $elevation-dark-umbra, 0 -24px 38px 3px $elevation-dark-penumbra, 0 -9px 46px 8px $elevation-dark-ambient !default
+$dark-shadows-up: ($dark-shadow-up-1, $dark-shadow-up-2, $dark-shadow-up-3, $dark-shadow-up-4, $dark-shadow-up-5, $dark-shadow-up-6, $dark-shadow-up-7, $dark-shadow-up-8, $dark-shadow-up-9, $dark-shadow-up-10, $dark-shadow-up-11, $dark-shadow-up-12, $dark-shadow-up-13, $dark-shadow-up-14, $dark-shadow-up-15, $dark-shadow-up-16, $dark-shadow-up-17, $dark-shadow-up-18, $dark-shadow-up-19, $dark-shadow-up-20, $dark-shadow-up-21, $dark-shadow-up-22, $dark-shadow-up-23, $dark-shadow-up-24)
 $generic-border-radius          : 4px !default
 $generic-hover-transition       : .3s cubic-bezier(.25, .8, .5, 1) !default
 $typography-font-family         : 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif !default
@@ -509,6 +567,7 @@ $table-selected-background      : rgba(0, 0, 0, .06) !default
 $table-dark-border-color        : $separator-dark-color !default
 $table-dark-hover-background    : rgba(255, 255, 255, .07) !default
 $table-dark-selected-background : rgba(255, 255, 255, .1) !default
+$table-box-shadow-dark          : $dark-shadow-2 !default
 $toolbar-min-height             : 50px !default
 $toolbar-padding                : 0 12px !default
 $toolbar-inset-size             : 58px !default
@@ -518,8 +577,10 @@ $toolbar-title-letter-spacing   : .01em !default
 $toolbar-title-padding          : 0 12px !default
 $layout-border                  : 1px solid $separator-color !default
 $layout-shadow                  : 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24) !default
+$layout-shadow-dark             : 0 0 10px 2px rgba(255,255,255,.2), 0 0px 10px rgba(255,255,255,.24) !default
 $menu-background                : #fff !default
 $menu-box-shadow                : $shadow-2 !default
+$menu-box-shadow-dark           : $dark-shadow-2 !default
 $menu-max-width                 : 95vw !default
 $rating-grade-color             : $yellow !default
 $rating-shadow                  : 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !default
@@ -1076,6 +1137,7 @@ input[type='search']::-webkit-search-decoration
     border: 1px solid $separator-color
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2
   &__section
     position: relative
     &--vert
@@ -1102,7 +1164,7 @@ input[type='search']::-webkit-search-decoration
   &__actions
     padding: 8px
     align-items: center
-    .q-btn
+    .q-btn--rectangle
       padding: 0 8px
     &--horiz
       > .q-btn-item + .q-btn-item,
@@ -1451,8 +1513,12 @@ $chip-height: 2em
     border-radius: $generic-border-radius
     .q-avatar
       border-radius: ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
-body.desktop .q-chip--clickable:focus
-  box-shadow: $shadow-1
+body.desktop
+  .q-chip--clickable:focus
+    box-shadow: $shadow-1
+  &.body--dark
+    .q-chip--clickable:focus
+      box-shadow: $dark-shadow-1
 .q-circular-progress
   display: inline-block
   position: relative
@@ -1620,6 +1686,7 @@ body.desktop .q-chip--clickable:focus
   .q-tab-panels
     background: inherit
   &--dark
+    box-shadow: $dark-shadow-2
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)
     .q-slider__thumb
@@ -1825,6 +1892,7 @@ body.desktop .q-chip--clickable:focus
   &--landscape-minimal
     width: 310px
   &--dark
+    box-shadow: $dark-shadow-2
     border-color: $separator-dark-color
 .q-dialog
   &__title
@@ -1842,7 +1910,6 @@ body.desktop .q-chip--clickable:focus
       -webkit-overflow-scrolling: touch
       will-change: scroll-position
       border-radius: $generic-border-radius
-      box-shadow: $shadow-4
     &--square > div
       border-radius: 0 !important
     > .q-card
@@ -2192,7 +2259,8 @@ body.q-ios-padding .q-dialog__inner
       margin-left: -28px
     &--opened
       opacity: 1
-      transform: scale(1) translate(0, 0)
+      
+      transform: scale(1) translate(0.1px, 0)
       pointer-events: all
   &--align-left
     > .q-fab__actions
@@ -2849,7 +2917,9 @@ body.mobile .q-textarea,
       box-shadow: none
       transition: box-shadow .24s ease-in-out
     &:focus:before
-      box-shadow: $shadow-4
+      box-shadow: $shadow-2
+body.body--dark .q-knob--editable:focus:before
+  box-shadow: $dark-shadow-2
 .q-layout
   width: 100%
 .q-layout-container
@@ -2999,6 +3069,8 @@ body:not(.q-body--layout-animate)
 body.body--dark
   .q-header, .q-footer, .q-drawer
     border-color: $separator-dark-color
+  .q-layout__shadow:after
+    box-shadow: $layout-shadow-dark
 body.platform-ios
   .q-layout--containerized
     
@@ -3049,9 +3121,10 @@ body.platform-ios
     &--dark
       background: rgba(255,255,255,.6)
   &__stripe
-    transition: width var(--q-linear-progress-speed)
     background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
     background-size: 40px 40px !important
+    &--with-transition
+      transition: width var(--q-linear-progress-speed)
 @keyframes q-linear-progress--indeterminate
   0%
     transform: translate3d(-35%, 0, 0) scale3d(.35, 1, 1)
@@ -3080,6 +3153,8 @@ body.platform-ios
   z-index: $z-menu
   &--square
     border-radius: 0
+  &--dark
+    box-shadow: $menu-box-shadow-dark
 .q-option-group
   &--inline
     > div
@@ -3867,6 +3942,7 @@ body.platform-ios
     color: $grey
     flex-direction: row
   &--dark
+    box-shadow: $dark-shadow-2
     .q-stepper__dot span
       color: #000
   &__tab
@@ -3946,6 +4022,8 @@ body.platform-ios
         display: none
   &__nav
     padding-top: 24px
+  &--flat
+    box-shadow: none
   &--bordered
     border: 1px solid $separator-color
   &--horizontal
@@ -4128,6 +4206,10 @@ body.platform-ios
       margin-right: 4px
   &--col-auto-width
     width: 1px
+.q-table__card--dark,
+.q-table--dark
+  box-shadow: $table-box-shadow-dark
+.q-table
   &--flat
     box-shadow: none
   &--bordered
@@ -4236,7 +4318,8 @@ body.platform-ios
       content: ''
 body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no-hover):before
   content: ''
-.q-table__card--dark, .q-table--dark
+.q-table__card--dark,
+.q-table--dark
   border-color: $table-dark-border-color
 .q-table--dark
   .q-table__bottom, thead, tr, th, td
@@ -4540,6 +4623,7 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
       margin-top: 12px
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2
 .q-timeline
   padding: 0
   width: 100%
@@ -4806,8 +4890,11 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
       color: #fff
       &--truthy
         color: var(--q-primary)
-    .q-toggle__thumb:before
-      opacity: .32 !important
+    .q-toggle__thumb
+      &:after
+        box-shadow: none
+      &:before
+        opacity: .32 !important
   &--dense
     .q-toggle__inner
       width: .8em
@@ -5139,6 +5226,7 @@ body.desktop
       pointer-events: none
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2
     .q-uploader__file
       border-color: $separator-dark-color
     .q-uploader__dnd, .q-uploader__overlay
@@ -6695,12 +6783,22 @@ body.q-ios-padding .q-notifications__list
     box-shadow: nth($shadows, $z)
   .shadow-up-#{$z}
     box-shadow: nth($shadows-up, $z)
-.no-shadow, .shadow-0
-  box-shadow: none !important
 .inset-shadow
-  box-shadow: $inset-shadow !important
+  box-shadow: $inset-shadow
 .inset-shadow-down
-  box-shadow: $inset-shadow-down !important
+  box-shadow: $inset-shadow-down
+body.body--dark
+  @for $z from 1 through 24
+    .shadow-#{$z}
+      box-shadow: nth($dark-shadows, $z)
+    .shadow-up-#{$z}
+      box-shadow: nth($dark-shadows-up, $z)
+  .inset-shadow
+    box-shadow: $inset-dark-shadow
+  .inset-shadow-down
+    box-shadow: $inset-dark-shadow-down
+.no-shadow, .shadow-0
+  box-shadow: none !important
 .z-marginals
   z-index: $z-marginals
 .z-notify
@@ -7353,8 +7451,10 @@ sup
   opacity: .6 !important
 .hidden
   display: none !important
-.invisible
+.invisible, .invisible *
   visibility: hidden !important
+  transition: none !important
+  animation: none !important
 .transparent
   background: transparent !important
 .overflow-auto