foundation-sass-rails 5.5.3.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +11 -0
  3. data/.rspec +3 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +6 -0
  6. data/Gemfile.lock +37 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +62 -0
  9. data/Rakefile +6 -0
  10. data/bin/console +14 -0
  11. data/bin/setup +8 -0
  12. data/foundation-sass-rails.gemspec +29 -0
  13. data/lib/foundation-sass-rails.rb +8 -0
  14. data/lib/foundation/version.rb +5 -0
  15. data/lib/generators/foundation/overrides_generator.rb +39 -0
  16. data/vendor/assets/stylesheets/foundation.scss +42 -0
  17. data/vendor/assets/stylesheets/foundation/_functions.scss +156 -0
  18. data/vendor/assets/stylesheets/foundation/_settings.scss +1489 -0
  19. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +161 -0
  20. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +128 -0
  21. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +133 -0
  22. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +132 -0
  23. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +208 -0
  24. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +261 -0
  25. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +260 -0
  26. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +130 -0
  27. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +269 -0
  28. data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +51 -0
  29. data/vendor/assets/stylesheets/foundation/components/_forms.scss +607 -0
  30. data/vendor/assets/stylesheets/foundation/components/_global.scss +566 -0
  31. data/vendor/assets/stylesheets/foundation/components/_grid.scss +292 -0
  32. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +460 -0
  33. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +58 -0
  34. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +220 -0
  35. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +60 -0
  36. data/vendor/assets/stylesheets/foundation/components/_labels.scss +106 -0
  37. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +34 -0
  38. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +606 -0
  39. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +388 -0
  40. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +163 -0
  41. data/vendor/assets/stylesheets/foundation/components/_panels.scss +107 -0
  42. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +150 -0
  43. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +85 -0
  44. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +177 -0
  45. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +212 -0
  46. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +120 -0
  47. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +203 -0
  48. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +125 -0
  49. data/vendor/assets/stylesheets/foundation/components/_switches.scss +241 -0
  50. data/vendor/assets/stylesheets/foundation/components/_tables.scss +135 -0
  51. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +142 -0
  52. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +66 -0
  53. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +142 -0
  54. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +745 -0
  55. data/vendor/assets/stylesheets/foundation/components/_type.scss +525 -0
  56. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +425 -0
  57. data/vendor/assets/stylesheets/normalize.scss +424 -0
  58. metadata +163 -0
