twitter-bootstrap-rails 2.2.8 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of twitter-bootstrap-rails might be problematic. Click here for more details.

Files changed (185) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +229 -322
  3. data/Rakefile +4 -6
  4. data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  5. data/app/assets/fonts/glyphicons-halflings-regular.svg +288 -0
  6. data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  7. data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  8. data/app/assets/fonts/glyphicons-halflings-regular.woff2 +0 -0
  9. data/app/assets/javascripts/twitter/bootstrap.js +12 -13
  10. data/app/assets/javascripts/twitter/bootstrap/affix.js +162 -0
  11. data/app/assets/javascripts/twitter/bootstrap/alert.js +94 -0
  12. data/app/assets/javascripts/twitter/bootstrap/button.js +120 -0
  13. data/app/assets/javascripts/twitter/bootstrap/carousel.js +237 -0
  14. data/app/assets/javascripts/twitter/bootstrap/collapse.js +211 -0
  15. data/app/assets/javascripts/twitter/bootstrap/dropdown.js +165 -0
  16. data/app/assets/javascripts/twitter/bootstrap/modal.js +337 -0
  17. data/app/assets/javascripts/twitter/bootstrap/popover.js +108 -0
  18. data/app/assets/javascripts/twitter/bootstrap/scrollspy.js +172 -0
  19. data/app/assets/javascripts/twitter/bootstrap/tab.js +155 -0
  20. data/app/assets/javascripts/twitter/bootstrap/tooltip.js +514 -0
  21. data/app/assets/javascripts/twitter/bootstrap/transition.js +59 -0
  22. data/app/assets/stylesheets/twitter-bootstrap-static/bootstrap.css.erb +1 -890
  23. data/app/assets/stylesheets/twitter-bootstrap-static/sprites.css.erb +1 -146
  24. data/app/helpers/bootstrap_flash_helper.rb +14 -7
  25. data/app/helpers/form_errors_helper.rb +22 -0
  26. data/app/helpers/glyph_helper.rb +12 -6
  27. data/app/helpers/modal_helper.rb +26 -22
  28. data/app/helpers/navbar_helper.rb +47 -32
  29. data/app/helpers/twitter_breadcrumbs_helper.rb +6 -2
  30. data/app/views/twitter-bootstrap/_breadcrumbs.html.erb +8 -8
  31. data/lib/generators/bootstrap/install/install_generator.rb +3 -2
  32. data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.css +3 -4
  33. data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.less +9 -18
  34. data/lib/generators/bootstrap/install/templates/en.bootstrap.yml +5 -0
  35. data/lib/generators/bootstrap/layout/layout_generator.rb +1 -4
  36. data/lib/generators/bootstrap/layout/templates/layout.html.erb +27 -48
  37. data/lib/generators/bootstrap/layout/templates/layout.html.haml +19 -34
  38. data/lib/generators/bootstrap/layout/templates/layout.html.slim +13 -30
  39. data/lib/generators/bootstrap/partial/templates/_login.html.erb +2 -3
  40. data/lib/generators/bootstrap/themed/templates/_form.html.erb +30 -10
  41. data/lib/generators/bootstrap/themed/templates/_form.html.haml +10 -8
  42. data/lib/generators/bootstrap/themed/templates/_form.html.slim +11 -9
  43. data/lib/generators/bootstrap/themed/templates/edit.html.slim +1 -1
  44. data/lib/generators/bootstrap/themed/templates/index.html.erb +4 -2
  45. data/lib/generators/bootstrap/themed/templates/index.html.haml +3 -2
  46. data/lib/generators/bootstrap/themed/templates/index.html.slim +6 -5
  47. data/lib/generators/bootstrap/themed/templates/new.html.slim +1 -1
  48. data/lib/generators/bootstrap/themed/templates/show.html.erb +5 -7
  49. data/lib/generators/bootstrap/themed/templates/show.html.haml +4 -4
  50. data/lib/generators/bootstrap/themed/templates/show.html.slim +6 -7
  51. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.erb +5 -5
  52. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.haml +3 -3
  53. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.slim +4 -4
  54. data/lib/generators/bootstrap/themed/themed_generator.rb +2 -2
  55. data/lib/twitter/bootstrap/rails/breadcrumbs.rb +69 -0
  56. data/lib/twitter/bootstrap/rails/engine.rb +17 -10
  57. data/lib/twitter/bootstrap/rails/version.rb +2 -2
  58. data/spec/lib/breadcrumbs_spec.rb +99 -0
  59. data/spec/lib/twitter_bootstrap_rails/badge_label_helper_spec.rb +12 -4
  60. data/spec/lib/twitter_bootstrap_rails/bootstrap_flash_helper_spec.rb +128 -0
  61. data/spec/lib/twitter_bootstrap_rails/form_errors_helper_spec.rb +148 -0
  62. data/spec/lib/twitter_bootstrap_rails/glyph_helper_spec.rb +24 -0
  63. data/spec/lib/twitter_bootstrap_rails/modal_helper_spec.rb +15 -15
  64. data/spec/lib/twitter_bootstrap_rails/navbar_helper_spec.rb +207 -173
  65. data/spec/lib/twitter_bootstrap_rails/uri_state_spec.rb +18 -16
  66. data/spec/spec_helper.rb +11 -1
  67. data/vendor/assets/stylesheets/twitter-bootstrap-static/bootstrap.css.erb +5796 -1
  68. data/vendor/static-source/bootstrap.less +0 -1
  69. data/vendor/static-source/sprites.less +1 -1
  70. data/vendor/toolkit/twitter/bootstrap/alerts.less +51 -57
  71. data/vendor/toolkit/twitter/bootstrap/badges.less +66 -0
  72. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +29 -36
  73. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +11 -9
  74. data/vendor/toolkit/twitter/bootstrap/button-groups.less +167 -152
  75. data/vendor/toolkit/twitter/bootstrap/buttons.less +107 -169
  76. data/vendor/toolkit/twitter/bootstrap/carousel.less +177 -65
  77. data/vendor/toolkit/twitter/bootstrap/close.less +21 -19
  78. data/vendor/toolkit/twitter/bootstrap/code.less +38 -30
  79. data/vendor/toolkit/twitter/bootstrap/component-animations.less +15 -4
  80. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +120 -152
  81. data/vendor/toolkit/twitter/bootstrap/forms.less +470 -547
  82. data/vendor/toolkit/twitter/bootstrap/glyphicons.less +305 -0
  83. data/vendor/toolkit/twitter/bootstrap/grid.less +74 -11
  84. data/vendor/toolkit/twitter/bootstrap/input-groups.less +171 -0
  85. data/vendor/toolkit/twitter/bootstrap/jumbotron.less +54 -0
  86. data/vendor/toolkit/twitter/bootstrap/labels.less +64 -0
  87. data/vendor/toolkit/twitter/bootstrap/list-group.less +130 -0
  88. data/vendor/toolkit/twitter/bootstrap/media.less +40 -29
  89. data/vendor/toolkit/twitter/bootstrap/mixins.less +37 -699
  90. data/vendor/toolkit/twitter/bootstrap/mixins/alerts.less +14 -0
  91. data/vendor/toolkit/twitter/bootstrap/mixins/background-variant.less +9 -0
  92. data/vendor/toolkit/twitter/bootstrap/mixins/border-radius.less +18 -0
  93. data/vendor/toolkit/twitter/bootstrap/mixins/buttons.less +65 -0
  94. data/vendor/toolkit/twitter/bootstrap/mixins/center-block.less +7 -0
  95. data/vendor/toolkit/twitter/bootstrap/mixins/clearfix.less +22 -0
  96. data/vendor/toolkit/twitter/bootstrap/mixins/forms.less +85 -0
  97. data/vendor/toolkit/twitter/bootstrap/mixins/gradients.less +59 -0
  98. data/vendor/toolkit/twitter/bootstrap/mixins/grid-framework.less +91 -0
  99. data/vendor/toolkit/twitter/bootstrap/mixins/grid.less +122 -0
  100. data/vendor/toolkit/twitter/bootstrap/mixins/hide-text.less +21 -0
  101. data/vendor/toolkit/twitter/bootstrap/mixins/image.less +33 -0
  102. data/vendor/toolkit/twitter/bootstrap/mixins/labels.less +12 -0
  103. data/vendor/toolkit/twitter/bootstrap/mixins/list-group.less +30 -0
  104. data/vendor/toolkit/twitter/bootstrap/mixins/nav-divider.less +10 -0
  105. data/vendor/toolkit/twitter/bootstrap/mixins/nav-vertical-align.less +9 -0
  106. data/vendor/toolkit/twitter/bootstrap/mixins/opacity.less +8 -0
  107. data/vendor/toolkit/twitter/bootstrap/mixins/pagination.less +24 -0
  108. data/vendor/toolkit/twitter/bootstrap/mixins/panels.less +24 -0
  109. data/vendor/toolkit/twitter/bootstrap/mixins/progress-bar.less +10 -0
  110. data/vendor/toolkit/twitter/bootstrap/mixins/reset-filter.less +8 -0
  111. data/vendor/toolkit/twitter/bootstrap/mixins/reset-text.less +18 -0
  112. data/vendor/toolkit/twitter/bootstrap/mixins/resize.less +6 -0
  113. data/vendor/toolkit/twitter/bootstrap/mixins/responsive-visibility.less +15 -0
  114. data/vendor/toolkit/twitter/bootstrap/mixins/size.less +10 -0
  115. data/vendor/toolkit/twitter/bootstrap/mixins/tab-focus.less +9 -0
  116. data/vendor/toolkit/twitter/bootstrap/mixins/table-row.less +28 -0
  117. data/vendor/toolkit/twitter/bootstrap/mixins/text-emphasis.less +9 -0
  118. data/vendor/toolkit/twitter/bootstrap/mixins/text-overflow.less +8 -0
  119. data/vendor/toolkit/twitter/bootstrap/mixins/vendor-prefixes.less +227 -0
  120. data/vendor/toolkit/twitter/bootstrap/modals.less +109 -54
  121. data/vendor/toolkit/twitter/bootstrap/navbar.less +547 -384
  122. data/vendor/toolkit/twitter/bootstrap/navs.less +192 -359
  123. data/vendor/toolkit/twitter/bootstrap/normalize.less +424 -0
  124. data/vendor/toolkit/twitter/bootstrap/pager.less +45 -34
  125. data/vendor/toolkit/twitter/bootstrap/pagination.less +71 -105
  126. data/vendor/toolkit/twitter/bootstrap/panels.less +271 -0
  127. data/vendor/toolkit/twitter/bootstrap/popovers.less +66 -68
  128. data/vendor/toolkit/twitter/bootstrap/print.less +101 -0
  129. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +40 -75
  130. data/vendor/toolkit/twitter/bootstrap/responsive-embed.less +35 -0
  131. data/vendor/toolkit/twitter/bootstrap/responsive-utilities.less +177 -42
  132. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +131 -23
  133. data/vendor/toolkit/twitter/bootstrap/tables.less +172 -182
  134. data/vendor/toolkit/twitter/bootstrap/theme.less +291 -0
  135. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +27 -44
  136. data/vendor/toolkit/twitter/bootstrap/tooltip.less +58 -27
  137. data/vendor/toolkit/twitter/bootstrap/type.less +209 -154
  138. data/vendor/toolkit/twitter/bootstrap/utilities.less +32 -7
  139. data/vendor/toolkit/twitter/bootstrap/variables.less +784 -216
  140. data/vendor/toolkit/twitter/bootstrap/wells.less +7 -7
  141. metadata +156 -141
  142. data/app/assets/fonts/fontawesome-webfont.eot +0 -0
  143. data/app/assets/fonts/fontawesome-webfont.svg +0 -399
  144. data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
  145. data/app/assets/fonts/fontawesome-webfont.woff +0 -0
  146. data/app/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  147. data/app/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  148. data/app/assets/javascripts/twitter/bootstrap/bootstrap-affix.js +0 -117
  149. data/app/assets/javascripts/twitter/bootstrap/bootstrap-alert.js +0 -99
  150. data/app/assets/javascripts/twitter/bootstrap/bootstrap-button.js +0 -105
  151. data/app/assets/javascripts/twitter/bootstrap/bootstrap-carousel.js +0 -207
  152. data/app/assets/javascripts/twitter/bootstrap/bootstrap-collapse.js +0 -167
  153. data/app/assets/javascripts/twitter/bootstrap/bootstrap-dropdown.js +0 -169
  154. data/app/assets/javascripts/twitter/bootstrap/bootstrap-modal.js +0 -247
  155. data/app/assets/javascripts/twitter/bootstrap/bootstrap-popover.js +0 -114
  156. data/app/assets/javascripts/twitter/bootstrap/bootstrap-scrollspy.js +0 -162
  157. data/app/assets/javascripts/twitter/bootstrap/bootstrap-tab.js +0 -144
  158. data/app/assets/javascripts/twitter/bootstrap/bootstrap-tooltip.js +0 -361
  159. data/app/assets/javascripts/twitter/bootstrap/bootstrap-transition.js +0 -60
  160. data/app/assets/javascripts/twitter/bootstrap/bootstrap-typeahead.js +0 -335
  161. data/app/assets/stylesheets/twitter-bootstrap-static/fontawesome.css.erb +0 -787
  162. data/lib/twitter/bootstrap/rails/twitter-bootstrap-breadcrumbs.rb +0 -42
  163. data/test/lib/breadcrumbs_test.rb +0 -75
  164. data/test/test_helper.rb +0 -11
  165. data/vendor/static-source/fontawesome.less +0 -9
  166. data/vendor/toolkit/fontawesome/bootstrap.less +0 -84
  167. data/vendor/toolkit/fontawesome/core.less +0 -129
  168. data/vendor/toolkit/fontawesome/extras.less +0 -93
  169. data/vendor/toolkit/fontawesome/font-awesome-ie7.less +0 -1953
  170. data/vendor/toolkit/fontawesome/font-awesome.less +0 -33
  171. data/vendor/toolkit/fontawesome/icons.less +0 -381
  172. data/vendor/toolkit/fontawesome/mixins.less +0 -48
  173. data/vendor/toolkit/fontawesome/path.less +0 -14
  174. data/vendor/toolkit/fontawesome/variables.less +0 -735
  175. data/vendor/toolkit/twitter/bootstrap/accordion.less +0 -34
  176. data/vendor/toolkit/twitter/bootstrap/hero-unit.less +0 -25
  177. data/vendor/toolkit/twitter/bootstrap/labels-badges.less +0 -84
  178. data/vendor/toolkit/twitter/bootstrap/layouts.less +0 -16
  179. data/vendor/toolkit/twitter/bootstrap/reset.less +0 -216
  180. data/vendor/toolkit/twitter/bootstrap/responsive-1200px-min.less +0 -28
  181. data/vendor/toolkit/twitter/bootstrap/responsive-767px-max.less +0 -193
  182. data/vendor/toolkit/twitter/bootstrap/responsive-768px-979px.less +0 -19
  183. data/vendor/toolkit/twitter/bootstrap/responsive-navbar.less +0 -189
  184. data/vendor/toolkit/twitter/bootstrap/responsive.less +0 -48
  185. data/vendor/toolkit/twitter/bootstrap/sprites.less +0 -197
