vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+5
@@ -0,0 +1,5 @@
|
||||
@require './settings/*'
|
||||
@require './generic/*'
|
||||
@require './elements/*'
|
||||
@require './tools/*'
|
||||
@require './trumps/*'
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
@import './settings/*'
|
||||
@import './tools/*'
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
firefox()
|
||||
@-moz-document url-prefix()
|
||||
{block}
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-alert
|
||||
border-radius: $alert-border-radius
|
||||
border-width: $alert-border-width
|
||||
border-style: solid
|
||||
color: #fff
|
||||
display: flex
|
||||
font-size: $alert-font-size
|
||||
margin: $alert-margin
|
||||
padding: $alert-padding
|
||||
position: relative
|
||||
transition: $primary-transition
|
||||
|
||||
.v-alert__icon.v-icon,
|
||||
&__dismissible .v-icon
|
||||
align-self: center
|
||||
color: $alert-icon-color
|
||||
font-size: $alert-icon-font-size
|
||||
&--outline .v-icon
|
||||
color: inherit !important
|
||||
|
||||
&__icon
|
||||
margin-right: $alert-padding
|
||||
|
||||
&__dismissible
|
||||
align-self: flex-start
|
||||
color: inherit
|
||||
margin-left: $alert-padding
|
||||
margin-right: 0
|
||||
text-decoration: none
|
||||
transition: $primary-transition
|
||||
user-select: none
|
||||
|
||||
&:hover
|
||||
opacity: .8
|
||||
|
||||
&--no-icon
|
||||
.v-alert__icon
|
||||
display: none
|
||||
|
||||
> div
|
||||
align-self: center
|
||||
flex: 1 1
|
||||
|
||||
@media screen and (max-width: $grid-breakpoints.sm)
|
||||
&__icon
|
||||
display: none
|
||||
|
||||
// Double .v-alert is intended - it increases css specificity
|
||||
// to properly set the border color where alert has set color
|
||||
// with modifier (for example "red lighten-2")
|
||||
.v-alert.v-alert
|
||||
border-color: $material-light.dividers !important
|
||||
&--outline
|
||||
border: $alert-outline-border-width $alert-outline-border-style currentColor !important
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
@import '../bootstrap'
|
||||
@import '../browsers'
|
||||
@import '../theme'
|
||||
|
||||
.application
|
||||
display: flex
|
||||
|
||||
a
|
||||
cursor: pointer
|
||||
|
||||
&--is-rtl
|
||||
direction: rtl
|
||||
|
||||
&--wrap
|
||||
flex: 1 1 auto
|
||||
backface-visibility: hidden
|
||||
display: flex
|
||||
flex-direction: column
|
||||
min-height: 100vh
|
||||
max-width: 100%
|
||||
position: relative
|
||||
|
||||
application($material)
|
||||
background: $material.background
|
||||
color: $material.text.primary
|
||||
|
||||
.text
|
||||
&--primary
|
||||
color: $material.text.primary !important
|
||||
|
||||
&--secondary
|
||||
color: $material.text.secondary !important
|
||||
|
||||
&--disabled
|
||||
color: $material.text.disabled !important
|
||||
|
||||
theme(application, 'application')
|
||||
|
||||
+firefox()
|
||||
@media print
|
||||
.application
|
||||
display: block
|
||||
|
||||
&--wrap
|
||||
display: block
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
.v-autocomplete
|
||||
&.v-input > .v-input__control > .v-input__slot
|
||||
cursor: text
|
||||
|
||||
input
|
||||
align-self: center
|
||||
|
||||
&--is-selecting-index
|
||||
input
|
||||
opacity: 0
|
||||
|
||||
// When a single select, does not have
|
||||
// selections padding
|
||||
&.v-text-field--enclosed:not(.v-text-field--solo):not(.v-text-field--single-line)
|
||||
.v-select__slot > input
|
||||
margin-top: 24px
|
||||
|
||||
&:not(.v-input--is-disabled).v-select.v-text-field
|
||||
input
|
||||
pointer-events: inherit
|
||||
|
||||
&__content.v-menu__content
|
||||
border-radius: 0
|
||||
|
||||
.v-card
|
||||
border-radius: 0
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-avatar
|
||||
align-items: center
|
||||
border-radius: 50%
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
position: relative
|
||||
text-align: center
|
||||
vertical-align: middle
|
||||
|
||||
img,
|
||||
.v-icon,
|
||||
.v-image
|
||||
border-radius: 50%
|
||||
display: inline-flex
|
||||
height: inherit
|
||||
width: inherit
|
||||
|
||||
&--tile
|
||||
border-radius: 0
|
||||
|
||||
img,
|
||||
.v-icon,
|
||||
.v-image
|
||||
border-radius: 0
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
v-badge-rtl()
|
||||
&__badge
|
||||
right: initial
|
||||
left: -($badge-width)
|
||||
|
||||
&--overlap
|
||||
.v-badge__badge
|
||||
right: initial
|
||||
left: -8px
|
||||
|
||||
&.v-badge--left
|
||||
.v-badge__badge
|
||||
right: -8px
|
||||
left: initial
|
||||
|
||||
&--left
|
||||
.v-badge__badge
|
||||
right: -($badge-width)
|
||||
left: initial
|
||||
|
||||
rtl(v-badge-rtl, "v-badge")
|
||||
|
||||
.v-badge
|
||||
display: inline-block
|
||||
position: relative
|
||||
|
||||
&__badge
|
||||
color: $badge-color
|
||||
display: flex
|
||||
position: absolute
|
||||
font-size: $badge-font-size
|
||||
top: -($badge-height / 2)
|
||||
right: -($badge-width)
|
||||
border-radius: $badge-border-radius
|
||||
height: $badge-height
|
||||
width: $badge-width
|
||||
justify-content: center
|
||||
align-items: center
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
transition: $primary-transition
|
||||
|
||||
.v-icon
|
||||
font-size: $badge-font-size
|
||||
|
||||
&--overlap
|
||||
.v-badge__badge
|
||||
top: -8px
|
||||
right: -8px
|
||||
|
||||
&.v-badge--left
|
||||
.v-badge__badge
|
||||
left: -8px
|
||||
right: initial
|
||||
|
||||
&.v-badge--bottom
|
||||
.v-badge__badge
|
||||
bottom: -8px
|
||||
top: initial
|
||||
|
||||
&--left
|
||||
.v-badge__badge
|
||||
left: -($badge-width)
|
||||
|
||||
&--bottom
|
||||
.v-badge__badge
|
||||
bottom: -($badge-height / 2)
|
||||
top: initial;
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-bottom-nav($material)
|
||||
background-color: $material.cards
|
||||
|
||||
.v-btn:not(.v-btn--active)
|
||||
color: $material.text.secondary !important
|
||||
|
||||
theme(v-bottom-nav, "v-bottom-nav")
|
||||
|
||||
.v-item-group.v-bottom-nav
|
||||
bottom: 0
|
||||
box-shadow: 0 3px 14px 2px rgba(#000, .12)
|
||||
display: flex
|
||||
left: 0
|
||||
justify-content: center
|
||||
transform: translate(0, 60px)
|
||||
transition: all .4s $transition.swing
|
||||
width: 100%
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&--active
|
||||
transform: translate(0, 0)
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
z-index: 4
|
||||
|
||||
.v-btn
|
||||
background: transparent !important
|
||||
border-radius: 0
|
||||
box-shadow: none !important
|
||||
font-weight: 400
|
||||
height: 100%
|
||||
margin: 0
|
||||
max-width: 168px
|
||||
min-width: 80px
|
||||
padding: 8px 12px 10px
|
||||
text-transform: none
|
||||
width: 100%
|
||||
// https://github.com/vuetifyjs/vuetify/issues/4643
|
||||
flex-shrink: 1
|
||||
|
||||
.v-btn__content
|
||||
flex-direction: column-reverse
|
||||
font-size: 12px
|
||||
white-space: nowrap
|
||||
will-change: font-size
|
||||
|
||||
i.v-icon
|
||||
color: inherit
|
||||
margin-bottom: 4px
|
||||
transition: all .4s cubic-bezier(.25, .8, .50, 1)
|
||||
|
||||
span
|
||||
line-height: 1
|
||||
|
||||
&--active
|
||||
padding-top: 6px
|
||||
|
||||
&:before
|
||||
background-color: transparent
|
||||
|
||||
.v-btn__content
|
||||
font-size: 14px
|
||||
|
||||
.v-icon
|
||||
transform: none
|
||||
|
||||
&--shift
|
||||
.v-btn__content
|
||||
font-size: 14px
|
||||
|
||||
.v-btn
|
||||
transition: all .3s
|
||||
min-width: 56px
|
||||
max-width: 96px
|
||||
|
||||
&--active
|
||||
min-width: 96px
|
||||
max-width: 168px
|
||||
|
||||
.v-bottom-nav--shift
|
||||
.v-btn:not(.v-btn--active) .v-btn__content
|
||||
.v-icon
|
||||
transform: scale(1, 1) translate(0, 8px)
|
||||
|
||||
> span:not(.v-badge)
|
||||
color: transparent
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
.v-bottom-sheet.v-dialog
|
||||
align-self: flex-end
|
||||
border-radius: 0
|
||||
flex: 1 0 100%
|
||||
margin: 0
|
||||
min-width: 100%
|
||||
overflow: visible
|
||||
transition: .3s $transition.fast-in-fast-out
|
||||
|
||||
&.v-bottom-sheet--inset
|
||||
max-width: 70%
|
||||
min-width: 0
|
||||
|
||||
@media $display-breakpoints.xs-only
|
||||
max-width: none
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-breadcrumbs($material)
|
||||
.v-breadcrumbs__divider, .v-breadcrumbs__item--disabled
|
||||
color: $material.text.disabled
|
||||
|
||||
theme(v-breadcrumbs, "v-breadcrumbs")
|
||||
|
||||
.v-breadcrumbs
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
flex: $breadcrumbs-flex
|
||||
list-style-type: none
|
||||
margin: $breadcrumbs-margin
|
||||
padding: $breadcrumbs-padding
|
||||
|
||||
li
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
font-size: $breadcrumbs-item-font-size
|
||||
|
||||
.v-icon
|
||||
font-size: $breadcrumbs-item-large-font-size
|
||||
|
||||
&:nth-child(even)
|
||||
padding: $breadcrumbs-even-child-padding
|
||||
|
||||
&--large
|
||||
li
|
||||
font-size: $breadcrumbs-item-large-font-size
|
||||
|
||||
.v-icon
|
||||
font-size: $breadcrumbs-item-large-font-size
|
||||
|
||||
&__item
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
text-decoration: none
|
||||
transition: $primary-transition
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/** Themes */
|
||||
|
||||
v-btn-toggle($material)
|
||||
background: $material.cards
|
||||
|
||||
.v-btn
|
||||
color: $material.text.primary
|
||||
|
||||
&:not(.v-btn-toggle--only-child)
|
||||
.v-btn
|
||||
&.v-btn--active:not(:last-child)
|
||||
border-right-color: $material.buttons.disabled
|
||||
|
||||
theme(v-btn-toggle, "v-btn-toggle")
|
||||
|
||||
.v-btn-toggle
|
||||
display: inline-flex
|
||||
border-radius: 2px
|
||||
transition: $primary-transition
|
||||
will-change: background, box-shadow
|
||||
|
||||
.v-btn
|
||||
justify-content: center
|
||||
min-width: auto
|
||||
width: auto
|
||||
padding: 0 8px
|
||||
margin: 0
|
||||
opacity: .4
|
||||
border-radius: 0
|
||||
|
||||
&:not(:last-child)
|
||||
border-right: 1px solid transparent
|
||||
|
||||
&:after
|
||||
display: none
|
||||
|
||||
&.v-btn--active
|
||||
opacity: 1
|
||||
|
||||
span + .v-icon
|
||||
font-size: initial
|
||||
margin-left: 10px
|
||||
|
||||
&:first-child
|
||||
border-radius: 2px 0 0 2px
|
||||
|
||||
&:last-child
|
||||
border-radius: 0 2px 2px 0
|
||||
|
||||
&--selected
|
||||
elevation(2)
|
||||
+332
@@ -0,0 +1,332 @@
|
||||
@import '../bootstrap'
|
||||
@import '../components/_ripples'
|
||||
@import '../theme'
|
||||
|
||||
button($material)
|
||||
color: $material.text.primary
|
||||
|
||||
&.v-btn--disabled
|
||||
color: $material.buttons.disabled !important
|
||||
|
||||
.v-icon,
|
||||
.v-btn__loading
|
||||
color: $material.buttons.disabled !important
|
||||
|
||||
&:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline)
|
||||
background-color: $material.buttons.focused !important
|
||||
|
||||
&:not(.v-btn--icon):not(.v-btn--flat)
|
||||
background-color: $material.app-bar
|
||||
|
||||
theme(button, "v-btn")
|
||||
|
||||
/** Base Spec */
|
||||
.v-btn
|
||||
align-items: center
|
||||
border-radius: $button-border-radius
|
||||
display: inline-flex
|
||||
height: $button-height
|
||||
flex: 0 0 auto
|
||||
font-size: $button-font-size
|
||||
font-weight: $button-font-weight
|
||||
justify-content: center
|
||||
margin: $button-margin
|
||||
min-width: $button-min-width
|
||||
outline: 0
|
||||
text-transform: $button-text-transform
|
||||
text-decoration: none
|
||||
transition: $primary-transition, color 1ms
|
||||
position: relative
|
||||
vertical-align: middle
|
||||
user-select: none
|
||||
|
||||
|
||||
/** Psuedo */
|
||||
.v-btn
|
||||
&:before
|
||||
border-radius: inherit
|
||||
color: inherit
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
height: 100%
|
||||
opacity: .12
|
||||
transition: $primary-transition
|
||||
width: 100%
|
||||
|
||||
/** Content */
|
||||
.v-btn
|
||||
padding: $button-padding
|
||||
|
||||
&--active,
|
||||
&:hover,
|
||||
&:focus
|
||||
position: relative
|
||||
|
||||
&:before
|
||||
background-color: currentColor
|
||||
|
||||
&:hover::before
|
||||
@media (hover: none)
|
||||
background-color: transparent
|
||||
|
||||
&__content
|
||||
align-items: center
|
||||
border-radius: inherit
|
||||
color: inherit
|
||||
display: flex
|
||||
flex: 1 0 auto
|
||||
justify-content: center
|
||||
margin: 0 auto
|
||||
// Fixes bug where IE11 moves
|
||||
// button content when clicked
|
||||
// https://stackoverflow.com/questions/10305658/prevent-button-from-shifting-during-click-in-ie
|
||||
position: relative
|
||||
transition: $primary-transition
|
||||
white-space: nowrap
|
||||
width: inherit
|
||||
|
||||
/** Sizes */
|
||||
.v-btn
|
||||
&--small
|
||||
font-size: $button-small-font-size
|
||||
height: $button-small-height
|
||||
padding: $button-small-padding
|
||||
|
||||
&--large
|
||||
font-size: $button-large-font-size
|
||||
height: $button-large-height
|
||||
padding: $button-large-padding
|
||||
|
||||
/** Icons */
|
||||
.v-btn .v-btn__content .v-icon
|
||||
color: inherit
|
||||
|
||||
/** Types */
|
||||
.v-btn
|
||||
&:not(.v-btn--depressed):not(.v-btn--flat)
|
||||
will-change: box-shadow
|
||||
elevation(2)
|
||||
|
||||
&:active
|
||||
elevation(8)
|
||||
|
||||
&--icon
|
||||
background: transparent
|
||||
box-shadow: none !important
|
||||
border-radius: 50%
|
||||
justify-content: center
|
||||
min-width: 0
|
||||
width: $button-height
|
||||
|
||||
&.v-btn--small
|
||||
width: $button-small-height
|
||||
|
||||
&.v-btn--large
|
||||
width: $button-large-height
|
||||
|
||||
&:before
|
||||
border-radius: 50%
|
||||
|
||||
&--floating
|
||||
border-radius: 50%
|
||||
min-width: 0
|
||||
height: $button-floating-width
|
||||
width: $button-floating-width
|
||||
padding: 0
|
||||
|
||||
&.v-btn--fixed,
|
||||
&.v-btn--absolute
|
||||
z-index: 4
|
||||
|
||||
&:not(.v-btn--depressed):not(.v-btn--flat)
|
||||
elevation(6)
|
||||
|
||||
&:active
|
||||
elevation(12)
|
||||
|
||||
.v-btn__content
|
||||
flex: 1 1 auto
|
||||
margin: 0
|
||||
height: 100%
|
||||
|
||||
&:after
|
||||
border-radius: 50%
|
||||
|
||||
.v-btn__content
|
||||
> :not(:only-child)
|
||||
transition: $primary-transition
|
||||
|
||||
&:first-child
|
||||
opacity: 1
|
||||
|
||||
&:last-child
|
||||
opacity: 0
|
||||
transform: rotate(-45deg)
|
||||
|
||||
&:last-child,
|
||||
&:first-child
|
||||
// https://stackoverflow.com/questions/14729492/css3-transform-rotate-causing-1px-shift-in-chrome
|
||||
-webkit-backface-visibility: hidden
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
|
||||
&.v-btn--active
|
||||
.v-btn__content
|
||||
> :not(:only-child)
|
||||
&:first-child
|
||||
opacity: 0
|
||||
transform: rotate(45deg)
|
||||
|
||||
&:last-child
|
||||
opacity: 1
|
||||
transform: rotate(0)
|
||||
|
||||
.v-icon
|
||||
height: inherit
|
||||
width: inherit
|
||||
|
||||
&.v-btn--small
|
||||
height: $button-floating-small-width
|
||||
width: $button-floating-small-width
|
||||
|
||||
.v-icon
|
||||
font-size: $button-floating-small-icon-width
|
||||
|
||||
|
||||
&.v-btn--large
|
||||
height: $button-floating-large-width
|
||||
width: $button-floating-large-width
|
||||
|
||||
.v-icon
|
||||
font-size: $button-floating-large-icon-width
|
||||
|
||||
&--reverse
|
||||
.v-btn__content
|
||||
flex-direction: row-reverse
|
||||
|
||||
&.v-btn--column
|
||||
.v-btn__content
|
||||
flex-direction: column-reverse
|
||||
|
||||
&--fixed, &--absolute
|
||||
margin: 0
|
||||
|
||||
// Position must have prepended .v-btn
|
||||
// to account for tooltip
|
||||
// TODO: Remove this once tooltips are
|
||||
// converted to elements
|
||||
&.v-btn--absolute
|
||||
position: absolute
|
||||
|
||||
&.v-btn--fixed
|
||||
position: fixed
|
||||
|
||||
&--top
|
||||
&:not(.v-btn--absolute)
|
||||
top: $grid-gutters.lg
|
||||
|
||||
&.v-btn--absolute
|
||||
top: -($button-floating-width / 2)
|
||||
|
||||
&.v-btn--small
|
||||
top: -($button-floating-small-width / 2)
|
||||
|
||||
&.v-btn--large
|
||||
top: -($button-floating-large-width / 2)
|
||||
|
||||
&--bottom
|
||||
&:not(.v-btn--absolute)
|
||||
bottom: $grid-gutters.lg
|
||||
|
||||
&.v-btn--absolute
|
||||
bottom: -($button-floating-width / 2)
|
||||
|
||||
&.v-btn--small
|
||||
bottom: -($button-floating-small-width / 2)
|
||||
|
||||
&.v-btn--large
|
||||
bottom: -($button-floating-large-width / 2)
|
||||
|
||||
&--left
|
||||
left: $grid-gutters.lg
|
||||
|
||||
&--right
|
||||
right: $grid-gutters.lg
|
||||
|
||||
/** Disabled */
|
||||
.v-btn
|
||||
&.v-btn--disabled
|
||||
box-shadow: none !important
|
||||
pointer-events: none
|
||||
|
||||
&:not(.v-btn--disabled):not(.v-btn--floating):not(.v-btn--icon)
|
||||
.v-btn__content .v-icon
|
||||
transition: none
|
||||
|
||||
.v-btn--icon
|
||||
padding: 0
|
||||
|
||||
|
||||
/** Loader */
|
||||
.v-btn
|
||||
&--loader
|
||||
pointer-events: none
|
||||
|
||||
.v-btn__content
|
||||
opacity: 0
|
||||
|
||||
&__loading
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 100%
|
||||
justify-content: center
|
||||
left: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
.v-icon
|
||||
&--left
|
||||
margin-right: 1rem
|
||||
line-height: inherit
|
||||
|
||||
&--right
|
||||
margin-left: 1rem
|
||||
line-height: inherit
|
||||
|
||||
|
||||
/** Custom Buttons */
|
||||
.v-btn
|
||||
&.v-btn--outline
|
||||
border: 1px solid currentColor
|
||||
background: transparent !important
|
||||
box-shadow: none
|
||||
|
||||
&:hover
|
||||
box-shadow: none
|
||||
|
||||
&--block
|
||||
display: flex
|
||||
flex: 1
|
||||
margin: $button-margin-y 0
|
||||
width: 100%
|
||||
|
||||
&--round
|
||||
border-radius: 28px
|
||||
|
||||
&:after
|
||||
border-radius: 28px
|
||||
|
||||
/** Themes */
|
||||
.v-btn:not(.v-btn--outline)
|
||||
&.primary,
|
||||
&.secondary,
|
||||
&.accent,
|
||||
&.success,
|
||||
&.error,
|
||||
&.warning,
|
||||
&.info
|
||||
color: $material-dark.text.primary
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-calendar-daily($material)
|
||||
background-color: $material.calendar.background-color
|
||||
.v-calendar-daily__intervals-head
|
||||
border-right: $material.calendar.line-color 1px solid;
|
||||
.v-calendar-daily_head-day
|
||||
border-right: $material.calendar.line-color 1px solid;
|
||||
border-bottom: $material.calendar.line-color 1px solid;
|
||||
color: $material.calendar.text-color;
|
||||
&.v-past
|
||||
.v-calendar-daily_head-weekday,
|
||||
.v-calendar-daily_head-day-label
|
||||
color: $material.calendar.past-color
|
||||
.v-calendar-daily__intervals-body
|
||||
border-right: $material.calendar.line-color 1px solid;
|
||||
.v-calendar-daily__interval-text
|
||||
color: $material.calendar.interval-color;
|
||||
.v-calendar-daily__day
|
||||
border-right: $material.calendar.interval-line-color 1px solid;
|
||||
border-bottom: $material.calendar.interval-line-color 1px solid;
|
||||
.v-calendar-daily__day-interval
|
||||
border-top: $material.calendar.interval-line-color 1px solid;
|
||||
&:first-child
|
||||
border-top: none !important;
|
||||
|
||||
theme(v-calendar-daily, "v-calendar-daily")
|
||||
|
||||
.v-calendar-daily
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
|
||||
.v-calendar-daily__head
|
||||
flex: none;
|
||||
display: flex;
|
||||
|
||||
.v-calendar-daily__intervals-head
|
||||
flex: none;
|
||||
width: $calendar-daily-interval-gutter-width;
|
||||
|
||||
.v-calendar-daily_head-day
|
||||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
|
||||
.v-calendar-daily_head-weekday
|
||||
user-select: none;
|
||||
padding: $calendar-daily-weekday-padding;
|
||||
font-size: $calendar-daily-weekday-font-size;
|
||||
|
||||
.v-calendar-daily_head-day-label
|
||||
user-select: none;
|
||||
font-size: $calendar-daily-day-font-size;
|
||||
padding: $calendar-daily-day-padding;
|
||||
line-height: $calendar-daily-day-line-height;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover
|
||||
text-decoration: underline;
|
||||
|
||||
.v-calendar-daily__body
|
||||
flex: 1 1 60%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
.v-calendar-daily__scroll-area
|
||||
overflow-y: scroll;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.v-calendar-daily__pane
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.v-calendar-daily__day-container
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.v-calendar-daily__intervals-body
|
||||
flex: none;
|
||||
user-select: none;
|
||||
width: $calendar-daily-interval-gutter-width;
|
||||
|
||||
.v-calendar-daily__interval
|
||||
text-align: center;
|
||||
border-bottom: none;
|
||||
|
||||
.v-calendar-daily__interval-text
|
||||
display: block;
|
||||
position: relative;
|
||||
top: $calendar-daily-interval-gutter-top;
|
||||
font-size: $calendar-daily-interval-gutter-font-size;
|
||||
|
||||
.v-calendar-daily__day
|
||||
flex: 1;
|
||||
width: 0;
|
||||
position: relative;
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-calendar-weekly($material)
|
||||
background-color: $material.calendar.background-color
|
||||
.v-calendar-weekly__head-weekday
|
||||
border-right: $material.calendar.line-color 1px solid;
|
||||
color: $material.calendar.text-color;
|
||||
&.v-past
|
||||
color: $material.calendar.past-color
|
||||
&.v-outside
|
||||
background-color: $material.calendar.outside-background-color;
|
||||
.v-calendar-weekly__day
|
||||
border-right: $material.calendar.line-color 1px solid;
|
||||
border-bottom: $material.calendar.line-color 1px solid;
|
||||
color: $material.calendar.text-color;
|
||||
&.v-outside
|
||||
background-color: $material.calendar.outside-background-color;
|
||||
|
||||
|
||||
theme(v-calendar-weekly, "v-calendar-weekly")
|
||||
|
||||
.v-calendar-weekly
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.v-calendar-weekly__head
|
||||
display: flex;
|
||||
user-select: none;
|
||||
|
||||
.v-calendar-weekly__head-weekday
|
||||
flex: 1 0 20px;
|
||||
user-select: none;
|
||||
padding: $calendar-weekly-weekday-padding;
|
||||
font-size: $calendar-weekly-weekday-font-size;
|
||||
|
||||
.v-calendar-weekly__week
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.v-calendar-weekly__day
|
||||
flex: 1;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
padding: $calendar-weekly-day-padding;
|
||||
|
||||
&.v-present
|
||||
.v-calendar-weekly__day-label
|
||||
border: 1px solid currentColor;
|
||||
.v-calendar-weekly__day-month
|
||||
color: currentColor
|
||||
|
||||
.v-calendar-weekly__day-label
|
||||
position: absolute;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: $calendar-weekly-day-label-radius;
|
||||
width: $calendar-weekly-day-label-size;
|
||||
height: $calendar-weekly-day-label-size;
|
||||
line-height: $calendar-weekly-day-label-size;
|
||||
|
||||
&:hover
|
||||
text-decoration: underline;
|
||||
|
||||
.v-calendar-weekly__day-month
|
||||
position: absolute;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
box-shadow: none;
|
||||
top: 0;
|
||||
left: $calendar-weekly-day-month-left;
|
||||
height: $calendar-weekly-day-label-size;
|
||||
line-height: $calendar-weekly-day-label-size;
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Themes */
|
||||
v-card($material)
|
||||
background-color: $material.cards
|
||||
border-color: $material.cards
|
||||
color: $material.text.primary
|
||||
|
||||
theme(v-card, "v-card")
|
||||
|
||||
.v-card
|
||||
elevation(2)
|
||||
text-decoration: none
|
||||
|
||||
> *:first-child:not(.v-btn):not(.v-chip)
|
||||
border-top-left-radius: inherit
|
||||
border-top-right-radius: inherit
|
||||
|
||||
> *:last-child:not(.v-btn):not(.v-chip)
|
||||
border-bottom-left-radius: inherit
|
||||
border-bottom-right-radius: inherit
|
||||
|
||||
&--flat
|
||||
elevation(0)
|
||||
|
||||
&--hover
|
||||
cursor: pointer
|
||||
transition: all .4s cubic-bezier(.25, .8, .25, 1)
|
||||
transition-property: box-shadow
|
||||
|
||||
&:hover
|
||||
elevation(8)
|
||||
|
||||
&__title
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
padding: 16px
|
||||
|
||||
&--primary
|
||||
padding-top: 24px
|
||||
|
||||
&__text
|
||||
padding: 16px
|
||||
width: 100%
|
||||
|
||||
&__actions
|
||||
align-items: center
|
||||
display: flex
|
||||
padding: 8px
|
||||
|
||||
> *,
|
||||
.v-btn
|
||||
margin: 0
|
||||
|
||||
.v-btn + .v-btn
|
||||
margin-left: 8px
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
v-carousel-rtl()
|
||||
&__prev
|
||||
left: auto
|
||||
right: 5px
|
||||
|
||||
&__next
|
||||
left: 5px
|
||||
right: auto
|
||||
|
||||
rtl(v-carousel-rtl, "v-carousel")
|
||||
|
||||
.v-carousel
|
||||
width: 100%
|
||||
position: relative
|
||||
overflow: hidden
|
||||
elevation(2)
|
||||
|
||||
&__prev,
|
||||
&__next
|
||||
position: absolute
|
||||
top: 50%
|
||||
z-index: 1
|
||||
transform: translateY(-50%)
|
||||
|
||||
.v-btn
|
||||
margin: 0
|
||||
height: auto
|
||||
width: auto
|
||||
|
||||
i
|
||||
font-size: 48px
|
||||
|
||||
&:hover
|
||||
background: none
|
||||
|
||||
&__prev
|
||||
left: 5px
|
||||
|
||||
&__next
|
||||
right: 5px
|
||||
|
||||
&__controls
|
||||
background: rgba(0, 0, 0, .5)
|
||||
align-items: center
|
||||
bottom: 0
|
||||
display: flex
|
||||
justify-content: center
|
||||
left: 0
|
||||
position: absolute
|
||||
height: 50px
|
||||
list-style-type: none
|
||||
width: 100%
|
||||
z-index: 1
|
||||
|
||||
> .v-item-group
|
||||
flex: 0 1 auto
|
||||
|
||||
&__item
|
||||
margin: 0 8px !important
|
||||
|
||||
.v-icon
|
||||
opacity: .5
|
||||
transition: $primary-transition
|
||||
|
||||
&--active
|
||||
.v-icon
|
||||
opacity: 1
|
||||
vertical-align: middle
|
||||
|
||||
&:hover
|
||||
background: none
|
||||
|
||||
.v-icon
|
||||
opacity: .8
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-chip($material)
|
||||
background: $material.chips.background
|
||||
color: $material.chips.color
|
||||
|
||||
&--disabled
|
||||
color: $material.text.disabled
|
||||
|
||||
v-chip-rtl()
|
||||
&__close
|
||||
margin: $chip-close-margin-rtl
|
||||
|
||||
&--removable
|
||||
.v-chip__content
|
||||
padding: $chip-removable-padding-rtl
|
||||
|
||||
&--select-multi
|
||||
margin: $chip-margin 0 $chip-margin $chip-margin
|
||||
|
||||
.v-avatar
|
||||
margin-right: -12px
|
||||
margin-left: 8px
|
||||
|
||||
.v-icon
|
||||
&--right
|
||||
margin-right: $chip-icon-offset
|
||||
margin-left: $chip-icon-negative-offset
|
||||
|
||||
&--left
|
||||
margin-right: $chip-icon-negative-offset
|
||||
margin-left: $chip-icon-offset
|
||||
|
||||
theme(v-chip, "v-chip")
|
||||
rtl(v-chip-rtl, "v-chip")
|
||||
|
||||
.v-chip
|
||||
align-items: center
|
||||
border-radius: $chip-border-radius
|
||||
display: inline-flex
|
||||
font-size: $chip-font-size
|
||||
margin: $chip-margin
|
||||
outline: none
|
||||
position: relative
|
||||
transition: $primary-transition
|
||||
vertical-align: middle
|
||||
|
||||
.v-chip__content
|
||||
align-items: center
|
||||
border-radius: $chip-border-radius
|
||||
cursor: default
|
||||
display: inline-flex
|
||||
height: $chip-height
|
||||
justify-content: space-between
|
||||
padding: $chip-padding
|
||||
vertical-align: middle
|
||||
white-space: nowrap
|
||||
z-index: 1
|
||||
|
||||
&--removable
|
||||
.v-chip__content
|
||||
padding: $chip-removable-padding
|
||||
|
||||
.v-avatar
|
||||
// Important is needed to account for new avatar structure
|
||||
height: $chip-height !important
|
||||
margin-left: -12px
|
||||
margin-right: 8px
|
||||
min-width: $chip-height
|
||||
width: $chip-height !important
|
||||
|
||||
img
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
&:focus:not(.v-chip--disabled),
|
||||
&--active,
|
||||
&--selected
|
||||
border-color: rgba(#000, .13)
|
||||
// overflow: hidden TEMP
|
||||
elevation(2)
|
||||
|
||||
&:after
|
||||
background: currentColor
|
||||
border-radius: inherit
|
||||
content: ''
|
||||
height: 100%
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
transition: inherit
|
||||
width: 100%
|
||||
pointer-events: none
|
||||
opacity: .13
|
||||
|
||||
&--label
|
||||
border-radius: $chip-label-border-radius
|
||||
|
||||
.v-chip__content
|
||||
border-radius: $chip-label-border-radius
|
||||
|
||||
// Increase specificity to override theme background
|
||||
&\&.v-chip--outline
|
||||
background: $chip-outline-background
|
||||
border: 1px solid currentColor
|
||||
color: $chip-outline-color
|
||||
height: $chip-height
|
||||
|
||||
.v-avatar
|
||||
margin-left: -13px
|
||||
|
||||
&--small
|
||||
height: $chip-small-height !important
|
||||
|
||||
.v-avatar
|
||||
height: $chip-small-height !important
|
||||
min-width: $chip-small-height
|
||||
width: $chip-small-height !important
|
||||
|
||||
.v-icon
|
||||
font-size: $chip-small-font-size
|
||||
|
||||
&__close
|
||||
align-items: center
|
||||
color: inherit
|
||||
display: flex
|
||||
font-size: $chip-icon-font-size
|
||||
margin: $chip-close-margin
|
||||
text-decoration: none
|
||||
user-select: none
|
||||
|
||||
> .v-icon
|
||||
color: inherit !important
|
||||
font-size: 20px
|
||||
cursor: pointer
|
||||
opacity: .5
|
||||
|
||||
&:hover
|
||||
opacity: 1
|
||||
|
||||
&--disabled
|
||||
.v-chip__close
|
||||
pointer-events: none
|
||||
|
||||
&--select-multi
|
||||
margin: $chip-margin $chip-margin $chip-margin 0
|
||||
|
||||
.v-icon
|
||||
color: inherit
|
||||
|
||||
&--right
|
||||
margin-left: $chip-icon-offset
|
||||
margin-right: $chip-icon-negative-offset
|
||||
|
||||
&--left
|
||||
margin-left: $chip-icon-negative-offset
|
||||
margin-right: $chip-icon-offset
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@import '../bootstrap'
|
||||
@import '../browsers'
|
||||
|
||||
.v-content
|
||||
bootable()
|
||||
|
||||
display: flex
|
||||
flex: 1 0 auto
|
||||
max-width: 100%
|
||||
|
||||
&__wrap
|
||||
flex: 1 1 auto
|
||||
max-width: 100%
|
||||
position: relative
|
||||
|
||||
+firefox()
|
||||
@media print
|
||||
display: block
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-counter($material)
|
||||
color: $material.text.secondary
|
||||
|
||||
theme(v-counter, "v-counter")
|
||||
|
||||
.v-counter
|
||||
flex: 0 1 auto
|
||||
font-size: 12px
|
||||
min-height: 12px
|
||||
line-height: 1
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-dataiterator($material)
|
||||
.v-data-iterator__actions
|
||||
color: rgba($material.fg-color, $material.secondary-text-percent)
|
||||
|
||||
&__select
|
||||
.v-select
|
||||
.v-select__selection--comma
|
||||
color: rgba($material.fg-color, $material.secondary-text-percent) !important
|
||||
|
||||
.v-input__append-inner
|
||||
color: rgba($material.fg-color, $material.secondary-text-percent) !important
|
||||
|
||||
theme(v-dataiterator, "v-data-iterator")
|
||||
|
||||
/** Actions */
|
||||
.v-data-iterator__actions
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
font-size: 12px
|
||||
flex-wrap: wrap-reverse
|
||||
|
||||
.v-btn
|
||||
color: inherit
|
||||
|
||||
&:last-of-type
|
||||
margin-left: 14px
|
||||
|
||||
&__range-controls
|
||||
display: flex
|
||||
align-items: center
|
||||
min-height: 48px
|
||||
|
||||
&__pagination
|
||||
display: block
|
||||
text-align: center
|
||||
margin: 0 32px 0 24px
|
||||
|
||||
&__select
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: flex-end
|
||||
margin-right: 14px
|
||||
white-space: nowrap
|
||||
|
||||
.v-select
|
||||
flex: 0 1 0
|
||||
margin: 13px 0 13px 34px
|
||||
padding: 0
|
||||
position: initial
|
||||
|
||||
.v-select__selections
|
||||
flex-wrap: nowrap
|
||||
|
||||
.v-select__selection--comma
|
||||
font-size: 12px
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-datatable($material)
|
||||
thead
|
||||
th.column.sortable
|
||||
.v-icon
|
||||
color: rgba($material.fg-color, $material.disabledORhints-text-percent)
|
||||
|
||||
&:hover
|
||||
color: rgba($material.fg-color, $material.primary-text-percent)
|
||||
|
||||
&.active
|
||||
color: rgba($material.fg-color, $material.primary-text-percent)
|
||||
|
||||
.v-icon
|
||||
color: rgba($material.fg-color, $material.primary-text-percent)
|
||||
|
||||
.v-datatable__actions
|
||||
background-color: $material.cards
|
||||
color: rgba($material.fg-color, $material.secondary-text-percent)
|
||||
border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
|
||||
|
||||
theme(v-datatable, "v-datatable")
|
||||
|
||||
.v-datatable
|
||||
.v-input--selection-controls
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
thead
|
||||
th.column.sortable
|
||||
cursor: pointer
|
||||
outline: 0
|
||||
|
||||
.v-icon
|
||||
font-size: 16px
|
||||
display: inline-block
|
||||
opacity: 0
|
||||
transition: .3s $transition.swing
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
.v-icon
|
||||
opacity: .6
|
||||
|
||||
&.active
|
||||
transform: none
|
||||
|
||||
.v-icon
|
||||
opacity: 1
|
||||
|
||||
&.desc
|
||||
.v-icon
|
||||
transform: rotate(-180deg)
|
||||
|
||||
/** Actions */
|
||||
.v-datatable__actions
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
font-size: 12px
|
||||
flex-wrap: wrap-reverse
|
||||
|
||||
.v-btn
|
||||
color: inherit
|
||||
|
||||
&:last-of-type
|
||||
margin-left: 14px
|
||||
|
||||
&__range-controls
|
||||
display: flex
|
||||
align-items: center
|
||||
min-height: 48px
|
||||
|
||||
&__pagination
|
||||
display: block
|
||||
text-align: center
|
||||
margin: 0 32px 0 24px
|
||||
|
||||
&__select
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: flex-end
|
||||
margin-right: 14px
|
||||
white-space: nowrap
|
||||
|
||||
.v-select
|
||||
flex: 0 1 0
|
||||
margin: 13px 0 13px 34px
|
||||
padding: 0
|
||||
position: initial
|
||||
|
||||
.v-select__selections
|
||||
flex-wrap: nowrap
|
||||
|
||||
.v-select__selection--comma
|
||||
font-size: 12px
|
||||
|
||||
.v-datatable__progress
|
||||
height: auto !important
|
||||
|
||||
tr, td, th
|
||||
height: auto !important
|
||||
|
||||
th
|
||||
padding: 0 !important
|
||||
|
||||
.v-progress-linear
|
||||
margin: 0
|
||||
|
||||
.v-datatable__expand
|
||||
&-row
|
||||
border: none !important
|
||||
|
||||
&-col
|
||||
padding: 0 !important
|
||||
height: 0px !important
|
||||
|
||||
&--expanded
|
||||
border-bottom: 1px solid rgba(0,0,0,0.12)
|
||||
|
||||
&-content
|
||||
transition: height $primary-transition
|
||||
|
||||
> .card
|
||||
border-radius: 0
|
||||
box-shadow: none
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-date-picker-header($material)
|
||||
.v-date-picker-header__value:not(.v-date-picker-header__value--disabled)
|
||||
button:not(:hover):not(:focus)
|
||||
color: $material.text.primary
|
||||
|
||||
.v-date-picker-header__value--disabled
|
||||
button
|
||||
color: $material.text.disabled
|
||||
|
||||
theme(v-date-picker-header, "v-date-picker-header")
|
||||
|
||||
.v-date-picker-header
|
||||
padding: 4px 16px
|
||||
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
position: relative
|
||||
|
||||
.v-btn
|
||||
margin: 0
|
||||
z-index: auto
|
||||
|
||||
.v-icon
|
||||
cursor: pointer
|
||||
user-select: none
|
||||
|
||||
.v-date-picker-header__value
|
||||
flex: 1
|
||||
text-align: center
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
div
|
||||
transition: $primary-transition
|
||||
width: 100%
|
||||
|
||||
button
|
||||
cursor: pointer
|
||||
font-weight: bold
|
||||
outline: none
|
||||
padding: 0.5rem
|
||||
transition: $primary-transition
|
||||
|
||||
.v-date-picker-header--disabled
|
||||
pointer-events: none
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-date-picker-table($material)
|
||||
th,
|
||||
.v-date-picker-table--date__week
|
||||
color: $material.text.disabled
|
||||
|
||||
theme(v-date-picker-table, "v-date-picker-table")
|
||||
|
||||
.v-date-picker-table
|
||||
position: relative
|
||||
padding: 0 12px
|
||||
height: 242px
|
||||
|
||||
table
|
||||
transition: $primary-transition
|
||||
top: 0
|
||||
table-layout: fixed
|
||||
width: 100%
|
||||
|
||||
td, th
|
||||
text-align: center
|
||||
position: relative
|
||||
|
||||
th
|
||||
font-size: 12px
|
||||
|
||||
&--date .v-btn
|
||||
height: 32px
|
||||
width: 32px
|
||||
|
||||
.v-btn
|
||||
z-index: auto
|
||||
margin: 0
|
||||
font-size: 12px
|
||||
|
||||
&.v-btn--active
|
||||
color: #fff
|
||||
|
||||
.v-date-picker-table--month
|
||||
td
|
||||
width: 33.333333%
|
||||
height: 56px
|
||||
vertical-align: middle
|
||||
text-align: center
|
||||
|
||||
.v-btn
|
||||
margin: 0 auto
|
||||
max-width: 160px
|
||||
min-width: 40px
|
||||
width: 100%
|
||||
|
||||
.v-date-picker-table--date
|
||||
th
|
||||
padding: 8px 0
|
||||
font-weight: 600
|
||||
|
||||
td
|
||||
width: 45px
|
||||
|
||||
.v-date-picker-table__events
|
||||
height: 8px
|
||||
left: 0
|
||||
position: absolute
|
||||
text-align: center
|
||||
white-space: pre
|
||||
width: 100%
|
||||
|
||||
> div
|
||||
border-radius: 50%
|
||||
display: inline-block
|
||||
height: 8px
|
||||
margin: 0 1px
|
||||
width: 8px
|
||||
|
||||
.v-date-picker-table--date .v-date-picker-table__events
|
||||
bottom: 6px
|
||||
|
||||
.v-date-picker-table--month .v-date-picker-table__events
|
||||
bottom: 8px
|
||||
|
||||
.v-date-picker-table--disabled
|
||||
pointer-events: none
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
v-date-picker-title-rtl()
|
||||
.v-picker__title__btn
|
||||
text-align: right
|
||||
|
||||
rtl(v-date-picker-title-rtl, "v-date-picker-title")
|
||||
|
||||
.v-date-picker-title
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
line-height: 1
|
||||
|
||||
.v-date-picker-title__year
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
font-size: 14px
|
||||
font-weight: 500
|
||||
margin-bottom: 8px
|
||||
|
||||
.v-date-picker-title__date
|
||||
font-size: 34px
|
||||
text-align: left
|
||||
font-weight: 500
|
||||
position: relative
|
||||
overflow: hidden
|
||||
padding-bottom: 8px
|
||||
margin-bottom: -8px
|
||||
|
||||
> div
|
||||
position: relative
|
||||
|
||||
.v-date-picker-title--disabled
|
||||
pointer-events: none
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-date-picker-years
|
||||
font-size: 16px
|
||||
font-weight: 400
|
||||
height: 286px
|
||||
list-style-type: none
|
||||
overflow: auto
|
||||
padding: 0
|
||||
text-align: center
|
||||
|
||||
li
|
||||
cursor: pointer
|
||||
padding: 8px 0
|
||||
transition: none
|
||||
|
||||
&.active
|
||||
font-size: 26px
|
||||
font-weight: 500
|
||||
padding: 10px 0
|
||||
|
||||
&:hover
|
||||
background: rgba(0, 0, 0, 0.12)
|
||||
|
||||
.v-picker--landscape
|
||||
.v-date-picker-years
|
||||
height: 286px
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-dialog
|
||||
elevation(24)
|
||||
border-radius: $card-border-radius
|
||||
margin: 24px
|
||||
overflow-y: auto
|
||||
pointer-events: auto
|
||||
transition: .3s $transition.fast-in-fast-out
|
||||
width: 100%
|
||||
z-index: inherit
|
||||
|
||||
&__content
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 100%
|
||||
justify-content: center
|
||||
left: 0
|
||||
pointer-events: none
|
||||
position: fixed
|
||||
top: 0
|
||||
transition: .2s $transition.fast-in-fast-out
|
||||
width: 100%
|
||||
z-index: 6
|
||||
outline: none
|
||||
|
||||
&:not(.v-dialog--fullscreen)
|
||||
max-height: 90%
|
||||
|
||||
&__activator
|
||||
cursor: pointer
|
||||
|
||||
*
|
||||
cursor: pointer
|
||||
|
||||
&__container
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
|
||||
@keyframes animate-dialog
|
||||
0%
|
||||
transform: scale(1)
|
||||
|
||||
50%
|
||||
transform: scale(1.03)
|
||||
|
||||
100%
|
||||
transform: scale(1)
|
||||
|
||||
&--animated
|
||||
animation-duration: .15s
|
||||
animation-name: animate-dialog
|
||||
animation-timing-function: $transition.fast-in-fast-out
|
||||
|
||||
&--fullscreen
|
||||
border-radius: 0
|
||||
margin 0
|
||||
height 100%
|
||||
position fixed
|
||||
overflow-y: auto
|
||||
top: 0
|
||||
left 0
|
||||
|
||||
> .v-card
|
||||
min-height 100%
|
||||
min-width 100%
|
||||
margin 0 !important
|
||||
padding 0 !important
|
||||
|
||||
&--scrollable,
|
||||
&--scrollable > form
|
||||
display: flex
|
||||
|
||||
> .v-card
|
||||
display: flex
|
||||
flex: 1 1 100%
|
||||
max-width: 100%
|
||||
flex-direction: column
|
||||
|
||||
> .v-card__title
|
||||
> .v-card__actions
|
||||
flex: 1 0 auto
|
||||
|
||||
> .v-card__text
|
||||
overflow-y: auto
|
||||
backface-visibility: hidden
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-divider($material)
|
||||
border-color: $material.dividers
|
||||
|
||||
theme(v-divider, "v-divider")
|
||||
|
||||
.v-divider
|
||||
display: block
|
||||
flex: 1 1 0px
|
||||
max-width: 100%
|
||||
height: 0px
|
||||
max-height: 0px
|
||||
border: solid
|
||||
border-width: thin 0 0 0
|
||||
transition: inherit
|
||||
|
||||
&--inset:not(.v-divider--vertical)
|
||||
margin-left: 72px
|
||||
max-width: calc(100% - 72px)
|
||||
|
||||
&--vertical
|
||||
align-self: stretch
|
||||
border: solid
|
||||
border-width: 0 thin 0 0
|
||||
display: inline-flex
|
||||
height: inherit
|
||||
min-height: 100%
|
||||
max-height: 100%
|
||||
max-width: 0px
|
||||
width: 0px
|
||||
vertical-align: text-bottom
|
||||
|
||||
&.v-divider--inset
|
||||
margin-top: 8px
|
||||
min-height: 0
|
||||
max-height: calc(100% - 16px)
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/** Theme */
|
||||
v-expansion-panel($material)
|
||||
.v-expansion-panel__container
|
||||
border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
|
||||
background-color: $material.cards
|
||||
color: $material.text.primary
|
||||
|
||||
.v-expansion-panel__header
|
||||
.v-expansion-panel__header__icon
|
||||
.v-icon
|
||||
color: $material.icons.active
|
||||
|
||||
&--disabled
|
||||
color: $material.text.disabled
|
||||
|
||||
&--focusable
|
||||
.v-expansion-panel__container
|
||||
&:focus
|
||||
background-color: $material.expansion-panels.focus
|
||||
|
||||
theme(v-expansion-panel, "v-expansion-panel")
|
||||
|
||||
.v-expansion-panel
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
list-style-type: none
|
||||
padding: 0
|
||||
text-align: left
|
||||
width: 100%
|
||||
elevation(1)
|
||||
|
||||
&__container
|
||||
flex: 1 0 100%
|
||||
max-width: 100%
|
||||
outline: none
|
||||
transition: .3s $transition.swing
|
||||
|
||||
&:first-child
|
||||
border-top: none !important
|
||||
|
||||
.v-expansion-panel__header__iconnel__header__icon
|
||||
margin-left: auto
|
||||
|
||||
&--disabled
|
||||
.v-expansion-panel__header
|
||||
pointer-events: none
|
||||
|
||||
&--active
|
||||
> .v-expansion-panel__header
|
||||
.v-expansion-panel__header__icon .v-icon
|
||||
transform: rotate(-180deg)
|
||||
|
||||
&__header
|
||||
display: flex
|
||||
cursor: pointer
|
||||
align-items: center
|
||||
position: relative
|
||||
padding: 12px 24px
|
||||
min-height: 48px
|
||||
|
||||
> *:not(.v-expansion-panel__header__icon)
|
||||
flex: 1 1 auto
|
||||
|
||||
&__body
|
||||
transition: $primary-transition
|
||||
|
||||
> .v-card
|
||||
border-radius: 0
|
||||
elevation(0, true)
|
||||
|
||||
&--popout, &--inset
|
||||
elevation(0)
|
||||
|
||||
.v-expansion-panel__container--active
|
||||
margin: $spacers.three.x
|
||||
elevation(3)
|
||||
|
||||
&--popout, &--inset
|
||||
.v-expansion-panel__container
|
||||
max-width: 95%
|
||||
|
||||
&--popout
|
||||
.v-expansion-panel__container--active
|
||||
max-width: 100%
|
||||
|
||||
&--inset
|
||||
.v-expansion-panel__container--active
|
||||
max-width: 85%
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-footer($material)
|
||||
background: $material.app-bar
|
||||
color: $material.text.primary
|
||||
|
||||
theme(v-footer, "v-footer")
|
||||
|
||||
.v-footer
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: 0 1 auto !important // Don't let devs break their code
|
||||
min-height: $footer-height
|
||||
transition: .2s $transition.fast-out-slow-in
|
||||
|
||||
&--absolute,
|
||||
&--fixed
|
||||
bottom: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
z-index: 3
|
||||
|
||||
&--inset
|
||||
z-index: 2
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-form
|
||||
> .container
|
||||
padding: $grid-gutters.lg
|
||||
|
||||
> .layout > .flex
|
||||
padding: ($grid-gutters.lg / 2)
|
||||
|
||||
> .layout:only-child
|
||||
margin: -($grid-gutters.lg / 2)
|
||||
|
||||
> .layout:not(:only-child)
|
||||
margin: auto -($grid-gutters.lg / 2)
|
||||
+218
@@ -0,0 +1,218 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.container
|
||||
flex: 1 1 100%
|
||||
margin: auto
|
||||
padding: $grid-gutters.xl
|
||||
width: 100%
|
||||
|
||||
for $size, $width in $container-max-widths
|
||||
@media only screen and (min-width: $width)
|
||||
max-width: ($width * 0.9375) // Credit to bootstrap
|
||||
|
||||
@media $display-breakpoints.sm-and-down
|
||||
padding: $grid-gutters.lg
|
||||
|
||||
&.fluid
|
||||
max-width: 100%
|
||||
|
||||
&.fill-height
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
> .layout
|
||||
height: 100%
|
||||
flex: 1 1 auto
|
||||
|
||||
&.grid-list
|
||||
for $size, $gutter in $grid-gutters
|
||||
&-{$size}
|
||||
.layout
|
||||
.flex
|
||||
padding: ($gutter / 2)
|
||||
|
||||
.layout:only-child
|
||||
margin: -($gutter / 2)
|
||||
|
||||
.layout:not(:only-child)
|
||||
margin: auto -($gutter / 2)
|
||||
|
||||
*:not(:only-child)
|
||||
.layout:first-child
|
||||
margin-top: -($gutter / 2)
|
||||
|
||||
.layout:last-child
|
||||
margin-bottom: -($gutter / 2)
|
||||
|
||||
.layout
|
||||
display: flex
|
||||
flex: 1 1 auto
|
||||
flex-wrap: nowrap
|
||||
// https://github.com/vuetifyjs/vuetify/issues/3873
|
||||
min-width: 0
|
||||
|
||||
&.row
|
||||
flex-direction: row
|
||||
|
||||
&.reverse
|
||||
flex-direction: row-reverse
|
||||
|
||||
&.column
|
||||
flex-direction: column
|
||||
|
||||
&.reverse
|
||||
flex-direction: column-reverse
|
||||
|
||||
> .flex
|
||||
max-width: 100%
|
||||
|
||||
&.wrap
|
||||
flex-wrap: wrap
|
||||
|
||||
for $size, $width in $grid-breakpoints
|
||||
@media all and (min-width: $width)
|
||||
for n in (1..$grid-columns)
|
||||
.flex.{$size}{n}
|
||||
flex-basis: (n / $grid-columns * 100)%
|
||||
flex-grow: 0
|
||||
max-width: (n / $grid-columns * 100)%
|
||||
|
||||
.flex.order-{$size}{n}
|
||||
order: n
|
||||
|
||||
for n in (0..$grid-columns)
|
||||
.flex.offset-{$size}{n}
|
||||
// Offsets can only ever work in row layouts
|
||||
margin-left: (n / $grid-columns * 100)%
|
||||
|
||||
.flex,
|
||||
.child-flex > *
|
||||
flex: 1 1 auto
|
||||
max-width: 100%
|
||||
|
||||
.align
|
||||
&-start
|
||||
align-items: flex-start
|
||||
|
||||
&-end
|
||||
align-items: flex-end
|
||||
|
||||
&-center
|
||||
align-items: center
|
||||
|
||||
&-baseline
|
||||
align-items: baseline
|
||||
|
||||
.align-self
|
||||
&-start
|
||||
align-self: flex-start
|
||||
|
||||
&-end
|
||||
align-self: flex-end
|
||||
|
||||
&-center
|
||||
align-self: center
|
||||
|
||||
&-baseline
|
||||
align-self: baseline
|
||||
|
||||
.align-content
|
||||
&-start
|
||||
align-content: flex-start
|
||||
|
||||
&-end
|
||||
align-content: flex-end
|
||||
|
||||
&-center
|
||||
align-content: center
|
||||
|
||||
&-space-between
|
||||
align-content: space-between
|
||||
|
||||
&-space-around
|
||||
align-content: space-around
|
||||
|
||||
.justify
|
||||
&-start
|
||||
justify-content: flex-start
|
||||
|
||||
&-end
|
||||
justify-content: flex-end
|
||||
|
||||
&-center
|
||||
justify-content: center
|
||||
|
||||
&-space-around
|
||||
justify-content: space-around
|
||||
|
||||
&-space-between
|
||||
justify-content: space-between
|
||||
|
||||
.justify-self
|
||||
&-start
|
||||
justify-self: flex-start
|
||||
|
||||
&-end
|
||||
justify-self: flex-end
|
||||
|
||||
&-center
|
||||
justify-self: center
|
||||
|
||||
&-baseline
|
||||
justify-self: baseline
|
||||
|
||||
.spacer
|
||||
flex-grow: 1 !important
|
||||
|
||||
.grow
|
||||
flex-grow: 1 !important
|
||||
flex-shrink: 0 !important
|
||||
|
||||
.shrink
|
||||
flex-grow: 0 !important
|
||||
flex-shrink: 1 !important
|
||||
|
||||
.scroll-y
|
||||
overflow-y: auto
|
||||
|
||||
.fill-height
|
||||
height: 100%
|
||||
|
||||
.hide-overflow
|
||||
overflow: hidden !important
|
||||
|
||||
.show-overflow
|
||||
overflow: visible !important
|
||||
|
||||
.no-wrap
|
||||
white-space: nowrap
|
||||
|
||||
.ellipsis
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
// Display helpers
|
||||
.d-flex
|
||||
display: flex !important
|
||||
|
||||
.d-inline-flex
|
||||
display: inline-flex !important
|
||||
|
||||
// TODO: Remove this in v2.0 (╯°□°）╯︵ ┻━┻
|
||||
.d-flex,
|
||||
.d-inline-flex
|
||||
> *
|
||||
flex: 1 1 auto !important
|
||||
|
||||
.d-block
|
||||
display: block !important
|
||||
|
||||
.d-inline-block
|
||||
display: inline-block !important
|
||||
|
||||
.d-inline
|
||||
display: inline !important
|
||||
|
||||
.d-none
|
||||
display: none !important
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Themes */
|
||||
v-icon($material)
|
||||
color: $material.icons.active
|
||||
|
||||
&.v-icon--disabled
|
||||
color: $material.icons.inactive !important
|
||||
|
||||
theme(v-icon, "v-icon")
|
||||
|
||||
.v-icon
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
font-feature-settings: 'liga'
|
||||
font-size: 24px
|
||||
justify-content: center
|
||||
line-height: 1
|
||||
transition: $primary-transition
|
||||
vertical-align: text-bottom
|
||||
|
||||
&--right
|
||||
margin-left: $grid-gutters.lg
|
||||
&--left
|
||||
margin-right: $grid-gutters.lg
|
||||
|
||||
&.v-icon.v-icon--link
|
||||
cursor: pointer
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
opacity: .6
|
||||
|
||||
&--is-component
|
||||
height: 24px
|
||||
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-image
|
||||
z-index: 0
|
||||
|
||||
&__image,
|
||||
&__placeholder
|
||||
z-index: -1
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
&__image
|
||||
background-repeat: no-repeat
|
||||
|
||||
&--preload
|
||||
filter: blur(2px)
|
||||
|
||||
&--contain
|
||||
background-size: contain
|
||||
|
||||
&--cover
|
||||
background-size: cover
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-input($material)
|
||||
&:not(.v-input--is-disabled)
|
||||
input,
|
||||
textarea
|
||||
color: $material.text.primary
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder
|
||||
color: $material.text.disabled
|
||||
|
||||
&--is-disabled
|
||||
.v-label,
|
||||
input,
|
||||
textarea
|
||||
color: $material.text.disabled
|
||||
|
||||
theme(v-input, "v-input")
|
||||
|
||||
.v-input
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
flex: 1 1 auto
|
||||
font-size: 16px
|
||||
text-align: left
|
||||
|
||||
.v-progress-linear
|
||||
top: calc(100% - 1px)
|
||||
left: 0
|
||||
margin: 0
|
||||
position: absolute
|
||||
|
||||
input
|
||||
max-height: 32px
|
||||
|
||||
input,
|
||||
textarea
|
||||
// Remove Firefox red outline
|
||||
&:invalid
|
||||
box-shadow: none
|
||||
|
||||
&:focus,
|
||||
&:active
|
||||
outline: none
|
||||
|
||||
.v-label
|
||||
height: 20px
|
||||
line-height: 20px
|
||||
|
||||
&__append-outer,
|
||||
&__prepend-outer
|
||||
display: inline-flex
|
||||
margin-bottom: 4px
|
||||
margin-top: 4px
|
||||
line-height: 1
|
||||
|
||||
.v-icon
|
||||
user-select: none
|
||||
|
||||
&__append-outer
|
||||
margin-left: 9px
|
||||
|
||||
&__prepend-outer
|
||||
margin-right: 9px
|
||||
|
||||
&__control
|
||||
display: flex
|
||||
flex-direction: column
|
||||
height: auto
|
||||
flex-grow: 1
|
||||
flex-wrap: wrap
|
||||
width: 100% // For IE11
|
||||
|
||||
&__icon
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
height: 24px
|
||||
flex: 1 0 auto
|
||||
justify-content: center
|
||||
min-width: 24px
|
||||
width: 24px
|
||||
|
||||
&--clear
|
||||
border-radius: 50%
|
||||
|
||||
&__slot
|
||||
align-items: center
|
||||
color: inherit
|
||||
display: flex
|
||||
margin-bottom: 8px
|
||||
min-height: inherit
|
||||
position: relative
|
||||
transition: $primary-transition
|
||||
width: 100%
|
||||
|
||||
&--is-disabled:not(.v-input--is-readonly)
|
||||
pointer-events: none
|
||||
|
||||
&--is-loading > .v-input__control > .v-input__slot
|
||||
&:before,
|
||||
&:after
|
||||
display: none
|
||||
|
||||
&--hide-details > .v-input__control > .v-input__slot
|
||||
margin-bottom: 0
|
||||
|
||||
&--has-state
|
||||
&.error--text .v-label
|
||||
animation: shake .6s $transition.swing
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-item-group
|
||||
flex: 0 1 auto
|
||||
position: relative
|
||||
transition: $primary-transition
|
||||
|
||||
> *
|
||||
cursor: pointer
|
||||
flex: 1 1 auto
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-jumbotron($material)
|
||||
.v-jumbotron__content
|
||||
color: $material.text.primary
|
||||
|
||||
theme(v-jumbotron, 'v-jumbotron')
|
||||
|
||||
.v-jumbotron
|
||||
display: block
|
||||
top: 0
|
||||
transition: .3s $transition.swing
|
||||
width: 100%
|
||||
|
||||
&__wrapper
|
||||
height: 100%
|
||||
overflow: hidden
|
||||
position: relative
|
||||
transition: inherit
|
||||
width: 100%
|
||||
|
||||
&__background
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
contain: strict
|
||||
transition: inherit
|
||||
|
||||
&__image
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
min-width: 100%
|
||||
will-change: transform
|
||||
transition: inherit
|
||||
|
||||
&__content
|
||||
height: 100%
|
||||
position: relative
|
||||
transition: inherit
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-label($material)
|
||||
color: $material.text.secondary
|
||||
|
||||
&--is-disabled
|
||||
color: $material.text.disabled
|
||||
|
||||
theme(v-label, "v-label")
|
||||
|
||||
.v-label
|
||||
font-size: 16px
|
||||
line-height: 1
|
||||
min-height: 8px
|
||||
transition: .3s $transition.swing
|
||||
+301
@@ -0,0 +1,301 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Themes */
|
||||
v-list($material)
|
||||
background: $material.cards
|
||||
color: $material.text.primary
|
||||
|
||||
.v-list--disabled
|
||||
color: $material.text.disabled
|
||||
|
||||
.v-list__tile__sub-title
|
||||
color: $material.text.secondary
|
||||
|
||||
.v-list__tile__mask
|
||||
color: $material.text.disabled
|
||||
|
||||
background: $material.expansion-panels.focus
|
||||
|
||||
.v-list__tile--link:hover,
|
||||
.v-list__tile--highlighted,
|
||||
.v-list__group__header:hover
|
||||
background: $material.list-tile.hover
|
||||
|
||||
.v-list__group--active:before,
|
||||
.v-list__group--active:after
|
||||
background: $material.dividers
|
||||
|
||||
.v-list__group--disabled
|
||||
.v-list__tile
|
||||
color: $material.text.disabled !important
|
||||
|
||||
.v-list__group__header__prepend-icon .v-icon
|
||||
color: $material.icons.inactive !important
|
||||
|
||||
v-list-rtl()
|
||||
&__tile
|
||||
&__title
|
||||
text-align: right
|
||||
&__content
|
||||
text-align: right
|
||||
|
||||
theme(v-list, "v-list")
|
||||
rtl(v-list-rtl, "v-list")
|
||||
|
||||
.v-list
|
||||
list-style-type: none
|
||||
padding: $list-top-padding 0 $list-bottom-padding
|
||||
transition: $primary-transition
|
||||
|
||||
// TODO: Remove for List rewrite v2.0
|
||||
> div
|
||||
transition: inherit
|
||||
|
||||
&__tile
|
||||
align-items: center
|
||||
color: inherit
|
||||
display: flex
|
||||
font-size: $list-tile-font-size
|
||||
font-weight: $list-tile-font-weight
|
||||
height: $list-item-single-height
|
||||
margin: 0
|
||||
padding: 0 16px
|
||||
position: relative
|
||||
text-decoration: none
|
||||
transition: background $primary-transition
|
||||
|
||||
&--link
|
||||
cursor: pointer
|
||||
user-select: none
|
||||
|
||||
&__content,
|
||||
&__action
|
||||
height: 100%
|
||||
|
||||
&__title,
|
||||
&__sub-title
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
transition: $primary-transition
|
||||
width: 100%
|
||||
|
||||
&__title
|
||||
height: 24px
|
||||
line-height: 24px
|
||||
position: relative
|
||||
text-align: left
|
||||
|
||||
&__sub-title
|
||||
font-size: $list-sub-title-font-size
|
||||
|
||||
&__avatar
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
min-width: 56px
|
||||
|
||||
&__action
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
min-width: 56px
|
||||
align-items: center
|
||||
|
||||
.v-btn // fix button padding if used
|
||||
padding 0
|
||||
margin 0
|
||||
|
||||
&--icon
|
||||
margin -6px
|
||||
|
||||
.v-radio.v-radio
|
||||
margin: 0
|
||||
|
||||
// QoL when using selection controls in actions
|
||||
.v-input--selection-controls
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.v-messages
|
||||
display: none
|
||||
|
||||
.v-input__slot
|
||||
margin: 0
|
||||
|
||||
&-text
|
||||
color: $list-action-text-font-color
|
||||
font-size: $list-action-text-font-size
|
||||
|
||||
&--stack
|
||||
align-items: flex-end
|
||||
justify-content: space-between
|
||||
padding-top: $list-top-padding
|
||||
padding-bottom: $list-bottom-padding
|
||||
white-space: nowrap
|
||||
flex-direction: column
|
||||
|
||||
&__content
|
||||
text-align: left
|
||||
flex: 1 1 auto
|
||||
overflow: hidden
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
justify-content: center
|
||||
flex-direction: column
|
||||
|
||||
~ .v-list__tile__avatar
|
||||
justify-content: flex-end
|
||||
|
||||
~ .v-list__tile__action:not(.v-list__tile__action--stack)
|
||||
justify-content: flex-end
|
||||
|
||||
&--active
|
||||
.v-list__tile__action:first-of-type
|
||||
.v-icon
|
||||
color: inherit
|
||||
|
||||
&--avatar
|
||||
height: $list-item-avatar-single-height
|
||||
|
||||
&--dense
|
||||
padding-top: $list-item-dense-top-padding
|
||||
padding-bottom: $list-item-dense-top-padding
|
||||
|
||||
.v-subheader
|
||||
font-size: $subheader-dense-font-size
|
||||
height: $list-dense-subheader-height
|
||||
|
||||
.v-list__group
|
||||
.v-subheader
|
||||
height $list-dense-subheader-group-height
|
||||
|
||||
.v-list__tile
|
||||
font-size: $list-item-dense-font-size
|
||||
|
||||
&--avatar
|
||||
height: $list-item-dense-avatar-single-height
|
||||
|
||||
&:not(.v-list__tile--avatar)
|
||||
height: $list-item-dense-single-height
|
||||
|
||||
.v-icon
|
||||
font-size: $list-item-dense-icon-font-size
|
||||
|
||||
.v-list__tile__sub-title
|
||||
font-size: $list-item-dense-font-size
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
|
||||
&--two-line
|
||||
.v-list__tile
|
||||
height: $list-item-double-height
|
||||
|
||||
&.v-list--dense
|
||||
.v-list__tile
|
||||
height: $list-item-dense-double-height
|
||||
|
||||
&--three-line
|
||||
.v-list__tile
|
||||
height: $list-item-triple-height
|
||||
|
||||
.v-list__tile__avatar
|
||||
margin-top: $list-item-avatar-triple-margin-top
|
||||
|
||||
.v-list__tile__sub-title
|
||||
white-space: initial
|
||||
-webkit-line-clamp: 2
|
||||
-webkit-box-orient: vertical
|
||||
display: -webkit-box
|
||||
|
||||
&.v-list--dense
|
||||
.v-list__tile
|
||||
height: $list-item-dense-triple-height
|
||||
|
||||
> .v-list__group
|
||||
&:before
|
||||
top: 0
|
||||
|
||||
.v-list__tile__avatar
|
||||
margin-top: $list-item-dense-avatar-triple-margin-top
|
||||
|
||||
&__group
|
||||
padding: 0
|
||||
position: relative
|
||||
transition: inherit
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
content: ''
|
||||
height: 1px
|
||||
left: 0
|
||||
position: absolute
|
||||
transition: $primary-transition
|
||||
width: 100%
|
||||
|
||||
&--active ~ .v-list__group
|
||||
&:before
|
||||
display: none
|
||||
|
||||
&__header
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
list-style-type: none
|
||||
|
||||
> div:not(.v-list__group__header__prepend-icon):not(.v-list__group__header__append-icon)
|
||||
flex: 1 1 auto
|
||||
overflow: hidden
|
||||
|
||||
.v-list__group__header__append-icon,
|
||||
.v-list__group__header__prepend-icon
|
||||
padding: 0 16px
|
||||
user-select: none
|
||||
|
||||
&--sub-group
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
div .v-list__tile
|
||||
padding-left: 0
|
||||
|
||||
.v-list__group__header__prepend-icon
|
||||
padding: 0 0 0 40px
|
||||
margin-right: 8px
|
||||
|
||||
.v-list__group__header__prepend-icon
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
min-width: 56px
|
||||
|
||||
&--active
|
||||
.v-list__group__header__append-icon
|
||||
.v-icon
|
||||
transform: rotate(-180deg)
|
||||
|
||||
.v-list__group__header__prepend-icon
|
||||
.v-icon
|
||||
color: inherit
|
||||
|
||||
&.v-list__group__header--sub-group
|
||||
.v-list__group__header__prepend-icon
|
||||
.v-icon
|
||||
transform: rotate(-180deg)
|
||||
|
||||
&__items
|
||||
position: relative
|
||||
padding: 0
|
||||
transition: inherit
|
||||
|
||||
> div
|
||||
display: block
|
||||
|
||||
&--no-action
|
||||
.v-list__tile
|
||||
padding-left: $list-item-left-padding
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
|
||||
&--subheader
|
||||
padding-top: 0
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-menu
|
||||
display: block
|
||||
vertical-align: middle
|
||||
|
||||
&--inline
|
||||
display: inline-block
|
||||
|
||||
&__activator
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
|
||||
*
|
||||
cursor: pointer
|
||||
|
||||
&__content
|
||||
position: absolute
|
||||
display: inline-block
|
||||
border-radius: 2px
|
||||
max-width: 80%
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
contain: content
|
||||
// This is required for an issue on Chrome 65
|
||||
// that prevents scrolling after a menu is opened
|
||||
will-change: transform
|
||||
elevation(8)
|
||||
|
||||
&--active
|
||||
pointer-events: none
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
|
||||
& > .card
|
||||
contain: content
|
||||
backface-visibility: hidden
|
||||
|
||||
> .v-menu__content
|
||||
max-width: none
|
||||
|
||||
&-transition
|
||||
&-enter
|
||||
.v-list__tile
|
||||
min-width: 0
|
||||
pointer-events: none
|
||||
&-enter-to
|
||||
.v-list__tile
|
||||
pointer-events: auto
|
||||
transition-delay: .1s
|
||||
|
||||
&-leave-active,
|
||||
&-leave-to
|
||||
pointer-events: none
|
||||
|
||||
&-enter,
|
||||
&-leave-to
|
||||
opacity: 0
|
||||
|
||||
&-enter-active,
|
||||
&-leave-active
|
||||
transition: all .3s $transition.fast-in-fast-out
|
||||
|
||||
.v-menu-transition-enter
|
||||
&.v-menu__content--auto
|
||||
transition: none !important
|
||||
|
||||
.v-list__tile
|
||||
opacity: 0
|
||||
transform: translateY(-15px)
|
||||
|
||||
.v-list__tile--active
|
||||
opacity: 1
|
||||
transform: none !important
|
||||
pointer-events: auto
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-messages($material)
|
||||
color: $material.text.secondary
|
||||
|
||||
v-messages-rtl()
|
||||
text-align: right
|
||||
|
||||
theme(v-messages, "v-messages")
|
||||
rtl(v-messages-rtl, "v-messages")
|
||||
|
||||
.v-messages
|
||||
flex: 1 1 auto
|
||||
font-size: 12px
|
||||
min-height: 12px
|
||||
min-width: 1px // Ensure takes up space with no messages and inside of flex
|
||||
position: relative
|
||||
|
||||
&__message
|
||||
line-height: normal
|
||||
word-break: break-word
|
||||
overflow-wrap: break-word
|
||||
word-wrap: break-word
|
||||
hyphens: auto
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-navigation-drawer($material)
|
||||
background-color: $material.cards
|
||||
|
||||
&:not(.v-navigation-drawer--floating)
|
||||
.v-navigation-drawer__border
|
||||
background-color: $material.dividers
|
||||
|
||||
.v-divider
|
||||
border-color: $material.dividers
|
||||
|
||||
theme(v-navigation-drawer, "v-navigation-drawer")
|
||||
|
||||
.v-navigation-drawer
|
||||
bootable()
|
||||
|
||||
display: block
|
||||
left: 0
|
||||
max-width: 100%
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
pointer-events: auto
|
||||
top: 0
|
||||
will-change: transform
|
||||
z-index: 3
|
||||
-webkit-overflow-scrolling: touch
|
||||
|
||||
&[data-booted="true"]
|
||||
transition-property: transform, width
|
||||
|
||||
&__border
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
height: 100%
|
||||
width: 1px
|
||||
|
||||
&.v-navigation-drawer--right
|
||||
&:after
|
||||
left: 0
|
||||
right: initial
|
||||
|
||||
&--right
|
||||
left: auto
|
||||
right: 0
|
||||
|
||||
> .v-navigation-drawer__border
|
||||
right: auto
|
||||
left: 0
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
|
||||
&--floating:after
|
||||
display: none
|
||||
|
||||
&--mini-variant
|
||||
overflow: hidden
|
||||
|
||||
.v-list__group__header__prepend-icon
|
||||
flex: 1 0 auto
|
||||
justify-content: center
|
||||
width: 100%
|
||||
|
||||
.v-list__tile__action,
|
||||
.v-list__tile__avatar
|
||||
justify-content: center
|
||||
min-width: 48px
|
||||
|
||||
.v-list__tile__content,
|
||||
.v-list__tile:after
|
||||
opacity: 0
|
||||
|
||||
.v-subheader,
|
||||
.v-divider,
|
||||
.v-list--group
|
||||
display: none !important
|
||||
|
||||
&--temporary,
|
||||
&--is-mobile
|
||||
z-index: 6
|
||||
|
||||
&:not(.v-navigation-drawer--close)
|
||||
elevation(16)
|
||||
|
||||
.v-list
|
||||
background: inherit
|
||||
|
||||
> .v-list
|
||||
.v-list__tile
|
||||
transition: none
|
||||
font-weight: $navigation-drawer-item-font-weight
|
||||
|
||||
&--active
|
||||
.v-list__tile__title
|
||||
color: inherit
|
||||
|
||||
.v-list--group
|
||||
.v-list__tile
|
||||
font-weight: $navigation-drawer-group-item-font-weight
|
||||
|
||||
&__header--active
|
||||
&:after
|
||||
background: transparent
|
||||
|
||||
> .v-list:not(.v-list--dense)
|
||||
.v-list__tile
|
||||
font-size: $navigation-drawer-item-font-size
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-overflow-btn($material)
|
||||
.v-input__control,
|
||||
.v-input__slot
|
||||
&::before
|
||||
background-color: $material.dividers !important // override v-text-field bottom border
|
||||
|
||||
&.v-text-field--outline
|
||||
.v-input__control,
|
||||
.v-input__slot
|
||||
&::before
|
||||
background-color: transparent !important // override v-text-field top border;
|
||||
|
||||
&--segmented,
|
||||
&--editable:hover,
|
||||
&--editable.v-input--is-focused,
|
||||
&--editable.v-select--is-menu-active
|
||||
.v-input__append-inner
|
||||
border-left: 1px solid $material.dividers
|
||||
|
||||
&:hover,
|
||||
&.v-input--is-focused,
|
||||
&.v-select--is-menu-active
|
||||
.v-input__slot
|
||||
background: $material.cards
|
||||
|
||||
theme(v-overflow-btn, "v-overflow-btn")
|
||||
|
||||
.v-overflow-btn
|
||||
margin-top: 12px
|
||||
padding-top: 0;
|
||||
|
||||
&:not(.v-overflow-btn--editable) > .v-input__control > .v-input__slot
|
||||
cursor: pointer
|
||||
|
||||
.v-select__slot
|
||||
height: 48px
|
||||
|
||||
input
|
||||
margin-left: 16px
|
||||
cursor: pointer
|
||||
|
||||
.v-select__selection--comma:first-child
|
||||
margin-left: 16px
|
||||
|
||||
.v-input__slot
|
||||
transition: .3s $transition.swing
|
||||
|
||||
&::after
|
||||
content: none
|
||||
|
||||
.v-label
|
||||
margin-left: 16px
|
||||
top: calc(50% - 10px)
|
||||
|
||||
.v-input__append-inner
|
||||
width: 48px
|
||||
height: 48px
|
||||
align-self: auto
|
||||
align-items: center
|
||||
margin-top: 0
|
||||
padding: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.v-input__append-outer,
|
||||
.v-input__prepend-outer
|
||||
margin-top: 12px
|
||||
margin-bottom: 12px
|
||||
|
||||
.v-input__control::before
|
||||
// TODO: move to mixin
|
||||
height: 1px
|
||||
top: -1px
|
||||
content: ''
|
||||
left: 0
|
||||
position: absolute
|
||||
transition: $primary-transition
|
||||
width: 100%
|
||||
|
||||
&.v-input--is-focused,
|
||||
&.v-select--is-menu-active
|
||||
.v-input__slot
|
||||
elevation(2)
|
||||
|
||||
.v-select__selections
|
||||
width: 0px
|
||||
|
||||
&--segmented
|
||||
.v-select__selections
|
||||
flex-wrap: nowrap
|
||||
|
||||
.v-btn
|
||||
border-radius: 0
|
||||
margin: 0
|
||||
margin-right: -16px // push past the input's padding
|
||||
height: 48px
|
||||
width: 100%
|
||||
|
||||
&__content
|
||||
justify-content: start
|
||||
|
||||
&::before
|
||||
background-color: transparent
|
||||
|
||||
&--editable
|
||||
.v-select__slot
|
||||
input
|
||||
cursor: text
|
||||
|
||||
.v-input__append-inner,
|
||||
.v-input__append-inner *
|
||||
cursor: pointer
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-overlay
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
pointer-events: none
|
||||
// The overlay has a dynamically set
|
||||
// z-index, we want the transition
|
||||
// timing to affect its changing
|
||||
// https://github.com/vuetifyjs/vuetify/issues/2146
|
||||
transition: .3s $transition.swing
|
||||
// This is the standard index
|
||||
z-index: 5
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&:before
|
||||
background-color: rgba(33, 33, 33, 1)
|
||||
bottom: 0
|
||||
content: ''
|
||||
height: 100%
|
||||
left: 0
|
||||
opacity: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
transition: inherit
|
||||
// Delay the transition to avoid a
|
||||
// rendering bug that is visible
|
||||
// within Edge and Firefox
|
||||
// https://github.com/vuetifyjs/vuetify/issues/2146
|
||||
transition-delay: 150ms
|
||||
width: 100%
|
||||
|
||||
&--active
|
||||
pointer-events: auto
|
||||
touch-action: none
|
||||
|
||||
&:before
|
||||
opacity: .46
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-pagination($material)
|
||||
.v-pagination__item
|
||||
background: $material.cards
|
||||
color: $material.fg-color
|
||||
width: auto
|
||||
min-width: 34px
|
||||
padding: 0 5px
|
||||
|
||||
&--active
|
||||
color: $material.text.theme
|
||||
|
||||
.v-pagination__navigation
|
||||
background: $material.cards
|
||||
|
||||
.v-icon
|
||||
color: rgba($material.fg-color, $material.active-icon-percent)
|
||||
|
||||
theme(v-pagination, "v-pagination")
|
||||
|
||||
.v-pagination
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
list-style-type: none
|
||||
margin: 0
|
||||
max-width: 100%
|
||||
padding: 0
|
||||
|
||||
> li
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
&--circle
|
||||
.v-pagination__item,
|
||||
.v-pagination__more,
|
||||
.v-pagination__navigation
|
||||
border-radius: 50%
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
opacity: .6
|
||||
|
||||
&__item
|
||||
elevation(2)
|
||||
border-radius: 4px
|
||||
font-size: $button-font-size
|
||||
background: transparent
|
||||
height: 34px
|
||||
width: 34px
|
||||
margin: .3rem
|
||||
text-decoration: none
|
||||
transition: .3s $transition.linear-out-slow-in
|
||||
|
||||
&--active
|
||||
elevation(4)
|
||||
|
||||
&__navigation
|
||||
elevation(2)
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
text-decoration: none
|
||||
height: 2rem
|
||||
|
||||
border-radius: 4px
|
||||
width: 2rem
|
||||
margin: .3rem 10px
|
||||
|
||||
.v-icon
|
||||
font-size: 2rem
|
||||
transition: $secondary-transition
|
||||
vertical-align: middle
|
||||
|
||||
&--disabled
|
||||
opacity: .6
|
||||
pointer-events: none
|
||||
|
||||
&__more
|
||||
margin: .3rem
|
||||
display: inline-flex
|
||||
align-items: flex-end
|
||||
justify-content: center
|
||||
height: 2rem
|
||||
width: 2rem
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-parallax
|
||||
position: relative
|
||||
overflow: hidden
|
||||
z-index: 0
|
||||
|
||||
&__image-container
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
z-index: 1
|
||||
contain: strict
|
||||
|
||||
&__image
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 50%
|
||||
min-width: 100%
|
||||
min-height: 100%
|
||||
display: none
|
||||
transform: translate(-50%, 0)
|
||||
will-change: transform
|
||||
transition: .3s opacity $transition.swing
|
||||
z-index: 1
|
||||
|
||||
&__content
|
||||
color: #FFFFFF
|
||||
height: 100%
|
||||
z-index: 2
|
||||
position: relative
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
padding: 0 1rem
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Themes */
|
||||
|
||||
v-picker-title($material)
|
||||
background: $material.picker.title
|
||||
|
||||
theme(v-picker-title, "v-picker__title")
|
||||
|
||||
v-picker-body($material)
|
||||
background: $material.picker.body
|
||||
|
||||
theme(v-picker-body, 'v-picker__body')
|
||||
|
||||
.v-picker
|
||||
border-radius: $card-border-radius
|
||||
contain: layout style
|
||||
display: inline-flex
|
||||
flex-direction: column
|
||||
vertical-align: top
|
||||
position: relative
|
||||
|
||||
.v-picker--full-width
|
||||
display: flex
|
||||
|
||||
.v-picker__title
|
||||
color: #fff
|
||||
border-top-left-radius: $card-border-radius
|
||||
border-top-right-radius: $card-border-radius
|
||||
padding: 16px
|
||||
|
||||
.v-picker__title__btn
|
||||
transition: $primary-transition
|
||||
|
||||
&:not(.v-picker__title__btn--active)
|
||||
opacity: .6
|
||||
cursor: pointer
|
||||
|
||||
&:hover:not(:focus)
|
||||
opacity: 1
|
||||
|
||||
.v-picker__title__btn--readonly
|
||||
pointer-events: none
|
||||
|
||||
|
||||
.v-picker__title__btn--active
|
||||
opacity: 1
|
||||
|
||||
.v-picker__body
|
||||
height: auto
|
||||
overflow: hidden
|
||||
position: relative
|
||||
z-index: 0
|
||||
|
||||
flex: 1 0 auto
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
|
||||
> div
|
||||
width: 100%
|
||||
|
||||
&.fade-transition-leave-active
|
||||
position: absolute
|
||||
|
||||
.v-picker--landscape
|
||||
.v-picker__title
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
width: 170px
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
height: 100%
|
||||
z-index: 1
|
||||
|
||||
.v-picker__body,
|
||||
.v-picker__actions
|
||||
margin-left: 170px
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-progress-circular
|
||||
position: relative
|
||||
display: inline-flex
|
||||
vertical-align: middle
|
||||
|
||||
svg
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: auto
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
z-index: 0
|
||||
|
||||
&--indeterminate
|
||||
svg
|
||||
animation: $progress-circular-rotate-animation
|
||||
transform-origin: center center
|
||||
transition: $process-circular-intermediate-svg-transition
|
||||
|
||||
.v-progress-circular__overlay
|
||||
animation: $progress-circular-rotate-dash
|
||||
stroke-linecap: round
|
||||
stroke-dasharray: 80,200
|
||||
stroke-dashoffset: 0px
|
||||
|
||||
&__underlay
|
||||
stroke: $progress-circular-underlay-stroke
|
||||
z-index: 1
|
||||
|
||||
&__overlay
|
||||
stroke: currentColor
|
||||
z-index: 2
|
||||
transition: $progress-circular-overlay-transition
|
||||
|
||||
&__info
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
@keyframes progress-circular-dash
|
||||
0%
|
||||
stroke-dasharray: 1,200
|
||||
stroke-dashoffset: 0px
|
||||
|
||||
50%
|
||||
stroke-dasharray: 100,200
|
||||
stroke-dashoffset: -15px
|
||||
|
||||
100%
|
||||
stroke-dasharray: 100,200
|
||||
stroke-dashoffset: -125px
|
||||
|
||||
@keyframes progress-circular-rotate
|
||||
100%
|
||||
transform: rotate(360deg)
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-progress-linear
|
||||
background: transparent
|
||||
margin: 1rem 0
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
position: relative
|
||||
|
||||
&__bar
|
||||
width: 100%
|
||||
height: inherit
|
||||
position: relative
|
||||
transition: .2s $transition.ease-in-out
|
||||
z-index: 1
|
||||
|
||||
&__determinate
|
||||
height: inherit
|
||||
transition: .2s $transition.ease-in-out
|
||||
|
||||
&__indeterminate
|
||||
.long, .short
|
||||
height: inherit
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
will-change: left, right
|
||||
width: auto
|
||||
background-color: inherit
|
||||
|
||||
&--active .long
|
||||
animation: indeterminate
|
||||
animation-duration: 2.2s
|
||||
animation-iteration-count: infinite
|
||||
|
||||
&--active .short
|
||||
animation: indeterminate-short
|
||||
animation-duration: 2.2s
|
||||
animation-iteration-count: infinite
|
||||
|
||||
&__background
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
bottom: 0
|
||||
transition: .3s ease-in
|
||||
|
||||
&__content
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
z-index: 2
|
||||
|
||||
&--query
|
||||
.v-progress-linear__bar__indeterminate
|
||||
&--active .long
|
||||
animation: query
|
||||
animation-duration: 2s
|
||||
animation-iteration-count: infinite
|
||||
|
||||
&--active .short
|
||||
animation: query-short
|
||||
animation-duration: 2s
|
||||
animation-iteration-count: infinite
|
||||
|
||||
@keyframes indeterminate
|
||||
0%
|
||||
left: -90%
|
||||
right: 100%
|
||||
60%
|
||||
left: -90%
|
||||
right: 100%
|
||||
100%
|
||||
left: 100%
|
||||
right: -35%
|
||||
|
||||
@keyframes indeterminate-short
|
||||
0%
|
||||
left: -200%
|
||||
right: 100%
|
||||
60%
|
||||
left: 107%
|
||||
right: -8%
|
||||
100%
|
||||
left: 107%
|
||||
right: -8%
|
||||
|
||||
@keyframes query
|
||||
0%
|
||||
right: -90%
|
||||
left: 100%
|
||||
60%
|
||||
right: -90%
|
||||
left: 100%
|
||||
100%
|
||||
right: 100%
|
||||
left: -35%
|
||||
|
||||
@keyframes query-short
|
||||
0%
|
||||
right: -200%
|
||||
left: 100%
|
||||
60%
|
||||
right: 107%
|
||||
left: -8%
|
||||
100%
|
||||
right: 107%
|
||||
left: -8%
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
.v-input--radio-group
|
||||
&__input
|
||||
display: flex
|
||||
width: 100%
|
||||
|
||||
&--column .v-input--radio-group__input > .v-label
|
||||
padding-bottom: 8px
|
||||
|
||||
&--row .v-input--radio-group__input > .v-label
|
||||
padding-right: 8px
|
||||
|
||||
&--row
|
||||
.v-input--radio-group__input
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
|
||||
&--column
|
||||
.v-radio:not(:last-child):not(:only-child)
|
||||
margin-bottom: 8px
|
||||
|
||||
.v-input--radio-group__input
|
||||
flex-direction: column
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-radio($material)
|
||||
&--is-disabled
|
||||
label
|
||||
color: $material.text.disabled
|
||||
|
||||
.v-icon
|
||||
// needed for helper override
|
||||
color: $material.buttons.disabled !important
|
||||
|
||||
theme(v-radio, "v-radio")
|
||||
|
||||
.v-radio
|
||||
align-items: center
|
||||
display: flex
|
||||
height: auto
|
||||
margin-right: 16px
|
||||
outline: none
|
||||
|
||||
&--is-disabled
|
||||
pointer-events: none
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-range-slider($material)
|
||||
&.v-input--slider.v-input--is-disabled
|
||||
.v-slider.v-slider
|
||||
.v-slider__thumb
|
||||
background: $material.selection-controls.thumb.disabled
|
||||
|
||||
theme(v-range-slider, "v-input--range-slider")
|
||||
|
||||
/** Input Group */
|
||||
.v-input--range-slider
|
||||
&.v-input--is-disabled
|
||||
.v-slider__track-fill
|
||||
display: none
|
||||
|
||||
&.v-input--slider
|
||||
.v-slider.v-slider
|
||||
.v-slider__thumb
|
||||
border-color: transparent
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
.v-rating
|
||||
.v-icon
|
||||
padding: 0.5rem
|
||||
border-radius: 50%
|
||||
user-select: none
|
||||
|
||||
&--readonly
|
||||
.v-icon
|
||||
pointer-events: none
|
||||
|
||||
&--dense
|
||||
.v-icon
|
||||
padding: 0.1rem
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-responsive
|
||||
position: relative
|
||||
overflow: hidden
|
||||
flex: 1 0 auto
|
||||
display: flex
|
||||
|
||||
&__content
|
||||
flex: 1 0 0px
|
||||
|
||||
&__sizer
|
||||
transition: padding-bottom 0.2s $transition.swing
|
||||
flex: 0 0 0px
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
.v-ripple
|
||||
&__container
|
||||
color: inherit
|
||||
border-radius: inherit
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
left: 0
|
||||
top: 0
|
||||
overflow: hidden
|
||||
z-index: 0
|
||||
pointer-events: none
|
||||
contain: strict
|
||||
|
||||
&__animation
|
||||
color: inherit
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
border-radius: 50%
|
||||
background: currentColor
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
overflow: hidden
|
||||
will-change: transform, opacity
|
||||
|
||||
&--enter
|
||||
transition: none
|
||||
|
||||
&--in
|
||||
transition: $ripple-animation-transition-in
|
||||
|
||||
&--out
|
||||
transition: $ripple-animation-transition-out
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-select($material)
|
||||
// Needs an explicit color to override
|
||||
// higher level color
|
||||
.v-select__selections
|
||||
color: $material.text.primary
|
||||
|
||||
&.v-input--is-disabled
|
||||
.v-select__selections
|
||||
color: $material.text.disabled
|
||||
|
||||
.v-chip--disabled,
|
||||
.v-select__selection--disabled
|
||||
color: $material.text.disabled
|
||||
|
||||
&.v-text-field--solo-inverted.v-input--is-focused
|
||||
.v-select__selections
|
||||
color: $material.inputs.solo-inverted-focused-text
|
||||
|
||||
theme(v-select, 'v-select')
|
||||
|
||||
.v-select
|
||||
position: relative // For **attach** prop
|
||||
|
||||
& > .v-input__control > .v-input__slot
|
||||
cursor: pointer
|
||||
|
||||
.v-chip
|
||||
flex: 0 1 auto
|
||||
|
||||
.fade-transition-leave-active
|
||||
position: absolute
|
||||
left: 0
|
||||
|
||||
&.v-input--is-dirty
|
||||
::placeholder
|
||||
color: transparent !important
|
||||
|
||||
&:not(.v-input--is-dirty)
|
||||
&:not(.v-input--is-focused)
|
||||
.v-text-field__prefix
|
||||
line-height: 20px
|
||||
position: absolute
|
||||
top: 7px
|
||||
transition: $primary-transition
|
||||
|
||||
&.v-text-field--enclosed:not(.v-text-field--single-line)
|
||||
.v-select__selections
|
||||
padding-top: 24px
|
||||
|
||||
&.v-text-field
|
||||
input
|
||||
flex: 1 1 // Doesn't resize on IE11 with 3rd param
|
||||
margin-top: 0
|
||||
min-width: 0
|
||||
pointer-events: none
|
||||
position: relative
|
||||
|
||||
&.v-select--is-menu-active
|
||||
.v-input__icon--append .v-icon
|
||||
transform: rotate(180deg)
|
||||
|
||||
&.v-select--chips
|
||||
input
|
||||
margin: 0
|
||||
|
||||
.v-select__selections
|
||||
min-height: 42px
|
||||
|
||||
&.v-select--chips--small
|
||||
.v-select__selections
|
||||
min-height: 32px
|
||||
|
||||
&:not(.v-text-field--single-line)
|
||||
&.v-text-field--box,
|
||||
&.v-text-field--enclosed
|
||||
.v-select__selections
|
||||
min-height: 68px
|
||||
|
||||
&.v-select--chips--small
|
||||
.v-select__selections
|
||||
min-height: 56px
|
||||
|
||||
&.v-text-field--reverse
|
||||
.v-select__slot,
|
||||
.v-select__selections
|
||||
flex-direction: row-reverse
|
||||
|
||||
&__selections
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: 1 1 auto
|
||||
flex-wrap: wrap
|
||||
line-height: 18px
|
||||
|
||||
&__selection
|
||||
max-width: 90%
|
||||
|
||||
&--comma
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
margin: 7px 4px 7px 0
|
||||
|
||||
&__slot
|
||||
position: relative
|
||||
align-items: center
|
||||
display: flex
|
||||
width: 100%
|
||||
|
||||
&:not(.v-text-field--single-line)
|
||||
.v-select__slot
|
||||
// If an input is a direct child
|
||||
// there is no selections div
|
||||
// and we must move input to
|
||||
// the end of the container
|
||||
> input
|
||||
align-self: flex-end
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/** Theme */
|
||||
selection-control($material)
|
||||
&.v-input--is-disabled
|
||||
.v-icon
|
||||
// needed for helper override
|
||||
color: $material.buttons.disabled !important
|
||||
|
||||
v-selection-control-rtl()
|
||||
.v-input--selection-controls__input
|
||||
margin-right: 0
|
||||
margin-left: 8px
|
||||
|
||||
theme(selection-control, "v-input--selection-controls")
|
||||
rtl(v-selection-control-rtl, "v-input--selection-controls")
|
||||
|
||||
.v-input--selection-controls
|
||||
margin-top: $input-top-spacing
|
||||
padding-top: 4px
|
||||
|
||||
.v-input__append-outer,
|
||||
.v-input__prepend-outer
|
||||
margin-top: 0
|
||||
margin-bottom: 0
|
||||
|
||||
.v-input__control
|
||||
flex-grow: 0
|
||||
width: auto
|
||||
|
||||
&:not(.v-input--hide-details)
|
||||
.v-input__slot
|
||||
margin-bottom: 12px
|
||||
|
||||
&__input
|
||||
color: inherit
|
||||
display: inline-flex
|
||||
flex: 0 0 auto
|
||||
height: 24px
|
||||
position: relative
|
||||
margin-right: 8px
|
||||
transition: .3s cubic-bezier(.25,.8,.25,1)
|
||||
transition-property: color, transform
|
||||
width: 24px
|
||||
user-select: none
|
||||
|
||||
input
|
||||
position: absolute
|
||||
opacity: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
cursor: pointer
|
||||
user-select: none
|
||||
|
||||
// Sibling selector to avoid targeting v-radio-group's label
|
||||
& + .v-label
|
||||
cursor: pointer
|
||||
user-select: none
|
||||
|
||||
&__ripple
|
||||
border-radius: 50%
|
||||
cursor: pointer
|
||||
height: 34px
|
||||
position: absolute
|
||||
transition: inherit
|
||||
width: 34px
|
||||
left: -12px
|
||||
top: calc(50% - 24px)
|
||||
margin: 7px
|
||||
|
||||
&:before
|
||||
border-radius: inherit
|
||||
bottom: 0
|
||||
content: ''
|
||||
position: absolute
|
||||
opacity: .2
|
||||
left: 0
|
||||
right: 0
|
||||
top: 0
|
||||
transform-origin: center center
|
||||
transform: scale(0.2)
|
||||
transition: inherit
|
||||
|
||||
.v-ripple__container
|
||||
transform: scale(1.4)
|
||||
|
||||
&.v-input .v-label
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
top: 0
|
||||
height: auto
|
||||
|
||||
&.v-input--is-focused,
|
||||
.v-radio--is-focused
|
||||
.v-input--selection-controls__ripple:before
|
||||
background: currentColor
|
||||
transform: scale(.8)
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Themes */
|
||||
v-sheet($material)
|
||||
background-color: $material.cards
|
||||
border-color: $material.cards
|
||||
color: $material.text.primary
|
||||
|
||||
theme(v-sheet, "v-sheet")
|
||||
|
||||
.v-sheet
|
||||
display: block
|
||||
border-radius: $sheet-border-radius
|
||||
position: relative
|
||||
transition: $primary-transition
|
||||
|
||||
&--tile
|
||||
border-radius: 0
|
||||
+258
@@ -0,0 +1,258 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-slider($material)
|
||||
.v-slider__track,
|
||||
.v-slider__track-fill
|
||||
background: $material.slider.inactive
|
||||
|
||||
.v-slider__track__container
|
||||
&:after
|
||||
border: 1px solid $material.text.primary
|
||||
|
||||
.v-slider__ticks
|
||||
border-color: $material.text.primary
|
||||
color: $material.text.secondary
|
||||
|
||||
&:not(.v-input--is-dirty)
|
||||
.v-slider__thumb-label
|
||||
background: $material.slider.inactive
|
||||
|
||||
.v-slider__thumb
|
||||
border: 3px solid $material.slider.inactive
|
||||
|
||||
&.v-input--slider--is-active
|
||||
.v-slider__thumb
|
||||
border: 3px solid $material.slider.active
|
||||
|
||||
&.v-input--is-disabled
|
||||
.v-slider__thumb
|
||||
border: 5px solid $material.slider.disabled
|
||||
|
||||
&.v-input--is-disabled.v-input--is-dirty
|
||||
.v-slider__thumb
|
||||
background: $material.slider.disabled
|
||||
|
||||
&.v-input--slider--is-active
|
||||
.v-slider__track
|
||||
background: $material.slider.active
|
||||
|
||||
v-slider-rtl()
|
||||
.v-label
|
||||
margin-left: 16px
|
||||
margin-right: 0
|
||||
|
||||
theme(v-slider, "v-input--slider")
|
||||
rtl(v-slider-rtl, "v-input--slider")
|
||||
|
||||
/** Input Group */
|
||||
.v-input--slider
|
||||
margin-top: $input-top-spacing
|
||||
|
||||
&.v-input--is-focused
|
||||
.v-slider__thumb-container--is-active:not(.v-slider__thumb-container--show-label)
|
||||
&:before
|
||||
opacity: .2
|
||||
transform: scale(1)
|
||||
|
||||
.v-slider__track
|
||||
transition: none
|
||||
|
||||
&.v-input--slider--ticks
|
||||
.v-slider
|
||||
&__track__container:after,
|
||||
.v-slider__tick
|
||||
opacity: 1
|
||||
|
||||
&.v-input--slider--ticks
|
||||
.v-slider__ticks.v-slider__ticks--always-show
|
||||
opacity: 1
|
||||
|
||||
&-labels
|
||||
.v-input__slot
|
||||
margin-bottom: 16px
|
||||
|
||||
&.v-input--is-readonly .v-input__control
|
||||
pointer-events: none
|
||||
|
||||
&.v-input--is-disabled
|
||||
.v-slider__thumb
|
||||
transform: translateY(-50%) scale(.45)
|
||||
&.v-input--is-dirty
|
||||
.v-slider__thumb
|
||||
border: 0px solid transparent
|
||||
|
||||
.v-input__slot > *:first-child:not(:only-child)
|
||||
margin-right: 16px
|
||||
|
||||
/** Slider */
|
||||
.v-slider
|
||||
cursor: default
|
||||
display: flex
|
||||
align-items: center
|
||||
position: relative
|
||||
height: 32px
|
||||
flex: 1
|
||||
outline: none
|
||||
user-select: none
|
||||
|
||||
input
|
||||
cursor: default
|
||||
opacity: 0
|
||||
padding: 0
|
||||
width: 100%
|
||||
|
||||
/** Thumb/Track/Ticks */
|
||||
.v-slider
|
||||
&__track__container
|
||||
height: 2px
|
||||
left: 0
|
||||
overflow: hidden
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
width: 100%
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
height: 2px
|
||||
transition: .3s $transition.swing
|
||||
width: 2px
|
||||
opacity: 0
|
||||
|
||||
&__track,
|
||||
&__thumb,
|
||||
&__ticks
|
||||
position: absolute
|
||||
top: 0
|
||||
|
||||
&__track
|
||||
height: 2px
|
||||
left: 0
|
||||
transition: .3s $transition.swing
|
||||
transform-origin: right
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
|
||||
&-fill
|
||||
position: absolute
|
||||
left: 0
|
||||
height: 2px
|
||||
transform-origin: left
|
||||
width: 100%
|
||||
transition: .3s $transition.swing
|
||||
|
||||
&__ticks-container
|
||||
position: absolute
|
||||
left: 0
|
||||
height: 2px
|
||||
width: 100%
|
||||
top: 50%
|
||||
transform: translate(0, -50%)
|
||||
|
||||
&__ticks
|
||||
opacity: 0
|
||||
border-style: solid
|
||||
transition: .3s $transition.swing
|
||||
|
||||
> span
|
||||
position: absolute
|
||||
top: 8px
|
||||
transform: translateX(-50%)
|
||||
white-space: nowrap
|
||||
user-select: none
|
||||
|
||||
&:first-child > span
|
||||
transform: translateX(0)
|
||||
|
||||
&:last-child > span
|
||||
transform: translateX(-100%)
|
||||
|
||||
&:not(.v-input--is-dirty)
|
||||
.v-slider__ticks:first-child
|
||||
border-color: transparent
|
||||
|
||||
&__thumb-container
|
||||
position: absolute
|
||||
top: 50%
|
||||
transition: .3s $transition.swing
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
color: inherit
|
||||
border-radius: 50%
|
||||
background: currentColor
|
||||
height: 32px
|
||||
left: -16px
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: -16px
|
||||
transform: scale(0.2)
|
||||
transition: $primary-transition
|
||||
width: 32px
|
||||
will-change: transform, opacity
|
||||
|
||||
&__thumb
|
||||
width: 24px
|
||||
height: 24px
|
||||
left: -12px
|
||||
top: 50%
|
||||
border-radius: 50%
|
||||
background: transparent
|
||||
transition: .3s $transition.swing
|
||||
transform: translateY(-50%) scale(.6)
|
||||
user-select: none
|
||||
|
||||
/** Thumb Label */
|
||||
.v-slider
|
||||
&--is-active
|
||||
.v-slider__thumb-container--is-active
|
||||
.v-slider__thumb
|
||||
transform: translateY(-50%) scale(1)
|
||||
|
||||
&.v-slider__thumb-container--show-label
|
||||
.v-slider__thumb
|
||||
transform: translateY(-50%) scale(0)
|
||||
|
||||
.v-slider__ticks-container
|
||||
.v-slider__ticks
|
||||
opacity: 1
|
||||
|
||||
&__thumb-label__container
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
transition: .3s $transition.fast-in-fast-out
|
||||
|
||||
&__thumb-label
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
font-size: 12px
|
||||
color: #fff
|
||||
width: 32px
|
||||
height: 32px
|
||||
border-radius: 50% 50% 0
|
||||
position: absolute
|
||||
left: 0
|
||||
bottom: 100%
|
||||
// Needed for IE11 which does not
|
||||
// process translateY(calc(-20% - 12px))
|
||||
// or translate(-50%, calc(-20% - 12px))
|
||||
transform: translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)
|
||||
user-select: none
|
||||
transition: .3s $transition.fast-in-fast-out
|
||||
|
||||
> *
|
||||
transform: rotate(-45deg)
|
||||
|
||||
&__track,
|
||||
&__track-fill
|
||||
position: absolute
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-small-dialog($material)
|
||||
a
|
||||
color: rgba($material.fg-color, $material.primary-text-percent)
|
||||
|
||||
theme(v-small-dialog, "v-small-dialog")
|
||||
theme(@($material) { background: $material.cards }, "v-small-dialog__content")
|
||||
theme(@($material) { background: $material.cards }, "v-small-dialog__actions")
|
||||
|
||||
.v-small-dialog
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
&__content
|
||||
padding: 0 24px
|
||||
|
||||
&__actions
|
||||
text-align: right
|
||||
white-space: pre
|
||||
|
||||
a
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
height: 100%
|
||||
text-decoration: none
|
||||
|
||||
> *
|
||||
width: 100%
|
||||
|
||||
.v-menu__activator
|
||||
height: 100%
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
v-snack-rtl()
|
||||
&__content
|
||||
.v-btn
|
||||
margin: 0 24px 0 0
|
||||
|
||||
rtl(v-snack-rtl, "v-snack")
|
||||
|
||||
.v-snack
|
||||
position: fixed
|
||||
display: flex
|
||||
align-items: center
|
||||
color: $snackbar-color
|
||||
pointer-events: none
|
||||
z-index: 1000
|
||||
font-size: 14px
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&--top
|
||||
top: 0
|
||||
|
||||
&--bottom
|
||||
bottom: 0
|
||||
|
||||
&__wrapper
|
||||
display: flex
|
||||
align-items: center
|
||||
background-color: $snackbar-background-color
|
||||
pointer-events: auto
|
||||
width: 100%
|
||||
elevation(6)
|
||||
|
||||
&__content
|
||||
width: 100%
|
||||
height: 48px
|
||||
padding: 14px 24px
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
overflow: hidden
|
||||
|
||||
.v-btn
|
||||
color: $snackbar-color
|
||||
flex: 0 0 auto
|
||||
padding: 8px
|
||||
margin: 0 0 0 24px
|
||||
height: auto
|
||||
min-width: auto
|
||||
width: auto
|
||||
|
||||
&__content
|
||||
margin: -2px
|
||||
|
||||
&::before
|
||||
display: none
|
||||
|
||||
&--multi-line &__content
|
||||
height: 80px
|
||||
padding: 24px
|
||||
|
||||
&--vertical &__content
|
||||
height: 112px
|
||||
padding: 24px 24px 14px
|
||||
flex-direction: column
|
||||
// https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11
|
||||
align-items: stretch
|
||||
|
||||
.v-btn
|
||||
&.v-btn //specificity
|
||||
justify-content: flex-end
|
||||
padding: 0
|
||||
margin-left: 0
|
||||
margin-top: 24px
|
||||
|
||||
&__content
|
||||
flex: 0 0 auto
|
||||
margin: 0
|
||||
|
||||
&--auto-height &__content
|
||||
height: auto
|
||||
|
||||
v-snack-sm-and-up-rtl()
|
||||
@media $display-breakpoints.sm-and-up
|
||||
&__content .v-btn:first-of-type
|
||||
margin-left: 0
|
||||
margin-right: 42px
|
||||
|
||||
rtl(v-snack-sm-and-up-rtl, "v-snack")
|
||||
|
||||
@media $display-breakpoints.sm-and-up
|
||||
.v-snack
|
||||
&__wrapper
|
||||
width: auto
|
||||
max-width: 568px
|
||||
min-width: 288px
|
||||
margin: 0 auto
|
||||
border-radius: 2px
|
||||
|
||||
.v-snack--left &
|
||||
margin-left: 0
|
||||
.v-snack--right &
|
||||
margin-right: 0
|
||||
|
||||
&--left, &--right
|
||||
margin: 0 $snackbar-corner-offset
|
||||
&^[0]--top
|
||||
transform: translateY($snackbar-corner-offset)
|
||||
&^[0]--bottom
|
||||
transform: translateY(0 - $snackbar-corner-offset)
|
||||
|
||||
&__content .v-btn:first-of-type
|
||||
margin-left: 42px
|
||||
|
||||
.v-snack-transition
|
||||
&-enter-active,
|
||||
&-leave-active
|
||||
transition: transform .4s $transition.swing
|
||||
.v-snack__content
|
||||
transition: opacity .3s linear .1s
|
||||
|
||||
&-enter
|
||||
.v-snack__content
|
||||
opacity: 0
|
||||
|
||||
&-enter-to,
|
||||
&-leave
|
||||
.v-snack__content
|
||||
opacity: 1
|
||||
|
||||
&-enter,
|
||||
&-leave-to
|
||||
&.v-snack.v-snack--top
|
||||
// Extra 8px to hide the bottom shadow
|
||||
transform: translateY(calc(-100% - 8px))
|
||||
&.v-snack.v-snack--bottom
|
||||
transform: translateY(100%)
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-speed-dial
|
||||
position: relative
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
|
||||
&--fixed,
|
||||
&--absolute
|
||||
z-index: 4
|
||||
|
||||
& > .v-btn--floating
|
||||
margin: 0
|
||||
|
||||
&--top
|
||||
&:not(.v-speed-dial--absolute)
|
||||
top: $grid-gutters.lg
|
||||
|
||||
&.v-speed-dial--absolute
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
|
||||
&--bottom
|
||||
&:not(.v-speed-dial--absolute)
|
||||
bottom: $grid-gutters.lg
|
||||
|
||||
&.v-speed-dial--absolute
|
||||
bottom: 50%
|
||||
transform: translateY(50%)
|
||||
|
||||
&--left
|
||||
left: $grid-gutters.lg
|
||||
|
||||
&--right
|
||||
right: $grid-gutters.lg
|
||||
|
||||
&--direction
|
||||
&-left,
|
||||
&-right
|
||||
.v-speed-dial__list
|
||||
height: 100%
|
||||
top: 0
|
||||
|
||||
&-top,
|
||||
&-bottom
|
||||
.v-speed-dial__list
|
||||
left: 0
|
||||
width: 100%
|
||||
|
||||
&-top
|
||||
.v-speed-dial__list
|
||||
flex-direction: column-reverse
|
||||
bottom: 100%
|
||||
|
||||
&-right
|
||||
.v-speed-dial__list
|
||||
flex-direction: row
|
||||
left: 100%
|
||||
|
||||
&-bottom
|
||||
.v-speed-dial__list
|
||||
flex-direction: column
|
||||
top: 100%
|
||||
|
||||
&-left
|
||||
.v-speed-dial__list
|
||||
flex-direction: row-reverse
|
||||
right: 100%
|
||||
|
||||
/** Elements */
|
||||
.v-speed-dial__list
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
position: absolute
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-stepper($material)
|
||||
background: $material.bg-color
|
||||
|
||||
.v-stepper__step
|
||||
&:not(.v-stepper__step--active):not(.v-stepper__step--complete):not(.v-stepper__step--error)
|
||||
.v-stepper__step__step
|
||||
background: rgba($material.fg-color, $material.disabledORhints-text-percent)
|
||||
|
||||
&__step
|
||||
color: $material.stepper.active
|
||||
|
||||
.v-icon
|
||||
color: $material.stepper.active
|
||||
|
||||
.v-stepper__header
|
||||
.v-divider
|
||||
border-color: rgba($material.fg-color, $material.divider-percent)
|
||||
|
||||
.v-stepper__step
|
||||
&--active
|
||||
.v-stepper__label
|
||||
text-shadow: 0px 0px 0px rgba($material.fg-color, 1)
|
||||
|
||||
&--editable:hover
|
||||
background: rgba($material.fg-color, .06)
|
||||
|
||||
.v-stepper__label
|
||||
text-shadow: 0px 0px 0px rgba($material.fg-color, 1)
|
||||
|
||||
&--complete
|
||||
.v-stepper__label
|
||||
color: $material.stepper.completed
|
||||
|
||||
&--inactive
|
||||
&.v-stepper__step--editable:not(.v-stepper__step--error)
|
||||
&:hover
|
||||
.v-stepper__step__step
|
||||
background: $material.stepper.hover
|
||||
|
||||
.v-stepper__label
|
||||
color: rgba($material.fg-color, $material.disabledORhints-text-percent)
|
||||
|
||||
small
|
||||
color: rgba($material.fg-color, $material.secondary-text-percent)
|
||||
|
||||
&--non-linear
|
||||
.v-stepper__step:not(.v-stepper__step--complete):not(.v-stepper__step--error)
|
||||
.v-stepper__label
|
||||
color: rgba($material.fg-color, $material.secondary-text-percent)
|
||||
|
||||
&--vertical
|
||||
.v-stepper__content:not(:last-child)
|
||||
border-left: 1px solid rgba($material.fg-color, $material.divider-percent)
|
||||
|
||||
v-stepper-rtl()
|
||||
.v-stepper__step__step
|
||||
margin-right: 0
|
||||
margin-left: 12px
|
||||
|
||||
theme(v-stepper, "v-stepper")
|
||||
rtl(v-stepper-rtl, "v-stepper")
|
||||
|
||||
.v-stepper
|
||||
overflow: hidden
|
||||
position: relative
|
||||
elevation(2)
|
||||
|
||||
.v-stepper
|
||||
&__header
|
||||
height: 72px
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
elevation(2)
|
||||
|
||||
.v-divider
|
||||
align-self: center
|
||||
margin: 0 -16px
|
||||
|
||||
.v-stepper
|
||||
&__items
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
||||
.v-stepper
|
||||
&__step__step
|
||||
align-items: center
|
||||
border-radius: 50%
|
||||
display: inline-flex
|
||||
font-size: 12px
|
||||
justify-content: center
|
||||
height: 24px
|
||||
margin-right: 8px
|
||||
min-width: 24px
|
||||
width: 24px
|
||||
transition: .3s $transition.fast-in-fast-out
|
||||
|
||||
.v-icon
|
||||
font-size: 18px
|
||||
|
||||
.v-stepper
|
||||
&__step
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-direction: row
|
||||
padding: 24px
|
||||
position: relative
|
||||
|
||||
&--active
|
||||
.v-stepper__label
|
||||
transition: .3s $transition.ease-in-out
|
||||
|
||||
&--editable
|
||||
cursor: pointer
|
||||
|
||||
&.v-stepper__step--error
|
||||
.v-stepper__step__step
|
||||
background: transparent
|
||||
color: inherit
|
||||
|
||||
.v-icon
|
||||
font-size: 24px
|
||||
color: inherit
|
||||
|
||||
.v-stepper__label
|
||||
color: inherit
|
||||
text-shadow: none
|
||||
font-weight: 500
|
||||
|
||||
small
|
||||
color: inherit
|
||||
|
||||
.v-stepper
|
||||
&__label
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
flex-direction: column
|
||||
text-align: left
|
||||
|
||||
small
|
||||
font-size: 12px
|
||||
font-weight: 300
|
||||
text-shadow: none
|
||||
|
||||
.v-stepper
|
||||
&__wrapper
|
||||
overflow: hidden
|
||||
transition: none
|
||||
|
||||
.v-stepper
|
||||
&__content
|
||||
top: 0
|
||||
padding: 24px 24px 16px 24px
|
||||
flex: 1 0 auto
|
||||
// Chrome has an issue with overflow hidden for rendering
|
||||
// Originally used translateZ but this messes up fixed
|
||||
// elements within the stepper
|
||||
// Fix for #512 and #620
|
||||
// overflow: hidden
|
||||
width: 100%
|
||||
|
||||
> .v-btn
|
||||
margin: 24px 8px 8px 0
|
||||
|
||||
&--is-booted
|
||||
.v-stepper__content, .v-stepper__wrapper
|
||||
transition: .3s $transition.swing
|
||||
|
||||
.v-stepper
|
||||
&--vertical
|
||||
padding-bottom: 36px
|
||||
|
||||
.v-stepper__content
|
||||
margin: -8px -36px -16px 36px
|
||||
padding: 16px 60px 16px 23px
|
||||
width: auto
|
||||
|
||||
.v-stepper__step
|
||||
padding: 24px 24px 16px
|
||||
|
||||
.v-stepper__step__step
|
||||
margin-right: 12px
|
||||
|
||||
&--alt-labels
|
||||
.v-stepper__header
|
||||
height: auto
|
||||
|
||||
.v-divider
|
||||
margin: 35px -67px 0
|
||||
align-self: flex-start
|
||||
|
||||
.v-stepper__step
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
flex-basis: 175px
|
||||
|
||||
small
|
||||
align-self: center
|
||||
|
||||
.v-stepper__step__step
|
||||
margin-right: 0
|
||||
margin-bottom: 11px
|
||||
|
||||
@media $display-breakpoints.sm-and-down
|
||||
.v-stepper:not(.v-stepper--vertical)
|
||||
.v-stepper__label
|
||||
display: none
|
||||
|
||||
.v-stepper__step__step
|
||||
margin-right: 0
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-subheader($material)
|
||||
color: $material.text.secondary
|
||||
|
||||
theme(v-subheader, "v-subheader")
|
||||
|
||||
.v-subheader
|
||||
align-items: center
|
||||
display: flex
|
||||
height: $list-item-single-height
|
||||
font-size: $headings.body-2.size
|
||||
font-weight: $headings.body-2.weight
|
||||
padding: 0 $list-right-padding 0 $list-left-padding
|
||||
|
||||
&--inset
|
||||
margin-left: $subheader-inset-margin
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/** Theme */
|
||||
v-input--switch($material)
|
||||
&__thumb
|
||||
color: $material.selection-controls.thumb.inactive
|
||||
|
||||
&__track
|
||||
color: $material.selection-controls.track.inactive
|
||||
|
||||
&.v-input--is-disabled
|
||||
.v-input--switch__thumb
|
||||
color: $material.selection-controls.thumb.disabled !important
|
||||
|
||||
.v-input--switch__track
|
||||
color: $material.selection-controls.track.disabled !important
|
||||
|
||||
v-input--switch-rtl()
|
||||
.v-input--selection-controls__ripple
|
||||
left: auto
|
||||
right: -14px
|
||||
|
||||
&.v-input--is-dirty
|
||||
.v-input--selection-controls__ripple,
|
||||
.v-input--switch__thumb
|
||||
transform: translate(-16px, 0)
|
||||
|
||||
theme(v-input--switch, "v-input--switch")
|
||||
rtl(v-input--switch-rtl, "v-input--switch")
|
||||
|
||||
.v-input--switch
|
||||
&__track,
|
||||
&__thumb
|
||||
background-color: currentColor
|
||||
pointer-events: none
|
||||
transition: inherit
|
||||
|
||||
&__track
|
||||
border-radius: 8px
|
||||
height: 14px
|
||||
left: 2px
|
||||
opacity: .6
|
||||
position: absolute
|
||||
right: 2px
|
||||
top: calc(50% - 7px)
|
||||
|
||||
&__thumb
|
||||
border-radius: 50%
|
||||
top: calc(50% - 10px)
|
||||
height: 20px
|
||||
position: relative
|
||||
width: 20px
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
elevation(4)
|
||||
|
||||
.v-input--selection-controls__input
|
||||
width: 38px
|
||||
|
||||
.v-input--selection-controls__ripple
|
||||
left: -14px
|
||||
top: calc(50% - 24px)
|
||||
|
||||
&.v-input--is-dirty
|
||||
.v-input--selection-controls__ripple,
|
||||
.v-input--switch__thumb
|
||||
transform: translate(16px, 0)
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-system-bar($material)
|
||||
background-color: $material.status-bar.regular
|
||||
color: $material.text.secondary
|
||||
|
||||
.v-icon
|
||||
color: $material.text.secondary
|
||||
|
||||
&--lights-out
|
||||
background-color: $material.status-bar.lights-out !important
|
||||
|
||||
theme(v-system-bar, "v-system-bar")
|
||||
|
||||
.v-system-bar
|
||||
align-items: center
|
||||
display: flex
|
||||
font-size: $headings.body-2.size
|
||||
font-weight: $headings.body-2.weight
|
||||
padding: 0 8px
|
||||
|
||||
.v-icon
|
||||
font-size: $headings.subheading.size
|
||||
|
||||
&--fixed, &--absolute
|
||||
left: 0
|
||||
top: 0
|
||||
width: 100%
|
||||
z-index: 3
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&--status
|
||||
.v-icon
|
||||
margin-right: 4px
|
||||
|
||||
&--window
|
||||
.v-icon
|
||||
font-size: $headings.h6.size
|
||||
margin-right: 8px
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-table($material)
|
||||
background-color: $material.cards
|
||||
color: $material.text.primary
|
||||
|
||||
thead
|
||||
tr
|
||||
&:first-child
|
||||
border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
|
||||
|
||||
th
|
||||
color: rgba($material.text-color, $material.secondary-text-percent)
|
||||
|
||||
tbody
|
||||
tr
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
|
||||
|
||||
&[active]
|
||||
background: $material.table.active
|
||||
|
||||
&:hover:not(.v-datatable__expand-row)
|
||||
background: $material.table.hover
|
||||
|
||||
tfoot
|
||||
tr
|
||||
border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
|
||||
|
||||
theme(v-table, "v-table")
|
||||
|
||||
.v-table
|
||||
&__overflow
|
||||
width: 100%
|
||||
overflow-x: auto
|
||||
overflow-y: hidden
|
||||
|
||||
table.v-table
|
||||
border-radius: 2px
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
|
||||
thead, tbody
|
||||
td, th
|
||||
&:not(:nth-child(1)), &:first-child
|
||||
padding: 0 24px
|
||||
|
||||
thead
|
||||
tr
|
||||
height: 56px
|
||||
|
||||
th
|
||||
font-weight: 500
|
||||
font-size: 12px
|
||||
transition: .3s $transition.swing
|
||||
white-space: nowrap
|
||||
user-select: none
|
||||
|
||||
&.sortable
|
||||
pointer-events: auto
|
||||
|
||||
> div
|
||||
width: 100%
|
||||
|
||||
tbody
|
||||
tr
|
||||
transition: background $primary-transition
|
||||
will-change: background
|
||||
|
||||
td, th
|
||||
height: 48px
|
||||
|
||||
td
|
||||
font-weight: 400
|
||||
font-size: 13px
|
||||
|
||||
.input-group--selection-controls
|
||||
padding: 0
|
||||
|
||||
.input-group__details
|
||||
display: none
|
||||
|
||||
&.checkbox
|
||||
.v-icon
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
.input-group--selection-controls__ripple
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
tfoot
|
||||
tr
|
||||
height: 48px
|
||||
td
|
||||
padding: 0 24px
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-tabs__bar($material)
|
||||
background-color: $material.cards
|
||||
|
||||
.v-tabs__div
|
||||
color: $material.tabs.active
|
||||
|
||||
.v-tabs__item--disabled
|
||||
color: $material.buttons.disabled
|
||||
|
||||
theme(v-tabs__bar, "v-tabs__bar")
|
||||
|
||||
.v-tabs
|
||||
position: relative
|
||||
|
||||
.v-tabs__bar
|
||||
position: relative
|
||||
border-radius: inherit
|
||||
|
||||
.v-tabs__icon
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: inline-flex
|
||||
height: 100%
|
||||
position: absolute
|
||||
top: 0
|
||||
user-select: none
|
||||
width: 32px
|
||||
|
||||
&--prev
|
||||
left: 4px
|
||||
|
||||
&--next
|
||||
right: 4px
|
||||
|
||||
.v-tabs__wrapper
|
||||
overflow: hidden
|
||||
contain: content
|
||||
display: flex
|
||||
|
||||
&--show-arrows
|
||||
margin-left: 40px
|
||||
margin-right: 40px
|
||||
|
||||
.v-tabs__container--align-with-title
|
||||
padding-left: 16px
|
||||
|
||||
@media $display-breakpoints.xs-only
|
||||
padding-left: 24px
|
||||
|
||||
.v-tabs__container
|
||||
flex: 1 0 auto
|
||||
display: flex
|
||||
height: 48px
|
||||
list-style-type: none
|
||||
transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1)
|
||||
white-space: nowrap
|
||||
position: relative
|
||||
|
||||
&--overflow
|
||||
.v-tabs__div
|
||||
flex: 1 0 auto
|
||||
|
||||
&--grow
|
||||
.v-tabs__div
|
||||
flex: 1 0 auto
|
||||
max-width: none
|
||||
|
||||
&--icons-and-text
|
||||
height: 72px
|
||||
|
||||
&--align-with-title
|
||||
padding-left: 56px
|
||||
|
||||
&--fixed-tabs,
|
||||
&--icons-and-text
|
||||
.v-tabs__div
|
||||
min-width: 72px
|
||||
|
||||
@media $display-breakpoints.sm-and-up
|
||||
min-width: 160px
|
||||
|
||||
&--fixed-tabs
|
||||
.v-tabs__div
|
||||
@media $display-breakpoints.xs-only
|
||||
flex: 1 0 auto
|
||||
|
||||
&--centered,
|
||||
&--fixed-tabs,
|
||||
&--right
|
||||
> .v-tabs__div:first-child
|
||||
margin-left: auto
|
||||
|
||||
.v-tabs__slider-wrapper + .v-tabs__div
|
||||
margin-left: auto
|
||||
|
||||
&--centered,
|
||||
&--fixed-tabs
|
||||
> .v-tabs__div:last-child
|
||||
margin-right: auto
|
||||
|
||||
&--icons-and-text
|
||||
.v-tabs__item
|
||||
flex-direction: column-reverse
|
||||
|
||||
.v-icon
|
||||
margin-bottom: 6px
|
||||
|
||||
.v-tabs__div
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
flex: 0 1 auto
|
||||
font-size: 14px
|
||||
font-weight: 500
|
||||
line-height: normal
|
||||
height: inherit
|
||||
max-width: 264px
|
||||
text-align: center
|
||||
text-transform: $tab-text-transform
|
||||
vertical-align: middle
|
||||
|
||||
.v-tabs__item
|
||||
align-items: center
|
||||
color: inherit
|
||||
display: flex
|
||||
flex: 1 1 auto
|
||||
height: 100%
|
||||
justify-content: center
|
||||
max-width: inherit
|
||||
padding: 6px 12px
|
||||
text-decoration: none
|
||||
transition: $primary-transition
|
||||
user-select: none
|
||||
white-space: normal
|
||||
|
||||
&:not(.v-tabs__item--active)
|
||||
opacity: .7
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
|
||||
.v-tabs__slider
|
||||
height: 2px
|
||||
width: 100%
|
||||
|
||||
&-wrapper
|
||||
bottom: 0
|
||||
margin: 0 !important
|
||||
position: absolute
|
||||
transition: $primary-transition
|
||||
+341
@@ -0,0 +1,341 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-text-field($material)
|
||||
& > .v-input__control > .v-input__slot:before
|
||||
border-color: $material.input-bottom-line
|
||||
|
||||
&:not(.v-input--has-state) > .v-input__control > .v-input__slot:hover:before
|
||||
border-color: $material.text.primary
|
||||
|
||||
&.v-input--is-disabled > .v-input__control > .v-input__slot:before
|
||||
border-image: repeating-linear-gradient(
|
||||
to right,
|
||||
$material.text.disabled 0px,
|
||||
$material.text.disabled 2px,
|
||||
transparent 2px,
|
||||
transparent 4px
|
||||
) 1 repeat
|
||||
|
||||
.v-text-field__prefix,
|
||||
.v-text-field__suffix
|
||||
color: $material.text.disabled
|
||||
|
||||
&__prefix,
|
||||
&__suffix
|
||||
color: $material.text.secondary
|
||||
|
||||
&--solo > .v-input__control > .v-input__slot
|
||||
border-radius: 2px
|
||||
background: $material.cards
|
||||
|
||||
&--solo-inverted.v-text-field--solo
|
||||
& > .v-input__control > .v-input__slot
|
||||
background: rgba($material.inputs.solo-inverted)
|
||||
|
||||
&.v-input--is-focused > .v-input__control > .v-input__slot
|
||||
background: rgba($material.inputs.solo-inverted-focused)
|
||||
|
||||
.v-label,
|
||||
input
|
||||
color: $material.inputs.solo-inverted-focused-text
|
||||
|
||||
&--box
|
||||
& > .v-input__control > .v-input__slot
|
||||
background: $material.text-fields.box
|
||||
|
||||
.v-text-field__prefix
|
||||
max-height: 32px
|
||||
margin-top: 22px
|
||||
|
||||
&.v-input--is-dirty,
|
||||
&.v-input--is-focused,
|
||||
&.v-text-field--placeholder
|
||||
.v-text-field__prefix
|
||||
margin-top: 22px
|
||||
transition: $primary-transition
|
||||
|
||||
&:not(.v-input--is-focused) > .v-input__control > .v-input__slot:hover
|
||||
background: $material.text-fields.box-hover
|
||||
|
||||
&--outline
|
||||
& > .v-input__control > .v-input__slot
|
||||
border: 2px solid $material.text.secondary
|
||||
|
||||
&:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot:hover
|
||||
border: 2px solid $material.text.primary
|
||||
|
||||
v-text-field-rtl()
|
||||
.v-label
|
||||
transform-origin: top right
|
||||
|
||||
.v-counter
|
||||
margin-left: 0
|
||||
margin-right: 8px
|
||||
|
||||
&--enclosed
|
||||
.v-input__append-outer
|
||||
margin-left: 0
|
||||
margin-right: 16px
|
||||
|
||||
.v-input__prepend-outer
|
||||
margin-left: 16px
|
||||
margin-right: 0
|
||||
|
||||
&--reverse
|
||||
input
|
||||
text-align: left
|
||||
|
||||
.v-label
|
||||
transform-origin: top left
|
||||
|
||||
&__prefix
|
||||
text-align: left
|
||||
padding-right: 0
|
||||
padding-left: 4px
|
||||
|
||||
&__suffix
|
||||
padding-left: 0
|
||||
padding-right: 4px
|
||||
|
||||
&--reverse
|
||||
.v-text-field__prefix
|
||||
text-align: right
|
||||
padding-left: 0
|
||||
padding-right: 4px
|
||||
|
||||
.v-text-field__suffix
|
||||
padding-left: 0
|
||||
padding-right: 4px
|
||||
|
||||
theme(v-text-field, "v-text-field")
|
||||
rtl(v-text-field-rtl, "v-text-field")
|
||||
|
||||
.v-text-field
|
||||
padding-top: $text-field-active-label-height
|
||||
margin-top: $input-top-spacing - $text-field-active-label-height
|
||||
|
||||
input
|
||||
flex: 1 1 auto
|
||||
line-height: 20px
|
||||
padding: 8px 0 8px
|
||||
max-width: 100%
|
||||
min-width: 0px
|
||||
width: 100%
|
||||
|
||||
.v-input__prepend-inner,
|
||||
.v-input__append-inner
|
||||
align-self: flex-start
|
||||
display: inline-flex
|
||||
margin-top: 4px
|
||||
line-height: 1
|
||||
user-select: none
|
||||
|
||||
.v-input__prepend-inner
|
||||
margin-right: auto
|
||||
padding-right: 4px
|
||||
|
||||
.v-input__append-inner
|
||||
margin-left: auto
|
||||
padding-left: 4px
|
||||
|
||||
.v-counter
|
||||
margin-left: 8px
|
||||
white-space: nowrap
|
||||
|
||||
.v-label
|
||||
max-width: 90%
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
top: 6px // equal to the margin top of icons
|
||||
transform-origin: top left
|
||||
white-space: nowrap
|
||||
pointer-events: none
|
||||
|
||||
&--active
|
||||
max-width: 133%
|
||||
transform: translateY(-18px) scale(.75)
|
||||
|
||||
& > .v-input__control > .v-input__slot
|
||||
cursor: text
|
||||
transition: background $primary-transition
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
bottom: -1px // Needed for browser autocomplete styles
|
||||
content: ''
|
||||
left: 0
|
||||
position: absolute
|
||||
transition: $primary-transition
|
||||
width: 100%
|
||||
|
||||
&:before
|
||||
border-style: solid
|
||||
border-width: thin 0 0 0
|
||||
|
||||
&:after
|
||||
border-color: currentColor
|
||||
border-style: solid
|
||||
border-width: thin 0 thin 0
|
||||
transform: scaleX(0)
|
||||
|
||||
&__details
|
||||
display: flex
|
||||
flex: 1 0 auto
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
|
||||
&__prefix,
|
||||
&__suffix
|
||||
align-self: center
|
||||
cursor: default
|
||||
|
||||
&__prefix
|
||||
text-align: right
|
||||
padding-right: 4px
|
||||
|
||||
&__suffix
|
||||
padding-left: 4px
|
||||
white-space: nowrap
|
||||
|
||||
&--reverse
|
||||
.v-text-field__prefix
|
||||
text-align: left
|
||||
padding-right: 0
|
||||
padding-left: 4px
|
||||
|
||||
.v-text-field__suffix
|
||||
padding-left: 0
|
||||
padding-right: 4px
|
||||
|
||||
& > .v-input__control > .v-input__slot > .v-text-field__slot
|
||||
display: flex
|
||||
flex: 1 1 auto
|
||||
position: relative
|
||||
|
||||
&--box,
|
||||
&--full-width,
|
||||
&--outline
|
||||
position: relative
|
||||
|
||||
& > .v-input__control > .v-input__slot
|
||||
align-items: stretch
|
||||
min-height: 56px
|
||||
|
||||
input
|
||||
margin-top: 22px
|
||||
|
||||
&.v-text-field--single-line
|
||||
input
|
||||
margin-top: 12px
|
||||
|
||||
.v-label
|
||||
top: 18px
|
||||
|
||||
&--active
|
||||
transform: translateY(-6px) scale(.75)
|
||||
|
||||
&--box > .v-input__control > .v-input__slot
|
||||
border-top-left-radius: 4px
|
||||
border-top-right-radius: 4px
|
||||
|
||||
&:before
|
||||
border-style: solid
|
||||
border-width: thin 0 thin 0
|
||||
|
||||
&.v-text-field--enclosed
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
&:not(.v-text-field--box)
|
||||
.v-progress-linear__background
|
||||
display: none
|
||||
|
||||
.v-input__prepend-outer,
|
||||
.v-input__prepend-inner,
|
||||
.v-input__append-inner,
|
||||
.v-input__append-outer
|
||||
margin-top: 16px
|
||||
|
||||
.v-text-field__details,
|
||||
& > .v-input__control > .v-input__slot
|
||||
padding: 0 12px
|
||||
|
||||
.v-text-field__details
|
||||
margin-bottom: 8px
|
||||
|
||||
&--reverse
|
||||
input
|
||||
text-align: right
|
||||
|
||||
.v-label
|
||||
transform-origin: top right
|
||||
|
||||
& > .v-input__control > .v-input__slot,
|
||||
.v-text-field__slot
|
||||
flex-direction: row-reverse
|
||||
|
||||
&--solo,
|
||||
&--outline,
|
||||
&--full-width
|
||||
& > .v-input__control > .v-input__slot
|
||||
&:before,
|
||||
&:after
|
||||
display: none
|
||||
|
||||
&--outline
|
||||
margin-bottom: 16px
|
||||
transition: border $primary-transition
|
||||
|
||||
& > .v-input__control > .v-input__slot
|
||||
background: transparent !important
|
||||
border-radius: 4px
|
||||
|
||||
.v-text-field__prefix
|
||||
margin-top: 22px
|
||||
max-height: 32px
|
||||
|
||||
.v-input__prepend-outer,
|
||||
.v-input__append-outer
|
||||
margin-top: 18px // 2px for border
|
||||
|
||||
&.v-input--is-dirty,
|
||||
&.v-input--is-focused,
|
||||
&.v-text-field--placeholder
|
||||
.v-text-field__prefix
|
||||
margin-top: 22px
|
||||
transition: $primary-transition
|
||||
|
||||
&.v-input--is-focused, &.v-input--has-state
|
||||
& > .v-input__control > .v-input__slot
|
||||
border: 2px solid currentColor
|
||||
transition: border $primary-transition
|
||||
|
||||
&.v-text-field--solo
|
||||
.v-label
|
||||
top: calc(50% - 10px)
|
||||
|
||||
.v-input__control
|
||||
min-height: 48px
|
||||
padding: 0
|
||||
|
||||
&:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot
|
||||
elevation(2)
|
||||
|
||||
.v-text-field__slot
|
||||
align-items: center
|
||||
|
||||
.v-input__append-inner,
|
||||
.v-input__prepend-inner
|
||||
align-self: center
|
||||
margin-top: 0
|
||||
|
||||
.v-input__prepend-outer,
|
||||
.v-input__append-outer
|
||||
margin-top: 12px
|
||||
|
||||
&.v-input--is-focused > .v-input__control > .v-input__slot:after
|
||||
transform: scaleX(1)
|
||||
|
||||
&.v-input--has-state > .v-input__control > .v-input__slot:before
|
||||
border-color: currentColor
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-textarea($material)
|
||||
&.v-text-field--solo-inverted.v-text-field--solo
|
||||
&.v-input--is-focused
|
||||
textarea
|
||||
color: $material.inputs.solo-inverted-focused-text
|
||||
|
||||
theme(v-textarea, "v-textarea")
|
||||
|
||||
v-textarea-rtl()
|
||||
&.v-text-field--enclosed
|
||||
.v-text-field__slot
|
||||
margin-right: 0
|
||||
margin-left: -12px
|
||||
|
||||
textarea
|
||||
padding-right: 0
|
||||
padding-left: 12px
|
||||
|
||||
rtl(v-textarea-rtl, 'v-textarea')
|
||||
|
||||
.v-textarea
|
||||
textarea
|
||||
flex: 1 1 auto
|
||||
line-height: 18px
|
||||
max-width: 100%
|
||||
min-height: 32px
|
||||
outline: none
|
||||
padding: 7px 0 8px
|
||||
width: 100%
|
||||
|
||||
.v-text-field__prefix
|
||||
padding-top: 4px
|
||||
align-self: start
|
||||
|
||||
&.v-text-field--full-width,
|
||||
&.v-text-field--full-width.v-text-field--single-line
|
||||
.v-text-field__slot
|
||||
textarea
|
||||
margin-top: 0
|
||||
|
||||
.v-text-field__details
|
||||
bottom: 4px
|
||||
|
||||
&.v-text-field--enclosed
|
||||
.v-text-field__slot
|
||||
margin-right: -12px
|
||||
|
||||
textarea
|
||||
padding-right: 12px
|
||||
|
||||
&.v-text-field--box,
|
||||
&.v-text-field--enclosed
|
||||
.v-text-field__prefix,
|
||||
textarea
|
||||
margin-top: 24px
|
||||
|
||||
&.v-text-field--single-line
|
||||
.v-text-field__prefix,
|
||||
textarea
|
||||
margin-top: 12px
|
||||
|
||||
.v-label
|
||||
top: 18px
|
||||
|
||||
&.v-text-field--outline
|
||||
.v-input__control
|
||||
padding-top: 0
|
||||
|
||||
&.v-text-field--solo
|
||||
align-items: flex-start
|
||||
|
||||
// Essentially revert styles
|
||||
// applied by v-text-field
|
||||
.v-input__prepend-inner,
|
||||
.v-input__prepend-outer,
|
||||
.v-input__append-inner,
|
||||
.v-input__append-outer
|
||||
align-self: flex-start
|
||||
margin-top: 16px
|
||||
|
||||
&--auto-grow
|
||||
textarea
|
||||
overflow: hidden
|
||||
|
||||
&--no-resize
|
||||
textarea
|
||||
resize: none
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/** Themes */
|
||||
v-time-picker-clock($material)
|
||||
background: $material.picker.clock
|
||||
|
||||
.v-time-picker-clock__item--disabled
|
||||
color: $material.buttons.disabled
|
||||
|
||||
&.v-time-picker-clock__item--active
|
||||
color: $material-dark.buttons.disabled
|
||||
|
||||
&--indeterminate
|
||||
.v-time-picker-clock__hand
|
||||
background-color: $material.picker.indeterminateTime
|
||||
|
||||
&:after
|
||||
color: $material.picker.indeterminateTime
|
||||
|
||||
.v-time-picker-clock__item--active
|
||||
background-color: $material.picker.indeterminateTime
|
||||
|
||||
theme(v-time-picker-clock, "v-time-picker-clock")
|
||||
|
||||
.v-time-picker-clock
|
||||
border-radius: 100%
|
||||
position: relative
|
||||
transition: $primary-transition
|
||||
user-select: none
|
||||
width: 100%
|
||||
padding-top: 100%
|
||||
|
||||
&__container
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
padding: 10px
|
||||
|
||||
&__hand
|
||||
height: calc(50% - 4px)
|
||||
width: 2px
|
||||
bottom: 50%
|
||||
left: calc(50% - 1px)
|
||||
transform-origin: center bottom
|
||||
position: absolute
|
||||
will-change: transform
|
||||
z-index: 1
|
||||
|
||||
&:before
|
||||
background: transparent
|
||||
border-width: 2px
|
||||
border-style: solid
|
||||
border-color: inherit
|
||||
border-radius: 100%
|
||||
width: 10px
|
||||
height: 10px
|
||||
content: ''
|
||||
position: absolute
|
||||
top: -4px
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
height: 8px
|
||||
width: 8px
|
||||
top: 100%
|
||||
left: 50%
|
||||
border-radius: 100%
|
||||
border-style: solid
|
||||
border-color: inherit
|
||||
background-color: inherit
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
&--inner:after
|
||||
height: 14px
|
||||
|
||||
.v-picker--full-width
|
||||
.v-time-picker-clock__container
|
||||
max-width: 290px
|
||||
|
||||
.v-time-picker-clock__inner
|
||||
position: absolute
|
||||
bottom: 27px
|
||||
left: 27px
|
||||
right: 27px
|
||||
top: 27px
|
||||
|
||||
.v-time-picker-clock__item
|
||||
align-items: center
|
||||
border-radius: 100%
|
||||
cursor: default
|
||||
display: flex
|
||||
font-size: $time-picker-number-font-size
|
||||
justify-content: center
|
||||
height: $time-picker-indicator-size
|
||||
position: absolute
|
||||
text-align: center
|
||||
width: $time-picker-indicator-size
|
||||
user-select: none
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
> span
|
||||
z-index: 1
|
||||
|
||||
&:before, &:after
|
||||
content: ''
|
||||
border-radius: 100%
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
height: 14px
|
||||
width: 14px
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
&:after, &:before
|
||||
height: $time-picker-indicator-size
|
||||
width: $time-picker-indicator-size
|
||||
|
||||
&--active
|
||||
color: #fff
|
||||
cursor: default
|
||||
z-index: 2
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-time-picker-title
|
||||
color: #fff
|
||||
display: flex
|
||||
line-height: 1
|
||||
justify-content: flex-end
|
||||
|
||||
.v-time-picker-title__time
|
||||
white-space: nowrap
|
||||
|
||||
.v-picker__title__btn,
|
||||
span
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
height: 70px
|
||||
font-size: 70px
|
||||
justify-content: center
|
||||
|
||||
.v-time-picker-title__ampm
|
||||
align-self: flex-end
|
||||
display: flex
|
||||
flex-direction: column
|
||||
font-size: 16px
|
||||
margin: 8px 0 6px 8px
|
||||
text-transform: uppercase
|
||||
|
||||
div:only-child
|
||||
flex-direction: row
|
||||
|
||||
.v-picker__title--landscape
|
||||
.v-time-picker-title
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
height: 100%
|
||||
|
||||
.v-time-picker-title__time
|
||||
text-align: right
|
||||
|
||||
.v-picker__title__btn,
|
||||
span
|
||||
height: 55px
|
||||
font-size: 55px
|
||||
|
||||
.v-time-picker-title__ampm
|
||||
margin: 16px 0 0
|
||||
align-self: initial
|
||||
text-align: center
|
||||
+185
@@ -0,0 +1,185 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
v-timeline($material)
|
||||
&:before
|
||||
background: $material.dividers
|
||||
|
||||
.v-timeline-item
|
||||
&__dot
|
||||
background: $material.cards
|
||||
|
||||
.v-card
|
||||
&:before
|
||||
border-right-color: $shadow-key-ambient-opacity
|
||||
|
||||
theme(v-timeline, "v-timeline")
|
||||
|
||||
timeline-dots($dot-size, $inner-dot-size, $inner-dot-margin)
|
||||
height: $dot-size
|
||||
left: 'calc(50% - %s)' % ($dot-size / 2)
|
||||
width: $dot-size
|
||||
|
||||
.v-timeline-item__inner-dot
|
||||
height: $inner-dot-size
|
||||
margin:$inner-dot-margin
|
||||
width: $inner-dot-size
|
||||
|
||||
.v-timeline-item
|
||||
display: flex
|
||||
flex-direction: row-reverse
|
||||
padding-bottom: 24px
|
||||
|
||||
&:nth-child(odd):not(.v-timeline-item--right), &--left
|
||||
flex-direction: row
|
||||
|
||||
.v-card:before, .v-card:after
|
||||
transform: rotate(180deg)
|
||||
left: 100%
|
||||
|
||||
.v-timeline-item__opposite
|
||||
margin-left: 96px
|
||||
text-align: left
|
||||
|
||||
.v-card:before, .v-card:after
|
||||
transform: rotate(0)
|
||||
left: -10px
|
||||
|
||||
&:nth-child(even):not(.v-timeline-item--left), &--right
|
||||
.v-card:before, .v-card:after
|
||||
right: 100%
|
||||
|
||||
.v-timeline-item__opposite
|
||||
margin-right: 96px
|
||||
text-align: right
|
||||
|
||||
.v-card:before, .v-card:after
|
||||
transform: rotate(180deg)
|
||||
right: -10px
|
||||
|
||||
&__dot,
|
||||
&__inner-dot
|
||||
border-radius: 50%
|
||||
|
||||
&__dot
|
||||
elevation(1)
|
||||
align-self: center
|
||||
position: absolute
|
||||
timeline-dots(
|
||||
$timeline-dot-regular-size,
|
||||
$timeline-inner-dot-regular-size,
|
||||
$timeline-inner-dot-regular-margin
|
||||
)
|
||||
|
||||
&--small
|
||||
timeline-dots(
|
||||
$timeline-dot-small-size,
|
||||
$timeline-inner-dot-small-size,
|
||||
$timeline-inner-dot-small-margin
|
||||
)
|
||||
|
||||
&--large
|
||||
timeline-dots(
|
||||
$timeline-dot-large-size,
|
||||
$timeline-inner-dot-large-size,
|
||||
$timeline-inner-dot-large-margin
|
||||
)
|
||||
|
||||
&__inner-dot
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
&__body
|
||||
position: relative
|
||||
height: 100%
|
||||
flex: 1 1 100%
|
||||
max-width: calc(50% - 48px)
|
||||
|
||||
.v-card
|
||||
&:before, &:after
|
||||
content: ''
|
||||
position: absolute
|
||||
border-top: $timeline-wedge-size solid transparent
|
||||
border-bottom: $timeline-wedge-size solid transparent
|
||||
border-right: $timeline-wedge-size solid black
|
||||
top: 'calc(50% - %s)' % $timeline-wedge-size
|
||||
|
||||
&:after
|
||||
border-right-color: inherit
|
||||
|
||||
&:before
|
||||
top: 'calc(50% - %s + 2px)' % $timeline-wedge-size
|
||||
|
||||
&__opposite
|
||||
flex: 1 1 auto
|
||||
align-self: center
|
||||
max-width: calc(50% - 48px)
|
||||
|
||||
&--fill-dot
|
||||
.v-timeline-item__inner-dot
|
||||
height: inherit
|
||||
margin: 0
|
||||
width: inherit
|
||||
|
||||
.v-timeline
|
||||
padding-top: 24px
|
||||
position: relative
|
||||
|
||||
&:before
|
||||
bottom: 0
|
||||
content: ''
|
||||
height: 100%
|
||||
left: calc(50% - 1px)
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 2px
|
||||
|
||||
&--align-top
|
||||
.v-timeline-item
|
||||
position: relative
|
||||
|
||||
&__dot
|
||||
top: 6px
|
||||
|
||||
&--small
|
||||
top: 12px
|
||||
|
||||
&--large
|
||||
top: 0
|
||||
|
||||
.v-card
|
||||
&:before
|
||||
top: 'calc(0% + %s + 2px)' % $timeline-wedge-size
|
||||
|
||||
&:after
|
||||
top: 'calc(0% + %s)' % $timeline-wedge-size
|
||||
|
||||
&--dense
|
||||
&:before
|
||||
left: 18px // -1 for line width
|
||||
|
||||
.v-timeline-item
|
||||
&:nth-child(odd):not(.v-timeline-item--right), &--left
|
||||
flex-direction: row-reverse
|
||||
|
||||
.v-card
|
||||
&:before, &:after
|
||||
right: initial
|
||||
left: -($timeline-wedge-size)
|
||||
transform: none
|
||||
|
||||
&__dot
|
||||
left: 0
|
||||
|
||||
&__dot--small
|
||||
left: 7px // -1 for line width
|
||||
|
||||
&__dot--large
|
||||
left: -7px
|
||||
|
||||
&__body
|
||||
max-width: calc(100% - 64px)
|
||||
|
||||
&__opposite
|
||||
display: none
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-toolbar($material)
|
||||
background-color: $material.app-bar
|
||||
color: $material.text.primary
|
||||
|
||||
v-toolbar-content($direction)
|
||||
margin-{$direction}: 0
|
||||
|
||||
&.v-btn--icon
|
||||
margin-{$direction}: -6px
|
||||
|
||||
&.v-menu .v-menu__activator,
|
||||
&.v-tooltip span
|
||||
.v-btn
|
||||
margin-{$direction}: 0
|
||||
|
||||
.v-btn--icon
|
||||
margin-{$direction}: -6px
|
||||
|
||||
v-toolbar-rtl()
|
||||
&__title
|
||||
&:not(:first-child)
|
||||
margin-left: 0
|
||||
margin-right: 20px
|
||||
|
||||
theme(v-toolbar, "v-toolbar")
|
||||
rtl(v-toolbar-rtl, "v-toolbar")
|
||||
|
||||
.v-toolbar
|
||||
bootable()
|
||||
elevation(4)
|
||||
|
||||
position: relative
|
||||
width: 100%
|
||||
will-change: padding-left, padding-right
|
||||
|
||||
// TODO: Do we even need this?
|
||||
.v-text-field--enclosed,
|
||||
.v-text-field--box
|
||||
margin: 0
|
||||
|
||||
.v-text-field__details
|
||||
display: none
|
||||
|
||||
/** Children */
|
||||
.v-toolbar
|
||||
.v-tabs
|
||||
width: 100%
|
||||
|
||||
&__title
|
||||
font-size: $headings.h6.size
|
||||
font-weight: $headings.h6.weight
|
||||
letter-spacing: $headings.h6.letter-spacing
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
&:not(:first-child)
|
||||
margin-left: 20px
|
||||
|
||||
&__content,
|
||||
&__extension
|
||||
align-items: center
|
||||
display: flex
|
||||
padding: 0 $grid-gutters.xl
|
||||
|
||||
@media $display-breakpoints.sm-and-down
|
||||
padding: 0 $grid-gutters.lg
|
||||
|
||||
.v-btn--icon
|
||||
margin: 6px
|
||||
|
||||
> *:first-child
|
||||
v-toolbar-content(left)
|
||||
|
||||
> *:last-child
|
||||
v-toolbar-content(right)
|
||||
|
||||
> .v-list
|
||||
flex: 1 1 auto
|
||||
max-height: 100%
|
||||
|
||||
> .v-list:first-child
|
||||
margin-left: '-%s' % $grid-gutters.xl
|
||||
|
||||
@media $display-breakpoints.sm-and-down
|
||||
margin-left: '-%s' % $grid-gutters.lg
|
||||
|
||||
> .v-list:last-child
|
||||
margin-right: '-%s' % $grid-gutters.xl
|
||||
|
||||
@media $display-breakpoints.sm-and-down
|
||||
margin-right: '-%s' % $grid-gutters.lg
|
||||
|
||||
&__extension
|
||||
> .v-toolbar__title
|
||||
margin-left: 72px
|
||||
|
||||
&__items
|
||||
display: flex
|
||||
height: inherit
|
||||
max-width: 100%
|
||||
padding: 0
|
||||
|
||||
.v-btn
|
||||
align-items: center
|
||||
align-self: center
|
||||
|
||||
.v-tooltip,
|
||||
.v-tooltip > span
|
||||
height: inherit
|
||||
|
||||
.v-btn:not(.v-btn--floating):not(.v-btn--icon),
|
||||
.v-menu,
|
||||
.v-menu__activator
|
||||
height: inherit
|
||||
margin: 0
|
||||
|
||||
/** Types */
|
||||
.v-toolbar
|
||||
.v-overflow-btn,
|
||||
.v-btn-toggle
|
||||
elevation(0)
|
||||
|
||||
.v-input
|
||||
margin: 0
|
||||
|
||||
.v-overflow-btn
|
||||
.v-input__control,
|
||||
.v-input__slot
|
||||
&:before
|
||||
display: none
|
||||
|
||||
&--card
|
||||
border-radius: $card-border-radius $card-border-radius 0 0
|
||||
elevation(0)
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
z-index: 2
|
||||
|
||||
&--fixed, &--absolute
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
z-index 2
|
||||
|
||||
&--floating
|
||||
display: inline-flex
|
||||
margin: $grid-gutters.lg
|
||||
width: auto
|
||||
|
||||
&--clipped
|
||||
z-index: 3
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-tooltip
|
||||
|
||||
&__content
|
||||
background: $grey.darken-2
|
||||
border-radius: 2px
|
||||
color: #FFFFFF
|
||||
font-size: 12px
|
||||
display: inline-block
|
||||
padding: 5px 8px
|
||||
position: absolute
|
||||
text-transform: initial
|
||||
width: auto
|
||||
elevation(2)
|
||||
|
||||
&[class*="-active"] {
|
||||
transition: .15s $transition.swing
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
&--fixed
|
||||
position: fixed
|
||||
|
||||
@media $display-breakpoints.sm-and-down
|
||||
.v-tooltip__content
|
||||
padding: 10px 16px
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
@import '../bootstrap'
|
||||
@import '../theme'
|
||||
|
||||
/* Theme */
|
||||
v-treeview($material)
|
||||
color: $material.text.primary
|
||||
|
||||
&--hoverable .v-treeview-node__root:hover,
|
||||
.v-treeview-node--active
|
||||
background: $material.dividers
|
||||
|
||||
v-treeview-rtl()
|
||||
> .v-treeview-node
|
||||
margin-right: 0
|
||||
|
||||
&--leaf
|
||||
margin-right: 24px
|
||||
margin-left: 0
|
||||
|
||||
&-node
|
||||
margin-right: 26px
|
||||
margin-left: 0
|
||||
|
||||
&--leaf
|
||||
margin-right: 50px
|
||||
margin-left: 0
|
||||
|
||||
&__toggle
|
||||
transform: rotate(90deg)
|
||||
|
||||
&--open
|
||||
transform: none
|
||||
|
||||
theme(v-treeview, "v-treeview")
|
||||
rtl(v-treeview-rtl, "v-treeview")
|
||||
|
||||
.v-treeview
|
||||
> .v-treeview-node
|
||||
margin-left: 0
|
||||
|
||||
&--leaf
|
||||
margin-left: 24px
|
||||
|
||||
&-node
|
||||
margin-left: 26px
|
||||
|
||||
&--excluded
|
||||
display: none
|
||||
|
||||
&--click
|
||||
> .v-treeview-node__root,
|
||||
> .v-treeview-node__root > .v-treeview-node__content > *
|
||||
cursor: pointer
|
||||
user-select: none
|
||||
|
||||
&--leaf
|
||||
margin-left: 50px
|
||||
|
||||
&__root
|
||||
display: flex
|
||||
align-items: center
|
||||
min-height: 34px
|
||||
|
||||
&__content
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
align-items: center
|
||||
|
||||
// TODO: this is temporary fix for d-flex * shenanigans
|
||||
.v-btn
|
||||
flex-grow: 0 !important
|
||||
flex-shrink: 1 !important
|
||||
|
||||
&__label
|
||||
font-size: 1.2rem
|
||||
margin-left: 6px
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
|
||||
.v-icon
|
||||
padding-right: 8px
|
||||
|
||||
&__checkbox
|
||||
user-select: none
|
||||
|
||||
&__toggle
|
||||
user-select: none
|
||||
transform: rotate(-90deg)
|
||||
|
||||
&--open
|
||||
transform: none
|
||||
|
||||
&--loading
|
||||
animation: progress-circular-rotate 1s linear infinite
|
||||
|
||||
&__children
|
||||
transition: all $treeview-transition
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
@import '../bootstrap'
|
||||
|
||||
.v-window
|
||||
&__container
|
||||
position: relative
|
||||
transition: .3s cubic-bezier(.25, .8, .50, 1)
|
||||
|
||||
&--is-active
|
||||
overflow: hidden
|
||||
|
||||
&-x-transition,
|
||||
&-x-reverse-transition,
|
||||
&-y-transition,
|
||||
&-y-reverse-transition
|
||||
&-enter-active,
|
||||
&-leave-active
|
||||
transition: .3s cubic-bezier(.25, .8, .50, 1)
|
||||
|
||||
&-leave,
|
||||
&-leave-to
|
||||
position: absolute !important
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
&-x-transition
|
||||
&-enter
|
||||
transform: translateX(100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translateX(-100%)
|
||||
|
||||
&-x-reverse-transition
|
||||
&-enter
|
||||
transform: translateX(-100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translateX(100%)
|
||||
|
||||
&-y-transition
|
||||
&-enter
|
||||
transform: translateY(100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translateY(-100%)
|
||||
|
||||
&-y-reverse-transition
|
||||
&-enter
|
||||
transform: translateY(-100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translateY(100%)
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
.blockquote
|
||||
padding: $spacers.three.y 0 $spacers.three.y $spacers.four.x
|
||||
font-size: 18px
|
||||
font-weight: 300
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
code, kbd
|
||||
display: inline-block
|
||||
border-radius: 3px
|
||||
white-space: pre-wrap
|
||||
font-size: 85%
|
||||
font-weight: 900
|
||||
|
||||
&:after,
|
||||
&:before
|
||||
content: "\00a0"
|
||||
letter-spacing: -1px
|
||||
|
||||
code
|
||||
background-color: $grey.lighten-4
|
||||
color: #bd4147
|
||||
elevation(1)
|
||||
|
||||
kbd
|
||||
background: $grey.darken-2
|
||||
color: #fff
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
html
|
||||
font-size: $font-size-root
|
||||
overflow-x: hidden
|
||||
text-rendering: optimizeLegibility
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
|
||||
|
||||
.application
|
||||
font-family: $body-font-family
|
||||
line-height: $line-height-root
|
||||
|
||||
::-ms-clear
|
||||
::-ms-reveal
|
||||
display: none
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
heading($material)
|
||||
color: $material.text.primary
|
||||
|
||||
theme(heading, "heading")
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
ul, ol
|
||||
padding-left: $spacers.four.x
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
.display-4
|
||||
font-size: $headings.h1.size !important
|
||||
font-weight: $headings.h1.weight
|
||||
line-height: $headings.h1.line-height !important
|
||||
letter-spacing: $headings.h1.letter-spacing !important
|
||||
font-family: $headings.h1.font-family !important
|
||||
|
||||
.display-3
|
||||
font-size: $headings.h2.size !important
|
||||
font-weight: $headings.h2.weight
|
||||
line-height: $headings.h2.line-height !important
|
||||
letter-spacing: $headings.h2.letter-spacing !important
|
||||
font-family: $headings.h2.font-family !important
|
||||
|
||||
.display-2
|
||||
font-size: $headings.h3.size !important
|
||||
font-weight: $headings.h3.weight
|
||||
line-height: $headings.h3.line-height !important
|
||||
letter-spacing: $headings.h3.letter-spacing !important
|
||||
font-family: $headings.h3.font-family !important
|
||||
|
||||
.display-1
|
||||
font-size: $headings.h4.size !important
|
||||
font-weight: $headings.h4.weight
|
||||
line-height: $headings.h4.line-height !important
|
||||
letter-spacing: $headings.h4.letter-spacing !important
|
||||
font-family: $headings.h4.font-family !important
|
||||
|
||||
.headline
|
||||
font-size: $headings.h5.size !important
|
||||
font-weight: $headings.h5.weight
|
||||
line-height: $headings.h5.line-height !important
|
||||
letter-spacing: $headings.h5.letter-spacing !important
|
||||
font-family: $headings.h5.font-family !important
|
||||
|
||||
.title
|
||||
font-size: $headings.h6.size !important
|
||||
font-weight: $headings.h6.weight
|
||||
line-height: $headings.h6.line-height !important
|
||||
letter-spacing: $headings.h6.letter-spacing !important
|
||||
font-family: $headings.h6.font-family !important
|
||||
|
||||
.subheading
|
||||
font-size: $headings.subheading.size !important
|
||||
font-weight: $headings.subheading.weight
|
||||
|
||||
.body-2
|
||||
font-size: $headings.body-2.size !important
|
||||
font-weight: $headings.body-2.weight
|
||||
|
||||
.body-1
|
||||
font-size: $headings.body-1.size !important
|
||||
font-weight: $headings.body-1.weight
|
||||
|
||||
.caption
|
||||
font-size: $headings.caption.size !important
|
||||
font-weight: $headings.caption.weight
|
||||
|
||||
p
|
||||
margin-bottom: $spacers.three.y
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@keyframes shake
|
||||
59%
|
||||
margin-left: 0
|
||||
|
||||
60%, 80%
|
||||
margin-left: 2px
|
||||
|
||||
70%, 90%
|
||||
margin-left: -2px
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
global-color($color_name, $color_value)
|
||||
.{$color_name}
|
||||
background-color $color_value !important
|
||||
border-color: $color_value !important
|
||||
|
||||
.{$color_name}--text
|
||||
color $color_value !important
|
||||
caret-color: $color_value !important
|
||||
|
||||
global-color-accent($color_name, $color_value, $color_type)
|
||||
.{$color_name}
|
||||
&.{$color_type}
|
||||
background-color $color_value !important
|
||||
border-color: $color_value !important
|
||||
|
||||
.{$color_name}--text
|
||||
&.text--{$color_type}
|
||||
color: $color_value !important
|
||||
caret-color: $color_value !important
|
||||
|
||||
// Put the loop in a function so it can't leak
|
||||
create-global-colors()
|
||||
for $color_name, $color_value in $shades
|
||||
global-color($color_name, $color_value)
|
||||
|
||||
if ($color-pack)
|
||||
for $color_name, $color_color in $colors
|
||||
for $color_type, $color_value in $color_color
|
||||
if $color_type == 'base'
|
||||
global-color($color_name, $color_value)
|
||||
|
||||
else if $color_type != 'shades'
|
||||
global-color-accent($color_name, $color_value, $color_type)
|
||||
|
||||
create-global-colors()
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import '../settings/_elevations'
|
||||
|
||||
// GENERATE HELPER CLASSES
|
||||
for z in (0..24)
|
||||
.elevation-{z}
|
||||
elevation(z, true)
|
||||
+332
@@ -0,0 +1,332 @@
|
||||
/* ! ress.css • v1.1.1 - MIT License - github.com/filipelinhares/ress */
|
||||
|
||||
/* # =================================================================
|
||||
# Global selectors
|
||||
# ================================================================= */
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll; /* All browsers without overlaying scrollbars */
|
||||
-webkit-text-size-adjust: 100%; /* iOS 8+ */
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
/* Remove margin, padding of all elements and set background-no-repeat as default */
|
||||
* {
|
||||
background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements */
|
||||
padding: 0; /* Reset `padding` and `margin` of all elements */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* # =================================================================
|
||||
# General elements
|
||||
# ================================================================= */
|
||||
|
||||
/* Add the correct display in iOS 4-7.*/
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
overflow: visible; /* Show the overflow in Edge and IE */
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox
|
||||
* Correct `block` display not defined for `main` in IE 11
|
||||
*/
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item; /* Add the correct display in all browsers */
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%; /* Set font-size to 80% in `small` elements */
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none; /* Add the correct display in IE */
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */
|
||||
text-decoration: none; /* Remove text decoration in Firefox 40+ */
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent; /* Remove the gray background on active links in IE 10 */
|
||||
-webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0; /* Remove the outline when hovering in all browsers */
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* Specify the font family of code elements */
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic; /* Address styling not present in Safari and Chrome */
|
||||
}
|
||||
|
||||
/* Address styling not present in IE 8/9 */
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* https://gist.github.com/unruthless/413930 */
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* # =================================================================
|
||||
# Forms
|
||||
# ================================================================= */
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Apply cursor pointer to button elements */
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"]
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Replace pointer cursor in disabled elements */
|
||||
[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[type="number"] {
|
||||
width: auto; /* Firefox 36+ */
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* Safari 8+ */
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; /* Safari 8 */
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* Internet Explorer 11+ */
|
||||
resize: vertical; /* Specify textarea resizability */
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit; /* Specify font inheritance of form elements */
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: bold; /* Restore the font weight unset by the previous rule. */
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
|
||||
}
|
||||
|
||||
/* Remove inner padding and border in Firefox 4+ */
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Replace focus style removed in the border reset above */
|
||||
button:-moz-focusring,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; /* Firefox 40+, Internet Explorer 11- */
|
||||
}
|
||||
|
||||
/* Remove the default button styling in all browsers */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
border-style: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Style select like a standard input */
|
||||
select {
|
||||
-moz-appearance: none; /* Firefox 36+ */
|
||||
-webkit-appearance: none; /* Chrome 41+ */
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none; /* Internet Explorer 11+ */
|
||||
}
|
||||
|
||||
select::-ms-value {
|
||||
color: currentColor; /* Internet Explorer 11+ */
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
|
||||
color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
|
||||
display: table; /* Correct the text wrapping in Edge and IE */
|
||||
max-width: 100%; /* Correct the text wrapping in Edge and IE */
|
||||
white-space: normal; /* Correct the text wrapping in Edge and IE */
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
|
||||
font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
|
||||
outline-offset: -2px; /* Correct the outline style in Safari */
|
||||
}
|
||||
|
||||
/* # =================================================================
|
||||
# Specify media element style
|
||||
# ================================================================= */
|
||||
|
||||
img {
|
||||
border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
|
||||
}
|
||||
|
||||
/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden; /* Internet Explorer 11- */
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */
|
||||
}
|
||||
|
||||
/* # =================================================================
|
||||
# Acessibility
|
||||
# ================================================================= */
|
||||
|
||||
/* Hide content from screens but not screenreaders */
|
||||
@media screen {
|
||||
[hidden~="screen"] {
|
||||
display: inherit;
|
||||
}
|
||||
[hidden~="screen"]:not(:active):not(:focus):not(:target) {
|
||||
position: absolute !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specify the progress cursor of updating elements */
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
/* Specify the pointer cursor of trigger elements */
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
|
||||
[aria-disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* # =================================================================
|
||||
# Selection
|
||||
# ================================================================= */
|
||||
|
||||
/* Specify text selection background color and omit drop shadow */
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #b3d4fc; /* Required when declaring ::selection */
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #b3d4fc; /* Required when declaring ::selection */
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
}
|
||||
+224
@@ -0,0 +1,224 @@
|
||||
transition-default()
|
||||
&-enter-active,
|
||||
&-leave-active
|
||||
transition: $primary-transition
|
||||
|
||||
&-move
|
||||
transition: transform .6s
|
||||
|
||||
// Component specific transitions
|
||||
.bottom-sheet-transition
|
||||
&-enter
|
||||
transform: translateY(100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translateY(100%)
|
||||
|
||||
.carousel-transition
|
||||
&-enter
|
||||
transform: translate(100%, 0)
|
||||
|
||||
&-leave, &-leave-to
|
||||
position: absolute
|
||||
top: 0
|
||||
transform: translate(-100%, 0)
|
||||
|
||||
.carousel-reverse-transition
|
||||
&-enter
|
||||
transform: translate(-100%, 0)
|
||||
|
||||
&-leave, &-leave-to
|
||||
position: absolute
|
||||
top: 0
|
||||
transform: translate(100%, 0)
|
||||
|
||||
.dialog-transition
|
||||
&-enter, &-leave-to
|
||||
transform: scale(0.5)
|
||||
opacity: 0
|
||||
|
||||
&-enter-to, &-leave
|
||||
opacity: 1
|
||||
|
||||
.dialog-bottom-transition
|
||||
&-enter, &-leave-to
|
||||
transform: translateY(100%)
|
||||
|
||||
.picker-transition,
|
||||
.picker-reverse-transition
|
||||
&-enter-active,
|
||||
&-leave-active
|
||||
transition: .3s $transition.linear-out-slow-in
|
||||
|
||||
&-enter,
|
||||
&-leave-to
|
||||
opacity: 0
|
||||
|
||||
&-leave,
|
||||
&-leave-active,
|
||||
&-leave-to
|
||||
position: absolute !important
|
||||
|
||||
.picker-transition
|
||||
&-enter
|
||||
transform: translate(0, 100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translate(0, -100%)
|
||||
|
||||
.picker-reverse-transition
|
||||
&-enter
|
||||
transform: translate(0, -100%)
|
||||
|
||||
&-leave-to
|
||||
transform: translate(0, 100%)
|
||||
|
||||
.picker-title-transition
|
||||
&-enter-to,
|
||||
&-leave
|
||||
transform: translate(0, 0)
|
||||
|
||||
&-enter
|
||||
transform: translate(-100%, 0)
|
||||
|
||||
&-leave-to
|
||||
opacity: 0
|
||||
transform: translate(100%, 0)
|
||||
|
||||
&-leave,
|
||||
&-leave-to,
|
||||
&-leave-active
|
||||
position: absolute !important
|
||||
|
||||
.tab-transition
|
||||
&-enter
|
||||
transform: translate(100%, 0)
|
||||
|
||||
&-leave, &-leave-active
|
||||
position: absolute
|
||||
top: 0
|
||||
|
||||
&-leave-to
|
||||
position: absolute
|
||||
transform: translate(-100%, 0)
|
||||
|
||||
.tab-reverse-transition
|
||||
&-enter
|
||||
transform: translate(-100%, 0)
|
||||
|
||||
&-leave, &-leave-to
|
||||
top: 0
|
||||
position: absolute
|
||||
transform: translate(100%, 0)
|
||||
|
||||
// Generic transitions
|
||||
.expand-transition
|
||||
transition-default()
|
||||
|
||||
.expand-x-transition
|
||||
transition-default()
|
||||
|
||||
.scale-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave, &-leave-to
|
||||
opacity: 0
|
||||
transform: scale(0)
|
||||
|
||||
.message-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
transform: translateY(-15px)
|
||||
|
||||
&-leave, &-leave-active
|
||||
position: absolute
|
||||
|
||||
.slide-y-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
transform: translateY(-15px)
|
||||
|
||||
.slide-y-reverse-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
transform: translateY(15px)
|
||||
|
||||
.scroll-y-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
|
||||
&-enter
|
||||
transform: translateY(-15px)
|
||||
|
||||
&-leave-to
|
||||
transform: translateY(15px)
|
||||
|
||||
.scroll-y-reverse-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
|
||||
&-enter
|
||||
transform: translateY(15px)
|
||||
|
||||
&-leave-to
|
||||
transform: translateY(-15px)
|
||||
|
||||
.scroll-x-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
|
||||
&-enter
|
||||
transform: translateX(-15px)
|
||||
|
||||
&-leave-to
|
||||
transform: translateX(15px)
|
||||
|
||||
.scroll-x-reverse-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
|
||||
&-enter
|
||||
transform: translateX(15px)
|
||||
|
||||
&-leave-to
|
||||
transform: translateX(-15px)
|
||||
|
||||
.slide-x-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
transform: translateX(-15px)
|
||||
|
||||
.slide-x-reverse-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
transform: translateX(15px)
|
||||
|
||||
.fade-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
opacity: 0
|
||||
|
||||
.fab-transition
|
||||
transition-default()
|
||||
|
||||
&-enter, &-leave-to
|
||||
transform: scale(0) rotate(-45deg)
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
@import './app'
|
||||
@import './components/*'
|
||||
+339
@@ -0,0 +1,339 @@
|
||||
$red = {
|
||||
"base": #F44336,
|
||||
"lighten-5": #FFEBEE,
|
||||
"lighten-4": #FFCDD2,
|
||||
"lighten-3": #EF9A9A,
|
||||
"lighten-2": #E57373,
|
||||
"lighten-1": #EF5350,
|
||||
"darken-1": #E53935,
|
||||
"darken-2": #D32F2F,
|
||||
"darken-3": #C62828,
|
||||
"darken-4": #B71C1C,
|
||||
"accent-1": #FF8A80,
|
||||
"accent-2": #FF5252,
|
||||
"accent-3": #FF1744,
|
||||
"accent-4": #D50000
|
||||
}
|
||||
|
||||
$pink = {
|
||||
"base": #e91e63,
|
||||
"lighten-5": #fce4ec,
|
||||
"lighten-4": #f8bbd0,
|
||||
"lighten-3": #f48fb1,
|
||||
"lighten-2": #f06292,
|
||||
"lighten-1": #ec407a,
|
||||
"darken-1": #d81b60,
|
||||
"darken-2": #c2185b,
|
||||
"darken-3": #ad1457,
|
||||
"darken-4": #880e4f,
|
||||
"accent-1": #ff80ab,
|
||||
"accent-2": #ff4081,
|
||||
"accent-3": #f50057,
|
||||
"accent-4": #c51162
|
||||
}
|
||||
|
||||
$purple = {
|
||||
"base": #9c27b0,
|
||||
"lighten-5": #f3e5f5,
|
||||
"lighten-4": #e1bee7,
|
||||
"lighten-3": #ce93d8,
|
||||
"lighten-2": #ba68c8,
|
||||
"lighten-1": #ab47bc,
|
||||
"darken-1": #8e24aa,
|
||||
"darken-2": #7b1fa2,
|
||||
"darken-3": #6a1b9a,
|
||||
"darken-4": #4a148c,
|
||||
"accent-1": #ea80fc,
|
||||
"accent-2": #e040fb,
|
||||
"accent-3": #d500f9,
|
||||
"accent-4": #aa00ff
|
||||
}
|
||||
|
||||
$deep-purple = {
|
||||
"base": #673ab7,
|
||||
"lighten-5": #ede7f6,
|
||||
"lighten-4": #d1c4e9,
|
||||
"lighten-3": #b39ddb,
|
||||
"lighten-2": #9575cd,
|
||||
"lighten-1": #7e57c2,
|
||||
"darken-1": #5e35b1,
|
||||
"darken-2": #512da8,
|
||||
"darken-3": #4527a0,
|
||||
"darken-4": #311b92,
|
||||
"accent-1": #b388ff,
|
||||
"accent-2": #7c4dff,
|
||||
"accent-3": #651fff,
|
||||
"accent-4": #6200ea
|
||||
}
|
||||
|
||||
$indigo = {
|
||||
"base": #3f51b5,
|
||||
"lighten-5": #e8eaf6,
|
||||
"lighten-4": #c5cae9,
|
||||
"lighten-3": #9fa8da,
|
||||
"lighten-2": #7986cb,
|
||||
"lighten-1": #5c6bc0,
|
||||
"darken-1": #3949ab,
|
||||
"darken-2": #303f9f,
|
||||
"darken-3": #283593,
|
||||
"darken-4": #1a237e,
|
||||
"accent-1": #8c9eff,
|
||||
"accent-2": #536dfe,
|
||||
"accent-3": #3d5afe,
|
||||
"accent-4": #304ffe
|
||||
}
|
||||
|
||||
$blue = {
|
||||
"base": #2196F3,
|
||||
"lighten-5": #E3F2FD,
|
||||
"lighten-4": #BBDEFB,
|
||||
"lighten-3": #90CAF9,
|
||||
"lighten-2": #64B5F6,
|
||||
"lighten-1": #42A5F5,
|
||||
"darken-1": #1E88E5,
|
||||
"darken-2": #1976D2,
|
||||
"darken-3": #1565C0,
|
||||
"darken-4": #0D47A1,
|
||||
"accent-1": #82B1FF,
|
||||
"accent-2": #448AFF,
|
||||
"accent-3": #2979FF,
|
||||
"accent-4": #2962FF
|
||||
}
|
||||
|
||||
$light-blue = {
|
||||
"base": #03a9f4,
|
||||
"lighten-5": #e1f5fe,
|
||||
"lighten-4": #b3e5fc,
|
||||
"lighten-3": #81d4fa,
|
||||
"lighten-2": #4fc3f7,
|
||||
"lighten-1": #29b6f6,
|
||||
"darken-1": #039be5,
|
||||
"darken-2": #0288d1,
|
||||
"darken-3": #0277bd,
|
||||
"darken-4": #01579b,
|
||||
"accent-1": #80d8ff,
|
||||
"accent-2": #40c4ff,
|
||||
"accent-3": #00b0ff,
|
||||
"accent-4": #0091ea
|
||||
}
|
||||
|
||||
$cyan = {
|
||||
"base": #00bcd4,
|
||||
"lighten-5": #e0f7fa,
|
||||
"lighten-4": #b2ebf2,
|
||||
"lighten-3": #80deea,
|
||||
"lighten-2": #4dd0e1,
|
||||
"lighten-1": #26c6da,
|
||||
"darken-1": #00acc1,
|
||||
"darken-2": #0097a7,
|
||||
"darken-3": #00838f,
|
||||
"darken-4": #006064,
|
||||
"accent-1": #84ffff,
|
||||
"accent-2": #18ffff,
|
||||
"accent-3": #00e5ff,
|
||||
"accent-4": #00b8d4
|
||||
}
|
||||
|
||||
$teal = {
|
||||
"base": #009688,
|
||||
"lighten-5": #e0f2f1,
|
||||
"lighten-4": #b2dfdb,
|
||||
"lighten-3": #80cbc4,
|
||||
"lighten-2": #4db6ac,
|
||||
"lighten-1": #26a69a,
|
||||
"darken-1": #00897b,
|
||||
"darken-2": #00796b,
|
||||
"darken-3": #00695c,
|
||||
"darken-4": #004d40,
|
||||
"accent-1": #a7ffeb,
|
||||
"accent-2": #64ffda,
|
||||
"accent-3": #1de9b6,
|
||||
"accent-4": #00bfa5
|
||||
}
|
||||
|
||||
$green = {
|
||||
"base": #4CAF50,
|
||||
"lighten-5": #E8F5E9,
|
||||
"lighten-4": #C8E6C9,
|
||||
"lighten-3": #A5D6A7,
|
||||
"lighten-2": #81C784,
|
||||
"lighten-1": #66BB6A,
|
||||
"darken-1": #43A047,
|
||||
"darken-2": #388E3C,
|
||||
"darken-3": #2E7D32,
|
||||
"darken-4": #1B5E20,
|
||||
"accent-1": #B9F6CA,
|
||||
"accent-2": #69F0AE,
|
||||
"accent-3": #00E676,
|
||||
"accent-4": #00C853
|
||||
}
|
||||
|
||||
$light-green = {
|
||||
"base": #8bc34a,
|
||||
"lighten-5": #f1f8e9,
|
||||
"lighten-4": #dcedc8,
|
||||
"lighten-3": #c5e1a5,
|
||||
"lighten-2": #aed581,
|
||||
"lighten-1": #9ccc65,
|
||||
"darken-1": #7cb342,
|
||||
"darken-2": #689f38,
|
||||
"darken-3": #558b2f,
|
||||
"darken-4": #33691e,
|
||||
"accent-1": #ccff90,
|
||||
"accent-2": #b2ff59,
|
||||
"accent-3": #76ff03,
|
||||
"accent-4": #64dd17
|
||||
}
|
||||
|
||||
$lime = {
|
||||
"base": #cddc39,
|
||||
"lighten-5": #f9fbe7,
|
||||
"lighten-4": #f0f4c3,
|
||||
"lighten-3": #e6ee9c,
|
||||
"lighten-2": #dce775,
|
||||
"lighten-1": #d4e157,
|
||||
"darken-1": #c0ca33,
|
||||
"darken-2": #afb42b,
|
||||
"darken-3": #9e9d24,
|
||||
"darken-4": #827717,
|
||||
"accent-1": #f4ff81,
|
||||
"accent-2": #eeff41,
|
||||
"accent-3": #c6ff00,
|
||||
"accent-4": #aeea00
|
||||
}
|
||||
|
||||
$yellow = {
|
||||
"base": #ffeb3b,
|
||||
"lighten-5": #fffde7,
|
||||
"lighten-4": #fff9c4,
|
||||
"lighten-3": #fff59d,
|
||||
"lighten-2": #fff176,
|
||||
"lighten-1": #ffee58,
|
||||
"darken-1": #fdd835,
|
||||
"darken-2": #fbc02d,
|
||||
"darken-3": #f9a825,
|
||||
"darken-4": #f57f17,
|
||||
"accent-1": #ffff8d,
|
||||
"accent-2": #ffff00,
|
||||
"accent-3": #ffea00,
|
||||
"accent-4": #ffd600
|
||||
}
|
||||
|
||||
$amber = {
|
||||
"base": #ffc107,
|
||||
"lighten-5": #fff8e1,
|
||||
"lighten-4": #ffecb3,
|
||||
"lighten-3": #ffe082,
|
||||
"lighten-2": #ffd54f,
|
||||
"lighten-1": #ffca28,
|
||||
"darken-1": #ffb300,
|
||||
"darken-2": #ffa000,
|
||||
"darken-3": #ff8f00,
|
||||
"darken-4": #ff6f00,
|
||||
"accent-1": #ffe57f,
|
||||
"accent-2": #ffd740,
|
||||
"accent-3": #ffc400,
|
||||
"accent-4": #ffab00
|
||||
}
|
||||
|
||||
$orange = {
|
||||
"base": #ff9800,
|
||||
"lighten-5": #fff3e0,
|
||||
"lighten-4": #ffe0b2,
|
||||
"lighten-3": #ffcc80,
|
||||
"lighten-2": #ffb74d,
|
||||
"lighten-1": #ffa726,
|
||||
"darken-1": #fb8c00,
|
||||
"darken-2": #f57c00,
|
||||
"darken-3": #ef6c00,
|
||||
"darken-4": #e65100,
|
||||
"accent-1": #ffd180,
|
||||
"accent-2": #ffab40,
|
||||
"accent-3": #ff9100,
|
||||
"accent-4": #ff6d00
|
||||
}
|
||||
|
||||
$deep-orange = {
|
||||
"base": #ff5722,
|
||||
"lighten-5": #fbe9e7,
|
||||
"lighten-4": #ffccbc,
|
||||
"lighten-3": #ffab91,
|
||||
"lighten-2": #ff8a65,
|
||||
"lighten-1": #ff7043,
|
||||
"darken-1": #f4511e,
|
||||
"darken-2": #e64a19,
|
||||
"darken-3": #d84315,
|
||||
"darken-4": #bf360c,
|
||||
"accent-1": #ff9e80,
|
||||
"accent-2": #ff6e40,
|
||||
"accent-3": #ff3d00,
|
||||
"accent-4": #dd2c00
|
||||
}
|
||||
|
||||
$brown = {
|
||||
"base": #795548,
|
||||
"lighten-5": #efebe9,
|
||||
"lighten-4": #d7ccc8,
|
||||
"lighten-3": #bcaaa4,
|
||||
"lighten-2": #a1887f,
|
||||
"lighten-1": #8d6e63,
|
||||
"darken-1": #6d4c41,
|
||||
"darken-2": #5d4037,
|
||||
"darken-3": #4e342e,
|
||||
"darken-4": #3e2723
|
||||
}
|
||||
|
||||
$blue-grey = {
|
||||
"base": #607d8b,
|
||||
"lighten-5": #eceff1,
|
||||
"lighten-4": #cfd8dc,
|
||||
"lighten-3": #b0bec5,
|
||||
"lighten-2": #90a4ae,
|
||||
"lighten-1": #78909c,
|
||||
"darken-1": #546e7a,
|
||||
"darken-2": #455a64,
|
||||
"darken-3": #37474f,
|
||||
"darken-4": #263238
|
||||
}
|
||||
|
||||
$grey = {
|
||||
"base": #9e9e9e,
|
||||
"lighten-5": #fafafa,
|
||||
"lighten-4": #f5f5f5,
|
||||
"lighten-3": #eeeeee,
|
||||
"lighten-2": #e0e0e0,
|
||||
"lighten-1": #bdbdbd,
|
||||
"darken-1": #757575,
|
||||
"darken-2": #616161,
|
||||
"darken-3": #424242,
|
||||
"darken-4": #212121
|
||||
}
|
||||
|
||||
$shades = {
|
||||
"black": #000000,
|
||||
"white": #FFFFFF,
|
||||
"transparent": transparent
|
||||
}
|
||||
|
||||
$colors := {
|
||||
"red": $red,
|
||||
"pink": $pink,
|
||||
"purple": $purple,
|
||||
"deep-purple": $deep-purple,
|
||||
"indigo": $indigo,
|
||||
"blue": $blue,
|
||||
"light-blue": $light-blue,
|
||||
"cyan": $cyan,
|
||||
"teal": $teal,
|
||||
"green": $green,
|
||||
"light-green": $light-green,
|
||||
"lime": $lime,
|
||||
"yellow": $yellow,
|
||||
"amber": $amber,
|
||||
"orange": $orange,
|
||||
"deep-orange": $deep-orange,
|
||||
"brown": $brown,
|
||||
"blue-grey": $blue-grey,
|
||||
"grey": $grey,
|
||||
"shades": $shades
|
||||
}
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
$shadow-key-umbra-opacity := rgba(0,0,0, .2)
|
||||
$shadow-key-penumbra-opacity := rgba(0,0,0, .14)
|
||||
$shadow-key-ambient-opacity := rgba(0,0,0, .12)
|
||||
|
||||
$shadow-key-umbra := 0px 0px 0px 0px $shadow-key-umbra-opacity,
|
||||
0px 2px 1px -1px $shadow-key-umbra-opacity,
|
||||
0px 3px 1px -2px $shadow-key-umbra-opacity,
|
||||
0px 3px 3px -2px $shadow-key-umbra-opacity,
|
||||
0px 2px 4px -1px $shadow-key-umbra-opacity,
|
||||
0px 3px 5px -1px $shadow-key-umbra-opacity,
|
||||
0px 3px 5px -1px $shadow-key-umbra-opacity,
|
||||
0px 4px 5px -2px $shadow-key-umbra-opacity,
|
||||
0px 5px 5px -3px $shadow-key-umbra-opacity,
|
||||
0px 5px 6px -3px $shadow-key-umbra-opacity,
|
||||
0px 6px 6px -3px $shadow-key-umbra-opacity,
|
||||
0px 6px 7px -4px $shadow-key-umbra-opacity,
|
||||
0px 7px 8px -4px $shadow-key-umbra-opacity,
|
||||
0px 7px 8px -4px $shadow-key-umbra-opacity,
|
||||
0px 7px 9px -4px $shadow-key-umbra-opacity,
|
||||
0px 8px 9px -5px $shadow-key-umbra-opacity,
|
||||
0px 8px 10px -5px $shadow-key-umbra-opacity,
|
||||
0px 8px 11px -5px $shadow-key-umbra-opacity,
|
||||
0px 9px 11px -5px $shadow-key-umbra-opacity,
|
||||
0px 9px 12px -6px $shadow-key-umbra-opacity,
|
||||
0px 10px 13px -6px $shadow-key-umbra-opacity,
|
||||
0px 10px 13px -6px $shadow-key-umbra-opacity,
|
||||
0px 10px 14px -6px $shadow-key-umbra-opacity,
|
||||
0px 11px 14px -7px $shadow-key-umbra-opacity,
|
||||
0px 11px 15px -7px $shadow-key-umbra-opacity
|
||||
|
||||
$shadow-key-penumbra := 0px 0px 0px 0px $shadow-key-penumbra-opacity,
|
||||
0px 1px 1px 0px $shadow-key-penumbra-opacity,
|
||||
0px 2px 2px 0px $shadow-key-penumbra-opacity,
|
||||
0px 3px 4px 0px $shadow-key-penumbra-opacity,
|
||||
0px 4px 5px 0px $shadow-key-penumbra-opacity,
|
||||
0px 5px 8px 0px $shadow-key-penumbra-opacity,
|
||||
0px 6px 10px 0px $shadow-key-penumbra-opacity,
|
||||
0px 7px 10px 1px $shadow-key-penumbra-opacity,
|
||||
0px 8px 10px 1px $shadow-key-penumbra-opacity,
|
||||
0px 9px 12px 1px $shadow-key-penumbra-opacity,
|
||||
0px 10px 14px 1px $shadow-key-penumbra-opacity,
|
||||
0px 11px 15px 1px $shadow-key-penumbra-opacity,
|
||||
0px 12px 17px 2px $shadow-key-penumbra-opacity,
|
||||
0px 13px 19px 2px $shadow-key-penumbra-opacity,
|
||||
0px 14px 21px 2px $shadow-key-penumbra-opacity,
|
||||
0px 15px 22px 2px $shadow-key-penumbra-opacity,
|
||||
0px 16px 24px 2px $shadow-key-penumbra-opacity,
|
||||
0px 17px 26px 2px $shadow-key-penumbra-opacity,
|
||||
0px 18px 28px 2px $shadow-key-penumbra-opacity,
|
||||
0px 19px 29px 2px $shadow-key-penumbra-opacity,
|
||||
0px 20px 31px 3px $shadow-key-penumbra-opacity,
|
||||
0px 21px 33px 3px $shadow-key-penumbra-opacity,
|
||||
0px 22px 35px 3px $shadow-key-penumbra-opacity,
|
||||
0px 23px 36px 3px $shadow-key-penumbra-opacity,
|
||||
0px 24px 38px 3px $shadow-key-penumbra-opacity
|
||||
|
||||
$shadow-key-ambient := 0px 0px 0px 0px $shadow-key-ambient-opacity,
|
||||
0px 1px 3px 0px $shadow-key-ambient-opacity,
|
||||
0px 1px 5px 0px $shadow-key-ambient-opacity,
|
||||
0px 1px 8px 0px $shadow-key-ambient-opacity,
|
||||
0px 1px 10px 0px $shadow-key-ambient-opacity,
|
||||
0px 1px 14px 0px $shadow-key-ambient-opacity,
|
||||
0px 1px 18px 0px $shadow-key-ambient-opacity,
|
||||
0px 2px 16px 1px $shadow-key-ambient-opacity,
|
||||
0px 3px 14px 2px $shadow-key-ambient-opacity,
|
||||
0px 3px 16px 2px $shadow-key-ambient-opacity,
|
||||
0px 4px 18px 3px $shadow-key-ambient-opacity,
|
||||
0px 4px 20px 3px $shadow-key-ambient-opacity,
|
||||
0px 5px 22px 4px $shadow-key-ambient-opacity,
|
||||
0px 5px 24px 4px $shadow-key-ambient-opacity,
|
||||
0px 5px 26px 4px $shadow-key-ambient-opacity,
|
||||
0px 6px 28px 5px $shadow-key-ambient-opacity,
|
||||
0px 6px 30px 5px $shadow-key-ambient-opacity,
|
||||
0px 6px 32px 5px $shadow-key-ambient-opacity,
|
||||
0px 7px 34px 6px $shadow-key-ambient-opacity,
|
||||
0px 7px 36px 6px $shadow-key-ambient-opacity,
|
||||
0px 8px 38px 7px $shadow-key-ambient-opacity,
|
||||
0px 8px 40px 7px $shadow-key-ambient-opacity,
|
||||
0px 8px 42px 7px $shadow-key-ambient-opacity,
|
||||
0px 9px 44px 8px $shadow-key-ambient-opacity,
|
||||
0px 9px 46px 8px $shadow-key-ambient-opacity
|
||||
|
||||
// MIXINS
|
||||
elevation($z, important = false)
|
||||
box-shadow: $shadow-key-umbra[$z],
|
||||
$shadow-key-penumbra[$z],
|
||||
$shadow-key-ambient[$z] (important ? !important : )
|
||||
|
||||
elevationTransition($duration = 280ms, $easing = cubic-bezier(.4, 0, .2, 1))
|
||||
transition: box-shadow $duration $easing
|
||||
will-change: box-shadow
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
rtl($component, $name)
|
||||
.application
|
||||
&--is-rtl
|
||||
.{$name}
|
||||
$component()
|
||||
+230
@@ -0,0 +1,230 @@
|
||||
@require './_colors'
|
||||
|
||||
// Theme
|
||||
// ============================================================
|
||||
$body-font-family := 'Roboto', sans-serif
|
||||
$font-size-root := 14px
|
||||
$line-height-root := 1.5
|
||||
|
||||
// Material Design - https://material.io/guidelines/style/color.html#color-usability
|
||||
// ============================================================
|
||||
$material-light := {
|
||||
status-bar: {
|
||||
regular: $grey.lighten-2,
|
||||
lights-out: rgba($shades.white, .7)
|
||||
},
|
||||
app-bar: $grey.lighten-4,
|
||||
background: $grey.lighten-5,
|
||||
cards: $shades.white,
|
||||
chips: {
|
||||
background: $grey.lighten-2,
|
||||
color: rgba($shades.black, .87)
|
||||
},
|
||||
dividers: rgba($shades.black, .12),
|
||||
text: {
|
||||
theme: $shades.white,
|
||||
primary: rgba($shades.black, .87),
|
||||
secondary: rgba($shades.black, .54),
|
||||
disabled: rgba($shades.black, .38),
|
||||
link: $blue.darken-2,
|
||||
link-hover: $grey.darken-3
|
||||
},
|
||||
icons: {
|
||||
active: rgba($shades.black, .54),
|
||||
inactive: rgba($shades.black, .38)
|
||||
},
|
||||
inputs: {
|
||||
box: rgba($shades.black, .04),
|
||||
solo-inverted: rgba($shades.black, .16),
|
||||
solo-inverted-focused: $grey.darken-3,
|
||||
solo-inverted-focused-text: $shades.white
|
||||
},
|
||||
buttons: {
|
||||
disabled: rgba($shades.black, .26),
|
||||
focused: rgba($shades.black, .12),
|
||||
focused-alt: rgba($shades.white, .6),
|
||||
pressed: rgba(#999, .4)
|
||||
},
|
||||
expansion-panels: {
|
||||
focus: $grey.lighten-3
|
||||
},
|
||||
list-tile: {
|
||||
hover: rgba($shades.black, .04)
|
||||
},
|
||||
selection-controls: {
|
||||
thumb: {
|
||||
inactive: $grey.lighten-5,
|
||||
disabled: $grey.lighten-1
|
||||
},
|
||||
track: {
|
||||
inactive: rgba($shades.black, .38),
|
||||
disabled: rgba($shades.black, .12)
|
||||
}
|
||||
},
|
||||
slider: {
|
||||
active: rgba($shades.black, .38),
|
||||
inactive: rgba($shades.black, .26),
|
||||
disabled: rgba($shades.black, .26),
|
||||
discrete: $shades.black
|
||||
},
|
||||
tabs: {
|
||||
active: rgba($shades.black, .87)
|
||||
},
|
||||
text-fields: {
|
||||
box: rgba($shades.black, .06),
|
||||
box-hover: rgba($shades.black, .12)
|
||||
},
|
||||
input-bottom-line: rgba($shades.black, .42),
|
||||
stepper: {
|
||||
active: rgba($shades.white, 1),
|
||||
completed: rgba($shades.black, 0.87),
|
||||
hover: rgba($shades.black, 0.54)
|
||||
},
|
||||
table: {
|
||||
active: $grey.lighten-4
|
||||
hover: $grey.lighten-3
|
||||
},
|
||||
picker: {
|
||||
body: $shades.white,
|
||||
clock: $grey.lighten-2,
|
||||
indeterminateTime: $grey.lighten-1,
|
||||
title: $grey.lighten-2
|
||||
},
|
||||
bg-color: $shades.white
|
||||
fg-color: $shades.black
|
||||
text-color: $shades.black
|
||||
primary-text-percent: .87
|
||||
secondary-text-percent: .54
|
||||
disabledORhints-text-percent: .38
|
||||
divider-percent: .12
|
||||
active-icon-percent: .54
|
||||
inactive-icon-percent: .38
|
||||
calendar: {
|
||||
background-color: #fff
|
||||
outside-background-color: #f7f7f7
|
||||
line-color: #e0e0e0
|
||||
interval-color: $grey.darken-3
|
||||
interval-line-color: $grey.lighten-2
|
||||
text-color: #000
|
||||
past-color: rgba(#000, .38)
|
||||
}
|
||||
}
|
||||
|
||||
$material-dark := {
|
||||
status-bar: {
|
||||
regular: $shades.black,
|
||||
lights-out: rgba($shades.black, .2)
|
||||
},
|
||||
app-bar: $grey.darken-4,
|
||||
background: #303030,
|
||||
cards: $grey.darken-3,
|
||||
chips: {
|
||||
background: #555,
|
||||
color: $shades.white
|
||||
},
|
||||
dividers: rgba($shades.white, .12),
|
||||
text: {
|
||||
theme: $shades.white,
|
||||
primary: $shades.white,
|
||||
secondary: rgba($shades.white, .70),
|
||||
disabled: rgba($shades.white, .50),
|
||||
link: $blue.accent-1,
|
||||
link-hover: $grey.lighten-3
|
||||
},
|
||||
icons: {
|
||||
active: $shades.white,
|
||||
inactive: rgba($shades.white, .5)
|
||||
},
|
||||
inputs: {
|
||||
box: $shades.white,
|
||||
solo-inverted: rgba($shades.white, .16),
|
||||
solo-inverted-focused: $shades.white,
|
||||
solo-inverted-focused-text: $material-light.text.primary
|
||||
},
|
||||
list-tile: {
|
||||
hover: rgba($shades.white, .08)
|
||||
},
|
||||
buttons: {
|
||||
disabled: rgba($shades.white, .3),
|
||||
focused: rgba($shades.white, .12),
|
||||
focused-alt: rgba($shades.white, .1),
|
||||
pressed: rgba(#ccc, .25)
|
||||
},
|
||||
expansion-panels: {
|
||||
focus: #494949
|
||||
},
|
||||
selection-controls: {
|
||||
thumb: {
|
||||
inactive: $grey.lighten-1,
|
||||
disabled: $grey.darken-3
|
||||
},
|
||||
track: {
|
||||
inactive: rgba($shades.white, .3),
|
||||
disabled: rgba($shades.white, .1)
|
||||
}
|
||||
},
|
||||
slider: {
|
||||
active: rgba($shades.white, .3),
|
||||
inactive: rgba($shades.white, .2),
|
||||
disabled: rgba($shades.white, .2),
|
||||
discrete: $shades.white
|
||||
},
|
||||
tabs: {
|
||||
active: $shades.white
|
||||
},
|
||||
text-fields: {
|
||||
box: rgba($shades.black, .1),
|
||||
box-hover: rgba($shades.black, .2),
|
||||
box-focus: rgba($shades.black, .3)
|
||||
},
|
||||
input-bottom-line: rgba($shades.white, .7),
|
||||
|
||||
stepper: {
|
||||
active: rgba($shades.white, 1),
|
||||
completed: rgba($shades.white, 0.87),
|
||||
hover: rgba($shades.white, 0.75)
|
||||
},
|
||||
table: {
|
||||
active: #505050
|
||||
hover: $grey.darken-2
|
||||
},
|
||||
picker: {
|
||||
body: $grey.darken-3,
|
||||
clock: $grey.darken-2,
|
||||
indeterminateTime: $grey.darken-1,
|
||||
title: $grey.darken-2
|
||||
},
|
||||
bg-color: #303030
|
||||
fg-color: $shades.white
|
||||
text-color: $shades.white
|
||||
primary-text-percent: 1
|
||||
secondary-text-percent: .70
|
||||
disabledORhints-text-percent: .50
|
||||
divider-percent: .12
|
||||
active-icon-percent: 1
|
||||
inactive-icon-percent: .50
|
||||
calendar: {
|
||||
background-color: #303030
|
||||
outside-background-color: #202020
|
||||
line-color: $grey.base
|
||||
interval-color: $grey.lighten-3
|
||||
interval-line-color: $grey.darken-2
|
||||
text-color: #fff
|
||||
past-color: rgba(#fff, .50)
|
||||
}
|
||||
}
|
||||
|
||||
// Default Material Theme
|
||||
// ============================================================
|
||||
$material-theme := $material-light
|
||||
$material-twelve-percent-light := rgba($material-dark.fg-color, $material-dark.divider-percent)
|
||||
$material-twelve-percent-dark := rgba($material-light.fg-color, $material-light.divider-percent)
|
||||
|
||||
|
||||
// Theme
|
||||
// ============================================================
|
||||
$body-bg-light := $material-light.background
|
||||
$body-bg-dark := $material-dark.background
|
||||
$body-color-light := rgba($material-dark.text-color, $material-dark.primary-text-percent)
|
||||
$body-color-dark := rgba($material-light.text-color, $material-light.primary-text-percent)
|
||||
$color-theme := rgba($material-theme.text-color, $material-theme.primary-text-percent)
|
||||
+347
@@ -0,0 +1,347 @@
|
||||
@require './_theme'
|
||||
|
||||
// ============================================================
|
||||
// Vuetify variables
|
||||
// ============================================================
|
||||
|
||||
$color-pack := true
|
||||
|
||||
// Grid
|
||||
// ============================================================
|
||||
$grid-breakpoints := {
|
||||
xs: 0
|
||||
sm: 600px
|
||||
md: 960px
|
||||
lg: (1280px - 16px) // Desktop gets a 16dp reduction
|
||||
xl: (1920px - 16px) // https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
|
||||
}
|
||||
|
||||
$grid-gutter := 8px
|
||||
$grid-columns := 12
|
||||
$grid-gutters := {
|
||||
xs: ($grid-gutter / 4)
|
||||
sm: ($grid-gutter / 2)
|
||||
md: $grid-gutter
|
||||
lg: ($grid-gutter * 2)
|
||||
xl: ($grid-gutter * 3)
|
||||
}
|
||||
|
||||
$container-max-widths := {
|
||||
md: $grid-breakpoints.md
|
||||
lg: $grid-breakpoints.lg
|
||||
xl: $grid-breakpoints.xl
|
||||
}
|
||||
|
||||
|
||||
// Display
|
||||
// ============================================================
|
||||
$display-breakpoints := {
|
||||
print-only: "only print"
|
||||
screen-only: "only screen"
|
||||
xs-only: "only screen and (max-width: %s)" % ($grid-breakpoints.sm - 1)
|
||||
sm-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.sm ($grid-breakpoints.md - 1))
|
||||
sm-and-down: "only screen and (max-width: %s)" % ($grid-breakpoints.md - 1)
|
||||
sm-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.sm
|
||||
md-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.md ($grid-breakpoints.lg - 1))
|
||||
md-and-down: "only screen and (max-width: %s )" % ($grid-breakpoints.lg - 1)
|
||||
md-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.md
|
||||
lg-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.lg ($grid-breakpoints.xl - 1))
|
||||
lg-and-down: "only screen and (max-width: (%s - 1))" % $grid-breakpoints.xl
|
||||
lg-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.lg
|
||||
xl-only: "only screen and (min-width: %s)" % $grid-breakpoints.xl
|
||||
}
|
||||
|
||||
|
||||
// Spacing
|
||||
// ============================================================
|
||||
$spacer := 16px
|
||||
$spacer-x := $spacer
|
||||
$spacer-y := $spacer
|
||||
$spacers := {
|
||||
zero: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
one: {
|
||||
x: ($spacer-x * .25),
|
||||
y: ($spacer-y * .25)
|
||||
},
|
||||
two: {
|
||||
x: ($spacer-x * .5),
|
||||
y: ($spacer-y * .5)
|
||||
},
|
||||
three: {
|
||||
x: $spacer-x,
|
||||
y: $spacer-y
|
||||
},
|
||||
four: {
|
||||
x: ($spacer-x * 1.5),
|
||||
y: ($spacer-y * 1.5)
|
||||
},
|
||||
five: {
|
||||
x: ($spacer-x * 3),
|
||||
y: ($spacer-y * 3)
|
||||
}
|
||||
}
|
||||
|
||||
$font-weights := {
|
||||
thin: 100,
|
||||
light: 300,
|
||||
regular: 400,
|
||||
medium: 500,
|
||||
bold: 700,
|
||||
black: 900
|
||||
}
|
||||
|
||||
// Headings
|
||||
// ============================================================
|
||||
$heading-font-family := $body-font-family
|
||||
$headings := {
|
||||
h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
|
||||
h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
|
||||
h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
|
||||
h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
|
||||
h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
|
||||
h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
|
||||
subheading: { size: 16px, weight: 400 },
|
||||
body-2: { size: 14px, weight: 500 },
|
||||
body-1: { size: 14px, weight: 400 },
|
||||
caption: { size: 12px, weight: 400 },
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
$transition := {
|
||||
fast-out-slow-in: cubic-bezier(0.4, 0.0, 0.2, 1),
|
||||
linear-out-slow-in: cubic-bezier(0.0, 0.0, 0.2, 1),
|
||||
fast-out-linear-in: cubic-bezier(0.4, 0.0, 1, 1),
|
||||
ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1),
|
||||
fast-in-fast-out: cubic-bezier(.25,.8,.25,1),
|
||||
swing: cubic-bezier(.25,.8,.50,1)
|
||||
}
|
||||
|
||||
$primary-transition := 0.3s $transition.swing
|
||||
$secondary-transition := 0.2s $transition.ease-in-out
|
||||
|
||||
// Components
|
||||
// ============================================================
|
||||
|
||||
// Alerts
|
||||
$alert-color := inherit
|
||||
$alert-border-radius := 0
|
||||
$alert-border-width := 4px 0 0 0
|
||||
$alert-font-size := $font-size-root
|
||||
$alert-icon-color := rgba($material-light.fg-color, .3)
|
||||
$alert-icon-font-size := 24px
|
||||
$alert-padding := 16px
|
||||
$alert-margin := $spacers.one.y auto
|
||||
$alert-outline-border-width := 1px
|
||||
$alert-outline-border-style := solid
|
||||
|
||||
// Badges
|
||||
$badge-border-radius := 50%
|
||||
$badge-color := $material-dark.fg-color
|
||||
$badge-font-family := $body-font-family
|
||||
$badge-font-size := 14px
|
||||
$badge-height := 22px
|
||||
$badge-top := 0
|
||||
$badge-right := 0
|
||||
$badge-width := 22px
|
||||
|
||||
// Breadcrumbs
|
||||
$breadcrumbs-flex := 0 1 auto
|
||||
$breadcrumbs-padding := 18px 12px
|
||||
$breadcrumbs-even-child-padding := 0 12px
|
||||
$breadcrumbs-item-font-size := 14px
|
||||
$breadcrumbs-item-large-font-size := 16px
|
||||
$breadcrumbs-margin := 0
|
||||
$breadcrumbs-padding := 0 14px
|
||||
|
||||
/** Buttons */
|
||||
|
||||
// Base
|
||||
$button-border-radius := 2px
|
||||
$button-color := $material-light.fg-color
|
||||
$button-background-color := #999999
|
||||
$button-height := 36px
|
||||
$button-font-size := 14px
|
||||
$button-font-weight := 500
|
||||
$button-margin-y := 6px
|
||||
$button-margin-x := 8px
|
||||
$button-margin := $button-margin-y $button-margin-x
|
||||
$button-min-width := 88px
|
||||
$button-small-padding := 0 8px
|
||||
$button-padding := 0 16px
|
||||
$button-large-padding := 0 32px
|
||||
$button-text-transform := uppercase
|
||||
|
||||
$button-small-height := 28px
|
||||
$button-small-font-size := 13px
|
||||
|
||||
$button-large-height := 44px
|
||||
$button-large-font-size := 15px
|
||||
|
||||
$button-floating-width := 56px
|
||||
$button-floating-icon-height := 24px
|
||||
$button-floating-icon-width := 24px
|
||||
$button-floating-small-width := 40px
|
||||
$button-floating-large-width := 72px
|
||||
$button-floating-small-icon-width := 18px
|
||||
$button-floating-large-icon-width := 30px
|
||||
|
||||
// Card
|
||||
$card-border-radius := 2px
|
||||
|
||||
// Chip
|
||||
$chip-border-radius := 28px
|
||||
$chip-close-margin := 0 2px 0 8px
|
||||
$chip-close-margin-rtl := 0 8px 0 2px
|
||||
$chip-font-size := 13px
|
||||
$chip-label-border-radius := $card-border-radius
|
||||
$chip-icon-font-size := 20px
|
||||
$chip-padding := 0 12px
|
||||
$chip-outline-background := transparent !important
|
||||
$chip-outline-color := $grey.base
|
||||
$chip-height := 32px
|
||||
$chip-margin := 4px
|
||||
$chip-small-height := 24px
|
||||
$chip-small-font-size := 20px
|
||||
$chip-icon-offset := 12px
|
||||
$chip-icon-negative-offset := -8px
|
||||
// TODO: s/removeable/removable in 2.0
|
||||
// invalid name kept to avoid possible breaking change
|
||||
$chip-removeable-padding := 0 $chip-margin 0 $chip-icon-offset
|
||||
$chip-removable-padding-rtl := 0 $chip-icon-offset 0 $chip-margin
|
||||
// TODO: remove in 2.0
|
||||
$chip-removable-padding := $chip-removeable-padding
|
||||
|
||||
// Collapsible
|
||||
$expansion-panel-collapse-height := 48px
|
||||
$collapsible-transition-height := 0.23s
|
||||
|
||||
// Footer
|
||||
$footer-height := 36px
|
||||
|
||||
/** Lists */
|
||||
// List fonts and weights
|
||||
$list-tile-font-size := $headings.subheading.size // 16px - the mdc scss uses subheading to configure like this
|
||||
$list-tile-font-weight := $headings.subheading.weight // 400
|
||||
|
||||
$list-action-text-font-size := 12px // this is for the stacked actions
|
||||
$list-action-text-font-color := $grey.base
|
||||
|
||||
$list-sub-title-font-size := ($list-tile-font-size - 2px) // 14px
|
||||
|
||||
$subheader-height-font-size := ($list-tile-font-size - 2px) // 14px
|
||||
$subheader-font-weight := $font-weights.medium // 500
|
||||
|
||||
|
||||
// List spacing
|
||||
$list-left-padding := 16px
|
||||
$list-right-padding := 16px
|
||||
$list-top-padding := 8px
|
||||
$list-bottom-padding := 8px
|
||||
|
||||
$list-item-right-margin := 56px
|
||||
$list-item-left-padding := 72px
|
||||
$list-item-avatar-triple-margin-top := -18px
|
||||
$list-item-single-height := 48px
|
||||
$list-item-double-height := 72px
|
||||
$list-item-triple-height := 88px
|
||||
$list-item-avatar-single-height := 56px
|
||||
|
||||
$subheader-inset-margin := $list-item-right-margin
|
||||
|
||||
// List dense overrides
|
||||
$list-item-dense-font-size := ($list-tile-font-size - 3px) //13px
|
||||
$subheader-dense-font-size := $list-item-dense-font-size
|
||||
$list-item-dense-icon-font-size := 22px
|
||||
$list-item-dense-avatar-triple-margin-top := -14px
|
||||
$list-item-dense-top-padding := $list-top-padding / 2
|
||||
$list-item-dense-single-height := $list-item-single-height - 8px //40px
|
||||
$list-item-dense-double-height := $list-item-double-height - 12px //60px
|
||||
$list-item-dense-triple-height := $list-item-triple-height - 12px //76px
|
||||
|
||||
$list-item-dense-avatar-single-height := $list-item-single-height //48px the dense concept was to take avatars to a normal single item height
|
||||
$list-item-dense-avatar-height := 38px
|
||||
|
||||
$list-dense-subheader-height := $list-item-dense-single-height
|
||||
$list-dense-subheader-group-height := $list-dense-subheader-height //the subheader under a group menu
|
||||
|
||||
// Paper
|
||||
$sheet-border-radius := 2px
|
||||
|
||||
// Pickers
|
||||
$time-picker-number-font-size := 16px
|
||||
$time-picker-indicator-size := 40px
|
||||
|
||||
// Toolbar
|
||||
$toolbar-height := 56px
|
||||
$toolbar-item-padding := 0 16px
|
||||
$toolbar-padding-y := 0
|
||||
$toolbar-padding-x := 16px
|
||||
|
||||
// Progress Circular
|
||||
$progress-circular-rotate-animation := progress-circular-rotate 1.4s linear infinite
|
||||
$progress-circular-rotate-dash := progress-circular-dash 1.4s ease-in-out infinite
|
||||
$process-circular-intermediate-svg-transition := all .2s ease-in-out
|
||||
$progress-circular-underlay-stroke := rgba($material-light.fg-color, 0.1)
|
||||
$progress-circular-overlay-transition := all .6s ease-in-out
|
||||
|
||||
// Navigation drawer
|
||||
$navigation-drawer-item-font-size := 14px
|
||||
$navigation-drawer-item-font-weight := $font-weights.medium
|
||||
$navigation-drawer-group-item-font-weight := $font-weights.regular
|
||||
|
||||
// Snackbar
|
||||
$snackbar-color := #fff
|
||||
$snackbar-background-color := #323232
|
||||
$snackbar-corner-offset := 24px
|
||||
|
||||
// Tab
|
||||
$tab-text-transform := uppercase
|
||||
|
||||
// Inputs
|
||||
$input-top-spacing := 16px
|
||||
$text-field-active-label-height := 12px
|
||||
|
||||
// Timeline
|
||||
$timeline-wedge-size := 10px
|
||||
$timeline-dot-small-size := 24px
|
||||
$timeline-dot-regular-size := 38px
|
||||
$timeline-dot-large-size := 52px
|
||||
|
||||
$timeline-inner-dot-small-size := 18px
|
||||
$timeline-inner-dot-small-margin := 3px
|
||||
$timeline-inner-dot-regular-size := 30px
|
||||
$timeline-inner-dot-regular-margin := 4px
|
||||
$timeline-inner-dot-large-size := 42px
|
||||
$timeline-inner-dot-large-margin := 5px
|
||||
|
||||
// Calendar
|
||||
$calendar-daily-weekday-padding := 4px 4px 4px 8px
|
||||
$calendar-daily-weekday-font-size := 14px
|
||||
$calendar-daily-day-padding := 0px 4px 4px 8px
|
||||
$calendar-daily-day-font-size := 40px
|
||||
$calendar-daily-day-line-height := 40px
|
||||
$calendar-daily-interval-gutter-width := 44px
|
||||
$calendar-daily-interval-gutter-top := -6px
|
||||
$calendar-daily-interval-gutter-font-size := 10px
|
||||
|
||||
$calendar-weekly-weekday-padding := 0px 4px 0px 4px
|
||||
$calendar-weekly-weekday-font-size := 14px
|
||||
$calendar-weekly-day-padding := 32px 4px 4px 4px
|
||||
$calendar-weekly-day-label-size := 32px
|
||||
$calendar-weekly-day-label-radius := 16px
|
||||
$calendar-weekly-day-month-left := 36px
|
||||
|
||||
// Directives
|
||||
// ============================================================
|
||||
|
||||
// Ripple animation
|
||||
$ripple-animation-transition-in := transform .25s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
|
||||
$ripple-animation-transition-out := opacity .3s $transition.fast-out-slow-in
|
||||
$ripple-animation-visible-opacity := .15
|
||||
|
||||
// Treeview transition
|
||||
$treeview-transition := .2s $transition.linear-out-slow-in
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@import './settings/_theme.styl'
|
||||
|
||||
theme($component, $name)
|
||||
light($component, $name)
|
||||
dark($component, $name)
|
||||
|
||||
light($component, $name)
|
||||
.theme--light.{$name}
|
||||
$component($material-light)
|
||||
|
||||
dark($component, $name)
|
||||
.theme--dark.{$name}
|
||||
$component($material-dark)
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
bootable()
|
||||
transition: none
|
||||
|
||||
&[data-booted="true"]
|
||||
transition: .2s $transition.fast-out-slow-in
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
for $size, $media_query in $display-breakpoints
|
||||
.hidden
|
||||
&-{$size}
|
||||
@media $media_query
|
||||
display: none !important
|
||||
|
||||
.overflow-hidden
|
||||
overflow: hidden
|
||||
|
||||
.overflow-x-hidden
|
||||
overflow-x: hidden
|
||||
|
||||
.overflow-y-hidden
|
||||
overflow-y: hidden
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
.right
|
||||
float: right !important
|
||||
|
||||
.left
|
||||
float: left !important
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
.ma-auto
|
||||
margin-top: auto !important
|
||||
margin-right: auto !important
|
||||
margin-bottom: auto !important
|
||||
margin-left: auto !important
|
||||
|
||||
.my-auto
|
||||
margin-top: auto !important
|
||||
margin-bottom: auto !important
|
||||
|
||||
.mx-auto
|
||||
margin-left: auto !important
|
||||
margin-right: auto !important
|
||||
|
||||
.mt-auto
|
||||
margin-top: auto !important
|
||||
|
||||
.mr-auto
|
||||
margin-right: auto !important
|
||||
|
||||
.mb-auto
|
||||
margin-bottom: auto !important
|
||||
|
||||
.ml-auto
|
||||
margin-left: auto !important
|
||||
|
||||
$i = 0
|
||||
for $level, $spacer in $spacers
|
||||
.ma-{$i}
|
||||
margin: $spacer.y $spacer.x !important
|
||||
.my-{$i}
|
||||
margin-top: $spacer.y !important
|
||||
margin-bottom: $spacer.y !important
|
||||
.mx-{$i}
|
||||
margin-left: $spacer.x !important
|
||||
margin-right: $spacer.x !important
|
||||
.mt-{$i}
|
||||
margin-top: $spacer.y !important
|
||||
.mr-{$i}
|
||||
margin-right: $spacer.x !important
|
||||
.mb-{$i}
|
||||
margin-bottom: $spacer.y !important
|
||||
.ml-{$i}
|
||||
margin-left: $spacer.x !important
|
||||
|
||||
.pa-{$i}
|
||||
padding: $spacer.y $spacer.x !important
|
||||
.py-{$i}
|
||||
padding-top: $spacer.y !important
|
||||
padding-bottom: $spacer.y !important
|
||||
.px-{$i}
|
||||
padding-left: $spacer.x !important
|
||||
padding-right: $spacer.x !important
|
||||
.pt-{$i}
|
||||
padding-top: $spacer.y !important
|
||||
.pr-{$i}
|
||||
padding-right: $spacer.x !important
|
||||
.pb-{$i}
|
||||
padding-bottom: $spacer.y !important
|
||||
.pl-{$i}
|
||||
padding-left: $spacer.x !important
|
||||
|
||||
$i = $i + 1
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
for $size, $width in $grid-breakpoints
|
||||
@media all and (min-width: $width)
|
||||
.text-{$size}-left
|
||||
text-align: left !important
|
||||
|
||||
.text-{$size}-center
|
||||
text-align: center !important
|
||||
|
||||
.text-{$size}-right
|
||||
text-align: right !important
|
||||
|
||||
.text-{$size}-justify
|
||||
text-align: justify !important
|
||||
|
||||
for $name, $weight in $font-weights
|
||||
.font-weight
|
||||
&-{$name}
|
||||
font-weight: $weight !important
|
||||
|
||||
.font-italic
|
||||
font-style: italic !important
|
||||
|
||||
.text-capitalize
|
||||
text-transform: capitalize !important
|
||||
|
||||
.text-lowercase
|
||||
text-transform: lowercase !important
|
||||
|
||||
.text-none
|
||||
text-transform: none !important
|
||||
|
||||
.text-uppercase
|
||||
text-transform: uppercase !important
|
||||
|
||||
.text-no-wrap
|
||||
white-space: nowrap !important
|
||||
|
||||
.text-truncate
|
||||
white-space: nowrap !important
|
||||
overflow: hidden !important
|
||||
text-overflow: ellipsis !important
|
||||
line-height: 1.1 !important
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user