mirror of
https://github.com/grafana/grafana.git
synced 2025-02-09 23:16:16 -06:00
Merge pull request #15901 from grafana/8px-system-margins
8px system margins
This commit is contained in:
Torkel Ödegaard
GitHub
commit
51c06a8c46
@ -17,7 +17,12 @@ $enable-hover-media-query: false !default;
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// 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-y: $spacer !default;
|
||||
$spacers: (
|
||||
|
||||
@ -43,10 +43,12 @@ const theme: GrafanaThemeCommons = {
|
||||
xl: '1200px',
|
||||
},
|
||||
spacing: {
|
||||
xs: '0',
|
||||
s: '3px',
|
||||
m: '14px',
|
||||
l: '21px',
|
||||
d: '14px',
|
||||
xs: '4px',
|
||||
s: '8px',
|
||||
m: '16px',
|
||||
l: '24px',
|
||||
xl: '32px',
|
||||
gutter: '30px',
|
||||
},
|
||||
border: {
|
||||
|
||||
@ -48,10 +48,12 @@ export interface GrafanaThemeCommons {
|
||||
};
|
||||
};
|
||||
spacing: {
|
||||
d: string;
|
||||
xs: string;
|
||||
s: string;
|
||||
m: string;
|
||||
l: string;
|
||||
xl: string;
|
||||
gutter: string;
|
||||
};
|
||||
border: {
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
.gicon {
|
||||
font-size: 30px;
|
||||
margin-right: $spacer;
|
||||
margin-right: $space-md;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -32,16 +32,16 @@
|
||||
.add-panel-widget__title {
|
||||
font-size: $font-size-md;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
margin-right: $spacer * 2;
|
||||
margin-right: $space-xl;
|
||||
}
|
||||
|
||||
.add-panel-widget__link {
|
||||
margin: 0 8px;
|
||||
margin: 0 $space-sm;
|
||||
width: 154px;
|
||||
}
|
||||
|
||||
.add-panel-widget__icon {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: $space-sm;
|
||||
|
||||
.gicon {
|
||||
color: white;
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
.add-panel-widget__create {
|
||||
display: inherit;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: $space-lg;
|
||||
// this is to have the big button appear centered
|
||||
margin-top: 55px;
|
||||
}
|
||||
@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
.add-panel-widget__action {
|
||||
margin: 0 4px;
|
||||
margin: 0 $space-xs;
|
||||
}
|
||||
|
||||
.add-panel-widget__btn-container {
|
||||
|
||||
@ -20,6 +20,11 @@ $enable-hover-media-query: false !default;
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// 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-x: $spacer !default;
|
||||
$spacer-y: $spacer !default;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.add-data-source-header {
|
||||
margin-bottom: $spacer * 2;
|
||||
margin-bottom: $space-xl;
|
||||
padding-top: $spacer;
|
||||
text-align: center;
|
||||
}
|
||||
@ -7,7 +7,7 @@
|
||||
.add-data-source-search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: $panel-margin * 2;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.add-data-source-grid {
|
||||
@ -41,6 +41,6 @@
|
||||
}
|
||||
|
||||
.add-data-source-grid-item-logo {
|
||||
margin: 0 15px;
|
||||
margin: 0 $space-md;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.layout-selector {
|
||||
@include clearfix();
|
||||
|
||||
margin-left: $spacer;
|
||||
margin-left: $space-md;
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
@ -9,7 +9,7 @@
|
||||
color: $text-color-weak;
|
||||
box-shadow: $card-shadow;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
padding: $space-sm;
|
||||
line-height: 1;
|
||||
font-size: 130%;
|
||||
float: right;
|
||||
@ -35,7 +35,7 @@
|
||||
}
|
||||
|
||||
.card-section {
|
||||
margin-bottom: $spacer * 2;
|
||||
margin-bottom: $space-xl;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
@ -50,7 +50,7 @@
|
||||
height: 100%;
|
||||
background: $card-background;
|
||||
box-shadow: $card-shadow;
|
||||
padding: 1rem;
|
||||
padding: $space-md;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
@ -58,7 +58,7 @@
|
||||
}
|
||||
|
||||
.label-tag {
|
||||
margin-left: 6px;
|
||||
margin-left: $space-sm;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
@ -80,15 +80,8 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-item-cog {
|
||||
font-size: 130%;
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.card-item-header {
|
||||
margin-bottom: $spacer;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.card-item-type {
|
||||
@ -110,7 +103,7 @@
|
||||
}
|
||||
|
||||
.card-item-label {
|
||||
margin-left: 8px;
|
||||
margin-left: $space-sm;
|
||||
}
|
||||
|
||||
.card-item-sub-name {
|
||||
@ -123,7 +116,7 @@
|
||||
.card-item-sub-name--header {
|
||||
color: $text-color-weak;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $spacer;
|
||||
margin-bottom: $space-md;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -136,7 +129,7 @@
|
||||
.card-item-notice {
|
||||
font-size: $font-size-sm;
|
||||
display: inline-block;
|
||||
margin-left: $spacer;
|
||||
margin-left: $space-md;
|
||||
}
|
||||
|
||||
.card-item-header-action {
|
||||
@ -145,7 +138,7 @@
|
||||
|
||||
.card-item-wrapper {
|
||||
width: 100%;
|
||||
padding: 0 1rem 1rem 0rem;
|
||||
padding: 0 $space-md $space-md 0;
|
||||
}
|
||||
|
||||
.card-item-wrapper--clickable {
|
||||
@ -153,7 +146,7 @@
|
||||
}
|
||||
|
||||
.card-item-figure {
|
||||
margin: 0 $spacer $spacer 0;
|
||||
margin: 0 $space-md $space-md 0;
|
||||
height: 6rem;
|
||||
|
||||
img {
|
||||
@ -195,7 +188,7 @@
|
||||
.card-item-wrapper {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 3px;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
|
||||
.card-item-wrapper--clickable {
|
||||
@ -212,9 +205,9 @@
|
||||
}
|
||||
|
||||
.card-item-figure {
|
||||
margin: 0 $spacer 0 0;
|
||||
margin: 0 $space-md 0 0;
|
||||
img {
|
||||
width: 3.5rem;
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
font-size: $font-size-h3;
|
||||
padding-right: 60px;
|
||||
white-space: nowrap;
|
||||
margin-bottom: $spacer;
|
||||
margin-bottom: $space-md;
|
||||
|
||||
i {
|
||||
font-size: 25px;
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
.dashboard-settings__header {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer * 2;
|
||||
margin-bottom: $space-xl;
|
||||
}
|
||||
|
||||
.dashboard-settings__subheader {
|
||||
@ -89,13 +89,13 @@
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
margin: $spacer * 3 $spacer * 2 0 0;
|
||||
margin: 40px $space-xl 0 0;
|
||||
|
||||
button {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-settings__json-save-button {
|
||||
margin-top: $spacer;
|
||||
margin-top: $space-md;
|
||||
}
|
||||
|
||||
@ -165,7 +165,7 @@
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-weak;
|
||||
border-bottom: 1px solid $dropdownDividerBottom;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: $space-xs;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -190,7 +190,7 @@ li.sidemenu-org-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i.fa.fa-random {
|
||||
margin-right: 4px;
|
||||
margin-right: $space-xs;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
@ -283,8 +283,8 @@ li.sidemenu-org-switcher {
|
||||
position: unset;
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: $space-sm;
|
||||
margin-bottom: $space-sm;
|
||||
|
||||
> li > a {
|
||||
padding-left: 15px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user