vbax-template_go 0.1.0

data/lib/vbax/sass/template_go/components/_swiper.scss

@@ -0,0 +1,239 @@
+// Swiper
+//
+//
+//
+
+.swiper-container,
+.gallery-container {
+	.swiper-slide {
+		height: auto;
+		overflow: hidden;
+	}
+
+	.container,
+	.container-fluid {
+		height: 100%;
+
+		> .row {
+			height: 100%;
+			padding-top: $section-padding;
+			padding-bottom: $section-padding;
+		}
+	}
+}
+
+.swiper-wrapper {
+	z-index: 20;
+}
+
+
+// Swiper instances that doesnt fit to the viewport
+.container,
+.container-fluid {
+	
+	.swiper-container,
+	.gallery-container {
+		.swiper-slide {
+			@extend %boxed;
+			@include border-radius;
+		}
+	}
+}
+
+
+// swiper footer
+.swiper-footer {
+	@include translate(0,50%);
+	width: 100%;
+	position: absolute;
+	bottom: ($section-padding / 2);
+	z-index: 40;
+
+	.container,
+	.container-fluid {
+		> .row {
+			padding: 0;
+		}
+	}
+}
+
+
+//
+// gallery
+//
+.gallery {
+
+	// bigger bottom padding for gallery thumbs
+	.container,
+	.container-fluid {
+		> .row {
+			padding-bottom: ($section-padding * 1.5);
+		}
+	}
+}
+
+.gallery-thumbs {
+	border-top: $border-width solid $text-white-border;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	z-index: 25;
+
+	.swiper-slide {
+		@include transition;
+		padding: 2.5rem 0;
+		text-align: center;
+		cursor: pointer;
+
+		h5 {
+			@extend %text-shadow;
+			font-size: $font-size-base;
+			letter-spacing: $letter-spacing-sm;
+			color: $white;
+			line-height: 1rem;
+			font-weight: 400;
+		}
+
+		&:hover {
+			background: rgba($white, .1);
+		}
+	}
+
+	.swiper-slide-active {
+		margin-top: -$border-width;
+		border-top: $border-width solid $white;
+	}
+}
+
+
+
+//
+// carousel
+//
+.swiper-container-carousel {
+	overflow: visible;
+}
+
+
+// Pagination
+.swiper-container-horizontal {
+	.swiper-pagination-bullets {
+		@include translate(-50%,50%);
+		width: auto;
+		bottom: ($section-padding / 2);
+		left: 50%;
+		z-index: 25;
+		
+		.swiper-pagination-bullet {
+			@include selection(none);
+			position: relative;
+			float: left;
+			width: 2rem;
+			height: 2rem;
+			margin: 0;
+			opacity: 1;
+			background: transparent;
+			@include transition();
+			outline: none;
+
+			&::after {
+				@include transition();
+				position: absolute;
+				content: "";
+				display: block;
+				top: 50%;
+				left: 50%;
+				width: 8px;
+				height: 8px;
+				margin: -4px 0 0 -4px;
+				border-radius: 50%;
+				background: rgba($white, .2);
+			}
+
+			&:hover {
+				&::after {
+					background: rgba($white, .4);
+				} 
+			}
+
+			&.swiper-pagination-bullet-active {
+				&::after {
+					background: $white;
+					@include scale(1.5);
+					@include shadow();
+				} 
+			}
+		}
+	}
+
+	.swiper-pagination-vertical {
+		@include translate(0,50%);
+		right: ($grid-gutter-width / 2 );
+		bottom: 50%;
+		left: auto;
+		width: 2rem;
+	}
+}
+
+
+// Navigation
+.swiper-button-prev,
+.swiper-button-next {
+	@include transition;
+	float: left;
+	position: relative;
+	display: block;
+    width: 3.75rem;
+    height: 3.75rem;
+    margin-top: ($grid-gutter-width / 2);
+    text-align: center;
+    background-image: none!important;
+    border: $border-width solid transparent;
+    z-index: 20;
+    outline: none;
+
+    &::before {
+    	display: block;
+    	position: absolute;
+    	top: 0;
+    	right: 0;
+    	bottom: 0;
+    	left: 0;
+    	color: $black;
+    	line-height: 3.75rem;
+    	font-family: 'icomoon';
+    	font-size: 1.5rem;
+    }
+
+    &:hover {
+    	border-color: $border-color;
+    	
+    	&::before {
+    		color: $black;
+    	}
+    }
+}
+
+.swiper-button-prev {
+	left: 0;
+	&::before { content: "\ebfb" }
+}
+
+.swiper-button-next {
+	right: 0;
+	&::before { content: "\ebfc" }
+}
+
+
+
+
+
+// Responsive
+//
+//
+@include media-breakpoint-down(md) {
+	.swiper-button-prev,
+	.swiper-button-next {
+		display: none;
+	}
+}

