feat: support css cascade layers

vuetifyjs · Apr 18, 2024 · 34c1a0c · 34c1a0c
1 parent 69b5cc8
commit 34c1a0c
Show file tree

Hide file tree

Showing 125 changed files with 6,976 additions and 6,778 deletions.
diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass
@@ -1,132 +1,133 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-alert
-  display: grid
-  flex: 1 1
-  grid-template-areas: "prepend content append close" ". content . ."
-  grid-template-columns: max-content auto max-content max-content
-  position: relative
-  padding: $alert-padding
-  overflow: hidden
-  --v-border-color: #{$alert-border-color}
-
-  @include tools.position($alert-positions)
-  @include tools.rounded($alert-border-radius)
-  @include tools.variant($alert-variants...)
-
-  &--prominent
-    grid-template-areas: "prepend content append close" "prepend content . ."
-
-  &.v-alert--border
-    --v-border-opacity: #{$alert-border-opacity}
-
-    &.v-alert--border-start
-      padding-inline-start: $alert-padding + $alert-border-thin-width
-
-    &.v-alert--border-end
-      padding-inline-end: $alert-padding + $alert-border-thin-width
-
-  &--variant-plain
-    transition: $alert-plain-transition
-
-  @at-root
-    @include tools.density('v-alert', $alert-density) using ($modifier)
-      padding-bottom: $alert-padding + $modifier
-      padding-top: $alert-padding + $modifier
-
-      &.v-alert--border-top
-        padding-top: $alert-padding + $alert-border-thin-width + $modifier
-
-      &.v-alert--border-bottom
-        padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
-
-.v-alert__border
-  border-radius: inherit
-  bottom: 0
-  left: 0
-  opacity: var(--v-border-opacity)
-  position: absolute
-  pointer-events: none
-  right: 0
-  top: 0
-  width: 100%
-
-  @include tools.border($alert-border...)
-
-  .v-alert--border-start &
-    border-inline-start-width: $alert-border-thin-width
-
-  .v-alert--border-end &
-    border-inline-end-width: $alert-border-thin-width
-
-  .v-alert--border-top &
-    border-top-width: $alert-border-thin-width
-
-  .v-alert--border-bottom &
-    border-bottom-width: $alert-border-thin-width
-
-.v-alert__close
-  flex: 0 1 auto
-  grid-area: close
-
-.v-alert__content
-  align-self: center
-  grid-area: content
-  overflow: hidden
-
-.v-alert__append,
-.v-alert__close
-  align-self: flex-start
-  margin-inline-start: $alert-append-margin-inline-start
-
-.v-alert__append
-  align-self: flex-start
-  grid-area: append
-
-  + .v-alert__close
-    margin-inline-start: $alert-append-close-margin-inline-start
-
-.v-alert__prepend
-  align-self: flex-start
-  display: flex
-  align-items: center
-  grid-area: prepend
-  margin-inline-end: $alert-prepend-margin-inline-end
-
-  .v-alert--prominent &
+@include tools.layer('components')
+  .v-alert
+    display: grid
+    flex: 1 1
+    grid-template-areas: "prepend content append close" ". content . ."
+    grid-template-columns: max-content auto max-content max-content
+    position: relative
+    padding: $alert-padding
+    overflow: hidden
+    --v-border-color: #{$alert-border-color}
+
+    @include tools.position($alert-positions)
+    @include tools.rounded($alert-border-radius)
+    @include tools.variant($alert-variants...)
+
+    &--prominent
+      grid-template-areas: "prepend content append close" "prepend content . ."
+
+    &.v-alert--border
+      --v-border-opacity: #{$alert-border-opacity}
+
+      &.v-alert--border-start
+        padding-inline-start: $alert-padding + $alert-border-thin-width
+
+      &.v-alert--border-end
+        padding-inline-end: $alert-padding + $alert-border-thin-width
+
+    &--variant-plain
+      transition: $alert-plain-transition
+
+    @at-root
+      @include tools.density('v-alert', $alert-density) using ($modifier)
+        padding-bottom: $alert-padding + $modifier
+        padding-top: $alert-padding + $modifier
+
+        &.v-alert--border-top
+          padding-top: $alert-padding + $alert-border-thin-width + $modifier
+
+        &.v-alert--border-bottom
+          padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
+
+  .v-alert__border
+    border-radius: inherit
+    bottom: 0
+    left: 0
+    opacity: var(--v-border-opacity)
+    position: absolute
+    pointer-events: none
+    right: 0
+    top: 0
+    width: 100%
+
+    @include tools.border($alert-border...)
+
+    .v-alert--border-start &
+      border-inline-start-width: $alert-border-thin-width
+
+    .v-alert--border-end &
+      border-inline-end-width: $alert-border-thin-width
+
+    .v-alert--border-top &
+      border-top-width: $alert-border-thin-width
+
+    .v-alert--border-bottom &
+      border-bottom-width: $alert-border-thin-width
+
+  .v-alert__close
+    flex: 0 1 auto
+    grid-area: close
+
+  .v-alert__content
     align-self: center
