Tracking de l'application VApp (IHM du jeu)

VApp/node_modules/vuetify/lib/components/VTimeline/VTimeline.sass

@@ -0,0 +1,410 @@
+@use 'sass:map'
+@use 'sass:math'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+@use './mixins' as *
+
+// 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
+  display: grid
+  grid-auto-flow: dense
+  position: relative
+
+  @include horizontal(true)
+    grid-column-gap: $timeline-item-padding
+    width: 100%
+
+    .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
+
+    @include timeline-last-item()
+      padding-block-end: $timeline-item-padding
+
+    .v-timeline-item:nth-child(2n)
+      .v-timeline-item__body
+        grid-column: 1
+        padding-inline-end: $timeline-item-padding
+
+      .v-timeline-item__opposite
+        grid-column: 3
+        padding-inline-start: $timeline-item-padding
+
+    .v-timeline-item:nth-child(2n+1)
+      .v-timeline-item__body
+        grid-column: 3
+        padding-inline-start: $timeline-item-padding
+
+      .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
+
+    @include horizontal
+      width: $timeline-line-size
+      inset-inline-start: 0
+      inset-inline-end: initial
+
+  .v-timeline-divider__after
+    @include vertical
+      height: $timeline-line-size-first-last
+
+    @include horizontal
+      width: $timeline-line-size-first-last
+      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
+
+  .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
+
+    @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-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__dot
+  z-index: 1
+  flex-shrink: 0
+  border-radius: $timeline-dot-border-radius
+  display: flex
+  justify-content: center
+  align-items: center
+
+  @include tools.elevation($timeline-divider-dot-elevation)
+
+  @each $name, $multiplier in settings.$size-scales
+    $size: $timeline-dot-size + (8 * $multiplier)
+
+    &--size-#{$name}
+      height: $size
+      width: $size
+
+      .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)})
+
+.v-timeline-divider__inner-dot
+  align-items: center
+  border-radius: $timeline-dot-border-radius
+  display: flex
+  justify-content: center
+
+/** Modifiers **/
+
+// Justify
+.v-timeline--justify-center
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-center
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-center
+
+.v-timeline--justify-auto
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-auto
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-auto
+
+// Density
+.v-timeline--density-comfortable
+  @include horizontal(true)
+    height: 100%
+
+    &.v-timeline--side-end
+      grid-template-rows: $timeline-density-comfortable-grid-template-end
+
+    &.v-timeline--side-start
+      grid-template-rows: $timeline-density-comfortable-grid-template-start
+
+  @include vertical(true)
+    width: 100%
+
+    &.v-timeline--side-end
+      grid-template-columns: $timeline-density-comfortable-grid-template-end
+
+    &.v-timeline--side-start
+      grid-template-columns: $timeline-density-comfortable-grid-template-start
+
+.v-timeline--density-compact
+  @include horizontal(true)
+    &.v-timeline--side-end
+      grid-template-rows: $timeline-density-compact-grid-template-end
+
+    &.v-timeline--side-start
+      grid-template-rows: $timeline-density-compact-grid-template-start
+
+    .v-timeline-item__body
+      grid-row: 1
+
+  @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
+
+// 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
+
+  @include horizontal(true)
+    justify-items: center
+
+    .v-timeline-item__body
+      padding-inline: math.div($timeline-item-padding, 2)
+
+    .v-timeline-item__opposite
+      padding-inline: math.div($timeline-item-padding, 2)
+
+    .v-timeline-divider
+      justify-content: center
+
+  @include vertical(true)
+    align-items: center
+
+    .v-timeline-divider
+      justify-content: center
+
+.v-timeline--align-start
+  --v-timeline-line-size-base: 100%
+  --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+
+  $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-item:first-child
+    .v-timeline-divider__before
+      --v-timeline-line-size-offset: #{$timeline-item-padding}
+
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}
+
+  .v-timeline-item:last-child
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: 0px
+
+  @include horizontal(true)
+    justify-items: flex-start
+
+    .v-timeline-divider
+      justify-content: flex-start
+
+      .v-timeline-divider__before
+        width: $timeline-line-size-before
+
+      .v-timeline-divider__after
+        width: $timeline-line-size-after
+
+  @include vertical(true)
+    align-items: flex-start
+
+    .v-timeline-divider
+      justify-content: flex-start
+
+      .v-timeline-divider__before
+        height: $timeline-line-size-before
+
+      .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
+      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 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
+
+    .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 horizontal(true)
+    @include timeline-last-item()
+      padding-inline-end: 0