data/lib/vbax/sass/template_go/components/_syntax.scss

@@ -0,0 +1,173 @@
+/* PrismJS 1.14.0
+http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: $font-family-monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+	&::-moz-selection,
+	&::selection {
+		color: $white;
+		background: $primary;
+	}
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	@include border-radius;
+	margin-bottom: 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	// background: $light;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: $gray-300;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: $gray-300;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+
+
+// text-whiteed Colors
+//
+//
+.text-white {
+	.token.punctuation {
+		color: rgba($white, .55);
+	}
+
+	.token.property,
+	.token.tag,
+	.token.boolean,
+	.token.number,
+	.token.constant,
+	.token.symbol,
+	.token.deleted {
+		color: rgba($white, .55);
+	}
+
+	code[class*="language-"],
+	pre[class*="language-"] {
+		color: $white;
+	}
+
+
+	.token.selector,
+	.token.attr-name,
+	.token.string,
+	.token.char,
+	.token.builtin,
+	.token.inserted {
+		color: $orange;
+	}
+
+	.token.atrule,
+	.token.attr-value,
+	.token.keyword {
+		color: $yellow;
+	}
+}

data/lib/vbax/sass/template_go/components/_tables.scss

@@ -0,0 +1,140 @@
+//
+// Tables
+//
+
+.table {
+	table-layout: fixed;
+
+	th {
+		font-weight: $font-weight-normal;
+		color: $body-color;
+	}
+
+	td {
+		color: $black;
+	}
+
+	th,
+	td {
+		padding: $table-cell-padding;
+
+		&.highlight {
+			position: relative;
+			color: $primary;
+
+			&:before {
+				content: "";
+				position: absolute;
+				left: 0;
+				top: 0;
+				height: 100%;
+				width: (2 * $border-width);
+				background: $primary;
+			}
+		}
+	}
+
+	thead th {
+		border-bottom-width: $table-border-width;
+	}
+
+}
+
+
+//
+// Lined table
+//
+
+.table-lined {
+
+	th,
+	td {
+		border-top: 0;
+	}
+
+	thead th {
+		border-bottom: 0;
+		font-size: $font-size-sm;
+		text-transform: uppercase;
+		letter-spacing: $letter-spacing;
+	}
+
+	tbody tr {
+		&:nth-child(2n+1) {
+			> * {
+				background: gray('200');
+
+				&:first-child {
+					border-top-left-radius: $border-radius;
+					border-bottom-left-radius: $border-radius;
+				}
+
+				&:last-child {
+					border-top-right-radius: $border-radius;
+					border-bottom-right-radius: $border-radius;
+				}
+			}
+		}
+	}
+}
+
+
+
+
+// text-whiteed
+// 
+// styles for colored/image background
+
+%table-text-whiteed {
+	border-color: $text-white-border;
+
+	th {
+		color: $text-white-secondary;
+	}
+
+	td {
+		color: $text-white-primary;
+	}
+
+	th,
+	td {
+		border-color: $text-white-border;
+
+		&.highlight {
+			color: $text-white-primary;
+
+			&:before {
+				background: $text-white-primary;
+			}
+		}
+	}
+
+	&[class*="lined"] {
+		tbody tr {
+			&:nth-child(2n+1) {
+				> * {
+					background: rgba($black,.2);
+				}
+			}
+		}
+
+		tbody {
+			font-size: $font-size-lg;
+
+			th {
+				color: $text-white-primary;
+			}
+		}
+	}
+
+}
+
+
+// Responsive
+// 
+// 
+@include media-breakpoint-down(md) {
+	.table {
+		table-layout: auto;
+	}
+}