<commit_before>/*doc
---
title: View Base
name: view
category: Views
---
A "view" contains all layout and content for a given screen.
Typically, a document only has a single view. Split views,
where a document contains two view elements are possible (see below).

A class of `.view` is required for view elements; the
following classes are optional variants:

Class                  | Description
---------------------- | ---------------------------
`view--collection`     | Sets the style for views that are primarily "collections"
`view--loading`        | Displays loading overlay

## Basic view (<a class="link followLink" href="pages/full-view.html">Demo</a>)
Basic example of a single view in a document:

```
<div class="view">
	<header class="view-head">
		... view-head ...
	</header>
	<div class="view-body">
		... view-body ...
	</div>
</div>
```
*/
.view {
	@include flexParent('column', false);
	box-sizing: border-box;
	background: white;
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.view--collection,
.view--collection .view-body {
	background-color: $C_collectionBG;
}

/*doc
---
title: Loading state
name: viewLoading
parent: view
---

<a class="link followLink" href="pages/view-loading.html">Demo</a>
Basic example of a single view in a document:

```
<div class="view view--loading">
	<header class="view-head">
		... view-head ...
	</header>
	<div class="view-body">
		... view-body ...
	</div>
</div>
```
*/
.view--loading {
	$_loaderOffset: -18px; // for vertical centering

	&:before {
		@include animate--spin(.5s);
		content: " ";
		position: fixed;
		top:50%;
		left:50%;
		height: $space-3;
		width: $space-3;
		z-index: map-get($zindex-map, 'shade-content');
		border-radius: 999px;
		box-sizing: border-box;
		border: solid 3px rgba(0, 0, 0, 0.2);
		border-top-color: black;
		margin: $_loaderOffset auto auto $_loaderOffset;
	}
	&:after {
		content: " ";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(255,255,255,0.7);
		z-index: map-get($zindex-map, 'shade');
	}

}


/*doc
---
title: View Body
name: viewBody
parent: view
---
The `view-body` element is our main
content container for the view.

```
<div class="view">
	<div class="view-body">
		... stripes, bounds, etc ...
		... all content ...
	</div>
</div>
```
*/
.view-body {
	@include flexChild('grow', false);
	@include flex-basis(auto);
	box-sizing: border-box;
	height: auto;
}


/*doc
---
title: View Head
name: viewHead
parent: view
---
The `view-head` element is the first child (the
fixed top nav bar) within every view.

```
<div class="view">
	<header class="view-head row inverted">
		<a href="#" class="row-item row-item--shrink valign--middle">[...]</a>
		<a href="#" class="row-item valign--middle">Page Title</a>
		<a href="#" class="row-item row-item--shrink valign--middle">[...]</a>
	</header>
</div>
```

## view-head variants
A class of `.view-head` is required for view headers. The following classes
are optional variants (most likely added/removed with javascript to accommodate
hero headers).

Class                      | Description
-------------------------- | ---------------------------
`.view-head--transparent`  | Makes view header transparent; hides `h1` heading
`.view-head--photoOverlay` | Adds text protext gradient (`view-head--trasnparent` required with this class)

*/
.view-head {
	@include flexChild('shrink', false);
	@include color-all($C_red);
	box-sizing: border-box;
	background: $C_white;
	width: 100%;
	z-index: map-get($zindex-map, "main-header");
	height: $view-head-height;
	padding: 0 $space;

	@include atMediaUp(large){
		height: $view-head-height-tablet;
	}
}

//
// view-head variants
//
.view-head--transparent {
	background: transparent;
	border-bottom: none;
	color: $C_textPrimaryInverted;
	position: absolute;
	h1, h2, p { // hide text content in view-head title
		opacity: 0;
	}
}

//
// photoOverlay adds gradient to transparent<commit_msg>use standard text color context in view-head<commit_after>/*doc
---
title: View Base
name: view
category: Views
---
A "view" contains all layout and content for a given screen.
Typically, a document only has a single view. Split views,
where a document contains two view elements are possible (see below).

A class of `.view` is required for view elements; the
following classes are optional variants:

Class                  | Description
---------------------- | ---------------------------
`view--collection`     | Sets the style for views that are primarily "collections"
`view--loading`        | Displays loading overlay

## Basic view (<a class="link followLink" href="pages/full-view.html">Demo</a>)
Basic example of a single view in a document:

```
<div class="view">
	<header class="view-head">
		... view-head ...
	</header>
	<div class="view-body">
		... view-body ...
	</div>
</div>
```
*/
.view {
	@include flexParent('column', false);
	box-sizing: border-box;
	background: white;
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.view--collection,
.view--collection .view-body {
	background-color: $C_collectionBG;
}

/*doc
---
title: Loading state
name: viewLoading
parent: view
---

<a class="link followLink" href="pages/view-loading.html">Demo</a>
Basic example of a single view in a document:

```
<div class="view view--loading">
	<header class="view-head">
		... view-head ...
	</header>
	<div class="view-body">
		... view-body ...
	</div>
</div>
```
*/
.view--loading {
	$_loaderOffset: -18px; // for vertical centering

	&:before {
		@include animate--spin(.5s);
		content: " ";
		position: fixed;
		top:50%;
		left:50%;
		height: $space-3;
		width: $space-3;
		z-index: map-get($zindex-map, 'shade-content');
		border-radius: 999px;
		box-sizing: border-box;
		border: solid 3px rgba(0, 0, 0, 0.2);
		border-top-color: black;
		margin: $_loaderOffset auto auto $_loaderOffset;
	}
	&:after {
		content: " ";
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(255,255,255,0.7);
		z-index: map-get($zindex-map, 'shade');
	}

}


/*doc
---
title: View Body
name: viewBody
parent: view
---
The `view-body` element is our main
content container for the view.

```
<div class="view">
	<div class="view-body">
		... stripes, bounds, etc ...
		... all content ...
	</div>
</div>
```
*/
.view-body {
	@include flexChild('grow', false);
	@include flex-basis(auto);
	box-sizing: border-box;
	height: auto;
}


/*doc
---
title: View Head
name: viewHead
parent: view
---
The `view-head` element is the first child (the
fixed top nav bar) within every view.

```
<div class="view">
	<header class="view-head row inverted">
		<a href="#" class="row-item row-item--shrink valign--middle">[...]</a>
		<a href="#" class="row-item valign--middle">Page Title</a>
		<a href="#" class="row-item row-item--shrink valign--middle">[...]</a>
	</header>
</div>
```

## view-head variants
A class of `.view-head` is required for view headers. The following classes
are optional variants (most likely added/removed with javascript to accommodate
hero headers).

Class                      | Description
-------------------------- | ---------------------------
`.view-head--transparent`  | Makes view header transparent; hides `h1` heading
`.view-head--photoOverlay` | Adds text protext gradient (`view-head--trasnparent` required with this class)

*/
.view-head {
	@include flexChild('shrink', false);
	box-sizing: border-box;
	background: $C_white;
	width: 100%;
	z-index: map-get($zindex-map, "main-header");
	height: $view-head-height;
	padding: 0 $space;

	@include atMediaUp(large){
		height: $view-head-height-tablet;
	}
}

//
// view-head variants
//
.view-head--transparent {
	background: transparent;
	border-bottom: none;
	color: $C_textPrimaryInverted;
	position: absolute;
	h1, h2, p { // hide text content in view-head title
		opacity: 0;
	}
}

//
// photoOverlay adds gradient to transparent
{'fraction_non_alphanumeric': 0.1893424036281179, 'fraction_numerical': 0.011841773746535651, 'mean_word_length': 3.0546475995914197, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1042972', 'n_tokens_mistral': 2855, 'n_tokens_neox': 2632, 'n_words': 783}