added current state from hippie main repo

commit state 175816
source/style/hippie

modules/_vendor.scss

@@ -0,0 +1,23 @@
+/**
+ * @description
+ * Generates cross-browser-compatible output for a given element with its value.
+ *
+ * @author sthag
+ *
+ * @param values
+ * @returns
+ *   -webkit-<name>: <values>
+ *       ...-<name>: <values>
+ *
+ * @example
+ *   .selector
+ *     @include vendor-prefix(hyphens, auto)
+ */
+@mixin vendor-prefix($name, $argument) {
+	-webkit-#{$name}: #{$argument};
+	-ms-#{$name}: #{$argument};
+	-moz-#{$name}: #{$argument};
+	-o-#{$name}: #{$argument};
+	#{$name}: #{$argument};
+}
+

modules/breakpoint/_breakpoint_module.scss

@@ -0,0 +1,47 @@
+.query_goingLarge {
+  @include goingLarge($screen_tiny) {};
+}
+
+.query_goingSmall {
+  @include goingSmall($screen_gigantic) {};
+}
+
+.query_phoneUp {
+  @include forPhoneUp {}
+}
+
+.query_phoneOnly {
+  @include forPhoneOnly {}
+}
+
+.query_tabletPortaitOnly {
+  @include forTabletPortraitOnly {
+  }
+}
+
+.query_tabletPortraitUp {
+  @include forTabletPortraitUp {
+  }
+}
+
+.query_tabletLandscapeOnly {
+  @include forTabletLandscapeOnly {}
+}
+
+.query_tabletLandscapeUp {
+  @include forTabletLandscapeUp {}
+}
+
+.query_desktopOnly {
+  @include forDesktopOnly {
+  }
+}
+
+.query_desktopUp {
+  @include forDesktopUp {
+  }
+}
+
+.query_bigDesktopUp {
+  @include forBigDesktopUp {}
+}

modules/card/_card_module.scss

@@ -0,0 +1,76 @@
+// Card module styles
+// ------------------------------------------------------------------------------
+
+.html_card {
+	@extend %h_content_full;
+
+	body {
+
+		.card_bkg {
+			@extend %full_parent;
+			transition-duration: 800ms;
+			overflow: hidden;
+			vertical-align: top;
+			z-index: -1;
+
+			& > svg {
+				position: relative;
+			}
+		}
+
+		.card_box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100vh;
+
+			* {
+				font-family: $family_text_card;
+				// text-align: center;
+			}
+
+			& > div {
+				position: relative;
+				padding: 64px 64px 24px 64px;
+				border: 1px solid #FFF;
+				background-color: #F5F5F5;
+				z-index: 40;
+			}
+		}
+
+		h1 {
+			margin: 16px 0;
+			color: #1E1E1E;
+			font-size: 24px;
+			line-height: 1.4em;
+			font-weight: normal;
+		}
+
+		p {
+			margin-top: 0;
+			margin-bottom: 16px;
+			font-size: 12px;
+			line-height: 1.4em;
+		}
+
+		.marked {
+			// padding-left: 1em;
+			// text-indent: -1em;
+
+			&::before { content: "*\0000a0" }
+		}
+
+		.decent { color: #666 }
+
+		a {
+			color: #000;
+			text-decoration: none;
+
+			&:hover {
+				color: #F4F9FA;
+				background-color: #0C85FF;
+				text-decoration: none;
+			}
+		}
+	}
+}

modules/editor/_editor_module.scss

@@ -0,0 +1,23 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Editor module styles
+// ------------------------------------------------------------------------------
+
+%wip {
+  border-right: $space_basic solid rgba(crimson, 0.8);
+  background-color: rgba(crimson, 0.1) !important;
+}
+.wip {
+  @extend %wip;
+  &::before, &::after {
+    content: "";
+    display: block;
+    height: 48px;
+  }
+}
+.wip_txt {
+  @extend %wip;
+}

modules/explanation/_explanation_module.scss

