megatron 0.0.3 → 0.0.4

data/app/assets/stylesheets/megatron/modules/roboticons/_font.scss

@@ -0,0 +1,62 @@
+//
+// $icon-host: Optionally point to a remote host where files are being served.
+//   - e.g. $icon-host: "//megatron.dblayer.com"
+//
+
+$icon-host: "https://app.compose.io/assets/megatron" !default;
+
+@font-face {
+  font-family: 'roboticons';
+  src:url('#{$icon-host}/fonts/roboticons.woff?hxraic') format('woff'),
+  url('#{$icon-host}/fonts/roboticons.ttf?hxraic') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+%icon-font {
+  font: {
+    family: 'roboticons';
+    style: normal;
+    weight: normal;
+    variant: normal;
+  }
+
+  text: {
+    decoration: none;
+    transform: none;
+  }
+
+  display: inline-block;
+  speak: none;
+  line-height: 1;
+  @include smooth-text;
+}
+
+[class*=_icon]:before { @extend %icon-font; }
+
+// Aliases:
+
+.x_fill_icon { @extend .x_circle_fill_thin_icon; }
+.x_line_icon { @extend .x_circle_thin_icon; }
+
+.hidden_label {
+  position: absolute !important;
+  height: 1px; width: 1px; 
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+$font-sizes: (
+  'xx-small'  : 10px,
+  'x-small'   : 12px,
+  'small'     : 14px,
+  'medium'    : 16px,
+  'large'     : 18px,
+  'x-large'   : 22px,
+  'xx-large'  : 26px,
+  'xxx-large' : 32px
+);
+
+@each $name, $size in $font-sizes {
+  .#{$name}-text { font-size: $size; }
+}

data/app/assets/stylesheets/megatron/modules/roboticons/_icons.scss

@@ -0,0 +1,219 @@
+.eye_icon:before {
+  content: "\e647";
+}
+.eye_closed_icon:before {
+  content: "\e648";
+}
+.unlocked_icon:before {
+  content: "\e646";
+}
+.locked_icon:before {
+  content: "\e645";
+}
+.logs_icon:before {
+  content: "\e644";
+}
+.cli_icon:before {
+  content: "\e643";
+}
+.elasticsearch_deployment_icon:before {
+  content: "\e63f";
+}
+.mongodb_deployment_icon:before {
+  content: "\e640";
+}
+.redis_deployment_icon:before {
+  content: "\e641";
+}
+.rethinkdb_deployment_icon:before {
+  content: "\e642";
+}
+.x_circle_fill_icon:before {
+  content: "\e639";
+}
+.x_circle_icon:before {
+  content: "\e63a";
+}
+.arrow_left_circle_fill_icon:before {
+  content: "\e63b";
+}
+.arrow_left_circle_icon:before {
+  content: "\e63c";
+}
+.arrow_right_circle_fill_icon:before {
+  content: "\e63d";
+}
+.arrow_right_circle_icon:before {
+  content: "\e63e";
+}
+.plus_circle_fill_icon:before {
+  content: "\e636";
+}
+.plus_circle_icon:before {
+  content: "\e637";
+}
+.bubble_fill_icon:before {
+  content: "\e638";
+}
+.sandbox_icon:before {
+  content: "\e635";
+}
+.deployment_small_icon:before {
+  content: "\e634";
+}
+.database_small_icon:before {
+  content: "\e61e";
+}
+.transporter_icon:before {
+  content: "\e632";
+}
+.minus_icon:before {
+  content: "\e611";
+}
+.puzzle_icon:before {
+  content: "\e633";
+}
+.api_icon:before {
+  content: "\e62c";
+}
+.warning_icon:before {
+  content: "\e631";
+}
+.jobs_icon:before {
+  content: "\e620";
+}
+.gear_round_icon:before {
+  content: "\e62d";
+}
+.check_thin_icon:before {
+  content: "\e62e";
+}
+.check_circle_fill_icon:before {
+  content: "\e62f";
+}
+.check_circle_icon:before {
+  content: "\e630";
+}
+.x_icon:before {
+  content: "\e600";
+}
+.x_circle_thin_icon:before {
+  content: "\e601";
+}
+.x_circle_fill_thin_icon:before {
+  content: "\e602";
+}
+.watch_icon:before {
+  content: "\e603";
+}
+.users_icon:before {
+  content: "\e604";
+}
+.tools_icon:before {
+  content: "\e605";
+}
+.star_icon:before {
+  content: "\e606";
+}
+.scale_icon:before {
+  content: "\e607";
+}
+.rocket_icon:before {
+  content: "\e608";
+}
+.restore_icon:before {
+  content: "\e609";
+}
+.question_line_icon:before {
+  content: "\e60a";
+}
+.question_full_icon:before {
+  content: "\e60b";
+}
+.processing_icon:before {
+  content: "\e60c";
+}
+.power_icon:before {
+  content: "\e60d";
+}
+.plus_icon:before {
+  content: "\e60e";
+}
+.payment_icon:before {
+  content: "\e60f";
+}
+.monitoring_icon:before {
+  content: "\e610";
+}
+.lock_icon:before {
+  content: "\e612";
+}
+.info_icon:before {
+  content: "\e613";
+}
+.hourglass_icon:before {
+  content: "\e614";
+}
+.home_icon:before {
+  content: "\e615";
+}
+.help_icon:before {
+  content: "\e616";
+}
+.globe_icon:before {
+  content: "\e617";
+}
+.gear_icon:before {
+  content: "\e618";
+}
+.gear_line_icon:before {
+  content: "\e619";
+}
+.download_icon:before {
+  content: "\e61a";
+}
+.deployments_icon:before {
+  content: "\e61b";
+}
+.databases_icon:before {
+  content: "\e61c";
+}
+.databases_line_icon:before {
+  content: "\e61d";
+}
+.collections_icon:before {
+  content: "\e61f";
+}
+.clock_line_icon:before {
+  content: "\e621";
+}
+.clock_fill_icon:before {
+  content: "\e622";
+}
+.chevron_icon:before {
+  content: "\e623";
+}
+.chevron_thin_icon:before {
+  content: "\e624";
+}
+.check_icon:before {
+  content: "\e625";
+}
+.bubble_icon:before {
+  content: "\e626";
+}
+.bell_icon:before {
+  content: "\e627";
+}
+.backups_icon:before {
+  content: "\e628";
+}
+.alerts_icon:before {
+  content: "\e629";
+}
+.account_icon:before {
+  content: "\e62a";
+}
+.account_circle_icon:before {
+  content: "\e62b";
+}

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

@@ -0,0 +1,2 @@
+@import "font";
+@import "icons";

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

@@ -0,0 +1,49 @@
+$slider-red:    hsl(0, 70, 65) !default;
+$slider-orange: hsl(30, 90, 68) !default;
+$slider-blue:   hsl(205, 60, 55) !default;
+$slider-purple: hsl(235, 60, 65) !default;
+$slider-glow:   hsl(199, 70%, 44%) !default;
+$slider-font:   Helvetica, Arial, sans;
+$slider-font-size: 13px;
+$slider-track: #e8e8e8;
+$slider-switch-bg: #fafafa;
+$slider-label-color: #555;
+
+$slider-segment-width: 45px !default;
+$slider-segment-height: 11px !default;
+$slider-track-offset: 3px !default; //account for rounded corners
+
+@mixin slider-fill-bg {
+  &, &:first-child:before { @content; }
+}
+
+@mixin slider-track-bg {
+  &, &:last-child:after { @content; }
+}
+
+@mixin slider-border($color) {
+  border-left-color: adjust-color($color, $lightness: 8%, $saturation: 20%);
+  border-right-color: adjust-color($color, $lightness: -10%, $saturation: -20%);
+}
+
+@mixin slider-fill-colors($color) {
+  @include slider-fill-bg {
+    background-color: $color;
+  }
+  @include slider-border($color);
+}
+
+%slider-segment {
+  width: $slider-segment-width;
+  height: $slider-segment-height;
+  display: inline-block;
+  float: left;
+  &:first-child { border-left-color: transparent; }
+  &:last-child { border-right-color: transparent; }
+}
+
+select.slider, .slider select {
+  position: absolute; opacity: 0;
+  font-size: 0;
+}
+

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

@@ -0,0 +1,4 @@
+@import "base";
+@import "slider";
+@import "switch";
+@import "themes";

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

@@ -0,0 +1,282 @@
+//----------------------------//
+// Standard horizontal slider //
+//----------------------------//
+
+
+.select-slider {
+
+  // Base layout style
+
+  &,* { box-sizing: border-box; }
+
+  font-family: $slider-font;
+  line-height: 1em;
+  position: relative; z-index: 1;
+  cursor: pointer;
+  display: block;
+  margin: 1em {
+    left: $slider-track-offset * 2;   // Rounded corners use pesudo elements and position absolute
+    right: $slider-track-offset * 2;  // be sure they don't run into anything
+  }
+
+  // Stretch slider track containers and add box-shadow border
+
+}
+
+/*--------------------------------\
+| Slider Track                    |
+\--------------------------------*/
+
+.select-slider {
+
+  // The background for the unselected portion of the track
+
+  .slider-track {
+    overflow: visible;
+    width: 100%;
+    height: $slider-segment-height;
+    position: relative; z-index: 0;
+    &:before {
+      content: "";
+      border-radius: 1em;
+      position: absolute;
+      top: 0; bottom: 0; left: -$slider-track-offset; right: -$slider-track-offset;
+      z-index: 3;
+      box-shadow: rgba(#000, .2) 0 0 0 1px inset, rgba(#fff, 1) 0 1px;
+    }
+  }
+
+  .slider-track-segments-wrapper {
+    position: absolute; top: 0; bottom: 0; right: 0; left: 0;
+    border-radius: 1em;
+    right: -$slider-track-offset;
+    overflow: hidden;
+    &:after {
+      content: "";
+      border-radius: 1em;
+      position: absolute;
+      top: 0; bottom: 0; left: -$slider-track-offset; right: -$slider-track-offset;
+      background-color: $slider-track;
+    }
+  }
+
+  // Wrapper for the track segments
+
+  .slider-track-segments { 
+    height: $slider-segment-height;
+    position: absolute;
+    left: 0;
+  }
+
+  // Visually divides unselected slider divisions
+
+  .slider-track-segment {
+    @extend %slider-segment;
+    position: relative; z-index: 1;
+    border: {
+      left: 1px solid rgba(#fff, .5);
+      right: 1px solid rgba(#000, .15);
+    }
+
+    &:last-child {
+      border-right: 0;
+      &:after {
+        position: absolute; top: 0; bottom: 0; right: -3px;
+        content: "";
+        width: 3px;
+        z-index: 0;
+        border-right-radius: 1em;
+      }
+    }
+  }
+}
+
+/*--------------------------------\
+| Slider Fill                     |
+\--------------------------------*/
+
+.select-slider {
+
+  // Fills in the selected amount of the slider track
+
+  .slider-fill {
+    position: absolute; top: 0; bottom: 0; right: 0; left: 0;
+    border-radius: 1em;
+    left: -$slider-track-offset;
+    overflow: hidden;
+
+    &:after {
+      content: "";
+      border-radius: 1em;
+      position: absolute; top: 0; bottom: 0; right: 0; left: 0;
+      box-shadow: rgba(#000, .2) 0 0 0 1px inset;
+      background-image: linear-gradient(rgba(#fff, .4), rgba(#fff, .1) 50%, rgba(#fff, 0));
+    }
+  }
+
+  // This wrapper is set to the full with of the slider by javascript.
+  // This prevents the child segments from wrapping
+
+  .slider-fill-segments {
+    position: relative; left: $slider-track-offset;
+    height: $slider-segment-height;
+  }
+
+  // Colored segments fill segments
+
+  .slider-fill-segment {
+    @extend %slider-segment;
+    border: 1px solid transparent { top: 0; bottom: 0; }
+    &:first-child {
+      border-left: 0;
+      &:before {
+        position: absolute; top: 0; bottom: 0; left: -($slider-track-offset);
+        content: "";
+        width: 20px;
+        border-radius: 1em;
+        z-index: 0;
+      }
+    }
+  }
+}
+
+/*--------------------------------\
+| Slider Handle                   |
+\--------------------------------*/
+
+.select-slider {
+
+  // The handle is set to a one pixel width for minimal impact on the slider's offest.
+  // All of the visuals are accomplished through pseudo elements.
+
+  .slider-handle {
+    position: absolute;
+    z-index: 2;
+    top: 0px;
+    width: 1px;
+    height: $slider-segment-height;
+    z-index: 1;
+
+    &:before {
+      content: "";
+      height: 5px; width: 5px;
+      display: block;
+      margin: 0 auto;
+      background: #ccc;
+      box-shadow: rgba(#000, .2) 0 1px 1px inset;
+      position: absolute;
+      left: -2px; top: 3px;
+      z-index: 1;
+      border-radius: 1em;
+    }
+
+    &:after {
+      content: "";
+      position: absolute; left: -7px; right: -7px; top: -2px; bottom: -2px;
+      background-color: #e5e5e5;
+      border-radius: 1em;
+      background-image: linear-gradient(#fff, #eee);
+      box-shadow: rgba(#000, .3) 0 0 0 1px;
+    }
+
+    &:hover:before {
+      background: lighten($slider-glow, 25);
+    }
+    &:active:before {
+      background: lighten($slider-glow, 15);
+    }
+
+  }
+
+  // Handle styles for interaction
+
+  select:focus {
+    ~ .slider-handle {
+      &:before {
+        background: lighten($slider-glow, 15);
+      }
+      &:after {
+        box-shadow: #fff 0 1px 1px 1px inset,
+          rgba($slider-glow, .5) 0 0 0 1px,
+          $slider-glow 0 0 5px;
+      }
+    }
+  }
+}
+
+/*--------------------------------\
+| Slider label                    |
+|---------------------------------|
+| Shows current values for slider |
+\--------------------------------*/
+ 
+.select-slider {
+
+  // Tip container
+  // Left position set by javascript
+
+  .slider-label {
+    position: absolute;
+    cursor: default;
+    height: 1px;
+    bottom: $slider-segment-height + 8;
+    font-size: $slider-font-size;
+    text-align: center;
+    line-height: 1.4em;
+    z-index: -1;
+  }
+
+  // Label text container
+
+  .slider-label-tip {
+    padding: 1px 5px;
+    border-radius: 4px;
+    border: 1px solid #aaa;
+    background: #fff;
+    color: $slider-label-color;
+    box-shadow: rgba(#000, .1) 0 1px 2px;
+
+    // Tip is hidden by default
+
+    opacity: 0;
+    position: absolute;
+    bottom: 0;
+    transform: translate3d(0, 20px, 0);
+    transition: all .2s ease-in-out;
+
+    // Bottom triangle
+
+    &:before, &:after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      margin-left: -5px;
+    }
+    &:before {
+      @include triangle(down, #aaa, 6px);
+      bottom: -6px;
+    }
+    &:after {
+      @include triangle(down, #fff, 6px);
+      bottom: -5px;
+    }
+
+    // Prevent wrap for internal text
+
+    &, div { white-space: pre; }
+  }
+
+  // Show the tip whenever a user interacts with it
+
+  &:active, &:focus,
+  .slider-track:hover ~ .slider-label,
+  .slider-fill:hover ~ .slider-label,
+  .slider-handle:hover ~ .slider-label,
+  select:focus ~ .slider-label
+  {
+    .slider-label-tip {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}