jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/base/dropdowns/_dropdowns-v1.scss

@@ -0,0 +1,90 @@
+/*------------------------------------
+  Dropdowns v1
+------------------------------------*/
+
+.u-dropdown {
+  &-v1 {
+    position: relative;
+    line-height: normal;
+    font-size: 16px;
+    color: $g-color-gray-dark-v4;
+    background-color: $g-color-white;
+    border: {
+      width: 1px;
+      style: solid;
+      color: $g-color-gray-light-v2;
+    }
+    padding: 11px 40px 11px 14px;
+    transition: {
+      property: background-color, border-color, box-shadow;
+      duration: .2s;
+      timing-function: ease;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &-menu {
+      padding: 0;
+      border: {
+        color: $g-color-gray-light-v2;
+        radius: 3px;
+      }
+      box-shadow: 0 2px 8px 0 rgba($g-color-black, .2);
+
+      &__item {
+        line-height: normal;
+        font-size: 16px;
+        color: $g-color-gray-dark-v4;
+        padding: 9px 20px;
+
+        &:hover {
+          color: $g-color-gray-dark-v4;
+        }
+      }
+    }
+
+    &__icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: block;
+      width: 40px;
+      height: 100%;
+
+      &-open,
+      &-close {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      &-open {
+        opacity: 1;
+      }
+
+      &-close {
+        opacity: 0;
+      }
+    }
+
+    &[aria-expanded="true"] {
+      background-color: rgba($g-color-gray-light-v2, .1);
+      box-shadow: 0 2px 8px 0 rgba($g-color-black, .2);
+
+      [class*="__icon-open"] {
+        opacity: 0;
+      }
+
+      [class*="__icon-close"] {
+        opacity: 1;
+      }
+    }
+
+    &:focus {
+      outline: 0 none;
+    }
+  }
+}

data/_sass/unify/base/form-controls/README.md

@@ -0,0 +1 @@
+Overwritten scss-code of Chosen Plugin are located here – /assets/include/scss/vendor/chosen/.

data/_sass/unify/base/form-controls/_quantity.scss

@@ -0,0 +1,16 @@
+/*------------------------------------
+  Quantity
+------------------------------------*/
+
+.u-quantity {
+  &-v1 {
+    input:not([type="checkbox"], [type="radio"]) {
+      background-color: $g-color-white;
+    }
+  }
+}
+
+.js-plus,
+.js-minus {
+  cursor: pointer;
+}

data/_sass/unify/base/form-controls/_style.scss

@@ -0,0 +1,46 @@
+/*------------------------------------
+  Form Elements
+------------------------------------*/
+.u-form-control {
+  padding: .8rem 1rem .6rem;
+
+  &::placeholder {
+    color: inherit;
+    opacity: .3;
+  }
+  &::-moz-placeholder {
+    color: inherit;
+    opacity: .3;
+  }
+  &::-webkit-input-placeholder {
+    color: inherit;
+    opacity: .3;
+  }
+
+  &-sm {
+    padding: .4rem .5rem .1rem;
+    font-size: .875rem;
+  }
+  &-lg {
+    padding: .75rem 1.5rem .55rem;
+    font-size: 1.25rem;
+  }
+
+  &-shadow--focus:focus {
+    box-shadow: 0 0 5px rgba($g-color-black, .3);
+  }
+}
+
+.u-textarea-expandable {
+  max-height: 42px;
+
+  transition: {
+    property: max-height;
+    duration: .2s;
+    timing-function: ease-in;
+  }
+
+  &:focus {
+    max-height: 90px;
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v1.scss

@@ -0,0 +1,65 @@
+/*------------------------------------
+  Checkboxes v1
+------------------------------------*/
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v1
+      &-v1 {
+        background-color: $g-color-white;
+        border: solid 1px $g-color-gray-light-v2;
+      }
+      // End v1
+    }
+
+    &-checkbox {
+      // v1
+      &-v1 {
+        border-radius: 1px;
+      }
+      // End v1
+    }
+
+    &-radio {
+      // v1
+      &-v1 {
+        border-radius: 50%;
+      }
+      // End v1
+    }
+  }
+
+  // Control
+  input[type="checkbox"],
+  input[type="radio"] {
+    &:checked {
+      & +,
+      & + * {
+        // v1
+        .u-check-icon-checkbox-v1 {
+          color: $g-color-white;
+          background-color: $g-color-primary;
+          border-color: $g-color-primary;
+
+          &::before {
+            content: attr(data-check-icon);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            font-size: 12px;
+            transform: translate(-50%, -50%);
+          }
+        }
+
+        .u-check-icon-radio-v1 {
+          border: {
+            width: 4px;
+            color: $g-color-primary;
+          }
+        }
+        // End v1
+      }
+    }
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v2.scss

@@ -0,0 +1,34 @@
+/*------------------------------------
+  Checkboxes v2
+------------------------------------*/
+
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v2
+      &-v2 {
+        width: 20px;
+        height: 20px;
+        border: solid 1px $g-color-primary;
+      }
+      // End v2
+    }
+
+    &-checkbox {
+      // v2
+      &-v2 {
+        border-radius: 1px;
+      }
+      // End v2
+    }
+
+    &-radio {
+      // v2
+      &-v2 {
+        border-radius: 50%;
+      }
+      // End v2
+    }
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v3.scss

@@ -0,0 +1,19 @@
+/*------------------------------------
+  Checkboxes v3
+------------------------------------*/
+
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v3
+      &-v3 {
+        width: 40px;
+        height: 40px;
+        border: solid 1px $g-color-primary;
+        border-radius: 50%;
+      }
+      // End v3
+    }
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v4.scss

