quasar 2.16.6 → 2.16.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.16.6",
+  "version": "2.16.8",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "type": "module",
   "module": "dist/quasar.client.js",

package/src/components/avatar/QAvatar.sass

@@ -5,13 +5,13 @@
 
   border-radius: 50%
 
-  font-size: 48px
+  font-size: $avatar-font-size
   height: 1em
   width: 1em
 
   &__content
-    font-size: .5em
-    line-height: .5em
+    font-size: $avatar-content-font-size
+    line-height: $avatar-content-line-height
 
   &__content, img:not(.q-icon):not(.q-img__image)
     border-radius: inherit

package/src/components/badge/QBadge.sass

@@ -3,9 +3,9 @@
   color: #fff
   padding: 2px 6px
   border-radius: $generic-border-radius
-  font-size: 12px
-  line-height: 12px
-  min-height: 12px
+  font-size: $badge-font-size
+  line-height: $badge-line-height
+  min-height: $badge-min-height
   font-weight: normal
   vertical-align: baseline
 

package/src/components/banner/QBanner.sass

@@ -9,9 +9,9 @@
   &__avatar
     min-width: 1px !important
     > .q-avatar
-      font-size: 46px
+      font-size: $banner-avatar-font-size
     > .q-icon
-      font-size: 40px
+      font-size: $banner-avatar-icon-font-size
 
   &__avatar:not(:empty) + &__content
     padding-left: 16px
@@ -30,7 +30,7 @@
       padding-top: 12px
     .q-banner__avatar
       > .q-avatar, > .q-icon
-        font-size: 28px
+        font-size: $banner-avatar-dense-font-size
     .q-banner__avatar:not(:empty) + .q-banner__content
       padding-left: 8px
     .q-banner__actions

package/src/components/bar/QBar.sass

@@ -13,19 +13,19 @@
 
   &--standard
     padding: 0 12px
-    height: 32px
+    height: $bar-height
     font-size: 18px
     > div
-      font-size: 16px
+      font-size: $bar-inner-font-size
     .q-btn
-      font-size: 11px
+      font-size: $bar-button-font-size
 
   &--dense
     padding: 0 8px
-    height: 24px
-    font-size: 14px
+    height: $bar-dense-height
+    font-size: $bar-dense-font-size
     .q-btn
-      font-size: 8px
+      font-size: $bar-dense-button-font-size
 
   &--dark
     background: rgba(255,255,255,.15)

package/src/components/breadcrumbs/QBreadcrumbs.sass

@@ -4,7 +4,7 @@
     color: inherit
 
   &__el-icon
-    font-size: 125%
+    font-size: $breadcrumbs-icon-font-size
 
     &--with-label
       margin-right: 8px

package/src/components/btn/QBtn.js

