HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<p>Save that content into a .json file and you can upload in into the http://bootswatchr.com/ site</p>
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
@gray-base: #000000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
//additional Grays not defined in bootstrap but required to fit our color profile.
@brand-primary: #0e94a6; // #337ab7
@brand-success: #4CAF51;
@brand-info: #B6E3EB;
@brand-warning: #FBC02D;
@brand-danger: #D32F2F;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #FAFAFA;
//** Global text color on `<body>`.
@text-color: #434343;
//** Global textual link color.
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: lighten(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
//import font
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,400,500,700');
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
@font-family-serif: "Roboto", Helvetica, Arial, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: 'Roboto Mono', monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
//** TO_DO create additional classes for changes in text-transform && font-weight within H elements
@font-size-h1: floor((@font-size-base * 1.5)); // ~24px
@font-size-h2: floor((@font-size-base * 1.25)); // ~20px
@font-size-h3: ceil((@font-size-base * 1)); // ~16px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px Unused (Unused styles can be used for additional font stlyes already defined outside of H level elements)
@font-size-h5: @font-size-base; // Unused
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px unused
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 100;
@headings-line-height: 1.5em;
@headings-color: #424242;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory. (Need to redefine this section based on our own font EN)
@icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular";
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 1px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 0.5em;
@padding-base-horizontal: 0.625em;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 2px;
@border-radius-large: 6px;
@border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 1.25em;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 0.625em;
//** Default background color used for all tables.
@table-bg: transparent;
//** Background color used for `.table-striped`.
@table-bg-accent: #F2F2F2;
//** Background color used for `.table-hover`.
@table-bg-hover: #E7E7E7;
@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
@table-border-color: #e0e0e0;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@btn-default-color: #333;
@btn-default-bg: #fff;
@btn-default-border: #ccc;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-info-color: #424242;
@btn-info-bg: #bbdefb;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-link-disabled-color: @gray-light;
//== Forms
//
//##
//** `<input>` background color
@input-bg: #fff;
//** `<input disabled>` background color
@input-bg-disabled: @gray-lighter;
//** Text color for `<input>`s
@input-color: @gray;
//** `<input>` border color
@input-border: #BDBDBD;
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
@input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
//** Border color for inputs on focus
@input-border-focus: #0C7C84;
//** Placeholder text color
@input-color-placeholder: #9E9E9E;
//** Default `.form-control` height
@input-height-base: 1.875em;
//** Large `.form-control` height
@input-height-large: 2em;
//** Small `.form-control` height
@input-height-small: 1.5em;
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
//** Background color for textual input addons
@input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
@dropdown-bg: #fff;
//** Dropdown menu `border-color`.
@dropdown-border: @brand-primary;
//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #0E94A6;
//** Divider color for between dropdown items.
@dropdown-divider-bg: #E0E0E0;
//** Dropdown link text color.
@dropdown-link-color: #616161;
//** Hover color for dropdown links.
@dropdown-link-hover-color: #ffffff;
//** Hover background for dropdown links.
@dropdown-link-hover-bg: #BDBDBD;
//** Active dropdown menu item text color.
@dropdown-link-active-color: @component-active-color;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @gray-light;
//** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light;
//** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000;
//-- 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.
//
// Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal: 1040;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 20px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
//== Navbar
//
//##
// Basics of a navbar
@navbar-height: 48px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: 0px;
@navbar-padding-horizontal: 2.5em;
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: @gray-base;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #bdbdbd;
@navbar-default-link-hover-color: #ffffff;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #ffffff;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: #424242;
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: #333333;
@navbar-inverse-link-active-color: #ffffff;
@navbar-inverse-link-active-bg: #333333;
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
//== Navs
//
//##
//=== Shared nav styles
@nav-link-padding: 1.5em 1.25em;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
//== Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
//== Pagination
//
//##
@pagination-color: @link-color;
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-hover-color: #fff;
@pagination-hover-bg: #13b8d3;
@pagination-hover-border: #13b8d3;
@pagination-active-color: #fff;
@pagination-active-bg: @brand-primary;
@pagination-active-border: @brand-primary;
@pagination-disabled-color: @gray-light;
@pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd;
//== Pager
//
//##
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @pagination-disabled-color;
//== Jumbotron
//
//##
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: #fff;
@state-success-bg: #4caf51;
@state-success-border: #4caf51;
@state-info-text: #424242;
@state-info-bg: #d9edf7;
@state-info-border: #d9edf7;
@state-warning-text: #424242;
@state-warning-bg: #ffeb3b;
@state-warning-border: #ffeb3b;
@state-danger-text: #f5f5f5;
@state-danger-bg: #d32f2f;
@state-danger-border: #d32f2f;
//== Tooltips
//
//##
//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: .9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
//== Popovers
//
//##
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: #0c7c84;
//** Popover fallback border color
@popover-fallback-border-color: #ccc;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//
//## (these are not currently defined within the system. Need to figure this one out.)
//** Default label background color
@label-default-bg: @gray-light;
//** Primary label background color
@label-primary-bg: @brand-primary;
//** Success label background color
@label-success-bg: @brand-success;
//** Info label background color
@label-info-bg: @brand-info;
//** Warning label background color
@label-warning-bg: @brand-warning;
//** Danger label background color
@label-danger-bg: @brand-danger;
//** Default label text color
@label-color: #fff;
//** Default text color of a linked label
@label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
@modal-inner-padding: 15px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
//** Modal title line-height
@modal-title-line-height: @line-height-base;
//** Background color of modal content area
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
@modal-backdrop-bg: #000;
//** Modal backdrop opacity
@modal-backdrop-opacity: .5;
//** Modal header border color
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
//== Alerts
//
//## Define alert colors, border radius, and padding.
@alert-padding: 1em;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: #f5f5f5;
//** Progress bar text color
@progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** Success progress bar color
@progress-bar-success-bg: @brand-success;
//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
//** Info progress bar color
@progress-bar-info-bg: @brand-info;
//== List group
//
//##
//** Background color on `.list-group-item`
@list-group-bg: #fff;
//** `.list-group-item` border color
@list-group-border: #ddd;
//** List group border radius
@list-group-border-radius: @border-radius-base;
//** Background color of single list items on hover
@list-group-hover-bg: #f5f5f5;
//** Text color of active list items
@list-group-active-color: @component-active-color;
//** Background color of active list items
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333;
//== Panels
//
//##
@panel-bg: #F5F5F5;
@panel-body-padding: 2em 1.25em 1.25em 1.25em;
@panel-heading-padding: 2em 1.25em;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: 0px;
//** Border color for elements within panels
@panel-inner-border: #e0e0e0;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
@thumbnail-padding: 4px;
//** Thumbnail background color
@thumbnail-bg: @body-bg;
//** Thumbnail border color
@thumbnail-border: #ddd;
//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base;
//** Custom text color for thumbnail captions
@thumbnail-caption-color: @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px;
//== Wells
//
//##
@well-bg: #f5f5f5;
@well-border: darken(@well-bg, 7%);
//== Badges
//
//##
@badge-color: #fff;
//** Linked badge text color on hover
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
//** Badge text color in active nav link
@badge-active-color: @link-color;
//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
//== Breadcrumbs
//
//##
@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
//** Breadcrumb background color
@breadcrumb-bg: #f5f5f5;
//** Breadcrumb text color
@breadcrumb-color: @brand-primary;
//** Text color of current page in the breadcrumb
@breadcrumb-active-color: #424242;
//** Textual separator for between breadcrumb elements
@breadcrumb-separator: "/"; // (Will need to change this to be the chevron font-icon)
//== Carousel
//
//##
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
//== Close
//
//##
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
//== Code
//
//##
@code-color: #424242;
@code-bg: #fff;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
//== Type
//
//##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @gray-light;
//** Blockquote small color
@blockquote-small-color: @gray-light;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @gray-lighter;
//** Page header border color
@page-header-border-color: @gray-lighter;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//** Horizontal line color.
@hr-border: @gray-lighter;
{
"name": "EN-HLX-BS",
"version": "bootstrap-3.3.1",
"slug": "0c08abaf",
"useResponsive": false,
"useRTL": false,
"excludeIcons": false,
"appendVars": false,
"createdDate": "2017-05-08T16:25:52.793Z",
"lastEdited": "2017-05-19T16:27:21.750Z",
"variables": "//\n// Variables\n// --------------------------------------------------\n\n\n//== Colors\n//\n//## Gray and brand colors for use across Bootstrap.\n\[email protected]: #000000;\[email protected]: lighten(@gray-base, 13.5%); // #222\[email protected]: lighten(@gray-base, 20%); // #333\[email protected]: lighten(@gray-base, 33.5%); // #555\[email protected]: lighten(@gray-base, 46.7%); // #777\[email protected]: lighten(@gray-base, 93.5%); // #eee\n\n//additional Grays not defined in bootstrap but required to fit our color profile.\n\n\n\[email protected]: #0e94a6; // #337ab7\[email protected]: #4CAF51;\[email protected]: #B6E3EB;\[email protected]: #FBC02D;\[email protected]: #D32F2F;\n\n\n//== Scaffolding\n//\n//## Settings for some of the most global styles.\n\n//** Background color for `<body>`.\[email protected]: #FAFAFA;\n//** Global text color on `<body>`.\[email protected]: #434343;\n\n//** Global textual link color.\[email protected]: @brand-primary;\n//** Link hover color set via `darken()` function.\[email protected]: lighten(@link-color, 15%);\n//** Link hover decoration.\[email protected]: underline;\n\n\n//== Typography\n//\n//## Font, line-height, and color for body text, headings, and more.\n\n//import font\n\[email protected] url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');\[email protected] url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,400,500,700');\n\[email protected]: \"Roboto\", Helvetica, Arial, sans-serif;\[email protected]: \"Roboto\", Helvetica, Arial, serif;\n//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.\[email protected]: 'Roboto Mono', monospace;\[email protected]: @font-family-sans-serif;\n\[email protected]: 16px;\[email protected]: ceil((@font-size-base * 1.25)); // ~18px\[email protected]: ceil((@font-size-base * 0.85)); // ~12px\n\n//** TO_DO create additional classes for changes in text-transform && font-weight within H elements\n\[email protected]: floor((@font-size-base * 1.5)); // ~24px\[email protected]: floor((@font-size-base * 1.25)); // ~20px\[email protected]: ceil((@font-size-base * 1)); // ~16px\[email protected]: ceil((@font-size-base * 1.25)); // ~18px Unused (Unused styles can be used for additional font stlyes already defined outside of H level elements)\[email protected]: @font-size-base; // Unused\[email protected]: ceil((@font-size-base * 0.85)); // ~12px unused\n\n//** Unit-less `line-height` for use in components like buttons.\[email protected]: 1.428571429; // 20/14\n//** Computed \"line-height\" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.\[email protected]: floor((@font-size-base * @line-height-base)); // ~20px\n\n//** By default, this inherits from the `<body>`.\[email protected]: inherit;\[email protected]: 100;\[email protected]: 1.5em;\[email protected]: #424242;\n\n\n//== Iconography\n//\n//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.\n\n//** Load fonts from this directory. (Need to redefine this section based on our own font EN)\[email protected]: \"../fonts/\";\n//** File name for all font files.\[email protected]: \"glyphicons-halflings-regular\";\n//** Element ID within SVG icon file.\[email protected]: \"glyphicons_halflingsregular\";\n\n\n//== Components\n//\n//## Define common padding and border radius sizes and more. Values based on 1px text and 1.428 line-height (~20px to start).\n\[email protected]: 0.5em;\[email protected]: 0.625em;\n\[email protected]: 10px;\[email protected]: 16px;\n\[email protected]: 5px;\[email protected]: 10px;\n\[email protected]: 1px;\[email protected]: 5px;\n\[email protected]: 1.33;\[email protected]: 1.5;\n\[email protected]: 2px;\[email protected]: 6px;\[email protected]: 3px;\n\n//** Global color for active items (e.g., navs or dropdowns).\[email protected]: #fff;\n//** Global background color for active items (e.g., navs or dropdowns).\[email protected]: @brand-primary;\n\n//** Width of the `border` for generating carets that indicator dropdowns.\[email protected]: 4px;\n//** Carets increase slightly in size for larger components.\[email protected]: 5px;\n\n\n//== Tables\n//\n//## Customizes the `.table` component with basic values, each used across all table variations.\n\n//** Padding for `<th>`s and `<td>`s.\[email protected]: 1.25em;\n//** Padding for cells in `.table-condensed`.\[email protected]: 0.625em;\n\n//** Default background color used for all tables.\[email protected]e-bg: transparent;\n//** Background color used for `.table-striped`.\[email protected]: #F2F2F2;\n//** Background color used for `.table-hover`.\[email protected]: #E7E7E7;\[email protected]: @table-bg-hover;\n\n//** Border color for table and cell borders.\[email protected]: #e0e0e0;\n\n\n//== Buttons\n//\n//## For each of Bootstrap's buttons, define text, background and border color.\n\[email protected]: normal;\n\[email protected]: #333;\[email protected]: #fff;\[email protected]: #ccc;\n\[email protected]: #fff;\[email protected]: @brand-primary;\[email protected]: darken(@btn-primary-bg, 5%);\n\[email protected]: #fff;\[email protected]: @brand-success;\[email protected]: darken(@btn-success-bg, 5%);\n\[email protected]: #424242;\[email protected]: #bbdefb;\[email protected]: darken(@btn-info-bg, 5%);\n\[email protected]: #fff;\[email protected]: @brand-warning;\[email protected]: darken(@btn-warning-bg, 5%);\n\[email protected]: #fff;\[email protected]: @brand-danger;\[email protected]: darken(@btn-danger-bg, 5%);\n\[email protected]: @gray-light;\n\n\n//== Forms\n//\n//##\n\n//** `<input>` background color\[email protected]: #fff;\n//** `<input disabled>` background color\[email protected]: @gray-lighter;\n\n//** Text color for `<input>`s\[email protected]: @gray;\n//** `<input>` border color\[email protected]: #BDBDBD;\n\n// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4\n//** Default `.form-control` border radius\[email protected]: @border-radius-base;\n//** Large `.form-control` border radius\[email protected]: @border-radius-large;\n//** Small `.form-control` border radius\[email protected]: @border-radius-small;\n\n//** Border color for inputs on focus\[email protected]: #0C7C84;\n\n//** Placeholder text color\[email protected]: #9E9E9E;\n\n//** Default `.form-control` height\[email protected]: 1.875em;\n//** Large `.form-control` height\[email protected]: 2em;\n//** Small `.form-control` height\[email protected]: 1.5em;\n\[email protected]: @gray-dark;\[email protected]: #e5e5e5;\n\n//** Background color for textual input addons\[email protected]: @gray-lighter;\n//** Border color for textual input addons\[email protected]: @input-border;\n\n//** Disabled cursor for form controls and buttons.\[email protected]: not-allowed;\n\n\n//== Dropdowns\n//\n//## Dropdown menu container and contents.\n\n//** Background for the dropdown menu.\[email protected]: #fff;\n//** Dropdown menu `border-color`.\[email protected]: @brand-primary;\n//** Dropdown menu `border-color` **for IE8**.\[email protected]: #0E94A6;\n//** Divider color for between dropdown items.\[email protected]: #E0E0E0;\n\n//** Dropdown link text color.\[email protected]: #616161;\n//** Hover color for dropdown links.\[email protected]: #ffffff;\n//** Hover background for dropdown links.\[email protected]: #BDBDBD;\n\n//** Active dropdown menu item text color.\[email protected]: @component-active-color;\n//** Active dropdown menu item background color.\[email protected]: @component-active-bg;\n\n//** Disabled dropdown menu item background color.\[email protected]: @gray-light;\n\n//** Text color for headers within dropdown menus.\[email protected]: @gray-light;\n\n//** Deprecated `@dropdown-caret-color` as of v3.1.0\[email protected]dropdown-caret-color: #000;\n\n\n//-- Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n//\n// Note: These variables are not generated into the Customizer.\n\[email protected]: 1000;\[email protected]: 1000;\[email protected]: 1060;\[email protected]: 1070;\[email protected]: 1030;\[email protected]: 1040;\n\n\n//== Media queries breakpoints\n//\n//## Define the breakpoints at which your layout will change, adapting to different screen sizes.\n\n// Extra small screen / phone\n//** Deprecated `@screen-xs` as of v3.0.1\[email protected]: 480px;\n//** Deprecated `@screen-xs-min` as of v3.2.0\[email protected]: @screen-xs;\n//** Deprecated `@screen-phone` as of v3.0.1\[email protected]: @screen-xs-min;\n\n// Small screen / tablet\n//** Deprecated `@screen-sm` as of v3.0.1\[email protected]: 768px;\[email protected]: @screen-sm;\n//** Deprecated `@screen-tablet` as of v3.0.1\[email protected]: @screen-sm-min;\n\n// Medium screen / desktop\n//** Deprecated `@screen-md` as of v3.0.1\[email protected]: 992px;\[email protected]: @screen-md;\n//** Deprecated `@screen-desktop` as of v3.0.1\[email protected]: @screen-md-min;\n\n// Large screen / wide desktop\n//** Deprecated `@screen-lg` as of v3.0.1\[email protected]: 1200px;\[email protected]: @screen-lg;\n//** Deprecated `@screen-lg-desktop` as of v3.0.1\[email protected]: @screen-lg-min;\n\n// So media queries don't overlap when required, provide a maximum\[email protected]: (@screen-sm-min - 1);\[email protected]: (@screen-md-min - 1);\[email protected]: (@screen-lg-min - 1);\n\n\n//== Grid system\n//\n//## Define your custom responsive grid.\n\n//** Number of columns in the grid.\[email protected]: 12;\n//** Padding between columns. Gets divided in half for the left and right.\[email protected]: 20px;\n// Navbar collapse\n//** Point at which the navbar becomes uncollapsed.\[email protected]: @screen-sm-min;\n//** Point at which the navbar begins collapsing.\[email protected]: (@grid-float-breakpoint - 1);\n\n\n//== Container sizes\n//\n//## Define the maximum width of `.container` for different screen sizes.\n\n// Small screen / tablet\[email protected]: (720px + @grid-gutter-width);\n//** For `@screen-sm-min` and up.\[email protected]: @container-tablet;\n\n// Medium screen / desktop\[email protected]: (940px + @grid-gutter-width);\n//** For `@screen-md-min` and up.\[email protected]: @container-desktop;\n\n// Large screen / wide desktop\[email protected]: (1140px + @grid-gutter-width);\n//** For `@screen-lg-min` and up.\[email protected]: @container-large-desktop;\n\n\n//== Navbar\n//\n//##\n\n// Basics of a navbar\[email protected]: 48px;\[email protected]: @line-height-computed;\[email protected]: 0px;\[email protected]: 2.5em;\[email protected]: ((@navbar-height - @line-height-computed) / 2);\[email protected]: 340px;\n\[email protected]: #777;\[email protected]: @gray-base;\[email protected]: darken(@navbar-default-bg, 6.5%);\n\n// Navbar links\[email protected]: #bdbdbd;\[email protected]: #ffffff;\[email protected]: transparent;\[email protected]: #ffffff;\[email protected]: darken(@navbar-default-bg, 6.5%);\[email protected]: #ccc;\[email protected]: transparent;\n\n// Navbar brand label\[email protected]: @navbar-default-link-color;\[email protected]navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);\[email protected]: transparent;\n\n// Navbar toggle\[email protected]: #ddd;\[email protected]: #888;\[email protected]: #ddd;\n\n\n// Inverted navbar\n// Reset inverted navbar basics\[email protected]: #424242;\[email protected]: #222;\[email protected]: darken(@navbar-inverse-bg, 10%);\n\n// Inverted navbar links\[email protected]: lighten(@gray-light, 15%);\[email protected]: #fff;\[email protected]: #333333;\[email protected]: #ffffff;\[email protected]: #333333;\[email protected]: #444;\[email protected]: transparent;\n\n// Inverted navbar brand label\[email protected]: @navbar-inverse-link-color;\[email protected]: #fff;\[email protected]: transparent;\n\n// Inverted navbar toggle\[email protected]: #333;\[email protected]: #fff;\[email protected]: #333;\n\n\n//== Navs\n//\n//##\n\n//=== Shared nav styles\[email protected]: 1.5em 1.25em;\[email protected]: @gray-lighter;\n\[email protected]: @gray-light;\[email protected]: @gray-light;\n\n//== Tabs\[email protected]: #ddd;\n\[email protected]: @gray-lighter;\n\[email protected]: @body-bg;\[email protected]: @gray;\[email protected]: #ddd;\n\[email protected]: #ddd;\[email protected]: @body-bg;\n\n//== Pills\[email protected]: @border-radius-base;\[email protected]: @component-active-bg;\[email protected]: @component-active-color;\n\n\n//== Pagination\n//\n//##\n\[email protected]: @link-color;\[email protected]: #fff;\[email protected]: #ddd;\n\[email protected]: #fff;\[email protected]: #13b8d3;\[email protected]: #13b8d3;\n\[email protected]: #fff;\[email protected]: @brand-primary;\[email protected]: @brand-primary;\n\[email protected]: @gray-light;\[email protected]: #fff;\[email protected]: #ddd;\n\n\n//== Pager\n//\n//##\n\[email protected]: @pagination-bg;\[email protected]: @pagination-border;\[email protected]: 15px;\n\[email protected]: @pagination-hover-bg;\n\[email protected]: @pagination-active-bg;\[email protected]: @pagination-active-color;\n\[email protected]: @pagination-disabled-color;\n\n\n//== Jumbotron\n//\n//##\n\[email protected]: 30px;\[email protected]: inherit;\[email protected]: @gray-lighter;\[email protected]: inherit;\[email protected]: ceil((@font-size-base * 1.5));\n\n\n//== Form states and alerts\n//\n//## Define colors for form feedback states and, by default, alerts.\n\[email protected]: #fff;\[email protected]: #4caf51;\[email protected]: #4caf51;\n\[email protected]: #424242;\[email protected]: #d9edf7;\[email protected]: #d9edf7;\n\[email protected]: #424242;\[email protected]: #ffeb3b;\n[email protected]: #ffeb3b;\n\[email protected]: #f5f5f5;\[email protected]: #d32f2f;\[email protected]: #d32f2f;\n\n\n//== Tooltips\n//\n//##\n\n//** Tooltip max width\[email protected]: 200px;\n//** Tooltip text color\[email protected]: #fff;\n//** Tooltip background color\[email protected]: #000;\[email protected]: .9;\n\n//** Tooltip arrow width\[email protected]: 5px;\n//** Tooltip arrow color\[email protected]: @tooltip-bg;\n\n\n//== Popovers\n//\n//##\n\n//** Popover body background color\[email protected]: #fff;\n//** Popover maximum width\[email protected]: 276px;\n//** Popover border color\[email protected]: #0c7c84;\n//** Popover fallback border color\[email protected]: #ccc;\n\n//** Popover title background color\[email protected]: darken(@popover-bg, 3%);\n\n//** Popover arrow width\[email protected]: 10px;\n//** Popover arrow color\[email protected]: @popover-bg;\n\n//** Popover outer arrow width\[email protected]: (@popover-arrow-width + 1);\n//** Popover outer arrow color\[email protected]: fadein(@popover-border-color, 5%);\n//** Popover outer arrow fallback color\[email protected]: darken(@popover-fallback-border-color, 20%);\n\n\n//== Labels\n//\n//## (these are not currently defined within the system. Need to figure this one out.)\n\n//** Default label background color\[email protected]: @gray-light;\n//** Primary label background color\[email protected]: @brand-primary;\n//** Success label background color\[email protected]: @brand-success;\n//** Info label background color\[email protected]: @brand-info;\n//** Warning label background color\[email protected]: @brand-warning;\n//** Danger label background color\[email protected]: @brand-danger;\n\n//** Default label text color\[email protected]: #fff;\n//** Default text color of a linked label\[email protected]: #fff;\n\n\n//== Modals\n//\n//##\n\n//** Padding applied to the modal body\[email protected]: 15px;\n\n//** Padding applied to the modal title\[email protected]: 15px;\n//** Modal title line-height\[email protected]: @line-height-base;\n\n//** Background color of modal content area\[email protected]: #fff;\n//** Modal content border color\[email protected]: rgba(0,0,0,.2);\n//** Modal content border color **for IE8**\[email protected]: #999;\n\n//** Modal backdrop background color\[email protected]: #000;\n//** Modal backdrop opacity\[email protected]: .5;\n//** Modal header border color\[email protected]: #e5e5e5;\n//** Modal footer border color\[email protected]: @modal-header-border-color;\n\[email protected]: 900px;\[email protected]: 600px;\[email protected]: 300px;\n\n\n//== Alerts\n//\n//## Define alert colors, border radius, and padding.\n\[email protected]: 1em;\[email protected]: @border-radius-base;\[email protected]: bold;\n\[email protected]: @state-success-bg;\[email protected]: @state-success-text;\[email protected]: @state-success-border;\n\[email protected]: @state-info-bg;\[email protected]: @state-info-text;\[email protected]: @state-info-border;\n\[email protected]: @state-warning-bg;\[email protected]: @state-warning-text;\[email protected]: @state-warning-border;\n\[email protected]: @state-danger-bg;\[email protected]: @state-danger-text;\[email protected]: @state-danger-border;\n\n\n//== Progress bars\n//\n//##\n\n//** Background color of the whole progress component\[email protected]: #f5f5f5;\n//** Progress bar text color\[email protected]: #fff;\n//** Variable for setting rounded corners on progress bar.\[email protected]: @border-radius-base;\n\n//** Default progress bar color\[email protected]: @brand-primary;\n//** Success progress bar color\[email protected]: @brand-success;\n//** Warning progress bar color\[email protected]: @brand-warning;\n//** Danger progress bar color\[email protected]: @brand-danger;\n//** Info progress bar color\[email protected]: @brand-info;\n\n\n//== List group\n//\n//##\n\n//** Background color on `.list-group-item`\[email protected]: #fff;\n//** `.list-group-item` border color\[email protected]: #ddd;\n//** List group border radius\[email protected]: @border-radius-base;\n\n//** Background color of single list items on hover\[email protected]: #f5f5f5;\n//** Text color of active list items\[email protected]: @component-active-color;\n//** Background color of active list items\[email protected]: @component-active-bg;\n//** Border color of active list elements\[email protected]: @list-group-active-bg;\n//** Text color for content within active list items\[email protected]: lighten(@list-group-active-bg, 40%);\n\n//** Text color of disabled list items\[email protected]: @gray-light;\n//** Background color of disabled list items\[email protected]: @gray-lighter;\n//** Text color for content within disabled list items\[email protected]: @list-group-disabled-color;\n\[email protected]: #555;\[email protected]: @list-group-link-color;\[email protected]: #333;\n\n\n//== Panels\n//\n//##\n\[email protected]: #F5F5F5;\[email protected]: 2em 1.25em 1.25em 1.25em;\[email protected]: 2em 1.25em;\[email protected]: @panel-heading-padding;\[email protected]: 0px;\n\n//** Border color for elements within panels\[email protected]: #e0e0e0;\[email protected]: #f5f5f5;\n\[email protected]: @gray-dark;\[email protected]: #ddd;\[email protected]: #f5f5f5;\n\[email protected]: #fff;\[email protected]: @brand-primary;\[email protected]: @brand-primary;\n\[email protected]: @state-success-text;\[email protected]: @state-success-border;\[email protected]: @state-success-bg;\n\[email protected]: @state-info-text;\[email protected]: @state-info-border;\[email protected]: @state-info-bg;\n\[email protected]: @state-warning-text;\[email protected]: @state-warning-border;\[email protected]: @state-warning-bg;\n\[email protected]: @state-danger-text;\[email protected]: @state-danger-border;\[email protected]: @state-danger-bg;\n\n\n//== Thumbnails\n//\n//##\n\n//** Padding around the thumbnail image\[email protected]: 4px;\n//** Thumbnail background color\[email protected]: @body-bg;\n//** Thumbnail border color\[email protected]: #ddd;\n//** Thumbnail border radius\[email protected]: @border-radius-base;\n\n//** Custom text color for thumbnail captions\[email protected]: @text-color;\n//** Padding around the thumbnail caption\[email protected]: 9px;\n\n\n//== Wells\n//\n//##\n\[email protected]: #f5f5f5;\[email protected]: darken(@well-bg, 7%);\n\n\n//== Badges\n//\n//##\n\[email protected]: #fff;\n//** Linked badge text color on hover\[email protected]: #fff;\[email protected]: @gray-light;\n\n//** Badge text color in active nav link\[email protected]: @link-color;\n//** Badge background color in active nav link\[email protected]: #fff;\n\[email protected]: bold;\[email protected]: 1;\[email protected]: 10px;\n\n\n//== Breadcrumbs\n//\n//##\n\[email protected]: 8px;\[email protected]: 15px;\n//** Breadcrumb background color\[email protected]: #f5f5f5;\n//** Breadcrumb text color\[email protected]: @brand-primary;\n//** Text color of current page in the breadcrumb\[email protected]: #424242;\n//** Textual separator for between breadcrumb elements\[email protected]: \"/\"; // (Will need to change this to be the chevron font-icon)\n\n\n//== Carousel\n//\n//##\n\[email protected]: 0 1px 2px rgba(0,0,0,.6);\n\[email protected]: #fff;\[email protected]: 15%;\[email protected]: .5;\[email protected]: 20px;\n\[email protected]: #fff;\[email protected]: #fff;\n\[email protected]: #fff;\n\n\n//== Close\n//\n//##\n\[email protected]: bold;\[email protected]: #000;\[email protected]: 0 1px 0 #fff;\n\n\n//== Code\n//\n//##\n\[email protected]: #424242;\[email protected]: #fff;\n\[email protected]: #fff;\[email protected]: #333;\n\[email protected]: #f5f5f5;\[email protected]: @gray-dark;\[email protected]: #ccc;\[email protected]: 340px;\n\n\n//== Type\n//\n//##\n\n//** Horizontal offset for forms and lists.\[email protected]: 180px;\n//** Text muted color\[email protected]: @gray-light;\n//** Abbreviations and acronyms border color\[email protected]: @gray-light;\n//** Headings small color\[email protected]: @gray-light;\n//** Blockquote small color\[email protected]: @gray-light;\n//** Blockquote font size\[email protected]: (@font-size-base * 1.25);\n//** Blockquote border color\[email protected]: @gray-lighter;\n//** Page header border color\[email protected]: @gray-lighter;\n//** Width of horizontal description list titles\[email protected]: @component-offset-horizontal;\n//** Horizontal line color.\[email protected]: @gray-lighter;",
"_id": "9DDC9F2D-07A7-402A-B5AC-3275C31B977D",
"_rev": "1051-ee16444680e9436e80bade57a8e9e52a"
}
Also see: Tab Triggers