Merge pull request #15912 from grafana/8px-system-margins2

Removed variable $panel-margin

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;

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;

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;

public/sass/components/_page_loader.scss

@@ -7,7 +7,7 @@
 
   &__spinner {
     font-size: 32px;
-    margin-bottom: $panel-margin;
+    margin-bottom: $space-sm;
   }
 
   &__text {

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 {

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

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,

public/sass/pages/_explore.scss

@@ -66,6 +66,11 @@
   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;
 }