[Refactor] WIP!

Really, really in progress at this point;
[Refactor] Refactor s-button class to use mixin
2018-03-28 16:56:04 -07:00 · 2018-03-28 16:23:46 -07:00 · 2018-03-23 20:22:47 -07:00
8 changed files with 226 additions and 169 deletions
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -19,7 +19,7 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@import "effects";
+//@import "effects";
@import "glyphs";
@import "animations";
@import "global";
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -283,12 +283,12 @@

 /*********************************************** CONTROLS, FORM ELEMENTS */

-@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	background-color: $bg;
-	//border-radius: $controlCr;
-	box-sizing: border-box;
-	color: $fg;
-}
+//@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
+//	background: $bg;
+//	//border-radius: $controlCr;
+//	//box-sizing: border-box;
+//	color: $fg;
+//}

@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
 	@include user-select(none);
@@ -311,11 +311,79 @@
 }

@mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
-    @include containerSubtle($bg, $fg);
+    @include containerSubtle($bg, $fg); // Varies per theme
    @include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
    text-shadow: $shdwItemText;
 }

+@mixin sButton(
+    $bg: $colorBtnBg,
+    $bgHov: $colorBtnBgHov,
+    $fg: $colorBtnFg,
+    $fgHov: $colorBtnFgHov,
+    $ic: $colorBtnIcon,
+    $icHov: $colorBtnIconHov,
+    $important: false) {
+    $baseRatio: 1.5;
+    $pad: $interiorMargin * $baseRatio;
+    $imp: '';
+    @if $important == true {
+        $imp: !important;
+    }
+    //@include user-select(none);
+    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
+    box-sizing: border-box;
+
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0.7rem;
+    text-decoration: none;
+    height: $btnStdH;
+    line-height: $btnStdH;
+    padding: 0 $pad;
+
+    &.lg {
+        font-size: 1rem;
+    }
+
+    &.sm {
+        padding: 0 $pad / $baseRatio;
+    }
+
+    &.vsm {
+        padding: 0 ($pad / $baseRatio) / 2;
+    }
+
+    &.major {
+        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
+    }
+
+    &.no-label {
+        .label, .title-label { display: none; }
+    }
+
+    &[disabled="true"] {
+        opacity: 0.3;
+    }
+
+    &.pause-play {
+        @extend .icon-pause;
+        &.paused {
+            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
+            @extend .icon-play;
+            &:before { @include pulse($dur: 1000ms); }
+        }
+    }
+
+    .icon {
+        font-size: 0.8rem;
+    }
+
+    .title-label {
+        vertical-align: top;
+    }
+}
+
@mixin input-base() {
 	@include appearance(none);
 	border-radius: $controlCr;
@@ -445,3 +513,42 @@
    color: rgba($colorTelemFresh, $a) !important;
    font-style: italic;
 }
+
+/********************************************* EFFECTS */
+@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes($animName) {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-direction(alternate);
+    @include animation-iteration-count($iteration);
+    @include animation-timing-function(ease-in-out);
+}
+
+.pulse {
+    @include pulse($animName: pulse, $dur: 750ms);
+}
+
+.pulse-subtle {
+    @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
+}
+
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include keyframes($animName) {
+        from { #{propName}: $propValStart; }
+        to { #{$propName}: $propValEnd; }
+    }
+    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
+}
+
+@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-delay($delay);
+    @include animation-fill-mode(both);
+    @include animation-direction($dir);
+    @include animation-iteration-count($count);
+    @include animation-timing-function(ease-in-out);
+}
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -19,62 +19,8 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-$baseRatio: 1.5;
-$pad: $interiorMargin * $baseRatio;
-
 .s-button {
-    @include user-select(none);
-    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 0.7rem;
-    text-decoration: none;
-    height: $btnStdH;
-    line-height: $btnStdH;
-    padding: 0 $pad;
-
-    &.labeled:before {
-        // Icon when it's included
-        margin-right: $interiorMarginSm;
-    }
-
-	&.lg {
-		font-size: 1rem;
-	}
-
-    &.sm {
-        padding: 0 $pad / $baseRatio;
-    }
-
-    &.vsm {
-        padding: 0 ($pad / $baseRatio) / 2;
-    }
-
-    &.major {
-        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
-    }
-
-    &.no-label {
-        .label, .title-label { display: none; }
-    }
-
-    &.pause-play {
-        @extend .icon-pause;
-        &.paused {
-            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
-            @extend .icon-play;
-            &:before { @include pulse($dur: 1000ms); }
-        }
-    }
-
-    .icon {
-        font-size: 0.8rem;
-    }
-
-    .title-label {
-        vertical-align: top;
-    }
+    @include sButton();
 }

 body.desktop .mini-tab-icon {
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -52,6 +52,9 @@ body.touch {
    }

    .selector-list .tree-item {
-        @include containerBase($bg: $colorMobileSelectListTreeItemBg);
+        background: $colorMobileSelectListTreeItemBg;
+        box-sizing: border-box;
+        color: $colorBodyFg;
    }
+
 }
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -20,16 +20,16 @@ $smallCr: 2px;
 $overlayCr: 11px;

 // Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
