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

[Frontend] IN-PROGRESS Theme changes continuing

Browse Source 
open #95
Splitter styles updated;
Tree styles updated;
This commit is contained in:
Charles Hacskaylo
2015-09-04 16:39:16 -07:00
parent 37c34c668c
commit ac41ed7d64
13 changed files with 265 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -5,6 +5,7 @@
*.DS_Store *.DS_Store
*.sass-cache *.sass-cache
*COMPILE.css
# Intellij project configuration files # Intellij project configuration files
*.idea *.idea

9
example/imagery/src/ImageTelemetry.js
View File

@@ -31,10 +31,11 @@ define(
var firstObservedTime = Date.now(), var firstObservedTime = Date.now(),
images = [ images = [
"http://www.nasa.gov/393811main_Palomar_ao_bouchez_10s_after_impact_4x3_946-710.png", "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/01/comet_on_16_january_2015_navcam/15205508-1-eng-GB/Comet_on_16_January_2015_NavCam.jpg",
"http://www.nasa.gov/393821main_Palomar_ao_bouchez_15s_after_impact_4x3_946-710.png", "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_7_august_a/14721226-1-eng-GB/Comet_on_7_August_a_node_full_image_2.jpg",
"http://www.nasa.gov/images/content/393801main_CfhtVeillet2_4x3_516-387.jpg", "http://http://resources0.news.com.au/images/2014/10/26/1227102/619948-e62d0d0c-5cb3-11e4-9c68-d403f5dcc36d.jpg",
"http://www.nasa.gov/images/content/392790main_1024_768_GeminiNorth_NightBeforeImpact_946-710.jpg" "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_16_august_a/14735866-1-eng-GB/Comet_on_16_August_a_node_full_image_2.jpg",
"http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/08/year_at_a_comet_may_2015/15549436-1-eng-GB/Year_at_a_comet_May_2015_node_full_image_2.jpg"
].map(function (url, index) { ].map(function (url, index) {
return { return {
timestamp: firstObservedTime + 1000 * index, timestamp: firstObservedTime + 1000 * index,

1
platform/commonUI/general/res/sass/COMPILE.scss Normal file
View File

@@ -0,0 +1 @@
// This file exists only to force compass to compile in this directory with watch .

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

@@ -205,8 +205,8 @@
} }
} }
&:not(.disabled):hover:before { &:not(.disabled):hover:before {
@include trans-prop-nice("border-color", 50ms); @include trans-prop-nice("border-color", 25ms);
border-color: $colorKey; border-color: $colorGrippyInteriorHover;
} }
} }
@@ -237,12 +237,22 @@
border: 1px solid $c; border: 1px solid $c;
} }
@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
@if $sVal != 'none' {
@include box-shadow($sVal);
}
}
@mixin boxShdwSubtle($sVal: 0.2) { @mixin boxShdwSubtle($sVal: 0.2) {
@include box-shadow(rgba(black, $sVal) 0 1px 2px); @if $sVal != 'none' {
@include box-shadow(rgba(black, $sVal) 0 1px 2px);
}
} }
@mixin boxShdwLarge($sVal: 0.7) { @mixin boxShdwLarge($sVal: 0.7) {
@include box-shadow(rgba(black, $sVal) 0 3px 10px); @if $sVal != 'none' {
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
}
} }
@mixin outerGlow($color: #fff, $sVal: 0.3) { @mixin outerGlow($color: #fff, $sVal: 0.3) {
@@ -258,33 +268,41 @@
} }
@mixin txtShdwSubtle($sVal: 0.1) { @mixin txtShdwSubtle($sVal: 0.1) {
@include text-shadow(rgba(black, $sVal) 0 1px 2px); @if $sVal != 'none' {
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
}
} }
@mixin txtShdwLarge($sVal: 0.7) { @mixin txtShdwLarge($sVal: 0.7) {
@include text-shadow(rgba(black, $sVal) 0 3px 7px); @include text-shadow(rgba(black, $sVal) 0 3px 7px);
} }
@function pullForward($c: $colorBodyBg, $p: 20%) { @function pullForward($c, $p: 20%) {
// For dark interfaces, lighter things come forward // For dark interfaces, lighter things come forward
@return lighten($c, $p); @return lighten($c, $p);
} }
@function pushBack($c: $colorBodyBg, $p: 20%) { @function pushBack($c, $p: 20%) {
// For dark interfaces, darker things move back // For dark interfaces, darker things move back
@return darken($c, $p); @return darken($c, $p);
} }
@function percentToDecimal($p) {
@return $p / 100%;
}
@function decimalToPercent($d) {
@return percentage($d);
}
/*********************************************** FORM ELEMENTS */ /*********************************************** FORM ELEMENTS */
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) { @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none); @include appearance(none);
@include border-radius($controlCr); @include border-radius($controlCr);
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px); @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
// background: lighten($bg, 20%);
background: rgba(#fff, 0.1); background: rgba(#fff, 0.1);
border: none; border: none;
//border-bottom: 1px solid rgba(#fff, 0.1);
color: lighten($fg, 20%); color: lighten($fg, 20%);
outline: none; outline: none;
&.error { &.error {
@@ -308,16 +326,6 @@
border-bottom: 1px solid lighten($bg, 10%); border-bottom: 1px solid lighten($bg, 10%);
} }
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor;
color: $c;
&:hover {
color: lighten($c, $ltGamma);
}
}
*/
@mixin menuUlReset() { @mixin menuUlReset() {
margin: 0; margin: 0;
padding: 0; padding: 0;

10
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@@ -37,8 +37,8 @@
} }
&:after { &:after {
// Adds the downward facing arrow element // Adds the downward facing 'context available / invoke menu' arrow element
color: rgba($colorInvokeMenu, 0.2); color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
content: '\76'; content: '\76';
display: inline-block; display: inline-block;
font-family: 'symbolsfont'; font-family: 'symbolsfont';
@@ -50,9 +50,9 @@
.title-label { .title-label {
font-size: 1rem; font-size: 1rem;
} }
&:after { //&:after {
color: rgba($colorInvokeMenu, 0.5); // color: rgba($colorInvokeMenu, 0.5);
} //}
} }
.menu { .menu {

24
platform/commonUI/general/res/sass/helpers/_splitter.scss
View File

@@ -20,18 +20,20 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.split-layout { .split-layout {
$b: lighten($colorBodyBg, 5%); $b: pullForward($colorBodyBg, $contrastRatioPercent);
$splitterD: 5px; $splitterD: 5px;
// TEMP VAlS - this will need to be redone when we implement a draggable splitter
$splitL: 85%;
$splitT: 70%;
.splitter { .splitter {
background-color: $b; background-color: $b;
@include box-shadow(rgba(black, 0.4) 0 0 3px); @include boxShdw($splitterShdw);
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
//@if $colorSplitterHover != 'none' {
&:hover {
background-color: $colorSplitterHover;
}
//}
} }
&.horizontal { &.horizontal {
// Slides vertically up and down, splitting the element horizontally // Slides vertically up and down, splitting the element horizontally
@@ -41,21 +43,17 @@
right: 0; right: 0;
&.top { &.top {
bottom: auto; bottom: auto;
// height: $splitT;
} }
&.bottom { &.bottom {
top: auto; top: auto;
// height: 100% - $splitT;
} }
} }
>.splitter { >.splitter {
@include controlGrippy($b, horizontal); @include controlGrippy($colorSplitterInterior, horizontal);
cursor: row-resize; cursor: row-resize;
left: 0; right: 0; left: 0; right: 0;
width: auto; width: auto;
height: $splitterD; height: $splitterD;
// margin-top: ($splitterD + 2) * -1; // Controlled by splitter
// top: $splitT; // Controlled by splitter
} }
} }
&.vertical { &.vertical {
@@ -65,20 +63,16 @@
bottom: 0; bottom: 0;
&.left { &.left {
right: auto; right: auto;
// width: $splitL - 1%; // Controlled by splitter
} }
&.right { &.right {
left: auto; left: auto;
// width: 100% - $splitL; // Controlled by splitter
} }
} }
>.splitter { >.splitter {
@include controlGrippy($b, vertical); @include controlGrippy($colorBodyBg, vertical);
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
width: $splitterD; width: $splitterD;
// margin-left: ($splitterD + 2) * -1; // Controlled by splitter
// left: $splitL; // Controlled by splitter
} }
} }
} }

