twitter-bootstrap-rails 2.0 → 2.0.1

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 (69) hide show
  1. data/README.md +27 -27
  2. data/Rakefile +1 -1
  3. data/lib/generators/bootstrap/install/install_generator.rb +1 -1
  4. data/lib/generators/bootstrap/install/templates/bootstrap.coffee +5 -15
  5. data/lib/generators/bootstrap/install/templates/bootstrap.less +4 -3
  6. data/lib/generators/bootstrap/layout/layout_generator.rb +14 -4
  7. data/lib/generators/bootstrap/layout/templates/layout.html.erb +112 -49
  8. data/lib/generators/bootstrap/layout/templates/layout.html.haml +90 -0
  9. data/lib/generators/bootstrap/layout/templates/layout.html.slim +77 -0
  10. data/lib/generators/bootstrap/themed/templates/_form.html.erb +1 -1
  11. data/lib/generators/bootstrap/themed/templates/_form.html.haml +11 -0
  12. data/lib/generators/bootstrap/themed/templates/_form.html.slim +11 -0
  13. data/lib/generators/bootstrap/themed/templates/edit.html.haml +3 -0
  14. data/lib/generators/bootstrap/themed/templates/edit.html.slim +3 -0
  15. data/lib/generators/bootstrap/themed/templates/index.html.erb +2 -2
  16. data/lib/generators/bootstrap/themed/templates/index.html.haml +25 -0
  17. data/lib/generators/bootstrap/themed/templates/index.html.slim +25 -0
  18. data/lib/generators/bootstrap/themed/templates/new.html.haml +2 -0
  19. data/lib/generators/bootstrap/themed/templates/new.html.slim +2 -0
  20. data/lib/generators/bootstrap/themed/templates/show.html.erb +5 -4
  21. data/lib/generators/bootstrap/themed/templates/show.html.haml +9 -0
  22. data/lib/generators/bootstrap/themed/templates/show.html.slim +9 -0
  23. data/lib/generators/bootstrap/themed/themed_generator.rb +13 -13
  24. data/lib/twitter/bootstrap/rails/version.rb +1 -1
  25. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  26. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  27. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-alert.js +9 -3
  28. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-button.js +1 -1
  29. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-carousel.js +3 -3
  30. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-collapse.js +6 -4
  31. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-dropdown.js +15 -6
  32. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-modal.js +7 -3
  33. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-popover.js +3 -3
  34. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-scrollspy.js +3 -2
  35. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tab.js +10 -5
  36. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-transition.js +1 -1
  37. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-typeahead.js +39 -20
  38. data/vendor/toolkit/twitter/bootstrap/accordion.less +5 -4
  39. data/vendor/toolkit/twitter/bootstrap/alerts.less +1 -0
  40. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +10 -8
  41. data/vendor/toolkit/twitter/bootstrap/button-groups.less +48 -18
  42. data/vendor/toolkit/twitter/bootstrap/buttons.less +137 -88
  43. data/vendor/toolkit/twitter/bootstrap/carousel.less +12 -5
  44. data/vendor/toolkit/twitter/bootstrap/code.less +44 -0
  45. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +23 -2
  46. data/vendor/toolkit/twitter/bootstrap/forms.less +83 -64
  47. data/vendor/toolkit/twitter/bootstrap/grid.less +8 -0
  48. data/vendor/toolkit/twitter/bootstrap/hero-unit.less +20 -0
  49. data/vendor/toolkit/twitter/bootstrap/labels.less +4 -4
  50. data/vendor/toolkit/twitter/bootstrap/layouts.less +17 -0
  51. data/vendor/toolkit/twitter/bootstrap/mixins.less +202 -38
  52. data/vendor/toolkit/twitter/bootstrap/modals.less +9 -2
  53. data/vendor/toolkit/twitter/bootstrap/navbar.less +70 -29
  54. data/vendor/toolkit/twitter/bootstrap/navs.less +70 -64
  55. data/vendor/toolkit/twitter/bootstrap/pager.less +7 -2
  56. data/vendor/toolkit/twitter/bootstrap/pagination.less +1 -0
  57. data/vendor/toolkit/twitter/bootstrap/popovers.less +25 -25
  58. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +14 -18
  59. data/vendor/toolkit/twitter/bootstrap/reset.less +2 -3
  60. data/vendor/toolkit/twitter/bootstrap/responsive.less +219 -164
  61. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +6 -89
  62. data/vendor/toolkit/twitter/bootstrap/sprites.less +137 -99
  63. data/vendor/toolkit/twitter/bootstrap/tables.less +1 -54
  64. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +2 -0
  65. data/vendor/toolkit/twitter/bootstrap/type.less +12 -42
  66. data/vendor/toolkit/twitter/bootstrap/variables.less +23 -14
  67. metadata +34 -18
  68. data/vendor/toolkit/twitter/bootstrap/patterns.less +0 -30
  69. data/vendor/toolkit/twitter/bootstrap/print.less +0 -18
