feat: Rename class

- Rename sub class to horizontal and bound to ul and ol elements
- Reformat files

elements/_grouping.scss

@@ -24,6 +24,7 @@ p {
 	@extend %basic;
 	margin-top: $space_basic;
 	margin-bottom: $space_basic;
+
 	code {
 		padding: $space_tiny $space_half;
 		font-size: 1em;
@@ -34,13 +35,17 @@ p {
 .column_line {
 	column-rule: $border_basic;
 }
-.column_2, .column_3 {
+
+.column_2,
+.column_3 {
 	@extend p;
 }
+
 .column_2 {
 	column-count: 2;
 	column-gap: $space_small;
 }
+
 .column_3 {
 	column-count: 3;
 	column-gap: $space_medium;
@@ -91,10 +96,11 @@ pre {
 	overflow-x: auto;
 	border-color: darken($color_back_basic, $color_diff_tiny);
 	border-style: dotted;
-	border-width:  0 0 0 $width_border_4;
+	border-width: 0 0 0 $width_border_4;
 	border-radius: $radius_basic;
 	padding: $space_basic;
 	background-color: lighten($color_back_basic, $color_diff_tiny);
+
 	code {
 		background-color: transparent;
 	}
@@ -112,11 +118,15 @@ blockquote {
 	p::before {
 		content: "\201E \0020";
 	}
+
 	p::after {
 		content: "\0020 \201C";
 	}
+
 	.quote_source {
-		&::before, &::after {
+
+		&::before,
+		&::after {
 			content: "";
 		}
 	}
@@ -124,23 +134,37 @@ blockquote {
 
 // List
 // -----------------------------------------------------------------------------
-dl, ul, ol {
+dl,
+ul,
+ol {
 	margin: $space_double 0;
 }
 
-ul, ol {
+ul,
+ol {
 	padding-left: $indent_basic;
+
+	&.horizontal {
+		overflow: auto;
+
+		li {
+			@extend .float_space_left;
+		}
+	}
 }
 
 dl {
-		margin-left: $indent_basic;
+	margin-left: $indent_basic;
 }
 
-li, dt, dd {
+li,
+dt,
+dd {
 	@extend %basic;
 }
 
-dd, .list_basic li {
+dd,
+.list_basic li {
 	margin-bottom: $space_basic;
 }
 
@@ -171,15 +195,18 @@ ul {
 	li {
 		margin-bottom: $space_tiny * 2;
 		text-transform: uppercase;
+
 		a {
 			display: block;
 			padding: $padding_basic;
 			color: $color_text_basic;
+
 			img {
 				margin-right: $space_basic;
 				padding-bottom: 0.2em;
 				vertical-align: text-bottom;
 			}
+
 			&:active,
 			&:focus,
 			&:hover {
@@ -190,13 +217,6 @@ ul {
 	}
 }
 
-.list_horizontal {
-	overflow: auto;
-	li {
-		@extend .float_space_left;
-	}
-}
-
 // Embedded
 // -----------------------------------------------------------------------------
 figure {
@@ -210,15 +230,11 @@ figcaption {
 
 // Main content
 // -----------------------------------------------------------------------------
-main {
-
-}
+main {}
 
 // Div
 // -----------------------------------------------------------------------------
-div {
-
-}
+div {}
 
 .div_info {
 	padding: $space_double $indent_basic;
@@ -228,6 +244,7 @@ div {
 
 .box_space {
 	position: relative;
+	overflow: auto;
 	width: 100%;
 }
 
@@ -309,13 +326,13 @@ div {
 	display: grid;
 	grid-gap: $space_basic;
 
-	& > input,
-	& > select,
-	& > textarea {
+	&>input,
+	&>select,
+	&>textarea {
 		margin: 0;
 	}
 
-	& > label {
+	&>label {
 		margin: $width_border_io;
 		padding: $space_half;
 	}
@@ -333,4 +350,4 @@ div {
 // Sprites
 .sprite_img {
 	display: inline-block;
-}
+}

global/_common.scss

@@ -150,7 +150,7 @@
 }
 
 .float_space_left {
-	@extend .float_left;
+	float: left;
 	margin-right: $space_small;
 }