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
Mostly about the overlay and forms;
Buttons, menus, selects tweaks continued;
Initial check and tweaks in mobile;
This commit is contained in:
Charles Hacskaylo
2015-09-09 15:55:12 -07:00
parent 86deec6364
commit 4db48afab0
21 changed files with 1295 additions and 1430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,53 @@
$basicCr: 4px;
$controlCr: $basicCr;
/************************** COLORS AND SHADING */
$colorBodyBg: #fff;
$colorBodyBg: #efefef;
$colorGenBg: #fff; // NEW
$colorBodyFg: #666;
$colorFooterBg: #000;
$colorKey: #0099cc;
$colorKeySelectedBg: $colorKey;
$colorKeyFg: #fff;
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
$contrastRatioPercent: 30%;
// Buttons
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnFg: $colorBodyBg; //pullForward($colorBodyFg, $contrastRatioPercent);
$colorBtnFg: #fff;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
$colorBtnIcon: $colorBtnFg;
$colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 50%;
$colorAlt1: #ffc700;
$colorAlt1: #ff6600;
$colorAlert: #ff3c00;
$colorIconLink: #49dedb;
$colorPausedBg: #c56f01;
$colorPausedFg: #fff;
$colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05);
$colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2);
$colorInvokeMenu: #fff;
// Menu colors
$colorMenuBg: lighten($colorBodyBg, 23%);
$colorMenuFg: lighten($colorMenuBg, 70%);
$colorMenuIc: lighten($colorKey, 17%);
$colorInteriorBorder: lighten($colorBodyBg, 10%);
$colorObjFrameBg: darken($colorBodyBg, 5%);
$colorMenuBg: pushBack($colorBodyBg, 10%);
$colorMenuFg: pullForward($colorMenuBg, 70%);
$colorMenuIc: $colorKey;
$colorMenuHov: pullForward($colorMenuBg, 10%);
$colorCreateMenuLgIcon: $colorKey;
$colorCreateMenuText: $colorBodyFg;
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
$shdwMenuText: none;
// Form colors
$colorCheck: $colorKey;
$colorFormRequired: #ffc700;
$colorFormRequired: $colorKey;
$colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormInvalid: #ff9900;
$colorFormInvalid: #ff2200;
$colorFormLines: rgba(#fff, 0.1); // MOVED
$colorFormSectionHeader: rgba(#000, 0.1);
$colorInputBg: $colorGenBg;
$colorInputFg: $colorBodyFg;
$colorFormText: pushBack($colorBodyFg, 10%);
// Limits and staleness colors
$colorLimitYellow: #9d7500;
$colorLimitRed: #aa0000;
@@ -48,9 +60,11 @@ $colorInfoBubbleBg: #ddd;
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
// Overlay
$colorOvrBlocker: rgba(black, 0.7);
$colorOvrBg: pullForward($colorBodyBg, 10%);
$colorOvrBlocker: rgba(black, 0.7);//
$colorOvrBg: $colorBodyBg;
$colorOvrFg: $colorBodyFg;
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
$colorOvrBtnFg: #fff;
// Items
$colorItemBg: $colorBtnBg; //pullForward($colorBodyBg, 15%);
$colorItemFg: $colorBtnFg; //lighten($colorItemBg, 20%);
@@ -78,9 +92,15 @@ $colorItemTreeVC: $colorBodyFg;
$colorItemTreeSelectedVC: $colorBodyBg;
$shdwItemTreeIcon: none;
// Scrollbar
$scrollbarTrackColorBg: rgba(#000, 0.4);
$scrollbarTrackSize: 10px;
$scrollbarTrackColorBg: rgba(#000, 0.5);
$scrollbarThumbColor: darken($colorBodyBg, 25%);//
$scrollbarThumbColorHov: $colorKey;
// Splitter
$splitterShdw: none;
$colorSplitterInterior: $colorBodyBg;
$colorSplitterHover: $colorKey;
$colorGrippyInteriorHover: $colorBodyBg;
$colorGrippyInteriorHover: $colorBodyBg;
/********************************* MOBILE */
$colorMobilePaneLeft: darken($colorBodyBg, 2%);

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

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

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

@@ -1,4 +1,4 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatioPercent: 20%) {
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
$hovRatio: 5%;
$bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
$fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
@@ -6,35 +6,22 @@
background-color: $bgBase;
@include border-radius($controlCr);
@include box-sizing(border-box);
//@include boxShdwSubtle();
//border: none;
//border-top: 1px solid lighten($gradC1, 2%);
display: inline-block;
@if $hover == true {
&:not(.disabled):hover {
background-color: $colorKey; //pullForward($bgBase, $hovRatio);
//color: pushBack($fgBase, $hovRatio);
}
}
}
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatioPercent: 20%) {
// $ic: Icon color
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
@include user-select(none);
@include border-radius($controlCr);
@include containerSubtle($bg, $fg, true, 30%);
@include containerSubtle($bg, $fg);
color: $ic;
.icon {
color: $ic;
}
/* &:not(.disabled) {
&:not(.paused) {
&:hover {
.icon {
color: pullForward($ic, $ltGamma);
}
}
}
}*/
@if $bgHov != none {
&:not(.disabled):hover {
background-color: $bgHov;
}
}
}
@function pullForward($c: $colorBodyBg, $p: 20%) {