mirror of
https://github.com/nasa/openmct.git
synced 2025-01-22 04:18:05 +00:00
[Frontend] Time Controller Markup and Styling
open #1515 open #117 Styling for boundary inputs and slider;
This commit is contained in:
Charles Hacskaylo
parent
9811443c71
commit
9f7dc1da9b
@ -41,6 +41,9 @@
|
||||
font-size: 1.65em;
|
||||
}
|
||||
}
|
||||
&.icon-calendar:after {
|
||||
content: "\e605";
|
||||
}
|
||||
}
|
||||
|
||||
.bar .ui-symbol {
|
||||
|
||||
@ -299,18 +299,24 @@ label.checkbox.custom {
|
||||
$slotH: 50%;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
@include sliderTrack();
|
||||
height: $slotH;
|
||||
//@include sliderTrack();
|
||||
//height: $slotH;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: ($knobH - $slotH) / 2;
|
||||
//top: ($knobH - $slotH) / 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.knob {
|
||||
@include btnSubtle();
|
||||
@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
//@include btnSubtle();
|
||||
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorKnob;
|
||||
&:hover {
|
||||
background-color: $sliderColorKnobHov;
|
||||
}
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
@ -319,15 +325,16 @@ label.checkbox.custom {
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
&:before {
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
left: ($knobW / 2) - 1;
|
||||
}
|
||||
//&:before {
|
||||
// top: 1px;
|
||||
// bottom: 3px;
|
||||
// left: ($knobW / 2) - 1;
|
||||
//}
|
||||
|
||||
}
|
||||
.range {
|
||||
background: rgba($colorKey, 0.6);
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorRange;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -337,7 +344,7 @@ label.checkbox.custom {
|
||||
height: auto;
|
||||
width: auto;
|
||||
&:hover {
|
||||
background: rgba($colorKey, 0.7);
|
||||
background-color: $sliderColorRangeHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.l-time-controller {
|
||||
$inputTxtW: 90px;
|
||||
$knobW: 9px;
|
||||
$timeRangeSliderLROffset: 125px;
|
||||
//$sliderKnobW: 9px;
|
||||
$r1H: 20px;
|
||||
$r2H: 30px;
|
||||
$r2H: 20px;
|
||||
$r3H: 10px;
|
||||
|
||||
position: relative;
|
||||
@ -28,22 +28,32 @@
|
||||
}
|
||||
|
||||
.l-time-range-inputs-holder {
|
||||
//@include test(red);
|
||||
height: $r1H;
|
||||
.l-time-range-input {
|
||||
//display: inline-block;
|
||||
margin-right: $interiorMarginLg;
|
||||
.ui-symbol.icon {
|
||||
font-size: 11px;
|
||||
width: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-range-slider,
|
||||
.l-time-range-ticks {
|
||||
left: $inputTxtW; right: $inputTxtW;
|
||||
left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
|
||||
|
||||
}
|
||||
|
||||
.l-time-range-slider-holder {
|
||||
//@include test(green);
|
||||
height: $r2H;
|
||||
.range-holder {
|
||||
@include box-shadow(none);
|
||||
background: none;
|
||||
border: none;
|
||||
height: 75%;
|
||||
//height: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,31 +84,42 @@
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: $knobW;
|
||||
width: $sliderKnobW;
|
||||
.range-value {
|
||||
$w: 75px;
|
||||
//$w: 75px;
|
||||
//@include test();
|
||||
//@include verticalCenter();
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -7px; // Label is 13px high
|
||||
height: $r2H;
|
||||
line-height: $r2H;
|
||||
//top: 50%;
|
||||
//margin-top: -7px; // Label is 13px high
|
||||
white-space: nowrap;
|
||||
width: $w;
|
||||
//width: $w;
|
||||
}
|
||||
&:hover .range-value {
|
||||
color: $colorKey;
|
||||
}
|
||||
&.knob-l {
|
||||
margin-left: $knobW / -2;
|
||||
//margin-left: $sliderKnobW / -2;
|
||||
.range-value {
|
||||
text-align: right;
|
||||
right: $knobW + $interiorMargin;
|
||||
right: $sliderKnobW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
&.knob-r {
|
||||
margin-right: $knobW / -2;
|
||||
//margin-right: $sliderKnobW / -2;
|
||||
.range-value {
|
||||
left: $knobW + $interiorMargin;
|
||||
left: $sliderKnobW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.s-time-range-val {
|
||||
//@include test();
|
||||
@include border-radius($controlCr);
|
||||
background-color: $colorInputBg;
|
||||
padding: 1px 1px 0 $interiorMargin;
|
||||
}
|
||||
@ -20,14 +20,19 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<div class="l-time-controller" ng-controller="TimeRangeController">
|
||||
<div class="l-time-range-inputs-holder">
|
||||
Start: {{startOuterText}}
|
||||
<span ng-controller="ToggleController as t">
|
||||
<a class="ui-symbol" ng-click="t.toggle()">p</a>
|
||||
<mct-popup ng-if="t.isActive()">
|
||||
<span class="l-time-range-input">
|
||||
Start:
|
||||
<span class="s-time-range-val time-range-start">
|
||||
<span class="val">{{startOuterText}}</span>
|
||||
<span ng-controller="ToggleController as t1">
|
||||
<a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a>
|
||||
<mct-popup ng-if="t1.isActive()">
|
||||
<div style="background: #222;"
|
||||
mct-click-elsewhere="t.setState(false)">
|
||||
mct-click-elsewhere="t1.setState(false)">
|
||||
<mct-control key="'datetime-picker'"
|
||||
ng-model="ngModel.outer"
|
||||
field="'start'"
|
||||
@ -36,10 +41,15 @@
|
||||
</div>
|
||||
</mct-popup>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
End: {{endOuterText}}
|
||||
<span class="l-time-range-input">
|
||||
End:
|
||||
<span class="s-time-range-val time-range-end">
|
||||
<span class="val">{{endOuterText}}</span>
|
||||
<span ng-controller="ToggleController as t2">
|
||||
<a class="ui-symbol" ng-click="t2.toggle()">p</a>
|
||||
<a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()"></a>
|
||||
<mct-popup ng-if="t2.isActive()">
|
||||
<div style="background: #222;"
|
||||
mct-click-elsewhere="t2.setState(false)">
|
||||
@ -51,6 +61,8 @@
|
||||
</div>
|
||||
</mct-popup>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -41,38 +41,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1; }
|
||||
|
||||
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
@ -607,35 +607,38 @@ mct-container {
|
||||
/* line 40, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.icon.major {
|
||||
font-size: 1.65em; }
|
||||
/* line 44, ../../../../general/res/sass/_icons.scss */
|
||||
.ui-symbol.icon-calendar:after {
|
||||
content: "\e605"; }
|
||||
|
||||
/* line 46, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 49, ../../../../general/res/sass/_icons.scss */
|
||||
.bar .ui-symbol {
|
||||
display: inline-block; }
|
||||
|
||||
/* line 50, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 53, ../../../../general/res/sass/_icons.scss */
|
||||
.invoke-menu {
|
||||
text-shadow: none;
|
||||
display: inline-block; }
|
||||
|
||||
/* line 55, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 58, ../../../../general/res/sass/_icons.scss */
|
||||
.s-menu .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: 3px; }
|
||||
|
||||
/* line 60, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 63, ../../../../general/res/sass/_icons.scss */
|
||||
.menu .type-icon,
|
||||
.tree-item .type-icon,
|
||||
.super-menu.menu .type-icon {
|
||||
position: absolute; }
|
||||
|
||||
/* line 70, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 73, ../../../../general/res/sass/_icons.scss */
|
||||
.l-icon-link:before {
|
||||
content: "\f4"; }
|
||||
|
||||
/* line 74, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 77, ../../../../general/res/sass/_icons.scss */
|
||||
.l-icon-alert {
|
||||
display: none !important; }
|
||||
/* line 76, ../../../../general/res/sass/_icons.scss */
|
||||
/* line 79, ../../../../general/res/sass/_icons.scss */
|
||||
.l-icon-alert:before {
|
||||
color: #ff3c00;
|
||||
content: "!"; }
|
||||
@ -1833,52 +1836,27 @@ label.checkbox.custom {
|
||||
/******************************************************** SLIDERS */
|
||||
/* line 300, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .slot {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
|
||||
-webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
|
||||
box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
height: 50%;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
bottom: 0;
|
||||
left: 0; }
|
||||
/* line 311, ../../../../general/res/sass/controls/_controls.scss */
|
||||
/* line 312, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .knob {
|
||||
background-color: #333;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
|
||||
background-image: -moz-linear-gradient(#404040, #333333);
|
||||
background-image: -webkit-linear-gradient(#404040, #333333);
|
||||
background-image: linear-gradient(#404040, #333333);
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-moz-transition: background, 0.25s;
|
||||
-o-transition: background, 0.25s;
|
||||
-webkit-transition: background, 0.25s;
|
||||
transition: background, 0.25s;
|
||||
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
|
||||
-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;
|
||||
background-color: rgba(0, 153, 204, 0.3);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@ -1887,63 +1865,24 @@ label.checkbox.custom {
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto; }
|
||||
/* line 272, ../../../../general/res/sass/_mixins.scss */
|
||||
.slider .knob .icon {
|
||||
color: #0099cc; }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 277, ../../../../general/res/sass/_mixins.scss */
|
||||
.slider .knob:not(.disabled):hover {
|
||||
background: linear-gradient(#595959, #4d4d4d); }
|
||||
/* line 279, ../../../../general/res/sass/_mixins.scss */
|
||||
.slider .knob:not(.disabled):hover > .icon {
|
||||
color: #33ccff; } }
|
||||
/* line 159, ../../../../general/res/sass/_mixins.scss */
|
||||
.slider .knob:before {
|
||||
-moz-transition-property: "border-color";
|
||||
-o-transition-property: "border-color";
|
||||
-webkit-transition-property: "border-color";
|
||||
transition-property: "border-color";
|
||||
-moz-transition-duration: 0.75s;
|
||||
-o-transition-duration: 0.75s;
|
||||
-webkit-transition-duration: 0.75s;
|
||||
transition-duration: 0.75s;
|
||||
-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;
|
||||
content: '';
|
||||
display: block;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px; }
|
||||
/* line 181, ../../../../general/res/sass/_mixins.scss */
|
||||
.slider .knob:not(.disabled):hover:before {
|
||||
-moz-transition-property: "border-color";
|
||||
-o-transition-property: "border-color";
|
||||
-webkit-transition-property: "border-color";
|
||||
transition-property: "border-color";
|
||||
-moz-transition-duration: 25ms;
|
||||
-o-transition-duration: 25ms;
|
||||
-webkit-transition-duration: 25ms;
|
||||
transition-duration: 25ms;
|
||||
-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;
|
||||
border-color: #0099cc; }
|
||||
/* line 322, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .knob:before {
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
left: 5px; }
|
||||
/* line 329, ../../../../general/res/sass/controls/_controls.scss */
|
||||
/* line 317, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .knob:hover {
|
||||
background-color: rgba(0, 153, 204, 0.5); }
|
||||
/* line 335, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .range {
|
||||
background: rgba(0, 153, 204, 0.6);
|
||||
-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;
|
||||
background-color: rgba(0, 153, 204, 0.3);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -1952,13 +1891,13 @@ label.checkbox.custom {
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto; }
|
||||
/* line 339, ../../../../general/res/sass/controls/_controls.scss */
|
||||
/* line 346, ../../../../general/res/sass/controls/_controls.scss */
|
||||
.slider .range:hover {
|
||||
background: rgba(0, 153, 204, 0.7); }
|
||||
background-color: rgba(0, 153, 204, 0.5); }
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 348, ../../../../general/res/sass/controls/_controls.scss */
|
||||
/* line 355, ../../../../general/res/sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
@ -1973,7 +1912,7 @@ label.checkbox.custom {
|
||||
height: 10px;
|
||||
width: 10px; }
|
||||
|
||||
/* line 357, ../../../../general/res/sass/controls/_controls.scss */
|
||||
/* line 364, ../../../../general/res/sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
@ -1987,7 +1926,7 @@ label.checkbox.custom {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
/* line 366, ../../../../general/res/sass/controls/_controls.scss */
|
||||
/* line 373, ../../../../general/res/sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
@ -1996,7 +1935,7 @@ label.checkbox.custom {
|
||||
background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
|
||||
background-image: linear-gradient(#5e5e5e, #525252 20px); }
|
||||
|
||||
/* line 371, ../../../../general/res/sass/controls/_controls.scss */
|
||||
/* line 378, ../../../../general/res/sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(0, 0, 0, 0.4); } }
|
||||
/*****************************************************************************
|
||||
@ -2312,38 +2251,44 @@ label.checkbox.custom {
|
||||
/* line 30, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder {
|
||||
height: 20px; }
|
||||
/* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 33, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-input {
|
||||
margin-right: 10px; }
|
||||
/* line 36, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon {
|
||||
font-size: 11px;
|
||||
width: 11px; }
|
||||
/* line 43, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider,
|
||||
.l-time-controller .l-time-range-ticks {
|
||||
left: 90px;
|
||||
right: 90px; }
|
||||
/* line 40, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
left: 125px;
|
||||
right: 125px; }
|
||||
/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider-holder {
|
||||
height: 30px; }
|
||||
/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
height: 20px; }
|
||||
/* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider-holder .range-holder {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border: none;
|
||||
height: 75%; }
|
||||
/* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
border: none; }
|
||||
/* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder {
|
||||
height: 10px; }
|
||||
/* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
|
||||
border-top: 1px solid rgba(153, 153, 153, 0.1); }
|
||||
/* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
|
||||
background-color: rgba(153, 153, 153, 0.1);
|
||||
border: none;
|
||||
width: 1px;
|
||||
margin-left: -1px; }
|
||||
/* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 69, ../../../../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 62, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 72, ../../../../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 {
|
||||
color: rgba(204, 204, 204, 0.1);
|
||||
font-size: 0.7em;
|
||||
@ -2353,32 +2298,33 @@ label.checkbox.custom {
|
||||
top: 10px;
|
||||
width: 50px;
|
||||
z-index: 2; }
|
||||
/* line 76, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 86, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob {
|
||||
width: 9px; }
|
||||
/* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
width: 5px; }
|
||||
/* line 88, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob .range-value {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
white-space: nowrap;
|
||||
width: 75px; }
|
||||
/* line 87, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap; }
|
||||
/* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob:hover .range-value {
|
||||
color: #0099cc; }
|
||||
/* line 90, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-l {
|
||||
margin-left: -4.5px; }
|
||||
/* line 92, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
/* line 105, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-l .range-value {
|
||||
text-align: right;
|
||||
right: 14px; }
|
||||
/* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-r {
|
||||
margin-right: -4.5px; }
|
||||
/* line 99, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
right: 10px; }
|
||||
/* line 112, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-r .range-value {
|
||||
left: 14px; }
|
||||
left: 10px; }
|
||||
|
||||
/* line 120, ../../../../general/res/sass/controls/_time-controller.scss */
|
||||
.s-time-range-val {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 1px 1px 0 5px; }
|
||||
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
@ -3291,30 +3237,19 @@ span.req {
|
||||
float: left;
|
||||
margin-right: 10px; }
|
||||
|
||||
/*.object-holder {
|
||||
.s-btn {
|
||||
//background: red !important;
|
||||
$h: 16px;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
> span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
|
||||
/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
|
||||
.l-flex {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
flex-flow: row nowrap;
|
||||
-webkit-flex-flow: row nowrap; }
|
||||
/* line 353, ../../../../general/res/sass/user-environ/_layout.scss */
|
||||
/* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
|
||||
.l-flex .left {
|
||||
flex: 1 1 0;
|
||||
-webkit-flex: 1 1 0;
|
||||
padding-right: 10px; }
|
||||
|
||||
/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
|
||||
/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
|
||||
.vscroll {
|
||||
overflow-y: auto; }
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ $basicCr: 2px;
|
||||
$controlCr: 3px;
|
||||
$smallCr: 2px;
|
||||
|
||||
// Buttons
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
|
||||
$colorBtnFg: $colorBodyFg;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
@ -20,6 +20,12 @@ $colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnIcon: $colorKey;
|
||||
$colorInvokeMenu: #fff;
|
||||
$contrastInvokeMenuPercent: 20%;
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.3);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
|
||||
$sliderColorKnob: $sliderColorRange;
|
||||
$sliderColorKnobHov: $sliderColorRangeHov;
|
||||
$sliderKnobW: 5px;
|
||||
|
||||
// General Colors
|
||||
$colorAlt1: #ffc700;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user