feat: New io module

- Add module for io
- Move common io parts to new module

_hippie.scss

@@ -26,6 +26,7 @@
 // Additional Modules and variables
 // in dependency to other basic styles
 // -----------------------------------------------------------------------------
+@import "modules/io/io_module";
 @import "modules/navigation/nav_module";
 @import "modules/editor/editor_module";
 @import "modules/explanation/explanation_module";

elements/_interactive.scss

@@ -154,7 +154,7 @@ button {
 }
 
 .button_io {
-	@extend %basic_button;
+	@extend %basic;
 	border: $width_border_io solid $color_border_button;
 	padding: $padding_basic;
 	color: $color_text_button;
@@ -164,7 +164,7 @@ button {
 		// border-color: #0059F6;
 		border-color: transparent;
 		color: white;
-		background-color: $foxtrot_color;
+		background-color: $color_action_basic;
 	}
 
 	&[disabled="disabled"],
@@ -179,7 +179,7 @@ button {
 }
 
 .button_clear {
-	@extend %basic_button;
+	@extend %basic;
 	padding: 0;
 	border: 0;
 	background-color: transparent;

elements/_sections.scss

@@ -144,6 +144,18 @@ aside {
 		button {
 			@extend .button_io;
 		}
+
+		.a_button {
+			display: flex;
+		}
+
+		ul.vertical li {
+			margin-bottom: $space_half;
+
+			.a_button > *:last-child {
+				margin-left: auto;
+			}
+		}
 	}
 }
 
@@ -203,69 +215,8 @@ h6 {
 
 // Header
 // -----------------------------------------------------------------------------
-header {}
+header {
-
-.header_page {
-	overflow: auto;
-}
-
-.header_txt {
-	margin-bottom: $space_small;
-	border-bottom: $border_dotted;
-
-	h1 {
-		border-top: $border_basic;
-	}
-}
-
-header,
-aside,
-footer {
 	&.io {
-		.span_solo {
-			border: $width_border_io solid transparent;
-			padding: $padding_basic;
-		}
-	}
-}
-
-header.io,
-aside.io {
-	padding: $space_basic;
-
-	input,
-	button,
-	textarea,
-	select {
-		margin-inline: $space_half;
-	}
-
-	input {
-		@extend .input_io;
-	}
-
-	textarea {
-		@extend .io_textarea;
-	}
-
-	select {
-		@extend .io_select;
-	}
-
-	button {
-		@extend .button_io;
-	}
-}
-
-header,
-footer {
-	&.io {
-		@extend %flex-inline;
-		align-items: stretch;
-	}
-}
-
-header.io {
 		z-index: map.get($z-indexes, "content-top");
 
 		&>*:last-child *:last-child {
@@ -282,10 +233,6 @@ header.io {
 			align-items: stretch;
 		}
 
-	nav li {
-		margin: 0;
-	}
-
 		nav:last-child {
 			margin-left: auto;
 		}
@@ -293,9 +240,24 @@ header.io {
 		h1 {
 			margin: 0;
 		}
+	}
 }
 
-// Footer
+.header_page {
+	overflow: auto;
+}
+
+.header_txt {
+	margin-bottom: $space_small;
+	border-bottom: $border_dotted;
+
+	h1 {
+		border-top: $border_basic;
+	}
+}
+
+header // Footer
+
 // -----------------------------------------------------------------------------
 footer {
 	&.io {

elements/_textlevel.scss

@@ -276,7 +276,7 @@ span {
 }
 
 .span_solo {
-	@extend %solo;
+	@extend %basic;
 }
 
 // Linebreaks

global/_common.scss

@@ -20,6 +20,11 @@
 	}
 }
 
+%size_io_button {
+	border: $width_border_io solid transparent;
+	padding: $padding_basic;
+}
+
 .di_none {
 	display: none !important;
 }

global/_typography.scss

@@ -44,14 +44,6 @@
 	font-weight: 300;
 }
 
-%basic_button {
-	@extend %basic;
-}
-
-%solo {
-	@extend %basic;
-}
-
 %short {
 	overflow: hidden;
 	text-overflow: ellipsis;

modules/io/_io_module.scss

@@ -0,0 +1,65 @@
+header,
+aside,
+footer {
+	&.io {
+		nav li {
+			margin: 0;
+		}
+
+		nav > div:not(.spacer),
+		nav > span,
+		.a_button {
+			@extend %basic;
+			@extend %size_io_button;
+		}
+
+		.a_button {
+			color: $color_text_io;
+			background-color: $color_back_io;
+
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: transparentize($color_highlight_basic, 0.8);
+			}
+		}
+	}
+}
+
+header,
+aside {
+	&.io {
+		padding: $space_basic;
+
+		input,
+		button,
+		textarea,
+		select {
+			margin-inline: $space_half;
+		}
+
+		input {
+			@extend .input_io;
+		}
+
+		textarea {
+			@extend .io_textarea;
+		}
+
+		select {
+			@extend .io_select;
+		}
+
+		button {
+			@extend .button_io;
+		}
+	}
+}
+
+header,
+footer {
+	&.io {
+		@extend %flex-inline;
+		align-items: stretch;
+	}
+}