commit(): saas changs

package.json

@@ -52,7 +52,8 @@
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
     "systemjs": "0.19.20",
-    "zone.js": "0.5.10"
+    "zone.js": "0.5.10",
+    "grunt-sass": "^1.1.0"
   },
   "engines": {
     "node": "0.4.x",

public/less/base/base.scss

+html {
+	height: 100%;
+}
+
+body {
+	height: 100%;
+  margin: 0;
+  font-family: $baseFontFamily;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $textColor;
+  background-color: $bodyBackground;
+}
+
+
+// Links
+// -------------------------
+
+a {
+  color: $linkColor;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: $linkColorHover;
+}
+

public/less/base/code.scss

+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+pre {
+  @include font-family-monospace();
+  font-size: $baseFontSize - 2;
+  background-color: $codeTagBackground;
+  color: $textColor;
+  border: 1px solid darken($codeTagBackground, 15%);
+  padding: 2px;
+}
+
+// Inline code
+code {
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+  white-space: nowrap;
+}
+
+// Blocks of code
+pre {
+  display: block;
+  margin: 0 0 $baseLineHeight / 2;
+  font-size: $baseFontSize - 1; // 14px to 13px
+  line-height: $baseLineHeight;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+
+  // Make prettyprint styles more spaced out for readability
+  &.prettyprint {
+    margin-bottom: $baseLineHeight;
+  }
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    color: inherit;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border: 0;
+  }
+}
+

public/less/base/fonts.scss

