Tracking de l'application VApp (IHM du jeu)

VApp/node_modules/vuetify/lib/components/VTimePicker/VTimePickerClock.sass

@@ -0,0 +1,148 @@
+@import './_variables.scss'
+
+// Theme
++theme(v-time-picker-clock) using ($material)
+  background: map-deep-get($material, 'picker', 'clock')
+
+  .v-time-picker-clock__item--disabled
+    color: map-deep-get($material, 'buttons', 'disabled')
+
+    &.v-time-picker-clock__item--active
+      color: map-deep-get($material-dark, 'buttons', 'disabled')
+
+  &--indeterminate
+    .v-time-picker-clock__hand
+      background-color: map-deep-get($material, 'picker', 'indeterminateTime')
+
+    &:after
+      color: map-deep-get($material, 'picker', 'indeterminateTime')
+
+    .v-time-picker-clock__item--active
+      background-color: map-deep-get($material, 'picker', 'indeterminateTime')
+
+.v-time-picker-clock
+  border-radius: 100%
+  position: relative
+  transition: $primary-transition
+  user-select: none
+  width: 100%
+  padding-top: 100%
+  flex: 1 0 auto
+
+  &__container
+    display: flex
+    flex-direction: column
+    flex-basis: 290px
+    justify-content: center
+    padding: $time-picker-clock-padding
+
+  &__ampm
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    align-items: flex-end
+    position: absolute
+    width: 100%
+    height: 100%
+    top: 0
+    left: 0
+    margin: 0
+    padding: $time-picker-ampm-padding
+
+  &__hand
+    height: $time-picker-clock-hand-height
+    width: $time-picker-clock-hand-width
+    bottom: 50%
+    left: $time-picker-clock-hand-left
+    transform-origin: center bottom
+    position: absolute
+    will-change: transform
+    z-index: 1
+
+    &:before
+      background: transparent
+      border-width: $time-picker-clock-end-border-width
+      border-style: $time-picker-clock-end-border-style
+      border-color: $time-picker-clock-end-border-color
+      border-radius: 100%
+      width: $time-picker-clock-end-size
+      height: $time-picker-clock-end-size
+      content: ''
+      position: absolute
+      top: $time-picker-clock-end-top
+      left: 50%
+      transform: translate(-50%, -50%)
+
+    &:after
+      content: ''
+      position: absolute
+      height: $time-picker-clock-center-size
+      width: $time-picker-clock-center-size
+      top: 100%
+      left: 50%
+      border-radius: 100%
+      border-style: solid
+      border-color: inherit
+      background-color: inherit
+      transform: translate(-50%, -50%)
+
+    &--inner:after
+      height: $time-picker-clock-inner-hand-height
+
+.v-picker--full-width
+  .v-time-picker-clock__container
+    max-width: $time-picker-clock-max-width
+
+.v-time-picker-clock__inner
+  position: absolute
+  bottom: $time-picker-clock-inner-offset
+  left: $time-picker-clock-inner-offset
+  right: $time-picker-clock-inner-offset
+  top: $time-picker-clock-inner-offset
+
+.v-time-picker-clock__item
+  align-items: center
+  border-radius: 100%
+  cursor: default
+  display: flex
+  font-size: $time-picker-number-font-size
+  justify-content: center
+  height: $time-picker-indicator-size
+  position: absolute
+  text-align: center
+  width: $time-picker-indicator-size
+  user-select: none
+  transform: translate(-50%, -50%)
+
+  > span
+    z-index: 1
+
+  &:before, &:after
+    content: ''
+    border-radius: 100%
+    position: absolute
+    top: 50%
+    left: 50%
+    height: 14px
+    width: 14px
+    transform: translate(-50%, -50%)
+
+  &:after, &:before
+    height: $time-picker-indicator-size
+    width: $time-picker-indicator-size
+
+  &--active
+    color: map-get($shades, 'white')
+    cursor: default
+    z-index: 2
+
+  &--disabled
+    pointer-events: none
+
+.v-picker--landscape
+  .v-time-picker-clock
+    &__container
+      flex-direction: row
+
+    &__ampm
+      flex-direction: column