twitter-bootstrap-rails 1.4.3 → 2.0rc0

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.

Potentially problematic release.


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

Files changed (72) hide show
  1. data/README.md +85 -52
  2. data/lib/generators/bootstrap/install/templates/bootstrap.coffee +15 -12
  3. data/lib/generators/bootstrap/layout/layout_generator.rb +1 -1
  4. data/lib/generators/bootstrap/layout/templates/layout.html.erb +97 -50
  5. data/lib/generators/bootstrap/layout/templates/layout.html.slim +40 -0
  6. data/lib/generators/bootstrap/themed/templates/_form.html.erb +5 -1
  7. data/lib/generators/bootstrap/themed/templates/edit.html.erb +2 -1
  8. data/lib/generators/bootstrap/themed/templates/index.html.erb +1 -0
  9. data/lib/generators/bootstrap/themed/templates/new.html.erb +1 -1
  10. data/lib/generators/bootstrap/themed/templates/show.html.erb +7 -3
  11. data/lib/generators/bootstrap/themed/themed_generator.rb +0 -15
  12. data/lib/twitter-bootstrap-rails.rb +3 -3
  13. data/lib/twitter/bootstrap/rails/bootstrap.rb +1 -1
  14. data/lib/twitter/bootstrap/rails/version.rb +1 -1
  15. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  16. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  17. data/vendor/assets/javascripts/twitter/bootstrap.js +10 -6
  18. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-alert.js +91 -0
  19. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-button.js +98 -0
  20. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-carousel.js +154 -0
  21. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-collapse.js +136 -0
  22. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-dropdown.js +58 -21
  23. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-modal.js +63 -114
  24. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-popover.js +38 -33
  25. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-scrollspy.js +62 -44
  26. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tab.js +130 -0
  27. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tooltip.js +270 -0
  28. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-transition.js +51 -0
  29. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-typeahead.js +271 -0
  30. data/vendor/toolkit/twitter/bootstrap/accordion.less +28 -0
  31. data/vendor/toolkit/twitter/bootstrap/alerts.less +70 -0
  32. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +41 -5
  33. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +22 -0
  34. data/vendor/toolkit/twitter/bootstrap/button-groups.less +147 -0
  35. data/vendor/toolkit/twitter/bootstrap/buttons.less +165 -0
  36. data/vendor/toolkit/twitter/bootstrap/carousel.less +121 -0
  37. data/vendor/toolkit/twitter/bootstrap/close.less +18 -0
  38. data/vendor/toolkit/twitter/bootstrap/code.less +44 -0
  39. data/vendor/toolkit/twitter/bootstrap/component-animations.less +18 -0
  40. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +131 -0
  41. data/vendor/toolkit/twitter/bootstrap/forms.less +335 -299
  42. data/vendor/toolkit/twitter/bootstrap/grid.less +8 -0
  43. data/vendor/toolkit/twitter/bootstrap/hero-unit.less +20 -0
  44. data/vendor/toolkit/twitter/bootstrap/labels.less +16 -0
  45. data/vendor/toolkit/twitter/bootstrap/layouts.less +17 -0
  46. data/vendor/toolkit/twitter/bootstrap/mixins.less +391 -76
  47. data/vendor/toolkit/twitter/bootstrap/modals.less +72 -0
  48. data/vendor/toolkit/twitter/bootstrap/navbar.less +292 -0
  49. data/vendor/toolkit/twitter/bootstrap/navs.less +344 -0
  50. data/vendor/toolkit/twitter/bootstrap/pager.less +30 -0
  51. data/vendor/toolkit/twitter/bootstrap/pagination.less +55 -0
  52. data/vendor/toolkit/twitter/bootstrap/popovers.less +49 -0
  53. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +95 -0
  54. data/vendor/toolkit/twitter/bootstrap/reset.less +37 -52
  55. data/vendor/toolkit/twitter/bootstrap/responsive.less +323 -0
  56. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +13 -123
  57. data/vendor/toolkit/twitter/bootstrap/sprites.less +156 -0
  58. data/vendor/toolkit/twitter/bootstrap/tables.less +75 -160
  59. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +35 -0
  60. data/vendor/toolkit/twitter/bootstrap/tooltip.less +35 -0
  61. data/vendor/toolkit/twitter/bootstrap/type.less +100 -70
  62. data/vendor/toolkit/twitter/bootstrap/utilities.less +23 -0
  63. data/vendor/toolkit/twitter/bootstrap/variables.less +94 -55
  64. data/vendor/toolkit/twitter/bootstrap/wells.less +17 -0
  65. metadata +58 -49
  66. data/lib/generators/bootstrap/themed/templates/builders/builder.rb +0 -24
  67. data/lib/generators/bootstrap/themed/templates/builders/helper.rb +0 -6
  68. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-alerts.js +0 -124
  69. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-buttons.js +0 -64
  70. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tabs.js +0 -80
  71. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-twipsy.js +0 -321
  72. data/vendor/toolkit/twitter/bootstrap/patterns.less +0 -1063
