jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/base/icons/_icon-v5.scss

@@ -0,0 +1,171 @@
+/*------------------------------------
+  Icon-v5
+------------------------------------*/
+@import "icons-sizes-vn";
+
+.u-icon-v5 {
+  @extend %u-icon-size;
+  position: relative;
+
+  body & {
+    background: transparent !important; // increasing the specificity
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -.45em 0 0 -.4em;
+    width: .8em;
+    height: .8em;
+    background-color: $g-color-gray-light-v4;
+    border-radius: 50%;
+    opacity: .7;
+  }
+
+  & i {
+    position: relative;
+    z-index: 2;
+  }
+
+
+
+  //
+  // Sizes
+  //
+
+  &.u-icon-size--xs {
+    @extend %u-icon-size--xs;
+  }
+  &.u-icon-size--sm {
+    @extend %u-icon-size--sm;
+  }
+  &.u-icon-size--lg {
+    @extend %u-icon-size--lg;
+  }
+  &.u-icon-size--xl {
+    @extend %u-icon-size--xl;
+  }
+  &.u-icon-size--2xl {
+    @extend %u-icon-size--2xl;
+  }
+  &.u-icon-size--3xl {
+    @extend %u-icon-size--3xl;
+  }
+
+
+
+  //
+  // Colors
+  //
+
+  &.g-bg-main::after {
+    background-color: $g-color-main;
+  }
+  &.g-bg-primary::after {
+    background-color: $g-color-primary;
+  }
+  &.g-bg-black::after {
+    background-color: $g-color-black;
+  }
+  &.g-bg-white::after {
+    background-color: $g-color-white;
+  }
+  &.g-bg-gray {
+    &-light {
+      &-v1::after {
+        background-color: $g-color-gray-light-v1;
+      }
+      &-v2::after {
+        background-color: $g-color-gray-light-v2;
+      }
+      &-v3::after {
+        background-color: $g-color-gray-light-v3;
+      }
+      &-v4::after {
+        background-color: $g-color-gray-light-v4;
+      }
+      &-v5::after {
+        background-color: $g-color-gray-light-v5;
+      }
+    }
+    &-dark {
+      &-v1::after {
+        background-color: $g-color-gray-dark-v1;
+      }
+      &-v2::after {
+        background-color: $g-color-gray-dark-v2;
+      }
+      &-v3::after {
+        background-color: $g-color-gray-dark-v3;
+      }
+      &-v4::after {
+        background-color: $g-color-gray-dark-v4;
+      }
+      &-v5::after {
+        background-color: $g-color-gray-dark-v5;
+      }
+    }
+  }
+  &.g-bg-green::after {
+    background-color: $g-color-green;
+  }
+  &.g-bg-blue::after {
+    background-color: $g-color-blue;
+  }
+  &.g-bg-lightblue::after {
+    background-color: $g-color-lightblue;
+  }
+  &.g-bg-lightblue-v1::after {
+    background-color: $g-color-lightblue-v1;
+  }
+  &.g-bg-darkblue::after {
+    background-color: $g-color-darkblue;
+  }
+  &.g-bg-indigo::after {
+    background-color: $g-color-indigo;
+  }
+  &.g-bg-red::after {
+    background-color: $g-color-red;
+  }
+  &.g-bg-lightred::after {
+    background-color: $g-color-lightred;
+  }
+  &.g-bg-darkred::after {
+    background-color: $g-color-darkred;
+  }
+  &.g-bg-purple::after {
+    background-color: $g-color-purple;
+  }
+  &.g-bg-darkpurple::after {
+    background-color: $g-color-darkpurple;
+  }
+  &.g-bg-pink::after {
+    background-color: $g-color-pink;
+  }
+  &.g-bg-orange::after {
+    background-color: $g-color-orange;
+  }
+  &.g-bg-deeporange::after {
+    background-color: $g-color-deeporange;
+  }
+  &.g-bg-yellow::after {
+    background-color: $g-color-yellow;
+  }
+  &.g-bg-aqua::after {
+    background-color: $g-color-aqua;
+  }
+  &.g-bg-cyan::after {
+    background-color: $g-color-cyan;
+  }
+  &.g-bg-teal::after {
+    background-color: $g-color-teal;
+  }
+  &.g-bg-brown::after {
+    background-color: $g-color-brown;
+  }
+  &.g-bg-bluegray::after {
+    background-color: $g-color-bluegray;
+  }
+}

data/_sass/unify/base/icons/_icons-block-hover.scss

