zurb-foundation 4.2.1 → 4.2.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. data/Gemfile.lock +2 -2
  2. data/README.md +9 -1
  3. data/composer.json +9 -0
  4. data/docs/CHANGELOG.md +19 -5
  5. data/docs/components/alert-boxes.html.erb +19 -19
  6. data/docs/components/breadcrumbs.html.erb +15 -15
  7. data/docs/components/buttons.html.erb +19 -19
  8. data/docs/components/clearing.html.erb +13 -13
  9. data/docs/components/dropdown-buttons.html.erb +13 -13
  10. data/docs/components/dropdown.html.erb +18 -18
  11. data/docs/components/flex-video.html.erb +3 -3
  12. data/docs/components/forms.html.erb +39 -39
  13. data/docs/components/grid.html.erb +1 -1
  14. data/docs/components/inline-lists.html.erb +5 -5
  15. data/docs/components/joyride.html.erb +18 -18
  16. data/docs/components/keystrokes.html.erb +10 -10
  17. data/docs/components/kitchen-sink.html.erb +1 -1
  18. data/docs/components/labels.html.erb +2 -2
  19. data/docs/components/pagination.html.erb +17 -17
  20. data/docs/components/panels.html.erb +13 -10
  21. data/docs/components/pricing-tables.html.erb +30 -30
  22. data/docs/components/reveal.html.erb +14 -14
  23. data/docs/components/section.html.erb +15 -15
  24. data/docs/components/side-nav.html.erb +9 -9
  25. data/docs/components/split-buttons.html.erb +23 -23
  26. data/docs/components/sub-nav.html.erb +11 -11
  27. data/docs/components/switch.html.erb +24 -24
  28. data/docs/components/tables.html.erb +15 -15
  29. data/docs/components/thumbnails.html.erb +5 -5
  30. data/docs/components/tooltips.html.erb +18 -18
  31. data/docs/components/top-bar.html.erb +39 -39
  32. data/docs/components/type.html.erb +63 -63
  33. data/docs/css/docs.scss +3 -1
  34. data/docs/img/favicons/apple-touch-icon-114x114-precomposed.png +0 -0
  35. data/docs/img/favicons/apple-touch-icon-144x144-precomposed.png +0 -0
  36. data/docs/img/favicons/apple-touch-icon-72x72-precomposed.png +0 -0
  37. data/docs/img/favicons/apple-touch-icon-precomposed.png +0 -0
  38. data/docs/img/favicons/favicon.ico +0 -0
  39. data/docs/layout.html.erb +10 -1
  40. data/docs/sass.html.erb +258 -292
  41. data/js/foundation/foundation.alerts.js +3 -3
  42. data/js/foundation/foundation.clearing.js +5 -5
  43. data/js/foundation/foundation.dropdown.js +1 -1
  44. data/js/foundation/foundation.forms.js +23 -14
  45. data/js/foundation/foundation.interchange.js +8 -8
  46. data/js/foundation/foundation.joyride.js +2 -2
  47. data/js/foundation/foundation.js +2 -2
  48. data/js/foundation/foundation.magellan.js +4 -2
  49. data/js/foundation/foundation.orbit.js +2 -2
  50. data/js/foundation/foundation.placeholder.js +21 -1
  51. data/js/foundation/foundation.reveal.js +3 -3
  52. data/js/foundation/foundation.section.js +4 -3
  53. data/js/foundation/foundation.tooltips.js +2 -2
  54. data/js/foundation/foundation.topbar.js +8 -8
  55. data/js/foundation/index.js +1 -1
  56. data/js/vendor/jquery.js +4412 -4202
  57. data/js/vendor/zepto.js +116 -0
  58. data/lib/foundation/sprockets.rb +4 -0
  59. data/lib/foundation/version.rb +1 -1
  60. data/lib/zurb-foundation.rb +6 -2
  61. data/scss/foundation/_variables.scss +56 -55
  62. data/scss/foundation/components/_alert-boxes.scss +20 -20
  63. data/scss/foundation/components/_block-grid.scss +1 -1
  64. data/scss/foundation/components/_breadcrumbs.scss +15 -15
  65. data/scss/foundation/components/_buttons.scss +23 -21
  66. data/scss/foundation/components/_clearing.scss +14 -13
  67. data/scss/foundation/components/_custom-forms.scss +35 -35
  68. data/scss/foundation/components/_dropdown-buttons.scss +13 -13
  69. data/scss/foundation/components/_dropdown.scss +19 -18
  70. data/scss/foundation/components/_flex-video.scss +3 -3
  71. data/scss/foundation/components/_forms.scss +40 -40
  72. data/scss/foundation/components/_grid.scss +1 -1
  73. data/scss/foundation/components/_inline-lists.scss +4 -4
  74. data/scss/foundation/components/_joyride.scss +16 -16
  75. data/scss/foundation/components/_keystrokes.scss +10 -10
  76. data/scss/foundation/components/_labels.scss +3 -3
  77. data/scss/foundation/components/_pagination.scss +17 -17
  78. data/scss/foundation/components/_panels.scss +21 -18
  79. data/scss/foundation/components/_pricing-tables.scss +30 -30
  80. data/scss/foundation/components/_reveal.scss +14 -14
  81. data/scss/foundation/components/_section.scss +16 -16
  82. data/scss/foundation/components/_side-nav.scss +9 -9
  83. data/scss/foundation/components/_split-buttons.scss +23 -23
  84. data/scss/foundation/components/_sub-nav.scss +11 -11
  85. data/scss/foundation/components/_switch.scss +23 -23
  86. data/scss/foundation/components/_tables.scss +15 -15
  87. data/scss/foundation/components/_thumbs.scss +5 -5
  88. data/scss/foundation/components/_tooltips.scss +17 -17
  89. data/scss/foundation/components/_top-bar.scss +37 -37
  90. data/scss/foundation/components/_type.scss +63 -63
  91. data/templates/upgrade/manifest.rb +2 -3
  92. metadata +11 -4
