quasar 2.16.7 → 2.16.9

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/select/__tests__/QSelect.cy.js

@@ -1432,7 +1432,7 @@ describe('QSelect API', () => {
     })
 
     describe('(event): filter-abort', () => {
-      it('should emit event when the the filterFn has not called the doneFn yet and a new filter is requested', () => {
+      it('should emit event when the filterFn has not called the doneFn yet and a new filter is requested', () => {
         const fn = cy.stub()
         const filterFn = cy.stub()
         mountQSelect({

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/__tests__/use-field.cy.js

@@ -82,7 +82,7 @@ describe('use-field API', () => {
 
     describe('Category: behavior|content', () => {
       describe('(prop): loading', () => {
-        it('should should set the component into a loading state', () => {
+        it('should set the component into a loading state', () => {
           mountQFieldWrapper({
             props: {
               loading: true

package/src/css/core/mouse.sass

@@ -38,5 +38,5 @@ body.mobile .scroll--mobile
 [aria-controls]
   cursor: pointer
 
-[aria-disabled]
+[aria-disabled='true']
   cursor: default

package/src/css/variables.sass

@@ -525,93 +525,211 @@ $dark-shadow-up-24 : 0 -11px 15px -7px $elevation-dark-umbra, 0 -24px 38px 3px $
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $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
-$min-line-height                : 1.12 !default
-
-$button-border-radius           : 3px !default
-$button-padding                 : 4px 16px !default
-$button-dense-padding           : .285em !default
-$button-transition              : $generic-hover-transition !default
-$button-font-size               : 14px !default
-$button-line-height             : 1.715em !default
-$button-font-weight             : 500 !default
-$button-shadow                  : $shadow-2 !default
-$button-shadow-active           : $shadow-5 !default
-$button-rounded-border-radius   : 28px !default
-$button-push-border-radius      : 7px !default
-
-$chat-message-received-color    : #000 !default
-$chat-message-received-bg       : $green-4 !default
-$chat-message-sent-color        : #000 !default
-$chat-message-sent-bg           : $grey-4 !default
-$chat-message-avatar-size       : 48px !default
-$chat-message-border-radius     : $generic-border-radius !default
-$chat-message-distance          : 8px !default
-$chat-message-text-padding      : 8px !default
-
-$item-base-color                : $grey-5 !default
-
-$editor-border-color            : $separator-color !default
-$editor-border-dark-color       : $separator-dark-color !default
-$editor-content-padding         : 10px !default
-$editor-content-min-height      : 10em !default
-$editor-toolbar-padding         : 4px !default
-$editor-hr-color                : $editor-border-color !default
-$editor-hr-dark-color           : $editor-border-dark-color !default
-$editor-button-gutter           : 4px !default
-
-$table-transition               : $generic-hover-transition !default
-$table-border-radius            : $generic-border-radius !default
-$table-box-shadow               : $shadow-2 !default
-
-$table-border-color             : $separator-color !default
-$table-hover-background         : rgba(0, 0, 0, .03) !default
-$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
-$toolbar-title-font-size        : 21px !default
-$toolbar-title-font-weight      : normal !default
-$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($shadow-color,0.2), 0 0px 10px rgba($shadow-color,0.24) !default
-$layout-shadow-dark             : 0 0 10px 2px rgba($dark-shadow-color,.2), 0 0px 10px rgba($dark-shadow-color,.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
-
-$tooltip-color                  : #fafafa !default
-$tooltip-background             : $grey-7 !default
-$tooltip-padding                : 6px 10px !default
-$tooltip-border-radius          : $generic-border-radius !default
-$tooltip-fontsize               : 10px !default
-$tooltip-mobile-padding         : 8px 16px !default
-$tooltip-mobile-fontsize        : 14px !default
-
-$option-focus-transition        : .22s cubic-bezier(0,0,.2,1) !default
-
-$input-font-size                : 14px !default
-$input-text-color               : rgba(0,0,0,.87) !default
-$input-label-color              : rgba(0,0,0,.6) !default
-$input-autofill-color           : inherit !default
-
-$img-loading-font-size          : 50px !default
-$img-content-position           : absolute !default
-$img-content-padding            : 16px !default
-$img-content-color              : #fff !default
-$img-content-background         : rgba(0, 0, 0, .47) !default
+$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
+$min-line-height                          : 1.12 !default
+
+$avatar-font-size                         : 48px !default
+$avatar-content-font-size                 : .5em !default
+$avatar-content-line-height               : .5em !default
+
+$badge-font-size                          : 12px !default
+$badge-line-height                        : 1 !default
+$badge-min-height                         : $badge-font-size * $badge-line-height !default
+
+$banner-avatar-font-size                  : 46px !default
+$banner-avatar-icon-font-size             : 40px !default
+$banner-avatar-dense-font-size            : 28px !default
+
+$bar-inner-font-size                      : 16px !default
+$bar-button-font-size                     : 11px !default
+$bar-dense-font-size                      : 14px !default
+$bar-dense-button-font-size               : 8px !default
+$bar-height                               : $bar-inner-font-size * 2 !default
+$bar-dense-height                         : $bar-dense-font-size + 10px !default
+
+$breadcrumbs-icon-font-size               : 125% !default
+
+$button-border-radius                     : 3px !default
+$button-padding                           : 4px 16px !default
+$button-dense-padding                     : .285em !default
+$button-fab-icon-font-size                : 24px !default
+$button-transition                        : $generic-hover-transition !default
+$button-font-size                         : 14px !default
+$button-line-height                       : 1.715em !default
+$button-font-weight                       : 500 !default
+$button-shadow                            : $shadow-2 !default
+$button-shadow-active                     : $shadow-5 !default
+$button-rounded-border-radius             : 28px !default
+$button-push-border-radius                : 7px !default
+
+$carousel-arrow-icon-font-size            : 28px !default
+
+$chat-message-name-font-size              : small !default
+$chat-message-stamp-font-size             : $chat-message-name-font-size !default
+$chat-message-label-font-size             : $chat-message-name-font-size !default
+$chat-message-received-color              : #000 !default
+$chat-message-received-bg                 : $green-4 !default
+$chat-message-sent-color                  : #000 !default
+$chat-message-sent-bg                     : $grey-4 !default
+$chat-message-avatar-size                 : 48px !default
+$chat-message-border-radius               : $generic-border-radius !default
+$chat-message-distance                    : 8px !default
+$chat-message-text-padding                : 8px !default
+
+$checkbox-inner-font-size                 : 40px !default
+
+$chip-height                              : 2em !default
+$chip-font-size                           : 14px !default
+$chip-avatar-font-size                    : $chip-height !default
+$chip-dense-height                        : 1.5em !default
+$chip-dense-avatar-font-size              : $chip-dense-height !default
+
+$color-picker-tune-tab-input-font-size    : 11px !default
+
+$date-header-subtitle-font-size           : 14px !default
+$date-header-subtitle-line-height         : 1.75 !default
+$date-header-subtitle-letter-spacing      : .00938em !default
+$date-header-title-label-font-size        : 24px !default
+$date-header-title-label-line-height      : 1.2 !default
+$date-header-title-label-letter-spacing   : .00735em !default
+$date-calendar-weekdays-inner-font-size   : 12px !default
+
+$dialog-title-font-size                   : 1.25rem !default
+$dialog-title-line-height                 : 1.6 !default
+$dialog-title-letter-spacing              : .0125em !default
+$dialog-progress-font-size                : 4rem !default
+
+$field-marginal-font-size                 : 24px !default
+$field-marginal-avatar-font-size          : 32px !default
+$field-bottom-font-size                   : 12px !default
+$field-bottom-line-height                 : 1 !default
+$field-with-bottom-padding-bottom         : $field-bottom-font-size * $field-bottom-line-height + 8px !default
+$field-label-font-size                    : 16px !default
+$field-label-line-height                  : 1.25 !default
+$field-label-top                          : 18px !default
+$field-label-letter-spacing               : .00937em !default
+$field-dense-bottom-font-size             : 11px !default
+$field-dense-with-bottom-padding-bottom   : $field-dense-bottom-font-size * $field-bottom-line-height + 8px !default
+$field-dense-label-font-size              : 14px !default
+$field-dense-label-top                    : 10px !default
+$field-dense-marginal-avatar-font-size    : 24px !default
+
+$item-base-color                          : $grey-5 !default
+$item-section-side-icon-font-size         : 24px !default
+$item-section-side-avatar-font-size       : 40px !default
+$item-label-header-font-size              : .875rem !default
+$item-label-header-line-height            : 1.25rem !default
+$item-label-header-letter-spacing         : .01786em !default
+
+$editor-border-color                      : $separator-color !default
+$editor-border-dark-color                 : $separator-dark-color !default
+$editor-content-padding                   : 10px !default
+$editor-content-min-height                : 10em !default
+$editor-toolbar-padding                   : 4px !default
+$editor-hr-color                          : $editor-border-color !default
+$editor-hr-dark-color                     : $editor-border-dark-color !default
+$editor-button-gutter                     : 4px !default
+
+$knob-font-size                           : 48px !default
+
+$radio-inner-font-size                    : 40px !default
+
+$slide-item-active-text-font-size         : 14px !default
+$slide-item-active-icon-font-size         : 1.714em !default
+
+$slider-text-font-size                    : 12px !default
+
+$stepper-title-font-size                  : 14px !default
+$stepper-title-line-height                : 1.285714 !default
+$stepper-title-letter-spacing             : .1px !default
+$stepper-caption-font-size                : 12px !default
+$stepper-caption-line-height              : 1.16667 !default
+$stepper-dot-font-size                    : 14px !default
+$stepper-tab-font-size                    : 14px !default
+$stepper-dot-error-with-icon-font-size    : 24px !default
+
+$tabs-icon-font-size                      : 24px !default
+$tabs-icon-font-width                     : $tabs-icon-font-size !default
+$tabs-icon-font-height                    : $tabs-icon-font-size !default
+$tabs-alert-icon-font-size                : 18px !default
+$tabs-arrow-font-size                     : 32px !default
+
+$table-transition                         : $generic-hover-transition !default
+$table-border-radius                      : $generic-border-radius !default
+$table-box-shadow                         : $shadow-2 !default
+$table-th-font-size                       : 12px !default
+$table-tbody-td-font-size                 : 13px !default
+$table-title-font-size                    : 20px !default
+$table-bottom-font-size                   : 12px !default
+$table-nodata-icon-font-size              : 200% !default
+$table-sort-icon-font-size                : 120% !default
+$table-grid-item-title-font-size          : 12px !default
+$table-grid-item-value-font-size          : 13px !default
+$table-dense-sort-icon-font-size          : 110% !default
+
+$table-border-color                       : $separator-color !default
+$table-hover-background                   : rgba(0, 0, 0, .03) !default
+$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
+
+$time-header-label-font-size              : 28px !default
+$time-clock-position-font-size            : 12px !default
+
+$timeline-subtitle-font-size              : 12px !default
+$timeline-subtitle-letter-spacing         : 1px !default
+$timeline-dot-icon-font-size              : 16px !default
+$timeline-comfortable-heading-font-size   : 200% !default
+
+$toolbar-min-height                       : 50px !default
+$toolbar-padding                          : 0 12px !default
+$toolbar-inset-size                       : 58px !default
+$toolbar-title-font-size                  : 21px !default
+$toolbar-title-font-weight                : normal !default
+$toolbar-title-letter-spacing             : .01em !default
+$toolbar-title-padding                    : 0 12px !default
+
+$tree-icon-font-size                      : 21px !default
+
+$layout-border                            : 1px solid $separator-color !default
+$layout-shadow                            : 0 0 10px 2px rgba($shadow-color,0.2), 0 0px 10px rgba($shadow-color,0.24) !default
+$layout-shadow-dark                       : 0 0 10px 2px rgba($dark-shadow-color,.2), 0 0px 10px rgba($dark-shadow-color,.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
+
+$tooltip-color                            : #fafafa !default
+$tooltip-background                       : $grey-7 !default
+$tooltip-padding                          : 6px 10px !default
+$tooltip-border-radius                    : $generic-border-radius !default
+$tooltip-fontsize                         : 10px !default
+$tooltip-mobile-padding                   : 8px 16px !default
+$tooltip-mobile-fontsize                  : 14px !default
+
+$uploader-title-font-size                 : 14px !default
+$uploader-title-line-height               : 1.285714 !default
+$uploader-subtitle-font-size              : 12px !default
+$uploader-subtitle-line-height            : 1.5 !default
+
+$option-focus-transition                  : .22s cubic-bezier(0,0,.2,1) !default
+
+$input-font-size                          : 14px !default
+$input-text-color                         : rgba(0,0,0,.87) !default
+$input-label-color                        : rgba(0,0,0,.6) !default
+$input-autofill-color                     : inherit !default
+
+$img-loading-font-size                    : 50px !default
+$img-content-position                     : absolute !default
+$img-content-padding                      : 16px !default
+$img-content-color                        : #fff !default
+$img-content-background                   : rgba(0, 0, 0, .47) !default