From 99127894300dc61f4ba212d539abca485a661035 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Wed, 6 May 2020 13:57:39 +0100 Subject: [PATCH] Bump origami-ci-tools from 1.3.12 to 2.0.0 (#82) * Bump origami-ci-tools from 1.3.12 to 2.0.0 Bumps [origami-ci-tools](https://github.com/Financial-Times/origami-ci-tools) from 1.3.12 to 2.0.0. - [Release notes](https://github.com/Financial-Times/origami-ci-tools/releases) - [Commits](https://github.com/Financial-Times/origami-ci-tools/compare/v1.3.12...v2.0.0) Signed-off-by: dependabot-preview[bot] * add stylelint config * fix stylelint issues * update to latest stylelint origami config * fix stylelint issues * fix obt verify issues * update to latest stylelint origami config * remove package-lock.json file * revert Sass linting updates we do not need * gitignore package-lock.json * revert Sass linting updates we do not need some more Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Jake Champion Co-authored-by: notlee --- .eslintrc.js | 5 + .gitignore | 1 + .stylelintrc.js | 3 + main.js | 1 - package-lock.json | 272 ------------------------------------- package.json | 4 +- src/scss/_base.scss | 94 ++++++------- src/scss/_mobile.scss | 121 +++++++++-------- src/scss/_orientation.scss | 18 +-- src/scss/_print.scss | 230 +++++++++++++++---------------- 10 files changed, 246 insertions(+), 503 deletions(-) create mode 100644 .eslintrc.js create mode 100644 .stylelintrc.js delete mode 100644 package-lock.json diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..7ef0009 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,5 @@ +"use strict"; + +module.exports = { + extends: "origami-component" +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index d841385..010cbc3 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ node_modules/ .DS_Store .bowerrc *.tmp +package-lock.json diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000..53330b2 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,3 @@ +module.exports = { + "extends": "stylelint-config-origami-component" +}; \ No newline at end of file diff --git a/main.js b/main.js index a5ce339..5c8a342 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,3 @@ -/*global require, module*/ const OCrossword = module.exports = require('./src/js/oCrossword'); const constructAll = function() { diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 101f676..0000000 --- a/package-lock.json +++ /dev/null @@ -1,272 +0,0 @@ -{ - "requires": true, - "lockfileVersion": 1, - "dependencies": { - "chownr": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", - "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", - "dev": true - }, - "cross-spawn": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz", - "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==", - "dev": true, - "requires": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - } - }, - "end-of-stream": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", - "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", - "dev": true, - "requires": { - "once": "^1.4.0" - } - }, - "esm": { - "version": "3.2.25", - "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", - "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", - "dev": true - }, - "execa": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.0.tgz", - "integrity": "sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==", - "dev": true, - "requires": { - "cross-spawn": "^7.0.0", - "get-stream": "^5.0.0", - "human-signals": "^1.1.1", - "is-stream": "^2.0.0", - "merge-stream": "^2.0.0", - "npm-run-path": "^4.0.0", - "onetime": "^5.1.0", - "signal-exit": "^3.0.2", - "strip-final-newline": "^2.0.0" - } - }, - "fs-minipass": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", - "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "dev": true, - "requires": { - "minipass": "^3.0.0" - } - }, - "get-stream": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz", - "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==", - "dev": true, - "requires": { - "pump": "^3.0.0" - } - }, - "human-signals": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", - "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==", - "dev": true - }, - "is-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz", - "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==", - "dev": true - }, - "isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true - }, - "merge-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", - "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", - "dev": true - }, - "mimic-fn": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", - "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", - "dev": true - }, - "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, - "minipass": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz", - "integrity": "sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==", - "dev": true, - "requires": { - "yallist": "^4.0.0" - } - }, - "minizlib": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.0.tgz", - "integrity": "sha512-EzTZN/fjSvifSX0SlqUERCN39o6T40AMarPbv0MrarSFtIITCBh7bi+dU8nxGFHuqs9jdIAeoYoKuQAAASsPPA==", - "dev": true, - "requires": { - "minipass": "^3.0.0", - "yallist": "^4.0.0" - } - }, - "mkdirp": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", - "dev": true - }, - "ncp": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz", - "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=", - "dev": true - }, - "node-fetch": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", - "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==", - "dev": true - }, - "npm-run-path": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", - "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", - "dev": true, - "requires": { - "path-key": "^3.0.0" - } - }, - "once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "dev": true, - "requires": { - "wrappy": "1" - } - }, - "onetime": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz", - "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==", - "dev": true, - "requires": { - "mimic-fn": "^2.1.0" - } - }, - "origami-ci-tools": { - "version": "1.3.12", - "resolved": "https://registry.npmjs.org/origami-ci-tools/-/origami-ci-tools-1.3.12.tgz", - "integrity": "sha512-PTJwkMwFKXKRIJLR7cu2uSjd+8a/G2/hMJ+5BBwaeZgSK5UpYh6eZlAhVq1doqqfs5hTs/caUplq49KY5TxzHw==", - "dev": true, - "requires": { - "esm": "^3.2.25", - "execa": "^4.0.0", - "minimist": "^1.2.0", - "ncp": "^2.0.0", - "node-fetch": "^2.6.0", - "semver": "^7.1.3", - "tar": "^6.0.1" - } - }, - "path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true - }, - "pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "dev": true, - "requires": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - }, - "semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true - }, - "shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "requires": { - "shebang-regex": "^3.0.0" - } - }, - "shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true - }, - "signal-exit": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", - "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==", - "dev": true - }, - "strip-final-newline": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", - "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==", - "dev": true - }, - "tar": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.1.tgz", - "integrity": "sha512-bKhKrrz2FJJj5s7wynxy/fyxpE0CmCjmOQ1KV4KkgXFWOgoIT/NbTMnB1n+LFNrNk0SSBVGGxcK5AGsyC+pW5Q==", - "dev": true, - "requires": { - "chownr": "^1.1.3", - "fs-minipass": "^2.0.0", - "minipass": "^3.0.0", - "minizlib": "^2.1.0", - "mkdirp": "^1.0.3", - "yallist": "^4.0.0" - } - }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - }, - "wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true - }, - "yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - } - } -} diff --git a/package.json b/package.json index 4692580..71af523 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,7 @@ { "devDependencies": { - "origami-ci-tools": "^1.3.12" + "eslint-config-origami-component": "^1.0.4", + "origami-ci-tools": "^2.0.0", + "stylelint-config-origami-component": "^1.0.2" } } diff --git a/src/scss/_base.scss b/src/scss/_base.scss index b58c0b5..c6b1f0f 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -3,11 +3,11 @@ /// @link http://registry.origami.ft.com/components/o-crossword //// -// sass-lint:disable no-important, no-qualifying-elements, mixins-before-declarations, no-duplicate-properties +// stylelint-disable declaration-block-no-duplicate-properties, declaration-no-important, selector-no-qualifying-type, max-nesting-depth @mixin oCrosswordType { font-family: monospace; min-width: 1.5em; - min-width: 2ch; + min-width: 2ch; max-width: 1.5em; max-width: 2ch; height: 1.5em; @@ -69,12 +69,12 @@ .visually_hidden { display: inline-block; margin: -1px !important; - overflow: hidden; - padding: 0; - width: 1px; - height: 1px; - min-height: 0; - min-width: 0; + overflow: hidden; + padding: 0; + width: 1px; + height: 1px; + min-height: 0; + min-width: 0; } .o-crossword-clue-displayer { @@ -99,16 +99,17 @@ padding: 0; width: 100%; - .sr-direction, + .sr-direction, + .sr-instruction, .sr-answer { // display: none; display: inline-block; margin: -1px; - overflow: hidden; - padding: 0; - width: 1px; - height: 1px; + overflow: hidden; + padding: 0; + width: 1px; + height: 1px; } } @@ -172,10 +173,10 @@ box-sizing: border-box; background: rgba(0, 0, 0, 0.2); font-size: 1.5rem; - text-transform: inherit; - max-width: none !important; - border-radius: 0; - padding: 0; + text-transform: inherit; + max-width: none !important; + border-radius: 0; + padding: 0; } @include oGridRespondTo(M) { @@ -185,17 +186,17 @@ } table { + @include oColorsFor(o-crossword-cell, background); border-collapse: collapse; border-spacing: 0; font-size: 1.5rem; margin: 0 auto; - @include oColorsFor(o-crossword-cell, background); td { - border: 1px solid; - padding: 0; @include oColorsFor(o-crossword-border, border); @include oCrosswordType; + border: 1px solid; + padding: 0; position: relative; overflow: hidden; @@ -214,6 +215,10 @@ } } + text-align: center; + vertical-align: middle; + position: relative; + &[data-o-crossword-highlighted="across"] { background-color: rgba(158, 47, 80, 0.5); } @@ -222,10 +227,6 @@ background-color: rgba(158, 47, 80, 0.5); } - text-align: center; - vertical-align: middle; - position: relative; - &[data-o-crossword-number]:before { content: attr(data-o-crossword-number); font-size: 0.5em; @@ -234,7 +235,7 @@ left: 0; letter-spacing: 0; line-height: 1em; - background: rgba(255, 255, 255, 0.8); + background: rgba(255, 255, 255, 0.8); } } } @@ -247,8 +248,8 @@ @include oGridRespondTo(M) { margin-top: 0; - width: 44em; - float: left; + width: 44em; + float: left; } } @@ -266,7 +267,7 @@ li { line-height: 1.5em; padding-bottom: 0.5em; - flex-grow: 1; + flex-grow: 1; cursor: pointer; display: block; @@ -274,16 +275,17 @@ @include oColorsFor(o-crossword-clue-highlight, text); } - .sr-direction, + .sr-direction, + .sr-instruction, .sr-answer { // display: none; display: inline-block; margin: -1px; - overflow: hidden; - padding: 0; - width: 1px; - height: 1px; + overflow: hidden; + padding: 0; + width: 1px; + height: 1px; } &:focus { @@ -328,11 +330,11 @@ .o-crossword-clues-down { padding-left: 0.5em; } - + .o-crossword-clues-across { padding-right: 0.5em; } - + .o-crossword-clues-down li:first-child, .o-crossword-clues-across li:first-child { margin-top: 1em; @@ -345,18 +347,18 @@ } .o-crossword-clues-down:before { - content: 'Down'; + content: 'Down'; } .o-crossword-clues-across:before { - content: 'Across'; + content: 'Across'; } @include oGridRespondTo(M) { position: relative; opacity: 1; height: auto; - margin-left: 0.9em !important; + margin-left: 0.9em !important; box-shadow: none; border: 0; transition: none; @@ -406,7 +408,7 @@ .o-crossword-clues-single-column { display: block; - + li span { font-size: 1.5em; } @@ -427,7 +429,7 @@ .o-crossword-clues-across:before { font-size: 2em; } - + .o-crossword-user-answer { margin-top: 0.5em; } @@ -436,27 +438,27 @@ li span { font-size: 1em; } - + ul li { margin-top: none; } - + .o-crossword-clues-down:before, .o-crossword-clues-across:before { font-size: 1.2em; } } - } + } - .o-crossword-clues-two-columns { + .o-crossword-clues-two-columns { display: flex; } - + @include oGridRespondTo(M) { .o-crossword-clues-single-column, .o-crossword-clues-two-columns { display: flex; } - } + } } diff --git a/src/scss/_mobile.scss b/src/scss/_mobile.scss index a1bd06d..3fb4b33 100644 --- a/src/scss/_mobile.scss +++ b/src/scss/_mobile.scss @@ -1,62 +1,63 @@ -// sass-lint:disable no-vendor-prefixes +// stylelint-disable selector-no-qualifying-type @mixin _oCrosswordMobile () { - @media screen and (max-width: $break-phone) { - .o-crossword table, - .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { - font-size: 1.2rem; - } - - .o-crossword table td { - line-height: 1; - } - - .o-crossword .o-crossword-clues-wrapper { - display: block; - width: 100%; - overflow: auto; - - &.visually_hidden { - display: inline-block; - margin: -1px; - overflow: hidden; - padding: 0; - width: 1px; - height: 1px; - } - } - - .o-crossword .o-crossword-clue-displayer { - height: 3.6em; - font-size: 0.85rem; - padding: 0 0.5em 1em; - - span { - padding: 0.5em 10%; - } - - &.visually_hidden { - visibility: hidden; - } - } - - .o-crossword .o-crossword-clue-navigation { - display: initial; - } - - .o-crossword .o-crossword-clues.visually_hidden ul li { - &.featured { - display: block; - visibility: hidden; - - .o-crossword-user-answer { - position: fixed; - -webkit-overflow-scrolling: touch; - visibility: visible; - left: 0; - z-index: 3; - margin: 0 10%; - } - } - } - } + @media screen and (max-width: $break-phone) { + .o-crossword table, + + .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { + font-size: 1.2rem; + } + + .o-crossword table td { + line-height: 1; + } + + .o-crossword .o-crossword-clues-wrapper { + display: block; + width: 100%; + overflow: auto; + + &.visually_hidden { + display: inline-block; + margin: -1px; + overflow: hidden; + padding: 0; + width: 1px; + height: 1px; + } + } + + .o-crossword .o-crossword-clue-displayer { + height: 3.6em; + font-size: 0.85rem; + padding: 0 0.5em 1em; + + span { + padding: 0.5em 10%; + } + + &.visually_hidden { + visibility: hidden; + } + } + + .o-crossword .o-crossword-clue-navigation { + display: initial; + } + + .o-crossword .o-crossword-clues.visually_hidden ul li { + &.featured { + display: block; + visibility: hidden; + + .o-crossword-user-answer { + position: fixed; + -webkit-overflow-scrolling: touch; + visibility: visible; + left: 0; + z-index: 3; + margin: 0 10%; + } + } + } + } } diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss index 7474681..03acf21 100644 --- a/src/scss/_orientation.scss +++ b/src/scss/_orientation.scss @@ -1,14 +1,14 @@ -// sass-lint:disable no-ids +// stylelint-disable selector-class-pattern, selector-max-id //below forces portrait mode on mobile phones //it uses "min-aspect-ratio" to detect landscape, //since keyboard popping will make "orientation" wrong in some cases @mixin _oCrosswordOrientation () { - @media screen and (min-aspect-ratio: 13/9) and (max-width: $break-phone) { - body:not(.iOS) #main-container { - transform: rotate(-90deg); - width: 100% /* screen width */ ; - height: 100% /* screen height */ ; - overflow: scroll; - } - } + @media screen and (min-aspect-ratio: 13/9) and (max-width: $break-phone) { + body:not(.iOS) #main-container { + transform: rotate(-90deg); + width: 100% /* screen width */ ; + height: 100% /* screen height */ ; + overflow: scroll; + } + } } diff --git a/src/scss/_print.scss b/src/scss/_print.scss index d70471e..b07ac5b 100644 --- a/src/scss/_print.scss +++ b/src/scss/_print.scss @@ -1,145 +1,147 @@ -// sass-lint:disable no-qualifying-elements, no-important, no-vendor-prefixes +// stylelint-disable property-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, max-nesting-depth @mixin _oCrosswordPrint () { @media print { - @page { - margin: 1cm 0.5cm; - } - body { - -webkit-print-color-adjust: exact; - height: 100%; - - & >div { - height: auto; - page-break-after: avoid; - position: relative; - width: 100%; - - &:before { - content: attr(data-o-crossword-title); - display: block; - text-align: center; - margin: 0.5cm 0 0; - text-transform: capitalize; - } + @page { + margin: 1cm 0.5cm; } - } + body { + -webkit-print-color-adjust: exact; + height: 100%; - .o-crossword { - padding: 0 !important; - display: block; - background-color: white !important; - } + & >div { + height: auto; + page-break-after: avoid; + position: relative; + width: 100%; - .o-crossword table { - margin-top: 0 !important; - } + &:before { + content: attr(data-o-crossword-title); + display: block; + text-align: center; + margin: 0.5cm 0 0; + text-transform: capitalize; + } + } + } - .o-crossword table td { - min-width: 0 !important; - width: 25px !important; - height: 25px !important; - } + .o-crossword { + padding: 0 !important; + display: block; + background-color: white !important; + } - .o-crossword table td[data-o-crossword-highlighted="across"], - .o-crossword table td[data-o-crossword-highlighted="down"] { - background-color: transparent !important; - } + .o-crossword table { + margin-top: 0 !important; + } - .o-crossword-clue-displayer { - display: none !important; - } + .o-crossword table td { + min-width: 0 !important; + width: 25px !important; + height: 25px !important; + } - .o-crossword table td[data-o-crossword-number]:before { - font-size: 8px !important; - background: transparent !important; - } + .o-crossword table td[data-o-crossword-highlighted="across"], + .o-crossword table td[data-o-crossword-highlighted="down"] { + background-color: transparent !important; + } - .o-crossword .o-crossword-grid-wrapper { - margin: 1cm auto 0; - display: block; - } + .o-crossword-clue-displayer { + display: none !important; + } - .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { - background: transparent !important; - } + .o-crossword table td[data-o-crossword-number]:before { + font-size: 8px !important; + background: transparent !important; + } - .o-crossword .o-crossword-mobile-toggle, - .o-crossword .o-crossword-reset { - display: none !important; - } + .o-crossword .o-crossword-grid-wrapper { + margin: 1cm auto 0; + display: block; + } - .o-crossword .o-crossword-clues, - .o-crossword .o-crossword-clues ul { - padding-bottom: 0 !important; - } - - .o-crossword .o-crossword-clues, - .o-crossword .o-crossword-clues.visually_hidden { - width: 100% !important; - max-width: none !important; - display: block !important; - height: auto !important; - } + .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { + background: transparent !important; + } - .o-crossword .o-crossword-clues li.has-hover, - .o-crossword .o-crossword-clues li.has-hover span, - .o-crossword .o-crossword-clues ul li.has-hover, - .o-crossword .o-crossword-clues ul li.has-hover span { - color: black !important; - } + .o-crossword .o-crossword-mobile-toggle, + + .o-crossword .o-crossword-reset { + display: none !important; + } - .o-crossword .o-crossword-clues li, - .o-crossword .o-crossword-clues li span, - .o-crossword .o-crossword-clues ul li, - .o-crossword .o-crossword-clues ul li span { - line-height: 1.4 !important; - font-size: 14px !important; - } + .o-crossword .o-crossword-clues, + + .o-crossword .o-crossword-clues ul { + padding-bottom: 0 !important; + } + + .o-crossword .o-crossword-clues, + .o-crossword .o-crossword-clues.visually_hidden { + width: 100% !important; + max-width: none !important; + display: block !important; + height: auto !important; + } - .o-crossword .o-crossword-clues ul li .o-crossword-user-answer, - .o-crossword .o-crossword-clues ul .o-crossword-user-answer { - display: none !important; - } + .o-crossword .o-crossword-clues li.has-hover, + .o-crossword .o-crossword-clues li.has-hover span, + .o-crossword .o-crossword-clues ul li.has-hover, + .o-crossword .o-crossword-clues ul li.has-hover span { + color: black !important; + } - .o-crossword:not([data-o-crossword-force-compact]) { - display: block; + .o-crossword .o-crossword-clues li, + .o-crossword .o-crossword-clues li span, + .o-crossword .o-crossword-clues ul li, + .o-crossword .o-crossword-clues ul li span { + line-height: 1.4 !important; + font-size: 14px !important; + } - .o-crossword-clues-wrapper { - display: block; - width: 100%; + .o-crossword .o-crossword-clues ul li .o-crossword-user-answer, + .o-crossword .o-crossword-clues ul .o-crossword-user-answer { + display: none !important; } - ul { + .o-crossword:not([data-o-crossword-force-compact]) { display: block; - >li { - padding: 0 !important; + .o-crossword-clues-wrapper { + display: block; + width: 100%; } - .o-crossword-clues-across, - .o-crossword-clues-down { - display: inline-block; - float: left; - width: 48%; - margin-top: 1cm; - vertical-align: top !important; + ul { + display: block; - &:before { - font-size: 28px !important; - display: block; - padding: 0; - margin-bottom: 10px !important; + >li { + padding: 0 !important; } - } - .o-crossword-clues-down { - float: right; - } + .o-crossword-clues-across, + .o-crossword-clues-down { + display: inline-block; + float: left; + width: 48%; + margin-top: 1cm; + vertical-align: top !important; + + &:before { + font-size: 28px !important; + display: block; + padding: 0; + margin-bottom: 10px !important; + } + } + + .o-crossword-clues-down { + float: right; + } + } } - } - .o-crossword-reset { - display: none; - } + .o-crossword-reset { + display: none; + } } }