IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

changed all rems to pixels in defaults and template, changed back root font size

Browse Source
This commit is contained in:
ijin08 2019-03-08 13:02:55 +01:00
parent c5f4239703
commit 00ce556bd0
5 changed files with 58 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
View File

@ -53,7 +53,7 @@
} }
.panel-options-group__title { .panel-options-group__title {
font-size: 1.1rem; font-size: 16px;
position: relative; position: relative;
top: 1px; top: 1px;
} }

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

@ -17,7 +17,7 @@ $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: .875rem !default; $spacer: ${theme.spacing.m} !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
$spacer-y: $spacer !default; $spacer-y: $spacer !default;
$spacers: ( $spacers: (
@ -46,7 +46,7 @@ $spacers: (
), ),
), ),
) !default; ) !default;
$border-width: 1px !default; $border-width: ${theme.border.width.s} !default;
// Grid breakpoints // Grid breakpoints
// //
@ -54,11 +54,11 @@ $border-width: 1px !default;
// adapting to different screen sizes, for use in media queries. // adapting to different screen sizes, for use in media queries.
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: ${theme.breakpoints.xs},
sm: 544px, sm: ${theme.breakpoints.s},
md: 768px, md: ${theme.breakpoints.m},
lg: 992px, lg: ${theme.breakpoints.l},
xl: 1200px, xl: ${theme.breakpoints.xl},
) !default; ) !default;
// Grid containers // Grid containers
@ -127,8 +127,8 @@ $border-radius-sm: 2px !default;
// Page // Page
$page-sidebar-width: 9.625rem; $page-sidebar-width: 154px;
$page-sidebar-margin: 3.5rem; $page-sidebar-margin: 56px;
// Links // Links
// ------------------------- // -------------------------
@ -160,7 +160,7 @@ $input-padding-y-lg: 10px !default;
$input-height: 35px !default; $input-height: 35px !default;
$gf-form-margin: 0.175rem; $gf-form-margin: 3px;
$gf-form-input-height: 35px; $gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
@ -185,13 +185,13 @@ $zindex-typeahead: 1060;
// Buttons // Buttons
// //
$btn-padding-x: .875rem !default; $btn-padding-x: 14px !default;
$btn-padding-y: 0.6125rem !default; $btn-padding-y: 10px !default;
$btn-line-height: 1 !default; $btn-line-height: 1 !default;
$btn-font-weight: ${theme.typography.weight.semibold} !default; $btn-font-weight: ${theme.typography.weight.semibold} !default;
$btn-padding-x-sm: 0.4375rem !default; $btn-padding-x-sm: 7px !default;
$btn-padding-y-sm: 0.25rem !default; $btn-padding-y-sm: 4px !default;
$btn-padding-x-lg: 21px !default; $btn-padding-x-lg: 21px !default;
$btn-padding-y-lg: 11px !default; $btn-padding-y-lg: 11px !default;

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

@ -8,20 +8,20 @@ const theme: GrafanaThemeCommons = {
monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
}, },
size: { size: {
root: '100%', root: '14px',
base: '.8125rem', base: '13px',
xs: '.625rem', xs: '10px',
s: '.75rem', s: '12px',
m: '.875rem', m: '14px',
l: '1.125rem', l: '18px',
}, },
heading: { heading: {
h1: '1.75rem', h1: '28px',
h2: '1.5rem', h2: '24px',
h3: '1.3125rem', h3: '21px',
h4: '1.125rem', h4: '18px',
h5: '1rem', h5: '16px',
h6: '.875rem', h6: '14px',
}, },
weight: { weight: {
light: 300, light: 300,
@ -35,7 +35,7 @@ const theme: GrafanaThemeCommons = {
l: 1.5, l: 1.5,
}, },
}, },
brakpoints: { breakpoints: {
xs: '0', xs: '0',
s: '544px', s: '544px',
m: '768px', m: '768px',
@ -44,9 +44,9 @@ const theme: GrafanaThemeCommons = {
}, },
spacing: { spacing: {
xs: '0', xs: '0',
s: '0.2rem', s: '3px',
m: '1rem', m: '14px',
l: '1.5rem', l: '21px',
gutter: '30px', gutter: '30px',
}, },
border: { border: {
@ -55,6 +55,9 @@ const theme: GrafanaThemeCommons = {
s: '3px', s: '3px',
m: '5px', m: '5px',
}, },
width: {
s: '1px',
},
}, },
}; };

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