@@ -38,8 +38,8 @@
38
38
  , title = this.getTitle()
39
39
  , content = this.getContent()
40
40
 
41
- $tip.find('.title')[ $.type(title) == 'object' ? 'append' : 'html' ](title)
42
- $tip.find('.content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content)
41
+ $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title)
42
+ $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content)
43
43
 
44
44
  $tip.removeClass('fade top bottom left right in')
45
45
  }
@@ -89,7 +89,7 @@
89
89
  $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
90
90
  placement: 'right'
91
91
  , content: ''
92
- , template: '<div class="popover"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
92
+ , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
93
93
  })
94
94
 
95
95
  }( window.jQuery )
@@ -27,10 +27,11 @@
27
27
  function ScrollSpy( element, options) {
28
28
  var process = $.proxy(this.process, this)
29
29
  , $element = $(element).is('body') ? $(window) : $(element)
30
+ , href
30
31
  this.options = $.extend({}, $.fn.scrollspy.defaults, options)
31
32
  this.$scrollElement = $element.on('scroll.scroll.data-api', process)
32
33
  this.selector = (this.options.target
33
- || $(element).attr('href')
34
+ || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
34
35
  || '') + ' .nav li > a'
35
36
  this.$body = $('body').on('click.scroll.data-api', this.selector, process)
36
37
  this.refresh()
@@ -121,4 +122,4 @@
121
122
  })
122
123
  })
123
124
 
124
- }( window.jQuery )
125
+ }( window.jQuery )
@@ -36,9 +36,14 @@
36
36
  , show: function () {
37
37
  var $this = this.element
38
38
  , $ul = $this.closest('ul:not(.dropdown-menu)')
39
- , href = $this.attr('data-target') || $this.attr('href')
39
+ , selector = $this.attr('data-target')
40
40
  , previous
41
- , $href
41
+ , $target
42
+
43
+ if (!selector) {
44
+ selector = $this.attr('href')
45
+ selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
46
+ }
42
47
 
43
48
  if ( $this.parent('li').hasClass('active') ) return
44
49
 
@@ -49,10 +54,10 @@
49
54
  , relatedTarget: previous
50
55
  })
51
56
 
52
- $href = $(href)
57
+ $target = $(selector)
53
58
 
54
59
  this.activate($this.parent('li'), $ul)
55
- this.activate($href, $href.parent(), function () {
60
+ this.activate($target, $target.parent(), function () {
56
61
  $this.trigger({
57
62
  type: 'shown'
58
63
  , relatedTarget: previous
@@ -122,4 +127,4 @@
122
127
  })
123
128
  })
124
129
 
125
- }( window.jQuery )
130
+ }( window.jQuery )
@@ -48,4 +48,4 @@
48
48
 
49
49
  })
50
50
 
51
- }( window.jQuery )
51
+ }( window.jQuery )
@@ -24,8 +24,11 @@
24
24
  var Typeahead = function ( element, options ) {
25
25
  this.$element = $(element)
26
26
  this.options = $.extend({}, $.fn.typeahead.defaults, options)
27
+ this.matcher = this.options.matcher || this.matcher
28
+ this.sorter = this.options.sorter || this.sorter
29
+ this.highlighter = this.options.highlighter || this.highlighter
27
30
  this.$menu = $(this.options.menu).appendTo('body')
28
- this.data = this.options.data
31
+ this.source = this.options.source
29
32
  this.shown = false
30
33
  this.listen()
31
34
  }
@@ -34,11 +37,6 @@
34
37
 
35
38
  constructor: Typeahead
36
39
 
37
- , matcher: function (item, query) {
38
- // ;_; http://jsperf.com/asdfdfasdfa
39
- return ~item.toLowerCase().indexOf(query)
40
- }
41
-
42
40
  , select: function () {
43
41
  var val = this.$menu.find('.active').attr('data-value')
44
42
  this.$element.val(val)
@@ -77,12 +75,12 @@
77
75
  return this.shown ? this.hide() : this
78
76
  }
