bootstrap-generators 2.3.2 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (179) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +12 -2
  3. data/{LICENSE.txt → MIT-LICENSE} +1 -3
  4. data/README.md +19 -64
  5. data/Rakefile +24 -22
  6. data/bootstrap-generators.gemspec +3 -1
  7. data/lib/bootstrap-generators.rb +12 -1
  8. data/lib/bootstrap/generators/version.rb +1 -1
  9. data/lib/generators/bootstrap/install/install_generator.rb +9 -24
  10. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +498 -179
  11. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.scss +620 -0
  12. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css → starter.css} +6 -6
  13. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.less → starter.less} +7 -7
  14. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.scss → starter.scss} +7 -8
  15. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +11 -9
  16. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +9 -8
  17. data/lib/generators/bootstrap/install/templates/layouts/starter.html.erb +50 -0
  18. data/lib/generators/bootstrap/install/templates/layouts/{hero.html.haml → starter.html.haml} +0 -0
  19. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/edit.html.erb +3 -3
  20. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/index.html.erb +25 -25
  21. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/new.html.erb +2 -2
  22. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/show.html.erb +5 -5
  23. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/edit.html.haml +3 -3
  24. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/index.html.haml +20 -19
  25. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/new.html.haml +2 -2
  26. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/show.html.haml +5 -5
  27. data/readme-template.md.erb +5 -48
  28. data/test/lib/generators/bootstrap/install_generator_test.rb +3 -33
  29. data/vendor/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  30. data/vendor/assets/fonts/glyphicons-halflings-regular.svg +228 -0
  31. data/vendor/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  32. data/vendor/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  33. data/vendor/assets/javascripts/bootstrap-ie.js +2 -0
  34. data/vendor/assets/javascripts/bootstrap-ie/html5shiv.js +8 -0
  35. data/vendor/assets/javascripts/bootstrap-ie/respond.min.js +6 -0
  36. data/vendor/assets/javascripts/bootstrap.js +12 -13
  37. data/vendor/assets/javascripts/bootstrap/affix.js +126 -0
  38. data/vendor/assets/javascripts/{bootstrap-alert.js → bootstrap/alert.js} +35 -36
  39. data/vendor/assets/javascripts/bootstrap/button.js +109 -0
  40. data/vendor/assets/javascripts/bootstrap/carousel.js +217 -0
  41. data/vendor/assets/javascripts/bootstrap/collapse.js +179 -0
  42. data/vendor/assets/javascripts/bootstrap/dropdown.js +154 -0
  43. data/vendor/assets/javascripts/bootstrap/modal.js +246 -0
  44. data/vendor/assets/javascripts/bootstrap/popover.js +117 -0
  45. data/vendor/assets/javascripts/bootstrap/scrollspy.js +158 -0
  46. data/vendor/assets/javascripts/bootstrap/tab.js +135 -0
  47. data/vendor/assets/javascripts/bootstrap/tooltip.js +386 -0
  48. data/vendor/assets/javascripts/bootstrap/transition.js +56 -0
  49. data/vendor/assets/stylesheets/bootstrap.css +4638 -4000
  50. data/vendor/twitter/bootstrap/less/alerts.less +46 -58
  51. data/vendor/twitter/bootstrap/less/badges.less +51 -0
  52. data/vendor/twitter/bootstrap/less/bootstrap.less +27 -31
  53. data/vendor/twitter/bootstrap/less/breadcrumbs.less +7 -8
  54. data/vendor/twitter/bootstrap/less/button-groups.less +173 -154
  55. data/vendor/twitter/bootstrap/less/buttons.less +97 -165
  56. data/vendor/twitter/bootstrap/less/carousel.less +115 -64
  57. data/vendor/twitter/bootstrap/less/close.less +20 -19
  58. data/vendor/twitter/bootstrap/less/code.less +17 -22
  59. data/vendor/twitter/bootstrap/less/component-animations.less +10 -3
  60. data/vendor/twitter/bootstrap/less/dropdowns.less +92 -147
  61. data/vendor/twitter/bootstrap/less/forms.less +224 -561
  62. data/vendor/twitter/bootstrap/less/glyphicons.less +232 -0
  63. data/vendor/twitter/bootstrap/less/grid.less +336 -11
  64. data/vendor/twitter/bootstrap/less/input-groups.less +127 -0
  65. data/vendor/twitter/bootstrap/less/jumbotron.less +40 -0
  66. data/vendor/twitter/bootstrap/less/labels.less +58 -0
  67. data/vendor/twitter/bootstrap/less/list-group.less +88 -0
  68. data/vendor/twitter/bootstrap/less/media.less +8 -7
  69. data/vendor/twitter/bootstrap/less/mixins.less +487 -466
  70. data/vendor/twitter/bootstrap/less/modals.less +98 -52
  71. data/vendor/twitter/bootstrap/less/navbar.less +507 -383
  72. data/vendor/twitter/bootstrap/less/navs.less +169 -349
  73. data/vendor/twitter/bootstrap/less/normalize.less +396 -0
  74. data/vendor/twitter/bootstrap/less/pager.less +45 -33
  75. data/vendor/twitter/bootstrap/less/pagination.less +65 -105
  76. data/vendor/twitter/bootstrap/less/panels.less +148 -0
  77. data/vendor/twitter/bootstrap/less/popovers.less +51 -51
  78. data/vendor/twitter/bootstrap/less/print.less +100 -0
  79. data/vendor/twitter/bootstrap/less/progress-bars.less +28 -55
  80. data/vendor/twitter/bootstrap/less/responsive-utilities.less +195 -34
  81. data/vendor/twitter/bootstrap/less/scaffolding.less +101 -24
  82. data/vendor/twitter/bootstrap/less/tables.less +170 -178
  83. data/vendor/twitter/bootstrap/less/theme.less +232 -0
  84. data/vendor/twitter/bootstrap/less/thumbnails.less +11 -33
  85. data/vendor/twitter/bootstrap/less/tooltip.less +45 -20
  86. data/vendor/twitter/bootstrap/less/type.less +100 -109
  87. data/vendor/twitter/bootstrap/less/utilities.less +19 -7
  88. data/vendor/twitter/bootstrap/less/variables.less +498 -179
  89. data/vendor/twitter/bootstrap/less/wells.less +7 -7
  90. data/vendor/twitter/bootstrap/sass/_alerts.scss +46 -58
  91. data/vendor/twitter/bootstrap/sass/_badges.scss +51 -0
  92. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +8 -9
  93. data/vendor/twitter/bootstrap/sass/_button-groups.scss +173 -154
  94. data/vendor/twitter/bootstrap/sass/_buttons.scss +97 -165
  95. data/vendor/twitter/bootstrap/sass/_carousel.scss +116 -65
  96. data/vendor/twitter/bootstrap/sass/_close.scss +9 -8
  97. data/vendor/twitter/bootstrap/sass/_code.scss +16 -21
  98. data/vendor/twitter/bootstrap/sass/_component-animations.scss +10 -3
  99. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +94 -148
  100. data/vendor/twitter/bootstrap/sass/_forms.scss +220 -559
  101. data/vendor/twitter/bootstrap/sass/_glyphicons.scss +232 -0
  102. data/vendor/twitter/bootstrap/sass/_grid.scss +336 -11
  103. data/vendor/twitter/bootstrap/sass/_input-groups.scss +127 -0
  104. data/vendor/twitter/bootstrap/sass/_jumbotron.scss +40 -0
  105. data/vendor/twitter/bootstrap/sass/_labels.scss +58 -0
  106. data/vendor/twitter/bootstrap/sass/_list-group.scss +88 -0
  107. data/vendor/twitter/bootstrap/sass/_media.scss +8 -7
  108. data/vendor/twitter/bootstrap/sass/_mixins.scss +465 -433
  109. data/vendor/twitter/bootstrap/sass/_modals.scss +102 -52
  110. data/vendor/twitter/bootstrap/sass/_navbar.scss +511 -383
  111. data/vendor/twitter/bootstrap/sass/_navs.scss +169 -349
  112. data/vendor/twitter/bootstrap/sass/_normalize.scss +396 -0
  113. data/vendor/twitter/bootstrap/sass/_pager.scss +45 -33
  114. data/vendor/twitter/bootstrap/sass/_pagination.scss +65 -105
  115. data/vendor/twitter/bootstrap/sass/_panels.scss +148 -0
  116. data/vendor/twitter/bootstrap/sass/_popovers.scss +51 -51
  117. data/vendor/twitter/bootstrap/sass/_print.scss +100 -0
  118. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +28 -55
  119. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +180 -45
  120. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +101 -24
  121. data/vendor/twitter/bootstrap/sass/_tables.scss +169 -168
  122. data/vendor/twitter/bootstrap/sass/_theme.scss +232 -0
  123. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +11 -33
  124. data/vendor/twitter/bootstrap/sass/_tooltip.scss +45 -20
  125. data/vendor/twitter/bootstrap/sass/_type.scss +101 -110
  126. data/vendor/twitter/bootstrap/sass/_utilities.scss +19 -22
  127. data/vendor/twitter/bootstrap/sass/_variables.scss +498 -179
  128. data/vendor/twitter/bootstrap/sass/_wells.scss +7 -7
  129. data/vendor/twitter/bootstrap/sass/bootstrap.scss +29 -33
  130. metadata +47 -56
  131. data/lib/bootstrap/generators/engine.rb +0 -14
  132. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +0 -301
  133. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css +0 -18
  134. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.less +0 -19
  135. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.scss +0 -19
  136. data/lib/generators/bootstrap/install/templates/config/initializers/simple_form.rb +0 -176
  137. data/lib/generators/bootstrap/install/templates/config/locales/simple_form.en.yml +0 -24
  138. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.erb +0 -13
  139. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.haml +0 -10
  140. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.erb +0 -80
  141. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.haml +0 -94
  142. data/lib/generators/bootstrap/install/templates/layouts/hero.html.erb +0 -53
  143. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  144. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  145. data/vendor/assets/javascripts/bootstrap-affix.js +0 -117
  146. data/vendor/assets/javascripts/bootstrap-button.js +0 -105
  147. data/vendor/assets/javascripts/bootstrap-carousel.js +0 -207
  148. data/vendor/assets/javascripts/bootstrap-collapse.js +0 -167
  149. data/vendor/assets/javascripts/bootstrap-dropdown.js +0 -169
  150. data/vendor/assets/javascripts/bootstrap-modal.js +0 -247
  151. data/vendor/assets/javascripts/bootstrap-popover.js +0 -114
  152. data/vendor/assets/javascripts/bootstrap-scrollspy.js +0 -162
  153. data/vendor/assets/javascripts/bootstrap-tab.js +0 -144
  154. data/vendor/assets/javascripts/bootstrap-tooltip.js +0 -361
  155. data/vendor/assets/javascripts/bootstrap-transition.js +0 -60
  156. data/vendor/assets/javascripts/bootstrap-typeahead.js +0 -335
  157. data/vendor/assets/stylesheets/bootstrap-responsive.css +0 -1109
  158. data/vendor/twitter/bootstrap/less/accordion.less +0 -34
  159. data/vendor/twitter/bootstrap/less/hero-unit.less +0 -25
  160. data/vendor/twitter/bootstrap/less/labels-badges.less +0 -84
  161. data/vendor/twitter/bootstrap/less/layouts.less +0 -16
  162. data/vendor/twitter/bootstrap/less/reset.less +0 -216
  163. data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +0 -28
  164. data/vendor/twitter/bootstrap/less/responsive-767px-max.less +0 -193
  165. data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +0 -19
  166. data/vendor/twitter/bootstrap/less/responsive-navbar.less +0 -189
  167. data/vendor/twitter/bootstrap/less/responsive.less +0 -48
  168. data/vendor/twitter/bootstrap/less/sprites.less +0 -197
  169. data/vendor/twitter/bootstrap/sass/_accordion.scss +0 -34
  170. data/vendor/twitter/bootstrap/sass/_hero-unit.scss +0 -25
  171. data/vendor/twitter/bootstrap/sass/_labels-badges.scss +0 -83
  172. data/vendor/twitter/bootstrap/sass/_layouts.scss +0 -16
  173. data/vendor/twitter/bootstrap/sass/_reset.scss +0 -216
  174. data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +0 -28
  175. data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +0 -193
  176. data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +0 -19
  177. data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +0 -189
  178. data/vendor/twitter/bootstrap/sass/_sprites.scss +0 -197
  179. data/vendor/twitter/bootstrap/sass/responsive.scss +0 -48
