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

Converted indentation to spaces globally.

Browse Source
This commit is contained in:
Marcus Scholz
2020-08-17 15:39:17 +02:00
parent e80e93bcaa
commit b64724b586
57 changed files with 857 additions and 857 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,27 +1,27 @@
.LP-Form{
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
.LP-Form__Fieldset{
border: none;
max-width: 1200px;
min-width: $-viewport-medium;
border: none;
max-width: 1200px;
min-width: $-viewport-medium;
.LP-Form__Legend{
margin: 0;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
padding: 0;
font-family: $-primary-sans-serif-font;
font-size: 21px;
}
.LP-Form__Composition{
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: space-between;
.LP-Form__Field{
flex: 3 2 100px;
padding: 6px 15px;
@@ -41,37 +41,37 @@
&--narrower{
flex: 1 2;
}
}
}
&--buttons{
justify-content: flex-end;
}
&--buttons{
justify-content: flex-end;
}
.LP-Form__Button{
flex-grow: 0;
padding-left: 0;
min-width: 130px;
.LP-Form__Button{
flex-grow: 0;
padding-left: 0;
min-width: 130px;
.LP-Link{
display:contents;
}
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
.LP-Link{
display:contents;
}
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
}
}
}
@media(max-width: $-viewport-medium){
.LP-Form{
.LP-Form__Fieldset{
min-width: unset;
}
.LP-Form__Fieldset{
min-width: unset;
}
}
}
@@ -81,7 +81,7 @@
.LP-Form__Composition--breakable{
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between;
}
}
}
@@ -96,20 +96,20 @@
justify-content: space-between;
.LP-Form__Field{
&:not(.LP-Form__Button){
flex: 3 1 100px;
padding: 12px 15px;
}
}
.LP-Form__Button{
padding: 0 15px;
}
&--buttons{
justify-content: flex-end;
}
&:not(.LP-Form__Button){
flex: 3 1 100px;
padding: 12px 15px;
}
}
.LP-Form__Button{
padding: 0 15px;
}
&--buttons{
justify-content: flex-end;
}
}
}
}

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

@@ -4,25 +4,25 @@
<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 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 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__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">
@@ -37,11 +37,11 @@
</div>
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__InfoText">
<p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__InfoText">
<p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
@@ -54,12 +54,12 @@
</div>
</div>
<div class="LP-Form__Composition LP-Form__Composition--buttons">
<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__Button LP-Input LP-Input">
<button class="LP-Button LP-Button--cancel">Kenschäll</button>
<button class="LP-Button LP-Button--cancel">Kenschäll</button>
</div>
</div>