267 lines
6.4 KiB
Sass
267 lines
6.4 KiB
Sass
@use 'sass:math'
|
|
@use 'sass:map'
|
|
@use 'sass:meta'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './mixins' as *
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-btn
|
|
align-items: center
|
|
border-radius: $button-border-radius
|
|
display: inline-flex
|
|
flex-direction: row
|
|
font-weight: $button-font-weight
|
|
justify-content: center
|
|
letter-spacing: $button-text-letter-spacing
|
|
line-height: $button-line-height
|
|
max-width: $button-max-width
|
|
outline: none
|
|
position: relative
|
|
text-decoration: none
|
|
text-indent: $button-text-letter-spacing
|
|
text-transform: $button-text-transform
|
|
transition-property: $button-transition-property
|
|
transition-duration: 0.28s
|
|
transition-timing-function: settings.$standard-easing
|
|
user-select: none
|
|
vertical-align: $button-vertical-align
|
|
flex-shrink: 0
|
|
|
|
.v-locale--is-rtl &
|
|
@if meta.type-of($button-text-letter-spacing) == 'number'
|
|
text-indent: -1 * $button-text-letter-spacing
|
|
|
|
@at-root
|
|
@include button-sizes()
|
|
@include button-density('height', $button-density)
|
|
|
|
@include tools.border($button-border...)
|
|
@include tools.position($button-positions)
|
|
@include tools.states('.v-btn__overlay')
|
|
@include tools.variant($button-variants...)
|
|
|
|
@supports selector(:focus-visible)
|
|
&::after
|
|
pointer-events: none
|
|
border: 2px solid currentColor
|
|
border-radius: inherit
|
|
opacity: 0
|
|
transition: opacity .2s ease-in-out
|
|
@include tools.absolute(true)
|
|
|
|
&:focus-visible::after
|
|
opacity: calc(.25 * var(--v-theme-overlay-multiplier))
|
|
|
|
&--icon
|
|
border-radius: $button-icon-border-radius
|
|
min-width: 0
|
|
padding: 0
|
|
|
|
// ensure that default
|
|
// v-icon size is 24px
|
|
&.v-btn--size-default
|
|
--v-btn-size: #{$button-icon-font-size}
|
|
|
|
@at-root &
|
|
@include button-density(('width', 'height'), $button-icon-density)
|
|
|
|
&--elevated
|
|
&:hover,
|
|
&:focus
|
|
@include tools.elevation(map.get($button-elevation, 'hover'))
|
|
|
|
&:active
|
|
@include tools.elevation(map.get($button-elevation, 'active'))
|
|
|
|
&--flat
|
|
box-shadow: none
|
|
|
|
&--block
|
|
display: flex
|
|
flex: 1 0 auto
|
|
min-width: 100%
|
|
|
|
&--spaced
|
|
.v-btn__content
|
|
flex-grow: 1
|
|
|
|
&.v-btn--spaced-start > .v-btn__content
|
|
justify-content: end
|
|
|
|
&.v-btn--spaced-end > .v-btn__content
|
|
justify-content: start
|
|
|
|
&--disabled
|
|
pointer-events: none
|
|
|
|
@if ($button-colored-disabled)
|
|
opacity: $button-disabled-opacity
|
|
&:hover
|
|
opacity: $button-disabled-opacity
|
|
@else
|
|
opacity: 1
|
|
@include tools.layer('trumps')
|
|
color: tools.theme-color('on-surface', $button-disabled-opacity)
|
|
|
|
&.v-btn--variant-elevated,
|
|
&.v-btn--variant-flat
|
|
box-shadow: none
|
|
|
|
@if ($button-colored-disabled)
|
|
opacity: 1
|
|
color: tools.theme-color('on-surface', $button-disabled-opacity)
|
|
background: rgb(var(--v-theme-surface))
|
|
@else
|
|
@include tools.layer('trumps')
|
|
background: rgb(var(--v-theme-surface))
|
|
|
|
.v-btn__overlay
|
|
// __overlay uses currentColor, so we need to divide
|
|
// by the text opacity to get the correct value
|
|
opacity: math.div($button-disabled-overlay, $button-disabled-opacity)
|
|
|
|
&--loading
|
|
pointer-events: none
|
|
|
|
.v-btn__content,
|
|
.v-btn__prepend,
|
|
.v-btn__append
|
|
opacity: 0
|
|
|
|
&--stacked
|
|
align-items: center
|
|
flex-direction: column
|
|
justify-content: center
|
|
gap: $button-stacked-gap
|
|
|
|
.v-btn__content
|
|
flex-direction: column
|
|
line-height: $button-stacked-line-height
|
|
|
|
.v-btn__prepend,
|
|
.v-btn__append,
|
|
.v-btn__content > .v-icon--start,
|
|
.v-btn__content > .v-icon--end
|
|
margin-inline: 0
|
|
|
|
@at-root
|
|
@include button-sizes($button-stacked-sizes, true)
|
|
@include button-density('height', $button-stacked-density)
|
|
|
|
&--slim
|
|
padding: $button-slim-padding
|
|
|
|
&--readonly
|
|
pointer-events: none
|
|
|
|
&--rounded
|
|
@include tools.rounded($button-rounded-border-radius)
|
|
|
|
&.v-btn--icon
|
|
@include tools.rounded($button-border-radius)
|
|
|
|
.v-icon
|
|
--v-icon-size-multiplier: #{calc(18/21)}
|
|
|
|
&--icon
|
|
.v-icon
|
|
--v-icon-size-multiplier: 1
|
|
|
|
&--stacked
|
|
.v-icon
|
|
--v-icon-size-multiplier: #{calc(24/21)}
|
|
|
|
&.v-btn--block
|
|
min-width: 100%
|
|
|
|
.v-btn__loader
|
|
align-items: center
|
|
display: flex
|
|
height: 100%
|
|
justify-content: center
|
|
left: 0
|
|
position: absolute
|
|
top: 0
|
|
width: 100%
|
|
|
|
> .v-progress-circular
|
|
width: $button-loader-size
|
|
height: $button-loader-size
|
|
|
|
.v-btn__content,
|
|
.v-btn__prepend,
|
|
.v-btn__append
|
|
align-items: center
|
|
display: flex
|
|
transition: $button-content-transition
|
|
|
|
.v-btn__prepend
|
|
margin-inline: $button-margin-start $button-margin-end
|
|
|
|
.v-btn--slim &
|
|
margin-inline-start: 0
|
|
|
|
.v-btn__append
|
|
margin-inline: $button-margin-end $button-margin-start
|
|
|
|
.v-btn--slim &
|
|
margin-inline-end: 0
|
|
|
|
.v-btn__content
|
|
justify-content: center
|
|
white-space: $button-white-space
|
|
|
|
> .v-icon--start
|
|
margin-inline: $button-margin-start $button-margin-end
|
|
|
|
> .v-icon--end
|
|
margin-inline: $button-margin-end $button-margin-start
|
|
|
|
.v-btn--stacked &
|
|
white-space: normal
|
|
|
|
.v-btn__overlay
|
|
background-color: currentColor
|
|
border-radius: inherit
|
|
opacity: 0
|
|
transition: opacity .2s ease-in-out
|
|
|
|
.v-btn__overlay,
|
|
.v-btn__underlay
|
|
pointer-events: none
|
|
@include tools.absolute()
|
|
|
|
// VPagination
|
|
.v-pagination
|
|
.v-btn
|
|
width: auto
|
|
padding-inline: $button-pagination-padding-inline
|
|
@include button-density('min-width', $button-icon-density)
|
|
@include tools.rounded($button-pagination-border-radius)
|
|
|
|
&--rounded
|
|
@include tools.rounded($button-pagination-rounded-border-radius)
|
|
|
|
&__overlay
|
|
transition: none
|
|
|
|
&__prev,
|
|
&__next
|
|
.v-btn
|
|
padding-inline: 0
|
|
@include button-density('width', $button-icon-density)
|
|
|
|
.v-pagination__item--is-active .v-btn__overlay
|
|
opacity: $button-pagination-active-overlay-opacity
|
|
|
|
@media (forced-colors: active)
|
|
.v-btn
|
|
&:not(&--variant-text, &--variant-plain)
|
|
border: thin solid
|
|
|
|
&:focus-visible
|
|
outline: 2px solid
|
|
outline-offset: 2px
|