diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 41757d54cc1..37a4f2a448e 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,19 +1,16 @@
-
- - - - - - - -
+ + + + + + + - -
- - -
+ + + {{::ctrl.title}} +
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 9332f43542c..baca7721fe8 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -30,28 +30,4 @@ export function navbarDirective() { }; } -var navButtonTemplate = ` -
- - - {{::title}} - -
-`; - -function navButton() { - return { - restrict: 'E', - template: navButtonTemplate, - scope: { - title: "@", - titleUrl: "@", - }, - link: function(scope, elem, attrs, ctrl) { - scope.icon = attrs.icon; - } - }; -} - coreModule.directive('navbar', navbarDirective); -coreModule.directive('navButton', navButton); diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 71e21f19ae0..604dc9f9876 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -186,7 +186,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/global-alerts', { templateUrl: 'public/app/features/dashboard/partials/globalAlerts.html', }) - .when('/styleguide', { + .when('/styleguide/:page?', { controller: 'StyleGuideCtrl', controllerAs: 'ctrl', templateUrl: 'public/app/features/styleguide/styleguide.html', diff --git a/public/app/features/admin/partials/admin_home.html b/public/app/features/admin/partials/admin_home.html index aa667ddd2d0..eed8f503ed8 100644 --- a/public/app/features/admin/partials/admin_home.html +++ b/public/app/features/admin/partials/admin_home.html @@ -24,5 +24,9 @@ View Server Stats + + Style guide + + diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 971bb39a09c..9f8fcb99333 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,12 +1,10 @@ -
- - - {{dashboard.title}} - - -
+ + + {{dashboard.title}} + +
diff --git a/public/app/features/dashboard/timepicker/dropdown.html b/public/app/features/dashboard/timepicker/dropdown.html index a9fdf1ff404..8b6d0c24a0c 100644 --- a/public/app/features/dashboard/timepicker/dropdown.html +++ b/public/app/features/dashboard/timepicker/dropdown.html @@ -4,7 +4,7 @@
-
+
@@ -21,7 +21,7 @@
-
+
@@ -35,15 +35,13 @@
- -
-
+
- +
diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 1d9a20444d4..8c362ab7e6b 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -13,14 +13,14 @@
- Name - + Name +
- Type - + Type +
@@ -41,7 +41,7 @@
- Cancel diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 37b1d3241ca..2874e157767 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,17 +24,17 @@
- + User - +
- + Passord - +
diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 30a92fe80cb..9fe84f4a17f 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -19,15 +19,15 @@
-
+
Email or Username
-
+
Name
-
+
Role diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index e2480ce2e18..daa9801c468 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -1,4 +1,4 @@ - +
@@ -9,7 +9,7 @@

Add new

-
+
Add a key
diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 3691c9025f5..e332fc1a2cf 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -9,8 +9,8 @@

General

-
- Name +
+ Name
@@ -24,34 +24,34 @@
-
- Address1 +
+ Address1
-
- Address2 +
+ Address2
-
- City +
+ City
-
- Postal code +
+ Postal code
-
- State +
+ State
-
- Country +
+ Country
diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index e2f88613e8d..481873af489 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,4 +1,4 @@ - +
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 98c5098824d..b62d2a22f54 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -9,17 +9,17 @@
- Name - + Name +
- Interval - + Interval +
-
+
Add dashboards
diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index f2dca0b7015..624730c1ce6 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -8,18 +8,18 @@
- 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 bdca386ce46..00ae3b5e163 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
diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 9a0aaa313dc..fc0f4a4eba1 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -15,35 +15,34 @@
- - -
    -
  • - ${{color.name}} - {{color.value}} -
    • -
- - + -
- - - - - - +
+
    +
  • + ${{color.name}} + {{color.value}} +
    • +
