alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Form element style and markup fixes

Browse Source 
WTD-610
Fixed markup in select.html;
Rebuilt associated CSS in _selects.scss;
Still to-do: checkbox valign and spacing

Conflicts:
	platform/commonUI/general/res/css/forms.css
	platform/commonUI/general/res/css/items.css
	platform/commonUI/general/res/css/theme-espresso.css
	platform/commonUI/general/res/css/tree.css
This commit is contained in:
Charles Hacskaylo
2015-02-24 11:37:34 -08:00
committed by Victor Woeltjen
parent 068518b535
commit 9c001fabd9
9 changed files with 108 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,10 +26,10 @@
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px;
position: relative; } position: relative; }
/* line 25, ../sass/forms/_elems.scss */ /* line 23, ../sass/forms/_elems.scss */
.form .form-row:first-child { .form .form-row:first-child {
border-top: none; } border-top: none; }
/* line 29, ../sass/forms/_elems.scss */ /* line 27, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@@ -41,24 +41,27 @@
font-size: 0.75rem; font-size: 0.75rem;
line-height: 22px; line-height: 22px;
min-height: 22px; } min-height: 22px; }
/* line 39, ../sass/forms/_elems.scss */ /* line 36, ../sass/forms/_elems.scss */
.form .form-row > .label { .form .form-row > .label {
float: left; float: left;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 20%; } width: 20%; }
/* line 47, ../sass/forms/_elems.scss */ /* line 44, ../sass/forms/_elems.scss */
.form .form-row .value { .form .form-row .value {
color: #cccccc; } color: #cccccc; }
/* line 51, ../sass/forms/_elems.scss */ /* line 48, ../sass/forms/_elems.scss */
.form .form-row .controls { .form .form-row .controls {
float: left; float: left;
position: relative; position: relative;
width: 79%; } width: 79%; }
/* line 58, ../sass/forms/_elems.scss */ /* line 52, ../sass/forms/_elems.scss */
.form .form-row .controls .select {
margin-right: 5px; }
/* line 57, ../sass/forms/_elems.scss */
.form .form-row .field-hints { .form .form-row .field-hints {
color: #666666; } color: #666666; }
/* line 62, ../sass/forms/_elems.scss */ /* line 61, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@@ -69,7 +72,7 @@
position: relative; position: relative;
height: 150px; height: 150px;
max-width: 50%; } max-width: 50%; }
/* line 70, ../sass/forms/_elems.scss */ /* line 69, ../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;
@@ -78,12 +81,12 @@
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 84, ../sass/forms/_elems.scss */ /* line 83, ../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 90, ../sass/forms/_elems.scss */ /* line 89, ../sass/forms/_elems.scss */
.hint { .hint {
font-size: 0.9em; } font-size: 0.9em; }
@@ -166,30 +169,25 @@ input[type="text"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
margin-top: 1px; margin-top: 1px;
padding: 0 25px 0 0; padding: 0 25px 0 0;
position: relative;
overflow: hidden; overflow: hidden;
vertical-align: middle; } vertical-align: middle; }
/* line 126, ../sass/_mixins.scss */ cursor: pointer;
position: relative; }
/* line 83, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover { .form-control.select:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); } background-image: linear-gradient(#666666, #4d4d4d); }
/* line 11, ../sass/forms/_selects.scss */ /* line 7, ../sass/forms/_selects.scss */
.form-control.select span.arw {
display: block;
pointer-events: none;
position: absolute;
right: 8%;
top: 10%; }
/* line 18, ../sass/forms/_selects.scss */
.form-control.select select { .form-control.select select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@@ -197,16 +195,21 @@ input[type="text"] {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border: none; background: none;
box-shadow: none; color: #999999;
background-color: transparent; border: none !important;
background-image: none;
cursor: pointer; cursor: pointer;
padding: 3px 5px 4px 5px; padding: 4px 25px 2px 5px; }
width: 150%; } /* line 16, ../sass/forms/_selects.scss */
/* line 32, ../sass/forms/_selects.scss */ .form-control.select:after {
.form-control.select select:focus { color: #0099cc;
outline: none; } content: "v";
display: block;
font-family: 'symbolsfont';
pointer-events: none;
position: absolute;
right: 5px;
top: 0; }
/* line 2, ../sass/forms/_channel-selector.scss */ /* line 2, ../sass/forms/_channel-selector.scss */
.channel-selector .line { .channel-selector .line {

4
platform/commonUI/general/res/css/items.css
View File

@@ -24,6 +24,7 @@
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #737373; border-top: 1px solid #737373;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
@@ -35,7 +36,6 @@
margin-bottom: 3px; margin-bottom: 3px;
margin-right: 3px; margin-right: 3px;
position: relative; } position: relative; }
/* line 126, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover { .items-holder .item.grid-item:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#737373, #595959); background-image: -webkit-linear-gradient(#737373, #595959);
@@ -109,6 +109,7 @@
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #33ccff; border-top: 1px solid #33ccff;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
@@ -118,7 +119,6 @@
background-image: -o-linear-gradient(#33ccff, #0099cc); background-image: -o-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc); background-image: linear-gradient(#33ccff, #0099cc);
color: #80dfff; } color: #80dfff; }
/* line 134, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover { .items-holder .item.grid-item.selected:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
background-image: -webkit-linear-gradient(#66d9ff, #00bfff); background-image: -webkit-linear-gradient(#66d9ff, #00bfff);

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

@@ -611,7 +611,6 @@ span {
display: inline-block; display: inline-block;
font-size: 1rem; font-size: 1rem;
vertical-align: middle; } vertical-align: middle; }
/* line 170, ../sass/_mixins.scss */
.invoke-menu:hover { .invoke-menu:hover {
color: #33ccff; } color: #33ccff; }
@@ -623,7 +622,6 @@ span {
/* line 49, ../sass/_icons.scss */ /* line 49, ../sass/_icons.scss */
.icon-buttons-main .invoke-menu { .icon-buttons-main .invoke-menu {
color: #666666; } color: #666666; }
/* line 170, ../sass/_mixins.scss */
.icon-buttons-main .invoke-menu:hover { .icon-buttons-main .invoke-menu:hover {
color: #999999; } color: #999999; }
@@ -764,10 +762,10 @@ span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #999999; color: #999999;
display: inline-block; } display: inline-block; }
/* line 81, ../sass/_mixins.scss */
.s-btn.s-very-subtle:hover, .s-very-subtle.s-icon-btn:hover { .s-btn.s-very-subtle:hover, .s-very-subtle.s-icon-btn:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959));
background-image: -webkit-linear-gradient(#666666, #595959); background-image: -webkit-linear-gradient(#666666, #595959);
@@ -985,6 +983,7 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #33ccff; border-top: 1px solid #33ccff;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
@@ -994,7 +993,6 @@ a.l-btn span {
background-image: -o-linear-gradient(#33ccff, #0099cc); background-image: -o-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc); background-image: linear-gradient(#33ccff, #0099cc);
color: #ccf2ff; } color: #ccf2ff; }
/* line 134, ../sass/_mixins.scss */
.btn.major:not(.disabled):hover { .btn.major:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
background-image: -webkit-linear-gradient(#66d9ff, #00bfff); background-image: -webkit-linear-gradient(#66d9ff, #00bfff);
@@ -1019,6 +1017,7 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #4dd2ff; border-top: 1px solid #4dd2ff;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
@@ -1028,7 +1027,6 @@ a.l-btn span {
background-image: -o-linear-gradient(#4dd2ff, #00ace6); background-image: -o-linear-gradient(#4dd2ff, #00ace6);
background-image: linear-gradient(#4dd2ff, #00ace6); background-image: linear-gradient(#4dd2ff, #00ace6);
color: #ccf2ff; } color: #ccf2ff; }
/* line 134, ../sass/_mixins.scss */
.btn.major:hover:not(.disabled):hover { .btn.major:hover:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80dfff), color-stop(100%, #1ac6ff)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80dfff), color-stop(100%, #1ac6ff));
background-image: -webkit-linear-gradient(#80dfff, #1ac6ff); background-image: -webkit-linear-gradient(#80dfff, #1ac6ff);
@@ -1062,10 +1060,10 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #999999; border-top: 1px solid #999999;
color: #cccccc; color: #cccccc;
display: inline-block; } display: inline-block; }
/* line 126, ../sass/_mixins.scss */
.btn.subtle:not(.disabled):hover { .btn.subtle:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #808080)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #808080));
background-image: -webkit-linear-gradient(#999999, #808080); background-image: -webkit-linear-gradient(#999999, #808080);
@@ -1090,10 +1088,10 @@ a.l-btn span {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #b3b3b3; color: #b3b3b3;
display: inline-block; } display: inline-block; }
/* line 126, ../sass/_mixins.scss */
.btn.very-subtle:not(.disabled):hover { .btn.very-subtle:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#666666, #4d4d4d);
@@ -1288,12 +1286,12 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
height: 20px; height: 20px;
line-height: 20px; } line-height: 20px; }
/* line 126, ../sass/_mixins.scss */
.btn-menu:not(.disabled):hover { .btn-menu:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#666666, #4d4d4d);
@@ -1438,6 +1436,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
@@ -1449,14 +1448,12 @@ label.checkbox.custom {
auto: 0; auto: 0;
bottom: auto; bottom: auto;
left: auto; } left: auto; }
/* line 126, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover { .slider .knob:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); } background-image: linear-gradient(#666666, #4d4d4d); }
/* line 98, ../sass/_mixins.scss */
.slider .knob:before { .slider .knob:before {
content: ''; content: '';
display: block; display: block;
@@ -1467,7 +1464,6 @@ label.checkbox.custom {
left: 2px; left: 2px;
bottom: 5px; bottom: 5px;
top: 5px; } top: 5px; }
/* line 119, ../sass/_mixins.scss */
.slider .knob:not(.disabled):hover:before { .slider .knob:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }
/* line 426, ../sass/controls/_controls.scss */ /* line 426, ../sass/controls/_controls.scss */
@@ -1577,6 +1573,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #737373; border-top: 1px solid #737373;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
@@ -1589,7 +1586,6 @@ label.checkbox.custom {
.menu-element .menu ul { .menu-element .menu ul {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 178, ../sass/_mixins.scss */
.menu-element .menu ul li { .menu-element .menu ul li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@@ -1704,6 +1700,7 @@ label.checkbox.custom {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #a6a6a6; border-top: 1px solid #a6a6a6;
color: #999999; color: #999999;
display: inline-block; } display: inline-block; }
@@ -1777,10 +1774,10 @@ label.checkbox.custom {
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px;
position: relative; } position: relative; }
/* line 25, ../sass/forms/_elems.scss */ /* line 23, ../sass/forms/_elems.scss */
.form .form-row:first-child { .form .form-row:first-child {
border-top: none; } border-top: none; }
/* line 29, ../sass/forms/_elems.scss */ /* line 27, ../sass/forms/_elems.scss */
.form .form-row .label, .form .form-row .label,
.form .form-row .controls { .form .form-row .controls {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@@ -1792,24 +1789,27 @@ label.checkbox.custom {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 22px; line-height: 22px;
min-height: 22px; } min-height: 22px; }
/* line 39, ../sass/forms/_elems.scss */ /* line 36, ../sass/forms/_elems.scss */
.form .form-row > .label { .form .form-row > .label {
float: left; float: left;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 20%; } width: 20%; }
/* line 47, ../sass/forms/_elems.scss */ /* line 44, ../sass/forms/_elems.scss */
.form .form-row .value { .form .form-row .value {
color: #cccccc; } color: #cccccc; }
/* line 51, ../sass/forms/_elems.scss */ /* line 48, ../sass/forms/_elems.scss */
.form .form-row .controls { .form .form-row .controls {
float: left; float: left;
position: relative; position: relative;
width: 79%; } width: 79%; }
/* line 58, ../sass/forms/_elems.scss */ /* line 52, ../sass/forms/_elems.scss */
.form .form-row .controls .select {
margin-right: 5px; }
/* line 57, ../sass/forms/_elems.scss */
.form .form-row .field-hints { .form .form-row .field-hints {
color: #666666; } color: #666666; }
/* line 62, ../sass/forms/_elems.scss */ /* line 61, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@@ -1820,7 +1820,7 @@ label.checkbox.custom {
position: relative; position: relative;
height: 150px; height: 150px;
max-width: 50%; } max-width: 50%; }
/* line 70, ../sass/forms/_elems.scss */ /* line 69, ../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;
@@ -1829,12 +1829,12 @@ label.checkbox.custom {
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 84, ../sass/forms/_elems.scss */ /* line 83, ../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 90, ../sass/forms/_elems.scss */ /* line 89, ../sass/forms/_elems.scss */
.hint { .hint {
font-size: 0.9em; } font-size: 0.9em; }
@@ -1922,30 +1922,23 @@ input[type="text"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
margin-right: 5px;
margin-top: 1px;
padding: 0 25px 0 0; padding: 0 25px 0 0;
position: relative;
overflow: hidden; overflow: hidden;
vertical-align: middle; } vertical-align: middle;
/* line 126, ../sass/_mixins.scss */ cursor: pointer;
margin: 0 0 2px 2px;
position: relative; }
.form-control.select:not(.disabled):hover { .form-control.select:not(.disabled):hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
background-image: -webkit-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#666666, #4d4d4d);
background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -moz-linear-gradient(#666666, #4d4d4d);
background-image: -o-linear-gradient(#666666, #4d4d4d); background-image: -o-linear-gradient(#666666, #4d4d4d);
background-image: linear-gradient(#666666, #4d4d4d); } background-image: linear-gradient(#666666, #4d4d4d); }
/* line 11, ../sass/forms/_selects.scss */ /* line 7, ../sass/forms/_selects.scss */
.form-control.select span.arw {
display: block;
pointer-events: none;
position: absolute;
right: 8%;
top: 10%; }
/* line 18, ../sass/forms/_selects.scss */
.form-control.select select { .form-control.select select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@@ -1953,16 +1946,21 @@ input[type="text"] {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border: none; background: none;
box-shadow: none; color: #999999;
background-color: transparent; border: none !important;
background-image: none;
cursor: pointer; cursor: pointer;
padding: 3px 5px 4px 5px; padding: 4px 25px 2px 5px; }
width: 150%; } /* line 16, ../sass/forms/_selects.scss */
/* line 32, ../sass/forms/_selects.scss */ .form-control.select:after {
.form-control.select select:focus { color: #0099cc;
outline: none; } content: "v";
display: block;
font-family: 'symbolsfont';
pointer-events: none;
position: absolute;
right: 5px;
top: 0; }
/* line 2, ../sass/forms/_channel-selector.scss */ /* line 2, ../sass/forms/_channel-selector.scss */
.channel-selector .line { .channel-selector .line {
@@ -2081,7 +2079,7 @@ input[type="text"] {
-ms-border-radius: 3px; -ms-border-radius: 3px;
-o-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
display: block; display: inline-block;
font-size: 1.3em; font-size: 1.3em;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
@@ -2391,6 +2389,7 @@ input[type="text"] {
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
border: none;
border-top: 1px solid #666666; border-top: 1px solid #666666;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
@@ -2657,7 +2656,6 @@ input[type="text"] {
height: 5px; height: 5px;
margin-top: -7px; margin-top: -7px;
top: 70%; } top: 70%; }
/* line 98, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:before { .split-layout.horizontal > .splitter:before {
content: ''; content: '';
display: block; display: block;
@@ -2668,7 +2666,6 @@ input[type="text"] {
top: 2px; top: 2px;
left: 5px; left: 5px;
right: 5px; } right: 5px; }
/* line 119, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:not(.disabled):hover:before { .split-layout.horizontal > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }
/* line 42, ../sass/helpers/_splitter.scss */ /* line 42, ../sass/helpers/_splitter.scss */
@@ -2690,7 +2687,6 @@ input[type="text"] {
width: 5px; width: 5px;
margin-left: -7px; margin-left: -7px;
left: 85%; } left: 85%; }
/* line 98, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:before { .split-layout.vertical > .splitter:before {
content: ''; content: '';
display: block; display: block;
@@ -2701,7 +2697,6 @@ input[type="text"] {
left: 2px; left: 2px;
bottom: 5px; bottom: 5px;
top: 5px; } top: 5px; }
/* line 119, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:not(.disabled):hover:before { .split-layout.vertical > .splitter:not(.disabled):hover:before {
border-color: rgba(0, 153, 204, 0.9); } border-color: rgba(0, 153, 204, 0.9); }

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

@@ -2,7 +2,6 @@
ul.tree { ul.tree {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 178, ../sass/_mixins.scss */
ul.tree li { ul.tree li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;

1
platform/commonUI/general/res/sass/_mixins.scss
View File

@@ -74,6 +74,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
// @include box-shadow(rgba(black, 0.3) 0 1px 2px); // @include box-shadow(rgba(black, 0.3) 0 1px 2px);
@include boxShdwSubtle(); @include boxShdwSubtle();
border: none;
border-top: 1px solid lighten($bg, 20%); border-top: 1px solid lighten($bg, 20%);
color: $fg; color: $fg;
display: inline-block; display: inline-block;

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

@@ -16,9 +16,7 @@
.form-row { .form-row {
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
// background: rgba(#00ff00, 0.1);
border-top: 1px solid $colorInteriorBorder; border-top: 1px solid $colorInteriorBorder;
// box-sizing: border-box;
margin-top: $interiorMargin; margin-top: $interiorMargin;
padding: $interiorMargin; padding: $interiorMargin;
position: relative; position: relative;
@@ -27,7 +25,6 @@
} }
.label, .label,
.controls { .controls {
// background: rgba(#ffcc00, 0.1);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
box-sizing: border-box; box-sizing: border-box;
@@ -50,9 +47,11 @@
.controls { .controls {
float: left; float: left;
// padding-left: $interiorMargin;
position: relative; position: relative;
width: 99% - $formLabelW; // Start with less than 100% for Firefox width: 99% - $formLabelW; // Start with less than 100% for Firefox
.select {
margin-right: $interiorMargin;
}
} }
.field-hints { .field-hints {

2
platform/commonUI/general/res/sass/forms/_filter.scss
View File

@@ -20,7 +20,7 @@
} }
.icon.ui-symbol { .icon.ui-symbol {
@include border-radius($controlCr); @include border-radius($controlCr);
display: block; display: inline-block;
font-size: 1.3em; font-size: 1.3em;
height: $formInputH; height: $formInputH;
line-height: $formInputH; line-height: $formInputH;

41
platform/commonUI/general/res/sass/forms/_selects.scss
View File

@@ -1,35 +1,26 @@
.form-control.select { .form-control.select {
$myH: $formInputH + 1;
@include btnSubtle($colorBodyBg); @include btnSubtle($colorBodyBg);
margin-right: $interiorMargin; cursor: pointer;
margin-top: 1px; display: inline-block;
padding: 0 25px 0 0; margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
position: relative; position: relative;
overflow: hidden;
vertical-align: middle;
span.arw {
display: block;
pointer-events: none;
position: absolute;
right: 8%; top: 10%;
}
select { select {
@include appearance(none); @include appearance(none);
@include box-sizing(border-box); @include box-sizing(border-box);
border: none; background: none;
box-shadow: none; color: $colorBodyFg;
background-color: transparent; border: none !important;
background-image: none;
cursor: pointer; cursor: pointer;
// height: $myH; padding: 4px 25px 2px 5px;
// line-height: $myH;
padding: 3px 5px 4px 5px;
width: 150%;
} }
&:after {
select:focus { color: $colorKey;
outline: none; content:"v";
display: block;
font-family: 'symbolsfont';
pointer-events: none;
position: absolute;
right: $interiorMargin; top: 0;
// z-index: 2;
} }
} }

17
platform/forms/res/templates/controls/select.html
View File

@@ -1,8 +1,9 @@
<select class='form-control input select' <div class='form-control select'>
ng-model="ngModel[field]" <select
ng-options="opt.value as opt.name for opt in options" ng-model="ngModel[field]"
ng-required="ngRequired" ng-options="opt.value as opt.name for opt in options"
name="mctControl"> ng-required="ngRequired"
<option value="" ng-if="!ngModel[field]">- Select One -</option> name="mctControl">
<span class='ui-symbol arw colorKey'>v</span> <option value="" ng-if="!ngModel[field]">- Select One -</option>
</select> </select>
</div>