Skip to content

N
nexpie-grafana-theme
Commit 9e57195b by ijin08
Options

removed dashboard variables, removed headings-font-family variable, created… 

removed dashboard variables, removed headings-font-family variable, created theme variables for links and z-index, removed unused class in _panel_editor and _dashboard
parent abd89484
Showing with 52 additions and 53 deletions
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;
......
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;
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 {
......
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;
......
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;
......
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 {
......
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;
......
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();
}
......
public/sass/pages/_dashboard.scss
.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;
......
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;
}
......
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