From 226a61307526e7de6056799b1cd1b166be6233f2 Mon Sep 17 00:00:00 2001 From: Robert Date: Thu, 1 Aug 2024 15:53:32 -0400 Subject: [PATCH 01/10] Silence sass deprecation warnings --- .../static/scss/components/_accordions.scss | 16 ++-- fec/fec/static/scss/components/_agendas.scss | 8 +- fec/fec/static/scss/components/_articles.scss | 2 +- fec/fec/static/scss/components/_buttons.scss | 63 +++++++------ fec/fec/static/scss/components/_calendar.scss | 34 +++---- fec/fec/static/scss/components/_callouts.scss | 4 +- fec/fec/static/scss/components/_cards.scss | 85 +++++++++--------- fec/fec/static/scss/components/_charts.scss | 4 +- .../static/scss/components/_contact-form.scss | 2 +- .../scss/components/_contact-items.scss | 18 ++-- .../static/scss/components/_cycle-select.scss | 2 +- .../scss/components/_data-container.scss | 16 ++-- .../scss/components/_datatable-panel.scss | 12 +-- .../static/scss/components/_datatables.scss | 18 ++-- .../static/scss/components/_date-grid.scss | 2 +- .../static/scss/components/_downloads.scss | 10 +-- .../static/scss/components/_dropdowns.scss | 12 +-- .../scss/components/_entity-header.scss | 10 +-- fec/fec/static/scss/components/_examples.scss | 5 +- fec/fec/static/scss/components/_feedback.scss | 4 +- fec/fec/static/scss/components/_filters.scss | 26 +++--- fec/fec/static/scss/components/_footer.scss | 7 +- .../static/scss/components/_form-styles.scss | 7 +- fec/fec/static/scss/components/_glossary.scss | 14 +-- fec/fec/static/scss/components/_headings.scss | 4 +- fec/fec/static/scss/components/_hero.scss | 3 +- .../scss/components/_icon-headings.scss | 72 +++++++-------- fec/fec/static/scss/components/_icons.scss | 36 ++++---- .../static/scss/components/_legal-search.scss | 6 +- .../static/scss/components/_list-styles.scss | 8 +- .../static/scss/components/_mega-menu.scss | 25 +++--- fec/fec/static/scss/components/_messages.scss | 10 +-- fec/fec/static/scss/components/_modals.scss | 4 +- fec/fec/static/scss/components/_nav.scss | 31 ++++--- fec/fec/static/scss/components/_options.scss | 6 +- .../static/scss/components/_overviews.scss | 4 +- .../static/scss/components/_page-headers.scss | 4 +- fec/fec/static/scss/components/_posts.scss | 4 +- .../scss/components/_reaction-boxes.scss | 2 +- .../static/scss/components/_results-info.scss | 4 +- .../static/scss/components/_search-bar.scss | 6 +- .../scss/components/_search-controls.scss | 67 +++++++------- .../scss/components/_search-results.scss | 6 +- fec/fec/static/scss/components/_sidebar.scss | 14 +-- .../static/scss/components/_site-header.scss | 22 ++--- .../static/scss/components/_table-styles.scss | 6 +- fec/fec/static/scss/components/_tags.scss | 4 +- fec/fec/static/scss/components/_tooltips.scss | 10 +-- .../static/scss/components/_type-styles.scss | 6 +- fec/fec/static/scss/elements/_forms.scss | 33 +++---- fec/fec/static/scss/elements/_tables.scss | 2 +- fec/fec/static/scss/elements/_typography.scss | 3 +- fec/fec/static/scss/layout/_layout.scss | 20 ++--- fec/fec/static/scss/layout/_slabs.scss | 4 +- fec/fec/static/scss/mixins/_type-mixins.scss | 90 +++++++++++-------- fec/fec/static/scss/mixins/_utilities.scss | 37 +++++--- .../scss/vendor/bourbon/addons/_prefixer.scss | 10 +-- .../scss/vendor/bourbon/css3/_flex-box.scss | 28 +++--- .../scss/vendor/bourbon/css3/_transition.scss | 4 +- .../static/scss/vendor/neat/grid/_omega.scss | 2 +- .../vendor/neat/grid/_outer-container.scss | 4 +- .../static/scss/vendor/neat/grid/_shift.scss | 2 +- .../static/scss/widgets/aggregate-totals.scss | 12 +-- .../scss/widgets/contributions-by-state.scss | 16 ++-- .../static/scss/widgets/party-money-bars.scss | 44 ++++----- .../static/scss/widgets/pres-finance-map.scss | 14 +-- 66 files changed, 553 insertions(+), 517 deletions(-) diff --git a/fec/fec/static/scss/components/_accordions.scss b/fec/fec/static/scss/components/_accordions.scss index 544cba53e6..1b1eafe6f9 100644 --- a/fec/fec/static/scss/components/_accordions.scss +++ b/fec/fec/static/scss/components/_accordions.scss @@ -28,7 +28,6 @@ // .accordion__button { - @include u-icon-bg($plus-circle, $primary); background-size: u(2rem); background-position: 95% 50%; border-bottom: 1px solid $base; @@ -41,13 +40,17 @@ text-align: left; width: 100%; + @include u-icon-bg($plus-circle, $primary); + &[aria-expanded='true'] { - @include u-icon-bg($minus-circle, $primary); border-bottom: none; + + @include u-icon-bg($minus-circle, $primary); } &.email__button { padding: u(1rem 4rem 1rem 1rem); + &::before { content:''; @extend .button--envelope; @@ -64,11 +67,12 @@ } .accordion__content { - @include clearfix(); border-bottom: 1px solid $base; padding: u(2rem); font-family: $sans-serif; + @include clearfix(); + &.results__content { border-top: 1px solid $base; border-bottom: 0; @@ -111,18 +115,20 @@ .accordion--inverse { .accordion__button { - @include u-icon-bg($plus-circle, $inverse); background-position: 100% 50%; border-color: $inverse; color: $inverse; + @include u-icon-bg($plus-circle, $inverse); + &[aria-expanded='true'] { @include u-icon-bg($minus-circle, $inverse); } } .accordion__content { - @include u-font-color($inverse); border-color: $inverse; + + @include u-font-color($inverse); } } diff --git a/fec/fec/static/scss/components/_agendas.scss b/fec/fec/static/scss/components/_agendas.scss index d2c81ce532..f81e1faa22 100644 --- a/fec/fec/static/scss/components/_agendas.scss +++ b/fec/fec/static/scss/components/_agendas.scss @@ -32,12 +32,12 @@ position: relative; &::before { - @include heading(h3); position: absolute; left: 0; top: 0; counter-increment: agenda; content: counters(agenda, '') '.'; + @include heading(h3); } } @@ -45,12 +45,12 @@ margin-left: u(6rem); &::before { - @include u-icon($document, $base, 3rem, 3rem, 50%); background-position: 0 50%; content: ''; display: inline-block; margin-left: u(-3rem); vertical-align: middle; + @include u-icon($document, $base, 3rem, 3rem, 50%); } } @@ -83,12 +83,12 @@ margin-left: u(3rem); &::before { - @include u-icon($document, $base, 3rem, 3rem, 50%); background-position: 0 50%; content: ''; display: inline-block; margin-left: u(-3rem); vertical-align: middle; + @include u-icon($document, $base, 3rem, 3rem, 50%); } } @@ -110,5 +110,3 @@ height:100%; } } - - diff --git a/fec/fec/static/scss/components/_articles.scss b/fec/fec/static/scss/components/_articles.scss index d70f5d2f9d..4fe6a5442c 100644 --- a/fec/fec/static/scss/components/_articles.scss +++ b/fec/fec/static/scss/components/_articles.scss @@ -108,7 +108,7 @@ } .read_next__image__container { - @include span-columns(3); display: block; + @include span-columns(3); } } diff --git a/fec/fec/static/scss/components/_buttons.scss b/fec/fec/static/scss/components/_buttons.scss index 673026eb0f..459efa59dc 100644 --- a/fec/fec/static/scss/components/_buttons.scss +++ b/fec/fec/static/scss/components/_buttons.scss @@ -10,7 +10,6 @@ // .button { - @include transition(background-color, .1s, color, .1s, border-color, .1s); border: 2px solid; border-radius: 2px; color: $primary; @@ -21,6 +20,7 @@ padding: u(8px 2rem); text-align: center; vertical-align: middle; + @include transition(background-color, .1s, color, .1s, border-color, .1s); &.is-disabled { opacity: .5; @@ -33,10 +33,10 @@ } .button--standard { - @extend .button; background-color: $gray; border-color: $gray; color: $base; + @extend .button; &:hover:not(.is-disabled):not(.is-active) { background-color: $gray-medium; @@ -52,10 +52,10 @@ } .button--cta { - @extend .button; background-color: $primary; border-color: $primary; color: $inverse !important; + @extend .button; &:hover:not(.is-disabled):not(.is-active) { background-color: $navy; @@ -74,10 +74,10 @@ } .button--alt { - @extend .button; background-color: none; border-color: $gray; color: $base; + @extend .button; &:hover:not(.is-disabled):not(.is-active) { border-color: $gray-medium; @@ -92,10 +92,10 @@ } .button--cta-primary { - @extend .button; background-color: $primary-contrast; border-color: $primary-contrast; color: $primary; + @extend .button; &:hover:not(.is-disabled):not(.is-active) { background-color: lighten($primary-contrast, 5%); @@ -111,9 +111,9 @@ } .button--alt-primary { - @extend .button; border-color: $inverse; color: $inverse; + @extend .button; &:hover:not(.is-disabled):not(.is-active) { border-color: $gray-medium; @@ -132,10 +132,10 @@ } .button--cta-secondary { - @extend .button; background-color: $secondary-contrast; border-color: $secondary-contrast; color: $secondary; + @extend .button; &:hover:not(.is-disabled):not(.is-active) { background-color: lighten($secondary-contrast, 5%); @@ -151,9 +151,9 @@ } .button--alt-secondary { - @extend .button; border-color: $inverse; color: $inverse; + @extend .button; &:hover:not(.is-disabled):not(.is-active) { border-color: $gray-medium; @@ -215,7 +215,6 @@ // .button--remove { - @include u-icon-bg($x, $primary); background-size: 50%; background-position: center center; border: none; @@ -226,6 +225,7 @@ top: 0; right: 0; width: u(4rem); + @include u-icon-bg($x, $primary); &:hover { padding: u(.6rem); @@ -252,34 +252,33 @@ } .button--search { - @include u-icon-button($magnifying-glass); background-size: u(2.2rem); background-position: 50%; padding: 0; + @include u-icon-button($magnifying-glass); } // Buttons: Calendar dropdown buttons .button--add-calendar { - @include u-icon-bg($cal-add, $base); background-position: u(1rem .7rem); background-size: u(2rem); padding-left: u(4rem); padding-right: u(6rem); + @include u-icon-bg($cal-add, $base); } .button--add-calendar--mini { - @include u-icon-bg($cal-add, $base); background-position: u(1rem .7rem); background-size: u(2rem); max-width: u(7.4rem); padding-left: u(5rem); + @include u-icon-bg($cal-add, $base); } // Buttons: Download dropdown buttons .button--download--mini { - @include u-icon-bg($download, $base); background-position: u(.75rem .5rem); background-size: u(1.75rem); background-color: $gray-light; @@ -287,6 +286,7 @@ max-width: u(5rem); padding-left: u(3.6rem); min-height: u(3rem) !important; + @include u-icon-bg($download, $base); &::after { padding: u(.5rem .3rem 1rem 1.5rem) !important; @@ -324,15 +324,15 @@ // toggle two-candidate view on map comparison .button--two-candidates { - @include u-icon-button($two-candidates, left); background-size: u(3rem); padding-left: u(5rem); + @include u-icon-button($two-candidates, left); } .button--candidate { - @include u-icon-button($candidate, left); background-size: u(2rem); padding-left: u(4rem); + @include u-icon-button($candidate, left); } .button--election { @@ -352,25 +352,25 @@ } .button--download--dropdown { - @include u-icon-button($download, left); padding-right: u(6rem); + @include u-icon-button($download, left); } .button--subscribe { - @include u-icon-button($signal, left); padding-right: u(6rem); + @include u-icon-button($signal, left); } .button--grid { - @include u-icon-button($grid, left); height: u(3.4rem); width: u(9rem); + @include u-icon-button($grid, left); } .button--list { - @include u-icon-button($list, left); height: u(3.4rem); width: u(9rem); + @include u-icon-button($list, left); } .button--search--text { @@ -398,47 +398,47 @@ } .button--disbursements { - @include u-icon-button($disbursement, left); background-size: u(3rem); padding: u(2rem 3rem 2rem 5rem); + @include u-icon-button($disbursement, left); } .button--raising { - @include u-icon-button($piggy-bank, left); background-size: u(3rem); padding: u(2rem 3rem 2rem 5rem); + @include u-icon-button($piggy-bank, left); } .button--envelope { - @include u-icon-button($moving-envelope, left); background-size: u(3rem); padding-left: u(5rem); + @include u-icon-button($moving-envelope, left); } .button--previous { - @include u-icon-button($arrow-left, left, 1rem); background-position: 50% 50%; + @include u-icon-button($arrow-left, left, 1rem); } .button--next { - @include u-icon-button($arrow-right, right, 1rem); background-position: 50% 50%; + @include u-icon-button($arrow-right, right, 1rem); } .button--close--base { - @include u-icon($x, $base); border: none; + @include u-icon($x, $base); } .button--close--inverse { - @include u-icon($x, $inverse); border: none; + @include u-icon($x, $inverse); } .button--close--primary { - @include u-icon($x, $primary); background-size: u(2rem); border: none; + @include u-icon($x, $primary); } .button--down { @@ -456,14 +456,14 @@ } .button--panel { - @include u-icon($arrow-right-circle, $gray, 2rem, 2rem, contain); background-size: 90%; + @include u-icon($arrow-right-circle, $gray, 2rem, 2rem, contain); } .button--nav-panel { - @include u-icon-bg($arrow-right-circle, $inverse); background-position: 100% 50%; padding-right: u(4rem); + @include u-icon-bg($arrow-right-circle, $inverse); &.button--candidates, &.button--committees, @@ -546,7 +546,6 @@ position: relative; &::before { - @include u-icon-bg($pop-up, $base); content: ''; background-size: 100%; display: block; @@ -554,6 +553,7 @@ width: 1em; height: 1em; left: -1.5em; + @include u-icon-bg($pop-up, $base); } } @@ -563,7 +563,6 @@ } .button--open { - @include u-icon-bg($plus-circle, $primary); background-size: u(2rem); background-position: 95% 50%; border-bottom: 1px solid $base; @@ -576,9 +575,9 @@ text-align: left; width: 100%; border-bottom: none; + @include u-icon-bg($plus-circle, $primary); &.button--close { @include u-icon-bg($minus-circle, $primary); } } - diff --git a/fec/fec/static/scss/components/_calendar.scss b/fec/fec/static/scss/components/_calendar.scss index b5ce756c19..caaafc0be2 100644 --- a/fec/fec/static/scss/components/_calendar.scss +++ b/fec/fec/static/scss/components/_calendar.scss @@ -27,14 +27,14 @@ // Controls .fc-toolbar { - @include clearfix(); padding: u(1rem); + @include clearfix(); } .calendar__head { - @include clearfix(); border-bottom: 1px solid $neutral; padding: u(1rem); + @include clearfix(); .data-container__action { margin-top: u(1rem); @@ -49,9 +49,9 @@ } .fc-view-controls { - @include clearfix(); padding: u(2rem); width: 100%; + @include clearfix(); } .fc-left { @@ -183,7 +183,6 @@ } &::after { - @include linear-gradient(90deg, rgba($gray-lightest, 0), $gray-lightest); content: ''; display: block; position: absolute; @@ -191,6 +190,7 @@ bottom: 0; right: 0; width: u(3rem); + @include linear-gradient(90deg, rgba($gray-lightest, 0), $gray-lightest); } } @@ -254,10 +254,10 @@ white-space: initial; &::before { - @include triangle(2rem, $primary, up); background-image: none; left: 20%; top: u(-2rem) !important; + @include triangle(2rem, $primary, up); } .button--close--primary { @@ -432,9 +432,9 @@ } .cal-list__event { - @include clearfix(); border-bottom: 1px solid $neutral; padding: u(2rem 0); + @include clearfix(); &:last-child { border-bottom: none; @@ -443,8 +443,8 @@ } .cal-list__details { - @include span-columns(8); margin-bottom: u(1rem); + @include span-columns(8); } .cal-list__add { @@ -463,8 +463,8 @@ } .cal-list__date { - @include span-columns(4 of 8); font-weight: bold; + @include span-columns(4 of 8); } .cal-list__time { @@ -473,8 +473,8 @@ } .cal-list__info { - @include span-columns(8 of 8); padding-top: u(2rem); + @include span-columns(8 of 8); p { font-size: u(1.4rem); @@ -486,13 +486,13 @@ } .cal-list__category-title { - @include clearfix(); display: table; border: 1px solid; border-color: $primary; font-size: u(1.4rem); padding: u(.5rem); border-radius: 3px; + @include clearfix(); .tooltip__trigger-text { border-right: 1px solid $primary; @@ -529,9 +529,9 @@ width: u(22rem); .fc-header { - @include clearfix(); background: $neutral; padding: u(3px .5rem); + @include clearfix(); .fc-title { font-weight: bold; @@ -542,9 +542,9 @@ } .fc-close { - @include u-icon($x, $primary, 2rem, 2rem, 100%); cursor: pointer; float: right; + @include u-icon($x, $primary, 2rem, 2rem, 100%); } .fc-event-container { @@ -625,23 +625,23 @@ } .cal-list__event { - @include clearfix(); padding: u(2rem); + @include clearfix(); } .cal-list__details { - @include span-columns(10); margin-bottom: 0; + @include span-columns(10); } .cal-list__add { - @include span-columns(2); font-size: u(1.4rem); + @include span-columns(2); } .cal-list__date { - @include span-columns(2 of 10); font-weight: bold; + @include span-columns(2 of 10); } .cal-list__time { @@ -649,8 +649,8 @@ } .cal-list__info { - @include span-columns(6 of 10); padding-top: 0; + @include span-columns(6 of 10); } .cal-list__category { diff --git a/fec/fec/static/scss/components/_callouts.scss b/fec/fec/static/scss/components/_callouts.scss index eeb95a9675..18a834f4e1 100644 --- a/fec/fec/static/scss/components/_callouts.scss +++ b/fec/fec/static/scss/components/_callouts.scss @@ -26,10 +26,10 @@ // .callout { - @include clearfix(); padding: u(1rem 1.5rem); margin-bottom: u(2rem); border-radius: 4px; + @include clearfix(); } .callout--primary { @@ -70,9 +70,9 @@ } .callout__action { - @include span-columns(2 of 6); border-left: 1px solid; padding-left: u(1rem); padding-top: 0; + @include span-columns(2 of 6); } } diff --git a/fec/fec/static/scss/components/_cards.scss b/fec/fec/static/scss/components/_cards.scss index b1034ddb5b..a4b04b100b 100644 --- a/fec/fec/static/scss/components/_cards.scss +++ b/fec/fec/static/scss/components/_cards.scss @@ -7,18 +7,18 @@ // Base style .card { - @include clearfix(); background-color: $neutral; border-radius: 4px; font-size: u(1.6rem); padding: u(2rem); text-align: center; width: 100%; + @include clearfix(); } .card--secondary-contrast { - @include u-font-color($inverse); background-color: $bright-red; + @include u-font-color($inverse); } .card--neutral-base { @@ -75,8 +75,8 @@ text-align: left; .card__image { - @include span-columns(1 of 3); display: table-cell; + @include span-columns(1 of 3); } .card__image__container { @@ -141,11 +141,11 @@ text-align: left; .card__image__container { - @include clearfix(); background-color: $primary; border-radius: 4px 4px 0 0; padding: u(1rem); text-align: center; + @include clearfix(); .card__title { float: left; @@ -185,9 +185,9 @@ @include media($lg) { .card__image__container { - @include span-columns(2 of 6); border-radius: 4px 0 0 4px; padding: u(3rem); + @include span-columns(2 of 6); .card__title { display: none; @@ -196,8 +196,8 @@ } .card__content { - @include span-columns(4 of 6); padding-left: 0; + @include span-columns(4 of 6); .card__title { display: block; @@ -220,10 +220,10 @@ border: 2px solid transparent; .card__image__container { - @include span-columns(4); display: table-cell; float: none; vertical-align: middle; + @include span-columns(4); } .card__image { @@ -315,8 +315,11 @@ .card--primary { @include u-bg--primary(); @include u-font-color($gray-lightest); - font-weight: bold; - border: 2px solid transparent; + + & { + border: 2px solid transparent; + font-weight: bold; + } &:hover { background-color: $navy; @@ -329,9 +332,9 @@ .card__icon { &.i-candidate { - @include u-icon-bg($candidate, $primary-contrast); background-position: 60% 50%; background-size: 40%; + @include u-icon-bg($candidate, $primary-contrast); } &.i-committee { @@ -375,8 +378,8 @@ } &.i-external { - @include u-icon-bg($share, $primary-contrast); background-size: 45%; + @include u-icon-bg($share, $primary-contrast); } &.i-filings { @@ -388,13 +391,13 @@ } &.i-loans { - @include u-icon-bg($hand-money, $primary-contrast); background-size: 70%; + @include u-icon-bg($hand-money, $primary-contrast); } &.i-mallet { - @include u-icon-bg($mallet, $primary-contrast); background-size: 75%; + @include u-icon-bg($mallet, $primary-contrast); } &.i-committee-audit { @@ -402,18 +405,18 @@ } &.i-shield { - @include u-icon-bg($shield, $primary-contrast); background-size: 75%; + @include u-icon-bg($shield, $primary-contrast); } &.i-shield-scales { - @include u-icon-bg($shield-scales, $primary-contrast); background-size: 60%; + @include u-icon-bg($shield-scales, $primary-contrast); } &.i-exclamation-bubble { - @include u-icon-bg($exclamation-bubble, $primary-contrast); background-size: 60%; + @include u-icon-bg($exclamation-bubble, $primary-contrast); } // In fec/fec/static/scss/_icon-variables.scss, $shield-star is empty. @@ -424,33 +427,33 @@ // } &.i-arrow-target { - @include u-icon-bg($arrow-target, $primary-contrast); background-size: 70%; + @include u-icon-bg($arrow-target, $primary-contrast); } &.i-org-chart { - @include u-icon-bg($org-chart, $primary-contrast); background-size: 75%; + @include u-icon-bg($org-chart, $primary-contrast); } &.i-clipboard-checklist { - @include u-icon-bg($clipboard-checklist, $primary-contrast); background-size: 60%; + @include u-icon-bg($clipboard-checklist, $primary-contrast); } &.i-magnifying-glass { - @include u-icon-bg($magnifying-glass, $primary-contrast); background-size: 60%; + @include u-icon-bg($magnifying-glass, $primary-contrast); } &.i-decree { - @include u-icon-bg($decree, $primary-contrast); background-size: 65%; + @include u-icon-bg($decree, $primary-contrast); } &.i-direction-sign { - @include u-icon-bg($direction-sign, $primary-contrast); background-size: 75%; + @include u-icon-bg($direction-sign, $primary-contrast); } &.i-scale { @@ -458,33 +461,34 @@ } &.i-usc { - @include u-icon-bg($usc, $primary-contrast); background-size: 70%; + @include u-icon-bg($usc, $primary-contrast); } &.i-cfr { - @include u-icon-bg($cfr, $primary-contrast); background-size: 70%; + @include u-icon-bg($cfr, $primary-contrast); } &.i-compass { - @include u-icon-bg($compass, $primary-contrast); background-size: 65%; + @include u-icon-bg($compass, $primary-contrast); } &.i-checklist-2 { - @include u-icon-bg($checklist-2, $primary-contrast); background-size: 65%; + @include u-icon-bg($checklist-2, $primary-contrast); } } } .card--secondary { - @include u-bg--secondary(); - @include u-font-color($gray-lightest); - font-weight: bold; border: 2px solid transparent; + font-weight: bold; + @include u-bg--secondary(); + @include u-font-color($gray-lightest); + &:hover { background-color: $deep-red; border: 2px solid $orange; @@ -496,46 +500,47 @@ .card__icon { &.i-calendar { - @include u-icon-bg($calendar, $secondary-contrast); background-position: 50% 50%; background-size: 60%; + @include u-icon-bg($calendar, $secondary-contrast); } &.i-document { - @include u-icon-bg($document, $secondary-contrast); background-position: 50% 50%; background-size: 50%; + @include u-icon-bg($document, $secondary-contrast); } &.i-training { - @include u-icon-bg($training, $secondary-contrast); background-size: 60%; + @include u-icon-bg($training, $secondary-contrast); } &.i-data-flag { - @include u-icon-bg($data-flag, $secondary-contrast); background-size: 60%; + @include u-icon-bg($data-flag, $secondary-contrast); } &.i-updates { - @include u-icon-bg($updates, $secondary-contrast); background-size: 60%; + @include u-icon-bg($updates, $secondary-contrast); } &.i-question-bubble { - @include u-icon-bg($question-bubble, $secondary-contrast); background-size: 80%; + @include u-icon-bg($question-bubble, $secondary-contrast); } &.i-notebook { - @include u-icon-bg($notebook, $secondary-contrast); background-size: 50%; + @include u-icon-bg($notebook, $secondary-contrast); } } } .card--neutral { background-color: $neutral; + @include u-font-color($base); a { @@ -543,17 +548,17 @@ } .card__image__container { - @include clearfix(); display: inline-block; + @include clearfix(); } .card__icon { - height: 5.8rem; - width: 5.8rem; + height: 5.8rem; + width: 5.8rem; &.i-graph-horizontal-ordered { - @include u-icon-bg($graph-horizontal-ordered, $inverse); background-color: $primary; background-size: 50%; + @include u-icon-bg($graph-horizontal-ordered, $inverse); } } } diff --git a/fec/fec/static/scss/components/_charts.scss b/fec/fec/static/scss/components/_charts.scss index 45131efbdb..88785d6a8a 100644 --- a/fec/fec/static/scss/components/_charts.scss +++ b/fec/fec/static/scss/components/_charts.scss @@ -163,12 +163,12 @@ } .snapshot__controls { - @include clearfix(); border-width: 2px 0; border-style: solid; border-color: $primary; padding: 2px 0; text-align: center; + @include clearfix(); h5 { display: inline-block; @@ -191,13 +191,13 @@ } .snapshot__line-controls { - @include clearfix(); border-width: 2px 0; border-style: solid; border-color: $primary; padding: 2px 0; text-align: center; margin: 1rem 0rem 1rem 0rem; + @include clearfix(); h5 { display: inline-block; diff --git a/fec/fec/static/scss/components/_contact-form.scss b/fec/fec/static/scss/components/_contact-form.scss index 3ab2887e28..dd806e6820 100644 --- a/fec/fec/static/scss/components/_contact-form.scss +++ b/fec/fec/static/scss/components/_contact-form.scss @@ -23,8 +23,8 @@ } .tt-input { - @include u-icon-bg($magnifying-glass-arrow, $gray-dark); background-position: right 10px top 50%; + @include u-icon-bg($magnifying-glass-arrow, $gray-dark); } .contact-form__reset { diff --git a/fec/fec/static/scss/components/_contact-items.scss b/fec/fec/static/scss/components/_contact-items.scss index d61a693b8d..14ab860f16 100644 --- a/fec/fec/static/scss/components/_contact-items.scss +++ b/fec/fec/static/scss/components/_contact-items.scss @@ -15,9 +15,9 @@ // .contact-item { - @include clearfix(); display: table; margin-bottom: u(4rem); + @include clearfix(); &:not(.contact-item--half) { &::before { @@ -92,24 +92,24 @@ .contact-item--question-bubble { &::before { - @include u-icon-circle($question-bubble, $primary, $inverse, 3.4rem); background-size:75% !important; + @include u-icon-circle($question-bubble, $primary, $inverse, 3.4rem); } } .contact-item--hand { &.contact-item::before { - @include u-icon-circle($hand-envelope, $primary, $inverse, 3.4rem); background-position: 100% 50%; background-size: 100%; + @include u-icon-circle($hand-envelope, $primary, $inverse, 3.4rem); } } .contact-item--map-pin { &.contact-item::before { - @include u-icon-circle($map-pin, $primary, $inverse, 3.4rem); background-position: 50%; background-size: 60%; + @include u-icon-circle($map-pin, $primary, $inverse, 3.4rem); } } @@ -134,15 +134,15 @@ .contact-item:not(.contact-item--half)::before{ display: block; margin-bottom: u(1.5rem); - } + } .contact-item__content { display: block; } - .contact-item__label { - text-transform: uppercase; - font-size: u(1.8rem); - font-family: Karla,sans-serif; + .contact-item__label { + text-transform: uppercase; + font-size: u(1.8rem); + font-family: Karla,sans-serif; } } diff --git a/fec/fec/static/scss/components/_cycle-select.scss b/fec/fec/static/scss/components/_cycle-select.scss index d57cfce9f7..a23fb600c8 100644 --- a/fec/fec/static/scss/components/_cycle-select.scss +++ b/fec/fec/static/scss/components/_cycle-select.scss @@ -26,8 +26,8 @@ } .subcycle-select { - @include span-columns(6); font-family: $sans-serif; + @include span-columns(6); .toggles { clear: both; diff --git a/fec/fec/static/scss/components/_data-container.scss b/fec/fec/static/scss/components/_data-container.scss index 75f86b89a9..c46a6456d7 100644 --- a/fec/fec/static/scss/components/_data-container.scss +++ b/fec/fec/static/scss/components/_data-container.scss @@ -5,9 +5,9 @@ // .data-container { - @include clearfix(); position: relative; width: 100%; + @include clearfix(); } .is-showing-filters { @@ -15,14 +15,14 @@ } .data-container__widgets { - @include clearfix(); border-bottom: 2px solid $primary; font-family: $sans-serif; + @include clearfix(); } .data-container__action { - @include clearfix(); float: right; + @include clearfix(); } .data-container__share { @@ -43,9 +43,9 @@ } .data-container__head { - @include clearfix(); border-bottom: 1px solid $gray; padding: u(1rem); + @include clearfix(); } .data-container__title { @@ -61,8 +61,8 @@ } .data-container__tags { - @include clearfix(); padding: u(1rem); + @include clearfix(); } .data-container__message { @@ -74,9 +74,9 @@ } .panel__controls { - @include clearfix(); clear: both; padding-top: u(.5rem); + @include clearfix(); } // BREAKPOINT: LARGE @@ -117,17 +117,17 @@ } .data-container__action { - @include span-columns(5); float: right; text-align: right; + @include span-columns(5); } .data-container__share { - @include u-icon-button($share, right); padding-left: u(2rem); text-indent: 0; width: auto; margin-right: u(1rem); + @include u-icon-button($share, right); } .data-container__export { diff --git a/fec/fec/static/scss/components/_datatable-panel.scss b/fec/fec/static/scss/components/_datatable-panel.scss index aca32b1065..e5c7cfed1d 100644 --- a/fec/fec/static/scss/components/_datatable-panel.scss +++ b/fec/fec/static/scss/components/_datatable-panel.scss @@ -2,12 +2,12 @@ // .panel__main { - @include clearfix(); left: 0; clear: both; position: relative; width: 200%; z-index: $z1; + @include clearfix(); .data-table { float: left; @@ -22,13 +22,13 @@ // modal .panel__overlay { - @include transition(opacity .2s); background-color: $inverse; overflow: hidden; padding: u(1rem); float: right; width: 50%; opacity: 0; + @include transition(opacity .2s); } // Open panel @@ -118,10 +118,10 @@ // .panel__close - Closes the panel. Shows up as a back arrow on the left on mobile and an x on the right on desktop .panel__navigation { - @include clearfix(); border-bottom: 1px solid $gray-lightest; padding: u(0 0 1rem 0); text-align: right; + @include clearfix(); } .panel__link { @@ -129,7 +129,6 @@ } .panel__close { - @include u-icon-bg($arrow-left-border, $primary); background-position: 0 50%; background-size: u(1.5rem); background-repeat: no-repeat; @@ -137,6 +136,7 @@ cursor: pointer; float: left; padding-left: u(3rem); + @include u-icon-bg($arrow-left-border, $primary); &::after { content: "Show all"; @@ -202,11 +202,11 @@ } .panel__close { - @include u-icon($x, $primary); background-size: u(2rem); position: absolute; right: 0; top: 0; + @include u-icon($x, $primary); &::after { content: ''; @@ -229,8 +229,8 @@ } .data-table { - @include transform(translateX(0)); width: 50% !important; + @include transform(translateX(0)); } .dataTables_wrapper { diff --git a/fec/fec/static/scss/components/_datatables.scss b/fec/fec/static/scss/components/_datatables.scss index 3160584872..44cde2d991 100644 --- a/fec/fec/static/scss/components/_datatables.scss +++ b/fec/fec/static/scss/components/_datatables.scss @@ -54,14 +54,14 @@ // Sortable headers .data-table { - @include transform(translateX(0%)); - @include transition-property(transform); - @include transition-duration(0.5s); height: 100%; font-family: $sans-serif; position: relative; table-layout: auto; z-index: $z1; + @include transform(translateX(0%)); + @include transition-property(transform); + @include transition-duration(0.5s); th { line-height: u(1.4rem); @@ -79,20 +79,20 @@ } &.sorting { - @include u-icon-bg($dash, $gray); background-size: u(1rem); + @include u-icon-bg($dash, $gray); } &.sorting_asc { - @include u-icon-bg($arrow-up-border, $primary); background-size: u(1rem); background-color: $gray-lightest; + @include u-icon-bg($arrow-up-border, $primary); } &.sorting_desc { - @include u-icon-bg($arrow-down-border, $primary); background-size: u(1rem); background-color: $gray-lightest; + @include u-icon-bg($arrow-down-border, $primary); } &:first-child { @@ -126,7 +126,9 @@ } td { + border-left: 1px solid $neutral; max-width: max(9em, 20vw); + padding: u(1rem); word-wrap: break-word; @include media($med) { @@ -138,8 +140,6 @@ } @include transition(padding-left, 0.2s); - padding: u(1rem); - border-left: 1px solid $neutral; &.column--number { text-align: right; @@ -230,8 +230,8 @@ // Special styles for rows that trigger panels .row--has-panel { - @include transition(border-left-width, 0.2s); cursor: pointer; + @include transition(border-left-width, 0.2s); } .row-active { diff --git a/fec/fec/static/scss/components/_date-grid.scss b/fec/fec/static/scss/components/_date-grid.scss index 36fbc1d0bb..178def8f2e 100644 --- a/fec/fec/static/scss/components/_date-grid.scss +++ b/fec/fec/static/scss/components/_date-grid.scss @@ -23,10 +23,10 @@ // .date-range__grid { - @include clearfix(); font-family: $sans-serif; padding: u(2rem 0); display: none; + @include clearfix(); &:not(.is-invalid) { diff --git a/fec/fec/static/scss/components/_downloads.scss b/fec/fec/static/scss/components/_downloads.scss index 24c1416f77..621efa6342 100644 --- a/fec/fec/static/scss/components/_downloads.scss +++ b/fec/fec/static/scss/components/_downloads.scss @@ -40,10 +40,10 @@ } .download { - @include clearfix(); font-size: u(1.2rem); margin-bottom: u(1rem); padding-left: u(3rem); + @include clearfix(); &.is-pending { background-image: url('../img/loading-ellipsis.gif'); @@ -53,17 +53,17 @@ } &.is-complete { - @include u-icon-bg($check, $primary); background-size: u(2rem); background-position: u(0 .5rem); + @include u-icon-bg($check, $primary); } } .download__name { - @include u-truncate(); display: block; font-weight: bold; padding: u(.5rem 0); + @include u-truncate(); } .download__button { @@ -91,13 +91,13 @@ } .download__name { - @include span-columns(5); float: left; + @include span-columns(5); } .download__button { - @include span-columns(3); margin: u(0 2rem); + @include span-columns(3); } } diff --git a/fec/fec/static/scss/components/_dropdowns.scss b/fec/fec/static/scss/components/_dropdowns.scss index 56b9472348..75c881c554 100644 --- a/fec/fec/static/scss/components/_dropdowns.scss +++ b/fec/fec/static/scss/components/_dropdowns.scss @@ -28,7 +28,6 @@ width: 100%; &::after { - @include u-icon-bg($arrow-down, $primary); background-repeat: no-repeat; background-position: 90% 50%; background-size: 12px; @@ -39,6 +38,7 @@ position: absolute; right: u(1.5rem); top: u(.5rem); + @include u-icon-bg($arrow-down, $primary); } &.is-active::after { @@ -56,18 +56,18 @@ &.is-successful { &::after { - @include u-icon-button($check); background-position: u(1.25rem) 50%; background-size: 18px; padding-left: u(2.5rem); right: 0; + @include u-icon-button($check); } } &.button--alt-primary::after, &.button--alt-secondary::after { - @include u-icon-bg($arrow-down, $inverse); border-left: 1px solid $inverse; + @include u-icon-bg($arrow-down, $inverse); } } @@ -130,11 +130,11 @@ } &.is-checked { - @include u-icon-bg($check, $gray); background-color: $gray-light; background-position: right u(.5rem) top 50%; padding-right: u(1.5rem); cursor: default; + @include u-icon-bg($check, $gray); } } @@ -176,8 +176,8 @@ margin: u(.5rem 0); li { - @include animation(fadeIn .2s ease-in); position: relative; + @include animation(fadeIn .2s ease-in); &:hover { input[type="checkbox"]:not(:checked) + label:not(.is-loading) + .dropdown__remove { @@ -200,7 +200,6 @@ } .dropdown__remove { - @include u-icon-button($x, $gray-dark); background-position: u(.75rem) 50%; background-size: 18px; display: none; @@ -208,6 +207,7 @@ bottom: u(1rem); position: absolute; z-index: $z1; + @include u-icon-button($x, $gray-dark); } @include media($med) { diff --git a/fec/fec/static/scss/components/_entity-header.scss b/fec/fec/static/scss/components/_entity-header.scss index 6a0816dc4e..feb4c9181b 100644 --- a/fec/fec/static/scss/components/_entity-header.scss +++ b/fec/fec/static/scss/components/_entity-header.scss @@ -67,13 +67,13 @@ } .entity__info { - @include clearfix(); border-bottom: 2px solid; border-top: 2px solid; font-family: $sans-serif; letter-spacing: -.3px; padding: u(1rem 0); width: 100%; + @include clearfix(); @include media($med) { display: table; @@ -81,9 +81,9 @@ } .entity__term { - @include clearfix(); width: 100%; margin-bottom: u(1rem); + @include clearfix(); &:last-child { margin-bottom: 0; @@ -110,9 +110,9 @@ } .entity__term__label { - @include span-columns(6); font-family: $sans-serif; font-weight: bold; + @include span-columns(6); @include media($med) { float: none; @@ -155,8 +155,8 @@ } .entity__header--primary { - @include u-bg--primary(); border-top: 1px solid $primary-contrast; + @include u-bg--primary(); .entity__info, .entity__type { @@ -188,8 +188,8 @@ } .entity__election { - @include span-columns(4); clear: none; padding-top: 0; + @include span-columns(4); } } diff --git a/fec/fec/static/scss/components/_examples.scss b/fec/fec/static/scss/components/_examples.scss index 4bcf69a85d..77709b35a1 100644 --- a/fec/fec/static/scss/components/_examples.scss +++ b/fec/fec/static/scss/components/_examples.scss @@ -71,9 +71,9 @@ } .example__image { - @include span-columns(8); border: 2px solid $gray-lightest; height: auto; + @include span-columns(8); } @@ -87,8 +87,7 @@ margin-top: u(2rem); @include media($med) { - @include span-columns(4); margin-top: 0; - + @include span-columns(4); } } diff --git a/fec/fec/static/scss/components/_feedback.scss b/fec/fec/static/scss/components/_feedback.scss index 18d0194ca3..7c84636d3f 100644 --- a/fec/fec/static/scss/components/_feedback.scss +++ b/fec/fec/static/scss/components/_feedback.scss @@ -71,7 +71,6 @@ } @include media($lg) { - @include transition(top .5s); height: 95vh; left: auto; overflow: auto; @@ -79,6 +78,7 @@ right: u(4rem); top: 5vh; width: u(52rem); + @include transition(top .5s); &[aria-hidden='true'] { display: block !important; @@ -106,8 +106,8 @@ } .feedback__title { - @include heading(h2); margin-bottom: u(.5rem); + @include heading(h2); } .feedback__toggle { diff --git a/fec/fec/static/scss/components/_filters.scss b/fec/fec/static/scss/components/_filters.scss index 9a51664ac3..bb320d8b18 100644 --- a/fec/fec/static/scss/components/_filters.scss +++ b/fec/fec/static/scss/components/_filters.scss @@ -25,9 +25,9 @@ $filter-button-width: u(4.6rem); // by default show filters offscreen .filters { - @include clearfix(); background: $neutral; display: block; + @include clearfix(); &.is-open { .filters__content { @@ -44,8 +44,8 @@ $filter-button-width: u(4.6rem); .filters__toggle { &::after { - @include u-icon($arrow-left-border, $primary, $icon-size, $icon-size); background-size: 65%; + @include u-icon($arrow-left-border, $primary, $icon-size, $icon-size); } } } @@ -89,11 +89,11 @@ $filter-button-width: u(4.6rem); position: relative; &::after { - @include animation(fadeIn .8s ease-out); background: url('../img/loading-ellipsis-gray.gif') no-repeat; background-size: u(2rem); right: u(-3rem); opacity: 1; + @include animation(fadeIn .8s ease-out); } } @@ -101,9 +101,9 @@ $filter-button-width: u(4.6rem); position: relative; &::after { - @include u-icon-bg($check, $green-light); background-position: 50%; right: u(-3rem); + @include u-icon-bg($check, $green-light); } } @@ -111,17 +111,15 @@ $filter-button-width: u(4.6rem); position: relative; &::after { - @include u-icon-bg($x, $error); background-position: 50%; right: u(-3rem); + @include u-icon-bg($x, $error); } } } } .filters__content { - @include transition(left .2s ease-in-out); - @include u-bg--neutral(); position: absolute; bottom: 0; height: auto; @@ -129,6 +127,8 @@ $filter-button-width: u(4.6rem); width: 100%; overflow: visible; left: -800px; + @include transition(left .2s ease-in-out); + @include u-bg--neutral(); &[aria-hidden=true] { display: block !important; @@ -140,8 +140,6 @@ $filter-button-width: u(4.6rem); } .filters__header { - @include clearfix(); - @include heading(h2); background-color: $neutral; border-bottom: 1px solid $gray; border-top: 2px solid $primary; @@ -151,24 +149,26 @@ $filter-button-width: u(4.6rem); padding: u(1rem); text-align: left; width: 100%; + @include clearfix(); + @include heading(h2); } .filters__toggle { &::before { - @include u-icon-circle($filter, $primary, $inverse, $icon-size); background-position: 50% 45%; background-size: 70%; content: ''; float: left; margin-right: 1rem; + @include u-icon-circle($filter, $primary, $inverse, $icon-size); } &::after { - @include u-icon($arrow-right-border, $primary, $icon-size, $icon-size); content: ''; background-size: 65%; clear: none; float: right; + @include u-icon($arrow-right-border, $primary, $icon-size, $icon-size); } } @@ -217,9 +217,9 @@ $filter-button-width: u(4.6rem); width: u(4.6rem); &.is-successful { - @include u-icon-button($check); background-size: u(2.2rem); background-position: 50%; + @include u-icon-button($check); } } @@ -361,10 +361,10 @@ $filter-button-width: u(4.6rem); } .filters__content { - @include transition(unset); position: relative; top: 0; overflow: visible; + @include transition(unset); &[aria-hidden="true"] { display: none !important; diff --git a/fec/fec/static/scss/components/_footer.scss b/fec/fec/static/scss/components/_footer.scss index 6b4658d322..acf3dbaab5 100644 --- a/fec/fec/static/scss/components/_footer.scss +++ b/fec/fec/static/scss/components/_footer.scss @@ -59,11 +59,12 @@ } .footer { - @include u-bg--primary(); - @include u-font-color($neutral); padding: u(5rem 0); position: relative; + @include u-bg--primary(); + @include u-font-color($neutral); + .address__title { font-size: u(2.2rem); font-weight: bold; @@ -116,9 +117,9 @@ } .address { - @include span-columns(3); margin-right: 0; float: right; + @include span-columns(3); } } } diff --git a/fec/fec/static/scss/components/_form-styles.scss b/fec/fec/static/scss/components/_form-styles.scss index 1a1c7b23eb..c8a51c9465 100644 --- a/fec/fec/static/scss/components/_form-styles.scss +++ b/fec/fec/static/scss/components/_form-styles.scss @@ -47,9 +47,9 @@ } .select--alt-primary { - @include u-icon-bg($arrow-down, $inverse); border: 2px solid $inverse; color: $inverse; + @include u-icon-bg($arrow-down, $inverse); &:hover:not(.is-disabled):not([disabled]) { border-color: $gray-medium; @@ -72,9 +72,9 @@ } .select--alt-secondary { - @include u-icon-bg($arrow-down, $inverse); border: 2px solid $inverse; color: $inverse; + @include u-icon-bg($arrow-down, $inverse); &:hover:not(.is-disabled):not([disabled]) { border-color: $gray-medium; @@ -253,10 +253,11 @@ } &.is-successful { - @include u-icon-button($check); background-size: u(2rem); background-position: 50%; padding: u(1.5rem); + + @include u-icon-button($check); } } } diff --git a/fec/fec/static/scss/components/_glossary.scss b/fec/fec/static/scss/components/_glossary.scss index 822ef5d2ac..2357f7f4c0 100644 --- a/fec/fec/static/scss/components/_glossary.scss +++ b/fec/fec/static/scss/components/_glossary.scss @@ -2,7 +2,6 @@ // .glossary { - @include transition(right, .3s); background-color: $base; bottom: 0; color: $inverse; @@ -13,6 +12,7 @@ top: 0; width: 75%; z-index: $z-glossary; + @include transition(right, .3s); &[aria-hidden='true'] { display: block !important; @@ -20,8 +20,8 @@ } &[aria-hidden='false'] { - @include transition(right, .3s); right: 0; + @include transition(right, .3s); } .button--close--inverse { @@ -48,8 +48,8 @@ letter-spacing: -.3px; ol { - @extend .list--numbered; margin-left: 0; + @extend .list--numbered; li { font-size: u(1.4rem); @@ -57,8 +57,8 @@ } ul { - @extend .list--bulleted; margin-left: 0; + @extend .list--bulleted; li { font-size: u(1.4rem); @@ -72,10 +72,10 @@ } .glossary__toggle { - @include u-icon-bg($book, $base); background-position: 0% 50%; background-size: 1em; padding-left: u(2.5rem); + @include u-icon-bg($book, $base); } // Term classes @@ -84,8 +84,6 @@ // standard class, adds the book icon .term { - @include u-icon-bg($book, $primary); - @include transition(background-color, .2s, box-shadow, .2s, color, .2s); background-size: .6em; background-position: 99% 50%; background-color: transparent; @@ -94,6 +92,8 @@ cursor: pointer; margin-right: 2px; padding-right: .9em; + @include u-icon-bg($book, $primary); + @include transition(background-color, .2s, box-shadow, .2s, color, .2s); &:focus, &:hover { diff --git a/fec/fec/static/scss/components/_headings.scss b/fec/fec/static/scss/components/_headings.scss index 85252cdf04..7bf352e8dc 100644 --- a/fec/fec/static/scss/components/_headings.scss +++ b/fec/fec/static/scss/components/_headings.scss @@ -16,9 +16,9 @@ // %heading is a placeholder selector that provides base styles extended by the base classes %heading { - @include clearfix(); border-bottom: 2px solid $base; padding-bottom: u(1rem); + @include clearfix(); h1, h2, @@ -138,9 +138,9 @@ } .heading__image { - @include span-columns(1); border-radius: 100%; height: auto; + @include span-columns(1); } } diff --git a/fec/fec/static/scss/components/_hero.scss b/fec/fec/static/scss/components/_hero.scss index 62ad08ff0e..028130b3ed 100644 --- a/fec/fec/static/scss/components/_hero.scss +++ b/fec/fec/static/scss/components/_hero.scss @@ -223,9 +223,10 @@ @media print { .hero--primary, .hero--secondary { - @include u-font-color($base); background: $inverse; border-bottom: 1px solid $base; + + @include u-font-color($base); } .hero__image { diff --git a/fec/fec/static/scss/components/_icon-headings.scss b/fec/fec/static/scss/components/_icon-headings.scss index 23f0dd99a9..0671354521 100644 --- a/fec/fec/static/scss/components/_icon-headings.scss +++ b/fec/fec/static/scss/components/_icon-headings.scss @@ -12,8 +12,8 @@ // .icon-heading { - @include clearfix(); margin-top:0; + @include clearfix(); @include media($med) { margin-top: u(1rem); @@ -21,13 +21,13 @@ } .icon-heading__image { - @include span-columns(1); height: auto; + @include span-columns(1); } .icon-heading__content { - @include span-columns(11); max-width: 75%; + @include span-columns(11); p { margin: 0; @@ -41,13 +41,13 @@ .grid--2-wide, .grid--3-wide { .icon-heading__image { - @include span-columns(3); height: auto; + @include span-columns(3); } .icon-heading__content { - @include span-columns(8); padding-left: u(.5rem); + @include span-columns(8); } } @@ -72,50 +72,50 @@ .icon-heading--raising-circle { &::before { $size: u(4rem); - @include u-icon-circle($piggy-bank, $primary, $inverse, $size); content: ''; float: left; margin-right: u(1rem); + @include u-icon-circle($piggy-bank, $primary, $inverse, $size); } } .icon-heading--spending-circle { &::before { $size: u(4rem); - @include u-icon-circle($disbursement, $primary, $inverse, $size); content: ''; float: left; margin-right: u(1rem); + @include u-icon-circle($disbursement, $primary, $inverse, $size); } } .icon-heading--calendar-circle-primary { &::before { $size: u(4rem); - @include u-icon-circle($calendar, $primary, $inverse, $size); content: ''; float: left; margin-right: u(1rem); + @include u-icon-circle($calendar, $primary, $inverse, $size); } } .icon-heading--data-flag-circle--primary { &::before { $size: u(4rem); - @include u-icon-circle($data-flag, $inverse, $primary-contrast, $size); background-size: 50%; content: ''; float: left; + @include u-icon-circle($data-flag, $inverse, $primary-contrast, $size); } } .icon-heading--data-flag-circle--secondary { &::before { $size: u(4rem); - @include u-icon-circle($data-flag, $inverse, $secondary-contrast, $size); background-size: 50%; content: ''; float: left; + @include u-icon-circle($data-flag, $inverse, $secondary-contrast, $size); } } @@ -123,143 +123,143 @@ .icon-heading--checklist-circle { &::before { $size: u(4rem); - @include u-icon-circle($checklist, $inverse, $secondary-contrast, $size); background-size: 70%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($checklist, $inverse, $secondary-contrast, $size); } } .icon-heading--question-bubble-circle { &::before { $size: u(4rem); - @include u-icon-circle($question-bubble, $inverse, $secondary-contrast, $size); background-size: 70%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($question-bubble, $inverse, $secondary-contrast, $size); } } .icon-heading--calendar-circle { &::before { - @include u-icon-circle($calendar, $inverse, $secondary-contrast, 4.5rem); content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($calendar, $inverse, $secondary-contrast, 4.5rem); } } .icon-heading--training-circle { &::before { - @include u-icon-circle($training, $inverse, $secondary-contrast, 4.5rem); content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($training, $inverse, $secondary-contrast, 4.5rem); } } .icon-heading--document-circle { &::before { - @include u-icon-circle($document, $inverse, $secondary-contrast, 4.5rem); background-size: u(2.5rem); content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($document, $inverse, $secondary-contrast, 4.5rem); } } .icon-heading--election-circle { &::before { $size: u(4rem); - @include u-icon-circle($election, $inverse, $secondary-contrast, $size); background-size: 70%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($election, $inverse, $secondary-contrast, $size); } } // icons for homepage - legal resources (on primary [blue] slab) .icon-heading--mallet-circle { &::before { - @include u-icon-circle($mallet, $inverse, $primary-contrast, 4.5rem); background-size: u(4rem); content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($mallet, $inverse, $primary-contrast, 4.5rem); } } .icon-heading--subsection-doc-circle { &::before { - @include u-icon-circle($subsection-doc, $inverse, $primary-contrast, 4.5rem); background-size: u(4rem); content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($subsection-doc, $inverse, $primary-contrast, 4.5rem); } } .icon-heading--direction-sign-circle { &::before { - @include u-icon-circle($direction-sign, $inverse, $primary-contrast, 4.5rem); background-size: u(4rem); content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($direction-sign, $inverse, $primary-contrast, 4.5rem); } &.primary{ &::before { - @include u-icon-circle($direction-sign, $primary, $inverse, 4.5rem); background-size: u(4rem); - } + @include u-icon-circle($direction-sign, $primary, $inverse, 4.5rem); + } } } .icon-heading--shield-circle { &::before { - @include u-icon-circle($shield, $inverse, $primary-contrast, 4.5rem); background-size: u(4rem); content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($shield, $inverse, $primary-contrast, 4.5rem); } } .icon-heading--person-location-circle { &::before { $size: u(4rem); - @include u-icon-circle($person-location, $inverse, $primary-contrast, $size); background-size: 50%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($person-location, $inverse, $primary-contrast, $size); } } .icon-heading--individual-contributions-circle { &::before { $size: u(4rem); - @include u-icon-circle($individual-contributions, $inverse, $primary-contrast, $size); background-size: 50%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($individual-contributions, $inverse, $primary-contrast, $size); } } .icon-heading--magnifying-glass-circle { &::before { $size: u(4rem); - @include u-icon-circle($magnifying-glass, $inverse, $primary-contrast, $size); background-size: 50%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($magnifying-glass, $inverse, $primary-contrast, $size); } } @@ -267,16 +267,16 @@ .icon-heading--graph-circle { &::before { $size: u(4rem); - @include u-icon-circle($graph-horizontal-ordered, $primary, $inverse, $size); background-size: u(1.8rem); + @include u-icon-circle($graph-horizontal-ordered, $primary, $inverse, $size); } } .icon-heading--graph-unordered-circle { &::before { $size: u(4rem); - @include u-icon-circle($graph-horizontal-unordered, $primary, $inverse, $size); background-size: u(1.8rem); + @include u-icon-circle($graph-horizontal-unordered, $primary, $inverse, $size); } } @@ -290,54 +290,54 @@ .icon-heading--election-circle { &::before { $size: u(4rem); - @include u-icon-circle($election, $inverse, $secondary-contrast, $size); background-size: 50%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($election, $inverse, $secondary-contrast, $size); } &.primary{ &::before { - @include u-icon-circle($election, $primary, $inverse, 4.5rem); background-size: 40%; - } + @include u-icon-circle($election, $primary, $inverse, 4.5rem); + } } } .icon-heading--example-document { &::before { $size: u(4rem); - @include u-icon-circle($example-document, $inverse, $secondary-contrast, $size); background-size: 100%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($example-document, $inverse, $secondary-contrast, $size); } &.primary{ &::before { - @include u-icon-circle($example-document, $primary, $inverse, 4.5rem); background-size: 40%; - } + @include u-icon-circle($example-document, $primary, $inverse, 4.5rem); + } } } .icon-heading--financial-document { &::before { $size: u(4rem); - @include u-icon-circle($financial-document, $inverse, $secondary-contrast, $size); background-size: 50%; content: ''; float: left; margin-right: u(1.5rem); + @include u-icon-circle($financial-document, $inverse, $secondary-contrast, $size); } &.primary{ &::before { - @include u-icon-circle($financial-document, $primary, $inverse, 4.5rem); background-size: 40%; - } + @include u-icon-circle($financial-document, $primary, $inverse, 4.5rem); + } } } diff --git a/fec/fec/static/scss/components/_icons.scss b/fec/fec/static/scss/components/_icons.scss index 2c97dc65c3..d0849f81fa 100644 --- a/fec/fec/static/scss/components/_icons.scss +++ b/fec/fec/static/scss/components/_icons.scss @@ -118,8 +118,8 @@ display: block; &::before { - @include u-icon-circle($calendar, $secondary, $inverse, 3.4rem); content: ''; + @include u-icon-circle($calendar, $secondary, $inverse, 3.4rem); } } @@ -127,8 +127,8 @@ display: block; &::before { - @include u-icon-circle($updates, $secondary, $inverse, 3.4rem); content: ''; + @include u-icon-circle($updates, $secondary, $inverse, 3.4rem); } } @@ -136,10 +136,10 @@ display: block; &::before { - @include u-icon-circle($calculator, $primary, $inverse, 3.4rem); background-size: 70%; background-position: 50% 45%; content: ''; + @include u-icon-circle($calculator, $primary, $inverse, 3.4rem); } } @@ -148,8 +148,8 @@ margin-right: u(1.5rem); &::before { - @include u-icon-circle($updates, $secondary, $inverse, 3rem); content: ''; + @include u-icon-circle($updates, $secondary, $inverse, 3rem); } } @@ -158,8 +158,8 @@ margin-right: u(1.5rem); &::before { - @include u-icon-circle($calendar, $secondary, $inverse, 3rem); content: ''; + @include u-icon-circle($calendar, $secondary, $inverse, 3rem); } } @@ -169,9 +169,9 @@ vertical-align: middle; &::before { - @include u-icon-circle($check-circle-outline, $inverse, $aqua, 1.5rem); content: ''; background-size: 100%; + @include u-icon-circle($check-circle-outline, $inverse, $aqua, 1.5rem); } } @@ -181,9 +181,9 @@ vertical-align: middle; &::before { - @include u-icon-circle($clock-reverse, $inverse, $primary, 1.7rem); content: ''; background-size: 100%; + @include u-icon-circle($clock-reverse, $inverse, $primary, 1.7rem); } } @@ -191,8 +191,8 @@ display: block; &::before { - @include u-icon-circle($magnifying-glass, $primary, $inverse, 3.4rem); content: ''; + @include u-icon-circle($magnifying-glass, $primary, $inverse, 3.4rem); } } @@ -200,9 +200,9 @@ display: block; &::before { - @include u-icon-circle($checklist, $secondary, $inverse, 3.4rem); content: ''; background-size: 80%; + @include u-icon-circle($checklist, $secondary, $inverse, 3.4rem); } } @@ -210,10 +210,10 @@ display: block; &::before { - @include u-icon-circle($candidate, $primary, $inverse, 3.4rem); content: ''; background-position: 60% 50%; background-size: 50%; + @include u-icon-circle($candidate, $primary, $inverse, 3.4rem); } } @@ -221,8 +221,8 @@ display: block; &::before { - @include u-icon-circle($committee, $primary, $inverse, 3.4rem); content: ''; + @include u-icon-circle($committee, $primary, $inverse, 3.4rem); } } @@ -230,8 +230,8 @@ display: block; &::before { - @include u-icon-circle($piggy-bank, $primary, $inverse, 3.4rem); content: ''; + @include u-icon-circle($piggy-bank, $primary, $inverse, 3.4rem); } } @@ -239,8 +239,8 @@ display: block; &::before { - @include u-icon-circle($disbursement, $primary, $inverse, 3.4rem); content: ''; + @include u-icon-circle($disbursement, $primary, $inverse, 3.4rem); } } @@ -250,12 +250,12 @@ vertical-align: middle; &::before { - @include u-icon-bg($arrow-up-border, $inverse); content: ''; background-size: 75%; display: block; width: u(1.5rem); height: u(1.5rem); + @include u-icon-bg($arrow-up-border, $inverse); } } @@ -265,12 +265,12 @@ vertical-align: middle; &::before { - @include u-icon-bg($arrow-down-border, $inverse); content: ''; background-size: 75%; display: block; width: u(1.5rem); height: u(1.5rem); + @include u-icon-bg($arrow-down-border, $inverse); } } @@ -279,12 +279,12 @@ vertical-align: middle; &::before { - @include u-icon-bg($document, $primary); content: ''; background-size: 75%; display: block; width: u(1.5rem); height: u(1.5rem); + @include u-icon-bg($document, $primary); } } @@ -293,20 +293,20 @@ vertical-align: middle; &::before { - @include u-icon-bg($download, $primary); content: ''; float: left; padding: u(1.5rem); + @include u-icon-bg($download, $primary); } } .icon-star { - @include u-icon-bg($star, $orange); width: u(1.5rem); height: u(1.5rem); margin-bottom: 2px; display: inline-block; vertical-align: middle; + @include u-icon-bg($star, $orange); } .icon-x { diff --git a/fec/fec/static/scss/components/_legal-search.scss b/fec/fec/static/scss/components/_legal-search.scss index 18d354556f..bcd54819bb 100644 --- a/fec/fec/static/scss/components/_legal-search.scss +++ b/fec/fec/static/scss/components/_legal-search.scss @@ -65,10 +65,10 @@ } .legal-mur__archive-icon { - @include u-icon($file-box, $base, 1.5rem, 1.5rem, 100%); display: inline-block; margin-right: u(0.7rem); vertical-align: top; + @include u-icon($file-box, $base, 1.5rem, 1.5rem, 100%); } } @@ -95,13 +95,13 @@ border-bottom: none; &::before { - @include u-icon-bg($arrow-up-circle, $gray); content: ''; display: inline-block; height: 2rem; margin-right: 0.5rem; vertical-align: top; width: 2rem; + @include u-icon-bg($arrow-up-circle, $gray); } @include media($med) { @@ -110,10 +110,10 @@ } .pending-ao__title { - @include u-icon-bg($timer, $base); display: inline-block; padding-right: u(2.5rem); background-position: 100% 50%; + @include u-icon-bg($timer, $base); } .pending-ao__icon { diff --git a/fec/fec/static/scss/components/_list-styles.scss b/fec/fec/static/scss/components/_list-styles.scss index ba34d0e705..1f3f35cae5 100644 --- a/fec/fec/static/scss/components/_list-styles.scss +++ b/fec/fec/static/scss/components/_list-styles.scss @@ -104,8 +104,8 @@ } .list--flat { - @include clearfix(); padding: 0; + @include clearfix(); li { float: left; @@ -118,8 +118,8 @@ } .list--flat-bordered { - @extend .list--flat; padding-bottom: u(.5rem); + @extend .list--flat; li { &::after { @@ -222,11 +222,11 @@ .list--checks { li { - @include u-icon-bg($check, $primary); background-size: u(2rem); background-position: u(0 1.4rem); padding: u(1rem 0 1rem 2.5rem); position: relative; + @include u-icon-bg($check, $primary); } &.list--checks--secondary { @@ -249,8 +249,8 @@ // .list--buttons { - @include clearfix(); padding: 0; + @include clearfix(); li { display: inline-block; diff --git a/fec/fec/static/scss/components/_mega-menu.scss b/fec/fec/static/scss/components/_mega-menu.scss index 55a99aa898..da244eea84 100644 --- a/fec/fec/static/scss/components/_mega-menu.scss +++ b/fec/fec/static/scss/components/_mega-menu.scss @@ -58,11 +58,11 @@ } .mega__page-link { - @include heading(h3); border-bottom: 1px solid $inverse; display: block; margin: 0; padding: u(1rem 0 1rem 1rem); + @include heading(h3); // scss-lint:disable ImportantRule &:hover { @@ -120,17 +120,15 @@ } @include media($med) { -.icon-heading--data-flag-circle--secondary::before, .icon-heading--data-flag-circle--primary::before{ - margin-right: u(1rem); - margin-left: u(.2rem); - } + .icon-heading--data-flag-circle--secondary::before, .icon-heading--data-flag-circle--primary::before { + margin-right: u(1rem); + margin-left: u(.2rem); + } } // scss-lint:disable ImportantRule @include media($lg) { .mega-container { - @include u-font-color($inverse); - @include clearfix(); display: block !important; // Important to override [aria-hidden] styles overflow: hidden; position: absolute; @@ -138,6 +136,9 @@ right: 0; visibility: hidden; + @include u-font-color($inverse); + @include clearfix(); + &.is-open { top: u(4rem); visibility: visible; @@ -145,10 +146,10 @@ z-index: $z-navigation; .mega { - @include transition(all .4s ease-out); - @include transform(translateY(0)); box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .3); transform: translateY(0); + @include transition(all .4s ease-out); + @include transform(translateY(0)); } } @@ -158,13 +159,13 @@ } .mega { - @include clearfix(); - @include transition(all .4s ease-out); - @include transform(translateY(-100%)); background-color: $primary; font-size: u(1.4rem); color: $inverse; padding: u(1rem 4rem 2rem 4rem); + @include clearfix(); + @include transition(all .4s ease-out); + @include transform(translateY(-100%)); .button--standard { color: $base; diff --git a/fec/fec/static/scss/components/_messages.scss b/fec/fec/static/scss/components/_messages.scss index f832fc63cc..0927a6af80 100644 --- a/fec/fec/static/scss/components/_messages.scss +++ b/fec/fec/static/scss/components/_messages.scss @@ -4,7 +4,6 @@ // .message { - @include clearfix(); background-size: u(2rem); background-position: u(2rem 2rem); background-color: $neutral; @@ -13,6 +12,7 @@ border-width: 0 0 0 3px; margin: u(2rem 0); padding: u(5rem 2rem 2rem 2rem); + @include clearfix(); p:last-child { margin-bottom: 0; @@ -29,13 +29,13 @@ } .message--success { - @include u-icon-bg($check-circle, $primary); border-color: $primary-contrast; + @include u-icon-bg($check-circle, $primary); } .message--error { - @include u-icon-bg($x-circle, $primary); border-color: $secondary-contrast; + @include u-icon-bg($x-circle, $primary); } .message--alert { @@ -129,13 +129,13 @@ p { border-color: $inverse; &.message--success { - @include u-icon-bg($check-circle, $inverse); border-color: $primary-contrast; + @include u-icon-bg($check-circle, $inverse); } &.message--error { - @include u-icon-bg($x-circle, $inverse); border-color: $secondary-contrast; + @include u-icon-bg($x-circle, $inverse); } &.message--alert { diff --git a/fec/fec/static/scss/components/_modals.scss b/fec/fec/static/scss/components/_modals.scss index 2fb9500498..473f46e726 100644 --- a/fec/fec/static/scss/components/_modals.scss +++ b/fec/fec/static/scss/components/_modals.scss @@ -49,15 +49,13 @@ } .modal__tips { + padding-top: u(1rem); @include span-columns(5); @include shift(1); - padding-top: u(1rem); } .keyword-modal { .simple-table{ border-width: 0 0; } - } - diff --git a/fec/fec/static/scss/components/_nav.scss b/fec/fec/static/scss/components/_nav.scss index 7511d602e9..94ccaff35c 100644 --- a/fec/fec/static/scss/components/_nav.scss +++ b/fec/fec/static/scss/components/_nav.scss @@ -10,7 +10,10 @@ &.is-open { .site-nav__container { @include transform(translateX(0)); - @include transition(transform, .2s, ease-out); + + & { + @include transition(transform, .2s, ease-out); + } } } } @@ -18,8 +21,6 @@ // div that contains the ul and all panels .site-nav__container { $top: u(6.3rem); - @include transform(translateX(-100%)); - @include transition(left, .2s, ease-out); height: calc(100vh - #{$top}); position: absolute; left: 0; @@ -27,6 +28,8 @@ top: 4rem; overflow-x: hidden; z-index: $z-navigation; + @include transform(translateX(-100%)); + @include transition(left, .2s, ease-out); // scss-lint:disable ImportantRule &[aria-hidden='true'] { @@ -48,7 +51,6 @@ // Styles for each panel on mobile .site-nav__panel { - @include transition(transform, .2s, ease-out); background-color: $primary; color: $inverse; font-size: u(1.6rem); @@ -58,6 +60,7 @@ top: 0; bottom: 0; width: 100%; + @include transition(transform, .2s, ease-out); &.is-open { @include transform(translateX(0)); @@ -77,7 +80,6 @@ // Hamburger button that triggers menu on mobile .site-nav__button { - @include u-icon-bg($menu, $primary); background-color: $gray-lightest; background-position: 50% 50%; background-size: u(2rem); @@ -88,22 +90,23 @@ margin: 0; padding: u(1.8rem 2rem); text-indent: -99999px; + @include u-icon-bg($menu, $primary); &:hover { background-color: $inverse; } &.active { - @include u-icon-bg($menu, $inverse); background-color: $primary; color: $neutral; + @include u-icon-bg($menu, $inverse); } } // li element .site-nav__item { - @include clearfix(); border-bottom: 1px solid $inverse; + @include clearfix(); &:last-child .site-nav__link { border-bottom: 0; @@ -112,7 +115,6 @@ // link or button inside each li .site-nav__link { - @include transition(background-color, .1s); background-position: right u(1rem) top 50%; color: $inverse; display: block; @@ -123,6 +125,7 @@ border-bottom: none; width: 100%; text-align: left; + @include transition(background-color, .1s); &[aria-expanded="true"] { @include u-icon-bg($minus-circle, $inverse); @@ -130,8 +133,8 @@ } [data-submenu] { - @include u-icon-bg($plus-circle, $inverse); background-position: right u(1rem) top 50%; + @include u-icon-bg($plus-circle, $inverse); } // Panel titles on mobile @@ -172,18 +175,17 @@ // Switches to traditional dropdown menu @include media($lg) { .site-nav__container { - @include clearfix(); - @include transform(translateX(0)); height: auto; float: left; overflow: visible; position: relative; top: 0; width: 100%; + @include clearfix(); + @include transform(translateX(0)); } .site-nav__panel { - @include transform(translateX(0)); background: none; border: none; min-height: 0; @@ -193,6 +195,7 @@ display: block; padding: u(0 0 0 2rem); top: 0; + @include transform(translateX(0)); .utility-nav__item { display: none; @@ -235,12 +238,12 @@ } .site-nav__link { - @include u-icon-bg($arrow-down, $gray-dark); background-position: right u(1rem) top 50%; color: $base; cursor: default; text-align: center; padding: u(1rem 3rem 0 2rem); + @include u-icon-bg($arrow-down, $gray-dark); &.is-parent .site-nav__link__title { border-bottom-color: $navy; @@ -255,9 +258,9 @@ } &.is-open { - @include u-icon-bg($arrow-down, $inverse); background-color: $primary; color: $inverse; + @include u-icon-bg($arrow-down, $inverse); } } diff --git a/fec/fec/static/scss/components/_options.scss b/fec/fec/static/scss/components/_options.scss index 956165ff55..ab552be4bd 100644 --- a/fec/fec/static/scss/components/_options.scss +++ b/fec/fec/static/scss/components/_options.scss @@ -4,9 +4,9 @@ // .option { - @include clearfix(); border-top: 2px solid $primary; padding: u(2rem 0); + @include clearfix(); &.option--border-bottom { border-bottom: 1px solid $primary; @@ -25,8 +25,8 @@ } .option__aside { - @include span-columns(4); padding-top: u(2rem); + @include span-columns(4); h6 { border-bottom: none; @@ -70,8 +70,8 @@ } .option__aside { + padding-top: 0; @include span-columns(2 of 9); @include shift(1); - padding-top: 0; } } diff --git a/fec/fec/static/scss/components/_overviews.scss b/fec/fec/static/scss/components/_overviews.scss index a9b5429046..2999f180de 100644 --- a/fec/fec/static/scss/components/_overviews.scss +++ b/fec/fec/static/scss/components/_overviews.scss @@ -4,8 +4,8 @@ // .overview { - @include clearfix(); padding-bottom: u(2rem); + @include clearfix(); } .overview__chart { @@ -28,9 +28,9 @@ } .breakdown-link { - @include heading(h4); display: inline-block; margin: 0 0 2rem 0; + @include heading(h4); } .top-list { diff --git a/fec/fec/static/scss/components/_page-headers.scss b/fec/fec/static/scss/components/_page-headers.scss index 1eb09b97b6..30d6966c21 100644 --- a/fec/fec/static/scss/components/_page-headers.scss +++ b/fec/fec/static/scss/components/_page-headers.scss @@ -41,9 +41,9 @@ @include media($med) { // Add padding, show the search bar in line with the page title .page-header { - @include clearfix(); display: block; padding: u(1rem 2rem); + @include clearfix(); a, a:hover { @@ -74,10 +74,10 @@ @media print { .page-header { - @include clearfix(); display: block; background: $inverse; border-bottom: 1px solid $gray; color: $gray-dark; + @include clearfix(); } } diff --git a/fec/fec/static/scss/components/_posts.scss b/fec/fec/static/scss/components/_posts.scss index 928780cde0..d4821b56c1 100644 --- a/fec/fec/static/scss/components/_posts.scss +++ b/fec/fec/static/scss/components/_posts.scss @@ -88,21 +88,21 @@ } .post__pre { - @include clearfix(); color: $gray-dark; font-family: $sans-serif; padding-bottom: 5px; + @include clearfix(); } .post__doc { &::before { - @include u-icon-bg($document, $base); content: ''; display: inline-block; width: 2rem; height: 2rem; vertical-align: middle; margin-right: 1rem; + @include u-icon-bg($document, $base); } } diff --git a/fec/fec/static/scss/components/_reaction-boxes.scss b/fec/fec/static/scss/components/_reaction-boxes.scss index 628ef5cfed..0c1cacb040 100644 --- a/fec/fec/static/scss/components/_reaction-boxes.scss +++ b/fec/fec/static/scss/components/_reaction-boxes.scss @@ -44,7 +44,6 @@ } .reaction-box__heading { - @include u-icon-bg($question-circle, $primary); display: block; font-size: u(1.6rem); font-weight: bold; @@ -52,4 +51,5 @@ border-bottom: 1px solid $primary; margin-bottom: u(2rem); padding: 0 0 u(1rem) u(3rem); + @include u-icon-bg($question-circle, $primary); } diff --git a/fec/fec/static/scss/components/_results-info.scss b/fec/fec/static/scss/components/_results-info.scss index 189bcac054..7c8f5db72d 100644 --- a/fec/fec/static/scss/components/_results-info.scss +++ b/fec/fec/static/scss/components/_results-info.scss @@ -4,10 +4,10 @@ // .results-info { - @include clearfix(); border-top: 2px solid $primary; border-bottom: 2px solid $primary; padding: u(1rem); + @include clearfix(); .button--export { float: right; @@ -15,8 +15,8 @@ } .results-info__left { - @include clearfix(); margin-bottom: u(1rem); + @include clearfix(); } .results-info__right { diff --git a/fec/fec/static/scss/components/_search-bar.scss b/fec/fec/static/scss/components/_search-bar.scss index 42852ad263..4dda13be55 100644 --- a/fec/fec/static/scss/components/_search-bar.scss +++ b/fec/fec/static/scss/components/_search-bar.scss @@ -296,10 +296,10 @@ $search-button-width: u(5.6rem); // Just testing things out. Refactor to use non-js class if we use it .typeahead-filter { .button--search { - @include u-icon-button($magnifying-glass-arrow); background-size: u(2.8rem); background-position: 50%; padding: 0; + @include u-icon-button($magnifying-glass-arrow); } &[data-allow-text] { @@ -308,10 +308,10 @@ $search-button-width: u(5.6rem); } .button--search { - @include u-icon-button($magnifying-glass); background-size: u(2.2rem); background-position: 50%; padding: 0; + @include u-icon-button($magnifying-glass); } button.is-loading { @@ -319,9 +319,9 @@ $search-button-width: u(5.6rem); } button.is-successful { - @include u-icon-button($check); background-size: u(2.8rem); background-position: 50%; + @include u-icon-button($check); } } } diff --git a/fec/fec/static/scss/components/_search-controls.scss b/fec/fec/static/scss/components/_search-controls.scss index 63116fb634..a38d8682e7 100644 --- a/fec/fec/static/scss/components/_search-controls.scss +++ b/fec/fec/static/scss/components/_search-controls.scss @@ -8,9 +8,9 @@ @use 'sass:math'; .search-controls__row { - @include clearfix(); border-bottom: 1px solid $gray; padding: u(1rem 0); + @include clearfix(); &:first-of-type { padding-top: 0; @@ -70,8 +70,8 @@ } .search-controls__state { - @include span-columns(6); margin-bottom: u(1rem); + @include span-columns(6); select { width: 100%; @@ -99,21 +99,21 @@ overflow: hidden; &:first-child { - height: auto; - margin-bottom: u(2rem); + height: auto; + margin-bottom: u(2rem); } } .search-controls__cycle { - @include span-columns(4.5 of 5.5); margin: u(.5rem 2rem); + @include span-columns(4.5 of 5.5); .cycle-select{ - width:95%; + width: 95%; } } .search-controls__zip { - @include span-columns(4.5 of 5.5); margin-left: u(2rem); + @include span-columns(4.5 of 5.5); } .search-controls__either:first-child { @@ -130,21 +130,20 @@ //For home-page embedded election map form fields .election-search-home { .search-controls__zip { - @include span-columns(6); - margin-bottom: u(1rem); + margin-bottom: u(1rem); + @include span-columns(6); - input { - width: 100%; + input { + width: 100%; + } } } -} - .raising-spending-controls { .office-select { @include span-columns(10); select { - width:100%; + width: 100%; } } .cycle-select { @@ -155,16 +154,16 @@ //for keyword-options modals on AO, MUR, Statues searches .keyword-modal{ .modal__tips, .modal__form { - display:table-row; - width:100%; + display: table-row; + width: 100%; } .modal__tips { - margin-left:0; + margin-left: 0; } .search-controls__or--vertical { - width: 100%; - display:inline-grid; + width: 100%; + display: inline-grid; } } @@ -186,15 +185,15 @@ @include span-columns(3.5 of 5.5); .button--search { - background-size: u(1.5rem); - background-position: 45%; + background-size: u(1.5rem); + background-position: 45%; } } .search-controls__or--vertical { - @include span-columns(1); margin: u(5.5rem 0); text-align: center; + @include span-columns(1); &::before, &::after { @@ -223,8 +222,8 @@ @include span-columns(7.3); .search-controls__submit { - @include span-columns(7.3 of 7.3); margin-top: u(0rem); + @include span-columns(7.3 of 7.3); button { width: 94%; @@ -238,8 +237,8 @@ } .search-controls__cycle { - @include span-columns(4.5 of 5.5); margin: u(.5rem 2rem); + @include span-columns(4.5 of 5.5); } .search-controls__zip { @@ -306,8 +305,8 @@ //for keyword-options modals on AO, MUR, Statues searches .keyword-modal{ .modal__tips, .modal__form { - display:table-cell; - width:44%; + display: table-cell; + width: 44%; } .modal__tips { margin-left: u(1rem); @@ -316,7 +315,7 @@ .search-controls__or--vertical { margin: u(22.5rem 0); width: u(3.5rem); - display:table-cell; + display: table-cell; &::before, &::after { @@ -354,31 +353,31 @@ @include span-columns(1.90 of 5.5); } .search-controls__zip { - @include span-columns(4.5 of 5.5); margin-left: u(3rem); position: relative; top: u(0rem); + @include span-columns(4.5 of 5.5); } .search-controls__cycle { - margin: u(.5rem 2.5rem); + margin: u(.5rem 2.5rem); } .search-controls__either:first-child { - @include span-columns(3.5); margin: u(.5rem 0)!important; + @include span-columns(3.5); } .search-controls__either:last-child { - @include span-columns(8); margin: u(.5rem 0)!important; + @include span-columns(8); fieldset{ margin-left: u(1rem); } .search-controls__submit { - @include span-columns(1.5 of 5.5); margin-top: u(0rem); + @include span-columns(1.5 of 5.5); } } @@ -391,10 +390,10 @@ .search-controls__either { @include span-columns(5.5); - } + } .search-controls__or--vertical { - margin:u(4rem 0 4rem 0); + margin: u(4rem 0 4rem 0); } } diff --git a/fec/fec/static/scss/components/_search-results.scss b/fec/fec/static/scss/components/_search-results.scss index da4c6ebb45..ee72d6dfdc 100644 --- a/fec/fec/static/scss/components/_search-results.scss +++ b/fec/fec/static/scss/components/_search-results.scss @@ -75,8 +75,8 @@ } .result__left { - @include span-columns(5 of 9); border-right: 1px solid $gray; + @include span-columns(5 of 9); } .result__right { @@ -153,8 +153,8 @@ } .result__years { - @include span-columns(3 of 9); margin-bottom: 0; + @include span-columns(3 of 9); } .result__term { @@ -162,9 +162,9 @@ } .result__column { - @include span-columns(3 of 9); border-right: 1px solid $gray; border-bottom: none; + @include span-columns(3 of 9); &:last-child { border-right: none; diff --git a/fec/fec/static/scss/components/_sidebar.scss b/fec/fec/static/scss/components/_sidebar.scss index 906cbe6640..bf9cd489aa 100644 --- a/fec/fec/static/scss/components/_sidebar.scss +++ b/fec/fec/static/scss/components/_sidebar.scss @@ -22,9 +22,9 @@ // .sidebar-container { - @include clearfix(); position: relative; min-height: 1px; + @include clearfix(); @include media($med) { @include span-columns(3); @@ -61,18 +61,18 @@ } .sidebar__title--large { - @include heading(h2); line-height: u(4rem); margin-bottom: 0; padding: u(2rem); text-transform: none; + @include heading(h2); } .sidebar__content { - @include clearfix(); background-color: $neutral; padding: u(2rem); - + @include clearfix(); + p { font-size: u(1.4rem); color: $base; @@ -105,15 +105,15 @@ } .card { - @include u-font-color($inverse); background-color: #dd3700; + @include u-font-color($inverse); } } .sidebar--neutral { + border-top: 4px solid $primary; @include u-bg--neutral(); @include u-font-color($base); - border-top: 4px solid $primary; } .sidebar--breakdown { @@ -136,8 +136,8 @@ .sidebar__record-title { &::before { - @include u-icon-circle($updates, $secondary, $inverse, 3rem); background-size: u(1.5rem); + @include u-icon-circle($updates, $secondary, $inverse, 3rem); } } diff --git a/fec/fec/static/scss/components/_site-header.scss b/fec/fec/static/scss/components/_site-header.scss index 523880ee8e..a5503701b0 100644 --- a/fec/fec/static/scss/components/_site-header.scss +++ b/fec/fec/static/scss/components/_site-header.scss @@ -27,7 +27,6 @@ // Skip nav .skip-nav { - @include transition(top, .2s); background-color: $primary; border: 2px solid $primary-contrast; color: $inverse; @@ -37,6 +36,7 @@ position: absolute; top: u(-10rem); z-index: $z4; + @include transition(top, .2s); &:focus { border-bottom-color: $primary-contrast; @@ -55,7 +55,6 @@ // .disclaimer { - @include clearfix(); border-bottom: 1px solid $neutral; color: $gray-dark; font-family: $sans-serif; @@ -63,6 +62,7 @@ line-height: 1; padding: 5px u(2rem); text-align: center; + @include clearfix(); } .disclaimer__right { @@ -130,13 +130,13 @@ .usa-banner-header { &.accordion__button { - background-image: none; - border:none !important; - padding: u(.75rem 1rem); - - &[aria-expanded=true] { background-image: none; - } + border:none !important; + padding: u(.75rem 1rem); + + &[aria-expanded=true] { + background-image: none; + } } } @@ -396,7 +396,6 @@ .site-nav { .site-title { - @include u-background-image('wordmark', 0% 50%); background-size: contain; display: block; height: u(3rem); @@ -404,6 +403,7 @@ margin: u(.75rem 1rem .25rem); width: calc(100% - 15rem); max-width: u(40rem); + @include u-background-image('wordmark', 0% 50%); } } @@ -424,20 +424,20 @@ } .masthead { - @include u-background-image('seal--cropped', 0% 100%); border-bottom: 2px solid $neutral; display: block; background-size: u(11rem); + @include u-background-image('seal--cropped', 0% 100%); } .site-title { - @include u-background-image('wordmark', u(12rem) 50%); background-size: contain; display: block; margin: u(1rem 0 .7rem 0); padding-left: u(12rem); height: u(3.4rem); width: 100%; + @include u-background-image('wordmark', u(12rem) 50%); } // Mobile site title is included in the .site-nav nav element diff --git a/fec/fec/static/scss/components/_table-styles.scss b/fec/fec/static/scss/components/_table-styles.scss index 141b2e3f13..0597d5aa9e 100644 --- a/fec/fec/static/scss/components/_table-styles.scss +++ b/fec/fec/static/scss/components/_table-styles.scss @@ -85,20 +85,20 @@ h3 + .simple-table { } &.sorting { - @include u-icon-bg($dash, $gray); background-size: u(1rem); + @include u-icon-bg($dash, $gray); } &.sorting_asc { - @include u-icon-bg($arrow-up-border, $primary); background-size: u(1rem); background-color: $gray-lightest; + @include u-icon-bg($arrow-up-border, $primary); } &.sorting_desc { - @include u-icon-bg($arrow-down-border, $primary); background-size: u(1rem); background-color: $gray-lightest; + @include u-icon-bg($arrow-down-border, $primary); } } diff --git a/fec/fec/static/scss/components/_tags.scss b/fec/fec/static/scss/components/_tags.scss index e98be4ef02..ddda803ca4 100644 --- a/fec/fec/static/scss/components/_tags.scss +++ b/fec/fec/static/scss/components/_tags.scss @@ -151,18 +151,18 @@ } .tag__remove { - @include u-icon-bg($x, $primary); background-size: u(1.4rem); background-position: 100% 45%; border: none; padding: u(1rem); + @include u-icon-bg($x, $primary); } .tags__clear { - @include u-icon-bg($x, $primary); background-size: u(1.4rem); background-position: 95% 50%; padding-right: u(2.3rem); + @include u-icon-bg($x, $primary); @include media($med) { float: right; diff --git a/fec/fec/static/scss/components/_tooltips.scss b/fec/fec/static/scss/components/_tooltips.scss index 2053248b90..f455dfd538 100644 --- a/fec/fec/static/scss/components/_tooltips.scss +++ b/fec/fec/static/scss/components/_tooltips.scss @@ -90,21 +90,21 @@ bottom: calc(100% + #{$bottom}); &::before { - @include triangle(2rem, $primary, down); bottom: u(-1rem); content: ''; display: block; left: calc(50% - 1rem); position: absolute; + @include triangle(2rem, $primary, down); } &::after { - @include triangle(1.6rem, $inverse, down); content: ''; display: block; position: absolute; left: calc(50% - .8rem); bottom: u(-.7rem); + @include triangle(1.6rem, $inverse, down); } &.tooltip--left { @@ -232,7 +232,6 @@ } .tooltip__trigger { - @include u-icon-bg($info-circle-outline, $primary); background-position: 50% 50%; background-size: contain; cursor: pointer; @@ -241,6 +240,7 @@ vertical-align: middle; width: u(1.8rem); margin: u(0 0 .5rem .3rem); + @include u-icon-bg($info-circle-outline, $primary); &:hover + .tooltip, &:focus + .tooltip { @@ -255,13 +255,13 @@ } .tooltip__heading { - @include clearfix(); background: $primary; color: $inverse; display: flex; align-items: center; justify-content: space-between; - + @include clearfix(); + .tooltip__title { flex-grow: 2; text-align: left; diff --git a/fec/fec/static/scss/components/_type-styles.scss b/fec/fec/static/scss/components/_type-styles.scss index b13da66be7..0a3d77a24a 100644 --- a/fec/fec/static/scss/components/_type-styles.scss +++ b/fec/fec/static/scss/components/_type-styles.scss @@ -14,17 +14,17 @@ // Used for showing large numbers. Sans-serif and no border .t-display--sans { - @include heading(display); border: none; font-family: $sans-serif; margin-bottom: 0; + @include heading(display); } .t-ruled { - @include clearfix(); border-bottom: 1px solid $base; border-top: 1px solid $base; padding: u(1rem 0); + @include clearfix(); } .t-ruled--bottom { @@ -201,11 +201,11 @@ font-family: $serif // Adds an icon to signify a master table .t-all-data { - @include u-icon-bg($all-files, $base); display: inline-block; background-size: 1em; background-position: 0 30%; padding-left: u(2rem); + @include u-icon-bg($all-files, $base); } // mono space currency font diff --git a/fec/fec/static/scss/elements/_forms.scss b/fec/fec/static/scss/elements/_forms.scss index b513a56f27..1b750fecd9 100644 --- a/fec/fec/static/scss/elements/_forms.scss +++ b/fec/fec/static/scss/elements/_forms.scss @@ -58,24 +58,27 @@ select { } select { + // & { + width: auto; + background-color: transparent; + background-repeat: no-repeat; + background-position: right u(2rem) top 50%; + background-size: 12px; + color: $base; + border: 2px solid $gray; + padding: u(.6rem 3em .6rem 1rem); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + // } + @include appearance(none); @include u-icon-bg($arrow-down, $primary); - width: auto; - background-color: transparent; - background-repeat: no-repeat; - background-position: right u(2rem) top 50%; - background-size: 12px; - color: $base; - border: 2px solid $gray; - padding: u(.6rem 3em .6rem 1rem); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - + &::-ms-expand { display: none; } - + &:hover:not([disabled]) { background-color: $gray-medium; } @@ -189,11 +192,11 @@ input[type="file"] { } [type="checkbox"]:checked + label::before { - @include u-icon-bg($check, $inverse); background-position: 50%; background-size: 12px; background-repeat: no-repeat; border: 1px solid $gray-dark; + @include u-icon-bg($check, $inverse); } [type="checkbox"]:focus + label, @@ -215,7 +218,6 @@ input[type="file"] { [type="reset"], [type="button"], button { - @include appearance(none); background: none; border: none; border-radius: 0; @@ -225,6 +227,7 @@ button { line-height: 1; text-decoration: none; user-select: none; + @include appearance(none); &:hover, &:focus { diff --git a/fec/fec/static/scss/elements/_tables.scss b/fec/fec/static/scss/elements/_tables.scss index 88afa4abde..0c32ee5886 100644 --- a/fec/fec/static/scss/elements/_tables.scss +++ b/fec/fec/static/scss/elements/_tables.scss @@ -2,11 +2,11 @@ // table { - @include font-feature-settings("kern", "liga", "tnum"); border-collapse: collapse; margin: 0; table-layout: fixed; width: 100%; + @include font-feature-settings("kern", "liga", "tnum"); } th { diff --git a/fec/fec/static/scss/elements/_typography.scss b/fec/fec/static/scss/elements/_typography.scss index 8180f8ce32..5abcb8c34b 100644 --- a/fec/fec/static/scss/elements/_typography.scss +++ b/fec/fec/static/scss/elements/_typography.scss @@ -14,12 +14,13 @@ html { } body { - @include font-feature-settings("kern", "liga", "pnum"); // -webkit-font-smoothing: antialiased; color: $base; font-family: $base-font-family; font-size: u(1.4rem); line-height: 1.8; + + @include font-feature-settings("kern", "liga", "pnum"); } h1 { diff --git a/fec/fec/static/scss/layout/_layout.scss b/fec/fec/static/scss/layout/_layout.scss index 9fb0fb232b..b9cc57a24e 100644 --- a/fec/fec/static/scss/layout/_layout.scss +++ b/fec/fec/static/scss/layout/_layout.scss @@ -8,8 +8,8 @@ // used to center and group grid items .container { - @include outer-container(); padding: u(0 2rem); + @include outer-container(); @include media($lg) { padding: 0; @@ -23,10 +23,10 @@ // the main content area below heroes .main { - @include clearfix(); padding-bottom: u(2rem); padding-top: u(2rem); position: relative; + @include clearfix(); @include media($lg) { padding-top: u(3rem); @@ -41,8 +41,8 @@ // the area below page headers, next to sidebar .main__content { - @include clearfix(); position: relative; + @include clearfix(); @include media($med) { @include span-columns(8); @@ -50,8 +50,8 @@ } .main__content--right { - @include clearfix(); position: relative; + @include clearfix(); @include media($med) { @include span-columns(9); @@ -60,14 +60,14 @@ // full-width main content area .main__content--full { - @include clearfix(); position: relative; + @include clearfix(); } .main__content--right-full { - @include clearfix(); position: relative; width: 100%; + @include clearfix(); @include media($med) { display: table-cell; @@ -77,13 +77,13 @@ // adds padding for breaking up sections of body content .content__section { - @include clearfix(); padding: u(0 0 2rem 0); + @include clearfix(); } .content__section--extra { - @include clearfix(); padding: u(2rem 0); + @include clearfix(); @include media($lg) { padding: u(4rem 0); @@ -190,11 +190,11 @@ } .u-negative--top--margin { -margin-top: u(-1rem); + margin-top: u(-1rem); } .u-negative--bottom--margin { -margin-bottom: u(-1rem) !important; + margin-bottom: u(-1rem) !important; } // horizontal rule diff --git a/fec/fec/static/scss/layout/_slabs.scss b/fec/fec/static/scss/layout/_slabs.scss index 90bea482da..e0c67514f1 100644 --- a/fec/fec/static/scss/layout/_slabs.scss +++ b/fec/fec/static/scss/layout/_slabs.scss @@ -11,8 +11,8 @@ // .slab { - @include clearfix(); padding: u(2rem 0); + @include clearfix(); } // Neutral gray background with base accents and type (default) @@ -54,8 +54,8 @@ } .slab--inline .container { - @include span-columns(10); padding-left: u(2rem); + @include span-columns(10); } } diff --git a/fec/fec/static/scss/mixins/_type-mixins.scss b/fec/fec/static/scss/mixins/_type-mixins.scss index c13667b97f..0e321e6b82 100644 --- a/fec/fec/static/scss/mixins/_type-mixins.scss +++ b/fec/fec/static/scss/mixins/_type-mixins.scss @@ -2,15 +2,19 @@ // @mixin heading($level) { - margin: 0 0 1em 0; + & { + margin: 0 0 1em 0; + } @if $level == display { - font-family: $serif; - font-size: u(3.6rem); - font-weight: bold; - line-height: 1; - margin: u(0 0 1rem 0); - padding: u(1.2rem 0); + & { + font-family: $serif; + font-size: u(3.6rem); + font-weight: bold; + line-height: 1; + margin: u(0 0 1rem 0); + padding: u(1.2rem 0); + } @include media($med) { font-size: u(4rem); @@ -18,11 +22,13 @@ } @if $level == h1 { - font-family: $serif; - font-size: u(2.4rem); - font-weight: bold; - line-height: 1.2; - margin: 0; + & { + font-family: $serif; + font-size: u(2.4rem); + font-weight: bold; + line-height: 1.2; + margin: 0; + } @include media($med) { font-size: u(3.6rem); @@ -30,10 +36,12 @@ } @if $level == h2 { - font-family: $serif; - font-size: u(2rem); - font-weight: bold; - line-height: 1.2; + & { + font-family: $serif; + font-size: u(2rem); + font-weight: bold; + line-height: 1.2; + } @include media($med) { font-size: u(2.4rem); @@ -41,36 +49,44 @@ } @if $level == h3 { - font-family: $serif; - font-size: u(1.8rem); - font-weight: bold; - line-height: 1.6; + & { + font-family: $serif; + font-size: u(1.8rem); + font-weight: bold; + line-height: 1.6; + } } @if $level == h4 { - font-family: $sans-serif; - font-size: u(1.8rem); - font-weight: bold; - line-height: 1.2; - letter-spacing: -.3px; - margin: u(1.4rem 0 1rem 0); + & { + font-family: $sans-serif; + font-size: u(1.8rem); + font-weight: bold; + line-height: 1.2; + letter-spacing: -.3px; + margin: u(1.4rem 0 1rem 0); + } } @if $level == h5 { - font-family: $serif; - font-size: u(1.6rem); - font-weight: bold; - margin: u(1.5rem 0 .75rem 0); - line-height: 1.33; + & { + font-family: $serif; + font-size: u(1.6rem); + font-weight: bold; + margin: u(1.5rem 0 .75rem 0); + line-height: 1.33; + } } @if $level == h6 { - border-bottom: 1px solid $base; - font-family: $sans-serif; - font-size: u(1.3rem); - font-weight: bold; - line-height: 1.63; - text-transform: uppercase; + & { + border-bottom: 1px solid $base; + font-family: $sans-serif; + font-size: u(1.3rem); + font-weight: bold; + line-height: 1.63; + text-transform: uppercase; + } } } diff --git a/fec/fec/static/scss/mixins/_utilities.scss b/fec/fec/static/scss/mixins/_utilities.scss index b0f3bb6ed2..29331fe50b 100644 --- a/fec/fec/static/scss/mixins/_utilities.scss +++ b/fec/fec/static/scss/mixins/_utilities.scss @@ -99,8 +99,10 @@ // @mixin u-icon-bg($icon, $color) { - background-image: url('#{svg-fill($icon, $color)}'); - background-repeat: no-repeat; + & { + background-image: url('#{svg-fill($icon, $color)}'); + background-repeat: no-repeat; + } } // u-icon-circle() @@ -110,7 +112,6 @@ // @mixin u-icon-circle($icon, $circlecolor, $iconcolor, $size) { - @include u-icon-bg($icon, $iconcolor); background-position: 50% 50%; background-size: 60%; background-color: $circlecolor; @@ -118,6 +119,8 @@ display: block; height: $size; width: $size; + + @include u-icon-bg($icon, $iconcolor); } // u-font-color() @@ -128,7 +131,10 @@ // @mixin u-font-color($color) { - color: $color; + + & { + color: $color; + } h1, h2, @@ -151,8 +157,7 @@ h1, .h1, h6, - .h6 - a { + .h6 a { border-color: $color; } @@ -184,15 +189,16 @@ } [type="checkbox"]:checked + label::before { - @include u-icon-bg($check, $base); background-color: $inverse; + @include u-icon-bg($check, $base); } select { - @include u-icon-bg($arrow-down, $inverse); border: 2px solid $inverse; color: $inverse; + @include u-icon-bg($arrow-down, $inverse); + &:hover:not(.is-disabled):not([disabled]) { border-color: $gray-medium; background-color: transparent; @@ -219,10 +225,11 @@ // @mixin u-bg--primary() { - @include u-form--inverse(); - @include u-font-color($gray-lightest); background-color: $primary; + @include u-form--inverse(); + @include u-font-color($gray-lightest); + a { border-bottom-color: $gray-lightest; @@ -246,9 +253,9 @@ // @mixin u-bg--secondary() { + background-color: $secondary; @include u-form--inverse(); @include u-font-color($gray-lightest); - background-color: $secondary; a { border-bottom-color: $gray-lightest; @@ -273,9 +280,9 @@ } @mixin u-bg--neutral() { + background-color: $gray-lightest; @include u-font-color($base); @include u-form-color($inverse, $primary, $primary-contrast, 'neutral', $primary); - background-color: $gray-lightest; a { &:hover { @@ -290,9 +297,10 @@ // @mixin u-bg--dark() { + background-color: $gray-dark; + @include u-form--inverse(); @include u-font-color($gray-lightest); - background-color: $gray-dark; a { border-bottom-color: $gray-lightest; @@ -304,8 +312,9 @@ } @mixin u-bg--neutral() { + & { background-color: $gray-lightest; } + @include u-font-color($base); - background-color: $gray-lightest; a { &:hover { diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss b/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss index 9f490a7762..6031e2d2fc 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss @@ -33,23 +33,23 @@ @each $prefix in $prefixes { @if $prefix == webkit { @if $prefix-for-webkit { - -webkit-#{$property}: $value; + & { -webkit-#{$property}: $value; } } } @else if $prefix == moz { @if $prefix-for-mozilla { - -moz-#{$property}: $value; + & { -moz-#{$property}: $value; } } } @else if $prefix == ms { @if $prefix-for-microsoft { - -ms-#{$property}: $value; + & { -ms-#{$property}: $value; } } } @else if $prefix == o { @if $prefix-for-opera { - -o-#{$property}: $value; + & { -o-#{$property}: $value; } } } @else if $prefix == spec { @if $prefix-for-spec { - #{$property}: $value; + & { #{$property}: $value; } } } @else { @warn "Unrecognized prefix: #{$prefix}"; diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss b/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss index 0c9b1570a7..71d81c85cc 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss @@ -23,19 +23,19 @@ @mixin box-pack($pack: start) { // start|end|center|justify @include prefixer(box-pack, $pack, webkit moz spec); - -ms-flex-pack: $pack; // IE 10 + & { -ms-flex-pack: $pack; } // IE 10 } @mixin box-align($align: stretch) { // start|end|center|baseline|stretch @include prefixer(box-align, $align, webkit moz spec); - -ms-flex-align: $align; // IE 10 + & { -ms-flex-align: $align; } // IE 10 } @mixin box-direction($direction: normal) { // normal|reverse|inherit @include prefixer(box-direction, $direction, webkit moz spec); - -ms-flex-direction: $direction; // IE 10 + & { -ms-flex-direction: $direction; } // IE 10 } @mixin box-lines($lines: single) { @@ -45,12 +45,12 @@ @mixin box-ordinal-group($int: 1) { @include prefixer(box-ordinal-group, $int, webkit moz spec); - -ms-flex-order: $int; // IE 10 + & { -ms-flex-order: $int; } // IE 10 } @mixin box-flex($value: 0) { @include prefixer(box-flex, $value, webkit moz spec); - -ms-flex: $value; // IE 10 + & { -ms-flex: $value; } // IE 10 } @mixin box-flex-group($int: 1) { @@ -136,7 +136,7 @@ @include prefixer(flex-direction, $value, webkit moz spec); // 2011 (IE 10) - -ms-flex-direction: $value; + & { -ms-flex-direction: $value; } } // 2009 - box-lines (single | multiple) @@ -175,25 +175,25 @@ @include prefixer(order, $int, webkit moz spec); // 2011 (IE 10) - -ms-flex-order: $int; + & { -ms-flex-order: $int; } } // 2012 - flex-grow (number) @mixin flex-grow($number: 0) { @include prefixer(flex-grow, $number, webkit moz spec); - -ms-flex-positive: $number; + & { -ms-flex-positive: $number; } } // 2012 - flex-shrink (number) @mixin flex-shrink($number: 1) { @include prefixer(flex-shrink, $number, webkit moz spec); - -ms-flex-negative: $number; + & { -ms-flex-negative: $number; } } // 2012 - flex-basis (number) @mixin flex-basis($width: auto) { @include prefixer(flex-basis, $width, webkit moz spec); - -ms-flex-preferred-size: $width; + & { -ms-flex-preferred-size: $width; } } // 2009 - box-pack (start | end | center | justify) @@ -220,7 +220,7 @@ @include prefixer(justify-content, $value, webkit moz ms o spec); // 2011 (IE 10) - -ms-flex-pack: $alt-value; + & { -ms-flex-pack: $alt-value; } } // 2009 - box-align (start | end | center | baseline | stretch) @@ -243,7 +243,7 @@ @include prefixer(align-items, $value, webkit moz ms o spec); // 2011 (IE 10) - -ms-flex-align: $alt-value; + & { -ms-flex-align: $alt-value; } } // 2011 - flex-item-align (auto | start | end | center | baseline | stretch) @@ -261,7 +261,7 @@ @include prefixer(align-self, $value, webkit moz spec); // 2011 (IE 10) - -ms-flex-item-align: $value-2011; + & { -ms-flex-item-align: $value-2011; } } // 2011 - flex-line-pack (start | end | center | justify | distribute | stretch) @@ -283,5 +283,5 @@ @include prefixer(align-content, $value, webkit moz spec); // 2011 (IE 10) - -ms-flex-line-pack: $value-2011; + & { -ms-flex-line-pack: $value-2011; } } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss b/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss index 3c785ed527..68195d04a6 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss @@ -52,9 +52,11 @@ } @mixin transition-property($properties...) { - -webkit-transition-property: transition-property-names($properties, "webkit"); + & { + -webkit-transition-property: transition-property-names($properties, "webkit"); -moz-transition-property: transition-property-names($properties, "moz"); transition-property: transition-property-names($properties, false); + } } @mixin transition-duration($times...) { diff --git a/fec/fec/static/scss/vendor/neat/grid/_omega.scss b/fec/fec/static/scss/vendor/neat/grid/_omega.scss index 80f918ab7e..0d8fc9a85a 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_omega.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_omega.scss @@ -53,7 +53,7 @@ } @else if contains-display-value($query) and $table == false { - margin-#{$direction}: 0; + & { margin-#{$direction}: 0; } } @else { diff --git a/fec/fec/static/scss/vendor/neat/grid/_outer-container.scss b/fec/fec/static/scss/vendor/neat/grid/_outer-container.scss index 47c055e76f..42eb8dc366 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_outer-container.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_outer-container.scss @@ -29,10 +29,10 @@ /// } @mixin outer-container($local-max-width: $max-width) { - @include clearfix; - max-width: $local-max-width; margin: { left: auto; right: auto; } + max-width: $local-max-width; + @include clearfix; } diff --git a/fec/fec/static/scss/vendor/neat/grid/_shift.scss b/fec/fec/static/scss/vendor/neat/grid/_shift.scss index 41355ad096..0bd77c772e 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_shift.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_shift.scss @@ -16,7 +16,7 @@ /// } @mixin shift($n-columns: 1) { - @include shift-in-context($n-columns); + & { @include shift-in-context($n-columns); } } /// Translates an element horizontally by a number of columns, in a specific nesting context. diff --git a/fec/fec/static/scss/widgets/aggregate-totals.scss b/fec/fec/static/scss/widgets/aggregate-totals.scss index 0d85115049..0096f13897 100644 --- a/fec/fec/static/scss/widgets/aggregate-totals.scss +++ b/fec/fec/static/scss/widgets/aggregate-totals.scss @@ -53,12 +53,6 @@ section.aggregate-totals-section { // The aggregate totals aside aside.aggr-totals[id^='gov_fec_at_'] { - &, - & * { - // THESE ARE PASSED DOWN TO CHILDREN - box-sizing: border-box; - } - background-color: $colorBgLight; border-radius: 4px; box-shadow: 0 0 0 2px $colorTextOnLight inset; @@ -69,6 +63,12 @@ aside.aggr-totals[id^='gov_fec_at_'] { margin: 0 0 ($fontSizeBase * 2); padding: ($fontSizeBase * 2); + &, + & * { + // THESE ARE PASSED DOWN TO CHILDREN + box-sizing: border-box; + } + .controls-wrapper { font-family: $fontFamilySansSerif; margin-bottom: $fontSizeBase * 2; diff --git a/fec/fec/static/scss/widgets/contributions-by-state.scss b/fec/fec/static/scss/widgets/contributions-by-state.scss index 8a7de5ccf1..a776e05f47 100644 --- a/fec/fec/static/scss/widgets/contributions-by-state.scss +++ b/fec/fec/static/scss/widgets/contributions-by-state.scss @@ -65,12 +65,6 @@ $info-circle: 'data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2 } aside.contribs-by-state { - &, - & * { - // THESE ARE PASSED DOWN TO CHILDREN - box-sizing: border-box; - } - font-family: $fontFamilySansSerif; font-feature-settings: 'kern', 'liga', 'pnum'; font-size: $fontSizeBase * 1.4; @@ -78,6 +72,12 @@ aside.contribs-by-state { position: relative; width: 100%; + &, + & * { + // THESE ARE PASSED DOWN TO CHILDREN + box-sizing: border-box; + } + // .error-msg { // color: $error; // } @@ -169,9 +169,9 @@ aside.contribs-by-state { } button.is-successful { - @include u-icon-button($check); - background-size: 2.8rem; background-position: 50%; + background-size: 2.8rem; + @include u-icon-button($check); } } #contribs-by-state-typeahead-error { diff --git a/fec/fec/static/scss/widgets/party-money-bars.scss b/fec/fec/static/scss/widgets/party-money-bars.scss index a3ba04ec5e..8a0255e322 100644 --- a/fec/fec/static/scss/widgets/party-money-bars.scss +++ b/fec/fec/static/scss/widgets/party-money-bars.scss @@ -16,41 +16,35 @@ $fontWeightBold: 700; // The party money bars root selector .js-party-money-bars { + font-family: fontFamilySerif; // TODO - complete it + font-feature-settings: 'kern', 'liga', 'pnum'; + font-size: $fontSizeBase; min-width: 20rem; + &, & * { // THESE ARE PASSED DOWN TO CHILDREN box-sizing: border-box; } -// background-color: $colorBgLight; -// border-radius: 4px; -// box-shadow: 0 0 0 2px $colorTextOnLight inset; -// color: $colorTextOnLight; - font-family: fontFamilySerif; // TODO - complete it - font-feature-settings: 'kern', 'liga', 'pnum'; - font-size: $fontSizeBase; -// margin: 0 0 ($fontSizeBase * 2); -// padding: ($fontSizeBase * 2); - - .js-parties-holder { - grid-template-columns: 4em auto 25%; - display: grid; + .js-parties-holder { + grid-template-columns: 4em auto 25%; + display: grid; - .js-meter-row { - display: contents; - } - .js.party.title { - padding-top: 3px; - } - .js-party-value { - padding: 0 1em 3px 0; - } + .js-meter-row { + display: contents; + } + .js.party.title { + padding-top: 3px; + } + .js-party-value { + padding: 0 1em 3px 0; + } - div, label { - border-bottom: solid 1px $colorBorderBottom; - } + div, label { + border-bottom: solid 1px $colorBorderBottom; } + } .total-wrapper { display: -ms-flexbox; diff --git a/fec/fec/static/scss/widgets/pres-finance-map.scss b/fec/fec/static/scss/widgets/pres-finance-map.scss index f55b130426..3418c15385 100644 --- a/fec/fec/static/scss/widgets/pres-finance-map.scss +++ b/fec/fec/static/scss/widgets/pres-finance-map.scss @@ -22,12 +22,6 @@ $fontWeightBold: 700; $sizeTableScroller: 10px; #gov-fec-pres-finance { - &, - & * { - // THESE ARE PASSED DOWN TO CHILDREN - box-sizing: border-box; - } - font-family: $fontFamilySansSerif; font-feature-settings: 'kern', 'liga', 'pnum'; font-size: $fontSizeBase * 1.4; @@ -35,6 +29,12 @@ $sizeTableScroller: 10px; position: relative; width: 100%; + &, + & * { + // THESE ARE PASSED DOWN TO CHILDREN + box-sizing: border-box; + } + // Overrides for the filters .filters { background: none; @@ -259,6 +259,7 @@ $sizeTableScroller: 10px; circle { opacity: 1; pointer-events: initial; + transition: .5s; z-index: 100; &.blur { @@ -266,7 +267,6 @@ $sizeTableScroller: 10px; pointer-events: initial; } - transition: .5s; } } path.zero-value, circle.zero-value { From eea229f27283b59020d2fcec84145fb9258f7593 Mon Sep 17 00:00:00 2001 From: Robert Date: Thu, 1 Aug 2024 15:53:52 -0400 Subject: [PATCH 02/10] Add sass stylelint --- .stylelintrc.json | 40 ++ package-lock.json | 1001 ++++++++++++++++++++++++++++++++++++++++----- package.json | 6 + 3 files changed, 953 insertions(+), 94 deletions(-) create mode 100644 .stylelintrc.json diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000000..f4e7cb588d --- /dev/null +++ b/.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" + ] +} diff --git a/package-lock.json b/package-lock.json index ee3d539e60..5aa9f12f2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -123,6 +123,10 @@ "sinon-chai": "^3.7.0", "stream-browserify": "^3.0.0", "stringify": "^5.2.0", + "stylelint": "^16.8.1", + "stylelint-config-css-modules": "^4.4.0", + "stylelint-config-standard-scss": "^13.1.0", + "stylelint-scss": "^6.4.1", "underscore": "^1.13.6", "urijs": "^1.19.11", "vue": "^2.7.16", @@ -2093,6 +2097,96 @@ "node": ">=0.1.90" } }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz", + "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^2.4.1" + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz", + "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18" + } + }, + "node_modules/@csstools/media-query-list-parser": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz", + "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1" + } + }, + "node_modules/@csstools/selector-specificity": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz", + "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -2103,6 +2197,17 @@ "node": ">=10.0.0" } }, + "node_modules/@dual-bundle/import-meta-resolve": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", + "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -2282,6 +2387,31 @@ "node": ">=0.4.0" } }, + "node_modules/@gulp-sourcemaps/identity-map/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true, + "license": "ISC" + }, + "node_modules/@gulp-sourcemaps/identity-map/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, "node_modules/@gulp-sourcemaps/identity-map/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -3180,35 +3310,6 @@ "prettier": "^1.18.2 || ^2.0.0" } }, - "node_modules/@vue/compiler-sfc/node_modules/postcss": { - "version": "8.4.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", - "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.0.1", - "source-map-js": "^1.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, "node_modules/@vue/compiler-sfc/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -4386,6 +4487,16 @@ "node": ">=4" } }, + "node_modules/astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/async": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", @@ -6857,6 +6968,13 @@ } ] }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true, + "license": "MIT" + }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", @@ -7398,6 +7516,16 @@ "source-map-resolve": "^0.6.0" } }, + "node_modules/css-functions-list": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz", + "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12 || >=16" + } + }, "node_modules/css-select": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", @@ -7884,9 +8012,9 @@ "license": "MIT" }, "node_modules/debug": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", - "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", + "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", "dev": true, "license": "MIT", "dependencies": { @@ -8233,6 +8361,29 @@ "dev": true, "license": "MIT" }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/dir-glob/node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/discontinuous-range": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz", @@ -9984,6 +10135,36 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -11013,6 +11194,13 @@ "node": ">=0.10.0" } }, + "node_modules/globjoin": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", + "dev": true, + "license": "MIT" + }, "node_modules/glogg": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz", @@ -12527,6 +12715,19 @@ "dev": true, "license": "MIT" }, + "node_modules/html-tags": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/htmlescape": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.1.tgz", @@ -14674,6 +14875,13 @@ "node": ">=0.10.0" } }, + "node_modules/known-css-properties": { + "version": "0.34.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz", + "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==", + "dev": true, + "license": "MIT" + }, "node_modules/labeled-stream-splicer": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-2.0.2.tgz", @@ -15131,6 +15339,13 @@ "lodash._root": "^3.0.0" } }, + "node_modules/lodash.truncate": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", + "dev": true, + "license": "MIT" + }, "node_modules/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", @@ -15539,6 +15754,17 @@ "node": ">=0.10.0" } }, + "node_modules/mathml-tag-names": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", + "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", + "dev": true, + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -15588,6 +15814,19 @@ "node": ">=0.12" } }, + "node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -15595,6 +15834,16 @@ "dev": true, "license": "MIT" }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, "node_modules/micromatch": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", @@ -17961,54 +18210,96 @@ } }, "node_modules/postcss": { - "version": "7.0.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", - "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "version": "8.4.40", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz", + "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==", "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "license": "MIT", "dependencies": { - "picocolors": "^0.2.1", - "source-map": "^0.6.1" + "nanoid": "^3.3.7", + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" }, "engines": { - "node": ">=6.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" + "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-selector-parser": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", - "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", + "node_modules/postcss-media-query-parser": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", + "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", "dev": true, - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } + "license": "MIT" }, - "node_modules/postcss/node_modules/picocolors": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", - "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "node_modules/postcss-resolve-nested-selector": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.4.tgz", + "integrity": "sha512-R6vHqZWgVnTAPq0C+xjyHfEZqfIYboCBVSy24MjxEDm+tIh1BU4O6o7DP7AA7kHzf136d+Qc5duI4tlpHjixDw==", "dev": true, - "license": "ISC" + "license": "MIT" }, - "node_modules/postcss/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "node_modules/postcss-scss": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz", + "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==", "dev": true, - "license": "BSD-3-Clause", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-scss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", "engines": { - "node": ">=0.10.0" + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.4.29" } }, + "node_modules/postcss-selector-parser": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", + "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, "node_modules/preact": { "version": "10.12.1", "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz", @@ -18503,35 +18794,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/purgecss/node_modules/postcss": { - "version": "8.4.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", - "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.0.1", - "source-map-js": "^1.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, "node_modules/qjobs": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz", @@ -20202,6 +20464,60 @@ "node": ">=8" } }, + "node_modules/slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/slice-ansi/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/slice-ansi/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, "node_modules/smart-buffer": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", @@ -21070,6 +21386,419 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stylelint": { + "version": "16.8.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.8.1.tgz", + "integrity": "sha512-O8aDyfdODSDNz/B3gW2HQ+8kv8pfhSu7ZR7xskQ93+vI6FhKKGUJMQ03Ydu+w3OvXXE0/u4hWU4hCPNOyld+OA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "license": "MIT", + "dependencies": { + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1", + "@csstools/media-query-list-parser": "^2.1.13", + "@csstools/selector-specificity": "^3.1.1", + "@dual-bundle/import-meta-resolve": "^4.1.0", + "balanced-match": "^2.0.0", + "colord": "^2.9.3", + "cosmiconfig": "^9.0.0", + "css-functions-list": "^3.2.2", + "css-tree": "^2.3.1", + "debug": "^4.3.6", + "fast-glob": "^3.3.2", + "fastest-levenshtein": "^1.0.16", + "file-entry-cache": "^9.0.0", + "global-modules": "^2.0.0", + "globby": "^11.1.0", + "globjoin": "^0.1.4", + "html-tags": "^3.3.1", + "ignore": "^5.3.1", + "imurmurhash": "^0.1.4", + "is-plain-object": "^5.0.0", + "known-css-properties": "^0.34.0", + "mathml-tag-names": "^2.1.3", + "meow": "^13.2.0", + "micromatch": "^4.0.7", + "normalize-path": "^3.0.0", + "picocolors": "^1.0.1", + "postcss": "^8.4.40", + "postcss-resolve-nested-selector": "^0.1.4", + "postcss-safe-parser": "^7.0.0", + "postcss-selector-parser": "^6.1.1", + "postcss-value-parser": "^4.2.0", + "resolve-from": "^5.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^7.1.0", + "supports-hyperlinks": "^3.0.0", + "svg-tags": "^1.0.0", + "table": "^6.8.2", + "write-file-atomic": "^5.0.1" + }, + "bin": { + "stylelint": "bin/stylelint.mjs" + }, + "engines": { + "node": ">=18.12.0" + } + }, + "node_modules/stylelint-config-css-modules": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/stylelint-config-css-modules/-/stylelint-config-css-modules-4.4.0.tgz", + "integrity": "sha512-J93MtxPjRzs/TjwbJ5y9SQy4iIqULXwL1CF1yx2tQCJfS/VZUcDAmoGOwqlLbhHXSQtZO5XQiA75NVWUR3KDCQ==", + "dev": true, + "license": "Unlicense", + "optionalDependencies": { + "stylelint-scss": "^6.0.0" + }, + "peerDependencies": { + "stylelint": "^14.5.1 || ^15.0.0 || ^16.0.0" + } + }, + "node_modules/stylelint-config-recommended": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", + "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "license": "MIT", + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint-config-recommended-scss": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz", + "integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-scss": "^4.0.9", + "stylelint-config-recommended": "^14.0.1", + "stylelint-scss": "^6.4.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "postcss": "^8.3.3", + "stylelint": "^16.6.1" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + } + } + }, + "node_modules/stylelint-config-standard": { + "version": "36.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz", + "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "license": "MIT", + "dependencies": { + "stylelint-config-recommended": "^14.0.1" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/stylelint-config-standard-scss": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz", + "integrity": "sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==", + "dev": true, + "license": "MIT", + "dependencies": { + "stylelint-config-recommended-scss": "^14.0.0", + "stylelint-config-standard": "^36.0.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "postcss": "^8.3.3", + "stylelint": "^16.3.1" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + } + } + }, + "node_modules/stylelint-scss": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.4.1.tgz", + "integrity": "sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "known-css-properties": "^0.34.0", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-selector-parser": "^6.1.0", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.0.2" + } + }, + "node_modules/stylelint/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/stylelint/node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint/node_modules/balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", + "dev": true, + "license": "MIT" + }, + "node_modules/stylelint/node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz", + "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==", + "dev": true, + "license": "MIT", + "dependencies": { + "flat-cache": "^5.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/stylelint/node_modules/flat-cache": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz", + "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "flatted": "^3.3.1", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/stylelint/node_modules/global-modules": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", + "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "global-prefix": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/stylelint/node_modules/global-prefix": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz", + "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==", + "dev": true, + "license": "MIT", + "dependencies": { + "ini": "^1.3.5", + "kind-of": "^6.0.2", + "which": "^1.3.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/stylelint/node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/stylelint/node_modules/kind-of": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/stylelint/node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true, + "license": "CC0-1.0" + }, + "node_modules/stylelint/node_modules/postcss-safe-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", + "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/stylelint/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/stylelint/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/stylelint/node_modules/which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "which": "bin/which" + } + }, + "node_modules/stylelint/node_modules/write-file-atomic": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "imurmurhash": "^0.1.4", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/subarg": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz", @@ -21093,6 +21822,43 @@ "node": ">=4" } }, + "node_modules/supports-hyperlinks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", + "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0", + "supports-color": "^7.0.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/supports-hyperlinks/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/supports-hyperlinks/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", @@ -21117,6 +21883,12 @@ "es6-symbol": "^3.1.1" } }, + "node_modules/svg-tags": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", + "dev": true + }, "node_modules/svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -21232,6 +22004,47 @@ "acorn-node": "^1.2.0" } }, + "node_modules/table": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", + "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "ajv": "^8.0.1", + "lodash.truncate": "^4.4.2", + "slice-ansi": "^4.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/table/node_modules/ajv": { + "version": "8.17.1", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", + "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "fast-uri": "^3.0.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/table/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true, + "license": "MIT" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index 73dbedc1e8..c8855781be 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "build-js": "cd fec && webpack --mode development", "build-production": "cd fec && webpack --mode production && gulp build-sass && gulp build-widgets-sass && gulp purgecss", "format": "eslint --fix ./fec/fec/static/js/**/*.js", + "format-sass": "stylelint ./fec/fec/static/scss/**/*.scss", + "format-sass-fix": "stylelint --fix ./fec/fec/static/scss/**/*.scss", "lint": "eslint --quiet ./fec/fec/static/js/**/*.js", "format-lint": "npm run format && npm run lint", "test": "karma start", @@ -137,6 +139,10 @@ "sinon-chai": "^3.7.0", "stream-browserify": "^3.0.0", "stringify": "^5.2.0", + "stylelint": "^16.8.1", + "stylelint-config-css-modules": "^4.4.0", + "stylelint-config-standard-scss": "^13.1.0", + "stylelint-scss": "^6.4.1", "underscore": "^1.13.6", "urijs": "^1.19.11", "vue": "^2.7.16", From 2d0c68a7cf54cd67272124028fcddacafb404d31 Mon Sep 17 00:00:00 2001 From: Robert Date: Sun, 4 Aug 2024 06:54:53 -0400 Subject: [PATCH 03/10] Sass formatting --- fec/fec/static/scss/_variables.scss | 2 +- .../static/scss/components/_accordions.scss | 7 +- fec/fec/static/scss/components/_agendas.scss | 4 +- fec/fec/static/scss/components/_articles.scss | 1 + .../static/scss/components/_breadcrumbs.scss | 3 +- fec/fec/static/scss/components/_buttons.scss | 19 +- .../scss/components/_calc-admin-fines.scss | 27 +- fec/fec/static/scss/components/_calendar.scss | 18 +- fec/fec/static/scss/components/_callouts.scss | 8 +- fec/fec/static/scss/components/_cards.scss | 15 +- fec/fec/static/scss/components/_charts.scss | 8 +- .../scss/components/_committee-snapshot.scss | 2 +- .../static/scss/components/_contact-form.scss | 2 +- .../scss/components/_contact-items.scss | 8 +- .../scss/components/_data-container.scss | 14 +- .../scss/components/_datatable-panel.scss | 4 +- .../static/scss/components/_datatables.scss | 4 +- .../static/scss/components/_date-grid.scss | 2 +- .../static/scss/components/_documents.scss | 2 +- .../static/scss/components/_downloads.scss | 4 +- .../scss/components/_entity-header.scss | 8 +- fec/fec/static/scss/components/_examples.scss | 4 +- .../static/scss/components/_fec-offices.scss | 1 - .../scss/components/_fec-org-chart.scss | 67 +- fec/fec/static/scss/components/_feedback.scss | 2 +- fec/fec/static/scss/components/_filters.scss | 8 +- fec/fec/static/scss/components/_footer.scss | 2 +- .../static/scss/components/_form-styles.scss | 14 +- fec/fec/static/scss/components/_headings.scss | 4 +- fec/fec/static/scss/components/_hero.scss | 4 +- .../scss/components/_icon-headings.scss | 20 +- .../static/scss/components/_list-styles.scss | 4 +- .../static/scss/components/_mega-menu.scss | 14 +- fec/fec/static/scss/components/_messages.scss | 8 +- fec/fec/static/scss/components/_modals.scss | 4 +- fec/fec/static/scss/components/_nav.scss | 16 +- fec/fec/static/scss/components/_options.scss | 2 +- .../static/scss/components/_overviews.scss | 14 +- .../static/scss/components/_page-headers.scss | 4 +- .../static/scss/components/_pagination.scss | 2 + fec/fec/static/scss/components/_posts.scss | 2 +- .../scss/components/_responsive-object.scss | 22 +- .../static/scss/components/_results-info.scss | 6 +- .../scss/components/_search-controls.scss | 10 +- .../scss/components/_search-results.scss | 4 +- fec/fec/static/scss/components/_side-nav.scss | 4 +- fec/fec/static/scss/components/_sidebar.scss | 10 +- .../static/scss/components/_site-header.scss | 33 +- .../static/scss/components/_table-styles.scss | 24 +- fec/fec/static/scss/components/_tags.scss | 1 + fec/fec/static/scss/components/_toggles.scss | 8 +- fec/fec/static/scss/components/_tooltips.scss | 7 +- .../static/scss/components/_type-styles.scss | 2 +- fec/fec/static/scss/elements/_elements.scss | 7 +- fec/fec/static/scss/elements/_forms.scss | 4 +- fec/fec/static/scss/layout/_grid.scss | 2 +- fec/fec/static/scss/layout/_layout.scss | 18 +- fec/fec/static/scss/layout/_slabs.scss | 10 +- fec/fec/static/scss/mixins/_icon-mixins.scss | 2 +- fec/fec/static/scss/mixins/_type-mixins.scss | 2 +- fec/fec/static/scss/mixins/_utilities.scss | 12 +- .../static/scss/widgets/aggregate-totals.scss | 23 +- .../scss/widgets/contributions-by-state.scss | 27 +- .../scss/widgets/house-senate-overview.scss | 20 +- .../static/scss/widgets/party-money-bars.scss | 17 +- package-lock.json | 860 +----------------- package.json | 4 - 67 files changed, 336 insertions(+), 1161 deletions(-) diff --git a/fec/fec/static/scss/_variables.scss b/fec/fec/static/scss/_variables.scss index 713baf699f..0f94596b85 100644 --- a/fec/fec/static/scss/_variables.scss +++ b/fec/fec/static/scss/_variables.scss @@ -67,7 +67,7 @@ $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; diff --git a/fec/fec/static/scss/components/_accordions.scss b/fec/fec/static/scss/components/_accordions.scss index 1b1eafe6f9..49d8d0765a 100644 --- a/fec/fec/static/scss/components/_accordions.scss +++ b/fec/fec/static/scss/components/_accordions.scss @@ -31,7 +31,7 @@ background-size: u(2rem); background-position: 95% 50%; border-bottom: 1px solid $base; - margin: 0 0 -1px 0; + margin: 0 0 -1px; color: $base; font-size: u(1.4rem); font-weight: bold; @@ -54,7 +54,8 @@ &::before { content:''; @extend .button--envelope; - padding: u(1rem 0rem 1rem 0); + + padding: u(1rem 0 1rem 0); } } @@ -71,7 +72,7 @@ padding: u(2rem); font-family: $sans-serif; - @include clearfix(); + @include clearfix; &.results__content { border-top: 1px solid $base; diff --git a/fec/fec/static/scss/components/_agendas.scss b/fec/fec/static/scss/components/_agendas.scss index f81e1faa22..78a0f4f725 100644 --- a/fec/fec/static/scss/components/_agendas.scss +++ b/fec/fec/static/scss/components/_agendas.scss @@ -106,7 +106,7 @@ left: 0; right: 0; bottom: 0; - width:100%; - height:100%; + width: 100%; + height: 100%; } } diff --git a/fec/fec/static/scss/components/_articles.scss b/fec/fec/static/scss/components/_articles.scss index 4fe6a5442c..595dc15276 100644 --- a/fec/fec/static/scss/components/_articles.scss +++ b/fec/fec/static/scss/components/_articles.scss @@ -80,6 +80,7 @@ .icon--email--author { @extend .icon--inline--right; + margin-left: u(.5rem); max-width: 20px; diff --git a/fec/fec/static/scss/components/_breadcrumbs.scss b/fec/fec/static/scss/components/_breadcrumbs.scss index 97e6c35b82..8bd99da079 100644 --- a/fec/fec/static/scss/components/_breadcrumbs.scss +++ b/fec/fec/static/scss/components/_breadcrumbs.scss @@ -28,7 +28,8 @@ } .breadcrumbs__item { - @include u-truncate(); + @include u-truncate; + float: left; max-width: u(20rem); padding: u(.8rem 0); diff --git a/fec/fec/static/scss/components/_buttons.scss b/fec/fec/static/scss/components/_buttons.scss index 459efa59dc..e2edf7a6c8 100644 --- a/fec/fec/static/scss/components/_buttons.scss +++ b/fec/fec/static/scss/components/_buttons.scss @@ -38,7 +38,7 @@ color: $base; @extend .button; - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { background-color: $gray-medium; border-color: $gray-medium; } @@ -57,7 +57,7 @@ color: $inverse !important; @extend .button; - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { background-color: $navy; border-color: $navy; } @@ -79,7 +79,7 @@ color: $base; @extend .button; - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { border-color: $gray-medium; } @@ -97,7 +97,7 @@ color: $primary; @extend .button; - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { background-color: lighten($primary-contrast, 5%); border-color: lighten($primary-contrast, 5%); } @@ -115,7 +115,7 @@ color: $inverse; @extend .button; - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { border-color: $gray-medium; } @@ -137,7 +137,7 @@ color: $secondary; @extend .button; - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { background-color: lighten($secondary-contrast, 5%); border-color: lighten($secondary-contrast, 5%); } @@ -155,7 +155,7 @@ color: $inverse; @extend .button; - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { border-color: $gray-medium; } @@ -293,7 +293,7 @@ background-size: 10px !important; } - &:hover:not(.is-disabled):not(.is-active) { + &:hover:not(.is-disabled, .is-active) { background-color: $gray; border-color: $gray-dark; color: $base; @@ -565,8 +565,7 @@ .button--open { background-size: u(2rem); background-position: 95% 50%; - border-bottom: 1px solid $base; - margin: -21px 0 -1px 0; + margin: -21px 0 -1px; color: $base; font-size: u(1.4rem); font-weight: bold; diff --git a/fec/fec/static/scss/components/_calc-admin-fines.scss b/fec/fec/static/scss/components/_calc-admin-fines.scss index fd69d7979d..c7b562678f 100644 --- a/fec/fec/static/scss/components/_calc-admin-fines.scss +++ b/fec/fec/static/scss/components/_calc-admin-fines.scss @@ -137,7 +137,7 @@ body.scroll-locked-for-modal { opacity: 1; transition: opacity 1s, color .5s; } - &:after { + &::after { content: " › "; color: purple; display: inline; @@ -164,7 +164,7 @@ body.scroll-locked-for-modal { &.hidden { display: none !important; } - &.hide-after:after { + &.hide-after::after { content: ""; padding: 0 } @@ -284,34 +284,34 @@ body.scroll-locked-for-modal { clear: both; } - [type=radio]+label { + [type="radio"]+label { background-color: transparent; border-color: $inverse; float: left; transition: border-color .5s; } - [type=radio]+label:hover { + [type="radio"]+label:hover { background-color: transparent; border-color: #aeb0b5; transition: border-color .5s; } - [type=radio]:checked+label { + [type="radio"]:checked+label { background-color: transparent; border: 1px solid #aeb0b5; transition: border-color .5s; } - [type=number] { + [type="number"] { display: inline-block; float: left; margin: 0 0 .5rem .25rem; width: 15rem; } - [type=number]+label { + [type="number"]+label { display:inline-block; padding: .4rem .8rem .4rem 1rem; position: relative; } - [type=number].indented { + [type="number"].indented { margin-left: 3.5rem; &.search__example { @@ -322,7 +322,7 @@ body.scroll-locked-for-modal { span.clear { clear: both; display: block; - height: 0px; + height: 0; margin-bottom: 1rem; width: 100%; } @@ -410,7 +410,7 @@ body.scroll-locked-for-modal { margin-bottom: 0; padding-left: 3.5rem; - &:before { + &::before { margin-right: 1rem; } } @@ -430,7 +430,6 @@ body.scroll-locked-for-modal { background: url("data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23112e51%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%200a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2010%200zm1.2%2016.1a15.69%2015.69%200%200%201-2.4.3q-.9%200-.9-.6a9.32%209.32%200%200%201%20.2-1.4l.8-4.7a3.08%203.08%200%200%200%20.1-.9c0-.3-.4-.4-1.2-.4l.1-.5a14.22%2014.22%200%200%201%202.5-.3.61.61%200%200%201%20.7.6%2011.48%2011.48%200%200%201-.2%201.4l-.8%204.8a2.25%202.25%200%200%200-.1.7c0%20.4.2.5%201.2.5v.5zm-.5-10a1.15%201.15%200%200%201-1.2-1.2%201.35%201.35%200%200%201%201.3-1.4A1.22%201.22%200%200%201%2012%204.7a1.42%201.42%200%200%201-1.3%201.4z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 1rem 1rem; - background-color: $inverse; background-size: 3rem; border-bottom: thin solid $federal-blue; @@ -459,7 +458,7 @@ body.scroll-locked-for-modal { transition: right .5s; width: calc(33% + 20px); - &:before { + &::before { content: ""; display: block; border-left: 1px solid $federal-blue; @@ -507,7 +506,7 @@ body.scroll-locked-for-modal { position: absolute; right: 0; top: 0; - &:before { + &::before { display: none; } @@ -537,7 +536,7 @@ body.scroll-locked-for-modal { .pointer { position: absolute; - left: 0px; + left: 0; top: 100px; transition: top .33s; } diff --git a/fec/fec/static/scss/components/_calendar.scss b/fec/fec/static/scss/components/_calendar.scss index caaafc0be2..a32799eba4 100644 --- a/fec/fec/static/scss/components/_calendar.scss +++ b/fec/fec/static/scss/components/_calendar.scss @@ -28,13 +28,13 @@ // Controls .fc-toolbar { padding: u(1rem); - @include clearfix(); + @include clearfix; } .calendar__head { border-bottom: 1px solid $neutral; padding: u(1rem); - @include clearfix(); + @include clearfix; .data-container__action { margin-top: u(1rem); @@ -51,7 +51,7 @@ .fc-view-controls { padding: u(2rem); width: 100%; - @include clearfix(); + @include clearfix; } .fc-left { @@ -434,7 +434,7 @@ .cal-list__event { border-bottom: 1px solid $neutral; padding: u(2rem 0); - @include clearfix(); + @include clearfix; &:last-child { border-bottom: none; @@ -459,7 +459,7 @@ display: block; font-weight: bold; line-height: 1.2; - margin: 0 0 .5rem 0; + margin: 0 0 .5rem; } .cal-list__date { @@ -469,7 +469,7 @@ .cal-list__time { @include span-columns(4 of 8); - @include omega(); + @include omega; } .cal-list__info { @@ -492,7 +492,7 @@ font-size: u(1.4rem); padding: u(.5rem); border-radius: 3px; - @include clearfix(); + @include clearfix; .tooltip__trigger-text { border-right: 1px solid $primary; @@ -531,7 +531,7 @@ .fc-header { background: $neutral; padding: u(3px .5rem); - @include clearfix(); + @include clearfix; .fc-title { font-weight: bold; @@ -626,7 +626,7 @@ .cal-list__event { padding: u(2rem); - @include clearfix(); + @include clearfix; } .cal-list__details { diff --git a/fec/fec/static/scss/components/_callouts.scss b/fec/fec/static/scss/components/_callouts.scss index 18a834f4e1..b7c86cd2c5 100644 --- a/fec/fec/static/scss/components/_callouts.scss +++ b/fec/fec/static/scss/components/_callouts.scss @@ -29,19 +29,19 @@ padding: u(1rem 1.5rem); margin-bottom: u(2rem); border-radius: 4px; - @include clearfix(); + @include clearfix; } .callout--primary { - @include u-bg--primary(); + @include u-bg--primary; } .callout--secondary { - @include u-bg--secondary(); + @include u-bg--secondary; } .callout--neutral { - @include u-bg--neutral(); + @include u-bg--neutral; } .callout__title { diff --git a/fec/fec/static/scss/components/_cards.scss b/fec/fec/static/scss/components/_cards.scss index a4b04b100b..137f917b74 100644 --- a/fec/fec/static/scss/components/_cards.scss +++ b/fec/fec/static/scss/components/_cards.scss @@ -13,7 +13,7 @@ padding: u(2rem); text-align: center; width: 100%; - @include clearfix(); + @include clearfix; } .card--secondary-contrast { @@ -26,8 +26,9 @@ @include u-font-color($base); .card__image__container { - @include clearfix(); - /*background-color: $primary;*/ + @include clearfix; + + /* background-color: $primary; */ } .card__icon { &.i-election { @@ -145,7 +146,7 @@ border-radius: 4px 4px 0 0; padding: u(1rem); text-align: center; - @include clearfix(); + @include clearfix; .card__title { float: left; @@ -313,7 +314,7 @@ } .card--primary { - @include u-bg--primary(); + @include u-bg--primary; @include u-font-color($gray-lightest); & { @@ -486,7 +487,7 @@ border: 2px solid transparent; font-weight: bold; - @include u-bg--secondary(); + @include u-bg--secondary; @include u-font-color($gray-lightest); &:hover { @@ -549,7 +550,7 @@ .card__image__container { display: inline-block; - @include clearfix(); + @include clearfix; } .card__icon { height: 5.8rem; diff --git a/fec/fec/static/scss/components/_charts.scss b/fec/fec/static/scss/components/_charts.scss index 88785d6a8a..ebcf87a6f1 100644 --- a/fec/fec/static/scss/components/_charts.scss +++ b/fec/fec/static/scss/components/_charts.scss @@ -5,7 +5,7 @@ line { fill: none; stroke: $base; - shape-rendering: crispEdges; + shape-rendering: crispedges; } } @@ -168,7 +168,7 @@ border-color: $primary; padding: 2px 0; text-align: center; - @include clearfix(); + @include clearfix; h5 { display: inline-block; @@ -196,8 +196,8 @@ border-color: $primary; padding: 2px 0; text-align: center; - margin: 1rem 0rem 1rem 0rem; - @include clearfix(); + margin: 1rem 0; + @include clearfix; h5 { display: inline-block; diff --git a/fec/fec/static/scss/components/_committee-snapshot.scss b/fec/fec/static/scss/components/_committee-snapshot.scss index 663e059de5..8ab6e8e9be 100644 --- a/fec/fec/static/scss/components/_committee-snapshot.scss +++ b/fec/fec/static/scss/components/_committee-snapshot.scss @@ -158,7 +158,7 @@ } } - &:after { + &::after { content: ""; display: block; position: absolute; diff --git a/fec/fec/static/scss/components/_contact-form.scss b/fec/fec/static/scss/components/_contact-form.scss index dd806e6820..401657c9ec 100644 --- a/fec/fec/static/scss/components/_contact-form.scss +++ b/fec/fec/static/scss/components/_contact-form.scss @@ -55,7 +55,7 @@ input.invalid_border, select.invalid_border, textarea.invalid_border, checkbox.invalid_border, label.invalid_border { - border-color: $error !important; + border-color: $error !important; } diff --git a/fec/fec/static/scss/components/_contact-items.scss b/fec/fec/static/scss/components/_contact-items.scss index 14ab860f16..841fc58dec 100644 --- a/fec/fec/static/scss/components/_contact-items.scss +++ b/fec/fec/static/scss/components/_contact-items.scss @@ -9,7 +9,7 @@ //
//
Toll free
// 1-800-424-9530 -// 8:30 a.m. to 5:30 p.m. Eastern Time +// 8: 30 a.m. to 5: 30 p.m. Eastern Time //
// // @@ -17,7 +17,7 @@ .contact-item { display: table; margin-bottom: u(4rem); - @include clearfix(); + @include clearfix; &:not(.contact-item--half) { &::before { @@ -36,7 +36,7 @@ @include span-columns(6); &:nth-child(even) { - @include omega(); + @include omega; } } } @@ -92,7 +92,7 @@ .contact-item--question-bubble { &::before { - background-size:75% !important; + background-size: 75% !important; @include u-icon-circle($question-bubble, $primary, $inverse, 3.4rem); } } diff --git a/fec/fec/static/scss/components/_data-container.scss b/fec/fec/static/scss/components/_data-container.scss index c46a6456d7..42f77839e8 100644 --- a/fec/fec/static/scss/components/_data-container.scss +++ b/fec/fec/static/scss/components/_data-container.scss @@ -7,7 +7,7 @@ .data-container { position: relative; width: 100%; - @include clearfix(); + @include clearfix; } .is-showing-filters { @@ -17,12 +17,12 @@ .data-container__widgets { border-bottom: 2px solid $primary; font-family: $sans-serif; - @include clearfix(); + @include clearfix; } .data-container__action { float: right; - @include clearfix(); + @include clearfix; } .data-container__share { @@ -45,7 +45,7 @@ .data-container__head { border-bottom: 1px solid $gray; padding: u(1rem); - @include clearfix(); + @include clearfix; } .data-container__title { @@ -62,7 +62,7 @@ .data-container__tags { padding: u(1rem); - @include clearfix(); + @include clearfix; } .data-container__message { @@ -76,7 +76,7 @@ .panel__controls { clear: both; padding-top: u(.5rem); - @include clearfix(); + @include clearfix; } // BREAKPOINT: LARGE @@ -172,7 +172,7 @@ //Responsive behavior for datatables in tab pannels on profile pages (committee, candidate, election) -@media screen and (max-width: 940px) { +@media screen and (width <= 940px) { .data-container__wrapper .main__content--right-full { display: block } diff --git a/fec/fec/static/scss/components/_datatable-panel.scss b/fec/fec/static/scss/components/_datatable-panel.scss index e5c7cfed1d..e8640ead76 100644 --- a/fec/fec/static/scss/components/_datatable-panel.scss +++ b/fec/fec/static/scss/components/_datatable-panel.scss @@ -7,7 +7,7 @@ position: relative; width: 200%; z-index: $z1; - @include clearfix(); + @include clearfix; .data-table { float: left; @@ -121,7 +121,7 @@ border-bottom: 1px solid $gray-lightest; padding: u(0 0 1rem 0); text-align: right; - @include clearfix(); + @include clearfix; } .panel__link { diff --git a/fec/fec/static/scss/components/_datatables.scss b/fec/fec/static/scss/components/_datatables.scss index 44cde2d991..43b6b7235d 100644 --- a/fec/fec/static/scss/components/_datatables.scss +++ b/fec/fec/static/scss/components/_datatables.scss @@ -310,10 +310,10 @@ } } -.is-active-status:before{ +.is-active-status::before{ background-color: $green-light; } -.is-terminated-status:before{ +.is-terminated-status::before{ background-color: $gray; } diff --git a/fec/fec/static/scss/components/_date-grid.scss b/fec/fec/static/scss/components/_date-grid.scss index 178def8f2e..d385f3936e 100644 --- a/fec/fec/static/scss/components/_date-grid.scss +++ b/fec/fec/static/scss/components/_date-grid.scss @@ -26,7 +26,7 @@ font-family: $sans-serif; padding: u(2rem 0); display: none; - @include clearfix(); + @include clearfix; &:not(.is-invalid) { diff --git a/fec/fec/static/scss/components/_documents.scss b/fec/fec/static/scss/components/_documents.scss index 6a1102974f..b0bc35d871 100644 --- a/fec/fec/static/scss/components/_documents.scss +++ b/fec/fec/static/scss/components/_documents.scss @@ -28,7 +28,7 @@ margin-right: 1rem; img { - box-shadow: 0 0 8px rgba(0, 0, 0, .2); + box-shadow: 0 0 8px rgb(0 0 0 / 20%); max-width: 140px; vertical-align: middle; } diff --git a/fec/fec/static/scss/components/_downloads.scss b/fec/fec/static/scss/components/_downloads.scss index 621efa6342..0520a006fa 100644 --- a/fec/fec/static/scss/components/_downloads.scss +++ b/fec/fec/static/scss/components/_downloads.scss @@ -43,7 +43,7 @@ font-size: u(1.2rem); margin-bottom: u(1rem); padding-left: u(3rem); - @include clearfix(); + @include clearfix; &.is-pending { background-image: url('../img/loading-ellipsis.gif'); @@ -63,7 +63,7 @@ display: block; font-weight: bold; padding: u(.5rem 0); - @include u-truncate(); + @include u-truncate; } .download__button { diff --git a/fec/fec/static/scss/components/_entity-header.scss b/fec/fec/static/scss/components/_entity-header.scss index feb4c9181b..f0345ead3b 100644 --- a/fec/fec/static/scss/components/_entity-header.scss +++ b/fec/fec/static/scss/components/_entity-header.scss @@ -73,7 +73,7 @@ letter-spacing: -.3px; padding: u(1rem 0); width: 100%; - @include clearfix(); + @include clearfix; @include media($med) { display: table; @@ -83,7 +83,7 @@ .entity__term { width: 100%; margin-bottom: u(1rem); - @include clearfix(); + @include clearfix; &:last-child { margin-bottom: 0; @@ -142,7 +142,7 @@ // Color rules .entity__header--neutral { - @include u-bg--neutral(); + @include u-bg--neutral; .entity__info, .entity__type { @@ -156,7 +156,7 @@ .entity__header--primary { border-top: 1px solid $primary-contrast; - @include u-bg--primary(); + @include u-bg--primary; .entity__info, .entity__type { diff --git a/fec/fec/static/scss/components/_examples.scss b/fec/fec/static/scss/components/_examples.scss index 77709b35a1..317182de83 100644 --- a/fec/fec/static/scss/components/_examples.scss +++ b/fec/fec/static/scss/components/_examples.scss @@ -32,7 +32,7 @@ margin-bottom: u(.5rem); img { - box-shadow: 0 0 8px rgba(0, 0, 0, .2); + box-shadow: 0 0 8px rgb(0 0 0 / 20%); } } @@ -80,7 +80,7 @@ .example__caption { - width:100%; + width: 100%; font-family: $serif; font-style: italic; display: inline-block; diff --git a/fec/fec/static/scss/components/_fec-offices.scss b/fec/fec/static/scss/components/_fec-offices.scss index 30507e6c6d..947e12464d 100644 --- a/fec/fec/static/scss/components/_fec-offices.scss +++ b/fec/fec/static/scss/components/_fec-offices.scss @@ -25,7 +25,6 @@ //Large Breakpoint @include media($lg){ - display: flex; .grid__item.employee-photo { diff --git a/fec/fec/static/scss/components/_fec-org-chart.scss b/fec/fec/static/scss/components/_fec-org-chart.scss index f82fe7202b..3ab49515b3 100644 --- a/fec/fec/static/scss/components/_fec-org-chart.scss +++ b/fec/fec/static/scss/components/_fec-org-chart.scss @@ -6,7 +6,6 @@ $orgChart_colorStandard: #b2b1b6; $orgChart_colorGreyHover: #d6d7d9; - $orgChart_gutterSize: 10px; $orgChart_lineDashed: thin dashed $orgChart_colorStandard; $orgChart_lineSolid: 2px solid $orgChart_colorStandard; // line for the wider layout @@ -16,7 +15,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; display: block; float: left; list-style-type: none; - margin: 0 0 u(2.4rem) 0; + margin: 0 0 u(2.4rem); padding: 0; position: relative; @@ -32,7 +31,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; & + li { // all li after another li padding-top: $orgChart_gutterSize; } - &:before { + &::before { // top half of left-side line, including the horizontal line in the middle border-left: $orgChart_lineSolidDark; border-bottom: $orgChart_lineSolidDark; @@ -44,7 +43,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; width: 10px; } - &:after { + &::after { // bottom half of left-side line border-left: $orgChart_lineSolidDark; content: ""; @@ -55,7 +54,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; width: 10px; } &:last-child { - &:after { + &::after { display: none; } } @@ -106,7 +105,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; padding-left: $orgChart_gutterSize; padding-bottom: $orgChart_gutterSize * 2; - &:before { + &::before { content: ""; border-bottom: none; border-left: $orgChart_lineSolidDark; @@ -120,16 +119,16 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; } &:last-child { - &:before { + &::before { display: none; } - &:after { + &::after { display: none; } } } // for links that are direct descendants of the li.team, these are the team leads - &.team > a:before { + &.team > a::before { content: ""; position: absolute; left: calc(-#{$orgChart_gutterSize} - 1px); @@ -148,7 +147,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; position: relative; width: 100%; - &:before { + &::before { border-left: $orgChart_lineSolidDark; content: ""; display: block; @@ -160,10 +159,10 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; border-bottom: $orgChart_lineSolidDark; } &:last-child { - &:before { + &::before { display: none; } - &:after { + &::after { display: none; } } @@ -172,7 +171,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; &.team-comms { padding: 0 $orgChart_gutterSize #{$orgChart_gutterSize * 2}; - &:before { + &::before { content: ""; border-bottom: none; border-left: $orgChart_lineSolidDark; @@ -184,7 +183,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; top: calc(50% - #{$orgChart_gutterSize}); width: 10px; } - &:after { + &::after { border-bottom: none; border-left: none; border-right: $orgChart_lineDashed; @@ -198,10 +197,10 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; top: calc(50% - #{$orgChart_gutterSize}); width: $orgChart_gutterSize; } - & a:before { + & a::before { display: none; } - & a:after { + & a::after { display: none; } } @@ -209,7 +208,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; float: right; padding: $orgChart_gutterSize $orgChart_gutterSize #{$orgChart_gutterSize * 2} #{$orgChart_gutterSize * 2}; - &:before { + &::before { border-bottom: none; border-top: none; bottom: auto; @@ -217,7 +216,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; top: 0; } - & > a:before { + & > a::before { border-bottom: $orgChart_lineDashed; border-left: none; border-right: $orgChart_lineDashed; @@ -231,7 +230,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; top: auto; width: $orgChart_gutterSize; } - & > a:after { + & > a::after { display: none; } @@ -241,7 +240,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; li { padding: $orgChart_gutterSize $orgChart_gutterSize 0 0; - &:before { + &::before { border-left: none; border-right: $orgChart_lineDashed; border-bottom: $orgChart_lineDashed; @@ -287,12 +286,12 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; border: $orgChart_lineSolid; } - &:before { + &::before { border-bottom: $orgChart_lineSolid; border-left: $orgChart_lineSolid; left: -#{$orgChart_gutterSize - 1}; } - &:after { + &::after { border-left: $orgChart_lineSolid; left: -#{$orgChart_gutterSize - 1}; } @@ -301,7 +300,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; width: 100%; & > a { - &:before { + &::before { border-bottom: none; border-left: $orgChart_lineSolid; border-top: $orgChart_lineSolid; @@ -313,7 +312,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; // } } - &:before { + &::before { content: ""; border-bottom: none; border-right: $orgChart_lineSolid; @@ -325,7 +324,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; top: -#{$orgChart_gutterSize}; width: 50%; } - &:after { + &::after { border-left: none; border-top: $orgChart_lineSolid; content: ""; @@ -341,7 +340,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; max-width: 40%; padding-bottom: $orgChart_gutterSize * 2; - &:before { + &::before { // From comms to the teams content: ""; border-bottom: none; @@ -355,7 +354,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; top: calc(100% - #{$orgChart_gutterSize * 2}); width: 50%; } - &:after { + &::after { // From comms to IG border-bottom: none; border-left: none; @@ -378,12 +377,12 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; grid-area: ig; padding-top: $orgChart_gutterSize * 5; - &:before { + &::before { border-right: $orgChart_lineDashed; border-top: $orgChart_lineDashed; top: $orgChart_gutterSize * 4; } - &:after { + &::after { display: none; } ul { @@ -392,7 +391,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; li { padding-right: 0; - &:before { + &::before { border-bottom: none; border-right: $orgChart_lineSolid; border-top: none; @@ -403,7 +402,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; } } } - a:before { + a::before { display: none; } } @@ -411,16 +410,16 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; } li.team.team-ig + li.team { // The first .team after a .team-ig - &:before { + &::before { display: none; } - &:after { + &::after { border-left: $orgChart_lineSolid; } } li.team:last-child { // The last .team - &:before { + &::before { display: block; } } diff --git a/fec/fec/static/scss/components/_feedback.scss b/fec/fec/static/scss/components/_feedback.scss index 7c84636d3f..a142234b68 100644 --- a/fec/fec/static/scss/components/_feedback.scss +++ b/fec/fec/static/scss/components/_feedback.scss @@ -130,7 +130,7 @@ /* Hides the recaptcha containing div so we can move the badge to bottom */ .feedback textarea:last-of-type + div { display: block; - height: 0px; + height: 0; width: 1px; zoom: 1; } diff --git a/fec/fec/static/scss/components/_filters.scss b/fec/fec/static/scss/components/_filters.scss index bb320d8b18..d7b9bbc2b0 100644 --- a/fec/fec/static/scss/components/_filters.scss +++ b/fec/fec/static/scss/components/_filters.scss @@ -27,7 +27,7 @@ $filter-button-width: u(4.6rem); .filters { background: $neutral; display: block; - @include clearfix(); + @include clearfix; &.is-open { .filters__content { @@ -128,9 +128,9 @@ $filter-button-width: u(4.6rem); overflow: visible; left: -800px; @include transition(left .2s ease-in-out); - @include u-bg--neutral(); + @include u-bg--neutral; - &[aria-hidden=true] { + &[aria-hidden="true"] { display: block !important; } } @@ -149,7 +149,7 @@ $filter-button-width: u(4.6rem); padding: u(1rem); text-align: left; width: 100%; - @include clearfix(); + @include clearfix; @include heading(h2); } diff --git a/fec/fec/static/scss/components/_footer.scss b/fec/fec/static/scss/components/_footer.scss index acf3dbaab5..04d118ca55 100644 --- a/fec/fec/static/scss/components/_footer.scss +++ b/fec/fec/static/scss/components/_footer.scss @@ -62,7 +62,7 @@ padding: u(5rem 0); position: relative; - @include u-bg--primary(); + @include u-bg--primary; @include u-font-color($neutral); .address__title { diff --git a/fec/fec/static/scss/components/_form-styles.scss b/fec/fec/static/scss/components/_form-styles.scss index c8a51c9465..2b3c82e11c 100644 --- a/fec/fec/static/scss/components/_form-styles.scss +++ b/fec/fec/static/scss/components/_form-styles.scss @@ -33,12 +33,12 @@ border: 2px solid $gray; color: $base; - &:hover:not(.is-disabled):not([disabled]) { + &:hover:not(.is-disabled, [disabled]) { border-color: $gray-medium; background-color: transparent; } - &:active:not(.is-disabled):not([disabled]), + &:active:not(.is-disabled, [disabled]), &.is-active { background-color: $gray-medium; border-color: $gray-dark; @@ -51,12 +51,12 @@ color: $inverse; @include u-icon-bg($arrow-down, $inverse); - &:hover:not(.is-disabled):not([disabled]) { + &:hover:not(.is-disabled, [disabled]) { border-color: $gray-medium; background-color: transparent; } - &:active:not(.is-disabled):not([disabled]), + &:active:not(.is-disabled, [disabled]), &:focus, &.is-active { background-color: rgba($inverse, .3); @@ -76,12 +76,12 @@ color: $inverse; @include u-icon-bg($arrow-down, $inverse); - &:hover:not(.is-disabled):not([disabled]) { + &:hover:not(.is-disabled, [disabled]) { border-color: $gray-medium; background-color: transparent; } - &:active:not(.is-disabled):not([disabled]), + &:active:not(.is-disabled, [disabled]), &:focus, &.is-active { background-color: rgba($inverse, .3); @@ -155,7 +155,7 @@ // .combo { - @include clearfix(); + @include clearfix; .combo__input { height: u(3.6rem); diff --git a/fec/fec/static/scss/components/_headings.scss b/fec/fec/static/scss/components/_headings.scss index 7bf352e8dc..7b029431ef 100644 --- a/fec/fec/static/scss/components/_headings.scss +++ b/fec/fec/static/scss/components/_headings.scss @@ -18,7 +18,7 @@ %heading { border-bottom: 2px solid $base; padding-bottom: u(1rem); - @include clearfix(); + @include clearfix; h1, h2, @@ -32,6 +32,7 @@ // h1 breaks onto multiple lines if it's long on large screens .heading--main { @extend %heading; + margin-bottom: u(3rem); @include media($lg) { @@ -44,6 +45,7 @@ // Has smaller margin .heading--section { @extend %heading; + margin-bottom: u(1rem); } diff --git a/fec/fec/static/scss/components/_hero.scss b/fec/fec/static/scss/components/_hero.scss index 028130b3ed..1f157886d8 100644 --- a/fec/fec/static/scss/components/_hero.scss +++ b/fec/fec/static/scss/components/_hero.scss @@ -14,12 +14,12 @@ } .hero--primary { - @include u-bg--primary(); + @include u-bg--primary; @include u-font-color($gray-lightest); } .hero--secondary { - @include u-bg--secondary(); + @include u-bg--secondary; @include u-font-color($gray-lightest); .hero__action { diff --git a/fec/fec/static/scss/components/_icon-headings.scss b/fec/fec/static/scss/components/_icon-headings.scss index 0671354521..4810fe76cf 100644 --- a/fec/fec/static/scss/components/_icon-headings.scss +++ b/fec/fec/static/scss/components/_icon-headings.scss @@ -12,8 +12,8 @@ // .icon-heading { - margin-top:0; - @include clearfix(); + margin-top: 0; + @include clearfix; @include media($med) { margin-top: u(1rem); @@ -72,6 +72,7 @@ .icon-heading--raising-circle { &::before { $size: u(4rem); + content: ''; float: left; margin-right: u(1rem); @@ -82,6 +83,7 @@ .icon-heading--spending-circle { &::before { $size: u(4rem); + content: ''; float: left; margin-right: u(1rem); @@ -92,6 +94,7 @@ .icon-heading--calendar-circle-primary { &::before { $size: u(4rem); + content: ''; float: left; margin-right: u(1rem); @@ -102,6 +105,7 @@ .icon-heading--data-flag-circle--primary { &::before { $size: u(4rem); + background-size: 50%; content: ''; float: left; @@ -112,6 +116,7 @@ .icon-heading--data-flag-circle--secondary { &::before { $size: u(4rem); + background-size: 50%; content: ''; float: left; @@ -123,6 +128,7 @@ .icon-heading--checklist-circle { &::before { $size: u(4rem); + background-size: 70%; content: ''; float: left; @@ -134,6 +140,7 @@ .icon-heading--question-bubble-circle { &::before { $size: u(4rem); + background-size: 70%; content: ''; float: left; @@ -173,6 +180,7 @@ .icon-heading--election-circle { &::before { $size: u(4rem); + background-size: 70%; content: ''; float: left; @@ -233,6 +241,7 @@ .icon-heading--person-location-circle { &::before { $size: u(4rem); + background-size: 50%; content: ''; float: left; @@ -244,6 +253,7 @@ .icon-heading--individual-contributions-circle { &::before { $size: u(4rem); + background-size: 50%; content: ''; float: left; @@ -255,6 +265,7 @@ .icon-heading--magnifying-glass-circle { &::before { $size: u(4rem); + background-size: 50%; content: ''; float: left; @@ -267,6 +278,7 @@ .icon-heading--graph-circle { &::before { $size: u(4rem); + background-size: u(1.8rem); @include u-icon-circle($graph-horizontal-ordered, $primary, $inverse, $size); } @@ -275,6 +287,7 @@ .icon-heading--graph-unordered-circle { &::before { $size: u(4rem); + background-size: u(1.8rem); @include u-icon-circle($graph-horizontal-unordered, $primary, $inverse, $size); } @@ -290,6 +303,7 @@ .icon-heading--election-circle { &::before { $size: u(4rem); + background-size: 50%; content: ''; float: left; @@ -308,6 +322,7 @@ .icon-heading--example-document { &::before { $size: u(4rem); + background-size: 100%; content: ''; float: left; @@ -326,6 +341,7 @@ .icon-heading--financial-document { &::before { $size: u(4rem); + background-size: 50%; content: ''; float: left; diff --git a/fec/fec/static/scss/components/_list-styles.scss b/fec/fec/static/scss/components/_list-styles.scss index 1f3f35cae5..f854dcfc23 100644 --- a/fec/fec/static/scss/components/_list-styles.scss +++ b/fec/fec/static/scss/components/_list-styles.scss @@ -105,7 +105,7 @@ .list--flat { padding: 0; - @include clearfix(); + @include clearfix; li { float: left; @@ -250,7 +250,7 @@ .list--buttons { padding: 0; - @include clearfix(); + @include clearfix; li { display: inline-block; diff --git a/fec/fec/static/scss/components/_mega-menu.scss b/fec/fec/static/scss/components/_mega-menu.scss index da244eea84..f1adf207d1 100644 --- a/fec/fec/static/scss/components/_mega-menu.scss +++ b/fec/fec/static/scss/components/_mega-menu.scss @@ -54,7 +54,7 @@ } .mega__intro { - padding: u(0rem 1rem 0 1rem); + padding: u(0 1rem 0 1rem); } .mega__page-link { @@ -97,7 +97,7 @@ position: relative; width: 100%; - a:after { + a::after { // Adding the double right-angle quote (») here since it's only decorative and not actually a closing quote // (for accessibility and SEO) content: "\00A0 »"; // \00A0 is a non-breaking space to prevent wraps @@ -137,7 +137,7 @@ visibility: hidden; @include u-font-color($inverse); - @include clearfix(); + @include clearfix; &.is-open { top: u(4rem); @@ -146,7 +146,7 @@ z-index: $z-navigation; .mega { - box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .3); + box-shadow: 0 6px 8px 2px rgb(0 0 0 / 30%); transform: translateY(0); @include transition(all .4s ease-out); @include transform(translateY(0)); @@ -163,7 +163,7 @@ font-size: u(1.4rem); color: $inverse; padding: u(1rem 4rem 2rem 4rem); - @include clearfix(); + @include clearfix; @include transition(all .4s ease-out); @include transform(translateY(-100%)); @@ -226,7 +226,7 @@ -@media screen and (max-width: 40em){ +@media screen and (width <= 40em){ .mega-heading__title{ margin-left: u(1rem); margin-top: u(1rem); @@ -234,7 +234,7 @@ &::before { margin-top: u(-.5rem); - margin-bottom: u(0rem); + margin-bottom: u(0); } } } diff --git a/fec/fec/static/scss/components/_messages.scss b/fec/fec/static/scss/components/_messages.scss index 0927a6af80..86153f5dc5 100644 --- a/fec/fec/static/scss/components/_messages.scss +++ b/fec/fec/static/scss/components/_messages.scss @@ -4,15 +4,15 @@ // .message { - background-size: u(2rem); - background-position: u(2rem 2rem); - background-color: $neutral; + background-size:u(2rem); + background-position:u(2rem 2rem); + background-color:$neutral; border-color: $gray; border-style: solid; border-width: 0 0 0 3px; margin: u(2rem 0); padding: u(5rem 2rem 2rem 2rem); - @include clearfix(); + @include clearfix; p:last-child { margin-bottom: 0; diff --git a/fec/fec/static/scss/components/_modals.scss b/fec/fec/static/scss/components/_modals.scss index 473f46e726..2458c871e5 100644 --- a/fec/fec/static/scss/components/_modals.scss +++ b/fec/fec/static/scss/components/_modals.scss @@ -34,7 +34,7 @@ @include media($lg) { margin-left: u(-40rem); width: u(80rem); - max-height:650px; + max-height: 650px; } } @@ -56,6 +56,6 @@ .keyword-modal { .simple-table{ - border-width: 0 0; + border-width: 0; } } diff --git a/fec/fec/static/scss/components/_nav.scss b/fec/fec/static/scss/components/_nav.scss index 94ccaff35c..fe32b696c6 100644 --- a/fec/fec/static/scss/components/_nav.scss +++ b/fec/fec/static/scss/components/_nav.scss @@ -5,7 +5,7 @@ // The outer nav element .site-nav { - @include clearfix(); + @include clearfix; &.is-open { .site-nav__container { @@ -21,6 +21,7 @@ // div that contains the ul and all panels .site-nav__container { $top: u(6.3rem); + height: calc(100vh - #{$top}); position: absolute; left: 0; @@ -40,6 +41,7 @@ // If we have the dev banner, we'll need to adjust #site-menu .banner-dev + .usa-banner + .site-header .site-nav .site-nav__container { $devBannerTop: 4rem; + height: calc(100vh - 12rem); top: 4rem; @@ -106,7 +108,7 @@ // li element .site-nav__item { border-bottom: 1px solid $inverse; - @include clearfix(); + @include clearfix; &:last-child .site-nav__link { border-bottom: 0; @@ -156,6 +158,7 @@ @include media($med) { .site-nav__container { $top: u(11.6rem); + height: calc(100vh - #{$top}); top: $top; } @@ -181,7 +184,7 @@ position: relative; top: 0; width: 100%; - @include clearfix(); + @include clearfix; @include transform(translateX(0)); } @@ -270,9 +273,10 @@ } .utility-nav__search { - /*width: u(30rem);*/ + /* width: u(30rem); */ padding: 0 u(1rem); -/* display: block;*/ + +/* display: block; */ } /* @@ -280,7 +284,7 @@ .mobile-search.utility-nav__search { display: none; } -}*/ +} */ // Grid overhaul, using _grid.scss breakpoints but Bootstrap naming as inspiration, diff --git a/fec/fec/static/scss/components/_options.scss b/fec/fec/static/scss/components/_options.scss index ab552be4bd..03cb7460ce 100644 --- a/fec/fec/static/scss/components/_options.scss +++ b/fec/fec/static/scss/components/_options.scss @@ -6,7 +6,7 @@ .option { border-top: 2px solid $primary; padding: u(2rem 0); - @include clearfix(); + @include clearfix; &.option--border-bottom { border-bottom: 1px solid $primary; diff --git a/fec/fec/static/scss/components/_overviews.scss b/fec/fec/static/scss/components/_overviews.scss index 2999f180de..b5e9628912 100644 --- a/fec/fec/static/scss/components/_overviews.scss +++ b/fec/fec/static/scss/components/_overviews.scss @@ -5,7 +5,7 @@ .overview { padding-bottom: u(2rem); - @include clearfix(); + @include clearfix; } .overview__chart { @@ -29,7 +29,7 @@ .breakdown-link { display: inline-block; - margin: 0 0 2rem 0; + margin: 0 0 2rem; @include heading(h4); } @@ -80,12 +80,12 @@ @include media($med) { .overview__chart { @include span-columns(8); - @include omega(); + @include omega; } .overview__chart-line { @include span-columns(12); - @include omega(); + @include omega; } .overview__feedback { @@ -117,7 +117,7 @@ .overview__chart-line { @include span-columns(12); - @include omega(); + @include omega; } .top-list { @@ -143,7 +143,7 @@ // Rules specifically for the top-raisers chart on the data landing page #top-raisers .chart-table .simple-table__row { - &:after { + &::after { content: ''; display: block; height: 1rem; @@ -154,7 +154,7 @@ text-align: left; } @include media($med) { - &:after { + &::after { display: none; } .simple-table__cell { diff --git a/fec/fec/static/scss/components/_page-headers.scss b/fec/fec/static/scss/components/_page-headers.scss index 30d6966c21..5b582d42b0 100644 --- a/fec/fec/static/scss/components/_page-headers.scss +++ b/fec/fec/static/scss/components/_page-headers.scss @@ -43,7 +43,7 @@ .page-header { display: block; padding: u(1rem 2rem); - @include clearfix(); + @include clearfix; a, a:hover { @@ -78,6 +78,6 @@ background: $inverse; border-bottom: 1px solid $gray; color: $gray-dark; - @include clearfix(); + @include clearfix; } } diff --git a/fec/fec/static/scss/components/_pagination.scss b/fec/fec/static/scss/components/_pagination.scss index 9ed362a47d..253af1fb6b 100644 --- a/fec/fec/static/scss/components/_pagination.scss +++ b/fec/fec/static/scss/components/_pagination.scss @@ -25,6 +25,7 @@ .paginate_button { @extend .button--standard; @extend .button--sm; + display: inline-block; height: auto; margin-left: u(.5rem); @@ -42,6 +43,7 @@ &.next { @extend .button--next; + text-indent: -99999px; } diff --git a/fec/fec/static/scss/components/_posts.scss b/fec/fec/static/scss/components/_posts.scss index d4821b56c1..b1c73b9555 100644 --- a/fec/fec/static/scss/components/_posts.scss +++ b/fec/fec/static/scss/components/_posts.scss @@ -91,7 +91,7 @@ color: $gray-dark; font-family: $sans-serif; padding-bottom: 5px; - @include clearfix(); + @include clearfix; } .post__doc { diff --git a/fec/fec/static/scss/components/_responsive-object.scss b/fec/fec/static/scss/components/_responsive-object.scss index 2ea26a38d0..04e1b8fd81 100644 --- a/fec/fec/static/scss/components/_responsive-object.scss +++ b/fec/fec/static/scss/components/_responsive-object.scss @@ -1,16 +1,16 @@ //Responsive video embeds for RTE with intrinsic sizing technnique .responsive-object { - position: relative; - width: 100% !important; - height: auto !important; + position: relative; + width: 100% !important; + height: auto !important; iframe, object, embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } } @@ -25,7 +25,7 @@ .video-frame { width: 85%; - background: url(/static/img/TV-Gray-Wall-Only-850.png) no-repeat; + background: url("/static/img/TV-Gray-Wall-Only-850.png") no-repeat; background-size: cover; margin-bottom: u(2rem); @@ -61,7 +61,7 @@ height: 100%; max-width: 1034px; max-height: 639px; - margin: 0 auto 40px auto; + margin: 0 auto 40px; div { position: relative; @@ -72,7 +72,7 @@ iframe { box-sizing: border-box; - background: url(/static/img/new-tv-bkgd-wide.png) center center no-repeat; + background: url("/static/img/new-tv-bkgd-wide.png") center center no-repeat; background-size: contain; padding: 10.05% 16.5% 21.2% 16%; position: absolute; diff --git a/fec/fec/static/scss/components/_results-info.scss b/fec/fec/static/scss/components/_results-info.scss index 7c8f5db72d..0ce161c857 100644 --- a/fec/fec/static/scss/components/_results-info.scss +++ b/fec/fec/static/scss/components/_results-info.scss @@ -7,7 +7,7 @@ border-top: 2px solid $primary; border-bottom: 2px solid $primary; padding: u(1rem); - @include clearfix(); + @include clearfix; .button--export { float: right; @@ -16,11 +16,11 @@ .results-info__left { margin-bottom: u(1rem); - @include clearfix(); + @include clearfix; } .results-info__right { - @include clearfix(); + @include clearfix; } .results-info__title { diff --git a/fec/fec/static/scss/components/_search-controls.scss b/fec/fec/static/scss/components/_search-controls.scss index a38d8682e7..e18f7d8747 100644 --- a/fec/fec/static/scss/components/_search-controls.scss +++ b/fec/fec/static/scss/components/_search-controls.scss @@ -10,7 +10,7 @@ .search-controls__row { border-bottom: 1px solid $gray; padding: u(1rem 0); - @include clearfix(); + @include clearfix; &:first-of-type { padding-top: 0; @@ -222,7 +222,7 @@ @include span-columns(7.3); .search-controls__submit { - margin-top: u(0rem); + margin-top: u(0); @include span-columns(7.3 of 7.3); button { @@ -332,7 +332,7 @@ } } -}/*end MED breakpoint*/ +}/* end MED breakpoint */ // All form elements go in rows @include media($lg) { @@ -355,7 +355,7 @@ .search-controls__zip { margin-left: u(3rem); position: relative; - top: u(0rem); + top: u(0); @include span-columns(4.5 of 5.5); } @@ -376,7 +376,7 @@ margin-left: u(1rem); } .search-controls__submit { - margin-top: u(0rem); + margin-top: u(0); @include span-columns(1.5 of 5.5); } } diff --git a/fec/fec/static/scss/components/_search-results.scss b/fec/fec/static/scss/components/_search-results.scss index ee72d6dfdc..1e5c52ce21 100644 --- a/fec/fec/static/scss/components/_search-results.scss +++ b/fec/fec/static/scss/components/_search-results.scss @@ -17,7 +17,7 @@ // To show/hide special PA district message on /data/elections (in election-search.js) .pa-message { display:none; - padding: 0 0 2rem 0; + padding: 0 0 2rem; } // Search results: Name search result @@ -71,7 +71,7 @@ } .result__header { - @include clearfix(); + @include clearfix; } .result__left { diff --git a/fec/fec/static/scss/components/_side-nav.scss b/fec/fec/static/scss/components/_side-nav.scss index 866ba392ce..d5480c2cce 100644 --- a/fec/fec/static/scss/components/_side-nav.scss +++ b/fec/fec/static/scss/components/_side-nav.scss @@ -89,7 +89,7 @@ background-color: $gray-lightest; } - &[aria-selected=true] { + &[aria-selected="true"] { font-weight: bold; background-color: initial; border-left: 4px solid $base; @@ -97,7 +97,7 @@ } } - .side-nav__link[aria-selected=true] + ul { + .side-nav__link[aria-selected="true"] + ul { margin: u(1rem 0 2rem 0); display: block; diff --git a/fec/fec/static/scss/components/_sidebar.scss b/fec/fec/static/scss/components/_sidebar.scss index bf9cd489aa..fd077756f0 100644 --- a/fec/fec/static/scss/components/_sidebar.scss +++ b/fec/fec/static/scss/components/_sidebar.scss @@ -24,7 +24,7 @@ .sidebar-container { position: relative; min-height: 1px; - @include clearfix(); + @include clearfix; @include media($med) { @include span-columns(3); @@ -71,7 +71,7 @@ .sidebar__content { background-color: $neutral; padding: u(2rem); - @include clearfix(); + @include clearfix; p { font-size: u(1.4rem); @@ -87,7 +87,7 @@ .sidebar--primary { .sidebar__title { - @include u-bg--primary(); + @include u-bg--primary; } .sidebar__section { @@ -97,7 +97,7 @@ .sidebar--secondary { .sidebar__title { - @include u-bg--secondary(); + @include u-bg--secondary; } .sidebar__section { @@ -112,7 +112,7 @@ .sidebar--neutral { border-top: 4px solid $primary; - @include u-bg--neutral(); + @include u-bg--neutral; @include u-font-color($base); } diff --git a/fec/fec/static/scss/components/_site-header.scss b/fec/fec/static/scss/components/_site-header.scss index a5503701b0..c7bdf69afb 100644 --- a/fec/fec/static/scss/components/_site-header.scss +++ b/fec/fec/static/scss/components/_site-header.scss @@ -62,7 +62,7 @@ line-height: 1; padding: 5px u(2rem); text-align: center; - @include clearfix(); + @include clearfix; } .disclaimer__right { @@ -96,14 +96,14 @@ width: 100%; } -@media screen and (min-width: 600px) { +@media screen and (width >= 600px) { .usa-banner-content { padding-bottom: u(2.3rem); padding-top: u(4rem); } } -@media screen and (min-width: 951px) { +@media screen and (width >= 951px) { .usa-banner-content { padding-right: u(3rem); padding-left: u(3rem); @@ -114,7 +114,7 @@ margin-top: u(1rem); } -@media screen and (min-width: 600px) { +@media screen and (width >= 600px) { .usa-banner-content p:first-child { margin-top: 0; } @@ -134,7 +134,7 @@ border:none !important; padding: u(.75rem 1rem); - &[aria-expanded=true] { + &[aria-expanded="true"] { background-image: none; } } @@ -157,7 +157,7 @@ } } -@media screen and (min-width: 481px) { +@media screen and (width >= 481px) { .usa-banner-header { padding-top: 0; padding-bottom: 0; @@ -178,11 +178,10 @@ } } -.usa-banner-header[aria-expanded=false] { +.usa-banner-header[aria-expanded="false"] { .usa-banner-button::after { - background-image: url(../img/angle-arrow-down-primary.png); - background-image: url(../img/angle-arrow-down-primary.svg); + background-image: url("../img/angle-arrow-down-primary.svg"); background-size: 100%; content: ''; display: inline-block; @@ -195,11 +194,10 @@ } - .usa-banner-header[aria-expanded=true] { + .usa-banner-header[aria-expanded="true"] { .usa-banner-button::after { - background-image: url(../img/angle-arrow-up-primary.png); - background-image: url(../img/angle-arrow-up-primary.svg); + background-image: url("../img/angle-arrow-up-primary.svg"); background-size: 100%; content: ''; display: inline-block; @@ -211,7 +209,7 @@ } } -@media screen and (min-width: 481px) { +@media screen and (width >= 481px) { .usa-banner-header p { margin-top: 0; margin-bottom: 0; @@ -253,7 +251,7 @@ background-color: transparent; } -@media screen and (min-width: 515px) { +@media screen and (width >= 515px) { .usa-banner-button { padding-top: 0; padding-left: 0; @@ -297,14 +295,13 @@ left: u(-999em); } -.usa-accordion-content[aria-hidden=true] { +.usa-accordion-content[aria-hidden="true"] { display: none; } .usa-grid, .usa-grid-full { - max-width: 1200px; margin-left: auto; margin-right: auto; max-width: 1040px; @@ -322,7 +319,7 @@ padding-left: u(1.5rem); } -@media screen and (min-width: 600px) { +@media screen and (width >= 600px) { .usa-grid { padding-right: u(3rem); padding-left: u(3rem); @@ -363,7 +360,7 @@ .masthead { display: none; padding-top: u(2.5rem); - @include clearfix(); + @include clearfix; } .site-header { diff --git a/fec/fec/static/scss/components/_table-styles.scss b/fec/fec/static/scss/components/_table-styles.scss index 0597d5aa9e..ef7d9193e8 100644 --- a/fec/fec/static/scss/components/_table-styles.scss +++ b/fec/fec/static/scss/components/_table-styles.scss @@ -314,10 +314,9 @@ h3 + .simple-table { display: none !important; } - /* as a necessity, we depart from mobile-first(min-width only MQs) here for these tables only*/ - @media only screen and (max-width: 650px), - (min-device-width: 650px) and (max-device-width: 1024px) { - + /* as a necessity, we depart from mobile-first(min-width only MQs) here for these tables only */ + @media only screen and (width <= 650px), + (device-width >= 650px) and (device-width <= 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; @@ -341,6 +340,7 @@ h3 + .simple-table { &.footnote_row { display: none !important; } + /* Hide table headers (but not display: none;, for accessibility) */ &:first-child{ position: absolute; @@ -450,7 +450,7 @@ h3 + .simple-table { .simple-table__row { border-bottom: 0; - &:after { + &::after { content: ''; display: block; height: 1rem; @@ -516,7 +516,7 @@ h3 + .simple-table { .simple-table__row { - &:after { + &::after { display: none; } .simple-table__cell { @@ -605,6 +605,7 @@ h3 + .simple-table { table { @extend .simple-table-cms; + width: auto; table-layout: auto; line-height: 1; @@ -733,12 +734,11 @@ h3 + .simple-table { } table[data-summary] { - - border-width: 0 0; - margin: u(1rem) 0; + border-width: 0; + margin: u(1rem) 0; .tableTitle { - margin-bottom: 0; + margin-bottom: 0; } td.brdr { @@ -747,12 +747,12 @@ table[data-summary] { } thead td { - border-width: 0 0; + border-width: 0; border-color: transparent !important; line-height: 1.3 } - td.brdr:after { + td.brdr::after { content: '|'; position: absolute; right: -2px; diff --git a/fec/fec/static/scss/components/_tags.scss b/fec/fec/static/scss/components/_tags.scss index ddda803ca4..e74b05ca68 100644 --- a/fec/fec/static/scss/components/_tags.scss +++ b/fec/fec/static/scss/components/_tags.scss @@ -80,6 +80,7 @@ word-wrap: break-word; @extend .tag; + position: relative; &::after { diff --git a/fec/fec/static/scss/components/_toggles.scss b/fec/fec/static/scss/components/_toggles.scss index a98b04a580..e887a88d0f 100644 --- a/fec/fec/static/scss/components/_toggles.scss +++ b/fec/fec/static/scss/components/_toggles.scss @@ -24,10 +24,10 @@ // .toggles { - @include clearfix(); + @include clearfix; input[type="radio"] { - @include u-visually-hidden(); + @include u-visually-hidden; } input:checked { @@ -111,7 +111,7 @@ border-radius: 4px 4px 0 0 !important; } .button-last { - border-radius:0 0 4px 4px !important; + border-radius: 0 0 4px 4px !important; } } @@ -123,7 +123,7 @@ border-radius: 4px 0 0 4px !important; } .button-last { - border-radius:0 4px 4px 0 !important; + border-radius: 0 4px 4px 0 !important; } } } diff --git a/fec/fec/static/scss/components/_tooltips.scss b/fec/fec/static/scss/components/_tooltips.scss index f455dfd538..f21e33c30b 100644 --- a/fec/fec/static/scss/components/_tooltips.scss +++ b/fec/fec/static/scss/components/_tooltips.scss @@ -85,7 +85,9 @@ // When the tooltip is above the content. Puts the arrow at the bottom center of the tooltip .tooltip--above { min-width: u(12rem); + $bottom: u(1.5rem); + left: u(-4rem); bottom: calc(100% + #{$bottom}); @@ -139,6 +141,7 @@ .tooltip--under { $top: u(1.5rem); + left: u(-14rem); top: calc(100% + #{$top}); @@ -180,7 +183,9 @@ // When the tooltip is above the content. Puts the arrow at the bottom center of the tooltip .tooltip--above { min-width: u(12rem); + $bottom: u(1.5rem); + left: u(-4rem); bottom: calc(100% + #{$bottom}); @@ -260,7 +265,7 @@ display: flex; align-items: center; justify-content: space-between; - @include clearfix(); + @include clearfix; .tooltip__title { flex-grow: 2; diff --git a/fec/fec/static/scss/components/_type-styles.scss b/fec/fec/static/scss/components/_type-styles.scss index 0a3d77a24a..6d3ca85c0e 100644 --- a/fec/fec/static/scss/components/_type-styles.scss +++ b/fec/fec/static/scss/components/_type-styles.scss @@ -24,7 +24,7 @@ border-bottom: 1px solid $base; border-top: 1px solid $base; padding: u(1rem 0); - @include clearfix(); + @include clearfix; } .t-ruled--bottom { diff --git a/fec/fec/static/scss/elements/_elements.scss b/fec/fec/static/scss/elements/_elements.scss index 65020b9dff..9f2c3e5bc4 100644 --- a/fec/fec/static/scss/elements/_elements.scss +++ b/fec/fec/static/scss/elements/_elements.scss @@ -11,6 +11,7 @@ @import 'images'; // Base styles + /* apply a natural box layout model to all elements, but allowing components to change */ html { @@ -21,7 +22,7 @@ html { -moz-osx-font-smoothing: grayscale; } -*, *:before, *:after { +*, *::before, *::after { box-sizing: inherit; } @@ -38,10 +39,10 @@ main { } } -[aria-hidden=true] { +[aria-hidden="true"] { display: none !important; } -.wagtail-userbar-icon[aria-hidden=true] { // for the edit-page bug for editors +.wagtail-userbar-icon[aria-hidden="true"] { // for the edit-page bug for editors display: initial !important; } diff --git a/fec/fec/static/scss/elements/_forms.scss b/fec/fec/static/scss/elements/_forms.scss index 1b750fecd9..7835235947 100644 --- a/fec/fec/static/scss/elements/_forms.scss +++ b/fec/fec/static/scss/elements/_forms.scss @@ -34,7 +34,7 @@ label { } input, -select[multiple=multiple], +select[multiple="multiple"], textarea, select { background-color: $inverse; @@ -135,7 +135,7 @@ input[type="file"] { [type="checkbox"], [type="radio"] { - @include u-visually-hidden(); + @include u-visually-hidden; } [type="checkbox"] + label, diff --git a/fec/fec/static/scss/layout/_grid.scss b/fec/fec/static/scss/layout/_grid.scss index 9617c39384..0617689623 100644 --- a/fec/fec/static/scss/layout/_grid.scss +++ b/fec/fec/static/scss/layout/_grid.scss @@ -103,7 +103,7 @@ p { width: 85%; - margin: 1rem auto 2rem auto; + margin: 1rem auto 2rem; } } } diff --git a/fec/fec/static/scss/layout/_layout.scss b/fec/fec/static/scss/layout/_layout.scss index b9cc57a24e..fd0c7f0aac 100644 --- a/fec/fec/static/scss/layout/_layout.scss +++ b/fec/fec/static/scss/layout/_layout.scss @@ -9,7 +9,7 @@ // used to center and group grid items .container { padding: u(0 2rem); - @include outer-container(); + @include outer-container; @include media($lg) { padding: 0; @@ -18,7 +18,7 @@ // clearfixes a group of divs / wraps grid columns .row { - @include clearfix(); + @include clearfix; } // the main content area below heroes @@ -26,7 +26,7 @@ padding-bottom: u(2rem); padding-top: u(2rem); position: relative; - @include clearfix(); + @include clearfix; @include media($lg) { padding-top: u(3rem); @@ -42,7 +42,7 @@ // the area below page headers, next to sidebar .main__content { position: relative; - @include clearfix(); + @include clearfix; @include media($med) { @include span-columns(8); @@ -51,7 +51,7 @@ .main__content--right { position: relative; - @include clearfix(); + @include clearfix; @include media($med) { @include span-columns(9); @@ -61,13 +61,13 @@ // full-width main content area .main__content--full { position: relative; - @include clearfix(); + @include clearfix; } .main__content--right-full { position: relative; width: 100%; - @include clearfix(); + @include clearfix; @include media($med) { display: table-cell; @@ -78,12 +78,12 @@ // adds padding for breaking up sections of body content .content__section { padding: u(0 0 2rem 0); - @include clearfix(); + @include clearfix; } .content__section--extra { padding: u(2rem 0); - @include clearfix(); + @include clearfix; @include media($lg) { padding: u(4rem 0); diff --git a/fec/fec/static/scss/layout/_slabs.scss b/fec/fec/static/scss/layout/_slabs.scss index e0c67514f1..7d7a711caf 100644 --- a/fec/fec/static/scss/layout/_slabs.scss +++ b/fec/fec/static/scss/layout/_slabs.scss @@ -12,27 +12,27 @@ .slab { padding: u(2rem 0); - @include clearfix(); + @include clearfix; } // Neutral gray background with base accents and type (default) .slab--neutral { - @include u-bg--neutral(); + @include u-bg--neutral; } // Primary background with primary-contrast accents and type .slab--primary { - @include u-bg--primary(); + @include u-bg--primary; } // Secondary background with secondary-contrast accents and type .slab--secondary { - @include u-bg--secondary(); + @include u-bg--secondary; } // Dark gray background with gray-lightest accents and type .slab--dark { - @include u-bg--dark(); + @include u-bg--dark; } .slab--spacious { diff --git a/fec/fec/static/scss/mixins/_icon-mixins.scss b/fec/fec/static/scss/mixins/_icon-mixins.scss index 56ef377fb6..785cc07388 100644 --- a/fec/fec/static/scss/mixins/_icon-mixins.scss +++ b/fec/fec/static/scss/mixins/_icon-mixins.scss @@ -11,7 +11,7 @@ @return $string; } -@function svg-fill ($svg, $color) { +@function svg-fill($svg, $color) { $fillColor: str-replace(#{$color}, '#', '%23'); @return str-replace($svg, '%3Csvg', '%3Csvg%20%20fill%3D%27#{$fillColor}%27'); } diff --git a/fec/fec/static/scss/mixins/_type-mixins.scss b/fec/fec/static/scss/mixins/_type-mixins.scss index 0e321e6b82..54185545a2 100644 --- a/fec/fec/static/scss/mixins/_type-mixins.scss +++ b/fec/fec/static/scss/mixins/_type-mixins.scss @@ -3,7 +3,7 @@ @mixin heading($level) { & { - margin: 0 0 1em 0; + margin: 0 0 1em; } @if $level == display { diff --git a/fec/fec/static/scss/mixins/_utilities.scss b/fec/fec/static/scss/mixins/_utilities.scss index 29331fe50b..8b9e0901a5 100644 --- a/fec/fec/static/scss/mixins/_utilities.scss +++ b/fec/fec/static/scss/mixins/_utilities.scss @@ -13,7 +13,7 @@ } .u-visually-hidden { - @include u-visually-hidden(); + @include u-visually-hidden; } .u-float-left { @@ -199,12 +199,12 @@ @include u-icon-bg($arrow-down, $inverse); - &:hover:not(.is-disabled):not([disabled]) { + &:hover:not(.is-disabled, [disabled]) { border-color: $gray-medium; background-color: transparent; } - &:active:not(.is-disabled):not([disabled]), + &:active:not(.is-disabled, [disabled]), &:focus, &.is-active { background-color: rgba($inverse, .3); @@ -227,7 +227,7 @@ @mixin u-bg--primary() { background-color: $primary; - @include u-form--inverse(); + @include u-form--inverse; @include u-font-color($gray-lightest); a { @@ -254,7 +254,7 @@ @mixin u-bg--secondary() { background-color: $secondary; - @include u-form--inverse(); + @include u-form--inverse; @include u-font-color($gray-lightest); a { @@ -299,7 +299,7 @@ @mixin u-bg--dark() { background-color: $gray-dark; - @include u-form--inverse(); + @include u-form--inverse; @include u-font-color($gray-lightest); a { diff --git a/fec/fec/static/scss/widgets/aggregate-totals.scss b/fec/fec/static/scss/widgets/aggregate-totals.scss index 0096f13897..9524608b8e 100644 --- a/fec/fec/static/scss/widgets/aggregate-totals.scss +++ b/fec/fec/static/scss/widgets/aggregate-totals.scss @@ -18,28 +18,28 @@ $fontWeightRegular: 500; $fontWeightBold: 700; @font-face { - font-family: 'gandhi'; + font-family: gandhi; font-style: normal; font-weight: normal; src: url('/static/fonts/gandhiserif-regular.woff2') format('woff2'), url('/static/fonts/gandhiserif-regular.woff') format('woff'); } @font-face { - font-family: 'karla'; + font-family: karla; font-style: normal; font-weight: normal; src: url('/static/fonts/karla-regular.woff2') format('woff2'), url('/static/fonts/karla-regular.woff') format('woff'); } @font-face { - font-family: 'karla'; + font-family: karla; src: url('/static/fonts/karla-bold.woff2') format('woff2'), url('/static/fonts/karla-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { - font-family: fec_currency_mono; + font-family: "fec_currency_mono"; font-style: normal; font-weight: normal; src: url('/static/fonts/fec-currencymono-regular.woff2') format('woff2'), @@ -127,7 +127,7 @@ aside.aggr-totals[id^='gov_fec_at_'] { font-weight: normal; line-height: $fontSizeBase * 1.4; min-height: $fontSizeBase * 1.2; - padding: 0px 2px 1px; + padding: 0 2px 1px; white-space: pre; -webkit-rtl-ordering: logical; } @@ -156,7 +156,7 @@ aside.aggr-totals[id^='gov_fec_at_'] { } .total-wrapper { border-bottom: solid thin $colorElementBordersOnLight; - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; @@ -275,7 +275,7 @@ aside.aggr-totals[id^='gov_fec_at_'] { footer { -ms-flex-align: baseline; align-items: baseline; - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; @@ -323,9 +323,10 @@ aside.aggr-totals[id^='gov_fec_at_'] { // Medium sizes for the light theme, which is the default &.w-m { @extend .w-s; + -ms-flex-align: center; align-items: center; - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; @@ -391,7 +392,7 @@ aside.aggr-totals[id^='gov_fec_at_'] { &.w-l { @extend .w-m; .controls-wrapper { - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; @@ -463,7 +464,7 @@ aside.aggr-totals[id^='gov_fec_at_'] { // Medium sizes of the dark theme &.w-m { .main-content-wrapper { - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; @@ -505,7 +506,7 @@ aside.aggr-totals[id^='gov_fec_at_'] { // Universals .t-mono-stacked-currency { - font-family: fec_currency_mono; + font-family: "fec_currency_mono"; text-align: right; } diff --git a/fec/fec/static/scss/widgets/contributions-by-state.scss b/fec/fec/static/scss/widgets/contributions-by-state.scss index a776e05f47..669f0c3934 100644 --- a/fec/fec/static/scss/widgets/contributions-by-state.scss +++ b/fec/fec/static/scss/widgets/contributions-by-state.scss @@ -1,6 +1,6 @@ $colorElementBordersOnLight: #aeb0b5; $colorText: #212121; -$colorBorder: #333333; +$colorBorder: #333; $colorTableTdBorder: #f1f1f1; $fontFamilyMonospace: 'fec_currency_mono', 'karla', sans-serif; $fontFamilySansSerif: 'karla', sans-serif; @@ -28,35 +28,35 @@ $info-circle: 'data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2 // animation for u-button @import "../vendor/bourbon/css3/animation"; // u-button: -@import "../mixins/_utilities.scss"; +@import "../mixins/_utilities"; // triangle for tooltips: @import "../vendor/bourbon/addons/triangle"; // overlay for loading states @import "../components/overlay"; @font-face { - font-family: 'gandhi'; + font-family: gandhi; font-style: normal; font-weight: normal; src: url('/static/fonts/gandhiserif-regular.woff2') format('woff2'), url('/static/fonts/gandhiserif-regular.woff') format('woff'); } @font-face { - font-family: 'karla'; + font-family: karla; font-style: normal; font-weight: normal; src: url('/static/fonts/karla-regular.woff2') format('woff2'), url('/static/fonts/karla-regular.woff') format('woff'); } @font-face { - font-family: 'karla'; + font-family: karla; src: url('/static/fonts/karla-bold.woff2') format('woff2'), url('/static/fonts/karla-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { - font-family: fec_currency_mono; + font-family: "fec_currency_mono"; font-style: normal; font-weight: normal; src: url('/static/fonts/fec-currencymono-regular.woff2') format('woff2'), @@ -147,7 +147,7 @@ aside.contribs-by-state { font-weight: normal; line-height: $fontSizeBase * 1.4; min-height: $fontSizeBase * 1.2; - padding: 0px 2px 1px; + padding: 0 2px 1px; white-space: pre; -webkit-rtl-ordering: logical; } @@ -212,9 +212,9 @@ aside.contribs-by-state { border-style: solid; border-width: 0 0 0 3px; display: block !important; - max-height: 0px; + max-height: 0; overflow: hidden; - padding: 0 0 0 0; + padding: 0; transition: all 0.5s; width: 100%; @@ -370,7 +370,7 @@ aside.contribs-by-state { font-size: $fontSizeBase * 2; font-weight: $fontWeightRegular; line-height: 1.25em; - margin: 0 0 .25em 0; + margin: 0 0 .25em; a { line-height: 1.25em; @@ -381,7 +381,7 @@ aside.contribs-by-state { font-size: $fontSizeBase * 1.4; font-weight: $fontWeightRegular; line-height: 1.25em; - margin: 0 0 .25em 0; + margin: 0 0 .25em; } } .legend-container { @@ -405,7 +405,7 @@ aside.contribs-by-state { } .overlay__container { display: none; - left: 0px; + left: 0; position: absolute; width: 100%; z-index: #{$z1 - 1}; // The typeahead menu is at 100 and we want it to be visible above this @@ -431,6 +431,7 @@ aside.contribs-by-state { // Medium sizes &.w-m { @extend .w-s !optional; + display: flex; flex-wrap: wrap; @@ -583,6 +584,7 @@ aside.contribs-by-state { } &::before { @include triangle(2rem, $primary, down); + bottom: -1rem; content: ''; display: block; @@ -592,6 +594,7 @@ aside.contribs-by-state { &::after { @include triangle(1.6rem, $inverse, down); + bottom: -.7rem; content: ''; display: block; diff --git a/fec/fec/static/scss/widgets/house-senate-overview.scss b/fec/fec/static/scss/widgets/house-senate-overview.scss index 4639c4b053..230b65321b 100644 --- a/fec/fec/static/scss/widgets/house-senate-overview.scss +++ b/fec/fec/static/scss/widgets/house-senate-overview.scss @@ -1,5 +1,5 @@ @font-face { - font-family: fec_currency_mono; + font-family: "fec_currency_mono"; font-style: normal; font-weight: normal; src: url("/static/fonts/fec-currencymono-regular.woff2") format("woff2"), @@ -8,17 +8,17 @@ } #contributions-over-time { - overflow-x: scroll; h3 { display: inline; font-family: karla, sans-serif; + /* font-family: $sans-serif; */ } [data-total-type] { - margin: 5px 0 15px 0; + margin: 5px 0 15px; } .simple-table--responsive { @@ -28,7 +28,7 @@ .simple-table--responsive .simple-table__row { margin-bottom: 1rem; - font-family: fec_currency_mono; + font-family: "fec_currency_mono"; letter-spacing: -1px; } @@ -60,16 +60,14 @@ meter { /* Reset the default appearance */ -moz-appearance: none; - height: 20px; - width: 40%; background: #eee; vertical-align: text-top; /* For Firefox */ - border-radius: 0px; + border-radius: 0; } .diagonal_stripe meter::-webkit-meter-optimum-value { @@ -85,7 +83,7 @@ meter { /* WebKit */ meter::-webkit-meter-bar { background: #eee; - border-radius: 0px; + border-radius: 0; height: 20px; border: none; } @@ -97,7 +95,7 @@ meter::-webkit-meter-optimum-value { /* Firefox */ meter::-moz-meter-bar { - border-radius: 0px; + border-radius: 0; height: 20px; } @@ -106,11 +104,11 @@ meter:-moz-meter-optimum::-moz-meter-bar { } .t-mono-stacked-currency { - font-family: fec_currency_mono; + font-family: "fec_currency_mono"; text-align: right; } -@media screen and (max-width: 400px) { +@media screen and (width <= 400px) { meter { display: block; width: 80% diff --git a/fec/fec/static/scss/widgets/party-money-bars.scss b/fec/fec/static/scss/widgets/party-money-bars.scss index 8a0255e322..5d17658f22 100644 --- a/fec/fec/static/scss/widgets/party-money-bars.scss +++ b/fec/fec/static/scss/widgets/party-money-bars.scss @@ -47,7 +47,7 @@ $fontWeightBold: 700; } .total-wrapper { - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; @@ -126,7 +126,7 @@ $fontWeightBold: 700; background: $colorBarDef; transition: all 1s; } - &:before { + &::before { content: ""; display: block; height: 20px; @@ -144,7 +144,7 @@ $fontWeightBold: 700; background: $colorBarDem; transition: all 1s; } - &:before { + &::before { border-right-color: $colorBarDem; } } @@ -159,7 +159,7 @@ $fontWeightBold: 700; background: $colorBarRep; transition: all 1s; } - &:before { + &::before { border-right-color: $colorBarRep; } } @@ -180,7 +180,7 @@ $fontWeightBold: 700; footer { -ms-flex-align: baseline; align-items: baseline; - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; @@ -228,9 +228,10 @@ $fontWeightBold: 700; // Medium sizes for the light theme, which is the default &.w-m { @extend .w-s; + -ms-flex-align: center; align-items: center; - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; @@ -353,7 +354,7 @@ $fontWeightBold: 700; // Medium sizes of the dark theme &.w-m { .main-content-wrapper { - display: -ms-flexbox; + display: flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; @@ -395,7 +396,7 @@ $fontWeightBold: 700; // Universals .t-mono-stacked-currency { - font-family: fec_currency_mono; + font-family: "fec_currency_mono"; text-align: right; } diff --git a/package-lock.json b/package-lock.json index 5aa9f12f2f..aebdfee0ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -123,10 +123,6 @@ "sinon-chai": "^3.7.0", "stream-browserify": "^3.0.0", "stringify": "^5.2.0", - "stylelint": "^16.8.1", - "stylelint-config-css-modules": "^4.4.0", - "stylelint-config-standard-scss": "^13.1.0", - "stylelint-scss": "^6.4.1", "underscore": "^1.13.6", "urijs": "^1.19.11", "vue": "^2.7.16", @@ -2097,96 +2093,6 @@ "node": ">=0.1.90" } }, - "node_modules/@csstools/css-parser-algorithms": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz", - "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^2.4.1" - } - }, - "node_modules/@csstools/css-tokenizer": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz", - "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": "^14 || ^16 || >=18" - } - }, - "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.13", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz", - "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT", - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.7.1", - "@csstools/css-tokenizer": "^2.4.1" - } - }, - "node_modules/@csstools/selector-specificity": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz", - "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/csstools" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } - ], - "license": "MIT-0", - "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "postcss-selector-parser": "^6.0.13" - } - }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -2197,17 +2103,6 @@ "node": ">=10.0.0" } }, - "node_modules/@dual-bundle/import-meta-resolve": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", - "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4487,16 +4382,6 @@ "node": ">=4" } }, - "node_modules/astral-regex": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", - "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/async": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", @@ -6968,13 +6853,6 @@ } ] }, - "node_modules/colord": { - "version": "2.9.3", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", - "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", - "dev": true, - "license": "MIT" - }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", @@ -7516,16 +7394,6 @@ "source-map-resolve": "^0.6.0" } }, - "node_modules/css-functions-list": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz", - "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12 || >=16" - } - }, "node_modules/css-select": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", @@ -8361,29 +8229,6 @@ "dev": true, "license": "MIT" }, - "node_modules/dir-glob": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", - "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", - "dev": true, - "license": "MIT", - "dependencies": { - "path-type": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/dir-glob/node_modules/path-type": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/discontinuous-range": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz", @@ -10135,36 +9980,6 @@ "dev": true, "license": "MIT" }, - "node_modules/fast-glob": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", - "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", - "dev": true, - "license": "MIT", - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, - "node_modules/fast-glob/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -11194,13 +11009,6 @@ "node": ">=0.10.0" } }, - "node_modules/globjoin": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", - "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", - "dev": true, - "license": "MIT" - }, "node_modules/glogg": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz", @@ -12715,19 +12523,6 @@ "dev": true, "license": "MIT" }, - "node_modules/html-tags": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", - "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/htmlescape": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.1.tgz", @@ -14875,13 +14670,6 @@ "node": ">=0.10.0" } }, - "node_modules/known-css-properties": { - "version": "0.34.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz", - "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==", - "dev": true, - "license": "MIT" - }, "node_modules/labeled-stream-splicer": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-2.0.2.tgz", @@ -15339,13 +15127,6 @@ "lodash._root": "^3.0.0" } }, - "node_modules/lodash.truncate": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", - "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", - "dev": true, - "license": "MIT" - }, "node_modules/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", @@ -15754,17 +15535,6 @@ "node": ">=0.10.0" } }, - "node_modules/mathml-tag-names": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", - "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", - "dev": true, - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -15814,19 +15584,6 @@ "node": ">=0.12" } }, - "node_modules/meow": { - "version": "13.2.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", - "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -15834,16 +15591,6 @@ "dev": true, "license": "MIT" }, - "node_modules/merge2": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", - "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 8" - } - }, "node_modules/micromatch": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", @@ -18238,47 +17985,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-media-query-parser": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", - "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", - "dev": true, - "license": "MIT" - }, - "node_modules/postcss-resolve-nested-selector": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.4.tgz", - "integrity": "sha512-R6vHqZWgVnTAPq0C+xjyHfEZqfIYboCBVSy24MjxEDm+tIh1BU4O6o7DP7AA7kHzf136d+Qc5duI4tlpHjixDw==", - "dev": true, - "license": "MIT" - }, - "node_modules/postcss-scss": { - "version": "4.0.9", - "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz", - "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss-scss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "engines": { - "node": ">=12.0" - }, - "peerDependencies": { - "postcss": "^8.4.29" - } - }, "node_modules/postcss-selector-parser": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", @@ -18293,13 +17999,6 @@ "node": ">=4" } }, - "node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true, - "license": "MIT" - }, "node_modules/preact": { "version": "10.12.1", "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz", @@ -20464,60 +20163,6 @@ "node": ">=8" } }, - "node_modules/slice-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", - "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/slice-ansi?sponsor=1" - } - }, - "node_modules/slice-ansi/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/slice-ansi/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/slice-ansi/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "license": "MIT" - }, "node_modules/smart-buffer": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", @@ -21386,423 +21031,10 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/stylelint": { - "version": "16.8.1", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.8.1.tgz", - "integrity": "sha512-O8aDyfdODSDNz/B3gW2HQ+8kv8pfhSu7ZR7xskQ93+vI6FhKKGUJMQ03Ydu+w3OvXXE0/u4hWU4hCPNOyld+OA==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/stylelint" - }, - { - "type": "github", - "url": "https://github.com/sponsors/stylelint" - } - ], - "license": "MIT", - "dependencies": { - "@csstools/css-parser-algorithms": "^2.7.1", - "@csstools/css-tokenizer": "^2.4.1", - "@csstools/media-query-list-parser": "^2.1.13", - "@csstools/selector-specificity": "^3.1.1", - "@dual-bundle/import-meta-resolve": "^4.1.0", - "balanced-match": "^2.0.0", - "colord": "^2.9.3", - "cosmiconfig": "^9.0.0", - "css-functions-list": "^3.2.2", - "css-tree": "^2.3.1", - "debug": "^4.3.6", - "fast-glob": "^3.3.2", - "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^9.0.0", - "global-modules": "^2.0.0", - "globby": "^11.1.0", - "globjoin": "^0.1.4", - "html-tags": "^3.3.1", - "ignore": "^5.3.1", - "imurmurhash": "^0.1.4", - "is-plain-object": "^5.0.0", - "known-css-properties": "^0.34.0", - "mathml-tag-names": "^2.1.3", - "meow": "^13.2.0", - "micromatch": "^4.0.7", - "normalize-path": "^3.0.0", - "picocolors": "^1.0.1", - "postcss": "^8.4.40", - "postcss-resolve-nested-selector": "^0.1.4", - "postcss-safe-parser": "^7.0.0", - "postcss-selector-parser": "^6.1.1", - "postcss-value-parser": "^4.2.0", - "resolve-from": "^5.0.0", - "string-width": "^4.2.3", - "strip-ansi": "^7.1.0", - "supports-hyperlinks": "^3.0.0", - "svg-tags": "^1.0.0", - "table": "^6.8.2", - "write-file-atomic": "^5.0.1" - }, - "bin": { - "stylelint": "bin/stylelint.mjs" - }, - "engines": { - "node": ">=18.12.0" - } - }, - "node_modules/stylelint-config-css-modules": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/stylelint-config-css-modules/-/stylelint-config-css-modules-4.4.0.tgz", - "integrity": "sha512-J93MtxPjRzs/TjwbJ5y9SQy4iIqULXwL1CF1yx2tQCJfS/VZUcDAmoGOwqlLbhHXSQtZO5XQiA75NVWUR3KDCQ==", - "dev": true, - "license": "Unlicense", - "optionalDependencies": { - "stylelint-scss": "^6.0.0" - }, - "peerDependencies": { - "stylelint": "^14.5.1 || ^15.0.0 || ^16.0.0" - } - }, - "node_modules/stylelint-config-recommended": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", - "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/stylelint" - }, - { - "type": "github", - "url": "https://github.com/sponsors/stylelint" - } - ], - "license": "MIT", - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "stylelint": "^16.1.0" - } - }, - "node_modules/stylelint-config-recommended-scss": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz", - "integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==", - "dev": true, - "license": "MIT", - "dependencies": { - "postcss-scss": "^4.0.9", - "stylelint-config-recommended": "^14.0.1", - "stylelint-scss": "^6.4.0" - }, - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "postcss": "^8.3.3", - "stylelint": "^16.6.1" - }, - "peerDependenciesMeta": { - "postcss": { - "optional": true - } - } - }, - "node_modules/stylelint-config-standard": { - "version": "36.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz", - "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/stylelint" - }, - { - "type": "github", - "url": "https://github.com/sponsors/stylelint" - } - ], - "license": "MIT", - "dependencies": { - "stylelint-config-recommended": "^14.0.1" - }, - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "stylelint": "^16.1.0" - } - }, - "node_modules/stylelint-config-standard-scss": { - "version": "13.1.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz", - "integrity": "sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==", - "dev": true, - "license": "MIT", - "dependencies": { - "stylelint-config-recommended-scss": "^14.0.0", - "stylelint-config-standard": "^36.0.0" - }, - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "postcss": "^8.3.3", - "stylelint": "^16.3.1" - }, - "peerDependenciesMeta": { - "postcss": { - "optional": true - } - } - }, - "node_modules/stylelint-scss": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.4.1.tgz", - "integrity": "sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "known-css-properties": "^0.34.0", - "postcss-media-query-parser": "^0.2.3", - "postcss-resolve-nested-selector": "^0.1.1", - "postcss-selector-parser": "^6.1.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": ">=18.12.0" - }, - "peerDependencies": { - "stylelint": "^16.0.2" - } - }, - "node_modules/stylelint/node_modules/ansi-regex": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", - "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, - "node_modules/stylelint/node_modules/array-union": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", - "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/stylelint/node_modules/balanced-match": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", - "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", - "dev": true, - "license": "MIT" - }, - "node_modules/stylelint/node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, - "license": "MIT", - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, - "node_modules/stylelint/node_modules/file-entry-cache": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz", - "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==", - "dev": true, - "license": "MIT", - "dependencies": { - "flat-cache": "^5.0.0" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/stylelint/node_modules/flat-cache": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz", - "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "flatted": "^3.3.1", - "keyv": "^4.5.4" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/stylelint/node_modules/global-modules": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", - "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==", - "dev": true, - "license": "MIT", - "dependencies": { - "global-prefix": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/stylelint/node_modules/global-prefix": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz", - "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==", - "dev": true, - "license": "MIT", - "dependencies": { - "ini": "^1.3.5", - "kind-of": "^6.0.2", - "which": "^1.3.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/stylelint/node_modules/globby": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", - "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", - "dev": true, - "license": "MIT", - "dependencies": { - "array-union": "^2.1.0", - "dir-glob": "^3.0.1", - "fast-glob": "^3.2.9", - "ignore": "^5.2.0", - "merge2": "^1.4.1", - "slash": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/kind-of": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", - "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/stylelint/node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true, - "license": "CC0-1.0" - }, - "node_modules/stylelint/node_modules/postcss-safe-parser": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", - "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "engines": { - "node": ">=18.0" - }, - "peerDependencies": { - "postcss": "^8.4.31" - } - }, - "node_modules/stylelint/node_modules/signal-exit": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true, - "license": "ISC", - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/stylelint/node_modules/strip-ansi": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^6.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/strip-ansi?sponsor=1" - } - }, - "node_modules/stylelint/node_modules/which": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, - "license": "ISC", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "which": "bin/which" - } - }, - "node_modules/stylelint/node_modules/write-file-atomic": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", - "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", - "dev": true, - "license": "ISC", - "dependencies": { - "imurmurhash": "^0.1.4", - "signal-exit": "^4.0.1" - }, - "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" - } - }, - "node_modules/subarg": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz", - "integrity": "sha512-RIrIdRY0X1xojthNcVtgT9sjpOGagEUKpZdgBUi054OEPFo282yg+zE+t1Rj3+RqKq2xStL7uUHhY+AjbC4BXg==", + "node_modules/subarg": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz", + "integrity": "sha512-RIrIdRY0X1xojthNcVtgT9sjpOGagEUKpZdgBUi054OEPFo282yg+zE+t1Rj3+RqKq2xStL7uUHhY+AjbC4BXg==", "dev": true, "license": "MIT", "dependencies": { @@ -21822,43 +21054,6 @@ "node": ">=4" } }, - "node_modules/supports-hyperlinks": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz", - "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0", - "supports-color": "^7.0.0" - }, - "engines": { - "node": ">=14.18" - } - }, - "node_modules/supports-hyperlinks/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/supports-hyperlinks/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", @@ -21883,12 +21078,6 @@ "es6-symbol": "^3.1.1" } }, - "node_modules/svg-tags": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", - "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", - "dev": true - }, "node_modules/svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -22004,47 +21193,6 @@ "acorn-node": "^1.2.0" } }, - "node_modules/table": { - "version": "6.8.2", - "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", - "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "ajv": "^8.0.1", - "lodash.truncate": "^4.4.2", - "slice-ansi": "^4.0.0", - "string-width": "^4.2.3", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/table/node_modules/ajv": { - "version": "8.17.1", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", - "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", - "dev": true, - "license": "MIT", - "dependencies": { - "fast-deep-equal": "^3.1.3", - "fast-uri": "^3.0.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "node_modules/table/node_modules/json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true, - "license": "MIT" - }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index c8855781be..c4d3e81b44 100644 --- a/package.json +++ b/package.json @@ -139,10 +139,6 @@ "sinon-chai": "^3.7.0", "stream-browserify": "^3.0.0", "stringify": "^5.2.0", - "stylelint": "^16.8.1", - "stylelint-config-css-modules": "^4.4.0", - "stylelint-config-standard-scss": "^13.1.0", - "stylelint-scss": "^6.4.1", "underscore": "^1.13.6", "urijs": "^1.19.11", "vue": "^2.7.16", From c635187952813c4504b20125a73bf74369811359 Mon Sep 17 00:00:00 2001 From: Robert Date: Sun, 4 Aug 2024 07:37:07 -0400 Subject: [PATCH 04/10] Sass - add prettier, fix formatting --- .prettierignore | 15 + .prettierrc | 3 +- fec/fec/static/scss/_fonts.scss | 30 +- fec/fec/static/scss/_functions.scss | 1 - fec/fec/static/scss/_global-common.scss | 60 +-- fec/fec/static/scss/_global.scss | 52 +-- fec/fec/static/scss/base.scss | 82 ++-- fec/fec/static/scss/calendar.scss | 22 +- fec/fec/static/scss/common.scss | 2 +- .../static/scss/components/_accordions.scss | 4 +- fec/fec/static/scss/components/_agendas.scss | 6 +- fec/fec/static/scss/components/_articles.scss | 30 +- .../static/scss/components/_breadcrumbs.scss | 6 +- .../static/scss/components/_breakdowns.scss | 8 +- fec/fec/static/scss/components/_buttons.scss | 38 +- .../scss/components/_calc-admin-fines.scss | 129 +++--- fec/fec/static/scss/components/_calendar.scss | 54 +-- fec/fec/static/scss/components/_callouts.scss | 6 +- fec/fec/static/scss/components/_cards.scss | 13 +- fec/fec/static/scss/components/_charts.scss | 8 +- .../scss/components/_committee-snapshot.scss | 24 +- .../static/scss/components/_contact-form.scss | 22 +- .../scss/components/_contact-items.scss | 13 +- .../static/scss/components/_cycle-select.scss | 2 +- .../scss/components/_data-container.scss | 9 +- .../components/_data-landing-callouts.scss | 12 +- .../scss/components/_datatable-panel.scss | 24 +- .../static/scss/components/_datatables.scss | 11 +- .../static/scss/components/_date-grid.scss | 5 +- .../static/scss/components/_downloads.scss | 10 +- .../static/scss/components/_dropdowns.scss | 30 +- .../scss/components/_entity-header.scss | 6 +- fec/fec/static/scss/components/_examples.scss | 9 +- .../static/scss/components/_fec-offices.scss | 35 +- .../scss/components/_fec-org-chart.scss | 43 +- fec/fec/static/scss/components/_feedback.scss | 16 +- fec/fec/static/scss/components/_figures.scss | 4 +- fec/fec/static/scss/components/_filters.scss | 23 +- fec/fec/static/scss/components/_footer.scss | 12 +- .../static/scss/components/_form-styles.scss | 34 +- fec/fec/static/scss/components/_glossary.scss | 19 +- fec/fec/static/scss/components/_headings.scss | 6 +- fec/fec/static/scss/components/_hero.scss | 6 +- .../scss/components/_icon-headings.scss | 88 +++- fec/fec/static/scss/components/_icons.scss | 6 +- .../static/scss/components/_legal-search.scss | 3 +- .../static/scss/components/_list-styles.scss | 31 +- fec/fec/static/scss/components/_maps.scss | 16 +- .../static/scss/components/_mega-menu.scss | 57 ++- fec/fec/static/scss/components/_messages.scss | 14 +- fec/fec/static/scss/components/_modals.scss | 4 +- fec/fec/static/scss/components/_nav.scss | 27 +- fec/fec/static/scss/components/_overlay.scss | 3 +- .../static/scss/components/_overviews.scss | 2 +- .../static/scss/components/_page-headers.scss | 1 - .../static/scss/components/_pagination.scss | 6 +- fec/fec/static/scss/components/_posts.scss | 9 +- .../scss/components/_responsive-object.scss | 51 ++- .../static/scss/components/_results-info.scss | 7 +- fec/fec/static/scss/components/_richtext.scss | 19 +- .../static/scss/components/_search-bar.scss | 6 +- .../scss/components/_search-controls.scss | 53 ++- .../scss/components/_search-results.scss | 2 +- fec/fec/static/scss/components/_side-nav.scss | 9 +- fec/fec/static/scss/components/_sidebar.scss | 2 +- .../static/scss/components/_site-header.scss | 71 ++-- .../static/scss/components/_table-styles.scss | 179 ++++---- fec/fec/static/scss/components/_tags.scss | 16 +- fec/fec/static/scss/components/_toggles.scss | 25 +- fec/fec/static/scss/components/_tooltips.scss | 18 +- .../static/scss/components/_type-styles.scss | 4 +- fec/fec/static/scss/data-landing.scss | 47 +-- fec/fec/static/scss/datatables.scss | 34 +- fec/fec/static/scss/elections.scss | 28 +- fec/fec/static/scss/elements/_elements.scss | 12 +- fec/fec/static/scss/elements/_forms.scss | 74 ++-- fec/fec/static/scss/elements/_tables.scss | 3 +- fec/fec/static/scss/elements/_typography.scss | 2 +- fec/fec/static/scss/entity.scss | 28 +- fec/fec/static/scss/home.scss | 28 +- fec/fec/static/scss/layout/_grid.scss | 24 +- fec/fec/static/scss/layout/_layout.scss | 8 +- fec/fec/static/scss/legal-common.scss | 16 +- fec/fec/static/scss/legal.scss | 16 +- fec/fec/static/scss/mixins/_icon-mixins.scss | 15 +- fec/fec/static/scss/mixins/_type-mixins.scss | 6 +- fec/fec/static/scss/mixins/_utilities.scss | 50 ++- .../bourbon/_bourbon-deprecated-upcoming.scss | 393 +++++++++++++----- .../static/scss/vendor/bourbon/_bourbon.scss | 154 +++---- .../scss/vendor/bourbon/addons/_buttons.scss | 18 +- .../scss/vendor/bourbon/addons/_clearfix.scss | 2 +- .../vendor/bourbon/addons/_font-stacks.scss | 10 +- .../scss/vendor/bourbon/addons/_position.scss | 6 +- .../scss/vendor/bourbon/addons/_prefixer.scss | 30 +- .../vendor/bourbon/addons/_retina-image.scss | 23 +- .../vendor/bourbon/addons/_text-inputs.scss | 27 +- .../bourbon/addons/_timing-functions.scss | 48 +-- .../scss/vendor/bourbon/addons/_triangle.scss | 20 +- .../bourbon/css3/_background-image.scss | 22 +- .../scss/vendor/bourbon/css3/_background.scss | 42 +- .../vendor/bourbon/css3/_border-image.scss | 40 +- .../scss/vendor/bourbon/css3/_columns.scss | 2 +- .../scss/vendor/bourbon/css3/_flex-box.scss | 108 +++-- .../scss/vendor/bourbon/css3/_font-face.scss | 4 +- .../bourbon/css3/_font-feature-settings.scss | 4 +- .../vendor/bourbon/css3/_image-rendering.scss | 7 +- .../scss/vendor/bourbon/css3/_keyframes.scss | 16 +- .../vendor/bourbon/css3/_linear-gradient.scss | 44 +- .../vendor/bourbon/css3/_placeholder.scss | 2 +- .../vendor/bourbon/css3/_radial-gradient.scss | 52 ++- .../scss/vendor/bourbon/css3/_selection.scss | 84 ++-- .../vendor/bourbon/css3/_text-decoration.scss | 8 +- .../scss/vendor/bourbon/css3/_transition.scss | 25 +- .../bourbon/functions/_assign-inputs.scss | 2 +- .../vendor/bourbon/functions/_contains.scss | 2 +- .../vendor/bourbon/functions/_is-length.scss | 9 +- .../vendor/bourbon/functions/_is-light.scss | 4 +- .../vendor/bourbon/functions/_is-number.scss | 5 +- .../vendor/bourbon/functions/_is-size.scss | 4 +- .../bourbon/functions/_modular-scale.scss | 38 +- .../functions/_transition-property-name.scss | 11 +- .../vendor/bourbon/functions/_unpack.scss | 9 +- .../bourbon/helpers/_convert-units.scss | 8 +- .../bourbon/helpers/_directional-values.scss | 75 +++- .../helpers/_font-source-declaration.scss | 14 +- .../helpers/_gradient-positions-parser.scss | 16 +- .../bourbon/helpers/_linear-angle-parser.scss | 28 +- .../helpers/_linear-gradient-parser.scss | 34 +- .../helpers/_linear-positions-parser.scss | 52 ++- .../helpers/_linear-side-corner-parser.scss | 21 +- .../bourbon/helpers/_radial-arg-parser.scss | 47 +-- .../helpers/_radial-gradient-parser.scss | 26 +- .../helpers/_radial-positions-parser.scss | 14 +- .../bourbon/helpers/_render-gradients.scss | 23 +- .../bourbon/helpers/_shape-size-stripper.scss | 4 +- .../vendor/bourbon/helpers/_str-to-num.scss | 18 +- .../vendor/bourbon/settings/_prefixer.scss | 8 +- .../scss/vendor/neat/_neat-helpers.scss | 10 +- fec/fec/static/scss/vendor/neat/_neat.scss | 30 +- .../neat/functions/_new-breakpoint.scss | 11 +- .../scss/vendor/neat/functions/_private.scss | 14 +- .../scss/vendor/neat/grid/_box-sizing.scss | 3 +- .../vendor/neat/grid/_direction-context.scss | 4 +- .../static/scss/vendor/neat/grid/_media.scss | 11 +- .../static/scss/vendor/neat/grid/_omega.scss | 26 +- .../scss/vendor/neat/grid/_private.scss | 11 +- .../static/scss/vendor/neat/grid/_row.scss | 8 +- .../static/scss/vendor/neat/grid/_shift.scss | 7 +- .../scss/vendor/neat/grid/_span-columns.scss | 10 +- .../scss/vendor/neat/grid/_to-deprecate.scss | 25 +- .../scss/vendor/neat/grid/_visual-grid.scss | 8 +- .../static/scss/widgets/aggregate-totals.scss | 16 +- .../scss/widgets/contributions-by-state.scss | 104 +++-- .../scss/widgets/house-senate-overview.scss | 43 +- .../static/scss/widgets/party-money-bars.scss | 9 +- .../static/scss/widgets/pres-finance-map.scss | 132 +++--- package-lock.json | 29 +- package.json | 5 +- 158 files changed, 2339 insertions(+), 1904 deletions(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..040abda811 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,15 @@ +# Ignore artifacts: +build +coverage +icons +*.cjs +*.hbs +*.html +*.html +*.jinja +*.js +*.json +*.md +*.yaml +*.yml +_icon-variables.scss diff --git a/.prettierrc b/.prettierrc index be2983739f..544138be45 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,3 @@ { - "singleQuote": true, - "jsxBracketSameLine": false + "singleQuote": true } diff --git a/fec/fec/static/scss/_fonts.scss b/fec/fec/static/scss/_fonts.scss index 90f5f1b605..7c1b4cf139 100644 --- a/fec/fec/static/scss/_fonts.scss +++ b/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; diff --git a/fec/fec/static/scss/_functions.scss b/fec/fec/static/scss/_functions.scss index 366bfbfdd3..668423660f 100644 --- a/fec/fec/static/scss/_functions.scss +++ b/fec/fec/static/scss/_functions.scss @@ -63,7 +63,6 @@ $px-only: false !default; } @else { $converted: append($converted, $value); } - } @else { $converted: append($converted, $value); } diff --git a/fec/fec/static/scss/_global-common.scss b/fec/fec/static/scss/_global-common.scss index 9d268efaa7..a8169364c4 100644 --- a/fec/fec/static/scss/_global-common.scss +++ b/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'; diff --git a/fec/fec/static/scss/_global.scss b/fec/fec/static/scss/_global.scss index d57bf56f72..41da2ea321 100644 --- a/fec/fec/static/scss/_global.scss +++ b/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'; diff --git a/fec/fec/static/scss/base.scss b/fec/fec/static/scss/base.scss index f0a9c69396..2f2161f3b8 100644 --- a/fec/fec/static/scss/base.scss +++ b/fec/fec/static/scss/base.scss @@ -1,44 +1,44 @@ -@import "global"; +@import 'global'; -@import "components/search-controls"; -@import "components/hero"; -@import "components/callouts"; -@import "components/contact-form"; -@import "components/contact-items"; -@import "components/cycle-select"; -@import "components/datatables"; -@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/responsive-object"; -@import "components/reaction-boxes"; -@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/fec-org-chart"; +@import 'components/search-controls'; +@import 'components/hero'; +@import 'components/callouts'; +@import 'components/contact-form'; +@import 'components/contact-items'; +@import 'components/cycle-select'; +@import 'components/datatables'; +@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/responsive-object'; +@import 'components/reaction-boxes'; +@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/fec-org-chart'; -@import "components/articles"; -@import "components/agendas"; -@import "components/filters"; -@import "components/results-info"; -@import "components/richtext"; +@import 'components/articles'; +@import 'components/agendas'; +@import 'components/filters'; +@import 'components/results-info'; +@import 'components/richtext'; -@import "components/calc-admin-fines"; -@import "components/fec-offices"; +@import 'components/calc-admin-fines'; +@import 'components/fec-offices'; diff --git a/fec/fec/static/scss/calendar.scss b/fec/fec/static/scss/calendar.scss index 99c480b99e..4626fa12bc 100644 --- a/fec/fec/static/scss/calendar.scss +++ b/fec/fec/static/scss/calendar.scss @@ -1,12 +1,12 @@ -@import "global-common"; +@import 'global-common'; -@import "components/accordions"; -@import "components/filters"; -@import "components/data-container"; -@import "components/calendar"; -@import "components/datatables"; -@import "components/dropdowns"; -@import "components/tags"; -@import "components/toggles"; -@import "components/tooltips"; -@import "components/type-styles"; +@import 'components/accordions'; +@import 'components/filters'; +@import 'components/data-container'; +@import 'components/calendar'; +@import 'components/datatables'; +@import 'components/dropdowns'; +@import 'components/tags'; +@import 'components/toggles'; +@import 'components/tooltips'; +@import 'components/type-styles'; diff --git a/fec/fec/static/scss/common.scss b/fec/fec/static/scss/common.scss index 2022be40a1..1a38f5b88d 100644 --- a/fec/fec/static/scss/common.scss +++ b/fec/fec/static/scss/common.scss @@ -1 +1 @@ -@import "global-common"; +@import 'global-common'; diff --git a/fec/fec/static/scss/components/_accordions.scss b/fec/fec/static/scss/components/_accordions.scss index 49d8d0765a..a8cdc0ce33 100644 --- a/fec/fec/static/scss/components/_accordions.scss +++ b/fec/fec/static/scss/components/_accordions.scss @@ -35,7 +35,7 @@ color: $base; font-size: u(1.4rem); font-weight: bold; - letter-spacing: -.3px; + letter-spacing: -0.3px; padding: u(1rem 4rem 1rem 2rem); text-align: left; width: 100%; @@ -52,7 +52,7 @@ padding: u(1rem 4rem 1rem 1rem); &::before { - content:''; + content: ''; @extend .button--envelope; padding: u(1rem 0 1rem 0); diff --git a/fec/fec/static/scss/components/_agendas.scss b/fec/fec/static/scss/components/_agendas.scss index 78a0f4f725..ad3f746aba 100644 --- a/fec/fec/static/scss/components/_agendas.scss +++ b/fec/fec/static/scss/components/_agendas.scss @@ -41,7 +41,7 @@ } } - a[href$=".pdf"] { + a[href$='.pdf'] { margin-left: u(6rem); &::before { @@ -54,8 +54,7 @@ } } - .list--flat-bordered li{ - + .list--flat-bordered li { &::after { content: ''; padding-left: 0; @@ -63,7 +62,6 @@ @include media($med) { content: '|'; padding-left: u(1rem); - } } diff --git a/fec/fec/static/scss/components/_articles.scss b/fec/fec/static/scss/components/_articles.scss index 595dc15276..b6f79abd0c 100644 --- a/fec/fec/static/scss/components/_articles.scss +++ b/fec/fec/static/scss/components/_articles.scss @@ -4,7 +4,6 @@ // Applies site styles to wagtail StreamField. .body-blocks { - .body-block { @extend .content__section; } @@ -15,25 +14,21 @@ .block-image { img { - height: auto; // preserve ratio + height: auto; // preserve ratio border: 2px solid $gray-lightest; border-radius: 2px; } } .block-paragraph + .block-table { - margin-top: u(-4rem); - } - + margin-top: u(-4rem); + } } - .block-table { - table { - @extend .simple-table-cms; - } +.block-table { + table { + @extend .simple-table-cms; } - - - +} // Author-list component // could be moved to fec-style/scss/components/_author-list.scss @@ -62,8 +57,8 @@ } .author-item__info { - white-space: nowrap; // keep .author-item__info next to image - overflow: hidden; // better than overlapping + white-space: nowrap; // keep .author-item__info next to image + overflow: hidden; // better than overlapping } .author-item__image { @@ -73,17 +68,16 @@ .author-item__details { display: inline-block; - white-space: normal; // since .author-item is nowrap + white-space: normal; // since .author-item is nowrap vertical-align: top; - margin-left: 1rem; // override default ul margin-left: 2rem + margin-left: 1rem; // override default ul margin-left: 2rem } .icon--email--author { @extend .icon--inline--right; - margin-left: u(.5rem); + margin-left: u(0.5rem); max-width: 20px; - } // Read-next component diff --git a/fec/fec/static/scss/components/_breadcrumbs.scss b/fec/fec/static/scss/components/_breadcrumbs.scss index 8bd99da079..1d60c5bb83 100644 --- a/fec/fec/static/scss/components/_breadcrumbs.scss +++ b/fec/fec/static/scss/components/_breadcrumbs.scss @@ -24,7 +24,7 @@ color: $gray; float: left; font-family: $sans-serif; - letter-spacing: -.3px; + letter-spacing: -0.3px; } .breadcrumbs__item { @@ -32,7 +32,7 @@ float: left; max-width: u(20rem); - padding: u(.8rem 0); + padding: u(0.8rem 0); } .breadcrumbs__item--current { @@ -44,7 +44,7 @@ } .breadcrumbs__separator { - padding: u(.5rem .8rem); + padding: u(0.5rem 0.8rem); } @include media($lg) { diff --git a/fec/fec/static/scss/components/_breakdowns.scss b/fec/fec/static/scss/components/_breakdowns.scss index ecd0188962..2d9e7d0c1c 100644 --- a/fec/fec/static/scss/components/_breakdowns.scss +++ b/fec/fec/static/scss/components/_breakdowns.scss @@ -17,15 +17,13 @@ .breakdown__title { line-height: u(3.4rem); margin: 0; - } .input__label-home { line-height: u(2.5rem); margin: 0; - } .bar-container { - margin-left: 0; - background: $gray-lightest; - } + margin-left: 0; + background: $gray-lightest; +} diff --git a/fec/fec/static/scss/components/_buttons.scss b/fec/fec/static/scss/components/_buttons.scss index e2edf7a6c8..4a87c7de90 100644 --- a/fec/fec/static/scss/components/_buttons.scss +++ b/fec/fec/static/scss/components/_buttons.scss @@ -20,10 +20,10 @@ padding: u(8px 2rem); text-align: center; vertical-align: middle; - @include transition(background-color, .1s, color, .1s, border-color, .1s); + @include transition(background-color, 0.1s, color, 0.1s, border-color, 0.1s); &.is-disabled { - opacity: .5; + opacity: 0.5; cursor: default; } @@ -69,7 +69,7 @@ color: $primary; } span { - color:$inverse; + color: $inverse; } } @@ -121,7 +121,7 @@ &:active:not(.is-disabled), &.is-active { - background-color: rgba($inverse, .3); + background-color: rgba($inverse, 0.3); border-color: $primary-contrast; color: $inverse; } @@ -161,7 +161,7 @@ &:active:not(.is-disabled), &.is-active { - background-color: rgba($inverse, .3); + background-color: rgba($inverse, 0.3); border-color: $secondary-contrast; color: $inverse; } @@ -220,7 +220,7 @@ border: none; display: none; height: u(4rem); - padding: u(.6rem); + padding: u(0.6rem); position: absolute; top: 0; right: 0; @@ -228,7 +228,7 @@ @include u-icon-bg($x, $primary); &:hover { - padding: u(.6rem); + padding: u(0.6rem); text-decoration: none; } @@ -240,7 +240,7 @@ .input--removable { position: relative; - input[type="text"] { + input[type='text'] { padding-right: u(5rem); } @@ -261,7 +261,7 @@ // Buttons: Calendar dropdown buttons .button--add-calendar { - background-position: u(1rem .7rem); + background-position: u(1rem 0.7rem); background-size: u(2rem); padding-left: u(4rem); padding-right: u(6rem); @@ -269,7 +269,7 @@ } .button--add-calendar--mini { - background-position: u(1rem .7rem); + background-position: u(1rem 0.7rem); background-size: u(2rem); max-width: u(7.4rem); padding-left: u(5rem); @@ -279,7 +279,7 @@ // Buttons: Download dropdown buttons .button--download--mini { - background-position: u(.75rem .5rem); + background-position: u(0.75rem 0.5rem); background-size: u(1.75rem); background-color: $gray-light; border-color: $gray; @@ -289,7 +289,7 @@ @include u-icon-bg($download, $base); &::after { - padding: u(.5rem .3rem 1rem 1.5rem) !important; + padding: u(0.5rem 0.3rem 1rem 1.5rem) !important; background-size: 10px !important; } @@ -315,11 +315,11 @@ } .button--map { - @include u-icon-button($map-pin, left) + @include u-icon-button($map-pin, left); } .button--table { - @include u-icon-button($table, right) + @include u-icon-button($table, right); } // toggle two-candidate view on map comparison @@ -475,7 +475,7 @@ background-size: contain; float: left; display: block; - margin-right: .5em; + margin-right: 0.5em; width: 1em; height: 1em; } @@ -558,9 +558,9 @@ } //For internal/external button widgets in Wagtail -.block-internal_button .button--primary, .block-external_button .button--primary { +.block-internal_button .button--primary, +.block-external_button .button--primary { margin-bottom: u(2.4rem); - } .button--open { background-size: u(2rem); @@ -569,14 +569,14 @@ color: $base; font-size: u(1.4rem); font-weight: bold; - letter-spacing: -.3px; + letter-spacing: -0.3px; padding: u(1rem 4rem 1rem 2rem); text-align: left; width: 100%; border-bottom: none; @include u-icon-bg($plus-circle, $primary); - &.button--close { + &.button--close { @include u-icon-bg($minus-circle, $primary); } } diff --git a/fec/fec/static/scss/components/_calc-admin-fines.scss b/fec/fec/static/scss/components/_calc-admin-fines.scss index c7b562678f..e909444a28 100644 --- a/fec/fec/static/scss/components/_calc-admin-fines.scss +++ b/fec/fec/static/scss/components/_calc-admin-fines.scss @@ -14,14 +14,13 @@ body.scroll-locked-for-modal { .modal__content { padding-bottom: 0; - & > div[role="document"] { + & > div[role='document'] { height: 100%; } } } } - // Vue strips the attributes from its DOM element #gov-fec-calc-af { border-top: 2px solid $base; @@ -31,12 +30,12 @@ body.scroll-locked-for-modal { @include media($med) { min-height: calc(100% - 5rem); } - + .topnav { margin-bottom: 1rem; min-height: 10rem; width: 100%; - + @include media($med) { margin-bottom: 0; // TODO - is this needed? min-height: 7.5rem; @@ -56,39 +55,39 @@ body.scroll-locked-for-modal { &::-webkit-meter-bar { // note#1 background: $gray-lightest; - border-radius: .5rem; + border-radius: 0.5rem; transition: all 1s; } &::-moz-meter-bar { // note#1 background: $gray-lightest; - border-radius: .5rem; + border-radius: 0.5rem; transition: all 1s; } &::-webkit-meter-optimum-value { // note#1 background: $green-light; - border-radius: .5rem; + border-radius: 0.5rem; transition: all 1s; } &:-moz-meter-optimum::-moz-meter-bar { // note#1 background: $green-light; - border-radius: .5rem; + border-radius: 0.5rem; transition: all 1s; } &.complete { width: calc(100% - 25px); - transition: width .5s ease-in-out; + transition: width 0.5s ease-in-out; } } .i-check { - background: url("data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%234aa564%27%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.47%206.678l.177.177a1.233%201.233%200%201%200-1.743-1.744l-6.84%206.84h.354L4.854%208.387a1.233%201.233%200%200%200-1.743%201.744l4.259%204.258a1.23%201.23%200%200%200%201.743%200l7.534-7.534-.176-.177z%22%2F%3E%3C%2Fsvg%3E"); + background: url('data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%234aa564%27%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.47%206.678l.177.177a1.233%201.233%200%201%200-1.743-1.744l-6.84%206.84h.354L4.854%208.387a1.233%201.233%200%200%200-1.743%201.744l4.259%204.258a1.23%201.23%200%200%200%201.743%200l7.534-7.534-.176-.177z%22%2F%3E%3C%2Fsvg%3E'); background-position: center; display: block; float: right; height: 15px; - margin-top: .75rem; + margin-top: 0.75rem; overflow: hidden; position: absolute; right: 0; @@ -96,9 +95,6 @@ body.scroll-locked-for-modal { width: 15px; clip: rect(0 15px 0 0); clip-path: inset(0 15px 0 0); - - - @include media($med) { right: calc(33% + 3rem); @@ -107,9 +103,9 @@ body.scroll-locked-for-modal { meter.complete + .i-check { background-size: 100%; clip: unset; - clip-path: inset(0); - transition: clip-path .5s; - transition-delay: .5s; + clip-path: inset(0); + transition: clip-path 0.5s; + transition-delay: 0.5s; } .breadcrumbs { @@ -120,7 +116,7 @@ body.scroll-locked-for-modal { display: inline-block; opacity: 0; pointer-events: none; - transition: opacity .1s; + transition: opacity 0.1s; &.viewed { color: purple; @@ -128,20 +124,24 @@ body.scroll-locked-for-modal { display: inline-block; opacity: 1; pointer-events: visible; - transition: opacity 1s, color .5s; + transition: + opacity 1s, + color 0.5s; } &.current { color: blue; cursor: default; display: inline-block; opacity: 1; - transition: opacity 1s, color .5s; + transition: + opacity 1s, + color 0.5s; } &::after { - content: " › "; + content: ' › '; color: purple; display: inline; - padding: .5rem .8rem; + padding: 0.5rem 0.8rem; } &.breadcrumbs__item { display: inline; @@ -165,11 +165,11 @@ body.scroll-locked-for-modal { display: none !important; } &.hide-after::after { - content: ""; - padding: 0 + content: ''; + padding: 0; } } - } // end .topnav + } // end .topnav .frames { background-color: $inverse; @@ -187,17 +187,16 @@ body.scroll-locked-for-modal { pointer-events: none; position: absolute; top: 0; - transition: left .25s; + transition: left 0.25s; width: 100% !important; @include media($med) { padding: 1em calc(33% + 3rem) 2em 0; // 33% to give room for the help content } - &.previous { left: -100%; - transition: left .25s; + transition: left 0.25s; * { pointer-events: none; user-select: none; @@ -213,11 +212,11 @@ body.scroll-locked-for-modal { display: block; // (only need to define this because .next.off-screen will jump to transition complete before animation can start) left: 0; pointer-events: all; - transition: left .5s; + transition: left 0.5s; } &.intro { text-align: center; - + @include media($med) { padding-right: 2em; } @@ -225,7 +224,7 @@ body.scroll-locked-for-modal { div { margin: 0 auto; max-width: 80%; - + @include media($med) { max-width: 66%; } @@ -252,10 +251,10 @@ body.scroll-locked-for-modal { cursor: default; } &.button--back.button--alt { - background-image: url("data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23212121%27%20width%3D%2212%22%20height%3D%2210%22%20viewBox%3D%220%200%2012%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M.418%203.809L6.652.124a.851.851%200%200%201%201.294.727v7.382a.852.852%200%200%201-1.284.733L.418%205.276a.852.852%200%200%201%200-1.467z%22%2F%3E%3C%2Fsvg%3E"); + background-image: url('data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23212121%27%20width%3D%2212%22%20height%3D%2210%22%20viewBox%3D%220%200%2012%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M.418%203.809L6.652.124a.851.851%200%200%201%201.294.727v7.382a.852.852%200%200%201-1.284.733L.418%205.276a.852.852%200%200%201%200-1.467z%22%2F%3E%3C%2Fsvg%3E'); } &.tooltip__trigger { - margin: .5em 0 .5rem 1rem; + margin: 0.5em 0 0.5rem 1rem; position: relative; } &.tooltip__trigger + p { @@ -269,14 +268,13 @@ body.scroll-locked-for-modal { } // buttons inside #help #help + div > button { - margin-top: .5rem; // don't crop off the top of the focus highlight + margin-top: 0.5rem; // don't crop off the top of the focus highlight @include media($med) { margin-bottom: 2rem; } } - .question-type-block { position: relative; display: inline-block; @@ -284,34 +282,34 @@ body.scroll-locked-for-modal { clear: both; } - [type="radio"]+label { + [type='radio'] + label { background-color: transparent; border-color: $inverse; float: left; - transition: border-color .5s; + transition: border-color 0.5s; } - [type="radio"]+label:hover { + [type='radio'] + label:hover { background-color: transparent; border-color: #aeb0b5; - transition: border-color .5s; + transition: border-color 0.5s; } - [type="radio"]:checked+label { + [type='radio']:checked + label { background-color: transparent; border: 1px solid #aeb0b5; - transition: border-color .5s; + transition: border-color 0.5s; } - [type="number"] { + [type='number'] { display: inline-block; float: left; - margin: 0 0 .5rem .25rem; + margin: 0 0 0.5rem 0.25rem; width: 15rem; } - [type="number"]+label { - display:inline-block; - padding: .4rem .8rem .4rem 1rem; + [type='number'] + label { + display: inline-block; + padding: 0.4rem 0.8rem 0.4rem 1rem; position: relative; } - [type="number"].indented { + [type='number'].indented { margin-left: 3.5rem; &.search__example { @@ -329,14 +327,14 @@ body.scroll-locked-for-modal { h4 { float: left; - margin-top: .5rem; - padding-right: .5rem; + margin-top: 0.5rem; + padding-right: 0.5rem; &.indented { font-size: 1.4rem; max-width: 70%; padding-left: 3.5rem; - padding-top: .5rem; + padding-top: 0.5rem; } &.subhead { text-transform: uppercase; @@ -364,7 +362,7 @@ body.scroll-locked-for-modal { font-size: 1.4rem; font-weight: bold; letter-spacing: -0.3px; - margin-top: .2rem; + margin-top: 0.2rem; text-transform: uppercase; } } @@ -392,10 +390,9 @@ body.scroll-locked-for-modal { font-weight: 700; letter-spacing: -0.3px; line-height: 1.8em; - margin-top: .2rem; + margin-top: 0.2rem; text-transform: uppercase; - span { display: block; font-size: 2.4rem; @@ -427,7 +424,7 @@ body.scroll-locked-for-modal { } #help { - background: url("data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23112e51%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%200a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2010%200zm1.2%2016.1a15.69%2015.69%200%200%201-2.4.3q-.9%200-.9-.6a9.32%209.32%200%200%201%20.2-1.4l.8-4.7a3.08%203.08%200%200%200%20.1-.9c0-.3-.4-.4-1.2-.4l.1-.5a14.22%2014.22%200%200%201%202.5-.3.61.61%200%200%201%20.7.6%2011.48%2011.48%200%200%201-.2%201.4l-.8%204.8a2.25%202.25%200%200%200-.1.7c0%20.4.2.5%201.2.5v.5zm-.5-10a1.15%201.15%200%200%201-1.2-1.2%201.35%201.35%200%200%201%201.3-1.4A1.22%201.22%200%200%201%2012%204.7a1.42%201.42%200%200%201-1.3%201.4z%22%2F%3E%3C%2Fsvg%3E"); + background: url('data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23112e51%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%200a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2010%200zm1.2%2016.1a15.69%2015.69%200%200%201-2.4.3q-.9%200-.9-.6a9.32%209.32%200%200%201%20.2-1.4l.8-4.7a3.08%203.08%200%200%200%20.1-.9c0-.3-.4-.4-1.2-.4l.1-.5a14.22%2014.22%200%200%201%202.5-.3.61.61%200%200%201%20.7.6%2011.48%2011.48%200%200%201-.2%201.4l-.8%204.8a2.25%202.25%200%200%200-.1.7c0%20.4.2.5%201.2.5v.5zm-.5-10a1.15%201.15%200%200%201-1.2-1.2%201.35%201.35%200%200%201%201.3-1.4A1.22%201.22%200%200%201%2012%204.7a1.42%201.42%200%200%201-1.3%201.4z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 1rem 1rem; background-color: $inverse; @@ -441,10 +438,10 @@ body.scroll-locked-for-modal { position: absolute; left: 1rem; top: 0; - transition: left .5s; + transition: left 0.5s; z-index: 100; width: calc(100% - 1rem); - + @include media($med) { background: $inverse; border: none; @@ -455,11 +452,11 @@ body.scroll-locked-for-modal { min-height: calc(100vh - 114px); padding: 1rem 0 0 calc(1rem + 20px); right: 0; - transition: right .5s; + transition: right 0.5s; width: calc(33% + 20px); &::before { - content: ""; + content: ''; display: block; border-left: 1px solid $federal-blue; width: 1px; @@ -475,7 +472,7 @@ body.scroll-locked-for-modal { margin-top: 0; margin-bottom: 1.2rem; } - + & > svg { display: none; @@ -483,7 +480,7 @@ body.scroll-locked-for-modal { display: block; } } - + h3 { line-height: 1.4em; padding-left: 4rem; @@ -514,7 +511,7 @@ body.scroll-locked-for-modal { display: none; } } - + .help_content { font-family: $sans-serif; font-size: 1.4rem; @@ -538,7 +535,7 @@ body.scroll-locked-for-modal { position: absolute; left: 0; top: 100px; - transition: top .33s; + transition: top 0.33s; } @include media($med) { @@ -550,7 +547,7 @@ body.scroll-locked-for-modal { right: auto; width: 4px; } - + .ps-scrollbar-y { background: $gray-dark; left: 0; @@ -562,12 +559,12 @@ body.scroll-locked-for-modal { &.hidden { left: 120%; - transition: left .5s; - + transition: left 0.5s; + @include media($med) { left: initial; right: -40%; - transition: right .5s; + transition: right 0.5s; } .filters__toggle { diff --git a/fec/fec/static/scss/components/_calendar.scss b/fec/fec/static/scss/components/_calendar.scss index a32799eba4..2f816f5bae 100644 --- a/fec/fec/static/scss/components/_calendar.scss +++ b/fec/fec/static/scss/components/_calendar.scss @@ -17,7 +17,7 @@ .fc-day { font-weight: bold; - padding: u(.7rem 1rem 0 2rem); + padding: u(0.7rem 1rem 0 2rem); } } @@ -70,11 +70,11 @@ .fc-next-button { margin-right: 1px; text-indent: -9999px; - padding: u(.8rem 1rem); + padding: u(0.8rem 1rem); &::after { - left: u(.5rem); - right: u(.5rem); + left: u(0.5rem); + right: u(0.5rem); } } } @@ -108,7 +108,7 @@ .fc-day-header { color: $primary; font-weight: normal; - padding-top: u(.5rem); + padding-top: u(0.5rem); } .fc-content-skeleton { @@ -122,7 +122,7 @@ .fc-other-month { &.fc-day-top, &.fc-day { - opacity: .5; + opacity: 0.5; } } @@ -144,7 +144,7 @@ border-bottom: none; color: $primary; font-weight: bold; - padding: u(.3rem 1rem); + padding: u(0.3rem 1rem); } .fc-day-number.fc-today { @@ -174,10 +174,10 @@ &::before { content: ''; display: block; - width: u(.6rem); - height: u(.6rem); + width: u(0.6rem); + height: u(0.6rem); background-color: $primary; - border-radius: u(.8rem); + border-radius: u(0.8rem); float: left; margin: 5px 5px 5px 0; } @@ -238,7 +238,7 @@ .cal__category { border-radius: 3px; - padding: u(.5rem); + padding: u(0.5rem); } // Event details @@ -296,14 +296,14 @@ .cal-details__date { display: block; - padding-bottom: u(.5rem); + padding-bottom: u(0.5rem); } .cal-details__title { display: block; font-weight: bold; line-height: 1.4; - padding-bottom: u(.5rem); + padding-bottom: u(0.5rem); } .cal-details__summary { @@ -316,13 +316,13 @@ .cal-details__description { display: block; line-height: 1.2; - padding-bottom: u(.5rem); + padding-bottom: u(0.5rem); } .cal-details__location { display: block; line-height: 1.2; - padding-bottom: u(.5rem); + padding-bottom: u(0.5rem); } .cal-details__add { @@ -387,11 +387,11 @@ .fc-agenda-view { .fc-bg { - display: none; // Temporary hack to remove mis-aligned background in agenda view + display: none; // Temporary hack to remove mis-aligned background in agenda view } .fc-axis { - padding: u(.5rem 1rem 0 1rem); + padding: u(0.5rem 1rem 0 1rem); text-align: right; vertical-align: middle; white-space: nowrap; @@ -415,16 +415,16 @@ .cal-list__toggles { float: left; font-family: $sans-serif; - padding-top: u(.5rem); + padding-top: u(0.5rem); } .cal-list { - letter-spacing: -.3px; + letter-spacing: -0.3px; } .cal-list__title { background-color: $gray-light; - border-left: .5rem solid $primary; + border-left: 0.5rem solid $primary; font-family: $sans-serif; letter-spacing: 0; margin: u(2rem 0 0 0); @@ -459,7 +459,7 @@ display: block; font-weight: bold; line-height: 1.2; - margin: 0 0 .5rem; + margin: 0 0 0.5rem; } .cal-list__date { @@ -490,14 +490,14 @@ border: 1px solid; border-color: $primary; font-size: u(1.4rem); - padding: u(.5rem); + padding: u(0.5rem); border-radius: 3px; @include clearfix; .tooltip__trigger-text { border-right: 1px solid $primary; display: table-cell; - padding-right: .5rem; + padding-right: 0.5rem; line-height: 1.2; vertical-align: middle; } @@ -505,7 +505,7 @@ .tooltip__container { display: table-cell; vertical-align: middle; - padding-left: .5rem; + padding-left: 0.5rem; } .list--bulleted li:last-child { @@ -530,7 +530,7 @@ .fc-header { background: $neutral; - padding: u(3px .5rem); + padding: u(3px 0.5rem); @include clearfix; .fc-title { @@ -548,11 +548,11 @@ } .fc-event-container { - padding: u(.5rem); + padding: u(0.5rem); } .fc-content { - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); } } diff --git a/fec/fec/static/scss/components/_callouts.scss b/fec/fec/static/scss/components/_callouts.scss index b7c86cd2c5..5eb10c7b12 100644 --- a/fec/fec/static/scss/components/_callouts.scss +++ b/fec/fec/static/scss/components/_callouts.scss @@ -46,7 +46,7 @@ .callout__title { font-weight: bold; - margin: u(0 0 .5rem 0); + margin: u(0 0 0.5rem 0); } .callout__subtitle { @@ -60,11 +60,11 @@ .callout__sublinks { font-family: $sans-serif; - letter-spacing: -.3px; + letter-spacing: -0.3px; } // BREAKPOINT: MEDIUM -@include media($med){ +@include media($med) { .callout__content { @include span-columns(4 of 6); } diff --git a/fec/fec/static/scss/components/_cards.scss b/fec/fec/static/scss/components/_cards.scss index 137f917b74..7c3863fc76 100644 --- a/fec/fec/static/scss/components/_cards.scss +++ b/fec/fec/static/scss/components/_cards.scss @@ -112,7 +112,7 @@ font-family: $sans-serif; font-weight: normal; line-height: 1.2; - letter-spacing: -.3px; + letter-spacing: -0.3px; clear: both; } @@ -184,7 +184,6 @@ } @include media($lg) { - .card__image__container { border-radius: 4px 0 0 4px; padding: u(3rem); @@ -262,7 +261,6 @@ &:focus { border: 2px solid $focus; } - } // Stacked cards, when there's more than one in a vertical column @@ -273,7 +271,7 @@ // For lists of links, such as on data landing page cards .card__links { - letter-spacing: -.3px; + letter-spacing: -0.3px; font-family: $sans-serif; font-weight: normal; margin-bottom: u(2rem); @@ -316,7 +314,7 @@ .card--primary { @include u-bg--primary; @include u-font-color($gray-lightest); - + & { border: 2px solid transparent; font-weight: bold; @@ -489,7 +487,7 @@ @include u-bg--secondary; @include u-font-color($gray-lightest); - + &:hover { background-color: $deep-red; border: 2px solid $orange; @@ -564,7 +562,6 @@ } } - // Major cards // Style used when the cards are the primary feature of a layout, // such as the "Reports about the FEC" landing page. @@ -575,7 +572,7 @@ display: block; padding: u(2rem 1.5rem); position: relative; - transition: border-top-color .2s ease-out; + transition: border-top-color 0.2s ease-out; @include media($med) { min-height: u(20rem); diff --git a/fec/fec/static/scss/components/_charts.scss b/fec/fec/static/scss/components/_charts.scss index ebcf87a6f1..55951d027a 100644 --- a/fec/fec/static/scss/components/_charts.scss +++ b/fec/fec/static/scss/components/_charts.scss @@ -122,7 +122,7 @@ .snapshot__item { font-family: $sans-serif; font-size: u(1.4rem); - padding: u(.5rem 0); + padding: u(0.5rem 0); border-bottom: 1px solid $gray-light; } @@ -175,7 +175,7 @@ font-family: $sans-serif; font-size: u(1.3rem); font-weight: bold; - padding: u(.8rem 0); + padding: u(0.8rem 0); margin: 0; } @@ -204,7 +204,7 @@ font-family: $sans-serif; font-size: u(1.3rem); font-weight: bold; - padding: u(.8rem 0); + padding: u(0.8rem 0); margin: 0; } @@ -225,7 +225,7 @@ width: 1em; height: 1em; border-radius: 1em; - margin-right: .4em; + margin-right: 0.4em; vertical-align: middle; &.candidates { diff --git a/fec/fec/static/scss/components/_committee-snapshot.scss b/fec/fec/static/scss/components/_committee-snapshot.scss index 8ab6e8e9be..3f63d206ad 100644 --- a/fec/fec/static/scss/components/_committee-snapshot.scss +++ b/fec/fec/static/scss/components/_committee-snapshot.scss @@ -1,9 +1,9 @@ #committee-snapshot { -// .tag__category { -// border-bottom-color: #112e51; -// border-bottom-style: solid; -// border-bottom-width: 2px 0; -// } + // .tag__category { + // border-bottom-color: #112e51; + // border-bottom-style: solid; + // border-bottom-width: 2px 0; + // } .footer-methodology { border-top: 1px solid; padding-top: 1em; @@ -13,7 +13,7 @@ } p { margin-bottom: 1em; - + @include media($med) { margin-bottom: 0; } @@ -43,7 +43,7 @@ border-right: 1px solid; margin-right: 10px; padding-right: 10px; - } + } } } > span { @@ -118,7 +118,7 @@ line-height: 1.25em; text-align: left; width: 66.6%; - + @include media($med) { margin-bottom: 1em; padding: 0 1em; @@ -151,7 +151,7 @@ margin-left: 0; margin-right: 0; width: 50%; - + &:first-child { border-right: 1px solid $gray-light; } @@ -159,7 +159,7 @@ } &::after { - content: ""; + content: ''; display: block; position: absolute; background: $gray-light; @@ -176,11 +176,11 @@ height: 100%; @include media($med) { - width: 100% + width: 100%; } .center { - fill: $inverse + fill: $inverse; } .ring { fill: transparent; diff --git a/fec/fec/static/scss/components/_contact-form.scss b/fec/fec/static/scss/components/_contact-form.scss index 401657c9ec..20d26abb31 100644 --- a/fec/fec/static/scss/components/_contact-form.scss +++ b/fec/fec/static/scss/components/_contact-form.scss @@ -34,7 +34,7 @@ .errorlist { font-family: $sans-serif; - margin-top: u(.5rem); + margin-top: u(0.5rem); li { color: $error; @@ -42,7 +42,6 @@ } @include media($med) { - input, select { @include span-columns(6 of 7); @@ -53,28 +52,33 @@ } } - - input.invalid_border, select.invalid_border, textarea.invalid_border, checkbox.invalid_border, label.invalid_border { + input.invalid_border, + select.invalid_border, + textarea.invalid_border, + checkbox.invalid_border, + label.invalid_border { border-color: $error !important; } - - input:focus:invalid, select:focus:invalid, textarea:focus:invalid, label:focus:invalid { + input:focus:invalid, + select:focus:invalid, + textarea:focus:invalid, + label:focus:invalid { outline: none; } span.error { - display:inline-block; + display: inline-block; color: $error; } #checkbox_error { display: block; } - + .error_box { font-family: $serif; - + ul { text-indent: u(1.6rem); margin-bottom: u(1rem); diff --git a/fec/fec/static/scss/components/_contact-items.scss b/fec/fec/static/scss/components/_contact-items.scss index 841fc58dec..a2a27540ff 100644 --- a/fec/fec/static/scss/components/_contact-items.scss +++ b/fec/fec/static/scss/components/_contact-items.scss @@ -42,7 +42,7 @@ } .contact-item__title { - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); margin-top: 0; } @@ -115,7 +115,7 @@ .address span { display: block; - margin-bottom: u(.8rem); + margin-bottom: u(0.8rem); } .grid__item { @@ -125,17 +125,14 @@ } } - - // For FEC-Offices pages contact items where icon is stacked with other items and label is sans-serif .offices-contact { - - .contact-item:not(.contact-item--half)::before{ + .contact-item:not(.contact-item--half)::before { display: block; margin-bottom: u(1.5rem); } - + .contact-item__content { display: block; } @@ -143,6 +140,6 @@ .contact-item__label { text-transform: uppercase; font-size: u(1.8rem); - font-family: Karla,sans-serif; + font-family: Karla, sans-serif; } } diff --git a/fec/fec/static/scss/components/_cycle-select.scss b/fec/fec/static/scss/components/_cycle-select.scss index a23fb600c8..525d8f52a6 100644 --- a/fec/fec/static/scss/components/_cycle-select.scss +++ b/fec/fec/static/scss/components/_cycle-select.scss @@ -33,7 +33,7 @@ clear: both; .button { - padding: u(.9rem 1rem); + padding: u(0.9rem 1rem); } } } diff --git a/fec/fec/static/scss/components/_data-container.scss b/fec/fec/static/scss/components/_data-container.scss index 42f77839e8..c7770b0ab8 100644 --- a/fec/fec/static/scss/components/_data-container.scss +++ b/fec/fec/static/scss/components/_data-container.scss @@ -75,7 +75,7 @@ .panel__controls { clear: both; - padding-top: u(.5rem); + padding-top: u(0.5rem); @include clearfix; } @@ -170,15 +170,14 @@ } } - //Responsive behavior for datatables in tab pannels on profile pages (committee, candidate, election) @media screen and (width <= 940px) { .data-container__wrapper .main__content--right-full { - display: block - } + display: block; + } .data-container__wrapper .side-nav-alt { display: block; - width:auto; + width: auto; } } diff --git a/fec/fec/static/scss/components/_data-landing-callouts.scss b/fec/fec/static/scss/components/_data-landing-callouts.scss index f4e99d8b8c..4dc34099bc 100644 --- a/fec/fec/static/scss/components/_data-landing-callouts.scss +++ b/fec/fec/static/scss/components/_data-landing-callouts.scss @@ -5,12 +5,12 @@ // @include media($med) { - .callout-holder .grid__item { - width: 100%; // We want them full-width until we get to $lg - } + .callout-holder .grid__item { + width: 100%; // We want them full-width until we get to $lg + } } @include media($lg) { - .callout-holder .grid__item { - width: 48.82117%; // borrowed from the grid__item definition in the framework - } + .callout-holder .grid__item { + width: 48.82117%; // borrowed from the grid__item definition in the framework + } } diff --git a/fec/fec/static/scss/components/_datatable-panel.scss b/fec/fec/static/scss/components/_datatable-panel.scss index e8640ead76..040701362c 100644 --- a/fec/fec/static/scss/components/_datatable-panel.scss +++ b/fec/fec/static/scss/components/_datatable-panel.scss @@ -17,7 +17,6 @@ .results-info { position: relative; - } // modal @@ -28,7 +27,7 @@ float: right; width: 50%; opacity: 0; - @include transition(opacity .2s); + @include transition(opacity 0.2s); } // Open panel @@ -59,7 +58,7 @@ } .panel { - background-color: rgba($gray-lightest, .3); + background-color: rgba($gray-lightest, 0.3); border: 1px solid $gray-lightest; font-family: $sans-serif; padding: u(1rem); @@ -82,7 +81,7 @@ .panel__title { font-weight: bold; - letter-spacing: -.3px; + letter-spacing: -0.3px; margin-top: u(1rem); } @@ -101,7 +100,7 @@ .panel__term { font-weight: bold; - letter-spacing: -.3px; + letter-spacing: -0.3px; line-height: 1.4em; padding-right: u(2rem); vertical-align: top; @@ -139,7 +138,7 @@ @include u-icon-bg($arrow-left-border, $primary); &::after { - content: "Show all"; + content: 'Show all'; } } @@ -162,14 +161,14 @@ } .panel__overlay { - background-color: rgba($gray-lightest, .3); + background-color: rgba($gray-lightest, 0.3); border-left: 1px solid $gray-lightest; min-height: 70vh; height: 100%; width: 50%; left: 100%; - &[aria-hidden="false"] { + &[aria-hidden='false'] { left: 50%; } } @@ -192,7 +191,7 @@ } .panel__navigation { - padding: u(.6rem 2rem); + padding: u(0.6rem 2rem); text-align: left; margin-bottom: 0; } @@ -213,7 +212,7 @@ } } -// Open panel + // Open panel .panel-active { .panel__main { @@ -261,7 +260,7 @@ td { border-bottom: 0; - padding: u(.3rem 0); + padding: u(0.3rem 0); white-space: pre-wrap; overflow: visible; @@ -279,7 +278,8 @@ padding-left: 0 !important; vertical-align: bottom; - &.panel__term, &.panel__data { + &.panel__term, + &.panel__data { vertical-align: top; } } diff --git a/fec/fec/static/scss/components/_datatables.scss b/fec/fec/static/scss/components/_datatables.scss index 43b6b7235d..31de564018 100644 --- a/fec/fec/static/scss/components/_datatables.scss +++ b/fec/fec/static/scss/components/_datatables.scss @@ -134,7 +134,7 @@ @include media($med) { max-width: max(9em, 30vw); } - + @include media($lg) { max-width: max(13em, 20vw); } @@ -293,10 +293,11 @@ } } -.is-active-status, .is-terminated-status { +.is-active-status, +.is-terminated-status { margin-left: u(1.5rem); position: relative; - + &::before { border-radius: u(1rem); content: ''; @@ -310,10 +311,10 @@ } } -.is-active-status::before{ +.is-active-status::before { background-color: $green-light; } -.is-terminated-status::before{ +.is-terminated-status::before { background-color: $gray; } diff --git a/fec/fec/static/scss/components/_date-grid.scss b/fec/fec/static/scss/components/_date-grid.scss index d385f3936e..3fa19a3b5e 100644 --- a/fec/fec/static/scss/components/_date-grid.scss +++ b/fec/fec/static/scss/components/_date-grid.scss @@ -29,7 +29,6 @@ @include clearfix; &:not(.is-invalid) { - &.pick-min li:hover div { border-top-left-radius: u(1.5rem); border-bottom-left-radius: u(1.5rem); @@ -68,12 +67,12 @@ width: 35px; font-size: u(1.2rem); text-align: center; - padding: u(0 0 .2rem .1rem); + padding: u(0 0 0.2rem 0.1rem); float: left; div { background-color: $gray; - padding: u(.75rem .5rem); + padding: u(0.75rem 0.5rem); } &.month--begin div { diff --git a/fec/fec/static/scss/components/_downloads.scss b/fec/fec/static/scss/components/_downloads.scss index 0520a006fa..cb530e4727 100644 --- a/fec/fec/static/scss/components/_downloads.scss +++ b/fec/fec/static/scss/components/_downloads.scss @@ -47,14 +47,14 @@ &.is-pending { background-image: url('../img/loading-ellipsis.gif'); - background-position: u(0 .4rem); + background-position: u(0 0.4rem); background-repeat: no-repeat; background-size: u(2rem); } &.is-complete { background-size: u(2rem); - background-position: u(0 .5rem); + background-position: u(0 0.5rem); @include u-icon-bg($check, $primary); } } @@ -62,12 +62,12 @@ .download__name { display: block; font-weight: bold; - padding: u(.5rem 0); + padding: u(0.5rem 0); @include u-truncate; } .download__button { - padding: u(.5rem); + padding: u(0.5rem); } .download__cancel { @@ -76,7 +76,7 @@ } .download__message { - letter-spacing: -.3px; + letter-spacing: -0.3px; font-size: u(1.4rem); margin: 0; } diff --git a/fec/fec/static/scss/components/_dropdowns.scss b/fec/fec/static/scss/components/_dropdowns.scss index 75c881c554..16318de418 100644 --- a/fec/fec/static/scss/components/_dropdowns.scss +++ b/fec/fec/static/scss/components/_dropdowns.scss @@ -37,7 +37,7 @@ padding: u(1rem 2rem 1rem 1rem); position: absolute; right: u(1.5rem); - top: u(.5rem); + top: u(0.5rem); @include u-icon-bg($arrow-down, $primary); } @@ -73,8 +73,8 @@ .dropdown__button--mini { &::after { - padding: u(1rem .5rem 1rem 1.5rem); - right: u(.5rem); + padding: u(1rem 0.5rem 1rem 1.5rem); + right: u(0.5rem); } & + .dropdown__panel { @@ -102,7 +102,7 @@ color: $base; display: block; margin: 0; - padding: u(.5rem 1rem .5rem 1.5rem); + padding: u(0.5rem 1rem 0.5rem 1.5rem); max-width: 100%; white-space: nowrap; @@ -121,7 +121,7 @@ border: 1px solid $gray; display: block; font-size: u(1.4rem); - padding: u(.5rem 1rem .5rem 1.5rem); + padding: u(0.5rem 1rem 0.5rem 1.5rem); text-align: left; width: 100%; @@ -131,7 +131,7 @@ &.is-checked { background-color: $gray-light; - background-position: right u(.5rem) top 50%; + background-position: right u(0.5rem) top 50%; padding-right: u(1.5rem); cursor: default; @include u-icon-bg($check, $gray); @@ -151,7 +151,7 @@ border-bottom: 1px solid $gray-dark; font-size: u(1.4rem); font-weight: bold; - padding-left: u(.75rem); + padding-left: u(0.75rem); &:hover { background-color: $inverse; @@ -173,18 +173,22 @@ } .dropdown__selected { - margin: u(.5rem 0); + margin: u(0.5rem 0); li { position: relative; - @include animation(fadeIn .2s ease-in); + @include animation(fadeIn 0.2s ease-in); &:hover { - input[type="checkbox"]:not(:checked) + label:not(.is-loading) + .dropdown__remove { + input[type='checkbox']:not(:checked) + + label:not(.is-loading) + + .dropdown__remove { display: inline-block; } - input[type="checkbox"]:not(:checked) + label.is-unsuccessful + .dropdown__remove { + input[type='checkbox']:not(:checked) + + label.is-unsuccessful + + .dropdown__remove { display: none; } } @@ -194,13 +198,13 @@ margin-left: 0; } - [type="checkbox"] + label { + [type='checkbox'] + label { max-width: min(18em, 90%); word-wrap: break-word; } .dropdown__remove { - background-position: u(.75rem) 50%; + background-position: u(0.75rem) 50%; background-size: 18px; display: none; top: 0; diff --git a/fec/fec/static/scss/components/_entity-header.scss b/fec/fec/static/scss/components/_entity-header.scss index f0345ead3b..179304bcfa 100644 --- a/fec/fec/static/scss/components/_entity-header.scss +++ b/fec/fec/static/scss/components/_entity-header.scss @@ -44,7 +44,7 @@ } .entity__header__top { - padding-bottom: u(.5rem); + padding-bottom: u(0.5rem); } .entity__header__bottom { @@ -70,7 +70,7 @@ border-bottom: 2px solid; border-top: 2px solid; font-family: $sans-serif; - letter-spacing: -.3px; + letter-spacing: -0.3px; padding: u(1rem 0); width: 100%; @include clearfix; @@ -147,7 +147,7 @@ .entity__info, .entity__type { border-color: $primary; - + &:last-of-type { border-right: none; } diff --git a/fec/fec/static/scss/components/_examples.scss b/fec/fec/static/scss/components/_examples.scss index 317182de83..9b0d018508 100644 --- a/fec/fec/static/scss/components/_examples.scss +++ b/fec/fec/static/scss/components/_examples.scss @@ -17,7 +17,7 @@ .example { border-left: 10px solid $gray-lightest; font-family: $sans-serif; - letter-spacing: -.3px; + letter-spacing: -0.3px; padding: u(1rem 0 1rem 2rem); margin: u(0 0 2.6rem 2rem); @@ -29,7 +29,7 @@ .example__thumbnail { border-bottom: none; display: inline-block; - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); img { box-shadow: 0 0 8px rgb(0 0 0 / 20%); @@ -76,16 +76,13 @@ @include span-columns(8); } - - - .example__caption { width: 100%; font-family: $serif; font-style: italic; display: inline-block; margin-top: u(2rem); - + @include media($med) { margin-top: 0; @include span-columns(4); diff --git a/fec/fec/static/scss/components/_fec-offices.scss b/fec/fec/static/scss/components/_fec-offices.scss index 947e12464d..b741a4f2fa 100644 --- a/fec/fec/static/scss/components/_fec-offices.scss +++ b/fec/fec/static/scss/components/_fec-offices.scss @@ -1,9 +1,9 @@ -// FEC Offices +// FEC Offices // // Employee block // //
-//
+//
// Headshot of {{ block.value.employee.employee_name }} //
//
@@ -19,28 +19,29 @@ //Mobile first .office-employee--section { - .grid__item.employee-bio { - width: 100%; - } + .grid__item.employee-bio { + width: 100%; + } //Large Breakpoint - @include media($lg){ + @include media($lg) { display: flex; - + .grid__item.employee-photo { - flex-basis: 25% ; - } + flex-basis: 25%; + } .grid__item.employee-bio { flex-basis: 75%; - } + } } } -.employee_name, .employee_title { +.employee_name, +.employee_title { font-size: 1.8rem; - font-family: Karla,sans-serif; - letter-spacing: -.3px; + font-family: Karla, sans-serif; + letter-spacing: -0.3px; } .employee_name { @@ -53,6 +54,8 @@ } //So if first office has its own h2, there is no double line - header.heading--main.offices-heading--main + .main__content--full h2.office-title { - border-top: none - } +header.heading--main.offices-heading--main + + .main__content--full + h2.office-title { + border-top: none; +} diff --git a/fec/fec/static/scss/components/_fec-org-chart.scss b/fec/fec/static/scss/components/_fec-org-chart.scss index 3ab49515b3..1a9722dace 100644 --- a/fec/fec/static/scss/components/_fec-org-chart.scss +++ b/fec/fec/static/scss/components/_fec-org-chart.scss @@ -28,25 +28,25 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; position: relative; width: 100%; - & + li { // all li after another li + & + li { + // all li after another li padding-top: $orgChart_gutterSize; } &::before { // top half of left-side line, including the horizontal line in the middle border-left: $orgChart_lineSolidDark; border-bottom: $orgChart_lineSolidDark; - content: ""; + content: ''; height: 50%; left: 0; position: absolute; top: 0; width: 10px; - } &::after { // bottom half of left-side line border-left: $orgChart_lineSolidDark; - content: ""; + content: ''; height: 50%; left: 0; position: absolute; @@ -73,13 +73,13 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; padding: 1rem; position: relative; text-align: center; - transition: border-color .1s; + transition: border-color 0.1s; &:hover { border-color: $orgChart_colorGreyHover; - transition: border-color .25s; + transition: border-color 0.25s; } - &:not([href*="/"]) { + &:not([href*='/']) { // if the link doesn't contain a slash (e.g. if it's blank), let's remove its clicks/taps pointer-events: none; } @@ -91,7 +91,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; &:first-child { font-size: 14px; font-weight: bold; - margin-bottom: .1em; + margin-bottom: 0.1em; } &:nth-child(2) { font-family: Karla, sans-serif; @@ -106,7 +106,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; padding-bottom: $orgChart_gutterSize * 2; &::before { - content: ""; + content: ''; border-bottom: none; border-left: $orgChart_lineSolidDark; border-right: none; @@ -129,7 +129,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; } // for links that are direct descendants of the li.team, these are the team leads &.team > a::before { - content: ""; + content: ''; position: absolute; left: calc(-#{$orgChart_gutterSize} - 1px); border-left: $orgChart_lineSolidDark; @@ -149,7 +149,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; &::before { border-left: $orgChart_lineSolidDark; - content: ""; + content: ''; display: block; height: 50%; position: absolute; @@ -172,7 +172,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; padding: 0 $orgChart_gutterSize #{$orgChart_gutterSize * 2}; &::before { - content: ""; + content: ''; border-bottom: none; border-left: $orgChart_lineSolidDark; border-right: none; @@ -188,7 +188,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; border-left: none; border-right: $orgChart_lineDashed; border-top: $orgChart_lineDashed; - content: ""; + content: ''; display: block; height: calc(50% + #{$orgChart_gutterSize + 1}); left: auto; @@ -206,7 +206,8 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; } &.team-ig { float: right; - padding: $orgChart_gutterSize $orgChart_gutterSize #{$orgChart_gutterSize * 2} #{$orgChart_gutterSize * 2}; + padding: $orgChart_gutterSize $orgChart_gutterSize #{$orgChart_gutterSize * + 2} #{$orgChart_gutterSize * 2}; &::before { border-bottom: none; @@ -222,7 +223,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; border-right: $orgChart_lineDashed; border-top: none; bottom: 50%; - content: ""; + content: ''; height: calc(50% + #{$orgChart_gutterSize}); position: absolute; left: auto; @@ -263,8 +264,8 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; #fec-orgchart { display: grid; grid-template-areas: - "comms comms comms comms ig" - "1fr 1fr 1fr 1fr ig"; + 'comms comms comms comms ig' + '1fr 1fr 1fr 1fr ig'; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto; grid-row-gap: 0; @@ -313,7 +314,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; } &::before { - content: ""; + content: ''; border-bottom: none; border-right: $orgChart_lineSolid; border-left: none; @@ -327,7 +328,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; &::after { border-left: none; border-top: $orgChart_lineSolid; - content: ""; + content: ''; height: $orgChart_gutterSize; left: 50%; position: absolute; @@ -342,7 +343,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; &::before { // From comms to the teams - content: ""; + content: ''; border-bottom: none; border-right: $orgChart_lineSolid; border-left: none; @@ -360,7 +361,7 @@ $orgChart_lineSolidDark: thin solid $orgChart_colorStandard; border-left: none; border-right: none; border-top: $orgChart_lineDashed; - content: ""; + content: ''; display: block; height: calc(50% - #{$orgChart_gutterSize}); left: calc(100% - #{$orgChart_gutterSize}); diff --git a/fec/fec/static/scss/components/_feedback.scss b/fec/fec/static/scss/components/_feedback.scss index a142234b68..3134412e8e 100644 --- a/fec/fec/static/scss/components/_feedback.scss +++ b/fec/fec/static/scss/components/_feedback.scss @@ -5,15 +5,15 @@ .feedback { background-color: $gray-lightest; - bottom: u(.5rem); + bottom: u(0.5rem); color: $base; display: block; - left: u(.5rem); + left: u(0.5rem); overflow-y: scroll; - padding: u(2rem .5rem 8rem .5rem); + padding: u(2rem 0.5rem 8rem 0.5rem); position: fixed; - right: u(.5rem); - top: u(.5rem); + right: u(0.5rem); + top: u(0.5rem); z-index: $z-feedback; legend { @@ -22,7 +22,7 @@ label { line-height: 1.2em; - + & > .label--help { display: inline-block; font-weight: normal; @@ -78,7 +78,7 @@ right: u(4rem); top: 5vh; width: u(52rem); - @include transition(top .5s); + @include transition(top 0.5s); &[aria-hidden='true'] { display: block !important; @@ -106,7 +106,7 @@ } .feedback__title { - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); @include heading(h2); } diff --git a/fec/fec/static/scss/components/_figures.scss b/fec/fec/static/scss/components/_figures.scss index e34f73a93f..64d1150687 100644 --- a/fec/fec/static/scss/components/_figures.scss +++ b/fec/fec/static/scss/components/_figures.scss @@ -33,7 +33,7 @@ font-weight: normal; letter-spacing: 3px; - &[aria-hidden="true"] { + &[aria-hidden='true'] { display: inline !important; } } @@ -52,7 +52,7 @@ .figure__label, .figure__value { font-size: u(1.6rem); - padding: u(.5rem); + padding: u(0.5rem); vertical-align: top; } diff --git a/fec/fec/static/scss/components/_filters.scss b/fec/fec/static/scss/components/_filters.scss index d7b9bbc2b0..aa3f9a4e41 100644 --- a/fec/fec/static/scss/components/_filters.scss +++ b/fec/fec/static/scss/components/_filters.scss @@ -93,7 +93,7 @@ $filter-button-width: u(4.6rem); background-size: u(2rem); right: u(-3rem); opacity: 1; - @include animation(fadeIn .8s ease-out); + @include animation(fadeIn 0.8s ease-out); } } @@ -127,10 +127,10 @@ $filter-button-width: u(4.6rem); width: 100%; overflow: visible; left: -800px; - @include transition(left .2s ease-in-out); + @include transition(left 0.2s ease-in-out); @include u-bg--neutral; - &[aria-hidden="true"] { + &[aria-hidden='true'] { display: block !important; } } @@ -187,7 +187,7 @@ $filter-button-width: u(4.6rem); .filter { border-bottom: 1px solid darken($neutral, 10%); margin-top: u(1.5rem); - padding-bottom: u(.5rem); + padding-bottom: u(0.5rem); &:first-child { margin-top: 0; @@ -243,7 +243,7 @@ $filter-button-width: u(4.6rem); max-width: 26rem; } - [type="text"], + [type='text'], select, .dropdown__button { margin-bottom: u(1rem); @@ -253,7 +253,8 @@ $filter-button-width: u(4.6rem); border-left: 3px solid $gray; padding-left: 5%; - select, input { + select, + input { width: 100%; } } @@ -264,7 +265,7 @@ $filter-button-width: u(4.6rem); font-family: $sans-serif; font-size: u(1.2rem); line-height: 1; - padding: u(.5rem); + padding: u(0.5rem); } .filter__message { @@ -342,7 +343,7 @@ $filter-button-width: u(4.6rem); display: block; } } - + & + .content__section { width: calc(100% - 30rem); } @@ -366,7 +367,7 @@ $filter-button-width: u(4.6rem); overflow: visible; @include transition(unset); - &[aria-hidden="true"] { + &[aria-hidden='true'] { display: none !important; } } @@ -414,7 +415,7 @@ $filter-button-width: u(4.6rem); } .filter--wide { - max-width: 50%; + max-width: 50%; } } } @@ -437,7 +438,7 @@ $filter-button-width: u(4.6rem); p { font-size: u(1.2rem); font-family: $sans-serif; - letter-spacing: -.3px; + letter-spacing: -0.3px; margin: 0; } } diff --git a/fec/fec/static/scss/components/_footer.scss b/fec/fec/static/scss/components/_footer.scss index 04d118ca55..5e91f95947 100644 --- a/fec/fec/static/scss/components/_footer.scss +++ b/fec/fec/static/scss/components/_footer.scss @@ -20,7 +20,7 @@ li { font-size: u(1.6rem); line-height: u(1.9rem); - padding: (.75rem 0); + padding: (0.75rem 0); position: relative; } @@ -35,7 +35,7 @@ } // override clear because of first empty column - &:nth-child(2n+1) { + &:nth-child(2n + 1) { clear: none; } } @@ -49,9 +49,9 @@ @include media($lg) { .grid--6-wide .grid__item { @include span-columns(2); - - &:nth-child(2), - &:nth-child(3) { + + &:nth-child(2), + &:nth-child(3) { display: block; } } @@ -137,7 +137,7 @@ p { font-family: $sans-serif; font-size: u(1.4rem); - letter-spacing: -.3px; + letter-spacing: -0.3px; color: $base; } } diff --git a/fec/fec/static/scss/components/_form-styles.scss b/fec/fec/static/scss/components/_form-styles.scss index 2b3c82e11c..707f5e41aa 100644 --- a/fec/fec/static/scss/components/_form-styles.scss +++ b/fec/fec/static/scss/components/_form-styles.scss @@ -59,7 +59,7 @@ &:active:not(.is-disabled, [disabled]), &:focus, &.is-active { - background-color: rgba($inverse, .3); + background-color: rgba($inverse, 0.3); border-color: $primary-contrast; color: $inverse; } @@ -67,7 +67,7 @@ option { background-color: $neutral; color: $primary; - padding: u(.5rem); + padding: u(0.5rem); } } @@ -84,7 +84,7 @@ &:active:not(.is-disabled, [disabled]), &:focus, &.is-active { - background-color: rgba($inverse, .3); + background-color: rgba($inverse, 0.3); border-color: $secondary-contrast; color: $inverse; } @@ -96,7 +96,7 @@ option { background-color: $neutral; color: $primary; - padding: u(.5rem); + padding: u(0.5rem); } } @@ -112,7 +112,7 @@ font-family: $sans-serif; font-size: u(1.4rem); font-weight: bold; - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); padding: 0; text-transform: uppercase; @@ -127,14 +127,14 @@ display: block; font-family: $sans-serif; font-style: italic; - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); } .label--help--filter { display: block; font-family: $sans-serif; - margin-bottom: u(.5rem); - letter-spacing: -.3px; + margin-bottom: u(0.5rem); + letter-spacing: -0.3px; font-size: u(1.2rem); line-height: 1.8 !important; } @@ -219,8 +219,8 @@ padding-left: u(2.5rem); } -[type="checkbox"]:checked + label, -[type="radio"]:checked + label { +[type='checkbox']:checked + label, +[type='radio']:checked + label { &.is-successful { border: 1px solid $green-light; } @@ -243,7 +243,7 @@ height: u(3.6rem); background-position: right 50% top 50%; padding: u(1.25rem 1.5rem); - margin-left: u(.25rem); + margin-left: u(0.25rem); vertical-align: bottom; &.is-loading { @@ -264,7 +264,7 @@ .range--currency { .range__input { - input[type="text"] { + input[type='text'] { padding-left: u(2rem); text-align: right; } @@ -287,21 +287,21 @@ position: relative; label { - padding-bottom: u(.3rem); + padding-bottom: u(0.3rem); } - input[type="text"] { + input[type='text'] { margin-bottom: 0; } - input[type="text"], + input[type='text'], button { display: inline-block; } } .range__hyphen { - padding: u(0 .25rem 1rem .25rem); + padding: u(0 0.25rem 1rem 0.25rem); vertical-align: bottom; display: inline-block; } @@ -322,6 +322,6 @@ } .is-disabled-filter { - opacity: .5; + opacity: 0.5; pointer-events: none; } diff --git a/fec/fec/static/scss/components/_glossary.scss b/fec/fec/static/scss/components/_glossary.scss index 2357f7f4c0..7c71d0f088 100644 --- a/fec/fec/static/scss/components/_glossary.scss +++ b/fec/fec/static/scss/components/_glossary.scss @@ -12,7 +12,7 @@ top: 0; width: 75%; z-index: $z-glossary; - @include transition(right, .3s); + @include transition(right, 0.3s); &[aria-hidden='true'] { display: block !important; @@ -21,7 +21,7 @@ &[aria-hidden='false'] { right: 0; - @include transition(right, .3s); + @include transition(right, 0.3s); } .button--close--inverse { @@ -45,7 +45,7 @@ .glossary__definition { font-family: $sans-serif; - letter-spacing: -.3px; + letter-spacing: -0.3px; ol { margin-left: 0; @@ -68,7 +68,6 @@ p { font-size: u(1.4rem); } - } .glossary__toggle { @@ -84,28 +83,28 @@ // standard class, adds the book icon .term { - background-size: .6em; + background-size: 0.6em; background-position: 99% 50%; background-color: transparent; box-shadow: 0 0 0 4px transparent; border-bottom: none; cursor: pointer; margin-right: 2px; - padding-right: .9em; + padding-right: 0.9em; @include u-icon-bg($book, $primary); - @include transition(background-color, .2s, box-shadow, .2s, color, .2s); + @include transition(background-color, 0.2s, box-shadow, 0.2s, color, 0.2s); &:focus, &:hover { - box-shadow: 0 0 0 4px rgba($gray, .7); - background-color: rgba($gray, .7); + box-shadow: 0 0 0 4px rgba($gray, 0.7); + background-color: rgba($gray, 0.7); color: $primary; } } // Used when the term is in a body paragaraph of text, reduces padding and adds margin .term--p { - margin-right: u(.5rem); + margin-right: u(0.5rem); box-shadow: none; } diff --git a/fec/fec/static/scss/components/_headings.scss b/fec/fec/static/scss/components/_headings.scss index 7b029431ef..449f09a8f9 100644 --- a/fec/fec/static/scss/components/_headings.scss +++ b/fec/fec/static/scss/components/_headings.scss @@ -52,7 +52,7 @@ .heading__subtitle { font-family: $sans-serif; font-weight: bold; - letter-spacing: -.3px; + letter-spacing: -0.3px; margin-bottom: u(1rem); text-transform: uppercase; } @@ -79,7 +79,9 @@ h2, h3, h4 { - line-height: u(3.4rem); // Setting explicit value to height of the action button for vertical alignment + line-height: u( + 3.4rem + ); // Setting explicit value to height of the action button for vertical alignment } .data-disclaimer { diff --git a/fec/fec/static/scss/components/_hero.scss b/fec/fec/static/scss/components/_hero.scss index 1f157886d8..0cc36f483f 100644 --- a/fec/fec/static/scss/components/_hero.scss +++ b/fec/fec/static/scss/components/_hero.scss @@ -69,7 +69,6 @@ } @include media($lg) { - h2 { margin-bottom: u(3rem); } @@ -150,7 +149,6 @@ } } - // Hero panel for the press section. .hero--press { .hero__image { @@ -185,13 +183,13 @@ } .photo-credit { - background: rgba($gray-lightest, .6); + background: rgba($gray-lightest, 0.6); font-size: u(1rem); font-family: $sans-serif; position: absolute; right: 0; bottom: 0; - padding: u(.5rem); + padding: u(0.5rem); } @include media($lg) { diff --git a/fec/fec/static/scss/components/_icon-headings.scss b/fec/fec/static/scss/components/_icon-headings.scss index 4810fe76cf..16863f6e68 100644 --- a/fec/fec/static/scss/components/_icon-headings.scss +++ b/fec/fec/static/scss/components/_icon-headings.scss @@ -46,7 +46,7 @@ } .icon-heading__content { - padding-left: u(.5rem); + padding-left: u(0.5rem); @include span-columns(8); } } @@ -67,8 +67,6 @@ padding-left: u(3rem); } - - .icon-heading--raising-circle { &::before { $size: u(4rem); @@ -145,7 +143,12 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($question-bubble, $inverse, $secondary-contrast, $size); + @include u-icon-circle( + $question-bubble, + $inverse, + $secondary-contrast, + $size + ); } } @@ -206,7 +209,12 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($subsection-doc, $inverse, $primary-contrast, 4.5rem); + @include u-icon-circle( + $subsection-doc, + $inverse, + $primary-contrast, + 4.5rem + ); } } @@ -216,16 +224,20 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($direction-sign, $inverse, $primary-contrast, 4.5rem); + @include u-icon-circle( + $direction-sign, + $inverse, + $primary-contrast, + 4.5rem + ); } - &.primary{ + &.primary { &::before { background-size: u(4rem); @include u-icon-circle($direction-sign, $primary, $inverse, 4.5rem); } } - } .icon-heading--shield-circle { @@ -246,7 +258,12 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($person-location, $inverse, $primary-contrast, $size); + @include u-icon-circle( + $person-location, + $inverse, + $primary-contrast, + $size + ); } } @@ -258,7 +275,12 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($individual-contributions, $inverse, $primary-contrast, $size); + @include u-icon-circle( + $individual-contributions, + $inverse, + $primary-contrast, + $size + ); } } @@ -270,7 +292,12 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($magnifying-glass, $inverse, $primary-contrast, $size); + @include u-icon-circle( + $magnifying-glass, + $inverse, + $primary-contrast, + $size + ); } } @@ -280,7 +307,12 @@ $size: u(4rem); background-size: u(1.8rem); - @include u-icon-circle($graph-horizontal-ordered, $primary, $inverse, $size); + @include u-icon-circle( + $graph-horizontal-ordered, + $primary, + $inverse, + $size + ); } } @@ -289,7 +321,12 @@ $size: u(4rem); background-size: u(1.8rem); - @include u-icon-circle($graph-horizontal-unordered, $primary, $inverse, $size); + @include u-icon-circle( + $graph-horizontal-unordered, + $primary, + $inverse, + $size + ); } } @@ -311,7 +348,7 @@ @include u-icon-circle($election, $inverse, $secondary-contrast, $size); } - &.primary{ + &.primary { &::before { background-size: 40%; @include u-icon-circle($election, $primary, $inverse, 4.5rem); @@ -327,10 +364,15 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($example-document, $inverse, $secondary-contrast, $size); + @include u-icon-circle( + $example-document, + $inverse, + $secondary-contrast, + $size + ); } - &.primary{ + &.primary { &::before { background-size: 40%; @include u-icon-circle($example-document, $primary, $inverse, 4.5rem); @@ -346,10 +388,15 @@ content: ''; float: left; margin-right: u(1.5rem); - @include u-icon-circle($financial-document, $inverse, $secondary-contrast, $size); + @include u-icon-circle( + $financial-document, + $inverse, + $secondary-contrast, + $size + ); } - &.primary{ + &.primary { &::before { background-size: 40%; @include u-icon-circle($financial-document, $primary, $inverse, 4.5rem); @@ -370,8 +417,7 @@ .icon-heading--direction-sign-circle, .icon-heading--election-circle, .icon-heading--example-document, -.icon-heading--financial-document - { +.icon-heading--financial-document { border-bottom: none; display: table; padding-bottom: u(1.3rem); @@ -380,7 +426,7 @@ line-height: 1.2; display: table-cell; vertical-align: middle; - color:inherit; + color: inherit; } &::before { diff --git a/fec/fec/static/scss/components/_icons.scss b/fec/fec/static/scss/components/_icons.scss index d0849f81fa..782fd9b670 100644 --- a/fec/fec/static/scss/components/_icons.scss +++ b/fec/fec/static/scss/components/_icons.scss @@ -59,8 +59,6 @@ &.i-play { @include u-icon-bg($play-button, $base); } - - } .icon--small { @@ -164,7 +162,7 @@ } .icon-circle--check-outline--inline--left { - margin-right: u(.5rem); + margin-right: u(0.5rem); display: inline-block; vertical-align: middle; @@ -176,7 +174,7 @@ } .icon-circle--clock-reverse--inline--left { - margin-right: u(.5rem); + margin-right: u(0.5rem); display: inline-block; vertical-align: middle; diff --git a/fec/fec/static/scss/components/_legal-search.scss b/fec/fec/static/scss/components/_legal-search.scss index bcd54819bb..b4a4d1c16b 100644 --- a/fec/fec/static/scss/components/_legal-search.scss +++ b/fec/fec/static/scss/components/_legal-search.scss @@ -44,7 +44,6 @@ } .legal-search-result__hit { - em { @include t-highlight; } @@ -122,7 +121,7 @@ .ao-result__title { background-color: $gray-light; - border-left: .5rem solid $primary; + border-left: 0.5rem solid $primary; font-family: $sans-serif; letter-spacing: 0; margin: u(2rem 0 0 0); diff --git a/fec/fec/static/scss/components/_list-styles.scss b/fec/fec/static/scss/components/_list-styles.scss index f854dcfc23..4cb31d4c2d 100644 --- a/fec/fec/static/scss/components/_list-styles.scss +++ b/fec/fec/static/scss/components/_list-styles.scss @@ -23,7 +23,7 @@ .list--bulleted--alt { li { margin-left: u(2rem); - padding: u(.5rem 0); + padding: u(0.5rem 0); font-size: u(1.6rem); &:last-child { @@ -31,7 +31,8 @@ } } - ul, ol { + ul, + ol { margin-left: u(1.5rem); li:last-of-type { @@ -50,7 +51,6 @@ } .list--numbered { - & > li { list-style-type: decimal; } @@ -118,7 +118,7 @@ } .list--flat-bordered { - padding-bottom: u(.5rem); + padding-bottom: u(0.5rem); @extend .list--flat; li { @@ -136,17 +136,17 @@ .list--2-columns { @include media($lg) { - @include columns(2) + @include columns(2); } } .list--3-columns { @include media($med) { - @include columns(2) + @include columns(2); } @include media($lg) { - @include columns(3) + @include columns(3); } } @@ -155,24 +155,24 @@ // These 'columns' are css columns, not to be confused with a design's 12-column grid kind of columns .list--1-1-2-3-columns { @include media($lg) { - @include columns(2) + @include columns(2); } @include media($xl) { - @include columns(3) + @include columns(3); } } .list--1-2-2-2-columns { @include media($med) { - @include columns(2) + @include columns(2); } } .list--1-2-2-3-columns { @include media($med) { - @include columns(2) + @include columns(2); } @include media($xl) { - @include columns(3) + @include columns(3); } } @@ -182,7 +182,7 @@ } li { - padding: u(.75rem 0); + padding: u(0.75rem 0); } } @@ -195,7 +195,7 @@ .list--border { li { border-top: 1px solid $gray; - padding: u(.75rem 1rem); + padding: u(0.75rem 1rem); &:first-child { border-top: none; @@ -208,7 +208,6 @@ } } - // Checkbox Lists // // For check marks as list bullets @@ -266,7 +265,7 @@ .button--cta, .button--alt { display: block; - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); text-align: left; width: 100%; } diff --git a/fec/fec/static/scss/components/_maps.scss b/fec/fec/static/scss/components/_maps.scss index a1f2ae1747..2e09e3b4b4 100644 --- a/fec/fec/static/scss/components/_maps.scss +++ b/fec/fec/static/scss/components/_maps.scss @@ -64,10 +64,10 @@ path.shape { stroke: $primary; - stroke-width: .5px; + stroke-width: 0.5px; &.active { - fill: rgba($primary, .5); + fill: rgba($primary, 0.5); stroke: $primary; stroke-width: 2px; } @@ -108,7 +108,7 @@ path.shape { } .row-active { - border-left: .5rem solid $primary; + border-left: 0.5rem solid $primary; } } @@ -125,7 +125,7 @@ path.shape { } @include media($med) { - background-color: rgba($gray-lightest, .3); + background-color: rgba($gray-lightest, 0.3); border: 1px solid $gray-lightest; height: 432px; } @@ -143,12 +143,14 @@ path.shape { display: none; } // The new version of Leaflet wants to hide the zoom in/out button text content -.leaflet-control-zoom-in span, .leaflet-control-zoom-out span { +.leaflet-control-zoom-in span, +.leaflet-control-zoom-out span { display: block !important; } -.election-map.dormant, .election-map--home.dormant { - background-image: url("/static/img/map-election-search-default.png"); +.election-map.dormant, +.election-map--home.dormant { + background-image: url('/static/img/map-election-search-default.png'); background-position: center; background-size: 1200px auto; background-repeat: no-repeat; diff --git a/fec/fec/static/scss/components/_mega-menu.scss b/fec/fec/static/scss/components/_mega-menu.scss index f1adf207d1..621563bf57 100644 --- a/fec/fec/static/scss/components/_mega-menu.scss +++ b/fec/fec/static/scss/components/_mega-menu.scss @@ -25,7 +25,7 @@ padding: u(1rem); margin: u(1rem 0 0 0); - .icon-heading::before{ + .icon-heading::before { margin-right: u(1rem); } } @@ -33,15 +33,14 @@ .mega-heading__title { display: table-cell; margin-left: u(3rem); - font-family:sans-serif; + font-family: sans-serif; font-size: u(1.6rem); padding-top: u(1.11rem); - a { border-bottom: 1px dotted $inverse !important; } - &::before{ + &::before { content: ''; margin-bottom: u(3rem); margin-right: u(1rem); @@ -71,8 +70,6 @@ } } - - .mega__list:last-of-type { li:last-of-type { .mega__page-link { @@ -100,7 +97,7 @@ a::after { // Adding the double right-angle quote (») here since it's only decorative and not actually a closing quote // (for accessibility and SEO) - content: "\00A0 »"; // \00A0 is a non-breaking space to prevent wraps + content: '\00A0 »'; // \00A0 is a non-breaking space to prevent wraps line-height: 1em; position: absolute; } @@ -115,14 +112,15 @@ } .card__content { - padding-top: u(.5rem); + padding-top: u(0.5rem); } } @include media($med) { - .icon-heading--data-flag-circle--secondary::before, .icon-heading--data-flag-circle--primary::before { + .icon-heading--data-flag-circle--secondary::before, + .icon-heading--data-flag-circle--primary::before { margin-right: u(1rem); - margin-left: u(.2rem); + margin-left: u(0.2rem); } } @@ -148,7 +146,7 @@ .mega { box-shadow: 0 6px 8px 2px rgb(0 0 0 / 30%); transform: translateY(0); - @include transition(all .4s ease-out); + @include transition(all 0.4s ease-out); @include transform(translateY(0)); } } @@ -164,7 +162,7 @@ color: $inverse; padding: u(1rem 4rem 2rem 4rem); @include clearfix; - @include transition(all .4s ease-out); + @include transition(all 0.4s ease-out); @include transform(translateY(-100%)); .button--standard { @@ -172,10 +170,10 @@ border: 1px solid $gray; } } - .mega__inner .icon-heading{ + .mega__inner .icon-heading { margin-left: 0; - &::before{ + &::before { margin-right: u(2rem); } } @@ -187,7 +185,7 @@ .mega-heading { display: block; border-bottom: 2px solid $inverse; - padding-bottom: u(.8rem); + padding-bottom: u(0.8rem); margin: u(1rem 0); } @@ -195,21 +193,20 @@ display: block; margin-bottom: 0; margin-left: u(-2rem); - font-family:serif; + font-family: serif; font-size: u(2.4rem); - a { - border-bottom: 1px dotted $inverse !important; - } - - &::before { - height: u(5rem) !important; - width: u(5rem) !important; - content: ''!important; - margin-right: u(1.5rem); - } + a { + border-bottom: 1px dotted $inverse !important; + } + &::before { + height: u(5rem) !important; + width: u(5rem) !important; + content: '' !important; + margin-right: u(1.5rem); } + } .mega__page-link { padding-left: u(2rem); @@ -224,16 +221,14 @@ } } - - -@media screen and (width <= 40em){ - .mega-heading__title{ +@media screen and (width <= 40em) { + .mega-heading__title { margin-left: u(1rem); margin-top: u(1rem); margin-bottom: u(3rem); &::before { - margin-top: u(-.5rem); + margin-top: u(-0.5rem); margin-bottom: u(0); } } diff --git a/fec/fec/static/scss/components/_messages.scss b/fec/fec/static/scss/components/_messages.scss index 86153f5dc5..65def9bf1b 100644 --- a/fec/fec/static/scss/components/_messages.scss +++ b/fec/fec/static/scss/components/_messages.scss @@ -4,9 +4,9 @@ // .message { - background-size:u(2rem); - background-position:u(2rem 2rem); - background-color:$neutral; + background-size: u(2rem); + background-position: u(2rem 2rem); + background-color: $neutral; border-color: $gray; border-style: solid; border-width: 0 0 0 3px; @@ -107,14 +107,13 @@ p { .message--mini { background-position: u(1rem) 50%; font-size: u(1.2rem); - padding: u(.5rem 1rem .5rem 4rem); + padding: u(0.5rem 1rem 0.5rem 4rem); &.message { min-height: 0; } } - // Messages: Inverse // //
@@ -124,7 +123,7 @@ p { .message--inverse { color: $inverse; - background-color: rgba($inverse, .1); + background-color: rgba($inverse, 0.1); background-position: u(50% 2rem); border-color: $inverse; @@ -162,7 +161,6 @@ p { &.message--alert { @include u-icon-bg($bang-circle, $inverse); } - } @include media($med) { @@ -207,7 +205,7 @@ p { a { font-size: u(1.4rem); - } + } &.message { min-height: 0; diff --git a/fec/fec/static/scss/components/_modals.scss b/fec/fec/static/scss/components/_modals.scss index 2458c871e5..530f06ec36 100644 --- a/fec/fec/static/scss/components/_modals.scss +++ b/fec/fec/static/scss/components/_modals.scss @@ -4,7 +4,7 @@ // .modal__overlay { - background-color: rgba($base, .5); + background-color: rgba($base, 0.5); bottom: 0; left: 0; right: 0; @@ -55,7 +55,7 @@ } .keyword-modal { - .simple-table{ + .simple-table { border-width: 0; } } diff --git a/fec/fec/static/scss/components/_nav.scss b/fec/fec/static/scss/components/_nav.scss index fe32b696c6..c2a658994c 100644 --- a/fec/fec/static/scss/components/_nav.scss +++ b/fec/fec/static/scss/components/_nav.scss @@ -10,9 +10,9 @@ &.is-open { .site-nav__container { @include transform(translateX(0)); - + & { - @include transition(transform, .2s, ease-out); + @include transition(transform, 0.2s, ease-out); } } } @@ -30,7 +30,7 @@ overflow-x: hidden; z-index: $z-navigation; @include transform(translateX(-100%)); - @include transition(left, .2s, ease-out); + @include transition(left, 0.2s, ease-out); // scss-lint:disable ImportantRule &[aria-hidden='true'] { @@ -62,7 +62,7 @@ top: 0; bottom: 0; width: 100%; - @include transition(transform, .2s, ease-out); + @include transition(transform, 0.2s, ease-out); &.is-open { @include transform(translateX(0)); @@ -127,9 +127,9 @@ border-bottom: none; width: 100%; text-align: left; - @include transition(background-color, .1s); + @include transition(background-color, 0.1s); - &[aria-expanded="true"] { + &[aria-expanded='true'] { @include u-icon-bg($minus-circle, $inverse); } } @@ -213,7 +213,6 @@ .site-nav__item--secondary { .site-nav__link { - &.is-parent .site-nav__link__title { border-bottom-color: $deep-red; } @@ -236,8 +235,8 @@ .site-nav__link__title { display: inline-block; - border-bottom: u(.5rem) solid transparent; - padding-bottom: u(.5rem); + border-bottom: u(0.5rem) solid transparent; + padding-bottom: u(0.5rem); } .site-nav__link { @@ -276,8 +275,8 @@ /* width: u(30rem); */ padding: 0 u(1rem); -/* display: block; */ - } + /* display: block; */ +} /* @include media($lg) { @@ -286,7 +285,6 @@ } } */ - // Grid overhaul, using _grid.scss breakpoints but Bootstrap naming as inspiration, // making it pretty specific to avoid unintended side effects elsewhere .site-nav .mega-container .mega__inner .row { @@ -294,7 +292,8 @@ // e.g., if it's 1 column for med, it'll be 1 column for lg and xl, too. // if it's 1 column for med but 2 for lg, it'll be 2 for xl, too. // "columns" are 1/12 of the page width (a 12-column grid) - .col-lg-1 { // 1-column definitions probably aren't necessary, but including for the display/float/margin that comes with span-columns() + .col-lg-1 { + // 1-column definitions probably aren't necessary, but including for the display/float/margin that comes with span-columns() @include media($lg) { @include span-columns(1); } @@ -334,5 +333,5 @@ @include media($lg) { display: block; } - } + } } diff --git a/fec/fec/static/scss/components/_overlay.scss b/fec/fec/static/scss/components/_overlay.scss index d67df97e92..78da277021 100644 --- a/fec/fec/static/scss/components/_overlay.scss +++ b/fec/fec/static/scss/components/_overlay.scss @@ -14,7 +14,7 @@ } .overlay { - background-color: rgba($primary, .7); + background-color: rgba($primary, 0.7); bottom: 0; left: 0; right: 0; @@ -28,4 +28,3 @@ background-position: 50% 20%; } } - diff --git a/fec/fec/static/scss/components/_overviews.scss b/fec/fec/static/scss/components/_overviews.scss index b5e9628912..f30054a4a1 100644 --- a/fec/fec/static/scss/components/_overviews.scss +++ b/fec/fec/static/scss/components/_overviews.scss @@ -50,7 +50,7 @@ } .top-list__subtitle { - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); } .overview__chart-line { diff --git a/fec/fec/static/scss/components/_page-headers.scss b/fec/fec/static/scss/components/_page-headers.scss index 5b582d42b0..2878861de0 100644 --- a/fec/fec/static/scss/components/_page-headers.scss +++ b/fec/fec/static/scss/components/_page-headers.scss @@ -37,7 +37,6 @@ line-height: 1; } - @include media($med) { // Add padding, show the search bar in line with the page title .page-header { diff --git a/fec/fec/static/scss/components/_pagination.scss b/fec/fec/static/scss/components/_pagination.scss index 253af1fb6b..a3ae408c0c 100644 --- a/fec/fec/static/scss/components/_pagination.scss +++ b/fec/fec/static/scss/components/_pagination.scss @@ -28,7 +28,7 @@ display: inline-block; height: auto; - margin-left: u(.5rem); + margin-left: u(0.5rem); &.previous, &.next { @@ -48,7 +48,7 @@ } &.disabled { - opacity: .5; + opacity: 0.5; pointer-events: none; } @@ -63,7 +63,7 @@ display: inline-block; height: 24px; line-height: 36px; - margin-left: .5rem; + margin-left: 0.5rem; padding: 0; vertical-align: bottom; } diff --git a/fec/fec/static/scss/components/_posts.scss b/fec/fec/static/scss/components/_posts.scss index b1c73b9555..fa32e240a7 100644 --- a/fec/fec/static/scss/components/_posts.scss +++ b/fec/fec/static/scss/components/_posts.scss @@ -25,17 +25,17 @@ } h3 { - margin-bottom: u(.4rem); + margin-bottom: u(0.4rem); word-wrap: break-word; } p { font-family: $sans-serif; - letter-spacing: -.3px; + letter-spacing: -0.3px; margin: u(0 0 1rem 0); &.t-serif { - font-family: $serif + font-family: $serif; } } @@ -139,7 +139,7 @@ } &:first-of-type { - margin-top: u(.5rem); + margin-top: u(0.5rem); } } @@ -166,7 +166,6 @@ ul { @extend .list--bulleted; } - } // Post boilerplate diff --git a/fec/fec/static/scss/components/_responsive-object.scss b/fec/fec/static/scss/components/_responsive-object.scss index 04e1b8fd81..4b884b9e51 100644 --- a/fec/fec/static/scss/components/_responsive-object.scss +++ b/fec/fec/static/scss/components/_responsive-object.scss @@ -1,17 +1,19 @@ //Responsive video embeds for RTE with intrinsic sizing technnique -.responsive-object { - position: relative; - width: 100% !important; - height: auto !important; +.responsive-object { + position: relative; + width: 100% !important; + height: auto !important; - iframe, object, embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } + iframe, + object, + embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } //TV Ad example 1: @@ -22,33 +24,31 @@ //
//
- .video-frame { width: 85%; - background: url("/static/img/TV-Gray-Wall-Only-850.png") no-repeat; + background: url('/static/img/TV-Gray-Wall-Only-850.png') no-repeat; background-size: cover; margin-bottom: u(2rem); .iframe-container { overflow: hidden; padding-top: 56.25%; - position: relative; + position: relative; iframe { - height: 62%; - left: 7.5%; - position: absolute; + height: 62%; + left: 7.5%; + position: absolute; top: 14%; - width: 62%; - border: 10px solid #333; - border-radius: 10px; - box-shadow: 5px 11px 16px 4px #444; - border-bottom: 27px solid #333; - } + width: 62%; + border: 10px solid #333; + border-radius: 10px; + box-shadow: 5px 11px 16px 4px #444; + border-bottom: 27px solid #333; + } } } - //TV Ad example 2: //
//
@@ -72,7 +72,7 @@ iframe { box-sizing: border-box; - background: url("/static/img/new-tv-bkgd-wide.png") center center no-repeat; + background: url('/static/img/new-tv-bkgd-wide.png') center center no-repeat; background-size: contain; padding: 10.05% 16.5% 21.2% 16%; position: absolute; @@ -81,5 +81,4 @@ width: 100%; height: 100%; } - } diff --git a/fec/fec/static/scss/components/_results-info.scss b/fec/fec/static/scss/components/_results-info.scss index 0ce161c857..0e0cf24b3d 100644 --- a/fec/fec/static/scss/components/_results-info.scss +++ b/fec/fec/static/scss/components/_results-info.scss @@ -49,7 +49,7 @@ .dataTables_paginate { float: right; - padding: u(.5rem 0); + padding: u(0.5rem 0); } .dataTables_length { @@ -93,12 +93,12 @@ } .dataTables_paginate { - padding: u(.5rem 0 .5rem .5rem); + padding: u(0.5rem 0 0.5rem 0.5rem); } .dataTables_info { margin-left: 1.5em; - padding-top: u(.75rem); + padding-top: u(0.75rem); clear: none; } } @@ -106,7 +106,6 @@ .dataTables_length { padding: u(0 1rem 0 0); } - } } diff --git a/fec/fec/static/scss/components/_richtext.scss b/fec/fec/static/scss/components/_richtext.scss index f9a24b0684..1b8f384ebe 100644 --- a/fec/fec/static/scss/components/_richtext.scss +++ b/fec/fec/static/scss/components/_richtext.scss @@ -8,14 +8,13 @@ .block-html { ul { @extend .list--bulleted; - } + } ol { @extend .list--numbered; } } - .rich-text, .block-table, .block-html { @@ -46,14 +45,20 @@ .block-html { table { - @extend .simple-table-cms + @extend .simple-table-cms; } } -.block-paragraph { - h2, h3, h4, ol, li, blockquote, hr { - max-width: u(80rem) - } +.block-paragraph { + h2, + h3, + h4, + ol, + li, + blockquote, + hr { + max-width: u(80rem); + } } @media print { diff --git a/fec/fec/static/scss/components/_search-bar.scss b/fec/fec/static/scss/components/_search-bar.scss index 4dda13be55..b9d6a29212 100644 --- a/fec/fec/static/scss/components/_search-bar.scss +++ b/fec/fec/static/scss/components/_search-bar.scss @@ -273,14 +273,14 @@ $search-button-width: u(5.6rem); color: $base; display: block; font-weight: bold; - padding: u(1rem .5rem); + padding: u(1rem 0.5rem); } .tt-suggestion__loading.tt-suggestion__loading { color: $primary; display: block; font-weight: bold; - padding: u(1rem .5rem); + padding: u(1rem 0.5rem); } .tt-dataset-0, @@ -289,7 +289,7 @@ $search-button-width: u(5.6rem); } .tt-highlight { - background-color: rgba($aqua, .3); + background-color: rgba($aqua, 0.3); } // Specific styles for typeahead filters diff --git a/fec/fec/static/scss/components/_search-controls.scss b/fec/fec/static/scss/components/_search-controls.scss index e18f7d8747..3412d0f74f 100644 --- a/fec/fec/static/scss/components/_search-controls.scss +++ b/fec/fec/static/scss/components/_search-controls.scss @@ -49,7 +49,6 @@ &::after { right: 0; } - } .search-controls__submit { @@ -93,7 +92,6 @@ //For data/election search boxes .election-search { - .search--container { position: relative; overflow: hidden; @@ -104,10 +102,10 @@ } } .search-controls__cycle { - margin: u(.5rem 2rem); + margin: u(0.5rem 2rem); @include span-columns(4.5 of 5.5); - .cycle-select{ + .cycle-select { width: 95%; } } @@ -117,11 +115,11 @@ } .search-controls__either:first-child { - margin: u(.5rem 0)!important; + margin: u(0.5rem 0) !important; } .search-controls__either:last-child { - fieldset{ + fieldset { margin-left: u(2rem); } } @@ -143,17 +141,18 @@ .office-select { @include span-columns(10); select { - width: 100%; - } + width: 100%; + } } .cycle-select { @include span-columns(6); } } - //for keyword-options modals on AO, MUR, Statues searches -.keyword-modal{ - .modal__tips, .modal__form { +//for keyword-options modals on AO, MUR, Statues searches +.keyword-modal { + .modal__tips, + .modal__form { display: table-row; width: 100%; } @@ -213,7 +212,6 @@ } .election-search { - .search-controls__either:first-child { @include span-columns(4); } @@ -237,7 +235,7 @@ } .search-controls__cycle { - margin: u(.5rem 2rem); + margin: u(0.5rem 2rem); @include span-columns(4.5 of 5.5); } @@ -282,12 +280,13 @@ .usa-width-one-half:last-child { width: 100%; } - - .search-controls__state, .search-controls__district { + + .search-controls__state, + .search-controls__district { width: 100%; } } - + .callout-holder { border: none; padding: 0; @@ -302,9 +301,10 @@ } } - //for keyword-options modals on AO, MUR, Statues searches - .keyword-modal{ - .modal__tips, .modal__form { + //for keyword-options modals on AO, MUR, Statues searches + .keyword-modal { + .modal__tips, + .modal__form { display: table-cell; width: 44%; } @@ -331,8 +331,7 @@ } } } - -}/* end MED breakpoint */ +} /* end MED breakpoint */ // All form elements go in rows @include media($lg) { @@ -342,7 +341,6 @@ } .election-search { - .search--container:first-child { height: u(12.6rem); margin-bottom: 0; @@ -350,7 +348,7 @@ .search-controls__state, .search-controls__district { - @include span-columns(1.90 of 5.5); + @include span-columns(1.9 of 5.5); } .search-controls__zip { margin-left: u(3rem); @@ -360,19 +358,19 @@ } .search-controls__cycle { - margin: u(.5rem 2.5rem); + margin: u(0.5rem 2.5rem); } .search-controls__either:first-child { - margin: u(.5rem 0)!important; + margin: u(0.5rem 0) !important; @include span-columns(3.5); } .search-controls__either:last-child { - margin: u(.5rem 0)!important; + margin: u(0.5rem 0) !important; @include span-columns(8); - fieldset{ + fieldset { margin-left: u(1rem); } .search-controls__submit { @@ -387,7 +385,6 @@ } .search--container { - .search-controls__either { @include span-columns(5.5); } diff --git a/fec/fec/static/scss/components/_search-results.scss b/fec/fec/static/scss/components/_search-results.scss index 1e5c52ce21..d4b165772f 100644 --- a/fec/fec/static/scss/components/_search-results.scss +++ b/fec/fec/static/scss/components/_search-results.scss @@ -16,7 +16,7 @@ // To show/hide special PA district message on /data/elections (in election-search.js) .pa-message { - display:none; + display: none; padding: 0 0 2rem; } diff --git a/fec/fec/static/scss/components/_side-nav.scss b/fec/fec/static/scss/components/_side-nav.scss index d5480c2cce..87cb2efbdb 100644 --- a/fec/fec/static/scss/components/_side-nav.scss +++ b/fec/fec/static/scss/components/_side-nav.scss @@ -82,14 +82,14 @@ } .side-nav__link { - padding: u(.85rem 1rem .85rem 1.8rem); + padding: u(0.85rem 1rem 0.85rem 1.8rem); &:hover, &.is-active:hover { background-color: $gray-lightest; } - &[aria-selected="true"] { + &[aria-selected='true'] { font-weight: bold; background-color: initial; border-left: 4px solid $base; @@ -97,7 +97,7 @@ } } - .side-nav__link[aria-selected="true"] + ul { + .side-nav__link[aria-selected='true'] + ul { margin: u(1rem 0 2rem 0); display: block; @@ -119,13 +119,12 @@ display: table-cell; width: 250px; - // All section siblings within .data-container__wrapper + // All section siblings within .data-container__wrapper // will now get this width. These navs are using 250px widths. & ~ section { width: calc(100% - 250px); } } - } @include media($med) { diff --git a/fec/fec/static/scss/components/_sidebar.scss b/fec/fec/static/scss/components/_sidebar.scss index fd077756f0..0e6b90edb4 100644 --- a/fec/fec/static/scss/components/_sidebar.scss +++ b/fec/fec/static/scss/components/_sidebar.scss @@ -72,7 +72,7 @@ background-color: $neutral; padding: u(2rem); @include clearfix; - + p { font-size: u(1.4rem); color: $base; diff --git a/fec/fec/static/scss/components/_site-header.scss b/fec/fec/static/scss/components/_site-header.scss index c7bdf69afb..3fd422dec4 100644 --- a/fec/fec/static/scss/components/_site-header.scss +++ b/fec/fec/static/scss/components/_site-header.scss @@ -6,7 +6,7 @@ background-color: $navy; color: $inverse; font-family: $sans-serif; - padding: u(.5rem 0); + padding: u(0.5rem 0); position: relative; text-align: center; width: 100%; @@ -14,9 +14,8 @@ p { color: $inverse; line-height: u(2rem); - margin: u(.3rem 0); + margin: u(0.3rem 0); max-width: 100%; - } a { @@ -36,7 +35,7 @@ position: absolute; top: u(-10rem); z-index: $z4; - @include transition(top, .2s); + @include transition(top, 0.2s); &:focus { border-bottom-color: $primary-contrast; @@ -74,7 +73,7 @@ } .site-header--homepage .disclaimer { - padding: u(.75rem 2rem); + padding: u(0.75rem 2rem); .flag { margin-left: u(1rem); @@ -83,7 +82,7 @@ // US Bar 2.0 // .usa-banner { - background-color: $gray-light; + background-color: $gray-light; } .usa-banner-content { @@ -128,13 +127,12 @@ } .usa-banner-header { - &.accordion__button { background-image: none; - border:none !important; - padding: u(.75rem 1rem); + border: none !important; + padding: u(0.75rem 1rem); - &[aria-expanded="true"] { + &[aria-expanded='true'] { background-image: none; } } @@ -151,8 +149,8 @@ &.t-inline-block { width: auto; font-size: u(1.4rem); - font-family: karla,sans-serif; - letter-spacing: -.3px; + font-family: karla, sans-serif; + letter-spacing: -0.3px; padding-bottom: 1px; } } @@ -173,38 +171,35 @@ &.t-inline-block { width: auto; font-size: u(1.4rem); - font-family: karla,sans-serif; - letter-spacing: -.3px; + font-family: karla, sans-serif; + letter-spacing: -0.3px; } } -.usa-banner-header[aria-expanded="false"] { - - .usa-banner-button::after { - background-image: url("../img/angle-arrow-down-primary.svg"); +.usa-banner-header[aria-expanded='false'] { + .usa-banner-button::after { + background-image: url('../img/angle-arrow-down-primary.svg'); background-size: 100%; content: ''; display: inline-block; height: u(1rem); width: u(1rem); /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ - margin-left: u(.3rem); + margin-left: u(0.3rem); /* stylelint-enable */ } - } - .usa-banner-header[aria-expanded="true"] { - - .usa-banner-button::after { - background-image: url("../img/angle-arrow-up-primary.svg"); +.usa-banner-header[aria-expanded='true'] { + .usa-banner-button::after { + background-image: url('../img/angle-arrow-up-primary.svg'); background-size: 100%; content: ''; display: inline-block; height: u(1rem); width: u(1rem); /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ - margin-left: u(.3rem); + margin-left: u(0.3rem); /* stylelint-enable */ } } @@ -219,12 +214,11 @@ .usa-banner-header img { float: left; - margin: u(.2rem .7rem 0 1rem); + margin: u(0.2rem 0.7rem 0 1rem); width: 16px; height: 11px; } - .usa-banner-button { background-color: transparent; border: 0; @@ -255,7 +249,7 @@ .usa-banner-button { padding-top: 0; padding-left: 0; - // stylelint-disable declaration-block-no-ignored-properties + // stylelint-disable declaration-block-no-ignored-properties display: inline; height: initial; margin-left: 3px; @@ -263,7 +257,7 @@ vertical-align: middle; width: initial; left: 0; - // stylelint-enable + // stylelint-enable } } @@ -295,11 +289,10 @@ left: u(-999em); } -.usa-accordion-content[aria-hidden="true"] { +.usa-accordion-content[aria-hidden='true'] { display: none; } - .usa-grid, .usa-grid-full { margin-left: auto; @@ -310,7 +303,7 @@ .usa-grid::after, .usa-grid-full::after { clear: both; - content: ""; + content: ''; display: block; } @@ -339,7 +332,6 @@ overflow: hidden; } - // End US Bar 2.0 // Masthead @@ -397,7 +389,7 @@ display: block; height: u(3rem); // margin: u(.5rem 1rem); - margin: u(.75rem 1rem .25rem); + margin: u(0.75rem 1rem 0.25rem); width: calc(100% - 15rem); max-width: u(40rem); @include u-background-image('wordmark', 0% 50%); @@ -405,7 +397,6 @@ } @media (min-width: $medium-screen), print { - .disclaimer { float: right; width: calc(100% - 9rem); @@ -430,7 +421,7 @@ .site-title { background-size: contain; display: block; - margin: u(1rem 0 .7rem 0); + margin: u(1rem 0 0.7rem 0); padding-left: u(12rem); height: u(3.4rem); width: 100%; @@ -523,23 +514,23 @@ } #ie_warning { - display:none; + display: none; background-color: #000; padding: 15px; } #ie_warning p { - color:#fff; + color: #fff; font-size: 16px; } #ie_warning h2 { - color:#fff; + color: #fff; } @media screen and (-ms-high-contrast: none) { #ie_warning { - display:block !important; + display: block !important; } } diff --git a/fec/fec/static/scss/components/_table-styles.scss b/fec/fec/static/scss/components/_table-styles.scss index ef7d9193e8..196f761aa7 100644 --- a/fec/fec/static/scss/components/_table-styles.scss +++ b/fec/fec/static/scss/components/_table-styles.scss @@ -35,7 +35,7 @@ .simple-table__header-cell, th { - padding: u(.5rem 0); + padding: u(0.5rem 0); } .simple-table__header-subtext { @@ -74,7 +74,7 @@ h3 + .simple-table { .simple-table__header-cell { padding: u(0.5rem 1rem); line-height: u(2rem); - + &.sorting, &.sorting_asc, &.sorting_desc { @@ -100,7 +100,6 @@ h3 + .simple-table { background-color: $gray-lightest; @include u-icon-bg($arrow-down-border, $primary); } - } .simple-table__cell { @@ -116,7 +115,7 @@ h3 + .simple-table { padding: u(1rem); &:nth-child(even) { - background-color: rgba($gray-lightest, .5); + background-color: rgba($gray-lightest, 0.5); } } @@ -168,8 +167,6 @@ h3 + .simple-table { .simple-table__header-cell { display: table-cell; - - } .simple-table__row-group { @@ -216,35 +213,34 @@ h3 + .simple-table { font-family: $sans-serif; margin: u(2rem 0); - thead tr { border-bottom: 1px solid $primary; font-weight: 600; text-align: left; } - th { - font-weight: 600; - padding: u(1rem); - border-bottom: 1px solid $primary; + th { + font-weight: 600; + padding: u(1rem); + border-bottom: 1px solid $primary; - .simple-table-cms__header-subtext { - font-weight: normal; - } + .simple-table-cms__header-subtext { + font-weight: normal; } + } td { padding: u(1rem); vertical-align: top; border: 1px solid $gray-light; - &:first-child { - border-left: none; - } + &:first-child { + border-left: none; + } - &:last-child { - border-right: none; - } + &:last-child { + border-right: none; + } } tr { @@ -264,49 +260,47 @@ h3 + .simple-table { } td { - .th_append { - display: none !important; - } + .th_append { + display: none !important; + } } - tr:first-child { - border-top: 2.3px solid $primary; - border-bottom: 2.3px solid $primary; - font-weight: 600; - text-align: left; + border-top: 2.3px solid $primary; + border-bottom: 2.3px solid $primary; + font-weight: 600; + text-align: left; } th { padding: u(1rem); - } a sup { border-bottom: 1px dotted #5b616b; display: inline-block; height: u(1.7rem); - margin-left: u(.2rem); + margin-left: u(0.2rem); } - td a[href^='#'], th a[href^='#'] { + td a[href^='#'], + th a[href^='#'] { border-bottom: none; } tr.footnote_row { - td { - border:none !important; + border: none !important; padding-bottom: u(1rem); &:first-child { border-right: 1px solid $gray-light !important; } a { - border-bottom: 1px dotted $gray-dark; + border-bottom: 1px dotted $gray-dark; } span { - line-height: u(1.5rem); - font-weight: bold; + line-height: u(1.5rem); + font-weight: bold; } } } @@ -316,15 +310,19 @@ h3 + .simple-table { /* as a necessity, we depart from mobile-first(min-width only MQs) here for these tables only */ @media only screen and (width <= 650px), - (device-width >= 650px) and (device-width <= 1024px) { + (device-width >= 650px) and (device-width <= 1024px) { /* Force table to not be like tables anymore */ - table, thead, tbody, th, td, tr { + table, + thead, + tbody, + th, + td, + tr { display: block; - } /* Hide table headers (but not display: none;, for accessibility) */ - thead tr { + thead tr { position: absolute; top: -9999px; left: -9999px; @@ -332,24 +330,24 @@ h3 + .simple-table { tr { border: 1px solid $gray; - padding-top: 2px; + padding-top: 2px; &.row_display { - display: block !important; + display: block !important; } &.footnote_row { display: none !important; } /* Hide table headers (but not display: none;, for accessibility) */ - &:first-child{ + &:first-child { position: absolute; top: -9999px; left: -9999px; } } - td { + td { /* Behave like a "row" */ border: none; border-bottom: 1px solid $gray-light !important; @@ -357,28 +355,25 @@ h3 + .simple-table { display: inline-block; width: 100%; - .th_append { display: table-cell !important; font-weight: bold; min-width: u(16rem); float: left; } - } - - tr:nth-child(even) td { - border-bottom: 1px solid #aaa - } + tr:nth-child(even) td { + border-bottom: 1px solid #aaa; + } .ftnt_append { - display: block !important; - padding: u(0 3rem); - font-weight: normal; + display: block !important; + padding: u(0 3rem); + font-weight: normal; b { margin-left: u(-1.5rem); - padding-right: u(.1rem); + padding-right: u(0.1rem); } .ftnt-close { @@ -389,11 +384,8 @@ h3 + .simple-table { } } } - } - - #header_notes_modal li { margin-bottom: u(2rem); padding-left: u(2rem); @@ -403,34 +395,32 @@ h3 + .simple-table { margin-left: u(-2rem); } -#header_notes_modal p { +#header_notes_modal p { margin-left: u(2rem); - display: inline; + display: inline; } #static_notes { margin-top: u(2rem); ul { - list-style: none; - padding-left: u(2rem); - max-width: u(80rem); - width: 100%; - margin-bottom: u(2rem); + list-style: none; + padding-left: u(2rem); + max-width: u(80rem); + width: 100%; + margin-bottom: u(2rem); } li { - text-indent: u(-2rem); - list-style-type: none; + text-indent: u(-2rem); + list-style-type: none; } } #static_notes p, .footnote_row p { - display: inline + display: inline; } - - // Chart Table // Table style used on breakdown charts // Very similar to simple-table, but with slight differences @@ -457,12 +447,12 @@ h3 + .simple-table { border-bottom: 1px solid $gray-medium; } .simple-table__cell { - font-weight:bold; + font-weight: bold; } .simple-table__cell:nth-child(2) { - /* $amount cell $ */ - font-weight:normal; + /* $amount cell $ */ + font-weight: normal; } .t-right-aligned { @@ -476,18 +466,19 @@ h3 + .simple-table { } .simple-table__cell { - padding: u(.5rem 0 0 0); + padding: u(0.5rem 0 0 0); } .value-bar { background-color: $gray-dark; height: u(2rem); - &[data-party="DEM"], &[data-party="DFL"] { + &[data-party='DEM'], + &[data-party='DFL'] { background-color: $blue-data; } - &[data-party="REP"] { + &[data-party='REP'] { background-color: $red-data; } } @@ -509,13 +500,11 @@ h3 + .simple-table { // For homepage barcharts &.chart-table-home { - .bar-container { margin-left: u(2rem); } .simple-table__row { - &::after { display: none; } @@ -528,7 +517,6 @@ h3 + .simple-table { @include media($lg) { &.chart-table-home { - .bar-container { margin-left: 0; } @@ -545,7 +533,7 @@ h3 + .simple-table { border-collapse: separate; td { - padding: u(.5rem); + padding: u(0.5rem); } td:last-child { @@ -621,8 +609,6 @@ h3 + .simple-table { border-bottom: 1px solid $neutral; } - - // scss-lint:disable ImportantRule td { border-right: 1px solid $gray-medium; @@ -635,7 +621,6 @@ h3 + .simple-table { border-right: none; } - @include media($lg) { box-shadow: none; } @@ -664,10 +649,10 @@ h3 + .simple-table { @include media($lg) { box-shadow: none; } - } -.option__content .dense-table-container, .main__content .dense-table-container { +.option__content .dense-table-container, +.main__content .dense-table-container { box-shadow: -10px 0 20px -10px $gray-medium inset; overflow-x: scroll; } @@ -684,22 +669,22 @@ h3 + .simple-table { border-right: 1px solid $gray-light; font-size: u(1.2rem); line-height: 1.2; - padding: u(.5rem); + padding: u(0.5rem); vertical-align: middle; word-wrap: break-word; } thead th { border-bottom: 1px solid $primary; - padding: u(.5rem); + padding: u(0.5rem); } tbody th { border-right: 1px solid $primary; } - th[scope="colgroup"], - th[scope="rowgroup"] { + th[scope='colgroup'], + th[scope='rowgroup'] { text-align: center; background-color: $primary; color: $inverse; @@ -708,10 +693,9 @@ h3 + .simple-table { } } - //for home barchart-full width on mobile .breakdowns-home { - width: 100%; + width: 100%; } //For data summary tables @@ -733,23 +717,23 @@ h3 + .simple-table { } } -table[data-summary] { +table[data-summary] { border-width: 0; margin: u(1rem) 0; .tableTitle { - margin-bottom: 0; + margin-bottom: 0; } td.brdr { - position: relative; - border-right: 1px solid transparent; + position: relative; + border-right: 1px solid transparent; } thead td { border-width: 0; border-color: transparent !important; - line-height: 1.3 + line-height: 1.3; } td.brdr::after { @@ -758,11 +742,12 @@ table[data-summary] { right: -2px; } - td.brdr, td.brdr + td { + td.brdr, + td.brdr + td { text-transform: uppercase; } tr.column-headers td:nth-child(3) strong { - margin-left: u(2.5rem) + margin-left: u(2.5rem); } } diff --git a/fec/fec/static/scss/components/_tags.scss b/fec/fec/static/scss/components/_tags.scss index e74b05ca68..e8a1794b91 100644 --- a/fec/fec/static/scss/components/_tags.scss +++ b/fec/fec/static/scss/components/_tags.scss @@ -27,13 +27,13 @@ font-size: 1em; float: left; margin: 0; - padding: u(.5rem 1rem .5rem 0); + padding: u(0.5rem 1rem 0.5rem 0); } .tags__title__text { color: $primary; display: inline-block; - margin: u(4px .5rem); + margin: u(4px 0.5rem); } .tags { @@ -47,9 +47,9 @@ color: $primary; display: inline-block; font-family: $sans-serif; - letter-spacing: -.3px; - padding: u(0 .5rem 0 .75rem); - margin: u(.5rem 3rem 0 0); + letter-spacing: -0.3px; + padding: u(0 0.5rem 0 0.75rem); + margin: u(0.5rem 3rem 0 0); } .tag--primary { @@ -66,8 +66,8 @@ background-color: $gray-light; border-radius: 2px; display: inline-block; - padding: u(0 .75rem .5rem .7rem); - margin: u(.5rem .5rem 0 0); + padding: u(0 0.75rem 0.5rem 0.7rem); + margin: u(0.5rem 0.5rem 0 0); .tag__label { font-weight: bold; @@ -78,7 +78,7 @@ line-height: 1.25em; max-width: 15em; word-wrap: break-word; - + @extend .tag; position: relative; diff --git a/fec/fec/static/scss/components/_toggles.scss b/fec/fec/static/scss/components/_toggles.scss index e887a88d0f..1980c7c3e7 100644 --- a/fec/fec/static/scss/components/_toggles.scss +++ b/fec/fec/static/scss/components/_toggles.scss @@ -26,7 +26,7 @@ .toggles { @include clearfix; - input[type="radio"] { + input[type='radio'] { @include u-visually-hidden; } @@ -44,7 +44,7 @@ } & + .button--alt--primary { - background-color: rgba($inverse, .3); + background-color: rgba($inverse, 0.3); border-color: $primary-contrast; color: $inverse; font-weight: bold; @@ -56,7 +56,7 @@ } & + .button--alt--secondary { - background-color: rgba($inverse, .3); + background-color: rgba($inverse, 0.3); border-color: $secondary-contrast; color: $inverse; font-weight: bold; @@ -75,7 +75,7 @@ label:first-of-type { .button--alt, .button--alt-primary, - .button--alt-secondary { + .button--alt-secondary { border-radius: 4px 4px 0 0; } } @@ -99,25 +99,24 @@ margin-bottom: -2px; } - &[data-toggle="home-barcharts"] { - .button--alt{ + &[data-toggle='home-barcharts'] { + .button--alt { min-width: u(13.5rem); } label.toggle { - float:none; - } + float: none; + } @include media($med) { .button-first { border-radius: 4px 4px 0 0 !important; } .button-last { - border-radius: 0 0 4px 4px !important; + border-radius: 0 0 4px 4px !important; } - } @include media($lg) { - label.toggle { - float:left; + label.toggle { + float: left; } .button-first { border-radius: 4px 0 0 4px !important; @@ -150,7 +149,7 @@ .label { float: left; - margin: u(.5rem 1rem 0 0); + margin: u(0.5rem 1rem 0 0); } .button--alt, diff --git a/fec/fec/static/scss/components/_tooltips.scss b/fec/fec/static/scss/components/_tooltips.scss index f21e33c30b..c25882b28f 100644 --- a/fec/fec/static/scss/components/_tooltips.scss +++ b/fec/fec/static/scss/components/_tooltips.scss @@ -50,8 +50,6 @@ } } - - // Tooltips under/above an element // // By default, this class centers a tooltip with the element it's referencing and centers the point. @@ -81,7 +79,6 @@ //
// - // When the tooltip is above the content. Puts the arrow at the bottom center of the tooltip .tooltip--above { min-width: u(12rem); @@ -104,8 +101,8 @@ content: ''; display: block; position: absolute; - left: calc(50% - .8rem); - bottom: u(-.7rem); + left: calc(50% - 0.8rem); + bottom: u(-0.7rem); @include triangle(1.6rem, $inverse, down); } @@ -132,11 +129,10 @@ right: u(2.8rem); } &::after { - left:auto; + left: auto; right: u(3rem); } } - } .tooltip--under { @@ -212,14 +208,12 @@ right: u(2.8rem); } &::after { - left:auto; + left: auto; right: u(3rem); } } - } - .tooltip__container { width: u(2rem); height: u(2rem); @@ -244,7 +238,7 @@ height: u(1.8rem); vertical-align: middle; width: u(1.8rem); - margin: u(0 0 .5rem .3rem); + margin: u(0 0 0.5rem 0.3rem); @include u-icon-bg($info-circle-outline, $primary); &:hover + .tooltip, @@ -266,7 +260,7 @@ align-items: center; justify-content: space-between; @include clearfix; - + .tooltip__title { flex-grow: 2; text-align: left; diff --git a/fec/fec/static/scss/components/_type-styles.scss b/fec/fec/static/scss/components/_type-styles.scss index 6d3ca85c0e..d542e79600 100644 --- a/fec/fec/static/scss/components/_type-styles.scss +++ b/fec/fec/static/scss/components/_type-styles.scss @@ -133,11 +133,11 @@ } .t-serif { -font-family: $serif + font-family: $serif; } .t-sans-serif { - font-family: $sans-serif + font-family: $sans-serif; } // Set a bigger size to lead paragraphs .t-lead, diff --git a/fec/fec/static/scss/data-landing.scss b/fec/fec/static/scss/data-landing.scss index e4276eb025..7e7c557162 100644 --- a/fec/fec/static/scss/data-landing.scss +++ b/fec/fec/static/scss/data-landing.scss @@ -1,28 +1,27 @@ -@import "../../../../node_modules/leaflet/dist/leaflet"; +@import '../../../../node_modules/leaflet/dist/leaflet'; -@import "global"; +@import 'global'; -@import "components/hero"; -@import "components/overviews"; -@import "components/figures"; -@import "components/icons"; -@import "components/type-styles"; -@import "components/maps"; -@import "components/reaction-boxes"; -@import "components/_options"; -@import "components/datatables"; +@import 'components/hero'; +@import 'components/overviews'; +@import 'components/figures'; +@import 'components/icons'; +@import 'components/type-styles'; +@import 'components/maps'; +@import 'components/reaction-boxes'; +@import 'components/_options'; +@import 'components/datatables'; // for spending raising breakdown pages -@import "components/breakdowns"; -@import "components/sidebar"; -@import "components/side-nav"; -@import "components/table-styles"; -@import "components/results-info"; -@import "components/charts"; -@import "components/modals"; -@import "components/examples"; -@import "components/headings"; -@import "components/icon-headings"; -@import "components/search-controls"; -@import "components/data-landing-callouts"; - +@import 'components/breakdowns'; +@import 'components/sidebar'; +@import 'components/side-nav'; +@import 'components/table-styles'; +@import 'components/results-info'; +@import 'components/charts'; +@import 'components/modals'; +@import 'components/examples'; +@import 'components/headings'; +@import 'components/icon-headings'; +@import 'components/search-controls'; +@import 'components/data-landing-callouts'; diff --git a/fec/fec/static/scss/datatables.scss b/fec/fec/static/scss/datatables.scss index cdc6fc01c4..051653976c 100644 --- a/fec/fec/static/scss/datatables.scss +++ b/fec/fec/static/scss/datatables.scss @@ -1,18 +1,18 @@ -@import "global-common"; +@import 'global-common'; -@import "components/accordions"; -@import "components/messages"; -@import "components/datatable-panel"; -@import "components/datatables"; -@import "components/results-info"; -@import "components/downloads"; -@import "components/data-container"; -@import "components/filters"; -@import "components/date-grid"; -@import "components/dropdowns"; -@import "components/tags"; -@import "components/toggles"; -@import "components/tooltips"; -@import "components/type-styles"; -@import "components/overlay"; -@import "components/pagination"; +@import 'components/accordions'; +@import 'components/messages'; +@import 'components/datatable-panel'; +@import 'components/datatables'; +@import 'components/results-info'; +@import 'components/downloads'; +@import 'components/data-container'; +@import 'components/filters'; +@import 'components/date-grid'; +@import 'components/dropdowns'; +@import 'components/tags'; +@import 'components/toggles'; +@import 'components/tooltips'; +@import 'components/type-styles'; +@import 'components/overlay'; +@import 'components/pagination'; diff --git a/fec/fec/static/scss/elections.scss b/fec/fec/static/scss/elections.scss index 5df95ac80a..5e0cf2a2af 100644 --- a/fec/fec/static/scss/elections.scss +++ b/fec/fec/static/scss/elections.scss @@ -1,15 +1,15 @@ -@import "../../../../node_modules/leaflet/dist/leaflet"; +@import '../../../../node_modules/leaflet/dist/leaflet'; -@import "common"; -@import "components/agendas"; -@import "components/articles"; -@import "components/data-container"; -@import "components/datatables"; -@import "components/downloads"; -@import "components/fec-org-chart"; -@import "components/filters"; -@import "components/entity-header"; -@import "components/maps"; -@import "components/responsive-object"; -@import "components/results-info"; -@import "components/richtext"; +@import 'common'; +@import 'components/agendas'; +@import 'components/articles'; +@import 'components/data-container'; +@import 'components/datatables'; +@import 'components/downloads'; +@import 'components/fec-org-chart'; +@import 'components/filters'; +@import 'components/entity-header'; +@import 'components/maps'; +@import 'components/responsive-object'; +@import 'components/results-info'; +@import 'components/richtext'; diff --git a/fec/fec/static/scss/elements/_elements.scss b/fec/fec/static/scss/elements/_elements.scss index 9f2c3e5bc4..b272ade71c 100644 --- a/fec/fec/static/scss/elements/_elements.scss +++ b/fec/fec/static/scss/elements/_elements.scss @@ -22,7 +22,9 @@ html { -moz-osx-font-smoothing: grayscale; } -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: inherit; } @@ -34,19 +36,19 @@ body { } main { - &[aria-hidden="true"] { + &[aria-hidden='true'] { display: block !important; } } -[aria-hidden="true"] { +[aria-hidden='true'] { display: none !important; } -.wagtail-userbar-icon[aria-hidden="true"] { // for the edit-page bug for editors +.wagtail-userbar-icon[aria-hidden='true'] { + // for the edit-page bug for editors display: initial !important; } - // Printer settings @media print { nav, diff --git a/fec/fec/static/scss/elements/_forms.scss b/fec/fec/static/scss/elements/_forms.scss index 7835235947..16aee56c43 100644 --- a/fec/fec/static/scss/elements/_forms.scss +++ b/fec/fec/static/scss/elements/_forms.scss @@ -34,7 +34,7 @@ label { } input, -select[multiple="multiple"], +select[multiple='multiple'], textarea, select { background-color: $inverse; @@ -59,26 +59,26 @@ select { select { // & { - width: auto; - background-color: transparent; - background-repeat: no-repeat; - background-position: right u(2rem) top 50%; - background-size: 12px; - color: $base; - border: 2px solid $gray; - padding: u(.6rem 3em .6rem 1rem); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + width: auto; + background-color: transparent; + background-repeat: no-repeat; + background-position: right u(2rem) top 50%; + background-size: 12px; + color: $base; + border: 2px solid $gray; + padding: u(0.6rem 3em 0.6rem 1rem); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; // } @include appearance(none); @include u-icon-bg($arrow-down, $primary); - + &::-ms-expand { display: none; } - + &:hover:not([disabled]) { background-color: $gray-medium; } @@ -88,11 +88,11 @@ textarea { resize: vertical; } -input[type="search"] { +input[type='search'] { @include appearance(none); } -input[type="file"] { +input[type='file'] { padding-bottom: u(1rem); width: 100%; } @@ -133,24 +133,24 @@ input[type="file"] { //
// -[type="checkbox"], -[type="radio"] { +[type='checkbox'], +[type='radio'] { @include u-visually-hidden; } -[type="checkbox"] + label, -[type="radio"] + label { +[type='checkbox'] + label, +[type='radio'] + label { border: 1px solid $gray; background-color: $gray; display: inline-block; cursor: pointer; line-height: u(2rem); - margin: u(0 0 1rem .25rem); - padding: u(.4rem .8rem .4rem 3rem); + margin: u(0 0 1rem 0.25rem); + padding: u(0.4rem 0.8rem 0.4rem 3rem); &:hover { background-color: $gray-medium; - border-color: $gray-medium + border-color: $gray-medium; } &::before { @@ -160,21 +160,21 @@ input[type="file"] { content: ''; display: inline-block; height: u(1.6rem); - margin-right: .6em; + margin-right: 0.6em; margin-left: u(-2.4rem); - text-indent: .15em; + text-indent: 0.15em; width: u(1.6rem); vertical-align: -4px; } } -[type="radio"] + label::before { +[type='radio'] + label::before { height: u(1.6rem); width: u(1.6rem); border-radius: u(1.6rem); } -[type="checkbox"]:checked + label { +[type='checkbox']:checked + label { background-color: transparent; &::before { @@ -182,7 +182,7 @@ input[type="file"] { } } -[type="radio"]:checked + label { +[type='radio']:checked + label { background-color: transparent; &::before { @@ -191,7 +191,7 @@ input[type="file"] { } } -[type="checkbox"]:checked + label::before { +[type='checkbox']:checked + label::before { background-position: 50%; background-size: 12px; background-repeat: no-repeat; @@ -199,13 +199,13 @@ input[type="file"] { @include u-icon-bg($check, $inverse); } -[type="checkbox"]:focus + label, -[type="radio"]:focus + label { +[type='checkbox']:focus + label, +[type='radio']:focus + label { box-shadow: 0 0 2px 2px $focus; } -[type="checkbox"]:disabled + label::before, -[type="radio"]:disabled + label::before { +[type='checkbox']:disabled + label::before, +[type='radio']:disabled + label::before { cursor: not-allowed; } @@ -214,9 +214,9 @@ input[type="file"] { // // -[type="submit"], -[type="reset"], -[type="button"], +[type='submit'], +[type='reset'], +[type='button'], button { background: none; border: none; @@ -240,5 +240,5 @@ button { } .range__input input { - padding: u(0 .7rem) + padding: u(0 0.7rem); } diff --git a/fec/fec/static/scss/elements/_tables.scss b/fec/fec/static/scss/elements/_tables.scss index 0c32ee5886..c610fff477 100644 --- a/fec/fec/static/scss/elements/_tables.scss +++ b/fec/fec/static/scss/elements/_tables.scss @@ -6,7 +6,7 @@ table { margin: 0; table-layout: fixed; width: 100%; - @include font-feature-settings("kern", "liga", "tnum"); + @include font-feature-settings('kern', 'liga', 'tnum'); } th { @@ -17,7 +17,6 @@ th { td { padding: 0; - } tr, diff --git a/fec/fec/static/scss/elements/_typography.scss b/fec/fec/static/scss/elements/_typography.scss index 5abcb8c34b..423529d373 100644 --- a/fec/fec/static/scss/elements/_typography.scss +++ b/fec/fec/static/scss/elements/_typography.scss @@ -20,7 +20,7 @@ body { font-size: u(1.4rem); line-height: 1.8; - @include font-feature-settings("kern", "liga", "pnum"); + @include font-feature-settings('kern', 'liga', 'pnum'); } h1 { diff --git a/fec/fec/static/scss/entity.scss b/fec/fec/static/scss/entity.scss index 87011bb5df..1b5191621a 100644 --- a/fec/fec/static/scss/entity.scss +++ b/fec/fec/static/scss/entity.scss @@ -1,16 +1,16 @@ /* Used inside candidate-single and committee-single */ -@import "base"; +@import 'base'; -@import "common"; -@import "components/entity-header"; -@import "components/candidate-page"; -@import "components/data-container"; -@import "components/datatable-panel"; -@import "components/downloads"; -@import "components/datatables"; -@import "components/datatable-panel"; -@import "components/downloads"; -@import "components/table-styles"; -@import "components/results-info"; -@import "components/callouts"; -@import "components/committee-snapshot"; +@import 'common'; +@import 'components/entity-header'; +@import 'components/candidate-page'; +@import 'components/data-container'; +@import 'components/datatable-panel'; +@import 'components/downloads'; +@import 'components/datatables'; +@import 'components/datatable-panel'; +@import 'components/downloads'; +@import 'components/table-styles'; +@import 'components/results-info'; +@import 'components/callouts'; +@import 'components/committee-snapshot'; diff --git a/fec/fec/static/scss/home.scss b/fec/fec/static/scss/home.scss index 8e8ac3d203..54a604512c 100644 --- a/fec/fec/static/scss/home.scss +++ b/fec/fec/static/scss/home.scss @@ -2,21 +2,21 @@ duped from elections.scss: If you add any new rules here, make sure there's a corresponding component in sample-homepage-for-purgecss.html */ -@import "../../../../node_modules/leaflet/dist/leaflet"; +@import '../../../../node_modules/leaflet/dist/leaflet'; -@import "common"; -@import "components/agendas"; -@import "components/articles"; -@import "components/data-container"; -@import "components/datatables"; -@import "components/downloads"; -@import "components/fec-org-chart"; -@import "components/filters"; -@import "components/entity-header"; -@import "components/maps"; -@import "components/responsive-object"; -@import "components/results-info"; -@import "components/richtext"; +@import 'common'; +@import 'components/agendas'; +@import 'components/articles'; +@import 'components/data-container'; +@import 'components/datatables'; +@import 'components/downloads'; +@import 'components/fec-org-chart'; +@import 'components/filters'; +@import 'components/entity-header'; +@import 'components/maps'; +@import 'components/responsive-object'; +@import 'components/results-info'; +@import 'components/richtext'; /* end dupe from elections.scss */ diff --git a/fec/fec/static/scss/layout/_grid.scss b/fec/fec/static/scss/layout/_grid.scss index 0617689623..64ba4b5fa0 100644 --- a/fec/fec/static/scss/layout/_grid.scss +++ b/fec/fec/static/scss/layout/_grid.scss @@ -40,7 +40,7 @@ &.commissioner-height { min-height: u(10rem); } - + &.text-centered { text-align: center; } @@ -89,24 +89,24 @@ object-fit: contain; padding: u(2rem); width: 100%; - } + } - &.icon--large { - img { + &.icon--large { + img { height: u(20rem); - } + } - h2 { + h2 { width: 75%; margin: 1rem auto; - } + } - p { + p { width: 85%; margin: 1rem auto 2rem; - } } } +} .grid__icon--deep-red { img { @@ -119,7 +119,7 @@ background-color: $navy; } } - .grid__icon--white { +.grid__icon--white { img { background-color: $inverse; } @@ -129,7 +129,9 @@ // This is based on $large-screen, but we have to convert to px so that we can // subtract a pixel. Otherwise, the breakpoints will overlap at 860px (the // large breakpoint). -@include media(min-width $medium-screen max-width (strip-units($large-screen) * $em-base - 1)) { +@include media( + min-width $medium-screen max-width (strip-units($large-screen) * $em-base - 1) +) { .grid--2-wide, .grid--3-wide, .grid--4-wide, diff --git a/fec/fec/static/scss/layout/_layout.scss b/fec/fec/static/scss/layout/_layout.scss index fd0c7f0aac..8c2a69faf3 100644 --- a/fec/fec/static/scss/layout/_layout.scss +++ b/fec/fec/static/scss/layout/_layout.scss @@ -105,7 +105,7 @@ border-top: 1px solid $primary; margin-top: u(2rem); padding-top: u(2rem); - min-width:u(68rem); + min-width: u(68rem); &.content__section--extra { padding-top: u(4rem); @@ -137,7 +137,7 @@ } .u-padding--top--small { - padding-top: u(.5rem) !important; + padding-top: u(0.5rem) !important; } .u-padding--top--med { @@ -149,7 +149,7 @@ } .u-padding--bottom--small { - padding-bottom: u(.5rem) !important; + padding-bottom: u(0.5rem) !important; } .u-padding--left { @@ -174,7 +174,7 @@ } .u-margin--bottom--small { - margin-bottom: u(.5rem); + margin-bottom: u(0.5rem); } .u-margin--top { diff --git a/fec/fec/static/scss/legal-common.scss b/fec/fec/static/scss/legal-common.scss index d36787e5ab..faffae2f49 100644 --- a/fec/fec/static/scss/legal-common.scss +++ b/fec/fec/static/scss/legal-common.scss @@ -1,10 +1,10 @@ -@import "global"; +@import 'global'; -@import "common"; +@import 'common'; -@import "components/legal-search"; -@import "components/search-controls"; -@import "components/posts"; -@import "components/table-styles"; -@import "datatables"; -@import "components/entity-header"; +@import 'components/legal-search'; +@import 'components/search-controls'; +@import 'components/posts'; +@import 'components/table-styles'; +@import 'datatables'; +@import 'components/entity-header'; diff --git a/fec/fec/static/scss/legal.scss b/fec/fec/static/scss/legal.scss index 95a1c063ef..224e4b5dcc 100644 --- a/fec/fec/static/scss/legal.scss +++ b/fec/fec/static/scss/legal.scss @@ -1,9 +1,9 @@ -@import "global"; +@import 'global'; -@import "common"; -@import "datatables"; -@import "components/legal-search"; -@import "components/search-controls"; -@import "components/posts"; -@import "components/headings"; -@import "components/table-styles"; +@import 'common'; +@import 'datatables'; +@import 'components/legal-search'; +@import 'components/search-controls'; +@import 'components/posts'; +@import 'components/headings'; +@import 'components/table-styles'; diff --git a/fec/fec/static/scss/mixins/_icon-mixins.scss b/fec/fec/static/scss/mixins/_icon-mixins.scss index 785cc07388..c0a0fcaaab 100644 --- a/fec/fec/static/scss/mixins/_icon-mixins.scss +++ b/fec/fec/static/scss/mixins/_icon-mixins.scss @@ -2,13 +2,18 @@ // @function str-replace($string, $search, $replace: '') { - $index: str-index($string, $search); + $index: str-index($string, $search); - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); - } + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + str-replace( + str-slice($string, $index + str-length($search)), + $search, + $replace + ); + } - @return $string; + @return $string; } @function svg-fill($svg, $color) { diff --git a/fec/fec/static/scss/mixins/_type-mixins.scss b/fec/fec/static/scss/mixins/_type-mixins.scss index 54185545a2..ac95c4f652 100644 --- a/fec/fec/static/scss/mixins/_type-mixins.scss +++ b/fec/fec/static/scss/mixins/_type-mixins.scss @@ -63,7 +63,7 @@ font-size: u(1.8rem); font-weight: bold; line-height: 1.2; - letter-spacing: -.3px; + letter-spacing: -0.3px; margin: u(1.4rem 0 1rem 0); } } @@ -73,7 +73,7 @@ font-family: $serif; font-size: u(1.6rem); font-weight: bold; - margin: u(1.5rem 0 .75rem 0); + margin: u(1.5rem 0 0.75rem 0); line-height: 1.33; } } @@ -91,7 +91,7 @@ } @mixin t-highlight { - background-color: rgba($aqua, .15); + background-color: rgba($aqua, 0.15); font-weight: bold; padding: 0 0.3em; } diff --git a/fec/fec/static/scss/mixins/_utilities.scss b/fec/fec/static/scss/mixins/_utilities.scss index 8b9e0901a5..369c2639d8 100644 --- a/fec/fec/static/scss/mixins/_utilities.scss +++ b/fec/fec/static/scss/mixins/_utilities.scss @@ -26,7 +26,7 @@ .is-disabled, [disabled] { - opacity: .5; + opacity: 0.5; cursor: default; } @@ -86,10 +86,9 @@ } .u-break-titles { - li { - line-height: 1.4; - margin-bottom: u(1rem); + line-height: 1.4; + margin-bottom: u(1rem); } } @@ -131,7 +130,6 @@ // @mixin u-font-color($color) { - & { color: $color; } @@ -176,19 +174,19 @@ border-color: $inverse; } - [type="checkbox"] + label, - [type="radio"] + label, - [type="checkbox"] + label::before, - [type="radio"] + label::before { + [type='checkbox'] + label, + [type='radio'] + label, + [type='checkbox'] + label::before, + [type='radio'] + label::before { color: $base; } - [type="checkbox"]:checked + label, - [type="radio"]:checked + label { + [type='checkbox']:checked + label, + [type='radio']:checked + label { color: $inverse; } - [type="checkbox"]:checked + label::before { + [type='checkbox']:checked + label::before { background-color: $inverse; @include u-icon-bg($check, $base); } @@ -207,7 +205,7 @@ &:active:not(.is-disabled, [disabled]), &:focus, &.is-active { - background-color: rgba($inverse, .3); + background-color: rgba($inverse, 0.3); color: $inverse; } } @@ -215,7 +213,7 @@ option { background-color: $neutral; color: $base; - padding: u(.5rem); + padding: u(0.5rem); } } @@ -229,7 +227,7 @@ @include u-form--inverse; @include u-font-color($gray-lightest); - + a { border-bottom-color: $gray-lightest; @@ -282,7 +280,13 @@ @mixin u-bg--neutral() { background-color: $gray-lightest; @include u-font-color($base); - @include u-form-color($inverse, $primary, $primary-contrast, 'neutral', $primary); + @include u-form-color( + $inverse, + $primary, + $primary-contrast, + 'neutral', + $primary + ); a { &:hover { @@ -312,7 +316,9 @@ } @mixin u-bg--neutral() { - & { background-color: $gray-lightest; } + & { + background-color: $gray-lightest; + } @include u-font-color($base); @@ -357,7 +363,13 @@ // $color: - Color variable the icon should be // -@mixin u-icon($icon, $color: $base, $width: 4rem, $height: 4rem, $background-size: 50%) { +@mixin u-icon( + $icon, + $color: $base, + $width: 4rem, + $height: 4rem, + $background-size: 50% +) { background-image: url('#{svg-fill($icon, $color)}'); background-repeat: no-repeat; background-position: center center; @@ -420,7 +432,7 @@ } .u-fade-in { - @include animation(fadeIn .8s ease-out); + @include animation(fadeIn 0.8s ease-out); } // Printer style utitlity diff --git a/fec/fec/static/scss/vendor/bourbon/_bourbon-deprecated-upcoming.scss b/fec/fec/static/scss/vendor/bourbon/_bourbon-deprecated-upcoming.scss index c15626ea5e..3d86678f09 100644 --- a/fec/fec/static/scss/vendor/bourbon/_bourbon-deprecated-upcoming.scss +++ b/fec/fec/static/scss/vendor/bourbon/_bourbon-deprecated-upcoming.scss @@ -6,8 +6,12 @@ @warn "The inline-block mixin is deprecated and will be removed in the next major version release"; } -@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { - +@mixin button( + $style: simple, + $base-color: #4294f0, + $text-size: inherit, + $padding: 7px 18px +) { @if type-of($style) == string and type-of($base-color) == color { @include buttonstyle($style, $base-color, $text-size, $padding); } @@ -86,39 +90,38 @@ // Colored button @if $type == simple { @include simple($b-color, false, $t-size, $pad); - } - - @else if $type == shiny { + } @else if $type == shiny { @include shiny($b-color, false, $t-size, $pad); - } - - @else if $type == pill { + } @else if $type == pill { @include pill($b-color, false, $t-size, $pad); - } - - @else if $type == flat { + } @else if $type == flat { @include flat($b-color, false, $t-size, $pad); } } // Simple Button -@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { - $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); - $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); - $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); +@mixin simple( + $base-color, + $grayscale: false, + $textsize: inherit, + $padding: 7px 18px +) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); @if is-light($base-color) { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border: grayscale($border); - $inset-shadow: grayscale($inset-shadow); + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); + $text-shadow: grayscale($text-shadow); } border: 1px solid $border; @@ -128,24 +131,36 @@ display: inline-block; font-size: $textsize; font-weight: bold; - @include linear-gradient ($base-color, $stop-gradient); + @include linear-gradient($base-color, $stop-gradient); padding: $padding; text-decoration: none; text-shadow: 0 1px 0 $text-shadow; background-clip: padding-box; &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); - $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + $base-color-hover: adjust-color( + $base-color, + $saturation: -4%, + $lightness: -5% + ); + $inset-shadow-hover: adjust-color( + $base-color, + $saturation: -7%, + $lightness: 5% + ); + $stop-gradient-hover: adjust-color( + $base-color, + $saturation: 8%, + $lightness: -14% + ); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $inset-shadow-hover: grayscale($inset-shadow-hover); + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); $stop-gradient-hover: grayscale($stop-gradient-hover); } - @include linear-gradient ($base-color-hover, $stop-gradient-hover); + @include linear-gradient($base-color-hover, $stop-gradient-hover); box-shadow: inset 0 1px 0 0 $inset-shadow-hover; cursor: pointer; @@ -153,46 +168,77 @@ &:active:not(:disabled), &:focus:not(:disabled) { - $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + $border-active: adjust-color( + $base-color, + $saturation: 9%, + $lightness: -14% + ); + $inset-shadow-active: adjust-color( + $base-color, + $saturation: 7%, + $lightness: -17% + ); @if $grayscale == true { - $border-active: grayscale($border-active); + $border-active: grayscale($border-active); $inset-shadow-active: grayscale($inset-shadow-active); } border: 1px solid $border-active; - box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; + box-shadow: + inset 0 0 8px 4px $inset-shadow-active, + inset 0 0 8px 4px $inset-shadow-active; } } // Shiny Button -@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { - $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); - $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); - $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); - $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); - $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); - $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); - $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); +@mixin shiny( + $base-color, + $grayscale: false, + $textsize: inherit, + $padding: 7px 18px +) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color( + $base-color, + $red: -126, + $green: -127, + $blue: -122 + ); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color( + $base-color, + $red: -140, + $green: -141, + $blue: -114 + ); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); @if is-light($base-color) { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border: grayscale($border); + $border: grayscale($border); $border-bottom: grayscale($border-bottom); - $fourth-stop: grayscale($fourth-stop); - $inset-shadow: grayscale($inset-shadow); - $second-stop: grayscale($second-stop); - $text-shadow: grayscale($text-shadow); - $third-stop: grayscale($third-stop); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); } - @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + @include linear-gradient( + top, + $base-color 0%, + $second-stop 50%, + $third-stop 50%, + $fourth-stop 100% + ); border: 1px solid $border; border-bottom: 1px solid $border-bottom; @@ -208,28 +254,56 @@ text-shadow: 0 -1px 1px $text-shadow; &:hover:not(:disabled) { - $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); - $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); - $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); - $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + $first-stop-hover: adjust-color( + $base-color, + $red: -13, + $green: -15, + $blue: -18 + ); + $second-stop-hover: adjust-color( + $base-color, + $red: -66, + $green: -62, + $blue: -51 + ); + $third-stop-hover: adjust-color( + $base-color, + $red: -93, + $green: -85, + $blue: -66 + ); + $fourth-stop-hover: adjust-color( + $base-color, + $red: -86, + $green: -80, + $blue: -63 + ); @if $grayscale == true { - $first-stop-hover: grayscale($first-stop-hover); + $first-stop-hover: grayscale($first-stop-hover); $second-stop-hover: grayscale($second-stop-hover); - $third-stop-hover: grayscale($third-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); $fourth-stop-hover: grayscale($fourth-stop-hover); } - @include linear-gradient(top, $first-stop-hover 0%, - $second-stop-hover 50%, - $third-stop-hover 50%, - $fourth-stop-hover 100%); + @include linear-gradient( + top, + $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100% + ); cursor: pointer; } &:active:not(:disabled), &:focus:not(:disabled) { - $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + $inset-shadow-active: adjust-color( + $base-color, + $red: -111, + $green: -116, + $blue: -122 + ); @if $grayscale == true { $inset-shadow-active: grayscale($inset-shadow-active); @@ -240,27 +314,62 @@ } // Pill Button -@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { - $color: hsl(0, 0, 100%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); - $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); - $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); - $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); +@mixin pill( + $base-color, + $grayscale: false, + $textsize: inherit, + $padding: 7px 18px +) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color( + $base-color, + $hue: 8, + $saturation: -11%, + $lightness: -26% + ); + $border-sides: adjust-color( + $base-color, + $hue: 4, + $saturation: -21%, + $lightness: -21% + ); + $border-top: adjust-color( + $base-color, + $hue: -1, + $saturation: -30%, + $lightness: -15% + ); + $inset-shadow: adjust-color( + $base-color, + $hue: -1, + $saturation: -1%, + $lightness: 7% + ); + $stop-gradient: adjust-color( + $base-color, + $hue: 8, + $saturation: 14%, + $lightness: -10% + ); + $text-shadow: adjust-color( + $base-color, + $hue: 5, + $saturation: -19%, + $lightness: -15% + ); @if is-light($base-color) { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow: grayscale($inset-shadow); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); + $text-shadow: grayscale($text-shadow); } border: 1px solid $border-top; @@ -272,7 +381,7 @@ font-size: $textsize; font-weight: normal; line-height: 1; - @include linear-gradient ($base-color, $stop-gradient); + @include linear-gradient($base-color, $stop-gradient); padding: $padding; text-align: center; text-decoration: none; @@ -280,25 +389,54 @@ background-clip: padding-box; &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $lightness: -4.5%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); - $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); - $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color( + $base-color, + $hue: 8, + $saturation: 13.5%, + $lightness: -32% + ); + $border-sides: adjust-color( + $base-color, + $hue: 4, + $saturation: -2%, + $lightness: -27% + ); + $border-top: adjust-color( + $base-color, + $hue: -1, + $saturation: -17%, + $lightness: -21% + ); + $inset-shadow-hover: adjust-color( + $base-color, + $saturation: -1%, + $lightness: 3% + ); + $stop-gradient-hover: adjust-color( + $base-color, + $hue: 8, + $saturation: -4%, + $lightness: -15.5% + ); + $text-shadow-hover: adjust-color( + $base-color, + $hue: 5, + $saturation: -5%, + $lightness: -22% + ); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow-hover: grayscale($inset-shadow-hover); + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); $stop-gradient-hover: grayscale($stop-gradient-hover); - $text-shadow-hover: grayscale($text-shadow-hover); + $text-shadow-hover: grayscale($text-shadow-hover); } - @include linear-gradient ($base-color-hover, $stop-gradient-hover); + @include linear-gradient($base-color-hover, $stop-gradient-hover); background-clip: padding-box; border: 1px solid $border-top; @@ -310,18 +448,43 @@ &:active:not(:disabled), &:focus:not(:disabled) { - $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); - $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); - $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); - $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); - $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + $active-color: adjust-color( + $base-color, + $hue: 4, + $saturation: -12%, + $lightness: -10% + ); + $border-active: adjust-color( + $base-color, + $hue: 6, + $saturation: -2.5%, + $lightness: -30% + ); + $border-bottom-active: adjust-color( + $base-color, + $hue: 11, + $saturation: 6%, + $lightness: -31% + ); + $inset-shadow-active: adjust-color( + $base-color, + $hue: 9, + $saturation: 2%, + $lightness: -21.5% + ); + $text-shadow-active: adjust-color( + $base-color, + $hue: 5, + $saturation: -12%, + $lightness: -21.5% + ); @if $grayscale == true { - $active-color: grayscale($active-color); - $border-active: grayscale($border-active); + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); $border-bottom-active: grayscale($border-bottom-active); - $inset-shadow-active: grayscale($inset-shadow-active); - $text-shadow-active: grayscale($text-shadow-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); } background: $active-color; @@ -333,11 +496,16 @@ } // Flat Button -@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { - $color: hsl(0, 0, 100%); +@mixin flat( + $base-color, + $grayscale: false, + $textsize: inherit, + $padding: 7px 18px +) { + $color: hsl(0, 0, 100%); @if is-light($base-color) { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); } background-color: $base-color; @@ -351,8 +519,12 @@ text-decoration: none; background-clip: padding-box; - &:hover:not(:disabled){ - $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); + &:hover:not(:disabled) { + $base-color-hover: adjust-color( + $base-color, + $saturation: 4%, + $lightness: 5% + ); @if $grayscale == true { $base-color-hover: grayscale($base-color-hover); @@ -364,7 +536,11 @@ &:active:not(:disabled), &:focus:not(:disabled) { - $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $base-color-active: adjust-color( + $base-color, + $saturation: -4%, + $lightness: -5% + ); @if $grayscale == true { $base-color-active: grayscale($base-color-active); @@ -378,15 +554,20 @@ // Flexible grid @function flex-grid($columns, $container-columns: $fg-max-columns) { $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * + $fg-gutter; @return percentage(math.div($width, $container-width)); @warn "The flex-grid function is deprecated and will be removed in the next major version release"; } // Flexible gutter -@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; +@function flex-gutter( + $container-columns: $fg-max-columns, + $gutter: $fg-gutter +) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * + $fg-gutter; @return percentage(math.div($gutter, $container-width)); @warn "The flex-gutter function is deprecated and will be removed in the next major version release"; diff --git a/fec/fec/static/scss/vendor/bourbon/_bourbon.scss b/fec/fec/static/scss/vendor/bourbon/_bourbon.scss index 9b6f8c4e9b..c7824291cb 100644 --- a/fec/fec/static/scss/vendor/bourbon/_bourbon.scss +++ b/fec/fec/static/scss/vendor/bourbon/_bourbon.scss @@ -3,85 +3,85 @@ // Copyright 2011-2015 thoughtbot, inc. // MIT License -@import "settings/prefixer"; -@import "settings/px-to-em"; -@import "settings/asset-pipeline"; +@import 'settings/prefixer'; +@import 'settings/px-to-em'; +@import 'settings/asset-pipeline'; -@import "functions/assign-inputs"; -@import "functions/contains"; -@import "functions/contains-falsy"; -@import "functions/is-length"; -@import "functions/is-light"; -@import "functions/is-number"; -@import "functions/is-size"; -@import "functions/px-to-em"; -@import "functions/px-to-rem"; -@import "functions/shade"; -@import "functions/strip-units"; -@import "functions/tint"; -@import "functions/transition-property-name"; -@import "functions/unpack"; -@import "functions/modular-scale"; +@import 'functions/assign-inputs'; +@import 'functions/contains'; +@import 'functions/contains-falsy'; +@import 'functions/is-length'; +@import 'functions/is-light'; +@import 'functions/is-number'; +@import 'functions/is-size'; +@import 'functions/px-to-em'; +@import 'functions/px-to-rem'; +@import 'functions/shade'; +@import 'functions/strip-units'; +@import 'functions/tint'; +@import 'functions/transition-property-name'; +@import 'functions/unpack'; +@import 'functions/modular-scale'; -@import "helpers/convert-units"; -@import "helpers/directional-values"; -@import "helpers/font-source-declaration"; -@import "helpers/gradient-positions-parser"; -@import "helpers/linear-angle-parser"; -@import "helpers/linear-gradient-parser"; -@import "helpers/linear-positions-parser"; -@import "helpers/linear-side-corner-parser"; -@import "helpers/radial-arg-parser"; -@import "helpers/radial-positions-parser"; -@import "helpers/radial-gradient-parser"; -@import "helpers/render-gradients"; -@import "helpers/shape-size-stripper"; -@import "helpers/str-to-num"; +@import 'helpers/convert-units'; +@import 'helpers/directional-values'; +@import 'helpers/font-source-declaration'; +@import 'helpers/gradient-positions-parser'; +@import 'helpers/linear-angle-parser'; +@import 'helpers/linear-gradient-parser'; +@import 'helpers/linear-positions-parser'; +@import 'helpers/linear-side-corner-parser'; +@import 'helpers/radial-arg-parser'; +@import 'helpers/radial-positions-parser'; +@import 'helpers/radial-gradient-parser'; +@import 'helpers/render-gradients'; +@import 'helpers/shape-size-stripper'; +@import 'helpers/str-to-num'; -@import "css3/animation"; -@import "css3/appearance"; -@import "css3/backface-visibility"; -@import "css3/background"; -@import "css3/background-image"; -@import "css3/border-image"; -@import "css3/calc"; -@import "css3/columns"; -@import "css3/filter"; -@import "css3/flex-box"; -@import "css3/font-face"; -@import "css3/font-feature-settings"; -@import "css3/hidpi-media-query"; -@import "css3/hyphens"; -@import "css3/image-rendering"; -@import "css3/keyframes"; -@import "css3/linear-gradient"; -@import "css3/perspective"; -@import "css3/placeholder"; -@import "css3/radial-gradient"; -@import "css3/selection"; -@import "css3/text-decoration"; -@import "css3/transform"; -@import "css3/transition"; -@import "css3/user-select"; +@import 'css3/animation'; +@import 'css3/appearance'; +@import 'css3/backface-visibility'; +@import 'css3/background'; +@import 'css3/background-image'; +@import 'css3/border-image'; +@import 'css3/calc'; +@import 'css3/columns'; +@import 'css3/filter'; +@import 'css3/flex-box'; +@import 'css3/font-face'; +@import 'css3/font-feature-settings'; +@import 'css3/hidpi-media-query'; +@import 'css3/hyphens'; +@import 'css3/image-rendering'; +@import 'css3/keyframes'; +@import 'css3/linear-gradient'; +@import 'css3/perspective'; +@import 'css3/placeholder'; +@import 'css3/radial-gradient'; +@import 'css3/selection'; +@import 'css3/text-decoration'; +@import 'css3/transform'; +@import 'css3/transition'; +@import 'css3/user-select'; -@import "addons/border-color"; -@import "addons/border-radius"; -@import "addons/border-style"; -@import "addons/border-width"; -@import "addons/buttons"; -@import "addons/clearfix"; -@import "addons/ellipsis"; -@import "addons/font-stacks"; -@import "addons/hide-text"; -@import "addons/margin"; -@import "addons/padding"; -@import "addons/position"; -@import "addons/prefixer"; -@import "addons/retina-image"; -@import "addons/size"; -@import "addons/text-inputs"; -@import "addons/timing-functions"; -@import "addons/triangle"; -@import "addons/word-wrap"; +@import 'addons/border-color'; +@import 'addons/border-radius'; +@import 'addons/border-style'; +@import 'addons/border-width'; +@import 'addons/buttons'; +@import 'addons/clearfix'; +@import 'addons/ellipsis'; +@import 'addons/font-stacks'; +@import 'addons/hide-text'; +@import 'addons/margin'; +@import 'addons/padding'; +@import 'addons/position'; +@import 'addons/prefixer'; +@import 'addons/retina-image'; +@import 'addons/size'; +@import 'addons/text-inputs'; +@import 'addons/timing-functions'; +@import 'addons/triangle'; +@import 'addons/word-wrap'; -@import "bourbon-deprecated-upcoming"; +@import 'bourbon-deprecated-upcoming'; diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_buttons.scss b/fec/fec/static/scss/vendor/bourbon/addons/_buttons.scss index debeabc539..c67cab366a 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_buttons.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_buttons.scss @@ -48,17 +48,15 @@ /// /// @todo Remove double assigned variables (Lines 59–62) in v5.0.0 -$buttons-list: 'button', - 'input[type="button"]', - 'input[type="reset"]', - 'input[type="submit"]'; +$buttons-list: 'button', 'input[type="button"]', 'input[type="reset"]', + 'input[type="submit"]'; -$all-buttons: assign-inputs($buttons-list); +$all-buttons: assign-inputs($buttons-list); $all-buttons-active: assign-inputs($buttons-list, active); -$all-buttons-focus: assign-inputs($buttons-list, focus); -$all-buttons-hover: assign-inputs($buttons-list, hover); +$all-buttons-focus: assign-inputs($buttons-list, focus); +$all-buttons-hover: assign-inputs($buttons-list, hover); -$all-button-inputs: $all-buttons; +$all-button-inputs: $all-buttons; $all-button-inputs-active: $all-buttons-active; -$all-button-inputs-focus: $all-buttons-focus; -$all-button-inputs-hover: $all-buttons-hover; +$all-button-inputs-focus: $all-buttons-focus; +$all-button-inputs-hover: $all-buttons-hover; diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_clearfix.scss b/fec/fec/static/scss/vendor/bourbon/addons/_clearfix.scss index 11313d66f1..5d01105d24 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_clearfix.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_clearfix.scss @@ -19,7 +19,7 @@ @mixin clearfix { &::after { clear: both; - content: ""; + content: ''; display: table; } } diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_font-stacks.scss b/fec/fec/static/scss/vendor/bourbon/addons/_font-stacks.scss index 57128f422a..b581972eb3 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_font-stacks.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_font-stacks.scss @@ -4,28 +4,28 @@ /// /// @type List -$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif; +$georgia: 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif; /// Helvetica font stack. /// /// @type List -$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; +$helvetica: 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', sans-serif; /// Lucida Grande font stack. /// /// @type List -$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif; +$lucida-grande: 'Lucida Grande', 'Tahoma', 'Verdana', 'Arial', sans-serif; /// Monospace font stack. /// /// @type List -$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; +$monospace: 'Bitstream Vera Sans Mono', 'Consolas', 'Courier', monospace; /// Verdana font stack. /// /// @type List -$verdana: "Verdana", "Geneva", sans-serif; +$verdana: 'Verdana', 'Geneva', sans-serif; diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_position.scss b/fec/fec/static/scss/vendor/bourbon/addons/_position.scss index e460f3ffdb..2e15789bf6 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_position.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_position.scss @@ -32,10 +32,10 @@ $coordinates: unpack($coordinates); $offsets: ( - top: nth($coordinates, 1), - right: nth($coordinates, 2), + top: nth($coordinates, 1), + right: nth($coordinates, 2), bottom: nth($coordinates, 3), - left: nth($coordinates, 4) + left: nth($coordinates, 4), ); position: $position; diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss b/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss index 6031e2d2fc..d4b00668be 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_prefixer.scss @@ -33,34 +33,44 @@ @each $prefix in $prefixes { @if $prefix == webkit { @if $prefix-for-webkit { - & { -webkit-#{$property}: $value; } + & { + -webkit-#{$property}: $value; + } } } @else if $prefix == moz { @if $prefix-for-mozilla { - & { -moz-#{$property}: $value; } + & { + -moz-#{$property}: $value; + } } } @else if $prefix == ms { @if $prefix-for-microsoft { - & { -ms-#{$property}: $value; } + & { + -ms-#{$property}: $value; + } } } @else if $prefix == o { @if $prefix-for-opera { - & { -o-#{$property}: $value; } + & { + -o-#{$property}: $value; + } } } @else if $prefix == spec { @if $prefix-for-spec { - & { #{$property}: $value; } + & { + #{$property}: $value; + } } - } @else { + } @else { @warn "Unrecognized prefix: #{$prefix}"; } } } @mixin disable-prefix-for-all() { - $prefix-for-webkit: false !global; - $prefix-for-mozilla: false !global; + $prefix-for-webkit: false !global; + $prefix-for-mozilla: false !global; $prefix-for-microsoft: false !global; - $prefix-for-opera: false !global; - $prefix-for-spec: false !global; + $prefix-for-opera: false !global; + $prefix-for-spec: false !global; } diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_retina-image.scss b/fec/fec/static/scss/vendor/bourbon/addons/_retina-image.scss index 7febbd7513..2e02d73464 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_retina-image.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_retina-image.scss @@ -1,22 +1,31 @@ -@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { +@mixin retina-image( + $filename, + $background-size, + $extension: png, + $retina-filename: null, + $retina-suffix: _2x, + $asset-pipeline: $asset-pipeline +) { @if $asset-pipeline { - background-image: image-url("#{$filename}.#{$extension}"); + background-image: image-url('#{$filename}.#{$extension}'); } @else { - background-image: url("#{$filename}.#{$extension}"); + background-image: url('#{$filename}.#{$extension}'); } @include hidpi { @if $asset-pipeline { @if $retina-filename { - background-image: image-url("#{$retina-filename}.#{$extension}"); + background-image: image-url('#{$retina-filename}.#{$extension}'); } @else { - background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); + background-image: image-url( + '#{$filename}#{$retina-suffix}.#{$extension}' + ); } } @else { @if $retina-filename { - background-image: url("#{$retina-filename}.#{$extension}"); + background-image: url('#{$retina-filename}.#{$extension}'); } @else { - background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); + background-image: url('#{$filename}#{$retina-suffix}.#{$extension}'); } } diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_text-inputs.scss b/fec/fec/static/scss/vendor/bourbon/addons/_text-inputs.scss index 20164d4ce5..831c54ad2c 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_text-inputs.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_text-inputs.scss @@ -90,23 +90,14 @@ /// /// @type List -$text-inputs-list: 'input[type="color"]', - 'input[type="date"]', - 'input[type="datetime"]', - 'input[type="datetime-local"]', - 'input[type="email"]', - 'input[type="month"]', - 'input[type="number"]', - 'input[type="password"]', - 'input[type="search"]', - 'input[type="tel"]', - 'input[type="text"]', - 'input[type="time"]', - 'input[type="url"]', - 'input[type="week"]', - 'textarea'; +$text-inputs-list: 'input[type="color"]', 'input[type="date"]', + 'input[type="datetime"]', 'input[type="datetime-local"]', + 'input[type="email"]', 'input[type="month"]', 'input[type="number"]', + 'input[type="password"]', 'input[type="search"]', 'input[type="tel"]', + 'input[type="text"]', 'input[type="time"]', 'input[type="url"]', + 'input[type="week"]', 'textarea'; -$all-text-inputs: assign-inputs($text-inputs-list); +$all-text-inputs: assign-inputs($text-inputs-list); $all-text-inputs-active: assign-inputs($text-inputs-list, active); -$all-text-inputs-focus: assign-inputs($text-inputs-list, focus); -$all-text-inputs-hover: assign-inputs($text-inputs-list, hover); +$all-text-inputs-focus: assign-inputs($text-inputs-list, focus); +$all-text-inputs-hover: assign-inputs($text-inputs-list, hover); diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_timing-functions.scss b/fec/fec/static/scss/vendor/bourbon/addons/_timing-functions.scss index 20e5f1d402..e6e361f074 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_timing-functions.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_timing-functions.scss @@ -6,29 +6,29 @@ /// /// @type cubic-bezier -$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); -$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); -$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); -$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); -$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); -$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); -$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); -$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); +$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); +$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); +$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); +$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); +$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); +$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); -$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); -$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); -$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); -$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); -$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); -$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); -$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); -$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); +$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); +$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); +$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); +$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); +$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); +$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); +$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); -$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); -$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); -$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); -$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); -$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); -$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); -$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); -$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); +$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); +$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); +$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); +$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); +$ease-in-out-expo: cubic-bezier(1, 0, 0, 1); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); +$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); diff --git a/fec/fec/static/scss/vendor/bourbon/addons/_triangle.scss b/fec/fec/static/scss/vendor/bourbon/addons/_triangle.scss index 26cfed136e..ca751e053e 100644 --- a/fec/fec/static/scss/vendor/bourbon/addons/_triangle.scss +++ b/fec/fec/static/scss/vendor/bourbon/addons/_triangle.scss @@ -7,7 +7,11 @@ height: 0; width: 0; - @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + @if ($direction == up) or + ($direction == down) or + ($direction == right) or + ($direction == left) + { $width: math.div($width, 2); $height: if(length($size) > 1, $height, math.div($height, 2)); @@ -32,7 +36,7 @@ border-top: $height solid $foreground-color; @if $direction == up-right { - border-left: $width solid $background-color; + border-left: $width solid $background-color; } @else if $direction == up-left { border-right: $width solid $background-color; } @@ -40,7 +44,7 @@ border-bottom: $height solid $foreground-color; @if $direction == down-right { - border-left: $width solid $background-color; + border-left: $width solid $background-color; } @else if $direction == down-left { border-right: $width solid $background-color; } @@ -53,11 +57,17 @@ border-style: solid; border-width: $height $width; } @else if ($direction == inset-right) { - border-color: $background-color $background-color $background-color $foreground-color; + border-color: $background-color + $background-color + $background-color + $foreground-color; border-style: solid; border-width: $width $height; } @else if ($direction == inset-left) { - border-color: $background-color $foreground-color $background-color $background-color; + border-color: $background-color + $foreground-color + $background-color + $background-color; border-style: solid; border-width: $width $height; } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_background-image.scss b/fec/fec/static/scss/vendor/bourbon/css3/_background-image.scss index d09f9b8203..8abb12ab88 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_background-image.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_background-image.scss @@ -12,29 +12,25 @@ $spec-image: (); @if (type-of($image) == string) { - $url-str: str-slice($image, 0, 3); + $url-str: str-slice($image, 0, 3); $gradient-type: str-slice($image, 0, 6); - @if $url-str == "url" { + @if $url-str == 'url' { $webkit-image: $image; - $spec-image: $image; - } - - @else if $gradient-type == "linear" { + $spec-image: $image; + } @else if $gradient-type == 'linear' { $gradients: _linear-gradient-parser($image); - $webkit-image: map-get($gradients, webkit-image); - $spec-image: map-get($gradients, spec-image); - } - - @else if $gradient-type == "radial" { + $webkit-image: map-get($gradients, webkit-image); + $spec-image: map-get($gradients, spec-image); + } @else if $gradient-type == 'radial' { $gradients: _radial-gradient-parser($image); $webkit-image: map-get($gradients, webkit-image); - $spec-image: map-get($gradients, spec-image); + $spec-image: map-get($gradients, spec-image); } } $webkit-images: append($webkit-images, $webkit-image, comma); - $spec-images: append($spec-images, $spec-image, comma); + $spec-images: append($spec-images, $spec-image, comma); } background-image: $webkit-images; diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_background.scss b/fec/fec/static/scss/vendor/bourbon/css3/_background.scss index efb4285779..6e99f1b8b0 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_background.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_background.scss @@ -13,41 +13,37 @@ $background-type: type-of($background); @if $background-type == string or $background-type == list { - $background-str: if($background-type == list, nth($background, 1), $background); + $background-str: if( + $background-type == list, + nth($background, 1), + $background + ); - $url-str: str-slice($background-str, 0, 3); + $url-str: str-slice($background-str, 0, 3); $gradient-type: str-slice($background-str, 0, 6); - @if $url-str == "url" { + @if $url-str == 'url' { $webkit-background: $background; - $spec-background: $background; - } - - @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser("#{$background}"); + $spec-background: $background; + } @else if $gradient-type == 'linear' { + $gradients: _linear-gradient-parser('#{$background}'); $webkit-background: map-get($gradients, webkit-image); - $spec-background: map-get($gradients, spec-image); - } - - @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser("#{$background}"); + $spec-background: map-get($gradients, spec-image); + } @else if $gradient-type == 'radial' { + $gradients: _radial-gradient-parser('#{$background}'); $webkit-background: map-get($gradients, webkit-image); - $spec-background: map-get($gradients, spec-image); - } - - @else { + $spec-background: map-get($gradients, spec-image); + } @else { $webkit-background: $background; - $spec-background: $background; + $spec-background: $background; } - } - - @else { + } @else { $webkit-background: $background; - $spec-background: $background; + $spec-background: $background; } $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); - $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); + $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); } background: $webkit-backgrounds; diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_border-image.scss b/fec/fec/static/scss/vendor/bourbon/css3/_border-image.scss index e74efc05c4..41d22ca807 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_border-image.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_border-image.scss @@ -10,44 +10,36 @@ @if $border-type == string or list { $border-str: if($border-type == list, nth($border, 1), $border); - $url-str: str-slice($border-str, 0, 3); + $url-str: str-slice($border-str, 0, 3); $gradient-type: str-slice($border-str, 0, 6); - @if $url-str == "url" { + @if $url-str == 'url' { $webkit-border: $border; - $spec-border: $border; - } - - @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser("#{$border}"); + $spec-border: $border; + } @else if $gradient-type == 'linear' { + $gradients: _linear-gradient-parser('#{$border}'); $webkit-border: map-get($gradients, webkit-image); - $spec-border: map-get($gradients, spec-image); - } - - @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser("#{$border}"); + $spec-border: map-get($gradients, spec-image); + } @else if $gradient-type == 'radial' { + $gradients: _radial-gradient-parser('#{$border}'); $webkit-border: map-get($gradients, webkit-image); - $spec-border: map-get($gradients, spec-image); - } - - @else { + $spec-border: map-get($gradients, spec-image); + } @else { $webkit-border: $border; - $spec-border: $border; + $spec-border: $border; } - } - - @else { + } @else { $webkit-border: $border; - $spec-border: $border; + $spec-border: $border; } $webkit-borders: append($webkit-borders, $webkit-border, comma); - $spec-borders: append($spec-borders, $spec-border, comma); + $spec-borders: append($spec-borders, $spec-border, comma); } -webkit-border-image: $webkit-borders; - border-image: $spec-borders; - border-style: solid; + border-image: $spec-borders; + border-style: solid; } //Examples: diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_columns.scss b/fec/fec/static/scss/vendor/bourbon/css3/_columns.scss index 96117670cc..aba49362ad 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_columns.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_columns.scss @@ -32,7 +32,7 @@ @include prefixer(column-rule-style, $style, webkit moz spec); } -@mixin column-rule-width ($width: none) { +@mixin column-rule-width($width: none) { @include prefixer(column-rule-width, $width, webkit moz spec); } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss b/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss index 71d81c85cc..1192d75085 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_flex-box.scss @@ -16,41 +16,51 @@ } @mixin box-orient($orient: inline-axis) { -// horizontal|vertical|inline-axis|block-axis|inherit + // horizontal|vertical|inline-axis|block-axis|inherit @include prefixer(box-orient, $orient, webkit moz spec); } @mixin box-pack($pack: start) { -// start|end|center|justify + // start|end|center|justify @include prefixer(box-pack, $pack, webkit moz spec); - & { -ms-flex-pack: $pack; } // IE 10 + & { + -ms-flex-pack: $pack; + } // IE 10 } @mixin box-align($align: stretch) { -// start|end|center|baseline|stretch + // start|end|center|baseline|stretch @include prefixer(box-align, $align, webkit moz spec); - & { -ms-flex-align: $align; } // IE 10 + & { + -ms-flex-align: $align; + } // IE 10 } @mixin box-direction($direction: normal) { -// normal|reverse|inherit + // normal|reverse|inherit @include prefixer(box-direction, $direction, webkit moz spec); - & { -ms-flex-direction: $direction; } // IE 10 + & { + -ms-flex-direction: $direction; + } // IE 10 } @mixin box-lines($lines: single) { -// single|multiple + // single|multiple @include prefixer(box-lines, $lines, webkit moz spec); } @mixin box-ordinal-group($int: 1) { @include prefixer(box-ordinal-group, $int, webkit moz spec); - & { -ms-flex-order: $int; } // IE 10 + & { + -ms-flex-order: $int; + } // IE 10 } @mixin box-flex($value: 0) { @include prefixer(box-flex, $value, webkit moz spec); - & { -ms-flex: $value; } // IE 10 + & { + -ms-flex: $value; + } // IE 10 } @mixin box-flex-group($int: 1) { @@ -64,8 +74,8 @@ // 2011 - display (flexbox | inline-flexbox) // 2012 - display (flex | inline-flex) @mixin display($value) { -// flex | inline-flex - @if $value == "flex" { + // flex | inline-flex + @if $value == 'flex' { // 2009 display: -webkit-box; display: -moz-box; @@ -76,7 +86,7 @@ display: -moz-flex; display: -ms-flexbox; // 2011 (IE 10) display: flex; - } @else if $value == "inline-flex" { + } @else if $value == 'inline-flex' { display: -webkit-inline-box; display: -moz-inline-box; display: inline-box; @@ -94,7 +104,6 @@ // 2011 - flex (decimal | width decimal) // 2012 - flex (integer integer width) @mixin flex($value) { - // Grab flex-grow for older browsers. $flex-grow: nth($value, 1); @@ -110,7 +119,6 @@ // 2011 - flex-direction (row | row-reverse | column | column-reverse) // 2012 - flex-direction (row | row-reverse | column | column-reverse) @mixin flex-direction($value: row) { - // Alt values. $value-2009: $value; $value-2011: $value; @@ -118,12 +126,12 @@ @if $value == row { $value-2009: horizontal; - } @else if $value == "row-reverse" { + } @else if $value == 'row-reverse' { $value-2009: horizontal; $direction: reverse; } @else if $value == column { $value-2009: vertical; - } @else if $value == "column-reverse" { + } @else if $value == 'column-reverse' { $value-2009: vertical; $direction: reverse; } @@ -136,7 +144,9 @@ @include prefixer(flex-direction, $value, webkit moz spec); // 2011 (IE 10) - & { -ms-flex-direction: $value; } + & { + -ms-flex-direction: $value; + } } // 2009 - box-lines (single | multiple) @@ -149,7 +159,7 @@ $alt-value: single; } @else if $value == wrap { $alt-value: multiple; - } @else if $value == "wrap-reverse" { + } @else if $value == 'wrap-reverse' { $alt-value: multiple; } @@ -175,41 +185,48 @@ @include prefixer(order, $int, webkit moz spec); // 2011 (IE 10) - & { -ms-flex-order: $int; } + & { + -ms-flex-order: $int; + } } // 2012 - flex-grow (number) @mixin flex-grow($number: 0) { @include prefixer(flex-grow, $number, webkit moz spec); - & { -ms-flex-positive: $number; } + & { + -ms-flex-positive: $number; + } } // 2012 - flex-shrink (number) @mixin flex-shrink($number: 1) { @include prefixer(flex-shrink, $number, webkit moz spec); - & { -ms-flex-negative: $number; } + & { + -ms-flex-negative: $number; + } } // 2012 - flex-basis (number) @mixin flex-basis($width: auto) { @include prefixer(flex-basis, $width, webkit moz spec); - & { -ms-flex-preferred-size: $width; } + & { + -ms-flex-preferred-size: $width; + } } // 2009 - box-pack (start | end | center | justify) // 2011 - flex-pack (start | end | center | justify) // 2012 - justify-content (flex-start | flex-end | center | space-between | space-around) @mixin justify-content($value: flex-start) { - // Alt values. $alt-value: $value; - @if $value == "flex-start" { + @if $value == 'flex-start' { $alt-value: start; - } @else if $value == "flex-end" { + } @else if $value == 'flex-end' { $alt-value: end; - } @else if $value == "space-between" { + } @else if $value == 'space-between' { $alt-value: justify; - } @else if $value == "space-around" { + } @else if $value == 'space-around' { $alt-value: distribute; } @@ -220,19 +237,20 @@ @include prefixer(justify-content, $value, webkit moz ms o spec); // 2011 (IE 10) - & { -ms-flex-pack: $alt-value; } + & { + -ms-flex-pack: $alt-value; + } } // 2009 - box-align (start | end | center | baseline | stretch) // 2011 - flex-align (start | end | center | baseline | stretch) // 2012 - align-items (flex-start | flex-end | center | baseline | stretch) @mixin align-items($value: stretch) { - $alt-value: $value; - @if $value == "flex-start" { + @if $value == 'flex-start' { $alt-value: start; - } @else if $value == "flex-end" { + } @else if $value == 'flex-end' { $alt-value: end; } @@ -243,17 +261,18 @@ @include prefixer(align-items, $value, webkit moz ms o spec); // 2011 (IE 10) - & { -ms-flex-align: $alt-value; } + & { + -ms-flex-align: $alt-value; + } } // 2011 - flex-item-align (auto | start | end | center | baseline | stretch) // 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch) @mixin align-self($value: auto) { - $value-2011: $value; - @if $value == "flex-start" { + @if $value == 'flex-start' { $value-2011: start; - } @else if $value == "flex-end" { + } @else if $value == 'flex-end' { $value-2011: end; } @@ -261,21 +280,22 @@ @include prefixer(align-self, $value, webkit moz spec); // 2011 (IE 10) - & { -ms-flex-item-align: $value-2011; } + & { + -ms-flex-item-align: $value-2011; + } } // 2011 - flex-line-pack (start | end | center | justify | distribute | stretch) // 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch) @mixin align-content($value: stretch) { - $value-2011: $value; - @if $value == "flex-start" { + @if $value == 'flex-start' { $value-2011: start; - } @else if $value == "flex-end" { + } @else if $value == 'flex-end' { $value-2011: end; - } @else if $value == "space-between" { + } @else if $value == 'space-between' { $value-2011: justify; - } @else if $value == "space-around" { + } @else if $value == 'space-around' { $value-2011: distribute; } @@ -283,5 +303,7 @@ @include prefixer(align-content, $value, webkit moz spec); // 2011 (IE 10) - & { -ms-flex-line-pack: $value-2011; } + & { + -ms-flex-line-pack: $value-2011; + } } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_font-face.scss b/fec/fec/static/scss/vendor/bourbon/css3/_font-face.scss index a9fd1efc97..3b52aae8b7 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_font-face.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_font-face.scss @@ -4,8 +4,8 @@ $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline, - $file-formats: eot woff2 woff ttf svg) { - + $file-formats: eot woff2 woff ttf svg +) { $font-url-prefix: font-url-prefixer($asset-pipeline); @font-face { diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_font-feature-settings.scss b/fec/fec/static/scss/vendor/bourbon/css3/_font-feature-settings.scss index 9ac0452f2f..1523c21f2b 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_font-feature-settings.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_font-feature-settings.scss @@ -1,4 +1,6 @@ @mixin font-feature-settings($settings...) { - @if length($settings) == 0 { $settings: none; } + @if length($settings) == 0 { + $settings: none; + } @include prefixer(font-feature-settings, $settings, webkit moz ms spec); } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_image-rendering.scss b/fec/fec/static/scss/vendor/bourbon/css3/_image-rendering.scss index 7e1a251ca0..8d0c72e4d2 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_image-rendering.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_image-rendering.scss @@ -1,14 +1,11 @@ -@mixin image-rendering ($mode:auto) { - +@mixin image-rendering($mode: auto) { @if ($mode == crisp-edges) { -ms-interpolation-mode: nearest-neighbor; // IE8+ image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; - } - - @else { + } @else { image-rendering: $mode; } } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss b/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss index cc22558f65..66b78f1352 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss @@ -1,10 +1,10 @@ // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content @mixin keyframes($name) { - $original-prefix-for-webkit: $prefix-for-webkit; - $original-prefix-for-mozilla: $prefix-for-mozilla; + $original-prefix-for-webkit: $prefix-for-webkit; + $original-prefix-for-mozilla: $prefix-for-mozilla; $original-prefix-for-microsoft: $prefix-for-microsoft; - $original-prefix-for-opera: $prefix-for-opera; - $original-prefix-for-spec: $prefix-for-spec; + $original-prefix-for-opera: $prefix-for-opera; + $original-prefix-for-spec: $prefix-for-spec; @if $original-prefix-for-webkit { @include disable-prefix-for-all(); @@ -22,11 +22,11 @@ } } - $prefix-for-webkit: $original-prefix-for-webkit !global; - $prefix-for-mozilla: $original-prefix-for-mozilla !global; + $prefix-for-webkit: $original-prefix-for-webkit !global; + $prefix-for-mozilla: $original-prefix-for-mozilla !global; $prefix-for-microsoft: $original-prefix-for-microsoft !global; - $prefix-for-opera: $original-prefix-for-opera !global; - $prefix-for-spec: $original-prefix-for-spec !global; + $prefix-for-opera: $original-prefix-for-opera !global; + $prefix-for-spec: $original-prefix-for-spec !global; @if $original-prefix-for-spec { @keyframes #{$name} { diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_linear-gradient.scss b/fec/fec/static/scss/vendor/bourbon/css3/_linear-gradient.scss index 9e8163335f..fcd1086651 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_linear-gradient.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_linear-gradient.scss @@ -1,25 +1,41 @@ -@mixin linear-gradient($pos, $g1, $g2: null, - $g3: null, $g4: null, - $g5: null, $g6: null, - $g7: null, $g8: null, - $g9: null, $g10: null, - $fallback: null) { +@mixin linear-gradient( + $pos, + $g1, + $g2: null, + $g3: null, + $g4: null, + $g5: null, + $g6: null, + $g7: null, + $g8: null, + $g9: null, + $g10: null, + $fallback: null +) { // Detect what type of value exists in $pos $pos-type: type-of(nth($pos, 1)); $pos-spec: null; $pos-degree: null; // If $pos is missing from mixin, reassign vars and add default position - @if ($pos-type == color) or (nth($pos, 1) == "transparent") { - $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5; - $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos; + @if ($pos-type == color) or (nth($pos, 1) == 'transparent') { + $g10: $g9; + $g9: $g8; + $g8: $g7; + $g7: $g6; + $g6: $g5; + $g5: $g4; + $g4: $g3; + $g3: $g2; + $g2: $g1; + $g1: $pos; $pos: null; } @if $pos { $positions: _linear-positions-parser($pos); $pos-degree: nth($positions, 1); - $pos-spec: nth($positions, 2); + $pos-spec: nth($positions, 2); } $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10; @@ -28,11 +44,13 @@ $fallback-color: nth($g1, 1); // If $fallback is a color use that color as the fallback color - @if (type-of($fallback) == color) or ($fallback == "transparent") { + @if (type-of($fallback) == color) or ($fallback == 'transparent') { $fallback-color: $fallback; } background-color: $fallback-color; - background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome - background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); + background-image: -webkit-linear-gradient( + $pos-degree $full + ); // Safari 5.1+, Chrome + background-image: unquote('linear-gradient(#{$pos-spec}#{$full})'); } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_placeholder.scss b/fec/fec/static/scss/vendor/bourbon/css3/_placeholder.scss index 5682fd097a..2a3fa56ef3 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_placeholder.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_placeholder.scss @@ -1,5 +1,5 @@ @mixin placeholder { - $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; + $placeholders: ':-webkit-input' ':-moz' '-moz' '-ms-input'; @each $placeholder in $placeholders { &:#{$placeholder}-placeholder { @content; diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_radial-gradient.scss b/fec/fec/static/scss/vendor/bourbon/css3/_radial-gradient.scss index 8da076e28a..68470649ae 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_radial-gradient.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_radial-gradient.scss @@ -1,16 +1,22 @@ // Requires Sass 3.1+ -@mixin radial-gradient($g1, $g2, - $g3: null, $g4: null, - $g5: null, $g6: null, - $g7: null, $g8: null, - $g9: null, $g10: null, - $pos: null, - $shape-size: null, - $fallback: null) { - +@mixin radial-gradient( + $g1, + $g2, + $g3: null, + $g4: null, + $g5: null, + $g6: null, + $g7: null, + $g8: null, + $g9: null, + $g10: null, + $pos: null, + $shape-size: null, + $fallback: null +) { $data: _radial-arg-parser($g1, $g2, $pos, $shape-size); - $g1: nth($data, 1); - $g2: nth($data, 2); + $g1: nth($data, 1); + $g2: nth($data, 2); $pos: nth($data, 3); $shape-size: nth($data, 4); @@ -23,17 +29,25 @@ $first-color: nth($full, 1); $fallback-color: nth($first-color, 1); - @if (type-of($fallback) == color) or ($fallback == "transparent") { + @if (type-of($fallback) == color) or ($fallback == 'transparent') { $fallback-color: $fallback; } // Add Commas and spaces - $shape-size: if($shape-size, "#{$shape-size}, ", null); - $pos: if($pos, "#{$pos}, ", null); - $pos-spec: if($pos, "at #{$pos}", null); - $shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} "); + $shape-size: if($shape-size, '#{$shape-size}, ', null); + $pos: if($pos, '#{$pos}, ', null); + $pos-spec: if($pos, 'at #{$pos}', null); + $shape-size-spec: if( + ($shape-size-spec != ' ') and ($pos == null), + '#{$shape-size-spec}, ', + '#{$shape-size-spec} ' + ); - background-color: $fallback-color; - background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); - background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); + background-color: $fallback-color; + background-image: -webkit-radial-gradient( + unquote(#{$pos}#{$shape-size}#{$full}) + ); + background-image: unquote( + 'radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})' + ); } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_selection.scss b/fec/fec/static/scss/vendor/bourbon/css3/_selection.scss index cd71d4f534..23303ab557 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_selection.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_selection.scss @@ -1,42 +1,42 @@ -@charset "UTF-8"; - -/// Outputs the spec and prefixed versions of the `::selection` pseudo-element. -/// -/// @param {Bool} $current-selector [false] -/// If set to `true`, it takes the current element into consideration. -/// -/// @example scss - Usage -/// .element { -/// @include selection(true) { -/// background-color: #ffbb52; -/// } -/// } -/// -/// @example css - CSS Output -/// .element::-moz-selection { -/// background-color: #ffbb52; -/// } -/// -/// .element::selection { -/// background-color: #ffbb52; -/// } - -@mixin selection($current-selector: false) { - @if $current-selector { - &::-moz-selection { - @content; - } - - &::selection { - @content; - } - } @else { - ::-moz-selection { - @content; - } - - ::selection { - @content; - } - } -} +@charset "UTF-8"; + +/// Outputs the spec and prefixed versions of the `::selection` pseudo-element. +/// +/// @param {Bool} $current-selector [false] +/// If set to `true`, it takes the current element into consideration. +/// +/// @example scss - Usage +/// .element { +/// @include selection(true) { +/// background-color: #ffbb52; +/// } +/// } +/// +/// @example css - CSS Output +/// .element::-moz-selection { +/// background-color: #ffbb52; +/// } +/// +/// .element::selection { +/// background-color: #ffbb52; +/// } + +@mixin selection($current-selector: false) { + @if $current-selector { + &::-moz-selection { + @content; + } + + &::selection { + @content; + } + } @else { + ::-moz-selection { + @content; + } + + ::selection { + @content; + } + } +} diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_text-decoration.scss b/fec/fec/static/scss/vendor/bourbon/css3/_text-decoration.scss index 9222746ce1..82d8d5b092 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_text-decoration.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_text-decoration.scss @@ -1,19 +1,19 @@ @mixin text-decoration($value) { -// || || + // || || @include prefixer(text-decoration, $value, moz); } @mixin text-decoration-line($line: none) { -// none || underline || overline || line-through + // none || underline || overline || line-through @include prefixer(text-decoration-line, $line, moz); } @mixin text-decoration-style($style: solid) { -// solid || double || dotted || dashed || wavy + // solid || double || dotted || dashed || wavy @include prefixer(text-decoration-style, $style, moz webkit); } @mixin text-decoration-color($color: currentColor) { -// currentColor || + // currentColor || @include prefixer(text-decoration-color, $color, moz); } diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss b/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss index 68195d04a6..dbcfc36b3d 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_transition.scss @@ -12,7 +12,7 @@ // Create lists for vendor-prefixed transform @each $list in $properties { - @if nth($list, 1) == "transform" { + @if nth($list, 1) == 'transform' { $needs-prefixes: true; $list1: -webkit-transform; $list2: -moz-transform; @@ -21,26 +21,26 @@ @each $var in $list { $list3: join($list3, $var); - @if $var != "transform" { + @if $var != 'transform' { $list1: join($list1, $var); $list2: join($list2, $var); } } $webkit: append($webkit, $list1); - $moz: append($moz, $list2); - $spec: append($spec, $list3); + $moz: append($moz, $list2); + $spec: append($spec, $list3); } @else { $webkit: append($webkit, $list, comma); - $moz: append($moz, $list, comma); - $spec: append($spec, $list, comma); + $moz: append($moz, $list, comma); + $spec: append($spec, $list, comma); } } @if $needs-prefixes { -webkit-transition: $webkit; - -moz-transition: $moz; - transition: $spec; + -moz-transition: $moz; + transition: $spec; } @else { @if length($properties) >= 1 { @include prefixer(transition, $properties, webkit moz spec); @@ -53,9 +53,12 @@ @mixin transition-property($properties...) { & { - -webkit-transition-property: transition-property-names($properties, "webkit"); - -moz-transition-property: transition-property-names($properties, "moz"); - transition-property: transition-property-names($properties, false); + -webkit-transition-property: transition-property-names( + $properties, + 'webkit' + ); + -moz-transition-property: transition-property-names($properties, 'moz'); + transition-property: transition-property-names($properties, false); } } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_assign-inputs.scss b/fec/fec/static/scss/vendor/bourbon/functions/_assign-inputs.scss index f8aba96783..841cb90d42 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_assign-inputs.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_assign-inputs.scss @@ -3,7 +3,7 @@ @each $input in $inputs { $input: unquote($input); - $input: if($pseudo, $input + ":" + $pseudo, $input); + $input: if($pseudo, $input + ':' + $pseudo, $input); $list: append($list, $input, comma); } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_contains.scss b/fec/fec/static/scss/vendor/bourbon/functions/_contains.scss index 3dec27db82..3ddf092490 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_contains.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_contains.scss @@ -17,7 +17,7 @@ @function contains($list, $values...) { @each $value in $values { - @if type-of(index($list, $value)) != "number" { + @if type-of(index($list, $value)) != 'number' { @return false; } } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_is-length.scss b/fec/fec/static/scss/vendor/bourbon/functions/_is-length.scss index 9f2ae973aa..1ab74daad3 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_is-length.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_is-length.scss @@ -5,7 +5,10 @@ /// @param {string} $value @function is-length($value) { - @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc" - or index(auto inherit initial 0, $value) - or (type-of($value) == "number" and not(unitless($value)))); + @return type-of($value) != 'null' and + ( + str-slice($value + '', 1, 4) == 'calc' or + index(auto inherit initial 0, $value) or + (type-of($value) == 'number' and not(unitless($value))) + ); } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_is-light.scss b/fec/fec/static/scss/vendor/bourbon/functions/_is-light.scss index 92d90ac3cc..907b205b30 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_is-light.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_is-light.scss @@ -15,7 +15,9 @@ $-local-red: red(rgba($hex-color, 1)); $-local-green: green(rgba($hex-color, 1)); $-local-blue: blue(rgba($hex-color, 1)); - $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; + $-local-lightness: ( + $-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722 + ) / 255; @return $-local-lightness > 0.6; } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_is-number.scss b/fec/fec/static/scss/vendor/bourbon/functions/_is-number.scss index 462a2b97ba..1d82f9a378 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_is-number.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_is-number.scss @@ -7,5 +7,8 @@ /// @require {function} contains @function is-number($value) { - @return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value); + @return contains( + '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9, + $value + ); } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_is-size.scss b/fec/fec/static/scss/vendor/bourbon/functions/_is-size.scss index 8b96552c63..4d11b7e90b 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_is-size.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_is-size.scss @@ -8,6 +8,6 @@ /// @require {function} is-length @function is-size($value) { - @return is-length($value) - or contains("fill" "fit-content" "min-content" "max-content", $value); + @return is-length($value) or + contains('fill' 'fit-content' 'min-content' 'max-content', $value); } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_modular-scale.scss b/fec/fec/static/scss/vendor/bourbon/functions/_modular-scale.scss index 20fa38812d..70bddafb0c 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_modular-scale.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_modular-scale.scss @@ -1,26 +1,30 @@ // Scaling Variables -$golden: 1.618; -$minor-second: 1.067; -$major-second: 1.125; -$minor-third: 1.2; -$major-third: 1.25; -$perfect-fourth: 1.333; +$golden: 1.618; +$minor-second: 1.067; +$major-second: 1.125; +$minor-third: 1.2; +$major-third: 1.25; +$perfect-fourth: 1.333; $augmented-fourth: 1.414; -$perfect-fifth: 1.5; -$minor-sixth: 1.6; -$major-sixth: 1.667; -$minor-seventh: 1.778; -$major-seventh: 1.875; -$octave: 2; -$major-tenth: 2.5; -$major-eleventh: 2.667; -$major-twelfth: 3; -$double-octave: 4; +$perfect-fifth: 1.5; +$minor-sixth: 1.6; +$major-sixth: 1.667; +$minor-seventh: 1.778; +$major-seventh: 1.875; +$octave: 2; +$major-tenth: 2.5; +$major-eleventh: 2.667; +$major-twelfth: 3; +$double-octave: 4; $modular-scale-ratio: $perfect-fourth !default; $modular-scale-base: em($em-base) !default; -@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { +@function modular-scale( + $increment, + $value: $modular-scale-base, + $ratio: $modular-scale-ratio +) { $v1: nth($value, 1); $v2: nth($value, length($value)); $value: $v1; diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_transition-property-name.scss b/fec/fec/static/scss/vendor/bourbon/functions/_transition-property-name.scss index 18348b93ab..02c79421e3 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_transition-property-name.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_transition-property-name.scss @@ -5,7 +5,11 @@ $new-props: (); @each $prop in $props { - $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + $new-props: append( + $new-props, + transition-property-name($prop, $vendor), + comma + ); } @return $new-props; @@ -14,9 +18,8 @@ @function transition-property-name($prop, $vendor: false) { // put other properties that need to be prefixed here aswell @if $vendor and $prop == transform { - @return unquote('-'+$vendor+'-'+$prop); - } - @else { + @return unquote('-' + $vendor + '-' + $prop); + } @else { @return $prop; } } diff --git a/fec/fec/static/scss/vendor/bourbon/functions/_unpack.scss b/fec/fec/static/scss/vendor/bourbon/functions/_unpack.scss index 4367935d52..dac65cf343 100644 --- a/fec/fec/static/scss/vendor/bourbon/functions/_unpack.scss +++ b/fec/fec/static/scss/vendor/bourbon/functions/_unpack.scss @@ -16,11 +16,14 @@ @function unpack($shorthand) { @if length($shorthand) == 1 { - @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) + nth($shorthand, 1); } @else if length($shorthand) == 2 { - @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) + nth($shorthand, 2); } @else if length($shorthand) == 3 { - @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) + nth($shorthand, 2); } @else { @return $shorthand; } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_convert-units.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_convert-units.scss index e0a65a05c2..c89cd9909a 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_convert-units.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_convert-units.scss @@ -3,8 +3,10 @@ // Source: http://sassmeister.com/gist/9647408 //************************************************************************// @function _convert-units($number, $unit) { - $strings: "px", "cm", "mm", "%", "ch", "pica", "in", "em", "rem", "pt", "pc", "ex", "vw", "vh", "vmin", "vmax", "deg", "rad", "grad", "turn"; - $units: 1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn; + $strings: 'px', 'cm', 'mm', '%', 'ch', 'pica', 'in', 'em', 'rem', 'pt', 'pc', + 'ex', 'vw', 'vh', 'vmin', 'vmax', 'deg', 'rad', 'grad', 'turn'; + $units: 1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, + 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn; $index: index($strings, $unit); @if not $index { @@ -12,7 +14,7 @@ @return false; } - @if type-of($number) != "number" { + @if type-of($number) != 'number' { @warn "`#{$number} is not a number`"; @return false; } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_directional-values.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_directional-values.scss index 39dbc0e0dd..e70fe16e81 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_directional-values.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_directional-values.scss @@ -34,15 +34,28 @@ $c: if(length($vals) < 3, $a, nth($vals, 3)); $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4))); - @if $a == 0 { $a: 0; } - @if $b == 0 { $b: 0; } - @if $c == 0 { $c: 0; } - @if $d == 0 { $d: 0; } + @if $a == 0 { + $a: 0; + } + @if $b == 0 { + $b: 0; + } + @if $c == 0 { + $c: 0; + } + @if $d == 0 { + $d: 0; + } - @if $a == $b and $a == $c and $a == $d { $output: $a; } - @else if $a == $c and $b == $d { $output: $a $b; } - @else if $b == $d { $output: $a $b $c; } - @else { $output: $a $b $c $d; } + @if $a == $b and $a == $c and $a == $d { + $output: $a; + } @else if $a == $c and $b == $d { + $output: $a $b; + } @else if $b == $d { + $output: $a $b $c; + } @else { + $output: $a $b $c $d; + } @return $output; } @@ -63,32 +76,50 @@ @mixin directional-property($pre, $suf, $vals) { // Property Names - $top: $pre + "-top" + if($suf, "-#{$suf}", ""); - $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); - $left: $pre + "-left" + if($suf, "-#{$suf}", ""); - $right: $pre + "-right" + if($suf, "-#{$suf}", ""); - $all: $pre + if($suf, "-#{$suf}", ""); + $top: $pre + '-top' + if($suf, '-#{$suf}', ''); + $bottom: $pre + '-bottom' + if($suf, '-#{$suf}', ''); + $left: $pre + '-left' + if($suf, '-#{$suf}', ''); + $right: $pre + '-right' + if($suf, '-#{$suf}', ''); + $all: $pre + if($suf, '-#{$suf}', ''); $vals: collapse-directionals($vals); @if contains-falsy($vals) { - @if nth($vals, 1) { #{$top}: nth($vals, 1); } + @if nth($vals, 1) { + #{$top}: nth($vals, 1); + } @if length($vals) == 1 { - @if nth($vals, 1) { #{$right}: nth($vals, 1); } + @if nth($vals, 1) { + #{$right}: nth($vals, 1); + } } @else { - @if nth($vals, 2) { #{$right}: nth($vals, 2); } + @if nth($vals, 2) { + #{$right}: nth($vals, 2); + } } @if length($vals) == 2 { - @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } - @if nth($vals, 2) { #{$left}: nth($vals, 2); } + @if nth($vals, 1) { + #{$bottom}: nth($vals, 1); + } + @if nth($vals, 2) { + #{$left}: nth($vals, 2); + } } @else if length($vals) == 3 { - @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } - @if nth($vals, 2) { #{$left}: nth($vals, 2); } + @if nth($vals, 3) { + #{$bottom}: nth($vals, 3); + } + @if nth($vals, 2) { + #{$left}: nth($vals, 2); + } } @else if length($vals) == 4 { - @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } - @if nth($vals, 4) { #{$left}: nth($vals, 4); } + @if nth($vals, 3) { + #{$bottom}: nth($vals, 3); + } + @if nth($vals, 4) { + #{$left}: nth($vals, 4); + } } } @else { #{$all}: $vals; diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_font-source-declaration.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_font-source-declaration.scss index 7f17586c93..28946c8b29 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_font-source-declaration.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_font-source-declaration.scss @@ -14,16 +14,16 @@ $file-path, $asset-pipeline, $file-formats, - $font-url) { - + $font-url +) { $src: (); $formats-map: ( - eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), - woff2: "#{$file-path}.woff2" format("woff2"), - woff: "#{$file-path}.woff" format("woff"), - ttf: "#{$file-path}.ttf" format("truetype"), - svg: "#{$file-path}.svg##{$font-family}" format("svg") + eot: '#{$file-path}.eot?#iefix' format('embedded-opentype'), + woff2: '#{$file-path}.woff2' format('woff2'), + woff: '#{$file-path}.woff' format('woff'), + ttf: '#{$file-path}.ttf' format('truetype'), + svg: '#{$file-path}.svg##{$font-family}' format('svg'), ); @each $key, $values in $formats-map { diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_gradient-positions-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_gradient-positions-parser.scss index 07d30b6cf9..5f95935e6e 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_gradient-positions-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_gradient-positions-parser.scss @@ -1,12 +1,14 @@ @function _gradient-positions-parser($gradient-type, $gradient-positions) { - @if $gradient-positions - and ($gradient-type == linear) - and (type-of($gradient-positions) != color) { + @if $gradient-positions and + ($gradient-type == linear) and + (type-of($gradient-positions) != color) + { $gradient-positions: _linear-positions-parser($gradient-positions); - } - @else if $gradient-positions - and ($gradient-type == radial) - and (type-of($gradient-positions) != color) { + } @else if + $gradient-positions and + ($gradient-type == radial) and + (type-of($gradient-positions) != color) + { $gradient-positions: _radial-positions-parser($gradient-positions); } @return $gradient-positions; diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-angle-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-angle-parser.scss index e0401ed8df..4016a7e792 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-angle-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-angle-parser.scss @@ -1,24 +1,30 @@ // Private function for linear-gradient-parser @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { $offset: null; - $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); - $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); + $unit-short: str-slice( + $first-val, + str-length($first-val) - 2, + str-length($first-val) + ); + $unit-long: str-slice( + $first-val, + str-length($first-val) - 3, + str-length($first-val) + ); - @if ($unit-long == "grad") or - ($unit-long == "turn") { - $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); - } - - @else if ($unit-short == "deg") or - ($unit-short == "rad") { - $offset: if($unit-short == "deg", -90 * 3, 1.6rad); + @if ($unit-long == 'grad') or ($unit-long == 'turn') { + $offset: if($unit-long == 'grad', -100grad * 3, -0.75turn); + } @else if ($unit-short == 'deg') or ($unit-short == 'rad') { + $offset: if($unit-short == 'deg', -90 * 3, 1.6rad); } @if $offset { $num: _str-to-num($first-val); @return ( - webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, + webkit-image: -webkit- + $prefix + ( + $offset - $num, + ) + $suffix, spec-image: $image ); } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-gradient-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-gradient-parser.scss index 3d259312d4..31731ea5e7 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-gradient-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-gradient-parser.scss @@ -1,39 +1,39 @@ @function _linear-gradient-parser($image) { $image: unquote($image); $gradients: (); - $start: str-index($image, "("); - $end: str-index($image, ","); + $start: str-index($image, '('); + $end: str-index($image, ','); $first-val: str-slice($image, $start + 1, $end - 1); $prefix: str-slice($image, 0, $start); $suffix: str-slice($image, $end, str-length($image)); - $has-multiple-vals: str-index($first-val, " "); - $has-single-position: unquote(_position-flipper($first-val) + ""); + $has-multiple-vals: str-index($first-val, ' '); + $has-single-position: unquote(_position-flipper($first-val) + ''); $has-angle: is-number(str-slice($first-val, 0, 0)); @if $has-multiple-vals { - $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); - } - - @else if $has-single-position != "" { - $pos: unquote($has-single-position + ""); + $gradients: _linear-side-corner-parser( + $image, + $first-val, + $prefix, + $suffix, + $has-multiple-vals + ); + } @else if $has-single-position != '' { + $pos: unquote($has-single-position + ''); $gradients: ( webkit-image: -webkit- + $image, - spec-image: $prefix + "to " + $pos + $suffix + spec-image: $prefix + 'to ' + $pos + $suffix, ); - } - - @else if $has-angle { + } @else if $has-angle { // Rotate degree for webkit $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); - } - - @else { + } @else { $gradients: ( webkit-image: -webkit- + $image, - spec-image: $image + spec-image: $image, ); } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-positions-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-positions-parser.scss index 6d5cb6e1f0..79d17735e3 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-positions-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-positions-parser.scss @@ -7,55 +7,61 @@ $length: length($pos); // Parse Side and corner positions @if ($length > 1) { - @if nth($pos, 1) == "to" { // Newer syntax + @if nth($pos, 1) == 'to' { + // Newer syntax $side: nth($pos, 2); - @if $length == 2 { // eg. to top + @if $length == 2 { + // eg. to top // Swap for backwards compatability $degree: _position-flipper(nth($pos, 2)); - } - @else if $length == 3 { // eg. to top left + } @else if $length == 3 { + // eg. to top left $corner: nth($pos, 3); } - } - @else if $length == 2 { // Older syntax ("top left") + } @else if $length == 2 { + // Older syntax ("top left") $side: _position-flipper(nth($pos, 1)); $corner: _position-flipper(nth($pos, 2)); } - @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { + @if ('#{$side} #{$corner}' == 'left top') or + ('#{$side} #{$corner}' == 'top left') + { $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); - } - @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { + } @else if + ('#{$side} #{$corner}' == 'right top') or + ('#{$side} #{$corner}' == 'top right') + { $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); - } - @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { + } @else if + ('#{$side} #{$corner}' == 'right bottom') or + ('#{$side} #{$corner}' == 'bottom right') + { $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); - } - @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { + } @else if + ('#{$side} #{$corner}' == 'left bottom') or + ('#{$side} #{$corner}' == 'bottom left') + { $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); } $spec: to $side $corner; - } - @else if $length == 1 { + } @else if $length == 1 { // Swap for backwards compatability @if $type == string { $degree: $pos; $spec: to _position-flipper($pos); - } - @else { + } @else { $degree: -270 - $pos; //rotate the gradient opposite from spec $spec: $pos; } } - $degree: unquote($degree + ","); - $spec: unquote($spec + ","); + $degree: unquote($degree + ','); + $spec: unquote($spec + ','); @return $degree $spec; } @function _position-flipper($pos) { - @return if($pos == left, right, null) - if($pos == right, left, null) - if($pos == top, bottom, null) - if($pos == bottom, top, null); + @return if($pos == left, right, null) if($pos == right, left, null) + if($pos == top, bottom, null) if($pos == bottom, top, null); } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-side-corner-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-side-corner-parser.scss index 86ad88fbb7..5ec031382b 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_linear-side-corner-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_linear-side-corner-parser.scss @@ -1,20 +1,27 @@ // Private function for linear-gradient-parser -@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { - $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); +@function _linear-side-corner-parser( + $image, + $first-val, + $prefix, + $suffix, + $has-multiple-vals +) { + $val-1: str-slice($first-val, 0, $has-multiple-vals - 1); $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); $val-3: null; - $has-val-3: str-index($val-2, " "); + $has-val-3: str-index($val-2, ' '); @if $has-val-3 { $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); $val-2: str-slice($val-2, 0, $has-val-3 - 1); } - $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); - $pos: unquote($pos + ""); + $pos: _position-flipper($val-1) _position-flipper($val-2) + _position-flipper($val-3); + $pos: unquote($pos + ''); // Use old spec for webkit - @if $val-1 == "to" { + @if $val-1 == 'to' { @return ( webkit-image: -webkit- + $prefix + $pos + $suffix, spec-image: $image @@ -25,7 +32,7 @@ @else { @return ( webkit-image: -webkit- + $image, - spec-image: $prefix + "to " + $pos + $suffix + spec-image: $prefix + 'to ' + $pos + $suffix ); } } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_radial-arg-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_radial-arg-parser.scss index 56c6030b74..73da01b600 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_radial-arg-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_radial-arg-parser.scss @@ -1,7 +1,7 @@ @function _radial-arg-parser($g1, $g2, $pos, $shape-size) { @each $value in $g1, $g2 { $first-val: nth($value, 1); - $pos-type: type-of($first-val); + $pos-type: type-of($first-val); $spec-at-index: null; // Determine if spec was passed to mixin @@ -16,8 +16,7 @@ @for $i from ($spec-at-index + 1) through length($value) { $pos: $pos nth($value, $i); } - } - @else if $spec-at-index == 1 { + } @else if $spec-at-index == 1 { @for $i from ($spec-at-index + 1) through length($value) { $pos: $pos nth($value, $i); } @@ -27,38 +26,34 @@ // If not spec calculate correct values @else { - @if ($pos-type != color) or ($first-val != "transparent") { - @if ($pos-type == number) - or ($first-val == "center") - or ($first-val == "top") - or ($first-val == "right") - or ($first-val == "bottom") - or ($first-val == "left") { - + @if ($pos-type != color) or ($first-val != 'transparent') { + @if ($pos-type == number) or + ($first-val == 'center') or + ($first-val == 'top') or + ($first-val == 'right') or + ($first-val == 'bottom') or + ($first-val == 'left') + { $pos: $value; @if $pos == $g1 { $g1: null; } - } - - @else if - ($first-val == "ellipse") - or ($first-val == "circle") - or ($first-val == "closest-side") - or ($first-val == "closest-corner") - or ($first-val == "farthest-side") - or ($first-val == "farthest-corner") - or ($first-val == "contain") - or ($first-val == "cover") { - + } @else if + ($first-val == 'ellipse') or + ($first-val == 'circle') or + ($first-val == 'closest-side') or + ($first-val == 'closest-corner') or + ($first-val == 'farthest-side') or + ($first-val == 'farthest-corner') or + ($first-val == 'contain') or + ($first-val == 'cover') + { $shape-size: $value; @if $value == $g1 { $g1: null; - } - - @else if $value == $g2 { + } @else if $value == $g2 { $g2: null; } } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_radial-gradient-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_radial-gradient-parser.scss index 1895db0a70..52c29aa647 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_radial-gradient-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_radial-gradient-parser.scss @@ -1,14 +1,14 @@ @function _radial-gradient-parser($image) { $image: unquote($image); $gradients: (); - $start: str-index($image, "("); - $end: str-index($image, ","); + $start: str-index($image, '('); + $end: str-index($image, ','); $first-val: str-slice($image, $start + 1, $end - 1); $prefix: str-slice($image, 0, $start); $suffix: str-slice($image, $end, str-length($image)); - $is-spec-syntax: str-index($first-val, "at"); + $is-spec-syntax: str-index($first-val, 'at'); @if $is-spec-syntax and $is-spec-syntax > 1 { $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); @@ -17,32 +17,26 @@ $gradients: ( webkit-image: -webkit- + $prefix + $pos + $suffix, - spec-image: $image + spec-image: $image, ); - } - - @else if $is-spec-syntax == 1 { + } @else if $is-spec-syntax == 1 { $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); $gradients: ( webkit-image: -webkit- + $prefix + $pos + $suffix, - spec-image: $image + spec-image: $image, ); - } - - @else if str-index($image, "cover") or str-index($image, "contain") { + } @else if str-index($image, 'cover') or str-index($image, 'contain') { @warn "Radial-gradient needs to be updated to conform to latest spec."; $gradients: ( webkit-image: null, - spec-image: $image + spec-image: $image, ); - } - - @else { + } @else { $gradients: ( webkit-image: -webkit- + $image, - spec-image: $image + spec-image: $image, ); } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_radial-positions-parser.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_radial-positions-parser.scss index 3c552ad791..8a683eeca2 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_radial-positions-parser.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_radial-positions-parser.scss @@ -1,17 +1,17 @@ @function _radial-positions-parser($gradient-pos) { $shape-size: nth($gradient-pos, 1); - $pos: nth($gradient-pos, 2); + $pos: nth($gradient-pos, 2); $shape-size-spec: _shape-size-stripper($shape-size); - $pre-spec: unquote(if($pos, "#{$pos}, ", null)) - unquote(if($shape-size, "#{$shape-size},", null)); - $pos-spec: if($pos, "at #{$pos}", null); + $pre-spec: unquote(if($pos, '#{$pos}, ', null)) + unquote(if($shape-size, '#{$shape-size},', null)); + $pos-spec: if($pos, 'at #{$pos}', null); - $spec: "#{$shape-size-spec} #{$pos-spec}"; + $spec: '#{$shape-size-spec} #{$pos-spec}'; // Add comma - @if ($spec != " ") { - $spec: "#{$spec},"; + @if ($spec != ' ') { + $spec: '#{$spec},'; } @return $pre-spec $spec; diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_render-gradients.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_render-gradients.scss index 5765676838..302b75d74c 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_render-gradients.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_render-gradients.scss @@ -1,25 +1,30 @@ // User for linear and radial gradients within background-image or border-image properties -@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { +@function _render-gradients( + $gradient-positions, + $gradients, + $gradient-type, + $vendor: false +) { $pre-spec: null; $spec: null; $vendor-gradients: null; @if $gradient-type == linear { @if $gradient-positions { $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); + $spec: nth($gradient-positions, 2); } - } - @else if $gradient-type == radial { + } @else if $gradient-type == radial { $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); + $spec: nth($gradient-positions, 2); } @if $vendor { - $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); - } - @else if $vendor == false { - $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient( + #{$pre-spec} $gradients + ); + } @else if $vendor == false { + $vendor-gradients: '#{$gradient-type}-gradient(#{$spec} #{$gradients})'; $vendor-gradients: unquote($vendor-gradients); } @return $vendor-gradients; diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_shape-size-stripper.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_shape-size-stripper.scss index ee5eda4220..f4d0dbc44b 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_shape-size-stripper.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_shape-size-stripper.scss @@ -1,10 +1,10 @@ @function _shape-size-stripper($shape-size) { $shape-size-spec: null; @each $value in $shape-size { - @if ($value == "cover") or ($value == "contain") { + @if ($value == 'cover') or ($value == 'contain') { $value: null; } - $shape-size-spec: "#{$shape-size-spec} #{$value}"; + $shape-size-spec: '#{$shape-size-spec} #{$value}'; } @return $shape-size-spec; } diff --git a/fec/fec/static/scss/vendor/bourbon/helpers/_str-to-num.scss b/fec/fec/static/scss/vendor/bourbon/helpers/_str-to-num.scss index 3ef1d873b4..f71d78bc4e 100644 --- a/fec/fec/static/scss/vendor/bourbon/helpers/_str-to-num.scss +++ b/fec/fec/static/scss/vendor/bourbon/helpers/_str-to-num.scss @@ -4,8 +4,8 @@ //************************************************************************// @function _str-to-num($string) { // Matrices - $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; - $numbers: 0 1 2 3 4 5 6 7 8 9; + $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; + $numbers: 0 1 2 3 4 5 6 7 8 9; // Result $result: 0; @@ -17,15 +17,11 @@ $character: str-slice($string, $i, $i); $index: index($strings, $character); - @if $character == "-" { + @if $character == '-' { $minus: true; - } - - @else if $character == "." { + } @else if $character == '.' { $divider: 1; - } - - @else { + } @else { @if not $index { $result: if($minus, $result * -1, $result); @return _convert-units($result, str-slice($string, $i)); @@ -35,9 +31,7 @@ @if $divider == 0 { $result: $result * 10; - } - - @else { + } @else { // Move the decimal dot to the left $divider: $divider * 10; $number: $number / $divider; diff --git a/fec/fec/static/scss/vendor/bourbon/settings/_prefixer.scss b/fec/fec/static/scss/vendor/bourbon/settings/_prefixer.scss index 8c390514d4..8eb14ea69e 100644 --- a/fec/fec/static/scss/vendor/bourbon/settings/_prefixer.scss +++ b/fec/fec/static/scss/vendor/bourbon/settings/_prefixer.scss @@ -2,8 +2,8 @@ /// Global variables to enable or disable vendor prefixes -$prefix-for-webkit: true !default; -$prefix-for-mozilla: true !default; +$prefix-for-webkit: true !default; +$prefix-for-mozilla: true !default; $prefix-for-microsoft: true !default; -$prefix-for-opera: true !default; -$prefix-for-spec: true !default; +$prefix-for-opera: true !default; +$prefix-for-spec: true !default; diff --git a/fec/fec/static/scss/vendor/neat/_neat-helpers.scss b/fec/fec/static/scss/vendor/neat/_neat-helpers.scss index 9c182d2ee8..ad1a30f13a 100644 --- a/fec/fec/static/scss/vendor/neat/_neat-helpers.scss +++ b/fec/fec/static/scss/vendor/neat/_neat-helpers.scss @@ -1,8 +1,8 @@ // Functions -@import "functions/private"; -@import "functions/new-breakpoint"; +@import 'functions/private'; +@import 'functions/new-breakpoint'; // Settings -@import "settings/grid"; -@import "settings/visual-grid"; -@import "settings/disable-warnings"; +@import 'settings/grid'; +@import 'settings/visual-grid'; +@import 'settings/disable-warnings'; diff --git a/fec/fec/static/scss/vendor/neat/_neat.scss b/fec/fec/static/scss/vendor/neat/_neat.scss index e46e1693fa..b41f6377d1 100644 --- a/fec/fec/static/scss/vendor/neat/_neat.scss +++ b/fec/fec/static/scss/vendor/neat/_neat.scss @@ -4,20 +4,20 @@ // MIT License // Helpers -@import "neat-helpers"; +@import 'neat-helpers'; // Grid -@import "grid/private"; -@import "grid/box-sizing"; -@import "grid/omega"; -@import "grid/outer-container"; -@import "grid/span-columns"; -@import "grid/row"; -@import "grid/shift"; -@import "grid/pad"; -@import "grid/fill-parent"; -@import "grid/media"; -@import "grid/to-deprecate"; -@import "grid/visual-grid"; -@import "grid/display-context"; -@import "grid/direction-context"; +@import 'grid/private'; +@import 'grid/box-sizing'; +@import 'grid/omega'; +@import 'grid/outer-container'; +@import 'grid/span-columns'; +@import 'grid/row'; +@import 'grid/shift'; +@import 'grid/pad'; +@import 'grid/fill-parent'; +@import 'grid/media'; +@import 'grid/to-deprecate'; +@import 'grid/visual-grid'; +@import 'grid/display-context'; +@import 'grid/direction-context'; diff --git a/fec/fec/static/scss/vendor/neat/functions/_new-breakpoint.scss b/fec/fec/static/scss/vendor/neat/functions/_new-breakpoint.scss index 48f72bd39b..cd076e0286 100644 --- a/fec/fec/static/scss/vendor/neat/functions/_new-breakpoint.scss +++ b/fec/fec/static/scss/vendor/neat/functions/_new-breakpoint.scss @@ -34,7 +34,10 @@ /// } /// } -@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { +@function new-breakpoint( + $query: $feature $value $columns, + $total-columns: $grid-columns +) { @if length($query) == 1 { $query: $default-feature nth($query, 1) $total-columns; } @else if is-even(length($query)) { @@ -42,7 +45,11 @@ } @if is-not(belongs-to($query, $visual-grid-breakpoints)) { - $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; + $visual-grid-breakpoints: append( + $visual-grid-breakpoints, + $query, + comma + ) !global; } @return $query; diff --git a/fec/fec/static/scss/vendor/neat/functions/_private.scss b/fec/fec/static/scss/vendor/neat/functions/_private.scss index 872d4dc58d..2919428351 100644 --- a/fec/fec/static/scss/vendor/neat/functions/_private.scss +++ b/fec/fec/static/scss/vendor/neat/functions/_private.scss @@ -20,10 +20,8 @@ // Contains display value @function contains-display-value($query) { - @return belongs-to(table, $query) - or belongs-to(block, $query) - or belongs-to(inline-block, $query) - or belongs-to(inline, $query); + @return belongs-to(table, $query) or belongs-to(block, $query) or + belongs-to(inline-block, $query) or belongs-to(inline, $query); } // Parses the first argument of span-columns() @@ -63,7 +61,7 @@ $values: ($transparent 0, $color 0); - @for $i from 1 to $grid-columns*2 { + @for $i from 1 to $grid-columns * 2 { @if is-even($i) { $values: append($values, $transparent $column-offset, comma); $values: append($values, $color $column-offset, comma); @@ -82,7 +80,7 @@ @function get-direction($layout, $default) { $direction: null; - @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" { + @if to-upper-case($layout) == 'LTR' or to-upper-case($layout) == 'RTL' { $direction: direction-from-layout($layout); } @else { $direction: direction-from-layout($default); @@ -94,7 +92,7 @@ @function direction-from-layout($layout) { $direction: null; - @if to-upper-case($layout) == "LTR" { + @if to-upper-case($layout) == 'LTR' { $direction: right; } @else { $direction: left; @@ -106,7 +104,7 @@ @function get-opposite-direction($direction) { $opposite-direction: left; - @if $direction == "left" { + @if $direction == 'left' { $opposite-direction: right; } diff --git a/fec/fec/static/scss/vendor/neat/grid/_box-sizing.scss b/fec/fec/static/scss/vendor/neat/grid/_box-sizing.scss index b6d3fec334..b8dfdb8502 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_box-sizing.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_box-sizing.scss @@ -1,7 +1,8 @@ @charset "UTF-8"; @if $border-box-sizing == true { - html { // http://bit.ly/1qk2tVR + html { + // http://bit.ly/1qk2tVR box-sizing: border-box; } diff --git a/fec/fec/static/scss/vendor/neat/grid/_direction-context.scss b/fec/fec/static/scss/vendor/neat/grid/_direction-context.scss index 5f2841e943..c4d1834609 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_direction-context.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_direction-context.scss @@ -21,9 +21,9 @@ @mixin direction-context($direction: left-to-right) { $scope-direction: $layout-direction; - @if to-lower-case($direction) == "left-to-right" { + @if to-lower-case($direction) == 'left-to-right' { $layout-direction: LTR !global; - } @else if to-lower-case($direction) == "right-to-left" { + } @else if to-lower-case($direction) == 'right-to-left' { $layout-direction: RTL !global; } diff --git a/fec/fec/static/scss/vendor/neat/grid/_media.scss b/fec/fec/static/scss/vendor/neat/grid/_media.scss index 0c5850a221..77eedeab05 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_media.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_media.scss @@ -64,7 +64,7 @@ } } @else { $loop-to: length($query); - $media-query: "screen and "; + $media-query: 'screen and '; $default-grid-columns: $grid-columns; $grid-columns: $total-columns !global; @@ -75,10 +75,15 @@ $i: 1; @while $i <= $loop-to { - $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") "; + $media-query: $media-query + + '(' + + nth($query, $i) + + ': ' + + nth($query, $i + 1) + + ') '; @if ($i + 1) != $loop-to { - $media-query: $media-query + "and "; + $media-query: $media-query + 'and '; } $i: $i + 2; diff --git a/fec/fec/static/scss/vendor/neat/grid/_omega.scss b/fec/fec/static/scss/vendor/neat/grid/_omega.scss index 0d8fc9a85a..c85a5735c2 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_omega.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_omega.scss @@ -36,13 +36,17 @@ $auto: belongs-to(auto, $query); @if $direction != default { - @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin."); + @include -neat-warn( + 'The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin.' + ); } @else { $direction: get-direction($layout-direction, $default-layout-direction); } @if $table { - @include -neat-warn("The omega mixin no longer removes padding in table layouts."); + @include -neat-warn( + 'The omega mixin no longer removes padding in table layouts.' + ); } @if length($query) == 1 { @@ -50,13 +54,11 @@ &:last-child { margin-#{$direction}: 0; } - } - - @else if contains-display-value($query) and $table == false { - & { margin-#{$direction}: 0; } - } - - @else { + } @else if contains-display-value($query) and $table == false { + & { + margin-#{$direction}: 0; + } + } @else { @include nth-child($query, $direction); } } @else if length($query) == 2 { @@ -68,7 +70,7 @@ @include nth-child(nth($query, 1), $direction); } } @else { - @include -neat-warn("Too many arguments passed to the omega() mixin."); + @include -neat-warn('Too many arguments passed to the omega() mixin.'); } } @@ -79,8 +81,8 @@ margin-#{$direction}: 0; } - @if type-of($query) == number and unit($query) == "n" { - &:nth-child(#{$query}+1) { + @if type-of($query) == number and unit($query) == 'n' { + &:nth-child(#{$query} + 1) { clear: $opposite-direction; } } diff --git a/fec/fec/static/scss/vendor/neat/grid/_private.scss b/fec/fec/static/scss/vendor/neat/grid/_private.scss index af6562bb5d..7479d2aad1 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_private.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_private.scss @@ -8,12 +8,17 @@ $layout-direction: LTR !default; @function flex-grid($columns, $container-columns: $fg-max-columns) { $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * + $fg-gutter; @return percentage(math.div($width, $container-width)); } -@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; +@function flex-gutter( + $container-columns: $fg-max-columns, + $gutter: $fg-gutter +) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * + $fg-gutter; @return percentage(math.div($gutter, $container-width)); } diff --git a/fec/fec/static/scss/vendor/neat/grid/_row.scss b/fec/fec/static/scss/vendor/neat/grid/_row.scss index a3f8870c6a..52bc63d1ea 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_row.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_row.scss @@ -30,13 +30,17 @@ @mixin row($display: default, $direction: $default-layout-direction) { @if $direction != $default-layout-direction { - @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."); + @include -neat-warn( + 'The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin.' + ); } $layout-direction: $direction !global; @if $display != default { - @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin."); + @include -neat-warn( + 'The $display argument will be deprecated in future versions in favor of the display(){...} mixin.' + ); } @if $display == table { diff --git a/fec/fec/static/scss/vendor/neat/grid/_shift.scss b/fec/fec/static/scss/vendor/neat/grid/_shift.scss index 0bd77c772e..cd9aebf958 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_shift.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_shift.scss @@ -16,7 +16,9 @@ /// } @mixin shift($n-columns: 1) { - & { @include shift-in-context($n-columns); } + & { + @include shift-in-context($n-columns); + } } /// Translates an element horizontally by a number of columns, in a specific nesting context. @@ -43,7 +45,8 @@ $direction: get-direction($layout-direction, $default-layout-direction); $opposite-direction: get-opposite-direction($direction); - margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); + margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + + $n-columns * flex-gutter($parent-columns); // Reset nesting context $parent-columns: $grid-columns !global; diff --git a/fec/fec/static/scss/vendor/neat/grid/_span-columns.scss b/fec/fec/static/scss/vendor/neat/grid/_span-columns.scss index 678d32222c..c18fe8868d 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_span-columns.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_span-columns.scss @@ -61,7 +61,7 @@ $display-table: is-display-table($container-display-table, $display); - @if $display-table { + @if $display-table { display: table-cell; width: percentage($columns / $container-columns); } @else { @@ -72,16 +72,18 @@ } @if $display == collapse { - @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead."); + @include -neat-warn( + "The 'collapse' argument will be deprecated. Use 'block-collapse' instead." + ); } @if $display == collapse or $display == block-collapse { - width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); + width: flex-grid($columns, $container-columns) + + flex-gutter($container-columns); &:last-child { width: flex-grid($columns, $container-columns); } - } @else { margin-#{$direction}: flex-gutter($container-columns); width: flex-grid($columns, $container-columns); diff --git a/fec/fec/static/scss/vendor/neat/grid/_to-deprecate.scss b/fec/fec/static/scss/vendor/neat/grid/_to-deprecate.scss index aeea0795b8..56b44b9a69 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_to-deprecate.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_to-deprecate.scss @@ -1,7 +1,12 @@ @charset "UTF-8"; -@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { - @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."); +@mixin breakpoint( + $query: $feature $value $columns, + $total-columns: $grid-columns +) { + @include -neat-warn( + 'The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.' + ); @if length($query) == 1 { @media screen and ($default-feature: nth($query, 1)) { @@ -39,12 +44,16 @@ $grid-columns: $default-grid-columns; } } @else { - @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details."); + @include -neat-warn( + 'Wrong number of arguments for breakpoint(). Read the documentation for more details.' + ); } } @mixin nth-omega($nth, $display: block, $direction: default) { - @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead."); + @include -neat-warn( + 'The nth-omega() mixin is deprecated. Please use omega() instead.' + ); @include omega($nth $display, $direction); } @@ -61,7 +70,9 @@ @mixin reset-display { $container-display-table: false !global; - @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin."); + @include -neat-warn( + 'Resetting $display will be deprecated in future versions in favor of the display(){...} mixin.' + ); } /// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row. @@ -77,7 +88,9 @@ @mixin reset-layout-direction { $layout-direction: $default-layout-direction !global; - @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin."); + @include -neat-warn( + 'Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin.' + ); } /// Resets both the active layout direction and the active display property. diff --git a/fec/fec/static/scss/vendor/neat/grid/_visual-grid.scss b/fec/fec/static/scss/vendor/neat/grid/_visual-grid.scss index 1192d82888..62fbea90c3 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_visual-grid.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_visual-grid.scss @@ -5,13 +5,13 @@ background-image: -moz-linear-gradient(left, $values); background-image: -ms-linear-gradient(left, $values); background-image: -o-linear-gradient(left, $values); - background-image: unquote("linear-gradient(to left, #{$values})"); + background-image: unquote('linear-gradient(to left, #{$values})'); } @if $visual-grid == true or $visual-grid == yes { body:before { @include grid-column-gradient(gradient-stops($grid-columns)); - content: ""; + content: ''; display: inline-block; height: 100%; left: 0; @@ -25,9 +25,7 @@ @if $visual-grid-index == back { z-index: -1; - } - - @else if $visual-grid-index == front { + } @else if $visual-grid-index == front { z-index: 9999; } diff --git a/fec/fec/static/scss/widgets/aggregate-totals.scss b/fec/fec/static/scss/widgets/aggregate-totals.scss index 9524608b8e..984498eaa7 100644 --- a/fec/fec/static/scss/widgets/aggregate-totals.scss +++ b/fec/fec/static/scss/widgets/aggregate-totals.scss @@ -21,28 +21,32 @@ $fontWeightBold: 700; font-family: gandhi; font-style: normal; font-weight: normal; - src: url('/static/fonts/gandhiserif-regular.woff2') format('woff2'), + src: + url('/static/fonts/gandhiserif-regular.woff2') format('woff2'), url('/static/fonts/gandhiserif-regular.woff') format('woff'); } @font-face { font-family: karla; font-style: normal; font-weight: normal; - src: url('/static/fonts/karla-regular.woff2') format('woff2'), + src: + url('/static/fonts/karla-regular.woff2') format('woff2'), url('/static/fonts/karla-regular.woff') format('woff'); } @font-face { font-family: karla; - src: url('/static/fonts/karla-bold.woff2') format('woff2'), + src: + url('/static/fonts/karla-bold.woff2') format('woff2'), url('/static/fonts/karla-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { - font-family: "fec_currency_mono"; + font-family: 'fec_currency_mono'; font-style: normal; font-weight: normal; - src: url('/static/fonts/fec-currencymono-regular.woff2') format('woff2'), + src: + url('/static/fonts/fec-currencymono-regular.woff2') format('woff2'), url('/static/fonts/fec-currencymono-regular.woff') format('woff'), url('/static/fonts/fec-currencymono-regular.ttf') format('truetype'); } @@ -506,7 +510,7 @@ aside.aggr-totals[id^='gov_fec_at_'] { // Universals .t-mono-stacked-currency { - font-family: "fec_currency_mono"; + font-family: 'fec_currency_mono'; text-align: right; } diff --git a/fec/fec/static/scss/widgets/contributions-by-state.scss b/fec/fec/static/scss/widgets/contributions-by-state.scss index 669f0c3934..2f5e4995cd 100644 --- a/fec/fec/static/scss/widgets/contributions-by-state.scss +++ b/fec/fec/static/scss/widgets/contributions-by-state.scss @@ -18,48 +18,52 @@ $check: 'data:image/svg+xml;charset=utf8, %3Csvg%20width%3D%2220%22%20height%3D% $info-circle: 'data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%200a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2010%200zm1.2%2016.1a15.69%2015.69%200%200%201-2.4.3q-.9%200-.9-.6a9.32%209.32%200%200%201%20.2-1.4l.8-4.7a3.08%203.08%200%200%200%20.1-.9c0-.3-.4-.4-1.2-.4l.1-.5a14.22%2014.22%200%200%201%202.5-.3.61.61%200%200%201%20.7.6%2011.48%2011.48%200%200%201-.2%201.4l-.8%204.8a2.25%202.25%200%200%200-.1.7c0%20.4.2.5%201.2.5v.5zm-.5-10a1.15%201.15%200%200%201-1.2-1.2%201.35%201.35%200%200%201%201.3-1.4A1.22%201.22%200%200%201%2012%204.7a1.42%201.42%200%200%201-1.3%201.4z%22%2F%3E%3C%2Fsvg%3E'; // $inverse for u-button, $gray-dark -@import "../variables"; +@import '../variables'; // prefix-for-webkit for keyframes -@import "../vendor/bourbon/settings/prefixer"; +@import '../vendor/bourbon/settings/prefixer'; // disable-prefix-for-all for keyframes -@import "../vendor/bourbon/addons/prefixer"; +@import '../vendor/bourbon/addons/prefixer'; // keyframes for u-button -@import "../vendor/bourbon/css3/keyframes"; +@import '../vendor/bourbon/css3/keyframes'; // animation for u-button -@import "../vendor/bourbon/css3/animation"; +@import '../vendor/bourbon/css3/animation'; // u-button: -@import "../mixins/_utilities"; +@import '../mixins/_utilities'; // triangle for tooltips: -@import "../vendor/bourbon/addons/triangle"; +@import '../vendor/bourbon/addons/triangle'; // overlay for loading states -@import "../components/overlay"; +@import '../components/overlay'; @font-face { font-family: gandhi; font-style: normal; font-weight: normal; - src: url('/static/fonts/gandhiserif-regular.woff2') format('woff2'), + src: + url('/static/fonts/gandhiserif-regular.woff2') format('woff2'), url('/static/fonts/gandhiserif-regular.woff') format('woff'); } @font-face { font-family: karla; font-style: normal; font-weight: normal; - src: url('/static/fonts/karla-regular.woff2') format('woff2'), + src: + url('/static/fonts/karla-regular.woff2') format('woff2'), url('/static/fonts/karla-regular.woff') format('woff'); } @font-face { font-family: karla; - src: url('/static/fonts/karla-bold.woff2') format('woff2'), + src: + url('/static/fonts/karla-bold.woff2') format('woff2'), url('/static/fonts/karla-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { - font-family: "fec_currency_mono"; + font-family: 'fec_currency_mono'; font-style: normal; font-weight: normal; - src: url('/static/fonts/fec-currencymono-regular.woff2') format('woff2'), + src: + url('/static/fonts/fec-currencymono-regular.woff2') format('woff2'), url('/static/fonts/fec-currencymono-regular.woff') format('woff'), url('/static/fonts/fec-currencymono-regular.ttf') format('truetype'); } @@ -158,16 +162,16 @@ aside.contribs-by-state { background-position: 50%; padding: 0; } - + &[data-allow-text] { .tt-suggestion__missing { display: none; } - + button.is-loading { background-image: url('../../img/loading-ellipsis-gray.gif'); } - + button.is-successful { background-position: 50%; background-size: 2.8rem; @@ -188,7 +192,7 @@ aside.contribs-by-state { position: absolute; right: auto; top: 75px; - transition: opacity .5s .5s; + transition: opacity 0.5s 0.5s; width: 0; } &.is-error { @@ -196,7 +200,7 @@ aside.contribs-by-state { height: 65px; max-width: 300px; opacity: 1; - transition: opacity .5s .5s; + transition: opacity 0.5s 0.5s; width: 100%; } } @@ -205,7 +209,8 @@ aside.contribs-by-state { display: none; // hide it until it's moved into .typeahead-filter } } - .message, .message[aria-hidden="true"] { + .message, + .message[aria-hidden='true'] { // .message, etc are copied from components/_messages.scss background-color: $neutral; border-color: $gray; @@ -218,7 +223,8 @@ aside.contribs-by-state { transition: all 0.5s; width: 100%; - &.has-error, &[aria-hidden="false"] { + &.has-error, + &[aria-hidden='false'] { margin: 2rem 0; max-height: 150px; padding: 2rem; @@ -280,7 +286,7 @@ aside.contribs-by-state { min-height: 41px; div { - padding: $fontSizeBase * .75; + padding: $fontSizeBase * 0.75; &:first-child { font-weight: $fontWeightBold; @@ -310,12 +316,13 @@ aside.contribs-by-state { justify-content: space-between; width: 100%; } - td, th { + td, + th { flex-grow: 1; flex-shrink: 1; line-height: 1.25em; - padding: #{$fontSizeBase * .5}; - + padding: #{$fontSizeBase * 0.5}; + &:first-child { flex-grow: 0; flex-shrink: 0; @@ -332,7 +339,7 @@ aside.contribs-by-state { } th { font-weight: $fontWeightSemibold; - + &:last-child { flex-grow: 1; flex-shrink: 1; @@ -370,18 +377,19 @@ aside.contribs-by-state { font-size: $fontSizeBase * 2; font-weight: $fontWeightRegular; line-height: 1.25em; - margin: 0 0 .25em; + margin: 0 0 0.25em; a { line-height: 1.25em; } } - h2, h3 { + h2, + h3 { font-family: $fontFamilySansSerif; font-size: $fontSizeBase * 1.4; font-weight: $fontWeightRegular; line-height: 1.25em; - margin: 0 0 .25em; + margin: 0 0 0.25em; } } .legend-container { @@ -390,7 +398,7 @@ aside.contribs-by-state { span { text-align: right; line-height: 1.25em; - margin-bottom: .25em; + margin-bottom: 0.25em; } } } @@ -399,7 +407,8 @@ aside.contribs-by-state { text-align: right; width: 100%; - a, button { + a, + button { margin: 0 0 1rem 1rem; } } @@ -415,7 +424,7 @@ aside.contribs-by-state { } .overlay { display: none; - + &.is-loading { background-image: url('../../img/loading.gif'); display: block; @@ -452,7 +461,7 @@ aside.contribs-by-state { float: left; height: 36px; line-height: 36px; - margin-right: .5em; + margin-right: 0.5em; position: relative; } .filter__typeahead { @@ -483,14 +492,14 @@ aside.contribs-by-state { fieldset { display: inline-block; float: left; - + &:first-child { margin-right: 7.5pt; } } label { - display: inline-block;// + display: inline-block; // } } .state-list-wrapper { @@ -499,7 +508,9 @@ aside.contribs-by-state { .remote-table-header { margin-bottom: 0.5px; // Make sure the border is visible above the scrollbar below it - width: calc(100% + 1px); // align the right side with the parent's right boundary + width: calc( + 100% + 1px + ); // align the right side with the parent's right boundary } .table-scroller { height: 100%; @@ -509,7 +520,8 @@ aside.contribs-by-state { min-height: 400px; } } - td, th { + td, + th { &:nth-child(2) { max-width: 90px; } @@ -520,7 +532,7 @@ aside.contribs-by-state { margin-left: 1rem; width: calc(66.66% - 1rem); - .election-map { + .election-map { svg { min-width: 445px; min-height: 285px; @@ -528,8 +540,9 @@ aside.contribs-by-state { } } .map-details { - .more-info-wrapper { - a, button { + .more-info-wrapper { + a, + button { margin: 0 0 1rem 1rem; } } @@ -543,7 +556,7 @@ aside.contribs-by-state { // Some overrides for table.table-display *, which was added because IE doesn't like Flex table.table-display { display: table; - + thead { display: table-header-group; } @@ -553,7 +566,8 @@ aside.contribs-by-state { tr { display: table-row; } - td, th { + td, + th { display: table-cell; } } @@ -570,13 +584,13 @@ aside.contribs-by-state { position: absolute; text-align: center; z-index: #{$z1 - 2}; - + .tooltip__title { border-bottom: 1px solid #112e51; text-transform: uppercase; font-weight: 700; } - + &.tooltip--above { min-width: 12rem; left: -4rem; @@ -595,10 +609,10 @@ aside.contribs-by-state { &::after { @include triangle(1.6rem, $inverse, down); - bottom: -.7rem; + bottom: -0.7rem; content: ''; display: block; - left: calc(50% - .8rem); + left: calc(50% - 0.8rem); position: absolute; } } diff --git a/fec/fec/static/scss/widgets/house-senate-overview.scss b/fec/fec/static/scss/widgets/house-senate-overview.scss index 230b65321b..f6a6f3358e 100644 --- a/fec/fec/static/scss/widgets/house-senate-overview.scss +++ b/fec/fec/static/scss/widgets/house-senate-overview.scss @@ -1,10 +1,11 @@ @font-face { - font-family: "fec_currency_mono"; + font-family: 'fec_currency_mono'; font-style: normal; font-weight: normal; - src: url("/static/fonts/fec-currencymono-regular.woff2") format("woff2"), - url("/static/fonts/fec-currencymono-regular.woff") format("woff"), - url("/static/fonts/fec-currencymono-regular.ttf") format("truetype"); + src: + url('/static/fonts/fec-currencymono-regular.woff2') format('woff2'), + url('/static/fonts/fec-currencymono-regular.woff') format('woff'), + url('/static/fonts/fec-currencymono-regular.ttf') format('truetype'); } #contributions-over-time { @@ -28,7 +29,7 @@ .simple-table--responsive .simple-table__row { margin-bottom: 1rem; - font-family: "fec_currency_mono"; + font-family: 'fec_currency_mono'; letter-spacing: -1px; } @@ -71,12 +72,30 @@ meter { } .diagonal_stripe meter::-webkit-meter-optimum-value { - background-image: linear-gradient(125deg, #36bdbb 18.42%, #6ee6e6 18.42%, #6ee6e6 50%, #36bdbb 50%, #36bdbb 68.42%, #6ee6e6 68.42%, #6ee6e6 100%); + background-image: linear-gradient( + 125deg, + #36bdbb 18.42%, + #6ee6e6 18.42%, + #6ee6e6 50%, + #36bdbb 50%, + #36bdbb 68.42%, + #6ee6e6 68.42%, + #6ee6e6 100% + ); background-size: 20px 30px; } .diagonal_stripe meter:-moz-meter-optimum::-moz-meter-bar { - background-image: linear-gradient(125deg, #36bdbb 26.92%, #6ee6e6 26.92%, #6ee6e6 50%, #36bdbb 50%, #36bdbb 76.92%, #6ee6e6 76.92%, #6ee6e6 100%); + background-image: linear-gradient( + 125deg, + #36bdbb 26.92%, + #6ee6e6 26.92%, + #6ee6e6 50%, + #36bdbb 50%, + #36bdbb 76.92%, + #6ee6e6 76.92%, + #6ee6e6 100% + ); background-size: 15.87px 22.66px; } @@ -90,7 +109,6 @@ meter::-webkit-meter-bar { meter::-webkit-meter-optimum-value { background: #36bdbb; - } /* Firefox */ @@ -104,14 +122,14 @@ meter:-moz-meter-optimum::-moz-meter-bar { } .t-mono-stacked-currency { - font-family: "fec_currency_mono"; + font-family: 'fec_currency_mono'; text-align: right; } @media screen and (width <= 400px) { meter { display: block; - width: 80% + width: 80%; } .simple-table__cell { @@ -121,12 +139,11 @@ meter:-moz-meter-optimum::-moz-meter-bar { .tooltip__container button { vertical-align: text-top; - } .tooltip { - width: auto !important; - } + width: auto !important; + } } #election-summary { diff --git a/fec/fec/static/scss/widgets/party-money-bars.scss b/fec/fec/static/scss/widgets/party-money-bars.scss index 5d17658f22..960a02e264 100644 --- a/fec/fec/static/scss/widgets/party-money-bars.scss +++ b/fec/fec/static/scss/widgets/party-money-bars.scss @@ -41,11 +41,12 @@ $fontWeightBold: 700; padding: 0 1em 3px 0; } - div, label { + div, + label { border-bottom: solid 1px $colorBorderBottom; } } - + .total-wrapper { display: flexbox; display: flex; @@ -127,7 +128,7 @@ $fontWeightBold: 700; transition: all 1s; } &::before { - content: ""; + content: ''; display: block; height: 20px; position: absolute; @@ -396,7 +397,7 @@ $fontWeightBold: 700; // Universals .t-mono-stacked-currency { - font-family: "fec_currency_mono"; + font-family: 'fec_currency_mono'; text-align: right; } diff --git a/fec/fec/static/scss/widgets/pres-finance-map.scss b/fec/fec/static/scss/widgets/pres-finance-map.scss index 3418c15385..19603dbac5 100644 --- a/fec/fec/static/scss/widgets/pres-finance-map.scss +++ b/fec/fec/static/scss/widgets/pres-finance-map.scss @@ -62,7 +62,8 @@ $sizeTableScroller: 10px; } } - .message, .message[aria-hidden='true'] { + .message, + .message[aria-hidden='true'] { // .message, etc are copied from components/_messages.scss background-color: $neutral; border-color: $gray; @@ -75,7 +76,8 @@ $sizeTableScroller: 10px; transition: all 0.5s; width: 100%; - &.has-error, &[aria-hidden='false'] { + &.has-error, + &[aria-hidden='false'] { margin: 2rem 0; max-height: 150px; padding: 2rem; @@ -167,11 +169,12 @@ $sizeTableScroller: 10px; background-color: $colorTableTdBorder; } } - td, th { + td, + th { flex-grow: 1; flex-shrink: 1; line-height: 1.25em; - padding: #{$fontSizeBase * .5}; + padding: #{$fontSizeBase * 0.5}; pointer-events: none; // removing mouse events here in favor of the handling them &:last-child { @@ -197,14 +200,14 @@ $sizeTableScroller: 10px; } .t-note { line-height: 1.5em; - margin: .5em 0; + margin: 0.5em 0; opacity: 1; - transition: opacity .5s; + transition: opacity 0.5s; user-select: none; &.hidden { opacity: 0; - transition: opacity .5s; + transition: opacity 0.5s; } } } @@ -226,11 +229,13 @@ $sizeTableScroller: 10px; } path { - transition: fill 1s, opacity .5s; + transition: + fill 1s, + opacity 0.5s; &.blur { - opacity: .33; - transition: opacity .5s; + opacity: 0.33; + transition: opacity 0.5s; } } @@ -239,7 +244,7 @@ $sizeTableScroller: 10px; opacity: 0; pointer-events: none; stroke: rgb(59 149 148); - transition: opacity .5s; + transition: opacity 0.5s; } &[data-map_type='bubble'] { @@ -251,7 +256,9 @@ $sizeTableScroller: 10px; transition: fill 1s; } - &.zoomed, &.blur { // turn on pointer events for all paths when we're zoomed in, if they're featured or not + &.zoomed, + &.blur { + // turn on pointer events for all paths when we're zoomed in, if they're featured or not pointer-events: initial; } } @@ -259,17 +266,17 @@ $sizeTableScroller: 10px; circle { opacity: 1; pointer-events: initial; - transition: .5s; + transition: 0.5s; z-index: 100; &.blur { opacity: 0; pointer-events: initial; } - } } - path.zero-value, circle.zero-value { + path.zero-value, + circle.zero-value { pointer-events: none !important; } } @@ -300,18 +307,19 @@ $sizeTableScroller: 10px; font-size: $fontSizeBase * 2; font-weight: $fontWeightRegular; line-height: 1.25em; - margin: 0 0 .25em; + margin: 0 0 0.25em; a { line-height: 1.25em; } } - h2, h3 { + h2, + h3 { font-family: $fontFamilySansSerif; font-size: $fontSizeBase * 1.4; font-weight: $fontWeightRegular; line-height: 1.25em; - margin: 0 0 .25em; + margin: 0 0 0.25em; } } .legend-container { @@ -319,7 +327,7 @@ $sizeTableScroller: 10px; span { line-height: 1.25em; - margin-bottom: .25em; + margin-bottom: 0.25em; text-align: right; } } @@ -334,7 +342,8 @@ $sizeTableScroller: 10px; text-align: left; width: 100%; - a, button { + a, + button { margin: 0 0 1rem; } @@ -345,14 +354,14 @@ $sizeTableScroller: 10px; &[aria-expanded='true'] + .accordion__content { max-height: 700px; - transition: all .5s; + transition: all 0.5s; } &[aria-expanded='false'] + .accordion__content { display: block !important; // Check to see if this interferes with A11Y max-height: 0; padding-bottom: 0; - transition: all .5s; + transition: all 0.5s; } } @@ -374,7 +383,7 @@ $sizeTableScroller: 10px; } &.indent { - padding-left: .75rem; + padding-left: 0.75rem; } } @@ -383,11 +392,11 @@ $sizeTableScroller: 10px; } tr.close-b td { - padding-bottom: .75rem; + padding-bottom: 0.75rem; } tr.close-t td { - padding-top: .75rem; + padding-top: 0.75rem; } th { @@ -448,19 +457,21 @@ $sizeTableScroller: 10px; } #filter-year { - margin-right: .5rem; + margin-right: 0.5rem; order: 5; // responsive - width: calc(100% - .5rem);//20rem; + width: calc(100% - 0.5rem); //20rem; } .candidate-list-wrapper { - margin-right: .5rem; + margin-right: 0.5rem; order: 15; - width: calc(33.33% - .5rem); + width: calc(33.33% - 0.5rem); .remote-table-header { margin-bottom: 0.5px; // Make sure the border is visible above the scrollbar below it - width: calc(100% + 1px); // align the right side with the parent's right boundary + width: calc( + 100% + 1px + ); // align the right side with the parent's right boundary } .table-scroller { @@ -472,14 +483,14 @@ $sizeTableScroller: 10px; } } - td, th { + td, + th { &:nth-child(2) { max-width: 100px; } } tr { - &.selected { background: $colorTableTdBorder; font-weight: $fontWeightBold; @@ -492,8 +503,8 @@ $sizeTableScroller: 10px; } .map-wrapper { - margin-left: .5rem; - margin-right: .5rem; + margin-left: 0.5rem; + margin-right: 0.5rem; width: calc(66.66% - 1rem); .election-map { @@ -514,14 +525,15 @@ $sizeTableScroller: 10px; } #downloads-wrapper { - margin-right: .5rem; + margin-right: 0.5rem; order: 30; - width: calc(50% - .5rem); + width: calc(50% - 0.5rem); } .map-details { .more-info-wrapper { - a, button { + a, + button { margin: 0 0 1rem 1rem; } } @@ -529,30 +541,28 @@ $sizeTableScroller: 10px; } // Large sizes &.w-l { - @extend .w-m; #filter-year { display: inline-block; // for IE11; - margin-right: .5rem; - width: calc(50% - .5rem); + margin-right: 0.5rem; + width: calc(50% - 0.5rem); .js-table-switcher { display: block; } } - .candidate-list-wrapper { order: 20; - width: calc(25% - .5rem); + width: calc(25% - 0.5rem); } .right-column-wrapper { - margin-left: .5rem; + margin-left: 0.5rem; max-height: 490px; order: 30; - width: calc(28% - .5rem); + width: calc(28% - 0.5rem); } .map-wrapper { order: 25; @@ -566,13 +576,13 @@ $sizeTableScroller: 10px; } } .export-methodology-buttons-holder { - margin-left: .5rem; + margin-left: 0.5rem; order: 15; padding-top: 3rem; - width: calc(50% - .5rem); + width: calc(50% - 0.5rem); } #downloads-wrapper { - margin-left: calc(25% + .5rem); + margin-left: calc(25% + 0.5rem); order: 35; width: 75%; } @@ -594,7 +604,8 @@ $sizeTableScroller: 10px; display: table-row; } - td, th { + td, + th { display: table-cell; } } @@ -637,10 +648,10 @@ $sizeTableScroller: 10px; &::after { @include triangle(1.6rem, $inverse, down); - bottom: -.7rem; + bottom: -0.7rem; content: ''; display: block; - left: calc(50% - .8rem); + left: calc(50% - 0.8rem); position: absolute; } } @@ -693,20 +704,20 @@ $sizeTableScroller: 10px; } #downloads-links { - display:flex; + display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; - a { - border: 1px solid $gray-light; - padding: 1rem; - text-align: center; - width: 9rem; + a { + border: 1px solid $gray-light; + padding: 1rem; + text-align: center; + width: 9rem; - &:hover { - background: $gray-lightest; - } + &:hover { + background: $gray-lightest; } + } } } @@ -721,7 +732,8 @@ $sizeTableScroller: 10px; container: presmapcontainer / inline-size; @container presmapcontainer (max-width: 674px ) { - .candidate-list-wrapper, .map-wrapper { + .candidate-list-wrapper, + .map-wrapper { width: 100cqw; } } diff --git a/package-lock.json b/package-lock.json index aebdfee0ab..bcb65e0b70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -114,6 +114,7 @@ "mocha": "^10.4.0", "mockdate": "^3.0.5", "npm-watch": "^0.13.0", + "prettier": "^3.3.3", "promise-polyfill": "^8.3.0", "puppeteer": "^22.11.2", "puppeteer-core": "^21.11.0", @@ -3205,6 +3206,23 @@ "prettier": "^1.18.2 || ^2.0.0" } }, + "node_modules/@vue/compiler-sfc/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "license": "MIT", + "optional": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@vue/compiler-sfc/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -18020,17 +18038,16 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true, "license": "MIT", - "optional": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" diff --git a/package.json b/package.json index c4d3e81b44..ab35368e88 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "build-js": "cd fec && webpack --mode development", "build-production": "cd fec && webpack --mode production && gulp build-sass && gulp build-widgets-sass && gulp purgecss", "format": "eslint --fix ./fec/fec/static/js/**/*.js", - "format-sass": "stylelint ./fec/fec/static/scss/**/*.scss", - "format-sass-fix": "stylelint --fix ./fec/fec/static/scss/**/*.scss", + "format-sass": "prettier './fec/fec/static/scss/**/*.scss' --check", + "format-sass-fix": "prettier './fec/fec/static/scss/**/*.scss' --write", "lint": "eslint --quiet ./fec/fec/static/js/**/*.js", "format-lint": "npm run format && npm run lint", "test": "karma start", @@ -130,6 +130,7 @@ "mocha": "^10.4.0", "mockdate": "^3.0.5", "npm-watch": "^0.13.0", + "prettier": "^3.3.3", "promise-polyfill": "^8.3.0", "puppeteer": "^22.11.2", "puppeteer-core": "^21.11.0", From 5c66ebafebbebad60b35bba61695bab69bdfc815 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 20 Nov 2024 08:25:49 -0500 Subject: [PATCH 05/10] Bring site nav above leaflet zoom --- fec/fec/static/scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fec/fec/static/scss/_variables.scss b/fec/fec/static/scss/_variables.scss index 0f94596b85..8cff0d6a95 100644 --- a/fec/fec/static/scss/_variables.scss +++ b/fec/fec/static/scss/_variables.scss @@ -75,7 +75,7 @@ $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; From b51d0764c7ab45bd134374c78366753943509acf Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 20 Nov 2024 09:09:38 -0500 Subject: [PATCH 06/10] Address sass declaration/nested deprecation warnings --- fec/fec/static/scss/_grid.scss | 2 +- fec/fec/static/scss/components/_buttons.scss | 36 +++++------------ fec/fec/static/scss/components/_calendar.scss | 1 + fec/fec/static/scss/components/_cards.scss | 14 +++---- fec/fec/static/scss/components/_charts.scss | 2 +- .../scss/components/_data-container.scss | 9 ++--- .../scss/components/_datatable-panel.scss | 1 - .../static/scss/components/_datatables.scss | 4 +- .../static/scss/components/_dropdowns.scss | 17 +++----- fec/fec/static/scss/components/_filters.scss | 13 +++---- fec/fec/static/scss/components/_footer.scss | 7 +++- .../static/scss/components/_form-styles.scss | 6 +-- fec/fec/static/scss/components/_hero.scss | 6 ++- fec/fec/static/scss/components/_messages.scss | 6 ++- fec/fec/static/scss/components/_modals.scss | 7 +++- fec/fec/static/scss/components/_nav.scss | 3 +- fec/fec/static/scss/components/_options.scss | 6 ++- .../static/scss/components/_overviews.scss | 2 +- .../static/scss/components/_search-bar.scss | 12 ++---- fec/fec/static/scss/components/_sidebar.scss | 6 ++- fec/fec/static/scss/elements/_forms.scss | 4 -- fec/fec/static/scss/mixins/_utilities.scss | 39 ++++++++----------- .../scss/vendor/bourbon/css3/_keyframes.scss | 4 +- .../static/scss/vendor/neat/grid/_media.scss | 2 +- .../scss/widgets/contributions-by-state.scss | 6 +-- .../static/scss/widgets/party-money-bars.scss | 28 ++----------- 26 files changed, 100 insertions(+), 143 deletions(-) diff --git a/fec/fec/static/scss/_grid.scss b/fec/fec/static/scss/_grid.scss index 1d54e5ca0f..223d9de7c4 100644 --- a/fec/fec/static/scss/_grid.scss +++ b/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) { diff --git a/fec/fec/static/scss/components/_buttons.scss b/fec/fec/static/scss/components/_buttons.scss index 4a87c7de90..caa7adfd51 100644 --- a/fec/fec/static/scss/components/_buttons.scss +++ b/fec/fec/static/scss/components/_buttons.scss @@ -252,10 +252,8 @@ } .button--search { - background-size: u(2.2rem); - background-position: 50%; padding: 0; - @include u-icon-button($magnifying-glass); + @include u-icon-button($magnifying-glass, left, u(2.2rem), background-position 50%, padding 0); } // Buttons: Calendar dropdown buttons @@ -324,15 +322,11 @@ // toggle two-candidate view on map comparison .button--two-candidates { - background-size: u(3rem); - padding-left: u(5rem); - @include u-icon-button($two-candidates, left); + @include u-icon-button($two-candidates, left, u(3rem), background-size u(3rem), padding-left u(5rem)); } .button--candidate { - background-size: u(2rem); - padding-left: u(4rem); - @include u-icon-button($candidate, left); + @include u-icon-button($candidate, left, u(2rem), padding-left u(4rem)); } .button--election { @@ -352,13 +346,11 @@ } .button--download--dropdown { - padding-right: u(6rem); - @include u-icon-button($download, left); + @include u-icon-button($download, left, 1.5rem, padding-right u(6rem)); } .button--subscribe { - padding-right: u(6rem); - @include u-icon-button($signal, left); + @include u-icon-button($signal, left, 1.5rem, padding-right u(6rem)); } .button--grid { @@ -398,31 +390,23 @@ } .button--disbursements { - background-size: u(3rem); - padding: u(2rem 3rem 2rem 5rem); - @include u-icon-button($disbursement, left); + @include u-icon-button($disbursement, left, u(3rem), padding u(2rem 3rem 2rem 5rem)); } .button--raising { - background-size: u(3rem); - padding: u(2rem 3rem 2rem 5rem); - @include u-icon-button($piggy-bank, left); + @include u-icon-button($piggy-bank, left, u(3rem), padding u(2rem 3rem 2rem 5rem)); } .button--envelope { - background-size: u(3rem); - padding-left: u(5rem); - @include u-icon-button($moving-envelope, left); + @include u-icon-button($moving-envelope, left, u(3rem), padding-left u(5rem)); } .button--previous { - background-position: 50% 50%; - @include u-icon-button($arrow-left, left, 1rem); + @include u-icon-button($arrow-left, left, 1rem, background-position 50% 50%); } .button--next { - background-position: 50% 50%; - @include u-icon-button($arrow-right, right, 1rem); + @include u-icon-button($arrow-right, right, 1rem, background-position 50% 50%); } .button--close--base { diff --git a/fec/fec/static/scss/components/_calendar.scss b/fec/fec/static/scss/components/_calendar.scss index 2f816f5bae..f787163d29 100644 --- a/fec/fec/static/scss/components/_calendar.scss +++ b/fec/fec/static/scss/components/_calendar.scss @@ -468,6 +468,7 @@ } .cal-list__time { + margin-right: 0 !important; // overriding omega() @include span-columns(4 of 8); @include omega; } diff --git a/fec/fec/static/scss/components/_cards.scss b/fec/fec/static/scss/components/_cards.scss index 7c3863fc76..81424f2aba 100644 --- a/fec/fec/static/scss/components/_cards.scss +++ b/fec/fec/static/scss/components/_cards.scss @@ -76,8 +76,7 @@ text-align: left; .card__image { - display: table-cell; - @include span-columns(1 of 3); + @include span-columns(1 of 3, table-cell); } .card__image__container { @@ -220,10 +219,9 @@ border: 2px solid transparent; .card__image__container { - display: table-cell; float: none; vertical-align: middle; - @include span-columns(4); + @include span-columns(4, table-cell); } .card__image { @@ -312,14 +310,12 @@ } .card--primary { + border: 2px solid transparent; + font-weight: bold; + @include u-bg--primary; @include u-font-color($gray-lightest); - & { - border: 2px solid transparent; - font-weight: bold; - } - &:hover { background-color: $navy; border: 2px solid $aqua; diff --git a/fec/fec/static/scss/components/_charts.scss b/fec/fec/static/scss/components/_charts.scss index 55951d027a..d51ef7b8a0 100644 --- a/fec/fec/static/scss/components/_charts.scss +++ b/fec/fec/static/scss/components/_charts.scss @@ -196,7 +196,7 @@ border-color: $primary; padding: 2px 0; text-align: center; - margin: 1rem 0; + margin: 1rem 0rem 1rem 0rem; @include clearfix; h5 { diff --git a/fec/fec/static/scss/components/_data-container.scss b/fec/fec/static/scss/components/_data-container.scss index c7770b0ab8..4577e9322b 100644 --- a/fec/fec/static/scss/components/_data-container.scss +++ b/fec/fec/static/scss/components/_data-container.scss @@ -117,17 +117,16 @@ } .data-container__action { - float: right; + float: right !important; // overriding span-columns() text-align: right; - @include span-columns(5); + @include span-columns(5, block); } .data-container__share { - padding-left: u(2rem); text-indent: 0; width: auto; margin-right: u(1rem); - @include u-icon-button($share, right); + @include u-icon-button($share, right, 1.5rem, padding-left u(2rem)); } .data-container__export { @@ -170,7 +169,7 @@ } } -//Responsive behavior for datatables in tab pannels on profile pages (committee, candidate, election) +//Responsive behavior for datatables in tab panels on profile pages (committee, candidate, election) @media screen and (width <= 940px) { .data-container__wrapper .main__content--right-full { display: block; diff --git a/fec/fec/static/scss/components/_datatable-panel.scss b/fec/fec/static/scss/components/_datatable-panel.scss index 040701362c..ef8f3b15f2 100644 --- a/fec/fec/static/scss/components/_datatable-panel.scss +++ b/fec/fec/static/scss/components/_datatable-panel.scss @@ -130,7 +130,6 @@ .panel__close { background-position: 0 50%; background-size: u(1.5rem); - background-repeat: no-repeat; border: none; cursor: pointer; float: left; diff --git a/fec/fec/static/scss/components/_datatables.scss b/fec/fec/static/scss/components/_datatables.scss index 31de564018..a17376dd0b 100644 --- a/fec/fec/static/scss/components/_datatables.scss +++ b/fec/fec/static/scss/components/_datatables.scss @@ -131,6 +131,8 @@ padding: u(1rem); word-wrap: break-word; + @include transition(padding-left, 0.2s); + @include media($med) { max-width: max(9em, 30vw); } @@ -139,8 +141,6 @@ max-width: max(13em, 20vw); } - @include transition(padding-left, 0.2s); - &.column--number { text-align: right; } diff --git a/fec/fec/static/scss/components/_dropdowns.scss b/fec/fec/static/scss/components/_dropdowns.scss index 0bfb2c5347..53f7ffff7d 100644 --- a/fec/fec/static/scss/components/_dropdowns.scss +++ b/fec/fec/static/scss/components/_dropdowns.scss @@ -28,7 +28,6 @@ width: 100%; &::after { - background-repeat: no-repeat; background-position: 90% 50%; background-size: 12px; border-left: 1px solid $primary; @@ -56,11 +55,8 @@ &.is-successful { &::after { - background-position: u(1.25rem) 50%; - background-size: 18px; - padding-left: u(2.5rem); right: 0; - @include u-icon-button($check); + @include u-icon-button($check, left, 1.5rem, background-position u(1.25rem) 50%, background-size 18px, padding-left u(2.5rem)); } } @@ -180,6 +176,10 @@ margin: u(0.5rem 0); li { + position: relative; + + @include animation(fadeIn .2s ease-in); + input[type="checkbox"] + label.disabled { cursor: default; opacity: .5; @@ -187,9 +187,6 @@ background-color: #aeb0b5 !important; } - position: relative; - @include animation(fadeIn 0.2s ease-in); - &:hover { input[type='checkbox']:not(:checked) + label:not(.is-loading) @@ -215,14 +212,12 @@ } .dropdown__remove { - background-position: u(0.75rem) 50%; - background-size: 18px; display: none; top: 0; bottom: u(1rem); position: absolute; z-index: $z1; - @include u-icon-button($x, $gray-dark); + @include u-icon-button($x, left, 1.5rem, background-position u(.75rem) 50%, background-size 18px); } @include media($med) { diff --git a/fec/fec/static/scss/components/_filters.scss b/fec/fec/static/scss/components/_filters.scss index 3c4c93be06..8d5b823bf1 100644 --- a/fec/fec/static/scss/components/_filters.scss +++ b/fec/fec/static/scss/components/_filters.scss @@ -127,8 +127,8 @@ $filter-button-width: u(4.6rem); width: 100%; overflow: visible; left: -800px; - @include transition(left 0.2s ease-in-out); - @include u-bg--neutral; + @include u-bg--neutral; // Adds declaration and nested + @include transition(left .2s ease-in-out); &[aria-hidden='true'] { display: block !important; @@ -145,12 +145,13 @@ $filter-button-width: u(4.6rem); border-top: 2px solid $primary; color: $primary; line-height: u(3rem); - margin: 0; + margin: 0 !important; // overriding what heading() will do padding: u(1rem); text-align: left; width: 100%; - @include clearfix; + @include heading(h2); + @include clearfix; } .filters__toggle { @@ -217,9 +218,7 @@ $filter-button-width: u(4.6rem); width: u(4.6rem); &.is-successful { - background-size: u(2.2rem); - background-position: 50%; - @include u-icon-button($check); + @include u-icon-button($check, left, 1.5rem, background-size u(2.2rem), background-position 50%); } } diff --git a/fec/fec/static/scss/components/_footer.scss b/fec/fec/static/scss/components/_footer.scss index 5e91f95947..0448236b02 100644 --- a/fec/fec/static/scss/components/_footer.scss +++ b/fec/fec/static/scss/components/_footer.scss @@ -117,9 +117,12 @@ } .address { - margin-right: 0; - float: right; + margin-right: 0 !important; // overriding span-columns() @include span-columns(3); + + & { + float: right; + } } } } diff --git a/fec/fec/static/scss/components/_form-styles.scss b/fec/fec/static/scss/components/_form-styles.scss index 707f5e41aa..28dbf7bd58 100644 --- a/fec/fec/static/scss/components/_form-styles.scss +++ b/fec/fec/static/scss/components/_form-styles.scss @@ -253,11 +253,7 @@ } &.is-successful { - background-size: u(2rem); - background-position: 50%; - padding: u(1.5rem); - - @include u-icon-button($check); + @include u-icon-button($check, left, 1.5rem, background-size u(2rem), background-position 50%, padding u(1.5rem)); } } } diff --git a/fec/fec/static/scss/components/_hero.scss b/fec/fec/static/scss/components/_hero.scss index dada79bb12..4bcc72d279 100644 --- a/fec/fec/static/scss/components/_hero.scss +++ b/fec/fec/static/scss/components/_hero.scss @@ -223,7 +223,11 @@ @include media($lg) { .hero__heading { @include span-columns(6); - @include shift(3); + & { + // We need shift() to happen second to override margin- from span-columns(). + // Problem: shift() only adds declaration while span-columns() is declaration and nested (&:lastchild) + @include shift(3); + } } } } diff --git a/fec/fec/static/scss/components/_messages.scss b/fec/fec/static/scss/components/_messages.scss index 65def9bf1b..6e80f52cde 100644 --- a/fec/fec/static/scss/components/_messages.scss +++ b/fec/fec/static/scss/components/_messages.scss @@ -84,7 +84,11 @@ p { .message--big { @include media($lg) { @include span-columns(8); - @include shift(2); + & { + // We need shift() to happen second to override margin- from span-columns(). + // Problem: shift() only adds declaration while span-columns() is declaration and nested (&:lastchild) + @include shift(2); + } } } diff --git a/fec/fec/static/scss/components/_modals.scss b/fec/fec/static/scss/components/_modals.scss index 530f06ec36..27ded9c574 100644 --- a/fec/fec/static/scss/components/_modals.scss +++ b/fec/fec/static/scss/components/_modals.scss @@ -50,8 +50,13 @@ .modal__tips { padding-top: u(1rem); + @include span-columns(5); - @include shift(1); + & { + // We need shift() to happen second to override margin- from span-columns(). + // Problem: shift() only adds declaration while span-columns() is declaration and nested (&:lastchild) + @include shift(1); + } } .keyword-modal { diff --git a/fec/fec/static/scss/components/_nav.scss b/fec/fec/static/scss/components/_nav.scss index c2a658994c..0ca4997f83 100644 --- a/fec/fec/static/scss/components/_nav.scss +++ b/fec/fec/static/scss/components/_nav.scss @@ -43,7 +43,6 @@ $devBannerTop: 4rem; height: calc(100vh - 12rem); - top: 4rem; @include media($lg) { height: auto; @@ -184,8 +183,8 @@ position: relative; top: 0; width: 100%; - @include clearfix; @include transform(translateX(0)); + @include clearfix; } .site-nav__panel { diff --git a/fec/fec/static/scss/components/_options.scss b/fec/fec/static/scss/components/_options.scss index 03cb7460ce..2ecd894362 100644 --- a/fec/fec/static/scss/components/_options.scss +++ b/fec/fec/static/scss/components/_options.scss @@ -72,6 +72,10 @@ .option__aside { padding-top: 0; @include span-columns(2 of 9); - @include shift(1); + & { + // We need shift() to happen second to override margin- from span-columns(). + // Problem: shift() only adds declaration while span-columns() is declaration and nested (&:lastchild) + @include shift(1); + } } } diff --git a/fec/fec/static/scss/components/_overviews.scss b/fec/fec/static/scss/components/_overviews.scss index f30054a4a1..52257c77f1 100644 --- a/fec/fec/static/scss/components/_overviews.scss +++ b/fec/fec/static/scss/components/_overviews.scss @@ -29,7 +29,7 @@ .breakdown-link { display: inline-block; - margin: 0 0 2rem; + margin: 0 0 2rem 0; @include heading(h4); } diff --git a/fec/fec/static/scss/components/_search-bar.scss b/fec/fec/static/scss/components/_search-bar.scss index b9d6a29212..8a9ac921c6 100644 --- a/fec/fec/static/scss/components/_search-bar.scss +++ b/fec/fec/static/scss/components/_search-bar.scss @@ -296,10 +296,8 @@ $search-button-width: u(5.6rem); // Just testing things out. Refactor to use non-js class if we use it .typeahead-filter { .button--search { - background-size: u(2.8rem); - background-position: 50%; padding: 0; - @include u-icon-button($magnifying-glass-arrow); + @include u-icon-button($magnifying-glass-arrow, left, u(2.8rem), background-position 50%, padding 0); } &[data-allow-text] { @@ -308,10 +306,8 @@ $search-button-width: u(5.6rem); } .button--search { - background-size: u(2.2rem); - background-position: 50%; padding: 0; - @include u-icon-button($magnifying-glass); + @include u-icon-button($magnifying-glass, left, u(2.2rem), background-position 50%, padding 0); } button.is-loading { @@ -319,9 +315,7 @@ $search-button-width: u(5.6rem); } button.is-successful { - background-size: u(2.8rem); - background-position: 50%; - @include u-icon-button($check); + @include u-icon-button($check, left, 1.5rem, background-size u(2.8rem), background-position 50%); } } } diff --git a/fec/fec/static/scss/components/_sidebar.scss b/fec/fec/static/scss/components/_sidebar.scss index 24f39fd6fb..4f927205e1 100644 --- a/fec/fec/static/scss/components/_sidebar.scss +++ b/fec/fec/static/scss/components/_sidebar.scss @@ -28,7 +28,11 @@ @include media($med) { @include span-columns(3); - @include shift(1); + & { + // We need shift() to happen second to override margin- from span-columns(). + // Problem: shift() only adds declaration while span-columns() is declaration and nested (&:lastchild) + @include shift(1); + } } } diff --git a/fec/fec/static/scss/elements/_forms.scss b/fec/fec/static/scss/elements/_forms.scss index 16aee56c43..cf2cc8d13a 100644 --- a/fec/fec/static/scss/elements/_forms.scss +++ b/fec/fec/static/scss/elements/_forms.scss @@ -58,10 +58,8 @@ select { } select { - // & { width: auto; background-color: transparent; - background-repeat: no-repeat; background-position: right u(2rem) top 50%; background-size: 12px; color: $base; @@ -70,7 +68,6 @@ select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - // } @include appearance(none); @include u-icon-bg($arrow-down, $primary); @@ -194,7 +191,6 @@ input[type='file'] { [type='checkbox']:checked + label::before { background-position: 50%; background-size: 12px; - background-repeat: no-repeat; border: 1px solid $gray-dark; @include u-icon-bg($check, $inverse); } diff --git a/fec/fec/static/scss/mixins/_utilities.scss b/fec/fec/static/scss/mixins/_utilities.scss index 369c2639d8..dc26d58f87 100644 --- a/fec/fec/static/scss/mixins/_utilities.scss +++ b/fec/fec/static/scss/mixins/_utilities.scss @@ -109,7 +109,6 @@ // Generates a circle with a background color and an icon within that circle // Can be used in pseudo-elements to create a quasi-background image // - @mixin u-icon-circle($icon, $circlecolor, $iconcolor, $size) { background-position: 50% 50%; background-size: 60%; @@ -118,19 +117,15 @@ display: block; height: $size; width: $size; - @include u-icon-bg($icon, $iconcolor); } -// u-font-color() -// -// Used to set the color of all child elements +// u-font-color[-declaration|-nested]() // // $color - The color of the font and (if applicable) border-color // - @mixin u-font-color($color) { - & { + & { // Adding this nested style so u-font-color isn't adding both declarations and nested color: $color; } @@ -225,8 +220,8 @@ @mixin u-bg--primary() { background-color: $primary; - @include u-form--inverse; @include u-font-color($gray-lightest); + @include u-form--inverse; a { border-bottom-color: $gray-lightest; @@ -252,8 +247,9 @@ @mixin u-bg--secondary() { background-color: $secondary; - @include u-form--inverse; + @include u-font-color($gray-lightest); + @include u-form--inverse; a { border-bottom-color: $gray-lightest; @@ -279,14 +275,9 @@ @mixin u-bg--neutral() { background-color: $gray-lightest; + @include u-font-color($base); - @include u-form-color( - $inverse, - $primary, - $primary-contrast, - 'neutral', - $primary - ); + @include u-form-color($inverse, $primary, $primary-contrast, 'neutral', $primary); a { &:hover { @@ -303,8 +294,8 @@ @mixin u-bg--dark() { background-color: $gray-dark; - @include u-form--inverse; @include u-font-color($gray-lightest); + @include u-form--inverse; a { border-bottom-color: $gray-lightest; @@ -316,9 +307,7 @@ } @mixin u-bg--neutral() { - & { - background-color: $gray-lightest; - } + background-color: $gray-lightest; @include u-font-color($base); @@ -386,7 +375,8 @@ // $width - Width of the icon, defaults to 1.5rem // -@mixin u-icon-button($icon, $side: left, $width: 1.5rem) { + +@mixin u-icon-button($icon, $side: left, $width: 1.5rem, $overrides...) { background-image: url('#{svg-fill($icon, $base)}'); background-repeat: no-repeat; background-size: $width; @@ -398,6 +388,11 @@ background-position: right u(1rem) top 50%; padding-right: $width + 2rem; } + + // Allow for any overrides + @each $overrideProp, $overVal1, $overVal2, $overVal3, $overVal4 in $overrides { + #{$overrideProp}: $overVal1 $overVal2 $overVal3 $overVal4; + } &.button--alt { background-image: url('#{svg-fill($icon, $base)}'); @@ -435,7 +430,7 @@ @include animation(fadeIn 0.8s ease-out); } -// Printer style utitlity +// Printer style utility .u-print-only { display: none; diff --git a/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss b/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss index 66b78f1352..903b9fed5f 100644 --- a/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss +++ b/fec/fec/static/scss/vendor/bourbon/css3/_keyframes.scss @@ -7,7 +7,7 @@ $original-prefix-for-spec: $prefix-for-spec; @if $original-prefix-for-webkit { - @include disable-prefix-for-all(); + @include disable-prefix-for-all; $prefix-for-webkit: true !global; @-webkit-keyframes #{$name} { @content; @@ -15,7 +15,7 @@ } @if $original-prefix-for-mozilla { - @include disable-prefix-for-all(); + @include disable-prefix-for-all; $prefix-for-mozilla: true !global; @-moz-keyframes #{$name} { @content; diff --git a/fec/fec/static/scss/vendor/neat/grid/_media.scss b/fec/fec/static/scss/vendor/neat/grid/_media.scss index 77eedeab05..b935551583 100644 --- a/fec/fec/static/scss/vendor/neat/grid/_media.scss +++ b/fec/fec/static/scss/vendor/neat/grid/_media.scss @@ -90,8 +90,8 @@ } @media #{$media-query} { - @content; $grid-columns: $default-grid-columns !global; + @content; } } } diff --git a/fec/fec/static/scss/widgets/contributions-by-state.scss b/fec/fec/static/scss/widgets/contributions-by-state.scss index 2f5e4995cd..c5966b9d15 100644 --- a/fec/fec/static/scss/widgets/contributions-by-state.scss +++ b/fec/fec/static/scss/widgets/contributions-by-state.scss @@ -173,9 +173,9 @@ aside.contribs-by-state { } button.is-successful { - background-position: 50%; - background-size: 2.8rem; - @include u-icon-button($check); + // background-size: 2.8rem; + // background-position: 50%; + @include u-icon-button($check, left, 2.8rem, background-position 50%); } } #contribs-by-state-typeahead-error { diff --git a/fec/fec/static/scss/widgets/party-money-bars.scss b/fec/fec/static/scss/widgets/party-money-bars.scss index 6ed5051a7e..6824aeeb86 100644 --- a/fec/fec/static/scss/widgets/party-money-bars.scss +++ b/fec/fec/static/scss/widgets/party-money-bars.scss @@ -31,34 +31,18 @@ $fontWeightBold: 700; grid-template-columns: 4em auto 25%; display: grid; - .js-parties-holder { - grid-template-columns: 4em auto 25%; - display: grid; - - .js-meter-row { - display: contents; - } - .js.party.title { - padding-top: 3px; - } - .js-party-value { - padding: 0 1em 3px 0; - white-space: nowrap; - } - - div, label { - border-bottom: solid 1px $colorBorderBottom; - } + .js-meter-row { + display: contents; } .js.party.title { padding-top: 3px; } .js-party-value { padding: 0 1em 3px 0; + white-space: nowrap; } - div, - label { + div, label { border-bottom: solid 1px $colorBorderBottom; } } @@ -69,7 +53,6 @@ $fontWeightBold: 700; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: $fontSizeBase; - // padding-bottom: $fontSizeBase * 2; .value { font-family: $fontFamilyMonospace; @@ -256,7 +239,6 @@ $fontWeightBold: 700; .total-wrapper { border-bottom: none; - // border-right: solid thin $colorElementBordersOnLight; margin: 0; padding-bottom: 0; padding-right: $fontSizeBase * 4; @@ -264,14 +246,12 @@ $fontWeightBold: 700; width: 50%; .value { - // margin: -5px 0 $fontSizeBase 0; -ms-flex-order: 1; order: 1; text-align: right; } .description { font-size: $fontSizeBase * 1.4; - // margin: 5px 0 0; -ms-flex-order: 2; order: 2; } From 4db988c9b56b7326382e46815ad2af0c7b3559bb Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 20 Nov 2024 09:09:50 -0500 Subject: [PATCH 07/10] Upgrade sass version --- package-lock.json | 319 +++++++++++++++++++++++++++++++++++++++++++--- package.json | 2 +- 2 files changed, 305 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 57cbb4b72f..a2247a3e95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -101,13 +101,12 @@ "mockdate": "^3.0.5", "moment": "^2.29.4", "npm-watch": "^0.13.0", - "prettier": "^3.3.3", - "promise-polyfill": "^8.3.0", - "puppeteer": "^22.11.2", "numeral": "^1.5.6", "perfect-scrollbar": "^1.5.5", + "prettier": "^3.3.3", + "puppeteer": "^22.11.2", "puppeteer-core": "^21.11.0", - "sass": "^1.77.6", + "sass": "^1.78.0", "scrollmonitor": "^1.2.11", "sinon": "^17.0.1", "sinon-chai": "^3.7.0", @@ -2857,6 +2856,42 @@ "dev": true, "license": "MIT" }, + "node_modules/@puppeteer/browsers": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.3.0.tgz", + "integrity": "sha512-ioXoq9gPxkss4MYhD+SFaU9p1IHFUX0ILAWFPyjGaBdjLsYAlZw6j1iLA0N/m12uVHLFDfSYNF7EQccjinIMDA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "debug": "^4.3.5", + "extract-zip": "^2.0.1", + "progress": "^2.0.3", + "proxy-agent": "^6.4.0", + "semver": "^7.6.3", + "tar-fs": "^3.0.6", + "unbzip2-stream": "^1.4.3", + "yargs": "^17.7.2" + }, + "bin": { + "browsers": "lib/cjs/main-cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@puppeteer/browsers/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -5722,6 +5757,49 @@ "license": "Apache-2.0", "optional": true }, + "node_modules/bare-fs": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz", + "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "bare-events": "^2.0.0", + "bare-path": "^2.0.0", + "bare-stream": "^2.0.0" + } + }, + "node_modules/bare-os": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz", + "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==", + "dev": true, + "license": "Apache-2.0", + "optional": true + }, + "node_modules/bare-path": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz", + "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "bare-os": "^2.1.0" + } + }, + "node_modules/bare-stream": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.2.tgz", + "integrity": "sha512-EFZHSIBkDgSHIwj2l2QZfP4U5OcD4xFAOwhSb/vlr9PIqyGJGvB/nfClJbcnh3EY4jtPE4zsb5ztae96bVF79A==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "streamx": "^2.20.0" + } + }, "node_modules/base": { "version": "0.11.2", "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz", @@ -7695,6 +7773,53 @@ "node": ">= 0.10" } }, + "node_modules/cosmiconfig": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dev": true, + "license": "MIT", + "dependencies": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/cosmiconfig/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "license": "Python-2.0" + }, + "node_modules/cosmiconfig/node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", @@ -8835,12 +8960,11 @@ } }, "node_modules/devtools-protocol": { - "version": "0.0.1299070", - "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1299070.tgz", - "integrity": "sha512-+qtL3eX50qsJ7c+qVyagqi7AWMoQCBGNfoyJZMwm/NSXVqLYbuitrWEEIzxfUmTNy7//Xe8yhMmQ+elj3uAqSg==", + "version": "0.0.1312386", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz", + "integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==", "dev": true, - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/di": { "version": "0.0.1", @@ -9403,6 +9527,16 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/env-paths": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/envinfo": { "version": "7.13.0", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.13.0.tgz", @@ -15946,6 +16080,13 @@ "node": ">=0.10.0" } }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, + "license": "MIT" + }, "node_modules/list.js": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/list.js/-/list.js-2.3.1.tgz", @@ -18847,6 +18988,25 @@ "node": ">=0.8" } }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/parse-node-version": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", @@ -19519,6 +19679,36 @@ "dev": true, "license": "ISC" }, + "node_modules/proxy-agent": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.4.0.tgz", + "integrity": "sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.0.2", + "debug": "^4.3.4", + "http-proxy-agent": "^7.0.1", + "https-proxy-agent": "^7.0.3", + "lru-cache": "^7.14.1", + "pac-proxy-agent": "^7.0.1", + "proxy-from-env": "^1.1.0", + "socks-proxy-agent": "^8.0.2" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/proxy-agent/node_modules/lru-cache": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", + "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -19616,6 +19806,26 @@ "dev": true, "license": "MIT" }, + "node_modules/puppeteer": { + "version": "22.15.0", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-22.15.0.tgz", + "integrity": "sha512-XjCY1SiSEi1T7iSYuxS82ft85kwDJUS7wj1Z0eGVXKdtr5g4xnVcbjwxhq5xBnpK/E7x1VZZoJDxpjAOasHT4Q==", + "dev": true, + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@puppeteer/browsers": "2.3.0", + "cosmiconfig": "^9.0.0", + "devtools-protocol": "0.0.1312386", + "puppeteer-core": "22.15.0" + }, + "bin": { + "puppeteer": "lib/esm/puppeteer/node/cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/puppeteer-core": { "version": "21.11.0", "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-21.11.0.tgz", @@ -19723,6 +19933,60 @@ "tar-stream": "^3.1.5" } }, + "node_modules/puppeteer/node_modules/chromium-bidi": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.3.tgz", + "integrity": "sha512-qXlsCmpCZJAnoTYI83Iu6EdYQpMYdVkCfq08KDh2pmlVqK5t5IA9mGs4/LwCwp4fqisSOMXZxP3HIh8w8aRn0A==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "mitt": "3.0.1", + "urlpattern-polyfill": "10.0.0", + "zod": "3.23.8" + }, + "peerDependencies": { + "devtools-protocol": "*" + } + }, + "node_modules/puppeteer/node_modules/puppeteer-core": { + "version": "22.15.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.15.0.tgz", + "integrity": "sha512-cHArnywCiAAVXa3t4GGL2vttNxh7GqXtIYGym99egkNJ3oG//wL9LkvO4WE8W1TJe95t1F1ocu9X4xWaGsOKOA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@puppeteer/browsers": "2.3.0", + "chromium-bidi": "0.6.3", + "debug": "^4.3.6", + "devtools-protocol": "0.0.1312386", + "ws": "^8.18.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/puppeteer/node_modules/ws": { + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/purgecss": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-6.0.0.tgz", @@ -20873,9 +21137,9 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.77.8", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", - "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", + "version": "1.78.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz", + "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==", "dev": true, "license": "MIT", "dependencies": { @@ -22243,9 +22507,9 @@ } }, "node_modules/streamx": { - "version": "2.18.0", - "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.18.0.tgz", - "integrity": "sha512-LLUC1TWdjVdn1weXGcSxyTR3T4+acB6tVGXT95y0nGbca4t4o/ng1wKAGTljm9VicuCVLvRlqFYXYy5GwgM7sQ==", + "version": "2.20.2", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.20.2.tgz", + "integrity": "sha512-aDGDLU+j9tJcUdPGOaHmVF1u/hhI+CsGkT02V3OKlHDV7IukOI+nTWAGkiZEKCO35rWN1wIr4tS7YFr1f4qSvA==", "dev": true, "license": "MIT", "dependencies": { @@ -22726,6 +22990,21 @@ "node": ">=6" } }, + "node_modules/tar-fs": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz", + "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==", + "dev": true, + "license": "MIT", + "dependencies": { + "pump": "^3.0.0", + "tar-stream": "^3.1.5" + }, + "optionalDependencies": { + "bare-fs": "^2.1.1", + "bare-path": "^2.1.0" + } + }, "node_modules/tar-stream": { "version": "3.1.7", "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz", @@ -25349,6 +25628,16 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } } } diff --git a/package.json b/package.json index 474bfe2bd3..a14eab7458 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "numeral": "^1.5.6", "perfect-scrollbar": "^1.5.5", "puppeteer-core": "^21.11.0", - "sass": "^1.77.6", + "sass": "^1.78.0", "scrollmonitor": "^1.2.11", "sinon": "^17.0.1", "sinon-chai": "^3.7.0", From 4b56584b0a33307aaa2821e28fa601453d0f8ec0 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 20 Nov 2024 09:10:19 -0500 Subject: [PATCH 08/10] Reorg Gulpfile to be more modular, descriptive --- fec/gulpfile.js | 83 +++++++++++++++++++++++++------------------------ 1 file changed, 43 insertions(+), 40 deletions(-) diff --git a/fec/gulpfile.js b/fec/gulpfile.js index 9a2aaa1786..63d114062a 100644 --- a/fec/gulpfile.js +++ b/fec/gulpfile.js @@ -19,33 +19,34 @@ const webp = require('gulp-webp'); const _ = require('underscore'); // Consider using gulp-rev-delete-original later -gulp.task('clear-css-dir', function() { +gulp.task('_css-clear-directory', function() { return gulp .src('./dist/fec/static/css', { read: false, allowEmpty: true }) .pipe(clean()); }); +gulp.task('_css-compile', function() { + return ( + gulp + .src('./fec/static/scss/*.scss') + // compiles sass + .pipe(sass().on('error', sass.logError)) + // minifies css + .pipe(csso()) + // sourcemaps for local to back-trace source of scss + //.pipe(gulpif(!production, sourcemaps.init()) + //makes manifest sass (static asset revision) and puts in destination + .pipe(rev()) + .pipe(gulp.dest('./dist/fec/static/css')) + // writes manifest file into destination + .pipe(rev.manifest('./dist/fec/static/css/rev-manifest-css.json')) + .pipe(gulp.dest('.')) + ); + //.pipe(gulpif(!production, sourcemaps.write())) +}); gulp.task( 'build-sass', - gulp.series('clear-css-dir', function() { - return ( - gulp - .src('./fec/static/scss/*.scss') - // compiles sass - .pipe(sass().on('error', sass.logError)) - // minifies css - .pipe(csso()) - // sourcemaps for local to back-trace source of scss - //.pipe(gulpif(!production, sourcemaps.init()))*/ - //makes manifest sass (static asset revision) and puts in destination - .pipe(rev()) - .pipe(gulp.dest('./dist/fec/static/css')) - // writes manifest file into destination - .pipe(rev.manifest('./dist/fec/static/css/rev-manifest-css.json')) - .pipe(gulp.dest('.')) - ); - //.pipe(gulpif(!production, sourcemaps.write())) - }) + gulp.series('_css-clear-directory', '_css-compile') ); /** @@ -71,32 +72,34 @@ gulp.task('purgecss', () => { }); // The widgets are separate because we want them in a specific place with a predictable naming convention -gulp.task('clear-widgets-css-dir', function() { +gulp.task('_widgets-clear-directory', function() { return gulp .src('./dist/fec/static/css/widgets', { read: false, allowEmpty: true }) .pipe(clean()); }); +gulp.task('_widgets-compile-sass', function() { + return ( + gulp + .src('./fec/static/scss/widgets/*.scss') + // compiles sass + .pipe(sass().on('error', sass.logError)) + // minifies css + .pipe(csso()) + // sourcemaps for local to back-trace source of scss + //.pipe(gulpif(!production, sourcemaps.init())) + //makes manifest sass (static asset revision) and puts in destination + // .pipe(rev()) + .pipe(gulp.dest('./dist/fec/static/css/widgets')) + // writes manifest file into destination + // .pipe(rev.manifest('./dist/fec/static/css/rev-manifest-modules-css.json')) + .pipe(gulp.dest('./dist/fec/static/css/widgets')) + ); + //.pipe(gulpif(!production, sourcemaps.write())) +}); + gulp.task( 'build-widgets-sass', - gulp.series('clear-widgets-css-dir', function() { - return ( - gulp - .src('./fec/static/scss/widgets/*.scss') - // compiles sass - .pipe(sass().on('error', sass.logError)) - // minifies css - .pipe(csso()) - // sourcemaps for local to back-trace source of scss - //.pipe(gulpif(!production, sourcemaps.init()))*/ - //makes manifest sass (static asset revision) and puts in destination - // .pipe(rev()) - .pipe(gulp.dest('./dist/fec/static/css/widgets')) - // writes manifest file into destination - // .pipe(rev.manifest('./dist/fec/static/css/rev-manifest-modules-css.json')) - .pipe(gulp.dest('./dist/fec/static/css/widgets')) - ); - //.pipe(gulpif(!production, sourcemaps.write())) - }) + gulp.series('_widgets-clear-directory', '_widgets-compile-sass') ); // clear icons output folder to clean old icons From 8db4323ecaca9a3f755e647bd64bd000f9be65f3 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 20 Nov 2024 09:13:30 -0500 Subject: [PATCH 09/10] Sass formatting --- fec/fec/static/scss/components/_cards.scss | 2 +- fec/fec/static/scss/components/_dropdowns.scss | 12 ++++++------ fec/fec/static/scss/components/_filters.scss | 4 ++-- fec/fec/static/scss/components/_maps.scss | 5 +++-- fec/fec/static/scss/components/_search-controls.scss | 7 ++++--- fec/fec/static/scss/mixins/_utilities.scss | 3 +-- fec/fec/static/scss/widgets/party-money-bars.scss | 3 ++- 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/fec/fec/static/scss/components/_cards.scss b/fec/fec/static/scss/components/_cards.scss index 81424f2aba..38711c3cf4 100644 --- a/fec/fec/static/scss/components/_cards.scss +++ b/fec/fec/static/scss/components/_cards.scss @@ -312,7 +312,7 @@ .card--primary { border: 2px solid transparent; font-weight: bold; - + @include u-bg--primary; @include u-font-color($gray-lightest); diff --git a/fec/fec/static/scss/components/_dropdowns.scss b/fec/fec/static/scss/components/_dropdowns.scss index 53f7ffff7d..d4df0f518c 100644 --- a/fec/fec/static/scss/components/_dropdowns.scss +++ b/fec/fec/static/scss/components/_dropdowns.scss @@ -132,9 +132,9 @@ cursor: default; @include u-icon-bg($check, $gray); } - - &[data-label*="mur_disposition_category_id-"] { - pointer-events: none; + + &[data-label*='mur_disposition_category_id-'] { + pointer-events: none; } } @@ -178,11 +178,11 @@ li { position: relative; - @include animation(fadeIn .2s ease-in); + @include animation(fadeIn 0.2s ease-in); - input[type="checkbox"] + label.disabled { + input[type='checkbox'] + label.disabled { cursor: default; - opacity: .5; + opacity: 0.5; border: 1px solid #aeb0b5 !important; background-color: #aeb0b5 !important; } diff --git a/fec/fec/static/scss/components/_filters.scss b/fec/fec/static/scss/components/_filters.scss index 8d5b823bf1..101b9778e5 100644 --- a/fec/fec/static/scss/components/_filters.scss +++ b/fec/fec/static/scss/components/_filters.scss @@ -128,7 +128,7 @@ $filter-button-width: u(4.6rem); overflow: visible; left: -800px; @include u-bg--neutral; // Adds declaration and nested - @include transition(left .2s ease-in-out); + @include transition(left 0.2s ease-in-out); &[aria-hidden='true'] { display: block !important; @@ -252,7 +252,7 @@ $filter-button-width: u(4.6rem); &.sub--filter--indent { position: relative; padding-left: 5%; - + select { width: 100%; } diff --git a/fec/fec/static/scss/components/_maps.scss b/fec/fec/static/scss/components/_maps.scss index 9bf998c80c..08407617cb 100644 --- a/fec/fec/static/scss/components/_maps.scss +++ b/fec/fec/static/scss/components/_maps.scss @@ -148,8 +148,9 @@ path.shape { display: block !important; } -.election-map.dormant, .election-map--home.dormant { - background-image: url("/static/img/map-election-search-default.png"); +.election-map.dormant, +.election-map--home.dormant { + background-image: url('/static/img/map-election-search-default.png'); background-image: image-set( url('../img/map-election-search-default.webp') type('image/webp'), url('../img/map-election-search-default.png') type('image/png') diff --git a/fec/fec/static/scss/components/_search-controls.scss b/fec/fec/static/scss/components/_search-controls.scss index 7c4ff1ec69..a1f51c04d7 100644 --- a/fec/fec/static/scss/components/_search-controls.scss +++ b/fec/fec/static/scss/components/_search-controls.scss @@ -301,9 +301,10 @@ } } - //for keyword-options modals on AO, MUR, Statues searches - .keyword-modal{ - .modal__tips, .modal__form { + //for keyword-options modals on AO, MUR, Statues searches + .keyword-modal { + .modal__tips, + .modal__form { display: table-cell; width: 100%; } diff --git a/fec/fec/static/scss/mixins/_utilities.scss b/fec/fec/static/scss/mixins/_utilities.scss index dc26d58f87..4558c5ee41 100644 --- a/fec/fec/static/scss/mixins/_utilities.scss +++ b/fec/fec/static/scss/mixins/_utilities.scss @@ -375,7 +375,6 @@ // $width - Width of the icon, defaults to 1.5rem // - @mixin u-icon-button($icon, $side: left, $width: 1.5rem, $overrides...) { background-image: url('#{svg-fill($icon, $base)}'); background-repeat: no-repeat; @@ -388,7 +387,7 @@ background-position: right u(1rem) top 50%; padding-right: $width + 2rem; } - + // Allow for any overrides @each $overrideProp, $overVal1, $overVal2, $overVal3, $overVal4 in $overrides { #{$overrideProp}: $overVal1 $overVal2 $overVal3 $overVal4; diff --git a/fec/fec/static/scss/widgets/party-money-bars.scss b/fec/fec/static/scss/widgets/party-money-bars.scss index 6824aeeb86..474d714af6 100644 --- a/fec/fec/static/scss/widgets/party-money-bars.scss +++ b/fec/fec/static/scss/widgets/party-money-bars.scss @@ -42,7 +42,8 @@ $fontWeightBold: 700; white-space: nowrap; } - div, label { + div, + label { border-bottom: solid 1px $colorBorderBottom; } } From bc26f3cdcf7b47e9e89cb95267ed91c6f7f8766a Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 20 Nov 2024 13:00:44 -0500 Subject: [PATCH 10/10] Revert media queries to max-/min-width from width <= / >= --- .../static/scss/components/_data-container.scss | 2 +- fec/fec/static/scss/components/_mega-menu.scss | 2 +- fec/fec/static/scss/components/_site-header.scss | 14 +++++++------- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/fec/fec/static/scss/components/_data-container.scss b/fec/fec/static/scss/components/_data-container.scss index 4577e9322b..9d6f2852a8 100644 --- a/fec/fec/static/scss/components/_data-container.scss +++ b/fec/fec/static/scss/components/_data-container.scss @@ -170,7 +170,7 @@ } //Responsive behavior for datatables in tab panels on profile pages (committee, candidate, election) -@media screen and (width <= 940px) { +@media screen and (max-width: 940px) { .data-container__wrapper .main__content--right-full { display: block; } diff --git a/fec/fec/static/scss/components/_mega-menu.scss b/fec/fec/static/scss/components/_mega-menu.scss index 621563bf57..7b97ff621a 100644 --- a/fec/fec/static/scss/components/_mega-menu.scss +++ b/fec/fec/static/scss/components/_mega-menu.scss @@ -221,7 +221,7 @@ } } -@media screen and (width <= 40em) { +@media screen and (max-width: 40em) { .mega-heading__title { margin-left: u(1rem); margin-top: u(1rem); diff --git a/fec/fec/static/scss/components/_site-header.scss b/fec/fec/static/scss/components/_site-header.scss index 31fb58dbb5..f3c0473dc4 100644 --- a/fec/fec/static/scss/components/_site-header.scss +++ b/fec/fec/static/scss/components/_site-header.scss @@ -95,14 +95,14 @@ width: 100%; } -@media screen and (width >= 600px) { +@media screen and (min-width: 600px) { .usa-banner-content { padding-bottom: u(2.3rem); padding-top: u(4rem); } } -@media screen and (width >= 951px) { +@media screen and (min-width: 951px) { .usa-banner-content { padding-right: u(3rem); padding-left: u(3rem); @@ -113,7 +113,7 @@ margin-top: u(1rem); } -@media screen and (width >= 600px) { +@media screen and (min-width: 600px) { .usa-banner-content p:first-child { margin-top: 0; } @@ -155,7 +155,7 @@ } } -@media screen and (width >= 481px) { +@media screen and (min-width: 481px) { .usa-banner-header { padding-top: 0; padding-bottom: 0; @@ -204,7 +204,7 @@ } } -@media screen and (width >= 481px) { +@media screen and (min-width: 481px) { .usa-banner-header p { margin-top: 0; margin-bottom: 0; @@ -245,7 +245,7 @@ background-color: transparent; } -@media screen and (width >= 515px) { +@media screen and (min-width: 515px) { .usa-banner-button { padding-top: 0; padding-left: 0; @@ -312,7 +312,7 @@ padding-left: u(1.5rem); } -@media screen and (width >= 600px) { +@media screen and (min-width: 600px) { .usa-grid { padding-right: u(3rem); padding-left: u(3rem);