Several Form elements
This commit is contained in:
parent
87cc27bcc8
commit
c97a757691
@ -1,4 +1,7 @@
|
||||
@import 'link/link';
|
||||
@import 'headline/headline';
|
||||
@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
13
components/01_Atoms/button/_button.scss
Normal 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
3
components/01_Atoms/button/button.config.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
|
||||
}
|
1
components/01_Atoms/button/button.hbs
Normal file
1
components/01_Atoms/button/button.hbs
Normal file
@ -0,0 +1 @@
|
||||
<button class="LP-Button">Click Me</button>
|
13
components/01_Atoms/checkbox/_checkbox.scss
Normal file
13
components/01_Atoms/checkbox/_checkbox.scss
Normal 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
3
components/01_Atoms/checkbox/checkbox.config.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
|
||||
}
|
3
components/01_Atoms/checkbox/checkbox.hbs
Normal file
3
components/01_Atoms/checkbox/checkbox.hbs
Normal 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
10
components/01_Atoms/textField/_textField.scss
Normal 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
17
components/01_Atoms/textField/textField.config.json
Normal 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
3
components/01_Atoms/textField/textField.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<form class="LP-Form">
|
||||
<input type="{{type}}" class="LP-Form__Input LP-Form__Input--text"/>
|
||||
</form>
|
@ -45,6 +45,33 @@
|
||||
.LP-Icon__List .LP-Icon__Item {
|
||||
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 {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
Loading…
Reference in New Issue
Block a user