+@font-face {
+    font-family: 'grafana-icons';
+    src:    url('../fonts/grafana-icons.eot?h6rv8b');
+    src:    url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'),
+        url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'),
+        url('../fonts/grafana-icons.woff?h6rv8b') format('woff'),
+        url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+ 
+.icon-gf {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'grafana-icons' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-gf-raintank_wordmark:before {
+    content: "\e600";
+}
+.icon-gf-raintank_icn:before {
+    content: "\e601";
+}
+.icon-gf-raintank_r-icn:before {
+    content: "\e905";
+}
+.icon-gf-check-alt:before {
+    content: "\e603";
+}
+.icon-gf-check:before {
+    content: "\e604";
+}
+.icon-gf-collector:before {
+    content: "\e605";
+}
+.icon-gf-dashboard:before {
+    content: "\e606";
+}
+.icon-gf-panel:before {
+    content: "\e904";
+}
+.icon-gf-datasources:before {
+    content: "\e607";
+}
+.icon-gf-endpoint-tiny:before {
+    content: "\e608";
+}
+.icon-gf-endpoint:before {
+    content: "\e609";
+}
+.icon-gf-filter:before {
+    content: "\e60a";
+}
+.icon-gf-status:before {
+    content: "\e60b";
+}
+.icon-gf-monitoring:before {
+    content: "\e60c";
+}
+.icon-gf-monitoring-tiny:before {
+    content: "\e620";
+}
+.icon-gf-jump-to-dashboard:before {
+    content: "\e60d";
+}
+.icon-gf-warn:before {
+    content: "\e60e";
+}
+.icon-gf-nodata:before {
+    content: "\e60f";
+}
+.icon-gf-critical:before {
+    content: "\e610";
+}
+.icon-gf-online:before {
+    content: "\e611";
+}
+.icon-gf-event-error:before {
+    content: "\e623";
+}
+.icon-gf-event:before {
+    content: "\e624";
+}
+.icon-gf-private-collector:before {
+    content: "\e612";
+}
+.icon-gf-alert:before {
+    content: "\e61f";
+}
+.icon-gf-alert-disabled:before {
+    content: "\e621";
+}
+.icon-gf-refresh:before {
+    content: "\e613";
+}
+.icon-gf-save:before {
+    content: "\e614";
+}
+.icon-gf-settings:before {
+    content: "\e615";
+}
+.icon-gf-share:before {
+    content: "\e616";
+}
+.icon-gf-star:before {
+    content: "\e617";
+}
+.icon-gf-search:before {
+    content: "\e618";
+}
+.icon-gf-tag-add:before {
+    content: "\e619";
+}
+.icon-gf-tag-remove:before {
+    content: "\e61a";
+}
+.icon-gf-video:before {
+    content: "\e61b";
+}
+.icon-gf-bulk_action:before {
+    content: "\e61c";
+}
+.icon-gf-users:before {
+    content: "\e622";
+}
+.icon-gf-globe:before {
+    content: "\e61d";
+}
+.icon-gf-snapshot:before {
+    content: "\e61e";
+}
+.icon-gf-play-grafana-icon:before {
+    content: "\e629";
+}
+.icon-gf-grafana-icon:before {
+    content: "\e625";
+}
+.icon-gf-email:before {
+    content: "\e628";
+}
+.icon-gf-stopwatch:before {
+    content: "\e626";
+}
+.icon-gf-skull:before {
+    content: "\e900";
+}
+.icon-gf-probe:before {
+    content: "\e901";
+}
+.icon-gf-apps:before {
+    content: "\e902";
+}
+.icon-gf-litmus:before {
+    content: "\e627";
+}
+.icon-gf-grafana_wordmark:before {
+    content: "\e903";
+}
+

public/less/base/forms.scss

+//
+// Forms
+// --------------------------------------------------
+
+
+// GENERAL STYLES
+// --------------
+
+// Make all forms have space below them
+form {
+  margin: 0 0 $baseLineHeight;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// Groups of fields with labels on top (legends)
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: $baseLineHeight;
+  font-size: $baseFontSize * 1.5;
+  line-height: $baseLineHeight * 2;
+  color: $grayDark;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+
+  // Small
+  small {
+    font-size: $baseLineHeight * .75;
+    color: $grayLight;
+  }
+}
+
+// Set font for forms
+label,
+input,
+button,
+select,
+textarea {
+  @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
+}
+
+// Identify controls by their labels
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+// Form controls
+// -------------------------
+
+// Shared size and type resets
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  display: inline-block;
+  height: $baseLineHeight;
+  padding: 4px 6px;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $inputText;
+  vertical-align: top;
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+input,
+textarea,
+.uneditable-input {
+  width: 206px; // plus 12px padding and 2px border
+}
+// Reset height since textareas have rows
+textarea {
+  height: auto;
+}
+
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  background-color: $inputBackground;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  @include transition("border linear .2s, box-shadow linear .2s");
+
+  // Focus state
+  &:focus {
+    border-color: rgba(82,168,236, .8);
+    outline: 0;
+    @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+  }
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  line-height: normal;
+}
+
+// Reset width of input images, buttons, radios, checkboxes
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto; // Override of generic input selector
+}
+
+// Set the height of select and file controls to match text inputs
+select,
+input[type="file"] {
+  height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  line-height: $inputHeight;
+}
+
+// Make select elements obey height by applying a border
+select {
+  width: 220px; // default input width + 10px of padding that doesn't get applied
+  border: 1px solid $inputBorder;
+  background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+// Focus for select, file, radio, and checkbox
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  @include tab-focus();
+}
+
+// Placeholder
+// -------------------------
+
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
+input,
+textarea {
+  @include placeholder();
+}
+
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini       { width: 60px; }
+.input-small      { width: 90px; }
+.input-medium     { width: 150px; }
+.input-large      { width: 210px; }
+.input-xlarge     { width: 270px; }
+.input-xxlarge    { width: 530px; }
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
+// DISABLED STATE
+// --------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  cursor: not-allowed;
+  background-color: $inputDisabledBackground;
+}
+
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}
+
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+  &:focus {
+    border-color: darken(#ee5f5b, 10%);
+    $shadow: 0 0 6px lighten(#ee5f5b, 20%);
+    @include box-shadow($shadow);
+  }
+}
+
+input[type=text].input-fluid {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
+  -moz-box-sizing: border-box;
+  height: 100%;
+}
+
+input[type="checkbox"].cr1 {
+  display: none;
+}
+
+.editor-option label.cr1 {
+  display: inline-block;
+  margin: 5px 0 1px 0;
+}
+
+label.cr1 {
+  display: inline-block;
+  height: 19px;
+  position: relative;
+  clear: none;
+  text-indent: 2px;
+  margin: 0 0 0px 0;
+  padding: 0 0 0 20px;
+  vertical-align: top;
+  background: url($checkboxImageUrl) left top no-repeat;
+  cursor:pointer;
+}
+
+input[type="checkbox"]:checked+label {
+  background: url($checkboxImageUrl) 0px -21px no-repeat;
+}
+
+.gf-fluid-input {
+  border: none;
+  display: block;
+  overflow: hidden;
+  padding-right: 10px;
+  input[type=text] {
+    width: 100%;
+    padding: 5px 6px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  textarea {
+    width: 100%;
+    padding: 5px 6px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}

public/less/base/normalize.scss

+/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS and IE text size adjust after device orientation change,
+//    without disabling user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -ms-text-size-adjust: 100%; // 2
+  -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+  background-color: transparent;
+}
+
+//
+// Improve readability of focused elements when they are also in an
+// active/hover state.
+//
+
+a {
+  &:active {
+    outline: 0;
+  }
+  &:hover {
+    outline: 0;
+  }
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9/10.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow not hidden in IE 9/10/11.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari.
+//
+
+figure {
+  margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+  overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+//
+
+button {
+  overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+  line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// Address `appearance` set to `searchfield` in Safari and Chrome.
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9/10/11.
+//
+
+textarea {
+  overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

public/less/base/type.less

@@ -141,20 +141,6 @@ dt {
 dd {
   margin-left: @baseLineHeight / 2;
 }
-// Horizontal layout (like forms)
-.dl-horizontal {
-  .clearfix(); // Ensure dl clears floats if empty dd elements present
-  dt {
-    float: left;
-    width: @horizontalComponentOffset - 20;
-    clear: left;
-    text-align: right;
-    .text-overflow();
-  }
-  dd {
-    margin-left: @horizontalComponentOffset;
-  }
-}
 
 // MISC
 // ----

public/less/base/type.scss

+//
+// Typography
+// --------------------------------------------------
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 $baseLineHeight / 2;
+}
+.lead {
+  margin-bottom: $baseLineHeight;
+  font-size: $baseFontSize * 1.5;
+  font-weight: 200;
+  line-height: $baseLineHeight * 1.5;
+}
+
+// Emphasis & misc
+
+// -------------------------
+
+// Ex: 14px base font * 85% = about 12px
+.small, small   { font-size: 85%; }
+.large { font-size: 120%; }
+
+strong  { font-weight: bold; }
+em      { font-style: italic; color: $headingsColor; }
+cite    { font-style: normal; }
+
+// Utility classes
+.muted               { color: $grayLight; }
+a.muted:hover,
+a.muted:focus        { color: darken($grayLight, 10%); }
+
+.text-warning        { color: $warningText; }
+a.text-warning:hover,
+a.text-warning:focus { color: darken($warningText, 10%); }
+
+.text-error          { color: $errorText; }
+a.text-error:hover,
+a.text-error:focus   { color: darken($errorText, 10%); }
+
+.text-info           { color: $infoText; }
+a.text-info:hover,
+a.text-info:focus    { color: darken($infoText, 10%); }
+
+.text-success        { color: $successText; }
+a.text-success:hover,
+a.text-success:focus { color: darken($successText, 10%); }
+a { cursor: pointer; }
+
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6 {
+  margin: ($baseLineHeight / 2) 0;
+  font-family: $headingsFontFamily;
+  font-weight: $headingsFontWeight;
+  line-height: $baseLineHeight;
+  color: $headingsColor;
+  text-rendering: optimizelegibility; // Fix the character spacing for headings
+  font-style: $headingsFontStyle;
+  small {
+    font-weight: normal;
+    line-height: 1;
+    color: $grayLight;
+  }
+}
+
+h1,
+h2,
+h3 { line-height: $baseLineHeight * 2; }
+
+h1 { font-size: $baseFontSize * 2.00; } // ~38px
+h2 { font-size: $baseFontSize * 1.75; } // ~32px
+h3 { font-size: $baseFontSize * 1.50; } // ~24px
+h4 { font-size: $baseFontSize * 1.25; } // ~18px
+h5 { font-size: $baseFontSize; }
+h6 { font-size: $baseFontSize * 0.85; } // ~12px
+
+h1 small { font-size: $baseFontSize * 1.75; } // ~24px
+h2 small { font-size: $baseFontSize * 1.25; } // ~18px
+h3 small { font-size: $baseFontSize; }
+h4 small { font-size: $baseFontSize; }
+
+
+// Lists
+// --------------------------------------------------
+
+// Unordered and Ordered lists
+ul, ol {
+  padding: 0;
+  margin: 0 0 $baseLineHeight / 2 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+li {
+  line-height: $baseLineHeight;
+}
+
+// Remove default list styles
+ul.unstyled,
+ol.unstyled {
+  margin-left: 0;
+  list-style: none;
+}
+
+// Single-line list items
+ul.inline,
+ol.inline {
+  margin-left: 0;
+  list-style: none;
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+// Description Lists
+dl {
+  margin-bottom: $baseLineHeight;
+}
+dt,
+dd {
+  line-height: $baseLineHeight;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: $baseLineHeight / 2;
+}
+// Horizontal layout (like forms)
+.dl-horizontal {
+  @include clearfix();
+  dt {
+    float: left;
+    width: $horizontalComponentOffset - 20;
+    clear: left;
+    text-align: right;
+    @include text-overflow();
+  }
+  dd {
+    margin-left: $horizontalComponentOffset;
+  }
+}
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+  margin: $baseLineHeight 0;
+  border: 0;
+  border-top: 1px solid $hrBorder;
+  border-bottom: 1px solid $white;
+}
+
+// Abbreviations and acronyms
+abbr[title],
+// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted $grayLight;
+}
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+// Blockquotes
+blockquote {
+  padding: 0 0 0 15px;
+  margin: 0 0 $baseLineHeight;
+  border-left: 5px solid $grayLighter;
+  p {
+    margin-bottom: 0;
+    font-size: $baseFontSize * 1.25;
+    font-weight: 300;
+    line-height: 1.25;
+  }
+  small {
+    display: block;
+    line-height: $baseLineHeight;
+    color: $grayLight;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+
+  // Float right with text-align: right
+  &.pull-right {
+    float: right;
+    padding-right: 15px;
+    padding-left: 0;
+    border-right: 5px solid $grayLighter;
+    border-left: 0;
+    p,
+    small {
+      text-align: right;
+    }
+    small {
+      &:before {
+        content: '';
+      }
+      &:after {
+        content: '\00A0 \2014';
+      }
+    }
+  }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+// Addresses
+address {
+  display: block;
+  margin-bottom: $baseLineHeight;
+  font-style: normal;
+  line-height: $baseLineHeight;
+}
+
+a.external-link {
+  color: $blue;
+  text-decoration: underline;
+}
+
+
+.link {
+  color: $linkColor;
+  cursor: pointer;
+}
+
+.link:hover {
+  color: $linkColorHover;
+}
+
+.pointer {
+  cursor: pointer;
+}

public/less/bootstrap/grid.scss

+//
+// Grid system
+// --------------------------------------------------
+
+
+// Fixed (940px)
+#grid > .core($gridColumnWidth, $gridGutterWidth);
+
+// Fluid (940px)
+#grid > .fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
+
+// Reset utility classes due to specificity
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
+  display: none;
+}
+
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}

public/less/bootstrap/responsive-1200px-min.scss

+//
+// Responsive: Large desktop and up
+// --------------------------------------------------
+
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  #grid > .core($gridColumnWidth1200, $gridGutterWidth1200);
+
+  // Fluid grid
+  #grid > .fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
+
+  // Input grid
+  #grid > .input($gridColumnWidth1200, $gridGutterWidth1200);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -$gridGutterWidth1200;
+  }
+  .thumbnails > li {
+    margin-left: $gridGutterWidth1200;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+
+}

public/less/bootstrap/responsive-767px-max.scss

+//
+// Responsive: Landscape phone to desktop/tablet
+// --------------------------------------------------
+
+
+@media (max-width: 767px) {
+
+  // GRID & CONTAINERS
+  // -----------------
+  // Remove width from containers
+  .container {
+    width: auto;
+  }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
+  // Undo negative margin on rows and thumbnails
+  .row,
+  .thumbnails {
+    margin-left: 0;
+  }
+  .thumbnails > li {
+    float: none;
+    margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
+  }
+  // Make all grid-sized elements block level again
+  [class*="span"],
+  .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
+  .row-fluid [class*="span"] {
+    float: none;
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    @include box-sizing(border-box);
+  }
+  .span12,
+  .row-fluid .span12 {
+    width: 100%;
+    @include box-sizing(border-box);
+  }
+  .row-fluid [class*="offset"]:first-child {
+    margin-left: 0;
+  }
+
+  // FORM FIELDS
+  // -----------
+  // Make span* classes full width
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    @mixin input-block-level();
+  }
+  // But don't let it screw up prepend/append inputs
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    display: inline-block; // redeclare so they don't wrap to new lines
+    width: auto;
+  }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    position: fixed;
+    top:   20px;
+    left:  20px;
+    right: 20px;
+    width: auto;
+    margin: 0;
+    &.fade  { top: -100px; }
+    &.fade.in { top: 20px; }
+  }
+
+}
+
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: $baseLineHeight;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal {
+    .control-label {
+      float: none;
+      width: auto;
+      padding-top: 0;
+      text-align: left;
+    }
+    // Move over all input controls and content
+    .controls {
+      margin-left: 0;
+    }
+    // Move the options list down to align with labels
+    .control-list {
+      padding-top: 0; // has to be padding because margin collaspes
+    }
+    // Move over buttons in .form-actions to align with .controls
+    .form-actions {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+
+  // Medias
+  // Reset float and spacing to stack
+  .media .pull-left,
+  .media .pull-right  {
+    float: none;
+    display: block;
+    margin-bottom: 10px;
+  }
+  // Remove side margins since we stack instead of indent
+  .media-object {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  // Modals
+  .modal {
+    top:   10px;
+    left:  10px;
+    right: 10px;
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
+
+}

public/less/bootstrap/responsive-768px-979px.scss

+//
+// Responsive: Tablet to desktop
+// --------------------------------------------------
+
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+  // Fixed grid
+  #grid > .core($gridColumnWidth768, $gridGutterWidth768);
+
+  // Fluid grid
+  #grid > .fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768);
+
+  // Input grid
+  #grid > .input($gridColumnWidth768, $gridGutterWidth768);
+
+  // No need to reset .thumbnails here since it's the same $gridGutterWidth
+
+}

public/less/bootstrap/responsive-utilities.scss

+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+
+// IE10 Metro responsive
+// Required for Windows 8 Metro split-screen snapping with IE10
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+$-ms-viewport{
+  width: device-width;
+}
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+.visible-desktop   { display: inherit !important; }
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+}
+
+// Phones only
+@media (max-width: 767px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+}
+
+// Print utilities
+.visible-print    { display: none !important; }
+.hidden-print     { }
+
+@media print {
+  .visible-print  { display: inherit !important; }
+  .hidden-print   { display: none !important; }
+}

public/less/bootstrap/responsive.scss

+/*!
+ * Bootstrap Responsive v2.3.2
+ *
+ * Copyright 2013 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world by $mdo and $fat.
+ */
+
+
+// Responsive.scss
+// For phone and tablet devices
+// -------------------------------------------------------------
+
+
+// REPEAT VARIABLES & MIXINS
+// -------------------------
+// Required since we compile the responsive stuff separately
+
+@import "../mixins/mixins.scss";
+@import "responsive-utilities.scss";
+@import "responsive-1200px-min.scss";
+@import "responsive-768px-979px.scss";
+@import "responsive-767px-max.scss";
+
+

public/less/components/alerts.scss

+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: 8px 35px 13px 14px;
+  margin-bottom: $baseLineHeight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  background-color: $warningBackground;
+  position: relative;
+  color: $white;
+  text-shadow: 0 1px 0 rgba(0,0,0,.5);
+  border-radius: 2px;
+}
+
+// Alternate styles
+// -------------------------
+
+.alert-success {
+  background-color: $successBackground;
+}
+
+.alert-danger,
+.alert-error {
+  background-color: $errorBackground;
+}
+.alert-info {
+  background-color: $infoBackground;
+}
+.alert-warning {
+  background-color: $warningBackground;
+}
+
+.page-alert-list {
+  z-index: 8000;
+  min-width: 300px;
+  max-width: 300px;
+  position: fixed;
+  right: 20px;
+  top: 56px;
+}
+
+.alert-close {
+  position: absolute;
+  top: -4px;
+  right: -2px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: $white;
+  border-radius: 50%;
+  border: none;
+  font-size: 1.1rem;
+  color: $grayDarker;
+  .fa {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.alert-title {
+  font-weight: $fontWeightSemi;
+  padding-bottom: 2px;
+}

public/less/components/buttons.scss

+//
+// Buttons
+// --------------------------------------------------
+
+// Base styles
+// --------------------------------------------------
+
+// Core
+.btn {
+  display: inline-block;
+	padding: 8px 12px;
+	margin-right: 10px;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: none;
+
+  @include buttonBackground($btnBackground, $btnBackgroundHighlight,  $grayDark, 0 1px 1px rgba(255,255,255,.75));
+  @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+
+  // Hover/focus state
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  // Focus state for keyboard and accessibility
+  &:focus {
+    @include tab-focus();
+  }
+
+  // Active state
+  &.active,
+  &:active {
+    background-image: none;
+  }
+
+  // Disabled state
+  &.disabled,
+  &[disabled] {
+    cursor: default;
+    background-image: none;
+    @include opacity(65);
+  }
+}
+
+// Button Sizes
+// --------------------------------------------------
+
+// Large
+.btn-large {
+  padding: 6px 20px;
+  font-size: $fontSizeLarge;
+}
+
+.btn-small {
+	padding: 2px 10px;
+  font-size: $fontSizeSmall;
+}
+
+.btn-mini {
+	padding: 2px 6px;
+	margin-right: 0;
+	margin-right: 0;
+  font-size: $fontSizeMini;
+}
+
+// Set the backgrounds
+// -------------------------
+.btn-primary {
+  @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
+}
+// Warning appears are orange
+.btn-warning {
+  @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
+}
+// Danger and error appear as red
+.btn-danger {
+  @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
+}
+// Success appears as green
+.btn-success {
+  @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
+}
+// Info appears as a neutral blue
+.btn-info {
+  @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
+}
+// Inverse appears as dark gray
+.btn-inverse {
+  @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText);
+  box-shadow: none;
+  border: 1px solid $grafanaTargetFuncHightlight;
+}
+
+.btn-text {
+  color: $btnText;
+  margin: 0;
+  vertical-align: middle;
+}

public/less/components/color_picker.scss

+
+.sp-replacer {
+  background: inherit;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
+
+.sp-replacer:hover, .sp-replacer.sp-active {
+  border-color: inherit;
+  color: inherit;
+}
+
+.sp-container {
+  border-radius: 0;
+  background-color: $heroUnitBackground;
+  border: none;
+  padding: 0;
+}
+
+.sp-palette-container, .sp-picker-container {
+  border: none;
+}
+
+.sp-dd {
+  display: none;
+}
+
+.sp-preview {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  border: none;
+  margin-right: 5px;
+  float: left;
+  z-index: 0;
+}

public/less/components/dashboard.scss

+.template-variable {
+  color: $variable;
+}
+
+.grafana-row {
+  margin-bottom: 5px;
+}
+
+.row-tab {
+  .dropdown-menu-right {
+    top: 0;
+    left: 33px;
+  }
+}
+
+.row-tab-button {
+  padding: 0px;
+  cursor: pointer;
+  vertical-align: middle;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  display: inline-block;
+  line-height: 30px;
+  background: $btnSuccessBackground;
+  color: rgba(255,255,255,.90);
+}
+
+.row-button {
+  width: 24px;
+  float: left;
+  cursor: pointer;
+  line-height: 31px;
+  background-color: $blueDark;
+}
+
+.row-text {
+  white-space: nowrap;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.9em;
+  text-align: center;
+  line-height: 31px;
+  height: 31px;
+}
+
+.row-close {
+  padding: 0px;
+  margin: 0px;
+  background: $grafanaPanelBackground;
+  text-align: center;
+}
+
+.row-close-buttons {
+  position: absolute;
+  left: 0;
+}
+
+.row-open {
+  margin-top: 5px;
+  left: -28px;
+  position: absolute;
+  z-index: 100;
+  transition: .10s left;
+  transition-delay: .10s;
+
+  &:hover {
+    left: -12px;
+  }
+}
+
+
+.row-control-inner {
+  padding:0px;
+  margin:0px;
+  position:relative;
+}
+
+.hide-controls {
+  padding: 0;
+  .row-tab {
+    display: none;
+  }
+  .add-row-panel-hint {
+    display: none;
+  }
+}
+
+.playlist-active {
+  .add-row-panel-hint,
+  .dashnav-refresh-action,
+  .dashnav-zoom-out,
+  .dashnav-action-icons {
+    display: none;
+  }
+
+  .grafana-menu-stop-playlist {
+    display: list-item;
+  }
+}
+
+div.flot-text {
+  color: $textColor !important;
+}
+
+.panel {
+  display: inline-block;
+  float: left;
+  vertical-align: top;
+  position: relative;
+}
+
+.panel-margin {
+  margin: 5px;
+  display: block;
+}
+
+.panel-container {
+  background-color: $grafanaPanelBackground;
+  position: relative;
+  border: $grafanaPanelBorder;
+  &:hover {
+    .panel-actions {
+      display: block;
+    }
+  }
+
+  &.panel-transparent {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.panel-content {
+  padding: 0px 10px 5px 10px;
+}
+
+.panel-title-container {
+  min-height: 5px;
+  padding-top: 4px;
+  cursor: pointer;
+}
+
+.panel-title {
+  border: 0px;
+  font-weight: $fontWeightSemi;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  display: block;
+}
+
+.panel-links-btn {
+  margin-left: 10px;
+  display: none;
+}
+
+.panel-loading {
+  position:absolute;
+  top: -3px;
+  right: 0px;
+  z-index: 800;
+}
+
+.panel-header {
+  text-align: center;
+}
+
+.panel-error {
+  color: $white;
+  position: absolute;
+  left: 0;
+  padding: 0px 17px 6px 5px;
+  top: 0;
+  z-index: 10;
+  i {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.panel-error-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 31px solid transparent;
+  border-right: 30px solid transparent;
+  border-bottom: 27px solid $grafanaPanelBackground;
+  left: 0;
+  bottom: 0;
+}
+
+.panel-fullscreen {
+  .panel-title-container {
+    padding: 8px;
+  }
+}
+
+.panel-full-edit {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.panel-menu {
+  z-index: 500;
+  position: absolute;
+  background: $grafanaTargetFuncBackground;
+  border: 1px solid black;
+
+  .panel-menu-row {
+    white-space: nowrap;
+    border-bottom: 1px solid black;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .panel-menu-link, .panel-menu-icon {
+    padding: 5px 10px;
+  }
+
+  .panel-menu-link {
+    display: inline-block;
+    border-right: 1px solid black;
+    &:last-child {
+      border: none;
+    }
+  }
+
+  .dropdown-menu {
+    text-align: left;
+  }
+}
+
+.panel-highlight  {
+  @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
+}
+
+.on-drag-hover {
+  .panel-container {
+    @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
+  }
+}
+
+.panel-drop-zone {
+  display: none;
+  .panel-container {
+    border: 1px solid $grayDark;
+  }
+}
+
+.panel-time-info {
+  font-weight: bold;
+  float: right;
+  margin-right: 15px;
+  color: $blue;
+  font-size: 85%;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.resize-panel-handle {
+  cursor: se-resize;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 15px;
+  height: 15px;
+  display: block;
+}
+
+.dashboard-header {
+  font-family: "grafana-icons";
+  font-size: 22px;
+  text-align: center;
+  span {
+    display: inline-block;
+    border: none;
+    border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
+    border-image-slice: 1;
+    border-bottom: 2px solid transparent;
+    padding: 1.2rem .2rem .4rem .2rem;
+  }
+}

public/less/components/dropdown.scss

+//
+// Dropdown menus
+// --------------------------------------------------
+
+
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropup,
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle {
+  // The caret makes the toggle a bit too tall in IE7
+  *margin-bottom: -3px;
+}
+.dropdown-toggle:active,
+.open .dropdown-toggle {
+  outline: 0;
+}
+
+// Dropdown arrow/caret
+// --------------------
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: top;
+  border-top:   4px solid $black;
+  border-right: 4px solid transparent;
+  border-left:  4px solid transparent;
+  content: "";
+}
+
+// Place the caret
+.dropdown .caret {
+  margin-top: 8px;
+  margin-left: 2px;
+}
+
+// The dropdown menu (ul)
+// ----------------------
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindexDropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: 140px;
+  padding: 5px 0;
+  margin: 2px 0 0; // override default ul
+  list-style: none;
+  background-color: $dropdownBackground;
+  border: 1px solid #ccc; // Fallback for IE7-8
+  border: 1px solid $dropdownBorder;
+
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
+
+  // Links within the dropdown menu
+  > li > a {
+    display: block;
+    padding: 3px 20px 3px 15px;
+    clear: both;
+    font-weight: normal;
+    line-height: $baseLineHeight;
+    color: $dropdownLinkColor;
+    white-space: nowrap;
+
+    i {
+      padding-right: 5px;
+      color: $linkColorDisabled;
+    }
+  }
+}
+
+// Hover/Focus state
+// -----------
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
+  text-decoration: none;
+  color: $dropdownLinkColorHover;
+  background-color: $grafanaListHighlight;
+}
+
+// Active state
+// ------------
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  color: $dropdownLinkColorActive;
+  text-decoration: none;
+  outline: 0;
+  background-color: $grafanaListHighlight;
+}
+
+// Disabled state
+// --------------
+// Gray out text and ensure the hover/focus state remains gray
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  color: $grayLight;
+}
+// Nuke hover/focus effects
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none; // Remove CSS gradient
+  cursor: default;
+}
+
+// Open state for the dropdown
+// ---------------------------
+.open {
+  & > .dropdown-menu {
+    display: block;
+  }
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+// ---------------------------
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: $zindexDropdown - 10;
+}
+
+// Right aligned dropdowns
+// ---------------------------
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// ------------------------------------------------------
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Reverse the caret
+  .caret {
+    border-top: 0;
+    border-bottom: 4px solid $black;
+    content: "";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+  }
+}
+
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+  position: relative;
+}
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  @include border-radius(0 6px 6px 6px);
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  @include border-radius(5px 5px 5px 0);
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: darken($dropdownBackground, 20%);
+  margin-top: 5px;
+  margin-right: -10px;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: $dropdownLinkColorHover;
+}
+
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
+
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    @include border-radius(6px 0 6px 6px);
+  }
+}
+
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+// Typeahead
+// ---------
+.typeahead {
+  z-index: 1051;
+  margin-top: 2px; // give it some space to breathe
+  @include border-radius($baseBorderRadius);
+}

