ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-06 10:38:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Dialog and overlay layout/positioning mods

Browse Source 
open #159
open #170
Restructured overlay size and positioning approach
for better flexibility;
Getting new dialogs and the overlay to
play nicely in mobile context;
This commit is contained in:
Charles Hacskaylo 2015-10-07 16:36:55 -07:00
parent 7f529eec68
commit 182eff977c
11 changed files with 330 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/dialog/res/templates/blocking-message.html
View File

@ -3,7 +3,7 @@
<div class="title">{{ngModel.dialog.title}}</div> <div class="title">{{ngModel.dialog.title}}</div>
<div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div> <div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
</div> </div>
<div class="abs editor l-dialog"> <div class="abs editor">
<div class="progress-info progress-current-action"> <div class="progress-info progress-current-action">
{{ngModel.dialog.actionText}} {{ngModel.dialog.actionText}}
</div> </div>

2
platform/commonUI/dialog/res/templates/dialog.html
View File

@ -23,7 +23,7 @@
<div class="title">{{ngModel.title}}</div> <div class="title">{{ngModel.title}}</div>
<div class="hint">All fields marked <span class="ui-symbol req">*</span> are required.</div> <div class="hint">All fields marked <span class="ui-symbol req">*</span> are required.</div>
</div> </div>
<div class='abs editor l-dialog'> <div class='abs editor'>
<mct-form ng-model="ngModel.value" <mct-form ng-model="ngModel.value"
structure="ngModel.structure" structure="ngModel.structure"
name="createForm"> name="createForm">

2
platform/commonUI/dialog/res/templates/overlay-options.html
View File

@ -24,7 +24,7 @@
<div class="title">{{ngModel.dialog.title}}</div> <div class="title">{{ngModel.dialog.title}}</div>
<div class="hint">{{ngModel.dialog.hint}}</div> <div class="hint">{{ngModel.dialog.hint}}</div>
</div> </div>
<div class='abs editor l-dialog'> <div class='abs editor'>
<mct-include key="ngModel.dialog.template" <mct-include key="ngModel.dialog.template"
parameters="ngModel.dialog.parameters" parameters="ngModel.dialog.parameters"
ng-model="ngModel.dialog.model"> ng-model="ngModel.dialog.model">

8
platform/commonUI/dialog/res/templates/overlay.html
View File

@ -25,11 +25,7 @@
<a href="" <a href=""
ng-click="ngModel.cancel()" ng-click="ngModel.cancel()"
ng-if="ngModel.cancel" ng-if="ngModel.cancel"
class="clk-icon icon ui-symbol close"> class="clk-icon icon ui-symbol close">x</a>
x <div class="abs contents" ng-transclude></div>
</a>
<div class="abs contents" ng-transclude>
</div>
</div> </div>
</div> </div>

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

@ -131,7 +131,7 @@
width: 100px; width: 100px;
} }
.progress-info.progress-estimate { display: none; } .progress-info.progress-estimate { display: none; }
z-index: 2; z-index: 10;
} }
.s-message-banner, .s-message-banner,

2
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@ -23,7 +23,7 @@
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
$mobileListIconSize: 30px; $mobileListIconSize: 30px;
$mobileTitleDescH: 35px; $mobileTitleDescH: 35px;
$mobileOverlayMargin: 10px; $mobileOverlayMargin: 20px;
$phoneItemH: floor($ueBrowseGridItemLg/4); $phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3); $tabletItemH: floor($ueBrowseGridItemLg/3);

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

