From e8ab9a51d7651ea8e0e733eb7fa5a1ea70b2abe8 Mon Sep 17 00:00:00 2001
From: Stephan Hagedorn <klarsichtweise@gmail.com>
Date: Fri, 1 Sep 2017 00:16:21 +0200
Subject: [PATCH] Mainly work on interactive elements

---
 demo-index.html            |  37 ++++++-----
 elements/_grouping.scss    |   9 +++
 elements/_interactive.scss |  76 ++++++++++++++++++----
 elements/_tables.scss      |   4 +-
 example.css                | 126 ++++++++++++++++++++++++++++++++-----
 global/_config.scss        |  73 ++++++++++++---------
 mixins/_user_agent.scss    |   2 +-
 7 files changed, 250 insertions(+), 77 deletions(-)

diff --git a/demo-index.html b/demo-index.html
index 54b8767..0e01ada 100644
--- a/demo-index.html
+++ b/demo-index.html
@@ -33,14 +33,14 @@
 
 
 	<div id="begin" class="demo__intro">
-		Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
+		Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
 		<p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
 		<h1>Bereiche</h1>
 		<article>
 			<section>
 				<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
 				<p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
-				<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br/>Folgende Bereiche sind vorgegeben:</p>
+				<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
 			</section>
 			<!-- <div class="overflow"> -->
 			<aside class="left">
@@ -71,7 +71,7 @@
 		<p>Schließlich eine Überschrift in der Größe des Fließtextes. Allerdings in fett.</p>
 		<h1>Gruppierung</h1>
 		<p>Ein Absatz <code>&lt;p&gt;</code>. Zugegeben ein kurzer.</p>
-		<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br/>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p>
+		<p>Aus mehreren Absätzen wird ein ganzer Text. Solche Texte haben gelegentlich großen informativen oder unterhaltsamen Charakter.<br>Einfache Zeilenumbrüche werden darin mit <code>&lt;br&gt;</code> erreicht.</p>
 		<p>Die Unterteilung in Absätze ist eine von vielen Möglichkeiten Texte zu gruppieren und ihnen Struktur zu verleihen. In diesem Dokument flattert Text normalerweise von Links daher. Er ist schwarz und in einer serifenlosen Schrift gesetzt. Zu weiteren Formatierungen, die eher auf einer Ebene der Zeichen einzuordnen ist, wird im Verlauf näher eingegangen. Zunächst die Struktur:</p>
 		<p class="txt_center js_pop">Text sitzt gerne auch mal zentriert.</p><div class="exp_pop"><code class="code__solo">p.txt_center</code></div>
 		<p class="txt_right js_pop">Rechtsbündig ist schon eher eine Ausnahme bzw. Besonderheit.</p><div class="exp_pop"><code class="code__solo">p.txt_right</code></div>
@@ -85,9 +85,9 @@
 		<hr class="hr__dotted center_25 js_pop"/><div class="exp_pop"><code class="code__solo">hr.hr__dotted.center_25</code></div>
 		<p class="p__column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code__solo">p.p__column_2</code></div>
 		<p class="p__column_3 p__column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code__solo">p.p__column_3.p__column_line</code></div>
-		<p class="p__column_3 p__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br/>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
+		<p class="p__column_3 p__column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
 		<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code>&lt;pre&gt;</code>.</p>
-		<pre>Dadurch<br/>	bleiben<br/>		Einrückungen<br/>			durch<br/>				Tabulatoren<br/>					erhalten.</pre>
+		<pre>Dadurch<br>	bleiben<br>		Einrückungen<br>			durch<br>				Tabulatoren<br>					erhalten.</pre>
 		<p>Text bekommt durch Listen besondere optische wie auch inhaltliche Struktur. Es gibt ungeordnete <code>&lt;ul&gt;</code> und geordnete Listen <code>&lt;ol&gt;</code> sowie Beschreibungslisten <code>&lt;dl&gt;</code>. Die beiden ersten Varianten beinhalten das Listenelement <code>&lt;li&gt;</code>. Beschreibungslisten beinhalten jeweils das Paar von Ausdruck <code>&lt;dt&gt;</code> und Beschreibung <code>&lt;dd&gt;</code>. Im Folgenden eine Liste der Listen in ihrer Ausgangskonfiguration:</p>
 		<ul>
 			<li>Ungeordnete</li>
