vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/labs/VCalendar/VCalendar.sass

@@ -1,170 +1,172 @@
-@import './_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-calendar-weekly
-  width: 100%
-  height: 100%
-  display: flex
-  flex-direction: column
-  // https://github.com/vuetifyjs/vuetify/issues/8319
-  min-height: 0
-  // Themed
-  background-color: #fff
+@include tools.layer('components')
+  .v-calendar-weekly
+    width: 100%
+    height: 100%
+    display: flex
+    flex-direction: column
+    // https://github.com/vuetifyjs/vuetify/issues/8319
+    min-height: 0
+    // Themed
+    background-color: #fff
 
-.v-calendar__container
-  border-top: $calendar-line-width solid $calendar-line-color
-  border-left: $calendar-line-width solid $calendar-line-color
-  border-right: $calendar-line-width solid $calendar-line-color
+  .v-calendar__container
+    border-top: $calendar-line-width solid $calendar-line-color
+    border-left: $calendar-line-width solid $calendar-line-color
+    border-right: $calendar-line-width solid $calendar-line-color
 
-.v-calendar-weekly__head
-  display: grid
-  grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
-  user-select: none
-  &.days__0
-    grid-template-columns: 1fr
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
-  &.days__1
-    grid-template-columns: 1fr
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
-  &.days__2
-    grid-template-columns: repeat(2, 1fr)
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr)
-  &.days__3
-    grid-template-columns: repeat(3, 1fr)
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr)
-  &.days__4
-    grid-template-columns: repeat(4, 1fr)
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr)
-  &.days__5
-    grid-template-columns: repeat(5, 1fr)
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr)
-  &.days__6
-    grid-template-columns: repeat(6, 1fr)
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
-  &.days__7
-    grid-template-columns: repeat(7, 1fr)
-    &.v-calendar-weekly__head-weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
+  .v-calendar-weekly__head
+    display: grid
+    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
+    user-select: none
+    &.days__0
+      grid-template-columns: 1fr
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
+    &.days__1
+      grid-template-columns: 1fr
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
+    &.days__2
+      grid-template-columns: repeat(2, 1fr)
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr)
+    &.days__3
+      grid-template-columns: repeat(3, 1fr)
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr)
+    &.days__4
+      grid-template-columns: repeat(4, 1fr)
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr)
+    &.days__5
+      grid-template-columns: repeat(5, 1fr)
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr)
+    &.days__6
+      grid-template-columns: repeat(6, 1fr)
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
+    &.days__7
+      grid-template-columns: repeat(7, 1fr)
+      &.v-calendar-weekly__head-weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
 
-.v-calendar-weekly__head-weekday, .v-calendar-weekly__head-weekday-with-weeknumber
-  flex: 1 0 20px
-  user-select: none
-  padding: $calendar-weekly-weekday-padding
-  font-size: $calendar-weekly-weekday-font-size
-  overflow: hidden
-  text-align: center
-  text-overflow: ellipsis
-  text-transform: uppercase
-  white-space: nowrap
-  // Themed
-  border-right: $calendar-line-width solid $calendar-line-color
+  .v-calendar-weekly__head-weekday, .v-calendar-weekly__head-weekday-with-weeknumber
+    flex: 1 0 20px
+    user-select: none
+    padding: $calendar-weekly-weekday-padding
+    font-size: $calendar-weekly-weekday-font-size
+    overflow: hidden
+    text-align: center
+    text-overflow: ellipsis
+    text-transform: uppercase
+    white-space: nowrap
+    // Themed
+    border-right: $calendar-line-width solid $calendar-line-color
 
-  &:last-child
-    border-right: none
+    &:last-child
+      border-right: none
 
-  // TODO change this
-  > div .v-btn
-    font-size: 1.5rem
+    // TODO change this
+    > div .v-btn
+      font-size: 1.5rem
 
-.v-calendar-weekly__head-weeknumber
-  background: $calendar-weekly-weeknumber-background
-  color: $calendar-weekly-weeknumber-color
+  .v-calendar-weekly__head-weeknumber
+    background: $calendar-weekly-weeknumber-background
+    color: $calendar-weekly-weeknumber-color
 
