twitter-bootstrap3-rails 3.2.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (132) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +708 -0
  3. data/Rakefile +46 -0
  4. data/app/assets/fonts/fontawesome-webfont.eot +0 -0
  5. data/app/assets/fonts/fontawesome-webfont.svg +399 -0
  6. data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
  7. data/app/assets/fonts/fontawesome-webfont.woff +0 -0
  8. data/app/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  9. data/app/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  10. data/app/assets/javascripts/twitter/bootstrap.js +12 -0
  11. data/app/assets/javascripts/twitter/bootstrap/affix.js +126 -0
  12. data/app/assets/javascripts/twitter/bootstrap/alert.js +98 -0
  13. data/app/assets/javascripts/twitter/bootstrap/button.js +109 -0
  14. data/app/assets/javascripts/twitter/bootstrap/carousel.js +217 -0
  15. data/app/assets/javascripts/twitter/bootstrap/collapse.js +179 -0
  16. data/app/assets/javascripts/twitter/bootstrap/dropdown.js +154 -0
  17. data/app/assets/javascripts/twitter/bootstrap/modal.js +244 -0
  18. data/app/assets/javascripts/twitter/bootstrap/popover.js +117 -0
  19. data/app/assets/javascripts/twitter/bootstrap/scrollspy.js +158 -0
  20. data/app/assets/javascripts/twitter/bootstrap/tab.js +135 -0
  21. data/app/assets/javascripts/twitter/bootstrap/tooltip.js +382 -0
  22. data/app/assets/javascripts/twitter/bootstrap/transition.js +56 -0
  23. data/app/assets/javascripts/twitter/bootstrap_ujs.js +11 -0
  24. data/app/assets/stylesheets/twitter-bootstrap-static/bootstrap.css.erb +5579 -0
  25. data/app/assets/stylesheets/twitter-bootstrap-static/fontawesome.css.erb +787 -0
  26. data/app/assets/stylesheets/twitter-bootstrap-static/sprites.css.erb +146 -0
  27. data/app/helpers/badge_label_helper.rb +16 -0
  28. data/app/helpers/bootstrap_flash_helper.rb +29 -0
  29. data/app/helpers/flash_block_helper.rb +17 -0
  30. data/app/helpers/glyph_helper.rb +17 -0
  31. data/app/helpers/modal_helper.rb +59 -0
  32. data/app/helpers/navbar_helper.rb +195 -0
  33. data/app/helpers/twitter_breadcrumbs_helper.rb +10 -0
  34. data/app/views/twitter-bootstrap/_breadcrumbs.html.erb +12 -0
  35. data/lib/generators/bootstrap/install/install_generator.rb +82 -0
  36. data/lib/generators/bootstrap/install/templates/application.css +7 -0
  37. data/lib/generators/bootstrap/install/templates/application.js +10 -0
  38. data/lib/generators/bootstrap/install/templates/bootstrap.coffee +3 -0
  39. data/lib/generators/bootstrap/install/templates/bootstrap.js +4 -0
  40. data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.css +7 -0
  41. data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.less +29 -0
  42. data/lib/generators/bootstrap/install/templates/en.bootstrap.yml +18 -0
  43. data/lib/generators/bootstrap/layout/layout_generator.rb +20 -0
  44. data/lib/generators/bootstrap/layout/templates/layout.html.erb +85 -0
  45. data/lib/generators/bootstrap/layout/templates/layout.html.haml +50 -0
  46. data/lib/generators/bootstrap/layout/templates/layout.html.slim +52 -0
  47. data/lib/generators/bootstrap/partial/partial_generator.rb +20 -0
  48. data/lib/generators/bootstrap/partial/templates/_login.html.erb +28 -0
  49. data/lib/generators/bootstrap/themed/templates/_form.html.erb +16 -0
  50. data/lib/generators/bootstrap/themed/templates/_form.html.haml +9 -0
  51. data/lib/generators/bootstrap/themed/templates/_form.html.slim +10 -0
  52. data/lib/generators/bootstrap/themed/templates/edit.html.erb +5 -0
  53. data/lib/generators/bootstrap/themed/templates/edit.html.haml +4 -0
  54. data/lib/generators/bootstrap/themed/templates/edit.html.slim +4 -0
  55. data/lib/generators/bootstrap/themed/templates/index.html.erb +40 -0
  56. data/lib/generators/bootstrap/themed/templates/index.html.haml +25 -0
  57. data/lib/generators/bootstrap/themed/templates/index.html.slim +27 -0
  58. data/lib/generators/bootstrap/themed/templates/new.html.erb +5 -0
  59. data/lib/generators/bootstrap/themed/templates/new.html.haml +4 -0
  60. data/lib/generators/bootstrap/themed/templates/new.html.slim +4 -0
  61. data/lib/generators/bootstrap/themed/templates/show.html.erb +21 -0
  62. data/lib/generators/bootstrap/themed/templates/show.html.haml +15 -0
  63. data/lib/generators/bootstrap/themed/templates/show.html.slim +16 -0
  64. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.erb +13 -0
  65. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.haml +10 -0
  66. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.slim +11 -0
  67. data/lib/generators/bootstrap/themed/themed_generator.rb +148 -0
  68. data/lib/twitter-bootstrap-rails.rb +10 -0
  69. data/lib/twitter/bootstrap/rails/bootstrap.rb +2 -0
  70. data/lib/twitter/bootstrap/rails/engine.rb +33 -0
  71. data/lib/twitter/bootstrap/rails/twitter-bootstrap-breadcrumbs.rb +42 -0
  72. data/lib/twitter/bootstrap/rails/version.rb +7 -0
  73. data/spec/lib/twitter_bootstrap_rails/badge_label_helper_spec.rb +22 -0
  74. data/spec/lib/twitter_bootstrap_rails/modal_helper_spec.rb +62 -0
  75. data/spec/lib/twitter_bootstrap_rails/navbar_helper_spec.rb +331 -0
  76. data/spec/lib/twitter_bootstrap_rails/uri_state_spec.rb +47 -0
  77. data/spec/spec_helper.rb +11 -0
  78. data/test/lib/breadcrumbs_test.rb +75 -0
  79. data/test/test_helper.rb +11 -0
  80. data/vendor/assets/stylesheets/twitter-bootstrap-static/bootstrap.css.erb +5579 -0
  81. data/vendor/static-source/bootstrap.less +1 -0
  82. data/vendor/static-source/fontawesome.less +9 -0
  83. data/vendor/static-source/sprites.less +6 -0
  84. data/vendor/toolkit/fontawesome/bootstrap.less +84 -0
  85. data/vendor/toolkit/fontawesome/core.less +129 -0
  86. data/vendor/toolkit/fontawesome/extras.less +93 -0
  87. data/vendor/toolkit/fontawesome/font-awesome-ie7.less +1953 -0
  88. data/vendor/toolkit/fontawesome/font-awesome.less +33 -0
  89. data/vendor/toolkit/fontawesome/icons.less +381 -0
  90. data/vendor/toolkit/fontawesome/mixins.less +48 -0
  91. data/vendor/toolkit/fontawesome/path.less +14 -0
  92. data/vendor/toolkit/fontawesome/variables.less +735 -0
  93. data/vendor/toolkit/twitter/bootstrap/alerts.less +71 -0
  94. data/vendor/toolkit/twitter/bootstrap/badges.less +51 -0
  95. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +63 -0
  96. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +23 -0
  97. data/vendor/toolkit/twitter/bootstrap/button-groups.less +244 -0
  98. data/vendor/toolkit/twitter/bootstrap/buttons.less +159 -0
  99. data/vendor/toolkit/twitter/bootstrap/carousel.less +204 -0
  100. data/vendor/toolkit/twitter/bootstrap/close.less +33 -0
  101. data/vendor/toolkit/twitter/bootstrap/code.less +56 -0
  102. data/vendor/toolkit/twitter/bootstrap/component-animations.less +29 -0
  103. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +176 -0
  104. data/vendor/toolkit/twitter/bootstrap/forms.less +332 -0
  105. data/vendor/toolkit/twitter/bootstrap/grid.less +340 -0
  106. data/vendor/toolkit/twitter/bootstrap/input-groups.less +127 -0
  107. data/vendor/toolkit/twitter/bootstrap/jumbotron.less +29 -0
  108. data/vendor/toolkit/twitter/bootstrap/labels.less +54 -0
  109. data/vendor/toolkit/twitter/bootstrap/list-group.less +88 -0
  110. data/vendor/toolkit/twitter/bootstrap/media.less +56 -0
  111. data/vendor/toolkit/twitter/bootstrap/mixins.less +693 -0
  112. data/vendor/toolkit/twitter/bootstrap/modals.less +133 -0
  113. data/vendor/toolkit/twitter/bootstrap/navbar.less +559 -0
  114. data/vendor/toolkit/twitter/bootstrap/navs.less +228 -0
  115. data/vendor/toolkit/twitter/bootstrap/normalize.less +396 -0
  116. data/vendor/toolkit/twitter/bootstrap/pager.less +55 -0
  117. data/vendor/toolkit/twitter/bootstrap/pagination.less +72 -0
  118. data/vendor/toolkit/twitter/bootstrap/panels.less +128 -0
  119. data/vendor/toolkit/twitter/bootstrap/popovers.less +133 -0
  120. data/vendor/toolkit/twitter/bootstrap/print.less +100 -0
  121. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +99 -0
  122. data/vendor/toolkit/twitter/bootstrap/responsive-utilities.less +149 -0
  123. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +111 -0
  124. data/vendor/toolkit/twitter/bootstrap/tables.less +211 -0
  125. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +42 -0
  126. data/vendor/toolkit/twitter/bootstrap/tooltip.less +95 -0
  127. data/vendor/toolkit/twitter/bootstrap/type.less +238 -0
  128. data/vendor/toolkit/twitter/bootstrap/utilities.less +42 -0
  129. data/vendor/toolkit/twitter/bootstrap/variables.less +607 -0
  130. data/vendor/toolkit/twitter/bootstrap/wells.less +29 -0
  131. data/vendor/toolkit/twitter/bootstrap_base.less +2 -0
  132. metadata +297 -0
