From 9e6e52de440c4631099ef687ecf296934c81473b Mon Sep 17 00:00:00 2001 From: Pomax Date: Thu, 14 Mar 2019 11:11:35 -0700 Subject: [PATCH] prettier for css/scss (#2807) * prettier for css/scss --- .stylelintrc | 6 +- .../static/css/language_toggles.css | 8 +- .../css/layouts/404-additionals.css | 49 +++++------ package-lock.json | 55 +++++++++--- package.json | 2 + .../components/creep-vote/creep-vote.scss | 4 +- .../components/creepometer/creepometer.scss | 5 +- .../components/filter/filter.scss | 11 +-- .../likelyhood-chart/likelyhood-chart.scss | 2 +- .../components/social-share/social-share.scss | 2 +- source/js/components/join/join.scss | 11 ++- .../multipage-nav-mobile.scss | 4 +- source/js/components/people/people.scss | 10 +-- source/js/components/petition/petition.scss | 2 +- source/js/donate-modal/donate-modal.scss | 4 +- source/sass/buttons.scss | 2 +- source/sass/buyers-guide/bg-main.scss | 61 ++++++------- .../sass/buyers-guide/components/header.scss | 3 +- .../buyers-guide/includes/draft-product.scss | 4 +- source/sass/buyers-guide/mixins.scss | 18 +++- source/sass/buyers-guide/views/about.scss | 4 +- source/sass/buyers-guide/views/category.scss | 9 +- source/sass/buyers-guide/views/homepage.scss | 10 ++- source/sass/buyers-guide/views/product.scss | 7 +- source/sass/components/multipage-nav.scss | 8 +- source/sass/components/nav.scss | 2 +- source/sass/components/primary-nav.scss | 7 +- source/sass/glyphs.scss | 4 +- source/sass/main.scss | 86 +++++++++---------- source/sass/mixins.scss | 7 +- source/sass/type.scss | 5 +- source/sass/utilities.scss | 2 +- source/sass/views/contact.scss | 3 +- source/sass/views/fellowships/people.scss | 10 +-- source/sass/views/fellowships/shared.scss | 6 +- source/sass/wagtail.scss | 2 +- source/sass/wagtail/blocks.scss | 2 +- source/sass/wagtail/profiles.scss | 4 +- 38 files changed, 261 insertions(+), 180 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 6d446dae2..0dd5f7e22 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,9 +1,7 @@ { - "extends": "stylelint-config-standard", + "plugins": ["stylelint-prettier"], "rules": { - "at-rule-no-unknown": null, - "font-family-no-missing-generic-family-keyword": null, - "no-descending-specificity": null, + "prettier/prettier": true, "color-hex-length": "long" } } diff --git a/network-api/networkapi/wagtail_l10n_customization/static/css/language_toggles.css b/network-api/networkapi/wagtail_l10n_customization/static/css/language_toggles.css index 3179c196e..12cbc34f1 100644 --- a/network-api/networkapi/wagtail_l10n_customization/static/css/language_toggles.css +++ b/network-api/networkapi/wagtail_l10n_customization/static/css/language_toggles.css @@ -1,5 +1,5 @@ form .l10n-hidden { - display: none; + display: none; } div.locale-picker { @@ -14,7 +14,7 @@ form > div.locale-picker { wagtail's header has a 2em margin-bottom, and so we correct that for the 1.5em margin-bottom used in the normal definition - for the div.locale-picker, above */; + for the div.locale-picker, above */ margin-top: calc(1.5em - 2em); margin-bottom: 1em; } @@ -41,8 +41,8 @@ div.locale-picker ul.locales li.locale button.locale-toggle { font-weight: 700; font-size: 1.2em; text-decoration: none; - color: #fff; - padding: .25em; + color: #ffffff; + padding: 0.25em; max-height: 2em; } diff --git a/network-api/networkapi/wagtailcustomization/static/wagtailadmin/css/layouts/404-additionals.css b/network-api/networkapi/wagtailcustomization/static/wagtailadmin/css/layouts/404-additionals.css index bb64c681d..61a204ef8 100644 --- a/network-api/networkapi/wagtailcustomization/static/wagtailadmin/css/layouts/404-additionals.css +++ b/network-api/networkapi/wagtailcustomization/static/wagtailadmin/css/layouts/404-additionals.css @@ -1,39 +1,40 @@ .wagtail-logo-container__desktop { - float: none!important; - width: auto!important; - height: auto!important; + float: none !important; + width: auto !important; + height: auto !important; } -@media screen and (max-width: $breakpoint-desktop-small) { // 900px - .wagtail-logo-container__desktop { - display: none; - } +@media screen and (max-width: $breakpoint-desktop-small) { + // 900px + .wagtail-logo-container__desktop { + display: none; + } } .page404__text-container { - float: none; - width: auto; - height: auto; - text-align: left; - font-size: 90%; - margin-left: 3rem; + float: none; + width: auto; + height: auto; + text-align: left; + font-size: 90%; + margin-left: 3rem; } .page404__text-container .page404__header { - text-transform: none; + text-transform: none; } .page404__text-container p { - white-space: nowrap; + white-space: nowrap; } +@media screen and (max-width: $breakpoint-mobile) { + // 800px + .page404__text-container { + width: 400px; + } -@media screen and (max-width: $breakpoint-mobile) { // 800px - .page404__text-container { - width: 400px; - } - - .page404__header { - font-size: 5em; - } -} \ No newline at end of file + .page404__header { + font-size: 5em; + } +} diff --git a/package-lock.json b/package-lock.json index b88e89f19..dd0663f65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4920,7 +4920,7 @@ }, "events": { "version": "3.0.0", - "resolved": "http://registry.npmjs.org/events/-/events-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz", "integrity": "sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==" }, "evp_bytestokey": { @@ -5627,7 +5627,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5645,11 +5646,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5662,15 +5665,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5773,7 +5779,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5783,6 +5790,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5795,17 +5803,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5822,6 +5833,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5894,7 +5906,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5904,6 +5917,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5979,7 +5993,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -6009,6 +6024,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6026,6 +6042,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6064,11 +6081,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -11754,7 +11773,7 @@ }, "stream-browserify": { "version": "2.0.2", - "resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", + "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==", "requires": { "inherits": "~2.0.1", @@ -12040,7 +12059,7 @@ }, "globby": { "version": "9.0.0", - "resolved": "http://registry.npmjs.org/globby/-/globby-9.0.0.tgz", + "resolved": "https://registry.npmjs.org/globby/-/globby-9.0.0.tgz", "integrity": "sha512-q0qiO/p1w/yJ0hk8V9x1UXlgsXUxlGd0AHUOXZVXBO6aznDtpx7M8D1kBrCAItoPm+4l8r6ATXV1JpjY2SBQOw==", "requires": { "array-union": "^1.0.2", @@ -12279,6 +12298,14 @@ "stylelint-config-recommended": "^2.1.0" } }, + "stylelint-prettier": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-1.0.6.tgz", + "integrity": "sha512-XKlTyJHJYiyXs9JXRMt2FQxMJoBSjz4I6+4+/R3o8/ePof19v9naC4d0zsMKUJ88by81+qHfqXBLfmAalu46cg==", + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, "sugarss": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz", diff --git a/package.json b/package.json index 5cb25101c..4de4867df 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "test:procfile": "node test/test-procfile.js", "test:eslint": "eslint --config ./.eslintrc.json \"source/js/**/*.js\" \"source/js/**/*.jsx\" webpack.config.js", "test:scss": "stylelint \"source/sass/**/*.scss\" \"source/js/**/*.scss\" --syntax scss", + "test:css": "stylelint \"network-api/networkapi/{,!(frontend)/**/}*.css\" --syntax scss", "test": "run-s test:** build", "watch:images": "chokidar \"source/images/**/*\" -c \"npm run build:images\"", "watch:js": "chokidar \"source/js/**/*.js\" \"source/js/**/*.jsx\" -c \"npm run build:js-uncompressed\"", @@ -76,6 +77,7 @@ "snyk": "^1.136.1", "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", + "stylelint-prettier": "^1.0.6", "svgo": "^1.2.0", "webpack": "^4.29.6", "webpack-cli": "^3.2.3", diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.scss b/source/js/buyers-guide/components/creep-vote/creep-vote.scss index b23a30770..371110ef4 100644 --- a/source/js/buyers-guide/components/creep-vote/creep-vote.scss +++ b/source/js/buyers-guide/components/creep-vote/creep-vote.scss @@ -91,7 +91,9 @@ $btn-shadow-width: 3px; width: 100%; } - input { display: none; } + input { + display: none; + } label:first-of-type span { border-radius: $radio-button-radius 0 0 $radio-button-radius; diff --git a/source/js/buyers-guide/components/creepometer/creepometer.scss b/source/js/buyers-guide/components/creepometer/creepometer.scss index b3428ec63..6d1bd04e1 100644 --- a/source/js/buyers-guide/components/creepometer/creepometer.scss +++ b/source/js/buyers-guide/components/creepometer/creepometer.scss @@ -2,7 +2,8 @@ margin-top: 70px; .slider { - background: url("/_images/buyers-guide/gradient-bar.svg") no-repeat 0 center / contain; + background: url("/_images/buyers-guide/gradient-bar.svg") no-repeat 0 center / + contain; position: relative; height: 100px; cursor: pointer; @@ -51,7 +52,7 @@ background: transparent; &::after { - content: ' '; + content: " "; background: white; border-radius: 20px; box-shadow: 2px 2px 3px grey; diff --git a/source/js/buyers-guide/components/filter/filter.scss b/source/js/buyers-guide/components/filter/filter.scss index 39ed11b8c..6efbc6629 100644 --- a/source/js/buyers-guide/components/filter/filter.scss +++ b/source/js/buyers-guide/components/filter/filter.scss @@ -146,7 +146,8 @@ margin: 10px; &.selected { - box-shadow: 0 0 0 6px $option-color, 0 0 0 9px white, 0 0 0 10px $option-color; + box-shadow: 0 0 0 6px $option-color, 0 0 0 9px white, + 0 0 0 10px $option-color; background: $option-color; } @@ -157,7 +158,7 @@ box-shadow: 0 0 0 10px $option-color; &::after { - content: ' '; + content: " "; display: block; width: 22px; height: 22px; @@ -181,16 +182,16 @@ background-size: 16px; } - &[data-label=Both] { + &[data-label="Both"] { text-indent: 0.7em; } - &[data-label=Likely] { + &[data-label="Likely"] { background-image: url(/_images/buyers-guide/icon-thumb-up.svg); background-position: 12px 4px; } - &[data-label='Not likely'] { + &[data-label="Not likely"] { background-image: url(/_images/buyers-guide/icon-thumb-down.svg); background-position: 12px 7px; } diff --git a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss index 2152734be..4a9515c97 100644 --- a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss +++ b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss @@ -38,7 +38,7 @@ } th::before { - content: ''; + content: ""; display: block; height: 1em; margin: 0 0.5em; diff --git a/source/js/buyers-guide/components/social-share/social-share.scss b/source/js/buyers-guide/components/social-share/social-share.scss index 591f9fa13..4ba3030a5 100644 --- a/source/js/buyers-guide/components/social-share/social-share.scss +++ b/source/js/buyers-guide/components/social-share/social-share.scss @@ -19,7 +19,7 @@ flex-wrap: wrap; width: calc(50% - #{$margin-x}); - &:nth-child(2n+1) { + &:nth-child(2n + 1) { margin-right: $margin-x * 2; } } diff --git a/source/js/components/join/join.scss b/source/js/components/join/join.scss index ceb03ac39..14dd2856d 100644 --- a/source/js/components/join/join.scss +++ b/source/js/components/join/join.scss @@ -1,6 +1,9 @@ .join-us { - background: - linear-gradient(to right, rgba(61, 254, 253, 1) 0%, rgba(183, 212, 63, 1) 100%), + background: linear-gradient( + to right, + rgba(61, 254, 253, 1) 0%, + rgba(183, 212, 63, 1) 100% + ), url(../_images/hero-image-crop@2x.jpg) center -60px / auto 666px no-repeat, url(../_images/bg-repeat-crop@2x.jpg) center -60px / 2px 666px repeat-x; background-blend-mode: overlay, normal, normal; @@ -120,7 +123,9 @@ display: block; } - .join-heading { display: none; } + .join-heading { + display: none; + } @media (min-width: $bp-md) { .join-btn { diff --git a/source/js/components/multipage-nav-mobile/multipage-nav-mobile.scss b/source/js/components/multipage-nav-mobile/multipage-nav-mobile.scss index f044b38ab..cd0e7a05c 100644 --- a/source/js/components/multipage-nav-mobile/multipage-nav-mobile.scss +++ b/source/js/components/multipage-nav-mobile/multipage-nav-mobile.scss @@ -6,12 +6,12 @@ width: 100%; border: 0; outline: 0; - padding: 0 0 5px; // so the 5px yellow underline will show on both mobile and desktop + padding: 0 0 5px; // so the 5px yellow underline will show on both mobile and desktop margin-bottom: -5px; // negative bottom margin to offet the bottom padding we are adding .control { display: inline-block; - background: url('../_images/chevron.svg') no-repeat; + background: url("../_images/chevron.svg") no-repeat; background-size: contain; background-position: center right; width: 15px; diff --git a/source/js/components/people/people.scss b/source/js/components/people/people.scss index 62d0fb856..dbc719894 100644 --- a/source/js/components/people/people.scss +++ b/source/js/components/people/people.scss @@ -34,7 +34,7 @@ width: 12px; height: 12px; display: block; - content: ''; + content: ""; margin-right: 5px; background-size: contain; background-repeat: no-repeat; @@ -43,13 +43,13 @@ .meta-block-item-role { &::before { - background-image: url('/_images/glyphs/mozilla-icon.svg'); + background-image: url("/_images/glyphs/mozilla-icon.svg"); } } .meta-block-item-location { &::before { - background-image: url('/_images/glyphs/map-marker-icon.svg'); + background-image: url("/_images/glyphs/map-marker-icon.svg"); } } } @@ -66,14 +66,14 @@ } .issue-link:not(:last-child)::after { - content: ', '; + content: ", "; } .person-quote { z-index: 1; &::before { - content: '\201C'; + content: "\201C"; font-size: 15em; color: $gray-05; z-index: -1; diff --git a/source/js/components/petition/petition.scss b/source/js/components/petition/petition.scss index cf3321d70..d596dd231 100644 --- a/source/js/components/petition/petition.scss +++ b/source/js/components/petition/petition.scss @@ -1,4 +1,4 @@ -@import 'donation-modal.scss'; +@import "donation-modal.scss"; #cta-anchor { margin-top: -80px; diff --git a/source/js/donate-modal/donate-modal.scss b/source/js/donate-modal/donate-modal.scss index 8d59b66cc..f9d40d4af 100644 --- a/source/js/donate-modal/donate-modal.scss +++ b/source/js/donate-modal/donate-modal.scss @@ -1,4 +1,4 @@ -@import '../../../node_modules/bootstrap/scss/_variables'; +@import "../../../node_modules/bootstrap/scss/_variables"; .donate-modal { position: fixed; @@ -54,7 +54,7 @@ &::before, &::after { position: absolute; - content: ' '; + content: " "; height: $height; width: 2px; background-color: white; diff --git a/source/sass/buttons.scss b/source/sass/buttons.scss index 7f0c065ce..b2d2cd2b5 100644 --- a/source/sass/buttons.scss +++ b/source/sass/buttons.scss @@ -24,7 +24,7 @@ background: $dark-yellow; &::after { - content: ''; + content: ""; position: absolute; top: 0; bottom: -10px; diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index 2ede06124..7ed86cd90 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -5,10 +5,10 @@ html { // Bootstrap -@import '../../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap'; -@import '../../../node_modules/mofo-bootstrap/src/scss/custom/_colors'; -@import '../../../node_modules/bootstrap/scss/_variables'; -@import '../../../node_modules/bootstrap/scss/mixins'; +@import "../../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap"; +@import "../../../node_modules/mofo-bootstrap/src/scss/custom/_colors"; +@import "../../../node_modules/bootstrap/scss/_variables"; +@import "../../../node_modules/bootstrap/scss/mixins"; // Breakpoints (imported from Bootstrap) @@ -20,10 +20,10 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px //Site-wide -@import '../colors'; -@import './colors'; // Buyer's Guide specific colors -@import '../mixins'; -@import './mixins'; // Buyer's Guide specific mixins +@import "../colors"; +@import "./colors"; // Buyer's Guide specific colors +@import "../mixins"; +@import "./mixins"; // Buyer's Guide specific mixins // includes @import "./includes/draft-product"; @@ -31,31 +31,31 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px // React Components -@import '../../js/buyers-guide/components/creepometer/creepometer'; -@import '../../js/buyers-guide/components/creep-vote/creep-vote'; -@import '../../js/buyers-guide/components/primary-nav/primary-nav'; -@import '../../js/buyers-guide/components/creepiness-chart/creepiness-chart'; -@import '../../js/buyers-guide/components/likelyhood-chart/likelyhood-chart'; -@import '../../js/buyers-guide/components/filter/filter'; -@import '../../js/buyers-guide/components/social-share/social-share'; +@import "../../js/buyers-guide/components/creepometer/creepometer"; +@import "../../js/buyers-guide/components/creep-vote/creep-vote"; +@import "../../js/buyers-guide/components/primary-nav/primary-nav"; +@import "../../js/buyers-guide/components/creepiness-chart/creepiness-chart"; +@import "../../js/buyers-guide/components/likelyhood-chart/likelyhood-chart"; +@import "../../js/buyers-guide/components/filter/filter"; +@import "../../js/buyers-guide/components/social-share/social-share"; // Special react component -@import '../../js/donate-modal/donate-modal'; +@import "../../js/donate-modal/donate-modal"; // Non-React Components -@import './components/future-non-react-component'; -@import '../components/nav'; -@import '../components/multipage-nav'; +@import "./components/future-non-react-component"; +@import "../components/nav"; +@import "../components/multipage-nav"; // Misc -@import '../resets'; -@import '../type'; -@import '../buttons'; -@import '../global'; -@import '../utilities'; +@import "../resets"; +@import "../type"; +@import "../buttons"; +@import "../global"; +@import "../utilities"; // Type overrides @@ -65,7 +65,7 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px // Header -@import './components/header.scss'; +@import "./components/header.scss"; // Utilities @@ -82,7 +82,8 @@ img.thumb-border { border: 16px solid #f4f4f4; } -.adult-content { // products which contain adult content +.adult-content { + // products which contain adult content img.product-thumbnail { filter: blur(15px); @@ -96,10 +97,10 @@ img.thumb-border { @import "./creep-face-emoji"; // View specific -@import './views/homepage'; -@import './views/product'; -@import './views/about'; -@import './views/category'; +@import "./views/homepage"; +@import "./views/product"; +@import "./views/about"; +@import "./views/category"; // Force Buyer's Guide links to use the old blues until // we tackle this cleanup ticket https://github.com/mozilla/foundation.mozilla.org/issues/2665 diff --git a/source/sass/buyers-guide/components/header.scss b/source/sass/buyers-guide/components/header.scss index 198cb9835..a9332bc77 100644 --- a/source/sass/buyers-guide/components/header.scss +++ b/source/sass/buyers-guide/components/header.scss @@ -42,7 +42,8 @@ $category-nav-border-bottom-thickness: 4px; top: 0; left: 0; content: ""; - background: url('/_images/buyers-guide/icon-heart.svg') no-repeat center calc(50% + 2px) / contain; + background: url("/_images/buyers-guide/icon-heart.svg") no-repeat center + calc(50% + 2px) / contain; width: $icon-width; height: 100%; } diff --git a/source/sass/buyers-guide/includes/draft-product.scss b/source/sass/buyers-guide/includes/draft-product.scss index 01ac5e6ff..87dc56c26 100644 --- a/source/sass/buyers-guide/includes/draft-product.scss +++ b/source/sass/buyers-guide/includes/draft-product.scss @@ -1,10 +1,10 @@ // product draft rules .draft-product::before { - content: 'This is a draft.'; + content: "This is a draft."; color: #ffa7a7; font-weight: bold; font-size: 120%; - font-family: 'Zilla Slab'; + font-family: "Zilla Slab"; z-index: 1; position: absolute; top: 0; diff --git a/source/sass/buyers-guide/mixins.scss b/source/sass/buyers-guide/mixins.scss index 0d9150aad..296f26406 100644 --- a/source/sass/buyers-guide/mixins.scss +++ b/source/sass/buyers-guide/mixins.scss @@ -1,4 +1,11 @@ -@mixin seal-of-approval($offset-top, $offset-left, $width, $height, $width-desktop: null, $height-desktop: null) { +@mixin seal-of-approval( + $offset-top, + $offset-left, + $width, + $height, + $width-desktop: null, + $height-desktop: null +) { position: absolute; top: $offset-top; left: $offset-left; @@ -14,7 +21,14 @@ } } -@mixin adult-content-badge($offset-top, $offset-right, $width, $height, $width-desktop: null, $height-desktop: null) { +@mixin adult-content-badge( + $offset-top, + $offset-right, + $width, + $height, + $width-desktop: null, + $height-desktop: null +) { position: absolute; top: $offset-top; right: $offset-right; diff --git a/source/sass/buyers-guide/views/about.scss b/source/sass/buyers-guide/views/about.scss index 72c767d3e..8c45ce865 100644 --- a/source/sass/buyers-guide/views/about.scss +++ b/source/sass/buyers-guide/views/about.scss @@ -34,7 +34,7 @@ a second click closes it. */ #pni-about .criteria-accordion { - input[type=checkbox].accordion-helper { + input[type="checkbox"].accordion-helper { display: block; height: 0; @@ -90,7 +90,7 @@ } h2::after { - content: ' '; + content: " "; display: block; position: absolute; right: 0; diff --git a/source/sass/buyers-guide/views/category.scss b/source/sass/buyers-guide/views/category.scss index f82aefd27..ace36235b 100644 --- a/source/sass/buyers-guide/views/category.scss +++ b/source/sass/buyers-guide/views/category.scss @@ -11,7 +11,14 @@ } .adult-content-badge { - @include adult-content-badge($padding-y, $padding-x, 33px, 28px, 55px, 46px); + @include adult-content-badge( + $padding-y, + $padding-x, + 33px, + 28px, + 55px, + 46px + ); } .category-image-container { diff --git a/source/sass/buyers-guide/views/homepage.scss b/source/sass/buyers-guide/views/homepage.scss index 1830aa43e..ab066837a 100644 --- a/source/sass/buyers-guide/views/homepage.scss +++ b/source/sass/buyers-guide/views/homepage.scss @@ -1,6 +1,7 @@ #pni-home { .page-header { - background: url(/_images/buyers-guide/home-banner.jpg) center center / cover no-repeat; + background: url(/_images/buyers-guide/home-banner.jpg) center center / cover + no-repeat; height: 200px; @media (min-width: $bp-md) { @@ -123,7 +124,12 @@ @media (min-width: $bp-xl) { // on extra large screen we want project-list-section's width to match // Bootstrap's .container's width - width: calc(#{map-get($container-max-widths, xl)} - #{map-get($grid-gutter-widths, xl)}); + width: calc( + #{map-get($container-max-widths, xl)} - #{map-get( + $grid-gutter-widths, + xl + )} + ); max-width: 100%; margin: 0 auto; } diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss index cb6835aff..fa4bcc2dd 100644 --- a/source/sass/buyers-guide/views/product.scss +++ b/source/sass/buyers-guide/views/product.scss @@ -8,7 +8,7 @@ $product-detail-padding-x: ( position: relative; &.draft-product::before { - content: 'This product is in draft and only visible to CMS-authorised users.'; + content: "This product is in draft and only visible to CMS-authorised users."; } .seal-of-approval { @@ -211,7 +211,7 @@ $product-detail-padding-x: ( .dotted-section { &::before { display: block; - content: ' '; /* :before and :after won't work without content... =( */ + content: " "; /* :before and :after won't work without content... =( */ position: absolute; top: 0; left: 0; @@ -313,7 +313,8 @@ $product-detail-padding-x: ( position: absolute; left: 0; content: ""; - background: url('/_images/buyers-guide/icon-info-pink.svg') no-repeat 50% 50%/contain; + background: url("/_images/buyers-guide/icon-info-pink.svg") no-repeat 50% + 50% / contain; width: 16px; height: 100%; } diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss index 578c80d76..f36bf91fb 100644 --- a/source/sass/components/multipage-nav.scss +++ b/source/sass/components/multipage-nav.scss @@ -32,18 +32,18 @@ } .multipage-login-restricted::after { - content: '🙈'; + content: "🙈"; } .multipage-groups-restricted::after { - content: '👥'; + content: "👥"; } .multipage-password-restricted::after { - content: '🔒'; + content: "🔒"; } .multipage-draft::after { - content: '🐣'; + content: "🐣"; } } diff --git a/source/sass/components/nav.scss b/source/sass/components/nav.scss index 7460e99ce..2c269d7bc 100644 --- a/source/sass/components/nav.scss +++ b/source/sass/components/nav.scss @@ -24,6 +24,6 @@ } @at-root .vertical-nav #{&} { - @include scaleText(17px, 17px*1.6); + @include scaleText(17px, 17px * 1.6); } } diff --git a/source/sass/components/primary-nav.scss b/source/sass/components/primary-nav.scss index bbce756e9..92684cb03 100644 --- a/source/sass/components/primary-nav.scss +++ b/source/sass/components/primary-nav.scss @@ -68,7 +68,12 @@ transition: border-color 0.25s ease; @mixin padding-bottom($bp: sm) { - padding-bottom: calc(#{map-get($menu-container-padding, $bp)} + #{map-get($primary-nav-link-padding, $bp)} - #{$border-thickness} / 2); + padding-bottom: calc( + #{map-get($menu-container-padding, $bp)} + #{map-get( + $primary-nav-link-padding, + $bp + )} - #{$border-thickness} / 2 + ); } @media (min-width: $bp-sm) { diff --git a/source/sass/glyphs.scss b/source/sass/glyphs.scss index c20ead4cb..4734fa497 100644 --- a/source/sass/glyphs.scss +++ b/source/sass/glyphs.scss @@ -4,7 +4,7 @@ width: $width; height: $height; margin-right: 20px; - background: url(../_images/glyphs/#{$id}.svg) no-repeat 0 0/contain; + background: url(../_images/glyphs/#{$id}.svg) no-repeat 0 0 / contain; @media screen and (min-width: $bp-lg) { margin-right: 10px; @@ -14,7 +14,7 @@ @mixin hoverGlyph($id) { &:hover::before, &:focus::before { - background: url(../_images/glyphs/#{$id}.svg) no-repeat 0 0/contain; + background: url(../_images/glyphs/#{$id}.svg) no-repeat 0 0 / contain; } } diff --git a/source/sass/main.scss b/source/sass/main.scss index e8c18efbf..e9b64b1e3 100755 --- a/source/sass/main.scss +++ b/source/sass/main.scss @@ -1,9 +1,9 @@ // Bootstrap -@import '../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap'; -@import '../../node_modules/mofo-bootstrap/src/scss/custom/_colors'; -@import '../../node_modules/bootstrap/scss/_variables'; -@import '../../node_modules/bootstrap/scss/mixins'; +@import "../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap"; +@import "../../node_modules/mofo-bootstrap/src/scss/custom/_colors"; +@import "../../node_modules/bootstrap/scss/_variables"; +@import "../../node_modules/bootstrap/scss/mixins"; // Breakpoints (imported from Bootstrap) @@ -14,60 +14,60 @@ $bp-lg: #{map-get($grid-breakpoints, lg)}; // >= 992px $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px //Site-wide -@import './glyphs'; -@import './colors'; -@import './mixins'; +@import "./glyphs"; +@import "./colors"; +@import "./mixins"; // React Components -@import '../js/components/highlights/highlights'; -@import '../js/components/people/people'; -@import '../js/components/join/join'; -@import '../js/components/loading-indicator/loading-indicator'; -@import '../js/components/member-notice/member-notice'; -@import '../js/components/multipage-nav-mobile/multipage-nav-mobile'; -@import '../js/components/pulse-project-list/pulse-project-list'; -@import '../js/components/fellow-list/fellow-list'; -@import '../js/components/petition/petition'; +@import "../js/components/highlights/highlights"; +@import "../js/components/people/people"; +@import "../js/components/join/join"; +@import "../js/components/loading-indicator/loading-indicator"; +@import "../js/components/member-notice/member-notice"; +@import "../js/components/multipage-nav-mobile/multipage-nav-mobile"; +@import "../js/components/pulse-project-list/pulse-project-list"; +@import "../js/components/fellow-list/fellow-list"; +@import "../js/components/petition/petition"; // Special react component -@import '../js/donate-modal/donate-modal'; +@import "../js/donate-modal/donate-modal"; // Non-React Components -@import './components/hr-emphasis'; -@import './components/feature-quote'; -@import './components/nav'; -@import './components/primary-nav'; -@import './components/multipage-nav'; -@import './components/commitment'; -@import './components/card'; -@import './components/airtable-block'; -@import './components/img-txt-mini'; +@import "./components/hr-emphasis"; +@import "./components/feature-quote"; +@import "./components/nav"; +@import "./components/primary-nav"; +@import "./components/multipage-nav"; +@import "./components/commitment"; +@import "./components/card"; +@import "./components/airtable-block"; +@import "./components/img-txt-mini"; // Misc -@import './resets'; -@import './type'; -@import './buttons'; -@import './global'; -@import './utilities'; -@import './cms'; -@import './share-progress'; -@import './wagtail'; +@import "./resets"; +@import "./type"; +@import "./buttons"; +@import "./global"; +@import "./utilities"; +@import "./cms"; +@import "./share-progress"; +@import "./wagtail"; // View specific -@import './views/home'; -@import './views/programs'; -@import './views/about'; -@import './views/contact'; -@import './views/projects'; -@import './views/initiatives'; -@import './views/participate'; -@import './views/fellowships/shared'; -@import './views/style-guide'; +@import "./views/home"; +@import "./views/programs"; +@import "./views/about"; +@import "./views/contact"; +@import "./views/projects"; +@import "./views/initiatives"; +@import "./views/participate"; +@import "./views/fellowships/shared"; +@import "./views/style-guide"; // Bootstrap or mofo-bootstrap overrides diff --git a/source/sass/mixins.scss b/source/sass/mixins.scss index 30e492a45..4d1d2a241 100644 --- a/source/sass/mixins.scss +++ b/source/sass/mixins.scss @@ -1,4 +1,9 @@ -@mixin scaleText($base-font-size, $base-line-height: null, $large-font-size: null, $large-line-height: null) { +@mixin scaleText( + $base-font-size, + $base-line-height: null, + $large-font-size: null, + $large-line-height: null +) { font-size: $base-font-size; @if ($base-line-height) { diff --git a/source/sass/type.scss b/source/sass/type.scss index 66a1df7a2..137702d13 100644 --- a/source/sass/type.scss +++ b/source/sass/type.scss @@ -33,7 +33,8 @@ a { color: $dark-blue; font-weight: 700; - @include hover-focus-active { // Bootstrap / mofo-style overrides + @include hover-focus-active { + // Bootstrap / mofo-style overrides color: $dark-blue; text-decoration: underline; } @@ -43,7 +44,7 @@ a { } } -@mixin black-box-white-text($padding:0.1em) { +@mixin black-box-white-text($padding: 0.1em) { background: $black; color: $white; display: inline; diff --git a/source/sass/utilities.scss b/source/sass/utilities.scss index 884782181..40945c255 100644 --- a/source/sass/utilities.scss +++ b/source/sass/utilities.scss @@ -1,4 +1,4 @@ -@import '../../node_modules/bootstrap/scss/_variables'; +@import "../../node_modules/bootstrap/scss/_variables"; // default for vertical margins ($spacer = 1rem = 16px) .my-default { diff --git a/source/sass/views/contact.scss b/source/sass/views/contact.scss index ac3e428fe..8a7dd5247 100644 --- a/source/sass/views/contact.scss +++ b/source/sass/views/contact.scss @@ -1,4 +1,5 @@ .hear-from-you-line-art { - background: url(../_images/line-art/love-to-hear-from-you.svg) no-repeat center 0; + background: url(../_images/line-art/love-to-hear-from-you.svg) no-repeat + center 0; min-height: 9rem; } diff --git a/source/sass/views/fellowships/people.scss b/source/sass/views/fellowships/people.scss index aff64845d..2d95b209a 100644 --- a/source/sass/views/fellowships/people.scss +++ b/source/sass/views/fellowships/people.scss @@ -34,7 +34,7 @@ width: 12px; height: 12px; display: block; - content: ''; + content: ""; margin-right: 5px; background-size: contain; background-repeat: no-repeat; @@ -43,13 +43,13 @@ .meta-block-item-role { &::before { - background-image: url('/_images/glyphs/mozilla-icon.svg'); + background-image: url("/_images/glyphs/mozilla-icon.svg"); } } .meta-block-item-location { &::before { - background-image: url('/_images/glyphs/map-marker-icon.svg'); + background-image: url("/_images/glyphs/map-marker-icon.svg"); } } } @@ -66,14 +66,14 @@ } .issue-link:not(:last-child)::after { - content: ', '; + content: ", "; } .person-quote { z-index: 1; &::before { - content: '\201C'; + content: "\201C"; font-size: 15em; color: $subtle-gray; z-index: -1; diff --git a/source/sass/views/fellowships/shared.scss b/source/sass/views/fellowships/shared.scss index 7ede81143..272e727af 100644 --- a/source/sass/views/fellowships/shared.scss +++ b/source/sass/views/fellowships/shared.scss @@ -63,11 +63,13 @@ } .hear-from-funder-line-art { - background: url(../_images/fellowships/svg/funders-fellowship-optim.svg) no-repeat center 0; + background: url(../_images/fellowships/svg/funders-fellowship-optim.svg) + no-repeat center 0; min-height: 9rem; } .hear-from-host-org-line-art { - background: url(../_images/fellowships/svg/host-orgs-fellowship-optim.svg) no-repeat center 0; + background: url(../_images/fellowships/svg/host-orgs-fellowship-optim.svg) + no-repeat center 0; min-height: 9rem; } diff --git a/source/sass/wagtail.scss b/source/sass/wagtail.scss index 84e6bb077..0d73db638 100644 --- a/source/sass/wagtail.scss +++ b/source/sass/wagtail.scss @@ -83,4 +83,4 @@ body div.wagtail-draft-warning { text-transform: uppercase; } -@import './wagtail/blocks'; +@import "./wagtail/blocks"; diff --git a/source/sass/wagtail/blocks.scss b/source/sass/wagtail/blocks.scss index b75da6c87..4f1995506 100644 --- a/source/sass/wagtail/blocks.scss +++ b/source/sass/wagtail/blocks.scss @@ -1,3 +1,3 @@ .cms { - @import './profiles'; + @import "./profiles"; } diff --git a/source/sass/wagtail/profiles.scss b/source/sass/wagtail/profiles.scss index 949d4c3d9..0685cef3a 100644 --- a/source/sass/wagtail/profiles.scss +++ b/source/sass/wagtail/profiles.scss @@ -74,11 +74,11 @@ width: 12px; height: 12px; display: block; - content: ''; + content: ""; margin-right: 5px; background-size: contain; background-repeat: no-repeat; - background-image: url('/_images/glyphs/map-marker-icon.svg'); + background-image: url("/_images/glyphs/map-marker-icon.svg"); } } }