-.v-calendar-weekly__week
-  display: flex
-  flex: 1
-  height: unset
-  // https://github.com/vuetifyjs/vuetify/issues/8319
-  min-height: 0
+  .v-calendar-weekly__week
+    display: flex
+    flex: 1
+    height: unset
+    // https://github.com/vuetifyjs/vuetify/issues/8319
+    min-height: 0
 
-.v-calendar-month__weeknumber
-  padding-top: $calendar-weekly-weeknumber-padding-top
-  background: $calendar-month-weeknumber-background
-  border-bottom: $calendar-line-width solid $calendar-line-color
-  color: $calendar-month-weeknumber-color
-  text-align: center
-  font-size: $calendar-weekly-weeknumber-font-size
-  font-weight: $calendar-weekly-weeknumber-font-weight
+  .v-calendar-month__weeknumber
+    padding-top: $calendar-weekly-weeknumber-padding-top
+    background: $calendar-month-weeknumber-background
+    border-bottom: $calendar-line-width solid $calendar-line-color
+    color: $calendar-month-weeknumber-color
+    text-align: center
+    font-size: $calendar-weekly-weeknumber-font-size
+    font-weight: $calendar-weekly-weeknumber-font-weight
 
-.v-calendar-month__days
-  display: grid
-  flex: 1 1
-  > .v-calendar-month__day
-    min-height: $calendar-weekly-day-min-height
-  &.days__0
-    grid-template-columns: 1fr
+  .v-calendar-month__days
+    display: grid
+    flex: 1 1
     > .v-calendar-month__day
-      border-right: none
-  &.days__1
-    grid-template-columns: 1fr
-    > .v-calendar-month__day
-      border-right: none
-  &.days__2
-    grid-template-columns: repeat(2, 1fr)
-    > .v-calendar-month__day:nth-child(2n)
-      border-right: none
-  &.days__3
-    grid-template-columns: repeat(3, 1fr)
-    > .v-calendar-month__day:nth-child(3n)
-      border-right: none
-  &.days__4
-    grid-template-columns: repeat(4, 1fr)
-    > .v-calendar-month__day:nth-child(4n)
-      border-right: none
-  &.days__5
-    grid-template-columns: repeat(5, 1fr)
-    > .v-calendar-month__day:nth-child(5n)
-      border-right: none
-  &.days__6
-    grid-template-columns: repeat(6, 1fr)
-    > .v-calendar-month__day:nth-child(6n)
-      border-right: none
-    &.v-calendar-month__weeknumbers
-      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
-  &.days__7
-    grid-template-columns: repeat(7, 1fr)
-    > .v-calendar-month__day:nth-child(7n)
-      border-right: none
+      min-height: $calendar-weekly-day-min-height
+    &.days__0
+      grid-template-columns: 1fr
+      > .v-calendar-month__day
+        border-right: none
+    &.days__1
+      grid-template-columns: 1fr
+      > .v-calendar-month__day
+        border-right: none
+    &.days__2
+      grid-template-columns: repeat(2, 1fr)
+      > .v-calendar-month__day:nth-child(2n)
+        border-right: none
+    &.days__3
+      grid-template-columns: repeat(3, 1fr)
+      > .v-calendar-month__day:nth-child(3n)
+        border-right: none
+    &.days__4
+      grid-template-columns: repeat(4, 1fr)
+      > .v-calendar-month__day:nth-child(4n)
+        border-right: none
+    &.days__5
+      grid-template-columns: repeat(5, 1fr)
+      > .v-calendar-month__day:nth-child(5n)
+        border-right: none
+    &.days__6
+      grid-template-columns: repeat(6, 1fr)
+      > .v-calendar-month__day:nth-child(6n)
+        border-right: none
+      &.v-calendar-month__weeknumbers
+        grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
+    &.days__7
+      grid-template-columns: repeat(7, 1fr)
+      > .v-calendar-month__day:nth-child(7n)
+        border-right: none
 