@@ -147,7 +147,7 @@
 		<div class="exp_pop"><code class="code__solo">blockquote.quote__mark>p+p.quote__source</code></div>
 		<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code>&lt;cite&gt;</code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, super Film - zum Beispiel.</p>
 		<p>Auch die Auszeichnung <code>&lt;code&gt;</code> wurde bis hier hin schon verwendet. Sie markiert Maschinensprache. Für zusammenhängende Blöcke wird die Auszeichnung oft in Kombination mit dem Element <code>&lt;pre&gt;</code> verwendet:</p>
-		<pre class="pre__code"><code>&lt;html&gt;<br/>  &lt;head&gt;<br/>    &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br/>  &lt;/head&gt;<br/>  &lt;body id="root"&gt;<br/>    &lt;!-- Content goes here --&gt;<br/>    &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br/>  &lt;/body&gt;<br/>&lt;/html&gt;</code></pre>
+		<pre class="pre__code"><code>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;title&gt;Hyper Text Markup Language&lt;/title&gt;<br>  &lt;/head&gt;<br>  &lt;body id="root"&gt;<br>    &lt;!-- Content goes here --&gt;<br>    &lt;p class="example"&gt;Just like this.&lt;/p&gt;<br>  &lt;/body&gt;<br>&lt;/html&gt;</code></pre>
 		<p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
 		<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. Dies stellt sich wie folgt dar:</p>
 		<p class="txt_center">Bei<mark class="mark__cursor">spiel zum mark</mark>ieren ^^.</p>
@@ -344,11 +344,18 @@
 		<p>Grundlegend ist das Element <code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
 		<p><input value="Undefiniert"/></p>
 		<p>Ein spezieller Typ des Eingabefeldes verändert seine Funktion zu einer Schaltfläche <code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element <code>&lt;button&gt;</code> dafür.
-		<p><input type="button" value="Input Button" class="space_right"><button>Button</button></p>
+		<p><input type="button" value="Input Button"><button>Button</button></p>
 		<p>Interaktive Elemente können durch das Attribut <code>&lt;readonly&gt;</code> nur lesbar gemacht werden oder mittels <code>&lt;disabled&gt;</code> gänzlich deaktiviert werden.</p>
-		<p><input type="text" value="Read Only Text" readonly class="space_right"><input type="text" value="Disabled Text" disabled class="space_right"><button disabled>Button</button></p>
-		<p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung.</p>
-		<label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
+		<p><input type="text" value="Read Only Text" readonly><input type="text" value="Disabled Text" disabled><button disabled>Button</button></p>
+		<p>Das Element <code>&lt;label&gt;</code> ergänzt interaktive Elemente um eine Beschriftung. Wichtig ist hier, dass die Beziehung beider Elemente zu einander deutlich ist.</p>
+		<div class="box__column_old">
+			<div class="column_old">
+				<label for="demo__input">Beschriftung:</label><input type="text" id="demo__input">
+			</div>
+			<div class="column_old">
+				<input type="text" id="demo__input" class="input__label_right"><label for="demo__input">Beschriftung</label>
+			</div>
+		</div>
 		<p>Zusätzlich zur Beschriftung einzelner Elemente gibt es auch die Möglichkeit Gruppierungen zu schaffen. Diese werden mit <code>&lt;fieldset&gt;</code> realisiert.</p>
 		<fieldset>
 			<label for="demo__output">Beschriftung:</label><input type="text" readonly id="demo__output">
