vuetify eingebunden + erster Versuch Combobox
This commit is contained in:
+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
|
||||
Reference in New Issue
Block a user