public/less/components/filter-controls.scss

+// ==========================================================================
+// FILTER CONTROLS
+// ==========================================================================
+
+
+
+// Filters
+// --------------------------------------------------------------------------
+
+.filter-controls-filters {
+  display: inline-block;
+  margin-bottom: 40px;
+}
+
+.tab-pane > .filter-controls-filters {
+  margin-top: 20px;
+}
+
+
+
+// Actions
+// --------------------------------------------------------------------------
+
+.filter-controls-actions {
+  margin: 0 0 10px;
+  padding: 0;
+  list-style: none;
+}
+
+.filter-controls-actions > li {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.filter-controls-actions-selected {
+  text-transform: uppercase;
+}

public/less/components/filter-list.scss

+// ==========================================================================
+// FILTER LIST
+// ==========================================================================
+
+
+
+// List
+// --------------------------------------------------------------------------
+
+.filter-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.filter-list > li {
+  padding: 10px;
+  margin-bottom: 2px;
+  background: $grafanaPanelBackground;
+
+  &:last-child {
+    margin: 0;
+  }
+}
+
+
+
+// Card
+// --------------------------------------------------------------------------
+
+.filter-list-card {
+  display: table;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.filter-list-card > li {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.filter-list-card-select {
+  width: 23px;
+  padding-right: 5px;
+}
+
+.filter-list-card-title {
+  display: block;
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.filter-list-card-image {
+  width: 50px;
+  padding: 5px 50px 5px 5px;
+}
+
+
+.filter-list-card-status {
+  color: #777;
+  font-size: 12px;
+}
+
+.filter-list-card-state {
+  display: inline-block;
+  padding: 5px 0 0 28px;
+  background: 0 bottom no-repeat;
+  background-size: 24px auto;
+  font-size: 14px;
+  text-transform: uppercase;
+
+  &.online {
+    background-image: url('/img/online.svg');
+    color: $online;
+  }
+
+  &.warn {
+    background-image: url('/img/warn-tiny.svg');
+    color: $warn;
+  }
+
+  &.critical {
+    background-image: url('/img/critical.svg');
+    color: $critical;
+  }
+}
+
+.filter-list-card-controls {
+  float: right;
+}
+
+.filter-list-card-links,
+.filter-list-card-config,
+.filter-list-card-expand {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.filter-list-card-link {
+  display: block;
+  color: #777;
+  text-align: right;
+
+  > a {
+    color: #777;
+  }
+}
+
+.filter-list-card-config {
+  padding: 8px 8px 8px 16px;
+  color: #777;
+  font-size: 25px;
+
+  > a {
+    color: #777;
+  }
+}
+
+.filter-list-card-expand {
+  width: 20px;
+  padding: 8px 0 8px 8px;
+  color: #aaa;
+  font-size: 30px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.filter-list-card-details {
+  padding: 20px 0 0 30px;
+}
+
+.filter-list-card-details-heading {
+  font-weight: normal;
+
+  > a {
+    float: right;
+    color: $blue;
+    font-size: 12px;
+  }
+}

public/less/components/filter-table.scss

+// ==========================================================================
+// FILTER TABLE
+// ==========================================================================
+
+
+
+// Table
+// --------------------------------------------------------------------------
+
+.filter-table * {
+  box-sizing: border-box;
+}
+
+.filter-table {
+  width: 100%;
+  border-collapse: collapse;
+  // table-layout: fixed;
+}
+
+.filter-table tr {
+  background: $grafanaListBackground;
+  border-bottom: 2px solid $pageBackground;
+}
+
+.filter-table th {
+  width: auto;
+  padding: 10px 15px 10px 0;
+  text-align: left;
+
+  &:first-child {
+    padding-left: 15px;
+  }
+}
+
+.filter-table td {
+  padding: 15px 15px 15px 0;
+
+  &:first-child {
+    padding-left: 15px;
+  }
+}
+
+.filter-table .ellipsis {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filter-table .expanded {
+  border-color: $grafanaPanelBackground;
+}
+
+.filter-table .expanded > td {
+  padding-bottom: 0;
+}

public/less/components/footer.scss

+.grafana-version-info {
+  position: absolute;
+  bottom: 2px;
+  left: 3px;
+  font-size: 80%;
+  color: darken($gray, 25%);
+  a { color: darken($gray, 25%); }
+}
+

public/less/components/gf-form.scss

+.gf-form {
+  margin-top: 3px;
+  margin-right: 3px;
+  display: inline-block;
+
+  .checkbox-label {
+    display: inline;
+    padding: 8px 7px 8px 4px;
+  }
+  .cr1 {
+    margin-left: 8px;
+  }
+}
+
+.gf-form-group {
+  margin-bottom: 20px;
+}
+
+.gf-form-flow {
+  float: left;
+  margin-right: 20px;
+}
+
+.gf-form-button-row {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.gf-form-label {
+  background-color: $labelBackground;
+  display: inline-block;
+  padding: 8px 7px;
+  @include small;
+}
+
+[type=text],
+[type=email],
+[type=number],
+[type=password], {
+  &.gf-form-input {
+    border: none;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 6px;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 15px;
+  }
+}
+
+input[type=checkbox].gf-form-checkbox {
+  margin: 0;
+}
+
+select.gf-form-input {
+  padding: 2px 3px;
+  font-size: 15px;
+  box-sizing: content-box;
+}
+
+.gf-size-xs { width: 60px; }
+.gf-size-s { width: 80px; }
+.gf-size-ms { width: 100px;}
+.gf-size-m { width: 110px; }
+.gf-size-l { width: 120px; }
+.gf-size-xl { width: 150px; }
+.gf-size-xxl { width: 200px; }
+.gf-size-xxxl { width: 300px; }
+.gf-size-auto { width: auto; }
+
+

public/less/components/gfbox.scss

+.gf-box {
+  margin: 10px 5px;
+  background-color: $grafanaPanelBackground;
+  position: relative;
+  border: 1px solid $grafanaTargetFuncBackground;
+}
+
+.gf-box-no-margin {
+  margin: 0;
+}
+
+.gf-box-header-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+  padding: 8px;
+  i {
+    font-size: 120%;
+  }
+  color: $textColor;
+  &:hover {
+    color: $white;
+  }
+}
+
+.gf-box-header-save-btn {
+  padding: 7px 0;
+  float: right;
+  color: $grayLight;
+  font-style: italic;
+}
+
+.gf-box-body {
+  padding: 20px;
+  min-height: 150px;
+}
+
+.gf-box-footer {
+  overflow: hidden;
+}
+
+.gf-box-header {
+  border-bottom: 1px solid $grafanaTargetFuncBackground;
+  overflow: hidden;
+  background-color: $grafanaTargetBackground;
+  .tabs {
+    float: left;
+  }
+  .nav {
+    margin: 0;
+  }
+}
+
+.gf-box-title {
+  padding-right: 20px;
+  padding-left: 10px;
+  float: left;
+  color: $linkColor;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 38px;
+  margin: 0;
+  .fa {
+    padding: 0 8px 0 5px;
+    color: $textColor;
+  }
+}

public/less/components/infobox.scss

+.grafana-info-box:before {
+  content: "\f05a";
+  font-family:'FontAwesome';
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  font-size: 20px;
+  color: $blue;
+}
+
+.grafana-info-box {
+  position: relative;
+  padding: 5px 15px;
+  background-color: $grafanaTargetBackground;
+  border: 1px solid $grafanaTargetBorder;
+  h5 {
+    margin-top: 5px;
+  }
+}
+

public/less/components/modals.scss

+//
+// Modals
+// --------------------------------------------------
+
+// Background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindexModalBackdrop;
+  background-color: $black;
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  @include opacity(70);
+}
+
+// Base modal
+.modal {
+  position: fixed;
+  z-index: $zindexModal;
+  width: 100%;
+	background-color: $grafanaPanelBackground;
+  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include background-clip(padding-box);
+  outline: none;
+
+  max-width: 800px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  top: 20%;
+}
+
+.modal-header {
+  padding: 9px 15px;
+	border-bottom: 1px solid $grafanaPanelBackground;
+}
+
+// Body (where all modal content resides)
+.modal-body {
+  position: relative;
+  overflow-y: auto;
+}
+
+// Remove bottom margin if need be
+.modal-form {
+  margin-bottom: 0;
+}
+
+// Footer (for actions)
+.modal-footer {
+  padding: 14px 15px 15px;
+	border-top: 1px solid $grafanaPanelBackground;
+  background-color: $grafanaPanelBackground;
+  text-align: right; // right align buttons
+  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
+}
+
+.modal-no-header {
+  border: 1px solid $grafanaTargetFuncBackground;
+  text-align: center;
+
+  h3 {
+    margin-top: 30px;
+  }
+
+  .modal-close {
+    float: right;
+    font-size: 140%;
+    padding: 10px;
+  }
+
+  .modal-tagline {
+    font-size: 16px;
+  }
+}
+
+.confirm-modal {
+  max-width: 500px;
+
+  .confirm-modal-icon {
+    padding-top: 41px;
+    font-size: 280%;
+    color: $green;
+    padding-bottom: 20px;
+  }
+
+  .confirm-modal-title {
+    font-size: 18px;
+    color: $linkColor;
+    margin-bottom: 15px;
+  }
+
+  .confirm-modal-buttons {
+    margin-top: 35px;
+    margin-bottom: 35px;
+    button {
+      margin-right: 5px
+    }
+  }
+}
+
+.share-modal-body {
+  text-align: center;
+  padding: 10px 0;
+
+  .tight-form {
+    text-align: left;
+  }
+
+  .share-modal-options {
+    margin: 11px 20px 33px 20px;
+  }
+
+  .share-modal-big-icon {
+    .fa, .icon-gf {
+      font-size: 70px;
+    }
+  }
+
+  .share-snapshot-info-text {
+    margin: 10px 105px;
+    strong {
+      color: $headingsColor;
+      font-weight: 500;
+    }
+  }
+
+  .share-snapshot-header {
+    margin: 20px 0 22px 0;
+  }
+
+  .tight-form {
+    text-align: left;
+  }
+
+  .share-snapshot-link {
+    max-width: 716px;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }
+}

public/less/components/navbar.scss

+
+
+.navbar {
+  overflow: visible;
+  position: relative;
+  z-index: 110;
+}
+
+.navbar-inner {
+  min-height: $navbarHeight;
+  padding-right: 20px;
+  background-color: $navbarBackground;
+  border-bottom: $navbarBorder;
+
+  @include clearfix();
+}
+
+.navbar .nav {
+  position: relative;
+  left: 0;
+  float: left;
+  margin: 0 10px 0 0;
+}
+
+.nav {
+  display: block;
+}
+
+.navbar .nav.pull-right {
+  float: right; // redeclare due to specificity
+  margin-right: 0; // remove margin on float right nav
+}
+
+.navbar .nav > li {
+  float: left;
+}
+
+// Links
+.navbar .nav > li > a {
+  float: none;
+  padding: 17px 13px 13px;
+  color: $navbarLinkColor;
+  text-decoration: none;
+
+  .fa { font-size: 115%; }
+}
+
+// Hover/focus
+.navbar .nav > li > a:focus,
+.navbar .nav > li > a:hover {
+  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
+  color: $navbarLinkColorHover;
+  text-decoration: none;
+}
+
+// Active nav items
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
+  color: $navbarLinkColorActive;
+  text-decoration: none;
+  background-color: $navbarLinkBackgroundActive;
+}
+
+
+.fa.top-nav-breadcrumb-icon {
+  margin: 18px 0 6px 5px;
+  float: left;
+  font-size: 120%;
+  color: $textColor;
+}
+
+.top-nav-btn {
+  display: block;
+  position: relative;
+  float: left;
+  margin: 0;
+  font-size: 1.4em;
+  border-right: 1px solid $grafanaTargetBorder;
+
+  .fa-caret-down {
+    font-size: 55%;
+    position: absolute;
+    right: 8px;
+    top: 23px;
+    margin-right: 2px;
+  }
+
+  a {
+    color: darken($linkColor, 5%);
+    background-color: $navbarButtonBackground;
+    display: inline-block;
+    &:hover {
+      background: $navbarButtonBackgroundHighlight;
+      color: $linkColor;
+      // border-bottom: 1px solid $blue;
+    }
+  }
+}
+
+.top-nav-menu-btn {
+  a {
+     padding: 7px 20px 6px 13px;
+  }
+  img {
+    width: 30px;
+    position: relative;
+  }
+  .top-nav-logo-background {
+    display: inline-block;
+    border: 1px solid $bodyBackground;
+    padding: 4px;
+    border-radius: 50%;
+    background: $iconContainerBackground;
+    width: 30px;
+    height: 30px;
+  }
+  .icon-gf-grafana_wordmark {
+    font-size: 21px;
+    position: relative;
+    top: 4px;
+    padding-left: 5px;
+    display: none;
+  }
+}
+
+.dashnav-dashboards-btn {
+  a {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: block;
+    padding: 16px 17px 16px 13px;
+  }
+
+  .fa-th-large {
+    position: relative;
+    top: 2px;
+  }
+
+  .icon-gf {
+    position: relative;
+    top: 2px;
+    font-size: 20px;
+    line-height: 8px;
+  }
+}
+
+.dashboard-title {
+  padding: 0px 6px 5px 5px;
+  font-size: 17px;
+}
+
+.top-nav-icon {
+  margin: 5px 0px 0 11px;
+  line-height: 41px;
+  float: left;
+}
+
+.top-nav-section {
+  display: block;
+  float: left;
+  padding: 19px 9px 8px 0;
+  font-weight: bold;
+  i {
+    padding-left: 8px;
+  }
+}
+
+.top-nav-title {
+  display: block;
+  float: left;
+  font-size: 17px;
+  padding: 18px 10px 10px 13px;
+  color: $linkColor;
+}
+
+

public/less/components/navs.scss

+//
+// Navs
+// --------------------------------------------------
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+  margin-left: 0;
+  margin-bottom: $baseLineHeight;
+  list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+  display: block;
+}
+.nav > li > a:hover,
+.nav > li > a:focus {
+  text-decoration: none;
+  background-color: $grayLighter;
+}
+
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+  float: right;
+}
+
+// Nav headers (for dropdowns and lists)
+.nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  color: $grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav-list {
+  padding-left: 15px;
+  padding-right: 15px;
+  margin-bottom: 0;
+}
+.nav-list > li > a,
+.nav-list .nav-header {
+  margin-left:  -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav-list > li > a {
+  padding: 3px 15px;
+}
+.nav-list > .active > a,
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
+  color: $white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+  background-color: $linkColor;
+}
+.nav-list [class^="icon-"],
+.nav-list [class*=" icon-"] {
+  margin-right: 2px;
+}
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
+.nav-tabs,
+.nav-pills {
+  @include clearfix();
+}
+.nav-tabs > li,
+.nav-pills > li {
+  float: left;
+}
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+// Make the list-items overlay the bottom border
+.nav-tabs > li {
+  margin-bottom: -1px;
+}
+// Actual tabs (as links)
+.nav-tabs > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: $baseLineHeight;
+  border: 1px solid transparent;
+  @include border-radius(4px 4px 0 0);
+  &:hover,
+  &:focus {
+    border-color: $grayLighter $grayLighter #ddd;
+  }
+}
+// Active state, and it's :hover/:focus to override normal :hover/:focus
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+  color: $gray;
+  background-color: $bodyBackground;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+
+
+// Default dropdown links
+// -------------------------
+// Make carets use linkColor to start
+.nav .dropdown-toggle .caret {
+  border-top-color: $linkColor;
+  border-bottom-color: $linkColor;
+  margin-top: 6px;
+}
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
+  border-top-color: $linkColorHover;
+  border-bottom-color: $linkColorHover;
+}
+/* move down carets for tabs */
+.nav-tabs .dropdown-toggle .caret {
+  margin-top: 8px;
+}
+
+// Active dropdown links
+// -------------------------
+.nav .active .dropdown-toggle .caret {
+  border-top-color: #fff;
+  border-bottom-color: #fff;
+}
+.nav-tabs .active .dropdown-toggle .caret {
+  border-top-color: $gray;
+  border-bottom-color: $gray;
+}
+
+// Active:hover/:focus dropdown links
+// -------------------------
+.nav > .dropdown.active > a:hover,
+.nav > .dropdown.active > a:focus {
+  cursor: pointer;
+}
+
+// Open dropdowns
+// -------------------------
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
+  color: $white;
+  background-color: $grayLight;
+  border-color: $grayLight;
+}
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret,
+.nav li.dropdown.open a:focus .caret {
+  border-top-color: $white;
+  border-bottom-color: $white;
+  @include opacity(100);
+}
+
+// Dropdowns in stacked tabs
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
+  border-color: $grayLight;
+}
+
+// Show/hide tabbable areas
+.tab-content > .tab-pane {
+  display: none;
+}
+
+.tab-content > .active {
+  display: block;
+}

public/less/components/old_stuff.scss

+
+div.editor-row {
+  vertical-align: top;
+}
+
+div.editor-row div.section {
+  margin-right: 20px;
+  vertical-align: top;
+  display: inline-block;
+}
+
+div.editor-option {
+  vertical-align: top;
+  display: inline-block;
+  margin-right: 10px;
+}
+
+div.editor-option label {
+  display: block;
+}

public/less/components/pagination.scss

+.pagination {
+}
+
+.pagination ul {
+  display: inline-block;
+  margin-left: 0;
+  margin-bottom: 0;
+  @include border-radius($baseBorderRadius);
+  @include box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination ul > li {
+  display: inline; // Remove list-style and block-level defaults
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
+  float: left; // Collapse white-space
+  padding: 4px 12px;
+  line-height: $baseLineHeight;
+  text-decoration: none;
+  background-color: $paginationBackground;
+  border: 1px solid $paginationBorder;
+  border-left-width: 0;
+}
+.pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  background-color: $paginationActiveBackground;
+}
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  color: $grayLight;
+  cursor: default;
+}
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
+  color: $grayLight;
+  background-color: transparent;
+  cursor: default;
+}
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
+  border-left-width: 1px;
+  @include border-left-radius($baseBorderRadius);
+}
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+  @include border-right-radius($baseBorderRadius);
+}
+
+
+// Alignment
+// --------------------------------------------------
+
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
+}
+
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-large {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingLarge;
+    font-size: $fontSizeLarge;
+  }
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    @include border-left-radius($borderRadiusLarge);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    @include border-right-radius($borderRadiusLarge);
+  }
+}
+
+// Small and mini
+.pagination-mini,
+.pagination-small {
+  ul > li:first-child > a,
+  ul > li:first-child > span {
+    @include border-left-radius($borderRadiusSmall);
+  }
+  ul > li:last-child > a,
+  ul > li:last-child > span {
+    @include border-right-radius($borderRadiusSmall);
+  }
+}
+
+// Small
+.pagination-small {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingSmall;
+    font-size: $fontSizeSmall;
+  }
+}
+// Mini
+.pagination-mini {
+  ul > li > a,
+  ul > li > span {
+    padding: $paddingMini;
+    font-size: $fontSizeMini;
+  }
+}

