vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VExpansionPanel/VExpansionPanel.sass

@@ -3,188 +3,189 @@
 @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
+@include tools.layer('components')
+  // 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:not(:last-child)
+        border-bottom-left-radius: 0 !important
+        border-bottom-right-radius: 0 !important
+
+      > :last-child:not(:first-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
-        // 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:not(:last-child)
-      border-bottom-left-radius: 0 !important
-      border-bottom-right-radius: 0 !important
-
-    > :last-child:not(:first-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
+        transition: 0.3s border-radius settings.$standard-easing
 
-      &::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', false)
-
-  &--focusable.v-expansion-panel-title--active
-    @include tools.active-states('.v-expansion-panel-title__overlay')
-
-.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
+  // 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
 
-// Variants
-.v-expansion-panels--variant-accordion
-  > .v-expansion-panel
-    margin-top: 0
-
-    &::after
-      opacity: 1
+    &--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', false)
+
+    &--focusable.v-expansion-panel-title--active
+      @include tools.active-states('.v-expansion-panel-title__overlay')
+
+  .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
 
-.v-expansion-panels--variant-popout
-  > .v-expansion-panel
-    max-width: $expansion-panel-popout-max-width
+      &::after
+        opacity: 1
 
-    &--active
-      max-width: $expansion-panel-popout-active-max-width
+  .v-expansion-panels--variant-popout
+    > .v-expansion-panel
+      max-width: $expansion-panel-popout-max-width
 
-.v-expansion-panels--variant-inset
-  > .v-expansion-panel
-    max-width: $expansion-panel-inset-max-width
+      &--active
+        max-width: $expansion-panel-popout-active-max-width
 
-    &--active
-      max-width: $expansion-panel-inset-active-max-width
+  .v-expansion-panels--variant-inset
+    > .v-expansion-panel
+      max-width: $expansion-panel-inset-max-width
 
-.v-expansion-panels--flat
-  > .v-expansion-panel
-    &::after
-      border-top: none
+      &--active
+        max-width: $expansion-panel-inset-active-max-width
 
-    .v-expansion-panel__shadow
-      display: none
+  .v-expansion-panels--flat
+    > .v-expansion-panel
+      &::after
+        border-top: none
 
-.v-expansion-panels--tile
-  border-radius: 0
+      .v-expansion-panel__shadow
+        display: none
 
-  > .v-expansion-panel
+  .v-expansion-panels--tile
     border-radius: 0
+
+    > .v-expansion-panel
+      border-radius: 0