quasar 2.3.1 → 2.4.0

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.3.1
+ * Quasar Framework v2.4.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -822,8 +822,6 @@ input[type='search']::-webkit-search-decoration
     font-size: 125%
     &--with-label
       margin-right: 8px
-  &--last a
-    pointer-events: none
 [dir=rtl] .q-breadcrumbs__separator .q-icon
   transform: scaleX(-1) #{"/* rtl:ignore */"}
 .q-btn
@@ -1549,40 +1547,30 @@ body.desktop .q-chip--clickable:focus
     box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)
     border-radius: 50%
     transform: translate(-5px, -5px)
-  &__hue .q-slider__track-container
+  &__hue .q-slider__track
     background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important 
     opacity: 1
-  &__alpha .q-slider__track-container
-    color: #fff
-    opacity: 1
-    height: 8px
-    background-color: #fff !important
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
-    &:after
+  &__alpha
+    .q-slider__track-container
+      padding-top: 0
+    .q-slider__track:before
       content: ''
       position: absolute
       top: 0
       right: 0
       bottom: 0
       left: 0
+      border-radius: inherit
       background: linear-gradient(90deg, rgba(255,255,255,0), $grey-7)
   &__sliders
-    padding: 4px 16px 16px
-    .q-slider__track-container
-      height: 10px
-      margin-top: -5px
-    .q-slider__track
-      display: none
+    padding: 0 16px
     .q-slider__thumb
+      color: $grey-9
       path
         stroke-width: 2px
         fill: transparent
     .q-slider--active path
       stroke-width: 3px
-    .q-slider
-      height: 16px
-      margin-top: 8px
-      color: $grey-9
   
   &__tune-tab
     .q-slider
@@ -1621,8 +1609,8 @@ body.desktop .q-chip--clickable:focus
   &--dark
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)
-    .q-slider
-      color: $grey-5
+    .q-slider__thumb
+      color: $grey-1
 .q-date
   display: inline-flex
   box-shadow: $shadow-2
@@ -1705,6 +1693,8 @@ body.desktop .q-chip--clickable:focus
     > div
       line-height: 30px
       text-align: center
+    > button
+      line-height: 22px
     &--out
       opacity: .18
     &--fill
@@ -1952,7 +1942,9 @@ body.q-ios-padding .q-dialog__inner
   background-color: #fff
   &.disabled
     border-style: dashed
-  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+  > div:first-child,
+  &__toolbars-container,
+  &__toolbars-container > div:first-child
     border-top-left-radius: inherit
     border-top-right-radius: inherit
   &__content
@@ -1962,6 +1954,7 @@ body.q-ios-padding .q-dialog__inner
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
     overflow: auto
+    max-width: 100%
     pre
       white-space: pre-wrap
     hr
@@ -1976,6 +1969,8 @@ body.q-ios-padding .q-dialog__inner
   &__toolbar
     border-bottom: 1px solid $editor-border-color
     min-height: 32px
+  &__toolbars-container
+    max-width: 100%
   .q-btn
     margin: $editor-button-gutter
   &__toolbar-group
@@ -2182,7 +2177,6 @@ body.q-ios-padding .q-dialog__inner
     &--up, &--down
       left: 50%
       margin-left: -28px
-    
     &--opened
       opacity: 1
       transform: scale(1) translate(0, 0)
@@ -2633,8 +2627,10 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     &::-webkit-file-upload-button
       cursor: pointer
   &__filler
-    opacity: 0
-    pointer-events: none
+    visibility: hidden
+    width: 100%
+    border: none
+    padding: 0
   &__dnd
     outline: 1px dashed currentColor
     outline-offset: -4px
@@ -3035,7 +3031,7 @@ body.platform-ios
     &--dark
       background: rgba(255,255,255,.6)
   &__stripe
-    transition: width .3s
+    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
 @keyframes q-linear-progress--indeterminate
@@ -3483,195 +3479,250 @@ body.platform-ios
     cursor: pointer
 .q-slider
   position: relative
-  color: var(--q-primary)
-  outline: 0
   &--h
     width: 100%
-    height: 40px
   &--v
-    width: 40px
     height: 200px
+  &--editable .q-slider__track-container
+    cursor: grab
   &__track-container
-    background: rgba(0,0,0,.26)
+    outline: 0
     &--h
-      top: 50%
-      margin-top: -1px
       width: 100%
-      height: 2px
+      padding: 12px 0
+      .q-slider__selection
+        will-change: width, left
     &--v