79
77
 
80
- q = this.query.toLowerCase()
81
-
82
- items = this.data.filter(function (item) {
83
- if (that.matcher(item, q)) return item
78
+ items = $.grep(this.source, function (item) {
79
+ if (that.matcher(item)) return item
84
80
  })
85
81
 
82
+ items = this.sorter(items)
83
+
86
84
  if (!items.length) {
87
85
  return this.shown ? this.hide() : this
88
86
  }
@@ -90,17 +88,37 @@
90
88
  return this.render(items.slice(0, this.options.items)).show()
91
89
  }
92
90
 
91
+ , matcher: function (item) {
92
+ return ~item.toLowerCase().indexOf(this.query.toLowerCase())
93
+ }
94
+
95
+ , sorter: function (items) {
96
+ var beginswith = []
97
+ , caseSensitive = []
98
+ , caseInsensitive = []
99
+ , item
100
+
101
+ while (item = items.shift()) {
102
+ if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
103
+ else if (~item.indexOf(this.query)) caseSensitive.push(item)
104
+ else caseInsensitive.push(item)
105
+ }
106
+
107
+ return beginswith.concat(caseSensitive, caseInsensitive)
108
+ }
109
+
110
+ , highlighter: function (item) {
111
+ return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
112
+ return '<strong>' + match + '</strong>'
113
+ })
114
+ }
115
+
93
116
  , render: function (items) {
94
117
  var that = this
95
- , QUERY = new RegExp('(' + this.query + ')', 'ig')
96
118
 
97
119
  items = $(items).map(function (i, item) {
98
120
  i = $(that.options.item).attr('data-value', item)
99
-
100
- i.find('a').html(item.replace(QUERY, function ($1, match) {
101
- return '<strong>' + match + '</strong>'
102
- }))
103
-
121
+ i.find('a').html(that.highlighter(item))
104
122
  return i[0]
105
123
  })
106
124
 
@@ -157,6 +175,7 @@
157
175
 
158
176
  case 9: // tab
159
177
  case 13: // enter
178
+ if (!this.shown) return
160
179
  this.select()
161
180
  break
162
181
 
@@ -172,6 +191,7 @@
172
191
 
173
192
  , keypress: function (e) {
174
193
  e.stopPropagation()
194
+ if (!this.shown) return
175
195
 
176
196
  switch(e.keyCode) {
177
197
  case 9: // tab
@@ -181,13 +201,11 @@
181
201
  break
182
202
 
183
203
  case 38: // up arrow
184
- if (!this.shown) return
185
204
  e.preventDefault()
186
205
  this.prev()
187
206
  break
188
207
 
189
208
  case 40: // down arrow
190
- if (!this.shown) return
191
209
  e.preventDefault()
192
210
  this.next()
193
211
  break
@@ -229,7 +247,8 @@
229
247
  }
230
248
 
231
249
  $.fn.typeahead.defaults = {
232
- items: 8
250
+ source: []
251
+ , items: 8
233
252
  , menu: '<ul class="typeahead dropdown-menu"></ul>'
234
253
  , item: '<li><a href="#"></a></li>'
235
254
  }
@@ -249,4 +268,4 @@
249
268
  })
250
269
  })
251
270
 
252
- }( window.jQuery )
271
+ }( window.jQuery )
@@ -9,15 +9,16 @@
9
9
 
10
10
  // Group == heading + body
11
11
  .accordion-group {
12
- background-color: #f5f5f5;
12
+ margin-bottom: 2px;
13
+ border: 1px solid #e5e5e5;
13
14
  .border-radius(4px);
14
15
  }
15
16
  .accordion-heading {
16
- padding: 8px 15px;
17
17
  border-bottom: 0;
18
18
  }
