commit(): saas changs
This commit is contained in:
Torkel Ödegaard
+2
-1
@@ -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",
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
@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";
|
||||
}
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
Vendored
+425
@@ -0,0 +1,425 @@
|
||||
/*! 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
|
||||
// ----
|
||||
|
||||
@@ -0,0 +1,257 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// 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
|
||||
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
//
|
||||
// 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; }
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*!
|
||||
* 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";
|
||||
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
//
|
||||
// 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);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// ==========================================================================
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
// ==========================================================================
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// ==========================================================================
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.grafana-version-info {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 3px;
|
||||
font-size: 80%;
|
||||
color: darken($gray, 25%);
|
||||
a { color: darken($gray, 25%); }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
.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; }
|
||||
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
.shortcut-table {
|
||||
td { padding: 3px; }
|
||||
th:last-child { text-align: left; }
|
||||
td:first-child { text-align: right; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
$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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
// 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%);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
.nav.gf-timepicker-nav {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.timepicker-timestring {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.gf-timepicker-nav-btn {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gf-timepicker-dropdown {
|
||||
margin: -5px -10px 10px 5px;
|
||||
padding: 10px 20px;
|
||||
float: right;
|
||||
background-color: $grafanaPanelBackground;
|
||||
@include box-shadow($navbarDropdownShadow);
|
||||
}
|
||||
|
||||
.gf-timepicker-absolute-section {
|
||||
width: 300px;
|
||||
float: left;
|
||||
border-right: $grafanaTriggerBorder;
|
||||
padding: 0 0 0 20px;
|
||||
select {
|
||||
width: 183px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-timepicker-btn-apply {
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.gf-timepicker-utc {
|
||||
background-color: $grafanaTargetFuncBackground;
|
||||
color: $orange;
|
||||
font-size: 75%;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.gf-timepicker-relative-section {
|
||||
padding: 0 20px 0 30px;
|
||||
min-height: 258px;
|
||||
float: left;
|
||||
ul {
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin: 0 30px 10px 0px;
|
||||
li {
|
||||
line-height: 22px;
|
||||
}
|
||||
li.active {
|
||||
border-bottom: 1px solid $blue;
|
||||
margin: 3px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-timepicker-component {
|
||||
margin-bottom: 10px;
|
||||
button.btn-sm {
|
||||
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
|
||||
background-image: none;
|
||||
border: none;
|
||||
padding: 6px 9px;
|
||||
color: $textColor;
|
||||
&.active span {
|
||||
color: $blue;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text-info {
|
||||
color: $orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faMixin {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.glyphicon-chevron-right:before {
|
||||
@include faMixin;
|
||||
content: "\f054";
|
||||
}
|
||||
|
||||
.glyphicon-chevron-left:before {
|
||||
@include faMixin;
|
||||
content: "\f053";
|
||||
}
|
||||
|
||||
.input-datetime-format {
|
||||
color: $linkColorDisabled
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
//
|
||||
// Tooltips
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base class
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: $zindexTooltip;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
@include opacity(0);
|
||||
&.in { .opacity(100); }
|
||||
&.top { margin-top: -3px; padding: 5px 0; }
|
||||
&.right { margin-left: 3px; padding: 0 5px; }
|
||||
&.bottom { margin-top: 3px; padding: 5px 0; }
|
||||
&.left { margin-left: -3px; padding: 0 5px; }
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: 400px;
|
||||
padding: 8px;
|
||||
color: $tooltipColor;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: $tooltipBackground;
|
||||
@include border-radius($baseBorderRadius);
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.tooltip {
|
||||
&.top .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltipArrowWidth;
|
||||
border-width: $tooltipArrowWidth $tooltipArrowWidth 0;
|
||||
border-top-color: $tooltipArrowColor;
|
||||
}
|
||||
&.right .tooltip-arrow {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$tooltipArrowWidth;
|
||||
border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0;
|
||||
border-right-color: $tooltipArrowColor;
|
||||
}
|
||||
&.left .tooltip-arrow {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -$tooltipArrowWidth;
|
||||
border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth;
|
||||
border-left-color: $tooltipArrowColor;
|
||||
}
|
||||
&.bottom .tooltip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltipArrowWidth;
|
||||
border-width: 0 $tooltipArrowWidth $tooltipArrowWidth;
|
||||
border-bottom-color: $tooltipArrowColor;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-tooltip {
|
||||
position : absolute;
|
||||
top: -1000;
|
||||
left: 0;
|
||||
color: $tooltipColor;
|
||||
padding: 10px;
|
||||
font-size: 11pt;
|
||||
font-weight : 200;
|
||||
background-color: $tooltipBackground;
|
||||
border-radius: 5px;
|
||||
z-index: 9999;
|
||||
max-width: 800px;
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
line-height: 14px;
|
||||
a {
|
||||
color: $tooltipLinkColor;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-tooltip hr {
|
||||
padding: 2px;
|
||||
color: #c8c8c8;
|
||||
margin: 0px;
|
||||
border-bottom: 0px solid #c8c8c8;
|
||||
}
|
||||
|
||||
.grafana-tip {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
// typeahead max height
|
||||
.typeahead {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.typeahead strong {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
@import "variables.dark.scss";
|
||||
@import "bootstrap/responsive.scss";
|
||||
|
||||
$gridColumnWidth: 70px;
|
||||
$gridGutterWidth: 10px;
|
||||
|
||||
$gridColumnWidth768: 52px;
|
||||
$gridGutterWidth768: 10px;
|
||||
|
||||
$gridColumnWidth1200: 90px;
|
||||
$gridGutterWidth1200: 10px;
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
|
||||
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
|
||||
|
||||
// 1200px min
|
||||
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
|
||||
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
|
||||
|
||||
// 768px-979px
|
||||
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
|
||||
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
|
||||
|
||||
$screen-xs: 320px;
|
||||
$screen-sm: 768px;
|
||||
$screen-md: 992px;
|
||||
$screen-lg: 1200px;
|
||||
|
||||
$screen-xs-max: ($screen-sm - 1);
|
||||
$screen-sm-max: ($screen-md - 1);
|
||||
$screen-md-max: ($screen-lg - 1);
|
||||
|
||||
$breakpoint-xs-up: "only screen and (min-width: #{$screen-xs})";
|
||||
$breakpoint-xs: "only screen and (min-width: #{$screen-xs}) and (max-width: #{$screen-xs-max})";
|
||||
$breakpoint-sm-up: "only screen and (min-width: #{$screen-sm})";
|
||||
$breakpoint-sm: "only screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max})";
|
||||
$breakpoint-md-up: "only screen and (min-width: #{$screen-md})";
|
||||
$breakpoint-md: "only screen and (min-width: #{$screen-md}) and (max-width: #{$screen-md-max})";
|
||||
$breakpoint-lg: "only screen and (min-width: #{$screen-lg})";
|
||||
|
||||
.dashnav-back-to-dashboard {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
// ---------------------
|
||||
@media $breakpoint-xs {
|
||||
div.panel {
|
||||
width: 100% !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.panel-margin {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: 200px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: 120px;
|
||||
}
|
||||
.dashnav-zoom-out,
|
||||
.dashnav-action-icons {
|
||||
display: none;
|
||||
}
|
||||
.page-container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// form styles
|
||||
@media $breakpoint-sm-up {
|
||||
.gf-size-m { width: 120px; }
|
||||
.gf-size-l { width: 150px; }
|
||||
.gf-size-xl { width: 200px; }
|
||||
.gf-size-xxl { width: 300px; }
|
||||
.gf-size-xxxl { width: 400px; }
|
||||
}
|
||||
|
||||
@media $breakpoint-sm-up {
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: 200px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: 120px;
|
||||
}
|
||||
.panel-in-fullscreen {
|
||||
.dashnav-action-icons {
|
||||
display: none;
|
||||
}
|
||||
.dashnav-back-to-dashboard {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media $breakpoint-md-up {
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: 290px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: 250px;
|
||||
}
|
||||
.dashnav-zoom-out {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media $breakpoint-lg {
|
||||
.panel-in-fullscreen {
|
||||
.dashnav-action-icons {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: none;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "variables.dark.scss";
|
||||
@import "grafana.scss";
|
||||
@@ -17,7 +17,7 @@
|
||||
@import "./mixins/buttons.less";
|
||||
|
||||
// LAYOUTS
|
||||
@import "./bootstrap/grid.less";
|
||||
// @import "./bootstrap/grid.less";
|
||||
@import "./layout/page.less";
|
||||
|
||||
// COMPONENTS
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "variables.light.scss";
|
||||
@import "grafana.scss";
|
||||
@@ -0,0 +1,69 @@
|
||||
|
||||
// BASE
|
||||
@import "./base/normalize.scss";
|
||||
@import "./base/base.scss";
|
||||
@import "./base/type.scss";
|
||||
@import "./base/forms.scss";
|
||||
@import "./base/fonts.scss";
|
||||
@import "./base/code.scss";
|
||||
|
||||
// UTILS
|
||||
@import "./utils/utils.scss";
|
||||
@import "./utils/validation.scss";
|
||||
@import "./utils/angular.scss";
|
||||
|
||||
// MIXINS
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./mixins/buttons.scss";
|
||||
|
||||
// LAYOUTS
|
||||
// @import "./bootstrap/grid.scss";
|
||||
@import "./layout/page.scss";
|
||||
|
||||
// COMPONENTS
|
||||
@import "./components/panel_graph.scss";
|
||||
@import "./components/submenu.scss";
|
||||
@import "./components/panel_dashlist.scss";
|
||||
@import "./components/panel_singlestat.scss";
|
||||
@import "./components/panel_table.scss";
|
||||
@import "./components/tagsinput.scss";
|
||||
@import "./components/tables_lists.scss";
|
||||
@import "./components/search.scss";
|
||||
@import "./components/dashboard.scss";
|
||||
@import "./components/tightform.scss";
|
||||
@import "./components/gf-form.scss";
|
||||
@import "./components/sidemenu.scss";
|
||||
@import "./components/navbar.scss";
|
||||
@import "./components/gfbox.scss";
|
||||
@import "./components/pagination.scss";
|
||||
@import "./components/tabs.scss";
|
||||
@import "./components/timepicker.scss";
|
||||
@import "./components/filter-controls.scss";
|
||||
@import "./components/filter-list.scss";
|
||||
@import "./components/filter-table.scss";
|
||||
@import "./components/scrollbar.scss";
|
||||
@import "./components/old_stuff.scss";
|
||||
@import "./components/navbar.scss";
|
||||
@import "./components/popovers.scss";
|
||||
@import "./components/alerts.scss";
|
||||
@import "./components/typeahead.scss";
|
||||
@import "./components/tags.scss";
|
||||
@import "./components/modals.scss";
|
||||
@import "./components/dropdown.scss";
|
||||
@import "./components/color_picker.scss";
|
||||
@import "./components/tooltip.scss";
|
||||
@import "./components/buttons.scss";
|
||||
@import "./components/footer.scss";
|
||||
@import "./components/infobox.scss";
|
||||
@import "./components/shortcuts.scss";
|
||||
@import "./components/query_editor.scss";
|
||||
@import "./components/navs.scss";
|
||||
|
||||
// PAGES
|
||||
@import "./pages/login.scss";
|
||||
@import "./pages/playlist.scss";
|
||||
@import "./pages/admin.scss";
|
||||
@import "./pages/alerting.scss";
|
||||
@import "./pages/apps.scss";
|
||||
@import "./pages/signup.scss";
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
.grafana-app {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
padding: 5px 5px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-view {
|
||||
// background-image: url(/img/grafana_pattern.png);
|
||||
// background-position: 100% -550px;
|
||||
// background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-dashboard {
|
||||
.main-view {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: $pageBackground;
|
||||
position: relative;
|
||||
padding: 25px 56px 10px 56px;
|
||||
max-width: 1060px;
|
||||
margin-left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.page-header {
|
||||
padding: 10px 0 39px 0px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
||||
display: -ms-flexbox; /* TWEENER - IE 10 */
|
||||
display: -webkit-flex; /* NEW - Chrome */
|
||||
flex-wrap: wrap-reverse;
|
||||
background: transparent url(../img/page_header_line.png) no-repeat left 60px;
|
||||
h1 {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-page {
|
||||
max-width: 800px;
|
||||
margin-left: 10px;
|
||||
.gf-box {
|
||||
margin-top: 0;
|
||||
}
|
||||
.gf-box-body {
|
||||
min-height: 0;
|
||||
}
|
||||
h2 {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0px;
|
||||
font-size: $fontSizeLarge;
|
||||
color: $textColor;
|
||||
i {
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||
@include gradientBar($startColor, $endColor, $textColor, $textShadow);
|
||||
|
||||
box-shadow: inset 0 -4px rgba(0,0,0,0.3);
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
||||
color: $textColor;
|
||||
background-image: none;
|
||||
background-color: darken($endColor, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
|
||||
@mixin clearfix() {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
// WebKit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
// ----------------------------------
|
||||
@mixin center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
// -------------------------
|
||||
@mixin size($height, $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
// -------------------------
|
||||
@mixin placeholder($color: $placeholderText) {
|
||||
&:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
// -------------------------
|
||||
// Requires inline-block or block for proper styling
|
||||
@mixin text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
// -------------------------
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
.hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
// FONTS
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-family-serif() {
|
||||
font-family: $serifFontFamily;
|
||||
}
|
||||
|
||||
@mixin font-family-sans-serif() {
|
||||
font-family: $sansFontFamily;
|
||||
}
|
||||
|
||||
@mixin font-family-monospace() {
|
||||
font-family: $monoFontFamily;
|
||||
}
|
||||
|
||||
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
|
||||
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@include font-family-serif();
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
|
||||
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@include font-family-sans-serif();
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
|
||||
@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@include font-family-monospace;
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
|
||||
|
||||
// FORMS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Block level inputs
|
||||
.input-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
}
|
||||
|
||||
|
||||
// CSS3 PROPERTIES
|
||||
// --------------------------------------------------
|
||||
|
||||
// Border Radius
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// Single Corner Border Radius
|
||||
@mixin border-top-left-radius($radius) {
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@mixin border-top-right-radius($radius) {
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-moz-border-radius-topright: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
// Single Side Border Radius
|
||||
@mixin border-top-radius($radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-top-left-radius($radius);
|
||||
}
|
||||
@mixin border-right-radius($radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius);
|
||||
}
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@include border-bottom-right-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
@mixin border-left-radius($radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
@mixin box-shadow($shadow) {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
@mixin transition($transition) {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
@mixin transition-delay($transition-delay) {
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
|
||||
@mixin transition-duration($transition-duration) {
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
@mixin rotate($degrees) {
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
|
||||
@mixin scale($ratio) {
|
||||
transform: scale($ratio);
|
||||
}
|
||||
|
||||
@mixin translate($x, $y) {
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
@mixin skew($x, $y) {
|
||||
transform: skew($x, $y);
|
||||
-webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
|
||||
}
|
||||
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin backface-visibility($visibility) {
|
||||
backface-visibility: $visibility;
|
||||
}
|
||||
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
||||
@mixin background-clip($clip) {
|
||||
background-clip: $clip;
|
||||
}
|
||||
|
||||
// Background sizing
|
||||
@mixin background-size($size) {
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
@mixin user-select($select) {
|
||||
user-select: $select;
|
||||
}
|
||||
|
||||
// Resize anything
|
||||
@mixin resizable($direction) {
|
||||
resize: $direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Safari fix
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
|
||||
-webkit-column-count: $columnCount;
|
||||
-moz-column-count: $columnCount;
|
||||
column-count: $columnCount;
|
||||
-webkit-column-gap: $columnGap;
|
||||
-moz-column-gap: $columnGap;
|
||||
column-gap: $columnGap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
@mixin hyphens($mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: $mode;
|
||||
-moz-hyphens: $mode;
|
||||
-ms-hyphens: $mode;
|
||||
-o-hyphens: $mode;
|
||||
hyphens: $mode;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity / 100;
|
||||
}
|
||||
|
||||
// BACKGROUNDS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
||||
#translucent {
|
||||
@mixin background($color: $white, $alpha: 1) {
|
||||
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
}
|
||||
@mixin border($color: $white, $alpha: 1) {
|
||||
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
@include background-clip(padding-box);
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient Bar Colors for buttons and alerts
|
||||
@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
color: $textColor;
|
||||
text-shadow: $textShadow;
|
||||
@include gradient-vertical($primaryColor, $secondaryColor);
|
||||
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
}
|
||||
|
||||
// Gradients
|
||||
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
||||
background-color: $endColor;
|
||||
background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
||||
background-color: mix($startColor, $endColor, 60%);
|
||||
background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
||||
background-color: $endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
|
||||
}
|
||||
|
||||
@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
||||
background-color: mix($midColor, $endColor, 80%);
|
||||
background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
||||
background-color: mix($midColor, $endColor, 80%);
|
||||
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
||||
background-color: $outerColor;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
||||
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@mixin striped($color: #555, $angle: 45deg) {
|
||||
background-color: $color;
|
||||
background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
.admin-settings-section {
|
||||
color: $variable;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td.admin-settings-key {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
.copy-query {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert-state {
|
||||
display: inline-block;
|
||||
padding-left: 30px;
|
||||
background: 0 50% no-repeat;
|
||||
background-size: 20px auto;
|
||||
}
|
||||
|
||||
.alert-state-online {
|
||||
background-image: url('/img/online.svg');
|
||||
}
|
||||
|
||||
.alert-state-warning {
|
||||
background-image: url('/img/warn-tiny.svg');
|
||||
}
|
||||
|
||||
.alert-state-critical {
|
||||
background-image: url('/img/critical.svg');
|
||||
}
|
||||
|
||||
.alert-notify-emails {
|
||||
width: 400px;
|
||||
border-right: 1px solid $black;
|
||||
}
|
||||
|
||||
.alert-notify-emails .bootstrap-tagsinput {
|
||||
width: 394px; // offset for 8px left padding and border width
|
||||
}
|
||||
|
||||
.alert-notify-emails .bootstrap-tagsinput input {
|
||||
border: 0;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
.app-edit-logo-box {
|
||||
padding: 1.2rem;
|
||||
background: $grafanaPanelBackground;
|
||||
text-align: center;
|
||||
img {
|
||||
max-width: 7rem;
|
||||
}
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.app-edit-links {
|
||||
list-style: none;
|
||||
margin: 0 0 0 2rem;
|
||||
|
||||
li {
|
||||
background: $grafanaPanelBackground;
|
||||
margin-top: 4px;
|
||||
padding: 0.2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.app-edit-description {
|
||||
font-style: italic;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
|
||||
.login-form {
|
||||
width: 50%;
|
||||
float: left;
|
||||
margin-left: 25%;
|
||||
margin-right: 25%;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 700px;
|
||||
margin: 70px auto 0 auto;
|
||||
}
|
||||
|
||||
.login-box-logo {
|
||||
text-align: center;
|
||||
img {
|
||||
width: 125px;
|
||||
}
|
||||
.icon-gf-grafana_wordmark {
|
||||
color: $linkColor;
|
||||
position: relative;
|
||||
top: -90px;
|
||||
font-size: 3rem;
|
||||
text-shadow: 3px 3px 5px black;
|
||||
}
|
||||
}
|
||||
|
||||
.login-inner-box {
|
||||
background: $grafanaPanelBackground;
|
||||
}
|
||||
|
||||
.login-tab-header {
|
||||
background: $grafanaTargetBackground;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-login-tab {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
padding: 10px 10px;
|
||||
|
||||
&.active {
|
||||
background: darken($grafanaTargetBackground, 5%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 170px;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
.password-strength {
|
||||
display: block;
|
||||
width: 15%;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
padding-top: 3px;
|
||||
color: darken($textColor, 20%);
|
||||
border-top: 3px solid $red;
|
||||
&.password-strength-ok {
|
||||
width: 40%;
|
||||
border-top: 3px solid lighten($yellow, 10%);
|
||||
}
|
||||
&.password-strength-good {
|
||||
width: 100%;
|
||||
border-top: 3px solid lighten($green, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.login-submit-button-row {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
button {
|
||||
padding: 14px 23px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
min-width: 150px;
|
||||
display: inline-block;
|
||||
border: 1px solid lighten($btnInverseBackground, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.login-oauth {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.btn {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background: #dd4b39;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
background: #555;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.password-recovery {
|
||||
background: $grafanaTargetBackground;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
a {
|
||||
color: $grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin: 5px 25% 25px 25%;
|
||||
|
||||
.login-divider-line {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-bottom: 1px solid $gray;
|
||||
|
||||
.login-divider-text {
|
||||
background-color: $grayDarker;
|
||||
color: $grayLight;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signup-page-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url(../img/background_tease.jpg);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.invite-box {
|
||||
text-align: center;
|
||||
border: 1px solid $grafanaTargetFuncBackground;
|
||||
background-color: $grafanaPanelBackground;
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.tight-form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
float: right;
|
||||
font-size: 140%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.modal-tagline {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.playlist-search-container {
|
||||
// margin: 15px;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
width: 700px;
|
||||
box-shadow: 0px 0px 55px 0px black;
|
||||
background-color: $grafanaPanelBackground;
|
||||
|
||||
.label-tag {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-switches {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.playlist-search-field-wrapper {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 8px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
> span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-results-container {
|
||||
min-height: 100px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.signup-page-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url(/img/background_tease.jpg);
|
||||
|
||||
.signup-logo-container {
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
|
||||
[ng\:cloak], [ng-cloak], .ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
.highlight-word {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
// Close icons
|
||||
// --------------------------------------------------
|
||||
.close {
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: $baseLineHeight;
|
||||
color: $black;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
@include opacity(20);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@include opacity(40);
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
button.close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Quick floats
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Toggling content
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Visibility
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// For Affix plugin
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
input[type=text].ng-dirty.ng-invalid {
|
||||
box-shadow: inset 0 0px 7px $red;
|
||||
}
|
||||
|
||||
form input.ng-invalid {
|
||||
color: $errorText;
|
||||
}
|
||||
@@ -0,0 +1,342 @@
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000;
|
||||
$gray: #bbb;
|
||||
$grayDark: #262626;
|
||||
$grayDarker: #1f1f1f;
|
||||
|
||||
$grayLight: #ADAFAE;
|
||||
$grayLighter: #BBBFC2;
|
||||
$white: #fff;
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blue: #33B5E5;
|
||||
$blueDark: #005f81;
|
||||
$green: #669900;
|
||||
$red: #CC3900;
|
||||
$yellow: #ECBB13;
|
||||
$orange: #FF8800;
|
||||
$pink: #FF4444;
|
||||
$purple: #9933CC;
|
||||
$variable: #32D1DF;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: #10a345;
|
||||
$warn: #ffc03c;
|
||||
$critical: #ed2e18;
|
||||
|
||||
// grafana Variables
|
||||
// -------------------------
|
||||
$grafanaPanelBackground: $grayDarker;
|
||||
$grafanaPanelBorder: solid 1px $grayDark;
|
||||
$grafanaTriggerBorder: solid 1px #555;
|
||||
|
||||
// Graphite Target Editor
|
||||
$grafanaTargetBorder: $black;
|
||||
$grafanaTargetBackground: $grayDark;
|
||||
$grafanaTargetColor: #c8c8c8;
|
||||
$grafanaTargetColorHide: darken(#c8c8c8, 25%);
|
||||
$grafanaTargetSegmentBorder: #050505;
|
||||
|
||||
$grafanaTargetFuncBackground: #333;
|
||||
$grafanaTargetFuncHightlight: #444;
|
||||
|
||||
$grafanaSelectBackground: $grafanaTargetFuncBackground;
|
||||
|
||||
$modalBackground: $black;
|
||||
$codeTagBackground: #444;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$bodyBackground: rgb(20,20,20);
|
||||
$pageBackground: $grayDarker;
|
||||
$textColor: $grayLighter;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
$linkColor: darken($white,11%);
|
||||
$linkColorDisabled: darken($linkColor,30%);
|
||||
$linkColorHover: $white;
|
||||
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
||||
$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
$baseFontSize: 14px;
|
||||
$baseFontWeight: 400;
|
||||
$baseFontFamily: $sansFontFamily;
|
||||
$baseLineHeight: 20px;
|
||||
$altFontFamily: $serifFontFamily;
|
||||
$fontWeightSemi: 600;
|
||||
|
||||
$headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily
|
||||
$headingsFontWeight: 400; // instead of browser default, bold
|
||||
$headingsFontStyle: normal;
|
||||
$headingsColor: darken($white,11%); // empty to use BS default, $textColor
|
||||
$inputText: $grayLight;
|
||||
|
||||
|
||||
// Component sizing
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 20px line-height
|
||||
|
||||
$fontSizeLarge: $baseFontSize * 1.25; // ~18px
|
||||
$fontSizeSmall: $baseFontSize * 0.85; // ~12px
|
||||
$fontSizeMini: $baseFontSize * 0.75; // ~11px
|
||||
|
||||
$paddingLarge: 11px 19px; // 44px
|
||||
$paddingSmall: 2px 10px; // 26px
|
||||
$paddingMini: 0px 6px; // 22px
|
||||
|
||||
$baseBorderRadius: 3px;
|
||||
$borderRadiusLarge: 4px;
|
||||
$borderRadiusSmall: 2px;
|
||||
|
||||
// Lists
|
||||
$grafanaListBackground: $grayDark;
|
||||
$grafanaListAccent: lighten($grayDarker, 2%);
|
||||
$grafanaListBorderTop: $grayDark;
|
||||
$grafanaListBorderBottom: $black;
|
||||
$grafanaListHighlight: #333;
|
||||
$grafanaListMainLinkColor: $textColor;
|
||||
|
||||
// Scrollbars
|
||||
$scrollbarBackground: #3a3a3a;
|
||||
$scrollbarBackground2: #3a3a3a;
|
||||
$scrollbarBorder: black;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
$tableBackground: transparent; // overall background-color
|
||||
$tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping
|
||||
$tableBackgroundHover: $grayDark; // for hover
|
||||
$tableBorder: $grayDark; // table and cell border
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
$btnBackground: $grayDark;
|
||||
$btnBackgroundHighlight: darken($grayLight, 15%);
|
||||
$btnBackgroundShadow: darken($grayLight, 15%);
|
||||
$btnBorder: #bbb;
|
||||
|
||||
$btnPrimaryBackground: $blueDark;
|
||||
$btnPrimaryBackgroundHighlight: lighten($blueDark, 5%);
|
||||
|
||||
$btnInfoBackground: lighten($purple, 3%);
|
||||
$btnInfoBackgroundHighlight: darken($purple, 3%);
|
||||
|
||||
$btnSuccessBackground: lighten($green, 3%);
|
||||
$btnSuccessBackgroundHighlight: darken($green, 3%);
|
||||
|
||||
$btnWarningBackground: lighten($orange, 3%);
|
||||
$btnWarningBackgroundHighlight: darken($orange, 3%);
|
||||
|
||||
$btnDangerBackground: lighten($red, 3%);
|
||||
$btnDangerBackgroundHighlight: darken($red, 3%);
|
||||
|
||||
$btnInverseBackground: $grayDark;
|
||||
$btnInverseBackgroundHighlight: lighten($grayDark, 1%);
|
||||
$btnInverseText: $textColor;
|
||||
$btnInverseBorder: #333;
|
||||
|
||||
$btnText: $gray;
|
||||
|
||||
$iconContainerBackground: $black;
|
||||
$iconContainerBackgroundHighlight: lighten($black, 5%);
|
||||
$iconContainerBorder: 1px solid transparent;
|
||||
$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$inputBackground: lighten($grayDark,5%);
|
||||
$inputBorder: lighten($grayDark,5%);
|
||||
$inputBorderRadius: $baseBorderRadius;
|
||||
$inputDisabledBackground: #555;
|
||||
$formActionsBackground: transparent;
|
||||
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$labelBackground: $grayDark;
|
||||
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$sideMenuTopShadow: $navbarDropdownShadow;
|
||||
$sideMenuBackground: $grayDark;
|
||||
$sideMenuBackgroundHighlight: lighten($grayDark, 4%);
|
||||
$sideMenuShadow: 0 0 35px 0 $bodyBackground;
|
||||
|
||||
// Search
|
||||
$searchShadow: 0 0 35px 0 $bodyBackground;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
$dropdownBackground: $heroUnitBackground;
|
||||
$dropdownBorder: rgba(0,0,0,.2);
|
||||
$dropdownDividerTop: transparent;
|
||||
$dropdownDividerBottom: #444;
|
||||
$dropdownDivider: $dropdownDividerBottom;
|
||||
$dropdownTitle: $linkColorDisabled;
|
||||
|
||||
$dropdownLinkColor: $textColor;
|
||||
$dropdownLinkColorHover: $white;
|
||||
$dropdownLinkColorActive: $white;
|
||||
|
||||
$dropdownLinkBackgroundActive: $blueDark;
|
||||
$dropdownLinkBackgroundHover: $blueDark;
|
||||
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Z-index master list
|
||||
// -------------------------
|
||||
// Used for a bird's eye view of components dependent on the z-axis
|
||||
// Try to avoid customizing these :)
|
||||
$zindexDropdown: 1000;
|
||||
$zindexPopover: 1010;
|
||||
$zindexTooltip: 1020;
|
||||
$zindexFixedNavbar: 1030;
|
||||
$zindexModalBackdrop: 1040;
|
||||
$zindexModal: 1050;
|
||||
|
||||
// Sprite icons path
|
||||
// -------------------------
|
||||
$iconSpritePath: "../img/glyphicons-halflings.png";
|
||||
$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
|
||||
|
||||
|
||||
// Input placeholder text color
|
||||
// -------------------------
|
||||
$placeholderText: darken($textColor, 25%);
|
||||
|
||||
|
||||
// Hr border color
|
||||
// -------------------------
|
||||
$hrBorder: $grayDark;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
$horizontalComponentOffset: 180px;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
$wellBackground: #131517;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarCollapseWidth: 979px;
|
||||
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
|
||||
|
||||
$navbarHeight: 52px;
|
||||
$navbarBackgroundHighlight: $grayDark;
|
||||
$navbarBackground: $grayDark;
|
||||
$navbarBorder: 1px solid $bodyBackground;
|
||||
|
||||
$navbarText: $grayLight;
|
||||
$navbarLinkColor: $grayLight;
|
||||
$navbarLinkColorHover: $white;
|
||||
$navbarLinkColorActive: $navbarLinkColorHover;
|
||||
$navbarLinkBackgroundHover: transparent;
|
||||
$navbarLinkBackgroundActive: $navbarBackground;
|
||||
$navbarBrandColor: $linkColor;
|
||||
$navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground;
|
||||
|
||||
$navbarButtonBackground: lighten($navbarBackground, 3%);
|
||||
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
$paginationBackground: $bodyBackground;
|
||||
$paginationBorder: transparent;
|
||||
$paginationActiveBackground: $blue;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
$heroUnitBackground: $grayDark;
|
||||
$heroUnitHeadingColor: inherit;
|
||||
$heroUnitLeadColor: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warningText: darken(#c09853, 10%);
|
||||
$warningBackground: $orange;
|
||||
|
||||
$errorText: #b94a48;
|
||||
$errorBackground: $btnDangerBackground;
|
||||
|
||||
$successText: #468847;
|
||||
$successBackground: $btnSuccessBackground;
|
||||
|
||||
$infoText: $blueDark;
|
||||
$infoBackground: $btnInfoBackground;
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
$tooltipColor: $white;
|
||||
$tooltipBackground: rgb(58, 57, 57);
|
||||
$tooltipArrowWidth: 5px;
|
||||
$tooltipArrowColor: $tooltipBackground;
|
||||
$tooltipLinkColor: $linkColor;
|
||||
|
||||
$popoverBackground: $heroUnitBackground;
|
||||
$popoverArrowWidth: 10px;
|
||||
$popoverArrowColor: $popoverBackground;
|
||||
$popoverTitleBackground: $popoverBackground;
|
||||
|
||||
// Special enhancement for popovers
|
||||
$popoverArrowOuterWidth: $popoverArrowWidth + 1;
|
||||
$popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
|
||||
// images
|
||||
$checkboxImageUrl: '../img/checkbox.png';
|
||||
|
||||
// GRID
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Default 940px grid
|
||||
// -------------------------
|
||||
$gridColumns: 12;
|
||||
$gridColumnWidth: 60px;
|
||||
$gridGutterWidth: 20px;
|
||||
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
|
||||
|
||||
// 1200px min
|
||||
$gridColumnWidth1200: 70px;
|
||||
$gridGutterWidth1200: 30px;
|
||||
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
|
||||
|
||||
// 768px-979px
|
||||
$gridColumnWidth768: 42px;
|
||||
$gridGutterWidth768: 20px;
|
||||
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
|
||||
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
|
||||
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
|
||||
|
||||
// 1200px min
|
||||
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
|
||||
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
|
||||
|
||||
// 768px-979px
|
||||
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
|
||||
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
|
||||
@@ -0,0 +1,359 @@
|
||||
// Cosmo 2.3.2
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000;
|
||||
$grayDarker: lighten(#000, 11.5%); // #222
|
||||
$grayDark: lighten(#000, 20%); // #333
|
||||
$gray: lighten(#000, 33.5%); // #555
|
||||
$grayLight: lighten(#000, 60%); // #999
|
||||
$grayLighter: lighten(#000, 97.5%); // #eee
|
||||
$white: #fff;
|
||||
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blueOrig: #007FFF;
|
||||
$blue: #2AB2E4;
|
||||
$blueDark: #75CAEB;
|
||||
$green: #28B62C;
|
||||
$red: #FF4136;
|
||||
$yellow: #FF851B;
|
||||
$orange: #FF7518;
|
||||
$pink: #E671B8;
|
||||
$purple: #9954BB;
|
||||
$variable: #2AB2E4;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: #01A64F;
|
||||
$warn: #F79520;
|
||||
$critical: #EC2128;
|
||||
|
||||
// grafana Variables
|
||||
// -------------------------
|
||||
$grafanaPanelBackground: $grayLighter;
|
||||
$grafanaPanelBorder: solid 1px #ddd;
|
||||
$grafanaTriggerBorder: solid 1px $grayLight;
|
||||
|
||||
// Submenu
|
||||
$submenuBackground: rgb(218, 217, 217);
|
||||
$submenuBorder: $white;
|
||||
|
||||
// Tabs
|
||||
$fullEditBorder: $grayLighter;
|
||||
|
||||
// Graphite Target Editor
|
||||
$grafanaTargetBorder: #ddd;
|
||||
$grafanaTargetBackground: #efefef;
|
||||
$grafanaTargetColor: $textColor;
|
||||
$grafanaTargetColorHide: lighten($textColor, 25%);
|
||||
$grafanaTargetSegmentBorder: #ddd;
|
||||
|
||||
$grafanaTargetFuncBackground: darken($grafanaTargetBackground, 5%);
|
||||
$grafanaTargetFuncHightlight: darken($grafanaTargetBackground, 10%);
|
||||
|
||||
$grafanaSelectBackground: $grafanaTargetFuncBackground;
|
||||
|
||||
$modalBackground: $bodyBackground;
|
||||
$codeTagBackground: #ddd;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$bodyBackground: #EFEFEF;
|
||||
$pageBackground: $white;
|
||||
$textColor: $gray;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
$linkColor: $gray;
|
||||
$linkColorDisabled: lighten($linkColor,30%);
|
||||
$linkColorHover: darken($linkColor, 20%);
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
||||
$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
$baseFontSize: 14px;
|
||||
$baseFontWeight: 400;
|
||||
$fontWeightSemi: 600;
|
||||
$baseFontFamily: $sansFontFamily;
|
||||
$baseLineHeight: 20px;
|
||||
$altFontFamily: $serifFontFamily;
|
||||
|
||||
$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily
|
||||
$headingsFontWeight: normal; // instead of browser default, bold
|
||||
$headingsFontStyle: normal;
|
||||
$headingsColor: $textColor; // empty to use BS default, $textColor
|
||||
|
||||
|
||||
// Component sizing
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 20px line-height
|
||||
|
||||
$fontSizeLarge: $baseFontSize * 1.25; // ~18px
|
||||
$fontSizeSmall: $baseFontSize * 0.85; // ~12px
|
||||
$fontSizeMini: $baseFontSize * 0.75; // ~11px
|
||||
|
||||
$paddingLarge: 22px 30px; // 66px
|
||||
$paddingSmall: 2px 10px; // 26px
|
||||
$paddingMini: 2px 6px; // 24px
|
||||
|
||||
$baseBorderRadius: 3px;
|
||||
$borderRadiusLarge: 4px;
|
||||
$borderRadiusSmall: 2px;
|
||||
|
||||
// Lists
|
||||
$grafanaListBackground: darken($grayLighter,5%);
|
||||
$grafanaListAccent: darken($grayLighter,8%);
|
||||
$grafanaListBorderTop: #eee;
|
||||
$grafanaListBorderBottom: #eee;
|
||||
$grafanaListHighlight: darken($grayLighter,10%);
|
||||
$grafanaListHighlightContrast: #ddd;
|
||||
$grafanaListMainLinkColor: $textColor;
|
||||
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
$tableBackground: transparent; // overall background-color
|
||||
$tableBackgroundAccent: #f9f9f9; // for striping
|
||||
$tableBackgroundHover: #E8F8FD; // for hover
|
||||
$tableBorder: #ddd; // table and cell border
|
||||
|
||||
// Scrollbars
|
||||
$scrollbarBackground: $grayLighter;
|
||||
$scrollbarBackground2: $grayLighter;
|
||||
$scrollbarBorder: $grayLight;
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
$btnBackground: $grayLighter;
|
||||
$btnBackgroundHighlight: darken($grayLighter, 15%);
|
||||
$btnBorder: #bbb;
|
||||
|
||||
$btnPrimaryBackground: lighten($blue, 3%);
|
||||
$btnPrimaryBackgroundHighlight: darken($blue, 3%);
|
||||
|
||||
$btnInfoBackground: lighten($purple, 3%);
|
||||
$btnInfoBackgroundHighlight: darken($purple, 3%);
|
||||
|
||||
$btnSuccessBackground: lighten($green, 3%);
|
||||
$btnSuccessBackgroundHighlight: darken($green, 3%);
|
||||
|
||||
$btnWarningBackground: lighten($orange, 3%);
|
||||
$btnWarningBackgroundHighlight: darken($orange, 3%);
|
||||
|
||||
$btnDangerBackground: lighten($red, 3%);
|
||||
$btnDangerBackgroundHighlight: darken($red, 3%);
|
||||
|
||||
$btnInverseBackground: $grayLighter;
|
||||
$btnInverseBackgroundHighlight: darken($grayLighter, 5%);
|
||||
$btnInverseText: $black;
|
||||
$btnInverseBorder: $grayLight;
|
||||
|
||||
$btnText: $grayLighter;
|
||||
|
||||
$iconContainerBackground: $white;
|
||||
$iconContainerBackgroundHighlight: lighten($white, 5%);
|
||||
$iconContainerBorder: 1px solid rgba(0,0,0, 0.05);
|
||||
$iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$inputBackground: $white;
|
||||
$inputBorder: $grayLight;
|
||||
$inputBorderRadius: $baseBorderRadius;
|
||||
$inputDisabledBackground: $grayLighter;
|
||||
$formActionsBackground: #f5f5f5;
|
||||
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$inputText: #020202;
|
||||
$labelBackground: #f8f8f8;
|
||||
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$sideMenuBackground: $grafanaPanelBackground;
|
||||
$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%);
|
||||
|
||||
// search
|
||||
$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%);
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
$dropdownBackground: $white;
|
||||
$dropdownBorder: $grafanaTargetBorder;
|
||||
$dropdownDividerTop: #e5e5e5;
|
||||
$dropdownDividerBottom: $white;
|
||||
$dropdownDivider: $dropdownDividerTop;
|
||||
$dropdownTitle: #333;
|
||||
|
||||
$dropdownLinkColor: $grayDark;
|
||||
$dropdownLinkColorHover: $white;
|
||||
$dropdownLinkColorActive: $white;
|
||||
|
||||
$dropdownLinkBackgroundActive: $blue;
|
||||
$dropdownLinkBackgroundHover: $blue;
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Z-index master list
|
||||
// -------------------------
|
||||
// Used for a bird's eye view of components dependent on the z-axis
|
||||
// Try to avoid customizing these :)
|
||||
$zindexDropdown: 1000;
|
||||
$zindexPopover: 1010;
|
||||
$zindexTooltip: 1030;
|
||||
$zindexFixedNavbar: 1030;
|
||||
$zindexModalBackdrop: 1040;
|
||||
$zindexModal: 1050;
|
||||
|
||||
|
||||
// Sprite icons path
|
||||
// -------------------------
|
||||
$iconSpritePath: "../img/glyphicons-halflings.png";
|
||||
$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
|
||||
|
||||
|
||||
// Input placeholder text color
|
||||
// -------------------------
|
||||
$placeholderText: $grayLight;
|
||||
|
||||
|
||||
// Hr border color
|
||||
// -------------------------
|
||||
$hrBorder: $grayLighter;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
$horizontalComponentOffset: 180px;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
$wellBackground: $grayLighter;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarCollapseWidth: 979px;
|
||||
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
|
||||
|
||||
$navbarHeight: 52px;
|
||||
$navbarBackgroundHighlight: #f8f8f8;
|
||||
$navbarBackground: #f8f8f8;
|
||||
$navbarBorder: 1px solid $grafanaTargetBorder;
|
||||
|
||||
$navbarText: #666;
|
||||
$navbarLinkColor: #666;
|
||||
$navbarLinkColorHover: #333;
|
||||
$navbarLinkColorActive: #555;
|
||||
$navbarLinkBackgroundHover: transparent;
|
||||
$navbarLinkBackgroundActive: darken($navbarBackground, 6.5%);
|
||||
$navbarDropdownShadow: inset 0px 4px 7px -4px darken($bodyBackground, 20%);
|
||||
|
||||
$navbarBrandColor: $navbarLinkColor;
|
||||
|
||||
$navbarButtonBackground: lighten($navbarBackground, 3%);
|
||||
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
|
||||
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
$paginationBackground: $grayLight;
|
||||
$paginationBorder: transparent;
|
||||
$paginationActiveBackground: $blue;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
$heroUnitBackground: $grayLighter;
|
||||
$heroUnitHeadingColor: inherit;
|
||||
$heroUnitLeadColor: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warningText: lighten($orange, 10%);
|
||||
$warningBackground: $orange;
|
||||
$warningBorder: transparent;
|
||||
|
||||
$errorText: lighten($red, 10%);
|
||||
$errorBackground: $red;
|
||||
$errorBorder: transparent;
|
||||
|
||||
$successText: lighten($green, 10%);
|
||||
$successBackground: $green;
|
||||
$successBorder: transparent;
|
||||
|
||||
$infoText: lighten($purple,10%);
|
||||
$infoBackground: $purple;
|
||||
$infoBorder: transparent;
|
||||
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
$tooltipColor: $white;
|
||||
$tooltipBackground: $grayDark;
|
||||
$tooltipArrowWidth: 5px;
|
||||
$tooltipArrowColor: $tooltipBackground;
|
||||
$tooltipLinkColor: darken($white,11%);
|
||||
|
||||
$popoverBackground: $white;
|
||||
$popoverArrowWidth: 15px;
|
||||
$popoverArrowColor: $white;
|
||||
$popoverTitleBackground: $white;
|
||||
|
||||
// Special enhancement for popovers
|
||||
$popoverArrowOuterWidth: $popoverArrowWidth + 1;
|
||||
$popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
|
||||
// images
|
||||
$checkboxImageUrl: '../img/checkbox_white.png';
|
||||
|
||||
// GRID
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default 940px grid
|
||||
// -------------------------
|
||||
$gridColumns: 12;
|
||||
$gridColumnWidth: 60px;
|
||||
$gridGutterWidth: 20px;
|
||||
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
|
||||
|
||||
// 1200px min
|
||||
$gridColumnWidth1200: 70px;
|
||||
$gridGutterWidth1200: 30px;
|
||||
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
|
||||
|
||||
// 768px-979px
|
||||
$gridColumnWidth768: 42px;
|
||||
$gridGutterWidth768: 20px;
|
||||
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
|
||||
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
|
||||
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
|
||||
|
||||
// 1200px min
|
||||
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
|
||||
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
|
||||
|
||||
// 768px-979px
|
||||
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
|
||||
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
|
||||
@@ -7,7 +7,6 @@ module.exports = function(config) {
|
||||
'<%= genDir %>/vendor/css/timepicker.css',
|
||||
'<%= genDir %>/vendor/css/spectrum.css',
|
||||
'<%= genDir %>/css/bootstrap.dark.min.css',
|
||||
'<%= genDir %>/css/bootstrap-responsive.min.css',
|
||||
'<%= genDir %>/vendor/css/font-awesome.min.css'
|
||||
],
|
||||
dest: '<%= genDir %>/css/grafana.dark.min.css'
|
||||
@@ -18,7 +17,6 @@ module.exports = function(config) {
|
||||
'<%= genDir %>/vendor/css/timepicker.css',
|
||||
'<%= genDir %>/vendor/css/spectrum.css',
|
||||
'<%= genDir %>/css/bootstrap.light.min.css',
|
||||
'<%= genDir %>/css/bootstrap-responsive.min.css',
|
||||
'<%= genDir %>/vendor/css/font-awesome.min.css'
|
||||
],
|
||||
dest: '<%= genDir %>/css/grafana.light.min.css'
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
module.exports = function(config) {
|
||||
|
||||
return {
|
||||
src:{
|
||||
options: {},
|
||||
files: {
|
||||
"<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss",
|
||||
"<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss",
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -21,9 +21,9 @@ module.exports = function(config, grunt) {
|
||||
grunt.task.run('jscs');
|
||||
}
|
||||
|
||||
if (/(\.less)$/.test(filepath)) {
|
||||
if (/(\.scss)$/.test(filepath)) {
|
||||
grunt.task.run('clean:css');
|
||||
grunt.task.run('css');
|
||||
grunt.task.run('sass');
|
||||
}
|
||||
|
||||
if (/(\.ts)$/.test(filepath)) {
|
||||
|
||||
Reference in New Issue
Block a user