@@ -0,0 +1,127 @@
1
+ //
2
+ // Input groups
3
+ // --------------------------------------------------
4
+
5
+ // Base styles
6
+ // -------------------------
7
+ .input-group {
8
+ position: relative; // For dropdowns
9
+ display: table;
10
+ border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
11
+
12
+ // Undo padding and float of grid classes
13
+ &.col {
14
+ float: none;
15
+ padding-left: 0;
16
+ padding-right: 0;
17
+ }
18
+
19
+ .form-control {
20
+ width: 100%;
21
+ margin-bottom: 0;
22
+ }
23
+ }
24
+
25
+ // Sizing options
26
+ //
27
+ // Remix the default form control sizing classes into new ones for easier
28
+ // manipulation.
29
+
30
+ .input-group-lg > .form-control,
31
+ .input-group-lg > .input-group-addon,
32
+ .input-group-lg > .input-group-btn > .btn { .input-lg(); }
33
+ .input-group-sm > .form-control,
34
+ .input-group-sm > .input-group-addon,
35
+ .input-group-sm > .input-group-btn > .btn { .input-sm(); }
36
+
37
+
38
+ // Display as table-cell
39
+ // -------------------------
40
+ .input-group-addon,
41
+ .input-group-btn,
42
+ .input-group .form-control {
43
+ display: table-cell;
44
+
45
+ &:not(:first-child):not(:last-child) {
46
+ border-radius: 0;
47
+ }
48
+ }
49
+ // Addon and addon wrapper for buttons
50
+ .input-group-addon,
51
+ .input-group-btn {
52
+ width: 1%;
53
+ white-space: nowrap;
54
+ vertical-align: middle; // Match the inputs
55
+ }
56
+
57
+ // Text input groups
58
+ // -------------------------
59
+ .input-group-addon {
60
+ padding: @padding-base-vertical @padding-base-horizontal;
61
+ font-size: @font-size-base;
62
+ font-weight: normal;
63
+ line-height: 1;
64
+ text-align: center;
65
+ background-color: @input-group-addon-bg;
66
+ border: 1px solid @input-group-addon-border-color;
67
+ border-radius: @border-radius-base;
68
+
69
+ // Sizing
70
+ &.input-sm {
71
+ padding: @padding-small-vertical @padding-small-horizontal;
72
+ font-size: @font-size-small;
73
+ border-radius: @border-radius-small;
74
+ }
75
+ &.input-lg {
76
+ padding: @padding-large-vertical @padding-large-horizontal;
77
+ font-size: @font-size-large;
78
+ border-radius: @border-radius-large;
79
+ }
80
+
81
+ // Nuke default margins from checkboxes and radios to vertically center within.
82
+ input[type="radio"],
83
+ input[type="checkbox"] {
84
+ margin-top: 0;
85
+ }
86
+ }
87
+
88
+ // Reset rounded corners
89
+ .input-group .form-control:first-child,
90
+ .input-group-addon:first-child,
91
+ .input-group-btn:first-child > .btn,
92
+ .input-group-btn:first-child > .dropdown-toggle,
93
+ .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
94
+ .border-right-radius(0);
95
+ }
96
+ .input-group-addon:first-child {
97
+ border-right: 0;
98
+ }
99
+ .input-group .form-control:last-child,
100
+ .input-group-addon:last-child,
101
+ .input-group-btn:last-child > .btn,
102
+ .input-group-btn:last-child > .dropdown-toggle,
103
+ .input-group-btn:first-child > .btn:not(:first-child) {
104
+ .border-left-radius(0);
105
+ }
106
+ .input-group-addon:last-child {
107
+ border-left: 0;
108
+ }
109
+
110
+ // Button input groups
111
+ // -------------------------
112
+ .input-group-btn {
113
+ position: relative;
114
+ white-space: nowrap;
115
+ }
116
+ .input-group-btn > .btn {
117
+ position: relative;
118
+ // Jankily prevent input button groups from wrapping
119
+ + .btn {
120
+ margin-left: -4px;
121
+ }
122
+ // Bring the "active" button to the front
123
+ &:hover,
124
+ &:active {
125
+ z-index: 2;
126
+ }
127
+ }
@@ -0,0 +1,40 @@
1
+ //
2
+ // Jumbotron
3
+ // --------------------------------------------------
4
+
5
+
6
+ .jumbotron {
7
+ padding: @jumbotron-padding;
8
+ margin-bottom: @jumbotron-padding;
9
+ font-size: (@font-size-base * 1.5);
10
+ font-weight: 200;
11
+ line-height: (@line-height-base * 1.5);
12
+ color: @jumbotron-color;
13
+ background-color: @jumbotron-bg;
14
+
15
+ h1 {
16
+ line-height: 1;
17
+ color: @jumbotron-heading-color;
18
+ }
19
+ p {
20
+ line-height: 1.4;
21
+ }
22
+
23
+ .container & {
24
+ border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
25
+ }
26
+
27
+ @media screen and (min-width: @screen-tablet) {
28
+ padding-top: (@jumbotron-padding * 1.6);
29
+ padding-bottom: (@jumbotron-padding * 1.6);
30
+
31
+ .container & {
32
+ padding-left: (@jumbotron-padding * 2);
33
+ padding-right: (@jumbotron-padding * 2);
34
+ }
35
+
36
+ h1 {
37
+ font-size: (@font-size-base * 4.5);
38
+ }
39
+ }
40
+ }
@@ -0,0 +1,58 @@
1
+ //
2
+ // Labels
3
+ // --------------------------------------------------
4
+
5
+ .label {
6
+ display: inline;
7
+ padding: .2em .6em .3em;
8
+ font-size: 75%;
9
+ font-weight: bold;
10
+ line-height: 1;
11
+ color: @label-color;
12
+ text-align: center;
13
+ white-space: nowrap;
14
+ vertical-align: baseline;
15
+ border-radius: .25em;
16
+
17
+ // Add hover effects, but only for links
18
+ &[href] {
19
+ &:hover,
20
+ &:focus {
21
+ color: @label-link-hover-color;
22
+ text-decoration: none;
23
+ cursor: pointer;
24
+ }
25
+ }
26
+
27
+ // Empty labels collapse automatically (not available in IE8)
28
+ &:empty {
29
+ display: none;
30
+ }
31
+ }
32
+
33
+ // Colors
34
+ // Contextual variations (linked labels get darker on :hover)
35
+
36
+ .label-default {
37
+ .label-variant(@label-default-bg);
38
+ }
39
+
40
+ .label-primary {
41
+ .label-variant(@label-primary-bg);
42
+ }
43
+
44
+ .label-success {
45
+ .label-variant(@label-success-bg);
46
+ }
47
+
48
+ .label-info {
49
+ .label-variant(@label-info-bg);
50
+ }
51
+
52
+ .label-warning {
53
+ .label-variant(@label-warning-bg);
54
+ }
55
+
56
+ .label-danger {
57
+ .label-variant(@label-danger-bg);
58
+ }
@@ -0,0 +1,88 @@
1
+ //
2
+ // List groups
3
+ // --------------------------------------------------
4
+
5
+ // Base class
6
+ //
7
+ // Easily usable on <ul>, <ol>, or <div>.
8
+ .list-group {
9
+ // No need to set list-style: none; since .list-group-item is block level
10
+ margin-bottom: 20px;
11
+ padding-left: 0; // reset padding because ul and ol
12
+ }
13
+
14
+ // Individual list items
15
+ // -------------------------
16
+
17
+ .list-group-item {
18
+ position: relative;
19
+ display: block;
20
+ padding: 10px 15px;
21
+ // Place the border on the list items and negative margin up for better styling
22
+ margin-bottom: -1px;
23
+ background-color: @list-group-bg;
24
+ border: 1px solid @list-group-border;
25
+
26
+ // Round the first and last items
27
+ &:first-child {
28
+ .border-top-radius(@list-group-border-radius);
29
+ }
30
+ &:last-child {
31
+ margin-bottom: 0;
32
+ .border-bottom-radius(@list-group-border-radius);
33
+ }
34
+
35
+ // Align badges within list items
36
+ > .badge {
37
+ float: right;
38
+ }
39
+ > .badge + .badge {
40
+ margin-right: 5px;
41
+ }
42
+
43
+ // Linked list items
44
+ a& {
45
+ color: @list-group-link-color;
46
+
47
+ .list-group-item-heading {
48
+ color: @list-group-link-heading-color;
49
+ }
50
+
51
+ // Hover state
52
+ &:hover,
53
+ &:focus {
54
+ text-decoration: none;
55
+ background-color: @list-group-hover-bg;
56
+ }
57
+ }
58
+
59
+ // Active class on item itself, not parent
60
+ &.active,
61
+ &.active:hover,
62
+ &.active:focus {
63
+ z-index: 2; // Place active items above their siblings for proper border styling
64
+ color: @list-group-active-color;
65
+ background-color: @list-group-active-bg;
66
+ border-color: @list-group-active-border;
67
+
68
+ // Force color to inherit for custom content
69
+ .list-group-item-heading {
70
+ color: inherit;
71
+ }
72
+ .list-group-item-text {
73
+ color: lighten(@list-group-active-bg, 40%);
74
+ }
75
+ }
76
+ }
77
+
78
+ // Custom content options
79
+ // -------------------------
80
+
81
+ .list-group-item-heading {
82
+ margin-top: 0;
83
+ margin-bottom: 5px;
84
+ }
85
+ .list-group-item-text {
86
+ margin-bottom: 0;
87
+ line-height: 1.3;
88
+ }
@@ -10,7 +10,6 @@
10
10
  .media,