19
- .accordion-body {
20
- margin-bottom: 2px;
19
+ .accordion-heading .accordion-toggle {
20
+ display: block;
21
+ padding: 8px 15px;
21
22
  }
22
23
 
23
24
  // Inner needs the styles because you can't animate properly with any styles on the element
@@ -18,6 +18,7 @@
18
18
  // Adjust close link position
19
19
  .alert .close {
20
20
  position: relative;
21
+ top: -2px;
21
22
  right: -21px;
22
23
  line-height: 18px;
23
24
  }
@@ -1,12 +1,11 @@
1
1
  /*!
2
- * Bootstrap @VERSION
2
+ * Bootstrap v2.0.0
3
3
  *
4
4
  * Copyright 2012 Twitter, Inc
5
5
  * Licensed under the Apache License v2.0
6
6
  * http://www.apache.org/licenses/LICENSE-2.0
7
7
  *
8
8
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
9
- * Date: @DATE
10
9
  */
11
10
 
12
11
  // CSS Reset
@@ -18,9 +17,12 @@
18
17
 
19
18
  // Grid system and page structure
20
19
  @import "scaffolding.less";
20
+ @import "grid.less";
21
+ @import "layouts.less";
21
22
 
22
23
  // Base CSS
23
24
  @import "type.less";
25
+ @import "code.less";
24
26
  @import "forms.less";
25
27
  @import "tables.less";
26
28
 
@@ -31,6 +33,11 @@
31
33
  @import "component-animations.less";
32
34
  @import "close.less";
33
35
 
36
+ // Components: Buttons & Alerts
37
+ @import "buttons.less";
38
+ @import "button-groups.less";
39
+ @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
40
+
34
41
  // Components: Nav
35
42
  @import "navs.less";
36
43
  @import "navbar.less";
@@ -43,18 +50,13 @@
43
50
  @import "tooltip.less";
44
51
  @import "popovers.less";
45
52
 
46
- // Components: Buttons & Alerts
47
- @import "buttons.less";
48
- @import "button-groups.less";
49
- @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
50
-
51
53
  // Components: Misc
52
54
  @import "thumbnails.less";
53
55
  @import "labels.less";
54
56
  @import "progress-bars.less";
55
57
  @import "accordion.less";
56
58
  @import "carousel.less";
57
- @import "responsive.less";
59
+ @import "hero-unit.less";
58
60
 
59
61
  // Utility classes
60
62
  @import "utilities.less"; // Has to be last to override when necessary
@@ -6,6 +6,7 @@
6
6
  .btn-group {
7
7
  position: relative;
8
8
  .clearfix(); // clears the floated buttons
9
+ .ie7-restore-left-whitespace();
9
10
  }
10
11
 
11
12
  // Space out series of button groups
@@ -15,8 +16,11 @@
15
16
 
16
17
  // Optional: Group multiple button groups together for a toolbar
17
18
  .btn-toolbar {
19
+ margin-top: @baseLineHeight / 2;
20
+ margin-bottom: @baseLineHeight / 2;
18
21
  .btn-group {
19
22
  display: inline-block;
23
+ .ie7-inline-block();
20
24
  }
21
25
  }
22
26
 
@@ -25,7 +29,7 @@
25
29
  position: relative;
26
30
  float: left;
27
31
  margin-left: -1px;
28
- .border-radius(0);
32
+ .border-radius(0px);
29
33
  }
30
34
  // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