public/less/components/panel_dashlist.scss

+.dashlist-item {
+
+}
+
+.dashlist-link {
+  display: block;
+  margin: 5px;
+  padding: 7px;
+  background-color: $grafanaTargetBackground;
+  border: 1px solid $grafanaTargetBorder;
+  .fa {
+    float: right;
+    padding-top: 3px;
+  }
+  .fa-star {
+    color: $orange;
+  }
+
+  &:hover {
+    background-color: $grafanaTargetFuncBackground;
+  }
+}

public/less/components/panel_graph.scss

+.graph-canvas-wrapper {
+  position: relative;
+  cursor: crosshair;
+}
+
+.histogram-chart {
+  position: relative;
+}
+
+.datapoints-warning {
+  pointer: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  margin-top: -50px;
+  margin-left: -100px;
+  width: 200px;
+  text-align: center;
+  cursor: auto;
+  padding: 10px;
+}
+
+.graph-legend {
+  margin: 0 20px;
+  text-align: center;
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.graph-legend-icon {
+  position: relative;
+  padding-right: 4px;
+  top: 1px;
+}
+
+.graph-legend-icon,
+.graph-legend-alias,
+.graph-legend-value {
+  float: left;
+  white-space: nowrap;
+  font-size: 85%;
+  text-align: left;
+  &.current:before {
+    content: "Current: "
+  }
+  &.max:before {
+    content: "Max: "
+  }
+  &.min:before {
+    content: "Min: "
+  }
+  &.total:before {
+    content: "Total: "
+  }
+  &.avg:before {
+    content: "Avg: "
+  }
+}
+
+.graph-legend-icon .fa {
+  font-size: 135%;
+  position: relative;
+  top: 1px;
+}
+
+.graph-legend-series {
+  float: left;
+  white-space: nowrap;
+  padding-left: 10px;
+  padding-top: 6px;
+}
+
+.graph-legend-value {
+  padding-left: 6px;
+}
+
+.graph-legend-table {
+  width: 100%;
+  margin: 0;
+
+  .graph-legend-series {
+    display: table-row;
+    float: none;
+    padding-left: 0;
+    &.pull-right {
+      float: none;
+    }
+  }
+
+  td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value {
+    float: none;
+    display: table-cell;
+    white-space: nowrap;
+    padding: 2px 10px;
+    text-align: right;
+  }
+
+  .graph-legend-icon {
+    width: 5px;
+    padding: 0;
+    top: 0;
+    .fa {
+      top: 4px;
+    }
+  }
+
+ .graph-legend-value  {
+    padding-left: 15px;
+  }
+
+  .graph-legend-alias {
+    padding-left: 7px;
+    text-align: left;
+    width: 95%;
+  }
+
+  .graph-legend-series:nth-child(odd) {
+    background-color: $grafanaListAccent;
+  }
+
+  .graph-legend-value {
+    &.current, &.max, &.min, &.total, &.avg {
+      &:before {
+        content: '';
+      }
+    }
+  }
+
+  th {
+    text-align: right;
+    padding: 0px 10px 1px 0;
+    font-weight: bold;
+    color: $blue;
+    font-size: 85%;
+    white-space: nowrap;
+  }
+}
+
+.graph-legend-rightside {
+
+  &.graph-wrapper {
+    display: table;
+    width: 100%;
+  }
+
+  .graph-canvas-wrapper {
+    display: table-cell;
+    width: 100%;
+    position: relative;
+  }
+
+  .graph-legend-wrapper {
+    display: table-cell;
+    vertical-align: top;
+    position: relative;
+    left: 4px;
+  }
+
+  .graph-legend {
+    margin: 0;
+  }
+
+  .graph-legend-series {
+    display: block;
+    padding-left: 0px;
+  }
+
+  .graph-legend-table .graph-legend-series {
+    display: table-row;
+  }
+}
+
+.graph-legend-series-hidden {
+  a {
+    color: $linkColorDisabled;
+  }
+}
+
+.graph-legend-popover {
+  width: 200px;
+  min-height: 100px;
+  label {
+    display: inline-block;
+  }
+  .btn {
+    padding: 1px 3px;
+    margin-right: 0px;
+    line-height: initial;
+  }
+  .close {
+    margin-right: 5px;
+    color: $linkColor;
+    opacity: 0.7;
+    text-shadow: none;
+  }
+  .editor-row {
+    padding: 5px;
+  }
+}
+
+.annotation-tags {
+  color: $purple;
+}
+
+.graph-series-override {
+  input {
+    float: left;
+    margin-right: 10px;
+  }
+  .graph-series-override-option {
+    float: left;
+    padding: 2px 6px;
+  }
+  .graph-series-override-selector {
+    float: left;
+  }
+}
+
+.graph-tooltip {
+  white-space: nowrap;
+
+  .graph-tooltip-time {
+    text-align: center;
+    font-weight: $fontWeightSemi;
+    position: relative;
+    top: -3px;
+  }
+
+  .tone-down {
+    opacity: 0.7;
+  }
+
+  .label-tag {
+    margin-right: 4px;
+    margin-top: 8px;
+  }
+
+  .graph-tooltip-list-item {
+    display: table-row;
+  }
+
+  .graph-tooltip-series-name {
+    display: table-cell;
+  }
+
+  .graph-tooltip-value {
+    display: table-cell;
+    font-weight: bold;
+    padding-left: 10px;
+    text-align: right;
+  }
+}
+
+.left-yaxis-label {
+  top: 50%;
+  left: -5px;
+  transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform-origin: left top;
+  -o-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -webkit-transform-origin: left top;
+}
+
+.right-yaxis-label {
+  top: 50%;
+  right: -5px;
+
+  -webkit-transform: rotate(90deg);
+  -webkit-transform-origin: right top;
+  -moz-transform: rotate(90deg);
+  -moz-transform-origin: right top;
+  -ms-transform: rotate(90deg);
+  -ms-transform-origin: right top;
+  -o-transform: rotate(90deg);
+  -o-transform-origin: right top;
+  transform: rotate(90deg);
+  transform-origin: right top;
+}
+
+.axisLabel {
+  color: $textColor;
+  font-size: $fontSizeSmall;
+  position: absolute;
+  text-align: center;
+  font-size: 12px;
+}
+
+.graph-legend-fixed-height {
+  overflow-y: scroll;
+}

public/less/components/panel_singlestat.scss

+.singlestat-panel {
+  position: relative;
+  display: table;
+  width: 100%;
+}
+
+.singlestat-panel-value-container {
+  padding: 20px;
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  font-size: 3em;
+  font-weight: bold;
+}
+
+.singlestat-panel-prefix {
+  padding-right: 20px;
+}
+
+.singlestat-panel-table {
+  width: 100%;
+  td {
+    padding: 5px 10px;
+    white-space: nowrap;
+    text-align: right;
+    border-bottom: 1px solid $grafanaListBorderBottom;
+  }
+
+  th {
+    text-align: right;
+    padding: 5px 10px;
+    font-weight: bold;
+    color: $blue
+  }
+
+  td:first-child {
+    text-align: left;
+  }
+
+  tr:nth-child(odd) td {
+    background-color: $grafanaListAccent;
+  }
+
+  tr:last-child td {
+    border: none;
+  }
+}
+
+

public/less/components/panel_table.scss

+.table-panel-wrapper {
+  .panel-content {
+    padding: 0;
+  }
+  .panel-title-container {
+    padding-bottom: 4px;
+  }
+}
+
+.table-panel-scroll {
+  overflow: auto;
+}
+
+.table-panel-container {
+  padding-top: 2.2em;
+  position: relative;
+}
+
+.table-panel-footer {
+  text-align: center;
+  font-size: 90%;
+  line-height: 2px;
+
+  ul {
+    position: relative;
+    display: inline-block;
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+  ul > li {
+    display: inline; // Remove list-style and block-level defaults
+  }
+  ul > li > a {
+    float: left; // Collapse white-space
+    padding: 4px 12px;
+    text-decoration: none;
+    border-left-width: 0;
+
+    &:hover {
+      background-color: $grafanaTargetFuncBackground;
+    }
+
+    &.active {
+      font-weight: bold;
+      color: $blue;
+    }
+  }
+}
+
+.table-panel-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th {
+    padding: 0;
+
+    &:first-child {
+      .table-panel-table-header-inner {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  td {
+    padding: 0.45em 0 0.45em 1.1em;
+    border-bottom: 2px solid $bodyBackground;
+    border-right: 2px solid $bodyBackground;
+
+    &:first-child {
+      padding-left: 15px;
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+}
+
+.table-panel-header-bg {
+  background: $grafanaListAccent;
+  border-top: 2px solid $bodyBackground;
+  border-bottom: 2px solid $bodyBackground;
+  height: 2.0em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.table-panel-table-header-inner {
+  padding: 0.45em 0 0.45em 1.1em;
+  text-align: left;
+  color: $blue;
+  position: absolute;
+  top: 0;
+}
+
+.table-panel-width-hack {
+  visibility: hidden;
+  height: 0px;
+  line-height: 0px;
+}

public/less/components/popovers.scss

+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindexPopover;
+  display: none;
+  max-width: 480px;
+  padding: 1px;
+  text-align: left; // Reset given new insertion method
+  background-color: $popoverBackground;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+  // Overrides for proper insertion
+  white-space: normal;
+
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-top: -10px; }
+  &.right   { margin-left: 10px; }
+  &.bottom  { margin-top: 10px; }
+  &.left    { margin-left: -10px; }
+}
+
+.popover-title {
+  margin: 0; // reset heading margin
+  padding: 8px 14px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: $popoverTitleBackground;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.popover .arrow {
+  border-width: $popoverArrowOuterWidth;
+}
+.popover .arrow:after {
+  border-width: $popoverArrowWidth;
+  content: "";
+}
+
+.popover {
+  &.top .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-bottom-width: 0;
+    border-top-color: #999; // IE8 fallback
+    border-top-color: $popoverArrowOuterColor;
+    bottom: -$popoverArrowOuterWidth;
+    &:after {
+      bottom: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-bottom-width: 0;
+      border-top-color: $popoverArrowColor;
+    }
+  }
+  &.right .arrow {
+    top: 50%;
+    left: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-left-width: 0;
+    border-right-color: #999; // IE8 fallback
+    border-right-color: $popoverArrowOuterColor;
+    &:after {
+      left: 1px;
+      bottom: -$popoverArrowWidth;
+      border-left-width: 0;
+      border-right-color: $popoverArrowColor;
+    }
+  }
+  &.bottom .arrow {
+    left: 50%;
+    margin-left: -$popoverArrowOuterWidth;
+    border-top-width: 0;
+    border-bottom-color: #999; // IE8 fallback
+    border-bottom-color: $popoverArrowOuterColor;
+    top: -$popoverArrowOuterWidth;
+    &:after {
+      top: 1px;
+      margin-left: -$popoverArrowWidth;
+      border-top-width: 0;
+      border-bottom-color: $popoverArrowColor;
+    }
+  }
+
+  &.left .arrow {
+    top: 50%;
+    right: -$popoverArrowOuterWidth;
+    margin-top: -$popoverArrowOuterWidth;
+    border-right-width: 0;
+    border-left-color: #999; // IE8 fallback
+    border-left-color: $popoverArrowOuterColor;
+    &:after {
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: $popoverArrowColor;
+      bottom: -$popoverArrowWidth;
+    }
+  }
+
+}

public/less/components/query_editor.scss

+.query-keyword {
+  font-weight: bold;
+  color: $blue;
+}
+
+.query-segment-key {
+  border-right: none;
+  padding-right: 1px;
+}
+
+.query-segment-operator {
+  padding-right: 1px;
+  border-right: none;
+  color: $orange;
+}
+

public/less/components/scrollbar.scss

+//
+// Srollbars
+//
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar:hover {
+  height: 8px;
+}
+
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment { display: none;  }
+::-webkit-scrollbar-button:horizontal:decrement {  display: none; }
+::-webkit-scrollbar-button:horizontal:increment {  display: none; }
+::-webkit-scrollbar-button:vertical:decrement { display: none; }
+::-webkit-scrollbar-button:vertical:increment { display: none; }
+::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; }
+::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; }
+::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; }
+::-webkit-scrollbar-button:vertical:increment:active {background-image: none; }
+::-webkit-scrollbar-track-piece { background-color: transparent; }
+
+::-webkit-scrollbar-thumb:vertical {
+  height: 50px;
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2));
+  border: 1px solid $scrollbarBorder;
+  border-top: 1px solid $scrollbarBorder;
+  border-left: 1px solid $scrollbarBorder;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  width: 50px;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2));
+  border: 1px solid $scrollbarBorder;
+  border-top: 1px solid $scrollbarBorder;
+  border-left: 1px solid $scrollbarBorder;
+}
+