@@ -3,28 +3,53 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // Quick floats
6
+ // Floats
7
+ // -------------------------
8
+
9
+ .clearfix {
10
+ .clearfix();
11
+ }
12
+ .center-block {
13
+ .center-block();
14
+ }
7
15
  .pull-right {
8
- float: right;
16
+ float: right !important;
9
17
  }
10
18
  .pull-left {
11
- float: left;
19
+ float: left !important;
12
20
  }
13
21
 
22
+
14
23
  // Toggling content
24
+ // -------------------------
25
+
26
+ // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
15
27
  .hide {
16
- display: none;
28
+ display: none !important;
17
29
  }
18
30
  .show {
19
- display: block;
31
+ display: block !important;
20
32
  }
21
-
22
- // Visibility
23
33
  .invisible {
24
34
  visibility: hidden;
25
35
  }
36
+ .text-hide {
37
+ .text-hide();
38
+ }
39
+
40
+
41
+ // Hide from screenreaders and browsers
42
+ //
43
+ // Credit: HTML5 Boilerplate
44
+
45
+ .hidden {
46
+ display: none !important;
47
+ }
48
+
26
49
 
27
50
  // For Affix plugin
51
+ // -------------------------
52
+
28
53
  .affix {
29
54
  position: fixed;
30
55
  }
