Created
March 2, 2015 04:39
-
-
Save honkskillet/ffa8ec0ff39ab5e53e89 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//SCSS | |
//THIS FILE CONSOLIDATES ALL THE REDUNDANT COLOR VARIABLE DEFINITIONS IN THE OFFICIAL SASS BOOTSTRAP _variable.scss FILE | |
//to be used with package {name: bootstrap-sass, version: 3.1.1}, variable names might not match with other versions | |
//USAGE | |
//@import this file *before* you import bootstrap into your main scss file | |
//This file can be used as a starting point to further reduce the number of color variable | |
// (15 shade of gray is overkill, there is really no need for both #f9f9f9 and #f8f8f8 !!1!) | |
//== Overwrite Colors | |
// | |
//## Gray and brand colors for use across Bootstrap. | |
$gray-darker: lighten(#000, 13.5%) !default; // #222 | |
$gray-dark: lighten(#000, 20%) !default; // #333 | |
$gray: lighten(#000, 33.5%) !default; // #555 | |
$gray-light: lighten(#000, 60%) !default; // #999 | |
$gray-lighter: lighten(#000, 93.5%) !default; // #eee | |
$gray-f9: #f9f9f9 !default; | |
$gray-f8: #f8f8f8 !default; | |
$gray-f5: #f5f5f5 !default; | |
$gray-f: #fff !default; | |
$gray-e5: #e5e5e5 !default; | |
$gray-d: #ddd !default; | |
$gray-c: #ccc !default; | |
$gray-8: #888 !default; | |
$gray-7: #777 !default; | |
$gray-4: #444 !default; | |
$black: #000 !default; | |
$black-o15: rgba(0,0,0,.15) !default; | |
$black-o2: rgba(0,0,0,.2) !default; | |
$black-o6: rgba(0,0,0,.6) !default; | |
//UNIQUE NON-GRAY COLORS | |
$brand-primary: #428bca !default; | |
$brand-success: #5cb85c !default; | |
$brand-info: #5bc0de !default; | |
$brand-warning: #f0ad4e !default; | |
$brand-danger: #d9534f !default; | |
//== Form states and alerts | |
// | |
//## Define colors for form feedback states and, by default, alerts. | |
$state-success-text: #3c763d !default; | |
$state-success-bg: #dff0d8 !default; | |
$state-info-text: #31708f !default; | |
$state-info-bg: #d9edf7 !default; | |
$state-warning-text: #8a6d3b !default; | |
$state-warning-bg: #fcf8e3 !default; | |
$state-danger-text: #a94442 !default; | |
$state-danger-bg: #f2dede !default; | |
//== Forms | |
// | |
//## | |
$input-border-focus: #66afe9 !default; | |
//== Code | |
// | |
//## | |
$code-color: #c7254e !default; | |
$code-bg: #f9f2f4 !default; | |
//REDUNDANT COLOR DEFINITIONS | |
//== Forms | |
// | |
//## | |
$input-bg: $gray-f !default; | |
$input-border: $gray-c !default; | |
$legend-border-color: $gray-e5 !default; | |
//== Code | |
// | |
//## | |
$kbd-color: $gray-f !default; | |
$kbd-bg: $gray-dark !default; | |
$pre-bg: $gray-f5 !default; | |
$pre-border-color: $gray-c !default; | |
//== Scaffolding | |
// | |
$body-bg: $gray-f !default; | |
$component-active-color: $gray-f !default; | |
//== Tables | |
// | |
$table-bg-accent: $gray-f9 !default; | |
$table-bg-hover: $gray-f5 !default; | |
$table-border-color: $gray-d !default; | |
//== Buttons | |
// | |
$btn-default-color: $gray-dark !default; | |
$btn-default-bg: $gray-f !default; | |
$btn-default-border: $gray-c !default; | |
$btn-primary-color: $gray-f !default; | |
$btn-success-color: $gray-f !default; | |
$btn-info-color: $gray-f !default; | |
$btn-warning-color: $gray-f !default; | |
$btn-danger-color: $gray-f !default; | |
//== Dropdowns | |
// | |
$dropdown-bg: $gray-f !default; | |
$dropdown-border: $black-o15 !default; | |
$dropdown-fallback-border: $gray-c !default; | |
$dropdown-divider-bg: $gray-e5 !default; | |
$dropdown-link-hover-bg: $gray-f5 !default; | |
$dropdown-caret-color: $black !default; | |
//== Navbar | |
// | |
//## | |
$navbar-default-color: $gray-7 !default; | |
$navbar-default-bg: $gray-f8 !default; | |
$navbar-default-link-color: $gray-7 !default; | |
$navbar-default-link-hover-color: $gray-dark !default; | |
$navbar-default-link-active-color: $gray !default; | |
$navbar-default-link-disabled-color: $gray-c !default; | |
$navbar-default-toggle-hover-bg: $gray-d !default; | |
$navbar-default-toggle-icon-bar-bg: $gray-8 !default; | |
$navbar-default-toggle-border-color: $gray-d !default; | |
$navbar-inverse-bg: $gray-darker !default; | |
$navbar-inverse-link-hover-color: $gray-f !default; | |
$navbar-inverse-link-disabled-color: $gray-4 !default; | |
$navbar-inverse-brand-hover-color: $gray-f !default; | |
$navbar-inverse-toggle-hover-bg: $gray-dark !default; | |
$navbar-inverse-toggle-icon-bar-bg: $gray-f !default; | |
$navbar-inverse-toggle-border-color: $gray-dark !default; | |
//== Navs | |
// | |
//## | |
$nav-open-link-hover-color: $gray-f !default; | |
//== Tabs | |
// | |
//## | |
$nav-tabs-border-color: $gray-d !default; | |
$nav-tabs-active-link-hover-border-color: $gray-d !default; | |
$nav-tabs-justified-link-border-color: $gray-d !default; | |
//== Pagination | |
// | |
//## | |
$pagination-bg: $gray-f !default; | |
$pagination-border: $gray-d !default; | |
$pagination-hover-border: $gray-d !default; | |
$pagination-active-color: $gray-f !default; | |
$pagination-disabled-bg: $gray-f !default; | |
$pagination-disabled-border: $gray-d !default; | |
//== Tooltips | |
// | |
//## | |
$tooltip-color: $gray-f !default; | |
$tooltip-bg: $black !default; | |
//== Popovers | |
// | |
//## | |
$popover-bg: $gray-f !default; | |
$popover-border-color: $black-o2 !default; | |
$popover-fallback-border-color: $gray-c !default; | |
$popover-arrow-color: $gray-f !default; | |
//== Labels | |
// | |
//## | |
$label-color: $gray-f !default; | |
$label-link-hover-color: $gray-f !default; | |
//== Modals | |
// | |
//## | |
$modal-content-bg: $gray-f !default; | |
$modal-content-border-color: $black-o2 !default; | |
$modal-content-fallback-border-color: $gray-light !default; | |
$modal-backdrop-bg: $black !default; | |
$modal-header-border-color: $gray-e5 !default; | |
//== Progress bars | |
// | |
//## | |
$progress-bg: $gray-f5 !default; | |
$progress-bar-color: $gray-f !default; | |
//== List group | |
// | |
//## | |
$list-group-bg: $gray-f !default; | |
$list-group-border: $gray-d !default; | |
$list-group-hover-bg: $gray-f5 !default; | |
$list-group-link-color: $gray !default; | |
$list-group-link-heading-color: $gray-dark !default; | |
//== Panels | |
// | |
//## | |
$panel-bg: $gray-f !default; | |
$panel-inner-border: $gray-d !default; | |
$panel-footer-bg: $gray-f5 !default; | |
$panel-default-border: $gray-d !default; | |
$panel-default-heading-bg: $gray-f5 !default; | |
$panel-primary-text: $gray-f !default; | |
//== Thumbnails | |
// | |
//## | |
$thumbnail-border: $gray-d !default; | |
//== Wells | |
// | |
//## | |
$well-bg: $gray-f5 !default; | |
//== Badges | |
// | |
//## | |
$badge-color: $gray-f !default; | |
$badge-link-hover-color: $gray-f !default; | |
$badge-active-bg: $gray-f !default; | |
//== Breadcrumbs | |
// | |
//## | |
$breadcrumb-bg: $gray-f5 !default; | |
$breadcrumb-color: $gray-c !default; | |
//== Carousel | |
// | |
//## | |
$carousel-text-shadow: 0 1px 2px $black-o6 !default; | |
$carousel-control-color: $gray-f !default; | |
$carousel-indicator-active-bg: $gray-f !default; | |
$carousel-indicator-border-color: $gray-f !default; | |
$carousel-caption-color: $gray-f !default; | |
//== Close | |
// | |
//## | |
$close-color: $black !default; | |
$close-text-shadow: 0 1px 0 $gray-f !default; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment