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.
Files changed (63) hide show
  1. data/Gemfile.lock +1 -1
  2. data/README.md +4 -0
  3. data/docs/CHANGELOG.md +10 -0
  4. data/docs/components/block-grid.html.erb +1 -1
  5. data/docs/components/grid.html.erb +4 -4
  6. data/docs/components/inline-lists.html.erb +2 -2
  7. data/docs/components/panels.html.erb +2 -2
  8. data/docs/components/pricing-tables.html.erb +1 -1
  9. data/docs/components/progress-bars.html.erb +1 -1
  10. data/docs/components/reveal.html.erb +1 -1
  11. data/docs/components/section.html.erb +546 -19
  12. data/docs/components/split-buttons.html.erb +2 -2
  13. data/docs/components/thumbnails.html.erb +2 -2
  14. data/docs/components/top-bar.html.erb +2 -3
  15. data/docs/components/type.html.erb +5 -5
  16. data/docs/components/visibility.html.erb +1 -1
  17. data/docs/css/docs.scss +54 -0
  18. data/docs/sass.html.erb +3 -1
  19. data/js/foundation/foundation.forms.js +311 -227
  20. data/js/foundation/foundation.joyride.js +10 -8
  21. data/js/foundation/foundation.js +1 -1
  22. data/js/foundation/foundation.section.js +4 -4
  23. data/lib/foundation/version.rb +1 -1
  24. data/scss/foundation/_variables.scss +185 -171
  25. data/scss/foundation/components/_alert-boxes.scss +1 -0
  26. data/scss/foundation/components/_block-grid.scss +2 -4
  27. data/scss/foundation/components/_breadcrumbs.scss +1 -0
  28. data/scss/foundation/components/_button-groups.scss +1 -0
  29. data/scss/foundation/components/_buttons.scss +1 -0
  30. data/scss/foundation/components/_clearing.scss +154 -151
  31. data/scss/foundation/components/_custom-forms.scss +35 -21
  32. data/scss/foundation/components/_dropdown-buttons.scss +2 -1
  33. data/scss/foundation/components/_dropdown.scss +2 -1
  34. data/scss/foundation/components/_flex-video.scss +1 -0
  35. data/scss/foundation/components/_forms.scss +1 -0
  36. data/scss/foundation/components/_global.scss +75 -84
  37. data/scss/foundation/components/_grid.scss +9 -8
  38. data/scss/foundation/components/_inline-lists.scss +2 -1
  39. data/scss/foundation/components/_joyride.scss +165 -160
  40. data/scss/foundation/components/_keystrokes.scss +2 -1
  41. data/scss/foundation/components/_labels.scss +1 -0
  42. data/scss/foundation/components/_magellan.scss +2 -0
  43. data/scss/foundation/components/_orbit.scss +158 -154
  44. data/scss/foundation/components/_pagination.scss +1 -0
  45. data/scss/foundation/components/_panels.scss +1 -0
  46. data/scss/foundation/components/_pricing-tables.scss +1 -0
  47. data/scss/foundation/components/_progress-bars.scss +1 -0
  48. data/scss/foundation/components/_reveal.scss +2 -1
  49. data/scss/foundation/components/_section.scss +108 -93
  50. data/scss/foundation/components/_side-nav.scss +2 -1
  51. data/scss/foundation/components/_split-buttons.scss +1 -0
  52. data/scss/foundation/components/_sub-nav.scss +1 -0
  53. data/scss/foundation/components/_switch.scss +4 -2
  54. data/scss/foundation/components/_tables.scss +7 -3
  55. data/scss/foundation/components/_thumbs.scss +1 -0
  56. data/scss/foundation/components/_tooltips.scss +85 -81
  57. data/scss/foundation/components/_top-bar.scss +323 -318
  58. data/scss/foundation/components/_type.scss +290 -286
  59. data/scss/foundation/components/_visibility.scss +2 -0
  60. data/templates/project/index.html +0 -1
  61. data/templates/project/manifest.rb +0 -1
  62. data/templates/project/scss/app.scss +3 -0
  63. 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
  // Split Button Variables
3
3
  //
4
+ $include-html-button-classes: $include-html-classes !default;
4
5
 
5
6
  // We use these to control different shared styles for Split Buttons
6
7
  $split-button-function-factor: 15% !default;
@@ -1,6 +1,7 @@
1
1
  //
2
2
  // Sub Nav Variables
3
3
  //
4
+ $include-html-nav-classes: $include-html-classes !default;
4
5
 
5
6
  // We use these to control margin and padding
6
7
  $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
