_hippie.scss

@@ -26,7 +26,6 @@
 // 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;
+	@extend %basic_button;
 	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: $color_action_basic;
+		background-color: $foxtrot_color;
 	}
 
 	&[disabled="disabled"],
@@ -179,7 +179,7 @@ button {
 }
 
 .button_clear {
-	@extend %basic;
+	@extend %basic_button;
 	padding: 0;
 	border: 0;
 	background-color: transparent;

elements/_sections.scss

@@ -144,18 +144,6 @@ aside {
 		button {
 			@extend .button_io;
 		}
-
-		.a_button {
-			display: flex;
-		}
-
-		ul.vertical li {
-			margin-bottom: $space_half;
-
-			.a_button > *:last-child {
-				margin-left: auto;
-			}
-		}
 	}
 }
 
@@ -215,33 +203,7 @@ h6 {
 
 // Header
 // -----------------------------------------------------------------------------
-header {
+header {}
-	&.io {
-		z-index: map.get($z-indexes, "content-top");
-
-		&>*:last-child *:last-child {
-			margin-right: 0;
-		}
-
-		&>*:first-child *:first-child {
-			margin-left: 0;
-		}
-
-		nav,
-		ul {
-			@extend %flex-inline;
-			align-items: stretch;
-		}
-
-		nav:last-child {
-			margin-left: auto;
-		}
-
-		h1 {
-			margin: 0;
-		}
-	}
-}
 
 .header_page {
 	overflow: auto;
@@ -256,8 +218,84 @@ header {
 	}
 }
 
-header // Footer
+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 {
+		margin-right: 0;
+	}
+
+	&>*:first-child *:first-child {
+		margin-left: 0;
+	}
+
+	nav,
+	ul {
+		@extend %flex-inline;
+		align-items: stretch;
+	}
+
+	nav li {
+		margin: 0;
+	}
+
+	nav:last-child {
+		margin-left: auto;
+	}
+
+	h1 {
+		margin: 0;
+	}
+}
+
+// Footer
 // -----------------------------------------------------------------------------
 footer {
 	&.io {

elements/_textlevel.scss

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

global/_common.scss

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

global/_typography.scss

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

modules/io/_io_module.scss

@@ -1,65 +0,0 @@
-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;
-	}
-}