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

.q-datetime-header
  background currentColor
  > div
    color white

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

.q-datetime-time
  padding 10px 0

div + .q-datetime-time
  padding-top 0

.q-datetime-ampm
  font-size .9rem

.q-datetime-datestring
  font-size 2.7rem
  span.small
    font-size 1.2rem

.q-datetime-link
  pointer-events none
  opacity .6
  > span
    cursor pointer
    pointer-events all
    display inline-block
    width 100%
    outline 0
  &.active
    opacity 1

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

.q-datetime-selector
  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
      font-weight bold
  &.q-datetime-day-today
    color currentColor
    font-weight bold
    font-size 14px
  &: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 0..23
  $degree = (270 + 15 * $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 */

.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-ampm
    margin-left 1.5rem
  .q-datetime-datestring span
    margin 10px 5px
    &.small
      margin-top 1.3rem
  .q-datetime
    width 290px
    &:not(.no-border)
      &:not(.q-datetime-dark) .q-datetime-content
        border-width 0 1px 1px 1px
        border-style solid
        border-color $grey-4
      &.q-datetime-dark
        border 1px solid $dark
        border 1px solid var(--q-color-dark)

@media (min-width $breakpoint-md-min)
  .q-datetime-datestring
    padding 10px 0
  .q-datetime-ampm
    margin-top 5px
    div
      margin 2px 0
  .q-datetime-header
    width 170px
    position relative
  .q-datetime-weekdaystring
    position absolute
    top 0
    left 0
    right 0
  .q-datetime-content
    width 290px
  .q-datetime
    width 480px
    &:not(.no-border)
      &:not(.q-datetime-dark) .q-datetime-content
        border-width 1px 1px 1px 0
        border-style solid
        border-color $grey-4
      &.q-datetime-dark
        border 1px solid $dark
        border 1px solid var(--q-color-dark)
  .q-datetime-minimal
    width 320px