components/nabla-styles/app/styles/_nabla-variables.scss
//
// Variables
// --------------------------------------------------
// Core variables and mixins
@import "bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss";
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-base-85: lighten($gray-base, 85%) !default; // #d9d9d9;
$gray-base-90: lighten($gray-base, 90%) !default; // #e5e5e5;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 29.8%) !default; // #4c4c4c
$gray-light: lighten($gray-base, 60%) !default; // #999
$gray-lighter: lighten($gray-base, 80%) !default; // #ccc
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #558b00 !default;
$brand-info: #00338b !default;
$brand-warning: #eeb700 !default;
$brand-danger: #b60300 !default;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Global text color on `<body>`.
$text-color: $gray !default;
//** Global textual link color.
$link-color: $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color: lighten($link-color, 10%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif !default;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
$icon-font-path: "../../../bower_components/bootstrap/fonts/" !default;
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$border-radius-base: 0px !default;
$border-radius-large: 0px !default;
$border-radius-small: 0px !default;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Background color used for `.table-striped`.
$table-bg-accent: #f8fafc !default;
//** Background color used for `.table-hover`.
$table-bg-hover: #e7edf5 !default;
$table-bg-active: $table-bg-hover !default;
//** Border color for table and cell borders.
$table-border-color: $gray-base-90 !default;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$btn-font-weight: normal !default;
$btn-default-color: $gray !default;
$btn-default-bg: #fff !default;
$btn-default-border: mix($gray-base, white, 10%) !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: transparent !default;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: transparent !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: transparent !default;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: transparent !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: transparent !default;
$btn-link-disabled-color: $gray-light !default;
//== Forms
//
//##
//** `<input>` background color
$input-bg: #fff !default;
//** `<input disabled>` background color
$input-bg-disabled: #ececec !default;
//** Text color for `<input>`s
$input-color: $gray !default;
//** `<input>` border color
$input-border: mix($brand-primary, white, 50%) !default;
//** Placeholder text color
$input-color-placeholder: mix($gray-base, white, 30%) !default;
//** Background color for textual input addons
$input-group-addon-bg: $gray-base-90 !default;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border !default;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Dropdown link text color.
$dropdown-link-color: $gray !default; //
//** Hover color for dropdown links.
$dropdown-link-hover-color: $gray !default; //
//** Hover background for dropdown links.
$dropdown-link-hover-bg: mix($brand-primary, white, 10%) !default; //
//** Active dropdown menu item text color.
$dropdown-link-active-color: $brand-primary !default; //
//** Active dropdown menu item background color.
$dropdown-link-active-bg: mix($brand-primary, white, 10%) !default; //
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
//== Grid system
//
//## Define your custom responsive grid.
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
//== Navbar
//
//##
// Basics of a navbar
$navbar-height: 50px !default;
$navbar-margin-bottom: $line-height-computed !default;
$navbar-border-radius: $border-radius-base !default;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height: 340px !default;
$navbar-default-color: #777 !default;
$navbar-default-bg: #f8f8f8 !default;
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
// Navbar links
$navbar-default-link-color: #777 !default;
$navbar-default-link-hover-color: #333 !default;
$navbar-default-link-hover-bg: transparent !default;
$navbar-default-link-active-color: #fff !default;
$navbar-default-link-active-bg: $brand-primary !default;
$navbar-default-link-disabled-color: #ccc !default;
$navbar-default-link-disabled-bg: transparent !default;
// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
$navbar-default-brand-hover-bg: transparent !default;
// Navbar toggle
$navbar-default-toggle-hover-bg: #ddd !default;
$navbar-default-toggle-icon-bar-bg: #888 !default;
$navbar-default-toggle-border-color: #ddd !default;
//=== Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-bg: $gray !default; //
// Inverted navbar links
$navbar-inverse-link-active-bg: $brand-primary !default; //
// Inverted navbar brand label
// Inverted navbar toggle
//== Navs
//
//##
//=== Shared nav styles
$nav-link-hover-bg: mix($brand-primary, white, 5%) !default; //
//== Tabs
$nav-tabs-active-link-hover-color: $brand-primary !default; //
//== Pills
$nav-pills-active-link-hover-bg: $brand-primary !default; //
$nav-pills-active-link-hover-color: white !default;//
//== Pagination
//
//##
$pagination-color: $gray-light !default; //
$pagination-hover-bg: mix($brand-primary, white, 5%) !default; //
$pagination-active-color: $brand-primary !default; //
$pagination-active-bg: mix($brand-primary, white, 10%) !default; //
$pagination-active-border: $gray-lighter !default; //
//== Pager
//
//##
$pager-border-radius: 0px !default; //
//== Jumbotron
//
//##
$jumbotron-bg: mix($brand-primary, white, 10%) !default;
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
$state-success-text: $brand-success !default;
$state-success-bg: mix($brand-success, white, 10%) !default;
$state-success-border: darken(spin($state-success-bg, -10), 5%) !default;
$state-info-text: $brand-info !default;
$state-info-bg: mix($brand-info, white, 10%) !default;
$state-info-border: darken(spin($state-info-bg, -10), 7%) !default;
$state-warning-text: darken($brand-warning,10%) !default;
$state-warning-bg: mix($brand-warning, white, 10%) !default;
$state-warning-border: darken(spin($state-warning-bg, -10), 5%) !default;
$state-danger-text: $brand-danger !default;
$state-danger-bg: mix($brand-danger, white, 10%) !default;
$state-danger-border: darken(spin($state-danger-bg, -10), 5%) !default;
//== Tooltips
//
//##
//** Tooltip max width
$tooltip-max-width: 200px !default;
//** Tooltip text color
$tooltip-color: #fff !default;
//** Tooltip background color
$tooltip-bg: $gray !default; //
$tooltip-opacity: .9 !default;
//** Tooltip arrow width
$tooltip-arrow-width: 5px !default;
//** Tooltip arrow color
$tooltip-arrow-color: $tooltip-bg !default;
//== Popovers
//
//##
//** Popover title background color
$popover-title-bg: mix($brand-primary, white, 10%) !default;
//** Popover arrow width
$popover-arrow-width: 8px !default;
//== Labels
//
//##
//== Modals
//
//##
//** Padding applied to the modal body
$modal-inner-padding: 20px !default; //
//** Padding applied to the modal title
$modal-title-padding: 20px !default; //
//** Modal content border color
$modal-content-border-color: white !default; //
//** Modal content border color **for IE8**
$modal-content-fallback-border-color: $gray-base-85 !default; //
//** Modal header border color
$modal-header-border-color: $gray-base-85 !default; //
//** Modal footer border color
$modal-footer-border-color: $gray-base-90 !default; //
//== Alerts
//
//## Define alert colors, border radius, and padding.
//== Progress bars
//
//##
//** Background color of the whole progress component
$progress-bg: $gray-base-85 !default;
//== List group
//
//##
//** `.list-group-item` border color
$list-group-border: $gray-base-90 !default; //
//** Background color of single list items on hover
$list-group-hover-bg: mix($brand-primary, white, 5%) !default; //
//** Text color of active list items
$list-group-active-color: $brand-primary !default;
//** Background color of active list items
$list-group-active-bg: mix($brand-primary, white, 10%) !default; //
//** Border color of active list elements
$list-group-active-border: $gray-base-90 !default; //
$list-group-link-color: #555 !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-link-heading-color: #333 !default;
//== Panels
//
//##
$panel-body-padding: 20px !default; //
$panel-heading-padding: 0px 10px !default; //
//** Border color for elements within panels
$panel-inner-border: #ddd !default;
$panel-footer-bg: #fff !default; //
$panel-default-text: $gray !default; //
$panel-default-border: $gray-base-85 !default; //
$panel-default-heading-bg: #fff !default; //
$panel-primary-text: $brand-primary !default; //
$panel-primary-border: mix($brand-primary, white, 50%) !default; //
$panel-primary-heading-bg: transparent !default; //
$panel-success-heading-bg: transparent !default; //
$panel-info-heading-bg: transparent !default; //
$panel-warning-heading-bg: transparent !default; //
$panel-danger-heading-bg: transparent !default; //
//== Thumbnails
//
//##
//== Wells
//
//##
//== Badges
//
//##
$badge-color: #fff !default;
//** Linked badge text color on hover
$badge-link-hover-color: #fff !default;
$badge-bg: mix($brand-primary, white, 50%) !default;
//** Badge text color in active nav link
$badge-active-color: $link-color !default;
//** Badge background color in active nav link
$badge-active-bg: #fff !default; //
$badge-font-weight: normal !default;
$badge-border-radius: 4px !default;
//== Breadcrumbs
//
//##
//** Breadcrumb background color
$breadcrumb-bg: $body-bg !default; //
//** Breadcrumb text color
$breadcrumb-color: $gray !default;
//** Text color of current page in the breadcrumb
$breadcrumb-active-color: $brand-primary !default;
//== Carousel
//
//##
//== Close
//
//##
//== Code
//
//##
//== Type
//
//##
//** Horizontal offset for forms and lists.