Загрузить файлы 'assets/sass/components'

assets/sass/components/_split.scss

@@ -0,0 +1,91 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Split */
+
+	.split {
+		@include vendor('display', 'flex');
+
+		> * {
+			width: calc(50% - 2.5em);
+		}
+
+		> :nth-child(2n - 1) {
+			padding-right: 2.5em;
+			border-right: solid 1px _palette(border);
+		}
+
+		> :nth-child(2n) {
+			padding-left: 2.5em;
+		}
+
+		&.style1 {
+			> :nth-child(2n - 1) {
+				width: calc(66.66666% - 2.5em);
+			}
+
+			> :nth-child(2n) {
+				width: calc(33.33333% - 2.5em);
+			}
+		}
+
+		@include breakpoint(xlarge) {
+			> * {
+				width: calc(50% - 2em);
+			}
+
+			> :nth-child(2n - 1) {
+				padding-right: 2em;
+			}
+
+			> :nth-child(2n) {
+				padding-left: 2em;
+			}
+
+			&.style1 {
+				> :nth-child(2n - 1) {
+					width: calc(66.66666% - 2em);
+				}
+
+				> :nth-child(2n) {
+					width: calc(33.33333% - 2em);
+				}
+			}
+		}
+
+		@include breakpoint(medium) {
+			display: block;
+
+			> * {
+				border-top: solid 1px _palette(border);
+				margin: 4em 0 0 0;
+				padding: 4em 0 0 0;
+				width: 100% !important;
+			}
+
+			> :nth-child(2n - 1) {
+				border-right: 0;
+				padding-right: 0;
+			}
+
+			> :nth-child(2n) {
+				padding-left: 0;
+			}
+
+			> :first-child {
+				border-top: 0;
+				margin-top: 0;
+				padding-top: 0;
+			}
+		}
+
+		@include breakpoint(small) {
+			> * {
+				margin: 3em 0 0 0;
+				padding: 3em 0 0 0;
+			}
+		}
+	}

assets/sass/components/_spotlights.scss

@@ -0,0 +1,131 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Spotlights */
+
+	.spotlights {
+		> section {
+			@include vendor('display', 'flex');
+			@include vendor('flex-direction', 'row');
+			min-height: 22.5em;
+
+			body.is-ie & {
+				min-height: 0;
+			}
+
+			> .image {
+				background-position: center center;
+				background-size: cover;
+				border-radius: 0;
+				display: block;
+				position: relative;
+				width: 25em;
+
+				img {
+					border-radius: 0;
+					display: block;
+				}
+
+				&:before {
+					@include vendor('transition', 'opacity #{_duration(activation)} ease');
+					background: transparentize(_palette(bg), 0.1);
+					content: '';
+					display: block;
+					height: 100%;
+					left: 0;
+					opacity: 0;
+					position: absolute;
+					top: 0;
+					width: 100%;
+				}
+			}
+
+			> .content {
+				@include padding(4em, 5em);
+				@include vendor('display', 'flex');
+				@include vendor('flex-direction', 'column');
+				@include vendor('justify-content', 'center');
+				width: #{_size(inner-width) - 25em};
+				-ms-flex: 1;
+
+				> .inner {
+					@include vendor('transform', 'translateX(0) translateY(0)');
+					@include vendor('transition', (
+						'opacity #{_duration(activation)} ease',
+						'transform #{_duration(activation)} ease'
+					));
+					opacity: 1;
+				}
+			}
+
+			&:nth-child(1) {
+			}
+
+			&:nth-child(2) {
+				background-color: rgba(0,0,0,0.05);
+			}
+
+			&:nth-child(3) {
+				background-color: rgba(0,0,0,0.1);
+			}
+
+			&.inactive,
+			body.is-loading & {
+				> .image {
+					&:before {
+						opacity: 1;
+					}
+				}
+
+				> .content {
+					> .inner {
+						@include vendor('transform', 'translateX(-1em)');
+						opacity: 0;
+					}
+				}
+			}
+
+			@include breakpoint(xlarge) {
+				> .content {
+					@include padding(4em, 4em);
+				}
+			}
+
+			@include breakpoint(medium) {
+				display: block;
+
+				> .image {
+					width: 100%;
+					height: 50vh;
+				}
+
+				> .content {
+					width: 100%;
+				}
+
+				&.inactive,
+				body.is-loading & {
+					> .content {
+						> .inner {
+							@include vendor('transform', 'translateY(1em)');
+						}
+					}
+				}
+			}
+
+			@include breakpoint(small) {
+				> .image {
+					height: 50vh;
+					min-height: 15em;
+				}
+
+				> .content {
+					@include padding(3em, 2em);
+				}
+			}
+		}
+	}
+

