jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/base/navigation/_navigation-smart.scss

@@ -0,0 +1,125 @@
+/*------------------------------------
+  Navigation Behavior (Smart)
+------------------------------------*/
+
+.u-smart-nav {
+	position: fixed;
+	z-index: 2;
+
+	opacity: 0;
+	visibility: hidden;
+
+	transform: scale3d(0.2,0.2,0.2);
+
+	.navbar {
+		position: absolute;
+
+		@include px-to-rem(width,300px);
+
+		opacity: 0;
+		visibility: hidden;
+
+		.dropdown {
+			z-index: 1;
+		}
+
+		.dropdown-menu {
+			position: relative;
+			width: 100%;
+		}
+
+		li {
+			transform: translate3d(30px,0,0);
+
+			transition: all .3s ease;
+		}
+
+		@for $i from 1 to 20 {
+			li:nth-child(#{$i}) {
+				$delay: ($i + 1) * 30;
+				transition-delay: #{$delay}ms;
+			}
+		}
+	}
+	&__toggler {
+		position: relative;
+		z-index: 1;
+	}
+	&--opened {
+		.navbar {
+			opacity: 1;
+			visibility: visible;
+
+			transform: scale3d(1,1,1) !important;
+
+			li {
+				transform: translate3d(0,0,0);
+			}
+		}
+	}
+	&--shown {
+		opacity: 1;
+		visibility: visible;
+
+		transform: scale3d(1,1,1);
+	}
+	&--bottom-right {
+		@include px-to-rem(right,10px);
+		@include px-to-rem(bottom,10px);
+
+		.navbar {
+			bottom: 0;
+			right: 0;
+
+			transform: scale3d(0.1,0.1,0.1);
+			transform-origin: 100% 100%;
+
+			@include px-to-rem(padding-right,80px);
+		}
+	}
+	&--bottom-left {
+
+		@include px-to-rem(left,10px);
+		@include px-to-rem(bottom,10px);
+
+		.navbar {
+			text-align: right;
+			bottom: 0;
+			left: 0;
+
+			transform: scale3d(0.1,0.1,0.1);
+			transform-origin: 0% 100%;
+
+			@include px-to-rem(padding-left,80px);
+		}
+	}
+	&--top-left {
+		@include px-to-rem(left,10px);
+		@include px-to-rem(top,10px);
+
+		.navbar {
+			text-align: right;
+			top: 0;
+			left: 0;
+
+			transform: scale3d(0.1,0.1,0.1);
+			transform-origin: 0% 0%;
+
+			@include px-to-rem(padding-left,80px);
+		}
+	}
+	&--top-right {
+		@include px-to-rem(right,10px);
+		@include px-to-rem(top,10px);
+
+		.navbar {
+			top: 0;
+			right: 0;
+
+			transform: scale3d(0.1,0.1,0.1);
+			transform-origin: 100% 0%;
+
+			@include px-to-rem(padding-right,80px);
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v1.scss

@@ -0,0 +1,65 @@
+/*------------------------------------
+  Navigation Style v1
+------------------------------------*/
+
+.navbar .u-main-nav-v1 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+
+		@include px-to-rem(padding, 11px 30px);
+		@include px-to-rem(border-radius, 22px);
+	}
+
+	.nav-item {
+
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				@include px-to-rem(padding-right, 45px);
+
+				&::after {
+					@include px-to-rem(right, 25px);
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			color: $g-color-white;
+			background-color: $g-color-primary;
+		}
+	}
+}
+
+@media all and (max-width: #{$g-xl}-1) {
+
+	.navbar .u-main-nav-v1 {
+		.nav-link {
+			@include px-to-rem(padding, 9px 20px);
+		}
+
+		.nav-item {
+			&.hs-has-sub-menu,
+			&.hs-has-mega-menu,
+			&.dropdown {
+				> a {
+					@include px-to-rem(padding-right, 35px);
+
+					&::after {
+						@include px-to-rem(right, 15px);
+					}
+				}
+			}
+		}
+	}
+
+}

data/_sass/unify/base/navigation/_navigation-v2.scss

@@ -0,0 +1,65 @@
+/*------------------------------------
+  Navigation Style v2
+------------------------------------*/
+
+.navbar .u-main-nav-v2 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+
+		@include px-to-rem(padding, 9px 30px);
+		@include px-to-rem(border-radius, 22px);
+		border: 2px solid transparent;
+	}
+
+	.nav-item {
+
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				@include px-to-rem(padding-right, 45px);
+
+				&::after {
+					@include px-to-rem(right, 25px);
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			color: $g-color-gray-dark-v2;
+			border-color: $g-color-primary;
+			background-color: transparent;
+		}
+	}
+}
+
+@media all and (max-width: #{$g-xl}-1) {
+	.navbar .u-main-nav-v2 {
+		.nav-link {
+			@include px-to-rem(padding, 7px 20px);
+		}
+
+		.nav-item {
+			&.hs-has-sub-menu,
+			&.hs-has-mega-menu,
+			&.dropdown {
+				> a {
+					@include px-to-rem(padding-right, 35px);
+
+					&::after {
+						@include px-to-rem(right, 15px);
+					}
+				}
+			}
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v3.scss

@@ -0,0 +1,60 @@
+/*------------------------------------
+  Navigation Style v3
+------------------------------------*/
+
+.navbar .u-main-nav-v3 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+
+		@include px-to-rem(padding, 40px 36px 36px);
+		border-bottom: 4px solid transparent;
+	}
+
+	.nav-item {
+
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				&::after {
+					position: static;
+
+					display: inline-block;
+					vertical-align: middle;
+					@include px-to-rem(margin-left, 10px);
+
+					transform: none;
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			border-color: $g-color-primary;
+		}
+	}
+}
+
+@media all and (max-width: #{$g-xl}-1) {
+	.navbar .u-main-nav-v3 {
+		.nav-link {
+			@include px-to-rem(padding, 30px 25px);
+		}
+	}
+}
+
+@media all and (max-width: #{$g-lg}-1) {
+	.navbar .u-main-nav-v3 {
+		.nav-link {
+			@include px-to-rem(padding, 10px 20px);
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v4.scss

@@ -0,0 +1,59 @@
+/*------------------------------------
+  Navigation Style v4
+------------------------------------*/
+
+.navbar .u-main-nav-v4 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+
+		@include px-to-rem(padding, 36px 36px 40px);
+		border-top: 4px solid transparent;
+	}
+
+	.nav-item {
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				&::after {
+					position: static;
+
+					display: inline-block;
+					vertical-align: middle;
+					@include px-to-rem(margin-left, 10px);
+
+					transform: none;
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			border-color: $g-color-primary;
+		}
+	}
+}
+
+@media all and (max-width: #{$g-xl}-1) {
+	.navbar .u-main-nav-v4 {
+		.nav-link {
+			@include px-to-rem(padding, 30px 25px);
+		}
+	}
+}
+
+@media all and (max-width: #{$g-lg}-1) {
+	.navbar .u-main-nav-v4 {
+		.nav-link {
+			@include px-to-rem(padding, 10px 20px);
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v5.scss

@@ -0,0 +1,40 @@
+/*------------------------------------
+  Navigation Style v5
+------------------------------------*/
+
+.navbar .u-main-nav-v5 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+
+		@include px-to-rem(padding, 4px 0);
+		border-bottom: 2px solid transparent;
+	}
+
+	.nav-item {
+
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				@include px-to-rem(padding-right, 20px);
+
+				&::after {
+					right: 0;
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			border-color: $g-color-primary;
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v6.scss

@@ -0,0 +1,63 @@
+/*------------------------------------
+  Navigation Style v6
+------------------------------------*/
+
+.navbar .u-main-nav-v6 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+		height: 100%;
+		@include px-to-rem(padding, 40px 38px);
+	}
+
+	.nav-item {
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				@include px-to-rem(padding-right, 38px);
+
+				&::after {
+					position: static;
+
+					display: inline-block;
+					vertical-align: middle;
+					@include px-to-rem(margin-left, 10px);
+
+					transform: none;
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			color: $g-color-white;
+			background-color: $g-color-primary;
+		}
+	}
+}
+
+@media all and (max-width: #{$g-xl}-1) {
+	.navbar .u-main-nav-v6 {
+		.nav-link {
+			@include px-to-rem(padding, 30px 20px);
+		}
+
+		.nav-item {
+			&.hs-has-sub-menu,
+			&.hs-has-mega-menu,
+			&.dropdown {
+				> a {
+					@include px-to-rem(padding-right, 20px);
+				}
+			}
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v7.scss

@@ -0,0 +1,61 @@
+/*------------------------------------
+  Navigation Style v7
+------------------------------------*/
+
+.navbar .u-main-nav-v7 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+
+		@include px-to-rem(padding, 10px 30px);
+		border: 2px solid transparent;
+	}
+
+	.nav-item {
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				@include px-to-rem(padding-right, 45px);
+
+				&::after {
+					@include px-to-rem(right, 25px);
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			border-color: $g-color-primary;
+		}
+	}
+}
+
+@media all and (max-width: #{$g-xl}-1) {
+	.navbar .u-main-nav-v7 {
+		.nav-link {
+			@include px-to-rem(padding, 9px 20px);
+		}
+
+		.nav-item {
+			&.hs-has-sub-menu,
+			&.hs-has-mega-menu,
+			&.dropdown {
+				> a {
+					@include px-to-rem(padding-right, 30px);
+
+					&::after {
+						@include px-to-rem(right, 15px);
+					}
+				}
+			}
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v8.scss

@@ -0,0 +1,61 @@
+/*------------------------------------
+  Navigation Style v8
+------------------------------------*/
+
+.navbar .u-main-nav-v8 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v2;
+
+		@include px-to-rem(padding, 11px 30px);
+	}
+
+	.nav-item {
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu,
+		&.dropdown {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				@include px-to-rem(padding-right, 45px);
+
+				&::after {
+					@include px-to-rem(right, 25px);
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		&.show > .nav-link,
+		&.hs-sub-menu-opened > .nav-link,
+		.nav-link:focus {
+			color: $g-color-white;
+			background-color: $g-color-primary;
+		}
+	}
+}
+
+@media all and (max-width: #{$g-xl}-1) {
+	.navbar .u-main-nav-v8 {
+		.nav-link {
+			@include px-to-rem(padding, 9px 20px);
+		}
+
+		.nav-item {
+			&.hs-has-sub-menu,
+			&.hs-has-mega-menu,
+			&.dropdown {
+				> a {
+					@include px-to-rem(padding-right, 30px);
+
+					&::after {
+						@include px-to-rem(right, 15px);
+					}
+				}
+			}
+		}
+	}
+}

data/_sass/unify/base/navigation/_navigation-v9.scss

@@ -0,0 +1,43 @@
+/*------------------------------------
+  Navigation Style v9
+------------------------------------*/
+
+.navbar .u-main-nav-v9 {
+	.nav-link {
+		@extend %u-main-nav-base-link;
+
+		color: $g-color-gray-dark-v4;
+
+		@include px-to-rem(padding, 0 20px 0 0);
+	}
+
+	.nav-item {
+		> a {
+			@include px-to-rem(padding, 20px 0);
+		}
+
+		&.hs-has-sub-menu,
+		&.hs-has-mega-menu {
+			@extend %u-main-nav-has-sub-menu;
+
+			> a {
+				&::after {
+					@include px-to-rem(font-size, 18px);
+					
+					right: 0;
+				}
+			}
+		}
+
+		&.active > .nav-link,
+		&:hover > .nav-link,
+		&:focus > .nav-link,
+		.nav-link:focus {
+			color: $g-color-black;
+
+			&::after {
+				color: $g-color-primary;
+			}
+		}
+	}
+}