From dadb6b1f148ce7438e5d7594fef2cf8b9c75c623 Mon Sep 17 00:00:00 2001 From: astephanus <124592019+astephanus@users.noreply.github.com> Date: Tue, 7 Nov 2023 17:17:05 -0600 Subject: [PATCH] Redesigned top nav and footer (#5113) * Ports over redesigned top banner header navigation, and footer Signed-off-by: Aaron Stephanus * Adds style overrides for search functionality Signed-off-by: Aaron Stephanus * Adds Font Awesome for menu icons Signed-off-by: Aaron Stephanus * Adds style overrides and updated menu item configurations Signed-off-by: Aaron Stephanus * Adds whitespace to fix SASS style rule causing Github action failure Signed-off-by: Aaron Stephanus * Adds dynamic navigation submenu height determination for smooth expand/collapse transitions instead of hardcoded values potentiating effortless change management Signed-off-by: Aaron Stephanus * Removes outdated message about old version release Signed-off-by: Aaron Stephanus * Corrects padding, positioning, typography for the site footer Signed-off-by: Aaron Stephanus * Adds new footer logo Signed-off-by: Aaron Stephanus * Sets footer legal copy right padding on mobile to that of the scroll-to-top button Signed-off-by: Aaron Stephanus * Adds footer link styles Signed-off-by: Aaron Stephanus * Adjusts page layout to fit the new container width requirements Signed-off-by: Aaron Stephanus * Fixes mobile layout with new header and footer Signed-off-by: Aaron Stephanus * Fixes mobile navigation menu errors Signed-off-by: Aaron Stephanus * Adjusts padding Signed-off-by: Aaron Stephanus * Removes commented out code Signed-off-by: Aaron Stephanus * Updates top navigation menu items with latest from project site Signed-off-by: Aaron Stephanus --------- Signed-off-by: Aaron Stephanus Signed-off-by: astephanus <124592019+astephanus@users.noreply.github.com> --- _data/alert.yml | 2 +- _data/top_nav.yml | 48 +- _includes/footer.html | 101 +++- _includes/header.html | 133 ++++- _layouts/default.html | 336 +++++------ _sass/_font-awesome.scss | 17 + _sass/_nested-nav.scss | 258 ++++++-- _sass/custom/_custom-search.scss | 586 ++++++++++++++++++ _sass/custom/custom.scss | 721 +++++++++++++++-------- _sass/font-awesome/_bordered-pulled.scss | 16 + _sass/font-awesome/_core.scss | 11 + _sass/font-awesome/_fixed-width.scss | 6 + _sass/font-awesome/_icons.scss | 552 +++++++++++++++++ _sass/font-awesome/_larger.scss | 13 + _sass/font-awesome/_list.scss | 19 + _sass/font-awesome/_mixins.scss | 25 + _sass/font-awesome/_path.scss | 14 + _sass/font-awesome/_rotated-flipped.scss | 20 + _sass/font-awesome/_spinning.scss | 29 + _sass/font-awesome/_stacked.scss | 20 + _sass/font-awesome/_variables.scss | 561 ++++++++++++++++++ assets/js/header-nav.js | 6 +- 22 files changed, 2959 insertions(+), 535 deletions(-) create mode 100644 _sass/_font-awesome.scss create mode 100644 _sass/custom/_custom-search.scss create mode 100644 _sass/font-awesome/_bordered-pulled.scss create mode 100644 _sass/font-awesome/_core.scss create mode 100644 _sass/font-awesome/_fixed-width.scss create mode 100644 _sass/font-awesome/_icons.scss create mode 100644 _sass/font-awesome/_larger.scss create mode 100644 _sass/font-awesome/_list.scss create mode 100644 _sass/font-awesome/_mixins.scss create mode 100644 _sass/font-awesome/_path.scss create mode 100644 _sass/font-awesome/_rotated-flipped.scss create mode 100644 _sass/font-awesome/_spinning.scss create mode 100644 _sass/font-awesome/_stacked.scss create mode 100644 _sass/font-awesome/_variables.scss diff --git a/_data/alert.yml b/_data/alert.yml index 1d7747ecfa..2d9db03604 100644 --- a/_data/alert.yml +++ b/_data/alert.yml @@ -1 +1 @@ -message: "[OpenSearch 2.3 is live 🍾!](/downloads.html)" +message: false diff --git a/_data/top_nav.yml b/_data/top_nav.yml index a0b5aecc49..20b3f91366 100644 --- a/_data/top_nav.yml +++ b/_data/top_nav.yml @@ -1,26 +1,33 @@ items: - label: OpenSearchCon - fragment: opensearchcon + fragments: + - opensearchcon + - sessions + - speakers + - exhibitors + - workshops + - unconference + - opensearchcon2023-cfp children: - - label: Register for OpenSearchCon! - url: https://opensearchcon2023.splashthat.com + label: 2024 - Stay Informed + url: /events/opensearchcon/ - label: Sessions - url: /events/opensearchcon/sessions/index.html + url: /events/opensearchcon/sessions/ - label: Speakers - url: /events/opensearchcon/speakers/index.html + url: /events/opensearchcon/speakers/ - label: Exhibitors - url: /events/opensearchcon/exhibitors/index.html + url: /events/opensearchcon/exhibitors/ - label: Workshops - url: /events/opensearchcon/workshops/index.html + url: /events/opensearchcon/workshops/ - label: Unconference - url: /events/opensearchcon/unconference/index.html + url: /events/opensearchcon/unconference/ - label: CFP is closed url: /opensearchcon2023-cfp.html @@ -32,17 +39,19 @@ items: url: /downloads.html - label: About + url: /about.html fragments: - about - releases + - roadmap - faq children: - - - label: OpenSearch - url: /about.html - label: Releases url: /releases.html + - + label: Roadmap + url: https://github.com/orgs/opensearch-project/projects/1 - label: FAQ url: /faq @@ -79,8 +88,22 @@ items: url: /docs/ - label: Platform - fragment: platform + url: /platform/index.html + fragments: + - platform + - search + - observability + - security-analytics + - vector-database + - benchmarks children: + - label: Search + url: /platform/search/index.html + - label: Observability + url: /platform/observability/index.html + - + label: Security Analytics + url: /platform/security-analytics/index.html - label: Vector Database url: /platform/search/vector-database.html @@ -90,4 +113,3 @@ items: - label: Performance Benchmarks url: /benchmarks - diff --git a/_includes/footer.html b/_includes/footer.html index 16995615df..df6277a1a8 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,44 +1,83 @@
-
+

OpenSearch Links

- - {% for column in site.data.footer.columns %} -
- -

{{ column.title }}

- +
+
+ {% for column in site.data.footer.columns %} +
+

{{ column.title }}

+ +
+ {% endfor %}
- {% endfor %} - +
-
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + +
+
+
+ © OpenSearch contributors, {{ 'now' | date: "%Y" }}. OpenSearch is a registered trademark of Amazon Web Services.

+ {% if page.notice == true or layout.notice == true %} OpenSearch includes certain Apache-licensed Elasticsearch code from Elasticsearch B.V. and other source code. Elasticsearch B.V. is not the source of that other source code. ELASTICSEARCH is a registered trademark of Elasticsearch B.V.

{% endif %} - - - - - - -

© {{ 'now' | date: "%Y" }} - OpenSearch contributors. OpenSearch is a - registered trademark of Amazon Web Services.

- - © 2005-2021 - Django Software - Foundation and individual contributors. Django is a - registered - trademark of the Django Software Foundation.
- This website was forked from the BSD-licensed djangoproject.com originally designed by Threespot & andrevv.
We ♡ Django and the Django community. If you need a high-level Python framework, check it out. -

+ © 2005-2021 Django Software Foundation and individual contributors. Django is a + registered trademark of the Django Software Foundation.
+ This website was forked from the BSD-licensed djangoproject.com originally designed by Threespot & andrevv. +
+
+
diff --git a/_includes/header.html b/_includes/header.html index a9e8f3f3c0..e9184168a3 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -17,24 +17,56 @@
-
Menu
+
Menu
-
\ No newline at end of file +
+ diff --git a/_layouts/default.html b/_layouts/default.html index 32ff1130c4..25d51f6fde 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -47,204 +47,186 @@ {% include header.html %} - -
-
-
-
- - Documentation - -
- -
-
-
-

Documentation

- {% if site.search_enabled != false or site.use_custom_search == true %} -
-
- {% assign docs_version = site.data.versions.current %} - {% if site.baseurl == '/docs/latest' %} - {% assign docs_version = "latest" %} - {% endif %} - - - -
- {% if site.search_enabled != false %} -
- {% elsif site.use_custom_search == true %} -
+ {% endfor %} {% endif %} -
- {% endif %} +
-
-
-
-
- {% unless page.url == "/" %} - {% if page.parent %} - - {% endif %} - {% endunless %} -
- {% if site.heading_anchors != false %} - {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %} - {% else %} - {{ content }} - {% endif %} - - - - + +
+
+ {% unless page.url == "/" %} + {% if page.parent %} + + {% endif %} + {% endunless %} +
+ {% if site.heading_anchors != false %} + {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %} + {% else %} + {{ content }} + {% endif %} + + + + - {% if page.has_children == true and page.has_toc != false %} -
-

Related articles

-
    - {% for child in toc_list %} -
  • - {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %} -
    • - {% endfor %} -
- {% endif %} + {% if page.has_children == true and page.has_toc != false %} +
+

Related articles

+
    + {% for child in toc_list %} +
  • + {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %} +
    • + {% endfor %} +
+ {% endif %} - {% capture footer_custom %} - {%- include footer_custom.html -%} - {% endcapture %} - {% if footer_custom != "" or site.last_edit_timestamp or site.gh_edit_link %} -
-
- {% if site.back_to_top %} -

{{ site.back_to_top_text }}

- {% endif %} + {% capture footer_custom %} + {%- include footer_custom.html -%} + {% endcapture %} + {% if footer_custom != "" or site.last_edit_timestamp or site.gh_edit_link %} +
+
+ {% if site.back_to_top %} +

{{ site.back_to_top_text }}

+ {% endif %} - {{ footer_custom }} + {{ footer_custom }} - {% if site.last_edit_timestamp or site.gh_edit_link %} -
- {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %} -

- Page last modified: {{ page.last_modified_date | date: site.last_edit_time_format }}. -

- {% endif %} - {% if - site.gh_edit_link and - site.gh_edit_link_text and - site.gh_edit_repository and - site.gh_edit_branch and - site.gh_edit_view_mode - %} -

- {{ site.gh_edit_link_text }} -

- {% endif %} -
- {% endif %} -
- {% endif %} + {% if site.last_edit_timestamp or site.gh_edit_link %} +
+ {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %} +

+ Page last modified: {{ page.last_modified_date | date: site.last_edit_time_format }}. +

+ {% endif %} + {% if + site.gh_edit_link and + site.gh_edit_link_text and + site.gh_edit_repository and + site.gh_edit_branch and + site.gh_edit_view_mode + %} +

+ {{ site.gh_edit_link_text }} +

+ {% endif %} +
+ {% endif %} +
+ {% endif %} +
-
-
-
-
- {% include toc.html html=content h_min=2 h_max=2 class="toc-list" item_class="toc-item" sanitize=true %} +
+
+
+ {% include toc.html html=content h_min=2 h_max=2 class="toc-list" item_class="toc-item" sanitize=true %} +
+ {% include feedback.html %}
- {% include feedback.html %}
-
- {% if site.search_enabled != false %} - {% if site.search.button %} - - - + {% if site.search_enabled != false %} + {% if site.search.button %} + + + + {% endif %} {% endif %} - {% endif %} -
-
+
+ +
+ {% include footer.html %} {% if site.anchor_links != nil %} diff --git a/_sass/_font-awesome.scss b/_sass/_font-awesome.scss new file mode 100644 index 0000000000..0053fbf4fe --- /dev/null +++ b/_sass/_font-awesome.scss @@ -0,0 +1,17 @@ +/*! + * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */ + +@import "font-awesome/variables"; +@import "font-awesome/mixins"; +@import "font-awesome/path"; +@import "font-awesome/core"; +@import "font-awesome/larger"; +@import "font-awesome/fixed-width"; +@import "font-awesome/list"; +@import "font-awesome/bordered-pulled"; +@import "font-awesome/spinning"; +@import "font-awesome/rotated-flipped"; +@import "font-awesome/stacked"; +@import "font-awesome/icons"; diff --git a/_sass/_nested-nav.scss b/_sass/_nested-nav.scss index c6de88b547..3778c366ab 100644 --- a/_sass/_nested-nav.scss +++ b/_sass/_nested-nav.scss @@ -1,4 +1,142 @@ -@media screen and (min-width: 46.25rem) { +$primary-open-sky-t3: #E1F0F9; +$primary-open-sky-s2: #006D97; +$primary-open-sky-s1: #0085B8; +$nested-nav-mobile-breakpoint: $header-banner-mobile-breakpoint; +$nested-nav-desktop-min-width: $header-banner-min-width; +@mixin header-level3($color: $primary-open-sky-s1) { + color: $color; + font-family: 'Open Sans'; + font-size: 21px; + font-style: normal; + line-height: 36px; + font-weight: 700; +} +@mixin body-text($color: #000) { + color: $color; + font-family: 'Open Sans'; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 48px; +} +@mixin bottom-border-underline($color: $primary-pacific-blue) { + padding-top: 10px; + padding-bottom: 10px; + border-bottom: 2px solid $color; +} + +@media screen and (max-width: $nested-nav-mobile-breakpoint) { + [role="banner"]#top { + > .container { + padding: 0; + } + } + [role="banner"] [role="navigation"] { + margin-top: 0; + li { + margin-right: 0; + margin-left: 0; + margin-top: 0; + margin-bottom: 0; + a { + @include body-text; + color: $primary-open-sky-t3; + padding-left: 10px; + } + } + } + + [role="navigation"] .nested-nav { + > li { + padding-bottom: 20px; + padding-top: 15px; + border-bottom-color: $primary-open-sky-s2; + border-bottom-style: solid; + border-bottom-width: 2px; + > .nested-nav--top-menu-item-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex-wrap: nowrap; + padding: 0; + margin: 0; + border: none; + width: 100%; + &.nested-nav-top-menu-item--wrapper__has_children { + position: relative; + z-index: 10; + } + > .nested-nav--top-menu-item-wrapper--link { + flex-basis: calc(100% - 30px - 20px); + height: 30px; + flex-grow: 1; + flex-shrink: 1; + > a { + @include header-level3($primary-open-sky-t3); + padding-left: 10px; + } + } + > .nested-nav--top-menu-item-wrapper--toggle { + flex-basis: 50px; + width: 30px; + height: 30px; + padding: 0 20px 0 0; + flex-shrink: 0; + flex-grow: 0; + .opensearch-toggle-button--wrapper { + display: inline-block; + padding: 0; + margin: 0; + height: 30px; + width: 30px; + > .opensearch-toggle-button-link { + display: none; + padding: 0; + margin: 0; + height: 30px; + width: 30px; + &.opensearch-toggle-button-link__visible { + display: inline-block; + } + } + } + + } + &.nested-nav--top-menu-item--wrapper__without-children { + > .nested-nav--top-menu-item-wrapper--link { + flex-basis: 100%; + width: 100%; + flex-grow: 0; + flex-shrink: 0; + } + > .nested-nav--top-menu-item-wrapper--toggle { + flex-basis: 0; + width: 0; + display: none; + } + } + } + + > ul { + height: 0; + opacity: 0; + transition: all .25s ease-out; + z-index: 1; + position: relative; + &[expanded] { + height: var(--expanded-height); + opacity: 1; + display: block; + } + &.nested-nav--menu__mobile-hidden-collapsed { + display: none; + } + } + } + } +} +@media screen and (min-width: $nested-nav-desktop-min-width) { #top { z-index: 9; } @@ -11,7 +149,7 @@ .nested-nav { li { - font-size: 0.8125rem; + font-size: 15px; } } } @@ -25,11 +163,23 @@ > li { position: relative; float: left; - - > a { - padding: .5em 0; + > .nested-nav--top-menu-item-wrapper { + display: block; + padding: 0; + margin: 0; + border: none; + width: 100%; + height: auto; + > .nested-nav--top-menu-item-wrapper--link { + display: block; + width: 100%; + margin: 0; + height: auto; + } + > .nested-nav--top-menu-item-wrapper--toggle { + display: none; + } } - > ul { list-style: none; position: absolute; @@ -39,7 +189,7 @@ min-width: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); border-radius: 2px; - left: -.5em; + left: 0; li { margin: 0; @@ -50,22 +200,33 @@ } a { - color: $text; - padding: .46875rem .9375rem; + @include header-level6($primary-open-sky-s3); + width: max-content; display: block; - font-size: 90%; white-space: nowrap; - - &:hover { - color: $attention; + padding: 18px 0 0 0; + margin-left: 18px; + margin-right: 18px; + &:hover, + &.in-category { + color: $primary-open-sky-s2; + text-decoration: underline; + text-decoration-color: $primary-open-sky-s2; + text-decoration-thickness: 2px; + text-underline-offset: 6px; + } + } + &:last-of-type { + a { + padding-bottom: 18px; } } } } - + &:not(:first-child) { > ul { - left: .5em; + left: 0; } } @@ -88,12 +249,13 @@ } ul { - /*display: none;*/ visibility: hidden; display: block; opacity: 0; transition: opacity .25s ease-out, top 0s .5s, visibility 0s .5s; top: calc(100%); + min-width: 100%; + box-sizing: border-box; } a { @@ -102,36 +264,38 @@ } } -/* This is placed in a media query to prevent the momentary distortion of the page - * when it is rendered and the browser takes its time to evaluate the @media. - */ -@media screen and (max-width: 46.24rem) { - [role="banner"] .nested-nav { - li { - line-height: 1.5em; - font-size: 1.125rem; - - ul { - margin: 0 0 10px; - } - - a { - padding: 0; - - &:not(:last-child) { - pointer-events: none; +[role="banner"] [role="navigation"] { + .nested-nav { + > li.landing-page-redesign--nav--search .search > #search-results { + > .custom-search-result { + a { + font-family: "Open Sans Condensed", Impact, "Franklin Gothic Bold", sans-serif; + line-height: 1.6; + font-weight: bold; + background: linear-gradient(rgb(238, 235, 238) 0%, rgb(238, 235, 238) 100%) repeat-x 0 100%/1px 1px; + color: rgb(0, 85, 166); + font-size: 20px; + text-decoration: rgb(0, 85, 166); + > cite { + font-size: 12px; + font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif; + color: #002A3A; + text-decoration: none; + font-style: normal; + display: block; + line-height: 1; + font-weight: normal; + } + } + > span { + font-size: 14px; + color: #1B4859; + line-height: 1.4; + display: block; + overflow-wrap: break-word; + font-weight: normal; } } - } - - > li { - > a.in-category:not(:last-child) { - color: white; - } - } - } - - [role="banner"] [role="navigation"] .nested-nav li:before { - display: none; - } -} \ No newline at end of file + } + } +} diff --git a/_sass/custom/_custom-search.scss b/_sass/custom/_custom-search.scss new file mode 100644 index 0000000000..b7f7c3da3b --- /dev/null +++ b/_sass/custom/_custom-search.scss @@ -0,0 +1,586 @@ +/*! + * SPDX-License-Identifier: BSD-3-Clause + * + * The OpenSearch Contributors require contributions made to this file be licensed + * under the BSD-3-Clause license or a compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +/*! just-the-docs + * Copyright (c) 2016 Patrick Marsceill + * SPDX-License-Identifier: MIT + */ + + /* + * Notes about some peculiar implementation details regarding the use of !important, + * and media queries with pixels and similar media queries with rems. + * The styles copied over from the project website that uses rems don't work in this + * application, because of disparate roote font sizes. The theme in use provides + * rules using rems, and !important. Base theme rules set using !important are difficult + * to override without abandoning those classes all together. + * So, there are some kludges present to get it done. The longer term, future proof + * solution would be to reimplement NOT using those class names at all. Otherwise + * reuse of the header navigation across multiple repos is going to be problematic + * to maintain. It already is a problem sharing the design between both the project, + * and documentation websits. + */ + .copy-banner { + a, + h1 { + white-space: nowrap; + } + } + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + .search { + position: relative; + z-index: 2; + } + + .search * { + box-sizing: border-box; + } + + @media (min-width: 462.5px) { + .search { + position: relative; + height: 45px !important; + padding-top: 10px; + padding-bottom: 10px; + } + } + + @media (min-width: 46.25rem) { + .search { + position: relative; + height: 45px !important; + padding-top: 10px; + padding-bottom: 10px; + } + } + + .search-input-wrap { + position: relative; + z-index: 1; + transition: height linear 200ms; + } + + @media (min-width: 462.5px) { + .search-input-wrap { + position: absolute; + width: 100%; + height: 45px !important; + box-shadow: none; + transition: width ease 400ms; + } + } + + @media screen and (min-width: 46.25rem) { + .search-input-wrap { + position: absolute; + width: 100% !important; + height: 45px !important; + box-shadow: none; + transition: width ease 400ms; + max-width: unset; + } + } + + +@media screen and (min-width: $header-banner-min-width) { + .search, + .search-input-wrap { + height: 45px !important; + } +} + +@media screen and (max-width: $header-banner-mobile-breakpoint) { + .search, + .search-input-wrap { + height: 60px !important; + padding-top: 0; + padding-bottom: 0; + padding-left: 0; + box-sizing: content-box; + } +} + + .search-input { + position: absolute; + width: 100%; + } + + .search-input:focus { + outline: 0; + } + + .search-input:focus+.search-label .search-icon { + color: #0055A6; + } + + .search-label { + position: absolute; + display: flex; + height: 100%; + padding-left: 16px; + } + + @media (min-width: $header-banner-min-width) { + .search-label { + padding-left: 32px; + transition: padding-left linear 200ms; + } + } + + .search-label .search-icon { + width: 19.2px; + height: 19.2px; + align-self: center; + color: #4D8399; + } + + .search-results { + position: absolute; + left: 0; + display: none; + width: 100%; + max-height: unset !important; + overflow-y: auto; + background-color: #fff; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + @media screen and (max-width: $header-banner-mobile-breakpoint) { + top: 100%; + } + } + + @media (min-width: $header-banner-min-width) { + .search-results { + top: 50px; + width: 536px; + max-height: calc(100vh - 200%) !important; + } + } + + .search-results-list { + padding-left: 0; + margin-bottom: 4px; + list-style: none; + font-size: 14px !important; + } + + @media (min-width: 312.5px) { + .search-results-list { + font-size: 16px !important; + } + } + + @media (min-width: $header-banner-min-width) { + .search-results-list { + font-size: 12px !important; + } + } + + @media (min-width: 500px) { + .search-results-list { + font-size: 14px !important; + } + } + + .search-results-list-item { + padding: 0; + margin: 0; + } + + .search-result { + display: block; + padding-top: 4px; + padding-right: 12px; + padding-bottom: 4px; + padding-left: 12px; + } + + .search-result:hover, + .search-result.active { + background-color: #ebedf5; + } + + .search-result-title { + display: block; + padding-top: 8px; + padding-bottom: 8px; + } + + @media (min-width: 312.5px) { + .search-result-title { + display: inline-block; + width: 40%; + padding-right: 8px; + vertical-align: top; + } + } + + .search-result-doc { + display: flex; + align-items: center; + word-wrap: break-word; + } + + .search-result-doc.search-result-doc-parent { + opacity: 0.5; + font-size: 12px !important; + } + + @media (min-width: 312.5px) { + .search-result-doc.search-result-doc-parent { + font-size: 14px !important; + } + } + + @media (min-width: $header-banner-min-width) { + .search-result-doc.search-result-doc-parent { + font-size: 11px !important; + } + } + + @media (min-width: 500px) { + .search-result-doc.search-result-doc-parent { + font-size: 12px !important; + } + } + + .search-result-doc .search-result-icon { + width: 16px; + height: 16px; + margin-right: 8px; + color: #0055A6; + flex-shrink: 0; + } + + .search-result-doc .search-result-doc-title { + overflow: auto; + } + + .search-result-section { + margin-left: 24px; + word-wrap: break-word; + } + + .search-result-rel-url { + display: block; + margin-left: 24px; + overflow: hidden; + color: #959396; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 9px !important; + } + + @media (min-width: 312.5px) { + .search-result-rel-url { + font-size: 10px !important; + } + } + + .search-result-previews { + display: block; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + margin-left: 8px; + color: #959396; + word-wrap: break-word; + border-left: 1px solid; + border-left-color: #eeebee; + font-size: 11px !important; + } + + @media (min-width: 312.5px) { + .search-result-previews { + font-size: 12px !important; + } + } + + @media (min-width: 312.5px) { + .search-result-previews { + display: inline-block; + width: 60%; + padding-left: 8px; + margin-left: 0; + vertical-align: top; + } + } + + .search-result-preview+.search-result-preview { + margin-top: 4px; + } + + .search-result-highlight { + font-weight: bold; + } + + .search-no-result { + padding-top: 8px; + padding-right: 12px; + padding-bottom: 8px; + padding-left: 12px; + font-size: 12px !important; + } + + @media (min-width: 312.5px) { + .search-no-result { + font-size: 14px !important; + } + } + + .search-button { + position: fixed; + right: 16px; + bottom: 16px; + display: flex; + width: 56px; + height: 56px; + background-color: #fff; + border: 1px solid rgba(0, 85, 166, 0.3); + border-radius: 28px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + align-items: center; + justify-content: center; + } + + .search-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1; + width: 0; + height: 0; + background-color: rgba(0, 0, 0, 0); + opacity: 0; + transition: opacity ease 400ms, width 0s 400ms, height 0s 400ms; + } + + @media screen and (max-width: $header-banner-mobile-breakpoint) { + .search-active .search.opensearch-more-important { + position: fixed !important; + top: 0; + left: 0; + width: 100% !important; + height: 100%; + padding: 0; + } + } + + .search-active .search-input-wrap { + height: 64px; + border-radius: 0; + } + + @media (min-width: $header-banner-min-width) { + .search-active .search-input-wrap { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + } + } + + .search-active .search-input { + background-color: #fff; + } + + .search-active .search-results { + display: block; + } + + .search-active .search-overlay { + width: 100%; + height: 100%; + opacity: 1; + transition: opacity ease 400ms, width 0s, height 0s; +} + + @media (min-width: $header-banner-min-width) { + .search-active .main { + position: fixed; + right: 0; + left: 0; + } + } + + .search-active .main-header { + padding-top: 64px; + } + + @media (min-width: $header-banner-min-width) { + .search-active .main-header { + padding-top: 0; + } + } + + @media (min-width: $header-banner-min-width) { + .copy-banner .search { + display: block; + height: 48px !important; + margin: 11.5px 0 11.5px 48px; + } + } + + @media (min-width: $header-banner-min-width) { + .copy-banner .search-input-wrap { + height: 48px !important; + right: 0; + } + } + + .search-active .main { + position: relative !important; + } + + @media (min-width: $header-banner-min-width) { + .search-active .search-results { + right: 0; + left: auto; + max-height: calc(100vh - 200% - 60px) !important; + } + } + + #main-header.nav-open~.copy-banner .search { + display: block; + } + + .custom-search-results > div { + padding: 0 16px; + @media screen and (min-width: $header-banner-min-width) { + padding: 16px; + } + } + + .custom-search-results cite { + font-size: 12px; + font-size: 12px; + font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif; + color: #002A3A; + text-decoration: none; + font-style: normal; + display: block; + line-height: 1; + font-weight: normal; + } + + .search-active { + body { + position: fixed; + + @media (min-width: $header-banner-min-width) { + position: unset; + } + } + } + + .custom-search-results a { + font-size: 20px; + font-size: 20px; + font-family: "Open Sans Condensed", Impact, "Franklin Gothic Bold", sans-serif; + line-height: 1.6; + font-weight: bold; + + background: linear-gradient(rgb(238, 235, 238) 0%, rgb(238, 235, 238) 100%) repeat-x 0 100% / 1px 1px; + color: rgb(0, 85, 166); + font-size: 20px; + text-decoration: rgb(0, 85, 166); + -moz-osx-font-smoothing: grayscale; + + &:hover { + background-image: linear-gradient(rgba(0, 85, 166, 0.45) 0%, rgba(0, 85, 166, 0.45) 100%); + } + } + + .custom-search-results span { + font-size: 14px; + font-size: 14px; + color: #1B4859; + line-height: 1.4; + display: block; + overflow-wrap: break-word; + } + + .custom-search-results span:only-child { + text-align: center; + padding: 16px; + } + + .custom-search-results .highlighted { + background: #EAF4F9; + } + + .custom-search-results { + + a, + h1 { + white-space: unset; + } + } + + .banner-alert~main .custom-search-results { + max-height: calc(100vh - 200% - 60px - 57.6px) !important; + } + + .search-spinner { + display: none; + font-weight: 700; + outline: 0; + user-select: none; + position: absolute; + padding-left: 9.6px; + height: 100%; + } + + .search-spinner.spinning { + display: flex; + } + + .search-spinner.spinning~.search-label { + display: none; + } + + .search-spinner>i { + border-color: rgba(77, 131, 153, 0.2); + position: relative; + animation: spin 0.6s infinite linear; + border-width: 3px; + border-style: solid; + border-radius: 100%; + display: inline-block; + width: 18px; + height: 18px; + vertical-align: middle; + align-self: center; + } + + .search-spinner>i:before { + content: ""; + border: 3px solid rgba(77, 131, 153, 0); + border-top-color: rgba(77, 131, 153, 0.8); + border-radius: 100%; + display: block; + left: -3px; + position: absolute; + top: -3px; + height: 100%; + width: 100%; + box-sizing: content-box; + } + + @keyframes spin { + from { + transform: rotate(0deg) + } + + to { + transform: rotate(359deg) + } + } \ No newline at end of file diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 7a8b964b1d..d408bf2732 100755 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -3,6 +3,7 @@ @import "../../assets/fonts/noto-serif/webfont.css"; @import "../../assets/fonts/fira-mono/webfont.css"; @import "../color_schemes/opensearch.scss"; +@import "../font-awesome"; // Font Family Mixins @mixin serif { @@ -36,6 +37,48 @@ } } +@mixin header-level4($color: $primary-open-sky-s3) { + color: $color; + font-family: 'Open Sans'; + font-size: 15px; + font-style: normal; + font-weight: 600; + line-height: 24px; + letter-spacing: 4.5px; + text-transform: uppercase; +} +@mixin header-level5($color: $primary-open-sky-s3) { + color: $color; + font-family: 'Open Sans'; + font-size: 15px; + font-style: normal; + font-weight: 600; + line-height: 24px; +} +@mixin header-level6($color: $primary-open-sky-s2) { + color: $color; + font-family: 'Open Sans'; + font-size: 15px; + font-style: normal; + font-weight: 700; + line-height: 24px; +} + +@mixin bottom-border-underline($color: $primary-pacific-blue) { + padding-top: 10px; + padding-bottom: 10px; + border-bottom: 2px solid $color; +} + +@mixin body-text($color: #000) { + color: $color; + font-family: 'Open Sans'; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 48px; +} + body { @include sans-serif; } @@ -63,6 +106,16 @@ nav#site-nav > .nav-list:nth-of-type(1) { padding-top: 2px; } +nav#site-nav > .nav-list, +nav#site-nav > .version-wrapper { + width: 264px; + position: relative; + box-sizing: border-box; + left: -21px; +} +nav#site-nav > .version-wrapper { + left: -36px; +} .nav-list { margin-top: 1px; } @@ -505,8 +558,15 @@ p.label { flex-grow: 1; @include mq(lg) { + + } + @media screen and (min-width: 1004px) { max-width: calc(100% - #{$nav-width + $top-button-margin}); } + @media screen and (max-width: 1003px) { + box-sizing: border-box; + max-width: 100%; + } @include mq(xl) { max-width: calc(min(#{$max-content-width + $toc-width + $top-button-margin}, calc(100% - (#{$nav-width + $top-button-margin})))); @@ -515,10 +575,13 @@ p.label { // Adds TOC to right hand side in xl layout .main-content-wrap { - width: 100%; - - @include mq(xl) { - width: calc(100% - #{$toc-width}); + max-width: 100%; + min-width: 0; + padding-left: 0; + padding-right: 0; + box-sizing: border-box; + @media screen and (max-width: 1003px) { + padding-left: 20px; } } @@ -689,7 +752,7 @@ html { body { @include sans-serif; @include font-size(16); - background: $background-lightest; + background: linear-gradient(to right, #F5F7F7 100%, transparent 100%);; color: $text; line-height: 1.6; -webkit-font-smoothing: antialiased; @@ -707,7 +770,7 @@ main { align-content: stretch; height: 100%; position: relative; - justify-content: center; + justify-content: space-between; @include mq(lg) { background: linear-gradient(to right, $sidebar-color $nav-width, transparent $nav-width); @@ -717,10 +780,6 @@ main { background: linear-gradient(to right, $sidebar-color calc((100% - #{$nav-width + $max-content-width }) / 2 + 2 * #{$top-button-margin} ), transparent calc((100% - #{$nav-width + $max-content-width }) / 2 + 2 * #{$top-button-margin} )); } - @include mq(md) { - padding-top: calc(4rem + 9px); - } - .side-bar { @include sans-serif; position: static; @@ -744,12 +803,14 @@ main { @include mq(xs) { padding: 0 calc(#{$top-button-margin} + 1rem); + &.footer-container { + padding: 0; + } } @include mq(md) { margin: 0 auto; - max-width: 1400px; - padding: 0 (32/768) * 100%; + max-width: 1440px; } &.sidebar-right { @@ -757,6 +818,12 @@ main { box-shadow: -1200px 0 0 0px $background-lightest; } } + @media screen and (min-width: 740px) and (max-width: 1045px) { + padding: 0 20px; + } + @media screen and (max-width: 739px) { + padding: 0; + } } .toc, @@ -784,10 +851,37 @@ main { -moz-osx-font-smoothing: auto; } +// +// Top banner header navigation menu. +// +$header-banner-min-width: 1019px; +$header-banner-mobile-breakpoint: 1018px; +$header-logo-max-left: 80px; +$header-navigation-max-right: 40px; +$max-container: 1440px; +$light-theme-navigation-background: rgba(0, 163, 224, 0.05); +$primary-pacific-blue-s2: #004381; +$primary-open-sky-s3: #003551; +$primary-pacific-sky-t2: #DCEBF4; +$primary-pacific-sky-t3: #F4F8FB; +$primary-open-sky-s2: #006D97; +$primary-deep-blue-sea-s3: #001E30; +$primary-open-sky-t3: #E1F0F9; +$primary-deep-blue-sea-t1: #2C5E7A; +$primary-open-sky-t1: #4FB3E3; +$primary-open-sky-t2: #9BCFED; +$footer-3-column-min: 835px; +$footer-2-column-max: 834px; +$footer-2-column-min: 701px; +$footer-1-column-max:700px; +@mixin gradient-deep-blue-sea { + background: linear-gradient(180deg, #016BA7 0%, #011C2D 97.92%); +} + [role="banner"] { // Includes global navigation, logo, and tagline at top of document @include clearfix; - background: $accent-dark; + background: $light-theme-navigation-background; overflow: hidden; margin: 0; padding: 10px 0 6px; @@ -798,6 +892,9 @@ main { @include mq(md) { position: relative; } + @media screen and (max-width: 1200px) { + padding-right: 10px; + } } .meta { @@ -820,39 +917,40 @@ main { .logo { - @include font-size(40); + font-size: 35px; @include sans-serif; - /*background: url(../img/logo-search.png) 0 0 no-repeat;*/ color: $background-lightest; display: block; float: left; font-weight: 700; - margin: 10px; + margin: 10px 0 10px 10px; overflow: hidden; text-decoration: none; text-indent: 100%; - width: 170px; height: 36px; position: relative; + + // NOTE: The min() call is wrapped in a calc() call to workaround the + // outdated SASS compiler that has an issue mixing the percentage with pixels, + // and will not interpolate the variable for 1019px either because of the error + // which is why the constant value as a "magic number" is present. + // left: calc(min(80px, 100% - 1019px)); + @media screen and (max-width: 1339px) { + left: 0; + } svg { position: absolute; top: 1px; left: 1px } - /*.mdzr-svg & { // deliver svg logo if applicable - background: url(../img/opensearch-logo-monochrome.svg) center center no-repeat; - }*/ - - @include mq(md) { + @include respond-min($header-banner-min-width) { margin-left: 0; } } .menu-button { - @include font-size(20); - background: $accent-dark; - border-radius: 23px; - color: $background-lightest; + font-size: 35px; + color: $primary-deep-blue-sea-t1; cursor: pointer; display: block; float: right; @@ -862,61 +960,97 @@ main { text-align: center; text-decoration: none; width: 45px; - - @include mq(md) { + > .icon { + &:nth-of-type(1) { + width: 30px; + height: 35px; + } + &:nth-of-type(2) { + width: 27.5px; + height: 35px; + } + } + > i { + position: relative; + top: -1px; + &:nth-of-type(1) { + display: inline-block; + } + &:nth-of-type(2) { + display: none; + } + } + @include respond-min($header-banner-min-width) { display: none; } &:active { color: $attention; } - span { @include visuallyhidden; } &.active { - opacity: 0.5; - - & ~ .nav-menu-on { - max-height: 500px; + > i { + &:nth-of-type(1) { + display: none; + } + &:nth-of-type(2) { + display: inline-block; + } } } } .nav-menu-on { - max-height: 0; + @media screen and (max-width: $header-banner-mobile-breakpoint) { + height: 0; + } overflow: hidden; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; - @include mq(md) { + @include respond-min($header-banner-min-width) { // turn off animations if on a desktop width max-height: none; - + height: auto; -webkit-transition: none; transition: none; } + &.active { + @include respond-min($header-banner-min-width) { + overflow-y: scroll; + } + + @media screen and (max-width: $header-banner-mobile-breakpoint) { + height: calc(100vh - 65px); + overflow-y: auto; + > .nested-nav { + @include clearfix; + height: auto; + clear: both; + } + } + } } [role="navigation"] { - background: $accent-dark; + @media screen and (max-width: $header-banner-mobile-breakpoint) { + background: $primary-open-sky-s3; + } width: 100%; - @include mq(md) { + @include respond-min($header-banner-min-width) { width: auto; float: right; } ul { - margin: 10px 0 0; + margin: 0; padding: 0; - - @include mq(md) { - margin: 0; - } } li { @@ -929,7 +1063,7 @@ main { text-transform: uppercase; margin: 0 10px; - @include mq(md) { + @include respond-min($header-banner-min-width) { margin: 0; border: 0; float: left; @@ -944,22 +1078,18 @@ main { a { color: $background-lightest; display: block; - @include mq(md) { - padding: 20px 0px; - } text-decoration: none; - background: none; + } - &:active, &:hover { - color: $highlight; - } + a:not([class]) { + background-image: unset; } .nav-primary { - @include mq(md) { - position: absolute; - right: 0; - top: 45px; + @include respond-min($header-banner-min-width) { + position: absolute; + right: 0; + top: 45px; } } } @@ -967,27 +1097,148 @@ main { [role="banner"] [role="navigation"] { margin-top: 17px; - + margin-right: 10px; + @media screen and (max-width: 1339px) { + margin-right: 0; + } li { - color: $attention; + color: $primary-open-sky-s3; text-transform: none; - margin-right: 0.5em; - + @media screen and (min-width: 1250px) { + margin-right: 20px; + } + @media screen and (min-width: 1150px) and (max-width: 1249px) { + margin-right: 10px; + } + margin-right: 5px; } li a { display: inline; - color: white; + @include header-level6($primary-open-sky-s3); } - li a.in-category { - color: $attention; + .nested-nav a.in-category, + .nested-nav a:hover { + color: $primary-open-sky-s2; + text-decoration: underline; + text-decoration-color: $primary-open-sky-s2; + text-decoration-thickness: 2px; + text-underline-offset: 6px; } +} - li + li:before { - content: "·"; - color: $text-light; - display: inline-block; - margin-right: 0.25em; +[role=banner] [role=navigation] li.landing-page-redesign--nav--search { + display: inline-flex; + align-items: flex-start; + @media screen and (max-width: $header-banner-mobile-breakpoint) { + display: flex; + width: calc(100% - 20px); + padding: 15px 10px; + height: 60px; + box-sizing: content-box; } + + >.landing-page-redesign--nav-search--field-with-results { + display: inline-flex; + align-items: flex-start; + min-width: 200px; + justify-content: stretch; + + @media screen and (min-width: $header-banner-min-width) { + position: relative; + top: -20px; + } + + @media screen and (max-width: $header-banner-mobile-breakpoint) { + display: flex; + width: 100%; + position: relative; + z-index: 11; + } + + >.landing-page-redesign--nav-search--field-with-results--field { + flex-basis: 100%; + flex-grow: 1; + flex-shrink: 1; + + >.landing-page-redesign--nav-search--field-with-results--field--wrapper { + position: relative; + + >.search { + >.search-input-wrap { + >.search-input { + padding-left: 9.6px; + padding-right: 6px; + transition: padding-right linear 200ms; + border-radius: 6px; + background-color: $primary-pacific-sky-t2; + @include header-level6($primary-open-sky-s2); + box-sizing: border-box; + + &::placeholder { + @include header-level6($primary-open-sky-s2); + } + + @media screen and (max-width: $header-banner-mobile-breakpoint) { + height: 60px; + padding-top: 0; + padding-bottom: 0; + font-size: 18px; + } + + @media screen and (min-width: $header-banner-min-width) { + height: 45px; + position: relative; + border: none; + padding-bottom: 17px; + padding-top: 1em; + } + } + + >.search-spinner { + display: none; + font-weight: 700; + outline: 0; + user-select: none; + position: absolute; + padding-right: 9.6px; + height: 100%; + right: 0; + left: auto; + top: 13.5px; + @media screen and (max-width: $header-banner-mobile-breakpoint) { + top: 21px; + } + } + + >.search-label { + right: 4px; + top: 2px; + padding-left: 0; + padding-right: 0; + transition: right linear 200ms; + + @media screen and (max-width: $header-banner-mobile-breakpoint) { + width: 25px; + height: 26px; + top: 17px; + } + } + } + } + } + } + } +} + +.search-active [role=banner] [role=navigation] li.landing-page-redesign--nav--search { + >.landing-page-redesign--nav-search--field-with-results { + @media screen and (min-width: $header-banner-min-width) { + top: -10px; + } + } +} +body { + padding-bottom: 0; } [role="contentinfo"] { @@ -1009,12 +1260,72 @@ main { .subfooter { @include clearfix; - padding: 0 10px; - - @include mq(md) { - padding: 0; + padding: 0; + @include gradient-deep-blue-sea; + .subfooter--flex-wrapper { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: flex-start; + .subfooter--columns-wrapper { + flex-basis: 1265px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + padding-bottom: 60px; + > .subfooter--columns-wrapper--column { + box-sizing: border-box; + @media screen and (min-width: $footer-3-column-min) { + flex-basis: 33%; + max-width: 350px; + padding-left: 80px; + } + @media screen and (max-width: $footer-2-column-max) and (min-width: $footer-2-column-min) { + &:nth-of-type(1) { + flex-basis: 50%; + padding-left: 40px; + } + &:nth-of-type(2) { + flex-basis: 50%; + padding-left: 40px; + } + &:nth-of-type(3) { + flex-basis: 100%; + padding-left: 40px; + } + } + @media screen and (max-width: $footer-1-column-max) { + flex-basis: 100%; + padding-left: 10px; + padding-bottom: 80px; + } + > h4 { + @include header-level4($white); + margin-top: 35px; + margin-bottom: 20px; + &.opensearch-more-important { + font-size: 15px !important; // Sorry, but the base theme uses !important. + } + } + > ul { + list-style-type: none; + margin: 0; + padding: 0; + > li { + @media screen and (max-width: $footer-1-column-max) { + @include body-text($white); + } + @media screen and (min-width: $footer-2-column-min) { + @include header-level5($white); + } + } + } + } + } } - .col { &:first-child { h2 { @@ -1046,18 +1357,16 @@ main { border-top: 1px solid $line; color: $background-lightest; font-weight: 700; - margin: 20px 0 .83em 0; + margin-top: 20px; padding: 30px 0 10px; - line-height: 1.6; - - @include mq(md) { + @include respond-min(46.25rem) { border: none; margin-top: 0; } } ul { - @include font-size(14); + font-size: 14px; font-weight: 400; list-style: none; margin: 15px 0 0 0; @@ -1083,34 +1392,97 @@ main { } .footer { - background: $accent-dark; - margin-top: 20px; + background: $primary-deep-blue-sea-s3; padding: 10px 0 30px; - color: $white; - a { - color: $accent-light; - background: none; - text-decoration: underline; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - background: none; + color: #d9d9d9; + .footer--flex-wrapper { + box-sizing: border-box; + .footer--legal-rows-wrapper { + text-align: left; + margin: auto; + max-width: 1265px; + display: flex; + flex-direction: column; + align-items: flex-start; + row-gap: 24px; + box-sizing: border-box; + @media screen and (min-width: $footer-3-column-min) { + padding-left: 80px; + } + @media screen and (min-width: $footer-2-column-min) and (max-width: $footer-2-column-max) { + padding-left: 40px; + } + @media screen and (max-width: $footer-1-column-max) { + padding-left: 20px; + } + > .footer--legal-rows-wrapper--row { + flex-basis: 60px; + font-size: 15px; + line-height: 24px; + a:not([class]) { + color: $primary-open-sky-t1; + background-image: none; + } + a { + color: $primary-open-sky-t1; + text-decoration: underline; + &:hover { + color: $primary-pacific-sky-t3; + } + &:visited { + color: $primary-open-sky-t2; + } + } + svg > path { + fill: $primary-pacific-sky-t3; + } + @media screen and (max-width: $footer-1-column-max) { + > .footer--legal-rows-wrapper--row--logo__desktop { + display: none; + } + > .footer--legal-rows-wrapper--row--logo__mobile { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + > svg { + height: auto; + } + } + } + @media screen and (min-width: $footer-2-column-min) { + > .footer--legal-rows-wrapper--row--logo__mobile { + display: none; + } + > .footer--legal-rows-wrapper--row--logo__desktop { + display: block; + } + } + box-sizing: border-box; + &:nth-of-type(1) { + width: 100%; + box-sizing: border-box; + } + &:nth-of-type(2) { + padding-right: $top-button-margin; + } + } } } - svg { - float: left; - height: 50px; - padding-top: 40px; - padding-right: 30px; + a, svg { color: $accent-light; } + svg { + float: left; + height: 50px; + padding-top: 40px; + padding-right: 30px; + } .copyright { float: left; @include font-size(12); margin: 20px 0 0 10px; - @include mq(md) { + @include respond-min(46.25rem) { max-width: 80%; padding-top: 30px; margin: 0; @@ -1233,13 +1605,6 @@ main { } } - .icon-reorder { - display: inline-block; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M96 20v-8c0-1.1-.4-2-1.2-2.8S93.1 8 92 8H4c-1.1 0-2 .4-2.8 1.2S0 10.9 0 12v8c0 1.1.4 2 1.2 2.8S2.9 24 4 24h88c1.1 0 2-.4 2.8-1.2S96 21.1 96 20zm0 32v-8c0-1.1-.4-2-1.2-2.8S93.1 40 92 40H4c-1.1 0-2 .4-2.8 1.2S0 42.9 0 44v8c0 1.1.4 2 1.2 2.8S2.9 56 4 56h88c1.1 0 2-.4 2.8-1.2S96 53.1 96 52zm0 32v-8c0-1.1-.4-2-1.2-2.8S93.1 72 92 72H4c-1.1 0-2 .4-2.8 1.2S0 74.9 0 76v8c0 1.1.4 2 1.2 2.8S2.9 88 4 88h88c1.1 0 2-.4 2.8-1.2S96 85.1 96 84z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; - width: 17px; - vertical-align: middle; - margin-bottom: 6px; - } main { flex-flow: column nowrap; @@ -1253,12 +1618,6 @@ main { @include mq(md) { display: block; - padding: 1px 0; - position: absolute; - left: 0; - right: 0; - z-index: 2; - top: 0; } h1 { @@ -1296,45 +1655,6 @@ main { flex-flow: row nowrap; align-items: center; } - - .search { - display: none; - - @include mq(md) { - display: block; - height: 3rem !important; - margin-left: 3rem; - } - } - - @include mq(md) { - .search-input-wrap { - height: 3rem !important; - right: 0; - } - } -} - -.search-active { - body { - position: fixed; - - @include mq(md) { - position: unset; - } - } - .main { - position: relative !important; - } - - .search-results { - @include mq(md) { - right: 0; - left: auto; - - max-height: calc(100vh - 200% - 60px) !important; - } - } } @@ -1443,108 +1763,5 @@ version-selector { --link-color: #{$blue-300}; } -.custom-search-results { - & > div { - padding: 1rem; - } - - cite { - @include font-size(12); - @include sans-serif; - color: $grey-dk-300; - text-decoration: none; - font-style: normal; - display: block; - line-height: 1; - font-weight: normal; - } - - a { - @include font-size(20); - @include heading-sans-serif; - line-height: 1.6; - font-weight: bold; - outline: none; - } - - span { - @include font-size(14); - color: $grey-dk-200; - line-height: 1.4; - display: block; - overflow-wrap: break-word; - - &:only-child { - text-align: center; - padding: 1rem; - } - } - - .highlighted { - background: #EAF4F9; - } -} - -@include respond-min(46.25rem) { - .banner-alert ~ main .custom-search-results { - max-height: calc(100vh - 200% - 60px - 3.6rem) !important; - } -} - -.search-spinner { - display: none; - font-weight: 700; - outline: 0; - user-select: none; - - position: absolute; - padding-left: 0.6rem; - height: 100%; - - &.spinning { - display: flex; - - & ~ .search-label { - display: none; - } - } -} - -.search-spinner > i { - border-color: rgba($grey-dk-000, 0.2); - position: relative; - animation: spin 0.6s infinite linear; - border-width: 3px; - border-style: solid; - border-radius: 100%; - display: inline-block; - width: 18px; - height: 18px; - vertical-align: middle; - align-self: center; - - &:before { - content: ""; - border: 3px solid rgba($grey-dk-000, 0); - border-top-color: rgba($grey-dk-000, 0.8); - border-radius: 100%; - display: block; - left: -3px; - position: absolute; - top: -3px; - height: 100%; - width: 100%; - box-sizing: content-box; - } -} - -@keyframes spin { - from { - transform: rotate(0deg) - } - to { - transform: rotate(359deg) - } -} - +@import "./_custom-search.scss"; @import "../_nested-nav.scss"; diff --git a/_sass/font-awesome/_bordered-pulled.scss b/_sass/font-awesome/_bordered-pulled.scss new file mode 100644 index 0000000000..9d3fdf3a0b --- /dev/null +++ b/_sass/font-awesome/_bordered-pulled.scss @@ -0,0 +1,16 @@ +// Bordered & Pulled +// ------------------------- + +.#{$fa-css-prefix}-border { + padding: .2em .25em .15em; + border: solid .08em $fa-border-color; + border-radius: .1em; +} + +.pull-right { float: right; } +.pull-left { float: left; } + +.#{$fa-css-prefix} { + &.pull-left { margin-right: .3em; } + &.pull-right { margin-left: .3em; } +} diff --git a/_sass/font-awesome/_core.scss b/_sass/font-awesome/_core.scss new file mode 100644 index 0000000000..ca46d37127 --- /dev/null +++ b/_sass/font-awesome/_core.scss @@ -0,0 +1,11 @@ +// Base Class Definition +// ------------------------- + +.#{$fa-css-prefix} { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; // shortening font declaration + font-size: inherit; // can't have font-size inherit on line above, so need to override + text-rendering: auto; // optimizelegibility throws things off #1094 + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/_sass/font-awesome/_fixed-width.scss b/_sass/font-awesome/_fixed-width.scss new file mode 100644 index 0000000000..7102bbac0c --- /dev/null +++ b/_sass/font-awesome/_fixed-width.scss @@ -0,0 +1,6 @@ +// Fixed Width Icons +// ------------------------- +.#{$fa-css-prefix}-fw { + width: calc(18em / 14); + text-align: center; +} diff --git a/_sass/font-awesome/_icons.scss b/_sass/font-awesome/_icons.scss new file mode 100644 index 0000000000..8dc29394cc --- /dev/null +++ b/_sass/font-awesome/_icons.scss @@ -0,0 +1,552 @@ +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ + +.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; } +.#{$fa-css-prefix}-music:before { content: $fa-var-music; } +.#{$fa-css-prefix}-search:before { content: $fa-var-search; } +.#{$fa-css-prefix}-envelope-o:before { content: $fa-var-envelope-o; } +.#{$fa-css-prefix}-heart:before { content: $fa-var-heart; } +.#{$fa-css-prefix}-star:before { content: $fa-var-star; } +.#{$fa-css-prefix}-star-o:before { content: $fa-var-star-o; } +.#{$fa-css-prefix}-user:before { content: $fa-var-user; } +.#{$fa-css-prefix}-film:before { content: $fa-var-film; } +.#{$fa-css-prefix}-th-large:before { content: $fa-var-th-large; } +.#{$fa-css-prefix}-th:before { content: $fa-var-th; } +.#{$fa-css-prefix}-th-list:before { content: $fa-var-th-list; } +.#{$fa-css-prefix}-check:before { content: $fa-var-check; } +.#{$fa-css-prefix}-remove:before, +.#{$fa-css-prefix}-close:before, +.#{$fa-css-prefix}-times:before { content: $fa-var-times; } +.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; } +.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; } +.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; } +.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; } +.#{$fa-css-prefix}-gear:before, +.#{$fa-css-prefix}-cog:before { content: $fa-var-cog; } +.#{$fa-css-prefix}-trash-o:before { content: $fa-var-trash-o; } +.#{$fa-css-prefix}-home:before { content: $fa-var-home; } +.#{$fa-css-prefix}-file-o:before { content: $fa-var-file-o; } +.#{$fa-css-prefix}-clock-o:before { content: $fa-var-clock-o; } +.#{$fa-css-prefix}-road:before { content: $fa-var-road; } +.#{$fa-css-prefix}-download:before { content: $fa-var-download; } +.#{$fa-css-prefix}-arrow-circle-o-down:before { content: $fa-var-arrow-circle-o-down; } +.#{$fa-css-prefix}-arrow-circle-o-up:before { content: $fa-var-arrow-circle-o-up; } +.#{$fa-css-prefix}-inbox:before { content: $fa-var-inbox; } +.#{$fa-css-prefix}-play-circle-o:before { content: $fa-var-play-circle-o; } +.#{$fa-css-prefix}-rotate-right:before, +.#{$fa-css-prefix}-repeat:before { content: $fa-var-repeat; } +.#{$fa-css-prefix}-refresh:before { content: $fa-var-refresh; } +.#{$fa-css-prefix}-list-alt:before { content: $fa-var-list-alt; } +.#{$fa-css-prefix}-lock:before { content: $fa-var-lock; } +.#{$fa-css-prefix}-flag:before { content: $fa-var-flag; } +.#{$fa-css-prefix}-headphones:before { content: $fa-var-headphones; } +.#{$fa-css-prefix}-volume-off:before { content: $fa-var-volume-off; } +.#{$fa-css-prefix}-volume-down:before { content: $fa-var-volume-down; } +.#{$fa-css-prefix}-volume-up:before { content: $fa-var-volume-up; } +.#{$fa-css-prefix}-qrcode:before { content: $fa-var-qrcode; } +.#{$fa-css-prefix}-barcode:before { content: $fa-var-barcode; } +.#{$fa-css-prefix}-tag:before { content: $fa-var-tag; } +.#{$fa-css-prefix}-tags:before { content: $fa-var-tags; } +.#{$fa-css-prefix}-book:before { content: $fa-var-book; } +.#{$fa-css-prefix}-bookmark:before { content: $fa-var-bookmark; } +.#{$fa-css-prefix}-print:before { content: $fa-var-print; } +.#{$fa-css-prefix}-camera:before { content: $fa-var-camera; } +.#{$fa-css-prefix}-font:before { content: $fa-var-font; } +.#{$fa-css-prefix}-bold:before { content: $fa-var-bold; } +.#{$fa-css-prefix}-italic:before { content: $fa-var-italic; } +.#{$fa-css-prefix}-text-height:before { content: $fa-var-text-height; } +.#{$fa-css-prefix}-text-width:before { content: $fa-var-text-width; } +.#{$fa-css-prefix}-align-left:before { content: $fa-var-align-left; } +.#{$fa-css-prefix}-align-center:before { content: $fa-var-align-center; } +.#{$fa-css-prefix}-align-right:before { content: $fa-var-align-right; } +.#{$fa-css-prefix}-align-justify:before { content: $fa-var-align-justify; } +.#{$fa-css-prefix}-list:before { content: $fa-var-list; } +.#{$fa-css-prefix}-dedent:before, +.#{$fa-css-prefix}-outdent:before { content: $fa-var-outdent; } +.#{$fa-css-prefix}-indent:before { content: $fa-var-indent; } +.#{$fa-css-prefix}-video-camera:before { content: $fa-var-video-camera; } +.#{$fa-css-prefix}-photo:before, +.#{$fa-css-prefix}-image:before, +.#{$fa-css-prefix}-picture-o:before { content: $fa-var-picture-o; } +.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; } +.#{$fa-css-prefix}-map-marker:before { content: $fa-var-map-marker; } +.#{$fa-css-prefix}-adjust:before { content: $fa-var-adjust; } +.#{$fa-css-prefix}-tint:before { content: $fa-var-tint; } +.#{$fa-css-prefix}-edit:before, +.#{$fa-css-prefix}-pencil-square-o:before { content: $fa-var-pencil-square-o; } +.#{$fa-css-prefix}-share-square-o:before { content: $fa-var-share-square-o; } +.#{$fa-css-prefix}-check-square-o:before { content: $fa-var-check-square-o; } +.#{$fa-css-prefix}-arrows:before { content: $fa-var-arrows; } +.#{$fa-css-prefix}-step-backward:before { content: $fa-var-step-backward; } +.#{$fa-css-prefix}-fast-backward:before { content: $fa-var-fast-backward; } +.#{$fa-css-prefix}-backward:before { content: $fa-var-backward; } +.#{$fa-css-prefix}-play:before { content: $fa-var-play; } +.#{$fa-css-prefix}-pause:before { content: $fa-var-pause; } +.#{$fa-css-prefix}-stop:before { content: $fa-var-stop; } +.#{$fa-css-prefix}-forward:before { content: $fa-var-forward; } +.#{$fa-css-prefix}-fast-forward:before { content: $fa-var-fast-forward; } +.#{$fa-css-prefix}-step-forward:before { content: $fa-var-step-forward; } +.#{$fa-css-prefix}-eject:before { content: $fa-var-eject; } +.#{$fa-css-prefix}-chevron-left:before { content: $fa-var-chevron-left; } +.#{$fa-css-prefix}-chevron-right:before { content: $fa-var-chevron-right; } +.#{$fa-css-prefix}-plus-circle:before { content: $fa-var-plus-circle; } +.#{$fa-css-prefix}-minus-circle:before { content: $fa-var-minus-circle; } +.#{$fa-css-prefix}-times-circle:before { content: $fa-var-times-circle; } +.#{$fa-css-prefix}-check-circle:before { content: $fa-var-check-circle; } +.#{$fa-css-prefix}-question-circle:before { content: $fa-var-question-circle; } +.#{$fa-css-prefix}-info-circle:before { content: $fa-var-info-circle; } +.#{$fa-css-prefix}-crosshairs:before { content: $fa-var-crosshairs; } +.#{$fa-css-prefix}-times-circle-o:before { content: $fa-var-times-circle-o; } +.#{$fa-css-prefix}-check-circle-o:before { content: $fa-var-check-circle-o; } +.#{$fa-css-prefix}-ban:before { content: $fa-var-ban; } +.#{$fa-css-prefix}-arrow-left:before { content: $fa-var-arrow-left; } +.#{$fa-css-prefix}-arrow-right:before { content: $fa-var-arrow-right; } +.#{$fa-css-prefix}-arrow-up:before { content: $fa-var-arrow-up; } +.#{$fa-css-prefix}-arrow-down:before { content: $fa-var-arrow-down; } +.#{$fa-css-prefix}-mail-forward:before, +.#{$fa-css-prefix}-share:before { content: $fa-var-share; } +.#{$fa-css-prefix}-expand:before { content: $fa-var-expand; } +.#{$fa-css-prefix}-compress:before { content: $fa-var-compress; } +.#{$fa-css-prefix}-plus:before { content: $fa-var-plus; } +.#{$fa-css-prefix}-minus:before { content: $fa-var-minus; } +.#{$fa-css-prefix}-asterisk:before { content: $fa-var-asterisk; } +.#{$fa-css-prefix}-exclamation-circle:before { content: $fa-var-exclamation-circle; } +.#{$fa-css-prefix}-gift:before { content: $fa-var-gift; } +.#{$fa-css-prefix}-leaf:before { content: $fa-var-leaf; } +.#{$fa-css-prefix}-fire:before { content: $fa-var-fire; } +.#{$fa-css-prefix}-eye:before { content: $fa-var-eye; } +.#{$fa-css-prefix}-eye-slash:before { content: $fa-var-eye-slash; } +.#{$fa-css-prefix}-warning:before, +.#{$fa-css-prefix}-exclamation-triangle:before { content: $fa-var-exclamation-triangle; } +.#{$fa-css-prefix}-plane:before { content: $fa-var-plane; } +.#{$fa-css-prefix}-calendar:before { content: $fa-var-calendar; } +.#{$fa-css-prefix}-random:before { content: $fa-var-random; } +.#{$fa-css-prefix}-comment:before { content: $fa-var-comment; } +.#{$fa-css-prefix}-magnet:before { content: $fa-var-magnet; } +.#{$fa-css-prefix}-chevron-up:before { content: $fa-var-chevron-up; } +.#{$fa-css-prefix}-chevron-down:before { content: $fa-var-chevron-down; } +.#{$fa-css-prefix}-retweet:before { content: $fa-var-retweet; } +.#{$fa-css-prefix}-shopping-cart:before { content: $fa-var-shopping-cart; } +.#{$fa-css-prefix}-folder:before { content: $fa-var-folder; } +.#{$fa-css-prefix}-folder-open:before { content: $fa-var-folder-open; } +.#{$fa-css-prefix}-arrows-v:before { content: $fa-var-arrows-v; } +.#{$fa-css-prefix}-arrows-h:before { content: $fa-var-arrows-h; } +.#{$fa-css-prefix}-bar-chart-o:before, +.#{$fa-css-prefix}-bar-chart:before { content: $fa-var-bar-chart; } +.#{$fa-css-prefix}-twitter-square:before { content: $fa-var-twitter-square; } +.#{$fa-css-prefix}-facebook-square:before { content: $fa-var-facebook-square; } +.#{$fa-css-prefix}-camera-retro:before { content: $fa-var-camera-retro; } +.#{$fa-css-prefix}-key:before { content: $fa-var-key; } +.#{$fa-css-prefix}-gears:before, +.#{$fa-css-prefix}-cogs:before { content: $fa-var-cogs; } +.#{$fa-css-prefix}-comments:before { content: $fa-var-comments; } +.#{$fa-css-prefix}-thumbs-o-up:before { content: $fa-var-thumbs-o-up; } +.#{$fa-css-prefix}-thumbs-o-down:before { content: $fa-var-thumbs-o-down; } +.#{$fa-css-prefix}-star-half:before { content: $fa-var-star-half; } +.#{$fa-css-prefix}-heart-o:before { content: $fa-var-heart-o; } +.#{$fa-css-prefix}-sign-out:before { content: $fa-var-sign-out; } +.#{$fa-css-prefix}-linkedin-square:before { content: $fa-var-linkedin-square; } +.#{$fa-css-prefix}-thumb-tack:before { content: $fa-var-thumb-tack; } +.#{$fa-css-prefix}-external-link:before { content: $fa-var-external-link; } +.#{$fa-css-prefix}-sign-in:before { content: $fa-var-sign-in; } +.#{$fa-css-prefix}-trophy:before { content: $fa-var-trophy; } +.#{$fa-css-prefix}-github-square:before { content: $fa-var-github-square; } +.#{$fa-css-prefix}-upload:before { content: $fa-var-upload; } +.#{$fa-css-prefix}-lemon-o:before { content: $fa-var-lemon-o; } +.#{$fa-css-prefix}-phone:before { content: $fa-var-phone; } +.#{$fa-css-prefix}-square-o:before { content: $fa-var-square-o; } +.#{$fa-css-prefix}-bookmark-o:before { content: $fa-var-bookmark-o; } +.#{$fa-css-prefix}-phone-square:before { content: $fa-var-phone-square; } +.#{$fa-css-prefix}-twitter:before { content: $fa-var-twitter; } +.#{$fa-css-prefix}-facebook:before { content: $fa-var-facebook; } +.#{$fa-css-prefix}-github:before { content: $fa-var-github; } +.#{$fa-css-prefix}-unlock:before { content: $fa-var-unlock; } +.#{$fa-css-prefix}-credit-card:before { content: $fa-var-credit-card; } +.#{$fa-css-prefix}-rss:before { content: $fa-var-rss; } +.#{$fa-css-prefix}-hdd-o:before { content: $fa-var-hdd-o; } +.#{$fa-css-prefix}-bullhorn:before { content: $fa-var-bullhorn; } +.#{$fa-css-prefix}-bell:before { content: $fa-var-bell; } +.#{$fa-css-prefix}-certificate:before { content: $fa-var-certificate; } +.#{$fa-css-prefix}-hand-o-right:before { content: $fa-var-hand-o-right; } +.#{$fa-css-prefix}-hand-o-left:before { content: $fa-var-hand-o-left; } +.#{$fa-css-prefix}-hand-o-up:before { content: $fa-var-hand-o-up; } +.#{$fa-css-prefix}-hand-o-down:before { content: $fa-var-hand-o-down; } +.#{$fa-css-prefix}-arrow-circle-left:before { content: $fa-var-arrow-circle-left; } +.#{$fa-css-prefix}-arrow-circle-right:before { content: $fa-var-arrow-circle-right; } +.#{$fa-css-prefix}-arrow-circle-up:before { content: $fa-var-arrow-circle-up; } +.#{$fa-css-prefix}-arrow-circle-down:before { content: $fa-var-arrow-circle-down; } +.#{$fa-css-prefix}-globe:before { content: $fa-var-globe; } +.#{$fa-css-prefix}-wrench:before { content: $fa-var-wrench; } +.#{$fa-css-prefix}-tasks:before { content: $fa-var-tasks; } +.#{$fa-css-prefix}-filter:before { content: $fa-var-filter; } +.#{$fa-css-prefix}-briefcase:before { content: $fa-var-briefcase; } +.#{$fa-css-prefix}-arrows-alt:before { content: $fa-var-arrows-alt; } +.#{$fa-css-prefix}-group:before, +.#{$fa-css-prefix}-users:before { content: $fa-var-users; } +.#{$fa-css-prefix}-chain:before, +.#{$fa-css-prefix}-link:before { content: $fa-var-link; } +.#{$fa-css-prefix}-cloud:before { content: $fa-var-cloud; } +.#{$fa-css-prefix}-flask:before { content: $fa-var-flask; } +.#{$fa-css-prefix}-cut:before, +.#{$fa-css-prefix}-scissors:before { content: $fa-var-scissors; } +.#{$fa-css-prefix}-copy:before, +.#{$fa-css-prefix}-files-o:before { content: $fa-var-files-o; } +.#{$fa-css-prefix}-paperclip:before { content: $fa-var-paperclip; } +.#{$fa-css-prefix}-save:before, +.#{$fa-css-prefix}-floppy-o:before { content: $fa-var-floppy-o; } +.#{$fa-css-prefix}-square:before { content: $fa-var-square; } +.#{$fa-css-prefix}-navicon:before, +.#{$fa-css-prefix}-reorder:before, +.#{$fa-css-prefix}-bars:before { content: $fa-var-bars; } +.#{$fa-css-prefix}-list-ul:before { content: $fa-var-list-ul; } +.#{$fa-css-prefix}-list-ol:before { content: $fa-var-list-ol; } +.#{$fa-css-prefix}-strikethrough:before { content: $fa-var-strikethrough; } +.#{$fa-css-prefix}-underline:before { content: $fa-var-underline; } +.#{$fa-css-prefix}-table:before { content: $fa-var-table; } +.#{$fa-css-prefix}-magic:before { content: $fa-var-magic; } +.#{$fa-css-prefix}-truck:before { content: $fa-var-truck; } +.#{$fa-css-prefix}-pinterest:before { content: $fa-var-pinterest; } +.#{$fa-css-prefix}-pinterest-square:before { content: $fa-var-pinterest-square; } +.#{$fa-css-prefix}-google-plus-square:before { content: $fa-var-google-plus-square; } +.#{$fa-css-prefix}-google-plus:before { content: $fa-var-google-plus; } +.#{$fa-css-prefix}-money:before { content: $fa-var-money; } +.#{$fa-css-prefix}-caret-down:before { content: $fa-var-caret-down; } +.#{$fa-css-prefix}-caret-up:before { content: $fa-var-caret-up; } +.#{$fa-css-prefix}-caret-left:before { content: $fa-var-caret-left; } +.#{$fa-css-prefix}-caret-right:before { content: $fa-var-caret-right; } +.#{$fa-css-prefix}-columns:before { content: $fa-var-columns; } +.#{$fa-css-prefix}-unsorted:before, +.#{$fa-css-prefix}-sort:before { content: $fa-var-sort; } +.#{$fa-css-prefix}-sort-down:before, +.#{$fa-css-prefix}-sort-desc:before { content: $fa-var-sort-desc; } +.#{$fa-css-prefix}-sort-up:before, +.#{$fa-css-prefix}-sort-asc:before { content: $fa-var-sort-asc; } +.#{$fa-css-prefix}-envelope:before { content: $fa-var-envelope; } +.#{$fa-css-prefix}-linkedin:before { content: $fa-var-linkedin; } +.#{$fa-css-prefix}-rotate-left:before, +.#{$fa-css-prefix}-undo:before { content: $fa-var-undo; } +.#{$fa-css-prefix}-legal:before, +.#{$fa-css-prefix}-gavel:before { content: $fa-var-gavel; } +.#{$fa-css-prefix}-dashboard:before, +.#{$fa-css-prefix}-tachometer:before { content: $fa-var-tachometer; } +.#{$fa-css-prefix}-comment-o:before { content: $fa-var-comment-o; } +.#{$fa-css-prefix}-comments-o:before { content: $fa-var-comments-o; } +.#{$fa-css-prefix}-flash:before, +.#{$fa-css-prefix}-bolt:before { content: $fa-var-bolt; } +.#{$fa-css-prefix}-sitemap:before { content: $fa-var-sitemap; } +.#{$fa-css-prefix}-umbrella:before { content: $fa-var-umbrella; } +.#{$fa-css-prefix}-paste:before, +.#{$fa-css-prefix}-clipboard:before { content: $fa-var-clipboard; } +.#{$fa-css-prefix}-lightbulb-o:before { content: $fa-var-lightbulb-o; } +.#{$fa-css-prefix}-exchange:before { content: $fa-var-exchange; } +.#{$fa-css-prefix}-cloud-download:before { content: $fa-var-cloud-download; } +.#{$fa-css-prefix}-cloud-upload:before { content: $fa-var-cloud-upload; } +.#{$fa-css-prefix}-user-md:before { content: $fa-var-user-md; } +.#{$fa-css-prefix}-stethoscope:before { content: $fa-var-stethoscope; } +.#{$fa-css-prefix}-suitcase:before { content: $fa-var-suitcase; } +.#{$fa-css-prefix}-bell-o:before { content: $fa-var-bell-o; } +.#{$fa-css-prefix}-coffee:before { content: $fa-var-coffee; } +.#{$fa-css-prefix}-cutlery:before { content: $fa-var-cutlery; } +.#{$fa-css-prefix}-file-text-o:before { content: $fa-var-file-text-o; } +.#{$fa-css-prefix}-building-o:before { content: $fa-var-building-o; } +.#{$fa-css-prefix}-hospital-o:before { content: $fa-var-hospital-o; } +.#{$fa-css-prefix}-ambulance:before { content: $fa-var-ambulance; } +.#{$fa-css-prefix}-medkit:before { content: $fa-var-medkit; } +.#{$fa-css-prefix}-fighter-jet:before { content: $fa-var-fighter-jet; } +.#{$fa-css-prefix}-beer:before { content: $fa-var-beer; } +.#{$fa-css-prefix}-h-square:before { content: $fa-var-h-square; } +.#{$fa-css-prefix}-plus-square:before { content: $fa-var-plus-square; } +.#{$fa-css-prefix}-angle-double-left:before { content: $fa-var-angle-double-left; } +.#{$fa-css-prefix}-angle-double-right:before { content: $fa-var-angle-double-right; } +.#{$fa-css-prefix}-angle-double-up:before { content: $fa-var-angle-double-up; } +.#{$fa-css-prefix}-angle-double-down:before { content: $fa-var-angle-double-down; } +.#{$fa-css-prefix}-angle-left:before { content: $fa-var-angle-left; } +.#{$fa-css-prefix}-angle-right:before { content: $fa-var-angle-right; } +.#{$fa-css-prefix}-angle-up:before { content: $fa-var-angle-up; } +.#{$fa-css-prefix}-angle-down:before { content: $fa-var-angle-down; } +.#{$fa-css-prefix}-desktop:before { content: $fa-var-desktop; } +.#{$fa-css-prefix}-laptop:before { content: $fa-var-laptop; } +.#{$fa-css-prefix}-tablet:before { content: $fa-var-tablet; } +.#{$fa-css-prefix}-mobile-phone:before, +.#{$fa-css-prefix}-mobile:before { content: $fa-var-mobile; } +.#{$fa-css-prefix}-circle-o:before { content: $fa-var-circle-o; } +.#{$fa-css-prefix}-quote-left:before { content: $fa-var-quote-left; } +.#{$fa-css-prefix}-quote-right:before { content: $fa-var-quote-right; } +.#{$fa-css-prefix}-spinner:before { content: $fa-var-spinner; } +.#{$fa-css-prefix}-circle:before { content: $fa-var-circle; } +.#{$fa-css-prefix}-mail-reply:before, +.#{$fa-css-prefix}-reply:before { content: $fa-var-reply; } +.#{$fa-css-prefix}-github-alt:before { content: $fa-var-github-alt; } +.#{$fa-css-prefix}-folder-o:before { content: $fa-var-folder-o; } +.#{$fa-css-prefix}-folder-open-o:before { content: $fa-var-folder-open-o; } +.#{$fa-css-prefix}-smile-o:before { content: $fa-var-smile-o; } +.#{$fa-css-prefix}-frown-o:before { content: $fa-var-frown-o; } +.#{$fa-css-prefix}-meh-o:before { content: $fa-var-meh-o; } +.#{$fa-css-prefix}-gamepad:before { content: $fa-var-gamepad; } +.#{$fa-css-prefix}-keyboard-o:before { content: $fa-var-keyboard-o; } +.#{$fa-css-prefix}-flag-o:before { content: $fa-var-flag-o; } +.#{$fa-css-prefix}-flag-checkered:before { content: $fa-var-flag-checkered; } +.#{$fa-css-prefix}-terminal:before { content: $fa-var-terminal; } +.#{$fa-css-prefix}-code:before { content: $fa-var-code; } +.#{$fa-css-prefix}-mail-reply-all:before, +.#{$fa-css-prefix}-reply-all:before { content: $fa-var-reply-all; } +.#{$fa-css-prefix}-star-half-empty:before, +.#{$fa-css-prefix}-star-half-full:before, +.#{$fa-css-prefix}-star-half-o:before { content: $fa-var-star-half-o; } +.#{$fa-css-prefix}-location-arrow:before { content: $fa-var-location-arrow; } +.#{$fa-css-prefix}-crop:before { content: $fa-var-crop; } +.#{$fa-css-prefix}-code-fork:before { content: $fa-var-code-fork; } +.#{$fa-css-prefix}-unlink:before, +.#{$fa-css-prefix}-chain-broken:before { content: $fa-var-chain-broken; } +.#{$fa-css-prefix}-question:before { content: $fa-var-question; } +.#{$fa-css-prefix}-info:before { content: $fa-var-info; } +.#{$fa-css-prefix}-exclamation:before { content: $fa-var-exclamation; } +.#{$fa-css-prefix}-superscript:before { content: $fa-var-superscript; } +.#{$fa-css-prefix}-subscript:before { content: $fa-var-subscript; } +.#{$fa-css-prefix}-eraser:before { content: $fa-var-eraser; } +.#{$fa-css-prefix}-puzzle-piece:before { content: $fa-var-puzzle-piece; } +.#{$fa-css-prefix}-microphone:before { content: $fa-var-microphone; } +.#{$fa-css-prefix}-microphone-slash:before { content: $fa-var-microphone-slash; } +.#{$fa-css-prefix}-shield:before { content: $fa-var-shield; } +.#{$fa-css-prefix}-calendar-o:before { content: $fa-var-calendar-o; } +.#{$fa-css-prefix}-fire-extinguisher:before { content: $fa-var-fire-extinguisher; } +.#{$fa-css-prefix}-rocket:before { content: $fa-var-rocket; } +.#{$fa-css-prefix}-maxcdn:before { content: $fa-var-maxcdn; } +.#{$fa-css-prefix}-chevron-circle-left:before { content: $fa-var-chevron-circle-left; } +.#{$fa-css-prefix}-chevron-circle-right:before { content: $fa-var-chevron-circle-right; } +.#{$fa-css-prefix}-chevron-circle-up:before { content: $fa-var-chevron-circle-up; } +.#{$fa-css-prefix}-chevron-circle-down:before { content: $fa-var-chevron-circle-down; } +.#{$fa-css-prefix}-html5:before { content: $fa-var-html5; } +.#{$fa-css-prefix}-css3:before { content: $fa-var-css3; } +.#{$fa-css-prefix}-anchor:before { content: $fa-var-anchor; } +.#{$fa-css-prefix}-unlock-alt:before { content: $fa-var-unlock-alt; } +.#{$fa-css-prefix}-bullseye:before { content: $fa-var-bullseye; } +.#{$fa-css-prefix}-ellipsis-h:before { content: $fa-var-ellipsis-h; } +.#{$fa-css-prefix}-ellipsis-v:before { content: $fa-var-ellipsis-v; } +.#{$fa-css-prefix}-rss-square:before { content: $fa-var-rss-square; } +.#{$fa-css-prefix}-play-circle:before { content: $fa-var-play-circle; } +.#{$fa-css-prefix}-ticket:before { content: $fa-var-ticket; } +.#{$fa-css-prefix}-minus-square:before { content: $fa-var-minus-square; } +.#{$fa-css-prefix}-minus-square-o:before { content: $fa-var-minus-square-o; } +.#{$fa-css-prefix}-level-up:before { content: $fa-var-level-up; } +.#{$fa-css-prefix}-level-down:before { content: $fa-var-level-down; } +.#{$fa-css-prefix}-check-square:before { content: $fa-var-check-square; } +.#{$fa-css-prefix}-pencil-square:before { content: $fa-var-pencil-square; } +.#{$fa-css-prefix}-external-link-square:before { content: $fa-var-external-link-square; } +.#{$fa-css-prefix}-share-square:before { content: $fa-var-share-square; } +.#{$fa-css-prefix}-compass:before { content: $fa-var-compass; } +.#{$fa-css-prefix}-toggle-down:before, +.#{$fa-css-prefix}-caret-square-o-down:before { content: $fa-var-caret-square-o-down; } +.#{$fa-css-prefix}-toggle-up:before, +.#{$fa-css-prefix}-caret-square-o-up:before { content: $fa-var-caret-square-o-up; } +.#{$fa-css-prefix}-toggle-right:before, +.#{$fa-css-prefix}-caret-square-o-right:before { content: $fa-var-caret-square-o-right; } +.#{$fa-css-prefix}-euro:before, +.#{$fa-css-prefix}-eur:before { content: $fa-var-eur; } +.#{$fa-css-prefix}-gbp:before { content: $fa-var-gbp; } +.#{$fa-css-prefix}-dollar:before, +.#{$fa-css-prefix}-usd:before { content: $fa-var-usd; } +.#{$fa-css-prefix}-rupee:before, +.#{$fa-css-prefix}-inr:before { content: $fa-var-inr; } +.#{$fa-css-prefix}-cny:before, +.#{$fa-css-prefix}-rmb:before, +.#{$fa-css-prefix}-yen:before, +.#{$fa-css-prefix}-jpy:before { content: $fa-var-jpy; } +.#{$fa-css-prefix}-ruble:before, +.#{$fa-css-prefix}-rouble:before, +.#{$fa-css-prefix}-rub:before { content: $fa-var-rub; } +.#{$fa-css-prefix}-won:before, +.#{$fa-css-prefix}-krw:before { content: $fa-var-krw; } +.#{$fa-css-prefix}-bitcoin:before, +.#{$fa-css-prefix}-btc:before { content: $fa-var-btc; } +.#{$fa-css-prefix}-file:before { content: $fa-var-file; } +.#{$fa-css-prefix}-file-text:before { content: $fa-var-file-text; } +.#{$fa-css-prefix}-sort-alpha-asc:before { content: $fa-var-sort-alpha-asc; } +.#{$fa-css-prefix}-sort-alpha-desc:before { content: $fa-var-sort-alpha-desc; } +.#{$fa-css-prefix}-sort-amount-asc:before { content: $fa-var-sort-amount-asc; } +.#{$fa-css-prefix}-sort-amount-desc:before { content: $fa-var-sort-amount-desc; } +.#{$fa-css-prefix}-sort-numeric-asc:before { content: $fa-var-sort-numeric-asc; } +.#{$fa-css-prefix}-sort-numeric-desc:before { content: $fa-var-sort-numeric-desc; } +.#{$fa-css-prefix}-thumbs-up:before { content: $fa-var-thumbs-up; } +.#{$fa-css-prefix}-thumbs-down:before { content: $fa-var-thumbs-down; } +.#{$fa-css-prefix}-youtube-square:before { content: $fa-var-youtube-square; } +.#{$fa-css-prefix}-youtube:before { content: $fa-var-youtube; } +.#{$fa-css-prefix}-xing:before { content: $fa-var-xing; } +.#{$fa-css-prefix}-xing-square:before { content: $fa-var-xing-square; } +.#{$fa-css-prefix}-youtube-play:before { content: $fa-var-youtube-play; } +.#{$fa-css-prefix}-dropbox:before { content: $fa-var-dropbox; } +.#{$fa-css-prefix}-stack-overflow:before { content: $fa-var-stack-overflow; } +.#{$fa-css-prefix}-instagram:before { content: $fa-var-instagram; } +.#{$fa-css-prefix}-flickr:before { content: $fa-var-flickr; } +.#{$fa-css-prefix}-adn:before { content: $fa-var-adn; } +.#{$fa-css-prefix}-bitbucket:before { content: $fa-var-bitbucket; } +.#{$fa-css-prefix}-bitbucket-square:before { content: $fa-var-bitbucket-square; } +.#{$fa-css-prefix}-tumblr:before { content: $fa-var-tumblr; } +.#{$fa-css-prefix}-tumblr-square:before { content: $fa-var-tumblr-square; } +.#{$fa-css-prefix}-long-arrow-down:before { content: $fa-var-long-arrow-down; } +.#{$fa-css-prefix}-long-arrow-up:before { content: $fa-var-long-arrow-up; } +.#{$fa-css-prefix}-long-arrow-left:before { content: $fa-var-long-arrow-left; } +.#{$fa-css-prefix}-long-arrow-right:before { content: $fa-var-long-arrow-right; } +.#{$fa-css-prefix}-apple:before { content: $fa-var-apple; } +.#{$fa-css-prefix}-windows:before { content: $fa-var-windows; } +.#{$fa-css-prefix}-android:before { content: $fa-var-android; } +.#{$fa-css-prefix}-linux:before { content: $fa-var-linux; } +.#{$fa-css-prefix}-dribbble:before { content: $fa-var-dribbble; } +.#{$fa-css-prefix}-skype:before { content: $fa-var-skype; } +.#{$fa-css-prefix}-foursquare:before { content: $fa-var-foursquare; } +.#{$fa-css-prefix}-trello:before { content: $fa-var-trello; } +.#{$fa-css-prefix}-female:before { content: $fa-var-female; } +.#{$fa-css-prefix}-male:before { content: $fa-var-male; } +.#{$fa-css-prefix}-gittip:before { content: $fa-var-gittip; } +.#{$fa-css-prefix}-sun-o:before { content: $fa-var-sun-o; } +.#{$fa-css-prefix}-moon-o:before { content: $fa-var-moon-o; } +.#{$fa-css-prefix}-archive:before { content: $fa-var-archive; } +.#{$fa-css-prefix}-bug:before { content: $fa-var-bug; } +.#{$fa-css-prefix}-vk:before { content: $fa-var-vk; } +.#{$fa-css-prefix}-weibo:before { content: $fa-var-weibo; } +.#{$fa-css-prefix}-renren:before { content: $fa-var-renren; } +.#{$fa-css-prefix}-pagelines:before { content: $fa-var-pagelines; } +.#{$fa-css-prefix}-stack-exchange:before { content: $fa-var-stack-exchange; } +.#{$fa-css-prefix}-arrow-circle-o-right:before { content: $fa-var-arrow-circle-o-right; } +.#{$fa-css-prefix}-arrow-circle-o-left:before { content: $fa-var-arrow-circle-o-left; } +.#{$fa-css-prefix}-toggle-left:before, +.#{$fa-css-prefix}-caret-square-o-left:before { content: $fa-var-caret-square-o-left; } +.#{$fa-css-prefix}-dot-circle-o:before { content: $fa-var-dot-circle-o; } +.#{$fa-css-prefix}-wheelchair:before { content: $fa-var-wheelchair; } +.#{$fa-css-prefix}-vimeo-square:before { content: $fa-var-vimeo-square; } +.#{$fa-css-prefix}-turkish-lira:before, +.#{$fa-css-prefix}-try:before { content: $fa-var-try; } +.#{$fa-css-prefix}-plus-square-o:before { content: $fa-var-plus-square-o; } +.#{$fa-css-prefix}-space-shuttle:before { content: $fa-var-space-shuttle; } +.#{$fa-css-prefix}-slack:before { content: $fa-var-slack; } +.#{$fa-css-prefix}-envelope-square:before { content: $fa-var-envelope-square; } +.#{$fa-css-prefix}-wordpress:before { content: $fa-var-wordpress; } +.#{$fa-css-prefix}-openid:before { content: $fa-var-openid; } +.#{$fa-css-prefix}-institution:before, +.#{$fa-css-prefix}-bank:before, +.#{$fa-css-prefix}-university:before { content: $fa-var-university; } +.#{$fa-css-prefix}-mortar-board:before, +.#{$fa-css-prefix}-graduation-cap:before { content: $fa-var-graduation-cap; } +.#{$fa-css-prefix}-yahoo:before { content: $fa-var-yahoo; } +.#{$fa-css-prefix}-google:before { content: $fa-var-google; } +.#{$fa-css-prefix}-reddit:before { content: $fa-var-reddit; } +.#{$fa-css-prefix}-reddit-square:before { content: $fa-var-reddit-square; } +.#{$fa-css-prefix}-stumbleupon-circle:before { content: $fa-var-stumbleupon-circle; } +.#{$fa-css-prefix}-stumbleupon:before { content: $fa-var-stumbleupon; } +.#{$fa-css-prefix}-delicious:before { content: $fa-var-delicious; } +.#{$fa-css-prefix}-digg:before { content: $fa-var-digg; } +.#{$fa-css-prefix}-pied-piper:before { content: $fa-var-pied-piper; } +.#{$fa-css-prefix}-pied-piper-alt:before { content: $fa-var-pied-piper-alt; } +.#{$fa-css-prefix}-drupal:before { content: $fa-var-drupal; } +.#{$fa-css-prefix}-joomla:before { content: $fa-var-joomla; } +.#{$fa-css-prefix}-language:before { content: $fa-var-language; } +.#{$fa-css-prefix}-fax:before { content: $fa-var-fax; } +.#{$fa-css-prefix}-building:before { content: $fa-var-building; } +.#{$fa-css-prefix}-child:before { content: $fa-var-child; } +.#{$fa-css-prefix}-paw:before { content: $fa-var-paw; } +.#{$fa-css-prefix}-spoon:before { content: $fa-var-spoon; } +.#{$fa-css-prefix}-cube:before { content: $fa-var-cube; } +.#{$fa-css-prefix}-cubes:before { content: $fa-var-cubes; } +.#{$fa-css-prefix}-behance:before { content: $fa-var-behance; } +.#{$fa-css-prefix}-behance-square:before { content: $fa-var-behance-square; } +.#{$fa-css-prefix}-steam:before { content: $fa-var-steam; } +.#{$fa-css-prefix}-steam-square:before { content: $fa-var-steam-square; } +.#{$fa-css-prefix}-recycle:before { content: $fa-var-recycle; } +.#{$fa-css-prefix}-automobile:before, +.#{$fa-css-prefix}-car:before { content: $fa-var-car; } +.#{$fa-css-prefix}-cab:before, +.#{$fa-css-prefix}-taxi:before { content: $fa-var-taxi; } +.#{$fa-css-prefix}-tree:before { content: $fa-var-tree; } +.#{$fa-css-prefix}-spotify:before { content: $fa-var-spotify; } +.#{$fa-css-prefix}-deviantart:before { content: $fa-var-deviantart; } +.#{$fa-css-prefix}-soundcloud:before { content: $fa-var-soundcloud; } +.#{$fa-css-prefix}-database:before { content: $fa-var-database; } +.#{$fa-css-prefix}-file-pdf-o:before { content: $fa-var-file-pdf-o; } +.#{$fa-css-prefix}-file-word-o:before { content: $fa-var-file-word-o; } +.#{$fa-css-prefix}-file-excel-o:before { content: $fa-var-file-excel-o; } +.#{$fa-css-prefix}-file-powerpoint-o:before { content: $fa-var-file-powerpoint-o; } +.#{$fa-css-prefix}-file-photo-o:before, +.#{$fa-css-prefix}-file-picture-o:before, +.#{$fa-css-prefix}-file-image-o:before { content: $fa-var-file-image-o; } +.#{$fa-css-prefix}-file-zip-o:before, +.#{$fa-css-prefix}-file-archive-o:before { content: $fa-var-file-archive-o; } +.#{$fa-css-prefix}-file-sound-o:before, +.#{$fa-css-prefix}-file-audio-o:before { content: $fa-var-file-audio-o; } +.#{$fa-css-prefix}-file-movie-o:before, +.#{$fa-css-prefix}-file-video-o:before { content: $fa-var-file-video-o; } +.#{$fa-css-prefix}-file-code-o:before { content: $fa-var-file-code-o; } +.#{$fa-css-prefix}-vine:before { content: $fa-var-vine; } +.#{$fa-css-prefix}-codepen:before { content: $fa-var-codepen; } +.#{$fa-css-prefix}-jsfiddle:before { content: $fa-var-jsfiddle; } +.#{$fa-css-prefix}-life-bouy:before, +.#{$fa-css-prefix}-life-buoy:before, +.#{$fa-css-prefix}-life-saver:before, +.#{$fa-css-prefix}-support:before, +.#{$fa-css-prefix}-life-ring:before { content: $fa-var-life-ring; } +.#{$fa-css-prefix}-circle-o-notch:before { content: $fa-var-circle-o-notch; } +.#{$fa-css-prefix}-ra:before, +.#{$fa-css-prefix}-rebel:before { content: $fa-var-rebel; } +.#{$fa-css-prefix}-ge:before, +.#{$fa-css-prefix}-empire:before { content: $fa-var-empire; } +.#{$fa-css-prefix}-git-square:before { content: $fa-var-git-square; } +.#{$fa-css-prefix}-git:before { content: $fa-var-git; } +.#{$fa-css-prefix}-hacker-news:before { content: $fa-var-hacker-news; } +.#{$fa-css-prefix}-tencent-weibo:before { content: $fa-var-tencent-weibo; } +.#{$fa-css-prefix}-qq:before { content: $fa-var-qq; } +.#{$fa-css-prefix}-wechat:before, +.#{$fa-css-prefix}-weixin:before { content: $fa-var-weixin; } +.#{$fa-css-prefix}-send:before, +.#{$fa-css-prefix}-paper-plane:before { content: $fa-var-paper-plane; } +.#{$fa-css-prefix}-send-o:before, +.#{$fa-css-prefix}-paper-plane-o:before { content: $fa-var-paper-plane-o; } +.#{$fa-css-prefix}-history:before { content: $fa-var-history; } +.#{$fa-css-prefix}-circle-thin:before { content: $fa-var-circle-thin; } +.#{$fa-css-prefix}-header:before { content: $fa-var-header; } +.#{$fa-css-prefix}-paragraph:before { content: $fa-var-paragraph; } +.#{$fa-css-prefix}-sliders:before { content: $fa-var-sliders; } +.#{$fa-css-prefix}-share-alt:before { content: $fa-var-share-alt; } +.#{$fa-css-prefix}-share-alt-square:before { content: $fa-var-share-alt-square; } +.#{$fa-css-prefix}-bomb:before { content: $fa-var-bomb; } +.#{$fa-css-prefix}-soccer-ball-o:before, +.#{$fa-css-prefix}-futbol-o:before { content: $fa-var-futbol-o; } +.#{$fa-css-prefix}-tty:before { content: $fa-var-tty; } +.#{$fa-css-prefix}-binoculars:before { content: $fa-var-binoculars; } +.#{$fa-css-prefix}-plug:before { content: $fa-var-plug; } +.#{$fa-css-prefix}-slideshare:before { content: $fa-var-slideshare; } +.#{$fa-css-prefix}-twitch:before { content: $fa-var-twitch; } +.#{$fa-css-prefix}-yelp:before { content: $fa-var-yelp; } +.#{$fa-css-prefix}-newspaper-o:before { content: $fa-var-newspaper-o; } +.#{$fa-css-prefix}-wifi:before { content: $fa-var-wifi; } +.#{$fa-css-prefix}-calculator:before { content: $fa-var-calculator; } +.#{$fa-css-prefix}-paypal:before { content: $fa-var-paypal; } +.#{$fa-css-prefix}-google-wallet:before { content: $fa-var-google-wallet; } +.#{$fa-css-prefix}-cc-visa:before { content: $fa-var-cc-visa; } +.#{$fa-css-prefix}-cc-mastercard:before { content: $fa-var-cc-mastercard; } +.#{$fa-css-prefix}-cc-discover:before { content: $fa-var-cc-discover; } +.#{$fa-css-prefix}-cc-amex:before { content: $fa-var-cc-amex; } +.#{$fa-css-prefix}-cc-paypal:before { content: $fa-var-cc-paypal; } +.#{$fa-css-prefix}-cc-stripe:before { content: $fa-var-cc-stripe; } +.#{$fa-css-prefix}-bell-slash:before { content: $fa-var-bell-slash; } +.#{$fa-css-prefix}-bell-slash-o:before { content: $fa-var-bell-slash-o; } +.#{$fa-css-prefix}-trash:before { content: $fa-var-trash; } +.#{$fa-css-prefix}-copyright:before { content: $fa-var-copyright; } +.#{$fa-css-prefix}-at:before { content: $fa-var-at; } +.#{$fa-css-prefix}-eyedropper:before { content: $fa-var-eyedropper; } +.#{$fa-css-prefix}-paint-brush:before { content: $fa-var-paint-brush; } +.#{$fa-css-prefix}-birthday-cake:before { content: $fa-var-birthday-cake; } +.#{$fa-css-prefix}-area-chart:before { content: $fa-var-area-chart; } +.#{$fa-css-prefix}-pie-chart:before { content: $fa-var-pie-chart; } +.#{$fa-css-prefix}-line-chart:before { content: $fa-var-line-chart; } +.#{$fa-css-prefix}-lastfm:before { content: $fa-var-lastfm; } +.#{$fa-css-prefix}-lastfm-square:before { content: $fa-var-lastfm-square; } +.#{$fa-css-prefix}-toggle-off:before { content: $fa-var-toggle-off; } +.#{$fa-css-prefix}-toggle-on:before { content: $fa-var-toggle-on; } +.#{$fa-css-prefix}-bicycle:before { content: $fa-var-bicycle; } +.#{$fa-css-prefix}-bus:before { content: $fa-var-bus; } +.#{$fa-css-prefix}-ioxhost:before { content: $fa-var-ioxhost; } +.#{$fa-css-prefix}-angellist:before { content: $fa-var-angellist; } +.#{$fa-css-prefix}-cc:before { content: $fa-var-cc; } +.#{$fa-css-prefix}-shekel:before, +.#{$fa-css-prefix}-sheqel:before, +.#{$fa-css-prefix}-ils:before { content: $fa-var-ils; } +.#{$fa-css-prefix}-meanpath:before { content: $fa-var-meanpath; } diff --git a/_sass/font-awesome/_larger.scss b/_sass/font-awesome/_larger.scss new file mode 100644 index 0000000000..d76b24067a --- /dev/null +++ b/_sass/font-awesome/_larger.scss @@ -0,0 +1,13 @@ +// Icon Sizes +// ------------------------- + +/* makes the font 33% larger relative to the icon container */ +.#{$fa-css-prefix}-lg { + font-size: calc(4em / 3); + line-height: calc(3em / 4); + vertical-align: -15%; +} +.#{$fa-css-prefix}-2x { font-size: 2em; } +.#{$fa-css-prefix}-3x { font-size: 3em; } +.#{$fa-css-prefix}-4x { font-size: 4em; } +.#{$fa-css-prefix}-5x { font-size: 5em; } diff --git a/_sass/font-awesome/_list.scss b/_sass/font-awesome/_list.scss new file mode 100644 index 0000000000..30bdd5a0f8 --- /dev/null +++ b/_sass/font-awesome/_list.scss @@ -0,0 +1,19 @@ +// List Icons +// ------------------------- + +.#{$fa-css-prefix}-ul { + padding-left: 0; + margin-left: $fa-li-width; + list-style-type: none; + > li { position: relative; } +} +.#{$fa-css-prefix}-li { + position: absolute; + left: -$fa-li-width; + width: $fa-li-width; + top: calc(2em / 14); + text-align: center; + &.#{$fa-css-prefix}-lg { + left: -$fa-li-width + calc(4em / 14); + } +} diff --git a/_sass/font-awesome/_mixins.scss b/_sass/font-awesome/_mixins.scss new file mode 100644 index 0000000000..a139dfb30e --- /dev/null +++ b/_sass/font-awesome/_mixins.scss @@ -0,0 +1,25 @@ +// Mixins +// -------------------------- + +@mixin fa-icon() { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; // shortening font declaration + font-size: inherit; // can't have font-size inherit on line above, so need to override + text-rendering: auto; // optimizelegibility throws things off #1094 + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +@mixin fa-icon-rotate($degrees, $rotation) { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); + -webkit-transform: rotate($degrees); + -ms-transform: rotate($degrees); + transform: rotate($degrees); +} + +@mixin fa-icon-flip($horiz, $vert, $rotation) { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); + -webkit-transform: scale($horiz, $vert); + -ms-transform: scale($horiz, $vert); + transform: scale($horiz, $vert); +} diff --git a/_sass/font-awesome/_path.scss b/_sass/font-awesome/_path.scss new file mode 100644 index 0000000000..fd21c3515e --- /dev/null +++ b/_sass/font-awesome/_path.scss @@ -0,0 +1,14 @@ +/* FONT PATH + * -------------------------- */ + +@font-face { + font-family: 'FontAwesome'; + src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); + src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), + url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), + url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), + url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); + //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts + font-weight: normal; + font-style: normal; +} diff --git a/_sass/font-awesome/_rotated-flipped.scss b/_sass/font-awesome/_rotated-flipped.scss new file mode 100644 index 0000000000..a3558fd09c --- /dev/null +++ b/_sass/font-awesome/_rotated-flipped.scss @@ -0,0 +1,20 @@ +// Rotated & Flipped Icons +// ------------------------- + +.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } +.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } +.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } + +.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } +.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } + +// Hook for IE8-9 +// ------------------------- + +:root .#{$fa-css-prefix}-rotate-90, +:root .#{$fa-css-prefix}-rotate-180, +:root .#{$fa-css-prefix}-rotate-270, +:root .#{$fa-css-prefix}-flip-horizontal, +:root .#{$fa-css-prefix}-flip-vertical { + filter: none; +} diff --git a/_sass/font-awesome/_spinning.scss b/_sass/font-awesome/_spinning.scss new file mode 100644 index 0000000000..002c5d5c5b --- /dev/null +++ b/_sass/font-awesome/_spinning.scss @@ -0,0 +1,29 @@ +// Spinning Icons +// -------------------------- + +.#{$fa-css-prefix}-spin { + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; +} + +@-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +@keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} diff --git a/_sass/font-awesome/_stacked.scss b/_sass/font-awesome/_stacked.scss new file mode 100644 index 0000000000..aef7403660 --- /dev/null +++ b/_sass/font-awesome/_stacked.scss @@ -0,0 +1,20 @@ +// Stacked Icons +// ------------------------- + +.#{$fa-css-prefix}-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} +.#{$fa-css-prefix}-stack-1x { line-height: inherit; } +.#{$fa-css-prefix}-stack-2x { font-size: 2em; } +.#{$fa-css-prefix}-inverse { color: $fa-inverse; } diff --git a/_sass/font-awesome/_variables.scss b/_sass/font-awesome/_variables.scss new file mode 100644 index 0000000000..f4020f0f29 --- /dev/null +++ b/_sass/font-awesome/_variables.scss @@ -0,0 +1,561 @@ +// Variables +// -------------------------- + +// $fa-font-path: "../fonts/font-awesome" !default; +$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts" !default; // for referencing Bootstrap CDN font files directly +$fa-css-prefix: icon !default; +$fa-version: "4.2.0" !default; +$fa-border-color: #eee !default; +$fa-inverse: #fff !default; +$fa-li-width: calc(30em / 14) !default; + +$fa-var-adjust: "\f042"; +$fa-var-adn: "\f170"; +$fa-var-align-center: "\f037"; +$fa-var-align-justify: "\f039"; +$fa-var-align-left: "\f036"; +$fa-var-align-right: "\f038"; +$fa-var-ambulance: "\f0f9"; +$fa-var-anchor: "\f13d"; +$fa-var-android: "\f17b"; +$fa-var-angellist: "\f209"; +$fa-var-angle-double-down: "\f103"; +$fa-var-angle-double-left: "\f100"; +$fa-var-angle-double-right: "\f101"; +$fa-var-angle-double-up: "\f102"; +$fa-var-angle-down: "\f107"; +$fa-var-angle-left: "\f104"; +$fa-var-angle-right: "\f105"; +$fa-var-angle-up: "\f106"; +$fa-var-apple: "\f179"; +$fa-var-archive: "\f187"; +$fa-var-area-chart: "\f1fe"; +$fa-var-arrow-circle-down: "\f0ab"; +$fa-var-arrow-circle-left: "\f0a8"; +$fa-var-arrow-circle-o-down: "\f01a"; +$fa-var-arrow-circle-o-left: "\f190"; +$fa-var-arrow-circle-o-right: "\f18e"; +$fa-var-arrow-circle-o-up: "\f01b"; +$fa-var-arrow-circle-right: "\f0a9"; +$fa-var-arrow-circle-up: "\f0aa"; +$fa-var-arrow-down: "\f063"; +$fa-var-arrow-left: "\f060"; +$fa-var-arrow-right: "\f061"; +$fa-var-arrow-up: "\f062"; +$fa-var-arrows: "\f047"; +$fa-var-arrows-alt: "\f0b2"; +$fa-var-arrows-h: "\f07e"; +$fa-var-arrows-v: "\f07d"; +$fa-var-asterisk: "\f069"; +$fa-var-at: "\f1fa"; +$fa-var-automobile: "\f1b9"; +$fa-var-backward: "\f04a"; +$fa-var-ban: "\f05e"; +$fa-var-bank: "\f19c"; +$fa-var-bar-chart: "\f080"; +$fa-var-bar-chart-o: "\f080"; +$fa-var-barcode: "\f02a"; +$fa-var-bars: "\f0c9"; +$fa-var-beer: "\f0fc"; +$fa-var-behance: "\f1b4"; +$fa-var-behance-square: "\f1b5"; +$fa-var-bell: "\f0f3"; +$fa-var-bell-o: "\f0a2"; +$fa-var-bell-slash: "\f1f6"; +$fa-var-bell-slash-o: "\f1f7"; +$fa-var-bicycle: "\f206"; +$fa-var-binoculars: "\f1e5"; +$fa-var-birthday-cake: "\f1fd"; +$fa-var-bitbucket: "\f171"; +$fa-var-bitbucket-square: "\f172"; +$fa-var-bitcoin: "\f15a"; +$fa-var-bold: "\f032"; +$fa-var-bolt: "\f0e7"; +$fa-var-bomb: "\f1e2"; +$fa-var-book: "\f02d"; +$fa-var-bookmark: "\f02e"; +$fa-var-bookmark-o: "\f097"; +$fa-var-briefcase: "\f0b1"; +$fa-var-btc: "\f15a"; +$fa-var-bug: "\f188"; +$fa-var-building: "\f1ad"; +$fa-var-building-o: "\f0f7"; +$fa-var-bullhorn: "\f0a1"; +$fa-var-bullseye: "\f140"; +$fa-var-bus: "\f207"; +$fa-var-cab: "\f1ba"; +$fa-var-calculator: "\f1ec"; +$fa-var-calendar: "\f073"; +$fa-var-calendar-o: "\f133"; +$fa-var-camera: "\f030"; +$fa-var-camera-retro: "\f083"; +$fa-var-car: "\f1b9"; +$fa-var-caret-down: "\f0d7"; +$fa-var-caret-left: "\f0d9"; +$fa-var-caret-right: "\f0da"; +$fa-var-caret-square-o-down: "\f150"; +$fa-var-caret-square-o-left: "\f191"; +$fa-var-caret-square-o-right: "\f152"; +$fa-var-caret-square-o-up: "\f151"; +$fa-var-caret-up: "\f0d8"; +$fa-var-cc: "\f20a"; +$fa-var-cc-amex: "\f1f3"; +$fa-var-cc-discover: "\f1f2"; +$fa-var-cc-mastercard: "\f1f1"; +$fa-var-cc-paypal: "\f1f4"; +$fa-var-cc-stripe: "\f1f5"; +$fa-var-cc-visa: "\f1f0"; +$fa-var-certificate: "\f0a3"; +$fa-var-chain: "\f0c1"; +$fa-var-chain-broken: "\f127"; +$fa-var-check: "\f00c"; +$fa-var-check-circle: "\f058"; +$fa-var-check-circle-o: "\f05d"; +$fa-var-check-square: "\f14a"; +$fa-var-check-square-o: "\f046"; +$fa-var-chevron-circle-down: "\f13a"; +$fa-var-chevron-circle-left: "\f137"; +$fa-var-chevron-circle-right: "\f138"; +$fa-var-chevron-circle-up: "\f139"; +$fa-var-chevron-down: "\f078"; +$fa-var-chevron-left: "\f053"; +$fa-var-chevron-right: "\f054"; +$fa-var-chevron-up: "\f077"; +$fa-var-child: "\f1ae"; +$fa-var-circle: "\f111"; +$fa-var-circle-o: "\f10c"; +$fa-var-circle-o-notch: "\f1ce"; +$fa-var-circle-thin: "\f1db"; +$fa-var-clipboard: "\f0ea"; +$fa-var-clock-o: "\f017"; +$fa-var-close: "\f00d"; +$fa-var-cloud: "\f0c2"; +$fa-var-cloud-download: "\f0ed"; +$fa-var-cloud-upload: "\f0ee"; +$fa-var-cny: "\f157"; +$fa-var-code: "\f121"; +$fa-var-code-fork: "\f126"; +$fa-var-codepen: "\f1cb"; +$fa-var-coffee: "\f0f4"; +$fa-var-cog: "\f013"; +$fa-var-cogs: "\f085"; +$fa-var-columns: "\f0db"; +$fa-var-comment: "\f075"; +$fa-var-comment-o: "\f0e5"; +$fa-var-comments: "\f086"; +$fa-var-comments-o: "\f0e6"; +$fa-var-compass: "\f14e"; +$fa-var-compress: "\f066"; +$fa-var-copy: "\f0c5"; +$fa-var-copyright: "\f1f9"; +$fa-var-credit-card: "\f09d"; +$fa-var-crop: "\f125"; +$fa-var-crosshairs: "\f05b"; +$fa-var-css3: "\f13c"; +$fa-var-cube: "\f1b2"; +$fa-var-cubes: "\f1b3"; +$fa-var-cut: "\f0c4"; +$fa-var-cutlery: "\f0f5"; +$fa-var-dashboard: "\f0e4"; +$fa-var-database: "\f1c0"; +$fa-var-dedent: "\f03b"; +$fa-var-delicious: "\f1a5"; +$fa-var-desktop: "\f108"; +$fa-var-deviantart: "\f1bd"; +$fa-var-digg: "\f1a6"; +$fa-var-dollar: "\f155"; +$fa-var-dot-circle-o: "\f192"; +$fa-var-download: "\f019"; +$fa-var-dribbble: "\f17d"; +$fa-var-dropbox: "\f16b"; +$fa-var-drupal: "\f1a9"; +$fa-var-edit: "\f044"; +$fa-var-eject: "\f052"; +$fa-var-ellipsis-h: "\f141"; +$fa-var-ellipsis-v: "\f142"; +$fa-var-empire: "\f1d1"; +$fa-var-envelope: "\f0e0"; +$fa-var-envelope-o: "\f003"; +$fa-var-envelope-square: "\f199"; +$fa-var-eraser: "\f12d"; +$fa-var-eur: "\f153"; +$fa-var-euro: "\f153"; +$fa-var-exchange: "\f0ec"; +$fa-var-exclamation: "\f12a"; +$fa-var-exclamation-circle: "\f06a"; +$fa-var-exclamation-triangle: "\f071"; +$fa-var-expand: "\f065"; +$fa-var-external-link: "\f08e"; +$fa-var-external-link-square: "\f14c"; +$fa-var-eye: "\f06e"; +$fa-var-eye-slash: "\f070"; +$fa-var-eyedropper: "\f1fb"; +$fa-var-facebook: "\f09a"; +$fa-var-facebook-square: "\f082"; +$fa-var-fast-backward: "\f049"; +$fa-var-fast-forward: "\f050"; +$fa-var-fax: "\f1ac"; +$fa-var-female: "\f182"; +$fa-var-fighter-jet: "\f0fb"; +$fa-var-file: "\f15b"; +$fa-var-file-archive-o: "\f1c6"; +$fa-var-file-audio-o: "\f1c7"; +$fa-var-file-code-o: "\f1c9"; +$fa-var-file-excel-o: "\f1c3"; +$fa-var-file-image-o: "\f1c5"; +$fa-var-file-movie-o: "\f1c8"; +$fa-var-file-o: "\f016"; +$fa-var-file-pdf-o: "\f1c1"; +$fa-var-file-photo-o: "\f1c5"; +$fa-var-file-picture-o: "\f1c5"; +$fa-var-file-powerpoint-o: "\f1c4"; +$fa-var-file-sound-o: "\f1c7"; +$fa-var-file-text: "\f15c"; +$fa-var-file-text-o: "\f0f6"; +$fa-var-file-video-o: "\f1c8"; +$fa-var-file-word-o: "\f1c2"; +$fa-var-file-zip-o: "\f1c6"; +$fa-var-files-o: "\f0c5"; +$fa-var-film: "\f008"; +$fa-var-filter: "\f0b0"; +$fa-var-fire: "\f06d"; +$fa-var-fire-extinguisher: "\f134"; +$fa-var-flag: "\f024"; +$fa-var-flag-checkered: "\f11e"; +$fa-var-flag-o: "\f11d"; +$fa-var-flash: "\f0e7"; +$fa-var-flask: "\f0c3"; +$fa-var-flickr: "\f16e"; +$fa-var-floppy-o: "\f0c7"; +$fa-var-folder: "\f07b"; +$fa-var-folder-o: "\f114"; +$fa-var-folder-open: "\f07c"; +$fa-var-folder-open-o: "\f115"; +$fa-var-font: "\f031"; +$fa-var-forward: "\f04e"; +$fa-var-foursquare: "\f180"; +$fa-var-frown-o: "\f119"; +$fa-var-futbol-o: "\f1e3"; +$fa-var-gamepad: "\f11b"; +$fa-var-gavel: "\f0e3"; +$fa-var-gbp: "\f154"; +$fa-var-ge: "\f1d1"; +$fa-var-gear: "\f013"; +$fa-var-gears: "\f085"; +$fa-var-gift: "\f06b"; +$fa-var-git: "\f1d3"; +$fa-var-git-square: "\f1d2"; +$fa-var-github: "\f09b"; +$fa-var-github-alt: "\f113"; +$fa-var-github-square: "\f092"; +$fa-var-gittip: "\f184"; +$fa-var-glass: "\f000"; +$fa-var-globe: "\f0ac"; +$fa-var-google: "\f1a0"; +$fa-var-google-plus: "\f0d5"; +$fa-var-google-plus-square: "\f0d4"; +$fa-var-google-wallet: "\f1ee"; +$fa-var-graduation-cap: "\f19d"; +$fa-var-group: "\f0c0"; +$fa-var-h-square: "\f0fd"; +$fa-var-hacker-news: "\f1d4"; +$fa-var-hand-o-down: "\f0a7"; +$fa-var-hand-o-left: "\f0a5"; +$fa-var-hand-o-right: "\f0a4"; +$fa-var-hand-o-up: "\f0a6"; +$fa-var-hdd-o: "\f0a0"; +$fa-var-header: "\f1dc"; +$fa-var-headphones: "\f025"; +$fa-var-heart: "\f004"; +$fa-var-heart-o: "\f08a"; +$fa-var-history: "\f1da"; +$fa-var-home: "\f015"; +$fa-var-hospital-o: "\f0f8"; +$fa-var-html5: "\f13b"; +$fa-var-ils: "\f20b"; +$fa-var-image: "\f03e"; +$fa-var-inbox: "\f01c"; +$fa-var-indent: "\f03c"; +$fa-var-info: "\f129"; +$fa-var-info-circle: "\f05a"; +$fa-var-inr: "\f156"; +$fa-var-instagram: "\f16d"; +$fa-var-institution: "\f19c"; +$fa-var-ioxhost: "\f208"; +$fa-var-italic: "\f033"; +$fa-var-joomla: "\f1aa"; +$fa-var-jpy: "\f157"; +$fa-var-jsfiddle: "\f1cc"; +$fa-var-key: "\f084"; +$fa-var-keyboard-o: "\f11c"; +$fa-var-krw: "\f159"; +$fa-var-language: "\f1ab"; +$fa-var-laptop: "\f109"; +$fa-var-lastfm: "\f202"; +$fa-var-lastfm-square: "\f203"; +$fa-var-leaf: "\f06c"; +$fa-var-legal: "\f0e3"; +$fa-var-lemon-o: "\f094"; +$fa-var-level-down: "\f149"; +$fa-var-level-up: "\f148"; +$fa-var-life-bouy: "\f1cd"; +$fa-var-life-buoy: "\f1cd"; +$fa-var-life-ring: "\f1cd"; +$fa-var-life-saver: "\f1cd"; +$fa-var-lightbulb-o: "\f0eb"; +$fa-var-line-chart: "\f201"; +$fa-var-link: "\f0c1"; +$fa-var-linkedin: "\f0e1"; +$fa-var-linkedin-square: "\f08c"; +$fa-var-linux: "\f17c"; +$fa-var-list: "\f03a"; +$fa-var-list-alt: "\f022"; +$fa-var-list-ol: "\f0cb"; +$fa-var-list-ul: "\f0ca"; +$fa-var-location-arrow: "\f124"; +$fa-var-lock: "\f023"; +$fa-var-long-arrow-down: "\f175"; +$fa-var-long-arrow-left: "\f177"; +$fa-var-long-arrow-right: "\f178"; +$fa-var-long-arrow-up: "\f176"; +$fa-var-magic: "\f0d0"; +$fa-var-magnet: "\f076"; +$fa-var-mail-forward: "\f064"; +$fa-var-mail-reply: "\f112"; +$fa-var-mail-reply-all: "\f122"; +$fa-var-male: "\f183"; +$fa-var-map-marker: "\f041"; +$fa-var-maxcdn: "\f136"; +$fa-var-meanpath: "\f20c"; +$fa-var-medkit: "\f0fa"; +$fa-var-meh-o: "\f11a"; +$fa-var-microphone: "\f130"; +$fa-var-microphone-slash: "\f131"; +$fa-var-minus: "\f068"; +$fa-var-minus-circle: "\f056"; +$fa-var-minus-square: "\f146"; +$fa-var-minus-square-o: "\f147"; +$fa-var-mobile: "\f10b"; +$fa-var-mobile-phone: "\f10b"; +$fa-var-money: "\f0d6"; +$fa-var-moon-o: "\f186"; +$fa-var-mortar-board: "\f19d"; +$fa-var-music: "\f001"; +$fa-var-navicon: "\f0c9"; +$fa-var-newspaper-o: "\f1ea"; +$fa-var-openid: "\f19b"; +$fa-var-outdent: "\f03b"; +$fa-var-pagelines: "\f18c"; +$fa-var-paint-brush: "\f1fc"; +$fa-var-paper-plane: "\f1d8"; +$fa-var-paper-plane-o: "\f1d9"; +$fa-var-paperclip: "\f0c6"; +$fa-var-paragraph: "\f1dd"; +$fa-var-paste: "\f0ea"; +$fa-var-pause: "\f04c"; +$fa-var-paw: "\f1b0"; +$fa-var-paypal: "\f1ed"; +$fa-var-pencil: "\f040"; +$fa-var-pencil-square: "\f14b"; +$fa-var-pencil-square-o: "\f044"; +$fa-var-phone: "\f095"; +$fa-var-phone-square: "\f098"; +$fa-var-photo: "\f03e"; +$fa-var-picture-o: "\f03e"; +$fa-var-pie-chart: "\f200"; +$fa-var-pied-piper: "\f1a7"; +$fa-var-pied-piper-alt: "\f1a8"; +$fa-var-pinterest: "\f0d2"; +$fa-var-pinterest-square: "\f0d3"; +$fa-var-plane: "\f072"; +$fa-var-play: "\f04b"; +$fa-var-play-circle: "\f144"; +$fa-var-play-circle-o: "\f01d"; +$fa-var-plug: "\f1e6"; +$fa-var-plus: "\f067"; +$fa-var-plus-circle: "\f055"; +$fa-var-plus-square: "\f0fe"; +$fa-var-plus-square-o: "\f196"; +$fa-var-power-off: "\f011"; +$fa-var-print: "\f02f"; +$fa-var-puzzle-piece: "\f12e"; +$fa-var-qq: "\f1d6"; +$fa-var-qrcode: "\f029"; +$fa-var-question: "\f128"; +$fa-var-question-circle: "\f059"; +$fa-var-quote-left: "\f10d"; +$fa-var-quote-right: "\f10e"; +$fa-var-ra: "\f1d0"; +$fa-var-random: "\f074"; +$fa-var-rebel: "\f1d0"; +$fa-var-recycle: "\f1b8"; +$fa-var-reddit: "\f1a1"; +$fa-var-reddit-square: "\f1a2"; +$fa-var-refresh: "\f021"; +$fa-var-remove: "\f00d"; +$fa-var-renren: "\f18b"; +$fa-var-reorder: "\f0c9"; +$fa-var-repeat: "\f01e"; +$fa-var-reply: "\f112"; +$fa-var-reply-all: "\f122"; +$fa-var-retweet: "\f079"; +$fa-var-rmb: "\f157"; +$fa-var-road: "\f018"; +$fa-var-rocket: "\f135"; +$fa-var-rotate-left: "\f0e2"; +$fa-var-rotate-right: "\f01e"; +$fa-var-rouble: "\f158"; +$fa-var-rss: "\f09e"; +$fa-var-rss-square: "\f143"; +$fa-var-rub: "\f158"; +$fa-var-ruble: "\f158"; +$fa-var-rupee: "\f156"; +$fa-var-save: "\f0c7"; +$fa-var-scissors: "\f0c4"; +$fa-var-search: "\f002"; +$fa-var-search-minus: "\f010"; +$fa-var-search-plus: "\f00e"; +$fa-var-send: "\f1d8"; +$fa-var-send-o: "\f1d9"; +$fa-var-share: "\f064"; +$fa-var-share-alt: "\f1e0"; +$fa-var-share-alt-square: "\f1e1"; +$fa-var-share-square: "\f14d"; +$fa-var-share-square-o: "\f045"; +$fa-var-shekel: "\f20b"; +$fa-var-sheqel: "\f20b"; +$fa-var-shield: "\f132"; +$fa-var-shopping-cart: "\f07a"; +$fa-var-sign-in: "\f090"; +$fa-var-sign-out: "\f08b"; +$fa-var-signal: "\f012"; +$fa-var-sitemap: "\f0e8"; +$fa-var-skype: "\f17e"; +$fa-var-slack: "\f198"; +$fa-var-sliders: "\f1de"; +$fa-var-slideshare: "\f1e7"; +$fa-var-smile-o: "\f118"; +$fa-var-soccer-ball-o: "\f1e3"; +$fa-var-sort: "\f0dc"; +$fa-var-sort-alpha-asc: "\f15d"; +$fa-var-sort-alpha-desc: "\f15e"; +$fa-var-sort-amount-asc: "\f160"; +$fa-var-sort-amount-desc: "\f161"; +$fa-var-sort-asc: "\f0de"; +$fa-var-sort-desc: "\f0dd"; +$fa-var-sort-down: "\f0dd"; +$fa-var-sort-numeric-asc: "\f162"; +$fa-var-sort-numeric-desc: "\f163"; +$fa-var-sort-up: "\f0de"; +$fa-var-soundcloud: "\f1be"; +$fa-var-space-shuttle: "\f197"; +$fa-var-spinner: "\f110"; +$fa-var-spoon: "\f1b1"; +$fa-var-spotify: "\f1bc"; +$fa-var-square: "\f0c8"; +$fa-var-square-o: "\f096"; +$fa-var-stack-exchange: "\f18d"; +$fa-var-stack-overflow: "\f16c"; +$fa-var-star: "\f005"; +$fa-var-star-half: "\f089"; +$fa-var-star-half-empty: "\f123"; +$fa-var-star-half-full: "\f123"; +$fa-var-star-half-o: "\f123"; +$fa-var-star-o: "\f006"; +$fa-var-steam: "\f1b6"; +$fa-var-steam-square: "\f1b7"; +$fa-var-step-backward: "\f048"; +$fa-var-step-forward: "\f051"; +$fa-var-stethoscope: "\f0f1"; +$fa-var-stop: "\f04d"; +$fa-var-strikethrough: "\f0cc"; +$fa-var-stumbleupon: "\f1a4"; +$fa-var-stumbleupon-circle: "\f1a3"; +$fa-var-subscript: "\f12c"; +$fa-var-suitcase: "\f0f2"; +$fa-var-sun-o: "\f185"; +$fa-var-superscript: "\f12b"; +$fa-var-support: "\f1cd"; +$fa-var-table: "\f0ce"; +$fa-var-tablet: "\f10a"; +$fa-var-tachometer: "\f0e4"; +$fa-var-tag: "\f02b"; +$fa-var-tags: "\f02c"; +$fa-var-tasks: "\f0ae"; +$fa-var-taxi: "\f1ba"; +$fa-var-tencent-weibo: "\f1d5"; +$fa-var-terminal: "\f120"; +$fa-var-text-height: "\f034"; +$fa-var-text-width: "\f035"; +$fa-var-th: "\f00a"; +$fa-var-th-large: "\f009"; +$fa-var-th-list: "\f00b"; +$fa-var-thumb-tack: "\f08d"; +$fa-var-thumbs-down: "\f165"; +$fa-var-thumbs-o-down: "\f088"; +$fa-var-thumbs-o-up: "\f087"; +$fa-var-thumbs-up: "\f164"; +$fa-var-ticket: "\f145"; +$fa-var-times: "\f00d"; +$fa-var-times-circle: "\f057"; +$fa-var-times-circle-o: "\f05c"; +$fa-var-tint: "\f043"; +$fa-var-toggle-down: "\f150"; +$fa-var-toggle-left: "\f191"; +$fa-var-toggle-off: "\f204"; +$fa-var-toggle-on: "\f205"; +$fa-var-toggle-right: "\f152"; +$fa-var-toggle-up: "\f151"; +$fa-var-trash: "\f1f8"; +$fa-var-trash-o: "\f014"; +$fa-var-tree: "\f1bb"; +$fa-var-trello: "\f181"; +$fa-var-trophy: "\f091"; +$fa-var-truck: "\f0d1"; +$fa-var-try: "\f195"; +$fa-var-tty: "\f1e4"; +$fa-var-tumblr: "\f173"; +$fa-var-tumblr-square: "\f174"; +$fa-var-turkish-lira: "\f195"; +$fa-var-twitch: "\f1e8"; +$fa-var-twitter: "\f099"; +$fa-var-twitter-square: "\f081"; +$fa-var-umbrella: "\f0e9"; +$fa-var-underline: "\f0cd"; +$fa-var-undo: "\f0e2"; +$fa-var-university: "\f19c"; +$fa-var-unlink: "\f127"; +$fa-var-unlock: "\f09c"; +$fa-var-unlock-alt: "\f13e"; +$fa-var-unsorted: "\f0dc"; +$fa-var-upload: "\f093"; +$fa-var-usd: "\f155"; +$fa-var-user: "\f007"; +$fa-var-user-md: "\f0f0"; +$fa-var-users: "\f0c0"; +$fa-var-video-camera: "\f03d"; +$fa-var-vimeo-square: "\f194"; +$fa-var-vine: "\f1ca"; +$fa-var-vk: "\f189"; +$fa-var-volume-down: "\f027"; +$fa-var-volume-off: "\f026"; +$fa-var-volume-up: "\f028"; +$fa-var-warning: "\f071"; +$fa-var-wechat: "\f1d7"; +$fa-var-weibo: "\f18a"; +$fa-var-weixin: "\f1d7"; +$fa-var-wheelchair: "\f193"; +$fa-var-wifi: "\f1eb"; +$fa-var-windows: "\f17a"; +$fa-var-won: "\f159"; +$fa-var-wordpress: "\f19a"; +$fa-var-wrench: "\f0ad"; +$fa-var-xing: "\f168"; +$fa-var-xing-square: "\f169"; +$fa-var-yahoo: "\f19e"; +$fa-var-yelp: "\f1e9"; +$fa-var-yen: "\f157"; +$fa-var-youtube: "\f167"; +$fa-var-youtube-play: "\f16a"; +$fa-var-youtube-square: "\f166"; + diff --git a/assets/js/header-nav.js b/assets/js/header-nav.js index f44eba602a..7fddd39351 100644 --- a/assets/js/header-nav.js +++ b/assets/js/header-nav.js @@ -1,3 +1,5 @@ document.querySelector('.menu-button')?.addEventListener('click', el => { - el.currentTarget.classList.toggle('active'); -}); \ No newline at end of file + const siteNavigation = document.querySelector('div[role="navigation"].nav-menu-on'); + siteNavigation?.classList?.toggle?.('active'); + el.currentTarget.classList?.toggle?.('active'); +});