megatron 0.0.3 → 0.0.4

data/app/assets/stylesheets/megatron/modules/slider/_switch.scss

@@ -0,0 +1,75 @@
+
+//----------------------------//
+//  Switch horizontal slider  //
+//----------------------------//
+
+.select-switch {
+  $border-width: 3px;
+  $border-radius: 20px;
+
+  font-family: $slider-font;
+  font-size: 11px;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  margin-bottom: .5em;
+  line-height: 1.8em;
+
+  .slider-track {
+    border-radius: $border-radius;
+    border: 1px solid rgba(#000, .18);
+    background-color: $slider-switch-bg;
+    box-shadow: #fff 0 1px 1px;
+  }
+
+  .slider-label {
+    padding-top: 1px;
+    font-weight: bold;
+    line-height: 1.8em;
+    display: inline-block;
+    width: 37px;
+    text-align: center;
+    color: #999;
+    text-shadow: #fff 0 1px;
+    transition: color .2s ease-in-out;
+  }
+
+  .slider-handle {
+    width: 50%;
+    position: absolute;
+    top: 0px; bottom: 0px;
+    z-index: 1;
+    background-color: rgba(#000, .06);
+    background-image: linear-gradient(rgba(#fff, .4), rgba(#fff, 0) 80%);
+    transition: background-color .2s ease-in-out;
+    border-radius: $border-radius - 1;
+    box-shadow: rgba(#000, .15) 0 0 0 1px inset, rgba(#fff, .5) 0 1px inset;
+  }
+
+  select:focus {
+    ~ .slider-track {
+      border-color: mix($slider-glow, #fff);
+        box-shadow: rgba($slider-glow, .5) 0 0 1px;
+    }
+    ~ .slider-handle {
+      box-shadow: rgba($slider-glow, .45) 0 0 0 1px inset;
+    }
+  }
+
+
+  &[data-step='0']{
+    .step-0 { color: #666; }
+  }
+
+  &[data-step='1']{
+    .slider-handle { 
+      background-color: rgba($slider-glow, .1);
+      box-shadow: rgba($slider-glow, .3) 0 0 0 1px inset;
+    }
+    .step-1 { color: darken($slider-glow, 10); }
+  }
+
+  .step-1:hover { color: $slider-glow; }
+  .step-0:hover { color: #666; }
+}
+

data/app/assets/stylesheets/megatron/modules/slider/_themes.scss

@@ -0,0 +1,42 @@
+/*--------------------------------\
+| Slider default styles           |
+\--------------------------------*/
+
+.select-slider {
+  &.default {
+    .slider-fill {
+      background-color: $slider-blue;
+    }
+    .slider-track:before {
+      background-color: $slider-track;
+    }
+  }
+
+  .slider-fill-segment {
+    @include slider-fill-colors($slider-blue);
+  }
+}
+
+.alert-slider {
+  max-width: 150px;
+  margin: 0 { left: .5em }
+  .slider-fill-segment-1 {
+    @include slider-fill-colors($slider-red);
+  }
+  .slider-fill-segment-2 {
+    @include slider-fill-colors($slider-orange);
+  }
+}
+
+.upgrade-slider {
+  .slider-fill .used {
+    @include slider-fill-colors($slider-red);
+    //@include slider-fill-colors(change-color($slider-blue, $hue: 210, $lightness: 50));
+  }
+  .slider-track .used {
+    @include slider-fill-colors(mix($slider-red, $slider-track, 25%));
+  }
+  .slider-track .paid {
+    @include slider-fill-colors(mix($slider-blue, $slider-track, 20%));
+  }
+}

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

@@ -0,0 +1,170 @@
+$bright-table-bg: $bright;
+
+@mixin table-align($pos) {
+  .align-#{$pos},
+  &.align-#{$pos} .table-cell, 
+  &.align-#{$pos} td, 
+  &.align-#{$pos} th {
+    vertical-align: $pos;
+  }
+}
+
+@mixin auto-table {
+  display: table;
+  width: 100%;
+
+  .table-row {
+    display: table-row;
+    &.span-left {
+      &:before {
+        content: "";
+        display: table-cell;
+      }
+    }
+    &.span-right {
+      &:after {
+        content: "";
+        display: table-cell;
+      }
+    }
+  }
+
+  .table-cell, .table-head-cell {
+    display: table-cell;
+  }
+}
+
+.table {
+  width: 100%;
+  display: table;
+  @extend %table_base;
+  .table-body, .table-head {
+    display: table-row-group;
+  }
+  .table-row {
+    display: table-row;
+  }
+  .table-cell, .table-head-cell {
+    display: table-cell;
+  }
+}
+
+%table_base .table-heading-row td,
+%table_base .table-heading-row .table-cell {
+  color: $light-text-color;
+  @include v-pad_box((3px, 5px));
+  text-shadow: 0 1px rgba(#fff, .8);
+  font-size: 12px;
+  background-color: $silver;
+}
+
+th {
+  font-weight: normal;
+  text-align: left;
+}
+
+th, td, .table-cell, .table-head-cell {
+  @include v-pad_box((8px, 10px));
+  @include h-pad_box;
+}
+
+.tight-table {
+  th, td, .table-cell, .table-head-cell {
+    @include v-pad_box((3px, 5px));
+    @include h-pad_box;
+  }
+}
+
+.zebra-table {
+  .table-row:nth-child(even) .table-cell, tr:nth-child(even) td {
+    background: none;
+  }
+  .table-row:nth-child(odd) .table-cell, tr:nth-child(odd) td {
+    background-color: rgba($white, .8);
+  }
+}
+
+.wide {
+  tr td, tr th, .table-row .table-cell {
+    &:last-child {
+      border-right: none;
+    }
+    &:first-child {
+      border-left: none;
+    }
+  }
+}
+
+.fixed-table {
+  table-layout: fixed;
+}
+
+tr.split td,
+.table-row.split .table-cell {
+  border-top: 1px solid $page-border;
+}
+
+tr.split-thick td,
+.table-row.split-thick .table-cell {
+  border-top: 2px solid $page-border;
+}
+
+table {
+  border-collapse: collapse;
+  margin: { top: $block-margin; bottom: $block-margin; }
+}
+
+%table_base {
+  width: 100%;
+  border-collapse: collapse;
+  text-decoration: none;
+  margin: { top: $block-margin; bottom: $block-margin; }
+
+  .table-body, .table-head {
+    display: table-row-group;
+  }
+
+  .table-row {
+    display: table-row;
+    &.link-hover-row:hover {
+      td, .table-cell {
+        background: $white;
+      }
+    }
+  }
+
+  a { text-decoration: none; }
+
+  td, .table-cell {
+    a:not([class*=btn]):hover {
+      text-decoration: underline;
+    }
+  }
+
+  .meta {
+    font-size: .8em;
+    color: $light-text-color;
+  }
+
+  @include table-align(top);
+  @include table-align(middle);
+  @include table-align(bottom);
+}
+
+.box %table_base {
+  margin-top: 0;
+
+  th, .table-head-cell {
+    border-color: $page-border;
+  }
+  &:not(:first-child) {
+    tr:first-child {
+      th, td { border-top: 0; }
+    }
+    .table-row:first-child {
+      .table-head-cell, .table-cell {
+        border-top: 0;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/megatron/modules/tables/_border-table.scss

@@ -0,0 +1,28 @@
+.border-table {
+  @extend %table_base;
+  border-bottom: $page-border 1px solid;
+  display: table;
+
+  th, .table-head-cell {
+    color: $light-text-color;
+    @include v-pad_box((3px, 5px));
+    text-shadow: 0 1px rgba(#fff, .8);
+    font-size: 12px;
+    background-color: $silver;
+  }
+
+  .table-row {
+    display: table-row;
+  }
+  .table-cell {
+    display: table-cell;
+  }
+
+  .table-cell, .table-head-cell, td, th{
+    border: $page-border 1px solid;
+  }
+  .table-cell, td {
+    background: $bright-table-bg;
+  }
+
+}

data/app/assets/stylesheets/megatron/modules/tables/_box-table.scss

@@ -0,0 +1,36 @@
+.box-table {
+  @extend %table_base;
+  display: table;
+  border-collapse: collapse;
+
+  thead, .table-head {
+    color: $light-text-color;
+    font-size: 12px;
+  }
+
+  .table-row {
+    display: table-row;
+  }
+
+  .table-cell, td {
+    border-top: $page-border 1px solid;
+    border-bottom: $page-border 1px solid;
+    background: $bright-table-bg;
+    display: table-cell;
+
+    &:first-child {
+      border-left: $page-border 1px solid;
+    }
+    &:last-child {
+      border-right: $page-border 1px solid;
+    }
+  }
+
+  thead th, thead td, .table-head .table-cell {
+    font-weight: normal;
+    border-color: transparent;
+    background: transparent;
+    border-bottom: none;
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/tables/_columns.scss

@@ -0,0 +1,8 @@
+.columns {
+  display: table;
+  width: 100%;
+  .column {
+    display: table-cell;
+  }
+}
+

data/app/assets/stylesheets/megatron/modules/tables/_doc-table.scss

@@ -0,0 +1,22 @@
+.doc-table {
+  @extend %table_base;
+  thead th, .table-head .table-cell {
+    font: {
+      weight: bold;
+      size: 15px;
+    }
+    border: $page-border 1px solid;
+    background: $bright-table-bg;
+  }
+
+  .table-cell, td {
+    font-size: 14px;
+    border: $page-border 1px solid;
+    background: $bright-table-bg;
+    @include h-pad_box;
+  }
+  tr:nth-child(2n+2) td,
+  .table-row:nth-child(2n+2) .table-cell {
+    background: darken($bright-table-bg, 3);
+  }
+}

data/app/assets/stylesheets/megatron/modules/tables/_icon-cell.scss

@@ -0,0 +1,9 @@
+.icon-cell.icon-cell {
+  width: 1%;
+  padding-right: 4px;
+  border-right: none;
+  + .table-cell, + td {
+    border-left: none;
+    padding-left: 4px;
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "base";
+@import "box-table";
+@import "doc-table";
+@import "border-table";
+@import "link-cell";
+@import "icon-cell";
+@import "responsive-table";

data/app/assets/stylesheets/megatron/modules/tables/_link-cell.scss

@@ -0,0 +1,8 @@
+.link-cell {
+  position: relative;
+  a:after {
+    content: "";
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+  }
+}

data/app/assets/stylesheets/megatron/modules/tables/_responsive-table.scss

@@ -0,0 +1,13 @@
+.small-table {
+  @extend .table;
+  @include until($small) { 
+    &, .table-cell, .table-row, .table-head, .table-head-cell { display: block; }
+  }
+}
+.medium-table {
+  @extend .table;
+  @include until($medium) { 
+    &, .table-cell, .table-row, .table-head, .table-head-cell { display: block; }
+  }
+}
+

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

@@ -0,0 +1 @@
+@import "time-switch";

data/app/assets/stylesheets/megatron/modules/widgets/_time-switch.scss

@@ -0,0 +1,24 @@
+.time-switch {
+  cursor: pointer;
+  .utc, .local {
+    font-size: 14px;
+    [class*=_icon]{
+      font-size: 11px;
+    }
+  }
+  .timeago { font-size: 14px; }
+
+  .local { display: none; }
+
+  &.alt-zone {
+    .utc   { display: none; }
+    .local { display: inline-block; }
+  }
+  .date, .time, .timeago {
+    white-space: nowrap;
+  }
+}
+
+.timeago {
+  white-space: nowrap;
+}