@@ -0,0 +1,142 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+ @import 'grid';
7
+
8
+ //
9
+ // @variables
10
+ //
11
+
12
+ $include-html-tabs-classes: $include-html-classes !default;
13
+
14
+ $tabs-navigation-padding: rem-calc(16) !default;
15
+ $tabs-navigation-bg-color: $silver !default;
16
+ $tabs-navigation-active-bg-color: $white !default;
17
+ $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
18
+ $tabs-navigation-font-color: $jet !default;
19
+ $tabs-navigation-active-font-color: $tabs-navigation-font-color !default;
20
+ $tabs-navigation-font-size: rem-calc(16) !default;
21
+ $tabs-navigation-font-family: $body-font-family !default;
22
+
23
+ $tabs-content-margin-bottom: rem-calc(24) !default;
24
+ $tabs-content-padding: ($column-gutter/2) !default;
25
+
26
+ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
27
+
28
+ @include exports("tab") {
29
+ @if $include-html-tabs-classes {
30
+ .tabs {
31
+ @include clearfix;
32
+ margin-bottom: 0 !important;
33
+ margin-left: 0;
34
+
35
+ dd,
36
+ .tab-title {
37
+ float: $default-float;
38
+ list-style: none;
39
+ margin-bottom: 0 !important;
40
+ position: relative;
41
+
42
+ > a {
43
+ display: block;
44
+ background-color: $tabs-navigation-bg-color;
45
+ color: $tabs-navigation-font-color;
46
+ font-family: $tabs-navigation-font-family;
47
+ font-size: $tabs-navigation-font-size;
48
+ padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
49
+
50
+ &:hover {
51
+ background-color: $tabs-navigation-hover-bg-color;
52
+ }
53
+ }
54
+
55
+ &.active > a {
56
+ background-color: $tabs-navigation-active-bg-color;
57
+ color: $tabs-navigation-active-font-color;
58
+ }
59
+ }
60
+
61
+ &.radius {
62
+ dd:first-child,
63
+ .tab:first-child {
64
+ a { @include side-radius($default-float, $global-radius); }
65
+ }
66
+
67
+ dd:last-child,
68
+ .tab:last-child {
69
+ a { @include side-radius($opposite-direction, $global-radius); }
70
+ }
71
+ }
72
+
73
+ &.vertical {
74
+ dd,
75
+ .tab-title {
76
+ position: inherit;
77
+ float: none;
78
+ display: block;
79
+ top: auto;
80
+ }
81
+ }
82
+ }
83
+
84
+ .tabs-content {
85
+ @include clearfix;
86
+ margin-bottom: $tabs-content-margin-bottom;
87
+ width: 100%;
88
+
89
+ > .content {
90
+ display: none;
91
+ float: $default-float;
92
+ padding: $tabs-content-padding 0;
93
+ width: 100%;
94
+
95
+ &.active {
96
+ display: block;
97
+ float: none;
98
+ }
99
+ &.contained {
100
+ padding: $tabs-content-padding;
101
+ }
102
+ }
103
+
104
+ &.vertical {
105
+ display: block;
106
+
107
+ > .content {
108
+ padding: 0 $tabs-content-padding;
109
+ }
110
+ }
111
+ }
112
+
113
+ @media #{$medium-up} {
114
+ .tabs {
115
+ &.vertical {
116
+ float: $default-float;
117
+ margin: 0;
118
+ margin-bottom: $tabs-vertical-navigation-margin-bottom !important;
119
+ max-width: 20%;
120
+ width: 20%;
121
+ }
122
+ }
123
+
124
+ .tabs-content {
125
+ &.vertical {
126
+ float: $default-float;
127
+ margin-#{$default-float}: -1px;
128
+ max-width: 80%;
129
+ padding-#{$default-float}: 1rem;
130
+ width: 80%;
131
+ }
132
+ }
133
+ }
134
+
135
+ .no-js {
136
+ .tabs-content > .content {
137
+ display: block;
138
+ float: none;
139
+ }
140
+ }
141
+ }
142
+ }
@@ -0,0 +1,66 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+
7
+ //
8
+ // @name _thumbs.scss
9
+ // @dependencies _globals.scss
10
+ //
11
+
12
+ //
13
+ // @variables
14
+ //
15
+
16
+ $include-html-media-classes: $include-html-classes !default;
17
+
18
+ // We use these to control border styles
19
+ $thumb-border-style: solid !default;
20
+ $thumb-border-width: 4px !default;
21
+ $thumb-border-color: $white !default;
22
+ $thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default;
23
+ $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
24
+
25
+ // Radius and transition speed for thumbs
26
+ $thumb-radius: $global-radius !default;
27
+ $thumb-transition-speed: 200ms !default;
28
+
29
+ //
30
+ // @mixins
31
+ //
32
+
33
+ // We use this to create image thumbnail styles.
34
+ //
35
+ // $border-width - Width of border around thumbnail. Default: $thumb-border-width.
36
+ // $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow.
37
+ // $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover.
38
+ @mixin thumb(
39
+ $border-width:$thumb-border-width,
40
+ $box-shadow:$thumb-box-shadow,
41
+ $box-shadow-hover:$thumb-box-shadow-hover) {
42
+ border: $thumb-border-style $border-width $thumb-border-color;
43
+ box-shadow: $box-shadow;
44
+ display: inline-block;
45
+ line-height: 0;
46
+ max-width: 100%;
47
+
48
+ &:hover,
49
+ &:focus {
50
+ box-shadow: $box-shadow-hover;
51
+ }
52
+ }
53
+
54
+
55
+ @include exports("thumb") {
56
+ @if $include-html-media-classes {
57
+
58
+ /* Image Thumbnails */
59
+ .th {
60
+ @include thumb;
61
+ @include single-transition(all, $thumb-transition-speed, ease-out);
62
+
63
+ &.radius { @include radius($thumb-radius); }
64
+ }
65
+ }
66
+ }
@@ -0,0 +1,142 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+
7
+ //
8
+ // Tooltip Variables
9
+ //
10
+ $include-html-tooltip-classes: $include-html-classes !default;
11
+
12
+ $has-tip-border-bottom: dotted 1px $iron !default;
13
+ $has-tip-font-weight: $font-weight-bold !default;
14
+ $has-tip-font-color: $oil !default;
15
+ $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default;
16
+ $has-tip-font-color-hover: $primary-color !default;
17
+ $has-tip-cursor-type: help !default;
18
+
19
+ $tooltip-padding: rem-calc(12) !default;
20
+ $tooltip-bg: $oil !default;
21
+ $tooltip-font-size: rem-calc(14) !default;
22
+ $tooltip-font-weight: $font-weight-normal !default;
23
+ $tooltip-font-color: $white !default;
24
+ $tooltip-line-height: 1.3 !default;
25
+ $tooltip-close-font-size: rem-calc(10) !default;
26
+ $tooltip-close-font-weight: $font-weight-normal !default;
27
+ $tooltip-close-font-color: $monsoon !default;
28
+ $tooltip-font-size-sml: rem-calc(14) !default;
29
+ $tooltip-radius: $global-radius !default;
30
+ $tooltip-rounded: $global-rounded !default;
31
+ $tooltip-pip-size: 5px !default;
32
+ $tooltip-max-width: 300px !default;
33
+
34
+ @include exports("tooltip") {
35
+ @if $include-html-tooltip-classes {
36
+
37
+ /* Tooltips */
38
+ .has-tip {
39
+ border-bottom: $has-tip-border-bottom;
40
+ color: $has-tip-font-color;
41
+ cursor: $has-tip-cursor-type;
42
+ font-weight: $has-tip-font-weight;
43
+
44
+ &:hover,
45
+ &:focus {
46
+ border-bottom: $has-tip-border-bottom-hover;
47
+ color: $has-tip-font-color-hover;
48
+ }
49
+
50
+ &.tip-left,
51
+ &.tip-right { float: none !important; }
52
+ }
53
+
54
+ .tooltip {
55
+ background: $tooltip-bg;
56
+ color: $tooltip-font-color;
57
+ display: none;
58
+ font-size: $tooltip-font-size;
59
+ font-weight: $tooltip-font-weight;
60
+ line-height: $tooltip-line-height;
61
+ max-width: $tooltip-max-width;
62
+ padding: $tooltip-padding;
63
+ position: absolute;
64
+ width: 100%;
65
+ z-index: 1006;
66
+ #{$default-float}: 50%;
67
+
68
+ > .nub {
69
+ border: solid $tooltip-pip-size;
70
+ border-color: transparent transparent $tooltip-bg transparent;
71
+ display: block;
72
+ height: 0;
73
+ pointer-events: none;
74
+ position: absolute;
75
+ top: -($tooltip-pip-size * 2);
76
+ width: 0;
77
+ #{$default-float}: $tooltip-pip-size;
78
+
79
+ &.rtl {
80
+ left: auto;
81
+ #{$opposite-direction}: $tooltip-pip-size;
82
+ }
83
+ }
84
+
85
+ &.radius {
86
+ @include radius($tooltip-radius);
87
+ }
88
+ &.round {
89
+ @include radius($tooltip-rounded);
90
+ > .nub {
91
+ left: 2rem;
92
+ }
93
+ }
94
+
95
+ &.opened {
96
+ border-bottom: $has-tip-border-bottom-hover !important;
97
+ color: $has-tip-font-color-hover !important;
98
+ }
99
+ }
100
+
101
+ .tap-to-close {
102
+ color: $tooltip-close-font-color;
103
+ display: block;
104
+ font-size: $tooltip-close-font-size;
105
+ font-weight: $tooltip-close-font-weight;
106
+ }
107
+
108
+ @media #{$small} {
109
+ .tooltip {
110
+ > .nub {
111
+ border-color: transparent transparent $tooltip-bg transparent;
112
+ top: -($tooltip-pip-size * 2);
113
+ }
114
+ &.tip-top>.nub {
115
+ border-color: $tooltip-bg transparent transparent transparent;
116
+ bottom: -($tooltip-pip-size * 2);
117
+ top: auto;
118
+ }
119
+
120
+ &.tip-left,
121
+ &.tip-right { float: none !important; }
122
+
123
+ &.tip-left>.nub {
124
+ border-color: transparent transparent transparent $tooltip-bg;
125
+ left: auto;
126
+ margin-top: -$tooltip-pip-size;
127
+ right: -($tooltip-pip-size * 2);
128
+ top: 50%;
129
+ }
130
+ &.tip-right>.nub {
131
+ border-color: transparent $tooltip-bg transparent transparent;
132
+ left: -($tooltip-pip-size * 2);
133
+ margin-top: -$tooltip-pip-size;
134
+ right: auto;
135
+ top: 50%;
136
+ }
137
+
138
+ }
139
+ }
140
+
141
+ }
142
+ }
@@ -0,0 +1,745 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+ @import 'grid';
7
+ @import 'buttons';
8
+ @import 'forms';
9
+
10
+ //
11
+ // Top Bar Variables
12
+ //
13
+ $include-html-top-bar-classes: $include-html-classes !default;
14
+
15
+ // Background color for the top bar
16
+ $topbar-bg-color: $oil !default;
17
+ $topbar-bg: $topbar-bg-color !default;
18
+
19
+ // Height and margin
20
+ $topbar-height: rem-calc(45) !default;
21
+ $topbar-margin-bottom: 0 !default;
22
+
23
+ // Controlling the styles for the title in the top bar
24
+ $topbar-title-weight: $font-weight-normal !default;
25
+ $topbar-title-font-size: rem-calc(17) !default;
26
+
27
+ // Set the link colors and styles for top-level nav
28
+ $topbar-link-color: $white !default;
29
+ $topbar-link-color-hover: $white !default;
30
+ $topbar-link-color-active: $white !default;
31
+ $topbar-link-color-active-hover: $white !default;
32
+ $topbar-link-weight: $font-weight-normal !default;
33
+ $topbar-link-font-size: rem-calc(13) !default;
34
+ $topbar-link-hover-lightness: -10% !default; // Darken by 10%
35
+ $topbar-link-bg: $topbar-bg !default;
36
+ $topbar-link-bg-hover: $jet !default;
37
+ $topbar-link-bg-color-hover: $charcoal !default;
38
+ $topbar-link-bg-active: $primary-color !default;
39
+ $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
40
+ $topbar-link-font-family: $body-font-family !default;
41
+ $topbar-link-text-transform: none !default;
42
+ $topbar-link-padding: ($topbar-height / 3) !default;
43
+ $topbar-back-link-size: rem-calc(18) !default;
44
+ $topbar-link-dropdown-padding: rem-calc(20) !default;
45
+ $topbar-button-font-size: .75rem !default;
46
+ $topbar-button-top: 7px !default;
47
+
48
+ // Style the top bar dropdown elements
49
+ $topbar-dropdown-bg: $oil !default;
50
+ $topbar-dropdown-link-color: $white !default;
51
+ $topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
52
+ $topbar-dropdown-link-bg: $oil !default;
53
+ $topbar-dropdown-link-bg-hover: $jet !default;
54
+ $topbar-dropdown-link-weight: $font-weight-normal !default;
55
+ $topbar-dropdown-toggle-size: 5px !default;
56
+ $topbar-dropdown-toggle-color: $white !default;
57
+ $topbar-dropdown-toggle-alpha: .4 !default;
58
+
59
+ $topbar-dropdown-label-color: $monsoon !default;
60
+ $topbar-dropdown-label-text-transform: uppercase !default;
61
+ $topbar-dropdown-label-font-weight: $font-weight-bold !default;
62
+ $topbar-dropdown-label-font-size: rem-calc(10) !default;
63
+ $topbar-dropdown-label-bg: $oil !default;
64
+
65
+ // Top menu icon styles
66
+ $topbar-menu-link-transform: uppercase !default;
67
+ $topbar-menu-link-font-size: rem-calc(13) !default;
68
+ $topbar-menu-link-weight: $font-weight-bold !default;
69
+ $topbar-menu-link-color: $white !default;
70
+ $topbar-menu-icon-color: $white !default;
71
+ $topbar-menu-link-color-toggled: $jumbo !default;
72
+ $topbar-menu-icon-color-toggled: $jumbo !default;
73
+ $topbar-menu-icon-position: $opposite-direction !default; // Change to $default-float for a left menu icon
74
+
75
+ // Transitions and breakpoint styles
76
+ $topbar-transition-speed: 300ms !default;
77
+ // Using rem-calc for the below breakpoint causes issues with top bar
78
+ $topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
79
+ $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})" !default;
80
+
81
+ // Top-bar input styles
82
+ $topbar-input-height: rem-calc(28) !default;
83
+
84
+ // Divider Styles
85
+ $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
86
+ $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;
87
+
88
+ // Sticky Class
89
+ $topbar-sticky-class: ".sticky" !default;
90
+ $topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
91
+ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text from dropdown subnavigation li
92
+
93
+ // Accessibility mixins for hiding and showing the menu dropdown items
94
+ @mixin topbar-hide-dropdown {
95
+ // Makes an element visually hidden by default, but visible when focused.
96
+ @include element-invisible();
97
+ display: block;
98
+ }
99
+
100
+ @mixin topbar-show-dropdown {
101
+ @include element-invisible-off();
102
+ display: block;
103
+ position: absolute !important; // Reset the position from static to absolute
104
+ }
105
+
106
+ @include exports("top-bar") {
107
+
108
+ @if $include-html-top-bar-classes {
109
+
110
+ // Used to provide media query values for javascript components.
111
+ // This class is generated despite the value of $include-html-top-bar-classes
112
+ // to ensure width calculations work correctly.
113
+ meta.foundation-mq-topbar {
114
+ font-family: "/" + unquote($topbar-media-query) + "/";
115
+ width: $topbar-breakpoint;
116
+ }
117
+
118
+ /* Wrapped around .top-bar to contain to grid width */
119
+ .contain-to-grid {
120
+ width: 100%;
121
+ background: $topbar-bg;
122
+
123
+ .top-bar {
124
+ margin-bottom: $topbar-margin-bottom;
125
+ }
126
+ }
127
+
128
+ // Wrapped around .top-bar to make it stick to the top
129
+ .fixed {
130
+ position: fixed;
131
+ top: 0;
132
+ width: 100%;
133
+ z-index: 99;
134
+ #{$default-float}: 0;
135
+
136
+ &.expanded:not(.top-bar) {
137
+ height: auto;
138
+ max-height: 100%;
139
+ overflow-y: auto;
140
+ width: 100%;
141
+
142
+ .title-area {
143
+ position: fixed;
144
+ width: 100%;
145
+ z-index: 99;
146
+ }
147
+
148
+ // Ensure you can scroll the menu on small screens
149
+ .top-bar-section {
150
+ margin-top: $topbar-height;
151
+ z-index: 98;
152
+ }
153
+ }
154
+ }
155
+
156
+ .top-bar {
157
+ background: $topbar-bg;
158
+ height: $topbar-height;
159
+ line-height: $topbar-height;
160
+ margin-bottom: $topbar-margin-bottom;
161
+ overflow: hidden;
162
+ position: relative;
163
+
164
+ // Topbar Global list Styles
165
+ ul {
166
+ list-style: none;
167
+ margin-bottom: 0;
168
+ }
169
+
170
+ .row {
171
+ max-width: none;
172
+ }
173
+
174
+ form,
175
+ input,
176
+ select {
177
+ margin-bottom: 0;
178
+ }
179
+
180
+ input,
181
+ select {
182
+ font-size: $topbar-button-font-size;
183
+ height: $topbar-input-height;
184
+ padding-bottom: .35rem;
185
+ padding-top: .35rem;
186
+ }
187
+
188
+ .button, button {
189
+ font-size: $topbar-button-font-size;
190
+ margin-bottom: 0;
191
+ padding-bottom: .35rem + rem-calc(1);
192
+ padding-top: .35rem + rem-calc(1);
193
+ // position: relative;
194
+ // top: -1px;
195
+
196
+ // Corrects a slight misalignment when put next to an input field
197
+ @media #{$small-only} {
198
+ position: relative;
199
+ top: -1px;
200
+ }
201
+ }
202
+
203
+ // Title Area
204
+ .title-area {
205
+ margin: 0;
206
+ position: relative;
207
+ }
208
+
209
+ .name {
210
+ font-size: $rem-base;
211
+ height: $topbar-height;
212
+ margin: 0;
213
+
214
+ h1, h2, h3, h4, p, span {
215
+ font-size: $topbar-title-font-size;
216
+ line-height: $topbar-height;
217
+ margin: 0;
218
+
219
+ a {
220
+ color: $topbar-link-color;
221
+ display: block;
222
+ font-weight: $topbar-title-weight;
223
+ padding: 0 $topbar-link-padding;
224
+ width: 75%;
225
+ }
226
+ }
227
+ }
228
+
229
+ // Menu toggle button on small devices
230
+ .toggle-topbar {
231
+ position: absolute;
232
+ #{$topbar-menu-icon-position}: 0;
233
+ top: 0;
234
+
235
+ a {
236
+ color: $topbar-link-color;
237
+ display: block;
238
+ font-size: $topbar-menu-link-font-size;
239
+ font-weight: $topbar-menu-link-weight;
240
+ height: $topbar-height;
241
+ line-height: $topbar-height;
242
+ padding: 0 $topbar-link-padding;
243
+ position: relative;
244
+ text-transform: $topbar-menu-link-transform;
245
+ }
246
+
247
+ // Adding the class "menu-icon" will add the 3-line icon people love and adore.
248
+ &.menu-icon {
249
+ margin-top: -16px;
250
+ top: 50%;
251
+
252
+ a {
253
+ @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
254
+
255
+ @if $text-direction == rtl {
256
+ text-indent: -58px;
257
+ }
258
+ color: $topbar-menu-link-color;
259
+ height: 34px;
260
+ line-height: 33px;
261
+ padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
262
+ position: relative;
263
+ }
264
+ }
265
+ }
266
+
267
+ // Change things up when the top-bar is expanded
268
+ &.expanded {
269
+ background: transparent;
270
+ height: auto;
271
+
272
+ .title-area {
273
+ background: $topbar-bg;
274
+ }
275
+
276
+ .toggle-topbar {
277
+ a {
278
+ color: $topbar-menu-link-color-toggled;
279
+
280
+ span::after {
281
+ // Shh, don't tell, but box-shadows create the menu icon :)
282
+ // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
283
+ box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
284
+ 0 7px 0 1px $topbar-menu-icon-color-toggled,
285
+ 0 14px 0 1px $topbar-menu-icon-color-toggled;
286
+ }
287
+ }
288
+ }
289
+
290
+ // Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
291
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
292
+ .top-bar-section {
293
+ .has-dropdown.moved > .dropdown,
294
+ .dropdown {
295
+ clip: initial;
296
+ }
297
+
298
+ // This was needed as parent ul's had padding, and the clip: was allowing content to peak through
299
+ .has-dropdown:not(.moved) > ul {
300
+ padding: 0;
301
+ }
302
+ }
303
+ }
304
+ }
305
+ }
306
+
307
+ // Right and Left Navigation that stacked by default
308
+ .top-bar-section {
309
+ #{$default-float}: 0;
310
+ position: relative;
311
+ width: auto;
312
+ @include single-transition($default-float, $topbar-transition-speed);
313
+
314
+ ul {
315
+ display: block;
316
+ font-size: $rem-base;
317
+ height: auto;
318
+ margin: 0;
319
+ padding: 0;
320
+ width: 100%;
321
+ }
322
+
323
+ .divider,
324
+ [role="separator"] {
325
+ border-top: $topbar-divider-border-top;
326
+ clear: both;
327
+ height: 1px;
328
+ width: 100%;
329
+ }
330
+
331
+ ul li {
332
+ background: $topbar-dropdown-bg;
333
+
334
+ > a {
335
+ color: $topbar-link-color;
336
+ display: block;
337
+ font-family: $topbar-link-font-family;
338
+ font-size: $topbar-link-font-size;
339
+ font-weight: $topbar-link-weight;
340
+ padding-#{$default-float}: $topbar-link-padding;
341
+ padding: 12px 0 12px $topbar-link-padding;
342
+ text-transform: $topbar-link-text-transform;
343
+ width: 100%;
344
+
345
+ &.button {
346
+ font-size: $topbar-link-font-size;
347
+ padding-#{$default-float}: $topbar-link-padding;
348
+ padding-#{$opposite-direction}: $topbar-link-padding;
349
+ @include button-style($bg:$primary-color);
350
+ }
351
+
352
+ &.button.secondary { @include button-style($bg:$secondary-color); }
353
+ &.button.success { @include button-style($bg:$success-color); }
354
+ &.button.alert { @include button-style($bg:$alert-color); }
355
+ &.button.warning { @include button-style($bg:$warning-color); }
356
+ &.button.info { @include button-style($bg:$info-color); }
357
+ }
358
+
359
+ > button {
360
+ font-size: $topbar-link-font-size;
361
+ padding-#{$default-float}: $topbar-link-padding;
362
+ padding-#{$opposite-direction}: $topbar-link-padding;
363
+ @include button-style($bg:$primary-color);
364
+
365
+ &.secondary { @include button-style($bg:$secondary-color); }
366
+ &.success { @include button-style($bg:$success-color); }
367
+ &.alert { @include button-style($bg:$alert-color); }
368
+ &.warning { @include button-style($bg:$warning-color); }
369
+ &.info { @include button-style($bg:$info-color); }
370
+ }
371
+
372
+ // Apply the hover link color when it has that class
373
+ &:hover:not(.has-form) > a {
374
+ background-color: $topbar-link-bg-color-hover;
375
+ color: $topbar-link-color-hover;
376
+
377
+ @if ($topbar-link-bg-hover) {
378
+ background: $topbar-link-bg-hover;
379
+ }
380
+ }
381
+
382
+ // Apply the active link color when it has that class
383
+ &.active > a {
384
+ background: $topbar-link-bg-active;
385
+ color: $topbar-link-color-active;
386
+
387
+ &:hover {
388
+ background: $topbar-link-bg-active-hover;
389
+ color: $topbar-link-color-active-hover;
390
+ }
391
+ }
392
+ }
393
+
394
+ // Add some extra padding for list items contains buttons
395
+ .has-form {
396
+ padding: $topbar-link-padding;
397
+ }
398
+
399
+ // Styling for list items that have a dropdown within them.
400
+ .has-dropdown {
401
+ position: relative;
402
+
403
+ > a {
404
+ &:after {
405
+ @if ($topbar-arrows) {
406
+ @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
407
+ }
408
+
409
+ margin-#{$opposite-direction}: $topbar-link-padding;
410
+ margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
411
+ position: absolute;
412
+ top: 50%;
413
+ #{$opposite-direction}: 0;
414
+ }
415
+ }
416
+
417
+ &.moved {
418
+ position: static;
419
+
420
+ > .dropdown {
421
+ @include topbar-show-dropdown();
422
+ width: 100%;
423
+ }
424
+
425
+ > a:after {
426
+ display: none;
427
+ }
428
+ }
429
+ }
430
+
431
+ // Styling elements inside of dropdowns
432
+ .dropdown {
433
+ @include topbar-hide-dropdown();
434
+ padding: 0;
435
+ position: absolute;
436
+ top: 0;
437
+ z-index: 99;
438
+ #{$default-float}: 100%;
439
+
440
+ li {
441
+ height: auto;
442
+ width: 100%;
443
+
444
+ a {
445
+ font-weight: $topbar-dropdown-link-weight;
446
+ padding: 8px $topbar-link-padding;
447
+ &.parent-link {
448
+ font-weight: $topbar-link-weight;
449
+ }
450
+ }
451
+
452
+ &.title h5,
453
+ &.parent-link {
454
+ // Back Button
455
+ margin-bottom: 0;
456
+ margin-top: 0;
457
+ font-size: $topbar-back-link-size;
458
+ a {
459
+ color: $topbar-link-color;
460
+ // line-height: ($topbar-height / 2);
461
+ display: block;
462
+ &:hover { background:none; }
463
+ }
464
+ }
465
+
466
+ &.has-form {
467
+ padding: 8px $topbar-link-padding;
468
+ }
469
+
470
+ .button,
471
+ button {
472
+ top: auto;
473
+ }
474
+ }
475
+
476
+ label {
477
+ color: $topbar-dropdown-label-color;
478
+ font-size: $topbar-dropdown-label-font-size;
479
+ font-weight: $topbar-dropdown-label-font-weight;
480
+ margin-bottom: 0;
481
+ padding: 8px $topbar-link-padding 2px;
482
+ text-transform: $topbar-dropdown-label-text-transform;
483
+ }
484
+ }
485
+ }
486
+
487
+ .js-generated { display: block; }
488
+
489
+
490
+ // Top Bar styles intended for screen sizes above the breakpoint.
491
+ @media #{$topbar-media-query} {
492
+ .top-bar {
493
+ @include clearfix;
494
+ background: $topbar-bg;
495
+ overflow: visible;
496
+
497
+ .toggle-topbar { display: none; }
498
+
499
+ .title-area { float: $default-float; }
500
+ .name h1 a,
501
+ .name h2 a,
502
+ .name h3 a,
503
+ .name h4 a,
504
+ .name h5 a,
505
+ .name h6 a { width: auto; }
506
+
507
+ input,
508
+ select,
509
+ .button,
510
+ button {
511
+ font-size: rem-calc(14);
512
+ height: $topbar-input-height;
513
+ position: relative;
514
+ top: (($topbar-height - $topbar-input-height) / 2);
515
+ }
516
+
517
+ .has-form > .button,
518
+ .has-form > button {
519
+ font-size: rem-calc(14);
520
+ height: $topbar-input-height;
521
+ position: relative;
522
+ top: (($topbar-height - $topbar-input-height) / 2);
523
+ }
524
+
525
+ &.expanded {
526
+ background: $topbar-bg;
527
+ }
528
+ }
529
+
530
+ .contain-to-grid .top-bar {
531
+ margin: 0 auto;
532
+ margin-bottom: $topbar-margin-bottom;
533
+ max-width: $row-width;
534
+ }
535
+
536
+ .top-bar-section {
537
+ @include single-transition(none,0,0);
538
+ #{$default-float}: 0 !important;
539
+
540
+ ul {
541
+ display: inline;
542
+ height: auto !important;
543
+ width: auto;
544
+
545
+ li {
546
+ float: $default-float;
547
+ .js-generated { display: none; }
548
+ }
549
+ }
550
+
551
+ li {
552
+ &.hover {
553
+ > a:not(.button) {
554
+ background-color: $topbar-link-bg-color-hover;
555
+ @if ($topbar-link-bg-hover) {
556
+ background: $topbar-link-bg-hover;
557
+ }
558
+ color: $topbar-link-color-hover;
559
+ }
560
+ }
561
+
562
+ &:not(.has-form) {
563
+ a:not(.button) {
564
+ background: $topbar-link-bg;
565
+ line-height: $topbar-height;
566
+ padding: 0 $topbar-link-padding;
567
+ &:hover {
568
+ background-color: $topbar-link-bg-color-hover;
569
+ @if ($topbar-link-bg-hover) {
570
+ background: $topbar-link-bg-hover;
571
+ }
572
+ }
573
+ }
574
+ }
575
+
576
+ &.active:not(.has-form) {
577
+ a:not(.button) {
578
+ background: $topbar-link-bg-active;
579
+ color: $topbar-link-color-active;
580
+ line-height: $topbar-height;
581
+ padding: 0 $topbar-link-padding;
582
+ &:hover {
583
+ background: $topbar-link-bg-active-hover;
584
+ color: $topbar-link-color-active-hover;
585
+ }
586
+ }
587
+ }
588
+ }
589
+
590
+ .has-dropdown {
591
+ @if $topbar-arrows {
592
+ > a {
593
+ padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
594
+ &:after {
595
+ @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
596
+ margin-top: -($topbar-dropdown-toggle-size / 2);
597
+ top: ($topbar-height / 2);
598
+ }
599
+ }
600
+ }
601
+
602
+ &.moved { position: relative;
603
+ > .dropdown {
604
+ @include topbar-hide-dropdown();
605
+ }
606
+ }
607
+
608
+ &.hover, &.not-click:hover {
609
+ > .dropdown {
610
+ @include topbar-show-dropdown();
611
+ }
612
+ }
613
+
614
+ > a:focus + .dropdown {
615
+ @include topbar-show-dropdown();
616
+ }
617
+
618
+ .dropdown li.has-dropdown {
619
+ > a {
620
+ @if ($topbar-dropdown-arrows) {
621
+ &:after {
622
+ border: none;
623
+ content: "\00bb";
624
+ top: rem-calc(3);
625
+
626
+ #{$opposite-direction}: 5px;
627
+ }
628
+ }
629
+ }
630
+ }
631
+ }
632
+
633
+ .dropdown {
634
+ #{$default-float}: 0;
635
+ background: transparent;
636
+ min-width: 100%;
637
+ top: auto;
638
+
639
+ li {
640
+ a {
641
+ background: $topbar-dropdown-link-bg;
642
+ color: $topbar-dropdown-link-color;
643
+ line-height: $topbar-height;
644
+ padding: 12px $topbar-link-padding;
645
+ white-space: nowrap;
646
+ }
647
+
648
+ &:not(.has-form):not(.active) {
649
+ > a:not(.button) {
650
+ background: $topbar-dropdown-link-bg;
651
+ color: $topbar-dropdown-link-color;
652
+ }
653
+
654
+ &:hover > a:not(.button) {
655
+ background-color: $topbar-link-bg-color-hover;
656
+ color: $topbar-dropdown-link-color-hover;
657
+ @if ($topbar-dropdown-link-bg-hover) {
658
+ background: $topbar-dropdown-link-bg-hover;
659
+ }
660
+ }
661
+ }
662
+
663
+ label {
664
+ background: $topbar-dropdown-label-bg;
665
+ white-space: nowrap;
666
+ }
667
+
668
+ // Second Level Dropdowns
669
+ .dropdown {
670
+ #{$default-float}: 100%;
671
+ top: 0;
672
+ }
673
+ }
674
+ }
675
+
676
+ > ul > .divider,
677
+ > ul > [role="separator"] {
678
+ border-#{$opposite-direction}: $topbar-divider-border-bottom;
679
+ border-bottom: none;
680
+ border-top: none;
681
+ clear: none;
682
+ height: $topbar-height;
683
+ width: 0;
684
+ }
685
+
686
+ .has-form {
687
+ background: $topbar-link-bg;
688
+ height: $topbar-height;
689
+ padding: 0 $topbar-link-padding;
690
+ }
691
+
692
+ // Position overrides for ul.right and ul.left
693
+ .#{$opposite-direction} {
694
+ li .dropdown {
695
+ #{$default-float}: auto;
696
+ #{$opposite-direction}: 0;
697
+
698
+ li .dropdown { #{$opposite-direction}: 100%; }
699
+ }
700
+ }
701
+ .#{$default-float} {
702
+ li .dropdown {
703
+ #{$opposite-direction}: auto;
704
+ #{$default-float}: 0;
705
+
706
+ li .dropdown { #{$default-float}: 100%; }
707
+ }
708
+ }
709
+ }
710
+
711
+ // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
712
+ // background & text color on hover.
713
+ .no-js .top-bar-section {
714
+ ul li {
715
+ // Apply the hover link color when it has that class
716
+ &:hover > a {
717
+ background-color: $topbar-link-bg-color-hover;
718
+ @if ($topbar-link-bg-hover) {
719
+ background: $topbar-link-bg-hover;
720
+ }
721
+ color: $topbar-link-color-hover;
722
+ }
723
+
724
+ // Apply the active link color when it has that class
725
+ &:active > a {
726
+ background: $topbar-link-bg-active;
727
+ color: $topbar-link-color-active;
728
+ }
729
+ }
730
+
731
+ .has-dropdown {
732
+ &:hover {
733
+ > .dropdown {
734
+ @include topbar-show-dropdown();
735
+ }
736
+ }
737
+
738
+ > a:focus + .dropdown {
739
+ @include topbar-show-dropdown();
740
+ }
741
+ }
742
+ }
743
+ }
744
+ }
745
+ }