fae-railsz 2.1.0

data/app/assets/stylesheets/fae/globals/navigation/_base.scss

@@ -0,0 +1,22 @@
+/////////////////////////////////////////////
+// Shared styles b/w mobilenav and sidenav //
+/////////////////////////////////////////////
+
+.nav {
+  top: 0;
+  left: 0;
+  width: $sidenav-width - 30px;
+  height: 100%;
+  font-size: 15px;
+  overflow: auto;
+
+  a {
+    display: block;
+    color: $c-text;
+    position: relative;
+
+    &:hover {
+      color: $c-dark-grey;
+    }
+  }
+}

data/app/assets/stylesheets/fae/globals/navigation/_footer.scss

@@ -0,0 +1,50 @@
+.main-footer {
+  @include transition(opacity 0.4s);
+  padding: 20px $content-buffer $content-buffer;
+  opacity: 0;
+
+  &.active {
+    opacity: 1;
+  }
+
+  &.-locked {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.credit {
+  font-size: 14px;
+  color: $c-mid-dark-grey;
+  text-align: right;
+
+  span {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 25px;
+  }
+
+  // SVG link
+  > a {
+    display: inline-block;
+    vertical-align: middle;
+
+    &:hover {
+      path {
+        fill: $c-custom-highlight;
+      }
+    }
+  }
+
+
+  svg {
+    max-width: 35px;
+    height: auto;
+  }
+
+  path {
+    @include transition(fill 0.2s);
+    fill: $c-mid-dark-grey;
+  }
+}

data/app/assets/stylesheets/fae/globals/navigation/_header.scss

@@ -0,0 +1,149 @@
+.main-header {
+  @include transition($mobilenav-transition);
+  @include stack($fae-nav-stack);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: $c-header-bg;
+  border-bottom: $header-border-width solid $c-custom-highlight;
+
+  @include bp(large) {
+    padding: 0 $content-buffer;
+    position: relative;
+  }
+
+  a {
+    display: block;
+    padding: 15px 0;
+    color: $c-darker-grey;
+
+    @include bp(large) {
+      padding-top: 27px;
+      padding-bottom: 27px;
+    }
+
+    &:hover,
+    &.-current,
+    &.-parent-current {
+      color: $c-white;
+    }
+  }
+
+  li {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  h1 {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 0.8;
+    font-size: 16px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+
+    a {
+      color: $c-white;
+
+      @include bp(medium-down) {
+        text-align: left;
+      }
+
+      @include bp(large) {
+        line-height: 1;
+      }
+    }
+  }
+
+  ul {
+    ul {
+      overflow: auto;
+      max-height: 320px;
+      scrollbar-track-color: $c-header-bg;
+      scrollbar-face-color: $c-dark-grey;
+
+      &::-webkit-scrollbar-thumb {
+        background: none;
+        border: 1px solid $c-mid-dark-grey;
+        border-radius: 10px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: none;
+      }
+    }
+  }
+
+  nav {
+    display: none;
+    vertical-align: middle;
+    margin-left: $content-buffer;
+
+    @include bp(large) {
+      display: inline-block;
+    }
+  }
+}
+
+.main-header-nav {
+  @include transition(opacity .2s ease-in-out);
+
+  a {
+    // @include transition(color 0s);
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  > li {
+    &:hover,
+    &.-current,
+    &.-parent-current {
+      > a {
+        color: $c-white;
+      }
+    }
+
+    &.-parent-current {
+      > a {
+        background: $c-custom-highlight;
+      }
+    }
+
+    &:hover {
+      ul {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+
+  ul {
+    background: $c-header-bg;
+    border-top: 1px solid $c-dark-grey;
+    visibility: hidden;
+    position: absolute;
+    left: 0;
+    opacity: 0;
+    min-width: 160px;
+    padding: 10px 10px 13px;
+    line-height: 1.2;
+    font-size: 15px;
+    white-space: nowrap;
+
+    li {
+      display: block;
+    }
+
+    a {
+      background: none;
+      padding-top: 6px;
+      padding-bottom: 6px;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fae/globals/navigation/_mobilenav.scss

@@ -0,0 +1,149 @@
+.mobilenav {
+  @include transition($mobilenav-transition);
+  position: fixed;
+  margin-left: negate($sidenav-width);
+  visibility: hidden;
+
+  a {
+    // Right padding prevents text from running over arrow
+    padding: 12px 35px 12px 20px;
+  }
+
+  .subnav {
+    @include transition($mobilenav-transition);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: $sidenav-width;
+    height: 100%;
+    margin-left: negate($sidenav-width);
+    overflow: auto;
+    padding: 0 5px 10px 0;
+    background: $c-body-bg;
+  }
+}
+
+.mobilenav-accordion {
+  > a {
+    @extend %nav-icon;
+
+    &:after {
+      content: fae-icon(chevron_right);
+      right: 18px;
+      top: 14px;
+      font-size: 11px;
+    }
+  }
+
+  &.-open {
+    > ul {
+      margin-left: 0;
+      z-index: 1;
+    }
+
+    > .subnav {
+      padding-right: 0;
+    }
+  }
+}
+
+.mobilenav-subheader {
+  margin-bottom: 0;
+  display: block;
+  padding: 15px 20px;
+  cursor: pointer;
+  background-color: $c-darker-grey;
+  color: $c-white;
+
+  &:before {
+    @include icon-stuff;
+    content: fae-icon(chevron_left);
+    border-radius: 50%;
+    padding: 5px 9px 5px 7px;
+    border: 2px solid $c-white;
+    margin-right: 10px;
+    color: $c-white;
+  }
+}
+
+.mobilenav-toggle {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 14px $content-buffer;
+  cursor: pointer;
+  color: $c-white;
+
+  @include bp(large) {
+    display: none;
+  }
+}
+
+.mobile-active {
+  body,
+  .main-header {
+    margin-left: $sidenav-width;
+  }
+
+  .mobilenav {
+    margin-left: 0;
+    visibility: visible;
+  }
+
+  .mobilenav-toggle {
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 3;
+      height: 2000%;
+      width: 2000%;
+    }
+  }
+}
+
+.mobilenav-user {
+  a {
+    @extend %nav-icon;
+    background: $c-lightest-grey;
+
+    &:after {
+      top: 15px;
+      right: 13px;
+      font-size: 16px;
+    }
+
+    &.-logout {
+      &:after {
+        content: fae-icon(logout);
+      }
+    }
+
+    &.-settings {
+      &:after {
+        content: fae-icon(settings);
+      }
+    }
+
+    &.-support {
+      &:after {
+        content: fae-icon(support);
+      }
+    }
+
+    &.-viewsite {
+      &:after {
+        content: fae-icon(offlink);
+      }
+    }
+  }
+}
+
+.mobilenav-user-header {
+  display: block;
+  position: relative;
+  padding: 15px 10px 15px 20px;
+  cursor: pointer;
+  color: $c-black;
+  background: $c-mid-grey;
+}

data/app/assets/stylesheets/fae/globals/navigation/_search.scss

@@ -0,0 +1,76 @@
+.utility-search {
+  input[type="text"] {
+    background: rgba($c-white, 0.2);
+    width: 100%;
+    border: 0;
+    border-radius: 4px;
+    display: block;
+    color: $c-white;
+  }
+}
+
+.utility-search-wrapper {
+  padding: 14px 16px;
+  width: 320px;
+
+  > ul {
+    margin-top: 10px;
+    font-size: 15px;
+  }
+
+  ul {
+    position: static;
+    width: 100%;
+    border-top: 0;
+    padding: 0;
+    display: block;
+
+    ul {
+      padding-left: 15px;
+      max-height: none;
+    }
+
+    a {
+      padding: 10px 12px;
+      line-height: 1.2;
+
+      &.search-nav-item {
+        padding-bottom: 20px; // Equal spacing before visual separator
+      }
+    }
+  }
+
+  .search-topnav {
+    a {
+      padding: 6px 12px;
+    }
+  }
+}
+
+.search-record-label {
+  display: block;
+  font-size: 13px;
+  font-style: italic;
+  margin-bottom: 5px;
+}
+
+.search-results {
+  span {
+    color: $c-darker-grey;
+  }
+
+  b {
+    color: $c-white;
+    font-weight: normal;
+  }
+}
+
+.search-nav-item {
+  border-bottom: 1px solid $c-dark-grey;
+  margin-bottom: 10px; // Equal spacing after visual separator
+}
+
+.utility-search-hit-area {
+  padding: 0 0 $content-buffer $content-buffer;
+  right: negate($content-buffer);
+}