VExpansionPanel.sass 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. @use 'sass:math'
  2. @use '../../styles/settings'
  3. @use '../../styles/tools'
  4. @use './variables' as *
  5. // Theme
  6. .v-expansion-panel
  7. background-color: $expansion-panel-background-color
  8. color: $expansion-panel-color
  9. &:not(:first-child)::after
  10. border-color: $expansion-panel-border-color
  11. &--disabled
  12. .v-expansion-panel-title
  13. color: $expansion-panel-disabled-color
  14. .v-expansion-panel-title__overlay
  15. // This is multiplied by the text opacity,
  16. // so we need to divide it to get the desired value
  17. // TODO: Should disabled be part of states mixin?
  18. opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity)
  19. // Block
  20. .v-expansion-panels
  21. display: flex
  22. flex-wrap: wrap
  23. justify-content: center
  24. list-style-type: none
  25. padding: 0
  26. width: 100%
  27. position: relative
  28. z-index: 1
  29. &:not(&--variant-accordion)
  30. > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
  31. border-bottom-left-radius: 0 !important
  32. border-bottom-right-radius: 0 !important
  33. > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
  34. border-top-left-radius: 0 !important
  35. border-top-right-radius: 0 !important
  36. > :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
  37. border-bottom-left-radius: 0 !important
  38. border-bottom-right-radius: 0 !important
  39. > :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
  40. border-top-left-radius: 0 !important
  41. border-top-right-radius: 0 !important
  42. &--variant-accordion
  43. > :first-child
  44. border-bottom-left-radius: 0 !important
  45. border-bottom-right-radius: 0 !important
  46. > :last-child
  47. border-top-left-radius: 0 !important
  48. border-top-right-radius: 0 !important
  49. .v-expansion-panel-title--active
  50. border-bottom-left-radius: initial
  51. border-bottom-right-radius: initial
  52. > :not(:first-child):not(:last-child)
  53. border-radius: 0 !important
  54. .v-expansion-panel-title__overlay
  55. transition: 0.3s border-radius settings.$standard-easing
  56. // Element
  57. .v-expansion-panel
  58. flex: 1 0 100%
  59. max-width: 100%
  60. position: relative
  61. transition: .3s all settings.$standard-easing
  62. transition-property: margin-top, border-radius, border, max-width
  63. border-radius: $expansion-panel-border-radius
  64. &:not(:first-child)::after
  65. border-top-style: solid
  66. border-top-width: thin
  67. content: ''
  68. left: 0
  69. position: absolute
  70. right: 0
  71. top: 0
  72. transition: 0.3s opacity settings.$standard-easing
  73. &--disabled
  74. .v-expansion-panel-title
  75. pointer-events: none
  76. &--active
  77. &:not(:first-child),
  78. + .v-expansion-panel
  79. margin-top: $expansion-panel-active-margin
  80. &::after
  81. opacity: 0
  82. > .v-expansion-panel-title
  83. border-bottom-left-radius: 0
  84. border-bottom-right-radius: 0
  85. min-height: $expansion-panel-active-title-min-height
  86. .v-expansion-panel__shadow
  87. @include tools.absolute()
  88. @include tools.elevation(2)
  89. border-radius: inherit
  90. z-index: -1
  91. .v-expansion-panel-title
  92. align-items: center
  93. text-align: start
  94. border-radius: inherit
  95. display: flex
  96. font-size: $expansion-panel-title-font-size
  97. line-height: 1
  98. min-height: $expansion-panel-title-min-height
  99. outline: none
  100. padding: $expansion-panel-title-padding
  101. position: relative
  102. transition: .3s min-height settings.$standard-easing
  103. width: 100%
  104. justify-content: space-between
  105. @include tools.states('.v-expansion-panel-title__overlay', true)
  106. &--active::before
  107. opacity: 0.12
  108. .v-expansion-panel-title__overlay
  109. @include tools.absolute()
  110. background-color: currentColor
  111. border-radius: inherit
  112. opacity: 0
  113. .v-expansion-panel-title__icon
  114. display: inline-flex
  115. margin-bottom: -4px
  116. margin-top: -4px
  117. user-select: none
  118. margin-inline-start: auto
  119. .v-expansion-panel-text
  120. display: flex
  121. &__wrapper
  122. padding: $expansion-panel-text-padding
  123. flex: 1 1 auto
  124. max-width: 100%
  125. // Variants
  126. .v-expansion-panels--variant-accordion
  127. > .v-expansion-panel
  128. margin-top: 0
  129. &::after
  130. opacity: 1
  131. .v-expansion-panels--variant-popout
  132. > .v-expansion-panel
  133. max-width: $expansion-panel-popout-max-width
  134. &--active
  135. max-width: $expansion-panel-popout-active-max-width
  136. .v-expansion-panels--variant-inset
  137. > .v-expansion-panel
  138. max-width: $expansion-panel-inset-max-width
  139. &--active
  140. max-width: $expansion-panel-inset-active-max-width