anjlab-bootstrap-rails 3.0.0.0.alpha1 → 3.0.0.rc1

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.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +14 -27
  3. data/Rakefile +11 -35
  4. data/{vendor → app}/assets/javascripts/twitter/bootstrap.js +6 -6
  5. data/{vendor → app}/assets/javascripts/twitter/bootstrap/affix.js +9 -3
  6. data/{vendor → app}/assets/javascripts/twitter/bootstrap/alert.js +4 -2
  7. data/{vendor → app}/assets/javascripts/twitter/bootstrap/button.js +6 -4
  8. data/{vendor → app}/assets/javascripts/twitter/bootstrap/carousel.js +22 -12
  9. data/{vendor → app}/assets/javascripts/twitter/bootstrap/collapse.js +69 -43
  10. data/{vendor → app}/assets/javascripts/twitter/bootstrap/dropdown.js +22 -13
  11. data/{vendor → app}/assets/javascripts/twitter/bootstrap/modal.js +37 -38
  12. data/{vendor → app}/assets/javascripts/twitter/bootstrap/popover.js +11 -5
  13. data/{vendor → app}/assets/javascripts/twitter/bootstrap/scrollspy.js +6 -4
  14. data/{vendor → app}/assets/javascripts/twitter/bootstrap/tab.js +4 -2
  15. data/{vendor → app}/assets/javascripts/twitter/bootstrap/tooltip.js +49 -38
  16. data/{vendor → app}/assets/javascripts/twitter/bootstrap/transition.js +10 -1
  17. data/{vendor → app}/assets/stylesheets/twitter/bootstrap.scss +0 -0
  18. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_accordion.scss +7 -10
  19. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_alerts.scss +11 -34
  20. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_badges.scss +8 -15
  21. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_bootstrap.scss +0 -1
  22. data/app/assets/stylesheets/twitter/bootstrap/_breadcrumbs.scss +23 -0
  23. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_button-groups.scss +23 -22
  24. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_buttons.scss +21 -24
  25. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_carousel.scss +46 -32
  26. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_close.scss +3 -3
  27. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_code.scss +6 -12
  28. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_component-animations.scss +10 -4
  29. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_dropdowns.scss +46 -101
  30. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_forms.scss +139 -179
  31. data/app/assets/stylesheets/twitter/bootstrap/_grid.scss +155 -0
  32. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_jumbotron.scss +1 -4
  33. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_labels.scss +7 -31
  34. data/app/assets/stylesheets/twitter/bootstrap/_list-group.scss +89 -0
  35. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_media.scss +8 -6
  36. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_mixins.scss +152 -131
  37. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_modals.scss +11 -12
  38. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_navbar.scss +90 -66
  39. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_navs.scss +56 -68
  40. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_normalize.scss +0 -0
  41. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_pager.scss +4 -3
  42. data/app/assets/stylesheets/twitter/bootstrap/_pagination.scss +108 -0
  43. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_panels.scss +8 -2
  44. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_popovers.scss +22 -20
  45. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_print.scss +26 -0
  46. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_progress-bars.scss +5 -18
  47. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_responsive-utilities.scss +25 -25
  48. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_scaffolding.scss +24 -8
  49. data/app/assets/stylesheets/twitter/bootstrap/_tables.scss +211 -0
  50. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_thumbnails.scss +2 -3
  51. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_tooltip.scss +26 -2
  52. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_type.scss +31 -49
  53. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_utilities.scss +0 -0
  54. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_variables.scss +201 -54
  55. data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_wells.scss +0 -0
  56. data/bootstrap-rails.gemspec +0 -1
  57. data/lib/bootstrap-rails/version.rb +1 -1
  58. metadata +54 -60
  59. data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.eot +0 -0
  60. data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.otf +0 -0
  61. data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.svg +0 -175
  62. data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.ttf +0 -0
  63. data/vendor/assets/fonts/twitter/glyphiconshalflings-regular.woff +0 -0
  64. data/vendor/assets/stylesheets/twitter/bootstrap/_breadcrumbs.scss +0 -28
  65. data/vendor/assets/stylesheets/twitter/bootstrap/_glyphicons.scss +0 -200
  66. data/vendor/assets/stylesheets/twitter/bootstrap/_grid.scss +0 -65
  67. data/vendor/assets/stylesheets/twitter/bootstrap/_list-group.scss +0 -96
  68. data/vendor/assets/stylesheets/twitter/bootstrap/_pagination.scss +0 -87
  69. data/vendor/assets/stylesheets/twitter/bootstrap/_tables.scss +0 -242
