vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VTable/VTable.sass

@@ -3,167 +3,168 @@
 @use './variables' as *
 @use './mixins' as *
 
-// Theme
-.v-table
-  @include tools.theme($table-theme...)
+@include tools.layer('components')
+  // Theme
+  .v-table
+    @include tools.theme($table-theme...)
 
-  font-size: $table-font-size
-  transition-duration: $table-transition-duration
-  transition-property: $table-transition-property
-  transition-timing-function: $table-transition-timing-function
+    font-size: $table-font-size
+    transition-duration: $table-transition-duration
+    transition-property: $table-transition-property
+    transition-timing-function: $table-transition-timing-function
 
-  .v-table-divider
-    border-right: $table-border
+    .v-table-divider
+      border-right: $table-border
 
-  .v-table__wrapper
-    > table
-      > thead
-        > tr
-          > th
-            border-bottom: $table-border
-
-      > tbody
-        > tr
-          &:not(:last-child)
-            > td,
+    .v-table__wrapper
+      > table
+        > thead
+          > tr
             > th
               border-bottom: $table-border
 
+        > tbody
+          > tr
+            &:not(:last-child)
+              > td,
+              > th
+                border-bottom: $table-border
+
+        > tfoot
+          > tr
+              > td,
+              > th
+                border-top: $table-border
+
+
+    &.v-table--hover
+      > .v-table__wrapper
+        > table
+          > tbody
+            > tr
+              > td
+                position: relative
+
+              &:hover > td::after
+                @include tools.absolute(true)
+                background: $table-hover-color
+                pointer-events: none
+
+    &.v-table--fixed-header
+      > .v-table__wrapper
+        > table
+          > thead
+            > tr
+              > th
+                background: $table-background
+                box-shadow: inset 0 -1px 0 $table-border-color
+                z-index: 1
+
+    &.v-table--fixed-footer
       > tfoot
         > tr
+          > th,
+          > td
+            background: $table-background
+            box-shadow: inset 0 1px 0 $table-border-color
+
+  // Block
+  .v-table
+    border-radius: inherit
+    // Do not inherit line-height
+    line-height: $table-line-height
+    max-width: 100%
+    display: flex
+    flex-direction: column
+
+    > .v-table__wrapper
+      > table
+        width: 100%
+        border-spacing: 0
+
+        > tbody,
+        > thead,
+        > tfoot
+          > tr
             > td,
             > th
-              border-top: $table-border
+              padding: $table-column-padding
+              transition-duration: $table-transition-duration
+              transition-property: $table-transition-property
+              transition-timing-function: $table-transition-timing-function
 
+            > td
+              height: var(--v-table-row-height)
+
+            > th
+              height: var(--v-table-header-height)
+              font-weight: $table-header-font-weight
+              user-select: none
+              text-align: start
+
+    @at-root
+      @include tools.density('v-table', $table-density) using ($modifier)
+        --v-table-header-height: #{$table-header-height + $modifier}
+        --v-table-row-height: #{$table-row-height + $modifier}
+
+  // Elements
+  .v-table__wrapper
+    border-radius: inherit
+    overflow: auto
+    flex: 1 1 auto
 
-  &.v-table--hover
+  // Modifiers
+  .v-table--has-top
     > .v-table__wrapper
       > table
         > tbody
           > tr
-            > td
-              position: relative
+            &:first-child
+              &:hover
+                > td
+                  &:first-child
+                    border-top-left-radius: 0
 
-            &:hover > td::after
-              @include tools.absolute(true)
-              background: $table-hover-color
-              pointer-events: none
+                  &:last-child
+                    border-top-right-radius: 0
 
-  &.v-table--fixed-header
+  .v-table--has-bottom
     > .v-table__wrapper
       > table
-        > thead
+        > tbody
           > tr
-            > th
-              background: $table-background
-              box-shadow: inset 0 -1px 0 $table-border-color
-              z-index: 1
-
-  &.v-table--fixed-footer
-    > tfoot
-      > tr
-        > th,
-        > td
-          background: $table-background
-          box-shadow: inset 0 1px 0 $table-border-color
-
-// Block
-.v-table
-  border-radius: inherit
-  // Do not inherit line-height
-  line-height: $table-line-height
-  max-width: 100%
-  display: flex
-  flex-direction: column
-
-  > .v-table__wrapper
-    > table
-      width: 100%
-      border-spacing: 0
-
-      > tbody,
-      > thead,
-      > tfoot
-        > tr
-          > td,
-          > th
-            padding: $table-column-padding
-            transition-duration: $table-transition-duration
-            transition-property: $table-transition-property
-            transition-timing-function: $table-transition-timing-function
-
-          > td
-            height: var(--v-table-row-height)
-
-          > th
-            height: var(--v-table-header-height)
-            font-weight: $table-header-font-weight
-            user-select: none
-            text-align: start
-
-  @at-root
-    @include tools.density('v-table', $table-density) using ($modifier)
-      --v-table-header-height: #{$table-header-height + $modifier}
-      --v-table-row-height: #{$table-row-height + $modifier}
-
-// Elements
-.v-table__wrapper
-  border-radius: inherit
-  overflow: auto
-  flex: 1 1 auto
-
-// Modifiers
-.v-table--has-top
-  > .v-table__wrapper
-    > table
-      > tbody
-        > tr
-          &:first-child
-            &:hover
-              > td
-                &:first-child
-                  border-top-left-radius: 0
+            &:last-child
+              &:hover
+                > td
+                  &:first-child
+                    border-bottom-left-radius: 0
 
-                &:last-child
-                  border-top-right-radius: 0
+                  &:last-child
+                    border-bottom-right-radius: 0
 
