Update colors, header

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

View File

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

View File

@ -27,7 +27,7 @@
<!-- Icons -->
<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="angular/angular.js"></script>
<script src="angular-ui-router/release/angular-ui-router.js"></script>
@ -45,7 +45,7 @@
<script src="js/templates.js"></script>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top"
<header class="navbar navbar-default navbar-fixed-top"
ng-include src="'app/templates/header.html'">
</header>
<div ui-view></div>

View File

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

View File

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