bootstrap-generators 3.0.2.2 → 3.1.0

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