-.v-table--has-bottom
-  > .v-table__wrapper
-    > table
-      > tbody
-        > tr
-          &:last-child
-            &:hover
-              > td
-                &:first-child
-                  border-bottom-left-radius: 0
-
-                &:last-child
-                  border-bottom-right-radius: 0
-
-.v-table--fixed-height
-  > .v-table__wrapper
-    overflow-y: auto
-
-.v-table--fixed-header
-  > .v-table__wrapper
-    > table
-      > thead
-        position: sticky
-        top: 0
-        z-index: 2
-        > tr
-          > th
-            border-bottom: 0px !important
+  .v-table--fixed-height
+    > .v-table__wrapper
+      overflow-y: auto
 
-.v-table--fixed-footer
-  > .v-table__wrapper
-    > table
-      > tfoot
-        > tr
+  .v-table--fixed-header
+    > .v-table__wrapper
+      > table
+        > thead
           position: sticky
-          bottom: 0
-          z-index: 1
-          > td,
-          > th
-              border-top: 0px !important
+          top: 0
+          z-index: 2
+          > tr
+            > th
+              border-bottom: 0px !important
+
+  .v-table--fixed-footer
+    > .v-table__wrapper
+      > table
+        > tfoot
+          > tr
+            position: sticky
+            bottom: 0
+            z-index: 1
+            > td,
+            > th
+                border-top: 0px !important

package/lib/components/VTabs/VTab.sass

@@ -1,32 +1,34 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-tab
-  // override v-btn size specificity
-  &.v-tab.v-btn
-    height: var(--v-tabs-height)
-    border-radius: $tab-border-radius
-    min-width: $tab-min-width
+@include tools.layer('components')
+  .v-tab
+    // override v-btn size specificity
+    &.v-tab.v-btn
+      height: var(--v-tabs-height)
+      border-radius: $tab-border-radius
+      min-width: $tab-min-width
 
-  .v-slide-group--horizontal &
-    max-width: $tab-max-width
+    .v-slide-group--horizontal &
+      max-width: $tab-max-width
 
-  .v-slide-group--vertical &
-    justify-content: start
+    .v-slide-group--vertical &
+      justify-content: start
 
-.v-tab__slider
-  position: absolute
-  bottom: 0
-  left: 0
-  height: $tab-slider-size
-  width: 100%
-  background: currentColor
-  pointer-events: none
-  opacity: 0
+  .v-tab__slider
+    position: absolute
+    bottom: 0
+    left: 0
+    height: $tab-slider-size
+    width: 100%
+    background: currentColor
+    pointer-events: none
+    opacity: 0
 
-  .v-tab--selected &
-    opacity: 1
+    .v-tab--selected &
+      opacity: 1
 
-  .v-slide-group--vertical &
-    top: 0
-    height: 100%
-    width: $tab-slider-size
+    .v-slide-group--vertical &
+      top: 0
+      height: 100%
+      width: $tab-slider-size

package/lib/components/VTabs/VTabs.sass

@@ -4,51 +4,52 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-tabs
-  display: flex
-  height: var(--v-tabs-height)
+@include tools.layer('components')
+  .v-tabs
+    display: flex
+    height: var(--v-tabs-height)
 
-  @at-root
-    @include tools.density('v-tabs', $tabs-density) using ($modifier)
-      --v-tabs-height: #{$tabs-height + $modifier}
+    @at-root
+      @include tools.density('v-tabs', $tabs-density) using ($modifier)
+        --v-tabs-height: #{$tabs-height + $modifier}
 
-      &.v-tabs--stacked
-        --v-tabs-height: #{$tabs-stacked-height + $modifier}
+        &.v-tabs--stacked
+          --v-tabs-height: #{$tabs-stacked-height + $modifier}
 
-  &.v-slide-group--vertical
-    height: auto
-    flex: none
-    --v-tabs-height: #{$tabs-height}
+    &.v-slide-group--vertical
+      height: auto
+      flex: none
+      --v-tabs-height: #{$tabs-height}
 
-.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes)
-  .v-tab:first-child
-    margin-inline-start: $tab-align-tabs-title-margin
-
-.v-tabs--fixed-tabs,
-.v-tabs--align-tabs-center
-  .v-slide-group__content > *:last-child
-    margin-inline-end: auto
-
-  .v-slide-group__content > *:first-child
-    margin-inline-start: auto
+  .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes)
+    .v-tab:first-child
+      margin-inline-start: $tab-align-tabs-title-margin
 
-.v-tabs--grow
-  flex-grow: 1
+  .v-tabs--fixed-tabs,
+  .v-tabs--align-tabs-center
+    .v-slide-group__content > *:last-child
+      margin-inline-end: auto
 
-  .v-tab
-    flex: 1 0 auto
-    max-width: none
+    .v-slide-group__content > *:first-child
+      margin-inline-start: auto
 
-.v-tabs--align-tabs-end
-  .v-tab:first-child
-    margin-inline-start: auto
+  .v-tabs--grow
+    flex-grow: 1
 
-  .v-tab:last-child
-    margin-inline-end: 0
+    .v-tab
+      flex: 1 0 auto
+      max-width: none
 
-@media #{map-get(settings.$display-breakpoints, 'md-and-down')}
-  .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes)
+  .v-tabs--align-tabs-end
     .v-tab:first-child
-      margin-inline-start: 52px
+      margin-inline-start: auto
+
     .v-tab:last-child
-      margin-inline-end: 52px
+      margin-inline-end: 0
+
+  @media #{map-get(settings.$display-breakpoints, 'md-and-down')}
+    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes)
+      .v-tab:first-child
+        margin-inline-start: 52px
+      .v-tab:last-child
+        margin-inline-end: 52px