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

Form Tweaking

Browse Source
This commit is contained in:
reverend 2020-07-31 23:35:17 +02:00
parent 013769597d
commit 60e231d1ca
3 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/02_Molecules/_molecules.scss
View File

@ -1,5 +1,5 @@
@import 'logo/logo'; @import 'logo/logo';
@import 'textSection/textSection'; @import 'textSection/textSection';
@import 'place/place'; @import 'placeTeaser/placeTeaser';
@import 'securityMeasureList/securityMeasureList'; @import 'securityMeasureList/securityMeasureList';
@import 'form/form'; @import 'form/form';

5
components/02_Molecules/form/_form.scss
View File

@ -15,7 +15,7 @@
.LP-Form__Field{ .LP-Form__Field{
flex: 3 1 100px; flex: 3 1 100px;
padding: 0 15px; padding: 6px 15px;
&--wider{ &--wider{
flex: 5 1 200px; flex: 5 1 200px;
@ -62,7 +62,8 @@
justify-content: space-between; justify-content: space-between;
.LP-Form__Field{ .LP-Form__Field{
flex: 3 1 100px; flex: 3 1 100px;
padding: 12px 15px;
} }
} }
} }

15
components/02_Molecules/form/form.hbs
View File

@ -16,7 +16,13 @@
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
</div> </div>
</div> </div>
</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>
<div class="LP-Form__Composition"> <div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--wider LP-Input"> <div class="LP-Form__Field LP-Form__Field--wider LP-Input">
@ -24,16 +30,11 @@
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">We won't send any stalkers, promise</span> <span class="LP-Input__Message">We won't send any stalkers, promise</span>
</div> </div>
<div class="LP-Form__Field LP-Form__Field--narrower LP-Input"> <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">House no</label> <label for="input123" class="LP-Input__Label">House no</label>
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span> <span class="LP-Input__Message">Field is required</span>
</div> </div>
<div class="LP-Form__Field LP-Form__Field--narrower LP-Input LP-Input--disabled">
<label for="input123" class="LP-Input__Label">Disabled</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
<span class="LP-Input__Message">Field is required</span>
</div>
</div> </div>
<div class="LP-Form__Composition"> <div class="LP-Form__Composition">