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

[Autoflow] Add SCSS files

Browse Source 
Merge in SCSS files and platform markup which supports
autoflow tabular views for WTD-611 into the open-source-friendly
master branch.
This commit is contained in:
Victor Woeltjen
2014-12-31 10:43:01 -08:00
parent 5414c4c2d0
commit 7db5c0692b
55 changed files with 4693 additions and 1935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
platform/commonUI/general/res/sass/forms/_channel-selector.scss Normal file
View File

@@ -0,0 +1,26 @@
.channel-selector {
.line {
margin-bottom: $interiorMargin;
min-height: $formInputH;
}
.treeview {
$myBg: darken($colorBodyBg, 2%);
@include subdued-input();
min-height: 300px;
max-height: 400px;
overflow: auto;
padding: $interiorMargin;
}
.btns-add-remove {
// background: rgba(#ff0000, 0.3);;
margin-top: 150px;
.btn {
display: block;
font-size: 1.5em;
margin-bottom: $interiorMargin;
padding: 10px;
text-align: center;
}
}
}

36
platform/commonUI/general/res/sass/forms/_datetime.scss Normal file
View File

@@ -0,0 +1,36 @@
.complex.datetime {
span {
display: inline-block;
margin-right: $interiorMargin;
}
.field-hints,
.fields {
}
.field-hints {
}
.fields {
margin-top: $interiorMarginSm 0;
padding: $interiorMarginSm 0;
}
.date {
$myW: 80px;
width: $myW + $interiorMargin;
input {
width: $myW;
}
}
.time.sm {
$myW: 40px;
width: $myW + $interiorMargin;
input {
width: $myW;
}
}
}

92
platform/commonUI/general/res/sass/forms/_elems.scss Normal file
View File

@@ -0,0 +1,92 @@
.form {
.section-header {
@include border-radius(3px);
background: rgba(white, 0.1);
font-size: 0.8em;
margin-top: $interiorMargin;
padding: $interiorMargin;
&:first-child {
margin-top: 0;
}
}
.form-section {
position: relative;
}
.form-row {
@include box-sizing(border-box);
@include clearfix;
// background: rgba(#00ff00, 0.1);
border-top: 1px solid $colorInteriorBorder;
// box-sizing: border-box;
margin-top: $interiorMargin;
padding: $interiorMargin;
position: relative;
&:first-child {
border-top: none;
}
.label,
.controls {
// background: rgba(#ffcc00, 0.1);
@include box-sizing(border-box);
@include clearfix;
box-sizing: border-box;
font-size: 0.75rem;
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
float: left;
position: relative;
white-space: nowrap;
width: $formLabelW;
}
.value {
color: lighten($colorBodyFg, 20%);
}
.controls {
float: left;
// padding-left: $interiorMargin;
position: relative;
width: 99% - $formLabelW; // Start with less than 100% for Firefox
}
.field-hints {
color: darken($colorBodyFg, 20%);
}
.selector-list {
// Used in create overlay to display tree view
$h: 150px;
@include border-radius($basicCr);
background: rgba(black, 0.2);
position: relative;
height: $h;
max-width: 50%;
.wrapper {
$p: $interiorMargin;
overflow-y: auto;
position: absolute;
top: $p;
right: $p;
bottom: $p;
left: $p;
}
}
}
}
label.form-control.checkbox {
input {
margin-right: $interiorMargin;
vertical-align: top;
}
}
.hint {
font-size: 0.9em;
}

82
platform/commonUI/general/res/sass/forms/_filter.scss Normal file
View File

