vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VTimeline/VTimeline.sass

@@ -5,406 +5,407 @@
 @use './variables' as *
 @use './mixins' as *
 
-// VTimeline
-.v-timeline
-  .v-timeline-divider__dot
-    background: $timeline-dot-divider-background
+@include tools.layer('components')
+  // VTimeline
+  .v-timeline
+    .v-timeline-divider__dot
+      background: $timeline-dot-divider-background
 
-  .v-timeline-divider__inner-dot
-    background: $timeline-inner-dot-divider-background
+    .v-timeline-divider__inner-dot
+      background: $timeline-inner-dot-divider-background
 
-.v-timeline
-  display: grid
-  grid-auto-flow: dense
-  position: relative
+  .v-timeline
+    display: grid
+    grid-auto-flow: dense
+    position: relative
 
-  @include horizontal(true)
-    grid-column-gap: $timeline-item-padding
-    width: 100%
+    @include horizontal(true)
+      grid-column-gap: $timeline-item-padding
+      width: 100%
 
-    .v-timeline-item:nth-child(2n)
-      .v-timeline-item__body
-        grid-row: 3
+      .v-timeline-item:nth-child(2n)
+        .v-timeline-item__body
+          grid-row: 3
+          padding-block-start: $timeline-item-padding
+
+        .v-timeline-item__opposite
+          grid-row: 1
+          padding-block-end: $timeline-item-padding
+          align-self: flex-end
+
+      .v-timeline-item:nth-child(2n+1)
+        .v-timeline-item__body
+          grid-row: 1
+          padding-block-end: $timeline-item-padding
+          align-self: flex-end
+
+        .v-timeline-item__opposite
+          grid-row: 3
+          padding-block-start: $timeline-item-padding
+
+    @include vertical(true)
+      row-gap: $timeline-item-padding
+      height: 100%
+
+      @include timeline-first-item()
         padding-block-start: $timeline-item-padding
 
-      .v-timeline-item__opposite
-        grid-row: 1
+      @include timeline-last-item()
         padding-block-end: $timeline-item-padding
-        align-self: flex-end
 
-    .v-timeline-item:nth-child(2n+1)
-      .v-timeline-item__body
-        grid-row: 1
-        padding-block-end: $timeline-item-padding
-        align-self: flex-end
+      .v-timeline-item:nth-child(2n)
+        .v-timeline-item__body
+          grid-column: 1
+          padding-inline-end: $timeline-item-padding
 
-      .v-timeline-item__opposite
-        grid-row: 3
-        padding-block-start: $timeline-item-padding
+        .v-timeline-item__opposite
+          grid-column: 3
+          padding-inline-start: $timeline-item-padding
 
-  @include vertical(true)
-    row-gap: $timeline-item-padding
-    height: 100%
+      .v-timeline-item:nth-child(2n+1)
+        .v-timeline-item__body
+          grid-column: 3
+          padding-inline-start: $timeline-item-padding
 
-    @include timeline-first-item()
-      padding-block-start: $timeline-item-padding
+        .v-timeline-item__opposite
+          grid-column: 1
+          justify-self: flex-end
+          padding-inline-end: $timeline-item-padding
 
-    @include timeline-last-item()
-      padding-block-end: $timeline-item-padding
+  // VTimelineItem
+  .v-timeline-item
+    display: contents
 
-    .v-timeline-item:nth-child(2n)
-      .v-timeline-item__body
-        grid-column: 1
-        padding-inline-end: $timeline-item-padding
+  // VTimelineDivider
+  .v-timeline-divider
+    position: relative
+    display: flex
+    align-items: center
 
-      .v-timeline-item__opposite
-        grid-column: 3
-        padding-inline-start: $timeline-item-padding
+    @include horizontal
+      flex-direction: row
+      grid-row: 2
+      width: 100%
 
-    .v-timeline-item:nth-child(2n+1)
-      .v-timeline-item__body
-        grid-column: 3
-        padding-inline-start: $timeline-item-padding
+    @include vertical
+      height: 100%
+      flex-direction: column
+      grid-column: 2
+
+  $timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+  $timeline-line-start: math.div(-$timeline-item-padding, 2)
+  $timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset))
 
