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

Sign up to get free protection for your applications and to get access to all the features.
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
  }