twbs_sass_rails 0.2.0 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +17 -8
  3. data/CONTRIBUTING.md +4 -4
  4. data/Gemfile.lock +52 -65
  5. data/LICENSE +2 -2
  6. data/README.md +48 -18
  7. data/Rakefile +67 -32
  8. data/app/assets/fonts/fontawesome-webfont.eot +0 -0
  9. data/app/assets/fonts/fontawesome-webfont.svg +23 -8
  10. data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
  11. data/app/assets/fonts/fontawesome-webfont.woff +0 -0
  12. data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  13. data/app/assets/fonts/glyphicons-halflings-regular.svg +200 -199
  14. data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  15. data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  16. data/gemfiles/Gemfile.rails-3.2.x +2 -3
  17. data/gemfiles/Gemfile.rails-4.0.x +2 -3
  18. data/lib/generators/twbs_sass_rails/install/install_generator.rb +2 -2
  19. data/lib/generators/twbs_sass_rails/install/templates/{twbs-variables.css.less → twbs-variables.css.scss} +4 -3
  20. data/lib/generators/twbs_sass_rails/install/templates/{twbs.css.less → twbs.css.scss} +12 -7
  21. data/lib/twbs_sass_rails/version.rb +1 -1
  22. data/test/dummy/app/assets/stylesheets/{default-twbs.css.less → default-twbs.css.scss} +0 -0
  23. data/test/dummy/app/assets/stylesheets/test.css.scss +9 -0
  24. data/test/dummy/app/assets/stylesheets/twbs-variables.css.scss +7 -0
  25. data/test/dummy/app/assets/stylesheets/{twbs.css.less → twbs.css.scss} +12 -7
  26. data/test/dummy/config/application.rb +4 -1
  27. data/test/dummy/config/environments/development.rb +1 -1
  28. data/test/generators/install_generator_test.rb +4 -4
  29. data/test/integration/assets_precompile_integration_test.rb +11 -5
  30. data/test/integration/twbs_sass_rails_integration_test.rb +8 -7
  31. data/test/test_helper.rb +2 -4
  32. data/twbs_sass_rails.gemspec +6 -9
  33. data/vendor/assets/javascripts/respond.js +223 -212
  34. data/vendor/assets/javascripts/twbs/bootstrap/affix.js +36 -25
  35. data/vendor/assets/javascripts/twbs/bootstrap/alert.js +7 -17
  36. data/vendor/assets/javascripts/twbs/bootstrap/button.js +26 -28
  37. data/vendor/assets/javascripts/twbs/bootstrap/carousel.js +22 -34
  38. data/vendor/assets/javascripts/twbs/bootstrap/collapse.js +9 -18
  39. data/vendor/assets/javascripts/twbs/bootstrap/dropdown.js +25 -32
  40. data/vendor/assets/javascripts/twbs/bootstrap/modal.js +27 -30
  41. data/vendor/assets/javascripts/twbs/bootstrap/popover.js +16 -23
  42. data/vendor/assets/javascripts/twbs/bootstrap/scrollspy.js +19 -24
  43. data/vendor/assets/javascripts/twbs/bootstrap/tab.js +10 -20
  44. data/vendor/assets/javascripts/twbs/bootstrap/tooltip.js +54 -41
  45. data/vendor/assets/javascripts/twbs/bootstrap/transition.js +13 -21
  46. data/vendor/assets/stylesheets/fontawesome/_bordered-pulled.scss +16 -0
  47. data/vendor/assets/stylesheets/fontawesome/_core.scss +12 -0
  48. data/vendor/assets/stylesheets/fontawesome/_extras.scss +44 -0
  49. data/vendor/assets/stylesheets/fontawesome/_fixed-width.scss +6 -0
  50. data/vendor/assets/stylesheets/fontawesome/_icons.scss +412 -0
  51. data/vendor/assets/stylesheets/fontawesome/_larger.scss +13 -0
  52. data/vendor/assets/stylesheets/fontawesome/_list.scss +19 -0
  53. data/vendor/assets/stylesheets/fontawesome/_mixins.scss +20 -0
  54. data/vendor/assets/stylesheets/fontawesome/_path.scss +14 -0
  55. data/vendor/assets/stylesheets/fontawesome/_rotated-flipped.scss +9 -0
  56. data/vendor/assets/stylesheets/fontawesome/_spinning.scss +30 -0
  57. data/vendor/assets/stylesheets/fontawesome/_stacked.scss +20 -0
  58. data/vendor/assets/stylesheets/fontawesome/_variables.scss +381 -0
  59. data/vendor/assets/stylesheets/fontawesome/font-awesome.scss +17 -0
  60. data/vendor/assets/stylesheets/twbs/bootstrap/{alerts.less → _alerts.scss} +10 -10
  61. data/vendor/assets/stylesheets/twbs/bootstrap/{badges.less → _badges.scss} +19 -15
  62. data/vendor/assets/stylesheets/twbs/bootstrap/_breadcrumbs.scss +26 -0
  63. data/vendor/assets/stylesheets/twbs/bootstrap/{button-groups.less → _button-groups.scss} +38 -60
  64. data/vendor/assets/stylesheets/twbs/bootstrap/{buttons.less → _buttons.scss} +28 -34
  65. data/vendor/assets/stylesheets/twbs/bootstrap/{carousel.less → _carousel.scss} +38 -19
  66. data/vendor/assets/stylesheets/twbs/bootstrap/_close.scss +35 -0
  67. data/vendor/assets/stylesheets/twbs/bootstrap/_code.scss +63 -0
  68. data/vendor/assets/stylesheets/twbs/bootstrap/{component-animations.less → _component-animations.scss} +2 -2
  69. data/vendor/assets/stylesheets/twbs/bootstrap/{dropdowns.less → _dropdowns.scss} +53 -33
  70. data/vendor/assets/stylesheets/twbs/bootstrap/{forms.less → _forms.scss} +133 -79
  71. data/vendor/assets/stylesheets/twbs/bootstrap/{glyphicons.less → _glyphicons.scss} +16 -19
  72. data/vendor/assets/stylesheets/twbs/bootstrap/_grid.scss +100 -0
  73. data/vendor/assets/stylesheets/twbs/bootstrap/{input-groups.less → _input-groups.scss} +58 -29
  74. data/vendor/assets/stylesheets/twbs/bootstrap/_jumbotron.scss +44 -0
  75. data/vendor/assets/stylesheets/twbs/bootstrap/{labels.less → _labels.scss} +14 -8
  76. data/vendor/assets/stylesheets/twbs/bootstrap/_list-group.scss +110 -0
  77. data/vendor/assets/stylesheets/twbs/bootstrap/{media.less → _media.scss} +0 -0
  78. data/vendor/assets/stylesheets/twbs/bootstrap/_mixins.scss +931 -0
  79. data/vendor/assets/stylesheets/twbs/bootstrap/{modals.less → _modals.scss} +37 -40
  80. data/vendor/assets/stylesheets/twbs/bootstrap/_navbar.scss +620 -0
  81. data/vendor/assets/stylesheets/twbs/bootstrap/{navs.less → _navs.scss} +41 -52
  82. data/vendor/assets/stylesheets/twbs/bootstrap/{normalize.less → _normalize.scss} +148 -121
  83. data/vendor/assets/stylesheets/twbs/bootstrap/{pager.less → _pager.scss} +8 -8
  84. data/vendor/assets/stylesheets/twbs/bootstrap/_pagination.scss +88 -0
  85. data/vendor/assets/stylesheets/twbs/bootstrap/_panels.scss +230 -0
  86. data/vendor/assets/stylesheets/twbs/bootstrap/{popovers.less → _popovers.scss} +36 -36
  87. data/vendor/assets/stylesheets/twbs/bootstrap/{print.less → _print.scss} +6 -5
  88. data/vendor/assets/stylesheets/twbs/bootstrap/_progress-bars.scss +80 -0
  89. data/vendor/assets/stylesheets/twbs/bootstrap/_responsive-utilities.scss +80 -0
  90. data/vendor/assets/stylesheets/twbs/bootstrap/{scaffolding.less → _scaffolding.scss} +39 -24
  91. data/vendor/assets/stylesheets/twbs/bootstrap/{tables.less → _tables.scss} +42 -48
  92. data/vendor/assets/stylesheets/twbs/bootstrap/_theme.scss +247 -0
  93. data/vendor/assets/stylesheets/twbs/bootstrap/_thumbnails.scss +38 -0
  94. data/vendor/assets/stylesheets/twbs/bootstrap/_tooltip.scss +95 -0
  95. data/vendor/assets/stylesheets/twbs/bootstrap/_type.scss +296 -0
  96. data/vendor/assets/stylesheets/twbs/bootstrap/{utilities.less → _utilities.scss} +14 -3
  97. data/vendor/assets/stylesheets/twbs/bootstrap/_variables.scss +831 -0
  98. data/vendor/assets/stylesheets/twbs/bootstrap/{wells.less → _wells.scss} +6 -6
  99. data/vendor/assets/stylesheets/twbs/bootstrap/bootstrap.scss +48 -0
  100. data/vendor/assets/stylesheets/twbs/{bootstrap.less → bootstrap.scss} +0 -0
  101. metadata +94 -134
  102. data/test/dummy/app/assets/stylesheets/test.css.less +0 -5
  103. data/test/dummy/app/assets/stylesheets/twbs-variables.css.less +0 -6
  104. data/test/dummy/config/database.yml +0 -25
  105. data/test/dummy/db/.keep +0 -0
  106. data/vendor/assets/stylesheets/fontawesome/bootstrap.less +0 -84
  107. data/vendor/assets/stylesheets/fontawesome/core.less +0 -129
  108. data/vendor/assets/stylesheets/fontawesome/extras.less +0 -93
  109. data/vendor/assets/stylesheets/fontawesome/font-awesome.less +0 -33
  110. data/vendor/assets/stylesheets/fontawesome/icons.less +0 -381
  111. data/vendor/assets/stylesheets/fontawesome/mixins.less +0 -48
  112. data/vendor/assets/stylesheets/fontawesome/path.less +0 -14
  113. data/vendor/assets/stylesheets/fontawesome/variables.less +0 -735
  114. data/vendor/assets/stylesheets/twbs/bootstrap/bootstrap.less +0 -58
  115. data/vendor/assets/stylesheets/twbs/bootstrap/breadcrumbs.less +0 -23
  116. data/vendor/assets/stylesheets/twbs/bootstrap/close.less +0 -33
  117. data/vendor/assets/stylesheets/twbs/bootstrap/code.less +0 -56
  118. data/vendor/assets/stylesheets/twbs/bootstrap/grid.less +0 -346
  119. data/vendor/assets/stylesheets/twbs/bootstrap/jumbotron.less +0 -40
  120. data/vendor/assets/stylesheets/twbs/bootstrap/list-group.less +0 -88
  121. data/vendor/assets/stylesheets/twbs/bootstrap/mixins.less +0 -744
  122. data/vendor/assets/stylesheets/twbs/bootstrap/navbar.less +0 -621
  123. data/vendor/assets/stylesheets/twbs/bootstrap/pagination.less +0 -85
  124. data/vendor/assets/stylesheets/twbs/bootstrap/panels.less +0 -143
  125. data/vendor/assets/stylesheets/twbs/bootstrap/progress-bars.less +0 -96
  126. data/vendor/assets/stylesheets/twbs/bootstrap/responsive-utilities.less +0 -220
  127. data/vendor/assets/stylesheets/twbs/bootstrap/theme.less +0 -244
  128. data/vendor/assets/stylesheets/twbs/bootstrap/thumbnails.less +0 -32
  129. data/vendor/assets/stylesheets/twbs/bootstrap/tooltip.less +0 -95
  130. data/vendor/assets/stylesheets/twbs/bootstrap/type.less +0 -271
  131. data/vendor/assets/stylesheets/twbs/bootstrap/variables.less +0 -635
