199 lines
4.2 KiB
Sass
199 lines
4.2 KiB
Sass
|
@use '../../styles/tools'
|
||
|
|
@use './variables' as *
|
||
|
|
@use './mixins' as *
|
||
|
|
|
||
|
|
.v-card
|
||
|
|
display: block
|
||
|
|
overflow: hidden
|
||
|
|
overflow-wrap: $card-overflow-wrap
|
||
|
|
position: relative
|
||
|
|
padding: $card-padding
|
||
|
|
text-decoration: none
|
||
|
|
transition-duration: $card-transition-duration
|
||
|
|
transition-property: $card-transition-property
|
||
|
|
transition-timing-function: $card-transition-timing-function
|
||
|
|
z-index: 0
|
||
|
|
|
||
|
|
@include tools.border($card-border...)
|
||
|
|
@include tools.position($card-positions)
|
||
|
|
@include tools.rounded($card-border-radius)
|
||
|
|
@include tools.states('.v-card__overlay')
|
||
|
|
@include tools.variant($card-variants...)
|
||
|
|
|
||
|
|
&--disabled
|
||
|
|
pointer-events: none
|
||
|
|
user-select: none
|
||
|
|
|
||
|
|
>:not(.v-card__loader)
|
||
|
|
opacity: $card-disabled-opacity
|
||
|
|
|
||
|
|
&--flat
|
||
|
|
box-shadow: none
|
||
|
|
|
||
|
|
&--hover
|
||
|
|
cursor: pointer
|
||
|
|
|
||
|
|
&::before,
|
||
|
|
&::after
|
||
|
|
border-radius: inherit
|
||
|
|
bottom: 0
|
||
|
|
content: ''
|
||
|
|
display: block
|
||
|
|
left: 0
|
||
|
|
pointer-events: none
|
||
|
|
position: absolute
|
||
|
|
right: 0
|
||
|
|
top: 0
|
||
|
|
transition: inherit
|
||
|
|
|
||
|
|
&::before
|
||
|
|
opacity: 1
|
||
|
|
z-index: -1
|
||
|
|
|
||
|
|
@include tools.elevation($card-elevation)
|
||
|
|
|
||
|
|
&::after
|
||
|
|
z-index: 1
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
@include tools.elevation($card-hover-elevation)
|
||
|
|
|
||
|
|
&:hover::after
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
&:hover::before
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
@include tools.elevation($card-hover-elevation)
|
||
|
|
|
||
|
|
&--link
|
||
|
|
cursor: pointer
|
||
|
|
|
||
|
|
.v-card-actions
|
||
|
|
align-items: center
|
||
|
|
display: flex
|
||
|
|
flex: $card-actions-flex
|
||
|
|
min-height: $card-actions-min-height
|
||
|
|
padding: $card-actions-padding
|
||
|
|
|
||
|
|
.v-card-item
|
||
|
|
align-items: $card-item-align-items
|
||
|
|
display: grid
|
||
|
|
flex: $card-header-flex
|
||
|
|
grid-template-areas: "prepend content append"
|
||
|
|
grid-template-columns: max-content auto max-content
|
||
|
|
padding: $card-item-padding
|
||
|
|
|
||
|
|
+ .v-card-text
|
||
|
|
padding-top: 0
|
||
|
|
|
||
|
|
&__prepend,
|
||
|
|
&__append
|
||
|
|
align-items: center
|
||
|
|
display: flex
|
||
|
|
|
||
|
|
&__prepend
|
||
|
|
grid-area: prepend
|
||
|
|
padding-inline-end: $card-prepend-padding-inline-end
|
||
|
|
|
||
|
|
&__append
|
||
|
|
grid-area: append
|
||
|
|
padding-inline-start: $card-append-padding-inline-start
|
||
|
|
|
||
|
|
.v-card-item__content
|
||
|
|
align-self: center
|
||
|
|
grid-area: content
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.v-card-title
|
||
|
|
display: block
|
||
|
|
flex: $card-title-flex
|
||
|
|
font-size: $card-title-font-size
|
||
|
|
font-weight: $card-title-font-weight
|
||
|
|
hyphens: $card-title-hyphens
|
||
|
|
letter-spacing: $card-title-letter-spacing
|
||
|
|
min-width: 0
|
||
|
|
overflow-wrap: $card-title-overflow-wrap
|
||
|
|
overflow: $card-title-overflow
|
||
|
|
padding: $card-title-padding
|
||
|
|
text-overflow: $card-title-text-overflow
|
||
|
|
text-transform: $card-title-text-transform
|
||
|
|
white-space: $card-title-white-space
|
||
|
|
word-break: $card-title-word-break
|
||
|
|
word-wrap: $card-title-word-wrap
|
||
|
|
|
||
|
|
@include card-line-height-densities($card-title-densities)
|
||
|
|
|
||
|
|
.v-card-item &
|
||
|
|
padding: $card-title-header-padding
|
||
|
|
|
||
|
|
+ .v-card-text,
|
||
|
|
+ .v-card-actions
|
||
|
|
padding-top: 0
|
||
|
|
|
||
|
|
.v-card-subtitle
|
||
|
|
display: block
|
||
|
|
flex: $card-subtitle-flex
|
||
|
|
font-size: $card-subtitle-font-size
|
||
|
|
font-weight: $card-subtitle-font-weight
|
||
|
|
letter-spacing: $card-subtitle-letter-spacing
|
||
|
|
opacity: $card-subtitle-opacity
|
||
|
|
overflow: $card-subtitle-overflow
|
||
|
|
padding: $card-subtitle-padding
|
||
|
|
text-overflow: $card-subtitle-text-overflow
|
||
|
|
text-transform: $card-subtitle-text-transform
|
||
|
|
white-space: $card-subtitle-white-space
|
||
|
|
|
||
|
|
@include card-line-height-densities($card-subtitle-density-line-height)
|
||
|
|
|
||
|
|
.v-card-item &
|
||
|
|
padding: $card-subtitle-header-padding
|
||
|
|
|
||
|
|
.v-card-text
|
||
|
|
flex: $card-text-flex
|
||
|
|
font-size: $card-text-font-size
|
||
|
|
font-weight: $card-text-font-weight
|
||
|
|
letter-spacing: $card-text-letter-spacing
|
||
|
|
padding: $card-text-padding
|
||
|
|
text-transform: $card-text-text-transform
|
||
|
|
|
||
|
|
@include card-line-height-densities($card-text-density-line-height)
|
||
|
|
|
||
|
|
.v-card__image
|
||
|
|
display: flex
|
||
|
|
height: 100%
|
||
|
|
flex: $card-img-flex
|
||
|
|
left: 0
|
||
|
|
overflow: hidden
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
width: 100%
|
||
|
|
z-index: -1
|
||
|
|
|
||
|
|
.v-card__content
|
||
|
|
border-radius: inherit
|
||
|
|
overflow: hidden
|
||
|
|
position: relative
|
||
|
|
|
||
|
|
.v-card__loader
|
||
|
|
bottom: $card-loader-bottom
|
||
|
|
top: $card-loader-top
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
right: 0
|
||
|
|
width: 100%
|
||
|
|
z-index: 1
|
||
|
|
|
||
|
|
.v-card__overlay
|
||
|
|
background-color: currentColor
|
||
|
|
border-radius: inherit
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
right: 0
|
||
|
|
bottom: 0
|
||
|
|
left: 0
|
||
|
|
pointer-events: none
|
||
|
|
opacity: 0
|
||
|
|
transition: opacity 0.2s ease-in-out
|