@@ -0,0 +1,155 @@
1
+ //
2
+ // Grid system
3
+ // --------------------------------------------------
4
+
5
+ // Set the container width, and override it for fixed navbars in media queries
6
+ .container {
7
+ @include container-fixed();
8
+ }
9
+
10
+ // Mobile-first defaults
11
+ .row {
12
+ @include make-row();
13
+ }
14
+
15
+ // Common styles for small and large grid columns
16
+ .col-1,
17
+ .col-2,
18
+ .col-3,
19
+ .col-4,
20
+ .col-5,
21
+ .col-6,
22
+ .col-7,
23
+ .col-8,
24
+ .col-9,
25
+ .col-10,
26
+ .col-11,
27
+ .col-12,
28
+ .col-sm-1,
29
+ .col-sm-2,
30
+ .col-sm-3,
31
+ .col-sm-4,
32
+ .col-sm-5,
33
+ .col-sm-6,
34
+ .col-sm-7,
35
+ .col-sm-8,
36
+ .col-sm-9,
37
+ .col-sm-10,
38
+ .col-sm-11,
39
+ .col-sm-12,
40
+ .col-lg-1,
41
+ .col-lg-2,
42
+ .col-lg-3,
43
+ .col-lg-4,
44
+ .col-lg-5,
45
+ .col-lg-6,
46
+ .col-lg-7,
47
+ .col-lg-8,
48
+ .col-lg-9,
49
+ .col-lg-10,
50
+ .col-lg-11,
51
+ .col-lg-12 {
52
+ position: relative;
53
+ // Prevent columns from collapsing when empty
54
+ min-height: 1px;
55
+ // Inner gutter via padding
56
+ padding-left: ($grid-gutter-width / 2);
57
+ padding-right: ($grid-gutter-width / 2);
58
+ }
59
+
60
+
61
+
62
+ //
63
+ // Container and grid column sizing
64
+ //
65
+
66
+ // Tiny device columns (smartphones)
67
+ .col-1,
68
+ .col-2,
69
+ .col-3,
70
+ .col-4,
71
+ .col-5,
72
+ .col-6,
73
+ .col-7,
74
+ .col-8,
75
+ .col-9,
76
+ .col-10,
77
+ .col-11,
78
+ .col-12 {
79
+ float: left;
80
+ }
81
+
82
+ @for $i from 1 through $grid-columns {
83
+ .col-#{$i} { width: percentage(($i / $grid-columns)); }
84
+ }
85
+
86
+ // Small device columns (phones to tablets)
87
+ @media (min-width: $screen-tablet) {
88
+ .container {
89
+ max-width: $container-tablet;
90
+ }
91
+
92
+ .col-sm-1,
93
+ .col-sm-2,
94
+ .col-sm-3,
95
+ .col-sm-4,
96
+ .col-sm-5,
97
+ .col-sm-6,
98
+ .col-sm-7,
99
+ .col-sm-8,
100
+ .col-sm-9,
101
+ .col-sm-10,
102
+ .col-sm-11,
103
+ .col-sm-12 {
104
+ float: left;
105
+ }
106
+
107
+ @for $i from 1 through $grid-columns {
108
+ .col-sm-#{$i} { width: percentage(($i / $grid-columns)); }
109
+ }
110
+
111
+ // Push and pull columns for source order changes
112
+ @for $i from 1 through $grid-columns - 1 {
113
+ .col-push-#{$i} { left: percentage(($i / $grid-columns)); }
114
+ }
115
+
116
+ @for $i from 1 through $grid-columns - 1 {
117
+ .col-pull-#{$i} { right: percentage(($i / $grid-columns)); }
118
+ }
119
+ }
120
+
121
+ // Medium and large device columns (desktop and up)
122
+ @media (min-width: $screen-desktop) {
123
+ .container {
124
+ max-width: $container-desktop;
125
+ }
126
+ .col-lg-1,
127
+ .col-lg-2,
128
+ .col-lg-3,
129
+ .col-lg-4,
130
+ .col-lg-5,
131
+ .col-lg-6,
132
+ .col-lg-7,
133
+ .col-lg-8,
134
+ .col-lg-9,
135
+ .col-lg-10,
136
+ .col-lg-11,
137
+ .col-lg-12 {
138
+ float: left;
139
+ }
140
+ @for $i from 1 through $grid-columns {
141
+ .col-lg-#{$i} { width: percentage(($i / $grid-columns)); }
142
+ }
143
+
144
+ // Offsets
145
+ @for $i from 1 through $grid-columns - 1 {
146
+ .col-offset-#{$i} { margin-left: percentage(($i / $grid-columns)); }
147
+ }
148
+ }
149
+
150
+ // Large desktops and up
151
+ @media (min-width: $screen-large-desktop) {
152
+ .container {
153
+ max-width: $container-large-desktop;
154
+ }
155
+ }
@@ -18,13 +18,10 @@
18
18
  p {
19
19
  line-height: 1.4;
20
20
  }
