twitter-bootstrap-rails 1.4.3 → 2.0rc0

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

Potentially problematic release.


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

Files changed (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
- }