123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- @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
- 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
|