21
- }
22
21
 
23
- @media screen and (min-width: $screen-tablet) {
24
- .jumbotron {
22
+ @media screen and (min-width: $screen-tablet) {
25
23
  padding: 50px 60px;
26
24
  border-radius: $border-radius-large; // Only round corners at higher resolutions
27
-
28
25
  h1 {
29
26
  font-size: ($font-size-base * 4.5);
30
27
  }
@@ -8,7 +8,7 @@
8
8
  font-size: 75%;
9
9
  font-weight: 500;
10
10
  line-height: 1;
11
- color: #fff;
11
+ color: $label-color;
12
12
  text-align: center;
13
13
  white-space: nowrap;
14
14
  vertical-align: middle;
@@ -19,7 +19,7 @@
19
19
  &[href] {
20
20
  &:hover,
21
21
  &:focus {
22
- color: #fff;
22
+ color: $label-link-hover-color;
23
23
  text-decoration: none;
24
24
  cursor: pointer;
25
25
  background-color: darken($gray-light, 10%);
@@ -30,41 +30,17 @@
30
30
  // Colors
31
31
  // Contextual variations (linked labels get darker on :hover)
32
32
  .label-danger {
33
- background-color: $label-danger-bg;
34
- &[href] {
35
- &:hover,
36
- &:focus {
37
- background-color: darken($label-danger-bg, 10%);
38
- }
39
- }
33
+ @include label-variant($label-danger-bg);
40
34
  }
41
35
 
42
36
  .label-success {
43
- background-color: $label-success-bg;
44
- &[href] {
45
- &:hover,
46
- &:focus {
47
- background-color: darken($label-success-bg, 10%);
48
- }
49
- }
37
+ @include label-variant($label-success-bg);
50
38
  }
51
39
 
52
40
  .label-warning {
53
- background-color: $label-warning-bg;
54
- &[href] {
55
- &:hover,
56
- &:focus {
57
- background-color: darken($label-warning-bg, 10%);
58
- }
59
- }
41
+ @include label-variant($label-warning-bg);
60
42
  }
61
43
 
62
44
  .label-info {
63
- background-color: $label-info-bg;
64
- &[href] {
65
- &:hover,
66
- &:focus {
67
- background-color: darken($label-info-bg, 10%);
68
- }
69
- }
70
- }
45
+ @include label-variant($label-info-bg);
46
+ }
@@ -0,0 +1,89 @@
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
+ background-color: $list-group-bg;
13
+ }
14
+
15
+ // Individual list items
16
+ // -------------------------
17
+
18
+ .list-group-item {
19
+ position: relative;
20
+ display: block;
21
+ padding: 10px 30px 10px 15px;
22
+ // Place the border on the list items and negative margin up for better styling
23
+ margin-bottom: -1px;
24
+ border: 1px solid $list-group-border;
25
+
26
+ // Round the first and last items
27
+ &:first-child {
28
+ @include border-top-radius($border-radius-base);
29
+ }
30
+ &:last-child {
31
+ margin-bottom: 0;
32
+ @include border-bottom-radius($border-radius-base);
33
+ }
34
+
35
+ // Align badges within list items
36
+ > .badge {
37
+ float: right;
38
+ margin-right: -15px;
39
+ }
40
+ }
41
+
42
+ // Custom content options
43
+ // -------------------------
44
+
45
+ .list-group-item-heading {
46
+ margin-top: 0;
47
+ margin-bottom: 5px;
48
+ }
49
+ .list-group-item-text {
50
+ margin-bottom: 0;
51
+ line-height: 1.3;
52
+ }
53
+
54
+ // Linked list items
55
+ // -------------------------
56
+
57
+ // Custom content within linked items
58
+ a.list-group-item {
59
+ // Colorize content accordingly
60
+ .list-group-item-heading {
61
+ color: $list-group-link-heading-color;
62
+ }
63
+ .list-group-item-text {
64
+ color: $list-group-link-color;
65
+ }
66
+
67
+ // Hover state
68
+ &:hover,
69
+ &:focus {
70
+ text-decoration: none;
71
+ background-color: $list-group-hover-bg;
72
+ }
73
+
74
+ // Active class on item itself, not parent
75
+ &.active {
76
+ z-index: 2; // Place active items above their siblings for proper border styling
77
+ color: $list-group-active-color;
78
+ background-color: $list-group-active-bg;
79
+ border-color: $list-group-active-border;
80
+
81
+ // Force color to inherit for custom content
82
+ .list-group-item-heading {
83
+ color: inherit;
84
+ }
85
+ .list-group-item-text {
86
+ color: lighten($list-group-active-bg, 40%);
87
+ }
88
+ }
89
+ }
@@ -36,11 +36,13 @@
36
36
  // Media image alignment
37
37
  // -------------------------
38
38
 
39
- .media > .pull-left {
40
- margin-right: 10px;
41
- }
42
- .media > .pull-right {
43
- margin-left: 10px;
39
+ .media {
40
+ > .pull-left {
41
+ margin-right: 10px;
42
+ }
43
+ > .pull-right {
44
+ margin-left: 10px;
45
+ }
44
46
  }
45
47
 
46
48
 
@@ -49,6 +51,6 @@
49
51
 
50
52
  // Undo default ul/ol styles
51
53
  .media-list {
52
- margin-left: 0;
54
+ padding-left: 0;
53
55
  list-style: none;
54
56
  }
@@ -109,62 +109,52 @@
109
109
  // Transitions
110
110
  @mixin transition($transition) {
111
111
  -webkit-transition: $transition;
112
- -moz-transition: $transition;
113
- -o-transition: $transition;
114
112
  transition: $transition;
115
113
  }
116
114
  @mixin transition-delay($transition-delay) {
117
115
  -webkit-transition-delay: $transition-delay;
118
- -moz-transition-delay: $transition-delay;
119
- -o-transition-delay: $transition-delay;
120
116
  transition-delay: $transition-delay;
121
117
  }
122
118
  @mixin transition-duration($transition-duration) {
123
119
  -webkit-transition-duration: $transition-duration;
124
- -moz-transition-duration: $transition-duration;
125
- -o-transition-duration: $transition-duration;
126
120
  transition-duration: $transition-duration;
127
121
  }
122
+ @mixin transition-transform($transition) {
123
+ -webkit-transition: -webkit-transform $transition;
124
+ -moz-transition: -moz-transform $transition;
125
+ -o-transition: -o-transform $transition;
126
+ transition: transform $transition;
127
+ }
128
128
 
129
129
  // Transformations
130
130
  @mixin rotate($degrees) {
131
131
  -webkit-transform: rotate($degrees);
132
- -moz-transform: rotate($degrees);
133
132
  -ms-transform: rotate($degrees);
134
- -o-transform: rotate($degrees);
135
133
  transform: rotate($degrees);
136
134
  }
137
135
  @mixin scale($ratio) {
138
136
  -webkit-transform: scale($ratio);
139
- -moz-transform: scale($ratio);
140
137
  -ms-transform: scale($ratio);
141
- -o-transform: scale($ratio);
142
138
  transform: scale($ratio);
143
139
  }
144
140
  @mixin translate($x, $y) {
145
141
  -webkit-transform: translate($x, $y);
146
- -moz-transform: translate($x, $y);
147
142
  -ms-transform: translate($x, $y);
148
- -o-transform: translate($x, $y);
149
143
  transform: translate($x, $y);
150
144
  }
151
145
  @mixin skew($x, $y) {
152
146
  -webkit-transform: skew($x, $y);
153
- -moz-transform: skew($x, $y);
154
- -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
155
- -o-transform: skew($x, $y);
147
+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885
156
148
  transform: skew($x, $y);
157
149
  }
158
150
  @mixin translate3d($x, $y, $z) {
159
151
  -webkit-transform: translate3d($x, $y, $z);
160
- -moz-transform: translate3d($x, $y, $z);
161
- -o-transform: translate3d($x, $y, $z);
162
152
  transform: translate3d($x, $y, $z);
163
153
  }
164
154
 
165
155
  // Backface visibility
166
156
  // Prevent browsers from flickering when using CSS 3D transforms.
167
- // Default value is `visible`, but can be changed to `hidden
157
+ // Default value is `visible`, but can be changed to `hidden`
168
158
  // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
169
159
  @mixin backface-visibility($visibility){
170
160
  -webkit-backface-visibility: $visibility;
@@ -174,16 +164,11 @@
174
164
 
175
165
  // Background clipping
176
166
  @mixin background-clip($clip) {
177
- -webkit-background-clip: $clip;
178
- -moz-background-clip: $clip;
179
167
  background-clip: $clip;
180
168
  }
181
169
 
182
170
  // Background sizing
183
171
  @mixin background-size($size) {
184
- -webkit-background-size: $size;
185
- -moz-background-size: $size;
186
- -o-background-size: $size;
187
172
  background-size: $size;
188
173
  }
189
174
 
@@ -235,65 +220,75 @@
235
220
  opacity: $opacity;
236
221
  // IE8 filter
237
222
  $opacity-ie: ($opacity * 100);
238
- filter: alpha(opacity=#{opacity-ie})
223
+ filter: alpha(opacity=#{$opacity-ie})
239
224
  }
240
225
 
241
226
 
242
227
 
243
- // BACKGROUNDS
228
+ // GRADIENTS
244
229
  // --------------------------------------------------
245
230
 
246
- // Gradients
247
- @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
248
- background-color: $endColor;
249
- background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
250
- background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
251
- background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
252
- background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
231
+ // Horizontal gradient, from left to right
232
+ //
233
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
234
+ // Color stops are not available in IE9 and below.
235
+ @mixin gradient-horizontal($start-color: #555, $start-percent: 0%, $end-color: #333, $end-percent: 100%) {
236
+ background-color: $end-color;
237
+ background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
238
+ background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+
239
+ background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
240
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
253
241
  background-repeat: repeat-x;
254
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
255
- }
256
- @mixin gradient-vertical($startColor: #555, $endColor: #333) {
257
- background-color: $endColor;
258
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
259
- background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
260
- background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
261
- background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
242
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
243
+ }
244
+
245
+ // Vertical gradient, from top to bottom
246
+ //
247
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
248
+ // Color stops are not available in IE9 and below.
249
+ @mixin gradient-vertical($start-color: #555, $start-percent: 0%, $end-color: #333, $end-percent: 100%) {
250
+ background-color: $end-color;
251
+ background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+
252
+ background-image: -webkit-linear-gradient(top, $start-color, $start-percent, $end-color, $end-percent); // Safari 5.1+, Chrome 10+
253
+ background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+
254
+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10
262
255
  background-repeat: repeat-x;
263
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
256
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
264
257
  }
265
- @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
266
- background-color: $endColor;
258
+
259
+ @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
260
+ background-color: $end-color;
267
261
  background-repeat: repeat-x;
268
- background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
269
- background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
270
- background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
271
- }
272
- @mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
273
- background-color: mix($midColor, $endColor, 80%);
274
- background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
275
- background-image: -webkit-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
276
- background-image: -moz-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
277
- background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
262
+ background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1+, Chrome 10+
263
+ background-image: -moz-linear-gradient($deg, $start-color, $end-color); // FF 3.6+
264
+ background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10
265
+ }
266
+
267
+ @mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
268
+ background-color: mix($mid-color, $end-color, 80%);
269
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
270
+ background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
271
+ background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
272
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
278
273
  background-repeat: no-repeat;
279
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
274
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
280
275
  }
281
276
 
282
- @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
283
- background-color: mix($midColor, $endColor, 80%);
284
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
285
- background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
286
- background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
287
- background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
277
+ @mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
278
+ background-color: mix($mid-color, $end-color, 80%);
279
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color));
280
+ background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
281
+ background-image: -moz-linear-gradient(top, $start-color, $mid-color $color-stop, $end-color);
282
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
288
283
  background-repeat: no-repeat;
289
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
290
- }
291
- @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
292
- background-color: $outerColor;
293
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
294
- background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
295
- background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
296
- background-image: radial-gradient(circle, $innerColor, $outerColor);
284
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
285
+ }
286
+ @mixin gradient-radial($inner-color: #555, $outer-color: #333) {
287
+ background-color: $outer-color;
288
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color));
289
+ background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
290
+ background-image: -moz-radial-gradient(circle, $inner-color, $outer-color);
291
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
297
292
  background-repeat: no-repeat;
