alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Create menu style normalized

Browse Source 
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;
This commit is contained in:
Charles Hacskaylo
2015-06-26 18:38:33 -07:00
parent e3cb9dae5a
commit 8841f25186
7 changed files with 190 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/general/res/css/forms.css
View File

@@ -40,6 +40,14 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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 * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

8
platform/commonUI/general/res/css/items.css
View File

@@ -40,6 +40,14 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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 * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

169
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -41,6 +41,14 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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 * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@@ -2465,33 +2473,35 @@ label.checkbox.custom {
line-height: 1.4rem; line-height: 1.4rem;
padding: 3px 10px 3px 30px; padding: 3px 10px 3px 30px;
white-space: nowrap; } white-space: nowrap; }
/* line 46, ../sass/controls/_menus.scss */ /* line 45, ../sass/controls/_menus.scss */
.menu-element .menu ul li:first-child { .menu-element .menu ul li:first-child {
border: none; } border: none; }
/* line 49, ../sass/controls/_menus.scss */ /* line 48, ../sass/controls/_menus.scss */
.menu-element .menu ul li:hover { .menu-element .menu ul li:hover {
background: #737373; } background: #737373; }
/* line 51, ../sass/controls/_menus.scss */ /* line 50, ../sass/controls/_menus.scss */
.menu-element .menu ul li:hover a { .menu-element .menu ul li:hover a {
color: #fff; } color: #fff; }
/* line 54, ../sass/controls/_menus.scss */ /* line 53, ../sass/controls/_menus.scss */
.menu-element .menu ul li:hover .icon { .menu-element .menu ul li:hover .icon {
color: #33ccff; } color: #33ccff; }
/* line 58, ../sass/controls/_menus.scss */ /* line 57, ../sass/controls/_menus.scss */
.menu-element .menu ul li a { .menu-element .menu ul li a {
color: #d9d9d9; color: #d9d9d9;
display: block; } display: block; }
/* line 62, ../sass/controls/_menus.scss */ /* line 61, ../sass/controls/_menus.scss */
.menu-element .menu ul li .type-icon { .menu-element .menu ul li .type-icon {
left: 10px; } left: 10px; }
/* line 68, ../sass/controls/_menus.scss */ /* line 68, ../sass/controls/_menus.scss */
.menu-element .context-menu,
.menu-element .super-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-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #008ebd), color-stop(100%, #007aa3)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080));
background-image: -moz-linear-gradient(#008ebd, #007aa3); background-image: -moz-linear-gradient(#8c8c8c, #808080);
background-image: -webkit-linear-gradient(#008ebd, #007aa3); background-image: -webkit-linear-gradient(#8c8c8c, #808080);
background-image: linear-gradient(#008ebd, #007aa3); background-image: linear-gradient(#8c8c8c, #808080);
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
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; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
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: none;
border-top: 1px solid #0095c7; border-top: 1px solid #919191;
color: #fff; color: #999;
display: inline-block; display: inline-block; }
display: block;
width: 450px;
height: 430px; }
/* line 160, ../sass/_mixins.scss */ /* line 160, ../sass/_mixins.scss */
.menu-element .context-menu.btn-menu .invoke-menu,
.menu-element .super-menu.btn-menu .invoke-menu { .menu-element .super-menu.btn-menu .invoke-menu {
color: #05c1ff; } color: #b0b0b0; }
/* line 79, ../sass/controls/_menus.scss */ /* line 76, ../sass/controls/_menus.scss */
.menu-element .super-menu .icon { .menu-element .context-menu ul li,
color: #4dd2ff; } .menu-element .super-menu ul li {
/* line 84, ../sass/controls/_menus.scss */ 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 { .menu-element .super-menu .contents {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@@ -2524,12 +2554,12 @@ label.checkbox.custom {
left: 5px; left: 5px;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 87, ../sass/controls/_menus.scss */ /* line 105, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane { .menu-element .super-menu .pane {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
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 { .menu-element .super-menu .pane.left {
border-right: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2);
left: 0; left: 0;
@@ -2538,30 +2568,23 @@ label.checkbox.custom {
width: 50%; width: 50%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; } overflow-y: auto; }
/* line 99, ../sass/controls/_menus.scss */ /* line 117, ../sass/controls/_menus.scss */
.menu-element .super-menu .pane.left ul li { .menu-element .super-menu .pane.left ul li {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
border-top: none; padding-left: 30px;
color: #fff; } border-top: none; }
/* line 106, ../sass/controls/_menus.scss */ /* line 124, ../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 */
.menu-element .super-menu .pane.right { .menu-element .super-menu .pane.right {
left: auto; left: auto;
right: 0; right: 0;
padding: 25px; padding: 25px;
width: 50%; } 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 { .menu-element .super-menu .menu-item-description .desc-area.icon {
position: relative; position: relative;
font-size: 8em; font-size: 8em;
@@ -2570,80 +2593,40 @@ label.checkbox.custom {
line-height: 150px; line-height: 150px;
margin-bottom: 25px; margin-bottom: 25px;
text-align: center; } 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 { .menu-element .super-menu .menu-item-description .desc-area.title {
color: #fff; color: #fff;
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 0.5em; } 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 { .menu-element .super-menu .menu-item-description .desc-area.description {
color: #fff; color: #fff;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.5em; } line-height: 1.5em; }
/* line 155, ../sass/controls/_menus.scss */ /* line 161, ../sass/controls/_menus.scss */
.menu-element .context-menu { .menu-element .context-menu {
font-size: 0.80rem; 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; }
/* line 180, ../sass/controls/_menus.scss */ /* line 166, ../sass/controls/_menus.scss */
.context-menu-holder { .context-menu-holder {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
height: 200px; height: 200px;
width: 170px; width: 170px;
z-index: 70; } z-index: 70; }
/* line 186, ../sass/controls/_menus.scss */ /* line 172, ../sass/controls/_menus.scss */
.context-menu-holder .context-menu-wrapper { .context-menu-holder .context-menu-wrapper {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; } width: 100%; }
/* line 193, ../sass/controls/_menus.scss */ /* line 179, ../sass/controls/_menus.scss */
.context-menu-holder.go-left .context-menu { .context-menu-holder.go-left .context-menu {
right: 0; } right: 0; }
/* line 194, ../sass/controls/_menus.scss */ /* line 180, ../sass/controls/_menus.scss */
.context-menu-holder.go-up .context-menu { .context-menu-holder.go-up .context-menu {
bottom: 0; } bottom: 0; }
/* line 197, ../sass/controls/_menus.scss */ /* line 183, ../sass/controls/_menus.scss */
.btn-bar.right .menu, .btn-bar.right .menu,
.menus-to-left .menu { .menus-to-left .menu {
left: auto; left: auto;
@@ -4044,7 +4027,7 @@ input[type="text"] {
/* line 60, ../sass/overlay/_overlay.scss */ /* line 60, ../sass/overlay/_overlay.scss */
.overlay .editor { .overlay .editor {
top: 70px; top: 70px;
bottom: 52px; bottom: 50px;
left: 0; left: 0;
right: 0; } right: 0; }
/* line 66, ../sass/overlay/_overlay.scss */ /* line 66, ../sass/overlay/_overlay.scss */
@@ -4053,13 +4036,13 @@ input[type="text"] {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
font-size: 1em; overflow: visible;
height: 42px; height: 40px;
text-align: right; } text-align: right; }
/* line 71, ../sass/overlay/_overlay.scss */ /* line 72, ../sass/overlay/_overlay.scss */
.overlay .bottom-bar .btn { .overlay .bottom-bar .btn {
margin-left: 10px; } margin-left: 10px; }
/* line 75, ../sass/overlay/_overlay.scss */ /* line 76, ../sass/overlay/_overlay.scss */
.overlay .contents.l-dialog { .overlay .contents.l-dialog {
top: 5px; top: 5px;
right: 5px; right: 5px;

8
platform/commonUI/general/res/css/tree.css
View File

@@ -40,6 +40,14 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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 * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

118
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -20,10 +20,10 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
// Features /************************** FEATURES */
$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported $enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
// Margins, spacing, radii /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
$bodyMargin: 10px; $bodyMargin: 10px;
$interiorMargin: 5px; $interiorMargin: 5px;
$interiorMarginLg: $interiorMargin * 2; $interiorMarginLg: $interiorMargin * 2;
@@ -33,7 +33,7 @@ $controlCr: 2px;
$smallCr: 2px; $smallCr: 2px;
$badgeW: 35px; $badgeW: 35px;
// Colors and shading /************************** COLORS AND SHADING */
$colorBodyBg: #333; $colorBodyBg: #333;
$colorBodyFg: #999; $colorBodyFg: #999;
$colorFooterBg: #000; $colorFooterBg: #000;
@@ -44,64 +44,68 @@ $colorAlt1: #ffc700;
$colorAlert: #ff3c00; $colorAlert: #ff3c00;
$colorPausedBg: #c56f01; $colorPausedBg: #c56f01;
$colorPausedFg: #fff; $colorPausedFg: #fff;
$colorCheck: $colorKey;
$colorCreateBtn: $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%); $colorInteriorBorder: lighten($colorBodyBg, 10%);
$colorObjFrameBg: darken($colorBodyBg, 5%); $colorObjFrameBg: darken($colorBodyBg, 5%);
// Form colors
$colorCheck: $colorKey;
$colorFormRequired: #ffc700; $colorFormRequired: #ffc700;
$colorFormValid: #33cc33; $colorFormValid: #33cc33;
$colorFormError: #cc0000; $colorFormError: #cc0000;
$colorFormInvalid: #ff9900; $colorFormInvalid: #ff9900;
$colorGridLines: rgba(#fff, 0.05); // Limits and staleness colors
$colorLimitYellow: #9d7500; $colorLimitYellow: #9d7500;
$colorLimitRed: #aa0000; $colorLimitRed: #aa0000;
$colorTelemFresh: #fff; $colorTelemFresh: #fff;
$colorTelemStale: #888; $colorTelemStale: #888;
$styleTelemStale: italic; $styleTelemStale: italic;
// Bubble colors
$colorInfoBubbleFg: #666; $colorInfoBubbleFg: #666;
$colorInfoBubbleBg: #ddd; $colorInfoBubbleBg: #ddd;
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%); $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%); $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
$colorLimitYellow: #9d7500; // Overlay
$colorLimitRed: #aa0000; $colorOvrBlocker: rgba(black, 0.7);
$colorTelemFresh: #fff; $colorOvrBg: $colorBodyBg;
$colorTelemStale: #888; $colorOvrFg: $colorBodyFg;
$styleTelemState: italic; // Items
$colorInfoBubbleFg: #666; $colorItemBase: lighten($colorBodyBg, 5%);
$colorInfoBubbleBg: #ddd; $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%; $ltGamma: 20%;
$btnFontSizeToH: 0.45; $btnFontSizeToH: 0.45;
// User Environment /************************** LAYOUT */
$ueTopBarH: 24px; // Change to when breadcrumb is enabled $ueTopBarH: 24px; // Change when breadcrumb is enabled
$ueTopBarEditH: 30px; $ueTopBarEditH: 30px;
$ueTopBarBtnH: 35px; $ueTopBarBtnH: 35px;
$ueFooterH: 25px; $ueFooterH: 25px;
$ueColMargin: 1.5%; $ueColMargin: 1.5%;
$ueAppLogoW: 105px; $ueAppLogoW: 105px;
//$ueBrowseViewBarH: $ueTopBarH; // was 30px
$ueEditToolBarH: 25px; $ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%; $ueBrowseLeftPaneW: 25%;
$ueEditLeftPaneW: 75%; $ueEditLeftPaneW: 75%;
// Overlay // Overlay
$colorOvrBlocker: rgba(black, 0.7);
$colorOvrBg: $colorBodyBg;
$colorOvrFg: $colorBodyFg;
$ovrTopBarH: 60px; $ovrTopBarH: 60px;
$ovrFooterH: 42px; $ovrFooterH: 40px;
// Items
//Items
$ueBrowseGridItemLg: 200px; $ueBrowseGridItemLg: 200px;
$ueBrowseGridItemTopBarH: 20px; $ueBrowseGridItemTopBarH: 20px;
$ueBrowseGridItemBottomBarH: 30px; $ueBrowseGridItemBottomBarH: 30px;
$colorItemBase: lighten($colorBodyBg, 5%);
$colorItemFg: lighten($colorItemBase, 20%);
$colorItemSelected: $colorKey;
$itemPadLR: 5px; $itemPadLR: 5px;
// Tree // Tree
$treeVCW: 10px; $treeVCW: 10px;
$treeTypeIconW: 20px; $treeTypeIconW: 20px;
@@ -109,18 +113,33 @@ $treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1; $colorItemTreeVCHover: $colorAlt1;
// Tabular
//Tabular
$tabularHeaderH: 18px; $tabularHeaderH: 18px;
$tabularTdPadLR: $itemPadLR; $tabularTdPadLR: $itemPadLR;
$tabularTdPadTB: 2px; $tabularTdPadTB: 2px;
$tabularColorBorder: rgba(white, 0.1); // Imagery
$tabularColorBodyBg: darken($colorBodyBg, 10%); $imageMainControlBarH: 20px;
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%); $imageThumbsD: 120px;
$tabularColorHeaderBg: lighten($colorBodyBg, 10%); $imageThumbsWrapperH: $imageThumbsD * 1.4;
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%); $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; $controlCr: $basicCr;
$controlDisabledOpacity: 0.3; $controlDisabledOpacity: 0.3;
$formLabelW: 20%; $formLabelW: 20%;
@@ -132,34 +151,9 @@ $scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px; $btnStdH: 25px;
$btnToolbarH: $btnStdH; $btnToolbarH: $btnStdH;
// Paths /************************** PATHS */
$dirImgs: '../images/'; // Relative to platform/css/ directory $dirImgs: '../images/'; // Relative to platform/css/ directory
// Ticks /************************** TIMINGS */
$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
$controlFadeMs: 100ms; $controlFadeMs: 100ms;
// Forms
$reqSymbolW: 15px;
$reqSymbolM: $interiorMargin * 2;
$reqSymbolFontSize: 0.7em;

78
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@@ -37,7 +37,6 @@
ul { ul {
@include menuUlReset(); @include menuUlReset();
li { li {
// @include border-radius($controlCr);
@include box-sizing(border-box); @include box-sizing(border-box);
border-top: 1px solid lighten($bg, 20%); border-top: 1px solid lighten($bg, 20%);
line-height: $menuLineH; 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 { .super-menu {
$w: 450px; $w: 500px;
$h: $w - 20; $h: $w - 20;
$plw: 50%; //$w * 0.5; $plw: 50%; //$w * 0.5;
$prw: 50%; //$w - $plw; $prw: 50%; //$w - $plw;
$bg: $colorKey; $fg: #fff; //lighten($colorBodyFg, 40%);
$fg: $colorKeyFg; $bgHover: $colorKey; //$bg;
$colorMid: lighten($bg, 25%);
$bgHover: $bg;
@include containerSubtle(darken($bg, 15%), $fg);
display: block; display: block;
.icon {
color: $colorMid;
}
width: $w; width: $w;
height: $h; height: $h;
.contents { .contents {
@@ -98,21 +116,8 @@
ul { ul {
li { li {
@include border-radius($controlCr); @include border-radius($controlCr);
// @include test(red); padding-left: 30px;
border-top: none; 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; right: 0;
padding: $interiorMargin * 5; padding: $interiorMargin * 5;
width: $prw; width: $prw;
.icon {
color: $fg;
}
} }
} }
.menu-item-description { .menu-item-description {
.desc-area { .desc-area {
// @include test(green);
&.icon { &.icon {
//@include test(red);
$h: 150px; $h: 150px;
position: relative; position: relative;
font-size: 8em; font-size: 8em;
@@ -153,27 +159,7 @@
} }
} }
.context-menu { .context-menu {
$bg: lighten($colorBodyBg, 25%);
$fg: lighten($bg, 70%);
$ic: lighten($colorKey, 15%);
font-size: 0.80rem; 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%);
}
}
}
} }
} }

3
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@@ -65,7 +65,8 @@
.bottom-bar { .bottom-bar {
top: auto; right: 0; bottom: 0; left: 0; top: auto; right: 0; bottom: 0; left: 0;
font-size: 1em; overflow: visible;
//font-size: 1em;
height: $ovrFooterH; height: $ovrFooterH;
text-align: right; text-align: right;
.btn { .btn {