rearview 1.0.0.rc1-jruby → 1.0.0.rc2-jruby

data/public/rearview/less/elements.less

@@ -0,0 +1,168 @@
+/*---------------------------------------------------
+    LESS Elements 0.6
+  ---------------------------------------------------
+    A set of useful LESS mixins by Dmitry Fadeyev
+    Special thanks for mixin suggestions to:
+      Kris Van Herzeele,
+      Benoit Adam,
+      Portenart Emile-Victor,
+      Ryan Faerman
+
+    More info at: http://lesselements.com
+
+    More added by: Ian Quattlebaum
+-----------------------------------------------------*/
+.box-sizing(@sizing) {
+    -webkit-box-sizing : @sizing;
+       -moz-box-sizing : @sizing;
+        -ms-box-sizing : @sizing;
+            box-sizing : @sizing;
+}
+
+.background-gradient(@background-image, @color: #F5F5F5, @start: #EEE, @stop: #FFF) {
+    background : @color;
+    background : @background-image, 
+                 -webkit-gradient(linear,
+                                  left bottom,
+                                  left top,
+                                  color-stop(0, @start),
+                                  color-stop(1, @stop));
+    background : @background-image,
+                 -ms-linear-gradient(bottom,
+                                     @start,
+                                     @stop);
+    background : @background-image,
+                 -moz-linear-gradient(center bottom,
+                                      @start 0%,
+                                      @stop 100%);
+}
+
+.gradient(@color : #F5F5F5, @start: #EEE, @stop: #FFF) {
+    background : @color;
+    background : -webkit-gradient(linear,
+                                  left bottom,
+                                  left top,
+                                  color-stop(0, @start),
+                                  color-stop(1, @stop));
+    background : -ms-linear-gradient(bottom,
+                                     @start,
+                                     @stop);
+    background : -moz-linear-gradient(center bottom,
+                                      @start 0%,
+                                      @stop 100%);
+}
+.bw-gradient(@color : #F5F5F5, @start : 0, @stop : 255) {
+    background : @color;
+    background : -webkit-gradient(linear,
+                                  left bottom,
+                                  left top,
+                                  color-stop(0, rgb(@start,@start,@start)),
+                                  color-stop(1, rgb(@stop,@stop,@stop)));
+    background : -ms-linear-gradient(bottom,
+                                     rgb(@start,@start,@start) 0%,
+                                     rgb(@start,@start,@start) 100%);
+    background : -moz-linear-gradient(center bottom,
+                                      rgb(@start,@start,@start) 0%,
+                                      rgb(@stop,@stop,@stop) 100%);
+}
+.bordered(@top-color : #EEE, @right-color : #EEE, @bottom-color : #EEE, @left-color : #EEE) {
+    border-top    : solid 1px @top-color;
+    border-left   : solid 1px @left-color;
+    border-right  : solid 1px @right-color;
+    border-bottom : solid 1px @bottom-color;
+}
+.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
+  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+}
+.rounded(@radius: 2px) {
+    -webkit-border-radius : @radius;
+       -moz-border-radius : @radius;
+            border-radius : @radius;
+
+    -webkit-background-clip : padding-box;
+       -moz-background-clip : padding;
+            background-clip : padding-box;
+}
+.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
+    -webkit-border-top-right-radius    : @topright;
+    -webkit-border-bottom-right-radius : @bottomright;
+    -webkit-border-bottom-left-radius  : @bottomleft;
+    -webkit-border-top-left-radius     : @topleft;
+       -moz-border-radius-topright     : @topright;
+       -moz-border-radius-bottomright  : @bottomright;
+       -moz-border-radius-bottomleft   : @bottomleft;
+       -moz-border-radius-topleft      : @topleft;
+            border-top-right-radius    : @topright;
+            border-bottom-right-radius : @bottomright;
+            border-bottom-left-radius  : @bottomleft;
+            border-top-left-radius     : @topleft;
+
+    -webkit-background-clip : padding-box; 
+       -moz-background-clip : padding; 
+            background-clip : padding-box; 
+}
+.opacity(@opacity: 0.5) {
+  -moz-opacity: @opacity;
+  -khtml-opacity: @opacity;
+  -webkit-opacity: @opacity;
+  opacity: @opacity;
+}
+.transition-duration(@duration: 0.2s) {
+  -moz-transition-duration: @duration;
+  -webkit-transition-duration: @duration;
+  transition-duration: @duration;
+}
+.rotation(@deg:5deg){
+  -webkit-transform: rotate(@deg);
+  -moz-transform: rotate(@deg);
+  transform: rotate(@deg);
+}
+.scale(@ratio:1.5){
+  -webkit-transform:scale(@ratio);
+  -moz-transform:scale(@ratio);
+  transform:scale(@ratio);
+}
+.transition(@duration:0.2s, @ease:ease-out) {
+  -webkit-transition: all @duration @ease;
+  -moz-transition: all @duration @ease;
+  transition: all @duration @ease;
+}
+.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
+  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+}
+.box-shadow(@arguments) {
+  -webkit-box-shadow: @arguments;
+  -moz-box-shadow: @arguments;
+  box-shadow: @arguments;
+}
+.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
+  -moz-column-width: @colwidth;
+  -moz-column-count: @colcount;
+  -moz-column-gap: @colgap;
+  -moz-column-rule-color: @columnRuleColor;
+  -moz-column-rule-style: @columnRuleStyle;
+  -moz-column-rule-width: @columnRuleWidth;
+  -webkit-column-width: @colwidth;
+  -webkit-column-count: @colcount;
+  -webkit-column-gap: @colgap;
+  -webkit-column-rule-color: @columnRuleColor;
+  -webkit-column-rule-style: @columnRuleStyle;
+  -webkit-column-rule-width: @columnRuleWidth;
+  column-width: @colwidth;
+  column-count: @colcount;
+  column-gap: @colgap;
+  column-rule-color: @columnRuleColor;
+  column-rule-style: @columnRuleStyle;
+  column-rule-width: @columnRuleWidth;
+}
+.translate(@x:0, @y:0) {
+  -moz-transform: translate(@x, @y);
+  -webkit-transform: translate(@x, @y);
+  -o-transform: translate(@x, @y);
+  -ms-transform: translate(@x, @y);
+  transform: translate(@x, @y);
+}

