bootstrap-generators 2.3.2 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +12 -2
  3. data/{LICENSE.txt → MIT-LICENSE} +1 -3
  4. data/README.md +19 -64
  5. data/Rakefile +24 -22
  6. data/bootstrap-generators.gemspec +3 -1
  7. data/lib/bootstrap-generators.rb +12 -1
  8. data/lib/bootstrap/generators/version.rb +1 -1
  9. data/lib/generators/bootstrap/install/install_generator.rb +9 -24
  10. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +498 -179
  11. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.scss +620 -0
  12. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css → starter.css} +6 -6
  13. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.less → starter.less} +7 -7
  14. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.scss → starter.scss} +7 -8
  15. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +11 -9
  16. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +9 -8
  17. data/lib/generators/bootstrap/install/templates/layouts/starter.html.erb +50 -0
  18. data/lib/generators/bootstrap/install/templates/layouts/{hero.html.haml → starter.html.haml} +0 -0
  19. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/edit.html.erb +3 -3
  20. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/index.html.erb +25 -25
  21. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/new.html.erb +2 -2
  22. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/show.html.erb +5 -5
  23. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/edit.html.haml +3 -3
  24. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/index.html.haml +20 -19
  25. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/new.html.haml +2 -2
  26. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/show.html.haml +5 -5
  27. data/readme-template.md.erb +5 -48
  28. data/test/lib/generators/bootstrap/install_generator_test.rb +3 -33
  29. data/vendor/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  30. data/vendor/assets/fonts/glyphicons-halflings-regular.svg +228 -0
  31. data/vendor/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  32. data/vendor/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  33. data/vendor/assets/javascripts/bootstrap-ie.js +2 -0
  34. data/vendor/assets/javascripts/bootstrap-ie/html5shiv.js +8 -0
  35. data/vendor/assets/javascripts/bootstrap-ie/respond.min.js +6 -0
  36. data/vendor/assets/javascripts/bootstrap.js +12 -13
  37. data/vendor/assets/javascripts/bootstrap/affix.js +126 -0
  38. data/vendor/assets/javascripts/{bootstrap-alert.js → bootstrap/alert.js} +35 -36
  39. data/vendor/assets/javascripts/bootstrap/button.js +109 -0
  40. data/vendor/assets/javascripts/bootstrap/carousel.js +217 -0
  41. data/vendor/assets/javascripts/bootstrap/collapse.js +179 -0
  42. data/vendor/assets/javascripts/bootstrap/dropdown.js +154 -0
  43. data/vendor/assets/javascripts/bootstrap/modal.js +246 -0
  44. data/vendor/assets/javascripts/bootstrap/popover.js +117 -0
  45. data/vendor/assets/javascripts/bootstrap/scrollspy.js +158 -0
  46. data/vendor/assets/javascripts/bootstrap/tab.js +135 -0
  47. data/vendor/assets/javascripts/bootstrap/tooltip.js +386 -0
  48. data/vendor/assets/javascripts/bootstrap/transition.js +56 -0
  49. data/vendor/assets/stylesheets/bootstrap.css +4638 -4000
  50. data/vendor/twitter/bootstrap/less/alerts.less +46 -58
  51. data/vendor/twitter/bootstrap/less/badges.less +51 -0
  52. data/vendor/twitter/bootstrap/less/bootstrap.less +27 -31
  53. data/vendor/twitter/bootstrap/less/breadcrumbs.less +7 -8
  54. data/vendor/twitter/bootstrap/less/button-groups.less +173 -154
  55. data/vendor/twitter/bootstrap/less/buttons.less +97 -165
  56. data/vendor/twitter/bootstrap/less/carousel.less +115 -64
  57. data/vendor/twitter/bootstrap/less/close.less +20 -19
  58. data/vendor/twitter/bootstrap/less/code.less +17 -22
  59. data/vendor/twitter/bootstrap/less/component-animations.less +10 -3
  60. data/vendor/twitter/bootstrap/less/dropdowns.less +92 -147
  61. data/vendor/twitter/bootstrap/less/forms.less +224 -561
  62. data/vendor/twitter/bootstrap/less/glyphicons.less +232 -0
  63. data/vendor/twitter/bootstrap/less/grid.less +336 -11
  64. data/vendor/twitter/bootstrap/less/input-groups.less +127 -0
  65. data/vendor/twitter/bootstrap/less/jumbotron.less +40 -0
  66. data/vendor/twitter/bootstrap/less/labels.less +58 -0
  67. data/vendor/twitter/bootstrap/less/list-group.less +88 -0
  68. data/vendor/twitter/bootstrap/less/media.less +8 -7
  69. data/vendor/twitter/bootstrap/less/mixins.less +487 -466
  70. data/vendor/twitter/bootstrap/less/modals.less +98 -52
  71. data/vendor/twitter/bootstrap/less/navbar.less +507 -383
  72. data/vendor/twitter/bootstrap/less/navs.less +169 -349
  73. data/vendor/twitter/bootstrap/less/normalize.less +396 -0
  74. data/vendor/twitter/bootstrap/less/pager.less +45 -33
  75. data/vendor/twitter/bootstrap/less/pagination.less +65 -105
  76. data/vendor/twitter/bootstrap/less/panels.less +148 -0
  77. data/vendor/twitter/bootstrap/less/popovers.less +51 -51
  78. data/vendor/twitter/bootstrap/less/print.less +100 -0
  79. data/vendor/twitter/bootstrap/less/progress-bars.less +28 -55
  80. data/vendor/twitter/bootstrap/less/responsive-utilities.less +195 -34
  81. data/vendor/twitter/bootstrap/less/scaffolding.less +101 -24
  82. data/vendor/twitter/bootstrap/less/tables.less +170 -178
  83. data/vendor/twitter/bootstrap/less/theme.less +232 -0
  84. data/vendor/twitter/bootstrap/less/thumbnails.less +11 -33
  85. data/vendor/twitter/bootstrap/less/tooltip.less +45 -20
  86. data/vendor/twitter/bootstrap/less/type.less +100 -109
  87. data/vendor/twitter/bootstrap/less/utilities.less +19 -7
  88. data/vendor/twitter/bootstrap/less/variables.less +498 -179
  89. data/vendor/twitter/bootstrap/less/wells.less +7 -7
  90. data/vendor/twitter/bootstrap/sass/_alerts.scss +46 -58
  91. data/vendor/twitter/bootstrap/sass/_badges.scss +51 -0
  92. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +8 -9
  93. data/vendor/twitter/bootstrap/sass/_button-groups.scss +173 -154
  94. data/vendor/twitter/bootstrap/sass/_buttons.scss +97 -165
  95. data/vendor/twitter/bootstrap/sass/_carousel.scss +116 -65
  96. data/vendor/twitter/bootstrap/sass/_close.scss +9 -8
  97. data/vendor/twitter/bootstrap/sass/_code.scss +16 -21
  98. data/vendor/twitter/bootstrap/sass/_component-animations.scss +10 -3
  99. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +94 -148
  100. data/vendor/twitter/bootstrap/sass/_forms.scss +220 -559
  101. data/vendor/twitter/bootstrap/sass/_glyphicons.scss +232 -0
  102. data/vendor/twitter/bootstrap/sass/_grid.scss +336 -11
  103. data/vendor/twitter/bootstrap/sass/_input-groups.scss +127 -0
  104. data/vendor/twitter/bootstrap/sass/_jumbotron.scss +40 -0
  105. data/vendor/twitter/bootstrap/sass/_labels.scss +58 -0
  106. data/vendor/twitter/bootstrap/sass/_list-group.scss +88 -0
  107. data/vendor/twitter/bootstrap/sass/_media.scss +8 -7
  108. data/vendor/twitter/bootstrap/sass/_mixins.scss +465 -433
  109. data/vendor/twitter/bootstrap/sass/_modals.scss +102 -52
  110. data/vendor/twitter/bootstrap/sass/_navbar.scss +511 -383
  111. data/vendor/twitter/bootstrap/sass/_navs.scss +169 -349
  112. data/vendor/twitter/bootstrap/sass/_normalize.scss +396 -0
  113. data/vendor/twitter/bootstrap/sass/_pager.scss +45 -33
  114. data/vendor/twitter/bootstrap/sass/_pagination.scss +65 -105
  115. data/vendor/twitter/bootstrap/sass/_panels.scss +148 -0
  116. data/vendor/twitter/bootstrap/sass/_popovers.scss +51 -51
  117. data/vendor/twitter/bootstrap/sass/_print.scss +100 -0
  118. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +28 -55
  119. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +180 -45
  120. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +101 -24
  121. data/vendor/twitter/bootstrap/sass/_tables.scss +169 -168
  122. data/vendor/twitter/bootstrap/sass/_theme.scss +232 -0
  123. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +11 -33
  124. data/vendor/twitter/bootstrap/sass/_tooltip.scss +45 -20
  125. data/vendor/twitter/bootstrap/sass/_type.scss +101 -110
  126. data/vendor/twitter/bootstrap/sass/_utilities.scss +19 -22
  127. data/vendor/twitter/bootstrap/sass/_variables.scss +498 -179
  128. data/vendor/twitter/bootstrap/sass/_wells.scss +7 -7
  129. data/vendor/twitter/bootstrap/sass/bootstrap.scss +29 -33
  130. metadata +47 -56
  131. data/lib/bootstrap/generators/engine.rb +0 -14
  132. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +0 -301
  133. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css +0 -18
  134. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.less +0 -19
  135. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.scss +0 -19
  136. data/lib/generators/bootstrap/install/templates/config/initializers/simple_form.rb +0 -176
  137. data/lib/generators/bootstrap/install/templates/config/locales/simple_form.en.yml +0 -24
  138. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.erb +0 -13
  139. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.haml +0 -10
  140. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.erb +0 -80
  141. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.haml +0 -94
  142. data/lib/generators/bootstrap/install/templates/layouts/hero.html.erb +0 -53
  143. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  144. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  145. data/vendor/assets/javascripts/bootstrap-affix.js +0 -117
  146. data/vendor/assets/javascripts/bootstrap-button.js +0 -105
  147. data/vendor/assets/javascripts/bootstrap-carousel.js +0 -207
  148. data/vendor/assets/javascripts/bootstrap-collapse.js +0 -167
  149. data/vendor/assets/javascripts/bootstrap-dropdown.js +0 -169
  150. data/vendor/assets/javascripts/bootstrap-modal.js +0 -247
  151. data/vendor/assets/javascripts/bootstrap-popover.js +0 -114
  152. data/vendor/assets/javascripts/bootstrap-scrollspy.js +0 -162
  153. data/vendor/assets/javascripts/bootstrap-tab.js +0 -144
  154. data/vendor/assets/javascripts/bootstrap-tooltip.js +0 -361
  155. data/vendor/assets/javascripts/bootstrap-transition.js +0 -60
  156. data/vendor/assets/javascripts/bootstrap-typeahead.js +0 -335
  157. data/vendor/assets/stylesheets/bootstrap-responsive.css +0 -1109
  158. data/vendor/twitter/bootstrap/less/accordion.less +0 -34
  159. data/vendor/twitter/bootstrap/less/hero-unit.less +0 -25
  160. data/vendor/twitter/bootstrap/less/labels-badges.less +0 -84
  161. data/vendor/twitter/bootstrap/less/layouts.less +0 -16
  162. data/vendor/twitter/bootstrap/less/reset.less +0 -216
  163. data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +0 -28
  164. data/vendor/twitter/bootstrap/less/responsive-767px-max.less +0 -193
  165. data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +0 -19
  166. data/vendor/twitter/bootstrap/less/responsive-navbar.less +0 -189
  167. data/vendor/twitter/bootstrap/less/responsive.less +0 -48
  168. data/vendor/twitter/bootstrap/less/sprites.less +0 -197
  169. data/vendor/twitter/bootstrap/sass/_accordion.scss +0 -34
  170. data/vendor/twitter/bootstrap/sass/_hero-unit.scss +0 -25
  171. data/vendor/twitter/bootstrap/sass/_labels-badges.scss +0 -83
  172. data/vendor/twitter/bootstrap/sass/_layouts.scss +0 -16
  173. data/vendor/twitter/bootstrap/sass/_reset.scss +0 -216
  174. data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +0 -28
  175. data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +0 -193
  176. data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +0 -19
  177. data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +0 -189
  178. data/vendor/twitter/bootstrap/sass/_sprites.scss +0 -197
  179. data/vendor/twitter/bootstrap/sass/responsive.scss +0 -48