@@ -1,14 +1,14 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- zurb-foundation (4.2.1)
4
+ zurb-foundation (4.2.2)
5
5
  sass (>= 3.2.0)
6
6
 
7
7
  GEM
8
8
  remote: https://rubygems.org/
9
9
  specs:
10
10
  rake (10.0.3)
11
- sass (3.2.7)
11
+ sass (3.2.9)
12
12
 
13
13
  PLATFORMS
14
14
  ruby
data/README.md CHANGED
@@ -39,11 +39,12 @@ WordPress (Versions marked 3/20/13)
39
39
  * [WP-Foundation](http://320press.com/wp-foundation/features/) by 320press using Foundation version 3
40
40
  * [f415](https://github.com/javorszky/f415) by Gabor Javorszky
41
41
  * [Narga Core](https://github.com/Narga/narga-core) by Nguyễn Đình Quân
42
+ * [Basey](https://github.com/zslabs/basey-theme) by Zach Schnackel
42
43
 
43
44
  Joomla
44
45
 
45
46
  * [Joomla Template](https://github.com/meridiansoftech/joomla_foundation_template) by Arnold Mwumva Ford, Meridian Softech
46
- * [Joomla Template](https://github.com/antonydoyle/siegeengine) by Antony Doyle, Siege21
47
+ * [Joomla Template](https://github.com/antonydoyle/siegeengine2) by Antony Doyle, Siege21
47
48
 
48
49
  Drupal
49
50
 
@@ -78,6 +79,9 @@ Magento
78
79
  * [Magento & Foundation](https://github.com/nandroid/MagentoFoundation) by Nandroid
79
80
  * [Waterlee Boilerplate](https://github.com/zeljkoprsa/waterlee-boilerplate) by Jake Sharp
80
81
 
82
+ Metoer
83
+ * [Meteor Package for Foundation](https://atmosphere.meteor.com/package/foundation) by Eric Wallace
84
+
81
85
  Python
82
86
  * [Pyramid Scaffold](https://github.com/ppinette/pyramid_foundation) by Parker Pinette
83
87
 
@@ -89,6 +93,10 @@ Shopify
89
93
 
90
94
  * [Foundationify Shopify Theme](https://github.com/lukebussey/foundationify) by Luke Bussey
91
95
 
96
+ Orchard
97
+
98
+ * [Foundation Theme for Orchard CMS](https://foundationorchardcms.codeplex.com/)
99
+
92
100
  Other Implementations
93
101
 
94
102
  * [Mobile First](https://github.com/adamfairhead/mobile-first-foundation) by Adam Fairhead
@@ -0,0 +1,9 @@
1
+ {
2
+ "name": "zurb/foundation"
3
+ , "description": "The most advanced responsive front-end framework in the world."
4
+ , "keywords": ["foundation", "scss"]
5
+ , "homepage": "http://foundation.zurb.com"
6
+ , "author": "ZURB Inc."
7
+ , "license": "MIT"
8
+
9
+ }
@@ -1,8 +1,22 @@
1
+ ### 4.2.2- June 11, 2013
2
+ * Added touch events to zepto core.
3
+ * Fixed a topbar scroll issue.
4
+ * Fixed a reveal scroll issue.
5
+ * Bumped jQuery to 1.10.1
6
+ * Added PHP template.
7
+ * Removed default webkit appearance on buttons.
8
+ * Updated placeholder.js to actually initiate properly, this should work just fine now.
9
+ * Added a "fixed" class to magellan for alternate styling.
10
+ * Fixed path to variables file for Compass upgrade path.
11
+ * Other small bug fixes.
12
+
13
+ You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.2.1...v4.2.2).
14
+
1
15
  ### 4.2.1- May 31, 2013
2
- * Add missing `$experimental` Sass variable
3
- * Bug fixes for top bar in mobile view
4
- * Retina is now default media query
5
- * Removes incompatible Zepto function used in custom forms
16
+ * Add missing `$experimental` Sass variable.
17
+ * Bug fixes for top bar in mobile view.
18
+ * Retina is now a default named media query for Interchange.
19
+ * Removes incompatible Zepto function used in custom forms.
6
20
 
7
21
  You can compare the commits [here](https://github.com/zurb/foundation/compare/v4.2.0...v4.2.1).
8
22
 
@@ -302,4 +316,4 @@ Various bug fixes with the downloader, gem, and Sass install.
302
316
  ---
303
317
 
304
318
  ### **3.0**- June 30, 2012
305
- Initial launch of Foundation 3, deprecating Foundation 2.2.1. Major enhancements include Sass/SCSS development, new grid system with box-sizing: border-box, new form styles, new UI elements, retooled download and install options, new docs, new marketing site.
319
+ Initial launch of Foundation 3, deprecating Foundation 2.2.1. Major enhancements include Sass/SCSS development, new grid system with box-sizing: border-box, new form styles, new UI elements, retooled download and install options, new docs, new marketing site.
@@ -145,36 +145,36 @@
145
145
  <h5>Default SCSS Variables</h5>
146
146
  <%= code_example '
147
147
  /* We use this to control alert padding. */
148
- $alert-padding-top: emCalc(11px);
149
- $alert-padding-left: $alert-padding-top;
150
- $alert-padding-right: $alert-padding-top + emCalc(10px);
151
- $alert-padding-bottom: $alert-padding-top + emCalc(1px);
148
+ $alert-padding-top: emCalc(11px);
149
+ $alert-padding-left: $alert-padding-top;
150
+ $alert-padding-right: $alert-padding-top + emCalc(10px);
151
+ $alert-padding-bottom: $alert-padding-top + emCalc(1px);
152
152
 
153
153
  /* We use these to control text style. */
154
- $alert-font-weight: bold;
155
- $alert-font-size: emCalc(14px);
156
- $alert-font-color: #fff;
157
- $alert-font-color-alt: darken($secondary-color, 60%);
154
+ $alert-font-weight: bold;
155
+ $alert-font-size: emCalc(14px);
156
+ $alert-font-color: #fff;
157
+ $alert-font-color-alt: darken($secondary-color, 60%);
158
158
 
159
159
  /* We use this for close hover effect. */
160
- $alert-function-factor: 10%;
160
+ $alert-function-factor: 10%;
161
161
 
162
162
  /* We use these to control border styles. */
163
- $alert-border-style: solid;
164
- $alert-border-width: 1px;
165
- $alert-border-color: darken($primary-color, $alert-function-factor);
166
- $alert-bottom-margin: emCalc(20px);
163
+ $alert-border-style: solid;
164
+ $alert-border-width: 1px;
165
+ $alert-border-color: darken($primary-color, $alert-function-factor);
166
+ $alert-bottom-margin: emCalc(20px);
167
167
 
168
168
  /* We use these to style the close buttons */
169
- $alert-close-color: #333;
170
- $alert-close-position: emCalc(5px);
171
- $alert-close-font-size: emCalc(22px);
172
- $alert-close-opacity: 0.3;
169
+ $alert-close-color: #333;
170
+ $alert-close-position: emCalc(5px);
171
+ $alert-close-font-size: emCalc(22px);
172
+ $alert-close-opacity: 0.3;
173
173
  $alert-close-opacity-hover: 0.5;
174
- $alert-close-padding: 5px 4px 4px;
174
+ $alert-close-padding: 5px 4px 4px;
175
175
 
176
176
  /* We use this to control border radius */
177
- $alert-radius: $global-radius;
177
+ $alert-radius: $global-radius;
178
178
  ', :css %>
179
179
 
180
180
  <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
@@ -117,30 +117,30 @@
117
117
  <h5>Default SCSS Variables</h5>
118
118
  <%= code_example '
119
119
  /* We use this to set the background color for the breadcrumb container */
120
- $crumb-bg: lighten($secondaryColor, 5%);
120
+ $crumb-bg: lighten($secondaryColor, 5%);
121
121
 
122
122
  /* We use these to set the padding around the breadcrumbs. */
123
- $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
124
- $crumb-side-padding: emCalc(12px);
123
+ $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
124
+ $crumb-side-padding: emCalc(12px);
125
125
 
126
126
  /* We use these to control border styles. */
127
- $crumb-function-factor: 10%;
128
- $crumb-border-size: 1px;
129
- $crumb-border-style: solid;
130
- $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
131
- $crumb-radius: $global-radius;
127
+ $crumb-function-factor: 10%;
128
+ $crumb-border-size: 1px;
129
+ $crumb-border-style: solid;
130
+ $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
131
+ $crumb-radius: $global-radius;
132
132
 
133
133
  /* We use these to set various text styles for breadcrumbs. */
134
- $crumb-font-size: emCalc(11px);
135
- $crumb-font-color: $primary-color;
136
- $crumb-font-color-current: #333;
134
+ $crumb-font-size: emCalc(11px);
135
+ $crumb-font-color: $primary-color;
136
+ $crumb-font-color-current: #333;
137
137
  $crumb-font-color-unavailable: #999;
138
- $crumb-font-transform: uppercase;
139
- $crumb-link-decor: underline;
138
+ $crumb-font-transform: uppercase;
139
+ $crumb-link-decor: underline;
140
140
 
141
141
  /* We use these to control the slash between breadcrumbs */
142
- $crumb-slash-color: #aaa;
143
- $crumb-slash: "/";
142
+ $crumb-slash-color: #aaa;
143
+ $crumb-slash: "/";
144
144
  ', :css %>
145
145
 
146
146
  <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
@@ -174,35 +174,35 @@ $active: true
174
174
  <h5>Default SCSS Variables</h5>
175
175
  <%= code_example '
176
176
  /* We use these to build padding for buttons. */
177
- $button-med: emCalc(12px);
178
- $button-tny: emCalc(7px);
179
- $button-sml: emCalc(9px);
180
- $button-lrg: emCalc(16px);
177
+ $button-med: emCalc(12px);
178
+ $button-tny: emCalc(7px);
179
+ $button-sml: emCalc(9px);
180
+ $button-lrg: emCalc(16px);
181
181
 
182
182
  /* We use this to control the display property. */
183
- $button-display: inline-block;
184
- $button-margin-bottom: emCalc(20px);
183
+ $button-display: inline-block;
184
+ $button-margin-bottom: emCalc(20px);
185
185
 
186
186
  /* We use these to control button text styles. */
187
- $button-font-color: #fff;
188
- $button-font-color-alt: #333;
189
- $button-font-med: emCalc(16px);
190
- $button-font-tny: emCalc(11px);
191
- $button-font-sml: emCalc(13px);
192
- $button-font-lrg: emCalc(20px);
193
- $button-font-weight: bold;
194
- $button-font-align: center;
187
+ $button-font-color: #fff;
188
+ $button-font-color-alt: #333;
189
+ $button-font-med: emCalc(16px);
190
+ $button-font-tny: emCalc(11px);
191
+ $button-font-sml: emCalc(13px);
192
+ $button-font-lrg: emCalc(20px);
193
+ $button-font-weight: bold;
194
+ $button-font-align: center;
195
195
 
196
196
  /* We use these to control various hover effects. */
197
- $button-function-factor: 10%;
197
+ $button-function-factor: 10%;
198
198
 
199
199
  /* We use these to control button border styles. */
200
- $button-border-width: 1px;
201
- $button-border-style: solid;
202
- $button-border-color: darken($primary-color, $button-function-factor);
200
+ $button-border-width: 1px;
201
+ $button-border-style: solid;
202
+ $button-border-color: darken($primary-color, $button-function-factor);
203
203
 
204
204
  /* We use this to set the default radius used throughout the core. */
205
- $button-radius: $global-radius;
205
+ $button-radius: $global-radius;
206
206
 
207
207
  /* We use this to set default opacity for disabled buttons. */
208
208
  $button-disabled-opacity: 0.6;
@@ -100,27 +100,27 @@
100
100
  <p>We opted not to create mixins for this plugin because it relies on classes in the JS to work. These variables should give you the control you need to change styles as you see fit:</p>
101
101
  <%= code_example '
102
102
  /* We use these to set the background colors for parts of Clearing. */
103
- $clearing-bg: #111;
104
- $clearing-caption-bg: $clearing-bg;
105
- $clearing-carousel-bg: #111;
106
- $clearing-img-bg: $clearing-bg;
103
+ $clearing-bg: #111;
104
+ $clearing-caption-bg: $clearing-bg;
105
+ $clearing-carousel-bg: #111;
106
+ $clearing-img-bg: $clearing-bg;
107
107
 
108
108
  /* We use these to style the close button */
109
- $clearing-close-color: #fff;
110
- $clearing-close-size: 40px;
109
+ $clearing-close-color: #fff;
110
+ $clearing-close-size: 40px;
111
111
 
112
112
  /* We use these to style the arrows */
113
- $clearing-arrow-size: 16px;
114
- $clearing-arrow-color: $clearing-close-color;
113
+ $clearing-arrow-size: 16px;
114
+ $clearing-arrow-color: $clearing-close-color;
115
115
 
116
116
  /* We use these to style captions */
117
- $clearing-caption-font-color: #fff;
118
- $clearing-caption-padding: 10px 30px;
117
+ $clearing-caption-font-color: #fff;
118
+ $clearing-caption-padding: 10px 30px;
119
119
 
120
120
  /* We use these to make the image and carousel height and style */
121
- $clearing-active-img-height: 75%;
122
- $clearing-carousel-height: 150px;
123
- $clearing-carousel-thumb-width: 175px;
121
+ $clearing-active-img-height: 75%;
122
+ $clearing-carousel-height: 150px;
123
+ $clearing-carousel-thumb-width: 175px;
124
124
  $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
125
125
  ', :css %>
126
126
 
@@ -117,32 +117,32 @@ $base-style: true
117
117
  <h5>Default SCSS Variables</h5>
118
118
  <%= code_example '
119
119
  /* We use these to set the color of the pip in dropdown buttons */
120
- $dropdown-button-pip-color: #fff;
120
+ $dropdown-button-pip-color: #fff;
121
121
  $dropdown-button-pip-color-alt: #333;
122
122
 
123
123
  /* We use these to style tiny dropdown buttons */
124
- $dropdown-button-padding-tny: $button-tny * 5;
125
- $dropdown-button-pip-size-tny: $button-tny;
124
+ $dropdown-button-padding-tny: $button-tny * 5;
125
+ $dropdown-button-pip-size-tny: $button-tny;
126
126
  $dropdown-button-pip-right-tny: $button-tny * 2;
127
- $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
127
+ $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
128
128
 
129
129
  /* We use these to style small dropdown buttons */
130
- $dropdown-button-padding-sml: $button-sml * 5;
131
- $dropdown-button-pip-size-sml: $button-sml;
130
+ $dropdown-button-padding-sml: $button-sml * 5;
131
+ $dropdown-button-pip-size-sml: $button-sml;
132
132
  $dropdown-button-pip-right-sml: $button-sml * 2;
133
- $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(2px);
133
+ $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(2px);
134
134
 
135
135
  /* We use these to style medium dropdown buttons */
136
- $dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
137
- $dropdown-button-pip-size-med: $button-med - emCalc(3px);
136
+ $dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
137
+ $dropdown-button-pip-size-med $button-med - emCalc(3px);
138
138
  $dropdown-button-pip-right-med: $button-med * 2;
139
- $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
139
+ $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
140
140
 
141
141
  /* We use these to style large dropdown buttons */
142
- $dropdown-button-padding-lrg: $button-lrg * 4;
143
- $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
142
+ $dropdown-button-padding-lrg: $button-lrg * 4;
143
+ $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
144
144
  $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
145
- $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
145
+ $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
146
146
  ', :css %>
147
147
 
148
148
  <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
@@ -121,35 +121,35 @@ $max-width: $f-dropdown-max-width
121
121
 
122
122
  <%= code_example '
123
123
  /* We use these to controls height and width styles. */
124
- $f-dropdown-max-width: 200px;
125
- $f-dropdown-height: auto;
126
- $f-dropdown-max-height: none;
127
- $f-dropdown-margin-top: 2px;
124
+ $f-dropdown-max-width: 200px;
125
+ $f-dropdown-height: auto;
126
+ $f-dropdown-max-height: none;
127
+ $f-dropdown-margin-top: 2px;
128
128
 
129
129
  /* We use this to control the background color */
130
- $f-dropdown-bg: #fff;
130
+ $f-dropdown-bg: #fff;
131
131
 
132
132
  /* We use this to set the border styles for dropdowns. */
133
- $f-dropdown-border-style: solid;
134
- $f-dropdown-border-width: 1px;
135
- $f-dropdown-border-color: darken(#fff, 20%);
133
+ $f-dropdown-border-style: solid;
134
+ $f-dropdown-border-width: 1px;
135
+ $f-dropdown-border-color: darken(#fff, 20%);
136
136
 
137
137
  /* We use these to style the triangle pip. */
138
- $f-dropdown-triangle-size: 6px;
139
- $f-dropdown-triangle-color: #fff;
138
+ $f-dropdown-triangle-size: 6px;
139
+ $f-dropdown-triangle-color: #fff;
140
140
  $f-dropdown-triangle-side-offset: 10px;
141
141
 
142
142
  /* We use these to control styles for the list elements. */
143
- $f-dropdown-list-style: none;
144
- $f-dropdown-font-color: #555;
145
- $f-dropdown-font-size: emCalc(14px);
146
- $f-dropdown-list-padding: emCalc(5px) emCalc(10px);
147
- $f-dropdown-line-height: emCalc(18px);
148
- $f-dropdown-list-hover-bg: #eeeeee;
149
- $dropdown-mobile-default-float: 0;
143
+ $f-dropdown-list-style: none;
144
+ $f-dropdown-font-color: #555;
145
+ $f-dropdown-font-size: emCalc(14px);
146
+ $f-dropdown-list-padding: emCalc(5px) emCalc(10px);
147
+ $f-dropdown-line-height: emCalc(18px);
148
+ $f-dropdown-list-hover-bg: #eeeeee;
149
+ $dropdown-mobile-default-float: 0;
150
150
 
151
151
  /* We use this to control the styles for when the dropdown has custom content. */
152
- $f-dropdown-content-padding: emCalc(20px);', :css %>
152
+ $f-dropdown-content-padding: emCalc(20px);', :css %>
153
153
 
154
154
  <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
155
155
 
@@ -76,9 +76,9 @@
76
76
 
77
77
  <%= code_example '
78
78
  /* We use these to control video container padding and margins */
79
- $flex-video-padding-top: emCalc(25px);
80
- $flex-video-padding-bottom: 67.5%;
81
- $flex-video-margin-bottom: emCalc(16px);
79
+ $flex-video-padding-top: emCalc(25px);
80
+ $flex-video-padding-bottom: 67.5%;
81
+ $flex-video-margin-bottom: emCalc(16px);
82
82
 
83
83
  /* We use this to control widescreen bottom padding */
84
84
  $flex-video-widescreen-padding-bottom: 57.25%;
@@ -412,58 +412,58 @@ $is-button: false
412
412
  <h5>Default SCSS Variables</h5>
413
413
  <%= code_example '
414
414
  /* We use this to set the base for lots of form spacing and positioning styles */
415
- $form-spacing: emCalc(16px);
415
+ $form-spacing: emCalc(16px);
416
416
 
417
417
  /* We use these to style the labels in different ways */
418
- $form-label-pointer: pointer;
419
- $form-label-font-size: emCalc(14px);
420
- $form-label-font-weight: 500;
421
- $form-label-font-color: lighten(#000, 30%);
422
- $form-label-bottom-margin: emCalc(3px);
423
- $input-font-color: rgba(0,0,0,0.75);
424
- $input-font-size: emCalc(14px);
425
- $input-bg-color: #fff;
426
- $input-focus-bg-color: darken(#fff, 2%);
427
- $input-border-color: darken(#fff, 20%);
428
- $input-focus-border-color: darken(#fff, 40%);
429
- $input-border-style: solid;
430
- $input-border-width: 1px;
431
- $input-disabled-bg: #ddd;
432
- $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
433
- $input-include-glowing-effect: true;
418
+ $form-label-pointer: pointer;
419
+ $form-label-font-size: emCalc(14px);
420
+ $form-label-font-weight: 500;
421
+ $form-label-font-color: lighten(#000, 30%);
422
+ $form-label-bottom-margin: emCalc(3px);
423
+ $input-font-color: rgba(0,0,0,0.75);
424
+ $input-font-size: emCalc(14px);
425
+ $input-bg-color: #fff;
426
+ $input-focus-bg-color: darken(#fff, 2%);
427
+ $input-border-color: darken(#fff, 20%);
428
+ $input-focus-border-color: darken(#fff, 40%);
429
+ $input-border-style: solid;
430
+ $input-border-width: 1px;
431
+ $input-disabled-bg: #ddd;
432
+ $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
433
+ $input-include-glowing-effect: true;
434
434
 
435
435
  /* We use these to style the fieldset border and spacing. */
436
- $fieldset-border-style: solid;
437
- $fieldset-border-width: 1px;
438
- $fieldset-border-color: #ddd;
439
- $fieldset-padding: emCalc(20px);
440
- $fieldset-margin: emCalc(18px) 0;
436
+ $fieldset-border-style: solid;
437
+ $fieldset-border-width: 1px;
438
+ $fieldset-border-color: #ddd;
439
+ $fieldset-padding: emCalc(20px);
440
+ $fieldset-margin: emCalc(18px) 0;
441
441
 
442
442
  /* We use these to style the legends when you use them */
443
- $legend-bg: #fff;
444
- $legend-font-weight: bold;
445
- $legend-padding: 0 emCalc(3px);
443
+ $legend-bg: #fff;
444
+ $legend-font-weight: bold;
445
+ $legend-padding: 0 emCalc(3px);
446
446
 
447
447
  /* We use these to style the prefix and postfix input elements */
448
- $input-prefix-bg: darken(#fff, 5%);
449
- $input-prefix-border-color: darken(#fff, 20%);
450
- $input-prefix-border-size: 1px;
451
- $input-prefix-border-type: solid;
452
- $input-prefix-overflow: hidden;
453
- $input-prefix-font-color: #333;
454
- $input-prefix-font-color-alt: #fff;
448
+ $input-prefix-bg: darken(#fff, 5%);
449
+ $input-prefix-border-color: darken(#fff, 20%);
450
+ $input-prefix-border-size: 1px;
451
+ $input-prefix-border-type: solid;
452
+ $input-prefix-overflow: hidden;
453
+ $input-prefix-font-color: #333;
454
+ $input-prefix-font-color-alt: #fff;
455
455
 
456
456
  /* We use these to style the error states for inputs and labels */
457
- $input-error-message-padding: emCalc(6px) emCalc(4px);
458
- $input-error-message-top: -($form-spacing) - emCalc(5px);
459
- $input-error-message-font-size: emCalc(12px);
460
- $input-error-message-font-weight: bold;
461
- $input-error-message-font-color: #fff;
457
+ $input-error-message-padding: emCalc(6px) emCalc(4px);
458
+ $input-error-message-top: -($form-spacing) - emCalc(5px);
459
+ $input-error-message-font-size: emCalc(12px);
460
+ $input-error-message-font-weight: bold;
461
+ $input-error-message-font-color: #fff;
462
462
  $input-error-message-font-color-alt: #333;
463
463
 
464
464
  +/* We use this to style the glowing effect of inputs when focused */
465
- +$glowing-effect-fade-time: 0.45s !default;
466
- +$glowing-effect-color: $input-focus-border-color !default;
465
+ +$glowing-effect-fade-time: 0.45s !default;
466
+ +$glowing-effect-color: $input-focus-border-color !default;
467
467
 
468
468
  ', :css %>
469
469