diff --git a/.gitignore b/.gitignore index 09d0fb6f..b3df3b81 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,6 @@ build coverage/ node_modules npm-debug.log* -src/style.ts yarn-debug.log* yarn-error.log* docs/ diff --git a/build-style.sh b/build-style.sh deleted file mode 100755 index 3be5c106..00000000 --- a/build-style.sh +++ /dev/null @@ -1,5 +0,0 @@ -#!/usr/bin/env bash - -printf "// generated with build-style.sh\nexport default \`" > src/style.ts -npx sass vega-embed.scss >> src/style.ts -echo "\`;" >> src/style.ts diff --git a/package.json b/package.json index a02e3a1b..bd5fe8b7 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,6 @@ "release-it": "^19.0.3", "rollup": "4.44.2", "rollup-plugin-bundle-size": "^1.0.3", - "sass": "^1.89.2", "typedoc": "^0.28.7", "typescript": "^5.8.3", "typescript-eslint": "^8.36.0", @@ -82,16 +81,15 @@ "vega-tooltip": "1.0.0" }, "scripts": { - "prebuild": "npm run clean && npm run build:style", + "prebuild": "npm run clean", "build": "rollup -c", - "build:style": "./build-style.sh", - "clean": "del-cli build src/style.ts", + "clean": "del-cli build", "typedoc": "npm run build && typedoc src/embed.ts --out docs", "prepublishOnly": "npm run clean && npm run build", "preversion": "npm run lint && npm run test", "serve": "browser-sync start --directory -s -f build *.html", - "start": "npm run build && concurrently --kill-others -n Server,Rollup 'npm run serve' 'rollup -c -w'", - "pretest": "npm run build:style", + "start": "npm run build && concurrently --kill-others -n Server,Rollup \"npm run serve\" \"rollup -c -w\"", + "pretest": "npm run build", "test": "vitest run", "format": "eslint --fix && prettier . --write", "lint": "eslint && prettier . --check", diff --git a/src/style.ts b/src/style.ts new file mode 100644 index 00000000..aa8c63b3 --- /dev/null +++ b/src/style.ts @@ -0,0 +1,118 @@ +export default ` +.vega-embed { + position: relative; + display: inline-block; + box-sizing: border-box; +} + .vega-embed.has-actions { + padding-right: 38px; +} + .vega-embed details:not([open]) > :not(summary) { + display: none !important; +} + .vega-embed summary { + list-style: none; + position: absolute; + top: 0; + right: 0; + padding: 6px; + z-index: 1000; + background: white; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + color: #1b1e23; + border: 1px solid #aaa; + border-radius: 999px; + opacity: 0.2; + transition: opacity 0.4s ease-in; + cursor: pointer; + line-height: 0px; +} + .vega-embed summary::-webkit-details-marker { + display: none; +} + .vega-embed summary:active { + box-shadow: #aaa 0px 0px 0px 1px inset; +} + .vega-embed summary svg { + width: 14px; + height: 14px; +} + .vega-embed details[open] summary { + opacity: 0.7; +} + .vega-embed:hover summary, .vega-embed:focus-within summary { + opacity: 1 !important; + transition: opacity 0.2s ease; +} + .vega-embed .vega-actions { + position: absolute; + z-index: 1001; + top: 35px; + right: -9px; + display: flex; + flex-direction: column; + padding-bottom: 8px; + padding-top: 8px; + border-radius: 4px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); + border: 1px solid #d9d9d9; + background: white; + animation-duration: 0.15s; + animation-name: scale-in; + animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); + text-align: left; +} + .vega-embed .vega-actions a { + padding: 8px 16px; + font-family: sans-serif; + font-size: 14px; + font-weight: 600; + white-space: nowrap; + color: #434a56; + text-decoration: none; +} + .vega-embed .vega-actions a:hover, .vega-embed .vega-actions a:focus { + background-color: #f7f7f9; + color: black; +} + .vega-embed .vega-actions::before, .vega-embed .vega-actions::after { + content: ''; + display: inline-block; + position: absolute; +} + .vega-embed .vega-actions::before { + left: auto; + right: 14px; + top: -16px; + border: 8px solid #000 0; + border-bottom-color: #d9d9d9; +} + .vega-embed .vega-actions::after { + left: auto; + right: 15px; + top: -14px; + border: 7px solid #000 0; + border-bottom-color: #fff; +} + .vega-embed .chart-wrapper.fit-x { + width: 100%; +} + .vega-embed .chart-wrapper.fit-y { + height: 100%; +} + .vega-embed-wrapper { + max-width: 100%; + overflow: auto; + padding-right: 14px; +} + @keyframes scale-in { + from { + opacity: 0; + transform: scale(0.6); + } + to { + opacity: 1; + transform: scale(1); + } +} +`; \ No newline at end of file diff --git a/vega-embed.scss b/vega-embed.scss deleted file mode 100644 index f3101acf..00000000 --- a/vega-embed.scss +++ /dev/null @@ -1,139 +0,0 @@ -.vega-embed { - position: relative; - display: inline-block; - box-sizing: border-box; - - &.has-actions { - padding-right: 38px; - } - - details:not([open]) > :not(summary) { - display: none !important; - } - - summary { - list-style: none; - position: absolute; - top: 0; - right: 0; - padding: 6px; - z-index: 1000; - background: white; - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); - color: #1b1e23; - border: 1px solid #aaa; - border-radius: 999px; - opacity: 0.2; - transition: opacity 0.4s ease-in; - cursor: pointer; - line-height: 0px; // For Safari - - &::-webkit-details-marker { - display: none; - } - - &:active { - box-shadow: #aaa 0px 0px 0px 1px inset; - } - - svg { - width: 14px; - height: 14px; - } - } - - details[open] summary { - opacity: 0.7; - } - - &:hover summary, - &:focus-within summary { - opacity: 1 !important; - transition: opacity 0.2s ease; - } - - .vega-actions { - position: absolute; - z-index: 1001; - top: 35px; - right: -9px; - display: flex; - flex-direction: column; - padding-bottom: 8px; - padding-top: 8px; - border-radius: 4px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); - border: 1px solid #d9d9d9; - background: white; - animation-duration: 0.15s; - animation-name: scale-in; - animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); - text-align: left; // only to make sure this is not a a different value - - a { - padding: 8px 16px; - font-family: sans-serif; - font-size: 14px; - font-weight: 600; - white-space: nowrap; - color: #434a56; - text-decoration: none; - - &:hover, - &:focus { - background-color: #f7f7f9; - color: black; - } - } - - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - } - - &::before { - left: auto; - right: 14px; - top: -16px; - border: 8px solid #0000; - border-bottom-color: #d9d9d9; - } - - &::after { - left: auto; - right: 15px; - top: -14px; - border: 7px solid #0000; - border-bottom-color: #fff; - } - } - - .chart-wrapper { - &.fit-x { - width: 100%; - } - &.fit-y { - height: 100%; - } - } -} - -.vega-embed-wrapper { - max-width: 100%; - overflow: auto; - padding-right: 14px; -} - -@keyframes scale-in { - from { - opacity: 0; - transform: scale(0.6); - } - - to { - opacity: 1; - transform: scale(1); - } -}