@@ -3,28 +3,40 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // Quick floats
6
+ // Floats
7
+ // -------------------------
8
+
9
+ .clearfix {
10
+ .clearfix();
11
+ }
7
12
  .pull-right {
8
- float: right;
13
+ float: right !important;
9
14
  }
10
15
  .pull-left {
11
- float: left;
16
+ float: left !important;
12
17
  }
13
18
 
19
+
14
20
  // Toggling content
21
+ // -------------------------
22
+
15
23
  .hide {
16
- display: none;
24
+ display: none !important;
17
25
  }
18
26
  .show {
19
- display: block;
27
+ display: block !important;
20
28
  }
21
-
22
- // Visibility
23
29
  .invisible {
24
30
  visibility: hidden;
25
31
  }
32
+ .text-hide {
33
+ .hide-text();
34
+ }
35
+
26
36
 
27
37
  // For Affix plugin
38
+ // -------------------------
39
+
28
40
  .affix {
29
41
  position: fixed;
30
42
  }
@@ -6,131 +6,177 @@
6
6
  // Global values
7
7
  // --------------------------------------------------
8
8
 
9
-
10
9
  // Grays
11
10
  // -------------------------
12
- @black: #000;
13
- @grayDarker: #222;
14
- @grayDark: #333;
15
- @gray: #555;
16
- @grayLight: #999;
17
- @grayLighter: #eee;
18
- @white: #fff;
19
11
 
