ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 06:38:17 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Time Controller Markup and Styling

Browse Source 
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;
This commit is contained in:
Charles Hacskaylo
2015-09-24 18:36:56 -07:00
parent 67f627b51f
commit b3da6edd0c
8 changed files with 253 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/general/res/sass/_global.scss
View File

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

54
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -352,7 +352,10 @@ label.checkbox.custom {
/******************************************************** DATETIME PICKER */ /******************************************************** DATETIME PICKER */
.l-datetime-picker { .l-datetime-picker {
$r1H: 15px; $r1H: 15px;
@include user-select(none);
font-size: 0.8rem;
padding: $interiorMarginLg !important; padding: $interiorMarginLg !important;
width: 230px;
.l-month-year-pager { .l-month-year-pager {
$pagerW: 20px; $pagerW: 20px;
//@include test(); //@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 */ /******************************************************** BROWSER ELEMENTS */
@include desktop { @include desktop {

22
platform/commonUI/general/res/templates/controls/datetime-picker.html
View File

@ -28,7 +28,20 @@
<a class="pager next" ng-click="changeMonth(1)"></a> <a class="pager next" ng-click="changeMonth(1)"></a>
</div> </div>
<div class="l-calendar"> <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> <tr>
<th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']"> <th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">
{{day}} {{day}}
@ -38,15 +51,12 @@
<td style="text-align: center;" <td style="text-align: center;"
ng-repeat="cell in row" ng-repeat="cell in row"
ng-click="select(cell)" ng-click="select(cell)"
ng-class='{ ng-class='{ disabled: !isSelectable(cell), selected: isSelected(cell) }'>
disabled: !isSelectable(cell),
test: isSelected(cell)
}'>
<div>{{cell.day}}</div> <div>{{cell.day}}</div>
<div style="font-size: 80%">{{cell.dayOfYear}}</div> <div style="font-size: 80%">{{cell.dayOfYear}}</div>
</td> </td>
</tr> </tr>
</table> </table>-->
</div> </div>
</div> </div>
<div class="l-time-selects" <div class="l-time-selects"

6
platform/commonUI/general/src/controllers/DateTimePickerController.js
View File

@ -138,9 +138,9 @@ define(
$scope.ngModel[$scope.field] = m.valueOf(); $scope.ngModel[$scope.field] = m.valueOf();
} }
$scope.isSelectable = function (cell) { $scope.isInCurrentMonth = function (cell) {
return cell.month === month; return cell.month === month;
}; }
$scope.isSelected = function (cell) { $scope.isSelected = function (cell) {
var date = $scope.date || {}; var date = $scope.date || {};

91
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -1904,38 +1904,105 @@ label.checkbox.custom {
/******************************************************** DATETIME PICKER */ /******************************************************** DATETIME PICKER */
/* line 353, ../../../../general/res/sass/controls/_controls.scss */ /* line 353, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker { .l-datetime-picker {
padding: 10px !important; } -moz-user-select: -moz-none;
/* line 356, ../../../../general/res/sass/controls/_controls.scss */ -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 { .l-datetime-picker .l-month-year-pager {
font-size: 0.8rem; font-size: 0.8rem;
height: 15px; height: 15px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative; } 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 { .l-datetime-picker .l-month-year-pager .pager {
width: 20px; } 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 { .l-datetime-picker .l-month-year-pager .pager.prev {
right: auto; } 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 { .l-datetime-picker .l-month-year-pager .pager.prev:before {
content: "\3c"; } 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 { .l-datetime-picker .l-month-year-pager .pager.next {
left: auto; left: auto;
text-align: right; } 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 { .l-datetime-picker .l-month-year-pager .pager.next:before {
content: "\3e"; } 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 { .l-datetime-picker .l-month-year-pager .val {
text-align: center; text-align: center;
left: 25px; left: 25px;
right: 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 */ /******************************************************** 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) { @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 { ::-webkit-scrollbar {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -1950,7 +2017,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 405, ../../../../general/res/sass/controls/_controls.scss */ /* line 459, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -1964,7 +2031,7 @@ label.checkbox.custom {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
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 { ::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -1973,7 +2040,7 @@ label.checkbox.custom {
background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px); background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
background-image: 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 { ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); } } background: rgba(0, 0, 0, 0.4); } }
/***************************************************************************** /*****************************************************************************

9
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -7,6 +7,8 @@ $colorKey: #0099cc;
$colorKeySelectedBg: #005177; $colorKeySelectedBg: #005177;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorInteriorBorder: rgba($colorBodyFg, 0.1); $colorInteriorBorder: rgba($colorBodyFg, 0.1);
$colorA: #ccc;
$colorAHov: #fff;
$contrastRatioPercent: 7%; $contrastRatioPercent: 7%;
$basicCr: 2px; $basicCr: 2px;
$controlCr: 3px; $controlCr: 3px;
@ -148,5 +150,12 @@ $colorGrippyInteriorHover: $colorKey;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 5%); $colorMobilePaneLeft: darken($colorBodyBg, 5%);
// Datetime Picker
$colorCalCellHovBg: $colorKey;
$colorCalCellHovFg: $colorKeyFg;
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
// About Screen // About Screen
$colorAboutLink: #84b3ff; $colorAboutLink: #84b3ff;

95
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -320,12 +320,12 @@ a.disabled {
/************************** HTML ENTITIES */ /************************** HTML ENTITIES */
/* line 42, ../../../../general/res/sass/_global.scss */ /* line 42, ../../../../general/res/sass/_global.scss */
a { a {
color: #ccc; color: #999;
cursor: pointer; cursor: pointer;
text-decoration: none; } text-decoration: none; }
/* line 46, ../../../../general/res/sass/_global.scss */ /* line 46, ../../../../general/res/sass/_global.scss */
a:hover { a:hover {
color: #fff; } color: #0099cc; }
/* line 51, ../../../../general/res/sass/_global.scss */ /* line 51, ../../../../general/res/sass/_global.scss */
body, html { body, html {
@ -1874,38 +1874,105 @@ label.checkbox.custom {
/******************************************************** DATETIME PICKER */ /******************************************************** DATETIME PICKER */
/* line 353, ../../../../general/res/sass/controls/_controls.scss */ /* line 353, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker { .l-datetime-picker {
padding: 10px !important; } -moz-user-select: -moz-none;
/* line 356, ../../../../general/res/sass/controls/_controls.scss */ -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 { .l-datetime-picker .l-month-year-pager {
font-size: 0.8rem; font-size: 0.8rem;
height: 15px; height: 15px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative; } 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 { .l-datetime-picker .l-month-year-pager .pager {
width: 20px; } 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 { .l-datetime-picker .l-month-year-pager .pager.prev {
right: auto; } 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 { .l-datetime-picker .l-month-year-pager .pager.prev:before {
content: "\3c"; } 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 { .l-datetime-picker .l-month-year-pager .pager.next {
left: auto; left: auto;
text-align: right; } 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 { .l-datetime-picker .l-month-year-pager .pager.next:before {
content: "\3e"; } 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 { .l-datetime-picker .l-month-year-pager .val {
text-align: center; text-align: center;
left: 25px; left: 25px;
right: 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 */ /******************************************************** 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) { @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 { ::-webkit-scrollbar {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -1920,7 +1987,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 405, ../../../../general/res/sass/controls/_controls.scss */ /* line 459, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -1934,7 +2001,7 @@ label.checkbox.custom {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
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 { ::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -1943,7 +2010,7 @@ label.checkbox.custom {
background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px); background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
background-image: 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 { ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.1); } } background: rgba(0, 0, 0, 0.1); } }
/***************************************************************************** /*****************************************************************************

9
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -7,6 +7,8 @@ $colorKey: #0099cc;
$colorKeySelectedBg: $colorKey; $colorKeySelectedBg: $colorKey;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999;
$colorAHov: $colorKey;
$contrastRatioPercent: 40%; $contrastRatioPercent: 40%;
$basicCr: 4px; $basicCr: 4px;
$controlCr: $basicCr; $controlCr: $basicCr;
@ -146,5 +148,12 @@ $colorGrippyInteriorHover: $colorBodyBg;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%); $colorMobilePaneLeft: darken($colorBodyBg, 2%);
// Datetime Picker, Calendar
$colorCalCellHovBg: $colorKey;
$colorCalCellHovFg: $colorKeyFg;
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
// About Screen // About Screen
$colorAboutLink: #84b3ff; $colorAboutLink: #84b3ff;