diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index f12e3b4e4c7..23680ebb9a7 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -4,19 +4,19 @@

Http settings

- Url + Url
- + Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request
- + Http Auth @@ -24,14 +24,14 @@
- + User
- + Passord diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 6d50a7eff4b..c5e1780ef70 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -10,19 +10,19 @@

Preferences

- Name + Name
- Email + Email
- Username + Username
- UI Theme + UI Theme
@@ -36,29 +36,30 @@ Change Password
-

Organizations

- - - - - - - - - - - - - - - -
NameRole
{{org.name}}{{org.role}} - - Current - - - Select - -
- +
+

Organizations

+ + + + + + + + + + + + + + + +
NameRole
{{org.name}}{{org.role}} + + Current + + + Select + +
+
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 0922e8f0b0d..7af990353bf 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -5,6 +5,7 @@ @import "mixins/grid"; @import "mixins/grid-framework"; @import "mixins/hover"; +@import "mixins/forms"; // BASE @@ -38,7 +39,6 @@ @import "components/sidemenu"; @import "components/navbar"; @import "components/gfbox"; -@import "components/pagination"; @import "components/tabs"; @import "components/timepicker"; @import "components/filter-controls"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 5fb7fcb982e..d62eed99bb0 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -25,6 +25,11 @@ $pink: #FF4444; $purple: #9933CC; $variable: #32D1DF; +$brand-primary: $blue-dark; +$brand-success: $green; +$brand-warning: $orange; +$brand-danger: $red; + // Status colors // ------------------------- $online: #10a345; @@ -46,9 +51,8 @@ $link-hover-color: $white; // Typography // ------------------------- -$headings-color: darken($white,11%); +$headings-color: darken($white,11%); $abbr-border-color: $gray-light !default; - $text-muted: darken($link-color,30%); $blockquote-small-color: $gray-light !default; @@ -56,31 +60,34 @@ $blockquote-border-color: $gray-lighter !default; $hr-border-color: rgba(0,0,0,.1) !default; +// Components +$component-active-color: #fff !default; +$component-active-bg: $brand-primary !default; + // Panel // ------------------------- $panel-bg: $gray-darker; $panel-border: solid 1px $gray-dark; -$divider-border-color: #555; +$divider-border-color: #555; // Graphite Target Editor $tight-form-border: #050505; $tight-form-bg: $gray-dark; - + $tight-form-func-bg: #333; $tight-form-func-highlight-bg: #444; $modal-background: $black; $code-tag-bg: #444; - // Lists -$grafanaListBackground: $gray-dark; -$grafanaListAccent: lighten($gray-darker, 2%); +$grafanaListBackground: $gray-dark; +$grafanaListAccent: lighten($gray-darker, 2%); $grafanaListBorderTop: $gray-dark; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; -$grafanaListMainLinkColor: $text-color; +$grafanaListMainLinkColor: $text-color; // Scrollbars $scrollbarBackground: #3a3a3a; @@ -128,22 +135,19 @@ $iconContainerBackgroundHighlight: lighten($black, 5%); $iconContainerBorder: 1px solid transparent; $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); -// Hero unit -// ------------------------- -$heroUnitBackground: $gray-dark; -$heroUnitHeadingColor: inherit; -$heroUnitLeadColor: inherit; - // Forms // ------------------------- -$inputBackground: lighten($gray-dark,5%); -$inputBorder: lighten($gray-dark,5%); -$inputBorderRadius: $baseBorderRadius; -$inputText: $gray-light; -$inputDisabledBackground: #555; -$formActionsBackground: transparent; -$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border -$labelBackground: $gray-dark; +$input-bg: lighten($gray-dark,5%); +$input-bg-disabled: #555; + +$input-color: $gray-light; +$input-border-color: lighten($gray-dark,5%); +$input-btn-border-width: 1px; +$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; +$input-border-focus: $input-border-color !default; +$input-box-shadow-focus: rgba(102,175,233,.6) !default; +$input-color-placeholder: #999 !default; +$input-label-bg: $gray-dark; // Search @@ -151,7 +155,7 @@ $searchShadow: 0 0 35px 0 $body-bg; // Dropdowns // ------------------------- -$dropdownBackground: $heroUnitBackground; +$dropdownBackground: $gray-dark; $dropdownBorder: rgba(0,0,0,.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -185,11 +189,6 @@ $zindexModal: 1050; $placeholderText: darken($text-color, 25%); -// Hr border color -// ------------------------- -$hrBorder: $gray-dark; - - // Horizontal forms & lists // ------------------------- $horizontalComponentOffset: 180px; @@ -251,7 +250,7 @@ $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; $tooltipLinkColor: $link-color; -$popoverBackground: $heroUnitBackground; +$popoverBackground: $dropdownBackground; $popoverArrowWidth: 10px; $popoverArrowColor: $popoverBackground; $popoverTitleBackground: $popoverBackground; @@ -262,38 +261,3 @@ $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/sass/_variables.light.scss b/public/sass/_variables.light.scss index 02631edda52..1898f06fd39 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -30,6 +30,11 @@ $pink: #E671B8; $purple: #9954BB; $variable: #2AB2E4; +$brand-primary: $blue-dark; +$brand-success: $green; +$brand-warning: $orange; +$brand-danger: $red; + // Status colors // ------------------------- $online: #01A64F; @@ -53,7 +58,7 @@ $link-hover-color: darken($link-color, 20%); // Typography // ------------------------- $headings-color: $text-color; -$abbr-border-color: $gray-light !default; +$abbr-border-color: $gray-light !default; $text-muted: darken($link-color,30%); $blockquote-small-color: $gray-light !default; @@ -61,9 +66,13 @@ $blockquote-border-color: $gray-lighter !default; $hr-border-color: rgba(0,0,0,.1) !default; +// Components +$component-active-color: #fff !default; +$component-active-bg: $brand-primary !default; + // Panel // ------------------------- - + $panel-bg: $gray-lighter; $panel-border: solid 1px #ddd; @@ -83,22 +92,6 @@ $tight-form-func-highlight-bg: darken($tight-form-bg, 10%); $modal-background: $body-bg; $code-tag-bg: #ddd; -// Component sizing -// ------------------------- -// Based on 14px font-size and 20px line-height - -$font-size-lg: $font-size-base * 1.25; // ~18px -$font-size-sm: $font-size-base * 0.85; // ~12px -$font-size-xs: $font-size-base * 0.75; // ~11px - -$paddingLarge: 22px 30px; // 66px -$paddingSmall: 2px 10px; // 26px -$paddingMini: 2px 6px; // 24px - -$baseBorderRadius: 3px; -$borderRadiusLarge: 4px; -$borderRadiusSmall: 2px; - // Lists $grafanaListBackground: darken($gray-lighter,5%); $grafanaListAccent: darken($gray-lighter,8%); @@ -159,15 +152,17 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); // Forms // ------------------------- -$inputBackground: $white; -$inputBorder: $gray-lighter; -$inputBorderRadius: $baseBorderRadius; -$inputDisabledBackground: $gray-lighter; -$formActionsBackground: #f5f5f5; -$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border -$inputText: #020202; -$labelBackground: #f8f8f8; +$input-bg: $white; +$input-bg-disabled: $gray-lighter; +$input-color: #020202; +$input-border-color: $gray-lighter; +$input-btn-border-width: 1px; +$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; +$input-border-focus: #66afe9 !default; +$input-box-shadow-focus: rgba(102,175,233,.6) !default; +$input-color-placeholder: #999 !default; +$input-label-bg: #f8f8f8; // Sidemenu // ------------------------- @@ -259,13 +254,6 @@ $paginationBorder: transparent; $paginationActiveBackground: $blue; -// Hero unit -// ------------------------- -$heroUnitBackground: $gray-lighter; -$heroUnitHeadingColor: inherit; -$heroUnitLeadColor: inherit; - - // Form states and alerts // ------------------------- $state-warning-text: lighten($orange, 10%); @@ -305,36 +293,4 @@ $popoverArrowOuterColor: rgba(0,0,0,.25); // images $checkboxImageUrl: '../img/checkbox_white.png'; -// GRID -// -------------------------------------------------- -// Default 940px grid -// ------------------------- -$gridColumns: 12; -$gridColumnWidth: 60px; -$gridGutterWidth: 20px; -$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); - -// 1200px min -$gridColumnWidth1200: 70px; -$gridGutterWidth1200: 30px; -$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); - -// 768px-979px -$gridColumnWidth768: 42px; -$gridGutterWidth768: 20px; -$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); - - -// Fluid grid -// ------------------------- -$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); -$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); - -// 1200px min -$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); -$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); - -// 768px-979px -$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); -$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 9e48afbefa3..85666374912 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -106,11 +106,11 @@ $font-size-xs: .75rem !default; $line-height-base: 1.5 !default; $font-weight-semi-bold: 600; -$font-size-h1: 2.5rem !default; -$font-size-h2: 2rem !default; -$font-size-h3: 1.75rem !default; -$font-size-h4: 1.5rem !default; -$font-size-h5: 1.25rem !default; +$font-size-h1: 2.0rem !default; +$font-size-h2: 1.75rem !default; +$font-size-h3: 1.50rem !default; +$font-size-h4: 1.30rem !default; +$font-size-h5: 1.20rem !default; $font-size-h6: 1rem !default; $display1-size: 6rem !default; @@ -143,14 +143,19 @@ $nested-kbd-font-weight: bold !default; $list-inline-padding: 5px !default; +// Components +// +// Define common padding and border radius sizes and more. -$paddingLarge: 11px 19px; // 44px -$paddingSmall: 2px 10px; // 26px -$paddingMini: 0px 6px; // 22px +$line-height-lg: (4 / 3) !default; +$line-height-sm: 1.5 !default; -$baseBorderRadius: 3px; -$borderRadiusLarge: 4px; -$borderRadiusSmall: 2px; +$border-radius: 0.0rem !default; +$border-radius-lg: 0.3rem !default; +$border-radius-sm: 0.2rem !default; + +$caret-width: .3em !default; +$caret-width-lg: $caret-width !default; // Links // ------------------------- @@ -162,4 +167,32 @@ $link-hover-decoration: none !default; // Customizes the `.table` component with basic values, each used across all table variations. $table-cell-padding: .75rem !default; -$table-sm-cell-padding: .3rem !default; \ No newline at end of file +$table-sm-cell-padding: .3rem !default; + +// Forms +$input-padding-x: .75rem !default; +$input-padding-y: .5rem !default; +$input-line-height: 1.25 !default; + +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; + +$input-padding-x-sm: .5rem !default; +$input-padding-y-sm: .25rem !default; + +$input-padding-x-lg: 1.5rem !default; +$input-padding-y-lg: .75rem !default; + +$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; +$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; +$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; + +$form-group-margin-bottom: $spacer-y !default; + +$cursor-disabled: not-allowed !default; + +// Form validation icons +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index 441f0341f27..b3d65bc3614 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -78,11 +78,11 @@ input[type="tel"], input[type="color"], .uneditable-input { display: inline-block; - height: $line-height-base; + height: $input-height; + line-height: $input-line-height; padding: 4px 6px; font-size: $font-size-base; - line-height: $line-height-base; - color: $inputText; + color: $input-color; vertical-align: top; } @@ -115,8 +115,8 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - background-color: $inputBackground; - border: 1px solid $inputBorder; + background-color: $input-bg; + border: 1px solid $input-border-color; @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @include transition("border linear .2s, box-shadow linear .2s"); @@ -149,15 +149,15 @@ input[type="checkbox"] { // 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; + height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + line-height: $input-height; } // 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 + border: 1px solid $input-border-color; + background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color } // Make multiple select elements height not fixed @@ -183,7 +183,6 @@ textarea { @include placeholder(); } - // INPUT SIZES // ----------- @@ -209,7 +208,7 @@ input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; - background-color: $inputDisabledBackground; + background-color: $input-bg-disabled; } // Explicitly reset the colors here @@ -288,3 +287,41 @@ input[type="checkbox"]:checked+label { box-sizing: border-box; } } + +// Form control feedback states +// +// Apply contextual and semantic states to individual form controls. + +.form-control-success, +.form-control-warning, +.form-control-danger { + padding-right: ($input-padding-x * 3); + background-repeat: no-repeat; + background-position: center right ($input-height / 4); + background-size: ($input-height / 2) ($input-height / 2); +} + +// Form validation states +.has-success { + @include form-control-validation($brand-success); + + .form-control-success { + background-image: $form-icon-success; + } +} + +.has-warning { + @include form-control-validation($brand-warning); + + .form-control-warning { + background-image: $form-icon-warning; + } +} + +.has-danger { + @include form-control-validation($brand-danger); + + .form-control-danger { + background-image: $form-icon-danger; + } +} diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 60a02755fe7..0cd1871edd0 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -194,14 +194,6 @@ dd { // MISC // ---- -// Horizontal rules -hr { - margin: $line-height-base 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 diff --git a/public/sass/components/_color_picker.scss b/public/sass/components/_color_picker.scss index bc3c11aed0c..9e8adfd6226 100644 --- a/public/sass/components/_color_picker.scss +++ b/public/sass/components/_color_picker.scss @@ -13,7 +13,7 @@ .sp-container { border-radius: 0; - background-color: $heroUnitBackground; + background-color: $dropdownBackground; border: none; padding: 0; } diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 7f1d0bedff3..546f8b1c168 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -239,6 +239,5 @@ // --------- .typeahead { z-index: 1051; - margin-top: 2px; // give it some space to breathe - @include border-radius($baseBorderRadius); + margin-top: 2px; // give it some space to breathe } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index a52fed03057..a9a319a64f1 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -19,7 +19,10 @@ $gf-form-margin: 4px; } .gf-form-group { - margin-bottom: 20px; + h3, h2, h4 { + margin-top: $spacer * 2; + margin-bottom: $spacer * 1; + } } .gf-form-inline { @@ -40,7 +43,7 @@ $gf-form-margin: 4px; .gf-form-label { flex-shrink: 0; - background-color: $labelBackground; + background-color: $input-label-bg; display: block; padding: 8px 7px; font-size: $font-size-sm; @@ -51,39 +54,6 @@ $gf-form-margin: 4px; flex-shrink: 0; } -[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; - display: block; - width: 100%; - margin-right: $gf-form-margin; - } - &.gf-size-auto { width: auto; } -} - -input[type=checkbox].gf-form-checkbox { - margin: 0; -} - -select.gf-form-input { - padding: 2px 3px; - font-size: 15px; - box-sizing: content-box; - display: block; - width: 100%; - margin-right: $gf-form-margin; - &.gf-size-auto { width: auto; } -} - @each $size, $value in $form-sizes { .gf-size-#{$size} { width: $value; } @@ -95,3 +65,55 @@ select.gf-form-input { .gf-size-max { width: 100%; } .gf-size-auto { width: auto; } + +select, +[type=text], +[type=email], +[type=number], +[type=password] { + &.gf-form-input { + display: block; + width: 100%; + padding: $input-padding-y $input-padding-x; + font-size: $font-size-base; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + background-image: none; + background-clip: padding-box; + border: $input-btn-border-width solid $input-border-color; + @include border-radius($input-border-radius); + @include box-shadow($input-box-shadow); + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + + // Unstyle the caret on `` +// element gets special love because it's special, and that's a fact! + +@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) { + #{$parent} { + height: $input-height; + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; + @include border-radius($border-radius); + } + + select#{$parent} { + height: $input-height; + line-height: $input-height; + } + + textarea#{$parent}, + select[multiple]#{$parent} { + height: auto; + } +} diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index 34135fd1d07..2c33ea82daa 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -118,7 +118,7 @@ .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) + min-height: $input-line-height; // 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 }