quasar

/*! * Quasar Framework v1.15.16 * (c) 2015-present Razvan Stoenescu * Released under the MIT License. */ $space-base ?= 16px $space-x-base ?= $space-base $space-y-base ?= $space-base $space-none ?= { x: 0, y: 0 } $space-xs ?= { x: ($space-x-base * .25), y: ($space-y-base * .25) } $space-sm ?= { x: ($space-x-base * .5), y: ($space-y-base * .5) } $space-md ?= { x: $space-x-base, y: $space-y-base } $space-lg ?= { x: ($space-x-base * 1.5), y: ($space-y-base * 1.5) } $space-xl ?= { x: ($space-x-base * 3), y: ($space-y-base * 3) } $spaces ?= { none: $space-none, xs: $space-xs, sm: $space-sm, md: $space-md, lg: $space-lg, xl: $space-xl } $animate-duration ?= .3s $animate-delay ?= .3s $animate-repeat ?= 1 $breakpoint-xs ?= 599px $breakpoint-sm ?= 1023px $breakpoint-md ?= 1439px $breakpoint-lg ?= 1919px $flex-cols ?= 12 $flex-gutter-xs ?= ($space-base * .25) $flex-gutter-sm ?= ($space-base * .5) $flex-gutter-md ?= $space-base $flex-gutter-lg ?= ($space-base * 1.5) $flex-gutter-xl ?= ($space-base * 3) $body-font-size ?= 14px $body-line-height ?= 1.5 $flex-gutter ?= { none: 0, xs: $flex-gutter-xs, sm: $flex-gutter-sm, md: $flex-gutter-md, lg: $flex-gutter-lg, xl: $flex-gutter-xl } $sizes ?= { xs: 0, sm: $breakpoint-xs + 1, md: $breakpoint-sm + 1, lg: $breakpoint-md + 1, xl: $breakpoint-lg + 1 } $breakpoint-xs-min ?= 0 $breakpoint-xs-max ?= $breakpoint-xs $breakpoint-sm-min ?= $sizes.sm $breakpoint-sm-max ?= $breakpoint-sm $breakpoint-md-min ?= $sizes.md $breakpoint-md-max ?= $breakpoint-md $breakpoint-lg-min ?= $sizes.lg $breakpoint-lg-max ?= $breakpoint-lg $breakpoint-xl-min ?= $sizes.xl $breakpoint-xl-max ?= 9999px $headings ?= { h1: { size: 6rem, line-height: 6rem, weight: 300, letter-spacing: -.01562em }, h2: { size: 3.75rem, line-height: 3.75rem, letter-spacing: -.00833em, weight: 300 }, h3: { size: 3rem, line-height: 3.125rem, letter-spacing: normal, weight: 400 }, h4: { size: 2.125rem, line-height: 2.5rem, letter-spacing: .00735em, weight: 400 }, h5: { size: 1.5rem, line-height: 2rem, letter-spacing: normal, weight: 400 }, h6: { size: 1.25rem, line-height: 2rem, letter-spacing: .0125em, weight: 500 }, subtitle1: { size: 1rem, line-height: 1.75rem, letter-spacing: .00937em, weight: 400 }, subtitle2: { size: .875rem, line-height: 1.375rem, letter-spacing: .00714em, weight: 500 }, body1: { size: 1rem, line-height: 1.5rem, letter-spacing: .03125em, weight: 400 }, body2: { size: .875rem, line-height: 1.25rem, letter-spacing: .01786em, weight: 400 }, overline: { size: .75rem, line-height: 2rem, letter-spacing: .16667em, weight: 500 }, caption: { size: .75rem, line-height: 1.25rem, letter-spacing: .03333em, weight: 400 } } $h-tags ?= { h1: $headings.h1, h2: $headings.h2, h3: $headings.h3, h4: $headings.h4, h5: $headings.h5, h6: $headings.h6 } $text-weights ?= { thin: 100, light: 300, regular: 400, medium: 500, bold: 700, bolder: 900 } $primary ?= #1976D2 $secondary ?= #26A69A $accent ?= #9C27B0 $dark-page ?= #121212 $dark ?= #1d1d1d $positive ?= #21BA45 $negative ?= #C10015 $info ?= #31CCEC $warning ?= #F2C037 $dimmed-background ?= rgba(0, 0, 0, .4) $light-dimmed-background ?= rgba(255, 255, 255, .6) $separator-color ?= rgba(0, 0, 0, .12) $separator-dark-color ?= rgba(255, 255, 255, .28) $red ?= #f44336 $red-1 ?= #ffebee $red-2 ?= #ffcdd2 $red-3 ?= #ef9a9a $red-4 ?= #e57373 $red-5 ?= #ef5350 $red-6 ?= #f44336 $red-7 ?= #e53935 $red-8 ?= #d32f2f $red-9 ?= #c62828 $red-10 ?= #b71c1c $red-11 ?= #ff8a80 $red-12 ?= #ff5252 $red-13 ?= #ff1744 $red-14 ?= #d50000 $pink ?= #e91e63 $pink-1 ?= #fce4ec $pink-2 ?= #f8bbd0 $pink-3 ?= #f48fb1 $pink-4 ?= #f06292 $pink-5 ?= #ec407a $pink-6 ?= #e91e63 $pink-7 ?= #d81b60 $pink-8 ?= #c2185b $pink-9 ?= #ad1457 $pink-10 ?= #880e4f $pink-11 ?= #ff80ab $pink-12 ?= #ff4081 $pink-13 ?= #f50057 $pink-14 ?= #c51162 $purple ?= #9c27b0 $purple-1 ?= #f3e5f5 $purple-2 ?= #e1bee7 $purple-3 ?= #ce93d8 $purple-4 ?= #ba68c8 $purple-5 ?= #ab47bc $purple-6 ?= #9c27b0 $purple-7 ?= #8e24aa $purple-8 ?= #7b1fa2 $purple-9 ?= #6a1b9a $purple-10 ?= #4a148c $purple-11 ?= #ea80fc $purple-12 ?= #e040fb $purple-13 ?= #d500f9 $purple-14 ?= #aa00ff $deep-purple ?= #673ab7 $deep-purple-1 ?= #ede7f6 $deep-purple-2 ?= #d1c4e9 $deep-purple-3 ?= #b39ddb $deep-purple-4 ?= #9575cd $deep-purple-5 ?= #7e57c2 $deep-purple-6 ?= #673ab7 $deep-purple-7 ?= #5e35b1 $deep-purple-8 ?= #512da8 $deep-purple-9 ?= #4527a0 $deep-purple-10 ?= #311b92 $deep-purple-11 ?= #b388ff $deep-purple-12 ?= #7c4dff $deep-purple-13 ?= #651fff $deep-purple-14 ?= #6200ea $indigo ?= #3f51b5 $indigo-1 ?= #e8eaf6 $indigo-2 ?= #c5cae9 $indigo-3 ?= #9fa8da $indigo-4 ?= #7986cb $indigo-5 ?= #5c6bc0 $indigo-6 ?= #3f51b5 $indigo-7 ?= #3949ab $indigo-8 ?= #303f9f $indigo-9 ?= #283593 $indigo-10 ?= #1a237e $indigo-11 ?= #8c9eff $indigo-12 ?= #536dfe $indigo-13 ?= #3d5afe $indigo-14 ?= #304ffe $blue ?= #2196f3 $blue-1 ?= #e3f2fd $blue-2 ?= #bbdefb $blue-3 ?= #90caf9 $blue-4 ?= #64b5f6 $blue-5 ?= #42a5f5 $blue-6 ?= #2196f3 $blue-7 ?= #1e88e5 $blue-8 ?= #1976d2 $blue-9 ?= #1565c0 $blue-10 ?= #0d47a1 $blue-11 ?= #82b1ff $blue-12 ?= #448aff $blue-13 ?= #2979ff $blue-14 ?= #2962ff $light-blue ?= #03a9f4 $light-blue-1 ?= #e1f5fe $light-blue-2 ?= #b3e5fc $light-blue-3 ?= #81d4fa $light-blue-4 ?= #4fc3f7 $light-blue-5 ?= #29b6f6 $light-blue-6 ?= #03a9f4 $light-blue-7 ?= #039be5 $light-blue-8 ?= #0288d1 $light-blue-9 ?= #0277bd $light-blue-10 ?= #01579b $light-blue-11 ?= #80d8ff $light-blue-12 ?= #40c4ff $light-blue-13 ?= #00b0ff $light-blue-14 ?= #0091ea $cyan ?= #00bcd4 $cyan-1 ?= #e0f7fa $cyan-2 ?= #b2ebf2 $cyan-3 ?= #80deea $cyan-4 ?= #4dd0e1 $cyan-5 ?= #26c6da $cyan-6 ?= #00bcd4 $cyan-7 ?= #00acc1 $cyan-8 ?= #0097a7 $cyan-9 ?= #00838f $cyan-10 ?= #006064 $cyan-11 ?= #84ffff $cyan-12 ?= #18ffff $cyan-13 ?= #00e5ff $cyan-14 ?= #00b8d4 $teal ?= #009688 $teal-1 ?= #e0f2f1 $teal-2 ?= #b2dfdb $teal-3 ?= #80cbc4 $teal-4 ?= #4db6ac $teal-5 ?= #26a69a $teal-6 ?= #009688 $teal-7 ?= #00897b $teal-8 ?= #00796b $teal-9 ?= #00695c $teal-10 ?= #004d40 $teal-11 ?= #a7ffeb $teal-12 ?= #64ffda $teal-13 ?= #1de9b6 $teal-14 ?= #00bfa5 $green ?= #4caf50 $green-1 ?= #e8f5e9 $green-2 ?= #c8e6c9 $green-3 ?= #a5d6a7 $green-4 ?= #81c784 $green-5 ?= #66bb6a $green-6 ?= #4caf50 $green-7 ?= #43a047 $green-8 ?= #388e3c $green-9 ?= #2e7d32 $green-10 ?= #1b5e20 $green-11 ?= #b9f6ca $green-12 ?= #69f0ae $green-13 ?= #00e676 $green-14 ?= #00c853 $light-green ?= #8bc34a $light-green-1 ?= #f1f8e9 $light-green-2 ?= #dcedc8 $light-green-3 ?= #c5e1a5 $light-green-4 ?= #aed581 $light-green-5 ?= #9ccc65 $light-green-6 ?= #8bc34a $light-green-7 ?= #7cb342 $light-green-8 ?= #689f38 $light-green-9 ?= #558b2f $light-green-10 ?= #33691e $light-green-11 ?= #ccff90 $light-green-12 ?= #b2ff59 $light-green-13 ?= #76ff03 $light-green-14 ?= #64dd17 $lime ?= #cddc39 $lime-1 ?= #f9fbe7 $lime-2 ?= #f0f4c3 $lime-3 ?= #e6ee9c $lime-4 ?= #dce775 $lime-5 ?= #d4e157 $lime-6 ?= #cddc39 $lime-7 ?= #c0ca33 $lime-8 ?= #afb42b $lime-9 ?= #9e9d24 $lime-10 ?= #827717 $lime-11 ?= #f4ff81 $lime-12 ?= #eeff41 $lime-13 ?= #c6ff00 $lime-14 ?= #aeea00 $yellow ?= #ffeb3b $yellow-1 ?= #fffde7 $yellow-2 ?= #fff9c4 $yellow-3 ?= #fff59d $yellow-4 ?= #fff176 $yellow-5 ?= #ffee58 $yellow-6 ?= #ffeb3b $yellow-7 ?= #fdd835 $yellow-8 ?= #fbc02d $yellow-9 ?= #f9a825 $yellow-10 ?= #f57f17 $yellow-11 ?= #ffff8d $yellow-12 ?= #ffff00 $yellow-13 ?= #ffea00 $yellow-14 ?= #ffd600 $amber ?= #ffc107 $amber-1 ?= #fff8e1 $amber-2 ?= #ffecb3 $amber-3 ?= #ffe082 $amber-4 ?= #ffd54f $amber-5 ?= #ffca28 $amber-6 ?= #ffc107 $amber-7 ?= #ffb300 $amber-8 ?= #ffa000 $amber-9 ?= #ff8f00 $amber-10 ?= #ff6f00 $amber-11 ?= #ffe57f $amber-12 ?= #ffd740 $amber-13 ?= #ffc400 $amber-14 ?= #ffab00 $orange ?= #ff9800 $orange-1 ?= #fff3e0 $orange-2 ?= #ffe0b2 $orange-3 ?= #ffcc80 $orange-4 ?= #ffb74d $orange-5 ?= #ffa726 $orange-6 ?= #ff9800 $orange-7 ?= #fb8c00 $orange-8 ?= #f57c00 $orange-9 ?= #ef6c00 $orange-10 ?= #e65100 $orange-11 ?= #ffd180 $orange-12 ?= #ffab40 $orange-13 ?= #ff9100 $orange-14 ?= #ff6d00 $deep-orange ?= #ff5722 $deep-orange-1 ?= #fbe9e7 $deep-orange-2 ?= #ffccbc $deep-orange-3 ?= #ffab91 $deep-orange-4 ?= #ff8a65 $deep-orange-5 ?= #ff7043 $deep-orange-6 ?= #ff5722 $deep-orange-7 ?= #f4511e $deep-orange-8 ?= #e64a19 $deep-orange-9 ?= #d84315 $deep-orange-10 ?= #bf360c $deep-orange-11 ?= #ff9e80 $deep-orange-12 ?= #ff6e40 $deep-orange-13 ?= #ff3d00 $deep-orange-14 ?= #dd2c00 $brown ?= #795548 $brown-1 ?= #efebe9 $brown-2 ?= #d7ccc8 $brown-3 ?= #bcaaa4 $brown-4 ?= #a1887f $brown-5 ?= #8d6e63 $brown-6 ?= #795548 $brown-7 ?= #6d4c41 $brown-8 ?= #5d4037 $brown-9 ?= #4e342e $brown-10 ?= #3e2723 $brown-11 ?= #d7ccc8 $brown-12 ?= #bcaaa4 $brown-13 ?= #8d6e63 $brown-14 ?= #5d4037 $grey ?= #9e9e9e $grey-1 ?= #fafafa $grey-2 ?= #f5f5f5 $grey-3 ?= #eeeeee $grey-4 ?= #e0e0e0 $grey-5 ?= #bdbdbd $grey-6 ?= #9e9e9e $grey-7 ?= #757575 $grey-8 ?= #616161 $grey-9 ?= #424242 $grey-10 ?= #212121 $grey-11 ?= #f5f5f5 $grey-12 ?= #eeeeee $grey-13 ?= #bdbdbd $grey-14 ?= #616161 $blue-grey ?= #607d8b $blue-grey-1 ?= #eceff1 $blue-grey-2 ?= #cfd8dc $blue-grey-3 ?= #b0bec5 $blue-grey-4 ?= #90a4ae $blue-grey-5 ?= #78909c $blue-grey-6 ?= #607d8b $blue-grey-7 ?= #546e7a $blue-grey-8 ?= #455a64 $blue-grey-9 ?= #37474f $blue-grey-10 ?= #263238 $blue-grey-11 ?= #cfd8dc $blue-grey-12 ?= #b0bec5 $blue-grey-13 ?= #78909c $blue-grey-14 ?= #455a64 $ios-statusbar-height ?= 20px $z-fab ?= 990 $z-side ?= 1000 $z-marginals ?= 2000 $z-fixed-drawer ?= 3000 $z-fullscreen ?= 6000 $z-menu ?= 6000 $z-top ?= 7000 $z-tooltip ?= 9000 $z-notify ?= 9500 $z-max ?= 9998 $shadow-color ?= black $shadow-transition ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1) $inset-shadow ?= 0 7px 9px -7px rgba($shadow-color, .7) inset $inset-shadow-down ?= 0 -7px 9px -7px rgba($shadow-color, .7) inset $elevation-umbra ?= rgba($shadow-color, .2) $elevation-penumbra ?= rgba($shadow-color, .14) $elevation-ambient ?= rgba($shadow-color, .12) $shadow-0 ?= 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient $shadow-1 ?= 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient $shadow-2 ?= 0 1px 5px $elevation-umbra, 0 2px 2px $elevation-penumbra, 0 3px 1px -2px $elevation-ambient $shadow-3 ?= 0 1px 8px $elevation-umbra, 0 3px 4px $elevation-penumbra, 0 3px 3px -2px $elevation-ambient $shadow-4 ?= 0 2px 4px -1px $elevation-umbra, 0 4px 5px $elevation-penumbra, 0 1px 10px $elevation-ambient $shadow-5 ?= 0 3px 5px -1px $elevation-umbra, 0 5px 8px $elevation-penumbra, 0 1px 14px $elevation-ambient $shadow-6 ?= 0 3px 5px -1px $elevation-umbra, 0 6px 10px $elevation-penumbra, 0 1px 18px $elevation-ambient $shadow-7 ?= 0 4px 5px -2px $elevation-umbra, 0 7px 10px 1px $elevation-penumbra, 0 2px 16px 1px $elevation-ambient $shadow-8 ?= 0 5px 5px -3px $elevation-umbra, 0 8px 10px 1px $elevation-penumbra, 0 3px 14px 2px $elevation-ambient $shadow-9 ?= 0 5px 6px -3px $elevation-umbra, 0 9px 12px 1px $elevation-penumbra, 0 3px 16px 2px $elevation-ambient $shadow-10 ?= 0 6px 6px -3px $elevation-umbra, 0 10px 14px 1px $elevation-penumbra, 0 4px 18px 3px $elevation-ambient $shadow-11 ?= 0 6px 7px -4px $elevation-umbra, 0 11px 15px 1px $elevation-penumbra, 0 4px 20px 3px $elevation-ambient $shadow-12 ?= 0 7px 8px -4px $elevation-umbra, 0 12px 17px 2px $elevation-penumbra, 0 5px 22px 4px $elevation-ambient $shadow-13 ?= 0 7px 8px -4px $elevation-umbra, 0 13px 19px 2px $elevation-penumbra, 0 5px 24px 4px $elevation-ambient $shadow-14 ?= 0 7px 9px -4px $elevation-umbra, 0 14px 21px 2px $elevation-penumbra, 0 5px 26px 4px $elevation-ambient $shadow-15 ?= 0 8px 9px -5px $elevation-umbra, 0 15px 22px 2px $elevation-penumbra, 0 6px 28px 5px $elevation-ambient $shadow-16 ?= 0 8px 10px -5px $elevation-umbra, 0 16px 24px 2px $elevation-penumbra, 0 6px 30px 5px $elevation-ambient $shadow-17 ?= 0 8px 11px -5px $elevation-umbra, 0 17px 26px 2px $elevation-penumbra, 0 6px 32px 5px $elevation-ambient $shadow-18 ?= 0 9px 11px -5px $elevation-umbra, 0 18px 28px 2px $elevation-penumbra, 0 7px 34px 6px $elevation-ambient $shadow-19 ?= 0 9px 12px -6px $elevation-umbra, 0 19px 29px 2px $elevation-penumbra, 0 7px 36px 6px $elevation-ambient $shadow-20 ?= 0 10px 13px -6px $elevation-umbra, 0 20px 31px 3px $elevation-penumbra, 0 8px 38px 7px $elevation-ambient $shadow-21 ?= 0 10px 13px -6px $elevation-umbra, 0 21px 33px 3px $elevation-penumbra, 0 8px 40px 7px $elevation-ambient $shadow-22 ?= 0 10px 14px -6px $elevation-umbra, 0 22px 35px 3px $elevation-penumbra, 0 8px 42px 7px $elevation-ambient $shadow-23 ?= 0 11px 14px -7px $elevation-umbra, 0 23px 36px 3px $elevation-penumbra, 0 9px 44px 8px $elevation-ambient $shadow-24 ?= 0 11px 15px -7px $elevation-umbra, 0 24px 38px 3px $elevation-penumbra, 0 9px 46px 8px $elevation-ambient $shadow-up-0 ?= 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient $shadow-up-1 ?= 0 -1px 3px $elevation-umbra, 0 -1px 1px $elevation-penumbra, 0 -2px 1px -1px $elevation-ambient $shadow-up-2 ?= 0 -1px 5px $elevation-umbra, 0 -2px 2px $elevation-penumbra, 0 -3px 1px -2px $elevation-ambient $shadow-up-3 ?= 0 -1px 8px $elevation-umbra, 0 -3px 4px $elevation-penumbra, 0 -3px 3px -2px $elevation-ambient $shadow-up-4 ?= 0 -2px 4px -1px $elevation-umbra, 0 -4px 5px $elevation-penumbra, 0 -1px 10px $elevation-ambient $shadow-up-5 ?= 0 -3px 5px -1px $elevation-umbra, 0 -5px 8px $elevation-penumbra, 0 -1px 14px $elevation-ambient $shadow-up-6 ?= 0 -3px 5px -1px $elevation-umbra, 0 -6px 10px $elevation-penumbra, 0 -1px 18px $elevation-ambient $shadow-up-7 ?= 0 -4px 5px -2px $elevation-umbra, 0 -7px 10px 1px $elevation-penumbra, 0 -2px 16px 1px $elevation-ambient $shadow-up-8 ?= 0 -5px 5px -3px $elevation-umbra, 0 -8px 10px 1px $elevation-penumbra, 0 -3px 14px 2px $elevation-ambient $shadow-up-9 ?= 0 -5px 6px -3px $elevation-umbra, 0 -9px 12px 1px $elevation-penumbra, 0 -3px 16px 2px $elevation-ambient $shadow-up-10 ?= 0 -6px 6px -3px $elevation-umbra, 0 -10px 14px 1px $elevation-penumbra, 0 -4px 18px 3px $elevation-ambient $shadow-up-11 ?= 0 -6px 7px -4px $elevation-umbra, 0 -11px 15px 1px $elevation-penumbra, 0 -4px 20px 3px $elevation-ambient $shadow-up-12 ?= 0 -7px 8px -4px $elevation-umbra, 0 -12px 17px 2px $elevation-penumbra, 0 -5px 22px 4px $elevation-ambient $shadow-up-13 ?= 0 -7px 8px -4px $elevation-umbra, 0 -13px 19px 2px $elevation-penumbra, 0 -5px 24px 4px $elevation-ambient $shadow-up-14 ?= 0 -7px 9px -4px $elevation-umbra, 0 -14px 21px 2px $elevation-penumbra, 0 -5px 26px 4px $elevation-ambient $shadow-up-15 ?= 0 -8px 9px -5px $elevation-umbra, 0 -15px 22px 2px $elevation-penumbra, 0 -6px 28px 5px $elevation-ambient $shadow-up-16 ?= 0 -8px 10px -5px $elevation-umbra, 0 -16px 24px 2px $elevation-penumbra, 0 -6px 30px 5px $elevation-ambient $shadow-up-17 ?= 0 -8px 11px -5px $elevation-umbra, 0 -17px 26px 2px $elevation-penumbra, 0 -6px 32px 5px $elevation-ambient $shadow-up-18 ?= 0 -9px 11px -5px $elevation-umbra, 0 -18px 28px 2px $elevation-penumbra, 0 -7px 34px 6px $elevation-ambient $shadow-up-19 ?= 0 -9px 12px -6px $elevation-umbra, 0 -19px 29px 2px $elevation-penumbra, 0 -7px 36px 6px $elevation-ambient $shadow-up-20 ?= 0 -10px 13px -6px $elevation-umbra, 0 -20px 31px 3px $elevation-penumbra, 0 -8px 38px 7px $elevation-ambient $shadow-up-21 ?= 0 -10px 13px -6px $elevation-umbra, 0 -21px 33px 3px $elevation-penumbra, 0 -8px 40px 7px $elevation-ambient $shadow-up-22 ?= 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-penumbra, 0 -8px 42px 7px $elevation-ambient $shadow-up-23 ?= 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient $shadow-up-24 ?= 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient $generic-border-radius ?= 4px $generic-hover-transition ?= .3s cubic-bezier(.25, .8, .5, 1) $typography-font-family ?= 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif $min-line-height ?= 1.12 $button-border-radius ?= 3px $button-padding ?= 4px 16px $button-dense-padding ?= .285em $button-transition ?= $generic-hover-transition $button-font-size ?= 14px $button-line-height ?= 1.715em $button-font-weight ?= 500 $button-shadow ?= $shadow-2 $button-shadow-active ?= $shadow-5 $button-rounded-border-radius ?= 28px $button-push-border-radius ?= 7px $chat-message-received-color ?= black $chat-message-received-bg ?= $green-4 $chat-message-sent-color ?= black $chat-message-sent-bg ?= $grey-4 $chat-message-avatar-size ?= 48px $chat-message-border-radius ?= $generic-border-radius $chat-message-distance ?= 8px $chat-message-text-padding ?= 8px $item-base-color ?= $grey-5 $editor-border-color ?= $separator-color $editor-border-dark-color ?= $separator-dark-color $editor-content-padding ?= 10px $editor-content-min-height ?= 10em $editor-toolbar-padding ?= 4px $editor-hr-color ?= $editor-border-color $editor-hr-dark-color ?= $editor-border-dark-color $editor-button-gutter ?= 4px $table-transition ?= $generic-hover-transition $table-border-radius ?= $generic-border-radius $table-box-shadow ?= $shadow-2 $table-border-color ?= $separator-color $table-hover-background ?= rgba(0, 0, 0, .03) $table-selected-background ?= rgba(0, 0, 0, .06) $table-dark-border-color ?= $separator-dark-color $table-dark-hover-background ?= rgba(255, 255, 255, .07) $table-dark-selected-background ?= rgba(255, 255, 255, .1) $toolbar-min-height ?= 50px $toolbar-padding ?= 0 12px $toolbar-inset-size ?= 58px $toolbar-title-font-size ?= 21px $toolbar-title-font-weight ?= normal $toolbar-title-letter-spacing ?= .01em $toolbar-title-padding ?= 0 12px $layout-border ?= 1px solid $separator-color $layout-shadow ?= 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24) $menu-background ?= white $menu-box-shadow ?= $shadow-2 $menu-max-width ?= 95vw $rating-grade-color ?= $yellow $rating-shadow ?= 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) $tooltip-color ?= #fafafa $tooltip-background ?= $grey-7 $tooltip-padding ?= 6px 10px $tooltip-border-radius ?= $generic-border-radius $tooltip-fontsize ?= 10px $tooltip-mobile-padding ?= 8px 16px $tooltip-mobile-fontsize ?= 14px $option-focus-transition ?= .22s cubic-bezier(0,0,.2,1) $input-font-size ?= 14px $input-text-color ?= rgba(0,0,0,.87) $input-label-color ?= rgba(0,0,0,.6) $input-autofill-color ?= inherit $img-width ?= 100% $img-background-repeat ?= no-repeat $img-loading-font-size ?= 50px $img-content-position ?= absolute $img-content-padding ?= 16px $img-content-color ?= white $img-content-background ?= rgba(0, 0, 0, .47) *, *:before, *:after box-sizing: inherit -webkit-tap-highlight-color: transparent -moz-tap-highlight-color: transparent html, body, #q-app width: 100% direction: ltr body.platform-ios.within-iframe, body.platform-ios.within-iframe #q-app width: 100px min-width: 100% html, body margin: 0 box-sizing: border-box article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary display: block /* * line 1: Remove the bottom border in Firefox 39-. * lines 2,3: Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] border-bottom: none text-decoration: underline text-decoration: underline dotted img border-style: none svg:not(:root) overflow: hidden /* * line 1: Correct the inheritance and scaling of font size in all browsers. * line 2: Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp font-family: monospace, monospace font-size: 1em /* * lines 1,2: Add the correct box sizing in Firefox. * line 3: Show the overflow in Edge and IE. */ hr box-sizing: content-box height: 0 overflow: visible button, input, optgroup, select, textarea font: inherit font-family: inherit margin: 0 optgroup font-weight: bold /* * Show the overflow in IE. * input: Show the overflow in Edge. * select: Show the overflow in Edge, Firefox, and IE. * Remove the inheritance of text transform in Edge, Firefox, and IE. * select: Remove the inheritance of text transform in Firefox. */ button, input, select overflow: visible text-transform: none button::-moz-focus-inner, input::-moz-focus-inner border: 0 padding: 0 button:-moz-focusring, input:-moz-focusring outline: 1px dotted ButtonText fieldset padding: 0.35em 0.75em 0.625em /** * lines 1,3,4,6: Correct the text wrapping in Edge and IE. * line 2: Correct the color inheritance from `fieldset` elements in IE. * line 5: Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend box-sizing: border-box color: inherit display: table max-width: 100% padding: 0 white-space: normal progress vertical-align: baseline textarea overflow: auto input[type='search'] -webkit-appearance: textfield input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration -webkit-appearance: none .q-icon line-height: 1 width: 1em height: 1em letter-spacing: normal text-transform: none white-space: nowrap word-wrap: normal direction: ltr text-align: center position: relative box-sizing: content-box fill: currentColor &:before, &:after width: 100% height: 100% display: flex !important align-items: center justify-content: center > svg width: 100% height: 100% .q-icon, .material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp user-select: none cursor: inherit font-size: inherit display: inline-flex align-items: center justify-content: center vertical-align: middle .q-panel height 100% width 100% > div height 100% width 100% .q-panel-parent overflow hidden position relative .q-loading-bar position: fixed z-index: $z-max transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s background: $red &--top left: 0 /* rtl:ignore */ right: 0 /* rtl:ignore */ top: 0 width: 100% &--bottom left: 0 /* rtl:ignore */ right: 0 /* rtl:ignore */ bottom: 0 width: 100% &--right top: 0 bottom: 0 right: 0 height: 100% &--left top: 0 bottom: 0 left: 0 height: 100% .q-avatar position: relative vertical-align: middle display: inline-block border-radius: 50% font-size: 48px height: 1em width: 1em &__content font-size: .5em line-height: .5em &__content, img:not(.q-icon) border-radius: inherit height: inherit width: inherit &--square border-radius: 0 .q-badge background-color: $primary background-color: var(--q-color-primary) color: #fff padding: 2px 6px border-radius: $generic-border-radius font-size: 12px min-height: 12px line-height: 12px font-weight: normal vertical-align: baseline &--single-line white-space: nowrap &--multi-line word-break: break-all word-wrap: break-word &--floating position: absolute top: -4px right: -3px cursor: inherit &--transparent opacity: .8 &--outline background-color: transparent border: 1px solid currentColor &--rounded border-radius: 1em .q-banner min-height: 54px padding: 8px 16px background: #fff &--top-padding padding-top: 14px &__avatar min-width: 1px !important > .q-avatar font-size: 46px > .q-icon font-size: 40px &__avatar:not(:empty) + &__content padding-left: 16px &__actions &.col-auto padding-left: 16px &.col-all .q-btn-item margin: 4px 0 0 4px &--dense min-height: 32px padding: 8px &.q-banner--top-padding padding-top: 12px .q-banner__avatar > .q-avatar, > .q-icon font-size: 28px .q-banner__avatar:not(:empty) + .q-banner__content padding-left: 8px .q-banner__actions &.col-auto padding-left: 8px .q-bar background: rgba(0,0,0,.2) > .q-icon margin-left: 2px > div, > div + .q-icon margin-left: 8px > .q-btn margin-left: 2px > .q-icon:first-child, > .q-btn:first-child, > div:first-child margin-left: 0 &--standard padding: 0 12px height: 32px font-size: 18px > div font-size: 16px .q-btn font-size: 11px &--dense padding: 0 8px height: 24px font-size: 14px .q-btn font-size: 8px &--dark background: rgba(255,255,255,.15) .q-breadcrumbs &__el color: inherit &__el-icon 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 display: inline-flex flex-direction: column align-items: stretch position: relative outline: 0 border: 0 vertical-align: middle padding: 0 font-size: $button-font-size line-height: $button-line-height text-decoration: none color: inherit background: transparent font-weight: $button-font-weight text-transform: uppercase text-align: center width: auto height: auto .q-icon, .q-spinner font-size: $button-line-height &.disabled opacity: .7 !important &__wrapper padding: $button-padding min-height: 2.572em border-radius: inherit width: 100% height: 100% &:before content: '' display: block position: absolute left: 0 right: 0 top: 0 bottom: 0 border-radius: inherit box-shadow: $button-shadow &--actionable cursor: pointer &.q-btn--standard .q-btn__wrapper:before transition: box-shadow $button-transition &:active, &.q-btn--active .q-btn__wrapper:before box-shadow: $button-shadow-active &--no-uppercase text-transform: none &--rectangle border-radius: $button-border-radius &--outline background: transparent !important .q-btn__wrapper:before border: 1px solid currentColor &--push border-radius: $button-push-border-radius .q-btn__wrapper:before border-bottom: 3px solid rgba(0,0,0,.15) &.q-btn--actionable transition: transform $button-transition .q-btn__wrapper:before transition: top $button-transition, bottom $button-transition, border-bottom-width $button-transition &:active, &.q-btn--active transform: translateY(2px) .q-btn__wrapper:before border-bottom-width: 0 &--rounded border-radius: $button-rounded-border-radius &--round border-radius: 50% .q-btn__wrapper padding: 0 min-width: 3em min-height: 3em &--flat, &--outline, &--unelevated .q-btn__wrapper:before box-shadow: none &--dense .q-btn__wrapper padding: $button-dense-padding min-height: 2em &.q-btn--round .q-btn__wrapper padding: 0 min-height: 2.4em min-width: 2.4em .on-left margin-right: 6px .on-right margin-left: 6px &--fab, &--fab-mini .q-icon font-size: 24px &--fab .q-icon margin: auto .q-btn__wrapper padding: 16px min-height: 56px min-width: 56px &--fab-mini .q-btn__wrapper padding: 8px min-height: 40px min-width: 40px &__content transition: opacity .3s z-index: 0 &--hidden opacity: 0 pointer-events: none &__progress border-radius: inherit z-index: 0 &-indicator z-index: -1 transform: translateX(-100%) background: rgba(255,255,255,.25) &--dark .q-btn__progress-indicator background: rgba(0,0,0,.2) &--flat, &--outline .q-btn__progress-indicator opacity: 0.2 background: currentColor .q-btn-dropdown &--split .q-btn-dropdown__arrow-container &:not(.q-btn--outline) border-left: 1px solid rgba(255,255,255,.3) .q-btn__wrapper padding: 0 4px &--simple * + .q-btn-dropdown__arrow margin-left: 8px &__arrow transition: transform .28s &--current flex-grow: 1 .q-btn-group border-radius: $button-border-radius box-shadow: $button-shadow vertical-align: middle > .q-btn-item border-radius: inherit align-self: stretch .q-btn__wrapper:before box-shadow: none .q-badge--floating right: 0 > .q-btn-group box-shadow: none &:first-child > .q-btn:first-child border-top-left-radius: inherit border-bottom-left-radius: inherit &:last-child > .q-btn:last-child border-top-right-radius: inherit border-bottom-right-radius: inherit > .q-btn-group:not(:first-child) > .q-btn:first-child .q-btn__wrapper:before border-left: 0 > .q-btn-group:not(:last-child) > .q-btn:last-child .q-btn__wrapper:before border-right: 0 > .q-btn-item:not(:last-child) border-top-right-radius: 0 border-bottom-right-radius: 0 > .q-btn-item:not(:first-child) border-top-left-radius: 0 border-bottom-left-radius: 0 > .q-btn-item.q-btn--standard .q-btn__wrapper:before z-index: -1 &--push border-radius: $button-push-border-radius > .q-btn--push &.q-btn--actionable transform: none .q-btn__wrapper transition: margin-top $button-transition, margin-bottom $button-transition, box-shadow $button-transition &:active, &.q-btn--active .q-btn__wrapper margin-top: 2px margin-bottom: -2px &--rounded border-radius: $button-rounded-border-radius &--flat, &--outline, &--unelevated box-shadow: none &--outline > .q-separator display: none > .q-btn-item + .q-btn-item .q-btn__wrapper:before border-left: 0 > .q-btn-item:not(:last-child) .q-btn__wrapper:before border-right: 0 &--stretch align-self: stretch border-radius: 0 &--glossy > .q-btn-item background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .04)) !important &--spread > .q-btn-group display: flex !important > .q-btn-item, > .q-btn-group > .q-btn-item:not(.q-btn-dropdown__arrow-container) width: auto min-width: 0 max-width: 100% flex: 10000 1 0% .q-btn-toggle position: relative .q-card box-shadow: $shadow-2 border-radius: $generic-border-radius vertical-align: top background: #fff position: relative > div, > img &:first-child border-top: 0 border-top-left-radius: inherit border-top-right-radius: inherit > div, > img &:last-child border-bottom: 0 border-bottom-left-radius: inherit border-bottom-right-radius: inherit > div, > img &:not(:first-child) border-top-left-radius: 0 border-top-right-radius: 0 > div, > img &:not(:last-child) border-bottom-left-radius: 0 border-bottom-right-radius: 0 > div border-left: 0 border-right: 0 box-shadow: none &--bordered border: 1px solid $separator-color &--dark border-color: $separator-dark-color &__section position: relative &--vert padding: 16px &--horiz > div, > img &:first-child border-top-left-radius: inherit border-bottom-left-radius: inherit &:last-child border-top-right-radius: inherit border-bottom-right-radius: inherit &:not(:first-child) border-top-left-radius: 0 border-bottom-left-radius: 0 &:not(:last-child) border-top-right-radius: 0 border-bottom-right-radius: 0 > div border-top: 0 border-bottom: 0 box-shadow: none &__actions padding: 8px align-items: center .q-btn__wrapper padding: 0 8px &--horiz > .q-btn-item + .q-btn-item, > .q-btn-group + .q-btn-item, > .q-btn-item + .q-btn-group margin-left: 8px &--vert > .q-btn-item.q-btn--round align-self: center > .q-btn-item + .q-btn-item, > .q-btn-group + .q-btn-item, > .q-btn-item + .q-btn-group margin-top: 4px > .q-btn-group > .q-btn-item flex-grow: 1 > img display: block width: 100% max-width: 100% border: 0 .q-carousel background-color: #fff height: 400px &__slide min-height: 100% background-size: cover background-position: 50% &__slide, .q-carousel--padding padding: 16px &__slides-container height: 100% &__control color: #fff &__arrow pointer-events: none .q-icon font-size: 28px .q-btn pointer-events: all &__prev-arrow--horizontal, &__next-arrow--horizontal top: 16px bottom: 16px &__prev-arrow--horizontal left: 16px &__next-arrow--horizontal right: 16px &__prev-arrow--vertical, &__next-arrow--vertical left: 16px right: 16px &__prev-arrow--vertical top: 16px &__next-arrow--vertical bottom: 16px &__navigation &--top, &--bottom left: 16px right: 16px overflow-x: auto overflow-y: hidden &--top top: 16px &--bottom bottom: 16px &--left, &--right top: 16px bottom: 16px overflow-x: hidden overflow-y: auto > .q-carousel__navigation-inner flex-direction: column &--left left: 16px &--right right: 16px &-inner flex: 1 1 auto .q-btn margin: 6px 4px .q-btn__wrapper padding: 5px &__navigation-icon--inactive opacity: .7 .q-carousel__thumbnail margin: 2px height: 50px width: auto display: inline-block cursor: pointer border: 1px solid transparent border-radius: $generic-border-radius vertical-align: middle opacity: .7 transition: opacity .3s .q-carousel__thumbnail:hover, .q-carousel__thumbnail--active opacity: 1 .q-carousel__thumbnail--active border-color: currentColor cursor: default &--navigation-top, &--arrows-vertical &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding padding-top: 60px &--navigation-bottom, &--arrows-vertical &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding padding-bottom: 60px &--navigation-left, &--arrows-horizontal &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding padding-left: 60px &--navigation-right, &--arrows-horizontal &.q-carousel--with-padding .q-carousel__slide, .q-carousel--padding padding-right: 60px &.fullscreen height: 100% .q-message-name, .q-message-stamp, .q-message-label font-size: small .q-message-label margin: (3 * $chat-message-distance) 0 text-align: center .q-message-stamp color: inherit margin-top: 4px opacity: .6 display: none .q-message-avatar border-radius: 50% width: $chat-message-avatar-size height: $chat-message-avatar-size min-width: $chat-message-avatar-size .q-message margin-bottom: $chat-message-distance &:first-child .q-message-label margin-top: 0 .q-message-avatar--received margin-right: 8px .q-message-text--received color: $chat-message-received-bg border-radius: $chat-message-border-radius $chat-message-border-radius $chat-message-border-radius 0 &:last-child:before right: 100% border-right: 0 solid transparent border-left: 8px solid transparent border-bottom: 8px solid currentColor .q-message-text-content--received color: $chat-message-received-color .q-message-name--sent text-align: right .q-message-avatar--sent margin-left: 8px .q-message-container--sent flex-direction: row-reverse .q-message-text--sent color: $chat-message-sent-bg border-radius: $chat-message-border-radius $chat-message-border-radius 0 $chat-message-border-radius &:last-child:before left: 100% border-left: 0 solid transparent border-right: 8px solid transparent border-bottom: 8px solid currentColor .q-message-text-content--sent color: $chat-message-sent-color .q-message-text background: currentColor padding: $chat-message-text-padding line-height: max(1.2, $min-line-height) word-break: break-word position: relative & + & margin-top: 3px &:last-child min-height: $chat-message-avatar-size .q-message-stamp display: block &:before content: '' position: absolute bottom: 0 width: 0 height: 0 $checkbox-transition = .22s cubic-bezier(0,0,.2,1) 0ms .q-checkbox vertical-align: middle &__bg top: 25% left: 25% width: 50% height: 50% border: 2px solid currentColor border-radius: 2px transition: background $checkbox-transition &__native width: 1px height: 1px &__svg color: #fff &__truthy stroke: currentColor stroke-width: 3.12px stroke-dashoffset: 29.78334 stroke-dasharray: 29.78334 &__indet fill: currentColor transform-origin: 50% 50% transform: rotate(-280deg) scale(0) &__inner font-size: 40px width: 1em min-width: 1em height: 1em outline: 0 border-radius: 50% color: rgba(0,0,0,.54) &--truthy, &--indet color: $primary color: var(--q-color-primary) .q-checkbox__bg background: currentColor &--truthy path stroke-dashoffset: 0 transition: stroke-dashoffset .18s cubic-bezier(.4,0,.6,1) 0ms &--indet .q-checkbox__indet transform: rotate(0) scale(1) transition: transform $checkbox-transition &.disabled opacity: .75 !important &--dark .q-checkbox__inner color: rgba(255,255,255,.7) &:before opacity: .32 !important &--truthy, &--indet color: $primary color: var(--q-color-primary) &--dense .q-checkbox__inner width: .5em min-width: .5em height: .5em .q-checkbox__bg left: 5% top: 5% width: 90% height: 90% .q-checkbox__label padding-left: .5em &.reverse .q-checkbox__label padding-left: 0 padding-right: .5em body.desktop .q-checkbox:not(.disabled) .q-checkbox__inner:before content: '' position: absolute top: 0 right: 0 bottom: 0 left: 0 border-radius: 50% background: currentColor opacity: .12 transform: scale3d(0, 0, 1) transition: transform $option-focus-transition &:focus, &:hover .q-checkbox__inner:before transform: scale3d(1, 1, 1) .q-checkbox--dense:not(.disabled) &:focus, &:hover .q-checkbox__inner:before transform: scale3d(1.4, 1.4, 1) $chip-height = 2em .q-chip vertical-align: middle border-radius: 16px outline: 0 position: relative height: $chip-height max-width: 100% margin: 4px background: #e0e0e0 color: rgba(0,0,0,.87) font-size: 14px padding: .5em .9em &--colored, &--dark .q-chip__icon color: inherit &--outline background: transparent !important border: 1px solid currentColor .q-avatar font-size: $chip-height margin-left: -.45em margin-right: .2em border-radius: 16px &--selected .q-avatar display: none &__icon color: rgba(0,0,0,.54) font-size: 1.5em margin: -.2em &--left margin-right: .2em &--right margin-left: .2em &--remove margin-left: .1em margin-right: -.5em opacity: .6 outline: 0 &:hover, &:focus opacity: 1 &__content white-space: nowrap &--dense border-radius: 12px padding: 0 .4em height: 1.5em .q-avatar font-size: 1.5em margin-left: -.27em margin-right: .1em border-radius: 12px .q-chip__icon font-size: 1.25em &--left margin-right: .195em &--remove margin-right: -.25em &--square 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 .q-circular-progress display: inline-block position: relative vertical-align: middle width: 1em height: 1em line-height: 1 &.q-focusable border-radius: 50% &__svg width: 100% height: 100% &__text font-size: .25em &--indeterminate .q-circular-progress__svg transform-origin: 50% 50% animation: q-spin 2s linear infinite /* rtl:ignore */ .q-circular-progress__circle stroke-dasharray: 1 400 stroke-dashoffset: 0 animation: q-circular-progress-circle 1.5s ease-in-out infinite /* rtl:ignore */ @keyframes q-circular-progress-circle 0% stroke-dasharray: 1, 400 stroke-dashoffset: 0 50% stroke-dasharray: 400, 400 stroke-dashoffset: -100 100% stroke-dasharray: 400, 400 stroke-dashoffset: -300 .q-color-picker overflow: hidden background: #fff max-width: 350px vertical-align: top min-width: 180px border-radius: $generic-border-radius box-shadow: $shadow-2 .q-tab padding: 0 !important &--bordered border: 1px solid $separator-color &__header height: 68px input line-height: 24px border: 0 .q-tab min-height: 32px !important height: 32px !important &--inactive background: linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1)) &__error-icon bottom: 2px right: 2px font-size: 24px opacity: 0 transition: opacity .3s ease-in &__header-content position: relative background: #fff &--light color: #000 &--dark color: #fff .q-tab--inactive &:before content: '' position: absolute top: 0 right: 0 bottom: 0 left: 0 background: rgba(255,255,255,.2) &__header-banner height: 36px &__header-bg background: #fff background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important &__footer height: 36px .q-tab min-height: 36px !important height: 36px !important &--inactive background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1)) &__spectrum width: 100% height: 100% &__spectrum-tab padding: 0 !important &__spectrum-white background: linear-gradient(to right, #fff, rgba(255,255,255,0)) &__spectrum-black background: linear-gradient(to top, #000, rgba(0,0,0,0)) &__spectrum-circle width: 10px height: 10px 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 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 content: '' position: absolute top: 0 right: 0 bottom: 0 left: 0 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 .q-slider__thumb 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 margin-left: 18px margin-right: 18px input font-size: 11px border: 1px solid $grey-4 border-radius: $generic-border-radius width: 3.5em &__palette-tab padding: 0 !important &__palette-rows &--editable .q-color-picker__cube cursor: pointer &__cube padding-bottom: 10% width: 10% !important input color: inherit background: transparent outline: 0 text-align: center .q-tabs overflow: hidden .q-tab--active box-shadow: 0 0 14px 3px rgba(0,0,0,.2) .q-focus-helper display: none .q-tab__indicator display: none .q-tab-panels background: inherit &--dark .q-color-picker__tune-tab input border: 1px solid alpha(#fff, .3) .q-slider color: $grey-5 .q-date display: inline-flex box-shadow: $shadow-2 border-radius: $generic-border-radius background: #fff width: 290px min-width: 290px max-width: 100% &--bordered border: 1px solid $separator-color &__header border-top-left-radius: inherit color: #fff background-color: $primary background-color: var(--q-color-primary) padding: 16px &__actions padding: 0 16px 16px &__content, &__main outline: 0 &__content .q-btn font-weight: normal &__header-link opacity: .64 outline: 0 transition: opacity .3s ease-out &--active, &:hover, &:focus opacity: 1 &__header-subtitle font-size: 14px line-height: 1.75 letter-spacing: .00938em &__header-title-label font-size: 24px line-height: 1.2 letter-spacing: .00735em &__view height: 100% width: 100% min-height: 290px padding: 16px &__navigation height: 12.5% > div:first-child width: 8% min-width: 24px justify-content: flex-end > div:last-child width: 8% min-width: 24px justify-content: flex-start &__calendar-weekdays height: 12.5% > div opacity: .38 font-size: 12px &__calendar-item display: inline-flex align-items: center justify-content: center vertical-align: middle width: 14.285% !important height: 12.5% !important position: relative padding: 1px &:after content: '' position: absolute pointer-events: none top: 1px right: 0 bottom: 1px left: 0 border-style: dashed border-color: transparent border-width: 1px > div, button width: 30px height: 30px border-radius: 50% > div line-height: 30px text-align: center &--out opacity: .18 &--fill visibility: hidden &__range, &__range-from, &__range-to &:before content: '' background-color: currentColor position: absolute top: 1px bottom: 1px left: 0 right: 0 opacity: .3 &:nth-child(7n-6) &:before border-top-left-radius: 0 border-bottom-left-radius: 0 &:nth-child(7n)