zurb-foundation 4.1.6 → 4.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/CONTRIBUTING.md +5 -4
- data/Gemfile.lock +1 -1
- data/README.md +7 -0
- data/docs/CHANGELOG.md +27 -0
- data/docs/Gemfile +2 -0
- data/docs/Gemfile.lock +10 -0
- data/docs/_sidebar-components.html.erb +1 -0
- data/docs/_sidebar.html.erb +1 -0
- data/docs/components/alert-boxes.html.erb +8 -3
- data/docs/components/block-grid.html.erb +3 -3
- data/docs/components/breadcrumbs.html.erb +2 -2
- data/docs/components/button-groups.html.erb +2 -2
- data/docs/components/buttons.html.erb +3 -3
- data/docs/components/clearing.html.erb +7 -6
- data/docs/components/custom-forms.html.erb +1 -0
- data/docs/components/dropdown-buttons.html.erb +3 -3
- data/docs/components/dropdown.html.erb +20 -4
- data/docs/components/flex-video.html.erb +3 -3
- data/docs/components/forms.html.erb +5 -5
- data/docs/components/global.html.erb +235 -3
- data/docs/components/grid.html.erb +2 -2
- data/docs/components/inline-lists.html.erb +3 -3
- data/docs/components/interchange.html.erb +127 -0
- data/docs/components/keystrokes.html.erb +3 -3
- data/docs/components/kitchen-sink.html.erb +2 -2
- data/docs/components/labels.html.erb +3 -3
- data/docs/components/orbit.html.erb +120 -8
- data/docs/components/pagination.html.erb +5 -5
- data/docs/components/panels.html.erb +3 -3
- data/docs/components/pricing-tables.html.erb +3 -3
- data/docs/components/progress-bars.html.erb +3 -3
- data/docs/components/reveal.html.erb +126 -7
- data/docs/components/section.html.erb +43 -1
- data/docs/components/side-nav.html.erb +3 -3
- data/docs/components/split-buttons.html.erb +3 -3
- data/docs/components/sub-nav.html.erb +4 -4
- data/docs/components/switch.html.erb +3 -3
- data/docs/components/tables.html.erb +1 -1
- data/docs/components/thumbnails.html.erb +2 -2
- data/docs/components/tooltips.html.erb +34 -1
- data/docs/components/top-bar.html.erb +109 -30
- data/docs/components/type.html.erb +2 -1
- data/docs/components/visibility.html.erb +8 -8
- data/docs/css/normalize.scss +2 -2
- data/docs/css/qunit.css +1 -1
- data/docs/img/demos/demo1.jpg +0 -0
- data/docs/img/demos/demo2.jpg +0 -0
- data/docs/img/demos/demo3.jpg +0 -0
- data/docs/img/demos/demo4.jpg +0 -0
- data/docs/img/demos/demo5.jpg +0 -0
- data/docs/img/demos/interchange/default.jpg +0 -0
- data/docs/img/demos/interchange/large.jpg +0 -0
- data/docs/img/demos/interchange/med.jpg +0 -0
- data/docs/img/demos/interchange/small.jpg +0 -0
- data/docs/img/demos/interchange/smallest.jpg +0 -0
- data/docs/index.html.erb +14 -5
- data/docs/javascript.html.erb +2 -4
- data/docs/layout.html.erb +1 -1
- data/docs/rails.html.erb +4 -1
- data/docs/sass.html.erb +1274 -1023
- data/js/foundation/foundation.alerts.js +3 -1
- data/js/foundation/foundation.clearing.js +1 -1
- data/js/foundation/foundation.dropdown.js +25 -6
- data/js/foundation/foundation.forms.js +14 -12
- data/js/foundation/foundation.interchange.js +265 -0
- data/js/foundation/foundation.joyride.js +16 -3
- data/js/foundation/foundation.js +53 -7
- data/js/foundation/foundation.magellan.js +5 -3
- data/js/foundation/foundation.orbit.js +19 -2
- data/js/foundation/foundation.reveal.js +64 -11
- data/js/foundation/foundation.section.js +26 -17
- data/js/foundation/foundation.tooltips.js +16 -8
- data/js/foundation/foundation.topbar.js +98 -46
- data/js/foundation/index.js +1 -0
- data/lib/foundation/generators/install_generator.rb +2 -2
- data/lib/foundation/version.rb +1 -1
- data/scss/foundation/_variables.scss +134 -71
- data/scss/foundation/components/_alert-boxes.scss +20 -20
- data/scss/foundation/components/_block-grid.scss +7 -4
- data/scss/foundation/components/_breadcrumbs.scss +3 -3
- data/scss/foundation/components/_buttons.scss +5 -3
- data/scss/foundation/components/_clearing.scss +12 -6
- data/scss/foundation/components/_custom-forms.scss +17 -10
- data/scss/foundation/components/_dropdown.scss +6 -6
- data/scss/foundation/components/_forms.scss +5 -3
- data/scss/foundation/components/_global.scss +63 -30
- data/scss/foundation/components/_grid.scss +10 -9
- data/scss/foundation/components/_joyride.scss +22 -20
- data/scss/foundation/components/_keystrokes.scss +1 -1
- data/scss/foundation/components/_orbit.scss +108 -30
- data/scss/foundation/components/_reveal.scss +12 -8
- data/scss/foundation/components/_section.scss +38 -3
- data/scss/foundation/components/_switch.scss +18 -12
- data/scss/foundation/components/_thumbs.scss +10 -3
- data/scss/foundation/components/_tooltips.scss +11 -11
- data/scss/foundation/components/_top-bar.scss +102 -64
- data/scss/foundation/components/_type.scss +54 -47
- data/templates/project/manifest.rb +1 -0
- metadata +11 -4
@@ -29,6 +29,9 @@ $section-vertical-nav-min-width: emCalc(200px) !default;
|
|
29
29
|
$section-vertical-tabs-title-width: emCalc(200px) !default;
|
30
30
|
$section-bottom-margin: emCalc(20px) !default;
|
31
31
|
|
32
|
+
$title-selector: ".title" !default;
|
33
|
+
$content-selector: ".content" !default;
|
34
|
+
|
32
35
|
|
33
36
|
//
|
34
37
|
// Section Mixins
|
@@ -83,7 +86,7 @@ $section-bottom-margin: emCalc(20px) !default;
|
|
83
86
|
// Default Styles
|
84
87
|
> #{$title-selector} {
|
85
88
|
background-color: $title-bg;
|
86
|
-
cursor: pointer;
|
89
|
+
cursor: $cursor-pointer-value;
|
87
90
|
margin-bottom: 0;
|
88
91
|
|
89
92
|
a {
|
@@ -278,7 +281,7 @@ $section-bottom-margin: emCalc(20px) !default;
|
|
278
281
|
@include section-container(false, tabs);
|
279
282
|
|
280
283
|
&>section,
|
281
|
-
&>.section { @include section(tabs, $title-bg-active
|
284
|
+
&>.section { @include section(tabs, $title-bg-active:$section-title-bg-active-tabs); }
|
282
285
|
}
|
283
286
|
|
284
287
|
@media #{$small} {
|
@@ -287,7 +290,7 @@ $section-bottom-margin: emCalc(20px) !default;
|
|
287
290
|
@include section-container(false, tabs);
|
288
291
|
|
289
292
|
&>section,
|
290
|
-
&>.section { @include section(tabs, $title-bg-active
|
293
|
+
&>.section { @include section(tabs, $title-bg-active:$section-title-bg-active-tabs); }
|
291
294
|
}
|
292
295
|
.section-container.accordion .section {
|
293
296
|
padding-top: 0 !important;
|
@@ -315,4 +318,36 @@ $section-bottom-margin: emCalc(20px) !default;
|
|
315
318
|
}
|
316
319
|
}
|
317
320
|
|
321
|
+
// Change all variations to expanded accordions when no JS is detected.
|
322
|
+
.no-js .section-container {
|
323
|
+
&.auto,
|
324
|
+
&.accordion,
|
325
|
+
&.tabs,
|
326
|
+
&.vertical-tabs,
|
327
|
+
&.vertical-nav,
|
328
|
+
&.horizontal-nav {
|
329
|
+
@include section-container(accordion);
|
330
|
+
|
331
|
+
&>section,
|
332
|
+
&>.section { @include section(accordion);
|
333
|
+
#{$title-selector} {
|
334
|
+
position: static;
|
335
|
+
width: 100%;
|
336
|
+
border-left: 0;
|
337
|
+
border-right: 0;
|
338
|
+
}
|
339
|
+
|
340
|
+
#{$content-selector} {
|
341
|
+
position: static;
|
342
|
+
display: block;
|
343
|
+
width: 100%;
|
344
|
+
border-left: 0;
|
345
|
+
border-right: 0;
|
346
|
+
border-bottom: 0;
|
347
|
+
}
|
348
|
+
}
|
349
|
+
|
350
|
+
}
|
351
|
+
}
|
352
|
+
|
318
353
|
}
|
@@ -80,11 +80,11 @@ $switch-label-outline: 1px dotted #888 !default;
|
|
80
80
|
width: 100%;
|
81
81
|
height: 100%;
|
82
82
|
-moz-appearance: none;
|
83
|
-
|
83
|
+
|
84
84
|
// Hover and focus styles for the paddle
|
85
85
|
&:hover,
|
86
86
|
&:focus {
|
87
|
-
cursor: pointer;
|
87
|
+
cursor: $cursor-pointer-value;
|
88
88
|
}
|
89
89
|
}
|
90
90
|
|
@@ -127,7 +127,7 @@ $switch-label-outline: 1px dotted #888 !default;
|
|
127
127
|
|
128
128
|
// Bugfix for older Webkit, including mobile Webkit. Adapted from:
|
129
129
|
// http://css-tricks.com/webkit-sibling-bug/
|
130
|
-
-webkit-animation: webkitSiblingBugfix infinite 1s;
|
130
|
+
@if $experimental { -webkit-animation: webkitSiblingBugfix infinite 1s; }
|
131
131
|
|
132
132
|
}
|
133
133
|
|
@@ -167,15 +167,19 @@ $switch-label-outline: 1px dotted #888 !default;
|
|
167
167
|
& > span {
|
168
168
|
border-color: darken($paddle-bg, 30%);
|
169
169
|
background: $paddle-bg;
|
170
|
-
|
171
|
-
|
170
|
+
@if $experimental {
|
171
|
+
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
172
|
+
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
173
|
+
}
|
172
174
|
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
173
175
|
|
174
176
|
// Building the alternating colored sides of the switch
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
177
|
+
@if $experimental {
|
178
|
+
-webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
|
179
|
+
1000px 0 0 1000px $positive-color,
|
180
|
+
-2px 0 10px 0 rgba(0,0,0,0.07),
|
181
|
+
-1000px 0 0 1000px $negative-color;
|
182
|
+
}
|
179
183
|
box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
|
180
184
|
1000px 0 0 980px $positive-color,
|
181
185
|
-2px 0 10px 0 rgba(0,0,0,0.07),
|
@@ -186,8 +190,10 @@ $switch-label-outline: 1px dotted #888 !default;
|
|
186
190
|
&:focus {
|
187
191
|
& > span {
|
188
192
|
background: $paddle-bg;
|
189
|
-
|
190
|
-
|
193
|
+
@if $experimental {
|
194
|
+
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
195
|
+
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
196
|
+
}
|
191
197
|
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
192
198
|
}
|
193
199
|
}
|
@@ -245,7 +251,7 @@ $switch-label-outline: 1px dotted #888 !default;
|
|
245
251
|
|
246
252
|
}
|
247
253
|
|
248
|
-
@-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } }
|
254
|
+
@if $experimental { @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } } }
|
249
255
|
|
250
256
|
}
|
251
257
|
}
|
@@ -23,11 +23,18 @@ $thumb-transition-speed: 200ms !default;
|
|
23
23
|
line-height: 0;
|
24
24
|
display: inline-block;
|
25
25
|
border: $thumb-border-style $border-width $thumb-border-color;
|
26
|
-
|
26
|
+
@if $experimental {
|
27
|
+
-webkit-box-shadow: $box-shadow;
|
28
|
+
}
|
27
29
|
box-shadow: $box-shadow;
|
28
30
|
|
29
31
|
&:hover,
|
30
|
-
&:focus {
|
32
|
+
&:focus {
|
33
|
+
@if $experimental {
|
34
|
+
-webkit-box-shadow: $box-shadow-hover;
|
35
|
+
}
|
36
|
+
box-shadow: $box-shadow-hover;
|
37
|
+
}
|
31
38
|
}
|
32
39
|
|
33
40
|
|
@@ -41,7 +48,7 @@ $thumb-transition-speed: 200ms !default;
|
|
41
48
|
|
42
49
|
&.radius { @include radius($thumb-radius); }
|
43
50
|
}
|
44
|
-
a.th { display: block; }
|
51
|
+
a.th { display: inline-block; }
|
45
52
|
|
46
53
|
}
|
47
54
|
|
@@ -24,24 +24,24 @@ $tooltip-radius: $global-radius !default;
|
|
24
24
|
$tooltip-pip-size: 5px !default;
|
25
25
|
|
26
26
|
@if $include-html-tooltip-classes != false {
|
27
|
-
|
27
|
+
|
28
28
|
/* Tooltips */
|
29
29
|
.has-tip {
|
30
30
|
border-bottom: $has-tip-border-bottom;
|
31
31
|
cursor: $has-tip-cursor-type;
|
32
32
|
font-weight: $has-tip-font-weight;
|
33
33
|
color: $has-tip-font-color;
|
34
|
-
|
34
|
+
|
35
35
|
&:hover,
|
36
36
|
&:focus {
|
37
37
|
border-bottom: $has-tip-border-bottom-hover;
|
38
38
|
color: $has-tip-font-color-hover;
|
39
39
|
}
|
40
|
-
|
40
|
+
|
41
41
|
&.tip-left,
|
42
42
|
&.tip-right { float: none !important; }
|
43
43
|
}
|
44
|
-
|
44
|
+
|
45
45
|
.tooltip {
|
46
46
|
display: none;
|
47
47
|
position: absolute;
|
@@ -56,7 +56,7 @@ $tooltip-pip-size: 5px !default;
|
|
56
56
|
color: $tooltip-font-color;
|
57
57
|
background: $tooltip-bg;
|
58
58
|
@include radius($tooltip-radius);
|
59
|
-
|
59
|
+
|
60
60
|
&>.nub {
|
61
61
|
display: block;
|
62
62
|
#{$default-float}: $tooltip-pip-size;
|
@@ -67,20 +67,20 @@ $tooltip-pip-size: 5px !default;
|
|
67
67
|
border-color: transparent transparent $tooltip-bg transparent;
|
68
68
|
top: -($tooltip-pip-size * 2);
|
69
69
|
}
|
70
|
-
|
70
|
+
|
71
71
|
&.opened {
|
72
72
|
color: $has-tip-font-color-hover !important;
|
73
73
|
border-bottom: $has-tip-border-bottom-hover !important;
|
74
74
|
}
|
75
75
|
}
|
76
|
-
|
76
|
+
|
77
77
|
.tap-to-close {
|
78
78
|
display: block;
|
79
79
|
font-size: $tooltip-close-font-size;
|
80
80
|
color: $tooltip-close-font-color;
|
81
81
|
font-weight: $tooltip-close-font-weight;
|
82
82
|
}
|
83
|
-
|
83
|
+
|
84
84
|
@media #{$small} {
|
85
85
|
.tooltip {
|
86
86
|
&>.nub {
|
@@ -92,10 +92,10 @@ $tooltip-pip-size: 5px !default;
|
|
92
92
|
top: auto;
|
93
93
|
bottom: -($tooltip-pip-size * 2);
|
94
94
|
}
|
95
|
-
|
95
|
+
|
96
96
|
&.tip-left,
|
97
97
|
&.tip-right { float: none !important; }
|
98
|
-
|
98
|
+
|
99
99
|
&.tip-left>.nub {
|
100
100
|
border-color: transparent transparent transparent $tooltip-bg;
|
101
101
|
right: -($tooltip-pip-size * 2);
|
@@ -110,7 +110,7 @@ $tooltip-pip-size: 5px !default;
|
|
110
110
|
top: 50%;
|
111
111
|
margin-top: -$tooltip-pip-size;
|
112
112
|
}
|
113
|
-
|
113
|
+
|
114
114
|
}
|
115
115
|
}
|
116
116
|
|
@@ -1,59 +1,77 @@
|
|
1
1
|
//
|
2
2
|
// Top Bar Variables
|
3
3
|
//
|
4
|
-
$include-html-
|
4
|
+
$include-html-top-bar-classes: $include-html-classes !default;
|
5
5
|
|
6
6
|
// Background color for the top bar
|
7
|
-
$topbar-bg:
|
7
|
+
$topbar-bg: #111 !default;
|
8
8
|
|
9
9
|
// Height and margin
|
10
|
-
$topbar-height:
|
11
|
-
$topbar-margin-bottom:
|
10
|
+
$topbar-height: 45px !default;
|
11
|
+
$topbar-margin-bottom: emCalc(30px) !default;
|
12
12
|
|
13
13
|
// Control Input height for top bar
|
14
|
-
$topbar-input-height:
|
14
|
+
$topbar-input-height: 2.45em !default;
|
15
15
|
|
16
16
|
// Controlling the styles for the title in the top bar
|
17
|
-
$topbar-title-weight:
|
18
|
-
$topbar-title-font-size:
|
19
|
-
|
20
|
-
// Set the link colors and styles for top-level nav
|
21
|
-
$topbar-link-color: #fff !default;
|
22
|
-
$topbar-link-weight: bold !default;
|
23
|
-
$topbar-link-font-size: emCalc(13px) !default;
|
24
|
-
$topbar-link-hover-lightness: -30% !default; // Darken by 30%
|
17
|
+
$topbar-title-weight: bold !default;
|
18
|
+
$topbar-title-font-size: emCalc(17px) !default;
|
25
19
|
|
26
20
|
// Style the top bar dropdown elements
|
27
|
-
$topbar-dropdown-bg:
|
28
|
-
$topbar-dropdown-link-color:
|
29
|
-
$topbar-dropdown-
|
30
|
-
$topbar-dropdown-toggle-
|
31
|
-
$topbar-dropdown-toggle-
|
32
|
-
$dropdown-
|
21
|
+
$topbar-dropdown-bg: #222 !default;
|
22
|
+
$topbar-dropdown-link-color: #fff !default;
|
23
|
+
$topbar-dropdown-link-bg: lighten($topbar-bg, 5%) !default;
|
24
|
+
$topbar-dropdown-toggle-size: 5px !default;
|
25
|
+
$topbar-dropdown-toggle-color: #fff !default;
|
26
|
+
$topbar-dropdown-toggle-alpha: 0.5 !default;
|
27
|
+
|
28
|
+
// Set the link colors and styles for top-level nav
|
29
|
+
$topbar-link-color: #fff !default;
|
30
|
+
$topbar-link-color-hover: #fff !default;
|
31
|
+
$topbar-link-color-active: #fff !default;
|
32
|
+
$topbar-link-weight: bold !default;
|
33
|
+
$topbar-link-font-size: emCalc(13px) !default;
|
34
|
+
$topbar-link-hover-lightness: -30% !default; // Darken by 30%
|
35
|
+
$topbar-link-bg-hover: darken($topbar-bg, 3%) !default;
|
36
|
+
$topbar-link-bg-active: darken($topbar-bg, 3%) !default;
|
37
|
+
|
38
|
+
$topbar-dropdown-label-color: #555 !default;
|
39
|
+
$topbar-dropdown-label-text-transform: uppercase !default;
|
40
|
+
$topbar-dropdown-label-font-weight: bold !default;
|
41
|
+
$topbar-dropdown-label-font-size: emCalc(10px) !default;
|
33
42
|
|
34
43
|
// Top menu icon styles
|
35
|
-
$topbar-menu-link-transform:
|
36
|
-
$topbar-menu-link-font-size:
|
37
|
-
$topbar-menu-link-weight:
|
38
|
-
$topbar-menu-link-color:
|
39
|
-
$topbar-menu-icon-color:
|
40
|
-
$topbar-menu-link-color-toggled:
|
41
|
-
$topbar-menu-icon-color-toggled:
|
44
|
+
$topbar-menu-link-transform: uppercase !default;
|
45
|
+
$topbar-menu-link-font-size: emCalc(13px) !default;
|
46
|
+
$topbar-menu-link-weight: bold !default;
|
47
|
+
$topbar-menu-link-color: #fff !default;
|
48
|
+
$topbar-menu-icon-color: #fff !default;
|
49
|
+
$topbar-menu-link-color-toggled: #888 !default;
|
50
|
+
$topbar-menu-icon-color-toggled: #888 !default;
|
42
51
|
|
43
52
|
// Transitions and breakpoint styles
|
44
|
-
$topbar-transition-speed:
|
45
|
-
$topbar-breakpoint:
|
46
|
-
$topbar-media-query:
|
53
|
+
$topbar-transition-speed: 300ms !default;
|
54
|
+
$topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
|
55
|
+
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;
|
47
56
|
|
48
|
-
|
57
|
+
// Divider Styles
|
58
|
+
$topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%) !default;
|
59
|
+
$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%) !default;
|
60
|
+
|
61
|
+
// Sticky Class
|
62
|
+
$topbar-sticky-class: ".sticky" !default;
|
63
|
+
|
64
|
+
@if $include-html-top-bar-classes != false {
|
49
65
|
|
50
66
|
/* Wrapped around .top-bar to contain to grid width */
|
51
67
|
.contain-to-grid {
|
52
68
|
width: 100%;
|
53
69
|
background: $topbar-bg;
|
70
|
+
|
71
|
+
.top-bar { margin-bottom: 0; }
|
54
72
|
}
|
55
73
|
|
56
|
-
// Wrapped around .top-bar to make it
|
74
|
+
// Wrapped around .top-bar to make it stick to the top
|
57
75
|
.fixed {
|
58
76
|
width: 100%;
|
59
77
|
#{$default-float}: 0;
|
@@ -86,7 +104,10 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
86
104
|
.button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
|
87
105
|
|
88
106
|
// Title Area
|
89
|
-
.title-area {
|
107
|
+
.title-area {
|
108
|
+
position: relative;
|
109
|
+
margin: 0;
|
110
|
+
}
|
90
111
|
|
91
112
|
.name {
|
92
113
|
height: $topbar-height;
|
@@ -147,10 +168,11 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
147
168
|
width: 16px;
|
148
169
|
height: 0;
|
149
170
|
// Shh, don't tell, but box-shadows create the menu icon :)
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
171
|
+
@if $experimental {
|
172
|
+
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
173
|
+
0 16px 0 1px $topbar-menu-icon-color,
|
174
|
+
0 22px 0 1px $topbar-menu-icon-color;
|
175
|
+
}
|
154
176
|
box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
155
177
|
0 16px 0 1px $topbar-menu-icon-color,
|
156
178
|
0 22px 0 1px $topbar-menu-icon-color;
|
@@ -170,10 +192,11 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
170
192
|
a { color: $topbar-menu-link-color-toggled;
|
171
193
|
span {
|
172
194
|
// Shh, don't tell, but box-shadows create the menu icon :)
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
195
|
+
@if $experimental {
|
196
|
+
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
197
|
+
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
198
|
+
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
199
|
+
}
|
177
200
|
box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
178
201
|
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
179
202
|
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
@@ -195,15 +218,15 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
195
218
|
width: 100%;
|
196
219
|
height: auto;
|
197
220
|
display: block;
|
198
|
-
background: $topbar-
|
221
|
+
background: $topbar-bg;
|
199
222
|
font-size: $em-base;
|
200
223
|
margin: 0;
|
201
224
|
}
|
202
225
|
|
203
226
|
.divider,
|
204
227
|
[role="separator"] {
|
205
|
-
border-bottom:
|
206
|
-
border-top:
|
228
|
+
border-bottom: $topbar-divider-border-bottom;
|
229
|
+
border-top: $topbar-divider-border-top;
|
207
230
|
clear: both;
|
208
231
|
height: 1px;
|
209
232
|
width: 100%;
|
@@ -220,31 +243,34 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
220
243
|
font-weight: $topbar-link-weight;
|
221
244
|
background: $topbar-dropdown-bg;
|
222
245
|
|
223
|
-
|
246
|
+
&.hover {
|
247
|
+
background: $topbar-link-bg-hover;
|
248
|
+
color: $topbar-link-color-hover;
|
249
|
+
}
|
224
250
|
|
225
251
|
|
226
252
|
&.button {
|
227
253
|
background: $primary-color;
|
228
254
|
font-size: $topbar-link-font-size;
|
229
|
-
|
255
|
+
&.hover {
|
230
256
|
background: darken($primary-color, 10%);
|
231
257
|
}
|
232
258
|
}
|
233
259
|
&.button.secondary {
|
234
260
|
background: $secondary-color;
|
235
|
-
|
261
|
+
&.hover {
|
236
262
|
background: darken($secondary-color, 10%);
|
237
263
|
}
|
238
264
|
}
|
239
265
|
&.button.success {
|
240
266
|
background: $success-color;
|
241
|
-
|
267
|
+
&.hover {
|
242
268
|
background: darken($success-color, 10%);
|
243
269
|
}
|
244
270
|
}
|
245
271
|
&.button.alert {
|
246
272
|
background: $alert-color;
|
247
|
-
|
273
|
+
&.hover {
|
248
274
|
background: darken($alert-color, 10%);
|
249
275
|
}
|
250
276
|
}
|
@@ -252,7 +278,10 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
252
278
|
}
|
253
279
|
|
254
280
|
// Apply the active link color when it has that class
|
255
|
-
&.active > a {
|
281
|
+
&.active > a {
|
282
|
+
background: $topbar-link-bg-active;
|
283
|
+
color: $topbar-link-color-active;
|
284
|
+
}
|
256
285
|
}
|
257
286
|
|
258
287
|
// Add some extra padding for list items contains buttons
|
@@ -268,7 +297,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
268
297
|
margin-#{$opposite-direction}: $topbar-height / 3;
|
269
298
|
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
|
270
299
|
position: absolute;
|
271
|
-
top:
|
300
|
+
top: 50%;
|
272
301
|
#{$opposite-direction}: 0;
|
273
302
|
}
|
274
303
|
}
|
@@ -288,7 +317,10 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
288
317
|
visibility: hidden;
|
289
318
|
z-index: 99;
|
290
319
|
|
291
|
-
li {
|
320
|
+
li {
|
321
|
+
width: 100%;
|
322
|
+
height: auto;
|
323
|
+
|
292
324
|
a {
|
293
325
|
font-weight: normal;
|
294
326
|
padding: 8px $topbar-height / 3;
|
@@ -306,10 +338,10 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
306
338
|
label {
|
307
339
|
padding: 8px $topbar-height / 3 2px;
|
308
340
|
margin-bottom: 0;
|
309
|
-
text-transform:
|
310
|
-
color: $dropdown-label-color;
|
311
|
-
font-weight:
|
312
|
-
font-size:
|
341
|
+
text-transform: $topbar-dropdown-label-text-transform;
|
342
|
+
color: $topbar-dropdown-label-color;
|
343
|
+
font-weight: $topbar-dropdown-label-font-weight;
|
344
|
+
font-size: $topbar-dropdown-label-font-size;
|
313
345
|
}
|
314
346
|
}
|
315
347
|
}
|
@@ -324,7 +356,11 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
324
356
|
|
325
357
|
// Top Bar styles intended for screen sizes above the breakpoint.
|
326
358
|
@media #{$topbar-media-query} {
|
327
|
-
.top-bar {
|
359
|
+
.top-bar {
|
360
|
+
background: $topbar-bg;
|
361
|
+
@include clearfix;
|
362
|
+
overflow: visible;
|
363
|
+
|
328
364
|
.toggle-topbar { display: none; }
|
329
365
|
|
330
366
|
.title-area { float: $default-float; }
|
@@ -343,7 +379,10 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
343
379
|
&.expanded { background: $topbar-bg; }
|
344
380
|
}
|
345
381
|
|
346
|
-
.contain-to-grid .top-bar {
|
382
|
+
.contain-to-grid .top-bar {
|
383
|
+
max-width: $row-width;
|
384
|
+
margin: 0 auto;
|
385
|
+
}
|
347
386
|
|
348
387
|
.top-bar-section {
|
349
388
|
@include single-transition(none,0,0);
|
@@ -365,7 +404,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
365
404
|
padding: 0 $topbar-height / 3;
|
366
405
|
line-height: $topbar-height;
|
367
406
|
background: $topbar-bg;
|
368
|
-
|
407
|
+
&.hover { background: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness); }
|
369
408
|
}
|
370
409
|
}
|
371
410
|
|
@@ -384,8 +423,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
384
423
|
& > .dropdown { visibility: hidden; }
|
385
424
|
}
|
386
425
|
|
387
|
-
|
388
|
-
&:active {
|
426
|
+
&.hover {
|
389
427
|
& > .dropdown {
|
390
428
|
visibility: visible;
|
391
429
|
}
|
@@ -396,7 +434,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
396
434
|
&:after {
|
397
435
|
border: none;
|
398
436
|
content: "\00bb";
|
399
|
-
margin-top: -
|
437
|
+
margin-top: -16px;
|
400
438
|
#{$opposite-direction}: 5px;
|
401
439
|
}
|
402
440
|
}
|
@@ -416,7 +454,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
416
454
|
line-height: 1;
|
417
455
|
white-space: nowrap;
|
418
456
|
padding: 7px $topbar-height / 3;
|
419
|
-
background:
|
457
|
+
background: $topbar-dropdown-link-bg;
|
420
458
|
}
|
421
459
|
|
422
460
|
label {
|
@@ -436,8 +474,8 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
|
|
436
474
|
& > ul > [role="separator"] {
|
437
475
|
border-bottom: none;
|
438
476
|
border-top: none;
|
439
|
-
border-#{$opposite-direction}:
|
440
|
-
border-#{$default-float}:
|
477
|
+
border-#{$opposite-direction}: $topbar-divider-border-bottom;
|
478
|
+
border-#{$default-float}: $topbar-divider-border-top;
|
441
479
|
clear: none;
|
442
480
|
height: $topbar-height;
|
443
481
|
width: 0px;
|