diff --git a/public/less/base/base.less b/public/less/base/base.less deleted file mode 100644 index d10711b48f3..00000000000 --- a/public/less/base/base.less +++ /dev/null @@ -1,28 +0,0 @@ -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; -} - diff --git a/public/less/base/code.less b/public/less/base/code.less deleted file mode 100644 index ebbacc9d733..00000000000 --- a/public/less/base/code.less +++ /dev/null @@ -1,52 +0,0 @@ -// -// Code (inline and blocK) -// -------------------------------------------------- - - -// Inline and block code styles -code, -pre { - .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; - } -} - diff --git a/public/less/base/fonts.less b/public/less/base/fonts.less deleted file mode 100644 index 61ff672465b..00000000000 --- a/public/less/base/fonts.less +++ /dev/null @@ -1,168 +0,0 @@ -@font-face { - font-family: 'grafana-icons'; - src: url('../fonts/grafana-icons.eot?h6rv8b'); - src: url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'), - url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'), - url('../fonts/grafana-icons.woff?h6rv8b') format('woff'), - url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg'); - font-weight: normal; - font-style: normal; -} - -.icon-gf { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'grafana-icons' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-gf-raintank_wordmark:before { - content: "\e600"; -} -.icon-gf-raintank_icn:before { - content: "\e601"; -} -.icon-gf-raintank_r-icn:before { - content: "\e905"; -} -.icon-gf-check-alt:before { - content: "\e603"; -} -.icon-gf-check:before { - content: "\e604"; -} -.icon-gf-collector:before { - content: "\e605"; -} -.icon-gf-dashboard:before { - content: "\e606"; -} -.icon-gf-panel:before { - content: "\e904"; -} -.icon-gf-datasources:before { - content: "\e607"; -} -.icon-gf-endpoint-tiny:before { - content: "\e608"; -} -.icon-gf-endpoint:before { - content: "\e609"; -} -.icon-gf-filter:before { - content: "\e60a"; -} -.icon-gf-status:before { - content: "\e60b"; -} -.icon-gf-monitoring:before { - content: "\e60c"; -} -.icon-gf-monitoring-tiny:before { - content: "\e620"; -} -.icon-gf-jump-to-dashboard:before { - content: "\e60d"; -} -.icon-gf-warn:before { - content: "\e60e"; -} -.icon-gf-nodata:before { - content: "\e60f"; -} -.icon-gf-critical:before { - content: "\e610"; -} -.icon-gf-online:before { - content: "\e611"; -} -.icon-gf-event-error:before { - content: "\e623"; -} -.icon-gf-event:before { - content: "\e624"; -} -.icon-gf-private-collector:before { - content: "\e612"; -} -.icon-gf-alert:before { - content: "\e61f"; -} -.icon-gf-alert-disabled:before { - content: "\e621"; -} -.icon-gf-refresh:before { - content: "\e613"; -} -.icon-gf-save:before { - content: "\e614"; -} -.icon-gf-settings:before { - content: "\e615"; -} -.icon-gf-share:before { - content: "\e616"; -} -.icon-gf-star:before { - content: "\e617"; -} -.icon-gf-search:before { - content: "\e618"; -} -.icon-gf-tag-add:before { - content: "\e619"; -} -.icon-gf-tag-remove:before { - content: "\e61a"; -} -.icon-gf-video:before { - content: "\e61b"; -} -.icon-gf-bulk_action:before { - content: "\e61c"; -} -.icon-gf-users:before { - content: "\e622"; -} -.icon-gf-globe:before { - content: "\e61d"; -} -.icon-gf-snapshot:before { - content: "\e61e"; -} -.icon-gf-play-grafana-icon:before { - content: "\e629"; -} -.icon-gf-grafana-icon:before { - content: "\e625"; -} -.icon-gf-email:before { - content: "\e628"; -} -.icon-gf-stopwatch:before { - content: "\e626"; -} -.icon-gf-skull:before { - content: "\e900"; -} -.icon-gf-probe:before { - content: "\e901"; -} -.icon-gf-apps:before { - content: "\e902"; -} -.icon-gf-litmus:before { - content: "\e627"; -} -.icon-gf-grafana_wordmark:before { - content: "\e903"; -} - diff --git a/public/less/base/forms.less b/public/less/base/forms.less deleted file mode 100644 index 1e4e6b74c26..00000000000 --- a/public/less/base/forms.less +++ /dev/null @@ -1,294 +0,0 @@ -// -// 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 { - .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; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border linear .2s, box-shadow linear .2s"); - - // Focus state - &:focus { - border-color: rgba(82,168,236, .8); - outline: 0; - .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 { - .tab-focus(); -} - -// Placeholder -// ------------------------- - -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector -input, -textarea { - .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 -// ---------------------- - -// Grid sizes -#grid > .input(@gridColumnWidth, @gridGutterWidth); - -// 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%); - .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; - } -} - diff --git a/public/less/base/normalize.less b/public/less/base/normalize.less deleted file mode 100644 index 93dd4521727..00000000000 --- a/public/less/base/normalize.less +++ /dev/null @@ -1,425 +0,0 @@ -/*! 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; -} diff --git a/public/less/base/type.less b/public/less/base/type.less deleted file mode 100644 index f75e52d0f90..00000000000 --- a/public/less/base/type.less +++ /dev/null @@ -1,243 +0,0 @@ -// -// 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; -} - -// 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; -} diff --git a/public/less/bootstrap/grid.less b/public/less/bootstrap/grid.less deleted file mode 100644 index 750d2035149..00000000000 --- a/public/less/bootstrap/grid.less +++ /dev/null @@ -1,21 +0,0 @@ -// -// 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; -} diff --git a/public/less/bootstrap/responsive-1200px-min.less b/public/less/bootstrap/responsive-1200px-min.less deleted file mode 100644 index 4f35ba6ca23..00000000000 --- a/public/less/bootstrap/responsive-1200px-min.less +++ /dev/null @@ -1,28 +0,0 @@ -// -// 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; - } - -} diff --git a/public/less/bootstrap/responsive-767px-max.less b/public/less/bootstrap/responsive-767px-max.less deleted file mode 100644 index a074bc9d69d..00000000000 --- a/public/less/bootstrap/responsive-767px-max.less +++ /dev/null @@ -1,176 +0,0 @@ -// -// Responsive: Landscape phone to desktop/tablet -// -------------------------------------------------- - - -@media (max-width: 767px) { - - // TYPOGRAPHY - // ---------- - // Reset horizontal dl - .dl-horizontal { - dt { - float: none; - clear: none; - width: auto; - text-align: left; - } - dd { - margin-left: 0; - } - } - - // 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; - .box-sizing(border-box); - } - .span12, - .row-fluid .span12 { - width: 100%; - .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 { - .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; - } - -} diff --git a/public/less/bootstrap/responsive-768px-979px.less b/public/less/bootstrap/responsive-768px-979px.less deleted file mode 100644 index 8e8c486a069..00000000000 --- a/public/less/bootstrap/responsive-768px-979px.less +++ /dev/null @@ -1,19 +0,0 @@ -// -// 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 - -} diff --git a/public/less/bootstrap/responsive-utilities.less b/public/less/bootstrap/responsive-utilities.less deleted file mode 100644 index bf43e8ef739..00000000000 --- a/public/less/bootstrap/responsive-utilities.less +++ /dev/null @@ -1,59 +0,0 @@ -// -// 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; } -} diff --git a/public/less/bootstrap/responsive.less b/public/less/bootstrap/responsive.less deleted file mode 100644 index 64788eaf1b9..00000000000 --- a/public/less/bootstrap/responsive.less +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * 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.less -// For phone and tablet devices -// ------------------------------------------------------------- - - -// REPEAT VARIABLES & MIXINS -// ------------------------- -// Required since we compile the responsive stuff separately - -@import "../mixins/mixins.less"; -@import "responsive-utilities.less"; -@import "responsive-1200px-min.less"; -@import "responsive-768px-979px.less"; -@import "responsive-767px-max.less"; - - diff --git a/public/less/components/alerts.less b/public/less/components/alerts.less deleted file mode 100644 index 6824697326c..00000000000 --- a/public/less/components/alerts.less +++ /dev/null @@ -1,68 +0,0 @@ -// -// 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; -} diff --git a/public/less/components/buttons.less b/public/less/components/buttons.less deleted file mode 100644 index 1e08400b821..00000000000 --- a/public/less/components/buttons.less +++ /dev/null @@ -1,102 +0,0 @@ -// -// 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; - - .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); - .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 { - .tab-focus(); - } - - // Active state - &.active, - &:active { - background-image: none; - } - - // Disabled state - &.disabled, - &[disabled] { - cursor: default; - background-image: none; - .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 { - .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); -} -// Warning appears are orange -.btn-warning { - .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); -} -// Danger and error appear as red -.btn-danger { - .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); -} -// Success appears as green -.btn-success { - .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); -} -// Info appears as a neutral blue -.btn-info { - .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); -} -// Inverse appears as dark gray -.btn-inverse { - .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight, @btnInverseText); - box-shadow: none; - border: 1px solid @grafanaTargetFuncHightlight; -} - -.btn-text { - color: @btnText; - margin: 0; - vertical-align: middle; -} diff --git a/public/less/components/color_picker.less b/public/less/components/color_picker.less deleted file mode 100644 index a9e599ef2b5..00000000000 --- a/public/less/components/color_picker.less +++ /dev/null @@ -1,37 +0,0 @@ - -.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; -} diff --git a/public/less/components/dashboard.less b/public/less/components/dashboard.less deleted file mode 100644 index cc19bf0a1b6..00000000000 --- a/public/less/components/dashboard.less +++ /dev/null @@ -1,285 +0,0 @@ -.template-variable { - color: @variable; -} - -.grafana-row { - margin-bottom: 5px; -} - -.row-tab { - .dropdown-menu-right { - top: 0; - left: 33px; - } -} - -.row-tab-button { - padding: 0px; - cursor: pointer; - vertical-align: middle; - width: 30px; - height: 30px; - text-align: center; - display: inline-block; - line-height: 30px; - background: @btnSuccessBackground; - color: rgba(255,255,255,.90); -} - -.row-button { - width: 24px; - float: left; - cursor: pointer; - line-height: 31px; - background-color: @blueDark; -} - -.row-text { - white-space: nowrap; - text-transform: uppercase; - font-weight: bold; - font-size: 0.9em; - text-align: center; - line-height: 31px; - height: 31px; -} - -.row-close { - padding: 0px; - margin: 0px; - background: @grafanaPanelBackground; - text-align: center; -} - -.row-close-buttons { - position: absolute; - left: 0; -} - -.row-open { - margin-top: 5px; - left: -28px; - position: absolute; - z-index: 100; - transition: .10s left; - transition-delay: .10s; - - &:hover { - left: -12px; - } -} - - -.row-control-inner { - padding:0px; - margin:0px; - position:relative; -} - -.hide-controls { - padding: 0; - .row-tab { - display: none; - } - .add-row-panel-hint { - display: none; - } -} - -.playlist-active { - .add-row-panel-hint, - .dashnav-refresh-action, - .dashnav-zoom-out, - .dashnav-action-icons { - display: none; - } - - .grafana-menu-stop-playlist { - display: list-item; - } -} - -div.flot-text { - color: @textColor !important; -} - -.panel { - display: inline-block; - float: left; - vertical-align: top; - position: relative; -} - -.panel-margin { - margin: 5px; - display: block; -} - -.panel-container { - background-color: @grafanaPanelBackground; - position: relative; - border: @grafanaPanelBorder; - &:hover { - .panel-actions { - display: block; - } - } - - &.panel-transparent { - background-color: transparent; - border: none; - } -} - -.panel-content { - padding: 0px 10px 5px 10px; -} - -.panel-title-container { - min-height: 5px; - padding-top: 4px; - cursor: pointer; -} - -.panel-title { - border: 0px; - font-weight: @fontWeightSemi; - position: relative; - cursor: pointer; - width: 100%; - display: block; -} - -.panel-links-btn { - margin-left: 10px; - display: none; -} - -.panel-loading { - position:absolute; - top: -3px; - right: 0px; - z-index: 800; -} - -.panel-header { - text-align: center; -} - -.panel-error { - color: @white; - position: absolute; - left: 0; - padding: 0px 17px 6px 5px; - top: 0; - z-index: 10; - i { - position: relative; - top: -2px; - } -} - -.panel-error-arrow { - width: 0; - height: 0; - position: absolute; - border-left: 31px solid transparent; - border-right: 30px solid transparent; - border-bottom: 27px solid @grafanaPanelBackground; - left: 0; - bottom: 0; -} - -.panel-fullscreen { - .panel-title-container { - padding: 8px; - } -} - -.panel-full-edit { - margin-top: 20px; - margin-bottom: 20px; -} - -.panel-menu { - z-index: 500; - position: absolute; - background: @grafanaTargetFuncBackground; - border: 1px solid black; - - .panel-menu-row { - white-space: nowrap; - border-bottom: 1px solid black; - &:last-child { - border-bottom: none; - } - } - - .panel-menu-link, .panel-menu-icon { - padding: 5px 10px; - } - - .panel-menu-link { - display: inline-block; - border-right: 1px solid black; - &:last-child { - border: none; - } - } - - .dropdown-menu { - text-align: left; - } -} - -.panel-highlight { - .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 { - .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; - } -} diff --git a/public/less/components/dropdown.less b/public/less/components/dropdown.less deleted file mode 100644 index 94944d38168..00000000000 --- a/public/less/components/dropdown.less +++ /dev/null @@ -1,236 +0,0 @@ -// -// Dropdown menus -// -------------------------------------------------- - - -// Use the .menu class on any
  • 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; - .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; - .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; - .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 - .border-radius(@baseBorderRadius); -} diff --git a/public/less/components/filter-controls.less b/public/less/components/filter-controls.less deleted file mode 100644 index 287bebe3757..00000000000 --- a/public/less/components/filter-controls.less +++ /dev/null @@ -1,37 +0,0 @@ -// ========================================================================== -// 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; -} diff --git a/public/less/components/filter-list.less b/public/less/components/filter-list.less deleted file mode 100644 index 2e9ea259d0f..00000000000 --- a/public/less/components/filter-list.less +++ /dev/null @@ -1,142 +0,0 @@ -// ========================================================================== -// 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; - } -} diff --git a/public/less/components/filter-table.less b/public/less/components/filter-table.less deleted file mode 100644 index 5db53f1f46b..00000000000 --- a/public/less/components/filter-table.less +++ /dev/null @@ -1,57 +0,0 @@ -// ========================================================================== -// 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; -} diff --git a/public/less/components/footer.less b/public/less/components/footer.less deleted file mode 100644 index 9c25c837b3f..00000000000 --- a/public/less/components/footer.less +++ /dev/null @@ -1,9 +0,0 @@ -.grafana-version-info { - position: absolute; - bottom: 2px; - left: 3px; - font-size: 80%; - color: darken(@gray, 25%); - a { color: darken(@gray, 25%); } -} - diff --git a/public/less/components/gf-form.less b/public/less/components/gf-form.less deleted file mode 100644 index 50f8a87eaec..00000000000 --- a/public/less/components/gf-form.less +++ /dev/null @@ -1,71 +0,0 @@ -.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; - .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; } - - diff --git a/public/less/components/gf-form.scss b/public/less/components/gf-form.scss index 78f42e4a68d..9cf4c1a2def 100644 --- a/public/less/components/gf-form.scss +++ b/public/less/components/gf-form.scss @@ -30,7 +30,7 @@ background-color: $labelBackground; display: inline-block; padding: 8px 7px; - @include small; + font-size: $fontSizeSmall; } [type=text], diff --git a/public/less/components/gfbox.less b/public/less/components/gfbox.less deleted file mode 100644 index 2fc7aeef562..00000000000 --- a/public/less/components/gfbox.less +++ /dev/null @@ -1,69 +0,0 @@ -.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; - } -} diff --git a/public/less/components/infobox.less b/public/less/components/infobox.less deleted file mode 100644 index be446e9eb8a..00000000000 --- a/public/less/components/infobox.less +++ /dev/null @@ -1,20 +0,0 @@ -.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; - } -} - diff --git a/public/less/components/modals.less b/public/less/components/modals.less deleted file mode 100644 index 5e4d730494f..00000000000 --- a/public/less/components/modals.less +++ /dev/null @@ -1,149 +0,0 @@ -// -// 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 { - .opacity(70); -} - -// Base modal -.modal { - position: fixed; - z-index: @zindexModal; - width: 100%; - background-color: @grafanaPanelBackground; - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .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 - .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; - } -} diff --git a/public/less/components/navbar.less b/public/less/components/navbar.less deleted file mode 100644 index 4a1d0861060..00000000000 --- a/public/less/components/navbar.less +++ /dev/null @@ -1,178 +0,0 @@ - - -.navbar { - overflow: visible; - position: relative; - z-index: 110; -} - -.navbar-inner { - min-height: @navbarHeight; - padding-right: 20px; - background-color: @navbarBackground; - border-bottom: @navbarBorder; - - .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; -} - - diff --git a/public/less/components/navs.less b/public/less/components/navs.less deleted file mode 100644 index 1c1426d99cf..00000000000 --- a/public/less/components/navs.less +++ /dev/null @@ -1,200 +0,0 @@ -// -// 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 { - .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; - .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; - .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; -} diff --git a/public/less/components/old_stuff.less b/public/less/components/old_stuff.less deleted file mode 100644 index eae5eb558ce..00000000000 --- a/public/less/components/old_stuff.less +++ /dev/null @@ -1,20 +0,0 @@ - -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; -} diff --git a/public/less/components/pagination.less b/public/less/components/pagination.less deleted file mode 100644 index 6e292e5ab37..00000000000 --- a/public/less/components/pagination.less +++ /dev/null @@ -1,113 +0,0 @@ -.pagination { -} - -.pagination ul { - display: inline-block; - margin-left: 0; - margin-bottom: 0; - .border-radius(@baseBorderRadius); - .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; - .border-left-radius(@baseBorderRadius); -} -.pagination ul > li:last-child > a, -.pagination ul > li:last-child > span { - .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 { - .border-left-radius(@borderRadiusLarge); - } - ul > li:last-child > a, - ul > li:last-child > span { - .border-right-radius(@borderRadiusLarge); - } -} - -// Small and mini -.pagination-mini, -.pagination-small { - ul > li:first-child > a, - ul > li:first-child > span { - .border-left-radius(@borderRadiusSmall); - } - ul > li:last-child > a, - ul > li:last-child > span { - .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; - } -} diff --git a/public/less/components/panel_dashlist.less b/public/less/components/panel_dashlist.less deleted file mode 100644 index 03fddf83de1..00000000000 --- a/public/less/components/panel_dashlist.less +++ /dev/null @@ -1,22 +0,0 @@ -.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; - } -} diff --git a/public/less/components/panel_graph.less b/public/less/components/panel_graph.less deleted file mode 100644 index dfef812811c..00000000000 --- a/public/less/components/panel_graph.less +++ /dev/null @@ -1,298 +0,0 @@ -.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; -} diff --git a/public/less/components/panel_singlestat.less b/public/less/components/panel_singlestat.less deleted file mode 100644 index 368be2b3538..00000000000 --- a/public/less/components/panel_singlestat.less +++ /dev/null @@ -1,51 +0,0 @@ -.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; - } -} - - diff --git a/public/less/components/panel_table.less b/public/less/components/panel_table.less deleted file mode 100644 index 51b7449c7a8..00000000000 --- a/public/less/components/panel_table.less +++ /dev/null @@ -1,101 +0,0 @@ -.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; -} diff --git a/public/less/components/popovers.less b/public/less/components/popovers.less deleted file mode 100644 index 0d4516b080c..00000000000 --- a/public/less/components/popovers.less +++ /dev/null @@ -1,128 +0,0 @@ -// -// 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); - .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; - } - } - -} diff --git a/public/less/components/query_editor.less b/public/less/components/query_editor.less deleted file mode 100644 index de7df012c46..00000000000 --- a/public/less/components/query_editor.less +++ /dev/null @@ -1,16 +0,0 @@ -.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; -} - diff --git a/public/less/components/scrollbar.less b/public/less/components/scrollbar.less deleted file mode 100644 index 8c9d13303c8..00000000000 --- a/public/less/components/scrollbar.less +++ /dev/null @@ -1,41 +0,0 @@ -// -// 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; -} - diff --git a/public/less/components/search.less b/public/less/components/search.less deleted file mode 100644 index 0cf4c8a20f3..00000000000 --- a/public/less/components/search.less +++ /dev/null @@ -1,107 +0,0 @@ -.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; - } -} - diff --git a/public/less/components/shortcuts.less b/public/less/components/shortcuts.less deleted file mode 100644 index ed639b6292c..00000000000 --- a/public/less/components/shortcuts.less +++ /dev/null @@ -1,6 +0,0 @@ -.shortcut-table { - td { padding: 3px; } - th:last-child { text-align: left; } - td:first-child { text-align: right; } -} - diff --git a/public/less/components/sidemenu.less b/public/less/components/sidemenu.less deleted file mode 100644 index 946799b76d8..00000000000 --- a/public/less/components/sidemenu.less +++ /dev/null @@ -1,220 +0,0 @@ -@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; -} - diff --git a/public/less/components/submenu.less b/public/less/components/submenu.less deleted file mode 100644 index 1b5eb887adc..00000000000 --- a/public/less/components/submenu.less +++ /dev/null @@ -1,133 +0,0 @@ -.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; -} diff --git a/public/less/components/tables_lists.less b/public/less/components/tables_lists.less deleted file mode 100644 index f0c7275ffe1..00000000000 --- a/public/less/components/tables_lists.less +++ /dev/null @@ -1,43 +0,0 @@ -.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; -} diff --git a/public/less/components/tabs.less b/public/less/components/tabs.less deleted file mode 100644 index 8301eef15bb..00000000000 --- a/public/less/components/tabs.less +++ /dev/null @@ -1,40 +0,0 @@ - -.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 { - .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; - } -} - - diff --git a/public/less/components/tags.less b/public/less/components/tags.less deleted file mode 100644 index 7b2af7ef30c..00000000000 --- a/public/less/components/tags.less +++ /dev/null @@ -1,39 +0,0 @@ -// 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%); -} - diff --git a/public/less/components/tagsinput.less b/public/less/components/tagsinput.less deleted file mode 100644 index 44fa35ffbe8..00000000000 --- a/public/less/components/tagsinput.less +++ /dev/null @@ -1,39 +0,0 @@ -.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); - } - } - } - } -} diff --git a/public/less/components/tightform.less b/public/less/components/tightform.less deleted file mode 100644 index a58fa80b652..00000000000 --- a/public/less/components/tightform.less +++ /dev/null @@ -1,236 +0,0 @@ -.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; -} diff --git a/public/less/components/timepicker.less b/public/less/components/timepicker.less deleted file mode 100644 index 3eabb32bb1e..00000000000 --- a/public/less/components/timepicker.less +++ /dev/null @@ -1,107 +0,0 @@ -.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; - .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 { - .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 { - .faMixin; - content: "\f054"; -} - -.glyphicon-chevron-left:before { - .faMixin; - content: "\f053"; -} - -.input-datetime-format { - color: @linkColorDisabled -} diff --git a/public/less/components/timepicker.scss b/public/less/components/timepicker.scss index 8a232ddc779..d703e78e329 100644 --- a/public/less/components/timepicker.scss +++ b/public/less/components/timepicker.scss @@ -83,25 +83,6 @@ } } -.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 } diff --git a/public/less/components/tooltip.less b/public/less/components/tooltip.less deleted file mode 100644 index 03be011f72a..00000000000 --- a/public/less/components/tooltip.less +++ /dev/null @@ -1,102 +0,0 @@ -// -// Tooltips -// -------------------------------------------------- - - -// Base class -.tooltip { - position: absolute; - z-index: @zindexTooltip; - display: block; - visibility: visible; - font-size: 11px; - line-height: 1.4; - .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; - .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; -} - diff --git a/public/less/components/tooltip.scss b/public/less/components/tooltip.scss index 3d0e2a7b16a..72dc441c875 100644 --- a/public/less/components/tooltip.scss +++ b/public/less/components/tooltip.scss @@ -12,7 +12,7 @@ font-size: 11px; line-height: 1.4; @include opacity(0); - &.in { .opacity(100); } + &.in { @include opacity(100); } &.top { margin-top: -3px; padding: 5px 0; } &.right { margin-left: 3px; padding: 0 5px; } &.bottom { margin-top: 3px; padding: 5px 0; } diff --git a/public/less/components/typeahead.less b/public/less/components/typeahead.less deleted file mode 100644 index 6d63ed05a99..00000000000 --- a/public/less/components/typeahead.less +++ /dev/null @@ -1,11 +0,0 @@ - -// typeahead max height -.typeahead { - max-height: 300px; - overflow-y: auto; -} - -.typeahead strong { - color: @yellow; -} - diff --git a/public/less/grafana-responsive.less b/public/less/grafana-responsive.less deleted file mode 100644 index 0431bb3dcae..00000000000 --- a/public/less/grafana-responsive.less +++ /dev/null @@ -1,127 +0,0 @@ -@import "variables.dark.less"; -@import "bootstrap/responsive.less"; - -@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; - } -} diff --git a/public/less/grafana.dark.less b/public/less/grafana.dark.less deleted file mode 100644 index e922d47f91c..00000000000 --- a/public/less/grafana.dark.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "variables.dark.less"; -@import "grafana.less"; diff --git a/public/less/grafana.less b/public/less/grafana.less deleted file mode 100644 index 6a3facc4206..00000000000 --- a/public/less/grafana.less +++ /dev/null @@ -1,69 +0,0 @@ - -// BASE -@import "./base/normalize.less"; -@import "./base/base.less"; -@import "./base/type.less"; -@import "./base/forms.less"; -@import "./base/fonts.less"; -@import "./base/code.less"; - -// UTILS -@import "./utils/utils.less"; -@import "./utils/validation.less"; -@import "./utils/angular.less"; - -// MIXINS -@import "./mixins/mixins.less"; -@import "./mixins/buttons.less"; - -// LAYOUTS -// @import "./bootstrap/grid.less"; -@import "./layout/page.less"; - -// COMPONENTS -@import "./components/panel_graph.less"; -@import "./components/submenu.less"; -@import "./components/panel_dashlist.less"; -@import "./components/panel_singlestat.less"; -@import "./components/panel_table.less"; -@import "./components/tagsinput.less"; -@import "./components/tables_lists.less"; -@import "./components/search.less"; -@import "./components/dashboard.less"; -@import "./components/tightform.less"; -@import "./components/gf-form.less"; -@import "./components/sidemenu.less"; -@import "./components/navbar.less"; -@import "./components/gfbox.less"; -@import "./components/pagination.less"; -@import "./components/tabs.less"; -@import "./components/timepicker.less"; -@import "./components/filter-controls.less"; -@import "./components/filter-list.less"; -@import "./components/filter-table.less"; -@import "./components/scrollbar.less"; -@import "./components/old_stuff.less"; -@import "./components/navbar.less"; -@import "./components/popovers.less"; -@import "./components/alerts.less"; -@import "./components/typeahead.less"; -@import "./components/tags.less"; -@import "./components/modals.less"; -@import "./components/dropdown.less"; -@import "./components/color_picker.less"; -@import "./components/tooltip.less"; -@import "./components/buttons.less"; -@import "./components/footer.less"; -@import "./components/infobox.less"; -@import "./components/shortcuts.less"; -@import "./components/query_editor.less"; -@import "./components/navs.less"; - -// PAGES -@import "./pages/login.less"; -@import "./pages/playlist.less"; -@import "./pages/admin.less"; -@import "./pages/alerting.less"; -@import "./pages/apps.less"; -@import "./pages/signup.less"; - diff --git a/public/less/grafana.light.less b/public/less/grafana.light.less deleted file mode 100644 index 57824198630..00000000000 --- a/public/less/grafana.light.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "variables.light.less"; -@import "grafana.less"; diff --git a/public/less/grafana.scss b/public/less/grafana.scss index 3d8de05687f..f994c9a194d 100644 --- a/public/less/grafana.scss +++ b/public/less/grafana.scss @@ -1,4 +1,8 @@ +// MIXINS +@import "./mixins/mixins.scss"; +@import "./mixins/buttons.scss"; + // BASE @import "./base/normalize.scss"; @import "./base/base.scss"; @@ -12,10 +16,6 @@ @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"; diff --git a/public/less/layout/page.less b/public/less/layout/page.less deleted file mode 100644 index 11b37da2f96..00000000000 --- a/public/less/layout/page.less +++ /dev/null @@ -1,71 +0,0 @@ -.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; - } - } -} - diff --git a/public/less/mixins/buttons.less b/public/less/mixins/buttons.less deleted file mode 100644 index de055f918e8..00000000000 --- a/public/less/mixins/buttons.less +++ /dev/null @@ -1,18 +0,0 @@ - -// Button backgrounds -// ------------------ -.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 - .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%); - } -} - - diff --git a/public/less/mixins/mixins.less b/public/less/mixins/mixins.less deleted file mode 100644 index b7215a034fa..00000000000 --- a/public/less/mixins/mixins.less +++ /dev/null @@ -1,484 +0,0 @@ -// -// Mixins -// -------------------------------------------------- - - -// UTILITY MIXINS -// -------------------------------------------------- - -// Clearfix -// -------- -// For clearing floats like a boss h5bp.com/q -.clearfix { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} - -.tab-focus() { -} - -// Center-align a block level element -// ---------------------------------- -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -// ------------------------- -.size(@height, @width) { - width: @width; - height: @height; -} - -.square(@size) { - .size(@size, @size); -} - -// Placeholder text -// ------------------------- -.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 -.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 -// -------------------------------------------------- - -.font-family-serif() { - font-family: @serifFontFamily; -} -.font-family-sans-serif() { - font-family: @sansFontFamily; -} -.font-family-monospace() { - font-family: @monoFontFamily; -} -.font-shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; -} -.font-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - .font-family-serif(); - .font-shorthand(@size, @weight, @lineHeight); -} -.font-sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - .font-family-sans-serif(); - .font-shorthand(@size, @weight, @lineHeight); -} -.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - .font-family-monospace; - .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) - .box-sizing(border-box); // Makes inputs behave like true block-level elements -} - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Border Radius -.border-radius(@radius) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Single Corner Border Radius -.border-top-left-radius(@radius) { - -webkit-border-top-left-radius: @radius; - -moz-border-radius-topleft: @radius; - border-top-left-radius: @radius; -} -.border-top-right-radius(@radius) { - -webkit-border-top-right-radius: @radius; - -moz-border-radius-topright: @radius; - border-top-right-radius: @radius; -} -.border-bottom-right-radius(@radius) { - -webkit-border-bottom-right-radius: @radius; - -moz-border-radius-bottomright: @radius; - border-bottom-right-radius: @radius; -} -.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 -.border-top-radius(@radius) { - .border-top-right-radius(@radius); - .border-top-left-radius(@radius); -} -.border-right-radius(@radius) { - .border-top-right-radius(@radius); - .border-bottom-right-radius(@radius); -} -.border-bottom-radius(@radius) { - .border-bottom-right-radius(@radius); - .border-bottom-left-radius(@radius); -} -.border-left-radius(@radius) { - .border-top-left-radius(@radius); - .border-bottom-left-radius(@radius); -} - -// Drop shadows -.box-shadow(@shadow) { - box-shadow: @shadow; -} - -// Transitions -.transition(@transition) { - transition: @transition; -} - -.transition-delay(@transition-delay) { - transition-delay: @transition-delay; -} - -.transition-duration(@transition-duration) { - transition-duration: @transition-duration; -} - -// Transformations -.rotate(@degrees) { - transform: rotate(@degrees); -} - -.scale(@ratio) { - transform: scale(@ratio); -} - -.translate(@x, @y) { - transform: translate(@x, @y); -} - -.skew(@x, @y) { - transform: skew(@x, @y); - -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 -} - -.translate3d(@x, @y, @z) { - transform: translate3d(@x, @y, @z); -} - -.backface-visibility(@visibility){ - backface-visibility: @visibility; -} -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" -.background-clip(@clip) { - background-clip: @clip; -} - -// Background sizing -.background-size(@size) { - background-size: @size; -} - -// Box sizing -.box-sizing(@boxmodel) { - box-sizing: @boxmodel; -} - -// User select -// For selecting text on the page -.user-select(@select) { - user-select: @select; -} - -// Resize anything -.resizable(@direction) { - resize: @direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -.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 -.hyphens(@mode: auto) { - word-wrap: break-word; - -webkit-hyphens: @mode; - -moz-hyphens: @mode; - -ms-hyphens: @mode; - -o-hyphens: @mode; - hyphens: @mode; -} - -// Opacity -.opacity(@opacity) { - opacity: @opacity / 100; -} - -// BACKGROUNDS -// -------------------------------------------------- - -// Add an alphatransparency value to any background or border color (via Elyse Holladay) -#translucent { - .background(@color: @white, @alpha: 1) { - background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - } - .border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - .background-clip(padding-box); - } -} - -// Gradient Bar Colors for buttons and alerts -.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - color: @textColor; - text-shadow: @textShadow; - #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 -#gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - } - .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; - } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 - } - .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; - } - .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; - } - - .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; - } - - .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); - } -} - -// Grid System -// ----------- - -// Centered container element -.container-fixed() { - margin-right: auto; - margin-left: auto; - .clearfix(); -} - -.makeColumn(@columns: 1, @offset: 0) { - float: left; - margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); -} - -// The Grid -#grid { - - .core (@gridColumnWidth, @gridGutterWidth) { - - .spanX (@index) when (@index > 0) { - .span@{index} { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - .offset@{index} { .offset(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); - } - - .span (@columns) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - - .row { - margin-left: @gridGutterWidth * -1; - .clearfix(); - } - - [class*="span"] { - float: left; - min-height: 1px; // prevent collapsing columns - margin-left: @gridGutterWidth; - } - - // Set the container width, and override it for fixed navbars in media queries - .container, - .navbar-static-top .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container { .span(@gridColumns); } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - - } - - .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { - - .spanX (@index) when (@index > 0) { - .span@{index} { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - .offset@{index} { .offset(@index); } - .offset@{index}:first-child { .offsetFirstChild(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); - } - - .offsetFirstChild (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - - .span (@columns) { - width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); - *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); - } - - .row-fluid { - width: 100%; - .clearfix(); - [class*="span"] { - .input-block-level(); - float: left; - margin-left: @fluidGridGutterWidth; - *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - [class*="span"]:first-child { - margin-left: 0; - } - - // Space grid-sized controls properly if multiple per line - .controls-row [class*="span"] + [class*="span"] { - margin-left: @fluidGridGutterWidth; - } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - } - - } - - .input(@gridColumnWidth, @gridGutterWidth) { - - .spanX (@index) when (@index > 0) { - input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .span(@columns) { - width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14; - } - - input, - textarea, - .uneditable-input { - margin-left: 0; // override margin-left from core grid system - } - - // Space grid-sized controls properly if multiple per line - .controls-row [class*="span"] + [class*="span"] { - margin-left: @gridGutterWidth; - } - - // generate .spanX - .spanX (@gridColumns); - - } -} diff --git a/public/less/mixins/mixins.scss b/public/less/mixins/mixins.scss index ecbdc0288e9..980e3ad9284 100644 --- a/public/less/mixins/mixins.scss +++ b/public/less/mixins/mixins.scss @@ -7,6 +7,11 @@ } } +// Box sizing +@mixin box-sizing($boxmodel) { + box-sizing: $boxmodel; +} + @mixin tab-focus() { // Default outline: thin dotted; @@ -221,11 +226,6 @@ background-size: $size; } -// Box sizing -@mixin box-sizing($boxmodel) { - box-sizing: $boxmodel; -} - // User select // For selecting text on the page @mixin user-select($select) { diff --git a/public/less/pages/admin.less b/public/less/pages/admin.less deleted file mode 100644 index 5345e4242fc..00000000000 --- a/public/less/pages/admin.less +++ /dev/null @@ -1,10 +0,0 @@ - -.admin-settings-section { - color: @variable; - font-weight: bold; -} - -td.admin-settings-key { - padding-left: 20px; -} - diff --git a/public/less/pages/alerting.less b/public/less/pages/alerting.less deleted file mode 100644 index 9054584e23e..00000000000 --- a/public/less/pages/alerting.less +++ /dev/null @@ -1,42 +0,0 @@ -.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; -} diff --git a/public/less/pages/apps.less b/public/less/pages/apps.less deleted file mode 100644 index de8ad65b83c..00000000000 --- a/public/less/pages/apps.less +++ /dev/null @@ -1,26 +0,0 @@ - -.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; -} diff --git a/public/less/pages/login.less b/public/less/pages/login.less deleted file mode 100644 index 4c38d6221c4..00000000000 --- a/public/less/pages/login.less +++ /dev/null @@ -1,169 +0,0 @@ - -.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; - } -} diff --git a/public/less/pages/playlist.less b/public/less/pages/playlist.less deleted file mode 100644 index 16e3ebaaafa..00000000000 --- a/public/less/pages/playlist.less +++ /dev/null @@ -1,93 +0,0 @@ -.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; - } -} diff --git a/public/less/pages/signup.less b/public/less/pages/signup.less deleted file mode 100644 index 7b2b0b0e84a..00000000000 --- a/public/less/pages/signup.less +++ /dev/null @@ -1,17 +0,0 @@ -.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; - } -} - diff --git a/public/less/utils/angular.less b/public/less/utils/angular.less deleted file mode 100644 index 1519b249920..00000000000 --- a/public/less/utils/angular.less +++ /dev/null @@ -1,7 +0,0 @@ - - -[ng\:cloak], [ng-cloak], .ng-cloak { - display: none !important; -} - - diff --git a/public/less/utils/utils.less b/public/less/utils/utils.less deleted file mode 100644 index d493bbdebdf..00000000000 --- a/public/less/utils/utils.less +++ /dev/null @@ -1,64 +0,0 @@ -.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); - .opacity(20); - &:hover, - &:focus { - color: @black; - text-decoration: none; - cursor: pointer; - .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; -} diff --git a/public/less/utils/validation.less b/public/less/utils/validation.less deleted file mode 100644 index cdc9e45ac4c..00000000000 --- a/public/less/utils/validation.less +++ /dev/null @@ -1,7 +0,0 @@ -input[type=text].ng-dirty.ng-invalid { - box-shadow: inset 0 0px 7px @red; -} - -form input.ng-invalid { - color: @errorText; -} diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less deleted file mode 100644 index 9303f017496..00000000000 --- a/public/less/variables.dark.less +++ /dev/null @@ -1,342 +0,0 @@ -// 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); diff --git a/public/less/variables.dark.scss b/public/less/variables.dark.scss index 7237b386e7f..4268b6147f0 100644 --- a/public/less/variables.dark.scss +++ b/public/less/variables.dark.scss @@ -155,6 +155,11 @@ $iconContainerBackgroundHighlight: lighten($black, 5%); $iconContainerBorder: 1px solid transparent; $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); +// Hero unit +// ------------------------- +$heroUnitBackground: $grayDark; +$heroUnitHeadingColor: inherit; +$heroUnitLeadColor: inherit; // Forms // ------------------------- @@ -167,13 +172,6 @@ $inputHeight: $baseLineHeight + 10px; // base line-height + 8p $labelBackground: $grayDark; -// Sidemenu -// ------------------------- -$sideMenuTopShadow: $navbarDropdownShadow; -$sideMenuBackground: $grayDark; -$sideMenuBackgroundHighlight: lighten($grayDark, 4%); -$sideMenuShadow: 0 0 35px 0 $bodyBackground; - // Search $searchShadow: 0 0 35px 0 $bodyBackground; @@ -194,7 +192,6 @@ $dropdownLinkBackgroundActive: $blueDark; $dropdownLinkBackgroundHover: $blueDark; - // COMPONENT VARIABLES // -------------------------------------------------- @@ -210,13 +207,6 @@ $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%); @@ -235,12 +225,6 @@ $horizontalComponentOffset: 180px; // ------------------------- $wellBackground: #131517; - -// Navbar -// ------------------------- -$navbarCollapseWidth: 979px; -$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; - $navbarHeight: 52px; $navbarBackgroundHighlight: $grayDark; $navbarBackground: $grayDark; @@ -258,20 +242,19 @@ $navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); +// Sidemenu +// ------------------------- +$sideMenuTopShadow: $navbarDropdownShadow; +$sideMenuBackground: $grayDark; +$sideMenuBackgroundHighlight: lighten($grayDark, 4%); +$sideMenuShadow: 0 0 35px 0 $bodyBackground; + // Pagination // ------------------------- $paginationBackground: $bodyBackground; $paginationBorder: transparent; $paginationActiveBackground: $blue; - -// Hero unit -// ------------------------- -$heroUnitBackground: $grayDark; -$heroUnitHeadingColor: inherit; -$heroUnitLeadColor: inherit; - - // Form states and alerts // ------------------------- $warningText: darken(#c09853, 10%); diff --git a/public/less/variables.light.less b/public/less/variables.light.less deleted file mode 100644 index 29236f734a9..00000000000 --- a/public/less/variables.light.less +++ /dev/null @@ -1,359 +0,0 @@ -// 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); diff --git a/public/less/variables.light.scss b/public/less/variables.light.scss index 5cc0908e42e..5e83dc65672 100644 --- a/public/less/variables.light.scss +++ b/public/less/variables.light.scss @@ -43,13 +43,16 @@ $grafanaPanelBackground: $grayLighter; $grafanaPanelBorder: solid 1px #ddd; $grafanaTriggerBorder: solid 1px $grayLight; +// Scaffolding +// ------------------------- +$bodyBackground: #EFEFEF; +$pageBackground: $white; +$textColor: $gray; + // Submenu $submenuBackground: rgb(218, 217, 217); $submenuBorder: $white; -// Tabs -$fullEditBorder: $grayLighter; - // Graphite Target Editor $grafanaTargetBorder: #ddd; $grafanaTargetBackground: #efefef; @@ -65,12 +68,6 @@ $grafanaSelectBackground: $grafanaTargetFuncBackground; $modalBackground: $bodyBackground; $codeTagBackground: #ddd; -// Scaffolding -// ------------------------- -$bodyBackground: #EFEFEF; -$pageBackground: $white; -$textColor: $gray; - // Links // ------------------------- $linkColor: $gray; @@ -221,12 +218,6 @@ $zindexModalBackdrop: 1040; $zindexModal: 1050; -// Sprite icons path -// ------------------------- -$iconSpritePath: "../img/glyphicons-halflings.png"; -$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; - - // Input placeholder text color // ------------------------- $placeholderText: $grayLight; @@ -249,8 +240,6 @@ $wellBackground: $grayLighter; // Navbar // ------------------------- -$navbarCollapseWidth: 979px; -$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; $navbarHeight: 52px; $navbarBackgroundHighlight: #f8f8f8; diff --git a/tasks/options/sass.js b/tasks/options/sass.js index 38e72f28a98..3218e99e078 100644 --- a/tasks/options/sass.js +++ b/tasks/options/sass.js @@ -4,8 +4,8 @@ module.exports = function(config) { src:{ options: {}, files: { - "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss", - "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss", + "<%= genDir %>/css/grafana.dark.min.css": "<%= srcDir %>/less/grafana.dark.scss", + "<%= genDir %>/css/grafana.light.min.css": "<%= srcDir %>/less/grafana.light.scss", } } };