megatron 0.0.3 → 0.0.4

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

@@ -0,0 +1,4 @@
+@import "mixins";
+@import "buttons";
+@import "animations";
+@import "pills";

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

@@ -0,0 +1,108 @@
+@function auto-gradient($color, $difference: 5%) {
+  @return linear-gradient(scale-color($color, $lightness: $difference), scale-color($color, $lightness: -$difference))
+}
+
+@mixin light-button-gradient { 
+  background-image: linear-gradient(
+    rgba(#fff, 1) 2%, rgba(#fff, .6) 40%, rgba(#fff, .4) 50%, rgba(#fff, .1) 80%, rgba(#fff, 0) 95%
+  );
+}
+
+@mixin dark-button-gradient  {
+  background-image: linear-gradient(
+    rgba(#fff,.5), rgba(#fff, .2) 2%, rgba(#fff, .02) 50%, rgba(#fff, 0) 50%
+  );
+}
+
+@mixin dark-outline-button($color) {
+  @extend %btn-base;
+  @include border-button($color);
+  color: $color;
+  text-shadow: none;
+
+  &:hover {
+    @include dark-button(darken($color, 5));
+  }
+
+  &:hover, &:focus {
+    color: #fff;
+  }
+
+  &:focus {
+    @include dark-button($color);
+    box-shadow: rgba(#fff, .5) 0 0 0 2px inset;
+  }
+
+  &:active {
+    color: #fff;
+    background-color: darken($color, 8);
+    background-image: none;
+    @include dark-button-active-shadow;
+  }
+}
+
+@mixin dark-text-shadow($color) {
+  text-shadow: scale-color($color, $lightness: -25%) 0 1px 1px;
+}
+
+@mixin light-text-shadow($color) {
+  text-shadow: scale-color($color, $lightness: 85%) 0 1px 1px;
+}
+
+@mixin light-button($color) {
+  @include light-text-shadow($color);
+  background-color: $color;
+  $border: scale-color($color, $lightness: -20%);
+  box-shadow: $border 0 0 0 1px inset;
+}
+
+@mixin border-button($color) {
+  @include light-text-shadow($color);
+  background-color: transparent;
+  box-shadow: $color 0 0 0 2px inset;
+}
+
+@mixin dark-button($color) {
+  @include dark-text-shadow($color);
+  background-color: $color;
+  box-shadow: $color 0 0 0 1px inset;
+}
+
+@mixin light-button-active-shadow {
+  box-shadow: rgba(#000, .2) 0 1px 7px inset;
+}
+
+@mixin dark-button-active-shadow {
+  box-shadow: rgba(#000, .3) 0 1px 10px inset;
+}
+
+@mixin not-disabled($sel: false) {
+  $not-attr: "&:not([disabled])";
+  $not-class: ":not(.disabled)";
+  @if ($sel) {
+    $not-attr: $not-attr + $sel;
+    $not-class: $not-class + $sel;
+  }
+
+  #{$not-attr + $not-class} { @content; }
+}
+
+@mixin input-active {
+  @include not-disabled('.active') { @content; }
+  @include not-disabled(':active') { @content; }
+}
+
+@mixin input-focus {
+  @include not-disabled(':focus') { @content; }
+}
+
+@mixin input-hover {
+  @include not-disabled(':hover') { @content; }
+}
+
+@mixin input-hover-focus {
+  @include not-disabled(':hover') { @content; }
+  @include not-disabled(':focus') { @content; }
+}
+
+

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

@@ -0,0 +1,44 @@
+@each $name, $color in $full-palette {
+  .#{"" + unquote($name)}-pill, .#{"" + unquote($name)}-outline-pill {
+    border-color: $color;
+    @extend %pill;
+  }
+  .#{"" + unquote($name)}-pill {
+    background-color: $color;
+    color: $white;
+  }
+  .#{"" + unquote($name)}-outline-pill {
+    color: $color;
+  }
+}
+
+%pill {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 14px;
+  font-weight: normal;
+  position: relative;
+  line-height: 1.4em;
+  top: -.2em;
+  border-width: 2px;
+  border-style: solid;
+
+  &:before, &:after {
+    content: "\00a0";
+    letter-spacing: .5em;
+  }
+}
+
+.tag {
+  border-radius: 4px;
+  font-size: 11px;
+  line-height: 1.3em;
+  top: -.1em;
+  border-width: 1px;
+  border-style: solid;
+
+  &:before, &:after {
+    content: "\00a0";
+    letter-spacing: .2em;
+  }
+}

data/app/assets/stylesheets/megatron/modules/code/_codemirror.scss

@@ -0,0 +1,98 @@
+$code-selected-bg: #BDE1FF;
+
+.cm-s-default {
+  .cm-keyword {color: $code_blue;}
+  .cm-atom {color: $code_yellow;}
+  .cm-number {color: $code_cyan;}
+  .cm-def {color: $code_magenta; font-weight: bold;}
+  .cm-variable {color: $code_orange;}
+  .cm-variable-2 {color: $code_blue;}
+  .cm-variable-3 {color: $code_green;}
+  .cm-property {color: $code_base1;}
+  .cm-operator {color: $code_base1;}
+  .cm-comment {color: $code_base01;}
+  .cm-string {color: $code_cyan;}
+  .cm-string-2 {color: $code_green;}
+  .cm-meta {color: #555;}
+  .cm-error {color: $code_red;}
+  .cm-qualifier {color: #555;}
+  .cm-builtin {color: #30a;}
+  .cm-bracket {color: #997;}
+  .cm-tag {color: $code_blue; font-weight: bold;}
+  .cm-attribute {color: $code_base1;}
+  .cm-header {color: blue;}
+  .cm-quote {color: #090;}
+  .cm-hr {color: #999;}
+  .cm-link {color: $code_violet;}
+  .cm-qualifier.cm-attribute {color: $code_orange;}
+  .cm-error {color: #f00;}
+}
+
+.static-code {
+  .cm-variable {color: $code_base1;}
+}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-invalidchar {color: #f00;}
+
+
+div.CodeMirror {
+  background: $softwhite;
+  border: 1px solid $page-border;
+  border-radius: 4px;
+  padding: 5px;
+  font-family: $mono-font;
+
+  pre {
+    color: $code_base0;
+    font-size: 14px;
+    cursor: text; 
+  }
+  .CodeMirror-cursor {
+    border-left: 2px solid #43baff;
+  }
+  .CodeMirror-cursor {
+    border-left: 2px solid #43baff;
+  }
+  span.CodeMirror-matchingbracket {
+    color: $boyblue; font-weight: bold;
+  }
+  span.CodeMirror-nonmatchingbracket {
+    color: $code_red;
+  }
+}
+
+.CodeMirror-scroll {
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  min-height: 250px;
+  padding-bottom: 0;
+}
+
+.code-editor, .code-editor-content {
+  height: 100%;
+  .CodeMirror {
+    height: 100%;
+    max-height: 100%;
+  }
+}
+
+div.CodeMirror-focused {
+  border-color: hsl(203, 47%, 65%);
+  background-color: #fff;
+  box-shadow: 0 0 0 2px hsl(203, 47%, 65%) inset;
+}
+
+.document-view {
+  pre { cursor: default; }
+  .CodeMirror-cursor { display: none; }
+}
+
+div.CodeMirror-selected { background: desaturate($code-selected-bg, 100); }
+.CodeMirror-focused div.CodeMirror-selected { background: $code-selected-bg; }

data/app/assets/stylesheets/megatron/modules/code/_highlighted.scss

@@ -0,0 +1,65 @@
+/* Set up the basic look and feel */
+
+code,
+kbd,
+samp {
+  color: inherit;
+  background-color: rgba(#fff, .3);//$code_base03;
+  border: 1px solid rgba(#000, .1);
+  font-family: Consolas, "Liberation Mono", Courier, monospace;
+  font-size: .95em;
+  border-radius: 3px;
+  &:before, &:after {
+    content: "\00a0";
+    letter-spacing: -0.2em;
+  }
+}
+
+pre[class*=lang-]{
+  padding: 1em;
+}
+
+pre.box-content {
+  margin-top: 0;
+}
+
+.highlighted {
+  border: 1px solid #e5e5e5;
+  position: relative;
+  background-color: $code_base03;
+  color: $code_base0;
+  line-height: inherit;
+  overflow-y: scroll;
+  font-size: 14px;
+  max-width: 100%;
+  word-break: normal;
+  word-wrap: normal;
+}
+
+.highlighted-code {
+  font-family: $mono-font;
+  background: none;
+  direction: ltr;
+  display: block;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  tab-size: 2;
+  text-align: left;
+  word-spacing: normal;
+  line-height: inherit;
+  word-break: normal;
+  word-wrap: normal;
+  overflow-x: scroll;
+
+  display: block;
+  border: none;
+  font-size: inherit;
+
+  &:before, &:after {
+    content: none;
+  }
+}
+
+

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

@@ -0,0 +1,3 @@
+@import "syntax";
+@import "codemirror";
+@import "highlighted";

data/app/assets/stylesheets/megatron/modules/code/_syntax.scss

@@ -0,0 +1,18 @@
+.bson-code {
+  font-size: 13px;
+  background-color: $code_base03;
+  color: $code_base0;
+  .key { color: $code_base2; }
+  .value { color: $code_blue; }
+  .string {
+    color: $code_cyan;
+    word-break: break-all;
+  }
+  .function { color: $code_yellow; }
+  .number { color: $code_orange; }
+
+  /*a { color: darken($code_blue, 4); }*/
+
+
+  /*pre { background: none; border: 0; padding: 0;}*/
+}

data/app/assets/stylesheets/megatron/modules/core/_colored-items.scss

@@ -0,0 +1,22 @@
+@each $name, $color in $full-palette {
+  // Assign a `.[color]-text` class with a color of [color]
+  .#{"" + unquote($name)}-text {
+    color: $color;
+  }
+  .#{"" + unquote($name)}-hover-text:hover {
+    color: $color !important;
+  }
+  .#{"" + unquote($name)}-bg {
+    background-color: $color !important;
+  }
+  .#{"" + unquote($name)}-hover-bg:hover {
+    background-color: $color !important;
+  }
+  .#{"" + unquote($name)}-border {
+    border-color: $color !important;
+  }
+  .#{"" + unquote($name)}-hover-border:hover {
+    border-color: $color !important;
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/core/_colors.scss

@@ -0,0 +1,163 @@
+// Colors
+$slate:        #788392;
+$night:        #2D333B;
+$space:        #262b30;
+$black:        #000;
+
+$white:        #FFFFFF;
+$softwhite:    #fbfbfb;
+$offwhite:     #f5f6f6;
+$silver:       #edefef;
+$overcast:     darken($offwhite, 10);
+$lightgray:    #B3B9BC;
+$gray:         #8d9297;
+$mediumgray:   #666;
+$darkgray:     #444;
+$bluegray:     lighten(#5e6b77, 2);
+$shade:        darken(#5e6b77, 5);// == #57636e;
+
+$red:          #cb413a;
+$boldred:      #DF192A;
+$lightred:     hsl(5, 63%, 55%);
+$palered:      hsl(0, 70, 65);
+$softred:      hsla(0, 70%, 90%, 1);//hsl(10, 61%, 92%);
+$pink:         #FF2D55;
+
+$orange:       #FF9500;
+$paleorange:   hsl(30, 70, 65);
+$softorange:   hsla(35, 70%, 90%, 1);
+
+$yellow:       #FFCC00;
+$softyellow:   hsla(55, 70%, 90%, 1);
+$cream:        #fef0bd;
+$yellowwhite:  #fffefa;
+
+$softgreen:    hsla(140, 70%, 90%, 1);//hsl(140, 70%, 93%);
+$green:        #2ab22e;
+$greenwhite:   #fafefa;
+
+$blue:         #4A89DC;
+$boyblue:      #409bd9;
+$softblue:     hsla(196, 70%, 90%, 1);//hsl(196, 62%, 92%);
+$babyblue:     #82C1ED;
+$darkblue:     #427BC5;
+$lightblue:    #5D9CEC;
+$paleblue:     hsl(205, 50, 65);
+$bluewhite:    #f5fcff;
+
+$purple:       hsl(265, 67%, 60%);
+$lightpurple:  #967ADC;
+$softpurple: hsla(265, 70%, 90%, 1);
+
+
+$base-bg: $space;
+
+// Text colors
+$link-color: $blue;
+$text-color: $shade;// == #57636e; #3f474f;
+$light-text-color: #888;
+
+// Main content
+$main-bg: $offwhite;
+$header-border: #ccc;
+$page-border: darken($main-bg, 10);
+
+$page-gray: #edefef;
+$bright: #fafafa;
+
+/*$code-purple: #8868BC;*/
+/*$code-green:  #539F50;*/
+/*$code-yellow: #E6DB74;*/
+/*$code-orange: #FD971F;*/
+/*$code-red:    #DB4139;*/
+
+$full-palette: (
+'black':        $black,
+'mediumgray':   $mediumgray,
+'darkgray':     $darkgray,
+'slate':        $slate,
+'space':        $space,
+'night':        $night,
+
+'white':        $white,
+'softwhite':    $softwhite,
+'offwhite':     $offwhite,
+'silver':       $silver,
+'lightgray':    $lightgray,
+'gray':         $gray,
+'overcast':     $overcast,
+'bluegray':     $bluegray,
+'shade':        $shade,
+
+'red':          $red,
+'boldred':      $boldred,
+'lightred':     $lightred,
+'palered':      $palered,
+'softred':      $softred,
+'pink':         $pink,
+
+'orange':       $orange,
+'paleorange':   $paleorange,
+'softorange':   $softorange,
+
+'yellow':       $yellow,
+'softyellow':   $softyellow,
+'cream':        $cream,
+'yellowwhite':  $yellowwhite,
+
+'softgreen':    $softgreen,
+'green':        $green,
+'greenwhite':   $greenwhite,
+
+'blue':         $blue,
+'boyblue':      $boyblue,
+'softblue':     $softblue,
+'babyblue':     $babyblue,
+'darkblue':     $darkblue,
+'lightblue':    $lightblue,
+'paleblue':     $paleblue,
+'bluewhite':    $bluewhite,
+
+'purple':       $purple,
+'lightpurple':  $lightpurple,
+'softpurple':   $softpurple
+);
+
+
+/* Colors from Ethan Shoonover's _Solarized_:
+ * http://ethanschoonover.com/solarized
+ */
+
+$solarized_base03:  #002b36;
+$solarized_base02:  #073642;
+$solarized_base01:  #586e75;
+$solarized_base00:  #657b83;
+$solarized_base0:   #839496;
+$solarized_base1:   #93a1a1;
+$solarized_base2:   #eee8d5;
+$solarized_base3:   #fbfbfb;
+$solarized_yellow:  #b58900;
+$solarized_orange:  #cb4b16;
+$solarized_red:     #dc322f;
+$solarized_magenta: #d33682;
+$solarized_violet:  #6c71c4;
+$solarized_blue:    #268bd2;
+$solarized_cyan:    #2aa198;
+$solarized_green:   #859900;
+
+$code_base03:  $solarized_base3;
+$code_base02:  $solarized_base2;
+$code_base01:  $solarized_base1;
+$code_base00:  $solarized_base0;
+$code_base0:   $solarized_base00;
+$code_base1:   $solarized_base01;
+$code_base2:   $solarized_base02;
+$code_base3:   $solarized_base03;
+$code_yellow:  $solarized_yellow;
+$code_orange:  $solarized_orange;
+$code_red:     $solarized_red;
+$code_magenta: $solarized_magenta;
+$code_violet:  $solarized_violet;
+$code_blue:    $solarized_blue;
+$code_cyan:    $solarized_cyan;
+$code_green:   $solarized_green;