298
293
  }
299
294
  @mixin gradient-striped($color: #555, $angle: 45deg) {
@@ -305,17 +300,21 @@
305
300
  }
306
301
 
307
302
  // Reset filters for IE
303
+ //
304
+ // When you need to remove a gradient background, don't forget to use this to reset
305
+ // the IE filter for IE9 and below.
308
306
  @mixin reset-filter() {
309
307
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
310
308
  }
311
309
 
312
310
 
311
+
313
312
  // RETINA IMAGE SUPPORT
314
313
  // --------------------------------------------------
315
314
 
316
315
  // Short retina mixin for setting background-image and -size
317
- @mixin retina-image($file-1x, $file-2x, $width-1x, $height-1x) {
318
- background-image: url("#{file-1x}");
316
+ @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
317
+ background-image: url("#{$file-1x}");
319
318
 
320
319
  @media
321
320
  only screen and (-webkit-min-device-pixel-ratio: 2),
@@ -324,7 +323,7 @@
324
323
  only screen and ( min-device-pixel-ratio: 2),
325
324
  only screen and ( min-resolution: 192dpi),
326
325
  only screen and ( min-resolution: 2dppx) {
327
- background-image: url("#{file-2x}");
326
+ background-image: url("#{$file-2x}");
328
327
  background-size: $width-1x $height-1x;
329
328
  }
330
329
  }
