From: Matthias Schmidt <gravatronics@live.com>
Date: Wed, 13 Jan 2016 18:16:12 +0000 (+0100)
Subject: Change datePicker less file to scss file
X-Git-Tag: 3.0.0_Beta_1~2030^2~157^2~1
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8882fff9662954f4ad0c9ebd59dcc7207a2a9641;p=GitHub%2FWoltLab%2FWCF.git

Change datePicker less file to scss file
---

diff --git a/wcfsetup/install/files/style/datePicker.less b/wcfsetup/install/files/style/datePicker.less
deleted file mode 100644
index 3e631708d2..0000000000
--- a/wcfsetup/install/files/style/datePicker.less
+++ /dev/null
@@ -1,136 +0,0 @@
-.inputAddon > .inputDatePicker {
-	background-color: @wcfInputBackgroundColor !important;
-	cursor: pointer;
-	flex: 0 1 150px;
-	min-width: 150px;
-}
-
-.datePicker {
-	background-color: @wcfDropdownBackgroundColor;
-	border: 1px solid @wcfDropdownBorderColor;
-	border-radius: 3px;
-	color: @wcfDropdownColor;
-	opacity: 0;
-	position: absolute;
-	transition: visibility .3s linear .3s, opacity .3s linear;
-	visibility: hidden;
-	width: 240px;
-	z-index: 450;
-	
-	.boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-	
-	&.active {
-		opacity: 1;
-		transition-delay: 0s;
-		visibility: visible;
-	}
-	
-	&.datePickerTime > footer {
-		display: block;
-	}
-	
-	> .elementPointer {
-		border-color: @wcfDropdownBorderColor transparent;
-		border-style: solid;
-		border-width: 0 8px 8px;
-		
-		> span {
-			border-color: @wcfDropdownBackgroundColor 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 @wcfDropdownBorderColor;
-		
-		// hide borders
-		margin: 0 -1px -1px 0;
-		
-		> li {
-			display: flex;
-			
-			> a,
-			> span {
-				border: 1px solid @wcfDropdownBorderColor;
-				border-width: 0 1px 1px 0;
-				display: block;
-				flex: 1;
-				padding: @wcfGapTiny 0;
-				text-align: center;
-			}
-			
-			> a {
-				background-color: @wcfContainerAccentBackgroundColor;
-				color: @wcfColor;
-				
-				&:hover {
-					text-decoration: none;
-				}
-				
-				&.active,
-				&:not(.otherMonth):hover {
-					background-color: @wcfContainerHoverBackgroundColor;
-				}
-				
-				&.otherMonth {
-					background-color: @wcfContainerBackgroundColor;
-					color: @wcfDimmedColor;
-					cursor: default;
-				}
-			}
-			
-			> span {
-				background-color: @wcfTabularBoxBackgroundColor;
-				border-right-color: @wcfTabularBoxBackgroundColor;
-				color: @wcfTabularBoxColor;
-				font-size: .85rem;
-				text-transform: uppercase;
-				
-				.textShadow(@wcfTabularBoxBackgroundColor);
-			}
-		}
-	}
-	
-	> footer {
-		display: none;
-	}
-	
-}
diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
new file mode 100644
index 0000000000..237b29c38f
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -0,0 +1,137 @@
+// 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;
+	}
+}