data/public/rearview/less/expandedmonitor.less

@@ -0,0 +1,283 @@
+/* expanded monitor widget styles */
+.expanded-monitor {
+    margin        : 0 2%;
+    padding       : 2px;
+    position      : relative;
+    background    : #545954;
+    border-radius : 5px;
+    color         : #fff;
+    min-height    : 400px;
+    min-width     : 1140px;
+
+    .proxima-regular();
+
+    .expressions {
+        width : 50%;
+    }
+
+    .metrics-test {
+        width : 48%;
+
+        .metrics {
+            margin-bottom : 10px;
+            display : block;
+            clear   : both;
+            width   : 100%;
+        }
+
+        .test-in-graph {
+            margin-right : 0;
+        }
+
+        .save-changes hr {
+            border-color : #B6B3A6;
+        }
+    }
+
+    .data-view {
+        margin        : 3px 3px 10px 3px;
+        padding       : 3px;
+        float         : left;
+        width         : 66%;
+        background    : #767a76;
+        border-radius : 4px;
+    }
+
+    .metrics-schedule {
+        margin : 3px;
+
+        fieldset.pager-duty {
+            margin-right : 0;
+            float : right;
+            width : 48%;
+        }
+
+        fieldset.description {
+            float: left;
+            width : 50%;
+        }
+
+        .day-month-picker {
+            clear : left;
+
+            .btn-group {
+                margin-bottom : 10px;
+            }
+        }
+
+        .tab-content {
+            overflow   : auto;
+            max-height : 221px;
+        }
+        
+
+        .button-view {
+            margin        : 10px 0 0 0;
+            padding       : 3px 10px;
+            background    : #767a76;
+            border-radius : 4px;
+        }
+
+        .form-horizontal {
+            .control-group {
+                margin : 0 20px 10px 0;
+                float : left;
+
+            }
+        }
+
+        .monitor-schedule {
+            float : left;
+        }
+
+        .monitor-meta {
+            textarea {
+                margin-bottom : 0;
+                height        : 124px;
+                width         : 98%;
+            }
+        }
+    }
+
+    label {
+        margin-bottom  : 3px;
+        color          : #b6b3a6;
+        font-size      : 14px;
+        text-transform : uppercase;
+
+        i {
+            font-size  : 10px;
+            font-style : normal;
+        }
+    }
+
+    .name-field {
+        margin-bottom : 3px;
+        display       : none;
+        input {
+            margin-bottom : 0;
+        }
+    }
+
+    /* different highlighting on expanded view fields */
+    textarea:focus,
+    input[type="text"]:focus,
+    input[type="password"]:focus,
+    input[type="datetime"]:focus,
+    input[type="datetime-local"]:focus,
+    input[type="date"]:focus,
+    input[type="month"]:focus,
+    input[type="time"]:focus,
+    input[type="week"]:focus,
+    input[type="number"]:focus,
+    input[type="email"]:focus,
+    input[type="url"]:focus,
+    input[type="search"]:focus,
+    input[type="tel"]:focus,
+    input[type="color"]:focus,
+    .uneditable-input:focus {
+        border-color : #b6b3a6;
+        box-shadow   : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(182, 179, 166, 0.7);
+        outline      : 0 none;
+    }
+
+    .authentication-stats {
+        margin : 0 auto;
+        width  : 100%;
+
+        label {
+            padding : 5px 7px;
+            display : inline-block;
+            cursor  : text; 
+        }
+
+        label:hover {
+            padding       : 4px 6px;
+            border        : 1px solid #b6b3a6;
+            min-width     : 220px;
+            background    : #333;
+            border-radius : 3px;
+            color         : #adabac;
+
+        }
+
+        .graph {
+            margin        : 2px -3px -3px -3px;
+            padding       : 3px;
+            height        : 200px;
+            border-radius : 0 0 4px 4px;
+            background    : #000;
+            overflow      : hidden;
+            clear         : both;
+        }
+    }
+
+    .alerts-output {
+        padding : 3px;
+        float   : right;
+        width   : 32%;
+
+        .output-view {
+            border        : none;
+            border-radius : 0 0 4px 4px !important;
+            display       : block;
+            margin        : 0 -10px -10px;
+            width         : 102%;
+            width         : -moz-available;
+            min-height    : 151px;
+        }
+    }
+
+    .alerts-history {
+        color      : #f5f4ed;
+        min-height : 133px;
+
+        ul {
+            margin        : 0 -10px -10px -10px;
+            padding       : 6px;
+            overflow      : auto;
+            min-height    : 133px;
+            border-radius : 0 0 4px 4px;
+            background    : #373737;
+        }
+
+        li {
+            margin-bottom : 26px;
+            position : relative;
+        }
+
+        button {
+            margin-top : 4px;
+            position: absolute;
+            top : 0;
+            right : 0;
+
+        }
+
+        h1 {
+            margin         : 0;
+            line-height    : 30px;
+
+            .proxima-regular(16px);
+        }
+
+        h2,
+        p {
+            margin         : 0;
+            line-height    : 16px;
+
+            .proxima-regular(12px);
+        }
+
+        label {
+            background-image: url("/public/img/alerts_icon.png");
+            background-repeat: no-repeat;
+            text-indent: 25px;
+        }
+    }
+
+    /* flat design ideas */
+    /*.btn.btn-inverse {
+        background   : #222;
+        border-color : #222;
+        box-shadow   : none;
+    }
+
+    .btn.btn-inverse:hover {
+        background   : #2A2A2A;
+        border-color : #2A2A2A;
+    }
+
+    .btn.btn-inverse.active {
+        background   : #444;
+        border-color : #444;
+    }
+
+    .btn.btn-large.btn-primary {
+        background   : #3A87AD;
+        border-color : #3A87AD;
+        box-shadow   : none;
+    }
+
+    .btn.btn-large.btn-primary:hover {
+        background   : #6496B6;
+        border-color : #6496B6;
+        box-shadow   : none;
+    }
+
+    .btn.btn-success {
+        background   : #51A351;
+        border-color : #51A351;
+        box-shadow   : none;
+    }
+
+    .btn.btn-success:hover {
+        background   : #52B452;
+        border-color : #52B452;
+        box-shadow   : none;
+    }
+
+    input, select, textarea {
+        border : none;
+    }*/
+}