@@ -0,0 +1,82 @@
.filter,
.t-filter {
input.filter,
input.t-filter-input {
@include subdued-input();
}
input.t-filter-input {
height: $formInputH;
width: 200px;
&:not(.ng-dirty) {
// TO-DO: Update compass install to support this
// @include input-placeholder {
// color: rgba(#fff, 0.3);
// font-style: italic;
// }
}
&:not(.ng-dirty) + .t-a-clear {
display: none;
}
}
.icon.ui-symbol {
@include border-radius($controlCr);
display: block;
font-size: 1.3em;
height: $formInputH;
line-height: $formInputH;
padding: 0px 5px;
vertical-align: middle;
&:hover {
background: rgba(white, 0.1);
}
}
.s-a-clear.ui-symbol {
$mgn: 4.5px;
$d: $formInputH - $mgn * 2;
$cb: #fff;
$cf: #333;
@include border-radius($controlCr);
@include box-sizing(border-box);
@include opacity(0.2);
background: $cb;
color: $cf;
display: block;
position: absolute;
height: $d; width: $d;
line-height: $d;
margin-top: $d * -0.5;
overflow: hidden;
padding-top: 1px;
right: $mgn; top: 50%;
text-align: center;
z-index: 5;
&:hover {
@include opacity(0.6);
background-color: $colorKey;
}
}
// &:not(ng-dirty)
}
.l-filter {
// Holds an input and a clear button
display:inline-block;
position: relative;
}
.top-bar {
input.filter {
$h: $ueTopBarH;
$ip: 10px;
font-size: .8em;
height: $h;
line-height: $h;
margin-right: $interiorMargin;
margin-top: -5px;
padding-left: $ip;
padding-right: $ip;
}
.icon-filter {
font-size: 1.4em;
}
}

30
platform/commonUI/general/res/sass/forms/_mixins.scss Normal file
View File

@@ -0,0 +1,30 @@
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.5) 0 1px 5px);
background: lighten($bg, 20%);
border: none;
border-bottom: 1px solid lighten($bg, 40%);
color: lighten($fg, 20%);
outline: none;
&.error {
background: rgba(red, 0.5);
}
}
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: $interiorMargin;
}
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include nice-input($bg, $fg);
background: lighten($bg, 3%);
border-bottom: 1px solid lighten($bg, 10%);
}

35
platform/commonUI/general/res/sass/forms/_selects.scss Normal file
View File

@@ -0,0 +1,35 @@
.form-control.select {
$myH: $formInputH + 1;
@include btnSubtle($colorBodyBg);
margin-right: $interiorMargin;
margin-top: 1px;
padding: 0 25px 0 0;
position: relative;
overflow: hidden;
vertical-align: middle;
span.arw {
display: block;
pointer-events: none;
position: absolute;
right: 8%; top: 10%;
}
select {
@include appearance(none);
@include box-sizing(border-box);
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
cursor: pointer;
// height: $myH;
// line-height: $myH;
padding: 3px 5px 4px 5px;
width: 150%;
}
select:focus {
outline: none;
}
}

14
platform/commonUI/general/res/sass/forms/_text-input.scss Normal file
View File

@@ -0,0 +1,14 @@
input[type="text"] {
@include nice-input();
height: $formInputH;
line-height: $formInputH;
vertical-align: middle;
&.filter {
&.ng-dirty {
// background: red;
}
}
&.numeric {
text-align: right;
}
}

7
platform/commonUI/general/res/sass/forms/_textarea.scss Normal file
View File

@@ -0,0 +1,7 @@
.edit-main textarea {
@include nice-textarea();
// font-size: 0.9em;
position: absolute;
height: 100%;
width: 100%;
}

47
platform/commonUI/general/res/sass/forms/_validation.scss Normal file
View File

@@ -0,0 +1,47 @@
.validates {
$symbolW: 15px;
$symbolM: $interiorMargin * 2;
> .label {
// @include test(green, 0.1);
padding-right: $symbolW + $symbolM; // Keep room for validation element
&::after {
// @include test(yellow, 0.3);
display: block;
position: absolute;
top: 0;
right: $symbolM;
bottom: 0;
left: auto;
height: auto;
width: $symbolW;
font-family: symbolsfont;
font-size: 1.1em;
text-align: right;
vertical-align: middle;
}
}
&.invalid,
&.invalid.req {
> .label::after {
color: $colorFormInvalid;
content: "x";
}
}
&.valid,
&.valid.req {
> .label::after {
color: $colorFormValid;
content: "2";
}
}
&.req {
> .label::after {
color: $colorFormRequired;
content: "*";
}
}
}
span.req {
color: $colorFormRequired;
}