-      left: 50%
-      margin-left: -1px
       height: 100%
-      width: 2px
+      padding: 0 12px
+      .q-slider__selection
+        will-change: height, top
   &__track
+    color: var(--q-primary)
+    background: rgba(0,0,0,.1)
+    border-radius: $generic-border-radius
+    width: inherit
+    height: inherit
+  &__inner
+    background: rgba(0,0,0,.1)
+    border-radius: inherit
+    width: 100%
+    height: 100%
+  &__selection
     background: currentColor
-    &--h
-      will-change: width, left
-      top: 0
-      bottom: 0
-    &--v
-      will-change: height, top
-      left: 0
-      right: 0
-  &__track-markers
-    color: #000
-    &--h
-      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
-    &--v
-      background-image: repeating-linear-gradient(to top, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+    border-radius: inherit
+    width: 100%
+    height: 100%
+  &__markers
+    color: rgba(0,0,0,.3)
+    border-radius: inherit
+    width: 100%
+    height: 100%
     &:after
       content: ''
       position: absolute
-      right: 0
-      top: 0
-      bottom: 0
-      height: 2px
-      width: 2px
       background: currentColor
-  &__thumb-container
-    width: 20px
-    height: 20px
+    &--h
+      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        height: 100%
+        width: 2px
+        top: 0
+        right: 0
+    &--v
+      background-image: repeating-linear-gradient(to bottom, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        width: 100%
+        height: 2px
+        left: 0
+        bottom: 0
+  &__marker-labels-container
+    position: relative
+    width: 100%
+    height: 100%
+    min-height: 24px
+    min-width: 24px
+  &__marker-labels
+    position: absolute
+    &--h
+      &-standard
+        top: 0
+      &-switched
+        bottom: 0
+      &-ltr
+        transform: translateX(-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: translateX(50%) #{"/* rtl:ignore */"}
+    &--v
+      &-standard
+        left: 4px
+      &-switched
+        right: 4px
+      &-ltr
+        transform: translateY(-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: translateY(50%) #{"/* rtl:ignore */"}
+  &__thumb
+    z-index: 1
     outline: 0
+    color: var(--q-primary)
+    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
     &--h
       top: 50%
-      margin-top: -10px
-      transform: translateX(-10px) #{"/* rtl:ignore */"}
       will-change: left
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: scale(1) translate(50%,-50%) #{"/* rtl:ignore */"}
     &--v
-      left: 50%
-      margin-left: -10px
-      transform: translateY(-10px)
+      left: 50% #{"/* rtl:ignore */"}
       will-change: top
-  &__thumb
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
+      &-rtl
+        transform: scale(1) translate(-50%,50%) #{"/* rtl:ignore */"}
+  &__thumb-shape
     top: 0
     left: 0
-    transform: scale(1)
-    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
     stroke-width: 3.5
     stroke: currentColor
+    transition: transform .28s
     path
       stroke: currentColor
       fill: currentColor
   &__focus-ring
-    width: 20px
-    height: 20px
-    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     border-radius: 50%
     opacity: 0
+    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     transition-delay: .14s
-  &__arrow
-    position: absolute
-    width: 0
-    height: 0
-    transform-origin: 50% 50%
-    transition: transform 100ms ease-out
+  &__pin
+    opacity: 0
+    white-space: nowrap
+    transition: opacity .28s ease-out
+    transition-delay: .14s
+    &:before
+      content: ''
+      width: 0
+      height: 0
+      position: absolute
     &--h
-      top: 19px
-      left: 4px
-      border-top: 6px solid currentColor
-      border-left: 6px solid transparent
-      border-right: 6px solid transparent
-      transform: scale(0) translateY(0)
+      &:before
+        border-left: 6px solid transparent
+        border-right: 6px solid transparent
+        left: 50%
+        transform: translateX(-50%)
+      &-standard
+        bottom: 100%
+        &:before
+          bottom: 2px
+          border-top: 6px solid currentColor
+      &-switched
+        top: 100%
+        &:before
+          top: 2px
+          border-bottom: 6px solid currentColor
     &--v
-      top: 4px
-      left: 15px
-      border-top: 6px solid transparent
-      border-bottom: 6px solid transparent
-      border-right: 6px solid currentColor
-      transform: scale(0) translateX(-20px)
-  &__pin
-    transition: transform 100ms ease-out
+      top: 0
+      &:before
+        top: 50%
+        transform: translateY(-50%)
+        border-top: 6px solid transparent
+        border-bottom: 6px solid transparent
+      &-standard
+        left: 100%
+        &:before
+          left: 2px
+          border-right: 6px solid currentColor
+      &-switched
+        right: 100%
+        &:before
+          right: 2px
+          border-left: 6px solid currentColor
+  &__label
     z-index: 1
     white-space: nowrap
+    position: absolute
     &--h
-      bottom: 0
-      right: 0
-      transform: scale(0) translateY(0)
-      will-change: left
+      left: 50%
+      transform: translateX(-50%)
+      &-standard
+        bottom: 7px
+      &-switched
+        top: 7px
     &--v
       top: 50%
-      left: 20px
-      height: 0
-      transform: scale(0) translateX(-20px)
-      will-change: top
-      transform-origin: left center
-    &-text-container
-      min-height: 25px
-      padding: 2px 8px
-      border-radius: $generic-border-radius
-      background: currentColor
-      position: relative
-      text-align: center
-      &--h
-        right: -50%
-      &--v
-        transform: translateY(-50%)
-    &-text
-      color: #fff
-      font-size: 12px
-  &--editable
-    cursor: grab
+      transform: translateY(-50%)
+      &-standard
+        left: 7px
+      &-switched
+        right: 7px
+  &__text-container
+    min-height: 25px
+    padding: 2px 8px
+    border-radius: $generic-border-radius
+    background: currentColor
+    position: relative
+    text-align: center
+  &__text
+    color: #fff
+    font-size: 12px
   &--no-value
-    .q-slider__thumb, .q-slider__track
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
       visibility: hidden
   &--focus
     .q-slider__thumb
       transform: scale(1)
-  &--focus, body.desktop &.q-slider--editable:hover
+  &--focus,
+  body.desktop &.q-slider--editable .q-slider__track-container:hover
     .q-slider__focus-ring
       background: currentColor
       transform: scale3d(1.55, 1.55, 1)
       opacity: .25
-    .q-slider__thumb, .q-slider__track
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
       visibility: visible
   &--inactive
-    .q-slider__thumb-container
+    .q-slider__thumb
       &--h
         transition: left .28s, right .28s
       &--v
         transition: top .28s, bottom .28s
-    .q-slider__track
-      &--h
-        transition: width .28s, left .28s, right .28s
-      &--v
-        transition: height .28s, top .28s, bottom .28s
+    .q-slider__selection
+      transition: width .28s, left .28s, right .28s, height .28s, top .28s, bottom .28s
+    .q-slider__text-container
+      transition: transform .28s
   &--active
     cursor: grabbing
-    .q-slider__thumb
+    .q-slider__thumb-shape
       transform: scale(1.5)
-    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
+    .q-slider__focus-ring,
+    &.q-slider--label .q-slider__thumb-shape
       transform: scale(0) !important
-  body.desktop &.q-slider--enabled:hover
-    .q-slider__pin,
-    .q-slider__arrow
-      &--h
-        transform: scale(1) translateY(-25px)
-      &--v
-        transform: scale(1) translateX(5px)
+  body.desktop &.q-slider--enabled .q-slider__track-container:hover
+    .q-slider__pin
+      opacity: 1
   &--label
-    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
-      .q-slider__pin,
-      .q-slider__arrow
-        &--h
-          transform: scale(1) translateY(-25px)
-        &--v
-          transform: scale(1) translateX(5px)
+    &.q-slider--active,
+    .q-slider--focus,
+    &.q-slider--label-always
+      .q-slider__pin
+        opacity: 1
   &--dark
+    .q-slider__track
+      background: rgba(#fff,.1)
+    .q-slider__inner
+      background: rgba(#fff,.1)
+    .q-slider__markers
+      color: rgba(#fff,.3)
+  &--dense
     .q-slider__track-container
-      background: rgba(#fff, .3)
-    .q-slider__track-markers
-      color: #fff
-  &--reversed
-    .q-slider__thumb-container
       &--h
-        transform: translateX(10px) #{"/* rtl:ignore */"}
+        padding: 6px 0
       &--v
-        transform: translateY(10px)
-  &--dense
-    &--h
-      height: 20px
-    &--v
-      width: 20px
+        padding: 0 6px
 .q-space
   flex-grow: 1 !important
 .q-spinner
@@ -3829,6 +3880,30 @@ body.platform-ios
         text-align: center
         &:before, &:after
           display: none
+    &--contracted
+      min-height: 72px
+      &.q-stepper__header--alternative-labels
+        .q-stepper__tab
+          min-height: 72px
+          &:first-child
+            align-items: flex-start
+          &:last-child
+            align-items: flex-end
+      .q-stepper__tab
+        padding: 24px 0
+        &:first-child
+          .q-stepper__dot
+            transform: translateX(24px)
+        &:last-child
+          .q-stepper__dot
+            transform: translateX(-24px)
+      .q-stepper__tab:not(:last-child)
+        .q-stepper__dot:after
+          display: block !important
+      .q-stepper__dot
+        margin: 0
+      .q-stepper__label
+        display: none
   &__nav
     padding-top: 24px
   &--bordered
@@ -3914,31 +3989,6 @@ body.platform-ios
           background: $separator-dark-color
         .q-stepper__label
           color: rgba(255,255,255,.54)
-  &--contracted
-    .q-stepper__header
-      min-height: 72px
-      &--alternative-labels
-        .q-stepper__tab
-          min-height: 72px
-          &:first-child
-            align-items: flex-start
-          &:last-child
-            align-items: flex-end
-      .q-stepper__tab
-        padding: 24px 0
-        &:first-child
-          .q-stepper__dot
-            transform: translateX(24px)
-        &:last-child
-          .q-stepper__dot
-            transform: translateX(-24px)
-    .q-stepper__tab:not(:last-child)
-      .q-stepper__dot:after
-        display: block !important
-    .q-stepper__dot
-      margin: 0
-    .q-stepper__label
-      display: none
 .q-tab-panels
   background: #fff
 .q-tab-panel
@@ -4904,39 +4954,42 @@ body.desktop
     .q-tree__node-header:before,
     .q-tree__node-body:after
       display: none !important
-  &--dense .q-tree
-    &__arrow,
-    &__spinner
-      margin-right: 1px
-    &__img
-      height: 32px
-    &__tickbox
-      margin-right: 3px
-    &__node
-      padding: 0
-      &:after
-        top: 0
-        left: -8px
-    &__node-header
-      margin-top: 0
-      padding: 1px
-      &:before
-        top: 0
-        left: -8px
-        width: 8px
-    &__node--child
-      padding-left: 17px
-      > .q-tree__node-header:before
-        left: -25px
-        width: 21px
-    &__node-body
-      padding: 0 0 2px
-    &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
-      padding: 0 0 2px 20px
-      &:after
-        left: 8px
-    &__children
-      padding-left: 16px
+  &--dense
+    > .q-tree__node--child > .q-tree__node-header
+      padding-left: 1px
+    .q-tree
+      &__arrow,
+      &__spinner
+        margin-right: 1px
+      &__img
+        height: 32px
+      &__tickbox
+        margin-right: 3px
+      &__node
+        padding: 0
+        &:after
+          top: 0
+          left: -8px
+      &__node-header
+        margin-top: 0
+        padding: 1px
+        &:before
+          top: 0
+          left: -8px
+          width: 8px
+      &__node--child
+        padding-left: 17px
+        > .q-tree__node-header:before
+          left: -25px
+          width: 21px
+      &__node-body
+        padding: 0 0 2px
+      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+        padding: 0 0 2px 20px
+        &:after
+          left: 8px
+      &__children
+        padding-left: 16px
 [dir=rtl]
   .q-tree__arrow
     transform: rotate3d(0, 0, 1, 180deg) #{"/* rtl:ignore */"}
@@ -5076,6 +5129,7 @@ img.responsive
     outline: 0
   &__content
     outline: none
+    contain: content
     *
       overflow-anchor: none
   &__padding
@@ -6795,6 +6849,8 @@ body.q-ios-padding .q-notifications__list
 .q-link
   outline: 0
   text-decoration: none
+  &--focusable:focus-visible
+    text-decoration: underline dashed currentColor 1px
 body.electron
   .q-electron-drag
     -webkit-user-select: none
@@ -6920,6 +6976,10 @@ img.responsive
   border-radius: 0 !important
   max-width: 100vw
   max-height: 100vh
+body.q-ios-padding .fullscreen
+  padding-top: $ios-statusbar-height !important
+  padding-top: env(safe-area-inset-top) !important
+  padding-bottom: env(safe-area-inset-bottom) !important
 .absolute-full, .fullscreen, .fixed-full
   top: 0
   right: 0