Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend

components/01_Atoms/_atoms.scss

@@ -2,4 +2,7 @@
 @import 'headline/headline';
 @import 'text/text';
 @import 'icon/icon';
+@import 'textField/textField';
+@import 'button/button';
+@import 'checkbox/checkbox';
 @import 'input/input';

components/01_Atoms/button/_button.scss

@@ -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;
+	}
+}

components/01_Atoms/button/button.config.json

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

components/01_Atoms/button/button.hbs

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

components/01_Atoms/checkbox/_checkbox.scss

@@ -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;
+	}
+}

components/01_Atoms/checkbox/checkbox.config.json

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

components/01_Atoms/checkbox/checkbox.hbs

@@ -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>

components/01_Atoms/textField/_textField.scss

@@ -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;
+		}
+	}
+}

components/01_Atoms/textField/textField.config.json

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

components/01_Atoms/textField/textField.hbs

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