3 // --------------------------------------------------
7 //## Gray and brand colors for use across Bootstrap.
11 // -------------------------
19 // -------------------------
27 $magentaDark: #aa00aa;
39 $gray-darker: $grayDark;
40 $gray-dark: $grayDark;
41 $gray-light: $grayLight;
42 $gray-lighter: $grayLight;
44 $brand-primary: $gray;
45 $brand-primary-bg: $cyanDark;
46 $brand-success: $greenDark;
48 $brand-warning: $magentaDark;
49 $brand-danger: $redDark;
53 //## Settings for some of the most global styles.
55 //** Background color for `<body>`.
57 //** Global text color on `<body>`.
58 $text-color: $gray-light;
60 //** Global textual link color.
61 $link-color: $brand-primary;
62 //** Link hover color set via `darken()` function.
63 $link-hover-color: $white;
64 //** Link hover decoration.
65 $link-hover-decoration: none;
69 //## Font, line-height, and color for body text, headings, and more.
71 $font-family-sans-serif: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
72 $font-family-serif: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
73 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
74 $font-family-monospace: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
75 $font-family-base: $font-family-sans-serif;
78 $font-size-base: 18px;
79 $font-size-large: $font-size-base;
80 $font-size-small: $font-size-base;
82 $font-size-h1: $font-size-base;
83 $font-size-h2: $font-size-base;
84 $font-size-h3: $font-size-base;
85 $font-size-h4: $font-size-base;
86 $font-size-h5: $font-size-base;
87 $font-size-h6: $font-size-base;
89 //** Unit-less `line-height` for use in components like buttons.
90 $baseLineHeight: 19px;
91 $line-height-base: $baseLineHeight;
92 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
93 $line-height-computed: $line-height-base;
95 //** By default, this inherits from the `<body>`.
96 $headings-font-family: inherit;
97 $headings-font-weight: normal;
98 $headings-line-height: $line-height-base;
99 $headings-color: inherit;
102 $halfbaseLineHeight: ($baseLineHeight / 2);
104 $baseLineWidth: ($baseLineHeight / 2);
105 $halfSpace: ($baseWidth / 2);
106 $lhsNB: ($baseWidth / 2 + 1);
107 $rhsNB: ($baseWidth / 2 - 1);
108 $lhs: ($lhsNB - ($borderWidth));
109 $rhs: ($rhsNB - ($borderWidth / 2));
110 $tsNB: ($baseLineHeight / 2);
112 $ts: ($tsNB - ($borderWidth / 2));
118 //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
120 //** Load fonts from this directory.
121 $icon-font-path: "../fonts/";
122 //** File name for all font files.
123 $icon-font-name: "glyphicons-halflings-regular";
124 //** Element ID within SVG icon file.
125 $icon-font-svg-id: "glyphicons_halflingsregular";
129 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
131 $padding-base-vertical: 0px;
132 $padding-base-horizontal: 0px;
134 $padding-large-vertical: 0px;
135 $padding-large-horizontal: $halfSpace;
137 $padding-small-vertical: 0px;
138 $padding-small-horizontal: 0px;
140 $padding-xs-vertical: 0px;
141 $padding-xs-horizontal: 0px;
143 $line-height-large: $baseLineHeight;
144 $line-height-small: $baseLineHeight;
146 $border-radius-base: 0;
147 $border-radius-large: 0;
148 $border-radius-small: 0;
150 //** Global color for active items (e.g., navs or dropdowns).
151 $component-active-color: $white;
152 //** Global background color for active items (e.g., navs or dropdowns).
153 $component-active-bg: $black;
155 //** Width of the `border` for generating carets that indicator dropdowns.
156 $caret-width-base: 4px;
157 //** Carets increase slightly in size for larger components.
158 $caret-width-large: 5px;
162 //## Customizes the `.table` component with basic values, each used across all table variations.
164 //** Padding for `<th>`s and `<td>`s.
165 $table-cell-padding: $ts $rhs $bs $lhs;
166 //** Padding for cells in `.table-condensed`.
167 $table-condensed-cell-padding: $ts $rhs $bs $lhs;
169 //** Default background color used for all tables.
170 $table-bg: transparent;
171 //** Background color used for `.table-striped`.
172 $table-bg-accent: $black;
173 //** Background color used for `.table-hover`.
174 $table-bg-hover: #f5f5f5;
175 $table-bg-active: $table-bg-hover;
177 //** Border color for table and cell borders.
178 $table-border-color: $gray;
182 //## For each of Bootstrap's buttons, define text, background and border color.
184 $btn-font-weight: normal;
186 $btn-default-color: $black;
187 $btn-default-bg: $grayLight;
188 $btn-default-border: $grayLight;
190 $btn-primary-color: $black;
191 $btn-primary-bg: $cyanDark;
192 $btn-primary-border: $grayLight;
194 $btn-success-color: #fff;
195 $btn-success-bg: $brand-success;
196 $btn-success-border: $btn-success-bg;
198 $btn-info-color: #fff;
199 $btn-info-bg: $brand-info;
200 $btn-info-border: $btn-info-bg;
202 $btn-warning-color: #fff;
203 $btn-warning-bg: $brand-warning;
204 $btn-warning-border: $btn-warning-bg;
206 $btn-danger-color: #fff;
207 $btn-danger-bg: $brand-danger;
208 $btn-danger-border: $btn-danger-bg;
210 $btn-link-disabled-color: $gray-light;
216 //** `<input>` background color
217 $input-bg: $cyanDark;
218 //** `<input disabled>` background color
219 $input-bg-disabled: $gray-lighter;
221 //** Text color for `<input>`s
222 $input-color: $white;
223 //** `<input>` border color
226 // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
227 //** Default `.form-control` border radius
228 // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
229 $input-border-radius: $border-radius-base;
230 //** Large `.form-control` border radius
231 $input-border-radius-large: $border-radius-large;
232 //** Small `.form-control` border radius
233 $input-border-radius-small: $border-radius-small;
235 //** Border color for inputs on focus
236 $input-border-focus: $black;
238 //** Placeholder text color
239 $input-color-placeholder: $black;
241 //** Default `.form-control` height
242 $input-height-base: $line-height-computed;
243 //** Large `.form-control` height
244 $input-height-large: $input-height-base;
245 //** Small `.form-control` height
246 $input-height-small: $input-height-base;
248 $legend-color: $gray-dark;
249 $legend-border-color: #e5e5e5;
251 //** Background color for textual input addons
252 $input-group-addon-bg: $gray-lighter;
253 //** Border color for textual input addons
254 $input-group-addon-border-color: $input-border;
256 //** Disabled cursor for form controls and buttons.
257 $cursor-disabled: not-allowed;
261 //## Dropdown menu container and contents.
263 //** Background for the dropdown menu.
265 //** Dropdown menu `border-color`.
266 $dropdown-border: rgb(0, 0, 0);
267 //** Dropdown menu `border-color` **for IE8**.
268 $dropdown-fallback-border: #ccc;
269 //** Divider color for between dropdown items.
270 $dropdown-divider-bg: $black;
272 //** Dropdown link text color.
273 $dropdown-link-color: $black;
274 //** Hover color for dropdown links.
275 $dropdown-link-hover-color: $gray;
276 //** Hover background for dropdown links.
277 $dropdown-link-hover-bg: $black;
279 //** Active dropdown menu item text color.
280 $dropdown-link-active-color: $component-active-color;
281 //** Active dropdown menu item background color.
282 $dropdown-link-active-bg: $component-active-bg;
284 //** Disabled dropdown menu item background color.
285 $dropdown-link-disabled-color: $gray-light;
287 //** Text color for headers within dropdown menus.
288 $dropdown-header-color: $black;
290 //** Deprecated `$dropdown-caret-color` as of v3.1.0
291 $dropdown-caret-color: #000;
293 //-- Z-index master list
295 // Warning: Avoid customizing these values. They're used for a bird's eye view
296 // of components dependent on the z-axis and are designed to all work together.
298 // Note: These variables are not generated into the Customizer.
300 $zindex-navbar: 1000;
301 $zindex-dropdown: 1000;
302 $zindex-popover: 1060;
303 $zindex-tooltip: 1070;
304 $zindex-navbar-fixed: 1030;
307 //== Media queries breakpoints
309 //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
311 // Extra small screen / phone
312 //** Deprecated `$screen-xs` as of v3.0.1
314 //** Deprecated `$screen-xs-min` as of v3.2.0
315 $screen-xs-min: $screen-xs;
316 //** Deprecated `$screen-phone` as of v3.0.1
317 $screen-phone: $screen-xs-min;
319 // Small screen / tablet
320 //** Deprecated `$screen-sm` as of v3.0.1
322 $screen-sm-min: $screen-sm;
323 //** Deprecated `$screen-tablet` as of v3.0.1
324 $screen-tablet: $screen-sm-min;
326 // Medium screen / desktop
327 //** Deprecated `$screen-md` as of v3.0.1
329 $screen-md-min: $screen-md;
330 //** Deprecated `$screen-desktop` as of v3.0.1
331 $screen-desktop: $screen-md-min;
333 // Large screen / wide desktop
334 //** Deprecated `$screen-lg` as of v3.0.1
336 $screen-lg-min: $screen-lg;
337 //** Deprecated `$screen-lg-desktop` as of v3.0.1
338 $screen-lg-desktop: $screen-lg-min;
340 // So media queries don't overlap when required, provide a maximum
341 $screen-xs-max: ($screen-sm-min - 1);
342 $screen-sm-max: ($screen-md-min - 1);
343 $screen-md-max: ($screen-lg-min - 1);
347 //## Define your custom responsive grid.
349 //** Number of columns in the grid.
351 //** Padding between columns. Gets divided in half for the left and right.
352 $grid-gutter-width: ($baseWidth * 2);
354 //** Point at which the navbar becomes uncollapsed.
355 $grid-float-breakpoint: $screen-sm-min;
356 //** Point at which the navbar begins collapsing.
357 $grid-float-breakpoint-max: ($grid-float-breakpoint);
361 //## Define the maximum width of `.container` for different screen sizes.
363 // Small screen / tablet
364 $container-tablet: (720px + $grid-gutter-width);
365 //** For `$screen-sm-min` and up.
366 $container-sm: $container-tablet;
368 // Medium screen / desktop
369 $container-desktop: (940px + $grid-gutter-width);
370 //** For `$screen-md-min` and up.
371 $container-md: $container-desktop;
373 // Large screen / wide desktop
374 $container-large-desktop: (1140px + $grid-gutter-width);
375 //** For `$screen-lg-min` and up.
376 $container-lg: $container-large-desktop;
382 // Basics of a navbar
384 $navbar-margin-bottom: $line-height-computed;
385 $navbar-border-radius: $border-radius-base;
386 $navbar-padding-horizontal: ($baseWidth * 2);
387 $navbar-padding-vertical: 0;
388 $navbar-collapse-max-height: 340px;
390 $navbar-default-color: $black;
391 $navbar-default-bg: $grayLight;
392 $navbar-default-border: $navbar-default-bg;
395 $navbar-default-link-color: $black;
396 $navbar-default-link-hover-color: $white;
397 $navbar-default-link-hover-bg: $black;
398 $navbar-default-link-active-color: $white;
399 $navbar-default-link-active-bg: $black;
400 $navbar-default-link-disabled-color: $gray;
401 $navbar-default-link-disabled-bg: transparent;
403 // Navbar brand label
404 $navbar-default-brand-color: $navbar-default-link-color;
405 $navbar-default-brand-hover-color: $navbar-default-brand-color;
406 $navbar-default-brand-hover-bg: transparent;
409 $navbar-default-toggle-hover-bg: #ddd;
410 $navbar-default-toggle-icon-bar-bg: #888;
411 $navbar-default-toggle-border-color: #ddd;
414 // Reset inverted navbar basics
415 $navbar-inverse-color: $gray;
416 $navbar-inverse-bg: $black;
417 $navbar-inverse-border: $navbar-inverse-bg;
419 // Inverted navbar links
420 $navbar-inverse-link-color: $gray-light;
421 $navbar-inverse-link-hover-color: $black;
422 $navbar-inverse-link-hover-bg: $grayLight;
423 $navbar-inverse-link-active-color: $white;
424 $navbar-inverse-link-active-bg: $grayDark;
425 $navbar-inverse-link-disabled-color: $gray;
426 $navbar-inverse-link-disabled-bg: transparent;
428 // Inverted navbar brand label
429 $navbar-inverse-brand-color: $navbar-inverse-link-color;
430 $navbar-inverse-brand-hover-color: #fff;
431 $navbar-inverse-brand-hover-bg: transparent;
433 // Inverted navbar toggle
434 $navbar-inverse-toggle-hover-bg: $grayLight;
435 $navbar-inverse-toggle-icon-bar-bg: #fff;
436 $navbar-inverse-toggle-border-color: #333;
442 //=== Shared nav styles
443 $nav-link-padding: 0 $baseWidth;
444 $nav-link-hover-bg: $gray-lighter;
446 $nav-disabled-link-color: $gray-light;
447 $nav-disabled-link-hover-color: $gray-light;
450 $nav-tabs-border-color: #ddd;
452 $nav-tabs-link-hover-border-color: $gray-lighter;
454 $nav-tabs-active-link-hover-bg: $black;
455 $nav-tabs-active-link-hover-color: $white;
457 $nav-tabs-justified-active-link-border-color: $body-bg;
460 $nav-pills-border-radius: $border-radius-base;
461 $nav-pills-active-link-hover-bg: $component-active-bg;
462 $nav-pills-active-link-hover-color: $component-active-color;
468 $pagination-color: $black;
469 $pagination-bg: $gray;
470 $pagination-border: #ddd;
472 $pagination-hover-color: $link-hover-color;
473 $pagination-hover-bg: $gray-lighter;
474 $pagination-hover-border: #ddd;
476 $pagination-active-color: #fff;
477 $pagination-active-bg: $brand-primary;
478 $pagination-active-border: $brand-primary;
480 $pagination-disabled-color: $gray-light;
481 $pagination-disabled-bg: #fff;
482 $pagination-disabled-border: #ddd;
488 $pager-bg: $pagination-bg;
489 $pager-border: $pagination-border;
490 $pager-border-radius: 0;
492 $pager-hover-bg: $pagination-hover-bg;
494 $pager-active-bg: $pagination-active-bg;
495 $pager-active-color: $pagination-active-color;
497 $pager-disabled-color: $pagination-disabled-color;
503 $jumbotron-padding: ($ts) ($rhs + $baseWidth) ($bs) ($lhs + $baseWidth);
504 $jumbotron-color: $white;
505 $jumbotron-bg: transparent;
506 $jumbotron-heading-color: inherit;
507 $jumbotron-font-size: $font-size-base;
509 //== Form states and alerts
511 //## Define colors for form feedback states and, by default, alerts.
513 $state-success-text: $green;
514 $state-success-bg: $greenDark;
515 $state-success-border: $state-success-bg;
517 $state-info-text: $yellow;
518 $state-info-bg: $brown;
519 $state-info-border: $state-info-bg;
521 $state-warning-text: $magenta;
522 $state-warning-bg: $magentaDark;
523 $state-warning-border: $state-warning-bg;
525 $state-danger-text: $red;
526 $state-danger-bg: $black;
527 $state-danger-border: $state-danger-bg;
533 //** Tooltip max width
534 $tooltip-max-width: ($baseWidth * 25);
535 //** Tooltip text color
536 $tooltip-color: $white;
537 //** Tooltip background color
538 $tooltip-bg: $grayDark;
541 //** Tooltip arrow width
542 $tooltip-arrow-width: 0px;
543 //** Tooltip arrow color
544 $tooltip-arrow-color: $tooltip-bg;
550 //** Popover body background color
552 //** Popover maximum width
553 $popover-max-width: ($baseWidth * 20);
554 //** Popover border color
555 $popover-border-color: rgb(0, 0, 0);
556 //** Popover fallback border color
557 $popover-fallback-border-color: #ccc;
559 //** Popover title background color
560 $popover-title-bg: $greenDark;
562 //** Popover arrow width
563 $popover-arrow-width: 10px;
564 //** Popover arrow color
565 $popover-arrow-color: $popover-bg;
567 //** Popover outer arrow width
568 $popover-arrow-outer-width: ($popover-arrow-width + 1);
569 //** Popover outer arrow color
570 $popover-arrow-outer-color: $popover-border-color;
571 //** Popover outer arrow fallback color
572 $popover-arrow-outer-fallback-color: $popover-fallback-border-color;
578 //** Default label background color
579 $label-default-bg: $gray-light;
580 //** Primary label background color
581 $label-primary-bg: $brand-primary-bg;
582 //** Success label background color
583 $label-success-bg: $brand-success;
584 //** Info label background color
585 $label-info-bg: $brand-info;
586 //** Warning label background color
587 $label-warning-bg: $brand-warning;
588 //** Danger label background color
589 $label-danger-bg: $brand-danger;
591 //** Default label text color
593 //** Default text color of a linked label
594 $label-link-hover-color: #fff;
600 //** Padding applied to the modal body
601 $modal-inner-padding: 0 $baseWidth;
603 //** Padding applied to the modal title
604 $modal-title-padding: 0 $baseWidth;
605 //** Modal title line-height
606 $modal-title-line-height: $line-height-base;
608 //** Background color of modal content area
609 $modal-content-bg: $gray;
610 //** Modal content border color
611 $modal-content-border-color: rgb(0, 0, 0);
612 //** Modal content border color **for IE8**
613 $modal-content-fallback-border-color: #999;
615 //** Modal backdrop background color
616 $modal-backdrop-bg: #000;
617 //** Modal backdrop opacity
618 // $modal-backdrop-opacity: @include 5;
619 //** Modal header border color
620 $modal-header-border-color: #e5e5e5;
621 //** Modal footer border color
622 $modal-footer-border-color: $modal-header-border-color;
630 //## Define alert colors, border radius, and padding.
632 $alert-padding: $line-height-base ($baseWidth * 2);
633 $alert-border-radius: $border-radius-base;
634 $alert-link-font-weight: normal;
636 $alert-success-bg: $state-success-bg;
637 $alert-success-text: $state-success-text;
638 $alert-success-border: $state-success-border;
640 $alert-info-bg: $state-info-bg;
641 $alert-info-text: $state-info-text;
642 $alert-info-border: $state-info-border;
644 $alert-warning-bg: $state-warning-bg;
645 $alert-warning-text: $state-warning-text;
646 $alert-warning-border: $state-warning-border;
648 $alert-danger-bg: $state-danger-bg;
649 $alert-danger-text: $state-danger-text;
650 $alert-danger-border: $state-danger-border;
656 //** Background color of the whole progress component
657 $progress-bg: $black;
658 //** Progress bar text color
659 $progress-bar-color: $black;
660 //** Variable for setting rounded corners on progress bar.
661 $progress-border-radius: $border-radius-base;
663 //** Default progress bar color
664 $progress-bar-bg: $brand-primary;
665 //** Success progress bar color
666 $progress-bar-success-bg: $brand-success;
667 //** Warning progress bar color
668 $progress-bar-warning-bg: $brand-warning;
669 //** Danger progress bar color
670 $progress-bar-danger-bg: $brand-danger;
671 //** Info progress bar color
672 $progress-bar-info-bg: $brand-info;
678 //** Background color on `.list-group-item`
679 $list-group-bg: $gray;
680 //** `.list-group-item` border color
681 $list-group-border: #ddd;
682 //** List group border radius
683 $list-group-border-radius: $border-radius-base;
685 //** Background color of single list items on hover
686 $list-group-hover-bg: $black;
687 //** Text color of active list items
688 $list-group-active-color: $component-active-color;
689 //** Background color of active list items
690 $list-group-active-bg: $component-active-bg;
691 //** Border color of active list elements
692 $list-group-active-border: $list-group-active-bg;
693 //** Text color for content within active list items
694 $list-group-active-text-color: $component-active-color;
696 //** Text color of disabled list items
697 $list-group-disabled-color: $gray-dark;
698 //** Background color of disabled list items
699 $list-group-disabled-bg: $gray-lighter;
700 //** Text color for content within disabled list items
701 $list-group-disabled-text-color: $list-group-disabled-color;
703 $list-group-link-color: $black;
704 $list-group-link-hover-color: $list-group-link-color;
705 $list-group-link-heading-color: #333;
712 $panel-body-padding: 0 $rhsNB 0 $lhsNB;
713 $panel-heading-padding: 0 $rhsNB 0 $lhsNB;
714 $panel-footer-padding: $panel-heading-padding;
715 $panel-border-radius: $border-radius-base;
717 //** Border color for elements within panels
718 $panel-inner-border: #ddd;
719 $panel-footer-bg: #f5f5f5;
721 $panel-default-text: $white;
722 $panel-default-border: #ddd;
723 $panel-default-heading-bg: $grayDark;
725 $panel-primary-text: $white;
726 $panel-primary-border: $brand-primary;
727 $panel-primary-heading-bg: $cyanDark;
729 $panel-success-text: $state-success-text;
730 $panel-success-border: $state-success-border;
731 $panel-success-heading-bg: $state-success-bg;
733 $panel-info-text: $state-info-text;
734 $panel-info-border: $state-info-border;
735 $panel-info-heading-bg: $state-info-bg;
737 $panel-warning-text: $state-warning-text;
738 $panel-warning-border: $state-warning-border;
739 $panel-warning-heading-bg: $state-warning-bg;
741 $panel-danger-text: $state-danger-text;
742 $panel-danger-border: $state-danger-border;
743 $panel-danger-heading-bg: $state-danger-bg;
749 //** Padding around the thumbnail image
750 $thumbnail-padding: 4px;
751 //** Thumbnail background color
752 $thumbnail-bg: $body-bg;
753 //** Thumbnail border color
754 $thumbnail-border: #ddd;
755 //** Thumbnail border radius
756 $thumbnail-border-radius: $border-radius-base;
758 //** Custom text color for thumbnail captions
759 $thumbnail-caption-color: $text-color;
760 //** Padding around the thumbnail caption
761 $thumbnail-caption-padding: 9px;
767 $well-bg: $greenDark;
768 $well-border: $well-bg;
774 $badge-color: $black;
775 //** Linked badge text color on hover
776 $badge-link-hover-color: #fff;
777 $badge-bg: $gray-light;
779 //** Badge text color in active nav link
780 $badge-active-color: $link-color;
781 //** Badge background color in active nav link
782 $badge-active-bg: $black;
784 $badge-font-weight: normal;
785 $badge-line-height: $line-height-base;
786 $badge-border-radius: 0;
792 $breadcrumb-padding-vertical: 8px;
793 $breadcrumb-padding-horizontal: 15px;
794 //** Breadcrumb background color
795 $breadcrumb-bg: #f5f5f5;
796 //** Breadcrumb text color
797 $breadcrumb-color: #ccc;
798 //** Text color of current page in the breadcrumb
799 $breadcrumb-active-color: $gray-light;
800 //** Textual separator for between breadcrumb elements
801 $breadcrumb-separator: "/";
807 $carousel-text-shadow: none;
809 $carousel-control-color: #fff;
810 $carousel-control-width: 15%;
811 $carousel-control-opacity: 1;
812 $carousel-control-font-size: $font-size-base;
814 $carousel-indicator-active-bg: #fff;
815 $carousel-indicator-border-color: #fff;
817 $carousel-caption-color: #fff;
823 $close-font-weight: normal;
825 $close-text-shadow: none;
831 $code-color: #c7254e;
838 $pre-color: $gray-dark;
839 $pre-border-color: #ccc;
840 $pre-scrollable-max-height: 340px;
846 //** Horizontal offset for forms and lists.
847 $component-offset-horizontal: 180px;
848 //** Text muted color
849 $text-muted: $gray-dark;
850 //** Abbreviations and acronyms border color
851 $abbr-border-color: $gray-light;
852 //** Headings small color
853 $headings-small-color: $gray-light;
854 //** Blockquote small color
855 $blockquote-small-color: $gray-light;
856 //** Blockquote font size
857 $blockquote-font-size: $font-size-base;
858 //** Blockquote border color
859 $blockquote-border-color: $gray-lighter;
860 //** Page header border color
861 $page-header-border-color: $gray-lighter;
862 //** Width of horizontal description list titles
863 $dl-horizontal-offset: $component-offset-horizontal;
864 //** Horizontal line color.