hippie-style/global/_common.scss

// General classes
// -----------------------------------------------------------------------------



%size_content {
	box-sizing: content-box;
}

%size_content_solo {
	@extend %size_content;

	*,
	::before,
	::after {
		box-sizing: $box_sizing;
	}
}

%h_content_full {
	height: 100%;

	body {
		min-height: 100%;
	}
}

%hidden {
	display: none;
}

.hide {
	@extend %hidden;
}

.space_even_auto {
	margin-right: auto;
	margin-left: auto;
}

.space_even_half {
	margin-right: 25%;
	margin-left: 25%;
}

.space_even_fourth {
	margin-right: 37.5%;
	margin-left: 37.5%;
}

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

.space_left_fourth {
	margin-left: 25%;
}

.width_full {
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.width_half {
	width: 50%;
	margin-right: 0;
	margin-left: 0;
}

.width_third {
	width: 33.3%;
	margin-right: 0;
	margin-left: 0;
}

.h_basic {
	height: 1024px;
}

.h_full_view {
	height: 100vh;
}

.h_100 {
	height: 100%;
}

.wrap_center {
	&	> * {
		margin-right: (100% - $width_basic) / 2;
		margin-left: (100% - $width_basic) / 2;

		@include forTabletPortraitUp {
			margin-right: (100% - $width_small) / 2;
			margin-left: (100% - $width_small) / 2;
		}
		@include forTabletLandscapeUp {
			margin-right: (100% - $width_medium) / 2;
			margin-left: (100% - $width_medium) / 2;
		}
		@include forBigDesktopUp {
			margin-right: (100% - $width_large) / 2;
			margin-left: (100% - $width_large) / 2;
		}
	}
}



// Clearing and floating
// -----------------------------------------------------------------------------
.clear {
	clear: both;

	&::before,
	&::after {
		clear: both;
	}
}

.overflow {
	overflow: auto;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

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

.float_half_size {
	float: left;
	width: 50%;
}

.x_long {
	overflow-x: scroll;
}



// Inlining
// -----------------------------------------------------------------------------
.inline {
	display: inline-block;
}



// Positioned elements
// -----------------------------------------------------------------------------
%viewport_fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

%full_parent {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	// width: 100%;
	// height: 100%;
}

.pos_abs {
	position: absolute;
}

.pos_rel {
	position: relative;
}

.pos_fix {
	position: fixed;
}

.pin_top {
	top: 0;
}

.pin_right {
	right: 0;
}

.pin_bottom {
	bottom: 0;
}

.pin_left {
	left: 0;
}

.pos_full_view {
	@extend %viewport_fixed;
	background-color: rgba($alpha_color, 0.5);
}

.pos_full_page {
	@extend %full_parent;
	background-color: rgba($charlie_color, 0.25);
}

.hover_back_change {
	background-color: $color_darker;
	transition: background-color 0.2s ease-in-out;

	&:hover {
		background-color: $color_back_basic;
	}
}

.mouse_over {
	@extend %viewport_fixed;
	z-index: $z_heaven;
	background-color: transparentize($color_darkest, 0.5);
	transition: background-color $duration_long $timing_basic $duration_long;
	pointer-events: none;
}



// Colors
// -----------------------------------------------------------------------------
.txt_color_light {
	color: $color_brighter;
}

.txt_color_dark {
	color: $color_darker;
}



// Text
// -----------------------------------------------------------------------------
.txt_tiny {
	font-size: .5em !important;
}

.txt_smaller {
	font-size: .75em !important;
}

.txt_larger {
	font-size: 1.2em !important;
}

.txt_huge {
	font-size: 3em !important;
}

.txt_hero {
	font-size: $size_hero;
}

.txt_center {
	text-align: center !important;
}

.txt_right {
	text-align: right !important;
}

.txt_left {
	text-align: left !important;
}

.txt_top {
	vertical-align: top !important;
}

.txt_bottom {
	vertical-align: bottom !important;
}

.txt_white {
	color: white;
}

.txt_black {
	color: black;
}

.txt_gradient {
	background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}