zurb-foundation 4.1.5 → 4.1.6
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/Gemfile.lock +1 -1
- data/README.md +4 -0
- data/docs/CHANGELOG.md +10 -0
- data/docs/components/block-grid.html.erb +1 -1
- data/docs/components/grid.html.erb +4 -4
- data/docs/components/inline-lists.html.erb +2 -2
- data/docs/components/panels.html.erb +2 -2
- data/docs/components/pricing-tables.html.erb +1 -1
- data/docs/components/progress-bars.html.erb +1 -1
- data/docs/components/reveal.html.erb +1 -1
- data/docs/components/section.html.erb +546 -19
- data/docs/components/split-buttons.html.erb +2 -2
- data/docs/components/thumbnails.html.erb +2 -2
- data/docs/components/top-bar.html.erb +2 -3
- data/docs/components/type.html.erb +5 -5
- data/docs/components/visibility.html.erb +1 -1
- data/docs/css/docs.scss +54 -0
- data/docs/sass.html.erb +3 -1
- data/js/foundation/foundation.forms.js +311 -227
- data/js/foundation/foundation.joyride.js +10 -8
- data/js/foundation/foundation.js +1 -1
- data/js/foundation/foundation.section.js +4 -4
- data/lib/foundation/version.rb +1 -1
- data/scss/foundation/_variables.scss +185 -171
- data/scss/foundation/components/_alert-boxes.scss +1 -0
- data/scss/foundation/components/_block-grid.scss +2 -4
- data/scss/foundation/components/_breadcrumbs.scss +1 -0
- data/scss/foundation/components/_button-groups.scss +1 -0
- data/scss/foundation/components/_buttons.scss +1 -0
- data/scss/foundation/components/_clearing.scss +154 -151
- data/scss/foundation/components/_custom-forms.scss +35 -21
- data/scss/foundation/components/_dropdown-buttons.scss +2 -1
- data/scss/foundation/components/_dropdown.scss +2 -1
- data/scss/foundation/components/_flex-video.scss +1 -0
- data/scss/foundation/components/_forms.scss +1 -0
- data/scss/foundation/components/_global.scss +75 -84
- data/scss/foundation/components/_grid.scss +9 -8
- data/scss/foundation/components/_inline-lists.scss +2 -1
- data/scss/foundation/components/_joyride.scss +165 -160
- data/scss/foundation/components/_keystrokes.scss +2 -1
- data/scss/foundation/components/_labels.scss +1 -0
- data/scss/foundation/components/_magellan.scss +2 -0
- data/scss/foundation/components/_orbit.scss +158 -154
- data/scss/foundation/components/_pagination.scss +1 -0
- data/scss/foundation/components/_panels.scss +1 -0
- data/scss/foundation/components/_pricing-tables.scss +1 -0
- data/scss/foundation/components/_progress-bars.scss +1 -0
- data/scss/foundation/components/_reveal.scss +2 -1
- data/scss/foundation/components/_section.scss +108 -93
- data/scss/foundation/components/_side-nav.scss +2 -1
- data/scss/foundation/components/_split-buttons.scss +1 -0
- data/scss/foundation/components/_sub-nav.scss +1 -0
- data/scss/foundation/components/_switch.scss +4 -2
- data/scss/foundation/components/_tables.scss +7 -3
- data/scss/foundation/components/_thumbs.scss +1 -0
- data/scss/foundation/components/_tooltips.scss +85 -81
- data/scss/foundation/components/_top-bar.scss +323 -318
- data/scss/foundation/components/_type.scss +290 -286
- data/scss/foundation/components/_visibility.scss +2 -0
- data/templates/project/index.html +0 -1
- data/templates/project/manifest.rb +0 -1
- data/templates/project/scss/app.scss +3 -0
- metadata +4 -4
@@ -1,6 +1,7 @@
|
|
1
1
|
//
|
2
2
|
// Side Nav Variables
|
3
3
|
//
|
4
|
+
$include-html-nav-classes: $include-html-classes !default;
|
4
5
|
|
5
6
|
// We use this to control padding.
|
6
7
|
$side-nav-padding: emCalc(14px) 0 !default;
|
@@ -44,7 +45,7 @@ $side-nav-divider-color: darken(#fff, 10%) !default;
|
|
44
45
|
color: $link-color;
|
45
46
|
}
|
46
47
|
|
47
|
-
&.active a {
|
48
|
+
&.active > a:first-child {
|
48
49
|
color: $side-nav-link-color-active;
|
49
50
|
font-weight: $side-nav-font-weight;
|
50
51
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
//
|
2
2
|
// Switch Variables
|
3
3
|
//
|
4
|
+
$include-html-form-classes: $include-html-classes !default;
|
4
5
|
|
5
6
|
// Controlling border styles and background colors for the switch container
|
6
7
|
$switch-border-color: darken(#fff, 20%) !default;
|
@@ -78,7 +79,8 @@ $switch-label-outline: 1px dotted #888 !default;
|
|
78
79
|
opacity: 0;
|
79
80
|
width: 100%;
|
80
81
|
height: 100%;
|
81
|
-
|
82
|
+
-moz-appearance: none;
|
83
|
+
|
82
84
|
// Hover and focus styles for the paddle
|
83
85
|
&:hover,
|
84
86
|
&:focus {
|
@@ -212,7 +214,7 @@ $switch-label-outline: 1px dotted #888 !default;
|
|
212
214
|
@include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
|
213
215
|
}
|
214
216
|
|
215
|
-
@if $include-html-
|
217
|
+
@if $include-html-form-classes != false {
|
216
218
|
|
217
219
|
/* Foundation Switches */
|
218
220
|
@media only screen {
|
@@ -1,6 +1,7 @@
|
|
1
1
|
//
|
2
2
|
// Table Variables
|
3
3
|
//
|
4
|
+
$include-html-table-classes: $include-html-classes !default;
|
4
5
|
|
5
6
|
// These control the background color for the table and even rows
|
6
7
|
$table-bg: #fff !default;
|
@@ -73,8 +74,11 @@ $table-margin-bottom: emCalc(20px) !default;
|
|
73
74
|
tfoot tr td { display: $table-display; line-height: $table-line-height; }
|
74
75
|
}
|
75
76
|
|
77
|
+
@if $include-html-table-classes {
|
78
|
+
|
79
|
+
/* Tables */
|
80
|
+
table {
|
81
|
+
@include table;
|
82
|
+
}
|
76
83
|
|
77
|
-
/* Tables */
|
78
|
-
table {
|
79
|
-
@include table;
|
80
84
|
}
|
@@ -1,6 +1,8 @@
|
|
1
1
|
//
|
2
2
|
// Tooltip Variables
|
3
3
|
//
|
4
|
+
$include-html-tooltip-classes: $include-html-classes !default;
|
5
|
+
|
4
6
|
$has-tip-border-bottom: dotted 1px #ccc !default;
|
5
7
|
$has-tip-font-weight: bold !default;
|
6
8
|
$has-tip-font-color: #333 !default;
|
@@ -21,93 +23,95 @@ $tooltip-font-size-sml: emCalc(14px) !default;
|
|
21
23
|
$tooltip-radius: $global-radius !default;
|
22
24
|
$tooltip-pip-size: 5px !default;
|
23
25
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
.has-tip {
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
}
|
42
|
-
|
43
|
-
.tooltip {
|
44
|
-
display: none;
|
45
|
-
position: absolute;
|
46
|
-
z-index: 999;
|
47
|
-
font-weight: $tooltip-font-weight;
|
48
|
-
font-size: $tooltip-font-size;
|
49
|
-
line-height: $tooltip-line-height;
|
50
|
-
padding: $tooltip-padding;
|
51
|
-
max-width: 85%;
|
52
|
-
#{$default-float}: 50%;
|
53
|
-
width: 100%;
|
54
|
-
color: $tooltip-font-color;
|
55
|
-
background: $tooltip-bg;
|
56
|
-
@include radius($tooltip-radius);
|
57
|
-
|
58
|
-
&>.nub {
|
59
|
-
display: block;
|
60
|
-
#{$default-float}: $tooltip-pip-size;
|
61
|
-
position: absolute;
|
62
|
-
width: 0;
|
63
|
-
height: 0;
|
64
|
-
border: solid $tooltip-pip-size;
|
65
|
-
border-color: transparent transparent $tooltip-bg transparent;
|
66
|
-
top: -($tooltip-pip-size * 2);
|
67
|
-
}
|
68
|
-
|
69
|
-
&.opened {
|
70
|
-
color: $has-tip-font-color-hover !important;
|
71
|
-
border-bottom: $has-tip-border-bottom-hover !important;
|
26
|
+
@if $include-html-tooltip-classes != false {
|
27
|
+
|
28
|
+
/* Tooltips */
|
29
|
+
.has-tip {
|
30
|
+
border-bottom: $has-tip-border-bottom;
|
31
|
+
cursor: $has-tip-cursor-type;
|
32
|
+
font-weight: $has-tip-font-weight;
|
33
|
+
color: $has-tip-font-color;
|
34
|
+
|
35
|
+
&:hover,
|
36
|
+
&:focus {
|
37
|
+
border-bottom: $has-tip-border-bottom-hover;
|
38
|
+
color: $has-tip-font-color-hover;
|
39
|
+
}
|
40
|
+
|
41
|
+
&.tip-left,
|
42
|
+
&.tip-right { float: none !important; }
|
72
43
|
}
|
73
|
-
|
74
|
-
|
75
|
-
.tap-to-close {
|
76
|
-
display: block;
|
77
|
-
font-size: $tooltip-close-font-size;
|
78
|
-
color: $tooltip-close-font-color;
|
79
|
-
font-weight: $tooltip-close-font-weight;
|
80
|
-
}
|
81
|
-
|
82
|
-
@media #{$small} {
|
44
|
+
|
83
45
|
.tooltip {
|
46
|
+
display: none;
|
47
|
+
position: absolute;
|
48
|
+
z-index: 999;
|
49
|
+
font-weight: $tooltip-font-weight;
|
50
|
+
font-size: $tooltip-font-size;
|
51
|
+
line-height: $tooltip-line-height;
|
52
|
+
padding: $tooltip-padding;
|
53
|
+
max-width: 85%;
|
54
|
+
#{$default-float}: 50%;
|
55
|
+
width: 100%;
|
56
|
+
color: $tooltip-font-color;
|
57
|
+
background: $tooltip-bg;
|
58
|
+
@include radius($tooltip-radius);
|
59
|
+
|
84
60
|
&>.nub {
|
61
|
+
display: block;
|
62
|
+
#{$default-float}: $tooltip-pip-size;
|
63
|
+
position: absolute;
|
64
|
+
width: 0;
|
65
|
+
height: 0;
|
66
|
+
border: solid $tooltip-pip-size;
|
85
67
|
border-color: transparent transparent $tooltip-bg transparent;
|
86
68
|
top: -($tooltip-pip-size * 2);
|
87
69
|
}
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
bottom:
|
92
|
-
}
|
93
|
-
|
94
|
-
&.tip-left,
|
95
|
-
&.tip-right { float: none !important; }
|
96
|
-
|
97
|
-
&.tip-left>.nub {
|
98
|
-
border-color: transparent transparent transparent $tooltip-bg;
|
99
|
-
right: -($tooltip-pip-size * 2);
|
100
|
-
left: auto;
|
101
|
-
top: 50%;
|
102
|
-
margin-top: -$tooltip-pip-size;
|
70
|
+
|
71
|
+
&.opened {
|
72
|
+
color: $has-tip-font-color-hover !important;
|
73
|
+
border-bottom: $has-tip-border-bottom-hover !important;
|
103
74
|
}
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
75
|
+
}
|
76
|
+
|
77
|
+
.tap-to-close {
|
78
|
+
display: block;
|
79
|
+
font-size: $tooltip-close-font-size;
|
80
|
+
color: $tooltip-close-font-color;
|
81
|
+
font-weight: $tooltip-close-font-weight;
|
82
|
+
}
|
83
|
+
|
84
|
+
@media #{$small} {
|
85
|
+
.tooltip {
|
86
|
+
&>.nub {
|
87
|
+
border-color: transparent transparent $tooltip-bg transparent;
|
88
|
+
top: -($tooltip-pip-size * 2);
|
89
|
+
}
|
90
|
+
&.tip-top>.nub {
|
91
|
+
border-color: $tooltip-bg transparent transparent transparent;
|
92
|
+
top: auto;
|
93
|
+
bottom: -($tooltip-pip-size * 2);
|
94
|
+
}
|
95
|
+
|
96
|
+
&.tip-left,
|
97
|
+
&.tip-right { float: none !important; }
|
98
|
+
|
99
|
+
&.tip-left>.nub {
|
100
|
+
border-color: transparent transparent transparent $tooltip-bg;
|
101
|
+
right: -($tooltip-pip-size * 2);
|
102
|
+
left: auto;
|
103
|
+
top: 50%;
|
104
|
+
margin-top: -$tooltip-pip-size;
|
105
|
+
}
|
106
|
+
&.tip-right>.nub {
|
107
|
+
border-color: transparent $tooltip-bg transparent transparent;
|
108
|
+
right: auto;
|
109
|
+
left: -($tooltip-pip-size * 2);
|
110
|
+
top: 50%;
|
111
|
+
margin-top: -$tooltip-pip-size;
|
112
|
+
}
|
113
|
+
|
110
114
|
}
|
111
|
-
|
112
115
|
}
|
113
|
-
|
116
|
+
|
117
|
+
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
//
|
2
2
|
// Top Bar Variables
|
3
3
|
//
|
4
|
+
$include-html-nav-classes: $include-html-classes !default;
|
4
5
|
|
5
6
|
// Background color for the top bar
|
6
7
|
$topbar-bg: #111 !default;
|
@@ -44,416 +45,420 @@ $topbar-transition-speed: 300ms !default;
|
|
44
45
|
$topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
|
45
46
|
$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;
|
46
47
|
|
48
|
+
@if $include-html-nav-classes {
|
47
49
|
|
48
|
-
/* Wrapped around .top-bar to contain to grid width */
|
49
|
-
.contain-to-grid {
|
50
|
-
|
51
|
-
|
52
|
-
}
|
53
|
-
|
54
|
-
// Wrapped around .top-bar to make it fixed at the top
|
55
|
-
.fixed {
|
56
|
-
width: 100%;
|
57
|
-
#{$default-float}: 0;
|
58
|
-
position: fixed;
|
59
|
-
top: 0;
|
60
|
-
z-index: 99;
|
61
|
-
}
|
50
|
+
/* Wrapped around .top-bar to contain to grid width */
|
51
|
+
.contain-to-grid {
|
52
|
+
width: 100%;
|
53
|
+
background: $topbar-bg;
|
54
|
+
}
|
62
55
|
|
63
|
-
.top-bar
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
// Topbar Global list Styles
|
72
|
-
ul {
|
73
|
-
margin-bottom: 0;
|
74
|
-
list-style: none;
|
56
|
+
// Wrapped around .top-bar to make it fixed at the top
|
57
|
+
.fixed {
|
58
|
+
width: 100%;
|
59
|
+
#{$default-float}: 0;
|
60
|
+
position: fixed;
|
61
|
+
top: 0;
|
62
|
+
z-index: 99;
|
75
63
|
}
|
76
64
|
|
77
|
-
.
|
65
|
+
.top-bar {
|
66
|
+
overflow: hidden;
|
67
|
+
height: $topbar-height;
|
68
|
+
line-height: $topbar-height;
|
69
|
+
position: relative;
|
70
|
+
background: $topbar-bg;
|
71
|
+
margin-bottom: $topbar-margin-bottom;
|
78
72
|
|
79
|
-
|
80
|
-
|
73
|
+
// Topbar Global list Styles
|
74
|
+
ul {
|
75
|
+
margin-bottom: 0;
|
76
|
+
list-style: none;
|
77
|
+
}
|
81
78
|
|
82
|
-
|
79
|
+
.row { max-width: none; }
|
83
80
|
|
84
|
-
|
81
|
+
form,
|
82
|
+
input { margin-bottom: 0; }
|
85
83
|
|
86
|
-
|
87
|
-
.title-area { position: relative; }
|
84
|
+
input { height: $topbar-input-height; }
|
88
85
|
|
89
|
-
|
90
|
-
height: $topbar-height;
|
91
|
-
margin: 0;
|
92
|
-
font-size: $em-base;
|
86
|
+
.button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
|
93
87
|
|
94
|
-
|
95
|
-
|
96
|
-
|
88
|
+
// Title Area
|
89
|
+
.title-area { position: relative; }
|
90
|
+
|
91
|
+
.name {
|
92
|
+
height: $topbar-height;
|
97
93
|
margin: 0;
|
94
|
+
font-size: $em-base;
|
95
|
+
|
96
|
+
h1 {
|
97
|
+
line-height: $topbar-height;
|
98
|
+
font-size: $topbar-title-font-size;
|
99
|
+
margin: 0;
|
100
|
+
a {
|
101
|
+
font-weight: $topbar-title-weight;
|
102
|
+
color: $topbar-link-color;
|
103
|
+
width: 50%;
|
104
|
+
display: block;
|
105
|
+
padding: 0 $topbar-height / 3;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
}
|
109
|
+
|
110
|
+
// Menu toggle button on small devices
|
111
|
+
.toggle-topbar {
|
112
|
+
position: absolute;
|
113
|
+
#{$opposite-direction}: 0;
|
114
|
+
top: 0;
|
115
|
+
|
98
116
|
a {
|
99
|
-
font-weight: $topbar-title-weight;
|
100
117
|
color: $topbar-link-color;
|
101
|
-
|
118
|
+
text-transform: $topbar-menu-link-transform;
|
119
|
+
font-size: $topbar-menu-link-font-size;
|
120
|
+
font-weight: $topbar-menu-link-weight;
|
121
|
+
position: relative;
|
102
122
|
display: block;
|
103
123
|
padding: 0 $topbar-height / 3;
|
124
|
+
height: $topbar-height;
|
125
|
+
line-height: $topbar-height;
|
104
126
|
}
|
105
|
-
}
|
106
|
-
}
|
107
127
|
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
128
|
+
// Adding the class "menu-icon" will add the 3-line icon people love and adore.
|
129
|
+
&.menu-icon {
|
130
|
+
#{$opposite-direction}: $topbar-height / 3;
|
131
|
+
top: 50%;
|
132
|
+
margin-top: -16px;
|
133
|
+
padding-#{$default-float}: 40px;
|
113
134
|
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
line-height: 33px;
|
138
|
-
padding: 0;
|
139
|
-
color: $topbar-menu-link-color;
|
140
|
-
|
141
|
-
span {
|
142
|
-
position: absolute;
|
143
|
-
#{$opposite-direction}: 0;
|
144
|
-
display: block;
|
145
|
-
width: 16px;
|
146
|
-
height: 0;
|
147
|
-
// Shh, don't tell, but box-shadows create the menu icon :)
|
148
|
-
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
149
|
-
0 16px 0 1px $topbar-menu-icon-color,
|
150
|
-
0 22px 0 1px $topbar-menu-icon-color;
|
151
|
-
|
152
|
-
box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
153
|
-
0 16px 0 1px $topbar-menu-icon-color,
|
154
|
-
0 22px 0 1px $topbar-menu-icon-color;
|
135
|
+
a {
|
136
|
+
text-indent: -48px;
|
137
|
+
width: 34px;
|
138
|
+
height: 34px;
|
139
|
+
line-height: 33px;
|
140
|
+
padding: 0;
|
141
|
+
color: $topbar-menu-link-color;
|
142
|
+
|
143
|
+
span {
|
144
|
+
position: absolute;
|
145
|
+
#{$opposite-direction}: 0;
|
146
|
+
display: block;
|
147
|
+
width: 16px;
|
148
|
+
height: 0;
|
149
|
+
// Shh, don't tell, but box-shadows create the menu icon :)
|
150
|
+
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
151
|
+
0 16px 0 1px $topbar-menu-icon-color,
|
152
|
+
0 22px 0 1px $topbar-menu-icon-color;
|
153
|
+
|
154
|
+
box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
155
|
+
0 16px 0 1px $topbar-menu-icon-color,
|
156
|
+
0 22px 0 1px $topbar-menu-icon-color;
|
157
|
+
}
|
155
158
|
}
|
156
159
|
}
|
157
160
|
}
|
158
|
-
}
|
159
161
|
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
162
|
+
// Change things up when the top-bar is expanded
|
163
|
+
&.expanded {
|
164
|
+
height: auto;
|
165
|
+
background: transparent;
|
166
|
+
|
167
|
+
.title-area { background: $topbar-bg; }
|
164
168
|
|
165
|
-
|
169
|
+
.toggle-topbar {
|
170
|
+
a { color: $topbar-menu-link-color-toggled;
|
171
|
+
span {
|
172
|
+
// Shh, don't tell, but box-shadows create the menu icon :)
|
173
|
+
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
174
|
+
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
175
|
+
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
166
176
|
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
172
|
-
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
173
|
-
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
174
|
-
|
175
|
-
box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
176
|
-
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
177
|
-
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
177
|
+
box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
|
178
|
+
0 16px 0 1px $topbar-menu-icon-color-toggled,
|
179
|
+
0 22px 0 1px $topbar-menu-icon-color-toggled;
|
180
|
+
}
|
178
181
|
}
|
179
182
|
}
|
180
183
|
}
|
181
|
-
}
|
182
|
-
|
183
|
-
}
|
184
184
|
|
185
|
-
// Right and Left Navigation that stacked by default
|
186
|
-
.top-bar-section {
|
187
|
-
#{$default-float}: 0;
|
188
|
-
position: relative;
|
189
|
-
width: auto;
|
190
|
-
@include single-transition($default-float, $topbar-transition-speed);
|
191
|
-
|
192
|
-
ul {
|
193
|
-
width: 100%;
|
194
|
-
height: auto;
|
195
|
-
display: block;
|
196
|
-
background: $topbar-dropdown-bg;
|
197
|
-
font-size: $em-base;
|
198
|
-
margin: 0;
|
199
185
|
}
|
200
186
|
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
width: 100%;
|
208
|
-
}
|
187
|
+
// Right and Left Navigation that stacked by default
|
188
|
+
.top-bar-section {
|
189
|
+
#{$default-float}: 0;
|
190
|
+
position: relative;
|
191
|
+
width: auto;
|
192
|
+
@include single-transition($default-float, $topbar-transition-speed);
|
209
193
|
|
210
|
-
|
211
|
-
& > a {
|
212
|
-
display: block;
|
194
|
+
ul {
|
213
195
|
width: 100%;
|
214
|
-
|
215
|
-
|
216
|
-
padding-#{$default-float}: $topbar-height / 3;
|
217
|
-
font-size: $topbar-link-font-size;
|
218
|
-
font-weight: $topbar-link-weight;
|
196
|
+
height: auto;
|
197
|
+
display: block;
|
219
198
|
background: $topbar-dropdown-bg;
|
199
|
+
font-size: $em-base;
|
200
|
+
margin: 0;
|
201
|
+
}
|
220
202
|
|
221
|
-
|
222
|
-
|
203
|
+
.divider,
|
204
|
+
[role="separator"] {
|
205
|
+
border-bottom: solid 1px lighten($topbar-dropdown-bg, 10%);
|
206
|
+
border-top: solid 1px darken($topbar-dropdown-bg, 10%);
|
207
|
+
clear: both;
|
208
|
+
height: 1px;
|
209
|
+
width: 100%;
|
210
|
+
}
|
223
211
|
|
224
|
-
|
225
|
-
|
212
|
+
ul li {
|
213
|
+
& > a {
|
214
|
+
display: block;
|
215
|
+
width: 100%;
|
216
|
+
color: $topbar-link-color;
|
217
|
+
padding: 12px 0 12px 0;
|
218
|
+
padding-#{$default-float}: $topbar-height / 3;
|
226
219
|
font-size: $topbar-link-font-size;
|
227
|
-
|
228
|
-
|
220
|
+
font-weight: $topbar-link-weight;
|
221
|
+
background: $topbar-dropdown-bg;
|
222
|
+
|
223
|
+
&:hover { background: darken($topbar-dropdown-bg, 3%); }
|
224
|
+
|
225
|
+
|
226
|
+
&.button {
|
227
|
+
background: $primary-color;
|
228
|
+
font-size: $topbar-link-font-size;
|
229
|
+
&:hover {
|
230
|
+
background: darken($primary-color, 10%);
|
231
|
+
}
|
229
232
|
}
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
233
|
+
&.button.secondary {
|
234
|
+
background: $secondary-color;
|
235
|
+
&:hover {
|
236
|
+
background: darken($secondary-color, 10%);
|
237
|
+
}
|
235
238
|
}
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
239
|
+
&.button.success {
|
240
|
+
background: $success-color;
|
241
|
+
&:hover {
|
242
|
+
background: darken($success-color, 10%);
|
243
|
+
}
|
241
244
|
}
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
245
|
+
&.button.alert {
|
246
|
+
background: $alert-color;
|
247
|
+
&:hover {
|
248
|
+
background: darken($alert-color, 10%);
|
249
|
+
}
|
247
250
|
}
|
251
|
+
|
248
252
|
}
|
249
253
|
|
254
|
+
// Apply the active link color when it has that class
|
255
|
+
&.active > a { background: darken($topbar-dropdown-bg, 3%); }
|
250
256
|
}
|
251
257
|
|
252
|
-
//
|
253
|
-
|
254
|
-
}
|
255
|
-
|
256
|
-
// Add some extra padding for list items contains buttons
|
257
|
-
.has-form { padding: $topbar-height / 3; }
|
258
|
+
// Add some extra padding for list items contains buttons
|
259
|
+
.has-form { padding: $topbar-height / 3; }
|
258
260
|
|
259
|
-
|
260
|
-
|
261
|
-
|
261
|
+
// Styling for list items that have a dropdown within them.
|
262
|
+
.has-dropdown {
|
263
|
+
position: relative;
|
262
264
|
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
265
|
+
& > a {
|
266
|
+
&:after {
|
267
|
+
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
|
268
|
+
margin-#{$opposite-direction}: $topbar-height / 3;
|
269
|
+
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
|
270
|
+
position: absolute;
|
271
|
+
top: 22px;
|
272
|
+
#{$opposite-direction}: 0;
|
273
|
+
}
|
271
274
|
}
|
272
|
-
}
|
273
275
|
|
274
|
-
|
275
|
-
|
276
|
-
|
276
|
+
&.moved { position: static;
|
277
|
+
& > .dropdown {
|
278
|
+
visibility: visible;
|
279
|
+
}
|
277
280
|
}
|
278
281
|
}
|
279
|
-
}
|
280
282
|
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
li { width: 100%;
|
290
|
-
a {
|
291
|
-
font-weight: normal;
|
292
|
-
padding: 8px $topbar-height / 3;
|
293
|
-
}
|
283
|
+
// Styling elements inside of dropdowns
|
284
|
+
.dropdown {
|
285
|
+
position: absolute;
|
286
|
+
#{$default-float}: 100%;
|
287
|
+
top: 0;
|
288
|
+
visibility: hidden;
|
289
|
+
z-index: 99;
|
294
290
|
|
295
|
-
|
291
|
+
li { width: 100%;
|
296
292
|
a {
|
297
|
-
|
298
|
-
|
299
|
-
|
293
|
+
font-weight: normal;
|
294
|
+
padding: 8px $topbar-height / 3;
|
295
|
+
}
|
296
|
+
|
297
|
+
&.title h5 { margin-bottom: 0;
|
298
|
+
a {
|
299
|
+
color: $topbar-link-color;
|
300
|
+
line-height: $topbar-height / 2;
|
301
|
+
display: block;
|
302
|
+
}
|
300
303
|
}
|
301
304
|
}
|
302
|
-
}
|
303
305
|
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
306
|
+
label {
|
307
|
+
padding: 8px $topbar-height / 3 2px;
|
308
|
+
margin-bottom: 0;
|
309
|
+
text-transform: uppercase;
|
310
|
+
color: $dropdown-label-color;
|
311
|
+
font-weight: bold;
|
312
|
+
font-size: emCalc(10px);
|
313
|
+
}
|
311
314
|
}
|
312
315
|
}
|
313
|
-
}
|
314
|
-
|
315
|
-
// Element that controls breakpoint, no need to change this ever
|
316
|
-
.top-bar-js-breakpoint {
|
317
|
-
width: $topbar-breakpoint !important;
|
318
|
-
visibility: hidden;
|
319
|
-
}
|
320
|
-
.js-generated { display: block; }
|
321
|
-
|
322
|
-
|
323
|
-
// Top Bar styles intended for screen sizes above the breakpoint.
|
324
|
-
@media #{$topbar-media-query} {
|
325
|
-
.top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
|
326
|
-
.toggle-topbar { display: none; }
|
327
|
-
|
328
|
-
.title-area { float: $default-float; }
|
329
|
-
.name h1 a { width: auto; }
|
330
316
|
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
height: 2em;
|
336
|
-
padding: 0 10px;
|
337
|
-
position: relative;
|
338
|
-
top: 8px;
|
339
|
-
}
|
340
|
-
|
341
|
-
&.expanded { background: $topbar-bg; }
|
317
|
+
// Element that controls breakpoint, no need to change this ever
|
318
|
+
.top-bar-js-breakpoint {
|
319
|
+
width: $topbar-breakpoint !important;
|
320
|
+
visibility: hidden;
|
342
321
|
}
|
322
|
+
.js-generated { display: block; }
|
343
323
|
|
344
|
-
.contain-to-grid .top-bar { max-width: $row-width; margin: 0 auto; margin-bottom: $topbar-margin-bottom; }
|
345
324
|
|
346
|
-
.
|
347
|
-
|
348
|
-
|
325
|
+
// Top Bar styles intended for screen sizes above the breakpoint.
|
326
|
+
@media #{$topbar-media-query} {
|
327
|
+
.top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
|
328
|
+
.toggle-topbar { display: none; }
|
349
329
|
|
350
|
-
|
351
|
-
width: auto;
|
352
|
-
height: auto !important;
|
353
|
-
display: inline;
|
330
|
+
.title-area { float: $default-float; }
|
331
|
+
.name h1 a { width: auto; }
|
354
332
|
|
355
|
-
|
356
|
-
|
357
|
-
|
333
|
+
input,
|
334
|
+
.button {
|
335
|
+
line-height: 2em;
|
336
|
+
font-size: emCalc(14px);
|
337
|
+
height: 2em;
|
338
|
+
padding: 0 10px;
|
339
|
+
position: relative;
|
340
|
+
top: 8px;
|
358
341
|
}
|
359
|
-
}
|
360
342
|
|
361
|
-
|
362
|
-
a:not(.button) {
|
363
|
-
padding: 0 $topbar-height / 3;
|
364
|
-
line-height: $topbar-height;
|
365
|
-
background: $topbar-bg;
|
366
|
-
&:hover { background: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness); }
|
367
|
-
}
|
343
|
+
&.expanded { background: $topbar-bg; }
|
368
344
|
}
|
369
345
|
|
370
|
-
.
|
371
|
-
& > a {
|
372
|
-
padding-#{$opposite-direction}: $topbar-dropdown-toggle-size * 7 !important;
|
346
|
+
.contain-to-grid .top-bar { max-width: $row-width; margin: 0 auto; margin-bottom: $topbar-margin-bottom; }
|
373
347
|
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
348
|
+
.top-bar-section {
|
349
|
+
@include single-transition(none,0,0);
|
350
|
+
#{$default-float}: 0 !important;
|
351
|
+
|
352
|
+
ul {
|
353
|
+
width: auto;
|
354
|
+
height: auto !important;
|
355
|
+
display: inline;
|
379
356
|
|
380
|
-
|
381
|
-
|
357
|
+
li {
|
358
|
+
float: $default-float;
|
359
|
+
.js-generated { display: none; }
|
360
|
+
}
|
382
361
|
}
|
383
362
|
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
363
|
+
li {
|
364
|
+
a:not(.button) {
|
365
|
+
padding: 0 $topbar-height / 3;
|
366
|
+
line-height: $topbar-height;
|
367
|
+
background: $topbar-bg;
|
368
|
+
&:hover { background: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness); }
|
388
369
|
}
|
389
370
|
}
|
390
371
|
|
391
|
-
.
|
372
|
+
.has-dropdown {
|
392
373
|
& > a {
|
374
|
+
padding-#{$opposite-direction}: $topbar-height / 3 + 20 !important;
|
375
|
+
|
393
376
|
&:after {
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
#{$opposite-direction}: 5px;
|
377
|
+
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
|
378
|
+
margin-top: -($topbar-dropdown-toggle-size / 2);
|
379
|
+
top: $topbar-height / 2;
|
398
380
|
}
|
399
381
|
}
|
400
|
-
}
|
401
|
-
|
402
|
-
}
|
403
382
|
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
background: transparent;
|
408
|
-
min-width: 100%;
|
383
|
+
&.moved { position: relative;
|
384
|
+
& > .dropdown { visibility: hidden; }
|
385
|
+
}
|
409
386
|
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
padding: 7px $topbar-height / 3;
|
416
|
-
background: lighten($topbar-bg, 5%);
|
387
|
+
&:hover,
|
388
|
+
&:active {
|
389
|
+
& > .dropdown {
|
390
|
+
visibility: visible;
|
391
|
+
}
|
417
392
|
}
|
418
393
|
|
419
|
-
|
420
|
-
|
421
|
-
|
394
|
+
.dropdown li.has-dropdown {
|
395
|
+
& > a {
|
396
|
+
&:after {
|
397
|
+
border: none;
|
398
|
+
content: "\00bb";
|
399
|
+
margin-top: -15px;
|
400
|
+
#{$opposite-direction}: 5px;
|
401
|
+
}
|
402
|
+
}
|
422
403
|
}
|
423
404
|
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
405
|
+
}
|
406
|
+
|
407
|
+
.dropdown {
|
408
|
+
#{$default-float}: 0;
|
409
|
+
top: auto;
|
410
|
+
background: transparent;
|
411
|
+
min-width: 100%;
|
412
|
+
|
413
|
+
li {
|
414
|
+
a {
|
415
|
+
color: $topbar-dropdown-link-color;
|
416
|
+
line-height: 1;
|
417
|
+
white-space: nowrap;
|
418
|
+
padding: 7px $topbar-height / 3;
|
419
|
+
background: lighten($topbar-bg, 5%);
|
420
|
+
}
|
421
|
+
|
422
|
+
label {
|
423
|
+
white-space: nowrap;
|
424
|
+
background: lighten($topbar-bg, 5%);
|
425
|
+
}
|
426
|
+
|
427
|
+
// Second Level Dropdowns
|
428
|
+
.dropdown {
|
429
|
+
#{$default-float}: 100%;
|
430
|
+
top: 0;
|
431
|
+
}
|
428
432
|
}
|
429
433
|
}
|
430
|
-
}
|
431
434
|
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
435
|
+
& > ul > .divider,
|
436
|
+
& > ul > [role="separator"] {
|
437
|
+
border-bottom: none;
|
438
|
+
border-top: none;
|
439
|
+
border-#{$opposite-direction}: solid 1px lighten($topbar-bg, 10%);
|
440
|
+
border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
|
441
|
+
clear: none;
|
442
|
+
height: $topbar-height;
|
443
|
+
width: 0px;
|
444
|
+
}
|
442
445
|
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
446
|
+
.has-form {
|
447
|
+
background: $topbar-bg;
|
448
|
+
padding: 0 $topbar-height / 3;
|
449
|
+
height: $topbar-height;
|
450
|
+
}
|
448
451
|
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
452
|
+
// Position overrides for ul.right
|
453
|
+
ul.right {
|
454
|
+
li .dropdown {
|
455
|
+
left: auto;
|
456
|
+
right: 0;
|
454
457
|
|
455
|
-
|
458
|
+
li .dropdown { right: 100%; }
|
459
|
+
}
|
456
460
|
}
|
461
|
+
|
457
462
|
}
|
458
463
|
|
459
464
|
}
|