X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.widgets.datetime%2FDateTimeInputWidget.less;h=510eb2153306b4603945a39073947ac6a8d786ab;hb=7583ead42626fba866096f6ffef6594df0321065;hp=84788d2a2fbf8815a2ae8b47300c3c9c975a1ef8;hpb=3801cd022f89f460729e1dbee6f28c98246a19cf;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
index 84788d2a2f..510eb21533 100644
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
@@ -1,8 +1,12 @@
-@import "mediawiki.widgets.datetime.definitions";
+/* stylelint-disable no-duplicate-selectors */
+@import 'mediawiki.widgets.datetime.definitions';
 
 .mw-widgets-datetime-dateTimeInputWidget {
 	display: inline-block;
 	position: relative;
+	width: 100%;
+	max-width: @max-width-input;
+	.oo-ui-inline-spacing( 0.5em );
 	vertical-align: middle;
 
 	&-fields {
@@ -12,144 +16,151 @@
 		.oo-ui-unselectable();
 
 		> .mw-widgets-datetime-dateTimeInputWidget-field {
-			.oo-ui-box-sizing(border-box);
-
+			.oo-ui-box-sizing( border-box );
 			display: table-cell;
 			white-space: pre;
 		}
 	}
 
 	&-handle {
-		width: 100%;
+		background-color: @background-color-base;
+		color: @color-base;
 		display: inline-block;
-		overflow: hidden;
-
-		// Needed for proper behavior with overflow: hidden.
+		.oo-ui-box-sizing( border-box );
+		width: 100%;
+		height: @size-base;
+		border: @border-base;
+		border-radius: @border-radius-base;
+		padding: 0 @padding-horizontal-input-text;
+		box-shadow: inset 0 0 0 0 @color-progressive;
+		// Needed for proper behavior with `overflow: hidden`.
 		vertical-align: bottom;
-
+		overflow: hidden;
 		.oo-ui-unselectable();
-		.oo-ui-box-sizing(border-box);
+		.oo-ui-transition( box-shadow @transition-base );
 
-		> .oo-ui-indicatorElement-indicator,
-		> .oo-ui-iconElement-icon {
-			position: absolute;
+		> .oo-ui-iconElement-icon,
+		> .oo-ui-indicatorElement-indicator {
 			background-position: center center;
 			background-repeat: no-repeat;
+			position: absolute;
+			top: 0;
 			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;
-		border: solid 1px #ccc;
-		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;
+			left: @padding-start-input-text-icon;
+			width: @size-icon;
+			height: @size-icon;
 		}
 
 		> .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;
+			right: @padding-horizontal-base;
+			min-width: @min-size-indicator;
+			width: @size-indicator;
+			min-height: @min-size-indicator;
+			height: @size-indicator;
+			max-height: @size-base;
 		}
 	}
 
 	&-empty &-handle {
-		color: #777;
+		color: @color-base--subtle;
+	}
+
+	&.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+		padding-left: @padding-start-input-text-icon-label;
+	}
+
+	&.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+		padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
 	}
 
 	&-field {
-		padding: 0;
-		margin: 0;
-		font-size: inherit;
-		font-family: inherit;
 		background-color: transparent;
 		color: inherit;
-		border: none;
+		.oo-ui-box-sizing( border-box );
+		border: 0;
+		border-radius: @border-radius-base;
+		// Provide more top padding due to border not being part of the calculation
+		padding-top: 10 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+		padding-bottom: @padding-bottom-base;
 		box-shadow: none;
+		font-size: inherit;
+		font-family: inherit;
+		line-height: @line-height-widget-singleline;
 		text-align: center;
-		vertical-align: middle;
-		.oo-ui-box-sizing(border-box);
+		vertical-align: top;
 	}
 
-	&.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;
+	&-editField {
+		.mw-widgets-datetime-dateTimeInputWidget-invalid {
+			border: 1px solid @border-color-erroneous;
+			box-shadow: @box-shadow-widget;
+
+			&:focus {
+				border: 1px solid @border-color-erroneous;
+				box-shadow: @box-shadow-erroneous--focus;
 			}
 		}
 	}
 
+	&-clearButton {
+		padding-top: 0;
+	}
+
 	&.oo-ui-widget-enabled {
-		.mw-widgets-datetime-dateTimeInputWidget-editField:hover {
-			background-color: #eee;
-		}
+		.mw-widgets-datetime-dateTimeInputWidget-handle {
+			.oo-ui-transition( border-color @transition-medium );
 
-		&.oo-ui-flaggedElement-invalid {
-			.mw-widgets-datetime-dateTimeInputWidget-handle {
-				border-color: #f00;
-				box-shadow: inset 0 0 0 0 #f00;
+			&:hover {
+				border-color: @border-color-input--hover;
 			}
+		}
 
-			.mw-widgets-datetime-dateTimeInputWidget-handle:focus {
-				border-color: #f00;
-				box-shadow: inset 0 0 0 0.1em #f00;
+		// Set on widget parent to also enable `:hover` on child elmeents
+		&:hover {
+			input,
+			textarea {
+				border-color: @border-color-input--hover;
 			}
 		}
-	}
 
-	input.mw-widgets-datetime-dateTimeInputWidget-field {
-		padding: 0.5em 0;
-	}
+		.mw-widgets-datetime-dateTimeInputWidget-editField:hover {
+			background-color: @background-color-base--hover;
+		}
+
+		.mw-widgets-datetime-dateTimeInputWidget-editField:focus {
+			outline: 0;
+			box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
+		}
 
-	&-editField.mw-widgets-datetime-dateTimeInputWidget-invalid {
-		border: 1px solid #f00;
-		box-shadow: inset 0 0 0 0 #f00;
+		&.oo-ui-flaggedElement-invalid {
+			.mw-widgets-datetime-dateTimeInputWidget-handle {
+				border-color: @border-color-erroneous;
+				box-shadow: @box-shadow-widget;
 
-		&:focus {
-			border: 1px solid #f00;
-			box-shadow: inset 0 0 0 0.1em #f00;
+				&:focus {
+					border-color: @border-color-erroneous;
+					box-shadow: @box-shadow-erroneous--focus;
+				}
+			}
 		}
 	}
 
-	&.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
-		padding-left: 3em;
-	}
+	&.oo-ui-widget-disabled {
+		.mw-widgets-datetime-dateTimeInputWidget-handle {
+			background-color: @background-color-base--disabled;
+			// Support: Safari
+			-webkit-text-fill-color: @color-base--disabled;
+			color: @color-base--disabled;
+			border-color: @border-color-base--disabled;
+			text-shadow: @text-shadow-base--disabled;
+		}
 
-	&.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
-		padding-right: 2em;
+		> .oo-ui-iconElement-icon,
+		> .oo-ui-indicatorElement-indicator {
+			opacity: @opacity-base--disabled;
+		}
 	}
 }