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.
- data/README.md +27 -27
- data/Rakefile +1 -1
- data/lib/generators/bootstrap/install/install_generator.rb +1 -1
- data/lib/generators/bootstrap/install/templates/bootstrap.coffee +5 -15
- data/lib/generators/bootstrap/install/templates/bootstrap.less +4 -3
- data/lib/generators/bootstrap/layout/layout_generator.rb +14 -4
- data/lib/generators/bootstrap/layout/templates/layout.html.erb +112 -49
- data/lib/generators/bootstrap/layout/templates/layout.html.haml +90 -0
- data/lib/generators/bootstrap/layout/templates/layout.html.slim +77 -0
- data/lib/generators/bootstrap/themed/templates/_form.html.erb +1 -1
- data/lib/generators/bootstrap/themed/templates/_form.html.haml +11 -0
- data/lib/generators/bootstrap/themed/templates/_form.html.slim +11 -0
- data/lib/generators/bootstrap/themed/templates/edit.html.haml +3 -0
- data/lib/generators/bootstrap/themed/templates/edit.html.slim +3 -0
- data/lib/generators/bootstrap/themed/templates/index.html.erb +2 -2
- data/lib/generators/bootstrap/themed/templates/index.html.haml +25 -0
- data/lib/generators/bootstrap/themed/templates/index.html.slim +25 -0
- data/lib/generators/bootstrap/themed/templates/new.html.haml +2 -0
- data/lib/generators/bootstrap/themed/templates/new.html.slim +2 -0
- data/lib/generators/bootstrap/themed/templates/show.html.erb +5 -4
- data/lib/generators/bootstrap/themed/templates/show.html.haml +9 -0
- data/lib/generators/bootstrap/themed/templates/show.html.slim +9 -0
- data/lib/generators/bootstrap/themed/themed_generator.rb +13 -13
- data/lib/twitter/bootstrap/rails/version.rb +1 -1
- data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-alert.js +9 -3
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-button.js +1 -1
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-carousel.js +3 -3
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-collapse.js +6 -4
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-dropdown.js +15 -6
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-modal.js +7 -3
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-popover.js +3 -3
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-scrollspy.js +3 -2
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tab.js +10 -5
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-transition.js +1 -1
- data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-typeahead.js +39 -20
- data/vendor/toolkit/twitter/bootstrap/accordion.less +5 -4
- data/vendor/toolkit/twitter/bootstrap/alerts.less +1 -0
- data/vendor/toolkit/twitter/bootstrap/bootstrap.less +10 -8
- data/vendor/toolkit/twitter/bootstrap/button-groups.less +48 -18
- data/vendor/toolkit/twitter/bootstrap/buttons.less +137 -88
- data/vendor/toolkit/twitter/bootstrap/carousel.less +12 -5
- data/vendor/toolkit/twitter/bootstrap/code.less +44 -0
- data/vendor/toolkit/twitter/bootstrap/dropdowns.less +23 -2
- data/vendor/toolkit/twitter/bootstrap/forms.less +83 -64
- data/vendor/toolkit/twitter/bootstrap/grid.less +8 -0
- data/vendor/toolkit/twitter/bootstrap/hero-unit.less +20 -0
- data/vendor/toolkit/twitter/bootstrap/labels.less +4 -4
- data/vendor/toolkit/twitter/bootstrap/layouts.less +17 -0
- data/vendor/toolkit/twitter/bootstrap/mixins.less +202 -38
- data/vendor/toolkit/twitter/bootstrap/modals.less +9 -2
- data/vendor/toolkit/twitter/bootstrap/navbar.less +70 -29
- data/vendor/toolkit/twitter/bootstrap/navs.less +70 -64
- data/vendor/toolkit/twitter/bootstrap/pager.less +7 -2
- data/vendor/toolkit/twitter/bootstrap/pagination.less +1 -0
- data/vendor/toolkit/twitter/bootstrap/popovers.less +25 -25
- data/vendor/toolkit/twitter/bootstrap/progress-bars.less +14 -18
- data/vendor/toolkit/twitter/bootstrap/reset.less +2 -3
- data/vendor/toolkit/twitter/bootstrap/responsive.less +219 -164
- data/vendor/toolkit/twitter/bootstrap/scaffolding.less +6 -89
- data/vendor/toolkit/twitter/bootstrap/sprites.less +137 -99
- data/vendor/toolkit/twitter/bootstrap/tables.less +1 -54
- data/vendor/toolkit/twitter/bootstrap/thumbnails.less +2 -0
- data/vendor/toolkit/twitter/bootstrap/type.less +12 -42
- data/vendor/toolkit/twitter/bootstrap/variables.less +23 -14
- metadata +34 -18
- data/vendor/toolkit/twitter/bootstrap/patterns.less +0 -30
- 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
|
-
,
|
39
|
+
, selector = $this.attr('data-target')
|
40
40
|
, previous
|
41
|
-
, $
|
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
|
-
$
|
57
|
+
$target = $(selector)
|
53
58
|
|
54
59
|
this.activate($this.parent('li'), $ul)
|
55
|
-
this.activate($
|
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 )
|
@@ -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.
|
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
|
-
|
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
|
-
|
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
|
-
|
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-
|
20
|
-
|
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
|
@@ -1,12 +1,11 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap
|
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 "
|
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(
|
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
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
.
|
95
|
-
|
96
|
-
|
97
|
-
|
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:
|
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
|
5
|
+
// Base styles
|
6
|
+
// --------------------------------------------------
|
7
|
+
|
8
|
+
// Core
|
31
9
|
.btn {
|
32
|
-
// Button Base
|
33
10
|
display: inline-block;
|
34
|
-
padding:
|
11
|
+
padding: 4px 10px 4px;
|
35
12
|
font-size: @baseFontSize;
|
36
|
-
line-height:
|
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
|
-
|
48
|
-
|
49
|
-
|
50
|
-
background-position: 0 -15px;
|
51
|
-
}
|
25
|
+
// Give IE7 some love
|
26
|
+
.ie7-restore-left-whitespace();
|
27
|
+
}
|
52
28
|
|
53
|
-
|
54
|
-
|
55
|
-
|
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
|
-
//
|
59
|
-
|
60
|
-
|
61
|
-
|
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
|
-
|
66
|
-
|
41
|
+
// Focus state for keyboard and accessibility
|
42
|
+
.btn:focus {
|
43
|
+
.tab-focus();
|
44
|
+
}
|
67
45
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
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
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
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
|
-
|
105
|
-
|
106
|
-
|
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
|
-
|
114
|
-
|
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
|
+
}
|