ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-12 13:33:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Fixed z-index problem with child-frames

Browse Source 
open nem_prototype
open #341
Added discrete z-index definition for frame.child-frame.panel;
This commit is contained in:
Charles Hacskaylo 2015-12-11 14:47:25 -08:00
parent 0ce19ad75d
commit 24d28d6ec2
3 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -25,6 +25,7 @@
&.child-frame.panel { &.child-frame.panel {
background: $colorBodyBg; background: $colorBodyBg;
border: 1px solid $bc; border: 1px solid $bc;
z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
&:hover { &:hover {
border-color: lighten($bc, 10%); border-color: lighten($bc, 10%);
} }

27
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -6284,52 +6284,53 @@ ul.tree {
/* line 25, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 25, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.child-frame.panel { .frame.child-frame.panel {
background: #333; background: #333;
border: 1px solid rgba(153, 153, 153, 0.1); } border: 1px solid rgba(153, 153, 153, 0.1);
/* line 28, ../../../../general/res/sass/user-environ/_frame.scss */ z-index: 0; }
/* line 29, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.child-frame.panel:hover { .frame.child-frame.panel:hover {
border-color: rgba(179, 179, 179, 0.1); } border-color: rgba(179, 179, 179, 0.1); }
/* line 32, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 33, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .object-top-bar { .frame .object-top-bar {
font-size: 0.75em; font-size: 0.75em;
height: 16px; height: 16px;
line-height: 16px; } line-height: 16px; }
/* line 36, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 37, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .object-top-bar .left { .frame .object-top-bar .left {
padding-right: 10px; } padding-right: 10px; }
/* line 40, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
.frame > .object-holder.abs, .frame > .object-holder.l-inspect, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager, .frame > .object-holder.abs, .frame > .object-holder.l-inspect, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager,
.l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area, .frame > .object-holder.l-object-wrapper, .l-object-wrapper .frame > .object-holder.object-holder-main { .l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area, .frame > .object-holder.l-object-wrapper, .l-object-wrapper .frame > .object-holder.object-holder-main {
top: 21px; } top: 21px; }
/* line 43, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 44, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .contents { .frame .contents {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 51, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 52, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-btn, .frame.frame-template .s-menu-btn, .frame.frame-template .s-btn, .frame.frame-template .s-menu-btn,
.frame.frame-template .s-menu-btn { .frame.frame-template .s-menu-btn {
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
padding: 0 5px; } padding: 0 5px; }
/* line 56, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 57, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span, .frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span,
.frame.frame-template .s-menu-btn > span { .frame.frame-template .s-menu-btn > span {
font-size: 0.65rem; } font-size: 0.65rem; }
/* line 61, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 62, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-menu-btn:after { .frame.frame-template .s-menu-btn:after {
font-size: 8px; } font-size: 8px; }
/* line 65, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 66, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
z-index: 10; } z-index: 10; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 72, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
opacity: 0; } opacity: 0; }
/* line 74, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 75, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template:hover .view-switcher { .frame.frame-template:hover .view-switcher {
opacity: 1; } } opacity: 1; } }
/* line 82, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 83, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .view-switcher .title-label { .frame .view-switcher .title-label {
display: none; } display: none; }

27
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -6186,52 +6186,53 @@ ul.tree {
/* line 25, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 25, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.child-frame.panel { .frame.child-frame.panel {
background: #fcfcfc; background: #fcfcfc;
border: 1px solid rgba(102, 102, 102, 0.2); } border: 1px solid rgba(102, 102, 102, 0.2);
/* line 28, ../../../../general/res/sass/user-environ/_frame.scss */ z-index: 0; }
/* line 29, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.child-frame.panel:hover { .frame.child-frame.panel:hover {
border-color: rgba(128, 128, 128, 0.2); } border-color: rgba(128, 128, 128, 0.2); }
/* line 32, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 33, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .object-top-bar { .frame .object-top-bar {
font-size: 0.75em; font-size: 0.75em;
height: 16px; height: 16px;
line-height: 16px; } line-height: 16px; }
/* line 36, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 37, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .object-top-bar .left { .frame .object-top-bar .left {
padding-right: 10px; } padding-right: 10px; }
/* line 40, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
.frame > .object-holder.abs, .frame > .object-holder.l-inspect, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager, .frame > .object-holder.abs, .frame > .object-holder.l-inspect, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager,
.l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area, .frame > .object-holder.l-object-wrapper, .l-object-wrapper .frame > .object-holder.object-holder-main { .l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area, .frame > .object-holder.l-object-wrapper, .l-object-wrapper .frame > .object-holder.object-holder-main {
top: 21px; } top: 21px; }
/* line 43, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 44, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .contents { .frame .contents {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 51, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 52, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-btn, .frame.frame-template .s-menu-btn, .frame.frame-template .s-btn, .frame.frame-template .s-menu-btn,
.frame.frame-template .s-menu-btn { .frame.frame-template .s-menu-btn {
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
padding: 0 5px; } padding: 0 5px; }
/* line 56, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 57, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span, .frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span,
.frame.frame-template .s-menu-btn > span { .frame.frame-template .s-menu-btn > span {
font-size: 0.65rem; } font-size: 0.65rem; }
/* line 61, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 62, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-menu-btn:after { .frame.frame-template .s-menu-btn:after {
font-size: 8px; } font-size: 8px; }
/* line 65, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 66, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
z-index: 10; } z-index: 10; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 72, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
opacity: 0; } opacity: 0; }
/* line 74, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 75, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template:hover .view-switcher { .frame.frame-template:hover .view-switcher {
opacity: 1; } } opacity: 1; } }
/* line 82, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 83, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .view-switcher .title-label { .frame .view-switcher .title-label {
display: none; } display: none; }