31
35
  .btn-group .btn:first-child {
@@ -69,10 +73,18 @@
69
73
  // On hover/focus/active, bring the proper btn to front
70
74
  .btn-group .btn:hover,
71
75
  .btn-group .btn:focus,
72
- .btn-group .btn:active {
76
+ .btn-group .btn:active,
77
+ .btn-group .btn.active {
73
78
  z-index: 2;
74
79
  }
75
80
 
81
+ // On active and open, don't show outline
82
+ .btn-group .dropdown-toggle:active,
83
+ .btn-group.open .dropdown-toggle {
84
+ outline: 0;
85
+ }
86
+
87
+
76
88
 
77
89
  // Split button dropdowns
78
90
  // ----------------------
@@ -81,36 +93,54 @@
81
93
  .btn-group .dropdown-toggle {
82
94
  padding-left: 8px;
83
95
  padding-right: 8px;
84
- @shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05);
96
+ @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
85
97
  .box-shadow(@shadow);
98
+ *padding-top: 5px;
99
+ *padding-bottom: 5px;
86
100
  }
87
101
 
88
- // Reposition menu on open and round all corners
89
- .btn-group.open .dropdown-menu {
90
- display: block;
91
- margin-top: 1px;
92
- .border-radius(5px);
93
- }
94
- .btn-group.open .dropdown-toggle {
95
- background-image: none;
96
- @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
97
- .box-shadow(@shadow);
102
+ .btn-group.open {
103
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
104
+ // make the menu appear below buttons that appeared later on the page
105
+ *z-index: @zindexDropdown;
106
+
107
+ // Reposition menu on open and round all corners
108
+ .dropdown-menu {
109
+ display: block;
110
+ margin-top: 1px;
111
+ .border-radius(5px);
112
+ }
113
+
114
+ .dropdown-toggle {
115
+ background-image: none;
116
+ @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
117
+ .box-shadow(@shadow);
118
+ }
98
119
  }
99
120
 
100
121
  // Reposition the caret
101
122
  .btn .caret {
102
- margin-top: 6px;
123
+ margin-top: 7px;
103
124
  margin-left: 0;
104
125
  }
126
+ .btn:hover .caret,
127
+ .open.btn-group .caret {
128
+ .opacity(100);
129
+ }
130
+
105
131
 
106
132
  // Account for other colors
107
- .primary,
108
- .danger,
109
- .info,
110
- .success {
133
+ .btn-primary,
134
+ .btn-danger,
135
+ .btn-info,
136
+ .btn-success {
111
137
  .caret {
112
138
  border-top-color: @white;
113
139
  .opacity(75);
114
140
  }
115
141
  }
116
142
 
143
+ // Small button dropdowns
144
+ .btn-small .caret {
145
+ margin-top: 4px;
146
+ }
@@ -1,40 +1,18 @@
1
1
  // BUTTON STYLES
2
2
  // -------------
3
3
 
4
- // Shared colors for buttons and alerts
5
- .btn {
6
- // Set text color
7
- &.danger,
8
- &.danger:hover,
9
- &.success,
10
- &.success:hover,
11
- &.info,
12
- &.info:hover {
13
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
14
- color: @white
15
- }
16
- // Danger and error appear as red
17
- &.danger {
18
- .gradientBar(#ee5f5b, #c43c35);
19
- }
20
- // Success appears as green
21
- &.success {
22
- .gradientBar(#62c462, #57a957);
23
- }
24
- // Info appears as a neutral blue
25
- &.info {
26
- .gradientBar(#5bc0de, #339bb9);
27
- }
28
- }
29
4
 
30
- // Base .btn styles
5
+ // Base styles
6
+ // --------------------------------------------------
7
+
8
+ // Core
31
9
  .btn {
32
- // Button Base
33
10
  display: inline-block;
34
- padding: 5px 10px 6px;
11
+ padding: 4px 10px 4px;
35
12
  font-size: @baseFontSize;
36
- line-height: normal;
13
+ line-height: @baseLineHeight;
37
14
  color: @grayDark;
15
+ text-align: center;
38
16
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
39
17
  #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
40
18
  border: 1px solid #ccc;
@@ -44,73 +22,144 @@
44
22
  .box-shadow(@shadow);
45
23
  cursor: pointer;
46
24
 
47
- &:hover {
48
- color: @grayDark;
49
- text-decoration: none;
50
- background-position: 0 -15px;
51
- }
25
+ // Give IE7 some love
26
+ .ie7-restore-left-whitespace();
27
+ }
52
28
 
53
- // Focus state for keyboard and accessibility
54
- &:focus {
55
- outline: 1px dotted #666;
56
- }
29
+ // Hover state
30
+ .btn:hover {
31
+ color: @grayDark;
32
+ text-decoration: none;
33
+ background-color: darken(@white, 10%);
34
+ background-position: 0 -15px;
57
35
 
58
- // Primary Button Type
59
- &.primary {
60
- color: @white;
61
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
62
- .gradientBar(@blue, @blueDark)
63
- }
36
+ // transition is only when going to hover, otherwise the background
37
+ // behind the gradient (there for IE<=9 fallback) gets mismatched
38
+ .transition(background-position .1s linear);
39
+ }
64
40
 
65
- // Transitions
66
- .transition(.1s linear all);
41
+ // Focus state for keyboard and accessibility
42
+ .btn:focus {
43
+ .tab-focus();
44
+ }
67
45
 
68
- // Active and Disabled states
69
- &.active,
70
- &:active {
71
- background-image: none;
72
- @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
73
- .box-shadow(@shadow);
74
- }
75
- &.disabled {
76
- cursor: default;
77
- background-image: none;
78
- .reset-filter();
79
- .opacity(65);
80
- .box-shadow(none);
81
- }
82
- &[disabled] {
83
- // disabled pseudo can't be included with .disabled
84
- // def because IE8 and below will drop it ;_;
85
- cursor: default;
86
- background-image: none;
87
- .reset-filter();
88
- .opacity(65);
89
- .box-shadow(none);
90
- }
46
+ // Active state
47
+ .btn.active,
48
+ .btn:active {
49
+ background-image: none;
50
+ @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
51
+ .box-shadow(@shadow);
52
+ background-color: darken(@white, 10%);
53
+ background-color: darken(@white, 15%) e("\9");
54
+ color: rgba(0,0,0,.5);
55
+ outline: 0;
56
+ }
91
57
 
92
- // Button Sizes
93
- &.large {
94
- padding: 9px 14px 9px;
95
- font-size: @baseFontSize + 2px;
96
- line-height: normal;
97
- .border-radius(5px);
98
- }
99
- &.small {
100
- padding: 7px 9px 7px;
101
- font-size: @baseFontSize - 2px;
102
- }
58
+ // Disabled state
59
+ .btn.disabled,
60
+ .btn[disabled] {
61
+ cursor: default;
62
+ background-image: none;
63
+ background-color: darken(@white, 10%);
64
+ .opacity(65);
65
+ .box-shadow(none);
103
66
  }
104
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
105
- :root .btn {
106
- border-radius: 0 \0;
67
+
68
+
69
+ // Button Sizes
70
+ // --------------------------------------------------
71
+
72
+ // Large
73
+ .btn-large {
74
+ padding: 9px 14px;
75
+ font-size: @baseFontSize + 2px;
76
+ line-height: normal;
77
+ .border-radius(5px);
107
78
  }
79
+ .btn-large .icon {
80
+ margin-top: 1px;
81
+ }
82
+
83
+ // Small
84
+ .btn-small {
85
+ padding: 5px 9px;
86
+ font-size: @baseFontSize - 2px;
87
+ line-height: @baseLineHeight - 2px;
88
+ }
89
+ .btn-small .icon {
90
+ margin-top: -1px;
91
+ }
92
+
93
+
94
+ // Alternate buttons
95
+ // --------------------------------------------------
96
+
97
+ // Set text color
98
+ // -------------------------
99
+ .btn-primary,
100
+ .btn-primary:hover,
101
+ .btn-warning,
102
+ .btn-warning:hover,
103
+ .btn-danger,
104
+ .btn-danger:hover,
105
+ .btn-success,
106
+ .btn-success:hover,
107
+ .btn-info,
108
+ .btn-info:hover {
109
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
110
+ color: @white;
111
+ }
112
+ // Provide *some* extra contrast for those who can get it
113
+ .btn-primary.active,
114
+ .btn-warning.active,
115
+ .btn-danger.active,
116
+ .btn-success.active,
117
+ .btn-info.active {
118
+ color: rgba(255,255,255,.75);
119
+ }
120
+
121
+ // Set the backgrounds
122
+ // -------------------------
123
+ .btn-primary {
124
+ .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
125
+ }
126
+ // Warning appears are orange
127
+ .btn-warning {
128
+ .buttonBackground(lighten(@orange, 15%), @orange);
129
+ }
130
+ // Danger and error appear as red
131
+ .btn-danger {
132
+ .buttonBackground(#ee5f5b, #bd362f);
133
+ }
134
+ // Success appears as green
135
+ .btn-success {
136
+ .buttonBackground(#62c462, #51a351);
137
+ }
138
+ // Info appears as a neutral blue
139
+ .btn-info {
140
+ .buttonBackground(#5bc0de, #2f96b4);
141
+ }
142
+
143
+
144
+ // Cross-browser Jank
145
+ // --------------------------------------------------
108
146
 
109
- // Help Firefox not be a jerk about adding extra padding to buttons
110
147
  button.btn,
111
- input[type=submit].btn {
148
+ input[type="submit"].btn {
112
149
  &::-moz-focus-inner {
113
- padding: 0;
114
- border: 0;
150
+ padding: 0;
151
+ border: 0;
115
152
  }
116
- }
153
+
154
+ // IE7 has some default padding on button controls
155
+ *padding-top: 2px;
156
+ *padding-bottom: 2px;
157
+ &.large {
158
+ *padding-top: 7px;
159
+ *padding-bottom: 7px;
160
+ }
161
+ &.small {
162
+ *padding-top: 3px;
163
+ *padding-bottom: 3px;
164
+ }
165
+ }