11
11
  .media-body {
12
12
  overflow: hidden;
13
- *overflow: visible;
14
13
  zoom: 1;
15
14
  }
16
15
 
@@ -37,11 +36,13 @@
37
36
  // Media image alignment
38
37
  // -------------------------
39
38
 
40
- .media > .pull-left {
41
- margin-right: 10px;
42
- }
43
- .media > .pull-right {
44
- margin-left: 10px;
39
+ .media {
40
+ > .pull-left {
41
+ margin-right: 10px;
42
+ }
43
+ > .pull-right {
44
+ margin-left: 10px;
45
+ }
45
46
  }
46
47
 
47
48
 
@@ -50,6 +51,6 @@
50
51
 
51
52
  // Undo default ul/ol styles
52
53
  .media-list {
53
- margin-left: 0;
54
+ padding-left: 0;
54
55
  list-style: none;
55
56
  }
@@ -3,21 +3,24 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // UTILITY MIXINS
7
- // --------------------------------------------------
6
+ // Utilities
7
+ // -------------------------
8
8
 
9
9
  // Clearfix
10
- // --------
11
- // For clearing floats like a boss h5bp.com/q
12
- .clearfix {
13
- *zoom: 1;
10
+ // Source: http://nicolasgallagher.com/micro-clearfix-hack/
11
+ //
12
+ // For modern browsers
13
+ // 1. The space content is one way to avoid an Opera bug when the
14
+ // contenteditable attribute is included anywhere else in the document.
15
+ // Otherwise it causes space to appear at the top and bottom of elements
16
+ // that are clearfixed.
17
+ // 2. The use of `table` rather than `block` is only necessary if using
18
+ // `:before` to contain the top-margins of child elements.
19
+ .clearfix() {
14
20
  &:before,
15
21
  &:after {
16
- display: table;
17
- content: "";
18
- // Fixes Opera/contenteditable bug:
19
- // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
20
- line-height: 0;
22
+ content: " "; /* 1 */
23
+ display: table; /* 2 */
21
24
  }
22
25
  &:after {
23
26
  clear: both;
@@ -25,7 +28,6 @@
25
28
  }
26
29
 
27
30
  // Webkit-style focus
28
- // ------------------
29
31
  .tab-focus() {
30
32
  // Default
31
33
  outline: thin dotted #333;
@@ -35,64 +37,30 @@
35
37
  }
36
38
 
37
39
  // Center-align a block level element
38
- // ----------------------------------
39
40
  .center-block() {
40
41
  display: block;
41
42
  margin-left: auto;
42
43
  margin-right: auto;
43
44
  }
44
45
 
45
- // IE7 inline-block
46
- // ----------------
47
- .ie7-inline-block() {
48
- *display: inline; /* IE7 inline-block hack */
49
- *zoom: 1;
50
- }
51
-
52
- // IE7 likes to collapse whitespace on either side of the inline-block elements.
53
- // Ems because we're attempting to match the width of a space character. Left
54
- // version is for form buttons, which typically come after other elements, and
55
- // right version is for icons, which come before. Applying both is ok, but it will
56
- // mean that space between those elements will be .6em (~2 space characters) in IE7,
57
- // instead of the 1 space in other browsers.
58
- .ie7-restore-left-whitespace() {
59
- *margin-left: .3em;
60
-
61
- &:first-child {
62
- *margin-left: 0;
63
- }
64
- }
65
-
66
- .ie7-restore-right-whitespace() {
67
- *margin-right: .3em;
68
- }
69
-
70
46
  // Sizing shortcuts
71
- // -------------------------
72
- .size(@height, @width) {
47
+ .size(@width; @height) {
73
48
  width: @width;
74
49
  height: @height;
75
50
  }
76
51
  .square(@size) {
77
- .size(@size, @size);
52
+ .size(@size; @size);
78
53
  }
79
54
 
80
55
  // Placeholder text
81
- // -------------------------
82
- .placeholder(@color: @placeholderText) {
83
- &:-moz-placeholder {
84
- color: @color;
85
- }
86
- &:-ms-input-placeholder {
87
- color: @color;
88
- }
89
- &::-webkit-input-placeholder {
90
- color: @color;
91
- }
56
+ .placeholder(@color: @input-color-placeholder) {
57
+ &:-moz-placeholder { color: @color; } // Firefox 4-18
58
+ &::-moz-placeholder { color: @color; } // Firefox 19+
59
+ &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
60
+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
92
61
  }
93
62
 
94
63
  // Text overflow
95
- // -------------------------
96
64
  // Requires inline-block or block for proper styling
97
65
  .text-overflow() {
98
66
  overflow: hidden;
@@ -101,10 +69,9 @@
101
69
  }
102
70
 
103
71
  // CSS image replacement
104
- // -------------------------
105
72
  // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
106
- .hide-text {
107
- font: 0/0 a;
73
+ .hide-text() {
74
+ font: ~"0/0" a;
108
75
  color: transparent;
109
76
  text-shadow: none;
110
77
  background-color: transparent;
@@ -112,233 +79,90 @@
112
79
  }
113
80
 
114
81
 
115
- // FONTS
116
- // --------------------------------------------------
117
-
118
- #font {
119
- #family {
120
- .serif() {
121
- font-family: @serifFontFamily;
122
- }
123
- .sans-serif() {
124
- font-family: @sansFontFamily;
125
- }
126
- .monospace() {
127
- font-family: @monoFontFamily;
128
- }
129
- }
130
- .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
131
- font-size: @size;
132
- font-weight: @weight;
133
- line-height: @lineHeight;
134
- }
135
- .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
136
- #font > #family > .serif;
137
- #font > .shorthand(@size, @weight, @lineHeight);
138
- }
139
- .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
140
- #font > #family > .sans-serif;
141
- #font > .shorthand(@size, @weight, @lineHeight);
142
- }
143
- .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
144
- #font > #family > .monospace;
145
- #font > .shorthand(@size, @weight, @lineHeight);
146
- }
147
- }
148
-
149
-
150
- // FORMS
151
- // --------------------------------------------------
152
-
153
- // Block level inputs
154
- .input-block-level {
155
- display: block;
156
- width: 100%;
157
- min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
158
- .box-sizing(border-box); // Makes inputs behave like true block-level elements
159
- }
160
-
161
-
162
-
163
- // Mixin for form field states
164
- .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
165
- // Set the text color
166
- .control-label,
167
- .help-block,
168
- .help-inline {
169
- color: @textColor;
170
- }
171
- // Style inputs accordingly
172
- .checkbox,
173
- .radio,
174
- input,
175
- select,
176
- textarea {
177
- color: @textColor;
178
- }
179
- input,
180
- select,
181
- textarea {
182
- border-color: @borderColor;
183
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
184
- &:focus {
185
- border-color: darken(@borderColor, 10%);
186
- @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
187
- .box-shadow(@shadow);
188
- }
189
- }
190
- // Give a small background color for input-prepend/-append
191
- .input-prepend .add-on,
192
- .input-append .add-on {
193
- color: @textColor;
194
- background-color: @backgroundColor;
195
- border-color: @textColor;
196
- }
197
- }
198
-
199
-
200
82
 
