evie-jekyll 1.0.0

data/_sass/components/_page.scss

@@ -0,0 +1,74 @@
+.page__header{
+	position:relative;
+	color: $hero-color;
+	box-shadow: $hero-shadow;
+	width: 100%;
+}
+
+.page__header__inner{
+	padding: #{$navbar-height * 1.1} 0 0 0;
+	position: relative;
+	z-index: 3;
+}
+
+.page__header__content{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 32pt 0;
+	overflow: auto;
+	
+	// This div allows normal behaviors for contained elements instead of flexbox aligning them 
+	&__inner{
+		width: 100%;
+		max-width: 66ch;
+		text-align: center;
+	}
+}
+
+/*--- CONTENT STYLING ---*/
+.page__header__title{
+	color: inherit;
+	margin-bottom: 1.25em;
+}
+
+.page__header__text{
+	opacity: 0.85;
+	line-height: 1.7;
+	text-align: left;
+}
+
+.page{
+	padding: 24pt 0;
+}
+
+.page__inner{
+
+	@include desktop{
+		display: flex;
+	}
+}
+
+.page__menu{
+	width: 100%;
+	position: relative;
+
+	@include desktop{
+		display: block;
+		width: 300px;
+		flex-shrink: 0;
+	}
+}
+
+
+.page__main{
+	flex-grow: 1;
+}
+
+.page__main__title{
+	margin-top: 0.75em;
+}
+
+.page__image{
+	max-width:100%;
+}

data/_sass/components/_steps.scss

@@ -0,0 +1,54 @@
+.steps{
+	text-align: center;
+	padding: 16pt 0;
+}
+
+.steps__inner{
+	@include desktop{
+		display: flex;
+		justify-content: space-around;
+	}
+}
+
+.step{
+	padding: 16pt 0;
+	text-align: center;
+	width: 100%;
+	border-top: 1px solid $line;
+	overflow: auto; 
+
+	&:first-child{
+		border-top: none;
+	}
+
+	@include desktop{
+		border-top: none;
+		width: auto;
+	}
+}
+
+.step__media{
+	margin: 16pt 0;
+
+	@include desktop{
+		margin: 32pt 0;
+	}
+}
+
+.step__image{
+	max-height: 100px;
+	max-width: 222px;
+	margin-top: 8pt;
+	@include noDragging;
+
+	@include tablet{
+		max-width:none;
+	}
+}
+
+.step__text{
+	max-width: 36ch;
+	text-align: left;
+	margin-left: auto;
+	margin-right: auto;
+}

data/_sass/components/_verticalMenu.scss

@@ -0,0 +1,91 @@
+/* Vertical menu */
+.vMenu{
+	padding: 0;
+	list-style-type: none;
+	display: flex;
+	max-width: 100%;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	border-bottom: 1px solid $line;
+
+	@include desktop{
+		display: inline-block;
+		border-bottom: none;
+	}
+
+	li{
+		display: inline-block;
+		margin-bottom: 1em;
+		width: 48%;
+		padding-left: 16pt;
+
+		@include desktop{
+			padding-left: 0;
+			display: block;
+			width: auto;
+		}
+	}
+
+	a{
+		display: block;
+
+		@include desktop{
+			display: inline-block;
+			opacity: 0.85;
+
+			&:hover{
+				opacity: 1;
+				color: $primary;
+			}
+
+			&:after {
+				display: block;
+				content: '';
+				border-bottom: 1px solid $primary;  
+				transform: scaleX(0);  
+				transition: transform 250ms ease-in-out;
+			}
+
+			&:hover:after { transform: scaleX(1); }
+		}
+	}
+
+	& > ul{
+		margin-top: -0.65em;
+		padding-left: 1.5em;
+		margin-bottom: 0.75em;
+	}
+
+	& > ul li{
+		opacity: 0.85;
+		font-size: 0.95em;
+		margin-bottom: 0.25em;
+
+		&:before{
+			content: "-";
+			margin-right: 0.5em;
+		}
+	}
+}
+
+.vMenu--active{
+	color: $primary;
+	
+	&:before{
+		content: "\2014";
+		margin-right: 0.333em;
+	}
+
+	@include desktop{
+		opacity: 1;
+		color: $primary;
+
+		&:after {
+			display: block;
+			content: '';
+			border-bottom: 1px solid $primary;  
+			transform: none;  
+			transition: none;
+		}
+	}
+}

