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

Merge branch 'develop-ux-wip' of github.com:grafana/grafana into develop-ux-wip

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-08-15 11:51:55 +02:00
parent 7bf6904119 b949f019cf
commit c65d92779f
6 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -41,3 +41,6 @@ profile.cov
/examples/*/dist /examples/*/dist
/packaging/**/*.rpm /packaging/**/*.rpm
/packaging/**/*.deb /packaging/**/*.deb
# Ignore OSX indexing
.DS_Store

7
public/sass/_variables.dark.scss
View File

@@ -166,7 +166,7 @@ $input-bg: $black;
$input-bg-disabled: $dark-3; $input-bg-disabled: $dark-3;
$input-color: $gray-4; $input-color: $gray-4;
$input-border-color: $dark-4; $input-border-color: $dark-3;
$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.10); $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.10);
$input-border-focus: $input-border-color !default; $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
@@ -240,6 +240,11 @@ $menu-dropdown-hover-bg: $dark-2;
$menu-dropdown-border-color: $dark-3; $menu-dropdown-border-color: $dark-3;
$menu-dropdown-shadow: 5px 5px 20px -5px $black; $menu-dropdown-shadow: 5px 5px 20px -5px $black;
// Breadcrumb
// -------------------------
$page-nav-bg: $black;
$page-nav-shadow: 5px 5px 20px -5px $black;
// Pagination // Pagination
// ------------------------- // -------------------------

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

@@ -192,6 +192,11 @@ $menu-dropdown-hover-bg: $gray-6;
$menu-dropdown-border-color: $tight-form-border; $menu-dropdown-border-color: $tight-form-border;
$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4; $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
// Breadcrumb
// -------------------------
$page-nav-bg: $white;
$page-nav-shadow: 5px 5px 20px -5px $gray-4;
// search // search
$search-shadow: 0 5px 30px 0 $gray-4; $search-shadow: 0 5px 30px 0 $gray-4;

4
public/sass/components/_dropdown.scss
View File

@@ -120,6 +120,10 @@
} }
} }
} }
&--navbar {
background: $black;
font-size: $font-size-sm;
}
} }
.dropdown-item-text { .dropdown-item-text {

9
public/sass/components/_gf-form.scss
View File

@@ -1,4 +1,4 @@
$gf-form-margin: 0.25rem; $gf-form-margin: 0.1rem;
.gf-form { .gf-form {
margin-bottom: $gf-form-margin; margin-bottom: $gf-form-margin;
@@ -51,11 +51,10 @@ $gf-form-margin: 0.25rem;
.gf-form-label { .gf-form-label {
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
flex-shrink: 0; flex-shrink: 0;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
background-color: $input-label-bg; background-color: #23252d; //$input-label-bg;
display: block; display: block;
font-size: $font-size-sm; font-size: $font-size-sm;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
@@ -112,7 +111,9 @@ $gf-form-margin: 0.25rem;
background-color: $input-bg; background-color: $input-bg;
background-image: none; background-image: none;
background-clip: padding-box; background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color; border: 1px solid $input-border-color;
border-bottom: none;
border-left: none;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
@include box-shadow($input-box-shadow); @include box-shadow($input-box-shadow);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

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

@@ -11,7 +11,7 @@
.main-view { .main-view {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
background: inear-gradient(180deg, #1b1d25 0, #210d0d); background: linear-gradient(180deg, #251f1f 0, #17181b);
} }
.page-container { .page-container {
@@ -102,22 +102,26 @@
} }
$breadcrumb-hover-hl: #111; $breadcrumb-hover-hl: #111;
$page-nav-bg: black;
.page-nav { $page-breadcrumb__angle-1: 39px;
background: $page-nav-bg; $page-breadcrumb__angle-ul: 31px;
} $page-breadcrumb__angle-a: 30px;
.page-breadcrumb { .page-breadcrumb {
display: flex; display: flex;
padding: 0 $spacer; padding: 0 $spacer;
line-height: 0.5;
} }
.page-breadcrumb__item { .page-breadcrumb__item {
background: $page-nav-bg; background: $page-nav-bg;
box-shadow: $page-nav-shadow;
> a { > a {
color: $text-color-weak; color: $text-color-weak;
font-size: $font-size-sm;
display: block; display: block;
padding: 0.6rem 1rem 0.6rem 3rem;; padding: 0.6rem 1rem 0.6rem 3rem;;
position: relative; position: relative;
@@ -130,9 +134,9 @@ $page-nav-bg: black;
content: ''; content: '';
height: 0; height: 0;
width: 0; width: 0;
border: 46px solid transparent; border: $page-breadcrumb__angle-1 solid transparent;
border-right-width: 0; border-right-width: 0;
border-left-width: 41px; border-left-width: $page-breadcrumb__angle-a;
z-index: 2; z-index: 2;
border-left-color: $page-nav-bg; border-left-color: $page-nav-bg;
} }
@@ -152,9 +156,9 @@ $page-nav-bg: black;
content: ''; content: '';
height: 0; height: 0;
width: 0; width: 0;
border: 46px solid transparent; border: $page-breadcrumb__angle-1 solid transparent;
border-right-width: 0; border-right-width: 0;
border-left-width: 41px; border-left-width: $page-breadcrumb__angle-ul;
z-index: 1; z-index: 1;
transform: translateX(4px); transform: translateX(4px);
border-left-color: #282020; border-left-color: #282020;
@@ -186,7 +190,7 @@ $page-nav-bg: black;
width: 16px; width: 16px;
height: 16px; height: 16px;
right: -9px; right: -9px;
top: 12px; top: 5px;
z-index: 3; z-index: 3;
} }