mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +00:00
[Mobile] IN PROGRESS: Overlay and form cleanups
open #74 Widths and layout strategy fixed for label and controls in form when appearing in mobile; Overlay margins adjusted; Cleaned up font size, line-height in tree items;
This commit is contained in:
Charles Hacskaylo
parent
07d0706cd1
commit
39bd292886
@ -69,6 +69,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** STYLE */
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
@ -192,14 +193,14 @@
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
border-top: 1px solid #4d4d4d;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
position: relative; }
|
||||
/* line 46, ../sass/forms/_elems.scss */
|
||||
/* line 47, ../sass/forms/_elems.scss */
|
||||
.form .form-row.first {
|
||||
border-top: none; }
|
||||
/* line 50, ../sass/forms/_elems.scss */
|
||||
/* line 51, ../sass/forms/_elems.scss */
|
||||
.form .form-row .label,
|
||||
.form .form-row .controls {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -207,45 +208,45 @@
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 22px;
|
||||
min-height: 22px; }
|
||||
/* line 61, ../sass/forms/_elems.scss */
|
||||
/* line 60, ../sass/forms/_elems.scss */
|
||||
.form .form-row > .label {
|
||||
float: left;
|
||||
min-width: 120px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 20%; }
|
||||
/* line 69, ../sass/forms/_elems.scss */
|
||||
/* line 70, ../sass/forms/_elems.scss */
|
||||
.form .form-row .value {
|
||||
color: #cccccc; }
|
||||
/* line 73, ../sass/forms/_elems.scss */
|
||||
/* line 74, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 79.9%; }
|
||||
/* line 80, ../sass/forms/_elems.scss */
|
||||
/* line 81, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 89, ../sass/forms/_elems.scss */
|
||||
/* line 90, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-med input[type="text"] {
|
||||
width: 200px; }
|
||||
/* line 93, ../sass/forms/_elems.scss */
|
||||
/* line 94, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-small input[type="text"] {
|
||||
width: 50px; }
|
||||
/* line 97, ../sass/forms/_elems.scss */
|
||||
/* line 98, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-numeric input[type="text"] {
|
||||
text-align: right; }
|
||||
/* line 101, ../sass/forms/_elems.scss */
|
||||
/* line 102, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .select {
|
||||
margin-right: 5px; }
|
||||
/* line 106, ../sass/forms/_elems.scss */
|
||||
/* line 107, ../sass/forms/_elems.scss */
|
||||
.form .form-row .field-hints {
|
||||
color: #666666; }
|
||||
/* line 110, ../sass/forms/_elems.scss */
|
||||
/* line 111, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
@ -258,7 +259,7 @@
|
||||
position: relative;
|
||||
height: 150px;
|
||||
overflow: auto; }
|
||||
/* line 121, ../sass/forms/_elems.scss */
|
||||
/* line 122, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list .wrapper {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
@ -267,24 +268,24 @@
|
||||
bottom: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 135, ../sass/forms/_elems.scss */
|
||||
/* line 136, ../sass/forms/_elems.scss */
|
||||
label.form-control.checkbox input {
|
||||
margin-right: 5px;
|
||||
vertical-align: top; }
|
||||
|
||||
/* line 141, ../sass/forms/_elems.scss */
|
||||
/* line 142, ../sass/forms/_elems.scss */
|
||||
.hint,
|
||||
.s-hint {
|
||||
font-size: 0.9em; }
|
||||
|
||||
/* line 146, ../sass/forms/_elems.scss */
|
||||
/* line 147, ../sass/forms/_elems.scss */
|
||||
.l-result {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
vertical-align: top; }
|
||||
/* line 153, ../sass/forms/_elems.scss */
|
||||
/* line 154, ../sass/forms/_elems.scss */
|
||||
.l-result div.s-hint {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** STYLE */
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** STYLE */
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
@ -775,17 +776,20 @@ mct-container {
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@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 30, ../sass/mobile/_layout.scss */
|
||||
/* line 26, ../sass/mobile/_layout.scss */
|
||||
.browse-wrapper,
|
||||
.mobile-pane {
|
||||
position: absolute;
|
||||
.pane {
|
||||
top: 0 !important;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; }
|
||||
|
||||
/* line 36, ../sass/mobile/_layout.scss */
|
||||
.mobile-pane.right-repr {
|
||||
/* line 31, ../sass/mobile/_layout.scss */
|
||||
.pane.left {
|
||||
background-color: #222; }
|
||||
|
||||
/* line 35, ../sass/mobile/_layout.scss */
|
||||
.pane.right-repr {
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
@ -794,7 +798,7 @@ mct-container {
|
||||
backface-visibility: hidden;
|
||||
margin-left: 0 !important; }
|
||||
|
||||
/* line 42, ../sass/mobile/_layout.scss */
|
||||
/* line 41, ../sass/mobile/_layout.scss */
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
@ -803,38 +807,38 @@ mct-container {
|
||||
right: 0;
|
||||
bottom: 25px; }
|
||||
|
||||
/* line 48, ../sass/mobile/_layout.scss */
|
||||
/* line 47, ../sass/mobile/_layout.scss */
|
||||
.holder.l-mobile {
|
||||
top: 10px !important;
|
||||
right: 10px !important;
|
||||
bottom: 10px !important;
|
||||
left: 10px !important; }
|
||||
|
||||
/* line 58, ../sass/mobile/_layout.scss */
|
||||
/* line 57, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none; }
|
||||
/* line 62, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .mobile-pane.left {
|
||||
/* line 61, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .pane.left {
|
||||
opacity: 0;
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden; }
|
||||
/* line 71, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .mobile-pane.right-repr {
|
||||
/* line 70, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .pane.right-repr {
|
||||
left: 0 !important; }
|
||||
|
||||
/* line 78, ../sass/mobile/_layout.scss */
|
||||
/* line 77, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none; }
|
||||
/* line 87, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.left {
|
||||
/* line 86, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane.left {
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
-webkit-transition-property: opacity;
|
||||
@ -856,44 +860,44 @@ mct-container {
|
||||
display: block !important;
|
||||
right: auto !important;
|
||||
width: 40% !important; }
|
||||
/* line 97, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.right-repr {
|
||||
/* line 96, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane.right-repr {
|
||||
left: 40% !important; }
|
||||
|
||||
/* line 107, ../sass/mobile/_layout.scss */
|
||||
/* line 106, ../sass/mobile/_layout.scss */
|
||||
.mobile-menu-icon {
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 10px; }
|
||||
|
||||
/* line 114, ../sass/mobile/_layout.scss */
|
||||
/* line 113, ../sass/mobile/_layout.scss */
|
||||
.object-browse-bar {
|
||||
left: 30px !important; }
|
||||
/* line 117, ../sass/mobile/_layout.scss */
|
||||
/* line 116, ../sass/mobile/_layout.scss */
|
||||
.object-browse-bar .context-available {
|
||||
opacity: 1 !important; }
|
||||
/* line 120, ../sass/mobile/_layout.scss */
|
||||
/* line 119, ../sass/mobile/_layout.scss */
|
||||
.object-browse-bar .view-switcher {
|
||||
margin-right: 0 !important; }
|
||||
|
||||
/* line 125, ../sass/mobile/_layout.scss */
|
||||
/* line 124, ../sass/mobile/_layout.scss */
|
||||
.tree-holder {
|
||||
overflow-x: hidden !important; }
|
||||
|
||||
/* line 129, ../sass/mobile/_layout.scss */
|
||||
/* line 128, ../sass/mobile/_layout.scss */
|
||||
.mobile-disable-select {
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
/* line 134, ../sass/mobile/_layout.scss */
|
||||
/* line 133, ../sass/mobile/_layout.scss */
|
||||
.mobile-hide,
|
||||
.mobile-hide-important {
|
||||
display: none !important; }
|
||||
|
||||
/* line 139, ../sass/mobile/_layout.scss */
|
||||
/* line 138, ../sass/mobile/_layout.scss */
|
||||
.mobile-back-hide {
|
||||
pointer-events: none;
|
||||
-moz-transition-property: opacity;
|
||||
@ -910,7 +914,7 @@ mct-container {
|
||||
transition-timing-function: ease-in-out;
|
||||
opacity: 0; }
|
||||
|
||||
/* line 144, ../sass/mobile/_layout.scss */
|
||||
/* line 143, ../sass/mobile/_layout.scss */
|
||||
.mobile-back-unhide {
|
||||
pointer-events: all;
|
||||
-moz-transition-property: opacity;
|
||||
@ -927,15 +931,15 @@ mct-container {
|
||||
transition-timing-function: ease-in-out;
|
||||
opacity: 1; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 153, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.left {
|
||||
/* line 152, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane.left {
|
||||
width: 90% !important; }
|
||||
/* line 156, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .mobile-pane.right-repr {
|
||||
/* line 155, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane.right-repr {
|
||||
left: 0 !important;
|
||||
transform: translateX(90%); } }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 164, ../sass/mobile/_layout.scss */
|
||||
/* line 163, ../sass/mobile/_layout.scss */
|
||||
.desktop-hide {
|
||||
display: none; } }
|
||||
/*****************************************************************************
|
||||
@ -2318,7 +2322,7 @@ label.checkbox.custom {
|
||||
margin-right: 20px;
|
||||
padding-left: 19px;
|
||||
position: relative;
|
||||
vertical-align: top; }
|
||||
vertical-align: middle; }
|
||||
/* line 202, ../sass/controls/_controls.scss */
|
||||
label.checkbox.custom em {
|
||||
color: #999;
|
||||
@ -3457,14 +3461,14 @@ label.checkbox.custom {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
border-top: 1px solid #4d4d4d;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
position: relative; }
|
||||
/* line 46, ../sass/forms/_elems.scss */
|
||||
/* line 47, ../sass/forms/_elems.scss */
|
||||
.form .form-row.first {
|
||||
border-top: none; }
|
||||
/* line 50, ../sass/forms/_elems.scss */
|
||||
/* line 51, ../sass/forms/_elems.scss */
|
||||
.form .form-row .label,
|
||||
.form .form-row .controls {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -3472,45 +3476,45 @@ label.checkbox.custom {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 22px;
|
||||
min-height: 22px; }
|
||||
/* line 61, ../sass/forms/_elems.scss */
|
||||
/* line 60, ../sass/forms/_elems.scss */
|
||||
.form .form-row > .label {
|
||||
float: left;
|
||||
min-width: 120px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 20%; }
|
||||
/* line 69, ../sass/forms/_elems.scss */
|
||||
/* line 70, ../sass/forms/_elems.scss */
|
||||
.form .form-row .value {
|
||||
color: #cccccc; }
|
||||
/* line 73, ../sass/forms/_elems.scss */
|
||||
/* line 74, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 79.9%; }
|
||||
/* line 80, ../sass/forms/_elems.scss */
|
||||
/* line 81, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-composite-control.l-checkbox {
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
margin-right: 5px; }
|
||||
/* line 89, ../sass/forms/_elems.scss */
|
||||
/* line 90, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-med input[type="text"] {
|
||||
width: 200px; }
|
||||
/* line 93, ../sass/forms/_elems.scss */
|
||||
/* line 94, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-small input[type="text"] {
|
||||
width: 50px; }
|
||||
/* line 97, ../sass/forms/_elems.scss */
|
||||
/* line 98, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .l-numeric input[type="text"] {
|
||||
text-align: right; }
|
||||
/* line 101, ../sass/forms/_elems.scss */
|
||||
/* line 102, ../sass/forms/_elems.scss */
|
||||
.form .form-row .controls .select {
|
||||
margin-right: 5px; }
|
||||
/* line 106, ../sass/forms/_elems.scss */
|
||||
/* line 107, ../sass/forms/_elems.scss */
|
||||
.form .form-row .field-hints {
|
||||
color: #666666; }
|
||||
/* line 110, ../sass/forms/_elems.scss */
|
||||
/* line 111, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
@ -3523,7 +3527,7 @@ label.checkbox.custom {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
overflow: auto; }
|
||||
/* line 121, ../sass/forms/_elems.scss */
|
||||
/* line 122, ../sass/forms/_elems.scss */
|
||||
.form .form-row .selector-list .wrapper {
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
@ -3532,24 +3536,24 @@ label.checkbox.custom {
|
||||
bottom: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 135, ../sass/forms/_elems.scss */
|
||||
/* line 136, ../sass/forms/_elems.scss */
|
||||
label.form-control.checkbox input {
|
||||
margin-right: 5px;
|
||||
vertical-align: top; }
|
||||
|
||||
/* line 141, ../sass/forms/_elems.scss */
|
||||
/* line 142, ../sass/forms/_elems.scss */
|
||||
.hint,
|
||||
.s-hint {
|
||||
font-size: 0.9em; }
|
||||
|
||||
/* line 146, ../sass/forms/_elems.scss */
|
||||
/* line 147, ../sass/forms/_elems.scss */
|
||||
.l-result {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
position: relative;
|
||||
vertical-align: top; }
|
||||
/* line 153, ../sass/forms/_elems.scss */
|
||||
/* line 154, ../sass/forms/_elems.scss */
|
||||
.l-result div.s-hint {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
@ -3585,18 +3589,16 @@ label.form-control.checkbox input {
|
||||
padding-right: 25px; }
|
||||
/* line 26, ../sass/forms/_validation.scss */
|
||||
.validates > .label::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: 15px;
|
||||
/* display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $reqSymbolM;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: $reqSymbolW;*/
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.7em;
|
||||
text-align: right;
|
||||
vertical-align: middle; }
|
||||
font-size: 0.7em; }
|
||||
/* line 44, ../sass/forms/_validation.scss */
|
||||
.validates.invalid > .label::after, .validates.invalid.req > .label::after {
|
||||
color: #ff9900;
|
||||
@ -4386,7 +4388,7 @@ input[type="text"] {
|
||||
overflow: auto; }
|
||||
|
||||
@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 6, ../sass/mobile/overlay/_overlay.scss */
|
||||
/* line 4, ../sass/mobile/overlay/_overlay.scss */
|
||||
.overlay > .holder {
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
@ -4394,8 +4396,29 @@ input[type="text"] {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; } }
|
||||
|
||||
left: 0; }
|
||||
/* line 10, ../sass/mobile/overlay/_overlay.scss */
|
||||
.overlay > .holder > .contents {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px; }
|
||||
/* line 16, ../sass/mobile/overlay/_overlay.scss */
|
||||
.overlay > .holder > .contents .form.editor {
|
||||
border: none; }
|
||||
/* line 19, ../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 33, ../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%; } }
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
@ -4431,7 +4454,7 @@ input[type="text"] {
|
||||
line-height: 16px; }
|
||||
/* line 38, ../sass/user-environ/_frame.scss */
|
||||
.frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
|
||||
top: 19px; }
|
||||
top: 21px; }
|
||||
/* line 41, ../sass/user-environ/_frame.scss */
|
||||
.frame .contents {
|
||||
top: 5px;
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** STYLE */
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
@ -200,8 +201,9 @@ ul.tree {
|
||||
left: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1.5rem;
|
||||
left: 15px; }
|
||||
/* line 61, ../sass/tree/_tree.scss */
|
||||
/* line 62, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon {
|
||||
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
|
||||
font-size: 16px;
|
||||
@ -214,12 +216,12 @@ ul.tree {
|
||||
line-height: 100%;
|
||||
right: auto;
|
||||
width: 16px; }
|
||||
/* line 74, ../sass/tree/_tree.scss */
|
||||
/* line 75, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
|
||||
text-shadow: black 0 1px 2px;
|
||||
position: absolute;
|
||||
z-index: 2; }
|
||||
/* line 80, ../sass/tree/_tree.scss */
|
||||
/* line 81, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
|
||||
color: #ff3c00;
|
||||
font-size: 8px;
|
||||
@ -228,7 +230,7 @@ ul.tree {
|
||||
width: 8px;
|
||||
top: 1px;
|
||||
right: -2px; }
|
||||
/* line 86, ../sass/tree/_tree.scss */
|
||||
/* line 87, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
|
||||
color: #49dedb;
|
||||
font-size: 8px;
|
||||
@ -237,7 +239,7 @@ ul.tree {
|
||||
width: 8px;
|
||||
left: -3px;
|
||||
bottom: 0px; }
|
||||
/* line 94, ../sass/tree/_tree.scss */
|
||||
/* line 95, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .label .title-label {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@ -252,53 +254,53 @@ ul.tree {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
/* line 105, ../sass/tree/_tree.scss */
|
||||
/* line 106, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading {
|
||||
pointer-events: none; }
|
||||
/* line 107, ../sass/tree/_tree.scss */
|
||||
/* line 108, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading .label {
|
||||
opacity: 0.5; }
|
||||
/* line 109, ../sass/tree/_tree.scss */
|
||||
/* line 110, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading .label .title-label {
|
||||
font-style: italic; }
|
||||
/* line 113, ../sass/tree/_tree.scss */
|
||||
/* line 114, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.loading .wait-spinner {
|
||||
margin-left: 14px; }
|
||||
/* line 118, ../sass/tree/_tree.scss */
|
||||
/* line 119, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.selected {
|
||||
background: #005177;
|
||||
color: #fff; }
|
||||
/* line 122, ../sass/tree/_tree.scss */
|
||||
/* line 123, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.selected .view-control {
|
||||
color: #0099cc; }
|
||||
/* line 125, ../sass/tree/_tree.scss */
|
||||
/* line 126, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item.selected .label .type-icon {
|
||||
color: #fff; }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 133, ../sass/tree/_tree.scss */
|
||||
/* line 134, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.selected):hover {
|
||||
background: #404040;
|
||||
color: #cccccc; }
|
||||
/* line 136, ../sass/tree/_tree.scss */
|
||||
/* line 137, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.selected):hover .context-trigger {
|
||||
display: block; }
|
||||
/* line 139, ../sass/tree/_tree.scss */
|
||||
/* line 140, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.selected):hover .icon {
|
||||
color: #33ccff; } }
|
||||
/* line 146, ../sass/tree/_tree.scss */
|
||||
/* line 147, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item:not(.loading) {
|
||||
cursor: pointer; }
|
||||
/* line 150, ../sass/tree/_tree.scss */
|
||||
/* line 151, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .context-trigger {
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
right: 3px; }
|
||||
/* line 156, ../sass/tree/_tree.scss */
|
||||
/* line 157, ../sass/tree/_tree.scss */
|
||||
ul.tree li span.tree-item .context-trigger .invoke-menu {
|
||||
font-size: 0.75em;
|
||||
height: 0.9rem;
|
||||
line-height: 0.9rem; }
|
||||
/* line 165, ../sass/tree/_tree.scss */
|
||||
/* line 166, ../sass/tree/_tree.scss */
|
||||
ul.tree ul.tree {
|
||||
margin-left: 15px; }
|
||||
|
||||
@ -329,23 +331,23 @@ ul.tree {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 0px; }
|
||||
/* line 33, ../sass/mobile/_tree.scss */
|
||||
/* line 32, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .view-control {
|
||||
position: absolute;
|
||||
font-size: 1.1em;
|
||||
right: 0px;
|
||||
width: 30px;
|
||||
text-align: center; }
|
||||
/* line 42, ../sass/mobile/_tree.scss */
|
||||
/* line 41, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .label {
|
||||
left: 0;
|
||||
right: 35px;
|
||||
font-size: 1.1em; }
|
||||
/* line 50, ../sass/mobile/_tree.scss */
|
||||
line-height: 35px; }
|
||||
/* line 46, ../sass/mobile/_tree.scss */
|
||||
ul.tree li span.tree-item .label .type-icon {
|
||||
top: 9px;
|
||||
bottom: auto;
|
||||
height: 16px; }
|
||||
/* line 61, ../sass/mobile/_tree.scss */
|
||||
/* line 57, ../sass/mobile/_tree.scss */
|
||||
ul.tree ul.tree {
|
||||
margin-left: 20px; } }
|
||||
|
||||
@ -47,6 +47,7 @@ $colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
|
||||
@ -48,12 +48,10 @@
|
||||
@import "controls/controls";
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
//@import "mobile/controls/menus";
|
||||
@import "controls/time-controller";
|
||||
@import "edit/editor";
|
||||
@import "features/imagery";
|
||||
@import "features/time-display";
|
||||
//@import "flex";
|
||||
@import "forms/elems";
|
||||
@import "forms/validation";
|
||||
@import "forms/text-input";
|
||||
|
||||
@ -198,7 +198,7 @@ label.checkbox.custom {
|
||||
margin-right: $interiorMargin * 4;
|
||||
padding-left: $d + $interiorMargin;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
vertical-align: middle; // was top
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
*****************************************************************************/
|
||||
.section-header {
|
||||
@include border-radius(3px);
|
||||
background: rgba(white, 0.1);
|
||||
background: $colorFormLines;
|
||||
font-size: 0.8em;
|
||||
margin-top: $interiorMargin;
|
||||
padding: $interiorMargin;
|
||||
@ -37,11 +37,12 @@
|
||||
}
|
||||
|
||||
.form-row {
|
||||
$m: $interiorMargin;
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
margin-top: $interiorMargin;
|
||||
padding: $interiorMargin;
|
||||
border-top: 1px solid $colorFormLines;
|
||||
margin-top: $m;
|
||||
padding: $m;
|
||||
position: relative;
|
||||
&.first {
|
||||
border-top: none;
|
||||
@ -49,18 +50,18 @@
|
||||
|
||||
.label,
|
||||
.controls {
|
||||
// @include test(orange);
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: $formInputH;
|
||||
min-height: $formInputH;
|
||||
}
|
||||
|
||||
>.label {
|
||||
// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
|
||||
//@include test(orange, 0.05);
|
||||
float: left;
|
||||
min-width: 120px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: $formLabelW;
|
||||
|
||||
@ -25,18 +25,18 @@
|
||||
padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
|
||||
&::after {
|
||||
// @include test(yellow, 0.3);
|
||||
display: block;
|
||||
/* display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $reqSymbolM;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: $reqSymbolW;
|
||||
width: $reqSymbolW;*/
|
||||
font-family: symbolsfont;
|
||||
font-size: $reqSymbolFontSize;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
//text-align: right;
|
||||
//vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&.invalid,
|
||||
|
||||
@ -20,11 +20,13 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************** STYLE */
|
||||
$colorMobilePaneLeft: #222;
|
||||
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobile-listRight: 10px;
|
||||
|
||||
$mobileOverlayMargin: 10px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
|
||||
@ -26,7 +26,6 @@
|
||||
li {
|
||||
//border-top: 1px solid $colorInteriorBorder; // TEMP
|
||||
span.tree-item {
|
||||
// Adds some space to the top of each tree item
|
||||
height: $mobileTreeItemH;
|
||||
line-height: $mobileTreeItemH;
|
||||
margin-bottom: 0px;
|
||||
@ -40,13 +39,10 @@
|
||||
}
|
||||
|
||||
.label {
|
||||
// Designates the starting left margin
|
||||
// (indentation) of 'My Items'
|
||||
// Also adds right space for selection button
|
||||
left: 0;
|
||||
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
|
||||
font-size: 1.1em;
|
||||
//font-size: 1.2em; // CH CO
|
||||
line-height: $mobileTreeItemH;
|
||||
//font-size: 1.1em; // CH CO
|
||||
.type-icon {
|
||||
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
|
||||
}
|
||||
|
||||
@ -1,11 +1,41 @@
|
||||
.overlay {
|
||||
@include phoneandtablet {
|
||||
@include phoneandtablet {
|
||||
.overlay {
|
||||
$m: 0;
|
||||
// Removes curved edges on the dialog box
|
||||
// and makes it take up fullscreen
|
||||
>.holder {
|
||||
@include border-radius($m);
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
> .holder {
|
||||
@include border-radius($m);
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
> .contents {
|
||||
top: $mobileOverlayMargin;
|
||||
right: $mobileOverlayMargin;
|
||||
bottom: $mobileOverlayMargin;
|
||||
left: $mobileOverlayMargin;
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -56,6 +56,7 @@ ul.tree {
|
||||
// @include test(orange);
|
||||
@include absPosDefault();
|
||||
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
|
||||
line-height: $menuLineH;
|
||||
left: $runningItemW;
|
||||
|
||||
.type-icon {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user