201
83
  // CSS3 PROPERTIES
202
84
  // --------------------------------------------------
203
85
 
204
- // Border Radius
205
- .border-radius(@radius) {
206
- -webkit-border-radius: @radius;
207
- -moz-border-radius: @radius;
208
- border-radius: @radius;
209
- }
210
-
211
- // Single Corner Border Radius
212
- .border-top-left-radius(@radius) {
213
- -webkit-border-top-left-radius: @radius;
214
- -moz-border-radius-topleft: @radius;
215
- border-top-left-radius: @radius;
216
- }
217
- .border-top-right-radius(@radius) {
218
- -webkit-border-top-right-radius: @radius;
219
- -moz-border-radius-topright: @radius;
220
- border-top-right-radius: @radius;
221
- }
222
- .border-bottom-right-radius(@radius) {
223
- -webkit-border-bottom-right-radius: @radius;
224
- -moz-border-radius-bottomright: @radius;
225
- border-bottom-right-radius: @radius;
226
- }
227
- .border-bottom-left-radius(@radius) {
228
- -webkit-border-bottom-left-radius: @radius;
229
- -moz-border-radius-bottomleft: @radius;
230
- border-bottom-left-radius: @radius;
231
- }
232
-
233
- // Single Side Border Radius
86
+ // Single side border-radius
234
87
  .border-top-radius(@radius) {
235
- .border-top-right-radius(@radius);
236
- .border-top-left-radius(@radius);
88
+ border-top-right-radius: @radius;
89
+ border-top-left-radius: @radius;
237
90
  }
