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

Styles: fixed gradient in logo so it doesn't go outside the logo and get a defined start and end color, changed brand gradient to be the same as in logo, created new variable for vertical gradient (#18882)

Browse Source 
Fixes #18856
This commit is contained in:
Patrick O'Carroll 2019-09-04 11:28:35 +02:00 committed by Torkel Ödegaard
parent 6ea2d484b1
commit 00c8bf4f2f
9 changed files with 16 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
View File

@ -125,7 +125,7 @@ const getContextMenuStyles = (theme: GrafanaTheme) => {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: ${itemBgHover}; background: ${itemBgHover};
border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
border-image-slice: 1; border-image-slice: 1;
} }
`, `,

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

@ -88,13 +88,8 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none; $textShadow: none;
// gradients // gradients
$brand-gradient: linear-gradient( $brand-gradient-horizontal: linear-gradient( to right, #F05A28 30%, #FBCA0A 99%);
to right, $brand-gradient-vertical: linear-gradient(#F05A28 30%, #FBCA0A 99%);
rgba(255, 213, 0, 0.7) 0%,
rgba(255, 68, 0, 0.7) 99%,
rgba(255, 68, 0, 0.7) 100%
);
$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px); $page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px);
$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);

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

@ -80,8 +80,8 @@ $text-color-emphasis: ${theme.colors.textEmphasis};
$text-shadow-faint: none; $text-shadow-faint: none;
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); $brand-gradient-horizontal: linear-gradient( to right, #F05A28 30%, #FBCA0A 99%);
$brand-gradient-vertical: linear-gradient(#F05A28 30%, #FBCA0A 99%);
$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);

6
public/img/grafana_icon.svg
View File

@ -7,9 +7,9 @@
</style> </style>
<g id="Layer_1_1_"> <g id="Layer_1_1_">
</g> </g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="175.5" y1="445.4948" x2="175.5" y2="114.0346"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="175.5" y1="30%" x2="175.5" y2="99%">
<stop offset="0" style="stop-color:#FFF100"/> <stop offset="0" style="stop-color:#F05A28"/>
<stop offset="1" style="stop-color:#F05A28"/> <stop offset="1" style="stop-color:#FBCA0A"/>
</linearGradient> </linearGradient>
<path class="st0" d="M342,161.2c-0.6-6.1-1.6-13.1-3.6-20.9c-2-7.7-5-16.2-9.4-25c-4.4-8.8-10.1-17.9-17.5-26.8 <path class="st0" d="M342,161.2c-0.6-6.1-1.6-13.1-3.6-20.9c-2-7.7-5-16.2-9.4-25c-4.4-8.8-10.1-17.9-17.5-26.8
c-2.9-3.5-6.1-6.9-9.5-10.2c5.1-20.3-6.2-37.9-6.2-37.9c-19.5-1.2-31.9,6.1-36.5,9.4c-0.8-0.3-1.5-0.7-2.3-1 c-2.9-3.5-6.1-6.9-9.5-10.2c5.1-20.3-6.2-37.9-6.2-37.9c-19.5-1.2-31.9,6.1-36.5,9.4c-0.8-0.3-1.5-0.7-2.3-1

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

9
public/sass/_variables.dark.generated.scss
View File

@ -91,13 +91,8 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none; $textShadow: none;
// gradients // gradients
$brand-gradient: linear-gradient( $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
to right, $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
rgba(255, 213, 0, 0.7) 0%,
rgba(255, 68, 0, 0.7) 99%,
rgba(255, 68, 0, 0.7) 100%
);
$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px); $page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px);
$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);

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

@ -83,8 +83,8 @@ $text-color-emphasis: #41444b;
$text-shadow-faint: none; $text-shadow-faint: none;
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);

2
public/sass/components/_panel_gettingstarted.scss
View File

@ -96,7 +96,7 @@ $path-position: $marker-size-half - ($path-height / 2);
.icon-gf { .icon-gf {
color: $brand-primary; color: $brand-primary;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background: $brand-gradient; background: $brand-gradient-horizontal;
-webkit-background-clip: text; -webkit-background-clip: text;
text-decoration: none; text-decoration: none;
} }

2
public/sass/components/_tabs.scss
View File

@ -50,7 +50,7 @@
right: 0; right: 0;
height: 2px; height: 2px;
top: 0; top: 0;
background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%); background-image: $brand-gradient-horizontal;
} }
} }

4
public/sass/mixins/_mixins.scss
View File

@ -335,7 +335,7 @@
} }
@mixin left-brand-border-gradient() { @mixin left-brand-border-gradient() {
border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); border-image: $brand-gradient-vertical;
border-image-slice: 1; border-image-slice: 1;
border-style: solid; border-style: solid;
border-top: 0; border-top: 0;
@ -345,7 +345,7 @@
} }
@mixin brand-bottom-border() { @mixin brand-bottom-border() {
border-image: $brand-gradient; border-image: $brand-gradient-horizontal;
border-image-slice: 1; border-image-slice: 1;
border-style: solid; border-style: solid;
border-top: 0; border-top: 0;