beyond-datetime/styles/calendar.less

react date time

.bdt-calendar{
	box-sizing: border-box;
	width: 280px;
	padding: 10px 8px;
	background: #ffffff;
	border-radius: 2px;
	color: #000000;
	border: 1px solid rgba(0, 0, 0, 0.15);
	font-size:13px;
	box-shadow: 0 0px 4px rgba(0,0,0,.2);
	.bdt-select{
		border: none;
	}
	& &-month-and-year{
		// text-align: center;
		box-sizing: border-box;
		font-size: 12px;
		padding: 10px 0;
		height: 38px;
		line-height: 18px;
		
		select{
			vertical-align: top;
			margin: 0px 5px;
			outline: none;
			box-sizing: border-box;
			height: 20px;
			padding: 0 1px;
			font-size: inherit;
			color: inherit;
		}
	}
	& &-month-and-year-months,& &-month-and-year-years{
		width : 50%;
		display : inline-block;
		// padding : 0 3px;
	}
	& &-month-and-year-years select{
		font-size: 14px;
	}
	& &-month-and-year-months{
		text-align:right;
		select{
			width: 60px;
		}
	}
	& &-month-and-year-button{
		vertical-align: top;
		box-sizing: border-box;
		height: 18px;
		width: 18px;
		padding: 0;
		margin: 0;
		border: none;
		background: #efefef;
		box-shadow:0 1px 1px rgba(0,0,0,.2);
		outline: none;
		border-radius: 50%;
		cursor: pointer;
		position: relative;
	}
	& &-month-and-year-button:after{
		content: "";
		display   : block;
		width     : 0;
		height    : 0;
		padding   : 0;
		margin    : 0;
		border    : 4px solid transparent;
		position: absolute;
		top: 0;
		bottom: 0;
		margin-top: auto;
		margin-bottom: auto;
	}
	& &-month-and-year-button&-month-and-year-prev-button:after{
		border-right-width : 6px;
		border-right-color : #000;
		margin-left       : 1px;
	}
	& &-month-and-year-button&-month-and-year-next-button:after{
		border-left-width  : 6px;
		border-left-color  : #000;
		margin-left      : 7px;
	}

	& &-weekdays>span{
		box-sizing     : border-box;
		display       : inline-block;
		letter-spacing : initial;
		text-align     : center;
		font-weight    : bold;
		margin-bottom  : 1px;
		width :  37px;
		line-height : 34px;
	}
	& &-day{
		position: relative;
		// box-sizing     : border-box;
		display       : inline-block;
		// letter-spacing : initial;
		text-align     : center;
		cursor        : pointer;
		transition    : transform .1s ease;
		width: 37px;
		line-height: 32px;
		&:hover{
			background : #ebebeb;
		}
		&:active{
			background    : #95a5a6;
			color         : #ffffff;
			transform     : scale(0.9);
		}
	}
	& &-day&-day-passive{
		opacity       : 0.6;
	}
	& &-day&-day-invalid{
		opacity       : 0.4;
		cursor        : not-allowed;
	}
	& &-day&-day-invalid:hover,& &-day&-day-invalid:active{
			background    : inherit;
			color         : inherit;
			transform     : none;
	}

	& &-day&-day-today:after{
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-width: 5px;
		border-style: solid;
		border-color: transparent  orangered  orangered transparent;
		right: 5px;
		bottom: 5px;
	}
	& &-day&-day-inrange{
		background : #EBF4FD;
		color      : #222;
		// opacity: 1;
	}
	& &-day&-day-selected{
		background : #2283D0;
		color      : #ffffff;
	}
}