data/_sass/elements/_buttons.scss

@@ -0,0 +1,85 @@
+button, .button{
+	display: inline-block;
+	padding: 6pt 20pt;
+	line-height: $line-height;
+	border: 1px solid $primary;
+	color: $primary;
+	font-weight: $normal;
+	transition: 0.7s;
+	white-space: nowrap;
+	cursor: pointer;
+	background-color: transparent;
+	border-radius: $radius;
+	margin-bottom: 1.3em;
+	transition: 0.7s;
+	text-align: center;
+	text-decoration: none;
+
+	&:hover,&:focus{
+		outline: 0;
+	}
+
+	@include desktop{
+		&:hover{
+			border-color: $primary-dark;
+			color: $primary-dark;
+		}
+	}
+}
+
+.button__primary{
+	background-color: $primary;
+	border-color: $primary;
+	color: #fff;
+
+	@include desktop{
+		&:hover{
+			background-color: $primary-dark;
+			border-color: $primary-dark;
+			color: #fff;
+		}
+	}
+}
+
+.button__accent{
+	background-color: $accent;
+	border-color: $accent;
+	color: #fff;
+
+	@include desktop{
+		&:hover{
+			background-color: darken($accent,4%);
+			border-color: darken($accent,4%);
+			color: #fff;
+		}
+	}
+}
+
+.button__delete{
+	background-color: $error;
+	border-color: $error;
+	color: #fff;
+
+	@include desktop{
+		&:hover{
+			background-color: darken($error,4%);
+			border-color: darken($error,4%);
+			color: #fff;
+		}
+	}
+}
+
+.button:disabled{
+	opacity: 0.25;
+	cursor: default;
+	pointer-events:none;
+}
+
+// Utility classes
+.button--fixed{
+	width: 160px;
+}
+
+.button--fixed2{
+	width: 220px;
+}

data/_sass/elements/_forms.scss

