bootstrap-generators 3.0.2.2 → 3.1.0

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 (98) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/Rakefile +7 -6
  4. data/bootstrap-generators.gemspec +1 -1
  5. data/lib/bootstrap/generators/version.rb +1 -1
  6. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +354 -164
  7. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.scss +359 -165
  8. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +3 -3
  9. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +3 -3
  10. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.slim +3 -3
  11. data/lib/generators/bootstrap/install/templates/layouts/starter.html.erb +1 -0
  12. data/lib/generators/bootstrap/install/templates/layouts/starter.html.haml +1 -0
  13. data/lib/generators/bootstrap/install/templates/layouts/starter.html.slim +2 -0
  14. data/readme-template.md.erb +14 -0
  15. data/vendor/assets/fonts/{glyphicons-halflings-regular.eot → bootstrap/glyphicons-halflings-regular.eot} +0 -0
  16. data/vendor/assets/fonts/{glyphicons-halflings-regular.svg → bootstrap/glyphicons-halflings-regular.svg} +0 -0
  17. data/vendor/assets/fonts/{glyphicons-halflings-regular.ttf → bootstrap/glyphicons-halflings-regular.ttf} +0 -0
  18. data/vendor/assets/fonts/{glyphicons-halflings-regular.woff → bootstrap/glyphicons-halflings-regular.woff} +0 -0
  19. data/vendor/assets/javascripts/bootstrap/affix.js +34 -23
  20. data/vendor/assets/javascripts/bootstrap/alert.js +5 -15
  21. data/vendor/assets/javascripts/bootstrap/button.js +24 -26
  22. data/vendor/assets/javascripts/bootstrap/carousel.js +20 -32
  23. data/vendor/assets/javascripts/bootstrap/collapse.js +7 -16
  24. data/vendor/assets/javascripts/bootstrap/dropdown.js +23 -30
  25. data/vendor/assets/javascripts/bootstrap/modal.js +25 -28
  26. data/vendor/assets/javascripts/bootstrap/popover.js +14 -21
  27. data/vendor/assets/javascripts/bootstrap/scrollspy.js +17 -22
  28. data/vendor/assets/javascripts/bootstrap/tab.js +7 -17
  29. data/vendor/assets/javascripts/bootstrap/tooltip.js +52 -39
  30. data/vendor/assets/javascripts/bootstrap/transition.js +11 -19
  31. data/vendor/assets/stylesheets/bootstrap.css +1209 -2476
  32. data/vendor/twitter/bootstrap/less/badges.less +10 -6
  33. data/vendor/twitter/bootstrap/less/breadcrumbs.less +4 -1
  34. data/vendor/twitter/bootstrap/less/button-groups.less +17 -44
  35. data/vendor/twitter/bootstrap/less/buttons.less +10 -13
  36. data/vendor/twitter/bootstrap/less/carousel.less +1 -0
  37. data/vendor/twitter/bootstrap/less/code.less +10 -0
  38. data/vendor/twitter/bootstrap/less/dropdowns.less +31 -10
  39. data/vendor/twitter/bootstrap/less/forms.less +89 -34
  40. data/vendor/twitter/bootstrap/less/glyphicons.less +5 -9
  41. data/vendor/twitter/bootstrap/less/grid.less +36 -29
  42. data/vendor/twitter/bootstrap/less/input-groups.less +40 -19
  43. data/vendor/twitter/bootstrap/less/jumbotron.less +11 -7
  44. data/vendor/twitter/bootstrap/less/labels.less +6 -0
  45. data/vendor/twitter/bootstrap/less/list-group.less +25 -3
  46. data/vendor/twitter/bootstrap/less/mixins.less +140 -72
  47. data/vendor/twitter/bootstrap/less/modals.less +18 -12
  48. data/vendor/twitter/bootstrap/less/navbar.less +65 -73
  49. data/vendor/twitter/bootstrap/less/navs.less +2 -22
  50. data/vendor/twitter/bootstrap/less/normalize.less +139 -122
  51. data/vendor/twitter/bootstrap/less/pager.less +5 -5
  52. data/vendor/twitter/bootstrap/less/pagination.less +6 -3
  53. data/vendor/twitter/bootstrap/less/panels.less +73 -15
  54. data/vendor/twitter/bootstrap/less/print.less +0 -4
  55. data/vendor/twitter/bootstrap/less/progress-bars.less +0 -12
  56. data/vendor/twitter/bootstrap/less/responsive-utilities.less +13 -129
  57. data/vendor/twitter/bootstrap/less/scaffolding.less +17 -2
  58. data/vendor/twitter/bootstrap/less/tables.less +19 -22
  59. data/vendor/twitter/bootstrap/less/theme.less +1 -1
  60. data/vendor/twitter/bootstrap/less/thumbnails.less +9 -3
  61. data/vendor/twitter/bootstrap/less/tooltip.less +1 -1
  62. data/vendor/twitter/bootstrap/less/type.less +123 -106
  63. data/vendor/twitter/bootstrap/less/variables.less +354 -164
  64. data/vendor/twitter/bootstrap/less/wells.less +1 -1
  65. data/vendor/twitter/bootstrap/sass/_badges.scss +10 -6
  66. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +4 -1
  67. data/vendor/twitter/bootstrap/sass/_button-groups.scss +15 -42
  68. data/vendor/twitter/bootstrap/sass/_buttons.scss +10 -13
  69. data/vendor/twitter/bootstrap/sass/_carousel.scss +1 -0
  70. data/vendor/twitter/bootstrap/sass/_code.scss +10 -0
  71. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +31 -11
  72. data/vendor/twitter/bootstrap/sass/_forms.scss +88 -34
  73. data/vendor/twitter/bootstrap/sass/_glyphicons.scss +5 -9
  74. data/vendor/twitter/bootstrap/sass/_grid.scss +36 -29
  75. data/vendor/twitter/bootstrap/sass/_input-groups.scss +40 -19
  76. data/vendor/twitter/bootstrap/sass/_jumbotron.scss +11 -7
  77. data/vendor/twitter/bootstrap/sass/_labels.scss +6 -0
  78. data/vendor/twitter/bootstrap/sass/_list-group.scss +25 -3
  79. data/vendor/twitter/bootstrap/sass/_mixins.scss +135 -65
  80. data/vendor/twitter/bootstrap/sass/_modals.scss +17 -11
  81. data/vendor/twitter/bootstrap/sass/_navbar.scss +62 -70
  82. data/vendor/twitter/bootstrap/sass/_navs.scss +1 -21
  83. data/vendor/twitter/bootstrap/sass/_normalize.scss +139 -122
  84. data/vendor/twitter/bootstrap/sass/_pager.scss +4 -4
  85. data/vendor/twitter/bootstrap/sass/_pagination.scss +6 -3
  86. data/vendor/twitter/bootstrap/sass/_panels.scss +72 -14
  87. data/vendor/twitter/bootstrap/sass/_print.scss +0 -4
  88. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +0 -12
  89. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +6 -124
  90. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +17 -2
  91. data/vendor/twitter/bootstrap/sass/_tables.scss +7 -18
  92. data/vendor/twitter/bootstrap/sass/_theme.scss +1 -1
  93. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +13 -7
  94. data/vendor/twitter/bootstrap/sass/_tooltip.scss +1 -1
  95. data/vendor/twitter/bootstrap/sass/_type.scss +122 -105
  96. data/vendor/twitter/bootstrap/sass/_variables.scss +359 -165
  97. data/vendor/twitter/bootstrap/sass/_wells.scss +1 -1
  98. metadata +7 -7
