From af0c2e7827df59e41b82f727a77484fac873ed65 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 12 Jun 2015 10:00:51 -0700 Subject: [PATCH] [Fronted] Significant refactoring of mixins for containers and buttons WTD-839 Refactoring in advance of style mods to switcher when in frame; Cleanup of markup to remove 'icon' class from invoke-menu elements; --- .../commonUI/general/res/sass/_constants.scss | 6 +-- .../commonUI/general/res/sass/_icons.scss | 23 ++------- .../commonUI/general/res/sass/_mixins.scss | 47 ++++++++++++------- .../general/res/sass/controls/_buttons.scss | 6 +-- .../general/res/sass/controls/_controls.scss | 11 +++-- .../general/res/sass/items/_item.scss | 2 +- .../res/templates/controls/switcher.html | 4 +- .../features/plot/res/templates/plot.html | 2 +- .../forms/res/templates/controls/color.html | 2 +- .../res/templates/controls/menu-button.html | 2 +- 10 files changed, 56 insertions(+), 49 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 47b9a70493..f7f359feff 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -28,8 +28,8 @@ $bodyMargin: 10px; $interiorMargin: 5px; $interiorMarginLg: $interiorMargin * 2; $interiorMarginSm: 3px; -$basicCr: 3px; -$controlCr: $basicCr; +$basicCr: 2px; +$controlCr: 2px; $smallCr: 2px; $badgeW: 35px; @@ -119,7 +119,7 @@ $controlDisabledOpacity: 0.3; $formLabelW: 20%; $formInputH: 22px; $formRowCtrlsH: 14px; -$menuLineH: 1.5rem; +$menuLineH: 1.4rem; $scrollbarTrackSize: 10px; $scrollbarTrackColorBg: rgba(#000, 0.4); $btnStdH: 25px; diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index fda57e977d..5de9294efc 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -42,12 +42,6 @@ &.major { font-size: 1.65em; } - &:hover { - // color: lighten($c, $ltGamma); - .invoke-menu { - // color: lighten($colorBodyBg, $ltGamma * 2); - } - } } } @@ -56,28 +50,21 @@ } .invoke-menu { - @include invokeMenu($colorKey); + //@include invokeMenu(); // $colorKey + text-shadow: none; display: inline-block; - font-size: 1rem; + font-size: 0.8rem; vertical-align: middle; } .btn-menu .invoke-menu, .icon.major .invoke-menu { - margin-left: $interiorMargin; -} - -.icon-buttons-main .invoke-menu { - @include invokeMenu(lighten($colorBodyBg, $ltGamma)); -} - -.menu-element .invoke-menu { - + margin-left: $interiorMarginSm; } .object-header .type-icon { color: $colorKey; - margin-right: $interiorMargin; + margin-right: $interiorMarginSm; } .menu .type-icon, diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 414437d2d3..8fe4f731c0 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -131,20 +131,35 @@ } @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) { - @include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%))); + $ltnRatio: 7%; + $gradRatio: 5%; + $hovRatio: 7%; + $bgBase: lighten($bg, $ltnRatio); + $fgBase: lighten($fg, $ltnRatio); + $gradC1: lighten($bgBase, $gradRatio); + $gradC2: $bgBase; + $cInvokeBase: lighten($gradC1, $ltnRatio*2); + + @include background-image(linear-gradient($gradC1, $gradC2)); @include border-radius($controlCr); @include box-sizing(border-box); -// @include box-shadow(rgba(black, 0.3) 0 1px 2px); @include boxShdwSubtle(); border: none; - border-top: 1px solid lighten($bg, 20%); + border-top: 1px solid lighten($gradC1, 2%); color: $fg; display: inline-block; @if $hover == true { - &:hover { - @include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%))); + &:not(.disabled):hover { + @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio))); + color: lighten($fgBase, $hovRatio); + &.btn-menu .invoke-menu { + color: lighten($cInvokeBase, $hovRatio); + } } } + &.btn-menu .invoke-menu { + color: $cInvokeBase; + } } @mixin sliderTrack($bg: $scrollbarTrackColorBg) { @@ -185,18 +200,16 @@ } @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) { - @include containerSubtle($bg, $fg); - &:not(.disabled):hover { - @include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 10%))); - } + @include containerSubtle($bg, $fg, true); } @mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) { - @include containerSubtle($bg, $fg); - @include background-image(linear-gradient(lighten($bg, 20%), $bg)); - &:not(.disabled):hover { + // No longer should be used; use btnSubtle instead + //@include containerSubtle($bg, $fg, true); + //@include background-image(linear-gradient(lighten($bg, 20%), $bg)); +/* &:not(.disabled):hover { @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%))); - } + }*/ } @mixin boxIncised($sVal: 0.6) { @@ -207,8 +220,8 @@ border: 1px solid $c; } -@mixin boxShdwSubtle($sVal: 0.3) { - @include box-shadow(rgba(black, $sVal) 0 1px 3px); +@mixin boxShdwSubtle($sVal: 0.2) { + @include box-shadow(rgba(black, $sVal) 0 1px 2px); } @mixin boxShdwLarge($sVal: 0.7) { @@ -235,13 +248,15 @@ } -@mixin invokeMenu($baseColor) { +/* +@mixin invokeMenu($baseColor: $colorBodyFg) { $c: $baseColor; color: $c; &:hover { color: lighten($c, $ltGamma); } } +*/ @mixin menuUlReset() { margin: 0; diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index d31314299e..b1cde49ae9 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -62,12 +62,12 @@ $pad: $interiorMargin * $baseRatio; text-decoration: none; &.major { $bg: $colorKey; - @include btnNoticeable($bg); + @include btnSubtle($bg); $fg: lighten($bg, 50%); color: $fg; &:hover { - @include btnNoticeable(lighten($bg, 5%)); - color: $fg; + @include btnSubtle(lighten($bg, 5%), $fg); + //color: $fg; } .invoke-menu { color: $fg; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 892f60274e..25f5668c77 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -263,7 +263,7 @@ label.checkbox.custom { .btn-menu { $h: 20px; - $p: $interiorMargin * 2; + $p: $interiorMarginSm * 2; $c: $colorBodyFg; @include btnSubtle($colorBodyBg); height: $h; @@ -359,7 +359,8 @@ label.checkbox.custom { /******************************************************** VIEW-CONTROLS */ -.view-controls .view-type { +/*.view-controls .view-type { +// UNUSED? $d: 20px; $p: 5px; @include border-radius($controlCr); @@ -373,13 +374,17 @@ label.checkbox.custom { &.cur { background: lighten($colorBodyBg, $ltGamma); } -} +}*/ .edit-mode .top-bar .control-set.edit-view-controls { // Used in templates/edit-view-controls.html margin-right: $interiorMargin * 10; } +.frame .t-view-switcher { + // Style the view switcher when in a frame +} + /******************************************************** SLIDERS */ .slider { diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index 2a72b9d392..71f465a8dc 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -104,7 +104,7 @@ &.selected { $cfg: lighten($colorItemSelected, 35%); $cfgh: lighten($cfg, 30%); - @include btnNoticeable($colorItemSelected); + @include btnSubtle($colorItemSelected); color: $cfg; .item-type, .top-bar .icon:not(.alert) { color: $cfg } .item-main .item-open { color: $cfg } diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html index 43a41fb1c7..31ce2b05cf 100644 --- a/platform/commonUI/general/res/templates/controls/switcher.html +++ b/platform/commonUI/general/res/templates/controls/switcher.html @@ -22,7 +22,7 @@
@@ -37,7 +37,7 @@ {{ngModel.selected.glyph}} {{ngModel.selected.name}} - v + v
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index c1b93c8c5b..e78a6464ba 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -116,7 +116,7 @@ {{plot.getMode().glyph}} {{plot.getMode().name}} - v + v
    diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html index 98e20c33f9..9a6f00510f 100644 --- a/platform/forms/res/templates/controls/color.html +++ b/platform/forms/res/templates/controls/color.html @@ -30,7 +30,7 @@ {{structure.text}} - v + v
    {{structure.text}} - v