@@ -0,0 +1,158 @@
+/*------------------------------------
+  Hover Effect of Icon on Block Hover
+------------------------------------*/
+// Hover Opacity
+.u-icon-block--hover:hover .g-opacity-0_5--hover {
+  opacity: .5;
+}
+
+// Hover Color (primary)
+.u-icon-block--hover:hover .g-color-primary--hover {
+  color: $gk-blue;
+}
+
+// Hover Border Color (primary)
+.u-icon-block--hover:hover .g-brd-primary--hover {
+  border-color: $gk-blue;
+}
+
+// Hover BG (primary)
+.u-icon-block--hover:hover .g-bg-primary--hover {
+  background: $gk-blue;
+}
+
+// Hover Color (white)
+.u-icon-block--hover:hover .g-color-white--hover {
+  color: $g-color-white;
+}
+
+// Hover Border Color (white)
+.u-icon-block--hover:hover .g-brd-white--hover {
+  border-color: $g-color-white;
+}
+
+// Hover BG (white)
+.u-icon-block--hover:hover .g-bg-white--hover {
+  background: $g-color-white;
+}
+
+// Hover Color (black)
+.u-icon-block--hover:hover .g-color-black--hover {
+  color: $g-color-black;
+}
+
+// Hover Border Color (black)
+.u-icon-block--hover:hover .g-brd-black--hover {
+  border-color: $g-color-black;
+}
+
+// Hover BG (black)
+.u-icon-block--hover:hover .g-bg-black--hover {
+  background: $g-color-black;
+}
+
+// Hover Color (gray)
+.u-icon-block--hover:hover .g-color-gray-dark-v4--hover {
+  color: $g-color-gray-dark-v4;
+}
+
+// Hover Border Color (gray)
+.u-icon-block--hover:hover .g-brd-gray-dark-v4--hover {
+  border-color: $g-color-gray-dark-v4;
+}
+
+// Hover BG (gray)
+.u-icon-block--hover:hover .g-bg-gray-dark-v4--hover {
+  background: $g-color-gray-dark-v4;
+}
+
+// Hover Color (facebook)
+.u-icon-block-hover:hover .g-color-facebook--hover {
+  color: $g-color-facebook;
+}
+// Hover Border Color (facebook)
+.u-icon-block-hover:hover .g-brd-facebook--hover {
+  border-color: $g-color-facebook;
+}
+// Hover BG (facebook)
+.u-icon-block-hover:hover .g-bg-facebook--hover {
+  background: $g-color-facebook;
+}
+
+// Hover Color (twitter)
+.u-icon-block-hover:hover .g-color-twitter--hover {
+  color: $g-color-twitter;
+}
+// Hover Border Color (twitter)
+.u-icon-block-hover:hover .g-brd-twitter--hover {
+  border-color: $g-color-twitter;
+}
+// Hover BG (twitter)
+.u-icon-block-hover:hover .g-bg-twitter--hover {
+  background: $g-color-twitter;
+}
+
+// Hover Color (google-plus)
+.u-icon-block-hover:hover .g-color-google-plus--hover {
+  color: $g-color-google-plus;
+}
+// Hover Border Color (google-plus)
+.u-icon-block-hover:hover .g-brd-google-plus--hover {
+  border-color: $g-color-google-plus;
+}
+// Hover BG (google-plus)
+.u-icon-block-hover:hover .g-bg-google-plus--hover {
+  background: $g-color-google-plus;
+}
+
+// Hover Color (vk)
+.u-icon-block-hover:hover .g-color-vk--hover {
+  color: $g-color-vk;
+}
+// Hover Border Color (vk)
+.u-icon-block-hover:hover .g-brd-vk--hover {
+  border-color: $g-color-vk;
+}
+// Hover BG (vk)
+.u-icon-block-hover:hover .g-bg-vk--hover {
+  background: $g-color-vk;
+}
+
+// Hover Color (linkedin)
+.u-icon-block-hover:hover .g-color-linkedin--hover {
+  color: $g-color-linkedin;
+}
+// Hover Border Color (linkedin)
+.u-icon-block-hover:hover .g-brd-linkedin--hover {
+  border-color: $g-color-linkedin;
+}
+// Hover BG (linkedin)
+.u-icon-block-hover:hover .g-bg-linkedin--hover {
+  background: $g-color-linkedin;
+}
+
+// Hover Color (instagram)
+.u-icon-block-hover:hover .g-color-instagram--hover {
+  color: $g-color-instagram;
+}
+// Hover Border Color (instagram)
+.u-icon-block-hover:hover .g-brd-instagram--hover {
+  border-color: $g-color-instagram;
+}
+// Hover BG (instagram)
+.u-icon-block-hover:hover .g-bg-instagram--hover {
+  background: $g-color-instagram;
+}
+
+// Hover Color (pinterest)
+.u-icon-block-hover:hover .g-color-pinterest--hover {
+  color: $g-color-pinterest;
+}
+// Hover Border Color (pinterest)
+.u-icon-block-hover:hover .g-brd-pinterest--hover {
+  border-color: $g-color-pinterest;
+}
+// Hover BG (pinterest)
+.u-icon-block-hover:hover .g-bg-pinterest--hover {
+  background: $g-color-pinterest;
+}

