ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-22 18:12:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Time Controller Markup and Styling

Browse Source 
open #1515
open #117
Changed slider elements layout from relative to
absolute positioning;
Refined layout in input-holder;
Tweaks to hover classes;
This commit is contained in:
Charles Hacskaylo 2015-09-24 10:34:32 -07:00
parent 9f7dc1da9b
commit 825d93cee3
9 changed files with 5988 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/general/res/sass/_icons.scss
View File

@ -29,6 +29,9 @@
} }
.ui-symbol { .ui-symbol {
&.type-icon {
color: $colorObjHdrIc;
}
&.icon { &.icon {
color: $colorKey; color: $colorKey;
&.alert { &.alert {

7
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -347,9 +347,10 @@
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */ /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative; //position: relative;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); @include webkitProp(transform, translateY(-50%));
-ms-transform: translateY(-50%); //-webkit-transform: translateY(-50%);
transform: translateY(-50%); //-ms-transform: translateY(-50%);
//transform: translateY(-50%);
} }
@mixin verticalCenterBlock($holderH, $itemH) { @mixin verticalCenterBlock($holderH, $itemH) {

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

@ -1,12 +1,9 @@
.l-time-controller { .l-time-controller {
$timeRangeSliderLROffset: 125px; $timeRangeSliderLROffset: 125px;
//$sliderKnobW: 9px; $r1H: 33px;
$r1H: 20px;
$r2H: 20px; $r2H: 20px;
$r3H: 10px; $r3H: 20px;
position: relative;
margin: $interiorMarginLg 0;
min-width: 400px; min-width: 400px;
.l-time-range-inputs-holder, .l-time-range-inputs-holder,
@ -18,8 +15,10 @@
.l-time-range-slider-holder, .l-time-range-slider-holder,
.l-time-range-ticks-holder .l-time-range-ticks-holder
{ {
margin-bottom: $interiorMargin; //@include test();
position: relative; @include absPosDefault(0, visible);
@include box-sizing(border-box);
top: auto;
} }
.l-time-range-slider, .l-time-range-slider,
.l-time-range-ticks { .l-time-range-ticks {
@ -29,10 +28,19 @@
.l-time-range-inputs-holder { .l-time-range-inputs-holder {
//@include test(red); //@include test(red);
height: $r1H; height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
.l-time-range-input { padding-top: $interiorMargin;
//display: inline-block; border-top: 1px solid $colorInteriorBorder;
margin-right: $interiorMarginLg; .type-icon {
font-size: 120%;
vertical-align: middle;
}
.l-time-range-input,
.l-time-range-inputs-elem {
margin-right: $interiorMargin;
.lbl {
color: $colorPlotLabelFg;
}
.ui-symbol.icon { .ui-symbol.icon {
font-size: 11px; font-size: 11px;
width: 11px; width: 11px;
@ -48,35 +56,36 @@
.l-time-range-slider-holder { .l-time-range-slider-holder {
//@include test(green); //@include test(green);
height: $r2H; height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
.range-holder { .range-holder {
@include box-shadow(none); @include box-shadow(none);
background: none; background: none;
border: none; border: none;
//height: 75%;
} }
} }
.l-time-range-ticks-holder { .l-time-range-ticks-holder {
height: $r3H; height: $r3H;
.l-time-range-ticks { .l-time-range-ticks {
border-top: 1px solid $colorInteriorBorder; border-top: 1px solid $colorTick;
.tick { .tick {
background-color: $colorInteriorBorder; background-color: $colorTick;
border:none; border:none;
height: 5px;
width: 1px; width: 1px;
margin-left: -1px; margin-left: -1px;
position: absolute;
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
} }
.l-time-range-tick-label { .l-time-range-tick-label {
color: lighten($colorInteriorBorder, 20%); @include webkitProp(transform, translateX(-50%));
color: $colorPlotLabelFg;
display: inline-block;
font-size: 0.7em; font-size: 0.7em;
position: absolute; position: absolute;
margin-left: -0.5 * $tickLblW; top: 8px;
text-align: center; white-space: nowrap;
top: $r3H;
width: $tickLblW;
z-index: 2; z-index: 2;
} }
} }
@ -86,19 +95,13 @@
.knob { .knob {
width: $sliderKnobW; width: $sliderKnobW;
.range-value { .range-value {
//$w: 75px;
//@include test();
//@include verticalCenter();
position: absolute; position: absolute;
height: $r2H; height: $r2H;
line-height: $r2H; line-height: $r2H;
//top: 50%;
//margin-top: -7px; // Label is 13px high
white-space: nowrap; white-space: nowrap;
//width: $w;
} }
&:hover .range-value { &:hover .range-value {
color: $colorKey; color: $sliderColorKnobHov;
} }
&.knob-l { &.knob-l {
//margin-left: $sliderKnobW / -2; //margin-left: $sliderKnobW / -2;
@ -116,6 +119,9 @@
} }
} }
//.slot.range-holder {
// background-color: $sliderColorRangeHolder;
//}
.s-time-range-val { .s-time-range-val {
//@include test(); //@include test();

2
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-label, .gl-plot-label,
.l-plot-label { .l-plot-label {
// @include test(yellow); // @include test(yellow);
color: lighten($colorBodyFg, 20%); color: $colorPlotLabelFg;
position: absolute; position: absolute;
text-align: center; text-align: center;
// text-transform: uppercase; // text-transform: uppercase;

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

@ -24,12 +24,13 @@
<div class="l-time-controller" ng-controller="TimeRangeController"> <div class="l-time-controller" ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder"> <div class="l-time-range-inputs-holder">
<span class="l-time-range-input"> <span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
Start: <span class="l-time-range-input" ng-controller="ToggleController as t1">
<span class="s-time-range-val time-range-start"> <!--<span class="lbl">Start</span>-->
<span class="s-btn time-range-start" ng-click="t1.toggle()">
<span class="val">{{startOuterText}}</span> <span class="val">{{startOuterText}}</span>
<span ng-controller="ToggleController as t1"> <span>
<a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a> <a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t1.isActive()"> <mct-popup ng-if="t1.isActive()">
<div style="background: #222;" <div style="background: #222;"
mct-click-elsewhere="t1.setState(false)"> mct-click-elsewhere="t1.setState(false)">
@ -44,12 +45,14 @@
</span> </span>
</span> </span>
<span class="l-time-range-input"> <span class="l-time-range-inputs-elem lbl">to</span>
End:
<span class="s-time-range-val time-range-end"> <span class="l-time-range-input" ng-controller="ToggleController as t2">
<!--<span class="lbl">End</span>-->
<span class="s-btn l-time-range-input" ng-click="t2.toggle()">
<span class="val">{{endOuterText}}</span> <span class="val">{{endOuterText}}</span>
<span ng-controller="ToggleController as t2"> <span>
<a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()"></a> <a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t2.isActive()"> <mct-popup ng-if="t2.isActive()">
<div style="background: #222;" <div style="background: #222;"
mct-click-elsewhere="t2.setState(false)"> mct-click-elsewhere="t2.setState(false)">

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

@ -596,49 +596,52 @@ mct-container {
border-right: 5px solid transparent; } border-right: 5px solid transparent; }
/* line 32, ../../../../general/res/sass/_icons.scss */ /* line 32, ../../../../general/res/sass/_icons.scss */
.ui-symbol.type-icon {
color: #cccccc; }
/* line 35, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon { .ui-symbol.icon {
color: #0099cc; } color: #0099cc; }
/* line 34, ../../../../general/res/sass/_icons.scss */ /* line 37, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.alert { .ui-symbol.icon.alert {
color: #ff3c00; } color: #ff3c00; }
/* line 36, ../../../../general/res/sass/_icons.scss */ /* line 39, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.alert:hover { .ui-symbol.icon.alert:hover {
color: #ff8a66; } color: #ff8a66; }
/* line 40, ../../../../general/res/sass/_icons.scss */ /* line 43, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.major { .ui-symbol.icon.major {
font-size: 1.65em; } font-size: 1.65em; }
/* line 44, ../../../../general/res/sass/_icons.scss */ /* line 47, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon-calendar:after { .ui-symbol.icon-calendar:after {
content: "\e605"; } content: "\e605"; }
/* line 49, ../../../../general/res/sass/_icons.scss */ /* line 52, ../../../../general/res/sass/_icons.scss */
.bar .ui-symbol { .bar .ui-symbol {
display: inline-block; } display: inline-block; }
/* line 53, ../../../../general/res/sass/_icons.scss */ /* line 56, ../../../../general/res/sass/_icons.scss */
.invoke-menu { .invoke-menu {
text-shadow: none; text-shadow: none;
display: inline-block; } display: inline-block; }
/* line 58, ../../../../general/res/sass/_icons.scss */ /* line 61, ../../../../general/res/sass/_icons.scss */
.s-menu .invoke-menu, .s-menu .invoke-menu,
.icon.major .invoke-menu { .icon.major .invoke-menu {
margin-left: 3px; } margin-left: 3px; }
/* line 63, ../../../../general/res/sass/_icons.scss */ /* line 66, ../../../../general/res/sass/_icons.scss */
.menu .type-icon, .menu .type-icon,
.tree-item .type-icon, .tree-item .type-icon,
.super-menu.menu .type-icon { .super-menu.menu .type-icon {
position: absolute; } position: absolute; }
/* line 73, ../../../../general/res/sass/_icons.scss */ /* line 76, ../../../../general/res/sass/_icons.scss */
.l-icon-link:before { .l-icon-link:before {
content: "\f4"; } content: "\f4"; }
/* line 77, ../../../../general/res/sass/_icons.scss */ /* line 80, ../../../../general/res/sass/_icons.scss */
.l-icon-alert { .l-icon-alert {
display: none !important; } display: none !important; }
/* line 79, ../../../../general/res/sass/_icons.scss */ /* line 82, ../../../../general/res/sass/_icons.scss */
.l-icon-alert:before { .l-icon-alert:before {
color: #ff3c00; color: #ff3c00;
content: "!"; } content: "!"; }
@ -1867,7 +1870,7 @@ label.checkbox.custom {
left: auto; } left: auto; }
/* line 317, ../../../../general/res/sass/controls/_controls.scss */ /* line 317, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob:hover { .slider .knob:hover {
background-color: rgba(0, 153, 204, 0.5); } background-color: #0099cc; }
/* line 335, ../../../../general/res/sass/controls/_controls.scss */ /* line 335, ../../../../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;
@ -2224,20 +2227,28 @@ label.checkbox.custom {
/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller { .l-time-controller {
position: relative;
margin: 10px 0;
min-width: 400px; } min-width: 400px; }
/* line 12, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 9, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder, .l-time-controller .l-time-range-inputs-holder,
.l-time-controller .l-time-range-slider { .l-time-controller .l-time-range-slider {
font-size: 0.8em; } font-size: 0.8em; }
/* line 17, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 14, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder, .l-time-controller .l-time-range-inputs-holder,
.l-time-controller .l-time-range-slider-holder, .l-time-controller .l-time-range-slider-holder,
.l-time-controller .l-time-range-ticks-holder { .l-time-controller .l-time-range-ticks-holder {
margin-bottom: 5px; overflow: visible;
position: relative; } position: absolute;
/* line 24, ../../../../general/res/sass/controls/_time-controller.scss */ top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: auto; }
/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider, .l-time-controller .l-time-range-slider,
.l-time-controller .l-time-range-ticks { .l-time-controller .l-time-range-ticks {
overflow: visible; overflow: visible;
@ -2248,77 +2259,94 @@ label.checkbox.custom {
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 30, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 29, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder { .l-time-controller .l-time-range-inputs-holder {
height: 20px; } height: 33px;
/* line 33, ../../../../general/res/sass/controls/_time-controller.scss */ bottom: 46px;
.l-time-controller .l-time-range-inputs-holder .l-time-range-input { padding-top: 5px;
margin-right: 10px; } border-top: 1px solid rgba(153, 153, 153, 0.1); }
/* line 36, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 34, ../../../../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 .type-icon {
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-inputs-elem .ui-symbol.icon {
font-size: 11px; font-size: 11px;
width: 11px; } width: 11px; }
/* line 43, ../../../../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-slider,
.l-time-controller .l-time-range-ticks { .l-time-controller .l-time-range-ticks {
left: 125px; left: 125px;
right: 125px; } right: 125px; }
/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder { .l-time-controller .l-time-range-slider-holder {
height: 20px; } height: 20px;
/* line 52, ../../../../general/res/sass/controls/_time-controller.scss */ bottom: 23px; }
/* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-slider-holder .range-holder { .l-time-controller .l-time-range-slider-holder .range-holder {
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: none; background: none;
border: none; } border: none; }
/* line 60, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 67, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder { .l-time-controller .l-time-range-ticks-holder {
height: 10px; } height: 20px; }
/* 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 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 69, ../../../../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 {
border-top: 1px solid rgba(255, 255, 255, 0.2); }
/* line 71, ../../../../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 78, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
margin-left: 0; } margin-left: 0; }
/* line 72, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 81, ../../../../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 { .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); transform: translateX(-50%);
-webkit-transform: translateX(-50%);
color: #666666;
display: inline-block;
font-size: 0.7em; font-size: 0.7em;
position: absolute; position: absolute;
margin-left: -25px; top: 8px;
text-align: center; white-space: nowrap;
top: 10px;
width: 50px;
z-index: 2; } z-index: 2; }
/* line 86, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob { .l-time-controller .knob {
width: 5px; } width: 5px; }
/* line 88, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob .range-value { .l-time-controller .knob .range-value {
position: absolute; position: absolute;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
white-space: nowrap; } white-space: nowrap; }
/* line 100, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 103, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .knob:hover .range-value { .l-time-controller .knob:hover .range-value {
color: #0099cc; } color: #0099cc; }
/* line 105, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 108, ../../../../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 112, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 115, ../../../../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 120, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 126, ../../../../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;
@ -4923,7 +4951,7 @@ table {
/* line 89, ../../../../general/res/sass/plots/_plots-main.scss */ /* line 89, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-label, .gl-plot .gl-plot-label,
.gl-plot .l-plot-label { .gl-plot .l-plot-label {
color: #cccccc; color: #666666;
position: absolute; position: absolute;
text-align: center; } text-align: center; }
/* line 97, ../../../../general/res/sass/plots/_plots-main.scss */ /* line 97, ../../../../general/res/sass/plots/_plots-main.scss */

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

@ -21,10 +21,11 @@ $colorBtnIcon: $colorKey;
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%; $contrastInvokeMenuPercent: 20%;
$sliderColorBase: $colorKey; $sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.1);
$sliderColorRange: rgba($sliderColorBase, 0.3); $sliderColorRange: rgba($sliderColorBase, 0.3);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5); $sliderColorRangeHov: rgba($sliderColorBase, 0.5);
$sliderColorKnob: $sliderColorRange; $sliderColorKnob: $sliderColorRange;
$sliderColorKnobHov: $sliderColorRangeHov; $sliderColorKnobHov: $sliderColorBase;
$sliderKnobW: 5px; $sliderKnobW: 5px;
// General Colors // General Colors
@ -40,6 +41,7 @@ $colorFormSectionHeader: rgba(#000, 0.2);
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg; $colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%); $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
$colorTick: rgba(white, 0.2);
// Menu colors // Menu colors
$colorMenuBg: pullForward($colorBodyBg, 23%); $colorMenuBg: pullForward($colorBodyBg, 23%);
@ -112,9 +114,10 @@ $colorTabHeaderBorder: $colorBodyBg;
// Plot // Plot
$colorPlotBg: rgba(black, 0.1); $colorPlotBg: rgba(black, 0.1);
$colorPlotFg: $colorBodyFg; $colorPlotFg: $colorBodyFg;
$colorPlotHash: rgba(white, 0.2); $colorPlotHash: $colorTick;
$stylePlotHash: dashed; $stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder; $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree // Tree
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;

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

File diff suppressed because it is too large Load Diff

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

@ -12,7 +12,7 @@ $basicCr: 4px;
$controlCr: $basicCr; $controlCr: $basicCr;
$smallCr: 3px; $smallCr: 3px;
// Buttons // Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnFg: #fff; $colorBtnFg: #fff;
$colorBtnMajorBg: $colorKey; $colorBtnMajorBg: $colorKey;
@ -20,6 +20,13 @@ $colorBtnMajorFg: $colorKeyFg;
$colorBtnIcon: #eee; $colorBtnIcon: #eee;
$colorInvokeMenu: #000; $colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 40%; $contrastInvokeMenuPercent: 40%;
$sliderColorBase: $colorKey;
$sliderColorRangeHolder: rgba(black, 0.07);
$sliderColorRange: rgba($sliderColorBase, 0.3);
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
$sliderColorKnob: $sliderColorRange;
$sliderColorKnobHov: $sliderColorBase;
$sliderKnobW: 5px;
// General Colors // General Colors
$colorAlt1: #ff6600; $colorAlt1: #ff6600;
@ -32,6 +39,7 @@ $colorGridLines: rgba(#000, 0.05);
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$colorObjHdrTxt: $colorBodyFg; $colorObjHdrTxt: $colorBodyFg;
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%); $colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
$colorTick: rgba(black, 0.2);
// Menu colors // Menu colors
$colorMenuBg: pushBack($colorBodyBg, 10%); $colorMenuBg: pushBack($colorBodyBg, 10%);
@ -104,9 +112,10 @@ $colorTabHeaderBorder: $colorBodyBg;
// Plot // Plot
$colorPlotBg: rgba(black, 0.05); $colorPlotBg: rgba(black, 0.05);
$colorPlotFg: $colorBodyFg; $colorPlotFg: $colorBodyFg;
$colorPlotHash: rgba(black, 0.2); $colorPlotHash: $colorTick;
$stylePlotHash: dashed; $stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder; $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree // Tree
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;