@@ -10,11 +10,11 @@
10
10
  // Import the fonts
11
11
  @font-face {
12
12
  font-family: 'Glyphicons Halflings';
13
- src: url('@{icon-font-path}@{icon-font-name}.eot');
14
- src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
15
- url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
16
- url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
17
- url('@{icon-font-path}@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
13
+ src: ~"url('@{icon-font-path}@{icon-font-name}.eot')";
14
+ src: ~"url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype')",
15
+ ~"url('@{icon-font-path}@{icon-font-name}.woff') format('woff')",
16
+ ~"url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype')",
17
+ ~"url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg')";
18
18
  }
19
19
 
20
20
  // Catchall baseclass
@@ -28,10 +28,6 @@
28
28
  line-height: 1;
29
29
  -webkit-font-smoothing: antialiased;
30
30
  -moz-osx-font-smoothing: grayscale;
31
-
32
- &:empty {
33
- width: 1em;
34
- }
35
31
  }
36
32
 
37
33
  // Individual icons
@@ -2,27 +2,56 @@
2
2
  // Grid system
3
3
  // --------------------------------------------------
4
4
 
5
- // Set the container width, and override it for fixed navbars in media queries
5
+
6
+ // Container widths
7
+ //
8
+ // Set the container width, and override it for fixed navbars in media queries.
9
+
6
10
  .container {
7
11
  .container-fixed();
12
+
13
+ @media (min-width: @screen-sm-min) {
14
+ width: @container-sm;
15
+ }
16
+ @media (min-width: @screen-md-min) {
17
+ width: @container-md;
18
+ }
19
+ @media (min-width: @screen-lg-min) {
20
+ width: @container-lg;
21
+ }
22
+ }
23
+
24
+
25
+ // Fluid container
26
+ //
27
+ // Utilizes the mixin meant for fixed width containers, but without any defined
28
+ // width for fluid, full width layouts.
29
+
30
+ .container-fluid {
31
+ .container-fixed();
8
32
  }
