diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index bf6a5fb9c79..d103422926f 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -212,8 +212,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $side-menu-width: 60px; // dashboard -$panel-margin: 10px; -$dashboard-padding: $panel-margin * 2; +$dashboard-padding: 10px * 2; $panel-horizontal-padding: 10; $panel-vertical-padding: 5; $panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index b43345127e6..e853d0e33cc 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -215,8 +215,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $side-menu-width: 60px; // dashboard -$panel-margin: 10px; -$dashboard-padding: $panel-margin * 2; +$dashboard-padding: 10px * 2; $panel-horizontal-padding: 10; $panel-vertical-padding: 5; $panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 1c4f1b7fcb7..da3ebf7fa7b 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -7,7 +7,7 @@ .alert { padding: 15px 20px; - margin-bottom: $panel-margin / 2; + margin-bottom: $space-xs; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); background: $alert-error-bg; position: relative; diff --git a/public/sass/components/_page_loader.scss b/public/sass/components/_page_loader.scss index 053a061600f..0a3eac40a0c 100644 --- a/public/sass/components/_page_loader.scss +++ b/public/sass/components/_page_loader.scss @@ -7,7 +7,7 @@ &__spinner { font-size: 32px; - margin-bottom: $panel-margin; + margin-bottom: $space-sm; } &__text { diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 9bd5672e4a8..8acf98be1b2 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -21,7 +21,7 @@ } .panel-editor-container__editor { - margin-top: $panel-margin * 2; + margin-top: $space-lg; display: flex; flex-direction: row; flex: 1 1 0; @@ -80,7 +80,7 @@ } .submenu-controls { - padding: 0 $dashboard-padding $panel-margin $dashboard-padding; + padding: 0 $dashboard-padding $space-sm $dashboard-padding; } .panel-editor-container__panel { diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss index 5d35f8fddc0..160a9f78e66 100644 --- a/public/sass/components/_panel_logs.scss +++ b/public/sass/components/_panel_logs.scss @@ -6,7 +6,7 @@ $column-horizontal-spacing: 10px; padding: $panel-padding; padding-top: 10px; border-radius: $border-radius; - margin: 2 * $panel-margin 0 $panel-margin; + margin: $space-md 0 $space-sm; border: $panel-border; flex-direction: column; } diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 6c450f7e6dd..514aa44525e 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -4,7 +4,7 @@ flex-wrap: wrap; align-content: flex-start; align-items: flex-start; - padding: 0 0 $panel-margin 0; + padding: 0 0 $space-sm 0; } .annotation-disabled, diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 0358adb9787..60c1a600014 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -65,6 +65,11 @@ font-size: 18px; min-height: 55px; line-height: 55px; + justify-content: space-between; + margin-left: $space-xl; +} + +.explore-toolbar-header { justify-content: space-between; align-items: center; } @@ -163,7 +168,7 @@ } .explore-panel { - margin-top: $panel-margin; + margin-top: $space-sm; } .explore-panel__body { @@ -182,24 +187,20 @@ .explore-panel__header-label { font-weight: 500; - margin-right: $panel-margin; + margin-right: $space-sm; font-size: $font-size-h6; box-shadow: $text-shadow-faint; } .explore-panel__header-buttons { - margin-right: $panel-margin; + margin-right: $space-sm; font-size: $font-size-lg; line-height: $font-size-h6; } -.result-options { - margin: 2 * $panel-margin 0; -} - .time-series-disclaimer { width: 300px; - margin: $panel-margin auto; + margin: $space-sm auto; padding: 10px 0; border-radius: $border-radius; text-align: center; @@ -207,7 +208,7 @@ .disclaimer-icon { color: $yellow; - margin-right: $panel-margin/2; + margin-right: $space-xs; } .show-all-time-series { @@ -234,7 +235,7 @@ position: relative; overflow: hidden; background: none; - margin: $panel-margin / 2; + margin: $space-xs; } .explore-panel__loader--active:after { @@ -377,7 +378,7 @@ .ReactTable .-pagination { border-top: none; box-shadow: none; - margin-top: $panel-margin; + margin-top: $space-sm; } .ReactTable .-pagination .-btn { color: $blue; @@ -418,7 +419,7 @@ // TODO Experimental .cheat-sheet-item { - margin: 2 * $panel-margin 0; + margin: $space-lg 0; width: 50%; } @@ -427,6 +428,6 @@ } .cheat-sheet-item__expression { - margin: $panel-margin/2 0; + margin: $space-xs 0; cursor: pointer; }