Pomax
GitHub
Родитель
52dfefd1b0
Коммит
9e6e52de44
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
.page404__header {
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
|
||||
th::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1em;
|
||||
margin: 0 0.5em;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'donation-modal.scss';
|
||||
@import "donation-modal.scss";
|
||||
|
||||
#cta-anchor {
|
||||
margin-top: -80px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
background: $dark-yellow;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: -10px;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: "🐣";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,6 @@
|
|||
}
|
||||
|
||||
@at-root .vertical-nav #{&} {
|
||||
@include scaleText(17px, 17px*1.6);
|
||||
@include scaleText(17px, 17px * 1.6);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,4 +83,4 @@ body div.wagtail-draft-warning {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@import './wagtail/blocks';
|
||||
@import "./wagtail/blocks";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.cms {
|
||||
@import './profiles';
|
||||
@import "./profiles";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче