hippie-style/elements/_grouping.scss

// Grouping content
// -----------------------------------------------------------------------------
// p
// address
// hr
// pre
// blockquote
// ol
// ul
// 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;
}

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

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

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

.pre_code {
	overflow-x: auto;
	border-color: darken($color_back_basic, $color_diff_tiny);
	border-style: dotted;
	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;
	}
}

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

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

.list_horizontal {
	overflow: auto;
	li {
		@extend .float_space_left;
	}
}

// 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;
	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 transparentize($alpha_color, 0.1);
	border-radius: $radius_basic;
	background-color: transparentize($alpha_color, 0.2);
}

.box_placeholder_bkg {
	width: 100%;
	height: $space_medium * 2;
	border: $width_border_4 solid transparentize($color_front_basic, 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: transparentize($color_front_basic, 0.1);
}

.box_file_tile {
	@extend .float_space_left;
}

// Flex
.flex {
	display: flex;
}

.flex_wrap {
	@extend .flex;
	flex-wrap: wrap;
}

.flex_row {
	@extend .flex;
	flex-direction: column;
	// align-items: flex-start;
	justify-content: flex-start;
}

.flex_child {
	flex: 0 1 auto;
}

.flex_child_one {
	flex: 1;
}

.flex_child_end {
	align-self: flex-end;
}

.flex_column_wrap {
	@extend .flex_wrap;

	.flex_column {
		@extend .flex_child;
		flex-grow: 1;
	}
}

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