nest-parrot/src/less/n-date.less

Parrot built on react

div.n-datetime {
	position: relative;
	> div.input-group > span.input-group-addon {
		padding: 0;
		&.link {
			cursor: @link-cursor;
		}
		&.disabled,
		&.link.disabled {
			cursor: @disabled-cursor;
			color: @disabled-color;
		}
	}

	&.popover.top,
	&.popover.bottom {
		margin-top: 2px;
		position: absolute;
		z-index: 10000;
		.arrow {
			margin-left: -8px;
			border-width: 8px;
			left: 20px;
		}
		&.date-only,
		&.time-only {
			max-width: 290px;
		}
		&.date-and-time {
			max-width: 580px;
		}
	}
	&.popover.top {
		.arrow {
			bottom: -8px;
			border-bottom-width: 0;
		}
	}
	&.popover.bottom {
		.arrow {
			top: -8px;
			border-top-width: 0;
		}
	}
	&.popover.top.right-to-left,
	&.popover.bottom.right-to-left {
		.arrow {
			left: auto;
			right: 20px;
			margin-right: -8px;
		}
	}
	&.popover.top > div.popover-content,
	&.popover.bottom > div.popover-content {
		padding: 0;
		overflow: hidden;
		// height: 270px;
		// max-height: 300px;
		margin-left: -1px;
		margin-right: -1px;
		.date-view,
		.time-view {
			// display: inline;
			position: relative;
			min-width: 290px;
			max-width: 290px;
			padding: 5px;
			// height: 100%;
			display: flex;
			flex-direction: column;
		}
		.date-view {
		}
		.time-view {
		}
		.cell-7-1 {
			width: 99.99999999% / 7;
		}
		.cell-4-1 {
			width: 25%;
		}
		.cell-3-1 {
			width: 100% / 3;
		}
		.cell-3-1,
		.cell-4-1,
		.cell-7-1 {
			float: left;
			text-align: center;
			position: relative;
			display: table;
			span {
				display: table-cell;
				vertical-align: middle;
			}
		}
		.calendar-header {
			height: 30px;
			text-align: center;
			font-weight: bold;
			position: relative;
			.header-btn {
				font-size: 1.3em;
				margin-top: 2px;
				font-weight: bold;
				cursor: pointer;
				position: relative;
				&.left {
					float: left;
				}
				&.right {
					float: right;
				}
			}
			.header-date-btn {
				cursor: pointer;
				position: relative;
			}
		}
		.calendar-body {
			position: relative;
			display: flex;
			flex-grow: 1;
			flex-direction: column;
			.day-view-body-header {
				position: relative;
				margin-left: 0;
				margin-right: 0;
				div {
					padding-top: 3px;
					padding-bottom: 4px;
					font-weight: bold;
				}
			}
			.day-view-body-body {
				position: relative;
				padding-bottom: 3px;
				margin-left: 0;
				margin-right: 0;
				div {
					padding-top: 3px;
					padding-bottom: 4px;
					&.gap-day {
						color: lighten(@font-color, 30%);
					}
					&.disable-day {
						color: lighten(@font-color, 30%);
					}
				}
			}
			.month-view-body-body {
				position: relative;
				margin-left: 0;
				margin-right: 0;
				div {
					padding-top: 20px;
					padding-bottom: 20px;
				}
			}
			.year-view-body-body {
				position: relative;
				margin-left: 0;
				margin-right: 0;
				div {
					padding-top: 7px;
					padding-bottom: 7px;
				}
			}
			.day-view-body-body,
			.month-view-body-body,
			.year-view-body-body {
				// flex-grow: 1;
				// display: flex;
				// flex-wrap: wrap;
				div {
					border-radius: 4px;
					cursor: pointer;
					position: relative;
					&.today:before {
						content: ' ';
						position: absolute;
						bottom: 3px;
						right: 3px;
						display: block;
						height: 8px;
						width: 8px;
						border-bottom: 4px solid @color-primary;
						border-right: 4px solid @color-primary;
						border-top: 4px solid transparent;
						border-left: 4px solid transparent;
					}
					&.current-value,
					&.current-value:hover {
						background-color: @color-primary;
						color: @font-color-reverse;
					}
					&.current-value.today:before {
						border-bottom: 4px solid @font-color-reverse;
						border-right: 4px solid @font-color-reverse;
					}
					&:hover {
						background-color: @border-color;
					}
				}
			}
			.time-view-body-body {
				text-align: center;
				padding-top: 5px;
				flex-grow: 1;
				display: flex;
				justify-content: space-around;
				svg.clock {
					overflow: overlay;
					z-index: 2;
					text.text {
						fill: lighten(@font-color, 20%);
						font-family: 'Engravers MT', Roboto, 'Helvetica Neue', Helvetica, Arial;
						font-weight: bold;
						&.minute {
							font-size: 1em;
						}
						&.hour-12,
						&.hour-24 {
							font-size: 0.7em;
						}
						&.am {
							text-anchor: start;
							font-size: 1em;
							cursor: pointer;
						}
						&.pm {
							text-anchor: end;
							font-size: 1em;
							cursor: pointer;
						}
						&.am.yes,
						&.pm.yes {
							fill: @color-primary;
						}
						&.top-num {
							text-anchor: middle;
							dominant-baseline: hanging;
						}
						&.left-num {
							dominant-baseline: central;
							text-anchor: start;
						}
						&.right-num {
							dominant-baseline: central;
							text-anchor: end;
						}
						&.bottom-num {
							text-anchor: middle;
							dominant-baseline: ideographic;
						}
					}
					line.big {
						stroke-width: 3px;
						stroke: lighten(@font-color, 20%);
					}
					line.small {
						stroke-width: 1px;
						stroke: lighten(@font-color, 20%);
					}
					line.hour-hand {
						stroke-width: 5px;
						stroke: lighten(@font-color, 20%);
					}
					line.minute-hand {
						stroke-width: 3px;
						stroke: lighten(@font-color, 20%);
					}
					line.second-hand {
						stroke-width: 1px;
						stroke: @color-primary;
					}
				}
			}
		}
		.calendar-footer {
			position: relative;
			float: left;
			width: 100%;
			margin-left: 0;
			margin-right: 0;
			padding-bottom: 5px;
			div {
				padding-top: 4px;
				padding-bottom: 4px;
				border-radius: 4px;
				cursor: pointer;
				position: relative;
				> span {
					font-size: 1.3em;
				}
				&:hover {
					background-color: @border-color;
				}
			}
		}
	}
	&.mobile-phone.popover.top,
	&.mobile-phone.popover.bottom {
		width: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.541176);
		margin-top: 0;
		padding: 15px;
		max-width: none;
		> div.arrow {
			display: none;
		}
		> div.popover-content {
			background-color: @container-background-color;
			box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
			padding: 0;
			padding-bottom: 33px;
			position: fixed;
			margin-left: 0;
			margin-right: 0;
			// max-height: none;
			height: initial;
			width: ~'-webkit-calc(100% - 30px)';
			width: ~'-moz-calc(100% - 30px)';
			width: ~'calc(100% - 30px)';
			.date-view,
			.time-view {
				min-width: 100%;
				padding: 0;
			}
			.calendar-header {
				line-height: 33px;
				height: 33px;
				.header-btn {
					line-height: 33px;
					font-size: 1.5em;
					margin-top: -1px;
				}
				.header-date-btn {
					font-size: 1.3em;
				}
				span:not(.header-btn):not(.header-date-btn) {
					font-size: 1.3em;
					min-width: 15px;
					display: inline-block;
				}
				span:first-child {
					margin-left: 5px;
				}
				span:nth-last-child(2) {
					margin-right: 5px;
				}
			}
			.calendar-body {
				display: block;
				font-size: 1.3em;
				.day-view-body-body,
				.month-view-body-body,
				.year-view-body-body {
					// flex-grow: 1;
					// display: flex;
					// flex-wrap: wrap;
					div {
						border-radius: 0;
						&.current-value:hover {
							background-color: @color-primary;
							color: @font-color-reverse;
						}
						&:hover {
							background-color: inherit;
						}
					}
				}
				.time-view-body-body {
					padding-bottom: 15px;
				}
			}
			> .calendar-footer {
				height: 33px;
				line-height: 33px;
				position: absolute;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    z-index: 2;
			    background-color: @container-background-color;
			    margin-left: 0;
			    margin-right: 0;
			    border-top: 1px solid #e3f2fd;
				> div {
					padding: 0;
				    border-radius: 0;
				    cursor: default;
				    position: initial;
					> a {
						float: right;
						color: @color-primary;
						font-size: 1.3em;
						padding-left: 16px;
						padding-right: 16px;
					}
				}
			}
		}
		&.fix-bottom {
			background: transparent;
			> div.popover-content {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				box-shadow: none;
				width: 100%;
				padding-bottom: 0;
    			padding-top: 40px;
    			background-color: #d9d9d9;
    			// > .time-view {
    			// 	> .calendar-body {
    			// 		> .time-view-body-body {
    			// 			padding-bottom: 10px;
    			// 		}
    			// 	}
    			// }
				> .calendar-footer {
					position: absolute;
					height: 40px;
					line-height: 40px;
					top: 0;
					left: 0;
					right: 0;
					border-top: 1px solid #c8c9cc;
					border-bottom: 1px solid #d9d9d9;
					background-color: #f0f1f2;
					> div {
						border-top: 0;
					}
				}
			}
		}
	}
}