@@ -10,13 +10,9 @@
10
10
  height: 0;
11
11
  margin-left: 2px;
12
12
  vertical-align: middle;
13
- border-top: @caret-width-base solid @dropdown-caret-color;
14
- border-right: @caret-width-base solid transparent;
15
- border-left: @caret-width-base solid transparent;
16
- // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
17
- // we can just straight up remove this.
18
- border-bottom: 0 dotted;
19
- content: "";
13
+ border-top: $caret-width-base solid;
14
+ border-right: $caret-width-base solid transparent;
15
+ border-left: $caret-width-base solid transparent;
20
16
  }
21
17
 
22
18
  // The dropdown wrapper (div)
@@ -34,22 +30,24 @@
34
30
  position: absolute;
35
31
  top: 100%;
36
32
  left: 0;
37
- z-index: @zindex-dropdown;
33
+ z-index: $zindex-dropdown;
38
34
  display: none; // none by default, but block on "open" of the menu
39
35
  float: left;
40
36
  min-width: 160px;
41
37
  padding: 5px 0;
42
38
  margin: 2px 0 0; // override default ul
43
39
  list-style: none;
44
- font-size: @font-size-base;
45
- background-color: @dropdown-bg;
46
- border: 1px solid @dropdown-fallback-border; // IE8 fallback
47
- border: 1px solid @dropdown-border;
48
- border-radius: @border-radius-base;
49
- .box-shadow(0 6px 12px rgba(0,0,0,.175));
40
+ font-size: $font-size-base;
41
+ background-color: $dropdown-bg;
42
+ border: 1px solid $dropdown-fallback-border; // IE8 fallback
43
+ border: 1px solid $dropdown-border;
44
+ border-radius: $border-radius-base;
45
+ @include box-shadow(0 6px 12px rgba(0,0,0,.175));
50
46
  background-clip: padding-box;
