From 615e5df2d981aba1bf893dbb25816e6c5f1dab53 Mon Sep 17 00:00:00 2001
From: Stephan Hagedorn <klarsichtweise@gmail.com>
Date: Wed, 23 Aug 2017 09:43:56 +0200
Subject: [PATCH] Changed interactive elements

also tried to define global margin variable
---
 elements/_interactive.scss | 48 ++++++++++++++++++++++++--------------
 elements/_tables.scss      |  3 +--
 example.css                | 15 +++++++-----
 example.html               | 18 +++++++-------
 global/_config.scss        |  3 +++
 5 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/elements/_interactive.scss b/elements/_interactive.scss
index d956505..abe8124 100644
--- a/elements/_interactive.scss
+++ b/elements/_interactive.scss
@@ -6,7 +6,7 @@ form {
 }
 
 fieldset {
-	margin: $basic_space 0;
+	margin: $high_margin;
 	padding: $basic_space;
 	border: $basic_border;
 }
@@ -26,28 +26,13 @@ label {
 	& + input {
 		margin-left: $basic_space;
 	}
+
 	input + & {
 		margin-left: $basic_space;
 	}
-}
-
-.input_default label {
-	display: table;
-	margin: $half_space 0;
 
 	input {
-		display: table-cell;
 		margin-left: $basic_space;
-		padding: $half_space ($half_space + 1);
-		border-style: solid;
-		border-color: transparent;
-		background-color: $basic_io_back_color;
-		color: $basic_io_font_color;
-
-		&:hover {
-			background-color: $darkest_color;
-			color: $brightest_color;
-		}
 	}
 }
 
@@ -55,6 +40,35 @@ input {
 
 }
 
+.label__table {
+	display: table;
+
+	input {
+		display: table-cell;
+	}
+}
+
+.input_default {
+
+	label {
+		@extend .label__table;
+		margin: $half_space 0;
+
+		input {
+			padding: $half_space ($half_space + 1);
+			border-style: solid;
+			border-color: transparent;
+			background-color: $basic_io_back_color;
+			color: $basic_io_font_color;
+
+			&:hover {
+				background-color: $darkest_color;
+				color: $brightest_color;
+			}
+		}
+	}
+}
+
 
 
 // More
diff --git a/elements/_tables.scss b/elements/_tables.scss
index 4283db3..475651b 100644
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@@ -2,8 +2,7 @@
 // -----------------------------------------------------------------------------
 
 table {
-	margin-top: $space_2;
-	margin-bottom: $space_2;
+	margin: $high_margin;
 	border: $basic_border;
 	border-collapse: collapse;
 }
diff --git a/example.css b/example.css
index 2cd2d1a..9c293da 100644
--- a/example.css
+++ b/example.css
@@ -506,8 +506,7 @@ img {
   vertical-align: top; }
 
 table {
-  margin-top: 16px;
-  margin-bottom: 16px;
+  margin: calc(8px * 2) 0;
   border: 1px solid black;
   border-collapse: collapse; }
 
@@ -557,7 +556,7 @@ caption {
   text-align: center; }
 
 fieldset {
-  margin: 8px 0;
+  margin: calc(8px * 2) 0;
   padding: 8px;
   border: 1px solid black; }
 
@@ -568,13 +567,17 @@ label + input {
   margin-left: 8px; }
 input + label {
   margin-left: 8px; }
+label input {
+  margin-left: 8px; }
+
+.label__table, .input_default label {
+  display: table; }
+  .label__table input, .input_default label input {
+    display: table-cell; }
 
 .input_default label {
-  display: table;
   margin: 4px 0; }
   .input_default label input {
-    display: table-cell;
-    margin-left: 8px;
     padding: 4px 5px;
     border-style: solid;
     border-color: transparent;
diff --git a/example.html b/example.html
index 2bf0ba1..ff7ecc6 100644
--- a/example.html
+++ b/example.html
@@ -353,17 +353,19 @@
 		<fieldset>
 			<label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output">
 		</fieldset>
-		<fieldset class="input_default">
+		<p>Sie können mittels <code>&lt;legend&gt;</code> auch eine eigene Beschriftung erhalten.</p>
+		<fieldset>
 			<legend>Einfache Eingabefelder</legend>
-			<label for="simple_txt">Einfache Texteingabe<input type="text" id="simple_txt" value="Text"/></label>
-			<label for="simple_button">Einfacher Knopf<input type="button" id="simple_button" value="Knopf"/></label>
+			<label>Texteingabe<input type="text" placeholder="Text"/></label>
+			<label>Schaltfläche<input type="button" value="Senden"/></label>
 		</fieldset>
-		<fieldset class="input_default">
+		<fieldset>
 			<legend>Weitere Zeicheneingabefelder</legend>
-			<p>Diese Eingabefelder sind zusätzlich aneinander ausgerichtet und gruppiert.</p>
-			<label for="simple_date">Einfache Datumseingabe<input type="date" id="simple_date"/></label>
-			<label for="simple_numer">Einfache Zahleneingabe<input type="number" id="simple_numer"/></label>
+			<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen Information oder lockern das Erscheinungsbild auf. Hier nun eine Liste aller möglichen Arten von Eingabefeldern.</p>
+			<pre class="pre__code"><code>ul>(li>label>input[type="text"])</code></pre>
 		</fieldset>
+		<label>Einfache Datumseingabe<input type="date"/></label>
+		<label>Einfache Zahleneingabe<input type="number"/></label>
 		<input type="checkbox"/>
 		<input type="color"/>
 		<input type="datetime"/>
@@ -415,7 +417,7 @@
 
 	<section class="sec__main_center">
 		<header>
-			<h1>Einzelene Elemente</h1>
+			<h1>Einzelne Elemente</h1>
 		</header>
 		<article>
 			<h2>Bereiche</h2>
diff --git a/global/_config.scss b/global/_config.scss
index 8c7071e..09ca3d8 100644
--- a/global/_config.scss
+++ b/global/_config.scss
@@ -134,6 +134,9 @@ $space_4: $basic_space * 8;
 $space_5: $basic_space * 16;
 $tiny_space: 1px !default;
 
+$basic_margin: $basic_space 0;
+$high_margin: calc(#{$basic_space} * 2) 0;
+
 $basic_padding: calc(#{$basic_space} - 3px) $basic_space;
 $wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2);