feat: Rename class

- Rename sub class to horizontal and bound to ul and ol elements - Reformat files
feat: Change default timings
2025-06-19 14:18:45 +02:00 · 2025-05-18 11:12:00 +02:00
4 changed files with 123 additions and 107 deletions
--- a/elements/_grouping.scss
+++ b/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;
-}
+}
--- a/elements/_sections.scss
+++ b/elements/_sections.scss
@ -39,25 +39,20 @@ body {
 	}

 	&:hover {
-
 		.mouse_over {
 			background-color: transparent !important;
-			transition: background-color $duration_double $timing_basic 0s !important;
+			transition: background-color $duration_basic $timing_basic 0s !important;
 		}
 	}
 }

 // Article
 // -----------------------------------------------------------------------------
-article {
-
-}
+article {}

 // Section
 // -----------------------------------------------------------------------------
-section {
-
-}
+section {}

 .sec_main_center {
 	width: $width_basic;
@ -67,9 +62,11 @@ section {
 	@include forTabletPortraitUp {
 		width: $width_small;
 	}
+
 	@include forTabletLandscapeUp {
 		width: $width_medium;
 	}
+
 	@include forBigDesktopUp {
 		width: $width_large;
 	}
@ -84,20 +81,18 @@ 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});
 	}

@ -116,7 +111,12 @@ aside {

 // Headings
 // -----------------------------------------------------------------------------
-h1, h2, h3, h4, h5, h6 {
+h1,
+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,9 +165,7 @@ h6 {

 // Header
 // -----------------------------------------------------------------------------
-header {
-
-}
+header {}

 .header_page {
 	overflow: auto;
@ -184,6 +182,4 @@ header {

 // Footer
 // -----------------------------------------------------------------------------
-footer {
-
-}
+footer {}
--- a/global/_common.scss
+++ b/global/_common.scss
@ -48,21 +48,24 @@
 }

@each $size, $variable in (basic, #{$space_basic}),
-                          (small, #{$space_small}),
-                          (medium, #{$space_medium}),
-                          (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;
-  }
+(small, #{$space_small}),
+(medium, #{$space_medium}),
+(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;
+	}
 }

 .space_left_fourth {
@ -100,7 +103,7 @@
 }

 .wrap_center {
-	&	> * {
+	&>* {
 		margin-right: math.div((100% - $width_basic), 2);
 		margin-left: math.div((100% - $width_basic), 2);

@ -108,10 +111,12 @@
 			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);
@ -145,7 +150,7 @@
 }

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

@ -312,4 +317,4 @@
 	background-clip: text;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
-}
+}
--- a/global/_config.scss
+++ b/global/_config.scss
@ -68,13 +68,12 @@ $family_head_basic: $family_text_basic !default;
 // COLORS
 // ------------------------------------------------------------------------------
 $color_palette: (
-  alpha: #fad803,
-  bravo: #d30a51,
-  charlie: #273f8b,
-  delta: #b7e0f0,
-  echo: #52bed1,
-	foxtrot: #0c85ff
-) !default;
+	alpha: #fad803,
+	bravo: #d30a51,
+	charlie: #273f8b,
+	delta: #b7e0f0,
+	echo: #52bed1,
+	foxtrot: #0c85ff) !default;

@include addDefaultColors;

@ -90,7 +89,8 @@ $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,12 +105,14 @@ $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-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
-  $color_list: map-merge($color_list, $map);
+	$map: (
+	);
+$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
+$color_list: map-merge($color_list, $map);
 }


@ -159,40 +161,36 @@ $radius_basic: $space_tiny * 2 !default;

 // IO
 // ------------------------------------------------------------------------------
-$io_input_list:
-  'input[type="text"]',
-  'input[type="number"]',
+$io_input_list: 'input[type="text"]',
+	'input[type="number"]',
 	'input[type="color"]',
 	'input[type="range"]',
 	'input[type="date"]',
 	'input[type="time"]',
-  'input[type="datetime-local"]',
-  'input[type="month"]',
-  'input[type="week"]',
+	'input[type="datetime-local"]',
+	'input[type="month"]',
+	'input[type="week"]',
 	'input[type="email"]',
-  'input[type="password"]',
-  'input[type="tel"]',
-  'input[type="url"]',
+	'input[type="password"]',
+	'input[type="tel"]',
+	'input[type="url"]',
 	'input[type="search"]',
 	'input:not([type])';

-$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_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])',
@ -218,7 +216,7 @@ $shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightne

 // ANIMATIONS
 // ------------------------------------------------------------------------------
-$duration_basic: 250ms !default;
+$duration_basic: 200ms !default;
 $duration_double: $duration_basic * 2;
 $duration_long: 2s !default;
 $timing_basic: ease-out !default;
@ -254,17 +252,17 @@ $webkit_ms_support: -webkit- -ms- '';
 // SYMBOLS
 // ------------------------------------------------------------------------------
 $icons: (
-  glass: "\f000",
-  music: "\f001",
-  search: "\f002",
-  envelope-o: "\f003",
-  heart: "\f004"
+	glass: "\f000",
+	music: "\f001",
+	search: "\f002",
+	envelope-o: "\f003",
+	heart: "\f004"
 );

@each $name, $icon in $icons {
-  .sym_#{$name}::before {
-    content: $icon;
-  }
+	.sym_#{$name}::before {
+		content: $icon;
+	}
 }


@ -273,4 +271,4 @@ $icons: (
 // ------------------------------------------------------------------------------
 $no_agent_focus: true;

-@include overrideUserAgent;
+@include overrideUserAgent;
Author	SHA1	Message	Date
sthag	a1a4bd408b	feat: Rename class - Rename sub class to horizontal and bound to ul and ol elements - Reformat files	2025-06-19 14:18:45 +02:00
sthag	d17f966794	feat: Change default timings - Change mouse over time - Change default duration - Format with tabs - Reindent	2025-05-18 11:12:00 +02:00