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

[Mobile] IN PROGRESS: Styling in forms, overlay and tree

Browse Source 
open #74
.section-header and form-row styles changed in forms/_elems.scss;
significant changes to overlay in mobile: full-screen, close button, more;
tree hover bg changed to use rgba(#fff, 0.1);
removed "Hide title by default" in core/bundle.json;
This commit is contained in:
Charles Hacskaylo 2015-08-26 12:34:45 -07:00
parent 9a3009f327
commit f80266b23f
11 changed files with 113 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
All fields marked <span class="ui-symbol req">*</span> are required. All fields marked <span class="ui-symbol req">*</span> are required.
</div> </div>
</div> </div>
<div class="abs form outline editor"> <div class="abs form editor">
<div class='abs contents l-dialog'> <div class='abs contents l-dialog'>
<mct-form ng-model="ngModel.value" <mct-form ng-model="ngModel.value"
structure="ngModel.structure" structure="ngModel.structure"

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

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

59
platform/commonUI/general/res/css/forms.css
View File

@ -172,21 +172,20 @@
*****************************************************************************/ *****************************************************************************/
/* line 22, ../sass/forms/_elems.scss */ /* line 22, ../sass/forms/_elems.scss */
.section-header { .section-header {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #cccccc;
font-size: 0.8em; font-size: 0.8em;
margin-top: 5px; padding: 5px 5px;
padding: 5px; } text-transform: uppercase; }
/* line 28, ../sass/forms/_elems.scss */
.section-header:first-child {
margin-top: 0; }
/* line 35, ../sass/forms/_elems.scss */ /* line 35, ../sass/forms/_elems.scss */
.form .form-section { .form .form-section {
position: relative; } position: relative;
/* line 39, ../sass/forms/_elems.scss */ margin-bottom: 20px; }
/* line 40, ../sass/forms/_elems.scss */
.form .form-row { .form .form-row {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -195,12 +194,12 @@
*zoom: 1; *zoom: 1;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px 5px;
position: relative; } position: relative; }
/* line 47, ../sass/forms/_elems.scss */ /* line 48, ../sass/forms/_elems.scss */
.form .form-row.first { .form .form-row.first {
border-top: none; } border-top: none; }
/* line 51, ../sass/forms/_elems.scss */ /* line 52, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -211,42 +210,42 @@
font-size: 0.8rem; font-size: 0.8rem;
line-height: 22px; line-height: 22px;
min-height: 22px; } min-height: 22px; }
/* line 60, ../sass/forms/_elems.scss */ /* line 61, ../sass/forms/_elems.scss */
.form .form-row > .label { .form .form-row > .label {
float: left; float: left;
min-width: 120px; min-width: 120px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 20%; } width: 30%; }
/* line 70, ../sass/forms/_elems.scss */ /* line 71, ../sass/forms/_elems.scss */
.form .form-row .value { .form .form-row .value {
color: #cccccc; } color: #cccccc; }
/* line 74, ../sass/forms/_elems.scss */ /* line 75, ../sass/forms/_elems.scss */
.form .form-row .controls { .form .form-row .controls {
float: left; float: left;
position: relative; position: relative;
width: 79.9%; } width: 69.9%; }
/* line 81, ../sass/forms/_elems.scss */ /* line 82, ../sass/forms/_elems.scss */
.form .form-row .controls .l-composite-control.l-checkbox { .form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block; display: inline-block;
line-height: 14px; line-height: 14px;
margin-right: 5px; } margin-right: 5px; }
/* line 90, ../sass/forms/_elems.scss */ /* line 91, ../sass/forms/_elems.scss */
.form .form-row .controls .l-med input[type="text"] { .form .form-row .controls .l-med input[type="text"] {
width: 200px; } width: 200px; }
/* line 94, ../sass/forms/_elems.scss */ /* line 95, ../sass/forms/_elems.scss */
.form .form-row .controls .l-small input[type="text"] { .form .form-row .controls .l-small input[type="text"] {
width: 50px; } width: 50px; }
/* line 98, ../sass/forms/_elems.scss */ /* line 99, ../sass/forms/_elems.scss */
.form .form-row .controls .l-numeric input[type="text"] { .form .form-row .controls .l-numeric input[type="text"] {
text-align: right; } text-align: right; }
/* line 102, ../sass/forms/_elems.scss */ /* line 103, ../sass/forms/_elems.scss */
.form .form-row .controls .select { .form .form-row .controls .select {
margin-right: 5px; } margin-right: 5px; }
/* line 107, ../sass/forms/_elems.scss */ /* line 108, ../sass/forms/_elems.scss */
.form .form-row .field-hints { .form .form-row .field-hints {
color: #666666; } color: #666666; }
/* line 111, ../sass/forms/_elems.scss */ /* line 112, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -259,7 +258,7 @@
position: relative; position: relative;
height: 150px; height: 150px;
overflow: auto; } overflow: auto; }
/* line 122, ../sass/forms/_elems.scss */ /* line 123, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper { .form .form-row .selector-list .wrapper {
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
@ -268,24 +267,24 @@
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 136, ../sass/forms/_elems.scss */ /* line 137, ../sass/forms/_elems.scss */
label.form-control.checkbox input { label.form-control.checkbox input {
margin-right: 5px; margin-right: 5px;
vertical-align: top; } vertical-align: top; }
/* line 142, ../sass/forms/_elems.scss */ /* line 143, ../sass/forms/_elems.scss */
.hint, .hint,
.s-hint { .s-hint {
font-size: 0.9em; } font-size: 0.9em; }
/* line 147, ../sass/forms/_elems.scss */ /* line 148, ../sass/forms/_elems.scss */
.l-result { .l-result {
display: inline-block; display: inline-block;
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
position: relative; position: relative;
vertical-align: top; } vertical-align: top; }
/* line 154, ../sass/forms/_elems.scss */ /* line 155, ../sass/forms/_elems.scss */
.l-result div.s-hint { .l-result div.s-hint {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;

103
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -3486,21 +3486,20 @@ label.checkbox.custom {
*****************************************************************************/ *****************************************************************************/
/* line 22, ../sass/forms/_elems.scss */ /* line 22, ../sass/forms/_elems.scss */
.section-header { .section-header {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #cccccc;
font-size: 0.8em; font-size: 0.8em;
margin-top: 5px; padding: 5px 5px;
padding: 5px; } text-transform: uppercase; }
/* line 28, ../sass/forms/_elems.scss */
.section-header:first-child {
margin-top: 0; }
/* line 35, ../sass/forms/_elems.scss */ /* line 35, ../sass/forms/_elems.scss */
.form .form-section { .form .form-section {
position: relative; } position: relative;
/* line 39, ../sass/forms/_elems.scss */ margin-bottom: 20px; }
/* line 40, ../sass/forms/_elems.scss */
.form .form-row { .form .form-row {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -3509,12 +3508,12 @@ label.checkbox.custom {
*zoom: 1; *zoom: 1;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px 5px;
position: relative; } position: relative; }
/* line 47, ../sass/forms/_elems.scss */ /* line 48, ../sass/forms/_elems.scss */
.form .form-row.first { .form .form-row.first {
border-top: none; } border-top: none; }
/* line 51, ../sass/forms/_elems.scss */ /* line 52, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -3525,42 +3524,42 @@ label.checkbox.custom {
font-size: 0.8rem; font-size: 0.8rem;
line-height: 22px; line-height: 22px;
min-height: 22px; } min-height: 22px; }
/* line 60, ../sass/forms/_elems.scss */ /* line 61, ../sass/forms/_elems.scss */
.form .form-row > .label { .form .form-row > .label {
float: left; float: left;
min-width: 120px; min-width: 120px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 20%; } width: 30%; }
/* line 70, ../sass/forms/_elems.scss */ /* line 71, ../sass/forms/_elems.scss */
.form .form-row .value { .form .form-row .value {
color: #cccccc; } color: #cccccc; }
/* line 74, ../sass/forms/_elems.scss */ /* line 75, ../sass/forms/_elems.scss */
.form .form-row .controls { .form .form-row .controls {
float: left; float: left;
position: relative; position: relative;
width: 79.9%; } width: 69.9%; }
/* line 81, ../sass/forms/_elems.scss */ /* line 82, ../sass/forms/_elems.scss */
.form .form-row .controls .l-composite-control.l-checkbox { .form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block; display: inline-block;
line-height: 14px; line-height: 14px;
margin-right: 5px; } margin-right: 5px; }
/* line 90, ../sass/forms/_elems.scss */ /* line 91, ../sass/forms/_elems.scss */
.form .form-row .controls .l-med input[type="text"] { .form .form-row .controls .l-med input[type="text"] {
width: 200px; } width: 200px; }
/* line 94, ../sass/forms/_elems.scss */ /* line 95, ../sass/forms/_elems.scss */
.form .form-row .controls .l-small input[type="text"] { .form .form-row .controls .l-small input[type="text"] {
width: 50px; } width: 50px; }
/* line 98, ../sass/forms/_elems.scss */ /* line 99, ../sass/forms/_elems.scss */
.form .form-row .controls .l-numeric input[type="text"] { .form .form-row .controls .l-numeric input[type="text"] {
text-align: right; } text-align: right; }
/* line 102, ../sass/forms/_elems.scss */ /* line 103, ../sass/forms/_elems.scss */
.form .form-row .controls .select { .form .form-row .controls .select {
margin-right: 5px; } margin-right: 5px; }
/* line 107, ../sass/forms/_elems.scss */ /* line 108, ../sass/forms/_elems.scss */
.form .form-row .field-hints { .form .form-row .field-hints {
color: #666666; } color: #666666; }
/* line 111, ../sass/forms/_elems.scss */ /* line 112, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -3573,7 +3572,7 @@ label.checkbox.custom {
position: relative; position: relative;
height: 150px; height: 150px;
overflow: auto; } overflow: auto; }
/* line 122, ../sass/forms/_elems.scss */ /* line 123, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper { .form .form-row .selector-list .wrapper {
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
@ -3582,24 +3581,24 @@ label.checkbox.custom {
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 136, ../sass/forms/_elems.scss */ /* line 137, ../sass/forms/_elems.scss */
label.form-control.checkbox input { label.form-control.checkbox input {
margin-right: 5px; margin-right: 5px;
vertical-align: top; } vertical-align: top; }
/* line 142, ../sass/forms/_elems.scss */ /* line 143, ../sass/forms/_elems.scss */
.hint, .hint,
.s-hint { .s-hint {
font-size: 0.9em; } font-size: 0.9em; }
/* line 147, ../sass/forms/_elems.scss */ /* line 148, ../sass/forms/_elems.scss */
.l-result { .l-result {
display: inline-block; display: inline-block;
min-width: 32px; min-width: 32px;
min-height: 32px; min-height: 32px;
position: relative; position: relative;
vertical-align: top; } vertical-align: top; }
/* line 154, ../sass/forms/_elems.scss */ /* line 155, ../sass/forms/_elems.scss */
.l-result div.s-hint { .l-result div.s-hint {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -4346,19 +4345,14 @@ input[type="text"] {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
z-index: 100; } z-index: 100; }
/* line 27, ../sass/overlay/_overlay.scss */ /* line 27, ../sass/overlay/_overlay.scss */
.overlay .btn.close { .overlay .clk-icon.close {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 3px 6px;
position: absolute; position: absolute;
border: none; top: 10px;
top: 3px; right: 10px;
right: 3px;
bottom: auto; bottom: auto;
left: auto; left: auto;
z-index: 100; } z-index: 100; }
/* line 38, ../sass/overlay/_overlay.scss */ /* line 32, ../sass/overlay/_overlay.scss */
.overlay > .holder { .overlay > .holder {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -4391,29 +4385,29 @@ input[type="text"] {
/* line 175, ../sass/_mixins.scss */ /* line 175, ../sass/_mixins.scss */
.overlay > .holder.btn-menu .invoke-menu { .overlay > .holder.btn-menu .invoke-menu {
color: #757575; } color: #757575; }
/* line 45, ../sass/overlay/_overlay.scss */ /* line 39, ../sass/overlay/_overlay.scss */
.overlay > .holder > .contents { .overlay > .holder > .contents {
top: 25px; top: 25px;
right: 25px; right: 25px;
bottom: 25px; bottom: 25px;
left: 25px; } left: 25px; }
/* line 50, ../sass/overlay/_overlay.scss */ /* line 44, ../sass/overlay/_overlay.scss */
.overlay .title { .overlay .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 1.3em; font-size: 1.2em;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 56, ../sass/overlay/_overlay.scss */ /* line 50, ../sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 60, ../sass/overlay/_overlay.scss */ /* line 54, ../sass/overlay/_overlay.scss */
.overlay .editor { .overlay .editor {
top: 70px; top: 70px;
bottom: 50px; bottom: 50px;
left: 0; left: 0;
right: 0; } right: 0; }
/* line 66, ../sass/overlay/_overlay.scss */ /* line 60, ../sass/overlay/_overlay.scss */
.overlay .bottom-bar { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@ -4422,10 +4416,10 @@ input[type="text"] {
overflow: visible; overflow: visible;
height: 40px; height: 40px;
text-align: right; } text-align: right; }
/* line 72, ../sass/overlay/_overlay.scss */ /* line 66, ../sass/overlay/_overlay.scss */
.overlay .bottom-bar .btn { .overlay .bottom-bar .btn {
margin-left: 10px; } margin-left: 10px; }
/* line 76, ../sass/overlay/_overlay.scss */ /* line 70, ../sass/overlay/_overlay.scss */
.overlay .contents.l-dialog { .overlay .contents.l-dialog {
top: 5px; top: 5px;
right: 5px; right: 5px;
@ -4435,6 +4429,10 @@ input[type="text"] {
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 4, ../sass/mobile/overlay/_overlay.scss */ /* line 4, ../sass/mobile/overlay/_overlay.scss */
.overlay .clk-icon.close {
top: 10px;
right: 10px; }
/* line 8, ../sass/mobile/overlay/_overlay.scss */
.overlay > .holder { .overlay > .holder {
-moz-border-radius: 0; -moz-border-radius: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
@ -4443,23 +4441,26 @@ input[type="text"] {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 10, ../sass/mobile/overlay/_overlay.scss */ /* line 14, ../sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents { .overlay > .holder > .contents {
top: 10px; top: 10px;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
left: 10px; } left: 10px; }
/* line 16, ../sass/mobile/overlay/_overlay.scss */ /* line 21, ../sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .top-bar > .title {
margin-right: 1.2em; }
/* line 26, ../sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor { .overlay > .holder > .contents .form.editor {
border: none; } border: none; }
/* line 19, ../sass/mobile/overlay/_overlay.scss */ /* line 29, ../sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents { .overlay > .holder > .contents .form.editor .contents {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 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) { @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 */ /* line 43, ../sass/mobile/overlay/_overlay.scss */
.overlay > .holder > .contents .form.editor .contents .form-row > .label, .overlay > .holder > .contents .form.editor .contents .form-row > .label,
.overlay > .holder > .contents .form.editor .contents .form-row > .controls { .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
display: block; display: block;

2
platform/commonUI/general/res/css/tree.css
View File

@ -279,7 +279,7 @@ ul.tree {
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 134, ../sass/tree/_tree.scss */ /* line 134, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover { ul.tree li span.tree-item:not(.selected):hover {
background: #404040; background: rgba(255, 255, 255, 0.1);
color: #cccccc; } color: #cccccc; }
/* line 137, ../sass/tree/_tree.scss */ /* line 137, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .context-trigger { ul.tree li span.tree-item:not(.selected):hover .context-trigger {

6
platform/commonUI/general/res/sass/_constants.scss
View File

@ -48,6 +48,7 @@ $colorPausedFg: #fff;
$colorCreateBtn: $colorKey; $colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05); $colorGridLines: rgba(#fff, 0.05);
$colorFormLines: rgba(#fff, 0.1); $colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2);
// Menu colors // Menu colors
$colorMenuBg: lighten($colorBodyBg, 23%); $colorMenuBg: lighten($colorBodyBg, 23%);
$colorMenuFg: lighten($colorMenuBg, 70%); $colorMenuFg: lighten($colorMenuBg, 70%);
@ -104,6 +105,7 @@ $ueEditLeftPaneW: 75%;
// Overlay // Overlay
$ovrTopBarH: 60px; $ovrTopBarH: 60px;
$ovrFooterH: 40px; $ovrFooterH: 40px;
$overlayMargin: 25px;
// Items // Items
$ueBrowseGridItemLg: 200px; $ueBrowseGridItemLg: 200px;
$ueBrowseGridItemTopBarH: 20px; $ueBrowseGridItemTopBarH: 20px;
@ -145,9 +147,11 @@ $reqSymbolFontSize: 0.7em;
/************************** CONTROLS */ /************************** CONTROLS */
$controlDisabledOpacity: 0.3; $controlDisabledOpacity: 0.3;
$formLabelW: 20%; $formLabelW: 30%;
$formInputH: 22px; $formInputH: 22px;
$formRowCtrlsH: 14px; $formRowCtrlsH: 14px;
$formTBPad: $interiorMargin;
$formLRPad: $interiorMargin;
$menuLineH: 1.5rem; $menuLineH: 1.5rem;
$menuLineHPx: 24px; $menuLineHPx: 24px;
$scrollbarTrackSize: 10px; $scrollbarTrackSize: 10px;

17
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@ -20,20 +20,21 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.section-header { .section-header {
@include border-radius(3px); @include border-radius($basicCr);
background: $colorFormLines; background: rgba(#fff, 0.1);
$c: lighten($colorBodyFg, 20%);
//border-bottom: 1px solid rgba(#fff, 0.3);
color: $c;
font-size: 0.8em; font-size: 0.8em;
margin-top: $interiorMargin; padding: $formTBPad $formLRPad;
padding: $interiorMargin; text-transform: uppercase;
&:first-child {
margin-top: 0;
}
} }
.form { .form {
// @include test(orange); // @include test(orange);
.form-section { .form-section {
position: relative; position: relative;
margin-bottom: $interiorMarginLg * 2;
} }
.form-row { .form-row {
@ -42,7 +43,7 @@
@include clearfix; @include clearfix;
border-top: 1px solid $colorFormLines; border-top: 1px solid $colorFormLines;
margin-top: $m; margin-top: $m;
padding: $m; padding: $formTBPad $formLRPad;
position: relative; position: relative;
&.first { &.first {
border-top: none; border-top: none;

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

@ -1,6 +1,10 @@
@include phoneandtablet { @include phoneandtablet {
.overlay { .overlay {
$m: 0; $m: 0;
.clk-icon.close {
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
}
> .holder { > .holder {
@include border-radius($m); @include border-radius($m);
top: $m; top: $m;
@ -13,6 +17,12 @@
bottom: $mobileOverlayMargin; bottom: $mobileOverlayMargin;
left: $mobileOverlayMargin; left: $mobileOverlayMargin;
.top-bar {
> .title {
margin-right: 1.2em;
}
}
.form.editor { .form.editor {
border: none; border: none;

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

@ -24,16 +24,10 @@
background: $colorOvrBlocker; background: $colorOvrBlocker;
z-index: 100; z-index: 100;
} }
.btn.close { .clk-icon.close {
@include border-radius($basicCr * 2);
padding: 3px 6px;
position: absolute; position: absolute;
border: none; top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
z-index: 100; z-index: 100;
}
.editor {
// background: $colorBodyBg;
} }
>.holder { >.holder {
$i: 15%; $i: 15%;
@ -43,13 +37,13 @@
top: $i; right: $i; bottom: $i; left: $i; top: $i; right: $i; bottom: $i; left: $i;
z-index: 101; z-index: 101;
>.contents { >.contents {
$m: 25px; $m: $overlayMargin;
top: $m; right: $m; bottom: $m; left: $m; top: $m; right: $m; bottom: $m; left: $m;
} }
} }
.title { .title {
@include ellipsize(); @include ellipsize();
font-size: 1.3em; font-size: 1.2em;
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }

2
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -132,7 +132,7 @@ ul.tree {
// NOTE: [Mobile] Removed Hover on Mobile // NOTE: [Mobile] Removed Hover on Mobile
@include desktop { @include desktop {
&:hover { &:hover {
background: lighten($colorBodyBg, 5%); background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
color: lighten($colorBodyFg, 20%); color: lighten($colorBodyFg, 20%);
.context-trigger { .context-trigger {
display: block; display: block;

6
platform/core/bundle.json
View File

@ -117,12 +117,6 @@
"pattern": "\\S+", "pattern": "\\S+",
"required": true, "required": true,
"cssclass": "l-med" "cssclass": "l-med"
},
{
"control": "checkbox",
"name": "Display title by default",
"key": "displayTitle",
"property": [ "display", "title" ]
} }
] ]
}, },