+
+ +
+
+
+
+
+
- -
- - -
- - - - +
+ forms +
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index f44ddc5970d..1a195c19ed2 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -6,12 +6,30 @@ import _ from 'lodash'; class StyleGuideCtrl { colors: any = []; theme: string; + buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger']; + buttonSizes = ['btn-small', '', 'btn-large']; + buttonVariants = ['-', '-outline-']; + page: any; + pages = ['colors', 'buttons', 'forms', 'dashboard', 'query-editors']; /** @ngInject **/ - constructor($http) { + constructor(private $http, $routeParams) { this.theme = config.bootData.user.lightTheme ? 'light': 'dark'; + this.page = {}; - $http.get('public/sass/styleguide.json').then(res => { + if ($routeParams.page) { + this.page[$routeParams.page] = 1; + } else { + this.page.colors = true; + } + + if (this.page.colors) { + this.loadColors(); + } + } + + loadColors() { + this.$http.get('public/sass/styleguide.json').then(res => { this.colors = _.map(res.data[this.theme], (value, key) => { return {name: key, value: value}; }); @@ -20,7 +38,7 @@ class StyleGuideCtrl { switchTheme() { var other = this.theme === 'dark' ? 'light' : 'dark'; - window.location.href = config.appSubUrl + '/styleguide?theme=' + other; + window.location.href = window.location.href + '?theme=' + other; } } diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 685429d5e84..dbb84aa375d 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -100,7 +100,7 @@
- + ADD ROW
diff --git a/public/app/partials/login.html b/public/app/partials/login.html index b7aa340bfed..3608a56f99b 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -19,17 +19,17 @@
- User - + User +
- Password - + Password +
- Email - + Email +
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 7beb6d54911..2fbe85dfa30 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -1,29 +1,29 @@
-
- Title +
+ Title
- Span + Span
-
- Height - +
+ Height +
-
- Repeat Panel +
+ Repeat Panel
- Min span + Min span diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html index 9eadd6218d3..7a8dd459ff6 100644 --- a/public/app/partials/signup_invited.html +++ b/public/app/partials/signup_invited.html @@ -21,20 +21,20 @@
- Email - + Email +
- Name - + Name +
- Username - + Username +
- Password - + Password +
diff --git a/public/app/partials/signup_step2.html b/public/app/partials/signup_step2.html index fc0de0a92e8..7b72c2357b9 100644 --- a/public/app/partials/signup_step2.html +++ b/public/app/partials/signup_step2.html @@ -31,28 +31,28 @@
- + Email codeEmail verification code (sent to your email) - +
- Org. name - + Org. name +
- Your name - + Your name +
- Username - + Username +
- Password - + Password +
diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html index e5a0e6f2e0c..f34cf7fc782 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/config.html @@ -5,24 +5,24 @@
-
- Index name +
+ Index name
-
- Pattern +
+ Pattern
-
- Time field name +
+ Time field name
- Version + Version
@@ -32,6 +32,6 @@
Group by time interval - +
diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html index b6f604e08a5..9a1d326ca64 100644 --- a/public/app/plugins/datasource/influxdb/partials/config.html +++ b/public/app/plugins/datasource/influxdb/partials/config.html @@ -1,52 +1,33 @@ -

InfluxDB Details

+

InfluxDB Details

-
-
    -
  • - Database -
    • -
  • - -
    • -
-
-
-
-
    -
  • - User -
    • -
  • - -
    • -
  • - Password -
    • -
  • - -
    • -
-
+
+
+
+ Database + +
+
+ +
+
+ User + +
+
+ Password + +
+
- -
-

Default query settings

-
-
    -
  • - Group by time interval -
    • -
  • - -
    • -
  • - -
    • -
-
+
+
+ Default group by time + + +
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 9bc924ec79d..c39f71f5561 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -22,6 +22,7 @@ @import "utils/validation"; @import "utils/angular"; @import "utils/spacings"; +@import "utils/widths"; // LAYOUTS @import "layout/page"; diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 71bc420c4f5..899a785c19b 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -17,7 +17,7 @@ body { padding: 0; } - .dashnav-dashboards-btn a { + .page-dashboard .navbar-page-btn { max-width: 200px; } .gf-timepicker-nav-btn { @@ -34,7 +34,7 @@ // form styles @include media-breakpoint-up(md) { - .dashnav-dashboards-btn a { + .page-dashboard .navbar-page-btn { max-width: 180px; } .gf-timepicker-nav-btn { @@ -51,7 +51,7 @@ } @include media-breakpoint-up(lg) { - .dashnav-dashboards-btn a { + .page-dashboard .navbar-page-btn { max-width: 290px; } .gf-timepicker-nav-btn { diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c125cb9636e..ccb2c66767b 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -8,17 +8,17 @@ $black: #000; // ------------------------- $black: #000; -$dark-1: #141414; // (body) -$dark-2: #1f1d1d; // ($gray-darker) -$dark-3: #262626; // ($gray-dark) +$dark-1: #141414; +$dark-2: #1f1d1d; +$dark-3: #262626; $dark-4: #333333; $dark-5: #444444; $gray-1: #555555; -$gray-2: #6e7580; +$gray-2: #7B7B7B; $gray-3: #b3b3b3; -$gray-4: #cfd4d9; -$gray-5: #e8edf0; -$gray-6: #f7f9fa; +$gray-4: #D8D9DA; +$gray-5: #ECECEC; +$gray-6: #f4f5f8; $gray-7: #fbfbfb; $white: #fff; @@ -50,7 +50,6 @@ $critical: #ed2e18; // ------------------------- $body-bg: rgb(20,20,20); $page-bg: $dark-2; -$pageImageUrl: '../img/angle_gradient_rev.png'; $body-color: $gray-4; $text-color: $gray-4; @@ -75,7 +74,6 @@ $hr-border-color: rgba(0,0,0,.1) !default; $component-active-color: #fff !default; $component-active-bg: $brand-primary !default; - // Panel // ------------------------- $panel-bg: $dark-2; @@ -94,8 +92,8 @@ $modal-background: $black; $code-tag-bg: #444; // Lists -$grafanaListBackground: $dark-3; -$grafanaListAccent: lighten($dark-2, 2%); +$grafanaListBackground: $dark-3; +$grafanaListAccent: lighten($dark-2, 2%); $grafanaListBorderTop: $dark-3; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; @@ -120,22 +118,19 @@ $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-secondary-bg: $blue-dark; -$btn-secondary-bg-hl: lighten($blue-dark, 8%); +$btn-secondary-bg-hl: lighten($blue-dark, 3%); -$btn-info-bg: lighten($purple, 3%); -$btn-info-bg-hl: darken($purple, 3%); - -$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg-hl: darken($green, 3%); $btn-success-bg: lighten($green, 3%); $btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); +$btn-warning-bg-hl: lighten($brand-warning, 8%); $btn-danger-bg: lighten($red, 3%); $btn-danger-bg-hl: darken($red, 3%); $btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 1%); +$btn-inverse-bg-hl: lighten($dark-3, 1%); $btn-inverse-text-color: $link-color; $btn-link-color: $gray-3; @@ -231,7 +226,7 @@ $successText: #468847; $successBackground: $btn-success-bg; $infoText: $blue-dark; -$infoBackground: $btn-info-bg; +$infoBackground: $blue-dark; // Tooltips and popovers // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 87360341449..ffd668b720c 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -13,9 +13,9 @@ $black: #000; // ------------------------- $black: #000; -$dark-1: #141414; // (body) -$dark-2: #1f1d1d; // ($gray-darker) -$dark-3: #262626; // ($gray-dark) +$dark-1: #141414; +$dark-2: #1f1d1d; +$dark-3: #262626; $dark-4: #333333; $dark-5: #444444; $gray-1: #555555; @@ -31,7 +31,7 @@ $white: #fff; // Accent colors // ------------------------- $blue: #2AB2E4; -$blue-dark: #75CAEB; +$blue-dark: #3CAAD6; $green: #28B62C; $red: #FF4136; $yellow: #FF851B; @@ -54,9 +54,8 @@ $critical: #EC2128; // Scaffolding // ------------------------- -$body-bg: $white; -$page-bg: $white; -$pageImageUrl: '../img/angle_gradient_light_rev.png'; +$body-bg: $white; +$page-bg: $white; $body-color: $gray-1; $text-color: $gray-1; @@ -81,7 +80,6 @@ $hr-border-color: $dark-3 !default; $component-active-color: $white !default; $component-active-bg: $brand-primary !default; - // Panel // ------------------------- @@ -128,10 +126,7 @@ $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-secondary-bg: $blue-dark; -$btn-secondary-bg-hl: lighten($blue-dark, 8%); - -$btn-info-bg: lighten($purple, 3%); -$btn-info-bg-hl: darken($purple, 3%); +$btn-secondary-bg-hl: lighten($blue-dark, 4%); $btn-success-bg: lighten($green, 3%); $btn-success-bg-hl: darken($green, 3%); @@ -255,8 +250,8 @@ $successText: lighten($green, 10%); $successBackground: $green; $successBorder: transparent; -$infoText: lighten($purple,10%); -$infoBackground: $purple; +$infoText: $blue; +$infoBackground: $blue-dark; $infoBorder: transparent; @@ -278,6 +273,4 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1; $popoverArrowOuterColor: rgba(0,0,0,.25); // images -$checkboxImageUrl: '../img/checkbox_white.png'; - - +$checkboxImageUrl: '../img/checkbox_white.png'; \ No newline at end of file diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 4fe5be63434..3031507e05b 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -77,17 +77,6 @@ $grid-gutter-width: 30px !default; $enable-flex: false; -$form-sizes: ( - xs: 5.7rem, - sm: 7rem, - md: 8.5rem, - lg: 10rem, - xl: 14rem, - xxl: 21rem, - xxxl: 28rem -) !default; - - // Typography // ------------------------- @@ -189,6 +178,7 @@ $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-pa $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; $form-group-margin-bottom: $spacer-y !default; +$gf-form-margin: 0.2rem; $cursor-disabled: not-allowed !default; @@ -225,4 +215,4 @@ $btn-padding-y-lg: .75rem !default; $btn-border-radius: 3px; // sidemenu -$side-menu-width: 15rem; +$side-menu-width: 14rem; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 0fc6dae6cca..a68f0642473 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -65,7 +65,7 @@ } .btn-link { - color: $btn-link-color; + color: $btn-link-color; } // Set the backgrounds @@ -89,8 +89,8 @@ @include buttonBackground($btn-success-bg, $btn-success-bg-hl); } // Info appears as a neutral blue -.btn-info { - @include buttonBackground($btn-info-bg, $btn-info-bg-hl); +.btn-secondary { + @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); } // Inverse appears as dark gray .btn-inverse { @@ -103,10 +103,10 @@ @include button-outline-variant($btn-primary-bg); } .btn-outline-secondary { - @include button-outline-variant($btn-inverse-bg); + @include button-outline-variant($btn-secondary-bg); } -.btn-outline-info { - @include button-outline-variant($btn-info-bg); +.btn-outline-inverse { + @include button-outline-variant($btn-inverse-bg); } .btn-outline-success { @include button-outline-variant($btn-success-bg); diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 59b38a6512e..d5c668a39ee 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -58,7 +58,7 @@ .row-open { margin-top: 5px; - left: -28px; + left: -30px; position: absolute; z-index: 100; transition: .10s left; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 0b80def21e2..d97e0af8709 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -59,18 +59,6 @@ $gf-form-label-margin: 0.2rem; flex-shrink: 0; } -@each $size, $value in $form-sizes { - .gf-size-#{$size} { width: $value; } - - .gf-size-max-#{$size} { - flex-grow: 1; - max-width: $value; - } -} - -.gf-size-max { width: 100%; } -.gf-size-auto { width: auto; } - .gf-form-input { display: block; width: 100%; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 44faa9d9112..2e0388eae07 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -56,52 +56,30 @@ background-color: $navbarLinkBackgroundActive; } - -.fa.top-nav-breadcrumb-icon { - margin: 18px 0 6px 5px; - float: left; - font-size: 120%; - color: $text-color; -} - -.top-nav-btn { +.navbar-brand-btn { display: block; position: relative; float: left; margin: 0; - font-size: 1.4em; border-right: 1px solid $tight-form-border; + background-color: $navbarButtonBackground; + padding: 0.6rem 1.0rem 0.5rem 1rem; .fa-caret-down { - font-size: 55%; - position: absolute; - right: 8px; - top: 23px; - margin-right: 2px; + font-size: 70%; } - a { - color: darken($link-color, 5%); - background-color: $navbarButtonBackground; - display: inline-block; - &:hover { - background: $navbarButtonBackgroundHighlight; - color: $link-color; - // border-bottom: 1px solid $blue; - } + &:hover { + background: $navbarButtonBackgroundHighlight; } -} -.top-nav-menu-btn { - a { - padding: 7px 20px 6px 13px; - } img { width: 30px; position: relative; top: -2px; } - .top-nav-logo-background { + + .navbar-brand-btn-background { display: inline-block; border: 1px solid $body-bg; padding: 4px; @@ -110,6 +88,7 @@ width: 40px; height: 40px; } + .icon-gf-grafana_wordmark { font-size: 21px; position: relative; @@ -119,13 +98,28 @@ } } -.dashnav-dashboards-btn { - a { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - display: block; - padding: 11px 17px 12px 13px; +.navbar-page-btn { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + float: left; + display: block; + margin: 0; + font-size: 1.4em; + border-right: 1px solid $tight-form-border; + color: darken($link-color, 5%); + background-color: $navbarButtonBackground; + font-size: $font-size-lg; + padding: 1rem 0.8rem; + + &:hover { + background: $navbarButtonBackgroundHighlight; + color: $link-color; + } + + .fa-caret-down { + font-size: 60%; + padding-left: 0.2rem; } .fa-th-large { @@ -141,32 +135,3 @@ } } -.dashboard-title { - padding: 0 0.4rem 0 0.5rem; - font-size: $font-size-lg; -} - -.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: $link-color; -} - diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 49c842e7147..109c13f7e2b 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -30,16 +30,15 @@ min-height: calc(100% - 54px); } .dashboard-container { - padding-left: $side-menu-width; + padding-left: $side-menu-width + 0.2rem; } .page-container { margin-left: $side-menu-width; } - .top-nav-menu-btn { - a { - background-color: $page-bg; - width: $side-menu-width; - } + .navbar-brand-btn { + background-color: $page-bg; + width: $side-menu-width; + .icon-gf-grafana_wordmark { display: inline-block; } @@ -47,9 +46,6 @@ display: none; } } - .sidemenu-org { - box-shadow: none; - } .search-container { left: auto; } @@ -195,7 +191,7 @@ .sidemenu .fa-caret-right { position: absolute; top: 38%; - right: 25px; + right: 6px; font-size: 14px; color: $link-color; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index ec793403ee9..0a9553f8ffd 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -18,9 +18,9 @@ } } +$color-page-hero-bg: #2e2e2e; .page-container { background-color: $page-bg; - background-image: url($pageImageUrl); /* this is an experiment */ background-position: left; background-size: 60%; background-repeat: no-repeat; @@ -30,6 +30,7 @@ margin-left: 0; min-height: calc(100% - 54px); padding-bottom: $spacer * 5; + background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%); } .page-header { diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 494b2273bc1..4a94c8021bc 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -1,5 +1,4 @@ .login-container { - background-image: url($pageImageUrl); /* this is an experiment */ background-position: left; background-size: 60%; background-repeat: no-repeat; diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index dd8c0775c8b..55aabb01f01 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -16,6 +16,7 @@ .style-guide-button-list { padding: $spacer; button { + display: block; margin: 0 $spacer $spacer 0; } } diff --git a/public/sass/utils/_spacings.scss b/public/sass/utils/_spacings.scss index cd543c8c90b..f106c0d826a 100644 --- a/public/sass/utils/_spacings.scss +++ b/public/sass/utils/_spacings.scss @@ -28,6 +28,7 @@ } } + // Positioning .pos-f-t { diff --git a/public/sass/utils/_widths.scss b/public/sass/utils/_widths.scss new file mode 100644 index 00000000000..bd6fc78ef90 --- /dev/null +++ b/public/sass/utils/_widths.scss @@ -0,0 +1,19 @@ + + +.max-width { width: 100%; } +.width-auto { width: auto; } + +// widths +@for $i from 1 through 30 { + .width-#{$i} { + width: ($spacer * $i) - $gf-form-margin; + } +} + +@for $i from 1 through 30 { + .max-width-#{$i} { + max-width: ($spacer * $i) - $gf-form-margin; + flex-grow: 1; + } +} +