12
+ @gray-darker: lighten(#000, 13.5%); // #222
13
+ @gray-dark: lighten(#000, 20%); // #333
14
+ @gray: lighten(#000, 33.5%); // #555
15
+ @gray-light: lighten(#000, 60%); // #999
16
+ @gray-lighter: lighten(#000, 93.5%); // #eee
20
17
 
21
- // Accent colors
18
+ // Brand colors
22
19
  // -------------------------
23
- @blue: #049cdb;
24
- @blueDark: #0064cd;
25
- @green: #46a546;
26
- @red: #9d261d;
27
- @yellow: #ffc40d;
28
- @orange: #f89406;
29
- @pink: #c3325f;
30
- @purple: #7a43b6;
31
20
 
21
+ @brand-primary: #428bca;
22
+ @brand-success: #5cb85c;
23
+ @brand-warning: #f0ad4e;
24
+ @brand-danger: #d9534f;
25
+ @brand-info: #5bc0de;
32
26
 
33
27
  // Scaffolding
34
28
  // -------------------------
35
- @bodyBackground: @white;
36
- @textColor: @grayDark;
37
29
 
30
+ @body-bg: #fff;
31
+ @text-color: @gray-dark;
38
32
 
39
33
  // Links
40
34
  // -------------------------
41
- @linkColor: #08c;
42
- @linkColorHover: darken(@linkColor, 15%);
43
35
 
36
+ @link-color: @brand-primary;
37
+ @link-hover-color: darken(@link-color, 15%);
44
38
 
45
39
  // Typography
46
40
  // -------------------------
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
41
 
51
- @baseFontSize: 14px;
52
- @baseFontFamily: @sansFontFamily;
53
- @baseLineHeight: 20px;
54
- @altFontFamily: @serifFontFamily;
42
+ @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
43
+ @font-family-serif: Georgia, "Times New Roman", Times, serif;
44
+ @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
45
+ @font-family-base: @font-family-sans-serif;
46
+
47
+ @font-size-base: 14px;
48
+ @font-size-large: ceil(@font-size-base * 1.25); // ~18px
49
+ @font-size-small: ceil(@font-size-base * 0.85); // ~12px
50
+
51
+ @line-height-base: 1.428571429; // 20/14
52
+ @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
53
+
54
+ @headings-font-family: @font-family-base;
55
+ @headings-font-weight: 500;
56
+ @headings-line-height: 1.1;
55
57
 
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
58
+ // Iconography
59
+ // -------------------------
60
+
61
+ @icon-font-path: "../fonts/";
62
+ @icon-font-name: "glyphicons-halflings-regular";
59
63
 
60
64
 
61
- // Component sizing
65
+ // Components
62
66
  // -------------------------
63
- // Based on 14px font-size and 20px line-height
67
+ // Based on 14px font-size and 1.428 line-height (~20px to start)
68
+
69
+ @padding-base-vertical: 6px;
70
+ @padding-base-horizontal: 12px;
71
+
72
+ @padding-large-vertical: 10px;
73
+ @padding-large-horizontal: 16px;
64
74
 
65
- @fontSizeLarge: @baseFontSize * 1.25; // ~18px
66
- @fontSizeSmall: @baseFontSize * 0.85; // ~12px
67
- @fontSizeMini: @baseFontSize * 0.75; // ~11px
75
+ @padding-small-vertical: 5px;
76
+ @padding-small-horizontal: 10px;
68
77
 
69
- @paddingLarge: 11px 19px; // 44px
70
- @paddingSmall: 2px 10px; // 26px
71
- @paddingMini: 0 6px; // 22px
78
+ @line-height-large: 1.33;
79
+ @line-height-small: 1.5;
72
80
 
73
- @baseBorderRadius: 4px;
74
- @borderRadiusLarge: 6px;
75
- @borderRadiusSmall: 3px;
81
+ @border-radius-base: 4px;
82
+ @border-radius-large: 6px;
83
+ @border-radius-small: 3px;
76
84
 
85
+ @component-active-bg: @brand-primary;
86
+
87
+ @caret-width-base: 4px;
88
+ @caret-width-large: 5px;
77
89
 
78
90
  // Tables
79
91
  // -------------------------
80
- @tableBackground: transparent; // overall background-color
81
- @tableBackgroundAccent: #f9f9f9; // for striping
82
- @tableBackgroundHover: #f5f5f5; // for hover
83
- @tableBorder: #ddd; // table and cell border
92
+
93
+ @table-cell-padding: 8px;
94
+ @table-condensed-cell-padding: 5px;
95
+
96
+ @table-bg: transparent; // overall background-color
97
+ @table-bg-accent: #f9f9f9; // for striping
98
+ @table-bg-hover: #f5f5f5;
99
+ @table-bg-active: @table-bg-hover;
100
+
101
+ @table-border-color: #ddd; // table and cell border
102
+
84
103
 
85
104
  // Buttons
86
105
  // -------------------------
87
- @btnBackground: @white;
88
- @btnBackgroundHighlight: darken(@white, 10%);
89
- @btnBorder: #ccc;
90
106
 
91
- @btnPrimaryBackground: @linkColor;
92
- @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
107
+ @btn-font-weight: normal;
108
+
109
+ @btn-default-color: #333;
110
+ @btn-default-bg: #fff;
111
+ @btn-default-border: #ccc;
112
+
113
+ @btn-primary-color: #fff;
114
+ @btn-primary-bg: @brand-primary;
115
+ @btn-primary-border: darken(@btn-primary-bg, 5%);
93
116
 
94
- @btnInfoBackground: #5bc0de;
95
- @btnInfoBackgroundHighlight: #2f96b4;
117
+ @btn-success-color: #fff;
118
+ @btn-success-bg: @brand-success;
119
+ @btn-success-border: darken(@btn-success-bg, 5%);
96
120
 
97
- @btnSuccessBackground: #62c462;
98
- @btnSuccessBackgroundHighlight: #51a351;
121
+ @btn-warning-color: #fff;
122
+ @btn-warning-bg: @brand-warning;
123
+ @btn-warning-border: darken(@btn-warning-bg, 5%);
99
124
 
100
- @btnWarningBackground: lighten(@orange, 15%);
101
- @btnWarningBackgroundHighlight: @orange;
125
+ @btn-danger-color: #fff;
126
+ @btn-danger-bg: @brand-danger;
127
+ @btn-danger-border: darken(@btn-danger-bg, 5%);
102
128
 
103
- @btnDangerBackground: #ee5f5b;
104
- @btnDangerBackgroundHighlight: #bd362f;
129
+ @btn-info-color: #fff;
130
+ @btn-info-bg: @brand-info;
131
+ @btn-info-border: darken(@btn-info-bg, 5%);
105
132
 
106
- @btnInverseBackground: #444;
107
- @btnInverseBackgroundHighlight: @grayDarker;
133
+ @btn-link-disabled-color: @gray-light;
108
134
 
109
135
 
110
136
  // Forms
111
137
  // -------------------------
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
138
+
139
+ @input-bg: #fff;
140
+ @input-bg-disabled: @gray-lighter;
141
+
142
+ @input-color: @gray;
143
+ @input-border: #ccc;
144
+ @input-border-radius: @border-radius-base;
145
+ @input-border-focus: #66afe9;
146
+
147
+ @input-color-placeholder: @gray-light;
148
+
149
+ @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
150
+ @input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
151
+ @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
152
+
153
+ @legend-color: @gray-dark;
154
+ @legend-border-color: #e5e5e5;
155
+
156
+ @input-group-addon-bg: @gray-lighter;
157
+ @input-group-addon-border-color: @input-border;
118
158
 
119
159
 
120
160
  // Dropdowns
121
161
  // -------------------------
122
- @dropdownBackground: @white;
123
- @dropdownBorder: rgba(0,0,0,.2);
124
- @dropdownDividerTop: #e5e5e5;
125
- @dropdownDividerBottom: @white;
126
162
 
127
- @dropdownLinkColor: @grayDark;
128
- @dropdownLinkColorHover: @white;
129
- @dropdownLinkColorActive: @white;
163
+ @dropdown-bg: #fff;
164
+ @dropdown-border: rgba(0,0,0,.15);
165
+ @dropdown-fallback-border: #ccc;
166
+ @dropdown-divider-bg: #e5e5e5;
167
+
168
+ @dropdown-link-active-color: #fff;
169
+ @dropdown-link-active-bg: @component-active-bg;
170
+
171
+ @dropdown-link-color: @gray-dark;
172
+ @dropdown-link-hover-color: #fff;
173
+ @dropdown-link-hover-bg: @dropdown-link-active-bg;
130
174
 
131
- @dropdownLinkBackgroundActive: @linkColor;
132
- @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
175
+ @dropdown-link-disabled-color: @gray-light;
133
176
 
177
+ @dropdown-header-color: @gray-light;
178
+
179
+ @dropdown-caret-color: #000;
134
180
 
135
181
 
136
182
  // COMPONENT VARIABLES
@@ -141,161 +187,434 @@
141
187
  // -------------------------
142
188
  // Used for a bird's eye view of components dependent on the z-axis
143
189
  // Try to avoid customizing these :)
144
- @zindexDropdown: 1000;
145
- @zindexPopover: 1010;
146
- @zindexTooltip: 1030;
147
- @zindexFixedNavbar: 1030;
148
- @zindexModalBackdrop: 1040;
149
- @zindexModal: 1050;
150
190
 
191
+ @zindex-navbar: 1000;
192
+ @zindex-dropdown: 1000;
193
+ @zindex-popover: 1010;
194
+ @zindex-tooltip: 1030;
195
+ @zindex-navbar-fixed: 1030;
196
+ @zindex-modal-background: 1040;
197
+ @zindex-modal: 1050;
198
+
199
+ // Media queries breakpoints
200
+ // --------------------------------------------------
201
+
202
+ // Extra small screen / phone
203
+ @screen-xs: 480px;
204
+ @screen-phone: @screen-xs;
205
+
206
+ // Small screen / tablet
207
+ @screen-sm: 768px;
208
+ @screen-tablet: @screen-sm;
209
+
210
+ // Medium screen / desktop
211
+ @screen-md: 992px;
212
+ @screen-desktop: @screen-md;
213
+
214
+ // Large screen / wide desktop
215
+ @screen-lg: 1200px;
216
+ @screen-lg-desktop: @screen-lg;
151
217
 
152
- // Sprite icons path
218
+ // So media queries don't overlap when required, provide a maximum
219
+ @screen-xs-max: (@screen-sm - 1);
220
+ @screen-sm-max: (@screen-md - 1);
221
+ @screen-md-max: (@screen-lg - 1);
222
+
223
+
224
+ // Grid system
225
+ // --------------------------------------------------
226
+
227
+ // Number of columns in the grid system
228
+ @grid-columns: 12;
229
+ // Padding, to be divided by two and applied to the left and right of all columns
230
+ @grid-gutter-width: 30px;
231
+ // Point at which the navbar stops collapsing
232
+ @grid-float-breakpoint: @screen-tablet;
233
+
234
+
235
+ // Navbar
153
236
  // -------------------------
154
- @iconSpritePath: "../img/glyphicons-halflings.png";
155
- @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
237
+
238
+ // Basics of a navbar
239
+ @navbar-height: 50px;
240
+ @navbar-margin-bottom: @line-height-computed;
241
+ @navbar-default-color: #777;
242
+ @navbar-default-bg: #f8f8f8;
243
+ @navbar-default-border: darken(@navbar-default-bg, 6.5%);
244
+ @navbar-border-radius: @border-radius-base;
245
+ @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
246
+ @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
247
+
248
+ // Navbar links
249
+ @navbar-default-link-color: #777;
250
+ @navbar-default-link-hover-color: #333;
251
+ @navbar-default-link-hover-bg: transparent;
252
+ @navbar-default-link-active-color: #555;
253
+ @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
254
+ @navbar-default-link-disabled-color: #ccc;
255
+ @navbar-default-link-disabled-bg: transparent;
256
+
257
+ // Navbar brand label
258
+ @navbar-default-brand-color: @navbar-default-link-color;
259
+ @navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%);
260
+ @navbar-default-brand-hover-bg: transparent;
261
+
262
+ // Navbar toggle
263
+ @navbar-default-toggle-hover-bg: #ddd;
264
+ @navbar-default-toggle-icon-bar-bg: #ccc;
265
+ @navbar-default-toggle-border-color: #ddd;
156
266
 
157
267
 
158
- // Input placeholder text color
268
+ // Inverted navbar
269
+ //
270
+ // Reset inverted navbar basics
271
+ @navbar-inverse-color: @gray-light;
272
+ @navbar-inverse-bg: #222;
273
+ @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
274
+
275
+ // Inverted navbar links
276
+ @navbar-inverse-link-color: @gray-light;
277
+ @navbar-inverse-link-hover-color: #fff;
278
+ @navbar-inverse-link-hover-bg: transparent;
279
+ @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
280
+ @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
281
+ @navbar-inverse-link-disabled-color: #444;
282
+ @navbar-inverse-link-disabled-bg: transparent;
283
+
284
+ // Inverted navbar brand label
285
+ @navbar-inverse-brand-color: @navbar-inverse-link-color;
286
+ @navbar-inverse-brand-hover-color: #fff;
287
+ @navbar-inverse-brand-hover-bg: transparent;
288
+
289
+ // Inverted navbar search
290
+ // Normal navbar needs no special styles or vars
291
+ @navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
292
+ @navbar-inverse-search-bg-focus: #fff;
293
+ @navbar-inverse-search-border: @navbar-inverse-bg;
294
+ @navbar-inverse-search-placeholder-color: #ccc;
295
+
296
+ // Inverted navbar toggle
297
+ @navbar-inverse-toggle-hover-bg: #333;
298
+ @navbar-inverse-toggle-icon-bar-bg: #fff;
299
+ @navbar-inverse-toggle-border-color: #333;
300
+
301
+
302
+ // Navs
159
303
  // -------------------------
160
- @placeholderText: @grayLight;
161
304
 
305
+ @nav-link-padding: 10px 15px;
306
+ @nav-link-hover-bg: @gray-lighter;
162
307
 
163
- // Hr border color
308
+ @nav-disabled-link-color: @gray-light;
309
+ @nav-disabled-link-hover-color: @gray-light;
310
+
311
+ @nav-open-link-hover-color: #fff;
312
+ @nav-open-caret-border-color: #fff;
313
+
314
+ // Tabs
315
+ @nav-tabs-border-color: #ddd;
316
+
317
+ @nav-tabs-link-hover-border-color: @gray-lighter;
318
+
319
+ @nav-tabs-active-link-hover-bg: @body-bg;
320
+ @nav-tabs-active-link-hover-color: @gray;
321
+ @nav-tabs-active-link-hover-border-color: #ddd;
322
+
323
+ @nav-tabs-justified-link-border-color: #ddd;
324
+ @nav-tabs-justified-active-link-border-color: @body-bg;
325
+
326
+ // Pills
327
+ @nav-pills-active-link-hover-bg: @component-active-bg;
328
+ @nav-pills-active-link-hover-color: #fff;
329
+
330
+
331
+ // Pagination
164
332
  // -------------------------
165
- @hrBorder: @grayLighter;
166
333
 
334
+ @pagination-bg: #fff;
335
+ @pagination-border: #ddd;
167
336
 
168
- // Horizontal forms & lists
337
+ @pagination-hover-bg: @gray-lighter;
338
+
339
+ @pagination-active-bg: @brand-primary;
340
+ @pagination-active-color: #fff;
341
+
342
+ @pagination-disabled-color: @gray-light;
343
+
344
+
345
+ // Pager
169
346
  // -------------------------
170
- @horizontalComponentOffset: 180px;
171
347
 
348
+ @pager-border-radius: 15px;
349
+ @pager-disabled-color: @gray-light;
172
350
 
173
- // Wells
351
+
352
+ // Jumbotron
174
353
  // -------------------------
175
- @wellBackground: #f5f5f5;
176
354
 
355
+ @jumbotron-padding: 30px;
356
+ @jumbotron-color: inherit;
357
+ @jumbotron-bg: @gray-lighter;
177
358
 
178
- // Navbar
359
+ @jumbotron-heading-color: inherit;
360
+
361
+
362
+ // Form states and alerts
179
363
  // -------------------------
180
- @navbarCollapseWidth: 979px;
181
- @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
182
364
 
183
- @navbarHeight: 40px;
184
- @navbarBackgroundHighlight: #ffffff;
185
- @navbarBackground: darken(@navbarBackgroundHighlight, 5%);
186
- @navbarBorder: darken(@navbarBackground, 12%);
365
+ @state-warning-text: #c09853;
366
+ @state-warning-bg: #fcf8e3;
367
+ @state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
187
368
 
188
- @navbarText: #777;
189
- @navbarLinkColor: #777;
190
- @navbarLinkColorHover: @grayDark;
191
- @navbarLinkColorActive: @gray;
192
- @navbarLinkBackgroundHover: transparent;
193
- @navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
369
+ @state-danger-text: #b94a48;
370
+ @state-danger-bg: #f2dede;
371
+ @state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
194
372
 
195
- @navbarBrandColor: @navbarLinkColor;
373
+ @state-success-text: #468847;
374
+ @state-success-bg: #dff0d8;
375
+ @state-success-border: darken(spin(@state-success-bg, -10), 5%);
196
376
 
197
- // Inverted navbar
198
- @navbarInverseBackground: #111111;
199
- @navbarInverseBackgroundHighlight: #222222;
200
- @navbarInverseBorder: #252525;
377
+ @state-info-text: #3a87ad;
378
+ @state-info-bg: #d9edf7;
379
+ @state-info-border: darken(spin(@state-info-bg, -10), 7%);
201
380
 
202
- @navbarInverseText: @grayLight;
203
- @navbarInverseLinkColor: @grayLight;
204
- @navbarInverseLinkColorHover: @white;
205
- @navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
206
- @navbarInverseLinkBackgroundHover: transparent;
207
- @navbarInverseLinkBackgroundActive: @navbarInverseBackground;
208
381
 
209
- @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
210
- @navbarInverseSearchBackgroundFocus: @white;
211
- @navbarInverseSearchBorder: @navbarInverseBackground;
212
- @navbarInverseSearchPlaceholderColor: #ccc;
382
+ // Tooltips
383
+ // -------------------------
384
+ @tooltip-max-width: 200px;
385
+ @tooltip-color: #fff;
386
+ @tooltip-bg: #000;
213
387
 
214
- @navbarInverseBrandColor: @navbarInverseLinkColor;
388
+ @tooltip-arrow-width: 5px;
389
+ @tooltip-arrow-color: @tooltip-bg;
215
390
 
216
391
 
217
- // Pagination
392
+ // Popovers
218
393
  // -------------------------
219
- @paginationBackground: #fff;
220
- @paginationBorder: #ddd;
221
- @paginationActiveBackground: #f5f5f5;
394
+ @popover-bg: #fff;
395
+ @popover-max-width: 276px;
396
+ @popover-border-color: rgba(0,0,0,.2);
397
+ @popover-fallback-border-color: #ccc;
398
+
399
+ @popover-title-bg: darken(@popover-bg, 3%);
400
+
401
+ @popover-arrow-width: 10px;
402
+ @popover-arrow-color: #fff;
403
+
404
+ @popover-arrow-outer-width: (@popover-arrow-width + 1);
405
+ @popover-arrow-outer-color: rgba(0,0,0,.25);
406
+ @popover-arrow-outer-fallback-color: #999;
222
407
 
223
408
 
224
- // Hero unit
409
+ // Labels
225
410
  // -------------------------
226
- @heroUnitBackground: @grayLighter;
227
- @heroUnitHeadingColor: inherit;
228
- @heroUnitLeadColor: inherit;
229
411
 
412
+ @label-default-bg: @gray-light;
413
+ @label-primary-bg: @brand-primary;
414
+ @label-success-bg: @brand-success;
415
+ @label-info-bg: @brand-info;
416
+ @label-warning-bg: @brand-warning;
417
+ @label-danger-bg: @brand-danger;
230
418
 
231
- // Form states and alerts
419
+ @label-color: #fff;
420
+ @label-link-hover-color: #fff;
421
+
422
+
423
+ // Modals
232
424
  // -------------------------
233
- @warningText: #c09853;
234
- @warningBackground: #fcf8e3;
235
- @warningBorder: darken(spin(@warningBackground, -10), 3%);
425
+ @modal-inner-padding: 20px;
236
426
 
237
- @errorText: #b94a48;
238
- @errorBackground: #f2dede;
239
- @errorBorder: darken(spin(@errorBackground, -10), 3%);
427
+ @modal-title-padding: 15px;
428
+ @modal-title-line-height: @line-height-base;
240
429
 
241
- @successText: #468847;
242
- @successBackground: #dff0d8;
243
- @successBorder: darken(spin(@successBackground, -10), 5%);
430
+ @modal-content-bg: #fff;
431
+ @modal-content-border-color: rgba(0,0,0,.2);
432
+ @modal-content-fallback-border-color: #999;
244
433
 
245
- @infoText: #3a87ad;
246
- @infoBackground: #d9edf7;
247
- @infoBorder: darken(spin(@infoBackground, -10), 7%);
434
+ @modal-backdrop-bg: #000;
435
+ @modal-header-border-color: #e5e5e5;
436
+ @modal-footer-border-color: @modal-header-border-color;
248
437
 
249
438
 
250
- // Tooltips and popovers
439
+ // Alerts
251
440
  // -------------------------
252
- @tooltipColor: #fff;
253
- @tooltipBackground: #000;
254
- @tooltipArrowWidth: 5px;
255
- @tooltipArrowColor: @tooltipBackground;
441
+ @alert-padding: 15px;
442
+ @alert-border-radius: @border-radius-base;
443
+ @alert-link-font-weight: bold;
256
444
 
257
- @popoverBackground: #fff;
258
- @popoverArrowWidth: 10px;
259
- @popoverArrowColor: #fff;
260
- @popoverTitleBackground: darken(@popoverBackground, 3%);
445
+ @alert-success-bg: @state-success-bg;
446
+ @alert-success-text: @state-success-text;
447
+ @alert-success-border: @state-success-border;
261
448
 
262
- // Special enhancement for popovers
263
- @popoverArrowOuterWidth: @popoverArrowWidth + 1;
264
- @popoverArrowOuterColor: rgba(0,0,0,.25);
449
+ @alert-info-bg: @state-info-bg;
450
+ @alert-info-text: @state-info-text;
451
+ @alert-info-border: @state-info-border;
265
452
 
453
+ @alert-warning-bg: @state-warning-bg;
454
+ @alert-warning-text: @state-warning-text;
455
+ @alert-warning-border: @state-warning-border;
266
456
 
457
+ @alert-danger-bg: @state-danger-bg;
458
+ @alert-danger-text: @state-danger-text;
459
+ @alert-danger-border: @state-danger-border;
267
460
 
268
- // GRID
269
- // --------------------------------------------------
461
+
462
+ // Progress bars
463
+ // -------------------------
464
+ @progress-bg: #f5f5f5;
465
+ @progress-bar-color: #fff;
466
+
467
+ @progress-bar-bg: @brand-primary;
468
+ @progress-bar-success-bg: @brand-success;
469
+ @progress-bar-warning-bg: @brand-warning;
470
+ @progress-bar-danger-bg: @brand-danger;
471
+ @progress-bar-info-bg: @brand-info;
270
472
 
271
473
 
272
- // Default 940px grid
474
+ // List group
273
475
  // -------------------------
274
- @gridColumns: 12;
275
- @gridColumnWidth: 60px;
276
- @gridGutterWidth: 20px;
277
- @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
476
+ @list-group-bg: #fff;
477
+ @list-group-border: #ddd;
478
+ @list-group-border-radius: @border-radius-base;
278
479
 
279
- // 1200px min
280
- @gridColumnWidth1200: 70px;
281
- @gridGutterWidth1200: 30px;
282
- @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
480
+ @list-group-hover-bg: #f5f5f5;
481
+ @list-group-active-color: #fff;
482
+ @list-group-active-bg: @component-active-bg;
483
+ @list-group-active-border: @list-group-active-bg;
283
484
 
284
- // 768px-979px
285
- @gridColumnWidth768: 42px;
286
- @gridGutterWidth768: 20px;
287
- @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
485
+ @list-group-link-color: #555;
486
+ @list-group-link-heading-color: #333;
288
487
 
289
488
 
290
- // Fluid grid
489
+ // Panels
291
490
  // -------------------------
292
- @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
293
- @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
491
+ @panel-bg: #fff;
492
+ @panel-inner-border: #ddd;
493
+ @panel-border-radius: @border-radius-base;
494
+ @panel-footer-bg: #f5f5f5;
495
+
496
+ @panel-default-text: @gray-dark;
497
+ @panel-default-border: #ddd;
498
+ @panel-default-heading-bg: #f5f5f5;
499
+
500
+ @panel-primary-text: #fff;
501
+ @panel-primary-border: @brand-primary;
502
+ @panel-primary-heading-bg: @brand-primary;
503
+
504
+ @panel-success-text: @state-success-text;
505
+ @panel-success-border: @state-success-border;
506
+ @panel-success-heading-bg: @state-success-bg;
507
+
508
+ @panel-warning-text: @state-warning-text;
509
+ @panel-warning-border: @state-warning-border;
510
+ @panel-warning-heading-bg: @state-warning-bg;
511
+
512
+ @panel-danger-text: @state-danger-text;
513
+ @panel-danger-border: @state-danger-border;
514
+ @panel-danger-heading-bg: @state-danger-bg;
515
+
516
+ @panel-info-text: @state-info-text;
517
+ @panel-info-border: @state-info-border;
518
+ @panel-info-heading-bg: @state-info-bg;
519
+
520
+
521
+ // Thumbnails
522
+ // -------------------------
523
+ @thumbnail-padding: 4px;
524
+ @thumbnail-bg: @body-bg;
525
+ @thumbnail-border: #ddd;
526
+ @thumbnail-border-radius: @border-radius-base;
527
+
528
+ @thumbnail-caption-color: @text-color;
529
+ @thumbnail-caption-padding: 9px;
530
+
531
+
532
+ // Wells
533
+ // -------------------------
534
+ @well-bg: #f5f5f5;
535
+
536
+
537
+ // Badges
538
+ // -------------------------
539
+ @badge-color: #fff;
540
+ @badge-link-hover-color: #fff;
541
+ @badge-bg: @gray-light;
542
+
543
+ @badge-active-color: @link-color;
544
+ @badge-active-bg: #fff;
545
+
546
+ @badge-font-weight: bold;
547
+ @badge-line-height: 1;
548
+ @badge-border-radius: 10px;
549
+
550
+
551
+ // Breadcrumbs
552
+ // -------------------------
553
+ @breadcrumb-bg: #f5f5f5;
554
+ @breadcrumb-color: #ccc;
555
+ @breadcrumb-active-color: @gray-light;
556
+
557
+
558
+ // Carousel
559
+ // ------------------------
560
+
561
+ @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
562
+
563
+ @carousel-control-color: #fff;
564
+ @carousel-control-width: 15%;
565
+ @carousel-control-opacity: .5;
566
+ @carousel-control-font-size: 20px;
567
+
568
+ @carousel-indicator-active-bg: #fff;
569
+ @carousel-indicator-border-color: #fff;
570
+
571
+ @carousel-caption-color: #fff;
572
+
573
+
574
+ // Close
575
+ // ------------------------
576
+ @close-color: #000;
577
+ @close-font-weight: bold;
578
+ @close-text-shadow: 0 1px 0 #fff;
579
+
580
+
581
+ // Code
582
+ // ------------------------
583
+ @code-color: #c7254e;
584
+ @code-bg: #f9f2f4;
585
+
586
+ @pre-bg: #f5f5f5;
587
+ @pre-color: @gray-dark;
588
+ @pre-border-color: #ccc;
589
+ @pre-scrollable-max-height: 340px;
590
+
591
+ // Type
592
+ // ------------------------
593
+ @text-muted: @gray-light;
594
+ @abbr-border-color: @gray-light;
595
+ @headings-small-color: @gray-light;
596
+ @blockquote-small-color: @gray-light;
597
+ @blockquote-border-color: @gray-lighter;
598
+ @page-header-border-color: @gray-lighter;
599
+
600
+ // Miscellaneous
601
+ // -------------------------
602
+
603
+ // Hr border color
604
+ @hr-border: @gray-lighter;
605
+
606
+ // Horizontal forms & lists
607
+ @component-offset-horizontal: 180px;
608
+
609
+
610
+ // Container sizes
611
+ // --------------------------------------------------
612
+
613
+ // Small screen / tablet
614
+ @container-tablet: ((720px + @grid-gutter-width));
294
615
 
295
- // 1200px min
296
- @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
297
- @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
616
+ // Medium screen / desktop
617
+ @container-desktop: ((940px + @grid-gutter-width));
298
618
 
299
- // 768px-979px
300
- @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
301
- @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
619
+ // Large screen / wide desktop
620
+ @container-lg-desktop: ((1140px + @grid-gutter-width));