@@ -0,0 +1,76 @@
+/*------------------------------------
+  Checkboxes v4
+------------------------------------*/
+
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v4
+      &-v4 {
+        width: 18px;
+        height: 18px;
+        font-size: 12px;
+        border: solid 1px $g-color-gray-light-v2;
+
+        i {
+          &::before {
+            content: attr(data-uncheck-icon);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+      // End v4
+    }
+
+    &-checkbox {
+      // v4
+      // &-v4 {
+      //   border-radius: 1px;
+
+      //   i {
+      //     border-radius: 1px;
+      //   }
+      // }
+      // End v4
+    }
+
+    &-radio {
+      // v4
+      &-v4 {
+        border-radius: 50%;
+
+        i {
+          border-radius: 50%;
+        }
+      }
+      // End v4
+    }
+  }
+
+  // Control
+  input[type="checkbox"],
+  input[type="radio"] {
+    &:checked {
+      & +,
+      & + * {
+        // v4
+        .u-check-icon-checkbox-v4,
+        .u-check-icon-radio-v4 {
+          color: $g-color-primary;
+          border-color: $g-color-primary;
+
+          i {
+            &::before {
+              content: attr(data-check-icon);
+            }
+          }
+        }
+        // End v4
+      }
+    }
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v5.scss

@@ -0,0 +1,70 @@
+/*------------------------------------
+  Checkboxes v5
+------------------------------------*/
+
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v5
+      &-v5 {
+        width: 18px;
+        height: 18px;
+
+        i {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: block;
+          width: 100%;
+          height: 100%;
+          background-color: $g-color-white;
+          border: solid 1px $g-color-gray-light-v2;
+          transform: translate(-50%, -50%);
+        }
+      }
+      // End v5
+    }
+
+    &-checkbox {
+      // v5
+      &-v5 {
+        border-radius: 1px;
+      }
+      // End v5
+    }
+
+    &-radio {
+      // v5
+      &-v5 {
+        border-radius: 50%;
+
+        i {
+          border-radius: 50%;
+        }
+      }
+      // End v5
+    }
+  }
+
+  // Control
+  input[type="checkbox"],
+  input[type="radio"] {
+    &:checked {
+      & +,
+      & + * {
+        // v5
+        .u-check-icon-checkbox-v5,
+        .u-check-icon-radio-v5 {
+          i {
+            border: {
+              width: 4px;
+              color: $g-color-primary;
+            }
+          }
+        }
+        // End v5
+      }
+    }
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v6.scss

@@ -0,0 +1,85 @@
+/*------------------------------------
+  Checkboxes v6
+------------------------------------*/
+
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v6
+      &-v6 {
+        width: 18px;
+        height: 18px;
+        font-size: 12px;
+
+        i {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: block;
+          width: 100%;
+          height: 100%;
+          border: solid 1px $g-color-gray-light-v2;
+          transform: translate(-50%, -50%);
+
+          &::before {
+            content: attr(data-uncheck-icon);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+      // End v6
+    }
+
+    &-checkbox {
+      // v6
+      // &-v6 {
+      //   border-radius: 1px;
+
+      //   i {
+      //     border-radius: 1px;
+      //   }
+      // }
+      // End v6
+    }
+
+    &-radio {
+      // v6
+      &-v6 {
+        border-radius: 50%;
+
+        i {
+          border-radius: 50%;
+        }
+      }
+      // End v6
+    }
+  }
+
+  // Control
+  input[type="checkbox"],
+  input[type="radio"] {
+    &:checked {
+      & +,
+      & + * {
+        // v6
+        .u-check-icon-checkbox-v6,
+        .u-check-icon-radio-v6 {
+          i {
+            color: $g-color-white;
+            background-color: $g-color-primary;
+            border-color: $g-color-primary;
+
+            &::before {
+              content: attr(data-check-icon);
+            }
+          }
+        }
+        // End v6
+      }
+    }
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v7.scss

@@ -0,0 +1,93 @@
+/*------------------------------------
+  Checkboxes v7
+------------------------------------*/
+
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v7
+      &-v7 {
+        cursor: pointer;
+        display: block;
+        width: 43px;
+        height: 22px;
+        font: {
+          style: normal;
+          weight: 700;
+          size: 9px;
+        }
+        color: $g-color-gray-light-v3;
+        border: solid 1px $g-color-gray-light-v3;
+        border-radius: 12px;
+
+        i {
+          &::before,
+          &::after {
+            content: "";
+            display: block;
+            position: absolute;
+          }
+
+          &::before {
+            content: attr(data-uncheck-icon);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 22px;
+            line-height: 18px;
+            text-transform: uppercase;
+            text-align: right;
+            padding: 2px 7px;
+          }
+
+          &::after {
+            top: 50%;
+            left: 4px;
+            width: 16px;
+            height: 16px;
+            background-color: $g-color-gray-light-v3;
+            border-radius: 50%;
+            transform: translateY(-50%);
+            transition: {
+              property: left;
+              duration: .1s;
+              timing-function: ease-in;
+            }
+          }
+        }
+      }
+      // End v7
+    }
+  }
+
+  // Control
+  input[type="checkbox"],
+  input[type="radio"] {
+    &:checked {
+      & +,
+      & + * {
+        // v7
+        .u-check-icon-checkbox-v7,
+        .u-check-icon-radio-v7 {
+          color: $g-color-white;
+          background-color: $g-color-primary;
+          border-color: $g-color-primary;
+
+          i {
+            &:before {
+              content: attr(data-check-icon);
+              text-align: left;
+            }
+
+            &::after {
+              left: calc(100% - 19px);
+              background-color: $g-color-white;
+            }
+          }
+        }
+        // End v7
+      }
+    }
+  }
+}

