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

ux(): making light theme better and changing page header

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-18 15:22:20 +01:00
parent b9c60125e8
commit 3a0a8810d1
4 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/sass/_variables.light.scss
View File

@@ -14,8 +14,9 @@ $gray-darker: lighten(#000, 11.5%); // #222
$gray-dark: lighten(#000, 20%); // #333 $gray-dark: lighten(#000, 20%); // #333
$gray: lighten(#000, 33.5%); // #555 $gray: lighten(#000, 33.5%); // #555
$gray-light: lighten(#000, 60%); // #999 $gray-light: lighten(#000, 60%); // #999
$gray-lighter: lighten(#000, 97.5%); // #eee $gray-light2: lighten(#000, 70%); // #999
$gray-lightest: lighten(#000, 98.5%); // #eee $gray-lighter: lighten(#000, 96.5%); // #eee
$gray-lightest: lighten(#000, 98%); // #eee
$white: #fff; $white: #fff;
@@ -45,16 +46,16 @@ $critical: #EC2128;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: #EFEFEF; $body-bg: $white;
$page-bg: $gray-lightest; $page-bg: $white;
$body-color: $gray; $body-color: $gray;
$text-color: $gray; $text-color: $gray;
// Links // Links
// ------------------------- // -------------------------
$link-color: $gray; $link-color: $gray;
$link-color-disabled: lighten($link-color,30%); $link-color-disabled: lighten($link-color,30%);
$link-hover-color: darken($link-color, 20%); $link-hover-color: darken($link-color, 20%);
// Typography // Typography
// ------------------------- // -------------------------
@@ -74,8 +75,8 @@ $component-active-bg: $brand-primary !default;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: $gray-lighter; $panel-bg: $gray-lightest;
$panel-border: solid 1px #ddd; $panel-border: solid 1px $gray-lighter;
$divider-border-color: $gray-light; $divider-border-color: $gray-light;
@@ -84,7 +85,7 @@ $submenuBackground: rgb(218, 217, 217);
$submenuBorder: $white; $submenuBorder: $white;
// Graphite Target Editor // Graphite Target Editor
$tight-form-border: #ddd; $tight-form-border: #ddd;
$tight-form-bg: #efefef; $tight-form-bg: #efefef;
$tight-form-func-bg: darken($tight-form-bg, 5%); $tight-form-func-bg: darken($tight-form-bg, 5%);
@@ -162,7 +163,7 @@ $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: #66afe9 !default; $input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default; $input-color-placeholder: #999 !default;
$input-label-bg: #f8f8f8; $input-label-bg: #f8f8f8;
// Sidemenu // Sidemenu
// ------------------------- // -------------------------

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

@@ -1,6 +1,6 @@
.gf-box { .gf-box {
margin: 10px 5px; margin: 10px 5px;
background-color: $panel-bg; background-color: $page-bg;
position: relative; position: relative;
border: 1px solid $tight-form-func-bg; border: 1px solid $tight-form-func-bg;
} }

13
public/sass/layout/_page.scss
View File

@@ -33,17 +33,18 @@
} }
.page-header { .page-header {
padding: $spacer 0 $spacer * 2.5; padding: $spacer 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
background: transparent url(../img/page_header_line.png) no-repeat left 60px; border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 4px solid transparent;
h1 { h1 {
font-style: italic; font-style: italic;

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

@@ -5,8 +5,6 @@
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor, $text-color, $textShadow); @include gradientBar($startColor, $endColor, $text-color, $textShadow);
box-shadow: inset 0 -4px rgba(0,0,0,0.3);
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: $text-color; color: $text-color;
@@ -20,6 +18,8 @@
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x; padding: $padding-y $padding-x;
font-size: $font-size; font-size: $font-size;
box-shadow: inset 0 (-$padding-y/2) rgba(0,0,0,0.2);
@include border-radius($border-radius); @include border-radius($border-radius);
} }