25
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@@ -22,6 +22,7 @@
ul.tree { ul.tree {
@include menuUlReset(); @include menuUlReset();
@include user-select(none);
li { li {
display: block; display: block;
position: relative; position: relative;
@@ -45,6 +46,7 @@ ul.tree {
position: relative; position: relative;
.view-control { .view-control {
color: $colorItemTreeVC;
display: inline-block; display: inline-block;
margin-left: $interiorMargin; margin-left: $interiorMargin;
font-size: 0.75em; font-size: 0.75em;
@@ -53,7 +55,7 @@ ul.tree {
// NOTE: [Mobile] Removed Hover on Mobile // NOTE: [Mobile] Removed Hover on Mobile
@include desktop { @include desktop {
&:hover { &:hover {
color: $colorItemTreeVCHover; color: $colorItemTreeVCHover !important;
} }
} }
} }
@@ -69,7 +71,7 @@ ul.tree {
.type-icon { .type-icon {
//@include absPosDefault(0, false); //@include absPosDefault(0, false);
$d: $treeTypeIconH; // 16px is crisp size $d: $treeTypeIconH; // 16px is crisp size
@include txtShdwSubtle(0.6); @include txtShdwSubtle($shdwItemTreeIcon);
font-size: $d; font-size: $d;
color: $colorItemTreeIcon; color: $colorItemTreeIcon;
left: $interiorMargin; left: $interiorMargin;
@@ -124,14 +126,13 @@ ul.tree {
} }
&.selected { &.selected {
$c: #fff; background: $colorItemTreeSelectedBg;
background: $colorKeySelectedBg; color: $colorItemTreeSelectedFg;
color: $c;
.view-control { .view-control {
color: $colorItemTreeIcon; color: $colorItemTreeSelectedVC;
} }
.label .type-icon { .label .type-icon {
color: #fff; //$colorItemTreeIconHover; color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
} }
} }
@@ -139,11 +140,11 @@ ul.tree {
// NOTE: [Mobile] Removed Hover on Mobile // NOTE: [Mobile] Removed Hover on Mobile
@include desktop { @include desktop {
&:hover { &:hover {
background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%); background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%); color: pullForward($colorBodyFg, 20%);
.context-trigger { //.context-trigger {
display: block; // display: block;
} //}
.icon { .icon {
color: $colorItemTreeIconHover; color: $colorItemTreeIconHover;
} }

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

@@ -20,7 +20,7 @@
* 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 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, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
font-size: 100%; font-size: 100%;
vertical-align: baseline; } 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 { html {
line-height: 1; } 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 { ol, ul {
list-style: none; } 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 { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } 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 { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } 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 { q, blockquote {
quotes: none; } 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 { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; } 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 { a img {
border: none; } 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 { article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; } display: block; }
@@ -98,15 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/*********************************************** FORM ELEMENTS */ /*********************************************** FORM ELEMENTS */
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor;
color: $c;
&:hover {
color: lighten($c, $ltGamma);
}
}
*/
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@@ -931,26 +922,29 @@ mct-container {
* 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 29, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 26, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter { .split-layout .splitter {
background-color: #404040; background-color: #454545;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 33, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:hover {
background-color: none; }
/* line 38, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal { .split-layout.horizontal {
overflow: hidden; } overflow: hidden; }
/* line 39, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 41, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane { .split-layout.horizontal .pane {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 42, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top { .split-layout.horizontal .pane.top {
bottom: auto; } bottom: auto; }
/* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom { .split-layout.horizontal .pane.bottom {
top: auto; } top: auto; }
/* line 51, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */
@@ -980,7 +974,7 @@ mct-container {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
border-top: 1px dotted #1a1a1a; border-top: 1px dotted #0d0d0d;
top: 2px; top: 2px;
left: 5px; left: 5px;
right: 5px; } right: 5px; }
@@ -990,26 +984,26 @@ mct-container {
-o-transition-property: "border-color"; -o-transition-property: "border-color";
-webkit-transition-property: "border-color"; -webkit-transition-property: "border-color";
transition-property: "border-color"; transition-property: "border-color";
-moz-transition-duration: 50ms; -moz-transition-duration: 25ms;
-o-transition-duration: 50ms; -o-transition-duration: 25ms;
-webkit-transition-duration: 50ms; -webkit-transition-duration: 25ms;
transition-duration: 50ms; transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-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;
border-color: #0099cc; } border-color: #0099cc; }
/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 61, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane { .split-layout.vertical .pane {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
/* line 66, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 64, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.left { .split-layout.vertical .pane.left {
right: auto; } right: auto; }
/* line 70, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 67, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.right { .split-layout.vertical .pane.right {
left: auto; } left: auto; }
/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
@@ -1034,7 +1028,7 @@ mct-container {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
border-left: 1px dotted #1a1a1a; border-left: 1px dotted #0d0d0d;
left: 2px; left: 2px;
bottom: 5px; bottom: 5px;
top: 5px; } top: 5px; }
@@ -1044,21 +1038,21 @@ mct-container {
-o-transition-property: "border-color"; -o-transition-property: "border-color";
-webkit-transition-property: "border-color"; -webkit-transition-property: "border-color";
transition-property: "border-color"; transition-property: "border-color";
-moz-transition-duration: 50ms; -moz-transition-duration: 25ms;
-o-transition-duration: 50ms; -o-transition-duration: 25ms;
-webkit-transition-duration: 50ms; -webkit-transition-duration: 25ms;
transition-duration: 50ms; transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-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;
border-color: #0099cc; } border-color: #0099cc; }
/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 80, ../../../../general/res/sass/helpers/_splitter.scss */
.browse-area .splitter { .browse-area .splitter {
top: 34px; } top: 34px; }
/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 84, ../../../../general/res/sass/helpers/_splitter.scss */
.edit-area .splitter { .edit-area .splitter {
top: 0; } top: 0; }
@@ -1998,10 +1992,10 @@ label.checkbox.custom {
-o-transition-property: "border-color"; -o-transition-property: "border-color";
-webkit-transition-property: "border-color"; -webkit-transition-property: "border-color";
transition-property: "border-color"; transition-property: "border-color";
-moz-transition-duration: 50ms; -moz-transition-duration: 25ms;
-o-transition-duration: 50ms; -o-transition-duration: 25ms;
-webkit-transition-duration: 50ms; -webkit-transition-duration: 25ms;
transition-duration: 50ms; transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-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;
@@ -2149,9 +2143,6 @@ label.checkbox.custom {
/* line 50, ../../../../general/res/sass/controls/_menus.scss */ /* line 50, ../../../../general/res/sass/controls/_menus.scss */
.s-menu.create-btn .title-label { .s-menu.create-btn .title-label {
font-size: 1rem; } font-size: 1rem; }
/* line 53, ../../../../general/res/sass/controls/_menus.scss */
.s-menu.create-btn:after {
color: rgba(255, 255, 255, 0.5); }
/* line 58, ../../../../general/res/sass/controls/_menus.scss */ /* line 58, ../../../../general/res/sass/controls/_menus.scss */
.s-menu .menu { .s-menu .menu {
left: 0; left: 0;
@@ -2197,7 +2188,7 @@ label.checkbox.custom {
.menu-element .menu ul { .menu-element .menu ul {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 324, ../../../../general/res/sass/_mixins.scss */ /* line 332, ../../../../general/res/sass/_mixins.scss */
.menu-element .menu ul li { .menu-element .menu ul li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@@ -2702,7 +2693,7 @@ label.form-control.checkbox input {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; } width: 100%; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
.edit-main textarea.error { .edit-main textarea.error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
@@ -2745,7 +2736,7 @@ input[type="text"] {
color: #cccccc; color: #cccccc;
outline: none; outline: none;
padding: 0 3px; } padding: 0 3px; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
input[type="text"].error { input[type="text"].error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 29, ../../../../general/res/sass/forms/_text-input.scss */ /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
@@ -2893,7 +2884,7 @@ input[type="text"] {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
padding: 5px; } padding: 5px; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
.channel-selector .treeview.error { .channel-selector .treeview.error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */ /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -3050,7 +3041,7 @@ span.req {
padding: 0 3px; padding: 0 3px;
background: #3b3b3b; background: #3b3b3b;
border-bottom: 1px solid #4d4d4d; } border-bottom: 1px solid #4d4d4d; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
.filter input.filter.error, .filter input.filter.error,
.filter input.t-filter-input.error, .filter input.t-filter-input.error,
.t-filter input.filter.error, .t-filter input.filter.error,
@@ -4166,7 +4157,7 @@ span.req {
ul.tree { ul.tree {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 324, ../../../../general/res/sass/_mixins.scss */ /* line 332, ../../../../general/res/sass/_mixins.scss */
ul.tree li { ul.tree li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@@ -4201,16 +4192,17 @@ ul.tree {
/* line 47, ../../../../general/res/sass/tree/_tree.scss */ /* line 47, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .view-control, .tree-item .view-control,
.search-result-item .view-control { .search-result-item .view-control {
color: rgba(255, 255, 255, 0.3);
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
font-size: 0.75em; font-size: 0.75em;
width: 10px; } width: 10px; }
@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 55, ../../../../general/res/sass/tree/_tree.scss */ /* line 56, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .view-control:hover, .tree-item .view-control:hover,
.search-result-item .view-control:hover { .search-result-item .view-control:hover {
color: #ffc700; } } color: #ffc700; } }
/* line 61, ../../../../general/res/sass/tree/_tree.scss */ /* line 62, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label, .tree-item .label,
.search-result-item .label { .search-result-item .label {
display: block; display: block;
@@ -4223,7 +4215,7 @@ ul.tree {
width: auto; width: auto;
height: auto; height: auto;
line-height: 1.5rem; } line-height: 1.5rem; }
/* line 69, ../../../../general/res/sass/tree/_tree.scss */ /* line 70, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon, .tree-item .label .type-icon,
.search-result-item .label .type-icon { .search-result-item .label .type-icon {
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
@@ -4237,14 +4229,14 @@ ul.tree {
line-height: 100%; line-height: 100%;
right: auto; right: auto;
width: 16px; } width: 16px; }
/* line 82, ../../../../general/res/sass/tree/_tree.scss */ /* line 83, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
.search-result-item .label .type-icon .icon.l-icon-link, .search-result-item .label .type-icon .icon.l-icon-link,
.search-result-item .label .type-icon .icon.l-icon-alert { .search-result-item .label .type-icon .icon.l-icon-alert {
text-shadow: black 0 1px 2px; text-shadow: black 0 1px 2px;
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
/* line 88, ../../../../general/res/sass/tree/_tree.scss */ /* line 89, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .icon.l-icon-alert,
.search-result-item .label .type-icon .icon.l-icon-alert { .search-result-item .label .type-icon .icon.l-icon-alert {
color: #ff3c00; color: #ff3c00;
@@ -4254,7 +4246,7 @@ ul.tree {
width: 8px; width: 8px;
top: 1px; top: 1px;
right: -2px; } right: -2px; }
/* line 94, ../../../../general/res/sass/tree/_tree.scss */ /* line 95, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-link,
.search-result-item .label .type-icon .icon.l-icon-link { .search-result-item .label .type-icon .icon.l-icon-link {
color: #49dedb; color: #49dedb;
@@ -4264,7 +4256,7 @@ ul.tree {
width: 8px; width: 8px;
left: -3px; left: -3px;
bottom: 0px; } bottom: 0px; }
/* line 102, ../../../../general/res/sass/tree/_tree.scss */ /* line 103, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .title-label, .tree-item .label .title-label,
.search-result-item .label .title-label { .search-result-item .label .title-label {
overflow: hidden; overflow: hidden;
@@ -4280,67 +4272,59 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 113, ../../../../general/res/sass/tree/_tree.scss */ /* line 114, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading, .tree-item.loading,
.search-result-item.loading { .search-result-item.loading {
pointer-events: none; } pointer-events: none; }
/* line 115, ../../../../general/res/sass/tree/_tree.scss */ /* line 116, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading .label, .tree-item.loading .label,
.search-result-item.loading .label { .search-result-item.loading .label {
opacity: 0.5; } opacity: 0.5; }
/* line 117, ../../../../general/res/sass/tree/_tree.scss */ /* line 118, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading .label .title-label, .tree-item.loading .label .title-label,
.search-result-item.loading .label .title-label { .search-result-item.loading .label .title-label {
font-style: italic; } font-style: italic; }
/* line 121, ../../../../general/res/sass/tree/_tree.scss */ /* line 122, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading .wait-spinner, .tree-item.loading .wait-spinner,
.search-result-item.loading .wait-spinner { .search-result-item.loading .wait-spinner {
margin-left: 14px; } margin-left: 14px; }
/* line 126, ../../../../general/res/sass/tree/_tree.scss */ /* line 127, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected, .tree-item.selected,
.search-result-item.selected { .search-result-item.selected {
background: #005177; background: #006080;
color: #fff; } color: #cccccc; }
/* line 130, ../../../../general/res/sass/tree/_tree.scss */ /* line 130, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .view-control,
.search-result-item.selected .view-control {
color: #0099cc; }
/* line 133, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .label .type-icon, .tree-item.selected .label .type-icon,
.search-result-item.selected .label .type-icon { .search-result-item.selected .label .type-icon {
color: #fff; } color: #cccccc; }
@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 141, ../../../../general/res/sass/tree/_tree.scss */ /* line 138, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover, .tree-item:not(.selected):hover,
.search-result-item:not(.selected):hover { .search-result-item:not(.selected):hover {
background: rgba(255, 255, 255, 0.1); background: rgba(153, 153, 153, 0.1);
color: #cccccc; } color: #cccccc; }
/* line 144, ../../../../general/res/sass/tree/_tree.scss */ /* line 144, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover .context-trigger,
.search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 147, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover .icon, .tree-item:not(.selected):hover .icon,
.search-result-item:not(.selected):hover .icon { .search-result-item:not(.selected):hover .icon {
color: #33ccff; } } color: #33ccff; } }
/* line 154, ../../../../general/res/sass/tree/_tree.scss */ /* line 151, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.loading), .tree-item:not(.loading),
.search-result-item:not(.loading) { .search-result-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 158, ../../../../general/res/sass/tree/_tree.scss */ /* line 155, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger, .tree-item .context-trigger,
.search-result-item .context-trigger { .search-result-item .context-trigger {
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 164, ../../../../general/res/sass/tree/_tree.scss */ /* line 161, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger .invoke-menu, .tree-item .context-trigger .invoke-menu,
.search-result-item .context-trigger .invoke-menu { .search-result-item .context-trigger .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: 0.9rem; height: 0.9rem;
line-height: 0.9rem; } line-height: 0.9rem; }
/* line 173, ../../../../general/res/sass/tree/_tree.scss */ /* line 170, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label { .tree-item .label {
left: 15px; } left: 15px; }

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

@@ -6,11 +6,12 @@ $colorKey: #0099cc;
$colorKeySelectedBg: #005177; $colorKeySelectedBg: #005177;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$contrastRatio: 7%; $contrastRatioPercent: 7%;
$colorBtnBg: pullForward($colorBodyBg, $contrastRatio); $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnFg: $colorBodyFg; $colorBtnFg: $colorBodyFg;
$colorBtnIcon: $colorKey; $colorBtnIcon: $colorKey;
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%;
$colorAlt1: #ffc700; $colorAlt1: #ffc700;
$colorAlert: #ff3c00; $colorAlert: #ff3c00;
@@ -47,7 +48,7 @@ $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%); $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
// Overlay // Overlay
$colorOvrBlocker: rgba(black, 0.7); $colorOvrBlocker: rgba(black, 0.7);
$colorOvrBg: $colorBodyBg; $colorOvrBg: pullForward($colorBodyBg, 10%);
$colorOvrFg: $colorBodyFg; $colorOvrFg: $colorBodyFg;
// Items // Items
$colorItemBase: lighten($colorBodyBg, 5%); $colorItemBase: lighten($colorBodyBg, 5%);
@@ -63,6 +64,17 @@ $tabularColorHeaderBorder: $colorBodyBg;
// Tree // Tree
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
$colorItemTreeVC: rgba(#fff, 0.3);
$colorItemTreeSelectedVC: $colorItemTreeVC;
$colorItemTreeVCHover: $colorAlt1; $colorItemTreeVCHover: $colorAlt1;
$shdwItemTreeIcon: 0.6;
// Scrollbar // Scrollbar
$scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarTrackColorBg: rgba(#000, 0.4);
// Splitter
$splitterShdw: rgba(black, 0.4) 0 0 3px;
$colorSplitterInterior: $colorBodyBg;
$colorSplitterHover: none;
$colorGrippyInteriorHover: $colorKey;

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

@@ -20,7 +20,7 @@
* 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 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, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
font-size: 100%; font-size: 100%;
vertical-align: baseline; } 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 { html {
line-height: 1; } 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 { ol, ul {
list-style: none; } 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 { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } 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 { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } 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 { q, blockquote {
quotes: none; } 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 { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; } 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 { a img {
border: none; } 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 { article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; } display: block; }
@@ -98,15 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/*********************************************** FORM ELEMENTS */ /*********************************************** FORM ELEMENTS */
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor;
color: $c;
&:hover {
color: lighten($c, $ltGamma);
}
}
*/
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@@ -931,26 +922,26 @@ mct-container {
* 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 29, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 26, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter { .split-layout .splitter {
background-color: white; background-color: #b3b3b3;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 33, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:hover {
background-color: #0099cc; }
/* line 38, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal { .split-layout.horizontal {
overflow: hidden; } overflow: hidden; }
/* line 39, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 41, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane { .split-layout.horizontal .pane {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 42, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top { .split-layout.horizontal .pane.top {
bottom: auto; } bottom: auto; }
/* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom { .split-layout.horizontal .pane.bottom {
top: auto; } top: auto; }
/* line 51, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */
@@ -990,26 +981,26 @@ mct-container {
-o-transition-property: "border-color"; -o-transition-property: "border-color";
-webkit-transition-property: "border-color"; -webkit-transition-property: "border-color";
transition-property: "border-color"; transition-property: "border-color";
-moz-transition-duration: 50ms; -moz-transition-duration: 25ms;
-o-transition-duration: 50ms; -o-transition-duration: 25ms;
-webkit-transition-duration: 50ms; -webkit-transition-duration: 25ms;
transition-duration: 50ms; transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-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;
border-color: #0099cc; } border-color: #fff; }
/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 61, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane { .split-layout.vertical .pane {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
/* line 66, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 64, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.left { .split-layout.vertical .pane.left {
right: auto; } right: auto; }
/* line 70, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 67, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.right { .split-layout.vertical .pane.right {
left: auto; } left: auto; }
/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
@@ -1044,21 +1035,21 @@ mct-container {
-o-transition-property: "border-color"; -o-transition-property: "border-color";
-webkit-transition-property: "border-color"; -webkit-transition-property: "border-color";
transition-property: "border-color"; transition-property: "border-color";
-moz-transition-duration: 50ms; -moz-transition-duration: 25ms;
-o-transition-duration: 50ms; -o-transition-duration: 25ms;
-webkit-transition-duration: 50ms; -webkit-transition-duration: 25ms;
transition-duration: 50ms; transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-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;
border-color: #0099cc; } border-color: #fff; }
/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 80, ../../../../general/res/sass/helpers/_splitter.scss */
.browse-area .splitter { .browse-area .splitter {
top: 34px; } top: 34px; }
/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 84, ../../../../general/res/sass/helpers/_splitter.scss */
.edit-area .splitter { .edit-area .splitter {
top: 0; } top: 0; }
@@ -1271,7 +1262,7 @@ mct-container {
color: gray; } color: gray; }
/* line 25, ../../../../general/res/sass/controls/_breadcrumb.scss */ /* line 25, ../../../../general/res/sass/controls/_breadcrumb.scss */
.l-breadcrumb .l-breadcrumb-item a:hover .icon { .l-breadcrumb .l-breadcrumb-item a:hover .icon {
color: #33ccff; } color: #0099cc; }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -1362,7 +1353,7 @@ mct-container {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background-color: #bfbfbf; background-color: #b3b3b3;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
@@ -1958,15 +1949,15 @@ label.checkbox.custom {
-o-transition-property: "border-color"; -o-transition-property: "border-color";
-webkit-transition-property: "border-color"; -webkit-transition-property: "border-color";
transition-property: "border-color"; transition-property: "border-color";
-moz-transition-duration: 50ms; -moz-transition-duration: 25ms;
-o-transition-duration: 50ms; -o-transition-duration: 25ms;
-webkit-transition-duration: 50ms; -webkit-transition-duration: 25ms;
transition-duration: 50ms; transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out;
-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;
border-color: #0099cc; } border-color: #fff; }
/* line 319, ../../../../general/res/sass/controls/_controls.scss */ /* line 319, ../../../../general/res/sass/controls/_controls.scss */
.slider .knob:before { .slider .knob:before {
top: 1px; top: 1px;
@@ -2099,7 +2090,7 @@ label.checkbox.custom {
margin-left: 3px; } margin-left: 3px; }
/* line 39, ../../../../general/res/sass/controls/_menus.scss */ /* line 39, ../../../../general/res/sass/controls/_menus.scss */
.s-menu:after { .s-menu:after {
color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.5);
content: '\76'; content: '\76';
display: inline-block; display: inline-block;
font-family: 'symbolsfont'; font-family: 'symbolsfont';
@@ -2109,9 +2100,6 @@ label.checkbox.custom {
/* line 50, ../../../../general/res/sass/controls/_menus.scss */ /* line 50, ../../../../general/res/sass/controls/_menus.scss */
.s-menu.create-btn .title-label { .s-menu.create-btn .title-label {
font-size: 1rem; } font-size: 1rem; }
/* line 53, ../../../../general/res/sass/controls/_menus.scss */
.s-menu.create-btn:after {
color: rgba(255, 255, 255, 0.5); }
/* line 58, ../../../../general/res/sass/controls/_menus.scss */ /* line 58, ../../../../general/res/sass/controls/_menus.scss */
.s-menu .menu { .s-menu .menu {
left: 0; left: 0;
@@ -2147,7 +2135,7 @@ label.checkbox.custom {
.menu-element .menu ul { .menu-element .menu ul {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 324, ../../../../general/res/sass/_mixins.scss */ /* line 332, ../../../../general/res/sass/_mixins.scss */
.menu-element .menu ul li { .menu-element .menu ul li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@@ -2642,7 +2630,7 @@ label.form-control.checkbox input {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; } width: 100%; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
.edit-main textarea.error { .edit-main textarea.error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
@@ -2685,7 +2673,7 @@ input[type="text"] {
color: #999999; color: #999999;
outline: none; outline: none;
padding: 0 3px; } padding: 0 3px; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
input[type="text"].error { input[type="text"].error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 29, ../../../../general/res/sass/forms/_text-input.scss */ /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
@@ -2823,7 +2811,7 @@ input[type="text"] {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
padding: 5px; } padding: 5px; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
.channel-selector .treeview.error { .channel-selector .treeview.error {
background: rgba(255, 0, 0, 0.5); } background: rgba(255, 0, 0, 0.5); }
/* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */ /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2980,7 +2968,7 @@ span.req {
padding: 0 3px; padding: 0 3px;
background: white; background: white;
border-bottom: 1px solid white; } border-bottom: 1px solid white; }
/* line 290, ../../../../general/res/sass/_mixins.scss */ /* line 308, ../../../../general/res/sass/_mixins.scss */
.filter input.filter.error, .filter input.filter.error,
.filter input.t-filter-input.error, .filter input.t-filter-input.error,
.t-filter input.filter.error, .t-filter input.filter.error,
@@ -4069,21 +4057,25 @@ span.req {
/* line 23, ../../../../general/res/sass/tree/_tree.scss */ /* line 23, ../../../../general/res/sass/tree/_tree.scss */
ul.tree { ul.tree {
margin: 0; margin: 0;
padding: 0; } padding: 0;
/* line 324, ../../../../general/res/sass/_mixins.scss */ -moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 332, ../../../../general/res/sass/_mixins.scss */
ul.tree li { ul.tree li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 25, ../../../../general/res/sass/tree/_tree.scss */ /* line 26, ../../../../general/res/sass/tree/_tree.scss */
ul.tree li { ul.tree li {
display: block; display: block;
position: relative; } position: relative; }
/* line 29, ../../../../general/res/sass/tree/_tree.scss */ /* line 30, ../../../../general/res/sass/tree/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 15px; } margin-left: 15px; }
/* line 34, ../../../../general/res/sass/tree/_tree.scss */ /* line 35, ../../../../general/res/sass/tree/_tree.scss */
.tree-item, .tree-item,
.search-result-item { .search-result-item {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@@ -4102,19 +4094,20 @@ ul.tree {
line-height: 1.5rem; line-height: 1.5rem;
margin-bottom: 3px; margin-bottom: 3px;
position: relative; } position: relative; }
/* line 47, ../../../../general/res/sass/tree/_tree.scss */ /* line 48, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .view-control, .tree-item .view-control,
.search-result-item .view-control { .search-result-item .view-control {
color: #666;
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
font-size: 0.75em; font-size: 0.75em;
width: 10px; } width: 10px; }
@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 55, ../../../../general/res/sass/tree/_tree.scss */ /* line 57, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .view-control:hover, .tree-item .view-control:hover,
.search-result-item .view-control:hover { .search-result-item .view-control:hover {
color: #ffc700; } } color: #0099cc !important; } }
/* line 61, ../../../../general/res/sass/tree/_tree.scss */ /* line 63, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label, .tree-item .label,
.search-result-item .label { .search-result-item .label {
display: block; display: block;
@@ -4127,10 +4120,9 @@ ul.tree {
width: auto; width: auto;
height: auto; height: auto;
line-height: 1.5rem; } line-height: 1.5rem; }
/* line 69, ../../../../general/res/sass/tree/_tree.scss */ /* line 71, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon, .tree-item .label .type-icon,
.search-result-item .label .type-icon { .search-result-item .label .type-icon {
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
font-size: 16px; font-size: 16px;
color: #0099cc; color: #0099cc;
left: 5px; left: 5px;
@@ -4141,14 +4133,14 @@ ul.tree {
line-height: 100%; line-height: 100%;
right: auto; right: auto;
width: 16px; } width: 16px; }
/* line 82, ../../../../general/res/sass/tree/_tree.scss */ /* line 84, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
.search-result-item .label .type-icon .icon.l-icon-link, .search-result-item .label .type-icon .icon.l-icon-link,
.search-result-item .label .type-icon .icon.l-icon-alert { .search-result-item .label .type-icon .icon.l-icon-alert {
text-shadow: black 0 1px 2px; text-shadow: black 0 1px 2px;
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
/* line 88, ../../../../general/res/sass/tree/_tree.scss */ /* line 90, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .icon.l-icon-alert,
.search-result-item .label .type-icon .icon.l-icon-alert { .search-result-item .label .type-icon .icon.l-icon-alert {
color: #ff3c00; color: #ff3c00;
@@ -4158,7 +4150,7 @@ ul.tree {
width: 8px; width: 8px;
top: 1px; top: 1px;
right: -2px; } right: -2px; }
/* line 94, ../../../../general/res/sass/tree/_tree.scss */ /* line 96, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-link,
.search-result-item .label .type-icon .icon.l-icon-link { .search-result-item .label .type-icon .icon.l-icon-link {
color: #49dedb; color: #49dedb;
@@ -4168,7 +4160,7 @@ ul.tree {
width: 8px; width: 8px;
left: -3px; left: -3px;
bottom: 0px; } bottom: 0px; }
/* line 102, ../../../../general/res/sass/tree/_tree.scss */ /* line 104, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label .title-label, .tree-item .label .title-label,
.search-result-item .label .title-label { .search-result-item .label .title-label {
overflow: hidden; overflow: hidden;
@@ -4184,67 +4176,63 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 113, ../../../../general/res/sass/tree/_tree.scss */ /* line 115, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading, .tree-item.loading,
.search-result-item.loading { .search-result-item.loading {
pointer-events: none; } pointer-events: none; }
/* line 115, ../../../../general/res/sass/tree/_tree.scss */ /* line 117, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading .label, .tree-item.loading .label,
.search-result-item.loading .label { .search-result-item.loading .label {
opacity: 0.5; } opacity: 0.5; }
/* line 117, ../../../../general/res/sass/tree/_tree.scss */ /* line 119, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading .label .title-label, .tree-item.loading .label .title-label,
.search-result-item.loading .label .title-label { .search-result-item.loading .label .title-label {
font-style: italic; } font-style: italic; }
/* line 121, ../../../../general/res/sass/tree/_tree.scss */ /* line 123, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.loading .wait-spinner, .tree-item.loading .wait-spinner,
.search-result-item.loading .wait-spinner { .search-result-item.loading .wait-spinner {
margin-left: 14px; } margin-left: 14px; }
/* line 126, ../../../../general/res/sass/tree/_tree.scss */ /* line 128, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected, .tree-item.selected,
.search-result-item.selected { .search-result-item.selected {
background: #005177; background: #1ac6ff;
color: #fff; } color: #fff; }
/* line 130, ../../../../general/res/sass/tree/_tree.scss */ /* line 131, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .view-control, .tree-item.selected .view-control,
.search-result-item.selected .view-control { .search-result-item.selected .view-control {
color: #0099cc; } color: #fff; }
/* line 133, ../../../../general/res/sass/tree/_tree.scss */ /* line 134, ../../../../general/res/sass/tree/_tree.scss */
.tree-item.selected .label .type-icon, .tree-item.selected .label .type-icon,
.search-result-item.selected .label .type-icon { .search-result-item.selected .label .type-icon {
color: #fff; } color: #fff; }
@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 141, ../../../../general/res/sass/tree/_tree.scss */ /* line 142, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover, .tree-item:not(.selected):hover,
.search-result-item:not(.selected):hover { .search-result-item:not(.selected):hover {
background: rgba(255, 255, 255, 0.1); background: rgba(102, 102, 102, 0.1);
color: #999999; } color: #333333; }
/* line 144, ../../../../general/res/sass/tree/_tree.scss */ /* line 148, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover .context-trigger,
.search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 147, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.selected):hover .icon, .tree-item:not(.selected):hover .icon,
.search-result-item:not(.selected):hover .icon { .search-result-item:not(.selected):hover .icon {
color: #33ccff; } } color: #0099cc; } }
/* line 154, ../../../../general/res/sass/tree/_tree.scss */ /* line 155, ../../../../general/res/sass/tree/_tree.scss */
.tree-item:not(.loading), .tree-item:not(.loading),
.search-result-item:not(.loading) { .search-result-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 158, ../../../../general/res/sass/tree/_tree.scss */ /* line 159, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger, .tree-item .context-trigger,
.search-result-item .context-trigger { .search-result-item .context-trigger {
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 164, ../../../../general/res/sass/tree/_tree.scss */ /* line 165, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .context-trigger .invoke-menu, .tree-item .context-trigger .invoke-menu,
.search-result-item .context-trigger .invoke-menu { .search-result-item .context-trigger .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: 0.9rem; height: 0.9rem;
line-height: 0.9rem; } line-height: 0.9rem; }
/* line 173, ../../../../general/res/sass/tree/_tree.scss */ /* line 174, ../../../../general/res/sass/tree/_tree.scss */
.tree-item .label { .tree-item .label {
left: 15px; } left: 15px; }
@@ -5864,7 +5852,7 @@ table {
color: #fff; } color: #fff; }
/* line 135, ../../../../general/res/sass/features/_imagery.scss */ /* line 135, ../../../../general/res/sass/features/_imagery.scss */
.l-image-thumb-item.selected { .l-image-thumb-item.selected {
background: #005177; } background: #0099cc; }
/* line 137, ../../../../general/res/sass/features/_imagery.scss */ /* line 137, ../../../../general/res/sass/features/_imagery.scss */
.l-image-thumb-item.selected .l-date, .l-image-thumb-item.selected .l-date,
.l-image-thumb-item.selected .l-time { .l-image-thumb-item.selected .l-time {
@@ -5969,3 +5957,6 @@ table {
/* line 26, ../sass/_mixins.scss */ /* line 26, ../sass/_mixins.scss */
.s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon { .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
color: white; } color: white; }
/* line 6, ../sass/_controls.scss */
.s-btn.major .title-label, .major.s-menu .title-label, .overlay .bottom-bar .s-btn.major .title-label, .overlay .bottom-bar .major.s-menu .title-label {
text-transform: uppercase; }

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

@@ -3,14 +3,16 @@ $colorBodyBg: #fff;
$colorBodyFg: #666; $colorBodyFg: #666;
$colorFooterBg: #000; $colorFooterBg: #000;
$colorKey: #0099cc; $colorKey: #0099cc;
$colorKeySelectedBg: #005177; $colorKeySelectedBg: $colorKey;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$contrastRatioPercent: 30%;
$contrastRatio: 25%; // Buttons
$colorBtnBg: pullForward($colorBodyBg, $contrastRatio); $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnFg: $colorBodyBg; $colorBtnFg: $colorBodyBg; //pullForward($colorBodyFg, $contrastRatioPercent);
$colorBtnIcon: $colorBtnFg; $colorBtnIcon: $colorBtnFg;
$colorInvokeMenu: #fff; $colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 50%;
$colorAlt1: #ffc700; $colorAlt1: #ffc700;
$colorAlert: #ff3c00; $colorAlert: #ff3c00;
@@ -47,7 +49,7 @@ $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%); $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
// Overlay // Overlay
$colorOvrBlocker: rgba(black, 0.7); $colorOvrBlocker: rgba(black, 0.7);
$colorOvrBg: $colorBodyBg; $colorOvrBg: pullForward($colorBodyBg, 10%);
$colorOvrFg: $colorBodyFg; $colorOvrFg: $colorBodyFg;
// Items // Items
$colorItemBase: lighten($colorBodyBg, 5%); $colorItemBase: lighten($colorBodyBg, 5%);
@@ -62,7 +64,18 @@ $tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
$tabularColorHeaderBorder: $colorBodyBg; $tabularColorHeaderBorder: $colorBodyBg;
// Tree // Tree
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); $colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1; $colorItemTreeVCHover: $colorKey;
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeVC: $colorBodyFg;
$colorItemTreeSelectedVC: $colorBodyBg;
$shdwItemTreeIcon: none;
// Scrollbar // Scrollbar
$scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarTrackColorBg: rgba(#000, 0.4);
// Splitter
$splitterShdw: none;
$colorSplitterInterior: $colorBodyBg;
$colorSplitterHover: $colorKey;
$colorGrippyInteriorHover: $colorBodyBg;

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

@@ -1,7 +1,10 @@
.s-btn { .s-btn {
&.major { &.major {
$bg: $colorKey; $bg: $colorKey;
$fg: lighten($bg, 70%); $fg: lighten($bg, 70%);
@include btnSubtle($bg, $fg, $fg, 0); @include btnSubtle($bg, $fg, $fg, 0);
} .title-label {
text-transform: uppercase;
}
}
} }

8
platform/commonUI/themes/snow/res/sass/_mixins.scss
View File

@@ -1,7 +1,7 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatio: 20%) { @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatioPercent: 20%) {
$hovRatio: 5%; $hovRatio: 5%;
$bgBase: $bg; //pullForward($bg, $contrastRatio); $bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
$fgBase: $fg; //pushBack($bg, $contrastRatio); $fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
background-color: $bgBase; background-color: $bgBase;
@include border-radius($controlCr); @include border-radius($controlCr);
@@ -18,7 +18,7 @@
} }
} }
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatio: 20%) { @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatioPercent: 20%) {
// $ic: Icon color // $ic: Icon color
@include border-radius($controlCr); @include border-radius($controlCr);
@include containerSubtle($bg, $fg, true, 30%); @include containerSubtle($bg, $fg, true, 30%);