-      .v-timeline-item__opposite
-        grid-column: 1
-        justify-self: flex-end
-        padding-inline-end: $timeline-item-padding
-
-// VTimelineItem
-.v-timeline-item
-  display: contents
-
-// VTimelineDivider
-.v-timeline-divider
-  position: relative
-  display: flex
-  align-items: center
-
-  @include horizontal
-    flex-direction: row
-    grid-row: 2
-    width: 100%
-
-  @include vertical
-    height: 100%
-    flex-direction: column
-    grid-column: 2
-
-$timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
-$timeline-line-start: math.div(-$timeline-item-padding, 2)
-$timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset))
-
-.v-timeline-divider__before
-  background: $timeline-divider-line-background
-  position: absolute
-
-  @include horizontal
-    height: $timeline-divider-line-thickness
-    width: $timeline-line-size
-    inset-inline-start: $timeline-line-start
-    inset-inline-end: initial
-
-  @include vertical
-    height: $timeline-line-size
-    width: $timeline-divider-line-thickness
-    top: $timeline-line-start
-
-.v-timeline-divider__after
-  background: $timeline-divider-line-background
-  position: absolute
-
-  @include horizontal
-    height: $timeline-divider-line-thickness
-    width: $timeline-line-size
-    inset-inline-end: $timeline-line-start
-    inset-inline-start: initial
-
-  @include vertical
-    height: $timeline-line-size
-    width: $timeline-divider-line-thickness
-    bottom: $timeline-line-start
-
-.v-timeline-item:first-child
   .v-timeline-divider__before
-    @include vertical
-      height: $timeline-line-size
-      top: 0
+    background: $timeline-divider-line-background
+    position: absolute
 
     @include horizontal
+      height: $timeline-divider-line-thickness
       width: $timeline-line-size
-      inset-inline-start: 0
+      inset-inline-start: $timeline-line-start
       inset-inline-end: initial
 
-  .v-timeline-divider__after
     @include vertical
-      height: $timeline-line-size-first-last
+      height: $timeline-line-size
+      width: $timeline-divider-line-thickness
+      top: $timeline-line-start
+
+  .v-timeline-divider__after
+    background: $timeline-divider-line-background
+    position: absolute
 
     @include horizontal
-      width: $timeline-line-size-first-last
+      height: $timeline-divider-line-thickness
+      width: $timeline-line-size
       inset-inline-end: $timeline-line-start
       inset-inline-start: initial
 
-.v-timeline-item:last-child
-  .v-timeline-divider__before
     @include vertical
-      height: $timeline-line-size-first-last
-
-    @include horizontal
-      width: $timeline-line-size-first-last
+      height: $timeline-line-size
+      width: $timeline-divider-line-thickness
+      bottom: $timeline-line-start
 
-  .v-timeline-divider__after
-    @include vertical
-      height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
-      bottom: 0
+  .v-timeline-item:first-child
+    .v-timeline-divider__before
+      @include vertical
+        height: $timeline-line-size
+        top: 0
 
-    @include horizontal
-      width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
-      inset-inline-end: 0
-      inset-inline-start: initial
+      @include horizontal
+        width: $timeline-line-size
+        inset-inline-start: 0
+        inset-inline-end: initial
 
-.v-timeline-item:only-child
-  .v-timeline-divider__after
-    @include vertical
-      height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset))
+    .v-timeline-divider__after
+      @include vertical
+        height: $timeline-line-size-first-last
 
-.v-timeline-divider__dot
-  z-index: 1
-  flex-shrink: 0
-  border-radius: $timeline-dot-border-radius
-  display: flex
-  justify-content: center
-  align-items: center
+      @include horizontal
+        width: $timeline-line-size-first-last
+        inset-inline-end: $timeline-line-start
+        inset-inline-start: initial
 
-  @include tools.elevation($timeline-divider-dot-elevation)
+  .v-timeline-item:last-child
+    .v-timeline-divider__before
+      @include vertical
+        height: $timeline-line-size-first-last
 
-  @each $name, $multiplier in settings.$size-scales
-    $size: $timeline-dot-size + (8 * $multiplier)
+      @include horizontal
+        width: $timeline-line-size-first-last
 