@@ -0,0 +1,115 @@
+// Explanation module styles
+// ------------------------------------------------------------------------------
+
+%expose_after {
+	&::after {
+		content: "";
+		display: block;
+		height: 48px;
+		background-color: rgba($delta_color, 0.1) !important;
+	}
+}
+%expose_before {
+	&::before {
+		content: "";
+		display: block;
+		height: 48px;
+		background-color: rgba($delta_color, 0.1) !important;
+	}
+}
+%expose {
+	&::before, &::after {
+		content: "";
+		display: block;
+		height: 48px;
+		background-color: rgba($delta_color, 0.1) !important;
+	}
+}
+%exp {
+}
+%exp_hidden {
+	display: none;
+}
+
+.exp_wrap {
+	position: relative;
+}
+
+.exp_overlay {
+	@extend %full_parent;
+	background-color: transparentize($alpha_color, .6);
+}
+
+.exp_pop {
+	@extend %exp_hidden !optional;
+	position: absolute;
+	z-index: 100;
+	top: $space_large;
+	left: $space_large;
+	padding: $space_half;
+	border: 4px solid $color_back_basic;
+	border-radius: 4px;
+	background-color: $color_back_basic;
+	pointer-events: none;
+}
+.exp_marker_pop {
+	position: absolute;
+	top: -$size_text_basic / 4 * 3;
+	right: -$size_text_basic / 2;
+	width: $size_text_basic;
+	height: $size_text_basic;
+	border: $space_tiny solid $color_highlight_basic;
+	border-radius: $size_text_basic;
+	color: $color_highlight_basic;
+	background-color: $color_darkest;
+}
+
+.exp_expose {
+	@extend %expose !optional;
+}
+.exp_expose_pre {
+	@extend %expose_after;
+}
+.exp_expose_post {
+	@extend %expose_before;
+}
+
+.exp_overlay_btn {
+	position: fixed;
+	width: 3em;
+	height: 2em;
+	// padding: $space_basic $space_basic * 2;
+	cursor: pointer;
+}
+.exp_help_btn {
+	display: table;
+	right: $space_double;
+	bottom: $space_double;
+	background-color: rgba($color_darkest, 0.4);
+	&:hover {
+		background-color: $color_brightest;
+		> .span_solo {
+			color: $color_darkest;
+		}
+	}
+	.span_solo {
+		display: table-cell;
+		color: rgba($color_brightest, 0.8);
+		font-family: $family_text_mono;
+		font-size: 1.4em;
+		text-align: center;
+		vertical-align: middle;
+	}
+}
+
+
+
+.expose_height {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba($delta_color, 0.1) !important;
+	@include vendor-prefix(transition, height 0.5s ease);
+}

modules/maintenance/_maintenance_module.scss

@@ -0,0 +1,19 @@
+.body_status {
+  @extend .sec_main_status;
+  height: 100vh;
+  border-color: $foxtrot_color;
+
+  .main_site {
+    @extend .wrap_center;
+    & > h1:first-of-type {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-weight: bold;
+      line-height: 1;
+    }
+    & > h1 + h3 {
+      margin-top: 0;
+      margin-bottom: $space_small;
+    }
+  }
+}

modules/media/_media_module.scss

@@ -0,0 +1,4 @@
+.nomedia {
+	@extend .box_placeholder;
+	height: inherit;
+}

modules/navigation/_nav_module.scss

@@ -0,0 +1,171 @@
+nav {
+
+	ul {
+		padding-left: 0;
+	}
+
+	li {
+		margin-bottom: $space_basic;
+		list-style: none;
+	}
+}
+
+.nav_horizontal {
+	ul {
+		@extend .overflow;
+
+		ul {
+			margin: $space_basic 0;
+		}
+
+		li {
+			@extend .float_space_left;
+			margin-right: $space_basic;
+			margin-bottom: 0;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+.nav_right {
+	float: right;
+	margin-left: $space_basic;
+
+	.align_parent {
+		margin-right: $space_basic * -1;
+	}
+}
+
+.nav_separate {
+	li {
+		position: relative;
+		padding-left: $space_tiny;
+
+		&:not(:first-child) {
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: $space_tiny;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background-color: $color_border_basic;
+			}
+		}
+	}
+}
+
+.nav_separate_right {
+	float: right;
+	li {
+		position: relative;
+
+		&:first-child {
+			padding-left: $space_basic * 2 + $space_tiny;
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: $space_tiny;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background-color: $color_front_basic;
+				margin: 0 $space_basic;
+			}
+		}
+	}
+}
+
+.nav_center_old {
+	@extend .nav_horizontal;
+	float: right;
+	position: relative;
+	left: -50%;
+
+	ul {
+		position: relative;
+		left: 50%;
+		text-align: center;
+	}
+}
+
+.nav_column {
+	position: relative;
+	margin: $space_basic 0;
+
+	ul {
+		@extend .flex;
+		margin: 0 $space_large;
+
+		li {
+			@extend .flex_child;
+			flex-grow: 1;
+			margin: 0;
+			text-align: center;
+
+			a {
+				display: block;
+			}
+		}
+	}
+}
+
+.nav_page_meta {
+	position: fixed;
+	// display: table;
+	// width: 3em;
+  right: $space_half;
+  bottom: $space_double;
+
+	ul {
+		margin: $space_basic 0;
+	}
+
+	li {
+		margin-bottom: 0;
+		line-height: 1;
+	}
+	button {
+		width: 32px;
+		margin-right: 0;
+		margin-left: 0;
+	}
+	.a_button_meta {
+		// display: table-cell;
+		display: inline-block;
+
+		&:active,
+		&:focus {
+			background-color: transparent;
+		}
+
+		&:hover {
+			background-color: $color_action_basic;
+		}
+	}
+	.sprite_img {
+		vertical-align: top;
+	}
+}
+
+.header_page {
+
+	nav {
+		@extend .nav_horizontal;
+
+		a {
+
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: rgba($color_text_basic, 0.2);
+				color: $color_text_basic;
+			}
+		}
+	}
+}