data/_sass/unify/base/form-controls/checkboxes/_checkboxes-v8.scss

@@ -0,0 +1,92 @@
+/*------------------------------------
+  Checkboxes v7
+------------------------------------*/
+
+.u-check {
+  &-icon {
+    &-checkbox,
+    &-radio {
+      // v8
+      &-v8 {
+        cursor: pointer;
+        display: block;
+        width: 43px;
+        height: 22px;
+        font: {
+          style: normal;
+          weight: 700;
+          size: 9px;
+        }
+        color: $g-color-gray-light-v3;
+        border: solid 1px $g-color-gray-light-v3;
+        border-radius: 12px;
+
+        i {
+          &::before,
+          &::after {
+            content: "";
+            display: block;
+            position: absolute;
+          }
+
+          &::before {
+            content: attr(data-uncheck-icon);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 22px;
+            line-height: 18px;
+            text-transform: uppercase;
+            text-align: right;
+            padding: 2px 7px;
+          }
+
+          &::after {
+            top: 50%;
+            left: 4px;
+            width: 16px;
+            height: 16px;
+            background-color: $g-color-gray-light-v3;
+            border-radius: 50%;
+            transform: translateY(-50%);
+            transition: {
+              property: left;
+              duration: .1s;
+              timing-function: ease-in;
+            }
+          }
+        }
+      }
+      // End v8
+    }
+  }
+
+  // Control
+  input[type="checkbox"],
+  input[type="radio"] {
+    &:checked {
+      & +,
+      & + * {
+        // v8
+        .u-check-icon-checkbox-v8,
+        .u-check-icon-radio-v8 {
+          color: $g-color-primary;
+          border-color: $g-color-primary;
+
+          i {
+            &:before {
+              content: attr(data-check-icon);
+              text-align: left;
+            }
+
+            &::after {
+              left: calc(100% - 19px);
+              background-color: $g-color-primary;
+            }
+          }
+        }
+        // End v8
+      }
+    }
+  }
+}