megatron 0.0.3 → 0.0.4

data/app/assets/stylesheets/megatron/modules/nav/_index.scss

@@ -0,0 +1,8 @@
+@import "mixins";
+@import "primary-nav";
+@import "secondary-nav";
+@import "main-sidebar";
+@import "breadcrumbs";
+@import "tabs";
+@import "nav-toggle";
+@import "auto-navigate";

data/app/assets/stylesheets/megatron/modules/nav/_main-sidebar.scss

@@ -0,0 +1,21 @@
+.main-sidebar {
+  @include h-pad_box;
+  @include until($x-large) {
+    @include invert-h-pad;
+    border-top: 1px solid $page-border;
+    box-shadow: #fff 0 1px inset;
+  }
+  @include at-least($x-large) {
+    padding-top: 1px;
+    background: $page-gray;
+    border-left: 1px solid $page-border;
+  }
+  section {
+    margin: { top: $block-margin; bottom: $block-margin; }
+  }
+
+  section + section {
+    border-top: 1px solid $page-border;
+    box-shadow: #fff 0 1px inset;
+  }
+}

data/app/assets/stylesheets/megatron/modules/nav/_mixins.scss

@@ -0,0 +1,53 @@
+@mixin link-label-base($color, $offset, $direction: left) {
+  position: absolute;
+  #{$direction}: $offset;
+  z-index: -1;
+  font-size: 14px;
+  background: $color;
+  border-radius: 4px;
+  top: 50%;
+  color: #fff;
+  padding: 10px 15px;
+  line-height: 20px;
+  opacity: 0;
+
+  transform: translate3d(-5px, -50%, 0);
+  &:before {
+    @include triangle($direction, $color, 4px);
+    content: "";
+    position: absolute;
+    #{$direction}: -4px;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
+  }
+}
+
+@mixin link-label-hover {
+  position: relative;
+  z-index: 3;
+  + .link_label {
+    transition: {
+      property: opacity, transform;
+      timing-function: ease-out;
+      duration: .15s;
+    }
+    z-index: 2;
+    transform: translate3d(10px, -50%, 0);
+    opacity: 1;
+    font-weight: normal;
+    @include smooth-text;
+    &:before { opacity: 1; }
+  }
+}
+
+@mixin link-label($color, $offset, $direction: left) {
+  .link_label {
+    @include link-label-base($color, $offset, $direction); 
+  }
+
+  [class*=_icon]:hover {
+    @include link-label-hover;
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/nav/_nav-toggle.scss

@@ -0,0 +1,61 @@
+$header-pad: 15px; 
+
+// Nav button for toggling mobile nav
+.nav_toggle {
+  
+  float: left;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 8px 2px;
+  border: 0px;
+  background: none;
+  position: absolute;
+  right: $header-pad;
+  
+  // Do not show for large screens
+  @include at-least($medium){
+    display: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  .icon {
+    &, &:before, &:after {
+      position: relative;
+      display: block;
+      width: 18px;
+      height: 3px;
+      background: #fff;
+      transition: all .15s ease-in-out;
+    }
+    &:before, &:after {
+      content: "";
+    }
+    &:before { top: -6px; }
+    &:after { top: 3px; }
+
+    @include until($medium) {
+      .active-nav & {
+        background: rgba(#fff, 0);
+        &:before {
+          transform: rotate(-45deg);
+          top: -1px;
+        }
+        &:after {
+          transform: rotate(45deg);
+          top: -4px;
+        }
+      }
+    }
+  }
+}
+
+.nav_menu {
+  color: #fff;
+  position: absolute;
+  left: -10%;
+  top: 100%;
+  font-size: 10px;
+}

data/app/assets/stylesheets/megatron/modules/nav/_primary-nav.scss

@@ -0,0 +1,120 @@
+$primary-nav-color:       rgba(#fff, 0.4);
+$primary-nav-here-color:  #fff;
+$primary-nav-hover-color: rgba(#fff, 0.7);
+$header-pad: 15px;
+
+.active-nav {
+  @include until($medium) {
+    overflow-x: hidden;
+    .page {
+      transform: translate3d(map-get($primary-nav-width, small), 0, 0);
+      overflow-x: hidden;
+    }
+  }
+}
+
+.primary_nav-item {
+  color: $primary-nav-color;
+  text-decoration: none;
+  transition: .1s color ease-in-out;
+  display: block;
+  padding: 10px 8px 6px;
+  border-bottom: 1px solid rgba(#fff, .1);
+
+  &:hover, &:focus {
+    color: $primary-nav-hover-color;
+  }
+
+  &.here {
+    color: $primary-nav-here-color;
+  }
+  
+  .icon_label {
+    @include smooth-text;
+  }
+
+  @include until($medium) {
+
+    &:hover, &:focus {
+      background: rgba(#fff, .05);
+    }
+
+    &.here {
+      background-color: $link-color;
+      &:hover, &:focus {
+        background-color: lighten($link-color, 3);
+      }
+    }
+
+    #{icon-selector()} {
+      display: inline-block;
+      font-size: 26px;
+      width: 28px;
+      text-align: center;
+    }
+
+    .icon_label {
+      line-height: 22px;
+      position: relative;
+      top: -5px;
+    }
+    
+  }
+
+  @include at-least($medium) {
+    width: map-get($primary-nav-width, large);
+    text-align: center;
+    position: relative;
+    border: none;
+    padding: 0;
+    [class*=_icon] {
+      display: block;
+      width: 100%;
+      padding: 7px 0;
+    }
+
+    #{icon-selector()} {
+      font-size: 35px;
+    }
+
+    @include link-label($link-color, map-get($primary-nav-width, large) - 15);
+
+  }
+}
+
+// Special positioning for sign_out link
+//
+@include at-least($medium) {
+  
+  // Move top-links to the top right
+  //
+  .primary_nav-top {
+    position: absolute;
+    top: $header-pad;
+    right: nth($h-pad-box, 2);
+    font-size: 14px;
+    line-height: 22px;
+
+    .primary_nav-item {
+      padding: 0;
+      display: inline-block;
+      margin-left: .8em;
+      width: auto;
+      [class*=_icon] {
+        display: inline;
+      }
+      #{icon-selector()} {
+        display: inline;
+        font-size: 1.2em;
+        position: relative;
+        top: .1em;
+      }
+    }
+  }
+}
+
+@include at-least($max + 20) {
+  .primary_nav-top {
+    right: 0;
+  }
+}

data/app/assets/stylesheets/megatron/modules/nav/_secondary-nav.scss

@@ -0,0 +1,105 @@
+// Colors
+$secondary-nav-bg: $silver;
+$secondary-nav-color: #8d9297;
+$secondary-nav-border: $overcast;
+
+$secondary-nav-here-icon-color: $link-color;
+$secondary-nav-here-text-color: $text-color;
+$secondary-nav-here-bg: #fafafa;
+$secondary-nav-hover-bg: #f5f5f5;
+
+// Sizes
+$secondary-nav-width-small: 38px;
+
+.secondary_nav {
+  background: $secondary-nav-bg;
+
+  @include until($small) {
+    border-bottom: 1px solid $secondary-nav-border;
+  }
+
+  @include at-least($small) {
+    border-right: 1px solid $secondary-nav-border;
+
+    .link_label { 
+      display: inline-block;
+      @include smooth-text;
+    }
+  }
+}
+
+.secondary_nav-item {
+  white-space: nowrap;
+  text-decoration: none;
+  display: table-cell;
+  text-align: center;
+  color: $secondary-nav-color;
+  line-height: 30px;
+  position: relative;
+  padding: 3px 8px;
+
+  .link_label {
+    display: none;
+    @include at-least(450px) {
+      display: block;
+      font-size: 11px;
+      line-height: 18px;
+    }
+  }
+
+  @include at-least($small) {
+    text-align: left;
+    display: block;
+  }
+
+  @include between($small, $large) {
+    padding: 0;
+    [class*=_icon] {
+      display: inline-block;
+      padding: 3px 8px;
+    }
+    @include link-label(lighten($base-bg, 15), 30px);
+  }
+
+  @include at-least($large) {
+    padding: 3px 18px 3px 10px;
+
+    .link_label {
+      display: inline-block;
+      font-size: 14px;
+      transition: opacity ease-out .3s;
+    }
+  }
+
+  #{icon-selector()} {
+    font-size: 20px;
+    width: 25px;
+    display: inline-block;
+    text-align: center;
+    position: relative;
+    top: 3px;
+  }
+
+
+  &:focus, &:hover, &.here {
+    box-shadow: 1px 0 0 rgba(#000, .1), -1px 0 0 rgba(#000, .1);
+    background: $secondary-nav-hover-bg;
+    color: $secondary-nav-here-text-color;
+
+    @include at-least($small) {
+      box-shadow: 0 1px 0 rgba(#000, .1), 0 -1px 0 rgba(#000, .1);
+
+      &:first-child {
+        box-shadow: 0 1px 0 rgba(#000, .1);
+      }
+    }
+  }
+
+  &.here {
+    background: $secondary-nav-here-bg;
+
+    #{icon-selector()} {
+      color: $secondary-nav-here-icon-color;
+    }
+  }
+}

data/app/assets/stylesheets/megatron/modules/nav/_tabs.scss

@@ -0,0 +1,87 @@
+$main-nav-bg: lighten($secondary_nav-bg, 1);
+$main-nav-here-bg: $main-bg;
+$main-nav-color: $lightgray;
+$main-nav-here-color: $mediumgray;
+
+.tabs {
+  @include invert-h-pad;
+  @include h-pad_box;
+  margin: { top: $block-margin; bottom: $block-margin; }
+  border-bottom: 1px solid $page-border;
+  display: table;
+  top: 1px;
+  position: relative;
+
+  // Fake table cell allowing tabs to have auto-width
+  &:after {
+    display: table-cell;
+    width: 100%;
+    content: "";
+  }
+
+  .tab-btn {
+    position: absolute;
+    right: nth($h-pad-box, 1);
+    @include at-least($medium) {
+      right: nth($h-pad-box, 2);
+    }
+  }
+}
+
+.box-tabs {
+  border: 1px solid $page-border;
+  .box &:not(:first-child) {
+    border-top: 0;
+  }
+}
+
+.tab {
+  display: table-cell;
+  width: auto;
+  padding: 10px 13px;
+  text-decoration: none;
+  color: $main-nav-color;
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+  white-space: pre;
+
+  border: {
+    width: 1px;
+    left-width: 0;
+    style: solid;
+    color: $page-border;
+  }
+
+  &:hover, &:focus {
+    color: $gray;
+  }
+
+  &.here {
+    color: $mediumgray;
+    background: linear-gradient(rgba(#fff, .8), rgba(#fff, 0));
+  }
+}
+
+.box-tabs .tab {
+  border-top: 0;
+
+  &.here {
+    background-color: $white;
+  }
+}
+
+.tabs .tab {
+  &:first-child {
+    border-top-left-radius: 5px;
+    border-left-width: 1px;
+  }
+
+  &:last-of-type {
+    border-top-right-radius: 5px;
+  }
+  &.here {
+    border-bottom-color: $main-nav-here-bg;
+  }
+}
+