elements/_grouping.scss

@@ -24,7 +24,6 @@ p {
 	@extend %basic;
 	margin-top: $space_basic;
 	margin-bottom: $space_basic;
-
 	code {
 		padding: $space_tiny $space_half;
 		font-size: 1em;
@@ -35,17 +34,13 @@ 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;
@@ -100,7 +95,6 @@ pre {
 	border-radius: $radius_basic;
 	padding: $space_basic;
 	background-color: lighten($color_back_basic, $color_diff_tiny);
-
 	code {
 		background-color: transparent;
 	}
@@ -118,15 +112,11 @@ blockquote {
 	p::before {
 		content: "\201E \0020";
 	}
-
 	p::after {
 		content: "\0020 \201C";
 	}
-
 	.quote_source {
-
+		&::before, &::after {
-		&::before,
-		&::after {
 			content: "";
 		}
 	}
@@ -134,37 +124,23 @@ blockquote {
 
 // List
 // -----------------------------------------------------------------------------
-dl,
+dl, ul, ol {
-ul,
-ol {
 	margin: $space_double 0;
 }
 
-ul,
+ul, ol {
-ol {
 	padding-left: $indent_basic;
-
-	&.horizontal {
-		overflow: auto;
-
-		li {
-			@extend .float_space_left;
-		}
-	}
 }
 
 dl {
 		margin-left: $indent_basic;
 }
 
-li,
+li, dt, dd {
-dt,
-dd {
 	@extend %basic;
 }
 
-dd,
+dd, .list_basic li {
-.list_basic li {
 	margin-bottom: $space_basic;
 }
 
@@ -195,18 +171,15 @@ 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 {
@@ -217,6 +190,13 @@ ul {
 	}
 }
 
+.list_horizontal {
+	overflow: auto;
+	li {
+		@extend .float_space_left;
+	}
+}
+
 // Embedded
 // -----------------------------------------------------------------------------
 figure {
@@ -230,11 +210,15 @@ figcaption {
 
 // Main content
 // -----------------------------------------------------------------------------
-main {}
+main {
+
+}
 
 // Div
 // -----------------------------------------------------------------------------
-div {}
+div {
+
+}
 
 .div_info {
 	padding: $space_double $indent_basic;
@@ -244,7 +228,6 @@ div {}
 
 .box_space {
 	position: relative;
-	overflow: auto;
 	width: 100%;
 }
 
@@ -326,13 +309,13 @@ div {}
 	display: grid;
 	grid-gap: $space_basic;
 
-	&>input,
+	& > input,
-	&>select,
+	& > select,
-	&>textarea {
+	& > textarea {
 		margin: 0;
 	}
 
-	&>label {
+	& > label {
 		margin: $width_border_io;
 		padding: $space_half;
 	}

elements/_sections.scss

@@ -39,20 +39,25 @@ body {
 	}
 
 	&:hover {
+
 		.mouse_over {
 			background-color: transparent !important;
-			transition: background-color $duration_basic $timing_basic 0s !important;
+			transition: background-color $duration_double $timing_basic 0s !important;
 		}
 	}
 }
 
 // Article
 // -----------------------------------------------------------------------------
-article {}
+article {
+
+}
 
 // Section
 // -----------------------------------------------------------------------------
-section {}
+section {
+
+}
 
 .sec_main_center {
 	width: $width_basic;
@@ -62,11 +67,9 @@ section {}
 	@include forTabletPortraitUp {
 		width: $width_small;
 	}
-
 	@include forTabletLandscapeUp {
 		width: $width_medium;
 	}
-
 	@include forBigDesktopUp {
 		width: $width_large;
 	}
@@ -81,18 +84,20 @@ section {}
 
 // Navigation
 // -----------------------------------------------------------------------------
-nav {}
+nav {
+
+}
 
 // Aside element
 // -----------------------------------------------------------------------------
 aside {
 	width: $width_aside_basic;
 
-	&.right+.bside {
+	&.right + .bside {
 		margin-right: calc(#{$width_aside_basic} + #{$space_basic});
 	}
 
-	&.left+.bside {
+	&.left + .bside {
 		margin-left: calc(#{$width_aside_basic} + #{$space_basic});
 	}
 
@@ -111,12 +116,7 @@ aside {
 
 // Headings
 // -----------------------------------------------------------------------------
-h1,
+h1, h2, h3, h4, h5, h6 {
-h2,
-h3,
-h4,
-h5,
-h6 {
 	@extend %head_all;
 }
 
@@ -125,7 +125,7 @@ h1 {
 	margin: $space_large 0 $space_small;
 }
 
-h1+h1 {
+h1 + h1 {
 	margin-top: 0;
 }
 
@@ -134,7 +134,7 @@ h2 {
 	margin: $space_medium 0 $space_small;
 }
 
-h2+h2 {
+h2 + h2 {
 	margin-top: 0;
 }
 
@@ -165,7 +165,9 @@ h6 {
 
 // Header
 // -----------------------------------------------------------------------------
-header {}
+header {
+
+}
 
 .header_page {
 	overflow: auto;
@@ -182,4 +184,6 @@ header {}
 
 // Footer
 // -----------------------------------------------------------------------------
-footer {}
+footer {
+
+}

global/_common.scss

@@ -48,21 +48,18 @@
 }
 
 @each $size, $variable in (basic, #{$space_basic}),
-(small, #{$space_small}),
+                          (small, #{$space_small}),
-(medium, #{$space_medium}),
+                          (medium, #{$space_medium}),
-(large, #{$space_large}) {
+                          (large, #{$space_large}) {
   .space_top_#{$size} {
     margin-top: $variable;
   }
-
   .space_right_#{$size} {
     margin-right: $variable;
   }
-
   .space_bottom_#{$size} {
     margin-bottom: $variable;
   }
-
   .space_left_#{$size} {
     margin-left: $variable;
   }
@@ -103,7 +100,7 @@
 }
 
 .wrap_center {
-	&>* {
+	&	> * {
 		margin-right: math.div((100% - $width_basic), 2);
 		margin-left: math.div((100% - $width_basic), 2);
 
@@ -111,12 +108,10 @@
 			margin-right: math.div((100% - $width_small), 2);
 			margin-left: math.div((100% - $width_small), 2);
 		}
-
 		@include forTabletLandscapeUp {
 			margin-right: math.div((100% - $width_medium), 2);
 			margin-left: math.div((100% - $width_medium), 2);
 		}
-
 		@include forBigDesktopUp {
 			margin-right: math.div((100% - $width_large), 2);
 			margin-left: math.div((100% - $width_large), 2);
@@ -150,7 +145,7 @@
 }
 
 .float_space_left {
-	float: left;
+	@extend .float_left;
 	margin-right: $space_small;
 }
 

global/_config.scss

@@ -73,7 +73,8 @@ $color_palette: (
   charlie: #273f8b,
   delta: #b7e0f0,
   echo: #52bed1,
-	foxtrot: #0c85ff) !default;
+	foxtrot: #0c85ff
+) !default;
 
 @include addDefaultColors;
 
@@ -89,8 +90,7 @@ $color_back_basic: #808080 !default;
 $color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
 $color_front_basic: white !default;
 
-$color_medium: lighten($color_darkest, 50%
+$color_medium: lighten($color_darkest, 50%);
-);
 $color_dark: lighten($color_darkest, $color_diff_double);
 $color_darker: darken($color_back_basic, $color_diff_basic);
 $color_brighter: lighten($color_back_basic, $color_diff_basic);
@@ -105,14 +105,12 @@ $color_action_basic: $foxtrot_color !default;
 // default shadow colors
 // $shadow_color: fade-out($color_medium, 0.5);
 
-$color_list: (
+$color_list: ();
-);
 
 @each $key, $value in $color_palette {
-	$map: (
+  $map: ();
-	);
+  $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
-$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
+  $color_list: map-merge($color_list, $map);
-$color_list: map-merge($color_list, $map);
 }
 
 
@@ -161,7 +159,8 @@ $radius_basic: $space_tiny * 2 !default;
 
 // IO
 // ------------------------------------------------------------------------------
-$io_input_list: 'input[type="text"]',
+$io_input_list:
+  'input[type="text"]',
   'input[type="number"]',
 	'input[type="color"]',
 	'input[type="range"]',
@@ -177,20 +176,23 @@ $io_input_list: 'input[type="text"]',
 	'input[type="search"]',
 	'input:not([type])';
 
-$io_date_list: '.io_input[type="date"]',
+$io_date_list:
+  '.io_input[type="date"]',
   '.io_input[type="time"]',
   '.io_input[type="datetime-local"]',
   '.io_input[type="month"]',
   '.io_input[type="week"]';
 
-$io_button_list: 'button',
+$io_button_list:
+	'button',
 	'input[type="button"]',
 	// 'input[type="file"]',
 	'input[type="reset"]',
 	'input[type="image"]',
 	'input[type="submit"]';
 
-$io_focus_list: 'a[href]',
+$io_focus_list:
+	'a[href]',
 	'area[href]',
 	'button:not([disabled])',
 	'input:not([disabled])',
@@ -216,7 +218,7 @@ $shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightne
 
 // ANIMATIONS
 // ------------------------------------------------------------------------------
-$duration_basic: 200ms !default;
+$duration_basic: 250ms !default;
 $duration_double: $duration_basic * 2;
 $duration_long: 2s !default;
 $timing_basic: ease-out !default;