51
47
 
52
48
  // Aligns the dropdown menu to right
49
+ //
50
+ // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
53
51
  &.pull-right {
54
52
  right: 0;
55
53
  left: auto;
@@ -57,7 +55,7 @@
57
55
 
58
56
  // Dividers (basically an hr) within the dropdown
59
57
  .divider {
60
- .nav-divider(@dropdown-divider-bg);
58
+ @include nav-divider($dropdown-divider-bg);
61
59
  }
62
60
 
63
61
  // Links within the dropdown menu
@@ -66,8 +64,8 @@
66
64
  padding: 3px 20px;
67
65
  clear: both;
68
66
  font-weight: normal;
69
- line-height: @line-height-base;
70
- color: @dropdown-link-color;
67
+ line-height: $line-height-base;
68
+ color: $dropdown-link-color;
71
69
  white-space: nowrap; // prevent links from randomly breaking onto new lines
72
70
  }
73
71
  }
@@ -77,8 +75,8 @@
77
75
  &:hover,
78
76
  &:focus {
79
77
  text-decoration: none;
80
- color: @dropdown-link-hover-color;
81
- background-color: @dropdown-link-hover-bg;
78
+ color: $dropdown-link-hover-color;
79
+ background-color: $dropdown-link-hover-bg;
82
80
  }
