_basic.scss

@@ -2,7 +2,6 @@
 // Use a file outside of hippie i.e. vendor/normalize.css
 // -----------------------------------------------------------------------------
 // @import "../../vendor/normalizecss/normalize.css";
-// @import "../../node_modules/normalize.css/normalize.css";
 
 
 

elements/_grouping.scss

@@ -67,13 +67,6 @@ hr {
 	border-width: $width_border_basic 0 0;
 	border-style: solid;
 	border-color: $color_border_basic;
-
-	&.vertical {
-		display: inline;
-		height: $line_basic;
-		margin: 0 $space_double;
-		border-width: 0 $width_border_basic 0 0;
-	}
 }
 
 .hr_hidden {
@@ -293,9 +286,38 @@ div {}
 // Flex
 .flex {
 	display: flex;
+}
 
-	&.inline {
-		@extend %flex-inline;
+.flex_wrap {
+	@extend .flex;
+	flex-wrap: wrap;
+}
+
+.flex_row {
+	@extend .flex;
+	flex-direction: column;
+	// align-items: flex-start;
+	justify-content: flex-start;
+}
+
+.flex_child {
+	flex: 0 1 auto;
+}
+
+.flex_child_one {
+	flex: 1;
+}
+
+.flex_child_end {
+	align-self: flex-end;
+}
+
+.flex_column_wrap {
+	@extend .flex_wrap;
+
+	.flex_column {
+		@extend .flex_child;
+		flex-grow: 1;
 	}
 }
 

elements/_interactive.scss

@@ -57,7 +57,7 @@ label + input {
 }
 
 input, button, textarea, select {
-	margin: $margin_inline;
+	margin: $margin_io;
 
 	&[disabled="disabled"],
 	&[disabled] {
@@ -79,10 +79,6 @@ td > textarea {
 	}
 }
 
-.input_io, .button_io, .io_textarea, .io_select {
-	margin: $margin_io;
-}
-
 .input_io, .io_textarea, .io_select {
 	padding: $space_half;
 	color: $color_text_io;

elements/_sections.scss

@@ -1,5 +1,3 @@
-@use "sass:map";
-
 // Root
 // -----------------------------------------------------------------------------
 html {
@@ -83,16 +81,7 @@ section {}
 
 // Navigation
 // -----------------------------------------------------------------------------
-nav {
-
-	ul {
-		margin: 0;
-
-		&.inline li {
-			display: inline-block;
-		}
-	}
-}
+nav {}
 
 // Aside element
 // -----------------------------------------------------------------------------
@@ -118,33 +107,6 @@ aside {
 	*:first-child {
 		margin-top: 0;
 	}
-
-	&.io {
-
-		input,
-		textarea,
-		select,
-		button {
-			display: block;
-			width: 100%;
-		}
-
-		input {
-			@extend .input_io;
-		}
-
-		textarea {
-			@extend .io_textarea;
-		}
-
-		select {
-			@extend .io_select;
-		}
-
-		button {
-			@extend .button_io;
-		}
-	}
 }
 
 // Headings
@@ -218,101 +180,6 @@ header {}
 	}
 }
 
-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 {
-		input {
-			@extend .input_io;
-		}
-
-		textarea {
-			@extend .io_textarea;
-		}
-
-		select {
-			@extend .io_select;
-		}
-
-		button {
-			@extend .button_io;
-		}
-	}
-}
+footer {}

global/_common.scss

@@ -21,15 +21,15 @@
 }
 
 .di_none {
-	display: none !important;
+	display: none;
 }
 
 .op_hide {
-	opacity: 0 !important;
+	opacity: 0;
 }
 
 .op_show {
-	opacity: 1 !important;
+	opacity: 1;
 }
 
 .space_even_auto {
@@ -173,34 +173,6 @@
 
 
 
-// Flex & grid
-// -----------------------------------------------------------------------------
-%flex-inline {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	justify-content: flex-start;
-	gap: $space_half $space_basic;
-}
-
-%flex-column,
-%flex-row {
-	display: flex;
-	flex-wrap: nowrap;
-	gap: $space_basic;
-}
-
-%flex-column {
-	flex-direction: column;
-}
-
-%flex-row {
-	flex-direction: row;
-}
-
-
-
 // Positioned elements
 // -----------------------------------------------------------------------------
 %viewport_fixed {

global/_config.scss

@@ -142,8 +142,7 @@ $space_large: $space_basic * 16;
 
 $margin_basic: $space_basic 0 !default;
 $margin_double: $space_double 0 !default;
-$margin_inline: 0 $space_double 0 0 !default;
-$margin_io: 0 !default;
+$margin_io: 0 $space_small 0 0 !default;
 
 $padding_basic: calc(#{$space_basic} - 3px) $space_basic !default;
 $padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default;

modules/navigation/_nav_module.scss

@@ -99,11 +99,12 @@ nav {
 	margin: $space_basic 0;
 
 	ul {
-		display: flex;
+		@extend .flex;
 		margin: 0 $space_large;
 
 		li {
-			flex: auto;
+			@extend .flex_child;
+			flex-grow: 1;
 			margin: 0;
 			text-align: center;
 

modules/tables/_tables_module.scss

@@ -11,15 +11,13 @@
 		}
 	}
 
-	th,
-	td {
+	th, td {
 		border: 0;
 	}
 
 	.cell_icon {
 		width: 48px;
 		text-align: center;
-
 		img {
 			vertical-align: text-top;
 		}
@@ -31,11 +29,9 @@
 
 		&:hover {
 			background-color: $foxtrot_color;
-
 			a:first-child {
 				display: none;
 			}
-
 			a:last-child {
 				display: block;
 				color: $color_highlight_basic;
@@ -51,8 +47,7 @@
 		}
 	}
 
-	th:last-child,
-	.cell_date {
+	th:last-child, .cell_date {
 		width: 16%;
 		text-align: center;
 	}
@@ -70,4 +65,4 @@
 			max-height: 44px;
 		}
 	}
-}
+}