-  &.days-with-weeknumbers__0
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
-    > .v-calendar-month__day
-      border-right: none
-  &.days-with-weeknumbers__1
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
-    > .v-calendar-month__day
-      border-right: none
-  &.days-with-weeknumbers__2
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr)
-    > .v-calendar-month__day:nth-child(3n)
-      border-right: none
-  &.days-with-weeknumbers__3
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr)
-    > .v-calendar-month__day:nth-child(4n)
-      border-right: none
-  &.days-with-weeknumbers__4
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr)
-    > .v-calendar-month__day:nth-child(5n)
-      border-right: none
-  &.days-with-weeknumbers__5
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr)
-    > .v-calendar-month__day:nth-child(6n)
-      border-right: none
-  &.days-with-weeknumbers__6
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
-    > .v-calendar-month__day:nth-child(7n)
-      border-right: none
-  &.days-with-weeknumbers__7
-    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
-    > .v-calendar-month__day:nth-child(7n)
-      border-right: $calendar-line-width solid $calendar-line-width
-    > .v-calendar-month__day:nth-child(8n)
-      border-right: none
-    > .v-calendar-month__day:nth-child(8n)
-      border-right: none
+    &.days-with-weeknumbers__0
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
+      > .v-calendar-month__day
+        border-right: none
+    &.days-with-weeknumbers__1
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
+      > .v-calendar-month__day
+        border-right: none
+    &.days-with-weeknumbers__2
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr)
+      > .v-calendar-month__day:nth-child(3n)
+        border-right: none
+    &.days-with-weeknumbers__3
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr)
+      > .v-calendar-month__day:nth-child(4n)
+        border-right: none
+    &.days-with-weeknumbers__4
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr)
+      > .v-calendar-month__day:nth-child(5n)
+        border-right: none
+    &.days-with-weeknumbers__5
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr)
+      > .v-calendar-month__day:nth-child(6n)
+        border-right: none
+    &.days-with-weeknumbers__6
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
+      > .v-calendar-month__day:nth-child(7n)
+        border-right: none
+    &.days-with-weeknumbers__7
+      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
+      > .v-calendar-month__day:nth-child(7n)
+        border-right: $calendar-line-width solid $calendar-line-width
+      > .v-calendar-month__day:nth-child(8n)
+        border-right: none
+      > .v-calendar-month__day:nth-child(8n)
+        border-right: none

package/lib/labs/VCalendar/VCalendarDay.sass

@@ -1,32 +1,35 @@
-.v-calendar-day
-  position: relative
-  display: flex
-  flex-direction: column
+@use '../../styles/tools'
 
-.v-calendar-weekly
-  .v-calendar__container
-    display: grid
+@include tools.layer('components')
+  .v-calendar-day
+    position: relative
+    display: flex
+    flex-direction: column
 
-    &.days__7
-      grid-template-columns: repeat(7, 1fr)
+  .v-calendar-weekly
+    .v-calendar__container
+      display: grid
 
-    &.days__6
-      grid-template-columns: repeat(6, 1fr)
+      &.days__7
+        grid-template-columns: repeat(7, 1fr)
 
-    &.days__5
-      grid-template-columns: repeat(5, 1fr)
+      &.days__6
+        grid-template-columns: repeat(6, 1fr)
 
-    &.days__4
-      grid-template-columns: repeat(4, 1fr)
+      &.days__5
+        grid-template-columns: repeat(5, 1fr)
 
-    &.days__3
-      grid-template-columns: repeat(3, 1fr)
+      &.days__4
+        grid-template-columns: repeat(4, 1fr)
 
-    &.days__2
-      grid-template-columns: repeat(2, 1fr)
+      &.days__3
+        grid-template-columns: repeat(3, 1fr)
 
-    &.days__1
-      grid-template-columns: repeat(1, 1fr)
+      &.days__2
+        grid-template-columns: repeat(2, 1fr)
 
