[Mobile] IN PROGRESS: Overlay and form cleanups

open #74
Widths and layout strategy fixed for label and
controls in form when appearing in mobile;
Overlay margins adjusted;
Cleaned up font size, line-height in tree items;
This commit is contained in:
Charles Hacskaylo
2015-08-26 09:43:51 -07:00
parent 07d0706cd1
commit 39bd292886
13 changed files with 196 additions and 140 deletions

View File

@@ -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;

View File

@@ -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,