From 457beec1c1ab57388d836abf96aa6b9ba50cc42f Mon Sep 17 00:00:00 2001 From: Michael Krotscheck Date: Thu, 16 Jan 2014 16:04:46 -0800 Subject: [PATCH] Customise Bootstrap This commit updates the way our LESS is compiled so that we can override the default bootstrap UI variables (color, padding, font, etc) with our own colors. It also introduces the google fonts inclusion for PT Sans, which is the title font currently used on Openstack.org. Change-Id: Id07ed27c4cde6113fc5f6aa483e9b5355d9873c6 --- Gruntfile.js | 24 +- src/index.html | 8 +- src/styles/auth.less | 4 +- src/styles/body.less | 27 + src/styles/bootstrap_variable_overrides.less | 603 +++++++++++++++++++ src/styles/custom_font_icons.less | 16 + src/styles/main.less | 26 +- 7 files changed, 676 insertions(+), 32 deletions(-) create mode 100644 src/styles/body.less create mode 100644 src/styles/bootstrap_variable_overrides.less diff --git a/Gruntfile.js b/Gruntfile.js index 1c40555b..7720b60a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -40,10 +40,10 @@ module.exports = function (grunt) { 'use strict'; var dir = { - source : './src', - test : './test', - output : './dist', - report : './reports', + source: './src', + test: './test', + output: './dist', + report: './reports', bower: './bower_components' }; @@ -120,19 +120,17 @@ module.exports = function (grunt) { */ recess: { options: { - compile: true - }, - bootstrap: { - src: [ - dir.bower + '/bootstrap/less/bootstrap.less' + includePath: [ + dir.bower + '/bootstrap/less/', + dir.bower + '/font-awesome/less/' ], - dest: dir.output + '/styles/bootstrap.css' + compile: true }, theme: { src: [ - dir.source + '/styles/**/*.less' + dir.source + '/styles/main.less' ], - dest: dir.output + '/styles/theme.css' + dest: dir.output + '/styles/main.css' } }, @@ -357,7 +355,7 @@ module.exports = function (grunt) { files: [ dir.source + '/styles/**/*.less' ], - tasks: ['recess:bootstrap', 'recess:theme'] + tasks: ['recess:theme'] }, copy: { files: [ diff --git a/src/index.html b/src/index.html index b6dc20f5..1ddd075b 100644 --- a/src/index.html +++ b/src/index.html @@ -27,12 +27,6 @@ - - - - - - @@ -45,7 +39,7 @@ - + diff --git a/src/styles/auth.less b/src/styles/auth.less index 4fdc35e2..c5bec144 100644 --- a/src/styles/auth.less +++ b/src/styles/auth.less @@ -1,11 +1,11 @@ /* - * Copyright (c) 2013 Hewlett-Packard Development Company, L.P. + * Copyright (c) 2014 Hewlett-Packard Development Company, L.P. * * Licensed under the Apache License, Version 2.0 (the "License"); you may * not use this file except in compliance with the License. You may obtain * a copy of the License at * - * http://www.apache.org/licenses/LICENSE-2.0 + * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT diff --git a/src/styles/body.less b/src/styles/body.less new file mode 100644 index 00000000..7e9eb8e7 --- /dev/null +++ b/src/styles/body.less @@ -0,0 +1,27 @@ +/* + * Copyright (c) 2014 Hewlett-Packard Development Company, L.P. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. You may obtain + * a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + */ +/** + * Styles specific to the overall application. + */ +@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,cyrillic-ext,latin-ext,cyrillic); + +body { + margin-top: 70px; +} + +i.icon { + line-height: .5em; +} \ No newline at end of file diff --git a/src/styles/bootstrap_variable_overrides.less b/src/styles/bootstrap_variable_overrides.less new file mode 100644 index 00000000..81268e23 --- /dev/null +++ b/src/styles/bootstrap_variable_overrides.less @@ -0,0 +1,603 @@ +// +// A verbatim copy of the bootstrap variables file, included in our source +// so we can override colors, padding, fonts, what have you. +// -------------------------------------------------- + +// Global values +// -------------------------------------------------- + +// Grays +// ------------------------- + +@gray-darker: lighten(#000, 13.5%); +// #222 +@gray-dark: lighten(#000, 20%); +// #333 +@gray: lighten(#000, 33.5%); +// #555 +@gray-light: lighten(#000, 60%); +// #999 +@gray-lighter: lighten(#000, 93.5%); +// #eee + +// Brand colors +// ------------------------- + +@brand-primary: #428bca; +@brand-success: #5cb85c; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; +@brand-info: #5bc0de; + +// Scaffolding +// ------------------------- + +@body-bg: #fff; +@text-color: @gray-dark; + +// Links +// ------------------------- + +@link-color: @brand-primary; +@link-hover-color: darken(@link-color, 15%); + +// Typography +// ------------------------- + +@font-family-title: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-serif: Georgia, "Times New Roman", Times, serif; +@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +@font-family-base: @font-family-sans-serif; + +@font-size-base: 14px; +@font-size-large: ceil(@font-size-base * 1.25); +// ~18px +@font-size-small: ceil(@font-size-base * 0.85); +// ~12px + +@line-height-base: 1.428571429; +// 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); +// ~20px + +@headings-font-family: @font-family-title; +@headings-font-weight: 500; +@headings-line-height: 1.1; + +// Iconography +// ------------------------- + +@icon-font-path: "../fonts/"; +@icon-font-name: "glyphicons-halflings-regular"; + +// Components +// ------------------------- +// Based on 14px font-size and 1.428 line-height (~20px to start) + +@padding-base-vertical: 6px; +@padding-base-horizontal: 12px; + +@padding-large-vertical: 10px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@line-height-large: 1.33; +@line-height-small: 1.5; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; + +@component-active-bg: @brand-primary; + +@caret-width-base: 4px; +@caret-width-large: 5px; + +// Tables +// ------------------------- + +@table-cell-padding: 8px; +@table-condensed-cell-padding: 5px; + +@table-bg: transparent; +// overall background-color +@table-bg-accent: #f9f9f9; +// for striping +@table-bg-hover: #f5f5f5; +@table-bg-active: @table-bg-hover; + +@table-border-color: #ddd; +// table and cell border + +// Buttons +// ------------------------- + +@btn-font-weight: normal; + +@btn-default-color: #333; +@btn-default-bg: #fff; +@btn-default-border: #ccc; + +@btn-primary-color: #fff; +@btn-primary-bg: @brand-primary; +@btn-primary-border: darken(@btn-primary-bg, 5%); + +@btn-success-color: #fff; +@btn-success-bg: @brand-success; +@btn-success-border: darken(@btn-success-bg, 5%); + +@btn-warning-color: #fff; +@btn-warning-bg: @brand-warning; +@btn-warning-border: darken(@btn-warning-bg, 5%); + +@btn-danger-color: #fff; +@btn-danger-bg: @brand-danger; +@btn-danger-border: darken(@btn-danger-bg, 5%); + +@btn-info-color: #fff; +@btn-info-bg: @brand-info; +@btn-info-border: darken(@btn-info-bg, 5%); + +@btn-link-disabled-color: @gray-light; + +// Forms +// ------------------------- + +@input-bg: #fff; +@input-bg-disabled: @gray-lighter; + +@input-color: @gray; +@input-border: #ccc; +@input-border-radius: @border-radius-base; +@input-border-focus: #66afe9; + +@input-color-placeholder: @gray-light; + +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); +@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); + +@legend-color: @gray-dark; +@legend-border-color: #e5e5e5; + +@input-group-addon-bg: @gray-lighter; +@input-group-addon-border-color: @input-border; + +// Dropdowns +// ------------------------- + +@dropdown-bg: #fff; +@dropdown-border: rgba(0, 0, 0, .15); +@dropdown-fallback-border: #ccc; +@dropdown-divider-bg: #e5e5e5; + +@dropdown-link-active-color: #fff; +@dropdown-link-active-bg: @component-active-bg; + +@dropdown-link-color: @gray-dark; +@dropdown-link-hover-color: #fff; +@dropdown-link-hover-bg: @dropdown-link-active-bg; + +@dropdown-link-disabled-color: @gray-light; + +@dropdown-header-color: @gray-light; + +@dropdown-caret-color: #000; + +// COMPONENT VARIABLES +// -------------------------------------------------- + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) + +@zindex-navbar: 1000; +@zindex-dropdown: 1000; +@zindex-popover: 1010; +@zindex-tooltip: 1030; +@zindex-navbar-fixed: 1030; +@zindex-modal-background: 1040; +@zindex-modal: 1050; + +// Media queries breakpoints +// -------------------------------------------------- + +// Extra small screen / phone +@screen-xs: 480px; +@screen-phone: @screen-xs; + +// Small screen / tablet +@screen-sm: 768px; +@screen-tablet: @screen-sm; + +// Medium screen / desktop +@screen-md: 992px; +@screen-desktop: @screen-md; + +// Large screen / wide desktop +@screen-lg: 1200px; +@screen-lg-desktop: @screen-lg; + +// So media queries don't overlap when required, provide a maximum +@screen-xs-max: (@screen-sm - 1); +@screen-sm-max: (@screen-md - 1); +@screen-md-max: (@screen-lg - 1); + +// Grid system +// -------------------------------------------------- + +// Number of columns in the grid system +@grid-columns: 12; +// Padding, to be divided by two and applied to the left and right of all columns +@grid-gutter-width: 30px; +// Point at which the navbar stops collapsing +@grid-float-breakpoint: @screen-tablet; + +// Navbar +// ------------------------- + +// Basics of a navbar +@navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; +@navbar-default-color: #777; +@navbar-default-bg: #f8f8f8; +@navbar-default-border: darken(@navbar-default-bg, 6.5%); +@navbar-border-radius: @border-radius-base; +@navbar-padding-horizontal: floor(@grid-gutter-width / 2); +@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); + +// Navbar links +@navbar-default-link-color: #777; +@navbar-default-link-hover-color: #333; +@navbar-default-link-hover-bg: transparent; +@navbar-default-link-active-color: #555; +@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); +@navbar-default-link-disabled-color: #ccc; +@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-hover-bg: transparent; + +// Navbar toggle +@navbar-default-toggle-hover-bg: #ddd; +@navbar-default-toggle-icon-bar-bg: #ccc; +@navbar-default-toggle-border-color: #ddd; + +// Inverted navbar +// +// Reset inverted navbar basics +@navbar-inverse-color: @gray-light; +@navbar-inverse-bg: #222; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); + +// Inverted navbar links +@navbar-inverse-link-color: @gray-light; +@navbar-inverse-link-hover-color: #fff; +@navbar-inverse-link-hover-bg: transparent; +@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; +@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); +@navbar-inverse-link-disabled-color: #444; +@navbar-inverse-link-disabled-bg: transparent; + +// Inverted navbar brand label +@navbar-inverse-brand-color: @navbar-inverse-link-color; +@navbar-inverse-brand-hover-color: #fff; +@navbar-inverse-brand-hover-bg: transparent; + +// Inverted navbar search +// Normal navbar needs no special styles or vars +@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%); +@navbar-inverse-search-bg-focus: #fff; +@navbar-inverse-search-border: @navbar-inverse-bg; +@navbar-inverse-search-placeholder-color: #ccc; + +// Inverted navbar toggle +@navbar-inverse-toggle-hover-bg: #333; +@navbar-inverse-toggle-icon-bar-bg: #fff; +@navbar-inverse-toggle-border-color: #333; + +// Navs +// ------------------------- + +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @gray-lighter; + +@nav-disabled-link-color: @gray-light; +@nav-disabled-link-hover-color: @gray-light; + +@nav-open-link-hover-color: #fff; +@nav-open-caret-border-color: #fff; + +// Tabs +@nav-tabs-border-color: #ddd; + +@nav-tabs-link-hover-border-color: @gray-lighter; + +@nav-tabs-active-link-hover-bg: @body-bg; +@nav-tabs-active-link-hover-color: @gray; +@nav-tabs-active-link-hover-border-color: #ddd; + +@nav-tabs-justified-link-border-color: #ddd; +@nav-tabs-justified-active-link-border-color: @body-bg; + +// Pills +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: #fff; + +// Pagination +// ------------------------- + +@pagination-bg: #fff; +@pagination-border: #ddd; + +@pagination-hover-bg: @gray-lighter; + +@pagination-active-bg: @brand-primary; +@pagination-active-color: #fff; + +@pagination-disabled-color: @gray-light; + +// Pager +// ------------------------- + +@pager-border-radius: 15px; +@pager-disabled-color: @gray-light; + +// Jumbotron +// ------------------------- + +@jumbotron-padding: 30px; +@jumbotron-color: inherit; +@jumbotron-bg: @gray-lighter; + +@jumbotron-heading-color: inherit; + +// Form states and alerts +// ------------------------- + +@state-warning-text: #c09853; +@state-warning-bg: #fcf8e3; +@state-warning-border: darken(spin(@state-warning-bg, -10), 3%); + +@state-danger-text: #b94a48; +@state-danger-bg: #f2dede; +@state-danger-border: darken(spin(@state-danger-bg, -10), 3%); + +@state-success-text: #468847; +@state-success-bg: #dff0d8; +@state-success-border: darken(spin(@state-success-bg, -10), 5%); + +@state-info-text: #3a87ad; +@state-info-bg: #d9edf7; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + +// Tooltips +// ------------------------- +@tooltip-max-width: 200px; +@tooltip-color: #fff; +@tooltip-bg: #000; + +@tooltip-arrow-width: 5px; +@tooltip-arrow-color: @tooltip-bg; + +// Popovers +// ------------------------- +@popover-bg: #fff; +@popover-max-width: 276px; +@popover-border-color: rgba(0, 0, 0, .2); +@popover-fallback-border-color: #ccc; + +@popover-title-bg: darken(@popover-bg, 3%); + +@popover-arrow-width: 10px; +@popover-arrow-color: #fff; + +@popover-arrow-outer-width: (@popover-arrow-width + 1); +@popover-arrow-outer-color: rgba(0, 0, 0, .25); +@popover-arrow-outer-fallback-color: #999; + +// Labels +// ------------------------- + +@label-default-bg: @gray-light; +@label-primary-bg: @brand-primary; +@label-success-bg: @brand-success; +@label-info-bg: @brand-info; +@label-warning-bg: @brand-warning; +@label-danger-bg: @brand-danger; + +@label-color: #fff; +@label-link-hover-color: #fff; + +// Modals +// ------------------------- +@modal-inner-padding: 20px; + +@modal-title-padding: 15px; +@modal-title-line-height: @line-height-base; + +@modal-content-bg: #fff; +@modal-content-border-color: rgba(0, 0, 0, .2); +@modal-content-fallback-border-color: #999; + +@modal-backdrop-bg: #000; +@modal-header-border-color: #e5e5e5; +@modal-footer-border-color: @modal-header-border-color; + +// Alerts +// ------------------------- +@alert-padding: 15px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: bold; + +@alert-success-bg: @state-success-bg; +@alert-success-text: @state-success-text; +@alert-success-border: @state-success-border; + +@alert-info-bg: @state-info-bg; +@alert-info-text: @state-info-text; +@alert-info-border: @state-info-border; + +@alert-warning-bg: @state-warning-bg; +@alert-warning-text: @state-warning-text; +@alert-warning-border: @state-warning-border; + +@alert-danger-bg: @state-danger-bg; +@alert-danger-text: @state-danger-text; +@alert-danger-border: @state-danger-border; + +// Progress bars +// ------------------------- +@progress-bg: #f5f5f5; +@progress-bar-color: #fff; + +@progress-bar-bg: @brand-primary; +@progress-bar-success-bg: @brand-success; +@progress-bar-warning-bg: @brand-warning; +@progress-bar-danger-bg: @brand-danger; +@progress-bar-info-bg: @brand-info; + +// List group +// ------------------------- +@list-group-bg: #fff; +@list-group-border: #ddd; +@list-group-border-radius: @border-radius-base; + +@list-group-hover-bg: #f5f5f5; +@list-group-active-color: #fff; +@list-group-active-bg: @component-active-bg; +@list-group-active-border: @list-group-active-bg; + +@list-group-link-color: #555; +@list-group-link-heading-color: #333; + +// Panels +// ------------------------- +@panel-bg: #fff; +@panel-inner-border: #ddd; +@panel-border-radius: @border-radius-base; +@panel-footer-bg: #f5f5f5; + +@panel-default-text: @gray-dark; +@panel-default-border: #ddd; +@panel-default-heading-bg: #f5f5f5; + +@panel-primary-text: #fff; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + +@panel-success-text: @state-success-text; +@panel-success-border: @state-success-border; +@panel-success-heading-bg: @state-success-bg; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: @state-warning-border; +@panel-warning-heading-bg: @state-warning-bg; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: @state-danger-border; +@panel-danger-heading-bg: @state-danger-bg; + +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; + +// Thumbnails +// ------------------------- +@thumbnail-padding: 4px; +@thumbnail-bg: @body-bg; +@thumbnail-border: #ddd; +@thumbnail-border-radius: @border-radius-base; + +@thumbnail-caption-color: @text-color; +@thumbnail-caption-padding: 9px; + +// Wells +// ------------------------- +@well-bg: #f5f5f5; + +// Badges +// ------------------------- +@badge-color: #fff; +@badge-link-hover-color: #fff; +@badge-bg: @gray-light; + +@badge-active-color: @link-color; +@badge-active-bg: #fff; + +@badge-font-weight: bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + +// Breadcrumbs +// ------------------------- +@breadcrumb-bg: #f5f5f5; +@breadcrumb-color: #ccc; +@breadcrumb-active-color: @gray-light; + +// Carousel +// ------------------------ + +@carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6); + +@carousel-control-color: #fff; +@carousel-control-width: 15%; +@carousel-control-opacity: .5; +@carousel-control-font-size: 20px; + +@carousel-indicator-active-bg: #fff; +@carousel-indicator-border-color: #fff; + +@carousel-caption-color: #fff; + +// Close +// ------------------------ +@close-color: #000; +@close-font-weight: bold; +@close-text-shadow: 0 1px 0 #fff; + +// Code +// ------------------------ +@code-color: #c7254e; +@code-bg: #f9f2f4; + +@pre-bg: #f5f5f5; +@pre-color: @gray-dark; +@pre-border-color: #ccc; +@pre-scrollable-max-height: 340px; + +// Type +// ------------------------ +@text-muted: @gray-light; +@abbr-border-color: @gray-light; +@headings-small-color: @gray-light; +@blockquote-small-color: @gray-light; +@blockquote-border-color: @gray-lighter; +@page-header-border-color: @gray-lighter; + +// Miscellaneous +// ------------------------- + +// Hr border color +@hr-border: @gray-lighter; + +// Horizontal forms & lists +@component-offset-horizontal: 180px; + +// Container sizes +// -------------------------------------------------- + +// Small screen / tablet +@container-tablet: ((720px + @grid-gutter-width)); + +// Medium screen / desktop +@container-desktop: ((940px + @grid-gutter-width)); + +// Large screen / wide desktop +@container-lg-desktop: ((1140px + @grid-gutter-width)); diff --git a/src/styles/custom_font_icons.less b/src/styles/custom_font_icons.less index bfd25292..eb0f1581 100644 --- a/src/styles/custom_font_icons.less +++ b/src/styles/custom_font_icons.less @@ -1,3 +1,19 @@ +/* + * Copyright (c) 2014 Hewlett-Packard Development Company, L.P. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. You may obtain + * a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + */ + @font-face { font-family: custom_font_icons; src: url(../fonts/custom_font_icons.eot); diff --git a/src/styles/main.less b/src/styles/main.less index fd0827bd..125223a0 100644 --- a/src/styles/main.less +++ b/src/styles/main.less @@ -1,11 +1,11 @@ /* - * Copyright (c) 2013 Hewlett-Packard Development Company, L.P. + * Copyright (c) 2014 Hewlett-Packard Development Company, L.P. * * Licensed under the Apache License, Version 2.0 (the "License"); you may * not use this file except in compliance with the License. You may obtain * a copy of the License at * - * http://www.apache.org/licenses/LICENSE-2.0 + * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT @@ -15,12 +15,18 @@ */ /** - * Our main SCSS layout. + * This is our main CSS theme file, which serves to link together all of our + * CSS/LESS dependencies and ensure they all go through minification/processing. + * Note that this is the only LESS file that is compiled - if you want a + * a specific stylesheet to be included, it must be linked here. */ -body { - margin-top: 70px; -} - -i.icon { - line-height: .5em; -} \ No newline at end of file +// Library inclusions +@import './bootstrap.less'; +@import './font-awesome.less'; +// Custom variable overrides +@import './bootstrap_variable_overrides.less'; +// Add our own custom icon font. +@import './custom_font_icons.less'; +// Module specific styles +@import './body.less'; +@import './auth.less'; \ No newline at end of file