-$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
+$colorBtnBg: #454545;
+$colorBtnBgHov: #5e5e5e;
 $colorBtnFg: $colorBodyFg;
-$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
+$colorBtnFgHov: #b3b3b3;
 $colorBtnIcon: $colorBtnFg;
 $colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
-$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
+$colorBtnMajorBgHov: deepskyblue;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
+$colorBtnMajorFgHov: white;
 $colorClickIcon: $colorKey;
 $colorClickIconHov: $colorKeyHov;
 $colorToggleIcon: rgba($colorBodyFg, 0.5);
@@ -44,7 +44,7 @@ $sliderColorRangeHolder: rgba(black, 0.1);
 $sliderColorRange: rgba($sliderColorBase, 0.3);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.5);
 $sliderColorKnob: $sliderColorBase;
-$sliderColorKnobHov: pullForward($sliderColorKnob, $ltGamma);
+$sliderColorKnobHov: #33ccff;
 $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorKeyFg;
 $sliderKnobW: 15px;
@@ -69,17 +69,17 @@ $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
-$colorObjHdrIc: lighten($colorObjHdrTxt, 20%);
+$colorObjHdrIc: #cccccc;
 $colorTick: rgba(white, 0.2);
 $colorSelectableSelectedPrimary: $colorKey;
-$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
+$colorSelectableSelectedSecondary: #004d66;
 $colorSelectableHov: $colorSelectableSelectedSecondary;

 // Menu colors
-$colorMenuBg: pullForward($colorBodyBg, 23%);
-$colorMenuFg: pullForward($colorMenuBg, 70%);
-$colorMenuIc: pullForward($colorKey, 17%);
-$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
+$colorMenuBg: #6e6e6e;
+$colorMenuFg: white;
+$colorMenuIc: #24c8ff;
+$colorMenuHovBg: #878787;
 $colorMenuHovFg: #fff;
 $colorMenuHovIc: $colorMenuHovFg;
 $shdwMenu: none;
