fae-railsz 2.1.0

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

@@ -0,0 +1,142 @@
+.sidenav {
+  @include stack($fae-nav-stack);
+  position: absolute;
+  left: $content-buffer;
+
+  @include bp(large-down) {
+    display: none;
+  }
+
+  a {
+    padding: 3px 0;
+
+    &.-current {
+      font-weight: bold;
+      color: $c-black;
+    }
+  }
+
+  .subnav {
+    padding: 10px 10px 10px 0;
+    background-color: $c-light-grey;
+  }
+
+  li {
+    &.-parent-current {
+      > a {
+        color: $c-white;
+        background-color: $c-custom-highlight;
+      }
+
+      > ul {
+        display: block;
+      }
+    }
+  }
+
+  > ul > li:not(.sidenav-accordian) {
+    border: 1px solid $c-grey;
+    border-bottom: none;
+    background-color: $c-white;
+
+    &:last-of-type {
+      border-bottom: 1px solid $c-grey;
+    }
+
+    > a {
+      padding: 13px 15px;
+      font-size: 15px;
+    }
+  }
+
+  // Index pages
+  ~ .content,
+  // Edit pages
+  ~ .simple_form {
+    @include bp(large) {
+      padding-left: $sidenav-width + $content-buffer;
+    }
+  }
+}
+
+// The accordion. An <li> element.
+.sidenav-accordion {
+  font-size: 13px;
+  line-height: 1.38em;
+
+  &.-open {
+    > a {
+      &:after {
+        content: fae-icon(arrow_down);
+        top: 19px;
+        transform: rotate(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  &.-parent-current {
+    > a:hover:after {
+      color: $c-white;
+    }
+
+    &.-open {
+      > a {
+        &:after {
+          color: $c-white;
+        }
+      }
+    }
+  }
+
+  a {
+    padding-left: $content-buffer;
+    padding-right: $content-buffer;
+    margin-top: 7px;
+
+    &.-current {
+      border-left: 5px solid $c-custom-highlight;
+      padding-left: 25px;
+    }
+  }
+
+  > ul:first-of-type > li:first-child a {
+    margin-top: 0;
+  }
+
+  &:not(:first-of-type) > a {
+    border-top: 0;
+  }
+
+  > a {
+    @extend %nav-icon;
+
+    margin-top: 0;
+    padding: 13px $content-buffer 13px 15px;
+    font-size: 15px;
+    background-color: $c-white;
+
+    &:after {
+      content: fae-icon(arrow_up);
+
+      top: 18px;
+      right: 13px;
+      color: $c-black;
+      font-size: 6px;
+
+      transition: opacity 0.4s ease,
+                  color 0.4s ease;
+      transform: rotate(90deg);
+      opacity: 0;
+    }
+
+    &:hover:after {
+      opacity: 1;
+    }
+  }
+
+  // Expand nested accordions when the main nav is -current
+  ul {
+    display: none;
+  }
+}

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

@@ -0,0 +1,95 @@
+// Utility nav. View Site, Support, Username, etc.
+.utility-nav {
+  position: absolute;
+  top: 0;
+  right: $content-buffer;
+
+  @include bp(large-down) {
+    display: none;
+  }
+
+  a {
+    padding-left: 14px;
+    padding-right: 14px;
+
+    &.grabatar-link {
+      padding-top: 15px;
+      padding-bottom: 15px;
+    }
+  }
+
+  ul {
+    font-size: 16px;
+    display: none;
+  }
+
+  li {
+    vertical-align: top;
+  }
+}
+
+.utility-dropdown {
+  &:hover {
+    ul {
+      display: block;
+    }
+  }
+
+  li {
+    display: block;
+    margin-left: 0;
+  }
+
+  ul,
+  .utility-search-hit-area {
+    position: absolute;
+    top: 70px;
+    z-index: 2;
+    display: none;
+  }
+
+  ul,
+  .utility-search-wrapper {
+    background: $c-header-bg;
+    border-top: 1px solid $c-dark-grey;
+    font-size: 14px;
+  }
+
+  ul {
+    width: 140px;
+    padding: 8px 0 12px;
+    left: -11px;
+    font-size: 13px;
+
+    a {
+      padding: 7px 25px;
+    }
+  }
+}
+
+.grabatar {
+  border-radius: 50px;
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+  vertical-align: middle;
+  background: $c-custom-highlight;
+}
+
+.grabatar-link {
+  &:after {
+    @include icon-stuff;
+    content: fae-icon(arrow_down);
+    font-size: 5px;
+    color: $c-text-sub;
+    display: inline-block;
+    padding-left: 5px;
+    vertical-align: middle;
+  }
+
+  &:hover {
+    &:after {
+      color: $c-white;
+    }
+  }
+}

data/app/assets/stylesheets/fae/modules/_alerts.scss

@@ -0,0 +1,50 @@
+.flash-message {
+  border-style: solid;
+  border-left-width: 3px;
+  margin: 0 auto;
+  padding: 20px;
+  width: calc(100% - #{$content-buffer * 2});
+
+  &:before {
+    @include icon-stuff;
+    margin-right: 10px;
+  }
+
+  .sidenav ~ & {
+    @include bp(large) {
+      margin-left: $sidenav-width + $content-buffer;
+      width: calc(100% - #{$sidenav-width + ($content-buffer * 2) });
+    }
+  }
+}
+
+.notice {
+  border-color: $c-notice-content;
+  background: $c-notice-bg;
+  color: $c-notice-content;
+
+  &:before {
+    content: fae-icon(check);
+  }
+}
+
+.warning {
+  border-color: $c-warning-content;
+  background: $c-warning-bg;
+  color: $c-warning-content;
+
+  &:before {
+    content: fae-icon(alert);
+  }
+}
+
+.flash-message.error,
+.alert {
+  border-color: $c-error-content;
+  background: $c-error-bg;
+  color: $c-error-content;
+
+  &:before {
+    content: fae-icon(alert);
+  }
+}

data/app/assets/stylesheets/fae/modules/_buttons.scss

@@ -0,0 +1,62 @@
+// All buttons
+
+input[type=submit],
+button[type=button],
+.add-button,
+.button {
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 11px 14px;
+  border: 1px solid transparent;
+  line-height: 1;
+}
+
+// Dark buttons
+
+input[type=submit],
+.add-button {
+  @include gradient-vertical($start-color: $c-dark-button-gradient-start, $end-color: $c-dark-button-gradient-end);
+  color: $c-dark-button;
+  border-color: $c-dark-button-gradient-start;
+
+  &:hover {
+    background: $c-dark-button-gradient-end;
+    color: $c-white;
+  }
+}
+
+.add-button {
+  &:before {
+    @include icon-stuff;
+    content: fae-icon(heavy_plus);
+    font-size: 12px;
+    margin-right: 7px;
+  }
+}
+
+// Light buttons
+
+button[type=button],
+.button {
+  @include gradient-vertical($start-color: $c-light-button-gradient-start, $end-color: $c-light-button-gradient-end);
+  color: $c-light-button;
+  border-color: $c-border;
+
+  &:hover {
+    background: $c-light-button-gradient-end;
+  }
+}
+
+.button {
+  &.-small {
+    padding: 5px 10px;
+    font-size: 12px;
+    margin: 3px;
+
+    &:hover {
+      color: $c-light-button;
+    }
+  }
+}

data/app/assets/stylesheets/fae/modules/_modal.scss

@@ -0,0 +1,78 @@
+.hinter-clicker {
+  @include transition(color .2s);
+  margin-left: 5px;
+  cursor: pointer;
+  color: $c-darker-grey;
+
+  &:hover {
+    color: $c-text-heavy;
+  }
+
+  &.hovered {
+    position: relative;
+    z-index: 10000;
+  }
+}
+
+.simplemodal-overlay {
+  background: $c-modal-overlay-bg;
+}
+
+.simplemodal-container {
+  position: relative;
+  background: $c-modal-bg;
+  color: $c-darker-grey;
+  padding: 20px;
+  line-height: 1.5;
+  font-size: 13px;
+  box-shadow: 0 3px 8px 0 $c-box-shadow;
+
+  h3 {
+    color: $c-white;
+    margin-bottom: 12px;
+    font-size: 20px;
+    font-weight: normal;
+  }
+
+  h4 {
+    color: $c-white;
+    margin-bottom: 12px;
+    font-size: 16px;
+  }
+
+  p {
+    margin-bottom: 15px;
+
+    span {
+      text-decoration: underline;
+    }
+  }
+
+  table {
+    width: calc(100% + 40px);
+    margin: 20px -20px -20px;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    display: block;
+  }
+}
+
+.simplemodal-close {
+  display: block;
+  height: 10px;
+
+  &:before {
+    @include icon-stuff;
+    content: fae-icon(delete_x);
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: $c-white;
+    cursor: pointer;
+    font-size: 12px;
+  }
+}

data/app/assets/stylesheets/fae/modules/_toggles.scss

@@ -0,0 +1,48 @@
+// slider wrapper for the yes/no switcher
+.slider-wrapper {
+  display: block;
+  position: relative;
+  width: 60px;
+  border: 1px solid $c-mid-grey;
+  border-radius: 2px;
+  font-size: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  text-decoration: none;
+  background: $c-white;
+}
+
+.slider-options {
+  @include transition(left .2s);
+  position: relative;
+  left: -35px;
+  white-space: nowrap;
+
+  .slider-yes-selected & {
+    left: 0;
+  }
+}
+
+.slider-option-selector {
+  display: inline-block;
+  width: 18px;
+}
+
+.slider-option-no,
+.slider-option-yes {
+  @include user-select(none);
+  display: inline-block;
+  width: 35px;
+  padding: 3px 4px;
+  text-align: center;
+}
+
+.slider-option-no {
+  color: $c-slider-no-color;
+  background: $c-slider-no-bg;
+}
+
+.slider-option-yes {
+  color: $c-white;
+  background: $c-custom-highlight;
+}