From 5482db1b11332526e6916f2147e59216120b5fd2 Mon Sep 17 00:00:00 2001 From: Bert De Block Date: Sun, 31 Oct 2021 09:33:48 +0100 Subject: [PATCH] feat: remove dependency on `ember-cli-sass` and `sass` This also adds the ability to exclude Ember Freestyle's styles. --- .eslintrc.js | 1 + .husky/pre-commit | 5 + README.md | 31 +- .../components/freestyle-annotation.scss | 0 .../components/freestyle-collection.scss | 0 .../styles/components/freestyle-dynamic.scss | 0 .../styles/components/freestyle-guide.scss | 0 .../styles/components/freestyle-menu.scss | 0 .../components/freestyle-palette-item.scss | 0 .../styles/components/freestyle-palette.scss | 0 .../styles/components/freestyle-section.scss | 0 .../styles/components/freestyle-source.scss | 0 .../components/freestyle-subsection.scss | 0 .../styles/components/freestyle-typeface.scss | 0 .../components/freestyle-usage-controls.scss | 0 .../styles/components/freestyle-usage.scss | 0 .../styles/components/freestyle-variant.scss | 0 .../styles/components/freestyle/usage.scss | 0 .../styles/ember-freestyle.scss | 0 ember-cli-build.js | 3 + index.js | 16 +- package.json | 7 +- script/compile-styles.js | 14 + tests/dummy/app/styles/app.scss | 2 + vendor/ember-freestyle.css | 523 ++++++++++++++++++ yarn.lock | 5 + 26 files changed, 603 insertions(+), 4 deletions(-) create mode 100755 .husky/pre-commit rename {addon => app}/styles/components/freestyle-annotation.scss (100%) rename {addon => app}/styles/components/freestyle-collection.scss (100%) rename {addon => app}/styles/components/freestyle-dynamic.scss (100%) rename {addon => app}/styles/components/freestyle-guide.scss (100%) rename {addon => app}/styles/components/freestyle-menu.scss (100%) rename {addon => app}/styles/components/freestyle-palette-item.scss (100%) rename {addon => app}/styles/components/freestyle-palette.scss (100%) rename {addon => app}/styles/components/freestyle-section.scss (100%) rename {addon => app}/styles/components/freestyle-source.scss (100%) rename {addon => app}/styles/components/freestyle-subsection.scss (100%) rename {addon => app}/styles/components/freestyle-typeface.scss (100%) rename {addon => app}/styles/components/freestyle-usage-controls.scss (100%) rename {addon => app}/styles/components/freestyle-usage.scss (100%) rename {addon => app}/styles/components/freestyle-variant.scss (100%) rename {addon => app}/styles/components/freestyle/usage.scss (100%) rename addon/styles/addon.scss => app/styles/ember-freestyle.scss (100%) create mode 100644 script/compile-styles.js create mode 100644 vendor/ember-freestyle.css diff --git a/.eslintrc.js b/.eslintrc.js index d7f4f97d..58301013 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -37,6 +37,7 @@ module.exports = { './blueprints/*/index.js', './config/**/*.js', './lib/**/*.js', + './script/**/*.js', './tests/dummy/config/**/*.js', ], parserOptions: { diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..ae4512e1 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,5 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +yarn compile-styles +git add ./vendor/ember-freestyle.css diff --git a/README.md b/README.md index a3a91628..42b74134 100644 --- a/README.md +++ b/README.md @@ -58,12 +58,41 @@ You can even use the constituent components like `freestyle-usage` on their own. Hopefully the installation instructions got you off to a smooth, seamless start. If you have any problems, feel free to chat with us in the [Ember Community Discord](https://discord.gg/emberjs) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome! -## Removing Ember Freestyle from Your Production Build +## Excluding Ember Freestyle's Styles + +If you want to exclude Ember Freestyle's styles, you can set the `includeStyles` +option to `false` in your `ember-cli-build.js` file: + +```js +// ember-cli-build.js + +module.exports = function (defaults) { + const app = new EmberApp(defaults, { + 'ember-freestyle': { + includeStyles: false, + }, + }; +}; +``` + +This might be useful in case you want to define your own styles _or_ if you are +using `ember-cli-sass` and want to import Ember Freestyle's styles explicitly: + +```scss +$FreestyleGuide-color--primary: #C70039; +$FreestyleGuide-color--accent: #DAF7A6; + +@import 'ember-freestyle'; +``` + +## Excluding Ember Freestyle from Your Production Build We recommend excluding Ember Freestyle from production builds using Ember CLI's `addons.blacklist` option. ```js +// ember-cli-build.js + const environment = process.env.EMBER_ENV; const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : []; diff --git a/addon/styles/components/freestyle-annotation.scss b/app/styles/components/freestyle-annotation.scss similarity index 100% rename from addon/styles/components/freestyle-annotation.scss rename to app/styles/components/freestyle-annotation.scss diff --git a/addon/styles/components/freestyle-collection.scss b/app/styles/components/freestyle-collection.scss similarity index 100% rename from addon/styles/components/freestyle-collection.scss rename to app/styles/components/freestyle-collection.scss diff --git a/addon/styles/components/freestyle-dynamic.scss b/app/styles/components/freestyle-dynamic.scss similarity index 100% rename from addon/styles/components/freestyle-dynamic.scss rename to app/styles/components/freestyle-dynamic.scss diff --git a/addon/styles/components/freestyle-guide.scss b/app/styles/components/freestyle-guide.scss similarity index 100% rename from addon/styles/components/freestyle-guide.scss rename to app/styles/components/freestyle-guide.scss diff --git a/addon/styles/components/freestyle-menu.scss b/app/styles/components/freestyle-menu.scss similarity index 100% rename from addon/styles/components/freestyle-menu.scss rename to app/styles/components/freestyle-menu.scss diff --git a/addon/styles/components/freestyle-palette-item.scss b/app/styles/components/freestyle-palette-item.scss similarity index 100% rename from addon/styles/components/freestyle-palette-item.scss rename to app/styles/components/freestyle-palette-item.scss diff --git a/addon/styles/components/freestyle-palette.scss b/app/styles/components/freestyle-palette.scss similarity index 100% rename from addon/styles/components/freestyle-palette.scss rename to app/styles/components/freestyle-palette.scss diff --git a/addon/styles/components/freestyle-section.scss b/app/styles/components/freestyle-section.scss similarity index 100% rename from addon/styles/components/freestyle-section.scss rename to app/styles/components/freestyle-section.scss diff --git a/addon/styles/components/freestyle-source.scss b/app/styles/components/freestyle-source.scss similarity index 100% rename from addon/styles/components/freestyle-source.scss rename to app/styles/components/freestyle-source.scss diff --git a/addon/styles/components/freestyle-subsection.scss b/app/styles/components/freestyle-subsection.scss similarity index 100% rename from addon/styles/components/freestyle-subsection.scss rename to app/styles/components/freestyle-subsection.scss diff --git a/addon/styles/components/freestyle-typeface.scss b/app/styles/components/freestyle-typeface.scss similarity index 100% rename from addon/styles/components/freestyle-typeface.scss rename to app/styles/components/freestyle-typeface.scss diff --git a/addon/styles/components/freestyle-usage-controls.scss b/app/styles/components/freestyle-usage-controls.scss similarity index 100% rename from addon/styles/components/freestyle-usage-controls.scss rename to app/styles/components/freestyle-usage-controls.scss diff --git a/addon/styles/components/freestyle-usage.scss b/app/styles/components/freestyle-usage.scss similarity index 100% rename from addon/styles/components/freestyle-usage.scss rename to app/styles/components/freestyle-usage.scss diff --git a/addon/styles/components/freestyle-variant.scss b/app/styles/components/freestyle-variant.scss similarity index 100% rename from addon/styles/components/freestyle-variant.scss rename to app/styles/components/freestyle-variant.scss diff --git a/addon/styles/components/freestyle/usage.scss b/app/styles/components/freestyle/usage.scss similarity index 100% rename from addon/styles/components/freestyle/usage.scss rename to app/styles/components/freestyle/usage.scss diff --git a/addon/styles/addon.scss b/app/styles/ember-freestyle.scss similarity index 100% rename from addon/styles/addon.scss rename to app/styles/ember-freestyle.scss diff --git a/ember-cli-build.js b/ember-cli-build.js index f5512a2f..2115bc96 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -8,6 +8,9 @@ module.exports = function (defaults) { autoprefixer: { cascade: false, }, + 'ember-freestyle': { + includeStyles: false, + }, snippetSearchPaths: ['tests/dummy/app'], }); diff --git a/index.js b/index.js index 7c9423a7..2cffb367 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,9 @@ 'use strict'; +const DEFAULT_OPTIONS = { + includeStyles: true, +}; + module.exports = { name: require('./package').name, @@ -11,10 +15,20 @@ module.exports = { this._super.included.apply(this, arguments); // support for nested addon // see: https://github.com/ember-cli/ember-cli/issues/3718 - var target = parentAddon || app; + const target = parentAddon || app; + if (!this.app && target.app) { this.app = target.app; } + + const options = { + ...DEFAULT_OPTIONS, + ...this.app.options[this.name], + }; + + if (options.includeStyles === true) { + this.app.import('vendor/ember-freestyle.css'); + } }, setupPreprocessorRegistry(type, registry) { diff --git a/package.json b/package.json index 2bbe2ed3..d33c5049 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ }, "scripts": { "build": "ember build --environment=production", + "compile-styles": "node ./script/compile-styles.js", "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"", "lint:css": "stylelint \"./**/*.scss\"", "lint:css:fix": "stylelint \"./**/*.scss\" --fix", @@ -22,6 +23,7 @@ "lint:hbs:fix": "ember-template-lint . --fix", "lint:js": "eslint . --cache", "lint:js:fix": "eslint . --fix", + "prepare": "husky install", "start": "ember serve", "test": "npm-run-all lint test:*", "test:ember": "ember test", @@ -39,13 +41,11 @@ "ember-auto-import": "^1.11.3", "ember-cli-babel": "^7.26.6", "ember-cli-htmlbars": "^6.0.0", - "ember-cli-sass": "^10.0.0", "ember-modifier": "^2.1.2", "ember-named-blocks-polyfill": "^0.2.4", "ember-truth-helpers": "^3.0.0", "json-formatter-js": "^2.3.4", "macro-decorators": "^0.1.2", - "sass": "^1.43.3", "strip-indent": "^3.0.0" }, "devDependencies": { @@ -62,6 +62,7 @@ "ember-cli-deploy-build": "^2.0.0", "ember-cli-deploy-git": "^1.3.4", "ember-cli-inject-live-reload": "^2.1.0", + "ember-cli-sass": "^10.0.0", "ember-cli-showdown": "^6.0.0", "ember-cli-sri": "^2.1.0", "ember-cli-terser": "^4.0.2", @@ -83,12 +84,14 @@ "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-qunit": "^7.0.0", + "husky": "^7.0.4", "loader.js": "^4.7.0", "npm-run-all": "^4.1.5", "prettier": "^2.3.2", "qunit": "^2.16.0", "qunit-dom": "^2.0.0", "remarkable": "^2.0.0", + "sass": "^1.43.3", "standard-version": "^9.3.2", "stylelint": "^13.13.1", "stylelint-config-prettier": "^9.0.3", diff --git a/script/compile-styles.js b/script/compile-styles.js new file mode 100644 index 00000000..dc783445 --- /dev/null +++ b/script/compile-styles.js @@ -0,0 +1,14 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const sass = require('sass'); + +const inputFile = path.join(__dirname, '../app/styles/ember-freestyle.scss'); +const outputFile = path.join(__dirname, '../vendor/ember-freestyle.css'); + +const { css } = sass.renderSync({ + file: inputFile, +}); + +fs.writeFileSync(outputFile, css); diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 41f64d52..52eb6551 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -1,3 +1,5 @@ +@import 'ember-freestyle'; + html, body { font-family: sans-serif; diff --git a/vendor/ember-freestyle.css b/vendor/ember-freestyle.css new file mode 100644 index 00000000..c072fa78 --- /dev/null +++ b/vendor/ember-freestyle.css @@ -0,0 +1,523 @@ +.FreestyleGuide { + display: flex; + flex-direction: column; + height: 100%; + min-height: 100vh; + min-width: 320px; +} +.FreestyleGuide-header, .FreestyleGuide-footer { + display: flex; + flex: none; +} +.FreestyleGuide-header { + align-items: center; + justify-content: space-between; + border-bottom: solid 1px #b6b6b6; + padding: 0.5rem 1rem; +} +.FreestyleGuide-cta { + cursor: pointer; + display: inline-block; + flex-basis: 20px; + font-size: 1.4rem; + text-align: center; +} +.FreestyleGuide-ctaIcon:hover { + fill: #00bcd4; +} +.FreestyleGuide-titleContainer { + padding: 0 1rem; + text-align: center; +} +.FreestyleGuide-title { + font-size: 1.4rem; + font-weight: bold; +} +@media (min-width: 600px) { + .FreestyleGuide-title { + font-size: 1.9rem; + } +} +.FreestyleGuide-subtitle { + margin: 0 auto; +} +.FreestyleGuide-body { + background-color: #fff; + display: flex; + flex: 1 0 auto; + flex-direction: column; +} +@media (min-width: 600px) { + .FreestyleGuide-body { + flex-direction: row; + } +} +.FreestyleGuide-content { + margin-top: 1.5rem; + overflow: auto; +} +@media (min-width: 600px) { + .FreestyleGuide-content { + flex: 1; + margin: 0; + } +} +.FreestyleGuide-nav { + background-color: #fff; + order: -1; + padding: 1rem; +} +@media (min-width: 600px) { + .FreestyleGuide-nav { + border-right: solid 1px #b6b6b6; + flex: 0 0 18rem; + } +} +.FreestyleGuide-aside { + background: #fff; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + margin-right: 0.5rem; + order: -2; + position: fixed; + right: 0.5rem; +} +@media (min-width: 600px) { + .FreestyleGuide-aside { + border-left: solid 1px #b6b6b6; + order: 1; + } +} +.FreestyleGuide-chooseSectionMessage { + display: flex; + height: 100%; + font-size: 1.4rem; +} +.FreestyleGuide-chooseSectionMessage > span { + margin: auto; +} + +.FreestyleCollection { + max-width: 1200px; +} +.FreestyleCollection-title { + font-weight: bold; + padding: 1rem 1rem 0; + text-transform: uppercase; +} +.FreestyleCollection-variantList { + background-color: #fff; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + color: #212121; + display: flex; + height: 48px; + list-style-type: none; + margin: 1rem; + overflow-x: auto; + overflow-y: hidden; + padding: 0; + position: relative; + white-space: nowrap; +} +.FreestyleCollection-variantListItem { + cursor: pointer; + display: block; + flex-grow: 1; + float: left; + font-size: 14px; + height: 48px; + letter-spacing: 0.8px; + line-height: 48px; + margin: 0; + min-width: 120px; + overflow: hidden; + padding: 0; + text-align: center; + text-overflow: ellipsis; + text-transform: uppercase; + width: 15%; +} +.FreestyleCollection-variantListItem:hover, .FreestyleCollection-variantListItem--active { + border-bottom: solid 3px #00bcd4; + color: #00bcd4; +} + +.FreestyleDynamic-input { + margin-bottom: 10px; +} +.FreestyleDynamic-input input[type=text], +.FreestyleDynamic-input textarea { + display: block; +} +.FreestyleDynamic-inputDescription { + display: block; +} + +.FreestyleVariant--inline { + display: inline-block; +} + +.FreestyleAnnotation { + font-size: 0.9rem; + padding: 0 1rem; +} + +.FreestyleUsageControls { + background: #fff; + font-size: 0.9rem; + padding: 1rem; + text-align: left; + width: 200px; +} +.FreestyleUsageControls-header { + color: #00bcd4; + font-weight: bold; + margin-bottom: 0.3rem; + text-transform: uppercase; +} +.FreestyleUsageControls-item { + align-items: baseline; + display: flex; +} +.FreestyleUsageControls-item--focus { + padding-top: 0.6rem; +} +.FreestyleUsageControls-itemControl { + cursor: pointer; + padding-right: 0.1rem; +} +.FreestyleUsageControls-itemLabel { + font-size: 0.8rem; +} +.FreestyleUsageControls-input--focus { + margin-bottom: 0.2rem; +} +.FreestyleUsageControls-button { + background-color: #00bcd4; + border: 0; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + color: #fff; + cursor: pointer; + font-size: 0.6rem; + padding: 0.4rem 1rem; + text-transform: uppercase; +} + +.FreestylePalette-title { + font-size: 1.4rem; + font-weight: bold; + padding-bottom: 2px; + padding-top: 10px; +} +.FreestylePalette-description { + font-size: 0.8rem; + padding-bottom: 5px; +} + +/* BEGIN-FREESTYLE-USAGE fpi--notes +# Markdown Notes In SCSS! + +Hey look... these are `markdown` notes: + +- coming from scss +- looking nice + +END-FREESTYLE-USAGE */ +.FreestylePaletteItem { + border: solid 1px #cecece; + display: inline-block; + margin: 0 5px 5px 0; +} +.FreestylePaletteItem-color { + height: 90px; + width: 160px; +} +.FreestylePaletteItem-info { + background-color: #fff; + border-top: solid 1px #cecece; + padding: 5px; +} +.FreestylePaletteItem-hex { + font-size: 12px; + font-weight: bold; + margin-bottom: 0; +} +.FreestylePaletteItem-name { + color: #2f4f4f; + font-size: 11px; + margin-top: 0; +} + +.FreestyleUsage { + max-width: 1200px; +} +.FreestyleUsage-title { + font-weight: bold; + padding: 1rem 1rem 0; + text-transform: uppercase; +} +.FreestyleUsage-rendered { + padding: 1rem; +} +.FreestyleUsage-usage { + padding-bottom: 10px; +} +.FreestyleUsage-sourceContainer pre { + font-size: 0.8rem; + margin-top: 0; +} +.FreestyleUsage-sourceContainer pre.hljs { + padding: 0.5rem 1rem; +} +.FreestyleUsage--inline { + border-bottom: 0; + display: inline-block; + margin-bottom: 0; + padding-bottom: 0; + width: 100%; +} +@media (min-width: 600px) { + .FreestyleUsage--inline { + max-width: inherit; + width: auto; + } +} +.FreestyleUsage-focusCta { + cursor: pointer; + fill: #b6b6b6; + position: relative; + top: 1px; +} +.FreestyleUsage-focusCta:hover { + fill: #00bcd4; +} + +.FreestyleSection-name { + border-bottom: solid 1px #ccc; + font-size: 1.5rem; + font-weight: bold; + margin: 0 1rem; + max-width: calc(1200px - 1rem); + padding: 1rem 0 0.4rem; + text-transform: uppercase; +} +.FreestyleSection--hidden { + display: none; +} + +.FreestyleSubsection.is-hidden { + display: none; +} +.FreestyleSubsection-name { + font-size: 1.3rem; + margin: 0 1rem; + padding: 0.8rem 0 0.4rem; + text-transform: uppercase; +} + +.FreestyleMenu { + font-size: 14px; + list-style: none; + padding-left: 1rem; +} +.FreestyleMenu-item, .FreestyleMenu-submenuItem { + padding-top: 0.6rem; + text-transform: uppercase; +} +.FreestyleMenu-itemLink, .FreestyleMenu-submenuItemLink { + color: #212121; + text-decoration: none; +} +.FreestyleMenu-itemLink.active, .FreestyleMenu-submenuItemLink.active { + color: #00bcd4; + text-decoration: none; +} +.FreestyleMenu-itemLink:hover, .FreestyleMenu-submenuItemLink:hover { + color: #ffc107; + text-decoration: none; +} +.FreestyleMenu-submenu { + list-style: none; + padding-left: 1rem; +} + +.FreestyleSource-title { + font-size: 0.7rem; + font-weight: bold; + padding: 0.5rem 1rem 0.2rem; + text-transform: uppercase; +} + +.FreestyleTypeface-previewHero, .FreestyleTypeface-previewSample { + font-family: inherit; +} +.FreestyleTypeface-previewHero { + font-size: 140px; + line-height: 1.05; +} +.FreestyleTypeface-previewSample { + font-size: 15px; + margin: 0; +} + +.FreestyleUsage { + --radius: 4px; + --border-color: #eee; + padding: 0 1rem 1rem; + margin-bottom: 1rem; + max-width: 1200px; +} +.FreestyleUsage:last-child { + border-bottom: 1px solid #ccc; +} +.FreestyleUsage-name { + color: #333; + margin-top: 1.5rem; +} +.FreestyleUsage-description { + margin: 0.5rem 0; + font-size: 1.1rem; + color: #666; +} +.FreestyleUsage-apiTitle { + font-size: 0.9rem; + font-weight: bold; + margin: 0; +} +.FreestyleUsage-standaloneFocusCta { + float: right; + margin-right: 1rem; +} +.FreestyleUsage-preview { + padding: 1.5rem; + margin: 1rem 0; + border: 1px solid var(--border-color); + border-radius: var(--radius); + position: relative; +} +.FreestyleUsage-preview:after { + content: "Preview"; + font-size: 0.7rem; + position: absolute; + right: 0; + top: 0; + background: #eee; + color: #777; + padding: 2px 8px; + display: block; + border-radius: 0 0 0 var(--radius); +} +.FreestyleUsage-sourceContainer, .FreestyleUsage-apiTable { + margin-left: -1rem; + margin-right: -1rem; +} +.FreestyleUsage-apiTable { + width: 100%; + padding: 0.5rem 0 0.2rem; + border-collapse: collapse; +} +.FreestyleUsage-apiTable th { + text-align: left; + font-size: 0.8rem; + font-weight: 600; + color: #777; +} +.FreestyleUsage-apiTable tr { + border-bottom: 1px solid var(--border-color); + vertical-align: top; +} +.FreestyleUsage-apiTable tr:nth-child(even) { + background-color: #f9f9f9; +} +.FreestyleUsage-apiTable th, +.FreestyleUsage-apiTable td { + padding: 0.5rem 1rem; +} +.FreestyleUsage-sourceContainer { + margin-top: 1rem; +} + +/* + FreestyleUsageArgument +*/ +.FreestyleUsageArgument { + font-size: 0.8rem; +} +.FreestyleUsageArgument-name { + font-weight: bold; + width: 20%; +} +.FreestyleUsageArgument-description { + width: 40%; +} +.FreestyleUsageArgument-required { + color: #d81c38; + font-style: oblique; +} +.FreestyleUsageArgument-default { + font-family: monospace; +} +.FreestyleUsageArgument-jsonViewer { + background-color: #222; + min-width: 300px; + padding: 1rem; +} + +.FreestyleUsageBoolean { + position: relative; + display: flex; +} +.FreestyleUsageBoolean:after { + content: "False"; + display: block; + position: absolute; + top: 2px; + left: 27px; + font-family: monospace; + color: #999; +} +.FreestyleUsageBoolean.is-checked:after { + content: "True"; + color: #333; + font-weight: 700; +} + +.FreestyleUsageArray-item { + margin: 0 0 0.5em 0; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.FreestyleUsageArray-removeItem, .FreestyleUsageArray-addItem { + background: transparent; + border: 0; + outline: 0; + cursor: pointer; + padding: 2px 4px; + text-transform: uppercase; + letter-spacing: 0.5px; + font-size: 0.8em; + border-radius: 4px; +} +.FreestyleUsageArray-removeItem { + color: #999; + opacity: 0.5; +} +.FreestyleUsageArray-addItem { + font-weight: 700; + padding: 3px 8px; + color: #666; + background: #ddd; +} +.FreestyleUsageArray-item:hover .FreestyleUsageArray-removeItem { + opacity: 1; +} + +.u-codePill { + background-color: #eee; + border-radius: 2px; + color: #777; + display: inline-block; + font-family: monospace; + margin-right: 0.2em; + padding: 1px 7px; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3057a4a2..2420bdc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7587,6 +7587,11 @@ human-signals@^2.1.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +husky@^7.0.4: + version "7.0.4" + resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535" + integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ== + iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"