megatron 0.0.3 → 0.0.4

data/app/assets/stylesheets/megatron/modules/forms/_check-radio.scss

@@ -0,0 +1,99 @@
+input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) { 
+  position: absolute;
+  z-index: -100;
+  opacity: 0;
+  + label {
+    margin-right: .4em;
+    font-size: 16px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    $size: 18px;
+    &:before {
+      transition: background-color .3s ease-out, box-shadow .15s ease, border-color .15s ease;
+      content: "";
+      width: $size; height: $size;
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      top: 3px;
+      margin-right: 8px;
+      border: 1px solid hsl(0, 0%, 79%);
+      cursor: pointer;
+      background-color: #fff;
+    }
+    &:after {
+      content: "";
+      position: absolute;
+    }
+  }
+  &:focus + label:before {
+    box-shadow: lighten($blue, 20) 0 0 0 2px inset;
+    border-color: lighten($blue, 10);
+
+  }
+  &:checked + label {
+    &:before {
+      background-color: $blue;
+      border-color: darken($blue, 10);
+    }
+  }
+}
+
+input[type=checkbox]:not(.switch) {
+  + label {
+    &:before {
+      border-radius: 4px;
+    }
+    &:after {
+      left: 5px;
+      width: 8px; height: 4px;
+      border: 3px solid rgba($blue, 0) { top: none; right: none;};
+      top: .55em;
+      transform: rotate(-45deg);
+    }
+
+    &:hover:after {
+      border-color: rgba(#000, .2);
+    }
+  }
+
+  + label.plain { 
+    &:before { top: 1px; }
+    &:after { top: 3px; }
+  }
+
+  &:checked + label {
+    &:after {
+      border-color: #fff;
+    }
+  }
+}
+
+input[type=radio]:not(.switch) {
+  + label {
+    &:before { 
+      border-radius: 50%;
+    }
+
+    &:after {
+      $size: 6px;
+      width: $size; height: $size;
+      border-radius: 50%;
+      left: 7px;
+      top: 55%;
+      transform: translateY(-50%);
+    }
+
+    &:hover:after {
+      background-color: rgba(#000, .2);
+    }
+
+  }
+  &:checked + label {
+    &:after {
+      background-color: #fff;
+    }
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/forms/_check-switch.scss

@@ -0,0 +1,88 @@
+.check-switch {
+
+  display: inline-block;
+  position: relative;
+
+  border-radius: 1em;
+  background-color: #fafafa;
+  box-shadow: #fff 0 1px 1px, $lightgray 0 0 0 1px inset;
+  width: 76px;
+  font-weight: bold;
+  line-height: 0;
+
+  &:before, label:after {
+    padding-top: 1px;
+    line-height: 22px;
+    font-size: 11px;
+    display: inline-block;
+    width: 50%;
+    text-align: center;
+    color: #888;
+    text-shadow: #fff 0 1px;
+    transition: color .2s ease-in-out;
+  }
+
+  &:before {
+    content: "OFF";
+    margin-right: 50%;
+  }
+
+  label:after {
+    content: "ON";
+    transform: translateX(100%);
+  }
+
+  label {
+    text-align: left;
+    color: transparent; font-size: 0;
+    z-index: 1;
+    border-radius: 15px;
+    cursor: pointer;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    z-index: 1;
+
+    &:before {
+      position: absolute;
+      content: "";
+      width: 50%;
+      height: 100%;
+      left: 0;
+      border-radius: 15px;
+      z-index: 1;
+      background-color: rgba(#000, .06);
+      background-image: linear-gradient(rgba(#fff, .4), rgba(#fff, 0) 80%);
+      transition: .15s ease;
+      transition-property: background-color transform;
+      box-shadow: $lightgray 0 0 0 1px inset, rgba(#fff, .5) 0 1px inset;
+    }
+  }
+  
+  input {
+    position: absolute;
+    z-index: -100;
+    opacity: 0;
+    top: 0;
+    left: 0;
+
+    &:checked + label {
+      &:before {
+        transform: translateX(100%);
+        background-color: rgba($boyblue, .1);
+        box-shadow: rgba($boyblue, .3) 0 0 0 1px inset;
+      }
+      
+      &:after {
+        color: $boyblue;
+      }
+    }
+
+    &:focus + label:before {
+      box-shadow: $babyblue 0 0 0 1px inset, $babyblue 0 0 0 2px inset;
+    }
+
+  }
+}

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

@@ -0,0 +1,13 @@
+.form-footer {
+  text-align: right;
+  overflow: hidden;
+  margin: 1.3em 0 $block-margin;
+  padding-top: 1.3em;
+  border-top: 1px solid $page-border;
+  box-shadow: #fff 0 1px inset;
+
+  a, button {
+    float: right;
+    margin-left: 8px;
+  }
+}

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

@@ -0,0 +1,10 @@
+@import "base";
+@import "text-input";
+@import "select";
+@import "check-radio";
+@import "check-switch";
+@import "radio-nav";
+@import "table-form";
+@import "stacked-form";
+@import "footer";
+@import "login";

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

@@ -0,0 +1,92 @@
+.login-layout {
+  background-color: #232a2f;
+}
+
+.login-page {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 0 1em;
+  position: relative;
+  @media all and (min-width: 500px) and (min-height: 560px) {
+    top: 45%;
+    transform: translateY(-50%);
+  }
+}
+
+.login-svg-logo {
+  opacity: .7;
+  .svg-logo-text {
+    fill: #91979f;
+  }
+  .svg-logo-mark path {
+    fill: #91979f;
+  }
+}
+
+.logo-header {
+  text-align: center;
+  padding: 1em 15% 0;
+  margin: 0 auto;
+  max-width: 325px;
+  max-height: 200px;
+}
+
+.login-input {
+  font-size: 25px;
+  margin-bottom: 15px;
+  border-color: transparent;
+  font-family: "Hevetical Neue", Helvetica, Arial, sans;
+  font-weight: 200;
+}
+
+.login-form {
+  animation: login-form-fade-in .6s cubic-bezier(0.190, 1.000, 0.980, 1.000);
+}
+
+.login-footer {
+  margin: 30px 0;
+  text-align: center;
+  color: darken(#8f959e, 20);
+  a {
+    color: #8f959e;
+    margin-bottom: $block-margin;
+    text-decoration: none;
+    font-family: "Hevetical Neue", Helvetica, Arial, sans;
+    font-weight: 200;
+    &:hover {
+      color: lighten(#8f959e, 10);
+      text-decoration: underline;
+    }
+  }
+}
+
+@keyframes login-logo-fade-in {
+  0%, 20% {
+    opacity: 0;
+    transform: translateY(30px) scale(0.85, 0.85);
+  }
+  20% {
+    opacity: 0;
+    transform: translateY(30px) scale(0.85, 0.85);
+  }
+  100% {
+    opacity: .7; 
+    transform: translateY(0px) scale(1, 1);
+  }
+}
+
+@keyframes login-form-fade-in {
+  0%, 20% {
+    opacity: 0;
+  }
+  21% {
+    transform: translateY(-10px) scale(0.85, 0.85);
+  }
+  50% {
+    opacity: 1; 
+  }
+  100% {
+    opacity: 1; 
+    transform: translateY(0px) scale(1, 1);
+  }
+}

data/app/assets/stylesheets/megatron/modules/forms/_radio-nav.scss

@@ -0,0 +1,62 @@
+.radio-nav {
+
+  display: inline-block;
+  position: relative;
+  /*overflow: hidden;*/
+  /*border-radius: 5px;*/
+  /*box-shadow: #fff 0 1px 1px, rgba(#000, .18) 0 0 0 1px inset;*/
+  margin: { top: $block-margin/2; bottom: $block-margin/2; }
+  letter-spacing: -4px;
+  z-index: 1;
+
+  input {
+    position: absolute;
+    z-index: -100;
+    opacity: 0;
+    top: 0;
+    left: 0;
+  }
+
+  label {
+    text-align: left;
+    letter-spacing: normal;
+    cursor: pointer;
+    display: inline-block;
+    padding: 2px 12px;
+    line-height: 1.8em;
+    font-size: 13px;
+    color: $gray;
+    background-color: $silver;
+    box-shadow: $lightgray 0 0 0 1px;
+    position: relative;
+  }
+
+  input:first-child + label {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+
+  label:last-child {
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    border-right: 0;
+  }
+
+  input:focus + label, label:hover {
+    background-color: $offwhite;
+    color: $mediumgray;
+  }
+
+  input:focus + label {
+    box-shadow: hsl(204, 67%, 70%) 0 0 0 1px, hsl(204, 67%, 70%) 0 0 0 1px inset;
+    z-index: 1;
+  }
+
+  input:checked + label {
+    color: $night;
+    background-image: linear-gradient(#fff, rgba(#fff, 0));
+    background-color: $offwhite;
+  }
+}
+
+

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

@@ -0,0 +1,37 @@
+.select_box {
+  max-width: 100%;
+  background: #fff;
+  font-size: 1em;
+  position: relative;
+  display: inline-block;
+
+  &.fill {
+    display: block;
+    select { width: 100%; }
+  }
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: window;
+    appearance: none;
+    cursor: pointer;
+
+    @extend %text-input;
+    font-size: 14px;
+    padding-right: 2.2em;
+    &, &:focus {
+      background: transparent;
+    }
+    position: relative;
+    z-index: 1;
+  }
+
+  &:after {
+    content: "";
+    z-index: 0;
+    position: absolute;
+    right: .8em;
+    @include triangle(down, rgba(#000, .2), 6px);
+    bottom: 40%;
+  }
+}

data/app/assets/stylesheets/megatron/modules/forms/_stacked-form.scss

@@ -0,0 +1,29 @@
+.stacked-form {
+  margin: .8em 0;
+
+  label:first-child {
+    font-size: .9em;
+    display: block;
+    margin: .8em 0;
+  }
+
+  [type=checkbox] + label,
+  [type=radio] + label {
+    font-size: 1em;
+  }
+
+  [type=text],[type=password] {
+    width: 100%;
+  }
+
+  .auto {
+    width: auto;
+  }
+
+  @include at-least($medium) {
+    label {
+      font-size: 1em;
+    }
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/forms/_table-form.scss

@@ -0,0 +1,53 @@
+.table-form {
+  margin: .8em 0;
+
+  .table-row {
+    margin: .8em 0;
+  }
+
+  .table-cell:empty {
+    padding: 0;
+  }
+
+  [type=text],[type=password] {
+    width: 100%;
+  }
+  .auto {
+    width: auto;
+  }
+
+  @include until($medium) {
+    .table-cell {
+      padding: 0;
+    }
+    label:first-child {
+      font-size: .8em;
+      display: inline-block;
+      margin: .4em 0;
+    }
+  }
+
+  @include at-least($medium) {
+    @include auto-table;
+
+    .table-cell {
+      padding: .4em 0;
+      vertical-align: middle;
+      margin: 0;
+
+    }
+
+    // Ensure labels do not wrap
+    //
+    label.table-cell,
+    .table-cell:first-child:not(:last-child) {
+      width: 1%;
+      label {
+        white-space: pre;
+        line-height: 2em;
+        padding-right: 1em;
+      }
+    }
+  }
+}
+