@ -1,16 +1,12 @@
@include phoneandtablet { @include phoneandtablet {
.overlay { .overlay {
$m: 0;
.clk-icon.close { .clk-icon.close {
top: $mobileOverlayMargin; right: $mobileOverlayMargin; top: $mobileOverlayMargin; right: $mobileOverlayMargin;
} }
> .holder { > .holder {
@include border-radius($m); height: 90%; width: 90%;
top: $m;
right: $m;
bottom: $m;
left: $m;
> .contents { > .contents {
top: $mobileOverlayMargin; top: $mobileOverlayMargin;
right: $mobileOverlayMargin; right: $mobileOverlayMargin;
@ -22,35 +18,61 @@
margin-right: 1.2em; margin-right: 1.2em;
} }
} }
.form.editor {
border: none;
.contents {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
} }
} }
} }
} }
@include phone { @include phone {
.overlay > .holder > .contents .form.editor .contents .form-row { .overlay > .holder {
> .label, //@include test(orange); // This works!
> .controls { $m: 0;
//@include test(blue); @include border-radius($m);
display: block; top: $m;
float: none; right: $m;
width: 100%; bottom: $m;
left: $m;
height: auto; width: auto;
min-width: 200px; min-height: 200px;
max-height: 100%; max-width: 100%;
overflow: auto;
@include transform(none);
.editor .form .form-row {
> .label,
> .controls {
//@include test(blue);
display: block;
float: none;
width: 100%;
}
> .label {
&:after {
float: none;
}
}
}
.contents .top-bar,
.contents .editor,
.contents .bottom-bar {
//@include test(orange);
top: auto; right: auto; bottom: auto; left: auto;
height: auto; width: auto;
margin-bottom: $interiorMarginLg * 2;
position: relative;
}
}
.t-dialog-sm .overlay > .holder {
//@include test(blue);
height: auto; max-height: 100%;
}
}
@include phonePortrait {
.overlay > .holder {
.contents .bottom-bar {
text-align: center;
} }
> .label {
&:after {
float: none;
}
}
} }
} }

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

@ -20,93 +20,113 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.overlay { .overlay {
.blocker { .blocker {
background: $colorOvrBlocker; background: $colorOvrBlocker;
z-index: 100; z-index: 100;
} }
.clk-icon.close { .clk-icon.close {
font-size: 0.8rem; font-size: 0.8rem;
position: absolute; position: absolute;
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto; top: $interiorMarginLg;
z-index: 100; right: $interiorMarginLg;
bottom: auto;
left: auto;
z-index: 100;
} }
>.holder { > .holder {
$i: 15%; //$i: 15%;
@include containerSubtle($colorOvrBg, $colorOvrFg); @include containerSubtle($colorOvrBg, $colorOvrFg);
@include border-radius($basicCr * 3); @include border-radius($basicCr * 3);
color: $colorOvrFg; color: $colorOvrFg;
top: $i; right: $i; bottom: $i; left: $i; top: 50%;
z-index: 101; right: auto;
>.contents { bottom: auto;
left: 50%;
@include transform(translateX(-50%) translateY(-50%));
height: 70%;
width: 50%;
min-height: 300px;
max-height: 800px;
min-width: 450px;
max-width: 1000px;
z-index: 101;
> .contents {
$m: $overlayMargin; $m: $overlayMargin;
top: $m; right: $m; bottom: $m; left: $m; top: $m;
right: $m;
bottom: $m;
left: $m;
} }
} }
.title { .title {
@include ellipsize(); @include ellipsize();
font-size: 1.2em; font-size: 1.2em;
line-height: 120%; line-height: 120%;
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }
.hint { .hint {
color: pushBack($colorOvrFg, 20%); color: pushBack($colorOvrFg, 20%);
} }
.top-bar { .top-bar {
height: $ovrTopBarH; height: $ovrTopBarH;
} }
.editor { .editor {
top: $ovrTopBarH + ($interiorMargin * 2); top: $ovrTopBarH + ($interiorMargin * 2);
bottom: $ovrFooterH + $interiorMargin * 2; bottom: $ovrFooterH + $interiorMargin * 2;
left: 0; right: 0; left: 0;
right: 0;
overflow: auto;
.field.l-med {
input[type='text'] {
width: 100%;
}
}
} }
.l-progress-bar { .l-progress-bar {
$h: $progressBarHOverlay; $h: $progressBarHOverlay;
display: block; display: block;
height: $h; height: $h;
line-height: $h; line-height: $h;
margin: .5em 0; margin: .5em 0;
width: 100%; width: 100%;
} }
.bottom-bar { .bottom-bar {
top: auto; right: 0; bottom: 0; left: 0; top: auto;
overflow: visible; right: 0;
bottom: 0;
left: 0;
overflow: visible;
//font-size: 1em; //font-size: 1em;
height: $ovrFooterH; height: $ovrFooterH;
text-align: right; text-align: right;
.s-btn { .s-btn {
$bg: $colorOvrBtnBg; $bg: $colorOvrBtnBg;
&:not(.major) { &:not(.major) {
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg); @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
} }
font-size: 95%; font-size: 95%;
height: $ovrFooterH; height: $ovrFooterH;
line-height: $ovrFooterH; line-height: $ovrFooterH;
margin-left: $interiorMargin; margin-left: $interiorMargin;
padding: 0 $interiorMargin * 3; padding: 0 $interiorMargin * 3;
//&.major { //&.major {
// @extend .s-btn.major; // @extend .s-btn.major;
// &:hover { // &:hover {
// @extend .s-btn.major:hover; // @extend .s-btn.major:hover;
// } // }
//} //}
} }
} }
.contents.l-dialog { }
$myM: $interiorMargin;
top: $myM; .t-dialog-sm .overlay > .holder {
right: $myM; // Used for blocker and in-progress dialogs, modal alerts, etc.
bottom: $myM; //@include test(red);
left: $myM; min-height: 225px;
overflow: auto; height: 225px;
.field.l-med {
input[type='text'] {
width: 100%;
}
}
}
} }