data/_sass/unify/base/icons/_icons-image.scss

@@ -0,0 +1,28 @@
+/*------------------------------------
+  Image Icons
+------------------------------------*/
+.u-image-icon-size-xs,
+.u-image-icon-size-sm,
+.u-image-icon-size-md,
+.u-image-icon-size-lg,
+.u-image-icon-size-xl {
+  height: auto;
+}
+.u-image-icon-size-xs {
+  @include px-to-rem(width, 30px);
+}
+.u-image-icon-size-sm {
+  @include px-to-rem(width, 40px);
+}
+.u-image-icon-size-md {
+  @include px-to-rem(width, 55px);
+}
+.u-image-icon-size-lg {
+  @include px-to-rem(width, 70px);
+}
+.u-image-icon-size-xl {
+  @include px-to-rem(width, 90px);
+}
+.u-image-icon-size-2xl {
+  @include px-to-rem(width, 100px);
+}

data/_sass/unify/base/icons/_icons-sizes-vn.scss

@@ -0,0 +1,45 @@
+//
+// Icon Sizes (u-icon-v2, u-icon-v3, u-icon-v4)
+//
+// Default (md)
+%u-icon-size {
+  @include px-to-rem(width, 55px);
+  @include px-to-rem(height, 55px);
+  @include px-to-rem(font-size, 22px);
+}
+
+%u-icon-size--xs {
+  @include px-to-rem(width, 30px);
+  @include px-to-rem(height, 30px);
+  @include px-to-rem(font-size, 13px);
+}
+
+%u-icon-size--sm {
+  @include px-to-rem(width, 40px);
+  @include px-to-rem(height, 40px);
+  @include px-to-rem(font-size, 18px);
+}
+
+%u-icon-size--lg {
+  @include px-to-rem(width, 70px);
+  @include px-to-rem(height, 70px);
+  @include px-to-rem(font-size, 30px);
+}
+
+%u-icon-size--xl {
+  @include px-to-rem(width, 90px);
+  @include px-to-rem(height, 90px);
+  @include px-to-rem(font-size, 40px);
+}
+
+%u-icon-size--2xl {
+  @include px-to-rem(width, 100px);
+  @include px-to-rem(height, 100px);
+  @include px-to-rem(font-size, 45px);
+}
+
+%u-icon-size--3xl {
+  @include px-to-rem(width, 130px);
+  @include px-to-rem(height, 130px);
+  @include px-to-rem(font-size, 50px);
+}

data/_sass/unify/base/icons/_icons.scss

