[Frontend] Time Controller Markup and Styling

open #1515 open #117 Significant new vals added to constants files for datetime picker/calendar; Styling for calendar, hover and selected states; Modded DateTimePickerController.js and markup to allow selection of out-of-month cells;
2025-01-20 03:36:44 +00:00 · 2015-09-24 18:36:56 -07:00 · 2015-09-24 18:36:56 -07:00 · b3da6edd0c
commit b3da6edd0c
parent 67f627b51f
8 changed files with 253 additions and 37 deletions
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@ -40,11 +40,11 @@

 /************************** HTML ENTITIES */
 a {
-	color: #ccc;
+	color: $colorA;
 	cursor: pointer;
 	text-decoration: none;
 	&:hover {
-		color: #fff;
+		color: $colorAHov;
 	}
 }

--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@ -352,7 +352,10 @@ label.checkbox.custom {
 /******************************************************** DATETIME PICKER */
 .l-datetime-picker {
 	$r1H: 15px;
+	@include user-select(none);
+	font-size: 0.8rem;
 	padding: $interiorMarginLg !important;
+	width: 230px;
 	.l-month-year-pager {
 		$pagerW: 20px;
 		//@include test();
@ -390,6 +393,57 @@ label.checkbox.custom {
 	}
 }

+/******************************************************** CALENDAR */
+.l-calendar {
+	$colorMuted: pushBack($colorMenuFg, 30%);
+	ul.l-cal-row {
+		@include display-flex;
+		@include flex-flow(row nowrap);
+		margin-top: 1px;
+		&:first-child {
+			margin-top: 0;
+		}
+		li {
+			@include flex(1 0);
+			//@include test();
+			margin-left: 1px;
+			padding: $interiorMargin;
+			text-align: center;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+		&.l-header li {
+			color: $colorMuted;
+		}
+		&.l-body li {
+			@include trans-prop-nice(background-color, .25s);
+			cursor: pointer;
+			&.in-month {
+				background-color: $colorCalCellInMonthBg;
+			}
+			.sub {
+				color: $colorMuted;
+				font-size: 0.8em;
+			}
+			&.selected {
+				background: $colorCalCellSelectedBg;
+				color: $colorCalCellSelectedFg;
+				.sub {
+					color: inherit;
+				}
+			}
+			&:hover {
+				background-color: $colorCalCellHovBg;
+				color: $colorCalCellHovFg;
+				.sub {
+					color: inherit;
+				}
+			}
+		}
+	}
+}
+
 /******************************************************** BROWSER ELEMENTS */

@include desktop {
--- a/platform/commonUI/general/res/templates/controls/datetime-picker.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-picker.html
@ -28,7 +28,20 @@
 			<a class="pager next" ng-click="changeMonth(1)"></a>
 		</div>
 		<div class="l-calendar">
-			<table>
+			<ul class="l-cal-row l-header">
+				<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
+			</ul>
+			<ul class="l-cal-row l-body" ng-repeat="row in table">
+				<li ng-repeat="cell in row"
+					ng-click="select(cell)"
+					ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
+					<div class="prime">{{cell.day}}</div>
+					<div class="sub">{{cell.dayOfYear}}</div>
+				</li>
+			</ul>
+
+
+			<!--<table>
 				<tr>
 					<th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">
 						{{day}}
@ -38,15 +51,12 @@
 					<td style="text-align: center;"
 					    ng-repeat="cell in row"
 					    ng-click="select(cell)"
-					    ng-class='{
-	                                  disabled: !isSelectable(cell),
-	                                  test: isSelected(cell)
-	                                  }'>
+					    ng-class='{ disabled: !isSelectable(cell), selected: isSelected(cell) }'>
 						<div>{{cell.day}}</div>
 						<div style="font-size: 80%">{{cell.dayOfYear}}</div>
 					</td>
 				</tr>
-			</table>
+			</table>-->
 		</div>
 	</div>
 	<div class="l-time-selects"
--- a/platform/commonUI/general/src/controllers/DateTimePickerController.js
+++ b/platform/commonUI/general/src/controllers/DateTimePickerController.js
@ -138,9 +138,9 @@ define(
                $scope.ngModel[$scope.field] = m.valueOf();
            }

-            $scope.isSelectable = function (cell) {
-                return cell.month === month;
-            };
+            $scope.isInCurrentMonth = function (cell) {
+			  	return cell.month === month;
+			}

            $scope.isSelected = function (cell) {
                var date = $scope.date || {};
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@ -1904,38 +1904,105 @@ label.checkbox.custom {
 /******************************************************** DATETIME PICKER */
 /* line 353, ../../../../general/res/sass/controls/_controls.scss */
 .l-datetime-picker {
-  padding: 10px !important; }
-  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 0.8rem;
+  padding: 10px !important;
+  width: 230px; }
+  /* line 359, ../../../../general/res/sass/controls/_controls.scss */
  .l-datetime-picker .l-month-year-pager {
    font-size: 0.8rem;
    height: 15px;
    margin-bottom: 5px;
    position: relative; }
-    /* line 368, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 371, ../../../../general/res/sass/controls/_controls.scss */
    .l-datetime-picker .l-month-year-pager .pager {
      width: 20px; }
-      /* line 371, ../../../../general/res/sass/controls/_controls.scss */
+      /* line 374, ../../../../general/res/sass/controls/_controls.scss */
      .l-datetime-picker .l-month-year-pager .pager.prev {
        right: auto; }
-        /* line 373, ../../../../general/res/sass/controls/_controls.scss */
+        /* line 376, ../../../../general/res/sass/controls/_controls.scss */
        .l-datetime-picker .l-month-year-pager .pager.prev:before {
          content: "\3c"; }
-      /* line 377, ../../../../general/res/sass/controls/_controls.scss */
+      /* line 380, ../../../../general/res/sass/controls/_controls.scss */
      .l-datetime-picker .l-month-year-pager .pager.next {
        left: auto;
        text-align: right; }
-        /* line 380, ../../../../general/res/sass/controls/_controls.scss */
+        /* line 383, ../../../../general/res/sass/controls/_controls.scss */
        .l-datetime-picker .l-month-year-pager .pager.next:before {
          content: "\3e"; }
-    /* line 385, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 388, ../../../../general/res/sass/controls/_controls.scss */
    .l-datetime-picker .l-month-year-pager .val {
      text-align: center;
      left: 25px;
      right: 25px; }

+/******************************************************** CALENDAR */
+/* line 399, ../../../../general/res/sass/controls/_controls.scss */
+.l-calendar ul.l-cal-row {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  margin-top: 1px; }
+  /* line 403, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row:first-child {
+    margin-top: 0; }
+  /* line 406, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row li {
+    -webkit-flex: 1 0;
+    flex: 1 0;
+    margin-left: 1px;
+    padding: 5px;
+    text-align: center; }
+    /* line 412, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row li:first-child {
+      margin-left: 0; }
+  /* line 416, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-header li {
+    color: #b3b3b3; }
+  /* line 419, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-body li {
+    -moz-transition-property: background-color;
+    -o-transition-property: background-color;
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    cursor: pointer; }
+    /* line 422, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.in-month {
+      background-color: #616161; }
+    /* line 425, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li .sub {
+      color: #b3b3b3;
+      font-size: 0.8em; }
+    /* line 429, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.selected {
+      background: #006080;
+      color: #cccccc; }
+      /* line 432, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li.selected .sub {
+        color: inherit; }
+    /* line 436, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li:hover {
+      background-color: #0099cc;
+      color: #fff; }
+      /* line 439, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li:hover .sub {
+        color: inherit; }
+
 /******************************************************** BROWSER ELEMENTS */
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 396, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 450, ../../../../general/res/sass/controls/_controls.scss */
  ::-webkit-scrollbar {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
@ -1950,7 +2017,7 @@ label.checkbox.custom {
    height: 10px;
    width: 10px; }

-  /* line 405, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 459, ../../../../general/res/sass/controls/_controls.scss */
  ::-webkit-scrollbar-thumb {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
@ -1964,7 +2031,7 @@ label.checkbox.custom {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
-    /* line 414, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 468, ../../../../general/res/sass/controls/_controls.scss */
    ::-webkit-scrollbar-thumb:hover {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
@ -1973,7 +2040,7 @@ label.checkbox.custom {
      background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
      background-image: linear-gradient(#5e5e5e, #525252 20px); }

-  /* line 419, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 473, ../../../../general/res/sass/controls/_controls.scss */
  ::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@ -7,6 +7,8 @@ $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
+$colorA: #ccc;
+$colorAHov: #fff;
 $contrastRatioPercent: 7%;
 $basicCr: 2px;
 $controlCr: 3px;
@ -148,5 +150,12 @@ $colorGrippyInteriorHover: $colorKey;
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 5%);

+// Datetime Picker
+$colorCalCellHovBg: $colorKey;
+$colorCalCellHovFg: $colorKeyFg;
+$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
+$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
+$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
+
 // About Screen
 $colorAboutLink: #84b3ff;
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@ -320,12 +320,12 @@ a.disabled {
 /************************** HTML ENTITIES */
 /* line 42, ../../../../general/res/sass/_global.scss */
 a {
-  color: #ccc;
+  color: #999;
  cursor: pointer;
  text-decoration: none; }
  /* line 46, ../../../../general/res/sass/_global.scss */
  a:hover {
-    color: #fff; }
+    color: #0099cc; }

 /* line 51, ../../../../general/res/sass/_global.scss */
 body, html {
@ -1874,38 +1874,105 @@ label.checkbox.custom {
 /******************************************************** DATETIME PICKER */
 /* line 353, ../../../../general/res/sass/controls/_controls.scss */
 .l-datetime-picker {
-  padding: 10px !important; }
-  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 0.8rem;
+  padding: 10px !important;
+  width: 230px; }
+  /* line 359, ../../../../general/res/sass/controls/_controls.scss */
  .l-datetime-picker .l-month-year-pager {
    font-size: 0.8rem;
    height: 15px;
    margin-bottom: 5px;
    position: relative; }
-    /* line 368, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 371, ../../../../general/res/sass/controls/_controls.scss */
    .l-datetime-picker .l-month-year-pager .pager {
      width: 20px; }
-      /* line 371, ../../../../general/res/sass/controls/_controls.scss */
+      /* line 374, ../../../../general/res/sass/controls/_controls.scss */
      .l-datetime-picker .l-month-year-pager .pager.prev {
        right: auto; }
-        /* line 373, ../../../../general/res/sass/controls/_controls.scss */
+        /* line 376, ../../../../general/res/sass/controls/_controls.scss */
        .l-datetime-picker .l-month-year-pager .pager.prev:before {
          content: "\3c"; }
-      /* line 377, ../../../../general/res/sass/controls/_controls.scss */
+      /* line 380, ../../../../general/res/sass/controls/_controls.scss */
      .l-datetime-picker .l-month-year-pager .pager.next {
        left: auto;
        text-align: right; }
-        /* line 380, ../../../../general/res/sass/controls/_controls.scss */
+        /* line 383, ../../../../general/res/sass/controls/_controls.scss */
        .l-datetime-picker .l-month-year-pager .pager.next:before {
          content: "\3e"; }
-    /* line 385, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 388, ../../../../general/res/sass/controls/_controls.scss */
    .l-datetime-picker .l-month-year-pager .val {
      text-align: center;
      left: 25px;
      right: 25px; }

+/******************************************************** CALENDAR */
+/* line 399, ../../../../general/res/sass/controls/_controls.scss */
+.l-calendar ul.l-cal-row {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  margin-top: 1px; }
+  /* line 403, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row:first-child {
+    margin-top: 0; }
+  /* line 406, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row li {
+    -webkit-flex: 1 0;
+    flex: 1 0;
+    margin-left: 1px;
+    padding: 5px;
+    text-align: center; }
+    /* line 412, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row li:first-child {
+      margin-left: 0; }
+  /* line 416, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-header li {
+    color: #999999; }
+  /* line 419, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-body li {
+    -moz-transition-property: background-color;
+    -o-transition-property: background-color;
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    cursor: pointer; }
+    /* line 422, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.in-month {
+      background-color: #f2f2f2; }
+    /* line 425, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li .sub {
+      color: #999999;
+      font-size: 0.8em; }
+    /* line 429, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.selected {
+      background: #1ac6ff;
+      color: #fcfcfc; }
+      /* line 432, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li.selected .sub {
+        color: inherit; }
+    /* line 436, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li:hover {
+      background-color: #0099cc;
+      color: #fff; }
+      /* line 439, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li:hover .sub {
+        color: inherit; }
+
 /******************************************************** BROWSER ELEMENTS */
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 396, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 450, ../../../../general/res/sass/controls/_controls.scss */
  ::-webkit-scrollbar {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
@ -1920,7 +1987,7 @@ label.checkbox.custom {
    height: 10px;
    width: 10px; }

-  /* line 405, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 459, ../../../../general/res/sass/controls/_controls.scss */
  ::-webkit-scrollbar-thumb {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
@ -1934,7 +2001,7 @@ label.checkbox.custom {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
-    /* line 414, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 468, ../../../../general/res/sass/controls/_controls.scss */
    ::-webkit-scrollbar-thumb:hover {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
@ -1943,7 +2010,7 @@ label.checkbox.custom {
      background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
      background-image: linear-gradient(#00ace6, #0099cc 20px); }

-  /* line 419, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 473, ../../../../general/res/sass/controls/_controls.scss */
  ::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.1); } }
 /*****************************************************************************
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@ -7,6 +7,8 @@ $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorA: #999;
+$colorAHov: $colorKey;
 $contrastRatioPercent: 40%;
 $basicCr: 4px;
 $controlCr: $basicCr;
@ -146,5 +148,12 @@ $colorGrippyInteriorHover: $colorBodyBg;
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 2%);

+// Datetime Picker, Calendar
+$colorCalCellHovBg: $colorKey;
+$colorCalCellHovFg: $colorKeyFg;
+$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
+$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
+$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
+
 // About Screen
 $colorAboutLink: #84b3ff;