-    &.days__0
-      grid-template-columns: repeat(1, 1fr)
+      &.days__1
+        grid-template-columns: repeat(1, 1fr)
+
+      &.days__0
+        grid-template-columns: repeat(1, 1fr)

package/lib/labs/VCalendar/VCalendarHeader.sass

@@ -1,13 +1,15 @@
-@import './_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-calendar-header
-  align-items: $calendar-header-align
-  display: $calendar-header-display
-  min-height: $calendar-header-min-height
+@include tools.layer('components')
+  .v-calendar-header
+    align-items: $calendar-header-align
+    display: $calendar-header-display
+    min-height: $calendar-header-min-height
 
-.v-calendar-header__today
-  margin-inline-end: $calendar-header-today-margin-end
+  .v-calendar-header__today
+    margin-inline-end: $calendar-header-today-margin-end
 
-.v-calendar-header__title
-  font-size: $calendar-header-title-font-size
-  margin-inline-start: $calendar-header-title-margin-start
+  .v-calendar-header__title
+    font-size: $calendar-header-title-font-size
+    margin-inline-start: $calendar-header-title-margin-start

package/lib/labs/VCalendar/VCalendarInterval.sass

@@ -1,40 +1,42 @@
-@import './_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-calendar-day__row-with-label
-  display: grid
-  grid-template-columns: 48px 8px 1fr
-  border-right: $calendar-line-width solid $calendar-line-color
-
-  .v-calendar-day__row-hairline
-    position: relative
+@include tools.layer('components')
+  .v-calendar-day__row-with-label
+    display: grid
+    grid-template-columns: 48px 8px 1fr
     border-right: $calendar-line-width solid $calendar-line-color
-    &:after
-      content: ''
+
+    .v-calendar-day__row-hairline
+      position: relative
+      border-right: $calendar-line-width solid $calendar-line-color
+      &:after
+        content: ''
+        border-bottom: $calendar-line-width solid $calendar-line-color
+        position: absolute
+        width: 100%
+        margin-top: -1px
+        z-index: 3
+        pointer-events: none
+
+    .v-calendar-day__row-label
+      font-size: 10px
+      text-align: center
+      position: relative
+      top: -8px
+    .v-calendar-day__row-content
       border-bottom: $calendar-line-width solid $calendar-line-color
-      position: absolute
-      width: 100%
-      margin-top: -1px
-      z-index: 3
-      pointer-events: none
+      &.v-calendar-day__row-content-through
+        border-bottom: none
 
-  .v-calendar-day__row-label
-    font-size: 10px
-    text-align: center 
-    position: relative
-    top: -8px
-  .v-calendar-day__row-content
-    border-bottom: $calendar-line-width solid $calendar-line-color
-    &.v-calendar-day__row-content-through
-      border-bottom: none
+  .v-calendar-day__row-without-label
+    display: grid
+    grid-template-columns: 1fr
+    border-right: $calendar-line-width solid $calendar-line-color
 
-.v-calendar-day__row-without-label
-  display: grid
-  grid-template-columns: 1fr
-  border-right: $calendar-line-width solid $calendar-line-color
-  
-  .v-calendar-day__row-content
-    overflow: hidden
-    border-bottom: $calendar-line-width solid $calendar-line-color
+    .v-calendar-day__row-content
+      overflow: hidden
+      border-bottom: $calendar-line-width solid $calendar-line-color
 
-    &.v-calendar-day__row-content-through
-      border-bottom: none
+      &.v-calendar-day__row-content-through
+        border-bottom: none

package/lib/labs/VCalendar/VCalendarIntervalEvent.sass

@@ -1,6 +1,9 @@
-.v-calendar-internal-event
-  overflow: hidden
-  padding: 4px
-  text-overflow: ellipsis
-  white-space: nowrap
-  // width: 100%
+@use '../../styles/tools'
+
+@include tools.layer('components')
+  .v-calendar-internal-event
+    overflow: hidden
+    padding: 4px
+    text-overflow: ellipsis
+    white-space: nowrap
+    // width: 100%

package/lib/labs/VCalendar/VCalendarMonthDay.sass