assets/sass/components/_table.scss

@@ -0,0 +1,81 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		overflow-x: auto;
+	}
+
+	table {
+		margin: 0 0 _size(element-margin) 0;
+		width: 100%;
+
+		tbody {
+			tr {
+				border: solid _size(border-width) _palette(border);
+				border-left: 0;
+				border-right: 0;
+
+				&:nth-child(2n + 1) {
+					background-color: _palette(border-bg);
+				}
+			}
+		}
+
+		td {
+			padding: 0.75em 0.75em;
+		}
+
+		th {
+			color: _palette(fg-bold);
+			font-size: 1em;
+			font-weight: _font(weight-bold);
+			padding: 0 0.75em 0.75em 0.75em;
+			text-align: left;
+		}
+
+		thead {
+			border-bottom: solid (_size(border-width) * 2) _palette(border);
+		}
+
+		tfoot {
+			border-top: solid (_size(border-width) * 2) _palette(border);
+		}
+
+		&.alt {
+			border-collapse: separate;
+
+			tbody {
+				tr {
+					td {
+						border: solid _size(border-width) _palette(border);
+						border-left-width: 0;
+						border-top-width: 0;
+
+						&:first-child {
+							border-left-width: _size(border-width);
+						}
+					}
+
+					&:first-child {
+						td {
+							border-top-width: _size(border-width);
+						}
+					}
+				}
+			}
+
+			thead {
+				border-bottom: 0;
+			}
+
+			tfoot {
+				border-top: 0;
+			}
+		}
+	}

assets/sass/components/_wrapper.scss

@@ -0,0 +1,139 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+	.wrapper {
+		position: relative;
+
+		> .inner {
+			@include padding(5em, 5em);
+			max-width: 100%;
+			width: _size(inner-width);
+
+			@include breakpoint(xlarge) {
+				@include padding(4em, 4em);
+			}
+
+			@include breakpoint(large) {
+				width: 100%;
+			}
+
+			@include breakpoint(small) {
+				@include padding(3em, 2em);
+			}
+		}
+
+		&.alt {
+			background-color: _palette(bg-alt);
+		}
+
+		&.style1 {
+			background-color: _palette(accent1);
+		}
+
+		&.style1-alt {
+			background-color: _palette(accent1-alt);
+		}
+
+		&.style2 {
+			background-color: _palette(accent2);
+		}
+
+		&.style2-alt {
+			background-color: _palette(accent2-alt);
+		}
+
+		&.style3 {
+			background-color: _palette(accent3);
+		}
+
+		&.style3-alt {
+			background-color: _palette(accent3-alt);
+		}
+
+		&.fullscreen {
+			@include vendor('display', 'flex');
+			@include vendor('flex-direction', 'column');
+			@include vendor('justify-content', 'center');
+			min-height: 100vh;
+
+			body.is-ie & {
+				height: 100vh;
+			}
+
+			@include breakpoint(large) {
+				min-height: calc(100vh - 2.5em);
+
+				body.is-ie & {
+					height: calc(100vh - 2.5em);
+				}
+			}
+
+			@include breakpoint(small) {
+				padding: 2em 0;
+				min-height: 0;
+
+				body.is-ie & {
+					height: auto;
+				}
+			}
+		}
+
+		&.fade-up {
+			> .inner {
+				@include vendor('transform', 'translateY(0)');
+				@include vendor('transition', (
+					'opacity #{_duration(activation)} ease',
+					'transform #{_duration(activation)} ease'
+				));
+				opacity: 1.0;
+			}
+
+			&.inactive,
+			body.is-loading & {
+				> .inner {
+					opacity: 0;
+					@include vendor('transform', 'translateY(1em)');
+				}
+			}
+		}
+
+		&.fade-down {
+			> .inner {
+				@include vendor('transform', 'translateY(0)');
+				@include vendor('transition', (
+					'opacity #{_duration(activation)} ease',
+					'transform #{_duration(activation)} ease'
+				));
+				opacity: 1.0;
+			}
+
+			&.inactive,
+			body.is-loading & {
+				> .inner {
+					opacity: 0;
+					@include vendor('transform', 'translateY(-1em)');
+				}
+			}
+		}
+
+		&.fade {
+			> .inner {
+				@include vendor('transition', (
+					'opacity #{_duration(activation)} ease'
+				));
+				opacity: 1.0;
+			}
+
+			&.inactive,
+			body.is-loading & {
+				> .inner {
+					opacity: 0;
+				}
+			}
+		}
+	}