twbs_less_rails 1.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (142) hide show
  1. checksums.yaml +7 -0
  2. data/CHANGELOG.md +12 -0
  3. data/CONTRIBUTING.md +45 -0
  4. data/Gemfile +3 -0
  5. data/Gemfile.lock +144 -0
  6. data/LICENSE +30 -0
  7. data/README.md +147 -0
  8. data/Rakefile +113 -0
  9. data/app/assets/fonts/fontawesome-webfont.eot +0 -0
  10. data/app/assets/fonts/fontawesome-webfont.svg +399 -0
  11. data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
  12. data/app/assets/fonts/fontawesome-webfont.woff +0 -0
  13. data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  14. data/app/assets/fonts/glyphicons-halflings-regular.svg +229 -0
  15. data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  16. data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  17. data/gemfiles/Gemfile.rails-3.2.x +9 -0
  18. data/gemfiles/Gemfile.rails-4.0.x +9 -0
  19. data/lib/generators/twbs_less_rails/install/install_generator.rb +31 -0
  20. data/lib/generators/twbs_less_rails/install/templates/application.css +15 -0
  21. data/lib/generators/twbs_less_rails/install/templates/application.js +17 -0
  22. data/lib/generators/twbs_less_rails/install/templates/twbs-variables.css.less +5 -0
  23. data/lib/generators/twbs_less_rails/install/templates/twbs.css.less +14 -0
  24. data/lib/generators/twbs_less_rails/install/templates/twbs.js.coffee +7 -0
  25. data/lib/tasks/twbs_less_rails_tasks.rake +4 -0
  26. data/lib/twbs_less_rails/engine.rb +7 -0
  27. data/lib/twbs_less_rails/version.rb +3 -0
  28. data/lib/twbs_less_rails.rb +4 -0
  29. data/test/dummy/README.rdoc +28 -0
  30. data/test/dummy/Rakefile +6 -0
  31. data/test/dummy/app/assets/images/.keep +0 -0
  32. data/test/dummy/app/assets/javascripts/application.js +14 -0
  33. data/test/dummy/app/assets/stylesheets/application.css +15 -0
  34. data/test/dummy/app/assets/stylesheets/default-twbs.css.less +1 -0
  35. data/test/dummy/app/assets/stylesheets/test.css.less +5 -0
  36. data/test/dummy/app/assets/stylesheets/twbs-variables.css.less +6 -0
  37. data/test/dummy/app/assets/stylesheets/twbs.css.less +14 -0
  38. data/test/dummy/app/controllers/application_controller.rb +5 -0
  39. data/test/dummy/app/controllers/concerns/.keep +0 -0
  40. data/test/dummy/app/helpers/application_helper.rb +2 -0
  41. data/test/dummy/app/mailers/.keep +0 -0
  42. data/test/dummy/app/models/.keep +0 -0
  43. data/test/dummy/app/models/concerns/.keep +0 -0
  44. data/test/dummy/app/views/layouts/application.html.erb +14 -0
  45. data/test/dummy/bin/bundle +3 -0
  46. data/test/dummy/bin/rails +4 -0
  47. data/test/dummy/bin/rake +4 -0
  48. data/test/dummy/config/application.rb +27 -0
  49. data/test/dummy/config/boot.rb +5 -0
  50. data/test/dummy/config/database.yml +25 -0
  51. data/test/dummy/config/environment.rb +5 -0
  52. data/test/dummy/config/environments/development.rb +29 -0
  53. data/test/dummy/config/environments/production.rb +80 -0
  54. data/test/dummy/config/environments/test.rb +36 -0
  55. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  56. data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
  57. data/test/dummy/config/initializers/inflections.rb +16 -0
  58. data/test/dummy/config/initializers/mime_types.rb +5 -0
  59. data/test/dummy/config/initializers/secret_token.rb +18 -0
  60. data/test/dummy/config/initializers/session_store.rb +3 -0
  61. data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
  62. data/test/dummy/config/locales/en.yml +23 -0
  63. data/test/dummy/config/routes.rb +56 -0
  64. data/test/dummy/config.ru +4 -0
  65. data/test/dummy/db/.keep +0 -0
  66. data/test/dummy/lib/assets/.keep +0 -0
  67. data/test/dummy/log/.keep +0 -0
  68. data/test/dummy/public/404.html +58 -0
  69. data/test/dummy/public/422.html +58 -0
  70. data/test/dummy/public/500.html +57 -0
  71. data/test/dummy/public/favicon.ico +0 -0
  72. data/test/generators/default_rails_assets/application.css +13 -0
  73. data/test/generators/default_rails_assets/application.js +16 -0
  74. data/test/generators/install_generator_test.rb +47 -0
  75. data/test/integration/assets_precompile_integration_test.rb +49 -0
  76. data/test/integration/twbs_less_rails_integration_test.rb +38 -0
  77. data/test/test_helper.rb +38 -0
  78. data/twbs_less_rails.gemspec +34 -0
  79. data/vendor/assets/javascripts/respond.js +342 -0
  80. data/vendor/assets/javascripts/twbs/bootstrap/affix.js +126 -0
  81. data/vendor/assets/javascripts/twbs/bootstrap/alert.js +98 -0
  82. data/vendor/assets/javascripts/twbs/bootstrap/button.js +109 -0
  83. data/vendor/assets/javascripts/twbs/bootstrap/carousel.js +217 -0
  84. data/vendor/assets/javascripts/twbs/bootstrap/collapse.js +179 -0
  85. data/vendor/assets/javascripts/twbs/bootstrap/dropdown.js +154 -0
  86. data/vendor/assets/javascripts/twbs/bootstrap/modal.js +246 -0
  87. data/vendor/assets/javascripts/twbs/bootstrap/popover.js +117 -0
  88. data/vendor/assets/javascripts/twbs/bootstrap/scrollspy.js +158 -0
  89. data/vendor/assets/javascripts/twbs/bootstrap/tab.js +135 -0
  90. data/vendor/assets/javascripts/twbs/bootstrap/tooltip.js +386 -0
  91. data/vendor/assets/javascripts/twbs/bootstrap/transition.js +56 -0
  92. data/vendor/assets/javascripts/twbs/bootstrap.js +12 -0
  93. data/vendor/assets/stylesheets/fontawesome/bootstrap.less +84 -0
  94. data/vendor/assets/stylesheets/fontawesome/core.less +129 -0
  95. data/vendor/assets/stylesheets/fontawesome/extras.less +93 -0
  96. data/vendor/assets/stylesheets/fontawesome/font-awesome.less +33 -0
  97. data/vendor/assets/stylesheets/fontawesome/icons.less +381 -0
  98. data/vendor/assets/stylesheets/fontawesome/mixins.less +48 -0
  99. data/vendor/assets/stylesheets/fontawesome/path.less +14 -0
  100. data/vendor/assets/stylesheets/fontawesome/variables.less +735 -0
  101. data/vendor/assets/stylesheets/twbs/bootstrap/alerts.less +67 -0
  102. data/vendor/assets/stylesheets/twbs/bootstrap/badges.less +51 -0
  103. data/vendor/assets/stylesheets/twbs/bootstrap/bootstrap.less +48 -0
  104. data/vendor/assets/stylesheets/twbs/bootstrap/breadcrumbs.less +23 -0
  105. data/vendor/assets/stylesheets/twbs/bootstrap/button-groups.less +248 -0
  106. data/vendor/assets/stylesheets/twbs/bootstrap/buttons.less +158 -0
  107. data/vendor/assets/stylesheets/twbs/bootstrap/carousel.less +220 -0
  108. data/vendor/assets/stylesheets/twbs/bootstrap/close.less +33 -0
  109. data/vendor/assets/stylesheets/twbs/bootstrap/code.less +53 -0
  110. data/vendor/assets/stylesheets/twbs/bootstrap/component-animations.less +29 -0
  111. data/vendor/assets/stylesheets/twbs/bootstrap/dropdowns.less +192 -0
  112. data/vendor/assets/stylesheets/twbs/bootstrap/forms.less +366 -0
  113. data/vendor/assets/stylesheets/twbs/bootstrap/glyphicons.less +236 -0
  114. data/vendor/assets/stylesheets/twbs/bootstrap/grid.less +93 -0
  115. data/vendor/assets/stylesheets/twbs/bootstrap/input-groups.less +136 -0
  116. data/vendor/assets/stylesheets/twbs/bootstrap/jumbotron.less +40 -0
  117. data/vendor/assets/stylesheets/twbs/bootstrap/labels.less +58 -0
  118. data/vendor/assets/stylesheets/twbs/bootstrap/list-group.less +88 -0
  119. data/vendor/assets/stylesheets/twbs/bootstrap/media.less +56 -0
  120. data/vendor/assets/stylesheets/twbs/bootstrap/mixins.less +846 -0
  121. data/vendor/assets/stylesheets/twbs/bootstrap/modals.less +131 -0
  122. data/vendor/assets/stylesheets/twbs/bootstrap/navbar.less +621 -0
  123. data/vendor/assets/stylesheets/twbs/bootstrap/navs.less +257 -0
  124. data/vendor/assets/stylesheets/twbs/bootstrap/normalize.less +406 -0
  125. data/vendor/assets/stylesheets/twbs/bootstrap/pager.less +55 -0
  126. data/vendor/assets/stylesheets/twbs/bootstrap/pagination.less +85 -0
  127. data/vendor/assets/stylesheets/twbs/bootstrap/panels.less +168 -0
  128. data/vendor/assets/stylesheets/twbs/bootstrap/popovers.less +133 -0
  129. data/vendor/assets/stylesheets/twbs/bootstrap/print.less +100 -0
  130. data/vendor/assets/stylesheets/twbs/bootstrap/progress-bars.less +96 -0
  131. data/vendor/assets/stylesheets/twbs/bootstrap/responsive-utilities.less +209 -0
  132. data/vendor/assets/stylesheets/twbs/bootstrap/scaffolding.less +119 -0
  133. data/vendor/assets/stylesheets/twbs/bootstrap/tables.less +236 -0
  134. data/vendor/assets/stylesheets/twbs/bootstrap/theme.less +246 -0
  135. data/vendor/assets/stylesheets/twbs/bootstrap/thumbnails.less +33 -0
  136. data/vendor/assets/stylesheets/twbs/bootstrap/tooltip.less +95 -0
  137. data/vendor/assets/stylesheets/twbs/bootstrap/type.less +273 -0
  138. data/vendor/assets/stylesheets/twbs/bootstrap/utilities.less +56 -0
  139. data/vendor/assets/stylesheets/twbs/bootstrap/variables.less +637 -0
  140. data/vendor/assets/stylesheets/twbs/bootstrap/wells.less +29 -0
  141. data/vendor/assets/stylesheets/twbs/bootstrap.less +1 -0
  142. metadata +387 -0
@@ -0,0 +1,67 @@
1
+ //
2
+ // Alerts
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base styles
7
+ // -------------------------
8
+
9
+ .alert {
10
+ padding: @alert-padding;
11
+ margin-bottom: @line-height-computed;
12
+ border: 1px solid transparent;
13
+ border-radius: @alert-border-radius;
14
+
15
+ // Headings for larger alerts
16
+ h4 {
17
+ margin-top: 0;
18
+ // Specified for the h4 to prevent conflicts of changing @headings-color
19
+ color: inherit;
20
+ }
21
+ // Provide class for links that match alerts
22
+ .alert-link {
23
+ font-weight: @alert-link-font-weight;
24
+ }
25
+
26
+ // Improve alignment and spacing of inner content
27
+ > p,
28
+ > ul {
29
+ margin-bottom: 0;
30
+ }
31
+ > p + p {
32
+ margin-top: 5px;
33
+ }
34
+ }
35
+
36
+ // Dismissable alerts
37
+ //
38
+ // Expand the right padding and account for the close button's positioning.
39
+
40
+ .alert-dismissable {
41
+ padding-right: (@alert-padding + 20);
42
+
43
+ // Adjust close link position
44
+ .close {
45
+ position: relative;
46
+ top: -2px;
47
+ right: -21px;
48
+ color: inherit;
49
+ }
50
+ }
51
+
52
+ // Alternate styles
53
+ //
54
+ // Generate contextual modifier classes for colorizing the alert.
55
+
56
+ .alert-success {
57
+ .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
58
+ }
59
+ .alert-info {
60
+ .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
61
+ }
62
+ .alert-warning {
63
+ .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
64
+ }
65
+ .alert-danger {
66
+ .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
67
+ }
@@ -0,0 +1,51 @@
1
+ //
2
+ // Badges
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base classes
7
+ .badge {
8
+ display: inline-block;
9
+ min-width: 10px;
10
+ padding: 3px 7px;
11
+ font-size: @font-size-small;
12
+ font-weight: @badge-font-weight;
13
+ color: @badge-color;
14
+ line-height: @badge-line-height;
15
+ vertical-align: baseline;
16
+ white-space: nowrap;
17
+ text-align: center;
18
+ background-color: @badge-bg;
19
+ border-radius: @badge-border-radius;
20
+
21
+ // Empty badges collapse automatically (not available in IE8)
22
+ &:empty {
23
+ display: none;
24
+ }
25
+ }
26
+
27
+ // Hover state, but only for links
28
+ a.badge {
29
+ &:hover,
30
+ &:focus {
31
+ color: @badge-link-hover-color;
32
+ text-decoration: none;
33
+ cursor: pointer;
34
+ }
35
+ }
36
+
37
+ // Quick fix for labels/badges in buttons
38
+ .btn .badge {
39
+ position: relative;
40
+ top: -1px;
41
+ }
42
+
43
+ // Account for counters in navs
44
+ a.list-group-item.active > .badge,
45
+ .nav-pills > .active > a > .badge {
46
+ color: @badge-active-color;
47
+ background-color: @badge-active-bg;
48
+ }
49
+ .nav-pills > li > a > .badge {
50
+ margin-left: 3px;
51
+ }
@@ -0,0 +1,48 @@
1
+ // Core variables and mixins
2
+ @import "variables.less";
3
+ @import "mixins.less";
4
+
5
+ // Reset
6
+ @import "normalize.less";
7
+ @import "print.less";
8
+
9
+ // Core CSS
10
+ @import "scaffolding.less";
11
+ @import "type.less";
12
+ @import "code.less";
13
+ @import "grid.less";
14
+ @import "tables.less";
15
+ @import "forms.less";
16
+ @import "buttons.less";
17
+
18
+ // Components
19
+ @import "component-animations.less";
20
+ @import "dropdowns.less";
21
+ @import "button-groups.less";
22
+ @import "input-groups.less";
23
+ @import "navs.less";
24
+ @import "navbar.less";
25
+ @import "breadcrumbs.less";
26
+ @import "pagination.less";
27
+ @import "pager.less";
28
+ @import "labels.less";
29
+ @import "badges.less";
30
+ @import "jumbotron.less";
31
+ @import "thumbnails.less";
32
+ @import "alerts.less";
33
+ @import "progress-bars.less";
34
+ @import "media.less";
35
+ @import "list-group.less";
36
+ @import "panels.less";
37
+ @import "wells.less";
38
+ @import "close.less";
39
+
40
+ // Components w/ JavaScript
41
+ @import "modals.less";
42
+ @import "tooltip.less";
43
+ @import "popovers.less";
44
+ @import "carousel.less";
45
+
46
+ // Utility classes
47
+ @import "utilities.less";
48
+ @import "responsive-utilities.less";
@@ -0,0 +1,23 @@
1
+ //
2
+ // Breadcrumbs
3
+ // --------------------------------------------------
4
+
5
+
6
+ .breadcrumb {
7
+ padding: 8px 15px;
8
+ margin-bottom: @line-height-computed;
9
+ list-style: none;
10
+ background-color: @breadcrumb-bg;
11
+ border-radius: @border-radius-base;
12
+ > li {
13
+ display: inline-block;
14
+ + li:before {
15
+ content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
16
+ padding: 0 5px;
17
+ color: @breadcrumb-color;
18
+ }
19
+ }
20
+ > .active {
21
+ color: @breadcrumb-active-color;
22
+ }
23
+ }
@@ -0,0 +1,248 @@
1
+ //
2
+ // Button groups
3
+ // --------------------------------------------------
4
+
5
+ // Button carets
6
+ //
7
+ // Match the button text color to the arrow/caret for indicating dropdown-ness.
8
+
9
+ .caret {
10
+ .btn-default & {
11
+ border-top-color: @btn-default-color;
12
+ }
13
+ .btn-primary &,
14
+ .btn-success &,
15
+ .btn-warning &,
16
+ .btn-danger &,
17
+ .btn-info & {
18
+ border-top-color: #fff;
19
+ }
20
+ }
21
+ .dropup {
22
+ & .btn-default .caret {
23
+ border-bottom-color: @btn-default-color;
24
+ }
25
+ .btn-primary,
26
+ .btn-success,
27
+ .btn-warning,
28
+ .btn-danger,
29
+ .btn-info {
30
+ .caret {
31
+ border-bottom-color: #fff;
32
+ }
33
+ }
34
+ }
35
+
36
+ // Make the div behave like a button
37
+ .btn-group,
38
+ .btn-group-vertical {
39
+ position: relative;
40
+ display: inline-block;
41
+ vertical-align: middle; // match .btn alignment given font-size hack above
42
+ > .btn {
43
+ position: relative;
44
+ float: left;
45
+ // Bring the "active" button to the front
46
+ &:hover,
47
+ &:focus,
48
+ &:active,
49
+ &.active {
50
+ z-index: 2;
51
+ }
52
+ &:focus {
53
+ // Remove focus outline when dropdown JS adds it after closing the menu
54
+ outline: none;
55
+ }
56
+ }
57
+ }
58
+
59
+ // Prevent double borders when buttons are next to each other
60
+ .btn-group {
61
+ .btn + .btn,
62
+ .btn + .btn-group,
63
+ .btn-group + .btn,
64
+ .btn-group + .btn-group {
65
+ margin-left: -1px;
66
+ }
67
+ }
68
+
69
+ // Optional: Group multiple button groups together for a toolbar
70
+ .btn-toolbar {
71
+ .clearfix();
72
+
73
+ .btn-group {
74
+ float: left;
75
+ }
76
+ // Space out series of button groups
77
+ > .btn,
78
+ > .btn-group {
79
+ + .btn,
80
+ + .btn-group {
81
+ margin-left: 5px;
82
+ }
83
+ }
84
+ }
85
+
86
+ .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
87
+ border-radius: 0;
88
+ }
89
+
90
+ // 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
91
+ .btn-group > .btn:first-child {
92
+ margin-left: 0;
93
+ &:not(:last-child):not(.dropdown-toggle) {
94
+ .border-right-radius(0);
95
+ }
96
+ }
97
+ // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
98
+ .btn-group > .btn:last-child:not(:first-child),
99
+ .btn-group > .dropdown-toggle:not(:first-child) {
100
+ .border-left-radius(0);
101
+ }
102
+
103
+ // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
104
+ .btn-group > .btn-group {
105
+ float: left;
106
+ }
107
+ .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
108
+ border-radius: 0;
109
+ }
110
+ .btn-group > .btn-group:first-child {
111
+ > .btn:last-child,
112
+ > .dropdown-toggle {
113
+ .border-right-radius(0);
114
+ }
115
+ }
116
+ .btn-group > .btn-group:last-child > .btn:first-child {
117
+ .border-left-radius(0);
118
+ }
119
+
120
+ // On active and open, don't show outline
121
+ .btn-group .dropdown-toggle:active,
122
+ .btn-group.open .dropdown-toggle {
123
+ outline: 0;
124
+ }
125
+
126
+
127
+ // Sizing
128
+ //
129
+ // Remix the default button sizing classes into new ones for easier manipulation.
130
+
131
+ .btn-group-xs > .btn { .btn-xs(); }
132
+ .btn-group-sm > .btn { .btn-sm(); }
133
+ .btn-group-lg > .btn { .btn-lg(); }
134
+
135
+
136
+ // Split button dropdowns
137
+ // ----------------------
138
+
139
+ // Give the line between buttons some depth
140
+ .btn-group > .btn + .dropdown-toggle {
141
+ padding-left: 8px;
142
+ padding-right: 8px;
143
+ }
144
+ .btn-group > .btn-lg + .dropdown-toggle {
145
+ padding-left: 12px;
146
+ padding-right: 12px;
147
+ }
148
+
149
+ // The clickable button for toggling the menu
150
+ // Remove the gradient and set the same inset shadow as the :active state
151
+ .btn-group.open .dropdown-toggle {
152
+ .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
153
+ }
154
+
155
+
156
+ // Reposition the caret
157
+ .btn .caret {
158
+ margin-left: 0;
159
+ }
160
+ // Carets in other button sizes
161
+ .btn-lg .caret {
162
+ border-width: @caret-width-large @caret-width-large 0;
163
+ border-bottom-width: 0;
164
+ }
165
+ // Upside down carets for .dropup
166
+ .dropup .btn-lg .caret {
167
+ border-width: 0 @caret-width-large @caret-width-large;
168
+ }
169
+
170
+
171
+ // Vertical button groups
172
+ // ----------------------
173
+
174
+ .btn-group-vertical {
175
+ > .btn,
176
+ > .btn-group {
177
+ display: block;
178
+ float: none;
179
+ width: 100%;
180
+ max-width: 100%;
181
+ }
182
+
183
+ // Clear floats so dropdown menus can be properly placed
184
+ > .btn-group {
185
+ .clearfix();
186
+ > .btn {
187
+ float: none;
188
+ }
189
+ }
190
+
191
+ > .btn + .btn,
192
+ > .btn + .btn-group,
193
+ > .btn-group + .btn,
194
+ > .btn-group + .btn-group {
195
+ margin-top: -1px;
196
+ margin-left: 0;
197
+ }
198
+ }
199
+
200
+ .btn-group-vertical > .btn {
201
+ &:not(:first-child):not(:last-child) {
202
+ border-radius: 0;
203
+ }
204
+ &:first-child:not(:last-child) {
205
+ border-top-right-radius: @border-radius-base;
206
+ .border-bottom-radius(0);
207
+ }
208
+ &:last-child:not(:first-child) {
209
+ border-bottom-left-radius: @border-radius-base;
210
+ .border-top-radius(0);
211
+ }
212
+ }
213
+ .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
214
+ border-radius: 0;
215
+ }
216
+ .btn-group-vertical > .btn-group:first-child {
217
+ > .btn:last-child,
218
+ > .dropdown-toggle {
219
+ .border-bottom-radius(0);
220
+ }
221
+ }
222
+ .btn-group-vertical > .btn-group:last-child > .btn:first-child {
223
+ .border-top-radius(0);
224
+ }
225
+
226
+
227
+
228
+ // Justified button groups
229
+ // ----------------------
230
+
231
+ .btn-group-justified {
232
+ display: table;
233
+ width: 100%;
234
+ table-layout: fixed;
235
+ border-collapse: separate;
236
+ .btn {
237
+ float: none;
238
+ display: table-cell;
239
+ width: 1%;
240
+ }
241
+ }
242
+
243
+
244
+ // Checkbox and radio options
245
+ [data-toggle="buttons"] > .btn > input[type="radio"],
246
+ [data-toggle="buttons"] > .btn > input[type="checkbox"] {
247
+ display: none;
248
+ }
@@ -0,0 +1,158 @@
1
+ //
2
+ // Buttons
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base styles
7
+ // --------------------------------------------------
8
+
9
+ // Core styles
10
+ .btn {
11
+ display: inline-block;
12
+ margin-bottom: 0; // For input.btn
13
+ font-weight: @btn-font-weight;
14
+ text-align: center;
15
+ vertical-align: middle;
16
+ cursor: pointer;
17
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
18
+ border: 1px solid transparent;
19
+ white-space: nowrap;
20
+ .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
21
+ .user-select(none);
22
+
23
+ &:focus {
24
+ .tab-focus();
25
+ }
26
+
27
+ &:hover,
28
+ &:focus {
29
+ color: @btn-default-color;
30
+ text-decoration: none;
31
+ }
32
+
33
+ &:active,
34
+ &.active {
35
+ outline: 0;
36
+ background-image: none;
37
+ .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
38
+ }
39
+
40
+ &.disabled,
41
+ &[disabled],
42
+ fieldset[disabled] & {
43
+ cursor: not-allowed;
44
+ pointer-events: none; // Future-proof disabling of clicks
45
+ .opacity(.65);
46
+ .box-shadow(none);
47
+ }
48
+
49
+ }
50
+
51
+
52
+ // Alternate buttons
53
+ // --------------------------------------------------
54
+
55
+ .btn-default {
56
+ .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
57
+ }
58
+ .btn-primary {
59
+ .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
60
+ }
61
+ // Warning appears as orange
62
+ .btn-warning {
63
+ .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
64
+ }
65
+ // Danger and error appear as red
66
+ .btn-danger {
67
+ .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
68
+ }
69
+ // Success appears as green
70
+ .btn-success {
71
+ .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
72
+ }
73
+ // Info appears as blue-green
74
+ .btn-info {
75
+ .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
76
+ }
77
+
78
+
79
+ // Link buttons
80
+ // -------------------------
81
+
82
+ // Make a button look and behave like a link
83
+ .btn-link {
84
+ color: @link-color;
85
+ font-weight: normal;
86
+ cursor: pointer;
87
+ border-radius: 0;
88
+
89
+ &,
90
+ &:active,
91
+ &[disabled],
92
+ fieldset[disabled] & {
93
+ background-color: transparent;
94
+ .box-shadow(none);
95
+ }
96
+ &,
97
+ &:hover,
98
+ &:focus,
99
+ &:active {
100
+ border-color: transparent;
101
+ }
102
+ &:hover,
103
+ &:focus {
104
+ color: @link-hover-color;
105
+ text-decoration: underline;
106
+ background-color: transparent;
107
+ }
108
+ &[disabled],
109
+ fieldset[disabled] & {
110
+ &:hover,
111
+ &:focus {
112
+ color: @btn-link-disabled-color;
113
+ text-decoration: none;
114
+ }
115
+ }
116
+ }
117
+
118
+
119
+ // Button Sizes
120
+ // --------------------------------------------------
121
+
122
+ .btn-lg {
123
+ // line-height: ensure even-numbered height of button next to large input
124
+ .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
125
+ }
126
+ .btn-sm,
127
+ .btn-xs {
128
+ // line-height: ensure proper height of button next to small input
129
+ .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
130
+ }
131
+ .btn-xs {
132
+ padding: 1px 5px;
133
+ }
134
+
135
+
136
+ // Block button
137
+ // --------------------------------------------------
138
+
139
+ .btn-block {
140
+ display: block;
141
+ width: 100%;
142
+ padding-left: 0;
143
+ padding-right: 0;
144
+ }
145
+
146
+ // Vertically space out multiple block buttons
147
+ .btn-block + .btn-block {
148
+ margin-top: 5px;
149
+ }
150
+
151
+ // Specificity overrides
152
+ input[type="submit"],
153
+ input[type="reset"],
154
+ input[type="button"] {
155
+ &.btn-block {
156
+ width: 100%;
157
+ }
158
+ }