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

Several Form elements

Browse Source
This commit is contained in:
reverend 2020-07-31 22:22:17 +02:00
parent 87cc27bcc8
commit c97a757691
11 changed files with 97 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/01_Atoms/_atoms.scss
View File

@ -2,3 +2,6 @@
@import 'headline/headline'; @import 'headline/headline';
@import 'text/text'; @import 'text/text';
@import 'icon/icon'; @import 'icon/icon';
@import 'textField/textField';
@import 'button/button';
@import 'checkbox/checkbox';

13
components/01_Atoms/button/_button.scss Normal file
View File

@ -0,0 +1,13 @@
.LP-Button{
background-color: $-secondary-accent-color;
color: $-secondary-color;
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold;
&:active {
background-color: $-primary-accent-color;
color: $-secondary-accent-color;
}
}

3
components/01_Atoms/button/button.config.json Normal file
View File

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

1
components/01_Atoms/button/button.hbs Normal file
View File

@ -0,0 +1 @@
<button class="LP-Button">Click Me</button>

13
components/01_Atoms/checkbox/_checkbox.scss Normal file
View File

@ -0,0 +1,13 @@
.LP-Form{
.LP-Form__Checkbox{
display: none;
}
.LP-Form__CheckBox__CheckMark{
height: 1em;
width: 1em;
border: 1px solid black;
padding: 0 calc(.5em + 2px);
margin-right: .7em;
}
}

3
components/01_Atoms/checkbox/checkbox.config.json Normal file
View File

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

3
components/01_Atoms/checkbox/checkbox.hbs Normal file
View File

@ -0,0 +1,3 @@
<form class="LP-Form">
<label for="wurstwasser" class="LP-Form__Label"><span class="LP-Form__CheckBox__CheckMark"></span><input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>Check me</label>
</form>

10
components/01_Atoms/textField/_textField.scss Normal file
View File

@ -0,0 +1,10 @@
.LP-Form{
.LP-Form__Input--text{
border: none;
border-bottom: 1px solid $-secondary-accent-color;
&:active, &:focus{
border-bottom: 1px solid $-primary-accent-color;
}
}
}

17
components/01_Atoms/textField/textField.config.json Normal file
View File

@ -0,0 +1,17 @@
{
"title": "TextField",
"variants": [
{
"name": "default",
"context": {
"type": "text"
}
},
{
"name": "Password",
"context": {
"type": "password"
}
}
]
}

3
components/01_Atoms/textField/textField.hbs Normal file
View File

@ -0,0 +1,3 @@
<form class="LP-Form">
<input type="{{type}}" class="LP-Form__Input LP-Form__Input--text"/>
</form>

27
public/components.css
View File

@ -45,6 +45,33 @@
.LP-Icon__List .LP-Icon__Item { .LP-Icon__List .LP-Icon__Item {
padding: 0 3px; } padding: 0 3px; }
.LP-Form .LP-Form__Input--text {
border: none;
border-bottom: 1px solid #C09F80; }
.LP-Form .LP-Form__Input--text:active, .LP-Form .LP-Form__Input--text:focus {
border-bottom: 1px solid #76323F; }
.LP-Button {
background-color: #C09F80;
color: #565656;
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold; }
.LP-Button:active {
background-color: #76323F;
color: #C09F80; }
.LP-Form .LP-Form__Checkbox {
display: none; }
.LP-Form .LP-Form__CheckBox__CheckMark {
height: 1em;
width: 1em;
border: 1px solid black;
padding: 0 calc(.5em + 2px);
margin-right: .7em; }
.LP-Logo { .LP-Logo {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;