diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 16f4a20d139..89568ec7f6c 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -110,7 +110,6 @@ $font-size-h4: ${theme.typography.heading.h4} !default; $font-size-h5: ${theme.typography.heading.h5} !default; $font-size-h6: ${theme.typography.heading.h6} !default; -$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-line-height: ${theme.typography.lineHeight.sm} !default; // Components @@ -130,8 +129,8 @@ $page-sidebar-margin: 56px; // Links // ------------------------- -$link-decoration: none !default; -$link-hover-decoration: none !default; +$link-decoration: ${theme.typography.link.decoration} !default; +$link-hover-decoration: ${theme.typography.link.hoverDecoration} !default; // Tables // @@ -166,13 +165,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) -$zindex-dropdown: 1000; -$zindex-navbar-fixed: 1020; -$zindex-sidemenu: 1025; -$zindex-tooltip: 1030; -$zindex-modal-backdrop: 1040; -$zindex-modal: 1050; -$zindex-typeahead: 1060; +$zindex-dropdown: ${theme.zIndex.dropdown}; +$zindex-navbar-fixed: ${theme.zIndex.navbarFixed}; +$zindex-sidemenu: ${theme.zIndex.sidemenu}; +$zindex-tooltip: ${theme.zIndex.tooltip}; +$zindex-modal-backdrop: ${theme.zIndex.modalBackdrop}; +$zindex-modal: ${theme.zIndex.modal}; +$zindex-typeahead: ${theme.zIndex.typeahead}; // Buttons // @@ -196,12 +195,6 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; // sidemenu $side-menu-width: 60px; -// dashboard -$dashboard-padding: 10px * 2; -$panel-horizontal-padding: 10; -$panel-vertical-padding: 5; -$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; - // tabs $tabs-padding: 10px 15px 9px; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 2dc50a7a5b1..934fa7634d1 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -4,7 +4,7 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: "'Roboto', Helvetica, Arial, sans-serif", + sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif", monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", }, size: { @@ -34,6 +34,10 @@ const theme: GrafanaThemeCommons = { md: 4 / 3, lg: 1.5, }, + link: { + decoration: 'none', + hoverDecoration: 'none', + }, }, breakpoints: { xs: '0', @@ -66,6 +70,15 @@ const theme: GrafanaThemeCommons = { horizontal: 10, vertical: 5, }, + zIndex: { + dropdown: '1000', + navbarFixed: '1020', + sidemenu: '1025', + tooltip: '1030', + modalBackdrop: '1040', + modal: '1050', + typeahead: '1060', + }, }; export default theme; diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 4da0ba8218c..fcc427541e6 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -46,6 +46,10 @@ export interface GrafanaThemeCommons { h5: string; h6: string; }; + link: { + decoration: string; + hoverDecoration: string; + }; }; spacing: { d: string; @@ -71,6 +75,15 @@ export interface GrafanaThemeCommons { horizontal: number; vertical: number; }; + zIndex: { + dropdown: string; + navbarFixed: string; + sidemenu: string; + tooltip: string; + modalBackdrop: string; + modal: string; + typeahead: string; + }; } export interface GrafanaTheme extends GrafanaThemeCommons { diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 21fc602b8ba..340e56c8b78 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -90,7 +90,7 @@ $grid-gutter-width: 30px !default; // Typography // ------------------------- -$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif; +$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; $font-size-root: 14px !default; @@ -113,7 +113,6 @@ $font-size-h4: 18px !default; $font-size-h5: 16px !default; $font-size-h6: 14px !default; -$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-line-height: 1.1 !default; // Components @@ -199,12 +198,6 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; // sidemenu $side-menu-width: 60px; -// dashboard -$dashboard-padding: 10px * 2; -$panel-horizontal-padding: 10; -$panel-vertical-padding: 5; -$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; - // tabs $tabs-padding: 10px 15px 9px; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 9efae56d5e4..479e0d6c9cd 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -110,7 +110,6 @@ h6, .h5, .h6 { margin-bottom: $space-sm; - font-family: $headings-font-family; font-weight: $font-weight-regular; line-height: $headings-line-height; color: $headings-color; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 8acf98be1b2..6df1cc60f60 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -9,14 +9,14 @@ &--edit { height: 40%; - margin: 0 $dashboard-padding; + margin: 0 $space-md; } &--view { flex: 1 1 0; height: 90%; - margin: 0 $dashboard-padding; - padding-top: $dashboard-padding; + margin: 0 $space-md; + padding-top: $space-md; } } @@ -80,11 +80,7 @@ } .submenu-controls { - padding: 0 $dashboard-padding $space-sm $dashboard-padding; - } - - .panel-editor-container__panel { - margin: 0 $dashboard-padding; + padding: 0 $space-md $space-sm $space-md; } .search-container { diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss index 22c82461e85..4e2bc86d960 100644 --- a/public/sass/components/_panel_logs.scss +++ b/public/sass/components/_panel_logs.scss @@ -3,8 +3,7 @@ $column-horizontal-spacing: 10px; .logs-panel-options { display: flex; background-color: $page-bg; - padding: $panel-padding; - padding-top: 10px; + padding: $space-sm $space-md $space-sm $space-md; border-radius: $border-radius; margin: $space-md 0 $space-sm; border: $panel-border; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 6abadfa465b..e58b37711d0 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -13,7 +13,7 @@ .tabbed-view-header { box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; - padding: 0 $dashboard-padding; + padding: 0 $space-md; @include clearfix(); } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index c02c9227d29..c189df07f4a 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -1,5 +1,5 @@ .dashboard-container { - padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding; + padding: $space-md $space-md 0 $space-md; width: 100%; height: 100%; box-sizing: border-box; @@ -78,7 +78,7 @@ div.flot-text { } .panel-content { - padding: $panel-padding; + padding: 0 $space-md $space-sm $space-md; height: calc(100% - 27px); position: relative; @@ -260,7 +260,6 @@ div.flot-text { } .dashboard-header { - font-family: $headings-font-family; font-size: $font-size-h3; text-align: center; overflow: hidden; @@ -273,10 +272,6 @@ div.flot-text { } } -.panel-full-edit { - padding-top: $dashboard-padding; -} - .dashboard-loading { height: 60vh; display: flex; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 60c1a600014..b610ac62534 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -31,7 +31,7 @@ flex-flow: row wrap; justify-content: flex-start; height: auto; - padding: 0 $dashboard-padding; + padding: 0 $space-md; border-bottom: 1px solid #0000; transition-duration: 0.35s; transition-timing-function: ease-in-out; @@ -91,7 +91,7 @@ } .explore-toolbar-content-item:first-child { - padding-left: $dashboard-padding; + padding-left: $space-md; margin-right: auto; } @@ -142,7 +142,7 @@ @media only screen and (max-width: 544px) { .explore-toolbar-header-title { .navbar-page-btn { - margin-left: $dashboard-padding; + margin-left: $space-md; } } } @@ -156,7 +156,7 @@ } .explore-container { - padding: $dashboard-padding; + padding: $space-md; } .explore-wrapper { @@ -172,16 +172,14 @@ } .explore-panel__body { - padding: $panel-padding; + padding: 0 $space-md $space-sm $space-md; } .explore-panel__header { - padding: $panel-padding; - padding-top: 5px; - padding-bottom: 0; + padding: $space-sm $space-md 0 $space-md; display: flex; cursor: pointer; - margin-bottom: 5px; + margin-bottom: $space-sm; transition: all 0.1s linear; }