refactor: move styles from controls.less

- use datepicker.scss

frappe/public/less/controls.less

@@ -1,132 +0,0 @@
-@import "variables.less";
-@import "mixins.less";
-@import "datepicker.less";
-
-// .frappe-control .control-value {
-// 	overflow-wrap: break-word;
-// }
-
-// .frappe-control[data-fieldtype="Data"] .control-input {
-// 	position: relative;
-// }
-
-// .link-btn {
-// 	position: absolute;
-// 	top: 4px;
-// 	right: 4px;
-// 	padding: 3px;
-// 	display: none;
-// 	z-index: 3;
-// }
-
-// .phone-btn {
-// 	position: absolute;
-// 	top: 4px;
-// 	right: 8px;
-// 	padding: 3px;
-// }
-
-// .markdown-preview, .html-preview {
-// 	padding: 12px 15px;
-// 	min-height: 300px;
-// 	max-height: 600px;
-// 	overflow: auto;
-// }
-
-// .markdown-toggle, .html-toggle {
-// 	margin-bottom: 5px;
-// }
-
-// .tb-selected-value {
-// 	display: inline-block;
-// 	margin-right: 5px;
-// 	margin-bottom: 5px;
-// }
-
-// .barcode-scanner {
-// 	position: relative;
-
-// 	& > canvas, & > video {
-// 		max-width: 100%;
-// 		width: 100%;
-// 	}
-
-// 	canvas.drawing, canvas.drawingBuffer {
-// 		position: absolute;
-// 		left: 0;
-// 		top: 0;
-// 	}
-// }
-
-// /* duration control */
-
-// .duration-picker {
-// 	position: absolute;
-// 	z-index: 999;
-
-// 	border-radius: 4px;
-// 	box-shadow: 0 4px 12px rgba(0,0,0,.15);
-// 	background: #fff;
-// 	border: 1px solid @border-color;
-// 	padding-top: 10px;
-// 	padding-left: 5px;
-
-// 	&:after,
-// 	&:before {
-// 		border: solid transparent;
-// 		content: " ";
-// 		height: 0;
-// 		width: 0;
-// 		pointer-events: none;
-// 		position: absolute;
-// 		bottom: 100%;
-// 		left: 30px;
-// 	}
-// 	&:after {
-// 		border-color: rgba(255, 255, 255, 0);
-// 		border-bottom-color: #fff;
-// 		border-width: 8px;
-// 		margin-left: -8px;
-// 	}
-// 	&:before {
-// 		border-color: rgba(221, 221, 221, 0);
-// 		border-bottom-color: @border-color;
-// 		border-width: 9px;
-// 		margin-left: -9px;
-// 	}
-
-// 	.row .col {
-// 		// for fixing layout in child table
-// 		padding-left: 0px !important;
-// 		padding-right: 0px !important;
-// 	}
-
-// 	.duration-row {
-// 		margin: 7px;
-// 		display: flex;
-// 	}
-
-// 	.duration-col {
-// 		margin-left: 2px;
-// 	}
-
-// 	.duration-input {
-// 		width: 60px;
-// 		border: 1px solid rgba(0, 0, 0, 0.25) !important;
-// 	}
-
-// 	.duration-input:focus {
-// 		outline: None;
-// 	}
-
-// 	.duration-label {
-// 		justify-content: center;
-// 	}
-
-// 	.picker-row {
-// 		display: flex;
-// 		margin-left: 5px;
-// 		margin-bottom: 3px;
-// 		margin-right: 12px;
-// 	}
-// }

frappe/public/scss/desk/controls.scss

@@ -1,5 +1,6 @@
 @import "grid";
 @import "color_picker";
+@import "datepicker";
 
 /* table multiselect */
 .table-multiselect {

frappe/public/scss/desk/datepicker.scss

@@ -0,0 +1,63 @@
+@import "variables.scss";
+@import "~air-datepicker/dist/css/datepicker.min.css";
+
+.datepicker {
+
+	font-family: inherit;
+	z-index: 9999 !important;
+
+	&--time-current-hours, &--time-current-minutes, &--time-current-seconds {
+		font-family: inherit;
+	}
+
+	&--day-name {
+		color: var(--text-color);
+	}
+
+	&--cell {
+		&.-current- {
+			color: var(--brand-color);
+
+			&.-in-range- {
+				color: var(--brand-color);
+			}
+		}
+
+		&.-range-from-, &.-range-to- {
+			border: 1px solid fade(#0089FF, 30%);
+			background: fade(#0089FF, 10%);
+		}
+
+		&.-selected-, &.-current-.-selected- {
+			background: #0089FF;
+		}
+
+		&.-in-range- {
+			background: fade(#0089FF, 5%);
+		}
+
+		&.-in-range-.-focus- {
+			background: fade(#0089FF, 10%);
+		}
+
+		&.-selected-.-focus- {
+			background: fade(#0089FF, 90%);
+		}
+
+	}
+
+	&--time-row {
+		background-image: linear-gradient(to right, #0089FF, #0089FF);
+		background-repeat: no-repeat;
+		background-size: 100% 1px;
+		background-position: left 50%;
+	}
+
+	&--time-row:first-child {
+		margin: 0;
+	}
+}
+
+.datepicker--button {
+	color: var(--brand-color);
+}