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
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;
padding: 8px 0;
margin-bottom: $-margin-bottom;
width: 100%;
&:focus, &:active, &:invalid{
margin-bottom: $-margin-bottom - 1px;

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

@@ -1,5 +1,31 @@
.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{
@include RV-Reset;
max-width: 1200px;
@@ -27,10 +53,6 @@
}
}
@media(max-width: $-viewport-extra-small){
@include RV-FlexRow__Container--multiRow;
}
&--buttons{
justify-content: flex-end;
@include RV-Spacing__Inner--small;
@@ -40,14 +62,6 @@
.LP-Form__Field{
@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-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">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Basic data</legend>
@@ -63,22 +83,5 @@
</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>
</form>

2
components/rcss.bundled.scss
View File

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