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
|
@@ -71,8 +71,8 @@ $include-html-inline-list-classes: $include-html-classes;
|
|
|
71
71
|
/* We use this to control the margins and padding of the inline list. */
|
|
72
72
|
$inline-list-top-margin: 0;
|
|
73
73
|
$inline-list-opposite-margin: 0;
|
|
74
|
-
$inline-list-bottom-margin:
|
|
75
|
-
$inline-list-default-float-margin:
|
|
74
|
+
$inline-list-bottom-margin: em-calc(17);
|
|
75
|
+
$inline-list-default-float-margin: em-calc(-22);
|
|
76
76
|
|
|
77
77
|
$inline-list-padding: 0;
|
|
78
78
|
|
|
@@ -85,7 +85,7 @@ $inline-list-display: block;
|
|
|
85
85
|
/* We use this to control any elments within list items */
|
|
86
86
|
$inline-list-children-display: block;', :css %>
|
|
87
87
|
|
|
88
|
-
<p><strong>Note:</strong> <code>
|
|
88
|
+
<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>
|
|
89
89
|
|
|
90
90
|
</div>
|
|
91
91
|
</div>
|
|
@@ -130,9 +130,35 @@ $(document).foundation('reflow');
|
|
|
130
130
|
|
|
131
131
|
<h3>Using the JavaScript</h3>
|
|
132
132
|
|
|
133
|
-
<
|
|
133
|
+
<div class="panel">
|
|
134
|
+
Before you can use Interchange 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.
|
|
135
|
+
</div>
|
|
134
136
|
|
|
135
|
-
<p
|
|
137
|
+
<p>Just add <code>foundation.interchange.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
|
|
138
|
+
|
|
139
|
+
<%= code_example '
|
|
140
|
+
<body>
|
|
141
|
+
|
|
142
|
+
...
|
|
143
|
+
|
|
144
|
+
<script>
|
|
145
|
+
document.write(\'<script src=/js/vendor/\'
|
|
146
|
+
+ (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
|
|
147
|
+
+ \'.js><\/script>\');
|
|
148
|
+
</script>
|
|
149
|
+
|
|
150
|
+
<script src="js/foundation/foundation.js"></script>
|
|
151
|
+
<script src="js/foundation/foundation.interchange.js"></script>
|
|
152
|
+
<!-- Other JS plugins can be included here -->
|
|
153
|
+
|
|
154
|
+
<script>
|
|
155
|
+
$(document).foundation();
|
|
156
|
+
</script>
|
|
157
|
+
|
|
158
|
+
</body>
|
|
159
|
+
', :html %>
|
|
160
|
+
|
|
161
|
+
<p>Required Foundation Library: <code>foundation.interchange.js</code></p>
|
|
136
162
|
|
|
137
163
|
</div>
|
|
138
164
|
</div>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<div class="row">
|
|
22
22
|
<div class="large-12 columns">
|
|
23
23
|
<h2 id="numero1" class="so-awesome">Build Joyride with HTML</h2>
|
|
24
|
-
<p>At the bottom of your page but inside of the body, place either an <code>ol</code> or <code>ul</code> with the <code>data-joyride</code> attribute. This list will contain all of the stops on your tour. To associate the tour stops with an item on your page, make sure the ID and data-id match between the two. If you do not associate an
|
|
24
|
+
<p>At the bottom of your page but inside of the body, place either an <code>ol</code> or <code>ul</code> with the <code>data-joyride</code> attribute. This list will contain all of the stops on your tour. To associate the tour stops with an item on your page, make sure the ID and data-id match between the two. If you do not associate an id, the tour stop will take on a modal style, positioning itself in the middle of the screen.</p>
|
|
25
25
|
|
|
26
26
|
<%= code_example '
|
|
27
27
|
<!-- At the bottom of your page but inside of the body tag -->
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
<h4>Stop #2</h4>
|
|
38
38
|
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
|
|
39
39
|
</li>
|
|
40
|
-
<li data-button="
|
|
41
|
-
<h4>Stop #
|
|
40
|
+
<li data-button="End">
|
|
41
|
+
<h4>Stop #3</h4>
|
|
42
42
|
<p>It works as a modal too!</p>
|
|
43
43
|
</li>
|
|
44
44
|
</ol>
|
|
@@ -70,14 +70,14 @@ $include-html-joyride-classes: $include-html-classes;
|
|
|
70
70
|
/* Controlling default Joyride styles */
|
|
71
71
|
$joyride-tip-bg: rgb(0,0,0);
|
|
72
72
|
$joyride-tip-default-width: 300px;
|
|
73
|
-
$joyride-tip-padding:
|
|
73
|
+
$joyride-tip-padding: em-calc(18 20 24);
|
|
74
74
|
$joyride-tip-border: solid 1px #555;
|
|
75
75
|
$joyride-tip-radius: 4px;
|
|
76
76
|
$joyride-tip-position-offset: 22px;
|
|
77
77
|
|
|
78
78
|
/* Here, we\'re setting the tip dont styles */
|
|
79
79
|
$joyride-tip-font-color: #fff;
|
|
80
|
-
$joyride-tip-font-size:
|
|
80
|
+
$joyride-tip-font-size: em-calc(14);
|
|
81
81
|
$joyride-tip-header-weight: bold;
|
|
82
82
|
|
|
83
83
|
/* This changes the nub size */
|
|
@@ -100,10 +100,34 @@ $joyride-screenfill: rgba(0,0,0,0.5);
|
|
|
100
100
|
<hr>
|
|
101
101
|
|
|
102
102
|
<h3>Using the JavaScript</h3>
|
|
103
|
-
<
|
|
103
|
+
<div class="panel">
|
|
104
|
+
Before you can use Joyride 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.
|
|
105
|
+
</div>
|
|
104
106
|
|
|
105
|
-
<p
|
|
107
|
+
<p>Just add <code>foundation.joyride.js</code> and <code>foundation.cookie.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
|
|
106
108
|
|
|
109
|
+
<%= code_example '
|
|
110
|
+
<body>
|
|
111
|
+
|
|
112
|
+
...
|
|
113
|
+
|
|
114
|
+
<script>
|
|
115
|
+
document.write(\'<script src=/js/vendor/\'
|
|
116
|
+
+ (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
|
|
117
|
+
+ \'.js><\/script>\');
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<script src="js/foundation/foundation.js"></script>
|
|
121
|
+
<script src="js/foundation/foundation.joyride.js"></script>
|
|
122
|
+
<script src="js/foundation/foundation.cookie.js"></script> <!-- Optional -->
|
|
123
|
+
<!-- Other JS plugins can be included here -->
|
|
124
|
+
|
|
125
|
+
<script>
|
|
126
|
+
$(document).foundation();
|
|
127
|
+
</script>
|
|
128
|
+
|
|
129
|
+
</body>
|
|
130
|
+
', :html %>
|
|
107
131
|
<p>Required Foundation Library: <code>foundation.joyride.js</code>, Optional JS Library: <code>foundation.cookie.js</code></p>
|
|
108
132
|
|
|
109
133
|
<p>Joyride does not initialize on page load like the rest of the plugins. You need to call <code>start</code> to get it to load.</p>
|
|
@@ -172,14 +196,14 @@ $joyride-screenfill: rgba(0,0,0,0.5);
|
|
|
172
196
|
</li>
|
|
173
197
|
<li data-id="numero1" data-class="custom so-awesome" data-text="Next">
|
|
174
198
|
<h4>Stop #1</h4>
|
|
175
|
-
<p>You can control all the details for
|
|
199
|
+
<p>You can control all the details for your tour stop. Any valid HTML will work inside of Joyride.</p>
|
|
176
200
|
</li>
|
|
177
201
|
<li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
|
|
178
202
|
<h4>Stop #2</h4>
|
|
179
203
|
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
|
|
180
204
|
</li>
|
|
181
|
-
<li data-button="
|
|
182
|
-
<h4>Stop #
|
|
205
|
+
<li data-button="End">
|
|
206
|
+
<h4>Stop #3</h4>
|
|
183
207
|
<p>It works as a modal too!</p>
|
|
184
208
|
</li>
|
|
185
209
|
</ol>
|
|
@@ -54,13 +54,13 @@ $include-html-type-classes: $include-html-classes;
|
|
|
54
54
|
|
|
55
55
|
/* We use these to control text styles. */
|
|
56
56
|
$keystroke-font: "Consolas", "Menlo", "Courier", monospace;
|
|
57
|
-
$keystroke-font-size:
|
|
57
|
+
$keystroke-font-size: em-calc(14);
|
|
58
58
|
$keystroke-font-color: #222;
|
|
59
59
|
$keystroke-font-color-alt: #fff;
|
|
60
60
|
$keystroke-function-factor: 7%;
|
|
61
61
|
|
|
62
62
|
/* We use this to control keystroke padding. */
|
|
63
|
-
$keystroke-padding:
|
|
63
|
+
$keystroke-padding: em-calc(2 4 0);
|
|
64
64
|
|
|
65
65
|
/* We use these to control background and border styles. */
|
|
66
66
|
$keystroke-bg: darken(#fff, $keystroke-function-factor);
|
|
@@ -69,7 +69,7 @@ $keystroke-border-width: 1px;
|
|
|
69
69
|
$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
|
|
70
70
|
$keystroke-radius: $global-radius;', :css %>
|
|
71
71
|
|
|
72
|
-
<p><strong>Note:</strong> <code>
|
|
72
|
+
<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>
|
|
73
73
|
|
|
74
74
|
</div>
|
|
75
75
|
</div>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<div class="large-12 columns">
|
|
5
5
|
<% @page_title = "Kitchen Sink" %>
|
|
6
6
|
<h2><%= @page_title %></h2>
|
|
7
|
-
<h4 class="subheader">This page
|
|
7
|
+
<h4 class="subheader">This page includes every single Foundation element so that we can make sure things work together smoothly.</h4>
|
|
8
8
|
<hr>
|
|
9
9
|
</div>
|
|
10
10
|
</div>
|
|
@@ -85,16 +85,16 @@ $radius: false
|
|
|
85
85
|
$include-html-label-classes: $include-html-classes;
|
|
86
86
|
|
|
87
87
|
/* We use these to style the labels */
|
|
88
|
-
$label-padding:
|
|
88
|
+
$label-padding: em-calc(3 10 4);
|
|
89
89
|
$label-radius: $global-radius;
|
|
90
90
|
|
|
91
91
|
/* We use these to style the label text */
|
|
92
|
-
$label-font-sizing:
|
|
92
|
+
$label-font-sizing: em-calc(14);
|
|
93
93
|
$label-font-weight: bold;
|
|
94
94
|
$label-font-color: #333;
|
|
95
95
|
$label-font-color-alt: #fff;', :css %>
|
|
96
96
|
|
|
97
|
-
<p><strong>Note:</strong> <code>
|
|
97
|
+
<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>
|
|
98
98
|
|
|
99
99
|
</div>
|
|
100
100
|
</div>
|
|
@@ -49,10 +49,33 @@
|
|
|
49
49
|
|
|
50
50
|
<a name="js"></a>
|
|
51
51
|
<h3 data-magellan-destination="js">Using Our JavaScript</h3>
|
|
52
|
-
<
|
|
52
|
+
<div class="panel">
|
|
53
|
+
Before you can use Magellan 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.
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<p>Just add <code>foundation.magellan.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
|
|
57
|
+
|
|
58
|
+
<%= code_example '
|
|
59
|
+
<body>
|
|
60
|
+
|
|
61
|
+
...
|
|
62
|
+
|
|
63
|
+
<script>
|
|
64
|
+
document.write(\'<script src=/js/vendor/\'
|
|
65
|
+
+ (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
|
|
66
|
+
+ \'.js><\/script>\');
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<script src="js/foundation/foundation.js"></script>
|
|
70
|
+
<script src="js/foundation/foundation.magellan.js"></script>
|
|
71
|
+
<!-- Other JS plugins can be included here -->
|
|
53
72
|
|
|
54
|
-
|
|
73
|
+
<script>
|
|
74
|
+
$(document).foundation();
|
|
75
|
+
</script>
|
|
55
76
|
|
|
77
|
+
</body>
|
|
78
|
+
', :html %>
|
|
56
79
|
<p>Required Foundation Library: <code>foundation.magellan.js</code></p>
|
|
57
80
|
|
|
58
81
|
<p>Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:</p>
|
|
@@ -224,26 +224,32 @@ $include-html-orbit-classes: $include-html-classes;
|
|
|
224
224
|
|
|
225
225
|
/* We use these to control the caption styles */
|
|
226
226
|
$orbit-container-bg: #f5f5f5;
|
|
227
|
-
$orbit-caption-bg-old: rgb(0,0,0);
|
|
228
227
|
$orbit-caption-bg: rgba(0,0,0,0.6);
|
|
229
228
|
$orbit-caption-font-color: #fff;
|
|
229
|
+
$orbit-caption-font-size: emCalc(14);
|
|
230
|
+
$orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
|
|
231
|
+
$orbit-caption-padding: emCalc(10,14);
|
|
232
|
+
$orbit-caption-height: auto;
|
|
230
233
|
|
|
231
234
|
/* We use these to control the left/right nav styles */
|
|
232
|
-
$orbit-nav-bg-old: rgb(0,0,0);
|
|
233
235
|
$orbit-nav-bg: rgba(0,0,0,0.6);
|
|
236
|
+
$orbit-nav-bg-hover: rgba(0,0,0,0.6);
|
|
237
|
+
$orbit-nav-arrow-color: #fff;
|
|
238
|
+
$orbit-nav-arrow-color-hover: #ccc;
|
|
234
239
|
|
|
235
240
|
/* We use these to control the timer styles */
|
|
236
|
-
$orbit-timer-bg-old: rgb(0,0,0);
|
|
237
241
|
$orbit-timer-bg: rgba(0,0,0,0.6);
|
|
242
|
+
$orbit-timer-show-progress-bar: true;
|
|
238
243
|
|
|
239
244
|
/* We use these to control the bullet nav styles */
|
|
240
245
|
$orbit-bullet-nav-color: #999;
|
|
241
|
-
$orbit-bullet-nav-color-active: #
|
|
246
|
+
$orbit-bullet-nav-color-active: #222;
|
|
247
|
+
$orbit-bullet-radius: emCalc(18);
|
|
242
248
|
|
|
243
|
-
/* We use
|
|
249
|
+
/* We use these to controls the style of slide numbers */
|
|
244
250
|
$orbit-slide-number-bg: rgba(0,0,0,0);
|
|
245
251
|
$orbit-slide-number-font-color: #fff;
|
|
246
|
-
$orbit-slide-number-padding:
|
|
252
|
+
$orbit-slide-number-padding: em-calc(5px);
|
|
247
253
|
|
|
248
254
|
/* Graceful Loading Wrapper and preloader */
|
|
249
255
|
$wrapper-class: "slideshow-wrapper";
|
|
@@ -253,9 +259,33 @@ $preloader-class: "preloader";
|
|
|
253
259
|
<hr>
|
|
254
260
|
|
|
255
261
|
<h3>Using the JavaScript</h3>
|
|
256
|
-
<
|
|
262
|
+
<div class="panel">
|
|
263
|
+
Before you can use Orbit 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.
|
|
264
|
+
</div>
|
|
265
|
+
|
|
266
|
+
<p>Just add <code>foundation.orbit.js</code> AFTER the <code>foundation.js</code> file. Your markup should look something like this:</p>
|
|
267
|
+
|
|
268
|
+
<%= code_example '
|
|
269
|
+
<body>
|
|
270
|
+
|
|
271
|
+
...
|
|
257
272
|
|
|
258
|
-
|
|
273
|
+
<script>
|
|
274
|
+
document.write(\'<script src=/js/vendor/\'
|
|
275
|
+
+ (\'__proto__\' in {} ? \'zepto\' : \'jquery\')
|
|
276
|
+
+ \'.js><\/script>\');
|
|
277
|
+
</script>
|
|
278
|
+
|
|
279
|
+
<script src="js/foundation/foundation.js"></script>
|
|
280
|
+
<script src="js/foundation/foundation.orbit.js"></script>
|
|
281
|
+
<!-- Other JS plugins can be included here -->
|
|
282
|
+
|
|
283
|
+
<script>
|
|
284
|
+
$(document).foundation();
|
|
285
|
+
</script>
|
|
286
|
+
|
|
287
|
+
</body>
|
|
288
|
+
', :html %>
|
|
259
289
|
|
|
260
290
|
<p>Required Foundation Library: <code>foundation.orbit.js</code></p>
|
|
261
291
|
|
|
@@ -397,4 +427,4 @@ $("#featured1").on("orbit:timer-stopped", function(event, orbit) {
|
|
|
397
427
|
<div class="large-3 pull-9 columns">
|
|
398
428
|
<%= render "_sidebar-components.html.erb" %>
|
|
399
429
|
</div>
|
|
400
|
-
</div>
|
|
430
|
+
</div>
|
|
@@ -150,18 +150,18 @@ $base-style: true
|
|
|
150
150
|
$include-html-nav-classes: $include-html-classes;
|
|
151
151
|
|
|
152
152
|
/* We use these to control the pagination container */
|
|
153
|
-
$pagination-height:
|
|
154
|
-
$pagination-margin:
|
|
153
|
+
$pagination-height: em-calc(24);
|
|
154
|
+
$pagination-margin: em-calc(-5);
|
|
155
155
|
|
|
156
156
|
/* We use these to set the list-item properties */
|
|
157
157
|
$pagination-li-float: $default-float;
|
|
158
|
-
$pagination-li-height:
|
|
158
|
+
$pagination-li-height: em-calc(24);
|
|
159
159
|
$pagination-li-font-color: #222;
|
|
160
|
-
$pagination-li-font-size:
|
|
161
|
-
$pagination-li-margin:
|
|
160
|
+
$pagination-li-font-size: em-calc(14);
|
|
161
|
+
$pagination-li-margin: em-calc(5);
|
|
162
162
|
|
|
163
163
|
/* We use these for the pagination anchor links */
|
|
164
|
-
$pagination-link-pad:
|
|
164
|
+
$pagination-link-pad: em-calc(1 7 1);
|
|
165
165
|
$pagination-link-font-color: #999;
|
|
166
166
|
$pagination-link-active-bg: darken(#fff, 10%);
|
|
167
167
|
|
|
@@ -177,7 +177,7 @@ $pagination-link-current-font-weight: bold;
|
|
|
177
177
|
$pagination-link-current-cursor: default;
|
|
178
178
|
$pagination-link-current-active-bg: $primary-color;', :css %>
|
|
179
179
|
|
|
180
|
-
<p><strong>Note:</strong> <code>
|
|
180
|
+
<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
181
|
|
|
182
182
|
</div>
|
|
183
183
|
</div>
|
|
@@ -111,8 +111,8 @@ $panel-function-factor: 10%;
|
|
|
111
111
|
$panel-border-color: darken($panel-bg, $panel-function-factor);
|
|
112
112
|
|
|
113
113
|
/* We use these to set default inner padding and bottom margin */
|
|
114
|
-
$panel-margin-bottom:
|
|
115
|
-
$panel-padding:
|
|
114
|
+
$panel-margin-bottom: em-calc(20);
|
|
115
|
+
$panel-padding: em-calc(20);
|
|
116
116
|
|
|
117
117
|
/* We use these to set default font colors */
|
|
118
118
|
$panel-font-color: #333;
|
|
@@ -120,7 +120,7 @@ $panel-font-color-alt: #fff;
|
|
|
120
120
|
|
|
121
121
|
$panel-header-adjust: true;', :css %>
|
|
122
122
|
|
|
123
|
-
<p><strong>Note:</strong> <code>
|
|
123
|
+
<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>
|
|
124
124
|
|
|
125
125
|
|
|
126
126
|
</div>
|
|
@@ -108,48 +108,48 @@ $include-html-pricing-classes: $include-html-classes;
|
|
|
108
108
|
$price-table-border: solid 1px #ddd;
|
|
109
109
|
|
|
110
110
|
/* We use this to control the bottom margin of the pricing table */
|
|
111
|
-
$price-table-margin-bottom:
|
|
111
|
+
$price-table-margin-bottom: em-calc(20);
|
|
112
112
|
|
|
113
113
|
/* We use these to control the title styles */
|
|
114
114
|
$price-title-bg: #ddd;
|
|
115
|
-
$price-title-padding:
|
|
115
|
+
$price-title-padding: em-calc(15 20);
|
|
116
116
|
$price-title-align: center;
|
|
117
117
|
$price-title-color: #333;
|
|
118
118
|
$price-title-weight: bold;
|
|
119
|
-
$price-title-size:
|
|
119
|
+
$price-title-size: em-calc(16);
|
|
120
120
|
|
|
121
121
|
/* We use these to control the price styles */
|
|
122
122
|
$price-money-bg: #eee;
|
|
123
|
-
$price-money-padding:
|
|
123
|
+
$price-money-padding: em-calc(15 20);
|
|
124
124
|
$price-money-align: center;
|
|
125
125
|
$price-money-color: #333;
|
|
126
126
|
$price-money-weight: normal;
|
|
127
|
-
$price-money-size:
|
|
127
|
+
$price-money-size: em-calc(20);
|
|
128
128
|
|
|
129
129
|
/* We use these to control the description styles */
|
|
130
130
|
$price-bg: #fff;
|
|
131
131
|
$price-desc-color: #777;
|
|
132
|
-
$price-desc-padding:
|
|
132
|
+
$price-desc-padding: em-calc(15);
|
|
133
133
|
$price-desc-align: center;
|
|
134
|
-
$price-desc-font-size:
|
|
134
|
+
$price-desc-font-size: em-calc(12);
|
|
135
135
|
$price-desc-weight: normal;
|
|
136
136
|
$price-desc-line-height: 1.4;
|
|
137
137
|
$price-desc-bottom-border: dotted 1px #ddd;
|
|
138
138
|
|
|
139
139
|
/* We use these to control the list item styles */
|
|
140
140
|
$price-item-color: #333;
|
|
141
|
-
$price-item-padding:
|
|
141
|
+
$price-item-padding: em-calc(15);
|
|
142
142
|
$price-item-align: center;
|
|
143
|
-
$price-item-font-size:
|
|
143
|
+
$price-item-font-size: em-calc(14);
|
|
144
144
|
$price-item-weight: normal;
|
|
145
145
|
$price-item-bottom-border: dotted 1px #ddd;
|
|
146
146
|
|
|
147
147
|
/* We use these to control the CTA area styles */
|
|
148
148
|
$price-cta-bg: #f5f5f5;
|
|
149
149
|
$price-cta-align: center;
|
|
150
|
-
$price-cta-padding:
|
|
150
|
+
$price-cta-padding: em-calc(20 20 0);', :css %>
|
|
151
151
|
|
|
152
|
-
<p><strong>Note:</strong> <code>
|
|
152
|
+
<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>
|
|
153
153
|
|
|
154
154
|
</div>
|
|
155
155
|
</div>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<div class="row">
|
|
8
8
|
<div class="large-12 columns">
|
|
9
9
|
<h2><%= @page_title %></h2>
|
|
10
|
-
<h4 class="subheader"><p>A simple way to add
|
|
10
|
+
<h4 class="subheader"><p>A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.</h4>
|
|
11
11
|
|
|
12
12
|
<div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
|
|
13
13
|
<div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
|
|
@@ -97,7 +97,7 @@ $bg: $primary-color
|
|
|
97
97
|
$include-html-media-classes: $include-html-classes;
|
|
98
98
|
|
|
99
99
|
/* We use this to se the prog bar height */
|
|
100
|
-
$progress-bar-height:
|
|
100
|
+
$progress-bar-height: em-calc(25);
|
|
101
101
|
$progress-bar-color: transparent;
|
|
102
102
|
|
|
103
103
|
/* We use these to control the border styles */
|
|
@@ -107,8 +107,8 @@ $progress-bar-border-style: solid;
|
|
|
107
107
|
$progress-bar-border-radius: $global-radius;
|
|
108
108
|
|
|
109
109
|
/* We use these to control the margin & padding */
|
|
110
|
-
$progress-bar-pad:
|
|
111
|
-
$progress-bar-margin-bottom:
|
|
110
|
+
$progress-bar-pad: em-calc(2);
|
|
111
|
+
$progress-bar-margin-bottom: em-calc(10);
|
|
112
112
|
|
|
113
113
|
/* We use these to set the meter colors */
|
|
114
114
|
$progress-meter-color: $primary-color;
|
|
@@ -116,7 +116,7 @@ $progress-meter-secondary-color: $secondary-color;
|
|
|
116
116
|
$progress-meter-success-color: $success-color;
|
|
117
117
|
$progress-meter-alert-color: $alert-color;', :css %>
|
|
118
118
|
|
|
119
|
-
<p><strong>Note:</strong> <code>
|
|
119
|
+
<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>
|
|
120
120
|
|
|
121
121
|
</div>
|
|
122
122
|
</div>
|