flatpickr.styl

@require "./_vars.styl"

@keyframes fpFadeInDown
  from
    opacity 0
    transform translate3d(0, -20px, 0)

  to
    opacity 1
    transform translate3d(0, 0, 0)


.flatpickr-calendar
  background transparent
  opacity 0
  display none
  text-align center
  visibility hidden
  padding 0
  animation none
  direction ltr
  border 0
  font-size 14px
  line-height 24px
  border-radius 5px
  position absolute
  width $calendarWidth
  box-sizing border-box
  touch-action manipulation

  if $noCalendarBorder is defined
    box-shadow 0 3px 13px alpha(black, 0.08)

  else
    background $calendarBackground
    box-shadow 1px 0 0 $calendarBorderColor,
      -1px 0 0 $calendarBorderColor,
      0 1px 0 $calendarBorderColor,
      0 -1px 0 $calendarBorderColor,
      0 3px 13px alpha(black, 0.08)


  &.open, &.inline
    opacity 1
    max-height 640px
    visibility visible

  &.open
    display inline-block
    z-index 99999

  &.animate.open
    animation fpFadeInDown 300ms $bezier

  &.inline
    display block
    position relative
    top 2px

  &.static
    position absolute
    top calc(100% + 2px)

    &.open
      z-index 999
      display block

  &.multiMonth
    .flatpickr-days .dayContainer:nth-child(n+1)
      & .flatpickr-day.inRange:nth-child(7n+7)
        box-shadow: none !important;

    .flatpickr-days .dayContainer:nth-child(n+2)
      & .flatpickr-day.inRange:nth-child(7n+1)
        box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6



  .hasWeeks, .hasTime
    .dayContainer
      border-bottom 0
      border-bottom-right-radius 0
      border-bottom-left-radius 0

  if $noCalendarBorder
    .hasWeeks .dayContainer
      border-left 0

  &.hasTime
    .flatpickr-time
      height $timeHeight
      border-top 1px solid $calendarBorderColor

    if $noCalendarBorder is defined
      .flatpickr-innerContainer
        border-bottom 0

      .flatpickr-time
        border 1px solid $calendarBorderColor

  &.noCalendar.hasTime
    .flatpickr-time
      height auto

  &:before, &:after
    position absolute
    display block
    pointer-events none
    border solid transparent
    content ''
    height 0
    width 0
    left 22px

  &.rightMost, &.arrowRight
    &:before, &:after
      left auto
      right 22px

  &.arrowCenter
    &:before, &:after
      left 50%
      right 50%

  &:before
    border-width 5px
    margin 0 -5px

  &:after
    border-width 4px
    margin 0 -4px

  &.arrowTop
    &:before, &:after
      bottom 100%
    &:before
      border-bottom-color $calendarBorderColor
    &:after
      if $noCalendarBorder is defined
        border-bottom-color $monthBackground
      else
        border-bottom-color $calendarBackground

  &.arrowBottom
    &:before, &:after
      top 100%
    &:before
      border-top-color $calendarBorderColor
    &:after
      if $noCalendarBorder is defined
        border-top-color $monthBackground
      else
        border-top-color $calendarBackground

  &:focus
    outline 0

.flatpickr-wrapper
  position relative
  display inline-block

.flatpickr-months
  display flex

  .flatpickr-month
    if $noCalendarBorder is defined
      border-radius 5px 5px 0 0
    background $monthBackground
    color $monthForeground
    fill $monthForeground
    height $monthNavHeight
    line-height 1
    text-align center
    position relative
    user-select none
    overflow hidden
    flex 1

  .flatpickr-prev-month, .flatpickr-next-month
    text-decoration none
    cursor pointer
    position absolute
    top 0
    height $monthNavHeight
    padding 10px
    z-index 3
    color $monthForeground
    fill $monthForeground

    &.flatpickr-disabled
      display none

    i
      position relative

    &.flatpickr-prev-month
      /*!
      /*rtl:begin:ignore*//*
      */
      left 0
      /*!
      /*rtl:end:ignore*//*
      */


    &.flatpickr-next-month
      /*!
      /*rtl:begin:ignore*//*
      */
      right 0
      /*!
      /*rtl:end:ignore*//*
      */

    &:hover
      color $todayColor
      svg
        if $arrow_hover_color is defined
          fill $arrow_hover_color

        else
          fill $todayColor

    svg
      width 14px
      height 14px

      path
        transition fill 0.1s
        fill inherit


