ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-29 17:38:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Fronted] Tweaks to bubbles and context menus scss

Browse Source 
WTD-1248
WTD-884
Changed z-index of context menus and bubbles to put the menus above;
Changed text wrapping of 'value' td to no-wrap;
Changed min and max-width of .l-infobubble;
This commit is contained in:
Charles Hacskaylo 2015-06-12 15:46:31 -07:00
parent fd63aa30ea
commit 0b46050e04
3 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2443,7 +2443,7 @@ label.checkbox.custom {
position: absolute; position: absolute;
height: 200px; height: 200px;
width: 170px; width: 170px;
z-index: 59; } z-index: 70; }
/* line 172, ../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;
@ -3840,66 +3840,70 @@ input[type="date"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
position: absolute; position: absolute;
z-index: 70; } z-index: 50; }
/* line 29, ../sass/helpers/_bubbles.scss */ /* line 29, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble { .l-infobubble-wrapper .l-infobubble {
display: inline-block; display: inline-block;
min-width: 100px;
max-width: 300px; max-width: 300px;
padding: 5px 10px; } padding: 5px 10px; }
/* line 33, ../sass/helpers/_bubbles.scss */ /* line 34, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble:before { .l-infobubble-wrapper .l-infobubble:before {
content: ""; content: "";
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; } height: 0; }
/* line 39, ../sass/helpers/_bubbles.scss */ /* line 40, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble table { .l-infobubble-wrapper .l-infobubble table {
width: 100%; } width: 100%; }
/* line 42, ../sass/helpers/_bubbles.scss */ /* line 43, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble table tr td { .l-infobubble-wrapper .l-infobubble table tr td {
padding: 2px 0; padding: 2px 0;
vertical-align: top; } vertical-align: top; }
/* line 49, ../sass/helpers/_bubbles.scss */ /* line 50, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble table tr td.label { .l-infobubble-wrapper .l-infobubble table tr td.label {
padding-right: 10px; padding-right: 10px;
white-space: nowrap; } white-space: nowrap; }
/* line 58, ../sass/helpers/_bubbles.scss */ /* line 54, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble table tr td.value {
white-space: nowrap; }
/* line 60, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap { .l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
white-space: normal; } white-space: normal; }
/* line 64, ../sass/helpers/_bubbles.scss */ /* line 66, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble .title { .l-infobubble-wrapper .l-infobubble .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 71, ../sass/helpers/_bubbles.scss */ /* line 73, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-left { .l-infobubble-wrapper.arw-left {
margin-left: 10px; } margin-left: 10px; }
/* line 73, ../sass/helpers/_bubbles.scss */ /* line 75, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-left .l-infobubble::before { .l-infobubble-wrapper.arw-left .l-infobubble::before {
right: 100%; right: 100%;
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
border-right: 7.5px solid #ddd; } border-right: 7.5px solid #ddd; }
/* line 81, ../sass/helpers/_bubbles.scss */ /* line 83, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-right { .l-infobubble-wrapper.arw-right {
margin-right: 10px; } margin-right: 10px; }
/* line 83, ../sass/helpers/_bubbles.scss */ /* line 85, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-right .l-infobubble::before { .l-infobubble-wrapper.arw-right .l-infobubble::before {
left: 100%; left: 100%;
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
border-left: 7.5px solid #ddd; } border-left: 7.5px solid #ddd; }
/* line 92, ../sass/helpers/_bubbles.scss */ /* line 94, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-top .l-infobubble::before { .l-infobubble-wrapper.arw-top .l-infobubble::before {
top: 10px; } top: 10px; }
/* line 98, ../sass/helpers/_bubbles.scss */ /* line 100, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-btm .l-infobubble::before { .l-infobubble-wrapper.arw-btm .l-infobubble::before {
bottom: 10px; } bottom: 10px; }
/* line 103, ../sass/helpers/_bubbles.scss */ /* line 105, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-down { .l-infobubble-wrapper.arw-down {
margin-bottom: 10px; } margin-bottom: 10px; }
/* line 105, ../sass/helpers/_bubbles.scss */ /* line 107, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-down .l-infobubble::before { .l-infobubble-wrapper.arw-down .l-infobubble::before {
left: 50%; left: 50%;
top: 100%; top: 100%;
@ -3908,7 +3912,7 @@ input[type="date"] {
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 7.5px solid #ddd; } border-top: 7.5px solid #ddd; }
/* line 118, ../sass/helpers/_bubbles.scss */ /* line 120, ../sass/helpers/_bubbles.scss */
.s-infobubble { .s-infobubble {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -3916,18 +3920,18 @@ input[type="date"] {
background: #ddd; background: #ddd;
color: #666; color: #666;
font-size: 0.8rem; } font-size: 0.8rem; }
/* line 124, ../sass/helpers/_bubbles.scss */ /* line 126, ../sass/helpers/_bubbles.scss */
.s-infobubble .title { .s-infobubble .title {
color: #333333; color: #333333;
font-weight: bold; } font-weight: bold; }
/* line 129, ../sass/helpers/_bubbles.scss */ /* line 131, ../sass/helpers/_bubbles.scss */
.s-infobubble tr td { .s-infobubble tr td {
border-top: 1px solid #c4c4c4; border-top: 1px solid #c4c4c4;
font-size: 0.9em; } font-size: 0.9em; }
/* line 133, ../sass/helpers/_bubbles.scss */ /* line 135, ../sass/helpers/_bubbles.scss */
.s-infobubble tr:first-child td { .s-infobubble tr:first-child td {
border-top: none; } border-top: none; }
/* line 137, ../sass/helpers/_bubbles.scss */ /* line 139, ../sass/helpers/_bubbles.scss */
.s-infobubble .value { .s-infobubble .value {
color: #333333; } color: #333333; }

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

@ -168,7 +168,7 @@
position: absolute; position: absolute;
height: 200px; height: 200px;
width: 170px; width: 170px;
z-index: 59; z-index: 70;
.context-menu-wrapper { .context-menu-wrapper {
position: absolute; position: absolute;
height: 100%; height: 100%;

6
platform/commonUI/general/res/sass/helpers/_bubbles.scss
View File

@ -25,9 +25,10 @@
$arwSize: 5px; $arwSize: 5px;
@include box-shadow(rgba(black, 0.4) 0 1px 5px); @include box-shadow(rgba(black, 0.4) 0 1px 5px);
position: absolute; position: absolute;
z-index: 70; z-index: 50;
.l-infobubble { .l-infobubble {
display: inline-block; display: inline-block;
min-width: 100px;
max-width: 300px; max-width: 300px;
padding: 5px 10px; padding: 5px 10px;
&:before { &:before {
@ -51,8 +52,9 @@
white-space: nowrap; white-space: nowrap;
} }
&.value { &.value {
//@include ellipsize();
//@include test(red); //@include test(red);
//white-space: nowrap; white-space: nowrap;
//width: 90%; //width: 90%;
} }
&.align-wrap { &.align-wrap {