lucid-ui/src/components/CalendarMonth/CalendarMonth.less

A UI component library from AppNexus.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@CalendarMonth-DayPicker-Caption-margin: @size-standard;

.@{prefix}-CalendarMonth {
	color: @color-textColor;
	text-align: center;
	display: flex;
	align-items: stretch;
	font-size: @size-font;

	.DayPicker-wrapper {
		flex: 1;
	}

	.DayPicker-Month {
		user-select: none;
		margin: 0;
		flex: 1;
		display: flex;
		flex-direction: column;

		.DayPicker-Caption {
			font-weight: 500;
			font-size: 14px;
			margin-bottom: @CalendarMonth-DayPicker-Caption-margin;
		}

		.DayPicker-Weekdays {
			.DayPicker-WeekdaysRow {
				display: flex;

				.DayPicker-Weekday {
					text-transform: uppercase;
					color: @color-neutral-6;
					flex: 1;
					font-size: 100%;

					abbr {
						text-decoration: none;
					}
				}
			}
		}

		.DayPicker-Body {
			flex: 1;
			display: flex;
			flex-direction: column;

			.DayPicker-Week {
				flex: 1;
				display: flex;

				.DayPicker-Day {
					line-height: 26px;
					font-size: 100%;
					cursor: pointer;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					&.DayPicker-Day:focus {
						outline: none;

						&:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--from):not(.DayPicker-Day--to) {
							outline: 1px solid multiply(@featured-color-primary-backgroundColor, #ccc);
						}
					}

					&--today:not(.DayPicker-Day--outside) {
						font-weight: 500;
					}

					&--selected:not(.DayPicker-Day--outside) {
						color: @color-white;
						background-color: @color-primary;
					}

					&--disabled {
						color: @color-disabledText;
						cursor: not-allowed;
					}

					&--range:not(.DayPicker-Day--outside):not(.DayPicker-Day--selected) {
						background-color: @color-primaryLight;
					}

					&--from:not(.DayPicker-Day--outside) {
						@escaped-background-svg: escape('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none"><path d="M 0 0 H 12 L 16 8 L 12 16 H 0" fill="@{color-primary}" /></svg>');

						color: @color-white;
						background-image: url('data:image/svg+xml;utf8,@{escaped-background-svg}');
						background-size: 100% 100%;
					}

					&--to:not(.DayPicker-Day--outside) {
						@escaped-background-svg: escape('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none"><path d="M 16 16 H 4 L 0 8 L 4 0 H 16" fill="@{color-primary}" /></svg>');

						color: @color-white;
						background-image: url('data:image/svg+xml;utf8,@{escaped-background-svg}');
						background-size: 100% 100%;
					}
				}
			}
		}
	}
}