Improved visuals for .selectDropdown

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / datePicker.scss

// TODO: overhaul file

.inputAddon > .inputDatePicker {
	// TODO: background-color: @wcfInputBackgroundColor !important;
	cursor: pointer;
	flex: 0 1 150px;
	min-width: 150px;
}

.datePicker {
	background-color: $wcfDropdownBackground;
	border: 1px solid $wcfDropdownBorder;
	border-radius: 3px;
	color: $wcfDropdownText;
	opacity: 0;
	position: absolute;
	transition: visibility .3s linear .3s, opacity .3s linear;
	visibility: hidden;
	width: 240px;
	z-index: 450;
	
	@include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
	
	&.active {
		opacity: 1;
		transition-delay: 0s;
		visibility: visible;
	}
	
	&.datePickerTime > footer {
		display: block;
	}
	
	> .elementPointer {
		border-color: $wcfDropdownBorder transparent;
		border-style: solid;
		border-width: 0 8px 8px;
		
		> span {
			border-color: $wcfDropdownBackground transparent;
			border-style: solid;
			border-width: 0 6px 6px;
			left: -6px;
			position: absolute;
			top: 2px;
		}
		
		&.flipVertical {
			border-width: 8px 8px 0;
			
			> span {
				border-width: 6px 6px 0;
			}
		}
	}
	
	> header,
	> footer {
		padding: $wcfGapSmall;
		position: relative;
		text-align: center;
	}
	
	> header > a {
		display: none;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		
		&.active {
			display: block;
		}
		
		&.previous {
			left: $wcfGapSmall;
		}
		
		&.next {
			right: $wcfGapSmall;
		}
	}
	
	> ul {
		border-top: 1px solid $wcfDropdownBorder;
		
		// hide borders
		margin: 0 -1px -1px 0;
		
		> li {
			display: flex;
			
			> a,
			> span {
				border: 1px solid $wcfDropdownBorder;
				border-width: 0 1px 1px 0;
				display: block;
				flex: 1;
				padding: $wcfGapTiny 0;
				text-align: center;
			}
			
			> a {
				// TODO: background-color: @wcfContainerAccentBackgroundColor;
				// TODO: color: @wcfColor;
				
				&:hover {
					text-decoration: none;
				}
				
				&.active,
				&:not(.otherMonth):hover {
					// TODO: 	background-color: @wcfContainerHoverBackgroundColor;
				}
				
				&.otherMonth {
					// TODO: 	background-color: @wcfContainerBackgroundColor;
					// TODO: color: @wcfDimmedColor;
					cursor: default;
				}
			}
			
			> span {
				// TODO: background-color: @wcfTabularBoxBackgroundColor;
				// TODO: border-right-color: @wcfTabularBoxBackgroundColor;
				// TODO: color: @wcfTabularBoxColor;
				font-size: .85rem;
				text-transform: uppercase;
				
				// TODO: .textShadow(@wcfTabularBoxBackgroundColor);
			}
		}
	}
	
	> footer {
		display: none;
	}
}