83
81
  }
84
82
 
@@ -87,10 +85,10 @@
87
85
  &,
88
86
  &:hover,
89
87
  &:focus {
90
- color: @dropdown-link-active-color;
88
+ color: $dropdown-link-active-color;
91
89
  text-decoration: none;
92
90
  outline: 0;
93
- background-color: @dropdown-link-active-bg;
91
+ background-color: $dropdown-link-active-bg;
94
92
  }
95
93
  }
96
94
 
@@ -102,7 +100,7 @@
102
100
  &,
103
101
  &:hover,
104
102
  &:focus {
105
- color: @dropdown-link-disabled-color;
103
+ color: $dropdown-link-disabled-color;
106
104
  }
107
105
  }
108
106
  // Nuke hover/focus effects
@@ -112,7 +110,7 @@
112
110
  text-decoration: none;
113
111
  background-color: transparent;
114
112
  background-image: none; // Remove CSS gradient
115
- .reset-filter();
113
+ @include reset-filter();
116
114
  cursor: not-allowed;
117
115
  }
118
116
  }
@@ -130,13 +128,32 @@
130
128
  }
131
129
  }
132
130
 
131
+ // Menu positioning
132
+ //
133
+ // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
134
+ // menu with the parent.
135
+ .dropdown-menu-right {
136
+ left: auto; // Reset the default from `.dropdown-menu`
137
+ right: 0;
138
+ }
139
+ // With v3, we enabled auto-flipping if you have a dropdown within a right
140
+ // aligned nav component. To enable the undoing of that, we provide an override
141
+ // to restore the default dropdown menu alignment.
142
+ //
143
+ // This is only for left-aligning a dropdown menu within a `.navbar-right` or
144
+ // `.pull-right` nav component.
145
+ .dropdown-menu-left {
146
+ left: 0;
147
+ right: auto;
148
+ }
149
+
133
150
  // Dropdown section headers
134
151
  .dropdown-header {
135
152
  display: block;
136
153
  padding: 3px 20px;
137
- font-size: @font-size-small;
138
- line-height: @line-height-base;
139
- color: @dropdown-header-color;
154
+ font-size: $font-size-small;
155
+ line-height: $line-height-base;
156
+ color: $dropdown-header-color;
140
157
  }
141
158
 
142
159
  // Backdrop to catch body clicks on mobile, etc.
@@ -146,7 +163,7 @@
146
163
  right: 0;
147
164
  bottom: 0;
148
165
  top: 0;
149
- z-index: @zindex-dropdown - 10;
166
+ z-index: ($zindex-dropdown - 10);
150
167
  }
151
168
 
152
169
  // Right aligned dropdowns