modules/print/_print_module.scss

@@ -0,0 +1,128 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Print module styles
+// ------------------------------------------------------------------------------
+
+%paper {
+	background-color: $color_front_basic;
+}
+
+$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
+$a5: ".dina5" 0 0 0 1.2cm;
+$a6: ".dina6" 0 0 0 1.2cm;
+
+$din: $a4, $a5, $a6;
+
+.print_body {
+	font-size: $size_text_print;
+	margin: 10vh 20vw;
+
+	@page {
+		size: A4;
+		margin: 1.2cm;
+	}
+
+	@page:first {
+		size: A4;
+		margin: 0;
+	}
+
+	@each $space in $din {
+		#{nth($space, 1)} {
+			padding-top: nth($space, 2);
+			padding-right: nth($space, 3);
+			padding-bottom: nth($space, 4);
+			padding-left: nth($space, 5);
+
+			.page_head, .page_foot {
+				right: nth($space, 3);
+				left: nth($space, 5);
+			}
+			.page_head {
+				top: nth($space, 2);
+			}
+			.page_foot {
+				bottom: nth($space, 4);
+			}
+		}
+	}
+
+	*[class^="din"] {
+		@extend %paper;
+		position: relative;
+		overflow: auto;
+
+		p {
+			@extend %basic_print;
+		}
+
+		.page_head, .page_foot {
+			position: absolute;
+		}
+
+		.page_head {
+			page: cover;
+		}
+
+		.page_foot {
+			display: flex;
+			flex-direction: row;
+
+			*:last-child {
+				margin-bottom: 0;
+			}
+
+			p {
+				flex: 1 0 auto;
+				margin: 0;
+				font-size: 8pt;
+				line-height: 10pt;
+				text-align: center;
+			}
+
+			.page_no {
+				flex: 1 0 auto;
+				font-size: 20pt;
+				line-height: 1;
+				text-align: right;
+			}
+			p:first-child {
+				text-align: left;
+			}
+		}
+		.page_content {
+			margin-top: 10cm;
+			margin-bottom: 2cm;
+		}
+		margin: $space_small auto;
+	}
+
+	.page_title, .page_date {
+		font-size: 14pt;
+	}
+
+	.page_title {
+		margin: 0;
+	}
+
+	.page_date, .page_no {
+		@extend %head_1;
+		float: right;
+	}
+
+	.page_author {
+		position: absolute;
+		top: 5cm;
+		right: 0;
+		text-align: right;
+	}
+
+	.page_recipient {
+		position: absolute;
+		top: 5cm;
+		left: 0;
+	}
+}

modules/tables/_tables_module.scss

@@ -0,0 +1,68 @@
+.table_link {
+	width: 100%;
+	border: 0;
+	table-layout: auto;
+
+	tbody {
+		border-bottom: $border_basic;
+
+		&:hover {
+			background-color: $color_bright;
+		}
+	}
+
+	th, td {
+		border: 0;
+	}
+
+	.cell_icon {
+		width: 48px;
+		text-align: center;
+		img {
+			vertical-align: text-top;
+		}
+	}
+
+	.cell_link {
+		padding-right: $space_basic;
+		padding-left: $space_basic;
+
+		&:hover {
+			background-color: $foxtrot_color;
+			a:first-child {
+				display: none;
+			}
+			a:last-child {
+				display: block;
+				color: $color_highlight_basic;
+			}
+		}
+
+		a {
+			display: block;
+		}
+
+		a:last-child {
+			display: none;
+		}
+	}
+
+	th:last-child, .cell_date {
+		width: 16%;
+		text-align: center;
+	}
+
+	.cell_text {
+		padding-right: $space_basic;
+		padding-left: $space_basic;
+
+		div {
+			width: 100%;
+		}
+
+		.shorten {
+			@extend %short;
+			max-height: 44px;
+		}
+	}
+}