public/less/components/search.scss

+.search-container {
+  left: 72px;
+  top: 39px;
+  margin: 16px 0 0 2px;
+  z-index: 1000;
+  position: absolute;
+  width: 700px;
+  box-shadow: $searchShadow;
+  padding: 10px;
+  background-color: $grafanaPanelBackground;
+  border: $grafanaPanelBorder;
+
+  .label-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+}
+
+// Search
+.search-field-wrapper {
+  padding-bottom: 10px;
+  input {
+    width: 100%;
+    padding: 8px 8px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  button {
+    margin: 0 4px 0 0;
+  }
+  > span {
+    display: block;
+    overflow: hidden;
+  }
+}
+
+.search-results-container {
+  height: 450px;
+  overflow: auto;
+  display: block;
+  line-height: 28px;
+
+  .search-item:hover, .search-item.selected {
+    background-color: $grafanaListHighlight;
+  }
+
+  .selected {
+    .search-result-tag {
+      opacity: 0.70;
+      color: white;
+    }
+  }
+
+  .fa-star, .fa-star-o {
+    padding-left: 13px;
+  }
+
+  .fa-star {
+    color: $orange;
+  }
+
+  .search-result-link {
+    color: $grafanaListMainLinkColor;
+    .fa {
+      padding-right: 10px;
+    }
+  }
+
+  .search-item {
+    display: block;
+    padding: 3px 10px;
+    white-space: nowrap;
+    background-color: $grafanaListBackground;
+    margin-bottom: 4px;
+    .search-result-icon:before {
+      content: "\f009";
+    }
+
+    &.search-item-dash-home .search-result-icon:before {
+      content: "\f015";
+    }
+  }
+
+  .search-result-tags {
+    float: right;
+  }
+
+  .search-result-actions {
+    float: right;
+    padding-left: 20px;
+  }
+}
+
+.search-switches {
+  position: absolute;
+  top: 19px;
+  right: 21px;
+}
+
+.search-button-row {
+  padding-top: 20px;
+  button, a {
+    margin-right: 10px;
+  }
+}
+

public/less/components/shortcuts.scss

+.shortcut-table {
+  td { padding: 3px; }
+  th:last-child { text-align: left; }
+  td:first-child { text-align: right; }
+}
+

public/less/components/sidemenu.scss

+$sideMenuWidth:  220px;
+
+.sidemenu-canvas {
+  position: relative;
+}
+
+.sidemenu-wrapper {
+  position: absolute;
+  top: 52px;
+  left: 0;
+  width: $sideMenuWidth;
+  background-color: $bodyBackground;
+  z-index: 101;
+  transform: translate3d(0, -100%, 0);
+  visibility: hidden;
+
+  a:focus {
+    text-decoration: none;
+  }
+}
+
+.sidemenu-open {
+  .sidemenu-wrapper {
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    transition: all 0.2s;
+  }
+}
+
+.sidemenu-pinned {
+  .sidemenu-wrapper {
+    min-height: 100%;
+  }
+  .dashboard-container {
+    padding-left: $sideMenuWidth;
+  }
+  .page-container {
+    margin-left: 195px;
+    padding-left: 77px;
+  }
+  .top-nav-menu-btn {
+    a {
+      background-color: $pageBackground;
+      padding-right: 67px;
+      padding-left: 22px;
+    }
+    .icon-gf-grafana_wordmark  {
+      display: inline-block;
+    }
+    .fa {
+      display: none;
+    }
+  }
+  .sidemenu-org {
+    box-shadow: none;
+  }
+  .search-container {
+    left: auto;
+  }
+}
+
+.sidemenu {
+  font-weight: $baseFontWeight;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    position: relative;
+
+    &:hover {
+      .dropdown-menu {
+        display: block;
+        top: 0px;
+        left: $sideMenuWidth;
+        background-color: $bodyBackground;
+      }
+    }
+  }
+}
+
+.sidemenu-main-link {
+  font-size: 16px;
+}
+
+.sidemenu-item-text {
+  width: 110px;
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-circle {
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+  i {
+    color: $linkColor;
+    opacity: .7;
+    position: relative;
+    left: 7px;
+    top: 5px;
+    font-size: 150%;
+  }
+  img {
+    left: 7px;
+    position: relative;
+  }
+}
+
+.sidemenu-item {
+  color: $linkColor;
+  line-height: 47px;
+  padding: 0px 10px 0px 10px;
+  display: block;
+
+  &:hover {
+    background-color: $sideMenuBackgroundHighlight;
+  }
+
+  .sidemenu-item-text {
+    padding-left: 11px;
+  }
+
+  img {
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
+  }
+}
+
+.sidemenu-section-tagline {
+  font-style: italic;
+  line-height: 10px;
+}
+
+.sidemenu-section-text-wrapper {
+  padding-top: 4px;
+}
+
+.sidemenu-org-section .dropdown-menu-title {
+  margin: 0 10px 0 6px;
+  padding: 7px 0 7px;
+  overflow: hidden;
+  color: $dropdownTitle;
+}
+
+.sidemenu-org-section .dropdown-menu-title > span {
+  display: inline-block;
+  position: relative;
+
+  &:after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 100%;
+    width: 200px;
+    height: 1px;
+    margin-left: 5px;
+    background: $dropdownDivider;
+    content: '';
+  }
+}
+
+.sidemenu-org {
+  padding: 17px 10px 15px 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  &:hover {
+    background-color: $sideMenuBackgroundHighlight;
+  }
+  display: table;
+  position: relative;
+  width: 100%;
+}
+
+.sidemenu .fa-caret-right {
+  position: absolute;
+  top: 38%;
+  right: 25px;
+  font-size: 14px;
+  color: $linkColor;
+}
+
+.sidemenu-org-avatar,
+.sidemenu-org-details {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.sidemenu-org-avatar {
+  width: 44px;
+}
+
+.sidemenu-org-avatar > img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.sidemenu-org-details {
+  padding-left: 10px;
+  color: $linkColor;
+}
+
+.sidemenu-org-name {
+  display: block;
+  font-size: 13px;
+  color: $linkColorDisabled;
+}
+
+.sidemenu-org-user {
+  display: block;
+}
+

public/less/components/submenu.scss

+.submenu-controls {
+  margin: 10px 5px;
+  font-size: 16px;
+}
+
+.annotation-disabled, .annotation-disabled a {
+  color: $linkColorDisabled;
+}
+
+.annotation-segment {
+  label.cr1 {
+    margin-left: 5px;
+  }
+  padding: 8px 7px;
+}
+
+.submenu-item {
+  margin-right: 20px;
+  display: inline-block;
+  border-radius: 3px;
+  background-color: $grafanaPanelBackground;
+  border: $grafanaPanelBorder;
+  margin-right: 10px;
+  display: inline-block;
+
+  .fa-caret-down {
+    font-size: 75%;
+    position: relative;
+    top: 1px;
+  }
+}
+
+.variable-value-link {
+  font-size: 16px;
+  padding-right: 10px;
+  .label-tag {
+    margin: 0 5px;
+  }
+}
+
+.variable-link-wrapper  {
+  display: inline-block;
+  position: relative;
+}
+
+.variable-value-dropdown {
+  position: absolute;
+  top: 47px;
+  min-width: 150px;
+  max-height: 400px;
+  min-height: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: $dropdownBackground;
+  box-shadow: 0 0 25px 0 rgba(0,0,0,0.4);
+  z-index: 1000;
+  font-size: $baseFontSize;
+  border-radius: 3px 3px 0 0;
+  border: 1px solid $grafanaTargetFuncBackground;
+
+  &.multi {
+   .selected {
+     .variable-option-icon{
+       background: url($checkboxImageUrl) 0px -18px no-repeat;
+     }
+   }
+ }
+
+ &.single {
+   .variable-option-icon {
+     display: none;
+   }
+   .selected {
+     background-color: $grafanaTargetFuncHightlight;
+   }
+ }
+}
+
+.variable-options-wrapper {
+  display: table;
+  width: 100%;
+}
+
+.variable-options-column {
+  max-height: 350px;
+  display: table-cell;
+  line-height: 26px;
+  &:nth-child(2) {
+    border-left: 1px solid $grafanaTargetFuncBackground;
+  }
+}
+
+.variable-option-tag,
+.variable-option,
+.variable-options-column-header {
+  display: block;
+  padding: 2px 27px 0 8px;
+  position: relative;
+  white-space: nowrap;
+  min-width: 115px;
+}
+
+.variable-options-column-header {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  &.many-selected {
+    .variable-option-icon {
+      background: url($checkboxImageUrl) 0px -36px no-repeat;
+    }
+  }
+}
+
+.variable-option-icon {
+  display: inline-block;
+  width: 24px;
+  height: 18px;
+  position: relative;
+  top: 4px;
+  background: url($checkboxImageUrl) left top no-repeat;
+}
+
+.variable-option {
+  &:hover, &.highlighted {
+    background-color: $blueDark;
+  }
+}
+
+.dash-nav-link {
+  padding: 8px 7px;
+  display: inline-block;
+  color: $textColor;
+}

public/less/components/tables_lists.scss

+.grafana-options-table {
+  width: 100%;
+
+  th {
+    text-align: left;
+    padding: 5px 10px;
+    border-bottom: 4px solid $grafanaPanelBackground;
+  }
+
+  tr td {
+    background-color: $grafanaListBackground;
+    padding: 5px 10px;
+    white-space: nowrap;
+    border-bottom: 4px solid $grafanaPanelBackground;
+    &.nobg {
+      background-color: transparent;
+    }
+  }
+
+  .max-width-btns {
+    padding-right: 0px;
+    .btn {
+      box-sizing: border-box;
+      width: 100%;
+    }
+  }
+}
+
+.max-width {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.grafana-list-item {
+  display: block;
+  padding: 1px 10px;
+  line-height: 34px;
+  background-color: $grafanaTargetBackground;
+  margin-bottom: 4px;
+  cursor: pointer;
+}

public/less/components/tabs.scss

+
+.nav-tabs-alt {
+  border-bottom: $grafanaTriggerBorder;
+  padding-left: 10px;
+  margin: 0 0 10px 0;
+
+	& > li > a {
+	  color: darken($linkColor, 20%);
+	}
+
+	li > a:hover {
+    border-bottom: none;
+	}
+
+	li.active > a,
+	li.active > a:focus,
+	li.active > a:hover {
+    @include border-radius(3px);
+	  border: $grafanaTriggerBorder;
+	  background-color: transparent;
+	  border-bottom: 1px solid $grafanaPanelBackground;
+	  color: $linkColor;
+	}
+
+	li.disabled > a {
+		color: $textColor;
+	}
+
+	.open .dropdown-toggle {
+		background-color: #060606;
+		border-color: transparent;
+	}
+
+  .tab-content {
+    padding: 10px;
+    background-color: $grafanaPanelBackground;
+  }
+}
+
+

public/less/components/tags.scss

+// Base classes
+.label,
+.badge {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: $baseFontSize * .846;
+  font-weight: bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: $white;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: $grayLight;
+}
+
+
+// Labels & Badges
+.label-tag {
+  background-color: $purple;
+  color: darken($white, 5%);
+  white-space: nowrap;
+  border-radius: 3px;
+  text-shadow: none;
+  font-size: 13px;
+  padding: 2px 6px;
+  border-width: 1px;
+  border-style: solid;
+  .icon-tag {
+    position: relative;
+    top: 1px;
+    padding-right: 4px;
+  }
+}
+
+.label-tag:hover {
+  opacity: 0.85;
+  background-color: darken($purple, 10%);
+}
+

public/less/components/tagsinput.scss

+.bootstrap-tagsinput {
+  display: inline-block;
+  padding: 0 0 0 6px;
+  vertical-align: middle;
+  max-width: 100%;
+  line-height: 22px;
+  background-color: $inputBackground;
+
+  input {
+    border: none;
+    border-right: 1px solid $grafanaTargetSegmentBorder;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 6px;
+    height: 100%;
+    width: 5rem;
+    box-sizing: border-box;
+  }
+
+  .tag {
+    margin-right: 2px;
+    color: white;
+
+    [data-role="remove"] {
+      margin-left:8px;
+      cursor:pointer;
+      &:after{
+        content: "x";
+        padding:0px 2px;
+      }
+      &:hover {
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+        &:active {
+          box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
+        }
+      }
+    }
+  }
+}

public/less/components/tightform.scss

+.tight-form {
+  border-top: 1px solid $grafanaTargetBorder;
+  border-left: 1px solid $grafanaTargetBorder;
+  border-right: 1px solid $grafanaTargetBorder;
+  background: $grafanaTargetBackground;
+
+  &.last {
+    border-bottom: 1px solid $grafanaTargetBorder;
+  }
+
+  &.borderless {
+    background: transparent;
+    border: none;
+  }
+
+  .checkbox-label {
+    display: inline;
+    padding-right: 4px;
+    margin-bottom: 0;
+  }
+}
+
+.tight-form-container-no-item-borders {
+  border: 1px solid $grafanaTargetBorder;
+  border-bottom: none;
+
+  .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input  {
+    border: none;
+  }
+}
+
+
+.spaced-form {
+  .tight-form {
+    margin: 7px 0;
+  }
+}
+
+.borderless {
+  .tight-form-item,
+  .tight-form-input {
+    border: none;
+  }
+}
+
+.tight-form-container {
+  border-bottom: 1px solid $grafanaTargetBorder;
+}
+
+.tight-form-btn {
+  padding: 7px 12px;
+}
+
+.tight-form-list {
+  list-style: none;
+  margin: 0;
+  >li {
+    float: left;
+  }
+}
+
+.tight-form-flex-wrapper {
+  display: flex;
+  flex-direction: row;
+  float: none !important;
+}
+
+.grafana-metric-options {
+  margin-top: 25px;
+}
+
+.tight-form-item {
+  padding: 8px 7px;
+  display: inline-block;
+  font-weight: normal;
+  border-right: 1px solid $grafanaTargetSegmentBorder;
+  color: $grafanaTargetColor;
+  display: inline-block;
+
+  .has-open-function & {
+    padding-top: 25px;
+  }
+
+  .tight-form-disabled & {
+    color: $grafanaTargetColorHide;
+  }
+
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &a:hover {
+    background: $grafanaTargetFuncBackground;
+  }
+
+  &.last {
+    border-right: none;
+  }
+}
+
+
+.tight-form-item-icon {
+  i {
+    width: 15px;
+    text-align: center;
+    display: inline-block;
+  }
+}
+
+.tight-form-func {
+  background: $grafanaTargetFuncBackground;
+  > a {
+    color: $grafanaTargetColor;
+  }
+  > a:hover {
+    color: $linkColor;
+  }
+
+  &.show-function-controls {
+    padding-top: 5px;
+    min-width: 100px;
+    text-align: center;
+  }
+}
+
+input[type=text].tight-form-func-param {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+input[type=text].tight-form-clear-input {
+  padding: 8px 7px;
+  border: none;
+  margin: 0px;
+  background: transparent;
+  color: $grafanaTargetColor;
+  border-radius: 0;
+  border-right: 1px solid $grafanaTargetSegmentBorder;
+}
+
+[type=text],
+[type=email],
+[type=number],
+[type=password] {
+  &.tight-form-input {
+    border: none;
+    border-right: 1px solid $grafanaTargetSegmentBorder;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 6px;
+    height: 100%;
+    box-sizing: border-box;
+    &.last {
+      border-right: none;
+    }
+  }
+}
+
+input[type=checkbox].tight-form-checkbox {
+  margin: 0;
+}
+
+.tight-form-textarea {
+  height: 200px;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+select.tight-form-input {
+  border: none;
+  border-right: 1px solid $grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  height: 36px;
+  padding: 9px 3px;
+  &.last {
+    border-right: none;
+  }
+}
+
+.tight-form-func-controls {
+  display: none;
+  text-align: center;
+
+  .fa-arrow-left {
+    float: left;
+    position: relative;
+    top: 2px;
+  }
+  .fa-arrow-right {
+    float: right;
+    position: relative;
+    top: 2px;
+  }
+  .fa-remove {
+    margin-left: 10px;
+  }
+}
+
+.tight-form-radio {
+  input[type=radio] {
+    margin: 0;
+  }
+  label {
+    display: inline;
+  }
+}
+
+.tight-form-section {
+  margin-bottom: 20px;
+  margin-right: 40px;
+  vertical-align: top;
+  display: inline-block;
+  .tight-form {
+    margin-left: 20px;
+  }
+}
+
+.tight-form-align {
+  padding-left: 66px;
+}
+
+.tight-form-item-large { width: 115px; }
+.tight-form-item-xlarge { width: 150px; }
+.tight-form-item-xxlarge { width: 200px; }
+
+.tight-form-input.tight-form-item-xxlarge {
+  width: 215px;
+}
+
+.tight-form-inner-box {
+  margin: 20px 0 20px 148px;
+  display: inline-block;
+}