diff --git a/package-lock.json b/package-lock.json index d3aa9c31c..5485534ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@30-seconds/integration-tools": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@30-seconds/integration-tools/-/integration-tools-1.3.2.tgz", - "integrity": "sha512-EmqyRc1L/o+UGpC2eJ7jrfVcHEvIVLwbCHEyFfzqxdlbvY/snIXzUFp93U610COVlZygSIe+pKf06PAYO8ugHw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@30-seconds/integration-tools/-/integration-tools-2.0.0.tgz", + "integrity": "sha512-H8zGBo5ZFwa9S0juRFK8KWlnlA4GZijVrRWdiQeQ/UofernNnUg8Yck1YSNwoWl/vCIKEGlmCqB+sVQz6Jx5yA==", "dev": true, "requires": { "@babel/core": "^7.7.4", @@ -29,22 +29,23 @@ } }, "@babel/core": { - "version": "7.8.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.7.tgz", - "integrity": "sha512-rBlqF3Yko9cynC5CCFy6+K/w2N+Sq/ff2BPy+Krp7rHlABIr5epbA7OxVeKoMHB39LZOp1UY5SuLjy6uWi35yA==", + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz", + "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==", "dev": true, "requires": { "@babel/code-frame": "^7.8.3", - "@babel/generator": "^7.8.7", - "@babel/helpers": "^7.8.4", - "@babel/parser": "^7.8.7", + "@babel/generator": "^7.9.0", + "@babel/helper-module-transforms": "^7.9.0", + "@babel/helpers": "^7.9.0", + "@babel/parser": "^7.9.0", "@babel/template": "^7.8.6", - "@babel/traverse": "^7.8.6", - "@babel/types": "^7.8.7", + "@babel/traverse": "^7.9.0", + "@babel/types": "^7.9.0", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.1", - "json5": "^2.1.0", + "json5": "^2.1.2", "lodash": "^4.17.13", "resolve": "^1.3.2", "semver": "^5.4.1", @@ -52,26 +53,26 @@ } }, "@babel/generator": { - "version": "7.8.7", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.7.tgz", - "integrity": "sha512-DQwjiKJqH4C3qGiyQCAExJHoZssn49JTMJgZ8SANGgVFdkupcUhLOdkAeoC6kmHZCPfoDG5M0b6cFlSN5wW7Ew==", + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz", + "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==", "dev": true, "requires": { - "@babel/types": "^7.8.7", + "@babel/types": "^7.9.5", "jsesc": "^2.5.1", "lodash": "^4.17.13", "source-map": "^0.5.0" } }, "@babel/helper-function-name": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz", - "integrity": "sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==", + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz", + "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==", "dev": true, "requires": { "@babel/helper-get-function-arity": "^7.8.3", "@babel/template": "^7.8.3", - "@babel/types": "^7.8.3" + "@babel/types": "^7.9.5" } }, "@babel/helper-get-function-arity": { @@ -83,6 +84,70 @@ "@babel/types": "^7.8.3" } }, + "@babel/helper-member-expression-to-functions": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz", + "integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/helper-module-imports": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz", + "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/helper-module-transforms": { + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz", + "integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.8.3", + "@babel/helper-replace-supers": "^7.8.6", + "@babel/helper-simple-access": "^7.8.3", + "@babel/helper-split-export-declaration": "^7.8.3", + "@babel/template": "^7.8.6", + "@babel/types": "^7.9.0", + "lodash": "^4.17.13" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz", + "integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==", + "dev": true, + "requires": { + "@babel/types": "^7.8.3" + } + }, + "@babel/helper-replace-supers": { + "version": "7.8.6", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz", + "integrity": "sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.8.3", + "@babel/helper-optimise-call-expression": "^7.8.3", + "@babel/traverse": "^7.8.6", + "@babel/types": "^7.8.6" + } + }, + "@babel/helper-simple-access": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz", + "integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==", + "dev": true, + "requires": { + "@babel/template": "^7.8.3", + "@babel/types": "^7.8.3" + } + }, "@babel/helper-split-export-declaration": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz", @@ -92,32 +157,38 @@ "@babel/types": "^7.8.3" } }, + "@babel/helper-validator-identifier": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz", + "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==", + "dev": true + }, "@babel/helpers": { - "version": "7.8.4", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.4.tgz", - "integrity": "sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==", + "version": "7.9.2", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.2.tgz", + "integrity": "sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==", "dev": true, "requires": { "@babel/template": "^7.8.3", - "@babel/traverse": "^7.8.4", - "@babel/types": "^7.8.3" + "@babel/traverse": "^7.9.0", + "@babel/types": "^7.9.0" } }, "@babel/highlight": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz", - "integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==", + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz", + "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==", "dev": true, "requires": { + "@babel/helper-validator-identifier": "^7.9.0", "chalk": "^2.0.0", - "esutils": "^2.0.2", "js-tokens": "^4.0.0" } }, "@babel/parser": { - "version": "7.8.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.7.tgz", - "integrity": "sha512-9JWls8WilDXFGxs0phaXAZgpxTZhSk/yOYH2hTHC0X1yC7Z78IJfvR1vJ+rmJKq3I35td2XzXzN6ZLYlna+r/A==", + "version": "7.9.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz", + "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==", "dev": true }, "@babel/template": { @@ -132,29 +203,29 @@ } }, "@babel/traverse": { - "version": "7.8.6", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.6.tgz", - "integrity": "sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==", + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz", + "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==", "dev": true, "requires": { "@babel/code-frame": "^7.8.3", - "@babel/generator": "^7.8.6", - "@babel/helper-function-name": "^7.8.3", + "@babel/generator": "^7.9.5", + "@babel/helper-function-name": "^7.9.5", "@babel/helper-split-export-declaration": "^7.8.3", - "@babel/parser": "^7.8.6", - "@babel/types": "^7.8.6", + "@babel/parser": "^7.9.0", + "@babel/types": "^7.9.5", "debug": "^4.1.0", "globals": "^11.1.0", "lodash": "^4.17.13" } }, "@babel/types": { - "version": "7.8.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.7.tgz", - "integrity": "sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==", + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz", + "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==", "dev": true, "requires": { - "esutils": "^2.0.2", + "@babel/helper-validator-identifier": "^7.9.5", "lodash": "^4.17.13", "to-fast-properties": "^2.0.0" } @@ -172,9 +243,9 @@ "dev": true }, "ajv": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz", - "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==", + "version": "6.12.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz", + "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -334,9 +405,9 @@ } }, "caniuse-db": { - "version": "1.0.30001033", - "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001033.tgz", - "integrity": "sha512-2ZReq+OHqHhsIQSiv8OVNhQ6Ht9eYJpwblZydHV8nI44Od6J5YUl3J9Wxvjry/v969jCHH5fR9+C6FwJ41XbOQ==", + "version": "1.0.30001043", + "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001043.tgz", + "integrity": "sha512-Dipx6NfbkUVEil8AUo/vt8oa9AF2JnR3mNpKV5YaB0a/v4nvDO8pzCuVdPJqr15FmSY6dBobciTDNLzbdVpVTA==", "dev": true }, "caseless": { @@ -372,9 +443,9 @@ } }, "cli-width": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz", - "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", + "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", "dev": true }, "cliui": { @@ -574,12 +645,6 @@ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", "dev": true }, - "esutils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "dev": true - }, "extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", @@ -887,9 +952,9 @@ } }, "in-publish": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz", - "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz", + "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==", "dev": true }, "indent-string": { @@ -1103,12 +1168,12 @@ "dev": true }, "json5": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz", - "integrity": "sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz", + "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", "dev": true, "requires": { - "minimist": "^1.2.0" + "minimist": "^1.2.5" } }, "jsonfile": { @@ -1241,26 +1306,18 @@ } }, "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, "mkdirp": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", - "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", "dev": true, "requires": { - "minimist": "0.0.8" - }, - "dependencies": { - "minimist": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true - } + "minimist": "^1.2.5" } }, "ms": { @@ -1557,9 +1614,9 @@ "dev": true }, "psl": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz", - "integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", + "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==", "dev": true }, "punycode": { @@ -1670,9 +1727,9 @@ "dev": true }, "resolve": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz", - "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==", + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.16.1.tgz", + "integrity": "sha512-rmAglCSqWWMrrBv/XM6sW0NuRFiKViw/W4d9EbC4pt+49H8JwHy+mcGmALTEg504AUDcLTvb1T2q3E9AnmY+ig==", "dev": true, "requires": { "path-parse": "^1.0.6" @@ -1707,9 +1764,9 @@ } }, "rxjs": { - "version": "6.5.4", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", - "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==", + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz", + "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==", "dev": true, "requires": { "tslib": "^1.9.0" @@ -1773,9 +1830,9 @@ "dev": true }, "signal-exit": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", - "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", + "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==", "dev": true }, "source-map": { diff --git a/package.json b/package.json index dc288187e..0b984fb82 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,6 @@ "singleQuote": true }, "devDependencies": { - "@30-seconds/integration-tools": "^1.3.2" + "@30-seconds/integration-tools": "^2.0.0" } } diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json deleted file mode 100644 index 401a09014..000000000 --- a/snippet_data/snippetList.json +++ /dev/null @@ -1,849 +0,0 @@ -{ - "data": [ - { - "id": "border-with-top-triangle", - "type": "snippetListing", - "title": "Border with top triangle", - "attributes": { - "text": "Creates a text container with a triangle at the top.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "39843a0593e270dacca651f07fe537cb1479218a5be52b6fad3982365c898986" - } - }, - { - "id": "bouncing-loader", - "type": "snippetListing", - "title": "Bouncing loader", - "attributes": { - "text": "Creates a bouncing loader animation.\n\n", - "tags": [ - "animation", - "intermediate" - ] - }, - "meta": { - "hash": "8175388f6fdc96c53c49691c1831a147944955fc1d9a806adb790e3d242d5a86" - } - }, - { - "id": "box-sizing-reset", - "type": "snippetListing", - "title": "Box-sizing reset", - "attributes": { - "text": "Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.\n\n", - "tags": [ - "layout", - "beginner" - ] - }, - "meta": { - "hash": "d5719ca8b62a21149aa2e34f2d45e76045e2fe5eae5b14093333e9ca15b4a97c" - } - }, - { - "id": "button-border-animation", - "type": "snippetListing", - "title": "Button border animation", - "attributes": { - "text": "Creates a border animation on hover.\n\n", - "tags": [ - "animation", - "intermediate" - ] - }, - "meta": { - "hash": "5454e3c5fb06cc5b7bc36d37ef41be684766aae122214cc34023e225c76fa454" - } - }, - { - "id": "circle", - "type": "snippetListing", - "title": "Circle", - "attributes": { - "text": "Creates a circle shape with pure CSS.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "60ac5a7cb7e2c24c936b267ac74d649052c9aaa80810278720b5b5a14fee1562" - } - }, - { - "id": "clearfix", - "type": "snippetListing", - "title": "Clearfix", - "attributes": { - "text": "Ensures that an element self-clears its children.\n\n", - "tags": [ - "layout", - "beginner" - ] - }, - "meta": { - "hash": "8a1beb75b1efe89f11f1bac944a836feac26604d5bc06bdb026dd0bd6650ad95" - } - }, - { - "id": "constant-width-to-height-ratio", - "type": "snippetListing", - "title": "Constant width to height ratio", - "attributes": { - "text": "Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e. its width to height ratio remains constant).\n\n", - "tags": [ - "layout" - ] - }, - "meta": { - "hash": "d040b9f24aa4b6a7c3359c5a6407850aac0910796334192adad4cfb435c4ec26" - } - }, - { - "id": "counter", - "type": "snippetListing", - "title": "Counter", - "attributes": { - "text": "Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.\n\n", - "tags": [ - "visual", - "advanced" - ] - }, - "meta": { - "hash": "6ba5182f3edbbd20e34ac9a7c92608eca4afcc855aa993574c0bcc3e21df8487" - } - }, - { - "id": "custom-scrollbar", - "type": "snippetListing", - "title": "Custom scrollbar", - "attributes": { - "text": "Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.\n\n", - "tags": [ - "visual", - "advanced" - ] - }, - "meta": { - "hash": "e5544c894ee3cd4ce3352d10331e2f321c6d30b4a0a667434286c6d4951c3b0a" - } - }, - { - "id": "custom-text-selection", - "type": "snippetListing", - "title": "Custom text selection", - "attributes": { - "text": "Changes the styling of text selection.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "1c29d55847263d12852dfd752653287237c885cadb369ee3db28701029f8bcc2" - } - }, - { - "id": "disable-selection", - "type": "snippetListing", - "title": "Disable selection", - "attributes": { - "text": "Makes the content unselectable.\n\n", - "tags": [ - "interactivity", - "beginner" - ] - }, - "meta": { - "hash": "e12b82431230f27651567c0c23dd5f26eca9e4ded24bb6f3175432ab66256096" - } - }, - { - "id": "display-table-centering", - "type": "snippetListing", - "title": "Display table centering", - "attributes": { - "text": "Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`).\n\n", - "tags": [ - "layout", - "intermediate" - ] - }, - "meta": { - "hash": "83c7806b0be2e50ca34f313912f9cb90682852790e6d0105a635f781212fa5b1" - } - }, - { - "id": "donut-spinner", - "type": "snippetListing", - "title": "Donut spinner", - "attributes": { - "text": "Creates a donut spinner that can be used to indicate the loading of content.\n\n", - "tags": [ - "animation", - "intermediate" - ] - }, - "meta": { - "hash": "e9d886bf0718a408e719f978370e4e32e62222322c5641fb62be2968f6f95884" - } - }, - { - "id": "drop-cap", - "type": "snippetListing", - "title": "Drop cap", - "attributes": { - "text": "Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "e7859bc139713ffe59a05904f6175e9578ad111ebe3405d58599846c44801606" - } - }, - { - "id": "dynamic-shadow", - "type": "snippetListing", - "title": "Dynamic shadow", - "attributes": { - "text": "Creates a shadow similar to `box-shadow` but based on the colors of the element itself.\n\n", - "tags": [ - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "d22e3c4c20c8c3effbb25e59de03f1153f1d7808b695bef253ea90d657d59012" - } - }, - { - "id": "easing-variables", - "type": "snippetListing", - "title": "Easing variables", - "attributes": { - "text": "Variables that can be reused for `transition-timing-function` properties, more powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.\n\n", - "tags": [ - "animation", - "beginner" - ] - }, - "meta": { - "hash": "107cca03431b28d491f871d2267992a7da5b9f62765325bf5f57236574968ac2" - } - }, - { - "id": "etched-text", - "type": "snippetListing", - "title": "Etched text", - "attributes": { - "text": "Creates an effect where text appears to be \"etched\" or engraved into the background.\n\n", - "tags": [ - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "68da5c2e7399979db3aeb1022d13b0490fc71d55d068597544954706c7027bef" - } - }, - { - "id": "evenly-distributed-children", - "type": "snippetListing", - "title": "Evenly distributed children", - "attributes": { - "text": "Evenly distributes child elements within a parent element.\n\n", - "tags": [ - "layout", - "intermediate" - ] - }, - "meta": { - "hash": "5b4505f5052c203bbf0f79410af09801487250b65591fb5113da40b27c6cfb08" - } - }, - { - "id": "fit-image-in-container", - "type": "snippetListing", - "title": "Fit image in container", - "attributes": { - "text": "Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property.\n\n", - "tags": [ - "layout", - "visual" - ] - }, - "meta": { - "hash": "5d09d5e54b7436f047db61223cff15dce2f17f6cffe5e71e0f9061337de3068e" - } - }, - { - "id": "flexbox-centering", - "type": "snippetListing", - "title": "Flexbox centering", - "attributes": { - "text": "Horizontally and vertically centers a child element within a parent element using `flexbox`.\n\n", - "tags": [ - "layout", - "beginner" - ] - }, - "meta": { - "hash": "919f11ed7b3bb10d80c0379103cbd1af620ee93ba760edc57c379063131c474f" - } - }, - { - "id": "focus-within", - "type": "snippetListing", - "title": "Focus Within", - "attributes": { - "text": "Changes the appearance of a form if any of its children are focused.\n\n", - "tags": [ - "visual", - "interactivity", - "intermediate" - ] - }, - "meta": { - "hash": "9fa1ed419618b640c286644ceae4235101b0f01014c7d82f944a76c9bbc6e39c" - } - }, - { - "id": "fullscreen", - "type": "snippetListing", - "title": "Fullscreen", - "attributes": { - "text": "The `:fullscreen` CSS pseudo-element represents an element that's displayed when the browser is in fullscreen mode.\n\n", - "tags": [ - "visual", - "advanced" - ] - }, - "meta": { - "hash": "a58ee2656271bb14a6a51e91517ca08f5c6ee86f9f3286e977507af49363cd86" - } - }, - { - "id": "ghost-trick", - "type": "snippetListing", - "title": "Ghost trick", - "attributes": { - "text": "Vertically centers an element in another.\n\n", - "tags": [ - "layout", - "intermediate" - ] - }, - "meta": { - "hash": "0515f03b1505eafa21e0d0d7377facbe4aaa9159996906dd4ed2857ee137073a" - } - }, - { - "id": "gradient-border", - "type": "snippetListing", - "title": "Gradient border", - "attributes": { - "text": "Creates a gradient border.\n\n", - "tags": [ - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "0a79c723c57eb1266d973fc9eaffab2ee54a51e54cf64c876a8e31b4e587f57d" - } - }, - { - "id": "gradient-text", - "type": "snippetListing", - "title": "Gradient text", - "attributes": { - "text": "Gives text a gradient color.\n\n", - "tags": [ - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "9620da48fb82b48a7c6b681854707b622a18c158f2db88c816e3b9c0d9b04523" - } - }, - { - "id": "grid-centering", - "type": "snippetListing", - "title": "Grid centering", - "attributes": { - "text": "Horizontally and vertically centers a child element within a parent element using `grid`.\n\n", - "tags": [ - "layout", - "beginner" - ] - }, - "meta": { - "hash": "c6ce214d8597cc068355174c86c7c3e8be586c68fb7fb18666d644b4458c0a22" - } - }, - { - "id": "hairline-border", - "type": "snippetListing", - "title": "Hairline border", - "attributes": { - "text": "Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.\n\n", - "tags": [ - "visual", - "advanced" - ] - }, - "meta": { - "hash": "3d33020a7ae2dc94aa6cf41803897323068158faff9133ce5d60cb927d647a9f" - } - }, - { - "id": "hamburger-button", - "type": "snippetListing", - "title": "Hamburger Button", - "attributes": { - "text": "Displays a hamburger menu which transitions to a cross on hover.\n\n", - "tags": [ - "interactivity", - "beginner" - ] - }, - "meta": { - "hash": "06f323835f89d7e055e932ee67c23a9c5d2edeb7e62c1029c0528238e17a08f8" - } - }, - { - "id": "height-transition", - "type": "snippetListing", - "title": "Height transition", - "attributes": { - "text": "Transitions an element's height from `0` to `auto` when its height is unknown.\n\n", - "tags": [ - "animation", - "intermediate" - ] - }, - "meta": { - "hash": "266740a9a3a65bcfede78868170a741359409690921ef9b57f73593b8b6d6e3f" - } - }, - { - "id": "hover-shadow-box-animation", - "type": "snippetListing", - "title": "Hover shadow box animation", - "attributes": { - "text": "Creates a shadow box around the text when it is hovered.\n\n", - "tags": [ - "animation", - "intermediate" - ] - }, - "meta": { - "hash": "b66a2a4c4c80fd0c64aaa15a9139e1273d6854fd75f0550d2625578792df828f" - } - }, - { - "id": "hover-underline-animation", - "type": "snippetListing", - "title": "Hover underline animation", - "attributes": { - "text": "Creates an animated underline effect when the text is hovered over.\n\n", - "tags": [ - "animation", - "advanced" - ] - }, - "meta": { - "hash": "b67109fcb1f945f671c62fc67c3bff9f32290bbfb0ef739995f1a94fd952dfd5" - } - }, - { - "id": "last-item-with-remaining-available-height", - "type": "snippetListing", - "title": "Last item with remaining available height", - "attributes": { - "text": "Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.\n\n", - "tags": [ - "layout", - "intermediate" - ] - }, - "meta": { - "hash": "65a60a1552f0cc9cc1fbb1cfb30bb1a6a0e35f7313cb3d209c540a4483333370" - } - }, - { - "id": "lobotomizedOwlSelector", - "type": "snippetListing", - "title": "Lobotomized Owl Selector", - "attributes": { - "text": "Sets an automatically inherited margin for all elements that follow other elements in the document.\n\n", - "tags": [ - "layout", - "beginner" - ] - }, - "meta": { - "hash": "bf9ee261ea338f5c07c4df24ac6c976d9d0584de01552b0955a205628b947e53" - } - }, - { - "id": "masonry-layout", - "type": "snippetListing", - "title": "Masonry Layout", - "attributes": { - "text": "Creates a vertical masonry layout using HTML and CSS.\n\n", - "tags": [ - "layout", - "advanced" - ] - }, - "meta": { - "hash": "4bff5480f38e265090bed5d84cc8e7dc6d054570f65a168f1ccf381b19ffef48" - } - }, - { - "id": "mouse-cursor-gradient-tracking", - "type": "snippetListing", - "title": "Mouse cursor gradient tracking", - "attributes": { - "text": "A hover effect where the gradient follows the mouse cursor.\n\n", - "tags": [ - "visual", - "interactivity", - "advanced" - ] - }, - "meta": { - "hash": "159c33e454099f02ef387c5392aec044a5a6d67b0a56cb391d2a7a6f59e1f6d2" - } - }, - { - "id": "navigation-list-item-hover-and-focus-effect", - "type": "snippetListing", - "title": "Navigation list item hover and focus effect", - "attributes": { - "text": "Fancy hover and focus effect at navigation items using transform CSS property.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "081120d282bf5041a82e0fd82d1b90afb28591eaaf6c2dfb9194d23db5b8d3a4" - } - }, - { - "id": "not-selector", - "type": "snippetListing", - "title": ":not selector", - "attributes": { - "text": "The `:not` pseudo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "847dbaae8802781fa073cc92c6891ea0a0c39752f95266fcb4db7812dc78640e" - } - }, - { - "id": "offscreen", - "type": "snippetListing", - "title": "Offscreen", - "attributes": { - "text": "Completely hides an element visually and positionally in the DOM while still allowing it to be accessible. \nProvides an alternative to `display: none` (not readable by screen readers) and `visibility: hidden` (takes up physical space in the DOM).\n\n", - "tags": [ - "layout", - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "797f492e370c5401e198baf94ce31ecc7bc130f6d609814ec81cb4c70f1a608f" - } - }, - { - "id": "overflow-scroll-gradient", - "type": "snippetListing", - "title": "Overflow scroll gradient", - "attributes": { - "text": "Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.\n\n", - "tags": [ - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "8803e417053172085af754a3a63531c33cbf78f2c1a7c95a6e392be2adf9551a" - } - }, - { - "id": "popout-menu", - "type": "snippetListing", - "title": "Popout menu", - "attributes": { - "text": "Reveals an interactive popout menu on hover and focus.\n\n", - "tags": [ - "interactivity", - "intermediate" - ] - }, - "meta": { - "hash": "4103e63398b3bc9f646ff4e528ff28aad8b10d666b541254575eb257af43311b" - } - }, - { - "id": "pretty-text-underline", - "type": "snippetListing", - "title": "Pretty text underline", - "attributes": { - "text": "A nicer alternative to `text-decoration: underline` where descenders do not clip the underline.\nNatively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline.\n\n", - "tags": [ - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "8e513bfd8e3e72d073e2411fd903a978178c5dcf8b5aa8e603dc653dbba293d6" - } - }, - { - "id": "pulse-loader", - "type": "snippetListing", - "title": "Pulse loader", - "attributes": { - "text": "Creates a pulse effect loader animation using the `animation-delay` property.\n\n", - "tags": [ - "animation", - "beginner" - ] - }, - "meta": { - "hash": "11f0b0631cb97ab53a144c263648c155527e570e0ceefaea59201c39de73b57b" - } - }, - { - "id": "reset-all-styles", - "type": "snippetListing", - "title": "Reset all styles", - "attributes": { - "text": "Resets all styles to default values with one property. This will not affect `direction` and `unicode-bidi` properties.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "f9542b2db5cd49f09e53b3af8348c58c973244bdeede87857e49660c6e713d65" - } - }, - { - "id": "shape-separator", - "type": "snippetListing", - "title": "Shape separator", - "attributes": { - "text": "Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.\n\n", - "tags": [ - "visual", - "intermediate" - ] - }, - "meta": { - "hash": "b14f91e079c09e854ee0579eed3246c792794fb8d1b27deb6bec15df23f24917" - } - }, - { - "id": "sibling-fade", - "type": "snippetListing", - "title": "Sibling fade", - "attributes": { - "text": "Fades out the siblings of a hovered item.\n\n", - "tags": [ - "interactivity", - "intermediate" - ] - }, - "meta": { - "hash": "35bfb52929dcbd21c120d555c9d3382154f47b661d31722ffb3d21281021bba3" - } - }, - { - "id": "staggered-animation", - "type": "snippetListing", - "title": "Staggered animation", - "attributes": { - "text": "Creates a staggered animation for the elements of a list.\n\n", - "tags": [ - "animation", - "advanced" - ] - }, - "meta": { - "hash": "b1dc6f9fcc5cc91b59e89864b568048040e1879b2fc165d580cd21bc3fb73e50" - } - }, - { - "id": "system-font-stack", - "type": "snippetListing", - "title": "System font stack", - "attributes": { - "text": "Uses the native font of the operating system to get close to a native app feel.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "be5f2dfdc4cd4cafea8fbe197e22b1df40a40e10b61c17ea86af2b4f72bba127" - } - }, - { - "id": "tile-layout-using-inline-block", - "type": "snippetListing", - "title": "3-tile layout", - "attributes": { - "text": "Align items horizontally using `display: inline-block` to create a 3-tile layout.\n\n", - "tags": [ - "layout", - "beginner" - ] - }, - "meta": { - "hash": "ba4688945c309db9b6255f4555299034a67ea583e4e8db2806085c1c257b736f" - } - }, - { - "id": "toggle-switch", - "type": "snippetListing", - "title": "Toggle switch", - "attributes": { - "text": "Creates a toggle switch with CSS only.\n\n", - "tags": [ - "visual", - "interactivity", - "beginner" - ] - }, - "meta": { - "hash": "4fa08671fcaa73e3223af229c5844c3c2fa370593a4af76a9130f45f2c67b6ff" - } - }, - { - "id": "transform-centering", - "type": "snippetListing", - "title": "Transform centering", - "attributes": { - "text": "Vertically and horizontally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.\n\n", - "tags": [ - "layout" - ] - }, - "meta": { - "hash": "4a09dc7c545b1dce1716ed04c0a04344d480958c21fb17ddab1207e05fe52c33" - } - }, - { - "id": "transform-detransform", - "type": "snippetListing", - "title": "Transform - Detransform", - "attributes": { - "text": "Sets a transform on the parent element and de-transforms the child elements, so they are not affected by the transform.\nThis allows for some neat effects such as skewed buttons.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "a0aea16855c7976812cf98e523babf29e8a97c567f14e91a6785977ace9f1fc2" - } - }, - { - "id": "triangle", - "type": "snippetListing", - "title": "Triangle", - "attributes": { - "text": "Creates a triangle shape with pure CSS.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "38accddc3c57f22a326ef7ba33bed5cb34340a7ffdc01d3b9e397d08f5b9c017" - } - }, - { - "id": "truncate-text-multiline", - "type": "snippetListing", - "title": "Truncate text multiline", - "attributes": { - "text": "If the text is longer than one line, it will be truncated for `n` lines and end with an gradient fade.\n\n", - "tags": [ - "layout", - "intermediate" - ] - }, - "meta": { - "hash": "a30287149e833b454deea446359d51554640ad3a57cd2460d8519c376077b8b4" - } - }, - { - "id": "truncate-text", - "type": "snippetListing", - "title": "Truncate text", - "attributes": { - "text": "If the text is longer than one line, it will be truncated and end with an ellipsis `…`.\n\n", - "tags": [ - "layout", - "beginner" - ] - }, - "meta": { - "hash": "4ce872446c7950c9450e56ab2251c7cfcd473a1c9b2a64baa7c9d6b029264796" - } - }, - { - "id": "zebra-striped-list", - "type": "snippetListing", - "title": "Zebra striped list", - "attributes": { - "text": "Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.\n\n", - "tags": [ - "visual", - "beginner" - ] - }, - "meta": { - "hash": "0a3b82b164fd41e50e0e258099a5dedd8497206acf19c85738b6dd946ba7389e" - } - } - ], - "meta": { - "specification": "http://jsonapi.org/format/", - "type": "snippetListingArray", - "language": { - "short": "css", - "long": "CSS" - }, - "otherLanguages": [ - { - "short": "html", - "long": "HTML" - }, - { - "short": "js", - "long": "JavaScript" - } - ] - } -} \ No newline at end of file