diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index b5bb0337546..5b2869c5cd9 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -38,7 +38,7 @@ -
+
Cancel
-
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 23680ebb9a7..37b1d3241ca 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -1,7 +1,7 @@
-

Http settings

+

Http settings

Url diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html index 6f2ea468b82..e66df175435 100644 --- a/public/app/features/datasources/partials/list.html +++ b/public/app/features/datasources/partials/list.html @@ -25,8 +25,8 @@ Name Url - - + + @@ -45,13 +45,13 @@ - + Edit - + diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 091cd318f4c..e2480ce2e18 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -2,54 +2,49 @@
-
-

- API Keys -

- -
-
    -
  • - Add a key -
  • -
  • - -
  • -
  • - Role -
  • -
  • - -
  • -
- - -
- -
- - - - - - - - - - - - - - - - -
NameRole
{{t.name}}{{t.role}} - - - -
+ +

Add new

+
+
+
+ Add a key + +
+
+ Role + +
+
+ +
+
+
+ +

Existing Keys

+ + + + + + + + + + + + + + + +
NameRole
{{t.name}}{{t.role}} + + + +
+ diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index dcac1de7935..3691c9025f5 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -6,21 +6,23 @@

Preferences

+

General

-
- Name - -
- -
- +
+
+ Name + +
+
+ +
-
-

Address

+

Address

+
Address1 @@ -59,16 +61,16 @@
+

Admin Pages

-

Users

- Manage +
+ +
+ API Keys +
- -
-

API Keys

- Manage -
-
diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index fda68d2751d..f2dca0b7015 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -8,17 +8,17 @@
- Old Password + Old Password
- New Password + New Password
- Confirm Password + Confirm Password
diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index c5e1780ef70..bdca386ce46 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -7,7 +7,7 @@
-

Preferences

+

Preferences

Name @@ -31,13 +31,13 @@
+

Password

-

Password

Change Password
+

Organizations

-

Organizations

diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html index 6190ee8ebe6..e5a0e6f2e0c 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/config.html @@ -1,9 +1,9 @@ -
-

Elasticsearch details

+

Elasticsearch details

+
Index name @@ -28,9 +28,8 @@
+

Default query settings

-

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); +}