mirror of
https://github.com/grafana/grafana.git
synced 2025-02-09 06:56:07 -06:00
Dashboards: Default Home Dashboard Update (#21534)
* HomeLinks: WIP panel for getting started links * Progress * progress * Updated styling * Updated default home dashboard * Update light card styles * Tweaks based on feedback
This commit is contained in:
Torkel Ödegaard
GitHub
parent
1e2f7567f0
commit
15b2bf3e5c
@ -124,13 +124,13 @@ $code-tag-bg: $gray-6;
|
||||
$code-tag-border: $gray-4;
|
||||
|
||||
// cards
|
||||
$card-background: linear-gradient(135deg, $gray-6, $gray-5);
|
||||
$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6);
|
||||
$card-background: linear-gradient(135deg, $gray-6, $gray-7);
|
||||
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-5);
|
||||
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Lists
|
||||
$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background;
|
||||
$list-item-hover-bg: darken($gray-5, 5%);
|
||||
$list-item-bg: $gray-7;
|
||||
$list-item-hover-bg: $gray-6;
|
||||
$list-item-link-color: $text-color;
|
||||
$list-item-shadow: $card-shadow;
|
||||
|
||||
|
||||
@ -8,14 +8,38 @@ export function cardChrome(theme: GrafanaTheme): string {
|
||||
background: linear-gradient(135deg, ${theme.colors.dark9}, ${theme.colors.dark6});
|
||||
}
|
||||
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
|
||||
border-radius: ${theme.border.radius.md};
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray5});
|
||||
background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray7});
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, ${theme.colors.dark5}, ${theme.colors.gray6});
|
||||
background: linear-gradient(135deg, ${theme.colors.gray7}, ${theme.colors.gray6});
|
||||
}
|
||||
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: ${theme.border.radius.md};
|
||||
`;
|
||||
}
|
||||
|
||||
export function listItem(theme: GrafanaTheme): string {
|
||||
if (theme.isDark) {
|
||||
return `
|
||||
background: ${theme.colors.dark7};
|
||||
&:hover {
|
||||
background: ${theme.colors.dark9};
|
||||
}
|
||||
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
|
||||
border-radius: ${theme.border.radius.md};
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
background: ${theme.colors.gray7};
|
||||
&:hover {
|
||||
background: ${theme.colors.gray6};
|
||||
}
|
||||
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: ${theme.border.radius.md};
|
||||
`;
|
||||
}
|
||||
|
||||
@ -214,7 +214,7 @@ func getPanelSort(id string) int {
|
||||
switch id {
|
||||
case "graph":
|
||||
sort = 1
|
||||
case "singlestat":
|
||||
case "stat":
|
||||
sort = 2
|
||||
case "gauge":
|
||||
sort = 3
|
||||
@ -222,14 +222,18 @@ func getPanelSort(id string) int {
|
||||
sort = 4
|
||||
case "table":
|
||||
sort = 5
|
||||
case "text":
|
||||
case "singlestat":
|
||||
sort = 6
|
||||
case "heatmap":
|
||||
case "text":
|
||||
sort = 7
|
||||
case "alertlist":
|
||||
case "heatmap":
|
||||
sort = 8
|
||||
case "dashlist":
|
||||
case "alertlist":
|
||||
sort = 9
|
||||
case "dashlist":
|
||||
sort = 10
|
||||
case "news":
|
||||
sort = 10
|
||||
}
|
||||
return sort
|
||||
}
|
||||
|
||||
@ -53,6 +53,7 @@ import * as pieChartPanel from 'app/plugins/panel/piechart/module';
|
||||
import * as barGaugePanel from 'app/plugins/panel/bargauge/module';
|
||||
import * as logsPanel from 'app/plugins/panel/logs/module';
|
||||
import * as newsPanel from 'app/plugins/panel/news/module';
|
||||
import * as homeLinksPanel from 'app/plugins/panel/homelinks/module';
|
||||
|
||||
const builtInPlugins: any = {
|
||||
'app/plugins/datasource/graphite/module': graphitePlugin,
|
||||
@ -92,6 +93,7 @@ const builtInPlugins: any = {
|
||||
'app/plugins/panel/piechart/module': pieChartPanel,
|
||||
'app/plugins/panel/bargauge/module': barGaugePanel,
|
||||
'app/plugins/panel/logs/module': logsPanel,
|
||||
'app/plugins/panel/homelinks/module': homeLinksPanel,
|
||||
};
|
||||
|
||||
export default builtInPlugins;
|
||||
|
||||
@ -43,7 +43,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
check: () => Promise.resolve(true),
|
||||
},
|
||||
{
|
||||
title: 'Create your first data source',
|
||||
title: 'Create a data source',
|
||||
cta: 'Add data source',
|
||||
icon: 'gicon gicon-datasources',
|
||||
href: 'datasources/new?gettingstarted',
|
||||
@ -60,7 +60,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Create your first dashboard',
|
||||
title: 'Build a dashboard',
|
||||
cta: 'New dashboard',
|
||||
icon: 'gicon gicon-dashboard',
|
||||
href: 'dashboard/new?gettingstarted',
|
||||
@ -81,7 +81,8 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
return getBackendSrv()
|
||||
.get('/api/org/users/lookup')
|
||||
.then((res: any) => {
|
||||
return res.length > 1;
|
||||
/* return res.length > 1; */
|
||||
return false;
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
48
public/app/plugins/panel/homelinks/img/news.svg
Normal file
48
public/app/plugins/panel/homelinks/img/news.svg
Normal file
@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px"
|
||||
viewBox="0 0 395.569 395.569"
|
||||
style="enable-background:new 0 0 395.569 395.569; fill:#1573B9"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M365.11,81.124c-2.3-29.794-27.261-53.339-57.635-53.339H57.826C25.941,27.785,0,53.726,0,85.61v224.35
|
||||
c0,31.884,25.941,57.825,57.826,57.825h279.918c31.885,0,57.826-25.941,57.826-57.825V132.03
|
||||
C395.569,110.043,383.225,90.899,365.11,81.124z M333.99,309.96c0,14.619-11.894,26.514-26.514,26.514H57.826
|
||||
c-14.62,0-26.514-11.895-26.514-26.514V85.61c0-14.619,11.894-26.514,26.514-26.514h249.65c14.62,0,26.514,11.895,26.514,26.514
|
||||
V309.96z"/>
|
||||
<path d="M62.901,145.138h0.652c4.505,0,8.156-3.651,8.156-8.157v-28.756l24.358,33.548c1.536,2.113,3.988,3.365,6.601,3.365h0.791
|
||||
c0.03,0,0.06-0.006,0.088-0.006c0.041,0,0.081,0.006,0.123,0.006h0.652c4.504,0,8.156-3.651,8.156-8.157V83.399
|
||||
c0-4.505-3.652-8.157-8.156-8.157h-0.652c-4.506,0-8.157,3.652-8.157,8.157v28.755L71.156,78.606
|
||||
c-1.535-2.113-3.989-3.364-6.6-3.364h-0.792c-0.03,0-0.058,0.006-0.088,0.006c-0.042,0-0.082-0.006-0.123-0.006h-0.652
|
||||
c-4.505,0-8.156,3.652-8.156,8.157v53.582C54.745,141.487,58.395,145.138,62.901,145.138z"/>
|
||||
<path d="M162.419,128.824h-25.441v-10.971h20.764c4.504,0,8.156-3.651,8.156-8.155v-0.653c0-4.506-3.652-8.157-8.156-8.157h-20.764
|
||||
v-8.681h24.349c4.505,0,8.157-3.651,8.157-8.156v-0.652c0-4.505-3.651-8.157-8.157-8.157h-33.158c-4.505,0-8.157,3.652-8.157,8.157
|
||||
v53.582c0,4.506,3.652,8.157,8.157,8.157h34.251c4.504,0,8.157-3.651,8.157-8.157C170.576,132.477,166.924,128.824,162.419,128.824
|
||||
z"/>
|
||||
<path d="M198.958,145.138h0.501c0.011,0,0.021-0.002,0.032-0.002c0.01,0,0.02,0.002,0.032,0.002h0.421
|
||||
c3.502,0,6.612-2.235,7.731-5.553l10.196-30.274l10.148,30.265c1.114,3.324,4.227,5.563,7.733,5.563h0.501
|
||||
c0.011,0,0.02-0.002,0.032-0.002s0.022,0.002,0.033,0.002h0.421c3.495,0,6.602-2.227,7.724-5.537l18.168-53.583
|
||||
c0.845-2.489,0.437-5.235-1.095-7.371c-1.531-2.137-4-3.405-6.628-3.405h-0.835c-3.516,0-6.636,2.253-7.742,5.59L236.268,111.2
|
||||
l-10.11-30.376c-1.109-3.333-4.227-5.581-7.739-5.581h-1.14c-3.517,0-6.636,2.253-7.742,5.59L199.474,111.2l-10.109-30.376
|
||||
c-1.109-3.333-4.227-5.581-7.74-5.581h-0.834c-2.629,0-5.097,1.268-6.63,3.405c-1.532,2.136-1.94,4.882-1.095,7.371l18.168,53.583
|
||||
C192.355,142.911,195.462,145.138,198.958,145.138z"/>
|
||||
<path d="M289.496,145.138c18.084,0,26.178-10.525,26.177-20.893c0.125-16.176-13.955-20.431-22.368-22.973
|
||||
c-9.335-2.822-10.215-3.955-10.215-6.244c0-1.362,3.264-2.82,8.12-2.82c3.25,0,7.099,0.954,9.36,2.318
|
||||
c3.816,2.306,8.773,1.12,11.135-2.661l0.299-0.479c1.155-1.848,1.521-4.082,1.018-6.202c-0.501-2.121-1.832-3.952-3.693-5.085
|
||||
c-4.992-3.041-11.765-4.857-18.119-4.857c-17.33,0-25.087,9.937-25.087,19.786c0,15.75,13.332,19.788,22.153,22.459
|
||||
c9.605,2.909,10.453,4.065,10.432,6.699c0,2.739-4.776,3.986-9.212,3.986c-4.31,0-9.038-1.84-11.766-4.579
|
||||
c-1.529-1.536-3.605-2.399-5.77-2.402c-0.003,0-0.005,0-0.008,0c-2.162,0-4.239,0.86-5.768,2.39l-0.445,0.446
|
||||
c-1.543,1.543-2.404,3.64-2.389,5.822c0.015,2.183,0.904,4.269,2.467,5.791C271.838,141.499,280.911,145.138,289.496,145.138z"/>
|
||||
<path d="M147.338,168.909H69.755c-8.646,0-15.656,7.009-15.656,15.656c0,8.646,7.009,15.656,15.656,15.656h77.582
|
||||
c8.646,0,15.656-7.01,15.656-15.656C162.994,175.918,155.984,168.909,147.338,168.909z"/>
|
||||
<path d="M147.338,221.094H69.755c-8.646,0-15.656,7.01-15.656,15.656c0,8.646,7.009,15.656,15.656,15.656h77.582
|
||||
c8.646,0,15.656-7.009,15.656-15.656C162.994,228.104,155.984,221.094,147.338,221.094z"/>
|
||||
<path d="M147.338,273.281H69.755c-8.646,0-15.656,7.009-15.656,15.656c0,8.646,7.009,15.656,15.656,15.656h77.582
|
||||
c8.646,0,15.656-7.01,15.656-15.656C162.994,280.29,155.984,273.281,147.338,273.281z"/>
|
||||
<path d="M306.61,166.698H186.967c-5.005,0-9.064,4.059-9.064,9.063V297.74c0,5.005,4.059,9.063,9.064,9.063H306.61
|
||||
c5.006,0,9.064-4.059,9.064-9.063V175.761C315.674,170.756,311.616,166.698,306.61,166.698z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
115
public/app/plugins/panel/homelinks/module.tsx
Executable file
115
public/app/plugins/panel/homelinks/module.tsx
Executable file
@ -0,0 +1,115 @@
|
||||
// Libraries
|
||||
import React, { PureComponent, FC } from 'react';
|
||||
import { css, cx } from 'emotion';
|
||||
|
||||
// Utils & Services
|
||||
import { PanelPlugin } from '@grafana/data';
|
||||
import { stylesFactory, styleMixins } from '@grafana/ui';
|
||||
import config from 'app/core/config';
|
||||
|
||||
// Types
|
||||
import { PanelProps } from '@grafana/data';
|
||||
|
||||
export interface Props extends PanelProps {}
|
||||
|
||||
export class GrafanaLinksPanel extends PureComponent<Props> {
|
||||
render() {
|
||||
const styles = getStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.list}>
|
||||
<HomeLink
|
||||
title="Documentation"
|
||||
icon="fa fa-book"
|
||||
url="https://grafana.com/docs/grafana/latest?utm_source=grafana_homelinks"
|
||||
target="_blank"
|
||||
/>
|
||||
<HomeLink
|
||||
title="Getting started"
|
||||
icon="fa fa-bolt"
|
||||
url="https://grafana.com/docs/grafana/latest/guides/getting_started/?utm_source=grafana_homelinks"
|
||||
target="_blank"
|
||||
/>
|
||||
<HomeLink
|
||||
title="Community forum"
|
||||
icon="fa fa-comments"
|
||||
url="https://community.grafana.com?utm_source=grafana_homelinks"
|
||||
target="_blank"
|
||||
/>
|
||||
<HomeLink
|
||||
title="Report a bug"
|
||||
icon="fa fa-bug"
|
||||
url="https://github.com/grafana/grafana/issues/new?template=1-bug_report.md"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
<VersionFooter />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface HomeLinkProps {
|
||||
title: string;
|
||||
url: string;
|
||||
target?: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export const HomeLink: FC<HomeLinkProps> = ({ title, url, target, icon }) => {
|
||||
const styles = getStyles();
|
||||
|
||||
return (
|
||||
<a className={styles.item} href={url} target={target}>
|
||||
<i className={cx(icon, styles.icon)} />
|
||||
{title}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export const VersionFooter: FC = () => {
|
||||
const styles = getStyles();
|
||||
const { version, commit } = config.buildInfo;
|
||||
|
||||
return (
|
||||
<div className={styles.footer}>
|
||||
Version {version} ({commit})
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const getStyles = stylesFactory(() => {
|
||||
const { theme } = config;
|
||||
|
||||
return {
|
||||
list: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: ${theme.spacing.md};
|
||||
`,
|
||||
icon: css`
|
||||
padding-right: ${theme.spacing.sm};
|
||||
`,
|
||||
footer: css`
|
||||
${styleMixins.listItem(theme)}
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: ${theme.spacing.sm};
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: ${theme.colors.textWeak};
|
||||
`,
|
||||
item: css`
|
||||
${styleMixins.listItem(theme)}
|
||||
padding: ${theme.spacing.sm};
|
||||
display: flex;
|
||||
margin-bottom: ${theme.spacing.xs};
|
||||
align-items: center;
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
export const plugin = new PanelPlugin(GrafanaLinksPanel).setDefaults({}).setNoPadding();
|
||||
19
public/app/plugins/panel/homelinks/plugin.json
Executable file
19
public/app/plugins/panel/homelinks/plugin.json
Executable file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"type": "panel",
|
||||
"name": "Home Links",
|
||||
"id": "homelinks",
|
||||
|
||||
"hideFromList": true,
|
||||
"skipDataQuery": true,
|
||||
|
||||
"info": {
|
||||
"author": {
|
||||
"name": "Grafana Project",
|
||||
"url": "https://grafana.com"
|
||||
},
|
||||
"logos": {
|
||||
"small": "img/news.svg",
|
||||
"large": "img/news.svg"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -93,11 +93,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
height: 100%;
|
||||
`,
|
||||
item: css`
|
||||
${styleMixins.cardChrome(theme)}
|
||||
${styleMixins.listItem(theme)}
|
||||
padding: ${theme.spacing.sm};
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 3px;
|
||||
margin-right: ${theme.spacing.sm};
|
||||
`,
|
||||
title: css`
|
||||
@ -115,7 +114,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: ${theme.colors.bodyBg};
|
||||
background: ${theme.colors.panelBg};
|
||||
width: 55px;
|
||||
text-align: right;
|
||||
padding: ${theme.spacing.xs};
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
"skipDataQuery": true,
|
||||
|
||||
"state": "alpha",
|
||||
"state": "beta",
|
||||
|
||||
"info": {
|
||||
"author": {
|
||||
|
||||
@ -1,72 +1,79 @@
|
||||
{
|
||||
"annotations": {
|
||||
"list": []
|
||||
},
|
||||
"editable": true,
|
||||
"folderId": null,
|
||||
"gnetId": null,
|
||||
"graphTooltip": 0,
|
||||
"hideControls": true,
|
||||
"id": null,
|
||||
"links": [],
|
||||
"panels": [
|
||||
{
|
||||
"content": "<div class=\"text-center dashboard-header\">\n <span>Home Dashboard</span>\n</div>",
|
||||
"content": "<div class=\"dashboard-header\">\n <span>Welcome to Grafana</span>\n</div>",
|
||||
"datasource": null,
|
||||
"editable": true,
|
||||
"gridPos": {
|
||||
"h": 2,
|
||||
"w": 24,
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"id": 1,
|
||||
"links": [],
|
||||
"mode": "html",
|
||||
"options": {},
|
||||
"style": {},
|
||||
"title": "",
|
||||
"transparent": true,
|
||||
"type": "text",
|
||||
"gridPos": {
|
||||
"w": 24,
|
||||
"h": 3,
|
||||
"x": 0,
|
||||
"y": 0
|
||||
}
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"datasource": null,
|
||||
"folderId": 0,
|
||||
"gridPos": {
|
||||
"h": 15,
|
||||
"w": 11,
|
||||
"x": 0,
|
||||
"y": 4
|
||||
},
|
||||
"headings": true,
|
||||
"id": 3,
|
||||
"limit": 30,
|
||||
"links": [],
|
||||
"options": {},
|
||||
"query": "",
|
||||
"recent": true,
|
||||
"search": false,
|
||||
"starred": true,
|
||||
"tags": [],
|
||||
"title": "",
|
||||
"transparent": false,
|
||||
"type": "dashlist",
|
||||
"gridPos": {
|
||||
"w": 12,
|
||||
"h": 17,
|
||||
"x": 0,
|
||||
"y": 6
|
||||
}
|
||||
"title": "Dashboards",
|
||||
"type": "dashlist"
|
||||
},
|
||||
{
|
||||
"editable": true,
|
||||
"error": false,
|
||||
"datasource": null,
|
||||
"gridPos": {
|
||||
"h": 15,
|
||||
"w": 8,
|
||||
"x": 11,
|
||||
"y": 4
|
||||
},
|
||||
"id": 4,
|
||||
"links": [],
|
||||
"title": "",
|
||||
"transparent": false,
|
||||
"type": "pluginlist",
|
||||
"options": {
|
||||
"feedUrl": "https://grafana.com/blog/index.xml"
|
||||
},
|
||||
"title": "Latest from the blog",
|
||||
"type": "news"
|
||||
},
|
||||
{
|
||||
"datasource": null,
|
||||
"gridPos": {
|
||||
"w": 12,
|
||||
"h": 17,
|
||||
"x": 12,
|
||||
"y": 6
|
||||
}
|
||||
"h": 15,
|
||||
"w": 5,
|
||||
"x": 19,
|
||||
"y": 4
|
||||
},
|
||||
"id": 123124,
|
||||
"links": [],
|
||||
"options": {},
|
||||
"title": "Useful links",
|
||||
"type": "homelinks"
|
||||
}
|
||||
],
|
||||
"rows": [],
|
||||
"schemaVersion": 17,
|
||||
"style": "dark",
|
||||
"schemaVersion": 22,
|
||||
"tags": [],
|
||||
"templating": {
|
||||
"list": []
|
||||
@ -82,6 +89,5 @@
|
||||
"type": "timepicker"
|
||||
},
|
||||
"timezone": "browser",
|
||||
"title": "Home",
|
||||
"version": 0
|
||||
"title": "Home"
|
||||
}
|
||||
|
||||
@ -127,13 +127,13 @@ $code-tag-bg: $gray-6;
|
||||
$code-tag-border: $gray-4;
|
||||
|
||||
// cards
|
||||
$card-background: linear-gradient(135deg, $gray-6, $gray-5);
|
||||
$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6);
|
||||
$card-background: linear-gradient(135deg, $gray-6, $gray-7);
|
||||
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-5);
|
||||
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Lists
|
||||
$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background;
|
||||
$list-item-hover-bg: darken($gray-5, 5%);
|
||||
$list-item-bg: $gray-7;
|
||||
$list-item-hover-bg: $gray-6;
|
||||
$list-item-link-color: $text-color;
|
||||
$list-item-shadow: $card-shadow;
|
||||
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
// Colors
|
||||
$progress-color-dark: $panel-bg !default;
|
||||
$progress-color: $panel-bg !default;
|
||||
$progress-color-light: $panel-bg !default;
|
||||
$progress-color-grey-light: $body-bg !default;
|
||||
$progress-color-shadow: $panel-border !default;
|
||||
$progress-color-grey: $iconContainerBackground !default;
|
||||
$progress-color-grey-dark: $iconContainerBackground !default;
|
||||
$progress-line-uncompleted: lightOrDarkTheme($gray-3, $gray-1);
|
||||
|
||||
// Sizing
|
||||
$marker-size: 60px !default;
|
||||
@ -65,9 +61,7 @@ $path-position: $marker-size-half - ($path-height / 2);
|
||||
right: -$marker-size-half;
|
||||
width: 100%;
|
||||
height: $path-height;
|
||||
border-top: 2px solid $progress-color-grey-light;
|
||||
border-bottom: $progress-color-shadow;
|
||||
background: $progress-color-grey-light;
|
||||
border-top: 2px solid $progress-line-uncompleted;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@ -118,9 +112,9 @@ $path-position: $marker-size-half - ($path-height / 2);
|
||||
.progress-text {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
&::after {
|
||||
background: $progress-color-grey-light;
|
||||
}
|
||||
// &::after {
|
||||
// border-top: 2px solid $progress-line-completed;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -361,9 +361,18 @@
|
||||
background: $list-item-bg;
|
||||
box-shadow: $list-item-shadow;
|
||||
color: $list-item-link-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
background: $list-item-hover-bg;
|
||||
color: $list-item-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@function lightOrDarkTheme($lightColor, $darkColor) {
|
||||
@if (lightness($text-color) < 50) {
|
||||
@return $lightColor;
|
||||
} @else {
|
||||
@return $darkColor;
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@ div.flot-text {
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
font-size: $font-size-h3;
|
||||
font-size: $font-size-h2;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user