Sass Deprecation Warnings

.prettierignore

@@ -0,0 +1,15 @@
+# Ignore artifacts:
+build
+coverage
+icons
+*.cjs
+*.hbs
+*.html
+*.html
+*.jinja
+*.js
+*.json
+*.md
+*.yaml
+*.yml
+_icon-variables.scss

.prettierrc

@@ -1,4 +1,3 @@
 {
-	"singleQuote": true,
-	"jsxBracketSameLine": false
+  "singleQuote": true
 }

.stylelintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-css-modules"],
+  "plugins": ["stylelint-scss"],
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "color-named": "never",
+    "declaration-block-no-redundant-longhand-properties": null,
+    "declaration-colon-space-after": "always",
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "no-eol-whitespace": true,
+    "property-no-vendor-prefix": null,
+    "rule-empty-line-before": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/comment-no-empty": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "scss/function-no-unknown": null,
+    "scss/no-global-function-names": null,
+    "selector-class-pattern": null
+  },
+  "TODO: remove these overrides as we move toward industry standards": [
+    "at-rule-empty-line-before",
+    "declaration-block-no-redundant-longhand-properties",
+    "declaration-colon-space-after",
+    "font-family-no-missing-generic-family-keyword",
+    "no-descending-specificity",
+    "no-duplicate-selectors",
+    "rule-empty-line-before",
+    "scss/at-extend-no-missing-placeholder",
+    "scss/comment-no-empty",
+    "scss/dollar-variable-pattern",
+    "scss/double-slash-comment-whitespace-inside",
+    "scss/function-no-unknown",
+    "scss/no-global-function-names",
+    "selector-class-pattern"
+  ]
+}

fec/fec/static/scss/_fonts.scss

