hippie-style/elements/_grouping.scss

@use "sass:color";

// Grouping content
// -----------------------------------------------------------------------------
// p
// address
// hr
// pre
// blockquote
// ol
// ul
// menu
// li
// dl
// dt
// dd
// figure
// figcaption
// main
// div



// Paragraph
// -----------------------------------------------------------------------------
p {
	@extend %basic;
	margin-top: $space_basic;
	margin-bottom: $space_basic;

	code {
		padding: $space_tiny $space_half;
		font-size: 1em;
		line-height: 1;
	}
}

.column_line {
	column-rule: $border_basic;
}

.column_2,
.column_3 {
	@extend p;
}

.column_2 {
	column-count: 2;
	column-gap: $space_small;
}

.column_3 {
	column-count: 3;
	column-gap: $space_medium;
}

// Address
// -----------------------------------------------------------------------------
address {
	// @extend %basic;
	margin-top: $space_double;
	margin-bottom: $space_double;
}

// Line
// -----------------------------------------------------------------------------
hr {
	margin-top: $space_small;
	margin-bottom: $space_small;
	border-width: $width_border_basic 0 0;
	border-style: solid;
	border-color: $color_border_basic;

	&.vertical {
		display: inline;
		margin: 0 $space_double;
		border-width: 0 $width_border_basic 0 0;
	}
}

.hr_hidden {
	@extend hr;
	border-color: transparent;
}

.hr_dotted {
	@extend hr;
	border-style: dotted;
}

.hr_double {
	@extend hr;
	height: 4px;
	border-width: $width_border_basic 0;
}

// Preformat
// -----------------------------------------------------------------------------
pre {
	@extend %basic_mono;
	white-space: pre-wrap;
}

.pre_code {
	overflow-x: auto;
	border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
	border-style: dotted;
	border-width: 0 0 0 $width_border_4;
	border-radius: $radius_basic;
	padding: $space_basic;
	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);

	code {
		background-color: transparent;
	}
}

// Quote
// -----------------------------------------------------------------------------
blockquote {
	margin: $space_basic 0;
	padding-right: $indent_basic;
	padding-left: $indent_basic;
}

.quote_mark {
	p::before {
		content: "\201E \0020";
	}

	p::after {
		content: "\0020 \201C";
	}

	.quote_source {

		&::before,
		&::after {
			content: "";
		}
	}
}

// List
// -----------------------------------------------------------------------------
dl,
ul,
ol {
	margin: $space_double 0;
}

ul,
ol {
	padding-left: $indent_basic;

	&.horizontal {
		overflow: auto;

		li {
			@extend .float_space_left;
		}
	}
}

menu {
	margin: 0;
}

dl {
	margin-left: $indent_basic;
}

li,
dt,
dd {
	@extend %basic;
}

dd,
.list_basic li {
	margin-bottom: $space_basic;
}

dd {
	margin-left: $indent_basic;
}

ul {
	li {
		list-style: square;
	}
}

.list_dash {
	li {
		list-style: none;
		position: relative;

		&::before {
			content: "_";
			position: absolute;
			left: -1em;
		}
	}
}

.list_link {
	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 {
				background-color: $color_action_basic;
				color: $color_highlight_basic;
			}
		}
	}
}

// Embedded
// -----------------------------------------------------------------------------
figure {
	margin: $space_double $indent_basic;
}

figcaption {
	@extend %basic;
	color: $color_darker;
}

// Main content
// -----------------------------------------------------------------------------
main {}

// Div
// -----------------------------------------------------------------------------
div {}

.div_info {
	padding: $space_double $indent_basic;
	border-right: $space_basic solid rgba($echo_color, 0.6);
	background-color: rgba($echo_color, 0.1) !important;
}

.box_space {
	position: relative;
	overflow: auto;
	width: 100%;
}

.box_cube {
	float: left;
	display: table;
	width: $space_medium;
	text-align: center;
	vertical-align: middle;

	span {
		display: table-cell;
	}
}

.box_placeholder {
	width: 100%;
	height: $space_medium;
	border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1);
	border-radius: $radius_basic;
	background-color: color.adjust($alpha_color, $alpha: -0.2);
}

.box_placeholder_bkg {
	width: 100%;
	height: $space_medium * 2;
	border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1);
	border-radius: $radius_basic;
	padding: $space_basic;
	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
	background-color: color.adjust($color_front_basic, $alpha: -0.1);
}

.box_file_tile {
	@extend .float_space_left;
}

// Flex
.flex {
	display: flex;

	&.inline {
		@extend %flex-inline;
	}
}

// Grid
.grid {
	display: grid;
	grid-gap: $space_basic;

	&>input,
	&>select,
	&>textarea {
		margin: 0;
	}

	&>label {
		margin: $width_border_io;
		padding: $space_half;
	}
}

.grid_column_2 {
	grid-template-columns: max-content max-content;

}

.grid_column_4 {
	grid-template-columns: max-content max-content max-content max-content;
}

// Sprites
.sprite_img {
	display: inline-block;
}