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

Compare commits

base: Commander1024:10c3b3179e9f0f0583812cf1f7107921af97aad1
Branches Tags
Commander1024:master
Commander1024:linklist-add
..
compare: Commander1024:fd5e87b9ad56fe378f0e0c3af6761ede4a772404
Branches Tags
Commander1024:master
Commander1024:linklist-add

No commits in common. "10c3b3179e9f0f0583812cf1f7107921af97aad1" and "fd5e87b9ad56fe378f0e0c3af6761ede4a772404" have entirely different histories.
10c3b3179e ... fd5e87b9ad

17 changed files with 15 additions and 199 deletions
Show Stats Expand all files Collapse all files

3
components/01_Atoms/_atoms.scss
View File

@ -1,5 +1,4 @@
@import 'link/link';
@import 'headline/headline';
@import 'text/text';
@import 'icon/icon';
@import 'input/input';
@import 'icon/icon';

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

@ -1,67 +0,0 @@
.LP-Input{
$-margin-bottom: 30px;
display: flex;
flex-direction: column;
margin-bottom: -$-margin-bottom;
padding: 10px 0;
.LP-Input__Field{
border: none;
border-bottom: 1px solid $-secondary-color;
padding: 8px;
margin-bottom: $-margin-bottom;
&:focus, &:active{
margin-bottom: $-margin-bottom - 1px;
border-bottom: 2px solid $-primary-accent-color;
background-color: $-secondary-background-color;
border-radius: 3px 3px 0 0;
}
}
.LP-Input__Label{
font-family: $-primary-sans-serif-font;
font-size: 18px;
}
.LP-Input__Message{
font-family: $-primary-sans-serif-font;
font-style: italic;
font-size: 13px;
padding: 3px;
position: relative;
top: -$-margin-bottom;
&:before{
content: '* ';
}
}
&--error{
.LP-Input__Field{
margin-bottom: 25px;
border-bottom: 2px solid $-primary-accent-color;
margin-bottom: $-margin-bottom - 1px;
}
.LP-Input__Message{
color: $-primary-accent-color;
}
}
}
@media(max-width: $-viewport-small){
.LP-Input{
.LP-Input__Label{
font-family: $-primary-sans-serif-font;
font-size: 2.5vw;
}
}
}
@media(max-width: $-viewport-extra-small){
.LP-Input{
.LP-Input__Label{
font-family: $-primary-sans-serif-font;
font-size: 18px;
}
}
}

3
components/01_Atoms/input/input.config.json
View File

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

5
components/01_Atoms/input/input.hbs
View File

@ -1,5 +0,0 @@
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span>
</div>

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

@ -1,70 +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: 0 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;
}
}
}
}
}

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

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

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

@ -1,42 +1,14 @@
<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">
<span class="LP-Form__Field LP-Input LP-Input--error">
<label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span>
</span>
<span class="LP-Form__Field LP-Input">
<label for="input123" class="LP-Input__Label">Last name</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<div class="LP-Form__Row">
<span class="LP-Form__Field">
<label for="textinput123" class="LP-Input__Label">Enter your text here</label>
<input id="textinput123" type="text" class="LP-Input__Text"/>
<span class="LP-Input__ErrorMessage">
<p>Text is required</p>
</span>
</span>
</div>
<div class="LP-Form__Composition">
<span 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>
</span>
<span class="LP-Form__Field LP-Form__Field--narrower 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>
</span>
</div>
<div class="LP-Form__Composition">
<span 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"/>
</span>
<span 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"/>
</span>
</div>
</fieldset>
</form>

21
components/components.scss
View File

@ -1,18 +1,12 @@
@font-face {
font-family: Crimson;
src:
url('fonts/Crimson/CrimsonText-Regular.ttf'),
url('fonts/Crimson/CrimsonText-Bold.ttf'),
url('fonts/Crimson/CrimsonText-Italic.ttf')
;
}
@font-face {
font-family: Montserrat;
src:
url('fonts/Montserrat/Montserrat-Regular.ttf'),
url('fonts/Montserrat/Montserrat-Bold.ttf'),
url('fonts/Montserrat/Montserrat-Italic.ttf')
url('fonts/CrimsonText-Regular.ttf'),
url('fonts/CrimsonText-Bold.ttf'),
url('fonts/CrimsonText-Italic.ttf'),
url('fonts/CrimsonText-BoldItalic.ttf'),
url('fonts/CrimsonText-SemiBold.ttf'),
url('fonts/CrimsonText-SemiBoldItalic.ttf')
;
}
@ -22,12 +16,11 @@ $-primary-accent-color: #76323F;
$-secondary-accent-color: #C09F80;
$-secondary-background-color: #f9f9f9;
$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
$-primary-sans-serif-font: "Trebuchet MS", Helvetica, sans-serif;
$-primary-serif-font: Crimson, Times, serif;
$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
$-viewport-small: 650px;
$-viewport-extra-small: 390px;
@import '01_Atoms/atoms';

0
public/fonts/Crimson/CrimsonText-Bold.ttf → public/fonts/CrimsonText-Bold.ttf
View File

0
public/fonts/Crimson/CrimsonText-BoldItalic.ttf → public/fonts/CrimsonText-BoldItalic.ttf
View File

0
public/fonts/Crimson/CrimsonText-Italic.ttf → public/fonts/CrimsonText-Italic.ttf
View File

0
public/fonts/Crimson/CrimsonText-Regular.ttf → public/fonts/CrimsonText-Regular.ttf
View File

0
public/fonts/Crimson/CrimsonText-SemiBold.ttf → public/fonts/CrimsonText-SemiBold.ttf
View File

0
public/fonts/Crimson/CrimsonText-SemiBoldItalic.ttf → public/fonts/CrimsonText-SemiBoldItalic.ttf
View File

BIN
public/fonts/Montserrat/Montserrat-Bold.otf
View File

Binary file not shown.

BIN
public/fonts/Montserrat/Montserrat-Italic.otf
View File

Binary file not shown.

BIN
public/fonts/Montserrat/Montserrat-Regular.otf
View File

Binary file not shown.