.numInputWrapper
  position relative
  height auto

  input, span
    display inline-block

  input
    width 100%
    &::-ms-clear
      display none

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button
      margin 0
      -webkit-appearance none

  span
    position absolute
    right 0
    width 14px
    padding 0 4px 0 2px
    height 50%
    line-height 50%
    opacity 0
    cursor pointer
    border 1px solid alpha($dayForeground, 0.15)
    box-sizing border-box

    &:hover
      background: alpha($invertedBg, 0.1)

    &:active
      background: alpha($invertedBg, 0.2)

    &:after
      display block
      content ""
      position absolute

    &.arrowUp
      top 0
      border-bottom 0

      &:after
        border-left 4px solid transparent
        border-right 4px solid transparent
        border-bottom 4px solid alpha($dayForeground, 0.6)
        top 26%

    &.arrowDown
      top 50%

      &:after
        border-left 4px solid transparent
        border-right 4px solid transparent
        border-top 4px solid alpha($dayForeground, 0.6)
        top 40%

    svg
      width inherit
      height auto
      path
        fill alpha($monthForeground, 0.5)

  &:hover
    background: alpha($invertedBg, 0.05)

    span
      opacity 1


.flatpickr-current-month
  font-size 135%
  line-height inherit
  font-weight 300
  color inherit
  position absolute
  width 75%
  left 12.5%
  padding (0.22*$monthNavHeight) 0 0 0
  line-height 1
  height $monthNavHeight
  display inline-block
  text-align center
  transform translate3d(0px, 0px, 0px)

  span.cur-month
    font-family inherit
    font-weight 700
    color inherit
    display inline-block
    margin-left 0.5ch
    padding 0

    &:hover
      background: alpha($invertedBg, 0.05)


  .numInputWrapper
    width 6ch
    width unquote("7ch\0")
    display inline-block

    span.arrowUp:after
      border-bottom-color $monthForeground

    span.arrowDown:after
      border-top-color $monthForeground

  input.cur-year
    background transparent
    box-sizing border-box
    color inherit
    cursor text
    padding 0 0 0 0.5ch
    margin 0
    display inline-block
    font-size inherit
    font-family inherit
    font-weight 300
    line-height inherit
    height auto
    border 0
    border-radius 0
    vertical-align initial
    -webkit-appearance textfield
    -moz-appearance textfield
    appearance textfield

    &:focus
      outline 0

    &[disabled], &[disabled]:hover
      font-size 100%
      color alpha($monthForeground, 0.5)
      background transparent
      pointer-events none

  .flatpickr-monthDropdown-months
    appearance: menulist
    background: $monthBackground
    border: none
    border-radius: 0
    box-sizing: border-box
    color: inherit
    cursor: pointer
    font-size: inherit
    font-family: inherit
    font-weight: 300
    height: auto
    line-height: inherit
    margin: -1px 0 0 0
    outline: none
    padding: 0 0 0 0.5ch
    position: relative
    vertical-align: initial
    -webkit-box-sizing: border-box
    -webkit-appearance: menulist
    -moz-appearance: menulist
    width: auto

    &:focus, &:active
      outline: none

    &:hover
      background: alpha($invertedBg, 0.05)

    .flatpickr-monthDropdown-month
      background-color: $monthBackground
      outline: none
      padding: 0

.flatpickr-weekdays
  background $weekdaysBackground
  text-align center
  overflow hidden
  width 100%
  display flex
  align-items center
  height $weekdaysHeight

  .flatpickr-weekdaycontainer
    display flex
    flex 1



span.flatpickr-weekday
  cursor default
  font-size 90%
  background $monthBackground
  color $weekdaysForeground
  line-height 1
  margin 0
  text-align center
  display block
  flex 1
  font-weight bolder


.dayContainer, .flatpickr-weeks
  padding 1px 0 0 0

.flatpickr-days
  position: relative;
  overflow: hidden;
  display flex
  align-items: flex-start;
  width $daysWidth

  &:focus
    outline 0

  if $noCalendarBorder is defined
    border-left 1px solid $calendarBorderColor
    border-right 1px solid $calendarBorderColor


.dayContainer
  padding 0
  outline 0
  text-align left
  width ($daysWidth)
  min-width ($daysWidth)
  max-width ($daysWidth)
  box-sizing border-box
  display inline-block
  display -ms-flexbox
  display flex
  flex-wrap wrap
  -ms-flex-wrap wrap
  -ms-flex-pack: justify
  justify-content space-around
  transform: translate3d(0px, 0px, 0px);
  opacity 1

  & + .dayContainer
    box-shadow: -1px 0 0 $calendarBorderColor;


