megatron 0.0.3 → 0.0.4

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

@@ -0,0 +1,3 @@
+@import "vars";
+@import "mixins";
+@import "colors";

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

@@ -0,0 +1,262 @@
+@mixin until($size) {
+  $size: $size - 1;
+  @media all and (max-width: $size) { @content; }
+}
+
+@mixin at-least($size) {
+  @media all and (min-width: $size) { @content; }
+}
+
+@mixin between($small-width, $large-width) {
+  $large-width: $large-width - 1;
+  @media (max-width: $large-width) and (min-width: $small-width) { @content; }
+}
+
+@mixin destroy-margins {
+  @include destroy-top-margins;
+  @include destroy-bottom-margins;
+}
+
+@mixin destroy-top-margins {
+  > :first-child,
+  > :first-child > :first-child,
+  > :first-child > :first-child > :first-child { margin-top: 0; }
+}
+
+@mixin destroy-bottom-margins {
+  > :last-child,
+  > :last-child > :last-child,
+  > :last-child > :last-child > :last-child { margin-bottom: 0; }
+}
+
+// Remove inner elements' top and bottom margin
+%destroy-margins {
+  @include destroy-margins;
+}
+
+
+@mixin pad_box($v: $v-pad-box, $h: $h-pad-box) {
+  @if $v {
+    @include v-pad_box($v);
+  }
+  @if $h {
+    @include h-pad_box($h);
+  }
+}
+
+@mixin invert-h-pad($h: $h-pad-box) {
+  margin: {
+    left: - nth($h, 1);
+    right: - nth($h, 1);
+  }
+  @include at-least($medium) {
+    margin: {
+      left: - nth($h, 2);
+      right: - nth($h, 2);
+    }
+  }
+}
+
+@mixin v-pad_box($v: $v-pad-box) {
+  padding: {
+    top: nth($v, 1);
+    bottom: nth($v, 1);
+  }
+  @include at-least($medium) {
+    padding: {
+      top: nth($v, 2);
+      bottom: nth($v, 2);
+    }
+  }
+}
+
+@mixin h-pad_box($h: $h-pad-box) {
+  padding: {
+    left: nth($h, 1);
+    right: nth($h, 1);
+  }
+  @include at-least($medium) {
+    padding: {
+      left: nth($h, 2);
+      right: nth($h, 2);
+    }
+  }
+}
+
+@mixin left-pad_box($h: $h-pad-box) {
+
+  padding-left: nth($h, 1);
+
+  @include at-least($medium) {
+    padding-left: nth($h, 2);
+  }
+}
+
+@mixin right-pad_box($h: $h-pad-box) {
+
+  padding-right: nth($h, 1);
+
+  @include at-least($medium) {
+    padding-right: nth($h, 2);
+  }
+}
+
+@mixin top-pad_box($v: $v-pad-box) {
+
+  padding-top: nth($v, 1);
+
+  @include at-least($medium) {
+    padding-top: nth($v, 2);
+  }
+}
+
+@mixin bottom-pad_box($v: $v-pad-box) {
+
+  padding-bottom: nth($v, 1);
+
+  @include at-least($medium) {
+    padding-bottom: nth($v, 2);
+  }
+}
+
+@mixin smooth-text {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@function icon-selector() {
+  @return "[class*='_icon']:before";
+}
+
+@mixin icon {
+  #{icon-selector()} {
+    @content;
+  }
+}
+
+// Returns true if the color is brighter than 50% lightness
+@function is-bright($color) {
+  @return (lightness($color) > 50%);
+}
+
+// Picks the color with the highest contrast
+@function if-bright($bg, $light: true, $dark: false) {
+  @return if(is-bright($bg), $light, $dark);
+}
+
+// Picks the color with the highest contrast
+@function text-contrast($bg, $dark-text: #000, $light-text: #fff) {
+  @return if-bright($bg, $dark-text, $light-text);
+}
+
+
+@mixin triangle($direction, $color, $size) {
+  @if $direction == left {
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == right {
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == up {
+    border-bottom: $size solid $color;
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+  }
+  @else if $direction == down {
+    border-right: $size solid transparent;
+    border-left: $size solid transparent;
+    border-top: $size solid $color;
+  }
+
+  height: 0;
+  width: 0;
+}
+
+
+@mixin tetromino-animations($name, $x, $y) {
+  @keyframes #{$name}-tetromino-animation-1 {
+    0%, 40% { 
+      /* compose logo *//* 1 on 3 *//* L-shape */
+      transform: translate(0,0);
+    } 50% {
+      /* pre-box */
+      transform: translate($x,-$y);
+    } 60%, 100% {
+      /* box *//* compose logo */
+      transform: translate($x*2,0);
+    }
+  }
+
+  @keyframes #{$name}-tetromino-animation-2 {
+    0%, 20% { 
+      /* compose logo *//* 1 on 3 */
+      transform: translate($x*2, 0px);
+    } 40%, 100% { 
+      /* L-shape *//* box *//* compose logo */
+      transform: translate($x*3, $y);
+    }
+  }
+
+  @keyframes #{$name}-tetromino-animation-3 {
+    0% { 
+      /* compose logo */
+      transform: translate($x*3, $y);
+    } 20%, 60% { 
+      /* 1 on 3 *//* L-shape *//* box */
+      transform: translate($x*2, $y*2);
+    } 90%, 100% { 
+      /* compose logo */
+      transform: translate($x, $y);
+    }
+  }
+
+  @keyframes #{$name}-tetromino-animation-4 {
+    0%, 60% {
+      /* compose logo *//* 1 on 3 *//* L-shape *//* box */
+      transform: translate($x, $y);
+    } 90%, 100% { 
+      /* compose logo */
+      transform: translate(0, 0);
+    }
+  }
+}
+
+@mixin tetromino-graphics($name, $width, $height, $cube-color, $hole-color){
+  $x: $width/2 - .5;
+  $y: $height/4 - .7;
+
+  @if($height > 50){
+    $y: $y - 1;
+    $x: $x - 2;
+  }
+
+  @include tetromino-animations($name, $x, $y);
+  
+  %#{$name}-tetromino {
+    content: "";
+    width: $width;
+    height: $height;
+    position: absolute;
+    background: url('data:image/svg+xml;utf-8,%3Csvg viewBox="0 0 38 44" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"%3E%3Cpath fill="%23#{$cube-color}" d="M18.76 43.28L.017 32.46V10.82L18.758 0 37.5 10.82v21.64L18.76 43.28z"/%3E%3Cpath d="M18.76 2.885L33.75 11.54 18.76 20.2 3.764 11.54 18.76 2.886zM2.516 31.018V13.705L17.51 22.36v17.315L2.516 31.018z" fill="%23#{$hole-color}"/%3E%3Cpath d="M2.516 31.018V13.705L17.51 22.36v17.315L2.516 31.018z" fill-opacity=".50" fill="%23#{$cube-color}" /%3E%3C/svg%3E') no-repeat top center;
+  }
+
+  %#{$name}-tetromino-position-1 {
+    transform: translate(0, 0);
+  }
+
+  %#{$name}-tetromino-position-2 {
+    transform: translate($x*2, 0px);
+  }
+
+  %#{$name}-tetromino-position-3 {
+    transform: translate($x*3, $y);
+  }
+
+  %#{$name}-tetromino-position-4 {
+    transform: translate($x, $y);
+  }
+}

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