@ -6,7 +6,7 @@ export enum GrafanaThemeType {
export interface GrafanaThemeCommons { export interface GrafanaThemeCommons {
name: string; name: string;
// TODO: not sure if should be a part of theme // TODO: not sure if should be a part of theme
brakpoints: { breakpoints: {
xs: string; xs: string;
s: string; s: string;
m: string; m: string;
@ -60,6 +60,9 @@ export interface GrafanaThemeCommons {
s: string; s: string;
m: string; m: string;
}; };
width: {
s: string;
};
}; };
} }

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

@ -20,7 +20,7 @@ $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: 0.875rem !default; $spacer: 14px !default;
$spacer-x: $spacer !default; $spacer-x: $spacer !default;
$spacer-y: $spacer !default; $spacer-y: $spacer !default;
$spacers: ( $spacers: (
@ -91,23 +91,23 @@ $font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-base: $font-family-sans-serif !default; $font-family-base: $font-family-sans-serif !default;
$font-size-root: 100% !default; $font-size-root: 14px !default;
$font-size-base: 0.8125rem !default; $font-size-base: 13px !default;
$font-size-lg: 1.125rem !default; $font-size-lg: 18px !default;
$font-size-md: 0.875rem !default; $font-size-md: 14px !default;
$font-size-sm: 0.75rem !default; $font-size-sm: 12px !default;
$font-size-xs: 0.625rem !default; $font-size-xs: 10px !default;
$line-height-base: 1.5 !default; $line-height-base: 1.5 !default;
$font-weight-semi-bold: 500; $font-weight-semi-bold: 500;
$font-size-h1: 1.75rem !default; $font-size-h1: 28px !default;
$font-size-h2: 1.5rem !default; $font-size-h2: 24px !default;
$font-size-h3: 1.3125rem !default; $font-size-h3: 21px !default;
$font-size-h4: 1.125rem !default; $font-size-h4: 18px !default;
$font-size-h5: 1rem !default; $font-size-h5: 16px !default;
$font-size-h6: 0.875rem !default; $font-size-h6: 14px !default;
$headings-margin-bottom: ($spacer / 2) !default; $headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@ -130,8 +130,8 @@ $border-radius-sm: 2px !default;
// Page // Page
$page-sidebar-width: 9.625rem; $page-sidebar-width: 154px;
$page-sidebar-margin: 3.5rem; $page-sidebar-margin: 56px;
// Links // Links
// ------------------------- // -------------------------
@ -163,7 +163,7 @@ $input-padding-y-lg: 10px !default;
$input-height: 35px !default; $input-height: 35px !default;
$gf-form-margin: 0.175rem; $gf-form-margin: 3px;
$gf-form-input-height: 35px; $gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
@ -188,13 +188,13 @@ $zindex-typeahead: 1060;
// Buttons // Buttons
// //
$btn-padding-x: 0.875rem !default; $btn-padding-x: 14px !default;
$btn-padding-y: 0.6125rem !default; $btn-padding-y: 10px !default;
$btn-line-height: 1 !default; $btn-line-height: 1 !default;
$btn-font-weight: 500 !default; $btn-font-weight: 500 !default;
$btn-padding-x-sm: 0.4375rem !default; $btn-padding-x-sm: 7px !default;
$btn-padding-y-sm: 0.25rem !default; $btn-padding-y-sm: 4px !default;
$btn-padding-x-lg: 21px !default; $btn-padding-x-lg: 21px !default;
$btn-padding-y-lg: 11px !default; $btn-padding-y-lg: 11px !default;