238
91
  .border-right-radius(@radius) {
239
- .border-top-right-radius(@radius);
240
- .border-bottom-right-radius(@radius);
92
+ border-bottom-right-radius: @radius;
93
+ border-top-right-radius: @radius;
241
94
  }
242
95
  .border-bottom-radius(@radius) {
243
- .border-bottom-right-radius(@radius);
244
- .border-bottom-left-radius(@radius);
96
+ border-bottom-right-radius: @radius;
97
+ border-bottom-left-radius: @radius;
245
98
  }
246
99
  .border-left-radius(@radius) {
247
- .border-top-left-radius(@radius);
248
- .border-bottom-left-radius(@radius);
100
+ border-bottom-left-radius: @radius;
101
+ border-top-left-radius: @radius;
249
102
  }
250
103
 
251
104
  // Drop shadows
252
105
  .box-shadow(@shadow) {
253
- -webkit-box-shadow: @shadow;
254
- -moz-box-shadow: @shadow;
106
+ -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
255
107
  box-shadow: @shadow;
256
108
  }
257
109
 
258
110
  // Transitions
259
111
  .transition(@transition) {
260
112
  -webkit-transition: @transition;
261
- -moz-transition: @transition;
262
- -o-transition: @transition;
263
113
  transition: @transition;
264
114
  }
265
115
  .transition-delay(@transition-delay) {
266
116
  -webkit-transition-delay: @transition-delay;
267
- -moz-transition-delay: @transition-delay;
268
- -o-transition-delay: @transition-delay;
269
117
  transition-delay: @transition-delay;
270
118
  }
271
119
  .transition-duration(@transition-duration) {
272
120
  -webkit-transition-duration: @transition-duration;
273
- -moz-transition-duration: @transition-duration;
274
- -o-transition-duration: @transition-duration;
275
121
  transition-duration: @transition-duration;
276
122
  }
123
+ .transition-transform(@transition) {
124
+ -webkit-transition: -webkit-transform @transition;
125
+ -moz-transition: -moz-transform @transition;
126
+ -o-transition: -o-transform @transition;
127
+ transition: transform @transition;
128
+ }
277
129
 
278
130
  // Transformations
279
131
  .rotate(@degrees) {
280
132
  -webkit-transform: rotate(@degrees);
281
- -moz-transform: rotate(@degrees);
282
- -ms-transform: rotate(@degrees);
283
- -o-transform: rotate(@degrees);
133
+ -ms-transform: rotate(@degrees); // IE9+
284
134
  transform: rotate(@degrees);
285
135
  }
286
136
  .scale(@ratio) {
287
137
  -webkit-transform: scale(@ratio);
288
- -moz-transform: scale(@ratio);
289
- -ms-transform: scale(@ratio);
290
- -o-transform: scale(@ratio);
138
+ -ms-transform: scale(@ratio); // IE9+
291
139
  transform: scale(@ratio);
292
140
  }
293
- .translate(@x, @y) {
141
+ .translate(@x; @y) {
294
142
  -webkit-transform: translate(@x, @y);
295
- -moz-transform: translate(@x, @y);
296
- -ms-transform: translate(@x, @y);
297
- -o-transform: translate(@x, @y);
143
+ -ms-transform: translate(@x, @y); // IE9+
298
144
  transform: translate(@x, @y);
299
145
  }
300
- .skew(@x, @y) {
146
+ .skew(@x; @y) {
301
147
  -webkit-transform: skew(@x, @y);
302
- -moz-transform: skew(@x, @y);
303
- -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
304
- -o-transform: skew(@x, @y);
148
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
305
149
  transform: skew(@x, @y);
306
- -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
307
150
  }
308
- .translate3d(@x, @y, @z) {
151
+ .translate3d(@x; @y; @z) {
309
152
  -webkit-transform: translate3d(@x, @y, @z);
310
- -moz-transform: translate3d(@x, @y, @z);
311
- -o-transform: translate3d(@x, @y, @z);
312
153
  transform: translate3d(@x, @y, @z);
313
154
  }
314
155
 
315
156
  // Backface visibility
316
157
  // Prevent browsers from flickering when using CSS 3D transforms.
317
- // Default value is `visible`, but can be changed to `hidden
158
+ // Default value is `visible`, but can be changed to `hidden`
318
159
  // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
319
160
  .backface-visibility(@visibility){
320
- -webkit-backface-visibility: @visibility;
321
- -moz-backface-visibility: @visibility;
322
- backface-visibility: @visibility;
161
+ -webkit-backface-visibility: @visibility;
162
+ -moz-backface-visibility: @visibility;
163
+ backface-visibility: @visibility;
323
164
  }
324
165
 
325
- // Background clipping
326
- // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
327
- .background-clip(@clip) {
328
- -webkit-background-clip: @clip;
329
- -moz-background-clip: @clip;
330
- background-clip: @clip;
331
- }
332
-
333
- // Background sizing
334
- .background-size(@size) {
335
- -webkit-background-size: @size;
336
- -moz-background-size: @size;
337
- -o-background-size: @size;
338
- background-size: @size;
339
- }
340
-
341
-
342
166
  // Box sizing
343
167
  .box-sizing(@boxmodel) {
344
168
  -webkit-box-sizing: @boxmodel;
@@ -351,7 +175,7 @@
351
175
  .user-select(@select) {
352
176
  -webkit-user-select: @select;
353
177
  -moz-user-select: @select;
354
- -ms-user-select: @select;
178
+ -ms-user-select: @select; // IE10+
355
179
  -o-user-select: @select;
356
180
  user-select: @select;
357
181
  }
@@ -363,13 +187,13 @@
363
187
  }
364
188
 
365
189
  // CSS3 Content Columns
366
- .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
367
- -webkit-column-count: @columnCount;
368
- -moz-column-count: @columnCount;
369
- column-count: @columnCount;
370
- -webkit-column-gap: @columnGap;
371
- -moz-column-gap: @columnGap;
372
- column-gap: @columnGap;
190
+ .content-columns(@column-count; @column-gap: @grid-gutter-width) {
191
+ -webkit-column-count: @column-count;
192
+ -moz-column-count: @column-count;
193
+ column-count: @column-count;
194
+ -webkit-column-gap: @column-gap;
195
+ -moz-column-gap: @column-gap;
196
+ column-gap: @column-gap;
373
197
  }
374
198
 
375
199
  // Optional hyphenation
@@ -377,168 +201,321 @@
377
201
  word-wrap: break-word;
378
202
  -webkit-hyphens: @mode;
379
203
  -moz-hyphens: @mode;
380
- -ms-hyphens: @mode;
204
+ -ms-hyphens: @mode; // IE10+
381
205
  -o-hyphens: @mode;
382
206
  hyphens: @mode;
383
207
  }
384
208
 
385
209
  // Opacity
386
210
  .opacity(@opacity) {
387
- opacity: @opacity / 100;
388
- filter: ~"alpha(opacity=@{opacity})";
211
+ opacity: @opacity;
212
+ // IE8 filter
213
+ @opacity-ie: (@opacity * 100);
214
+ filter: ~"alpha(opacity=@{opacity-ie})";
389
215
  }
390
216
 
391
217
 
392
218
 
393
- // BACKGROUNDS
219
+ // GRADIENTS
394
220
  // --------------------------------------------------
395
221
 
396
- // Add an alphatransparency value to any background or border color (via Elyse Holladay)
397
- #translucent {
398
- .background(@color: @white, @alpha: 1) {
399
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
400
- }
401
- .border(@color: @white, @alpha: 1) {
402
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
403
- .background-clip(padding-box);
404
- }
405
- }
406
-
407
- // Gradient Bar Colors for buttons and alerts
408
- .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
409
- color: @textColor;
410
- text-shadow: @textShadow;
411
- #gradient > .vertical(@primaryColor, @secondaryColor);
412
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
413
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
414
- }
415
-
416
- // Gradients
417
222
  #gradient {