@@ -0,0 +1,30 @@
+@import "z-index";
+// Global breakpoints
+$tiny: 320px;
+$x-small: 450px;
+$small: 600px;
+$medium: 750px;
+$large: 900px;
+$x-large: 1020px;
+$max: 1500px;
+
+$h-pad-box: 8px, 12px;
+$v-pad-box: 8px, 14px;
+
+// Widths for primary navigation
+// Standard and mobile epxanded
+$primary-nav-width: (
+  small: 75%,
+  large: 65px
+);
+
+$secondary-nav-width: (
+  small: 42px, large: 140px
+);
+
+$page-header-height: 52px;
+$plain-page-header-height: 40px;
+
+$main-sidebar-width: 300px;
+
+$block-margin: 1em;

data/app/assets/stylesheets/megatron/modules/core/_z-index.scss

@@ -0,0 +1,3 @@
+$z-page: 10;
+$z-primary-nav: 20;
+$z-notifications: 40;

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

@@ -0,0 +1,48 @@
+@keyframes box-pop {
+  0% {
+    /*opacity: 0; */
+    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    transform: translateY(0) scale(0.95, 0.95);
+  }
+  100% {
+    /*opacity: 1; */
+    box-shadow: 0 11px 18px rgba(0,0,0,0.2);
+    transform: translateY(-20px) scale(1, 1);
+  }
+}
+
+@keyframes dialog-slide-down {
+  0%, 20% {
+    opacity: 0;
+  }
+  21% {
+    opacity: 1; 
+    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    transform: translateY(-45px) scale(0.95, 0.95);
+  }
+  100% {
+    opacity: 1; 
+    box-shadow: 0 11px 18px rgba(0,0,0,0.2);
+    transform: translateY(-15px) scale(1, 1);
+  }
+}
+
+@keyframes dialog-slide-up {
+  0% {
+    opacity: 1; 
+    box-shadow: 0 11px 18px rgba(0,0,0,0.2);
+    transform: translateY(-15px) scale(1, 1);
+  }
+  10% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    transform: translateY(-55px) scale(.95, .95);
+  }
+}