@@ -1,65 +1,67 @@
-@import './_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-calendar-month__day
-  position: relative
-  display: flex
-  flex-direction: column
-  // https://github.com/vuetifyjs/vuetify/issues/9058
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904
-  min-width: 0
-  min-height: $calendar-weekly-day-min-height
-  // Themed
-  border-right: $calendar-line-width solid $calendar-line-color
-  border-bottom: $calendar-line-width solid $calendar-line-color
-  flex: 1 1 auto
-  border-inline-end: $calendar-line-width solid $calendar-line-color
+@include tools.layer('components')
+  .v-calendar-month__day
+    position: relative
+    display: flex
+    flex-direction: column
+    // https://github.com/vuetifyjs/vuetify/issues/9058
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904
+    min-width: 0
+    min-height: $calendar-weekly-day-min-height
+    // Themed
+    border-right: $calendar-line-width solid $calendar-line-color
+    border-bottom: $calendar-line-width solid $calendar-line-color
+    flex: 1 1 auto
+    border-inline-end: $calendar-line-width solid $calendar-line-color
 
-.v-calendar-weekly__day
-  flex: 1
-  width: 0
-  overflow: hidden
-  user-select: none
-  position: relative
-  padding: $calendar-weekly-day-padding
-  // https://github.com/vuetifyjs/vuetify/issues/9058
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904
-  min-width: 0
-  min-height: $calendar-weekly-day-min-height
-  // Themed
-  border-right: $calendar-line-width solid $calendar-line-color
-  border-bottom: $calendar-line-width solid $calendar-line-color
-  flex: 1 1 auto
-  border-inline-end: $calendar-line-width solid $calendar-line-color
-  text-align: center
+  .v-calendar-weekly__day
+    flex: 1
+    width: 0
+    overflow: hidden
+    user-select: none
+    position: relative
+    padding: $calendar-weekly-day-padding
+    // https://github.com/vuetifyjs/vuetify/issues/9058
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904
+    min-width: 0
+    min-height: $calendar-weekly-day-min-height
+    // Themed
+    border-right: $calendar-line-width solid $calendar-line-color
+    border-bottom: $calendar-line-width solid $calendar-line-color
+    flex: 1 1 auto
+    border-inline-end: $calendar-line-width solid $calendar-line-color
+    text-align: center
 
-  &.v-present
-    .v-calendar-weekly__day-month
-      color: currentColor
+    &.v-present
+      .v-calendar-weekly__day-month
+        color: currentColor
 
-.v-calendar-weekly__day-label
-  text-decoration: none
-  user-select: none
-  cursor: pointer
-  box-shadow: none
-  text-align: center
+  .v-calendar-weekly__day-label
+    text-decoration: none
+    user-select: none
+    cursor: pointer
+    box-shadow: none
+    text-align: center
 
-  .v-btn
-    font-size: $calendar-weekly-day-label-font-size
-    text-transform: none !important
+    .v-btn
+      font-size: $calendar-weekly-day-label-font-size
+      text-transform: none !important
 
-    &.v-calendar-weekly__day-label__today
-      background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity))
-      color: rgb(var(--v-theme-on-surface-variant))
+      &.v-calendar-weekly__day-label__today
+        background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity))
+        color: rgb(var(--v-theme-on-surface-variant))
 
-.v-calendar-weekly__day-month
-  position: absolute
-  text-decoration: none
-  user-select: none
-  box-shadow: none
-  top: 0
-  left: $calendar-weekly-day-month-left
-  height: $calendar-weekly-day-label-size
-  line-height: $calendar-weekly-day-label-size
+  .v-calendar-weekly__day-month
+    position: absolute
+    text-decoration: none
+    user-select: none
+    box-shadow: none
+    top: 0
+    left: $calendar-weekly-day-month-left
+    height: $calendar-weekly-day-label-size
+    line-height: $calendar-weekly-day-label-size
 
-.v-calendar-weekly__day-alldayevents-container
-  min-height: 24px
+  .v-calendar-weekly__day-alldayevents-container
+    min-height: 24px