Commit f8e233e4 by Torkel Ödegaard

commit(): saas changs

parent c961d621
......@@ -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",
......
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;
}
//
// 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;
}
}
@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";
}
//
// 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;
}
}
/*! 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;
}
......@@ -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
// ----
......
//
// 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;
}
//
// 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;
}
//
// 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;
}
}
//
// 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;
}
}
//
// 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
}
//
// 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; }
}
/*!
* 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";
//
// 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;
}
//
// 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;
}
.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;
}
.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;
}
}
//
// 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);
}
// ==========================================================================
// 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;
}
// ==========================================================================
// 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;
}
}
// ==========================================================================
// 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;
}
.grafana-version-info {
position: absolute;
bottom: 2px;
left: 3px;
font-size: 80%;
color: darken($gray, 25%);
a { color: darken($gray, 25%); }
}
.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; }
.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;
}
}
.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;
}
}
//
// 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;
}
}
.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;
}
//
// 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;
}
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;
}
.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;
}
}
.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;
}
}
.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;
}
.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;
}
}
.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;
}
//
// 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;
}
}
}
.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;
}
//
// 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;
}
.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;
}
}
.shortcut-table {
td { padding: 3px; }
th:last-child { text-align: left; }
td:first-child { text-align: right; }
}
$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;
}
.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;
}
.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;
}
.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;
}
}
// 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%);
}
.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);
}
}
}
}
}
.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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment