diff --git a/platform/commonUI/edit/res/templates/create/create-button.html b/platform/commonUI/edit/res/templates/create/create-button.html
index f602b77fe7..e39e9cde57 100644
--- a/platform/commonUI/edit/res/templates/create/create-button.html
+++ b/platform/commonUI/edit/res/templates/create/create-button.html
@@ -23,7 +23,7 @@
-
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index 679ce9a1f6..45cfea27aa 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -21,55 +21,56 @@
*****************************************************************************/
/******************************************************** MENU BUTTONS */
.s-menu-button {
- // Formerly .btn-menu
- @extend .s-button;
- span.l-click-area {
- // In markup, this element should not enclose anything.
- @extend .abs;
- }
+ // Formerly .btn-menu
+ @extend .s-button;
+ span.l-click-area {
+ // In markup, this element should not enclose anything.
+ @extend .abs;
+ }
- .icon {
- font-size: 16px; //120%;
- }
+ .icon {
+ font-size: 16px; //120%;
+ }
- .title-label {
- margin-left: $interiorMarginSm;
- }
+ .title-label {
+ margin-left: $interiorMarginSm;
+ }
.color-swatch {
// Used in color menu buttons in toolbar
$d: 10px;
display: inline-block;
border: 1px solid rgba($colorBtnFg, 0.2);
- height: $d; width: $d;
+ height: $d;
+ width: $d;
vertical-align: middle;
margin-left: $interiorMarginSm;
margin-top: -2px;
}
- &:after {
- // Adds the downward facing 'context available / invoke menu' arrow element
- @include contextArrow();
- color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
- }
+ &:after {
+ // Adds the downward facing 'context available / invoke menu' arrow element
+ @include contextArrow();
+ color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
+ }
- &.create-button {
+ &.create-button {
@extend .icon-plus;
- .title-label {
- font-size: 1rem;
- }
- }
+ .title-label {
+ font-size: 1rem;
+ }
+ }
- .menu {
- left: 0;
- text-align: left;
- }
+ .menu {
+ left: 0;
+ text-align: left;
+ }
}
/******************************************************** MENUS THEMSELVES */
.menu-element {
- cursor: pointer;
- position: relative;
+ cursor: pointer;
+ position: relative;
}
.menu {
@@ -78,29 +79,29 @@
@include boxShdw($shdwMenu);
@include txtShdw($shdwMenuText);
padding: $interiorMarginSm 0;
- display: block;
- position: absolute;
- z-index: 10;
- ul {
- @include menuUlReset();
- li {
- box-sizing: border-box;
- border-top: 1px solid pullForward($colorMenuBg, 10%);
+ display: block;
+ position: absolute;
+ z-index: 10;
+ ul {
+ @include menuUlReset();
+ li {
+ box-sizing: border-box;
+ border-top: 1px solid pullForward($colorMenuBg, 10%);
color: $colorMenuFg;
- line-height: $menuLineH;
- padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
- position: relative;
- white-space: nowrap;
- &:first-child {
- border: none;
- }
- &:hover {
- background: $colorMenuHovBg;
- color: $colorMenuHovFg;
+ line-height: $menuLineH;
+ padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+ position: relative;
+ white-space: nowrap;
+ &:first-child {
+ border: none;
+ }
+ &:hover {
+ background: $colorMenuHovBg;
+ color: $colorMenuHovFg;
&:before {
color: $colorMenuHovIc;
}
- }
+ }
&:before {
@extend .ui-symbol;
@extend .type-icon;
@@ -108,8 +109,8 @@
display: inline-block;
left: $interiorMargin * 2;
}
- }
- }
+ }
+ }
}
.menu,
@@ -117,46 +118,46 @@
.context-menu,
.super-menu,
.s-menu-button .menu {
- pointer-events: auto;
- ul li {
- a.menu-item-a {
+ pointer-events: auto;
+ ul li {
+ a.menu-item-a {
color: $colorMenuFg;
display: block;
- }
+ }
&:before,
a.menu-item-a:before {
color: $colorMenuIc;
left: $interiorMargin;
}
- }
+ }
}
.checkbox-menu {
- // Used in search dropdown in tree
- @extend .context-menu;
- ul li {
- padding-left: 50px;
- .checkbox {
- $d: 0.7rem;
- position: absolute;
- left: $interiorMargin;
- top: ($menuLineH - $d) / 1.5;
- em {
- height: $d;
- width: $d;
- &:before {
- font-size: 7px !important;
- height: $d;
- width: $d;
- line-height: $d;
- }
- }
- }
- &:before {
+ // Used in search dropdown in tree
+ @extend .context-menu;
+ ul li {
+ padding-left: 50px;
+ .checkbox {
+ $d: 0.7rem;
+ position: absolute;
+ left: $interiorMargin;
+ top: ($menuLineH - $d) / 1.5;
+ em {
+ height: $d;
+ width: $d;
+ &:before {
+ font-size: 7px !important;
+ height: $d;
+ width: $d;
+ line-height: $d;
+ }
+ }
+ }
+ &:before {
// Type icon
- left: 25px;
- }
- }
+ left: 25px;
+ }
+ }
}
.super-menu,
@@ -168,50 +169,46 @@
}
.super-menu {
- $plw: 50%;
- $prw: 100% - $plw;
+ $plw: 50%;
+ $prw: 100% - $plw;
position: absolute;
- width: 500px;
- .w-menu {
+ .w-menu {
align-items: stretch;
display: flex;
flex-direction: row;
margin: $interiorMarginLg;
- }
- .col {
+ }
+ .col {
box-sizing: border-box;
flex: 1 1 auto;
- max-height: 70vh;
overflow-x: hidden;
- &.menu-items {
- border-right: 1px solid pullForward($colorMenuBg, 10%);
+ &.menu-items {
+ border-right: 1px solid pullForward($colorMenuBg, 10%);
overflow-y: auto;
- padding-right: $interiorMargin;
- width: $plw;
- ul {
- li {
- border-radius: $controlCr;
- padding-left: 30px;
- border-top: none;
- }
- }
- }
- &.menu-item-description {
+ padding-right: $interiorMargin;
+ width: $plw;
+ ul {
+ li {
+ border-radius: $controlCr;
+ padding-left: 30px;
+ border-top: none;
+ }
+ }
+ }
+ &.menu-item-description {
+ $p: $interiorMargin * 3;
overflow-y: hidden;
- padding: $interiorMargin * 5;
- width: $prw;
+ padding: $p $p 0 $p;
+ width: $prw;
+
.desc-area {
&.icon {
color: $colorCreateMenuLgIcon;
- font-size: 8em;
- margin-bottom: $interiorMargin * 3;
position: relative;
text-align: center;
}
&.title {
color: $colorCreateMenuText;
- font-size: 1.2em;
- margin-bottom: $interiorMargin * 2;
}
&.description {
color: pushBack($colorCreateMenuText, 20%);
@@ -219,68 +216,104 @@
line-height: 1.5em;
}
}
- }
- }
+ }
+ }
+
+ .w-title-desc {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden; // Height set in specific menu instances
+ }
+
+ // Specific menu instances
+ &.l-create-menu {
+ width: 500px;
+ .col {
+ max-height: 70vh;
+ }
+ .w-title-desc {
+ height: 190px;
+ }
+ .desc-area {
+ &.icon {
+ font-size: 8em;
+ height: 135px;
+ margin-bottom: $interiorMargin * 3;
+ }
+ &.title {
+ font-size: 1.2em;
+ margin-bottom: $interiorMargin * 2;
+ }
+ }
+ }
&.mini {
width: 400px;
.col {
- height: 320px;
max-height: 50vh;
&.menu-items {
font-size: 0.8em;
}
&.menu-item-description {
- padding: $interiorMargin * 3;
- .desc-area {
- &.icon {
- font-size: 4em;
- }
- &.title {
- font-size: 1em;
- }
- }
+ $p: $interiorMargin * 2;
+ padding: $p $p 0 $p;
+ }
+ }
+ .w-title-desc {
+ height: 180px;
+ }
+ .desc-area {
+ &.icon {
+ font-size: 4em;
+ height: 70px;
+ margin-bottom: $interiorMargin * 3;
+ }
+ &.title {
+ font-size: 1em;
+ margin-bottom: $interiorMargin * 2;
}
}
}
}
+
.context-menu {
- font-size: 0.80rem;
+ font-size: 0.80rem;
}
.context-menu-holder,
.menu-holder {
- position: absolute;
- z-index: 120;
- .context-menu-wrapper {
- position: absolute;
- height: 100%;
- width: 100%;
- }
- &.go-left .context-menu,
- &.go-left .menu {
- right: 0;
- }
- &.go-up .context-menu,
- &.go-up .menu {
- bottom: 0;
- }
+ position: absolute;
+ z-index: 120;
+ .context-menu-wrapper {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ }
+ &.go-left .context-menu,
+ &.go-left .menu {
+ right: 0;
+ }
+ &.go-up .context-menu,
+ &.go-up .menu {
+ bottom: 0;
+ }
}
.context-menu-holder {
- pointer-events: none;
- height: 200px;
- width: 170px;
+ pointer-events: none;
+ height: 200px;
+ width: 170px;
}
.btn-bar.right .menu,
.menus-to-left .menu {
z-index: 79;
- left: auto;
- right: 0;
- width: auto;
+ left: auto;
+ right: 0;
+ width: auto;
}
.menus-up .menu {
- bottom: $btnStdH; top: auto;
+ bottom: $btnStdH;
+ top: auto;
}
diff --git a/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html b/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html
index fdd25d1e93..1609a07858 100644
--- a/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html
+++ b/platform/features/conductor/core/res/templates/mode-selector/mode-menu.html
@@ -34,11 +34,13 @@
diff --git a/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html b/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html
index af6b9c2b7d..9c698300c2 100644
--- a/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html
+++ b/platform/features/conductor/core/res/templates/mode-selector/mode-selector.html
@@ -24,7 +24,7 @@
ng-click="modeController.toggle()">
{{ngModel.selected.name}}
-