.flatpickr-day
  background none
  border 1px solid transparent
  border-radius 150px
  box-sizing border-box
  color $dayForeground
  cursor pointer

  font-weight 400
  width 14.2857143%
  flex-basis 14.2857143%
  max-width $daySize
  height $daySize
  line-height $daySize
  margin 0

  display inline-block
  position relative
  justify-content center
  text-align center

  &, &.prevMonthDay, &.nextMonthDay
    &.inRange, &.today.inRange, &:hover, &:focus
      cursor pointer
      outline 0
      background $dayHoverBackground
      border-color $dayHoverBackground


  &.today
    border-color $todayColor

    &:hover, &:focus
      border-color $todayColor
      background $todayColor
      if $today_fg_color is defined
        color $today_fg_color
      else
        color white

  &.selected, &.startRange, &.endRange
    &, &.inRange, &:focus, &:hover, &.prevMonthDay, &.nextMonthDay
      background $selectedDayBackground
      box-shadow none

      if $selectedDayForeground is defined
        color $selectedDayForeground
      else
        color white

      border-color $selectedDayBackground

    &.startRange
      border-radius 50px 0 0 50px
      //box-shadow:  (2.5*$dayMargin) 0 0 $selectedDayBackground

    &.endRange
      border-radius 0 50px 50px 0

    // Avoid adding extra fill because it overflows in multimonth mode
    &.startRange + .endRange:not(:nth-child(7n+1))
      box-shadow: (-5*$dayMargin) 0 0 $selectedDayBackground

    &.startRange.endRange
      border-radius 50px

  &.inRange
    border-radius 0
    box-shadow: (-2.5*$dayMargin) 0 0 $dayHoverBackground, (2.5*$dayMargin) 0 0 $dayHoverBackground

  &.flatpickr-disabled, &.flatpickr-disabled:hover,
  &.prevMonthDay, &.nextMonthDay,
  &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay
    color alpha($dayForeground, 0.3)
    background transparent

    if $disabled_border_color is defined
      border-color $disabled_border_color

    else
      border-color transparent
    cursor default

  &.flatpickr-disabled, &.flatpickr-disabled:hover
    cursor not-allowed
    color alpha($dayForeground, 0.1)

  &.week.selected
    border-radius 0
    box-shadow: (-2.5*$dayMargin) 0 0 $selectedDayBackground,
      (2.5*$dayMargin) 0 0 $selectedDayBackground

  &.hidden
    visibility hidden

.rangeMode .flatpickr-day
  margin-top 1px

.flatpickr-weekwrapper
  float left

  .flatpickr-weeks
    padding 0 12px
    if $noCalendarBorder is defined
      border-left 1px solid $calendarBorderColor
    else
      box-shadow 1px 0 0 $calendarBorderColor

  .flatpickr-weekday
    float none
    width 100%
    line-height $weekdaysHeight

  span.flatpickr-day
    &, &:hover
      display block
      width 100%
      max-width none
      color alpha($dayForeground, 0.3)
      background transparent
      cursor default
      border none


.flatpickr-innerContainer
  display block
  display flex
  box-sizing border-box
  overflow: hidden;

  if $noCalendarBorder is defined
    background $calendarBackground
    border-bottom 1px solid $calendarBorderColor


.flatpickr-rContainer
  display inline-block
  padding 0
  box-sizing border-box


.flatpickr-time
  text-align center
  outline 0
  display block
  height 0 // hide initially
  line-height $timeHeight
  max-height $timeHeight
  box-sizing border-box
  overflow hidden
  display flex

  if $noCalendarBorder is defined
    background $calendarBackground
    border-radius 0 0 5px  5px

  &:after
    content ""
    display table
    clear both

  .numInputWrapper
    flex 1
    width 40%
    height $timeHeight
    float left

    span.arrowUp:after
      border-bottom-color $dayForeground

    span.arrowDown:after
      border-top-color $dayForeground

  &.hasSeconds .numInputWrapper
    width 26%

  &.time24hr .numInputWrapper
    width 49%

  input
    background transparent
    box-shadow none
    border 0
    border-radius 0
    text-align center
    margin 0
    padding 0
    height inherit
    line-height inherit
    color $dayForeground
    font-size 14px
    position relative
    box-sizing border-box
    -webkit-appearance textfield
    -moz-appearance textfield
    appearance textfield


    &.flatpickr-hour
      font-weight bold

    &.flatpickr-minute, &.flatpickr-second
      font-weight 400

    &:focus
      outline 0
      border 0

  .flatpickr-time-separator, .flatpickr-am-pm
    height inherit
    float left
    line-height inherit
    color $dayForeground
    font-weight bold
    width 2%
    user-select none
    align-self center

  .flatpickr-am-pm
    outline 0
    width 18%
    cursor pointer
    text-align center
    font-weight 400

  input, .flatpickr-am-pm
    &:hover, &:focus
      background lighten($dayHoverBackground, 3)

.flatpickr-input[readonly]
  cursor pointer