IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

added new variables for spacing, set margins in _cards with new variables

Browse Source
This commit is contained in:
ijin08 2019-03-11 08:51:32 +01:00
parent 00ce556bd0
commit 7dc4853e91
5 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,11 @@ $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-s: ${theme.spacing.s} !default;
$space-m: ${theme.spacing.m} !default;
$space-xl: ${theme.spacing.xl} !default;
$spacer: ${theme.spacing.d} !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (

10
packages/grafana-ui/src/themes/default.ts
View File

@ -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: {

2
packages/grafana-ui/src/types/theme.ts
View File

@ -48,10 +48,12 @@ export interface GrafanaThemeCommons {
};
};
spacing: {
d: string;
xs: string;
s: string;
m: string;
l: string;
xl: string;
gutter: string;
};
border: {

4
public/sass/_variables.generated.scss
View File

@ -20,6 +20,10 @@ $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-s: 8px !default;
$space-m: 16px !default;
$space-xl: 32px !default;
$spacer: 14px !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;

35
public/sass/components/_cards.scss
View File

@ -1,7 +1,7 @@
.layout-selector {
@include clearfix();
margin-left: $spacer;
margin-left: $space-m;
text-align: right;
button {
@ -9,7 +9,7 @@
color: $text-color-weak;
box-shadow: $card-shadow;
border: none;
padding: 0.5rem;
padding: $space-s;
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-m;
border-radius: 4px;
&:hover {
@ -58,7 +58,7 @@
}
.label-tag {
margin-left: 6px;
margin-left: $space-s;
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-m;
}
.card-item-type {
@ -110,7 +103,7 @@
}
.card-item-label {
margin-left: 8px;
margin-left: $space-s;
}
.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-m;
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-m;
}
.card-item-header-action {
@ -145,7 +138,7 @@
.card-item-wrapper {
width: 100%;
padding: 0 1rem 1rem 0rem;
padding: 0 $space-m $space-m 0;
}
.card-item-wrapper--clickable {
@ -153,7 +146,7 @@
}
.card-item-figure {
margin: 0 $spacer $spacer 0;
margin: 0 $space-m $space-m 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-m 0 0;
img {
width: 3.5rem;
width: 48px;
}
}