data/app/assets/stylesheets/megatron/modules/dialog/_dialog.scss

@@ -0,0 +1,81 @@
+.dialog {
+  $fade-in-animation: .8s;
+
+  position: fixed;
+  top: 0; right: 0; left: 0; bottom: 0;
+  z-index: 1000;
+
+  &:before {
+    content: "";
+    background: rgba(#fff, .9);
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    transform: translate3d(0,0,0);
+    animation: fade-in .5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
+  }
+
+  &-box {
+    background: #fcfcfc;
+    background-image: linear-gradient(#fff, #fafafa 30%, #fafafa 80%, #f9f9f9 95%);
+    box-shadow: 0 11px 18px rgba(0,0,0,0.2);
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    max-width: 340px;
+    margin: 0 auto;
+    animation: dialog-slide-down .3s cubic-bezier(0.190, 1.000, 0.980, 1.000);
+    padding: 30px 20px 20px;
+    transform: translateY(-15px);
+  }
+
+  &.dismiss {
+    &:before {
+      animation: fade-out .2s cubic-bezier(0.190, 1.000, 0.980, 1.000);
+      animation-delay: .15s;
+    }
+    .dialog-box {
+      opacity: 0;
+      animation: dialog-slide-up .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
+    }
+  }
+
+  &-message, &-actions {
+    position: relative;
+    z-index: 1;
+  }
+
+  &-message {
+    text-align: center;
+    text-shadow: 0 1px 0 #fff;
+    margin-bottom: 15px;
+  }
+
+  h2 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 24px;
+  }
+
+  p {
+    margin: 10px 0 0;
+  }
+
+  &-actions {
+    border-top: 1px solid transparent;
+    max-width: 300px;
+  }
+
+  button {
+    width: 48%;
+    font-size: 15px;
+    border-radius: 5px;
+    padding: { top: 3px; bottom: 3px; }
+    + button {
+      float: right;
+    }
+    &:first-child:last-child {
+      width: 70%;
+      display: block;
+      margin: 0 auto 10px;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "animations";
+@import "dialog";

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

@@ -0,0 +1,31 @@
+form {
+  width: 100%;
+
+  &.max {
+    max-width: 100%;
+  }
+
+  fieldset {
+    padding: 0;
+    border: 0;
+  }
+}
+
+label {
+  font-size: 15px;
+}
+
+form, .form-width {
+  max-width: 700px;
+}
+
+.form-row {
+  margin: .8em 0;
+  &.split {
+    margin-top: 1.3em;
+    padding-top: .5em;
+    border-top: 1px solid $page-border;
+    box-shadow: #fff 0 1px inset;
+  }
+}
+