From 8841f2518658a6bcf074975a30d118400499f464 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 26 Jun 2015 18:38:33 -0700 Subject: [PATCH] [Frontend] Create menu style normalized WTD-1392 WTD-1367 WTD-1391 Some significant reorging in _menus.scss and _constants; Create menu normalized with context menu styles; Bottom bar of overlay overflow set to visible to prevent button clipping; --- platform/commonUI/general/res/css/forms.css | 8 + platform/commonUI/general/res/css/items.css | 8 + .../general/res/css/theme-espresso.css | 169 ++++++++---------- platform/commonUI/general/res/css/tree.css | 8 + .../commonUI/general/res/sass/_constants.scss | 118 ++++++------ .../general/res/sass/controls/_menus.scss | 78 ++++---- .../general/res/sass/overlay/_overlay.scss | 3 +- 7 files changed, 190 insertions(+), 202 deletions(-) diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index c0acb2a4c3..bc7cbac350 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -40,6 +40,14 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** FEATURES */ +/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */ +/************************** COLORS AND SHADING */ +/************************** RATIOS */ +/************************** LAYOUT */ +/************************** CONTROLS */ +/************************** PATHS */ +/************************** TIMINGS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 0e822f901d..c40b3f7bd9 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -40,6 +40,14 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** FEATURES */ +/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */ +/************************** COLORS AND SHADING */ +/************************** RATIOS */ +/************************** LAYOUT */ +/************************** CONTROLS */ +/************************** PATHS */ +/************************** TIMINGS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index a556c7bc6c..e03f8228f2 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -41,6 +41,14 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** FEATURES */ +/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */ +/************************** COLORS AND SHADING */ +/************************** RATIOS */ +/************************** LAYOUT */ +/************************** CONTROLS */ +/************************** PATHS */ +/************************** TIMINGS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -2465,33 +2473,35 @@ label.checkbox.custom { line-height: 1.4rem; padding: 3px 10px 3px 30px; white-space: nowrap; } - /* line 46, ../sass/controls/_menus.scss */ + /* line 45, ../sass/controls/_menus.scss */ .menu-element .menu ul li:first-child { border: none; } - /* line 49, ../sass/controls/_menus.scss */ + /* line 48, ../sass/controls/_menus.scss */ .menu-element .menu ul li:hover { background: #737373; } - /* line 51, ../sass/controls/_menus.scss */ + /* line 50, ../sass/controls/_menus.scss */ .menu-element .menu ul li:hover a { color: #fff; } - /* line 54, ../sass/controls/_menus.scss */ + /* line 53, ../sass/controls/_menus.scss */ .menu-element .menu ul li:hover .icon { color: #33ccff; } - /* line 58, ../sass/controls/_menus.scss */ + /* line 57, ../sass/controls/_menus.scss */ .menu-element .menu ul li a { color: #d9d9d9; display: block; } - /* line 62, ../sass/controls/_menus.scss */ + /* line 61, ../sass/controls/_menus.scss */ .menu-element .menu ul li .type-icon { left: 10px; } /* line 68, ../sass/controls/_menus.scss */ + .menu-element .context-menu, .menu-element .super-menu { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOGViZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwN2FhMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + pointer-events: auto; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #008ebd), color-stop(100%, #007aa3)); - background-image: -moz-linear-gradient(#008ebd, #007aa3); - background-image: -webkit-linear-gradient(#008ebd, #007aa3); - background-image: linear-gradient(#008ebd, #007aa3); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080)); + background-image: -moz-linear-gradient(#8c8c8c, #808080); + background-image: -webkit-linear-gradient(#8c8c8c, #808080); + background-image: linear-gradient(#8c8c8c, #808080); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; @@ -2502,19 +2512,39 @@ label.checkbox.custom { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; border: none; - border-top: 1px solid #0095c7; - color: #fff; - display: inline-block; - display: block; - width: 450px; - height: 430px; } + border-top: 1px solid #919191; + color: #999; + display: inline-block; } /* line 160, ../sass/_mixins.scss */ + .menu-element .context-menu.btn-menu .invoke-menu, .menu-element .super-menu.btn-menu .invoke-menu { - color: #05c1ff; } - /* line 79, ../sass/controls/_menus.scss */ - .menu-element .super-menu .icon { - color: #4dd2ff; } - /* line 84, ../sass/controls/_menus.scss */ + color: #b0b0b0; } + /* line 76, ../sass/controls/_menus.scss */ + .menu-element .context-menu ul li, + .menu-element .super-menu ul li { + padding-left: 25px; } + /* line 78, ../sass/controls/_menus.scss */ + .menu-element .context-menu ul li a, + .menu-element .super-menu ul li a { + color: white; } + /* line 79, ../sass/controls/_menus.scss */ + .menu-element .context-menu ul li .icon, + .menu-element .super-menu ul li .icon { + color: #24c8ff; } + /* line 82, ../sass/controls/_menus.scss */ + .menu-element .context-menu ul li .type-icon, + .menu-element .super-menu ul li .type-icon { + left: 5px; } + /* line 85, ../sass/controls/_menus.scss */ + .menu-element .context-menu ul li:hover .icon, + .menu-element .super-menu ul li:hover .icon { + color: #3dcfff; } + /* line 92, ../sass/controls/_menus.scss */ + .menu-element .super-menu { + display: block; + width: 500px; + height: 480px; } + /* line 102, ../sass/controls/_menus.scss */ .menu-element .super-menu .contents { overflow: hidden; position: absolute; @@ -2524,12 +2554,12 @@ label.checkbox.custom { left: 5px; width: auto; height: auto; } - /* line 87, ../sass/controls/_menus.scss */ + /* line 105, ../sass/controls/_menus.scss */ .menu-element .super-menu .pane { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - /* line 89, ../sass/controls/_menus.scss */ + /* line 107, ../sass/controls/_menus.scss */ .menu-element .super-menu .pane.left { border-right: 1px solid rgba(255, 255, 255, 0.2); left: 0; @@ -2538,30 +2568,23 @@ label.checkbox.custom { width: 50%; overflow-x: hidden; overflow-y: auto; } - /* line 99, ../sass/controls/_menus.scss */ + /* line 117, ../sass/controls/_menus.scss */ .menu-element .super-menu .pane.left ul li { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; - border-top: none; - color: #fff; } - /* line 106, ../sass/controls/_menus.scss */ - .menu-element .super-menu .pane.left ul li:hover { - background: #0099cc; } - /* line 108, ../sass/controls/_menus.scss */ - .menu-element .super-menu .pane.left ul li:hover .icon { - color: #ccf2ff; } - /* line 112, ../sass/controls/_menus.scss */ - .menu-element .super-menu .pane.left ul li .icon { - text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; - left: 5px; } - /* line 119, ../sass/controls/_menus.scss */ + padding-left: 30px; + border-top: none; } + /* line 124, ../sass/controls/_menus.scss */ .menu-element .super-menu .pane.right { left: auto; right: 0; padding: 25px; width: 50%; } - /* line 130, ../sass/controls/_menus.scss */ + /* line 130, ../sass/controls/_menus.scss */ + .menu-element .super-menu .pane.right .icon { + color: #fff; } + /* line 137, ../sass/controls/_menus.scss */ .menu-element .super-menu .menu-item-description .desc-area.icon { position: relative; font-size: 8em; @@ -2570,80 +2593,40 @@ label.checkbox.custom { line-height: 150px; margin-bottom: 25px; text-align: center; } - /* line 141, ../sass/controls/_menus.scss */ + /* line 147, ../sass/controls/_menus.scss */ .menu-element .super-menu .menu-item-description .desc-area.title { color: #fff; font-size: 1.2em; margin-bottom: 0.5em; } - /* line 146, ../sass/controls/_menus.scss */ + /* line 152, ../sass/controls/_menus.scss */ .menu-element .super-menu .menu-item-description .desc-area.description { color: #fff; font-size: 0.8em; line-height: 1.5em; } - /* line 155, ../sass/controls/_menus.scss */ + /* line 161, ../sass/controls/_menus.scss */ .menu-element .context-menu { - font-size: 0.80rem; - pointer-events: auto; } - /* line 161, ../sass/controls/_menus.scss */ - .menu-element .context-menu.menu { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkxOTE5MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg1ODU4NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #919191), color-stop(100%, #858585)); - background-image: -moz-linear-gradient(#919191, #858585); - background-image: -webkit-linear-gradient(#919191, #858585); - background-image: linear-gradient(#919191, #858585); - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - border: none; - border-top: 1px solid #969696; - color: #999; - display: inline-block; } - /* line 160, ../sass/_mixins.scss */ - .menu-element .context-menu.menu.btn-menu .invoke-menu { - color: #b5b5b5; } - /* line 163, ../sass/controls/_menus.scss */ - .menu-element .context-menu.menu ul li { - padding-left: 30px; } - /* line 165, ../sass/controls/_menus.scss */ - .menu-element .context-menu.menu ul li a { - color: white; } - /* line 166, ../sass/controls/_menus.scss */ - .menu-element .context-menu.menu ul li .icon { - color: #1ac6ff; } - /* line 169, ../sass/controls/_menus.scss */ - .menu-element .context-menu.menu ul li .type-icon { - left: 5px; } - /* line 172, ../sass/controls/_menus.scss */ - .menu-element .context-menu.menu ul li:hover .icon { - color: #33ccff; } + font-size: 0.80rem; } -/* line 180, ../sass/controls/_menus.scss */ +/* line 166, ../sass/controls/_menus.scss */ .context-menu-holder { pointer-events: none; position: absolute; height: 200px; width: 170px; z-index: 70; } - /* line 186, ../sass/controls/_menus.scss */ + /* line 172, ../sass/controls/_menus.scss */ .context-menu-holder .context-menu-wrapper { position: absolute; height: 100%; width: 100%; } - /* line 193, ../sass/controls/_menus.scss */ + /* line 179, ../sass/controls/_menus.scss */ .context-menu-holder.go-left .context-menu { right: 0; } - /* line 194, ../sass/controls/_menus.scss */ + /* line 180, ../sass/controls/_menus.scss */ .context-menu-holder.go-up .context-menu { bottom: 0; } -/* line 197, ../sass/controls/_menus.scss */ +/* line 183, ../sass/controls/_menus.scss */ .btn-bar.right .menu, .menus-to-left .menu { left: auto; @@ -4044,7 +4027,7 @@ input[type="text"] { /* line 60, ../sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; - bottom: 52px; + bottom: 50px; left: 0; right: 0; } /* line 66, ../sass/overlay/_overlay.scss */ @@ -4053,13 +4036,13 @@ input[type="text"] { right: 0; bottom: 0; left: 0; - font-size: 1em; - height: 42px; + overflow: visible; + height: 40px; text-align: right; } - /* line 71, ../sass/overlay/_overlay.scss */ + /* line 72, ../sass/overlay/_overlay.scss */ .overlay .bottom-bar .btn { margin-left: 10px; } -/* line 75, ../sass/overlay/_overlay.scss */ +/* line 76, ../sass/overlay/_overlay.scss */ .overlay .contents.l-dialog { top: 5px; right: 5px; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 2582522f39..97b7ab996a 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -40,6 +40,14 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** FEATURES */ +/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */ +/************************** COLORS AND SHADING */ +/************************** RATIOS */ +/************************** LAYOUT */ +/************************** CONTROLS */ +/************************** PATHS */ +/************************** TIMINGS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 5f9cc5bf75..8a8fed19d1 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -20,10 +20,10 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -// Features +/************************** FEATURES */ $enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported -// Margins, spacing, radii +/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */ $bodyMargin: 10px; $interiorMargin: 5px; $interiorMarginLg: $interiorMargin * 2; @@ -33,7 +33,7 @@ $controlCr: 2px; $smallCr: 2px; $badgeW: 35px; -// Colors and shading +/************************** COLORS AND SHADING */ $colorBodyBg: #333; $colorBodyFg: #999; $colorFooterBg: #000; @@ -44,64 +44,68 @@ $colorAlt1: #ffc700; $colorAlert: #ff3c00; $colorPausedBg: #c56f01; $colorPausedFg: #fff; -$colorCheck: $colorKey; $colorCreateBtn: $colorKey; +$colorGridLines: rgba(#fff, 0.05); +// Menu colors +$colorMenuBg: lighten($colorBodyBg, 23%); +$colorMenuFg: lighten($colorMenuBg, 70%); +$colorMenuIc: lighten($colorKey, 17%); $colorInteriorBorder: lighten($colorBodyBg, 10%); $colorObjFrameBg: darken($colorBodyBg, 5%); +// Form colors +$colorCheck: $colorKey; $colorFormRequired: #ffc700; $colorFormValid: #33cc33; $colorFormError: #cc0000; $colorFormInvalid: #ff9900; -$colorGridLines: rgba(#fff, 0.05); +// Limits and staleness colors $colorLimitYellow: #9d7500; $colorLimitRed: #aa0000; $colorTelemFresh: #fff; $colorTelemStale: #888; $styleTelemStale: italic; +// Bubble colors $colorInfoBubbleFg: #666; $colorInfoBubbleBg: #ddd; $colorThumbsBubbleFg: lighten($colorBodyFg, 10%); $colorThumbsBubbleBg: lighten($colorBodyBg, 10%); -$colorLimitYellow: #9d7500; -$colorLimitRed: #aa0000; -$colorTelemFresh: #fff; -$colorTelemStale: #888; -$styleTelemState: italic; -$colorInfoBubbleFg: #666; -$colorInfoBubbleBg: #ddd; +// Overlay +$colorOvrBlocker: rgba(black, 0.7); +$colorOvrBg: $colorBodyBg; +$colorOvrFg: $colorBodyFg; +// Items +$colorItemBase: lighten($colorBodyBg, 5%); +$colorItemFg: lighten($colorItemBase, 20%); +$colorItemSelected: $colorKey; +// Tabular +$tabularColorBorder: rgba(white, 0.1); +$tabularColorBodyBg: darken($colorBodyBg, 10%); +$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%); +$tabularColorHeaderBg: lighten($colorBodyBg, 10%); +$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%); -// Ratios +/************************** RATIOS */ $ltGamma: 20%; $btnFontSizeToH: 0.45; -// User Environment -$ueTopBarH: 24px; // Change to when breadcrumb is enabled +/************************** LAYOUT */ +$ueTopBarH: 24px; // Change when breadcrumb is enabled $ueTopBarEditH: 30px; $ueTopBarBtnH: 35px; $ueFooterH: 25px; $ueColMargin: 1.5%; $ueAppLogoW: 105px; -//$ueBrowseViewBarH: $ueTopBarH; // was 30px $ueEditToolBarH: 25px; $ueBrowseLeftPaneW: 25%; $ueEditLeftPaneW: 75%; - // Overlay -$colorOvrBlocker: rgba(black, 0.7); -$colorOvrBg: $colorBodyBg; -$colorOvrFg: $colorBodyFg; $ovrTopBarH: 60px; -$ovrFooterH: 42px; - -//Items +$ovrFooterH: 40px; +// Items $ueBrowseGridItemLg: 200px; $ueBrowseGridItemTopBarH: 20px; $ueBrowseGridItemBottomBarH: 30px; -$colorItemBase: lighten($colorBodyBg, 5%); -$colorItemFg: lighten($colorItemBase, 20%); -$colorItemSelected: $colorKey; $itemPadLR: 5px; - // Tree $treeVCW: 10px; $treeTypeIconW: 20px; @@ -109,18 +113,33 @@ $treeContextTriggerW: 20px; $colorItemTreeIcon: $colorKey; $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); $colorItemTreeVCHover: $colorAlt1; - -//Tabular +// Tabular $tabularHeaderH: 18px; $tabularTdPadLR: $itemPadLR; $tabularTdPadTB: 2px; -$tabularColorBorder: rgba(white, 0.1); -$tabularColorBodyBg: darken($colorBodyBg, 10%); -$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%); -$tabularColorHeaderBg: lighten($colorBodyBg, 10%); -$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%); +// Imagery +$imageMainControlBarH: 20px; +$imageThumbsD: 120px; +$imageThumbsWrapperH: $imageThumbsD * 1.4; +$imageThumbPad: 1px; +// Ticks +$ticksH: 25px; +$tickLblVMargin: 3px; +$tickLblH: 15px; +$tickLblW: 50px; +$tickH: $ticksH - $tickLblVMargin - $tickLblH; +$tickW: 1px; +// Bubbles +$bubbleArwSize: 10px; +$bubblePad: $interiorMargin; +$bubbleMinW: 100px; +$bubbleMaxW: 300px; +// Forms +$reqSymbolW: 15px; +$reqSymbolM: $interiorMargin * 2; +$reqSymbolFontSize: 0.7em; -// Controls +/************************** CONTROLS */ $controlCr: $basicCr; $controlDisabledOpacity: 0.3; $formLabelW: 20%; @@ -132,34 +151,9 @@ $scrollbarTrackColorBg: rgba(#000, 0.4); $btnStdH: 25px; $btnToolbarH: $btnStdH; -// Paths +/************************** PATHS */ $dirImgs: '../images/'; // Relative to platform/css/ directory -// Ticks -$ticksH: 25px; -$tickLblVMargin: 3px; -$tickLblH: 15px; -$tickLblW: 50px; -$tickH: $ticksH - $tickLblVMargin - $tickLblH; -$tickW: 1px; - -// Imagery -$imageMainControlBarH: 20px; -$imageThumbsD: 120px; -$imageThumbsWrapperH: $imageThumbsD * 1.4; -$imageThumbPad: 1px; - -// Bubbles -$bubbleArwSize: 10px; -$bubblePad: $interiorMargin; -$bubbleMinW: 100px; -$bubbleMaxW: 300px; - - -// Timing +/************************** TIMINGS */ $controlFadeMs: 100ms; -// Forms -$reqSymbolW: 15px; -$reqSymbolM: $interiorMargin * 2; -$reqSymbolFontSize: 0.7em; \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index 46b67dd6ef..31922238ee 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -37,7 +37,6 @@ ul { @include menuUlReset(); li { -// @include border-radius($controlCr); @include box-sizing(border-box); border-top: 1px solid lighten($bg, 20%); line-height: $menuLineH; @@ -65,20 +64,39 @@ } } } + + .context-menu, + .super-menu { + $bg: $colorMenuBg; + $fg: $colorMenuFg; + $ic: $colorMenuIc; + //font-size: 0.80rem; + pointer-events: auto; + @include containerSubtle($bg); + ul li { + padding-left: 25px; + a { color: $fg; } + .icon { + color: $ic; + } + .type-icon { + left: $interiorMargin; + } + &:hover .icon { + color: lighten($ic, 5%); + } + } + } + + .super-menu { - $w: 450px; + $w: 500px; $h: $w - 20; $plw: 50%; //$w * 0.5; $prw: 50%; //$w - $plw; - $bg: $colorKey; - $fg: $colorKeyFg; - $colorMid: lighten($bg, 25%); - $bgHover: $bg; - @include containerSubtle(darken($bg, 15%), $fg); + $fg: #fff; //lighten($colorBodyFg, 40%); + $bgHover: $colorKey; //$bg; display: block; - .icon { - color: $colorMid; - } width: $w; height: $h; .contents { @@ -98,21 +116,8 @@ ul { li { @include border-radius($controlCr); -// @include test(red); + padding-left: 30px; border-top: none; - color: $fg; -// font-size: 0.85em; -// line-height: 20px; - &:hover { - background: $bgHover; - .icon { - color: lighten($bg, 50%); - } - } - .icon { - @include txtShdwSubtle(0.4); - left: $interiorMargin; - } } } } @@ -122,13 +127,14 @@ right: 0; padding: $interiorMargin * 5; width: $prw; + .icon { + color: $fg; + } } } .menu-item-description { .desc-area { - // @include test(green); &.icon { - //@include test(red); $h: 150px; position: relative; font-size: 8em; @@ -153,27 +159,7 @@ } } .context-menu { - $bg: lighten($colorBodyBg, 25%); - $fg: lighten($bg, 70%); - $ic: lighten($colorKey, 15%); font-size: 0.80rem; - pointer-events: auto; - &.menu { - @include containerSubtle($bg); - ul li { - padding-left: 30px; - a { color: $fg; } - .icon { - color: $ic; - } - .type-icon { - left: $interiorMargin; - } - &:hover .icon { - color: lighten($ic, 5%); - } - } - } } } diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 153fcbf94c..692db103e1 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -65,7 +65,8 @@ .bottom-bar { top: auto; right: 0; bottom: 0; left: 0; - font-size: 1em; + overflow: visible; + //font-size: 1em; height: $ovrFooterH; text-align: right; .btn {