@@ -1,6 +1,7 @@
 @font-face {
   font-family: 'gandhi';
-  src: url('../fonts/gandhiserif-bold.woff2') format('woff2'),
+  src:
+    url('../fonts/gandhiserif-bold.woff2') format('woff2'),
     url('../fonts/gandhiserif-bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
@@ -9,7 +10,8 @@
 
 @font-face {
   font-family: 'gandhi';
-  src: url('../fonts/gandhiserif-bolditalic.woff2') format('woff2'),
+  src:
+    url('../fonts/gandhiserif-bolditalic.woff2') format('woff2'),
     url('../fonts/gandhiserif-bolditalic.woff') format('woff');
   font-weight: bold;
   font-style: italic;
@@ -18,7 +20,8 @@
 
 @font-face {
   font-family: 'gandhi';
-  src: url('../fonts/gandhiserif-italic.woff2') format('woff2'),
+  src:
+    url('../fonts/gandhiserif-italic.woff2') format('woff2'),
     url('../fonts/gandhiserif-italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
@@ -27,7 +30,8 @@
 
 @font-face {
   font-family: 'gandhi';
-  src: url('../fonts/gandhiserif-regular.woff2') format('woff2'),
+  src:
+    url('../fonts/gandhiserif-regular.woff2') format('woff2'),
     url('../fonts/gandhiserif-regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
@@ -36,7 +40,8 @@
 
 @font-face {
   font-family: 'karla';
-  src: url('../fonts/karla-bold.woff2') format('woff2'),
+  src:
+    url('../fonts/karla-bold.woff2') format('woff2'),
     url('../fonts/karla-bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
@@ -45,7 +50,8 @@
 
 @font-face {
   font-family: 'karla';
-  src: url('../fonts/karla-regular.woff2') format('woff2'),
+  src:
+    url('../fonts/karla-regular.woff2') format('woff2'),
     url('../fonts/karla-regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
@@ -54,7 +60,8 @@
 
 @font-face {
   font-family: 'fec_currency_mono';
-  src: url('../fonts/fec-currencymono-bold.woff2') format('woff2'),
+  src:
+    url('../fonts/fec-currencymono-bold.woff2') format('woff2'),
     url('../fonts/fec-currencymono-bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
@@ -63,7 +70,8 @@
 
 @font-face {
   font-family: 'fec_currency_mono';
-  src: url('../fonts/fec-currencymono-bolditalic.woff2') format('woff2'),
+  src:
+    url('../fonts/fec-currencymono-bolditalic.woff2') format('woff2'),
     url('../fonts/fec-currencymono-bolditalic.woff') format('woff');
   font-weight: bold;
   font-style: italic;
@@ -72,7 +80,8 @@
 
 @font-face {
   font-family: 'fec_currency_mono';
-  src: url('../fonts/fec-currencymono-italic.woff2') format('woff2'),
+  src:
+    url('../fonts/fec-currencymono-italic.woff2') format('woff2'),
     url('../fonts/fec-currencymono-italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
@@ -81,7 +90,8 @@
 
 @font-face {
   font-family: 'fec_currency_mono';
-  src: url('../fonts/fec-currencymono-regular.woff2') format('woff2'),
+  src:
+    url('../fonts/fec-currencymono-regular.woff2') format('woff2'),
     url('../fonts/fec-currencymono-regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;

fec/fec/static/scss/_functions.scss

@@ -63,7 +63,6 @@ $px-only: false !default;
       } @else {
         $converted: append($converted, $value);
       }
-
     } @else {
       $converted: append($converted, $value);
     }

fec/fec/static/scss/_global-common.scss

@@ -1,33 +1,33 @@
 // Common styles for items on most, but not all, pages
-@import "global";
+@import 'global';
 
 // Very common components
-@import "components/search-controls";
-@import "components/hero";
-@import "components/callouts";
-@import "components/contact-form";
-@import "components/contact-items";
-@import "components/cycle-select";
-@import "components/documents";
-@import "components/dropdowns";
-@import "components/examples";
-@import "components/figures";
-@import "components/headings";
-@import "components/icon-headings";
-@import "components/icons";
-@import "components/maps";
-@import "components/messages";
-@import "components/modals";
-@import "components/options";
-@import "components/overlay";
-@import "components/pagination";
-@import "components/posts";
-@import "components/search-bar";
-@import "components/search-results";
-@import "components/side-nav";
-@import "components/sidebar";
-@import "components/table-styles";
-@import "components/tags";
-@import "components/toggles";
-@import "components/tooltips";
-@import "components/type-styles";
+@import 'components/search-controls';
+@import 'components/hero';
+@import 'components/callouts';
+@import 'components/contact-form';
+@import 'components/contact-items';
+@import 'components/cycle-select';
+@import 'components/documents';
+@import 'components/dropdowns';
+@import 'components/examples';
+@import 'components/figures';
+@import 'components/headings';
+@import 'components/icon-headings';
+@import 'components/icons';
+@import 'components/maps';
+@import 'components/messages';
+@import 'components/modals';
+@import 'components/options';
+@import 'components/overlay';
+@import 'components/pagination';
+@import 'components/posts';
+@import 'components/search-bar';
+@import 'components/search-results';
+@import 'components/side-nav';
+@import 'components/sidebar';
+@import 'components/table-styles';
+@import 'components/tags';
+@import 'components/toggles';
+@import 'components/tooltips';
+@import 'components/type-styles';

fec/fec/static/scss/_global.scss

@@ -2,39 +2,39 @@
 // depend on. It sets the global styles for components that exist on all pages.
 
 // Libraries
-@import "vendor/bourbon/bourbon";
-@import "vendor/neat/neat";
+@import 'vendor/bourbon/bourbon';
+@import 'vendor/neat/neat';
 
 // Variables and mixins
-@import "variables";
-@import "icon-variables";
-@import "fonts";
-@import "functions";
-@import "grid";
-@import "mixins/utilities";
-@import "mixins/type-mixins";
-@import "mixins/icon-mixins";
+@import 'variables';
+@import 'icon-variables';
+@import 'fonts';
+@import 'functions';
+@import 'grid';
+@import 'mixins/utilities';
+@import 'mixins/type-mixins';
+@import 'mixins/icon-mixins';
 
 // Base styling for html elements
-@import "elements/elements";
+@import 'elements/elements';
 
 // Layout: Basic grid and background styles
-@import "layout/layout";
+@import 'layout/layout';
 
 // Base styles
-@import "components/list-styles";
-@import "components/form-styles";
+@import 'components/list-styles';
+@import 'components/form-styles';
 
 // Universal components
-@import "components/accordions";
-@import "components/breadcrumbs";
-@import "components/buttons";
-@import "components/cards";
-@import "components/feedback";
-@import "components/footer";
-@import "components/glossary";
-@import "components/mega-menu";
-@import "components/nav";
-@import "components/page-headers";
-@import "components/search-bar";
-@import "components/site-header";
+@import 'components/accordions';
+@import 'components/breadcrumbs';
+@import 'components/buttons';
+@import 'components/cards';
+@import 'components/feedback';
+@import 'components/footer';
+@import 'components/glossary';
+@import 'components/mega-menu';
+@import 'components/nav';
+@import 'components/page-headers';
+@import 'components/search-bar';
+@import 'components/site-header';

fec/fec/static/scss/_grid.scss

@@ -51,7 +51,7 @@ $xl: new-breakpoint(min-width $x-large-screen 12);
   }
 
   .usa-end-row {
-    @include omega();
+    @include omega;
   }
 }
 @include media(xl) {

fec/fec/static/scss/_variables.scss

@@ -67,15 +67,15 @@ $z5: 500;
 $z6: 600;
 $z7: 700;
 $z8: 800;
-$z9: 900; 
+$z9: 900;
 $z10: 1000; // leaflet map controls (zoom in/out)
 $z11: 1100;
 $z-max: 90000000;
 
 $z-overlay: $z2;
 $z-tooltip: $z4;
 $z-downloads: $z4;
-$z-navigation: $z7;
+$z-navigation: $z11 + 1;
 $z-header: $z6;
 $z-sticky: $z7;
 $z-glossary: $z8;