418
- .horizontal(@startColor: #555, @endColor: #333) {
419
- background-color: @endColor;
420
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
421
- background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
422
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
423
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
424
- background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
223
+
224
+ // Horizontal gradient, from left to right
225
+ //
226
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
227
+ // Color stops are not available in IE9 and below.
228
+ .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
229
+ background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
230
+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
231
+ background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
232
+ background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
425
233
  background-repeat: repeat-x;
426
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
427
- }
428
- .vertical(@startColor: #555, @endColor: #333) {
429
- background-color: mix(@startColor, @endColor, 60%);
430
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
431
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
432
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
433
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
434
- background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
234
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
235
+ }
236
+
237
+ // Vertical gradient, from top to bottom
238
+ //
239
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
240
+ // Color stops are not available in IE9 and below.
241
+ .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
242
+ background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
243
+ background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
244
+ background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
245
+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
435
246
  background-repeat: repeat-x;
436
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
247
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
437
248
  }
438
- .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
439
- background-color: @endColor;
249
+
250
+ .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
440
251
  background-repeat: repeat-x;
441
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
442
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
443
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
444
- background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
445
- }
446
- .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
447
- background-color: mix(@midColor, @endColor, 80%);
448
- background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
449
- background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
450
- background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
451
- background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
452
- background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
252
+ background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
253
+ background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
254
+ background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
255
+ }
256
+ .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
257
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
258
+ background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
259
+ background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
260
+ background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
453
261
  background-repeat: no-repeat;
454
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
262
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
455
263
  }
456
-
457
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
458
- background-color: mix(@midColor, @endColor, 80%);
459
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
460
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
461
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
462
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
463
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
264
+ .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
265
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
266
+ background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
267
+ background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
268
+ background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
464
269
  background-repeat: no-repeat;
465
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
466
- }
467
- .radial(@innerColor: #555, @outerColor: #333) {
468
- background-color: @outerColor;
469
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
470
- background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
471
- background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
472
- background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
270
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
271
+ }
272
+ .radial(@inner-color: #555; @outer-color: #333) {
273
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
274
+ background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
275
+ background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
276
+ background-image: radial-gradient(circle, @inner-color, @outer-color);
473
277
  background-repeat: no-repeat;
474
278
  }
475
- .striped(@color: #555, @angle: 45deg) {
476
- background-color: @color;
279
+ .striped(@color: #555; @angle: 45deg) {
477
280
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
478
281
  background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
479
282
  background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
480
- background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
481
283
  background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
482
284
  }
483
285
  }
286
+
484
287
  // Reset filters for IE
288
+ //
289
+ // When you need to remove a gradient background, do not forget to use this to reset
290
+ // the IE filter for IE9 and below.
485
291
  .reset-filter() {
486
292
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
487
293
  }
488
294
 
489
295
 
490
296
 
297
+ // Retina images
298
+ //
299
+ // Short retina mixin for setting background-image and -size
300
+
301
+ .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
302
+ background-image: url("@{file-1x}");
303
+
304
+ @media
305
+ only screen and (-webkit-min-device-pixel-ratio: 2),
306
+ only screen and ( min--moz-device-pixel-ratio: 2),
307
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
308
+ only screen and ( min-device-pixel-ratio: 2),
309
+ only screen and ( min-resolution: 192dpi),
310
+ only screen and ( min-resolution: 2dppx) {
311
+ background-image: url("@{file-2x}");
312
+ background-size: @width-1x @height-1x;
313
+ }
314
+ }
315
+
316
+
317
+ // Responsive image
318
+ //
319
+ // Keep images from scaling beyond the width of their parents.
320
+
321
+ .img-responsive(@display: block;) {
322
+ display: @display;
323
+ max-width: 100%; // Part 1: Set a maximum relative to the parent
324
+ height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
325
+ }
326
+
327
+
491
328
  // COMPONENT MIXINS
492
329
  // --------------------------------------------------
493
330
 
494
331
  // Horizontal dividers
495
332
  // -------------------------
496
333
  // Dividers (basically an hr) within dropdowns and nav lists
497
- .nav-divider(@top: #e5e5e5, @bottom: @white) {
498
- // IE7 needs a set width since we gave a height. Restricting just
499
- // to IE7 to keep the 1px left/right space in other browsers.
500
- // It is unclear where IE is getting the extra space that we need
501
- // to negative-margin away, but so it goes.
502
- *width: 100%;
334
+ .nav-divider(@color: #e5e5e5) {
503
335
  height: 1px;
504
- margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
505
- *margin: -5px 0 5px;
336
+ margin: ((@line-height-computed / 2) - 1) 0;
506
337
  overflow: hidden;
507
- background-color: @top;
508
- border-bottom: 1px solid @bottom;
338
+ background-color: @color;
339
+ }
340
+
341
+ // Panels
342
+ // -------------------------
343
+ .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
344
+ border-color: @border;
345
+ & > .panel-heading {
346
+ color: @heading-text-color;
347
+ background-color: @heading-bg-color;
348
+ border-color: @heading-border;
349
+ + .panel-collapse .panel-body {
350
+ border-top-color: @border;
351
+ }
352
+ }
353
+ & > .panel-footer {
354
+ + .panel-collapse .panel-body {
355
+ border-bottom-color: @border;
356
+ }
357
+ }
509
358
  }
510
359
 
511
- // Button backgrounds
512
- // ------------------
513
- .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
514
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
515
- .gradientBar(@startColor, @endColor, @textColor, @textShadow);
516
- *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
517
- .reset-filter();
360
+ // Alerts
361
+ // -------------------------
362
+ .alert-variant(@background; @border; @text-color) {
363
+ background-color: @background;
364
+ border-color: @border;
365
+ color: @text-color;
366
+ hr {
367
+ border-top-color: darken(@border, 5%);
368
+ }
369
+ .alert-link {
370
+ color: darken(@text-color, 10%);
371
+ }
372
+ }
373
+
374
+ // Tables
375
+ // -------------------------
376
+ .table-row-variant(@state; @background; @border) {
377
+ // Exact selectors below required to override `.table-striped` and prevent
378
+ // inheritance to nested tables.
379
+ .table > thead > tr,
380
+ .table > tbody > tr,
381
+ .table > tfoot > tr {
382
+ > td.@{state},
383
+ > th.@{state},
384
+ &.@{state} > td,
385
+ &.@{state} > th {
386
+ background-color: @background;
387
+ border-color: @border;
388
+ }
389
+ }
518
390
 
519
- // in these cases the gradient won't cover the background, so we override
520
- &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
521
- color: @textColor;
522
- background-color: @endColor;
523
- *background-color: darken(@endColor, 5%);
391
+ // Hover states for `.table-hover`
392
+ // Note: this is not available for cells or rows within `thead` or `tfoot`.
393
+ .table-hover > tbody > tr {
394
+ > td.@{state}:hover,
395
+ > th.@{state}:hover,
396
+ &.@{state}:hover > td {
397
+ background-color: darken(@background, 5%);
398
+ border-color: darken(@border, 5%);
399
+ }
524
400
  }
401
+ }
525
402
 
