hippie-style/elements/_sections.scss

@use "sass:map";

// Root
// -----------------------------------------------------------------------------
html {
	// height: 100%;
}



// Sections
// -----------------------------------------------------------------------------
// body
// article
// section
// nav
// aside
// h1-h6
// header
// footer



// Body
// -----------------------------------------------------------------------------
body {
	position: relative;
	box-sizing: $box_sizing;
	margin: 0;
	font-family: $family_text_basic;
	font-size: $size_text_basic;
	line-height: $line_basic;
	line-height: $line_text_basic;
	color: $color_text_basic;
	background-color: $color_back_basic;

	*,
	::before,
	::after {
		box-sizing: inherit;
	}

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

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

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

.sec_main_center {
	width: $width_basic;
	margin: 0 auto;
	padding-top: $space_small;

	@include forTabletPortraitUp {
		width: $width_small;
	}

	@include forTabletLandscapeUp {
		width: $width_medium;
	}

	@include forBigDesktopUp {
		width: $width_large;
	}
}

.sec_main_status {
	border-top-width: $width_border_8;
	border-top-style: solid;
	border-color: $color_border_basic;
	padding-top: $space_small;
}

// Navigation
// -----------------------------------------------------------------------------
nav {

	ul {
		margin: 0;

		&.inline li {
			display: inline-block;
		}
	}
}

// Aside element
// -----------------------------------------------------------------------------
aside {
	width: $width_aside_basic;

	&.right+.bside {
		margin-right: calc(#{$width_aside_basic} + #{$space_basic});
	}

	&.left+.bside {
		margin-left: calc(#{$width_aside_basic} + #{$space_basic});
	}

	&.right {
		float: right;
	}

	&.left {
		float: left;
	}

	*: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
// -----------------------------------------------------------------------------
h1,
h2,
h3,
h4,
h5,
h6 {
	@extend %head_all;
}

h1 {
	@extend %head_1;
	margin: $space_large 0 $space_small;
}

h1+h1 {
	margin-top: 0;
}

h2 {
	@extend %head_2;
	margin: $space_medium 0 $space_small;
}

h2+h2 {
	margin-top: 0;
}

h3 {
	@extend %head_3;
	margin: $space_double 0;
	text-transform: uppercase;
}

h4 {
	@extend %head_3;
	margin: $space_double 0;
	text-transform: none;
}

h5 {
	@extend %head_4;
	margin: $space_double 0 $space_basic;
	text-transform: none;
}

h6 {
	@extend %basic;
	margin: $space_basic 0;
	text-transform: none;
	font-weight: bold;
}

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

.header_page {
	overflow: auto;
}

.header_txt {
	margin-bottom: $space_small;
	border-bottom: $border_dotted;

	h1 {
		border-top: $border_basic;
	}
}

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;
		}
	}
}