@@ -336,15 +335,28 @@
336
335
  // Horizontal dividers
337
336
  // -------------------------
338
337
  // Dividers (basically an hr) within dropdowns and nav lists
339
- @mixin nav-divider($top: #e5e5e5, $bottom: #fff) {
340
- height: 2px; // 1px for background, one for border
338
+ @mixin nav-divider($color: #e5e5e5) {
339
+ height: 1px;
341
340
  margin: (($line-height-computed / 2) - 1) 0;
342
341
  overflow: hidden;
343
- background-color: $top;
344
- border-bottom: 1px solid $bottom;
342
+ background-color: $color;
343
+ }
344
+
345
+ // Alerts
346
+ // -------------------------
347
+ @mixin alert-variant($background, $border, $text-color) {
348
+ background-color: $background;
349
+ border-color: $border;
350
+ color: $text-color;
351
+ hr {
352
+ border-top-color: darken($border, 5%);
353
+ }
354
+ .alert-link {
355
+ color: darken($text-color, 10%);
356
+ }
345
357
  }
346
358
 
347
- // Button psuedo states
359
+ // Button pseudo states
348
360
  // -------------------------
349
361
  // Easily pump out default styles, as well as :hover, :focus, :active,
350
362
  // and disabled options for all buttons
@@ -364,6 +376,7 @@
364
376
  &.disabled,
365
377
  &[disabled],
366
378
  fieldset[disabled] & {
379
+ &,
367
380
  &:hover,
368
381
  &:focus,
369
382
  &:active,
@@ -374,6 +387,18 @@
374
387
  }
375
388
  }
