patternfly-sass 1.2.0 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5b258d328918728dd8015a666952418810554f0d
-  data.tar.gz: 00ddf71033494707c336264b47c4156b94790e27
+  metadata.gz: cc4f69f2482548e39dcb4f28c5f54e8376cbc06d
+  data.tar.gz: 67c08f78f8ad528f00a7df4bda28829cf7eca4c3
 SHA512:
-  metadata.gz: 1114d898c2561441b046e1afb8a3f127ffc46f85973fde3ffee93d38fb7a328a50cc64193d4a3f72f586b92beeae44b16f515e5d5f284596230c512f45902d16
-  data.tar.gz: 07a198c70d4238a6786c032de2c48396062bfdb80172a2d1ed704ef52552416931bc2720290cc90f97d342718e4643c1df529695211abcb1b13be05e360b719e
+  metadata.gz: f437a9735bea638f04a7955a6f34d602594564b78aa024568da154593d6cbb226b088c5c5ccd5c1dac543857af0955ed8e045fcdc02eb293a280def24a91ebe3
+  data.tar.gz: 1181d898058ed6f7cd65e945d7b2a8fa8ee0ce4fd49f2fc7e185c7741240b58a2a6dee2e9be09ad0f4459ea172218b83f94d79d1a38bfe1dbbb9790aadc2a8d1

data/.bowerrc

@@ -1,3 +1,3 @@
 {
-  "directory": "tests/components"
+  "directory": "spec/components"
 }

data/.gitignore

@@ -34,10 +34,8 @@ tmp
 .ruby-version
 
 # Directories with test images
-tests/sass
-tests/less
-tests/reference
-tests/failures
+spec/results
+spec/components
 
 # Gemfile.lock
 /Gemfile.lock

data/.travis.yml

@@ -1,17 +1,20 @@
 language: ruby
-cache: bundler
+cache:
+  bundler: true
+  directories:
+    - spec/components
 sudo: false
 rvm:
   - 2.0.0
 before_script:
+  - npm install bower
   - bundle exec rake compile
   - bundle exec rake serve > /dev/null 2>&1 &
   - export PID=$!
-  - sleep 3
 script:
   - bundle exec rake spec
 after_failure:
   - bundle exec rake upload
 after_script:
   - kill -2 $PID
-  - sleep 3
+  - sleep 2

data/README.md

@@ -1,29 +1,190 @@
 #patternfly-sass