6
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -43,9 +43,9 @@
position: absolute; position: absolute;
} }
.editor { //.editor {
@include border-radius($basicCr * 1.5); // @include border-radius($basicCr * 1.5);
} //}
.contents { .contents {
$myM: 0; //$interiorMargin; $myM: 0; //$interiorMargin;

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

@ -2483,7 +2483,7 @@ label.checkbox.custom {
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2; } z-index: 10; }
/* line 110, ../../../../general/res/sass/controls/_messages.scss */ /* line 110, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner .banner-elem { .l-message-banner .banner-elem {
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
@ -3330,12 +3330,6 @@ span.req {
.editor { .editor {
position: absolute; } position: absolute; }
/* line 46, ../../../../general/res/sass/user-environ/_layout.scss */
.editor {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; }
/* line 50, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 50, ../../../../general/res/sass/user-environ/_layout.scss */
.contents { .contents {
box-sizing: border-box; box-sizing: border-box;
@ -4204,7 +4198,7 @@ span.req {
bottom: auto; bottom: auto;
left: auto; left: auto;
z-index: 100; } z-index: 100; }
/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 36, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder { .overlay > .holder {
background-color: #4d4d4d; background-color: #4d4d4d;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -4228,18 +4222,28 @@ span.req {
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
color: #e6e6e6; color: #e6e6e6;
top: 15%; top: 50%;
right: 15%; right: auto;
bottom: 15%; bottom: auto;
left: 15%; left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
height: 70%;
width: 50%;
min-height: 300px;
max-height: 800px;
min-width: 450px;
max-width: 1000px;
z-index: 101; } z-index: 101; }
/* line 40, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder > .contents { .overlay > .holder > .contents {
top: 25px; top: 25px;
right: 25px; right: 25px;
bottom: 25px; bottom: 25px;
left: 25px; } left: 25px; }
/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 61, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .title { .overlay .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -4247,26 +4251,30 @@ span.req {
font-size: 1.2em; font-size: 1.2em;
line-height: 120%; line-height: 120%;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .hint { .overlay .hint {
color: #b3b3b3; } color: #b3b3b3; }
/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 72, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 76, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor { .overlay .editor {
top: 70px; top: 70px;
bottom: 40px; bottom: 40px;
left: 0; left: 0;
right: 0; } right: 0;
/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */ overflow: auto; }
/* line 83, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor .field.l-med input[type='text'] {
width: 100%; }
/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .l-progress-bar { .overlay .l-progress-bar {
display: block; display: block;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
margin: .5em 0; margin: .5em 0;
width: 100%; } width: 100%; }
/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 98, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@ -4275,14 +4283,14 @@ span.req {
overflow: visible; overflow: visible;
height: 30px; height: 30px;
text-align: right; } text-align: right; }
/* line 81, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
font-size: 95%; font-size: 95%;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-left: 5px; margin-left: 5px;
padding: 0 15px; } padding: 0 15px; }
/* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 109, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
background-color: gray; background-color: gray;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -4321,23 +4329,32 @@ span.req {
/* line 296, ../../../../general/res/sass/_mixins.scss */ /* line 296, ../../../../general/res/sass/_mixins.scss */
.overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
color: white; } } color: white; } }
/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog { /* line 127, ../../../../general/res/sass/overlay/_overlay.scss */
top: 5px; .t-dialog-sm .overlay > .holder {
right: 5px; min-height: 225px;
bottom: 5px; height: 225px; }
left: 5px;
overflow: auto; }
/* line 107, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog .field.l-med input[type='text'] {
width: 100%; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay .clk-icon.close { .overlay .clk-icon.close {
top: 10px; top: 20px;
right: 10px; } right: 20px; }
/* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ /* line 7, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder {
height: 90%;
width: 90%; }
/* line 10, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px; }
/* line 17, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .top-bar > .title {
margin-right: 1.2em; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 27, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder { .overlay > .holder {
-moz-border-radius: 0; -moz-border-radius: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
@ -4345,35 +4362,49 @@ span.req {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0;
/* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ height: auto;
.overlay > .holder > .contents { width: auto;
top: 10px; min-width: 200px;
right: 10px; min-height: 200px;
bottom: 10px; max-height: 100%;
left: 10px; } max-width: 100%;
/* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ overflow: auto;
.overlay > .holder > .contents .top-bar > .title { -moz-transform: none;
margin-right: 1.2em; } -ms-transform: none;
/* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ -webkit-transform: none;
.overlay > .holder > .contents .form.editor { transform: none; }
border: none; } /* line 42, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
/* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .editor .form .form-row > .label,
.overlay > .holder > .contents .form.editor .contents { .overlay > .holder .editor .form .form-row > .controls {
top: 0; display: block;
right: 0; float: none;
bottom: 0; width: 100%; }
left: 0; } } /* line 50, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { .overlay > .holder .editor .form .form-row > .label:after {
/* line 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ float: none; }
.overlay > .holder > .contents .form.editor .contents .form-row > .label, /* line 56, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents .form-row > .controls { .overlay > .holder .contents .top-bar,
display: block; .overlay > .holder .contents .editor,
float: none; .overlay > .holder .contents .bottom-bar {
width: 100%; } background-color: rgba(255, 165, 0, 0.2);
/* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ top: auto;
.overlay > .holder > .contents .form.editor .contents .form-row > .label:after { right: auto;
float: none; } } bottom: auto;
left: auto;
height: auto;
width: auto;
margin-bottom: 20px;
position: relative; }
/* line 66, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.t-dialog-sm .overlay > .holder {
height: auto;
max-height: 100%; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 74, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .contents .bottom-bar {
text-align: center; } }
/***************************************************************************** /*****************************************************************************
* 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

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

@ -2431,7 +2431,7 @@ label.checkbox.custom {
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2; } z-index: 10; }
/* line 110, ../../../../general/res/sass/controls/_messages.scss */ /* line 110, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner .banner-elem { .l-message-banner .banner-elem {
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
@ -3262,12 +3262,6 @@ span.req {
.editor { .editor {
position: absolute; } position: absolute; }
/* line 46, ../../../../general/res/sass/user-environ/_layout.scss */
.editor {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; }
/* line 50, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 50, ../../../../general/res/sass/user-environ/_layout.scss */
.contents { .contents {
box-sizing: border-box; box-sizing: border-box;
@ -4136,7 +4130,7 @@ span.req {
bottom: auto; bottom: auto;
left: auto; left: auto;
z-index: 100; } z-index: 100; }
/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 36, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder { .overlay > .holder {
background-color: #fcfcfc; background-color: #fcfcfc;
-moz-border-radius: 4px; -moz-border-radius: 4px;
@ -4151,18 +4145,28 @@ span.req {
-webkit-border-radius: 12px; -webkit-border-radius: 12px;
border-radius: 12px; border-radius: 12px;
color: #666; color: #666;
top: 15%; top: 50%;
right: 15%; right: auto;
bottom: 15%; bottom: auto;
left: 15%; left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
height: 70%;
width: 50%;
min-height: 300px;
max-height: 800px;
min-width: 450px;
max-width: 1000px;
z-index: 101; } z-index: 101; }
/* line 40, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder > .contents { .overlay > .holder > .contents {
top: 25px; top: 25px;
right: 25px; right: 25px;
bottom: 25px; bottom: 25px;
left: 25px; } left: 25px; }
/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 61, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .title { .overlay .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -4170,26 +4174,30 @@ span.req {
font-size: 1.2em; font-size: 1.2em;
line-height: 120%; line-height: 120%;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .hint { .overlay .hint {
color: #999999; } color: #999999; }
/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 72, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 76, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor { .overlay .editor {
top: 70px; top: 70px;
bottom: 40px; bottom: 40px;
left: 0; left: 0;
right: 0; } right: 0;
/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */ overflow: auto; }
/* line 83, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor .field.l-med input[type='text'] {
width: 100%; }
/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .l-progress-bar { .overlay .l-progress-bar {
display: block; display: block;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
margin: .5em 0; margin: .5em 0;
width: 100%; } width: 100%; }
/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 98, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@ -4198,14 +4206,14 @@ span.req {
overflow: visible; overflow: visible;
height: 30px; height: 30px;
text-align: right; } text-align: right; }
/* line 81, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
font-size: 95%; font-size: 95%;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-left: 5px; margin-left: 5px;
padding: 0 15px; } padding: 0 15px; }
/* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 109, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
background-color: #969696; background-color: #969696;
-moz-border-radius: 4px; -moz-border-radius: 4px;
@ -4235,23 +4243,32 @@ span.req {
/* line 296, ../../../../general/res/sass/_mixins.scss */ /* line 296, ../../../../general/res/sass/_mixins.scss */
.overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
color: white; } } color: white; } }
/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog { /* line 127, ../../../../general/res/sass/overlay/_overlay.scss */
top: 5px; .t-dialog-sm .overlay > .holder {
right: 5px; min-height: 225px;
bottom: 5px; height: 225px; }
left: 5px;
overflow: auto; }
/* line 107, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog .field.l-med input[type='text'] {
width: 100%; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay .clk-icon.close { .overlay .clk-icon.close {
top: 10px; top: 20px;
right: 10px; } right: 20px; }
/* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ /* line 7, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder {
height: 90%;
width: 90%; }
/* line 10, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px; }
/* line 17, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .top-bar > .title {
margin-right: 1.2em; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 27, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder { .overlay > .holder {
-moz-border-radius: 0; -moz-border-radius: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
@ -4259,35 +4276,49 @@ span.req {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0;
/* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ height: auto;
.overlay > .holder > .contents { width: auto;
top: 10px; min-width: 200px;
right: 10px; min-height: 200px;
bottom: 10px; max-height: 100%;
left: 10px; } max-width: 100%;
/* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ overflow: auto;
.overlay > .holder > .contents .top-bar > .title { -moz-transform: none;
margin-right: 1.2em; } -ms-transform: none;
/* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ -webkit-transform: none;
.overlay > .holder > .contents .form.editor { transform: none; }
border: none; } /* line 42, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
/* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .editor .form .form-row > .label,
.overlay > .holder > .contents .form.editor .contents { .overlay > .holder .editor .form .form-row > .controls {
top: 0; display: block;
right: 0; float: none;
bottom: 0; width: 100%; }
left: 0; } } /* line 50, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { .overlay > .holder .editor .form .form-row > .label:after {
/* line 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ float: none; }
.overlay > .holder > .contents .form.editor .contents .form-row > .label, /* line 56, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents .form-row > .controls { .overlay > .holder .contents .top-bar,
display: block; .overlay > .holder .contents .editor,
float: none; .overlay > .holder .contents .bottom-bar {
width: 100%; } background-color: rgba(255, 165, 0, 0.2);
/* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ top: auto;
.overlay > .holder > .contents .form.editor .contents .form-row > .label:after { right: auto;
float: none; } } bottom: auto;
left: auto;
height: auto;
width: auto;
margin-bottom: 20px;
position: relative; }
/* line 66, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.t-dialog-sm .overlay > .holder {
height: auto;
max-height: 100%; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 74, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .contents .bottom-bar {
text-align: center; } }
/***************************************************************************** /*****************************************************************************
* 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