zurb-foundation 4.3.1 → 4.3.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +4 -0
- data/Gemfile.lock +31 -2
- data/Gruntfile.js +54 -10
- data/LICENSE +2 -2
- data/README.md +11 -2
- data/Rakefile +9 -0
- data/docs/CHANGELOG.md +9 -0
- data/docs/Procfile +2 -2
- data/docs/components/abide.html.erb +30 -6
- data/docs/components/alert-boxes.html.erb +35 -10
- data/docs/components/block-grid.html.erb +1 -1
- data/docs/components/breadcrumbs.html.erb +4 -4
- data/docs/components/button-groups.html.erb +2 -2
- data/docs/components/buttons.html.erb +10 -10
- data/docs/components/clearing.html.erb +28 -2
- data/docs/components/custom-forms.html.erb +9 -1
- data/docs/components/dropdown-buttons.html.erb +36 -11
- data/docs/components/dropdown.html.erb +44 -13
- data/docs/components/flex-video.html.erb +3 -3
- data/docs/components/forms.html.erb +10 -10
- data/docs/components/global.html.erb +15 -20
- data/docs/components/grid.html.erb +24 -23
- data/docs/components/inline-lists.html.erb +3 -3
- data/docs/components/interchange.html.erb +28 -2
- data/docs/components/joyride.html.erb +34 -10
- data/docs/components/keystrokes.html.erb +3 -3
- data/docs/components/kitchen-sink.html.erb +1 -1
- data/docs/components/labels.html.erb +3 -3
- data/docs/components/magellan.html.erb +25 -2
- data/docs/components/orbit.html.erb +39 -9
- data/docs/components/pagination.html.erb +7 -7
- data/docs/components/panels.html.erb +3 -3
- data/docs/components/pricing-tables.html.erb +11 -11
- data/docs/components/progress-bars.html.erb +5 -5
- data/docs/components/reveal.html.erb +31 -8
- data/docs/components/section.html.erb +61 -37
- data/docs/components/side-nav.html.erb +4 -4
- data/docs/components/split-buttons.html.erb +37 -15
- data/docs/components/sub-nav.html.erb +10 -6
- data/docs/components/switch.html.erb +2 -2
- data/docs/components/tables.html.erb +7 -7
- data/docs/components/tooltips.html.erb +30 -6
- data/docs/components/top-bar.html.erb +101 -13
- data/docs/components/type.html.erb +16 -16
- data/docs/config.ru +18 -1
- data/docs/controller.rb +1 -1
- data/docs/css/_coderay.scss +2 -2
- data/docs/css/_footer.scss +7 -7
- data/docs/css/_offcanvas.scss +16 -16
- data/docs/css/docs.scss +1 -3
- data/docs/index.html.erb +29 -29
- data/docs/layout.html.erb +5 -5
- data/docs/media-queries.html.erb +3 -3
- data/docs/rails.html.erb +2 -1
- data/docs/sass.html.erb +188 -146
- data/docs/support.html.erb +2 -2
- data/foundation.gemspec +1 -0
- data/js/foundation/foundation.abide.js +5 -5
- data/js/foundation/foundation.alerts.js +9 -4
- data/js/foundation/foundation.clearing.js +2 -2
- data/js/foundation/foundation.dropdown.js +11 -5
- data/js/foundation/foundation.forms.js +51 -28
- data/js/foundation/foundation.joyride.js +7 -5
- data/js/foundation/foundation.js +25 -1
- data/js/foundation/foundation.magellan.js +3 -2
- data/js/foundation/foundation.orbit.js +78 -58
- data/js/foundation/foundation.placeholder.js +424 -177
- data/js/foundation/foundation.reveal.js +39 -16
- data/js/foundation/foundation.section.js +62 -32
- data/js/foundation/foundation.tooltips.js +3 -2
- data/js/foundation/foundation.topbar.js +139 -69
- data/lib/foundation/generators/templates/application.html.erb +2 -1
- data/lib/foundation/version.rb +1 -1
- data/lib/zurb-foundation.rb +12 -0
- data/package.json +4 -3
- data/scss/foundation/_variables.scss +183 -159
- data/scss/foundation/components/_alert-boxes.scss +8 -8
- data/scss/foundation/components/_block-grid.scss +1 -1
- data/scss/foundation/components/_breadcrumbs.scss +3 -3
- data/scss/foundation/components/_button-groups.scss +2 -2
- data/scss/foundation/components/_buttons.scss +20 -20
- data/scss/foundation/components/_custom-forms.scss +19 -14
- data/scss/foundation/components/_dropdown-buttons.scss +8 -8
- data/scss/foundation/components/_dropdown.scss +4 -4
- data/scss/foundation/components/_flex-video.scss +2 -2
- data/scss/foundation/components/_forms.scss +28 -18
- data/scss/foundation/components/_global.scss +43 -18
- data/scss/foundation/components/_grid-5.scss +4 -4
- data/scss/foundation/components/_grid.scss +6 -4
- data/scss/foundation/components/_inline-lists.scss +3 -3
- data/scss/foundation/components/_joyride.scss +10 -10
- data/scss/foundation/components/_keystrokes.scss +2 -2
- data/scss/foundation/components/_labels.scss +2 -2
- data/scss/foundation/components/_orbit.scss +58 -44
- data/scss/foundation/components/_pagination.scss +6 -6
- data/scss/foundation/components/_panels.scss +7 -4
- data/scss/foundation/components/_pricing-tables.scss +10 -10
- data/scss/foundation/components/_progress-bars.scss +3 -3
- data/scss/foundation/components/_reveal.scss +5 -5
- data/scss/foundation/components/_section.scss +21 -21
- data/scss/foundation/components/_side-nav.scss +3 -3
- data/scss/foundation/components/_split-buttons.scss +7 -7
- data/scss/foundation/components/_sub-nav.scss +26 -10
- data/scss/foundation/components/_switch.scss +15 -11
- data/scss/foundation/components/_tables.scss +6 -6
- data/scss/foundation/components/_thumbs.scss +2 -4
- data/scss/foundation/components/_tooltips.scss +4 -4
- data/scss/foundation/components/_top-bar.scss +77 -39
- data/scss/foundation/components/_type.scss +25 -23
- data/scss/foundation/components/_visibility.scss +28 -28
- data/scss/normalize.scss +22 -14
- data/spec/js/SectionSpec.js +39 -0
- data/spec/js/helpers/SectionSpecHelper.js +22 -0
- data/spec/js/helpers/SpecHelper.js +19 -0
- metadata +32 -25
- data/.rbenv-version +0 -1
|
@@ -178,23 +178,23 @@ $active: true
|
|
|
178
178
|
$include-html-button-classes: $include-html-classes;
|
|
179
179
|
|
|
180
180
|
/* We use these to build padding for buttons. */
|
|
181
|
-
$button-med:
|
|
182
|
-
$button-tny:
|
|
183
|
-
$button-sml:
|
|
184
|
-
$button-lrg:
|
|
181
|
+
$button-med: em-calc(12);
|
|
182
|
+
$button-tny: em-calc(7);
|
|
183
|
+
$button-sml: em-calc(9);
|
|
184
|
+
$button-lrg: em-calc(16);
|
|
185
185
|
|
|
186
186
|
/* We use this to control the display property. */
|
|
187
187
|
$button-display: inline-block;
|
|
188
|
-
$button-margin-bottom:
|
|
188
|
+
$button-margin-bottom: em-calc(20);
|
|
189
189
|
|
|
190
190
|
/* We use these to control button text styles. */
|
|
191
191
|
$button-font-family: inherit;
|
|
192
192
|
$button-font-color: #fff;
|
|
193
193
|
$button-font-color-alt: #333;
|
|
194
|
-
$button-font-med:
|
|
195
|
-
$button-font-tny:
|
|
196
|
-
$button-font-sml:
|
|
197
|
-
$button-font-lrg:
|
|
194
|
+
$button-font-med: em-calc(16);
|
|
195
|
+
$button-font-tny: em-calc(11);
|
|
196
|
+
$button-font-sml: em-calc(13);
|
|
197
|
+
$button-font-lrg: em-calc(20);
|
|
198
198
|
$button-font-weight: bold;
|
|
199
199
|
$button-font-align: center;
|
|
200
200
|
|
|
@@ -213,7 +213,7 @@ $button-round: $global-rounded;
|
|
|
213
213
|
$button-disabled-opacity: 0.6;
|
|
214
214
|
', :css %>
|
|
215
215
|
|
|
216
|
-
<p><strong>Note:</strong> <code>
|
|
216
|
+
<p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
|
|
217
217
|
|
|
218
218
|
</div>
|
|
219
219
|
</div>
|
|
@@ -129,9 +129,35 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
|
|
|
129
129
|
<hr>
|
|
130
130
|
|
|
131
131
|
<h3>Using the JavaScript</h3>
|
|
132
|
-
<
|
|
132
|
+
<div class="panel">
|
|
133
|
+
Before you can use Clearing you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<p>Just add <code>foundation.clearing.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
|
|
137
|
+
|
|
138
|
+
<%= code_example '
|
|
139
|
+
<body>
|
|
140
|
+
|
|
141
|
+
...
|
|
142
|
+
|
|
143
|
+
<script>
|
|
144
|
+
document.write(\'<script src=/js/vendor/\'
|
|
145
|
+
+ (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
|
|
146
|
+
+ \'.js><\/script>\');
|
|
147
|
+
</script>
|
|
148
|
+
|
|
149
|
+
<script src="js/foundation/foundation.js"></script>
|
|
150
|
+
<script src="js/foundation/foundation.clearing.js"></script>
|
|
151
|
+
<!-- Other JS plugins can be included here -->
|
|
152
|
+
|
|
153
|
+
<script>
|
|
154
|
+
$(document).foundation();
|
|
155
|
+
</script>
|
|
156
|
+
|
|
157
|
+
</body>
|
|
158
|
+
', :html %>
|
|
133
159
|
|
|
134
|
-
<p
|
|
160
|
+
<p>Required Foundation Library: <code>foundation.clearing.js</code></p>
|
|
135
161
|
|
|
136
162
|
<h5>Optional JavaScript Configuration</h5>
|
|
137
163
|
|
|
@@ -281,12 +281,20 @@
|
|
|
281
281
|
<hr>
|
|
282
282
|
|
|
283
283
|
<h3><a name="js"></a>Using the JavaScript</h3>
|
|
284
|
-
<p>In order to get the custom forms to function, you'll need to include <code>foundation.forms.js</code>. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the forms plugin.
|
|
284
|
+
<p>In order to get the custom forms to function, you'll need to include <code>foundation.forms.js</code>. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the forms plugin.
|
|
285
285
|
|
|
286
286
|
<p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
|
|
287
287
|
|
|
288
288
|
<p>Required Foundation Library: <code>foundation.forms.js</code></p>
|
|
289
289
|
|
|
290
|
+
<h5>Javascript Events</h5>
|
|
291
|
+
<p>The custom selects can be refreshed by triggering a javascript <code>change</code> event on the native select. Custom forms will automatically check for and update option tags that have been added or removed when you trigger the change event. If you change the value of the native select, you will have to pass in the <code>force_refresh</code> argument when triggering the change event to ensure that the custom form gets updated correctly.</p>
|
|
292
|
+
|
|
293
|
+
<%= code_example "
|
|
294
|
+
$(\"#customDropdown1\").trigger(\"change\"); // Use to add or remove options
|
|
295
|
+
$(\"#customDropdown1\").trigger(\"change\", true); // Use to change the value of the select
|
|
296
|
+
", :js %>
|
|
297
|
+
|
|
290
298
|
<h5>Optional JavaScript Configuration</h5>
|
|
291
299
|
|
|
292
300
|
<p>Custom Form options can only be passed in during initialization at this time. However, you can bind to the <i>open</i>, <i>change</i>, and <i>click</i> events depending on the form elements.</p>
|
|
@@ -168,36 +168,61 @@ $dropdown-button-pip-color-alt: #333;
|
|
|
168
168
|
$dropdown-button-padding-tny: $button-tny * 5;
|
|
169
169
|
$dropdown-button-pip-size-tny: $button-tny;
|
|
170
170
|
$dropdown-button-pip-opposite-tny: $button-tny * 2;
|
|
171
|
-
$dropdown-button-pip-top-tny: -$button-tny / 2 +
|
|
171
|
+
$dropdown-button-pip-top-tny: -$button-tny / 2 + em-calc(1);
|
|
172
172
|
|
|
173
173
|
/* We use these to style small dropdown buttons */
|
|
174
174
|
$dropdown-button-padding-sml: $button-sml * 5;
|
|
175
175
|
$dropdown-button-pip-size-sml: $button-sml;
|
|
176
176
|
$dropdown-button-pip-opposite-sml: $button-sml * 2;
|
|
177
|
-
$dropdown-button-pip-top-sml: -$button-sml / 2 +
|
|
177
|
+
$dropdown-button-pip-top-sml: -$button-sml / 2 + em-calc(1);
|
|
178
178
|
|
|
179
179
|
/* We use these to style medium dropdown buttons */
|
|
180
|
-
$dropdown-button-padding-med: $button-med * 4 +
|
|
181
|
-
$dropdown-button-pip-size-med: $button-med -
|
|
180
|
+
$dropdown-button-padding-med: $button-med * 4 + em-calc(3);
|
|
181
|
+
$dropdown-button-pip-size-med: $button-med - em-calc(3);
|
|
182
182
|
$dropdown-button-pip-opposite-med: $button-med * 2;
|
|
183
|
-
$dropdown-button-pip-top-med: -$button-med / 2 +
|
|
183
|
+
$dropdown-button-pip-top-med: -$button-med / 2 + em-calc(2);
|
|
184
184
|
|
|
185
185
|
/* We use these to style large dropdown buttons */
|
|
186
186
|
$dropdown-button-padding-lrg: $button-lrg * 4;
|
|
187
|
-
$dropdown-button-pip-size-lrg: $button-lrg -
|
|
188
|
-
$dropdown-button-pip-opposite-lrg: $button-lrg +
|
|
189
|
-
$dropdown-button-pip-top-lrg: -$button-lrg / 2 +
|
|
187
|
+
$dropdown-button-pip-size-lrg: $button-lrg - em-calc(6);
|
|
188
|
+
$dropdown-button-pip-opposite-lrg: $button-lrg + em-calc(12);
|
|
189
|
+
$dropdown-button-pip-top-lrg: -$button-lrg / 2 + em-calc(3);
|
|
190
190
|
', :css %>
|
|
191
191
|
|
|
192
|
-
<p><strong>Note:</strong> <code>
|
|
192
|
+
<p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
|
|
193
193
|
|
|
194
194
|
<hr>
|
|
195
195
|
|
|
196
196
|
<h3>Using the JavaScript</h3>
|
|
197
|
-
<p>You don't need ths JS to create dropdown button styles with Foundation. The only reason you'll need to include <code>foundation.dropdown.js</code> is if you want to add one of our dropdown to the button.
|
|
197
|
+
<p>You don't need ths JS to create dropdown button styles with Foundation. The only reason you'll need to include <code>foundation.dropdown.js</code> is if you want to add one of our dropdown to the button.
|
|
198
198
|
|
|
199
|
-
<
|
|
199
|
+
<div class="panel">
|
|
200
|
+
Before you can use dropdowns you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
|
|
201
|
+
</div>
|
|
200
202
|
|
|
203
|
+
<p>Just add <code>foundation.dropdown.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
|
|
204
|
+
|
|
205
|
+
<%= code_example '
|
|
206
|
+
<body>
|
|
207
|
+
|
|
208
|
+
...
|
|
209
|
+
|
|
210
|
+
<script>
|
|
211
|
+
document.write(\'<script src=/js/vendor/\'
|
|
212
|
+
+ (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
|
|
213
|
+
+ \'.js><\/script>\');
|
|
214
|
+
</script>
|
|
215
|
+
|
|
216
|
+
<script src="js/foundation/foundation.js"></script>
|
|
217
|
+
<script src="js/foundation/foundation.dropdown.js"></script>
|
|
218
|
+
<!-- Other JS plugins can be included here -->
|
|
219
|
+
|
|
220
|
+
<script>
|
|
221
|
+
$(document).foundation();
|
|
222
|
+
</script>
|
|
223
|
+
|
|
224
|
+
</body>
|
|
225
|
+
', :html %>
|
|
201
226
|
<p>Required Foundation Library: <code>foundation.dropdown.js</code></p>
|
|
202
227
|
|
|
203
228
|
<h5>Creating the Dropdown</h5>
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
<div class="large-12 columns">
|
|
34
34
|
|
|
35
35
|
<h5>Build With Predefined HTML Classes</h5>
|
|
36
|
-
<p>To create the dropdown you'll need to attach a <code>data-dropdown="your-id"</code> to whatever element you want the dropdown attached to. From there you'll create a list that holds the links or content and add an <code>id="your-id"</code> that associates with the element it belongs to. To style the dropdown, we've included a class of <code>.f-dropdown</code> that you can target and style to your
|
|
36
|
+
<p>To create the dropdown you'll need to attach a <code>data-dropdown="your-id"</code> to whatever element you want the dropdown attached to. From there you'll create a list that holds the links or content and add an <code>id="your-id"</code> that associates with the element it belongs to. To style the dropdown, we've included a class of <code>.f-dropdown</code> that you can target and style to your heart's desire. If you want the dropdown to be content, simply chain the class <code>.content</code> to the dropdown. Here's an example of that markup:</p>
|
|
37
37
|
|
|
38
38
|
<%= code_example '
|
|
39
39
|
<a href="#" data-dropdown="drop1">Has Dropdown</a>
|
|
@@ -80,14 +80,22 @@
|
|
|
80
80
|
<p>If you'd rather have your dropdown be accessible by hover you can add a data-option to the target element:</p>
|
|
81
81
|
|
|
82
82
|
<%= code_example '
|
|
83
|
-
<a href="#" data-dropdown="
|
|
83
|
+
<a href="#" data-dropdown="hover1" data-options="is_hover:true">Has Hover Dropdown</a>
|
|
84
84
|
|
|
85
|
-
<ul id="
|
|
85
|
+
<ul id="hover1" class="f-dropdown" data-dropdown-content>
|
|
86
86
|
<li><a href="#">This is a link</a></li>
|
|
87
87
|
<li><a href="#">This is another</a></li>
|
|
88
88
|
<li><a href="#">Yet another</a></li>
|
|
89
89
|
</ul>', :html %>
|
|
90
90
|
|
|
91
|
+
<a href="#" data-dropdown="hover1" data-options="is_hover:true">Has Hover Dropdown</a>
|
|
92
|
+
|
|
93
|
+
<ul id="hover1" class="f-dropdown" data-dropdown-content>
|
|
94
|
+
<li><a href="#">This is a link</a></li>
|
|
95
|
+
<li><a href="#">This is another</a></li>
|
|
96
|
+
<li><a href="#">Yet another</a></li>
|
|
97
|
+
</ul>
|
|
98
|
+
|
|
91
99
|
<hr>
|
|
92
100
|
|
|
93
101
|
<h3>Build With Our Mixins</h3>
|
|
@@ -112,7 +120,7 @@
|
|
|
112
120
|
', :html %>
|
|
113
121
|
|
|
114
122
|
<h5>The Container Mixin</h5>
|
|
115
|
-
<p>There are two
|
|
123
|
+
<p>There are two mixins you can use when building your dropdowns— the container and the list style. The container mixin will give you all the styles needed for the base styles of the dropdown, not including styles for the default link list style. The container mixin looks like this:</p>
|
|
116
124
|
|
|
117
125
|
<%= code_example '
|
|
118
126
|
/* Container mixin and its options */
|
|
@@ -168,24 +176,47 @@ $f-dropdown-triangle-side-offset: 10px;
|
|
|
168
176
|
/* We use these to control styles for the list elements. */
|
|
169
177
|
$f-dropdown-list-style: none;
|
|
170
178
|
$f-dropdown-font-color: #555;
|
|
171
|
-
$f-dropdown-font-size:
|
|
172
|
-
$f-dropdown-list-padding:
|
|
173
|
-
$f-dropdown-line-height:
|
|
179
|
+
$f-dropdown-font-size: em-calc(14);
|
|
180
|
+
$f-dropdown-list-padding: em-calc(5 10);
|
|
181
|
+
$f-dropdown-line-height: em-calc(18);
|
|
174
182
|
$f-dropdown-list-hover-bg: #eeeeee;
|
|
175
183
|
$dropdown-mobile-default-float: 0;
|
|
176
184
|
|
|
177
185
|
/* We use this to control the styles for when the dropdown has custom content. */
|
|
178
|
-
$f-dropdown-content-padding:
|
|
186
|
+
$f-dropdown-content-padding: em-calc(20);', :css %>
|
|
179
187
|
|
|
180
|
-
<p><strong>Note:</strong> <code>
|
|
188
|
+
<p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
|
|
181
189
|
|
|
182
190
|
<hr>
|
|
183
191
|
|
|
184
|
-
|
|
185
|
-
|
|
192
|
+
<h3>Using the JavaScript</h3>
|
|
193
|
+
<div class="panel">
|
|
194
|
+
Before you can use dropdowns you'll want to verify that both jQuery (or Zepto) and <code>foundation.js</code> are available on your page. You can refer to the <a href="../javascript.html">javascript documentation</a> on setting that up.
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<p>Just add <code>foundation.dropdown.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
|
|
198
|
+
|
|
199
|
+
<%= code_example '
|
|
200
|
+
<body>
|
|
201
|
+
|
|
202
|
+
...
|
|
203
|
+
|
|
204
|
+
<script>
|
|
205
|
+
document.write(\'<script src=/js/vendor/\'
|
|
206
|
+
+ (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
|
|
207
|
+
+ \'.js><\/script>\');
|
|
208
|
+
</script>
|
|
209
|
+
|
|
210
|
+
<script src="js/foundation/foundation.js"></script>
|
|
211
|
+
<script src="js/foundation/foundation.dropdown.js"></script>
|
|
212
|
+
<!-- Other JS plugins can be included here -->
|
|
186
213
|
|
|
187
|
-
|
|
214
|
+
<script>
|
|
215
|
+
$(document).foundation();
|
|
216
|
+
</script>
|
|
188
217
|
|
|
218
|
+
</body>
|
|
219
|
+
', :html %>
|
|
189
220
|
<p>Required Foundation Library: <code>foundation.dropdown.js</code></p>
|
|
190
221
|
|
|
191
222
|
<h5>Optional JavaScript Configuration</h5>
|
|
@@ -205,4 +236,4 @@ $f-dropdown-content-padding: emCalc(20);', :css %>
|
|
|
205
236
|
<div class="large-3 pull-9 columns">
|
|
206
237
|
<%= render "_sidebar-components.html.erb" %>
|
|
207
238
|
</div>
|
|
208
|
-
</div>
|
|
239
|
+
</div>
|
|
@@ -80,15 +80,15 @@
|
|
|
80
80
|
$include-html-media-classes: $include-html-classes;
|
|
81
81
|
|
|
82
82
|
/* We use these to control video container padding and margins */
|
|
83
|
-
$flex-video-padding-top:
|
|
83
|
+
$flex-video-padding-top: em-calc(25);
|
|
84
84
|
$flex-video-padding-bottom: 67.5%;
|
|
85
|
-
$flex-video-margin-bottom:
|
|
85
|
+
$flex-video-margin-bottom: em-calc(16);
|
|
86
86
|
|
|
87
87
|
/* We use this to control widescreen bottom padding */
|
|
88
88
|
$flex-video-widescreen-padding-bottom: 57.25%;
|
|
89
89
|
', :css %>
|
|
90
90
|
|
|
91
|
-
<p><strong>Note:</strong> <code>
|
|
91
|
+
<p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
|
|
92
92
|
|
|
93
93
|
</div>
|
|
94
94
|
</div>
|
|
@@ -414,17 +414,17 @@ $is-button: false
|
|
|
414
414
|
$include-html-form-classes: $include-html-classes;
|
|
415
415
|
|
|
416
416
|
/* We use this to set the base for lots of form spacing and positioning styles */
|
|
417
|
-
$form-spacing:
|
|
417
|
+
$form-spacing: em-calc(16);
|
|
418
418
|
|
|
419
419
|
/* We use these to style the labels in different ways */
|
|
420
420
|
$form-label-pointer: pointer;
|
|
421
|
-
$form-label-font-size:
|
|
421
|
+
$form-label-font-size: em-calc(14);
|
|
422
422
|
$form-label-font-weight: 500;
|
|
423
423
|
$form-label-font-color: lighten(#000, 30%);
|
|
424
|
-
$form-label-bottom-margin:
|
|
424
|
+
$form-label-bottom-margin: em-calc(3);
|
|
425
425
|
$input-font-family: inherit;
|
|
426
426
|
$input-font-color: rgba(0,0,0,0.75);
|
|
427
|
-
$input-font-size:
|
|
427
|
+
$input-font-size: em-calc(14);
|
|
428
428
|
$input-bg-color: #fff;
|
|
429
429
|
$input-focus-bg-color: darken(#fff, 2%);
|
|
430
430
|
$input-border-color: darken(#fff, 20%);
|
|
@@ -439,13 +439,13 @@ $input-include-glowing-effect: true;
|
|
|
439
439
|
$fieldset-border-style: solid;
|
|
440
440
|
$fieldset-border-width: 1px;
|
|
441
441
|
$fieldset-border-color: #ddd;
|
|
442
|
-
$fieldset-padding:
|
|
443
|
-
$fieldset-margin:
|
|
442
|
+
$fieldset-padding: em-calc(20);
|
|
443
|
+
$fieldset-margin: em-calc(18 0);
|
|
444
444
|
|
|
445
445
|
/* We use these to style the legends when you use them */
|
|
446
446
|
$legend-bg: #fff;
|
|
447
447
|
$legend-font-weight: bold;
|
|
448
|
-
$legend-padding:
|
|
448
|
+
$legend-padding: em-calc(0 3);
|
|
449
449
|
|
|
450
450
|
/* We use these to style the prefix and postfix input elements */
|
|
451
451
|
$input-prefix-bg: darken(#fff, 5%);
|
|
@@ -457,9 +457,9 @@ $input-prefix-font-color: #333;
|
|
|
457
457
|
$input-prefix-font-color-alt: #fff;
|
|
458
458
|
|
|
459
459
|
/* We use these to style the error states for inputs and labels */
|
|
460
|
-
$input-error-message-padding:
|
|
460
|
+
$input-error-message-padding: em-calc(6 4);
|
|
461
461
|
$input-error-message-top: 0;
|
|
462
|
-
$input-error-message-font-size:
|
|
462
|
+
$input-error-message-font-size: em-calc(12);
|
|
463
463
|
$input-error-message-font-weight: bold;
|
|
464
464
|
$input-error-message-font-color: #fff;
|
|
465
465
|
$input-error-message-font-color-alt: #333;
|
|
@@ -468,7 +468,7 @@ $input-error-message-font-color-alt: #333;
|
|
|
468
468
|
$glowing-effect-fade-time: 0.45s;
|
|
469
469
|
$glowing-effect-color: $input-focus-border-color;', :css %>
|
|
470
470
|
|
|
471
|
-
<p><strong>Note:</strong> <code>
|
|
471
|
+
<p><strong>Note:</strong> <code>em-calc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
|
|
472
472
|
</div>
|
|
473
473
|
</div>
|
|
474
474
|
</div>
|
|
@@ -164,42 +164,37 @@ $base-font-size: 100% !default;
|
|
|
164
164
|
/* $base-line-height is 24px while $base-font-size is 16px */
|
|
165
165
|
$base-line-height: 150% !default;
|
|
166
166
|
|
|
167
|
-
/* This is the default html and body font-size for the base em value
|
|
167
|
+
/* This is the default html and body font-size for the base em value.*/
|
|
168
168
|
$em-base: 16 !default;
|
|
169
169
|
|
|
170
|
-
/* It strips the unit of measure and returns it
|
|
170
|
+
/* It strips the unit of measure and returns it*/
|
|
171
171
|
@function strip-unit($num) {
|
|
172
172
|
@return $num / ($num * 0 + 1);
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
/* Converts "px" to "em" using the ($)em-base
|
|
176
|
-
@function convert-to-em($value) {
|
|
177
|
-
$value: strip-unit($value) / strip-unit($
|
|
178
|
-
@if ($value == 0em) { $value: 0; } /* Turn 0em into 0
|
|
175
|
+
/* Converts "px" to "em" using the ($)em-base*/
|
|
176
|
+
@function convert-to-em($value, $base-value: $em-base) {
|
|
177
|
+
$value: strip-unit($value) / strip-unit($base-value) * 1em;
|
|
178
|
+
@if ($value == 0em) { $value: 0; } /* Turn 0em into 0*/
|
|
179
179
|
@return $value;
|
|
180
180
|
}
|
|
181
181
|
|
|
182
|
-
/* Working in ems is annoying. Think in pixels by using this handy function,
|
|
183
|
-
|
|
184
|
-
@function
|
|
185
|
-
$max: length($values); /* Get the total number of parameters passed
|
|
182
|
+
/* Working in ems is annoying. Think in pixels by using this handy function, em-calc(#)*/
|
|
183
|
+
/*Just enter the number, no need to mention "px"*/
|
|
184
|
+
@function em-calc($values, $base-value: $em-base) {
|
|
185
|
+
$max: length($values); /* Get the total number of parameters passed*/
|
|
186
186
|
|
|
187
|
-
/* If there is only 1 parameter, then return it as an integer
|
|
188
|
-
|
|
189
|
-
@if $max == 1 { @return convert-to-em(nth($values, 1)); }
|
|
187
|
+
/* If there is only 1 parameter, then return it as an integer.*/
|
|
188
|
+
/* This is done because a list can\'t be multiplied or divided even if it contains a single value*/
|
|
189
|
+
@if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }
|
|
190
190
|
|
|
191
|
-
$emValues: (); /* This will eventually store the converted $values in a list
|
|
191
|
+
$emValues: (); /* This will eventually store the converted $values in a list*/
|
|
192
192
|
@for $i from 1 through $max {
|
|
193
|
-
$emValues: append($emValues, convert-to-em(nth($values, $i)));
|
|
193
|
+
$emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
|
|
194
194
|
}
|
|
195
195
|
@return $emValues;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
/* Maybe you want to create rems and pixels */
|
|
199
|
-
/* @function remCalc($pxWidth) { */
|
|
200
|
-
/* @return $pxWidth / $em-base * 1rem; */
|
|
201
|
-
/* } */
|
|
202
|
-
|
|
203
198
|
/* We use these to control various global styles */
|
|
204
199
|
$body-bg: #fff !default;
|
|
205
200
|
$body-font-color: #222 !default;
|
|
@@ -124,7 +124,8 @@
|
|
|
124
124
|
<div class="small-4 columns">4</div>
|
|
125
125
|
</div>
|
|
126
126
|
|
|
127
|
-
|
|
127
|
+
|
|
128
|
+
<hr>
|
|
128
129
|
|
|
129
130
|
<h4>Offsets</h4>
|
|
130
131
|
<p>Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like <code>.large-offset-1</code> and <code>.small-offset-3</code> to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column.</p>
|
|
@@ -205,45 +206,45 @@
|
|
|
205
206
|
|
|
206
207
|
<%= code_example '
|
|
207
208
|
<div class="row">
|
|
208
|
-
<div class="
|
|
209
|
-
<div class="
|
|
209
|
+
<div class="large-10 push-2 columns">10</div>
|
|
210
|
+
<div class="large-2 pull-10 columns">2, last</div>
|
|
210
211
|
</div>
|
|
211
212
|
<div class="row">
|
|
212
|
-
<div class="
|
|
213
|
-
<div class="
|
|
213
|
+
<div class="large-9 push-3 columns">9</div>
|
|
214
|
+
<div class="large-3 pull-9 columns">3, last</div>
|
|
214
215
|
</div>
|
|
215
216
|
<div class="row">
|
|
216
|
-
<div class="
|
|
217
|
-
<div class="
|
|
217
|
+
<div class="large-8 push-4 columns">8</div>
|
|
218
|
+
<div class="large-4 pull-8 columns">4, last</div>
|
|
218
219
|
</div>
|
|
219
220
|
<div class="row">
|
|
220
|
-
<div class="
|
|
221
|
-
<div class="
|
|
221
|
+
<div class="large-7 push-5 columns">7</div>
|
|
222
|
+
<div class="large-5 pull-7 columns">5, last</div>
|
|
222
223
|
</div>
|
|
223
224
|
<div class="row">
|
|
224
|
-
<div class="
|
|
225
|
-
<div class="
|
|
225
|
+
<div class="large-6 push-6 columns">6</div>
|
|
226
|
+
<div class="large-6 pull-6 columns">6, last</div>
|
|
226
227
|
</div>', :html %>
|
|
227
228
|
|
|
228
229
|
<div class="row display">
|
|
229
|
-
<div class="
|
|
230
|
-
<div class="
|
|
230
|
+
<div class="large-10 push-2 columns">10</div>
|
|
231
|
+
<div class="large-2 pull-10 columns">2, last</div>
|
|
231
232
|
</div>
|
|
232
233
|
<div class="row display">
|
|
233
|
-
<div class="
|
|
234
|
-
<div class="
|
|
234
|
+
<div class="large-9 push-3 columns">9</div>
|
|
235
|
+
<div class="large-3 pull-9 columns">3, last</div>
|
|
235
236
|
</div>
|
|
236
237
|
<div class="row display">
|
|
237
|
-
<div class="
|
|
238
|
-
<div class="
|
|
238
|
+
<div class="large-8 push-4 columns">8</div>
|
|
239
|
+
<div class="large-4 pull-8 columns">4, last</div>
|
|
239
240
|
</div>
|
|
240
241
|
<div class="row display">
|
|
241
|
-
<div class="
|
|
242
|
-
<div class="
|
|
242
|
+
<div class="large-7 push-5 columns">7</div>
|
|
243
|
+
<div class="large-5 pull-7 columns">5, last</div>
|
|
243
244
|
</div>
|
|
244
245
|
<div class="row display">
|
|
245
|
-
<div class="
|
|
246
|
-
<div class="
|
|
246
|
+
<div class="large-6 push-6 columns">6</div>
|
|
247
|
+
<div class="large-6 pull-6 columns">6, last</div>
|
|
247
248
|
</div>
|
|
248
249
|
|
|
249
250
|
<hr>
|
|
@@ -365,8 +366,8 @@ $float: left
|
|
|
365
366
|
|
|
366
367
|
<h5>Default SCSS Variables</h5>
|
|
367
368
|
<%= code_example '
|
|
368
|
-
$row-width:
|
|
369
|
-
$column-gutter:
|
|
369
|
+
$row-width: em-calc(1000);
|
|
370
|
+
$column-gutter: em-calc(30);
|
|
370
371
|
$total-columns: 12 !default;
|
|
371
372
|
', :scss %>
|
|
372
373
|
|