@@ -0,0 +1,29 @@
1
+ //
2
+ // Jumbotron
3
+ // --------------------------------------------------
4
+
5
+
6
+ .jumbotron {
7
+ padding: 30px;
8
+ margin-bottom: 30px;
9
+ font-size: (@font-size-base * 1.5);
10
+ font-weight: 200;
11
+ line-height: (@line-height-base * 1.5);
12
+ color: @jumbotron-lead-color;
13
+ background-color: @jumbotron-bg;
14
+ h1 {
15
+ line-height: 1;
16
+ color: @jumbotron-heading-color;
17
+ }
18
+ p {
19
+ line-height: 1.4;
20
+ }
21
+
22
+ @media screen and (min-width: @screen-tablet) {
23
+ padding: 50px 60px;
24
+ border-radius: @border-radius-large; // Only round corners at higher resolutions
25
+ h1 {
26
+ font-size: (@font-size-base * 4.5);
27
+ }
28
+ }
29
+ }
@@ -0,0 +1,54 @@
1
+ //
2
+ // Labels
3
+ // --------------------------------------------------
4
+
5
+ .label {
6
+ display: inline;
7
+ padding: .25em .6em;
8
+ font-size: 75%;
9
+ font-weight: bold;
10
+ line-height: 1;
11
+ color: @label-color;
12
+ text-align: center;
13
+ white-space: nowrap;
14
+ vertical-align: baseline;
15
+ border-radius: .25em;
16
+
17
+ // Add hover effects, but only for links
18
+ &[href] {
19
+ &:hover,
20
+ &:focus {
21
+ color: @label-link-hover-color;
22
+ text-decoration: none;
23
+ cursor: pointer;
24
+ }
25
+ }
26
+
27
+ // Empty labels collapse automatically (not available in IE8)
28
+ &:empty {
29
+ display: none;
30
+ }
31
+ }
32
+
33
+ // Colors
34
+ // Contextual variations (linked labels get darker on :hover)
35
+
36
+ .label-default {
37
+ .label-variant(@label-default-bg);
38
+ }
39
+
40
+ .label-danger {
41
+ .label-variant(@label-danger-bg);
42
+ }
43
+
44
+ .label-success {
45
+ .label-variant(@label-success-bg);
46
+ }
47
+
48
+ .label-warning {
49
+ .label-variant(@label-warning-bg);
50
+ }
51
+
52
+ .label-info {
53
+ .label-variant(@label-info-bg);
54
+ }
@@ -0,0 +1,88 @@
1
+ //
2
+ // List groups
3
+ // --------------------------------------------------
4
+
5
+ // Base class
6
+ //
7
+ // Easily usable on <ul>, <ol>, or <div>.
8
+ .list-group {
9
+ // No need to set list-style: none; since .list-group-item is block level
10
+ margin-bottom: 20px;
11
+ padding-left: 0; // reset padding because ul and ol
12
+ }
13
+
14
+ // Individual list items
15
+ // -------------------------
16
+
17
+ .list-group-item {
18
+ position: relative;
19
+ display: block;
20
+ padding: 10px 15px;
21
+ // Place the border on the list items and negative margin up for better styling
22
+ margin-bottom: -1px;
23
+ background-color: @list-group-bg;
24
+ border: 1px solid @list-group-border;
25
+
26
+ // Round the first and last items
27
+ &:first-child {
28
+ .border-top-radius(@list-group-border-radius);
29
+ }
30
+ &:last-child {
31
+ margin-bottom: 0;
32
+ .border-bottom-radius(@list-group-border-radius);
33
+ }
34
+
35
+ // Align badges within list items
36
+ > .badge {
37
+ float: right;
38
+ }
39
+ > .badge + .badge {
40
+ margin-right: 5px;
41
+ }
42
+
43
+ // Linked list items
44
+ a& {
45
+ color: @list-group-link-color;
46
+
47
+ .list-group-item-heading {
48
+ color: @list-group-link-heading-color;
49
+ }
50
+
51
+ // Hover state
52
+ &:hover,
53
+ &:focus {
54
+ text-decoration: none;
55
+ background-color: @list-group-hover-bg;
56
+ }
57
+ }
58
+
59
+ // Active class on item itself, not parent
60
+ &.active,
61
+ &.active:hover,
62
+ &.active:focus {
63
+ z-index: 2; // Place active items above their siblings for proper border styling
64
+ color: @list-group-active-color;
65
+ background-color: @list-group-active-bg;
66
+ border-color: @list-group-active-border;
67
+
68
+ // Force color to inherit for custom content
69
+ .list-group-item-heading {
70
+ color: inherit;
71
+ }
72
+ .list-group-item-text {
73
+ color: lighten(@list-group-active-bg, 40%);
74
+ }
75
+ }
76
+ }
77
+
78
+ // Custom content options
79
+ // -------------------------
80
+
81
+ .list-group-item-heading {
82
+ margin-top: 0;
83
+ margin-bottom: 5px;
84
+ }
85
+ .list-group-item-text {
86
+ margin-bottom: 0;
87
+ line-height: 1.3;
88
+ }
@@ -0,0 +1,56 @@
1
+ // Media objects
2
+ // Source: http://stubbornella.org/content/?p=497
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Common styles
7
+ // -------------------------
8
+
9
+ // Clear the floats
10
+ .media,
11
+ .media-body {
12
+ overflow: hidden;
13
+ zoom: 1;
14
+ }
15
+
16
+ // Proper spacing between instances of .media
17
+ .media,
18
+ .media .media {
19
+ margin-top: 15px;
20
+ }
21
+ .media:first-child {
22
+ margin-top: 0;
23
+ }
24
+
25
+ // For images and videos, set to block
26
+ .media-object {
27
+ display: block;
28
+ }
29
+
30
+ // Reset margins on headings for tighter default spacing
31
+ .media-heading {
32
+ margin: 0 0 5px;
33
+ }
34
+
35
+
36
+ // Media image alignment
37
+ // -------------------------
38
+
39
+ .media {
40
+ > .pull-left {
41
+ margin-right: 10px;
42
+ }
43
+ > .pull-right {
44
+ margin-left: 10px;
45
+ }
46
+ }
47
+
48
+
49
+ // Media list variation
50
+ // -------------------------
51
+
52
+ // Undo default ul/ol styles
53
+ .media-list {
54
+ padding-left: 0;
55
+ list-style: none;
56
+ }
@@ -0,0 +1,693 @@
1
+ //
2
+ // Mixins
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Utilities
7
+ // -------------------------
8
+
9
+ // Clearfix
10
+ // Source: http://nicolasgallagher.com/micro-clearfix-hack/
11
+ //
12
+ // For modern browsers
13
+ // 1. The space content is one way to avoid an Opera bug when the
14
+ // contenteditable attribute is included anywhere else in the document.
15
+ // Otherwise it causes space to appear at the top and bottom of elements
16
+ // that are clearfixed.
17
+ // 2. The use of `table` rather than `block` is only necessary if using
18
+ // `:before` to contain the top-margins of child elements.
19
+ .clearfix() {
20
+ &:before,
21
+ &:after {
22
+ content: " "; /* 1 */
23
+ display: table; /* 2 */
24
+ }
25
+ &:after {
26
+ clear: both;
27
+ }
28
+ }
29
+
30
+ // Webkit-style focus
31
+ .tab-focus() {
32
+ // Default
33
+ outline: thin dotted #333;
34
+ // Webkit
35
+ outline: 5px auto -webkit-focus-ring-color;
36
+ outline-offset: -2px;
37
+ }
38
+
39
+ // Center-align a block level element
40
+ .center-block() {
41
+ display: block;
42
+ margin-left: auto;
43
+ margin-right: auto;
44
+ }
45
+
46
+ // Sizing shortcuts
47
+ .size(@width; @height) {
48
+ width: @width;
49
+ height: @height;
50
+ }
51
+ .square(@size) {
52
+ .size(@size; @size);
53
+ }
54
+
55
+ // Placeholder text
56
+ .placeholder(@color: @input-color-placeholder) {
57
+ &:-moz-placeholder { color: @color; } // Firefox 4-18
58
+ &::-moz-placeholder { color: @color; } // Firefox 19+
59
+ &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
60
+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
61
+ }
62
+
63
+ // Text overflow
64
+ // Requires inline-block or block for proper styling
65
+ .text-overflow() {
66
+ overflow: hidden;
67
+ text-overflow: ellipsis;
68
+ white-space: nowrap;
69
+ }
70
+
71
+ // CSS image replacement
72
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
73
+ .hide-text() {
74
+ font: ~"0/0" a;
75
+ color: transparent;
76
+ text-shadow: none;
77
+ background-color: transparent;
78
+ border: 0;
79
+ }
80
+
81
+
82
+
83
+ // CSS3 PROPERTIES
84
+ // --------------------------------------------------
85
+
86
+ // Single side border-radius
87
+ .border-top-radius(@radius) {
88
+ border-top-right-radius: @radius;
89
+ border-top-left-radius: @radius;
90
+ }
91
+ .border-right-radius(@radius) {
92
+ border-bottom-right-radius: @radius;
93
+ border-top-right-radius: @radius;
94
+ }
95
+ .border-bottom-radius(@radius) {
96
+ border-bottom-right-radius: @radius;
97
+ border-bottom-left-radius: @radius;
98
+ }
99
+ .border-left-radius(@radius) {
100
+ border-bottom-left-radius: @radius;
101
+ border-top-left-radius: @radius;
102
+ }
103
+
104
+ // Drop shadows
105
+ .box-shadow(@shadow) {
106
+ -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
107
+ box-shadow: @shadow;
108
+ }
109
+
110
+ // Transitions
111
+ .transition(@transition) {
112
+ -webkit-transition: @transition;
113
+ transition: @transition;
114
+ }
115
+ .transition-delay(@transition-delay) {
116
+ -webkit-transition-delay: @transition-delay;
117
+ transition-delay: @transition-delay;
118
+ }
119
+ .transition-duration(@transition-duration) {
120
+ -webkit-transition-duration: @transition-duration;
121
+ transition-duration: @transition-duration;
122
+ }
123
+ .transition-transform(@transition) {
124
+ -webkit-transition: -webkit-transform @transition;
125
+ -moz-transition: -moz-transform @transition;
126
+ -o-transition: -o-transform @transition;
127
+ transition: transform @transition;
128
+ }
129
+
130
+ // Transformations
131
+ .rotate(@degrees) {
132
+ -webkit-transform: rotate(@degrees);
133
+ -ms-transform: rotate(@degrees); // IE9+
134
+ transform: rotate(@degrees);
135
+ }
136
+ .scale(@ratio) {
137
+ -webkit-transform: scale(@ratio);
138
+ -ms-transform: scale(@ratio); // IE9+
139
+ transform: scale(@ratio);
140
+ }
141
+ .translate(@x; @y) {
142
+ -webkit-transform: translate(@x, @y);
143
+ -ms-transform: translate(@x, @y); // IE9+
144
+ transform: translate(@x, @y);
145
+ }
146
+ .skew(@x; @y) {
147
+ -webkit-transform: skew(@x, @y);
148
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
149
+ transform: skew(@x, @y);
150
+ }
151
+ .translate3d(@x; @y; @z) {
152
+ -webkit-transform: translate3d(@x, @y, @z);
153
+ transform: translate3d(@x, @y, @z);
154
+ }
155
+
156
+ // Backface visibility
157
+ // Prevent browsers from flickering when using CSS 3D transforms.
158
+ // Default value is `visible`, but can be changed to `hidden`
159
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
160
+ .backface-visibility(@visibility){
161
+ -webkit-backface-visibility: @visibility;
162
+ -moz-backface-visibility: @visibility;
163
+ backface-visibility: @visibility;
164
+ }
165
+
166
+ // Box sizing
167
+ .box-sizing(@boxmodel) {
168
+ -webkit-box-sizing: @boxmodel;
169
+ -moz-box-sizing: @boxmodel;
170
+ box-sizing: @boxmodel;
171
+ }
172
+
173
+ // User select
174
+ // For selecting text on the page
175
+ .user-select(@select) {
176
+ -webkit-user-select: @select;
177
+ -moz-user-select: @select;
178
+ -ms-user-select: @select; // IE10+
179
+ -o-user-select: @select;
180
+ user-select: @select;
181
+ }
182
+
183
+ // Resize anything
184
+ .resizable(@direction) {
185
+ resize: @direction; // Options: horizontal, vertical, both
186
+ overflow: auto; // Safari fix
187
+ }
188
+
189
+ // CSS3 Content Columns
190
+ .content-columns(@column-count; @column-gap: @grid-gutter-width) {
191
+ -webkit-column-count: @column-count;
192
+ -moz-column-count: @column-count;
193
+ column-count: @column-count;
194
+ -webkit-column-gap: @column-gap;
195
+ -moz-column-gap: @column-gap;
196
+ column-gap: @column-gap;
197
+ }
198
+
199
+ // Optional hyphenation
200
+ .hyphens(@mode: auto) {
201
+ word-wrap: break-word;
202
+ -webkit-hyphens: @mode;
203
+ -moz-hyphens: @mode;
204
+ -ms-hyphens: @mode; // IE10+
205
+ -o-hyphens: @mode;
206
+ hyphens: @mode;
207
+ }
208
+
209
+ // Opacity
210
+ .opacity(@opacity) {
211
+ opacity: @opacity;
212
+ // IE8 filter
213
+ @opacity-ie: (@opacity * 100);
214
+ filter: ~"alpha(opacity=@{opacity-ie})";
215
+ }
216
+
217
+
218
+
219
+ // GRADIENTS
220
+ // --------------------------------------------------
221
+
222
+ #gradient {
223
+
224
+ // Horizontal gradient, from left to right
225
+ //
226
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
227
+ // Color stops are not available in IE9 and below.
228
+ .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
229
+ background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
230
+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
231
+ background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
232
+ background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
233
+ background-repeat: repeat-x;
234
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
235
+ }
236
+
237
+ // Vertical gradient, from top to bottom
238
+ //
239
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
240
+ // Color stops are not available in IE9 and below.
241
+ .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
242
+ background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
243
+ background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
244
+ background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
245
+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
246
+ background-repeat: repeat-x;
247
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
248
+ }
249
+
250
+ .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
251
+ background-repeat: repeat-x;
252
+ background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
253
+ background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
254
+ background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
255
+ }
256
+ .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
257
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
258
+ background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
259
+ background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
260
+ background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
261
+ background-repeat: no-repeat;
262
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
263
+ }
264
+ .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
265
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
266
+ background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
267
+ background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
268
+ background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
269
+ background-repeat: no-repeat;
270
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
271
+ }
272
+ .radial(@inner-color: #555; @outer-color: #333) {
273
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
274
+ background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
275
+ background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
276
+ background-image: radial-gradient(circle, @inner-color, @outer-color);
277
+ background-repeat: no-repeat;
278
+ }
279
+ .striped(@color: #555; @angle: 45deg) {
280
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
281
+ background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
282
+ background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
283
+ background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
284
+ }
285
+ }
286
+
287
+ // Reset filters for IE
288
+ //
289
+ // When you need to remove a gradient background, don't forget to use this to reset
290
+ // the IE filter for IE9 and below.
291
+ .reset-filter() {
292
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
293
+ }
294
+
295
+
296
+
297
+ // RETINA IMAGE SUPPORT
298
+ // --------------------------------------------------
299
+
300
+ // Short retina mixin for setting background-image and -size
301
+ .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
302
+ background-image: url("@{file-1x}");
303
+
304
+ @media
305
+ only screen and (-webkit-min-device-pixel-ratio: 2),
306
+ only screen and ( min--moz-device-pixel-ratio: 2),
307
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
308
+ only screen and ( min-device-pixel-ratio: 2),
309
+ only screen and ( min-resolution: 192dpi),
310
+ only screen and ( min-resolution: 2dppx) {
311
+ background-image: url("@{file-2x}");
312
+ background-size: @width-1x @height-1x;
313
+ }
314
+ }
315
+
316
+
317
+ // COMPONENT MIXINS
318
+ // --------------------------------------------------
319
+
320
+ // Horizontal dividers
321
+ // -------------------------
322
+ // Dividers (basically an hr) within dropdowns and nav lists
323
+ .nav-divider(@color: #e5e5e5) {
324
+ height: 1px;
325
+ margin: ((@line-height-computed / 2) - 1) 0;
326
+ overflow: hidden;
327
+ background-color: @color;
328
+ }
329
+
330
+ // Panels
331
+ // -------------------------
332
+ .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
333
+ border-color: @border;
334
+ .panel-heading {
335
+ color: @heading-text-color;
336
+ background-color: @heading-bg-color;
337
+ border-color: @heading-border;
338
+ + .panel-collapse .panel-body {
339
+ border-top-color: @border;
340
+ }
341
+ }
342
+ .panel-footer {
343
+ + .panel-collapse .panel-body {
344
+ border-bottom-color: @border;
345
+ }
346
+ }
347
+ }
348
+
349
+ // Alerts
350
+ // -------------------------
351
+ .alert-variant(@background; @border; @text-color) {
352
+ background-color: @background;
353
+ border-color: @border;
354
+ color: @text-color;
355
+ hr {
356
+ border-top-color: darken(@border, 5%);
357
+ }
358
+ .alert-link {
359
+ color: darken(@text-color, 10%);
360
+ }
361
+ }
362
+
363
+ // Button variants
364
+ // -------------------------
365
+ // Easily pump out default styles, as well as :hover, :focus, :active,
366
+ // and disabled options for all buttons
367
+ .button-variant(@color; @background; @border) {
368
+ color: @color;
369
+ background-color: @background;
370
+ border-color: @border;
371
+
372
+ &:hover,
373
+ &:focus,
374
+ &:active,
375
+ &.active {
376
+ color: @color;
377
+ background-color: darken(@background, 8%);
378
+ border-color: darken(@border, 12%);
379
+ }
380
+
381
+ &.disabled,
382
+ &[disabled],
383
+ fieldset[disabled] & {
384
+ &,
385
+ &:hover,
386
+ &:focus,
387
+ &:active,
388
+ &.active {
389
+ background-color: @background;
390
+ border-color: @border
391
+ }
392
+ }
393
+ }
394
+
395
+ // Button sizes
396
+ // -------------------------
397
+ .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
398
+ padding: @padding-vertical @padding-horizontal;
399
+ font-size: @font-size;
400
+ line-height: @line-height;
401
+ border-radius: @border-radius;
402
+ }
403
+
404
+ // Pagination
405
+ // -------------------------
406
+ .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
407
+ > li {
408
+ > a,
409
+ > span {
410
+ padding: @padding-vertical @padding-horizontal;
411
+ font-size: @font-size;
412
+ }
413
+ &:first-child {
414
+ > a,
415
+ > span {
416
+ .border-left-radius(@border-radius);
417
+ }
418
+ }
419
+ &:last-child {
420
+ > a,
421
+ > span {
422
+ .border-right-radius(@border-radius);
423
+ }
424
+ }
425
+ }
426
+ }
427
+
428
+ // Labels
429
+ // -------------------------
430
+ .label-variant(@color) {
431
+ background-color: @color;
432
+ &[href] {
433
+ &:hover,
434
+ &:focus {
435
+ background-color: darken(@color, 10%);
436
+ }
437
+ }
438
+ }
439
+
440
+ // Navbar vertical align
441
+ // -------------------------
442
+ // Vertically center elements in the navbar.
443
+ // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
444
+ .navbar-vertical-align(@element-height) {
445
+ margin-top: ((@navbar-height - @element-height) / 2);
446
+ margin-bottom: ((@navbar-height - @element-height) / 2);
447
+ }
448
+
449
+ // Progress bars
450
+ // -------------------------
451
+ .progress-bar-variant(@color) {
452
+ background-color: @color;
453
+ .progress-striped & {
454
+ #gradient > .striped(@color);
455
+ }
456
+ }
457
+
458
+ // Responsive utilities
459
+ // -------------------------
460
+ // More easily include all the states for responsive-utilities.less.
461
+ .responsive-visibility() {
462
+ display: block !important;
463
+ tr& { display: table-row !important; }
464
+ th&,
465
+ td& { display: table-cell !important; }
466
+ }
467
+
468
+ .responsive-invisibility() {
469
+ display: none !important;
470
+ tr& { display: none !important; }
471
+ th&,
472
+ td& { display: none !important; }
473
+ }
474
+
475
+ // Grid System
476
+ // -----------
477
+
478
+ // Centered container element
479
+ .container-fixed() {
480
+ margin-right: auto;
481
+ margin-left: auto;
482
+ .clearfix();
483
+ }
484
+
485
+ // Creates a wrapper for a series of columns
486
+ .make-row(@gutter: @grid-gutter-width) {
487
+ // Then clear the floated columns
488
+ .clearfix();
489
+
490
+ .container & {
491
+ @media (min-width: @screen-small) {
492
+ margin-left: (@gutter / -2);
493
+ margin-right: (@gutter / -2);
494
+ }
495
+ }
496
+
497
+ // Negative margin nested rows out to align the content of columns
498
+ .row {
499
+ margin-left: (@gutter / -2);
500
+ margin-right: (@gutter / -2);
501
+ }
502
+ }
503
+
504
+ // Generate the extra small columns
505
+ .make-xs-column(@columns; @gutter: @grid-gutter-width) {
506
+ position: relative;
507
+ float: left;
508
+ // Prevent columns from collapsing when empty
509
+ min-height: 1px;
510
+ // Inner gutter via padding
511
+ padding-left: (@gutter / 2);
512
+ padding-right: (@gutter / 2);
513
+ @max-width: (@screen-small - 1);
514
+
515
+ // Calculate width based on number of columns available
516
+ @media (max-width: @max-width) {
517
+ width: percentage((@columns / @grid-columns));
518
+ }
519
+ }
520
+
521
+ // Generate the small columns
522
+ .make-sm-column(@columns; @gutter: @grid-gutter-width) {
523
+ position: relative;
524
+ // Prevent columns from collapsing when empty
525
+ min-height: 1px;
526
+ // Inner gutter via padding
527
+ padding-left: (@gutter / 2);
528
+ padding-right: (@gutter / 2);
529
+
530
+ // Calculate width based on number of columns available
531
+ @media (min-width: @screen-small) {
532
+ float: left;
533
+ width: percentage((@columns / @grid-columns));
534
+ }
535
+ }
536
+
537
+ // Generate the small column offsets
538
+ .make-sm-column-offset(@columns) {
539
+ @media (min-width: @screen-small) {
540
+ margin-left: percentage((@columns / @grid-columns));
541
+ }
542
+ }
543
+ .make-sm-column-push(@columns) {
544
+ @media (min-width: @screen-small) {
545
+ left: percentage((@columns / @grid-columns));
546
+ }
547
+ }
548
+ .make-sm-column-pull(@columns) {
549
+ @media (min-width: @screen-small) {
550
+ right: percentage((@columns / @grid-columns));
551
+ }
552
+ }
553
+
554
+ // Generate the medium columns
555
+ .make-md-column(@columns; @gutter: @grid-gutter-width) {
556
+ position: relative;
557
+ // Prevent columns from collapsing when empty
558
+ min-height: 1px;
559
+ // Inner gutter via padding
560
+ padding-left: (@gutter / 2);
561
+ padding-right: (@gutter / 2);
562
+
563
+ // Calculate width based on number of columns available
564
+ @media (min-width: @screen-medium) {
565
+ float: left;
566
+ width: percentage((@columns / @grid-columns));
567
+ }
568
+ }
569
+
570
+ // Generate the large column offsets
571
+ .make-md-column-offset(@columns) {
572
+ @media (min-width: @screen-medium) {
573
+ margin-left: percentage((@columns / @grid-columns));
574
+ }
575
+ }
576
+ .make-md-column-push(@columns) {
577
+ @media (min-width: @screen-medium) {
578
+ left: percentage((@columns / @grid-columns));
579
+ }
580
+ }
581
+ .make-md-column-pull(@columns) {
582
+ @media (min-width: @screen-medium) {
583
+ right: percentage((@columns / @grid-columns));
584
+ }
585
+ }
586
+
587
+ // Generate the large columns
588
+ .make-lg-column(@columns; @gutter: @grid-gutter-width) {
589
+ position: relative;
590
+ // Prevent columns from collapsing when empty
591
+ min-height: 1px;
592
+ // Inner gutter via padding
593
+ padding-left: (@gutter / 2);
594
+ padding-right: (@gutter / 2);
595
+
596
+ // Calculate width based on number of columns available
597
+ @media (min-width: @screen-large) {
598
+ float: left;
599
+ width: percentage((@columns / @grid-columns));
600
+ }
601
+ }
602
+
603
+ // Generate the large column offsets
604
+ .make-lg-column-offset(@columns) {
605
+ @media (min-width: @screen-large) {
606
+ margin-left: percentage((@columns / @grid-columns));
607
+ }
608
+ }
609
+ .make-lg-column-push(@columns) {
610
+ @media (min-width: @screen-large) {
611
+ left: percentage((@columns / @grid-columns));
612
+ }
613
+ }
614
+ .make-lg-column-pull(@columns) {
615
+ @media (min-width: @screen-large) {
616
+ right: percentage((@columns / @grid-columns));
617
+ }
618
+ }
619
+
620
+
621
+ // Form validation states
622
+ //
623
+ // Used in forms.less to generate the form validation CSS for warnings, errors,
624
+ // and successes.
625
+
626
+ .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
627
+ // Color the label and help text
628
+ .help-block,
629
+ .control-label {
630
+ color: @text-color;
631
+ }
632
+ // Set the border and box shadow on specific inputs to match
633
+ .form-control {
634
+ border-color: @border-color;
635
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
636
+ &:focus {
637
+ border-color: darken(@border-color, 10%);
638
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
639
+ .box-shadow(@shadow);
640
+ }
641
+ }
642
+ // Set validation states also for addons
643
+ .input-group-addon {
644
+ color: @text-color;
645
+ border-color: @border-color;
646
+ background-color: @background-color;
647
+ }
648
+ }
649
+
650
+ // Form control focus state
651
+ //
652
+ // Generate a customized focus state and for any input with the specified color,
653
+ // which defaults to the `@input-focus-border` variable.
654
+ //
655
+ // We highly encourage you to not customize the default value, but instead use
656
+ // this to tweak colors on an as-needed basis. This aesthetic change is based on
657
+ // WebKit's default styles, but applicable to a wider range of browsers. Its
658
+ // usability and accessibility should be taken into account with any change.
659
+ //
660
+ // Example usage: change the default blue border and shadow to white for better
661
+ // contrast against a dark gray background.
662
+
663
+ .form-control-focus(@color: @input-border-focus) {
664
+ @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
665
+ &:focus {
666
+ border-color: @color;
667
+ outline: 0;
668
+ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
669
+ }
670
+ }
671
+
672
+ // Form control sizing
673
+ //
674
+ // Relative text size, padding, and border-radii changes for form controls. For
675
+ // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
676
+ // element gets special love because it's special, and that's a fact!
677
+
678
+ .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
679
+ height: @input-height;
680
+ padding: @padding-vertical @padding-horizontal;
681
+ font-size: @font-size;
682
+ line-height: @line-height;
683
+ border-radius: @border-radius;
684
+
685
+ select& {
686
+ height: @input-height;
687
+ line-height: @input-height;
688
+ }
689
+
690
+ textarea& {
691
+ height: auto;
692
+ }
693
+ }