federalist-basic-report-theme 0.1.0 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (251) hide show
  1. checksums.yaml +5 -5
  2. data/README.md +13 -0
  3. data/_sass/uswds/_all.scss +1 -0
  4. data/_sass/uswds/components/_accordions.scss +150 -0
  5. data/_sass/uswds/components/_alerts.scss +128 -0
  6. data/_sass/uswds/components/_banner.scss +203 -0
  7. data/_sass/uswds/components/_footer.scss +522 -0
  8. data/_sass/uswds/components/_forms.scss +156 -0
  9. data/_sass/uswds/components/_graphic-list.scss +35 -0
  10. data/_sass/uswds/components/_header.scss +216 -0
  11. data/_sass/uswds/components/_hero.scss +37 -0
  12. data/_sass/uswds/components/_layout.scss +36 -0
  13. data/_sass/uswds/components/_media-block.scss +12 -0
  14. data/_sass/uswds/components/_navigation.scss +561 -0
  15. data/_sass/uswds/components/_search.scss +111 -0
  16. data/_sass/uswds/components/_section.scss +37 -0
  17. data/_sass/uswds/components/_sidenav.scss +31 -0
  18. data/_sass/uswds/components/_skipnav.scss +19 -0
  19. data/_sass/uswds/core/_base.scss +36 -0
  20. data/_sass/uswds/core/_defaults.scss +8 -0
  21. data/_sass/uswds/core/_fonts.scss +65 -0
  22. data/_sass/uswds/core/_grid-settings.scss +3 -0
  23. data/_sass/uswds/core/_grid.scss +198 -0
  24. data/_sass/uswds/core/_utilities.scss +252 -0
  25. data/_sass/uswds/core/_variables-vendor.scss +12 -0
  26. data/_sass/uswds/core/_variables.scss +159 -0
  27. data/_sass/uswds/elements/_buttons.scss +217 -0
  28. data/_sass/uswds/elements/_embed.scss +26 -0
  29. data/_sass/uswds/elements/_figure.scss +13 -0
  30. data/_sass/uswds/elements/_inputs.scss +368 -0
  31. data/_sass/uswds/elements/_labels.scss +20 -0
  32. data/_sass/uswds/elements/_list.scss +32 -0
  33. data/_sass/uswds/elements/_table.scss +55 -0
  34. data/_sass/uswds/elements/_typography.scss +240 -0
  35. data/_sass/uswds/lib/_bourbon-deprecated-upcoming.scss +411 -0
  36. data/_sass/uswds/lib/_bourbon.scss +87 -0
  37. data/_sass/uswds/lib/_neat-helpers.scss +11 -0
  38. data/_sass/uswds/lib/_neat.scss +23 -0
  39. data/_sass/uswds/lib/_normalize.scss +424 -0
  40. data/_sass/uswds/lib/addons/_border-color.scss +26 -0
  41. data/_sass/uswds/lib/addons/_border-radius.scss +48 -0
  42. data/_sass/uswds/lib/addons/_border-style.scss +25 -0
  43. data/_sass/uswds/lib/addons/_border-width.scss +25 -0
  44. data/_sass/uswds/lib/addons/_buttons.scss +64 -0
  45. data/_sass/uswds/lib/addons/_clearfix.scss +25 -0
  46. data/_sass/uswds/lib/addons/_ellipsis.scss +30 -0
  47. data/_sass/uswds/lib/addons/_font-stacks.scss +31 -0
  48. data/_sass/uswds/lib/addons/_hide-text.scss +27 -0
  49. data/_sass/uswds/lib/addons/_margin.scss +26 -0
  50. data/_sass/uswds/lib/addons/_padding.scss +26 -0
  51. data/_sass/uswds/lib/addons/_position.scss +48 -0
  52. data/_sass/uswds/lib/addons/_prefixer.scss +66 -0
  53. data/_sass/uswds/lib/addons/_retina-image.scss +25 -0
  54. data/_sass/uswds/lib/addons/_size.scss +51 -0
  55. data/_sass/uswds/lib/addons/_text-inputs.scss +113 -0
  56. data/_sass/uswds/lib/addons/_timing-functions.scss +34 -0
  57. data/_sass/uswds/lib/addons/_triangle.scss +63 -0
  58. data/_sass/uswds/lib/addons/_word-wrap.scss +29 -0
  59. data/_sass/uswds/lib/css3/_animation.scss +43 -0
  60. data/_sass/uswds/lib/css3/_appearance.scss +3 -0
  61. data/_sass/uswds/lib/css3/_backface-visibility.scss +3 -0
  62. data/_sass/uswds/lib/css3/_background-image.scss +42 -0
  63. data/_sass/uswds/lib/css3/_background.scss +55 -0
  64. data/_sass/uswds/lib/css3/_border-image.scss +59 -0
  65. data/_sass/uswds/lib/css3/_calc.scss +4 -0
  66. data/_sass/uswds/lib/css3/_columns.scss +47 -0
  67. data/_sass/uswds/lib/css3/_filter.scss +4 -0
  68. data/_sass/uswds/lib/css3/_flex-box.scss +287 -0
  69. data/_sass/uswds/lib/css3/_font-face.scss +24 -0
  70. data/_sass/uswds/lib/css3/_font-feature-settings.scss +4 -0
  71. data/_sass/uswds/lib/css3/_hidpi-media-query.scss +10 -0
  72. data/_sass/uswds/lib/css3/_hyphens.scss +4 -0
  73. data/_sass/uswds/lib/css3/_image-rendering.scss +14 -0
  74. data/_sass/uswds/lib/css3/_keyframes.scss +36 -0
  75. data/_sass/uswds/lib/css3/_linear-gradient.scss +38 -0
  76. data/_sass/uswds/lib/css3/_perspective.scss +8 -0
  77. data/_sass/uswds/lib/css3/_placeholder.scss +8 -0
  78. data/_sass/uswds/lib/css3/_radial-gradient.scss +39 -0
  79. data/_sass/uswds/lib/css3/_selection.scss +42 -0
  80. data/_sass/uswds/lib/css3/_text-decoration.scss +19 -0
  81. data/_sass/uswds/lib/css3/_transform.scss +15 -0
  82. data/_sass/uswds/lib/css3/_transition.scss +71 -0
  83. data/_sass/uswds/lib/css3/_user-select.scss +3 -0
  84. data/_sass/uswds/lib/functions/_assign-inputs.scss +11 -0
  85. data/_sass/uswds/lib/functions/_contains-falsy.scss +20 -0
  86. data/_sass/uswds/lib/functions/_contains.scss +26 -0
  87. data/_sass/uswds/lib/functions/_is-length.scss +11 -0
  88. data/_sass/uswds/lib/functions/_is-light.scss +21 -0
  89. data/_sass/uswds/lib/functions/_is-number.scss +11 -0
  90. data/_sass/uswds/lib/functions/_is-size.scss +13 -0
  91. data/_sass/uswds/lib/functions/_modular-scale.scss +69 -0
  92. data/_sass/uswds/lib/functions/_new-breakpoint.scss +49 -0
  93. data/_sass/uswds/lib/functions/_private.scss +114 -0
  94. data/_sass/uswds/lib/functions/_px-to-em.scss +13 -0
  95. data/_sass/uswds/lib/functions/_px-to-rem.scss +15 -0
  96. data/_sass/uswds/lib/functions/_shade.scss +24 -0
  97. data/_sass/uswds/lib/functions/_strip-units.scss +17 -0
  98. data/_sass/uswds/lib/functions/_tint.scss +24 -0
  99. data/_sass/uswds/lib/functions/_transition-property-name.scss +22 -0
  100. data/_sass/uswds/lib/functions/_unpack.scss +27 -0
  101. data/_sass/uswds/lib/grid/_box-sizing.scss +15 -0
  102. data/_sass/uswds/lib/grid/_direction-context.scss +33 -0
  103. data/_sass/uswds/lib/grid/_display-context.scss +28 -0
  104. data/_sass/uswds/lib/grid/_fill-parent.scss +22 -0
  105. data/_sass/uswds/lib/grid/_media.scss +92 -0
  106. data/_sass/uswds/lib/grid/_omega.scss +87 -0
  107. data/_sass/uswds/lib/grid/_outer-container.scss +34 -0
  108. data/_sass/uswds/lib/grid/_pad.scss +25 -0
  109. data/_sass/uswds/lib/grid/_private.scss +35 -0
  110. data/_sass/uswds/lib/grid/_row.scss +52 -0
  111. data/_sass/uswds/lib/grid/_shift.scss +50 -0
  112. data/_sass/uswds/lib/grid/_span-columns.scss +94 -0
  113. data/_sass/uswds/lib/grid/_to-deprecate.scss +97 -0
  114. data/_sass/uswds/lib/grid/_visual-grid.scss +42 -0
  115. data/_sass/uswds/lib/helpers/_convert-units.scss +21 -0
  116. data/_sass/uswds/lib/helpers/_directional-values.scss +96 -0
  117. data/_sass/uswds/lib/helpers/_font-source-declaration.scss +43 -0
  118. data/_sass/uswds/lib/helpers/_gradient-positions-parser.scss +13 -0
  119. data/_sass/uswds/lib/helpers/_linear-angle-parser.scss +25 -0
  120. data/_sass/uswds/lib/helpers/_linear-gradient-parser.scss +41 -0
  121. data/_sass/uswds/lib/helpers/_linear-positions-parser.scss +61 -0
  122. data/_sass/uswds/lib/helpers/_linear-side-corner-parser.scss +31 -0
  123. data/_sass/uswds/lib/helpers/_radial-arg-parser.scss +69 -0
  124. data/_sass/uswds/lib/helpers/_radial-gradient-parser.scss +50 -0
  125. data/_sass/uswds/lib/helpers/_radial-positions-parser.scss +18 -0
  126. data/_sass/uswds/lib/helpers/_render-gradients.scss +26 -0
  127. data/_sass/uswds/lib/helpers/_shape-size-stripper.scss +10 -0
  128. data/_sass/uswds/lib/helpers/_str-to-num.scss +50 -0
  129. data/_sass/uswds/lib/mixins/_clearfix.scss +25 -0
  130. data/_sass/uswds/lib/settings/_asset-pipeline.scss +7 -0
  131. data/_sass/uswds/lib/settings/_disable-warnings.scss +13 -0
  132. data/_sass/uswds/lib/settings/_grid.scss +51 -0
  133. data/_sass/uswds/lib/settings/_prefixer.scss +9 -0
  134. data/_sass/uswds/lib/settings/_px-to-em.scss +1 -0
  135. data/_sass/uswds/lib/settings/_visual-grid.scss +27 -0
  136. data/_sass/uswds/uswds.scss +42 -0
  137. data/assets/uswds/fonts/merriweather-bold-webfont.eot +0 -0
  138. data/assets/uswds/fonts/merriweather-bold-webfont.ttf +0 -0
  139. data/assets/uswds/fonts/merriweather-bold-webfont.woff +0 -0
  140. data/assets/uswds/fonts/merriweather-bold-webfont.woff2 +0 -0
  141. data/assets/uswds/fonts/merriweather-italic-webfont.eot +0 -0
  142. data/assets/uswds/fonts/merriweather-italic-webfont.ttf +0 -0
  143. data/assets/uswds/fonts/merriweather-italic-webfont.woff +0 -0
  144. data/assets/uswds/fonts/merriweather-italic-webfont.woff2 +0 -0
  145. data/assets/uswds/fonts/merriweather-light-webfont.eot +0 -0
  146. data/assets/uswds/fonts/merriweather-light-webfont.ttf +0 -0
  147. data/assets/uswds/fonts/merriweather-light-webfont.woff +0 -0
  148. data/assets/uswds/fonts/merriweather-light-webfont.woff2 +0 -0
  149. data/assets/uswds/fonts/merriweather-regular-webfont.eot +0 -0
  150. data/assets/uswds/fonts/merriweather-regular-webfont.ttf +0 -0
  151. data/assets/uswds/fonts/merriweather-regular-webfont.woff +0 -0
  152. data/assets/uswds/fonts/merriweather-regular-webfont.woff2 +0 -0
  153. data/assets/uswds/fonts/sourcesanspro-bold-webfont.eot +0 -0
  154. data/assets/uswds/fonts/sourcesanspro-bold-webfont.ttf +0 -0
  155. data/assets/uswds/fonts/sourcesanspro-bold-webfont.woff +0 -0
  156. data/assets/uswds/fonts/sourcesanspro-bold-webfont.woff2 +0 -0
  157. data/assets/uswds/fonts/sourcesanspro-italic-webfont.eot +0 -0
  158. data/assets/uswds/fonts/sourcesanspro-italic-webfont.ttf +0 -0
  159. data/assets/uswds/fonts/sourcesanspro-italic-webfont.woff +0 -0
  160. data/assets/uswds/fonts/sourcesanspro-italic-webfont.woff2 +0 -0
  161. data/assets/uswds/fonts/sourcesanspro-light-webfont.eot +0 -0
  162. data/assets/uswds/fonts/sourcesanspro-light-webfont.ttf +0 -0
  163. data/assets/uswds/fonts/sourcesanspro-light-webfont.woff +0 -0
  164. data/assets/uswds/fonts/sourcesanspro-light-webfont.woff2 +0 -0
  165. data/assets/uswds/fonts/sourcesanspro-regular-webfont.eot +0 -0
  166. data/assets/uswds/fonts/sourcesanspro-regular-webfont.ttf +0 -0
  167. data/assets/uswds/fonts/sourcesanspro-regular-webfont.woff +0 -0
  168. data/assets/uswds/fonts/sourcesanspro-regular-webfont.woff2 +0 -0
  169. data/assets/uswds/img/alerts/error.png +0 -0
  170. data/assets/uswds/img/alerts/error.svg +17 -0
  171. data/assets/uswds/img/alerts/info.png +0 -0
  172. data/assets/uswds/img/alerts/info.svg +18 -0
  173. data/assets/uswds/img/alerts/success.png +0 -0
  174. data/assets/uswds/img/alerts/success.svg +12 -0
  175. data/assets/uswds/img/alerts/warning.png +0 -0
  176. data/assets/uswds/img/alerts/warning.svg +16 -0
  177. data/assets/uswds/img/angle-arrow-down-hover.png +0 -0
  178. data/assets/uswds/img/angle-arrow-down-hover.svg +1 -0
  179. data/assets/uswds/img/angle-arrow-down-primary-hover.png +0 -0
  180. data/assets/uswds/img/angle-arrow-down-primary-hover.svg +1 -0
  181. data/assets/uswds/img/angle-arrow-down-primary.png +0 -0
  182. data/assets/uswds/img/angle-arrow-down-primary.svg +1 -0
  183. data/assets/uswds/img/angle-arrow-down.png +0 -0
  184. data/assets/uswds/img/angle-arrow-down.svg +1 -0
  185. data/assets/uswds/img/angle-arrow-up-primary-hover.png +0 -0
  186. data/assets/uswds/img/angle-arrow-up-primary-hover.svg +1 -0
  187. data/assets/uswds/img/angle-arrow-up-primary.png +0 -0
  188. data/assets/uswds/img/angle-arrow-up-primary.svg +1 -0
  189. data/assets/uswds/img/arrow-both.png +0 -0
  190. data/assets/uswds/img/arrow-both.svg +1 -0
  191. data/assets/uswds/img/arrow-down.png +0 -0
  192. data/assets/uswds/img/arrow-down.svg +1 -0
  193. data/assets/uswds/img/arrow-right.png +0 -0
  194. data/assets/uswds/img/arrow-right.svg +1 -0
  195. data/assets/uswds/img/circle-124.png +0 -0
  196. data/assets/uswds/img/close-primary.png +0 -0
  197. data/assets/uswds/img/close-primary.svg +16 -0
  198. data/assets/uswds/img/close.png +0 -0
  199. data/assets/uswds/img/close.svg +12 -0
  200. data/assets/uswds/img/correct8.png +0 -0
  201. data/assets/uswds/img/correct8.svg +1 -0
  202. data/assets/uswds/img/correct9.png +0 -0
  203. data/assets/uswds/img/correct9.svg +1 -0
  204. data/assets/uswds/img/external-link-alt-hover.png +0 -0
  205. data/assets/uswds/img/external-link-alt-hover.svg +1 -0
  206. data/assets/uswds/img/external-link-alt.png +0 -0
  207. data/assets/uswds/img/external-link-alt.svg +1 -0
  208. data/assets/uswds/img/external-link-hover.png +0 -0
  209. data/assets/uswds/img/external-link-hover.svg +1 -0
  210. data/assets/uswds/img/external-link.png +0 -0
  211. data/assets/uswds/img/external-link.svg +1 -0
  212. data/assets/uswds/img/favicons/favicon-114.png +0 -0
  213. data/assets/uswds/img/favicons/favicon-144.png +0 -0
  214. data/assets/uswds/img/favicons/favicon-16.png +0 -0
  215. data/assets/uswds/img/favicons/favicon-192.png +0 -0
  216. data/assets/uswds/img/favicons/favicon-40.png +0 -0
  217. data/assets/uswds/img/favicons/favicon-57.png +0 -0
  218. data/assets/uswds/img/favicons/favicon-72.png +0 -0
  219. data/assets/uswds/img/favicons/favicon.ico +0 -0
  220. data/assets/uswds/img/favicons/favicon.png +0 -0
  221. data/assets/uswds/img/hero.png +0 -0
  222. data/assets/uswds/img/icon-dot-gov.svg +1 -0
  223. data/assets/uswds/img/icon-https.svg +1 -0
  224. data/assets/uswds/img/logo-img.png +0 -0
  225. data/assets/uswds/img/minus-alt.png +0 -0
  226. data/assets/uswds/img/minus-alt.svg +1 -0
  227. data/assets/uswds/img/minus.png +0 -0
  228. data/assets/uswds/img/minus.svg +1 -0
  229. data/assets/uswds/img/plus-alt.png +0 -0
  230. data/assets/uswds/img/plus-alt.svg +1 -0
  231. data/assets/uswds/img/plus.png +0 -0
  232. data/assets/uswds/img/plus.svg +1 -0
  233. data/assets/uswds/img/search-alt.png +0 -0
  234. data/assets/uswds/img/search-alt.svg +1 -0
  235. data/assets/uswds/img/search-primary.png +0 -0
  236. data/assets/uswds/img/search-primary.svg +12 -0
  237. data/assets/uswds/img/search.png +0 -0
  238. data/assets/uswds/img/search.svg +1 -0
  239. data/assets/uswds/img/social-icons/png/facebook25.png +0 -0
  240. data/assets/uswds/img/social-icons/png/rss25.png +0 -0
  241. data/assets/uswds/img/social-icons/png/twitter16.png +0 -0
  242. data/assets/uswds/img/social-icons/png/youtube15.png +0 -0
  243. data/assets/uswds/img/social-icons/svg/facebook25.svg +1 -0
  244. data/assets/uswds/img/social-icons/svg/rss25.svg +1 -0
  245. data/assets/uswds/img/social-icons/svg/twitter16.svg +1 -0
  246. data/assets/uswds/img/social-icons/svg/youtube15.svg +1 -0
  247. data/assets/uswds/img/us_flag_small.png +0 -0
  248. data/assets/uswds/js/uswds.js +1930 -0
  249. data/assets/uswds/js/uswds.min.js +2 -0
  250. data/assets/uswds/js/uswds.min.js.map +1 -0
  251. metadata +251 -3