@@ -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-button-classes != false {
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,7 @@
1
1
  //
2
2
  // Image Thumbnail Variables
3
3
  //
4
+ $include-html-media-classes: $include-html-classes !default;
4
5
 
5
6
  // We use these to control border styles
6
7
  $thumb-border-style: solid !default;
@@ -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
- /* Tooltips */
26
-
27
- .has-tip {
28
- border-bottom: $has-tip-border-bottom;
29
- cursor: $has-tip-cursor-type;
30
- font-weight: $has-tip-font-weight;
31
- color: $has-tip-font-color;
32
-
33
- &:hover,
34
- &:focus {
35
- border-bottom: $has-tip-border-bottom-hover;
36
- color: $has-tip-font-color-hover;
37
- }
38
-
39
- &.tip-left,
40
- &.tip-right { float: none !important; }
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
- &.tip-top>.nub {
89
- border-color: $tooltip-bg transparent transparent transparent;
90
- top: auto;
91
- bottom: -($tooltip-pip-size * 2);
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
- &.tip-right>.nub {
105
- border-color: transparent $tooltip-bg transparent transparent;
106
- right: auto;
107
- left: -($tooltip-pip-size * 2);
108
- top: 50%;
109
- margin-top: -$tooltip-pip-size;
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
- width: 100%;
51
- background: $topbar-bg;
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
- overflow: hidden;
65
- height: $topbar-height;
66
- line-height: $topbar-height;
67
- position: relative;
68
- background: $topbar-bg;
69
- margin-bottom: $topbar-margin-bottom;
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
- .row { max-width: none; }
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
- form,
80
- input { margin-bottom: 0; }
73
+ // Topbar Global list Styles
74
+ ul {
75
+ margin-bottom: 0;
76
+ list-style: none;
77
+ }
81
78
 
82
- input { height: $topbar-input-height; }
79
+ .row { max-width: none; }
83
80
 
84
- .button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
81
+ form,
82
+ input { margin-bottom: 0; }
85
83
 
86
- // Title Area
87
- .title-area { position: relative; }
84
+ input { height: $topbar-input-height; }
88
85
 
89
- .name {
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
- h1 {
95
- line-height: $topbar-height;
96
- font-size: $topbar-title-font-size;
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
- width: 50%;
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
- // Menu toggle button on small devices
109
- .toggle-topbar {
110
- position: absolute;
111
- #{$opposite-direction}: 0;
112
- top: 0;
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
- a {
115
- color: $topbar-link-color;
116
- text-transform: $topbar-menu-link-transform;
117
- font-size: $topbar-menu-link-font-size;
118
- font-weight: $topbar-menu-link-weight;
119
- position: relative;
120
- display: block;
121
- padding: 0 $topbar-height / 3;
122
- height: $topbar-height;
123
- line-height: $topbar-height;
124
- }
125
-
126
- // Adding the class "menu-icon" will add the 3-line icon people love and adore.
127
- &.menu-icon {
128
- #{$opposite-direction}: $topbar-height / 3;
129
- top: 50%;
130
- margin-top: -16px;
131
- padding-#{$default-float}: 40px;
132
-
133
- a {
134
- text-indent: -48px;
135
- width: 34px;
136
- height: 34px;
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
- // Change things up when the top-bar is expanded
161
- &.expanded {
162
- height: auto;
163
- background: transparent;
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
- .title-area { background: $topbar-bg; }
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
- .toggle-topbar {
168
- a { color: $topbar-menu-link-color-toggled;
169
- span {
170
- // Shh, don't tell, but box-shadows create the menu icon :)
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
- .divider,
202
- [role="separator"] {
203
- border-bottom: solid 1px lighten($topbar-dropdown-bg, 10%);
204
- border-top: solid 1px darken($topbar-dropdown-bg, 10%);
205
- clear: both;
206
- height: 1px;
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
- ul li {
211
- & > a {
212
- display: block;
194
+ ul {
213
195
  width: 100%;
214
- color: $topbar-link-color;
215
- padding: 12px 0 12px 0;
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
- &:hover { background: darken($topbar-dropdown-bg, 3%); }
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
- &.button {
225
- background: $primary-color;
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
- &:hover {
228
- background: darken($primary-color, 10%);
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
- &.button.secondary {
232
- background: $secondary-color;
233
- &:hover {
234
- background: darken($secondary-color, 10%);
233
+ &.button.secondary {
234
+ background: $secondary-color;
235
+ &:hover {
236
+ background: darken($secondary-color, 10%);
237
+ }
235
238
  }
236
- }
237
- &.button.success {
238
- background: $success-color;
239
- &:hover {
240
- background: darken($success-color, 10%);
239
+ &.button.success {
240
+ background: $success-color;
241
+ &:hover {
242
+ background: darken($success-color, 10%);
243
+ }
241
244
  }
242
- }
243
- &.button.alert {
244
- background: $alert-color;
245
- &:hover {
246
- background: darken($alert-color, 10%);
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
- // Apply the active link color when it has that class
253
- &.active > a { background: darken($topbar-dropdown-bg, 3%); }
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
- // Styling for list items that have a dropdown within them.
260
- .has-dropdown {
261
- position: relative;
261
+ // Styling for list items that have a dropdown within them.
262
+ .has-dropdown {
263
+ position: relative;
262
264
 
263
- & > a {
264
- &:after {
265
- @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
266
- margin-#{$opposite-direction}: $topbar-height / 3;
267
- margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
268
- position: absolute;
269
- top: 22px;
270
- #{$opposite-direction}: 0;
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
- &.moved { position: static;
275
- & > .dropdown {
276
- visibility: visible;
276
+ &.moved { position: static;
277
+ & > .dropdown {
278
+ visibility: visible;
279
+ }
277
280
  }
278
281
  }
279
- }
280
282
 
281
- // Styling elements inside of dropdowns
282
- .dropdown {
283
- position: absolute;
284
- #{$default-float}: 100%;
285
- top: 0;
286
- visibility: hidden;
287
- z-index: 99;
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
- &.title h5 { margin-bottom: 0;
291
+ li { width: 100%;
296
292
  a {
297
- color: $topbar-link-color;
298
- line-height: $topbar-height / 2;
299
- display: block;
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
- label {
305
- padding: 8px $topbar-height / 3 2px;
306
- margin-bottom: 0;
307
- text-transform: uppercase;
308
- color: $dropdown-label-color;
309
- font-weight: bold;
310
- font-size: emCalc(10px);
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
- input,
332
- .button {
333
- line-height: 2em;
334
- font-size: emCalc(14px);
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
- .top-bar-section {
347
- @include single-transition(none,0,0);
348
- #{$default-float}: 0 !important;
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
- ul {
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
- li {
356
- float: $default-float;
357
- .js-generated { display: none; }
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
- li {
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
- .has-dropdown {
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
- &:after {
375
- @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
376
- margin-top: -($topbar-dropdown-toggle-size / 2);
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
- &.moved { position: relative;
381
- & > .dropdown { visibility: hidden; }
357
+ li {
358
+ float: $default-float;
359
+ .js-generated { display: none; }
360
+ }
382
361
  }
383
362
 
384
- &:hover,
385
- &:active {
386
- & > .dropdown {
387
- visibility: visible;
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
- .dropdown li.has-dropdown {
372
+ .has-dropdown {
392
373
  & > a {
374
+ padding-#{$opposite-direction}: $topbar-height / 3 + 20 !important;
375
+
393
376
  &:after {
394
- border: none;
395
- content: "\00bb";
396
- margin-top: -15px;
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
- .dropdown {
405
- #{$default-float}: 0;
406
- top: auto;
407
- background: transparent;
408
- min-width: 100%;
383
+ &.moved { position: relative;
384
+ & > .dropdown { visibility: hidden; }
385
+ }
409
386
 
410
- li {
411
- a {
412
- color: $topbar-dropdown-link-color;
413
- line-height: 1;
414
- white-space: nowrap;
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
- label {
420
- white-space: nowrap;
421
- background: lighten($topbar-bg, 5%);
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
- // Second Level Dropdowns
425
- .dropdown {
426
- #{$default-float}: 100%;
427
- top: 0;
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
- & > ul > .divider,
433
- & > ul > [role="separator"] {
434
- border-bottom: none;
435
- border-top: none;
436
- border-#{$opposite-direction}: solid 1px lighten($topbar-bg, 10%);
437
- border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
438
- clear: none;
439
- height: $topbar-height;
440
- width: 0px;
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
- .has-form {
444
- background: $topbar-bg;
445
- padding: 0 $topbar-height / 3;
446
- height: $topbar-height;
447
- }
446
+ .has-form {
447
+ background: $topbar-bg;
448
+ padding: 0 $topbar-height / 3;
449
+ height: $topbar-height;
450
+ }
448
451
 
449
- // Position overrides for ul.right
450
- ul.right {
451
- li .dropdown {
452
- left: auto;
453
- right: 0;
452
+ // Position overrides for ul.right
453
+ ul.right {
454
+ li .dropdown {
455
+ left: auto;
456
+ right: 0;
454
457
 
455
- li .dropdown { right: 100%; }
458
+ li .dropdown { right: 100%; }
459
+ }
456
460
  }
461
+
457
462
  }
458
463
 
459
464
  }