quasar-framework/src/components/datetime/datetime.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-datetime-input
  min-width $datetime-input-min-width

.q-datetime-controls
  padding 0 10px 8px

.q-datetime
  font-size 12px
  text-align center
  user-select none
  line-height initial
  .modal-buttons
    padding-top 8px
  &:not(.no-border)
    &:not(.q-datetime-dark) .q-datetime-content
      border 1px solid $grey-4
    &.q-datetime-dark
      border 1px solid $dark
      border 1px solid var(--q-color-dark)

.q-datetime-header
  background currentColor
  > div
    color white
    width 100%
.modal-content, .q-popover
  > .q-datetime > .q-datetime-header
    min-width 175px

.q-datetime-weekdaystring
  font-size .8rem
  background rgba(0, 0, 0, .1)
  padding 5px 0

.q-datetime-time
  padding 10px 0
  will-change scroll-position
  overflow auto

.q-datetime-ampm
  font-size .9rem
  padding 5px

.q-datetime-datestring
  padding 10px 0
  .q-datetime-link
    font-size 2.7rem
    span
      padding 0 5px
      width 100%
    &.small
      margin 0 5px
      font-size 1.2rem
      span
        padding 5px

.q-datetime-link
  opacity .6
  > span
    cursor pointer
    display inline-block
    outline 0
  &.active
    opacity 1

.q-datetime-clockstring
  min-width 210px
  font-size 2.7rem
  direction: ltr /* rtl:ignore */

.q-datetime-selector
  min-width 290px
  height 310px
  overflow auto

.q-datetime-view-day
  width 250px
  height 285px
  color black

.q-datetime-view-year, .q-datetime-view-month
  > .q-btn:not(.active)
    color black

.q-datetime-month-stamp
  font-size 16px

.q-datetime-weekdays
  margin-bottom 5px
  div
    opacity .6
    width 35px
    height 35px
    line-height 35px
    margin 0
    padding 0
    min-width 0
    min-height 0
    background transparent

.q-datetime-days div
  margin 1px
  line-height 33px
  width 33px
  height 33px
  border-radius 50%

  &.q-datetime-day-active
    background currentColor
    > span
      color white
  &.q-datetime-day-today
    color currentColor
    font-size 14px
    border 1px solid currentColor
  &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
    background $grey-4

.q-datetime-btn
  font-weight normal
  &.active
    font-size 1.5rem
    padding-top 1rem
    padding-bottom 1rem

.q-datetime-clock
  width 250px
  height 250px
  border-radius 50%
  background $grey-4
  padding 24px

.q-datetime-clock-circle
  position relative
  animation q-pop .5s /* rtl:ignore */

.q-datetime-clock-center
  height 6px
  width 6px
  top 0
  margin auto
  border-radius 50%
  min-height 0
  position absolute
  left 0
  right 0
  bottom 0
  background currentColor

.q-datetime-clock-pointer
  width 1px
  height 50%
  margin 0 auto
  transform-origin top center /* rtl:ignore */
  min-height 0
  position absolute
  left 0
  right 0
  bottom 0
  background currentColor
  span
    position absolute
    border-radius 50%
    width 8px
    height 8px
    bottom -8px
    left 0
    min-width 0
    min-height 0
    transform translate(-50%, -50%)
    background currentColor

.q-datetime-arrow
  color $grey-7

.q-datetime-dark
  background $dark
  background var(--q-color-dark)
  .q-datetime-arrow
    color $light
    color var(--q-color-light)
  .q-datetime-header, .q-datetime-clock
    background $grey-8
  .q-datetime-view-day
    color white
  .q-datetime-view-year, .q-datetime-view-month
    > .q-btn:not(.active)
      color white
  .q-datetime-days div
    &.q-datetime-day-active > span, &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
      color black

body.desktop
  .q-datetime-clock-position:not(.active):hover
    background $grey-2 !important
  .q-datetime-dark .q-datetime-clock-position:not(.active):hover
    color black

.q-datetime-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%
  &:not(.active)
    color black
    .q-datetime-dark &
      color white
  &.active
    background currentColor
    > span
      color white

for $pos in 0..12
  $degree = (270 + 30 * $pos)
  .q-datetime-clock-pos-{$pos}
    top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */

for $pos in 1..12
  $degree = (270 + 30 * $pos)
  .q-datetime-clock-pos-{$pos}.fmt24
    top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
for $pos in 13..23
  $degree = (270 + 30 * $pos)
  .q-datetime-clock-pos-{$pos}.fmt24
    top round(15% + ((1 + sin($degree * 1deg)) * 70%) / 2, 2)
    left round(15% + ((1 + cos($degree * 1deg)) * 70%) / 2, 2) /* rtl:ignore */
.q-datetime-clock-pos-0.fmt24
  top round(15% + ((1 + sin(270deg)) * 70%) / 2, 2)
  left round(15% + ((1 + cos(270deg)) * 70%) / 2, 2) /* rtl:ignore */

.q-datetime-range
  &.row
    .q-datetime-range-left
      border-top-right-radius 0
      border-bottom-right-radius 0
    .q-datetime-range-right
      border-top-left-radius 0
      border-bottom-left-radius 0
  &.column > div + div
    margin-top $datetime-range-space

@media (max-width $breakpoint-sm-max)
  .q-datetime
    flex-direction column !important

@media (min-width $breakpoint-md-min)
  .q-datetime-header
    flex 1 1 auto
  .q-datetime-content
    flex 2 2 auto