@@ -98,19 +98,19 @@ $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#fff, 0.1);
 $colorInputBg: rgba(#000, 0.1);
-$colorInputFg: pullForward($colorBodyFg, 20%);
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
+$colorInputFg: #cccccc;
+$colorInputPlaceholder: #666666;
 $colorFormText: rgba(#fff, 0.5);
-$colorInputIcon: pushBack($colorBodyFg, 15%);
-$colorFieldHint: pullForward($colorBodyFg, 20%);
+$colorInputIcon: #737373;
+$colorFieldHint: #cccccc;

 // Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 3%);
+$colorInspectorBg: #3b3b3b;
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 15%);
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorPropName: #737373;
+$colorInspectorPropVal: #bfbfbf;
 $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+$colorInspectorSectionHeaderFg: #a1a1a1;

 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
@@ -132,8 +132,8 @@ $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;

 // Limits, status and staleness colors
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
-$colorTelemStale: pushBack($colorBodyFg, 20%);
+$colorTelemFresh: #cccccc;
+$colorTelemStale: #666666;
 $styleTelemStale: italic;
 $colorLimitYellowBg: rgba($colorWarningLo, 0.3);
 $colorLimitYellowIc: $colorWarningLo;
@@ -143,23 +143,23 @@ $colorLimitRedIc: $colorWarningHi;
 // Bubble colors
 $colorInfoBubbleBg: #ddd;
 $colorInfoBubbleFg: #666;
-$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
-$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
+$colorThumbsBubbleFg: #b3b3b3;
+$colorThumbsBubbleBg: #4d4d4d;

 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: pullForward($colorBodyBg, 10%);
-$colorOvrFg: pullForward($colorBodyFg, 30%);
-$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
+$colorOvrBg: #4d4d4d;
+$colorOvrFg: #e6e6e6;
+$colorOvrBtnBg: gray;
 $colorOvrBtnFg: #fff;
-$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
+$colorFieldHintOverlay: #999999;
 $durLargeViewExpand: 250ms;

 // Items
-$colorItemBg: lighten($colorBodyBg, 5%);
-$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
-$colorItemFg: lighten($colorItemBg, 50%);
-$colorItemFgDetails: lighten($colorItemBg, 30%);
+$colorItemBg: #404040;
+$colorItemBgHov: #595959;
+$colorItemFg: #bfbfbf;
+$colorItemFgDetails: #8c8c8c;
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
@@ -167,9 +167,9 @@ $shdwItemText: rgba(black, 0.1) 0 1px 2px;
 $colorItemBgSelected: $colorKey;

 // Tabular
-$colorTabBorder: pullForward($colorBodyBg, 5%);
-$colorTabBodyBg: darken($colorBodyBg, 10%);
-$colorTabBodyFg: lighten($colorTabBodyBg, 40%);
+$colorTabBorder: #404040;
+$colorTabBodyBg: #1a1a1a;
+$colorTabBodyFg: gray;
 $colorTabHeaderBg: rgba(white, 0.1);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
@@ -180,22 +180,22 @@ $colorPlotFg: $colorBodyFg;
 $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$colorPlotLabelFg: #666666;
 $legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.1);

 // Tree
-$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
+$colorItemTreeHoverBg: #4d4d4d;
+$colorItemTreeHoverFg: #b3b3b3;
 $colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeIconHover: #33ccff;
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
-$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeSelectedBg: #006080;
+$colorItemTreeSelectedFg: #cccccc;
 $colorItemTreeEditingBg: #344154;
 $colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: $colorBodyFg;
-$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
+$colorItemTreeVCHover: #cccccc;
 $colorItemTreeSelectedVC: $colorItemTreeVC;
 $shdwItemTreeIcon: 0.6;

@@ -206,36 +206,36 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
 $scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
-$scrollbarThumbColor: pullForward($colorBodyBg, 10%);
-$scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
-$scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
-$scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
-$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%);
-$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
+$scrollbarThumbColor: #4d4d4d;
+$scrollbarThumbColorHov: #525252;
+$scrollbarThumbColorOverlay: #666666;
+$scrollbarThumbColorOverlayHov: #6b6b6b;
+$scrollbarThumbColorMenu: #a1a1a1;
+$scrollbarThumbColorMenuHov: #a6a6a6;

 // Splitter
 // All splitterD* values MUST both be either odd or even numbers
 $splitterD: 20px;
 $splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
 $splitterHandleD: 2px;
-$colorSplitterBaseBg: pullForward($colorBodyBg, 10%);
+$colorSplitterBaseBg: #4d4d4d;
 $colorSplitterBg: $colorSplitterBaseBg;
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $splitterEndCr: none;
-$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
+$colorSplitterHover: #666666;
 $colorSplitterActive: $colorKey;

 // Minitabs
 $uePaneMiniTabH: 24px;
 $uePaneMiniTabW: 8px;
 $colorMiniTabBg: $colorSplitterBg;
-$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
+$colorMiniTabFg: #333333;
 $colorMiniTabBgHov: $colorSplitterHover;
 $colorMiniTabFgHov: #fff;

 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 5%);
