176 lines
4.6 KiB
Sass
176 lines
4.6 KiB
Sass
|
@use 'sass:math'
|
||
|
|
@use '../../styles/settings'
|
||
|
|
@use '../../styles/tools'
|
||
|
|
@use './variables' as *
|
||
|
|
|
||
|
|
// Theme
|
||
|
|
.v-expansion-panel
|
||
|
|
background-color: $expansion-panel-background-color
|
||
|
|
color: $expansion-panel-color
|
||
|
|
|
||
|
|
&:not(:first-child)::after
|
||
|
|
border-color: $expansion-panel-border-color
|
||
|
|
|
||
|
|
&--disabled
|
||
|
|
.v-expansion-panel-title
|
||
|
|
color: $expansion-panel-disabled-color
|
||
|
|
|
||
|
|
.v-expansion-panel-title__overlay
|
||
|
|
// This is multiplied by the text opacity,
|
||
|
|
// so we need to divide it to get the desired value
|
||
|
|
// TODO: Should disabled be part of states mixin?
|
||
|
|
opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity)
|
||
|
|
|
||
|
|
// Block
|
||
|
|
.v-expansion-panels
|
||
|
|
display: flex
|
||
|
|
flex-wrap: wrap
|
||
|
|
justify-content: center
|
||
|
|
list-style-type: none
|
||
|
|
padding: 0
|
||
|
|
width: 100%
|
||
|
|
position: relative
|
||
|
|
z-index: 1
|
||
|
|
|
||
|
|
&:not(&--variant-accordion)
|
||
|
|
> :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
|
||
|
|
border-bottom-left-radius: 0 !important
|
||
|
|
border-bottom-right-radius: 0 !important
|
||
|
|
|
||
|
|
> :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
|
||
|
|
border-top-left-radius: 0 !important
|
||
|
|
border-top-right-radius: 0 !important
|
||
|
|
|
||
|
|
> :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
|
||
|
|
border-bottom-left-radius: 0 !important
|
||
|
|
border-bottom-right-radius: 0 !important
|
||
|
|
|
||
|
|
> :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
|
||
|
|
border-top-left-radius: 0 !important
|
||
|
|
border-top-right-radius: 0 !important
|
||
|
|
|
||
|
|
&--variant-accordion
|
||
|
|
> :first-child
|
||
|
|
border-bottom-left-radius: 0 !important
|
||
|
|
border-bottom-right-radius: 0 !important
|
||
|
|
|
||
|
|
> :last-child
|
||
|
|
border-top-left-radius: 0 !important
|
||
|
|
border-top-right-radius: 0 !important
|
||
|
|
|
||
|
|
.v-expansion-panel-title--active
|
||
|
|
border-bottom-left-radius: initial
|
||
|
|
border-bottom-right-radius: initial
|
||
|
|
|
||
|
|
> :not(:first-child):not(:last-child)
|
||
|
|
border-radius: 0 !important
|
||
|
|
|
||
|
|
.v-expansion-panel-title__overlay
|
||
|
|
transition: 0.3s border-radius settings.$standard-easing
|
||
|
|
|
||
|
|
// Element
|
||
|
|
.v-expansion-panel
|
||
|
|
flex: 1 0 100%
|
||
|
|
max-width: 100%
|
||
|
|
position: relative
|
||
|
|
transition: .3s all settings.$standard-easing
|
||
|
|
transition-property: margin-top, border-radius, border, max-width
|
||
|
|
border-radius: $expansion-panel-border-radius
|
||
|
|
|
||
|
|
&:not(:first-child)::after
|
||
|
|
border-top-style: solid
|
||
|
|
border-top-width: thin
|
||
|
|
content: ''
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
right: 0
|
||
|
|
top: 0
|
||
|
|
transition: 0.3s opacity settings.$standard-easing
|
||
|
|
|
||
|
|
&--disabled
|
||
|
|
.v-expansion-panel-title
|
||
|
|
pointer-events: none
|
||
|
|
|
||
|
|
&--active
|
||
|
|
&:not(:first-child),
|
||
|
|
+ .v-expansion-panel
|
||
|
|
margin-top: $expansion-panel-active-margin
|
||
|
|
|
||
|
|
&::after
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
> .v-expansion-panel-title
|
||
|
|
border-bottom-left-radius: 0
|
||
|
|
border-bottom-right-radius: 0
|
||
|
|
|
||
|
|
&:not(.v-expansion-panel-title--static)
|
||
|
|
min-height: $expansion-panel-active-title-min-height
|
||
|
|
|
||
|
|
.v-expansion-panel__shadow
|
||
|
|
@include tools.absolute()
|
||
|
|
@include tools.elevation(2)
|
||
|
|
border-radius: inherit
|
||
|
|
z-index: -1
|
||
|
|
|
||
|
|
.v-expansion-panel-title
|
||
|
|
align-items: center
|
||
|
|
text-align: start
|
||
|
|
border-radius: inherit
|
||
|
|
display: flex
|
||
|
|
font-size: $expansion-panel-title-font-size
|
||
|
|
line-height: 1
|
||
|
|
min-height: $expansion-panel-title-min-height
|
||
|
|
outline: none
|
||
|
|
padding: $expansion-panel-title-padding
|
||
|
|
position: relative
|
||
|
|
transition: .3s min-height settings.$standard-easing
|
||
|
|
width: 100%
|
||
|
|
justify-content: space-between
|
||
|
|
@include tools.states('.v-expansion-panel-title__overlay', true)
|
||
|
|
|
||
|
|
&--active::before
|
||
|
|
opacity: 0.12
|
||
|
|
|
||
|
|
.v-expansion-panel-title__overlay
|
||
|
|
@include tools.absolute()
|
||
|
|
background-color: currentColor
|
||
|
|
border-radius: inherit
|
||
|
|
opacity: 0
|
||
|
|
|
||
|
|
.v-expansion-panel-title__icon
|
||
|
|
display: inline-flex
|
||
|
|
margin-bottom: -4px
|
||
|
|
margin-top: -4px
|
||
|
|
user-select: none
|
||
|
|
margin-inline-start: auto
|
||
|
|
|
||
|
|
.v-expansion-panel-text
|
||
|
|
display: flex
|
||
|
|
|
||
|
|
&__wrapper
|
||
|
|
padding: $expansion-panel-text-padding
|
||
|
|
flex: 1 1 auto
|
||
|
|
max-width: 100%
|
||
|
|
|
||
|
|
// Variants
|
||
|
|
.v-expansion-panels--variant-accordion
|
||
|
|
> .v-expansion-panel
|
||
|
|
margin-top: 0
|
||
|
|
|
||
|
|
&::after
|
||
|
|
opacity: 1
|
||
|
|
|
||
|
|
.v-expansion-panels--variant-popout
|
||
|
|
> .v-expansion-panel
|
||
|
|
max-width: $expansion-panel-popout-max-width
|
||
|
|
|
||
|
|
&--active
|
||
|
|
max-width: $expansion-panel-popout-active-max-width
|
||
|
|
|
||
|
|
.v-expansion-panels--variant-inset
|
||
|
|
> .v-expansion-panel
|
||
|
|
max-width: $expansion-panel-inset-max-width
|
||
|
|
|
||
|
|
&--active
|
||
|
|
max-width: $expansion-panel-inset-active-max-width
|