[Frontend] Refactoring Timeline glyphs, s-btn fixes

Fixes #1047 WIP: Timeline-related glyph refactoring; s-btn styles and hover color fixes
nasa · Jul 21, 2016 · a4111f3 · a4111f3
1 parent 883f999
commit a4111f3
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
@@ -316,8 +316,9 @@
   @if $bgHovColor != none {
       &:not(.disabled):hover {
           background: $bgHovColor; // was just background, and background-image before that
-          >.icon {
-              color: lighten($ic, $ltGamma);
+          >.icon,
+          &:before {
+              color: pullForward($ic, $ltGamma);
           }
       }
   }

diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -75,8 +75,8 @@
 .s-clickable-icon {
     // Clickable icon elements that have hover
     @extend .ui-symbol;
-    &:hover {
-        color: $colorKeyHov;
+    &.inactive:hover {
+        color: $colorBtnBgHov !important;
     }
 }
 

diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -22,9 +22,10 @@ $smallCr: 2px;
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: $colorBodyFg;
+$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnIcon: $colorKey;
+$colorBtnIcon: $colorBtnFg;
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 $shdwBtns: rgba(black, 0.2) 0 1px 2px;

diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -22,6 +22,7 @@ $smallCr: 3px;
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
 $colorBtnFg: #fff;
+$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: #eee;

diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss
@@ -306,7 +306,7 @@
                 color: $colorKey;
             }
             .t-toggle .inactive {
-                color: pullForward(rgba($colorBodyFg, 0.2));
+                color: $colorBtnBg;
             }
         }