705 lines
13 KiB
Stylus
705 lines
13 KiB
Stylus
@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
|
|
user-select none
|
|
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
|