twitter-bootswatch-rails 2.3.2.8 → 3.0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. checksums.yaml +8 -8
  2. data/lib/generators/bootswatch/import/import_generator.rb +4 -5
  3. data/lib/generators/bootswatch/install/install_generator.rb +4 -6
  4. data/lib/generators/bootswatch/install/templates/bootstrap.less +29 -33
  5. data/lib/generators/bootswatch/install/templates/bootswatch.css.less.tt +0 -4
  6. data/lib/generators/bootswatch/install/templates/bootswatch.js.tt +3 -0
  7. data/lib/generators/bootswatch/install/templates/loader.css.less.tt +1 -1
  8. data/lib/generators/bootswatch/install/templates/loader.js.tt +10 -0
  9. data/lib/generators/bootswatch/install/templates/mixins.less.tt +487 -466
  10. data/lib/generators/bootswatch/install/templates/variables.less.tt +498 -179
  11. data/lib/generators/bootswatch/layout/templates/layout.html.erb +349 -18
  12. data/lib/generators/bootswatch/layout/templates/layout.html.haml +0 -5
  13. data/lib/generators/bootswatch/layout/templates/layout.html.slim +0 -5
  14. data/lib/twitter/bootswatch/rails/version.rb +1 -1
  15. data/vendor/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.eot +0 -0
  16. data/vendor/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.svg +228 -0
  17. data/vendor/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  18. data/vendor/assets/fonts/twitter/bootstrap/glyphicons-halflings-regular.woff +0 -0
  19. data/vendor/assets/javascripts/twitter/bootstrap/affix.js +126 -0
  20. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +98 -0
  21. data/vendor/assets/javascripts/twitter/bootstrap/button.js +109 -0
  22. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +217 -0
  23. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +179 -0
  24. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +154 -0
  25. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +246 -0
  26. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +117 -0
  27. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +158 -0
  28. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +135 -0
  29. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +386 -0
  30. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +56 -0
  31. data/vendor/toolkit/twitter/bootstrap/alerts.less +46 -58
  32. data/vendor/toolkit/twitter/bootstrap/badges.less +51 -0
  33. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +29 -33
  34. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +7 -8
  35. data/vendor/toolkit/twitter/bootstrap/button-groups.less +173 -154
  36. data/vendor/toolkit/twitter/bootstrap/buttons.less +97 -165
  37. data/vendor/toolkit/twitter/bootstrap/carousel.less +115 -64
  38. data/vendor/toolkit/twitter/bootstrap/close.less +20 -19
  39. data/vendor/toolkit/twitter/bootstrap/code.less +17 -22
  40. data/vendor/toolkit/twitter/bootstrap/component-animations.less +10 -3
  41. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +92 -147
  42. data/vendor/toolkit/twitter/bootstrap/forms.less +224 -561
  43. data/vendor/toolkit/twitter/bootstrap/glyphicons.less +232 -0
  44. data/vendor/toolkit/twitter/bootstrap/grid.less +336 -11
  45. data/vendor/toolkit/twitter/bootstrap/input-groups.less +127 -0
  46. data/vendor/toolkit/twitter/bootstrap/jumbotron.less +40 -0
  47. data/vendor/toolkit/twitter/bootstrap/labels.less +58 -0
  48. data/vendor/toolkit/twitter/bootstrap/list-group.less +88 -0
  49. data/vendor/toolkit/twitter/bootstrap/media.less +8 -7
  50. data/vendor/toolkit/twitter/bootstrap/mixins.less +487 -466
  51. data/vendor/toolkit/twitter/bootstrap/modals.less +98 -52
  52. data/vendor/toolkit/twitter/bootstrap/navbar.less +507 -383
  53. data/vendor/toolkit/twitter/bootstrap/navs.less +169 -349
  54. data/vendor/toolkit/twitter/bootstrap/normalize.less +396 -0
  55. data/vendor/toolkit/twitter/bootstrap/pager.less +45 -33
  56. data/vendor/toolkit/twitter/bootstrap/pagination.less +65 -105
  57. data/vendor/toolkit/twitter/bootstrap/panels.less +148 -0
  58. data/vendor/toolkit/twitter/bootstrap/popovers.less +51 -51
  59. data/vendor/toolkit/twitter/bootstrap/print.less +100 -0
  60. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +28 -55
  61. data/vendor/toolkit/twitter/bootstrap/responsive-utilities.less +195 -34
  62. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +101 -24
  63. data/vendor/toolkit/twitter/bootstrap/tables.less +170 -178
  64. data/vendor/toolkit/twitter/bootstrap/theme.less +232 -0
  65. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +11 -33
  66. data/vendor/toolkit/twitter/bootstrap/tooltip.less +45 -20
  67. data/vendor/toolkit/twitter/bootstrap/type.less +101 -110
  68. data/vendor/toolkit/twitter/bootstrap/utilities.less +19 -7
  69. data/vendor/toolkit/twitter/bootstrap/variables.less +498 -179
  70. data/vendor/toolkit/twitter/bootstrap/wells.less +7 -7
  71. metadata +33 -36
  72. data/lib/generators/bootswatch/install/templates/bootswatch.js.coffee.tt +0 -9
  73. data/lib/generators/bootswatch/install/templates/loader.coffee.tt +0 -23
  74. data/lib/generators/bootswatch/install/templates/responsive.less.tt +0 -51
  75. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  76. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  77. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-affix.js +0 -117
  78. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-alert.js +0 -99
  79. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-button.js +0 -105
  80. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-carousel.js +0 -207
  81. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-collapse.js +0 -167
  82. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-dropdown.js +0 -169
  83. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-modal.js +0 -247
  84. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-popover.js +0 -114
  85. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-scrollspy.js +0 -162
  86. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tab.js +0 -144
  87. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tooltip.js +0 -361
  88. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-transition.js +0 -60
  89. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-typeahead.js +0 -335
  90. data/vendor/toolkit/twitter/bootstrap/accordion.less +0 -34
  91. data/vendor/toolkit/twitter/bootstrap/hero-unit.less +0 -25
  92. data/vendor/toolkit/twitter/bootstrap/labels-badges.less +0 -84
  93. data/vendor/toolkit/twitter/bootstrap/layouts.less +0 -16
  94. data/vendor/toolkit/twitter/bootstrap/reset.less +0 -216
  95. data/vendor/toolkit/twitter/bootstrap/responsive-1200px-min.less +0 -28
  96. data/vendor/toolkit/twitter/bootstrap/responsive-767px-max.less +0 -193
  97. data/vendor/toolkit/twitter/bootstrap/responsive-768px-979px.less +0 -19
  98. data/vendor/toolkit/twitter/bootstrap/responsive-navbar.less +0 -189
  99. data/vendor/toolkit/twitter/bootstrap/responsive.less +0 -48
  100. data/vendor/toolkit/twitter/bootstrap/sprites.less +0 -197
@@ -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: "twitter/bootstrap/";
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: "twitter/bootstrap/glyphicons-halflings.png";
155
- @iconWhiteSpritePath: "twitter/bootstrap/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));