-$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
+$colorMobilePaneLeft: #262626;
+$colorMobilePaneLeftTreeItemBg: #2e2e2e;
 $colorMobileSelectListTreeItemBg: rgba(#fff, 0.05);

 // Datetime Picker
@@ -243,10 +243,10 @@ $colorCalCellHovBg: $colorKey;
 $colorCalCellHovFg: $colorKeyFg;
 $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
-$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
+$colorCalCellInMonthBg: #616161;

 // Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteFg: #bbbbbb;
 $colorPaletteSelected: #fff;
 $shdwPaletteFg: black 0 0 2px;
 $shdwPaletteSelected: inset 0 0 0 1px #000;
@@ -256,4 +256,4 @@ $colorAboutLink: #84b3ff;

 // Loading
 $colorLoadingFg: $colorAlt1;
-$colorLoadingBg: rgba($colorBodyFg, 0.2);
+$colorLoadingBg: rgba($colorBodyFg, 0.2);
--- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -1,6 +1,6 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
-	@include containerBase($bg, $fg);
-	@include background-image(linear-gradient(pullForward($bg, $gradRatio), $bg));
+    color: $fg;
+	@include background-image(linear-gradient(lighten($bg, $gradRatio), $bg));
 	@include boxShdw($shdwBtns);
 }

--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -20,8 +20,8 @@ $smallCr: 3px;
 $overlayCr: 11px;

 // Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
-$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
+$colorBtnBg: #969696;
+$colorBtnBgHov: #7d7d7d;
 $colorBtnFg: #fff;
 $colorBtnFgHov: $colorBtnFg;
 $colorBtnIcon: #eee;
@@ -29,7 +29,7 @@ $colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
+$colorBtnMajorFgHov: white;
 $colorClickIcon: $colorKey;
 $colorClickIconHov: $colorKeyHov;
 $colorToggleIcon: rgba($colorClickIcon, 0.5);
@@ -43,7 +43,7 @@ $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.07);
 $sliderColorRange: rgba($sliderColorBase, 0.2);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: pushBack($sliderColorBase, 20%);
+$sliderColorKnob: #33ccff;
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
 $sliderColorRangeValHovBg: $sliderColorRange;
 $sliderColorRangeValHovFg: $colorBodyFg;
@@ -69,17 +69,17 @@ $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
-$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
+$colorObjHdrIc: #b3b3b3;
 $colorTick: rgba(black, 0.2);
 $colorSelectableSelectedPrimary: $colorKey;
-$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
+$colorSelectableSelectedSecondary: #33ccff;
 $colorSelectableHov: $colorSelectableSelectedSecondary;

 // Menu colors
-$colorMenuBg: pushBack($colorBodyBg, 10%);
-$colorMenuFg: pullForward($colorMenuBg, 70%);
+$colorMenuBg: white;
+$colorMenuFg: #4d4d4d;
 $colorMenuIc: $colorKey;
-$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
+$colorMenuHovBg: #e6e6e6;
 $colorMenuHovFg: $colorMenuFg;
 $colorMenuHovIc: $colorMenuIc;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
@@ -99,18 +99,18 @@ $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
-$colorFormText: pushBack($colorBodyFg, 10%);
-$colorInputIcon: pushBack($colorBodyFg, 25%);
-$colorFieldHint: pullForward($colorBodyFg, 40%);
+$colorInputPlaceholder: #999999;
+$colorFormText: gray;
+$colorInputIcon: #a6a6a6;
+$colorFieldHint: black;

 // Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 5%);
+$colorInspectorBg: #efefef;
 $colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 20%);
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+$colorInspectorPropName: #999999;
+$colorInspectorPropVal: #404040;
+$colorInspectorSectionHeaderBg: #e3e3e3;
+$colorInspectorSectionHeaderFg: #898989;

 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #999;
