diff --git a/package-lock.json b/package-lock.json index ee6169f2a..6f2b44ccf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1288,6 +1288,31 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, + "camelcase-keys": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz", + "integrity": "sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=", + "dev": true, + "requires": { + "camelcase": "^4.1.0", + "map-obj": "^2.0.0", + "quick-lru": "^1.0.0" + }, + "dependencies": { + "camelcase": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz", + "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", + "dev": true + }, + "map-obj": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-2.0.0.tgz", + "integrity": "sha1-plzSkIepJZi4eRJXpSPgISIqwfk=", + "dev": true + } + } + }, "caniuse-lite": { "version": "1.0.30001016", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz", @@ -2623,6 +2648,15 @@ } } }, + "find-up": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", + "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "dev": true, + "requires": { + "locate-path": "^2.0.0" + } + }, "findup-sync": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz", @@ -3341,6 +3375,12 @@ } } }, + "get-stdin": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", + "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", + "dev": true + }, "get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -3839,6 +3879,12 @@ "resolve-from": "^3.0.0" } }, + "import-lazy": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz", + "integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==", + "dev": true + }, "import-local": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", @@ -3855,6 +3901,12 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "indent-string": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", + "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=", + "dev": true + }, "indexes-of": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", @@ -4082,6 +4134,12 @@ "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", "dev": true }, + "is-supported-regexp-flag": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-supported-regexp-flag/-/is-supported-regexp-flag-1.0.1.tgz", + "integrity": "sha512-3vcJecUUrpgCqc/ca0aWeNu64UGgxcvO60K/Fkr1N6RSvfGCTU60UKN68JDmKokgba0rFFJs12EnzOQa14ubKQ==", + "dev": true + }, "is-whitespace-character": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz", @@ -4227,6 +4285,18 @@ "integrity": "sha1-IsWbyu+qmo7zWc91l4TkvxBq6hs=", "dev": true }, + "load-json-file": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", + "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" + } + }, "loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", @@ -4450,6 +4520,23 @@ "readable-stream": "^2.0.1" } }, + "meow": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz", + "integrity": "sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==", + "dev": true, + "requires": { + "camelcase-keys": "^4.0.0", + "decamelize-keys": "^1.0.0", + "loud-rejection": "^1.0.0", + "minimist-options": "^3.0.1", + "normalize-package-data": "^2.3.4", + "read-pkg-up": "^3.0.0", + "redent": "^2.0.0", + "trim-newlines": "^2.0.0", + "yargs-parser": "^10.0.0" + } + }, "merge2": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz", @@ -5787,6 +5874,27 @@ "safe-buffer": "^5.1.0" } }, + "read-pkg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", + "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "dev": true, + "requires": { + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" + } + }, + "read-pkg-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz", + "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=", + "dev": true, + "requires": { + "find-up": "^2.0.0", + "read-pkg": "^3.0.0" + } + }, "readable-stream": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", @@ -5813,6 +5921,16 @@ "readable-stream": "^2.0.2" } }, + "redent": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz", + "integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=", + "dev": true, + "requires": { + "indent-string": "^3.0.0", + "strip-indent": "^2.0.0" + } + }, "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", @@ -6517,6 +6635,40 @@ "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=", "dev": true }, + "string-width": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", + "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "dev": true, + "requires": { + "emoji-regex": "^7.0.1", + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^5.1.0" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "emoji-regex": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", + "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", + "dev": true + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dev": true, + "requires": { + "ansi-regex": "^4.1.0" + } + } + } + }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -6547,12 +6699,24 @@ "ansi-regex": "^5.0.0" } }, + "strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "dev": true + }, "strip-eof": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, + "strip-indent": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz", + "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=", + "dev": true + }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -6901,6 +7065,224 @@ } } }, + "stylelint-config-rational-order": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/stylelint-config-rational-order/-/stylelint-config-rational-order-0.1.2.tgz", + "integrity": "sha512-Qo7ZQaihCwTqijfZg4sbdQQHtugOX/B1/fYh018EiDZHW+lkqH9uHOnsDwDPGZrYJuB6CoyI7MZh2ecw2dOkew==", + "dev": true, + "requires": { + "stylelint": "^9.10.1", + "stylelint-order": "^2.2.1" + }, + "dependencies": { + "clone-regexp": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-1.0.1.tgz", + "integrity": "sha512-Fcij9IwRW27XedRIJnSOEupS7RVcXtObJXbcUOX93UCLqqOdRpkvzKywOOSizmEK/Is3S/RHX9dLdfo6R1Q1mw==", + "dev": true, + "requires": { + "is-regexp": "^1.0.0", + "is-supported-regexp-flag": "^1.0.0" + } + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "execall": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execall/-/execall-1.0.0.tgz", + "integrity": "sha1-c9CQTjlbPKsGWLCNCewlMH8pu3M=", + "dev": true, + "requires": { + "clone-regexp": "^1.0.0" + } + }, + "file-entry-cache": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-4.0.0.tgz", + "integrity": "sha512-AVSwsnbV8vH/UVbvgEhf3saVQXORNv0ZzSkvkhQIaia5Tia+JhGTaa/ePUSVoPHQyGayQNmYfkzFi3WZV5zcpA==", + "dev": true, + "requires": { + "flat-cache": "^2.0.1" + } + }, + "html-tags": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz", + "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=", + "dev": true + }, + "ignore": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz", + "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==", + "dev": true + }, + "is-regexp": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz", + "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=", + "dev": true + }, + "known-css-properties": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.11.0.tgz", + "integrity": "sha512-bEZlJzXo5V/ApNNa5z375mJC6Nrz4vG43UgcSCrg2OHC+yuB6j0iDSrY7RQ/+PRofFB03wNIIt9iXIVLr4wc7w==", + "dev": true + }, + "leven": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz", + "integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA=", + "dev": true + }, + "log-symbols": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", + "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", + "dev": true, + "requires": { + "chalk": "^2.0.1" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true + }, + "postcss": { + "version": "7.0.27", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz", + "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + } + }, + "postcss-sass": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.3.5.tgz", + "integrity": "sha512-B5z2Kob4xBxFjcufFnhQ2HqJQ2y/Zs/ic5EZbCywCkxKd756Q40cIQ/veRDwSrw1BF6+4wUgmpm0sBASqVi65A==", + "dev": true, + "requires": { + "gonzales-pe": "^4.2.3", + "postcss": "^7.0.1" + } + }, + "postcss-sorting": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-4.1.0.tgz", + "integrity": "sha512-r4T2oQd1giURJdHQ/RMb72dKZCuLOdWx2B/XhXN1Y1ZdnwXsKH896Qz6vD4tFy9xSjpKNYhlZoJmWyhH/7JUQw==", + "dev": true, + "requires": { + "lodash": "^4.17.4", + "postcss": "^7.0.0" + } + }, + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + }, + "stylelint": { + "version": "9.10.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-9.10.1.tgz", + "integrity": "sha512-9UiHxZhOAHEgeQ7oLGwrwoDR8vclBKlSX7r4fH0iuu0SfPwFaLkb1c7Q2j1cqg9P7IDXeAV2TvQML/fRQzGBBQ==", + "dev": true, + "requires": { + "autoprefixer": "^9.0.0", + "balanced-match": "^1.0.0", + "chalk": "^2.4.1", + "cosmiconfig": "^5.0.0", + "debug": "^4.0.0", + "execall": "^1.0.0", + "file-entry-cache": "^4.0.0", + "get-stdin": "^6.0.0", + "global-modules": "^2.0.0", + "globby": "^9.0.0", + "globjoin": "^0.1.4", + "html-tags": "^2.0.0", + "ignore": "^5.0.4", + "import-lazy": "^3.1.0", + "imurmurhash": "^0.1.4", + "known-css-properties": "^0.11.0", + "leven": "^2.1.0", + "lodash": "^4.17.4", + "log-symbols": "^2.0.0", + "mathml-tag-names": "^2.0.1", + "meow": "^5.0.0", + "micromatch": "^3.1.10", + "normalize-selector": "^0.2.0", + "pify": "^4.0.0", + "postcss": "^7.0.13", + "postcss-html": "^0.36.0", + "postcss-jsx": "^0.36.0", + "postcss-less": "^3.1.0", + "postcss-markdown": "^0.36.0", + "postcss-media-query-parser": "^0.2.3", + "postcss-reporter": "^6.0.0", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^4.0.0", + "postcss-sass": "^0.3.5", + "postcss-scss": "^2.0.0", + "postcss-selector-parser": "^3.1.0", + "postcss-syntax": "^0.36.2", + "postcss-value-parser": "^3.3.0", + "resolve-from": "^4.0.0", + "signal-exit": "^3.0.2", + "slash": "^2.0.0", + "specificity": "^0.4.1", + "string-width": "^3.0.0", + "style-search": "^0.1.0", + "sugarss": "^2.0.0", + "svg-tags": "^1.0.0", + "table": "^5.0.0" + } + }, + "stylelint-order": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-2.2.1.tgz", + "integrity": "sha512-019KBV9j8qp1MfBjJuotse6MgaZqGVtXMc91GU9MsS9Feb+jYUvUU3Z8XiClqPdqJZQ0ryXQJGg3U3PcEjXwfg==", + "dev": true, + "requires": { + "lodash": "^4.17.10", + "postcss": "^7.0.2", + "postcss-sorting": "^4.1.0" + } + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "stylelint-config-recommended": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz", @@ -7185,6 +7567,12 @@ "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", "dev": true }, + "trim-newlines": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz", + "integrity": "sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=", + "dev": true + }, "trim-trailing-lines": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.2.tgz", @@ -8086,6 +8474,23 @@ "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", "dev": true }, + "yargs-parser": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz", + "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==", + "dev": true, + "requires": { + "camelcase": "^4.1.0" + }, + "dependencies": { + "camelcase": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz", + "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", + "dev": true + } + } + }, "yn": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz", diff --git a/package.json b/package.json index 27153da23..46943176d 100644 --- a/package.json +++ b/package.json @@ -75,8 +75,8 @@ "sass": "^1.25.0", "sass-loader": "^8.0.2", "stylelint": "^11.1.1", + "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard": "^19.0.0", - "stylelint-order": "^3.1.1", "stylelint-scss": "^3.13.0", "ts-loader": "^6.2.1", "ts-node": "^7.0.1", diff --git a/src/assets/stylesheets/base/_reset.scss b/src/assets/stylesheets/base/_reset.scss index 85e8ce8f6..b152b3fbc 100644 --- a/src/assets/stylesheets/base/_reset.scss +++ b/src/assets/stylesheets/base/_reset.scss @@ -50,8 +50,8 @@ body { // Reset horizontal rules in FF hr { - overflow: visible; box-sizing: content-box; + overflow: visible; } // Remove gaps in underlined links in iOS >= 8 and Safari >= 8 @@ -119,9 +119,9 @@ th { button { margin: 0; padding: 0; - border: 0; - background: transparent; font-size: inherit; + background: transparent; + border: 0; } // Reset (native) input styles diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss index f90f2c84a..48d97bfbd 100644 --- a/src/assets/stylesheets/base/_typeset.scss +++ b/src/assets/stylesheets/base/_typeset.scss @@ -74,28 +74,28 @@ kbd { h1 { margin: 0 0 px2rem(40px); color: var(--md-default-fg-color--light); - font-size: ms(3); font-weight: 300; - letter-spacing: -0.01em; + font-size: ms(3); line-height: 1.3; + letter-spacing: -0.01em; } // 2nd level headline h2 { margin: px2rem(40px) 0 px2rem(16px); - font-size: ms(2); font-weight: 300; - letter-spacing: -0.01em; + font-size: ms(2); line-height: 1.4; + letter-spacing: -0.01em; } // 3rd level headline h3 { margin: px2rem(32px) 0 px2rem(16px); - font-size: ms(1); font-weight: 400; - letter-spacing: -0.01em; + font-size: ms(1); line-height: 1.5; + letter-spacing: -0.01em; } // 3rd level headline following an 2nd level headline @@ -106,8 +106,8 @@ kbd { // 4th level headline h4 { margin: px2rem(16px) 0; - font-size: ms(0); font-weight: 700; + font-size: ms(0); letter-spacing: -0.01em; } @@ -116,8 +116,8 @@ kbd { h6 { margin: px2rem(16px) 0; color: var(--md-default-fg-color--light); - font-size: ms(-1); font-weight: 700; + font-size: ms(-1); letter-spacing: -0.01em; } @@ -164,10 +164,10 @@ kbd { code, pre, kbd { - background-color: var(--md-code-bg-color); color: var(--md-code-fg-color); font-size: 85%; direction: ltr; + background-color: var(--md-code-bg-color); // Wrap text and hide scollbars @media print { @@ -181,11 +181,11 @@ kbd { margin: 0 0.25em * $f; padding: 0.0625em * $f 0; + word-break: break-word; border-radius: px2rem(2px); box-shadow: +0.25em * $f 0 0 var(--md-code-bg-color), -0.25em * $f 0 0 var(--md-code-bg-color); - word-break: break-word; box-decoration-break: clone; } @@ -205,9 +205,9 @@ kbd { a > code { margin: inherit; padding: inherit; - border-radius: initial; - background-color: inherit; color: inherit; + background-color: inherit; + border-radius: initial; box-shadow: none; } @@ -215,8 +215,8 @@ kbd { pre { position: relative; margin: 1em 0; - border-radius: px2rem(2px); line-height: 1.4; + border-radius: px2rem(2px); // Hack: reduce jitter backface-visibility: hidden; -webkit-overflow-scrolling: touch; @@ -226,12 +226,12 @@ kbd { display: block; margin: 0; padding: px2rem(10.5px) px2rem(12px); - background-color: transparent; + overflow: auto; font-size: inherit; + word-break: normal; + background-color: transparent; box-shadow: none; box-decoration-break: slice; - overflow: auto; - word-break: normal; // Override native scrollbar styles &::-webkit-scrollbar { @@ -272,34 +272,34 @@ kbd { display: inline-block; padding: 0 0.5em * $f; - border-radius: px2rem(2px); font-size: 0.75em; line-height: 1.5; + vertical-align: text-top; + word-break: break-word; + border-radius: px2rem(2px); box-shadow: 0 px2rem(2px) 0 px2rem(1px) var(--md-default-fg-color--lighter), 0 px2rem(2px) 0 var(--md-default-fg-color--lighter), inset 0 px2rem(-2px) px2rem(4px) var(--md-default-bg-color); - word-break: break-word; - vertical-align: text-top; } // Text highlighting marker mark { margin: 0 0.25em; padding: 0.0625em 0; - border-radius: px2rem(2px); + word-break: break-word; background-color: transparentize($clr-yellow-500, 0.5); + border-radius: px2rem(2px); box-shadow: +0.25em 0 0 transparentize($clr-yellow-500, 0.5), -0.25em 0 0 transparentize($clr-yellow-500, 0.5); - word-break: break-word; box-decoration-break: clone; } // Abbreviations abbr { - border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light); text-decoration: none; + border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light); cursor: help; } @@ -323,8 +323,8 @@ kbd { // Blockquotes, possibly nested blockquote { padding-left: px2rem(12px); - border-left: px2rem(4px) solid var(--md-default-fg-color--lighter); color: var(--md-default-fg-color--light); + border-left: px2rem(4px) solid var(--md-default-fg-color--lighter); // Adjust for right-to-left languages [dir="rtl"] & { @@ -420,13 +420,13 @@ kbd { table:not([class]) { display: inline-block; max-width: 100%; - border-radius: px2rem(2px); - background: var(--md-default-bg-color); + overflow: auto; font-size: ms(-1); + background: var(--md-default-bg-color); + border-radius: px2rem(2px); box-shadow: 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05), 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1); - overflow: auto; -webkit-overflow-scrolling: touch; // Due to margin collapse because of the necessary inline-block hack, we @@ -451,16 +451,16 @@ kbd { th { min-width: px2rem(100px); padding: px2rem(12px) px2rem(16px); - background-color: var(--md-default-fg-color--light); color: var(--md-default-bg-color); vertical-align: top; + background-color: var(--md-default-fg-color--light); } // Table cells td { padding: px2rem(12px) px2rem(16px); - border-top: px2rem(1px) solid var(--md-default-fg-color--lightest); vertical-align: top; + border-top: px2rem(1px) solid var(--md-default-fg-color--lightest); } // Table rows diff --git a/src/assets/stylesheets/extensions/_admonition.scss b/src/assets/stylesheets/extensions/_admonition.scss index 8e420c855..3829ad88e 100644 --- a/src/assets/stylesheets/extensions/_admonition.scss +++ b/src/assets/stylesheets/extensions/_admonition.scss @@ -31,13 +31,13 @@ .admonition { margin: 1.5625em 0; padding: 0 px2rem(12px); + overflow: auto; + font-size: ms(-1); border-left: px2rem(4px) solid $clr-blue-a200; border-radius: px2rem(2px); - font-size: ms(-1); box-shadow: 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05), 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1); - overflow: auto; // Adjust for right-to-left languages [dir="rtl"] & { @@ -104,8 +104,8 @@ .admonition-title { margin: 0 px2rem(-12px); padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px); - background-color: transparentize($clr-blue-a200, 0.9); font-weight: 700; + background-color: transparentize($clr-blue-a200, 0.9); // Adjust for right-to-left languages [dir="rtl"] & { diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss index f8d4b0718..2d9129c0e 100644 --- a/src/assets/stylesheets/extensions/_codehilite.scss +++ b/src/assets/stylesheets/extensions/_codehilite.scss @@ -251,9 +251,9 @@ $codehilite-whitespace: transparent; // Reset spacings pre { - background-color: transparent; color: inherit; text-align: right; + background-color: transparent; } } diff --git a/src/assets/stylesheets/extensions/_footnotes.scss b/src/assets/stylesheets/extensions/_footnotes.scss index e7bf29d69..285650c54 100644 --- a/src/assets/stylesheets/extensions/_footnotes.scss +++ b/src/assets/stylesheets/extensions/_footnotes.scss @@ -106,26 +106,26 @@ &::before { display: inline; margin: 0 0.2em; - border-left: px2rem(1px) solid var(--md-default-fg-color--lighter); font-size: 1.25em; - content: ""; vertical-align: px2rem(-5px); + border-left: px2rem(1px) solid var(--md-default-fg-color--lighter); + content: ""; } } // Footnote back reference .footnote-backref { display: inline-block; + color: var(--md-default-fg-color--lighter); + // Hack: remove Unicode arrow for icon + font-size: 0; + vertical-align: text-bottom; transform: translateX(px2rem(5px)); + opacity: 0; transition: transform 250ms 250ms, color 250ms, opacity 125ms 250ms; - color: var(--md-default-fg-color--lighter); - // Hack: remove Unicode arrow for icon - font-size: 0; - opacity: 0; - vertical-align: text-bottom; // Adjust for right-to-left languages [dir="rtl"] & { diff --git a/src/assets/stylesheets/extensions/_permalinks.scss b/src/assets/stylesheets/extensions/_permalinks.scss index 43f89ef5c..4fcc5169a 100644 --- a/src/assets/stylesheets/extensions/_permalinks.scss +++ b/src/assets/stylesheets/extensions/_permalinks.scss @@ -32,15 +32,15 @@ display: inline-block; margin-left: px2rem(10px); transform: translate(0, px2rem(5px)); + // Hack: If we don't set visibility hidden, the text content of the node + // will include the headerlink character, which is why Google indexes them. + visibility: hidden; + opacity: 0; transition: transform 250ms 250ms, color 250ms, opacity 125ms 250ms, visibility 0ms 500ms; - opacity: 0; - // Hack: If we don't set visibility hidden, the text content of the node - // will include the headerlink character, which is why Google indexes them. - visibility: hidden; // Adjust for RTL languages [dir="rtl"] & { @@ -64,13 +64,13 @@ :target .headerlink, .headerlink:focus { transform: translate(0, 0); + visibility: visible; + opacity: 1; transition: transform 250ms 250ms, color 250ms, opacity 125ms 250ms, visibility 0ms; - opacity: 1; - visibility: visible; } // Active or targeted permalink diff --git a/src/assets/stylesheets/extensions/pymdown/_highlight.scss b/src/assets/stylesheets/extensions/pymdown/_highlight.scss index ba9743bde..963c2632f 100644 --- a/src/assets/stylesheets/extensions/pymdown/_highlight.scss +++ b/src/assets/stylesheets/extensions/pymdown/_highlight.scss @@ -33,14 +33,14 @@ // Inline line numbers [data-linenos] { &::before { - display: inline-block; position: sticky; left: px2rem(-12px); + display: inline-block; margin-right: px2rem(12px); margin-left: px2rem(-12px); padding-left: px2rem(12px); - border-right: px2rem(1px) solid var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--lighter); + border-right: px2rem(1px) solid var(--md-default-fg-color--lightest); content: attr(data-linenos); user-select: none; diff --git a/src/assets/stylesheets/extensions/pymdown/_tabbed.scss b/src/assets/stylesheets/extensions/pymdown/_tabbed.scss index d0478f630..457b8c497 100644 --- a/src/assets/stylesheets/extensions/pymdown/_tabbed.scss +++ b/src/assets/stylesheets/extensions/pymdown/_tabbed.scss @@ -43,8 +43,8 @@ // Tabbed code block container .tabbed-set { - display: flex; position: relative; + display: flex; flex-wrap: wrap; margin: 1em 0; border: px2rem(1px) solid var(--md-default-fg-color--lightest); @@ -56,8 +56,8 @@ // Active tab label &:checked + label { - border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); // Show code tab content & + .tabbed-content { @@ -96,14 +96,14 @@ width: auto; padding: px2rem(12px); padding-bottom: px2rem(10px); + color: var(--md-default-fg-color--light); + font-weight: 700; + font-size: ms(-1); + border-bottom: px2rem(2px) solid transparent; + cursor: pointer; transition: color 125ms, border 250ms; - border-bottom: px2rem(2px) solid transparent; - color: var(--md-default-fg-color--light); - font-size: ms(-1); - font-weight: 700; - cursor: pointer; // Hovered tab label html &:hover { diff --git a/src/assets/stylesheets/extensions/pymdown/_tasklist.scss b/src/assets/stylesheets/extensions/pymdown/_tasklist.scss index 8c6bf328b..1cc76ed25 100644 --- a/src/assets/stylesheets/extensions/pymdown/_tasklist.scss +++ b/src/assets/stylesheets/extensions/pymdown/_tasklist.scss @@ -76,8 +76,8 @@ // Hide original checkbox behind icon [type="checkbox"] { - opacity: 0; z-index: -1; + opacity: 0; } } } diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss index d66516e58..90aa237d1 100644 --- a/src/assets/stylesheets/layout/_base.scss +++ b/src/assets/stylesheets/layout/_base.scss @@ -36,7 +36,11 @@ $md-toggle__drawer--checked: // based on relative ems (rems) html { height: 100%; - background-color: var(--md-default-bg-color); + // Hack: some browsers on some operating systems don't account for scroll + // bars when firing media queries, so we need to do this for safety. This + // currently impacts the table of contents component between 1220 and 1234px + // and is to current knowledge not fixable. + overflow-x: hidden; // Hack: normally, we would set the base font-size to 62.5%, so we can base // all calculations on 10px, but Chromium and Chrome define a minimal font // size of 12 if the system language is set to Chinese. For this reason we @@ -44,11 +48,7 @@ html { // // See https://github.com/squidfunk/mkdocs-material/issues/911 font-size: 125%; - // Hack: some browsers on some operating systems don't account for scroll - // bars when firing media queries, so we need to do this for safety. This - // currently impacts the table of contents component between 1220 and 1234px - // and is to current knowledge not fixable. - overflow-x: hidden; + background-color: var(--md-default-bg-color); // [screen medium +]: Set base font-size to 11px @include break-from-device(screen medium) { @@ -63,8 +63,8 @@ html { // Stretch body to container and leave room for footer body { - display: flex; position: relative; + display: flex; flex-direction: column; width: 100%; min-height: 100%; @@ -122,9 +122,9 @@ hr { // Apply ellipsis in case of overflowing text .md-ellipsis { display: block; - text-overflow: ellipsis; - white-space: nowrap; overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } // ---------------------------------------------------------------------------- @@ -140,15 +140,15 @@ hr { .md-overlay { position: fixed; top: 0; + z-index: 3; width: 0; height: 0; + background-color: var(--md-default-fg-color--light); + opacity: 0; transition: width 0ms 250ms, height 0ms 250ms, opacity 250ms; - background-color: var(--md-default-fg-color--light); - opacity: 0; - z-index: 3; // [tablet -]: Trigger overlay @include break-to-device(tablet) { @@ -157,11 +157,11 @@ hr { #{$md-toggle__drawer--checked} & { width: 100%; height: 100%; + opacity: 1; transition: width 0ms, height 0ms, opacity 250ms; - opacity: 1; } } } @@ -175,21 +175,21 @@ hr { position: fixed; margin: px2rem(10px); padding: px2rem(6px) px2rem(10px); - transform: translateY(px2rem(8px)); - border-radius: px2rem(2px); - background-color: var(--md-default-fg-color); color: var(--md-default-bg-color); font-size: ms(-1); + background-color: var(--md-default-fg-color); + border-radius: px2rem(2px); + transform: translateY(px2rem(8px)); opacity: 0; // Show skip link on focus &:focus { + z-index: 10; transform: translateY(0); + opacity: 1; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 175ms 75ms; - opacity: 1; - z-index: 10; } } diff --git a/src/assets/stylesheets/layout/_clipboard.scss b/src/assets/stylesheets/layout/_clipboard.scss index ac34fd2cc..53db138db 100644 --- a/src/assets/stylesheets/layout/_clipboard.scss +++ b/src/assets/stylesheets/layout/_clipboard.scss @@ -29,15 +29,15 @@ position: absolute; top: px2rem(8px); right: px2rem(8px); + z-index: 1; width: px2rem(24px); height: px2rem(24px); - transition: color 250ms; - border-radius: px2rem(2px); color: var(--md-default-fg-color--lightest); - cursor: pointer; - z-index: 1; + border-radius: px2rem(2px); // Hack: reduce jitter backface-visibility: hidden; + cursor: pointer; + transition: color 250ms; // Hide for print @media print { diff --git a/src/assets/stylesheets/layout/_content.scss b/src/assets/stylesheets/layout/_content.scss index b85351d3c..948df01bb 100644 --- a/src/assets/stylesheets/layout/_content.scss +++ b/src/assets/stylesheets/layout/_content.scss @@ -75,16 +75,16 @@ // Button next to the title &__button { + float: right; margin: px2rem(8px) 0; margin-left: px2rem(8px); padding: 0; - float: right; // Adjust for right-to-left languages [dir="rtl"] & { + float: left; margin-right: px2rem(8px); margin-left: initial; - float: left; // Flip icon vertically svg { diff --git a/src/assets/stylesheets/layout/_dialog.scss b/src/assets/stylesheets/layout/_dialog.scss index fd105a51d..63b0be766 100644 --- a/src/assets/stylesheets/layout/_dialog.scss +++ b/src/assets/stylesheets/layout/_dialog.scss @@ -28,24 +28,24 @@ .md-dialog { @include z-depth(2); - display: block; position: fixed; right: px2rem(16px); bottom: px2rem(16px); left: initial; + z-index: 2; + display: block; min-width: px2rem(222px); padding: px2rem(8px) px2rem(12px); + color: var(--md-default-bg-color); + font-size: px2rem(14px); + background: var(--md-default-fg-color); + border: none; + border-radius: px2rem(2px); transform: translateY(100%); + opacity: 0; transition: transform 0ms 400ms, opacity 400ms; - border: none; - border-radius: px2rem(2px); - background: var(--md-default-fg-color); - color: var(--md-default-bg-color); - font-size: px2rem(14px); - opacity: 0; - z-index: 2; // Adjust for right-to-left languages [dir="rtl"] & { @@ -56,10 +56,10 @@ // Show open dialog &[data-md-state="open"] { transform: translateY(0); + opacity: 1; transition: transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1), opacity 400ms; - opacity: 1; } // Hide for print diff --git a/src/assets/stylesheets/layout/_footer.scss b/src/assets/stylesheets/layout/_footer.scss index 481fd37e8..6b92d4391 100644 --- a/src/assets/stylesheets/layout/_footer.scss +++ b/src/assets/stylesheets/layout/_footer.scss @@ -26,8 +26,8 @@ // Application footer .md-footer { - background-color: var(--md-default-fg-color); color: var(--md-default-bg-color); + background-color: var(--md-default-fg-color); // Hide for print @media print { @@ -64,8 +64,8 @@ // Link to previous page &--prev { - width: 25%; float: left; + width: 25%; // Adjust for right-to-left languages [dir="rtl"] & { @@ -89,8 +89,8 @@ // Link to next page &--next { - width: 75%; float: right; + width: 75%; text-align: right; // Adjust for right-to-left languages @@ -165,8 +165,8 @@ // [tablet portrait +]: Show next to social media links @include break-from-device(tablet portrait) { - max-width: 75%; float: left; + max-width: 75%; // Adjust for right-to-left languages [dir="rtl"] & { @@ -187,8 +187,8 @@ // [tablet portrait +]: Show next to copyright information @include break-from-device(tablet portrait) { - padding: px2rem(12px) 0; float: right; + padding: px2rem(12px) 0; // Adjust for right-to-left languages [dir="rtl"] & { @@ -201,8 +201,8 @@ display: inline-block; width: px2rem(32px); height: px2rem(32px); - transition: color 250ms; text-align: center; + transition: color 250ms; // Adjust line-height to match height for correct alignment &::before { diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss index 0e99c7a5c..f47e99e85 100644 --- a/src/assets/stylesheets/layout/_header.scss +++ b/src/assets/stylesheets/layout/_header.scss @@ -30,34 +30,34 @@ top: 0; right: 0; left: 0; + z-index: 2; height: px2rem(48px); - transition: - background-color 250ms, - color 250ms; - background-color: var(--md-primary-fg-color); color: var(--md-primary-bg-color); + background-color: var(--md-primary-fg-color); // Hack: reduce jitter by adding a transparent box shadow of the same size // so the size of the layer doesn't change during animation box-shadow: 0 0 px2rem(4px) rgba(0, 0, 0, 0), 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0); - z-index: 2; + transition: + background-color 250ms, + color 250ms; // Always hide shadow, in case JavaScript is not available .no-js & { - transition: none; box-shadow: none; + transition: none; } // Show and animate shadow &[data-md-state="shadow"] { + box-shadow: + 0 0 px2rem(4px) rgba(0, 0, 0, 0.1), + 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2); transition: background-color 250ms, color 250ms, box-shadow 250ms; - box-shadow: - 0 0 px2rem(4px) rgba(0, 0, 0, 0.1), - 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2); } // Hide for print @@ -74,11 +74,11 @@ // Icon buttons &__button { position: relative; + z-index: 1; margin: px2rem(4px); padding: px2rem(8px); - transition: opacity 250ms; cursor: pointer; - z-index: 1; + transition: opacity 250ms; // Adjust for right-to-left languages [dir="rtl"] & { @@ -145,27 +145,27 @@ // Header topics &__topic { - display: block; position: absolute; + display: block; width: 100%; padding: 0 px2rem(20px); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + // Hack: reduce jitter + backface-visibility: hidden; transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 150ms; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - // Hack: reduce jitter - backface-visibility: hidden; // Page title & + & { + z-index: -1; transform: translateX(px2rem(25px)); + opacity: 0; transition: transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1), opacity 150ms; - opacity: 0; - z-index: -1; pointer-events: none; // Adjust for right-to-left languages @@ -193,12 +193,12 @@ // Show page title &[data-md-state="active"] .md-header-nav__topic { + z-index: -1; transform: translateX(px2rem(-25px)); + opacity: 0; transition: transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1), opacity 150ms; - opacity: 0; - z-index: -1; pointer-events: none; // Adjust for right-to-left languages @@ -208,12 +208,12 @@ // Page title & + .md-header-nav__topic { + z-index: 0; transform: translateX(0); + opacity: 1; transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 150ms; - opacity: 1; - z-index: 0; pointer-events: initial; } } diff --git a/src/assets/stylesheets/layout/_hero.scss b/src/assets/stylesheets/layout/_hero.scss index 59bb31be9..991feb317 100644 --- a/src/assets/stylesheets/layout/_hero.scss +++ b/src/assets/stylesheets/layout/_hero.scss @@ -26,11 +26,11 @@ // Hero teaser .md-hero { - transition: background 250ms; - background-color: var(--md-primary-fg-color); + overflow: hidden; color: var(--md-primary-bg-color); font-size: ms(1); - overflow: hidden; + background-color: var(--md-primary-fg-color); + transition: background 250ms; // Inner wrapper &__inner { @@ -49,12 +49,12 @@ // Fade-out tabs background upon scrolling [data-md-state="hidden"] & { - pointer-events: none; transform: translateY(px2rem(12.5px)); + opacity: 0; transition: transform 0ms 400ms, opacity 100ms 0ms; - opacity: 0; + pointer-events: none; } // Adjust bottom spacing if there are no tabs diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss index 47835dfc9..a7f18dffa 100644 --- a/src/assets/stylesheets/layout/_nav.scss +++ b/src/assets/stylesheets/layout/_nav.scss @@ -33,9 +33,9 @@ &__title { display: block; padding: 0 px2rem(12px); + overflow: hidden; font-weight: 700; text-overflow: ellipsis; - overflow: hidden; // Hide buttons by default .md-nav__button { @@ -103,10 +103,10 @@ &__link { display: block; margin-top: 0.625em; - transition: color 125ms; + overflow: hidden; text-overflow: ellipsis; cursor: pointer; - overflow: hidden; + transition: color 125ms; scroll-snap-align: start; // Hide link to table of contents by default - this will only match the @@ -154,14 +154,14 @@ // Stretch primary navigation to drawer &--primary, &--primary .md-nav { - display: flex; position: absolute; top: 0; right: 0; left: 0; + z-index: 1; + display: flex; flex-direction: column; height: 100%; - z-index: 1; } // Adjust styles for primary navigation @@ -179,19 +179,19 @@ position: relative; height: px2rem(112px); padding: px2rem(60px) px2rem(16px) px2rem(4px); - background-color: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); font-weight: 400; line-height: px2rem(48px); white-space: nowrap; + background-color: var(--md-default-fg-color--lightest); cursor: pointer; // Icon .md-nav__icon { - display: block; position: absolute; top: px2rem(8px); left: px2rem(8px); + display: block; width: px2rem(24px); height: px2rem(24px); margin: px2rem(4px); @@ -205,10 +205,10 @@ // Main lists ~ .md-nav__list { + overflow-y: auto; background-color: var(--md-default-bg-color); box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest); - overflow-y: auto; // Hack: reduce jitter backface-visibility: hidden; scroll-snap-type: y mandatory; @@ -222,15 +222,15 @@ // Site title in main navigation &[for="__drawer"] { position: relative; - background-color: var(--md-primary-fg-color); color: var(--md-primary-bg-color); + background-color: var(--md-primary-fg-color); // Site logo .md-nav__button { - display: block; position: absolute; top: px2rem(4px); left: px2rem(4px); + display: block; margin: px2rem(4px); padding: px2rem(8px); font-size: px2rem(48px); @@ -380,10 +380,10 @@ .md-nav__toggle ~ & { display: flex; transform: translateX(100%); + opacity: 0; transition: transform 250ms cubic-bezier(0.8, 0, 0.6, 1), opacity 125ms 50ms; - opacity: 0; // Adjust for right-to-left languages [dir="rtl"] & { @@ -394,10 +394,10 @@ // Expand nested navigation, if toggle is checked .md-nav__toggle:checked ~ & { transform: translateX(0); + opacity: 1; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 125ms 125ms; - opacity: 1; } } @@ -431,8 +431,8 @@ &__source { display: block; padding: 0 px2rem(4px); - background-color: var(--md-primary-fg-color--dark); color: var(--md-primary-bg-color); + background-color: var(--md-primary-fg-color--dark); } } @@ -489,8 +489,8 @@ // Icon &__icon { - height: px2rem(18px); float: right; + height: px2rem(18px); transition: transform 250ms; // Inline icon and adjust to match font size diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss index ae5bec506..9fb1905c5 100644 --- a/src/assets/stylesheets/layout/_search.scss +++ b/src/assets/stylesheets/layout/_search.scss @@ -48,8 +48,8 @@ $md-toggle__search--checked: // Search modal overlay &__overlay { - opacity: 0; z-index: 1; + opacity: 0; // [tablet portrait -]: Full-screen search bar @include break-to-device(tablet portrait) { @@ -58,13 +58,13 @@ $md-toggle__search--checked: left: px2rem(-44px); width: px2rem(40px); height: px2rem(40px); + overflow: hidden; + background-color: var(--md-default-bg-color); + border-radius: px2rem(20px); transform-origin: center; transition: transform 300ms 100ms, opacity 200ms 200ms; - border-radius: px2rem(20px); - background-color: var(--md-default-bg-color); - overflow: hidden; pointer-events: none; // Adjust for right-to-left languages @@ -75,10 +75,10 @@ $md-toggle__search--checked: // Expanded overlay #{$md-toggle__search--checked} & { + opacity: 1; transition: transform 400ms, opacity 100ms; - opacity: 1; } } @@ -108,12 +108,12 @@ $md-toggle__search--checked: left: 0; width: 0; height: 0; + background-color: var(--md-default-fg-color--light); + cursor: pointer; transition: width 0ms 250ms, height 0ms 250ms, opacity 250ms; - background-color: var(--md-default-fg-color--light); - cursor: pointer; // Adjust for right-to-left languages [dir="rtl"] & { @@ -125,11 +125,11 @@ $md-toggle__search--checked: #{$md-toggle__search--checked} & { width: 100%; height: 100%; + opacity: 1; transition: width 0ms, height 0ms, opacity 250ms; - opacity: 1; } } } @@ -144,27 +144,27 @@ $md-toggle__search--checked: position: fixed; top: 0; left: 100%; + z-index: 2; width: 100%; height: 100%; transform: translateX(5%); + opacity: 0; transition: right 0ms 300ms, left 0ms 300ms, transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms 150ms; - opacity: 0; - z-index: 2; // Active search modal #{$md-toggle__search--checked} & { left: 0; transform: translateX(0); + opacity: 1; transition: right 0ms 0ms, left 0ms 0ms, transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 150ms 150ms; - opacity: 1; // Adjust for right-to-left languages [dir="rtl"] & { @@ -184,9 +184,9 @@ $md-toggle__search--checked: // [tablet landscape +]: Header-embedded search @include break-from-device(tablet landscape) { position: relative; + float: right; width: px2rem(234px); padding: px2rem(2px) 0; - float: right; transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1); // Adjust for right-to-left languages @@ -223,9 +223,9 @@ $md-toggle__search--checked: // Search input &__input { position: relative; + z-index: 2; padding: 0 px2rem(44px) 0 px2rem(72px); text-overflow: ellipsis; - z-index: 2; // Adjust for right-to-left languages [dir="rtl"] & { @@ -260,13 +260,13 @@ $md-toggle__search--checked: width: 100%; height: px2rem(36px); padding-left: px2rem(44px); + color: inherit; + font-size: ms(0); + background-color: var(--md-default-fg-color--lighter); + border-radius: px2rem(2px); transition: background-color 250ms, color 250ms; - border-radius: px2rem(2px); - background-color: var(--md-default-fg-color--lighter); - color: inherit; - font-size: ms(0); // Adjust for right-to-left languages [dir="rtl"] & { @@ -290,10 +290,10 @@ $md-toggle__search--checked: // Set light background on active search field #{$md-toggle__search--checked} & { - border-radius: px2rem(2px) px2rem(2px) 0 0; - background-color: var(--md-default-bg-color); color: var(--md-default-fg-color); text-overflow: clip; + background-color: var(--md-default-bg-color); + border-radius: px2rem(2px) px2rem(2px) 0 0; // Icon and placeholder color in active state + .md-search__icon, @@ -307,13 +307,13 @@ $md-toggle__search--checked: // Icon &__icon { position: absolute; + z-index: 2; width: px2rem(24px); height: px2rem(24px); + cursor: pointer; transition: color 250ms, opacity 250ms; - cursor: pointer; - z-index: 2; // Hovered icon &:hover { @@ -368,10 +368,10 @@ $md-toggle__search--checked: top: px2rem(6px); right: px2rem(10px); transform: scale(0.75); + opacity: 0; transition: transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 150ms; - opacity: 0; pointer-events: none; // Adjust for right-to-left languages @@ -409,10 +409,10 @@ $md-toggle__search--checked: // Search output container &__output { position: absolute; - width: 100%; - border-radius: 0 0 px2rem(2px) px2rem(2px); - overflow: hidden; z-index: 1; + width: 100%; + overflow: hidden; + border-radius: 0 0 px2rem(2px) px2rem(2px); // [tablet portrait -]: Full-screen search bar @include break-to-device(tablet portrait) { @@ -423,8 +423,8 @@ $md-toggle__search--checked: // [tablet landscape +]: Header-embedded search @include break-from-device(tablet landscape) { top: px2rem(38px); - transition: opacity 400ms; opacity: 0; + transition: opacity 400ms; // Show search output in active state #{$md-toggle__search--checked} & { @@ -438,9 +438,9 @@ $md-toggle__search--checked: // Wrapper for scrolling on overflow &__scrollwrap { height: 100%; + overflow-y: auto; background-color: var(--md-default-bg-color); box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest); - overflow-y: auto; // Hack: reduce jitter backface-visibility: hidden; scroll-snap-type: y mandatory; @@ -497,10 +497,10 @@ $md-toggle__search--checked: // Search metadata &__meta { padding: 0 px2rem(16px); - background-color: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); font-size: ms(-1); line-height: px2rem(36px); + background-color: var(--md-default-fg-color--lightest); scroll-snap-align: start; // [tablet landscape +]: Increase left indent @@ -519,8 +519,8 @@ $md-toggle__search--checked: &__list { margin: 0; padding: 0; - border-top: px2rem(1px) solid var(--md-default-fg-color--lightest); list-style: none; + border-top: px2rem(1px) solid var(--md-default-fg-color--lightest); } // List item @@ -531,9 +531,9 @@ $md-toggle__search--checked: // Link inside item &__link { display: block; - transition: background 250ms; - outline: 0; overflow: hidden; + outline: 0; + transition: background 250ms; scroll-snap-align: start; // Focused or hovered link @@ -576,8 +576,8 @@ $md-toggle__search--checked: // Title .md-search-result__title { margin: px2rem(11px) 0; - font-size: ms(0); font-weight: 400; + font-size: ms(0); line-height: 1.4; } } @@ -611,8 +611,8 @@ $md-toggle__search--checked: // Title &__title { margin: 0.5em 0; - font-size: ms(-1); font-weight: 700; + font-size: ms(-1); line-height: 1.4; } @@ -623,11 +623,11 @@ $md-toggle__search--checked: display: -webkit-box; max-height: px2rem(33px); margin: 0.5em 0; + overflow: hidden; color: var(--md-default-fg-color--light); font-size: ms(-1); line-height: 1.4; text-overflow: ellipsis; - overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -648,8 +648,8 @@ $md-toggle__search--checked: // Search term highlighting em { - font-style: normal; font-weight: 700; + font-style: normal; text-decoration: underline; } } diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss index 263c51e46..a432aaadc 100644 --- a/src/assets/stylesheets/layout/_sidebar.scss +++ b/src/assets/stylesheets/layout/_sidebar.scss @@ -58,14 +58,14 @@ $md-toggle__drawer--checked: position: fixed; top: 0; left: px2rem(-242px); + z-index: 3; width: px2rem(242px); height: 100%; + background-color: var(--md-default-bg-color); transform: translateX(0); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms; - background-color: var(--md-default-bg-color); - z-index: 3; // Adjust for right-to-left languages [dir="rtl"] & { diff --git a/src/assets/stylesheets/layout/_source.scss b/src/assets/stylesheets/layout/_source.scss index 8345b4b38..5fed0828d 100644 --- a/src/assets/stylesheets/layout/_source.scss +++ b/src/assets/stylesheets/layout/_source.scss @@ -59,12 +59,12 @@ // Source container .md-source { display: block; - transition: opacity 250ms; font-size: px2rem(13px); line-height: 1.2; white-space: nowrap; // Hack: reduce jitter backface-visibility: hidden; + transition: opacity 250ms; // Adjust for right-to-left languages [dir="rtl"] & { @@ -116,9 +116,9 @@ display: inline-block; max-width: calc(100% - #{px2rem(24px)}); margin-left: px2rem(12px); + overflow: hidden; font-weight: 700; text-overflow: ellipsis; - overflow: hidden; vertical-align: middle; } @@ -126,11 +126,11 @@ &__facts { margin: 0; padding: 0; - font-size: px2rem(11px); + overflow: hidden; font-weight: 700; + font-size: px2rem(11px); list-style-type: none; opacity: 0.75; - overflow: hidden; // Show after the data was loaded [data-md-state="done"] & { diff --git a/src/assets/stylesheets/layout/_tabs.scss b/src/assets/stylesheets/layout/_tabs.scss index 4d790d22f..5e70b5c6d 100644 --- a/src/assets/stylesheets/layout/_tabs.scss +++ b/src/assets/stylesheets/layout/_tabs.scss @@ -27,10 +27,10 @@ // Tabs with outline .md-tabs { width: 100%; - transition: background 250ms; - background-color: var(--md-primary-fg-color); - color: var(--md-primary-bg-color); overflow: auto; + color: var(--md-primary-bg-color); + background-color: var(--md-primary-fg-color); + transition: background 250ms; // Omit transitions, in case JavaScript is not available .no-js & { @@ -52,8 +52,8 @@ margin: 0; margin-left: px2rem(4px); padding: 0; - list-style: none; white-space: nowrap; + list-style: none; // Adjust for right-to-left languages [dir="rtl"] & { @@ -75,11 +75,11 @@ &__link { display: block; margin-top: px2rem(16px); + font-size: px2rem(14px); + opacity: 0.7; transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 250ms; - font-size: px2rem(14px); - opacity: 0.7; // Omit transitions, in case JavaScript is not available .no-js & { @@ -109,11 +109,11 @@ // while scrolling down, while scrolling up seems to be okay .md-tabs__link { transform: translateY(50%); + opacity: 0; transition: color 250ms, transform 0ms 400ms, opacity 100ms; - opacity: 0; } } diff --git a/src/assets/stylesheets/palette.scss b/src/assets/stylesheets/palette.scss index c96c87ec6..eab9a3c3b 100644 --- a/src/assets/stylesheets/palette.scss +++ b/src/assets/stylesheets/palette.scss @@ -85,14 +85,14 @@ // Application header (stays always on top) .md-header { - background-color: var(--md-default-bg-color); color: var(--md-default-fg-color); + background-color: var(--md-default-bg-color); } // Hero teaser .md-hero { - background-color: var(--md-default-bg-color); color: var(--md-default-fg-color); + background-color: var(--md-default-bg-color); // Add a border if there are no tabs &--expand { @@ -105,8 +105,8 @@ // Repository containing source .md-nav__source { - background-color: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color); + background-color: var(--md-default-fg-color--lightest); } } @@ -134,8 +134,8 @@ // Site title in main navigation html & .md-nav--primary .md-nav__title[for="__drawer"] { - background-color: var(--md-default-bg-color); color: var(--md-default-fg-color); + background-color: var(--md-default-bg-color); } // Hero teaser @@ -149,9 +149,9 @@ // Tabs with outline .md-tabs { - border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest); - background-color: var(--md-default-bg-color); color: var(--md-default-fg-color); + background-color: var(--md-default-bg-color); + border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest); } } }