@@ -304,8 +304,7 @@ export default createComponent({
         h(QIcon, {
           name: props.icon,
           left: props.stack !== true && hasLabel.value === true,
-          role: 'img',
-          'aria-hidden': 'true'
+          role: 'img'
         })
       )
 
@@ -320,8 +319,7 @@ export default createComponent({
           h(QIcon, {
             name: props.iconRight,
             right: props.stack !== true && hasLabel.value === true,
-            role: 'img',
-            'aria-hidden': 'true'
+            role: 'img'
           })
         )
       }

package/src/components/btn/QBtn.sass

@@ -117,7 +117,7 @@
 
   &--fab, &--fab-mini
     .q-icon
-      font-size: 24px
+      font-size: $button-fab-icon-font-size
 
   &--fab
     padding: 16px

package/src/components/carousel/QCarousel.sass

@@ -20,7 +20,7 @@
     pointer-events: none
 
     .q-icon
-      font-size: 28px
+      font-size: $carousel-arrow-icon-font-size
     .q-btn
       pointer-events: all
 

package/src/components/chat/QChatMessage.sass

@@ -1,15 +1,17 @@
-.q-message-name, .q-message-stamp, .q-message-label
-  font-size: small
+.q-message-name
+  font-size: $chat-message-name-font-size
 
 .q-message-label
   margin: (3 * $chat-message-distance) 0
   text-align: center
+  font-size: $chat-message-label-font-size
 
 .q-message-stamp
   color: inherit
   margin-top: 4px
   opacity: .6
   display: none
+  font-size: $chat-message-stamp-font-size
 
 .q-message-avatar
   border-radius: 50%

package/src/components/checkbox/QCheckbox.sass

@@ -40,7 +40,7 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
     transform: rotate(-280deg) scale(0)
 
   &__inner
-    font-size: 40px
+    font-size: $checkbox-inner-font-size
     width: 1em
     min-width: 1em
     height: 1em

package/src/components/chip/QChip.sass

@@ -1,5 +1,3 @@
-$chip-height: 2em
-
 .q-chip
   vertical-align: middle
   border-radius: 16px
@@ -13,7 +11,7 @@ $chip-height: 2em
   background: #e0e0e0
   color: rgba(0,0,0,.87)
 
-  font-size: 14px
+  font-size: $chip-font-size
   padding: .5em .9em
 
   &--colored, &--dark
@@ -25,7 +23,7 @@ $chip-height: 2em
     border: 1px solid currentColor
 
   .q-avatar
-    font-size: $chip-height
+    font-size: $chip-avatar-font-size
     margin-left: -.45em
     margin-right: .2em
     border-radius: 16px
@@ -59,10 +57,10 @@ $chip-height: 2em
   &--dense
     border-radius: 12px
     padding: 0 .4em
-    height: 1.5em
+    height: $chip-dense-height
 
     .q-avatar
-      font-size: 1.5em
+      font-size: $chip-dense-avatar-font-size
       margin-left: -.27em
       margin-right: .1em
       border-radius: 12px

package/src/components/color/QColor.sass

@@ -134,7 +134,7 @@
       margin-right: 18px
 
     input
-      font-size: 11px
+      font-size: $color-picker-tune-tab-input-font-size
       border: 1px solid $grey-4
       border-radius: $generic-border-radius
       width: 3.5em

package/src/components/date/QDate.sass

@@ -33,14 +33,14 @@
       opacity: 1
 
   &__header-subtitle
-    font-size: 14px
-    line-height: 1.75
-    letter-spacing: .00938em
+    font-size: $date-header-subtitle-font-size
+    line-height: $date-header-subtitle-line-height
+    letter-spacing: $date-header-subtitle-letter-spacing
 
   &__header-title-label
-    font-size: 24px
-    line-height: 1.2
-    letter-spacing: .00735em
+    font-size: $date-header-title-label-font-size
+    line-height: $date-header-title-label-line-height
+    letter-spacing: $date-header-title-label-letter-spacing
 
   &__view
     height: 100%
@@ -64,7 +64,7 @@
     height: 12.5%
     > div
       opacity: .38
-      font-size: 12px
+      font-size: $date-calendar-weekdays-inner-font-size
 
   &__calendar-item
     display: inline-flex

package/src/components/dialog/QDialog.sass

@@ -1,13 +1,13 @@
 .q-dialog
 
   &__title
-    font-size: 1.25rem
+    font-size: $dialog-title-font-size
     font-weight: 500
-    line-height: 2rem
-    letter-spacing: .0125em
+    line-height: $dialog-title-line-height
+    letter-spacing: $dialog-title-letter-spacing
 
   &__progress
-    font-size: 4rem
+    font-size: $dialog-progress-font-size
 
   &__inner
     outline: 0

package/src/components/fab/QFab.sass

@@ -75,8 +75,8 @@
         padding-left: .571em
 
   &__icon-holder
-    min-width: 24px
-    min-height: 24px
+    min-width: $button-fab-icon-font-size
+    min-height: $button-fab-icon-font-size
     position: relative
 
     &--opened

package/src/components/field/QField.sass

@@ -11,18 +11,18 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     display: none
 
   &--with-bottom
-    padding-bottom: 20px
+    padding-bottom: $field-with-bottom-padding-bottom
 
   &__marginal
     height: 56px
     color: rgba(0,0,0,.54)
-    font-size: 24px
+    font-size: $field-marginal-font-size
 
     > * + *
       margin-left: 2px
 
     .q-avatar
-      font-size: 32px
+      font-size: $field-marginal-avatar-font-size
 
   &__before, &__prepend
     padding-right: 12px
@@ -40,9 +40,9 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     text-align: left
 
   &__bottom
-    font-size: 12px
+    font-size: $field-bottom-font-size
     min-height: 20px
-    line-height: 1
+    line-height: $field-bottom-line-height
     color: rgba(0,0,0,.54)
     padding: 8px 12px 0
     backface-visibility: hidden
@@ -188,13 +188,13 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
 
   &__label
     left: 0
-    top: 18px
+    top: $field-label-top
     max-width: 100%
     color: $input-label-color
-    font-size: 16px
-    line-height: 20px
+    font-size: $field-label-font-size
+    line-height: $field-label-line-height
     font-weight: 400
-    letter-spacing: .00937em
+    letter-spacing: $field-label-letter-spacing
     text-decoration: inherit
     text-transform: inherit
     transform-origin: left top
@@ -418,16 +418,19 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
         padding-bottom: 2px
 
   &--dense
+    .q-field--with-bottom
+      padding-bottom: $field-dense-with-bottom-padding-bottom
+
     .q-field__shadow
       top: 0
     .q-field__control, .q-field__marginal
       height: 40px
     .q-field__bottom
-      font-size: 11px
+      font-size: $field-dense-bottom-font-size
 
     .q-field__label
-      font-size: 14px
-      top: 10px
+      font-size: $field-dense-label-font-size
+      top: $field-dense-label-top
     .q-field__before, .q-field__prepend
       padding-right: 6px
     .q-field__after, .q-field__append
@@ -437,7 +440,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
 
     .q-field__marginal
       .q-avatar
-        font-size: 24px
+        font-size: $field-dense-marginal-avatar-font-size
 
     &.q-field--float .q-field__label
       transform: translateY(-30%) scale(.75)

package/src/components/item/QItem.sass

@@ -15,10 +15,10 @@
       max-width: 100%
 
       > .q-icon
-        font-size: 24px
+        font-size: $item-section-side-icon-font-size
 
       > .q-avatar
-        font-size: 40px
+        font-size: $item-section-side-avatar-font-size
 
     &--avatar
       color: inherit
@@ -52,9 +52,9 @@
     &--header
       color: $grey-7
       padding: 16px
-      font-size: .875rem
-      line-height: 1.25rem
-      letter-spacing: .01786em
+      font-size: $item-label-header-font-size
+      line-height: $item-label-header-line-height
+      letter-spacing: $item-label-header-letter-spacing
 
       .q-separator--spaced + &, .q-list--padding &
         padding-top: 8px

package/src/components/knob/QKnob.sass

@@ -1,6 +1,6 @@
 .q-knob
 
-  font-size: 48px
+  font-size: $knob-font-size
 
   &--editable
     cursor: pointer

package/src/components/radio/QRadio.sass

@@ -30,7 +30,7 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
     transition: transform $radio-transition
 
   &__inner
-    font-size: 40px
+    font-size: $radio-inner-font-size
     width: 1em
     min-width: 1em
     height: 1em

package/src/components/slide-item/QSlideItem.sass

@@ -4,11 +4,11 @@
 
   &__left, &__right, &__top, &__bottom
     visibility: hidden
-    font-size: 14px
+    font-size: $slide-item-active-text-font-size
     color: #fff
 
     .q-icon
-      font-size: 1.714em
+      font-size: $slide-item-active-icon-font-size
 
   &__left
     background: $green

package/src/components/slider/QSlider.sass

@@ -221,7 +221,7 @@
 
   &__text
     color: #fff
-    font-size: 12px
+    font-size: $slider-text-font-size
 
   &--no-value
     .q-slider__thumb,

package/src/components/stepper/QStepper.sass

@@ -4,21 +4,21 @@
   background: #fff
 
   &__title
-    font-size: 14px
-    line-height: 18px
-    letter-spacing: .1px
+    font-size: $stepper-title-font-size
+    line-height: $stepper-title-line-height
+    letter-spacing: $stepper-title-letter-spacing
 
   &__caption
-    font-size: 12px
-    line-height: 14px
+    font-size: $stepper-caption-font-size
+    line-height: $stepper-caption-line-height
 
   &__dot
     contain: layout
     margin-right: 8px
-    font-size: 14px
-    width: 24px
-    min-width: 24px
-    height: 24px
+    font-size: $stepper-dot-font-size
+    width: calc($stepper-dot-font-size + 10px)
+    min-width: calc($stepper-dot-font-size + 10px)
+    height: calc($stepper-dot-font-size + 10px)
     border-radius: 50%
     background: currentColor
 
@@ -27,7 +27,7 @@
 
   &__tab
     padding: 8px 24px
-    font-size: 14px
+    font-size: $stepper-tab-font-size
     color: $grey
     flex-direction: row
 
@@ -59,7 +59,7 @@
         background: transparent !important
         span
           color: currentColor
-          font-size: 24px
+          font-size: $stepper-dot-error-with-icon-font-size
 
   &__header
     border-top-left-radius: inherit

package/src/components/table/QTable.sass

@@ -13,7 +13,7 @@
 
   th
     font-weight: 500
-    font-size: 12px
+    font-size: $table-th-font-size
     user-select: none
     &.sortable
       cursor: pointer
@@ -33,7 +33,7 @@
     border-width: 0
 
   tbody td
-    font-size: 13px
+    font-size: $table-tbody-td-font-size
 
   &__card
     color: #000
@@ -68,7 +68,7 @@
       flex-wrap: wrap
 
   &__title
-    font-size: 20px
+    font-size: $table-title-font-size
     letter-spacing: .005em
     font-weight: 400
 
@@ -90,13 +90,13 @@
   &__bottom
     min-height: 50px
     padding: 4px 14px 4px 16px
-    font-size: 12px
+    font-size: $table-bottom-font-size
 
     .q-table__control
       min-height: 24px
 
   &__bottom-nodata-icon
-    font-size: 200%
+    font-size: $table-nodata-icon-font-size
     margin-right: 8px
 
   &__bottom-item
@@ -109,7 +109,7 @@
   &__sort-icon
     transition: transform $table-transition
     opacity: 0
-    font-size: 120%
+    font-size: $table-sort-icon-font-size
 
     &--left, &--center
       margin-left: 4px
@@ -176,10 +176,10 @@
   &__grid-item-title
     opacity: .54
     font-weight: 500
-    font-size: 12px
+    font-size: $table-grid-item-title-font-size
 
   &__grid-item-value
-    font-size: 13px
+    font-size: $table-grid-item-value-font-size
 
   &__grid-item
     padding: 4px
@@ -217,7 +217,7 @@
     min-height: 33px
 
   .q-table__sort-icon
-    font-size: 110%
+    font-size: $table-dense-sort-icon-font-size
   .q-table
     th, td
       padding: 4px 8px

package/src/components/tabs/QTabs.sass

@@ -30,9 +30,9 @@
       right: -16px
 
   &__icon
-    width: 24px
-    height: 24px
-    font-size: 24px
+    width: $tabs-icon-font-width
+    height: $tabs-icon-font-height
+    font-size: $tabs-icon-font-size
 
   &__label
     font-size: $button-font-size
@@ -57,7 +57,7 @@
   &__alert-icon
     top: 2px
     right: -12px
-    font-size: 18px
+    font-size: $tabs-alert-icon-font-size
 
   &__indicator
     opacity: 0
@@ -105,8 +105,8 @@
 
   &__arrow
     cursor: pointer
-    font-size: 32px
-    min-width: 36px
+    font-size: $tabs-arrow-font-size
+    min-width: calc($tabs-arrow-font-size + 4px)
     text-shadow: 0 0 3px #fff, 0 0 1px #fff, 0 0 1px #000
     transition: opacity .3s
 

package/src/components/time/QTime.sass

@@ -23,7 +23,7 @@
     padding: 0 16px 16px
 
   &__header-label
-    font-size: 28px
+    font-size: $time-header-label-font-size
     line-height: 1
     letter-spacing: -.00833em
 
@@ -109,7 +109,7 @@
     min-height: 32px
     width: 32px
     height: 32px
-    font-size: 12px
+    font-size: $time-clock-position-font-size
     line-height: 32px
     margin: 0
     padding: 0

package/src/components/timeline/QTimeline.sass

@@ -18,11 +18,11 @@
     margin-bottom: 16px
 
   &__subtitle
-    font-size: 12px
+    font-size: $timeline-subtitle-font-size
     margin-bottom: 8px
     opacity: .6
     text-transform: uppercase
-    letter-spacing: 1px
+    letter-spacing: $timeline-subtitle-letter-spacing
     font-weight: 700
 
   &__dot
@@ -55,7 +55,7 @@
       top: 0
       left: 0
       right: 0
-      font-size: 16px
+      font-size: $timeline-dot-icon-font-size
       height: 38px
       line-height: 38px
       width: 100%
@@ -141,7 +141,7 @@
     .q-timeline
       &__heading
         display: table-row
-        font-size: 200%
+        font-size: $timeline-comfortable-heading-font-size
         > div
           display: table-cell
 

package/src/components/tree/QTree.sass

@@ -86,7 +86,7 @@
 
   &__icon,
   &__node-header-content .q-icon
-    font-size: 21px
+    font-size: $tree-icon-font-size
 
   &__img
     height: 42px

package/src/components/uploader/QUploader.sass

@@ -111,13 +111,13 @@
     margin-right: 4px
 
   &__title
-    font-size: 14px
+    font-size: $uploader-title-font-size
     font-weight: bold
-    line-height: 18px
+    line-height: $uploader-title-line-height
     word-break: break-word
   &__subtitle
-    font-size: 12px
-    line-height: 18px
+    font-size: $uploader-subtitle-font-size
+    line-height: $uploader-subtitle-line-height
 
   &--disable
     .q-uploader__header, .q-uploader__list

package/src/composables/private.use-field/use-field.js

@@ -399,6 +399,7 @@ export default function (state) {
             name: props.clearIcon || $q.iconSet.field.clear,
             tabindex: 0,
             role: 'button',
+            'aria-hidden': 'false',
             'aria-label': $q.lang.label.clear,
             onKeyup: onClearableKeyup,
             onClick: clearValue