@@ -0,0 +1,60 @@
+/*------------------------------------
+  Icons Styles
+------------------------------------*/
+//
+// Common Styles
+//
+
+.u-icon-v1,
+.u-icon-v2,
+.u-icon-v3,
+.u-icon-v4 {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  transition: all .2s ease-in-out;
+}
+.u-icon-v1:hover,
+.u-icon-v2:hover,
+.u-icon-v3:hover,
+.u-icon-v4:hover {
+  text-decoration: none;
+}
+.u-icon-v1::before,
+.u-icon-v2::before,
+.u-icon-v3::before {
+  display: block;
+}
+.u-icon-v1 > i,
+.u-icon-v2 > i,
+.u-icon-v3 > i,
+.u-icon-v4 > span > i {
+  position: relative;
+  top: 50%;
+  display: block;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+[class*="u-icon-v"] {
+  & .u-line-icon-pro {
+    transform: translateY(-45%);
+  }
+}
+
+
+
+//
+// Rotattion Style
+//
+
+.u-icon-rotation {
+  transform: rotate(45deg);
+
+  & .u-icon__elem {
+    transform: rotate(-45deg) translate(15%, -30%);
+  }
+  & .u-line-icon-pro {
+    transform: rotate(-45deg) translate(25%, -30%);
+  }
+}

data/_sass/unify/base/navigation/_navigation-dropdown-columns.scss

@@ -0,0 +1,22 @@
+/*------------------------------------
+  Navigation Dropdown With Columns
+------------------------------------*/
+
+@media (min-width: $g-lg) {
+	[class*="u-dropdown-col-"] {
+		column-gap: 1px;
+		column-rule: 1px solid $g-color-gray-light-v5;
+
+		& > * {
+			min-width: 200px;
+			-webkit-column-break-inside: avoid;
+		  column-break-inside: avoid;
+		}
+	}
+	.u-dropdown-col-2 {
+		columns: 2;
+	}
+	.u-dropdown-col-3 {
+		columns: 3;
+	}
+}

data/_sass/unify/base/navigation/_navigation-dropdown-inline.scss

@@ -0,0 +1,21 @@
+/*------------------------------------
+  Navigation Dropdown Style Inline
+------------------------------------*/
+
+@include nav-dropdown-inline(xs);
+
+@media all and (min-width: $g-xl) {
+	@include nav-dropdown-inline(xl);
+}
+
+@media all and (min-width: $g-lg) {
+	@include nav-dropdown-inline(lg);
+}
+
+@media all and (min-width: $g-md) {
+	@include nav-dropdown-inline(md);
+}
+
+@media all and (min-width: $g-sm) {
+	@include nav-dropdown-inline(sm);
+}

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

@@ -0,0 +1,129 @@
+/*------------------------------------
+  Navigation Dropdown Style v1
+------------------------------------*/
+
+%link-active-state {
+	color: $g-color-primary !important;
+	background-color: transparent;
+	border: none;
+}
+
+.navbar .u-sub-menu-v1 {
+	.hs-has-sub-menu {
+		.hs-has-sub-menu {
+			> a::after {
+				content: "\e902";
+				font-family: "hs-icons";
+				position: absolute;
+				top: 50%;
+				right: 15px;
+				transform: translate3d(0, -50%, 0);
+			}
+
+			&.active > a,
+			&:active > a,
+			&:focus > a,
+			&:hover > a {
+				@extend %link-active-state;
+			}
+		}
+	}
+
+	.hs-has-mega-menu {
+		.hs-has-sub-menu {
+			> a::after {
+				content: "\e902";
+			}
+		}
+	}
+
+	.hs-sub-menu,
+	.dropdown-menu {
+		@include px-to-rem(font-size, 13px);
+		@include px-to-rem(min-width, 230px);
+		@include px-to-rem(padding, 10px 0);
+
+		.dropdown-item {
+			font-weight: inherit;
+			color: inherit;
+			padding: 0;
+
+			&.active,
+			&:active,
+			&:focus,
+			&:hover {
+				border: none;
+				background-color: transparent;
+
+				> a {
+					@extend %link-active-state;
+				}
+			}
+		}
+
+		a {
+			color: $g-color-gray-dark-v4;
+			text-decoration: none !important;
+			display: block;
+			@include px-to-rem(padding, 6px 25px);
+
+			&:active,
+			&:focus,
+			&:hover {
+				@extend %link-active-state;
+			}
+		}
+	}
+
+	.hs-sub-menu,
+	.hs-mega-menu,
+	.dropdown-menu {
+		font-weight: normal;
+		text-transform: none;
+		@include px-to-rem(margin-top, 0);
+		color: inherit;
+		background-color: $g-color-white;
+		background-clip: border-box;
+		border-width: 3px 0 0 0;
+		border-style: solid;
+		border-color: $g-color-primary;
+		border-radius: 0;
+		box-shadow: 0 6px 12px rgba($g-color-black, .175);
+
+		.hs-sub-menu {
+			@include px-to-rem(margin-top, -15px);
+		}
+	}
+
+	&.hs-mobile-state {
+		.hs-sub-menu {
+			width: auto;
+		}
+
+		.hs-sub-menu,
+		.hs-mega-menu {
+			.hs-sub-menu,
+			.hs-mega-menu,
+			.hs-sub-menu.hs-reversed,
+			.hs-mega-menu.hs-reversed {
+				@include px-to-rem(margin, 3px);
+			}
+		}
+	}
+}
+
+.navbar .hs-mobile-state .u-sub-menu-v1 {
+	.hs-sub-menu {
+		width: auto;
+	}
+
+	.hs-sub-menu,
+	.hs-mega-menu {
+		.hs-sub-menu,
+		.hs-mega-menu,
+		.hs-sub-menu.hs-reversed,
+		.hs-mega-menu.hs-reversed {
+			@include px-to-rem(margin, 3px);
+		}
+	}
+}