opendev/storyboard-webclient
Code Issues Proposed changes

Update colors, header

Browse Source 
This commit removes the black header bar that comes default with bootstrap,
and replaces it with one with a slightly nicer style. It also replaces the
@brand-primary color with that of openstack's.

Change-Id: I7c0fd5f1325377d4a8ba259bd9060d3f2225a5e0
This commit is contained in:
Michael Krotscheck 2014-01-28 13:26:32 -08:00
parent 756fde458b
commit 869c8024fc
4 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/templates/header.html
View File

@ -23,7 +23,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a href="#!/" class="navbar-brand"> <a href="#!/" class="navbar-brand">
<i class="icon icon_openstack"></i> Openstack <i class="icon icon_openstack"></i> Storyboard
</a> </a>
</div> </div>
<nav class="collapse navbar-collapse sb-navbar-collapse" role="navigation"> <nav class="collapse navbar-collapse sb-navbar-collapse" role="navigation">

4
src/index.html
View File

@ -27,7 +27,7 @@
<!-- Icons --> <!-- Icons -->
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<!-- build:js(bower_components) /js/libs.js --> <!-- build:js(bower_components) js/libs.js -->
<script src="jquery/jquery.js"></script> <script src="jquery/jquery.js"></script>
<script src="angular/angular.js"></script> <script src="angular/angular.js"></script>
<script src="angular-ui-router/release/angular-ui-router.js"></script> <script src="angular-ui-router/release/angular-ui-router.js"></script>
@ -45,7 +45,7 @@
<script src="js/templates.js"></script> <script src="js/templates.js"></script>
</head> </head>
<body> <body>
<header class="navbar navbar-inverse navbar-fixed-top" <header class="navbar navbar-default navbar-fixed-top"
ng-include src="'app/templates/header.html'"> ng-include src="'app/templates/header.html'">
</header> </header>
<div ui-view></div> <div ui-view></div>

9
src/styles/bootstrap_addons.less vendored
View File

@ -22,3 +22,12 @@ h1, h2, h3, h4, h5, h6 {
margin: 0px; margin: 0px;
} }
} }
.navbar {
#gradient > .vertical(@white, @gray-lighter);
.box-shadow( 0 1px 3px rgba(0,0,0,.25))
}
.navbar-brand {
color: @brand-primary;
}

13
src/styles/bootstrap_variable_overrides.less vendored
View File

@ -19,11 +19,12 @@
// #999 // #999
@gray-lighter: lighten(#000, 93.5%); @gray-lighter: lighten(#000, 93.5%);
// #eee // #eee
@white: #FFFFFF;
// Brand colors // Brand colors
// ------------------------- // -------------------------
@brand-primary: #428bca; @brand-primary: #C43422;
@brand-success: #5cb85c; @brand-success: #5cb85c;
@brand-warning: #f0ad4e; @brand-warning: #f0ad4e;
@brand-danger: #d9534f; @brand-danger: #d9534f;
@ -39,7 +40,7 @@
// ------------------------- // -------------------------
@link-color: @brand-primary; @link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%); @link-hover-color: lighten(@link-color, 10%);
// Typography // Typography
// ------------------------- // -------------------------
@ -241,11 +242,11 @@
// ------------------------- // -------------------------
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; @navbar-height: 40px;
@navbar-margin-bottom: @line-height-computed; @navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777; @navbar-default-color: #777;
@navbar-default-bg: #f8f8f8; @navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: @gray-lighter;
@navbar-border-radius: @border-radius-base; @navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@ -260,8 +261,8 @@
@navbar-default-link-disabled-bg: transparent; @navbar-default-link-disabled-bg: transparent;
// Navbar brand label // Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-color: @brand-primary;
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); @navbar-default-brand-hover-color: lighten(@brand-primary, 10%);
@navbar-default-brand-hover-bg: transparent; @navbar-default-brand-hover-bg: transparent;
// Navbar toggle // Navbar toggle