+
+[![Gem Version](https://badge.fury.io/rb/patternfly-sass.svg)](http://badge.fury.io/rb/patternfly-sass)
+[![Dependency Status](https://gemnasium.com/patternfly/patternfly-sass.svg)](https://gemnasium.com/patternfly/patternfly-sass)
 [![Build Status](https://travis-ci.org/patternfly/patternfly-sass.svg)](https://travis-ci.org/patternfly/patternfly-sass)
 
-## Developer Set-Up
-
-1. Install bower and phantomjs
-   ```sh
-   $ npm install bower phantomjs
-   ```
-1. Install bundler
-   ```sh
-   $ gem install bundler
-   ```
-
-1. Install required gems.
-   ```sh
-   $ bundle install
-   ```
-
-## Running the conversion
-   ```sh
-   $ bundle exec rake convert
-   $ bundle exec rake compile
-   ```
-
-## Running the tests
-   ```sh
-   $ bundle exec rake test
-   ```
+`patternfly-sass` is a Sass-powered version of [PatternFly](http://github.com/patternfly/patternfly), ready to drop right into your Sass powered applications.
+
+## Installation
+
+Please see the appropriate guide for your environment of choice:
+
+* [Ruby on Rails](#a-ruby-on-rails).
+
+### a. Ruby on Rails
+
+`patternfly-sass` is easy to drop into Rails with the asset pipeline.
+
+In your Gemfile you need to add the `patternfly-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
+
+```ruby
+gem 'patternfly-sass', '~> 1.2.1'
+gem 'sass-rails', '>= 3.2'
+```
+
+`bundle install` and restart your server to make the files available through the pipeline.
+
+Import Bootstrap styles in `app/assets/stylesheets/application.scss`:
+
+```scss
+// "patternfly-sprockets" must be imported before "patternfly" and "patternfly/variables"
+@import "patternfly-sprockets";
+@import "patternfly";
+```
+
+`patternfly-sprockets` must be imported before `patternfly` for the icon fonts to work.
+
+Make sure the file has `.scss` extension (or `.sass` for Sass syntax). If you have just generated a new Rails app,
+it may come with a `.css` file instead. If this file exists, it will be served instead of Sass, so rename it:
+
+```console
+$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
+```
+
+Then, remove all the `//= require` and `//= require_tree` statements from the file. Instead, use `@import` to import Sass files.
+
+Do not use `//= require` in Sass or your other stylesheets will not be [able to access][antirequire] the PatternFly mixins or variables.
+
+Require PatternFly Javascripts in `app/assets/javascripts/application.js`:
+
+```js
+//= require jquery
+//= require patternfly
+```
+
+#### Rails 4.x
+
+Please make sure `sprockets-rails` is at least v2.1.4.
+
+#### Rails 3.2.x
+
+patternfly-sass is no longer compatible with Rails 3.
+
+### Configuration
+
+#### Sass
+
+By default all of PatternFly is imported.
+
+You can also import components explicitly. To start with a full list of modules copy
+[`_patternfly.scss`](assets/stylesheets/_patternfly.scss) file into your assets as `_patternfly-custom.scss`.
+Then comment out components you do not want from `_patternfly-custom`.
+In the application Sass file, replace `@import 'patternfly'` with:
+
+```scss
+@import 'patternfly-custom';
+```
+
+#### Sass: Number Precision
+
+patternfly-sass [requires](https://github.com/twbs/bootstrap-sass/issues/409) minimum [Sass number precision][patternfly-precision] of 8 (default is 5).
+
+Precision is set for Rails automatically.
+When using ruby Sass compiler standalone you can set it with:
+
+```ruby
+::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
+```
+
+#### Sass: Autoprefixer
+
+PatternFly requires the use of [Autoprefixer][autoprefixer].
+[Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from [Can I Use](http://caniuse.com/).
+
+#### JavaScript
+
+[`assets/javascripts/patternfly.js`](/assets/javascripts/patternfly.js) contains all of PatternFly JavaScript,
+concatenated in the correct order.
+
+#### Fonts
+
+The fonts are referenced as:
+
+```scss
+"#{$icon-font-path}#{$icon-font-name}.eot"
+```
+
+`$icon-font-path` defaults to `patternfly/` if asset path helpers are used, and `../fonts/patternfly/` otherwise.
+
+When using patternfly-sass with Sprockets, you **must** import the relevant path helpers before PatternFly itself, for example:
+
+```scss
+@import "patternfly-sprockets";
+@import "patternfly";
+```
+
+## Usage
+
+### Sass
+
+Import PatternFly into a Sass file (for example, application.scss) to get all of PatternFly's styles, mixins and variables!
+
+```scss
+@import "patternfly";
+```
+
+The full list of patternfly variables can be found [here](/assets/stylesheets/patternfly/_variables.scss). You can override these by simply redefining the variable before the `@import` directive, e.g.:
+
+```scss
+$navbar-default-bg: #312312;
+$light-orange: #ff8c00;
+$navbar-default-color: $light-orange;
+
+@import "patternfly";
+```
+
+## Version
+
+PatternFly for Sass version may differ from the upstream version in the last number, known as
+[MINOR](http://semver.org/spec/v2.0.0.html). The minor version may be ahead of the corresponding upstream minor.
+This happens when we need to release Sass-specific changes.
+
+Always refer to [CHANGELOG.md](/CHANGELOG.md) when upgrading.
+
+---
+
+## Development and Contributing
+
+If you'd like to help with the development of patternfly-sass itself, read this section.
+
+### Upstream Converter
+
+Keeping patternfly-sass in sync with upstream changes from PatternFly used to be an error prone and time consuming manual process. With Bootstrap 3 we have introduced a converter that automates this.
+
+**Note: if you're just looking to *use* PatternFly, see the [installation](#installation) section above.**
+
+Upstream changes to the PatternFly project can now be pulled in using the `convert` rake task.
+
+Here's an example run that would pull down the master branch from the main [patternfly/patternfly](https://github.com/patternfly/patternfly) repo:
+
+    rake convert
+
+This will convert the latest LESS to Sass and update to the latest JS.
+To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:
+
+    rake convert[tags/v1.2.1]
+
+The latest converter script is located [here][converter] and does the following:
+
+* Converts upstream patternfly LESS files to its matching SCSS file.
+* Copies all upstream JavaScript into `assets/javascripts/patternfly`, a Sprockets concatenation at `assets/javascripts/patternfly.js`.
+* Copies all upstream font files into `assets/fonts/patternfly`.
+* Sets `Patternfly::PATTERNFLY_SHA` in [version.rb][version] to the branch sha.
+
+This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output).
+Please submit GitHub issues tagged with `conversion`.
+
+## Credits
+
+patternfly-sass's converter is a fork of [bootstrap-sass](https://github.com/twbs/bootstrap-sass). The modifications and all other code is made by:
+
+<!-- feel free to make these link wherever you wish -->
+* [Alex Wood](https://github.com/awood)
+* [Dávid Halász](https://github.com/skateman)
+
+[converter]: https://github.com/patternfly/patternfly-sass/blob/master/tasks/converter.rb
+[version]: https://github.com/patternfly/patternfly-sass/blob/master/lib/patternfly-sass/version.rb
+[contrib]: https://github.com/patternfly/patternfly-sass/graphs/contributors
+[antirequire]: https://github.com/bootstrap/bootstrap-sass/issues/79#issuecomment-4428595
+[autoprefixer]: https://github.com/ai/autoprefixer

data/Rakefile

@@ -20,7 +20,7 @@ task :compile do
 
   Sass.load_paths << File.join(BOOTSTRAP_GEM_ROOT, 'assets', 'stylesheets')
   Sass.load_paths << File.join(FONTAWESOME_GEM_ROOT, 'assets', 'stylesheets')
-  Sass::Script::Number.precision = 8
+  ::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
 
   path = 'assets/stylesheets'
   FileUtils.mkdir_p('tmp')
@@ -39,40 +39,46 @@ task :compile do
 end
 
 desc "Start a web server with both the less and the sass version"
-task :serve do
+task :serve => :deps do
   require 'webrick'
   server = WEBrick::HTTPServer.new :Port => 9000, :DirectoryIndex => []
   {
-    '/'                                   => 'tests/index.html',
-    '/less/dist/css'                      => 'tests/patternfly/dist/css',
+    '/'                                   => 'spec/html/main.html',
+    '/less/dist/css'                      => 'spec/html/dist/css',
     '/less/dist/fonts'                    => 'assets/fonts/patternfly',
     '/less/dist/img'                      => 'assets/images/patternfly',
     '/less/dist/js'                       => 'assets/javascripts/patternfly',
-    '/less/components'                    => 'tests/components',
+    '/less/components'                    => 'spec/components',
     '/less/components/bootstrap/dist/js'  => File.join(BOOTSTRAP_GEM_ROOT, 'assets', 'javascripts'),
     '/less/components/font-awesome/fonts' => File.join(FONTAWESOME_GEM_ROOT, 'assets', 'fonts', 'font-awesome'),
-    '/less/patternfly'                    => 'tests/patternfly',
+    '/less/patternfly'                    => 'spec/html',
     '/sass/dist/fonts'                    => 'assets/fonts',
     '/sass/dist/img'                      => 'assets/images/patternfly',
+    '/sass/dist/images'                   => 'assets/images',
     '/sass/dist/js'                       => 'assets/javascripts/patternfly',
     '/sass/dist/css'                      => 'tmp',
-    '/sass/components'                    => 'tests/components',
+    '/sass/components'                    => 'spec/components',
     '/sass/components/bootstrap/dist/js'  => File.join(BOOTSTRAP_GEM_ROOT, 'assets', 'javascripts'),
     '/sass/dist/fonts/font-awesome'       => File.join(FONTAWESOME_GEM_ROOT, 'assets', 'fonts', 'font-awesome'),
-    '/sass/patternfly'                    => 'tests/patternfly'
+    '/sass/patternfly'                    => 'spec/html'
   }.each { |http, local| server.mount http, WEBrick::HTTPServlet::FileHandler, local }
 
   trap('INT') { server.stop }
   server.start
 end
 
+desc "Install testing dependencies using bower"
+task :deps do
+  system("bower install", out: $stdout, err: :out)
+  # This is a workaround for removing the obsoletely installed bootstrap and jquery
+  FileUtils.rm_rf 'spec/components/bootstrap'
+end
+
 desc "Clean up the test results"
 task :cleanup do
   require 'fileutils'
   FileUtils.rm_rf '.sass-cache'
-  FileUtils.rm_rf 'tests/less'
-  FileUtils.rm_rf 'tests/sass'
-  FileUtils.rm_rf 'tests/failures'
+  FileUtils.rm_rf 'spec/results'
 end
 
 desc "Run the tests with a web server"
@@ -84,7 +90,6 @@ task :test do
     Rake::Task[:serve].invoke
     puts "Stopping web server on port 9000"
   end
-  sleep(3) # Give some time for the web server to start
   puts "Starting the tests against the web server"
   begin
     Rake::Task[:spec].invoke
@@ -96,9 +101,8 @@ end
 desc "Run the tests without a web server"
 RSpec::Core::RakeTask.new(:spec) do |t|
   Rake::Task[:cleanup].invoke
-  FileUtils.mkdir_p 'tests/less'
-  FileUtils.mkdir_p 'tests/sass'
-  FileUtils.mkdir_p 'tests/failures'
+  FileUtils.mkdir_p 'spec/results/sass'
+  FileUtils.mkdir_p 'spec/results/less'
   t.pattern = Dir.glob('spec/**/*_spec.rb')
 end
 
@@ -112,9 +116,9 @@ task :upload do
   print Term::ANSIColor.bold "Uploading failure diffs to imgur "
 
   client = Imgur.new ENV['IMGUR_ID']
-  images = Dir["tests/failures/*.png"].map do |img|
+  images = Dir["spec/results/*.png"].map do |img|
     print Term::ANSIColor.cyan '.'
-    client.upload Imgur::LocalImage.new(img, :title => img.sub('.png', '.html').sub('tests/failures/', ''))
+    client.upload Imgur::LocalImage.new(img, :title => img.sub('.png', '.html').sub('spec/results/', ''))
   end
 
   if images.empty?

data/assets/stylesheets/patternfly/_variables.scss

@@ -5,221 +5,221 @@ $patternfly-sass-asset-helper: false !default;
 // Bootstrap overrides and PatternFly-specific variables
 
 /* PatternFly specific */
-$btn-default-bg-img-start:                                          #fafafa;
-$btn-default-bg-img-stop:                                           #ededed;
-$btn-xs-font-weight:                                                400;
-$dropdown-divider-margin:                                           4px 1px;
-$dropdown-link-active-border-color:                                 #0076b7;
-$dropdown-link-hover-border-color:                                  #b3d3e7;
-$dropdown-link-focus-color:                                         #fff;
-$font-family-monospace:                                             Menlo, Monaco, Consolas, monospace;
-$font-path:                                                         if($patternfly-sass-asset-helper, "patternfly", "../fonts/patternfly");
-$gray-light-pf:                                                     #aaa;
-$gray-pf:                                                           #4d5258;
-$icon-font-name-fa:                                                 "FontAwesome";
-$icon-font-name-pf:                                                 "PatternFlyIcons-webfont";
-$icon-prefix:                                                       pficon;
-$img-badge-ie8:                                                     "logo.png";
-$img-badge-ie8-height:                                              69px;
-$img-badge-ie8-width:                                               73px;
-$img-bg-login:                                                      "bg-login.jpg";
-$img-brand-ie8:                                                     "brand.png";
-$img-brand-lg-ie8:                                                  "brand-lg.png";
-$img-path:                                                          if($patternfly-sass-asset-helper, "patternfly", "../images/patternfly");
-$img-spinner:                                                       "spinner.gif";
-$img-spinner-lg:                                                    "spinner-lg.gif";
-$img-spinner-sm:                                                    "spinner-sm.gif";
-$img-spinner-xs:                                                    "spinner-xs.gif";
-$input-border-disabled:                                             #d4d4d4;
-$input-border-hover:                                                #7BB2DD;
-$list-group-top-border:                                             #e9e8e8;
-$login-bg-color:                                                    #080808;
-$login-container-bg-color:                                          #181818;
-$login-container-bg-color-rgba:                                     rgba(255, 255, 255, 0.055);
-$modal-title-padding-horizontal:                                    18px;
-$modal-title-padding-vertical:                                      10px;
-$navbar-pf-active-color:                                            #f1f1f1;
-$navbar-pf-bg-color:                                                #030303; //#393F45
-$navbar-pf-border-color:                                            #199dde;
-$navbar-pf-color:                                                   #cfcfcf;
-$navbar-pf-icon-bar-bg-color:                                       #fff;
-$navbar-pf-navbar-navbar-brand-min-width:                           270px;
-$navbar-pf-navbar-navbar-brand-padding:                             8px 0 7px;
-$navbar-pf-navbar-navbar-persistent-bg-color:                       #f6f6f6;
-$navbar-pf-navbar-navbar-persistent-border-color:                   #cecdcd;
-$pagination-padding-small-vertical:                                 0;
-$panel-default-border-color:                                        #bebdbd;
-$sidebar-pf-bg:                                                     #fafafa;
-$sidebar-pf-border-color:                                           #d0d0d0;
-$table-border-hover:                                                #a7cadf;
-$table-cell-padding-bottom:                                         3px;
-$table-cell-padding-top:                                            2px;
+$btn-default-bg-img-start:                                          #fafafa !default;
+$btn-default-bg-img-stop:                                           #ededed !default;
+$btn-xs-font-weight:                                                400 !default;
+$dropdown-divider-margin:                                           4px 1px !default;
+$dropdown-link-active-border-color:                                 #0076b7 !default;
+$dropdown-link-hover-border-color:                                  #b3d3e7 !default;
+$dropdown-link-focus-color:                                         #fff !default;
+$font-family-monospace:                                             Menlo, Monaco, Consolas, monospace !default;
+$font-path:                                                         if($patternfly-sass-asset-helper, "patternfly", "../fonts/patternfly") !default;
+$gray-light-pf:                                                     #aaa !default;
+$gray-pf:                                                           #4d5258 !default;
+$icon-font-name-fa:                                                 "FontAwesome" !default;
+$icon-font-name-pf:                                                 "PatternFlyIcons-webfont" !default;
+$icon-prefix:                                                       pficon !default;
+$img-badge-ie8:                                                     "logo.png" !default;
+$img-badge-ie8-height:                                              69px !default;
+$img-badge-ie8-width:                                               73px !default;
+$img-bg-login:                                                      "bg-login.jpg" !default;
+$img-brand-ie8:                                                     "brand.png" !default;
+$img-brand-lg-ie8:                                                  "brand-lg.png" !default;
+$img-path:                                                          if($patternfly-sass-asset-helper, "patternfly", "../images/patternfly") !default;
+$img-spinner:                                                       "spinner.gif" !default;
+$img-spinner-lg:                                                    "spinner-lg.gif" !default;
+$img-spinner-sm:                                                    "spinner-sm.gif" !default;
+$img-spinner-xs:                                                    "spinner-xs.gif" !default;
+$input-border-disabled:                                             #d4d4d4 !default;
+$input-border-hover:                                                #7BB2DD !default;
+$list-group-top-border:                                             #e9e8e8 !default;
+$login-bg-color:                                                    #080808 !default;
+$login-container-bg-color:                                          #181818 !default;
+$login-container-bg-color-rgba:                                     rgba(255, 255, 255, 0.055) !default;
+$modal-title-padding-horizontal:                                    18px !default;
+$modal-title-padding-vertical:                                      10px !default;
+$navbar-pf-active-color:                                            #f1f1f1 !default;
+$navbar-pf-bg-color:                                                #030303 !default; //#393F45
+$navbar-pf-border-color:                                            #199dde !default;
+$navbar-pf-color:                                                   #cfcfcf !default;
+$navbar-pf-icon-bar-bg-color:                                       #fff !default;
+$navbar-pf-navbar-navbar-brand-min-width:                           270px !default;
+$navbar-pf-navbar-navbar-brand-padding:                             8px 0 7px !default;
+$navbar-pf-navbar-navbar-persistent-bg-color:                       #f6f6f6 !default;
+$navbar-pf-navbar-navbar-persistent-border-color:                   #cecdcd !default;
+$pagination-padding-small-vertical:                                 0 !default;
+$panel-default-border-color:                                        #bebdbd !default;
+$sidebar-pf-bg:                                                     #fafafa !default;
+$sidebar-pf-border-color:                                           #d0d0d0 !default;
+$table-border-hover:                                                #a7cadf !default;
+$table-cell-padding-bottom:                                         3px !default;
+$table-cell-padding-top:                                            2px !default;
 // Reference variables declared in block above
-$img-path-alt:                                                      $img-path;
-$navbar-pf-navbar-header-border-color:                              lighten($navbar-pf-bg-color, 15%);
-$navbar-pf-navbar-nav-active-active-bg-color:                       lighten($navbar-pf-bg-color, 8%);
-$navbar-pf-navbar-nav-active-active-open-bg-color:                  lighten($navbar-pf-bg-color, 11%);
-$navbar-pf-navbar-nav-active-bg-color:                              lighten($navbar-pf-bg-color, 12.5%);
-$navbar-pf-navbar-primary-bg-color-start:                           lighten($navbar-pf-bg-color, 10%); // #474C50;
-$navbar-pf-navbar-primary-bg-color-stop:                            $navbar-pf-bg-color; // #383F43;
-$navbar-pf-navbar-utility-border-color:                             lighten($navbar-pf-bg-color, 15.5%);
-$navbar-pf-navbar-utility-color:                                    $navbar-pf-color;
-$navbar-pf-navbar-utility-hover-bg-color:                           lighten($navbar-pf-bg-color, 12.5%);
-$nav-tabs-color:                                                    $gray-pf;
+$img-path-alt:                                                      $img-path !default;
+$navbar-pf-navbar-header-border-color:                              lighten($navbar-pf-bg-color, 15%) !default;
+$navbar-pf-navbar-nav-active-active-bg-color:                       lighten($navbar-pf-bg-color, 8%) !default;
+$navbar-pf-navbar-nav-active-active-open-bg-color:                  lighten($navbar-pf-bg-color, 11%) !default;
+$navbar-pf-navbar-nav-active-bg-color:                              lighten($navbar-pf-bg-color, 12.5%) !default;
+$navbar-pf-navbar-primary-bg-color-start:                           lighten($navbar-pf-bg-color, 10%); // #474C50 !default;
+$navbar-pf-navbar-primary-bg-color-stop:                            $navbar-pf-bg-color; // #383F43 !default;
+$navbar-pf-navbar-utility-border-color:                             lighten($navbar-pf-bg-color, 15.5%) !default;
+$navbar-pf-navbar-utility-color:                                    $navbar-pf-color !default;
+$navbar-pf-navbar-utility-hover-bg-color:                           lighten($navbar-pf-bg-color, 12.5%) !default;
+$nav-tabs-color:                                                    $gray-pf !default;
 // Reference variables declared in block above
-$navbar-pf-navbar-primary-context-bg-color-start:                   lighten($navbar-pf-navbar-primary-bg-color-start, 8.5%);
-$navbar-pf-navbar-primary-context-bg-color-stop:                    lighten($navbar-pf-navbar-primary-bg-color-stop, 11%);
-$navbar-pf-navbar-primary-hover-bg-color-start:                     lighten($navbar-pf-navbar-primary-bg-color-start, 10%);
-$navbar-pf-navbar-primary-hover-bg-color-stop:                      lighten($navbar-pf-navbar-primary-bg-color-stop, 10%);
-$navbar-pf-navbar-primary-hover-border-color:                       lighten($navbar-pf-navbar-header-border-color, 20%);
-$navbar-pf-navbar-primary-context-border-color:                     lighten($navbar-pf-navbar-header-border-color, 8%);
-$navbar-pf-navbar-primary-context-border-top-color:                 lighten($navbar-pf-navbar-header-border-color, 7%);
-$navbar-pf-navbar-utility-hover-border-color:                       lighten($navbar-pf-navbar-utility-border-color, 5%);
-$navbar-pf-navbar-utility-open-bg-color:                            lighten($navbar-pf-navbar-utility-hover-bg-color, 7.5%);
-$navbar-pf-navbar-utility-open-border-color:                        lighten($navbar-pf-navbar-utility-hover-border-color, 5%);
+$navbar-pf-navbar-primary-context-bg-color-start:                   lighten($navbar-pf-navbar-primary-bg-color-start, 8.5%) !default;
+$navbar-pf-navbar-primary-context-bg-color-stop:                    lighten($navbar-pf-navbar-primary-bg-color-stop, 11%) !default;
+$navbar-pf-navbar-primary-hover-bg-color-start:                     lighten($navbar-pf-navbar-primary-bg-color-start, 10%) !default;
+$navbar-pf-navbar-primary-hover-bg-color-stop:                      lighten($navbar-pf-navbar-primary-bg-color-stop, 10%) !default;
+$navbar-pf-navbar-primary-hover-border-color:                       lighten($navbar-pf-navbar-header-border-color, 20%) !default;
+$navbar-pf-navbar-primary-context-border-color:                     lighten($navbar-pf-navbar-header-border-color, 8%) !default;
+$navbar-pf-navbar-primary-context-border-top-color:                 lighten($navbar-pf-navbar-header-border-color, 7%) !default;
+$navbar-pf-navbar-utility-hover-border-color:                       lighten($navbar-pf-navbar-utility-border-color, 5%) !default;
+$navbar-pf-navbar-utility-open-bg-color:                            lighten($navbar-pf-navbar-utility-hover-bg-color, 7.5%) !default;
+$navbar-pf-navbar-utility-open-border-color:                        lighten($navbar-pf-navbar-utility-hover-border-color, 5%) !default;
 // Reference variables declared in block above
-$navbar-pf-navbar-primary-active-bg-color-start:                    lighten($navbar-pf-navbar-primary-hover-bg-color-start, 5%);
-$navbar-pf-navbar-primary-active-bg-color-stop:                     lighten($navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%);
-$navbar-pf-navbar-primary-active-border-color:                      lighten($navbar-pf-navbar-primary-hover-border-color, 5%);
-$navbar-pf-navbar-primary-context-hover-bg-color-start:             lighten($navbar-pf-navbar-primary-context-bg-color-start, 5%);
-$navbar-pf-navbar-primary-context-hover-bg-color-stop:              lighten($navbar-pf-navbar-primary-context-bg-color-stop, 7.5%);
-$navbar-pf-navbar-primary-context-hover-border-color:               lighten($navbar-pf-navbar-primary-context-border-color, 5%);
-$navbar-pf-navbar-primary-context-hover-border-top-color:           lighten($navbar-pf-navbar-primary-context-border-top-color, 6%);
+$navbar-pf-navbar-primary-active-bg-color-start:                    lighten($navbar-pf-navbar-primary-hover-bg-color-start, 5%) !default;
+$navbar-pf-navbar-primary-active-bg-color-stop:                     lighten($navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%) !default;
+$navbar-pf-navbar-primary-active-border-color:                      lighten($navbar-pf-navbar-primary-hover-border-color, 5%) !default;
+$navbar-pf-navbar-primary-context-hover-bg-color-start:             lighten($navbar-pf-navbar-primary-context-bg-color-start, 5%) !default;
+$navbar-pf-navbar-primary-context-hover-bg-color-stop:              lighten($navbar-pf-navbar-primary-context-bg-color-stop, 7.5%) !default;
+$navbar-pf-navbar-primary-context-hover-border-color:               lighten($navbar-pf-navbar-primary-context-border-color, 5%) !default;
+$navbar-pf-navbar-primary-context-hover-border-top-color:           lighten($navbar-pf-navbar-primary-context-border-top-color, 6%) !default;
 // Reference variables declared in block above
-$navbar-pf-navbar-primary-context-active-bg-color-start:            lighten($navbar-pf-navbar-primary-context-hover-bg-color-start, 5%);
-$navbar-pf-navbar-primary-context-active-bg-color-stop:             lighten($navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%);
-$navbar-pf-navbar-primary-context-active-border-color:              lighten($navbar-pf-navbar-primary-context-hover-border-color, 5%);
-$navbar-pf-navbar-primary-context-active-border-top-color:          lighten($navbar-pf-navbar-primary-context-hover-border-top-color, 6%);
+$navbar-pf-navbar-primary-context-active-bg-color-start:            lighten($navbar-pf-navbar-primary-context-hover-bg-color-start, 5%) !default;
+$navbar-pf-navbar-primary-context-active-bg-color-stop:             lighten($navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%) !default;
+$navbar-pf-navbar-primary-context-active-border-color:              lighten($navbar-pf-navbar-primary-context-hover-border-color, 5%) !default;
+$navbar-pf-navbar-primary-context-active-border-top-color:          lighten($navbar-pf-navbar-primary-context-hover-border-top-color, 6%) !default;
 // References variable declared in block above
-$navbar-pf-navbar-primary-context-active-border-right-color:        $navbar-pf-navbar-primary-context-active-border-color;
+$navbar-pf-navbar-primary-context-active-border-right-color:        $navbar-pf-navbar-primary-context-active-border-color !default;
 
 
 /* Bootstrap overrides */
-$alert-info-border:                                                 #ccc;
-$alert-link-font-weight:                                            500;
-$alert-padding:                                                     7px;
-$body-bg:                                                           #ffffff;
-$border-radius-base:                                                1px;
-$brand-danger:                                                      #cc0000;
-$brand-info:                                                        #006e9c;
-$brand-primary:                                                     #00a8e1;
-$brand-success:                                                     #3f9c35;
-$brand-warning:                                                     #ec7a08;
-$breadcrumb-bg:                                                     transparent;
-$breadcrumb-separator:                                              "\f105";
-$btn-danger-bg:                                                     #a30000;
-$btn-danger-border:                                                 #781919;
-$btn-default-border:                                                #b7b7b7;
-$btn-font-weight:                                                   600;
-$btn-primary-bg:                                                    #0085cf;
-$btn-primary-border:                                                #006e9c;
-$caret-width-base:                                                  0;
-$dropdown-border:                                                   #b6b6b6;
-$dropdown-divider-bg:                                               #e5e5e5;
-$dropdown-link-active-color:                                        #fff;
-$dropdown-link-hover-bg:                                            #d4edfa;
-$font-family-base:                                                  "Open Sans", Helvetica, Arial, sans-serif;
-$font-size-base:                                                    12px;
-$gray-dark:                                                         lighten(#000, 20%);   // #333
-$gray-darker:                                                       lighten(#000, 13.5%); // #222
-$gray-light:                                                        lighten(#000, 60%);   // #999
-$gray-lighter:                                                      lighten(#000, 93.5%); // #eee
-$grid-gutter-width:                                                 40px;
-$input-bg-disabled:                                                 #F8F8F8;
-$input-border:                                                      #BABABA;
-$line-height-base:                                                  1.66666667; // 20/12
-$link-color:                                                        #0099d3;
-$list-group-border:                                                 #f2f2f2;
-$list-group-border-radius:                                          0;
-$list-group-hover-bg:                                               #d4edfa;
-$link-hover-color:                                                  #00618a;
-$nav-tabs-border-color:                                             #e9e8e8;
-$nav-tabs-link-hover-border-color:                                  transparent;
-$padding-large-horizontal:                                          10px;
-$padding-base-horizontal:                                           6px;
-$padding-base-vertical:                                             2px;
-$padding-large-vertical:                                            6px;
-$pager-border-radius:                                               0;
-$pager-disabled-color:                                              #969696;
-$pagination-bg:                                                     #f5f5f5;
-$pagination-border:                                                 #bbbbbb;
-$pagination-hover-bg:                                               #ededed;
-$panel-inner-border:                                                #cecdcd;
-$popover-arrow-color:                                               #fff;
-$popover-arrow-outer-color:                                         #bbb;
-$popover-border-color:                                              #bbb;
-$popover-max-width:                                                 220px;
-$popover-title-bg:                                                  #f5f5f5;
-$pre-bg:                                                            #fcfcfc;
-$progress-bg:                                                       #ededed;
-$table-bg-accent:                                                   #f5f5f5;
-$table-bg-hover:                                                    #d5ecf9;
-$table-border-color:                                                #d1d1d1;
-$table-cell-padding:                                                10px;
-$tooltip-arrow-width:                                               8px;
-$tooltip-bg:                                                        #434343;
-$tooltip-max-width:                                                 220px;
+$alert-info-border:                                                 #ccc !default;
+$alert-link-font-weight:                                            500 !default;
+$alert-padding:                                                     7px !default;
+$body-bg:                                                           #ffffff !default;
+$border-radius-base:                                                1px !default;
+$brand-danger:                                                      #cc0000 !default;
+$brand-info:                                                        #006e9c !default;
+$brand-primary:                                                     #00a8e1 !default;
+$brand-success:                                                     #3f9c35 !default;
+$brand-warning:                                                     #ec7a08 !default;
+$breadcrumb-bg:                                                     transparent !default;
+$breadcrumb-separator:                                              "\f105" !default;
+$btn-danger-bg:                                                     #a30000 !default;
+$btn-danger-border:                                                 #781919 !default;
+$btn-default-border:                                                #b7b7b7 !default;
+$btn-font-weight:                                                   600 !default;
+$btn-primary-bg:                                                    #0085cf !default;
+$btn-primary-border:                                                #006e9c !default;
+$caret-width-base:                                                  0 !default;
+$dropdown-border:                                                   #b6b6b6 !default;
+$dropdown-divider-bg:                                               #e5e5e5 !default;
+$dropdown-link-active-color:                                        #fff !default;
+$dropdown-link-hover-bg:                                            #d4edfa !default;
+$font-family-base:                                                  "Open Sans", Helvetica, Arial, sans-serif !default;
+$font-size-base:                                                    12px !default;
+$gray-dark:                                                         lighten(#000, 20%) !default;   // #333
+$gray-darker:                                                       lighten(#000, 13.5%) !default; // #222
+$gray-light:                                                        lighten(#000, 60%) !default;   // #999
+$gray-lighter:                                                      lighten(#000, 93.5%) !default; // #eee
+$grid-gutter-width:                                                 40px !default;
+$input-bg-disabled:                                                 #F8F8F8 !default;
+$input-border:                                                      #BABABA !default;
+$line-height-base:                                                  1.66666667 !default; // 20/12
+$link-color:                                                        #0099d3 !default;
+$list-group-border:                                                 #f2f2f2 !default;
+$list-group-border-radius:                                          0 !default;
+$list-group-hover-bg:                                               #d4edfa !default;
+$link-hover-color:                                                  #00618a !default;
+$nav-tabs-border-color:                                             #e9e8e8 !default;
+$nav-tabs-link-hover-border-color:                                  transparent !default;
+$padding-large-horizontal:                                          10px !default;
+$padding-base-horizontal:                                           6px !default;
+$padding-base-vertical:                                             2px !default;
+$padding-large-vertical:                                            6px !default;
+$pager-border-radius:                                               0 !default;
+$pager-disabled-color:                                              #969696 !default;
+$pagination-bg:                                                     #f5f5f5 !default;
+$pagination-border:                                                 #bbbbbb !default;
+$pagination-hover-bg:                                               #ededed !default;
+$panel-inner-border:                                                #cecdcd !default;
+$popover-arrow-color:                                               #fff !default;
+$popover-arrow-outer-color:                                         #bbb !default;
+$popover-border-color:                                              #bbb !default;
+$popover-max-width:                                                 220px !default;
+$popover-title-bg:                                                  #f5f5f5 !default;
+$pre-bg:                                                            #fcfcfc !default;
+$progress-bg:                                                       #ededed !default;
+$table-bg-accent:                                                   #f5f5f5 !default;
+$table-bg-hover:                                                    #d5ecf9 !default;
+$table-border-color:                                                #d1d1d1 !default;
+$table-cell-padding:                                                10px !default;
+$tooltip-arrow-width:                                               8px !default;
+$tooltip-bg:                                                        #434343 !default;
+$tooltip-max-width:                                                 220px !default;
 // Reference variables declared in block above
-$alert-danger-bg:                                                   $body-bg;
-$alert-danger-border:                                               $brand-danger;
-$alert-danger-text:                                                 $gray-dark;
-$alert-info-bg:                                                     $body-bg;
-$alert-info-text:                                                   $gray-dark;
-$alert-success-bg:                                                  $body-bg;
-$alert-success-border:                                              $brand-success;
-$alert-success-text:                                                $gray-dark;
-$alert-warning-bg:                                                  $body-bg;
-$alert-warning-border:                                              $brand-warning;
-$alert-warning-text:                                                $gray-dark;
-$badge-border-radius:                                               $border-radius-base;
-$border-radius-large:                                               $border-radius-base;
-$border-radius-small:                                               $border-radius-base;
-$breadcrumb-active-color:                                           $gray-pf;
-$breadcrumb-color:                                                  $gray-pf;
-$btn-default-bg:                                                    $gray-lighter;
-$btn-default-color:                                                 $gray-pf;
-$caret-width-large:                                                 $caret-width-base;
-$dropdown-fallback-border:                                          $dropdown-border;
-$dropdown-link-active-bg:                                           $link-color;
-$dropdown-link-hover-color:                                         $gray-pf;
-$font-size-h1:                                                      ceil($font-size-base * 2); // ~24px
-$font-size-h2:                                                      ceil($font-size-base * 1.8333); // ~22px
-$font-size-h3:                                                      ceil($font-size-base * 1.3333); // ~16px
-$font-size-h5:                                                      ceil($font-size-base * 1.0833); // ~13px
-$font-size-large:                                                   ceil($font-size-base * 1.1666); // ~14px
-$font-size-small:                                                   ceil($font-size-base * .9166); // ~11px
-$input-color:                                                       $gray-dark;
-$nav-tabs-active-link-hover-color:                                  $link-color;
-$nav-tabs-justified-link-border-color:                              $nav-tabs-border-color;
-$padding-small-horizontal:                                          $padding-base-horizontal;
-$padding-small-vertical:                                            $padding-base-vertical;
-$panel-danger-border:                                               $brand-danger;
-$panel-danger-heading-bg:                                           $brand-danger;
-$panel-info-border:                                                 $brand-info;
-$panel-info-heading-bg:                                             $brand-info;
-$panel-primary-text:                                                $body-bg;
-$panel-success-border:                                              $brand-success;
-$panel-success-heading-bg:                                          $brand-success;
-$panel-warning-border:                                              $brand-warning;
-$panel-warning-heading-bg:                                          $brand-warning;
-$state-warning-text:                                                $brand-warning;
+$alert-danger-bg:                                                   $body-bg !default;
+$alert-danger-border:                                               $brand-danger !default;
+$alert-danger-text:                                                 $gray-dark !default;
+$alert-info-bg:                                                     $body-bg !default;
+$alert-info-text:                                                   $gray-dark !default;
+$alert-success-bg:                                                  $body-bg !default;
+$alert-success-border:                                              $brand-success !default;
+$alert-success-text:                                                $gray-dark !default;
+$alert-warning-bg:                                                  $body-bg !default;
+$alert-warning-border:                                              $brand-warning !default;
+$alert-warning-text:                                                $gray-dark !default;
+$badge-border-radius:                                               $border-radius-base !default;
+$border-radius-large:                                               $border-radius-base !default;
+$border-radius-small:                                               $border-radius-base !default;
+$breadcrumb-active-color:                                           $gray-pf !default;
+$breadcrumb-color:                                                  $gray-pf !default;
+$btn-default-bg:                                                    $gray-lighter !default;
+$btn-default-color:                                                 $gray-pf !default;
+$caret-width-large:                                                 $caret-width-base !default;
+$dropdown-fallback-border:                                          $dropdown-border !default;
+$dropdown-link-active-bg:                                           $link-color !default;
+$dropdown-link-hover-color:                                         $gray-pf !default;
+$font-size-h1:                                                      ceil($font-size-base * 2) !default; // ~24px
+$font-size-h2:                                                      ceil($font-size-base * 1.8333) !default; // ~22px
+$font-size-h3:                                                      ceil($font-size-base * 1.3333) !default; // ~16px
+$font-size-h5:                                                      ceil($font-size-base * 1.0833) !default; // ~13px
+$font-size-large:                                                   ceil($font-size-base * 1.1666) !default; // ~14px
+$font-size-small:                                                   ceil($font-size-base * .9166) !default; // ~11px
+$input-color:                                                       $gray-dark !default;
+$nav-tabs-active-link-hover-color:                                  $link-color !default;
+$nav-tabs-justified-link-border-color:                              $nav-tabs-border-color !default;
+$padding-small-horizontal:                                          $padding-base-horizontal !default;
+$padding-small-vertical:                                            $padding-base-vertical !default;
+$panel-danger-border:                                               $brand-danger !default;
+$panel-danger-heading-bg:                                           $brand-danger !default;
+$panel-info-border:                                                 $brand-info !default;
+$panel-info-heading-bg:                                             $brand-info !default;
+$panel-primary-text:                                                $body-bg !default;
+$panel-success-border:                                              $brand-success !default;
+$panel-success-heading-bg:                                          $brand-success !default;
+$panel-warning-border:                                              $brand-warning !default;
+$panel-warning-heading-bg:                                          $brand-warning !default;
+$state-warning-text:                                                $brand-warning !default;
 // Reference variable declared in block above
-$panel-danger-text:                                                 $panel-primary-text;
-$panel-info-text:                                                   $panel-primary-text;
-$panel-success-text:                                                $panel-primary-text;
-$panel-warning-text:                                                $panel-primary-text;
+$panel-danger-text:                                                 $panel-primary-text !default;
+$panel-info-text:                                                   $panel-primary-text !default;
+$panel-success-text:                                                $panel-primary-text !default;
+$panel-warning-text:                                                $panel-primary-text !default;
 
 /* PatternFly-specific variables based on Bootstrap overides */
-$btn-danger-bg-img-start:                                           $brand-danger;
-$btn-danger-bg-img-stop:                                            $btn-danger-bg;
-$btn-primary-bg-img-start:                                          $brand-primary;
-$btn-primary-bg-img-stop:                                           $btn-primary-bg;
-$dropdown-link-focus-bg:                                            $link-color;
-$line-height-computed:                                              floor(($font-size-base * $line-height-base));
-$progress-sm:                                                       $line-height-computed - 6;
-$progress-xs:                                                       $line-height-computed - 14;
-$syntax-1:                                                          $btn-danger-bg;
-$syntax-2:                                                          $gray-dark;
-$syntax-3:                                                          $brand-success;
-$syntax-4:                                                          $brand-info;
-$tooltip-font-size:                                                 $font-size-base;
+$btn-danger-bg-img-start:                                           $brand-danger !default;
+$btn-danger-bg-img-stop:                                            $btn-danger-bg !default;
+$btn-primary-bg-img-start:                                          $brand-primary !default;
+$btn-primary-bg-img-stop:                                           $btn-primary-bg !default;
+$dropdown-link-focus-bg:                                            $link-color !default;
+$line-height-computed:                                              floor(($font-size-base * $line-height-base)) !default;
+$progress-sm:                                                       $line-height-computed - 6 !default;
+$progress-xs:                                                       $line-height-computed - 14 !default;
+$syntax-1:                                                          $btn-danger-bg !default;
+$syntax-2:                                                          $gray-dark !default;
+$syntax-3:                                                          $brand-success !default;
+$syntax-4:                                                          $brand-info !default;
+$tooltip-font-size:                                                 $font-size-base !default;