From c16a86ddaafff51ca747fc249f59517716ab156e Mon Sep 17 00:00:00 2001 From: Bryan Date: Tue, 2 Nov 2021 17:14:38 -0400 Subject: [PATCH] CSR-116 Global style updates Update fonts, headings, spacing, breakpoints --- package-lock.json | 201 +++++++++++++------- public/index.html | 2 +- src/assets/scss/_CustomVariables.scss | 146 +++++++++----- src/assets/scss/_GlobalStyles.scss | 66 +++++-- src/assets/scss/components/_buttons.scss | 6 +- src/layouts/componentTest/componentTest.vue | 41 +++- src/uxComponents/radioCard/radioCard.vue | 2 +- 7 files changed, 336 insertions(+), 128 deletions(-) diff --git a/package-lock.json b/package-lock.json index cde6a019f..cda38bdec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -444,7 +444,9 @@ "version": "7.15.6", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz", "integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==", - "bin": "./bin/babel-parser.js", + "bin": { + "parser": "bin/babel-parser.js" + }, "engines": { "node": ">=6.0.0" } @@ -2773,13 +2775,15 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "funding": "https://github.com/chalk/ansi-styles?sponsor=1", "optional": true, "dependencies": { "color-convert": "^2.0.1" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, "node_modules/@vue/cli-service/node_modules/chalk": { @@ -2787,7 +2791,6 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, - "funding": "https://github.com/chalk/chalk?sponsor=1", "optional": true, "dependencies": { "ansi-styles": "^4.1.0", @@ -2795,6 +2798,9 @@ }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, "node_modules/@vue/cli-service/node_modules/color-convert": { @@ -3055,7 +3061,7 @@ "dev": true, "optional": true, "bin": { - "prettier": "./bin-prettier.js" + "prettier": "bin-prettier.js" }, "engines": { "node": ">=4" @@ -3504,12 +3510,14 @@ "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "type-fest": "^0.21.3" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/ansi-escapes/node_modules/type-fest": { @@ -3517,9 +3525,11 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/ansi-html": { @@ -3531,7 +3541,7 @@ "node >= 0.8.0" ], "bin": { - "ansi-html": "./bin/ansi-html" + "ansi-html": "bin/ansi-html" } }, "node_modules/ansi-regex": { @@ -4256,7 +4266,7 @@ "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", "dev": true, "bin": { - "babylon": "./bin/babylon.js" + "babylon": "bin/babylon.js" } }, "node_modules/balanced-match": { @@ -4886,9 +4896,11 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz", "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/caniuse-api": { @@ -5241,12 +5253,14 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "funding": "https://github.com/chalk/ansi-styles?sponsor=1", "dependencies": { "color-convert": "^2.0.1" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, "node_modules/cli-highlight/node_modules/chalk": { @@ -5254,13 +5268,15 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, - "funding": "https://github.com/chalk/chalk?sponsor=1", "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, "node_modules/cli-highlight/node_modules/color-convert": { @@ -5307,9 +5323,11 @@ "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz", "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "engines": { "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/cli-width": { @@ -5921,7 +5939,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/copy-webpack-plugin/node_modules/slash": { @@ -6052,7 +6070,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/crypto-browserify": { @@ -6556,12 +6574,14 @@ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "pump": "^3.0.0" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/default-gateway/node_modules/is-stream": { @@ -6569,9 +6589,11 @@ "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/default-gateway/node_modules/mimic-fn": { @@ -6600,12 +6622,14 @@ "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "mimic-fn": "^2.1.0" }, "engines": { "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/default-gateway/node_modules/p-finally": { @@ -6656,7 +6680,7 @@ "isexe": "^2.0.0" }, "bin": { - "node-which": "./bin/node-which" + "node-which": "bin/node-which" }, "engines": { "node": ">= 8" @@ -6877,11 +6901,13 @@ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", "dev": true, - "funding": "https://github.com/cheeriojs/dom-serializer?sponsor=1", "dependencies": { "domelementtype": "^2.0.1", "domhandler": "^4.2.0", "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" } }, "node_modules/domain-browser": { @@ -7045,7 +7071,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/editorconfig/node_modules/yallist": { @@ -7162,7 +7188,9 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", "dev": true, - "funding": "https://github.com/fb55/entities?sponsor=1" + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } }, "node_modules/errno": { "version": "0.1.8", @@ -7304,7 +7332,6 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz", "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==", "dev": true, - "funding": "https://opencollective.com/eslint", "dependencies": { "@babel/code-frame": "^7.0.0", "ajv": "^6.10.0", @@ -7345,10 +7372,13 @@ "v8-compile-cache": "^2.0.3" }, "bin": { - "eslint": "./bin/eslint.js" + "eslint": "bin/eslint.js" }, "engines": { "node": "^8.10.0 || ^10.13.0 || >=11.10.1" + }, + "funding": { + "url": "https://opencollective.com/eslint" } }, "node_modules/eslint-config-prettier": { @@ -7428,12 +7458,14 @@ "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz", "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==", "dev": true, - "funding": "https://github.com/sponsors/mysticatea", "dependencies": { "eslint-visitor-keys": "^1.1.0" }, "engines": { "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/mysticatea" } }, "node_modules/eslint-scope": { @@ -7500,12 +7532,14 @@ "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "type-fest": "^0.8.1" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/eslint/node_modules/import-fresh": { @@ -7513,13 +7547,15 @@ "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" }, "engines": { "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/eslint/node_modules/resolve-from": { @@ -7560,8 +7596,8 @@ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", "dev": true, "bin": { - "esparse": "./bin/esparse.js", - "esvalidate": "./bin/esvalidate.js" + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" }, "engines": { "node": ">=4" @@ -8119,12 +8155,14 @@ "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "escape-string-regexp": "^1.0.5" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/file-entry-cache": { @@ -8275,7 +8313,6 @@ "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", "dev": true, - "funding": "https://github.com/avajs/find-cache-dir?sponsor=1", "dependencies": { "commondir": "^1.0.1", "make-dir": "^3.0.2", @@ -8283,6 +8320,9 @@ }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/avajs/find-cache-dir?sponsor=1" } }, "node_modules/find-up": { @@ -8321,7 +8361,7 @@ "glob": "^7.1.3" }, "bin": { - "rimraf": "./bin.js" + "rimraf": "bin.js" } }, "node_modules/flatted": { @@ -9006,7 +9046,7 @@ "uglify-js": "3.4.x" }, "bin": { - "html-minifier": "./cli.js" + "html-minifier": "cli.js" }, "engines": { "node": ">=4" @@ -9515,12 +9555,14 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "funding": "https://github.com/chalk/ansi-styles?sponsor=1", "dependencies": { "color-convert": "^2.0.1" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, "node_modules/inquirer/node_modules/chalk": { @@ -9528,13 +9570,15 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, - "funding": "https://github.com/chalk/chalk?sponsor=1", "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, "node_modules/inquirer/node_modules/cli-cursor": { @@ -9599,12 +9643,14 @@ "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "mimic-fn": "^2.1.0" }, "engines": { "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/inquirer/node_modules/restore-cursor": { @@ -9925,12 +9971,14 @@ "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "bin": { "is-docker": "cli.js" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/is-extendable": { @@ -10082,9 +10130,11 @@ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/is-plain-object": { @@ -10283,7 +10333,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/istanbul-lib-report/node_modules/supports-color": { @@ -10333,7 +10383,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/istanbul-lib-source-maps/node_modules/source-map": { @@ -10373,7 +10423,7 @@ "jest-cli": "^24.9.0" }, "bin": { - "jest": "./bin/jest.js" + "jest": "bin/jest.js" }, "engines": { "node": ">= 6" @@ -10414,7 +10464,7 @@ "yargs": "^13.3.0" }, "bin": { - "jest": "./bin/jest.js" + "jest": "bin/jest.js" }, "engines": { "node": ">= 6" @@ -11083,7 +11133,7 @@ "yargs": "^13.3.0" }, "bin": { - "jest-runtime": "./bin/jest-runtime.js" + "jest-runtime": "bin/jest-runtime.js" }, "engines": { "node": ">= 6" @@ -11640,9 +11690,6 @@ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", "dev": true, - "dependencies": { - "graceful-fs": "^4.1.6" - }, "optionalDependencies": { "graceful-fs": "^4.1.6" } @@ -11998,12 +12045,14 @@ "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "semver": "^6.0.0" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/make-error": { @@ -12601,7 +12650,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/node-releases": { @@ -12643,7 +12692,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/normalize-path": { @@ -13120,12 +13169,14 @@ "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "p-try": "^2.0.0" }, "engines": { "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/p-locate": { @@ -13396,9 +13447,11 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", "dev": true, - "funding": "https://github.com/sponsors/jonschlinkert", "engines": { "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" } }, "node_modules/pify": { @@ -14707,7 +14760,6 @@ "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -14716,6 +14768,9 @@ }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/readable-stream": { @@ -15118,7 +15173,7 @@ "glob": "^7.1.3" }, "bin": { - "rimraf": "./bin.js" + "rimraf": "bin.js" } }, "node_modules/ripemd160": { @@ -15209,7 +15264,7 @@ "walker": "~1.0.5" }, "bin": { - "sane": "./src/cli.js" + "sane": "src/cli.js" }, "engines": { "node": "6.* || 8.* || >= 10.*" @@ -15346,7 +15401,7 @@ "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true, "bin": { - "semver": "./bin/semver.js" + "semver": "bin/semver.js" } }, "node_modules/send": { @@ -15554,7 +15609,7 @@ "safe-buffer": "^5.0.1" }, "bin": { - "sha.js": "./bin.js" + "sha.js": "bin.js" } }, "node_modules/shallow-clone": { @@ -16476,9 +16531,11 @@ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true, - "funding": "https://github.com/sponsors/sindresorhus", "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/stylehacks": { @@ -16549,7 +16606,7 @@ "util.promisify": "~1.0.0" }, "bin": { - "svgo": "./bin/svgo" + "svgo": "bin/svgo" }, "engines": { "node": ">=4.0.0" @@ -16572,9 +16629,11 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz", "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==", "dev": true, - "funding": "https://github.com/sponsors/fb55", "engines": { "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" } }, "node_modules/svgo/node_modules/dom-serializer": { @@ -16816,7 +16875,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/terser-webpack-plugin/node_modules/source-map": { @@ -17117,7 +17176,7 @@ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "bin": { - "semver": "./bin/semver" + "semver": "bin/semver" } }, "node_modules/ts-jest/node_modules/yargs-parser": { @@ -17602,7 +17661,7 @@ "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", "dev": true, "bin": { - "uuid": "./bin/uuid" + "uuid": "bin/uuid" } }, "node_modules/v8-compile-cache": { @@ -17681,7 +17740,6 @@ "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz", "integrity": "sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==", "dev": true, - "funding": "https://github.com/sponsors/mysticatea", "dependencies": { "debug": "^4.1.1", "eslint-scope": "^5.1.1", @@ -17694,6 +17752,9 @@ "engines": { "node": ">=8.10" }, + "funding": { + "url": "https://github.com/sponsors/mysticatea" + }, "peerDependencies": { "eslint": ">=5.0.0" } @@ -17886,7 +17947,6 @@ "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "dev": true, "dependencies": { - "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", "neo-async": "^2.5.0" }, @@ -17950,7 +18010,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", @@ -18690,7 +18749,7 @@ "isexe": "^2.0.0" }, "bin": { - "which": "./bin/which" + "which": "bin/which" } }, "node_modules/which-boxed-primitive": { @@ -18761,12 +18820,14 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "funding": "https://github.com/chalk/ansi-styles?sponsor=1", "dependencies": { "color-convert": "^2.0.1" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, "node_modules/wrap-ansi/node_modules/color-convert": { @@ -18934,12 +18995,14 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "funding": "https://github.com/chalk/ansi-styles?sponsor=1", "dependencies": { "color-convert": "^2.0.1" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, "node_modules/yargs/node_modules/cliui": { @@ -19011,7 +19074,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, - "funding": "https://github.com/chalk/wrap-ansi?sponsor=1", "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -19019,6 +19081,9 @@ }, "engines": { "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, "node_modules/yargs/node_modules/y18n": { diff --git a/public/index.html b/public/index.html index 84665a8b4..9047c9643 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss index 2a87319f3..b27b97536 100644 --- a/src/assets/scss/_CustomVariables.scss +++ b/src/assets/scss/_CustomVariables.scss @@ -1,50 +1,72 @@ // Color system -// scss-docs-start gray-color-variables +// White/black $white: #FFFFFF; -$gray-100: #F4F4F4; -$gray-200: #CACBCC; -$gray-300: #B3B4B5; -$gray-400: #B0B3B3;//Default Gray (Gray 400) $black: #000; -// scss-docs-end gray-color-variables -// fusv-disable -// scss-docs-start gray-colors-map -$grays: ( -"100": $gray-100, -"200": $gray-200, -"300": $gray-300, -"400": $gray-400, -); -// scss-docs-end gray-colors-map -// fusv-enable - -// scss-docs-start color-variables -$blue-100: #E4F1F7; -$blue-200: #E7F1F6; -$blue-300: #B9D7E6; -$blue-400: #125B7E; -$blue-600: #1574A1; +// Blues +$blue-100: #E4F1F7;// Used in theme +$blue-200: #C1DFEE; +$blue-300: #9FCEE6; +$blue-400: #69ADCF;// Used in theme +$blue-500: #3B8FB8; +$blue: #167CAC;// Default Blue $blue-700: #06577C; -$blue: #167CAC;//Default Blue (Blue 500) +$blue-800: #003D58; +$blue-900: #002433;// Used in theme + +// Reds +$red-100: #FFE6E4; +$red-200: #FDC0BB; +$red-300: #FB9A93; +$red-400: #EB5E54; +$red: #DA291C;// Default Red +$red-600: #B0160B; +$red-700: #870900; +$red-800: #5D0600; +$red-900: #330300; + +// Greens +$green-100: #E3F2EA; +$green-200: #BCEDD4; +$green-300: #94D7B6; +$green-400: #EB594F;// Used in theme +$green-500: #2CA168; +$green: #C40E01;// Default Green +$green-700: #006A36; +$green-800: #004F28; +$green-900: #00331A; + +// Yellows +$yellow-100: #FFF5EB; +$yellow-200: #FFE7C7; +$yellow-300: #FFD8A1; +$yellow-400: #FFB25C; +$yellow: #F88F1C;// Default Yellow +$yellow-600: #C76902; +$yellow-700: #964E00; +$yellow-800: #643400; +$yellow-900: #331A00; + +// Grays +$gray-100: #F5F5F5;// Used in theme +$gray-200: #E3E4E4;// Used in theme +$gray-300: #D2D4D4; +$gray: #B0B3B3;// Default Gray +$gray-500: #8E9292;// Used in theme +$gray-600: #4D5151;// Used in theme +$gray-700: #303333;// Used in theme +$gray-800: #222424;// Used in theme +$gray-900: #181A1A;// Used in theme + +// Miscellaneous Colors $indigo: #6610f2; $purple: #6f42c1; $pink: #d63384; -$red-200: #FBE9E8; -$red-300: #F3BEBA; -$red: #DA291C;//Default Red (Red 400) -$red-500: #AF2117; $orange: #fd7e14; -$yellow-200: #FEF6E8; -$yellow-300: #FCE6BA; -$yellow: #F88F1C;//Default Yellow (Yellow 400) -$green-200: #E6F2EC; -$green-300: #B5DAC8; -$green: #098649;//Default Green (Green 400) -$green-500: #075F35; $teal: #20c997; $cyan: #0dcaf0; + // scss-docs-end color-variables // scss-docs-start colors-map @@ -60,20 +82,20 @@ $colors: ( "teal": $teal, "cyan": $cyan, "white": $white, -"gray": $gray-400, -"gray-dark": $gray-400 +"gray": $gray, +"gray-dark": $gray-500 ); // scss-docs-end colors-map // scss-docs-start theme-color-variables -$primary: $red; -$secondary: $gray-400; +$primary: $blue; +$secondary: $red; $success: $green; $info: $cyan; $warning: $yellow; -$danger: $red-500; +$danger: $red; $light: $gray-100; -$dark: $gray-400; +$dark: $gray-500; // scss-docs-end theme-color-variables // scss-docs-start theme-colors-map @@ -95,12 +117,48 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati // stylelint-enable value-keyword-case $font-family-base: $font-family-sans-serif; $font-family-code: $font-family-monospace; +$font-size-base: 1rem; // Assumes the browser default, typically `16px` -//Gutters -$grid-gutter-width: .75rem; +//Font weight +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-bolder: bolder !default; + +//Headings +$h1-font-size: $font-size-base * 3; +$h2-font-size: $font-size-base * 2.625; +$h3-font-size: $font-size-base * 2; +$h4-font-size: $font-size-base * 1.625; +$h5-font-size: $font-size-base * 1.25; +$h6-font-size: $font-size-base * .875; //Border Radius $border-radius: .25rem; $border-radius-sm: .2rem; $border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course. -$border-radius-pill: 50rem; \ No newline at end of file +$border-radius-pill: 50rem; + +//Spacing +// Seven spacers available instead of the usual 5 +$spacer: 1rem; +$spacers: ( + 0: 0, + 1: $spacer * .25, + 2: $spacer * .5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 2, + 6: $spacer * 2.5, + 7: $spacer * 3, +); + +//Grid breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 838px, + lg: 1074px, + xl: 1416px +); diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss index 1646125b5..29f36210c 100644 --- a/src/assets/scss/_GlobalStyles.scss +++ b/src/assets/scss/_GlobalStyles.scss @@ -1,18 +1,62 @@ body { font-size: 16px; background-color: #fff; - padding: 0 .75rem; -} - -a { - color: $blue-600; - text-decoration: none; - border-bottom: 1px solid $blue-600; - &:hover { - color: $blue-400; + padding: .5rem; + .container-fluid { + max-width: 576px; + &.container-shadow { + box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper + } + } + a { + color: $blue-600; + text-decoration: none; + border-bottom: 1px solid $blue-600; + &:hover { + color: $blue-400; + } + } + .pointer { + cursor: pointer; } } -.pointer { - cursor: pointer; +//Typogrophy + +p { + line-height: 1.625; + font-weight: 400; + small,.small { + font-size: .875rem; + } +} + +//Headings +//font-size defined in _CustomVariables.scss +//add helper fw-bold to any element to get bold style (500) +//add helper fw-light to any element to get light style (300) +h1,.h1 { + line-height: 1.325; + font-weight: 300; +} +h2,.h2 { + line-height: 1.325; + font-weight: 300; +} +h3,.h3 { + line-height: 1.375; + font-weight: 300; +} +h4,.h4 { + line-height: 1.6; + font-weight: 300; +} +h5,.h5 { + line-height: 1.325; + font-weight: 400; +} +h6,.h6 { + line-height: 1.7; + letter-spacing: .75px; + text-transform: uppercase; } diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index bf3cbf883..21087a117 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -3,7 +3,7 @@ &.btn-primary { position: relative; background: $blue-700; - background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%); + background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); border: none; border-radius: $border-radius-lg; height: 48px; @@ -51,6 +51,10 @@ border-radius: $border-radius-lg; border: 1px solid rgba($gray-300,.3); width: 100%; + &:focus, // Mouse, touch, stylus focus + &:focus-visible { // Keyboard focus for accessibility + box-shadow: none; + } &.button-loader { padding: 0 40px 0 12px; &:after { diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 493b9c1d4..1128790eb 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -1,6 +1,6 @@ diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/uxComponents/radioCard/radioCard.vue index 70a7cec82..249646f82 100644 --- a/src/uxComponents/radioCard/radioCard.vue +++ b/src/uxComponents/radioCard/radioCard.vue @@ -1,5 +1,5 @@