groundworkcss 2.0.4 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +2 -1
- data/app/assets/javascripts/groundworkcss/components/checklists.coffee +1 -1
- data/app/assets/javascripts/groundworkcss/components/equalizeColumns.coffee +2 -4
- data/app/assets/javascripts/groundworkcss/components/forms.coffee +16 -23
- data/app/assets/javascripts/groundworkcss/components/menus.coffee +9 -4
- data/app/assets/javascripts/groundworkcss/components/navigation.coffee +21 -11
- data/app/assets/javascripts/groundworkcss/components/tabs.coffee +17 -8
- data/app/assets/javascripts/groundworkcss/plugins/jquery-placeholderText.coffee +15 -5
- data/app/assets/javascripts/groundworkcss/plugins/jquery-responsiveTables.coffee +4 -3
- data/app/assets/javascripts/groundworkcss/plugins/jquery-responsiveText.coffee +8 -4
- data/app/assets/javascripts/groundworkcss/plugins/jquery-truncateLines.coffee +21 -32
- data/app/assets/stylesheets/groundworkcss/_settings.scss +9 -3
- data/app/assets/stylesheets/groundworkcss/anim/_all-animations.scss +1 -0
- data/app/assets/stylesheets/groundworkcss/anim/_slide.scss +96 -0
- data/app/assets/stylesheets/groundworkcss/base/_helpers.scss +79 -81
- data/app/assets/stylesheets/groundworkcss/base/_reset.scss +4 -2
- data/app/assets/stylesheets/groundworkcss/core/_defaults.scss +2 -0
- data/app/assets/stylesheets/groundworkcss/core/_mixins-core.scss +21 -28
- data/app/assets/stylesheets/groundworkcss/core/_palette.scss +5 -0
- data/app/assets/stylesheets/groundworkcss/groundwork-anim.scss +35 -0
- data/app/assets/stylesheets/groundworkcss/groundwork-core.scss +16 -0
- data/app/assets/stylesheets/groundworkcss/groundwork-ie.scss +0 -12
- data/app/assets/stylesheets/groundworkcss/groundwork-responsive.scss +28 -0
- data/app/assets/stylesheets/groundworkcss/groundwork-type.scss +30 -0
- data/app/assets/stylesheets/groundworkcss/groundwork-ui.scss +34 -0
- data/app/assets/stylesheets/groundworkcss/groundwork.scss +1 -0
- data/app/assets/stylesheets/groundworkcss/responsive/_desktop.scss +76 -60
- data/app/assets/stylesheets/groundworkcss/responsive/_mobile.scss +76 -60
- data/app/assets/stylesheets/groundworkcss/responsive/_small-tablet.scss +76 -60
- data/app/assets/stylesheets/groundworkcss/type/_typography.scss +31 -16
- data/app/assets/stylesheets/groundworkcss/ui/_forms.scss +5 -12
- data/app/assets/stylesheets/groundworkcss/ui/_nav.scss +107 -15
- data/app/views/groundworkdocs/navigation.html.erb +245 -55
- data/app/views/groundworkdocs/typography.html.erb +2 -2
- data/app/views/layouts/groundworkdocs.html.erb +151 -113
- data/groundworkcss-0.4.4.gem +0 -0
- data/groundworkcss-2.0.4.gem +0 -0
- data/groundworkcss-2.0.7.gem +0 -0
- data/lib/groundworkcss/generators/docs_generator.rb +16 -16
- data/lib/groundworkcss/version.rb +1 -1
- metadata +12 -2
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
$type-tags: true !default;
|
|
10
10
|
$type-elements: "h1" "h2" "h3" "h4" "h5" "h6" "p"
|
|
11
11
|
"ul" "ol" "dl"
|
|
12
|
-
"q" "
|
|
12
|
+
"q" "blockquote" "cite"
|
|
13
13
|
"small" "big"
|
|
14
14
|
"b" "strong"
|
|
15
15
|
"em"
|
|
@@ -20,7 +20,7 @@ $type-colors: true !default;
|
|
|
20
20
|
$type-classes: false !default;
|
|
21
21
|
$type-classnames: "h1" "h2" "h3" "h4" "h5" "h6" "p"
|
|
22
22
|
"ul" "ol" "dl"
|
|
23
|
-
"q" "
|
|
23
|
+
"q" "blockquote" "cite"
|
|
24
24
|
"small" "big" "large"
|
|
25
25
|
"b" "bold" "strong"
|
|
26
26
|
"em" "italic"
|
|
@@ -29,6 +29,9 @@ $type-classnames: "h1" "h2" "h3" "h4" "h5" "h6" "p"
|
|
|
29
29
|
"code" "pre"
|
|
30
30
|
"invalid" "valid"
|
|
31
31
|
"unstyled" !default;
|
|
32
|
+
$quote-color: $font-color !default;
|
|
33
|
+
$quote-background: $border-color !default;
|
|
34
|
+
$quote-font: "source-sans-pro" !default;
|
|
32
35
|
$styled-lists: true !default;
|
|
33
36
|
$multi-column-classes: true !default;
|
|
34
37
|
$multi-column-names: "one-column" "two-column" "three-column" "four-column" "five-column" !default;
|
|
@@ -41,6 +44,7 @@ $question-color: #9855b4 !default;
|
|
|
41
44
|
$ui-states: "info" "alert" "warning" "error" "success" "question" !default;
|
|
42
45
|
$ui-icons: "\f05a" "\f06a" "\f071" "\f057" "\f058" "\f059" !default;
|
|
43
46
|
$ui-states-colors: $info-color $alert-color $warning-color $error-color $success-color $question-color !default;
|
|
47
|
+
$ui-states-color-classes: true !default;
|
|
44
48
|
$font-size: 14px !default;
|
|
45
49
|
$line-height: 1.5 !default;
|
|
46
50
|
$heading-line-height: 1.3 !default;
|
|
@@ -268,11 +272,11 @@ $placeholderText-fallback: true !default;
|
|
|
268
272
|
|
|
269
273
|
@for $i from 1 through length($modifier-name) {
|
|
270
274
|
%#{nth($modifier-name, $i)} {
|
|
271
|
-
color:
|
|
275
|
+
color: nth($modifier-text, $i);
|
|
272
276
|
}
|
|
273
277
|
}
|
|
274
278
|
|
|
275
|
-
%q
|
|
279
|
+
%q {
|
|
276
280
|
@extend %bold, %italic;
|
|
277
281
|
&:before {
|
|
278
282
|
content: "\201C"; // left quotation mark
|
|
@@ -285,13 +289,14 @@ $placeholderText-fallback: true !default;
|
|
|
285
289
|
%blockquote {
|
|
286
290
|
@extend %relative, %bold;
|
|
287
291
|
padding: 1.3em 4em 1em;
|
|
288
|
-
color: $
|
|
292
|
+
color: $quote-color;
|
|
293
|
+
@include font-stack($quote-font);
|
|
289
294
|
font-size: 1.15em;
|
|
290
|
-
background:
|
|
295
|
+
background: $quote-background;
|
|
291
296
|
@include border-radius($default-radius);
|
|
292
297
|
&:before {
|
|
293
298
|
content: "\201C"; // left quotation mark
|
|
294
|
-
color: darken($background
|
|
299
|
+
color: darken($quote-background, 20%);
|
|
295
300
|
font-size: 4em;
|
|
296
301
|
display: block;
|
|
297
302
|
position: absolute;
|
|
@@ -300,7 +305,7 @@ $placeholderText-fallback: true !default;
|
|
|
300
305
|
}
|
|
301
306
|
&:after {
|
|
302
307
|
content: "\201D"; // right quotation mark
|
|
303
|
-
color: darken($background
|
|
308
|
+
color: darken($quote-background, 20%);
|
|
304
309
|
font-size: 4em;
|
|
305
310
|
display: block;
|
|
306
311
|
position: absolute;
|
|
@@ -337,7 +342,7 @@ $placeholderText-fallback: true !default;
|
|
|
337
342
|
|
|
338
343
|
%code {
|
|
339
344
|
@extend %inline-block, %monospace;
|
|
340
|
-
white-space:
|
|
345
|
+
white-space: nowrap;
|
|
341
346
|
background: $code-background;
|
|
342
347
|
color: $code-text;
|
|
343
348
|
border: $border-thickness $border-style $border-color;
|
|
@@ -436,7 +441,7 @@ $placeholderText-fallback: true !default;
|
|
|
436
441
|
&.#{nth($modifier-name, $i)} {
|
|
437
442
|
li {
|
|
438
443
|
&:before {
|
|
439
|
-
background:
|
|
444
|
+
background: nth($modifier-code, $i);
|
|
440
445
|
}
|
|
441
446
|
}
|
|
442
447
|
}
|
|
@@ -445,14 +450,14 @@ $placeholderText-fallback: true !default;
|
|
|
445
450
|
@for $i from 1 through length($modifier-name) {
|
|
446
451
|
&.#{nth($modifier-name, $i)} {
|
|
447
452
|
&:before {
|
|
448
|
-
background:
|
|
453
|
+
background: nth($modifier-code, $i);
|
|
449
454
|
}
|
|
450
455
|
}
|
|
451
456
|
}
|
|
452
457
|
@for $i from 1 through length($ui-states) {
|
|
453
458
|
&.#{nth($ui-states, $i)} {
|
|
454
459
|
&:before {
|
|
455
|
-
background-color:
|
|
460
|
+
background-color: nth($ui-states-colors, $i);
|
|
456
461
|
}
|
|
457
462
|
}
|
|
458
463
|
}
|
|
@@ -540,14 +545,24 @@ $placeholderText-fallback: true !default;
|
|
|
540
545
|
@if $type-colors {
|
|
541
546
|
@for $i from 1 through length($modifier-name) {
|
|
542
547
|
.#{nth($modifier-name, $i)} {
|
|
543
|
-
color:
|
|
548
|
+
color: nth($modifier-code, $i);
|
|
549
|
+
}
|
|
550
|
+
.#{nth($modifier-name, $i)}-bg {
|
|
551
|
+
background: nth($modifier-code, $i);
|
|
552
|
+
color: nth($modifier-text, $i);
|
|
544
553
|
}
|
|
545
554
|
}
|
|
546
555
|
}
|
|
547
556
|
|
|
548
|
-
@
|
|
549
|
-
|
|
550
|
-
|
|
557
|
+
@if $ui-states-color-classes {
|
|
558
|
+
@for $i from 1 through length($ui-states) {
|
|
559
|
+
.#{nth($ui-states, $i)} {
|
|
560
|
+
@extend %#{nth($ui-states, $i)};
|
|
561
|
+
}
|
|
562
|
+
.#{nth($ui-states, $i)}-bg {
|
|
563
|
+
background: nth($ui-states-colors, $i);
|
|
564
|
+
color: $white;
|
|
565
|
+
}
|
|
551
566
|
}
|
|
552
567
|
}
|
|
553
568
|
|
|
@@ -60,24 +60,17 @@ $question-border: #f1dbfa !default;
|
|
|
60
60
|
background:white;
|
|
61
61
|
border:1px solid $border-color;
|
|
62
62
|
@include rounded($default-radius);
|
|
63
|
-
&[size] {
|
|
64
|
-
height:auto;
|
|
65
|
-
}
|
|
66
63
|
}
|
|
67
64
|
|
|
68
65
|
%input {
|
|
69
66
|
@extend %field;
|
|
70
|
-
&[size] {
|
|
67
|
+
&[size], &[type="checkbox"], &[type="radio"] {
|
|
71
68
|
height:auto;
|
|
72
69
|
}
|
|
73
|
-
&[type=checkbox], &[type=radio] {
|
|
74
|
-
@extend %inline-block;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
margin: 0 0 0 0.2em;
|
|
78
|
-
background: white;
|
|
79
|
-
border: $border-thickness $border-style $border-color;
|
|
80
|
-
@include rounded($default-radius);
|
|
70
|
+
&[type="checkbox"], &[type="radio"] {
|
|
71
|
+
@extend %zero, %inline-block;
|
|
72
|
+
border: 0;
|
|
73
|
+
@include rounded(0);
|
|
81
74
|
}
|
|
82
75
|
}
|
|
83
76
|
|
|
@@ -35,6 +35,10 @@ $default-radius: 4px !default;
|
|
|
35
35
|
@extend %block, %relative, %pull-left;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
%vertical-navigation-list-item {
|
|
39
|
+
@extend %pull-none;
|
|
40
|
+
}
|
|
41
|
+
|
|
38
42
|
%navigation-link {
|
|
39
43
|
@extend %inline-block, %align-center, %strong;
|
|
40
44
|
background: $nav-color;
|
|
@@ -44,18 +48,26 @@ $default-radius: 4px !default;
|
|
|
44
48
|
text-decoration: none;
|
|
45
49
|
cursor: pointer;
|
|
46
50
|
line-height: 1.5;
|
|
51
|
+
border: 0;
|
|
52
|
+
border-top: $border-thickness $border-style $nav-border-color;
|
|
47
53
|
@include rounded(0);
|
|
48
54
|
&:hover, &:focus {
|
|
49
55
|
@extend %navigation-link-active;
|
|
50
56
|
}
|
|
51
57
|
}
|
|
52
58
|
|
|
59
|
+
%vertical-navigation-link {
|
|
60
|
+
display: block;
|
|
61
|
+
width: 100%;
|
|
62
|
+
text-align: left;
|
|
63
|
+
}
|
|
64
|
+
|
|
53
65
|
%hamburger-button {
|
|
54
66
|
@extend %pull-right;
|
|
55
67
|
display: none;
|
|
56
68
|
background: none;
|
|
57
69
|
color: $nav-active-text;
|
|
58
|
-
border:
|
|
70
|
+
border: 0;
|
|
59
71
|
&:hover, &:focus {
|
|
60
72
|
background: none !important;
|
|
61
73
|
}
|
|
@@ -79,6 +91,12 @@ $default-radius: 4px !default;
|
|
|
79
91
|
@include rounded(0 0 $default-radius $default-radius);
|
|
80
92
|
}
|
|
81
93
|
|
|
94
|
+
%vertical-navigation-menu {
|
|
95
|
+
position: static;
|
|
96
|
+
border: 0;
|
|
97
|
+
@include rounded(0 !important);
|
|
98
|
+
}
|
|
99
|
+
|
|
82
100
|
@for $i from 1 through length($modifier-name) {
|
|
83
101
|
%navigation-#{nth($modifier-name, $i)},
|
|
84
102
|
%navigation-menu-#{nth($modifier-name, $i)} {
|
|
@@ -149,6 +167,73 @@ $default-radius: 4px !default;
|
|
|
149
167
|
}
|
|
150
168
|
}
|
|
151
169
|
|
|
170
|
+
&.vertical {
|
|
171
|
+
> ul {
|
|
172
|
+
> li:first-child {
|
|
173
|
+
> a, > button {
|
|
174
|
+
border-top-width: 0;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
> li {
|
|
178
|
+
> a, > button {
|
|
179
|
+
border-top-width: $border-thickness;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
li {
|
|
184
|
+
li {
|
|
185
|
+
a, button {
|
|
186
|
+
text-indent: $gutter;
|
|
187
|
+
}
|
|
188
|
+
li {
|
|
189
|
+
a, button {
|
|
190
|
+
text-indent: ($gutter * 2);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
@extend %vertical-navigation-list-item;
|
|
195
|
+
&[role="menu"] {
|
|
196
|
+
> a, > button {
|
|
197
|
+
&:after {
|
|
198
|
+
content: $icon-caret-down;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
&[aria-pressed="true"] {
|
|
202
|
+
> a, > button {
|
|
203
|
+
&:after {
|
|
204
|
+
content: $icon-caret-up;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
ul {
|
|
210
|
+
@extend %vertical-navigation-menu;
|
|
211
|
+
li {
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
li {
|
|
215
|
+
@include rounded(0 0 0 0);
|
|
216
|
+
&:last-child {
|
|
217
|
+
a, button {
|
|
218
|
+
@include rounded(0 0 0 0);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
ul {
|
|
222
|
+
li {
|
|
223
|
+
&:first-child {
|
|
224
|
+
a, button {
|
|
225
|
+
@include rounded(0 0 0 0);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
a, button:not(.hamburger) {
|
|
233
|
+
@extend %vertical-navigation-link;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
152
237
|
ul {
|
|
153
238
|
@extend %navigation-list;
|
|
154
239
|
}
|
|
@@ -178,18 +263,17 @@ $default-radius: 4px !default;
|
|
|
178
263
|
|
|
179
264
|
ul {
|
|
180
265
|
@extend %navigation-menu;
|
|
181
|
-
|
|
266
|
+
> li {
|
|
267
|
+
&:first-child {
|
|
268
|
+
> a, > button {
|
|
269
|
+
border-top-width: 0;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
182
273
|
a, button {
|
|
183
274
|
@extend %align-left;
|
|
184
275
|
display: block;
|
|
185
276
|
width: 100%;
|
|
186
|
-
border-top: $border-thickness $border-style $nav-border-color;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
li:first-child {
|
|
190
|
-
a, button {
|
|
191
|
-
border-top: none;
|
|
192
|
-
}
|
|
193
277
|
}
|
|
194
278
|
}
|
|
195
279
|
|
|
@@ -230,10 +314,9 @@ $default-radius: 4px !default;
|
|
|
230
314
|
}
|
|
231
315
|
}
|
|
232
316
|
}
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
}
|
|
317
|
+
}
|
|
318
|
+
ul[aria-expanded="true"] {
|
|
319
|
+
display: block;
|
|
237
320
|
}
|
|
238
321
|
|
|
239
322
|
a, a:visited, button {
|
|
@@ -244,8 +327,17 @@ $default-radius: 4px !default;
|
|
|
244
327
|
}
|
|
245
328
|
}
|
|
246
329
|
}
|
|
247
|
-
|
|
248
|
-
|
|
330
|
+
> ul {
|
|
331
|
+
> li {
|
|
332
|
+
> a, > button {
|
|
333
|
+
border-top-width: 0;
|
|
334
|
+
}
|
|
335
|
+
&:first-child {
|
|
336
|
+
> a, > button {
|
|
337
|
+
border-top-width: 0;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
249
341
|
}
|
|
250
342
|
}
|
|
251
343
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div class="padded">
|
|
2
2
|
<div class="row">
|
|
3
3
|
<div class="three fifths bounceInRight animated">
|
|
4
|
-
<h1 class="zero museo-slab">Navigation
|
|
4
|
+
<h1 class="zero museo-slab">Navigation</h1>
|
|
5
5
|
<p class="quicksand">Responsive navigation created by <a href="http://twitter.com/ghepting" target="_blank">Gary Hepting</a></p>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="two fifths align-right-ipad align-right-desktop flipInX animated">
|
|
@@ -19,17 +19,17 @@
|
|
|
19
19
|
<div class="one whole padded">
|
|
20
20
|
<h4>iPad</h4>
|
|
21
21
|
<nav title="iPad Menu" role="navigation" class="nav">
|
|
22
|
-
<ul
|
|
22
|
+
<ul>
|
|
23
23
|
<li>
|
|
24
24
|
<button>Nav Item 1</button>
|
|
25
25
|
</li>
|
|
26
|
-
<li
|
|
26
|
+
<li>
|
|
27
27
|
<button>Nav Menu 1</button>
|
|
28
28
|
<ul>
|
|
29
29
|
<li>
|
|
30
30
|
<button>Menu Item 1</button>
|
|
31
31
|
</li>
|
|
32
|
-
<li
|
|
32
|
+
<li>
|
|
33
33
|
<button>Sub Menu 1</button>
|
|
34
34
|
<ul>
|
|
35
35
|
<li>
|
|
@@ -74,17 +74,17 @@
|
|
|
74
74
|
<div class="one whole padded">
|
|
75
75
|
<h4>Small Tablet</h4>
|
|
76
76
|
<nav title="Small Tablet Menu" role="navigation" class="nav small-tablet">
|
|
77
|
-
<ul
|
|
77
|
+
<ul>
|
|
78
78
|
<li>
|
|
79
79
|
<button>Nav Item 1</button>
|
|
80
80
|
</li>
|
|
81
|
-
<li
|
|
81
|
+
<li>
|
|
82
82
|
<button>Nav Menu 1</button>
|
|
83
83
|
<ul>
|
|
84
84
|
<li>
|
|
85
85
|
<button>Menu Item 1</button>
|
|
86
86
|
</li>
|
|
87
|
-
<li
|
|
87
|
+
<li>
|
|
88
88
|
<button>Sub Menu 1</button>
|
|
89
89
|
<ul>
|
|
90
90
|
<li>
|
|
@@ -112,17 +112,17 @@
|
|
|
112
112
|
<div class="one whole padded">
|
|
113
113
|
<h4>Mobile</h4>
|
|
114
114
|
<nav title="Mobile Menu" role="navigation" class="nav mobile">
|
|
115
|
-
<ul
|
|
115
|
+
<ul>
|
|
116
116
|
<li>
|
|
117
117
|
<button>Nav Item 1</button>
|
|
118
118
|
</li>
|
|
119
|
-
<li
|
|
119
|
+
<li>
|
|
120
120
|
<button>Nav Menu 1</button>
|
|
121
121
|
<ul>
|
|
122
122
|
<li>
|
|
123
123
|
<button>Menu Item 1</button>
|
|
124
124
|
</li>
|
|
125
|
-
<li
|
|
125
|
+
<li>
|
|
126
126
|
<button>Sub Menu 1</button>
|
|
127
127
|
<ul>
|
|
128
128
|
<li>
|
|
@@ -146,22 +146,60 @@
|
|
|
146
146
|
<pre data-lang="html"><nav class="nav mobile" title="Mobile Menu">...</nav></pre>
|
|
147
147
|
</div>
|
|
148
148
|
</div>
|
|
149
|
+
<div class="row">
|
|
150
|
+
<div class="one whole padded">
|
|
151
|
+
<h4>Vegetarian (No Hamburger)</h4>
|
|
152
|
+
<nav role="navigation" class="nav nocollapse">
|
|
153
|
+
<ul>
|
|
154
|
+
<li>
|
|
155
|
+
<button>Nav Item 1</button>
|
|
156
|
+
</li>
|
|
157
|
+
<li>
|
|
158
|
+
<button>Nav Menu 1</button>
|
|
159
|
+
<ul>
|
|
160
|
+
<li>
|
|
161
|
+
<button>Menu Item 1</button>
|
|
162
|
+
</li>
|
|
163
|
+
<li>
|
|
164
|
+
<button>Sub Menu 1</button>
|
|
165
|
+
<ul>
|
|
166
|
+
<li>
|
|
167
|
+
<button>Sub Menu Item 1</button>
|
|
168
|
+
</li>
|
|
169
|
+
<li>
|
|
170
|
+
<button>Sub Menu Item 2</button>
|
|
171
|
+
</li>
|
|
172
|
+
</ul>
|
|
173
|
+
</li>
|
|
174
|
+
<li>
|
|
175
|
+
<button>Menu Item 2</button>
|
|
176
|
+
</li>
|
|
177
|
+
</ul>
|
|
178
|
+
</li>
|
|
179
|
+
<li>
|
|
180
|
+
<button>Nav Item 3</button>
|
|
181
|
+
</li>
|
|
182
|
+
</ul>
|
|
183
|
+
</nav><br>
|
|
184
|
+
<pre data-lang="html"><nav class="nav nocollapse" title="Vegetarian Menu">...</nav></pre>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
149
187
|
</div><br>
|
|
150
188
|
<h4>Colors</h4>
|
|
151
189
|
<div class="row">
|
|
152
|
-
<div class="one
|
|
190
|
+
<div class="one half padded">
|
|
153
191
|
<nav role="navigation" class="nav yellow">
|
|
154
|
-
<ul
|
|
192
|
+
<ul>
|
|
155
193
|
<li>
|
|
156
194
|
<button>Nav Item 1</button>
|
|
157
195
|
</li>
|
|
158
|
-
<li
|
|
196
|
+
<li>
|
|
159
197
|
<button>Nav Menu 1</button>
|
|
160
198
|
<ul>
|
|
161
199
|
<li>
|
|
162
200
|
<button>Menu Item 1</button>
|
|
163
201
|
</li>
|
|
164
|
-
<li
|
|
202
|
+
<li>
|
|
165
203
|
<button>Sub Menu 1</button>
|
|
166
204
|
<ul>
|
|
167
205
|
<li>
|
|
@@ -183,19 +221,19 @@
|
|
|
183
221
|
</ul>
|
|
184
222
|
</nav>
|
|
185
223
|
</div>
|
|
186
|
-
<div class="one
|
|
224
|
+
<div class="one half padded">
|
|
187
225
|
<nav role="navigation" class="nav orange">
|
|
188
|
-
<ul
|
|
226
|
+
<ul>
|
|
189
227
|
<li>
|
|
190
228
|
<button>Nav Item 1</button>
|
|
191
229
|
</li>
|
|
192
|
-
<li
|
|
230
|
+
<li>
|
|
193
231
|
<button>Nav Menu 1</button>
|
|
194
232
|
<ul>
|
|
195
233
|
<li>
|
|
196
234
|
<button>Menu Item 1</button>
|
|
197
235
|
</li>
|
|
198
|
-
<li
|
|
236
|
+
<li>
|
|
199
237
|
<button>Sub Menu 1</button>
|
|
200
238
|
<ul>
|
|
201
239
|
<li>
|
|
@@ -217,19 +255,21 @@
|
|
|
217
255
|
</ul>
|
|
218
256
|
</nav>
|
|
219
257
|
</div>
|
|
220
|
-
|
|
258
|
+
</div>
|
|
259
|
+
<div class="row gap-top">
|
|
260
|
+
<div class="one half padded">
|
|
221
261
|
<nav role="navigation" class="nav red">
|
|
222
|
-
<ul
|
|
262
|
+
<ul>
|
|
223
263
|
<li>
|
|
224
264
|
<button>Nav Item 1</button>
|
|
225
265
|
</li>
|
|
226
|
-
<li
|
|
266
|
+
<li>
|
|
227
267
|
<button>Nav Menu 1</button>
|
|
228
268
|
<ul>
|
|
229
269
|
<li>
|
|
230
270
|
<button>Menu Item 1</button>
|
|
231
271
|
</li>
|
|
232
|
-
<li
|
|
272
|
+
<li>
|
|
233
273
|
<button>Sub Menu 1</button>
|
|
234
274
|
<ul>
|
|
235
275
|
<li>
|
|
@@ -251,21 +291,19 @@
|
|
|
251
291
|
</ul>
|
|
252
292
|
</nav>
|
|
253
293
|
</div>
|
|
254
|
-
|
|
255
|
-
<div class="row">
|
|
256
|
-
<div class="one third padded">
|
|
294
|
+
<div class="one half padded">
|
|
257
295
|
<nav role="navigation" class="nav pink">
|
|
258
|
-
<ul
|
|
296
|
+
<ul>
|
|
259
297
|
<li>
|
|
260
298
|
<button>Nav Item 1</button>
|
|
261
299
|
</li>
|
|
262
|
-
<li
|
|
300
|
+
<li>
|
|
263
301
|
<button>Nav Menu 1</button>
|
|
264
302
|
<ul>
|
|
265
303
|
<li>
|
|
266
304
|
<button>Menu Item 1</button>
|
|
267
305
|
</li>
|
|
268
|
-
<li
|
|
306
|
+
<li>
|
|
269
307
|
<button>Sub Menu 1</button>
|
|
270
308
|
<ul>
|
|
271
309
|
<li>
|
|
@@ -287,19 +325,21 @@
|
|
|
287
325
|
</ul>
|
|
288
326
|
</nav>
|
|
289
327
|
</div>
|
|
290
|
-
|
|
328
|
+
</div>
|
|
329
|
+
<div class="row gap-top">
|
|
330
|
+
<div class="one half padded">
|
|
291
331
|
<nav role="navigation" class="nav purple">
|
|
292
|
-
<ul
|
|
332
|
+
<ul>
|
|
293
333
|
<li>
|
|
294
334
|
<button>Nav Item 1</button>
|
|
295
335
|
</li>
|
|
296
|
-
<li
|
|
336
|
+
<li>
|
|
297
337
|
<button>Nav Menu 1</button>
|
|
298
338
|
<ul>
|
|
299
339
|
<li>
|
|
300
340
|
<button>Menu Item 1</button>
|
|
301
341
|
</li>
|
|
302
|
-
<li
|
|
342
|
+
<li>
|
|
303
343
|
<button>Sub Menu 1</button>
|
|
304
344
|
<ul>
|
|
305
345
|
<li>
|
|
@@ -321,19 +361,19 @@
|
|
|
321
361
|
</ul>
|
|
322
362
|
</nav>
|
|
323
363
|
</div>
|
|
324
|
-
<div class="one
|
|
364
|
+
<div class="one half padded">
|
|
325
365
|
<nav role="navigation" class="nav asphalt">
|
|
326
|
-
<ul
|
|
366
|
+
<ul>
|
|
327
367
|
<li>
|
|
328
368
|
<button>Nav Item 1</button>
|
|
329
369
|
</li>
|
|
330
|
-
<li
|
|
370
|
+
<li>
|
|
331
371
|
<button>Nav Menu 1</button>
|
|
332
372
|
<ul>
|
|
333
373
|
<li>
|
|
334
374
|
<button>Menu Item 1</button>
|
|
335
375
|
</li>
|
|
336
|
-
<li
|
|
376
|
+
<li>
|
|
337
377
|
<button>Sub Menu 1</button>
|
|
338
378
|
<ul>
|
|
339
379
|
<li>
|
|
@@ -355,21 +395,21 @@
|
|
|
355
395
|
</ul>
|
|
356
396
|
</nav>
|
|
357
397
|
</div>
|
|
358
|
-
</div
|
|
359
|
-
<div class="row">
|
|
360
|
-
<div class="one
|
|
398
|
+
</div>
|
|
399
|
+
<div class="row gap-top">
|
|
400
|
+
<div class="one half padded">
|
|
361
401
|
<nav role="navigation" class="nav blue">
|
|
362
|
-
<ul
|
|
402
|
+
<ul>
|
|
363
403
|
<li>
|
|
364
404
|
<button>Nav Item 1</button>
|
|
365
405
|
</li>
|
|
366
|
-
<li
|
|
406
|
+
<li>
|
|
367
407
|
<button>Nav Menu 1</button>
|
|
368
408
|
<ul>
|
|
369
409
|
<li>
|
|
370
410
|
<button>Menu Item 1</button>
|
|
371
411
|
</li>
|
|
372
|
-
<li
|
|
412
|
+
<li>
|
|
373
413
|
<button>Sub Menu 1</button>
|
|
374
414
|
<ul>
|
|
375
415
|
<li>
|
|
@@ -391,19 +431,19 @@
|
|
|
391
431
|
</ul>
|
|
392
432
|
</nav>
|
|
393
433
|
</div>
|
|
394
|
-
<div class="one
|
|
434
|
+
<div class="one half padded">
|
|
395
435
|
<nav role="navigation" class="nav turquoise">
|
|
396
|
-
<ul
|
|
436
|
+
<ul>
|
|
397
437
|
<li>
|
|
398
438
|
<button>Nav Item 1</button>
|
|
399
439
|
</li>
|
|
400
|
-
<li
|
|
440
|
+
<li>
|
|
401
441
|
<button>Nav Menu 1</button>
|
|
402
442
|
<ul>
|
|
403
443
|
<li>
|
|
404
444
|
<button>Menu Item 1</button>
|
|
405
445
|
</li>
|
|
406
|
-
<li
|
|
446
|
+
<li>
|
|
407
447
|
<button>Sub Menu 1</button>
|
|
408
448
|
<ul>
|
|
409
449
|
<li>
|
|
@@ -425,19 +465,55 @@
|
|
|
425
465
|
</ul>
|
|
426
466
|
</nav>
|
|
427
467
|
</div>
|
|
428
|
-
|
|
468
|
+
</div>
|
|
469
|
+
<div class="row gap-top">
|
|
470
|
+
<div class="one half padded">
|
|
429
471
|
<nav role="navigation" class="nav green">
|
|
430
|
-
<ul
|
|
472
|
+
<ul>
|
|
431
473
|
<li>
|
|
432
474
|
<button>Nav Item 1</button>
|
|
433
475
|
</li>
|
|
434
|
-
<li
|
|
476
|
+
<li>
|
|
435
477
|
<button>Nav Menu 1</button>
|
|
436
478
|
<ul>
|
|
437
479
|
<li>
|
|
438
480
|
<button>Menu Item 1</button>
|
|
439
481
|
</li>
|
|
440
|
-
<li
|
|
482
|
+
<li>
|
|
483
|
+
<button>Sub Menu 1</button>
|
|
484
|
+
<ul>
|
|
485
|
+
<li>
|
|
486
|
+
<button>Sub Menu Item 1</button>
|
|
487
|
+
</li>
|
|
488
|
+
<li>
|
|
489
|
+
<button>Sub Menu Item 2</button>
|
|
490
|
+
</li>
|
|
491
|
+
</ul>
|
|
492
|
+
</li>
|
|
493
|
+
<li>
|
|
494
|
+
<button>Menu Item 2</button>
|
|
495
|
+
</li>
|
|
496
|
+
</ul>
|
|
497
|
+
</li>
|
|
498
|
+
<li>
|
|
499
|
+
<button>Nav Item 3</button>
|
|
500
|
+
</li>
|
|
501
|
+
</ul>
|
|
502
|
+
</nav>
|
|
503
|
+
</div>
|
|
504
|
+
<div class="one half padded">
|
|
505
|
+
<nav role="navigation" class="nav charcoal">
|
|
506
|
+
<ul>
|
|
507
|
+
<li>
|
|
508
|
+
<button>Nav Item 1</button>
|
|
509
|
+
</li>
|
|
510
|
+
<li>
|
|
511
|
+
<button>Nav Menu 1</button>
|
|
512
|
+
<ul>
|
|
513
|
+
<li>
|
|
514
|
+
<button>Menu Item 1</button>
|
|
515
|
+
</li>
|
|
516
|
+
<li>
|
|
441
517
|
<button>Sub Menu 1</button>
|
|
442
518
|
<ul>
|
|
443
519
|
<li>
|
|
@@ -460,20 +536,23 @@
|
|
|
460
536
|
</nav>
|
|
461
537
|
</div>
|
|
462
538
|
</div><br>
|
|
539
|
+
<hr><br>
|
|
540
|
+
<h4>Vertical Orientation</h4>
|
|
463
541
|
<div class="row">
|
|
464
542
|
<div class="one third padded">
|
|
465
|
-
<
|
|
466
|
-
|
|
543
|
+
<h4>iPad</h4>
|
|
544
|
+
<nav title="Vertical iPad Menu" role="navigation" class="nav vertical">
|
|
545
|
+
<ul>
|
|
467
546
|
<li>
|
|
468
547
|
<button>Nav Item 1</button>
|
|
469
548
|
</li>
|
|
470
|
-
<li
|
|
549
|
+
<li>
|
|
471
550
|
<button>Nav Menu 1</button>
|
|
472
551
|
<ul>
|
|
473
552
|
<li>
|
|
474
553
|
<button>Menu Item 1</button>
|
|
475
554
|
</li>
|
|
476
|
-
<li
|
|
555
|
+
<li>
|
|
477
556
|
<button>Sub Menu 1</button>
|
|
478
557
|
<ul>
|
|
479
558
|
<li>
|
|
@@ -493,7 +572,118 @@
|
|
|
493
572
|
<button>Nav Item 3</button>
|
|
494
573
|
</li>
|
|
495
574
|
</ul>
|
|
496
|
-
</nav>
|
|
575
|
+
</nav><br>
|
|
576
|
+
<pre data-lang="html"><nav class="nav vertical" title="Vertical iPad Menu">...</nav></pre>
|
|
577
|
+
</div>
|
|
578
|
+
<div class="one third padded">
|
|
579
|
+
<h4>Small Tablet</h4>
|
|
580
|
+
<nav title="Vertical Small-Tablet Menu" role="navigation" class="nav small-tablet vertical">
|
|
581
|
+
<ul>
|
|
582
|
+
<li>
|
|
583
|
+
<button>Nav Item 1</button>
|
|
584
|
+
</li>
|
|
585
|
+
<li>
|
|
586
|
+
<button>Nav Menu 1</button>
|
|
587
|
+
<ul>
|
|
588
|
+
<li>
|
|
589
|
+
<button>Menu Item 1</button>
|
|
590
|
+
</li>
|
|
591
|
+
<li>
|
|
592
|
+
<button>Sub Menu 1</button>
|
|
593
|
+
<ul>
|
|
594
|
+
<li>
|
|
595
|
+
<button>Sub Menu Item 1</button>
|
|
596
|
+
</li>
|
|
597
|
+
<li>
|
|
598
|
+
<button>Sub Menu Item 2</button>
|
|
599
|
+
</li>
|
|
600
|
+
</ul>
|
|
601
|
+
</li>
|
|
602
|
+
<li>
|
|
603
|
+
<button>Menu Item 2</button>
|
|
604
|
+
</li>
|
|
605
|
+
</ul>
|
|
606
|
+
</li>
|
|
607
|
+
<li>
|
|
608
|
+
<button>Nav Item 3</button>
|
|
609
|
+
</li>
|
|
610
|
+
</ul>
|
|
611
|
+
</nav><br>
|
|
612
|
+
<pre data-lang="html"><nav class="nav small-tablet vertical" title="Vertical Small-Tablet Menu">...</nav></pre>
|
|
613
|
+
</div>
|
|
614
|
+
<div class="one third padded">
|
|
615
|
+
<h4>Mobile</h4>
|
|
616
|
+
<nav title="Vertical Mobile Menu" role="navigation" class="nav mobile vertical">
|
|
617
|
+
<ul>
|
|
618
|
+
<li>
|
|
619
|
+
<button>Nav Item 1</button>
|
|
620
|
+
</li>
|
|
621
|
+
<li>
|
|
622
|
+
<button>Nav Menu 1</button>
|
|
623
|
+
<ul>
|
|
624
|
+
<li>
|
|
625
|
+
<button>Menu Item 1</button>
|
|
626
|
+
</li>
|
|
627
|
+
<li>
|
|
628
|
+
<button>Sub Menu 1</button>
|
|
629
|
+
<ul>
|
|
630
|
+
<li>
|
|
631
|
+
<button>Sub Menu Item 1</button>
|
|
632
|
+
</li>
|
|
633
|
+
<li>
|
|
634
|
+
<button>Sub Menu Item 2</button>
|
|
635
|
+
</li>
|
|
636
|
+
</ul>
|
|
637
|
+
</li>
|
|
638
|
+
<li>
|
|
639
|
+
<button>Menu Item 2</button>
|
|
640
|
+
</li>
|
|
641
|
+
</ul>
|
|
642
|
+
</li>
|
|
643
|
+
<li>
|
|
644
|
+
<button>Nav Item 3</button>
|
|
645
|
+
</li>
|
|
646
|
+
</ul>
|
|
647
|
+
</nav><br>
|
|
648
|
+
<pre data-lang="html"><nav class="nav mobile vertical" title="Vertical Mobile Menu">...</nav></pre>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
<div class="row">
|
|
652
|
+
<div class="one whole padded">
|
|
653
|
+
<h4>Vegetarian (No Hamburger)</h4>
|
|
654
|
+
<nav role="navigation" class="nav nocollapse vertical">
|
|
655
|
+
<ul>
|
|
656
|
+
<li>
|
|
657
|
+
<button>Nav Item 1</button>
|
|
658
|
+
</li>
|
|
659
|
+
<li>
|
|
660
|
+
<button>Nav Menu 1</button>
|
|
661
|
+
<ul>
|
|
662
|
+
<li>
|
|
663
|
+
<button>Menu Item 1</button>
|
|
664
|
+
</li>
|
|
665
|
+
<li>
|
|
666
|
+
<button>Sub Menu 1</button>
|
|
667
|
+
<ul>
|
|
668
|
+
<li>
|
|
669
|
+
<button>Sub Menu Item 1</button>
|
|
670
|
+
</li>
|
|
671
|
+
<li>
|
|
672
|
+
<button>Sub Menu Item 2</button>
|
|
673
|
+
</li>
|
|
674
|
+
</ul>
|
|
675
|
+
</li>
|
|
676
|
+
<li>
|
|
677
|
+
<button>Menu Item 2</button>
|
|
678
|
+
</li>
|
|
679
|
+
</ul>
|
|
680
|
+
</li>
|
|
681
|
+
<li>
|
|
682
|
+
<button>Nav Item 3</button>
|
|
683
|
+
</li>
|
|
684
|
+
</ul>
|
|
685
|
+
</nav><br>
|
|
686
|
+
<pre data-lang="html"><nav class="nav vertical nocollapse">...</nav</pre>
|
|
497
687
|
</div>
|
|
498
688
|
</div>
|
|
499
689
|
</div>
|