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

Cleaned Molecules

Browse Source
This commit is contained in:
reverend
2020-08-01 00:26:35 +02:00
parent 906e037c5c
commit 5c6303f653
6 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,71 +0,0 @@
.LP-Form{
max-width: 900px;
.LP-Form__Fieldset{
border: none;
.LP-Form__Legend{
margin: 0;
padding: 0;
}
.LP-Form__Composition{
display: flex;
flex-direction: row;
justify-content: space-between;
.LP-Form__Field{
flex: 3 1 100px;
padding: 6px 15px;
&--wider{
flex: 5 1 200px;
}
&--wide{
flex: 4 1 150px;
}
&--narrow{
flex: 2 0 50px;
}
&--narrower{
flex: 1 0 25px;
}
input{
width: 100%;
}
}
}
}
}
@media(max-width: $-viewport-small){
.LP-Form{
.LP-Form__Fieldset{
.LP-Form__Composition--breakable{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
}
}
@media(max-width: $-viewport-extra-small){
.LP-Form{
.LP-Form__Fieldset{
.LP-Form__Composition{
display: flex;
flex-direction: column;
justify-content: space-between;
.LP-Form__Field{
flex: 3 1 100px;
padding: 12px 15px;
}
}
}
}
}

3
components/02_Molecules/form/form.config.json
View File

@@ -1,3 +0,0 @@
{
}

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

@@ -1,52 +0,0 @@
<form class="LP-Form">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Basic data</legend>
<div class="LP-Form__Composition LP-Form__Composition--breakable">
<div class="LP-Form__Field">
<div class="LP-Input LP-Input--error">
<label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
<span class="LP-Input__Message">Field is required</span>
</div>
</div>
<div class="LP-Form__Field">
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">Last name</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</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__Field LP-Form__Field--wider LP-Input">
<label for="input123" class="LP-Input__Label">Street</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">We won't send any stalkers, promise</span>
</div>
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">House no</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span>
</div>
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">Postal Code</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
<label for="input123" class="LP-Input__Label">Town</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</div>
</div>
</fieldset>
</form>

6
components/02_Molecules/logo/_logo.scss
View File

@@ -1,6 +0,0 @@
.LP-Logo {
max-width: 100%;
max-height: 100%;
width: auto;
object-fit: contain;
}

1
components/02_Molecules/logo/logo.config.json
View File

@@ -1 +0,0 @@
{}

3
components/02_Molecules/logo/logo.hbs
View File

@@ -1,3 +0,0 @@
<a href="LP-Link" href="#">
<img class="LP-Logo" src="{{ path '/images/logo.png' }}"/>
</a>