From f8e233e4007b0c0940b164593bb18795ef887258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 15:27:41 +0100 Subject: [PATCH] commit(): saas changs --- package.json | 3 +- public/less/base/base.scss | 28 ++ public/less/base/code.scss | 52 +++ public/less/base/fonts.scss | 168 +++++++ public/less/base/forms.scss | 290 ++++++++++++ public/less/base/normalize.scss | 425 ++++++++++++++++++ public/less/base/type.less | 14 - public/less/base/type.scss | 257 +++++++++++ public/less/bootstrap/grid.scss | 21 + .../less/bootstrap/responsive-1200px-min.scss | 28 ++ .../less/bootstrap/responsive-767px-max.scss | 161 +++++++ .../bootstrap/responsive-768px-979px.scss | 19 + .../less/bootstrap/responsive-utilities.scss | 59 +++ public/less/bootstrap/responsive.scss | 27 ++ public/less/components/alerts.scss | 68 +++ public/less/components/buttons.scss | 102 +++++ public/less/components/color_picker.scss | 37 ++ public/less/components/dashboard.scss | 285 ++++++++++++ public/less/components/dropdown.scss | 236 ++++++++++ public/less/components/filter-controls.scss | 37 ++ public/less/components/filter-list.scss | 142 ++++++ public/less/components/filter-table.scss | 57 +++ public/less/components/footer.scss | 9 + public/less/components/gf-form.scss | 71 +++ public/less/components/gfbox.scss | 69 +++ public/less/components/infobox.scss | 20 + public/less/components/modals.scss | 149 ++++++ public/less/components/navbar.scss | 178 ++++++++ public/less/components/navs.scss | 200 +++++++++ public/less/components/old_stuff.scss | 20 + public/less/components/pagination.scss | 113 +++++ public/less/components/panel_dashlist.scss | 22 + public/less/components/panel_graph.scss | 298 ++++++++++++ public/less/components/panel_singlestat.scss | 51 +++ public/less/components/panel_table.scss | 101 +++++ public/less/components/popovers.scss | 128 ++++++ public/less/components/query_editor.scss | 16 + public/less/components/scrollbar.scss | 41 ++ public/less/components/search.scss | 107 +++++ public/less/components/shortcuts.scss | 6 + public/less/components/sidemenu.scss | 220 +++++++++ public/less/components/submenu.scss | 133 ++++++ public/less/components/tables_lists.scss | 43 ++ public/less/components/tabs.scss | 40 ++ public/less/components/tags.scss | 39 ++ public/less/components/tagsinput.scss | 39 ++ public/less/components/tightform.scss | 236 ++++++++++ public/less/components/timepicker.scss | 107 +++++ public/less/components/tooltip.scss | 102 +++++ public/less/components/typeahead.scss | 11 + public/less/grafana-responsive.scss | 127 ++++++ public/less/grafana.dark.scss | 2 + public/less/grafana.less | 2 +- public/less/grafana.light.scss | 2 + public/less/grafana.scss | 69 +++ public/less/layout/page.scss | 71 +++ public/less/mixins/buttons.scss | 18 + public/less/mixins/mixins.scss | 334 ++++++++++++++ public/less/pages/admin.scss | 10 + public/less/pages/alerting.scss | 42 ++ public/less/pages/apps.scss | 26 ++ public/less/pages/login.scss | 169 +++++++ public/less/pages/playlist.scss | 93 ++++ public/less/pages/signup.scss | 17 + public/less/utils/angular.scss | 7 + public/less/utils/utils.scss | 64 +++ public/less/utils/validation.scss | 7 + public/less/variables.dark.scss | 342 ++++++++++++++ public/less/variables.light.scss | 359 +++++++++++++++ tasks/options/concat.js | 2 - tasks/options/sass.js | 12 + tasks/options/watch.js | 4 +- 72 files changed, 6844 insertions(+), 20 deletions(-) create mode 100644 public/less/base/base.scss create mode 100644 public/less/base/code.scss create mode 100644 public/less/base/fonts.scss create mode 100644 public/less/base/forms.scss create mode 100644 public/less/base/normalize.scss create mode 100644 public/less/base/type.scss create mode 100644 public/less/bootstrap/grid.scss create mode 100644 public/less/bootstrap/responsive-1200px-min.scss create mode 100644 public/less/bootstrap/responsive-767px-max.scss create mode 100644 public/less/bootstrap/responsive-768px-979px.scss create mode 100644 public/less/bootstrap/responsive-utilities.scss create mode 100644 public/less/bootstrap/responsive.scss create mode 100644 public/less/components/alerts.scss create mode 100644 public/less/components/buttons.scss create mode 100644 public/less/components/color_picker.scss create mode 100644 public/less/components/dashboard.scss create mode 100644 public/less/components/dropdown.scss create mode 100644 public/less/components/filter-controls.scss create mode 100644 public/less/components/filter-list.scss create mode 100644 public/less/components/filter-table.scss create mode 100644 public/less/components/footer.scss create mode 100644 public/less/components/gf-form.scss create mode 100644 public/less/components/gfbox.scss create mode 100644 public/less/components/infobox.scss create mode 100644 public/less/components/modals.scss create mode 100644 public/less/components/navbar.scss create mode 100644 public/less/components/navs.scss create mode 100644 public/less/components/old_stuff.scss create mode 100644 public/less/components/pagination.scss create mode 100644 public/less/components/panel_dashlist.scss create mode 100644 public/less/components/panel_graph.scss create mode 100644 public/less/components/panel_singlestat.scss create mode 100644 public/less/components/panel_table.scss create mode 100644 public/less/components/popovers.scss create mode 100644 public/less/components/query_editor.scss create mode 100644 public/less/components/scrollbar.scss create mode 100644 public/less/components/search.scss create mode 100644 public/less/components/shortcuts.scss create mode 100644 public/less/components/sidemenu.scss create mode 100644 public/less/components/submenu.scss create mode 100644 public/less/components/tables_lists.scss create mode 100644 public/less/components/tabs.scss create mode 100644 public/less/components/tags.scss create mode 100644 public/less/components/tagsinput.scss create mode 100644 public/less/components/tightform.scss create mode 100644 public/less/components/timepicker.scss create mode 100644 public/less/components/tooltip.scss create mode 100644 public/less/components/typeahead.scss create mode 100644 public/less/grafana-responsive.scss create mode 100644 public/less/grafana.dark.scss create mode 100644 public/less/grafana.light.scss create mode 100644 public/less/grafana.scss create mode 100644 public/less/layout/page.scss create mode 100644 public/less/mixins/buttons.scss create mode 100644 public/less/mixins/mixins.scss create mode 100644 public/less/pages/admin.scss create mode 100644 public/less/pages/alerting.scss create mode 100644 public/less/pages/apps.scss create mode 100644 public/less/pages/login.scss create mode 100644 public/less/pages/playlist.scss create mode 100644 public/less/pages/signup.scss create mode 100644 public/less/utils/angular.scss create mode 100644 public/less/utils/utils.scss create mode 100644 public/less/utils/validation.scss create mode 100644 public/less/variables.dark.scss create mode 100644 public/less/variables.light.scss create mode 100644 tasks/options/sass.js diff --git a/package.json b/package.json index 11152664083..0c31f9e2616 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,8 @@ "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "systemjs": "0.19.20", - "zone.js": "0.5.10" + "zone.js": "0.5.10", + "grunt-sass": "^1.1.0" }, "engines": { "node": "0.4.x", diff --git a/public/less/base/base.scss b/public/less/base/base.scss new file mode 100644 index 00000000000..1556ee1d534 --- /dev/null +++ b/public/less/base/base.scss @@ -0,0 +1,28 @@ +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + font-family: $baseFontFamily; + font-size: $baseFontSize; + line-height: $baseLineHeight; + color: $textColor; + background-color: $bodyBackground; +} + + +// Links +// ------------------------- + +a { + color: $linkColor; + text-decoration: none; +} + +a:hover, +a:focus { + color: $linkColorHover; +} + diff --git a/public/less/base/code.scss b/public/less/base/code.scss new file mode 100644 index 00000000000..c345da0db5d --- /dev/null +++ b/public/less/base/code.scss @@ -0,0 +1,52 @@ +// +// Code (inline and blocK) +// -------------------------------------------------- + + +// Inline and block code styles +code, +pre { + @include font-family-monospace(); + font-size: $baseFontSize - 2; + background-color: $codeTagBackground; + color: $textColor; + border: 1px solid darken($codeTagBackground, 15%); + padding: 2px; +} + +// Inline code +code { + color: #d14; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; + white-space: nowrap; +} + +// Blocks of code +pre { + display: block; + margin: 0 0 $baseLineHeight / 2; + font-size: $baseFontSize - 1; // 14px to 13px + line-height: $baseLineHeight; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + + // Make prettyprint styles more spaced out for readability + &.prettyprint { + margin-bottom: $baseLineHeight; + } + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; + } +} + diff --git a/public/less/base/fonts.scss b/public/less/base/fonts.scss new file mode 100644 index 00000000000..61ff672465b --- /dev/null +++ b/public/less/base/fonts.scss @@ -0,0 +1,168 @@ +@font-face { + font-family: 'grafana-icons'; + src: url('../fonts/grafana-icons.eot?h6rv8b'); + src: url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'), + url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'), + url('../fonts/grafana-icons.woff?h6rv8b') format('woff'), + url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +.icon-gf { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'grafana-icons' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-gf-raintank_wordmark:before { + content: "\e600"; +} +.icon-gf-raintank_icn:before { + content: "\e601"; +} +.icon-gf-raintank_r-icn:before { + content: "\e905"; +} +.icon-gf-check-alt:before { + content: "\e603"; +} +.icon-gf-check:before { + content: "\e604"; +} +.icon-gf-collector:before { + content: "\e605"; +} +.icon-gf-dashboard:before { + content: "\e606"; +} +.icon-gf-panel:before { + content: "\e904"; +} +.icon-gf-datasources:before { + content: "\e607"; +} +.icon-gf-endpoint-tiny:before { + content: "\e608"; +} +.icon-gf-endpoint:before { + content: "\e609"; +} +.icon-gf-filter:before { + content: "\e60a"; +} +.icon-gf-status:before { + content: "\e60b"; +} +.icon-gf-monitoring:before { + content: "\e60c"; +} +.icon-gf-monitoring-tiny:before { + content: "\e620"; +} +.icon-gf-jump-to-dashboard:before { + content: "\e60d"; +} +.icon-gf-warn:before { + content: "\e60e"; +} +.icon-gf-nodata:before { + content: "\e60f"; +} +.icon-gf-critical:before { + content: "\e610"; +} +.icon-gf-online:before { + content: "\e611"; +} +.icon-gf-event-error:before { + content: "\e623"; +} +.icon-gf-event:before { + content: "\e624"; +} +.icon-gf-private-collector:before { + content: "\e612"; +} +.icon-gf-alert:before { + content: "\e61f"; +} +.icon-gf-alert-disabled:before { + content: "\e621"; +} +.icon-gf-refresh:before { + content: "\e613"; +} +.icon-gf-save:before { + content: "\e614"; +} +.icon-gf-settings:before { + content: "\e615"; +} +.icon-gf-share:before { + content: "\e616"; +} +.icon-gf-star:before { + content: "\e617"; +} +.icon-gf-search:before { + content: "\e618"; +} +.icon-gf-tag-add:before { + content: "\e619"; +} +.icon-gf-tag-remove:before { + content: "\e61a"; +} +.icon-gf-video:before { + content: "\e61b"; +} +.icon-gf-bulk_action:before { + content: "\e61c"; +} +.icon-gf-users:before { + content: "\e622"; +} +.icon-gf-globe:before { + content: "\e61d"; +} +.icon-gf-snapshot:before { + content: "\e61e"; +} +.icon-gf-play-grafana-icon:before { + content: "\e629"; +} +.icon-gf-grafana-icon:before { + content: "\e625"; +} +.icon-gf-email:before { + content: "\e628"; +} +.icon-gf-stopwatch:before { + content: "\e626"; +} +.icon-gf-skull:before { + content: "\e900"; +} +.icon-gf-probe:before { + content: "\e901"; +} +.icon-gf-apps:before { + content: "\e902"; +} +.icon-gf-litmus:before { + content: "\e627"; +} +.icon-gf-grafana_wordmark:before { + content: "\e903"; +} + diff --git a/public/less/base/forms.scss b/public/less/base/forms.scss new file mode 100644 index 00000000000..644c77980b2 --- /dev/null +++ b/public/less/base/forms.scss @@ -0,0 +1,290 @@ +// +// Forms +// -------------------------------------------------- + + +// GENERAL STYLES +// -------------- + +// Make all forms have space below them +form { + margin: 0 0 $baseLineHeight; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +// Groups of fields with labels on top (legends) +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: $baseLineHeight; + font-size: $baseFontSize * 1.5; + line-height: $baseLineHeight * 2; + color: $grayDark; + border: 0; + border-bottom: 1px solid #e5e5e5; + + // Small + small { + font-size: $baseLineHeight * .75; + color: $grayLight; + } +} + +// Set font for forms +label, +input, +button, +select, +textarea { + @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here +} +input, +button, +select, +textarea { + font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element) +} + +// Identify controls by their labels +label { + display: block; + margin-bottom: 5px; +} + +// Form controls +// ------------------------- + +// Shared size and type resets +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + display: inline-block; + height: $baseLineHeight; + padding: 4px 6px; + font-size: $baseFontSize; + line-height: $baseLineHeight; + color: $inputText; + vertical-align: top; +} + +// Reset appearance properties for textual inputs and textarea +// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) +input, +textarea, +.uneditable-input { + width: 206px; // plus 12px padding and 2px border +} +// Reset height since textareas have rows +textarea { + height: auto; +} + +// Everything else +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: $inputBackground; + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @include transition("border linear .2s, box-shadow linear .2s"); + + // Focus state + &:focus { + border-color: rgba(82,168,236, .8); + outline: 0; + @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + line-height: normal; +} + +// Reset width of input images, buttons, radios, checkboxes +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector +} + +// Set the height of select and file controls to match text inputs +select, +input[type="file"] { + height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + line-height: $inputHeight; +} + +// Make select elements obey height by applying a border +select { + width: 220px; // default input width + 10px of padding that doesn't get applied + border: 1px solid $inputBorder; + background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Focus for select, file, radio, and checkbox +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + @include tab-focus(); +} + +// Placeholder +// ------------------------- + +// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector +input, +textarea { + @include placeholder(); +} + + +// INPUT SIZES +// ----------- + +// General classes for quick sizes +.input-mini { width: 60px; } +.input-small { width: 90px; } +.input-medium { width: 150px; } +.input-large { width: 210px; } +.input-xlarge { width: 270px; } +.input-xxlarge { width: 530px; } + +// GRID SIZING FOR INPUTS +// ---------------------- + +// DISABLED STATE +// -------------- + +// Disabled and read-only inputs +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: $inputDisabledBackground; +} + +// Explicitly reset the colors here +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + + +// HTML5 invalid states +// Shares styles with the .control-group.error above +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { + color: #b94a48; + border-color: #ee5f5b; + &:focus { + border-color: darken(#ee5f5b, 10%); + $shadow: 0 0 6px lighten(#ee5f5b, 20%); + @include box-shadow($shadow); + } +} + +input[type=text].input-fluid { + width: 100%; + box-sizing: border-box; + padding: 10px; + font-size: 16px; + -moz-box-sizing: border-box; + height: 100%; +} + +input[type="checkbox"].cr1 { + display: none; +} + +.editor-option label.cr1 { + display: inline-block; + margin: 5px 0 1px 0; +} + +label.cr1 { + display: inline-block; + height: 19px; + position: relative; + clear: none; + text-indent: 2px; + margin: 0 0 0px 0; + padding: 0 0 0 20px; + vertical-align: top; + background: url($checkboxImageUrl) left top no-repeat; + cursor:pointer; +} + +input[type="checkbox"]:checked+label { + background: url($checkboxImageUrl) 0px -21px no-repeat; +} + +.gf-fluid-input { + border: none; + display: block; + overflow: hidden; + padding-right: 10px; + input[type=text] { + width: 100%; + padding: 5px 6px; + height: 100%; + box-sizing: border-box; + } + textarea { + width: 100%; + padding: 5px 6px; + height: 100%; + box-sizing: border-box; + } +} diff --git a/public/less/base/normalize.scss b/public/less/base/normalize.scss new file mode 100644 index 00000000000..93dd4521727 --- /dev/null +++ b/public/less/base/normalize.scss @@ -0,0 +1,425 @@ +/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS and IE text size adjust after device orientation change, +// without disabling user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 +// and Firefox. +// Correct `block` display not defined for `main` in IE 11. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} + +// +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// + +audio, +canvas, +progress, +video { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. +// + +[hidden], +template { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background color from active links in IE 10. +// + +a { + background-color: transparent; +} + +// +// Improve readability of focused elements when they are also in an +// active/hover state. +// + +a { + &:active { + outline: 0; + } + &:hover { + outline: 0; + } +} + +// Text-level semantics +// ========================================================================== + +// +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + background: #ff0; + color: #000; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9/10. +// + +img { + border: 0; +} + +// +// Correct overflow not hidden in IE 9/10/11. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari. +// + +figure { + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + box-sizing: content-box; + height: 0; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + +// +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// + +button, +input, +optgroup, +select, +textarea { + color: inherit; // 1 + font: inherit; // 2 + margin: 0; // 3 +} + +// +// Address `overflow` set to `hidden` in IE 8/9/10/11. +// + +button { + overflow: visible; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// Address `appearance` set to `searchfield` in Safari and Chrome. +// + +input[type="search"] { + -webkit-appearance: textfield; +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9/10/11. +// + +textarea { + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; +} + +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/public/less/base/type.less b/public/less/base/type.less index d00b10fb5d3..f75e52d0f90 100644 --- a/public/less/base/type.less +++ b/public/less/base/type.less @@ -141,20 +141,6 @@ dt { dd { margin-left: @baseLineHeight / 2; } -// Horizontal layout (like forms) -.dl-horizontal { - .clearfix(); // Ensure dl clears floats if empty dd elements present - dt { - float: left; - width: @horizontalComponentOffset - 20; - clear: left; - text-align: right; - .text-overflow(); - } - dd { - margin-left: @horizontalComponentOffset; - } -} // MISC // ---- diff --git a/public/less/base/type.scss b/public/less/base/type.scss new file mode 100644 index 00000000000..f834bbf5ca6 --- /dev/null +++ b/public/less/base/type.scss @@ -0,0 +1,257 @@ +// +// Typography +// -------------------------------------------------- + + +// Body text +// ------------------------- + +p { + margin: 0 0 $baseLineHeight / 2; +} +.lead { + margin-bottom: $baseLineHeight; + font-size: $baseFontSize * 1.5; + font-weight: 200; + line-height: $baseLineHeight * 1.5; +} + +// Emphasis & misc + +// ------------------------- + +// Ex: 14px base font * 85% = about 12px +.small, small { font-size: 85%; } +.large { font-size: 120%; } + +strong { font-weight: bold; } +em { font-style: italic; color: $headingsColor; } +cite { font-style: normal; } + +// Utility classes +.muted { color: $grayLight; } +a.muted:hover, +a.muted:focus { color: darken($grayLight, 10%); } + +.text-warning { color: $warningText; } +a.text-warning:hover, +a.text-warning:focus { color: darken($warningText, 10%); } + +.text-error { color: $errorText; } +a.text-error:hover, +a.text-error:focus { color: darken($errorText, 10%); } + +.text-info { color: $infoText; } +a.text-info:hover, +a.text-info:focus { color: darken($infoText, 10%); } + +.text-success { color: $successText; } +a.text-success:hover, +a.text-success:focus { color: darken($successText, 10%); } +a { cursor: pointer; } + +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } + + +// Headings +// ------------------------- + +h1, h2, h3, h4, h5, h6 { + margin: ($baseLineHeight / 2) 0; + font-family: $headingsFontFamily; + font-weight: $headingsFontWeight; + line-height: $baseLineHeight; + color: $headingsColor; + text-rendering: optimizelegibility; // Fix the character spacing for headings + font-style: $headingsFontStyle; + small { + font-weight: normal; + line-height: 1; + color: $grayLight; + } +} + +h1, +h2, +h3 { line-height: $baseLineHeight * 2; } + +h1 { font-size: $baseFontSize * 2.00; } // ~38px +h2 { font-size: $baseFontSize * 1.75; } // ~32px +h3 { font-size: $baseFontSize * 1.50; } // ~24px +h4 { font-size: $baseFontSize * 1.25; } // ~18px +h5 { font-size: $baseFontSize; } +h6 { font-size: $baseFontSize * 0.85; } // ~12px + +h1 small { font-size: $baseFontSize * 1.75; } // ~24px +h2 small { font-size: $baseFontSize * 1.25; } // ~18px +h3 small { font-size: $baseFontSize; } +h4 small { font-size: $baseFontSize; } + + +// Lists +// -------------------------------------------------- + +// Unordered and Ordered lists +ul, ol { + padding: 0; + margin: 0 0 $baseLineHeight / 2 25px; +} +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} +li { + line-height: $baseLineHeight; +} + +// Remove default list styles +ul.unstyled, +ol.unstyled { + margin-left: 0; + list-style: none; +} + +// Single-line list items +ul.inline, +ol.inline { + margin-left: 0; + list-style: none; + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + +// Description Lists +dl { + margin-bottom: $baseLineHeight; +} +dt, +dd { + line-height: $baseLineHeight; +} +dt { + font-weight: bold; +} +dd { + margin-left: $baseLineHeight / 2; +} +// Horizontal layout (like forms) +.dl-horizontal { + @include clearfix(); + dt { + float: left; + width: $horizontalComponentOffset - 20; + clear: left; + text-align: right; + @include text-overflow(); + } + dd { + margin-left: $horizontalComponentOffset; + } +} + +// MISC +// ---- + +// Horizontal rules +hr { + margin: $baseLineHeight 0; + border: 0; + border-top: 1px solid $hrBorder; + border-bottom: 1px solid $white; +} + +// Abbreviations and acronyms +abbr[title], +// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted $grayLight; +} +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +// Blockquotes +blockquote { + padding: 0 0 0 15px; + margin: 0 0 $baseLineHeight; + border-left: 5px solid $grayLighter; + p { + margin-bottom: 0; + font-size: $baseFontSize * 1.25; + font-weight: 300; + line-height: 1.25; + } + small { + display: block; + line-height: $baseLineHeight; + color: $grayLight; + &:before { + content: '\2014 \00A0'; + } + } + + // Float right with text-align: right + &.pull-right { + float: right; + padding-right: 15px; + padding-left: 0; + border-right: 5px solid $grayLighter; + border-left: 0; + p, + small { + text-align: right; + } + small { + &:before { + content: ''; + } + &:after { + content: '\00A0 \2014'; + } + } + } +} + +// Quotes +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +// Addresses +address { + display: block; + margin-bottom: $baseLineHeight; + font-style: normal; + line-height: $baseLineHeight; +} + +a.external-link { + color: $blue; + text-decoration: underline; +} + + +.link { + color: $linkColor; + cursor: pointer; +} + +.link:hover { + color: $linkColorHover; +} + +.pointer { + cursor: pointer; +} diff --git a/public/less/bootstrap/grid.scss b/public/less/bootstrap/grid.scss new file mode 100644 index 00000000000..15b89a8703e --- /dev/null +++ b/public/less/bootstrap/grid.scss @@ -0,0 +1,21 @@ +// +// Grid system +// -------------------------------------------------- + + +// Fixed (940px) +#grid > .core($gridColumnWidth, $gridGutterWidth); + +// Fluid (940px) +#grid > .fluid($fluidGridColumnWidth, $fluidGridGutterWidth); + +// Reset utility classes due to specificity +[class*="span"].hide, +.row-fluid [class*="span"].hide { + display: none; +} + +[class*="span"].pull-right, +.row-fluid [class*="span"].pull-right { + float: right; +} diff --git a/public/less/bootstrap/responsive-1200px-min.scss b/public/less/bootstrap/responsive-1200px-min.scss new file mode 100644 index 00000000000..8b85385d84f --- /dev/null +++ b/public/less/bootstrap/responsive-1200px-min.scss @@ -0,0 +1,28 @@ +// +// Responsive: Large desktop and up +// -------------------------------------------------- + + +@media (min-width: 1200px) { + + // Fixed grid + #grid > .core($gridColumnWidth1200, $gridGutterWidth1200); + + // Fluid grid + #grid > .fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200); + + // Input grid + #grid > .input($gridColumnWidth1200, $gridGutterWidth1200); + + // Thumbnails + .thumbnails { + margin-left: -$gridGutterWidth1200; + } + .thumbnails > li { + margin-left: $gridGutterWidth1200; + } + .row-fluid .thumbnails { + margin-left: 0; + } + +} diff --git a/public/less/bootstrap/responsive-767px-max.scss b/public/less/bootstrap/responsive-767px-max.scss new file mode 100644 index 00000000000..5c01855cbc2 --- /dev/null +++ b/public/less/bootstrap/responsive-767px-max.scss @@ -0,0 +1,161 @@ +// +// Responsive: Landscape phone to desktop/tablet +// -------------------------------------------------- + + +@media (max-width: 767px) { + + // GRID & CONTAINERS + // ----------------- + // Remove width from containers + .container { + width: auto; + } + // Fluid rows + .row-fluid { + width: 100%; + } + // Undo negative margin on rows and thumbnails + .row, + .thumbnails { + margin-left: 0; + } + .thumbnails > li { + float: none; + margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present + } + // Make all grid-sized elements block level again + [class*="span"], + .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing + .row-fluid [class*="span"] { + float: none; + display: block; + width: 100%; + margin-left: 0; + @include box-sizing(border-box); + } + .span12, + .row-fluid .span12 { + width: 100%; + @include box-sizing(border-box); + } + .row-fluid [class*="offset"]:first-child { + margin-left: 0; + } + + // FORM FIELDS + // ----------- + // Make span* classes full width + .input-large, + .input-xlarge, + .input-xxlarge, + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + @mixin input-block-level(); + } + // But don't let it screw up prepend/append inputs + .input-prepend input, + .input-append input, + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + display: inline-block; // redeclare so they don't wrap to new lines + width: auto; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 0; + } + + // Modals + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + margin: 0; + &.fade { top: -100px; } + &.fade.in { top: 20px; } + } + +} + + + +// UP TO LANDSCAPE PHONE +// --------------------- + +@media (max-width: 480px) { + + // Smooth out the collapsing/expanding nav + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); // activate the GPU + } + + // Block level the page header small tag for readability + .page-header h1 small { + display: block; + line-height: $baseLineHeight; + } + + // Update checkboxes for iOS + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + + // Remove the horizontal form styles + .form-horizontal { + .control-label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + // Move over all input controls and content + .controls { + margin-left: 0; + } + // Move the options list down to align with labels + .control-list { + padding-top: 0; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-actions { + padding-left: 10px; + padding-right: 10px; + } + } + + // Medias + // Reset float and spacing to stack + .media .pull-left, + .media .pull-right { + float: none; + display: block; + margin-bottom: 10px; + } + // Remove side margins since we stack instead of indent + .media-object { + margin-right: 0; + margin-left: 0; + } + + // Modals + .modal { + top: 10px; + left: 10px; + right: 10px; + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + + // Carousel + .carousel-caption { + position: static; + } + +} diff --git a/public/less/bootstrap/responsive-768px-979px.scss b/public/less/bootstrap/responsive-768px-979px.scss new file mode 100644 index 00000000000..cef846699c3 --- /dev/null +++ b/public/less/bootstrap/responsive-768px-979px.scss @@ -0,0 +1,19 @@ +// +// Responsive: Tablet to desktop +// -------------------------------------------------- + + +@media (min-width: 768px) and (max-width: 979px) { + + // Fixed grid + #grid > .core($gridColumnWidth768, $gridGutterWidth768); + + // Fluid grid + #grid > .fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768); + + // Input grid + #grid > .input($gridColumnWidth768, $gridGutterWidth768); + + // No need to reset .thumbnails here since it's the same $gridGutterWidth + +} diff --git a/public/less/bootstrap/responsive-utilities.scss b/public/less/bootstrap/responsive-utilities.scss new file mode 100644 index 00000000000..eca42571a89 --- /dev/null +++ b/public/less/bootstrap/responsive-utilities.scss @@ -0,0 +1,59 @@ +// +// Responsive: Utility classes +// -------------------------------------------------- + + +// IE10 Metro responsive +// Required for Windows 8 Metro split-screen snapping with IE10 +// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ +$-ms-viewport{ + width: device-width; +} + +// Hide from screenreaders and browsers +// Credit: HTML5 Boilerplate +.hidden { + display: none; + visibility: hidden; +} + +// Visibility utilities + +// For desktops +.visible-phone { display: none !important; } +.visible-tablet { display: none !important; } +.hidden-phone { } +.hidden-tablet { } +.hidden-desktop { display: none !important; } +.visible-desktop { display: inherit !important; } + +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } + // Show + .visible-tablet { display: inherit !important; } + // Hide + .hidden-tablet { display: none !important; } +} + +// Phones only +@media (max-width: 767px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } + // Show + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + // Hide + .hidden-phone { display: none !important; } +} + +// Print utilities +.visible-print { display: none !important; } +.hidden-print { } + +@media print { + .visible-print { display: inherit !important; } + .hidden-print { display: none !important; } +} diff --git a/public/less/bootstrap/responsive.scss b/public/less/bootstrap/responsive.scss new file mode 100644 index 00000000000..8f4888f23d5 --- /dev/null +++ b/public/less/bootstrap/responsive.scss @@ -0,0 +1,27 @@ +/*! + * Bootstrap Responsive v2.3.2 + * + * Copyright 2013 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world by $mdo and $fat. + */ + + +// Responsive.scss +// For phone and tablet devices +// ------------------------------------------------------------- + + +// REPEAT VARIABLES & MIXINS +// ------------------------- +// Required since we compile the responsive stuff separately + +@import "../mixins/mixins.scss"; +@import "responsive-utilities.scss"; +@import "responsive-1200px-min.scss"; +@import "responsive-768px-979px.scss"; +@import "responsive-767px-max.scss"; + + diff --git a/public/less/components/alerts.scss b/public/less/components/alerts.scss new file mode 100644 index 00000000000..b6a79ae8a53 --- /dev/null +++ b/public/less/components/alerts.scss @@ -0,0 +1,68 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: 8px 35px 13px 14px; + margin-bottom: $baseLineHeight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + background-color: $warningBackground; + position: relative; + color: $white; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + border-radius: 2px; +} + +// Alternate styles +// ------------------------- + +.alert-success { + background-color: $successBackground; +} + +.alert-danger, +.alert-error { + background-color: $errorBackground; +} +.alert-info { + background-color: $infoBackground; +} +.alert-warning { + background-color: $warningBackground; +} + +.page-alert-list { + z-index: 8000; + min-width: 300px; + max-width: 300px; + position: fixed; + right: 20px; + top: 56px; +} + +.alert-close { + position: absolute; + top: -4px; + right: -2px; + width: 18px; + height: 18px; + padding: 0; + background: $white; + border-radius: 50%; + border: none; + font-size: 1.1rem; + color: $grayDarker; + .fa { + position: relative; + top: -2px; + } +} + +.alert-title { + font-weight: $fontWeightSemi; + padding-bottom: 2px; +} diff --git a/public/less/components/buttons.scss b/public/less/components/buttons.scss new file mode 100644 index 00000000000..b6a0b986b37 --- /dev/null +++ b/public/less/components/buttons.scss @@ -0,0 +1,102 @@ +// +// Buttons +// -------------------------------------------------- + +// Base styles +// -------------------------------------------------- + +// Core +.btn { + display: inline-block; + padding: 8px 12px; + margin-right: 10px; + font-size: $baseFontSize; + line-height: $baseLineHeight; + text-align: center; + vertical-align: middle; + cursor: pointer; + border: none; + + @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75)); + @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); + + // Hover/focus state + &:hover, + &:focus { + text-decoration: none; + } + + // Focus state for keyboard and accessibility + &:focus { + @include tab-focus(); + } + + // Active state + &.active, + &:active { + background-image: none; + } + + // Disabled state + &.disabled, + &[disabled] { + cursor: default; + background-image: none; + @include opacity(65); + } +} + +// Button Sizes +// -------------------------------------------------- + +// Large +.btn-large { + padding: 6px 20px; + font-size: $fontSizeLarge; +} + +.btn-small { + padding: 2px 10px; + font-size: $fontSizeSmall; +} + +.btn-mini { + padding: 2px 6px; + margin-right: 0; + margin-right: 0; + font-size: $fontSizeMini; +} + +// Set the backgrounds +// ------------------------- +.btn-primary { + @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); +} +// Warning appears are orange +.btn-warning { + @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); +} +// Danger and error appear as red +.btn-danger { + @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); +} +// Success appears as green +.btn-success { + @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); +} +// Info appears as a neutral blue +.btn-info { + @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); +} +// Inverse appears as dark gray +.btn-inverse { + @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText); + box-shadow: none; + border: 1px solid $grafanaTargetFuncHightlight; +} + +.btn-text { + color: $btnText; + margin: 0; + vertical-align: middle; +} diff --git a/public/less/components/color_picker.scss b/public/less/components/color_picker.scss new file mode 100644 index 00000000000..bc3c11aed0c --- /dev/null +++ b/public/less/components/color_picker.scss @@ -0,0 +1,37 @@ + +.sp-replacer { + background: inherit; + border: none; + color: inherit; + padding: 0; +} + +.sp-replacer:hover, .sp-replacer.sp-active { + border-color: inherit; + color: inherit; +} + +.sp-container { + border-radius: 0; + background-color: $heroUnitBackground; + border: none; + padding: 0; +} + +.sp-palette-container, .sp-picker-container { + border: none; +} + +.sp-dd { + display: none; +} + +.sp-preview { + position: relative; + width: 15px; + height: 15px; + border: none; + margin-right: 5px; + float: left; + z-index: 0; +} diff --git a/public/less/components/dashboard.scss b/public/less/components/dashboard.scss new file mode 100644 index 00000000000..bea7058d87d --- /dev/null +++ b/public/less/components/dashboard.scss @@ -0,0 +1,285 @@ +.template-variable { + color: $variable; +} + +.grafana-row { + margin-bottom: 5px; +} + +.row-tab { + .dropdown-menu-right { + top: 0; + left: 33px; + } +} + +.row-tab-button { + padding: 0px; + cursor: pointer; + vertical-align: middle; + width: 30px; + height: 30px; + text-align: center; + display: inline-block; + line-height: 30px; + background: $btnSuccessBackground; + color: rgba(255,255,255,.90); +} + +.row-button { + width: 24px; + float: left; + cursor: pointer; + line-height: 31px; + background-color: $blueDark; +} + +.row-text { + white-space: nowrap; + text-transform: uppercase; + font-weight: bold; + font-size: 0.9em; + text-align: center; + line-height: 31px; + height: 31px; +} + +.row-close { + padding: 0px; + margin: 0px; + background: $grafanaPanelBackground; + text-align: center; +} + +.row-close-buttons { + position: absolute; + left: 0; +} + +.row-open { + margin-top: 5px; + left: -28px; + position: absolute; + z-index: 100; + transition: .10s left; + transition-delay: .10s; + + &:hover { + left: -12px; + } +} + + +.row-control-inner { + padding:0px; + margin:0px; + position:relative; +} + +.hide-controls { + padding: 0; + .row-tab { + display: none; + } + .add-row-panel-hint { + display: none; + } +} + +.playlist-active { + .add-row-panel-hint, + .dashnav-refresh-action, + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } + + .grafana-menu-stop-playlist { + display: list-item; + } +} + +div.flot-text { + color: $textColor !important; +} + +.panel { + display: inline-block; + float: left; + vertical-align: top; + position: relative; +} + +.panel-margin { + margin: 5px; + display: block; +} + +.panel-container { + background-color: $grafanaPanelBackground; + position: relative; + border: $grafanaPanelBorder; + &:hover { + .panel-actions { + display: block; + } + } + + &.panel-transparent { + background-color: transparent; + border: none; + } +} + +.panel-content { + padding: 0px 10px 5px 10px; +} + +.panel-title-container { + min-height: 5px; + padding-top: 4px; + cursor: pointer; +} + +.panel-title { + border: 0px; + font-weight: $fontWeightSemi; + position: relative; + cursor: pointer; + width: 100%; + display: block; +} + +.panel-links-btn { + margin-left: 10px; + display: none; +} + +.panel-loading { + position:absolute; + top: -3px; + right: 0px; + z-index: 800; +} + +.panel-header { + text-align: center; +} + +.panel-error { + color: $white; + position: absolute; + left: 0; + padding: 0px 17px 6px 5px; + top: 0; + z-index: 10; + i { + position: relative; + top: -2px; + } +} + +.panel-error-arrow { + width: 0; + height: 0; + position: absolute; + border-left: 31px solid transparent; + border-right: 30px solid transparent; + border-bottom: 27px solid $grafanaPanelBackground; + left: 0; + bottom: 0; +} + +.panel-fullscreen { + .panel-title-container { + padding: 8px; + } +} + +.panel-full-edit { + margin-top: 20px; + margin-bottom: 20px; +} + +.panel-menu { + z-index: 500; + position: absolute; + background: $grafanaTargetFuncBackground; + border: 1px solid black; + + .panel-menu-row { + white-space: nowrap; + border-bottom: 1px solid black; + &:last-child { + border-bottom: none; + } + } + + .panel-menu-link, .panel-menu-icon { + padding: 5px 10px; + } + + .panel-menu-link { + display: inline-block; + border-right: 1px solid black; + &:last-child { + border: none; + } + } + + .dropdown-menu { + text-align: left; + } +} + +.panel-highlight { + @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)"); +} + +.on-drag-hover { + .panel-container { + @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)"); + } +} + +.panel-drop-zone { + display: none; + .panel-container { + border: 1px solid $grayDark; + } +} + +.panel-time-info { + font-weight: bold; + float: right; + margin-right: 15px; + color: $blue; + font-size: 85%; + position: absolute; + top: 0; + right: 0; +} + +.resize-panel-handle { + cursor: se-resize; + position: absolute; + bottom: 0; + right: 0; + width: 15px; + height: 15px; + display: block; +} + +.dashboard-header { + font-family: "grafana-icons"; + font-size: 22px; + text-align: center; + span { + display: inline-block; + border: none; + border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); + border-image-slice: 1; + border-bottom: 2px solid transparent; + padding: 1.2rem .2rem .4rem .2rem; + } +} diff --git a/public/less/components/dropdown.scss b/public/less/components/dropdown.scss new file mode 100644 index 00000000000..b9ad1574bb1 --- /dev/null +++ b/public/less/components/dropdown.scss @@ -0,0 +1,236 @@ +// +// 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; + @include border-radius(0 6px 6px 6px); +} +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +// Dropups +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + @include border-radius(5px 5px 5px 0); +} + +// Caret to indicate there is a submenu +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: darken($dropdownBackground, 20%); + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover > a:after { + border-left-color: $dropdownLinkColorHover; +} + +// Left aligned submenus +.dropdown-submenu.pull-left { + // Undo the float + // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. + float: none; + + // Positioning the submenu + > .dropdown-menu { + left: -100%; + margin-left: 10px; + @include border-radius(6px 0 6px 6px); + } +} + +// Tweak nav headers +// ----------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + +// Typeahead +// --------- +.typeahead { + z-index: 1051; + margin-top: 2px; // give it some space to breathe + @include border-radius($baseBorderRadius); +} diff --git a/public/less/components/filter-controls.scss b/public/less/components/filter-controls.scss new file mode 100644 index 00000000000..287bebe3757 --- /dev/null +++ b/public/less/components/filter-controls.scss @@ -0,0 +1,37 @@ +// ========================================================================== +// FILTER CONTROLS +// ========================================================================== + + + +// Filters +// -------------------------------------------------------------------------- + +.filter-controls-filters { + display: inline-block; + margin-bottom: 40px; +} + +.tab-pane > .filter-controls-filters { + margin-top: 20px; +} + + + +// Actions +// -------------------------------------------------------------------------- + +.filter-controls-actions { + margin: 0 0 10px; + padding: 0; + list-style: none; +} + +.filter-controls-actions > li { + display: inline-block; + margin-right: 10px; +} + +.filter-controls-actions-selected { + text-transform: uppercase; +} diff --git a/public/less/components/filter-list.scss b/public/less/components/filter-list.scss new file mode 100644 index 00000000000..73f8057b686 --- /dev/null +++ b/public/less/components/filter-list.scss @@ -0,0 +1,142 @@ +// ========================================================================== +// FILTER LIST +// ========================================================================== + + + +// List +// -------------------------------------------------------------------------- + +.filter-list { + margin: 0; + padding: 0; + list-style: none; +} + +.filter-list > li { + padding: 10px; + margin-bottom: 2px; + background: $grafanaPanelBackground; + + &:last-child { + margin: 0; + } +} + + + +// Card +// -------------------------------------------------------------------------- + +.filter-list-card { + display: table; + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.filter-list-card > li { + display: table-cell; + vertical-align: top; +} + +.filter-list-card-select { + width: 23px; + padding-right: 5px; +} + +.filter-list-card-title { + display: block; + font-size: 16px; + font-weight: normal; +} + +.filter-list-card-image { + width: 50px; + padding: 5px 50px 5px 5px; +} + + +.filter-list-card-status { + color: #777; + font-size: 12px; +} + +.filter-list-card-state { + display: inline-block; + padding: 5px 0 0 28px; + background: 0 bottom no-repeat; + background-size: 24px auto; + font-size: 14px; + text-transform: uppercase; + + &.online { + background-image: url('/img/online.svg'); + color: $online; + } + + &.warn { + background-image: url('/img/warn-tiny.svg'); + color: $warn; + } + + &.critical { + background-image: url('/img/critical.svg'); + color: $critical; + } +} + +.filter-list-card-controls { + float: right; +} + +.filter-list-card-links, +.filter-list-card-config, +.filter-list-card-expand { + display: inline-block; + vertical-align: middle; +} + +.filter-list-card-link { + display: block; + color: #777; + text-align: right; + + > a { + color: #777; + } +} + +.filter-list-card-config { + padding: 8px 8px 8px 16px; + color: #777; + font-size: 25px; + + > a { + color: #777; + } +} + +.filter-list-card-expand { + width: 20px; + padding: 8px 0 8px 8px; + color: #aaa; + font-size: 30px; + text-align: center; + cursor: pointer; +} + +.filter-list-card-details { + padding: 20px 0 0 30px; +} + +.filter-list-card-details-heading { + font-weight: normal; + + > a { + float: right; + color: $blue; + font-size: 12px; + } +} diff --git a/public/less/components/filter-table.scss b/public/less/components/filter-table.scss new file mode 100644 index 00000000000..28fcefb1b3d --- /dev/null +++ b/public/less/components/filter-table.scss @@ -0,0 +1,57 @@ +// ========================================================================== +// FILTER TABLE +// ========================================================================== + + + +// Table +// -------------------------------------------------------------------------- + +.filter-table * { + box-sizing: border-box; +} + +.filter-table { + width: 100%; + border-collapse: collapse; + // table-layout: fixed; +} + +.filter-table tr { + background: $grafanaListBackground; + border-bottom: 2px solid $pageBackground; +} + +.filter-table th { + width: auto; + padding: 10px 15px 10px 0; + text-align: left; + + &:first-child { + padding-left: 15px; + } +} + +.filter-table td { + padding: 15px 15px 15px 0; + + &:first-child { + padding-left: 15px; + } +} + +.filter-table .ellipsis { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.filter-table .expanded { + border-color: $grafanaPanelBackground; +} + +.filter-table .expanded > td { + padding-bottom: 0; +} diff --git a/public/less/components/footer.scss b/public/less/components/footer.scss new file mode 100644 index 00000000000..302fd8ee142 --- /dev/null +++ b/public/less/components/footer.scss @@ -0,0 +1,9 @@ +.grafana-version-info { + position: absolute; + bottom: 2px; + left: 3px; + font-size: 80%; + color: darken($gray, 25%); + a { color: darken($gray, 25%); } +} + diff --git a/public/less/components/gf-form.scss b/public/less/components/gf-form.scss new file mode 100644 index 00000000000..78f42e4a68d --- /dev/null +++ b/public/less/components/gf-form.scss @@ -0,0 +1,71 @@ +.gf-form { + margin-top: 3px; + margin-right: 3px; + display: inline-block; + + .checkbox-label { + display: inline; + padding: 8px 7px 8px 4px; + } + .cr1 { + margin-left: 8px; + } +} + +.gf-form-group { + margin-bottom: 20px; +} + +.gf-form-flow { + float: left; + margin-right: 20px; +} + +.gf-form-button-row { + margin-top: 20px; + margin-bottom: 10px; +} + +.gf-form-label { + background-color: $labelBackground; + display: inline-block; + padding: 8px 7px; + @include small; +} + +[type=text], +[type=email], +[type=number], +[type=password], { + &.gf-form-input { + border: none; + margin: 0px; + border-radius: 0; + padding: 8px 6px; + height: 100%; + box-sizing: border-box; + font-size: 15px; + } +} + +input[type=checkbox].gf-form-checkbox { + margin: 0; +} + +select.gf-form-input { + padding: 2px 3px; + font-size: 15px; + box-sizing: content-box; +} + +.gf-size-xs { width: 60px; } +.gf-size-s { width: 80px; } +.gf-size-ms { width: 100px;} +.gf-size-m { width: 110px; } +.gf-size-l { width: 120px; } +.gf-size-xl { width: 150px; } +.gf-size-xxl { width: 200px; } +.gf-size-xxxl { width: 300px; } +.gf-size-auto { width: auto; } + + diff --git a/public/less/components/gfbox.scss b/public/less/components/gfbox.scss new file mode 100644 index 00000000000..544bbe11f1d --- /dev/null +++ b/public/less/components/gfbox.scss @@ -0,0 +1,69 @@ +.gf-box { + margin: 10px 5px; + background-color: $grafanaPanelBackground; + position: relative; + border: 1px solid $grafanaTargetFuncBackground; +} + +.gf-box-no-margin { + margin: 0; +} + +.gf-box-header-close-btn { + float: right; + padding: 0; + margin: 0; + background-color: transparent; + border: none; + padding: 8px; + i { + font-size: 120%; + } + color: $textColor; + &:hover { + color: $white; + } +} + +.gf-box-header-save-btn { + padding: 7px 0; + float: right; + color: $grayLight; + font-style: italic; +} + +.gf-box-body { + padding: 20px; + min-height: 150px; +} + +.gf-box-footer { + overflow: hidden; +} + +.gf-box-header { + border-bottom: 1px solid $grafanaTargetFuncBackground; + overflow: hidden; + background-color: $grafanaTargetBackground; + .tabs { + float: left; + } + .nav { + margin: 0; + } +} + +.gf-box-title { + padding-right: 20px; + padding-left: 10px; + float: left; + color: $linkColor; + font-size: 18px; + font-weight: normal; + line-height: 38px; + margin: 0; + .fa { + padding: 0 8px 0 5px; + color: $textColor; + } +} diff --git a/public/less/components/infobox.scss b/public/less/components/infobox.scss new file mode 100644 index 00000000000..82fd07633bb --- /dev/null +++ b/public/less/components/infobox.scss @@ -0,0 +1,20 @@ +.grafana-info-box:before { + content: "\f05a"; + font-family:'FontAwesome'; + position: absolute; + top: -8px; + left: -8px; + font-size: 20px; + color: $blue; +} + +.grafana-info-box { + position: relative; + padding: 5px 15px; + background-color: $grafanaTargetBackground; + border: 1px solid $grafanaTargetBorder; + h5 { + margin-top: 5px; + } +} + diff --git a/public/less/components/modals.scss b/public/less/components/modals.scss new file mode 100644 index 00000000000..6165766e80f --- /dev/null +++ b/public/less/components/modals.scss @@ -0,0 +1,149 @@ +// +// Modals +// -------------------------------------------------- + +// Background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindexModalBackdrop; + background-color: $black; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + @include opacity(70); +} + +// Base modal +.modal { + position: fixed; + z-index: $zindexModal; + width: 100%; + background-color: $grafanaPanelBackground; + @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); + @include background-clip(padding-box); + outline: none; + + max-width: 800px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + top: 20%; +} + +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid $grafanaPanelBackground; +} + +// Body (where all modal content resides) +.modal-body { + position: relative; + overflow-y: auto; +} + +// Remove bottom margin if need be +.modal-form { + margin-bottom: 0; +} + +// Footer (for actions) +.modal-footer { + padding: 14px 15px 15px; + border-top: 1px solid $grafanaPanelBackground; + background-color: $grafanaPanelBackground; + text-align: right; // right align buttons + @include clearfix(); // clear it in case folks use .pull-* classes on buttons +} + +.modal-no-header { + border: 1px solid $grafanaTargetFuncBackground; + text-align: center; + + h3 { + margin-top: 30px; + } + + .modal-close { + float: right; + font-size: 140%; + padding: 10px; + } + + .modal-tagline { + font-size: 16px; + } +} + +.confirm-modal { + max-width: 500px; + + .confirm-modal-icon { + padding-top: 41px; + font-size: 280%; + color: $green; + padding-bottom: 20px; + } + + .confirm-modal-title { + font-size: 18px; + color: $linkColor; + margin-bottom: 15px; + } + + .confirm-modal-buttons { + margin-top: 35px; + margin-bottom: 35px; + button { + margin-right: 5px + } + } +} + +.share-modal-body { + text-align: center; + padding: 10px 0; + + .tight-form { + text-align: left; + } + + .share-modal-options { + margin: 11px 20px 33px 20px; + } + + .share-modal-big-icon { + .fa, .icon-gf { + font-size: 70px; + } + } + + .share-snapshot-info-text { + margin: 10px 105px; + strong { + color: $headingsColor; + font-weight: 500; + } + } + + .share-snapshot-header { + margin: 20px 0 22px 0; + } + + .tight-form { + text-align: left; + } + + .share-snapshot-link { + max-width: 716px; + white-space: nowrap; + overflow: hidden; + display: block; + text-overflow: ellipsis; + } +} diff --git a/public/less/components/navbar.scss b/public/less/components/navbar.scss new file mode 100644 index 00000000000..92aaf8b2176 --- /dev/null +++ b/public/less/components/navbar.scss @@ -0,0 +1,178 @@ + + +.navbar { + overflow: visible; + position: relative; + z-index: 110; +} + +.navbar-inner { + min-height: $navbarHeight; + padding-right: 20px; + background-color: $navbarBackground; + border-bottom: $navbarBorder; + + @include clearfix(); +} + +.navbar .nav { + position: relative; + left: 0; + float: left; + margin: 0 10px 0 0; +} + +.nav { + display: block; +} + +.navbar .nav.pull-right { + float: right; // redeclare due to specificity + margin-right: 0; // remove margin on float right nav +} + +.navbar .nav > li { + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; + padding: 17px 13px 13px; + color: $navbarLinkColor; + text-decoration: none; + + .fa { font-size: 115%; } +} + +// Hover/focus +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active + color: $navbarLinkColorHover; + text-decoration: none; +} + +// Active nav items +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: $navbarLinkColorActive; + text-decoration: none; + background-color: $navbarLinkBackgroundActive; +} + + +.fa.top-nav-breadcrumb-icon { + margin: 18px 0 6px 5px; + float: left; + font-size: 120%; + color: $textColor; +} + +.top-nav-btn { + display: block; + position: relative; + float: left; + margin: 0; + font-size: 1.4em; + border-right: 1px solid $grafanaTargetBorder; + + .fa-caret-down { + font-size: 55%; + position: absolute; + right: 8px; + top: 23px; + margin-right: 2px; + } + + a { + color: darken($linkColor, 5%); + background-color: $navbarButtonBackground; + display: inline-block; + &:hover { + background: $navbarButtonBackgroundHighlight; + color: $linkColor; + // border-bottom: 1px solid $blue; + } + } +} + +.top-nav-menu-btn { + a { + padding: 7px 20px 6px 13px; + } + img { + width: 30px; + position: relative; + } + .top-nav-logo-background { + display: inline-block; + border: 1px solid $bodyBackground; + padding: 4px; + border-radius: 50%; + background: $iconContainerBackground; + width: 30px; + height: 30px; + } + .icon-gf-grafana_wordmark { + font-size: 21px; + position: relative; + top: 4px; + padding-left: 5px; + display: none; + } +} + +.dashnav-dashboards-btn { + a { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: block; + padding: 16px 17px 16px 13px; + } + + .fa-th-large { + position: relative; + top: 2px; + } + + .icon-gf { + position: relative; + top: 2px; + font-size: 20px; + line-height: 8px; + } +} + +.dashboard-title { + padding: 0px 6px 5px 5px; + font-size: 17px; +} + +.top-nav-icon { + margin: 5px 0px 0 11px; + line-height: 41px; + float: left; +} + +.top-nav-section { + display: block; + float: left; + padding: 19px 9px 8px 0; + font-weight: bold; + i { + padding-left: 8px; + } +} + +.top-nav-title { + display: block; + float: left; + font-size: 17px; + padding: 18px 10px 10px 13px; + color: $linkColor; +} + + diff --git a/public/less/components/navs.scss b/public/less/components/navs.scss new file mode 100644 index 00000000000..8e67bd677f2 --- /dev/null +++ b/public/less/components/navs.scss @@ -0,0 +1,200 @@ +// +// Navs +// -------------------------------------------------- + + +// BASE CLASS +// ---------- + +.nav { + margin-left: 0; + margin-bottom: $baseLineHeight; + list-style: none; +} + +// Make links block level +.nav > li > a { + display: block; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: $grayLighter; +} + +// Redeclare pull classes because of specifity +.nav > .pull-right { + float: right; +} + +// Nav headers (for dropdowns and lists) +.nav-header { + display: block; + padding: 3px 15px; + font-size: 11px; + font-weight: bold; + line-height: $baseLineHeight; + color: $grayLight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + text-transform: uppercase; +} +// Space them out when they follow another list item (link) +.nav li + .nav-header { + margin-top: 9px; +} + + + +// NAV LIST +// -------- + +.nav-list { + padding-left: 15px; + padding-right: 15px; + margin-bottom: 0; +} +.nav-list > li > a, +.nav-list .nav-header { + margin-left: -15px; + margin-right: -15px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.nav-list > li > a { + padding: 3px 15px; +} +.nav-list > .active > a, +.nav-list > .active > a:hover, +.nav-list > .active > a:focus { + color: $white; + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + background-color: $linkColor; +} +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { + margin-right: 2px; +} + +// TABS AND PILLS +// ------------- + +// Common styles +.nav-tabs, +.nav-pills { + @include clearfix(); +} +.nav-tabs > li, +.nav-pills > li { + float: left; +} +.nav-tabs > li > a, +.nav-pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; // keeps the overall height an even number +} + +// TABS +// ---- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid #ddd; +} +// Make the list-items overlay the bottom border +.nav-tabs > li { + margin-bottom: -1px; +} +// Actual tabs (as links) +.nav-tabs > li > a { + padding-top: 8px; + padding-bottom: 8px; + line-height: $baseLineHeight; + border: 1px solid transparent; + @include border-radius(4px 4px 0 0); + &:hover, + &:focus { + border-color: $grayLighter $grayLighter #ddd; + } +} +// Active state, and it's :hover/:focus to override normal :hover/:focus +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover, +.nav-tabs > .active > a:focus { + color: $gray; + background-color: $bodyBackground; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + + +// Default dropdown links +// ------------------------- +// Make carets use linkColor to start +.nav .dropdown-toggle .caret { + border-top-color: $linkColor; + border-bottom-color: $linkColor; + margin-top: 6px; +} +.nav .dropdown-toggle:hover .caret, +.nav .dropdown-toggle:focus .caret { + border-top-color: $linkColorHover; + border-bottom-color: $linkColorHover; +} +/* move down carets for tabs */ +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} + +// Active dropdown links +// ------------------------- +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: $gray; + border-bottom-color: $gray; +} + +// Active:hover/:focus dropdown links +// ------------------------- +.nav > .dropdown.active > a:hover, +.nav > .dropdown.active > a:focus { + cursor: pointer; +} + +// Open dropdowns +// ------------------------- +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > li.dropdown.open.active > a:hover, +.nav > li.dropdown.open.active > a:focus { + color: $white; + background-color: $grayLight; + border-color: $grayLight; +} +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret, +.nav li.dropdown.open a:focus .caret { + border-top-color: $white; + border-bottom-color: $white; + @include opacity(100); +} + +// Dropdowns in stacked tabs +.tabs-stacked .open > a:hover, +.tabs-stacked .open > a:focus { + border-color: $grayLight; +} + +// Show/hide tabbable areas +.tab-content > .tab-pane { + display: none; +} + +.tab-content > .active { + display: block; +} diff --git a/public/less/components/old_stuff.scss b/public/less/components/old_stuff.scss new file mode 100644 index 00000000000..eae5eb558ce --- /dev/null +++ b/public/less/components/old_stuff.scss @@ -0,0 +1,20 @@ + +div.editor-row { + vertical-align: top; +} + +div.editor-row div.section { + margin-right: 20px; + vertical-align: top; + display: inline-block; +} + +div.editor-option { + vertical-align: top; + display: inline-block; + margin-right: 10px; +} + +div.editor-option label { + display: block; +} diff --git a/public/less/components/pagination.scss b/public/less/components/pagination.scss new file mode 100644 index 00000000000..7d67a980cf6 --- /dev/null +++ b/public/less/components/pagination.scss @@ -0,0 +1,113 @@ +.pagination { +} + +.pagination ul { + display: inline-block; + margin-left: 0; + margin-bottom: 0; + @include border-radius($baseBorderRadius); + @include box-shadow(0 1px 2px rgba(0,0,0,.05)); +} +.pagination ul > li { + display: inline; // Remove list-style and block-level defaults +} +.pagination ul > li > a, +.pagination ul > li > span { + float: left; // Collapse white-space + padding: 4px 12px; + line-height: $baseLineHeight; + text-decoration: none; + background-color: $paginationBackground; + border: 1px solid $paginationBorder; + border-left-width: 0; +} +.pagination ul > li > a:hover, +.pagination ul > li > a:focus, +.pagination ul > .active > a, +.pagination ul > .active > span { + background-color: $paginationActiveBackground; +} +.pagination ul > .active > a, +.pagination ul > .active > span { + color: $grayLight; + cursor: default; +} +.pagination ul > .disabled > span, +.pagination ul > .disabled > a, +.pagination ul > .disabled > a:hover, +.pagination ul > .disabled > a:focus { + color: $grayLight; + background-color: transparent; + cursor: default; +} +.pagination ul > li:first-child > a, +.pagination ul > li:first-child > span { + border-left-width: 1px; + @include border-left-radius($baseBorderRadius); +} +.pagination ul > li:last-child > a, +.pagination ul > li:last-child > span { + @include border-right-radius($baseBorderRadius); +} + + +// Alignment +// -------------------------------------------------- + +.pagination-centered { + text-align: center; +} +.pagination-right { + text-align: right; +} + + +// Sizing +// -------------------------------------------------- + +// Large +.pagination-large { + ul > li > a, + ul > li > span { + padding: $paddingLarge; + font-size: $fontSizeLarge; + } + ul > li:first-child > a, + ul > li:first-child > span { + @include border-left-radius($borderRadiusLarge); + } + ul > li:last-child > a, + ul > li:last-child > span { + @include border-right-radius($borderRadiusLarge); + } +} + +// Small and mini +.pagination-mini, +.pagination-small { + ul > li:first-child > a, + ul > li:first-child > span { + @include border-left-radius($borderRadiusSmall); + } + ul > li:last-child > a, + ul > li:last-child > span { + @include border-right-radius($borderRadiusSmall); + } +} + +// Small +.pagination-small { + ul > li > a, + ul > li > span { + padding: $paddingSmall; + font-size: $fontSizeSmall; + } +} +// Mini +.pagination-mini { + ul > li > a, + ul > li > span { + padding: $paddingMini; + font-size: $fontSizeMini; + } +} diff --git a/public/less/components/panel_dashlist.scss b/public/less/components/panel_dashlist.scss new file mode 100644 index 00000000000..4847d41d144 --- /dev/null +++ b/public/less/components/panel_dashlist.scss @@ -0,0 +1,22 @@ +.dashlist-item { + +} + +.dashlist-link { + display: block; + margin: 5px; + padding: 7px; + background-color: $grafanaTargetBackground; + border: 1px solid $grafanaTargetBorder; + .fa { + float: right; + padding-top: 3px; + } + .fa-star { + color: $orange; + } + + &:hover { + background-color: $grafanaTargetFuncBackground; + } +} diff --git a/public/less/components/panel_graph.scss b/public/less/components/panel_graph.scss new file mode 100644 index 00000000000..e527507bef5 --- /dev/null +++ b/public/less/components/panel_graph.scss @@ -0,0 +1,298 @@ +.graph-canvas-wrapper { + position: relative; + cursor: crosshair; +} + +.histogram-chart { + position: relative; +} + +.datapoints-warning { + pointer: none; + position: absolute; + top: 50%; + left: 50%; + z-index: 10; + margin-top: -50px; + margin-left: -100px; + width: 200px; + text-align: center; + cursor: auto; + padding: 10px; +} + +.graph-legend { + margin: 0 20px; + text-align: center; + + .popover-content { + padding: 0; + } +} + +.graph-legend-icon { + position: relative; + padding-right: 4px; + top: 1px; +} + +.graph-legend-icon, +.graph-legend-alias, +.graph-legend-value { + float: left; + white-space: nowrap; + font-size: 85%; + text-align: left; + &.current:before { + content: "Current: " + } + &.max:before { + content: "Max: " + } + &.min:before { + content: "Min: " + } + &.total:before { + content: "Total: " + } + &.avg:before { + content: "Avg: " + } +} + +.graph-legend-icon .fa { + font-size: 135%; + position: relative; + top: 1px; +} + +.graph-legend-series { + float: left; + white-space: nowrap; + padding-left: 10px; + padding-top: 6px; +} + +.graph-legend-value { + padding-left: 6px; +} + +.graph-legend-table { + width: 100%; + margin: 0; + + .graph-legend-series { + display: table-row; + float: none; + padding-left: 0; + &.pull-right { + float: none; + } + } + + td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value { + float: none; + display: table-cell; + white-space: nowrap; + padding: 2px 10px; + text-align: right; + } + + .graph-legend-icon { + width: 5px; + padding: 0; + top: 0; + .fa { + top: 4px; + } + } + + .graph-legend-value { + padding-left: 15px; + } + + .graph-legend-alias { + padding-left: 7px; + text-align: left; + width: 95%; + } + + .graph-legend-series:nth-child(odd) { + background-color: $grafanaListAccent; + } + + .graph-legend-value { + &.current, &.max, &.min, &.total, &.avg { + &:before { + content: ''; + } + } + } + + th { + text-align: right; + padding: 0px 10px 1px 0; + font-weight: bold; + color: $blue; + font-size: 85%; + white-space: nowrap; + } +} + +.graph-legend-rightside { + + &.graph-wrapper { + display: table; + width: 100%; + } + + .graph-canvas-wrapper { + display: table-cell; + width: 100%; + position: relative; + } + + .graph-legend-wrapper { + display: table-cell; + vertical-align: top; + position: relative; + left: 4px; + } + + .graph-legend { + margin: 0; + } + + .graph-legend-series { + display: block; + padding-left: 0px; + } + + .graph-legend-table .graph-legend-series { + display: table-row; + } +} + +.graph-legend-series-hidden { + a { + color: $linkColorDisabled; + } +} + +.graph-legend-popover { + width: 200px; + min-height: 100px; + label { + display: inline-block; + } + .btn { + padding: 1px 3px; + margin-right: 0px; + line-height: initial; + } + .close { + margin-right: 5px; + color: $linkColor; + opacity: 0.7; + text-shadow: none; + } + .editor-row { + padding: 5px; + } +} + +.annotation-tags { + color: $purple; +} + +.graph-series-override { + input { + float: left; + margin-right: 10px; + } + .graph-series-override-option { + float: left; + padding: 2px 6px; + } + .graph-series-override-selector { + float: left; + } +} + +.graph-tooltip { + white-space: nowrap; + + .graph-tooltip-time { + text-align: center; + font-weight: $fontWeightSemi; + position: relative; + top: -3px; + } + + .tone-down { + opacity: 0.7; + } + + .label-tag { + margin-right: 4px; + margin-top: 8px; + } + + .graph-tooltip-list-item { + display: table-row; + } + + .graph-tooltip-series-name { + display: table-cell; + } + + .graph-tooltip-value { + display: table-cell; + font-weight: bold; + padding-left: 10px; + text-align: right; + } +} + +.left-yaxis-label { + top: 50%; + left: -5px; + transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform-origin: left top; + -o-transform-origin: left top; + -ms-transform-origin: left top; + -moz-transform-origin: left top; + -webkit-transform-origin: left top; +} + +.right-yaxis-label { + top: 50%; + right: -5px; + + -webkit-transform: rotate(90deg); + -webkit-transform-origin: right top; + -moz-transform: rotate(90deg); + -moz-transform-origin: right top; + -ms-transform: rotate(90deg); + -ms-transform-origin: right top; + -o-transform: rotate(90deg); + -o-transform-origin: right top; + transform: rotate(90deg); + transform-origin: right top; +} + +.axisLabel { + color: $textColor; + font-size: $fontSizeSmall; + position: absolute; + text-align: center; + font-size: 12px; +} + +.graph-legend-fixed-height { + overflow-y: scroll; +} diff --git a/public/less/components/panel_singlestat.scss b/public/less/components/panel_singlestat.scss new file mode 100644 index 00000000000..84de79c387e --- /dev/null +++ b/public/less/components/panel_singlestat.scss @@ -0,0 +1,51 @@ +.singlestat-panel { + position: relative; + display: table; + width: 100%; +} + +.singlestat-panel-value-container { + padding: 20px; + display: table-cell; + vertical-align: middle; + text-align: center; + position: relative; + z-index: 1; + font-size: 3em; + font-weight: bold; +} + +.singlestat-panel-prefix { + padding-right: 20px; +} + +.singlestat-panel-table { + width: 100%; + td { + padding: 5px 10px; + white-space: nowrap; + text-align: right; + border-bottom: 1px solid $grafanaListBorderBottom; + } + + th { + text-align: right; + padding: 5px 10px; + font-weight: bold; + color: $blue + } + + td:first-child { + text-align: left; + } + + tr:nth-child(odd) td { + background-color: $grafanaListAccent; + } + + tr:last-child td { + border: none; + } +} + + diff --git a/public/less/components/panel_table.scss b/public/less/components/panel_table.scss new file mode 100644 index 00000000000..ad30d3d0d64 --- /dev/null +++ b/public/less/components/panel_table.scss @@ -0,0 +1,101 @@ +.table-panel-wrapper { + .panel-content { + padding: 0; + } + .panel-title-container { + padding-bottom: 4px; + } +} + +.table-panel-scroll { + overflow: auto; +} + +.table-panel-container { + padding-top: 2.2em; + position: relative; +} + +.table-panel-footer { + text-align: center; + font-size: 90%; + line-height: 2px; + + ul { + position: relative; + display: inline-block; + margin-left: 0; + margin-bottom: 0; + } + ul > li { + display: inline; // Remove list-style and block-level defaults + } + ul > li > a { + float: left; // Collapse white-space + padding: 4px 12px; + text-decoration: none; + border-left-width: 0; + + &:hover { + background-color: $grafanaTargetFuncBackground; + } + + &.active { + font-weight: bold; + color: $blue; + } + } +} + +.table-panel-table { + width: 100%; + border-collapse: collapse; + + th { + padding: 0; + + &:first-child { + .table-panel-table-header-inner { + padding-left: 15px; + } + } + } + + td { + padding: 0.45em 0 0.45em 1.1em; + border-bottom: 2px solid $bodyBackground; + border-right: 2px solid $bodyBackground; + + &:first-child { + padding-left: 15px; + } + &:last-child { + border-right: none; + } + } +} + +.table-panel-header-bg { + background: $grafanaListAccent; + border-top: 2px solid $bodyBackground; + border-bottom: 2px solid $bodyBackground; + height: 2.0em; + position: absolute; + top: 0; + right: 0; + left: 0; +} + +.table-panel-table-header-inner { + padding: 0.45em 0 0.45em 1.1em; + text-align: left; + color: $blue; + position: absolute; + top: 0; +} + +.table-panel-width-hack { + visibility: hidden; + height: 0px; + line-height: 0px; +} diff --git a/public/less/components/popovers.scss b/public/less/components/popovers.scss new file mode 100644 index 00000000000..cf9ea93b80b --- /dev/null +++ b/public/less/components/popovers.scss @@ -0,0 +1,128 @@ +// +// Popovers +// -------------------------------------------------- + + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: $zindexPopover; + display: none; + max-width: 480px; + padding: 1px; + text-align: left; // Reset given new insertion method + background-color: $popoverBackground; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Overrides for proper insertion + white-space: normal; + + // Offset the popover to account for the popover arrow + &.top { margin-top: -10px; } + &.right { margin-left: 10px; } + &.bottom { margin-top: 10px; } + &.left { margin-left: -10px; } +} + +.popover-title { + margin: 0; // reset heading margin + padding: 8px 14px; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: $popoverTitleBackground; + + &:empty { + display: none; + } +} + +.popover-content { + padding: 9px 14px; +} + +// Arrows +// +// .arrow is outer, .arrow:after is inner + +.popover .arrow, +.popover .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover .arrow { + border-width: $popoverArrowOuterWidth; +} +.popover .arrow:after { + border-width: $popoverArrowWidth; + content: ""; +} + +.popover { + &.top .arrow { + left: 50%; + margin-left: -$popoverArrowOuterWidth; + border-bottom-width: 0; + border-top-color: #999; // IE8 fallback + border-top-color: $popoverArrowOuterColor; + bottom: -$popoverArrowOuterWidth; + &:after { + bottom: 1px; + margin-left: -$popoverArrowWidth; + border-bottom-width: 0; + border-top-color: $popoverArrowColor; + } + } + &.right .arrow { + top: 50%; + left: -$popoverArrowOuterWidth; + margin-top: -$popoverArrowOuterWidth; + border-left-width: 0; + border-right-color: #999; // IE8 fallback + border-right-color: $popoverArrowOuterColor; + &:after { + left: 1px; + bottom: -$popoverArrowWidth; + border-left-width: 0; + border-right-color: $popoverArrowColor; + } + } + &.bottom .arrow { + left: 50%; + margin-left: -$popoverArrowOuterWidth; + border-top-width: 0; + border-bottom-color: #999; // IE8 fallback + border-bottom-color: $popoverArrowOuterColor; + top: -$popoverArrowOuterWidth; + &:after { + top: 1px; + margin-left: -$popoverArrowWidth; + border-top-width: 0; + border-bottom-color: $popoverArrowColor; + } + } + + &.left .arrow { + top: 50%; + right: -$popoverArrowOuterWidth; + margin-top: -$popoverArrowOuterWidth; + border-right-width: 0; + border-left-color: #999; // IE8 fallback + border-left-color: $popoverArrowOuterColor; + &:after { + right: 1px; + border-right-width: 0; + border-left-color: $popoverArrowColor; + bottom: -$popoverArrowWidth; + } + } + +} diff --git a/public/less/components/query_editor.scss b/public/less/components/query_editor.scss new file mode 100644 index 00000000000..fe8d3fb157c --- /dev/null +++ b/public/less/components/query_editor.scss @@ -0,0 +1,16 @@ +.query-keyword { + font-weight: bold; + color: $blue; +} + +.query-segment-key { + border-right: none; + padding-right: 1px; +} + +.query-segment-operator { + padding-right: 1px; + border-right: none; + color: $orange; +} + diff --git a/public/less/components/scrollbar.scss b/public/less/components/scrollbar.scss new file mode 100644 index 00000000000..85227625a8d --- /dev/null +++ b/public/less/components/scrollbar.scss @@ -0,0 +1,41 @@ +// +// Srollbars +// + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar:hover { + height: 8px; +} + +::-webkit-scrollbar-button:start:decrement, +::-webkit-scrollbar-button:end:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement { display: none; } +::-webkit-scrollbar-button:horizontal:increment { display: none; } +::-webkit-scrollbar-button:vertical:decrement { display: none; } +::-webkit-scrollbar-button:vertical:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } +::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } +::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } +::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } +::-webkit-scrollbar-track-piece { background-color: transparent; } + +::-webkit-scrollbar-thumb:vertical { + height: 50px; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2)); + border: 1px solid $scrollbarBorder; + border-top: 1px solid $scrollbarBorder; + border-left: 1px solid $scrollbarBorder; +} + +::-webkit-scrollbar-thumb:horizontal { + width: 50px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2)); + border: 1px solid $scrollbarBorder; + border-top: 1px solid $scrollbarBorder; + border-left: 1px solid $scrollbarBorder; +} + diff --git a/public/less/components/search.scss b/public/less/components/search.scss new file mode 100644 index 00000000000..1a117f252b9 --- /dev/null +++ b/public/less/components/search.scss @@ -0,0 +1,107 @@ +.search-container { + left: 72px; + top: 39px; + margin: 16px 0 0 2px; + z-index: 1000; + position: absolute; + width: 700px; + box-shadow: $searchShadow; + padding: 10px; + background-color: $grafanaPanelBackground; + border: $grafanaPanelBorder; + + .label-tag { + margin-left: 6px; + font-size: 11px; + padding: 2px 6px; + } +} + +// Search +.search-field-wrapper { + padding-bottom: 10px; + input { + width: 100%; + padding: 8px 8px; + height: 100%; + box-sizing: border-box; + } + button { + margin: 0 4px 0 0; + } + > span { + display: block; + overflow: hidden; + } +} + +.search-results-container { + height: 450px; + overflow: auto; + display: block; + line-height: 28px; + + .search-item:hover, .search-item.selected { + background-color: $grafanaListHighlight; + } + + .selected { + .search-result-tag { + opacity: 0.70; + color: white; + } + } + + .fa-star, .fa-star-o { + padding-left: 13px; + } + + .fa-star { + color: $orange; + } + + .search-result-link { + color: $grafanaListMainLinkColor; + .fa { + padding-right: 10px; + } + } + + .search-item { + display: block; + padding: 3px 10px; + white-space: nowrap; + background-color: $grafanaListBackground; + margin-bottom: 4px; + .search-result-icon:before { + content: "\f009"; + } + + &.search-item-dash-home .search-result-icon:before { + content: "\f015"; + } + } + + .search-result-tags { + float: right; + } + + .search-result-actions { + float: right; + padding-left: 20px; + } +} + +.search-switches { + position: absolute; + top: 19px; + right: 21px; +} + +.search-button-row { + padding-top: 20px; + button, a { + margin-right: 10px; + } +} + diff --git a/public/less/components/shortcuts.scss b/public/less/components/shortcuts.scss new file mode 100644 index 00000000000..ed639b6292c --- /dev/null +++ b/public/less/components/shortcuts.scss @@ -0,0 +1,6 @@ +.shortcut-table { + td { padding: 3px; } + th:last-child { text-align: left; } + td:first-child { text-align: right; } +} + diff --git a/public/less/components/sidemenu.scss b/public/less/components/sidemenu.scss new file mode 100644 index 00000000000..ec6c23fc984 --- /dev/null +++ b/public/less/components/sidemenu.scss @@ -0,0 +1,220 @@ +$sideMenuWidth: 220px; + +.sidemenu-canvas { + position: relative; +} + +.sidemenu-wrapper { + position: absolute; + top: 52px; + left: 0; + width: $sideMenuWidth; + background-color: $bodyBackground; + z-index: 101; + transform: translate3d(0, -100%, 0); + visibility: hidden; + + a:focus { + text-decoration: none; + } +} + +.sidemenu-open { + .sidemenu-wrapper { + visibility: visible; + transform: translate3d(0, 0, 0); + transition: all 0.2s; + } +} + +.sidemenu-pinned { + .sidemenu-wrapper { + min-height: 100%; + } + .dashboard-container { + padding-left: $sideMenuWidth; + } + .page-container { + margin-left: 195px; + padding-left: 77px; + } + .top-nav-menu-btn { + a { + background-color: $pageBackground; + padding-right: 67px; + padding-left: 22px; + } + .icon-gf-grafana_wordmark { + display: inline-block; + } + .fa { + display: none; + } + } + .sidemenu-org { + box-shadow: none; + } + .search-container { + left: auto; + } +} + +.sidemenu { + font-weight: $baseFontWeight; + list-style: none; + margin: 0; + padding: 0; + + li { + position: relative; + + &:hover { + .dropdown-menu { + display: block; + top: 0px; + left: $sideMenuWidth; + background-color: $bodyBackground; + } + } + } +} + +.sidemenu-main-link { + font-size: 16px; +} + +.sidemenu-item-text { + width: 110px; + display: inline-block; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.icon-circle { + width: 40px; + height: 40px; + display: inline-block; + i { + color: $linkColor; + opacity: .7; + position: relative; + left: 7px; + top: 5px; + font-size: 150%; + } + img { + left: 7px; + position: relative; + } +} + +.sidemenu-item { + color: $linkColor; + line-height: 47px; + padding: 0px 10px 0px 10px; + display: block; + + &:hover { + background-color: $sideMenuBackgroundHighlight; + } + + .sidemenu-item-text { + padding-left: 11px; + } + + img { + border-radius: 50%; + width: 28px; + height: 28px; + box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05); + } +} + +.sidemenu-section-tagline { + font-style: italic; + line-height: 10px; +} + +.sidemenu-section-text-wrapper { + padding-top: 4px; +} + +.sidemenu-org-section .dropdown-menu-title { + margin: 0 10px 0 6px; + padding: 7px 0 7px; + overflow: hidden; + color: $dropdownTitle; +} + +.sidemenu-org-section .dropdown-menu-title > span { + display: inline-block; + position: relative; + + &:after { + display: block; + position: absolute; + top: 50%; + right: 0; + left: 100%; + width: 200px; + height: 1px; + margin-left: 5px; + background: $dropdownDivider; + content: ''; + } +} + +.sidemenu-org { + padding: 17px 10px 15px 14px; + box-sizing: border-box; + cursor: pointer; + &:hover { + background-color: $sideMenuBackgroundHighlight; + } + display: table; + position: relative; + width: 100%; +} + +.sidemenu .fa-caret-right { + position: absolute; + top: 38%; + right: 25px; + font-size: 14px; + color: $linkColor; +} + +.sidemenu-org-avatar, +.sidemenu-org-details { + display: table-cell; + vertical-align: top; +} + +.sidemenu-org-avatar { + width: 44px; +} + +.sidemenu-org-avatar > img { + width: 40px; + height: 40px; + border-radius: 50%; + position: absolute; +} + +.sidemenu-org-details { + padding-left: 10px; + color: $linkColor; +} + +.sidemenu-org-name { + display: block; + font-size: 13px; + color: $linkColorDisabled; +} + +.sidemenu-org-user { + display: block; +} + diff --git a/public/less/components/submenu.scss b/public/less/components/submenu.scss new file mode 100644 index 00000000000..b4a7154aee5 --- /dev/null +++ b/public/less/components/submenu.scss @@ -0,0 +1,133 @@ +.submenu-controls { + margin: 10px 5px; + font-size: 16px; +} + +.annotation-disabled, .annotation-disabled a { + color: $linkColorDisabled; +} + +.annotation-segment { + label.cr1 { + margin-left: 5px; + } + padding: 8px 7px; +} + +.submenu-item { + margin-right: 20px; + display: inline-block; + border-radius: 3px; + background-color: $grafanaPanelBackground; + border: $grafanaPanelBorder; + margin-right: 10px; + display: inline-block; + + .fa-caret-down { + font-size: 75%; + position: relative; + top: 1px; + } +} + +.variable-value-link { + font-size: 16px; + padding-right: 10px; + .label-tag { + margin: 0 5px; + } +} + +.variable-link-wrapper { + display: inline-block; + position: relative; +} + +.variable-value-dropdown { + position: absolute; + top: 47px; + min-width: 150px; + max-height: 400px; + min-height: 150px; + overflow-y: auto; + overflow-x: hidden; + background-color: $dropdownBackground; + box-shadow: 0 0 25px 0 rgba(0,0,0,0.4); + z-index: 1000; + font-size: $baseFontSize; + border-radius: 3px 3px 0 0; + border: 1px solid $grafanaTargetFuncBackground; + + &.multi { + .selected { + .variable-option-icon{ + background: url($checkboxImageUrl) 0px -18px no-repeat; + } + } + } + + &.single { + .variable-option-icon { + display: none; + } + .selected { + background-color: $grafanaTargetFuncHightlight; + } + } +} + +.variable-options-wrapper { + display: table; + width: 100%; +} + +.variable-options-column { + max-height: 350px; + display: table-cell; + line-height: 26px; + &:nth-child(2) { + border-left: 1px solid $grafanaTargetFuncBackground; + } +} + +.variable-option-tag, +.variable-option, +.variable-options-column-header { + display: block; + padding: 2px 27px 0 8px; + position: relative; + white-space: nowrap; + min-width: 115px; +} + +.variable-options-column-header { + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: 5px; + &.many-selected { + .variable-option-icon { + background: url($checkboxImageUrl) 0px -36px no-repeat; + } + } +} + +.variable-option-icon { + display: inline-block; + width: 24px; + height: 18px; + position: relative; + top: 4px; + background: url($checkboxImageUrl) left top no-repeat; +} + +.variable-option { + &:hover, &.highlighted { + background-color: $blueDark; + } +} + +.dash-nav-link { + padding: 8px 7px; + display: inline-block; + color: $textColor; +} diff --git a/public/less/components/tables_lists.scss b/public/less/components/tables_lists.scss new file mode 100644 index 00000000000..f6d1edf35bc --- /dev/null +++ b/public/less/components/tables_lists.scss @@ -0,0 +1,43 @@ +.grafana-options-table { + width: 100%; + + th { + text-align: left; + padding: 5px 10px; + border-bottom: 4px solid $grafanaPanelBackground; + } + + tr td { + background-color: $grafanaListBackground; + padding: 5px 10px; + white-space: nowrap; + border-bottom: 4px solid $grafanaPanelBackground; + &.nobg { + background-color: transparent; + } + } + + .max-width-btns { + padding-right: 0px; + .btn { + box-sizing: border-box; + width: 100%; + } + } +} + +.max-width { + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + white-space: nowrap; +} + +.grafana-list-item { + display: block; + padding: 1px 10px; + line-height: 34px; + background-color: $grafanaTargetBackground; + margin-bottom: 4px; + cursor: pointer; +} diff --git a/public/less/components/tabs.scss b/public/less/components/tabs.scss new file mode 100644 index 00000000000..792314df2d3 --- /dev/null +++ b/public/less/components/tabs.scss @@ -0,0 +1,40 @@ + +.nav-tabs-alt { + border-bottom: $grafanaTriggerBorder; + padding-left: 10px; + margin: 0 0 10px 0; + + & > li > a { + color: darken($linkColor, 20%); + } + + li > a:hover { + border-bottom: none; + } + + li.active > a, + li.active > a:focus, + li.active > a:hover { + @include border-radius(3px); + border: $grafanaTriggerBorder; + background-color: transparent; + border-bottom: 1px solid $grafanaPanelBackground; + color: $linkColor; + } + + li.disabled > a { + color: $textColor; + } + + .open .dropdown-toggle { + background-color: #060606; + border-color: transparent; + } + + .tab-content { + padding: 10px; + background-color: $grafanaPanelBackground; + } +} + + diff --git a/public/less/components/tags.scss b/public/less/components/tags.scss new file mode 100644 index 00000000000..c0aa1bd23a5 --- /dev/null +++ b/public/less/components/tags.scss @@ -0,0 +1,39 @@ +// Base classes +.label, +.badge { + display: inline-block; + padding: 2px 4px; + font-size: $baseFontSize * .846; + font-weight: bold; + line-height: 14px; // ensure proper line-height if floated + color: $white; + vertical-align: baseline; + white-space: nowrap; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + background-color: $grayLight; +} + + +// Labels & Badges +.label-tag { + background-color: $purple; + color: darken($white, 5%); + white-space: nowrap; + border-radius: 3px; + text-shadow: none; + font-size: 13px; + padding: 2px 6px; + border-width: 1px; + border-style: solid; + .icon-tag { + position: relative; + top: 1px; + padding-right: 4px; + } +} + +.label-tag:hover { + opacity: 0.85; + background-color: darken($purple, 10%); +} + diff --git a/public/less/components/tagsinput.scss b/public/less/components/tagsinput.scss new file mode 100644 index 00000000000..3bfdb5547c8 --- /dev/null +++ b/public/less/components/tagsinput.scss @@ -0,0 +1,39 @@ +.bootstrap-tagsinput { + display: inline-block; + padding: 0 0 0 6px; + vertical-align: middle; + max-width: 100%; + line-height: 22px; + background-color: $inputBackground; + + input { + border: none; + border-right: 1px solid $grafanaTargetSegmentBorder; + margin: 0px; + border-radius: 0; + padding: 8px 6px; + height: 100%; + width: 5rem; + box-sizing: border-box; + } + + .tag { + margin-right: 2px; + color: white; + + [data-role="remove"] { + margin-left:8px; + cursor:pointer; + &:after{ + content: "x"; + padding:0px 2px; + } + &:hover { + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + &:active { + box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); + } + } + } + } +} diff --git a/public/less/components/tightform.scss b/public/less/components/tightform.scss new file mode 100644 index 00000000000..e1df5f2ae71 --- /dev/null +++ b/public/less/components/tightform.scss @@ -0,0 +1,236 @@ +.tight-form { + border-top: 1px solid $grafanaTargetBorder; + border-left: 1px solid $grafanaTargetBorder; + border-right: 1px solid $grafanaTargetBorder; + background: $grafanaTargetBackground; + + &.last { + border-bottom: 1px solid $grafanaTargetBorder; + } + + &.borderless { + background: transparent; + border: none; + } + + .checkbox-label { + display: inline; + padding-right: 4px; + margin-bottom: 0; + } +} + +.tight-form-container-no-item-borders { + border: 1px solid $grafanaTargetBorder; + border-bottom: none; + + .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input { + border: none; + } +} + + +.spaced-form { + .tight-form { + margin: 7px 0; + } +} + +.borderless { + .tight-form-item, + .tight-form-input { + border: none; + } +} + +.tight-form-container { + border-bottom: 1px solid $grafanaTargetBorder; +} + +.tight-form-btn { + padding: 7px 12px; +} + +.tight-form-list { + list-style: none; + margin: 0; + >li { + float: left; + } +} + +.tight-form-flex-wrapper { + display: flex; + flex-direction: row; + float: none !important; +} + +.grafana-metric-options { + margin-top: 25px; +} + +.tight-form-item { + padding: 8px 7px; + display: inline-block; + font-weight: normal; + border-right: 1px solid $grafanaTargetSegmentBorder; + color: $grafanaTargetColor; + display: inline-block; + + .has-open-function & { + padding-top: 25px; + } + + .tight-form-disabled & { + color: $grafanaTargetColorHide; + } + + &:hover, &:focus { + text-decoration: none; + } + + &a:hover { + background: $grafanaTargetFuncBackground; + } + + &.last { + border-right: none; + } +} + + +.tight-form-item-icon { + i { + width: 15px; + text-align: center; + display: inline-block; + } +} + +.tight-form-func { + background: $grafanaTargetFuncBackground; + > a { + color: $grafanaTargetColor; + } + > a:hover { + color: $linkColor; + } + + &.show-function-controls { + padding-top: 5px; + min-width: 100px; + text-align: center; + } +} + +input[type=text].tight-form-func-param { + background: transparent; + border: none; + margin: 0; + padding: 0; +} + +input[type=text].tight-form-clear-input { + padding: 8px 7px; + border: none; + margin: 0px; + background: transparent; + color: $grafanaTargetColor; + border-radius: 0; + border-right: 1px solid $grafanaTargetSegmentBorder; +} + +[type=text], +[type=email], +[type=number], +[type=password] { + &.tight-form-input { + border: none; + border-right: 1px solid $grafanaTargetSegmentBorder; + margin: 0px; + border-radius: 0; + padding: 8px 6px; + height: 100%; + box-sizing: border-box; + &.last { + border-right: none; + } + } +} + +input[type=checkbox].tight-form-checkbox { + margin: 0; +} + +.tight-form-textarea { + height: 200px; + margin: 0; + box-sizing: border-box; +} + +select.tight-form-input { + border: none; + border-right: 1px solid $grafanaTargetSegmentBorder; + margin: 0px; + border-radius: 0; + height: 36px; + padding: 9px 3px; + &.last { + border-right: none; + } +} + +.tight-form-func-controls { + display: none; + text-align: center; + + .fa-arrow-left { + float: left; + position: relative; + top: 2px; + } + .fa-arrow-right { + float: right; + position: relative; + top: 2px; + } + .fa-remove { + margin-left: 10px; + } +} + +.tight-form-radio { + input[type=radio] { + margin: 0; + } + label { + display: inline; + } +} + +.tight-form-section { + margin-bottom: 20px; + margin-right: 40px; + vertical-align: top; + display: inline-block; + .tight-form { + margin-left: 20px; + } +} + +.tight-form-align { + padding-left: 66px; +} + +.tight-form-item-large { width: 115px; } +.tight-form-item-xlarge { width: 150px; } +.tight-form-item-xxlarge { width: 200px; } + +.tight-form-input.tight-form-item-xxlarge { + width: 215px; +} + +.tight-form-inner-box { + margin: 20px 0 20px 148px; + display: inline-block; +} diff --git a/public/less/components/timepicker.scss b/public/less/components/timepicker.scss new file mode 100644 index 00000000000..8a232ddc779 --- /dev/null +++ b/public/less/components/timepicker.scss @@ -0,0 +1,107 @@ +.nav.gf-timepicker-nav { + margin-right: 0; +} + +.timepicker-timestring { + font-weight: normal; +} + +.gf-timepicker-nav-btn { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.gf-timepicker-dropdown { + margin: -5px -10px 10px 5px; + padding: 10px 20px; + float: right; + background-color: $grafanaPanelBackground; + @include box-shadow($navbarDropdownShadow); +} + +.gf-timepicker-absolute-section { + width: 300px; + float: left; + border-right: $grafanaTriggerBorder; + padding: 0 0 0 20px; + select { + width: 183px; + margin-bottom: 0; + } +} + +.gf-timepicker-btn-apply { + margin: 0 0 0 15px; +} + +.gf-timepicker-utc { + background-color: $grafanaTargetFuncBackground; + color: $orange; + font-size: 75%; + padding: 3px; + border-radius: 2px; + font-weight: bold; + margin-left: 4px; +} + +.gf-timepicker-relative-section { + padding: 0 20px 0 30px; + min-height: 258px; + float: left; + ul { + list-style: none; + float: left; + margin: 0 30px 10px 0px; + li { + line-height: 22px; + } + li.active { + border-bottom: 1px solid $blue; + margin: 3px 0; + font-weight: bold; + } + } +} + +.gf-timepicker-component { + margin-bottom: 10px; + button.btn-sm { + @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); + background-image: none; + border: none; + padding: 6px 9px; + color: $textColor; + &.active span { + color: $blue; + font-weight: bold; + } + .text-info { + color: $orange; + font-weight: bold; + } + } +} + +.faMixin { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.glyphicon-chevron-right:before { + @include faMixin; + content: "\f054"; +} + +.glyphicon-chevron-left:before { + @include faMixin; + content: "\f053"; +} + +.input-datetime-format { + color: $linkColorDisabled +} diff --git a/public/less/components/tooltip.scss b/public/less/components/tooltip.scss new file mode 100644 index 00000000000..3d0e2a7b16a --- /dev/null +++ b/public/less/components/tooltip.scss @@ -0,0 +1,102 @@ +// +// Tooltips +// -------------------------------------------------- + + +// Base class +.tooltip { + position: absolute; + z-index: $zindexTooltip; + display: block; + visibility: visible; + font-size: 11px; + line-height: 1.4; + @include opacity(0); + &.in { .opacity(100); } + &.top { margin-top: -3px; padding: 5px 0; } + &.right { margin-left: 3px; padding: 0 5px; } + &.bottom { margin-top: 3px; padding: 5px 0; } + &.left { margin-left: -3px; padding: 0 5px; } +} + +// Wrapper for the tooltip content +.tooltip-inner { + max-width: 400px; + padding: 8px; + color: $tooltipColor; + text-align: center; + text-decoration: none; + background-color: $tooltipBackground; + @include border-radius($baseBorderRadius); +} + +// Arrows +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -$tooltipArrowWidth; + border-width: $tooltipArrowWidth $tooltipArrowWidth 0; + border-top-color: $tooltipArrowColor; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -$tooltipArrowWidth; + border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0; + border-right-color: $tooltipArrowColor; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -$tooltipArrowWidth; + border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth; + border-left-color: $tooltipArrowColor; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -$tooltipArrowWidth; + border-width: 0 $tooltipArrowWidth $tooltipArrowWidth; + border-bottom-color: $tooltipArrowColor; + } +} + +.grafana-tooltip { + position : absolute; + top: -1000; + left: 0; + color: $tooltipColor; + padding: 10px; + font-size: 11pt; + font-weight : 200; + background-color: $tooltipBackground; + border-radius: 5px; + z-index: 9999; + max-width: 800px; + max-height: 600px; + overflow: hidden; + line-height: 14px; + a { + color: $tooltipLinkColor; + } +} + +.grafana-tooltip hr { + padding: 2px; + color: #c8c8c8; + margin: 0px; + border-bottom: 0px solid #c8c8c8; +} + +.grafana-tip { + padding-left: 5px; +} + diff --git a/public/less/components/typeahead.scss b/public/less/components/typeahead.scss new file mode 100644 index 00000000000..efa4f3459ed --- /dev/null +++ b/public/less/components/typeahead.scss @@ -0,0 +1,11 @@ + +// typeahead max height +.typeahead { + max-height: 300px; + overflow-y: auto; +} + +.typeahead strong { + color: $yellow; +} + diff --git a/public/less/grafana-responsive.scss b/public/less/grafana-responsive.scss new file mode 100644 index 00000000000..051a801f215 --- /dev/null +++ b/public/less/grafana-responsive.scss @@ -0,0 +1,127 @@ +@import "variables.dark.scss"; +@import "bootstrap/responsive.scss"; + +$gridColumnWidth: 70px; +$gridGutterWidth: 10px; + +$gridColumnWidth768: 52px; +$gridGutterWidth768: 10px; + +$gridColumnWidth1200: 90px; +$gridGutterWidth1200: 10px; + +// Fluid grid +// ------------------------- +$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); +$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); + +// 1200px min +$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); +$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); + +// 768px-979px +$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); +$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); + +$screen-xs: 320px; +$screen-sm: 768px; +$screen-md: 992px; +$screen-lg: 1200px; + +$screen-xs-max: ($screen-sm - 1); +$screen-sm-max: ($screen-md - 1); +$screen-md-max: ($screen-lg - 1); + +$breakpoint-xs-up: "only screen and (min-width: #{$screen-xs})"; +$breakpoint-xs: "only screen and (min-width: #{$screen-xs}) and (max-width: #{$screen-xs-max})"; +$breakpoint-sm-up: "only screen and (min-width: #{$screen-sm})"; +$breakpoint-sm: "only screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max})"; +$breakpoint-md-up: "only screen and (min-width: #{$screen-md})"; +$breakpoint-md: "only screen and (min-width: #{$screen-md}) and (max-width: #{$screen-md-max})"; +$breakpoint-lg: "only screen and (min-width: #{$screen-lg})"; + +.dashnav-back-to-dashboard { + display: none; +} + +// Media queries +// --------------------- +@media $breakpoint-xs { + div.panel { + width: 100% !important; + padding: 0px !important; + } + .panel-margin { + margin-right: 0; + margin-left: 0; + } + body { + padding: 0; + } + .dashnav-dashboards-btn a { + max-width: 200px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } + .page-container { + padding: 10px 20px; + } +} + +// form styles +@media $breakpoint-sm-up { + .gf-size-m { width: 120px; } + .gf-size-l { width: 150px; } + .gf-size-xl { width: 200px; } + .gf-size-xxl { width: 300px; } + .gf-size-xxxl { width: 400px; } +} + +@media $breakpoint-sm-up { + .dashnav-dashboards-btn a { + max-width: 200px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .panel-in-fullscreen { + .dashnav-action-icons { + display: none; + } + .dashnav-back-to-dashboard { + display: block; + } + } +} + +@media $breakpoint-md-up { + .dashnav-dashboards-btn a { + max-width: 290px; + } + .gf-timepicker-nav-btn { + max-width: 250px; + } + .dashnav-zoom-out { + display: block; + } +} + +@media $breakpoint-lg { + .panel-in-fullscreen { + .dashnav-action-icons { + display: block; + } + } + + .dashnav-dashboards-btn a { + max-width: none; + } + .gf-timepicker-nav-btn { + max-width: none; + } +} diff --git a/public/less/grafana.dark.scss b/public/less/grafana.dark.scss new file mode 100644 index 00000000000..2dbd9475e24 --- /dev/null +++ b/public/less/grafana.dark.scss @@ -0,0 +1,2 @@ +@import "variables.dark.scss"; +@import "grafana.scss"; diff --git a/public/less/grafana.less b/public/less/grafana.less index 5bbc9c08b74..6a3facc4206 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -17,7 +17,7 @@ @import "./mixins/buttons.less"; // LAYOUTS -@import "./bootstrap/grid.less"; +// @import "./bootstrap/grid.less"; @import "./layout/page.less"; // COMPONENTS diff --git a/public/less/grafana.light.scss b/public/less/grafana.light.scss new file mode 100644 index 00000000000..bc9b18e52fe --- /dev/null +++ b/public/less/grafana.light.scss @@ -0,0 +1,2 @@ +@import "variables.light.scss"; +@import "grafana.scss"; diff --git a/public/less/grafana.scss b/public/less/grafana.scss new file mode 100644 index 00000000000..3d8de05687f --- /dev/null +++ b/public/less/grafana.scss @@ -0,0 +1,69 @@ + +// BASE +@import "./base/normalize.scss"; +@import "./base/base.scss"; +@import "./base/type.scss"; +@import "./base/forms.scss"; +@import "./base/fonts.scss"; +@import "./base/code.scss"; + +// UTILS +@import "./utils/utils.scss"; +@import "./utils/validation.scss"; +@import "./utils/angular.scss"; + +// MIXINS +@import "./mixins/mixins.scss"; +@import "./mixins/buttons.scss"; + +// LAYOUTS +// @import "./bootstrap/grid.scss"; +@import "./layout/page.scss"; + +// COMPONENTS +@import "./components/panel_graph.scss"; +@import "./components/submenu.scss"; +@import "./components/panel_dashlist.scss"; +@import "./components/panel_singlestat.scss"; +@import "./components/panel_table.scss"; +@import "./components/tagsinput.scss"; +@import "./components/tables_lists.scss"; +@import "./components/search.scss"; +@import "./components/dashboard.scss"; +@import "./components/tightform.scss"; +@import "./components/gf-form.scss"; +@import "./components/sidemenu.scss"; +@import "./components/navbar.scss"; +@import "./components/gfbox.scss"; +@import "./components/pagination.scss"; +@import "./components/tabs.scss"; +@import "./components/timepicker.scss"; +@import "./components/filter-controls.scss"; +@import "./components/filter-list.scss"; +@import "./components/filter-table.scss"; +@import "./components/scrollbar.scss"; +@import "./components/old_stuff.scss"; +@import "./components/navbar.scss"; +@import "./components/popovers.scss"; +@import "./components/alerts.scss"; +@import "./components/typeahead.scss"; +@import "./components/tags.scss"; +@import "./components/modals.scss"; +@import "./components/dropdown.scss"; +@import "./components/color_picker.scss"; +@import "./components/tooltip.scss"; +@import "./components/buttons.scss"; +@import "./components/footer.scss"; +@import "./components/infobox.scss"; +@import "./components/shortcuts.scss"; +@import "./components/query_editor.scss"; +@import "./components/navs.scss"; + +// PAGES +@import "./pages/login.scss"; +@import "./pages/playlist.scss"; +@import "./pages/admin.scss"; +@import "./pages/alerting.scss"; +@import "./pages/apps.scss"; +@import "./pages/signup.scss"; + diff --git a/public/less/layout/page.scss b/public/less/layout/page.scss new file mode 100644 index 00000000000..de28297b319 --- /dev/null +++ b/public/less/layout/page.scss @@ -0,0 +1,71 @@ +.grafana-app { + display: block; + height: 100%; +} + +.dashboard-container { + padding: 5px 5px; + width: 100%; + box-sizing: border-box; +} + +.main-view { + // background-image: url(/img/grafana_pattern.png); + // background-position: 100% -550px; + // background-repeat: no-repeat; + height: 100%; +} + +.page-dashboard { + .main-view { + background-image: none; + } +} + +.page-container { + background-color: $pageBackground; + position: relative; + padding: 25px 56px 10px 56px; + max-width: 1060px; + margin-left: 0; + height: 100%; +} + + +.page-header { + padding: 10px 0 39px 0px; + + display: flex; + justify-content: space-between; + align-items: center; + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + flex-wrap: wrap-reverse; + background: transparent url(../img/page_header_line.png) no-repeat left 60px; + h1 { + font-style: italic; + } +} + +.admin-page { + max-width: 800px; + margin-left: 10px; + .gf-box { + margin-top: 0; + } + .gf-box-body { + min-height: 0; + } + h2 { + margin-left: 15px; + margin-bottom: 0px; + font-size: $fontSizeLarge; + color: $textColor; + i { + padding-right: 6px; + } + } +} + diff --git a/public/less/mixins/buttons.scss b/public/less/mixins/buttons.scss new file mode 100644 index 00000000000..6d7def7e2dc --- /dev/null +++ b/public/less/mixins/buttons.scss @@ -0,0 +1,18 @@ + +// Button backgrounds +// ------------------ +@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + // gradientBar will set the background to a pleasing blend of these, to support IE<=9 + @include gradientBar($startColor, $endColor, $textColor, $textShadow); + + box-shadow: inset 0 -4px rgba(0,0,0,0.3); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { + color: $textColor; + background-image: none; + background-color: darken($endColor, 2%); + } +} + + diff --git a/public/less/mixins/mixins.scss b/public/less/mixins/mixins.scss new file mode 100644 index 00000000000..ecbdc0288e9 --- /dev/null +++ b/public/less/mixins/mixins.scss @@ -0,0 +1,334 @@ + +@mixin clearfix() { + &::after { + content: ""; + display: table; + clear: both; + } +} + +@mixin tab-focus() { + // Default + outline: thin dotted; + // WebKit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +// Center-align a block level element +// ---------------------------------- +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Sizing shortcuts +// ------------------------- +@mixin size($height, $width) { + width: $width; + height: $height; +} + +@mixin square($size) { + @include size($size, $size); +} + +// Placeholder text +// ------------------------- +@mixin placeholder($color: $placeholderText) { + &:-moz-placeholder { + color: $color; + } + &:-ms-input-placeholder { + color: $color; + } + &::-webkit-input-placeholder { + color: $color; + } +} + +// Text overflow +// ------------------------- +// Requires inline-block or block for proper styling +@mixin text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// CSS image replacement +// ------------------------- +// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + + +// FONTS +// -------------------------------------------------- + +@mixin font-family-serif() { + font-family: $serifFontFamily; +} + +@mixin font-family-sans-serif() { + font-family: $sansFontFamily; +} + +@mixin font-family-monospace() { + font-family: $monoFontFamily; +} + +@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + font-size: $size; + font-weight: $weight; + line-height: $lineHeight; +} + +@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-serif(); + @include font-shorthand($size, $weight, $lineHeight); +} + +@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-sans-serif(); + @include font-shorthand($size, $weight, $lineHeight); +} + +@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-monospace; + @include font-shorthand($size, $weight, $lineHeight); +} + + +// FORMS +// -------------------------------------------------- + +// Block level inputs +.input-block-level { + display: block; + width: 100%; + min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + @include box-sizing(border-box); // Makes inputs behave like true block-level elements +} + + +// CSS3 PROPERTIES +// -------------------------------------------------- + +// Border Radius +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +// Single Corner Border Radius +@mixin border-top-left-radius($radius) { + -webkit-border-top-left-radius: $radius; + -moz-border-radius-topleft: $radius; + border-top-left-radius: $radius; +} +@mixin border-top-right-radius($radius) { + -webkit-border-top-right-radius: $radius; + -moz-border-radius-topright: $radius; + border-top-right-radius: $radius; +} +@mixin border-bottom-right-radius($radius) { + -webkit-border-bottom-right-radius: $radius; + -moz-border-radius-bottomright: $radius; + border-bottom-right-radius: $radius; +} +@mixin border-bottom-left-radius($radius) { + -webkit-border-bottom-left-radius: $radius; + -moz-border-radius-bottomleft: $radius; + border-bottom-left-radius: $radius; +} + +// Single Side Border Radius +@mixin border-top-radius($radius) { + @include border-top-right-radius($radius); + @include border-top-left-radius($radius); +} +@mixin border-right-radius($radius) { + @include border-top-right-radius($radius); + @include border-bottom-right-radius($radius); +} +@mixin border-bottom-radius($radius) { + @include border-bottom-right-radius($radius); + @include border-bottom-left-radius($radius); +} +@mixin border-left-radius($radius) { + @include border-top-left-radius($radius); + @include border-bottom-left-radius($radius); +} + +// Drop shadows +@mixin box-shadow($shadow) { + box-shadow: $shadow; +} + +// Transitions +@mixin transition($transition) { + transition: $transition; +} + +@mixin transition-delay($transition-delay) { + transition-delay: $transition-delay; +} + +@mixin transition-duration($transition-duration) { + transition-duration: $transition-duration; +} + +// Transformations +@mixin rotate($degrees) { + transform: rotate($degrees); +} + +@mixin scale($ratio) { + transform: scale($ratio); +} + +@mixin translate($x, $y) { + transform: translate($x, $y); +} + +@mixin skew($x, $y) { + transform: skew($x, $y); + -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 +} + +@mixin translate3d($x, $y, $z) { + transform: translate3d($x, $y, $z); +} + +@mixin backface-visibility($visibility) { + backface-visibility: $visibility; +} +// Heads up: FF 3.6 and under need "padding" instead of "padding-box" +@mixin background-clip($clip) { + background-clip: $clip; +} + +// Background sizing +@mixin background-size($size) { + background-size: $size; +} + +// Box sizing +@mixin box-sizing($boxmodel) { + box-sizing: $boxmodel; +} + +// User select +// For selecting text on the page +@mixin user-select($select) { + user-select: $select; +} + +// Resize anything +@mixin resizable($direction) { + resize: $direction; // Options: horizontal, vertical, both + overflow: auto; // Safari fix +} + +// CSS3 Content Columns +@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) { + -webkit-column-count: $columnCount; + -moz-column-count: $columnCount; + column-count: $columnCount; + -webkit-column-gap: $columnGap; + -moz-column-gap: $columnGap; + column-gap: $columnGap; +} + +// Optional hyphenation +@mixin hyphens($mode: auto) { + word-wrap: break-word; + -webkit-hyphens: $mode; + -moz-hyphens: $mode; + -ms-hyphens: $mode; + -o-hyphens: $mode; + hyphens: $mode; +} + +// Opacity +@mixin opacity($opacity) { + opacity: $opacity / 100; +} + +// BACKGROUNDS +// -------------------------------------------------- + +// Add an alphatransparency value to any background or border color (via Elyse Holladay) +#translucent { + @mixin background($color: $white, $alpha: 1) { + background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); + } + @mixin border($color: $white, $alpha: 1) { + border-color: hsla(hue($color), saturation($color), lightness($color), $alpha); + @include background-clip(padding-box); + } +} + +// Gradient Bar Colors for buttons and alerts +@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: $textColor; + text-shadow: $textShadow; + @include gradient-vertical($primaryColor, $secondaryColor); + border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); + border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); +} + +// Gradients +@mixin gradient-horizontal($startColor: #555, $endColor: #333) { + background-color: $endColor; + background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10 + background-repeat: repeat-x; +} + +@mixin gradient-vertical($startColor: #555, $endColor: #333) { + background-color: mix($startColor, $endColor, 60%); + background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10 + background-repeat: repeat-x; +} + +@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10 +} + +@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { + background-color: mix($midColor, $endColor, 80%); + background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor); + background-repeat: no-repeat; +} + +@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { + background-color: mix($midColor, $endColor, 80%); + background-image: linear-gradient($startColor, $midColor $colorStop, $endColor); + background-repeat: no-repeat; +} + +@mixin gradient-radial($innerColor: #555, $outerColor: #333) { + background-color: $outerColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)); + background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor); + background-image: -moz-radial-gradient(circle, $innerColor, $outerColor); + background-image: -o-radial-gradient(circle, $innerColor, $outerColor); + background-repeat: no-repeat; +} + +@mixin striped($color: #555, $angle: 45deg) { + background-color: $color; + background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); +} + + diff --git a/public/less/pages/admin.scss b/public/less/pages/admin.scss new file mode 100644 index 00000000000..30bc3ca8b34 --- /dev/null +++ b/public/less/pages/admin.scss @@ -0,0 +1,10 @@ + +.admin-settings-section { + color: $variable; + font-weight: bold; +} + +td.admin-settings-key { + padding-left: 20px; +} + diff --git a/public/less/pages/alerting.scss b/public/less/pages/alerting.scss new file mode 100644 index 00000000000..00ecf707520 --- /dev/null +++ b/public/less/pages/alerting.scss @@ -0,0 +1,42 @@ +.copy-query { + display: block; + width: 30px; + height: 36px; + margin: 0; + padding: 0; + border: 0; + background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat; + cursor: pointer; +} + +.alert-state { + display: inline-block; + padding-left: 30px; + background: 0 50% no-repeat; + background-size: 20px auto; +} + +.alert-state-online { + background-image: url('/img/online.svg'); +} + +.alert-state-warning { + background-image: url('/img/warn-tiny.svg'); +} + +.alert-state-critical { + background-image: url('/img/critical.svg'); +} + +.alert-notify-emails { + width: 400px; + border-right: 1px solid $black; +} + +.alert-notify-emails .bootstrap-tagsinput { + width: 394px; // offset for 8px left padding and border width +} + +.alert-notify-emails .bootstrap-tagsinput input { + border: 0; +} diff --git a/public/less/pages/apps.scss b/public/less/pages/apps.scss new file mode 100644 index 00000000000..35e4f8522cd --- /dev/null +++ b/public/less/pages/apps.scss @@ -0,0 +1,26 @@ + +.app-edit-logo-box { + padding: 1.2rem; + background: $grafanaPanelBackground; + text-align: center; + img { + max-width: 7rem; + } + margin-right: 2rem; +} + +.app-edit-links { + list-style: none; + margin: 0 0 0 2rem; + + li { + background: $grafanaPanelBackground; + margin-top: 4px; + padding: 0.2rem 1rem; + } +} + +.app-edit-description { + font-style: italic; + margin-bottom: 1.5rem; +} diff --git a/public/less/pages/login.scss b/public/less/pages/login.scss new file mode 100644 index 00000000000..a0f2188b4f2 --- /dev/null +++ b/public/less/pages/login.scss @@ -0,0 +1,169 @@ + +.login-form { + width: 50%; + float: left; + margin-left: 25%; + margin-right: 25%; + padding-top: 25px; +} + +.login-box { + width: 700px; + margin: 70px auto 0 auto; +} + +.login-box-logo { + text-align: center; + img { + width: 125px; + } + .icon-gf-grafana_wordmark { + color: $linkColor; + position: relative; + top: -90px; + font-size: 3rem; + text-shadow: 3px 3px 5px black; + } +} + +.login-inner-box { + background: $grafanaPanelBackground; +} + +.login-tab-header { + background: $grafanaTargetBackground; + text-align: center; +} + +.btn-login-tab { + background: transparent; + border: none; + font-size: 15px; + padding: 10px 10px; + + &.active { + background: darken($grafanaTargetBackground, 5%); + color: $white; + } + + font-weight: bold; + display: inline-block; + width: 170px; + color: $textColor; +} + +.password-strength { + display: block; + width: 15%; + overflow: visible; + white-space: nowrap; + padding-top: 3px; + color: darken($textColor, 20%); + border-top: 3px solid $red; + &.password-strength-ok { + width: 40%; + border-top: 3px solid lighten($yellow, 10%); + } + &.password-strength-good { + width: 100%; + border-top: 3px solid lighten($green, 10%); + } +} + +.login-submit-button-row { + text-align: center; + margin-top: 30px; + button { + padding: 14px 23px; + font-size: 16px; + font-weight: bold; + min-width: 150px; + display: inline-block; + border: 1px solid lighten($btnInverseBackground, 10%); + } +} + +.login-oauth { + margin-bottom: 15px; + + .btn { + margin: 5px; + } + + .btn-google { + background: #dd4b39; + color: white; + } + + .btn-github { + background: #555; + color: white; + } +} + +.password-recovery { + background: $grafanaTargetBackground; + margin-top: 10px; + padding: 10px; + a { + color: $grayLight; + } +} + +.login-divider { + float: left; + width: 50%; + margin: 5px 25% 25px 25%; + + .login-divider-line { + width: 100%; + height: 10px; + border-bottom: 1px solid $gray; + + .login-divider-text { + background-color: $grayDarker; + color: $grayLight; + padding: 0 10px; + } + } +} + +.signup-page-background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + background-image: url(../img/background_tease.jpg); + opacity: 0.3; + z-index: -1; +} + +.invite-box { + text-align: center; + border: 1px solid $grafanaTargetFuncBackground; + background-color: $grafanaPanelBackground; + width: 800px; + margin-left: auto; + margin-right: auto; + + .tight-form { + text-align: left; + } + + h3 { + margin-top: 30px; + } + + .modal-close { + float: right; + font-size: 140%; + padding: 10px; + } + + .modal-tagline { + font-size: 16px; + } +} diff --git a/public/less/pages/playlist.scss b/public/less/pages/playlist.scss new file mode 100644 index 00000000000..782d49d584d --- /dev/null +++ b/public/less/pages/playlist.scss @@ -0,0 +1,93 @@ +.playlist-search-container { + // margin: 15px; + z-index: 1000; + position: relative; + width: 700px; + box-shadow: 0px 0px 55px 0px black; + background-color: $grafanaPanelBackground; + + .label-tag { + margin-left: 6px; + font-size: 11px; + padding: 2px 6px; + } +} + +.playlist-search-switches { + position: absolute; + top: 8px; + right: 11px; +} + +.playlist-search-field-wrapper { + input { + width: 100%; + padding: 8px 8px; + height: 100%; + box-sizing: border-box; + } + button { + margin: 0 4px 0 0; + } + > span { + display: block; + overflow: hidden; + } +} + +.playlist-search-results-container { + min-height: 100px; + overflow: auto; + display: block; + line-height: 28px; + + .search-item:hover, .search-item.selected { + background-color: $grafanaListHighlight; + } + + .selected { + .search-result-tag { + opacity: 0.70; + color: white; + } + } + + .fa-star, .fa-star-o { + padding-left: 13px; + } + + .fa-star { + color: $orange; + } + + .search-result-link { + color: $grafanaListMainLinkColor; + .fa { + padding-right: 10px; + } + } + + .search-item { + display: block; + padding: 3px 10px; + white-space: nowrap; + background-color: $grafanaListBackground; + margin-bottom: 4px; + .search-result-icon:before { + content: "\f009"; + } + + &.search-item-dash-home .search-result-icon:before { + content: "\f015"; + } + } + + .search-result-tags { + float: right; + } + + .search-result-actions { + float: right; + padding-left: 20px; + } +} diff --git a/public/less/pages/signup.scss b/public/less/pages/signup.scss new file mode 100644 index 00000000000..7b2b0b0e84a --- /dev/null +++ b/public/less/pages/signup.scss @@ -0,0 +1,17 @@ +.signup-page-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + background-image: url(/img/background_tease.jpg); + + .signup-logo-container { + width: 150px; + margin: 0 auto; + padding: 80px 0; + } +} + diff --git a/public/less/utils/angular.scss b/public/less/utils/angular.scss new file mode 100644 index 00000000000..1519b249920 --- /dev/null +++ b/public/less/utils/angular.scss @@ -0,0 +1,7 @@ + + +[ng\:cloak], [ng-cloak], .ng-cloak { + display: none !important; +} + + diff --git a/public/less/utils/utils.scss b/public/less/utils/utils.scss new file mode 100644 index 00000000000..497142956a8 --- /dev/null +++ b/public/less/utils/utils.scss @@ -0,0 +1,64 @@ +.highlight-word { + color: $orange; +} + +// Close icons +// -------------------------------------------------- +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: $baseLineHeight; + color: $black; + text-shadow: 0 1px 0 rgba(255,255,255,1); + @include opacity(20); + &:hover, + &:focus { + color: $black; + text-decoration: none; + cursor: pointer; + @include opacity(40); + } +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} + +// +// Utility classes +// -------------------------------------------------- + + +// Quick floats +.pull-right { + float: right; +} +.pull-left { + float: left; +} + +// Toggling content +.hide { + display: none; +} +.show { + display: block; +} + +// Visibility +.invisible { + visibility: hidden; +} + +// For Affix plugin +.affix { + position: fixed; +} diff --git a/public/less/utils/validation.scss b/public/less/utils/validation.scss new file mode 100644 index 00000000000..b732322d2de --- /dev/null +++ b/public/less/utils/validation.scss @@ -0,0 +1,7 @@ +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.scss b/public/less/variables.dark.scss new file mode 100644 index 00000000000..7237b386e7f --- /dev/null +++ b/public/less/variables.dark.scss @@ -0,0 +1,342 @@ +// Global values +// -------------------------------------------------- + + +// Grays +// ------------------------- +$black: #000; +$gray: #bbb; +$grayDark: #262626; +$grayDarker: #1f1f1f; + +$grayLight: #ADAFAE; +$grayLighter: #BBBFC2; +$white: #fff; + +// Accent colors +// ------------------------- +$blue: #33B5E5; +$blueDark: #005f81; +$green: #669900; +$red: #CC3900; +$yellow: #ECBB13; +$orange: #FF8800; +$pink: #FF4444; +$purple: #9933CC; +$variable: #32D1DF; + +// Status colors +// ------------------------- +$online: #10a345; +$warn: #ffc03c; +$critical: #ed2e18; + +// grafana Variables +// ------------------------- +$grafanaPanelBackground: $grayDarker; +$grafanaPanelBorder: solid 1px $grayDark; +$grafanaTriggerBorder: solid 1px #555; + +// Graphite Target Editor +$grafanaTargetBorder: $black; +$grafanaTargetBackground: $grayDark; +$grafanaTargetColor: #c8c8c8; +$grafanaTargetColorHide: darken(#c8c8c8, 25%); +$grafanaTargetSegmentBorder: #050505; + +$grafanaTargetFuncBackground: #333; +$grafanaTargetFuncHightlight: #444; + +$grafanaSelectBackground: $grafanaTargetFuncBackground; + +$modalBackground: $black; +$codeTagBackground: #444; + +// Scaffolding +// ------------------------- +$bodyBackground: rgb(20,20,20); +$pageBackground: $grayDarker; +$textColor: $grayLighter; + +// Links +// ------------------------- +$linkColor: darken($white,11%); +$linkColorDisabled: darken($linkColor,30%); +$linkColorHover: $white; + + +// Typography +// ------------------------- +$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$serifFontFamily: Georgia, "Times New Roman", Times, serif; +$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; + +$baseFontSize: 14px; +$baseFontWeight: 400; +$baseFontFamily: $sansFontFamily; +$baseLineHeight: 20px; +$altFontFamily: $serifFontFamily; +$fontWeightSemi: 600; + +$headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily +$headingsFontWeight: 400; // instead of browser default, bold +$headingsFontStyle: normal; +$headingsColor: darken($white,11%); // empty to use BS default, $textColor +$inputText: $grayLight; + + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +$fontSizeLarge: $baseFontSize * 1.25; // ~18px +$fontSizeSmall: $baseFontSize * 0.85; // ~12px +$fontSizeMini: $baseFontSize * 0.75; // ~11px + +$paddingLarge: 11px 19px; // 44px +$paddingSmall: 2px 10px; // 26px +$paddingMini: 0px 6px; // 22px + +$baseBorderRadius: 3px; +$borderRadiusLarge: 4px; +$borderRadiusSmall: 2px; + +// Lists +$grafanaListBackground: $grayDark; +$grafanaListAccent: lighten($grayDarker, 2%); +$grafanaListBorderTop: $grayDark; +$grafanaListBorderBottom: $black; +$grafanaListHighlight: #333; +$grafanaListMainLinkColor: $textColor; + +// Scrollbars +$scrollbarBackground: #3a3a3a; +$scrollbarBackground2: #3a3a3a; +$scrollbarBorder: black; + +// Tables +// ------------------------- +$tableBackground: transparent; // overall background-color +$tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping +$tableBackgroundHover: $grayDark; // for hover +$tableBorder: $grayDark; // table and cell border + +// Buttons +// ------------------------- +$btnBackground: $grayDark; +$btnBackgroundHighlight: darken($grayLight, 15%); +$btnBackgroundShadow: darken($grayLight, 15%); +$btnBorder: #bbb; + +$btnPrimaryBackground: $blueDark; +$btnPrimaryBackgroundHighlight: lighten($blueDark, 5%); + +$btnInfoBackground: lighten($purple, 3%); +$btnInfoBackgroundHighlight: darken($purple, 3%); + +$btnSuccessBackground: lighten($green, 3%); +$btnSuccessBackgroundHighlight: darken($green, 3%); + +$btnWarningBackground: lighten($orange, 3%); +$btnWarningBackgroundHighlight: darken($orange, 3%); + +$btnDangerBackground: lighten($red, 3%); +$btnDangerBackgroundHighlight: darken($red, 3%); + +$btnInverseBackground: $grayDark; +$btnInverseBackgroundHighlight: lighten($grayDark, 1%); +$btnInverseText: $textColor; +$btnInverseBorder: #333; + +$btnText: $gray; + +$iconContainerBackground: $black; +$iconContainerBackgroundHighlight: lighten($black, 5%); +$iconContainerBorder: 1px solid transparent; +$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); + + +// Forms +// ------------------------- +$inputBackground: lighten($grayDark,5%); +$inputBorder: lighten($grayDark,5%); +$inputBorderRadius: $baseBorderRadius; +$inputDisabledBackground: #555; +$formActionsBackground: transparent; +$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +$labelBackground: $grayDark; + + +// Sidemenu +// ------------------------- +$sideMenuTopShadow: $navbarDropdownShadow; +$sideMenuBackground: $grayDark; +$sideMenuBackgroundHighlight: lighten($grayDark, 4%); +$sideMenuShadow: 0 0 35px 0 $bodyBackground; + +// Search +$searchShadow: 0 0 35px 0 $bodyBackground; + +// Dropdowns +// ------------------------- +$dropdownBackground: $heroUnitBackground; +$dropdownBorder: rgba(0,0,0,.2); +$dropdownDividerTop: transparent; +$dropdownDividerBottom: #444; +$dropdownDivider: $dropdownDividerBottom; +$dropdownTitle: $linkColorDisabled; + +$dropdownLinkColor: $textColor; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundActive: $blueDark; +$dropdownLinkBackgroundHover: $blueDark; + + + +// COMPONENT VARIABLES +// -------------------------------------------------- + + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindexDropdown: 1000; +$zindexPopover: 1010; +$zindexTooltip: 1020; +$zindexFixedNavbar: 1030; +$zindexModalBackdrop: 1040; +$zindexModal: 1050; + +// Sprite icons path +// ------------------------- +$iconSpritePath: "../img/glyphicons-halflings.png"; +$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; + + +// Input placeholder text color +// ------------------------- +$placeholderText: darken($textColor, 25%); + + +// Hr border color +// ------------------------- +$hrBorder: $grayDark; + + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + + +// Wells +// ------------------------- +$wellBackground: #131517; + + +// Navbar +// ------------------------- +$navbarCollapseWidth: 979px; +$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; + +$navbarHeight: 52px; +$navbarBackgroundHighlight: $grayDark; +$navbarBackground: $grayDark; +$navbarBorder: 1px solid $bodyBackground; + +$navbarText: $grayLight; +$navbarLinkColor: $grayLight; +$navbarLinkColorHover: $white; +$navbarLinkColorActive: $navbarLinkColorHover; +$navbarLinkBackgroundHover: transparent; +$navbarLinkBackgroundActive: $navbarBackground; +$navbarBrandColor: $linkColor; +$navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground; + +$navbarButtonBackground: lighten($navbarBackground, 3%); +$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + +// Pagination +// ------------------------- +$paginationBackground: $bodyBackground; +$paginationBorder: transparent; +$paginationActiveBackground: $blue; + + +// Hero unit +// ------------------------- +$heroUnitBackground: $grayDark; +$heroUnitHeadingColor: inherit; +$heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +$warningText: darken(#c09853, 10%); +$warningBackground: $orange; + +$errorText: #b94a48; +$errorBackground: $btnDangerBackground; + +$successText: #468847; +$successBackground: $btnSuccessBackground; + +$infoText: $blueDark; +$infoBackground: $btnInfoBackground; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $white; +$tooltipBackground: rgb(58, 57, 57); +$tooltipArrowWidth: 5px; +$tooltipArrowColor: $tooltipBackground; +$tooltipLinkColor: $linkColor; + +$popoverBackground: $heroUnitBackground; +$popoverArrowWidth: 10px; +$popoverArrowColor: $popoverBackground; +$popoverTitleBackground: $popoverBackground; + +// Special enhancement for popovers +$popoverArrowOuterWidth: $popoverArrowWidth + 1; +$popoverArrowOuterColor: rgba(0,0,0,.25); + +// images +$checkboxImageUrl: '../img/checkbox.png'; + +// GRID +// -------------------------------------------------- + + +// Default 940px grid +// ------------------------- +$gridColumns: 12; +$gridColumnWidth: 60px; +$gridGutterWidth: 20px; +$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); + +// 1200px min +$gridColumnWidth1200: 70px; +$gridGutterWidth1200: 30px; +$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); + +// 768px-979px +$gridColumnWidth768: 42px; +$gridGutterWidth768: 20px; +$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); + + +// Fluid grid +// ------------------------- +$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); +$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); + +// 1200px min +$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); +$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); + +// 768px-979px +$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); +$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); diff --git a/public/less/variables.light.scss b/public/less/variables.light.scss new file mode 100644 index 00000000000..5cc0908e42e --- /dev/null +++ b/public/less/variables.light.scss @@ -0,0 +1,359 @@ +// Cosmo 2.3.2 +// Variables +// -------------------------------------------------- + + +// Global values +// -------------------------------------------------- + + +// Grays +// ------------------------- +$black: #000; +$grayDarker: lighten(#000, 11.5%); // #222 +$grayDark: lighten(#000, 20%); // #333 +$gray: lighten(#000, 33.5%); // #555 +$grayLight: lighten(#000, 60%); // #999 +$grayLighter: lighten(#000, 97.5%); // #eee +$white: #fff; + + +// Accent colors +// ------------------------- +$blueOrig: #007FFF; +$blue: #2AB2E4; +$blueDark: #75CAEB; +$green: #28B62C; +$red: #FF4136; +$yellow: #FF851B; +$orange: #FF7518; +$pink: #E671B8; +$purple: #9954BB; +$variable: #2AB2E4; + +// Status colors +// ------------------------- +$online: #01A64F; +$warn: #F79520; +$critical: #EC2128; + +// grafana Variables +// ------------------------- +$grafanaPanelBackground: $grayLighter; +$grafanaPanelBorder: solid 1px #ddd; +$grafanaTriggerBorder: solid 1px $grayLight; + +// Submenu +$submenuBackground: rgb(218, 217, 217); +$submenuBorder: $white; + +// Tabs +$fullEditBorder: $grayLighter; + +// Graphite Target Editor +$grafanaTargetBorder: #ddd; +$grafanaTargetBackground: #efefef; +$grafanaTargetColor: $textColor; +$grafanaTargetColorHide: lighten($textColor, 25%); +$grafanaTargetSegmentBorder: #ddd; + +$grafanaTargetFuncBackground: darken($grafanaTargetBackground, 5%); +$grafanaTargetFuncHightlight: darken($grafanaTargetBackground, 10%); + +$grafanaSelectBackground: $grafanaTargetFuncBackground; + +$modalBackground: $bodyBackground; +$codeTagBackground: #ddd; + +// Scaffolding +// ------------------------- +$bodyBackground: #EFEFEF; +$pageBackground: $white; +$textColor: $gray; + +// Links +// ------------------------- +$linkColor: $gray; +$linkColorDisabled: lighten($linkColor,30%); +$linkColorHover: darken($linkColor, 20%); + +// Typography +// ------------------------- +$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$serifFontFamily: Georgia, "Times New Roman", Times, serif; +$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; + +$baseFontSize: 14px; +$baseFontWeight: 400; +$fontWeightSemi: 600; +$baseFontFamily: $sansFontFamily; +$baseLineHeight: 20px; +$altFontFamily: $serifFontFamily; + +$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily +$headingsFontWeight: normal; // instead of browser default, bold +$headingsFontStyle: normal; +$headingsColor: $textColor; // empty to use BS default, $textColor + + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +$fontSizeLarge: $baseFontSize * 1.25; // ~18px +$fontSizeSmall: $baseFontSize * 0.85; // ~12px +$fontSizeMini: $baseFontSize * 0.75; // ~11px + +$paddingLarge: 22px 30px; // 66px +$paddingSmall: 2px 10px; // 26px +$paddingMini: 2px 6px; // 24px + +$baseBorderRadius: 3px; +$borderRadiusLarge: 4px; +$borderRadiusSmall: 2px; + +// Lists +$grafanaListBackground: darken($grayLighter,5%); +$grafanaListAccent: darken($grayLighter,8%); +$grafanaListBorderTop: #eee; +$grafanaListBorderBottom: #eee; +$grafanaListHighlight: darken($grayLighter,10%); +$grafanaListHighlightContrast: #ddd; +$grafanaListMainLinkColor: $textColor; + + +// Tables +// ------------------------- +$tableBackground: transparent; // overall background-color +$tableBackgroundAccent: #f9f9f9; // for striping +$tableBackgroundHover: #E8F8FD; // for hover +$tableBorder: #ddd; // table and cell border + +// Scrollbars +$scrollbarBackground: $grayLighter; +$scrollbarBackground2: $grayLighter; +$scrollbarBorder: $grayLight; + +// Buttons +// ------------------------- +$btnBackground: $grayLighter; +$btnBackgroundHighlight: darken($grayLighter, 15%); +$btnBorder: #bbb; + +$btnPrimaryBackground: lighten($blue, 3%); +$btnPrimaryBackgroundHighlight: darken($blue, 3%); + +$btnInfoBackground: lighten($purple, 3%); +$btnInfoBackgroundHighlight: darken($purple, 3%); + +$btnSuccessBackground: lighten($green, 3%); +$btnSuccessBackgroundHighlight: darken($green, 3%); + +$btnWarningBackground: lighten($orange, 3%); +$btnWarningBackgroundHighlight: darken($orange, 3%); + +$btnDangerBackground: lighten($red, 3%); +$btnDangerBackgroundHighlight: darken($red, 3%); + +$btnInverseBackground: $grayLighter; +$btnInverseBackgroundHighlight: darken($grayLighter, 5%); +$btnInverseText: $black; +$btnInverseBorder: $grayLight; + +$btnText: $grayLighter; + +$iconContainerBackground: $white; +$iconContainerBackgroundHighlight: lighten($white, 5%); +$iconContainerBorder: 1px solid rgba(0,0,0, 0.05); +$iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); + + +// Forms +// ------------------------- +$inputBackground: $white; +$inputBorder: $grayLight; +$inputBorderRadius: $baseBorderRadius; +$inputDisabledBackground: $grayLighter; +$formActionsBackground: #f5f5f5; +$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +$inputText: #020202; +$labelBackground: #f8f8f8; + + +// Sidemenu +// ------------------------- +$sideMenuBackground: $grafanaPanelBackground; +$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); + +// search +$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%); + +// Dropdowns +// ------------------------- +$dropdownBackground: $white; +$dropdownBorder: $grafanaTargetBorder; +$dropdownDividerTop: #e5e5e5; +$dropdownDividerBottom: $white; +$dropdownDivider: $dropdownDividerTop; +$dropdownTitle: #333; + +$dropdownLinkColor: $grayDark; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundActive: $blue; +$dropdownLinkBackgroundHover: $blue; + + +// COMPONENT VARIABLES +// -------------------------------------------------- + + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindexDropdown: 1000; +$zindexPopover: 1010; +$zindexTooltip: 1030; +$zindexFixedNavbar: 1030; +$zindexModalBackdrop: 1040; +$zindexModal: 1050; + + +// Sprite icons path +// ------------------------- +$iconSpritePath: "../img/glyphicons-halflings.png"; +$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; + + +// Input placeholder text color +// ------------------------- +$placeholderText: $grayLight; + + +// Hr border color +// ------------------------- +$hrBorder: $grayLighter; + + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + + +// Wells +// ------------------------- +$wellBackground: $grayLighter; + + +// Navbar +// ------------------------- +$navbarCollapseWidth: 979px; +$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; + +$navbarHeight: 52px; +$navbarBackgroundHighlight: #f8f8f8; +$navbarBackground: #f8f8f8; +$navbarBorder: 1px solid $grafanaTargetBorder; + +$navbarText: #666; +$navbarLinkColor: #666; +$navbarLinkColorHover: #333; +$navbarLinkColorActive: #555; +$navbarLinkBackgroundHover: transparent; +$navbarLinkBackgroundActive: darken($navbarBackground, 6.5%); +$navbarDropdownShadow: inset 0px 4px 7px -4px darken($bodyBackground, 20%); + +$navbarBrandColor: $navbarLinkColor; + +$navbarButtonBackground: lighten($navbarBackground, 3%); +$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + + +// Pagination +// ------------------------- +$paginationBackground: $grayLight; +$paginationBorder: transparent; +$paginationActiveBackground: $blue; + + +// Hero unit +// ------------------------- +$heroUnitBackground: $grayLighter; +$heroUnitHeadingColor: inherit; +$heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +$warningText: lighten($orange, 10%); +$warningBackground: $orange; +$warningBorder: transparent; + +$errorText: lighten($red, 10%); +$errorBackground: $red; +$errorBorder: transparent; + +$successText: lighten($green, 10%); +$successBackground: $green; +$successBorder: transparent; + +$infoText: lighten($purple,10%); +$infoBackground: $purple; +$infoBorder: transparent; + + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $white; +$tooltipBackground: $grayDark; +$tooltipArrowWidth: 5px; +$tooltipArrowColor: $tooltipBackground; +$tooltipLinkColor: darken($white,11%); + +$popoverBackground: $white; +$popoverArrowWidth: 15px; +$popoverArrowColor: $white; +$popoverTitleBackground: $white; + +// Special enhancement for popovers +$popoverArrowOuterWidth: $popoverArrowWidth + 1; +$popoverArrowOuterColor: rgba(0,0,0,.25); + +// images +$checkboxImageUrl: '../img/checkbox_white.png'; + +// GRID +// -------------------------------------------------- + +// Default 940px grid +// ------------------------- +$gridColumns: 12; +$gridColumnWidth: 60px; +$gridGutterWidth: 20px; +$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); + +// 1200px min +$gridColumnWidth1200: 70px; +$gridGutterWidth1200: 30px; +$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); + +// 768px-979px +$gridColumnWidth768: 42px; +$gridGutterWidth768: 20px; +$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); + + +// Fluid grid +// ------------------------- +$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); +$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); + +// 1200px min +$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); +$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); + +// 768px-979px +$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); +$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); diff --git a/tasks/options/concat.js b/tasks/options/concat.js index eea68919253..521db4d9f39 100644 --- a/tasks/options/concat.js +++ b/tasks/options/concat.js @@ -7,7 +7,6 @@ module.exports = function(config) { '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', '<%= genDir %>/css/bootstrap.dark.min.css', - '<%= genDir %>/css/bootstrap-responsive.min.css', '<%= genDir %>/vendor/css/font-awesome.min.css' ], dest: '<%= genDir %>/css/grafana.dark.min.css' @@ -18,7 +17,6 @@ module.exports = function(config) { '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', '<%= genDir %>/css/bootstrap.light.min.css', - '<%= genDir %>/css/bootstrap-responsive.min.css', '<%= genDir %>/vendor/css/font-awesome.min.css' ], dest: '<%= genDir %>/css/grafana.light.min.css' diff --git a/tasks/options/sass.js b/tasks/options/sass.js new file mode 100644 index 00000000000..38e72f28a98 --- /dev/null +++ b/tasks/options/sass.js @@ -0,0 +1,12 @@ +module.exports = function(config) { + + return { + src:{ + options: {}, + files: { + "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss", + "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss", + } + } + }; +}; diff --git a/tasks/options/watch.js b/tasks/options/watch.js index 187b07696c7..8e02bb2a509 100644 --- a/tasks/options/watch.js +++ b/tasks/options/watch.js @@ -21,9 +21,9 @@ module.exports = function(config, grunt) { grunt.task.run('jscs'); } - if (/(\.less)$/.test(filepath)) { + if (/(\.scss)$/.test(filepath)) { grunt.task.run('clean:css'); - grunt.task.run('css'); + grunt.task.run('sass'); } if (/(\.ts)$/.test(filepath)) {