376
389
 
390
+ // Labels
391
+ // -------------------------
392
+ @mixin label-variant($color) {
393
+ background-color: $color;
394
+ &[href] {
395
+ &:hover,
396
+ &:focus {
397
+ background-color: darken($color, 10%);
398
+ }
399
+ }
400
+ }
401
+
377
402
  // Navbar vertical align
378
403
  // -------------------------
379
404
  // Vertically center elements in the navbar.
@@ -383,7 +408,36 @@
383
408
  margin-bottom: (($navbar-height - $element-height) / 2);
384
409
  }
385
410
 
411
+ // Progress bars
412
+ // -------------------------
413
+ @mixin progress-bar-variant($color) {
414
+ background-color: $color;
415
+ .progress-striped & {
416
+ @include gradient-striped($color);
417
+ }
418
+ }
419
+
420
+ // Responsive utilities
421
+ // -------------------------
422
+ // More easily include all the states for responsive-utilities.less.
423
+ @mixin responsive-visibility($selector) {
424
+ #{$selector} {
425
+ display: block !important;
426
+ }
427
+
428
+ tr#{$selector} { display: table-row !important; }
429
+ th#{$selector},
430
+ td#{$selector} { display: table-cell !important; }
431
+ }
386
432
 
433
+ @mixin responsive-invisibility($selector) {
434
+ #{$selector} {
435
+ display: none !important;
436
+ }
437
+ tr#{$selector} { display: none !important; }
438
+ th#{$selector},
439
+ td#{$selector} { display: none !important; }
440
+ }
387
441
 
