7694 lines
208 KiB
Sass
7694 lines
208 KiB
Sass
/*!
|
|
* Quasar Framework v2.18.6
|
|
* (c) 2015-present Razvan Stoenescu
|
|
* Released under the MIT License.
|
|
*/
|
|
@use 'sass:list'
|
|
@use 'sass:string'
|
|
@use 'sass:math'
|
|
@use 'sass:map'
|
|
@function str-replace($string, $search, $replace: '')
|
|
$index: string.index($string, $search)
|
|
@if $index
|
|
$start: string.slice($string, 1, $index - 1)
|
|
$end: str-replace(string.slice($string, $index + string.length($search)), $search, $replace)
|
|
@return $start + $replace + $end
|
|
@return $string
|
|
@function str-fr($selector, $name, $i: '')
|
|
@return str-replace(str-replace($selector, '<name>', $name), '<i>', $i)
|
|
@function str-fe($selector, $name, $noProc, $i: '')
|
|
@if $noProc
|
|
@return str-fr($selector, $name, $i)
|
|
@return list.join(str-fr($selector, '', $i), str-fr($selector, $name, $i), $separator: comma)
|
|
$PI: 3.14159265359
|
|
@function pow($number, $exp)
|
|
$value: 1
|
|
@if $exp > 0
|
|
@for $i from 1 through $exp
|
|
$value: $value * $number
|
|
@else if $exp < 0
|
|
@for $i from 1 through -$exp
|
|
$value: $value / $number
|
|
@return $value
|
|
@function fact($number)
|
|
$value: 1
|
|
@if $number > 0
|
|
@for $i from 1 through $number
|
|
$value: $value * $i
|
|
@return $value
|
|
@function toFixed($number, $power)
|
|
@return math.div(math.round($number * $power), $power)
|
|
@function sin($angle)
|
|
$sin: 0
|
|
|
|
$rad: math.div($angle, 180) * $PI
|
|
|
|
@for $i from 0 through 25
|
|
$sin: $sin + math.div(pow(-1, $i) * pow($rad, (2 * $i + 1)), fact(2 * $i + 1))
|
|
@return $sin
|
|
@function cos($angle)
|
|
$cos: 0
|
|
|
|
$rad: math.div($angle, 180) * $PI
|
|
|
|
@for $i from 0 through 25
|
|
$cos: $cos + math.div(pow(-1, $i) * pow($rad, 2 * $i), fact(2 * $i))
|
|
@return $cos
|
|
$space-base : 16px !default
|
|
$space-x-base : $space-base !default
|
|
$space-y-base : $space-base !default
|
|
$space-none : (x: 0, y: 0) !default
|
|
$space-xs : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
|
|
$space-sm : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
|
|
$space-md : (x: $space-x-base, y: $space-y-base) !default
|
|
$space-lg : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
|
|
$space-xl : (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
|
|
$spaces: ('none': $space-none, 'xs': $space-xs, 'sm': $space-sm, 'md': $space-md, 'lg': $space-lg, 'xl': $space-xl) !default
|
|
$animate-duration : .3s !default
|
|
$animate-delay : .3s !default
|
|
$animate-repeat : 1 !default
|
|
$breakpoint-xs: 599px !default
|
|
$breakpoint-sm: 1023px !default
|
|
$breakpoint-md: 1439px !default
|
|
$breakpoint-lg: 1919px !default
|
|
$flex-cols : 12 !default
|
|
$flex-gutter-xs : ($space-base * .25) !default
|
|
$flex-gutter-sm : ($space-base * .5) !default
|
|
$flex-gutter-md : $space-base !default
|
|
$flex-gutter-lg : ($space-base * 1.5) !default
|
|
$flex-gutter-xl : ($space-base * 3) !default
|
|
$body-font-size : 14px !default
|
|
$body-line-height : 1.5 !default
|
|
$flex-gutter: ('none': 0, 'xs': $flex-gutter-xs, 'sm': $flex-gutter-sm, 'md': $flex-gutter-md, 'lg': $flex-gutter-lg, 'xl': $flex-gutter-xl) !default
|
|
$sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg': ($breakpoint-md + 1), 'xl': ($breakpoint-lg + 1)) !default
|
|
$breakpoint-xs-max: (map.get($sizes, "sm") - 0.02) !default
|
|
$breakpoint-sm-min: map.get($sizes, "sm") !default
|
|
$breakpoint-sm-max: (map.get($sizes, "md") - 0.02) !default
|
|
$breakpoint-md-min: map.get($sizes, "md") !default
|
|
$breakpoint-md-max: (map.get($sizes, "lg") - 0.02) !default
|
|
$breakpoint-lg-min: map.get($sizes, "lg") !default
|
|
$breakpoint-lg-max: (map.get($sizes, "xl") - 0.02) !default
|
|
$breakpoint-xl-min: map.get($sizes, "xl") !default
|
|
$h1: (size: 6rem, line-height: 6rem, letter-spacing: -.01562em, weight: 300) !default
|
|
$h2: (size: 3.75rem, line-height: 3.75rem, letter-spacing: -.00833em, weight: 300) !default
|
|
$h3: (size: 3rem, line-height: 3.125rem, letter-spacing: normal, weight: 400) !default
|
|
$h4: (size: 2.125rem, line-height: 2.5rem, letter-spacing: .00735em, weight: 400) !default
|
|
$h5: (size: 1.5rem, line-height: 2rem, letter-spacing: normal, weight: 400) !default
|
|
$h6: (size: 1.25rem, line-height: 2rem, letter-spacing: .0125em, weight: 500) !default
|
|
$subtitle1: (size: 1rem, line-height: 1.75rem, letter-spacing: .00937em, weight: 400) !default
|
|
$subtitle2: (size: .875rem, line-height: 1.375rem, letter-spacing: .00714em, weight: 500) !default
|
|
$body1: (size: 1rem, line-height: 1.5rem, letter-spacing: .03125em, weight: 400) !default
|
|
$body2: (size: .875rem, line-height: 1.25rem, letter-spacing: .01786em, weight: 400) !default
|
|
$overline: (size: .75rem, line-height: 2rem, letter-spacing: .16667em, weight: 500) !default
|
|
$caption: (size: .75rem, line-height: 1.25rem, letter-spacing: .03333em, weight: 400) !default
|
|
$headings: ('h1': $h1, 'h2': $h2, 'h3': $h3, 'h4': $h4, 'h5': $h5, 'h6': $h6, 'subtitle1': $subtitle1, 'subtitle2': $subtitle2, 'body1': $body1, 'body2': $body2, 'overline': $overline, 'caption': $caption) !default
|
|
$h-tags: (h1: map.get($headings, "h1"), h2: map.get($headings, "h2"), h3: map.get($headings, "h3"), h4: map.get($headings, "h4"), h5: map.get($headings, "h5"), h6: map.get($headings, "h6")) !default
|
|
$text-weights: (thin: 100, light: 300, regular: 400, medium: 500, bold: 700, bolder: 900) !default
|
|
$primary : #1976D2 !default
|
|
$secondary : #26A69A !default
|
|
$accent : #9C27B0 !default
|
|
$dark-page : #121212 !default
|
|
$dark : #1d1d1d !default
|
|
$positive : #21BA45 !default
|
|
$negative : #C10015 !default
|
|
$info : #31CCEC !default
|
|
$warning : #F2C037 !default
|
|
$dimmed-background : rgba(0, 0, 0, .4) !default
|
|
$light-dimmed-background : rgba(255, 255, 255, .6) !default
|
|
$separator-color : rgba(0, 0, 0, .12) !default
|
|
$separator-dark-color : rgba(255, 255, 255, .28) !default
|
|
$red : #f44336 !default
|
|
$red-1 : #ffebee !default
|
|
$red-2 : #ffcdd2 !default
|
|
$red-3 : #ef9a9a !default
|
|
$red-4 : #e57373 !default
|
|
$red-5 : #ef5350 !default
|
|
$red-6 : #f44336 !default
|
|
$red-7 : #e53935 !default
|
|
$red-8 : #d32f2f !default
|
|
$red-9 : #c62828 !default
|
|
$red-10 : #b71c1c !default
|
|
$red-11 : #ff8a80 !default
|
|
$red-12 : #ff5252 !default
|
|
$red-13 : #ff1744 !default
|
|
$red-14 : #d50000 !default
|
|
$pink : #e91e63 !default
|
|
$pink-1 : #fce4ec !default
|
|
$pink-2 : #f8bbd0 !default
|
|
$pink-3 : #f48fb1 !default
|
|
$pink-4 : #f06292 !default
|
|
$pink-5 : #ec407a !default
|
|
$pink-6 : #e91e63 !default
|
|
$pink-7 : #d81b60 !default
|
|
$pink-8 : #c2185b !default
|
|
$pink-9 : #ad1457 !default
|
|
$pink-10 : #880e4f !default
|
|
$pink-11 : #ff80ab !default
|
|
$pink-12 : #ff4081 !default
|
|
$pink-13 : #f50057 !default
|
|
$pink-14 : #c51162 !default
|
|
$purple : #9c27b0 !default
|
|
$purple-1 : #f3e5f5 !default
|
|
$purple-2 : #e1bee7 !default
|
|
$purple-3 : #ce93d8 !default
|
|
$purple-4 : #ba68c8 !default
|
|
$purple-5 : #ab47bc !default
|
|
$purple-6 : #9c27b0 !default
|
|
$purple-7 : #8e24aa !default
|
|
$purple-8 : #7b1fa2 !default
|
|
$purple-9 : #6a1b9a !default
|
|
$purple-10 : #4a148c !default
|
|
$purple-11 : #ea80fc !default
|
|
$purple-12 : #e040fb !default
|
|
$purple-13 : #d500f9 !default
|
|
$purple-14 : #aa00ff !default
|
|
$deep-purple : #673ab7 !default
|
|
$deep-purple-1 : #ede7f6 !default
|
|
$deep-purple-2 : #d1c4e9 !default
|
|
$deep-purple-3 : #b39ddb !default
|
|
$deep-purple-4 : #9575cd !default
|
|
$deep-purple-5 : #7e57c2 !default
|
|
$deep-purple-6 : #673ab7 !default
|
|
$deep-purple-7 : #5e35b1 !default
|
|
$deep-purple-8 : #512da8 !default
|
|
$deep-purple-9 : #4527a0 !default
|
|
$deep-purple-10 : #311b92 !default
|
|
$deep-purple-11 : #b388ff !default
|
|
$deep-purple-12 : #7c4dff !default
|
|
$deep-purple-13 : #651fff !default
|
|
$deep-purple-14 : #6200ea !default
|
|
$indigo : #3f51b5 !default
|
|
$indigo-1 : #e8eaf6 !default
|
|
$indigo-2 : #c5cae9 !default
|
|
$indigo-3 : #9fa8da !default
|
|
$indigo-4 : #7986cb !default
|
|
$indigo-5 : #5c6bc0 !default
|
|
$indigo-6 : #3f51b5 !default
|
|
$indigo-7 : #3949ab !default
|
|
$indigo-8 : #303f9f !default
|
|
$indigo-9 : #283593 !default
|
|
$indigo-10 : #1a237e !default
|
|
$indigo-11 : #8c9eff !default
|
|
$indigo-12 : #536dfe !default
|
|
$indigo-13 : #3d5afe !default
|
|
$indigo-14 : #304ffe !default
|
|
$blue : #2196f3 !default
|
|
$blue-1 : #e3f2fd !default
|
|
$blue-2 : #bbdefb !default
|
|
$blue-3 : #90caf9 !default
|
|
$blue-4 : #64b5f6 !default
|
|
$blue-5 : #42a5f5 !default
|
|
$blue-6 : #2196f3 !default
|
|
$blue-7 : #1e88e5 !default
|
|
$blue-8 : #1976d2 !default
|
|
$blue-9 : #1565c0 !default
|
|
$blue-10 : #0d47a1 !default
|
|
$blue-11 : #82b1ff !default
|
|
$blue-12 : #448aff !default
|
|
$blue-13 : #2979ff !default
|
|
$blue-14 : #2962ff !default
|
|
$light-blue : #03a9f4 !default
|
|
$light-blue-1 : #e1f5fe !default
|
|
$light-blue-2 : #b3e5fc !default
|
|
$light-blue-3 : #81d4fa !default
|
|
$light-blue-4 : #4fc3f7 !default
|
|
$light-blue-5 : #29b6f6 !default
|
|
$light-blue-6 : #03a9f4 !default
|
|
$light-blue-7 : #039be5 !default
|
|
$light-blue-8 : #0288d1 !default
|
|
$light-blue-9 : #0277bd !default
|
|
$light-blue-10 : #01579b !default
|
|
$light-blue-11 : #80d8ff !default
|
|
$light-blue-12 : #40c4ff !default
|
|
$light-blue-13 : #00b0ff !default
|
|
$light-blue-14 : #0091ea !default
|
|
$cyan : #00bcd4 !default
|
|
$cyan-1 : #e0f7fa !default
|
|
$cyan-2 : #b2ebf2 !default
|
|
$cyan-3 : #80deea !default
|
|
$cyan-4 : #4dd0e1 !default
|
|
$cyan-5 : #26c6da !default
|
|
$cyan-6 : #00bcd4 !default
|
|
$cyan-7 : #00acc1 !default
|
|
$cyan-8 : #0097a7 !default
|
|
$cyan-9 : #00838f !default
|
|
$cyan-10 : #006064 !default
|
|
$cyan-11 : #84ffff !default
|
|
$cyan-12 : #18ffff !default
|
|
$cyan-13 : #00e5ff !default
|
|
$cyan-14 : #00b8d4 !default
|
|
$teal : #009688 !default
|
|
$teal-1 : #e0f2f1 !default
|
|
$teal-2 : #b2dfdb !default
|
|
$teal-3 : #80cbc4 !default
|
|
$teal-4 : #4db6ac !default
|
|
$teal-5 : #26a69a !default
|
|
$teal-6 : #009688 !default
|
|
$teal-7 : #00897b !default
|
|
$teal-8 : #00796b !default
|
|
$teal-9 : #00695c !default
|
|
$teal-10 : #004d40 !default
|
|
$teal-11 : #a7ffeb !default
|
|
$teal-12 : #64ffda !default
|
|
$teal-13 : #1de9b6 !default
|
|
$teal-14 : #00bfa5 !default
|
|
$green : #4caf50 !default
|
|
$green-1 : #e8f5e9 !default
|
|
$green-2 : #c8e6c9 !default
|
|
$green-3 : #a5d6a7 !default
|
|
$green-4 : #81c784 !default
|
|
$green-5 : #66bb6a !default
|
|
$green-6 : #4caf50 !default
|
|
$green-7 : #43a047 !default
|
|
$green-8 : #388e3c !default
|
|
$green-9 : #2e7d32 !default
|
|
$green-10 : #1b5e20 !default
|
|
$green-11 : #b9f6ca !default
|
|
$green-12 : #69f0ae !default
|
|
$green-13 : #00e676 !default
|
|
$green-14 : #00c853 !default
|
|
$light-green : #8bc34a !default
|
|
$light-green-1 : #f1f8e9 !default
|
|
$light-green-2 : #dcedc8 !default
|
|
$light-green-3 : #c5e1a5 !default
|
|
$light-green-4 : #aed581 !default
|
|
$light-green-5 : #9ccc65 !default
|
|
$light-green-6 : #8bc34a !default
|
|
$light-green-7 : #7cb342 !default
|
|
$light-green-8 : #689f38 !default
|
|
$light-green-9 : #558b2f !default
|
|
$light-green-10 : #33691e !default
|
|
$light-green-11 : #ccff90 !default
|
|
$light-green-12 : #b2ff59 !default
|
|
$light-green-13 : #76ff03 !default
|
|
$light-green-14 : #64dd17 !default
|
|
$lime : #cddc39 !default
|
|
$lime-1 : #f9fbe7 !default
|
|
$lime-2 : #f0f4c3 !default
|
|
$lime-3 : #e6ee9c !default
|
|
$lime-4 : #dce775 !default
|
|
$lime-5 : #d4e157 !default
|
|
$lime-6 : #cddc39 !default
|
|
$lime-7 : #c0ca33 !default
|
|
$lime-8 : #afb42b !default
|
|
$lime-9 : #9e9d24 !default
|
|
$lime-10 : #827717 !default
|
|
$lime-11 : #f4ff81 !default
|
|
$lime-12 : #eeff41 !default
|
|
$lime-13 : #c6ff00 !default
|
|
$lime-14 : #aeea00 !default
|
|
$yellow : #ffeb3b !default
|
|
$yellow-1 : #fffde7 !default
|
|
$yellow-2 : #fff9c4 !default
|
|
$yellow-3 : #fff59d !default
|
|
$yellow-4 : #fff176 !default
|
|
$yellow-5 : #ffee58 !default
|
|
$yellow-6 : #ffeb3b !default
|
|
$yellow-7 : #fdd835 !default
|
|
$yellow-8 : #fbc02d !default
|
|
$yellow-9 : #f9a825 !default
|
|
$yellow-10 : #f57f17 !default
|
|
$yellow-11 : #ffff8d !default
|
|
$yellow-12 : #ffff00 !default
|
|
$yellow-13 : #ffea00 !default
|
|
$yellow-14 : #ffd600 !default
|
|
$amber : #ffc107 !default
|
|
$amber-1 : #fff8e1 !default
|
|
$amber-2 : #ffecb3 !default
|
|
$amber-3 : #ffe082 !default
|
|
$amber-4 : #ffd54f !default
|
|
$amber-5 : #ffca28 !default
|
|
$amber-6 : #ffc107 !default
|
|
$amber-7 : #ffb300 !default
|
|
$amber-8 : #ffa000 !default
|
|
$amber-9 : #ff8f00 !default
|
|
$amber-10 : #ff6f00 !default
|
|
$amber-11 : #ffe57f !default
|
|
$amber-12 : #ffd740 !default
|
|
$amber-13 : #ffc400 !default
|
|
$amber-14 : #ffab00 !default
|
|
$orange : #ff9800 !default
|
|
$orange-1 : #fff3e0 !default
|
|
$orange-2 : #ffe0b2 !default
|
|
$orange-3 : #ffcc80 !default
|
|
$orange-4 : #ffb74d !default
|
|
$orange-5 : #ffa726 !default
|
|
$orange-6 : #ff9800 !default
|
|
$orange-7 : #fb8c00 !default
|
|
$orange-8 : #f57c00 !default
|
|
$orange-9 : #ef6c00 !default
|
|
$orange-10 : #e65100 !default
|
|
$orange-11 : #ffd180 !default
|
|
$orange-12 : #ffab40 !default
|
|
$orange-13 : #ff9100 !default
|
|
$orange-14 : #ff6d00 !default
|
|
$deep-orange : #ff5722 !default
|
|
$deep-orange-1 : #fbe9e7 !default
|
|
$deep-orange-2 : #ffccbc !default
|
|
$deep-orange-3 : #ffab91 !default
|
|
$deep-orange-4 : #ff8a65 !default
|
|
$deep-orange-5 : #ff7043 !default
|
|
$deep-orange-6 : #ff5722 !default
|
|
$deep-orange-7 : #f4511e !default
|
|
$deep-orange-8 : #e64a19 !default
|
|
$deep-orange-9 : #d84315 !default
|
|
$deep-orange-10 : #bf360c !default
|
|
$deep-orange-11 : #ff9e80 !default
|
|
$deep-orange-12 : #ff6e40 !default
|
|
$deep-orange-13 : #ff3d00 !default
|
|
$deep-orange-14 : #dd2c00 !default
|
|
$brown : #795548 !default
|
|
$brown-1 : #efebe9 !default
|
|
$brown-2 : #d7ccc8 !default
|
|
$brown-3 : #bcaaa4 !default
|
|
$brown-4 : #a1887f !default
|
|
$brown-5 : #8d6e63 !default
|
|
$brown-6 : #795548 !default
|
|
$brown-7 : #6d4c41 !default
|
|
$brown-8 : #5d4037 !default
|
|
$brown-9 : #4e342e !default
|
|
$brown-10 : #3e2723 !default
|
|
$brown-11 : #d7ccc8 !default
|
|
$brown-12 : #bcaaa4 !default
|
|
$brown-13 : #8d6e63 !default
|
|
$brown-14 : #5d4037 !default
|
|
$grey : #9e9e9e !default
|
|
$grey-1 : #fafafa !default
|
|
$grey-2 : #f5f5f5 !default
|
|
$grey-3 : #eeeeee !default
|
|
$grey-4 : #e0e0e0 !default
|
|
$grey-5 : #bdbdbd !default
|
|
$grey-6 : #9e9e9e !default
|
|
$grey-7 : #757575 !default
|
|
$grey-8 : #616161 !default
|
|
$grey-9 : #424242 !default
|
|
$grey-10 : #212121 !default
|
|
$grey-11 : #f5f5f5 !default
|
|
$grey-12 : #eeeeee !default
|
|
$grey-13 : #bdbdbd !default
|
|
$grey-14 : #616161 !default
|
|
$blue-grey : #607d8b !default
|
|
$blue-grey-1 : #eceff1 !default
|
|
$blue-grey-2 : #cfd8dc !default
|
|
$blue-grey-3 : #b0bec5 !default
|
|
$blue-grey-4 : #90a4ae !default
|
|
$blue-grey-5 : #78909c !default
|
|
$blue-grey-6 : #607d8b !default
|
|
$blue-grey-7 : #546e7a !default
|
|
$blue-grey-8 : #455a64 !default
|
|
$blue-grey-9 : #37474f !default
|
|
$blue-grey-10 : #263238 !default
|
|
$blue-grey-11 : #cfd8dc !default
|
|
$blue-grey-12 : #b0bec5 !default
|
|
$blue-grey-13 : #78909c !default
|
|
$blue-grey-14 : #455a64 !default
|
|
$ios-statusbar-height : 20px !default
|
|
$z-fab : 990 !default
|
|
$z-side : 1000 !default
|
|
$z-marginals : 2000 !default
|
|
$z-fixed-drawer : 3000 !default
|
|
$z-fullscreen : 6000 !default
|
|
$z-menu : 6000 !default
|
|
$z-top : 7000 !default
|
|
$z-tooltip : 9000 !default
|
|
$z-notify : 9500 !default
|
|
$z-max : 9998 !default
|
|
$shadow-color : #000 !default
|
|
$shadow-transition : box-shadow .28s cubic-bezier(.4, 0, .2, 1) !default
|
|
$inset-shadow : 0 7px 9px -7px rgba($shadow-color, .7) inset !default
|
|
$inset-shadow-down : 0 -7px 9px -7px rgba($shadow-color, .7) inset !default
|
|
$elevation-umbra : rgba($shadow-color, .2) !default
|
|
$elevation-penumbra : rgba($shadow-color, .14) !default
|
|
$elevation-ambient : rgba($shadow-color, .12) !default
|
|
$shadow-0 : 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient !default
|
|
$shadow-1 : 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient !default
|
|
$shadow-2 : 0 1px 5px $elevation-umbra, 0 2px 2px $elevation-penumbra, 0 3px 1px -2px $elevation-ambient !default
|
|
$shadow-3 : 0 1px 8px $elevation-umbra, 0 3px 4px $elevation-penumbra, 0 3px 3px -2px $elevation-ambient !default
|
|
$shadow-4 : 0 2px 4px -1px $elevation-umbra, 0 4px 5px $elevation-penumbra, 0 1px 10px $elevation-ambient !default
|
|
$shadow-5 : 0 3px 5px -1px $elevation-umbra, 0 5px 8px $elevation-penumbra, 0 1px 14px $elevation-ambient !default
|
|
$shadow-6 : 0 3px 5px -1px $elevation-umbra, 0 6px 10px $elevation-penumbra, 0 1px 18px $elevation-ambient !default
|
|
$shadow-7 : 0 4px 5px -2px $elevation-umbra, 0 7px 10px 1px $elevation-penumbra, 0 2px 16px 1px $elevation-ambient !default
|
|
$shadow-8 : 0 5px 5px -3px $elevation-umbra, 0 8px 10px 1px $elevation-penumbra, 0 3px 14px 2px $elevation-ambient !default
|
|
$shadow-9 : 0 5px 6px -3px $elevation-umbra, 0 9px 12px 1px $elevation-penumbra, 0 3px 16px 2px $elevation-ambient !default
|
|
$shadow-10 : 0 6px 6px -3px $elevation-umbra, 0 10px 14px 1px $elevation-penumbra, 0 4px 18px 3px $elevation-ambient !default
|
|
$shadow-11 : 0 6px 7px -4px $elevation-umbra, 0 11px 15px 1px $elevation-penumbra, 0 4px 20px 3px $elevation-ambient !default
|
|
$shadow-12 : 0 7px 8px -4px $elevation-umbra, 0 12px 17px 2px $elevation-penumbra, 0 5px 22px 4px $elevation-ambient !default
|
|
$shadow-13 : 0 7px 8px -4px $elevation-umbra, 0 13px 19px 2px $elevation-penumbra, 0 5px 24px 4px $elevation-ambient !default
|
|
$shadow-14 : 0 7px 9px -4px $elevation-umbra, 0 14px 21px 2px $elevation-penumbra, 0 5px 26px 4px $elevation-ambient !default
|
|
$shadow-15 : 0 8px 9px -5px $elevation-umbra, 0 15px 22px 2px $elevation-penumbra, 0 6px 28px 5px $elevation-ambient !default
|
|
$shadow-16 : 0 8px 10px -5px $elevation-umbra, 0 16px 24px 2px $elevation-penumbra, 0 6px 30px 5px $elevation-ambient !default
|
|
$shadow-17 : 0 8px 11px -5px $elevation-umbra, 0 17px 26px 2px $elevation-penumbra, 0 6px 32px 5px $elevation-ambient !default
|
|
$shadow-18 : 0 9px 11px -5px $elevation-umbra, 0 18px 28px 2px $elevation-penumbra, 0 7px 34px 6px $elevation-ambient !default
|
|
$shadow-19 : 0 9px 12px -6px $elevation-umbra, 0 19px 29px 2px $elevation-penumbra, 0 7px 36px 6px $elevation-ambient !default
|
|
$shadow-20 : 0 10px 13px -6px $elevation-umbra, 0 20px 31px 3px $elevation-penumbra, 0 8px 38px 7px $elevation-ambient !default
|
|
$shadow-21 : 0 10px 13px -6px $elevation-umbra, 0 21px 33px 3px $elevation-penumbra, 0 8px 40px 7px $elevation-ambient !default
|
|
$shadow-22 : 0 10px 14px -6px $elevation-umbra, 0 22px 35px 3px $elevation-penumbra, 0 8px 42px 7px $elevation-ambient !default
|
|
$shadow-23 : 0 11px 14px -7px $elevation-umbra, 0 23px 36px 3px $elevation-penumbra, 0 9px 44px 8px $elevation-ambient !default
|
|
$shadow-24 : 0 11px 15px -7px $elevation-umbra, 0 24px 38px 3px $elevation-penumbra, 0 9px 46px 8px $elevation-ambient !default
|
|
$shadows: ($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10, $shadow-11, $shadow-12, $shadow-13, $shadow-14, $shadow-15, $shadow-16, $shadow-17, $shadow-18, $shadow-19, $shadow-20, $shadow-21, $shadow-22, $shadow-23, $shadow-24)
|
|
$shadow-up-0 : 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient !default
|
|
$shadow-up-1 : 0 -1px 3px $elevation-umbra, 0 -1px 1px $elevation-penumbra, 0 -2px 1px -1px $elevation-ambient !default
|
|
$shadow-up-2 : 0 -1px 5px $elevation-umbra, 0 -2px 2px $elevation-penumbra, 0 -3px 1px -2px $elevation-ambient !default
|
|
$shadow-up-3 : 0 -1px 8px $elevation-umbra, 0 -3px 4px $elevation-penumbra, 0 -3px 3px -2px $elevation-ambient !default
|
|
$shadow-up-4 : 0 -2px 4px -1px $elevation-umbra, 0 -4px 5px $elevation-penumbra, 0 -1px 10px $elevation-ambient !default
|
|
$shadow-up-5 : 0 -3px 5px -1px $elevation-umbra, 0 -5px 8px $elevation-penumbra, 0 -1px 14px $elevation-ambient !default
|
|
$shadow-up-6 : 0 -3px 5px -1px $elevation-umbra, 0 -6px 10px $elevation-penumbra, 0 -1px 18px $elevation-ambient !default
|
|
$shadow-up-7 : 0 -4px 5px -2px $elevation-umbra, 0 -7px 10px 1px $elevation-penumbra, 0 -2px 16px 1px $elevation-ambient !default
|
|
$shadow-up-8 : 0 -5px 5px -3px $elevation-umbra, 0 -8px 10px 1px $elevation-penumbra, 0 -3px 14px 2px $elevation-ambient !default
|
|
$shadow-up-9 : 0 -5px 6px -3px $elevation-umbra, 0 -9px 12px 1px $elevation-penumbra, 0 -3px 16px 2px $elevation-ambient !default
|
|
$shadow-up-10 : 0 -6px 6px -3px $elevation-umbra, 0 -10px 14px 1px $elevation-penumbra, 0 -4px 18px 3px $elevation-ambient !default
|
|
$shadow-up-11 : 0 -6px 7px -4px $elevation-umbra, 0 -11px 15px 1px $elevation-penumbra, 0 -4px 20px 3px $elevation-ambient !default
|
|
$shadow-up-12 : 0 -7px 8px -4px $elevation-umbra, 0 -12px 17px 2px $elevation-penumbra, 0 -5px 22px 4px $elevation-ambient !default
|
|
$shadow-up-13 : 0 -7px 8px -4px $elevation-umbra, 0 -13px 19px 2px $elevation-penumbra, 0 -5px 24px 4px $elevation-ambient !default
|
|
$shadow-up-14 : 0 -7px 9px -4px $elevation-umbra, 0 -14px 21px 2px $elevation-penumbra, 0 -5px 26px 4px $elevation-ambient !default
|
|
$shadow-up-15 : 0 -8px 9px -5px $elevation-umbra, 0 -15px 22px 2px $elevation-penumbra, 0 -6px 28px 5px $elevation-ambient !default
|
|
$shadow-up-16 : 0 -8px 10px -5px $elevation-umbra, 0 -16px 24px 2px $elevation-penumbra, 0 -6px 30px 5px $elevation-ambient !default
|
|
$shadow-up-17 : 0 -8px 11px -5px $elevation-umbra, 0 -17px 26px 2px $elevation-penumbra, 0 -6px 32px 5px $elevation-ambient !default
|
|
$shadow-up-18 : 0 -9px 11px -5px $elevation-umbra, 0 -18px 28px 2px $elevation-penumbra, 0 -7px 34px 6px $elevation-ambient !default
|
|
$shadow-up-19 : 0 -9px 12px -6px $elevation-umbra, 0 -19px 29px 2px $elevation-penumbra, 0 -7px 36px 6px $elevation-ambient !default
|
|
$shadow-up-20 : 0 -10px 13px -6px $elevation-umbra, 0 -20px 31px 3px $elevation-penumbra, 0 -8px 38px 7px $elevation-ambient !default
|
|
$shadow-up-21 : 0 -10px 13px -6px $elevation-umbra, 0 -21px 33px 3px $elevation-penumbra, 0 -8px 40px 7px $elevation-ambient !default
|
|
$shadow-up-22 : 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-penumbra, 0 -8px 42px 7px $elevation-ambient !default
|
|
$shadow-up-23 : 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient !default
|
|
$shadow-up-24 : 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient !default
|
|
$shadows-up: ($shadow-up-1, $shadow-up-2, $shadow-up-3, $shadow-up-4, $shadow-up-5, $shadow-up-6, $shadow-up-7, $shadow-up-8, $shadow-up-9, $shadow-up-10, $shadow-up-11, $shadow-up-12, $shadow-up-13, $shadow-up-14, $shadow-up-15, $shadow-up-16, $shadow-up-17, $shadow-up-18, $shadow-up-19, $shadow-up-20, $shadow-up-21, $shadow-up-22, $shadow-up-23, $shadow-up-24)
|
|
$dark-shadow-color : #fff !default
|
|
$inset-dark-shadow : 0 7px 9px -7px rgba($dark-shadow-color, .7) inset !default
|
|
$inset-dark-shadow-down : 0 -7px 9px -7px rgba($dark-shadow-color, .7) inset !default
|
|
$elevation-dark-umbra : rgba($dark-shadow-color, .2) !default
|
|
$elevation-dark-penumbra : rgba($dark-shadow-color, .14) !default
|
|
$elevation-dark-ambient : rgba($dark-shadow-color, .12) !default
|
|
$dark-shadow-0 : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
|
|
$dark-shadow-1 : 0 1px 3px $elevation-dark-umbra, 0 1px 1px $elevation-dark-penumbra, 0 2px 1px -1px $elevation-dark-ambient !default
|
|
$dark-shadow-2 : 0 1px 5px $elevation-dark-umbra, 0 2px 2px $elevation-dark-penumbra, 0 3px 1px -2px $elevation-dark-ambient !default
|
|
$dark-shadow-3 : 0 1px 8px $elevation-dark-umbra, 0 3px 4px $elevation-dark-penumbra, 0 3px 3px -2px $elevation-dark-ambient !default
|
|
$dark-shadow-4 : 0 2px 4px -1px $elevation-dark-umbra, 0 4px 5px $elevation-dark-penumbra, 0 1px 10px $elevation-dark-ambient !default
|
|
$dark-shadow-5 : 0 3px 5px -1px $elevation-dark-umbra, 0 5px 8px $elevation-dark-penumbra, 0 1px 14px $elevation-dark-ambient !default
|
|
$dark-shadow-6 : 0 3px 5px -1px $elevation-dark-umbra, 0 6px 10px $elevation-dark-penumbra, 0 1px 18px $elevation-dark-ambient !default
|
|
$dark-shadow-7 : 0 4px 5px -2px $elevation-dark-umbra, 0 7px 10px 1px $elevation-dark-penumbra, 0 2px 16px 1px $elevation-dark-ambient !default
|
|
$dark-shadow-8 : 0 5px 5px -3px $elevation-dark-umbra, 0 8px 10px 1px $elevation-dark-penumbra, 0 3px 14px 2px $elevation-dark-ambient !default
|
|
$dark-shadow-9 : 0 5px 6px -3px $elevation-dark-umbra, 0 9px 12px 1px $elevation-dark-penumbra, 0 3px 16px 2px $elevation-dark-ambient !default
|
|
$dark-shadow-10 : 0 6px 6px -3px $elevation-dark-umbra, 0 10px 14px 1px $elevation-dark-penumbra, 0 4px 18px 3px $elevation-dark-ambient !default
|
|
$dark-shadow-11 : 0 6px 7px -4px $elevation-dark-umbra, 0 11px 15px 1px $elevation-dark-penumbra, 0 4px 20px 3px $elevation-dark-ambient !default
|
|
$dark-shadow-12 : 0 7px 8px -4px $elevation-dark-umbra, 0 12px 17px 2px $elevation-dark-penumbra, 0 5px 22px 4px $elevation-dark-ambient !default
|
|
$dark-shadow-13 : 0 7px 8px -4px $elevation-dark-umbra, 0 13px 19px 2px $elevation-dark-penumbra, 0 5px 24px 4px $elevation-dark-ambient !default
|
|
$dark-shadow-14 : 0 7px 9px -4px $elevation-dark-umbra, 0 14px 21px 2px $elevation-dark-penumbra, 0 5px 26px 4px $elevation-dark-ambient !default
|
|
$dark-shadow-15 : 0 8px 9px -5px $elevation-dark-umbra, 0 15px 22px 2px $elevation-dark-penumbra, 0 6px 28px 5px $elevation-dark-ambient !default
|
|
$dark-shadow-16 : 0 8px 10px -5px $elevation-dark-umbra, 0 16px 24px 2px $elevation-dark-penumbra, 0 6px 30px 5px $elevation-dark-ambient !default
|
|
$dark-shadow-17 : 0 8px 11px -5px $elevation-dark-umbra, 0 17px 26px 2px $elevation-dark-penumbra, 0 6px 32px 5px $elevation-dark-ambient !default
|
|
$dark-shadow-18 : 0 9px 11px -5px $elevation-dark-umbra, 0 18px 28px 2px $elevation-dark-penumbra, 0 7px 34px 6px $elevation-dark-ambient !default
|
|
$dark-shadow-19 : 0 9px 12px -6px $elevation-dark-umbra, 0 19px 29px 2px $elevation-dark-penumbra, 0 7px 36px 6px $elevation-dark-ambient !default
|
|
$dark-shadow-20 : 0 10px 13px -6px $elevation-dark-umbra, 0 20px 31px 3px $elevation-dark-penumbra, 0 8px 38px 7px $elevation-dark-ambient !default
|
|
$dark-shadow-21 : 0 10px 13px -6px $elevation-dark-umbra, 0 21px 33px 3px $elevation-dark-penumbra, 0 8px 40px 7px $elevation-dark-ambient !default
|
|
$dark-shadow-22 : 0 10px 14px -6px $elevation-dark-umbra, 0 22px 35px 3px $elevation-dark-penumbra, 0 8px 42px 7px $elevation-dark-ambient !default
|
|
$dark-shadow-23 : 0 11px 14px -7px $elevation-dark-umbra, 0 23px 36px 3px $elevation-dark-penumbra, 0 9px 44px 8px $elevation-dark-ambient !default
|
|
$dark-shadow-24 : 0 11px 15px -7px $elevation-dark-umbra, 0 24px 38px 3px $elevation-dark-penumbra, 0 9px 46px 8px $elevation-dark-ambient !default
|
|
$dark-shadows: ($dark-shadow-1, $dark-shadow-2, $dark-shadow-3, $dark-shadow-4, $dark-shadow-5, $dark-shadow-6, $dark-shadow-7, $dark-shadow-8, $dark-shadow-9, $dark-shadow-10, $dark-shadow-11, $dark-shadow-12, $dark-shadow-13, $dark-shadow-14, $dark-shadow-15, $dark-shadow-16, $dark-shadow-17, $dark-shadow-18, $dark-shadow-19, $dark-shadow-20, $dark-shadow-21, $dark-shadow-22, $dark-shadow-23, $dark-shadow-24)
|
|
$dark-shadow-up-0 : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
|
|
$dark-shadow-up-1 : 0 -1px 3px $elevation-dark-umbra, 0 -1px 1px $elevation-dark-penumbra, 0 -2px 1px -1px $elevation-dark-ambient !default
|
|
$dark-shadow-up-2 : 0 -1px 5px $elevation-dark-umbra, 0 -2px 2px $elevation-dark-penumbra, 0 -3px 1px -2px $elevation-dark-ambient !default
|
|
$dark-shadow-up-3 : 0 -1px 8px $elevation-dark-umbra, 0 -3px 4px $elevation-dark-penumbra, 0 -3px 3px -2px $elevation-dark-ambient !default
|
|
$dark-shadow-up-4 : 0 -2px 4px -1px $elevation-dark-umbra, 0 -4px 5px $elevation-dark-penumbra, 0 -1px 10px $elevation-dark-ambient !default
|
|
$dark-shadow-up-5 : 0 -3px 5px -1px $elevation-dark-umbra, 0 -5px 8px $elevation-dark-penumbra, 0 -1px 14px $elevation-dark-ambient !default
|
|
$dark-shadow-up-6 : 0 -3px 5px -1px $elevation-dark-umbra, 0 -6px 10px $elevation-dark-penumbra, 0 -1px 18px $elevation-dark-ambient !default
|
|
$dark-shadow-up-7 : 0 -4px 5px -2px $elevation-dark-umbra, 0 -7px 10px 1px $elevation-dark-penumbra, 0 -2px 16px 1px $elevation-dark-ambient !default
|
|
$dark-shadow-up-8 : 0 -5px 5px -3px $elevation-dark-umbra, 0 -8px 10px 1px $elevation-dark-penumbra, 0 -3px 14px 2px $elevation-dark-ambient !default
|
|
$dark-shadow-up-9 : 0 -5px 6px -3px $elevation-dark-umbra, 0 -9px 12px 1px $elevation-dark-penumbra, 0 -3px 16px 2px $elevation-dark-ambient !default
|
|
$dark-shadow-up-10 : 0 -6px 6px -3px $elevation-dark-umbra, 0 -10px 14px 1px $elevation-dark-penumbra, 0 -4px 18px 3px $elevation-dark-ambient !default
|
|
$dark-shadow-up-11 : 0 -6px 7px -4px $elevation-dark-umbra, 0 -11px 15px 1px $elevation-dark-penumbra, 0 -4px 20px 3px $elevation-dark-ambient !default
|
|
$dark-shadow-up-12 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -12px 17px 2px $elevation-dark-penumbra, 0 -5px 22px 4px $elevation-dark-ambient !default
|
|
$dark-shadow-up-13 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -13px 19px 2px $elevation-dark-penumbra, 0 -5px 24px 4px $elevation-dark-ambient !default
|
|
$dark-shadow-up-14 : 0 -7px 9px -4px $elevation-dark-umbra, 0 -14px 21px 2px $elevation-dark-penumbra, 0 -5px 26px 4px $elevation-dark-ambient !default
|
|
$dark-shadow-up-15 : 0 -8px 9px -5px $elevation-dark-umbra, 0 -15px 22px 2px $elevation-dark-penumbra, 0 -6px 28px 5px $elevation-dark-ambient !default
|
|
$dark-shadow-up-16 : 0 -8px 10px -5px $elevation-dark-umbra, 0 -16px 24px 2px $elevation-dark-penumbra, 0 -6px 30px 5px $elevation-dark-ambient !default
|
|
$dark-shadow-up-17 : 0 -8px 11px -5px $elevation-dark-umbra, 0 -17px 26px 2px $elevation-dark-penumbra, 0 -6px 32px 5px $elevation-dark-ambient !default
|
|
$dark-shadow-up-18 : 0 -9px 11px -5px $elevation-dark-umbra, 0 -18px 28px 2px $elevation-dark-penumbra, 0 -7px 34px 6px $elevation-dark-ambient !default
|
|
$dark-shadow-up-19 : 0 -9px 12px -6px $elevation-dark-umbra, 0 -19px 29px 2px $elevation-dark-penumbra, 0 -7px 36px 6px $elevation-dark-ambient !default
|
|
$dark-shadow-up-20 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -20px 31px 3px $elevation-dark-penumbra, 0 -8px 38px 7px $elevation-dark-ambient !default
|
|
$dark-shadow-up-21 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -21px 33px 3px $elevation-dark-penumbra, 0 -8px 40px 7px $elevation-dark-ambient !default
|
|
$dark-shadow-up-22 : 0 -10px 14px -6px $elevation-dark-umbra, 0 -22px 35px 3px $elevation-dark-penumbra, 0 -8px 42px 7px $elevation-dark-ambient !default
|
|
$dark-shadow-up-23 : 0 -11px 14px -7px $elevation-dark-umbra, 0 -23px 36px 3px $elevation-dark-penumbra, 0 -9px 44px 8px $elevation-dark-ambient !default
|
|
$dark-shadow-up-24 : 0 -11px 15px -7px $elevation-dark-umbra, 0 -24px 38px 3px $elevation-dark-penumbra, 0 -9px 46px 8px $elevation-dark-ambient !default
|
|
$dark-shadows-up: ($dark-shadow-up-1, $dark-shadow-up-2, $dark-shadow-up-3, $dark-shadow-up-4, $dark-shadow-up-5, $dark-shadow-up-6, $dark-shadow-up-7, $dark-shadow-up-8, $dark-shadow-up-9, $dark-shadow-up-10, $dark-shadow-up-11, $dark-shadow-up-12, $dark-shadow-up-13, $dark-shadow-up-14, $dark-shadow-up-15, $dark-shadow-up-16, $dark-shadow-up-17, $dark-shadow-up-18, $dark-shadow-up-19, $dark-shadow-up-20, $dark-shadow-up-21, $dark-shadow-up-22, $dark-shadow-up-23, $dark-shadow-up-24)
|
|
$generic-border-radius : 4px !default
|
|
$generic-hover-transition : .3s cubic-bezier(.25, .8, .5, 1) !default
|
|
$typography-font-family : 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif !default
|
|
$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
|
|
$menu-max-height : 65vh !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
|
|
$tooltip-max-width : 95vw !default
|
|
$tooltip-max-height : 65vh !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
|
|
*, *: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
|
|
/*
|
|
* 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-search-cancel-button,
|
|
input[type='search']::-webkit-search-decoration
|
|
-webkit-appearance: none
|
|
.q-icon
|
|
line-height: 1
|
|
width: 1em
|
|
height: 1em
|
|
flex-shrink: 0
|
|
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,
|
|
> img
|
|
width: 100%
|
|
height: 100%
|
|
> div
|
|
box-sizing: border-box
|
|
.q-icon,
|
|
.material-icons,
|
|
.material-icons-outlined,
|
|
.material-icons-round,
|
|
.material-icons-sharp,
|
|
.material-symbols-outlined,
|
|
.material-symbols-rounded,
|
|
.material-symbols-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: $avatar-font-size
|
|
height: 1em
|
|
width: 1em
|
|
&__content
|
|
font-size: $avatar-content-font-size
|
|
line-height: $avatar-content-line-height
|
|
&__content, img:not(.q-icon):not(.q-img__image)
|
|
border-radius: inherit
|
|
height: inherit
|
|
width: inherit
|
|
&--square
|
|
border-radius: 0
|
|
.q-badge
|
|
background-color: var(--q-primary)
|
|
color: #fff
|
|
padding: 2px 6px
|
|
border-radius: $generic-border-radius
|
|
font-size: $badge-font-size
|
|
line-height: $badge-line-height
|
|
min-height: $badge-min-height
|
|
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: $banner-avatar-font-size
|
|
> .q-icon
|
|
font-size: $banner-avatar-icon-font-size
|
|
&__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: $banner-avatar-dense-font-size
|
|
.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: $bar-height
|
|
font-size: 18px
|
|
> div
|
|
font-size: $bar-inner-font-size
|
|
.q-btn
|
|
font-size: $bar-button-font-size
|
|
&--dense
|
|
padding: 0 8px
|
|
height: $bar-dense-height
|
|
font-size: $bar-dense-font-size
|
|
.q-btn
|
|
font-size: $bar-dense-button-font-size
|
|
&--dark
|
|
background: rgba(255,255,255,.15)
|
|
.q-breadcrumbs
|
|
&__el
|
|
color: inherit
|
|
&__el-icon
|
|
font-size: $breadcrumbs-icon-font-size
|
|
&--with-label
|
|
margin-right: 8px
|
|
[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
|
|
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
|
|
cursor: default
|
|
padding: $button-padding
|
|
min-height: 2.572em
|
|
.q-icon, .q-spinner
|
|
font-size: $button-line-height
|
|
&.disabled
|
|
opacity: .7 !important
|
|
&: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
|
|
&:before
|
|
|
|
|
|
|
|
|
|
transition: box-shadow $button-transition
|
|
&:active,
|
|
&.q-btn--active
|
|
&:before
|
|
box-shadow: $button-shadow-active
|
|
&--no-uppercase
|
|
text-transform: none
|
|
&--rectangle
|
|
border-radius: $button-border-radius
|
|
&--outline
|
|
background: transparent !important
|
|
&:before
|
|
border: 1px solid currentColor
|
|
&--push
|
|
border-radius: $button-push-border-radius
|
|
&:before
|
|
border-bottom: 3px solid rgba(0,0,0,.15)
|
|
&.q-btn--actionable
|
|
transition: transform $button-transition
|
|
&:before
|
|
transition: border-width $button-transition
|
|
&:active,
|
|
&.q-btn--active
|
|
transform: translateY(2px)
|
|
&:before
|
|
border-bottom-width: 0
|
|
&--rounded
|
|
border-radius: $button-rounded-border-radius
|
|
&--round
|
|
border-radius: 50%
|
|
padding: 0
|
|
min-width: 3em
|
|
min-height: 3em
|
|
&--square
|
|
border-radius: 0
|
|
&--flat, &--outline, &--unelevated
|
|
&:before
|
|
box-shadow: none
|
|
&--dense
|
|
padding: $button-dense-padding
|
|
min-height: 2em
|
|
&.q-btn--round
|
|
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: $button-fab-icon-font-size
|
|
&--fab
|
|
padding: 16px
|
|
min-height: 56px
|
|
min-width: 56px
|
|
.q-icon
|
|
margin: auto
|
|
&--fab-mini
|
|
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
|
|
padding: 0 4px
|
|
&.q-btn--outline
|
|
border-left: 1px solid currentColor
|
|
&:not(.q-btn--outline)
|
|
border-left: 1px solid rgba(255,255,255,.3)
|
|
&--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
|
|
&: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:before
|
|
border-left: 0
|
|
> .q-btn-group:not(:last-child) > .q-btn:last-child: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:before
|
|
z-index: -1
|
|
&--push
|
|
border-radius: $button-push-border-radius
|
|
> .q-btn--push
|
|
&.q-btn--actionable
|
|
transform: none
|
|
.q-btn__content
|
|
transition: margin-top $button-transition, margin-bottom $button-transition
|
|
&:active,
|
|
&.q-btn--active
|
|
.q-btn__content
|
|
margin-top: 2px
|
|
margin-bottom: -2px
|
|
&--rounded
|
|
border-radius: $button-rounded-border-radius
|
|
&--square
|
|
border-radius: 0
|
|
&--flat, &--outline, &--unelevated
|
|
box-shadow: none
|
|
&--outline
|
|
> .q-separator
|
|
display: none
|
|
> .q-btn-item + .q-btn-item:before
|
|
border-left: 0
|
|
> .q-btn-item:not(:last-child):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
|
|
&:not(.q--avoid-card-border)
|
|
border-top-left-radius: 0
|
|
border-top-right-radius: 0
|
|
border-bottom-left-radius: 0
|
|
border-bottom-right-radius: 0
|
|
&:nth-child(1 of :not(.q--avoid-card-border))
|
|
border-top: 0
|
|
border-top-left-radius: inherit
|
|
border-top-right-radius: inherit
|
|
&:nth-last-child(1 of :not(.q--avoid-card-border))
|
|
border-bottom: 0
|
|
border-bottom-left-radius: inherit
|
|
border-bottom-right-radius: inherit
|
|
> div:not(.q--avoid-card-border)
|
|
border-left: 0
|
|
border-right: 0
|
|
box-shadow: none
|
|
&--bordered
|
|
border: 1px solid $separator-color
|
|
&--dark
|
|
border-color: $separator-dark-color
|
|
box-shadow: $dark-shadow-2
|
|
&__section
|
|
position: relative
|
|
&--vert
|
|
padding: 16px
|
|
&--horiz
|
|
> div,
|
|
> img
|
|
&:not(.q--avoid-card-border)
|
|
border-top-left-radius: 0
|
|
border-bottom-left-radius: 0
|
|
border-top-right-radius: 0
|
|
border-bottom-right-radius: 0
|
|
&:nth-child(1 of :not(.q--avoid-card-border))
|
|
border-top-left-radius: inherit
|
|
border-bottom-left-radius: inherit
|
|
&:nth-last-child(1 of :not(.q--avoid-card-border))
|
|
border-top-right-radius: inherit
|
|
border-bottom-right-radius: inherit
|
|
> div:not(.q--avoid-card-border)
|
|
border-top: 0
|
|
border-bottom: 0
|
|
box-shadow: none
|
|
&__actions
|
|
padding: 8px
|
|
align-items: center
|
|
.q-btn--rectangle
|
|
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: $carousel-arrow-icon-font-size
|
|
.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
|
|
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
|
|
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%
|
|
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
|
|
&__native
|
|
width: 1px
|
|
height: 1px
|
|
&__bg,
|
|
&__icon-container
|
|
user-select: none
|
|
&__bg
|
|
top: 25%
|
|
left: 25%
|
|
width: 50%
|
|
height: 50%
|
|
border: 2px solid currentColor
|
|
border-radius: 2px
|
|
transition: background $checkbox-transition
|
|
-webkit-print-color-adjust: exact
|
|
&__icon
|
|
color: currentColor
|
|
font-size: .5em
|
|
&__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: $checkbox-inner-font-size
|
|
width: 1em
|
|
min-width: 1em
|
|
height: 1em
|
|
outline: 0
|
|
border-radius: 50%
|
|
color: rgba(0,0,0,.54)
|
|
&--truthy, &--indet
|
|
color: var(--q-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: var(--q-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)
|
|
.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: $chip-font-size
|
|
padding: .5em .9em
|
|
&--colored, &--dark
|
|
.q-chip__icon
|
|
color: inherit
|
|
.q-avatar
|
|
font-size: $chip-avatar-font-size
|
|
margin-left: -.45em
|
|
margin-right: .2em
|
|
border-radius: 16px
|
|
&--outline
|
|
background: transparent !important
|
|
border: 1px solid currentColor
|
|
.q-avatar
|
|
|
|
margin-left: calc(-.45em - 1px)
|
|
&--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: $chip-dense-height
|
|
.q-avatar
|
|
font-size: $chip-dense-avatar-font-size
|
|
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
|
|
&.body--dark
|
|
.q-chip--clickable:focus
|
|
box-shadow: $dark-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
|
|
&-tabs
|
|
height: 32px
|
|
&-banner
|
|
height: 36px
|
|
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
|
|
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
|
|
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: 0 16px
|
|
.q-slider__thumb
|
|
color: $grey-9
|
|
path
|
|
stroke-width: 2px
|
|
fill: transparent
|
|
.q-slider--active path
|
|
stroke-width: 3px
|
|
|
|
&__tune-tab
|
|
.q-slider
|
|
margin-left: 18px
|
|
margin-right: 18px
|
|
input
|
|
font-size: $color-picker-tune-tab-input-font-size
|
|
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
|
|
box-shadow: $dark-shadow-2
|
|
.q-color-picker__tune-tab input
|
|
border: 1px solid rgba(#fff, .3)
|
|
.q-slider__thumb
|
|
color: $grey-1
|
|
.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: var(--q-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: $date-header-subtitle-font-size
|
|
line-height: $date-header-subtitle-line-height
|
|
letter-spacing: $date-header-subtitle-letter-spacing
|
|
&__header-title-label
|
|
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%
|
|
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: $date-calendar-weekdays-inner-font-size
|
|
&__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
|
|
> button
|
|
line-height: 22px
|
|
&--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)
|
|
&:before
|
|
border-top-right-radius: 0
|
|
border-bottom-right-radius: 0
|
|
&__range-from
|
|
&:before
|
|
left: 50%
|
|
&__range-to
|
|
&:before
|
|
right: 50%
|
|
&__edit-range
|
|
&:after
|
|
border-color: currentColor transparent
|
|
&:nth-child(7n-6)
|
|
&:after
|
|
border-top-left-radius: 0
|
|
border-bottom-left-radius: 0
|
|
&:nth-child(7n)
|
|
&:after
|
|
border-top-right-radius: 0
|
|
border-bottom-right-radius: 0
|
|
&-from, &-from-to
|
|
&:after
|
|
left: 4px
|
|
border-left-color: currentColor
|
|
border-top-color: currentColor
|
|
border-bottom-color: currentColor
|
|
border-top-left-radius: $button-rounded-border-radius
|
|
border-bottom-left-radius: $button-rounded-border-radius
|
|
&-to, &-from-to
|
|
&:after
|
|
right: 4px
|
|
border-right-color: currentColor
|
|
border-top-color: currentColor
|
|
border-bottom-color: currentColor
|
|
border-top-right-radius: $button-rounded-border-radius
|
|
border-bottom-right-radius: $button-rounded-border-radius
|
|
&__calendar-days-container
|
|
height: 75%
|
|
min-height: 192px
|
|
&__calendar-days > div
|
|
height: 16.66% !important
|
|
&__event
|
|
position: absolute
|
|
bottom: 2px
|
|
left: 50%
|
|
height: 5px
|
|
width: 8px
|
|
border-radius: 5px
|
|
background-color: var(--q-secondary)
|
|
transform: translate3d(-50%, 0, 0)
|
|
&__today
|
|
box-shadow: 0 0 1px 0 currentColor
|
|
&__years-content
|
|
padding: 0 8px
|
|
&__years-item, &__months-item
|
|
flex: 0 0 33.3333%
|
|
&.disabled, &--readonly
|
|
.q-date__header, .q-date__content
|
|
pointer-events: none
|
|
&--readonly .q-date__navigation
|
|
display: none
|
|
&--portrait
|
|
flex-direction: column
|
|
&--portrait-standard
|
|
.q-date__content
|
|
height: calc(100% - 86px)
|
|
.q-date__header
|
|
border-top-right-radius: inherit
|
|
height: 86px
|
|
.q-date__header-title
|
|
align-items: center
|
|
height: 30px
|
|
&--portrait-minimal
|
|
.q-date__content
|
|
height: 100%
|
|
&--landscape
|
|
flex-direction: row
|
|
align-items: stretch
|
|
min-width: 420px
|
|
> div
|
|
display: flex
|
|
flex-direction: column
|
|
.q-date__content
|
|
height: 100%
|
|
&--landscape-standard
|
|
min-width: 420px
|
|
.q-date__header
|
|
border-bottom-left-radius: inherit
|
|
min-width: 110px
|
|
width: 110px
|
|
.q-date__header-title
|
|
flex-direction: column
|
|
.q-date__header-today
|
|
margin-top: 12px
|
|
margin-left: -8px
|
|
&--landscape-minimal
|
|
width: 310px
|
|
&--dark
|
|
box-shadow: $dark-shadow-2
|
|
border-color: $separator-dark-color
|
|
.q-dialog
|
|
&__title
|
|
font-size: $dialog-title-font-size
|
|
font-weight: 500
|
|
line-height: $dialog-title-line-height
|
|
letter-spacing: $dialog-title-letter-spacing
|
|
&__progress
|
|
font-size: $dialog-progress-font-size
|
|
&__inner
|
|
outline: 0
|
|
> div
|
|
pointer-events: all
|
|
overflow: auto
|
|
-webkit-overflow-scrolling: touch
|
|
will-change: scroll-position
|
|
border-radius: $generic-border-radius
|
|
&--square > div
|
|
border-radius: 0 !important
|
|
> .q-card
|
|
> .q-card__actions .q-btn--rectangle
|
|
min-width: 64px
|
|
&--minimized
|
|
padding: 24px
|
|
> div
|
|
max-height: calc(100vh - 48px)
|
|
&--maximized
|
|
> div
|
|
height: 100%
|
|
width: 100%
|
|
max-height: 100vh
|
|
max-width: 100vw
|
|
border-radius: 0 !important
|
|
top: 0 !important
|
|
left: 0 !important
|
|
&--top, &--bottom
|
|
padding-top: 0 !important
|
|
padding-bottom: 0 !important
|
|
&--right, &--left
|
|
padding-right: 0 !important
|
|
padding-left: 0 !important
|
|
&--left, &--top
|
|
&:not(.q-dialog__inner--animating) > div
|
|
border-top-left-radius: 0
|
|
&--right, &--top
|
|
&:not(.q-dialog__inner--animating) > div
|
|
border-top-right-radius: 0
|
|
&--left, &--bottom
|
|
&:not(.q-dialog__inner--animating) > div
|
|
border-bottom-left-radius: 0
|
|
&--right, &--bottom
|
|
&:not(.q-dialog__inner--animating) > div
|
|
border-bottom-right-radius: 0
|
|
&--fullwidth
|
|
> div
|
|
width: 100% !important
|
|
max-width: 100% !important
|
|
&--fullheight
|
|
> div
|
|
height: 100% !important
|
|
max-height: 100% !important
|
|
&__backdrop
|
|
z-index: -1
|
|
pointer-events: all
|
|
outline: 0
|
|
background: $dimmed-background
|
|
body.platform-ios, body.platform-android:not(.native-mobile)
|
|
.q-dialog__inner--minimized > div
|
|
max-height: calc(100vh - 108px)
|
|
body.q-ios-padding .q-dialog__inner
|
|
padding-top: $ios-statusbar-height !important
|
|
padding-top: env(safe-area-inset-top) !important
|
|
padding-bottom: env(safe-area-inset-bottom) !important
|
|
> div
|
|
max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important
|
|
@media (max-width: $breakpoint-xs-max)
|
|
.q-dialog__inner
|
|
&--top, &--bottom
|
|
padding-left: 0
|
|
padding-right: 0
|
|
> div
|
|
width: 100% !important
|
|
@media (min-width: $breakpoint-sm-min)
|
|
.q-dialog__inner--minimized > div
|
|
max-width: 560px
|
|
.q-body--dialog
|
|
overflow: hidden
|
|
.q-editor
|
|
border: 1px solid $editor-border-color
|
|
border-radius: $generic-border-radius
|
|
background-color: #fff
|
|
&.disabled
|
|
border-style: dashed
|
|
> div:first-child,
|
|
&__toolbars-container,
|
|
&__toolbars-container > div:first-child
|
|
border-top-left-radius: inherit
|
|
border-top-right-radius: inherit
|
|
&__content
|
|
outline: 0
|
|
padding: $editor-content-padding
|
|
min-height: $editor-content-min-height
|
|
border-bottom-left-radius: inherit
|
|
border-bottom-right-radius: inherit
|
|
overflow: auto
|
|
max-width: 100%
|
|
pre
|
|
white-space: pre-wrap
|
|
hr
|
|
border: 0
|
|
outline: 0
|
|
margin: 1px
|
|
height: 1px
|
|
background: $editor-hr-color
|
|
&:empty:not(:focus):before
|
|
content: attr(placeholder)
|
|
opacity: .7
|
|
&__toolbar
|
|
border-bottom: 1px solid $editor-border-color
|
|
min-height: 32px
|
|
&__toolbars-container
|
|
max-width: 100%
|
|
.q-btn
|
|
margin: $editor-button-gutter
|
|
&__toolbar-group
|
|
position: relative
|
|
margin: 0 $editor-button-gutter
|
|
& + &
|
|
&:before
|
|
content: ''
|
|
position: absolute
|
|
left: (- $editor-button-gutter)
|
|
top: $editor-button-gutter
|
|
bottom: $editor-button-gutter
|
|
width: 1px
|
|
background: $editor-border-color
|
|
&__link-input
|
|
color: inherit
|
|
text-decoration: none
|
|
text-transform: none
|
|
border: none
|
|
border-radius: 0
|
|
background: none
|
|
outline: 0
|
|
&--flat
|
|
&, .q-editor__toolbar
|
|
border: 0
|
|
&--dense
|
|
.q-editor__toolbar-group
|
|
display: flex
|
|
align-items: center
|
|
flex-wrap: nowrap
|
|
&--dark
|
|
border-color: $editor-border-dark-color
|
|
.q-editor
|
|
&__content hr
|
|
background: $editor-hr-dark-color
|
|
&__toolbar
|
|
border-color: $editor-border-dark-color
|
|
.q-editor__toolbar-group + .q-editor__toolbar-group:before
|
|
background: $editor-border-dark-color
|
|
.q-expansion-item
|
|
&__border
|
|
opacity: 0
|
|
&__toggle-icon
|
|
position: relative
|
|
transition: transform .3s
|
|
&--rotated
|
|
transform: rotate(180deg)
|
|
&__toggle-focus
|
|
width: 1em !important
|
|
height: 1em !important
|
|
position: relative !important
|
|
& + .q-expansion-item__toggle-icon
|
|
margin-top: -1em
|
|
&--standard
|
|
&.q-expansion-item--expanded
|
|
> div > .q-expansion-item__border
|
|
opacity: 1
|
|
&--popup
|
|
transition: padding .5s
|
|
> .q-expansion-item__container
|
|
border: 1px solid $separator-color
|
|
> .q-separator
|
|
display: none
|
|
&.q-expansion-item
|
|
&--collapsed
|
|
padding: 0 15px
|
|
&--expanded
|
|
padding: 15px 0
|
|
& + &
|
|
padding-top: 0
|
|
&.q-expansion-item--collapsed:not(:first-child)
|
|
> .q-expansion-item__container
|
|
border-top-width: 0
|
|
&.q-expansion-item--expanded + &.q-expansion-item--collapsed
|
|
> .q-expansion-item__container
|
|
border-top-width: 1px
|
|
&__content > .q-card
|
|
box-shadow: none
|
|
border-radius: 0
|
|
&:first-child > div > .q-expansion-item__border--top
|
|
opacity: 0
|
|
&:last-child > div > .q-expansion-item__border--bottom
|
|
opacity: 0
|
|
&--expanded + &--expanded
|
|
> div > .q-expansion-item__border--top
|
|
opacity: 0
|
|
&--expanded .q-textarea--autogrow textarea
|
|
animation: q-expansion-done 0s
|
|
@keyframes q-expansion-done
|
|
0%
|
|
--q-exp-done: 1
|
|
.z-fab
|
|
z-index: $z-fab
|
|
.q-fab
|
|
position: relative
|
|
vertical-align: middle
|
|
> .q-btn
|
|
width: 100%
|
|
&--form-rounded
|
|
border-radius: $button-rounded-border-radius
|
|
&--form-square
|
|
border-radius: $generic-border-radius
|
|
&__icon, &__active-icon
|
|
transition: opacity .4s, transform .4s
|
|
&__icon
|
|
opacity: 1
|
|
transform: rotate(0deg)
|
|
&__active-icon
|
|
opacity: 0
|
|
transform: rotate(-180deg)
|
|
&__label
|
|
&--external
|
|
position: absolute
|
|
padding: 0 8px
|
|
transition: opacity .18s cubic-bezier(.65,.815,.735,.395)
|
|
&-hidden
|
|
opacity: 0
|
|
pointer-events: none
|
|
&--external-left
|
|
top: 50%
|
|
left: -12px
|
|
transform: translate(-100%, -50%)
|
|
&--external-right
|
|
top: 50%
|
|
right: -12px
|
|
transform: translate(100%, -50%)
|
|
&--external-bottom
|
|
bottom: -12px
|
|
left: 50%
|
|
transform: translate(-50%, 100%)
|
|
&--external-top
|
|
top: -12px
|
|
left: 50%
|
|
transform: translate(-50%, -100%)
|
|
&--internal
|
|
padding: 0
|
|
transition: font-size .12s cubic-bezier(.65,.815,.735,.395), max-height .12s cubic-bezier(.65,.815,.735,.395), opacity .07s cubic-bezier(.65,.815,.735,.395)
|
|
max-height: 30px
|
|
&-hidden
|
|
font-size: 0
|
|
opacity: 0
|
|
&-top
|
|
padding-bottom: .12em
|
|
&-bottom
|
|
padding-top: .12em
|
|
&-top, &-bottom
|
|
&.q-fab__label--internal-hidden
|
|
max-height: 0
|
|
&-left
|
|
padding-left: .285em
|
|
padding-right: .571em
|
|
&-right
|
|
padding-right: .285em
|
|
padding-left: .571em
|
|
&__icon-holder
|
|
min-width: $button-fab-icon-font-size
|
|
min-height: $button-fab-icon-font-size
|
|
position: relative
|
|
&--opened
|
|
.q-fab__icon
|
|
transform: rotate(180deg)
|
|
opacity: 0
|
|
.q-fab__active-icon
|
|
transform: rotate(0deg)
|
|
opacity: 1
|
|
&__actions
|
|
position: absolute
|
|
opacity: 0
|
|
transition: transform .18s ease-in, opacity .18s ease-in
|
|
pointer-events: none
|
|
align-items: center
|
|
justify-content: center
|
|
align-self: center
|
|
padding: 3px
|
|
.q-btn
|
|
margin: 5px
|
|
&--right
|
|
transform-origin: 0 50%
|
|
transform: scale(.4) translateX(-62px)
|
|
height: 56px
|
|
left: 100%
|
|
margin-left: 9px
|
|
&--left
|
|
transform-origin: 100% 50%
|
|
transform: scale(.4) translateX(62px)
|
|
height: 56px
|
|
right: 100%
|
|
margin-right: 9px
|
|
flex-direction: row-reverse
|
|
&--up
|
|
transform-origin: 50% 100%
|
|
transform: scale(.4) translateY(62px)
|
|
width: 56px
|
|
bottom: 100%
|
|
margin-bottom: 9px
|
|
flex-direction: column-reverse
|
|
&--down
|
|
transform-origin: 50% 0
|
|
transform: scale(.4) translateY(-62px)
|
|
width: 56px
|
|
top: 100%
|
|
margin-top: 9px
|
|
flex-direction: column
|
|
&--up, &--down
|
|
left: 50%
|
|
margin-left: -28px
|
|
&--opened
|
|
opacity: 1
|
|
|
|
transform: scale(1) translate(0.1px, 0)
|
|
pointer-events: all
|
|
&--align-left
|
|
> .q-fab__actions
|
|
&--up, &--down
|
|
align-items: flex-start
|
|
left: 28px
|
|
&--align-right
|
|
> .q-fab__actions
|
|
&--up, &--down
|
|
align-items: flex-end
|
|
left: auto
|
|
right: 0
|
|
$field-transition: .36s cubic-bezier(.4,0,.2,1)
|
|
$field-transition-label-right-down: .396s cubic-bezier(.4,0,.2,1)
|
|
$field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
|
|
.q-field
|
|
font-size: $input-font-size
|
|
::-ms-clear,
|
|
::-ms-reveal
|
|
display: none
|
|
&--with-bottom
|
|
padding-bottom: $field-with-bottom-padding-bottom
|
|
&__marginal
|
|
height: 56px
|
|
color: rgba(0,0,0,.54)
|
|
font-size: $field-marginal-font-size
|
|
> * + *
|
|
margin-left: 2px
|
|
.q-avatar
|
|
font-size: $field-marginal-avatar-font-size
|
|
&__before, &__prepend
|
|
padding-right: 12px
|
|
&__after, &__append
|
|
padding-left: 12px
|
|
&:empty
|
|
display: none
|
|
&__append + &__append
|
|
padding-left: 2px
|
|
&__inner
|
|
text-align: left
|
|
&__bottom
|
|
font-size: $field-bottom-font-size
|
|
min-height: 20px
|
|
line-height: $field-bottom-line-height
|
|
color: rgba(0,0,0,.54)
|
|
padding: 8px 12px 0
|
|
backface-visibility: hidden
|
|
&--animated
|
|
transform: translateY(100%)
|
|
position: absolute
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
&__messages
|
|
line-height: 1
|
|
> div
|
|
word-break: break-word
|
|
word-wrap: break-word
|
|
overflow-wrap: break-word
|
|
& + div
|
|
margin-top: 4px
|
|
&__counter
|
|
padding-left: 8px
|
|
line-height: 1
|
|
&--item-aligned
|
|
padding: 8px 16px
|
|
.q-field__before
|
|
min-width: 56px
|
|
&__control-container
|
|
height: inherit
|
|
&__control
|
|
color: var(--q-primary)
|
|
height: 56px
|
|
max-width: 100%
|
|
outline: none
|
|
&:before, &:after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
pointer-events: none
|
|
&:before
|
|
border-radius: inherit
|
|
&__shadow
|
|
top: 8px
|
|
opacity: 0
|
|
overflow: hidden
|
|
white-space: pre-wrap
|
|
transition: opacity $field-transition
|
|
+ .q-field__native
|
|
&::placeholder
|
|
transition: opacity $field-transition
|
|
&:focus::placeholder
|
|
opacity: 0
|
|
&__native, &__prefix, &__suffix, &__input
|
|
font-weight: 400
|
|
line-height: 28px
|
|
letter-spacing: .00937em
|
|
text-decoration: inherit
|
|
text-transform: inherit
|
|
border: none
|
|
border-radius: 0
|
|
background: none
|
|
color: $input-text-color
|
|
outline: 0
|
|
padding: 6px 0
|
|
&__native, &__input
|
|
width: 100%
|
|
min-width: 0
|
|
outline: 0 !important
|
|
user-select: auto
|
|
&:-webkit-autofill
|
|
-webkit-animation-name: q-autofill
|
|
-webkit-animation-fill-mode: both
|
|
&:invalid
|
|
box-shadow: none
|
|
&__native[type="file"]
|
|
line-height: 1em
|
|
&__input
|
|
padding: 0
|
|
height: 0
|
|
min-height: 24px
|
|
line-height: 24px
|
|
&__prefix, &__suffix
|
|
transition: opacity $field-transition
|
|
white-space: nowrap
|
|
&__prefix
|
|
padding-right: 4px
|
|
&__suffix
|
|
padding-left: 4px
|
|
&--readonly, &--disabled
|
|
.q-placeholder
|
|
opacity: 1 !important
|
|
&--readonly
|
|
&.q-field--labeled
|
|
.q-field__native, .q-field__input
|
|
cursor: default
|
|
&.q-field--float
|
|
.q-field__native, .q-field__input
|
|
cursor: text
|
|
&--disabled
|
|
.q-field__inner
|
|
cursor: not-allowed
|
|
.q-field__control
|
|
pointer-events: none
|
|
.q-field__control > div
|
|
opacity: .6 !important
|
|
&,
|
|
*
|
|
outline: 0 !important
|
|
&__label
|
|
left: 0
|
|
top: $field-label-top
|
|
max-width: 100%
|
|
color: $input-label-color
|
|
font-size: $field-label-font-size
|
|
line-height: $field-label-line-height
|
|
font-weight: 400
|
|
letter-spacing: $field-label-letter-spacing
|
|
text-decoration: inherit
|
|
text-transform: inherit
|
|
transform-origin: left top
|
|
transition: transform $field-transition, max-width $field-transition-label-right-up
|
|
backface-visibility: hidden
|
|
&:has(+ :is(.q-field__native, .q-field__input):is(
|
|
:-webkit-autofill,
|
|
[type="color"],
|
|
[type="date"],
|
|
[type="datetime-local"],
|
|
[type="month"],
|
|
[type="time"],
|
|
[type="week"]
|
|
))
|
|
transform: translateY(-40%) scale(.75)
|
|
&--float .q-field__label
|
|
max-width: 133%
|
|
transform: translateY(-40%) scale(.75)
|
|
transition: transform $field-transition, max-width $field-transition-label-right-down
|
|
&--highlighted
|
|
.q-field__label
|
|
color: currentColor
|
|
.q-field__shadow
|
|
opacity: .5
|
|
&--filled
|
|
.q-field__control
|
|
padding: 0 12px
|
|
background: rgba(0,0,0,.05)
|
|
border-radius: $generic-border-radius $generic-border-radius 0 0
|
|
&:before
|
|
background: rgba(0,0,0,.05)
|
|
border-bottom: 1px solid rgba(0,0,0,.42)
|
|
opacity: 0
|
|
transition: opacity $field-transition, background $field-transition
|
|
&:hover:before
|
|
opacity: 1
|
|
&:after
|
|
height: 2px
|
|
top: auto
|
|
transform-origin: center bottom
|
|
transform: scale3d(0, 1, 1)
|
|
background: currentColor
|
|
transition: transform $field-transition
|
|
&.q-field--rounded .q-field__control
|
|
border-radius: 28px 28px 0 0
|
|
&.q-field--highlighted
|
|
.q-field__control
|
|
&:before
|
|
opacity: 1
|
|
background: rgba(0,0,0,.12)
|
|
&:after
|
|
transform: scale3d(1, 1, 1)
|
|
&.q-field--dark
|
|
.q-field__control, .q-field__control:before
|
|
background: rgba(255,255,255,.07)
|
|
&.q-field--highlighted .q-field__control:before
|
|
background: rgba(255,255,255,.1)
|
|
&.q-field--readonly
|
|
.q-field__control:before
|
|
opacity: 1
|
|
background: transparent
|
|
border-bottom-style: dashed
|
|
&--outlined
|
|
.q-field__control
|
|
border-radius: $generic-border-radius
|
|
padding: 0 12px
|
|
&:before
|
|
border: 1px solid rgba(0,0,0,.24)
|
|
transition: border-color $field-transition
|
|
&:hover:before
|
|
border-color: #000
|
|
&:after
|
|
height: inherit
|
|
border-radius: inherit
|
|
border: 2px solid transparent
|
|
transition: border-color $field-transition
|
|
.q-field__native,
|
|
.q-field__input
|
|
&:-webkit-autofill
|
|
margin-top: 1px
|
|
margin-bottom: 1px
|
|
&.q-field--rounded .q-field__control
|
|
border-radius: 28px
|
|
&.q-field--highlighted
|
|
|
|
.q-field__control:hover:before
|
|
border-color: transparent
|
|
.q-field__control:after
|
|
border-color: currentColor
|
|
border-width: 2px
|
|
transform: scale3d(1, 1, 1)
|
|
&.q-field--readonly
|
|
.q-field__control:before
|
|
border-style: dashed
|
|
&--standard
|
|
.q-field__control
|
|
&:before
|
|
border-bottom: 1px solid rgba(0,0,0,.24)
|
|
transition: border-color $field-transition
|
|
&:hover:before
|
|
border-color: #000
|
|
&:after
|
|
height: 2px
|
|
top: auto
|
|
border-bottom-left-radius: inherit
|
|
border-bottom-right-radius: inherit
|
|
transform-origin: center bottom
|
|
transform: scale3d(0, 1, 1)
|
|
background: currentColor
|
|
transition: transform $field-transition
|
|
&.q-field--highlighted
|
|
.q-field__control:after
|
|
transform: scale3d(1, 1, 1)
|
|
&.q-field--readonly
|
|
.q-field__control:before
|
|
border-bottom-style: dashed
|
|
&--dark
|
|
.q-field__control:before
|
|
border-color: rgba(255,255,255,.6)
|
|
.q-field__control:hover:before
|
|
border-color: #fff
|
|
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input
|
|
color: #fff
|
|
&:not(.q-field--highlighted) .q-field__label, .q-field__marginal, .q-field__bottom
|
|
color: rgba(255,255,255,.7)
|
|
&--standout
|
|
.q-field__control
|
|
padding: 0 12px
|
|
background: rgba(0,0,0,.05)
|
|
border-radius: $generic-border-radius
|
|
transition: box-shadow $field-transition, background-color $field-transition
|
|
&:before
|
|
background: rgba(0,0,0,.07)
|
|
opacity: 0
|
|
transition: opacity $field-transition, background $field-transition
|
|
&:hover:before
|
|
opacity: 1
|
|
&.q-field--rounded .q-field__control
|
|
border-radius: 28px
|
|
&.q-field--highlighted
|
|
.q-field__control
|
|
box-shadow: $shadow-2
|
|
background: #000
|
|
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
|
|
color: #fff
|
|
&.q-field--readonly
|
|
.q-field__control:before
|
|
opacity: 1
|
|
background: transparent
|
|
border: 1px dashed rgba(0,0,0,.24)
|
|
&.q-field--dark
|
|
.q-field__control
|
|
background: rgba(255,255,255,.07)
|
|
&:before
|
|
background: rgba(255,255,255,.07)
|
|
&.q-field--highlighted
|
|
.q-field__control
|
|
background: #fff
|
|
.q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-field__input
|
|
color: #000
|
|
&.q-field--readonly
|
|
.q-field__control:before
|
|
border-color: rgba(255,255,255,.24)
|
|
&--labeled
|
|
.q-field__native, .q-field__prefix, .q-field__suffix
|
|
line-height: 24px
|
|
padding-top: 24px
|
|
padding-bottom: 8px
|
|
.q-field__shadow
|
|
top: 0
|
|
&:not(.q-field--float)
|
|
.q-field__prefix, .q-field__suffix
|
|
opacity: 0
|
|
.q-field__native, .q-field__input
|
|
&::-webkit-input-placeholder
|
|
color: transparent
|
|
&::-moz-placeholder
|
|
color: transparent
|
|
&:-ms-input-placeholder
|
|
color: transparent !important
|
|
&::-ms-input-placeholder
|
|
color: transparent
|
|
&::placeholder
|
|
color: transparent
|
|
&.q-field--dense
|
|
.q-field__native, .q-field__prefix, .q-field__suffix
|
|
padding-top: 14px
|
|
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: $field-dense-bottom-font-size
|
|
.q-field__label
|
|
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
|
|
padding-left: 6px
|
|
.q-field__append + .q-field__append
|
|
padding-left: 2px
|
|
.q-field__marginal
|
|
.q-avatar
|
|
font-size: $field-dense-marginal-avatar-font-size
|
|
&.q-field--float .q-field__label
|
|
transform: translateY(-30%) scale(.75)
|
|
.q-field__label:has(+ :is(.q-field__native, .q-field__input):is(
|
|
:-webkit-autofill,
|
|
[type="color"],
|
|
[type="date"],
|
|
[type="datetime-local"],
|
|
[type="month"],
|
|
[type="time"],
|
|
[type="week"]
|
|
))
|
|
transform: translateY(-30%) scale(.75)
|
|
&--borderless, &--standard
|
|
.q-field__bottom,
|
|
&.q-field--dense .q-field__control
|
|
padding-left: 0
|
|
padding-right: 0
|
|
&--error
|
|
.q-field__label
|
|
animation: q-field-label .36s
|
|
.q-field__bottom
|
|
color: var(--q-negative)
|
|
&__focusable-action
|
|
opacity: 0.6
|
|
cursor: pointer
|
|
outline: 0 !important
|
|
border: 0
|
|
color: inherit
|
|
background: transparent
|
|
padding: 0
|
|
&:hover,
|
|
&:focus
|
|
opacity: 1
|
|
&--auto-height
|
|
.q-field__control
|
|
height: auto
|
|
.q-field__control, .q-field__native
|
|
min-height: 56px
|
|
.q-field__native
|
|
align-items: center
|
|
.q-field__control-container
|
|
padding-top: 0
|
|
.q-field__native, .q-field__prefix, .q-field__suffix
|
|
line-height: 18px
|
|
&.q-field--labeled
|
|
.q-field__control-container
|
|
padding-top: 24px
|
|
.q-field__shadow
|
|
top: 24px
|
|
.q-field__native, .q-field__prefix, .q-field__suffix
|
|
padding-top: 0
|
|
.q-field__native
|
|
min-height: 24px
|
|
&.q-field--dense
|
|
.q-field__control, .q-field__native
|
|
min-height: 40px
|
|
&.q-field--labeled
|
|
.q-field__control-container
|
|
padding-top: 14px
|
|
.q-field__shadow
|
|
top: 14px
|
|
.q-field__native
|
|
min-height: 24px
|
|
&--square .q-field__control
|
|
border-radius: 0 !important
|
|
.q-transition--field-message
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: transform .6s cubic-bezier(.86,0,.07,1), opacity .6s cubic-bezier(.86,0,.07,1)
|
|
&-enter-from, &-leave-to
|
|
opacity: 0
|
|
transform: translateY(-10px)
|
|
&-leave-from, &-leave-active
|
|
position: absolute
|
|
@keyframes q-field-label
|
|
40%
|
|
margin-left: 2px
|
|
60%, 80%
|
|
margin-left: -2px
|
|
70%, 90%
|
|
margin-left: 2px
|
|
@keyframes q-autofill
|
|
to
|
|
background: transparent
|
|
color: $input-autofill-color
|
|
.q-file
|
|
.q-field__native
|
|
word-break: break-all
|
|
overflow: hidden
|
|
.q-field__input
|
|
opacity: 0 !important
|
|
&::-webkit-file-upload-button
|
|
cursor: pointer
|
|
&__filler
|
|
visibility: hidden
|
|
width: 100%
|
|
border: none
|
|
padding: 0
|
|
&__dnd
|
|
outline: 1px dashed currentColor
|
|
outline-offset: -4px
|
|
.q-form
|
|
position: relative
|
|
.q-img
|
|
position: relative
|
|
width: 100%
|
|
display: inline-block
|
|
vertical-align: middle
|
|
overflow: hidden
|
|
&__loading .q-spinner
|
|
font-size: $img-loading-font-size
|
|
&__container
|
|
border-radius: inherit
|
|
font-size: 0
|
|
&__image
|
|
border-radius: inherit
|
|
width: 100%
|
|
height: 100%
|
|
opacity: 0
|
|
&--with-transition
|
|
transition: opacity .28s ease-in
|
|
&--loaded
|
|
opacity: 1
|
|
&__content
|
|
border-radius: inherit
|
|
pointer-events: none
|
|
> div
|
|
pointer-events: all
|
|
position: $img-content-position
|
|
padding: $img-content-padding
|
|
color: $img-content-color
|
|
background: $img-content-background
|
|
&--no-menu
|
|
.q-img__image,
|
|
.q-img__placeholder
|
|
pointer-events: none
|
|
.q-inner-loading
|
|
background: $light-dimmed-background
|
|
border-radius: inherit
|
|
&--dark
|
|
background: $dimmed-background
|
|
&__label
|
|
margin-top: 8px
|
|
.q-textarea
|
|
.q-field__control
|
|
min-height: 56px
|
|
height: auto
|
|
.q-field__control-container
|
|
padding-top: 2px
|
|
padding-bottom: 2px
|
|
.q-field__shadow
|
|
top: 2px
|
|
bottom: 2px
|
|
.q-field__native, .q-field__prefix, .q-field__suffix
|
|
line-height: 18px
|
|
.q-field__native
|
|
resize: vertical
|
|
padding-top: 17px
|
|
min-height: 52px
|
|
&.q-field--labeled
|
|
.q-field__control-container
|
|
padding-top: 26px
|
|
.q-field__shadow
|
|
top: 26px
|
|
.q-field__native, .q-field__prefix, .q-field__suffix
|
|
padding-top: 0
|
|
.q-field__native
|
|
min-height: 26px
|
|
padding-top: 1px
|
|
&--autogrow
|
|
.q-field__native
|
|
resize: none
|
|
&.q-field--dense
|
|
.q-field__control, .q-field__native
|
|
min-height: 36px
|
|
.q-field__native
|
|
padding-top: 9px
|
|
&.q-field--labeled
|
|
.q-field__control-container
|
|
padding-top: 14px
|
|
.q-field__shadow
|
|
top: 14px
|
|
.q-field__native
|
|
min-height: 24px
|
|
padding-top: 3px
|
|
.q-field__prefix, .q-field__suffix
|
|
padding-top: 2px
|
|
body.mobile .q-textarea,
|
|
.q-textarea.disabled
|
|
.q-field__native
|
|
resize: none
|
|
.q-intersection
|
|
position: relative
|
|
.q-item
|
|
min-height: 48px
|
|
padding: 8px 16px
|
|
color: inherit
|
|
transition: color .3s, background-color .3s
|
|
&__section
|
|
&--side
|
|
color: $grey-7
|
|
align-items: flex-start
|
|
padding-right: 16px
|
|
width: auto
|
|
min-width: 0
|
|
max-width: 100%
|
|
> .q-icon
|
|
font-size: $item-section-side-icon-font-size
|
|
> .q-avatar
|
|
font-size: $item-section-side-avatar-font-size
|
|
&--avatar
|
|
color: inherit
|
|
min-width: 56px
|
|
&--thumbnail
|
|
img
|
|
width: 100px
|
|
height: 56px
|
|
&--nowrap
|
|
white-space: nowrap
|
|
> .q-item__section--thumbnail:first-child,
|
|
> .q-focus-helper + .q-item__section--thumbnail
|
|
margin-left: -16px
|
|
> .q-item__section--thumbnail:last-of-type
|
|
margin-right: -16px
|
|
&__label
|
|
line-height: 1.2em !important
|
|
max-width: 100%
|
|
&--overline
|
|
color: rgba(0,0,0,.7)
|
|
&--caption
|
|
color: rgba(0,0,0,.54)
|
|
&--header
|
|
color: $grey-7
|
|
padding: 16px
|
|
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
|
|
& + .q-item__label
|
|
margin-top: 4px
|
|
.q-item__section--main
|
|
width: auto
|
|
min-width: 0
|
|
max-width: 100%
|
|
flex: 10000 1 0%
|
|
& + &
|
|
margin-left: 8px
|
|
~ .q-item__section--side
|
|
align-items: flex-end
|
|
padding-right: 0
|
|
padding-left: 16px
|
|
&.q-item__section--thumbnail
|
|
margin-left: 0
|
|
margin-right: -16px
|
|
.q-list
|
|
&--bordered
|
|
border: 1px solid $separator-color
|
|
&--separator
|
|
> .q-item-type + .q-item-type,
|
|
> .q-virtual-scroll__content > .q-item-type + .q-item-type
|
|
border-top: 1px solid $separator-color
|
|
&--padding
|
|
padding: 8px 0
|
|
.q-list--dense > .q-item, .q-item--dense
|
|
min-height: 32px
|
|
padding: 2px 16px
|
|
.q-list--dark.q-list--separator
|
|
> .q-item-type + .q-item-type,
|
|
> .q-virtual-scroll__content > .q-item-type + .q-item-type
|
|
border-top-color: $separator-dark-color
|
|
.q-list--dark, .q-item--dark
|
|
color: #fff
|
|
border-color: $separator-dark-color
|
|
.q-item__section--side:not(.q-item__section--avatar)
|
|
color: rgba(255,255,255,.7)
|
|
.q-item__label
|
|
&--header
|
|
color: rgba(255,255,255,.64)
|
|
&--overline, &--caption
|
|
color: rgba(255,255,255,.8)
|
|
.q-item
|
|
position: relative
|
|
&.q-router-link--active, &--active
|
|
color: var(--q-primary)
|
|
.q-knob
|
|
font-size: $knob-font-size
|
|
&--editable
|
|
cursor: pointer
|
|
outline: 0
|
|
&:before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
border-radius: 50%
|
|
box-shadow: none
|
|
transition: box-shadow .24s ease-in-out
|
|
&:focus:before
|
|
box-shadow: $shadow-2
|
|
body.body--dark .q-knob--editable:focus:before
|
|
box-shadow: $dark-shadow-2
|
|
.q-layout
|
|
width: 100%
|
|
outline: 0
|
|
.q-layout-container
|
|
position: relative
|
|
width: 100%
|
|
height: 100%
|
|
.q-layout
|
|
min-height: 100%
|
|
> div
|
|
transform: translate3d(0, 0, 0)
|
|
> div
|
|
min-height: 0
|
|
max-height: 100%
|
|
.q-layout__shadow
|
|
width: 100%
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
box-shadow: $layout-shadow
|
|
.q-layout__section--marginal
|
|
background-color: var(--q-primary)
|
|
color: #fff
|
|
.q-header
|
|
&--hidden
|
|
transform: translateY(-110%)
|
|
&--bordered
|
|
border-bottom: $layout-border
|
|
.q-layout__shadow
|
|
bottom: -10px
|
|
&:after
|
|
bottom: 10px
|
|
.q-footer
|
|
&--hidden
|
|
transform: translateY(110%)
|
|
&--bordered
|
|
border-top: $layout-border
|
|
.q-layout__shadow
|
|
top: -10px
|
|
&:after
|
|
top: 10px
|
|
.q-header, .q-footer
|
|
z-index: $z-marginals
|
|
.q-drawer
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
background: #fff
|
|
z-index: $z-side
|
|
&--on-top
|
|
z-index: $z-fixed-drawer
|
|
&--left
|
|
left: 0
|
|
transform: translateX(-100%)
|
|
&.q-drawer--bordered
|
|
border-right: $layout-border
|
|
.q-layout__shadow
|
|
left: 10px
|
|
right: -10px
|
|
&:after
|
|
right: 10px
|
|
&--right
|
|
right: 0
|
|
transform: translateX(100%)
|
|
&.q-drawer--bordered
|
|
border-left: $layout-border
|
|
.q-layout__shadow
|
|
left: -10px
|
|
&:after
|
|
left: 10px
|
|
&-container:not(&--mini-animate) &--mini
|
|
padding: 0 !important
|
|
.q-item, .q-item__section
|
|
text-align: center
|
|
justify-content: center
|
|
padding-left: 0
|
|
padding-right: 0
|
|
min-width: 0
|
|
.q-item__label, .q-item__section--main, .q-item__section--side ~ .q-item__section--side
|
|
display: none
|
|
&--mini
|
|
.q-mini-drawer-hide, .q-expansion-item__content
|
|
display: none
|
|
&--mini-animate &__content
|
|
overflow-x: hidden !important
|
|
white-space: nowrap
|
|
&--standard
|
|
.q-mini-drawer-only
|
|
display: none
|
|
&--mobile
|
|
.q-mini-drawer-only, .q-mini-drawer-hide
|
|
display: none
|
|
&__backdrop
|
|
z-index: ($z-fixed-drawer - 1) !important
|
|
will-change: background-color
|
|
&__opener
|
|
z-index: ($z-marginals + 1)
|
|
height: 100%
|
|
width: 15px
|
|
user-select: none
|
|
.q-layout, .q-header, .q-footer, .q-page
|
|
position: relative
|
|
.q-page-sticky--shrink
|
|
pointer-events: none
|
|
> div
|
|
display: inline-block
|
|
pointer-events: auto
|
|
body.q-ios-padding
|
|
.q-layout--standard .q-header > .q-toolbar:nth-child(1),
|
|
.q-layout--standard .q-header > .q-tabs:nth-child(1) .q-tabs__content,
|
|
.q-layout--standard .q-drawer--top-padding .q-drawer__content
|
|
padding-top: $ios-statusbar-height
|
|
min-height: ($toolbar-min-height + $ios-statusbar-height)
|
|
padding-top: env(safe-area-inset-top)
|
|
min-height: calc(env(safe-area-inset-top) + #{$toolbar-min-height})
|
|
.q-layout--standard .q-footer > .q-toolbar:last-child,
|
|
.q-layout--standard .q-footer > .q-tabs:nth-last-child(1 of :not(.q-layout__shadow)) .q-tabs__content,
|
|
.q-layout--standard .q-drawer--top-padding .q-drawer__content
|
|
padding-bottom: env(safe-area-inset-bottom)
|
|
min-height: calc(env(safe-area-inset-bottom) + #{$toolbar-min-height})
|
|
.q-body--layout-animate
|
|
.q-drawer__backdrop
|
|
transition: background-color .12s !important
|
|
.q-drawer
|
|
transition: transform .12s, width .12s, top .12s, bottom .12s !important
|
|
.q-layout__section--marginal
|
|
transition: transform .12s, left .12s, right .12s !important
|
|
.q-page-container
|
|
transition: padding-top .12s, padding-right .12s, padding-bottom .12s, padding-left .12s !important
|
|
.q-page-sticky
|
|
transition: transform .12s, left .12s, right .12s, top .12s, bottom .12s !important
|
|
body:not(.q-body--layout-animate)
|
|
.q-layout--prevent-focus
|
|
visibility: hidden
|
|
.q-body--drawer-toggle
|
|
overflow-x: hidden !important
|
|
.q-layout-padding
|
|
@media (max-width: $breakpoint-xs-max)
|
|
padding: 8px
|
|
@media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-md-max)
|
|
padding: 16px
|
|
@media (min-width: $breakpoint-lg-min)
|
|
padding: 24px
|
|
body.body--dark
|
|
.q-header, .q-footer, .q-drawer
|
|
border-color: $separator-dark-color
|
|
.q-layout__shadow:after
|
|
box-shadow: $layout-shadow-dark
|
|
body.platform-ios
|
|
.q-layout--containerized
|
|
|
|
|
|
|
|
position: unset !important
|
|
.q-linear-progress
|
|
--q-linear-progress-speed: .3s
|
|
position: relative
|
|
width: 100%
|
|
overflow: hidden
|
|
font-size: 4px
|
|
height: 1em
|
|
color: var(--q-primary)
|
|
transform: scale3d(1, 1, 1)
|
|
&__model, &__track
|
|
transform-origin: 0 0
|
|
&--with-transition
|
|
transition: transform var(--q-linear-progress-speed)
|
|
&--reverse
|
|
.q-linear-progress
|
|
&__model, &__track
|
|
transform-origin: 0 100%
|
|
&__model
|
|
&--determinate
|
|
background: currentColor
|
|
&--indeterminate, &--query
|
|
transition: none
|
|
&:before, &:after
|
|
background: currentColor
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
transform-origin: 0 0
|
|
&:before
|
|
animation: q-linear-progress--indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite
|
|
&:after
|
|
transform: translate3d(-101%, 0, 0) scale3d(1, 1, 1)
|
|
animation: q-linear-progress--indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite
|
|
animation-delay: 1.15s
|
|
&__track
|
|
opacity: .4
|
|
&--light
|
|
background: rgba(0,0,0,.26)
|
|
&--dark
|
|
background: rgba(255,255,255,.6)
|
|
&__stripe
|
|
background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
|
|
background-size: 40px 40px !important
|
|
&--with-transition
|
|
transition: width var(--q-linear-progress-speed)
|
|
@keyframes q-linear-progress--indeterminate
|
|
0%
|
|
transform: translate3d(-35%, 0, 0) scale3d(.35, 1, 1)
|
|
60%
|
|
transform: translate3d(100%, 0, 0) scale3d(.9, 1, 1)
|
|
100%
|
|
transform: translate3d(100%, 0, 0) scale3d(.9, 1, 1)
|
|
@keyframes q-linear-progress--indeterminate-short
|
|
0%
|
|
transform: translate3d(-101%, 0, 0) scale3d(1, 1, 1)
|
|
60%
|
|
transform: translate3d(107%, 0, 0) scale3d(.01, 1, 1)
|
|
100%
|
|
transform: translate3d(107%, 0, 0) scale3d(.01, 1, 1)
|
|
.q-menu
|
|
position: fixed !important
|
|
display: inline-block
|
|
max-width: $menu-max-width
|
|
max-height: $menu-max-height
|
|
box-shadow: $menu-box-shadow
|
|
background: $menu-background
|
|
border-radius: $generic-border-radius
|
|
overflow-y: auto
|
|
overflow-x: hidden
|
|
outline: 0
|
|
z-index: $z-menu
|
|
&--square
|
|
border-radius: 0
|
|
&--dark
|
|
box-shadow: $menu-box-shadow-dark
|
|
.q-option-group
|
|
&--inline
|
|
> div
|
|
display: inline-block
|
|
.q-pagination
|
|
input
|
|
text-align: center
|
|
-moz-appearance: textfield
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button
|
|
-webkit-appearance: none
|
|
margin: 0
|
|
&__content
|
|
--q-pagination-gutter-parent: -2px
|
|
--q-pagination-gutter-child: 2px
|
|
margin-top: var(--q-pagination-gutter-parent)
|
|
margin-left: var(--q-pagination-gutter-parent)
|
|
&__content > .q-btn,
|
|
&__content > .q-input,
|
|
&__middle > .q-btn
|
|
margin-top: var(--q-pagination-gutter-child)
|
|
margin-left: var(--q-pagination-gutter-child)
|
|
.q-parallax
|
|
position: relative
|
|
width: 100%
|
|
overflow: hidden
|
|
border-radius: inherit
|
|
.q-parallax__media
|
|
> img, > video
|
|
position: absolute
|
|
left: 50% #{"/* rtl:ignore */"}
|
|
bottom: 0
|
|
min-width: 100%
|
|
min-height: 100%
|
|
will-change: transform
|
|
display: none
|
|
.q-popup-edit
|
|
padding: 8px 16px
|
|
&__buttons
|
|
margin-top: 8px
|
|
.q-btn + .q-btn
|
|
margin-left: 8px
|
|
.q-pull-to-refresh
|
|
position: relative
|
|
&__puller
|
|
border-radius: 50%
|
|
width: 40px
|
|
height: 40px
|
|
color: var(--q-primary)
|
|
background: #fff
|
|
box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
|
|
&--animating
|
|
transition: transform .3s, opacity .3s
|
|
$radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
|
|
.q-radio
|
|
vertical-align: middle
|
|
&__native
|
|
width: 1px
|
|
height: 1px
|
|
&__bg,
|
|
&__icon-container
|
|
user-select: none
|
|
&__bg
|
|
top: 25%
|
|
left: 25%
|
|
width: 50%
|
|
height: 50%
|
|
-webkit-print-color-adjust: exact
|
|
path
|
|
fill: currentColor
|
|
&__icon
|
|
color: currentColor
|
|
font-size: .5em
|
|
&__check
|
|
transform-origin: 50% 50%
|
|
transform: scale3d(0, 0, 1)
|
|
transition: transform $radio-transition
|
|
&__inner
|
|
font-size: $radio-inner-font-size
|
|
width: 1em
|
|
min-width: 1em
|
|
height: 1em
|
|
outline: 0
|
|
border-radius: 50%
|
|
color: rgba(0,0,0,.54)
|
|
&--truthy
|
|
color: var(--q-primary)
|
|
.q-radio__check
|
|
transform: scale3d(1, 1, 1)
|
|
&.disabled
|
|
opacity: .75 !important
|
|
&--dark
|
|
.q-radio__inner
|
|
color: rgba(255,255,255,.7)
|
|
&:before
|
|
opacity: .32 !important
|
|
&--truthy
|
|
color: var(--q-primary)
|
|
&--dense
|
|
.q-radio__inner
|
|
width: .5em
|
|
min-width: .5em
|
|
height: .5em
|
|
.q-radio__bg
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
height: 100%
|
|
.q-radio__label
|
|
padding-left: .5em
|
|
&.reverse .q-radio__label
|
|
padding-left: 0
|
|
padding-right: .5em
|
|
body.desktop
|
|
.q-radio:not(.disabled)
|
|
.q-radio__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 $radio-transition
|
|
&:focus,
|
|
&:hover
|
|
.q-radio__inner:before
|
|
transform: scale3d(1, 1, 1)
|
|
.q-radio--dense:not(.disabled)
|
|
&:focus,
|
|
&:hover
|
|
.q-radio__inner:before
|
|
transform: scale3d(1.5, 1.5, 1)
|
|
.q-rating
|
|
color: $rating-grade-color
|
|
vertical-align: middle
|
|
&__icon-container
|
|
height: 1em
|
|
outline: 0
|
|
& + &
|
|
margin-left: 2px
|
|
&__icon
|
|
color: currentColor
|
|
text-shadow: $rating-shadow
|
|
position: relative
|
|
opacity: .4
|
|
transition: transform .2s ease-in, opacity .2s ease-in, color .2s ease-in
|
|
&--hovered
|
|
transform: scale(1.3)
|
|
&--active
|
|
opacity: 1
|
|
&--exselected
|
|
opacity: .7
|
|
&--no-dimming .q-rating__icon
|
|
opacity: 1
|
|
&--editable .q-rating__icon-container
|
|
cursor: pointer
|
|
.q-responsive
|
|
position: relative
|
|
max-width: 100%
|
|
max-height: 100%
|
|
&__filler
|
|
width: inherit
|
|
max-width: inherit
|
|
height: inherit
|
|
max-height: inherit
|
|
&__content
|
|
border-radius: inherit
|
|
> *
|
|
width: 100% !important
|
|
height: 100% !important
|
|
max-height: 100% !important
|
|
max-width: 100% !important
|
|
.q-scrollarea
|
|
position: relative
|
|
contain: strict
|
|
&__bar,
|
|
&__thumb
|
|
opacity: .2
|
|
transition: opacity .3s
|
|
will-change: opacity
|
|
cursor: grab
|
|
&--v
|
|
right: 0
|
|
width: 10px
|
|
&--h
|
|
bottom: 0
|
|
height: 10px
|
|
&--invisible
|
|
opacity: 0 !important
|
|
pointer-events: none
|
|
&__thumb
|
|
background: #000
|
|
border-radius: 3px
|
|
&:hover
|
|
opacity: .3
|
|
&:active
|
|
opacity: .5
|
|
&__content
|
|
min-height: 100%
|
|
min-width: 100%
|
|
&--dark .q-scrollarea__thumb
|
|
background: #fff
|
|
.q-select
|
|
&--without-input
|
|
.q-field__control
|
|
cursor: pointer
|
|
&--with-input
|
|
.q-field__control
|
|
cursor: text
|
|
.q-field__input
|
|
min-width: 50px !important
|
|
cursor: text
|
|
&--padding
|
|
padding-left: 4px
|
|
&__focus-target,
|
|
&__autocomplete-input
|
|
position: absolute
|
|
outline: 0 !important
|
|
width: 1px
|
|
height: 1px
|
|
padding: 0
|
|
border: 0
|
|
opacity: 0
|
|
&__dropdown-icon
|
|
cursor: pointer
|
|
transition: transform .28s
|
|
&.q-field--readonly
|
|
.q-field__control, .q-select__dropdown-icon
|
|
cursor: default
|
|
&__dialog
|
|
width: 90vw !important
|
|
max-width: 90vw !important
|
|
max-height: calc(100vh - 70px) !important
|
|
background: #fff
|
|
display: flex
|
|
flex-direction: column
|
|
> .scroll
|
|
position: relative
|
|
background: inherit
|
|
body.mobile:not(.native-mobile) .q-select__dialog
|
|
max-height: calc(100vh - 108px) !important
|
|
body.platform-android
|
|
&.native-mobile .q-dialog__inner--top .q-select__dialog
|
|
max-height: calc(100vh - 24px) !important
|
|
&:not(.native-mobile) .q-dialog__inner--top .q-select__dialog
|
|
max-height: calc(100vh - 80px) !important
|
|
body.platform-ios
|
|
&.native-mobile .q-dialog__inner--top
|
|
> div
|
|
border-radius: $generic-border-radius
|
|
.q-select__dialog--focused
|
|
max-height: 47vh !important
|
|
&:not(.native-mobile) .q-dialog__inner--top .q-select__dialog--focused
|
|
max-height: 50vh !important
|
|
.q-separator
|
|
border: 0
|
|
background: $separator-color
|
|
margin: 0
|
|
transition: background .3s, opacity .3s
|
|
flex-shrink: 0
|
|
&--dark
|
|
background: $separator-dark-color
|
|
&--horizontal
|
|
display: block
|
|
height: 1px
|
|
&-inset
|
|
margin-left: 16px
|
|
margin-right: 16px
|
|
&-item-inset
|
|
margin-left: 72px
|
|
margin-right: 0
|
|
&-item-thumbnail-inset
|
|
margin-left: 116px
|
|
margin-right: 0
|
|
&--vertical
|
|
width: 1px
|
|
height: auto
|
|
align-self: stretch
|
|
&-inset
|
|
margin-top: 8px
|
|
margin-bottom: 8px
|
|
.q-skeleton
|
|
--q-skeleton-speed: 1500ms
|
|
background: $separator-color
|
|
border-radius: $generic-border-radius
|
|
|
|
box-sizing: border-box
|
|
&--anim
|
|
cursor: wait
|
|
&:before
|
|
content: '\00a0'
|
|
&--type
|
|
&-text
|
|
transform: scale(1, .5)
|
|
&-circle,
|
|
&-QAvatar
|
|
height: 48px
|
|
width: 48px
|
|
border-radius: 50%
|
|
&-QBtn
|
|
width: 90px
|
|
height: 36px
|
|
&-QBadge
|
|
width: 70px
|
|
height: 16px
|
|
&-QChip
|
|
width: 90px
|
|
height: 28px
|
|
border-radius: 16px
|
|
&-QToolbar
|
|
height: 50px
|
|
&-QCheckbox,
|
|
&-QRadio
|
|
width: 40px
|
|
height: 40px
|
|
border-radius: 50%
|
|
&-QToggle
|
|
width: 56px
|
|
height: 40px
|
|
border-radius: 7px
|
|
&-QSlider,
|
|
&-QRange
|
|
height: 40px
|
|
&-QInput
|
|
height: 56px
|
|
&--bordered
|
|
border: 1px solid rgba(0,0,0,.05)
|
|
&--square
|
|
border-radius: 0
|
|
&--anim-fade
|
|
animation: q-skeleton--fade var(--q-skeleton-speed) linear .5s infinite
|
|
&--anim-pulse
|
|
animation: q-skeleton--pulse var(--q-skeleton-speed) ease-in-out .5s infinite
|
|
&--anim-pulse-x
|
|
animation: q-skeleton--pulse-x var(--q-skeleton-speed) ease-in-out .5s infinite
|
|
&--anim-pulse-y
|
|
animation: q-skeleton--pulse-y var(--q-skeleton-speed) ease-in-out .5s infinite
|
|
&--anim-wave,
|
|
&--anim-blink,
|
|
&--anim-pop
|
|
position: relative
|
|
overflow: hidden
|
|
z-index: 1
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
z-index: 0
|
|
&--anim-blink:after
|
|
background: rgba(255,255,255,.7)
|
|
animation: q-skeleton--fade var(--q-skeleton-speed) linear .5s infinite
|
|
&--anim-wave:after
|
|
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0))
|
|
animation: q-skeleton--wave var(--q-skeleton-speed) linear .5s infinite
|
|
&--dark
|
|
background: rgba(255, 255, 255, 0.05)
|
|
&.q-skeleton--bordered
|
|
border: 1px solid rgba(255,255,255,.25)
|
|
&.q-skeleton--anim-wave:after
|
|
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0))
|
|
&.q-skeleton--anim-blink:after
|
|
background: rgba(255,255,255,.2)
|
|
@keyframes q-skeleton--fade
|
|
0%
|
|
opacity: 1
|
|
50%
|
|
opacity: .4
|
|
100%
|
|
opacity: 1
|
|
@keyframes q-skeleton--pulse
|
|
0%
|
|
transform: scale(1)
|
|
50%
|
|
transform: scale(.85)
|
|
100%
|
|
transform: scale(1)
|
|
@keyframes q-skeleton--pulse-x
|
|
0%
|
|
transform: scaleX(1)
|
|
50%
|
|
transform: scaleX(.75)
|
|
100%
|
|
transform: scaleX(1)
|
|
@keyframes q-skeleton--pulse-y
|
|
0%
|
|
transform: scaleY(1)
|
|
50%
|
|
transform: scaleY(.75)
|
|
100%
|
|
transform: scaleY(1)
|
|
@keyframes q-skeleton--wave
|
|
0%
|
|
transform: translateX(-100%)
|
|
100%
|
|
transform: translateX(100%)
|
|
.q-slide-item
|
|
position: relative
|
|
background: white
|
|
&__left, &__right, &__top, &__bottom
|
|
visibility: hidden
|
|
font-size: $slide-item-active-text-font-size
|
|
color: #fff
|
|
.q-icon
|
|
font-size: $slide-item-active-icon-font-size
|
|
&__left
|
|
background: $green
|
|
padding: 8px 16px
|
|
> div
|
|
transform-origin: left center
|
|
&__right
|
|
background: $orange
|
|
padding: 8px 16px
|
|
> div
|
|
transform-origin: right center
|
|
&__top
|
|
background: $blue
|
|
padding: 16px 8px
|
|
> div
|
|
transform-origin: top center
|
|
&__bottom
|
|
background: $purple
|
|
padding: 16px 8px
|
|
> div
|
|
transform-origin: bottom center
|
|
&__content
|
|
background: inherit
|
|
transition: transform .2s ease-in
|
|
user-select: none
|
|
cursor: pointer
|
|
.q-slider
|
|
position: relative
|
|
&--h
|
|
width: 100%
|
|
&--v
|
|
height: 200px
|
|
&--editable .q-slider__track-container
|
|
cursor: grab
|
|
&__track-container
|
|
outline: 0
|
|
&--h
|
|
width: 100%
|
|
padding: 12px 0
|
|
.q-slider__selection
|
|
will-change: width, left
|
|
&--v
|
|
height: 100%
|
|
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
|
|
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
|
|
background: currentColor
|
|
&--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
|
|
&.q-slider--focus
|
|
opacity: 1 !important
|
|
&--h
|
|
top: 50%
|
|
will-change: left
|
|
&-ltr
|
|
transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
|
|
&-rtl
|
|
transform: scale(1) translate(50%,-50%) #{"/* rtl:ignore */"}
|
|
&--v
|
|
left: 50% #{"/* rtl:ignore */"}
|
|
will-change: top
|
|
&-ltr
|
|
transform: scale(1) translate(-50%,-50%) #{"/* rtl:ignore */"}
|
|
&-rtl
|
|
transform: scale(1) translate(-50%,50%) #{"/* rtl:ignore */"}
|
|
&__thumb-shape
|
|
top: 0
|
|
left: 0
|
|
stroke-width: 3.5
|
|
stroke: currentColor
|
|
transition: transform .28s
|
|
path
|
|
stroke: currentColor
|
|
fill: currentColor
|
|
&__focus-ring
|
|
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
|
|
&__pin
|
|
opacity: 0
|
|
white-space: nowrap
|
|
transition: opacity .28s ease-out
|
|
transition-delay: .14s
|
|
&:before
|
|
content: ''
|
|
width: 0
|
|
height: 0
|
|
position: absolute
|
|
&--h
|
|
&: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: 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
|
|
left: 50%
|
|
transform: translateX(-50%)
|
|
&-standard
|
|
bottom: 7px
|
|
&-switched
|
|
top: 7px
|
|
&--v
|
|
top: 50%
|
|
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: $slider-text-font-size
|
|
&--no-value
|
|
.q-slider__thumb,
|
|
.q-slider__inner,
|
|
.q-slider__selection
|
|
opacity: 0
|
|
&--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__inner,
|
|
.q-slider__selection
|
|
opacity: 1
|
|
&--inactive
|
|
.q-slider__thumb
|
|
&--h
|
|
transition: left .28s, right .28s
|
|
&--v
|
|
transition: 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-shape
|
|
transform: scale(1.5)
|
|
.q-slider__focus-ring,
|
|
&.q-slider--label .q-slider__thumb-shape
|
|
transform: scale(0) !important
|
|
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
|
|
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
|
|
&--h
|
|
padding: 6px 0
|
|
&--v
|
|
padding: 0 6px
|
|
.q-space
|
|
flex-grow: 1 !important
|
|
.q-spinner
|
|
vertical-align: middle
|
|
.q-spinner-mat
|
|
animation: q-spin 2s linear infinite
|
|
transform-origin: center center
|
|
.path
|
|
stroke-dasharray: 1, 200 #{"/* rtl:ignore */"}
|
|
stroke-dashoffset: 0 #{"/* rtl:ignore */"}
|
|
animation: q-mat-dash 1.5s ease-in-out infinite
|
|
@keyframes q-spin
|
|
0%
|
|
transform: rotate3d(0, 0, 1, 0deg) #{"/* rtl:ignore */"}
|
|
25%
|
|
transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}
|
|
50%
|
|
transform: rotate3d(0, 0, 1, 180deg) #{"/* rtl:ignore */"}
|
|
75%
|
|
transform: rotate3d(0, 0, 1, 270deg) #{"/* rtl:ignore */"}
|
|
100%
|
|
transform: rotate3d(0, 0, 1, 359deg) #{"/* rtl:ignore */"}
|
|
@keyframes q-mat-dash
|
|
0%
|
|
stroke-dasharray: 1, 200
|
|
stroke-dashoffset: 0
|
|
50%
|
|
stroke-dasharray: 89, 200
|
|
stroke-dashoffset: -35px
|
|
100%
|
|
stroke-dasharray: 89, 200
|
|
stroke-dashoffset: -124px
|
|
.q-splitter
|
|
&__panel
|
|
position: relative
|
|
z-index: 0
|
|
> .q-splitter
|
|
width: 100%
|
|
height: 100%
|
|
&__separator
|
|
background-color: $separator-color
|
|
user-select: none
|
|
position: relative
|
|
z-index: 1
|
|
&__separator-area > *
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
&--dark
|
|
.q-splitter__separator
|
|
background-color: $separator-dark-color
|
|
&--vertical
|
|
> .q-splitter__panel
|
|
height: 100%
|
|
&.q-splitter--active
|
|
cursor: col-resize
|
|
> .q-splitter__separator
|
|
width: 1px
|
|
> div
|
|
left: -6px
|
|
right: -6px
|
|
&.q-splitter--workable > .q-splitter__separator
|
|
cursor: col-resize
|
|
&--horizontal
|
|
> .q-splitter__panel
|
|
width: 100%
|
|
&.q-splitter--active
|
|
cursor: row-resize
|
|
> .q-splitter__separator
|
|
height: 1px
|
|
> div
|
|
top: -6px
|
|
bottom: -6px
|
|
&.q-splitter--workable > .q-splitter__separator
|
|
cursor: row-resize
|
|
&__before, &__after
|
|
overflow: auto
|
|
.q-stepper
|
|
box-shadow: $shadow-2
|
|
border-radius: $generic-border-radius
|
|
background: #fff
|
|
&__title
|
|
font-size: $stepper-title-font-size
|
|
line-height: $stepper-title-line-height
|
|
letter-spacing: $stepper-title-letter-spacing
|
|
&__caption
|
|
font-size: $stepper-caption-font-size
|
|
line-height: $stepper-caption-line-height
|
|
&__dot
|
|
contain: layout
|
|
margin-right: 8px
|
|
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
|
|
span
|
|
color: #fff
|
|
&__tab
|
|
padding: 8px 24px
|
|
font-size: $stepper-tab-font-size
|
|
color: $grey
|
|
flex-direction: row
|
|
&--dark
|
|
box-shadow: $dark-shadow-2
|
|
.q-stepper__dot span
|
|
color: #000
|
|
&__tab
|
|
&--navigation
|
|
user-select: none
|
|
cursor: pointer
|
|
&--active, &--done
|
|
color: var(--q-primary)
|
|
.q-stepper__dot, .q-stepper__label
|
|
text-shadow: 0 0 0 currentColor
|
|
&--disabled
|
|
.q-stepper__dot
|
|
background: rgba(0,0,0,.22)
|
|
.q-stepper__label
|
|
color: rgba(0,0,0,.32)
|
|
&--error
|
|
color: var(--q-negative)
|
|
&--error-with-icon
|
|
.q-stepper__dot
|
|
background: transparent !important
|
|
span
|
|
color: currentColor
|
|
font-size: $stepper-dot-error-with-icon-font-size
|
|
&__header
|
|
border-top-left-radius: inherit
|
|
border-top-right-radius: inherit
|
|
&--border
|
|
border-bottom: 1px solid $separator-color
|
|
&--standard-labels
|
|
.q-stepper__tab
|
|
min-height: 72px
|
|
justify-content: center
|
|
&:first-child
|
|
justify-content: flex-start
|
|
&:last-child
|
|
justify-content: flex-end
|
|
&:only-child
|
|
justify-content: center
|
|
.q-stepper__dot:after
|
|
display: none
|
|
&--alternative-labels
|
|
.q-stepper__tab
|
|
min-height: 104px
|
|
padding: 24px 32px
|
|
flex-direction: column
|
|
justify-content: flex-start
|
|
.q-stepper__dot
|
|
margin-right: 0
|
|
.q-stepper__label
|
|
margin-top: 8px
|
|
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
|
|
&--flat
|
|
box-shadow: none
|
|
&--bordered
|
|
border: 1px solid $separator-color
|
|
&--horizontal
|
|
.q-stepper__step-inner
|
|
padding: 24px
|
|
.q-stepper__tab:first-child
|
|
border-top-left-radius: inherit
|
|
.q-stepper__tab:last-child
|
|
border-top-right-radius: inherit
|
|
.q-stepper__tab:first-child .q-stepper__dot:before,
|
|
.q-stepper__tab:last-child .q-stepper__label:after,
|
|
.q-stepper__tab:last-child .q-stepper__dot:after
|
|
display: none
|
|
.q-stepper__tab
|
|
overflow: hidden
|
|
.q-stepper__line
|
|
contain: layout
|
|
&:before, &:after
|
|
position: absolute
|
|
top: 50%
|
|
height: 1px
|
|
width: 100vw
|
|
background: $separator-color
|
|
.q-stepper__label:after, .q-stepper__dot:after
|
|
content: ''
|
|
left: 100%
|
|
margin-left: 8px
|
|
.q-stepper__dot:before
|
|
content: ''
|
|
right: 100%
|
|
margin-right: 8px
|
|
> .q-stepper__nav
|
|
padding: 0 24px 24px
|
|
&--vertical
|
|
padding: 16px 0
|
|
.q-stepper__tab
|
|
padding: 12px 24px
|
|
.q-stepper__title
|
|
line-height: 18px
|
|
.q-stepper__step-inner
|
|
padding: 0 24px 32px 60px
|
|
> .q-stepper__nav
|
|
padding: 24px 24px 0
|
|
.q-stepper__step
|
|
overflow: hidden
|
|
.q-stepper__dot
|
|
margin-right: 12px
|
|
&:before, &:after
|
|
content: ''
|
|
position: absolute
|
|
left: 50%
|
|
width: 1px
|
|
height: 99999px
|
|
background: $separator-color
|
|
.q-stepper__dot:before
|
|
bottom: 100%
|
|
margin-bottom: 8px
|
|
.q-stepper__dot:after
|
|
top: 100%
|
|
margin-top: 8px
|
|
.q-stepper__step:first-child .q-stepper__dot:before,
|
|
.q-stepper__step:last-child .q-stepper__dot:after
|
|
display: none
|
|
.q-stepper__step:last-child .q-stepper__step-inner
|
|
padding-bottom: 8px
|
|
&--dark
|
|
&.q-stepper--bordered,
|
|
.q-stepper__header--border
|
|
border-color: $separator-dark-color
|
|
&.q-stepper--horizontal
|
|
.q-stepper__line
|
|
&:before, &:after
|
|
background: $separator-dark-color
|
|
&.q-stepper--vertical
|
|
.q-stepper__dot
|
|
&:before, &:after
|
|
background: $separator-dark-color
|
|
.q-stepper__tab
|
|
&--disabled
|
|
color: $separator-dark-color
|
|
.q-stepper__dot
|
|
background: $separator-dark-color
|
|
.q-stepper__label
|
|
color: rgba(255,255,255,.54)
|
|
.q-tab-panels
|
|
background: #fff
|
|
.q-tab-panel
|
|
padding: 16px
|
|
.q-markup-table
|
|
overflow: auto
|
|
background: #fff
|
|
.q-table
|
|
width: 100%
|
|
max-width: 100%
|
|
border-collapse: separate
|
|
border-spacing: 0
|
|
thead tr, tbody td
|
|
height: 48px
|
|
th
|
|
font-weight: 500
|
|
font-size: $table-th-font-size
|
|
user-select: none
|
|
&.sortable
|
|
cursor: pointer
|
|
&:hover .q-table__sort-icon
|
|
opacity: .64
|
|
&.sorted .q-table__sort-icon
|
|
opacity: .86 !important
|
|
&.sort-desc .q-table__sort-icon
|
|
transform: rotate(180deg)
|
|
th, td
|
|
padding: 7px 16px
|
|
background-color: inherit
|
|
thead, td, th
|
|
border-style: solid
|
|
border-width: 0
|
|
tbody td
|
|
font-size: $table-tbody-td-font-size
|
|
&__card
|
|
color: #000
|
|
background-color: #fff
|
|
border-radius: $table-border-radius
|
|
box-shadow: $table-box-shadow
|
|
.q-table__middle
|
|
flex: 1 1 auto
|
|
.q-table__top,
|
|
.q-table__bottom
|
|
flex: 0 0 auto
|
|
&__container
|
|
position: relative
|
|
> div:first-child
|
|
border-top-left-radius: inherit
|
|
border-top-right-radius: inherit
|
|
> div:last-child
|
|
border-bottom-left-radius: inherit
|
|
border-bottom-right-radius: inherit
|
|
> .q-inner-loading
|
|
border-radius: inherit !important
|
|
&__top
|
|
padding: 12px 16px
|
|
.q-table__control
|
|
flex-wrap: wrap
|
|
&__title
|
|
font-size: $table-title-font-size
|
|
letter-spacing: .005em
|
|
font-weight: 400
|
|
&__separator
|
|
min-width: 8px !important
|
|
&__progress
|
|
height: 0 !important
|
|
th
|
|
padding: 0 !important
|
|
border: 0 !important
|
|
.q-linear-progress
|
|
position: absolute
|
|
bottom: 0
|
|
&__middle
|
|
max-width: 100%
|
|
&__bottom
|
|
min-height: 50px
|
|
padding: 4px 14px 4px 16px
|
|
font-size: $table-bottom-font-size
|
|
.q-table__control
|
|
min-height: 24px
|
|
&__bottom-nodata-icon
|
|
font-size: $table-nodata-icon-font-size
|
|
margin-right: 8px
|
|
&__bottom-item
|
|
margin-right: 16px
|
|
&__control
|
|
display: flex
|
|
align-items: center
|
|
&__sort-icon
|
|
transition: transform $table-transition
|
|
opacity: 0
|
|
font-size: $table-sort-icon-font-size
|
|
&--left, &--center
|
|
margin-left: 4px
|
|
&--right
|
|
margin-right: 4px
|
|
&--col-auto-width
|
|
width: 1px
|
|
.q-table__card--dark,
|
|
.q-table--dark
|
|
box-shadow: $table-box-shadow-dark
|
|
.q-table
|
|
&--flat
|
|
box-shadow: none
|
|
&--bordered
|
|
border: 1px solid $table-border-color
|
|
&--square
|
|
border-radius: 0
|
|
&__linear-progress
|
|
height: 2px
|
|
&--no-wrap
|
|
th, td
|
|
white-space: nowrap
|
|
&--grid
|
|
box-shadow: none
|
|
border-radius: $generic-border-radius
|
|
.q-table__top
|
|
padding-bottom: 4px
|
|
.q-table__middle
|
|
min-height: 2px
|
|
margin-bottom: 4px
|
|
thead
|
|
&, th
|
|
border: 0 !important
|
|
.q-table__linear-progress
|
|
bottom: 0
|
|
.q-table__bottom
|
|
border-top: 0
|
|
.q-table__grid-content
|
|
flex: 1 1 auto
|
|
&.fullscreen
|
|
background: inherit
|
|
&__grid-item-card
|
|
vertical-align: top
|
|
padding: 12px
|
|
.q-separator
|
|
margin: 12px 0
|
|
&__grid-item-row + &__grid-item-row
|
|
margin-top: 8px
|
|
&__grid-item-title
|
|
opacity: .54
|
|
font-weight: 500
|
|
font-size: $table-grid-item-title-font-size
|
|
&__grid-item-value
|
|
font-size: $table-grid-item-value-font-size
|
|
&__grid-item
|
|
padding: 4px
|
|
transition: transform $table-transition
|
|
&--selected
|
|
transform: scale(.95)
|
|
.q-table--horizontal-separator, .q-table--cell-separator
|
|
thead th, tbody tr:not(:last-child) > td
|
|
border-bottom-width: 1px
|
|
.q-table--vertical-separator, .q-table--cell-separator
|
|
td, th
|
|
border-left-width: 1px
|
|
thead tr:last-child th,
|
|
&.q-table--loading tr:nth-last-child(2) th
|
|
border-bottom-width: 1px
|
|
td:first-child, th:first-child
|
|
border-left: 0
|
|
.q-table__top
|
|
border-bottom: 1px solid $table-border-color
|
|
.q-table--dense
|
|
.q-table__top
|
|
padding: 6px 16px
|
|
.q-table__bottom
|
|
min-height: 33px
|
|
.q-table__sort-icon
|
|
font-size: $table-dense-sort-icon-font-size
|
|
.q-table
|
|
th, td
|
|
padding: 4px 8px
|
|
thead tr, tbody tr, tbody td
|
|
height: 28px
|
|
th:first-child, td:first-child
|
|
padding-left: 16px
|
|
th:last-child, td:last-child
|
|
padding-right: 16px
|
|
.q-table__bottom-item
|
|
margin-right: 8px
|
|
.q-table__select
|
|
.q-field__control, .q-field__native
|
|
min-height: 24px
|
|
padding: 0
|
|
.q-field__marginal
|
|
height: 24px
|
|
.q-table__bottom
|
|
&:not(&--nodata)
|
|
border-top: 1px solid $table-border-color
|
|
.q-table
|
|
thead, tr, th, td
|
|
border-color: $table-border-color
|
|
tbody
|
|
td
|
|
position: relative
|
|
&:before, &:after
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
pointer-events: none
|
|
&:before
|
|
background: $table-hover-background
|
|
&:after
|
|
background: $table-selected-background
|
|
tr.selected td:after
|
|
content: ''
|
|
body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no-hover):before
|
|
content: ''
|
|
.q-table__card--dark,
|
|
.q-table--dark
|
|
border-color: $table-dark-border-color
|
|
.q-table--dark
|
|
.q-table__bottom, thead, tr, th, td
|
|
border-color: $table-dark-border-color
|
|
tbody
|
|
td
|
|
&:before
|
|
background: $table-dark-hover-background
|
|
&:after
|
|
background: $table-dark-selected-background
|
|
&.q-table--vertical-separator, &.q-table--cell-separator
|
|
.q-table__top
|
|
border-color: $table-dark-border-color
|
|
.q-tab
|
|
padding: 0 16px
|
|
min-height: 48px
|
|
transition: color .3s, background-color .3s
|
|
text-transform: uppercase
|
|
white-space: nowrap
|
|
|
|
color: inherit
|
|
text-decoration: none
|
|
&--full
|
|
min-height: 72px
|
|
&--no-caps
|
|
text-transform: none
|
|
&__content
|
|
height: inherit
|
|
padding: 4px 0
|
|
min-width: 40px
|
|
&--inline
|
|
.q-tab__icon + .q-tab__label
|
|
padding-left: 8px
|
|
.q-chip--floating
|
|
top: 0
|
|
right: -16px
|
|
&__icon
|
|
width: $tabs-icon-font-width
|
|
height: $tabs-icon-font-height
|
|
font-size: $tabs-icon-font-size
|
|
&__label
|
|
font-size: $button-font-size
|
|
line-height: $button-line-height
|
|
font-weight: $button-font-weight
|
|
.q-badge
|
|
top: 3px
|
|
right: -12px
|
|
&__alert, &__alert-icon
|
|
position: absolute
|
|
&__alert
|
|
top: 7px
|
|
right: -9px
|
|
height: 10px
|
|
width: 10px
|
|
border-radius: 50%
|
|
background: currentColor
|
|
&__alert-icon
|
|
top: 2px
|
|
right: -12px
|
|
font-size: $tabs-alert-icon-font-size
|
|
&__indicator
|
|
opacity: 0
|
|
height: 2px
|
|
background: currentColor
|
|
&--active .q-tab__indicator
|
|
opacity: 1
|
|
transform-origin: left #{"/* rtl:ignore */"}
|
|
&--inactive
|
|
opacity: .85
|
|
.q-tabs
|
|
position: relative
|
|
transition: color .3s, background-color .3s
|
|
&--scrollable
|
|
&.q-tabs__arrows--outside
|
|
&.q-tabs--horizontal
|
|
padding-left: 36px
|
|
padding-right: 36px
|
|
&.q-tabs--vertical
|
|
padding-top: 36px
|
|
padding-bottom: 36px
|
|
.q-tabs__arrow--faded
|
|
opacity: 0.3
|
|
pointer-events: none
|
|
&.q-tabs__arrows--inside
|
|
.q-tabs__arrow--faded
|
|
display: none
|
|
&--not-scrollable,
|
|
body.mobile &--scrollable.q-tabs--mobile-without-arrows
|
|
&.q-tabs__arrows--outside
|
|
padding-left: 0
|
|
padding-right: 0
|
|
.q-tabs__arrow
|
|
display: none
|
|
.q-tabs__content
|
|
border-radius: inherit
|
|
&__arrow
|
|
cursor: pointer
|
|
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
|
|
&__content
|
|
overflow: hidden
|
|
flex: 1 1 auto
|
|
&--align
|
|
&-center
|
|
justify-content: center
|
|
&-right
|
|
justify-content: flex-end
|
|
&-justify .q-tab
|
|
flex: 1 1 auto
|
|
&__offset
|
|
display: none
|
|
&--horizontal .q-tabs__arrow
|
|
height: 100%
|
|
&--left
|
|
top: 0
|
|
left: 0 #{"/* rtl:ignore */"}
|
|
bottom: 0
|
|
&--right
|
|
top: 0
|
|
right: 0 #{"/* rtl:ignore */"}
|
|
bottom: 0
|
|
&--vertical
|
|
display: block !important
|
|
height: 100%
|
|
.q-tabs__content
|
|
display: block !important
|
|
height: 100%
|
|
.q-tabs__arrow
|
|
width: 100%
|
|
height: 36px
|
|
text-align: center
|
|
&--left
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
&--right
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
.q-tab
|
|
padding: 0 8px
|
|
.q-tab__indicator
|
|
height: unset
|
|
width: 2px
|
|
&--vertical.q-tabs--not-scrollable
|
|
.q-tabs__content
|
|
height: 100%
|
|
&--vertical.q-tabs--dense
|
|
.q-tab__content
|
|
min-width: 24px
|
|
&--dense
|
|
.q-tab
|
|
min-height: 36px
|
|
&--full
|
|
min-height: 52px
|
|
.q-time
|
|
box-shadow: $shadow-2
|
|
border-radius: $generic-border-radius
|
|
background: #fff
|
|
outline: 0
|
|
width: 290px
|
|
min-width: 290px
|
|
max-width: 100%
|
|
&--bordered
|
|
border: 1px solid $separator-color
|
|
&__header
|
|
border-top-left-radius: inherit
|
|
color: #fff
|
|
background-color: var(--q-primary)
|
|
padding: 16px
|
|
font-weight: 300
|
|
&__actions
|
|
padding: 0 16px 16px
|
|
&__header-label
|
|
font-size: $time-header-label-font-size
|
|
line-height: 1
|
|
letter-spacing: -.00833em
|
|
> div + div
|
|
margin-left: 4px
|
|
&__link
|
|
opacity: .56
|
|
outline: 0
|
|
transition: opacity .3s ease-out
|
|
&--active, &:hover, &:focus
|
|
opacity: 1
|
|
&__header-ampm
|
|
font-size: 16px
|
|
letter-spacing: .1em
|
|
&__content
|
|
padding: 16px
|
|
&:before
|
|
content: ''
|
|
display: block
|
|
padding-bottom: 100%
|
|
&__container-parent
|
|
padding: 16px
|
|
&__container-child
|
|
border-radius: 50%
|
|
background: rgba(0,0,0,.12)
|
|
&__clock
|
|
padding: 24px
|
|
width: 100%
|
|
height: 100%
|
|
max-width: 100%
|
|
max-height: 100%
|
|
font-size: 14px
|
|
&__clock-circle
|
|
position: relative
|
|
&__clock-center
|
|
height: 6px
|
|
width: 6px
|
|
margin: auto
|
|
border-radius: 50%
|
|
min-height: 0
|
|
background: currentColor
|
|
&__clock-pointer
|
|
width: 2px
|
|
height: 50%
|
|
transform-origin: 0 0 #{"/* rtl:ignore */"}
|
|
min-height: 0
|
|
position: absolute
|
|
left: 50%
|
|
right: 0
|
|
bottom: 0
|
|
color: var(--q-primary)
|
|
background: currentColor
|
|
transform: translateX(-50%)
|
|
&:before, &:after
|
|
content: ''
|
|
position: absolute
|
|
left: 50%
|
|
border-radius: 50%
|
|
background: currentColor
|
|
transform: translateX(-50%)
|
|
&:before
|
|
bottom: -4px
|
|
width: 8px
|
|
height: 8px
|
|
&:after
|
|
top: -3px
|
|
height: 6px
|
|
width: 6px
|
|
&__clock-position
|
|
position: absolute
|
|
min-height: 32px
|
|
width: 32px
|
|
height: 32px
|
|
font-size: $time-clock-position-font-size
|
|
line-height: 32px
|
|
margin: 0
|
|
padding: 0
|
|
transform: translate(-50%, -50%) #{"/* rtl:ignore */"}
|
|
border-radius: 50%
|
|
&--disable
|
|
opacity: .4
|
|
&--active
|
|
background-color: var(--q-primary)
|
|
color: #fff
|
|
@for $pos from 0 through 11
|
|
$angle: (270 + 30 * $pos)
|
|
$top: (1 + sin($angle))
|
|
$left: (1 + cos($angle))
|
|
&__clock-pos-#{$pos}
|
|
top: toFixed(math.percentage($top * 0.5), 100)
|
|
left: toFixed(math.percentage($left * 0.5), 100) #{"/* rtl:ignore */"}
|
|
@for $pos from 12 through 23
|
|
$angle: (270 + 30 * $pos)
|
|
$top: (1 + sin($angle))
|
|
$left: (1 + cos($angle))
|
|
&__clock-pos-#{$pos}
|
|
top: toFixed(math.percentage(.15 + $top * .35), 100)
|
|
left: toFixed(math.percentage(.15 + $left * .35), 100) #{"/* rtl:ignore */"}
|
|
&__now-button
|
|
background-color: var(--q-primary)
|
|
color: #fff
|
|
top: 12px
|
|
right: 12px
|
|
&.disabled, &--readonly
|
|
.q-time__header-ampm, .q-time__content
|
|
pointer-events: none
|
|
&--portrait
|
|
display: inline-flex
|
|
flex-direction: column
|
|
.q-time__header
|
|
border-top-right-radius: inherit
|
|
min-height: 86px
|
|
.q-time__header-ampm
|
|
margin-left: 12px
|
|
&.q-time--bordered .q-time__content
|
|
margin: 1px 0
|
|
&--landscape
|
|
display: inline-flex
|
|
align-items: stretch
|
|
min-width: 420px
|
|
> div
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
.q-time__header
|
|
border-bottom-left-radius: inherit
|
|
min-width: 156px
|
|
.q-time__header-ampm
|
|
margin-top: 12px
|
|
&--dark
|
|
border-color: $separator-dark-color
|
|
box-shadow: $dark-shadow-2
|
|
.q-timeline
|
|
padding: 0
|
|
width: 100%
|
|
list-style: none
|
|
h6
|
|
line-height: inherit
|
|
&--dark
|
|
color: #fff
|
|
.q-timeline__subtitle
|
|
opacity: .7
|
|
&__content
|
|
padding-bottom: 24px
|
|
&__title
|
|
margin-top: 0
|
|
margin-bottom: 16px
|
|
&__subtitle
|
|
font-size: $timeline-subtitle-font-size
|
|
margin-bottom: 8px
|
|
opacity: .6
|
|
text-transform: uppercase
|
|
letter-spacing: $timeline-subtitle-letter-spacing
|
|
font-weight: 700
|
|
&__dot
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
width: 15px
|
|
&:before, &:after
|
|
content: ''
|
|
background: currentColor
|
|
display: block
|
|
position: absolute
|
|
&:before
|
|
border: 3px solid transparent
|
|
border-radius: 100%
|
|
height: 15px
|
|
width: 15px
|
|
top: 4px
|
|
left: 0
|
|
transition: background .3s ease-in-out, border .3s ease-in-out
|
|
&:after
|
|
width: 3px
|
|
opacity: .4
|
|
top: 24px
|
|
bottom: 0
|
|
left: 6px
|
|
.q-icon
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
font-size: $timeline-dot-icon-font-size
|
|
height: 38px
|
|
line-height: 38px
|
|
width: 100%
|
|
color: #fff
|
|
> svg,
|
|
> img
|
|
width: 1em
|
|
height: 1em
|
|
&__dot-img
|
|
position: absolute
|
|
top: 4px
|
|
left: 0
|
|
right: 0
|
|
height: 31px
|
|
width: 31px
|
|
background: currentColor
|
|
border-radius: 50%
|
|
&__heading
|
|
position: relative
|
|
&:first-child .q-timeline__heading-title
|
|
padding-top: 0
|
|
&:last-child .q-timeline__heading-title
|
|
padding-bottom: 0
|
|
&__heading-title
|
|
padding: 32px 0
|
|
margin: 0
|
|
&__entry
|
|
position: relative
|
|
line-height: 22px
|
|
&:last-child
|
|
padding-bottom: 0 !important
|
|
.q-timeline__dot:after
|
|
content: none
|
|
&--icon
|
|
.q-timeline__dot
|
|
width: 31px
|
|
&:before
|
|
height: 31px
|
|
width: 31px
|
|
&:after
|
|
top: 41px
|
|
left: 14px
|
|
.q-timeline__subtitle
|
|
padding-top: 8px
|
|
&--dense--right
|
|
.q-timeline
|
|
&__entry
|
|
padding-left: 40px
|
|
&--icon .q-timeline__dot
|
|
left: -8px
|
|
&__dot
|
|
left: 0
|
|
&--dense--left
|
|
.q-timeline
|
|
&__heading
|
|
text-align: right
|
|
&__entry
|
|
padding-right: 40px
|
|
&--icon .q-timeline__dot
|
|
right: -8px
|
|
&__content,
|
|
&__title,
|
|
&__subtitle
|
|
text-align: right
|
|
&__dot
|
|
right: 0
|
|
&--comfortable
|
|
display: table
|
|
.q-timeline
|
|
&__heading
|
|
display: table-row
|
|
font-size: $timeline-comfortable-heading-font-size
|
|
> div
|
|
display: table-cell
|
|
&__entry
|
|
display: table-row
|
|
padding: 0
|
|
&--icon .q-timeline__content
|
|
padding-top: 8px
|
|
&__subtitle, &__dot, &__content
|
|
display: table-cell
|
|
vertical-align: top
|
|
&__subtitle
|
|
width: 35%
|
|
&__dot
|
|
position: relative
|
|
min-width: 31px
|
|
&--comfortable--right
|
|
.q-timeline
|
|
&__heading
|
|
.q-timeline__heading-title
|
|
margin-left: -50px
|
|
&__subtitle
|
|
text-align: right
|
|
padding-right: 30px
|
|
&__content
|
|
padding-left: 30px
|
|
&__entry--icon .q-timeline__dot
|
|
left: -8px
|
|
&--comfortable--left
|
|
.q-timeline
|
|
&__heading
|
|
text-align: right
|
|
.q-timeline__heading-title
|
|
margin-right: -50px
|
|
&__subtitle
|
|
padding-left: 30px
|
|
&__content
|
|
padding-right: 30px
|
|
&__content,
|
|
&__title
|
|
text-align: right
|
|
&__entry--icon .q-timeline__dot
|
|
right: 0
|
|
&__dot
|
|
right: -8px
|
|
&--loose
|
|
.q-timeline
|
|
&__heading-title
|
|
text-align: center
|
|
margin-left: 0
|
|
&__entry, &__subtitle, &__dot, &__content
|
|
display: block
|
|
margin: 0
|
|
padding: 0
|
|
&__dot
|
|
position: absolute
|
|
left: 50%
|
|
margin-left: -7.15px
|
|
&__entry
|
|
padding-bottom: 24px
|
|
overflow: hidden
|
|
&--icon
|
|
.q-timeline__dot
|
|
margin-left: -15px
|
|
.q-timeline__subtitle
|
|
line-height: 38px
|
|
.q-timeline__content
|
|
padding-top: 8px
|
|
&--left .q-timeline__content,
|
|
&--right .q-timeline__subtitle
|
|
float: left
|
|
padding-right: 30px
|
|
text-align: right
|
|
&--left .q-timeline__subtitle,
|
|
&--right .q-timeline__content
|
|
float: right
|
|
text-align: left
|
|
padding-left: 30px
|
|
&__subtitle, &__content
|
|
width: 50%
|
|
$toggle-transition: .22s cubic-bezier(.4,0,.2,1)
|
|
.q-toggle
|
|
vertical-align: middle
|
|
&__native
|
|
width: 1px
|
|
height: 1px
|
|
&__track
|
|
height: .35em
|
|
border-radius: .175em
|
|
opacity: .38
|
|
background: currentColor
|
|
&__thumb
|
|
top: .25em
|
|
left: .25em
|
|
width: .5em
|
|
height: .5em
|
|
transition: left $toggle-transition
|
|
user-select: none
|
|
z-index: 0
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
border-radius: 50%
|
|
background: #fff
|
|
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)
|
|
.q-icon
|
|
font-size: .3em
|
|
min-width: 1em
|
|
color: #000
|
|
opacity: .54
|
|
z-index: 1
|
|
&__inner
|
|
font-size: 40px
|
|
width: 1.4em
|
|
min-width: 1.4em
|
|
height: 1em
|
|
padding: .325em .3em
|
|
-webkit-print-color-adjust: exact
|
|
&--indet
|
|
.q-toggle__thumb
|
|
left: .45em
|
|
&--truthy
|
|
color: var(--q-primary)
|
|
.q-toggle__track
|
|
opacity: .54
|
|
.q-toggle__thumb
|
|
left: .65em
|
|
&:after
|
|
background-color: currentColor
|
|
.q-icon
|
|
color: #fff
|
|
opacity: 1
|
|
&.disabled
|
|
opacity: .75 !important
|
|
&--dark
|
|
.q-toggle__inner
|
|
color: #fff
|
|
&--truthy
|
|
color: var(--q-primary)
|
|
.q-toggle__thumb
|
|
&:after
|
|
box-shadow: none
|
|
&:before
|
|
opacity: .32 !important
|
|
&--dense
|
|
.q-toggle__inner
|
|
width: .8em
|
|
min-width: .8em
|
|
height: .5em
|
|
padding: .07625em 0
|
|
.q-toggle__thumb
|
|
top: 0
|
|
left: 0
|
|
.q-toggle__inner--indet
|
|
.q-toggle__thumb
|
|
left: .15em
|
|
.q-toggle__inner--truthy
|
|
.q-toggle__thumb
|
|
left: .3em
|
|
.q-toggle__label
|
|
padding-left: .5em
|
|
&.reverse .q-toggle__label
|
|
padding-left: 0
|
|
padding-right: .5em
|
|
body.desktop
|
|
.q-toggle:not(.disabled)
|
|
.q-toggle__thumb: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-toggle__thumb:before
|
|
transform: scale3d(2, 2, 1)
|
|
.q-toggle--dense:not(.disabled)
|
|
&:focus,
|
|
&:hover
|
|
.q-toggle__thumb:before
|
|
transform: scale3d(1.5, 1.5, 1)
|
|
.q-toolbar
|
|
position: relative
|
|
padding: $toolbar-padding
|
|
min-height: $toolbar-min-height
|
|
width: 100%
|
|
&--inset
|
|
padding-left: $toolbar-inset-size
|
|
.q-avatar
|
|
font-size: 38px
|
|
.q-toolbar__title
|
|
flex: 1 1 0%
|
|
min-width: 1px
|
|
max-width: 100%
|
|
font-size: $toolbar-title-font-size
|
|
font-weight: $toolbar-title-font-weight
|
|
letter-spacing: $toolbar-title-letter-spacing
|
|
padding: $toolbar-title-padding
|
|
&:first-child
|
|
padding-left: 0
|
|
&:last-child
|
|
padding-right: 0
|
|
.q-tooltip--style
|
|
font-size: $tooltip-fontsize
|
|
color: $tooltip-color
|
|
background: $tooltip-background
|
|
border-radius: $tooltip-border-radius
|
|
text-transform: none
|
|
font-weight: normal
|
|
.q-tooltip
|
|
z-index: $z-tooltip
|
|
position: fixed !important
|
|
overflow-y: auto
|
|
overflow-x: hidden
|
|
padding: $tooltip-padding
|
|
max-width: $tooltip-max-width
|
|
max-height: $tooltip-max-height
|
|
@media (max-width: $breakpoint-xs-max)
|
|
font-size: $tooltip-mobile-fontsize
|
|
padding: $tooltip-mobile-padding
|
|
.q-tree
|
|
position: relative
|
|
color: $grey
|
|
&__node
|
|
padding: 0 0 3px 22px
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
top: -3px
|
|
bottom: 0
|
|
width: 2px
|
|
right: auto
|
|
left: -13px
|
|
border-left: 1px solid currentColor
|
|
&:last-child:after
|
|
display: none
|
|
&--disabled
|
|
pointer-events: none
|
|
.disabled
|
|
opacity: 1 !important
|
|
> div,
|
|
> i,
|
|
> .disabled
|
|
opacity: .6 !important
|
|
.q-tree__node--disabled
|
|
> div,
|
|
> i,
|
|
> .disabled
|
|
opacity: 1 !important
|
|
&__node-header:before
|
|
content: ''
|
|
position: absolute
|
|
top: -3px
|
|
bottom: 50%
|
|
width: 31px
|
|
left: -35px
|
|
border-left: 1px solid currentColor
|
|
border-bottom: 1px solid currentColor
|
|
&__children
|
|
padding-left: 25px
|
|
&__node-body
|
|
padding: 5px 0 8px 5px
|
|
&__node--parent
|
|
padding-left: 2px
|
|
> .q-tree__node-header:before
|
|
width: 15px
|
|
left: -15px
|
|
> .q-tree__node-collapsible > .q-tree__node-body
|
|
padding: 5px 0 8px 27px
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
width: 2px
|
|
height: 100%
|
|
right: auto
|
|
left: 12px
|
|
border-left: 1px solid currentColor
|
|
bottom: 50px
|
|
&__node--link
|
|
cursor: pointer
|
|
&__node-header
|
|
padding: 4px
|
|
margin-top: 3px
|
|
border-radius: $generic-border-radius
|
|
outline: 0
|
|
&__node-header-content
|
|
color: #000
|
|
transition: color .3s
|
|
&__node--selected .q-tree__node-header-content
|
|
color: $grey
|
|
&__icon,
|
|
&__node-header-content .q-icon
|
|
font-size: $tree-icon-font-size
|
|
&__img
|
|
height: 42px
|
|
border-radius: 2px
|
|
&__avatar, &__node-header-content .q-avatar
|
|
font-size: 28px
|
|
border-radius: 50%
|
|
width: 28px
|
|
height: 28px
|
|
&__arrow,
|
|
&__spinner
|
|
font-size: 16px
|
|
margin-right: 4px
|
|
&__arrow
|
|
transition: transform .3s
|
|
&--rotate
|
|
transform: rotate3d(0, 0, 1, 90deg)
|
|
&__tickbox
|
|
margin-right: 4px
|
|
|
|
> .q-tree__node
|
|
padding: 0
|
|
&:after, > .q-tree__node-header:before
|
|
display: none
|
|
|
|
> .q-tree__node--child > .q-tree__node-header
|
|
padding-left: 24px
|
|
&--dark .q-tree__node-header-content
|
|
color: #fff
|
|
&--no-connectors
|
|
.q-tree__node:after,
|
|
.q-tree__node-header:before,
|
|
.q-tree__node-body:after
|
|
display: none !important
|
|
&--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 */"}
|
|
&--rotate
|
|
transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}
|
|
.q-uploader
|
|
box-shadow: $shadow-2
|
|
border-radius: $generic-border-radius
|
|
vertical-align: top
|
|
background: #fff
|
|
position: relative
|
|
width: 320px
|
|
max-height: 320px
|
|
&--bordered
|
|
border: 1px solid $separator-color
|
|
&__input
|
|
opacity: 0
|
|
width: 100%
|
|
height: 100%
|
|
cursor: pointer !important
|
|
z-index: 1
|
|
|
|
&::-webkit-file-upload-button
|
|
cursor: pointer
|
|
&__file
|
|
&:before
|
|
content: ''
|
|
border-top-left-radius: inherit
|
|
border-top-right-radius: inherit
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
pointer-events: none
|
|
background: currentColor
|
|
opacity: .04
|
|
&__header
|
|
position: relative
|
|
border-top-left-radius: inherit
|
|
border-top-right-radius: inherit
|
|
background-color: var(--q-primary)
|
|
color: #fff
|
|
width: 100%
|
|
&__spinner
|
|
font-size: 24px
|
|
margin-right: 4px
|
|
&__header-content
|
|
padding: 8px
|
|
&__dnd
|
|
outline: 1px dashed currentColor
|
|
outline-offset: -4px
|
|
background: rgba(255,255,255,.6)
|
|
&__overlay
|
|
font-size: 36px
|
|
color: #000
|
|
background-color: rgba(255,255,255,.6)
|
|
&__list
|
|
position: relative
|
|
border-bottom-left-radius: inherit
|
|
border-bottom-right-radius: inherit
|
|
padding: 8px
|
|
min-height: 60px
|
|
flex: 1 1 auto
|
|
&__file
|
|
border-radius: $generic-border-radius $generic-border-radius 0 0
|
|
border: 1px solid $separator-color
|
|
.q-circular-progress
|
|
font-size: 24px
|
|
&--img
|
|
color: #fff
|
|
height: 200px
|
|
min-width: 200px
|
|
background-position: 50% 50%
|
|
background-repeat: no-repeat
|
|
&:before
|
|
content: none
|
|
.q-circular-progress
|
|
color: #fff
|
|
.q-uploader__file-header
|
|
padding-bottom: 24px
|
|
background: linear-gradient(to bottom, rgba(0,0,0,.7) 20%, rgba(255,255,255,0))
|
|
& + &
|
|
margin-top: 8px
|
|
&__file-header
|
|
position: relative
|
|
padding: 4px 8px
|
|
border-top-left-radius: inherit
|
|
border-top-right-radius: inherit
|
|
&__file-header-content
|
|
padding-right: 8px
|
|
&__file-status
|
|
font-size: 24px
|
|
margin-right: 4px
|
|
&__title
|
|
font-size: $uploader-title-font-size
|
|
font-weight: bold
|
|
line-height: $uploader-title-line-height
|
|
word-break: break-word
|
|
&__subtitle
|
|
font-size: $uploader-subtitle-font-size
|
|
line-height: $uploader-subtitle-line-height
|
|
&--disable
|
|
.q-uploader__header, .q-uploader__list
|
|
pointer-events: none
|
|
&--dark
|
|
border-color: $separator-dark-color
|
|
box-shadow: $dark-shadow-2
|
|
.q-uploader__file
|
|
border-color: $separator-dark-color
|
|
.q-uploader__dnd, .q-uploader__overlay
|
|
background: rgba(255,255,255,.3)
|
|
.q-uploader__overlay
|
|
color: #fff
|
|
img.responsive
|
|
max-width: 100%
|
|
height: auto
|
|
.q-video
|
|
position: relative
|
|
overflow: hidden
|
|
border-radius: inherit
|
|
iframe,
|
|
object,
|
|
embed
|
|
width: 100%
|
|
height: 100%
|
|
&--responsive
|
|
height: 0
|
|
iframe,
|
|
object,
|
|
embed
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
.q-virtual-scroll
|
|
&:focus
|
|
outline: 0
|
|
&__content
|
|
outline: none
|
|
contain: content
|
|
> *
|
|
overflow-anchor: none
|
|
> [data-q-vs-anchor]
|
|
overflow-anchor: auto
|
|
&__padding
|
|
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"}
|
|
background-size: var(--q-virtual-scroll-item-width, 100%) var(--q-virtual-scroll-item-height, 50px) #{"/* rtl:ignore */"}
|
|
.q-table &
|
|
tr
|
|
height: 0 !important
|
|
td
|
|
padding: 0 !important
|
|
&--horizontal
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: nowrap
|
|
align-items: stretch
|
|
.q-virtual-scroll
|
|
&__content
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: nowrap
|
|
&__padding,
|
|
&__content,
|
|
&__content > *
|
|
flex: 0 0 auto
|
|
&__padding
|
|
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0) 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, rgba(255,255,255,0) 80%, rgba(255,255,255,0)) #{"/* rtl:ignore */"}
|
|
background-size: var(--q-virtual-scroll-item-width, 50px) var(--q-virtual-scroll-item-height, 100%) #{"/* rtl:ignore */"}
|
|
.q-ripple
|
|
position: absolute
|
|
top: 0
|
|
left: 0 #{"/* rtl:ignore */"}
|
|
width: 100%
|
|
height: 100%
|
|
color: inherit
|
|
border-radius: inherit
|
|
z-index: 0
|
|
pointer-events: none
|
|
overflow: hidden
|
|
contain: strict
|
|
&__inner
|
|
position: absolute
|
|
top: 0
|
|
left: 0 #{"/* rtl:ignore */"}
|
|
opacity: 0
|
|
color: inherit
|
|
border-radius: 50%
|
|
background: currentColor
|
|
pointer-events: none
|
|
will-change: transform, opacity
|
|
&--enter
|
|
transition: transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1)
|
|
&--leave
|
|
transition: opacity .25s cubic-bezier(.4, 0, .2, 1)
|
|
.q-morph--invisible,
|
|
.q-morph--internal
|
|
opacity: 0 !important
|
|
pointer-events: none !important
|
|
position: fixed !important
|
|
right: 200vw !important
|
|
bottom: 200vh !important
|
|
.q-bottom-sheet
|
|
padding-bottom: 8px
|
|
&__avatar
|
|
border-radius: 50%
|
|
&--list
|
|
width: 400px
|
|
.q-icon, img
|
|
font-size: 24px
|
|
width: 24px
|
|
height: 24px
|
|
&--grid
|
|
width: 700px
|
|
.q-bottom-sheet__item
|
|
padding: 8px
|
|
text-align: center
|
|
min-width: 100px
|
|
.q-icon, img, .q-bottom-sheet__empty-icon
|
|
font-size: 48px
|
|
width: 48px
|
|
height: 48px
|
|
margin-bottom: 8px
|
|
.q-separator
|
|
margin: 12px 0
|
|
&__item
|
|
flex: 0 0 33.3333%
|
|
@media (min-width: $breakpoint-sm-min)
|
|
.q-bottom-sheet__item
|
|
flex: 0 0 25%
|
|
.q-dialog-plugin
|
|
width: 400px
|
|
&__form
|
|
max-height: 50vh
|
|
.q-card__section + .q-card__section
|
|
padding-top: 0
|
|
&--progress
|
|
text-align: center
|
|
.q-loading
|
|
color: #000
|
|
|
|
position: fixed !important
|
|
&__backdrop
|
|
position: fixed
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
opacity: .5
|
|
z-index: -1
|
|
background-color: #000
|
|
transition: background-color .28s
|
|
&__box
|
|
border-radius: $generic-border-radius
|
|
padding: 18px
|
|
color: #fff
|
|
max-width: 450px
|
|
&__message
|
|
margin: 40px 20px 0
|
|
text-align: center
|
|
.q-notifications__list
|
|
z-index: $z-notify
|
|
pointer-events: none
|
|
left: 0
|
|
right: 0
|
|
margin-bottom: 10px
|
|
position: relative
|
|
&--center
|
|
top: 0
|
|
bottom: 0
|
|
&--top
|
|
top: 0
|
|
&--bottom
|
|
bottom: 0
|
|
body.q-ios-padding .q-notifications__list
|
|
&--center, &--top
|
|
top: $ios-statusbar-height
|
|
top: env(safe-area-inset-top)
|
|
&--center, &--bottom
|
|
bottom: env(safe-area-inset-bottom)
|
|
.q-notification
|
|
box-shadow: $shadow-2
|
|
border-radius: $generic-border-radius
|
|
pointer-events: all
|
|
display: inline-flex
|
|
margin: 10px 10px 0
|
|
transition: transform 1s, opacity 1s
|
|
z-index: $z-notify
|
|
flex-shrink: 0
|
|
max-width: 95vw
|
|
background: #323232
|
|
color: #fff
|
|
font-size: 14px
|
|
&__icon
|
|
font-size: 24px
|
|
flex: 0 0 1em
|
|
&--additional
|
|
margin-right: 16px
|
|
&__avatar
|
|
font-size: 32px
|
|
&--additional
|
|
margin-right: 8px
|
|
&__spinner
|
|
font-size: 32px
|
|
&--additional
|
|
margin-right: 8px
|
|
&__message
|
|
padding: 8px 0
|
|
&__caption
|
|
font-size: 0.9em
|
|
opacity: 0.7
|
|
&__actions
|
|
color: var(--q-primary)
|
|
&__badge
|
|
animation: q-notif-badge .42s
|
|
padding: 4px 8px
|
|
position: absolute
|
|
box-shadow: $shadow-1
|
|
background-color: var(--q-negative)
|
|
color: #fff
|
|
border-radius: $generic-border-radius
|
|
font-size: 12px
|
|
line-height: 12px
|
|
&--top-left,
|
|
&--top-right
|
|
top: -6px
|
|
&--bottom-left,
|
|
&--bottom-right
|
|
bottom: -6px
|
|
&--top-left,
|
|
&--bottom-left
|
|
left: -22px
|
|
&--top-right,
|
|
&--bottom-right
|
|
right: -22px
|
|
&__progress
|
|
z-index: -1
|
|
position: absolute
|
|
height: 3px
|
|
bottom: 0
|
|
left: -10px
|
|
right: -10px
|
|
animation: q-notif-progress linear
|
|
background: currentColor
|
|
opacity: .3
|
|
border-radius: $generic-border-radius $generic-border-radius 0 0
|
|
transform-origin: 0 50%
|
|
transform: scaleX(0)
|
|
&--standard
|
|
padding: 0 16px
|
|
min-height: 48px
|
|
.q-notification__actions
|
|
padding: 6px 0 6px 8px
|
|
margin-right: -8px
|
|
&--multi-line
|
|
min-height: 68px
|
|
padding: 8px 16px
|
|
.q-notification__badge
|
|
&--top-left,
|
|
&--top-right
|
|
top: -15px
|
|
&--bottom-left,
|
|
&--bottom-right
|
|
bottom: -15px
|
|
.q-notification__progress
|
|
bottom: -8px
|
|
.q-notification__actions
|
|
padding: 0
|
|
&--with-media
|
|
padding-left: 25px
|
|
&--top-left-enter-from, &--top-left-leave-to,
|
|
&--top-enter-from, &--top-leave-to,
|
|
&--top-right-enter-from, &--top-right-leave-to
|
|
opacity: 0
|
|
transform: translateY(-50px)
|
|
z-index: ($z-notify - 1)
|
|
&--left-enter-from, &--left-leave-to,
|
|
&--center-enter-from, &--center-leave-to,
|
|
&--right-enter-from, &--right-leave-to
|
|
opacity: 0
|
|
transform: rotateX(90deg)
|
|
z-index: ($z-notify - 1)
|
|
&--bottom-left-enter-from, &--bottom-left-leave-to,
|
|
&--bottom-enter-from, &--bottom-leave-to,
|
|
&--bottom-right-enter-from, &--bottom-right-leave-to
|
|
opacity: 0
|
|
transform: translateY(50px)
|
|
z-index: ($z-notify - 1)
|
|
&--top-left-leave-active,
|
|
&--top-leave-active,
|
|
&--top-right-leave-active,
|
|
&--left-leave-active,
|
|
&--center-leave-active,
|
|
&--right-leave-active,
|
|
&--bottom-left-leave-active,
|
|
&--bottom-leave-active,
|
|
&--bottom-right-leave-active
|
|
position: absolute
|
|
z-index: ($z-notify - 1)
|
|
margin-left: 0
|
|
margin-right: 0
|
|
&--top-leave-active,
|
|
&--center-leave-active
|
|
top: 0
|
|
&--bottom-left-leave-active,
|
|
&--bottom-leave-active,
|
|
&--bottom-right-leave-active
|
|
bottom: 0
|
|
@media (min-width: $breakpoint-sm-min)
|
|
.q-notification
|
|
max-width: 65vw
|
|
@keyframes q-notif-badge
|
|
15%
|
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
|
|
30%
|
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
|
|
45%
|
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
|
|
60%
|
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
|
|
75%
|
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
|
|
@keyframes q-notif-progress
|
|
0%
|
|
transform: scaleX(1)
|
|
100%
|
|
transform: scaleX(0)
|
|
/*
|
|
* Animate.css additions
|
|
* Adapted from: https:
|
|
*/
|
|
\:root
|
|
--animate-duration: #{$animate-duration}
|
|
--animate-delay: #{$animate-delay}
|
|
--animate-repeat: #{$animate-repeat}
|
|
.animated
|
|
animation-duration: var(--animate-duration)
|
|
animation-fill-mode: both
|
|
&.infinite
|
|
animation-iteration-count: infinite
|
|
|
|
&.hinge
|
|
animation-duration: 2s
|
|
&.repeat-1
|
|
animation-iteration-count: var(--animate-repeat)
|
|
&.repeat-2
|
|
animation-iteration-count: calc(var(--animate-repeat) * 2)
|
|
&.repeat-3
|
|
animation-iteration-count: calc(var(--animate-repeat) * 3)
|
|
&.delay-1s
|
|
animation-delay: var(--animate-delay)
|
|
&.delay-2s
|
|
animation-delay: calc(var(--animate-delay) * 2)
|
|
&.delay-3s
|
|
animation-delay: calc(var(--animate-delay) * 3)
|
|
&.delay-4s
|
|
animation-delay: calc(var(--animate-delay) * 4)
|
|
&.delay-5s
|
|
animation-delay: calc(var(--animate-delay) * 5)
|
|
&.faster
|
|
animation-duration: calc(var(--animate-duration) / 2)
|
|
&.fast
|
|
animation-duration: calc(var(--animate-duration) * 0.8)
|
|
&.slow
|
|
animation-duration: calc(var(--animate-duration) * 2)
|
|
&.slower
|
|
animation-duration: calc(var(--animate-duration) * 3)
|
|
@media print, (prefers-reduced-motion: reduce)
|
|
.animated
|
|
animation-duration: 1ms !important
|
|
transition-duration: 1ms !important
|
|
animation-iteration-count: 1 !important
|
|
.animated[class*='Out']
|
|
opacity: 0
|
|
.q-animate--scale
|
|
animation: q-scale .15s
|
|
animation-timing-function: cubic-bezier(.25,.8,.25,1)
|
|
@keyframes q-scale
|
|
0%
|
|
transform: scale(1)
|
|
50%
|
|
transform: scale(1.04)
|
|
100%
|
|
transform: scale(1)
|
|
.q-animate--fade
|
|
animation: q-fade .2s #{"/* rtl:ignore */"}
|
|
@keyframes q-fade
|
|
0%
|
|
opacity: 0
|
|
100%
|
|
opacity: 1
|
|
\:root
|
|
--q-primary: #{$primary}
|
|
--q-secondary: #{$secondary}
|
|
--q-accent: #{$accent}
|
|
--q-positive: #{$positive}
|
|
--q-negative: #{$negative}
|
|
--q-info: #{$info}
|
|
--q-warning: #{$warning}
|
|
--q-dark: #{$dark}
|
|
--q-dark-page: #{$dark-page}
|
|
.text-dark
|
|
color: var(--q-dark) !important
|
|
.bg-dark
|
|
background: var(--q-dark) !important
|
|
.text-primary
|
|
color: var(--q-primary) !important
|
|
.bg-primary
|
|
background: var(--q-primary) !important
|
|
.text-secondary
|
|
color: var(--q-secondary) !important
|
|
.bg-secondary
|
|
background: var(--q-secondary) !important
|
|
.text-accent
|
|
color: var(--q-accent) !important
|
|
.bg-accent
|
|
background: var(--q-accent) !important
|
|
.text-positive
|
|
color: var(--q-positive) !important
|
|
.bg-positive
|
|
background: var(--q-positive) !important
|
|
.text-negative
|
|
color: var(--q-negative) !important
|
|
.bg-negative
|
|
background: var(--q-negative) !important
|
|
.text-info
|
|
color: var(--q-info) !important
|
|
.bg-info
|
|
background: var(--q-info) !important
|
|
.text-warning
|
|
color: var(--q-warning) !important
|
|
.bg-warning
|
|
background: var(--q-warning) !important
|
|
.text-white
|
|
color: #fff !important
|
|
.bg-white
|
|
background: #fff !important
|
|
.text-black
|
|
color: #000 !important
|
|
.bg-black
|
|
background: #000 !important
|
|
.text-transparent
|
|
color: transparent !important
|
|
.bg-transparent
|
|
background: transparent !important
|
|
.text-separator
|
|
color: $separator-color !important
|
|
.bg-separator
|
|
background: $separator-color !important
|
|
.text-dark-separator
|
|
color: $separator-dark-color !important
|
|
.bg-dark-separator
|
|
background: $separator-dark-color !important
|
|
.text-red
|
|
color: $red !important
|
|
.text-red-1
|
|
color: $red-1 !important
|
|
.text-red-2
|
|
color: $red-2 !important
|
|
.text-red-3
|
|
color: $red-3 !important
|
|
.text-red-4
|
|
color: $red-4 !important
|
|
.text-red-5
|
|
color: $red-5 !important
|
|
.text-red-6
|
|
color: $red-6 !important
|
|
.text-red-7
|
|
color: $red-7 !important
|
|
.text-red-8
|
|
color: $red-8 !important
|
|
.text-red-9
|
|
color: $red-9 !important
|
|
.text-red-10
|
|
color: $red-10 !important
|
|
.text-red-11
|
|
color: $red-11 !important
|
|
.text-red-12
|
|
color: $red-12 !important
|
|
.text-red-13
|
|
color: $red-13 !important
|
|
.text-red-14
|
|
color: $red-14 !important
|
|
.text-pink
|
|
color: $pink !important
|
|
.text-pink-1
|
|
color: $pink-1 !important
|
|
.text-pink-2
|
|
color: $pink-2 !important
|
|
.text-pink-3
|
|
color: $pink-3 !important
|
|
.text-pink-4
|
|
color: $pink-4 !important
|
|
.text-pink-5
|
|
color: $pink-5 !important
|
|
.text-pink-6
|
|
color: $pink-6 !important
|
|
.text-pink-7
|
|
color: $pink-7 !important
|
|
.text-pink-8
|
|
color: $pink-8 !important
|
|
.text-pink-9
|
|
color: $pink-9 !important
|
|
.text-pink-10
|
|
color: $pink-10 !important
|
|
.text-pink-11
|
|
color: $pink-11 !important
|
|
.text-pink-12
|
|
color: $pink-12 !important
|
|
.text-pink-13
|
|
color: $pink-13 !important
|
|
.text-pink-14
|
|
color: $pink-14 !important
|
|
.text-purple
|
|
color: $purple !important
|
|
.text-purple-1
|
|
color: $purple-1 !important
|
|
.text-purple-2
|
|
color: $purple-2 !important
|
|
.text-purple-3
|
|
color: $purple-3 !important
|
|
.text-purple-4
|
|
color: $purple-4 !important
|
|
.text-purple-5
|
|
color: $purple-5 !important
|
|
.text-purple-6
|
|
color: $purple-6 !important
|
|
.text-purple-7
|
|
color: $purple-7 !important
|
|
.text-purple-8
|
|
color: $purple-8 !important
|
|
.text-purple-9
|
|
color: $purple-9 !important
|
|
.text-purple-10
|
|
color: $purple-10 !important
|
|
.text-purple-11
|
|
color: $purple-11 !important
|
|
.text-purple-12
|
|
color: $purple-12 !important
|
|
.text-purple-13
|
|
color: $purple-13 !important
|
|
.text-purple-14
|
|
color: $purple-14 !important
|
|
.text-deep-purple
|
|
color: $deep-purple !important
|
|
.text-deep-purple-1
|
|
color: $deep-purple-1 !important
|
|
.text-deep-purple-2
|
|
color: $deep-purple-2 !important
|
|
.text-deep-purple-3
|
|
color: $deep-purple-3 !important
|
|
.text-deep-purple-4
|
|
color: $deep-purple-4 !important
|
|
.text-deep-purple-5
|
|
color: $deep-purple-5 !important
|
|
.text-deep-purple-6
|
|
color: $deep-purple-6 !important
|
|
.text-deep-purple-7
|
|
color: $deep-purple-7 !important
|
|
.text-deep-purple-8
|
|
color: $deep-purple-8 !important
|
|
.text-deep-purple-9
|
|
color: $deep-purple-9 !important
|
|
.text-deep-purple-10
|
|
color: $deep-purple-10 !important
|
|
.text-deep-purple-11
|
|
color: $deep-purple-11 !important
|
|
.text-deep-purple-12
|
|
color: $deep-purple-12 !important
|
|
.text-deep-purple-13
|
|
color: $deep-purple-13 !important
|
|
.text-deep-purple-14
|
|
color: $deep-purple-14 !important
|
|
.text-indigo
|
|
color: $indigo !important
|
|
.text-indigo-1
|
|
color: $indigo-1 !important
|
|
.text-indigo-2
|
|
color: $indigo-2 !important
|
|
.text-indigo-3
|
|
color: $indigo-3 !important
|
|
.text-indigo-4
|
|
color: $indigo-4 !important
|
|
.text-indigo-5
|
|
color: $indigo-5 !important
|
|
.text-indigo-6
|
|
color: $indigo-6 !important
|
|
.text-indigo-7
|
|
color: $indigo-7 !important
|
|
.text-indigo-8
|
|
color: $indigo-8 !important
|
|
.text-indigo-9
|
|
color: $indigo-9 !important
|
|
.text-indigo-10
|
|
color: $indigo-10 !important
|
|
.text-indigo-11
|
|
color: $indigo-11 !important
|
|
.text-indigo-12
|
|
color: $indigo-12 !important
|
|
.text-indigo-13
|
|
color: $indigo-13 !important
|
|
.text-indigo-14
|
|
color: $indigo-14 !important
|
|
.text-blue
|
|
color: $blue !important
|
|
.text-blue-1
|
|
color: $blue-1 !important
|
|
.text-blue-2
|
|
color: $blue-2 !important
|
|
.text-blue-3
|
|
color: $blue-3 !important
|
|
.text-blue-4
|
|
color: $blue-4 !important
|
|
.text-blue-5
|
|
color: $blue-5 !important
|
|
.text-blue-6
|
|
color: $blue-6 !important
|
|
.text-blue-7
|
|
color: $blue-7 !important
|
|
.text-blue-8
|
|
color: $blue-8 !important
|
|
.text-blue-9
|
|
color: $blue-9 !important
|
|
.text-blue-10
|
|
color: $blue-10 !important
|
|
.text-blue-11
|
|
color: $blue-11 !important
|
|
.text-blue-12
|
|
color: $blue-12 !important
|
|
.text-blue-13
|
|
color: $blue-13 !important
|
|
.text-blue-14
|
|
color: $blue-14 !important
|
|
.text-light-blue
|
|
color: $light-blue !important
|
|
.text-light-blue-1
|
|
color: $light-blue-1 !important
|
|
.text-light-blue-2
|
|
color: $light-blue-2 !important
|
|
.text-light-blue-3
|
|
color: $light-blue-3 !important
|
|
.text-light-blue-4
|
|
color: $light-blue-4 !important
|
|
.text-light-blue-5
|
|
color: $light-blue-5 !important
|
|
.text-light-blue-6
|
|
color: $light-blue-6 !important
|
|
.text-light-blue-7
|
|
color: $light-blue-7 !important
|
|
.text-light-blue-8
|
|
color: $light-blue-8 !important
|
|
.text-light-blue-9
|
|
color: $light-blue-9 !important
|
|
.text-light-blue-10
|
|
color: $light-blue-10 !important
|
|
.text-light-blue-11
|
|
color: $light-blue-11 !important
|
|
.text-light-blue-12
|
|
color: $light-blue-12 !important
|
|
.text-light-blue-13
|
|
color: $light-blue-13 !important
|
|
.text-light-blue-14
|
|
color: $light-blue-14 !important
|
|
.text-cyan
|
|
color: $cyan !important
|
|
.text-cyan-1
|
|
color: $cyan-1 !important
|
|
.text-cyan-2
|
|
color: $cyan-2 !important
|
|
.text-cyan-3
|
|
color: $cyan-3 !important
|
|
.text-cyan-4
|
|
color: $cyan-4 !important
|
|
.text-cyan-5
|
|
color: $cyan-5 !important
|
|
.text-cyan-6
|
|
color: $cyan-6 !important
|
|
.text-cyan-7
|
|
color: $cyan-7 !important
|
|
.text-cyan-8
|
|
color: $cyan-8 !important
|
|
.text-cyan-9
|
|
color: $cyan-9 !important
|
|
.text-cyan-10
|
|
color: $cyan-10 !important
|
|
.text-cyan-11
|
|
color: $cyan-11 !important
|
|
.text-cyan-12
|
|
color: $cyan-12 !important
|
|
.text-cyan-13
|
|
color: $cyan-13 !important
|
|
.text-cyan-14
|
|
color: $cyan-14 !important
|
|
.text-teal
|
|
color: $teal !important
|
|
.text-teal-1
|
|
color: $teal-1 !important
|
|
.text-teal-2
|
|
color: $teal-2 !important
|
|
.text-teal-3
|
|
color: $teal-3 !important
|
|
.text-teal-4
|
|
color: $teal-4 !important
|
|
.text-teal-5
|
|
color: $teal-5 !important
|
|
.text-teal-6
|
|
color: $teal-6 !important
|
|
.text-teal-7
|
|
color: $teal-7 !important
|
|
.text-teal-8
|
|
color: $teal-8 !important
|
|
.text-teal-9
|
|
color: $teal-9 !important
|
|
.text-teal-10
|
|
color: $teal-10 !important
|
|
.text-teal-11
|
|
color: $teal-11 !important
|
|
.text-teal-12
|
|
color: $teal-12 !important
|
|
.text-teal-13
|
|
color: $teal-13 !important
|
|
.text-teal-14
|
|
color: $teal-14 !important
|
|
.text-green
|
|
color: $green !important
|
|
.text-green-1
|
|
color: $green-1 !important
|
|
.text-green-2
|
|
color: $green-2 !important
|
|
.text-green-3
|
|
color: $green-3 !important
|
|
.text-green-4
|
|
color: $green-4 !important
|
|
.text-green-5
|
|
color: $green-5 !important
|
|
.text-green-6
|
|
color: $green-6 !important
|
|
.text-green-7
|
|
color: $green-7 !important
|
|
.text-green-8
|
|
color: $green-8 !important
|
|
.text-green-9
|
|
color: $green-9 !important
|
|
.text-green-10
|
|
color: $green-10 !important
|
|
.text-green-11
|
|
color: $green-11 !important
|
|
.text-green-12
|
|
color: $green-12 !important
|
|
.text-green-13
|
|
color: $green-13 !important
|
|
.text-green-14
|
|
color: $green-14 !important
|
|
.text-light-green
|
|
color: $light-green !important
|
|
.text-light-green-1
|
|
color: $light-green-1 !important
|
|
.text-light-green-2
|
|
color: $light-green-2 !important
|
|
.text-light-green-3
|
|
color: $light-green-3 !important
|
|
.text-light-green-4
|
|
color: $light-green-4 !important
|
|
.text-light-green-5
|
|
color: $light-green-5 !important
|
|
.text-light-green-6
|
|
color: $light-green-6 !important
|
|
.text-light-green-7
|
|
color: $light-green-7 !important
|
|
.text-light-green-8
|
|
color: $light-green-8 !important
|
|
.text-light-green-9
|
|
color: $light-green-9 !important
|
|
.text-light-green-10
|
|
color: $light-green-10 !important
|
|
.text-light-green-11
|
|
color: $light-green-11 !important
|
|
.text-light-green-12
|
|
color: $light-green-12 !important
|
|
.text-light-green-13
|
|
color: $light-green-13 !important
|
|
.text-light-green-14
|
|
color: $light-green-14 !important
|
|
.text-lime
|
|
color: $lime !important
|
|
.text-lime-1
|
|
color: $lime-1 !important
|
|
.text-lime-2
|
|
color: $lime-2 !important
|
|
.text-lime-3
|
|
color: $lime-3 !important
|
|
.text-lime-4
|
|
color: $lime-4 !important
|
|
.text-lime-5
|
|
color: $lime-5 !important
|
|
.text-lime-6
|
|
color: $lime-6 !important
|
|
.text-lime-7
|
|
color: $lime-7 !important
|
|
.text-lime-8
|
|
color: $lime-8 !important
|
|
.text-lime-9
|
|
color: $lime-9 !important
|
|
.text-lime-10
|
|
color: $lime-10 !important
|
|
.text-lime-11
|
|
color: $lime-11 !important
|
|
.text-lime-12
|
|
color: $lime-12 !important
|
|
.text-lime-13
|
|
color: $lime-13 !important
|
|
.text-lime-14
|
|
color: $lime-14 !important
|
|
.text-yellow
|
|
color: $yellow !important
|
|
.text-yellow-1
|
|
color: $yellow-1 !important
|
|
.text-yellow-2
|
|
color: $yellow-2 !important
|
|
.text-yellow-3
|
|
color: $yellow-3 !important
|
|
.text-yellow-4
|
|
color: $yellow-4 !important
|
|
.text-yellow-5
|
|
color: $yellow-5 !important
|
|
.text-yellow-6
|
|
color: $yellow-6 !important
|
|
.text-yellow-7
|
|
color: $yellow-7 !important
|
|
.text-yellow-8
|
|
color: $yellow-8 !important
|
|
.text-yellow-9
|
|
color: $yellow-9 !important
|
|
.text-yellow-10
|
|
color: $yellow-10 !important
|
|
.text-yellow-11
|
|
color: $yellow-11 !important
|
|
.text-yellow-12
|
|
color: $yellow-12 !important
|
|
.text-yellow-13
|
|
color: $yellow-13 !important
|
|
.text-yellow-14
|
|
color: $yellow-14 !important
|
|
.text-amber
|
|
color: $amber !important
|
|
.text-amber-1
|
|
color: $amber-1 !important
|
|
.text-amber-2
|
|
color: $amber-2 !important
|
|
.text-amber-3
|
|
color: $amber-3 !important
|
|
.text-amber-4
|
|
color: $amber-4 !important
|
|
.text-amber-5
|
|
color: $amber-5 !important
|
|
.text-amber-6
|
|
color: $amber-6 !important
|
|
.text-amber-7
|
|
color: $amber-7 !important
|
|
.text-amber-8
|
|
color: $amber-8 !important
|
|
.text-amber-9
|
|
color: $amber-9 !important
|
|
.text-amber-10
|
|
color: $amber-10 !important
|
|
.text-amber-11
|
|
color: $amber-11 !important
|
|
.text-amber-12
|
|
color: $amber-12 !important
|
|
.text-amber-13
|
|
color: $amber-13 !important
|
|
.text-amber-14
|
|
color: $amber-14 !important
|
|
.text-orange
|
|
color: $orange !important
|
|
.text-orange-1
|
|
color: $orange-1 !important
|
|
.text-orange-2
|
|
color: $orange-2 !important
|
|
.text-orange-3
|
|
color: $orange-3 !important
|
|
.text-orange-4
|
|
color: $orange-4 !important
|
|
.text-orange-5
|
|
color: $orange-5 !important
|
|
.text-orange-6
|
|
color: $orange-6 !important
|
|
.text-orange-7
|
|
color: $orange-7 !important
|
|
.text-orange-8
|
|
color: $orange-8 !important
|
|
.text-orange-9
|
|
color: $orange-9 !important
|
|
.text-orange-10
|
|
color: $orange-10 !important
|
|
.text-orange-11
|
|
color: $orange-11 !important
|
|
.text-orange-12
|
|
color: $orange-12 !important
|
|
.text-orange-13
|
|
color: $orange-13 !important
|
|
.text-orange-14
|
|
color: $orange-14 !important
|
|
.text-deep-orange
|
|
color: $deep-orange !important
|
|
.text-deep-orange-1
|
|
color: $deep-orange-1 !important
|
|
.text-deep-orange-2
|
|
color: $deep-orange-2 !important
|
|
.text-deep-orange-3
|
|
color: $deep-orange-3 !important
|
|
.text-deep-orange-4
|
|
color: $deep-orange-4 !important
|
|
.text-deep-orange-5
|
|
color: $deep-orange-5 !important
|
|
.text-deep-orange-6
|
|
color: $deep-orange-6 !important
|
|
.text-deep-orange-7
|
|
color: $deep-orange-7 !important
|
|
.text-deep-orange-8
|
|
color: $deep-orange-8 !important
|
|
.text-deep-orange-9
|
|
color: $deep-orange-9 !important
|
|
.text-deep-orange-10
|
|
color: $deep-orange-10 !important
|
|
.text-deep-orange-11
|
|
color: $deep-orange-11 !important
|
|
.text-deep-orange-12
|
|
color: $deep-orange-12 !important
|
|
.text-deep-orange-13
|
|
color: $deep-orange-13 !important
|
|
.text-deep-orange-14
|
|
color: $deep-orange-14 !important
|
|
.text-brown
|
|
color: $brown !important
|
|
.text-brown-1
|
|
color: $brown-1 !important
|
|
.text-brown-2
|
|
color: $brown-2 !important
|
|
.text-brown-3
|
|
color: $brown-3 !important
|
|
.text-brown-4
|
|
color: $brown-4 !important
|
|
.text-brown-5
|
|
color: $brown-5 !important
|
|
.text-brown-6
|
|
color: $brown-6 !important
|
|
.text-brown-7
|
|
color: $brown-7 !important
|
|
.text-brown-8
|
|
color: $brown-8 !important
|
|
.text-brown-9
|
|
color: $brown-9 !important
|
|
.text-brown-10
|
|
color: $brown-10 !important
|
|
.text-brown-11
|
|
color: $brown-11 !important
|
|
.text-brown-12
|
|
color: $brown-12 !important
|
|
.text-brown-13
|
|
color: $brown-13 !important
|
|
.text-brown-14
|
|
color: $brown-14 !important
|
|
.text-grey
|
|
color: $grey !important
|
|
.text-grey-1
|
|
color: $grey-1 !important
|
|
.text-grey-2
|
|
color: $grey-2 !important
|
|
.text-grey-3
|
|
color: $grey-3 !important
|
|
.text-grey-4
|
|
color: $grey-4 !important
|
|
.text-grey-5
|
|
color: $grey-5 !important
|
|
.text-grey-6
|
|
color: $grey-6 !important
|
|
.text-grey-7
|
|
color: $grey-7 !important
|
|
.text-grey-8
|
|
color: $grey-8 !important
|
|
.text-grey-9
|
|
color: $grey-9 !important
|
|
.text-grey-10
|
|
color: $grey-10 !important
|
|
.text-grey-11
|
|
color: $grey-11 !important
|
|
.text-grey-12
|
|
color: $grey-12 !important
|
|
.text-grey-13
|
|
color: $grey-13 !important
|
|
.text-grey-14
|
|
color: $grey-14 !important
|
|
.text-blue-grey
|
|
color: $blue-grey !important
|
|
.text-blue-grey-1
|
|
color: $blue-grey-1 !important
|
|
.text-blue-grey-2
|
|
color: $blue-grey-2 !important
|
|
.text-blue-grey-3
|
|
color: $blue-grey-3 !important
|
|
.text-blue-grey-4
|
|
color: $blue-grey-4 !important
|
|
.text-blue-grey-5
|
|
color: $blue-grey-5 !important
|
|
.text-blue-grey-6
|
|
color: $blue-grey-6 !important
|
|
.text-blue-grey-7
|
|
color: $blue-grey-7 !important
|
|
.text-blue-grey-8
|
|
color: $blue-grey-8 !important
|
|
.text-blue-grey-9
|
|
color: $blue-grey-9 !important
|
|
.text-blue-grey-10
|
|
color: $blue-grey-10 !important
|
|
.text-blue-grey-11
|
|
color: $blue-grey-11 !important
|
|
.text-blue-grey-12
|
|
color: $blue-grey-12 !important
|
|
.text-blue-grey-13
|
|
color: $blue-grey-13 !important
|
|
.text-blue-grey-14
|
|
color: $blue-grey-14 !important
|
|
.bg-red
|
|
background: $red !important
|
|
.bg-red-1
|
|
background: $red-1 !important
|
|
.bg-red-2
|
|
background: $red-2 !important
|
|
.bg-red-3
|
|
background: $red-3 !important
|
|
.bg-red-4
|
|
background: $red-4 !important
|
|
.bg-red-5
|
|
background: $red-5 !important
|
|
.bg-red-6
|
|
background: $red-6 !important
|
|
.bg-red-7
|
|
background: $red-7 !important
|
|
.bg-red-8
|
|
background: $red-8 !important
|
|
.bg-red-9
|
|
background: $red-9 !important
|
|
.bg-red-10
|
|
background: $red-10 !important
|
|
.bg-red-11
|
|
background: $red-11 !important
|
|
.bg-red-12
|
|
background: $red-12 !important
|
|
.bg-red-13
|
|
background: $red-13 !important
|
|
.bg-red-14
|
|
background: $red-14 !important
|
|
.bg-pink
|
|
background: $pink !important
|
|
.bg-pink-1
|
|
background: $pink-1 !important
|
|
.bg-pink-2
|
|
background: $pink-2 !important
|
|
.bg-pink-3
|
|
background: $pink-3 !important
|
|
.bg-pink-4
|
|
background: $pink-4 !important
|
|
.bg-pink-5
|
|
background: $pink-5 !important
|
|
.bg-pink-6
|
|
background: $pink-6 !important
|
|
.bg-pink-7
|
|
background: $pink-7 !important
|
|
.bg-pink-8
|
|
background: $pink-8 !important
|
|
.bg-pink-9
|
|
background: $pink-9 !important
|
|
.bg-pink-10
|
|
background: $pink-10 !important
|
|
.bg-pink-11
|
|
background: $pink-11 !important
|
|
.bg-pink-12
|
|
background: $pink-12 !important
|
|
.bg-pink-13
|
|
background: $pink-13 !important
|
|
.bg-pink-14
|
|
background: $pink-14 !important
|
|
.bg-purple
|
|
background: $purple !important
|
|
.bg-purple-1
|
|
background: $purple-1 !important
|
|
.bg-purple-2
|
|
background: $purple-2 !important
|
|
.bg-purple-3
|
|
background: $purple-3 !important
|
|
.bg-purple-4
|
|
background: $purple-4 !important
|
|
.bg-purple-5
|
|
background: $purple-5 !important
|
|
.bg-purple-6
|
|
background: $purple-6 !important
|
|
.bg-purple-7
|
|
background: $purple-7 !important
|
|
.bg-purple-8
|
|
background: $purple-8 !important
|
|
.bg-purple-9
|
|
background: $purple-9 !important
|
|
.bg-purple-10
|
|
background: $purple-10 !important
|
|
.bg-purple-11
|
|
background: $purple-11 !important
|
|
.bg-purple-12
|
|
background: $purple-12 !important
|
|
.bg-purple-13
|
|
background: $purple-13 !important
|
|
.bg-purple-14
|
|
background: $purple-14 !important
|
|
.bg-deep-purple
|
|
background: $deep-purple !important
|
|
.bg-deep-purple-1
|
|
background: $deep-purple-1 !important
|
|
.bg-deep-purple-2
|
|
background: $deep-purple-2 !important
|
|
.bg-deep-purple-3
|
|
background: $deep-purple-3 !important
|
|
.bg-deep-purple-4
|
|
background: $deep-purple-4 !important
|
|
.bg-deep-purple-5
|
|
background: $deep-purple-5 !important
|
|
.bg-deep-purple-6
|
|
background: $deep-purple-6 !important
|
|
.bg-deep-purple-7
|
|
background: $deep-purple-7 !important
|
|
.bg-deep-purple-8
|
|
background: $deep-purple-8 !important
|
|
.bg-deep-purple-9
|
|
background: $deep-purple-9 !important
|
|
.bg-deep-purple-10
|
|
background: $deep-purple-10 !important
|
|
.bg-deep-purple-11
|
|
background: $deep-purple-11 !important
|
|
.bg-deep-purple-12
|
|
background: $deep-purple-12 !important
|
|
.bg-deep-purple-13
|
|
background: $deep-purple-13 !important
|
|
.bg-deep-purple-14
|
|
background: $deep-purple-14 !important
|
|
.bg-indigo
|
|
background: $indigo !important
|
|
.bg-indigo-1
|
|
background: $indigo-1 !important
|
|
.bg-indigo-2
|
|
background: $indigo-2 !important
|
|
.bg-indigo-3
|
|
background: $indigo-3 !important
|
|
.bg-indigo-4
|
|
background: $indigo-4 !important
|
|
.bg-indigo-5
|
|
background: $indigo-5 !important
|
|
.bg-indigo-6
|
|
background: $indigo-6 !important
|
|
.bg-indigo-7
|
|
background: $indigo-7 !important
|
|
.bg-indigo-8
|
|
background: $indigo-8 !important
|
|
.bg-indigo-9
|
|
background: $indigo-9 !important
|
|
.bg-indigo-10
|
|
background: $indigo-10 !important
|
|
.bg-indigo-11
|
|
background: $indigo-11 !important
|
|
.bg-indigo-12
|
|
background: $indigo-12 !important
|
|
.bg-indigo-13
|
|
background: $indigo-13 !important
|
|
.bg-indigo-14
|
|
background: $indigo-14 !important
|
|
.bg-blue
|
|
background: $blue !important
|
|
.bg-blue-1
|
|
background: $blue-1 !important
|
|
.bg-blue-2
|
|
background: $blue-2 !important
|
|
.bg-blue-3
|
|
background: $blue-3 !important
|
|
.bg-blue-4
|
|
background: $blue-4 !important
|
|
.bg-blue-5
|
|
background: $blue-5 !important
|
|
.bg-blue-6
|
|
background: $blue-6 !important
|
|
.bg-blue-7
|
|
background: $blue-7 !important
|
|
.bg-blue-8
|
|
background: $blue-8 !important
|
|
.bg-blue-9
|
|
background: $blue-9 !important
|
|
.bg-blue-10
|
|
background: $blue-10 !important
|
|
.bg-blue-11
|
|
background: $blue-11 !important
|
|
.bg-blue-12
|
|
background: $blue-12 !important
|
|
.bg-blue-13
|
|
background: $blue-13 !important
|
|
.bg-blue-14
|
|
background: $blue-14 !important
|
|
.bg-light-blue
|
|
background: $light-blue !important
|
|
.bg-light-blue-1
|
|
background: $light-blue-1 !important
|
|
.bg-light-blue-2
|
|
background: $light-blue-2 !important
|
|
.bg-light-blue-3
|
|
background: $light-blue-3 !important
|
|
.bg-light-blue-4
|
|
background: $light-blue-4 !important
|
|
.bg-light-blue-5
|
|
background: $light-blue-5 !important
|
|
.bg-light-blue-6
|
|
background: $light-blue-6 !important
|
|
.bg-light-blue-7
|
|
background: $light-blue-7 !important
|
|
.bg-light-blue-8
|
|
background: $light-blue-8 !important
|
|
.bg-light-blue-9
|
|
background: $light-blue-9 !important
|
|
.bg-light-blue-10
|
|
background: $light-blue-10 !important
|
|
.bg-light-blue-11
|
|
background: $light-blue-11 !important
|
|
.bg-light-blue-12
|
|
background: $light-blue-12 !important
|
|
.bg-light-blue-13
|
|
background: $light-blue-13 !important
|
|
.bg-light-blue-14
|
|
background: $light-blue-14 !important
|
|
.bg-cyan
|
|
background: $cyan !important
|
|
.bg-cyan-1
|
|
background: $cyan-1 !important
|
|
.bg-cyan-2
|
|
background: $cyan-2 !important
|
|
.bg-cyan-3
|
|
background: $cyan-3 !important
|
|
.bg-cyan-4
|
|
background: $cyan-4 !important
|
|
.bg-cyan-5
|
|
background: $cyan-5 !important
|
|
.bg-cyan-6
|
|
background: $cyan-6 !important
|
|
.bg-cyan-7
|
|
background: $cyan-7 !important
|
|
.bg-cyan-8
|
|
background: $cyan-8 !important
|
|
.bg-cyan-9
|
|
background: $cyan-9 !important
|
|
.bg-cyan-10
|
|
background: $cyan-10 !important
|
|
.bg-cyan-11
|
|
background: $cyan-11 !important
|
|
.bg-cyan-12
|
|
background: $cyan-12 !important
|
|
.bg-cyan-13
|
|
background: $cyan-13 !important
|
|
.bg-cyan-14
|
|
background: $cyan-14 !important
|
|
.bg-teal
|
|
background: $teal !important
|
|
.bg-teal-1
|
|
background: $teal-1 !important
|
|
.bg-teal-2
|
|
background: $teal-2 !important
|
|
.bg-teal-3
|
|
background: $teal-3 !important
|
|
.bg-teal-4
|
|
background: $teal-4 !important
|
|
.bg-teal-5
|
|
background: $teal-5 !important
|
|
.bg-teal-6
|
|
background: $teal-6 !important
|
|
.bg-teal-7
|
|
background: $teal-7 !important
|
|
.bg-teal-8
|
|
background: $teal-8 !important
|
|
.bg-teal-9
|
|
background: $teal-9 !important
|
|
.bg-teal-10
|
|
background: $teal-10 !important
|
|
.bg-teal-11
|
|
background: $teal-11 !important
|
|
.bg-teal-12
|
|
background: $teal-12 !important
|
|
.bg-teal-13
|
|
background: $teal-13 !important
|
|
.bg-teal-14
|
|
background: $teal-14 !important
|
|
.bg-green
|
|
background: $green !important
|
|
.bg-green-1
|
|
background: $green-1 !important
|
|
.bg-green-2
|
|
background: $green-2 !important
|
|
.bg-green-3
|
|
background: $green-3 !important
|
|
.bg-green-4
|
|
background: $green-4 !important
|
|
.bg-green-5
|
|
background: $green-5 !important
|
|
.bg-green-6
|
|
background: $green-6 !important
|
|
.bg-green-7
|
|
background: $green-7 !important
|
|
.bg-green-8
|
|
background: $green-8 !important
|
|
.bg-green-9
|
|
background: $green-9 !important
|
|
.bg-green-10
|
|
background: $green-10 !important
|
|
.bg-green-11
|
|
background: $green-11 !important
|
|
.bg-green-12
|
|
background: $green-12 !important
|
|
.bg-green-13
|
|
background: $green-13 !important
|
|
.bg-green-14
|
|
background: $green-14 !important
|
|
.bg-light-green
|
|
background: $light-green !important
|
|
.bg-light-green-1
|
|
background: $light-green-1 !important
|
|
.bg-light-green-2
|
|
background: $light-green-2 !important
|
|
.bg-light-green-3
|
|
background: $light-green-3 !important
|
|
.bg-light-green-4
|
|
background: $light-green-4 !important
|
|
.bg-light-green-5
|
|
background: $light-green-5 !important
|
|
.bg-light-green-6
|
|
background: $light-green-6 !important
|
|
.bg-light-green-7
|
|
background: $light-green-7 !important
|
|
.bg-light-green-8
|
|
background: $light-green-8 !important
|
|
.bg-light-green-9
|
|
background: $light-green-9 !important
|
|
.bg-light-green-10
|
|
background: $light-green-10 !important
|
|
.bg-light-green-11
|
|
background: $light-green-11 !important
|
|
.bg-light-green-12
|
|
background: $light-green-12 !important
|
|
.bg-light-green-13
|
|
background: $light-green-13 !important
|
|
.bg-light-green-14
|
|
background: $light-green-14 !important
|
|
.bg-lime
|
|
background: $lime !important
|
|
.bg-lime-1
|
|
background: $lime-1 !important
|
|
.bg-lime-2
|
|
background: $lime-2 !important
|
|
.bg-lime-3
|
|
background: $lime-3 !important
|
|
.bg-lime-4
|
|
background: $lime-4 !important
|
|
.bg-lime-5
|
|
background: $lime-5 !important
|
|
.bg-lime-6
|
|
background: $lime-6 !important
|
|
.bg-lime-7
|
|
background: $lime-7 !important
|
|
.bg-lime-8
|
|
background: $lime-8 !important
|
|
.bg-lime-9
|
|
background: $lime-9 !important
|
|
.bg-lime-10
|
|
background: $lime-10 !important
|
|
.bg-lime-11
|
|
background: $lime-11 !important
|
|
.bg-lime-12
|
|
background: $lime-12 !important
|
|
.bg-lime-13
|
|
background: $lime-13 !important
|
|
.bg-lime-14
|
|
background: $lime-14 !important
|
|
.bg-yellow
|
|
background: $yellow !important
|
|
.bg-yellow-1
|
|
background: $yellow-1 !important
|
|
.bg-yellow-2
|
|
background: $yellow-2 !important
|
|
.bg-yellow-3
|
|
background: $yellow-3 !important
|
|
.bg-yellow-4
|
|
background: $yellow-4 !important
|
|
.bg-yellow-5
|
|
background: $yellow-5 !important
|
|
.bg-yellow-6
|
|
background: $yellow-6 !important
|
|
.bg-yellow-7
|
|
background: $yellow-7 !important
|
|
.bg-yellow-8
|
|
background: $yellow-8 !important
|
|
.bg-yellow-9
|
|
background: $yellow-9 !important
|
|
.bg-yellow-10
|
|
background: $yellow-10 !important
|
|
.bg-yellow-11
|
|
background: $yellow-11 !important
|
|
.bg-yellow-12
|
|
background: $yellow-12 !important
|
|
.bg-yellow-13
|
|
background: $yellow-13 !important
|
|
.bg-yellow-14
|
|
background: $yellow-14 !important
|
|
.bg-amber
|
|
background: $amber !important
|
|
.bg-amber-1
|
|
background: $amber-1 !important
|
|
.bg-amber-2
|
|
background: $amber-2 !important
|
|
.bg-amber-3
|
|
background: $amber-3 !important
|
|
.bg-amber-4
|
|
background: $amber-4 !important
|
|
.bg-amber-5
|
|
background: $amber-5 !important
|
|
.bg-amber-6
|
|
background: $amber-6 !important
|
|
.bg-amber-7
|
|
background: $amber-7 !important
|
|
.bg-amber-8
|
|
background: $amber-8 !important
|
|
.bg-amber-9
|
|
background: $amber-9 !important
|
|
.bg-amber-10
|
|
background: $amber-10 !important
|
|
.bg-amber-11
|
|
background: $amber-11 !important
|
|
.bg-amber-12
|
|
background: $amber-12 !important
|
|
.bg-amber-13
|
|
background: $amber-13 !important
|
|
.bg-amber-14
|
|
background: $amber-14 !important
|
|
.bg-orange
|
|
background: $orange !important
|
|
.bg-orange-1
|
|
background: $orange-1 !important
|
|
.bg-orange-2
|
|
background: $orange-2 !important
|
|
.bg-orange-3
|
|
background: $orange-3 !important
|
|
.bg-orange-4
|
|
background: $orange-4 !important
|
|
.bg-orange-5
|
|
background: $orange-5 !important
|
|
.bg-orange-6
|
|
background: $orange-6 !important
|
|
.bg-orange-7
|
|
background: $orange-7 !important
|
|
.bg-orange-8
|
|
background: $orange-8 !important
|
|
.bg-orange-9
|
|
background: $orange-9 !important
|
|
.bg-orange-10
|
|
background: $orange-10 !important
|
|
.bg-orange-11
|
|
background: $orange-11 !important
|
|
.bg-orange-12
|
|
background: $orange-12 !important
|
|
.bg-orange-13
|
|
background: $orange-13 !important
|
|
.bg-orange-14
|
|
background: $orange-14 !important
|
|
.bg-deep-orange
|
|
background: $deep-orange !important
|
|
.bg-deep-orange-1
|
|
background: $deep-orange-1 !important
|
|
.bg-deep-orange-2
|
|
background: $deep-orange-2 !important
|
|
.bg-deep-orange-3
|
|
background: $deep-orange-3 !important
|
|
.bg-deep-orange-4
|
|
background: $deep-orange-4 !important
|
|
.bg-deep-orange-5
|
|
background: $deep-orange-5 !important
|
|
.bg-deep-orange-6
|
|
background: $deep-orange-6 !important
|
|
.bg-deep-orange-7
|
|
background: $deep-orange-7 !important
|
|
.bg-deep-orange-8
|
|
background: $deep-orange-8 !important
|
|
.bg-deep-orange-9
|
|
background: $deep-orange-9 !important
|
|
.bg-deep-orange-10
|
|
background: $deep-orange-10 !important
|
|
.bg-deep-orange-11
|
|
background: $deep-orange-11 !important
|
|
.bg-deep-orange-12
|
|
background: $deep-orange-12 !important
|
|
.bg-deep-orange-13
|
|
background: $deep-orange-13 !important
|
|
.bg-deep-orange-14
|
|
background: $deep-orange-14 !important
|
|
.bg-brown
|
|
background: $brown !important
|
|
.bg-brown-1
|
|
background: $brown-1 !important
|
|
.bg-brown-2
|
|
background: $brown-2 !important
|
|
.bg-brown-3
|
|
background: $brown-3 !important
|
|
.bg-brown-4
|
|
background: $brown-4 !important
|
|
.bg-brown-5
|
|
background: $brown-5 !important
|
|
.bg-brown-6
|
|
background: $brown-6 !important
|
|
.bg-brown-7
|
|
background: $brown-7 !important
|
|
.bg-brown-8
|
|
background: $brown-8 !important
|
|
.bg-brown-9
|
|
background: $brown-9 !important
|
|
.bg-brown-10
|
|
background: $brown-10 !important
|
|
.bg-brown-11
|
|
background: $brown-11 !important
|
|
.bg-brown-12
|
|
background: $brown-12 !important
|
|
.bg-brown-13
|
|
background: $brown-13 !important
|
|
.bg-brown-14
|
|
background: $brown-14 !important
|
|
.bg-grey
|
|
background: $grey !important
|
|
.bg-grey-1
|
|
background: $grey-1 !important
|
|
.bg-grey-2
|
|
background: $grey-2 !important
|
|
.bg-grey-3
|
|
background: $grey-3 !important
|
|
.bg-grey-4
|
|
background: $grey-4 !important
|
|
.bg-grey-5
|
|
background: $grey-5 !important
|
|
.bg-grey-6
|
|
background: $grey-6 !important
|
|
.bg-grey-7
|
|
background: $grey-7 !important
|
|
.bg-grey-8
|
|
background: $grey-8 !important
|
|
.bg-grey-9
|
|
background: $grey-9 !important
|
|
.bg-grey-10
|
|
background: $grey-10 !important
|
|
.bg-grey-11
|
|
background: $grey-11 !important
|
|
.bg-grey-12
|
|
background: $grey-12 !important
|
|
.bg-grey-13
|
|
background: $grey-13 !important
|
|
.bg-grey-14
|
|
background: $grey-14 !important
|
|
.bg-blue-grey
|
|
background: $blue-grey !important
|
|
.bg-blue-grey-1
|
|
background: $blue-grey-1 !important
|
|
.bg-blue-grey-2
|
|
background: $blue-grey-2 !important
|
|
.bg-blue-grey-3
|
|
background: $blue-grey-3 !important
|
|
.bg-blue-grey-4
|
|
background: $blue-grey-4 !important
|
|
.bg-blue-grey-5
|
|
background: $blue-grey-5 !important
|
|
.bg-blue-grey-6
|
|
background: $blue-grey-6 !important
|
|
.bg-blue-grey-7
|
|
background: $blue-grey-7 !important
|
|
.bg-blue-grey-8
|
|
background: $blue-grey-8 !important
|
|
.bg-blue-grey-9
|
|
background: $blue-grey-9 !important
|
|
.bg-blue-grey-10
|
|
background: $blue-grey-10 !important
|
|
.bg-blue-grey-11
|
|
background: $blue-grey-11 !important
|
|
.bg-blue-grey-12
|
|
background: $blue-grey-12 !important
|
|
.bg-blue-grey-13
|
|
background: $blue-grey-13 !important
|
|
.bg-blue-grey-14
|
|
background: $blue-grey-14 !important
|
|
.shadow-transition
|
|
transition: $shadow-transition !important
|
|
@for $z from 1 through 24
|
|
.shadow-#{$z}
|
|
box-shadow: list.nth($shadows, $z)
|
|
.shadow-up-#{$z}
|
|
box-shadow: list.nth($shadows-up, $z)
|
|
.inset-shadow
|
|
box-shadow: $inset-shadow
|
|
.inset-shadow-down
|
|
box-shadow: $inset-shadow-down
|
|
body.body--dark
|
|
@for $z from 1 through 24
|
|
.shadow-#{$z}
|
|
box-shadow: list.nth($dark-shadows, $z)
|
|
.shadow-up-#{$z}
|
|
box-shadow: list.nth($dark-shadows-up, $z)
|
|
.inset-shadow
|
|
box-shadow: $inset-dark-shadow
|
|
.inset-shadow-down
|
|
box-shadow: $inset-dark-shadow-down
|
|
.no-shadow, .shadow-0
|
|
box-shadow: none !important
|
|
.z-marginals
|
|
z-index: $z-marginals
|
|
.z-notify
|
|
z-index: $z-notify
|
|
.z-fullscreen
|
|
z-index: $z-fullscreen
|
|
.z-inherit
|
|
z-index: inherit !important
|
|
@mixin fg($name, $size)
|
|
$noProcNotZero: $size > 0
|
|
@media (min-width: $size)
|
|
#{str-fe('.col<name>', $name, $noProcNotZero)}
|
|
&, &-auto, &-grow, &-shrink
|
|
.row > &, .flex > &
|
|
width: auto
|
|
min-width: 0
|
|
max-width: 100%
|
|
.column > &, .flex > &
|
|
height: auto
|
|
min-height: 0
|
|
max-height: 100%
|
|
&
|
|
flex: 10000 1 0%
|
|
&-auto
|
|
flex: 0 0 auto
|
|
&-grow
|
|
flex: 1 0 auto
|
|
&-shrink
|
|
flex: 0 1 auto
|
|
@for $i from 0 through $flex-cols
|
|
$ic: string.quote('' + $i)
|
|
#{str-fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
@extend .col#{$name}-auto
|
|
.row
|
|
#{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
height: auto
|
|
width: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)
|
|
@if $i != 0 or $name != ''
|
|
#{str-fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
margin-left: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)
|
|
.column
|
|
#{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
height: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)
|
|
width: auto
|
|
@if $size == 0 and $i == $flex-cols
|
|
.row > .col-all
|
|
height: auto
|
|
flex: 0 0 100%
|
|
.row, .column, .flex
|
|
display: flex
|
|
flex-wrap: wrap
|
|
&.inline
|
|
display: inline-flex
|
|
.row.reverse
|
|
flex-direction: row-reverse
|
|
.column
|
|
flex-direction: column
|
|
&.reverse
|
|
flex-direction: column-reverse
|
|
.wrap
|
|
flex-wrap: wrap
|
|
.no-wrap
|
|
flex-wrap: nowrap
|
|
.reverse-wrap
|
|
flex-wrap: wrap-reverse
|
|
.order-
|
|
&first
|
|
order: -10000
|
|
&last
|
|
order: 10000
|
|
&none
|
|
order: 0
|
|
.justify-
|
|
&start
|
|
justify-content: flex-start
|
|
&end
|
|
justify-content: flex-end
|
|
¢er
|
|
justify-content: center
|
|
&between
|
|
justify-content: space-between
|
|
&around
|
|
justify-content: space-around
|
|
&evenly
|
|
justify-content: space-evenly
|
|
.items-
|
|
&start
|
|
align-items: flex-start
|
|
&end
|
|
align-items: flex-end
|
|
¢er
|
|
align-items: center
|
|
&baseline
|
|
align-items: baseline
|
|
&stretch
|
|
align-items: stretch
|
|
.content-
|
|
&start
|
|
align-content: flex-start
|
|
&end
|
|
align-content: flex-end
|
|
¢er
|
|
align-content: center
|
|
&stretch
|
|
align-content: stretch
|
|
&between
|
|
align-content: space-between
|
|
&around
|
|
align-content: space-around
|
|
.self-
|
|
&start
|
|
align-self: flex-start
|
|
&end
|
|
align-self: flex-end
|
|
¢er
|
|
align-self: center
|
|
&baseline
|
|
align-self: baseline
|
|
&stretch
|
|
align-self: stretch
|
|
.flex-center
|
|
@extend .items-center
|
|
@extend .justify-center
|
|
@each $name, $size in $flex-gutter
|
|
.q-gutter
|
|
&-x-#{$name}
|
|
margin-left: -$size
|
|
> *
|
|
margin-left: $size
|
|
&-y-#{$name}
|
|
margin-top: -$size
|
|
> *
|
|
margin-top: $size
|
|
&-#{$name}
|
|
@extend .q-gutter-x-#{$name}
|
|
@extend .q-gutter-y-#{$name}
|
|
.q-col-gutter
|
|
&-x-#{$name}
|
|
margin-left: -$size
|
|
> *
|
|
padding-left: $size
|
|
&-y-#{$name}
|
|
margin-top: -$size
|
|
> *
|
|
padding-top: $size
|
|
&-#{$name}
|
|
@extend .q-col-gutter-x-#{$name}
|
|
@extend .q-col-gutter-y-#{$name}
|
|
@each $name, $size in $sizes
|
|
@include fg("-" + $name, $size)
|
|
.rounded-borders
|
|
border-radius: $generic-border-radius
|
|
.border-radius-inherit
|
|
border-radius: inherit
|
|
.no-transition
|
|
transition: none !important
|
|
.transition-0
|
|
transition: 0s !important
|
|
.glossy
|
|
background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .04)) !important
|
|
.q-placeholder
|
|
&::-webkit-input-placeholder
|
|
color: inherit
|
|
opacity: .7
|
|
&::-moz-placeholder
|
|
color: inherit
|
|
opacity: .7
|
|
&:-ms-input-placeholder
|
|
color: inherit !important
|
|
opacity: .7 !important
|
|
&::-ms-input-placeholder
|
|
color: inherit
|
|
opacity: .7
|
|
&::placeholder
|
|
color: inherit
|
|
opacity: .7
|
|
.q-body--fullscreen-mixin, .q-body--prevent-scroll
|
|
position: fixed !important
|
|
.q-body--force-scrollbar-x
|
|
overflow-x: scroll
|
|
.q-body--force-scrollbar-y
|
|
overflow-y: scroll
|
|
.q-no-input-spinner
|
|
-moz-appearance: textfield !important
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button
|
|
-webkit-appearance: none
|
|
margin: 0
|
|
.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
|
|
-webkit-app-region: drag
|
|
.q-electron-drag .q-btn-item, .q-electron-drag--exception
|
|
-webkit-app-region: no-drag
|
|
img.responsive
|
|
max-width: 100%
|
|
height: auto
|
|
.non-selectable
|
|
user-select: none !important
|
|
.scroll,
|
|
body.mobile .scroll--mobile
|
|
overflow: auto
|
|
.scroll, .scroll-x, .scroll-y
|
|
-webkit-overflow-scrolling: touch
|
|
will-change: scroll-position
|
|
.scroll-x
|
|
overflow-x: auto
|
|
.scroll-y
|
|
overflow-y: auto
|
|
.no-scroll
|
|
overflow: hidden !important
|
|
.no-pointer-events,
|
|
.no-pointer-events--children,
|
|
.no-pointer-events--children *
|
|
pointer-events: none !important
|
|
.all-pointer-events
|
|
pointer-events: all !important
|
|
.cursor
|
|
&-pointer
|
|
cursor: pointer !important
|
|
&-not-allowed
|
|
cursor: not-allowed !important
|
|
&-inherit
|
|
cursor: inherit !important
|
|
&-none
|
|
cursor: none !important
|
|
[aria-busy='true']
|
|
cursor: progress
|
|
[aria-controls]
|
|
cursor: pointer
|
|
[aria-disabled='true']
|
|
cursor: default
|
|
.rotate-45
|
|
transform: rotate(45deg) #{"/* rtl:ignore */"}
|
|
.rotate-90
|
|
transform: rotate(90deg) #{"/* rtl:ignore */"}
|
|
.rotate-135
|
|
transform: rotate(135deg) #{"/* rtl:ignore */"}
|
|
.rotate-180
|
|
transform: rotate(180deg) #{"/* rtl:ignore */"}
|
|
.rotate-225
|
|
transform: rotate(225deg) #{"/* rtl:ignore */"}
|
|
.rotate-270
|
|
transform: rotate(270deg) #{"/* rtl:ignore */"}
|
|
.rotate-315
|
|
transform: rotate(315deg) #{"/* rtl:ignore */"}
|
|
.flip-horizontal
|
|
transform: scaleX(-1)
|
|
.flip-vertical
|
|
transform: scaleY(-1)
|
|
.float-left
|
|
float: left
|
|
.float-right
|
|
float: right
|
|
.relative-position
|
|
position: relative
|
|
.fixed,
|
|
.fixed-full,
|
|
.fullscreen,
|
|
.fixed-center,
|
|
.fixed-bottom,
|
|
.fixed-left,
|
|
.fixed-right,
|
|
.fixed-top,
|
|
.fixed-top-left,
|
|
.fixed-top-right,
|
|
.fixed-bottom-left,
|
|
.fixed-bottom-right
|
|
position: fixed
|
|
.absolute,
|
|
.absolute-full,
|
|
.absolute-center,
|
|
.absolute-bottom,
|
|
.absolute-left,
|
|
.absolute-right,
|
|
.absolute-top,
|
|
.absolute-top-left,
|
|
.absolute-top-right,
|
|
.absolute-bottom-left,
|
|
.absolute-bottom-right
|
|
position: absolute
|
|
.fixed-top, .absolute-top
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
.fixed-right, .absolute-right
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
.fixed-bottom, .absolute-bottom
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
.fixed-left, .absolute-left
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
.fixed-top-left, .absolute-top-left
|
|
top: 0
|
|
left: 0
|
|
.fixed-top-right, .absolute-top-right
|
|
top: 0
|
|
right: 0
|
|
.fixed-bottom-left, .absolute-bottom-left
|
|
bottom: 0
|
|
left: 0
|
|
.fixed-bottom-right, .absolute-bottom-right
|
|
bottom: 0
|
|
right: 0
|
|
.fullscreen
|
|
z-index: $z-fullscreen
|
|
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
|
|
bottom: 0
|
|
left: 0
|
|
.fixed-center, .absolute-center
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
.vertical-
|
|
&top
|
|
vertical-align: top !important
|
|
&middle
|
|
vertical-align: middle !important
|
|
&bottom
|
|
vertical-align: bottom !important
|
|
.on-left
|
|
margin-right: 12px
|
|
.on-right
|
|
margin-left: 12px
|
|
/* internal: */
|
|
.q-position-engine
|
|
margin-top: var(--q-pe-top, 0) !important
|
|
margin-left: var(--q-pe-left, 0) !important
|
|
will-change: auto
|
|
visibility: collapse
|
|
\:root
|
|
@each $name, $size in $sizes
|
|
#{"--q-size-"}#{$name}: #{$size}
|
|
.fit
|
|
width: 100% !important
|
|
height: 100% !important
|
|
.full-height
|
|
height: 100% !important
|
|
.full-width
|
|
width: 100% !important
|
|
margin-left: 0 !important
|
|
margin-right: 0 !important
|
|
.window-height
|
|
margin-top: 0 !important
|
|
margin-bottom: 0 !important
|
|
height: 100vh !important
|
|
.window-width
|
|
margin-left: 0 !important
|
|
margin-right: 0 !important
|
|
width: 100vw !important
|
|
.block
|
|
display: block !important
|
|
.inline-block
|
|
display: inline-block !important
|
|
@each $space, $value in $spaces
|
|
.q-pa-#{$space}
|
|
padding: map.get($value, "y") map.get($value, "x")
|
|
.q-pl-#{$space}
|
|
padding-left: map.get($value, "x")
|
|
.q-pr-#{$space}
|
|
padding-right: map.get($value, "x")
|
|
.q-pt-#{$space}
|
|
padding-top: map.get($value, "y")
|
|
.q-pb-#{$space}
|
|
padding-bottom: map.get($value, "y")
|
|
.q-px-#{$space}
|
|
padding-left: map.get($value, "x")
|
|
padding-right: map.get($value, "x")
|
|
.q-py-#{$space}
|
|
padding-top: map.get($value, "y")
|
|
padding-bottom: map.get($value, "y")
|
|
.q-ma-#{$space}
|
|
margin: map.get($value, "y") map.get($value, "x")
|
|
.q-ml-#{$space}
|
|
margin-left: map.get($value, "x")
|
|
.q-mr-#{$space}
|
|
margin-right: map.get($value, "x")
|
|
.q-mt-#{$space}
|
|
margin-top: map.get($value, "y")
|
|
.q-mb-#{$space}
|
|
margin-bottom: map.get($value, "y")
|
|
.q-mx-#{$space}
|
|
margin-left: map.get($value, "x")
|
|
margin-right: map.get($value, "x")
|
|
.q-my-#{$space}
|
|
margin-top: map.get($value, "y")
|
|
margin-bottom: map.get($value, "y")
|
|
.q-mt-auto, .q-my-auto
|
|
margin-top: auto
|
|
.q-ml-auto
|
|
margin-left: auto
|
|
.q-mb-auto, .q-my-auto
|
|
margin-bottom: auto
|
|
.q-mr-auto
|
|
margin-right: auto
|
|
.q-mx-auto
|
|
margin-left: auto
|
|
margin-right: auto
|
|
.q-touch
|
|
user-select: none
|
|
user-drag: none
|
|
-khtml-user-drag: none
|
|
-webkit-user-drag: none
|
|
.q-touch-x
|
|
touch-action: pan-x
|
|
.q-touch-y
|
|
touch-action: pan-y
|
|
\:root
|
|
--q-transition-duration: .3s
|
|
.q-transition
|
|
&--slide-right,
|
|
&--slide-left,
|
|
&--slide-up,
|
|
&--slide-down,
|
|
&--jump-right,
|
|
&--jump-left,
|
|
&--jump-up,
|
|
&--jump-down,
|
|
&--fade,
|
|
&--scale,
|
|
&--rotate,
|
|
&--flip
|
|
&-enter-active,
|
|
&-leave-active
|
|
--q-transition-duration: .3s
|
|
--q-transition-easing: cubic-bezier(0.215,0.61,0.355,1)
|
|
&-leave-active
|
|
position: absolute
|
|
&--slide-right,
|
|
&--slide-left,
|
|
&--slide-up,
|
|
&--slide-down
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: transform var(--q-transition-duration) var(--q-transition-easing)
|
|
&--slide-right
|
|
&-enter-from
|
|
transform: translate3d(-100%, 0, 0)
|
|
&-leave-to
|
|
transform: translate3d(100%, 0, 0)
|
|
&--slide-left
|
|
&-enter-from
|
|
transform: translate3d(100%, 0, 0)
|
|
&-leave-to
|
|
transform: translate3d(-100%, 0, 0)
|
|
&--slide-up
|
|
&-enter-from
|
|
transform: translate3d(0, 100%, 0)
|
|
&-leave-to
|
|
transform: translate3d(0, -100%, 0)
|
|
&--slide-down
|
|
&-enter-from
|
|
transform: translate3d(0, -100%, 0)
|
|
&-leave-to
|
|
transform: translate3d(0, 100%, 0)
|
|
&--jump-right,
|
|
&--jump-left,
|
|
&--jump-up,
|
|
&--jump-down
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: opacity var(--q-transition-duration), transform var(--q-transition-duration)
|
|
&-enter-from,
|
|
&-leave-to
|
|
opacity: 0
|
|
&--jump-right
|
|
&-enter-from
|
|
transform: translate3d(-15px, 0, 0)
|
|
&-leave-to
|
|
transform: translate3d(15px, 0, 0)
|
|
&--jump-left
|
|
&-enter-from
|
|
transform: translate3d(15px, 0, 0)
|
|
&-leave-to
|
|
transform: translateX(-15px)
|
|
&--jump-up
|
|
&-enter-from
|
|
transform: translate3d(0, 15px, 0)
|
|
&-leave-to
|
|
transform: translate3d(0, -15px, 0)
|
|
&--jump-down
|
|
&-enter-from
|
|
transform: translate3d(0, -15px, 0)
|
|
&-leave-to
|
|
transform: translate3d(0, 15px, 0)
|
|
&--fade
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: opacity var(--q-transition-duration) ease-out
|
|
&-enter-from,
|
|
&-leave-to
|
|
opacity: 0
|
|
&--scale
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: opacity var(--q-transition-duration), transform var(--q-transition-duration) var(--q-transition-easing)
|
|
&-enter-from,
|
|
&-leave-to
|
|
opacity: 0
|
|
transform: scale3d(0, 0, 1)
|
|
&--rotate
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: opacity var(--q-transition-duration), transform var(--q-transition-duration) var(--q-transition-easing)
|
|
transform-style: preserve-3d
|
|
&-enter-from,
|
|
&-leave-to
|
|
opacity: 0
|
|
transform: scale3d(0, 0, 1) rotate3d(0, 0, 1, 90deg)
|
|
&--flip-right,
|
|
&--flip-left,
|
|
&--flip-up,
|
|
&--flip-down
|
|
&-enter-active,
|
|
&-leave-active
|
|
transition: transform var(--q-transition-duration)
|
|
backface-visibility: hidden
|
|
&-enter-to,
|
|
&-leave-from
|
|
transform: perspective(400px) rotate3d(1, 1, 0, 0deg)
|
|
&--flip-right
|
|
&-enter-from
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
|
|
&-leave-to
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
|
|
&--flip-left
|
|
&-enter-from
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
|
|
&-leave-to
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
|
|
&--flip-up
|
|
&-enter-from
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
|
|
&-leave-to
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
|
|
&--flip-down
|
|
&-enter-from
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
|
|
&-leave-to
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
|
|
body
|
|
min-width: 100px
|
|
min-height: 100%
|
|
font-family: $typography-font-family
|
|
-ms-text-size-adjust: 100%
|
|
-webkit-text-size-adjust: 100%
|
|
-webkit-font-smoothing: antialiased
|
|
-moz-osx-font-smoothing: grayscale
|
|
font-smoothing: antialiased
|
|
line-height: $body-line-height
|
|
font-size: $body-font-size
|
|
@each $heading, $value in $h-tags
|
|
#{$heading}
|
|
font-size: map.get($value, "size")
|
|
font-weight: map.get($value, "weight")
|
|
line-height: map.get($value, "line-height")
|
|
letter-spacing: map.get($value, "letter-spacing")
|
|
p
|
|
margin: 0 0 map.get(map.get($spaces, "md"), "y")
|
|
.text-
|
|
@each $heading, $value in $headings
|
|
&#{$heading}
|
|
font-size: map.get($value, "size")
|
|
font-weight: map.get($value, "weight")
|
|
line-height: map.get($value, "line-height")
|
|
letter-spacing: map.get($value, "letter-spacing")
|
|
&uppercase
|
|
text-transform: uppercase
|
|
&lowercase
|
|
text-transform: lowercase
|
|
&capitalize
|
|
text-transform: capitalize
|
|
¢er
|
|
text-align: center
|
|
&left
|
|
text-align: left
|
|
&right
|
|
text-align: right
|
|
&justify
|
|
text-align: justify
|
|
hyphens: auto
|
|
&italic
|
|
font-style: italic
|
|
&bold
|
|
font-weight: bold
|
|
&no-wrap
|
|
white-space: nowrap
|
|
&strike
|
|
text-decoration: line-through
|
|
@each $weight, $value in $text-weights
|
|
&weight-#{$weight}
|
|
font-weight: $value
|
|
small
|
|
font-size: 80%
|
|
big
|
|
font-size: 170%
|
|
sub
|
|
bottom: -.25em
|
|
sup
|
|
top: -.5em
|
|
.no-margin
|
|
margin: 0 !important
|
|
.no-padding
|
|
padding: 0 !important
|
|
.no-border
|
|
border: 0 !important
|
|
.no-border-radius
|
|
border-radius: 0 !important
|
|
.no-box-shadow
|
|
box-shadow: none !important
|
|
.no-outline
|
|
outline: 0 !important
|
|
.ellipsis
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
&-2-lines, &-3-lines
|
|
overflow: hidden
|
|
display: -webkit-box
|
|
-webkit-box-orient: vertical
|
|
&-2-lines
|
|
-webkit-line-clamp: 2
|
|
&-3-lines
|
|
-webkit-line-clamp: 3
|
|
.readonly
|
|
cursor: default !important
|
|
.disabled, [disabled]
|
|
&,
|
|
*
|
|
outline: 0 !important
|
|
cursor: not-allowed !important
|
|
.disabled, [disabled]
|
|
opacity: .6 !important
|
|
.hidden
|
|
display: none !important
|
|
.invisible, .invisible *
|
|
visibility: hidden !important
|
|
transition: none !important
|
|
animation: none !important
|
|
.transparent
|
|
background: transparent !important
|
|
.overflow-auto
|
|
overflow: auto !important
|
|
.overflow-hidden
|
|
overflow: hidden !important
|
|
.overflow-hidden-y
|
|
overflow-y: hidden !important
|
|
.hide-scrollbar
|
|
scrollbar-width: none
|
|
-ms-overflow-style: none
|
|
&::-webkit-scrollbar
|
|
width: 0
|
|
height: 0
|
|
display: none
|
|
.dimmed, .light-dimmed
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
right: 0 #{"/* rtl:ignore */"}
|
|
bottom: 0
|
|
left: 0 #{"/* rtl:ignore */"}
|
|
.dimmed:after
|
|
background: $dimmed-background !important
|
|
.light-dimmed:after
|
|
background: $light-dimmed-background !important
|
|
.z-top
|
|
z-index: $z-top !important
|
|
.z-max
|
|
z-index: $z-max !important
|
|
$platforms: desktop, mobile, native-mobile, cordova, capacitor, electron, touch, within-iframe, platform-ios, platform-android
|
|
@each $type in $platforms
|
|
body:not(.#{$type}) .#{$type}-only,
|
|
body.#{$type} .#{$type}-hide
|
|
display: none !important
|
|
@media all and (orientation: portrait)
|
|
.orientation-landscape
|
|
display: none !important
|
|
@media all and (orientation: landscape)
|
|
.orientation-portrait
|
|
display: none !important
|
|
@media screen
|
|
.print-only
|
|
display: none !important
|
|
@media print
|
|
.print-hide
|
|
display: none !important
|
|
@media (max-width: $breakpoint-xs-max)
|
|
.xs-hide, .gt-xs, .sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
|
|
display: none !important
|
|
@media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-sm-max)
|
|
.sm-hide, .xs, .lt-sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
|
|
display: none !important
|
|
@media (min-width: $breakpoint-md-min) and (max-width: $breakpoint-md-max)
|
|
.md-hide, .xs, .lt-sm, .sm, .lt-md, .gt-md, .lg, .gt-lg, .xl
|
|
display: none !important
|
|
@media (min-width: $breakpoint-lg-min) and (max-width: $breakpoint-lg-max)
|
|
.lg-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .gt-lg, .xl
|
|
display: none !important
|
|
@media (min-width: $breakpoint-xl-min)
|
|
.xl-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .lg, .lt-xl
|
|
display: none !important
|
|
.q-focus-helper, .q-focusable, .q-manual-focusable, .q-hoverable
|
|
outline: 0
|
|
body.desktop
|
|
.q-focus-helper
|
|
position: absolute
|
|
top: 0
|
|
left: 0 #{"/* rtl:ignore */"}
|
|
width: 100%
|
|
height: 100%
|
|
pointer-events: none
|
|
border-radius: inherit
|
|
opacity: 0
|
|
transition: background-color .3s cubic-bezier(.25,.8,.5,1), opacity .4s cubic-bezier(.25,.8,.5,1)
|
|
&:before, &:after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0 #{"/* rtl:ignore */"}
|
|
width: 100%
|
|
height: 100%
|
|
opacity: 0
|
|
border-radius: inherit
|
|
transition: background-color .3s cubic-bezier(.25,.8,.5,1), opacity .6s cubic-bezier(.25,.8,.5,1)
|
|
&:before
|
|
background: #000
|
|
&:after
|
|
background: #fff
|
|
&--rounded
|
|
border-radius: $generic-border-radius
|
|
&--round
|
|
border-radius: 50%
|
|
.q-focusable:focus, .q-manual-focusable--focused, .q-hoverable:hover
|
|
> .q-focus-helper
|
|
background: currentColor
|
|
opacity: .15
|
|
&:before
|
|
opacity: .1
|
|
&:after
|
|
opacity: .4
|
|
.q-focusable:focus, .q-manual-focusable--focused
|
|
> .q-focus-helper
|
|
opacity: .22
|
|
body.body--dark
|
|
color: #fff
|
|
background: var(--q-dark-page)
|
|
.q-dark
|
|
color: #fff
|
|
background: var(--q-dark)
|