Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Inline Forms

Browse Source
This commit is contained in:
reverend 2020-08-25 16:26:18 +02:00
parent 9c8986c564
commit 4004342255
5 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/01_Atoms/input/_input.scss
View File

@ -10,6 +10,7 @@
border-bottom: 1px solid $-grey; border-bottom: 1px solid $-grey;
padding: 8px 0; padding: 8px 0;
margin-bottom: $-margin-bottom; margin-bottom: $-margin-bottom;
width: 100%;
&:focus, &:active, &:invalid{ &:focus, &:active, &:invalid{
margin-bottom: $-margin-bottom - 1px; margin-bottom: $-margin-bottom - 1px;

38
components/03_Organisms/form/_form.scss
View File

@ -1,5 +1,31 @@
.LP-Form{ .LP-Form{
&--inline {
.LP-Form__Legend, .LP-Input__Label {
display: none;
}
.LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(max-content);
}
}
&:not(.LP-Form--inline){
.LP-Form__Composition {
@media(max-width: $-viewport-extra-small){
@include RV-FlexRow__Container--multiRow;
}
}
.LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(130px);
@media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%);
}
}
}
.LP-Form__Fieldset{ .LP-Form__Fieldset{
@include RV-Reset; @include RV-Reset;
max-width: 1200px; max-width: 1200px;
@ -27,10 +53,6 @@
} }
} }
@media(max-width: $-viewport-extra-small){
@include RV-FlexRow__Container--multiRow;
}
&--buttons{ &--buttons{
justify-content: flex-end; justify-content: flex-end;
@include RV-Spacing__Inner--small; @include RV-Spacing__Inner--small;
@ -40,14 +62,6 @@
.LP-Form__Field{ .LP-Form__Field{
@include RV-FlexRow__Item; @include RV-FlexRow__Item;
} }
.LP-Form__Button{
@include RV-FlexRow__Item--fixedSize(130px);
@media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%);
}
}
.LP-Form__InfoText{ .LP-Form__InfoText{
.LP-Paragraph{ .LP-Paragraph{

37
components/03_Organisms/form/form.hbs
View File

@ -1,3 +1,23 @@
<form class="LP-Form LP-Form--inline">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Basic data</legend>
<div class="LP-Form__Composition LP-Form__Composition--buttons">
<div class="LP-Form__Field LP-Form__Button LP-Input">
<input type="submit" class="LP-Button" value="Submit"/>
</div>
<div class="LP-Form__Field LP-Form__Field--narrower">
<div class="LP-Input LP-Input--disabled">
<label for="input123" class="LP-Input__Label">Age</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
</div>
</div>
</div>
</fieldset>
</form>
<form class="LP-Form"> <form class="LP-Form">
<fieldset class="LP-Form__Fieldset"> <fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Basic data</legend> <legend class="LP-Form__Legend">Basic data</legend>
@ -63,22 +83,5 @@
</div> </div>
</div> </div>
</fieldset>
</form>
<form class="LP-Form">
<fieldset class="LP-Form__Fieldset">
<div class="LP-Form__Composition LP-Form__Composition--buttons">
<div class="LP-Form__Field LP-Form__Button LP-Input">
<input type="submit" class="LP-Button" value="Submit"/>
</div>
<div class="LP-Form__Field LP-Form__Field--narrower">
<div class="LP-Input">
<input type="text" id="input123" class="LP-Input__Field"/>
</div>
</div>
</div>
</fieldset> </fieldset>
</form> </form>

2
components/rcss.bundled.scss
View File

@ -150,7 +150,7 @@ $-spacing-large: 35px;
@mixin RV-FlexRow__Item { @mixin RV-FlexRow__Item {
@include RV-Alignment; @include RV-Alignment;
min-width: 0; min-width: min-content;
width: 100%; width: 100%;
&,&--normal { &,&--normal {

47
public/main.css
View File

@ -38,7 +38,7 @@
flex-direction: column; } flex-direction: column; }
.RV-FlexRow__Item { .RV-FlexRow__Item {
min-width: 0; min-width: min-content;
width: 100%; } width: 100%; }
.RV-FlexRow__Item__Container { .RV-FlexRow__Item__Container {
display: grid; } display: grid; }
@ -600,7 +600,8 @@ body {
border: none; border: none;
border-bottom: 1px solid #565656; border-bottom: 1px solid #565656;
padding: 8px 0; padding: 8px 0;
margin-bottom: 30px; } margin-bottom: 30px;
width: 100%; }
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid { .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
margin-bottom: 29px; margin-bottom: 29px;
border-bottom: 2px solid #76323F; border-bottom: 2px solid #76323F;
@ -1094,6 +1095,31 @@ body {
.LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
background-color: inherit; } background-color: inherit; }
.LP-Form--inline .LP-Form__Legend, .LP-Form--inline .LP-Input__Label {
display: none; }
.LP-Form--inline .LP-Form__Button {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: max-content; }
@media (max-width: 450px) {
.LP-Form:not(.LP-Form--inline) .LP-Form__Composition {
flex-wrap: wrap; } }
.LP-Form:not(.LP-Form--inline) .LP-Form__Button {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: 130px; }
@media (max-width: 450px) {
.LP-Form:not(.LP-Form--inline) .LP-Form__Button {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: 100%; } }
.LP-Form .LP-Form__Fieldset { .LP-Form .LP-Form__Fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -1129,9 +1155,6 @@ body {
@media (max-width: 650px) { @media (max-width: 650px) {
.LP-Form .LP-Form__Composition--breakable { .LP-Form .LP-Form__Composition--breakable {
flex-wrap: wrap; } } flex-wrap: wrap; } }
@media (max-width: 450px) {
.LP-Form .LP-Form__Composition {
flex-wrap: wrap; } }
.LP-Form .LP-Form__Composition--buttons { .LP-Form .LP-Form__Composition--buttons {
justify-content: flex-end; justify-content: flex-end;
padding: 10px; } padding: 10px; }
@ -1139,7 +1162,7 @@ body {
gap: 10px; } gap: 10px; }
.LP-Form .LP-Form__Field { .LP-Form .LP-Form__Field {
min-width: 0; min-width: min-content;
width: 100%; } width: 100%; }
.LP-Form .LP-Form__Field__Container { .LP-Form .LP-Form__Field__Container {
display: grid; } display: grid; }
@ -1187,18 +1210,6 @@ body {
width: min-content; width: min-content;
flex-basis: 100px; } flex-basis: 100px; }
.LP-Form .LP-Form__Button {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: 130px; }
@media (max-width: 450px) {
.LP-Form .LP-Form__Button {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: 100%; } }
.LP-Form .LP-Form__InfoText .LP-Paragraph { .LP-Form .LP-Form__InfoText .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
color: #565656; } color: #565656; }