388
442
  // Grid System
389
443
  // -----------
@@ -395,25 +449,26 @@
395
449
  @include clearfix();
396
450
  }
397
451
 
398
- // Make a grid
399
-
400
452
  // Creates a wrapper for a series of columns
401
453
  @mixin make-row() {
402
454
  // Then clear the floated columns
403
455
  @include clearfix();
404
456
 
457
+ @media (min-width: $screen-small) {
458
+ margin-left: ($grid-gutter-width / -2);
459
+ margin-right: ($grid-gutter-width / -2);
460
+ }
461
+
405
462
  // Negative margin nested rows out to align the content of columns
406
463
  .row {
407
464
  margin-left: ($grid-gutter-width / -2);
408
465
  margin-right: ($grid-gutter-width / -2);
409
466
  }
410
467
  }
468
+
411
469
  // Generate the columns
412
470
  @mixin make-column($columns) {
413
471
  position: relative;
414
- // Float and set width: 100%; for easy stacking on mobile devices
415
- float: left;
416
- width: 100%;
417
472
  // Prevent columns from collapsing when empty
418
473
  min-height: 1px;
419
474
  // Inner gutter via padding
@@ -422,9 +477,11 @@
422
477
 
423
478
  // Calculate width based on number of columns available
424
479
  @media (min-width: $grid-float-breakpoint) {
480
+ float: left;
425
481
  width: percentage(($columns / $grid-columns));
426
482
  }
427
483
  }