9
33
 
10
- // mobile first defaults
34
+
35
+ // Row
36
+ //
37
+ // Rows contain and clear the floats of your columns.
38
+
11
39
  .row {
12
40
  .make-row();
13
41
  }
14
42
 
43
+
44
+ // Columns
45
+ //
15
46
  // Common styles for small and large grid columns
47
+
16
48
  .make-grid-columns();
17
49
 
18
50
 
19
51
  // Extra small grid
20
52
  //
21
- // Grid classes for extra small devices like smartphones. No offset, push, or
22
- // pull classes are present here due to the size of the target.
23
- //
24
- // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
25
- // it's full-width.
53
+ // Columns, offsets, pushes, and pulls for extra small devices like
54
+ // smartphones.
26
55
 
27
56
  .make-grid-columns-float(xs);
28
57
  .make-grid(@grid-columns, xs, width);
@@ -35,15 +64,8 @@
35
64
  //
36
65
  // Columns, offsets, pushes, and pulls for the small device range, from phones
37
66
  // to tablets.
38
- //
39
- // Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
40
- // it's full-width.
41
67
 
42
68
  @media (min-width: @screen-sm-min) {
43
- .container {
44
- width: @container-sm;
45
- }
46
-
47
69
  .make-grid-columns-float(sm);
48
70
  .make-grid(@grid-columns, sm, width);
49
71
  .make-grid(@grid-columns, sm, pull);
@@ -55,15 +77,8 @@
55
77
  // Medium grid
56
78
  //
57
79
  // Columns, offsets, pushes, and pulls for the desktop device range.
58
- //
59
- // Note that `.col-md-12` doesn't get floated on purpose--there's no need since
60
- // it's full-width.
61
80
 
62
81
  @media (min-width: @screen-md-min) {
63
- .container {
64
- width: @container-md;
65
- }
66
-
67
82
  .make-grid-columns-float(md);
68
83
  .make-grid(@grid-columns, md, width);
69
84
  .make-grid(@grid-columns, md, pull);
@@ -75,19 +90,11 @@
75
90
  // Large grid
76
91
  //
77
92
  // Columns, offsets, pushes, and pulls for the large desktop device range.
78
- //
79
- // Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
80
- // it's full-width.
81
93
 
82
94
  @media (min-width: @screen-lg-min) {
83
- .container {
84
- width: @container-lg;
85
- }
86
-
87
95
  .make-grid-columns-float(lg);
88
96
  .make-grid(@grid-columns, lg, width);
89
97
  .make-grid(@grid-columns, lg, pull);
90
98
  .make-grid(@grid-columns, lg, push);
91
99
  .make-grid(@grid-columns, lg, offset);
92
100
  }
93
-
@@ -10,13 +10,18 @@
10
10
  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
11
11
 
12
12
  // Undo padding and float of grid classes
13
- &.col {
13
+ &[class*="col-"] {
14
14
  float: none;
15
15
  padding-left: 0;
16
16
  padding-right: 0;
17
17
  }
18
18
 
19
19
  .form-control {
20
+ // IE9 fubars the placeholder attribute in text inputs and the arrows on
21
+ // select elements in input groups. To fix it, we float the input. Details:
22
+ // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
23
+ float: left;
24
+
20
25
  width: 100%;
21
26
  margin-bottom: 0;
22
27
  }
@@ -90,8 +95,10 @@
90
95
  .input-group .form-control:first-child,
91
96
  .input-group-addon:first-child,
92
97
  .input-group-btn:first-child > .btn,
98
+ .input-group-btn:first-child > .btn-group > .btn,
93
99
  .input-group-btn:first-child > .dropdown-toggle,
94
- .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
100
+ .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
101
+ .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
95
102
  .border-right-radius(0);
96
103
  }
97
104
  .input-group-addon:first-child {
@@ -100,8 +107,10 @@
100
107
  .input-group .form-control:last-child,
101
108
  .input-group-addon:last-child,
102
109
  .input-group-btn:last-child > .btn,
110
+ .input-group-btn:last-child > .btn-group > .btn,
103
111
  .input-group-btn:last-child > .dropdown-toggle,
104
- .input-group-btn:first-child > .btn:not(:first-child) {
112
+ .input-group-btn:first-child > .btn:not(:first-child),
113
+ .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
105
114
  .border-left-radius(0);
106
115
  }
107
116
  .input-group-addon:last-child {
@@ -112,25 +121,37 @@
112
121
  // -------------------------
113
122
  .input-group-btn {
114
123
  position: relative;
124
+ // Jankily prevent input button groups from wrapping with `white-space` and
125
+ // `font-size` in combination with `inline-block` on buttons.
126
+ font-size: 0;
115
127
  white-space: nowrap;
116
128
 
117
- // Negative margin to only have a 1px border between the two
118
- &:first-child > .btn {
119
- margin-right: -1px;
129
+ // Negative margin for spacing, position for bringing hovered/focused/actived
130
+ // element above the siblings.
131
+ > .btn {
132
+ position: relative;
133
+ + .btn {
134
+ margin-left: -1px;
135
+ }
136
+ // Bring the "active" button to the front
137
+ &:hover,
138
+ &:focus,
139
+ &:active {
140
+ z-index: 2;
141
+ }
120
142
  }
121
- &:last-child > .btn {
122
- margin-left: -1px;
123
- }
124
- }
125
- .input-group-btn > .btn {
126
- position: relative;
127
- // Jankily prevent input button groups from wrapping
128
- + .btn {
129
- margin-left: -4px;
143
+
144
+ // Negative margin to only have a 1px border between the two
145
+ &:first-child {
146
+ > .btn,
147
+ > .btn-group {
148
+ margin-right: -1px;
149
+ }
130
150
  }
131
- // Bring the "active" button to the front
132
- &:hover,
133
- &:active {
134
- z-index: 2;
151
+ &:last-child {
152
+ > .btn,
153
+ > .btn-group {
154
+ margin-left: -1px;
155
+ }
135
156
  }
136
157
  }
@@ -6,24 +6,27 @@
6
6
  .jumbotron {
7
7
  padding: @jumbotron-padding;
8
8
  margin-bottom: @jumbotron-padding;
9
- font-size: @jumbotron-font-size;
10
- font-weight: 200;
11
- line-height: (@line-height-base * 1.5);
12
9
  color: @jumbotron-color;
13
10
  background-color: @jumbotron-bg;
14
11
 
15
- h1 {
16
- line-height: 1;
12
+ h1,
13
+ .h1 {
17
14
  color: @jumbotron-heading-color;
18
15
  }
19
16
  p {
20
- line-height: 1.4;
17
+ margin-bottom: (@jumbotron-padding / 2);
18
+ font-size: @jumbotron-font-size;
19
+ font-weight: 200;
21
20
  }
22
21
 
23
22
  .container & {
24
23
  border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
25
24
  }
26
25
 
26
+ .container {
27
+ max-width: 100%;
28
+ }
29
+
27
30
  @media screen and (min-width: @screen-sm-min) {
28
31
  padding-top: (@jumbotron-padding * 1.6);
29
32
  padding-bottom: (@jumbotron-padding * 1.6);
@@ -33,7 +36,8 @@
33
36
  padding-right: (@jumbotron-padding * 2);
34
37
  }
35
38
 
36
- h1 {
39
+ h1,
40
+ .h1 {
37
41
  font-size: (@font-size-base * 4.5);
38
42
  }
39
43
  }
@@ -28,6 +28,12 @@
28
28
  &:empty {
29
29
  display: none;
30
30
  }
31
+
32
+ // Quick fix for labels in buttons
33
+ .btn & {
34
+ position: relative;
35
+ top: -1px;
36
+ }
31
37
  }
32
38
 
33
39
  // Colors
@@ -2,17 +2,21 @@
2
2
  // List groups
3
3
  // --------------------------------------------------
4
4
 
5
+
5
6
  // Base class
6
7
  //
7
8
  // Easily usable on <ul>, <ol>, or <div>.
9
+
8
10
  .list-group {
9
11
  // No need to set list-style: none; since .list-group-item is block level
10
12
  margin-bottom: 20px;
11
13
  padding-left: 0; // reset padding because ul and ol
12
14
  }
13
15
 
16
+
14
17
  // Individual list items
15
- // -------------------------
18
+ //
19
+ // Use on `li`s or `div`s within the `.list-group` parent.
16
20
 
17
21
  .list-group-item {
18
22
  position: relative;
@@ -41,7 +45,12 @@
41
45
  }
42
46
  }
43
47
 
48
+
44
49
  // Linked list items
50
+ //
51
+ // Use anchor elements instead of `li`s or `div`s to create linked list items.
52
+ // Includes an extra `.active` modifier class for showing selected items.
53
+
45
54
  a.list-group-item {
46
55
  color: @list-group-link-color;
47
56
 
@@ -70,13 +79,26 @@ a.list-group-item {
70
79
  color: inherit;
71
80
  }
72
81
  .list-group-item-text {
73
- color: lighten(@list-group-active-bg, 40%);
82
+ color: @list-group-active-text-color;
74
83
  }
75
84
  }
76
85
  }
77
86
 
87
+
88
+ // Contextual variants
89
+ //
90
+ // Add modifier classes to change text and background color on individual items.
91
+ // Organizationally, this must come after the `:hover` states.
92
+
93
+ .list-group-item-variant(success; @state-success-bg; @state-success-text);
94
+ .list-group-item-variant(info; @state-info-bg; @state-info-text);
95
+ .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
96
+ .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
97
+
98
+
78
99
  // Custom content options
79
- // -------------------------
100
+ //
101
+ // Extra classes for creating well-formatted content within `.list-group-item`s.
80
102
 
81
103
  .list-group-item-heading {
82
104
  margin-top: 0;
@@ -19,8 +19,8 @@
19
19
  .clearfix() {
20
20
  &:before,
21
21
  &:after {
22
- content: " "; /* 1 */
23
- display: table; /* 2 */
22
+ content: " "; // 1
23
+ display: table; // 2
24
24
  }
25
25
  &:after {
26
26
  clear: both;
@@ -30,7 +30,7 @@
30
30
  // WebKit-style focus
31
31
  .tab-focus() {
32
32
  // Default
33
- outline: thin dotted #333;
33
+ outline: thin dotted;
34
34
  // WebKit
35
35
  outline: 5px auto -webkit-focus-ring-color;
36
36
  outline-offset: -2px;
@@ -55,7 +55,8 @@
55
55
  // Placeholder text
56
56
  .placeholder(@color: @input-color-placeholder) {
57
57
  &:-moz-placeholder { color: @color; } // Firefox 4-18
58
- &::-moz-placeholder { color: @color; } // Firefox 19+
58
+ &::-moz-placeholder { color: @color; // Firefox 19+
59
+ opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
59
60
  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
60
61
  &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
61
62
  }
@@ -87,11 +88,7 @@
87
88
  }
88
89
  // New mixin to use as of v3.0.1
89
90
  .text-hide() {
90
- font: ~"0/0" a;
91
- color: transparent;
92
- text-shadow: none;
93
- background-color: transparent;
94
- border: 0;
91
+ .hide-text();
95
92
  }
96
93
 
97
94
 
@@ -118,6 +115,10 @@
118
115
  }
119
116
 
120
117
  // Drop shadows
118
+ //
119
+ // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
120
+ // supported browsers that have box shadow capabilities now support the
121
+ // standard `box-shadow` property.
121
122
  .box-shadow(@shadow) {
122
123
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
123
124
  box-shadow: @shadow;
@@ -150,17 +151,17 @@
150
151
  // Transformations
151
152
  .rotate(@degrees) {
152
153
  -webkit-transform: rotate(@degrees);
153
- -ms-transform: rotate(@degrees); // IE9+
154
+ -ms-transform: rotate(@degrees); // IE9 only
154
155
  transform: rotate(@degrees);
155
156
  }
156
- .scale(@ratio) {
157
- -webkit-transform: scale(@ratio);
158
- -ms-transform: scale(@ratio); // IE9+
159
- transform: scale(@ratio);
157
+ .scale(@ratio; @ratio-y...) {
158
+ -webkit-transform: scale(@ratio, @ratio-y);
159
+ -ms-transform: scale(@ratio, @ratio-y); // IE9 only
160
+ transform: scale(@ratio, @ratio-y);
160
161
  }
161
162
  .translate(@x; @y) {
162
163
  -webkit-transform: translate(@x, @y);
163
- -ms-transform: translate(@x, @y); // IE9+
164
+ -ms-transform: translate(@x, @y); // IE9 only
164
165
  transform: translate(@x, @y);
165
166
  }
166
167
  .skew(@x; @y) {
@@ -175,12 +176,12 @@
175
176
 
176
177
  .rotateX(@degrees) {
177
178
  -webkit-transform: rotateX(@degrees);
178
- -ms-transform: rotateX(@degrees); // IE9+
179
+ -ms-transform: rotateX(@degrees); // IE9 only
179
180
  transform: rotateX(@degrees);
180
181
  }
181
182
  .rotateY(@degrees) {
182
183
  -webkit-transform: rotateY(@degrees);
183
- -ms-transform: rotateY(@degrees); // IE9+
184
+ -ms-transform: rotateY(@degrees); // IE9 only
184
185
  transform: rotateY(@degrees);
185
186
  }
186
187
  .perspective(@perspective) {
@@ -196,6 +197,7 @@
196
197
  .transform-origin(@origin) {
197
198
  -webkit-transform-origin: @origin;
198
199
  -moz-transform-origin: @origin;
200
+ -ms-transform-origin: @origin; // IE9 only
199
201
  transform-origin: @origin;
200
202
  }
201
203
 
@@ -204,6 +206,30 @@
204
206
  -webkit-animation: @animation;
205
207
  animation: @animation;
206
208
  }
209
+ .animation-name(@name) {
210
+ -webkit-animation-name: @name;
211
+ animation-name: @name;
212
+ }
213
+ .animation-duration(@duration) {
214
+ -webkit-animation-duration: @duration;
215
+ animation-duration: @duration;
216
+ }
217
+ .animation-timing-function(@timing-function) {
218
+ -webkit-animation-timing-function: @timing-function;
219
+ animation-timing-function: @timing-function;
220
+ }
221
+ .animation-delay(@delay) {
222
+ -webkit-animation-delay: @delay;
223
+ animation-delay: @delay;
224
+ }
225
+ .animation-iteration-count(@iteration-count) {
226
+ -webkit-animation-iteration-count: @iteration-count;
227
+ animation-iteration-count: @iteration-count;
228
+ }
229
+ .animation-direction(@direction) {
230
+ -webkit-animation-direction: @direction;
231
+ animation-direction: @direction;
232
+ }
207
233
 
208
234
  // Backface visibility
209
235
  // Prevent browsers from flickering when using CSS 3D transforms.
@@ -277,10 +303,8 @@
277
303
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
278
304
  // Color stops are not available in IE9 and below.
279
305
  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
280
- background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
281
- background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
282
- background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
283
- background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
306
+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
307
+ background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
284
308
  background-repeat: repeat-x;
285
309
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
286
310
  }
@@ -290,47 +314,36 @@
290
314
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
291
315
  // Color stops are not available in IE9 and below.
292
316
  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
293
- background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
294
- background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+
295
- background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
296
- background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
317
+ background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
318
+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
297
319
  background-repeat: repeat-x;
298
320
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
299
321
  }
300
322
 
301
323
  .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
302
324
  background-repeat: repeat-x;
303
- background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
304
- background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
305
- background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
325
+ background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
326
+ background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
306
327
  }
307
328
  .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
308
- background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
309
329
  background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
310
- background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
311
330
  background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
312
331
  background-repeat: no-repeat;
313
332
  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
314
333
  }
315
334
  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
316
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
317
335
  background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
318
- background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
319
336
  background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
320
337
  background-repeat: no-repeat;
321
338
  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
322
339
  }
323
340
  .radial(@inner-color: #555; @outer-color: #333) {
324
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
325
341
  background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
326
- background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
327
342
  background-image: radial-gradient(circle, @inner-color, @outer-color);
328
343
  background-repeat: no-repeat;
329
344
  }
330
345
  .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
331
- background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent));
332
346
  background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
333
- background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
334
347
  background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
335
348
  }
336
349
  }
@@ -369,7 +382,7 @@
369
382
  //
370
383
  // Keep images from scaling beyond the width of their parents.
371
384
 
372
- .img-responsive(@display: block;) {
385
+ .img-responsive(@display: block) {
373
386
  display: @display;
374
387
  max-width: 100%; // Part 1: Set a maximum relative to the parent
375
388
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
@@ -391,7 +404,7 @@
391
404
 
392
405
  // Panels
393
406
  // -------------------------
394
- .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
407
+ .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
395
408
  border-color: @border;
396
409
 
397
410
  & > .panel-heading {
@@ -402,9 +415,6 @@
402
415
  + .panel-collapse .panel-body {
403
416
  border-top-color: @border;
404
417
  }
405
- & > .dropdown .caret {
406
- border-color: @heading-text-color transparent;
407
- }
408
418
  }
409
419
  & > .panel-footer {
410
420
  + .panel-collapse .panel-body {
@@ -430,7 +440,7 @@
430
440
 
431
441
  // Tables
432
442
  // -------------------------
433
- .table-row-variant(@state; @background; @border) {
443
+ .table-row-variant(@state; @background) {
434
444
  // Exact selectors below required to override `.table-striped` and prevent
435
445
  // inheritance to nested tables.
436
446
  .table > thead > tr,
@@ -456,6 +466,34 @@
456
466
  }
457
467
  }
458
468
 
469
+ // List Groups
470
+ // -------------------------
471
+ .list-group-item-variant(@state; @background; @color) {
472
+ .list-group-item-@{state} {
473
+ color: @color;
474
+ background-color: @background;
475
+
476
+ a& {
477
+ color: @color;
478
+
479
+ .list-group-item-heading { color: inherit; }
480
+
481
+ &:hover,
482
+ &:focus {
483
+ color: @color;
484
+ background-color: darken(@background, 5%);
485
+ }
486
+ &.active,
487
+ &.active:hover,
488
+ &.active:focus {
489
+ color: #fff;
490
+ background-color: @color;
491
+ border-color: @color;
492
+ }
493
+ }
494
+ }
495
+ }
496
+
459
497
  // Button variants
460
498
  // -------------------------
461
499
  // Easily pump out default styles, as well as :hover, :focus, :active,
@@ -491,6 +529,11 @@
491
529
  border-color: @border;
492
530
  }
493
531
  }
532
+
533
+ .badge {
534
+ color: @background;
535
+ background-color: @color;
536
+ }
494
537
  }
495
538
 
496
539
  // Button sizes
@@ -538,6 +581,24 @@
538
581
  }
539
582
  }
540
583
 
584
+ // Contextual backgrounds
585
+ // -------------------------
586
+ .bg-variant(@color) {
587
+ background-color: @color;
588
+ a&:hover {
589
+ background-color: darken(@color, 10%);
590
+ }
591
+ }
592
+
593
+ // Typography
594
+ // -------------------------
595
+ .text-emphasis-variant(@color) {
596
+ color: @color;
597
+ a&:hover {
598
+ color: darken(@color, 10%);
599
+ }
600
+ }
601
+
541
602
  // Navbar vertical align
542
603
  // -------------------------
543
604
  // Vertically center elements in the navbar.
@@ -561,9 +622,10 @@
561
622
  // More easily include all the states for responsive-utilities.less.
562
623
  .responsive-visibility() {
563
624
  display: block !important;
564
- tr& { display: table-row !important; }
625
+ table& { display: table; }
626
+ tr& { display: table-row !important; }
565
627
  th&,
566
- td& { display: table-cell !important; }
628
+ td& { display: table-cell !important; }
567
629
  }
568
630
 
569
631
  .responsive-invisibility() {
@@ -583,14 +645,14 @@
583
645
  margin-left: auto;
584
646
  padding-left: (@grid-gutter-width / 2);
585
647
  padding-right: (@grid-gutter-width / 2);
586
- .clearfix();
648
+ &:extend(.clearfix all);
587
649
  }
588
650
 
589
651
  // Creates a wrapper for a series of columns
590
652
  .make-row(@gutter: @grid-gutter-width) {
591
653
  margin-left: (@gutter / -2);
592
654
  margin-right: (@gutter / -2);
593
- .clearfix();
655
+ &:extend(.clearfix all);
594
656
  }
595
657
 
596
658
  // Generate the extra small columns
@@ -598,30 +660,39 @@
598
660
  position: relative;
599
661
  float: left;
600
662
  width: percentage((@columns / @grid-columns));
601
- // Prevent columns from collapsing when empty
602
663
  min-height: 1px;
603
- // Inner gutter via padding
604
664
  padding-left: (@gutter / 2);
605
665
  padding-right: (@gutter / 2);
606
666
  }
667
+ .make-xs-column-offset(@columns) {
668
+ @media (min-width: @screen-xs-min) {
669
+ margin-left: percentage((@columns / @grid-columns));
670
+ }
671
+ }
672
+ .make-xs-column-push(@columns) {
673
+ @media (min-width: @screen-xs-min) {
674
+ left: percentage((@columns / @grid-columns));
675
+ }
676
+ }
677
+ .make-xs-column-pull(@columns) {
678
+ @media (min-width: @screen-xs-min) {
679
+ right: percentage((@columns / @grid-columns));
680
+ }
681
+ }
682
+
607
683
 
608
684
  // Generate the small columns
609
685
  .make-sm-column(@columns; @gutter: @grid-gutter-width) {
610
686
  position: relative;
611
- // Prevent columns from collapsing when empty
612
687
  min-height: 1px;
613
- // Inner gutter via padding
614
688
  padding-left: (@gutter / 2);
615
689
  padding-right: (@gutter / 2);
616
690
 
617
- // Calculate width based on number of columns available
618
691
  @media (min-width: @screen-sm-min) {
619
692
  float: left;
620
693
  width: percentage((@columns / @grid-columns));
621
694
  }
622
695
  }
623
-
624
- // Generate the small column offsets
625
696
  .make-sm-column-offset(@columns) {
626
697
  @media (min-width: @screen-sm-min) {
627
698
  margin-left: percentage((@columns / @grid-columns));
@@ -638,30 +709,26 @@
638
709
  }
639
710
  }
640
711
 
712
+
641
713
  // Generate the medium columns
642
714
  .make-md-column(@columns; @gutter: @grid-gutter-width) {
643
715
  position: relative;
644
- // Prevent columns from collapsing when empty
645
716
  min-height: 1px;
646
- // Inner gutter via padding
647
717
  padding-left: (@gutter / 2);
648
718
  padding-right: (@gutter / 2);
649
719
 
650
- // Calculate width based on number of columns available
651
720
  @media (min-width: @screen-md-min) {
652
721
  float: left;
653
722
  width: percentage((@columns / @grid-columns));
654
723
  }
655
724
  }
656
-
657
- // Generate the medium column offsets
658
725
  .make-md-column-offset(@columns) {
659
726
  @media (min-width: @screen-md-min) {
660
727
  margin-left: percentage((@columns / @grid-columns));
661
728
  }
662
729
  }
663
730
  .make-md-column-push(@columns) {
664
- @media (min-width: @screen-md) {
731
+ @media (min-width: @screen-md-min) {
665
732
  left: percentage((@columns / @grid-columns));
666
733
  }
667
734
  }
@@ -671,23 +738,19 @@
671
738
  }
672
739
  }
