quasar/src/components/datetime/QTime.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-time
  max-width 100%
  box-shadow $shadow-2
  border-radius $generic-border-radius
  background white
  outline none

  &--bordered
    border 1px solid $separator-color

  &__header
    border-top-left-radius inherit
    color white
    background-color $primary
    background-color var(--q-color-primary)
    padding 16px
    font-weight 300

  &__header-label
    font-size 28px
    line-height 1
    letter-spacing -0.00833em

    > div + div
      margin-left 4px

  &__link
    opacity .56
    outline 0
    transition opacity .3s ease-out
    &--active, &:hover, &:focus
      opacity 1

  &__header-ampm
    font-size 16px
    letter-spacing 0.1em

  &__content
    padding 16px

    &:before
      content ''
      display block
      padding-bottom 100%

  &__container-parent
    padding 16px

  &__container-child
    border-radius 50%
    background rgba(0, 0, 0, .12)

  &__clock
    padding 24px
    width 100%
    height 100%
    max-width 100%
    max-height 100%
    font-size 14px

  &__clock-circle
    position relative

  &__clock-center
    height 6px
    width 6px
    margin auto
    border-radius 50%
    min-height 0
    background currentColor

  &__clock-pointer
    width 1px
    height 50%
    transform-origin top center /* rtl:ignore */
    min-height 0
    position absolute
    left 50%
    right 0
    bottom 0
    color $primary
    color var(--q-color-primary)
    background currentColor
    transform translateX(-50%)

    &:before, &:after
      content ''
      position absolute
      left 0
      border-radius 50%
      background currentColor
      transform translateX(-44%)
    &:before
      bottom -4px
      width 8px
      height 8px
    &:after
      top -3px
      height 6px
      width 6px

  &__clock-position
    position absolute
    min-height 32px
    width 32px
    height 32px
    font-size 12px
    line-height 32px
    margin 0
    padding 0
    transform translate(-50%, -50%) /* rtl:ignore */
    border-radius 50%

    &--disable
      opacity .4

    &--active
      background-color $primary
      background-color var(--q-color-primary)
      color white

  for $pos in 0..11
    $angle = (270 + 30 * $pos)
    $top = (1 + sin($angle * 1deg))
    $left = (1 + cos($angle * 1deg))

    &__clock-pos-{$pos}
      top round($top * 50%, 2)
      left round($left * 50%, 2) /* rtl:ignore */

  for $pos in 12..23
    $angle = (270 + 30 * $pos)
    $top = (1 + sin($angle * 1deg))
    $left = (1 + cos($angle * 1deg))

    &__clock-pos-{$pos}
      top round(15% + $top * 35%, 2)
      left round(15% + $left * 35%, 2) /* rtl:ignore */

  &__now-button
    background-color $primary
    background-color var(--q-color-primary)
    color white
    top 12px
    right 12px

  &__event
    position absolute
    bottom 2px
    left 50%
    height 5px
    width 10px
    border-radius 5px
    background-color $secondary
    background-color var(--q-color-secondary)
    transform translate3d(-50%, 0, 0)

  &.disabled, &--readonly
    .q-time__header-ampm, .q-time__content
      pointer-events none

  &--portrait
    display inline-flex
    flex-direction column
    width 290px
    min-width 180px

    .q-time__header
      border-top-right-radius inherit
      min-height 86px

    .q-time__header-ampm
      margin-left 12px

  &--landscape
    display inline-flex
    align-items stretch
    width 420px
    min-width 310px
    min-height 180px

    > div
      display flex
      flex-direction column
      justify-content center

    .q-time__header
      border-bottom-left-radius inherit
      width 110px

    .q-time__header-ampm
      margin-top 12px

  &--dark
    color white
    background $grey-9