-
Default query settings
-
Group by time interval
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 0a635ede623..79d4b7e1b34 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -26,6 +26,12 @@
@import "layout/page";
// COMPONENTS
+@import "components/buttons";
+@import "components/navs";
+@import "components/tabs";
+@import "components/alerts";
+@import "components/tooltip";
+@import "components/tags";
@import "components/panel_graph";
@import "components/submenu";
@import "components/panel_dashlist";
@@ -40,7 +46,6 @@
@import "components/sidemenu";
@import "components/navbar";
@import "components/gfbox";
-@import "components/tabs";
@import "components/timepicker";
@import "components/filter-controls";
@import "components/filter-list";
@@ -48,19 +53,14 @@
@import "components/scrollbar";
@import "components/old_stuff";
@import "components/popovers";
-@import "components/alerts";
@import "components/typeahead";
-@import "components/tags";
@import "components/modals";
@import "components/dropdown";
@import "components/color_picker";
-@import "components/tooltip";
-@import "components/buttons";
@import "components/footer";
@import "components/infobox";
@import "components/shortcuts";
@import "components/query_editor";
-@import "components/navs";
// PAGES
@import "pages/login";
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index ba12137ec94..aff7cce94af 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -78,13 +78,13 @@ $grid-gutter-width: 30px !default;
$enable-flex: false;
$form-sizes: (
- xs: 80px,
- sm: 100px,
- md: 120px,
- lg: 150px,
- xl: 200px,
- xxl: 300px,
- xxxl: 400px
+ xs: 5.7rem,
+ sm: 7rem,
+ md: 8.5rem,
+ lg: 10rem,
+ xl: 14rem,
+ xxl: 21rem,
+ xxxl: 28rem
) !default;
@@ -135,12 +135,7 @@ $blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-width: .25rem !default;
$hr-border-width: $border-width !default;
-
$dt-font-weight: bold !default;
-
-$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
-$nested-kbd-font-weight: bold !default;
-
$list-inline-padding: 5px !default;
// Components
@@ -208,4 +203,19 @@ $zindex-navbar-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
+// Buttons
+//
+
+$btn-padding-x: 1rem !default;
+$btn-padding-y: .6rem !default;
+$btn-line-height: 1.25 !default;
+$btn-font-weight: normal !default;
+
+$btn-padding-x-sm: .5rem !default;
+$btn-padding-y-sm: .25rem !default;
+
+$btn-padding-x-lg: 1.5rem !default;
+$btn-padding-y-lg: .75rem !default;
+
+$btn-border-radius: 1px;
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 47d74b8dc89..9fe32a29f9f 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -8,41 +8,43 @@
// Core
.btn {
display: inline-block;
- padding: 8px 12px;
- margin-right: 10px;
+ font-weight: $btn-font-weight;
+ line-height: $btn-line-height;
font-size: $font-size-base;
- line-height: $line-height-base;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: none;
- @include buttonBackground($btnBackground, $btnBackgroundHighlight, $gray-dark, 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)");
+ @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
- // Hover/focus state
- &:hover,
- &:focus {
+ &,
+ &:active,
+ &.active {
+ &:focus,
+ &.focus {
+ @include tab-focus();
+ }
+ }
+
+ @include hover-focus {
+ text-decoration: none;
+ }
+ &.focus {
text-decoration: none;
}
- // Focus state for keyboard and accessibility
- &:focus {
- @include tab-focus();
- }
-
- // Active state
- &.active,
- &:active {
+ &:active,
+ &.active {
background-image: none;
+ outline: 0;
}
- // Disabled state
&.disabled,
- &[disabled] {
- cursor: default;
- background-image: none;
- @include opacity(65);
+ &:disabled {
+ cursor: $cursor-disabled;
+ opacity: .65;
+ @include box-shadow(none);
}
}
@@ -51,20 +53,15 @@
// Large
.btn-large {
- padding: 6px 20px;
- font-size: $font-size-lg;
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius);
}
.btn-small {
- padding: 2px 10px;
- font-size: $font-size-sm;
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
}
.btn-mini {
- padding: 2px 6px;
- margin-right: 0;
- margin-right: 0;
- font-size: $font-size-xs;
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius);
}
// Set the backgrounds
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index cbaf5c07f93..eeb5ea0e340 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -1,7 +1,7 @@
$gf-form-margin: 0.4rem;
.gf-form {
- margin-top: $gf-form-margin;
+ margin-bottom: $gf-form-margin;
margin-right: $gf-form-margin;
display: flex;
flex-direction: row;
@@ -19,10 +19,7 @@ $gf-form-margin: 0.4rem;
}
.gf-form-group {
- h3, h2, h4 {
- margin-top: $spacer * 2;
- margin-bottom: $spacer * 1;
- }
+ margin-bottom: $spacer * 1.5;
}
.gf-form-inline {
@@ -37,8 +34,10 @@ $gf-form-margin: 0.4rem;
}
.gf-form-button-row {
- margin-top: $spacer * 2;
- margin-bottom: $spacer;
+ margin-top: $spacer * 1.5;
+ a, button {
+ margin-right: $spacer;
+ }
}
.gf-form-label {
@@ -114,3 +113,9 @@ $gf-form-margin: 0.4rem;
&.gf-size-auto { width: auto; }
}
+.gf-form-btn {
+ padding: $input-padding-y $input-padding-x;
+ line-height: $input-line-height;
+ flex-shrink: 0;
+ flex-grow: 0;
+}
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index ebed9c1bca8..0779b345576 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -8,7 +8,7 @@
.navbar-inner {
min-height: $navbarHeight;
- padding-right: 20px;
+ padding-right: $spacer;
background-color: $navbarBackground;
border-bottom: $navbarBorder;
@include clearfix();
@@ -18,11 +18,6 @@
position: relative;
left: 0;
float: left;
- margin: 0 10px 0 0;
-}
-
-.nav {
- display: block;
}
.navbar .nav.pull-right {
@@ -175,4 +170,3 @@
color: $link-color;
}
-
diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss
index 3f381922697..938288e8953 100644
--- a/public/sass/components/_navs.scss
+++ b/public/sass/components/_navs.scss
@@ -7,8 +7,7 @@
// ----------
.nav {
- margin-left: 0;
- margin-bottom: $line-height-base;
+ margin: 0;
list-style: none;
}
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 40e8cc71ec7..410d5f509dc 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -33,7 +33,7 @@
}
.page-header {
- padding: 10px 0 39px 0px;
+ padding: $spacer 0 $spacer * 2.5;
display: flex;
justify-content: space-between;
@@ -44,13 +44,19 @@
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;
}
-
margin-bottom: 2rem;
}
+.page-heading {
+ font-size: 1.25rem;
+ margin-top: 0;
+ margin-bottom: $spacer * 0.6;
+}
+
.admin-page {
max-width: 800px;
margin-left: 10px;
diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss
index 0e64f0dec73..3999fafa05e 100644
--- a/public/sass/mixins/_buttons.scss
+++ b/public/sass/mixins/_buttons.scss
@@ -16,3 +16,9 @@
}
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ @include border-radius($border-radius);
+}