alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Time Controller Markup and Styling

Browse Source 
open #1515
open #117
Significant mods to slider scss;
Added toi-line element and hover styles;
This commit is contained in:
Charles Hacskaylo
2015-09-25 18:12:36 -07:00
parent e33485ec59
commit badaca53d3
7 changed files with 658 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -295,15 +295,11 @@ label.checkbox.custom {
.slider { .slider {
$knobH: 100%; //14px; $knobH: 100%; //14px;
$knobW: 12px;
$slotH: 50%;
.slot { .slot {
// @include border-radius($basicCr * .75); // @include border-radius($basicCr * .75);
//@include sliderTrack(); //@include sliderTrack();
//height: $slotH;
width: auto; width: auto;
position: absolute; position: absolute;
//top: ($knobH - $slotH) / 2;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@@ -317,30 +313,30 @@ label.checkbox.custom {
&:hover { &:hover {
background-color: $sliderColorKnobHov; background-color: $sliderColorKnobHov;
} }
cursor: ew-resize;
position: absolute; position: absolute;
height: $knobH; height: $knobH;
width: $knobW; width: $sliderKnobW;
top: 0; top: 0;
auto: 0; auto: 0;
bottom: auto; bottom: auto;
left: auto; left: auto;
//&:before { }
// top: 1px; .knob-l {
// bottom: 3px; @include border-left-radius($sliderKnobW);
// left: ($knobW / 2) - 1; cursor: w-resize;
//} }
.knob-r {
@include border-right-radius($sliderKnobW);
cursor: e-resize;
} }
.range { .range {
$tbOffset: 2px;
@include trans-prop-nice-fade(.25s); @include trans-prop-nice-fade(.25s);
background-color: $sliderColorRange; background-color: $sliderColorRange;
cursor: ew-resize; cursor: ew-resize;
position: absolute; position: absolute;
top: 0; //$tbOffset; top: 0; //$tbOffset;
right: auto; right: auto;
bottom: $tbOffset; bottom: 0;
left: auto; left: auto;
height: auto; height: auto;
width: auto; width: auto;

69
platform/commonUI/general/res/sass/controls/_time-controller.scss
View File

@@ -1,14 +1,21 @@
@mixin toiLineHovEffects() {
//@include pulse(.25s);
&:before,
&:after {
background-color: $timeControllerToiLineColorHov;
}
}
.l-time-controller { .l-time-controller {
$minW: 400px; $minW: 400px;
$knobM: ($sliderKnobW + 1) * -1; $knobHOffset: 0px;
$rangeValOffset: $interiorMargin + $sliderKnobW; $knobM: ($sliderKnobW + $knobHOffset) * -1;
$knobCr: $sliderKnobW; $rangeValPad: $interiorMargin;
//@if $sliderKnobW > 3 { $rangeValOffset: $sliderKnobW;
// $knobCr: $sliderKnobW / 2; //$knobCr: $sliderKnobW;
//} $timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
$timeRangeSliderLROffset: 130px + $sliderKnobW;
$r1H: 33px; $r1H: 33px;
$r2H: 20px; $r2H: $sliderH;
$r3H: 20px; $r3H: 20px;
.l-time-range-inputs-holder, .l-time-range-inputs-holder,
@@ -67,6 +74,42 @@
@include box-shadow(none); @include box-shadow(none);
background: none; background: none;
border: none; border: none;
.range {
.toi-line {
$myC: $timeControllerToiLineColor;
$myW: 8px;
@include transform(translateX(50%));
position: absolute;
//@include test();
top: 0; right: 0; bottom: 0px; left: auto;
width: $myW;
height: auto;
z-index: 2;
&:before,
&:after {
background-color: $myC;
content: "";
position: absolute;
}
&:before {
// Vert line
top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
width: 2px;
//top: 0; right: 3px; bottom: 0; left: 3px;
}
&:after {
// Circle element
@include border-radius($myW);
@include transform(translateY(-50%));
top: 50%; right: 0; bottom: auto; left: 0;
width: auto;
height: $myW;
}
}
&:hover .toi-line {
@include toiLineHovEffects;
}
}
} }
} }
@@ -99,10 +142,11 @@
} }
.knob { .knob {
width: $sliderKnobW; z-index: 2;
.range-value { .range-value {
//@include test($sliderColorRange); //@include test($sliderColorRange);
@include trans-prop-nice-fade(.25s); @include trans-prop-nice-fade(.25s);
padding: 0 $rangeValOffset;
position: absolute; position: absolute;
height: $r2H; height: $r2H;
line-height: $r2H; line-height: $r2H;
@@ -112,7 +156,7 @@
color: $sliderColorKnobHov; color: $sliderColorKnobHov;
} }
&.knob-l { &.knob-l {
@include border-bottom-left-radius($knobCr); //@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
margin-left: $knobM; margin-left: $knobM;
.range-value { .range-value {
text-align: right; text-align: right;
@@ -120,11 +164,14 @@
} }
} }
&.knob-r { &.knob-r {
@include border-bottom-right-radius($knobCr); //@include border-bottom-right-radius($knobCr);
margin-right: $knobM; margin-right: $knobM;
.range-value { .range-value {
left: $rangeValOffset; left: $rangeValOffset;
} }
&:hover + .range-holder .range .toi-line {
@include toiLineHovEffects;
}
} }
} }
} }