526
- // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
403
+ // Button variants
404
+ // -------------------------
405
+ // Easily pump out default styles, as well as :hover, :focus, :active,
406
+ // and disabled options for all buttons
407
+ .button-variant(@color; @background; @border) {
408
+ color: @color;
409
+ background-color: @background;
410
+ border-color: @border;
411
+
412
+ &:hover,
413
+ &:focus,
527
414
  &:active,
528
- &.active {
529
- background-color: darken(@endColor, 10%) e("\9");
415
+ &.active,
416
+ .open .dropdown-toggle& {
417
+ color: @color;
418
+ background-color: darken(@background, 8%);
419
+ border-color: darken(@border, 12%);
420
+ }
421
+ &:active,
422
+ &.active,
423
+ .open .dropdown-toggle& {
424
+ background-image: none;
425
+ }
426
+ &.disabled,
427
+ &[disabled],
428
+ fieldset[disabled] & {
429
+ &,
430
+ &:hover,
431
+ &:focus,
432
+ &:active,
433
+ &.active {
434
+ background-color: @background;
435
+ border-color: @border
436
+ }
437
+ }
438
+ }
439
+
440
+ // Button sizes
441
+ // -------------------------
442
+ .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
443
+ padding: @padding-vertical @padding-horizontal;
444
+ font-size: @font-size;
445
+ line-height: @line-height;
446
+ border-radius: @border-radius;
447
+ }
448
+
449
+ // Pagination
450
+ // -------------------------
451
+ .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
452
+ > li {
453
+ > a,
454
+ > span {
455
+ padding: @padding-vertical @padding-horizontal;
456
+ font-size: @font-size;
457
+ }
458
+ &:first-child {
459
+ > a,
460
+ > span {
461
+ .border-left-radius(@border-radius);
462
+ }
463
+ }
464
+ &:last-child {
465
+ > a,
466
+ > span {
467
+ .border-right-radius(@border-radius);
468
+ }
469
+ }
470
+ }
471
+ }
472
+
473
+ // Labels
474
+ // -------------------------
475
+ .label-variant(@color) {
476
+ background-color: @color;
477
+ &[href] {
478
+ &:hover,
479
+ &:focus {
480
+ background-color: darken(@color, 10%);
481
+ }
530
482
  }
531
483
  }
532
484
 
533
485
  // Navbar vertical align
534
486
  // -------------------------
535
487
  // Vertically center elements in the navbar.
