From 3e7eb98ac2bb4327853ee5307bc1365bd0f26399 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 27 Jul 2016 18:05:06 -0700 Subject: [PATCH] [Frontend] Standardizing styles Fixes #1047 - Finessing mini-tab and making able to control per theme; s-clickable and s-toggle-icon classes cleaned up --- .../commonUI/general/res/sass/_constants.scss | 5 ++--- .../general/res/sass/controls/_buttons.scss | 6 ++---- .../general/res/sass/controls/_controls.scss | 21 +++++++++++-------- .../themes/espresso/res/sass/_constants.scss | 13 +++++++----- .../themes/snow/res/sass/_constants.scss | 14 ++++++++----- .../timeline/res/sass/_timelines.scss | 7 ------- .../templates/tabular-swimlane-cols-tree.html | 2 +- 7 files changed, 34 insertions(+), 34 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 821b0cd3f2..767917de06 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -43,9 +43,8 @@ $ueColMargin: 1.5%; $ueAppLogoW: 80px; $ueEditToolBarH: 25px; $ueCollapsedPaneEdgeM: 22px; -$uePaneMiniTabH: $ueTopBarH; $uePaneMiniTabH: 22px; -$uePaneMiniTabW: 10px; +$uePaneMiniTabW: 8px; $uePaneMiniTabFontSize: 8px; $uePaneMiniTabCollapsedW: 18px; $ueEditLeftPaneW: 75%; @@ -75,7 +74,7 @@ $treeTypeIconHPx: 16px; $treeTypeIconW: 18px; $treeContextTriggerW: 20px; /*************** Tabular */ -$tabularHeaderH: 22px; //18px +$tabularHeaderH: 22px; $tabularTdPadLR: $itemPadLR; $tabularTdPadTB: 3px; /*************** Imagery */ diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index e0d18338be..28203b08cf 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -95,10 +95,8 @@ body.desktop .mini-tab-icon { overflow: hidden; text-align: center; - &:before, - &:after { - display: block; - position: absolute; + &:before { + display: inline-block; } &:hover { diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 14c17bf0a6..c0cf05b58e 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -74,17 +74,21 @@ .s-clickable-icon { // Clickable icon elements that have hover - // .s-toggles means the element is capable of having .active applied to it @extend .ui-symbol; color: $colorClickIcon; - &:hover { color: $colorClickIconHov; } - &.s-toggles { - color: rgba($colorClickIcon, 0.5) !important; - &.active { color: $colorClickIconActive !important; } - &:hover { color: rgba($colorClickIconHov, 0.5) !important; } + &:hover { + color: $colorClickIconHov; } } +.s-toggle-icon { + // Has default (in-active) and .active states + @extend .s-clickable-icon; + color: $colorToggleIcon; + &:hover { color: rgba($colorToggleIconHov, 0.5); } + &.active { color: $colorToggleIconActive; } +} + .l-composite-control { vertical-align: middle; &:not(.l-inline) { @@ -555,10 +559,9 @@ textarea { /******************************************************** MISC */ .context-available { @extend .icon-arrow-down; - $c: $colorKey; - color: $c; + color: $colorKey; &:hover { - color: lighten($c, 10%); + color: $colorKeyHov; } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index a44db14151..5ca1a6c73e 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -6,7 +6,7 @@ $colorStatusBarBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: #005177; $colorKeyFg: #fff; -$colorKeyHov: pullForward($colorKey, 20%); +$colorKeyHov: #00c0f6; $colorEditAreaBg: #31363e; $colorEditAreaFg: #587ab5; $colorInteriorBorder: rgba($colorBodyFg, 0.1); @@ -29,10 +29,11 @@ $colorBtnMajorBg: $colorKey; $colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent); $colorBtnMajorFg: $colorKeyFg; $colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent); -// TODO: make clickable icon initially use the key color; also, introduce a toggle-able icon with different color approach -$colorClickIcon: $colorBodyFg; -$colorClickIconActive: $colorKey; -$colorClickIconHov: $colorClickIconActive; +$colorClickIcon: $colorKey; +$colorClickIconHov: $colorKeyHov; +$colorToggleIcon: rgba($colorBodyFg, 0.5); +$colorToggleIconActive: $colorKey; +$colorToggleIconHov: rgba($colorToggleIconActive, 0.5); $colorInvokeMenu: #fff; $contrastInvokeMenuPercent: 20%; $shdwBtns: rgba(black, 0.2) 0 1px 2px; @@ -204,6 +205,8 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent); $colorSplitterActive: $colorKey; // Minitabs +$uePaneMiniTabH: 24px; +$uePaneMiniTabW: 8px; $colorMiniTabBg: $colorSplitterBg; $colorMiniTabFg: pushBack($colorMiniTabBg, 10%); $colorMiniTabBgHov: $colorSplitterHover; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 4c85752b23..6177428c36 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -6,7 +6,7 @@ $colorStatusBarBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: $colorKey; $colorKeyFg: #fff; -$colorKeyHov: pullForward($colorKey, 20%); +$colorKeyHov: #00c0f6; $colorEditAreaBg: #eafaff; $colorEditAreaFg: #4bb1c7; $colorInteriorBorder: rgba($colorBodyFg, 0.2); @@ -26,12 +26,14 @@ $colorBtnFgHov: $colorBtnFg; $colorBtnIcon: #eee; $colorBtnIconHov: $colorBtnFgHov; $colorBtnMajorBg: $colorKey; -$colorBtnMajorBgHov: #007fbc; +$colorBtnMajorBgHov: $colorKeyHov; $colorBtnMajorFg: $colorKeyFg; $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent); -$colorClickIcon: $colorBodyFg; -$colorClickIconActive: $colorKey; -$colorClickIconHov: $colorClickIconActive; +$colorClickIcon: $colorKey; +$colorClickIconHov: $colorKeyHov; +$colorToggleIcon: rgba($colorClickIcon, 0.5); +$colorToggleIconActive: $colorKey; +$colorToggleIconHov: rgba($colorToggleIconActive, 0.5); $colorInvokeMenu: #000; $contrastInvokeMenuPercent: 40%; $shdwBtns: none; @@ -203,6 +205,8 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2); $colorSplitterActive: $colorKey; // Minitabs +$uePaneMiniTabH: 24px; +$uePaneMiniTabW: 8px; $colorMiniTabBg: $colorSplitterBg; $colorMiniTabFg: pullForward($colorMiniTabBg, 30%); $colorMiniTabBgHov: $colorSplitterHover; diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss index d760e810cc..62b6ace5da 100644 --- a/platform/features/timeline/res/sass/_timelines.scss +++ b/platform/features/timeline/res/sass/_timelines.scss @@ -300,13 +300,6 @@ top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin; } - .l-swimlanes-holder .l-cols { - .l-col-icon, - .l-col-icon a:not(.s-toggles) { - color: $colorKey; - } - } - .l-pane-l { // Left pane of the tabular area .l-cols { diff --git a/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html b/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html index 4032a991a0..8da5fe17c7 100644 --- a/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html +++ b/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html @@ -31,7 +31,7 @@ -