@@ -0,0 +1,281 @@
+form{
+	margin-bottom: 1.5em;
+	
+	.double{
+		display: flex;
+		justify-content: space-between;
+
+		.half {
+			max-width: 48%;
+		}
+	}
+}
+
+.form{
+	margin-left: auto;
+	margin-right: auto;
+}
+
+label{
+	margin-bottom: 2pt;
+	display: block;
+	text-align: left;
+	color: $text;
+	font-size: 0.9em;
+	padding-left: 10pt;
+}
+
+// Plain inputs and textarea
+input {
+	&[type="email"],
+	&[type="number"],
+	&[type="search"],
+	&[type="text"],
+	&[type="tel"],
+	&[type="url"],
+	&[type="password"], {
+		appearance: none;
+		border: 1px solid $line;
+		width: 100%;
+		transition: 0.7s;
+		color: $text-dark;
+		font-family: $font;
+		font-weight: $normal;
+		padding: 10pt 20pt;
+		border-radius: $radius;
+		background-color: $background-alt;
+		margin-bottom: 1.4em;
+		display: block;
+
+		&:focus{
+			border-color: transparentize($primary,0.5);
+			outline: 0;
+			background-color: $background;
+		}
+	}
+}
+
+textarea{
+	appearance: none;
+	border: 1px solid $line;
+	width: 100%;
+	transition: 0.7s;
+	color: $text-dark;
+	font-family: $font;
+	font-weight: $normal;
+	padding: 12pt 24pt;
+	border-radius: $radius;
+	background-color: $background-alt;
+	margin-bottom: 1.4em;
+	display: block;
+	resize: none;
+	min-height: 8em;
+	outline:0;
+
+	&:focus{
+		border-color: transparentize($primary,0.5);
+		outline: 0;
+		background-color: $background;
+	}
+}
+
+// Select
+select{
+	border: 1px solid $line;
+	width: 100%;
+	transition: 0.7s;
+	color: $text-dark;
+	font-family: $font;
+	font-weight: $normal;
+	padding: 10pt 20pt;
+	margin-bottom: 1.4em;
+	display: block;
+	border-radius: $radius;
+	background-color: $background-alt;
+	outline: 0;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+
+	// Appearance for IE 10/11
+	&::-ms-expand { 
+    	display: none; /* hide the default arrow in ie10 and ie11 */
+	}
+
+	// Caret down
+	background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-caret-down fa-w-10 fa-3x"><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" class=""></path></svg>');
+	background-repeat: no-repeat;
+	background-position: 95% center;
+	background-size: 0.8em;
+}
+
+
+// Placeholders
+::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+	font-size:  .9em;
+	opacity: .65;
+	color: $text;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+	font-size:  .9em;
+	opacity: .65;
+	color: $text;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+	font-size:  .9em;
+	opacity: .65;
+	color: $text;
+}
+:-ms-input-placeholder { /* Internet Explorer 10-11 + lt if placeholders.js */
+	font-size:  .9em;
+	opacity: .65;
+	color: $text;
+}
+
+// Radio => Thanks to Materialize CSS => http://materializecss.com/forms.html
+/* Remove default Radio Buttons */
+[type="radio"]:not(:checked),
+[type="radio"]:checked {
+	position: absolute;
+	left: -9999px;
+	visibility: hidden;
+	transition: .28s ease;
+}
+
+// Labels
+[type="radio"]:not(:checked) + label,
+[type="radio"]:checked + label {
+	position: relative;
+	padding-left: 2em;
+	cursor: pointer;
+	display: inline-block;
+	height: 1.7em;
+	line-height: 1.7em;
+	transition: .28s ease;
+	-khtml-user-select: none;
+	user-select: none;
+}
+
+[type="radio"] + label:before,
+[type="radio"] + label:after {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0;
+	margin: 3px;
+	width: 1.2em;
+	height: 1.2em;
+	z-index: 0;
+	transition: .28s ease;
+}
+
+/* Unchecked styles */
+[type="radio"]:not(:checked) + label:before {
+	transition: .28s ease;
+	border-radius: 50%;
+	border: 1px solid $text;
+}
+[type="radio"]:not(:checked) + label:after {
+	transition: .28s ease;
+	border-radius: 50%;
+	border: 1px solid $text;
+	z-index: -1;
+	transform: scale(0);
+}
+
+/* Checked styles */
+[type="radio"]:checked + label:before {
+	border-radius: 50%;
+	border: 1px solid transparent;
+}
+[type="radio"]:checked + label:after {
+	border-radius: 50%;
+	border: 1px solid $primary;
+	background-color: $primary;
+	z-index: 0;
+	transform: scale(1.02);
+}
+
+/* Disabled style */
+[type="radio"]:disabled:not(:checked) + label:before,
+[type="radio"]:disabled:checked + label:before {
+	background-color: transparent;
+	border-color: $line;
+	cursor: default;
+}
+[type="radio"]:disabled + label {
+	color: $line;
+	cursor: default;
+}
+[type="radio"]:disabled:not(:checked) + label:before {
+	border-color: $line;
+}
+[type="radio"]:disabled:checked + label:after {
+	background-color: $line;
+	border-color: $text;
+}
+
+// Checkbox
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+	position: absolute;
+	left: -9999px;
+	visibility: hidden;
+}
+
+[type="checkbox"] {
+
+  // Text Label Style
+	+ label {
+		position: relative;
+		padding-left: 2em;
+		cursor: pointer;
+		display: inline-block;
+		height: 25px;
+		line-height: 25px;
+		font-size: 0.9em;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-khtml-user-select: none; 
+		-ms-user-select: none;
+	}
+
+  /* checkbox aspect */
+	+ label:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 3px;
+		width: 15px;
+		height: 15px;
+		z-index: 0;
+		border: 1px solid $text;
+		border-radius: 1px;
+		margin-top: 4px;
+		transition: .2s;
+	}
+
+	&:not(:checked):disabled + label:before {
+		border: none;
+		background-color: $line;
+	}
+}
+
+[type="checkbox"]:checked {
+	+ label:before {
+		top: -2px;
+		left: -2px;
+		width: 10px; height: 18px;
+		border-top: 2px solid transparent;
+		border-left: 2px solid transparent;
+		border-right: 2px solid $success;
+		border-bottom: 2px solid $success;
+		transform: rotate(40deg);
+		backface-visibility: hidden;
+		transform-origin: 100% 100%;
+	}
+
+	&:disabled + label:before {
+		border-right: 2px solid $line;
+		border-bottom: 2px solid $line;
+	}
+}