5983 lines
145 KiB
Stylus
5983 lines
145 KiB
Stylus
/*!
|
|
* Quasar Framework v0.17.20
|
|
* (c) 2016-present Razvan Stoenescu
|
|
* Released under the MIT License.
|
|
*/
|
|
$space-base ?= 16px
|
|
$space-x-base ?= $space-base
|
|
$space-y-base ?= $space-base
|
|
$spaces ?= {
|
|
none: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
xs: {
|
|
x: ($space-x-base * .25),
|
|
y: ($space-y-base * .25)
|
|
},
|
|
sm: {
|
|
x: ($space-x-base * .5),
|
|
y: ($space-y-base * .5)
|
|
},
|
|
md: {
|
|
x: $space-x-base,
|
|
y: $space-y-base
|
|
},
|
|
lg: {
|
|
x: ($space-x-base * 1.5),
|
|
y: ($space-y-base * 1.5)
|
|
},
|
|
xl: {
|
|
x: ($space-x-base * 3),
|
|
y: ($space-y-base * 3)
|
|
}
|
|
}
|
|
$breakpoint-xs ?= 575px
|
|
$breakpoint-sm ?= 767px
|
|
$breakpoint-md ?= 991px
|
|
$breakpoint-lg ?= 1199px
|
|
$flex-cols ?= 12
|
|
$flex-gutter-xs ?= 8px
|
|
$flex-gutter-sm ?= 16px
|
|
$flex-gutter-md ?= 32px
|
|
$flex-gutter-lg ?= 48px
|
|
$flex-gutter-xl ?= 64px
|
|
$body-background ?= white
|
|
$body-color ?= #0c0c0c
|
|
$flex-gutter ?= {
|
|
none: 0,
|
|
xs: $flex-gutter-xs,
|
|
sm: $flex-gutter-sm,
|
|
md: $flex-gutter-md,
|
|
lg: $flex-gutter-lg,
|
|
xl: $flex-gutter-xl
|
|
}
|
|
$sizes ?= {
|
|
xs: 0,
|
|
sm: $breakpoint-xs + 1,
|
|
md: $breakpoint-sm + 1,
|
|
lg: $breakpoint-md + 1,
|
|
xl: $breakpoint-lg + 1
|
|
}
|
|
$breakpoint-xs-min ?= 0
|
|
$breakpoint-xs-max ?= $breakpoint-xs
|
|
$breakpoint-sm-min ?= $sizes[sm]
|
|
$breakpoint-sm-max ?= $breakpoint-sm
|
|
$breakpoint-md-min ?= $sizes[md]
|
|
$breakpoint-md-max ?= $breakpoint-md
|
|
$breakpoint-lg-min ?= $sizes[lg]
|
|
$breakpoint-lg-max ?= $breakpoint-lg
|
|
$breakpoint-xl-min ?= $sizes[xl]
|
|
$breakpoint-xl-max ?= 9999px
|
|
$backdrop-opacity ?= .3
|
|
$backdrop-background ?= rgba(0, 0, 0, $backdrop-opacity)
|
|
$router-link-active ?= router-link-active
|
|
$router-link-exact-active ?= router-link-exact-active
|
|
$headings ?= {
|
|
display-4: {
|
|
size: 112px,
|
|
weight: 300,
|
|
opacity: .54,
|
|
line-height: $min-line-height,
|
|
letter-spacing: -.04em
|
|
},
|
|
display-3: {
|
|
size: 56px,
|
|
weight: 400,
|
|
opacity: .54,
|
|
line-height: 1.35,
|
|
letter-spacing: -.02em
|
|
},
|
|
display-2: {
|
|
size: 45px,
|
|
weight: 400,
|
|
opacity: .54,
|
|
line-height: 48px,
|
|
letter-spacing: normal
|
|
},
|
|
display-1: {
|
|
size: 34px,
|
|
weight: 400,
|
|
opacity: .54,
|
|
line-height: 40px,
|
|
letter-spacing: normal
|
|
},
|
|
headline: {
|
|
size: 24px,
|
|
weight: 400,
|
|
opacity: .87
|
|
line-height: 32px,
|
|
letter-spacing: normal
|
|
},
|
|
title: {
|
|
size: 20px,
|
|
weight: 500,
|
|
opacity: .87
|
|
line-height: $min-line-height,
|
|
letter-spacing: .02em
|
|
},
|
|
subheading: {
|
|
size: 16px,
|
|
weight: 400,
|
|
opacity: .87
|
|
},
|
|
body-2: {
|
|
size: 14px,
|
|
weight: 500,
|
|
opacity: .87
|
|
},
|
|
body-1: {
|
|
size: 14px,
|
|
weight: 400,
|
|
opacity: .87
|
|
},
|
|
caption: {
|
|
size: 12px,
|
|
weight: 400,
|
|
opacity: .54
|
|
}
|
|
}
|
|
$h-tags ?= {
|
|
h1: $headings.display-4,
|
|
h2: $headings.display-3,
|
|
h3: $headings.display-2,
|
|
h4: $headings.display-1,
|
|
h5: $headings.headline,
|
|
h6: $headings.title
|
|
}
|
|
$text-weights ?= {
|
|
thin: 100,
|
|
light: 300,
|
|
regular: 400,
|
|
medium: 500,
|
|
bold: 700,
|
|
bolder: 900
|
|
}
|
|
$primary ?= #027be3
|
|
$secondary ?= #26A69A
|
|
$tertiary ?= #555
|
|
$positive ?= #21BA45
|
|
$negative ?= #DB2828
|
|
$info ?= #31CCEC
|
|
$warning ?= #F2C037
|
|
$light ?= #bdbdbd
|
|
$dark ?= #424242
|
|
$faded ?= #777
|
|
$form-light ?= #a7a7a7
|
|
$form-dark ?= #979797
|
|
$form-autofill ?= #ff9800
|
|
$dimmed-background ?= rgba(0, 0, 0, .4)
|
|
$light-dimmed-background ?= rgba(255, 255, 255, .6)
|
|
$red = #f44336
|
|
$red-1 = #ffebee
|
|
$red-2 = #ffcdd2
|
|
$red-3 = #ef9a9a
|
|
$red-4 = #e57373
|
|
$red-5 = #ef5350
|
|
$red-6 = #f44336
|
|
$red-7 = #e53935
|
|
$red-8 = #d32f2f
|
|
$red-9 = #c62828
|
|
$red-10 = #b71c1c
|
|
$red-11 = #ff8a80
|
|
$red-12 = #ff5252
|
|
$red-13 = #ff1744
|
|
$red-14 = #d50000
|
|
$pink = #e91e63
|
|
$pink-1 = #fce4ec
|
|
$pink-2 = #f8bbd0
|
|
$pink-3 = #f48fb1
|
|
$pink-4 = #f06292
|
|
$pink-5 = #ec407a
|
|
$pink-6 = #e91e63
|
|
$pink-7 = #d81b60
|
|
$pink-8 = #c2185b
|
|
$pink-9 = #ad1457
|
|
$pink-10 = #880e4f
|
|
$pink-11 = #ff80ab
|
|
$pink-12 = #ff4081
|
|
$pink-13 = #f50057
|
|
$pink-14 = #c51162
|
|
$purple = #9c27b0
|
|
$purple-1 = #f3e5f5
|
|
$purple-2 = #e1bee7
|
|
$purple-3 = #ce93d8
|
|
$purple-4 = #ba68c8
|
|
$purple-5 = #ab47bc
|
|
$purple-6 = #9c27b0
|
|
$purple-7 = #8e24aa
|
|
$purple-8 = #7b1fa2
|
|
$purple-9 = #6a1b9a
|
|
$purple-10 = #4a148c
|
|
$purple-11 = #ea80fc
|
|
$purple-12 = #e040fb
|
|
$purple-13 = #d500f9
|
|
$purple-14 = #aa00ff
|
|
$deep-purple = #673ab7
|
|
$deep-purple-1 = #ede7f6
|
|
$deep-purple-2 = #d1c4e9
|
|
$deep-purple-3 = #b39ddb
|
|
$deep-purple-4 = #9575cd
|
|
$deep-purple-5 = #7e57c2
|
|
$deep-purple-6 = #673ab7
|
|
$deep-purple-7 = #5e35b1
|
|
$deep-purple-8 = #512da8
|
|
$deep-purple-9 = #4527a0
|
|
$deep-purple-10 = #311b92
|
|
$deep-purple-11 = #b388ff
|
|
$deep-purple-12 = #7c4dff
|
|
$deep-purple-13 = #651fff
|
|
$deep-purple-14 = #6200ea
|
|
$indigo = #3f51b5
|
|
$indigo-1 = #e8eaf6
|
|
$indigo-2 = #c5cae9
|
|
$indigo-3 = #9fa8da
|
|
$indigo-4 = #7986cb
|
|
$indigo-5 = #5c6bc0
|
|
$indigo-6 = #3f51b5
|
|
$indigo-7 = #3949ab
|
|
$indigo-8 = #303f9f
|
|
$indigo-9 = #283593
|
|
$indigo-10 = #1a237e
|
|
$indigo-11 = #8c9eff
|
|
$indigo-12 = #536dfe
|
|
$indigo-13 = #3d5afe
|
|
$indigo-14 = #304ffe
|
|
$blue = #2196f3
|
|
$blue-1 = #e3f2fd
|
|
$blue-2 = #bbdefb
|
|
$blue-3 = #90caf9
|
|
$blue-4 = #64b5f6
|
|
$blue-5 = #42a5f5
|
|
$blue-6 = #2196f3
|
|
$blue-7 = #1e88e5
|
|
$blue-8 = #1976d2
|
|
$blue-9 = #1565c0
|
|
$blue-10 = #0d47a1
|
|
$blue-11 = #82b1ff
|
|
$blue-12 = #448aff
|
|
$blue-13 = #2979ff
|
|
$blue-14 = #2962ff
|
|
$light-blue = #03a9f4
|
|
$light-blue-1 = #e1f5fe
|
|
$light-blue-2 = #b3e5fc
|
|
$light-blue-3 = #81d4fa
|
|
$light-blue-4 = #4fc3f7
|
|
$light-blue-5 = #29b6f6
|
|
$light-blue-6 = #03a9f4
|
|
$light-blue-7 = #039be5
|
|
$light-blue-8 = #0288d1
|
|
$light-blue-9 = #0277bd
|
|
$light-blue-10 = #01579b
|
|
$light-blue-11 = #80d8ff
|
|
$light-blue-12 = #40c4ff
|
|
$light-blue-13 = #00b0ff
|
|
$light-blue-14 = #0091ea
|
|
$cyan = #00bcd4
|
|
$cyan-1 = #e0f7fa
|
|
$cyan-2 = #b2ebf2
|
|
$cyan-3 = #80deea
|
|
$cyan-4 = #4dd0e1
|
|
$cyan-5 = #26c6da
|
|
$cyan-6 = #00bcd4
|
|
$cyan-7 = #00acc1
|
|
$cyan-8 = #0097a7
|
|
$cyan-9 = #00838f
|
|
$cyan-10 = #006064
|
|
$cyan-11 = #84ffff
|
|
$cyan-12 = #18ffff
|
|
$cyan-13 = #00e5ff
|
|
$cyan-14 = #00b8d4
|
|
$teal = #009688
|
|
$teal-1 = #e0f2f1
|
|
$teal-2 = #b2dfdb
|
|
$teal-3 = #80cbc4
|
|
$teal-4 = #4db6ac
|
|
$teal-5 = #26a69a
|
|
$teal-6 = #009688
|
|
$teal-7 = #00897b
|
|
$teal-8 = #00796b
|
|
$teal-9 = #00695c
|
|
$teal-10 = #004d40
|
|
$teal-11 = #a7ffeb
|
|
$teal-12 = #64ffda
|
|
$teal-13 = #1de9b6
|
|
$teal-14 = #00bfa5
|
|
$green = #4caf50
|
|
$green-1 = #e8f5e9
|
|
$green-2 = #c8e6c9
|
|
$green-3 = #a5d6a7
|
|
$green-4 = #81c784
|
|
$green-5 = #66bb6a
|
|
$green-6 = #4caf50
|
|
$green-7 = #43a047
|
|
$green-8 = #388e3c
|
|
$green-9 = #2e7d32
|
|
$green-10 = #1b5e20
|
|
$green-11 = #b9f6ca
|
|
$green-12 = #69f0ae
|
|
$green-13 = #00e676
|
|
$green-14 = #00c853
|
|
$light-green = #8bc34a
|
|
$light-green-1 = #f1f8e9
|
|
$light-green-2 = #dcedc8
|
|
$light-green-3 = #c5e1a5
|
|
$light-green-4 = #aed581
|
|
$light-green-5 = #9ccc65
|
|
$light-green-6 = #8bc34a
|
|
$light-green-7 = #7cb342
|
|
$light-green-8 = #689f38
|
|
$light-green-9 = #558b2f
|
|
$light-green-10 = #33691e
|
|
$light-green-11 = #ccff90
|
|
$light-green-12 = #b2ff59
|
|
$light-green-13 = #76ff03
|
|
$light-green-14 = #64dd17
|
|
$lime = #cddc39
|
|
$lime-1 = #f9fbe7
|
|
$lime-2 = #f0f4c3
|
|
$lime-3 = #e6ee9c
|
|
$lime-4 = #dce775
|
|
$lime-5 = #d4e157
|
|
$lime-6 = #cddc39
|
|
$lime-7 = #c0ca33
|
|
$lime-8 = #afb42b
|
|
$lime-9 = #9e9d24
|
|
$lime-10 = #827717
|
|
$lime-11 = #f4ff81
|
|
$lime-12 = #eeff41
|
|
$lime-13 = #c6ff00
|
|
$lime-14 = #aeea00
|
|
$yellow = #ffeb3b
|
|
$yellow-1 = #fffde7
|
|
$yellow-2 = #fff9c4
|
|
$yellow-3 = #fff59d
|
|
$yellow-4 = #fff176
|
|
$yellow-5 = #ffee58
|
|
$yellow-6 = #ffeb3b
|
|
$yellow-7 = #fdd835
|
|
$yellow-8 = #fbc02d
|
|
$yellow-9 = #f9a825
|
|
$yellow-10 = #f57f17
|
|
$yellow-11 = #ffff8d
|
|
$yellow-12 = #ffff00
|
|
$yellow-13 = #ffea00
|
|
$yellow-14 = #ffd600
|
|
$amber = #ffc107
|
|
$amber-1 = #fff8e1
|
|
$amber-2 = #ffecb3
|
|
$amber-3 = #ffe082
|
|
$amber-4 = #ffd54f
|
|
$amber-5 = #ffca28
|
|
$amber-6 = #ffc107
|
|
$amber-7 = #ffb300
|
|
$amber-8 = #ffa000
|
|
$amber-9 = #ff8f00
|
|
$amber-10 = #ff6f00
|
|
$amber-11 = #ffe57f
|
|
$amber-12 = #ffd740
|
|
$amber-13 = #ffc400
|
|
$amber-14 = #ffab00
|
|
$orange = #ff9800
|
|
$orange-1 = #fff3e0
|
|
$orange-2 = #ffe0b2
|
|
$orange-3 = #ffcc80
|
|
$orange-4 = #ffb74d
|
|
$orange-5 = #ffa726
|
|
$orange-6 = #ff9800
|
|
$orange-7 = #fb8c00
|
|
$orange-8 = #f57c00
|
|
$orange-9 = #ef6c00
|
|
$orange-10 = #e65100
|
|
$orange-11 = #ffd180
|
|
$orange-12 = #ffab40
|
|
$orange-13 = #ff9100
|
|
$orange-14 = #ff6d00
|
|
$deep-orange = #ff5722
|
|
$deep-orange-1 = #fbe9e7
|
|
$deep-orange-2 = #ffccbc
|
|
$deep-orange-3 = #ffab91
|
|
$deep-orange-4 = #ff8a65
|
|
$deep-orange-5 = #ff7043
|
|
$deep-orange-6 = #ff5722
|
|
$deep-orange-7 = #f4511e
|
|
$deep-orange-8 = #e64a19
|
|
$deep-orange-9 = #d84315
|
|
$deep-orange-10 = #bf360c
|
|
$deep-orange-11 = #ff9e80
|
|
$deep-orange-12 = #ff6e40
|
|
$deep-orange-13 = #ff3d00
|
|
$deep-orange-14 = #dd2c00
|
|
$brown = #795548
|
|
$brown-1 = #efebe9
|
|
$brown-2 = #d7ccc8
|
|
$brown-3 = #bcaaa4
|
|
$brown-4 = #a1887f
|
|
$brown-5 = #8d6e63
|
|
$brown-6 = #795548
|
|
$brown-7 = #6d4c41
|
|
$brown-8 = #5d4037
|
|
$brown-9 = #4e342e
|
|
$brown-10 = #3e2723
|
|
$brown-11 = #d7ccc8
|
|
$brown-12 = #bcaaa4
|
|
$brown-13 = #8d6e63
|
|
$brown-14 = #5d4037
|
|
$grey ?= #9e9e9e
|
|
$grey-1 ?= #fafafa
|
|
$grey-2 ?= #f5f5f5
|
|
$grey-3 ?= #eeeeee
|
|
$grey-4 ?= #e0e0e0
|
|
$grey-5 ?= #bdbdbd
|
|
$grey-6 ?= #9e9e9e
|
|
$grey-7 ?= #757575
|
|
$grey-8 ?= #616161
|
|
$grey-9 ?= #424242
|
|
$grey-10 ?= #212121
|
|
$grey-11 ?= #f5f5f5
|
|
$grey-12 ?= #eeeeee
|
|
$grey-13 ?= #bdbdbd
|
|
$grey-14 ?= #616161
|
|
$blue-grey = #607d8b
|
|
$blue-grey-1 = #eceff1
|
|
$blue-grey-2 = #cfd8dc
|
|
$blue-grey-3 = #b0bec5
|
|
$blue-grey-4 = #90a4ae
|
|
$blue-grey-5 = #78909c
|
|
$blue-grey-6 = #607d8b
|
|
$blue-grey-7 = #546e7a
|
|
$blue-grey-8 = #455a64
|
|
$blue-grey-9 = #37474f
|
|
$blue-grey-10 = #263238
|
|
$blue-grey-11 = #cfd8dc
|
|
$blue-grey-12 = #b0bec5
|
|
$blue-grey-13 = #78909c
|
|
$blue-grey-14 = #455a64
|
|
active-color($color)
|
|
if luminosity($color) > .29
|
|
darken($color, 10%)
|
|
else
|
|
lighten($color, 30%)
|
|
light-active-color($color)
|
|
if luminosity($color) > .29
|
|
darken($color, 5%)
|
|
else
|
|
lighten($color, 20%)
|
|
dark-active-color($color)
|
|
if luminosity($color) > .1
|
|
darken($color, 20%)
|
|
else
|
|
lighten($color, 20%)
|
|
hover-color($color)
|
|
if luminosity($color) > .29
|
|
darken($color, 15%)
|
|
else
|
|
lighten($color, 15%)
|
|
strong-active-color($color)
|
|
if luminosity($color) > .29
|
|
darken($color, 20%)
|
|
else
|
|
lighten($color, 80%)
|
|
composite-color($color)
|
|
if luminosity($color) > .29
|
|
darken($color, 35%)
|
|
else
|
|
lighten($color, 65%)
|
|
opposite-non-color($color)
|
|
if luminosity($color) > .29
|
|
black
|
|
else
|
|
white
|
|
max(value1, value2)
|
|
if value1 <= value2
|
|
value2
|
|
else
|
|
value1
|
|
$ios-statusbar-height ?= 20px
|
|
$z-fab ?= 990
|
|
$z-side ?= 1000
|
|
$z-marginals ?= 2000
|
|
$z-fixed-drawer ?= 3000
|
|
$z-modal ?= 5000
|
|
$z-fullscreen ?= 6000
|
|
$z-top ?= 7000
|
|
$z-popover ?= 8000
|
|
$z-tooltip ?= 9000
|
|
$z-notify ?= 9500
|
|
$z-max ?= 9998
|
|
$shadow-color ?= black
|
|
$shadow-transition ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)
|
|
$inset-shadow = 0 7px 9px -7px alpha($shadow-color, .7) inset
|
|
$elevation-umbra = rgba($shadow-color, .2)
|
|
$elevation-penumbra = rgba($shadow-color, .14)
|
|
$elevation-ambient = rgba($shadow-color, .12)
|
|
$shadow-0 = 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
|
|
$shadow-1 = 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient
|
|
$shadow-2 = 0 1px 5px $elevation-umbra, 0 2px 2px $elevation-penumbra, 0 3px 1px -2px $elevation-ambient
|
|
$shadow-3 = 0 1px 8px $elevation-umbra, 0 3px 4px $elevation-penumbra, 0 3px 3px -2px $elevation-ambient
|
|
$shadow-4 = 0 2px 4px -1px $elevation-umbra, 0 4px 5px $elevation-penumbra, 0 1px 10px $elevation-ambient
|
|
$shadow-5 = 0 3px 5px -1px $elevation-umbra, 0 5px 8px $elevation-penumbra, 0 1px 14px $elevation-ambient
|
|
$shadow-6 = 0 3px 5px -1px $elevation-umbra, 0 6px 10px $elevation-penumbra, 0 1px 18px $elevation-ambient
|
|
$shadow-7 = 0 4px 5px -2px $elevation-umbra, 0 7px 10px 1px $elevation-penumbra, 0 2px 16px 1px $elevation-ambient
|
|
$shadow-8 = 0 5px 5px -3px $elevation-umbra, 0 8px 10px 1px $elevation-penumbra, 0 3px 14px 2px $elevation-ambient
|
|
$shadow-9 = 0 5px 6px -3px $elevation-umbra, 0 9px 12px 1px $elevation-penumbra, 0 3px 16px 2px $elevation-ambient
|
|
$shadow-10 = 0 6px 6px -3px $elevation-umbra, 0 10px 14px 1px $elevation-penumbra, 0 4px 18px 3px $elevation-ambient
|
|
$shadow-11 = 0 6px 7px -4px $elevation-umbra, 0 11px 15px 1px $elevation-penumbra, 0 4px 20px 3px $elevation-ambient
|
|
$shadow-12 = 0 7px 8px -4px $elevation-umbra, 0 12px 17px 2px $elevation-penumbra, 0 5px 22px 4px $elevation-ambient
|
|
$shadow-13 = 0 7px 8px -4px $elevation-umbra, 0 13px 19px 2px $elevation-penumbra, 0 5px 24px 4px $elevation-ambient
|
|
$shadow-14 = 0 7px 9px -4px $elevation-umbra, 0 14px 21px 2px $elevation-penumbra, 0 5px 26px 4px $elevation-ambient
|
|
$shadow-15 = 0 8px 9px -5px $elevation-umbra, 0 15px 22px 2px $elevation-penumbra, 0 6px 28px 5px $elevation-ambient
|
|
$shadow-16 = 0 8px 10px -5px $elevation-umbra, 0 16px 24px 2px $elevation-penumbra, 0 6px 30px 5px $elevation-ambient
|
|
$shadow-17 = 0 8px 11px -5px $elevation-umbra, 0 17px 26px 2px $elevation-penumbra, 0 6px 32px 5px $elevation-ambient
|
|
$shadow-18 = 0 9px 11px -5px $elevation-umbra, 0 18px 28px 2px $elevation-penumbra, 0 7px 34px 6px $elevation-ambient
|
|
$shadow-19 = 0 9px 12px -6px $elevation-umbra, 0 19px 29px 2px $elevation-penumbra, 0 7px 36px 6px $elevation-ambient
|
|
$shadow-20 = 0 10px 13px -6px $elevation-umbra, 0 20px 31px 3px $elevation-penumbra, 0 8px 38px 7px $elevation-ambient
|
|
$shadow-21 = 0 10px 13px -6px $elevation-umbra, 0 21px 33px 3px $elevation-penumbra, 0 8px 40px 7px $elevation-ambient
|
|
$shadow-22 = 0 10px 14px -6px $elevation-umbra, 0 22px 35px 3px $elevation-penumbra, 0 8px 42px 7px $elevation-ambient
|
|
$shadow-23 = 0 11px 14px -7px $elevation-umbra, 0 23px 36px 3px $elevation-penumbra, 0 9px 44px 8px $elevation-ambient
|
|
$shadow-24 = 0 11px 15px -7px $elevation-umbra, 0 24px 38px 3px $elevation-penumbra, 0 9px 46px 8px $elevation-ambient
|
|
$shadow-up-0 = 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
|
|
$shadow-up-1 = 0 -1px 3px $elevation-umbra, 0 -1px 1px $elevation-penumbra, 0 -2px 1px -1px $elevation-ambient
|
|
$shadow-up-2 = 0 -1px 5px $elevation-umbra, 0 -2px 2px $elevation-penumbra, 0 -3px 1px -2px $elevation-ambient
|
|
$shadow-up-3 = 0 -1px 8px $elevation-umbra, 0 -3px 4px $elevation-penumbra, 0 -3px 3px -2px $elevation-ambient
|
|
$shadow-up-4 = 0 -2px 4px -1px $elevation-umbra, 0 -4px 5px $elevation-penumbra, 0 -1px 10px $elevation-ambient
|
|
$shadow-up-5 = 0 -3px 5px -1px $elevation-umbra, 0 -5px 8px $elevation-penumbra, 0 -1px 14px $elevation-ambient
|
|
$shadow-up-6 = 0 -3px 5px -1px $elevation-umbra, 0 -6px 10px $elevation-penumbra, 0 -1px 18px $elevation-ambient
|
|
$shadow-up-7 = 0 -4px 5px -2px $elevation-umbra, 0 -7px 10px 1px $elevation-penumbra, 0 -2px 16px 1px $elevation-ambient
|
|
$shadow-up-8 = 0 -5px 5px -3px $elevation-umbra, 0 -8px 10px 1px $elevation-penumbra, 0 -3px 14px 2px $elevation-ambient
|
|
$shadow-up-9 = 0 -5px 6px -3px $elevation-umbra, 0 -9px 12px 1px $elevation-penumbra, 0 -3px 16px 2px $elevation-ambient
|
|
$shadow-up-10 = 0 -6px 6px -3px $elevation-umbra, 0 -10px 14px 1px $elevation-penumbra, 0 -4px 18px 3px $elevation-ambient
|
|
$shadow-up-11 = 0 -6px 7px -4px $elevation-umbra, 0 -11px 15px 1px $elevation-penumbra, 0 -4px 20px 3px $elevation-ambient
|
|
$shadow-up-12 = 0 -7px 8px -4px $elevation-umbra, 0 -12px 17px 2px $elevation-penumbra, 0 -5px 22px 4px $elevation-ambient
|
|
$shadow-up-13 = 0 -7px 8px -4px $elevation-umbra, 0 -13px 19px 2px $elevation-penumbra, 0 -5px 24px 4px $elevation-ambient
|
|
$shadow-up-14 = 0 -7px 9px -4px $elevation-umbra, 0 -14px 21px 2px $elevation-penumbra, 0 -5px 26px 4px $elevation-ambient
|
|
$shadow-up-15 = 0 -8px 9px -5px $elevation-umbra, 0 -15px 22px 2px $elevation-penumbra, 0 -6px 28px 5px $elevation-ambient
|
|
$shadow-up-16 = 0 -8px 10px -5px $elevation-umbra, 0 -16px 24px 2px $elevation-penumbra, 0 -6px 30px 5px $elevation-ambient
|
|
$shadow-up-17 = 0 -8px 11px -5px $elevation-umbra, 0 -17px 26px 2px $elevation-penumbra, 0 -6px 32px 5px $elevation-ambient
|
|
$shadow-up-18 = 0 -9px 11px -5px $elevation-umbra, 0 -18px 28px 2px $elevation-penumbra, 0 -7px 34px 6px $elevation-ambient
|
|
$shadow-up-19 = 0 -9px 12px -6px $elevation-umbra, 0 -19px 29px 2px $elevation-penumbra, 0 -7px 36px 6px $elevation-ambient
|
|
$shadow-up-20 = 0 -10px 13px -6px $elevation-umbra, 0 -20px 31px 3px $elevation-penumbra, 0 -8px 38px 7px $elevation-ambient
|
|
$shadow-up-21 = 0 -10px 13px -6px $elevation-umbra, 0 -21px 33px 3px $elevation-penumbra, 0 -8px 40px 7px $elevation-ambient
|
|
$shadow-up-22 = 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-penumbra, 0 -8px 42px 7px $elevation-ambient
|
|
$shadow-up-23 = 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient
|
|
$shadow-up-24 = 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient
|
|
$generic-border-radius ?= 3px
|
|
$generic-hover-transition ?= .3s cubic-bezier(.25, .8, .5, 1)
|
|
$typography-font-family ?= 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
|
$min-line-height ?= 1.12
|
|
$action-sheet-background ?= white
|
|
$action-sheet-hover-background ?= #d0d0d0
|
|
$alert-padding ?= 12px
|
|
$alert-border-radius ?= $generic-border-radius
|
|
$alert-min-width ?= 200px
|
|
$button-border-radius ?= $generic-border-radius
|
|
$button-padding ?= 4px 16px
|
|
$button-dense-padding ?= .285em
|
|
$button-transition ?= $generic-hover-transition
|
|
$button-font-size ?= 14px
|
|
$button-font-weight ?= 500
|
|
$button-shadow ?= $shadow-2
|
|
$button-shadow-active ?= $shadow-8
|
|
$button-rounded-border-radius ?= 28px
|
|
$button-push-border-radius ?= 7px
|
|
$card-faded-color ?= rgba(0, 0, 0, .4)
|
|
$card-separator-color ?= rgba(0, 0, 0, .1)
|
|
$card-overlay-color ?= rgba(0, 0, 0, .47)
|
|
$card-shadow ?= $shadow-2
|
|
$card-dark-faded-color ?= rgba(255, 255, 255, .6)
|
|
$card-dark-separator-color ?= rgba(255, 255, 255, .2)
|
|
$carousel-padding ?= 18px
|
|
$carousel-quick-nav-icon-font-size ?= 18px
|
|
$carousel-quick-nav-icon-inactive-font-size ?= 14px
|
|
$carousel-quick-nav-background ?= rgba(0, 0, 0, .3)
|
|
$chat-message-received-color ?= black
|
|
$chat-message-received-bg ?= $green-4
|
|
$chat-message-sent-color ?= black
|
|
$chat-message-sent-bg ?= $grey-4
|
|
$chat-message-avatar-size ?= 48px
|
|
$chat-message-border-radius ?= $generic-border-radius
|
|
$chat-message-distance ?= 8px
|
|
$chat-message-text-padding ?= 8px
|
|
$chip-border ?= #e0e0e0
|
|
$chip-border-radius ?= 2rem
|
|
$chip-font-size ?= 14px
|
|
$chip-padding-horizontal ?= 0
|
|
$chip-padding-vertical ?= 12px
|
|
$chip-height ?= 32px
|
|
$chip-icon-size ?= 24px
|
|
$chip-small-icon-size ?= 16px
|
|
$chip-small-height ?= 26px
|
|
$chip-color ?= black
|
|
$chip-background ?= $grey-3
|
|
$item-dense-factor ?= .2
|
|
$item-sparse-factor ?= 1.4
|
|
$item-base-color ?= $grey-5
|
|
$item-highlight-color ?= alpha($item-base-color, 50%)
|
|
$item-stripe-color ?= alpha($item-base-color, 65%)
|
|
$item-active-color ?= alpha($item-base-color, 40%)
|
|
$item-side-color ?= #737373
|
|
$item-label-color ?= $grey-7
|
|
$item-content-secondary-text-color ?= $grey-7
|
|
$item-separator-color ?= rgb(224, 224, 224)
|
|
$item-base-dark-color ?= $grey-7
|
|
$item-highlight-dark-color ?= alpha($item-base-dark-color, 30%)
|
|
$item-stripe-dark-color ?= alpha($item-base-dark-color, 45%)
|
|
$item-active-dark-color ?= alpha($item-base-dark-color, 20%)
|
|
$item-side-dark-color ?= #bbb
|
|
$item-label-dark-color ?= rgba(255,255,255,0.64)
|
|
$item-content-secondary-text-dark-color ?= $grey-5
|
|
$item-separator-dark-color ?= rgba(255,255,255,0.32)
|
|
$item-min-height ?= 40px
|
|
$item-padding ?= 16px
|
|
$item-gutter ?= 10px
|
|
$item-primary-size ?= 38px
|
|
$item-inverted-icon-size ?= round($item-primary-size * .52)
|
|
$item-icon-size ?= round($item-primary-size * .63)
|
|
$item-image-size ?= round(3 * $item-primary-size)
|
|
$item-font-size ?= 1rem
|
|
$item-stamp-font-size ?= .8rem
|
|
$item-inset ?= ($item-gutter + $item-primary-size)
|
|
$jumbotron-padding ?= 2rem 1rem
|
|
$jumbotron-large-padding ?= 4rem 2rem
|
|
$jumbotron-border-radius ?= $generic-border-radius
|
|
$jumbotron-bg ?= $grey-3
|
|
$jumbotron-dark-bg ?= $grey-7
|
|
$jumbotron-dark-color ?= white
|
|
$collapsible-padding ?= 8px 16px
|
|
$collapsible-indent-left-padding ?= ($item-primary-size + $item-gutter)
|
|
$collapsible-active-color ?= $item-active-color
|
|
$collapsible-menu-left-padding ?= 48px
|
|
$datetime-range-space ?= 10px
|
|
$datetime-input-min-width ?= 70px
|
|
$dot-color ?= $red
|
|
$dot-opacity ?= .8
|
|
$dot-size ?= 10px
|
|
$dot-position-top ?= -2px
|
|
$dot-position-right ?= -10px
|
|
$editor-border-color ?= #ccc
|
|
$editor-border ?= 1px solid $editor-border-color
|
|
$editor-content-padding ?= 10px
|
|
$editor-content-min-height ?= 10em
|
|
$editor-toolbar-padding ?= 4px
|
|
$editor-hr-color ?= $editor-border-color
|
|
$editor-button-gutter ?= 5px
|
|
$fab-margin ?= 5px
|
|
$field-icon-size ?= 28px
|
|
$field-label-color ?= $form-dark
|
|
$field-dark-label-color ?= $form-light
|
|
$table-transition ?= $generic-hover-transition
|
|
$table-border-radius ?= $generic-border-radius
|
|
$table-box-shadow ?= $shadow-2
|
|
$table-border-color ?= rgba(0, 0, 0, .12)
|
|
$table-color ?= rgba(0, 0, 0, .87)
|
|
$table-header-color ?= rgba(0, 0, 0, .54)
|
|
$table-hover-background ?= rgba(0, 0, 0, .03)
|
|
$table-selected-background ?= rgba(0, 0, 0, .06)
|
|
$table-dark-border-color ?= rgba(255, 255, 255, .12)
|
|
$table-dark-color ?= $grey-3
|
|
$table-dark-header-color ?= rgba(255, 255, 255, .64)
|
|
$table-dark-hover-background ?= rgba(255, 255, 255, .1)
|
|
$table-dark-selected-background ?= rgba(255, 255, 255, .2)
|
|
$input-margin-top ?= 16px
|
|
$input-margin-bottom ?= 8px
|
|
$input-font-size ?= 1rem
|
|
$input-label-top-scale ?= .75
|
|
$input-padding-x ?= 8px
|
|
$input-padding-top ?= 25px
|
|
$input-padding-bottom ?= 7px
|
|
$input-control-size ?= 24px
|
|
$input-control-margin ?= 4px
|
|
$input-min-height ?= $input-control-size
|
|
$input-hide-underline-padding-top ?= 18px
|
|
$input-box-padding-top ?= $input-padding-top
|
|
$input-box-padding-bottom ?= $input-padding-bottom
|
|
$input-inverted-border-radius ?= $generic-border-radius
|
|
$input-label-transform-base ?= translate(0, 0)
|
|
$input-label-box-transform-base ?= translate(0, -21px)
|
|
$input-label-transform ?= translate(0, -100%)
|
|
$input-label-box-transform ?= translate(0, -125%)
|
|
$input-frame-transition ?= all .45s cubic-bezier(.23, 1, .32, 1), display 0s 0s
|
|
$input-frame-transition-border ?= transform .45s cubic-bezier(.23, 1, .32, 1), border-left-width 0s .45s, border-right-width 0s .45s
|
|
$toolbar-min-height ?= 50px
|
|
$toolbar-padding ?= 4px 12px
|
|
$toolbar-title-font-size ?= 18px
|
|
$toolbar-subtitle-font-size ?= 12px
|
|
$toolbar-title-font-weight ?= 500
|
|
$toolbar-title-padding ?= 0 12px
|
|
$layout-aside-background ?= white
|
|
$layout-header-shadow ?= $shadow-3
|
|
$layout-footer-shadow ?= $shadow-up-3
|
|
$layout-aside-shadow ?= $shadow-5
|
|
$loading-background ?= $dimmed-background
|
|
$modal-background ?= white
|
|
$modal-width ?= 80vw
|
|
$modal-max-width ?= 1000px
|
|
$modal-height ?= 80vh
|
|
$modal-max-height ?= 1000px
|
|
$modal-header-font-size ?= 1.6rem
|
|
$modal-header-padding ?= 24px 24px 10px 24px
|
|
$modal-header-text-align ?= left
|
|
$modal-body-color ?= rgba(0, 0, 0, .5)
|
|
$modal-body-padding ?= 10px 24px
|
|
$modal-scroll-size ?= 240px
|
|
$modal-buttons-padding ?= 22px 8px 8px
|
|
$label-offset ?= 8px
|
|
$paralax-text-shadow ?= 0 0 5px white
|
|
$popover-background ?= white
|
|
$popover-box-shadow ?= $shadow-2
|
|
$popover-max-width ?= 100vw
|
|
$progress-track-height ?= 5px
|
|
$progress-track-color ?= currentColor
|
|
$progress-track-opacity ?= .2
|
|
$progress-transition ?= width .3s linear
|
|
$pull-to-refresh-font-size ?= 1rem
|
|
$pull-to-refresh-icon-size ?= 2rem
|
|
$rating-grade-color ?= $yellow
|
|
$rating-shadow ?= 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
|
|
$stepper-divider-color ?= rgba(0, 0, 0, .12)
|
|
$stepper-label-color ?= rgba(0, 0, 0, .56)
|
|
$stepper-label-inactive-color ?= rgba(0, 0, 0, .42)
|
|
$stepper-hover-background ?= rgba(0, 0, 0, .05)
|
|
$stepper-pane-padding ?= 16px
|
|
$stepper-border-radius ?= $generic-border-radius
|
|
$tabs-padding ?= 8px 10px
|
|
$tabs-big-screen-horiz-padding ?= 25px
|
|
$tabs-min-height ?= 48px
|
|
$tabs-big-screen-side-padding ?= 12px
|
|
$tabs-pane-padding ?= 12px
|
|
$tabs-pane-border ?= 1px solid rgba(0, 0, 0, .1)
|
|
$tabs-unselected-opacity ?= .7
|
|
$tabs-font-size ?= .95rem
|
|
$tabs-icon-font-size ?= 27px
|
|
$tabs-font-weight ?= 500
|
|
$tabs-text-transform ?= uppercase
|
|
$tabs-border-width ?= 2px
|
|
$tooltip-color ?= #fafafa
|
|
$tooltip-background ?= #747474
|
|
$tooltip-padding ?= 10px
|
|
$tooltip-border-radius ?= $generic-border-radius
|
|
$tooltip-fontsize ?= 12px
|
|
*, *:before, *:after
|
|
box-sizing inherit
|
|
-webkit-tap-highlight-color transparent
|
|
-moz-tap-highlight-color transparent
|
|
html, body, #q-app
|
|
width 100%
|
|
direction ltr
|
|
html, body
|
|
margin 0
|
|
box-sizing border-box
|
|
input[type='text'], input[type='email'], input[type='search'], input[type='password']
|
|
-webkit-appearance none
|
|
-moz-appearance none /* mobile firefox too! */
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
main,
|
|
menu,
|
|
nav,
|
|
section,
|
|
summary
|
|
display block
|
|
audio:not([controls])
|
|
display none
|
|
height 0
|
|
abbr[title]
|
|
border-bottom none
|
|
text-decoration underline
|
|
text-decoration underline dotted
|
|
dfn
|
|
font-style italic
|
|
img
|
|
border-style none
|
|
svg:not(:root)
|
|
overflow hidden
|
|
code, kbd, pre, samp
|
|
font-family monospace, monospace
|
|
font-size 1em
|
|
hr
|
|
box-sizing content-box
|
|
height 0
|
|
overflow visible
|
|
button,
|
|
input,
|
|
select,
|
|
textarea
|
|
font inherit
|
|
margin 0
|
|
optgroup
|
|
font-weight bold
|
|
button,
|
|
input,
|
|
select
|
|
overflow visible
|
|
button::-moz-focus-inner, input::-moz-focus-inner
|
|
border 0
|
|
padding 0
|
|
button:-moz-focusring, input:-moz-focusring
|
|
outline 1px dotted ButtonText
|
|
textarea
|
|
overflow auto
|
|
input[type='search']
|
|
-webkit-appearance textfield
|
|
input[type='search']::-webkit-search-cancel-button,
|
|
input[type='search']::-webkit-search-decoration
|
|
-webkit-appearance none
|
|
.q-icon
|
|
line-height 1
|
|
letter-spacing normal
|
|
text-transform none
|
|
white-space nowrap
|
|
word-wrap normal
|
|
direction ltr
|
|
.q-icon, .material-icons
|
|
user-select none
|
|
cursor inherit
|
|
font-size inherit
|
|
display inline-flex
|
|
align-items center
|
|
justify-content center
|
|
vertical-align middle
|
|
.q-actionsheet-title
|
|
min-height 56px
|
|
padding 0 16px
|
|
color $faded
|
|
color var(--q-color-faded)
|
|
.q-actionsheet-body
|
|
max-height 500px
|
|
.q-actionsheet-grid
|
|
padding 8px 16px
|
|
.q-item-separator-component
|
|
margin 24px 0
|
|
.q-actionsheet-grid-item
|
|
padding 8px 16px
|
|
transition background .3s
|
|
&:hover, &:focus
|
|
background $action-sheet-hover-background
|
|
outline 0
|
|
i, img
|
|
font-size 48px
|
|
margin-bottom 8px
|
|
.avatar
|
|
width 48px
|
|
height 48px
|
|
span
|
|
color $faded
|
|
color var(--q-color-faded)
|
|
.q-loading-bar
|
|
position fixed
|
|
z-index $z-max
|
|
transition transform .5s cubic-bezier(0, 0, .2, 1), opacity .5s
|
|
&.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-alert
|
|
border-radius $generic-border-radius
|
|
box-shadow none
|
|
.avatar
|
|
width 32px
|
|
height 32px
|
|
.q-alert-side, .q-alert-content
|
|
padding 12px
|
|
font-size 16px
|
|
word-break break-word
|
|
.q-alert-side
|
|
font-size 24px
|
|
background rgba(0, 0, 0, .1)
|
|
.q-alert-actions
|
|
padding 12px 12px 12px 0
|
|
.q-alert-detail
|
|
font-size 12px
|
|
.q-breadcrumbs
|
|
.q-icon, .q-breadcrumbs-separator
|
|
font-size 150%
|
|
.q-breadcrumbs-last a
|
|
pointer-events none
|
|
[dir=rtl] .q-breadcrumbs-separator .q-icon
|
|
transform scaleX(-1) /* rtl:ignore */
|
|
.q-btn
|
|
outline 0
|
|
border 0
|
|
vertical-align middle
|
|
cursor pointer
|
|
padding $button-padding
|
|
font-size $button-font-size
|
|
text-decoration none
|
|
color inherit
|
|
background transparent
|
|
transition $button-transition
|
|
min-height 2.572em
|
|
box-shadow $button-shadow
|
|
font-weight $button-font-weight
|
|
text-transform uppercase
|
|
button&
|
|
-webkit-appearance button
|
|
a&
|
|
display inline-flex
|
|
.q-icon, .q-spinner
|
|
font-size 1.4em
|
|
|
|
.q-btn-inner
|
|
transition opacity .6s
|
|
&--hidden
|
|
opacity 0
|
|
&:before
|
|
content ''
|
|
&.disabled
|
|
opacity .7 !important
|
|
&:not(.disabled):not(.q-btn-flat):not(.q-btn-outline):not(.q-btn-push)
|
|
&:before
|
|
|
|
|
|
|
|
|
|
content ''
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
bottom 0
|
|
left 0
|
|
border-radius inherit
|
|
z-index -1
|
|
transition $button-transition
|
|
&:active:before
|
|
&.active:before
|
|
box-shadow $button-shadow-active
|
|
.q-btn-progress
|
|
transition all .3s
|
|
height 100%
|
|
background rgba(255, 255, 255, .25)
|
|
&.q-btn-dark-progress
|
|
background rgba(0, 0, 0, .2)
|
|
.q-btn-no-uppercase
|
|
text-transform none
|
|
.q-btn-rectangle
|
|
border-radius $button-border-radius
|
|
.q-btn-outline
|
|
border 1px solid currentColor
|
|
background transparent !important
|
|
.q-btn-push
|
|
border-radius $button-push-border-radius
|
|
border-bottom 3px solid rgba(0, 0, 0, .15)
|
|
&:active:not(.disabled)
|
|
&.active:not(.disabled)
|
|
box-shadow none
|
|
transform translateY(3px)
|
|
border-bottom-color transparent
|
|
.q-focus-helper, .q-ripple-container
|
|
height auto
|
|
bottom -3px
|
|
.q-btn-rounded
|
|
border-radius $button-rounded-border-radius
|
|
.q-btn-round
|
|
border-radius 50%
|
|
padding 0
|
|
min-height 0
|
|
height 3em
|
|
width 3em
|
|
.q-btn-flat, .q-btn-outline
|
|
box-shadow none
|
|
.q-btn-dense
|
|
padding $button-dense-padding
|
|
min-height 2em
|
|
&.q-btn-round
|
|
padding 0
|
|
height 2.4em
|
|
width 2.4em
|
|
.on-left
|
|
margin-right 6px
|
|
.on-right
|
|
margin-left 6px
|
|
.q-btn-fab, .q-btn-fab-mini
|
|
.q-icon
|
|
font-size 24px
|
|
.q-btn-fab
|
|
height 56px
|
|
width 56px
|
|
.q-btn-fab-mini
|
|
height 40px
|
|
width 40px
|
|
.q-transition
|
|
&--fade
|
|
&-leave-active
|
|
position absolute
|
|
&--fade
|
|
&-enter-active, &-leave-active
|
|
transition opacity .4s ease-out
|
|
&-enter, &-leave, &-leave-to
|
|
opacity 0
|
|
.q-btn-dropdown-split .q-btn-dropdown-arrow
|
|
padding 0 4px
|
|
border-left 1px solid rgba(255, 255, 255, .3)
|
|
.q-btn-group
|
|
border-radius $button-border-radius
|
|
box-shadow $button-shadow
|
|
vertical-align middle
|
|
> .q-btn-item
|
|
box-shadow none
|
|
> .q-btn-group
|
|
> .q-btn:first-child
|
|
border-top-left-radius inherit
|
|
border-bottom-left-radius inherit
|
|
> .q-btn:last-child
|
|
border-top-right-radius inherit
|
|
border-bottom-right-radius inherit
|
|
> .q-btn-group:not(:first-child) > .q-btn:first-child
|
|
border-left 0
|
|
> .q-btn-group:not(:last-child) > .q-btn:last-child
|
|
border-right 0
|
|
> .q-btn-item:not(:last-child)
|
|
border-top-right-radius 0
|
|
border-bottom-right-radius 0
|
|
> .q-btn-item + .q-btn-item
|
|
border-top-left-radius 0
|
|
border-bottom-left-radius 0
|
|
.q-btn-group-push
|
|
border-radius $button-push-border-radius
|
|
> .q-btn-push
|
|
.q-btn-inner
|
|
transition $button-transition
|
|
&:active:not(.disabled)
|
|
&.active:not(.disabled)
|
|
border-bottom-color rgba(0, 0, 0, .15)
|
|
transform translateY(0)
|
|
.q-btn-inner
|
|
transform translateY(3px)
|
|
.q-btn-group-rounded
|
|
border-radius $button-rounded-border-radius
|
|
.q-btn-group-flat, .q-btn-group-outline
|
|
box-shadow none
|
|
.q-btn-group-outline
|
|
> .q-btn-item + .q-btn-item
|
|
border-left 0
|
|
> .q-btn-item:not(:last-child)
|
|
border-right 0
|
|
.q-card
|
|
border-radius $generic-border-radius
|
|
box-shadow $card-shadow
|
|
vertical-align top
|
|
> 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-list
|
|
border 0
|
|
.q-card-separator
|
|
background $card-separator-color
|
|
height 1px
|
|
&.inset
|
|
margin 0 16px
|
|
.q-card-container
|
|
padding 16px
|
|
.q-card-title
|
|
font-size 18px
|
|
font-weight 400
|
|
letter-spacing normal
|
|
line-height 2rem
|
|
&:empty
|
|
display none
|
|
.q-card-subtitle, .q-card-title-extra
|
|
font-size 14px
|
|
color $card-faded-color
|
|
.q-icon
|
|
font-size 24px
|
|
.q-card-main
|
|
font-size 14px
|
|
.q-card-primary + .q-card-main
|
|
padding-top 0
|
|
.q-card-actions
|
|
padding 8px
|
|
.q-btn
|
|
padding 0 8px
|
|
.q-card-actions-horiz
|
|
.q-btn:not(:last-child)
|
|
margin-right 8px
|
|
.q-card-actions-vert
|
|
.q-btn + .q-btn
|
|
margin-top 4px
|
|
.q-card-media
|
|
overflow hidden
|
|
> img
|
|
display block
|
|
width 100%
|
|
max-width 100%
|
|
border 0
|
|
.q-card-media-overlay
|
|
color white
|
|
background $card-overlay-color
|
|
.q-card-subtitle
|
|
color white
|
|
.q-card-dark
|
|
.q-card-separator
|
|
background $card-dark-separator-color
|
|
.q-card-subtitle, .q-card-title-extra
|
|
color $card-dark-faded-color
|
|
.q-carousel
|
|
overflow hidden
|
|
position relative
|
|
.q-carousel-inner
|
|
position relative
|
|
height 100%
|
|
.q-carousel-slide
|
|
flex 0 0 100%
|
|
margin 0
|
|
padding $carousel-padding
|
|
.q-carousel-track
|
|
padding 0
|
|
margin 0
|
|
will-change transform
|
|
display flex
|
|
flex-wrap nowrap
|
|
height 100%
|
|
&.infinite-left > div:nth-last-child(2)
|
|
order -1000
|
|
margin-left -100%
|
|
&.infinite-right > div:nth-child(2)
|
|
order 1000
|
|
.q-carousel-left-arrow,
|
|
.q-carousel-right-arrow
|
|
top 50%
|
|
transform translateY(-50%)
|
|
background $carousel-quick-nav-background
|
|
.q-carousel-left-arrow
|
|
left 5px
|
|
.q-carousel-right-arrow
|
|
right 5px
|
|
.q-carousel-quick-nav
|
|
padding 2px 0
|
|
background $carousel-quick-nav-background
|
|
.q-icon
|
|
font-size $carousel-quick-nav-icon-font-size !important
|
|
.q-btn.inactive
|
|
opacity .5
|
|
.q-icon
|
|
font-size $carousel-quick-nav-icon-inactive-font-size !important
|
|
.q-carousel-thumbnails
|
|
will-change transform
|
|
transition transform .3s
|
|
transform translateY(105%)
|
|
width 100%
|
|
height auto
|
|
max-height 60%
|
|
overflow auto
|
|
background black
|
|
padding .5rem
|
|
text-align center
|
|
box-shadow 0 -3px 6px rgba(0, 0, 0, .16), 0 -5px 6px rgba(0, 0, 0, .23)
|
|
&.active
|
|
transform translateY(0)
|
|
img
|
|
height auto
|
|
width 100%
|
|
display block
|
|
opacity .5
|
|
will-change opacity
|
|
transition opacity .3s
|
|
cursor pointer
|
|
border 1px solid black
|
|
> div > div
|
|
flex 0 0 108px
|
|
&.active img, img.active
|
|
opacity 1
|
|
border-color white
|
|
.q-carousel-thumbnail-btn
|
|
background $carousel-quick-nav-background
|
|
top 5px
|
|
right 5px
|
|
body.desktop .q-carousel-thumbnails img:hover
|
|
opacity 1
|
|
.q-message-name, .q-message-stamp, .q-message-label
|
|
font-size small
|
|
.q-message-label
|
|
margin (3 * $chat-message-distance) 0
|
|
.q-message-stamp
|
|
color inherit
|
|
margin-top 4px
|
|
opacity .6
|
|
display none
|
|
.q-message-avatar
|
|
border-radius 50%
|
|
width $chat-message-avatar-size
|
|
height $chat-message-avatar-size
|
|
.q-message
|
|
margin-bottom $chat-message-distance
|
|
&:first-child .q-message-label
|
|
margin-top 0
|
|
.q-message-received
|
|
.q-message-avatar
|
|
margin-right 8px
|
|
.q-message-text
|
|
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
|
|
color $chat-message-received-color
|
|
.q-message-sent
|
|
.q-message-name
|
|
text-align right
|
|
.q-message-avatar
|
|
margin-left 8px
|
|
.q-message-container
|
|
flex-direction row-reverse
|
|
.q-message-text
|
|
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
|
|
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
|
|
transform translate3d(0, 0, 0)
|
|
& + &
|
|
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-size = 21px
|
|
.q-checkbox-icon
|
|
height $checkbox-size
|
|
width $checkbox-size
|
|
font-size $checkbox-size
|
|
opacity 0
|
|
.q-chip
|
|
min-height $chip-height
|
|
max-width 100%
|
|
padding $chip-padding-horizontal $chip-padding-vertical
|
|
font-size $chip-font-size
|
|
border $chip-border
|
|
border-radius $chip-border-radius
|
|
vertical-align middle
|
|
color $chip-color
|
|
background $chip-background
|
|
&:focus .q-chip-close
|
|
opacity .8
|
|
.q-icon
|
|
font-size $chip-icon-size
|
|
line-height 1
|
|
.q-chip-main
|
|
line-height initial
|
|
flex 1 1 auto
|
|
.q-chip-side
|
|
border-radius 50%
|
|
height $chip-height
|
|
width $chip-height
|
|
min-width $chip-height
|
|
overflow hidden
|
|
img
|
|
width 100%
|
|
height 100%
|
|
.q-chip-left
|
|
margin-left -12px
|
|
margin-right 8px
|
|
.q-chip-right
|
|
margin-left 2px
|
|
margin-right -12px
|
|
.q-chip-square
|
|
border-radius 2px
|
|
.q-chip-floating
|
|
position absolute
|
|
top -.3em
|
|
right -.3em
|
|
pointer-events none
|
|
z-index 1
|
|
.q-chip-tag
|
|
position relative
|
|
padding-left 1.7rem
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
top 50%
|
|
left .5rem
|
|
margin-top -.25rem
|
|
background white
|
|
width .5rem
|
|
height .5rem
|
|
box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
|
|
border-radius 50%
|
|
.q-chip-pointing
|
|
position relative
|
|
z-index 0
|
|
&:before
|
|
content ''
|
|
z-index -1
|
|
background inherit
|
|
width 16px
|
|
height 16px
|
|
position absolute
|
|
.q-chip-pointing-up
|
|
margin-top .8rem
|
|
&:before
|
|
top 0
|
|
left 50%
|
|
transform translateX(-50%) translateY(-22%) rotate(45deg)
|
|
.q-chip-pointing-down
|
|
margin-bottom .8rem
|
|
&:before
|
|
right auto
|
|
top 100%
|
|
left 50%
|
|
transform translateX(-50%) translateY(-78%) rotate(45deg)
|
|
.q-chip-pointing-right
|
|
margin-right .8rem
|
|
&:before
|
|
top 50%
|
|
right 2px
|
|
bottom auto
|
|
left auto
|
|
transform translateX(33%) translateY(-50%) rotate(45deg)
|
|
.q-chip-pointing-left
|
|
margin-left .8rem
|
|
&:before
|
|
top 50%
|
|
left 2px
|
|
bottom auto
|
|
right auto
|
|
transform translateX(-33%) translateY(-50%) rotate(45deg)
|
|
.q-chip-detail
|
|
background rgba(0, 0, 0, .1)
|
|
opacity .8
|
|
padding 0 5px
|
|
border-radius inherit
|
|
border-top-right-radius 0
|
|
border-bottom-right-radius 0
|
|
.q-chip-small
|
|
min-height $chip-small-height
|
|
.q-chip-main
|
|
padding 4px 1px
|
|
line-height initial
|
|
.q-chip-side
|
|
height $chip-small-height
|
|
width $chip-small-height
|
|
min-width $chip-small-height
|
|
.q-chip-icon
|
|
font-size $chip-small-icon-size
|
|
.q-chip-dense
|
|
min-height 1px
|
|
padding 0 3px
|
|
font-size 12px
|
|
&.q-chip-tag
|
|
padding-left 1.3rem
|
|
&.q-chip-pointing:before
|
|
width 9px
|
|
height 9px
|
|
.q-chip-main
|
|
padding 1px
|
|
.q-chip-side
|
|
height 18px
|
|
width 18px
|
|
min-width 16px
|
|
font-size 14px
|
|
.q-chip-left
|
|
margin-left -3px
|
|
margin-right 2px
|
|
.q-chip-right
|
|
margin-left 2px
|
|
margin-right -2px
|
|
.q-icon
|
|
font-size 16px
|
|
.q-input-chips
|
|
margin-top -1px
|
|
margin-bottom -1px
|
|
.q-chip
|
|
margin 1px
|
|
input.q-input-target
|
|
min-width 70px !important
|
|
.q-collapsible-sub-item
|
|
padding $collapsible-padding
|
|
&.indent
|
|
padding-left $collapsible-menu-left-padding
|
|
padding-right 0
|
|
.q-card
|
|
margin-bottom 0
|
|
.q-collapsible.{$router-link-active} > .q-item
|
|
background $collapsible-active-color
|
|
.q-collapsible
|
|
transition padding .5s
|
|
.q-collapsible-popup-closed
|
|
padding 0 15px
|
|
.q-collapsible-inner
|
|
border 1px solid $item-separator-color
|
|
& + &
|
|
.q-collapsible-inner
|
|
border-top 0
|
|
.q-collapsible-popup-opened
|
|
padding 15px 0
|
|
.q-collapsible-inner
|
|
box-shadow $shadow-2
|
|
& + &, &:first-child
|
|
padding-top 0
|
|
&:last-child
|
|
padding-bottom 0
|
|
.q-collapsible-cursor-pointer > .q-collapsible-inner > .q-item
|
|
cursor pointer
|
|
.q-collapsible-toggle-icon
|
|
border-radius 50%
|
|
width 1em
|
|
text-align center
|
|
.q-color
|
|
max-width 100vw
|
|
border 1px solid $grey-4
|
|
display inline-block
|
|
width 100%
|
|
background white
|
|
.q-color-saturation
|
|
width 100%
|
|
height 123px
|
|
.q-color-saturation-white
|
|
background linear-gradient(to right, white, rgba(255, 255, 255, 0))
|
|
.q-color-saturation-black
|
|
background linear-gradient(to top, black, rgba(0, 0, 0, 0))
|
|
.q-color-saturation-circle
|
|
width 10px
|
|
height 10px
|
|
box-shadow 0 0 0 1.5px white, 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)
|
|
.q-color-swatch, .q-color-alpha .q-slider-track
|
|
background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
|
|
.q-color-swatch
|
|
position relative
|
|
width 32px
|
|
height 32px
|
|
border-radius 50%
|
|
background white
|
|
border 1px solid $grey-4
|
|
.q-color-hue .q-slider-track
|
|
border-radius 2px
|
|
background linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)
|
|
opacity 1
|
|
height $dot-size * .8
|
|
&.active-track
|
|
opacity 0
|
|
.q-color-alpha .q-slider-track
|
|
position relative
|
|
background white
|
|
opacity 1
|
|
height $dot-size * .8
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
left 0
|
|
right 0
|
|
top 0
|
|
bottom 0
|
|
background linear-gradient(90deg, rgba(255, 255, 255, 0), $grey-7)
|
|
&.active-track
|
|
opacity 0
|
|
.q-color-sliders
|
|
height 56px
|
|
.q-slider
|
|
height 20px
|
|
.q-slider-handle
|
|
box-shadow 0 1px 4px 0 rgba(0, 0, 0, .37)
|
|
.q-slider-ring
|
|
display none
|
|
.q-color-inputs
|
|
font-size 11px
|
|
color $grey-7
|
|
input
|
|
border 1px solid $grey-4
|
|
outline 0
|
|
.q-color-padding
|
|
padding 0 2px
|
|
.q-color-label
|
|
padding-top 4px
|
|
.q-color-dark
|
|
background black
|
|
border 1px solid $grey-9
|
|
input
|
|
background black
|
|
color $light
|
|
color var(--q-color-light)
|
|
border 1px solid $dark
|
|
border 1px solid var(--q-color-dark)
|
|
.q-color-inputs
|
|
color $light
|
|
color var(--q-color-light)
|
|
.q-color-swatch
|
|
border 1px solid $dark
|
|
border 1px solid var(--q-color-dark)
|
|
.q-datetime-input
|
|
min-width $datetime-input-min-width
|
|
.q-datetime-controls
|
|
padding 0 10px 8px
|
|
.q-datetime
|
|
font-size 12px
|
|
text-align center
|
|
user-select none
|
|
line-height initial
|
|
.modal-buttons
|
|
padding-top 8px
|
|
&:not(.no-border)
|
|
&:not(.q-datetime-dark) .q-datetime-content
|
|
border 1px solid $grey-4
|
|
&.q-datetime-dark
|
|
border 1px solid $dark
|
|
border 1px solid var(--q-color-dark)
|
|
.q-datetime-header
|
|
background currentColor
|
|
> div
|
|
color white
|
|
width 100%
|
|
.modal-content, .q-popover
|
|
> .q-datetime > .q-datetime-header
|
|
min-width 175px
|
|
.q-datetime-weekdaystring
|
|
font-size .8rem
|
|
background rgba(0, 0, 0, .1)
|
|
padding 5px 0
|
|
.q-datetime-time
|
|
padding 10px 0
|
|
will-change scroll-position
|
|
overflow auto
|
|
.q-datetime-ampm
|
|
font-size .9rem
|
|
padding 5px
|
|
.q-datetime-datestring
|
|
padding 10px 0
|
|
.q-datetime-link
|
|
font-size 2.7rem
|
|
span
|
|
padding 0 5px
|
|
width 100%
|
|
&.small
|
|
margin 0 5px
|
|
font-size 1.2rem
|
|
span
|
|
padding 5px
|
|
.q-datetime-link
|
|
opacity .6
|
|
> span
|
|
cursor pointer
|
|
display inline-block
|
|
outline 0
|
|
&.active
|
|
opacity 1
|
|
.q-datetime-clockstring
|
|
min-width 210px
|
|
font-size 2.7rem
|
|
direction: ltr /* rtl:ignore */
|
|
.q-datetime-selector
|
|
min-width 290px
|
|
height 310px
|
|
overflow auto
|
|
.q-datetime-view-day
|
|
width 250px
|
|
height 285px
|
|
color black
|
|
.q-datetime-view-year, .q-datetime-view-month
|
|
> .q-btn:not(.active)
|
|
color black
|
|
.q-datetime-month-stamp
|
|
font-size 16px
|
|
.q-datetime-weekdays
|
|
margin-bottom 5px
|
|
div
|
|
opacity .6
|
|
width 35px
|
|
height 35px
|
|
line-height 35px
|
|
margin 0
|
|
padding 0
|
|
min-width 0
|
|
min-height 0
|
|
background transparent
|
|
.q-datetime-days div
|
|
margin 1px
|
|
line-height 33px
|
|
width 33px
|
|
height 33px
|
|
border-radius 50%
|
|
&.q-datetime-day-active
|
|
background currentColor
|
|
> span
|
|
color white
|
|
&.q-datetime-day-today
|
|
color currentColor
|
|
font-size 14px
|
|
border 1px solid currentColor
|
|
&:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
|
|
background $grey-4
|
|
.q-datetime-btn
|
|
font-weight normal
|
|
&.active
|
|
font-size 1.5rem
|
|
padding-top 1rem
|
|
padding-bottom 1rem
|
|
.q-datetime-clock
|
|
width 250px
|
|
height 250px
|
|
border-radius 50%
|
|
background $grey-4
|
|
padding 24px
|
|
.q-datetime-clock-circle
|
|
position relative
|
|
animation q-pop .5s /* rtl:ignore */
|
|
.q-datetime-clock-center
|
|
height 6px
|
|
width 6px
|
|
top 0
|
|
margin auto
|
|
border-radius 50%
|
|
min-height 0
|
|
position absolute
|
|
left 0
|
|
right 0
|
|
bottom 0
|
|
background currentColor
|
|
.q-datetime-clock-pointer
|
|
width 1px
|
|
height 50%
|
|
margin 0 auto
|
|
transform-origin top center /* rtl:ignore */
|
|
min-height 0
|
|
position absolute
|
|
left 0
|
|
right 0
|
|
bottom 0
|
|
background currentColor
|
|
span
|
|
position absolute
|
|
border-radius 50%
|
|
width 8px
|
|
height 8px
|
|
bottom -8px
|
|
left 0
|
|
min-width 0
|
|
min-height 0
|
|
transform translate(-50%, -50%)
|
|
background currentColor
|
|
.q-datetime-arrow
|
|
color $grey-7
|
|
.q-datetime-dark
|
|
background $dark
|
|
background var(--q-color-dark)
|
|
.q-datetime-arrow
|
|
color $light
|
|
color var(--q-color-light)
|
|
.q-datetime-header, .q-datetime-clock
|
|
background $grey-8
|
|
.q-datetime-view-day
|
|
color white
|
|
.q-datetime-view-year, .q-datetime-view-month
|
|
> .q-btn:not(.active)
|
|
color white
|
|
.q-datetime-days div
|
|
&.q-datetime-day-active > span, &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
|
|
color black
|
|
body.desktop
|
|
.q-datetime-clock-position:not(.active):hover
|
|
background $grey-2 !important
|
|
.q-datetime-dark .q-datetime-clock-position:not(.active):hover
|
|
color black
|
|
.q-datetime-clock-position
|
|
position absolute
|
|
min-height 32px
|
|
width 32px
|
|
height 32px
|
|
font-size 12px
|
|
line-height 32px
|
|
margin 0
|
|
padding 0
|
|
transform translate(-50%, -50%) /* rtl:ignore */
|
|
border-radius 50%
|
|
&:not(.active)
|
|
color black
|
|
.q-datetime-dark &
|
|
color white
|
|
&.active
|
|
background currentColor
|
|
> span
|
|
color white
|
|
for $pos in 0..12
|
|
$degree = (270 + 30 * $pos)
|
|
.q-datetime-clock-pos-{$pos}
|
|
top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
|
|
left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
|
|
for $pos in 1..12
|
|
$degree = (270 + 30 * $pos)
|
|
.q-datetime-clock-pos-{$pos}.fmt24
|
|
top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
|
|
left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
|
|
for $pos in 13..23
|
|
$degree = (270 + 30 * $pos)
|
|
.q-datetime-clock-pos-{$pos}.fmt24
|
|
top round(15% + ((1 + sin($degree * 1deg)) * 70%) / 2, 2)
|
|
left round(15% + ((1 + cos($degree * 1deg)) * 70%) / 2, 2) /* rtl:ignore */
|
|
.q-datetime-clock-pos-0.fmt24
|
|
top round(15% + ((1 + sin(270deg)) * 70%) / 2, 2)
|
|
left round(15% + ((1 + cos(270deg)) * 70%) / 2, 2) /* rtl:ignore */
|
|
.q-datetime-range
|
|
&.row
|
|
.q-datetime-range-left
|
|
border-top-right-radius 0
|
|
border-bottom-right-radius 0
|
|
.q-datetime-range-right
|
|
border-top-left-radius 0
|
|
border-bottom-left-radius 0
|
|
&.column > div + div
|
|
margin-top $datetime-range-space
|
|
@media (max-width $breakpoint-sm-max)
|
|
.q-datetime
|
|
flex-direction column !important
|
|
@media (min-width $breakpoint-md-min)
|
|
.q-datetime-header
|
|
flex 1 1 auto
|
|
.q-datetime-content
|
|
flex 2 2 auto
|
|
.q-dot
|
|
position absolute
|
|
top $dot-position-top
|
|
right $dot-position-right
|
|
height $dot-size
|
|
width $dot-size
|
|
border-radius 50%
|
|
background $dot-color
|
|
opacity $dot-opacity
|
|
.q-editor
|
|
border $editor-border
|
|
&.disabled
|
|
border-style dashed
|
|
&.fullscreen
|
|
border 0 !important
|
|
.q-editor-content
|
|
outline 0
|
|
padding $editor-content-padding
|
|
min-height $editor-content-min-height
|
|
background white
|
|
hr
|
|
border 0
|
|
outline 0
|
|
margin 1px
|
|
height 1px
|
|
background $editor-hr-color
|
|
.q-editor-toolbar-padding
|
|
padding $editor-toolbar-padding
|
|
.q-editor-toolbar
|
|
border-bottom $editor-border
|
|
background $grey-4
|
|
min-height 37px
|
|
.q-btn-group
|
|
box-shadow none
|
|
.q-btn-group + .q-btn-group
|
|
margin-left $editor-button-gutter
|
|
.q-editor-toolbar-separator
|
|
.q-btn-group + .q-btn-group
|
|
padding-left $editor-button-gutter
|
|
&:before
|
|
content ''
|
|
position absolute
|
|
left 0
|
|
top 0
|
|
bottom 0
|
|
height 100%
|
|
width 1px
|
|
background $editor-border-color
|
|
.q-editor-input input
|
|
color inherit
|
|
.q-fab
|
|
position relative
|
|
vertical-align middle
|
|
.z-fab
|
|
z-index $z-fab
|
|
.q-fab-opened
|
|
.q-fab-actions
|
|
opacity 1
|
|
transform scaleX(1) scaleY(1) translateX(0) translateY(0)
|
|
pointer-events all
|
|
.q-fab-icon
|
|
transform rotate3d(0, 0, 1, 180deg)
|
|
opacity 0
|
|
.q-fab-active-icon
|
|
transform rotate3d(0, 0, 1, 0deg)
|
|
opacity 1
|
|
.q-fab-icon, .q-fab-active-icon
|
|
transition opacity .4s, transform .4s
|
|
.q-fab-icon
|
|
opacity 1
|
|
transform rotate3d(0, 0, 1, 0deg)
|
|
.q-fab-active-icon
|
|
opacity 0
|
|
transform rotate3d(0, 0, 1, -180deg)
|
|
.q-fab-actions
|
|
position absolute
|
|
opacity 0
|
|
transition all .2s ease-in
|
|
pointer-events none
|
|
.q-btn
|
|
margin $fab-margin
|
|
.q-fab-right
|
|
transform scaleX(.4) scaleY(.4) translateX(-100%)
|
|
top 0
|
|
bottom 0
|
|
left 120%
|
|
.q-fab-left
|
|
transform scaleX(.4) scaleY(.4) translateX(100%)
|
|
top 0
|
|
bottom 0
|
|
right 120%
|
|
flex-direction row-reverse
|
|
.q-fab-up
|
|
transform scaleX(.4) scaleY(.4) translateY(100%)
|
|
flex-direction column-reverse
|
|
justify-content center
|
|
bottom 120%
|
|
left 0
|
|
right 0
|
|
.q-fab-down
|
|
transform scaleX(.4) scaleY(.4) translateY(-100%)
|
|
flex-direction column
|
|
justify-content center
|
|
top 120%
|
|
left 0
|
|
right 0
|
|
.q-field-icon
|
|
width $field-icon-size
|
|
height $field-icon-size
|
|
min-width $field-icon-size
|
|
font-size $field-icon-size
|
|
margin-right 16px
|
|
color $field-label-color
|
|
.q-field-label
|
|
padding-right 8px
|
|
color $field-label-color
|
|
.q-field-label-inner
|
|
min-height $field-icon-size
|
|
.q-field-label-hint
|
|
padding-left 8px
|
|
.q-field-bottom
|
|
font-size 12px
|
|
padding-top $input-margin-bottom
|
|
color $form-dark
|
|
.q-field-no-input .q-field-bottom
|
|
margin-top 8px
|
|
border-top 1px solid rgba(0, 0, 0, .12)
|
|
.q-field-counter
|
|
color $field-label-color
|
|
padding-left 8px
|
|
.q-field-dark
|
|
.q-field-label, .q-field-icon, .q-field-counter, .q-field-bottom
|
|
color $form-light
|
|
.q-field-no-input .q-field-bottom
|
|
border-top 1px solid $field-label-color
|
|
.q-field-with-error
|
|
.q-field-icon, .q-field-label, .q-field-bottom
|
|
color $negative
|
|
color var(--q-color-negative)
|
|
.q-field-no-input .q-field-bottom
|
|
border-top 1px solid $negative
|
|
border-top 1px solid var(--q-color-negative)
|
|
.q-field-with-warning
|
|
.q-field-icon, .q-field-label, .q-field-bottom
|
|
color $warning
|
|
color var(--q-color-warning)
|
|
.q-field-no-input .q-field-bottom
|
|
border-top 1px solid $warning
|
|
border-top 1px solid var(--q-color-warning)
|
|
.q-field-margin
|
|
margin-top 5px
|
|
.q-field-floating .q-field-margin
|
|
margin-top 23px
|
|
.q-field-no-input .q-field-margin
|
|
margin-top 3px
|
|
.q-field-content
|
|
.q-if.q-if-has-label:not(.q-if-standard)
|
|
margin-top 9px
|
|
.q-if-standard:not(.q-if-has-label)
|
|
padding-top 6px
|
|
.q-option-group
|
|
padding-top 0
|
|
.q-field-no-input .q-field-content
|
|
padding-top 6px
|
|
qfield-vertical()
|
|
&:not(.q-field-no-label)
|
|
.q-field-margin
|
|
margin-top 0
|
|
.q-if-standard:not(.q-if-has-label)
|
|
padding-top 0
|
|
.q-if.q-if-has-label:not(.q-if-standard)
|
|
margin-top 0px
|
|
&.q-field-no-label .q-field-label
|
|
display none
|
|
.q-field-vertical
|
|
qfield-vertical()
|
|
@media (max-width $breakpoint-xs-max)
|
|
.q-field-responsive
|
|
qfield-vertical()
|
|
.q-inner-loading
|
|
background $light-dimmed-background
|
|
&.dark
|
|
background $dimmed-background
|
|
.q-if, .q-if:before, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom
|
|
transition $input-frame-transition
|
|
$content-none
|
|
content none
|
|
$padding-x
|
|
padding-left $input-padding-x
|
|
padding-right $input-padding-x
|
|
$margin-y-box
|
|
margin-top $input-box-padding-bottom
|
|
margin-bottom $input-box-padding-bottom
|
|
$margin-top-box
|
|
margin-top $input-box-padding-top
|
|
.q-if
|
|
&:before, &:after
|
|
position absolute
|
|
top 0
|
|
bottom 0
|
|
left 0
|
|
right 0
|
|
border 1px hidden currentColor
|
|
border-bottom-style solid
|
|
background transparent
|
|
pointer-events none
|
|
content ''
|
|
&:before
|
|
color $light
|
|
color var(--q-color-light)
|
|
&:after
|
|
border-width 0
|
|
transform-origin center center 0
|
|
transform scaleX(0)
|
|
&:not(.q-if-disabled):not(.q-if-error):not(.q-if-warning):hover:before,
|
|
&.q-if-readonly:not(.q-if-error):not(.q-if-warning):after
|
|
color black
|
|
.q-if-dark&
|
|
color white
|
|
&.q-if-hide-underline, &.q-if-inverted
|
|
&:before, &:after
|
|
@extends $content-none
|
|
.q-if-focused:after
|
|
border-width 2px
|
|
transform scaleX(1)
|
|
transition $input-frame-transition-border
|
|
.q-if
|
|
outline 0
|
|
align-items center
|
|
font-size $input-font-size
|
|
.q-if-inner
|
|
min-height $input-min-height
|
|
.q-if-standard
|
|
padding-top $input-padding-bottom
|
|
padding-bottom $input-padding-bottom
|
|
&.q-if-has-label
|
|
padding-top $input-padding-top
|
|
.q-if-hide-underline
|
|
padding-top 0
|
|
padding-bottom 0
|
|
&.q-if-has-label
|
|
padding-top $input-hide-underline-padding-top
|
|
.q-if-standard, .q-if-inverted
|
|
.q-if-label
|
|
position absolute
|
|
left 0
|
|
transform-origin top left
|
|
transform $input-label-transform-base
|
|
&.q-if-label-above
|
|
font-size ($input-font-size * $input-label-top-scale)
|
|
transform $input-label-transform
|
|
line-height $input-control-size * $input-label-top-scale
|
|
.q-if-inverted
|
|
@extends $padding-x
|
|
.q-if-label
|
|
top 50%
|
|
transform $input-label-box-transform-base
|
|
&.q-if-label-above
|
|
top 4px
|
|
transform $input-label-box-transform
|
|
.q-if-inner
|
|
@extends $margin-y-box
|
|
&.q-if-has-label
|
|
.q-if-inner
|
|
@extends $margin-top-box
|
|
box-shadow $shadow-1
|
|
border-radius $input-inverted-border-radius
|
|
.q-input-target
|
|
color inherit
|
|
.q-if-focused:not(.q-if-readonly)
|
|
.q-if-label, .q-if-addon, .q-if-control
|
|
color currentColor
|
|
.q-if-warning
|
|
&:before, &:after, &:not(.q-if-inverted) .q-if-label
|
|
color $warning
|
|
color var(--q-color-warning)
|
|
&:hover:before
|
|
color lighten($warning, 46%)
|
|
color var(--q-color-warning-l)
|
|
.q-if-error
|
|
&:before, &:after, &:not(.q-if-inverted) .q-if-label
|
|
color $negative
|
|
color var(--q-color-negative)
|
|
&:hover:before
|
|
color lighten($negative, 46%)
|
|
color var(--q-color-negative-l)
|
|
.q-if-disabled
|
|
cursor not-allowed
|
|
opacity .6
|
|
.q-if-label, .q-if-control, .q-input-target, .q-chip
|
|
cursor not-allowed
|
|
.q-if-dark:not(.q-if-inverted-light)
|
|
.q-input-target:not(.q-input-target-placeholder)
|
|
color white
|
|
.q-if-focusable
|
|
outline 0
|
|
cursor pointer
|
|
.q-if-label, .q-input-target, .q-input-target-placeholder
|
|
line-height $input-control-size
|
|
.q-if-control
|
|
font-size $input-control-size
|
|
width $input-control-size
|
|
height $input-control-size
|
|
cursor pointer
|
|
+ .q-if-control, + .q-if-inner, .q-if-inner + &
|
|
margin-left $input-control-margin
|
|
&:hover
|
|
opacity .7
|
|
.q-if-baseline
|
|
line-height $input-control-size
|
|
width 0
|
|
color transparent
|
|
.q-if-label-inner, .q-if-label-spacer, .q-if-baseline
|
|
pointer-events none
|
|
user-select none
|
|
.q-if-label-spacer
|
|
visibility hidden
|
|
height 0 !important
|
|
white-space nowrap
|
|
max-width 100%
|
|
.q-if-label
|
|
cursor text
|
|
max-width 100%
|
|
overflow hidden
|
|
.q-if-label, .q-if-addon, .q-if-control
|
|
color $form-dark
|
|
line-height $input-control-size
|
|
.q-if-inverted
|
|
.q-if-label, .q-if-addon, .q-if-control
|
|
color #ddd
|
|
.q-if-inverted-light
|
|
.q-if-label, .q-if-addon, .q-if-control
|
|
color #656565
|
|
.q-if-addon
|
|
opacity 0
|
|
cursor inherit
|
|
&:not(.q-if-addon-visible)
|
|
display none
|
|
.q-if-addon-left
|
|
padding-right 1px
|
|
.q-if-addon-right
|
|
padding-left 1px
|
|
.q-if-addon-visible
|
|
opacity 1
|
|
@keyframes webkit-autofill-on
|
|
to
|
|
background transparent
|
|
color $form-autofill
|
|
@keyframes webkit-autofill-off
|
|
to
|
|
background transparent
|
|
.q-input-target, .q-input-shadow
|
|
border 0
|
|
outline 0
|
|
padding 0
|
|
background transparent
|
|
line-height $input-control-size
|
|
font-size inherit
|
|
resize none
|
|
display flex
|
|
align-items center
|
|
color black
|
|
.q-input-target
|
|
&:-webkit-autofill
|
|
-webkit-animation-name webkit-autofill-on
|
|
-webkit-animation-fill-mode both
|
|
&.q-input-autofill:not(:-webkit-autofill)
|
|
-webkit-animation-name webkit-autofill-off
|
|
-webkit-animation-fill-mode both
|
|
&::-ms-clear, &::-ms-reveal
|
|
display none
|
|
width 0
|
|
height 0
|
|
&:invalid
|
|
box-shadow inherit
|
|
.q-input-target:before
|
|
content '|'
|
|
line-height $input-control-size
|
|
width 0
|
|
color transparent
|
|
input.q-input-target
|
|
width 100% !important
|
|
height $input-control-size
|
|
outline 0
|
|
display inline-block
|
|
-webkit-appearance none
|
|
.q-if
|
|
.q-input-target-placeholder
|
|
color $form-dark !important
|
|
.q-input-target
|
|
&::-webkit-input-placeholder /* Chrome/Opera/Safari */
|
|
color $form-dark !important
|
|
&::-moz-placeholder
|
|
color $form-dark !important
|
|
&:-ms-input-placeholder
|
|
color $form-dark !important
|
|
.q-if-dark
|
|
.q-input-target-placeholder
|
|
color #979797 !important
|
|
.q-input-target
|
|
&::-webkit-input-placeholder /* Chrome/Opera/Safari */
|
|
color #979797 !important
|
|
&::-moz-placeholder
|
|
color #979797 !important
|
|
&:-ms-input-placeholder
|
|
color #979797 !important
|
|
.q-if-inverted:not(.q-if-inverted-light)
|
|
.q-input-target-placeholder
|
|
color #ddd !important
|
|
.q-input-target
|
|
&::-webkit-input-placeholder /* Chrome/Opera/Safari */
|
|
color #ddd !important
|
|
&::-moz-placeholder
|
|
color #ddd !important
|
|
&:-ms-input-placeholder
|
|
color #ddd !important
|
|
.q-input-shadow
|
|
overflow hidden
|
|
visibility hidden
|
|
pointer-events none
|
|
height auto
|
|
width 100% !important
|
|
.q-jumbotron
|
|
position relative
|
|
padding $jumbotron-padding
|
|
border-radius $jumbotron-border-radius
|
|
background-color $jumbotron-bg
|
|
background-repeat no-repeat
|
|
background-size cover
|
|
.q-jumbotron-dark
|
|
color $jumbotron-dark-color
|
|
background-color $jumbotron-dark-bg
|
|
hr.q-hr
|
|
background rgba(255, 255, 255, .36)
|
|
@media (min-width $breakpoint-md-min)
|
|
.q-jumbotron
|
|
padding $jumbotron-large-padding
|
|
.q-knob, .q-knob > div
|
|
position relative
|
|
display inline-block
|
|
.q-knob > div
|
|
width 100%
|
|
height 100%
|
|
.q-knob-label
|
|
width 100%
|
|
pointer-events none
|
|
position absolute
|
|
left 0
|
|
right 0
|
|
top 0
|
|
bottom 0
|
|
i
|
|
font-size 130%
|
|
$layout-transition = all .12s ease-in
|
|
.q-layout
|
|
width 100%
|
|
min-height 100vh
|
|
.q-layout-container
|
|
.q-layout
|
|
min-height 100%
|
|
> div
|
|
transform translate3d(0, 0, 0)
|
|
> div
|
|
min-height 0
|
|
max-height 100%
|
|
.q-layout-header
|
|
box-shadow $layout-header-shadow
|
|
&-hidden
|
|
transform translateY(-110%)
|
|
.q-layout-footer
|
|
box-shadow $layout-footer-shadow
|
|
&-hidden
|
|
transform translateY(110%)
|
|
.q-layout-drawer
|
|
position absolute
|
|
top 0
|
|
bottom 0
|
|
background $layout-aside-background
|
|
z-index $z-side
|
|
&.on-top
|
|
z-index $z-fixed-drawer
|
|
.q-layout-drawer-delimiter
|
|
box-shadow $layout-aside-shadow
|
|
.q-layout-drawer-left
|
|
left 0
|
|
transform translateX(-100%)
|
|
.q-layout-drawer-right
|
|
right 0
|
|
transform translateX(100%)
|
|
.q-layout, .q-layout-header, .q-layout-footer, .q-layout-page
|
|
position relative
|
|
.q-layout-header, .q-layout-footer
|
|
z-index $z-marginals
|
|
.q-layout-backdrop
|
|
z-index ($z-fixed-drawer - 1) !important
|
|
will-change background-color
|
|
.q-layout-drawer-mini
|
|
padding 0 !important
|
|
.q-item, .q-item-side
|
|
text-align center
|
|
justify-content center
|
|
.q-mini-drawer-hide,
|
|
.q-collapsible-inner > div:last-of-type, .q-list-header, .q-item-main, .q-item-side-right
|
|
display none
|
|
.q-layout-drawer-normal
|
|
.q-mini-drawer-only
|
|
display none
|
|
.q-layout-drawer-mobile
|
|
.q-mini-drawer-only, .q-mini-drawer-hide
|
|
display none
|
|
.q-layout-drawer-opener
|
|
z-index ($z-marginals + 1)
|
|
height 100%
|
|
width 15px
|
|
user-select none
|
|
.q-page-sticky-shrink
|
|
pointer-events none
|
|
> span
|
|
pointer-events auto
|
|
body.q-ios-statusbar-padding
|
|
.q-layout .q-layout-header > .q-toolbar:nth-child(2),
|
|
.q-layout .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
|
|
.q-layout .q-layout-drawer.top-padding,
|
|
.modal:not(.minimized) .q-layout-header > .q-toolbar:nth-child(1)
|
|
padding-top $ios-statusbar-height
|
|
min-height ($toolbar-min-height + $ios-statusbar-height)
|
|
body.q-ios-statusbar-x
|
|
.q-layout .q-layout-header > .q-toolbar:nth-child(2),
|
|
.q-layout .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
|
|
.q-layout .q-layout-drawer.top-padding,
|
|
.modal:not(.minimized) .q-layout-header > .q-toolbar:nth-child(1)
|
|
padding-top env(safe-area-inset-top)
|
|
.q-layout .q-layout-footer > .q-toolbar:last-child,
|
|
.q-layout .q-layout-footer > .q-tabs:last-child .q-tabs-head
|
|
.q-layout .q-layout-drawer.top-padding,
|
|
.modal:not(.minimized) .q-layout-footer > .q-toolbar:last-child
|
|
padding-bottom env(safe-area-inset-bottom)
|
|
min-height ($toolbar-min-height + $ios-statusbar-height)
|
|
.q-layout-animate .q-layout-transition
|
|
transition $layout-transition !important
|
|
.q-body-drawer-toggle
|
|
overflow-x hidden !important
|
|
.layout-padding
|
|
@media (max-width $breakpoint-sm-max)
|
|
padding 1.5rem .5rem
|
|
&.horizontal
|
|
padding 0 .5rem
|
|
@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
|
|
padding 1.5rem 2rem
|
|
margin auto
|
|
&.horizontal
|
|
padding 0 2rem
|
|
@media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
|
|
padding 2.5rem 3rem
|
|
margin auto
|
|
&.horizontal
|
|
padding 0 3rem
|
|
@media (min-width $breakpoint-xl-min)
|
|
padding 3rem 4rem
|
|
margin auto
|
|
&.horizontal
|
|
padding 0 4rem
|
|
.q-item-stamp
|
|
font-size $item-stamp-font-size
|
|
line-height $item-stamp-font-size
|
|
white-space nowrap
|
|
margin .3rem 0
|
|
.q-item-side
|
|
color $item-side-color
|
|
flex 0 0 auto
|
|
min-width $item-primary-size
|
|
.q-item-side-right
|
|
text-align right
|
|
.q-item-avatar, .q-item-avatar img
|
|
width $item-primary-size
|
|
height $item-primary-size
|
|
border-radius 50%
|
|
.q-item-letter, .q-item-icon
|
|
font-size $item-icon-size
|
|
.q-item-inverted
|
|
border-radius 50%
|
|
color white
|
|
background $item-side-color
|
|
height $item-primary-size
|
|
width $item-primary-size
|
|
&, .q-icon
|
|
font-size $item-inverted-icon-size
|
|
.q-item-main
|
|
flex 1 1 auto
|
|
min-width 0
|
|
.q-item-main-inset
|
|
margin-left $item-inset
|
|
.q-item-label
|
|
line-height 1.2
|
|
> span
|
|
color $item-content-secondary-text-color
|
|
.q-item-sublabel
|
|
color $item-content-secondary-text-color
|
|
font-size 90%
|
|
margin-top .2rem
|
|
> span
|
|
font-weight 500
|
|
.q-item-section + .q-item-section
|
|
margin-left $item-gutter
|
|
.q-item
|
|
position relative
|
|
display flex
|
|
align-items center
|
|
font-size $item-font-size
|
|
text-align left
|
|
padding ($item-padding / 2) $item-padding
|
|
min-height $item-min-height
|
|
&.active, &.{$router-link-active}, &:focus
|
|
background $item-active-color
|
|
&:focus
|
|
outline 0
|
|
.q-item-image
|
|
min-width $item-image-size
|
|
max-width $item-image-size
|
|
max-height $item-image-size
|
|
.q-list-multiline > .q-item, .q-item-multiline
|
|
align-items flex-start
|
|
.q-list-link > .q-item, .q-item-link
|
|
cursor pointer
|
|
.q-list-highlight > .q-item, .q-item-highlight,
|
|
.q-list-link > .q-item, .q-item-link
|
|
&:hover
|
|
background $item-highlight-color
|
|
.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator
|
|
border-top 1px solid $item-separator-color
|
|
.q-list-inset-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-inset-separator
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
left ($item-padding + $item-inset)
|
|
height 1px
|
|
background $item-separator-color
|
|
.q-list-dense > .q-item, .q-item-dense
|
|
padding round($item-padding * $item-dense-factor) $item-padding
|
|
min-height round($item-min-height * $item-dense-factor)
|
|
.q-list-sparse > .q-item, .q-item-sparse
|
|
padding ($item-padding * $item-sparse-factor) $item-padding
|
|
min-height ($item-min-height * $item-sparse-factor)
|
|
.q-list-striped > .q-item:nth-child(even)
|
|
background-color $item-stripe-color
|
|
.q-list-striped-odd > .q-item:nth-child(odd)
|
|
background-color $item-stripe-color
|
|
.q-list
|
|
border 1px solid $item-separator-color
|
|
padding ($item-padding / 2) 0
|
|
.q-item-separator-component
|
|
margin ($item-padding / 2) 0
|
|
height 1px
|
|
border 0
|
|
background-color $item-separator-color
|
|
&:last-child
|
|
display none
|
|
& + .q-list-header
|
|
margin-top (- $item-padding / 2)
|
|
.q-item-separator-inset-component
|
|
margin-left ($item-padding + $item-inset)
|
|
.q-list-header
|
|
color $item-label-color
|
|
font-size 14px
|
|
font-weight 500
|
|
line-height 18px
|
|
min-height 48px
|
|
padding 15px $item-padding
|
|
.q-list-header-inset
|
|
padding-left ($item-padding + $item-inset)
|
|
.q-list-dark, .q-item-dark
|
|
.q-item-side
|
|
color $item-side-dark-color
|
|
.q-item-inverted
|
|
color black
|
|
background $item-side-dark-color
|
|
.q-item-label > span, .q-item-sublabel
|
|
color $item-content-secondary-text-dark-color
|
|
.q-item
|
|
color white
|
|
&.active, &.{$router-link-active}, &:focus
|
|
background $item-active-dark-color
|
|
.q-list-dark
|
|
border 1px solid $item-separator-dark-color
|
|
&.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator
|
|
border-top 1px solid $item-separator-dark-color
|
|
&.q-list-inset-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-inset-separator
|
|
&:after
|
|
background $item-separator-dark-color
|
|
&.q-list-striped > .q-item:nth-child(even)
|
|
background-color $item-stripe-dark-color
|
|
&.q-list-striped-odd > .q-item:nth-child(odd)
|
|
background-color $item-stripe-dark-color
|
|
.q-item-separator-component
|
|
background-color $item-separator-dark-color
|
|
.q-list-header
|
|
color $item-label-dark-color
|
|
&.q-list-highlight > .q-item, .q-item-highlight,
|
|
&.q-list-link > .q-item, .q-item-link
|
|
&:hover
|
|
background $item-highlight-dark-color
|
|
body.with-loading
|
|
overflow hidden
|
|
.q-loading
|
|
background $loading-background
|
|
> div
|
|
margin 40px 20px 0
|
|
max-width 450px
|
|
text-align center
|
|
text-shadow 0 0 7px black
|
|
minimized-modal()
|
|
max-width 80vw
|
|
max-height 80vh
|
|
maximized-modal()
|
|
width 100%
|
|
height 100%
|
|
max-width 100%
|
|
max-height 100%
|
|
border-radius 0
|
|
.q-layout-container
|
|
min-height 100vh !important
|
|
.modal-backdrop
|
|
background $dimmed-background
|
|
.modal.maximized &
|
|
display none
|
|
.modal-content
|
|
position relative
|
|
background $modal-background
|
|
box-shadow $popover-box-shadow
|
|
border-radius $generic-border-radius
|
|
overflow-y auto
|
|
will-change scroll-position
|
|
min-width 280px
|
|
max-height 80vh
|
|
-webkit-backface-visibility hidden
|
|
outline 0
|
|
.modal
|
|
z-index $z-modal
|
|
&.minimized .modal-content
|
|
minimized-modal()
|
|
&.maximized .modal-content
|
|
maximized-modal()
|
|
.q-modal-enter, .q-modal-leave-active
|
|
opacity 0
|
|
@media (min-width $breakpoint-md-min)
|
|
.modal:not(.maximized)
|
|
&.q-modal-enter .modal-content
|
|
transform scale(1.2)
|
|
&.q-modal-leave-active .modal-content
|
|
transform scale(.8)
|
|
.modal.maximized
|
|
&.q-modal-enter, &.q-modal-leave-active
|
|
.modal-content
|
|
transform translateY(30%)
|
|
@media (max-width $breakpoint-sm-max)
|
|
.q-responsive-modal
|
|
overflow hidden
|
|
.modal:not(.minimized)
|
|
.modal-content
|
|
maximized-modal()
|
|
&.q-modal-enter, &.q-modal-leave-active
|
|
.modal-content
|
|
transform translateY(30%)
|
|
.modal.minimized
|
|
&.q-modal-enter .modal-content
|
|
transform scale(1.2)
|
|
&.q-modal-leave-active .modal-content
|
|
transform scale(.8)
|
|
.q-maximized-modal
|
|
overflow hidden
|
|
.modal, .modal-content
|
|
transition all .2s ease-in-out
|
|
.modal-header
|
|
text-align $modal-header-text-align
|
|
padding $modal-header-padding
|
|
font-size $modal-header-font-size
|
|
font-weight 500
|
|
.modal-body
|
|
padding $modal-body-padding
|
|
color $modal-body-color
|
|
.small-modal-scroll, .modal-scroll, .big-modal-scroll
|
|
overflow auto
|
|
-webkit-overflow-scrolling touch
|
|
will-change scroll-position
|
|
.small-modal-scroll
|
|
max-height (.65 * $modal-scroll-size)
|
|
.modal-scroll
|
|
max-height $modal-scroll-size
|
|
.big-modal-scroll
|
|
max-height (2 * $modal-scroll-size)
|
|
.modal-buttons
|
|
padding $modal-buttons-padding
|
|
justify-content flex-end
|
|
color $primary
|
|
color var(--q-color-primary)
|
|
&.row
|
|
.q-btn + .q-btn
|
|
margin-left 8px
|
|
&.column
|
|
align-items flex-end
|
|
.q-btn + .q-btn
|
|
margin-top 8px
|
|
.q-modal-bottom-enter, .q-modal-bottom-leave-active
|
|
opacity 0
|
|
.modal-content
|
|
transform translateY(30%)
|
|
.q-modal-top-enter, .q-modal-top-leave-active
|
|
opacity 0
|
|
.modal-content
|
|
transform translateY(-30%)
|
|
.q-modal-right-enter, .q-modal-right-leave-active
|
|
opacity 0
|
|
.modal-content
|
|
transform translateX(30%)
|
|
.q-modal-left-enter, .q-modal-left-leave-active
|
|
opacity 0
|
|
.modal-content
|
|
transform translateX(-30%)
|
|
.q-notifications > div
|
|
z-index $z-notify
|
|
.q-notification-list
|
|
pointer-events none
|
|
left 0
|
|
right 0
|
|
margin-bottom 10px
|
|
position relative
|
|
.q-notification-list-center
|
|
top 0
|
|
bottom 0
|
|
.q-notification-list-top
|
|
top 0
|
|
.q-notification-list-bottom
|
|
bottom 0
|
|
body.q-ios-statusbar-x
|
|
.q-notification-list-center, .q-notification-list-top
|
|
top env(safe-area-inset-top)
|
|
.q-notification-list-center, .q-notification-list-bottom
|
|
bottom env(safe-area-inset-bottom)
|
|
.q-notification
|
|
border-radius 5px
|
|
pointer-events all
|
|
display inline-block
|
|
margin 10px 10px 0
|
|
transition-property transform,opacity
|
|
transition-duration 1s
|
|
z-index $z-notify
|
|
max-width 100%
|
|
.q-notification-
|
|
&top-left-enter, &top-left-leave-to,
|
|
&top-enter, &top-leave-to,
|
|
&top-right-enter, &top-right-leave-to
|
|
opacity 0
|
|
transform translateY(-50px)
|
|
z-index ($z-notify - 1)
|
|
&left-enter, &left-leave-to,
|
|
¢er-enter, ¢er-leave-to,
|
|
&right-enter, &right-leave-to,
|
|
&bottom-left-enter, &bottom-left-leave-to,
|
|
&bottom-enter, &bottom-leave-to,
|
|
&bottom-right-enter, &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,
|
|
¢er-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,
|
|
¢er-leave-active
|
|
top 0
|
|
&bottom-left-leave-active,
|
|
&bottom-leave-active,
|
|
&bottom-right-leave-active
|
|
bottom 0
|
|
.q-option-inner
|
|
display inline-block
|
|
line-height 0
|
|
& + .q-option-label
|
|
margin-left $label-offset
|
|
.q-option
|
|
vertical-align middle
|
|
input
|
|
display none !important
|
|
&.reverse .q-option-inner + .q-option-label
|
|
margin-right $label-offset
|
|
margin-left 0
|
|
.q-option-group-inline-opts > div
|
|
display inline-flex
|
|
.q-option-group
|
|
margin -5px
|
|
padding 5px 0
|
|
.q-pagination
|
|
input
|
|
text-align center
|
|
.q-btn
|
|
padding 0 5px !important
|
|
&.disabled
|
|
color $faded
|
|
color var(--q-color-faded)
|
|
.q-parallax
|
|
position relative
|
|
width 100%
|
|
overflow hidden
|
|
border-radius inherit
|
|
.q-parallax-media
|
|
> img, > video
|
|
position absolute
|
|
left 50%
|
|
bottom 0
|
|
min-width 100%
|
|
min-height 100%
|
|
will-change transform
|
|
.q-parallax-text
|
|
text-shadow $paralax-text-shadow
|
|
.q-popover
|
|
position fixed
|
|
box-shadow $popover-box-shadow
|
|
border-radius $generic-border-radius
|
|
background $popover-background
|
|
z-index $z-popover
|
|
overflow-y auto
|
|
overflow-x hidden
|
|
max-width $popover-max-width
|
|
outline 0
|
|
> .q-list:only-child
|
|
border none
|
|
body div .q-popover
|
|
display none
|
|
.q-progress
|
|
position relative
|
|
height $progress-track-height
|
|
display block
|
|
width 100%
|
|
background-clip padding-box
|
|
overflow hidden
|
|
.q-progress-model
|
|
background currentColor
|
|
&.animate
|
|
animation q-progress-stripes 2s linear infinite
|
|
&:not(.indeterminate)
|
|
position absolute
|
|
top 0
|
|
bottom 0
|
|
transition $progress-transition
|
|
&.indeterminate
|
|
&:before, &:after
|
|
content ''
|
|
position absolute
|
|
background inherit
|
|
top 0
|
|
left 0
|
|
bottom 0
|
|
will-change left, right
|
|
&:before
|
|
animation q-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
|
|
&:after
|
|
animation q-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
|
|
animation-delay 1.15s
|
|
&.stripe
|
|
&, &:before, &:after
|
|
background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important
|
|
background-size 40px 40px !important
|
|
.q-progress-track
|
|
top 0
|
|
left 0
|
|
bottom 0
|
|
transition $progress-transition
|
|
.q-progress-buffer
|
|
top 50%
|
|
transform translateY(-50%)
|
|
height 4px
|
|
right 0
|
|
transition $progress-transition
|
|
mask url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=")
|
|
.q-progress-track, .q-progress-buffer
|
|
background $progress-track-color
|
|
opacity $progress-track-opacity
|
|
position absolute
|
|
@keyframes q-progress-indeterminate
|
|
0%
|
|
left -35%
|
|
right 100%
|
|
60%
|
|
left 100%
|
|
right -90%
|
|
100%
|
|
left 100%
|
|
right -90%
|
|
@keyframes q-progress-indeterminate-short
|
|
0%
|
|
left -200%
|
|
right 100%
|
|
60%
|
|
left 107%
|
|
right -8%
|
|
100%
|
|
left 107%
|
|
right -8%
|
|
@keyframes q-progress-stripes
|
|
from
|
|
background-position 40px 0
|
|
to
|
|
background-position 0 0
|
|
.pull-to-refresh
|
|
position relative
|
|
.pull-to-refresh-message
|
|
height 65px
|
|
font-size $pull-to-refresh-font-size
|
|
.q-icon
|
|
font-size $pull-to-refresh-icon-size
|
|
margin-right 15px
|
|
transition all .3s
|
|
$radio-size = 21px
|
|
.q-radio-unchecked, .q-radio-checked, .q-radio .q-option-inner
|
|
height $radio-size
|
|
width $radio-size
|
|
min-width $radio-size
|
|
font-size $radio-size
|
|
transition transform .45s cubic-bezier(.23, 1, .32, 1)
|
|
opacity 1
|
|
.q-radio-unchecked
|
|
opacity 1
|
|
.q-radio-checked
|
|
transform-origin 50% 50% 0
|
|
transform scale(0)
|
|
.q-radio .q-option-inner.active
|
|
.q-radio-unchecked
|
|
opacity 0
|
|
.q-radio-checked
|
|
transform scale(1)
|
|
.q-rating
|
|
color $rating-grade-color
|
|
vertical-align middle
|
|
span
|
|
pointer-events none
|
|
display inherit
|
|
i
|
|
color currentColor
|
|
text-shadow $rating-shadow
|
|
position relative
|
|
cursor default
|
|
opacity .4
|
|
pointer-events all
|
|
&.hovered
|
|
transform scale(1.3)
|
|
&.exselected
|
|
opacity .7
|
|
&.active
|
|
opacity 1
|
|
& + i
|
|
margin-left .3rem
|
|
&.editable i
|
|
cursor pointer
|
|
&:not(.editable) span, i
|
|
outline 0
|
|
.q-scrollarea-thumb
|
|
background black
|
|
width 10px
|
|
right 0
|
|
opacity .2
|
|
transition opacity .3s
|
|
&.invisible-thumb
|
|
opacity 0 !important
|
|
&:hover
|
|
opacity .3
|
|
&:active
|
|
opacity .5
|
|
.q-toolbar .q-search
|
|
background rgba(255, 255, 255, .25)
|
|
$slider-height = 28px
|
|
$slider-track-height = 2px
|
|
$slider-mark-height = 10px
|
|
$slider-handle-size = 12px
|
|
$slider-label-transform = translateX(-50%) translateY(-139%) scale(1)
|
|
.q-slider-track, .q-slider-mark
|
|
opacity .4
|
|
background currentColor
|
|
.q-slider-track
|
|
position absolute
|
|
top 50%
|
|
left 0
|
|
transform translateY(-50%)
|
|
height $slider-track-height
|
|
width 100%
|
|
&:not(.dragging)
|
|
transition all .3s ease
|
|
&.active-track
|
|
opacity 1
|
|
&.track-draggable.dragging
|
|
height ($slider-track-height * 2)
|
|
transition height .3s ease
|
|
&.handle-at-minimum
|
|
background transparent
|
|
.q-slider-mark
|
|
position absolute
|
|
top 50%
|
|
height $slider-mark-height
|
|
width 2px
|
|
transform translateX(-50%) translateY(-50%)
|
|
.q-slider-handle-container
|
|
position relative
|
|
height 100%
|
|
margin-left ($slider-handle-size / 2)
|
|
margin-right ($slider-handle-size / 2)
|
|
.q-slider-label
|
|
top 0
|
|
left ($slider-handle-size / 2)
|
|
opacity 0
|
|
transform translateX(-50%) translateY(0) scale(0)
|
|
transition all .2s
|
|
padding 2px 4px
|
|
&.label-always
|
|
opacity 1
|
|
transform $slider-label-transform
|
|
.q-slider-handle
|
|
position absolute
|
|
top 50%
|
|
transform translate3d(-50%, -50%, 0)
|
|
transform-origin center
|
|
transition all .3s ease
|
|
width $slider-handle-size
|
|
height $slider-handle-size
|
|
outline 0
|
|
.q-chip
|
|
max-width unset
|
|
&.dragging
|
|
transform translate3d(-50%, -50%, 0) scale(1.3)
|
|
transition opacity .3s ease, transform .3s ease
|
|
.q-slider-label
|
|
opacity 1
|
|
transform $slider-label-transform
|
|
background currentColor
|
|
&.handle-at-minimum
|
|
background white
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
bottom 0
|
|
left 0
|
|
background transparent
|
|
border-radius inherit
|
|
border 2px solid currentColor
|
|
.q-slider-ring
|
|
position absolute
|
|
top -50%
|
|
left -50%
|
|
width 200%
|
|
height 200%
|
|
border-radius inherit
|
|
pointer-events none
|
|
opacity 0
|
|
transform scale(0)
|
|
transition all .2s ease-in
|
|
background currentColor
|
|
.q-slider:not(.disabled):not(.readonly)
|
|
.q-slider-handle.dragging, .q-slider-handle:focus, body.desktop &:hover
|
|
.q-slider-ring
|
|
opacity .4
|
|
transform scale(1)
|
|
.q-slider.disabled
|
|
.q-slider-handle
|
|
border 2px solid white
|
|
.q-slider-handle.handle-at-minimum
|
|
background currentColor
|
|
.q-slider
|
|
height $slider-height
|
|
width 100%
|
|
color $primary
|
|
color var(--q-color-primary)
|
|
cursor pointer
|
|
&.label-always, &.with-padding
|
|
padding 36px 0 8px
|
|
height 64px
|
|
&.has-error
|
|
color $negative
|
|
color var(--q-color-negative)
|
|
&.has-warning
|
|
color $warning
|
|
color var(--q-color-warning)
|
|
.q-spinner
|
|
vertical-align middle
|
|
.q-spinner-mat
|
|
animation q-spin 2s linear infinite /* rtl:ignore */
|
|
transform-origin center center /* rtl:ignore */
|
|
.path
|
|
stroke-dasharray 1, 200
|
|
stroke-dashoffset 0
|
|
stroke-linecap round
|
|
animation q-mat-dash 1.5s ease-in-out infinite /* 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-stepper
|
|
border-radius $generic-border-radius
|
|
box-shadow $shadow-2
|
|
.q-stepper-title
|
|
font-size 14px
|
|
.q-stepper-subtitle
|
|
font-size 12px
|
|
opacity .7
|
|
.q-stepper-dot
|
|
margin-right 8px
|
|
font-size 14px
|
|
width 24px
|
|
height 24px
|
|
border-radius 50%
|
|
background currentColor
|
|
span
|
|
color white
|
|
.q-stepper-tab
|
|
padding 24px
|
|
font-size 14px
|
|
flex-direction row
|
|
transition color .28s, background .28s
|
|
&.step-waiting
|
|
color black
|
|
.q-stepper-dot
|
|
color $stepper-label-inactive-color
|
|
&.step-navigation
|
|
user-select none
|
|
cursor pointer
|
|
&.step-color
|
|
color currentColor
|
|
&.step-active .q-stepper-title
|
|
font-weight bold
|
|
&.step-disabled
|
|
color $stepper-label-inactive-color
|
|
&.step-error
|
|
color $negative
|
|
color var(--q-color-negative)
|
|
.q-stepper-dot
|
|
background transparent
|
|
span
|
|
color $negative
|
|
color var(--q-color-negative)
|
|
font-size 24px
|
|
.q-stepper-header
|
|
min-height 72px
|
|
&:not(.alternative-labels)
|
|
.q-stepper-tab
|
|
justify-content center
|
|
.q-stepper-dot:after
|
|
display none
|
|
&.alternative-labels
|
|
min-height 104px
|
|
.q-stepper-tab
|
|
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
|
|
.q-stepper-step-content
|
|
color black
|
|
.q-stepper-horizontal >
|
|
.q-stepper-header
|
|
.q-stepper-tab
|
|
overflow hidden
|
|
.q-stepper-first .q-stepper-dot:before,
|
|
.q-stepper-last .q-stepper-label:after,
|
|
.q-stepper-last .q-stepper-dot:after
|
|
display none
|
|
.q-stepper-line
|
|
&:before, &:after
|
|
position absolute
|
|
top 50%
|
|
height 1px
|
|
width 100vw
|
|
background $stepper-divider-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
|
|
margin 0 16px 8px
|
|
.q-stepper-step
|
|
.q-stepper-nav
|
|
margin 16px 0 0
|
|
> div.col
|
|
display none
|
|
> .q-stepper-step-content > .q-stepper-step-inner
|
|
padding 24px
|
|
.q-stepper-vertical
|
|
padding 8px 0 18px
|
|
.q-stepper-vertical >
|
|
.q-stepper-nav
|
|
margin-top 16px
|
|
> div.col
|
|
display none
|
|
.q-stepper-step
|
|
overflow hidden
|
|
> .q-stepper-step-content > .q-stepper-step-inner
|
|
padding 0 24px 24px 48px
|
|
> .q-stepper-tab
|
|
padding 12px 16px
|
|
.q-stepper-dot
|
|
&:before, &:after
|
|
content ''
|
|
position absolute
|
|
left 50%
|
|
width 1px
|
|
height 100vh
|
|
background $stepper-divider-color
|
|
.q-stepper-dot:before
|
|
bottom 100%
|
|
margin-bottom 8px
|
|
.q-stepper-dot:after
|
|
top 100%
|
|
margin-top 8px
|
|
.q-stepper-label
|
|
padding-top 4px
|
|
.q-stepper-title
|
|
line-height 18px
|
|
&.q-stepper-first .q-stepper-dot:before,
|
|
&.q-stepper-last .q-stepper-dot:after
|
|
display none
|
|
body.desktop .q-stepper-tab.step-navigation:hover
|
|
background $stepper-hover-background
|
|
@media (max-width $breakpoint-sm-max)
|
|
.q-stepper-horizontal.q-stepper-contractable >
|
|
.q-stepper-header
|
|
min-height 72px
|
|
.q-stepper-tab
|
|
padding 24px 0
|
|
&:not(:last-child)
|
|
.q-stepper-dot:after
|
|
display block !important
|
|
.q-stepper-dot
|
|
margin 0
|
|
.q-stepper-label
|
|
display none
|
|
.q-tabs
|
|
flex-direction column
|
|
border-radius $generic-border-radius
|
|
.q-layout-marginal .q-tabs
|
|
border-radius 0
|
|
.q-tabs-scroller
|
|
overflow hidden
|
|
.q-tab-pane
|
|
padding $tabs-pane-padding
|
|
.q-tabs-panes:empty
|
|
display none
|
|
.q-tabs-normal
|
|
.q-tab-icon, .q-tab-label
|
|
opacity $tabs-unselected-opacity
|
|
.q-tab
|
|
cursor pointer
|
|
transition color .3s, background .3s
|
|
white-space nowrap
|
|
user-select none
|
|
padding $tabs-padding
|
|
min-height $tabs-min-height
|
|
text-transform $tabs-text-transform
|
|
.q-tab-icon-parent + .q-tab-label-parent
|
|
margin-top 4px
|
|
.q-chip
|
|
top -8px
|
|
right -10px
|
|
left auto
|
|
min-height auto
|
|
color white
|
|
background alpha($dot-color, .75)
|
|
&.active
|
|
.q-tab-icon, .q-tab-label
|
|
opacity 1
|
|
.q-tab-label
|
|
text-align center
|
|
.q-tab-icon
|
|
font-size $tabs-icon-font-size
|
|
.q-tab-focus-helper
|
|
z-index -1
|
|
outline 0
|
|
&:focus
|
|
z-index unset
|
|
background currentColor
|
|
opacity .1
|
|
@media (max-width $breakpoint-sm-max)
|
|
.q-tab
|
|
&.hide-icon .q-tab-icon-parent,
|
|
&.hide-label .q-tab-label-parent
|
|
display none !important
|
|
&.hide-icon .q-tab-label
|
|
margin-top 0
|
|
.q-tab-full.hide-none .q-tab-label-parent .q-tab-meta
|
|
display none
|
|
@media (min-width $breakpoint-md-min)
|
|
.q-tab-full .q-tab-label-parent .q-tab-meta
|
|
display none
|
|
@media (max-width $breakpoint-md-max)
|
|
.q-tabs-head:not(.scrollable)
|
|
.q-tabs-scroller, .q-tab
|
|
flex 1 1 auto
|
|
@media (min-width $breakpoint-lg-min)
|
|
.q-tab
|
|
padding-left $tabs-big-screen-horiz-padding
|
|
padding-right $tabs-big-screen-horiz-padding
|
|
.q-layout-marginal .q-tabs-head:not(.scrollable)
|
|
padding-left $tabs-big-screen-side-padding
|
|
padding-right $tabs-big-screen-side-padding
|
|
.q-tabs-head
|
|
min-height $tabs-min-height
|
|
overflow hidden
|
|
font-size $tabs-font-size
|
|
font-weight $tabs-font-weight
|
|
transition color .18s ease-in, box-shadow .18s ease-in
|
|
position relative
|
|
&:not(.scrollable)
|
|
.q-tabs-left-scroll, .q-tabs-right-scroll
|
|
display none !important
|
|
.q-tabs-left-scroll, .q-tabs-right-scroll
|
|
position absolute
|
|
height 100%
|
|
cursor pointer
|
|
color white
|
|
top 0
|
|
.q-icon
|
|
text-shadow 0 0 10px black
|
|
font-size (1.2 * $tabs-icon-font-size)
|
|
visibility hidden
|
|
&.disabled
|
|
display none
|
|
.q-tabs:hover
|
|
.q-tabs-left-scroll, .q-tabs-right-scroll
|
|
.q-icon
|
|
visibility visible
|
|
.q-tabs-left-scroll
|
|
left 0 /* rtl:ignore */
|
|
.q-tabs-right-scroll
|
|
right 0 /* rtl:ignore */
|
|
.q-tabs-align-justify
|
|
.q-tabs-scroller, .q-tab
|
|
flex 1 1 auto
|
|
.q-tabs-align-center
|
|
justify-content center
|
|
.q-tabs-align-right
|
|
justify-content flex-end
|
|
.q-tabs-bar
|
|
border $tabs-border-width solid currentColor
|
|
border-width 0
|
|
position absolute
|
|
height 0
|
|
left 0
|
|
right 0
|
|
.q-tabs-global-bar
|
|
width 1px
|
|
transform scale(0)
|
|
transform-origin left center
|
|
transition transform
|
|
transition-duration .15s
|
|
transition-timing-function cubic-bezier(.4, .0, 1, 1)
|
|
&.contract
|
|
transition-duration .18s
|
|
transition-timing-function cubic-bezier(.0, .0, .2, 1)
|
|
.q-tabs-global-bar-container.highlight > .q-tabs-global-bar
|
|
display none
|
|
.q-tabs-two-lines .q-tab
|
|
white-space normal
|
|
.q-tab-label
|
|
overflow hidden
|
|
display -webkit-box
|
|
-webkit-box-orient vertical
|
|
-webkit-line-clamp 2
|
|
.q-tabs-position-top
|
|
> .q-tabs-head
|
|
.q-tabs-bar
|
|
bottom 0
|
|
border-bottom-width $tabs-border-width
|
|
.q-tabs-position-bottom
|
|
> .q-tabs-head
|
|
.q-tabs-bar
|
|
top 0
|
|
border-top-width $tabs-border-width
|
|
> .q-tabs-panes
|
|
order -1
|
|
.q-tabs-inverted
|
|
.q-tabs-head
|
|
background white
|
|
&.q-tabs-position-top
|
|
> .q-tabs-panes
|
|
border-top $tabs-pane-border
|
|
> .q-tab-pane
|
|
border-top 0
|
|
&.q-tabs-position-bottom
|
|
> .q-tabs-panes
|
|
border-bottom $tabs-pane-border
|
|
> .q-tab-pane
|
|
border-bottom 0
|
|
body.mobile .q-tabs-scroller
|
|
overflow-y hidden
|
|
overflow-x auto
|
|
will-change scroll-position
|
|
-webkit-overflow-scrolling touch
|
|
body.desktop .q-tab
|
|
&:before
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
bottom 0
|
|
left 0
|
|
opacity .1
|
|
background currentColor
|
|
&:hover:before
|
|
content ''
|
|
.q-table-container
|
|
border-radius $table-border-radius
|
|
box-shadow $table-box-shadow
|
|
position relative
|
|
&.fullscreen
|
|
background-color inherit
|
|
.q-table-top
|
|
min-height 64px
|
|
padding 8px 24px
|
|
&:before
|
|
content ''
|
|
position absolute
|
|
pointer-events none
|
|
top 0
|
|
right 0
|
|
bottom 0
|
|
left 0
|
|
opacity .2
|
|
transition $table-transition
|
|
.q-table-control
|
|
min-height 36px
|
|
padding 8px 0
|
|
flex-wrap wrap
|
|
.q-table-title
|
|
font-size 20px
|
|
letter-spacing 0.005em
|
|
font-weight 400
|
|
.q-table-separator
|
|
min-width 8px !important
|
|
.q-table-nodata .q-icon
|
|
font-size 200%
|
|
padding-right 15px
|
|
.q-table-progress
|
|
height 0 !important
|
|
td
|
|
padding 0 !important
|
|
border-bottom 1px solid transparent !important
|
|
.q-progress
|
|
position absolute
|
|
height 2px
|
|
bottom 0
|
|
.q-table-middle
|
|
max-width 100%
|
|
.q-table-bottom
|
|
min-height 48px
|
|
padding 4px 14px 4px 24px
|
|
&, .q-if
|
|
font-size 12px
|
|
.q-table-control
|
|
min-height 24px
|
|
.q-table-control
|
|
display flex
|
|
align-items center
|
|
.q-table-sort-icon
|
|
transition $table-transition
|
|
will-change opacity, transform
|
|
opacity 0
|
|
font-size 120%
|
|
.q-table-sort-icon-left,
|
|
.q-table-sort-icon-center
|
|
margin-left 4px
|
|
.q-table-sort-icon-right
|
|
margin-right 4px
|
|
.q-table
|
|
width 100%
|
|
max-width 100%
|
|
border-collapse collapse
|
|
border-spacing 0
|
|
thead tr
|
|
height 56px
|
|
th
|
|
font-weight 500
|
|
font-size 12px
|
|
transition $table-transition
|
|
user-select none
|
|
&.sortable
|
|
cursor pointer
|
|
&:hover .q-table-sort-icon
|
|
opacity .5
|
|
&.sorted .q-table-sort-icon
|
|
opacity 1 !important
|
|
&.sort-desc .q-table-sort-icon
|
|
transform rotate(180deg)
|
|
tbody tr
|
|
transition $table-transition
|
|
will-change background
|
|
th, td
|
|
white-space nowrap
|
|
padding 7px 24px
|
|
thead, td, th
|
|
border-style solid
|
|
border-width 0
|
|
tbody td
|
|
height 48px
|
|
font-weight 400
|
|
font-size 13px
|
|
.q-table-col-auto-width
|
|
width 1px
|
|
.q-table-bottom-item
|
|
margin-right 24px
|
|
.q-table-grid
|
|
box-shadow none
|
|
.q-table-bottom
|
|
border-top 0
|
|
.q-table
|
|
height 2px
|
|
thead
|
|
border 0
|
|
.q-table-horizontal-separator
|
|
thead, tbody td
|
|
border-width 0 0 1px 0
|
|
.q-table-vertical-separator
|
|
thead
|
|
border-width 0 0 1px 0
|
|
td
|
|
border-width 0 0 0 1px
|
|
td:first-child
|
|
border-left 0
|
|
.q-table-cell-separator
|
|
td
|
|
border-width 1px
|
|
td:first-child
|
|
border-left 0
|
|
td:last-child
|
|
border-right 0
|
|
table-dense()
|
|
.q-table-top
|
|
min-height 48px
|
|
.q-table-top, .q-table-bottom
|
|
padding-left 8px
|
|
padding-right 8px
|
|
.q-table-bottom
|
|
min-height 42px
|
|
.q-table-sort-icon
|
|
font-size 110%
|
|
.q-table
|
|
th, td
|
|
padding 4px 8px
|
|
thead tr
|
|
height 40px
|
|
tbody td
|
|
height 28px
|
|
.q-table-bottom-item
|
|
margin-right 8px
|
|
.q-table-dense
|
|
table-dense()
|
|
@media (max-width $breakpoint-sm-max)
|
|
table-dense()
|
|
.q-table-bottom
|
|
color $table-header-color
|
|
border-top 1px solid $table-border-color
|
|
.q-table
|
|
color $table-color
|
|
thead, tr, th, td
|
|
border-color $table-border-color
|
|
th
|
|
color $table-header-color
|
|
&.sortable:hover, &.sorted
|
|
color $table-color
|
|
tbody tr
|
|
&.selected
|
|
background $table-selected-background
|
|
&:hover
|
|
background $table-hover-background
|
|
.q-table-dark
|
|
color $table-dark-color
|
|
.q-table-bottom, .q-table-top
|
|
color $table-dark-header-color
|
|
border-top 1px solid $table-dark-border-color
|
|
thead, tr, th, td
|
|
border-color $table-dark-border-color
|
|
th
|
|
color $table-dark-header-color
|
|
&.sortable:hover, &.sorted
|
|
color $table-dark-color
|
|
tbody tr
|
|
&.selected
|
|
background $table-dark-selected-background
|
|
&:hover
|
|
background $table-dark-hover-background
|
|
.q-timeline
|
|
padding 0
|
|
width 100%
|
|
list-style none
|
|
h6
|
|
line-height inherit
|
|
.q-timeline-title
|
|
margin-top 0
|
|
margin-bottom 16px
|
|
.q-timeline-subtitle
|
|
font-size 12px
|
|
margin-bottom 8px
|
|
opacity .4
|
|
text-transform uppercase
|
|
letter-spacing 1px
|
|
font-weight 700
|
|
.q-timeline-dot
|
|
position absolute
|
|
top 0
|
|
bottom 0
|
|
left 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-timeline-entry-with-icon
|
|
.q-timeline-dot
|
|
width 31px
|
|
left -8px
|
|
&:before
|
|
height 31px
|
|
width 31px
|
|
&:after
|
|
top 41px
|
|
left 14px
|
|
.q-timeline-subtitle
|
|
padding-top 8px
|
|
.q-timeline-dot .q-icon
|
|
position absolute
|
|
display inline-flex
|
|
top 0
|
|
left 0
|
|
right 0
|
|
font-size 16px
|
|
height 38px
|
|
color white
|
|
transition color .3s ease-in-out
|
|
.q-timeline-dark
|
|
color white
|
|
.q-timeline-subtitle
|
|
opacity .7
|
|
.q-timeline-entry
|
|
padding-left 40px
|
|
position relative
|
|
line-height 22px
|
|
&:last-child
|
|
padding-bottom 0
|
|
.q-timeline-dot:after
|
|
content none
|
|
.q-timeline-hover .q-timeline-entry
|
|
&:hover
|
|
.q-timeline-dot:before
|
|
background transparent
|
|
border 3px solid currentColor
|
|
&.q-timeline-entry-with-icon:hover .q-timeline-dot .q-icon
|
|
color currentColor
|
|
.q-timeline-content
|
|
padding-bottom 24px
|
|
.q-timeline-heading
|
|
position relative
|
|
&:first-child .q-timeline-heading-title
|
|
padding-top 0
|
|
&:last-child .q-timeline-heading-title
|
|
padding-bottom 0
|
|
.q-timeline-heading-title
|
|
padding 32px 0
|
|
margin 0
|
|
@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
|
|
.q-timeline-responsive
|
|
.q-timeline-heading
|
|
display table-row
|
|
font-size 200%
|
|
> div
|
|
display table-cell
|
|
.q-timeline-heading-title
|
|
margin-left -50px
|
|
.q-timeline
|
|
display table
|
|
.q-timeline-entry
|
|
display table-row
|
|
padding 0
|
|
.q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
|
|
display table-cell
|
|
vertical-align top
|
|
.q-timeline-subtitle
|
|
text-align right
|
|
width 35%
|
|
.q-timeline-dot
|
|
position relative
|
|
.q-timeline-content
|
|
padding-left 30px
|
|
.q-timeline-entry-with-icon .q-timeline-content
|
|
padding-top 8px
|
|
.q-timeline-subtitle
|
|
padding-right 30px
|
|
@media (min-width $breakpoint-lg-min)
|
|
.q-timeline-responsive
|
|
.q-timeline-heading-title
|
|
text-align center
|
|
margin-left 0
|
|
.q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
|
|
display block
|
|
margin 0
|
|
padding 0
|
|
.q-timeline-dot
|
|
position absolute
|
|
left 50%
|
|
margin-left -7.15px
|
|
.q-timeline-entry-with-icon .q-timeline-dot
|
|
left 50%
|
|
margin-left -15px
|
|
.q-timeline-subtitle, .q-timeline-content
|
|
width 50%
|
|
.q-timeline-entry-left .q-timeline-content,
|
|
.q-timeline-entry-right .q-timeline-subtitle
|
|
float left
|
|
padding-right 30px
|
|
text-align right
|
|
.q-timeline-entry-left .q-timeline-subtitle,
|
|
.q-timeline-entry-right .q-timeline-content
|
|
float right
|
|
text-align left
|
|
padding-left 30px
|
|
.q-timeline-entry-with-icon .q-timeline-content
|
|
padding-top 8px
|
|
.q-timeline-entry
|
|
padding-bottom 24px
|
|
overflow hidden
|
|
$toggle-width = 40px
|
|
$toggle-height = 21px
|
|
$toggle-handle-size = $toggle-height
|
|
$toggle-base-height = round($toggle-handle-size / 1.7)
|
|
.q-toggle-base
|
|
transition all .45s cubic-bezier(.23, 1, .32, 1)
|
|
width 100%
|
|
height $toggle-base-height
|
|
border-radius 30px
|
|
background currentColor
|
|
opacity .5
|
|
.q-toggle-handle
|
|
background rgb(245, 245, 245)
|
|
transition all 450ms cubic-bezier(.23, 1, .32, 1)
|
|
box-shadow $shadow-1
|
|
border-radius 50%
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
width $toggle-handle-size
|
|
height $toggle-handle-size
|
|
line-height $toggle-handle-size
|
|
.q-toggle .q-option-inner
|
|
height $toggle-height
|
|
width $toggle-width
|
|
min-width $toggle-width
|
|
padding round(($toggle-height - $toggle-base-height) / 2) 0
|
|
&.active
|
|
.q-toggle-handle
|
|
background currentColor
|
|
left ($toggle-width - $toggle-handle-size)
|
|
.q-toggle-icon
|
|
color white
|
|
.q-toolbar
|
|
padding $toolbar-padding
|
|
min-height $toolbar-min-height
|
|
overflow hidden
|
|
width 100%
|
|
.q-toolbar-inverted
|
|
background white
|
|
.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
|
|
padding $toolbar-title-padding
|
|
.q-toolbar-subtitle
|
|
font-size $toolbar-subtitle-font-size
|
|
opacity .7
|
|
.q-toolbar-title, .q-toolbar-subtitle
|
|
text-overflow ellipsis
|
|
white-space nowrap
|
|
overflow hidden
|
|
.q-tooltip
|
|
position fixed
|
|
font-size $tooltip-fontsize
|
|
color $tooltip-color
|
|
background $tooltip-background
|
|
z-index $z-tooltip
|
|
padding $tooltip-padding
|
|
border-radius $tooltip-border-radius
|
|
overflow-y auto
|
|
overflow-x hidden
|
|
pointer-events none
|
|
.q-tree-node
|
|
margin 0
|
|
list-style-type none
|
|
position relative
|
|
padding 0 0 3px 22px
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
top -3px
|
|
bottom 0
|
|
width 1px
|
|
right auto
|
|
left -13px
|
|
border-left 1px solid currentColor
|
|
&:last-child:after
|
|
display none
|
|
.q-tree-node-header:before
|
|
content ''
|
|
position absolute
|
|
top -3px
|
|
bottom 50%
|
|
width 35px
|
|
left -35px
|
|
border-left 1px solid currentColor
|
|
border-bottom 1px solid currentColor
|
|
.q-tree-children
|
|
padding-left 25px
|
|
&.disabled
|
|
pointer-events none
|
|
.q-tree-node-body
|
|
padding 5px 0 8px 5px
|
|
.q-tree-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 1px
|
|
height 100%
|
|
right auto
|
|
left 12px
|
|
border-left 1px solid currentColor
|
|
bottom 50px
|
|
.q-tree-node-link
|
|
cursor pointer
|
|
.q-tree-node-selected
|
|
background rgba(0, 0, 0, .15)
|
|
.q-tree-dark .q-tree-node-selected
|
|
background rgba(255, 255, 255, .4)
|
|
body.desktop
|
|
.q-tree-node-link:hover
|
|
background rgba(0, 0, 0, .1)
|
|
.q-tree-dark .q-tree-node-link:hover
|
|
background rgba(255, 255, 255, .3)
|
|
.q-tree-node-header
|
|
padding 4px
|
|
margin-top 3px
|
|
border-radius $generic-border-radius
|
|
&.disabled
|
|
pointer-events none
|
|
.q-tree-icon
|
|
font-size 1.5em
|
|
.q-tree-img
|
|
height 3em
|
|
&.avatar
|
|
width 2em
|
|
height 2em
|
|
.q-tree-arrow
|
|
font-size 1rem
|
|
width 1rem
|
|
height 1rem
|
|
.q-tree-arrow-rotate
|
|
transform rotate(90deg)
|
|
[dir=rtl]
|
|
.q-tree-arrow
|
|
transform rotate(180deg) /* rtl:ignore */
|
|
.q-tree-arrow-rotate
|
|
transform rotate(90deg) /* rtl:ignore */
|
|
.q-tree
|
|
|
|
> .q-tree-node
|
|
padding 0
|
|
&:after, > .q-tree-node-header:before
|
|
display none
|
|
|
|
> .q-tree-node-child > .q-tree-node-header
|
|
padding-left 24px
|
|
.q-uploader-expanded .q-if
|
|
border-bottom-left-radius 0
|
|
border-bottom-right-radius 0
|
|
.q-uploader-input
|
|
opacity 0
|
|
max-width 100%
|
|
height 100%
|
|
width 100%
|
|
font-size 0
|
|
.q-uploader-pick-button[disabled] .q-uploader-input
|
|
display none
|
|
.q-uploader-files
|
|
border 1px solid $grey-4
|
|
font-size 14px
|
|
max-height 500px
|
|
.q-uploader-files-no-border .q-uploader-files
|
|
border-top 0 !important
|
|
.q-uploader-file:not(:last-child)
|
|
border-bottom 1px solid $grey-4
|
|
.q-uploader-progress-bg, .q-uploader-progress-text
|
|
pointer-events none
|
|
.q-uploader-progress-bg
|
|
height 100%
|
|
opacity .2
|
|
.q-uploader-progress-text
|
|
font-size 40px
|
|
opacity .1
|
|
right 44px
|
|
bottom 0
|
|
.q-uploader-dnd
|
|
outline 2px dashed currentColor
|
|
outline-offset -6px
|
|
background rgba(255, 255, 255, .6)
|
|
&.inverted
|
|
background rgba(0, 0, 0, .3)
|
|
.q-uploader-dark
|
|
.q-uploader-files
|
|
color white
|
|
border 1px solid $field-dark-label-color
|
|
.q-uploader-bg
|
|
color white
|
|
.q-uploader-progress-text
|
|
opacity .2
|
|
.q-uploader-file:not(:last-child)
|
|
border-bottom 1px solid $dark
|
|
border-bottom 1px solid var(--q-color-dark)
|
|
img
|
|
&.responsive
|
|
max-width 100%
|
|
height auto
|
|
&.avatar
|
|
width 50px
|
|
height 50px
|
|
border-radius 50%
|
|
box-shadow $shadow-1
|
|
vertical-align middle
|
|
.q-video
|
|
position relative
|
|
overflow hidden
|
|
border-radius inherit
|
|
iframe, object, embed
|
|
width 100%
|
|
height 100%
|
|
:root
|
|
--q-color-primary $primary
|
|
--q-color-secondary $secondary
|
|
--q-color-tertiary $tertiary
|
|
--q-color-positive $positive
|
|
--q-color-negative $negative
|
|
--q-color-negative-l lighten($negative, 46%)
|
|
--q-color-info $info
|
|
--q-color-warning $warning
|
|
--q-color-warning-l lighten($warning, 46%)
|
|
--q-color-light $light
|
|
--q-color-light-d darken($light, 10%)
|
|
--q-color-faded $faded
|
|
--q-color-dark $dark
|
|
.text-primary
|
|
color $primary !important
|
|
color var(--q-color-primary) !important
|
|
.bg-primary
|
|
background $primary !important
|
|
background var(--q-color-primary) !important
|
|
.text-secondary
|
|
color $secondary !important
|
|
color var(--q-color-secondary) !important
|
|
.bg-secondary
|
|
background $secondary !important
|
|
background var(--q-color-secondary) !important
|
|
.text-tertiary
|
|
color $tertiary !important
|
|
color var(--q-color-tertiary) !important
|
|
.bg-tertiary
|
|
background $tertiary !important
|
|
background var(--q-color-tertiary) !important
|
|
.text-faded
|
|
color $faded !important
|
|
color var(--q-color-faded) !important
|
|
.bg-faded
|
|
background $faded !important
|
|
background var(--q-color-faded) !important
|
|
.text-positive
|
|
color $positive !important
|
|
color var(--q-color-positive) !important
|
|
.bg-positive
|
|
background $positive !important
|
|
background var(--q-color-positive) !important
|
|
.text-negative
|
|
color $negative !important
|
|
color var(--q-color-negative) !important
|
|
.bg-negative
|
|
background $negative !important
|
|
background var(--q-color-negative) !important
|
|
.text-info
|
|
color $info !important
|
|
color var(--q-color-info) !important
|
|
.bg-info
|
|
background $info !important
|
|
background var(--q-color-info) !important
|
|
.text-warning
|
|
color $warning !important
|
|
color var(--q-color-warning) !important
|
|
.bg-warning
|
|
background $warning !important
|
|
background var(--q-color-warning) !important
|
|
.text-white
|
|
color #fff !important
|
|
.bg-white
|
|
background #fff !important
|
|
.text-black
|
|
color #000 !important
|
|
.bg-black
|
|
background #000 !important
|
|
.text-light
|
|
color $light !important
|
|
color var(--q-color-light) !important
|
|
.bg-light
|
|
background $light !important
|
|
background var(--q-color-light) !important
|
|
.text-dark
|
|
color $dark !important
|
|
color var(--q-color-dark) !important
|
|
.bg-dark
|
|
background $dark !important
|
|
background var(--q-color-dark) !important
|
|
.text-transparent
|
|
color transparent !important
|
|
.bg-transparent
|
|
background transparent !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 in 1..24
|
|
.shadow-{$z}
|
|
box-shadow $shadow-+$z
|
|
.shadow-up-{$z}
|
|
box-shadow $shadow-up-+$z
|
|
.no-shadow, .shadow-0
|
|
box-shadow none !important
|
|
.inset-shadow
|
|
box-shadow $inset-shadow !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
|
|
fr(selector, name, i = '')
|
|
unquote(replace(unquote('<i>'), unquote(i), replace(unquote('<name>'), unquote(name), unquote(selector))))
|
|
fe(selector, name, noProc, i = '')
|
|
if noProc
|
|
return fr(selector, name, i)
|
|
return unquote(join(',', fr(selector, '', i) fr(selector, name, i)))
|
|
fg($name, $size)
|
|
$noProcNotZero = $size > 0
|
|
@media (min-width $size)
|
|
{fe('.col<name>', $name, $noProcNotZero)}
|
|
&, &-auto, &-grow
|
|
.row > &, .flex > &
|
|
width auto
|
|
min-width 0
|
|
max-width 100%
|
|
.column > &, .flex > &
|
|
height auto
|
|
min-height 0
|
|
max-height 100%
|
|
&
|
|
flex 10**4 1 0%
|
|
&-auto
|
|
flex 0 0 auto
|
|
&-grow
|
|
flex 1 0 auto
|
|
for $i in (0..$flex-cols)
|
|
$ic = s('%s', $i)
|
|
{fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
@extend .col{$name}-auto
|
|
.row
|
|
{fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
height auto
|
|
width (round($i / $flex-cols * 100, 4))%
|
|
if $i != 0 || $name != ''
|
|
{fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
margin-left (round($i / $flex-cols * 100, 4))%
|
|
.column
|
|
{fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
|
|
height (round($i / $flex-cols * 100, 4))%
|
|
width auto
|
|
.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
|
|
.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
|
|
for $name, $size in $flex-gutter
|
|
.gutter-
|
|
&x-{$name}
|
|
margin-left (- $size)
|
|
> div
|
|
padding-left $size
|
|
&y-{$name}
|
|
margin-top (- $size)
|
|
> div
|
|
padding-top $size
|
|
&{$name}
|
|
@extends .gutter-x-{$name}, .gutter-y-{$name}
|
|
> div
|
|
@extends .gutter-x-{$name} > div, .gutter-y-{$name} > div
|
|
for $name, $size in $sizes
|
|
fg(s('-%s', unquote($name)), $size)
|
|
.backdrop
|
|
display none
|
|
position fixed
|
|
top 0
|
|
right 0
|
|
bottom 0
|
|
left 0
|
|
width 100vw
|
|
height 100vh
|
|
background transparent
|
|
transition background .28s ease-in
|
|
&.active
|
|
display block
|
|
background $backdrop-background
|
|
.round-borders
|
|
border-radius $generic-border-radius !important
|
|
.generic-margin, .group > *
|
|
margin 5px
|
|
.no-transition
|
|
transition none !important
|
|
.transition-0
|
|
transition 0s !important
|
|
.glossy
|
|
background-image linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04)) !important
|
|
.q-placeholder
|
|
&::-webkit-input-placeholder
|
|
color inherit
|
|
opacity .5
|
|
&::-moz-placeholder
|
|
color inherit
|
|
opacity .5
|
|
&:-ms-input-placeholder
|
|
color inherit
|
|
opacity .5
|
|
.q-body-fullscreen-mixin, .q-body-prevent-scroll
|
|
overflow hidden !important
|
|
.q-no-input-spinner
|
|
-moz-appearance textfield !important
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button
|
|
-webkit-appearance none
|
|
margin 0
|
|
a.q-link
|
|
outline 0
|
|
color inherit
|
|
text-decoration none
|
|
.q-select-highlight
|
|
background $item-highlight-color !important
|
|
@keyframes q-highlight
|
|
0%
|
|
background $lime-6
|
|
100%
|
|
background transparent
|
|
.highlight-and-fade
|
|
animation q-highlight 2s /* rtl:ignore */
|
|
@keyframes q-rotate
|
|
0%
|
|
transform rotate(0) /* rtl:ignore */
|
|
25%
|
|
transform rotate(90deg) /* rtl:ignore */
|
|
50%
|
|
transform rotate(180deg) /* rtl:ignore */
|
|
75%
|
|
transform rotate(270deg) /* rtl:ignore */
|
|
100%
|
|
transform rotate(360deg) /* rtl:ignore */
|
|
.transition-generic
|
|
transition all .3s
|
|
.animate-spin, .animate-spin-reverse
|
|
animation q-spin 2s infinite linear /* rtl:ignore */
|
|
.animate-spin-reverse
|
|
animation-direction reverse
|
|
.animate-blink
|
|
animation q-blink 1s steps(5, start) infinite /* rtl:ignore */
|
|
.animate-pop
|
|
animation q-pop .2s /* rtl:ignore */
|
|
.animate-scale
|
|
animation q-scale .2s /* rtl:ignore */
|
|
.animate-fade
|
|
animation q-fade .2s /* rtl:ignore */
|
|
.animate-bounce
|
|
animation q-bounce 2s infinite /* rtl:ignore */
|
|
.animate-shake
|
|
animation q-shake .15s
|
|
animation-timing-function cubic-bezier(.25, .8, .25, 1)
|
|
@keyframes q-blink
|
|
to
|
|
visibility hidden
|
|
@keyframes q-spin
|
|
0%
|
|
transform rotate(0deg) /* rtl:ignore */
|
|
100%
|
|
transform rotate(359deg) /* rtl:ignore */
|
|
@keyframes q-pop
|
|
0%
|
|
opacity 0
|
|
transform scale(.7)
|
|
70%
|
|
opacity 1
|
|
transform scale(1.07)
|
|
100%
|
|
transform scale(1)
|
|
@keyframes q-fade
|
|
0%
|
|
opacity 0
|
|
100%
|
|
opacity 1
|
|
@keyframes q-scale
|
|
0%
|
|
opacity 0
|
|
transform scale(.7)
|
|
100%
|
|
opacity 1
|
|
transform scale(1)
|
|
@keyframes q-bounce
|
|
0%, 20%, 50%, 80%, 100%
|
|
transform translateY(0)
|
|
40%
|
|
transform translateY(-30px)
|
|
60%
|
|
transform translateY(-15px)
|
|
@keyframes q-shake
|
|
0%
|
|
transform scale(1)
|
|
50%
|
|
transform scale(1.02)
|
|
100%
|
|
transform scale(1)
|
|
.animate-popup-up, .animate-popup-down
|
|
animation-timing-function cubic-bezier(0.23, 1, 0.32, 1)
|
|
> *
|
|
animation q-fade .82s cubic-bezier(.785, .135, .15, .86)
|
|
.animate-popup-down
|
|
animation q-popup-down .36s /* rtl:ignore */
|
|
transform-origin left top 0px /* rtl:ignore */
|
|
.animate-popup-up
|
|
animation q-popup-up .36s /* rtl:ignore */
|
|
transform-origin left bottom 0px /* rtl:ignore */
|
|
@keyframes q-popup-down
|
|
0%
|
|
opacity 0
|
|
transform translateY(-10px) scaleY(.3)
|
|
pointer-events none
|
|
30%
|
|
opacity 1
|
|
@keyframes q-popup-up
|
|
0%
|
|
opacity 0
|
|
transform translateY(10px) scaleY(.3)
|
|
pointer-events none
|
|
30%
|
|
opacity 1
|
|
.animate-fade-left
|
|
animation q-fade .36s cubic-bezier(.785, .135, .15, .86), q-slide-left .36s ease
|
|
.animate-fade-right
|
|
animation q-fade .36s cubic-bezier(.785, .135, .15, .86), q-slide-right .36s ease
|
|
@keyframes q-slide-left
|
|
0%
|
|
transform translateX(-70%)
|
|
@keyframes q-slide-right
|
|
0%
|
|
transform translateX(70%)
|
|
.animated
|
|
animation-duration 1s
|
|
animation-fill-mode both
|
|
.animated.infinite
|
|
animation-iteration-count infinite
|
|
.animated.hinge
|
|
animation-duration 2s
|
|
.animated.flipOutX,
|
|
.animated.flipOutY,
|
|
.animated.bounceIn,
|
|
.animated.bounceOut
|
|
animation-duration .75s
|
|
.non-selectable
|
|
user-select none !important
|
|
.scroll
|
|
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
|
|
pointer-events none !important
|
|
.all-pointer-events
|
|
pointer-events all !important
|
|
.cursor-pointer
|
|
cursor pointer !important
|
|
.cursor-not-allowed
|
|
cursor not-allowed !important
|
|
.cursor-inherit
|
|
cursor inherit !important
|
|
.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-205
|
|
transform rotate(205deg) /* rtl:ignore */
|
|
.rotate-270
|
|
transform rotate(270deg) /* rtl:ignore */
|
|
.rotate-315
|
|
transform rotate(315deg) /* rtl:ignore */
|
|
.flip-horizontal
|
|
transform scale(-1, 1)
|
|
.flip-vertical
|
|
transform scale(1, -1)
|
|
.float-left
|
|
float left
|
|
.float-right
|
|
float right
|
|
.relative-position
|
|
position relative
|
|
.fixed,
|
|
.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
|
|
.absolute-full, .fullscreen
|
|
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
|
|
.q-ripple
|
|
&-container
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
position absolute
|
|
color inherit
|
|
border-radius inherit
|
|
overflow hidden
|
|
z-index 0
|
|
pointer-events none
|
|
&-animation
|
|
top 0
|
|
left 0 /* rtl:ignore */
|
|
opacity 0
|
|
color inherit
|
|
position absolute
|
|
border-radius 50%
|
|
background currentColor
|
|
transition .3s transform cubic-bezier(.2, .4, .4, .9), .3s opacity cubic-bezier(.2, .4, .4, .1)
|
|
pointer-events none
|
|
overflow hidden
|
|
will-change transform, opacity
|
|
&-enter
|
|
transition none
|
|
&-visible
|
|
opacity .15
|
|
.q-radial-ripple
|
|
overflow hidden
|
|
border-radius 50%
|
|
pointer-events none
|
|
position absolute
|
|
top -50%
|
|
left -50%
|
|
width 200%
|
|
height 200%
|
|
&:after
|
|
content ''
|
|
display block
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
right 0
|
|
bottom 0
|
|
background-image radial-gradient(circle, currentColor 10%, transparent 10.01%)
|
|
background-repeat no-repeat
|
|
background-position 50%
|
|
transform scale(10, 10)
|
|
opacity 0
|
|
transition transform .5s, opacity 1s
|
|
&.active:after
|
|
transform scale(0, 0)
|
|
opacity .4
|
|
transition 0s
|
|
:root
|
|
for $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
|
|
for $space, $value in $spaces
|
|
.q-pa-{$space}
|
|
padding: $value.y $value.x
|
|
.q-pl-{$space}
|
|
padding-left: $value.x
|
|
.q-pr-{$space}
|
|
padding-right: $value.x
|
|
.q-pt-{$space}
|
|
padding-top: $value.y
|
|
.q-pb-{$space}
|
|
padding-bottom: $value.y
|
|
.q-px-{$space}
|
|
@extends .q-pl-{$space}, .q-pr-{$space}
|
|
.q-py-{$space}
|
|
@extends .q-pt-{$space}, .q-pb-{$space}
|
|
.q-ma-{$space}
|
|
margin: $value.y $value.x
|
|
.q-ml-{$space}
|
|
margin-left: $value.x
|
|
.q-mr-{$space}
|
|
margin-right: $value.x
|
|
.q-mt-{$space}
|
|
margin-top: $value.y
|
|
.q-mb-{$space}
|
|
margin-bottom: $value.y
|
|
.q-mx-{$space}
|
|
@extends .q-ml-{$space}, .q-mr-{$space}
|
|
.q-my-{$space}
|
|
@extends .q-mt-{$space}, .q-mb-{$space}
|
|
.q-ml-auto
|
|
margin-left auto
|
|
.q-mr-auto
|
|
margin-right auto
|
|
.q-mx-auto
|
|
@extends .q-ml-auto, .q-mr-auto
|
|
.q-my-form
|
|
margin-top $input-margin-top
|
|
margin-bottom $input-margin-bottom
|
|
.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
|
|
body
|
|
min-width 100px
|
|
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
|
|
background $body-background
|
|
color $body-color
|
|
min-height 100vh
|
|
for $heading, $value in $h-tags
|
|
{$heading}
|
|
font-size: $value.size
|
|
font-weight: $value.weight
|
|
if $value.line-height
|
|
line-height: $value.line-height
|
|
if $value.letter-spacing
|
|
letter-spacing: $value.letter-spacing
|
|
@media screen and (max-width $breakpoint-sm)
|
|
font-size: ($value.size * .6)
|
|
for $heading, $value in $headings
|
|
.q-{$heading}-opacity
|
|
opacity: $value.opacity
|
|
.q-{$heading}
|
|
font-size: $value.size
|
|
font-weight: $value.weight
|
|
if $value.line-height
|
|
line-height: $value.line-height
|
|
if $value.letter-spacing
|
|
letter-spacing: $value.letter-spacing
|
|
p
|
|
margin: 0 0 $spaces.md.y
|
|
.caption
|
|
color $grey-9
|
|
letter-spacing 0
|
|
line-height 24px
|
|
padding 0
|
|
font-weight 300
|
|
.uppercase
|
|
text-transform uppercase
|
|
.lowercase
|
|
text-transform lowercase
|
|
.capitalize
|
|
text-transform capitalize
|
|
.text-
|
|
¢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
|
|
for $weight, $value in $text-weights
|
|
&weight-{$weight}
|
|
font-weight $value
|
|
small
|
|
font-size 80%
|
|
big
|
|
font-size 170%
|
|
sub
|
|
bottom -.25em
|
|
sup
|
|
top -.5em
|
|
blockquote
|
|
padding: $spaces.sm.y $spaces.md.x
|
|
margin 0
|
|
font-size 16px
|
|
border-left: $spaces.xs.x solid $primary
|
|
border-left: $spaces.xs.x solid var(--q-color-primary)
|
|
&.text-right
|
|
padding-right: $spaces.md.x
|
|
padding-left 0
|
|
border-right: $spaces.xs.x solid $primary
|
|
border-right: $spaces.xs.x solid var(--q-color-primary)
|
|
border-left 0
|
|
text-align right
|
|
small
|
|
display block
|
|
line-height 1.4
|
|
color $faded
|
|
color var(--q-color-faded)
|
|
&:before
|
|
content '\2014 \00A0'
|
|
.quote
|
|
padding 10px 20px
|
|
margin 0 0 20px
|
|
border-left 5px solid $primary
|
|
border-left 5px solid var(--q-color-primary)
|
|
&.text-right
|
|
padding-right 15px
|
|
padding-left 0
|
|
border-right 5px solid $primary
|
|
border-right 5px solid var(--q-color-primary)
|
|
border-left 0
|
|
text-align right
|
|
dt
|
|
font-weight bold
|
|
dd
|
|
margin-left 0
|
|
dt, dd
|
|
line-height 1.4
|
|
dl
|
|
margin-top 0
|
|
margin-bottom 20px
|
|
&.horizontal
|
|
dt
|
|
float left
|
|
width 25%
|
|
clear left
|
|
text-align right
|
|
overflow hidden
|
|
text-overflow ellipsis
|
|
white-space nowrap
|
|
dd
|
|
margin-left 30%
|
|
hr
|
|
&.q-hr, &.q-hr-dark
|
|
height 1px
|
|
min-height 1px
|
|
display block
|
|
border none
|
|
width 100%
|
|
background rgba(0, 0, 0, .12)
|
|
&.q-hr-dark
|
|
background rgba(255, 255, 255, .36)
|
|
.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]
|
|
&, *
|
|
cursor not-allowed !important
|
|
.disabled, [disabled]
|
|
opacity .6 !important
|
|
.hidden
|
|
display none !important
|
|
.invisible
|
|
visibility hidden !important
|
|
.transparent
|
|
background transparent !important
|
|
.overflow-auto
|
|
overflow auto !important
|
|
.overflow-hidden
|
|
overflow hidden !important
|
|
.overflow-hidden-y
|
|
overflow-y hidden !important
|
|
.dimmed, .light-dimmed
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
bottom 0
|
|
left 0
|
|
.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
|
|
for type in desktop mobile cordova electron ios mat touch within-iframe platform-ios platform-android
|
|
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
|
|
position absolute
|
|
top 0
|
|
left 0 /* rtl:ignore */
|
|
width 100%
|
|
height 100%
|
|
pointer-events none
|
|
border-radius inherit
|
|
opacity .15
|
|
transition background-color .3s cubic-bezier(.25, .8, .5, 1)
|
|
.q-focus-helper-rounded
|
|
border-radius $generic-border-radius
|
|
.q-focus-helper-round
|
|
border-radius 50%
|
|
body
|
|
&.desktop
|
|
.q-focusable:focus, .q-hoverable:hover
|
|
.q-focus-helper
|
|
background currentColor
|
|
&.ios .q-hoverable:active .q-focus-helper
|
|
background currentColor
|
|
opacity .3
|
|
ie_style = @block
|
|
|
|
.q-if > .q-if-inner
|
|
flex-basis auto
|
|
display inline-flex
|
|
> div
|
|
> .q-input-target
|
|
flex-basis auto
|
|
> input.q-input-target
|
|
min-width 3rem
|
|
flex-basis 0% !important
|
|
.q-input-target:before
|
|
display block
|
|
.q-if-label-spacer
|
|
width 0
|
|
|
|
.q-editor-toolbar
|
|
.q-btn-group.row.inline
|
|
display block
|
|
white-space nowrap
|
|
|
|
.q-toolbar
|
|
.q-actionsheet-title
|
|
.q-field-label-inner
|
|
height 0px
|
|
|
|
.q-carousel-slide
|
|
max-width 100%
|
|
|
|
.row > .col
|
|
&.q-alert-content
|
|
flex-basis auto
|
|
|
|
.q-slider-handle
|
|
> .q-chip.inline.row
|
|
display table
|
|
|
|
a.q-btn:not(.q-btn-round)
|
|
height 0px
|
|
.q-btn
|
|
.q-btn-inner
|
|
flex-basis auto
|
|
&:active
|
|
&.active
|
|
.q-btn-inner
|
|
margin -1px 1px 1px -1px
|
|
&.q-btn-push
|
|
.q-btn-inner
|
|
margin 1px 1px -1px -1px
|
|
&.disabled
|
|
.q-btn-inner
|
|
margin -1px 1px 1px -1px
|
|
.q-btn-group > .q-btn.q-btn-push:not(.disabled)
|
|
&:active .q-btn-inner
|
|
&.active .q-btn-inner
|
|
margin 0
|
|
|
|
.q-chip:not(.q-chip-small):not(.q-chip-dense) .q-chip-main
|
|
line-height $chip-height
|
|
.q-btn .q-chip
|
|
display inline-block
|
|
.q-tab .q-chip .q-chip-main
|
|
line-height normal
|
|
|
|
.q-fab-actions
|
|
&.q-fab-left
|
|
&.q-fab-right
|
|
display block
|
|
white-space nowrap
|
|
|
|
.q-item-main
|
|
min-width 1px
|
|
|
|
.q-layout-drawer-mini .q-item
|
|
padding-left 0
|
|
padding-right 0
|
|
|
|
.q-modal-layout
|
|
min-height 80vh !important
|
|
overflow hidden
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
|
|
{ie_style}
|
|
@supports (-ms-ime-align:auto)
|
|
{ie_style}
|