twitter-bootstrap-rails 2.0 → 2.0.1
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.
- 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
|
+
}
|