Commit 1432fdd1 by ijin08

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

parents 204d21ab d47f6e5b
...@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default; ...@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default;
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
$space-xs: ${theme.spacing.xs} !default; $space-xs: ${theme.spacing.xs} !default;
$space-s: ${theme.spacing.s} !default; $space-sm: ${theme.spacing.s} !default;
$space-m: ${theme.spacing.m} !default; $space-md: ${theme.spacing.m} !default;
$space-l: ${theme.spacing.l} !default; $space-lg: ${theme.spacing.l} !default;
$space-xl: ${theme.spacing.xl} !default; $space-xl: ${theme.spacing.xl} !default;
$spacer: ${theme.spacing.d} !default; $spacer: ${theme.spacing.d} !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.gicon { .gicon {
font-size: 30px; font-size: 30px;
margin-right: $space-m; margin-right: $space-md;
} }
&:hover { &:hover {
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
} }
.add-panel-widget__link { .add-panel-widget__link {
margin: 0 $space-s; margin: 0 $space-sm;
width: 154px; width: 154px;
} }
.add-panel-widget__icon { .add-panel-widget__icon {
margin-bottom: $space-s; margin-bottom: $space-sm;
.gicon { .gicon {
color: white; color: white;
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
.add-panel-widget__create { .add-panel-widget__create {
display: inherit; display: inherit;
margin-bottom: $space-l; margin-bottom: $space-lg;
// this is to have the big button appear centered // this is to have the big button appear centered
margin-top: 55px; margin-top: 55px;
} }
......
...@@ -21,9 +21,9 @@ $enable-hover-media-query: false !default; ...@@ -21,9 +21,9 @@ $enable-hover-media-query: false !default;
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
$space-xs: 4px !default; $space-xs: 4px !default;
$space-s: 8px !default; $space-sm: 8px !default;
$space-m: 16px !default; $space-md: 16px !default;
$space-l: 24px !default; $space-lg: 24px !default;
$space-xl: 32px !default; $space-xl: 32px !default;
$spacer: 14px !default; $spacer: 14px !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.add-data-source-search { .add-data-source-search {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: $space-l; margin-bottom: $space-lg;
} }
.add-data-source-grid { .add-data-source-grid {
...@@ -41,6 +41,6 @@ ...@@ -41,6 +41,6 @@
} }
.add-data-source-grid-item-logo { .add-data-source-grid-item-logo {
margin: 0 $space-m; margin: 0 $space-md;
width: 55px; width: 55px;
} }
.layout-selector { .layout-selector {
@include clearfix(); @include clearfix();
margin-left: $space-m; margin-left: $space-md;
text-align: right; text-align: right;
button { button {
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
color: $text-color-weak; color: $text-color-weak;
box-shadow: $card-shadow; box-shadow: $card-shadow;
border: none; border: none;
padding: $space-s; padding: $space-sm;
line-height: 1; line-height: 1;
font-size: 130%; font-size: 130%;
float: right; float: right;
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
height: 100%; height: 100%;
background: $card-background; background: $card-background;
box-shadow: $card-shadow; box-shadow: $card-shadow;
padding: $space-m; padding: $space-md;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
} }
.label-tag { .label-tag {
margin-left: $space-s; margin-left: $space-sm;
font-size: 11px; font-size: 11px;
padding: 2px 6px; padding: 2px 6px;
} }
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
} }
.card-item-header { .card-item-header {
margin-bottom: $space-m; margin-bottom: $space-md;
} }
.card-item-type { .card-item-type {
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
} }
.card-item-label { .card-item-label {
margin-left: $space-s; margin-left: $space-sm;
} }
.card-item-sub-name { .card-item-sub-name {
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
.card-item-sub-name--header { .card-item-sub-name--header {
color: $text-color-weak; color: $text-color-weak;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: $space-m; margin-bottom: $space-md;
font-size: $font-size-sm; font-size: $font-size-sm;
font-weight: bold; font-weight: bold;
} }
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
.card-item-notice { .card-item-notice {
font-size: $font-size-sm; font-size: $font-size-sm;
display: inline-block; display: inline-block;
margin-left: $space-m; margin-left: $space-md;
} }
.card-item-header-action { .card-item-header-action {
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
.card-item-wrapper { .card-item-wrapper {
width: 100%; width: 100%;
padding: 0 $space-m $space-m 0; padding: 0 $space-md $space-md 0;
} }
.card-item-wrapper--clickable { .card-item-wrapper--clickable {
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
} }
.card-item-figure { .card-item-figure {
margin: 0 $space-m $space-m 0; margin: 0 $space-md $space-md 0;
height: 6rem; height: 6rem;
img { img {
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
} }
.card-item-figure { .card-item-figure {
margin: 0 $space-m 0 0; margin: 0 $space-md 0 0;
img { img {
width: 48px; width: 48px;
} }
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
font-size: $font-size-h3; font-size: $font-size-h3;
padding-right: 60px; padding-right: 60px;
white-space: nowrap; white-space: nowrap;
margin-bottom: $space-m; margin-bottom: $space-md;
i { i {
font-size: 25px; font-size: 25px;
...@@ -92,10 +92,10 @@ ...@@ -92,10 +92,10 @@
margin: 40px $space-xl 0 0; margin: 40px $space-xl 0 0;
button { button {
margin-bottom: $space-s; margin-bottom: $space-sm;
} }
} }
.dashboard-settings__json-save-button { .dashboard-settings__json-save-button {
margin-top: $space-m; margin-top: $space-md;
} }
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
&__spinner { &__spinner {
font-size: 32px; font-size: 32px;
margin-bottom: $space-s; margin-bottom: $space-sm;
} }
&__text { &__text {
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
.panel-editor-container__editor { .panel-editor-container__editor {
margin-top: $space-l; margin-top: $space-lg;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1 1 0; flex: 1 1 0;
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
} }
.submenu-controls { .submenu-controls {
padding: 0 $dashboard-padding $space-s $dashboard-padding; padding: 0 $dashboard-padding $space-sm $dashboard-padding;
} }
.panel-editor-container__panel { .panel-editor-container__panel {
......
...@@ -6,7 +6,7 @@ $column-horizontal-spacing: 10px; ...@@ -6,7 +6,7 @@ $column-horizontal-spacing: 10px;
padding: $panel-padding; padding: $panel-padding;
padding-top: 10px; padding-top: 10px;
border-radius: $border-radius; border-radius: $border-radius;
margin: $space-m 0 $space-s; margin: $space-md 0 $space-sm;
border: $panel-border; border: $panel-border;
flex-direction: column; flex-direction: column;
} }
......
...@@ -285,8 +285,8 @@ li.sidemenu-org-switcher { ...@@ -285,8 +285,8 @@ li.sidemenu-org-switcher {
position: unset; position: unset;
width: 100%; width: 100%;
float: none; float: none;
margin-top: $space-s; margin-top: $space-sm;
margin-bottom: $space-s; margin-bottom: $space-sm;
> li > a { > li > a {
padding-left: 15px; padding-left: 15px;
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
align-items: flex-start; align-items: flex-start;
padding: 0 0 $space-s 0; padding: 0 0 $space-sm 0;
} }
.annotation-disabled, .annotation-disabled,
......
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
} }
.explore-panel { .explore-panel {
margin-top: $space-s; margin-top: $space-sm;
} }
.explore-panel__body { .explore-panel__body {
...@@ -216,20 +216,20 @@ ...@@ -216,20 +216,20 @@
.explore-panel__header-label { .explore-panel__header-label {
font-weight: 500; font-weight: 500;
margin-right: $space-s; margin-right: $space-sm;
font-size: $font-size-h6; font-size: $font-size-h6;
box-shadow: $text-shadow-faint; box-shadow: $text-shadow-faint;
} }
.explore-panel__header-buttons { .explore-panel__header-buttons {
margin-right: $space-s; margin-right: $space-sm;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $font-size-h6; line-height: $font-size-h6;
} }
.time-series-disclaimer { .time-series-disclaimer {
width: 300px; width: 300px;
margin: $space-s auto; margin: $space-sm auto;
padding: 10px 0; padding: 10px 0;
border-radius: $border-radius; border-radius: $border-radius;
text-align: center; text-align: center;
...@@ -407,7 +407,7 @@ ...@@ -407,7 +407,7 @@
.ReactTable .-pagination { .ReactTable .-pagination {
border-top: none; border-top: none;
box-shadow: none; box-shadow: none;
margin-top: $space-s; margin-top: $space-sm;
} }
.ReactTable .-pagination .-btn { .ReactTable .-pagination .-btn {
color: $blue; color: $blue;
...@@ -448,7 +448,7 @@ ...@@ -448,7 +448,7 @@
// TODO Experimental // TODO Experimental
.cheat-sheet-item { .cheat-sheet-item {
margin: $space-l 0; margin: $space-lg 0;
width: 50%; width: 50%;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment