[Frontend] Revised mobile styles for form layout

Fixes #1118
This commit is contained in:
Charles Hacskaylo
2016-08-10 16:43:14 -07:00
parent 1a284ac9dc
commit cc6b9d4099

View File

@ -25,7 +25,6 @@
@include phone { @include phone {
.overlay > .holder { .overlay > .holder {
//@include test(orange); // This works!
$m: 0; $m: 0;
border-radius: $m; border-radius: $m;
top: $m; top: $m;
@ -38,36 +37,30 @@
overflow: auto; overflow: auto;
@include transform(none); @include transform(none);
.editor .form .form-row { .editor .form .form-row.l-flex-row {
> .label, // Display elements in a columnar view
> .controls { @include flex-direction(column);
//@include test(blue); > .flex-elem {
display: block; &:not(:first-child) {
float: none; margin-top: $interiorMargin;
width: 100%; }
} &.label {
> .label { width: 100%;
&:after { }
float: none; &.controls {
overflow: auto;
} }
} }
}
.contents { &.validates > .label:before {
.abs.top-bar,
.abs.editor,
.abs.message-body,
.abs.bottom-bar {
//@include test(orange);
top: auto; right: auto; bottom: auto; left: auto;
height: auto; width: auto;
margin-bottom: $interiorMarginLg * 2;
position: relative; position: relative;
right: auto;
line-height: inherit;
margin-right: $interiorMargin;
} }
} }
} }
.t-dialog-sm .overlay > .holder { .t-dialog-sm .overlay > .holder {
//@include test(blue);
height: auto; max-height: 100%; height: auto; max-height: 100%;
} }
} }