@@ -356,16 +363,16 @@
 		<p>Sie können mittels <code>&lt;legend&gt;</code> auch eine eigene Beschriftung erhalten.</p>
 		<fieldset>
 			<legend>Einfache Eingabefelder</legend>
-			<label>Texteingabe<input type="text" placeholder="Text"/></label>
-			<label>Schaltfläche<input type="button" value="Senden"/></label>
+			<label>Texteingabe<input type="text" placeholder="Text"></label>
+			<label>Schaltfläche<input type="button" value="Senden"></label>
 		</fieldset>
 		<fieldset>
 			<legend>Weitere Zeicheneingabefelder</legend>
 			<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>
+		<label>Einfache Datumseingabe<input type="date"></label>
+		<label>Einfache Zahleneingabe<input type="number"></label>
 		<input type="checkbox"/>
 		<input type="color"/>
 		<input type="datetime"/>
@@ -481,7 +488,7 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
 			</div>
 			<pre class="pre__code x_long"><code>header.header__page>h1+p+nav.nav__separate_right>ul>(li>a.a__button{Nav $})*4^+nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
 			<header class="header__page demo__header header__fancy">
-				<h1>Fancy Pants</h1>
+				<h1>Aufmacher</h1>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
 				<nav class="nav__separate_right">
 					<ul>
diff --git a/elements/_grouping.scss b/elements/_grouping.scss
index a8804ca..e096a75 100644
--- a/elements/_grouping.scss
+++ b/elements/_grouping.scss
@@ -251,6 +251,15 @@ div {
 }
 
 // Flex