-    &--size-#{$name}
-      height: $size
-      width: $size
+    .v-timeline-divider__after
+      @include vertical
+        height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+        bottom: 0
 
-      .v-timeline-divider__inner-dot
-        height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
-        width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
+      @include horizontal
+        width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+        inset-inline-end: 0
+        inset-inline-start: initial
 
-.v-timeline-divider__inner-dot
-  align-items: center
-  border-radius: $timeline-dot-border-radius
-  display: flex
-  justify-content: center
+  .v-timeline-item:only-child
+    .v-timeline-divider__after
+      @include vertical
+        height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset))
 
-/** Modifiers **/
+  .v-timeline-divider__dot
+    z-index: 1
+    flex-shrink: 0
+    border-radius: $timeline-dot-border-radius
+    display: flex
+    justify-content: center
+    align-items: center
 
-// Justify
-.v-timeline--justify-center
-  @include horizontal(true)
-    grid-template-rows: $timeline-item-grid-template-center
+    @include tools.elevation($timeline-divider-dot-elevation)
 
-  @include vertical(true)
-    grid-template-columns: $timeline-item-grid-template-center
+    @each $name, $multiplier in settings.$size-scales
+      $size: $timeline-dot-size + (8 * $multiplier)
 
-.v-timeline--justify-auto
-  @include horizontal(true)
-    grid-template-rows: $timeline-item-grid-template-auto
+      &--size-#{$name}
+        height: $size
+        width: $size
 
-  @include vertical(true)
-    grid-template-columns: $timeline-item-grid-template-auto
+        .v-timeline-divider__inner-dot
+          height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
+          width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
 
-// Density
-.v-timeline--density-comfortable
-  @include horizontal(true)
-    height: 100%
+  .v-timeline-divider__inner-dot
+    align-items: center
+    border-radius: $timeline-dot-border-radius
+    display: flex
+    justify-content: center
 
-    &.v-timeline--side-end
-      grid-template-rows: $timeline-density-comfortable-grid-template-end
+  /** Modifiers **/
 
-    &.v-timeline--side-start
-      grid-template-rows: $timeline-density-comfortable-grid-template-start
+  // Justify
+  .v-timeline--justify-center
+    @include horizontal(true)
+      grid-template-rows: $timeline-item-grid-template-center
 
-  @include vertical(true)
-    width: 100%
+    @include vertical(true)
+      grid-template-columns: $timeline-item-grid-template-center
 
-    &.v-timeline--side-end
-      grid-template-columns: $timeline-density-comfortable-grid-template-end
+  .v-timeline--justify-auto
+    @include horizontal(true)
+      grid-template-rows: $timeline-item-grid-template-auto
 
-    &.v-timeline--side-start
-      grid-template-columns: $timeline-density-comfortable-grid-template-start
+    @include vertical(true)
+      grid-template-columns: $timeline-item-grid-template-auto
 
-.v-timeline--density-compact
-  @include horizontal(true)
-    &.v-timeline--side-end
-      grid-template-rows: $timeline-density-compact-grid-template-end
+  // Density
+  .v-timeline--density-comfortable
+    @include horizontal(true)
+      height: 100%
 
-    &.v-timeline--side-start
-      grid-template-rows: $timeline-density-compact-grid-template-start
+      &.v-timeline--side-end
+        grid-template-rows: $timeline-density-comfortable-grid-template-end
 
-    .v-timeline-item__body
-      grid-row: 1
+      &.v-timeline--side-start
+        grid-template-rows: $timeline-density-comfortable-grid-template-start
 
-  @include vertical(true)
-    &.v-timeline--side-end
-      grid-template-columns: $timeline-density-compact-grid-template-end
+    @include vertical(true)
+      width: 100%
 
-    &.v-timeline--side-start
-      grid-template-columns: $timeline-density-compact-grid-template-start
+      &.v-timeline--side-end
+        grid-template-columns: $timeline-density-comfortable-grid-template-end
 
-    .v-timeline-item__body
-      grid-column: 3
+      &.v-timeline--side-start
+        grid-template-columns: $timeline-density-comfortable-grid-template-start
 
