jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/globals/_bg-colors.scss

@@ -0,0 +1,926 @@
+/*------------------------------------
+  Background Colors
+------------------------------------*/
+/* Basic Colors
+------------------------------------*/
+/* Main Colors */
+.g-bg-main {
+  background-color: $g-bg-color-main !important;
+}
+
+/* Main Secondary */
+.g-bg-secondary {
+  background-color: $g-bg-color-secondary !important;
+}
+
+/* Primary Colors */
+.g-bg-primary {
+  background-color: $g-color-primary !important;
+
+  // Hover
+  &--hover:hover {
+    background-color: $g-color-primary !important;
+  }
+
+  .u-block-hover:hover &--hover {
+    background-color: $g-color-primary;
+  }
+
+  &--parent-hover {
+    .g-parent:hover & {
+      background-color: $g-color-primary !important;
+    }
+  }
+
+  // Active
+  &--active {
+    &.active,
+    .active & {
+      background-color: $g-color-primary !important;
+    }
+  }
+
+  &--parent-active {
+    .g-parent.active & {
+      background-color: $g-color-primary !important;
+    }
+  }
+
+  //Pseudo-elements background color
+  &--before::before,
+  &--after::after {
+    background-color: $g-color-primary !important;
+  }
+
+  // Primary dark
+  &-dark {
+    &-v1 {
+      background-color: $g-color-primary-dark-v1 !important;
+    }
+    &-v2 {
+      background-color: $g-color-primary-dark-v2 !important;
+    }
+    &-v3 {
+      background-color: $g-color-primary-dark-v3 !important;
+    }
+  }
+
+  // Primary opacity
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-primary, .1) !important;
+    }
+    &-0_2 {
+      background-color: rgba($g-color-primary, .2) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-primary, .2) !important;
+      }
+
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-primary, .2) !important;
+      }
+
+      &--active {
+        .active & {
+          background-color: rgba($g-color-primary, .2) !important;
+        }
+      }
+
+      &--before::before,
+      &--after::after {
+        background-color: rgba($g-color-primary, .2) !important;
+      }
+    }
+    &-0_3 {
+      background-color: rgba($g-color-primary, .3) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-primary, .3) !important;
+      }
+
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-primary, .3) !important;
+      }
+
+      &--active {
+        .active & {
+          background-color: rgba($g-color-primary, .3) !important;
+        }
+      }
+
+      &--before::before,
+      &--after::after {
+        background-color: rgba($g-color-primary, .3) !important;
+      }
+    }
+
+    &-0_4 {
+      background-color: rgba($g-color-primary, .4) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-primary, .4) !important;
+      }
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-primary, .4) !important;
+      }
+      &--after::after {
+        background-color: rgba($g-color-primary, .4) !important;
+      }
+    }
+    &-0_6 {
+      background-color: rgba($g-color-primary, .6) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-primary, .6) !important;
+      }
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-primary, .6) !important;
+      }
+      &--after::after {
+        background-color: rgba($g-color-primary, .6) !important;
+      }
+    }
+    &-0_8 {
+      background-color: rgba($g-color-primary, .8) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-primary, .8) !important;
+      }
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-primary, .8) !important;
+      }
+
+      &--before,
+      &--after {
+        &::after {
+          background-color: rgba($g-color-primary, .8) !important;
+        }
+
+        &--hover:hover {
+          &::after {
+            background-color: rgba($g-color-primary, .8) !important;
+          }
+        }
+      }
+    }
+    &-0_9 {
+      background-color: rgba($g-color-primary, .9) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-primary, .9) !important;
+      }
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-primary, .9) !important;
+      }
+
+      &--before,
+      &--after {
+        &::after {
+          background-color: rgba($g-color-primary, .9) !important;
+        }
+
+        &--hover:hover {
+          &::after {
+            background-color: rgba($g-color-primary, .9) !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Black Colors */
+.g-bg-black {
+  background-color: $g-color-black !important;
+
+  &--hover:hover {
+    background-color: $g-color-black !important;
+  }
+
+  &--after::after {
+    background-color: $g-color-black !important;
+  }
+
+  // Black opacity
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-black, .1) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-black, .1) !important;
+      }
+    }
+    &-0_2 {
+      background-color: rgba($g-color-black, .2) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-black, .2) !important;
+      }
+    }
+    &-0_3 {
+      background-color: rgba($g-color-black, .3) !important;
+
+      &--hover {
+        &:hover {
+          background-color: rgba($g-color-black, .3) !important;
+        }
+      }
+
+      &--after::after,
+      &--before::before {
+        background-color: rgba($g-color-black, .3) !important;
+      }
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-black, .3) !important;
+      }
+    }
+    &-0_4 {
+      background-color: rgba($g-color-black, .4) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-black, .4) !important;
+      }
+    }
+    &-0_5 {
+      background-color: rgba($g-color-black, .5) !important;
+
+      &--hover {
+        &:hover {
+          background-color: rgba($g-color-black, .5) !important;
+        }
+      }
+
+      &--after::after {
+        background-color: rgba($g-color-black, .5) !important;
+      }
+    }
+    &-0_6 {
+      background-color: rgba($g-color-black, .6) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-black, .7) !important;
+      }
+
+      &--after::after {
+        background-color: rgba($g-color-black, .6) !important;
+      }
+    }
+    &-0_7 {
+      background-color: rgba($g-color-black, .7) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-black, .7) !important;
+      }
+
+      &--after::after {
+        background-color: rgba($g-color-black, .7) !important;
+      }
+    }
+    &-0_8 {
+      background-color: rgba($g-color-black, .8) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-black, .8) !important;
+      }
+
+      &--hover {
+        &:hover {
+          background-color: rgba($g-color-black, .8) !important;
+        }
+      }
+    }
+    &-0_9 {
+      background-color: rgba($g-color-black, .9) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-black, .9) !important;
+      }
+
+      &--hover {
+        &:hover {
+          background-color: rgba($g-color-black, .9) !important;
+        }
+      }
+    }
+  }
+}
+
+/* White Colors */
+.g-bg-white {
+  background-color: $g-color-white !important;
+
+  //Pseudo-elements background color
+  &--before::before,
+  &--after::after {
+    background-color: $g-color-white !important;
+  }
+
+  &--hover:hover,
+  &--active.active {
+    background-color: $g-color-white !important;
+  }
+
+  &--parent-hover {
+    .g-parent:hover & {
+      background-color: $g-color-white !important;
+    }
+  }
+
+  //Pseudo-elements background color
+  &--before::before,
+  &--after::after {
+    background-color: $g-color-white !important;
+  }
+
+  // White opacity
+  &-opacity {
+    &-0--after {
+      &--parent-hover::after {
+        .g-parent:hover & {
+          background-color: rgba($g-color-white, 0) !important;
+        }
+      }
+    }
+
+    &-0_05 {
+      background-color: rgba($g-color-white, .05) !important;
+    }
+    &-0_1 {
+      background-color: rgba($g-color-white, .1) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-white, .1) !important;
+      }
+    }
+    &-0_2 {
+      background-color: rgba($g-color-white, .2) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-white, .2) !important;
+      }
+    }
+    &-0_3 {
+      background-color: rgba($g-color-white, .3) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-white, .3) !important;
+      }
+
+      &--after::after {
+        background-color: rgba($g-color-white, .3) !important;
+      }
+    }
+    &-0_4 {
+      background-color: rgba($g-color-white, .4) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-white, .4) !important;
+      }
+    }
+    &-0_5 {
+      background-color: rgba($g-color-white, .5) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-white, .5) !important;
+      }
+    }
+    &-0_7 {
+      background-color: rgba($g-color-white, .7) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-white, .7) !important;
+      }
+
+      &--after::after {
+        background-color: rgba($g-color-white, .7) !important;
+      }
+    }
+    &-0_8 {
+      background-color: rgba($g-color-white, .8) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-white, .8) !important;
+      }
+
+      &--after::after {
+        background-color: rgba($g-color-white, .8) !important;
+      }
+
+      &--hover--after:hover::after {
+        background-color: rgba($g-color-primary, .8) !important;
+      }
+    }
+    &-0_9 {
+      background-color: rgba($g-color-white, .9) !important;
+
+      &--hover:hover {
+        background-color: rgba($g-color-white, .9) !important;
+      }
+
+      &--after::after {
+        background-color: rgba($g-color-white, .9) !important;
+      }
+    }
+  }
+}
+
+/* Gray Colors */
+.g-bg-gray {
+  // Dark Gray
+  &-dark {
+    &-v1 {
+      background-color: $g-color-gray-dark-v1 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-dark-v1 !important;
+      }
+    }
+    &-v2 {
+      background-color: $g-color-gray-dark-v2 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-dark-v2 !important;
+      }
+    }
+    &-v3 {
+      background-color: $g-color-gray-dark-v3 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-dark-v3 !important;
+      }
+    }
+    &-v4 {
+      background-color: $g-color-gray-dark-v4 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-dark-v4 !important;
+      }
+    }
+    &-v5 {
+      background-color: $g-color-gray-dark-v5 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-dark-v5 !important;
+      }
+    }
+  }
+
+  // Light Gray
+  &-light {
+    &-v1 {
+      background-color: $g-color-gray-light-v1 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-light-v1 !important;
+      }
+    }
+    &-v2 {
+      background-color: $g-color-gray-light-v2 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-light-v2 !important;
+      }
+    }
+    &-v3 {
+      background-color: $g-color-gray-light-v3 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-light-v3 !important;
+      }
+    }
+    &-v4 {
+      background-color: $g-color-gray-light-v4 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-light-v4 !important;
+      }
+    }
+    &-v5 {
+      background-color: $g-color-gray-light-v5 !important;
+
+      &--hover:hover {
+        background-color: $g-color-gray-light-v5 !important;
+      }
+
+      // Active
+      &--active {
+        &.active,
+        .active & {
+          background-color: $g-color-gray-light-v5 !important;
+        }
+      }
+    }
+  }
+}
+
+/* Transparent */
+.g-bg-transparent {
+  background-color: transparent !important;
+
+  &--hover:hover {
+    background-color: transparent !important;
+  }
+
+  &--hover--after:hover::after {
+    background-color: transparent !important;
+  }
+
+  &--parent-hover {
+    .g-parent:hover & {
+      background-color: transparent !important;
+    }
+  }
+}
+
+/* Complementary Colors
+------------------------------------*/
+/* Beige Colors */
+.g-bg-beige {
+  background-color: $g-color-beige !important;
+}
+
+/* Color Green */
+.g-bg-green {
+  background-color: $g-color-green !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-green, .1) !important; // R
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-green !important; // J
+  }
+}
+
+/* Color Blue */
+.g-bg-blue {
+  background-color: $g-color-blue !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-blue, .1) !important; // R
+    }
+    &-0_7 {
+      background-color: rgba($g-color-blue, .7) !important; // J
+    }
+    &-0_9 {
+      background-color: rgba($g-color-blue, .9) !important; // Z
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-blue !important; // J
+  }
+}
+
+/* Color Light Blue */
+.g-bg-lightblue {
+  background-color: $g-color-lightblue !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-lightblue, .1) !important; // R
+    }
+  }
+}
+
+.g-bg-lightblue-v1 {
+  background-color: $g-color-lightblue-v1 !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-lightblue-v1, .1) !important; // R
+    }
+  }
+}
+
+/* Color Dark Blue */
+.g-bg-darkblue {
+  background-color: $g-color-darkblue !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-darkblue, .1) !important; // R
+    }
+  }
+}
+
+/* Color Indigo */
+.g-bg-indigo {
+  background-color: $g-color-indigo !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-indigo, .1) !important; // R
+    }
+  }
+}
+
+/* Color Red */
+.g-bg-red {
+  background-color: $g-color-red !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-red, .1) !important; // R
+    }
+    &-0_2 {
+      background-color: rgba($g-color-red, .2) !important; // O
+    }
+    &-0_5 {
+      background-color: rgba($g-color-red, .5) !important; // J
+    }
+    &-0_8 {
+      background-color: rgba($g-color-red, .8) !important; // P
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-red !important; // J
+  }
+}
+
+/* Color Light Red */
+.g-bg-lightred {
+  background-color: $g-color-lightred !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-lightred, .1) !important; // R
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-lightred !important; // Z
+  }
+}
+
+/* Color Dark Red */
+.g-bg-darkred {
+  background-color: $g-color-darkred !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-darkred, .1) !important; // R
+    }
+  }
+}
+
+/* Color Purple */
+.g-bg-purple {
+  background-color: $g-color-purple !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-purple, .1) !important; // R
+    }
+    &-0_7 {
+      background-color: rgba($g-color-purple, .7) !important; // P
+    }
+    &-0_9 {
+      background-color: rgba($g-color-purple, .9) !important; // Z
+
+      &--after::after {
+        background-color: rgba($g-color-purple, .9) !important; // J
+      }
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-purple !important; // J
+  }
+}
+
+/* Color Dark Purple */
+.g-bg-darkpurple {
+  background-color: $g-color-darkpurple !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-darkpurple, .1) !important; // R
+    }
+  }
+}
+
+/* Color Pink */
+.g-bg-pink {
+  background-color: $g-color-pink !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-pink, .1) !important; // R
+    }
+    &-0_9 {
+      background-color: rgba($g-color-pink, .9) !important; // Z
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-pink !important; // J
+  }
+
+  &--before,
+  &--after {
+    &::after {
+      background-color: $g-color-pink !important;
+    }
+
+    &--hover:hover {
+      &::after {
+        background-color: $g-color-pink !important;
+      }
+    }
+  }
+}
+
+/* Color Orange */
+.g-bg-orange {
+  background-color: $g-color-orange !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-orange, .1) !important; // R
+    }
+  }
+
+  &-opacity {
+    &-0_2 {
+      background-color: rgba($g-color-orange, .2) !important; // O
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-orange !important; // J
+  }
+}
+
+/* Color Deep Orange */
+.g-bg-deeporange {
+  background-color: $g-color-deeporange !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-deeporange, .1) !important; // R
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-deeporange !important; // J
+  }
+}
+
+/* Color Yellow */
+.g-bg-yellow {
+  background-color: $g-color-yellow !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-yellow, .1) !important; // R
+    }
+    &-0_7 {
+      background: rgba($g-color-yellow, .7) !important; // J
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-yellow !important; // J
+  }
+}
+
+/* Color Aqua */
+.g-bg-aqua {
+  background-color: $g-color-aqua !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-aqua, .1) !important; // R
+    }
+    &-0_9 {
+      background-color: rgba($g-color-aqua, .9) !important; // Z
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-aqua !important; // J
+  }
+}
+
+/* Color Cyan */
+.g-bg-cyan {
+  background-color: $g-color-cyan !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-cyan, .1) !important; // R
+    }
+
+    &-0_9 {
+      background-color: rgba($g-color-cyan, .9) !important;
+
+      &--after::after {
+        background-color: rgba($g-color-cyan, .9) !important; // J
+      }
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-cyan !important; // J
+  }
+}
+
+/* Color Teal */
+.g-bg-teal {
+  background-color: $g-color-teal !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-teal, .1) !important; // R
+    }
+
+    &-0_9 {
+      background-color: rgba($g-color-teal, .9) !important; // J
+
+      &--after::after {
+        background-color: rgba($g-color-teal, .9) !important; // J
+      }
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-teal !important; // J
+  }
+}
+
+/* Color Brown */
+.g-bg-brown {
+  background-color: $g-color-brown !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-brown, .1) !important; // R
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-brown !important; // Z
+  }
+}
+
+/* Color Blue Gray */
+.g-bg-bluegray {
+  background-color: $g-color-bluegray !important;
+
+  &-opacity {
+    &-0_1 {
+      background-color: rgba($g-color-bluegray, .1) !important; // R
+    }
+    &-0_2 {
+      &--before::before,
+      &--after::after {
+        background-color: rgba($g-color-bluegray, .2) !important; // Z
+      }
+    }
+    &-0_3 {
+      &--before::before,
+      &--after::after {
+        background-color: rgba($g-color-bluegray, .3) !important; // Z
+      }
+    }
+    &-0_5 {
+      background-color: rgba($g-color-bluegray, .5) !important; // Z
+    }
+    &-0_7 {
+      background-color: rgba($g-color-bluegray, .7) !important; // Z
+    }
+  }
+
+  &--hover:hover {
+    background-color: $g-color-bluegray !important; // J
+  }
+}
+
+//Grayscale
+.g-grayscale {
+  &-100x {
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
+    filter: gray;
+    -webkit-filter: grayscale(100%);
+  }
+
+  &-0 {
+    &--parent-hover {
+      .g-parent:hover & {
+        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
+        -webkit-filter: grayscale(0%);
+      }
+    }
+
+    &--hover:hover {
+      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
+      -webkit-filter: grayscale(0%);
+    }
+  }
+}