megatron 0.0.3 → 0.0.4

data/app/assets/stylesheets/megatron/modules/app/_sizes.scss

@@ -0,0 +1,28 @@
+.tiny-width { max-width: $tiny; }
+.x-small-width { max-width: $x-small; }
+.small-width { max-width: $small; }
+.medium-width { max-width: $medium; }
+.large-width { max-width: $large; }
+.x-large-width { max-width: $x-large; }
+.max-width { max-width: 100%; }
+
+.small-height { max-height: 5em; }
+.medium-height { max-height: 15em; }
+.large-height { max-height: 20em; }
+.x-large-height { max-height: 25em; }
+.xx-large-height { max-height: 30em; }
+.max-height { max-height: 100%; }
+
+.max-height-small    { max-height: 5em; }
+.max-height-medium   { max-height: 15em; }
+.max-height-large    { max-height: 20em; }
+.max-height-x-large  { max-height: 25em; }
+.max-height-xx-large { max-height: 30em; }
+.max-height-max      { max-height: 100%; }
+
+.min-height-small    { min-height: 5em; }
+.min-height-medium   { min-height: 15em; }
+.min-height-large    { min-height: 20em; }
+.min-height-x-large  { min-height: 25em; }
+.min-height-xx-large { min-height: 30em; }
+.min-height-max      { min-height: 100%; }

data/app/assets/stylesheets/megatron/modules/app/_typography.scss

@@ -0,0 +1,111 @@
+$mono-font: "Ubuntu Mono", "Consolas", "Liberation Mono", monaco, "Lucida Console", "Consolas", monospace;
+html { font-size: 62.5%; }
+
+body {
+  font: {
+    size: 16px;
+    family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+
+h1 { font-size: 36px; }
+h2 { font-size: 24px; }
+h3 { font-size: 20px; }
+h4 { font-size: 18px; }
+h5 { font-size: 16px; }
+h6 { font-size: 14px; }
+
+h4, h5, h6 {
+  margin: 1em 0;
+}
+
+.mono-font {
+  font-family: $mono-font;
+}
+
+/* @extend this to force long lines of continuous text to wrap */
+.force-wrap {
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.xx-small-text { font-size: 8px; }
+.x-small-text  { font-size: 10px; }
+.small-text    { font-size: 13px; }
+.large-text    { font-size: 18px; }
+.x-large-text  { font-size: 20px; }
+.xx-large-text  { font-size: 24px; }
+
+.big-text      { @extend .large-text; }
+
+.strong-text { font-weight: bold; }
+.normal-text { font-weight: normal; }
+
+.light-text { color: $darkgray; }
+
+.thin-chevron:after {
+  @extend .chevron_thin_icon:before;
+  @extend %icon-font;
+}
+
+.plus-circle:after {
+  @extend .plus_circle_icon:before;
+  @extend %icon-font;
+}
+
+.help-text {
+  font-size: 13px;
+  color: #888;
+}
+
+.hover-link {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.normal-text-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.contain-margin-pad {
+  padding: 1px;
+}
+
+.contain-margin-border {
+  border: 1px solid transparent;
+}
+
+.hide {
+  display: none !important;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+hr {
+  border: none;
+  background: none;
+  width: 100%;
+  border-bottom: 1px solid $page-border;
+  &.dark {
+    border-bottom: 1px solid $gray;
+  }
+}
+
+pre, p, form, ul, dl, ol {
+  margin: { top: $block-margin; bottom: $block-margin; }
+}
+

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

@@ -0,0 +1,94 @@
+$box-content-bg: $bright;
+
+.box {
+  margin: { top: $block-margin; bottom: $block-margin; }
+  display: block;
+  position: relative;
+  @include until($small) {
+    $mg: -(.1 + nth($h-pad-box, 1));
+    margin: $block-margin $mg;
+  }
+}
+
+a.box {
+  color: inherit;
+  text-decoration: none;
+}
+
+.auto-radius {
+  @include at-least($medium) {
+    border-top: {
+      left-radius: 4px;
+      right-radius: 4px;
+    }
+  }
+}
+
+.bordered {
+  border-width: 1px;
+  border-style: solid;
+}
+
+.rounded {
+  border-radius: 4px;
+}
+
+.box-header {
+  margin-top: $block-margin;
+  border: 1px solid $page-border;
+  border-bottom-width: 2px;
+  background-color: $page-gray;
+  background-image: linear-gradient(rgba(#fff, .2), rgba(#fff, 0));
+  position: relative;
+  @include pad-box;
+  @extend .auto-radius;
+
+  &.wide, .wide > &, .wide > .box & {
+    border: { left: 0; right: 0; radius: 0; }
+  }
+}
+
+.box-content {
+  margin-bottom: $block-margin;
+  border: 1px solid $page-border;
+  background: $box-content-bg;
+  padding-top: 1px;
+  position: relative;
+  overflow: hidden;
+  @include h-pad-box;
+  .box &:not(:first-child) {
+    border-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.box-well {
+  border-radius: 4px;
+  box-shadow: rgba(#000, .2) 0 1px 4px inset;
+  background-color: rgba(#000, .03);
+  margin: { top: $block-margin; bottom: $block-margin; }
+  border: 1px solid transparent;
+  @include h-pad-box;
+}
+
+.box-info {
+  background: #f4f4f4;
+  position: relative;
+  border: 1px solid $page-border;
+  font-size: 12px;
+
+  .box &:not(:first-child) {
+    border-top: 0;
+  }
+
+  @include v-pad-box((5px, 10px));
+  @include h-pad-box;
+
+  .box-content & {
+    border: {
+      left: none;
+      right: none;
+    }
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/box/_color-box.scss

@@ -0,0 +1,33 @@
+@mixin color-box($bg) {
+  $border: adjust-color($bg, $lightness: -15%, $saturation: -20%);
+  $color: adjust-color($bg, $lightness: -45%, $saturation: -50%);
+  background-color: $bg;
+  border-color: $border;
+  color: $color;
+  a:not([class*=btn]) {
+    color: darken($color, 5);
+  }
+}
+
+@mixin dark-color-box($bg) {
+  $border: adjust-color($bg, $lightness: -15%, $saturation: -20%);
+  $color: adjust-color($bg, $lightness: 45%, $saturation: -50%);
+  background-color: $bg;
+  border-color: $border;
+  text-shadow: $border 0 1px 1px;
+  color: $color;
+  a:not([class*=btn]) {
+    color: lighten($color, 5);
+  }
+}
+
+.softred-box    { @include color-box($softred)    }
+.softorange-box { @include color-box($softorange) }
+.softyellow-box { @include color-box($softyellow) }
+.softgreen-box  { @include color-box($softgreen)  }
+.softblue-box   { @include color-box($softblue)   }
+.softpurple-box { @include color-box($softpurple) }
+.white-box      { @include color-box($white)   }
+.offwhite-box   { @include color-box($offwhite)   }
+.gray-box       { @include dark-color-box($gray)   }
+.boyblue-box    { @include dark-color-box($boyblue)  }

data/app/assets/stylesheets/megatron/modules/box/_deployment_box.scss

@@ -0,0 +1,37 @@
+.deployment_info {
+  @extend .box-info;
+  display: table;
+  width: 100%;
+  border-bottom: none;
+
+  &-item {
+    display: table-cell;
+    padding: 0 10px;
+
+    &:first-child { 
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+  &:last-child {
+    border-bottom: 1px solid $page-border;
+  }
+}
+
+.shell-box {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: rgba(0, 0, 0, 0.15) 0 1px 3px inset, rgba(255, 255, 255, 0.8) 0 1px;
+  padding: 6px 8px;
+  font-size: 14px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background-color: #424242;
+  color: #eee;
+  font-family: "Liberation Mono","Ubuntu Mono", monaco,
+  "Lucida Console", "Consolas", monospace;
+  text-shadow: #000 0 1px;
+  margin: $block-margin 0;
+}

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

@@ -0,0 +1,4 @@
+@import "base";
+@import "deployment_box";
+@import "placeholder";
+@import "color-box";

data/app/assets/stylesheets/megatron/modules/box/_placeholder.scss

@@ -0,0 +1,6 @@
+.placeholder-box {
+  background: $white;
+  border: 1px solid $page-border;
+  text-align: center;
+  @include v-pad-box;
+}

data/app/assets/stylesheets/megatron/modules/buttons/_animations.scss

@@ -0,0 +1,35 @@
+@keyframes blue-pulse {
+  0%, 100% {
+    background-color: $button-blue;
+  }
+  50% {
+    background-color: darken($button-blue, 12);
+  }
+}
+
+@keyframes green-pulse {
+  0%, 100% {
+    background-color: $green;
+  }
+  50% {
+    background-color: darken($green, 12);
+  }
+}
+
+@keyframes light-blue-pulse {
+  0%, 100% {
+    background-color: hsl(206, 43%, 94%);
+  }
+  50% {
+    background-color: #fdfdfd;
+  }
+}
+@keyframes destroy-pulse {
+  0%, 100% {
+    background-color: $button-red; 
+  }
+  50% {
+    background-color: darken($button-red, 8); 
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/buttons/_buttons.scss

@@ -0,0 +1,266 @@
+$button-blue: $boyblue;
+$button-red: $red;
+$button-dark: lighten($night, 8);
+
+// Button style reset and basic styles
+@mixin btn-base() {
+  font: {
+    size: 14px;
+    family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+
+  padding: 4px 16px;
+  border-radius: 4px;
+  line-height: 31px;
+
+  vertical-align: middle;
+  margin: { top: 0; bottom: 0 }
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  /*border: transparent 1px solid;*/
+  border: none;
+  @include smooth-text;
+
+  // Remove default outlines
+  &:active, &:hover   { outline: none }
+  &:focus             { outline: none; }
+  &::-moz-focus-inner { border: none; padding: 0; }
+
+  // Remove any hover decorations for links
+  &, &:hover, &:focus { text-decoration: none; }
+
+  &.small {
+    font-size: 10px;
+    padding: 1px 8px;
+    border-radius: 4px;
+    line-height: 20px;
+  }
+
+  &.medium {
+    font-size: 13px;
+    padding: 3px 10px;
+    border-radius: 4px;
+    line-height: 24px;
+  }
+
+  &.large {
+    font-size: 18px;
+    padding: 8px 20px;
+    border-radius: 5px;
+    line-height: 32px;
+  }
+  &.x-large {
+    font-size: 24px;
+    padding: 12px 25px;
+    border-radius: 5px;
+    line-height: 32px;
+  }
+}
+
+%btn-base {
+  @include btn-base;
+  font-weight: bold;
+  &:focus {
+    transition: box-shadow .15s ease;
+  }
+
+  &:hover, &:active {
+    transition: none;
+  }
+
+  &.disabled, &[disabled] {
+    opacity: .5;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.btn {
+  $bg: #fdfdfd;
+
+  @extend %btn-base;
+  @include light-button($bg);
+  color: $text-color;
+
+  &:hover, &:focus {
+    $bg: hsl(206, 43%, 96%);
+    background-color: $bg;
+    box-shadow: hsl(203, 47%, 65%) 0 0 0 1px inset;
+    color: hsl(204, 36%, 46%);
+  }
+
+  &:focus {
+    animation: light-blue-pulse 1.5s linear infinite;
+    box-shadow: hsl(204, 67%, 70%) 0 0 0 2px inset;
+  }
+
+  &:active {
+    background-color: $bg;
+    background-image: none;
+    box-shadow: hsl(203, 47%, 65%) 0 0 0 1px inset, rgba(#000, .2) 0 1px 7px inset;
+  }
+}
+
+.text-btn {
+  @include btn-base;
+  border: 0;
+  padding: { left: 0; right: 0; }
+  border-radius: 0;
+  margin: 0 15px;
+  background: transparent linear-gradient($button-blue, $button-blue) 50% 75%/0px 1px no-repeat;
+  transition: background .1s ease, color .15s ease;
+
+  color: $text-color;
+
+  text-shadow: 1px 0 hsl(0, 100%, 100%), -1px 0 hsl(0, 100%, 100%), 2px 0 hsl(0, 100%, 100%), -2px 0 hsl(0, 100%, 100%);
+  &:hover, &:focus {
+    color: $button-blue;
+    background: transparent linear-gradient($button-blue, $button-blue) 50% 75%/100% 1px no-repeat;
+  }
+
+  &:active {
+    transform: scale(.97, .97);
+    color: $text-color;
+    background: transparent linear-gradient($text-color, $text-color) 50% 75%/100% 1px no-repeat;
+  }
+}
+
+.primary-btn {
+  @extend %btn-base;
+  @include dark-button($button-blue);
+  color: #fff;
+
+  &:hover {
+    @include dark-button(darken($button-blue, 8));
+    color: #fff;
+  }
+
+  &:focus {
+    border-color: transparent;
+    animation: blue-pulse 1.5s linear infinite;
+    box-shadow: lighten($button-blue, 20) 0 0 0 2px inset;
+    color: #fff;
+  }
+
+  &:active {
+    background-color: darken($button-blue, 5);
+    background-image: none;
+    @include dark-button-active-shadow;
+  }
+}
+
+.destroy-btn {
+  $destroy-bright: #fdfdfd;
+  $button-red: $red;
+
+  @extend %btn-base;
+
+  @include light-button($destroy-bright);
+  color: $button-red;
+
+  &:focus {
+    border-color: $button-red;
+    box-shadow: rgba($button-red, 0.8) 0 0 0 2px inset;
+  }
+
+  &:hover {
+    @include dark-button($button-red);
+    color: #fff;
+  }
+
+  &:active {
+    color: #fff;
+    background-color: darken($button-red, 8);
+    border-color: scale-color($button-red, $lightness: -30%);
+    background-image: none;
+    @include dark-button-active-shadow;
+    @include dark-text-shadow(scale-color($button-red, $lightness: -5%));
+  }
+}
+
+.primary-destroy-btn {
+  $button-darkred: darken($button-red, 8);
+  @extend %btn-base;
+  @include dark-button($button-red);
+  color: #fff;
+
+  &:hover, &:focus {
+    @include dark-button($button-darkred);
+    color: #fff;
+  }
+
+  &:focus {
+    animation: destroy-pulse 1.5s linear infinite;
+    box-shadow: lighten($button-red, 25) 0 0 0 2px inset;
+  }
+
+  &:active {
+    color: #fff;
+    background-color: $button-darkred;
+    border-color: transparent;
+    @include dark-button-active-shadow;
+  }
+}
+
+.dark-btn {
+  color: #fff;
+  @extend %btn-base;
+  @include dark-button($button-dark);
+  
+  &:hover {
+    @include dark-button(darken($button-dark, 8));
+  }
+
+  &:focus {
+    box-shadow: rgba(#fff, .5) 0 0 0 2px inset;
+    border-color: transparent;
+  }
+
+  &:active {
+    background-color: darken($button-dark, 12);
+    background-image: none;
+    @include dark-button-active-shadow;
+  }
+}
+
+.green-btn {
+  @extend %btn-base;
+  @include dark-button($green);
+  color: #fff;
+
+  &:hover {
+    @include dark-button(darken($green, 5));
+  }
+
+  &:focus {
+    border-color: transparent;
+    box-shadow: lighten($green, 20) 0 0 0 2px inset;
+  }
+
+  &:active {
+    background-color: darken($green, 8);
+    background-image: none;
+    @include dark-button-active-shadow;
+  }
+}
+
+.green-outline-btn {
+  @include dark-outline-button($green);
+}
+
+.blue-outline-btn {
+  @include dark-outline-button($boyblue);
+}
+
+.dark-outline-btn {
+  @include dark-outline-button($button-dark);
+}
+
+.header-btn {
+  margin-left: 8px;
+  float: right;
+  .page-header & {
+    margin: 13px 0;
+  }
+}