@@ -0,0 +1,12 @@
1
+ @mixin media-block-img($margin-right: 1rem) {
2
+ float: left;
3
+ margin-right: $margin-right;
4
+ }
5
+
6
+ .usa-media_block-img {
7
+ @include media-block-img;
8
+ }
9
+
10
+ .usa-media_block-body {
11
+ overflow: hidden;
12
+ }
@@ -0,0 +1,561 @@
1
+ // Header navigation ------------- //
2
+
3
+ @mixin nav-border {
4
+ border-bottom: 0.4rem solid $color-primary;
5
+ padding-bottom: 0.6rem;
6
+ }
7
+
8
+ @mixin nav-border-thick {
9
+ border-bottom: 0.7rem solid $color-primary;
10
+ padding-bottom: 0.9rem;
11
+ }
12
+
13
+ .usa-navbar {
14
+ border-bottom: 1px solid $color-gray-light;
15
+ height: 4rem;
16
+
17
+ @include media($nav-width) {
18
+ border-bottom: none;
19
+ display: inline-block;
20
+ height: 7.8rem; // XXX magic number
21
+ }
22
+ }
23
+
24
+ .usa-nav-link {
25
+ @include font-smoothing;
26
+
27
+ &:hover {
28
+ span {
29
+ @include media($nav-width) {
30
+ @include nav-border;
31
+ }
32
+ }
33
+ }
34
+
35
+ &.usa-accordion-button {
36
+ span {
37
+ @include media($nav-width) {
38
+ margin-right: 0;
39
+ padding-right: 1.5rem;
40
+ }
41
+ }
42
+ }
43
+ }
44
+
45
+ .usa-nav-container {
46
+ @include media($nav-width) {
47
+ @include outer-container($site-max-width);
48
+ @include padding(null $site-margins);
49
+ }
50
+ }
51
+
52
+ .usa-nav {
53
+ $sliding-panel-width: 26rem;
54
+
55
+ @keyframes slidein-left {
56
+ from {
57
+ transform: translateX($sliding-panel-width);
58
+ }
59
+
60
+ to {
61
+ transform: translateX(0);
62
+ }
63
+ }
64
+
65
+ @include position(fixed, 0 0 0 auto);
66
+ background: $color-white;
67
+ border-left: 1px solid $color-gray-light;
68
+ border-right: 0;
69
+ display: none;
70
+ flex-direction: column;
71
+ overflow-y: auto;
72
+ padding: 2rem;
73
+ width: $sliding-panel-width;
74
+ z-index: $z-index-nav;
75
+
76
+ @include media($nav-width) {
77
+ @include padding(4.5rem 0 0 null);
78
+ border-left: none;
79
+ display: block;
80
+ float: right;
81
+ overflow-y: visible;
82
+ position: relative;
83
+ transform: translateX(0);
84
+ width: auto;
85
+ }
86
+
87
+ &.is-visible {
88
+ animation: slidein-left 0.3s ease-in-out;
89
+ display: flex;
90
+ }
91
+
92
+ nav {
93
+ margin-top: 6rem; // XXX magic number
94
+ min-height: 100%;
95
+
96
+ @include media($nav-width) {
97
+ margin-top: 0;
98
+ }
99
+ }
100
+
101
+ .usa-current {
102
+ border-left: 4px solid $color-primary;
103
+ color: $color-primary;
104
+ font-weight: $font-bold;
105
+ padding-left: 1.4rem;
106
+
107
+ @include media($nav-width) {
108
+ color: $color-base;
109
+ }
110
+ }
111
+
112
+ .usa-button {
113
+ width: 100%;
114
+ }
115
+
116
+ .usa-search {
117
+ @include media($nav-width) {
118
+ margin-left: 1.5rem; // XXX magic number
119
+ top: 4px;
120
+ }
121
+ }
122
+ }
123
+
124
+ // Primary navigation ------------- //
125
+
126
+ .usa-nav-primary {
127
+ @include usa-sidenav-list;
128
+ margin-top: 1.5rem;
129
+ order: 2;
130
+
131
+ @include media($nav-width) {
132
+ display: inline;
133
+ }
134
+
135
+ li {
136
+ @include media($nav-width) {
137
+ border-top: none;
138
+ }
139
+ }
140
+
141
+ > li {
142
+ width: auto;
143
+
144
+ @include media($nav-width) {
145
+ display: inline-block;
146
+ // margin-left: -4px;
147
+ }
148
+
149
+ > a {
150
+ @include media($nav-width) {
151
+ @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
152
+ color: $color-gray;
153
+ font-size: $h5-font-size;
154
+ font-weight: $font-bold;
155
+ line-height: 1;
156
+ }
157
+
158
+ &:hover {
159
+ @include media($nav-width) {
160
+ background-color: transparent;
161
+ }
162
+ }
163
+ }
164
+ }
165
+
166
+ a {
167
+ @include media($nav-width) {
168
+ @include padding(0.75rem null);
169
+ }
170
+
171
+ &:hover {
172
+ @include media($nav-width) {
173
+ // color: $color-base;
174
+ }
175
+ }
176
+ }
177
+
178
+ button {
179
+ $button-vertical-offset: 40%;
180
+
181
+ @include button-unstyled;
182
+ @include font-smoothing;
183
+ font-weight: $font-normal;
184
+ line-height: 1.3;
185
+ padding: 0.85rem 1.5rem 0.85rem 1.8rem;
186
+
187
+ @include media($nav-width) {
188
+ @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
189
+ color: $color-gray;
190
+ font-size: $h5-font-size;
191
+ font-weight: $font-bold;
192
+ line-height: 1;
193
+ width: initial;
194
+ }
195
+
196
+ &:focus,
197
+ &:active {
198
+ box-shadow: $focus-outline;
199
+ }
200
+
201
+ &:hover {
202
+ background-color: $color-gray-lightest;
203
+ color: $color-primary;
204
+
205
+ @include media($nav-width) {
206
+ background-color: transparent;
207
+ // color: $color-base;
208
+ }
209
+ }
210
+
211
+ &[aria-expanded=false] { /* stylelint-disable-line selector-no-qualifying-type */
212
+ background-image: url('#{$image-path}/plus-alt.png');
213
+ background-image: url('#{$image-path}/plus-alt.svg');
214
+ background-repeat: no-repeat;
215
+ background-position: right 0 center;
216
+ background-size: 1rem;
217
+
218
+ @include media($nav-width) {
219
+ background-image: url('#{$image-path}/angle-arrow-down.png');
220
+ background-image: url('#{$image-path}/angle-arrow-down.svg');
221
+ background-position: right 1.5rem top $button-vertical-offset;
222
+ }
223
+
224
+ &:hover {
225
+ @include media($nav-width) {
226
+ background-image: url('#{$image-path}/angle-arrow-down-primary.png');
227
+ background-image: url('#{$image-path}/angle-arrow-down-primary.svg');
228
+ }
229
+ }
230
+ }
231
+
232
+ &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
233
+ background-image: url('#{$image-path}/minus-alt.png');
234
+ background-image: url('#{$image-path}/minus-alt.svg');
235
+ background-repeat: no-repeat;
236
+ background-position: right 0 center;
237
+ background-size: 1rem;
238
+
239
+ @include media($nav-width) {
240
+ background-color: $color-primary-darkest;
241
+ color: $color-white;
242
+ background-image: url('#{$image-path}/angle-arrow-down-hover.png');
243
+ background-image: url('#{$image-path}/angle-arrow-down-hover.svg');
244
+ background-position: right 1.5rem top $button-vertical-offset;
245
+
246
+ &:hover {
247
+ background-color: $color-primary-darkest;
248
+ }
249
+
250
+ span {
251
+ @include nav-border;
252
+ color: $color-white;
253
+ }
254
+ }
255
+ }
256
+ }
257
+
258
+ @include media($nav-width) {
259
+ a.usa-current,
260
+ .usa-current { // stylelint-disable-line selector-no-qualifying-type
261
+ // undo the sidenav style
262
+ border-left: 0;
263
+ padding-left: 1.5rem;
264
+
265
+ &:hover {
266
+ span {
267
+ color: $color-primary;
268
+ }
269
+ }
270
+
271
+ span {
272
+ @include nav-border;
273
+ color: $color-base;
274
+ }
275
+ }
276
+ }
277
+ }
278
+
279
+ // Extended header navigation ------- //
280
+
281
+ .usa-header-extended {
282
+ .usa-nav-link {
283
+ &:hover {
284
+ span {
285
+ @include media($nav-width) {
286
+ @include nav-border-thick;
287
+ }
288
+ }
289
+ }
290
+ }
291
+
292
+ .usa-nav-primary {
293
+ button[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
294
+ span {
295
+ @include media($nav-width) {
296
+ @include nav-border-thick;
297
+ }
298
+ }
299
+ }
300
+
301
+ .usa-current {
302
+ @include media($nav-width) {
303
+ span {
304
+ @include nav-border-thick;
305
+ }
306
+ }
307
+ }
308
+ }
309
+ }
310
+
311
+ // Secondary navigation ----------- //
312
+
313
+ .usa-nav-secondary {
314
+ margin-top: 1.5rem;
315
+
316
+ @include media($nav-width) {
317
+ margin-top: 0;
318
+ position: absolute;
319
+ right: $site-margins;
320
+ top: -5.7rem; // XXX magic number
321
+ }
322
+
323
+ .usa-search {
324
+ @include margin(1.5rem null 0 null);
325
+
326
+ @include media($nav-width) {
327
+ @include margin(-0.9rem null 0 0);
328
+ float: left;
329
+ }
330
+ }
331
+ }
332
+
333
+ .usa-nav-secondary-links {
334
+ margin-top: 2.4rem;
335
+
336
+ @include media($nav-width) {
337
+ float: left;
338
+ margin-top: 0;
339
+ }
340
+
341
+ li {
342
+ @include media($nav-width) {
343
+ display: inline;
344
+ padding-left: 0.5rem;
345
+ }
346
+
347
+ &:not(:last-child)::after {
348
+ @include media($nav-width) {
349
+ color: $color-gray-lighter;
350
+ content: '|';
351
+ padding-left: 0.5rem;
352
+ }
353
+ }
354
+ }
355
+
356
+ a,
357
+ .usa-header-search-button {
358
+ color: $color-gray;
359
+ display: inline-block;
360
+ font-size: $h5-font-size;
361
+ text-decoration: none;
362
+
363
+ &:hover {
364
+ color: $color-primary;
365
+ text-decoration: underline;
366
+ }
367
+ }
368
+
369
+ .usa-header-search-button {
370
+ @include button-unstyled;
371
+ display: none;
372
+
373
+ @include media($nav-width) {
374
+ background-image: url('#{$image-path}/search-alt.png');
375
+ background-image: url('#{$image-path}/search-alt.svg');
376
+ background-repeat: no-repeat;
377
+ background-position: left center;
378
+ background-size: 2.2rem;
379
+ display: inline-block;
380
+ padding-left: 2.3rem;
381
+ }
382
+
383
+ &.is-hidden {
384
+ @include media($nav-width) {
385
+ display: none;
386
+ }
387
+ }
388
+ }
389
+
390
+ @include media($nav-width) {
391
+ a.usa-current { // stylelint-disable-line selector-no-qualifying-type
392
+ // undo the sidenav style
393
+ border-left: 0;
394
+ padding-left: 0;
395
+ }
396
+ }
397
+ }
398
+
399
+ // Navigation submenu (dropdown and mega menu) ----- //
400
+
401
+ .usa-nav-submenu {
402
+ @include usa-sidenav-sublist;
403
+
404
+ @include media($nav-width) {
405
+ @include unstyled-list;
406
+ @include padding(0.75rem null 0.9rem null);
407
+ background-color: $color-primary-darkest;
408
+ width: 21.5rem;
409
+ position: absolute;
410
+ }
411
+
412
+ &[aria-hidden=true] {
413
+ display: none;
414
+ }
415
+
416
+ a {
417
+ @include media($nav-width) {
418
+ color: $color-white;
419
+ padding-left: 1.5rem; // XXX magic number
420
+ }
421
+
422
+ &:hover {
423
+ @include media($nav-width) {
424
+ background-color: $color-primary-darkest;
425
+ color: $color-white;
426
+ padding-left: 1.5rem;
427
+ text-decoration: underline;
428
+ }
429
+ }
430
+
431
+ // this used to be necessary to undo the `usa-sidenav-sublist`
432
+ // include, above
433
+ // &:hover,
434
+ // &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
435
+ // @include media($nav-width) {
436
+ // padding-left: 1.8rem;
437
+ // }
438
+ // }
439
+ }
440
+
441
+ li {
442
+ font-size: $h5-font-size;
443
+ margin-bottom: 0;
444
+ }
445
+ }
446
+
447
+ // Navigation close button -------- //
448
+
449
+ .usa-nav-close {
450
+ @include button-unstyled;
451
+ @include margin(-1.2rem -1.5rem 1.5rem auto);
452
+ color: currentColor;
453
+ float: right;
454
+ height: $hit-area;
455
+ text-align: center;
456
+ width: $hit-area;
457
+
458
+ &:hover {
459
+ color: currentColor;
460
+ }
461
+
462
+ @include media($nav-width) {
463
+ display: none;
464
+ }
465
+
466
+ img {
467
+ width: 1.3rem;
468
+ }
469
+
470
+ + * {
471
+ clear: both;
472
+ }
473
+ }
474
+
475
+ .usa-mobile_nav-active {
476
+ overflow: hidden;
477
+ }
478
+
479
+ // Navigation mega menu -------- //
480
+
481
+ @mixin outer-megamenu {
482
+ background-color: $color-primary-darkest;
483
+ content: '';
484
+ display: block;
485
+ height: 100%;
486
+ position: absolute;
487
+ top: 0;
488
+ width: 1000%;
489
+ }
490
+
491
+ .usa-megamenu {
492
+ @include media($nav-width) {
493
+ @include padding(3.15rem null); // XXX magic number
494
+ // XXX this is the difference between the 2rem padding-left
495
+ // of .usa-nav-inner and the $site-margins (3rem) padding-left
496
+ // of .usa-megamenu
497
+ left: -1rem;
498
+ width: 100%;
499
+ }
500
+
501
+ &::before {
502
+ @include media($nav-width) {
503
+ @include outer-megamenu;
504
+ right: 100%;
505
+ }
506
+ }
507
+
508
+ &::after {
509
+ @include media($nav-width) {
510
+ @include outer-megamenu;
511
+ left: 100%;
512
+ }
513
+ }
514
+ }
515
+
516
+ .usa-header-basic-megamenu {
517
+ .usa-nav {
518
+ @include media($nav-width) {
519
+ padding-left: 0;
520
+ padding-top: 0;
521
+ width: 100%;
522
+ }
523
+ }
524
+
525
+ .usa-nav-inner {
526
+ display: flex;
527
+ flex-direction: column;
528
+
529
+ @include media($nav-width) {
530
+ display: block;
531
+ float: right;
532
+ margin-top: -3.8rem;
533
+ }
534
+ }
535
+
536
+ .usa-nav-submenu {
537
+ .usa-grid-full {
538
+ @include media($nav-width) {
539
+ margin-left: -1.8rem; // XXX magic number
540
+ }
541
+ }
542
+ }
543
+ }
544
+
545
+ .usa-megamenu-col {
546
+ @include media($nav-width) {
547
+ @include span-columns(3);
548
+
549
+ &:nth-child(2n) {
550
+ @include span-columns(3);
551
+ }
552
+
553
+ &:nth-child(4n) {
554
+ margin-right: 0;
555
+ }
556
+ }
557
+
558
+ > ul {
559
+ @include unstyled-list;
560
+ }
561
+ }