Skip to content

N
nexpie-grafana-theme
Commit 51c06a8c by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #15901 from grafana/8px-system-margins 

8px system margins
parents 4ed1fdf7 a4186974
Showing with 51 additions and 44 deletions
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
...@@ -17,7 +17,12 @@ $enable-hover-media-query: false !default; ...@@ -17,7 +17,12 @@ $enable-hover-media-query: false !default;
// Control the default styling of most Bootstrap elements by modifying these // Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
$spacer: ${theme.spacing.m} !default; $space-xs: ${theme.spacing.xs} !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; $spacer-x: $spacer !default;
$spacer-y: $spacer !default; $spacer-y: $spacer !default;
$spacers: ( $spacers: (
......
packages/grafana-ui/src/themes/default.ts
...@@ -43,10 +43,12 @@ const theme: GrafanaThemeCommons = { ...@@ -43,10 +43,12 @@ const theme: GrafanaThemeCommons = {
xl: '1200px', xl: '1200px',
}, },
spacing: { spacing: {
xs: '0', d: '14px',
s: '3px', xs: '4px',
m: '14px', s: '8px',
l: '21px', m: '16px',
l: '24px',
xl: '32px',
gutter: '30px', gutter: '30px',
}, },
border: { border: {
......
packages/grafana-ui/src/types/theme.ts
...@@ -48,10 +48,12 @@ export interface GrafanaThemeCommons { ...@@ -48,10 +48,12 @@ export interface GrafanaThemeCommons {
}; };
}; };
spacing: { spacing: {
d: string;
xs: string; xs: string;
s: string; s: string;
m: string; m: string;
l: string; l: string;
xl: string;
gutter: string; gutter: string;
}; };
border: { border: {
......
public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.gicon { .gicon {
font-size: 30px; font-size: 30px;
margin-right: $spacer; margin-right: $space-md;
} }
&:hover { &:hover {
...@@ -32,16 +32,16 @@ ...@@ -32,16 +32,16 @@
.add-panel-widget__title { .add-panel-widget__title {
font-size: $font-size-md; font-size: $font-size-md;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
margin-right: $spacer * 2; margin-right: $space-xl;
} }
.add-panel-widget__link { .add-panel-widget__link {
margin: 0 8px; margin: 0 $space-sm;
width: 154px; width: 154px;
} }
.add-panel-widget__icon { .add-panel-widget__icon {
margin-bottom: 8px; 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: 24px; 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;
} }
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
} }
.add-panel-widget__action { .add-panel-widget__action {
margin: 0 4px; margin: 0 $space-xs;
} }
.add-panel-widget__btn-container { .add-panel-widget__btn-container {
......
public/sass/_variables.generated.scss
...@@ -20,6 +20,11 @@ $enable-hover-media-query: false !default; ...@@ -20,6 +20,11 @@ $enable-hover-media-query: false !default;
// Control the default styling of most Bootstrap elements by modifying these // Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
$space-xs: 4px !default;
$space-sm: 8px !default;
$space-md: 16px !default;
$space-lg: 24px !default;
$space-xl: 32px !default;
$spacer: 14px !default; $spacer: 14px !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
$spacer-y: $spacer !default; $spacer-y: $spacer !default;
......
public/sass/components/_add_data_source.scss
.add-data-source-header { .add-data-source-header {
margin-bottom: $spacer * 2; margin-bottom: $space-xl;
padding-top: $spacer; padding-top: $spacer;
text-align: center; text-align: center;
} }
...@@ -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: $panel-margin * 2; 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 15px; margin: 0 $space-md;
width: 55px; width: 55px;
} }
public/sass/components/_cards.scss
.layout-selector { .layout-selector {
@include clearfix(); @include clearfix();
margin-left: $spacer; 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: 0.5rem; padding: $space-sm;
line-height: 1; line-height: 1;
font-size: 130%; font-size: 130%;
float: right; float: right;
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
} }
.card-section { .card-section {
margin-bottom: $spacer * 2; margin-bottom: $space-xl;
} }
.card-list { .card-list {
...@@ -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: 1rem; 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: 6px; margin-left: $space-sm;
font-size: 11px; font-size: 11px;
padding: 2px 6px; padding: 2px 6px;
} }
...@@ -80,15 +80,8 @@ ...@@ -80,15 +80,8 @@
overflow: hidden; overflow: hidden;
} }
.card-item-cog {
font-size: 130%;
position: relative;
top: 1rem;
color: $text-muted;
}
.card-item-header { .card-item-header {
margin-bottom: $spacer; margin-bottom: $space-md;
} }
.card-item-type { .card-item-type {
...@@ -110,7 +103,7 @@ ...@@ -110,7 +103,7 @@
} }
.card-item-label { .card-item-label {
margin-left: 8px; margin-left: $space-sm;
} }
.card-item-sub-name { .card-item-sub-name {
...@@ -123,7 +116,7 @@ ...@@ -123,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: $spacer; margin-bottom: $space-md;
font-size: $font-size-sm; font-size: $font-size-sm;
font-weight: bold; font-weight: bold;
} }
...@@ -136,7 +129,7 @@ ...@@ -136,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: $spacer; margin-left: $space-md;
} }
.card-item-header-action { .card-item-header-action {
...@@ -145,7 +138,7 @@ ...@@ -145,7 +138,7 @@
.card-item-wrapper { .card-item-wrapper {
width: 100%; width: 100%;
padding: 0 1rem 1rem 0rem; padding: 0 $space-md $space-md 0;
} }
.card-item-wrapper--clickable { .card-item-wrapper--clickable {
...@@ -153,7 +146,7 @@ ...@@ -153,7 +146,7 @@
} }
.card-item-figure { .card-item-figure {
margin: 0 $spacer $spacer 0; margin: 0 $space-md $space-md 0;
height: 6rem; height: 6rem;
img { img {
...@@ -195,7 +188,7 @@ ...@@ -195,7 +188,7 @@
.card-item-wrapper { .card-item-wrapper {
padding: 0; padding: 0;
width: 100%; width: 100%;
margin-bottom: 3px; margin-bottom: $space-xs;
} }
.card-item-wrapper--clickable { .card-item-wrapper--clickable {
...@@ -212,9 +205,9 @@ ...@@ -212,9 +205,9 @@
} }
.card-item-figure { .card-item-figure {
margin: 0 $spacer 0 0; margin: 0 $space-md 0 0;
img { img {
width: 3.5rem; width: 48px;
} }
} }
......
public/sass/components/_dashboard_settings.scss
...@@ -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: $spacer; margin-bottom: $space-md;
i { i {
font-size: 25px; font-size: 25px;
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
.dashboard-settings__header { .dashboard-settings__header {
font-size: $font-size-h3; font-size: $font-size-h3;
margin-bottom: $spacer * 2; margin-bottom: $space-xl;
} }
.dashboard-settings__subheader { .dashboard-settings__subheader {
...@@ -89,13 +89,13 @@ ...@@ -89,13 +89,13 @@
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
flex-grow: 1; flex-grow: 1;
margin: $spacer * 3 $spacer * 2 0 0; margin: 40px $space-xl 0 0;
button { button {
margin-bottom: 10px; margin-bottom: $space-sm;
} }
} }
.dashboard-settings__json-save-button { .dashboard-settings__json-save-button {
margin-top: $spacer; margin-top: $space-md;
} }
public/sass/components/_sidemenu.scss
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
font-size: $font-size-sm; font-size: $font-size-sm;
color: $text-color-weak; color: $text-color-weak;
border-bottom: 1px solid $dropdownDividerBottom; border-bottom: 1px solid $dropdownDividerBottom;
margin-bottom: 0.25rem; margin-bottom: $space-xs;
white-space: nowrap; white-space: nowrap;
} }
...@@ -190,7 +190,7 @@ li.sidemenu-org-switcher { ...@@ -190,7 +190,7 @@ li.sidemenu-org-switcher {
display: flex; display: flex;
align-items: center; align-items: center;
> i.fa.fa-random { > i.fa.fa-random {
margin-right: 4px; margin-right: $space-xs;
top: 1px; top: 1px;
} }
} }
...@@ -283,8 +283,8 @@ li.sidemenu-org-switcher { ...@@ -283,8 +283,8 @@ li.sidemenu-org-switcher {
position: unset; position: unset;
width: 100%; width: 100%;
float: none; float: none;
margin-top: 0.5rem; margin-top: $space-sm;
margin-bottom: 0.5rem; margin-bottom: $space-sm;
> li > a { > li > a {
padding-left: 15px; padding-left: 15px;
......
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