IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 07:03:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

Reduced size of breadcrumbs, additional form styling. Colors still need to be adjusted

Browse Source
This commit is contained in:
Matt 2017-08-15 10:54:13 +02:00
parent f68dc5ca23
commit 588f35ef4f
3 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;
@ -54,10 +54,10 @@ $gf-form-margin: 0.25rem;
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: 0; margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
@ -112,7 +112,8 @@ $gf-form-margin: 0.25rem;
background-image: none; background-image: none;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
border-bottom: 0px; 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;

21
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 {
@ -107,13 +107,15 @@
$breadcrumb-hover-hl: #111; $breadcrumb-hover-hl: #111;
$page-nav-bg: black; $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 {
@ -121,6 +123,7 @@ $page-nav-bg: black;
> 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;
@ -133,9 +136,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;
} }
@ -155,9 +158,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;
@ -189,7 +192,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;
} }