@@ -3,299 +3,867 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // Global values
7
- // --------------------------------------------------
6
+ //== Colors
7
+ //
8
+ //## Gray and brand colors for use across Bootstrap.
8
9
 
10
+ @gray-base: #000;
11
+ @gray-darker: lighten(@gray-base, 13.5%); // #222
12
+ @gray-dark: lighten(@gray-base, 20%); // #333
13
+ @gray: lighten(@gray-base, 33.5%); // #555
14
+ @gray-light: lighten(@gray-base, 46.7%); // #777
15
+ @gray-lighter: lighten(@gray-base, 93.5%); // #eee
9
16
 
10
- // Grays
11
- // -------------------------
12
- @black: #000;
13
- @grayDarker: #222;
14
- @grayDark: #333;
15
- @gray: #555;
16
- @grayLight: #999;
17
- @grayLighter: #eee;
18
- @white: #fff;
17
+ @brand-primary: darken(#428bca, 6.5%); // #337ab7
18
+ @brand-success: #5cb85c;
19
+ @brand-info: #5bc0de;
20
+ @brand-warning: #f0ad4e;
21
+ @brand-danger: #d9534f;
19
22
 
20
23
 
21
- // Accent colors
22
- // -------------------------
23
- @blue: #049cdb;
24
- @blueDark: #0064cd;
25
- @green: #46a546;
26
- @red: #9d261d;
27
- @yellow: #ffc40d;
28
- @orange: #f89406;
29
- @pink: #c3325f;
30
- @purple: #7a43b6;
24
+ //== Scaffolding
25
+ //
26
+ //## Settings for some of the most global styles.
31
27
 
28
+ //** Background color for `<body>`.
29
+ @body-bg: #fff;
30
+ //** Global text color on `<body>`.
31
+ @text-color: @gray-dark;
32
32
 
33
- // Scaffolding
34
- // -------------------------
35
- @bodyBackground: @white;
36
- @textColor: @grayDark;
33
+ //** Global textual link color.
34
+ @link-color: @brand-primary;
35
+ //** Link hover color set via `darken()` function.
36
+ @link-hover-color: darken(@link-color, 15%);
37
+ //** Link hover decoration.
38
+ @link-hover-decoration: underline;
37
39
 
38
40
 
39
- // Links
40
- // -------------------------
41
- @linkColor: #08c;
42
- @linkColorHover: darken(@linkColor, 15%);
41
+ //== Typography
42
+ //
43
+ //## Font, line-height, and color for body text, headings, and more.
44
+
45
+ @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
46
+ @font-family-serif: Georgia, "Times New Roman", Times, serif;
47
+ //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
48
+ @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
49
+ @font-family-base: @font-family-sans-serif;
50
+
51
+ @font-size-base: 14px;
52
+ @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
53
+ @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
54
+
55
+ @font-size-h1: floor((@font-size-base * 2.6)); // ~36px
56
+ @font-size-h2: floor((@font-size-base * 2.15)); // ~30px
57
+ @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
58
+ @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
59
+ @font-size-h5: @font-size-base;
60
+ @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
61
+
62
+ //** Unit-less `line-height` for use in components like buttons.
63
+ @line-height-base: 1.428571429; // 20/14
64
+ //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
65
+ @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
66
+
67
+ //** By default, this inherits from the `<body>`.
68
+ @headings-font-family: inherit;
69
+ @headings-font-weight: 500;
70
+ @headings-line-height: 1.1;
71
+ @headings-color: inherit;
72
+
73
+
74
+ //== Iconography
75
+ //
76
+ //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
43
77
 
78
+ //** Load fonts from this directory.
79
+ @icon-font-path: "../fonts/";
80
+ //** File name for all font files.
81
+ @icon-font-name: "glyphicons-halflings-regular";
82
+ //** Element ID within SVG icon file.
83
+ @icon-font-svg-id: "glyphicons_halflingsregular";
44
84
 
45
- // Typography
46
- // -------------------------
47
- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
48
- @serifFontFamily: Georgia, "Times New Roman", Times, serif;
49
- @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
50
85
 
51
- @baseFontSize: 14px;
52
- @baseFontFamily: @sansFontFamily;
53
- @baseLineHeight: 20px;
54
- @altFontFamily: @serifFontFamily;
86
+ //== Components
87
+ //
88
+ //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
55
89
 
56
- @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
57
- @headingsFontWeight: bold; // instead of browser default, bold
58
- @headingsColor: inherit; // empty to use BS default, @textColor
90
+ @padding-base-vertical: 6px;
91
+ @padding-base-horizontal: 12px;
59
92
 
93
+ @padding-large-vertical: 10px;
94
+ @padding-large-horizontal: 16px;
60
95
 
61
- // Component sizing
62
- // -------------------------
63
- // Based on 14px font-size and 20px line-height
96
+ @padding-small-vertical: 5px;
97
+ @padding-small-horizontal: 10px;
64
98
 
65
- @fontSizeLarge: @baseFontSize * 1.25; // ~18px
66
- @fontSizeSmall: @baseFontSize * 0.85; // ~12px
67
- @fontSizeMini: @baseFontSize * 0.75; // ~11px
99
+ @padding-xs-vertical: 1px;
100
+ @padding-xs-horizontal: 5px;
68
101
 
69
- @paddingLarge: 11px 19px; // 44px
70
- @paddingSmall: 2px 10px; // 26px
71
- @paddingMini: 0 6px; // 22px
102
+ @line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
103
+ @line-height-small: 1.5;
72
104
 
73
- @baseBorderRadius: 4px;
74
- @borderRadiusLarge: 6px;
75
- @borderRadiusSmall: 3px;
105
+ @border-radius-base: 4px;
106
+ @border-radius-large: 6px;
107
+ @border-radius-small: 3px;
76
108
 
109
+ //** Global color for active items (e.g., navs or dropdowns).
110
+ @component-active-color: #fff;
111
+ //** Global background color for active items (e.g., navs or dropdowns).
112
+ @component-active-bg: @brand-primary;
77
113
 
78
- // Tables
79
- // -------------------------
80
- @tableBackground: transparent; // overall background-color
81
- @tableBackgroundAccent: #f9f9f9; // for striping
82
- @tableBackgroundHover: #f5f5f5; // for hover
83
- @tableBorder: #ddd; // table and cell border
114
+ //** Width of the `border` for generating carets that indicator dropdowns.
115
+ @caret-width-base: 4px;
116
+ //** Carets increase slightly in size for larger components.
117
+ @caret-width-large: 5px;
84
118
 
85
- // Buttons
86
- // -------------------------
87
- @btnBackground: @white;
88
- @btnBackgroundHighlight: darken(@white, 10%);
89
- @btnBorder: #ccc;
90
119
 
91
- @btnPrimaryBackground: @linkColor;
92
- @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
120
+ //== Tables
121
+ //
122
+ //## Customizes the `.table` component with basic values, each used across all table variations.
93
123
 
94
- @btnInfoBackground: #5bc0de;
95
- @btnInfoBackgroundHighlight: #2f96b4;
124
+ //** Padding for `<th>`s and `<td>`s.
125
+ @table-cell-padding: 8px;
126
+ //** Padding for cells in `.table-condensed`.
127
+ @table-condensed-cell-padding: 5px;
96
128
 
97
- @btnSuccessBackground: #62c462;
98
- @btnSuccessBackgroundHighlight: #51a351;
129
+ //** Default background color used for all tables.
130
+ @table-bg: transparent;
131
+ //** Background color used for `.table-striped`.
132
+ @table-bg-accent: #f9f9f9;
133
+ //** Background color used for `.table-hover`.
134
+ @table-bg-hover: #f5f5f5;
135
+ @table-bg-active: @table-bg-hover;
99
136
 
100
- @btnWarningBackground: lighten(@orange, 15%);
101
- @btnWarningBackgroundHighlight: @orange;
137
+ //** Border color for table and cell borders.
138
+ @table-border-color: #ddd;
102
139
 
103
- @btnDangerBackground: #ee5f5b;
104
- @btnDangerBackgroundHighlight: #bd362f;
105
140
 
106
- @btnInverseBackground: #444;
107
- @btnInverseBackgroundHighlight: @grayDarker;
141
+ //== Buttons
142
+ //
143
+ //## For each of Bootstrap's buttons, define text, background and border color.
108
144
 
145
+ @btn-font-weight: normal;
109
146
 
110
- // Forms
111
- // -------------------------
112
- @inputBackground: @white;
113
- @inputBorder: #ccc;
114
- @inputBorderRadius: @baseBorderRadius;
115
- @inputDisabledBackground: @grayLighter;
116
- @formActionsBackground: #f5f5f5;
117
- @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
147
+ @btn-default-color: #333;
148
+ @btn-default-bg: #fff;
149
+ @btn-default-border: #ccc;
118
150
 
151
+ @btn-primary-color: #fff;
152
+ @btn-primary-bg: @brand-primary;
153
+ @btn-primary-border: darken(@btn-primary-bg, 5%);
119
154
 
120
- // Dropdowns
121
- // -------------------------
122
- @dropdownBackground: @white;
123
- @dropdownBorder: rgba(0,0,0,.2);
124
- @dropdownDividerTop: #e5e5e5;
125
- @dropdownDividerBottom: @white;
155
+ @btn-success-color: #fff;
156
+ @btn-success-bg: @brand-success;
157
+ @btn-success-border: darken(@btn-success-bg, 5%);
126
158
 
127
- @dropdownLinkColor: @grayDark;
128
- @dropdownLinkColorHover: @white;
129
- @dropdownLinkColorActive: @white;
159
+ @btn-info-color: #fff;
160
+ @btn-info-bg: @brand-info;
161
+ @btn-info-border: darken(@btn-info-bg, 5%);
130
162
 
131
- @dropdownLinkBackgroundActive: @linkColor;
132
- @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
163
+ @btn-warning-color: #fff;
164
+ @btn-warning-bg: @brand-warning;
165
+ @btn-warning-border: darken(@btn-warning-bg, 5%);
133
166
 
167
+ @btn-danger-color: #fff;
168
+ @btn-danger-bg: @brand-danger;
169
+ @btn-danger-border: darken(@btn-danger-bg, 5%);
134
170
 
171
+ @btn-link-disabled-color: @gray-light;
135
172
 
136
- // COMPONENT VARIABLES
137
- // --------------------------------------------------
173
+ // Allows for customizing button radius independently from global border radius
174
+ @btn-border-radius-base: @border-radius-base;
175
+ @btn-border-radius-large: @border-radius-large;
176
+ @btn-border-radius-small: @border-radius-small;
138
177
 
139
178
 
140
- // Z-index master list
141
- // -------------------------
142
- // Used for a bird's eye view of components dependent on the z-axis
143
- // Try to avoid customizing these :)
144
- @zindexDropdown: 1000;
145
- @zindexPopover: 1010;
146
- @zindexTooltip: 1030;
147
- @zindexFixedNavbar: 1030;
148
- @zindexModalBackdrop: 1040;
149
- @zindexModal: 1050;
179
+ //== Forms
180
+ //
181
+ //##
150
182
 
183
+ //** `<input>` background color
184
+ @input-bg: #fff;
185
+ //** `<input disabled>` background color
186
+ @input-bg-disabled: @gray-lighter;
151
187
 
152
- // Sprite icons path
153
- // -------------------------
154
- @iconSpritePath: "../img/glyphicons-halflings.png";
155
- @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
188
+ //** Text color for `<input>`s
189
+ @input-color: @gray;
190
+ //** `<input>` border color
191
+ @input-border: #ccc;
156
192
 
193
+ // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
194
+ //** Default `.form-control` border radius
195
+ // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
196
+ @input-border-radius: @border-radius-base;
197
+ //** Large `.form-control` border radius
198
+ @input-border-radius-large: @border-radius-large;
199
+ //** Small `.form-control` border radius
200
+ @input-border-radius-small: @border-radius-small;
157
201
 
158
- // Input placeholder text color
159
- // -------------------------
160
- @placeholderText: @grayLight;
202
+ //** Border color for inputs on focus
203
+ @input-border-focus: #66afe9;
161
204
 
205
+ //** Placeholder text color
206
+ @input-color-placeholder: #999;
162
207
 
163
- // Hr border color
164
- // -------------------------
165
- @hrBorder: @grayLighter;
208
+ //** Default `.form-control` height
209
+ @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
210
+ //** Large `.form-control` height
211
+ @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
212
+ //** Small `.form-control` height
213
+ @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
166
214
 
215
+ //** `.form-group` margin
216
+ @form-group-margin-bottom: 15px;
167
217
 
168
- // Horizontal forms & lists
169
- // -------------------------
170
- @horizontalComponentOffset: 180px;
218
+ @legend-color: @gray-dark;
219
+ @legend-border-color: #e5e5e5;
171
220
 
221
+ //** Background color for textual input addons
222
+ @input-group-addon-bg: @gray-lighter;
223
+ //** Border color for textual input addons
224
+ @input-group-addon-border-color: @input-border;
172
225
 
173
- // Wells
174
- // -------------------------
175
- @wellBackground: #f5f5f5;
226
+ //** Disabled cursor for form controls and buttons.
227
+ @cursor-disabled: not-allowed;
176
228
 
177
229
 
178
- // Navbar
179
- // -------------------------
180
- @navbarCollapseWidth: 979px;
181
- @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
230
+ //== Dropdowns
231
+ //
232
+ //## Dropdown menu container and contents.
182
233
 
183
- @navbarHeight: 40px;
184
- @navbarBackgroundHighlight: #ffffff;
185
- @navbarBackground: darken(@navbarBackgroundHighlight, 5%);
186
- @navbarBorder: darken(@navbarBackground, 12%);
234
+ //** Background for the dropdown menu.
235
+ @dropdown-bg: #fff;
236
+ //** Dropdown menu `border-color`.
237
+ @dropdown-border: rgba(0,0,0,.15);
238
+ //** Dropdown menu `border-color` **for IE8**.
239
+ @dropdown-fallback-border: #ccc;
240
+ //** Divider color for between dropdown items.
241
+ @dropdown-divider-bg: #e5e5e5;
187
242
 
188
- @navbarText: #777;
189
- @navbarLinkColor: #777;
190
- @navbarLinkColorHover: @grayDark;
191
- @navbarLinkColorActive: @gray;
192
- @navbarLinkBackgroundHover: transparent;
193
- @navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
243
+ //** Dropdown link text color.
244
+ @dropdown-link-color: @gray-dark;
245
+ //** Hover color for dropdown links.
246
+ @dropdown-link-hover-color: darken(@gray-dark, 5%);
247
+ //** Hover background for dropdown links.
248
+ @dropdown-link-hover-bg: #f5f5f5;
194
249
 
195
- @navbarBrandColor: @navbarLinkColor;
250
+ //** Active dropdown menu item text color.
251
+ @dropdown-link-active-color: @component-active-color;
252
+ //** Active dropdown menu item background color.
253
+ @dropdown-link-active-bg: @component-active-bg;
196
254
 
197
- // Inverted navbar
198
- @navbarInverseBackground: #111111;
199
- @navbarInverseBackgroundHighlight: #222222;
200
- @navbarInverseBorder: #252525;
255
+ //** Disabled dropdown menu item background color.
256
+ @dropdown-link-disabled-color: @gray-light;
201
257
 
202
- @navbarInverseText: @grayLight;
203
- @navbarInverseLinkColor: @grayLight;
204
- @navbarInverseLinkColorHover: @white;
205
- @navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
206
- @navbarInverseLinkBackgroundHover: transparent;
207
- @navbarInverseLinkBackgroundActive: @navbarInverseBackground;
258
+ //** Text color for headers within dropdown menus.
259
+ @dropdown-header-color: @gray-light;
208
260
 
209
- @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
210
- @navbarInverseSearchBackgroundFocus: @white;
211
- @navbarInverseSearchBorder: @navbarInverseBackground;
212
- @navbarInverseSearchPlaceholderColor: #ccc;
261
+ //** Deprecated `@dropdown-caret-color` as of v3.1.0
262
+ @dropdown-caret-color: #000;
213
263
 
214
- @navbarInverseBrandColor: @navbarInverseLinkColor;
215
264
 
265
+ //-- Z-index master list
266
+ //
267
+ // Warning: Avoid customizing these values. They're used for a bird's eye view
268
+ // of components dependent on the z-axis and are designed to all work together.
269
+ //
270
+ // Note: These variables are not generated into the Customizer.
216
271
 
217
- // Pagination
218
- // -------------------------
219
- @paginationBackground: #fff;
220
- @paginationBorder: #ddd;
221
- @paginationActiveBackground: #f5f5f5;
272
+ @zindex-navbar: 1000;
273
+ @zindex-dropdown: 1000;
274
+ @zindex-popover: 1060;
275
+ @zindex-tooltip: 1070;
276
+ @zindex-navbar-fixed: 1030;
277
+ @zindex-modal-background: 1040;
278
+ @zindex-modal: 1050;
222
279
 
223
280
 
224
- // Hero unit
225
- // -------------------------
226
- @heroUnitBackground: @grayLighter;
227
- @heroUnitHeadingColor: inherit;
228
- @heroUnitLeadColor: inherit;
281
+ //== Media queries breakpoints
282
+ //
283
+ //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
284
+
285
+ // Extra small screen / phone
286
+ //** Deprecated `@screen-xs` as of v3.0.1
287
+ @screen-xs: 480px;
288
+ //** Deprecated `@screen-xs-min` as of v3.2.0
289
+ @screen-xs-min: @screen-xs;
290
+ //** Deprecated `@screen-phone` as of v3.0.1
291
+ @screen-phone: @screen-xs-min;
292
+
293
+ // Small screen / tablet
294
+ //** Deprecated `@screen-sm` as of v3.0.1
295
+ @screen-sm: 768px;
296
+ @screen-sm-min: @screen-sm;
297
+ //** Deprecated `@screen-tablet` as of v3.0.1
298
+ @screen-tablet: @screen-sm-min;
299
+
300
+ // Medium screen / desktop
301
+ //** Deprecated `@screen-md` as of v3.0.1
302
+ @screen-md: 992px;
303
+ @screen-md-min: @screen-md;
304
+ //** Deprecated `@screen-desktop` as of v3.0.1
305
+ @screen-desktop: @screen-md-min;
306
+
307
+ // Large screen / wide desktop
308
+ //** Deprecated `@screen-lg` as of v3.0.1
309
+ @screen-lg: 1200px;
310
+ @screen-lg-min: @screen-lg;
311
+ //** Deprecated `@screen-lg-desktop` as of v3.0.1
312
+ @screen-lg-desktop: @screen-lg-min;
313
+
314
+ // So media queries don't overlap when required, provide a maximum
315
+ @screen-xs-max: (@screen-sm-min - 1);
316
+ @screen-sm-max: (@screen-md-min - 1);
317
+ @screen-md-max: (@screen-lg-min - 1);
318
+
319
+
320
+ //== Grid system
321
+ //
322
+ //## Define your custom responsive grid.
229
323
 
324
+ //** Number of columns in the grid.
325
+ @grid-columns: 12;
326
+ //** Padding between columns. Gets divided in half for the left and right.
327
+ @grid-gutter-width: 30px;
328
+ // Navbar collapse
329
+ //** Point at which the navbar becomes uncollapsed.
330
+ @grid-float-breakpoint: @screen-sm-min;
331
+ //** Point at which the navbar begins collapsing.
332
+ @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
230
333
 
231
- // Form states and alerts
232
- // -------------------------
233
- @warningText: #c09853;
234
- @warningBackground: #fcf8e3;
235
- @warningBorder: darken(spin(@warningBackground, -10), 3%);
236
334
 
237
- @errorText: #b94a48;
238
- @errorBackground: #f2dede;
239
- @errorBorder: darken(spin(@errorBackground, -10), 3%);
335
+ //== Container sizes
336
+ //
337
+ //## Define the maximum width of `.container` for different screen sizes.
240
338
 
241
- @successText: #468847;
242
- @successBackground: #dff0d8;
243
- @successBorder: darken(spin(@successBackground, -10), 5%);
339
+ // Small screen / tablet
340
+ @container-tablet: (720px + @grid-gutter-width);
341
+ //** For `@screen-sm-min` and up.
342
+ @container-sm: @container-tablet;
244
343
 
245
- @infoText: #3a87ad;
246
- @infoBackground: #d9edf7;
247
- @infoBorder: darken(spin(@infoBackground, -10), 7%);
344
+ // Medium screen / desktop
345
+ @container-desktop: (940px + @grid-gutter-width);
346
+ //** For `@screen-md-min` and up.
347
+ @container-md: @container-desktop;
248
348
 
349
+ // Large screen / wide desktop
350
+ @container-large-desktop: (1140px + @grid-gutter-width);
351
+ //** For `@screen-lg-min` and up.
352
+ @container-lg: @container-large-desktop;
249
353
 
250
- // Tooltips and popovers
251
- // -------------------------
252
- @tooltipColor: #fff;
253
- @tooltipBackground: #000;
254
- @tooltipArrowWidth: 5px;
255
- @tooltipArrowColor: @tooltipBackground;
256
354
 
257
- @popoverBackground: #fff;
258
- @popoverArrowWidth: 10px;
259
- @popoverArrowColor: #fff;
260
- @popoverTitleBackground: darken(@popoverBackground, 3%);
355
+ //== Navbar
356
+ //
357
+ //##
358
+
359
+ // Basics of a navbar
360
+ @navbar-height: 50px;
361
+ @navbar-margin-bottom: @line-height-computed;
362
+ @navbar-border-radius: @border-radius-base;
363
+ @navbar-padding-horizontal: floor((@grid-gutter-width / 2));
364
+ @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
365
+ @navbar-collapse-max-height: 340px;
366
+
367
+ @navbar-default-color: #777;
368
+ @navbar-default-bg: #f8f8f8;
369
+ @navbar-default-border: darken(@navbar-default-bg, 6.5%);
370
+
371
+ // Navbar links
372
+ @navbar-default-link-color: #777;
373
+ @navbar-default-link-hover-color: #333;
374
+ @navbar-default-link-hover-bg: transparent;
375
+ @navbar-default-link-active-color: #555;
376
+ @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
377
+ @navbar-default-link-disabled-color: #ccc;
378
+ @navbar-default-link-disabled-bg: transparent;
379
+
380
+ // Navbar brand label
381
+ @navbar-default-brand-color: @navbar-default-link-color;
382
+ @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
383
+ @navbar-default-brand-hover-bg: transparent;
384
+
385
+ // Navbar toggle
386
+ @navbar-default-toggle-hover-bg: #ddd;
387
+ @navbar-default-toggle-icon-bar-bg: #888;
388
+ @navbar-default-toggle-border-color: #ddd;
389
+
390
+
391
+ //=== Inverted navbar
392
+ // Reset inverted navbar basics
393
+ @navbar-inverse-color: lighten(@gray-light, 15%);
394
+ @navbar-inverse-bg: #222;
395
+ @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
396
+
397
+ // Inverted navbar links
398
+ @navbar-inverse-link-color: lighten(@gray-light, 15%);
399
+ @navbar-inverse-link-hover-color: #fff;
400
+ @navbar-inverse-link-hover-bg: transparent;
401
+ @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
402
+ @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
403
+ @navbar-inverse-link-disabled-color: #444;
404
+ @navbar-inverse-link-disabled-bg: transparent;
405
+
406
+ // Inverted navbar brand label
407
+ @navbar-inverse-brand-color: @navbar-inverse-link-color;
408
+ @navbar-inverse-brand-hover-color: #fff;
409
+ @navbar-inverse-brand-hover-bg: transparent;
410
+
411
+ // Inverted navbar toggle
412
+ @navbar-inverse-toggle-hover-bg: #333;
413
+ @navbar-inverse-toggle-icon-bar-bg: #fff;
414
+ @navbar-inverse-toggle-border-color: #333;
415
+
416
+
417
+ //== Navs
418
+ //
419
+ //##
261
420
 
262
- // Special enhancement for popovers
263
- @popoverArrowOuterWidth: @popoverArrowWidth + 1;
264
- @popoverArrowOuterColor: rgba(0,0,0,.25);
421
+ //=== Shared nav styles
422
+ @nav-link-padding: 10px 15px;
423
+ @nav-link-hover-bg: @gray-lighter;
265
424
 
425
+ @nav-disabled-link-color: @gray-light;
426
+ @nav-disabled-link-hover-color: @gray-light;
266
427
 
428
+ //== Tabs
429
+ @nav-tabs-border-color: #ddd;
267
430
 
268
- // GRID
269
- // --------------------------------------------------
431
+ @nav-tabs-link-hover-border-color: @gray-lighter;
432
+
433
+ @nav-tabs-active-link-hover-bg: @body-bg;
434
+ @nav-tabs-active-link-hover-color: @gray;
435
+ @nav-tabs-active-link-hover-border-color: #ddd;
436
+
437
+ @nav-tabs-justified-link-border-color: #ddd;
438
+ @nav-tabs-justified-active-link-border-color: @body-bg;
439
+
440
+ //== Pills
441
+ @nav-pills-border-radius: @border-radius-base;
442
+ @nav-pills-active-link-hover-bg: @component-active-bg;
443
+ @nav-pills-active-link-hover-color: @component-active-color;
444
+
445
+
446
+ //== Pagination
447
+ //
448
+ //##
449
+
450
+ @pagination-color: @link-color;
451
+ @pagination-bg: #fff;
452
+ @pagination-border: #ddd;
453
+
454
+ @pagination-hover-color: @link-hover-color;
455
+ @pagination-hover-bg: @gray-lighter;
456
+ @pagination-hover-border: #ddd;
270
457
 
458
+ @pagination-active-color: #fff;
459
+ @pagination-active-bg: @brand-primary;
460
+ @pagination-active-border: @brand-primary;
271
461
 
272
- // Default 940px grid
273
- // -------------------------
274
- @gridColumns: 12;
275
- @gridColumnWidth: 60px;
276
- @gridGutterWidth: 20px;
277
- @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
462
+ @pagination-disabled-color: @gray-light;
463
+ @pagination-disabled-bg: #fff;
464
+ @pagination-disabled-border: #ddd;
278
465
 
279
- // 1200px min
280
- @gridColumnWidth1200: 70px;
281
- @gridGutterWidth1200: 30px;
282
- @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
283
466
 
284
- // 768px-979px
285
- @gridColumnWidth768: 42px;
286
- @gridGutterWidth768: 20px;
287
- @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
467
+ //== Pager
468
+ //
469
+ //##
470
+
471
+ @pager-bg: @pagination-bg;
472
+ @pager-border: @pagination-border;
473
+ @pager-border-radius: 15px;
474
+
475
+ @pager-hover-bg: @pagination-hover-bg;
476
+
477
+ @pager-active-bg: @pagination-active-bg;
478
+ @pager-active-color: @pagination-active-color;
479
+
480
+ @pager-disabled-color: @pagination-disabled-color;
481
+
482
+
483
+ //== Jumbotron
484
+ //
485
+ //##
486
+
487
+ @jumbotron-padding: 30px;
488
+ @jumbotron-color: inherit;
489
+ @jumbotron-bg: @gray-lighter;
490
+ @jumbotron-heading-color: inherit;
491
+ @jumbotron-font-size: ceil((@font-size-base * 1.5));
492
+ @jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
493
+
494
+
495
+ //== Form states and alerts
496
+ //
497
+ //## Define colors for form feedback states and, by default, alerts.
498
+
499
+ @state-success-text: #3c763d;
500
+ @state-success-bg: #dff0d8;
501
+ @state-success-border: darken(spin(@state-success-bg, -10), 5%);
502
+
503
+ @state-info-text: #31708f;
504
+ @state-info-bg: #d9edf7;
505
+ @state-info-border: darken(spin(@state-info-bg, -10), 7%);
506
+
507
+ @state-warning-text: #8a6d3b;
508
+ @state-warning-bg: #fcf8e3;
509
+ @state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
510
+
511
+ @state-danger-text: #a94442;
512
+ @state-danger-bg: #f2dede;
513
+ @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
514
+
515
+
516
+ //== Tooltips
517
+ //
518
+ //##
519
+
520
+ //** Tooltip max width
521
+ @tooltip-max-width: 200px;
522
+ //** Tooltip text color
523
+ @tooltip-color: #fff;
524
+ //** Tooltip background color
525
+ @tooltip-bg: #000;
526
+ @tooltip-opacity: .9;
527
+
528
+ //** Tooltip arrow width
529
+ @tooltip-arrow-width: 5px;
530
+ //** Tooltip arrow color
531
+ @tooltip-arrow-color: @tooltip-bg;
532
+
533
+
534
+ //== Popovers
535
+ //
536
+ //##
537
+
538
+ //** Popover body background color
539
+ @popover-bg: #fff;
540
+ //** Popover maximum width
541
+ @popover-max-width: 276px;
542
+ //** Popover border color
543
+ @popover-border-color: rgba(0,0,0,.2);
544
+ //** Popover fallback border color
545
+ @popover-fallback-border-color: #ccc;
546
+
547
+ //** Popover title background color
548
+ @popover-title-bg: darken(@popover-bg, 3%);
549
+
550
+ //** Popover arrow width
551
+ @popover-arrow-width: 10px;
552
+ //** Popover arrow color
553
+ @popover-arrow-color: @popover-bg;
554
+
555
+ //** Popover outer arrow width
556
+ @popover-arrow-outer-width: (@popover-arrow-width + 1);
557
+ //** Popover outer arrow color
558
+ @popover-arrow-outer-color: fadein(@popover-border-color, 5%);
559
+ //** Popover outer arrow fallback color
560
+ @popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
561
+
562
+
563
+ //== Labels
564
+ //
565
+ //##
566
+
567
+ //** Default label background color
568
+ @label-default-bg: @gray-light;
569
+ //** Primary label background color
570
+ @label-primary-bg: @brand-primary;
571
+ //** Success label background color
572
+ @label-success-bg: @brand-success;
573
+ //** Info label background color
574
+ @label-info-bg: @brand-info;
575
+ //** Warning label background color
576
+ @label-warning-bg: @brand-warning;
577
+ //** Danger label background color
578
+ @label-danger-bg: @brand-danger;
579
+
580
+ //** Default label text color
581
+ @label-color: #fff;
582
+ //** Default text color of a linked label
583
+ @label-link-hover-color: #fff;
584
+
585
+
586
+ //== Modals
587
+ //
588
+ //##
589
+
590
+ //** Padding applied to the modal body
591
+ @modal-inner-padding: 15px;
592
+
593
+ //** Padding applied to the modal title
594
+ @modal-title-padding: 15px;
595
+ //** Modal title line-height
596
+ @modal-title-line-height: @line-height-base;
597
+
598
+ //** Background color of modal content area
599
+ @modal-content-bg: #fff;
600
+ //** Modal content border color
601
+ @modal-content-border-color: rgba(0,0,0,.2);
602
+ //** Modal content border color **for IE8**
603
+ @modal-content-fallback-border-color: #999;
604
+
605
+ //** Modal backdrop background color
606
+ @modal-backdrop-bg: #000;
607
+ //** Modal backdrop opacity
608
+ @modal-backdrop-opacity: .5;
609
+ //** Modal header border color
610
+ @modal-header-border-color: #e5e5e5;
611
+ //** Modal footer border color
612
+ @modal-footer-border-color: @modal-header-border-color;
613
+
614
+ @modal-lg: 900px;
615
+ @modal-md: 600px;
616
+ @modal-sm: 300px;
617
+
618
+
619
+ //== Alerts
620
+ //
621
+ //## Define alert colors, border radius, and padding.
288
622
 
623
+ @alert-padding: 15px;
624
+ @alert-border-radius: @border-radius-base;
625
+ @alert-link-font-weight: bold;
289
626
 
290
- // Fluid grid
291
- // -------------------------
292
- @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
293
- @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
627
+ @alert-success-bg: @state-success-bg;
628
+ @alert-success-text: @state-success-text;
629
+ @alert-success-border: @state-success-border;
294
630
 
295
- // 1200px min
296
- @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
297
- @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
631
+ @alert-info-bg: @state-info-bg;
632
+ @alert-info-text: @state-info-text;
633
+ @alert-info-border: @state-info-border;
298
634
 
299
- // 768px-979px
300
- @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
301
- @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
635
+ @alert-warning-bg: @state-warning-bg;
636
+ @alert-warning-text: @state-warning-text;
637
+ @alert-warning-border: @state-warning-border;
638
+
639
+ @alert-danger-bg: @state-danger-bg;
640
+ @alert-danger-text: @state-danger-text;
641
+ @alert-danger-border: @state-danger-border;
642
+
643
+
644
+ //== Progress bars
645
+ //
646
+ //##
647
+
648
+ //** Background color of the whole progress component
649
+ @progress-bg: #f5f5f5;
650
+ //** Progress bar text color
651
+ @progress-bar-color: #fff;
652
+ //** Variable for setting rounded corners on progress bar.
653
+ @progress-border-radius: @border-radius-base;
654
+
655
+ //** Default progress bar color
656
+ @progress-bar-bg: @brand-primary;
657
+ //** Success progress bar color
658
+ @progress-bar-success-bg: @brand-success;
659
+ //** Warning progress bar color
660
+ @progress-bar-warning-bg: @brand-warning;
661
+ //** Danger progress bar color
662
+ @progress-bar-danger-bg: @brand-danger;
663
+ //** Info progress bar color
664
+ @progress-bar-info-bg: @brand-info;
665
+
666
+
667
+ //== List group
668
+ //
669
+ //##
670
+
671
+ //** Background color on `.list-group-item`
672
+ @list-group-bg: #fff;
673
+ //** `.list-group-item` border color
674
+ @list-group-border: #ddd;
675
+ //** List group border radius
676
+ @list-group-border-radius: @border-radius-base;
677
+
678
+ //** Background color of single list items on hover
679
+ @list-group-hover-bg: #f5f5f5;
680
+ //** Text color of active list items
681
+ @list-group-active-color: @component-active-color;
682
+ //** Background color of active list items
683
+ @list-group-active-bg: @component-active-bg;
684
+ //** Border color of active list elements
685
+ @list-group-active-border: @list-group-active-bg;
686
+ //** Text color for content within active list items
687
+ @list-group-active-text-color: lighten(@list-group-active-bg, 40%);
688
+
689
+ //** Text color of disabled list items
690
+ @list-group-disabled-color: @gray-light;
691
+ //** Background color of disabled list items
692
+ @list-group-disabled-bg: @gray-lighter;
693
+ //** Text color for content within disabled list items
694
+ @list-group-disabled-text-color: @list-group-disabled-color;
695
+
696
+ @list-group-link-color: #555;
697
+ @list-group-link-hover-color: @list-group-link-color;
698
+ @list-group-link-heading-color: #333;
699
+
700
+
701
+ //== Panels
702
+ //
703
+ //##
704
+
705
+ @panel-bg: #fff;
706
+ @panel-body-padding: 15px;
707
+ @panel-heading-padding: 10px 15px;
708
+ @panel-footer-padding: @panel-heading-padding;
709
+ @panel-border-radius: @border-radius-base;
710
+
711
+ //** Border color for elements within panels
712
+ @panel-inner-border: #ddd;
713
+ @panel-footer-bg: #f5f5f5;
714
+
715
+ @panel-default-text: @gray-dark;
716
+ @panel-default-border: #ddd;
717
+ @panel-default-heading-bg: #f5f5f5;
718
+
719
+ @panel-primary-text: #fff;
720
+ @panel-primary-border: @brand-primary;
721
+ @panel-primary-heading-bg: @brand-primary;
722
+
723
+ @panel-success-text: @state-success-text;
724
+ @panel-success-border: @state-success-border;
725
+ @panel-success-heading-bg: @state-success-bg;
726
+
727
+ @panel-info-text: @state-info-text;
728
+ @panel-info-border: @state-info-border;
729
+ @panel-info-heading-bg: @state-info-bg;
730
+
731
+ @panel-warning-text: @state-warning-text;
732
+ @panel-warning-border: @state-warning-border;
733
+ @panel-warning-heading-bg: @state-warning-bg;
734
+
735
+ @panel-danger-text: @state-danger-text;
736
+ @panel-danger-border: @state-danger-border;
737
+ @panel-danger-heading-bg: @state-danger-bg;
738
+
739
+
740
+ //== Thumbnails
741
+ //
742
+ //##
743
+
744
+ //** Padding around the thumbnail image
745
+ @thumbnail-padding: 4px;
746
+ //** Thumbnail background color
747
+ @thumbnail-bg: @body-bg;
748
+ //** Thumbnail border color
749
+ @thumbnail-border: #ddd;
750
+ //** Thumbnail border radius
751
+ @thumbnail-border-radius: @border-radius-base;
752
+
753
+ //** Custom text color for thumbnail captions
754
+ @thumbnail-caption-color: @text-color;
755
+ //** Padding around the thumbnail caption
756
+ @thumbnail-caption-padding: 9px;
757
+
758
+
759
+ //== Wells
760
+ //
761
+ //##
762
+
763
+ @well-bg: #f5f5f5;
764
+ @well-border: darken(@well-bg, 7%);
765
+
766
+
767
+ //== Badges
768
+ //
769
+ //##
770
+
771
+ @badge-color: #fff;
772
+ //** Linked badge text color on hover
773
+ @badge-link-hover-color: #fff;
774
+ @badge-bg: @gray-light;
775
+
776
+ //** Badge text color in active nav link
777
+ @badge-active-color: @link-color;
778
+ //** Badge background color in active nav link
779
+ @badge-active-bg: #fff;
780
+
781
+ @badge-font-weight: bold;
782
+ @badge-line-height: 1;
783
+ @badge-border-radius: 10px;
784
+
785
+
786
+ //== Breadcrumbs
787
+ //
788
+ //##
789
+
790
+ @breadcrumb-padding-vertical: 8px;
791
+ @breadcrumb-padding-horizontal: 15px;
792
+ //** Breadcrumb background color
793
+ @breadcrumb-bg: #f5f5f5;
794
+ //** Breadcrumb text color
795
+ @breadcrumb-color: #ccc;
796
+ //** Text color of current page in the breadcrumb
797
+ @breadcrumb-active-color: @gray-light;
798
+ //** Textual separator for between breadcrumb elements
799
+ @breadcrumb-separator: "/";
800
+
801
+
802
+ //== Carousel
803
+ //
804
+ //##
805
+
806
+ @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
807
+
808
+ @carousel-control-color: #fff;
809
+ @carousel-control-width: 15%;
810
+ @carousel-control-opacity: .5;
811
+ @carousel-control-font-size: 20px;
812
+
813
+ @carousel-indicator-active-bg: #fff;
814
+ @carousel-indicator-border-color: #fff;
815
+
816
+ @carousel-caption-color: #fff;
817
+
818
+
819
+ //== Close
820
+ //
821
+ //##
822
+
823
+ @close-font-weight: bold;
824
+ @close-color: #000;
825
+ @close-text-shadow: 0 1px 0 #fff;
826
+
827
+
828
+ //== Code
829
+ //
830
+ //##
831
+
832
+ @code-color: #c7254e;
833
+ @code-bg: #f9f2f4;
834
+
835
+ @kbd-color: #fff;
836
+ @kbd-bg: #333;
837
+
838
+ @pre-bg: #f5f5f5;
839
+ @pre-color: @gray-dark;
840
+ @pre-border-color: #ccc;
841
+ @pre-scrollable-max-height: 340px;
842
+
843
+
844
+ //== Type
845
+ //
846
+ //##
847
+
848
+ //** Horizontal offset for forms and lists.
849
+ @component-offset-horizontal: 180px;
850
+ //** Text muted color
851
+ @text-muted: @gray-light;
852
+ //** Abbreviations and acronyms border color
853
+ @abbr-border-color: @gray-light;
854
+ //** Headings small color
855
+ @headings-small-color: @gray-light;
856
+ //** Blockquote small color
857
+ @blockquote-small-color: @gray-light;
858
+ //** Blockquote font size
859
+ @blockquote-font-size: (@font-size-base * 1.25);
860
+ //** Blockquote border color
861
+ @blockquote-border-color: @gray-lighter;
862
+ //** Page header border color
863
+ @page-header-border-color: @gray-lighter;
864
+ //** Width of horizontal description list titles
865
+ @dl-horizontal-offset: @component-offset-horizontal;
866
+ //** Point at which .dl-horizontal becomes horizontal
867
+ @dl-horizontal-breakpoint: @grid-float-breakpoint;
868
+ //** Horizontal line color.
869
+ @hr-border: @gray-lighter;