sparrow-theme 0.1.1 → 0.1.11

data/_sass/sparrow-theme/layout/_footer.scss

@@ -0,0 +1,81 @@
+.footer {
+  background-color: $charcoal-grey;
+
+  &__wrapper {
+    @include outer-container;
+    @include pad(rem(40) $outer-pad);
+    display: flex;
+    align-items: center;
+
+    @include media($mobile) {
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    margin: 0;
+    list-style-type: none;
+
+    @include media($mobile) {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  &__listItem {
+    margin: 0;
+    margin-right: 30px;
+    display: flex;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @include media($mobile) {
+      margin-right: 0;
+      margin-bottom: 20px;
+    }
+  }
+
+  &__link {
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    color: rgba($white, 0.9);
+    font-weight: 600;
+    text-transform: uppercase;
+
+    &:hover {
+      color: $white;
+      border-color: $white;
+    }
+  }
+
+  &__legal {
+    margin: 0;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    list-style-type: none;
+
+    @include media($mobile) {
+      margin: 0;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  &__text {
+    color: rgba($white, 0.5);
+    margin: 0;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+}

data/_sass/sparrow-theme/layout/_header.scss

@@ -0,0 +1,418 @@
+.header {
+  @include position(fixed, 0 0 null 0);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: $header-height;
+  padding: 0 $outer-pad;
+  background: rgba($white, 1);
+  color: $text-color;
+  box-shadow: 0 1px 1px rgba($black, 0.1);
+  transition: background 0.3s ease, transform 0.6s $CurveFastOutSlowIn, opacity 0.6s $CurveFastOutSlowIn;
+  z-index: 1024;
+  transform: translateZ(0);
+
+  @include media($tablet) {
+    transform: none;
+  }
+
+  &--previewOpen {
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
+  }
+
+  &--transparent {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  &--scrolled {
+    background: rgba($white, 1);
+    color: $text-color;
+    box-shadow: 0 1px 1px rgba($black, 0.1);
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 20;
+  }
+
+  &__titleLink {
+    display: flex;
+    align-items: center;
+    border: 0;
+
+    &:hover {
+      border: 0;
+    }
+  }
+
+  &__logoContainer {
+    height: 34px;
+    width: 25px;
+  }
+
+  &__logo {
+    height: 34px;
+    width: 25px;
+  }
+
+  &__logoColour,
+  &__logoSolid {
+    transition: all 0.3s ease;
+  }
+
+  &__logoColour {
+    opacity: 1;
+
+    .header--transparent & {
+      opacity: 0;
+    }
+
+    .header--scrolled &,
+    .header--navOpen & {
+      opacity: 1;
+    }
+  }
+
+  &__logoSolid {
+    opacity: 0;
+
+    .header--transparent & {
+      opacity: 1;
+    }
+
+    .header--scrolled &,
+    .header--navOpen & {
+      opacity: 0;
+    }
+  }
+
+  &__titleText {
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-left: 15px;
+    padding-left: 20px;
+    border-left: $base-border;
+    transition: color 0.3s ease;
+    color: $text-color;
+
+    .header--transparent & {
+      color: $white;
+      border-left: 1px solid rgba($white, 0.3);
+    }
+
+    .header--scrolled & {
+      color: $text-color;
+      border-left: $base-border;
+    }
+
+    @include media($tablet) {
+      .header--navOpen & {
+        color: $text-color;
+        border-left: $base-border;
+      }
+    }
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    height: 100%;
+    position: relative;
+  }
+
+  &__navList {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+    height: 100%;
+
+    @include media($tablet) {
+      @include position(fixed, 0 0 0 0);
+      background: rgba($white, 0);
+      padding-top: 40px;
+      visibility: hidden;
+      pointer-events: none;
+      flex-direction: column;
+      justify-content: center;
+      transition: all 0.4s 0.2s $CurveFastOutSlowIn;
+
+      .header--navOpen & {
+        transition: all 0.4s $CurveFastOutSlowIn;
+        visibility: visible;
+        pointer-events: auto;
+        background: rgba($white, 0.95);
+      }
+    }
+  }
+
+  &__toggleButton {
+    display: none;
+    border: 0;
+    padding: 0;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    background: none;
+    text-transform: uppercase;
+    position: relative;
+    z-index: 20;
+    border-radius: $base-border-radius;
+    transition: all 0.3s ease;
+    padding: 10px;
+    right: -10px;
+    position: relative;
+    align-items: center;
+    margin: 0;
+
+    &:focus,
+    &:hover,
+    &:active {
+      background: rgba($black, 0.1);
+      outline: none;
+    }
+
+    .header--navOpen & { color: $text-color; }
+
+    .header--transparent & {
+      color: $white;
+      &--navOpen { color: $text-color; }
+    }
+
+    .header--scrolled &,
+    .header--navOpen & {
+      color: $text-color;
+    }
+
+    @include media($tablet) {
+      display: flex;
+    }
+  }
+
+  &__toggleButtonInner {
+    display: flex;
+    align-items: center;
+  }
+
+  &__toggleIcon {
+    $bar-width: 18px;
+    $bar-height: 2px;
+    $bar-spacing: 5px;
+    $bar-color: lighten($black, 60%);
+    $bar-color-light: $white;
+    $bar-anim-duration: 0.5s;
+    $bar-anim-curve: cubic-bezier(0.23, 1, 0.32, 1);
+
+    position: relative;
+    background: rgba($bar-color, 1);
+    transition: all 0.2s 0s;
+    width: $bar-width;
+    height: $bar-height;
+    margin-right: 8px;
+
+    .header--navOpen & {
+      transition: all 0s 0.2s;
+    }
+
+    .header--transparent & {
+      background: rgba($bar-color-light, 1);
+    }
+
+    .header--scrolled & {
+      transition: all 0.2s 0s;
+      background: rgba($bar-color, 1);
+    }
+
+    .header--navOpen & {
+      background: rgba($bar-color, 0);
+    }
+
+    @keyframes barTop {
+      0% { transform: translateY(-$bar-spacing) rotate(0deg);}
+      40% { transform: translateY(0) rotate(0deg);}
+      100% { transform: translateY(0) rotate(-45deg);}
+    }
+
+    @keyframes barBottom {
+      0% { transform: translateY($bar-spacing) rotate(0deg);}
+      40% { transform: translateY(0) rotate(0deg);}
+      100% { transform: translateY(0) rotate(45deg);}
+    }
+
+    @keyframes barTopClose {
+      0% { transform: translateY(0) rotate(-45deg); }
+      40% { transform: translateY(0) rotate(0deg); }
+      100% { transform: translateY(-$bar-spacing) rotate(0deg); }
+    }
+
+    @keyframes barBottomClose {
+      0% { transform: translateY(0) rotate(45deg); }
+      40% { transform: translateY(0) rotate(0deg); }
+      100% { transform: translateY($bar-spacing) rotate(0deg); }
+    }
+
+    &:before {
+    	content: "";
+    	position: absolute;
+    	left: 0;
+      transition: all 0.2s 0s;
+    	transform: translateY(-$bar-spacing);
+    	background: rgba($bar-color, 1);
+      width: $bar-width;
+      height: $bar-height;
+
+      .header--navOpen & {
+        transition: all 0s 0.2s;
+      }
+
+      .header--transparent & {
+        background: rgba($bar-color-light, 1);
+      }
+
+      .header--scrolled & {
+        background: rgba($bar-color, 1);
+      }
+    }
+
+    &:after {
+    	content: "";
+    	position: absolute;
+    	left: 0;
+      transition: all 0.2s 0s;
+    	transform: translateY($bar-spacing);
+    	background: rgba($bar-color, 1);
+      width: $bar-width;
+      height: $bar-height;
+
+      .header--navOpen & {
+        transition: all 0s 0.2s;
+      }
+
+      .header--transparent & {
+        background: rgba($bar-color-light, 1);
+      }
+
+      .header--scrolled & {
+        transition: all 0.2s 0s;
+        background: rgba($bar-color, 1);
+      }
+    }
+
+    .header--navOpen & {
+      &:before {
+        animation: barTop $bar-anim-duration $bar-anim-curve forwards;
+        background: rgba($bar-color, 1);
+      }
+    }
+
+    .header--navOpen & {
+      &:after {
+        animation: barBottom $bar-anim-duration $bar-anim-curve forwards;
+        background: rgba($bar-color, 1);
+      }
+    }
+
+    &--closing:before {
+      animation: barTopClose $bar-anim-duration $bar-anim-curve forwards;
+    }
+
+    &--closing:after {
+      animation: barBottomClose $bar-anim-duration $bar-anim-curve forwards;
+    }
+  }
+
+  &__navItem {
+    margin: 0;
+    margin-right: 30px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @include media($tablet) {
+      transform: translate3d(0, 50px, 0);
+      transition: all 0.4s $CurveFastOutSlowIn;
+      margin-right: 0;
+      height: auto;
+      opacity: 0;
+      width: 100%;
+    }
+
+    .header--navOpen & {
+      @include media($tablet) {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+      }
+    }
+  }
+
+  &__navLink {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: currentColor;
+    border: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .header--transparent & {
+      color: rgba($white, 0.8);
+    }
+
+    .header--scrolled & {
+      color: $text-color;
+    }
+
+    .header & {
+      &--active,
+      &:hover {
+        color: $primary-color;
+        border: 0;
+      }
+    }
+
+    .header--transparent & {
+      &--active,
+      &:hover {
+        color: $white;
+        border: 0;
+      }
+    }
+
+    .header--scrolled & {
+      &--active,
+      &:hover {
+        color: $primary-color;
+        border: 0;
+      }
+    }
+
+    @include media($tablet) {
+      text-transform: none;
+      font-size: 18px;
+      letter-spacing: normal;
+      padding: 25px 0;
+      height: auto;
+      width: 100%;
+      justify-content: center;
+
+      .header & {
+        color: $text-color;
+        &--active, &:hover { color: $primary-color; }
+      }
+    }
+  }
+}