+.box__column_old {
+	overflow: auto;
+
+	.column_old {
+		float: left;
+		width: 50%;
+	}
+}
+
 .box__column {
 	@extend .flex;
 
diff --git a/elements/_interactive.scss b/elements/_interactive.scss
index abe8124..0a26f75 100644
--- a/elements/_interactive.scss
+++ b/elements/_interactive.scss
@@ -20,24 +20,72 @@ legend {
 
 // Common
 // -----------------------------------------------------------------------------
+input, button, textarea {
+	margin: $io_margin;
+
+	&[disabled="disabled"],
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
 label {
 	@extend %basic;
 
-	& + input {
-		margin-left: $basic_space;
-	}
-
-	input + & {
-		margin-left: $basic_space;
-	}
-
 	input {
 		margin-left: $basic_space;
 	}
 }
 
 input {
+	color: $basic_io_font_color;
 
+	&[disabled="disabled"],
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
+@each $input in $basic_input_list, textarea {
+	#{$input} {
+		@extend %basic_mono;
+		border: $basic_io_border;
+		padding: $half_space;
+		background-color: $basic_io_back_color;
+
+		&:hover {
+			background-color: $basic_highlight_color;
+		}
+
+		&[readonly="readonly"],
+		&[readonly] {
+			border-color: darken($basic_io_border_color, 30%);
+			background-color: darken($basic_io_back_color, 30%);
+		}
+
+		&[disabled="disabled"],
+		&[disabled] {
+			border-color: transparent;
+		}
+	}
+}
+
+@each $input in $basic_input_list {
+
+	#{$input} {
+		line-height: 1;
+	}
+}
+
+@each $input in $basic_button_list {
+	#{$input} {
+		padding: $basic_padding;
+	}
+}
+
+label + input,
+.input__label_right {
+	margin: 0 $basic_space;
 }
 
 .label__table {
@@ -48,7 +96,9 @@ input {
 	}
 }
 
-.input_default {
+
+
+.input__default {
 
 	label {
 		@extend .label__table;
@@ -74,6 +124,10 @@ input {
 // More
 // -----------------------------------------------------------------------------
 
+textarea {
+
+}
+
 button {
 
 }
@@ -94,10 +148,6 @@ option {
 
 }
 
-textarea {
-
-}
-
 output {
 
 }
diff --git a/elements/_tables.scss b/elements/_tables.scss
index 0560976..47d90ef 100644
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@@ -59,7 +59,7 @@ tfoot {
 	}
 
 	tr:nth-child(even) td {
-	background-color: $bright_color;
+	background-color: rgba($brightest_color, .1);
 	}
 }
 
@@ -70,7 +70,7 @@ tfoot {
 caption {
 	@extend p;
 	padding: $half_space 0;
-	border: $basic_border_width dotted $basic_border_color;
+	border: $dotted_border;
 	text-align: center;
 }
 
diff --git a/example.css b/example.css
index 7526255..5933e47 100644
--- a/example.css
+++ b/example.css
@@ -162,8 +162,7 @@ textarea:not([disabled]):focus {
   pointer-events: none; }
 
 .flex, .flex__wrap, .flex__row, .box__column, .nav__column ul {
-  display: flex;
-  background-color: rgba(250, 216, 3, 0.1); }
+  display: flex; }
 
 .flex__wrap {
   flex-wrap: wrap; }
@@ -199,7 +198,7 @@ textarea:not([disabled]):focus {
   font-size: 1em;
   line-height: 1.5; }
 
-pre, code, .code__solo {
+pre, code, .code__solo, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
   font-family: Courier New, monospace;
   font-size: 1em;
   line-height: 1.5; }
@@ -449,6 +448,12 @@ figure {
   background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
   background-color: rgba(0, 0, 0, 0.1); }
 
+.box__column_old {
+  overflow: auto; }
+  .box__column_old .column_old {
+    float: left;
+    width: 50%; }
+
 .box__column .column {
   flex-grow: 1; }
 
@@ -556,7 +561,7 @@ tfoot tr:first-child td {
   border-top: 0;
   border-bottom: 0; }
 .table__stripe tr:nth-child(even) td {
-  background-color: #cccccc; }
+  background-color: rgba(255, 255, 255, 0.1); }
 
 .table__fix {
   table-layout: fixed; }
@@ -574,27 +579,118 @@ fieldset {
 legend {
   padding: 0 4px; }
 
-label + input {
-  margin-left: 8px; }
-input + label {
-  margin-left: 8px; }
+input, button, textarea {
+  margin: 0 32px; }
+  input[disabled="disabled"], input[disabled], button[disabled="disabled"], button[disabled], textarea[disabled="disabled"], textarea[disabled] {
+    cursor: not-allowed; }
+
 label input {
   margin-left: 8px; }
 
-.label__table, .input_default label {
+input {
+  color: #1a1a1a; }
+  input[disabled="disabled"], input[disabled] {
+    cursor: not-allowed; }
+
+input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
+  border: 2px solid white;
+  padding: 4px;
+  background-color: #e6e6e6; }
+  input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover {
+    background-color: white; }
+  input[type="color"][readonly="readonly"], input[type="color"][readonly], input[type="date"][readonly="readonly"], input[type="date"][readonly], input[type="datetime"][readonly="readonly"], input[type="datetime"][readonly], input[type="datetime-local"][readonly="readonly"], input[type="datetime-local"][readonly], input[type="email"][readonly="readonly"], input[type="email"][readonly], input[type="month"][readonly="readonly"], input[type="month"][readonly], input[type="number"][readonly="readonly"], input[type="number"][readonly], input[type="password"][readonly="readonly"], input[type="password"][readonly], input[type="search"][readonly="readonly"], input[type="search"][readonly], input[type="tel"][readonly="readonly"], input[type="tel"][readonly], input[type="text"][readonly="readonly"], input[type="text"][readonly], input[type="time"][readonly="readonly"], input[type="time"][readonly], input[type="url"][readonly="readonly"], input[type="url"][readonly], input[type="week"][readonly="readonly"], input[type="week"][readonly], input:not([type])[readonly="readonly"], input:not([type])[readonly] {
+    border-color: #b3b3b3;
+    background-color: #999999; }
+  input[type="color"][disabled="disabled"], input[type="color"][disabled], input[type="date"][disabled="disabled"], input[type="date"][disabled], input[type="datetime"][disabled="disabled"], input[type="datetime"][disabled], input[type="datetime-local"][disabled="disabled"], input[type="datetime-local"][disabled], input[type="email"][disabled="disabled"], input[type="email"][disabled], input[type="month"][disabled="disabled"], input[type="month"][disabled], input[type="number"][disabled="disabled"], input[type="number"][disabled], input[type="password"][disabled="disabled"], input[type="password"][disabled], input[type="search"][disabled="disabled"], input[type="search"][disabled], input[type="tel"][disabled="disabled"], input[type="tel"][disabled], input[type="text"][disabled="disabled"], input[type="text"][disabled], input[type="time"][disabled="disabled"], input[type="time"][disabled], input[type="url"][disabled="disabled"], input[type="url"][disabled], input[type="week"][disabled="disabled"], input[type="week"][disabled], input:not([type])[disabled="disabled"], input:not([type])[disabled] {
+    border-color: transparent; }
+
+textarea {
+  border: 2px solid white;
+  padding: 4px;
+  background-color: #e6e6e6; }
+  textarea:hover {
+    background-color: white; }
+  textarea[readonly="readonly"], textarea[readonly] {
+    border-color: #b3b3b3;
+    background-color: #999999; }
+  textarea[disabled="disabled"], textarea[disabled] {
+    border-color: transparent; }
+
+input[type="color"] {
+  line-height: 1; }
+
+input[type="date"] {
+  line-height: 1; }
+
+input[type="datetime"] {
+  line-height: 1; }
+
+input[type="datetime-local"] {
+  line-height: 1; }
+
+input[type="email"] {
+  line-height: 1; }
+
+input[type="month"] {
+  line-height: 1; }
+
+input[type="number"] {
+  line-height: 1; }
+
+input[type="password"] {
+  line-height: 1; }
+
+input[type="search"] {
+  line-height: 1; }
+
+input[type="tel"] {
+  line-height: 1; }
+
+input[type="text"] {
+  line-height: 1; }
+
+input[type="time"] {
+  line-height: 1; }
+
+input[type="url"] {
+  line-height: 1; }
+
+input[type="week"] {
+  line-height: 1; }
+
+input:not([type]) {
+  line-height: 1; }
+
+button {
+  padding: calc(8px - 3px) 8px; }
+
+input[type="button"] {
+  padding: calc(8px - 3px) 8px; }
+
+input[type="reset"] {
+  padding: calc(8px - 3px) 8px; }
+
+input[type="submit"] {
+  padding: calc(8px - 3px) 8px; }
+
+label + input,
+.input__label_right {
+  margin: 0 8px; }
+
+.label__table, .input__default label {
   display: table; }
-  .label__table input, .input_default label input {
+  .label__table input, .input__default label input {
     display: table-cell; }
 
-.input_default label {
+.input__default label {
   margin: 4px 0; }
-  .input_default label input {
+  .input__default label input {
     padding: 4px 5px;
     border-style: solid;
     border-color: transparent;
-    background-color: #404040;
-    color: #e6e6e6; }
-    .input_default label input:hover {
+    background-color: #e6e6e6;
+    color: #1a1a1a; }
+    .input__default label input:hover {
       background-color: black;
       color: white; }
 
diff --git a/global/_config.scss b/global/_config.scss
index 975005f..1b19e3f 100644
--- a/global/_config.scss
+++ b/global/_config.scss
@@ -105,12 +105,12 @@ $basic_border_color: $basic_front_color !default;
 // default shadow colors
 // $shadow_color: fade-out($medium_color, .5);
 
-$basic_color_map: ();
+$basic_color_list: ();
 
 @each $key, $value in $color_palette {
   $map: ();
   $map: map-merge($map, ($key: createColorMap($value, 15%, .5)) );
-  $basic_color_map: map-merge($basic_color_map, $map);
+  $basic_color_list: map-merge($basic_color_list, $map);
 }
 
 
@@ -139,6 +139,7 @@ $space_5: $basic_space * 16;
 
 $basic_margin: $basic_space 0 !default;
 $high_margin: $double_space 0 !default;
+$io_margin: 0 $space_3 !default;
 
 $basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
 $wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
@@ -149,6 +150,7 @@ $basic_border_width: $tiny_space !default;
 $border_width_4: $tiny_space * 4;
 $border_width_8: $tiny_space * 8;
 $basic_border: $tiny_space solid $basic_border_color;
+$dotted_border: $tiny_space dotted $basic_border_color;
 $cell_border: $tiny_space solid $darkest_color;
 
 $basic_aside_width: 20%;
@@ -157,38 +159,47 @@ $basic_aside_width: 20%;
 // IO
 // ------------------------------------------------------------------------------
 
-$basic_text_input_map: 'input[type="color"]',
-                       'input[type="date"]',
-                       'input[type="datetime"]',
-                       'input[type="datetime-local"]',
-                       'input[type="email"]',
-                       'input[type="month"]',
-                       'input[type="number"]',
-                       'input[type="password"]',
-                       'input[type="search"]',
-                       'input[type="tel"]',
-                       'input[type="text"]',
-                       'input[type="time"]',
-                       'input[type="url"]',
-                       'input[type="week"]',
-                       'input:not([type])',
-                       'textarea';
+$basic_input_list:
+	'input[type="color"]',
+	'input[type="date"]',
+	'input[type="datetime"]',
+	'input[type="datetime-local"]',
+	'input[type="email"]',
+	'input[type="month"]',
+	'input[type="number"]',
+	'input[type="password"]',
+	'input[type="search"]',
+	'input[type="tel"]',
+	'input[type="text"]',
+	'input[type="time"]',
+	'input[type="url"]',
+	'input[type="week"]',
+	'input:not([type])';
 
-$basic_button_map: 'button',
-                   'input[type="button"]',
-                   'input[type="reset"]',
-                   'input[type="submit"]';
+$basic_button_list:
+	'button',
+	'input[type="button"]',
+	// 'input[type="file"]',
+	'input[type="reset"]',
+	'input[type="submit"]';
 
-$basic_focus_map: 'a[href]',
-                  'area[href]',
-                  'button:not([disabled])',
-                  'input:not([disabled])',
-                  'select:not([disabled])',
-                  'textarea:not([disabled])',
-                  '*[tabindex]';
+$basic_focus_list:
+	'a[href]',
+	'area[href]',
+	'button:not([disabled])',
+	'input:not([disabled])',
+	'select:not([disabled])',
+	'textarea:not([disabled])',
+	'*[tabindex]';
+
+$basic_io_font_color: lighten($basic_font_color, 10%);
+$basic_io_back_color: darken($brightest_color, 10%);
+$basic_io_border_color: $brightest_color;
+
+$basic_io_border_width: $tiny_space * 2 !default;
+$basic_io_border: $basic_io_border_width solid $basic_io_border_color;
+$dotted_io_border: $tiny_space dotted $basic_io_border_color;
 
-$basic_io_font_color: darken($brightest_color, 10%);
-$basic_io_back_color: lighten($darkest_color, 25%);
 $basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06);
 $basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
 
diff --git a/mixins/_user_agent.scss b/mixins/_user_agent.scss
index ff7a0ce..cb277e6 100644
--- a/mixins/_user_agent.scss
+++ b/mixins/_user_agent.scss
@@ -1,6 +1,6 @@
 @mixin overrideUserAgent() {
   @if $no_agent_focus == true {
-    @each $el in $basic_focus_map {
+    @each $el in $basic_focus_list {
       #{$el}:focus {
         outline: 0;
       }