536
- // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
537
- .navbarVerticalAlign(@elementHeight) {
538
- margin-top: (@navbarHeight - @elementHeight) / 2;
488
+ // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
489
+ .navbar-vertical-align(@element-height) {
490
+ margin-top: ((@navbar-height - @element-height) / 2);
491
+ margin-bottom: ((@navbar-height - @element-height) / 2);
539
492
  }
540
493
 
494
+ // Progress bars
495
+ // -------------------------
496
+ .progress-bar-variant(@color) {
497
+ background-color: @color;
498
+ .progress-striped & {
499
+ #gradient > .striped(@color);
500
+ }
501
+ }
541
502
 
503
+ // Responsive utilities
504
+ // -------------------------
505
+ // More easily include all the states for responsive-utilities.less.
506
+ .responsive-visibility() {
507
+ display: block !important;
508
+ tr& { display: table-row !important; }
509
+ th&,
510
+ td& { display: table-cell !important; }
511
+ }
512
+
513
+ .responsive-invisibility() {
514
+ display: none !important;
515
+ tr& { display: none !important; }
516
+ th&,
517
+ td& { display: none !important; }
518
+ }
542
519
 
543
520
  // Grid System
544
521
  // -----------
@@ -547,156 +524,200 @@
547
524
  .container-fixed() {
548
525
  margin-right: auto;
549
526
  margin-left: auto;
527
+ padding-left: (@grid-gutter-width / 2);
528
+ padding-right: (@grid-gutter-width / 2);
550
529
  .clearfix();
551
530
  }
552
531
 
553
- // Table columns
554
- .tableColumns(@columnSpan: 1) {
555
- float: none; // undo default grid column styles
556
- width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
557
- margin-left: 0; // undo default grid column styles
558
- }
559
-
560
- // Make a Grid
561
- // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
562
- .makeRow() {
563
- margin-left: @gridGutterWidth * -1;
532
+ // Creates a wrapper for a series of columns
533
+ .make-row(@gutter: @grid-gutter-width) {
534
+ margin-left: (@gutter / -2);
535
+ margin-right: (@gutter / -2);
564
536
  .clearfix();
565
537
  }
566
- .makeColumn(@columns: 1, @offset: 0) {
538
+
539
+ // Generate the extra small columns
540
+ .make-xs-column(@columns; @gutter: @grid-gutter-width) {
541
+ position: relative;
567
542
  float: left;
568
- margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
569
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
543
+ width: percentage((@columns / @grid-columns));
544
+ // Prevent columns from collapsing when empty
545
+ min-height: 1px;
546
+ // Inner gutter via padding
547
+ padding-left: (@gutter / 2);
548
+ padding-right: (@gutter / 2);
549
+ }
550
+
551
+ // Generate the small columns
552
+ .make-sm-column(@columns; @gutter: @grid-gutter-width) {
553
+ position: relative;
554
+ // Prevent columns from collapsing when empty
555
+ min-height: 1px;
556
+ // Inner gutter via padding
557
+ padding-left: (@gutter / 2);
558
+ padding-right: (@gutter / 2);
559
+
560
+ // Calculate width based on number of columns available
561
+ @media (min-width: @screen-sm) {
562
+ float: left;
563
+ width: percentage((@columns / @grid-columns));
564
+ }
570
565
  }
571
566
 
572
- // The Grid
573
- #grid {
574
-
575
- .core (@gridColumnWidth, @gridGutterWidth) {
576
-
577
- .spanX (@index) when (@index > 0) {
578
- .span@{index} { .span(@index); }
579
- .spanX(@index - 1);
580
- }
581
- .spanX (0) {}
582
-
583
- .offsetX (@index) when (@index > 0) {
584
- .offset@{index} { .offset(@index); }
585
- .offsetX(@index - 1);
586
- }
587
- .offsetX (0) {}
588
-
589
- .offset (@columns) {
590
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
591
- }
592
-
593
- .span (@columns) {
594
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
595
- }
596
-
597
- .row {
598
- margin-left: @gridGutterWidth * -1;
599
- .clearfix();
600
- }
601
-
602
- [class*="span"] {
603
- float: left;
604
- min-height: 1px; // prevent collapsing columns
605
- margin-left: @gridGutterWidth;
606
- }
607
-
608
- // Set the container width, and override it for fixed navbars in media queries
609
- .container,
610
- .navbar-static-top .container,
611
- .navbar-fixed-top .container,
612
- .navbar-fixed-bottom .container { .span(@gridColumns); }
613
-
614
- // generate .spanX and .offsetX
615
- .spanX (@gridColumns);
616
- .offsetX (@gridColumns);
617
-
567
+ // Generate the small column offsets
568
+ .make-sm-column-offset(@columns) {
569
+ @media (min-width: @screen-sm) {
570
+ margin-left: percentage((@columns / @grid-columns));
618
571
  }
572
+ }
573
+ .make-sm-column-push(@columns) {
574
+ @media (min-width: @screen-sm) {
575
+ left: percentage((@columns / @grid-columns));
576
+ }
577
+ }
578
+ .make-sm-column-pull(@columns) {
579
+ @media (min-width: @screen-sm) {
580
+ right: percentage((@columns / @grid-columns));
581
+ }
582
+ }
619
583
 
620
- .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
621
-
622
- .spanX (@index) when (@index > 0) {
623
- .span@{index} { .span(@index); }
624
- .spanX(@index - 1);
625
- }
626
- .spanX (0) {}
627
-
628
- .offsetX (@index) when (@index > 0) {
629
- .offset@{index} { .offset(@index); }
630
- .offset@{index}:first-child { .offsetFirstChild(@index); }
631
- .offsetX(@index - 1);
632
- }
633
- .offsetX (0) {}
634
-
635
- .offset (@columns) {
636
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
637
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
638
- }
639
-
640
- .offsetFirstChild (@columns) {
641
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
642
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
643
- }
644
-
645
- .span (@columns) {
646
- width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
647
- *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
648
- }
584
+ // Generate the medium columns
585
+ .make-md-column(@columns; @gutter: @grid-gutter-width) {
586
+ position: relative;
587
+ // Prevent columns from collapsing when empty
588
+ min-height: 1px;
589
+ // Inner gutter via padding
590
+ padding-left: (@gutter / 2);
591
+ padding-right: (@gutter / 2);
649
592
 
650
- .row-fluid {
651
- width: 100%;
652
- .clearfix();
653
- [class*="span"] {
654
- .input-block-level();
655
- float: left;
656
- margin-left: @fluidGridGutterWidth;
657
- *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
658
- }
659
- [class*="span"]:first-child {
660
- margin-left: 0;
661
- }
593
+ // Calculate width based on number of columns available
594
+ @media (min-width: @screen-md) {
595
+ float: left;
596
+ width: percentage((@columns / @grid-columns));
597
+ }
598
+ }
662
599
 
663
- // Space grid-sized controls properly if multiple per line
664
- .controls-row [class*="span"] + [class*="span"] {
665
- margin-left: @fluidGridGutterWidth;
666
- }
600
+ // Generate the large column offsets
601
+ .make-md-column-offset(@columns) {
602
+ @media (min-width: @screen-md) {
603
+ margin-left: percentage((@columns / @grid-columns));
604
+ }
605
+ }
606
+ .make-md-column-push(@columns) {
607
+ @media (min-width: @screen-md) {
608
+ left: percentage((@columns / @grid-columns));
609
+ }
610
+ }
611
+ .make-md-column-pull(@columns) {
612
+ @media (min-width: @screen-md) {
613
+ right: percentage((@columns / @grid-columns));
614
+ }
615
+ }
667
616
 
668
- // generate .spanX and .offsetX
669
- .spanX (@gridColumns);
670
- .offsetX (@gridColumns);
671
- }
617
+ // Generate the large columns
618
+ .make-lg-column(@columns; @gutter: @grid-gutter-width) {
619
+ position: relative;
620
+ // Prevent columns from collapsing when empty
621
+ min-height: 1px;
622
+ // Inner gutter via padding
623
+ padding-left: (@gutter / 2);
624
+ padding-right: (@gutter / 2);
672
625
 
626
+ // Calculate width based on number of columns available
627
+ @media (min-width: @screen-lg) {
628
+ float: left;
629
+ width: percentage((@columns / @grid-columns));
673
630
  }
631
+ }
674
632
 
675
- .input(@gridColumnWidth, @gridGutterWidth) {
633
+ // Generate the large column offsets
634
+ .make-lg-column-offset(@columns) {
635
+ @media (min-width: @screen-lg) {
636
+ margin-left: percentage((@columns / @grid-columns));
637
+ }
638
+ }
639
+ .make-lg-column-push(@columns) {
640
+ @media (min-width: @screen-lg) {
641
+ left: percentage((@columns / @grid-columns));
642
+ }
643
+ }
644
+ .make-lg-column-pull(@columns) {
645
+ @media (min-width: @screen-lg) {
646
+ right: percentage((@columns / @grid-columns));
647
+ }
648
+ }
676
649
 
677
- .spanX (@index) when (@index > 0) {
678
- input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
679
- .spanX(@index - 1);
680
- }
681
- .spanX (0) {}
682
650
 
683
- .span(@columns) {
684
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
685
- }
651
+ // Form validation states
652
+ //
653
+ // Used in forms.less to generate the form validation CSS for warnings, errors,
654
+ // and successes.
686
655
 
687
- input,
688
- textarea,
689
- .uneditable-input {
690
- margin-left: 0; // override margin-left from core grid system
656
+ .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
657
+ // Color the label and help text
658
+ .help-block,
659
+ .control-label {
660
+ color: @text-color;
661
+ }
662
+ // Set the border and box shadow on specific inputs to match
663
+ .form-control {
664
+ border-color: @border-color;
665
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
666
+ &:focus {
667
+ border-color: darken(@border-color, 10%);
668
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
669
+ .box-shadow(@shadow);
691
670
  }
671
+ }
672
+ // Set validation states also for addons
673
+ .input-group-addon {
674
+ color: @text-color;
675
+ border-color: @border-color;
676
+ background-color: @background-color;
677
+ }
678
+ }
692
679
 
693
- // Space grid-sized controls properly if multiple per line
694
- .controls-row [class*="span"] + [class*="span"] {
695
- margin-left: @gridGutterWidth;
696
- }
680
+ // Form control focus state
681
+ //
682
+ // Generate a customized focus state and for any input with the specified color,
683
+ // which defaults to the `@input-focus-border` variable.
684
+ //
685
+ // We highly encourage you to not customize the default value, but instead use
686
+ // this to tweak colors on an as-needed basis. This aesthetic change is based on
687
+ // WebKit's default styles, but applicable to a wider range of browsers. Its
688
+ // usability and accessibility should be taken into account with any change.
689
+ //
690
+ // Example usage: change the default blue border and shadow to white for better
691
+ // contrast against a dark gray background.
692
+
693
+ .form-control-focus(@color: @input-border-focus) {
694
+ @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
695
+ &:focus {
696
+ border-color: @color;
697
+ outline: 0;
698
+ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
699
+ }
700
+ }
697
701
 
698
- // generate .spanX
699
- .spanX (@gridColumns);
702
+ // Form control sizing
703
+ //
704
+ // Relative text size, padding, and border-radii changes for form controls. For
705
+ // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
706
+ // element gets special love because it's special, and that's a fact!
707
+
708
+ .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
709
+ height: @input-height;
710
+ padding: @padding-vertical @padding-horizontal;
711
+ font-size: @font-size;
712
+ line-height: @line-height;
713
+ border-radius: @border-radius;
714
+
715
+ select& {
716
+ height: @input-height;
717
+ line-height: @input-height;
718
+ }
700
719
 
720
+ textarea& {
721
+ height: auto;
701
722
  }
702
723
  }