megatron 0.0.3 → 0.0.4

data/app/assets/stylesheets/megatron/modules/lists/_base.scss

@@ -0,0 +1,13 @@
+%base-list {
+  list-style: none;
+  padding: 0;
+  margin: { top: $block-margin; bottom: $block-margin; }
+
+  .list-item {
+    margin: 0;
+  }
+
+  &.wide {
+    @include invert-h-pad;
+  }
+}

data/app/assets/stylesheets/megatron/modules/lists/_box-list.scss

@@ -0,0 +1,53 @@
+.box-list {
+  @extend %base-list;
+  .list-item {
+    display: block;
+    border: $page-border 1px solid { bottom-width: 0 }
+    background: $bright-table-bg;
+    @include h-pad-box;
+    padding-bottom: 1px;
+
+    &:last-child {
+      border-bottom-width: 1px;
+    }
+  }
+  a.list-item {
+    text-decoration: none;
+    color: inherit;
+    &:hover {
+      background: $white;
+    }
+  }
+}
+
+.wide .list-item {
+  border: { 
+    left-color: transparent;
+    right-color: transparent;
+  }
+}
+
+.box .box-list {
+  margin: 0;
+  .list-item:first-child{
+    border-top-width: 0;
+    padding-top: 1px;
+  }
+}
+
+.after-icon {
+  position: relative;
+  &:after {
+    font-size: 1.5em;
+    color: $lightgray;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(0, -50%);
+    transition: all .3s ease-out;
+    opacity: .5;
+  }
+  &:hover:after {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "base";
+@import "box-list";

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

@@ -0,0 +1,3 @@
+@import "notifications";
+@import "notice";
+@import "pop-message";

data/app/assets/stylesheets/megatron/modules/messages/_notice.scss

@@ -0,0 +1,57 @@
+.notice {
+  $notice-yellow: $softyellow;
+  $notice-blue: $softblue;
+  $notice-green: $softgreen;
+  $notice-red: $softred;
+  $notice-gray: $offwhite;
+
+  border-radius: 3px;
+  @include h-pad_box;
+  border: {
+    width: 1px;
+    style: solid;
+  }
+  margin: { top: $block-margin; bottom: $block-margin; }
+
+  // Themes
+  //
+  &.info {
+    @extend .softblue-box;
+  }
+  &.positive {
+    @extend .softgreen-box;
+  }
+  &.warning {
+    @extend .softyellow-box;
+  }
+  &.error {
+    @extend .softred-box;
+  }
+
+  // Layouts
+  //
+  &.full, &.flush {
+    @include invert-h-pad;
+    border: {
+      radius: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  &.flush {
+    margin-top: 0;
+    border-top-color: transparent;
+    transform: translateY(-1px);
+  }
+
+  // Children
+  p {
+    margin: { top: $block-margin * .8; bottom: $block-margin * .8; }
+  }
+
+  a:hover, :focus {
+    color: $blue;
+  }
+
+}

data/app/assets/stylesheets/megatron/modules/messages/_notifications.scss

@@ -0,0 +1,126 @@
+$status-text: #fff;
+$status-text-shadow: rgba(#000, .2) 0 1px 1px;
+
+@mixin notification-style($color) {
+  .notification-content { 
+    background: $color;
+  }
+  .notification-content:before {
+    background: darken($color, 10);
+  }
+}
+
+.form-flash {
+  display: none;
+}
+
+.notification {
+  position: fixed; top: 0; left: 0; right: 0;
+  height: 1px;
+  z-index: $z-notifications;
+  overflow: visible;
+  transform: translate3d(0,0,0);
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 56px;
+    z-index: -1;
+  }
+
+  &-content {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    color: $status-text;
+    text-shadow: $status-text-shadow;
+    background: $purple;
+    display: table;
+    table-layout: fixed;
+    animation: slide-down .3s;
+    @extend .bubble_icon;
+    &:before {
+      @include smooth-text;
+      background: darken($purple, 10);
+      font-family: 'roboticons';
+      display: table-cell;
+      width: 65px;
+      font-size: 30px;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+
+  &-message, &-close {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  &-message {
+    padding: 8px 15px;
+    a { 
+      color: #fef0bd;
+      &:hover, &:focus {
+        color: inherit;
+      }
+    }
+  }
+
+  &-close {
+    width: 54px;
+    text-align: center;
+    text-decoration: none;
+    padding: 14px;
+    font-size: 25px;
+    color: #fff;
+    cursor: pointer;
+    opacity: .7;
+    transition: opacity .1s ease-out;
+    animation: half-spin .5s ease-out;
+
+    [class*=_icon]{
+      display: block;
+      transform: scale(.80, .80);
+      transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
+      cursor: pointer;
+      &:before {
+        position: relative;
+        top: 3px;
+        cursor: pointer;
+      }
+    }
+
+    &:focus, &:hover {
+      opacity: 1;
+      outline: none;
+      [class*=_icon]{
+        transform: scale(1, 1);
+      }
+    }
+  }
+
+  &.dismiss {
+    animation: fade-out .3s .2s ease-in;
+    .notification-content {
+      animation: slide-up .2s .3s ease-out;
+    }
+    .notification-close {
+      animation: half-spin .5s ease-in reverse;
+    }
+  }
+
+  &.error {
+    @include notification-style($red);
+  }
+
+  &.action {
+    @include notification-style($boyblue);
+  }
+  &.success {
+    @include notification-style($green);
+  }
+
+  &.message {
+    @include notification-style($slate);
+  }
+}

data/app/assets/stylesheets/megatron/modules/messages/_pop-message.scss

@@ -0,0 +1,157 @@
+@mixin pop-message-style($bg, $icon, $color, $link-hover: false) {
+  color: $color;
+  &:before {
+    @extend .#{$icon}_icon:before;
+  }
+  .icon, &:before {
+    background: lighten($bg, 6);
+  }
+  .dismiss {
+    background: darken($bg, 6);
+    &:hover {
+      background: darken($bg, 3);
+    }
+  }
+  p { 
+    background: $bg;
+    &:hover {
+      background: lighten($bg, 4);
+    }
+  }
+  @if ($link-hover) {
+    a:hover, a:hover:after { color: $link-hover; }
+  }
+
+  &.with-url:not(.dismissable):hover {
+    &:before {
+      background: lighten($bg, 10);
+    }
+    p:hover {
+      background: lighten($bg, 4);
+    }
+  }
+}
+
+.pop-message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  margin: 0 auto;
+  height: 0;
+  overflow: visible;
+  font-size: .95em;
+  text-shadow: none;
+  &.new {
+    animation: slide-down .3s;
+  }
+
+  @include until($medium) {
+    display: none;
+  }
+
+  .message-content {
+    display: table;
+    margin: 0 auto;
+    position: relative;
+    @include smooth-text;
+    &:before {
+      font-family: 'roboticons';
+      transition: all .2s ease;
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+      width: 2em;
+      font-size: 1.1em;
+    }
+    p, .dismiss {
+      display: table-cell;
+      margin: 0;
+      transition: all .2s ease;
+    }
+  }
+
+  .dismissable {
+    &:before { display: none; }
+    p { position: relative; }
+  }
+
+  .icon {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    width: 2em;
+    padding: 0;
+  }
+
+  .dismiss {
+    padding-left: 0;
+    width: 2em;
+    color: rgba(#fff, .3);
+
+    &:hover {
+      color: rgba(#fff, .5);
+    }
+
+    &:before {
+      color: inherit;
+      display: table-cell;
+      vertical-align: middle;
+      font-size: 1.1em;
+      vertical-align: middle;
+      display: inline-block;
+      position: relative; top: -.1em;
+    }
+  }
+
+  .dismiss-icon {
+    vertical-align: middle;
+    font-size: 1.2em;
+  }
+
+  p {
+    padding: .4em .6em;
+  }
+
+  p a {
+    display: inline-block;
+    text-decoration: none;
+    transition: all .2s ease;
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0; bottom: 0; left: 0; right: 0;
+    }
+    &:after {
+      @extend .chevron_icon:before;
+      position: relative; top: 1px;
+      font-family: 'roboticons';
+      padding-left: .4em;
+      display: inline-block;
+      text-decoration: none;
+    }
+  }
+  
+  // Styles
+  .message-content {
+
+    &:before { color: inherit; }
+    p a, p a:after { color: inherit; }
+
+    // Standard style
+    &.normal {
+      @include pop-message-style(lighten($night, 7), star, $lightgray, $overcast);
+    }
+
+    // Error style
+    &.negative, &.error {
+      @include pop-message-style(darken($red, 14), warning, #fff);
+    }
+
+    &.positive {
+      @include pop-message-style(darken($green, 14), warning, #fff);
+    }
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/nav/_auto-navigate.scss

@@ -0,0 +1,7 @@
+.auto-navigate {
+  cursor: pointer;
+
+  &:active {
+    cursor: text;
+  }
+}

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

@@ -0,0 +1,35 @@
+.breadcrumbs {
+  display: table-cell;
+  word-wrap: break-word;
+  letter-spacing: -4px;
+  /*word-spacing: -.3em;*/
+}
+
+.breadcrumb {
+  letter-spacing: 0;
+  &:after {
+    content: "";
+    border-right: 1px solid $gray;
+    height: .9em;
+    width: .2em;
+    padding: 0 5px;
+    color: $light-text-color;
+    display: inline-block;
+    @include smooth-text;
+    transform: translateX(-6px) rotate(20deg);
+  }
+
+  &:first-child {
+    font-weight: 500;
+  }
+  &:last-child {
+    text-decoration: none;
+    font-weight: bold;
+    color: $text-color;
+
+    &:after {
+      content: "";
+      display: none;
+    }
+  }
+}