484
+
428
485
  // Generate the column offsets
429
486
  @mixin make-column-offset($columns) {
430
487
  @media (min-width: $grid-float-breakpoint) {
@@ -442,62 +499,20 @@
442
499
  }
443
500
  }
444
501
 
445
- @mixin col-sm($columns, $grid-columns: $grid-columns) {
446
- width: percentage(($columns / $grid-columns));
447
- }
448
-
449
- @mixin col-lg($columns, $grid-columns: $grid-columns) {
450
- width: percentage(($columns / $grid-columns));
451
- }
452
-
453
- @mixin col-offset($columns, $grid-columns: $grid-columns) {
454
- margin-left: percentage(($columns / $grid-columns));
455
- }
456
-
457
- @mixin col-push($columns, $grid-columns: $grid-columns) {
458
- left: percentage(($columns / $grid-columns));
459
- }
460
-
461
- @mixin col-pull($columns, $grid-columns: $grid-columns) {
462
- right: percentage(($columns / $grid-columns));
463
- }
464
-
465
- // Small grid columns
466
- @mixin generate-grid-columns($grid-columns) {
467
- $columns: $grid-columns;
468
-
469
- @while $columns > 0 {
470
- .col-sm-#{$columns} { @include col-sm($columns, $grid-columns) }
471
-
472
- $columns: $columns - 1;
473
- }
474
- }
475
-
476
- // Large grid columns
477
- @mixin generate-large-grid-columns($grid-columns) {
478
- $columns: $grid-columns;
479
-
480
- @while $columns > 0 {
481
- .col-lg-#{$columns} { @include col-lg($columns, $grid-columns) }
482
- .col-offset-#{$columns} { @include col-offset($columns, $grid-columns) }
483
- .col-push-#{$columns} { @include col-push($columns, $grid-columns) }
484
- .col-pull-#{$columns} { @include col-pull($columns, $grid-columns) }
485
502
 
486
- $columns: $columns - 1;
487
- }
488
- }
489
-
490
- // Framework mixins
491
- // --------------------------------------------------
503
+ // Form validation states
504
+ //
505
+ // Used in forms.less to generate the form validation CSS for warnings, errors,
506
+ // and successes.
492
507
 
493
- // Generate form validation states
494
- @mixin form-field-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
495
- // Color the label text
508
+ @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
509
+ // Color the label and help text
510
+ .help-block,
496
511
  .control-label {
497
512
  color: $text-color;
498
513
  }
499
514
  // Set the border and box shadow on specific inputs to match
500
- .input-with-feedback {
515
+ .form-control {
501
516
  padding-right: 32px; // to account for the feedback icon
502
517
  border-color: $border-color;
503
518
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
@@ -507,4 +522,10 @@
507
522
  @include box-shadow($shadow);
508
523
  }
509
524
  }
525
+ // Set validation states also for addons
526
+ .input-group-addon {
527
+ color: $text-color;
528
+ border-color: $border-color;
529
+ background-color: $background-color;
530
+ }
510
531
  }