ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 21:53:08 +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="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
</div>
<div class="abs editor l-dialog">
<div class="abs editor">
<div class="progress-info progress-current-action">
{{ngModel.dialog.actionText}}
</div>

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

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

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

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

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

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

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

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

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

@ -1,16 +1,12 @@
@include phoneandtablet {
.overlay {
$m: 0;
.clk-icon.close {
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
}
> .holder {
@include border-radius($m);
top: $m;
right: $m;
bottom: $m;
left: $m;
height: 90%; width: 90%;
> .contents {
top: $mobileOverlayMargin;
right: $mobileOverlayMargin;
@ -22,35 +18,61 @@
margin-right: 1.2em;
}
}
.form.editor {
border: none;
.contents {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
}
}
@include phone {
.overlay > .holder > .contents .form.editor .contents .form-row {
> .label,
> .controls {
//@include test(blue);
display: block;
float: none;
width: 100%;
.overlay > .holder {
//@include test(orange); // This works!
$m: 0;
@include border-radius($m);
top: $m;
right: $m;
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.
*****************************************************************************/
.overlay {
.blocker {
background: $colorOvrBlocker;
z-index: 100;
}
.blocker {
background: $colorOvrBlocker;
z-index: 100;
}
.clk-icon.close {
font-size: 0.8rem;
position: absolute;
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
z-index: 100;
top: $interiorMarginLg;
right: $interiorMarginLg;
bottom: auto;
left: auto;
z-index: 100;
}
>.holder {
$i: 15%;
@include containerSubtle($colorOvrBg, $colorOvrFg);
@include border-radius($basicCr * 3);
color: $colorOvrFg;
top: $i; right: $i; bottom: $i; left: $i;
z-index: 101;
>.contents {
> .holder {
//$i: 15%;
@include containerSubtle($colorOvrBg, $colorOvrFg);
@include border-radius($basicCr * 3);
color: $colorOvrFg;
top: 50%;
right: auto;
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;
top: $m; right: $m; bottom: $m; left: $m;
top: $m;
right: $m;
bottom: $m;
left: $m;
}
}
}
.title {
@include ellipsize();
@include ellipsize();
font-size: 1.2em;
line-height: 120%;
margin-bottom: $interiorMargin;
margin-bottom: $interiorMargin;
}
.hint {
color: pushBack($colorOvrFg, 20%);
}
.top-bar {
height: $ovrTopBarH;
}
.editor {
top: $ovrTopBarH + ($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 {
$h: $progressBarHOverlay;
.l-progress-bar {
$h: $progressBarHOverlay;
display: block;
height: $h;
line-height: $h;
height: $h;
line-height: $h;
margin: .5em 0;
width: 100%;
}
width: 100%;
}
.bottom-bar {
top: auto; right: 0; bottom: 0; left: 0;
overflow: visible;
top: auto;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
//font-size: 1em;
height: $ovrFooterH;
text-align: right;
.s-btn {
$bg: $colorOvrBtnBg;
&:not(.major) {
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
}
font-size: 95%;
height: $ovrFooterH;
line-height: $ovrFooterH;
$bg: $colorOvrBtnBg;
&:not(.major) {
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
}
font-size: 95%;
height: $ovrFooterH;
line-height: $ovrFooterH;
margin-left: $interiorMargin;
padding: 0 $interiorMargin * 3;
//&.major {
// @extend .s-btn.major;
// &:hover {
// @extend .s-btn.major:hover;
// }
//}
padding: 0 $interiorMargin * 3;
//&.major {
// @extend .s-btn.major;
// &:hover {
// @extend .s-btn.major:hover;
// }
//}
}
}
.contents.l-dialog {
$myM: $interiorMargin;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
overflow: auto;
.field.l-med {
input[type='text'] {
width: 100%;
}
}
}
}
.t-dialog-sm .overlay > .holder {
// Used for blocker and in-progress dialogs, modal alerts, etc.
//@include test(red);
min-height: 225px;
height: 225px;
}

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

@ -43,9 +43,9 @@
position: absolute;
}
.editor {
@include border-radius($basicCr * 1.5);
}
//.editor {
// @include border-radius($basicCr * 1.5);
//}
.contents {
$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%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 2; }
z-index: 10; }
/* line 110, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner .banner-elem {
-webkit-flex: 0 1 auto;
@ -3330,12 +3330,6 @@ span.req {
.editor {
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 */
.contents {
box-sizing: border-box;
@ -4204,7 +4198,7 @@ span.req {
bottom: auto;
left: auto;
z-index: 100; }
/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 36, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder {
background-color: #4d4d4d;
-moz-border-radius: 3px;
@ -4228,18 +4222,28 @@ span.req {
-webkit-border-radius: 6px;
border-radius: 6px;
color: #e6e6e6;
top: 15%;
right: 15%;
bottom: 15%;
left: 15%;
top: 50%;
right: auto;
bottom: auto;
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; }
/* line 40, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 53, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder > .contents {
top: 25px;
right: 25px;
bottom: 25px;
left: 25px; }
/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .title {
overflow: hidden;
text-overflow: ellipsis;
@ -4247,26 +4251,30 @@ span.req {
font-size: 1.2em;
line-height: 120%;
margin-bottom: 5px; }
/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .hint {
color: #b3b3b3; }
/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar {
height: 60px; }
/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor {
top: 70px;
bottom: 40px;
left: 0;
right: 0; }
/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
right: 0;
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 {
display: block;
height: 15px;
line-height: 15px;
margin: .5em 0;
width: 100%; }
/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar {
top: auto;
right: 0;
@ -4275,14 +4283,14 @@ span.req {
overflow: visible;
height: 30px;
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 {
font-size: 95%;
height: 30px;
line-height: 30px;
margin-left: 5px;
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) {
background-color: gray;
-moz-border-radius: 3px;
@ -4321,23 +4329,32 @@ span.req {
/* 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 {
color: white; } }
/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog {
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
overflow: auto; }
/* line 107, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog .field.l-med input[type='text'] {
width: 100%; }
/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */
.t-dialog-sm .overlay > .holder {
min-height: 225px;
height: 225px; }
@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 {
top: 10px;
right: 10px; }
/* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
top: 20px;
right: 20px; }
/* 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 {
-moz-border-radius: 0;
-webkit-border-radius: 0;
@ -4345,35 +4362,49 @@ span.req {
top: 0;
right: 0;
bottom: 0;
left: 0; }
/* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents {
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; }
/* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .top-bar > .title {
margin-right: 1.2em; }
/* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor {
border: none; }
/* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
@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 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents .form-row > .label,
.overlay > .holder > .contents .form.editor .contents .form-row > .controls {
display: block;
float: none;
width: 100%; }
/* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents .form-row > .label:after {
float: none; } }
left: 0;
height: auto;
width: auto;
min-width: 200px;
min-height: 200px;
max-height: 100%;
max-width: 100%;
overflow: auto;
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none; }
/* line 42, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .editor .form .form-row > .label,
.overlay > .holder .editor .form .form-row > .controls {
display: block;
float: none;
width: 100%; }
/* line 50, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .editor .form .form-row > .label:after {
float: none; }
/* line 56, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .contents .top-bar,
.overlay > .holder .contents .editor,
.overlay > .holder .contents .bottom-bar {
background-color: rgba(255, 165, 0, 0.2);
top: auto;
right: auto;
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
* 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%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 2; }
z-index: 10; }
/* line 110, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner .banner-elem {
-webkit-flex: 0 1 auto;
@ -3262,12 +3262,6 @@ span.req {
.editor {
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 */
.contents {
box-sizing: border-box;
@ -4136,7 +4130,7 @@ span.req {
bottom: auto;
left: auto;
z-index: 100; }
/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 36, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder {
background-color: #fcfcfc;
-moz-border-radius: 4px;
@ -4151,18 +4145,28 @@ span.req {
-webkit-border-radius: 12px;
border-radius: 12px;
color: #666;
top: 15%;
right: 15%;
bottom: 15%;
left: 15%;
top: 50%;
right: auto;
bottom: auto;
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; }
/* line 40, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 53, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay > .holder > .contents {
top: 25px;
right: 25px;
bottom: 25px;
left: 25px; }
/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .title {
overflow: hidden;
text-overflow: ellipsis;
@ -4170,26 +4174,30 @@ span.req {
font-size: 1.2em;
line-height: 120%;
margin-bottom: 5px; }
/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .hint {
color: #999999; }
/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar {
height: 60px; }
/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor {
top: 70px;
bottom: 40px;
left: 0;
right: 0; }
/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
right: 0;
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 {
display: block;
height: 15px;
line-height: 15px;
margin: .5em 0;
width: 100%; }
/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */
/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar {
top: auto;
right: 0;
@ -4198,14 +4206,14 @@ span.req {
overflow: visible;
height: 30px;
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 {
font-size: 95%;
height: 30px;
line-height: 30px;
margin-left: 5px;
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) {
background-color: #969696;
-moz-border-radius: 4px;
@ -4235,23 +4243,32 @@ span.req {
/* 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 {
color: white; } }
/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog {
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
overflow: auto; }
/* line 107, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog .field.l-med input[type='text'] {
width: 100%; }
/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */
.t-dialog-sm .overlay > .holder {
min-height: 225px;
height: 225px; }
@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 {
top: 10px;
right: 10px; }
/* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
top: 20px;
right: 20px; }
/* 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 {
-moz-border-radius: 0;
-webkit-border-radius: 0;
@ -4259,35 +4276,49 @@ span.req {
top: 0;
right: 0;
bottom: 0;
left: 0; }
/* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents {
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; }
/* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .top-bar > .title {
margin-right: 1.2em; }
/* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor {
border: none; }
/* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
@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 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents .form-row > .label,
.overlay > .holder > .contents .form.editor .contents .form-row > .controls {
display: block;
float: none;
width: 100%; }
/* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents .form-row > .label:after {
float: none; } }
left: 0;
height: auto;
width: auto;
min-width: 200px;
min-height: 200px;
max-height: 100%;
max-width: 100%;
overflow: auto;
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none; }
/* line 42, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .editor .form .form-row > .label,
.overlay > .holder .editor .form .form-row > .controls {
display: block;
float: none;
width: 100%; }
/* line 50, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .editor .form .form-row > .label:after {
float: none; }
/* line 56, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
.overlay > .holder .contents .top-bar,
.overlay > .holder .contents .editor,
.overlay > .holder .contents .bottom-bar {
background-color: rgba(255, 165, 0, 0.2);
top: auto;
right: auto;
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
* as represented by the Administrator of the National Aeronautics and Space