@@ -132,8 +132,8 @@ $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;

 // Limits and staleness colors//
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
-$colorTelemStale: pushBack($colorBodyFg, 20%);
+$colorTelemFresh: #333333;
+$colorTelemStale: #999999;
 $styleTelemStale: italic;
 $colorLimitYellowBg: rgba(#ffaa00, 0.3);
 $colorLimitYellowIc: #ffaa00;
@@ -143,23 +143,23 @@ $colorLimitRedIc: red;
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
-$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
-$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
+$colorThumbsBubbleFg: #4d4d4d;
+$colorThumbsBubbleBg: #e3e3e3;

 // Overlay
-$colorOvrBlocker: rgba(black, 0.7);//
+$colorOvrBlocker: rgba(black, 0.7);
 $colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
-$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
+$colorOvrBtnBg: #969696;
 $colorOvrBtnFg: #fff;
-$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
+$colorFieldHintOverlay: #969696;
 $durLargeViewExpand: 250ms;

 // Items
 $colorItemBg: #ddd;
-$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
+$colorItemBgHov: #cbcbcb;
 $colorItemFg: $colorBodyFg;
-$colorItemFgDetails: pushBack($colorItemFg, 15%);
+$colorItemFgDetails: #8c8c8c;
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
@@ -167,11 +167,11 @@ $shdwItemText: none;
 $colorItemBgSelected: $colorKey;

 // Tabular
-$colorTabBorder: pullForward($colorBodyBg, 10%);
+$colorTabBorder: #e3e3e3;
 $colorTabBodyBg: $colorBodyBg;
-$colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
-$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
+$colorTabBodyFg: #333333;
+$colorTabHeaderBg: #e3e3e3;
+$colorTabHeaderFg: #333333;
 $colorTabHeaderBorder: $colorBodyBg;

 // Plot
@@ -180,17 +180,17 @@ $colorPlotFg: $colorBodyFg;
 $colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
+$colorPlotLabelFg: #999999;
 $legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);

 // Tree
-$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
+$colorItemTreeHoverBg: #e3e3e3;
+$colorItemTreeHoverFg: #4d4d4d;
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: $colorItemTreeIcon;
 $colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedBg: #1ac6ff;
 $colorItemTreeSelectedFg: $colorBodyBg;
 $colorItemTreeEditingBg: #caf1ff;
 $colorItemTreeEditingFg: $colorEditAreaFg;
@@ -206,12 +206,12 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
 $scrollbarTrackSize: 7px;
 $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
 $scrollbarTrackColorBg: rgba(#000, 0.2);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);
+$scrollbarThumbColor: #7d7d7d;
 $scrollbarThumbColorHov: $colorKey;
-$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
+$scrollbarThumbColorOverlay: #7d7d7d;
 $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
-$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
-$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
+$scrollbarThumbColorMenu: #e6e6e6;
+$scrollbarThumbColorMenuHov: #e0e0e0;

 // Splitter
 // All splitterD* values MUST both be either odd or even numbers
@@ -219,23 +219,23 @@ $splitterD: 16px;
 $splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
 $splitterHandleD: 2px;
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
+$colorSplitterBg: #d6d6d6;
 $splitterShdw: none;
 $splitterEndCr: none;
-$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
+$colorSplitterHover: #a3a3a3;
 $colorSplitterActive: $colorKey;

 // Minitabs
 $uePaneMiniTabH: 24px;
 $uePaneMiniTabW: 8px;
 $colorMiniTabBg: $colorSplitterBg;
-$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
+$colorMiniTabFg: #898989;
 $colorMiniTabBgHov: $colorSplitterHover;
 $colorMiniTabFgHov: #fff;

 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 2%);
-$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
+$colorMobilePaneLeft: #f7f7f7;
+$colorMobilePaneLeftTreeItemBg: #efefef;
 $colorMobileSelectListTreeItemBg: rgba(#000, 0.05);

 // Datetime Picker, Calendar
@@ -243,10 +243,10 @@ $colorCalCellHovBg: $colorKey;
 $colorCalCellHovFg: $colorKeyFg;
 $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
-$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
+$colorCalCellInMonthBg: #f2f2f2;

 // Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
+$colorPaletteFg: #b3b3b3;
 $colorPaletteSelected: #333;
 $shdwPaletteFg: none;
 $shdwPaletteSelected: inset 0 0 0 1px #fff;
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -1,5 +1,6 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
-	@include containerBase($bg, $fg);
+    background: $bg;
+    color: $fg;
 	@include boxShdw($shdwBtns);
 }
Author	SHA1	Message	Date
Charles Hacskaylo	feeb024ccc	[Refactor] WIP! Really, really in progress at this point;	2018-03-28 16:56:04 -07:00
Charles Hacskaylo	bd747db4bd	[Refactor] Refactor s-button class to use mixin Fixes #1947	2018-03-28 16:23:46 -07:00
Charles Hacskaylo	d519da65dd	[Frontend] Make theme constants more robust Fixes #1947 - Needed for better s-button classing; - Replace pullforward, pushback, lighten and darken function calls in theme _constants files	2018-03-23 20:22:47 -07:00