1 files changed, 155 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/www/wiki/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
new file mode 100644
index 00000000..f205da3b
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
@@ -0,0 +1,155 @@
+/* stylelint-disable no-duplicate-selectors */
+@import 'mediawiki.widgets.datetime.definitions';
+
+.mw-widgets-datetime-dateTimeInputWidget {
+	display: inline-block;
+	position: relative;
+	vertical-align: middle;
+
+	&-fields {
+		position: relative;
+		display: table;
+		z-index: 2;
+		.oo-ui-unselectable();
+
+		> .mw-widgets-datetime-dateTimeInputWidget-field {
+			.oo-ui-box-sizing(border-box);
+
+			display: table-cell;
+			white-space: pre;
+		}
+	}
+
+	&-handle {
+		width: 100%;
+		display: inline-block;
+		overflow: hidden;
+
+		// Needed for proper behavior with overflow: hidden.
+		vertical-align: bottom;
+
+		.oo-ui-unselectable();
+		.oo-ui-box-sizing(border-box);
+
+		> .oo-ui-indicatorElement-indicator,
+		> .oo-ui-iconElement-icon {
+			position: absolute;
+			background-position: center center;
+			background-repeat: no-repeat;
+			z-index: 1;
+		}
+	}
+
+	margin: 0.25em 0;
+	width: 100%;
+	max-width: 50em;
+
+	.oo-ui-inline-spacing(0.5em);
+
+	&-handle {
+		height: 2.5em;
+		border: 1px solid #ccc;
+		padding: 0 1em;
+		margin: 0;
+		background-color: #fff;
+		color: #000;
+		box-shadow: inset 0 0 0 0 @progressive;
+		border-radius: 0.1em;
+		.oo-ui-transition(box-shadow @quick-ease);
+		.oo-ui-box-sizing(border-box);
+
+		> .oo-ui-indicatorElement-indicator {
+			right: 0;
+		}
+
+		> .oo-ui-iconElement-icon {
+			left: 0.25em;
+		}
+
+		> .oo-ui-indicatorElement-indicator {
+			top: 0;
+			width: @indicator-size;
+			height: @indicator-size;
+			margin: 0.775em;
+		}
+
+		> .oo-ui-iconElement-icon {
+			top: 0;
+			width: @icon-size;
+			height: @icon-size;
+			margin: 0.3em;
+		}
+	}
+
+	&-empty &-handle {
+		color: #777;
+	}
+
+	&-field {
+		padding: 0;
+		margin: 0;
+		font-size: inherit;
+		font-family: inherit;
+		background-color: transparent;
+		color: inherit;
+		border: 0;
+		box-shadow: none;
+		text-align: center;
+		vertical-align: middle;
+		.oo-ui-box-sizing(border-box);
+	}
+
+	&.oo-ui-widget-disabled {
+		.mw-widgets-datetime-dateTimeInputWidget-handle {
+			color: #ccc;
+			text-shadow: 0 1px 1px #fff;
+			border-color: #ddd;
+			background-color: #f3f3f3;
+
+			> .oo-ui-iconElement-icon,
+			> .oo-ui-indicatorElement-indicator {
+				opacity: 0.2;
+			}
+		}
+	}
+
+	&.oo-ui-widget-enabled {
+		.mw-widgets-datetime-dateTimeInputWidget-editField:hover {
+			background-color: #eee;
+		}
+
+		&.oo-ui-flaggedElement-invalid {
+			.mw-widgets-datetime-dateTimeInputWidget-handle {
+				border-color: #f00;
+				box-shadow: inset 0 0 0 0 #f00;
+			}
+
+			.mw-widgets-datetime-dateTimeInputWidget-handle:focus {
+				border-color: #f00;
+				box-shadow: inset 0 0 0 0.1em #f00;
+			}
+		}
+	}
+
+	input.mw-widgets-datetime-dateTimeInputWidget-field {
+		padding: 0.5em 0;
+	}
+
+	&-editField.mw-widgets-datetime-dateTimeInputWidget-invalid {
+		border: 1px solid #f00;
+		box-shadow: inset 0 0 0 0 #f00;
+
+		&:focus {
+			border: 1px solid #f00;
+			box-shadow: inset 0 0 0 0.1em #f00;
+		}
+	}
+
+	&.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+		padding-left: 3em;
+	}
+
+	&.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+		padding-right: 2em;
+	}
+}