+    grid-area: content
+    overflow: hidden
+
+  .v-alert__append,
+  .v-alert__close
+    align-self: flex-start
+    margin-inline-start: $alert-append-margin-inline-start
+
+  .v-alert__append
+    align-self: flex-start
+    grid-area: append
+
+    + .v-alert__close
+      margin-inline-start: $alert-append-close-margin-inline-start
+
+  .v-alert__prepend
+    align-self: flex-start
+    display: flex
+    align-items: center
+    grid-area: prepend
+    margin-inline-end: $alert-prepend-margin-inline-end
 
-.v-alert__underlay
-  grid-area: none
-  position: absolute
-
-  .v-alert--border-start &
-    border-top-left-radius: 0
-    border-bottom-left-radius: 0
-
-  .v-alert--border-end &
-    border-top-right-radius: 0
-    border-bottom-right-radius: 0
-
-  .v-alert--border-top &
-    border-top-left-radius: 0
-    border-top-right-radius: 0
-
-  .v-alert--border-bottom &
-    border-bottom-left-radius: 0
-    border-bottom-right-radius: 0
-
-.v-alert-title
-  align-items: center
-  align-self: center
-  display: flex
-  font-size: $alert-title-font-size
-  font-weight: $alert-title-font-weight
-  hyphens: $alert-title-hyphens
-  letter-spacing: $alert-title-letter-spacing
-  line-height: $alert-title-line-height
-  overflow-wrap: $alert-title-overflow-wrap
-  text-transform: $alert-title-text-transform
-  word-break: $alert-title-word-break
-  word-wrap: $alert-title-word-wrap
+    .v-alert--prominent &
+      align-self: center
+
+  .v-alert__underlay
+    grid-area: none
+    position: absolute
+
+    .v-alert--border-start &
+      border-top-left-radius: 0
+      border-bottom-left-radius: 0
+
+    .v-alert--border-end &
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
+
+    .v-alert--border-top &
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+
+    .v-alert--border-bottom &
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
+
+  .v-alert-title
+    align-items: center
+    align-self: center
+    display: flex
+    font-size: $alert-title-font-size
+    font-weight: $alert-title-font-weight
+    hyphens: $alert-title-hyphens
+    letter-spacing: $alert-title-letter-spacing
+    line-height: $alert-title-line-height
+    overflow-wrap: $alert-title-overflow-wrap
+    text-transform: $alert-title-text-transform
+    word-break: $alert-title-word-break
+    word-wrap: $alert-title-word-wrap
diff --git a/packages/vuetify/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass
@@ -1,16 +1,18 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-application
-  display: flex
-  background: $application-background
-  color: $application-color
+@include tools.layer('components')
+  .v-application
+    display: flex
+    background: $application-background
+    color: $application-color
 
-.v-application__wrap
-  backface-visibility: hidden
-  display: flex
-  flex-direction: column
-  flex: 1 1 auto
-  max-width: 100%
-  min-height: 100vh
-  min-height: 100dvh
-  position: relative
+  .v-application__wrap
+    backface-visibility: hidden
+    display: flex
+    flex-direction: column
+    flex: 1 1 auto
+    max-width: 100%
+    min-height: 100vh
+    min-height: 100dvh
+    position: relative
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass
@@ -1,14 +1,15 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-app-bar
-  display: flex
+@include tools.layer('components')
+  .v-app-bar
+    display: flex
 
-  &.v-toolbar
-    @include tools.theme($app-bar-theme...)
+    &.v-toolbar
+      @include tools.theme($app-bar-theme...)
 
-    &:not(.v-toolbar--flat)
-      @include tools.elevation($app-bar-elevation)
+      &:not(.v-toolbar--flat)
+        @include tools.elevation($app-bar-elevation)
 
-  &:not(.v-toolbar--absolute)
-    padding-inline-end: var(--v-scrollbar-offset)
+    &:not(.v-toolbar--absolute)
+      padding-inline-end: var(--v-scrollbar-offset)