Merge branch '8px-system-margins2' of github.com:grafana/grafana into 8px-system-margins3

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: ${theme.spacing.xs} !default;
-$space-s: ${theme.spacing.s} !default;
-$space-m: ${theme.spacing.m} !default;
-$space-l: ${theme.spacing.l} !default;
+$space-sm: ${theme.spacing.s} !default;
+$space-md: ${theme.spacing.m} !default;
+$space-lg: ${theme.spacing.l} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -20,7 +20,7 @@
 
   .gicon {
     font-size: 30px;
-    margin-right: $space-m;
+    margin-right: $space-md;
   }
 
   &:hover {
@@ -36,12 +36,12 @@
 }
 
 .add-panel-widget__link {
-  margin: 0 $space-s;
+  margin: 0 $space-sm;
   width: 154px;
 }
 
 .add-panel-widget__icon {
-  margin-bottom: $space-s;
+  margin-bottom: $space-sm;
 
   .gicon {
     color: white;
@@ -62,7 +62,7 @@
 
 .add-panel-widget__create {
   display: inherit;
-  margin-bottom: $space-l;
+  margin-bottom: $space-lg;
   // this is to have the big button appear centered
   margin-top: 55px;
 }

public/sass/_variables.generated.scss

@@ -21,9 +21,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: 4px !default;
-$space-s: 8px !default;
-$space-m: 16px !default;
-$space-l: 24px !default;
+$space-sm: 8px !default;
+$space-md: 16px !default;
+$space-lg: 24px !default;
 $space-xl: 32px !default;
 $spacer: 14px !default;
 $spacer-x: $spacer !default;

public/sass/components/_add_data_source.scss

@@ -7,7 +7,7 @@
 .add-data-source-search {
   display: flex;
   justify-content: center;
-  margin-bottom: $space-l;
+  margin-bottom: $space-lg;
 }
 
 .add-data-source-grid {
@@ -41,6 +41,6 @@
 }
 
 .add-data-source-grid-item-logo {
-  margin: 0 $space-m;
+  margin: 0 $space-md;
   width: 55px;
 }

public/sass/components/_cards.scss

 .layout-selector {
   @include clearfix();
 
-  margin-left: $space-m;
+  margin-left: $space-md;
   text-align: right;
 
   button {
@@ -9,7 +9,7 @@
     color: $text-color-weak;
     box-shadow: $card-shadow;
     border: none;
-    padding: $space-s;
+    padding: $space-sm;
     line-height: 1;
     font-size: 130%;
     float: right;
@@ -50,7 +50,7 @@
   height: 100%;
   background: $card-background;
   box-shadow: $card-shadow;
-  padding: $space-m;
+  padding: $space-md;
   border-radius: 4px;
 
   &:hover {
@@ -58,7 +58,7 @@
   }
 
   .label-tag {
-    margin-left: $space-s;
+    margin-left: $space-sm;
     font-size: 11px;
     padding: 2px 6px;
   }
@@ -81,7 +81,7 @@
 }
 
 .card-item-header {
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
 }
 
 .card-item-type {
@@ -103,7 +103,7 @@
 }
 
 .card-item-label {
-  margin-left: $space-s;
+  margin-left: $space-sm;
 }
 
 .card-item-sub-name {
@@ -116,7 +116,7 @@
 .card-item-sub-name--header {
   color: $text-color-weak;
   text-transform: uppercase;
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
   font-size: $font-size-sm;
   font-weight: bold;
 }
@@ -129,7 +129,7 @@
   .card-item-notice {
     font-size: $font-size-sm;
     display: inline-block;
-    margin-left: $space-m;
+    margin-left: $space-md;
   }
 
   .card-item-header-action {
@@ -138,7 +138,7 @@
 
   .card-item-wrapper {
     width: 100%;
-    padding: 0 $space-m $space-m 0;
+    padding: 0 $space-md $space-md 0;
   }
 
   .card-item-wrapper--clickable {
@@ -146,7 +146,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $space-m $space-m 0;
+    margin: 0 $space-md $space-md 0;
     height: 6rem;
 
     img {
@@ -205,7 +205,7 @@
   }
 
   .card-item-figure {
-    margin: 0 $space-m 0 0;
+    margin: 0 $space-md 0 0;
     img {
       width: 48px;
     }

public/sass/components/_dashboard_settings.scss

@@ -41,7 +41,7 @@
   font-size: $font-size-h3;
   padding-right: 60px;
   white-space: nowrap;
-  margin-bottom: $space-m;
+  margin-bottom: $space-md;
 
   i {
     font-size: 25px;
@@ -92,10 +92,10 @@
   margin: 40px $space-xl 0 0;
 
   button {
-    margin-bottom: $space-s;
+    margin-bottom: $space-sm;
   }
 }
 
 .dashboard-settings__json-save-button {
-  margin-top: $space-m;
+  margin-top: $space-md;
 }

public/sass/components/_page_loader.scss

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

public/sass/components/_panel_editor.scss

@@ -21,7 +21,7 @@
 }
 
 .panel-editor-container__editor {
-  margin-top: $space-l;
+  margin-top: $space-lg;
   display: flex;
   flex-direction: row;
   flex: 1 1 0;
@@ -80,7 +80,7 @@
   }
 
   .submenu-controls {
-    padding: 0 $dashboard-padding $space-s $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: $space-m 0 $space-s;
+  margin: $space-md 0 $space-sm;
   border: $panel-border;
   flex-direction: column;
 }

public/sass/components/_sidemenu.scss

@@ -285,8 +285,8 @@ li.sidemenu-org-switcher {
       position: unset;
       width: 100%;
       float: none;
-      margin-top: $space-s;
-      margin-bottom: $space-s;
+      margin-top: $space-sm;
+      margin-bottom: $space-sm;
 
       > li > a {
         padding-left: 15px;

public/sass/components/_submenu.scss

@@ -4,7 +4,7 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
-  padding: 0 0 $space-s 0;
+  padding: 0 0 $space-sm 0;
 }
 
 .annotation-disabled,

public/sass/pages/_explore.scss

@@ -197,7 +197,7 @@
 }
 
 .explore-panel {
-  margin-top: $space-s;
+  margin-top: $space-sm;
 }
 
 .explore-panel__body {
@@ -216,20 +216,20 @@
 
 .explore-panel__header-label {
   font-weight: 500;
-  margin-right: $space-s;
+  margin-right: $space-sm;
   font-size: $font-size-h6;
   box-shadow: $text-shadow-faint;
 }
 
 .explore-panel__header-buttons {
-  margin-right: $space-s;
+  margin-right: $space-sm;
   font-size: $font-size-lg;
   line-height: $font-size-h6;
 }
 
 .time-series-disclaimer {
   width: 300px;
-  margin: $space-s auto;
+  margin: $space-sm auto;
   padding: 10px 0;
   border-radius: $border-radius;
   text-align: center;
@@ -407,7 +407,7 @@
 .ReactTable .-pagination {
   border-top: none;
   box-shadow: none;
-  margin-top: $space-s;
+  margin-top: $space-sm;
 }
 .ReactTable .-pagination .-btn {
   color: $blue;
@@ -448,7 +448,7 @@
 // TODO Experimental
 
 .cheat-sheet-item {
-  margin: $space-l 0;
+  margin: $space-lg 0;
   width: 50%;
 }