673
740
 
741
+
674
742
  // Generate the large columns
675
743
  .make-lg-column(@columns; @gutter: @grid-gutter-width) {
676
744
  position: relative;
677
- // Prevent columns from collapsing when empty
678
745
  min-height: 1px;
679
- // Inner gutter via padding
680
746
  padding-left: (@gutter / 2);
681
747
  padding-right: (@gutter / 2);
682
748
 
683
- // Calculate width based on number of columns available
684
749
  @media (min-width: @screen-lg-min) {
685
750
  float: left;
686
751
  width: percentage((@columns / @grid-columns));
687
752
  }
688
753
  }
689
-
690
- // Generate the large column offsets
691
754
  .make-lg-column-offset(@columns) {
692
755
  @media (min-width: @screen-lg-min) {
693
756
  margin-left: percentage((@columns / @grid-columns));
@@ -714,11 +777,11 @@
714
777
  // Common styles for all sizes of grid columns, widths 1-12
715
778
  .col(@index) when (@index = 1) { // initial
716
779
  @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
717
- .col(@index + 1, @item);
780
+ .col((@index + 1), @item);
718
781
  }
719
782
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
720
783
  @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
721
- .col(@index + 1, ~"@{list}, @{item}");
784
+ .col((@index + 1), ~"@{list}, @{item}");
722
785
  }
723
786
  .col(@index, @list) when (@index > @grid-columns) { // terminal
724
787
  @{list} {
@@ -736,13 +799,13 @@
736
799
  .make-grid-columns-float(@class) {
737
800
  .col(@index) when (@index = 1) { // initial
738
801
  @item: ~".col-@{class}-@{index}";
739
- .col(@index + 1, @item);
802
+ .col((@index + 1), @item);
740
803
  }
741
- .col(@index, @list) when (@index < @grid-columns) { // general
804
+ .col(@index, @list) when (@index =< @grid-columns) { // general
742
805
  @item: ~".col-@{class}-@{index}";
743
- .col(@index + 1, ~"@{list}, @{item}");
806
+ .col((@index + 1), ~"@{list}, @{item}");
744
807
  }
745
- .col(@index, @list) when (@index = @grid-columns) { // terminal
808
+ .col(@index, @list) when (@index > @grid-columns) { // terminal
746
809
  @{list} {
747
810
  float: left;
748
811
  }
@@ -775,7 +838,7 @@
775
838
  .make-grid(@index, @class, @type) when (@index >= 0) {
776
839
  .calc-grid(@index, @class, @type);
777
840
  // next iteration
778
- .make-grid(@index - 1, @class, @type);
841
+ .make-grid((@index - 1), @class, @type);
779
842
  }
780
843
 
781
844
 
@@ -810,6 +873,10 @@
810
873
  border-color: @border-color;
811
874
  background-color: @background-color;
812
875
  }
876
+ // Optional feedback icon
877
+ .form-control-feedback {
878
+ color: @text-color;
879
+ }
813
880
  }
814
881
 
815
882
  // Form control focus state
@@ -852,7 +919,8 @@
852
919
  line-height: @input-height;
853
920
  }
854
921
 
855
- textarea& {
922
+ textarea&,
923
+ select[multiple]& {
856
924
  height: auto;
857
925
  }
858
926
  }