@@ -164,10 +181,8 @@
164
181
  .navbar-fixed-bottom .dropdown {
165
182
  // Reverse the caret
166
183
  .caret {
167
- // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
168
- // gets fixed, restore `border-top: 0;`.
169
- border-top: 0 dotted;
170
- border-bottom: 4px solid @dropdown-caret-color;
184
+ border-top: 0;
185
+ border-bottom: $caret-width-base solid;
171
186
  content: "";
172
187
  }
173
188
  // Different positioning for bottom up menu
@@ -183,10 +198,15 @@
183
198
  //
184
199
  // Reiterate per navbar.less and the modified component alignment there.
185
200
 
186
- @media (min-width: @grid-float-breakpoint) {
201
+ @media (min-width: $grid-float-breakpoint) {
187
202
  .navbar-right {
188
203
  .dropdown-menu {
189
- .pull-right > .dropdown-menu();
204
+ right: 0; left: auto;
205
+ }
206
+ // Necessary for overrides of the default right aligned menu.
207
+ // Will remove come v4 in all likelihood.
208
+ .dropdown-menu-left {
209
+ left: 0; right: auto;
190
210
  }
191
211
  }
192
212
  }
@@ -11,18 +11,22 @@ fieldset {
11
11
  padding: 0;
12
12
  margin: 0;
13
13
  border: 0;
14
+ // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets,
15
+ // so we reset that to ensure it behaves more like a standard block element.
16
+ // See https://github.com/twbs/bootstrap/issues/12359.
17
+ min-width: 0;
14
18
  }
15
19
 
16
20
  legend {
17
21
  display: block;
18
22
  width: 100%;
19
23
  padding: 0;
20
- margin-bottom: @line-height-computed;
21
- font-size: (@font-size-base * 1.5);
24
+ margin-bottom: $line-height-computed;
25
+ font-size: ($font-size-base * 1.5);
22
26
  line-height: inherit;
23
- color: @legend-color;
27
+ color: $legend-color;
24
28
  border: 0;
25
- border-bottom: 1px solid @legend-border-color;
29
+ border-bottom: 1px solid $legend-border-color;
26
30
  }
27
31
 
28
32
  label {
@@ -33,10 +37,14 @@ label {
33
37
 
34
38
 
35
39
  // Normalize form controls
40
+ //
41
+ // While most of our form styles require extra classes, some basic normalization
42
+ // is required to ensure optimum display with or without those classes to better
43
+ // address browser inconsistencies.
36
44
 
37
45
  // Override content-box in Normalize (* isn't specific enough)
38
46
  input[type="search"] {
39
- .box-sizing(border-box);
47
+ @include box-sizing(border-box);
40
48
  }
41
49
 
42
50
  // Position radios and checkboxes better
@@ -47,57 +55,37 @@ input[type="checkbox"] {
47
55
  line-height: normal;
48
56
  }
49
57
 
50
- // Set the height of select and file controls to match text inputs
58
+ // Set the height of file controls to match text inputs
51
59
  input[type="file"] {
52
60
  display: block;
53
61
  }
54
62
 
63
+ // Make range inputs behave like textual form controls
64
+ input[type="range"] {
65
+ display: block;
66
+ width: 100%;
67
+ }
68
+
55
69
  // Make multiple select elements height not fixed
56
70
  select[multiple],
57
71
  select[size] {
58
72
  height: auto;
59
73
  }
60
74
 
61
- // Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
62
- select optgroup {
63
- font-size: inherit;
64
- font-style: inherit;
65
- font-family: inherit;
66
- }
67
-
68
- // Focus for select, file, radio, and checkbox
75
+ // Focus for file, radio, and checkbox
69
76
  input[type="file"]:focus,
70
77
  input[type="radio"]:focus,
71
78
  input[type="checkbox"]:focus {
72
- .tab-focus();
73
- }
74
-
75
- // Fix for Chrome number input
76
- // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
77
- // See https://github.com/twbs/bootstrap/issues/8350 for more.
78
- input[type="number"] {
79
- &::-webkit-outer-spin-button,
80
- &::-webkit-inner-spin-button {
81
- height: auto;
82
- }
79
+ @include tab-focus();
83
80
  }
84
81
 
85
82
  // Adjust output element
86
83
  output {
87
84
  display: block;
88
- padding-top: (@padding-base-vertical + 1);
89
- font-size: @font-size-base;
90
- line-height: @line-height-base;
91
- color: @input-color;
92
- vertical-align: middle;
93
- }
94
-
95
- // Placeholder
96
- //
97
- // Placeholder text gets special styles because when browsers invalidate entire
98
- // lines if it doesn't understand a selector/
99
- .form-control {
100
- .placeholder();
85
+ padding-top: ($padding-base-vertical + 1);
86
+ font-size: $font-size-base;
87
+ line-height: $line-height-base;
88
+ color: $input-color;
101
89
  }
102
90
 
103
91
 
@@ -126,21 +114,23 @@ output {
126
114
  .form-control {
127
115
  display: block;
128
116
  width: 100%;
129
- height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
130
- padding: @padding-base-vertical @padding-base-horizontal;
131
- font-size: @font-size-base;
132
- line-height: @line-height-base;
133
- color: @input-color;
134
- vertical-align: middle;
135
- background-color: @input-bg;
117
+ height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
118
+ padding: $padding-base-vertical $padding-base-horizontal;
119
+ font-size: $font-size-base;
120
+ line-height: $line-height-base;
121
+ color: $input-color;
122
+ background-color: $input-bg;
136
123
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
137
- border: 1px solid @input-border;
138
- border-radius: @input-border-radius;
139
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
140
- .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
124
+ border: 1px solid $input-border;
125
+ border-radius: $input-border-radius;
126
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
127
+ @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
141
128
 
142
129
  // Customize the `:focus` state to imitate native WebKit styles.
143
- .form-control-focus();
130
+ @include form-control-focus();
131
+
132
+ // Placeholder
133
+ @include placeholder();
144
134
 
145
135
  // Disabled and read-only inputs
146
136
  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
@@ -150,13 +140,24 @@ output {
150
140
  &[readonly],
151
141
  fieldset[disabled] & {
152
142
  cursor: not-allowed;
153
- background-color: @input-bg-disabled;
143
+ background-color: $input-bg-disabled;
144
+ opacity: 1; // iOS fix for unreadable disabled content
154
145
  }
155
146
 
156
- // Reset height for `textarea`s
157
- textarea& {
158
- height: auto;
159
- }
147
+ // [converter] extracted textarea& to textarea.form-control
148
+ }
149
+
150
+ // Reset height for `textarea`s
151
+ textarea.form-control {
152
+ height: auto;
153
+ }
154
+
155
+ // Special styles for iOS date input
156
+ //
157
+ // In Mobile Safari, date inputs require a pixel line-height that matches the
158
+ // given height of the input.
159
+ input[type="date"] {
160
+ line-height: $input-height-base;
160
161
  }
161
162
 
162
163
 
@@ -177,14 +178,12 @@ output {
177
178
  .radio,
178
179
  .checkbox {
179
180
  display: block;
180
- min-height: @line-height-computed; // clear the floating input if there is no label text
181
+ min-height: $line-height-computed; // clear the floating input if there is no label text
181
182
  margin-top: 10px;
182
183
  margin-bottom: 10px;
183
184
  padding-left: 20px;
184
- vertical-align: middle;
185
185
  label {
186
186
  display: inline;
187
- margin-bottom: 0;
188
187
  font-weight: normal;
189
188
  cursor: pointer;
190
189
  }
@@ -232,31 +231,52 @@ input[type="checkbox"],
232
231
  }
233
232
  }
234
233
 
234
+
235
235
  // Form control sizing
236
- .input-sm {
237
- .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
238
- }
236
+ //
237
+ // Build on `.form-control` with modifier classes to decrease or increase the
238
+ // height and font-size of form controls.
239
239
 
240
- .input-lg {
241
- .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
242
- }
240
+ @include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
241
+
242
+ @include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
243
243
 
244
244
 
245
245
  // Form control feedback states
246
246
  //
247
247
  // Apply contextual and semantic states to individual form controls.
248
248
 
249
- // Warning
249
+ .has-feedback {
250
+ // Enable absolute positioning
251
+ position: relative;
252
+
253
+ // Ensure icons don't overlap text
254
+ .form-control {
255
+ padding-right: ($input-height-base * 1.25);
256
+ }
257
+
258
+ // Feedback icon (requires .glyphicon classes)
259
+ .form-control-feedback {
260
+ position: absolute;
261
+ top: ($line-height-computed + 5); // Height of the `label` and its margin
262
+ right: 0;
263
+ display: block;
264
+ width: $input-height-base;
265
+ height: $input-height-base;
266
+ line-height: $input-height-base;
267
+ text-align: center;
268
+ }
269
+ }
270
+
271
+ // Feedback states
272
+ .has-success {
273
+ @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
274
+ }
250
275
  .has-warning {
251
- .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
276
+ @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
252
277
  }
253
- // Error
254
278
  .has-error {
255
- .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
256
- }
257
- // Success
258
- .has-success {
259
- .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
279
+ @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
260
280
  }
261
281
 
262
282
 
@@ -267,7 +287,6 @@ input[type="checkbox"],
267
287
 
268
288
  .form-control-static {
269
289
  margin-bottom: 0; // Remove default margin from `p`
270
- padding-top: (@padding-base-vertical + 1);
271
290
  }
272
291
 
273
292
 
@@ -280,7 +299,7 @@ input[type="checkbox"],
280
299
  display: block; // account for any element using help-block
281
300
  margin-top: 5px;
282
301
  margin-bottom: 10px;
283
- color: lighten(@text-color, 25%); // lighten the text some for contrast
302
+ color: lighten($text-color, 25%); // lighten the text some for contrast
284
303
  }
285
304
 
286
305
 
@@ -299,9 +318,9 @@ input[type="checkbox"],
299
318
  .form-inline {
300
319
 
301
320
  // Kick in the inline
302
- @media (min-width: @screen-sm) {
321
+ @media (min-width: $screen-sm-min) {
303
322
  // Inline-block all the things for "inline"
304
- .form-group {
323
+ .form-group {
305
324
  display: inline-block;
306
325
  margin-bottom: 0;
307
326
  vertical-align: middle;
@@ -310,6 +329,13 @@ input[type="checkbox"],
310
329
  // In navbar-form, allow folks to *not* use `.form-group`
311
330
  .form-control {
312
331
  display: inline-block;
332
+ width: auto; // Prevent labels from stacking above inputs in `.form-group`
333
+ vertical-align: middle;
334
+ }
335
+
336
+ .control-label {
337
+ margin-bottom: 0;
338
+ vertical-align: middle;
313
339
  }
314
340
 
315
341
  // Remove default margin on radios/checkboxes that were used for stacking, and
@@ -321,12 +347,21 @@ input[type="checkbox"],
321
347
  margin-top: 0;
322
348
  margin-bottom: 0;
323
349
  padding-left: 0;
350
+ vertical-align: middle;
324
351
  }
325
352
  .radio input[type="radio"],
326
353
  .checkbox input[type="checkbox"] {
327
354
  float: none;
328
355
  margin-left: 0;
329
356
  }
357
+
358
+ // Validation states
359
+ //
360
+ // Reposition the icon because it's now within a grid column and columns have
361
+ // `position: relative;` on them. Also accounts for the grid gutter padding.
362
+ .has-feedback .form-control-feedback {
363
+ top: 0;
364
+ }
330
365
  }
331
366
  }
332
367
 
@@ -346,18 +381,37 @@ input[type="checkbox"],
346
381
  .checkbox-inline {
347
382
  margin-top: 0;
348
383
  margin-bottom: 0;
349
- padding-top: (@padding-base-vertical + 1); // Default padding plus a border
384
+ padding-top: ($padding-base-vertical + 1); // Default padding plus a border
385
+ }
386
+ // Account for padding we're adding to ensure the alignment and of help text
387
+ // and other content below items
388
+ .radio,
389
+ .checkbox {
390
+ min-height: ($line-height-computed + ($padding-base-vertical + 1));
350
391
  }
351
392
 
352
393
  // Make form groups behave like rows
353
394
  .form-group {
354
- .make-row();
395
+ @include make-row();
396
+ }
397
+
398
+ .form-control-static {
399
+ padding-top: ($padding-base-vertical + 1);
355
400
  }
356
401
 
357
402
  // Only right align form labels here when the columns stop stacking
358
- @media (min-width: @screen-sm) {
403
+ @media (min-width: $screen-sm-min) {
359
404
  .control-label {
360
405
  text-align: right;
361
406
  }
362
407
  }
408
+
409
+ // Validation states
410
+ //
411
+ // Reposition the icon because it's now within a grid column and columns have
412
+ // `position: relative;` on them. Also accounts for the grid gutter padding.
413
+ .has-feedback .form-control-feedback {
414
+ top: 0;
415
+ right: ($grid-gutter-width / 2);
416
+ }
363
417
  }
@@ -10,11 +10,11 @@
10
10
  // Import the fonts
11
11
  @font-face {
12
12
  font-family: 'Glyphicons Halflings';
13
- src: asset-url('glyphicons-halflings-regular.eot');
14
- src: asset-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
15
- asset-url('glyphicons-halflings-regular.woff') format('woff'),
16
- asset-url('glyphicons-halflings-regular.ttf') format('truetype'),
17
- asset-url('glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
13
+ src: font-url('#{$icon-font-name}.eot');
14
+ src: font-url('#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
15
+ font-url('#{$icon-font-name}.woff') format('woff'),
16
+ font-url('#{$icon-font-name}.ttf') format('truetype'),
17
+ font-url('#{$icon-font-name}.svg##{$icon-font-svg-id}') format('svg');
18
18
  }
19
19
 
20
20
  // Catchall baseclass
@@ -27,10 +27,7 @@
27
27
  font-weight: normal;
28
28
  line-height: 1;
29
29
  -webkit-font-smoothing: antialiased;
30
-
31
- &:empty{
32
- width: 1em;
33
- }
30
+ -moz-osx-font-smoothing: grayscale;
34
31
  }
35
32
 
36
33
  // Individual icons
@@ -72,6 +69,7 @@
72
69
  .glyphicon-repeat { &:before { content: "\e030"; } }
73
70
  .glyphicon-refresh { &:before { content: "\e031"; } }
74
71
  .glyphicon-list-alt { &:before { content: "\e032"; } }
72
+ .glyphicon-lock { &:before { content: "\e033"; } }
75
73
  .glyphicon-flag { &:before { content: "\e034"; } }
76
74
  .glyphicon-headphones { &:before { content: "\e035"; } }
77
75
  .glyphicon-volume-off { &:before { content: "\e036"; } }
@@ -82,7 +80,9 @@
82
80
  .glyphicon-tag { &:before { content: "\e041"; } }
83
81
  .glyphicon-tags { &:before { content: "\e042"; } }
84
82
  .glyphicon-book { &:before { content: "\e043"; } }
83
+ .glyphicon-bookmark { &:before { content: "\e044"; } }
85
84
  .glyphicon-print { &:before { content: "\e045"; } }
85
+ .glyphicon-camera { &:before { content: "\e046"; } }
86
86
  .glyphicon-font { &:before { content: "\e047"; } }
87
87
  .glyphicon-bold { &:before { content: "\e048"; } }
88
88
  .glyphicon-italic { &:before { content: "\e049"; } }
@@ -136,10 +136,12 @@
136
136
  .glyphicon-exclamation-sign { &:before { content: "\e101"; } }
137
137
  .glyphicon-gift { &:before { content: "\e102"; } }
138
138
  .glyphicon-leaf { &:before { content: "\e103"; } }
139
+ .glyphicon-fire { &:before { content: "\e104"; } }
139
140
  .glyphicon-eye-open { &:before { content: "\e105"; } }
140
141
  .glyphicon-eye-close { &:before { content: "\e106"; } }
141
142
  .glyphicon-warning-sign { &:before { content: "\e107"; } }
142
143
  .glyphicon-plane { &:before { content: "\e108"; } }
144
+ .glyphicon-calendar { &:before { content: "\e109"; } }
143
145
  .glyphicon-random { &:before { content: "\e110"; } }
144
146
  .glyphicon-comment { &:before { content: "\e111"; } }
145
147
  .glyphicon-magnet { &:before { content: "\e112"; } }
@@ -153,6 +155,7 @@
153
155
  .glyphicon-resize-horizontal { &:before { content: "\e120"; } }
154
156
  .glyphicon-hdd { &:before { content: "\e121"; } }
155
157
  .glyphicon-bullhorn { &:before { content: "\e122"; } }
158
+ .glyphicon-bell { &:before { content: "\e123"; } }
156
159
  .glyphicon-certificate { &:before { content: "\e124"; } }
157
160
  .glyphicon-thumbs-up { &:before { content: "\e125"; } }
158
161
  .glyphicon-thumbs-down { &:before { content: "\e126"; } }
@@ -165,13 +168,17 @@
165
168
  .glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
166
169
  .glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
167
170
  .glyphicon-globe { &:before { content: "\e135"; } }
171
+ .glyphicon-wrench { &:before { content: "\e136"; } }
168
172
  .glyphicon-tasks { &:before { content: "\e137"; } }
169
173
  .glyphicon-filter { &:before { content: "\e138"; } }
174
+ .glyphicon-briefcase { &:before { content: "\e139"; } }
170
175
  .glyphicon-fullscreen { &:before { content: "\e140"; } }
171
176
  .glyphicon-dashboard { &:before { content: "\e141"; } }
177
+ .glyphicon-paperclip { &:before { content: "\e142"; } }
172
178
  .glyphicon-heart-empty { &:before { content: "\e143"; } }
173
179
  .glyphicon-link { &:before { content: "\e144"; } }
174
180
  .glyphicon-phone { &:before { content: "\e145"; } }
181
+ .glyphicon-pushpin { &:before { content: "\e146"; } }
175
182
  .glyphicon-usd { &:before { content: "\e148"; } }
176
183
  .glyphicon-gbp { &:before { content: "\e149"; } }
177
184
  .glyphicon-sort { &:before { content: "\e150"; } }
@@ -224,13 +231,3 @@
224
231
  .glyphicon-cloud-upload { &:before { content: "\e198"; } }
225
232
  .glyphicon-tree-conifer { &:before { content: "\e199"; } }
226
233
  .glyphicon-tree-deciduous { &:before { content: "\e200"; } }
227
- .glyphicon-briefcase { &:before { content: "\1f4bc"; } }
228
- .glyphicon-calendar { &:before { content: "\1f4c5"; } }
229
- .glyphicon-pushpin { &:before { content: "\1f4cc"; } }
230
- .glyphicon-paperclip { &:before { content: "\1f4ce"; } }
231
- .glyphicon-camera { &:before { content: "\1f4f7"; } }
232
- .glyphicon-lock { &:before { content: "\1f512"; } }
233
- .glyphicon-bell { &:before { content: "\1f514"; } }
234
- .glyphicon-bookmark { &:before { content: "\1f516"; } }
235
- .glyphicon-fire { &:before { content: "\1f525"; } }
236
- .glyphicon-wrench { &:before { content: "\1f527"; } }