bootstrap-styled
Version:
Bootstrap Styled is a front-end ecosystem for React made with Bootstrap 4 philosophy, using the power of css-in-js thanks to styled-components.
743 lines (689 loc) • 53.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.makeTheme = void 0;
var _color = _interopRequireDefault(require("@bootstrap-styled/color"));
var _unitUtils = _interopRequireDefault(require("@bootstrap-styled/utils/lib/unitUtils"));
var _utilities = require("@bootstrap-styled/css-utils/lib/utilities");
var _utils = require("./utils");
var _regex = require("../utils/regex");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var detectUnit = _unitUtils.default.detectUnit,
rmUnit = _unitUtils.default.rmUnit;
/**
* ORIGINAL BOOTSTRAP THEME
*
* this file is not meant to be used and must be kept as original
* @param userTheme
*/
function makeOriginal() {
var userTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
/* eslint dot-notation: 'off', new-cap: 'off' */
// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
var v = {};
var u = userTheme;
var detectedUnit;
v._name = u._name || 'bootstrap-styled'; // eslint-disable-line
// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
// Tables
// Buttons
// Forms
// Dropdowns
// Z-index master list
// Navbar
// Navs
// Pagination
// Jumbotron
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Close
// Code
// General variable structure
//
// Variable format should follow the `v['$component-modifier-state-property']` order.
// Colors
//
// Grayscale and brand colors for use across Bootstrap.
// Start with assigning color names to specific hex values.
v['$white'] = u['$white'] || '#fff';
v['$gray-100'] = v['$gray-100'] || '#f8f9fa';
v['$gray-200'] = v['$gray-200'] || '#e9ecef';
v['$gray-300'] = v['$gray-300'] || '#dee2e6';
v['$gray-400'] = v['$gray-400'] || '#ced4da';
v['$gray-500'] = v['$gray-500'] || '#adb5bd';
v['$gray-600'] = v['$gray-600'] || '#6c757d';
v['$gray-700'] = v['$gray-700'] || '#495057';
v['$gray-800'] = v['$gray-800'] || '#343a40';
v['$gray-900'] = v['$gray-900'] || '#212529';
v['$black'] = u['$black'] || '#000';
v['$grays'] = u['$grays'] || {
100: v['$gray-100'],
200: v['$gray-200'],
300: v['$gray-300'],
400: v['$gray-400'],
500: v['$gray-500'],
600: v['$gray-600'],
700: v['$gray-700'],
800: v['$gray-800'],
900: v['$gray-900']
};
v['$blue'] = u['$blue'] || '#0275d8';
v['$indigo'] = u['$indigo'] || '#0275d8';
v['$purple'] = u['$purple'] || '#613d7c';
v['$pink'] = u['$pink'] || '#ff5b77';
v['$red'] = u['$red'] || '#d9534f';
v['$orange'] = u['$orange'] || '#f0ad4e';
v['$yellow'] = u['$yellow'] || '#ffd500';
v['$green'] = u['$green'] || '#5cb85c';
v['$teal'] = u['$teal'] || '#5bc0de';
v['$cyan'] = u['$cyan'] || '#17a2b8';
v['$light'] = u['$light'] || v['$gray-100'];
v['$dark'] = u['$dark'] || v['$gray-800'];
v['$colors'] = _objectSpread({}, {
blue: v['$blue'],
indigo: v['$indigo'],
purple: v['$purple'],
pink: v['$pink'],
red: v['$red'],
orange: v['$orange'],
yellow: v['$yellow'],
green: v['$green'],
teal: v['$teal'],
cyan: v['$cyan'],
white: v['$white'],
gray: v['$gray-600'],
'gray-dark': v['$gray-800']
}, {}, u['$colors'] || {});
v['$primary'] = u['$primary'] || v['$blue'];
v['$secondary'] = u['$secondary'] || v['$gray-600'];
v['$success'] = u['$success'] || v['$green'];
v['$info'] = u['$info'] || v['$cyan'];
v['$warning'] = u['$warning'] || v['$yellow'];
v['$danger'] = u['$danger'] || v['$red'];
v['$light'] = u['$light'] || v['$gray-100'];
v['$dark'] = u['$dark'] || v['$gray-800']; // Create grayscale
v['$gray-dark'] = u['$gray-dark'] || '#292b2c';
v['$gray'] = u['$gray'] || '#464a4c';
v['$gray-light'] = u['$gray-light'] || '#636c72';
v['$gray-lighter'] = u['$gray-lighter'] || '#eceeef';
v['$gray-lightest'] = u['$gray-lightest'] || '#f7f7f9'; // Reassign color vars to semantic color scheme
v['$brand-primary'] = u['$brand-primary'] || v['$primary'];
v['$brand-success'] = u['$brand-success'] || v['$success'];
v['$brand-info'] = u['$brand-info'] || v['$info'];
v['$brand-warning'] = u['$brand-warning'] || v['$warning'];
v['$brand-danger'] = u['$brand-danger'] || v['$danger'];
v['$brand-inverse'] = u['$brand-inverse'] || v['$gray-dark'];
v['$theme-colors'] = _objectSpread({}, {
primary: v['$primary'],
secondary: v['$secondary'],
success: v['$success'],
info: v['$info'],
warning: v['$warning'],
danger: v['$danger'],
light: v['$light'],
dark: v['$dark']
}, {}, u['$theme-colors'] || {}); // Options
//
// Quickly modify global styling by enabling or disabling optional features.
v['$enable-rounded'] = (0, _utils.allowFalseValue)(u['$enable-rounded'], true);
v['$enable-shadows'] = (0, _utils.allowFalseValue)(u['$enable-shadows'], false);
v['$enable-gradients'] = (0, _utils.allowFalseValue)(u['$enable-gradients'], false);
v['$enable-transitions'] = (0, _utils.allowFalseValue)(u['$enable-transitions'], true);
v['$enable-hover-media-query'] = (0, _utils.allowFalseValue)(u['$enable-hover-media-query'], false);
v['$enable-grid-classes'] = (0, _utils.allowFalseValue)(u['$enable-grid-classes'], true);
v['$enable-print-styles'] = (0, _utils.allowFalseValue)(u['$enable-print-styles'], true); // Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the v['$spacers'] map, should you need more variation.
v['$spacer'] = u['$spacer'] || '1rem'; // =============================================================================================================
// Added by AJT, put up here as it is used along the file and must be defined before used by other variables
detectedUnit = detectUnit(v['$spacer']);
v['$spacer-halved'] = u['$spacer-halved'] || rmUnit(v['$spacer'], detectedUnit) / 2 + detectedUnit; // =============================================================================================================
v['$spacer-x'] = u['$spacer-x'] || v['$spacer'];
v['$spacer-y'] = u['$spacer-y'] || v['$spacer'];
v['$spacers'] = u['$spacers'] || {
0: 0,
1: rmUnit(v['$spacer']) * 0.25 + detectedUnit,
2: rmUnit(v['$spacer']) * 0.5 + detectedUnit,
3: v['$spacer'],
4: rmUnit(v['$spacer']) * 1.5 + detectedUnit,
5: rmUnit(v['$spacer']) * 3 + detectedUnit
};
v['$negative-spacers'] = u['$negative-spacers'] || (0, _utils.negativifyMap)(v['$spacers']);
v['$border-width'] = u['$border-width'] || '1px';
v['$border-color'] = u['$border-color'] || v['$gray-300']; // This variable affects the `.h-*` and `.w-*` classes.
v['$sizes'] = u['$sizes'] || {
25: '25%',
50: '50%',
75: '75%',
100: '100%'
}; // Body
//
// Settings for the `<body>` element.
v['$body-bg'] = u['$body-bg'] || v['$white'];
v['$body-color'] = u['$body-color'] || v['$gray-dark']; // Links
//
// Style anchor elements.
v['$link-color'] = u['$link-color'] || v['$brand-primary'];
v['$link-decoration'] = u['$link-decoration'] || 'none';
v['$link-hover-color'] = u['$link-hover-color'] || (0, _color.default)(v['$link-color']).darken(0.35).toString();
v['$link-hover-decoration'] = u['$link-hover-decoration'] || 'underline'; // Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
v['$grid-breakpoints'] = u['$grid-breakpoints'] || {
xs: '0',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1452px'
};
(0, _utils.assertAscending)(v['$grid-breakpoints'], '$grid-breakpoints');
(0, _utils.assertStartAtZero)(v['$grid-breakpoints']); // Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
v['$container-max-widths'] = u['$container-max-widths'] || {
sm: '540px',
md: '720px',
lg: '960px',
xl: '1140px'
};
(0, _utils.assertAscending)(v['$container-max-widths'], '$container-max-widths'); // Grid columns
//
// Set the number of columns and specify the width of the gutters.
v['$grid-columns'] = u['$grid-columns'] || '12';
v['$grid-gutter-width'] = u['$grid-gutter-width'] || '30px'; // Fonts
//
// Font, line-height, and color for body text, headings, and more.
v['$font-family-sans-serif'] = u['$font-family-sans-serif'] || '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
v['$font-family-monospace'] = u['$font-family-monospace'] || 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
v['$font-family-base'] = u['$font-family-base'] || v['$font-family-sans-serif'];
v['$font-size-base'] = u['$font-size-base'] || '1rem'; // Assumes the browser default, typically `16px`
v['$font-size-lg'] = u['$font-size-lg'] || '1.25rem';
v['$font-size-sm'] = u['$font-size-sm'] || '.875rem';
v['$font-size-xs'] = u['$font-size-xs'] || '.75rem';
v['$font-weight-light'] = u['$font-weight-light'] || '300';
v['$font-weight-lighter'] = u['$font-weight-lighter'] || 'lighter';
v['$font-weight-bolder'] = u['$font-weight-bolder'] || 'bolder';
v['$font-weight-normal'] = u['$font-weight-normal'] || '400';
v['$font-weight-bold'] = u['$font-weight-bold'] || '700';
v['$font-weight-base'] = u['$font-weight-base'] || v['$font-weight-normal'];
v['$line-height-base'] = u['$line-height-base'] || '1.5';
v['$font-size-h1'] = u['$font-size-h1'] || '2.5rem';
v['$font-size-h2'] = u['$font-size-h2'] || '2rem';
v['$font-size-h3'] = u['$font-size-h3'] || '1.75rem';
v['$font-size-h4'] = u['$font-size-h4'] || '1.5rem';
v['$font-size-h5'] = u['$font-size-h5'] || '1.25rem';
v['$font-size-h6'] = u['$font-size-h6'] || '1rem';
detectedUnit = detectUnit(v['$spacer']);
v['$headings-margin-bottom'] = u['$headings-margin-bottom'] || rmUnit(v['$spacer'], detectedUnit) / 2 + detectedUnit;
v['$headings-font-family'] = u['$headings-font-family'] || 'inherit';
v['$headings-font-weight'] = u['$headings-font-weight'] || '500';
v['$headings-line-height'] = u['$headings-line-height'] || '1.1';
v['$headings-color'] = u['$headings-color'] || 'inherit';
v['$display1-size'] = u['$display1-size'] || '6rem';
v['$display2-size'] = u['$display2-size'] || '5.5rem';
v['$display3-size'] = u['$display3-size'] || '4.5rem';
v['$display4-size'] = u['$display4-size'] || '3.5rem';
v['$display1-weight'] = u['$display1-weight'] || '300';
v['$display2-weight'] = u['$display2-weight'] || '300';
v['$display3-weight'] = u['$display3-weight'] || '300';
v['$display4-weight'] = u['$display4-weight'] || '300';
v['$display-line-height'] = u['$display-line-height'] || v['$headings-line-height'];
v['$lead-font-size'] = u['$lead-font-size'] || '1.25rem';
v['$lead-font-weight'] = u['$lead-font-weight'] || '300';
v['$small-font-size'] = u['$small-font-size'] || '80%';
v['$text-muted'] = u['$text-muted'] || v['$gray-light'];
v['$blockquote-small-color'] = u['$blockquote-small-color'] || v['$gray-light'];
detectedUnit = detectUnit(v['$font-size-base']);
v['$blockquote-font-size'] = u['$blockquote-font-size'] || rmUnit(v['$font-size-base'], detectedUnit) * 1.25 + detectedUnit;
v['$blockquote-border-color'] = u['$blockquote-border-color'] || v['$gray-lighter'];
v['$blockquote-border-width'] = u['$blockquote-border-width'] || '.25rem';
v['$hr-border-color'] = u['$hr-border-color'] || (0, _color.default)(v['$black']).alpha(0.1).toString();
v['$hr-border-width'] = u['$hr-border-width'] || v['$border-width'];
v['$mark-padding'] = u['$mark-padding'] || '.2em';
v['$dt-font-weight'] = u['$dt-font-weight'] || v['$font-weight-bold'];
v['$list-inline-padding'] = u['$list-inline-padding'] || '5px'; // Components
//
// Define common padding and border radius sizes and more.
v['$line-height-lg'] = u['$line-height-lg'] || '1.6';
v['$line-height-sm'] = u['$line-height-sm'] || '1.3';
v['$border-radius'] = u['$border-radius'] || '.25rem';
v['$border-radius-lg'] = u['$border-radius-lg'] || '.3rem';
v['$border-radius-sm'] = u['$border-radius-sm'] || '.2rem';
v['$rounded-pill'] = u['$rounded-pill'] || '50rem';
v['$box-shadow-sm'] = u['$box-shadow-sm'] || "0 .125rem .25rem ".concat((0, _color.default)(v.$black).alpha(0.075).toString());
v['$box-shadow'] = u['$box-shadow'] || "0 .5rem 1rem ".concat((0, _color.default)(v.$black).alpha(0.15).toString());
v['$box-shadow-lg'] = u['$box-shadow-lg'] || "0 1rem 3rem ".concat((0, _color.default)(v.$black).alpha(0.175).toString());
v['$box-shadow-inset'] = u['$box-shadow-inset'] || "inset 0 1px 2px ".concat((0, _color.default)(v.$black).alpha(0.075).toString());
v['$component-active-color'] = u['$component-active-color'] || v['$white'];
v['$component-active-bg'] = u['$component-active-bg'] || v['$brand-primary'];
v['$caret-width'] = u['$caret-width'] || '.3em';
v['$transition-base'] = u['$transition-base'] || 'all .2s ease-in-out';
v['$transition-fade'] = u['$transition-fade'] || 'opacity .15s linear';
v['$transition-collapse'] = u['$transition-collapse'] || 'height .35s ease'; // Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
v['$table-cell-padding'] = u['$table-cell-padding'] || '.75rem';
v['$table-sm-cell-padding'] = u['$table-sm-cell-padding'] || '.3rem';
v['$table-bg'] = u['$table-bg'] || 'transparent';
v['$table-inverse-bg'] = u['$table-inverse-bg'] || v['$gray-dark'];
v['$table-inverse-bg-accent'] = u['$table-inverse-bg-accent'] || (0, _color.default)(v['$white']).alpha(0.05).toString();
v['$table-inverse-bg-hover'] = u['$table-inverse-bg-hover'] || (0, _color.default)(v['$white']).alpha(0.075).toString();
v['$table-inverse-color'] = u['$table-inverse-color'] || v['$body-bg'];
v['$table-inverse-border'] = u['$table-inverse-border'] || (0, _color.default)(v['$gray-dark']).lighten(0.075).toString();
v['$table-bg-accent'] = u['$table-bg-accent'] || (0, _color.default)(v['$black']).alpha(0.05).toString();
v['$table-bg-hover'] = u['$table-bg-hover'] || (0, _color.default)(v['$black']).alpha(0.075).toString();
v['$table-bg-active'] = u['$table-bg-active'] || v['$table-bg-hover'];
v['$table-head-bg'] = u['$table-head-bg'] || v['$gray-lighter'];
v['$table-head-color'] = u['$table-head-color'] || v['$gray'];
v['$table-border-width'] = u['$table-border-width'] || v['$border-width'];
v['$table-border-color'] = u['$table-border-color'] || v['$gray-lighter']; // Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
v['$btn-padding-x'] = u['$btn-padding-x'] || '1rem';
v['$btn-padding-y'] = u['$btn-padding-y'] || '.5rem';
v['$btn-line-height'] = u['$btn-line-height'] || '1.25';
v['$btn-font-weight'] = u['$btn-font-weight'] || v['$font-weight-normal'];
v['$btn-box-shadow'] = u['$btn-box-shadow'] || "inset 0 1px 0 ".concat((0, _color.default)(v['$white']).alpha(0.15).toString(), ", 0 1px 1px ").concat((0, _color.default)(v['$black']).alpha(0.075).toString());
v['$btn-focus-box-shadow'] = u['$btn-focus-box-shadow'] || "0 0 0 2px ".concat((0, _color.default)(v['$brand-primary']).alpha(0.25).toString());
v['$btn-disabled-opacity'] = u['$btn-disabled-opacity'] || '.65';
v['$btn-active-box-shadow'] = u['$btn-active-box-shadow'] || "inset 0 3px 5px ".concat((0, _color.default)(v['$black']).alpha(0.125).toString());
v['$btn-primary-color'] = u['$btn-primary-color'] || v['$white'];
v['$btn-primary-bg'] = u['$btn-primary-bg'] || v['$brand-primary'];
v['$btn-secondary-color'] = u['$btn-secondary-color'] || v['$gray-dark'];
v['$btn-secondary-bg'] = u['$btn-secondary-bg'] || v['$white'];
v['$btn-info-color'] = u['$btn-info-color'] || v['$white'];
v['$btn-info-bg'] = u['$btn-info-bg'] || v['$brand-info'];
v['$btn-success-color'] = u['$btn-success-color'] || v['$white'];
v['$btn-success-bg'] = u['$btn-success-bg'] || v['$brand-success'];
v['$btn-warning-color'] = u['$btn-warning-color'] || v['$white'];
v['$btn-warning-bg'] = u['$btn-warning-bg'] || v['$brand-warning'];
v['$btn-danger-color'] = u['$btn-danger-color'] || v['$white'];
v['$btn-danger-bg'] = u['$btn-danger-bg'] || v['$brand-danger'];
/* this improvement will solve the linear-gradient when used for the background */
['primary', 'secondary', 'info', 'success', 'warning', 'danger'].forEach(function (type) {
if (v["$btn-".concat(type, "-bg")].includes('linear-gradient')) {
v["$btn-".concat(type, "-border")] = v["$btn-".concat(type, "-bg")].match(_regex.linearGradientRe)[1]; // eslint-disable-line prefer-destructuring
} else if (type === 'secondary') {
// secondary is having a white background, they use by default #ccc to make it look like a button
v['$btn-secondary-border'] = u['$btn-secondary-border'] || '#ccc';
} else {
v["$btn-".concat(type, "-border")] = u["$btn-".concat(type, "-border")] || v["$btn-".concat(type, "-bg")];
}
});
v['$btn-link-disabled-color'] = u['$btn-link-disabled-color'] || v['$gray-light'];
v['$btn-padding-x-sm'] = u['$btn-padding-x-sm'] || '.5rem';
v['$btn-padding-y-sm'] = u['$btn-padding-y-sm'] || '.25rem';
v['$btn-padding-x-lg'] = u['$btn-padding-x-lg'] || '1.5rem';
v['$btn-padding-y-lg'] = u['$btn-padding-y-lg'] || '.75rem';
v['$btn-block-spacing-y'] = u['$btn-block-spacing-y'] || '.5rem'; // Allows for customizing button radius independently from global border radius
v['$btn-border-radius'] = u['$btn-border-radius'] || v['$border-radius'];
v['$btn-border-radius-lg'] = u['$btn-border-radius-lg'] || v['$border-radius-lg'];
v['$btn-border-radius-sm'] = u['$btn-border-radius-sm'] || v['$border-radius-sm'];
v['$btn-border-width'] = u['$btn-border-width'] || '1px';
v['$btn-transition'] = u['$btn-transition'] || v['$transition-base']; // Forms
v['$input-padding-x'] = u['$input-padding-x'] || '.75rem';
v['$input-padding-y'] = u['$input-padding-y'] || '.5rem';
v['$input-line-height'] = u['$input-line-height'] || '1.25';
v['$input-bg'] = u['$input-bg'] || v['$white'];
v['$input-bg-disabled'] = u['$input-bg-disabled'] || v['$gray-lighter'];
v['$input-color'] = u['$input-color'] || v['$gray'];
v['$input-border-color'] = u['$input-border-color'] || (0, _color.default)(v['$black']).alpha(0.15).toString();
v['$input-btn-border-width'] = u['$input-btn-border-width'] || v['$border-width']; // For form controls and buttons
v['$input-box-shadow'] = u['$input-box-shadow'] || "inset 0 1px 1px ".concat((0, _color.default)(v['$black']).alpha(0.075).toString());
v['$input-border-radius'] = u['$input-border-radius'] || v['$border-radius'];
v['$input-border-radius-lg'] = u['$input-border-radius-lg'] || v['$border-radius-lg'];
v['$input-border-radius-sm'] = u['$input-border-radius-sm'] || v['$border-radius-sm'];
v['$input-bg-focus'] = u['$input-bg-focus'] || v['$input-bg'];
v['$input-border-focus'] = u['$input-border-focus'] || (0, _color.default)(v['$brand-primary']).lighten(0.25).toString();
v['$input-box-shadow-focus'] = u['$input-box-shadow-focus'] || "".concat(v['$input-box-shadow'], ", 0 0 8px ").concat((0, _color.default)(v['$input-border-focus']).alpha(0.6).toString());
v['$input-color-focus'] = u['$input-color-focus'] || v['$input-color'];
v['$input-color-placeholder'] = u['$input-color-placeholder'] || v['$gray-light'];
v['$input-padding-x-sm'] = u['$input-padding-x-sm'] || '.5rem';
v['$input-padding-y-sm'] = u['$input-padding-y-sm'] || '.25rem';
v['$input-padding-x-lg'] = u['$input-padding-x-lg'] || '1.5rem';
v['$input-padding-y-lg'] = u['$input-padding-y-lg'] || '.75rem';
detectedUnit = detectUnit(v['$font-size-base']);
v['$input-height'] = u['$input-height'] || rmUnit(v['$font-size-base'], detectedUnit) * v['$line-height-base'] + rmUnit(v['$input-padding-y'], detectedUnit) * 2 + detectedUnit;
v['$input-height-sm'] = u['$input-height-sm'] || rmUnit(v['$font-size-sm'], detectedUnit) * v['$line-height-sm'] + rmUnit(v['$input-padding-y-sm'], detectedUnit) * 2 + detectedUnit;
v['$input-height-lg'] = u['$input-height-lg'] || rmUnit(v['$font-size-lg'], detectedUnit) * v['$line-height-lg'] + rmUnit(v['$input-padding-y-lg'], detectedUnit) * 2 + detectedUnit;
v['$input-transition'] = u['$input-transition'] || 'border-color ease-in-out .15s, box-shadow ease-in-out .15s';
v['$label-margin-bottom'] = u['$label-margin-bottom'] || '.5rem';
v['$form-text-margin-top'] = u['$form-text-margin-top'] || '.25rem';
v['$form-feedback-margin-top'] = u['$form-feedback-margin-top'] || v['$form-text-margin-top'];
v['$form-check-margin-bottom'] = u['$form-check-margin-bottom'] || '.5rem';
v['$form-check-input-gutter'] = u['$form-check-input-gutter'] || '1.25rem';
v['$form-check-input-margin-y'] = u['$form-check-input-margin-y'] || '.25rem';
v['$form-check-input-margin-x'] = u['$form-check-input-margin-x'] || '.25rem';
v['$form-check-inline-margin-x'] = u['$form-check-inline-margin-x'] || '.75rem';
v['$form-group-margin-bottom'] = u['$form-group-margin-bottom'] || v['$spacer-y'];
v['$input-group-addon-bg'] = u['$input-group-addon-bg'] || v['$gray-lighter'];
v['$input-group-addon-border-color'] = u['$input-group-addon-border-color'] || v['$input-border-color'];
v['$cursor-disabled'] = u['$cursor-disabled'] || 'not-allowed';
v['$custom-control-gutter'] = u['$custom-control-gutter'] || '1.5rem';
v['$custom-control-spacer-x'] = u['$custom-control-spacer-x'] || '1rem';
v['$custom-control-spacer-y'] = u['$custom-control-spacer-y'] || '.25rem';
v['$custom-control-indicator-size'] = u['$custom-control-indicator-size'] || '1rem';
v['$custom-control-indicator-bg'] = u['$custom-control-indicator-bg'] || '#ddd';
v['$custom-control-indicator-bg-size'] = u['$custom-control-indicator-bg-size'] || '50% 50%';
v['$custom-control-indicator-box-shadow'] = u['$custom-control-indicator-box-shadow'] || "inset 0 .25rem .25rem ".concat((0, _color.default)(v['$black']).alpha(0.1).toString());
v['$custom-control-disabled-cursor'] = u['$custom-control-disabled-cursor'] || v['$cursor-disabled'];
v['$custom-control-disabled-indicator-bg'] = u['$custom-control-disabled-indicator-bg'] || v['$gray-lighter'];
v['$custom-control-disabled-description-color'] = u['$custom-control-disabled-description-color'] || v['$gray-light'];
v['$custom-control-checked-indicator-color'] = u['$custom-control-checked-indicator-color'] || v['$white'];
v['$custom-control-checked-indicator-bg'] = u['$custom-control-checked-indicator-bg'] || v['$brand-primary'];
v['$custom-control-checked-indicator-box-shadow'] = u['$custom-control-checked-indicator-box-shadow'] || 'none';
v['$custom-control-focus-indicator-box-shadow'] = u['$custom-control-focus-indicator-box-shadow'] || "0 0 0 1px ".concat(v['$body-bg'], ", 0 0 0 3px ").concat(v['$brand-primary']);
v['$custom-control-active-indicator-color'] = u['$custom-control-active-indicator-color'] || v['$white'];
v['$custom-control-active-indicator-bg'] = u['$custom-control-active-indicator-bg'] || (0, _color.default)(v['$brand-primary']).lighten(0.35).toString();
v['$custom-control-active-indicator-box-shadow'] = u['$custom-control-active-indicator-box-shadow'] || 'none';
v['$custom-checkbox-radius'] = u['$custom-checkbox-radius'] || v['$border-radius'];
v['$custom-checkbox-checked-icon'] = u['$custom-checkbox-checked-icon'] || "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\"%3E%3Cpath fill=\"".concat(v['$custom-control-checked-indicator-color'], "\" d=\"M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\"/%3E%3C/svg%3E')");
v['$custom-checkbox-indeterminate-bg'] = u['$custom-checkbox-indeterminate-bg'] || v['$brand-primary'];
v['$custom-checkbox-indeterminate-indicator-color'] = u['$custom-checkbox-indeterminate-indicator-color'] || v['$custom-control-checked-indicator-color'];
v['$custom-checkbox-indeterminate-icon'] = u['$custom-checkbox-indeterminate-icon'] || "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 4\"%3E%3Cpath stroke=\"".concat(v['$custom-checkbox-indeterminate-indicator-color'], "\" d=\"M0 2h4\"/%3E%3C/svg%3E')");
v['$custom-checkbox-indeterminate-box-shadow'] = u['$custom-checkbox-indeterminate-box-shadow'] || 'none';
v['$custom-radio-radius'] = u['$custom-radio-radius'] || '50%';
v['$custom-radio-checked-icon'] = u['$custom-radio-checked-icon'] || "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-4 -4 8 8\"%3E%3Ccircle r=\"3\" fill=\"".concat(v['$custom-control-checked-indicator-color'], "\"/%3E%3C/svg%3E')");
v['$custom-select-padding-x'] = u['$custom-select-padding-x'] || '.75rem ';
v['$custom-select-padding-y'] = u['$custom-select-padding-y'] || '.375rem';
v['$custom-select-indicator-padding'] = u['$custom-select-indicator-padding'] || '1rem'; // Extra padding to account for the presence of the background-image based indicator
v['$custom-select-line-height'] = u['$custom-select-line-height'] || v['$input-line-height'];
v['$custom-select-color'] = u['$custom-select-color'] || v['$input-color'];
v['$custom-select-disabled-color'] = u['$custom-select-disabled-color'] || v['$gray-light'];
v['$custom-select-bg'] = u['$custom-select-bg'] || v['$white'];
v['$custom-select-disabled-bg'] = u['$custom-select-disabled-bg'] || v['$gray-lighter'];
v['$custom-select-bg-size'] = u['$custom-select-bg-size'] || '8px 10px'; // In pixels because image dimensions
v['$custom-select-indicator-color'] = u['$custom-select-indicator-color'] || '#333';
v['$custom-select-indicator'] = u['$custom-select-indicator'] || "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"%3E%3Cpath fill=\"".concat(v['$custom-select-indicator-color'], "\" d=\"M2 0L0 2h4zm0 5L0 3h4z\"/%3E%3C/svg%3E')");
v['$custom-select-border-width'] = u['$custom-select-border-width'] || v['$input-btn-border-width'];
v['$custom-select-border-color'] = u['$custom-select-border-color'] || v['$input-border-color'];
v['$custom-select-border-radius'] = u['$custom-select-border-radius'] || v['$border-radius'];
v['$custom-select-focus-border-color'] = u['$custom-select-focus-border-color'] || (0, _color.default)(v['$brand-primary']).lighten(0.25).toString();
v['$custom-select-focus-box-shadow'] = u['$custom-select-focus-box-shadow'] || "inset 0 1px 2px ".concat((0, _color.default)(v['$black']).alpha(0.75).toString(), ", 0 0 5px ").concat((0, _color.default)(v['$custom-select-focus-border-color']).alpha(0.5).toString());
v['$custom-select-sm-font-size'] = u['$custom-select-sm-font-size'] || '75%';
v['$custom-file-height'] = u['$custom-file-height'] || '2.5rem';
v['$custom-file-width'] = u['$custom-file-width'] || '14rem';
v['$custom-file-focus-box-shadow'] = u['$custom-file-focus-box-shadow'] || "0 0 0 .075rem ".concat(v['$white'], ", 0 0 0 .2rem ").concat(v['$brand-primary']);
v['$custom-file-padding-x'] = u['$custom-file-padding-x'] || '.5rem';
v['$custom-file-padding-y'] = u['$custom-file-padding-y'] || '1rem';
v['$custom-file-line-height'] = u['$custom-file-line-height'] || '1.5';
v['$custom-file-color'] = u['$custom-file-color'] || v['$gray'];
v['$custom-file-bg'] = u['$custom-file-bg'] || v['$white'];
v['$custom-file-border-width'] = u['$custom-file-border-width'] || v['$border-width'];
v['$custom-file-border-color'] = u['$custom-file-border-color'] || v['$input-border-color'];
v['$custom-file-border-radius'] = u['$custom-file-border-radius'] || v['$border-radius'];
v['$custom-file-box-shadow'] = u['$custom-file-box-shadow'] || "inset 0 .2rem .4rem ".concat((0, _color.default)(v['$black']).alpha(0.05).toString());
v['$custom-file-button-color'] = u['$custom-file-button-color'] || v['$custom-file-color'];
v['$custom-file-button-bg'] = u['$custom-file-button-bg'] || v['$gray-lighter'];
v['$custom-file-text'] = u['$custom-file-text'] || {
placeholder: {
en: 'Choose file...'
},
'button-label': {
en: 'Browse'
}
}; // Form validation icons
v['$form-icon-success-color'] = u['$form-icon-success-color'] || v['$brand-success'];
v['$form-icon-success'] = u['$form-icon-success'] || "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\"%3E%3Cpath fill=\"".concat(v['$form-icon-success-color'], "\" d=\"M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z\"/%3E%3C/svg%3E')");
v['$form-icon-warning-color'] = u['$form-icon-warning-color'] || v['$brand-warning'];
v['$form-icon-warning'] = u['$form-icon-warning'] || "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 8 8\"%3E%3Cpath fill=\"".concat(v['$form-icon-warning-color'], "\" d=\"M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z\"/%3E%3C/svg%3E')");
v['$form-icon-danger-color'] = u['$form-icon-danger-color'] || v['$brand-danger'];
v['$form-icon-danger'] = u['$form-icon-danger'] || "url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"".concat(v['$form-icon-danger-color'], "\" viewBox=\"-2 -2 7 7\"%3E%3Cpath stroke=\"%23d9534f\" d=\"M0 0l3 3m0-3L0 3\"/%3E%3Ccircle r=\".5\"/%3E%3Ccircle cx=\"3\" r=\".5\"/%3E%3Ccircle cy=\"3\" r=\".5\"/%3E%3Ccircle cx=\"3\" cy=\"3\" r=\".5\"/%3E%3C/svg%3E')"); // Dropdowns
//
// Dropdown menu container and contents.
v['$dropdown-min-width'] = u['$dropdown-min-width'] || '10rem';
v['$dropdown-padding-y'] = u['$dropdown-padding-y'] || '.5rem';
v['$dropdown-margin-top'] = u['$dropdown-margin-top'] || '.125rem';
v['$dropdown-bg'] = u['$dropdown-bg'] || v['$white'];
v['$dropdown-border-color'] = u['$dropdown-border-color'] || (0, _color.default)(v['$black']).alpha(0.15).toString();
v['$dropdown-border-width'] = u['$dropdown-border-width'] || v['$border-width'];
v['$dropdown-divider-bg'] = u['$dropdown-divider-bg'] || v['$gray-lighter'];
v['$dropdown-box-shadow'] = u['$dropdown-box-shadow'] || "0 .5rem 1rem ".concat((0, _color.default)(v['$black']).alpha(0.175).toString());
v['$dropdown-link-color'] = u['$dropdown-link-color'] || v['$gray-dark'];
v['$dropdown-link-hover-color'] = u['$dropdown-link-hover-color'] || (0, _color.default)(v['$gray-dark']).darken(0.05).toString();
v['$dropdown-link-hover-bg'] = u['$dropdown-link-hover-bg'] || v['$gray-lightest'];
v['$dropdown-link-active-color'] = u['$dropdown-link-active-color'] || v['$component-active-color'];
v['$dropdown-link-active-bg'] = u['$dropdown-link-active-bg'] || v['$component-active-bg'];
v['$dropdown-link-disabled-color'] = u['$dropdown-link-disabled-color'] || v['$gray-light'];
v['$dropdown-item-padding-x'] = u['$dropdown-item-padding-x'] || '1.5rem';
v['$dropdown-header-color'] = u['$dropdown-header-color'] || v['$gray-light']; // Z-index master list
//
// Warning = 'Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
v['$zindex-dropdown-backdrop'] = u['$zindex-dropdown-backdrop'] || '990';
v['$zindex-dropdown'] = u['$zindex-dropdown'] || '1000';
v['$zindex-modal-backdrop'] = u['$zindex-modal-backdrop'] || '2040';
v['$zindex-modal'] = u['$zindex-modal'] || '2050';
v['$zindex-popover'] = u['$zindex-popover'] || '1060';
v['$zindex-tooltip'] = u['$zindex-tooltip'] || '1070';
v['$zindex-navbar'] = u['$zindex-navbar'] || '1000';
v['$zindex-navbar-fixed'] = u['$zindex-navbar-fixed'] || '1030';
v['$zindex-navbar-sticky'] = u['$zindex-navbar-sticky'] || '1030'; // Navbar
v['$navbar-padding-x'] = u['$navbar-padding-x'] || v['$spacer'];
v['$navbar-padding-y'] = u['$navbar-padding-y'] || v['$spacer-halved'];
v['$navbar-brand-padding-y'] = u['$navbar-brand-padding-y'] || '.25rem';
v['$navbar-divider-padding-y'] = u['$navbar-divider-padding-y'] || '.425rem';
v['$navbar-toggler-padding-x'] = u['$navbar-toggler-padding-x'] || '.75rem';
v['$navbar-toggler-padding-y'] = u['$navbar-toggler-padding-y'] || '.25rem';
v['$navbar-toggler-font-size'] = u['$navbar-toggler-font-size'] || v['$font-size-lg'];
v['$navbar-toggler-border-radius'] = u['$navbar-toggler-border-radius'] || v['$btn-border-radius'];
v['$navbar-inverse-color'] = u['$navbar-inverse-color'] || (0, _color.default)(v['$white']).alpha(0.5).toString();
v['$navbar-inverse-hover-color'] = u['$navbar-inverse-hover-color'] || (0, _color.default)(v['$white']).alpha(0.75).toString();
v['$navbar-inverse-active-color'] = u['$navbar-inverse-active-color'] || (0, _color.default)(v['$white']).alpha(1).toString();
v['$navbar-inverse-disabled-color'] = u['$navbar-inverse-disabled-color'] || (0, _color.default)(v['$white']).alpha(0.25).toString();
v['$navbar-inverse-toggler-bg'] = u['$navbar-inverse-toggler-bg'] || "url('data:image/svg+xml;charset=utf8,%3Csvg viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath stroke=\"".concat(v['$navbar-inverse-color'], "\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" d=\"M4 7h22M4 15h22M4 23h22\"/%3E%3C/svg%3E')");
v['$navbar-inverse-toggler-border'] = u['$navbar-inverse-toggler-border'] || (0, _color.default)(v['$white']).alpha(0.1).toString();
v['$navbar-light-color'] = u['$navbar-light-color'] || (0, _color.default)(v['$black']).alpha(0.5).toString();
v['$navbar-light-hover-color'] = u['$navbar-light-hover-color'] || (0, _color.default)(v['$black']).alpha(0.7).toString();
v['$navbar-light-active-color'] = u['$navbar-light-active-color'] || (0, _color.default)(v['$black']).alpha(0.9).toString();
v['$navbar-light-disabled-color'] = u['$navbar-light-disabled-color'] || (0, _color.default)(v['$black']).alpha(0.3).toString();
v['$navbar-light-toggler-bg'] = u['$navbar-light-toggler-bg'] || "url('data:image/svg+xml;charset=utf8,%3Csvg viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath stroke=\"".concat(v['$navbar-light-color'], "\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" d=\"M4 7h22M4 15h22M4 23h22\"/%3E%3C/svg%3E')");
v['$navbar-light-toggler-border'] = u['$navbar-light-toggler-border'] || (0, _color.default)(v['$black']).alpha(0.1).toString(); // Navs
v['$nav-link-padding'] = u['$nav-link-padding'] || '.5em 1em';
v['$nav-disabled-link-color'] = u['$nav-disabled-link-color'] || v['$gray-light'];
v['$nav-tabs-border-color'] = u['$nav-tabs-border-color'] || '#ddd';
v['$nav-tabs-border-width'] = u['$nav-tabs-border-width'] || v['$border-width'];
v['$nav-tabs-border-radius'] = u['$nav-tabs-border-radius'] || v['$border-radius'];
v['$nav-tabs-link-hover-border-color'] = u['$nav-tabs-link-hover-border-color'] || v['$gray-lighter'];
v['$nav-tabs-active-link-hover-color'] = u['$nav-tabs-active-link-hover-color'] || v['$gray'];
v['$nav-tabs-active-link-hover-bg'] = u['$nav-tabs-active-link-hover-bg'] || v['$body-bg'];
v['$nav-tabs-active-link-hover-border-color'] = u['$nav-tabs-active-link-hover-border-color'] || '#ddd';
v['$nav-pills-border-radius'] = u['$nav-pills-border-radius'] || v['$border-radius'];
v['$nav-pills-active-link-color'] = u['$nav-pills-active-link-color'] || v['$component-active-color'];
v['$nav-pills-active-link-bg'] = u['$nav-pills-active-link-bg'] || v['$component-active-bg']; // Pagination
v['$pagination-padding-x'] = u['$pagination-padding-x'] || '.75rem';
v['$pagination-padding-y'] = u['$pagination-padding-y'] || '.5rem';
v['$pagination-padding-x-sm'] = u['$pagination-padding-x-sm'] || '.5rem';
v['$pagination-padding-y-sm'] = u['$pagination-padding-y-sm'] || '.25rem';
v['$pagination-padding-x-lg'] = u['$pagination-padding-x-lg'] || '1.5rem';
v['$pagination-padding-y-lg'] = u['$pagination-padding-y-lg'] || '.75rem';
v['$pagination-line-height'] = u['$pagination-line-height'] || '1.25';
v['$pagination-color'] = u['$pagination-color'] || v['$link-color'];
v['$pagination-bg'] = u['$pagination-bg'] || v['$white'];
v['$pagination-border-width'] = u['$pagination-border-width'] || v['$border-width'];
v['$pagination-border-color'] = u['$pagination-border-color'] || '#ddd';
v['$pagination-hover-color'] = u['$pagination-hover-color'] || v['$link-hover-color'];
v['$pagination-hover-bg'] = u['$pagination-hover-bg'] || v['$gray-lighter'];
v['$pagination-hover-border'] = u['$pagination-hover-border'] || '#ddd';
v['$pagination-active-color'] = u['$pagination-active-color'] || v['$white'];
v['$pagination-active-bg'] = u['$pagination-active-bg'] || v['$brand-primary'];
v['$pagination-active-border'] = u['$pagination-active-border'] || v['$brand-primary'];
v['$pagination-disabled-color'] = u['$pagination-disabled-color'] || v['$gray-light'];
v['$pagination-disabled-bg'] = u['$pagination-disabled-bg'] || v['$white'];
v['$pagination-disabled-border'] = u['$pagination-disabled-border'] || '#ddd'; // Jumbotron
v['$jumbotron-padding'] = u['$jumbotron-padding'] || '2rem';
v['$jumbotron-bg'] = u['$jumbotron-bg'] || v['$gray-lighter']; // Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.
v['$state-success-text'] = u['$state-success-text'] || '#3c763d';
v['$state-success-bg'] = u['$state-success-bg'] || '#dff0d8';
v['$state-success-border'] = u['$state-success-border'] || (0, _color.default)(v['$state-success-bg']).darken(0.05).toString();
v['$state-info-text'] = u['$state-info-text'] || '#31708f';
v['$state-info-bg'] = u['$state-info-bg'] || '#d9edf7';
v['$state-info-border'] = u['$state-info-border'] || (0, _color.default)(v['$state-info-bg']).darken(0.07).toString();
v['$state-warning-text'] = u['$state-warning-text'] || '#8a6d3b';
v['$state-warning-bg'] = u['$state-warning-bg'] || '#fcf8e3';
v['$state-warning-border'] = u['$state-warning-border'] || (0, _color.default)(v['$state-warning-bg']).darken(0.05).toString();
v['$mark-bg'] = u['$mark-bg'] || v['$state-warning-bg'];
v['$state-danger-text'] = u['$state-danger-text'] || '#a94442';
v['$state-danger-bg'] = u['$state-danger-bg'] || '#f2dede';
v['$state-danger-border'] = u['$state-danger-border'] || (0, _color.default)(v['$state-danger-bg']).darken(0.05).toString(); // Cards
v['$card-spacer-x'] = u['$card-spacer-x'] || '1.25rem';
v['$card-spacer-y'] = u['$card-spacer-y'] || '.75rem';
v['$card-border-width'] = u['$card-border-width'] || '1px';
v['$card-border-radius'] = u['$card-border-radius'] || v['$border-radius'];
v['$card-border-color'] = u['$card-border-color'] || (0, _color.default)(v['$black']).alpha(0.125).toString();
v['$card-border-radius-inner'] = u['$card-border-radius-inner'] || "calc(".concat(v['$card-border-radius'], " - ").concat(v['$card-border-width'], ")");
v['$card-cap-bg'] = u['$card-cap-bg'] || v['$gray-lightest'];
v['$card-bg'] = u['$card-bg'] || v['$white'];
v['$card-link-hover-color'] = u['$card-link-hover-color'] || v['$white'];
v['$card-img-overlay-padding'] = u['$card-img-overlay-padding'] || '1.25rem';
detectedUnit = detectUnit(v['$grid-gutter-width']);
v['$card-group-margin'] = u['$card-group-margin'] || rmUnit(v['$grid-gutter-width'], detectedUnit) / 2 + detectedUnit;
v['$card-deck-margin'] = u['$card-deck-margin'] || v['$card-group-margin'];
v['$card-columns-count-md'] = u['$card-columns-count-md'] || '2';
v['$card-columns-gap-md'] = u['$card-columns-gap-md'] || '1rem';
v['$card-columns-margin-md'] = u['$card-columns-margin-md'] || v['$card-spacer-y'];
v['$card-columns-count-lg'] = u['$card-columns-count-lg'] || '2';
v['$card-columns-gap-lg'] = u['$card-columns-gap-lg'] || '1.15rem';
v['$card-columns-margin-lg'] = u['$card-columns-margin-lg'] || v['$card-spacer-y'];
v['$card-columns-count-xl'] = u['$card-columns-count-xl'] || '3';
v['$card-columns-gap-xl'] = u['$card-columns-gap-xl'] || '1.25rem';
v['$card-columns-margin-xl'] = u['$card-columns-margin-xl'] || v['$card-spacer-y'];
v['$card-columns-count-xxl'] = u['$card-columns-count-xxl'] || '4';
v['$card-columns-gap-xxl'] = u['$card-columns-gap-xxl'] || '1.25rem';
v['$card-columns-margin-xxl'] = u['$card-columns-margin-xxl'] || v['$card-spacer-y']; // Tooltips
v['$tooltip-font-family'] = u['$tooltip-font-family'] || v['$font-family-base'];
v['$tooltip-font-size'] = u['$tooltip-font-size'] || '.875rem';
v['$tooltip-font-weight'] = u['$tooltip-font-weight'] || '400';
v['$tooltip-max-width'] = u['$tooltip-max-width'] || '200px';
v['$tooltip-color'] = u['$tooltip-color'] || v['$white'];
v['$tooltip-bg'] = u['$tooltip-bg'] || v['$black'];
v['$tooltip-border-radius'] = u['$tooltip-border-radius'] || v['$border-radius'];
v['$tooltip-opacity'] = u['$tooltip-opacity'] || '.9';
v['$tooltip-padding-y'] = u['$tooltip-padding-y'] || '.25rem';
v['$tooltip-padding-x'] = u['$tooltip-padding-x'] || '.5rem';
v['$tooltip-margin'] = u['$tooltip-margin'] || '0';
v['$tooltip-line-height'] = u['$tooltip-line-height'] || '1.5';
v['$tooltip-arrow-width'] = u['$tooltip-arrow-width'] || '.8rem';
v['$tooltip-arrow-height'] = u['$tooltip-arrow-height'] || '.4rem';
v['$tooltip-arrow-color'] = u['$tooltip-arrow-color'] || v['$tooltip-bg']; // Popovers
v['$popover-inner-padding'] = u['$popover-inner-padding'] || '1px';
v['$popover-bg'] = u['$popover-bg'] || v['$white'];
v['$popover-max-width'] = u['$popover-max-width'] || '276px';
v['$popover-border-width'] = u['$popover-border-width'] || v['$border-width'];
v['$popover-border-color'] = u['$popover-border-color'] || (0, _color.default)(v['$black']).alpha(0.2).toString();
v['$popover-box-shadow'] = u['$popover-box-shadow'] || "0 5px 10px ".concat((0, _color.default)(v['$black']).alpha(0.2).toString());
v['$popover-title-bg'] = u['$popover-title-bg'] || (0, _color.default)(v['$popover-bg']).darken(0.03).toString();
v['$popover-title-padding-x'] = u['$popover-title-padding-x'] || '14px';
v['$popover-title-padding-y'] = u['$popover-title-padding-y'] || '8px';
v['$popover-content-padding-x'] = u['$popover-content-padding-x'] || '14px';
v['$popover-content-padding-y'] = u['$popover-content-padding-y'] || '9px';
v['$popover-arrow-width'] = u['$popover-arrow-width'] || '10px';
v['$popover-arrow-color'] = u['$popover-arrow-color'] || v['$popover-bg'];
detectedUnit = detectUnit(v['$popover-arrow-width']);
v['$popover-arrow-outer-width'] = u['$popover-arrow-outer-width'] || rmUnit(v['$popover-arrow-width'], detectedUnit) + 1 + detectedUnit;
v['$popover-arrow-outer-color'] = u['$popover-arrow-outer-color'] || (0, _color.default)(v['$popover-border-color']).fade(0.5).toString(); // Badges
v['$badge-default-bg'] = u['$badge-default-bg'] || v['$gray-light'];
v['$badge-primary-bg'] = u['$badge-primary-bg'] || v['$brand-primary'];
v['$badge-success-bg'] = u['$badge-success-bg'] || v['$brand-success'];
v['$badge-info-bg'] = u['$badge-info-bg'] || v['$brand-info'];
v['$badge-warning-bg'] = u['$badge-warning-bg'] || v['$brand-warning'];
v['$badge-danger-bg'] = u['$badge-danger-bg'] || v['$brand-danger'];
v['$badge-color'] = u['$badge-color'] || v['$white'];
v['$badge-link-hover-color'] = u['$badge-link-hover-color'] || v['$white'];
v['$badge-font-size'] = u['$badge-font-size'] || '75%';
v['$badge-font-weight'] = u['$badge-font-weight'] || v['$font-weight-bold'];
v['$badge-padding-x'] = u['$badge-padding-x'] || '.4em';
v['$badge-padding-y'] = u['$badge-padding-y'] || '.25em';
v['$badge-pill-padding-x'] = u['$badge-pill-padding-x'] || '.6em'; // Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
v['$badge-pill-border-radius'] = u['$badge-pill-border-radius'] || '10rem'; // Modals
// Padding applied to the modal body
v['$modal-inner-padding'] = u['$modal-inner-padding'] || '15px';
v['$modal-dialog-margin'] = u['$modal-dialog-margin'] || '10px';
v['$modal-dialog-sm-up-margin-y'] = u['$modal-dialog-sm-up-margin-y'] || '30px';
v['$modal-title-line-height'] = u['$modal-title-line-height'] || v['$line-height-base'];
v['$modal-content-bg'] = u['$modal-content-bg'] || v['$white'];
v['$modal-content-border-color'] = u['$modal-content-border-color'] || (0, _color.default)(v['$black']).alpha(0.2).toString();
v['$modal-content-border-width'] = u['$modal-content-border-width'] || v['$border-width'];
v['$modal-content-xs-box-shadow'] = u['$modal-content-xs-box-shadow'] || "0 3px 9px ".concat((0, _color.default)(v['$black']).alpha(0.5).toString());
v['$modal-content-sm-up-box-shadow'] = u['$modal-content-sm-up-box-shadow'] || "0 5px 15px ".concat((0, _color.default)(v['$black']).alpha(0.5).toString());
v['$modal-backdrop-bg'] = u['$modal-backdrop-bg'] || v['$black'];
v['$modal-backdrop-opacity'] = u['$modal-backdrop-opacity'] || '.5';
v['$modal-header-border-color'] = u['$modal-header-border-color'] || v['$gray-lighter'];
v['$modal-footer-border-color'] = u['$modal-footer-border-color'] || v['$modal-header-border-color'];
v['$modal-header-border-width'] = u['$modal-header-border-width'] || v['$modal-content-border-width'];
v['$modal-footer-border-width'] = u['$modal-footer-border-width'] || v['$modal-header-border-width'];
v['$modal-header-padding'] = u['$modal-header-padding'] || '15px';
v['$modal-lg'] = u['$modal-lg'] || '800px';
v['$modal-md'] = u['$modal-md'] || '500px';
v['$modal-sm'] = u['$modal-sm'] || '300px';
v['$modal-transition'] = u['$modal-transition'] || 'transform .3s ease-out'; // Alerts
//
// Define alert colors, border radius, and padding.
v['$alert-padding-x'] = u['$alert-padding-x'] || '1.25rem';
v['$alert-padding-y'] = u['$alert-padding-y'] || '.75rem';
v['$alert-margin-bottom'] = u['$alert-margin-bottom'] || v['$spacer-y'];
v['$alert-border-radius'] = u['$alert-border-radius'] || v['$border-radius'];
v['$alert-link-font-weight'] = u['$alert-link-font-weight'] || v['$font-weight-bold'];
v['$alert-border-width'] = u['$alert-border-width'] || v['$border-width'];
v['$alert-success-bg'] = u['$alert-success-bg'] || v['$state-success-bg'];
v['$alert-success-text'] = u['$alert-success-text'] || v['$state-success-text'];
v['$alert-success-border'] = u['$alert-success-border'] || v['$state-success-border'];
v['$alert-info-bg'] = u['$alert-info-bg'] || v['$state-info-bg'];
v['$alert-info-text'] = u['$alert-info-text'] || v['$state-info-text'];
v['$alert-info-border'] = u['$alert-info-border'] || v['$state-info-border'];
v['$alert-warning-bg'] = u['$alert-warning-bg'] || v['$state-warning-bg'];
v['$alert-warning-text'] = u['$alert-warning-text'] || v['$state-warning-text'];
v['$alert-warning-border'] = u['$alert-warning-border'] || v['$state-warning-border'];
v['$alert-danger-bg'] = u['$alert-danger-bg'] || v['$state-danger-bg'];
v['$alert-danger-text'] = u['$alert-danger-text'] || v['$state-danger-text'];
v['$alert-danger-border'] = u['$alert-danger-border'] || v['$state-danger-border']; // Progress bars
v['$progress-height'] = u['$progress-height'] || '1rem';
v['$progress-font-size'] = u['$progress-font-size'] || '.75rem';
v['$progress-bg'] = u['$progress-bg'] || v['$gray-lighter'];
v['$progress-border-radius'] = u['$progress-border-radius'] || v['$border-radius'];
v['$progress-box-shadow'] = u['$progress-box-shadow'] || "inset 0 .1rem .1rem ".concat((0, _color.default)(v['$black']).alpha(0.1).toString());
v['$progress-bar-color'] = u['$progress-bar-color'] || v['$white'];
v['$progress-bar-bg'] = u['$progress-bar-bg'] || v['$brand-primary'];
v['$progress-bar-animation-timing'] = u['$progress-bar-animation-timing'] || '1s linear infinite'; // List group
v['$list-group-color'] = u['$list-group-color'] || v['$body-color'];
v['$list-group-bg'] = u['$list-group-bg'] || v['$white'];
v['$list-group-border-color'] = u['$list-group-border-color'] || (0, _color.default)(v['$black']).alpha(0.125).toString();
v['$list-group-border-width'] = u['$list-group-border-width'] || v['$border-width'];
v['$list-group-border-radius'] = u['$list-group-border-radius'] || v['$border-radius'];
v['$list-g