-// Side
-.v-timeline.v-timeline--side-end
-  .v-timeline-item
+  .v-timeline--density-compact
     @include horizontal(true)
-      .v-timeline-item__body
-        grid-row: 3
-        padding-block-end: initial
-        padding-block-start: $timeline-item-padding
+      &.v-timeline--side-end
+        grid-template-rows: $timeline-density-compact-grid-template-end
 
-      .v-timeline-item__opposite
+      &.v-timeline--side-start
+        grid-template-rows: $timeline-density-compact-grid-template-start
+
+      .v-timeline-item__body
         grid-row: 1
-        padding-block-end: $timeline-item-padding
-        padding-block-start: initial
 
     @include vertical(true)
+      &.v-timeline--side-end
+        grid-template-columns: $timeline-density-compact-grid-template-end
+
+      &.v-timeline--side-start
+        grid-template-columns: $timeline-density-compact-grid-template-start
+
       .v-timeline-item__body
         grid-column: 3
-        padding-inline-start: $timeline-item-padding
-        padding-inline-end: initial
-        justify-self: flex-start
 
-      .v-timeline-item__opposite
-        grid-column: 1
-        justify-self: flex-end
-        padding-inline-end: $timeline-item-padding
-        padding-inline-start: initial
+  // Side
+  .v-timeline.v-timeline--side-end
+    .v-timeline-item
+      @include horizontal(true)
+        .v-timeline-item__body
+          grid-row: 3
+          padding-block-end: initial
+          padding-block-start: $timeline-item-padding
+
+        .v-timeline-item__opposite
+          grid-row: 1
+          padding-block-end: $timeline-item-padding
+          padding-block-start: initial
+
+      @include vertical(true)
+        .v-timeline-item__body
+          grid-column: 3
+          padding-inline-start: $timeline-item-padding
+          padding-inline-end: initial
+          justify-self: flex-start
+
+        .v-timeline-item__opposite
+          grid-column: 1
+          justify-self: flex-end
+          padding-inline-end: $timeline-item-padding
+          padding-inline-start: initial
+
+  .v-timeline.v-timeline--side-start
+    .v-timeline-item
+      @include horizontal(true)
+        .v-timeline-item__body
+          grid-row: 1
+          padding-block-end: $timeline-item-padding
+          padding-block-start: initial
+
+        .v-timeline-item__opposite
+          grid-row: 3
+          padding-block-end: initial
+          padding-block-start: $timeline-item-padding
+
+      @include vertical(true)
+        .v-timeline-item__body
+          grid-column: 1
+          justify-self: flex-end
+          padding-inline-end: $timeline-item-padding
+
+        .v-timeline-item__opposite
+          grid-column: 3
+          padding-inline-start: $timeline-item-padding
+          justify-self: flex-start
+
+  // Fill dot
+  .v-timeline-divider--fill-dot
+    .v-timeline-divider__inner-dot
+      height: inherit
+      width: inherit
+
+  // Alignment
+  .v-timeline--align-center
+    --v-timeline-line-size-base: 50%
+    --v-timeline-line-size-offset: 0px
 
-.v-timeline.v-timeline--side-start
-  .v-timeline-item
     @include horizontal(true)
-      .v-timeline-item__body
-        grid-row: 1
-        padding-block-end: $timeline-item-padding
-        padding-block-start: initial
-
-      .v-timeline-item__opposite
-        grid-row: 3
-        padding-block-end: initial
-        padding-block-start: $timeline-item-padding
+      justify-items: center
 
-    @include vertical(true)
       .v-timeline-item__body
-        grid-column: 1
-        justify-self: flex-end
-        padding-inline-end: $timeline-item-padding
+        padding-inline: math.div($timeline-item-padding, 2)
 
       .v-timeline-item__opposite
-        grid-column: 3
-        padding-inline-start: $timeline-item-padding
-        justify-self: flex-start
-
-// Fill dot
-.v-timeline-divider--fill-dot
-  .v-timeline-divider__inner-dot
-    height: inherit
-    width: inherit
-
-// Alignment
-.v-timeline--align-center
-  --v-timeline-line-size-base: 50%
-  --v-timeline-line-size-offset: 0px
-
-  @include horizontal(true)
-    justify-items: center
+        padding-inline: math.div($timeline-item-padding, 2)
 
-    .v-timeline-item__body
-      padding-inline: math.div($timeline-item-padding, 2)
+      .v-timeline-divider
+        justify-content: center
 
-    .v-timeline-item__opposite
-      padding-inline: math.div($timeline-item-padding, 2)
+    @include vertical(true)
+      align-items: center
 
-    .v-timeline-divider
-      justify-content: center
+      .v-timeline-divider
+        justify-content: center
 
-  @include vertical(true)
-    align-items: center
+  .v-timeline--align-start
+    --v-timeline-line-size-base: 100%
+    --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
 
-    .v-timeline-divider
-      justify-content: center
+    $timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
+    $timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset))
 
-.v-timeline--align-start
-  --v-timeline-line-size-base: 100%
-  --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+    .v-timeline-item:first-child
+      .v-timeline-divider__before
+        --v-timeline-line-size-offset: #{$timeline-item-padding}
 
-  $timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
-  $timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset))
+      .v-timeline-divider__after
+        --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}
 
-  .v-timeline-item:first-child
-    .v-timeline-divider__before
-      --v-timeline-line-size-offset: #{$timeline-item-padding}
+    .v-timeline-item:last-child
+      .v-timeline-divider__after
+        --v-timeline-line-size-offset: 0px
 
-    .v-timeline-divider__after
-      --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}
+    @include horizontal(true)
+      justify-items: flex-start
 
-  .v-timeline-item:last-child
-    .v-timeline-divider__after
-      --v-timeline-line-size-offset: 0px
+      .v-timeline-divider
+        justify-content: flex-start
 
-  @include horizontal(true)
-    justify-items: flex-start
+        .v-timeline-divider__before
+          width: $timeline-line-size-before
 
-    .v-timeline-divider
-      justify-content: flex-start
+        .v-timeline-divider__after
+          width: $timeline-line-size-after
 
-      .v-timeline-divider__before
-        width: $timeline-line-size-before
+    @include vertical(true)
+      align-items: flex-start
 
-      .v-timeline-divider__after
-        width: $timeline-line-size-after
+      .v-timeline-divider
+        justify-content: flex-start
 
-  @include vertical(true)
-    align-items: flex-start
+        .v-timeline-divider__before
+          height: $timeline-line-size-before
 
-    .v-timeline-divider
-      justify-content: flex-start
+        .v-timeline-divider__after
+          height: $timeline-line-size-after
 
+  // Truncate start
+  .v-timeline--truncate-line-start
+    .v-timeline-item:first-child
       .v-timeline-divider__before
-        height: $timeline-line-size-before
+        display: none
 
       .v-timeline-divider__after
-        height: $timeline-line-size-after
+        --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
 
-// Truncate start
-.v-timeline--truncate-line-start
-  .v-timeline-item:first-child
-    .v-timeline-divider__before
-      display: none
-
-    .v-timeline-divider__after
-      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
-
-  @include vertical(true)
-    @include timeline-first-item()
-      padding-block-start: 0
+    @include vertical(true)
+      @include timeline-first-item()
+        padding-block-start: 0
 
-  @include horizontal(true)
-    @include timeline-first-item()
-      padding-inline-start: 0
+    @include horizontal(true)
+      @include timeline-first-item()
+        padding-inline-start: 0
 
-// Truncate end
-.v-timeline--truncate-line-end
-  .v-timeline-item:last-child
-    .v-timeline-divider__after
-      display: none
+  // Truncate end
+  .v-timeline--truncate-line-end
+    .v-timeline-item:last-child
+      .v-timeline-divider__after
+        display: none
 
-    .v-timeline-divider__before
-      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+      .v-timeline-divider__before
+        --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
 
-  @include vertical(true)
-    @include timeline-last-item()
-      padding-block-end: 0
+    @include vertical(true)
+      @include timeline-last-item()
+        padding-block-end: 0
 
-  @include horizontal(true)
-    @include timeline-last-item()
-      padding-inline-end: 0
+    @include horizontal(true)
+      @include timeline-last-item()
+        padding-inline-end: 0