17
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@@ -48,7 +48,7 @@
<span class="val">{{endOuterText}}</span> <span class="val">{{endOuterText}}</span>
<a class="ui-symbol icon icon-calendar"></a> <a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t2.isActive()"> <mct-popup ng-if="t2.isActive()">
<div mct-click-elsewhere="t2.setState(false)" class="xmenu-holder go-up"> <div mct-click-elsewhere="t2.setState(false)">
<mct-control key="'datetime-picker'" <mct-control key="'datetime-picker'"
ng-model="ngModel.outer" ng-model="ngModel.outer"
field="'end'" field="'end'"
@@ -64,13 +64,6 @@
<div class="l-time-range-slider"> <div class="l-time-range-slider">
<div class="slider" <div class="slider"
mct-resize="spanWidth = bounds.width"> mct-resize="spanWidth = bounds.width">
<div class="slot range-holder">
<div class="range"
mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}">
</div>
</div>
<div class="knob knob-l" <div class="knob knob-l"
mct-drag-down="startLeftDrag()" mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])" mct-drag="leftDrag(delta[0])"
@@ -83,6 +76,14 @@
ng-style="{ right: endInnerPct }"> ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div> <div class="range-value">{{endInnerText}}</div>
</div> </div>
<div class="slot range-holder">
<div class="range"
mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}">
<div class="toi-line"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1321,7 +1321,7 @@ mct-container {
-o-transition: background, 0.25s; -o-transition: background, 0.25s;
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
/* line 272, ../../../../general/res/sass/_mixins.scss */ /* line 272, ../../../../general/res/sass/_mixins.scss */
.s-btn.major .icon, .major.s-menu-btn .icon { .s-btn.major .icon, .major.s-menu-btn .icon {
color: #fff; } color: #fff; }
@@ -1360,7 +1360,7 @@ mct-container {
-o-transition: background, 0.25s; -o-transition: background, 0.25s;
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
/* line 272, ../../../../general/res/sass/_mixins.scss */ /* line 272, ../../../../general/res/sass/_mixins.scss */
.s-btn:not(.major) .icon, .s-menu-btn:not(.major) .icon { .s-btn:not(.major) .icon, .s-menu-btn:not(.major) .icon {
color: #0099cc; } color: #0099cc; }
@@ -1402,7 +1402,7 @@ mct-container {
-o-transition: background, 0.25s; -o-transition: background, 0.25s;
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
/* line 272, ../../../../general/res/sass/_mixins.scss */ /* line 272, ../../../../general/res/sass/_mixins.scss */
.s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon { .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon {
color: #fff; } color: #fff; }
@@ -1840,7 +1840,7 @@ label.checkbox.custom {
opacity: 1; } } opacity: 1; } }
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
/* line 300, ../../../../general/res/sass/controls/_controls.scss */ /* line 298, ../../../../general/res/sass/controls/_controls.scss */
.slider .slot { .slider .slot {
width: auto; width: auto;
position: absolute; position: absolute;
@@ -1848,7 +1848,7 @@ label.checkbox.custom {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 312, ../../../../general/res/sass/controls/_controls.scss */ /* line 308, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob { .slider .knob {
-moz-transition-property: visibility, opacity, background-color, border-color; -moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color;
@@ -1862,19 +1862,36 @@ label.checkbox.custom {
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
background-color: rgba(0, 153, 204, 0.3); background-color: rgba(0, 153, 204, 0.6);
cursor: ew-resize;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 12px; width: 10px;
top: 0; top: 0;
auto: 0; auto: 0;
bottom: auto; bottom: auto;
left: auto; } left: auto; }
/* line 317, ../../../../general/res/sass/controls/_controls.scss */ /* line 313, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob:hover { .slider .knob:hover {
background-color: #0099cc; } background-color: #0099cc; }
/* line 335, ../../../../general/res/sass/controls/_controls.scss */ /* line 324, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob-l {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: w-resize; }
/* line 328, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob-r {
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
cursor: e-resize; }
/* line 332, ../../../../general/res/sass/controls/_controls.scss */
.slider .range { .slider .range {
-moz-transition-property: visibility, opacity, background-color, border-color; -moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color;
@@ -1897,12 +1914,12 @@ label.checkbox.custom {
left: auto; left: auto;
height: auto; height: auto;
width: auto; } width: auto; }
/* line 346, ../../../../general/res/sass/controls/_controls.scss */ /* line 343, ../../../../general/res/sass/controls/_controls.scss */
.slider .range:hover { .slider .range:hover {
background-color: rgba(0, 153, 204, 0.5); } background-color: rgba(0, 153, 204, 0.5); }
/******************************************************** DATETIME PICKER */ /******************************************************** DATETIME PICKER */
/* line 353, ../../../../general/res/sass/controls/_controls.scss */ /* line 350, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker { .l-datetime-picker {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
@@ -1911,59 +1928,66 @@ label.checkbox.custom {
font-size: 0.8rem; font-size: 0.8rem;
padding: 10px !important; padding: 10px !important;
width: 230px; } width: 230px; }
/* line 359, ../../../../general/res/sass/controls/_controls.scss */ /* line 356, ../../../../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 371, ../../../../general/res/sass/controls/_controls.scss */ /* line 368, ../../../../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 374, ../../../../general/res/sass/controls/_controls.scss */ /* line 371, ../../../../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 376, ../../../../general/res/sass/controls/_controls.scss */ /* line 373, ../../../../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 380, ../../../../general/res/sass/controls/_controls.scss */ /* line 377, ../../../../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 383, ../../../../general/res/sass/controls/_controls.scss */ /* line 380, ../../../../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 388, ../../../../general/res/sass/controls/_controls.scss */ /* line 385, ../../../../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; }
/* line 391, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker .l-calendar,
.l-datetime-picker .l-time-selects {
border-top: 1px solid rgba(153, 153, 153, 0.1); }
/* line 395, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker .l-time-selects {
line-height: 22px; }
/******************************************************** CALENDAR */ /******************************************************** CALENDAR */
/* line 399, ../../../../general/res/sass/controls/_controls.scss */ /* line 403, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row { .l-calendar ul.l-cal-row {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-flow: row nowrap; -webkit-flex-flow: row nowrap;
flex-flow: row nowrap; flex-flow: row nowrap;
margin-top: 1px; } margin-top: 1px; }
/* line 403, ../../../../general/res/sass/controls/_controls.scss */ /* line 407, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row:first-child { .l-calendar ul.l-cal-row:first-child {
margin-top: 0; } margin-top: 0; }
/* line 406, ../../../../general/res/sass/controls/_controls.scss */ /* line 410, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row li { .l-calendar ul.l-cal-row li {
-webkit-flex: 1 0; -webkit-flex: 1 0;
flex: 1 0; flex: 1 0;
margin-left: 1px; margin-left: 1px;
padding: 5px; padding: 5px;
text-align: center; } text-align: center; }
/* line 412, ../../../../general/res/sass/controls/_controls.scss */ /* line 416, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row li:first-child { .l-calendar ul.l-cal-row li:first-child {
margin-left: 0; } margin-left: 0; }
/* line 416, ../../../../general/res/sass/controls/_controls.scss */ /* line 420, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-header li { .l-calendar ul.l-cal-row.l-header li {
color: #b3b3b3; } color: #b3b3b3; }
/* line 419, ../../../../general/res/sass/controls/_controls.scss */ /* line 423, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li { .l-calendar ul.l-cal-row.l-body li {
-moz-transition-property: background-color; -moz-transition-property: background-color;
-o-transition-property: background-color; -o-transition-property: background-color;
@@ -1978,31 +2002,31 @@ label.checkbox.custom {
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
cursor: pointer; } cursor: pointer; }
/* line 422, ../../../../general/res/sass/controls/_controls.scss */ /* line 426, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li.in-month { .l-calendar ul.l-cal-row.l-body li.in-month {
background-color: #616161; } background-color: #616161; }
/* line 425, ../../../../general/res/sass/controls/_controls.scss */ /* line 429, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li .sub { .l-calendar ul.l-cal-row.l-body li .sub {
color: #b3b3b3; color: #b3b3b3;
font-size: 0.8em; } font-size: 0.8em; }
/* line 429, ../../../../general/res/sass/controls/_controls.scss */ /* line 433, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li.selected { .l-calendar ul.l-cal-row.l-body li.selected {
background: #006080; background: #006080;
color: #cccccc; } color: #cccccc; }
/* line 432, ../../../../general/res/sass/controls/_controls.scss */ /* line 436, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li.selected .sub { .l-calendar ul.l-cal-row.l-body li.selected .sub {
color: inherit; } color: inherit; }
/* line 436, ../../../../general/res/sass/controls/_controls.scss */ /* line 440, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li:hover { .l-calendar ul.l-cal-row.l-body li:hover {
background-color: #0099cc; background-color: #0099cc;
color: #fff; } color: #fff; }
/* line 439, ../../../../general/res/sass/controls/_controls.scss */ /* line 443, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li:hover .sub { .l-calendar ul.l-cal-row.l-body li:hover .sub {
color: inherit; } 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 450, ../../../../general/res/sass/controls/_controls.scss */ /* line 454, ../../../../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;
@@ -2017,7 +2041,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 459, ../../../../general/res/sass/controls/_controls.scss */ /* line 463, ../../../../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%;
@@ -2031,7 +2055,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 468, ../../../../general/res/sass/controls/_controls.scss */ /* line 472, ../../../../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%;
@@ -2040,7 +2064,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 473, ../../../../general/res/sass/controls/_controls.scss */ /* line 477, ../../../../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); } }
/***************************************************************************** /*****************************************************************************
@@ -2346,130 +2370,194 @@ label.checkbox.custom {
right: 0; right: 0;
width: auto; } width: auto; }
/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 21, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller { .l-time-controller .l-time-range-inputs-holder,
min-width: 400px; } .l-time-controller .l-time-range-slider {
/* line 9, ../../../../general/res/sass/controls/_time-controller.scss */ font-size: 0.8em; }
.l-time-controller .l-time-range-inputs-holder, /* line 26, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider { .l-time-controller .l-time-range-inputs-holder,
font-size: 0.8em; } .l-time-controller .l-time-range-slider-holder,
/* line 14, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder {
.l-time-controller .l-time-range-inputs-holder, overflow: visible;
.l-time-controller .l-time-range-slider-holder, position: absolute;
.l-time-controller .l-time-range-ticks-holder { top: 0;
overflow: visible; right: 0;
position: absolute; bottom: 0;
top: 0; left: 0;
right: 0; width: auto;
bottom: 0; height: auto;
left: 0; -moz-box-sizing: border-box;
width: auto; -webkit-box-sizing: border-box;
height: auto; box-sizing: border-box;
-moz-box-sizing: border-box; min-width: 400px;
-webkit-box-sizing: border-box; top: auto; }
box-sizing: border-box; /* line 36, ../../../../general/res/sass/controls/_time-controller.scss */
top: auto; } .l-time-controller .l-time-range-slider,
/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks {
.l-time-controller .l-time-range-slider, overflow: visible;
.l-time-controller .l-time-range-ticks { position: absolute;
overflow: visible; top: 0;
position: absolute; right: 0;
top: 0; bottom: 0;
right: 0; left: 0;
bottom: 0; width: auto;
left: 0; height: auto; }
width: auto; /* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
height: auto; } .l-time-controller .l-time-range-inputs-holder {
/* line 29, ../../../../general/res/sass/controls/_time-controller.scss */ height: 33px;
.l-time-controller .l-time-range-inputs-holder { bottom: 46px;
height: 33px; padding-top: 5px;
bottom: 46px; border-top: 1px solid rgba(153, 153, 153, 0.1); }
padding-top: 5px; /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */
border-top: 1px solid rgba(153, 153, 153, 0.1); } .l-time-controller .l-time-range-inputs-holder .type-icon {
/* line 34, ../../../../general/res/sass/controls/_time-controller.scss */ font-size: 120%;
.l-time-controller .l-time-range-inputs-holder .type-icon { vertical-align: middle; }
font-size: 120%;
vertical-align: middle; }
/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder .l-time-range-input,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
margin-right: 5px; }
/* line 41, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
color: #666666; }
/* line 44, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
.l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
font-size: 11px;
width: 11px; }
/* line 51, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider, .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
.l-time-controller .l-time-range-ticks { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
left: 125px; margin-right: 5px; }
right: 125px; } /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
/* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
.l-time-controller .l-time-range-slider-holder { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
height: 20px; color: #666666; }
bottom: 23px; } /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
/* line 60, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
.l-time-controller .l-time-range-slider-holder .range-holder { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
-moz-box-shadow: none; .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
-webkit-box-shadow: none; .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
box-shadow: none; font-size: 11px;
background: none; width: 11px; }
border: none; } /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider,
.l-time-controller .l-time-range-ticks-holder { .l-time-controller .l-time-range-ticks {
height: 20px; } left: 150px;
/* line 69, ../../../../general/res/sass/controls/_time-controller.scss */ right: 150px; }
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
border-top: 1px solid rgba(255, 255, 255, 0.2); } .l-time-controller .l-time-range-slider-holder {
/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */ height: 20px;
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { bottom: 23px; }
background-color: rgba(255, 255, 255, 0.2); /* line 73, ../../../../general/res/sass/controls/_time-controller.scss */
border: none; .l-time-controller .l-time-range-slider-holder .range-holder {
height: 5px; -moz-box-shadow: none;
width: 1px; -webkit-box-shadow: none;
margin-left: -1px; box-shadow: none;
position: absolute; } background: none;
/* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ border: none; }
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
margin-left: 0; } .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
/* line 81, ../../../../general/res/sass/controls/_time-controller.scss */ -moz-transform: translateX(50%);
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { -ms-transform: translateX(50%);
transform: translateX(-50%); -webkit-transform: translateX(50%);
-webkit-transform: translateX(-50%); transform: translateX(50%);
color: #666666;
display: inline-block;
font-size: 0.7em;
position: absolute;
top: 8px;
white-space: nowrap;
z-index: 2; }
/* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob {
width: 5px; }
/* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob .range-value {
position: absolute; position: absolute;
height: 20px; top: 0;
line-height: 20px; right: 0;
white-space: nowrap; } bottom: 0px;
/* line 103, ../../../../general/res/sass/controls/_time-controller.scss */ left: auto;
.l-time-controller .knob:hover .range-value { width: 8px;
color: #0099cc; } height: auto;
/* line 108, ../../../../general/res/sass/controls/_time-controller.scss */ z-index: 2; }
/* line 88, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
background-color: #00c2ff;
content: "";
position: absolute; }
/* line 94, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
top: 0;
right: auto;
bottom: -10px;
left: 3px;
width: 2px; }
/* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: 8px; }
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
background-color: #fff; }
/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder {
height: 20px; }
/* line 118, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
border-top: 1px solid rgba(255, 255, 255, 0.2); }
/* line 120, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
background-color: rgba(255, 255, 255, 0.2);
border: none;
height: 5px;
width: 1px;
margin-left: -1px;
position: absolute; }
/* line 127, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
margin-left: 0; }
/* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
color: #666666;
display: inline-block;
font-size: 0.7em;
position: absolute;
top: 8px;
white-space: nowrap;
z-index: 2; }
/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob {
z-index: 2; }
/* line 146, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob .range-value {
-moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color;
-webkit-transition-property: visibility, opacity, background-color, border-color;
transition-property: visibility, opacity, background-color, border-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;
padding: 0 10px;
position: absolute;
height: 20px;
line-height: 20px;
white-space: nowrap; }
/* line 155, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob:hover .range-value {
color: #0099cc; }
/* line 158, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-l {
margin-left: -10px; }
/* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-l .range-value { .l-time-controller .knob.knob-l .range-value {
text-align: right; text-align: right;
right: 10px; } right: 10px; }
/* line 115, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-r {
margin-right: -10px; }
/* line 169, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-r .range-value { .l-time-controller .knob.knob-r .range-value {
left: 10px; } left: 10px; }
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
background-color: #fff; }
/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 183, ../../../../general/res/sass/controls/_time-controller.scss */
.s-time-range-val { .s-time-range-val {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@@ -2769,11 +2857,12 @@ textarea {
-o-transition: background, 0.25s; -o-transition: background, 0.25s;
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
margin: 0 0 2px 2px; margin: 0 0 2px 0;
padding: 0 5px; padding: 0 5px;
overflow: hidden; overflow: hidden;
position: relative; } position: relative;
line-height: 22px; }
/* line 272, ../../../../general/res/sass/_mixins.scss */ /* line 272, ../../../../general/res/sass/_mixins.scss */
.select .icon { .select .icon {
color: #0099cc; } color: #0099cc; }
@@ -2784,7 +2873,7 @@ textarea {
/* line 279, ../../../../general/res/sass/_mixins.scss */ /* line 279, ../../../../general/res/sass/_mixins.scss */
.select:not(.disabled):hover > .icon { .select:not(.disabled):hover > .icon {
color: #33ccff; } } color: #33ccff; } }
/* line 28, ../../../../general/res/sass/forms/_selects.scss */ /* line 31, ../../../../general/res/sass/forms/_selects.scss */
.select select { .select select {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@@ -2797,10 +2886,10 @@ textarea {
border: none !important; border: none !important;
padding: 4px 25px 2px 0px; padding: 4px 25px 2px 0px;
width: 120%; } width: 120%; }
/* line 37, ../../../../general/res/sass/forms/_selects.scss */ /* line 40, ../../../../general/res/sass/forms/_selects.scss */
.select select option { .select select option {
margin: 5px 0; } margin: 5px 0; }
/* line 41, ../../../../general/res/sass/forms/_selects.scss */ /* line 44, ../../../../general/res/sass/forms/_selects.scss */
.select:after { .select:after {
text-shadow: none; text-shadow: none;
content: '\76'; content: '\76';
@@ -2896,26 +2985,44 @@ textarea {
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/* line 23, ../../../../general/res/sass/forms/_datetime.scss */ /* line 29, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime span { .complex.datetime {
display: inline-block; /*
margin-right: 5px; } .field-hints,
/* line 36, ../../../../general/res/sass/forms/_datetime.scss */ .fields {
.complex.datetime .fields { }
margin-top: 3px 0;
padding: 3px 0; }
/* line 41, ../../../../general/res/sass/forms/_datetime.scss */ .field-hints {
.complex.datetime .date {
width: 85px; } }
/* line 44, ../../../../general/res/sass/forms/_datetime.scss */ */ }
.complex.datetime .date input { /* line 30, ../../../../general/res/sass/forms/_datetime.scss */
width: 80px; } .complex.datetime span {
/* line 50, ../../../../general/res/sass/forms/_datetime.scss */ display: inline-block;
.complex.datetime .time.sm { margin-right: 5px; }
width: 45px; } /* line 46, ../../../../general/res/sass/forms/_datetime.scss */
/* line 53, ../../../../general/res/sass/forms/_datetime.scss */ .complex.datetime .fields {
.complex.datetime .time.sm input { margin-top: 3px 0;
width: 40px; } padding: 3px 0; }
/* line 51, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .date {
width: 85px; }
/* line 24, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .date input[type="text"] {
width: 80px; }
/* line 55, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.md {
width: 65px; }
/* line 24, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.md input[type="text"] {
width: 60px; }
/* line 59, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.sm {
width: 45px; }
/* line 24, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.sm input[type="text"] {
width: 40px; }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -4093,7 +4200,7 @@ span.req {
-o-transition: background, 0.25s; -o-transition: background, 0.25s;
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
/* line 272, ../../../../general/res/sass/_mixins.scss */ /* line 272, ../../../../general/res/sass/_mixins.scss */
.overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu-btn:not(.major) .icon { .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu-btn:not(.major) .icon {
color: #fff; } color: #fff; }
@@ -5464,7 +5571,7 @@ table {
-o-transition: background, 0.25s; -o-transition: background, 0.25s;
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
float: left; float: left;
@@ -5613,7 +5720,7 @@ table {
-o-transition: background, 0.25s; -o-transition: background, 0.25s;
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
color: #80dfff; } color: #80dfff; }
/* line 272, ../../../../general/res/sass/_mixins.scss */ /* line 272, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item.selected .icon { .items-holder .item.grid-item.selected .icon {

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

@@ -31,7 +31,10 @@ $sliderColorKnob: rgba($sliderColorBase, 0.6);
$sliderColorKnobHov: $sliderColorBase; $sliderColorKnobHov: $sliderColorBase;
$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1); $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorKeyFg; $sliderColorRangeValHovFg: $colorKeyFg;
$sliderKnobW: 4px; $sliderH: 20px;
$sliderKnobW: $sliderH/2;
$timeControllerToiLineColor: #00c2ff;
$timeControllerToiLineColorHov: #fff;
// General Colors // General Colors
$colorAlt1: #ffc700; $colorAlt1: #ffc700;

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

@@ -1810,7 +1810,7 @@ label.checkbox.custom {
opacity: 1; } } opacity: 1; } }
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
/* line 300, ../../../../general/res/sass/controls/_controls.scss */ /* line 298, ../../../../general/res/sass/controls/_controls.scss */
.slider .slot { .slider .slot {
width: auto; width: auto;
position: absolute; position: absolute;
@@ -1818,7 +1818,7 @@ label.checkbox.custom {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 312, ../../../../general/res/sass/controls/_controls.scss */ /* line 308, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob { .slider .knob {
-moz-transition-property: visibility, opacity, background-color, border-color; -moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color;
@@ -1832,19 +1832,36 @@ label.checkbox.custom {
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
background-color: rgba(0, 153, 204, 0.3); background-color: rgba(0, 153, 204, 0.5);
cursor: ew-resize;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 12px; width: 10px;
top: 0; top: 0;
auto: 0; auto: 0;
bottom: auto; bottom: auto;
left: auto; } left: auto; }
/* line 317, ../../../../general/res/sass/controls/_controls.scss */ /* line 313, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob:hover { .slider .knob:hover {
background-color: #0099cc; } background-color: rgba(0, 153, 204, 0.7); }
/* line 335, ../../../../general/res/sass/controls/_controls.scss */ /* line 324, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob-l {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: w-resize; }
/* line 328, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob-r {
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
cursor: e-resize; }
/* line 332, ../../../../general/res/sass/controls/_controls.scss */
.slider .range { .slider .range {
-moz-transition-property: visibility, opacity, background-color, border-color; -moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color;
@@ -1858,7 +1875,7 @@ label.checkbox.custom {
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
background-color: rgba(0, 153, 204, 0.3); background-color: rgba(0, 153, 204, 0.2);
cursor: ew-resize; cursor: ew-resize;
position: absolute; position: absolute;
top: 0; top: 0;
@@ -1867,12 +1884,12 @@ label.checkbox.custom {
left: auto; left: auto;
height: auto; height: auto;
width: auto; } width: auto; }
/* line 346, ../../../../general/res/sass/controls/_controls.scss */ /* line 343, ../../../../general/res/sass/controls/_controls.scss */
.slider .range:hover { .slider .range:hover {
background-color: rgba(0, 153, 204, 0.5); } background-color: rgba(0, 153, 204, 0.4); }
/******************************************************** DATETIME PICKER */ /******************************************************** DATETIME PICKER */
/* line 353, ../../../../general/res/sass/controls/_controls.scss */ /* line 350, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker { .l-datetime-picker {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
@@ -1881,59 +1898,66 @@ label.checkbox.custom {
font-size: 0.8rem; font-size: 0.8rem;
padding: 10px !important; padding: 10px !important;
width: 230px; } width: 230px; }
/* line 359, ../../../../general/res/sass/controls/_controls.scss */ /* line 356, ../../../../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 371, ../../../../general/res/sass/controls/_controls.scss */ /* line 368, ../../../../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 374, ../../../../general/res/sass/controls/_controls.scss */ /* line 371, ../../../../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 376, ../../../../general/res/sass/controls/_controls.scss */ /* line 373, ../../../../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 380, ../../../../general/res/sass/controls/_controls.scss */ /* line 377, ../../../../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 383, ../../../../general/res/sass/controls/_controls.scss */ /* line 380, ../../../../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 388, ../../../../general/res/sass/controls/_controls.scss */ /* line 385, ../../../../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; }
/* line 391, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker .l-calendar,
.l-datetime-picker .l-time-selects {
border-top: 1px solid rgba(102, 102, 102, 0.2); }
/* line 395, ../../../../general/res/sass/controls/_controls.scss */
.l-datetime-picker .l-time-selects {
line-height: 22px; }
/******************************************************** CALENDAR */ /******************************************************** CALENDAR */
/* line 399, ../../../../general/res/sass/controls/_controls.scss */ /* line 403, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row { .l-calendar ul.l-cal-row {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-flow: row nowrap; -webkit-flex-flow: row nowrap;
flex-flow: row nowrap; flex-flow: row nowrap;
margin-top: 1px; } margin-top: 1px; }
/* line 403, ../../../../general/res/sass/controls/_controls.scss */ /* line 407, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row:first-child { .l-calendar ul.l-cal-row:first-child {
margin-top: 0; } margin-top: 0; }
/* line 406, ../../../../general/res/sass/controls/_controls.scss */ /* line 410, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row li { .l-calendar ul.l-cal-row li {
-webkit-flex: 1 0; -webkit-flex: 1 0;
flex: 1 0; flex: 1 0;
margin-left: 1px; margin-left: 1px;
padding: 5px; padding: 5px;
text-align: center; } text-align: center; }
/* line 412, ../../../../general/res/sass/controls/_controls.scss */ /* line 416, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row li:first-child { .l-calendar ul.l-cal-row li:first-child {
margin-left: 0; } margin-left: 0; }
/* line 416, ../../../../general/res/sass/controls/_controls.scss */ /* line 420, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-header li { .l-calendar ul.l-cal-row.l-header li {
color: #999999; } color: #999999; }
/* line 419, ../../../../general/res/sass/controls/_controls.scss */ /* line 423, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li { .l-calendar ul.l-cal-row.l-body li {
-moz-transition-property: background-color; -moz-transition-property: background-color;
-o-transition-property: background-color; -o-transition-property: background-color;
@@ -1948,31 +1972,31 @@ label.checkbox.custom {
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
cursor: pointer; } cursor: pointer; }
/* line 422, ../../../../general/res/sass/controls/_controls.scss */ /* line 426, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li.in-month { .l-calendar ul.l-cal-row.l-body li.in-month {
background-color: #f2f2f2; } background-color: #f2f2f2; }
/* line 425, ../../../../general/res/sass/controls/_controls.scss */ /* line 429, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li .sub { .l-calendar ul.l-cal-row.l-body li .sub {
color: #999999; color: #999999;
font-size: 0.8em; } font-size: 0.8em; }
/* line 429, ../../../../general/res/sass/controls/_controls.scss */ /* line 433, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li.selected { .l-calendar ul.l-cal-row.l-body li.selected {
background: #1ac6ff; background: #1ac6ff;
color: #fcfcfc; } color: #fcfcfc; }
/* line 432, ../../../../general/res/sass/controls/_controls.scss */ /* line 436, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li.selected .sub { .l-calendar ul.l-cal-row.l-body li.selected .sub {
color: inherit; } color: inherit; }
/* line 436, ../../../../general/res/sass/controls/_controls.scss */ /* line 440, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li:hover { .l-calendar ul.l-cal-row.l-body li:hover {
background-color: #0099cc; background-color: #0099cc;
color: #fff; } color: #fff; }
/* line 439, ../../../../general/res/sass/controls/_controls.scss */ /* line 443, ../../../../general/res/sass/controls/_controls.scss */
.l-calendar ul.l-cal-row.l-body li:hover .sub { .l-calendar ul.l-cal-row.l-body li:hover .sub {
color: inherit; } 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 450, ../../../../general/res/sass/controls/_controls.scss */ /* line 454, ../../../../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;
@@ -1987,7 +2011,7 @@ label.checkbox.custom {
height: 10px; height: 10px;
width: 10px; } width: 10px; }
/* line 459, ../../../../general/res/sass/controls/_controls.scss */ /* line 463, ../../../../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%;
@@ -2001,7 +2025,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 468, ../../../../general/res/sass/controls/_controls.scss */ /* line 472, ../../../../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%;
@@ -2010,7 +2034,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 473, ../../../../general/res/sass/controls/_controls.scss */ /* line 477, ../../../../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); } }
/***************************************************************************** /*****************************************************************************
@@ -2310,130 +2334,194 @@ label.checkbox.custom {
right: 0; right: 0;
width: auto; } width: auto; }
/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 21, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller { .l-time-controller .l-time-range-inputs-holder,
min-width: 400px; } .l-time-controller .l-time-range-slider {
/* line 9, ../../../../general/res/sass/controls/_time-controller.scss */ font-size: 0.8em; }
.l-time-controller .l-time-range-inputs-holder, /* line 26, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider { .l-time-controller .l-time-range-inputs-holder,
font-size: 0.8em; } .l-time-controller .l-time-range-slider-holder,
/* line 14, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder {
.l-time-controller .l-time-range-inputs-holder, overflow: visible;
.l-time-controller .l-time-range-slider-holder, position: absolute;
.l-time-controller .l-time-range-ticks-holder { top: 0;
overflow: visible; right: 0;
position: absolute; bottom: 0;
top: 0; left: 0;
right: 0; width: auto;
bottom: 0; height: auto;
left: 0; -moz-box-sizing: border-box;
width: auto; -webkit-box-sizing: border-box;
height: auto; box-sizing: border-box;
-moz-box-sizing: border-box; min-width: 400px;
-webkit-box-sizing: border-box; top: auto; }
box-sizing: border-box; /* line 36, ../../../../general/res/sass/controls/_time-controller.scss */
top: auto; } .l-time-controller .l-time-range-slider,
/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks {
.l-time-controller .l-time-range-slider, overflow: visible;
.l-time-controller .l-time-range-ticks { position: absolute;
overflow: visible; top: 0;
position: absolute; right: 0;
top: 0; bottom: 0;
right: 0; left: 0;
bottom: 0; width: auto;
left: 0; height: auto; }
width: auto; /* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
height: auto; } .l-time-controller .l-time-range-inputs-holder {
/* line 29, ../../../../general/res/sass/controls/_time-controller.scss */ height: 33px;
.l-time-controller .l-time-range-inputs-holder { bottom: 46px;
height: 33px; padding-top: 5px;
bottom: 46px; border-top: 1px solid rgba(102, 102, 102, 0.2); }
padding-top: 5px; /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */
border-top: 1px solid rgba(102, 102, 102, 0.2); } .l-time-controller .l-time-range-inputs-holder .type-icon {
/* line 34, ../../../../general/res/sass/controls/_time-controller.scss */ font-size: 120%;
.l-time-controller .l-time-range-inputs-holder .type-icon { vertical-align: middle; }
font-size: 120%;
vertical-align: middle; }
/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder .l-time-range-input,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
margin-right: 5px; }
/* line 41, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
color: #999999; }
/* line 44, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
.l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
font-size: 11px;
width: 11px; }
/* line 51, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider, .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
.l-time-controller .l-time-range-ticks { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
left: 125px; margin-right: 5px; }
right: 125px; } /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
/* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
.l-time-controller .l-time-range-slider-holder { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
height: 20px; color: #999999; }
bottom: 23px; } /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
/* line 60, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
.l-time-controller .l-time-range-slider-holder .range-holder { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
-moz-box-shadow: none; .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
-webkit-box-shadow: none; .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
box-shadow: none; font-size: 11px;
background: none; width: 11px; }
border: none; } /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider,
.l-time-controller .l-time-range-ticks-holder { .l-time-controller .l-time-range-ticks {
height: 20px; } left: 150px;
/* line 69, ../../../../general/res/sass/controls/_time-controller.scss */ right: 150px; }
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
border-top: 1px solid rgba(0, 0, 0, 0.2); } .l-time-controller .l-time-range-slider-holder {
/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */ height: 20px;
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { bottom: 23px; }
background-color: rgba(0, 0, 0, 0.2); /* line 73, ../../../../general/res/sass/controls/_time-controller.scss */
border: none; .l-time-controller .l-time-range-slider-holder .range-holder {
height: 5px; -moz-box-shadow: none;
width: 1px; -webkit-box-shadow: none;
margin-left: -1px; box-shadow: none;
position: absolute; } background: none;
/* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ border: none; }
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
margin-left: 0; } .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
/* line 81, ../../../../general/res/sass/controls/_time-controller.scss */ -moz-transform: translateX(50%);
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { -ms-transform: translateX(50%);
transform: translateX(-50%); -webkit-transform: translateX(50%);
-webkit-transform: translateX(-50%); transform: translateX(50%);
color: #999999;
display: inline-block;
font-size: 0.7em;
position: absolute;
top: 8px;
white-space: nowrap;
z-index: 2; }
/* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob {
width: 5px; }
/* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob .range-value {
position: absolute; position: absolute;
height: 20px; top: 0;
line-height: 20px; right: 0;
white-space: nowrap; } bottom: 0px;
/* line 103, ../../../../general/res/sass/controls/_time-controller.scss */ left: auto;
.l-time-controller .knob:hover .range-value { width: 8px;
color: #0099cc; } height: auto;
/* line 108, ../../../../general/res/sass/controls/_time-controller.scss */ z-index: 2; }
/* line 88, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
background-color: #666;
content: "";
position: absolute; }
/* line 94, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
top: 0;
right: auto;
bottom: -10px;
left: 3px;
width: 2px; }
/* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: 8px; }
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
background-color: #0052b5; }
/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder {
height: 20px; }
/* line 118, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
border-top: 1px solid rgba(0, 0, 0, 0.2); }
/* line 120, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
background-color: rgba(0, 0, 0, 0.2);
border: none;
height: 5px;
width: 1px;
margin-left: -1px;
position: absolute; }
/* line 127, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
margin-left: 0; }
/* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
color: #999999;
display: inline-block;
font-size: 0.7em;
position: absolute;
top: 8px;
white-space: nowrap;
z-index: 2; }
/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob {
z-index: 2; }
/* line 146, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob .range-value {
-moz-transition-property: visibility, opacity, background-color, border-color;
-o-transition-property: visibility, opacity, background-color, border-color;
-webkit-transition-property: visibility, opacity, background-color, border-color;
transition-property: visibility, opacity, background-color, border-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;
padding: 0 10px;
position: absolute;
height: 20px;
line-height: 20px;
white-space: nowrap; }
/* line 155, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob:hover .range-value {
color: rgba(0, 153, 204, 0.7); }
/* line 158, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-l {
margin-left: -10px; }
/* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-l .range-value { .l-time-controller .knob.knob-l .range-value {
text-align: right; text-align: right;
right: 10px; } right: 10px; }
/* line 115, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-r {
margin-right: -10px; }
/* line 169, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-r .range-value { .l-time-controller .knob.knob-r .range-value {
left: 10px; } left: 10px; }
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
background-color: #0052b5; }
/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 183, ../../../../general/res/sass/controls/_time-controller.scss */
.s-time-range-val { .s-time-range-val {
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
@@ -2725,14 +2813,14 @@ textarea {
-webkit-transition: background, 0.25s; -webkit-transition: background, 0.25s;
transition: background, 0.25s; transition: background, 0.25s;
text-shadow: none; text-shadow: none;
margin: 0 0 2px 2px;
padding: 0 5px; padding: 0 5px;
overflow: hidden; overflow: hidden;
position: relative; } position: relative;
line-height: 22px; }
/* line 272, ../../../../general/res/sass/_mixins.scss */ /* line 272, ../../../../general/res/sass/_mixins.scss */
.select .icon { .select .icon {
color: #eee; } color: #eee; }
/* line 28, ../../../../general/res/sass/forms/_selects.scss */ /* line 31, ../../../../general/res/sass/forms/_selects.scss */
.select select { .select select {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@@ -2745,10 +2833,10 @@ textarea {
border: none !important; border: none !important;
padding: 4px 25px 2px 0px; padding: 4px 25px 2px 0px;
width: 120%; } width: 120%; }
/* line 37, ../../../../general/res/sass/forms/_selects.scss */ /* line 40, ../../../../general/res/sass/forms/_selects.scss */
.select select option { .select select option {
margin: 5px 0; } margin: 5px 0; }
/* line 41, ../../../../general/res/sass/forms/_selects.scss */ /* line 44, ../../../../general/res/sass/forms/_selects.scss */
.select:after { .select:after {
text-shadow: none; text-shadow: none;
content: '\76'; content: '\76';
@@ -2844,26 +2932,44 @@ textarea {
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/* line 23, ../../../../general/res/sass/forms/_datetime.scss */ /* line 29, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime span { .complex.datetime {
display: inline-block; /*
margin-right: 5px; } .field-hints,
/* line 36, ../../../../general/res/sass/forms/_datetime.scss */ .fields {
.complex.datetime .fields { }
margin-top: 3px 0;
padding: 3px 0; }
/* line 41, ../../../../general/res/sass/forms/_datetime.scss */ .field-hints {
.complex.datetime .date {
width: 85px; } }
/* line 44, ../../../../general/res/sass/forms/_datetime.scss */ */ }
.complex.datetime .date input { /* line 30, ../../../../general/res/sass/forms/_datetime.scss */
width: 80px; } .complex.datetime span {
/* line 50, ../../../../general/res/sass/forms/_datetime.scss */ display: inline-block;
.complex.datetime .time.sm { margin-right: 5px; }
width: 45px; } /* line 46, ../../../../general/res/sass/forms/_datetime.scss */
/* line 53, ../../../../general/res/sass/forms/_datetime.scss */ .complex.datetime .fields {
.complex.datetime .time.sm input { margin-top: 3px 0;
width: 40px; } padding: 3px 0; }
/* line 51, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .date {
width: 85px; }
/* line 24, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .date input[type="text"] {
width: 80px; }
/* line 55, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.md {
width: 65px; }
/* line 24, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.md input[type="text"] {
width: 60px; }
/* line 59, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.sm {
width: 45px; }
/* line 24, ../../../../general/res/sass/forms/_datetime.scss */
.complex.datetime .time.sm input[type="text"] {
width: 40px; }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government

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

@@ -25,13 +25,16 @@ $contrastInvokeMenuPercent: 40%;
$shdwBtns: none; $shdwBtns: none;
$sliderColorBase: $colorKey; $sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.07); $sliderColorRangeHolder: rgba(black, 0.07);
$sliderColorRange: rgba($sliderColorBase, 0.3); $sliderColorRange: rgba($sliderColorBase, 0.2);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5); $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
$sliderColorKnob: rgba($sliderColorBase, 0.6); $sliderColorKnob: rgba($sliderColorBase, 0.5);
$sliderColorKnobHov: $sliderColorBase; $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorBodyFg; $sliderColorRangeValHovFg: $colorBodyFg;
$sliderKnobW: 4px; $sliderH: 20px;
$sliderKnobW: $sliderH/2;
$timeControllerToiLineColor: $colorBodyFg;
$timeControllerToiLineColorHov: #0052b5;
// General Colors // General Colors
$colorAlt1: #ff6600; $colorAlt1: #ff6600;