diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 34a14c0107..6e2aec574a 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -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; diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index a30f37c1c6..0c29bd9ebb 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -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 */ diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index bdda60265b..c503b222f4 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 0566559e1b..2ca3b73ab9 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -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; } } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index d1f826443c..bb10a83455 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -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%); diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 18dc5aa1e1..a388fcac35 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -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"; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index bcec870f95..2e7a0e09d3 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -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; diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index 9a2adab2e3..095e9fc582 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -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; diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss index eba95840c5..07f15cb660 100644 --- a/platform/commonUI/general/res/sass/forms/_validation.scss +++ b/platform/commonUI/general/res/sass/forms/_validation.scss @@ -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, diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 913d47c0e3..f4fe4ceaad 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -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); diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 5cc0ac1b25..03e8051a14 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -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); } diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss index ac99a36d17..9bee6e6865 100644 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss @@ -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%; } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index cb0b0f1a72..cf1ad57a50 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -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 {