flatpickr/src/style/flatpickr_base.styl

A lightweight, powerful javascript datetime picker

$width = 256px

.flatpickr-input
	cursor pointer
	z-index 1

.flatpickr-wrapper
	position absolute
	display inline-block

	&.inline, &.static, &.inline .flatpickr-calendar
		position relative

	&.static .flatpickr-calendar
		position absolute

	input
		cursor pointer
		z-index 1

	&.open, &.inline
		 .flatpickr-calendar

			z-index 99999
			visibility visible


.flatpickr-calendar

	background $calendar_background

	unless $border-calendar-only is defined
		border 1px solid $calendar_border_color

	font-size 90%
	border-radius 3px
	position absolute
	top 100%
	left 0
	visibility hidden
	width $width

	&.hasWeeks
		width $width + 32px
		.flatpickr-weekdays span
			width 12.5%

	&:before, &:after
		position absolute
		display block
		content: ""
		width 0
		height 0
		border-style solid

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

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


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


	&.arrowTop
		&:before, &:after
			bottom 100%
		&:before
			border-bottom-color $calendar_border_color
		&:after
			if $border-calendar-only is defined
				border-bottom-color $months_background
			else
				border-bottom-color $calendar_background

	&.arrowBottom
		&:before, &:after
			top 100%
		&:before
			border-top-color $calendar_border_color
		&:after
			if $border-calendar-only is defined
				border-top-color $months_background
			else
				border-top-color $calendar_background




.flatpickr-month
	if $border-calendar-only is defined
		border-radius 3px 3px 0 0
	background $months_background
	color $months_color
	padding 4px 5px 2px 5px
	text-align center
	position relative


.flatpickr-prev-month, .flatpickr-next-month
	text-decoration none
	cursor pointer
	position absolute
	top 0.5rem

	i
		position relative

	&:hover
		color $today_color

.flatpickr-prev-month
	float left
	left 0.5rem

.flatpickr-next-month
	float right
	right 0.5rem

.flatpickr-current-month
	font-size 135%
	font-weight 300
	color alpha($months_color, 0.7)
	display inline-block

	.cur_month
		font-weight 700
		color $months_color

	.cur_year
		background transparent
		box-sizing border-box
		color inherit
		cursor default
		padding 0 0 0 2px
		margin 0
		width 3.15em
		display inline
		font-size inherit
		font-weight 300
		line-height inherit
		height initial
		border 0

		&:hover
			background rgba(0,0,0,0.05)



.flatpickr-weekdays
	font-size 90%
	background $weekdays_background
	padding 2px 0 4px 0
	text-align center

	span
		if $weekdays_color is defined
			color $weekdays_color

		opacity 0.54
		text-align center
		display inline-block
		width 14.28%
		font-weight bold

.flatpickr-weeks
	width 32px
	float left

.flatpickr-days
	padding-top 1px
	outline 0

	if $border-calendar-only is defined
		border 1px solid $calendar_border_color
		border-top 0
		border-radius 0 0 3px 3px

.flatpickr-days, .flatpickr-weeks
	span
		background none
		border 1px solid transparent
		border-radius 150px
		box-sizing border-box
		color $day_text_color
		cursor pointer
		display inline-block
		font-weight 300
		width floor(($width/7 - 2),0)
		height (@width)
		line-height (@width - 1px)
		margin 0 1px 1px 1px
		text-align center

		&.disabled, &.disabled:hover, &.prevMonthDay, &.nextMonthDay
			color alpha($day_text_color, 0.3)
			background transparent
			border-color transparent
			cursor default

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

		&.today
			border-color $today_color

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

		&.selected, &.selected:hover, &.selected:focus
			background $selected_day_background

			if $selected_day_color is defined
				color $selected_day_color
			else
				color white

			border-color $selected_day_background



.flatpickr-time

	overflow auto
	text-align center
	border-top 0
	outline 0

	input[type='number']
		background transparent
		-webkit-appearance none
		-moz-appearance textfield
		box-shadow none
		border 0
		border-radius 0
		display inline-block
		width 33%
		min-width 33%
		text-align center
		margin 0
		padding 0
		height 38px
		line-height 38px
		cursor pointer
		font-weight bold
		color $day_text_color

		&.flatpickr-minute
			width 26%
			font-weight 300

		&.flatpickr-second
			font-weight 300

		&:focus
			outline 0
			border 0

		&:hover, &:focus
			background lighten($day_hover_background_color, 4)

	&.has-seconds
		input[type='number']
			width 25%
			min-width 25%

.flatpickr-days + .flatpickr-time
	if $border-calendar-only is defined
		border 1px solid $calendar_border_color
		border-top 0

	else
		border-top 1px solid $calendar_border_color

.flatpickr-time-separator, .flatpickr-am-pm
	height 38px
	display inline-block
	line-height 38px
	color $day_text_color

.flatpickr-am-pm
	outline 0
	width 21%
	padding 0 2%
	cursor pointer
	text-align left
	font-weight 300

	&:hover, &:focus
		background lighten($day_hover_background_color, 4)


@media all and (-ms-high-contrast: none)
	.flatpickr-month
		padding 0