@@ -1,321 +0,0 @@
1
- /* ==========================================================
2
- * bootstrap-twipsy.js v1.4.0
3
- * http://twitter.github.com/bootstrap/javascript.html#twipsy
4
- * Adapted from the original jQuery.tipsy by Jason Frame
5
- * ==========================================================
6
- * Copyright 2011 Twitter, Inc.
7
- *
8
- * Licensed under the Apache License, Version 2.0 (the "License");
9
- * you may not use this file except in compliance with the License.
10
- * You may obtain a copy of the License at
11
- *
12
- * http://www.apache.org/licenses/LICENSE-2.0
13
- *
14
- * Unless required by applicable law or agreed to in writing, software
15
- * distributed under the License is distributed on an "AS IS" BASIS,
16
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17
- * See the License for the specific language governing permissions and
18
- * limitations under the License.
19
- * ========================================================== */
20
-
21
-
22
- !function( $ ) {
23
-
24
- "use strict"
25
-
26
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
27
- * ======================================================= */
28
-
29
- var transitionEnd
30
-
31
- $(document).ready(function () {
32
-
33
- $.support.transition = (function () {
34
- var thisBody = document.body || document.documentElement
35
- , thisStyle = thisBody.style
36
- , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
37
- return support
38
- })()
39
-
40
- // set CSS transition event type
41
- if ( $.support.transition ) {
42
- transitionEnd = "TransitionEnd"
43
- if ( $.browser.webkit ) {
44
- transitionEnd = "webkitTransitionEnd"
45
- } else if ( $.browser.mozilla ) {
46
- transitionEnd = "transitionend"
47
- } else if ( $.browser.opera ) {
48
- transitionEnd = "oTransitionEnd"
49
- }
50
- }
51
-
52
- })
53
-
54
-
55
- /* TWIPSY PUBLIC CLASS DEFINITION
56
- * ============================== */
57
-
58
- var Twipsy = function ( element, options ) {
59
- this.$element = $(element)
60
- this.options = options
61
- this.enabled = true
62
- this.fixTitle()
63
- }
64
-
65
- Twipsy.prototype = {
66
-
67
- show: function() {
68
- var pos
69
- , actualWidth
70
- , actualHeight
71
- , placement
72
- , $tip
73
- , tp
74
-
75
- if (this.hasContent() && this.enabled) {
76
- $tip = this.tip()
77
- this.setContent()
78
-
79
- if (this.options.animate) {
80
- $tip.addClass('fade')
81
- }
82
-
83
- $tip
84
- .remove()
85
- .css({ top: 0, left: 0, display: 'block' })
86
- .prependTo(document.body)
87
-
88
- pos = $.extend({}, this.$element.offset(), {
89
- width: this.$element[0].offsetWidth
90
- , height: this.$element[0].offsetHeight
91
- })
92
-
93
- actualWidth = $tip[0].offsetWidth
94
- actualHeight = $tip[0].offsetHeight
95
-
96
- placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
97
-
98
- switch (placement) {
99
- case 'below':
100
- tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
101
- break
102
- case 'above':
103
- tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
104
- break
105
- case 'left':
106
- tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
107
- break
108
- case 'right':
109
- tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
110
- break
111
- }
112
-
113
- $tip
114
- .css(tp)
115
- .addClass(placement)
116
- .addClass('in')
117
- }
118
- }
119
-
120
- , setContent: function () {
121
- var $tip = this.tip()
122
- $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
123
- $tip[0].className = 'twipsy'
124
- }
125
-
126
- , hide: function() {
127
- var that = this
128
- , $tip = this.tip()
129
-
130
- $tip.removeClass('in')
131
-
132
- function removeElement () {
133
- $tip.remove()
134
- }
135
-
136
- $.support.transition && this.$tip.hasClass('fade') ?
137
- $tip.bind(transitionEnd, removeElement) :
138
- removeElement()
139
- }
140
-
141
- , fixTitle: function() {
142
- var $e = this.$element
143
- if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
144
- $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
145
- }
146
- }
147
-
148
- , hasContent: function () {
149
- return this.getTitle()
150
- }
151
-
152
- , getTitle: function() {
153
- var title
154
- , $e = this.$element
155
- , o = this.options
156
-
157
- this.fixTitle()
158
-
159
- if (typeof o.title == 'string') {
160
- title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
161
- } else if (typeof o.title == 'function') {
162
- title = o.title.call($e[0])
163
- }
164
-
165
- title = ('' + title).replace(/(^\s*|\s*$)/, "")
166
-
167
- return title || o.fallback
168
- }
169
-
170
- , tip: function() {
171
- return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template)
172
- }
173
-
174
- , validate: function() {
175
- if (!this.$element[0].parentNode) {
176
- this.hide()
177
- this.$element = null
178
- this.options = null
179
- }
180
- }
181
-
182
- , enable: function() {
183
- this.enabled = true
184
- }
185
-
186
- , disable: function() {
187
- this.enabled = false
188
- }
189
-
190
- , toggleEnabled: function() {
191
- this.enabled = !this.enabled
192
- }
193
-
194
- , toggle: function () {
195
- this[this.tip().hasClass('in') ? 'hide' : 'show']()
196
- }
197
-
198
- }
199
-
200
-
201
- /* TWIPSY PRIVATE METHODS
202
- * ====================== */
203
-
204
- function maybeCall ( thing, ctx, args ) {
205
- return typeof thing == 'function' ? thing.apply(ctx, args) : thing
206
- }
207
-
208
- /* TWIPSY PLUGIN DEFINITION
209
- * ======================== */
210
-
211
- $.fn.twipsy = function (options) {
212
- $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy')
213
- return this
214
- }
215
-
216
- $.fn.twipsy.initWith = function (options, Constructor, name) {
217
- var twipsy
218
- , binder
219
- , eventIn
220
- , eventOut
221
-
222
- if (options === true) {
223
- return this.data(name)
224
- } else if (typeof options == 'string') {
225
- twipsy = this.data(name)
226
- if (twipsy) {
227
- twipsy[options]()
228
- }
229
- return this
230
- }
231
-
232
- options = $.extend({}, $.fn[name].defaults, options)
233
-
234
- function get(ele) {
235
- var twipsy = $.data(ele, name)
236
-
237
- if (!twipsy) {
238
- twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
239
- $.data(ele, name, twipsy)
240
- }
241
-
242
- return twipsy
243
- }
244
-
245
- function enter() {
246
- var twipsy = get(this)
247
- twipsy.hoverState = 'in'
248
-
249
- if (options.delayIn == 0) {
250
- twipsy.show()
251
- } else {
252
- twipsy.fixTitle()
253
- setTimeout(function() {
254
- if (twipsy.hoverState == 'in') {
255
- twipsy.show()
256
- }
257
- }, options.delayIn)
258
- }
259
- }
260
-
261
- function leave() {
262
- var twipsy = get(this)
263
- twipsy.hoverState = 'out'
264
- if (options.delayOut == 0) {
265
- twipsy.hide()
266
- } else {
267
- setTimeout(function() {
268
- if (twipsy.hoverState == 'out') {
269
- twipsy.hide()
270
- }
271
- }, options.delayOut)
272
- }
273
- }
274
-
275
- if (!options.live) {
276
- this.each(function() {
277
- get(this)
278
- })
279
- }
280
-
281
- if (options.trigger != 'manual') {
282
- binder = options.live ? 'live' : 'bind'
283
- eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus'
284
- eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
285
- this[binder](eventIn, enter)[binder](eventOut, leave)
286
- }
287
-
288
- return this
289
- }
290
-
291
- $.fn.twipsy.Twipsy = Twipsy
292
-
293
- $.fn.twipsy.defaults = {
294
- animate: true
295
- , delayIn: 0
296
- , delayOut: 0
297
- , fallback: ''
298
- , placement: 'above'
299
- , html: false
300
- , live: false
301
- , offset: 0
302
- , title: 'title'
303
- , trigger: 'hover'
304
- , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>'
305
- }
306
-
307
- $.fn.twipsy.rejectAttrOptions = [ 'title' ]
308
-
309
- $.fn.twipsy.elementOptions = function(ele, options) {
310
- var data = $(ele).data()
311
- , rejects = $.fn.twipsy.rejectAttrOptions
312
- , i = rejects.length
313
-
314
- while (i--) {
315
- delete data[rejects[i]]
316
- }
317
-
318
- return $.extend({}, options, data)
319
- }
320
-
321
- }( window.jQuery || window.ender );
@@ -1,1063 +0,0 @@
1
- /* Patterns.less
2
- * Repeatable UI elements outside the base styles provided from the scaffolding
3
- * ---------------------------------------------------------------------------- */
4
-
5
-
6
- // TOPBAR
7
- // ------
8
-
9
- // Topbar for Branding and Nav
10
- .topbar {
11
- height: 40px;
12
- position: fixed;
13
- top: 0;
14
- left: 0;
15
- right: 0;
16
- z-index: 10000;
17
- overflow: visible;
18
-
19
- // Links get text shadow
20
- a {
21
- color: @grayLight;
22
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
- }
24
-
25
- // Hover and active states
26
- // h3 for backwards compatibility
27
- h3 a:hover,
28
- .brand:hover,
29
- ul .active > a {
30
- background-color: #333;
31
- background-color: rgba(255,255,255,.05);
32
- color: @white;
33
- text-decoration: none;
34
- }
35
-
36
- // Website name
37
- // h3 left for backwards compatibility
38
- h3 {
39
- position: relative;
40
- }
41
- h3 a,
42
- .brand {
43
- float: left;
44
- display: block;
45
- padding: 8px 20px 12px;
46
- margin-left: -20px; // negative indent to left-align the text down the page
47
- color: @white;
48
- font-size: 20px;
49
- font-weight: 200;
50
- line-height: 1;
51
- }
52
-
53
- // Plain text in topbar
54
- p {
55
- margin: 0;
56
- line-height: 40px;
57
- a:hover {
58
- background-color: transparent;
59
- color: @white;
60
- }
61
- }
62
-
63
- // Search Form
64
- form {
65
- float: left;
66
- margin: 5px 0 0 0;
67
- position: relative;
68
- .opacity(100);
69
- }
70
- // Todo: remove from v2.0 when ready, added for legacy
71
- form.pull-right {
72
- float: right;
73
- }
74
- input {
75
- background-color: #444;
76
- background-color: rgba(255,255,255,.3);
77
- #font > .sans-serif(13px, normal, 1);
78
- padding: 4px 9px;
79
- color: @white;
80
- color: rgba(255,255,255,.75);
81
- border: 1px solid #111;
82
- .border-radius(4px);
83
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
- .box-shadow(@shadow);
85
- .transition(none);
86
-
87
- // Placeholder text gets special styles; can't be bundled together though for some reason
88
- &:-moz-placeholder {
89
- color: @grayLighter;
90
- }
91
- &::-webkit-input-placeholder {
92
- color: @grayLighter;
93
- }
94
- // Hover states
95
- &:hover {
96
- background-color: @grayLight;
97
- background-color: rgba(255,255,255,.5);
98
- color: @white;
99
- }
100
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
- &:focus,
102
- &.focused {
103
- outline: 0;
104
- background-color: @white;
105
- color: @grayDark;
106
- text-shadow: 0 1px 0 @white;
107
- border: 0;
108
- padding: 5px 10px;
109
- .box-shadow(0 0 3px rgba(0,0,0,.15));
110
- }
111
- }
112
- }
113
-
114
- // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
- // For backwards compatibility, include .topbar .fill
116
- .topbar-inner,
117
- .topbar .fill {
118
- background-color: #222;
119
- #gradient > .vertical(#333, #222);
120
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
- .box-shadow(@shadow);
122
- }
123
-
124
-
125
- // NAVIGATION
126
- // ----------
127
-
128
- // Topbar Nav
129
- // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
- // For backwards compatibility, leave in .topbar div > ul
131
- .topbar div > ul,
132
- .nav {
133
- display: block;
134
- float: left;
135
- margin: 0 10px 0 0;
136
- position: relative;
137
- left: 0;
138
- > li {
139
- display: block;
140
- float: left;
141
- }
142
- a {
143
- display: block;
144
- float: none;
145
- padding: 10px 10px 11px;
146
- line-height: 19px;
147
- text-decoration: none;
148
- &:hover {
149
- color: @white;
150
- text-decoration: none;
151
- }
152
- }
153
- .active > a {
154
- background-color: #222;
155
- background-color: rgba(0,0,0,.5);
156
- }
157
-
158
- // Secondary (floated right) nav in topbar
159
- &.secondary-nav {
160
- float: right;
161
- margin-left: 10px;
162
- margin-right: 0;
163
- // backwards compatibility
164
- .menu-dropdown,
165
- .dropdown-menu {
166
- right: 0;
167
- border: 0;
168
- }
169
- }
170
- // Dropdowns within the .nav
171
- // a.menu:hover and li.open .menu for backwards compatibility
172
- a.menu:hover,
173
- li.open .menu,
174
- .dropdown-toggle:hover,
175
- .dropdown.open .dropdown-toggle {
176
- background: #444;
177
- background: rgba(255,255,255,.05);
178
- }
179
- // .menu-dropdown for backwards compatibility
180
- .menu-dropdown,
181
- .dropdown-menu {
182
- background-color: #333;
183
- // a.menu for backwards compatibility
184
- a.menu,
185
- .dropdown-toggle {
186
- color: @white;
187
- &.open {
188
- background: #444;
189
- background: rgba(255,255,255,.05);
190
- }
191
- }
192
- li a {
193
- color: #999;
194
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
- &:hover {
196
- #gradient > .vertical(#292929,#191919);
197
- color: @white;
198
- }
199
- }
200
- .active a {
201
- color: @white;
202
- }
203
- .divider {
204
- background-color: #222;
205
- border-color: #444;
206
- }
207
- }
208
- }
209
-
210
- // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
- .topbar ul .menu-dropdown li a,
212
- .topbar ul .dropdown-menu li a {
213
- padding: 4px 15px;
214
- }
215
-
216
- // Dropdown Menus
217
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
- // li.menu for backwards compatibility
219
- li.menu,
220
- .dropdown {
221
- position: relative;
222
- }
223
- // The link that is clicked to toggle the dropdown
224
- // a.menu for backwards compatibility
225
- a.menu:after,
226
- .dropdown-toggle:after {
227
- width: 0;
228
- height: 0;
229
- display: inline-block;
230
- content: "&darr;";
231
- text-indent: -99999px;
232
- vertical-align: top;
233
- margin-top: 8px;
234
- margin-left: 4px;
235
- border-left: 4px solid transparent;
236
- border-right: 4px solid transparent;
237
- border-top: 4px solid @white;
238
- .opacity(50);
239
- }
240
- // The dropdown menu (ul)
241
- // .menu-dropdown for backwards compatibility
242
- .menu-dropdown,
243
- .dropdown-menu {
244
- background-color: @white;
245
- float: left;
246
- display: none; // None by default, but block on "open" of the menu
247
- position: absolute;
248
- top: 40px;
249
- z-index: 900;
250
- min-width: 160px;
251
- max-width: 220px;
252
- _width: 160px;
253
- margin-left: 0; // override default ul styles
254
- margin-right: 0;
255
- padding: 6px 0;
256
- zoom: 1; // do we need this?
257
- border-color: #999;
258
- border-color: rgba(0,0,0,.2);
259
- border-style: solid;
260
- border-width: 0 1px 1px;
261
- .border-radius(0 0 6px 6px);
262
- .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
- .background-clip(padding-box);
264
-
265
- // Unfloat any li's to make them stack
266
- li {
267
- float: none;
268
- display: block;
269
- background-color: none;
270
- }
271
- // Dividers (basically an hr) within the dropdown
272
- .divider {
273
- height: 1px;
274
- margin: 5px 0;
275
- overflow: hidden;
276
- background-color: #eee;
277
- border-bottom: 1px solid @white;
278
- }
279
- }
280
-
281
- .topbar .dropdown-menu,
282
- .dropdown-menu {
283
- // Links within the dropdown menu
284
- a {
285
- display: block;
286
- padding: 4px 15px;
287
- clear: both;
288
- font-weight: normal;
289
- line-height: 18px;
290
- color: @gray;
291
- text-shadow: 0 1px 0 @white;
292
- // Hover state
293
- &:hover,
294
- &.hover {
295
- #gradient > .vertical(#eeeeee, #dddddd);
296
- color: @grayDark;
297
- text-decoration: none;
298
- @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
299
- .box-shadow(@shadow);
300
- }
301
- }
302
- }
303
-
304
- // Open state for the dropdown
305
- // .open for backwards compatibility
306
- .open,
307
- .dropdown.open {
308
- // .menu for backwards compatibility
309
- .menu,
310
- .dropdown-toggle {
311
- color: @white;
312
- background: #ccc;
313
- background: rgba(0,0,0,.3);
314
- }
315
- // .menu-dropdown for backwards compatibility
316
- .menu-dropdown,
317
- .dropdown-menu {
318
- display: block;
319
- }
320
- }
321
-
322
-
323
- // TABS AND PILLS
324
- // --------------
325
-
326
- // Common styles
327
- .tabs,
328
- .pills {
329
- margin: 0 0 @baseline;
330
- padding: 0;
331
- list-style: none;
332
- .clearfix();
333
- > li {
334
- float: left;
335
- > a {
336
- display: block;
337
- }
338
- }
339
- }
340
-
341
- // Tabs
342
- .tabs {
343
- border-color: #ddd;
344
- border-style: solid;
345
- border-width: 0 0 1px;
346
- > li {
347
- position: relative; // For the dropdowns mostly
348
- margin-bottom: -1px;
349
- > a {
350
- padding: 0 15px;
351
- margin-right: 2px;
352
- line-height: (@baseline * 2) - 2;
353
- border: 1px solid transparent;
354
- .border-radius(4px 4px 0 0);
355
- &:hover {
356
- text-decoration: none;
357
- background-color: #eee;
358
- border-color: #eee #eee #ddd;
359
- }
360
- }
361
- }
362
- // Active state, and it's :hover to override normal :hover
363
- .active > a,
364
- .active > a:hover {
365
- color: @gray;
366
- background-color: @white;
367
- border: 1px solid #ddd;
368
- border-bottom-color: transparent;
369
- cursor: default;
370
- }
371
- }
372
-
373
- // Dropdowns in tabs
374
- .tabs {
375
- // first one for backwards compatibility
376
- .menu-dropdown,
377
- .dropdown-menu {
378
- top: 35px;
379
- border-width: 1px;
380
- .border-radius(0 6px 6px 6px);
381
- }
382
- // first one for backwards compatibility
383
- a.menu:after,
384
- .dropdown-toggle:after {
385
- border-top-color: #999;
386
- margin-top: 15px;
387
- margin-left: 5px;
388
- }
389
- // first one for backwards compatibility
390
- li.open.menu .menu,
391
- .open.dropdown .dropdown-toggle {
392
- border-color: #999;
393
- }
394
- // first one for backwards compatibility
395
- li.open a.menu:after,
396
- .dropdown.open .dropdown-toggle:after {
397
- border-top-color: #555;
398
- }
399
- }
400
-
401
- // Pills
402
- .pills {
403
- a {
404
- margin: 5px 3px 5px 0;
405
- padding: 0 15px;
406
- line-height: 30px;
407
- text-shadow: 0 1px 1px @white;
408
- .border-radius(15px);
409
- &:hover {
410
- color: @white;
411
- text-decoration: none;
412
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
413
- background-color: @linkColorHover;
414
- }
415
- }
416
- .active a {
417
- color: @white;
418
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
419
- background-color: @linkColor;
420
- }
421
- }
422
-
423
- // Stacked pills
424
- .pills-vertical > li {
425
- float: none;
426
- }
427
-
428
- // Tabbable areas
429
- .tab-content,
430
- .pill-content {
431
- }
432
- .tab-content > .tab-pane,
433
- .pill-content > .pill-pane,
434
- .tab-content > div,
435
- .pill-content > div {
436
- display: none;
437
- }
438
- .tab-content > .active,
439
- .pill-content > .active {
440
- display: block;
441
- }
442
-
443
-
444
- // BREADCRUMBS
445
- // -----------
446
-
447
- .breadcrumb {
448
- padding: 7px 14px;
449
- margin: 0 0 @baseline;
450
- #gradient > .vertical(#ffffff, #f5f5f5);
451
- border: 1px solid #ddd;
452
- .border-radius(3px);
453
- .box-shadow(inset 0 1px 0 @white);
454
- li {
455
- display: inline;
456
- text-shadow: 0 1px 0 @white;
457
- }
458
- .divider {
459
- padding: 0 5px;
460
- color: @grayLight;
461
- }
462
- .active a {
463
- color: @grayDark;
464
- }
465
- }
466
-
467
-
468
- // PAGE HEADERS
469
- // ------------
470
-
471
- .hero-unit {
472
- background-color: #f5f5f5;
473
- margin-bottom: 30px;
474
- padding: 60px;
475
- .border-radius(6px);
476
- h1 {
477
- margin-bottom: 0;
478
- font-size: 60px;
479
- line-height: 1;
480
- letter-spacing: -1px;
481
- }
482
- p {
483
- font-size: 18px;
484
- font-weight: 200;
485
- line-height: @baseline * 1.5;
486
- }
487
- }
488
- footer {
489
- margin-top: @baseline - 1;
490
- padding-top: @baseline - 1;
491
- border-top: 1px solid #eee;
492
- }
493
-
494
-
495
- // PAGE HEADERS
496
- // ------------
497
-
498
- .page-header {
499
- margin-bottom: @baseline - 1;
500
- border-bottom: 1px solid #ddd;
501
- .box-shadow(0 1px 0 rgba(255,255,255,.5));
502
- h1 {
503
- margin-bottom: (@baseline / 2) - 1px;
504
- }
505
- }
506
-
507
-
508
- // BUTTON STYLES
509
- // -------------
510
-
511
- // Shared colors for buttons and alerts
512
- .btn,
513
- .alert-message {
514
- // Set text color
515
- &.danger,
516
- &.danger:hover,
517
- &.error,
518
- &.error:hover,
519
- &.success,
520
- &.success:hover,
521
- &.info,
522
- &.info:hover {
523
- color: @white
524
- }
525
- // Sets the close button to the middle of message
526
- .close{
527
- font-family: Arial, sans-serif;
528
- line-height: 18px;
529
- }
530
- // Danger and error appear as red
531
- &.danger,
532
- &.error {
533
- .gradientBar(#ee5f5b, #c43c35);
534
- }
535
- // Success appears as green
536
- &.success {
537
- .gradientBar(#62c462, #57a957);
538
- }
539
- // Info appears as a neutral blue
540
- &.info {
541
- .gradientBar(#5bc0de, #339bb9);
542
- }
543
- }
544
-
545
- // Base .btn styles
546
- .btn {
547
- // Button Base
548
- cursor: pointer;
549
- display: inline-block;
550
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
551
- padding: 5px 14px 6px;
552
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
553
- color: #333;
554
- font-size: @basefont;
555
- line-height: normal;
556
- border: 1px solid #ccc;
557
- border-bottom-color: #bbb;
558
- .border-radius(4px);
559
- @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
560
- .box-shadow(@shadow);
561
-
562
- &:hover {
563
- background-position: 0 -15px;
564
- color: #333;
565
- text-decoration: none;
566
- }
567
-
568
- // Focus state for keyboard and accessibility
569
- &:focus {
570
- outline: 1px dotted #666;
571
- }
572
-
573
- // Primary Button Type
574
- &.primary {
575
- color: @white;
576
- .gradientBar(@blue, @blueDark)
577
- }
578
-
579
- // Transitions
580
- .transition(.1s linear all);
581
-
582
- // Active and Disabled states
583
- &.active,
584
- &:active {
585
- @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
586
- .box-shadow(@shadow);
587
- }
588
- &.disabled {
589
- cursor: default;
590
- background-image: none;
591
- .reset-filter();
592
- .opacity(65);
593
- .box-shadow(none);
594
- }
595
- &[disabled] {
596
- // disabled pseudo can't be included with .disabled
597
- // def because IE8 and below will drop it ;_;
598
- cursor: default;
599
- background-image: none;
600
- .reset-filter();
601
- .opacity(65);
602
- .box-shadow(none);
603
- }
604
-
605
- // Button Sizes
606
- &.large {
607
- font-size: @basefont + 2px;
608
- line-height: normal;
609
- padding: 9px 14px 9px;
610
- .border-radius(6px);
611
- }
612
- &.small {
613
- padding: 7px 9px 7px;
614
- font-size: @basefont - 2px;
615
- }
616
- }
617
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
618
- :root .alert-message,
619
- :root .btn {
620
- border-radius: 0 \0;
621
- }
622
-
623
- // Help Firefox not be a jerk about adding extra padding to buttons
624
- button.btn,
625
- input[type=submit].btn {
626
- &::-moz-focus-inner {
627
- padding: 0;
628
- border: 0;
629
- }
630
- }
631
-
632
-
633
- // CLOSE ICONS
634
- // -----------
635
- .close {
636
- float: right;
637
- color: @black;
638
- font-size: 20px;
639
- font-weight: bold;
640
- line-height: @baseline * .75;
641
- text-shadow: 0 1px 0 rgba(255,255,255,1);
642
- .opacity(25);
643
- &:hover {
644
- color: @black;
645
- text-decoration: none;
646
- .opacity(40);
647
- }
648
- }
649
-
650
-
651
- // ERROR STYLES
652
- // ------------
653
-
654
- // Base alert styles
655
- .alert-message {
656
- position: relative;
657
- padding: 7px 15px;
658
- margin-bottom: @baseline;
659
- color: @grayDark;
660
- .gradientBar(#fceec1, #eedc94); // warning by default
661
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
662
- border-width: 1px;
663
- border-style: solid;
664
- .border-radius(4px);
665
- .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
666
-
667
- // Adjust close icon
668
- .close {
669
- margin-top: 1px;
670
- *margin-top: 0; // For IE7
671
- }
672
-
673
- // Make links same color as text and stand out more
674
- a {
675
- font-weight: bold;
676
- color: @grayDark;
677
- }
678
- &.danger p a,
679
- &.error p a,
680
- &.success p a,
681
- &.info p a {
682
- color: @white;
683
- }
684
-
685
- // Remove extra margin from content
686
- h5 {
687
- line-height: @baseline;
688
- }
689
- p {
690
- margin-bottom: 0;
691
- }
692
- div {
693
- margin-top: 5px;
694
- margin-bottom: 2px;
695
- line-height: 28px;
696
- }
697
- .btn {
698
- // Provide actions with buttons
699
- .box-shadow(0 1px 0 rgba(255,255,255,.25));
700
- }
701
-
702
- &.block-message {
703
- background-image: none;
704
- background-color: lighten(#fceec1, 5%);
705
- .reset-filter();
706
- padding: 14px;
707
- border-color: #fceec1;
708
- .box-shadow(none);
709
- ul, p {
710
- margin-right: 30px;
711
- }
712
- ul {
713
- margin-bottom: 0;
714
- }
715
- li {
716
- color: @grayDark;
717
- }
718
- .alert-actions {
719
- margin-top: 5px;
720
- }
721
- &.error,
722
- &.success,
723
- &.info {
724
- color: @grayDark;
725
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
726
- }
727
- &.error {
728
- background-color: lighten(#f56a66, 25%);
729
- border-color: lighten(#f56a66, 20%);
730
- }
731
- &.success {
732
- background-color: lighten(#62c462, 30%);
733
- border-color: lighten(#62c462, 25%);
734
- }
735
- &.info {
736
- background-color: lighten(#6bd0ee, 25%);
737
- border-color: lighten(#6bd0ee, 20%);
738
- }
739
- // Change link color back
740
- &.danger p a,
741
- &.error p a,
742
- &.success p a,
743
- &.info p a {
744
- color: @grayDark;
745
- }
746
-
747
- }
748
- }
749
-
750
-
751
- // PAGINATION
752
- // ----------
753
-
754
- .pagination {
755
- height: @baseline * 2;
756
- margin: @baseline 0;
757
- ul {
758
- float: left;
759
- margin: 0;
760
- border: 1px solid #ddd;
761
- border: 1px solid rgba(0,0,0,.15);
762
- .border-radius(3px);
763
- .box-shadow(0 1px 2px rgba(0,0,0,.05));
764
- }
765
- li {
766
- display: inline;
767
- }
768
- a {
769
- float: left;
770
- padding: 0 14px;
771
- line-height: (@baseline * 2) - 2;
772
- border-right: 1px solid;
773
- border-right-color: #ddd;
774
- border-right-color: rgba(0,0,0,.15);
775
- *border-right-color: #ddd; /* IE6-7 */
776
- text-decoration: none;
777
- }
778
- a:hover,
779
- .active a {
780
- background-color: lighten(@blue, 45%);
781
- }
782
- .disabled a,
783
- .disabled a:hover {
784
- background-color: transparent;
785
- color: @grayLight;
786
- }
787
- .next a {
788
- border: 0;
789
- }
790
- }
791
-
792
-
793
- // WELLS
794
- // -----
795
-
796
- .well {
797
- background-color: #f5f5f5;
798
- margin-bottom: 20px;
799
- padding: 19px;
800
- min-height: 20px;
801
- border: 1px solid #eee;
802
- border: 1px solid rgba(0,0,0,.05);
803
- .border-radius(4px);
804
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
805
- blockquote {
806
- border-color: #ddd;
807
- border-color: rgba(0,0,0,.15);
808
- }
809
- }
810
-
811
-
812
- // MODALS
813
- // ------
814
-
815
- .modal-backdrop {
816
- background-color: @black;
817
- position: fixed;
818
- top: 0;
819
- left: 0;
820
- right: 0;
821
- bottom: 0;
822
- z-index: 10000;
823
- // Fade for backdrop
824
- &.fade { opacity: 0; }
825
- }
826
-
827
- .modal-backdrop,
828
- .modal-backdrop.fade.in {
829
- .opacity(80);
830
- }
831
-
832
- .modal {
833
- position: fixed;
834
- top: 50%;
835
- left: 50%;
836
- z-index: 11000;
837
- max-height: 500px;
838
- overflow: auto;
839
- width: 560px;
840
- margin: -250px 0 0 -280px;
841
- background-color: @white;
842
- border: 1px solid #999;
843
- border: 1px solid rgba(0,0,0,.3);
844
- *border: 1px solid #999; /* IE6-7 */
845
- .border-radius(6px);
846
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
847
- .background-clip(padding-box);
848
- .close { margin-top: 7px; }
849
- &.fade {
850
- .transition(e('opacity .3s linear, top .3s ease-out'));
851
- top: -25%;
852
- }
853
- &.fade.in { top: 50%; }
854
- }
855
- .modal-header {
856
- border-bottom: 1px solid #eee;
857
- padding: 5px 15px;
858
- }
859
- .modal-body {
860
- padding: 15px;
861
- }
862
- .modal-body form {
863
- margin-bottom: 0;
864
- }
865
- .modal-footer {
866
- background-color: #f5f5f5;
867
- padding: 14px 15px 15px;
868
- border-top: 1px solid #ddd;
869
- .border-radius(0 0 6px 6px);
870
- .box-shadow(inset 0 1px 0 @white);
871
- .clearfix();
872
- margin-bottom: 0;
873
- .btn {
874
- float: right;
875
- margin-left: 5px;
876
- }
877
- }
878
-
879
- // Fix the stacking of these components when in modals
880
- .modal .popover,
881
- .modal .twipsy {
882
- z-index: 12000;
883
- }
884
-
885
-
886
- // POPOVER ARROWS
887
- // --------------
888
-
889
- #popoverArrow {
890
- .above(@arrowWidth: 5px) {
891
- bottom: 0;
892
- left: 50%;
893
- margin-left: -@arrowWidth;
894
- border-left: @arrowWidth solid transparent;
895
- border-right: @arrowWidth solid transparent;
896
- border-top: @arrowWidth solid @black;
897
- }
898
- .left(@arrowWidth: 5px) {
899
- top: 50%;
900
- right: 0;
901
- margin-top: -@arrowWidth;
902
- border-top: @arrowWidth solid transparent;
903
- border-bottom: @arrowWidth solid transparent;
904
- border-left: @arrowWidth solid @black;
905
- }
906
- .below(@arrowWidth: 5px) {
907
- top: 0;
908
- left: 50%;
909
- margin-left: -@arrowWidth;
910
- border-left: @arrowWidth solid transparent;
911
- border-right: @arrowWidth solid transparent;
912
- border-bottom: @arrowWidth solid @black;
913
- }
914
- .right(@arrowWidth: 5px) {
915
- top: 50%;
916
- left: 0;
917
- margin-top: -@arrowWidth;
918
- border-top: @arrowWidth solid transparent;
919
- border-bottom: @arrowWidth solid transparent;
920
- border-right: @arrowWidth solid @black;
921
- }
922
- }
923
-
924
- // TWIPSY
925
- // ------
926
-
927
- .twipsy {
928
- display: block;
929
- position: absolute;
930
- visibility: visible;
931
- padding: 5px;
932
- font-size: 11px;
933
- z-index: 1000;
934
- .opacity(80);
935
- &.fade.in {
936
- .opacity(80);
937
- }
938
- &.above .twipsy-arrow { #popoverArrow > .above(); }
939
- &.left .twipsy-arrow { #popoverArrow > .left(); }
940
- &.below .twipsy-arrow { #popoverArrow > .below(); }
941
- &.right .twipsy-arrow { #popoverArrow > .right(); }
942
- }
943
- .twipsy-inner {
944
- padding: 3px 8px;
945
- background-color: @black;
946
- color: white;
947
- text-align: center;
948
- max-width: 200px;
949
- text-decoration: none;
950
- .border-radius(4px);
951
- }
952
- .twipsy-arrow {
953
- position: absolute;
954
- width: 0;
955
- height: 0;
956
- }
957
-
958
-
959
- // POPOVERS
960
- // --------
961
-
962
- .popover {
963
- position: absolute;
964
- top: 0;
965
- left: 0;
966
- z-index: 1000;
967
- padding: 5px;
968
- display: none;
969
- &.above .arrow { #popoverArrow > .above(); }
970
- &.right .arrow { #popoverArrow > .right(); }
971
- &.below .arrow { #popoverArrow > .below(); }
972
- &.left .arrow { #popoverArrow > .left(); }
973
- .arrow {
974
- position: absolute;
975
- width: 0;
976
- height: 0;
977
- }
978
- .inner {
979
- background: @black;
980
- background: rgba(0,0,0,.8);
981
- padding: 3px;
982
- overflow: hidden;
983
- width: 280px;
984
- .border-radius(6px);
985
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
986
- }
987
- .title {
988
- background-color: #f5f5f5;
989
- padding: 9px 15px;
990
- line-height: 1;
991
- .border-radius(3px 3px 0 0);
992
- border-bottom:1px solid #eee;
993
- }
994
- .content {
995
- background-color: @white;
996
- padding: 14px;
997
- .border-radius(0 0 3px 3px);
998
- .background-clip(padding-box);
999
- p, ul, ol {
1000
- margin-bottom: 0;
1001
- }
1002
- }
1003
- }
1004
-
1005
-
1006
- // PATTERN ANIMATIONS
1007
- // ------------------
1008
-
1009
- .fade {
1010
- .transition(opacity .15s linear);
1011
- opacity: 0;
1012
- &.in {
1013
- opacity: 1;
1014
- }
1015
- }
1016
-
1017
-
1018
- // LABELS
1019
- // ------
1020
-
1021
- .label {
1022
- padding: 1px 3px 2px;
1023
- font-size: @basefont * .75;
1024
- font-weight: bold;
1025
- color: @white;
1026
- text-transform: uppercase;
1027
- white-space: nowrap;
1028
- background-color: @grayLight;
1029
- .border-radius(3px);
1030
- text-shadow: none;
1031
- &.important { background-color: #c43c35; }
1032
- &.warning { background-color: @orange; }
1033
- &.success { background-color: @green; }
1034
- &.notice { background-color: lighten(@blue, 25%); }
1035
- }
1036
-
1037
-
1038
- // MEDIA GRIDS
1039
- // -----------
1040
-
1041
- .media-grid {
1042
- margin-left: -@gridGutterWidth;
1043
- margin-bottom: 0;
1044
- .clearfix();
1045
- li {
1046
- display: inline;
1047
- }
1048
- a {
1049
- float: left;
1050
- padding: 4px;
1051
- margin: 0 0 @baseline @gridGutterWidth;
1052
- border: 1px solid #ddd;
1053
- .border-radius(4px);
1054
- .box-shadow(0 1px 1px rgba(0,0,0,.075));
1055
- img {
1056
- display: block;
1057
- }
1058
- &:hover {
1059
- border-color: @linkColor;
1060
- .box-shadow(0 1px 4px rgba(0,105,214,.25));
1061
- }
1062
- }
1063
- }