From b7a3dd3e4f8f82c5a5ab5d155ee9d2eae576dbe4 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 14 Dec 2024 12:12:02 +0100 Subject: [PATCH] Closes #1513 Migrate to SASS modules --- build/plugins/esbuild-plugin-scss-bundle.ts | 39 ++--- build/tsup.config.ts | 1 - package.json | 2 +- packages/compass-plugin/src/index.ts | 2 +- packages/compass-plugin/src/styles/_vars.scss | 1 + .../src/{style.scss => styles/index.scss} | 11 +- packages/core/src/styles/_vars.scss | 119 ++++++++++++++++ packages/core/src/styles/index.scss | 21 ++- packages/core/src/styles/loader.scss | 18 +-- packages/core/src/styles/navbar.scss | 43 +++--- packages/core/src/styles/notification.scss | 20 +-- packages/core/src/styles/overlay.scss | 23 +-- packages/core/src/styles/panel.scss | 96 +++++++------ packages/core/src/styles/tooltip.scss | 54 +++---- packages/core/src/styles/viewer.scss | 6 +- packages/core/src/styles/zoom-range.scss | 28 ++-- packages/gallery-plugin/src/index.ts | 2 +- packages/gallery-plugin/src/styles/_vars.scss | 12 ++ .../src/{style.scss => styles/index.scss} | 54 +++---- packages/map-plugin/src/index.ts | 2 +- packages/map-plugin/src/styles/_vars.scss | 14 ++ .../src/{style.scss => styles/index.scss} | 90 +++++------- packages/markers-plugin/src/index.ts | 2 +- packages/markers-plugin/src/styles/_vars.scss | 1 + .../src/{style.scss => styles/index.scss} | 11 +- packages/plan-plugin/src/index.ts | 2 +- packages/plan-plugin/src/styles/_vars.scss | 7 + .../src/{style.scss => styles/index.scss} | 61 ++++---- packages/settings-plugin/src/index.ts | 2 +- packages/settings-plugin/src/style.scss | 103 -------------- .../settings-plugin/src/styles/_vars.scss | 13 ++ .../settings-plugin/src/styles/index.scss | 92 ++++++++++++ packages/shared/AbstractVideoAdapter.ts | 10 +- packages/shared/_vars.scss | 119 ---------------- packages/video-plugin/src/index.ts | 2 +- packages/video-plugin/src/styles/_vars.scss | 22 +++ .../src/{style.scss => styles/index.scss} | 88 +++++------- packages/virtual-tour-plugin/src/index.ts | 2 +- .../virtual-tour-plugin/src/styles/_vars.scss | 3 + .../src/{style.scss => styles/index.scss} | 31 ++-- yarn.lock | 134 +----------------- 41 files changed, 636 insertions(+), 727 deletions(-) create mode 100644 packages/compass-plugin/src/styles/_vars.scss rename packages/compass-plugin/src/{style.scss => styles/index.scss} (78%) create mode 100644 packages/core/src/styles/_vars.scss create mode 100644 packages/gallery-plugin/src/styles/_vars.scss rename packages/gallery-plugin/src/{style.scss => styles/index.scss} (58%) create mode 100644 packages/map-plugin/src/styles/_vars.scss rename packages/map-plugin/src/{style.scss => styles/index.scss} (56%) create mode 100644 packages/markers-plugin/src/styles/_vars.scss rename packages/markers-plugin/src/{style.scss => styles/index.scss} (78%) create mode 100644 packages/plan-plugin/src/styles/_vars.scss rename packages/plan-plugin/src/{style.scss => styles/index.scss} (60%) delete mode 100644 packages/settings-plugin/src/style.scss create mode 100644 packages/settings-plugin/src/styles/_vars.scss create mode 100644 packages/settings-plugin/src/styles/index.scss delete mode 100644 packages/shared/_vars.scss create mode 100644 packages/video-plugin/src/styles/_vars.scss rename packages/video-plugin/src/{style.scss => styles/index.scss} (53%) create mode 100644 packages/virtual-tour-plugin/src/styles/_vars.scss rename packages/virtual-tour-plugin/src/{style.scss => styles/index.scss} (68%) diff --git a/build/plugins/esbuild-plugin-scss-bundle.ts b/build/plugins/esbuild-plugin-scss-bundle.ts index 21d38249d..1a552849d 100644 --- a/build/plugins/esbuild-plugin-scss-bundle.ts +++ b/build/plugins/esbuild-plugin-scss-bundle.ts @@ -1,11 +1,10 @@ import type { Plugin } from 'esbuild'; -import { mkdir, writeFile } from 'fs/promises'; +import { mkdir, readFile, writeFile } from 'fs/promises'; +import { glob } from 'glob'; import path from 'path'; -import { Bundler } from 'scss-bundle'; -import prettyBytes from 'pretty-bytes'; /** - * Generates a bundled scss file + * Copy SCSS files and generates main index.scss */ export function scssBundlePlugin(): Plugin { return { @@ -15,25 +14,33 @@ export function scssBundlePlugin(): Plugin { return; } - const outdir = build.initialOptions.outdir; - const outpath = outdir + '/index.scss'; - build.onEnd((result) => { - const scssFile = Object.keys(result.metafile.inputs).find(file => file.endsWith('.scss')); + const scssFile = Object.keys(result.metafile.inputs).find(file => file.endsWith('index.scss')); if (!scssFile) { return; } + const outdir = build.initialOptions.outdir; const banner = build.initialOptions.banner.css; - return mkdir(path.resolve(outdir), { recursive: true }) - .then(() => new Bundler(undefined, process.cwd()).bundle(scssFile)) - .then(({ bundledContent }) => banner + '\n\n' + bundledContent) - .then((content) => { - console.log('SCSS', outpath, prettyBytes(content.length)); - return writeFile(path.resolve(outpath), content); - }) - .then(() => undefined); + console.log('SCSS', 'Copy files'); + + return mkdir(outdir + '/styles', { recursive: true }) + .then(() => glob(`${path.dirname(scssFile)}/*.scss`)) + .then(files => Promise.all([ + // generates entry point + writeFile(outdir + '/index.scss', `${banner}\n@forward 'styles/vars';\n@use 'styles/index';`), + // copy each file fixing paths to core + ...files.map(file => readFile(file, 'utf-8') + .then((content) => { + content = content.replace( + new RegExp(`../../../core/src/styles`, 'g'), + `../../core/styles`, + ); + return writeFile(outdir + '/styles/' + path.basename(file), content); + })), + ])) + .then(() => void 0); }); }, }; diff --git a/build/tsup.config.ts b/build/tsup.config.ts index 512866f8f..54310f5e3 100644 --- a/build/tsup.config.ts +++ b/build/tsup.config.ts @@ -3,7 +3,6 @@ import { sassPlugin } from 'esbuild-sass-plugin'; import { defineConfig } from 'tsup'; import { assetsPlugin } from './plugins/esbuild-plugin-assets'; import { budgetPlugin } from './plugins/esbuild-plugin-budget'; -// import { istanbulPlugin } from './plugins/esbuild-plugin-istanbul'; import { mapFixPlugin } from './plugins/esbuild-plugin-map-fix'; import { scssBundlePlugin } from './plugins/esbuild-plugin-scss-bundle'; import { license } from './templates/license'; diff --git a/package.json b/package.json index 89e66a5a8..e2f062792 100644 --- a/package.json +++ b/package.json @@ -44,12 +44,12 @@ "cypress-visual-regression": "^5.2.2", "esbuild-sass-plugin": "^3.3.1", "eslint": "^9.16.0", + "glob": "^10.4.5", "mocha": "^11.0.1", "mocha-junit-reporter": "^2.2.1", "nyc": "^17.1.0", "postcss": "^8.4.49", "queue": "^7.0.0", - "scss-bundle": "^3.1.2", "selfsigned": "^2.4.1", "sort-package-json": "^2.12.0", "stylelint": "^16.11.0", diff --git a/packages/compass-plugin/src/index.ts b/packages/compass-plugin/src/index.ts index a26f2cbc1..a809a431f 100644 --- a/packages/compass-plugin/src/index.ts +++ b/packages/compass-plugin/src/index.ts @@ -2,4 +2,4 @@ export { CompassPlugin } from './CompassPlugin'; export * from './model'; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/compass-plugin/src/styles/_vars.scss b/packages/compass-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..5740f242f --- /dev/null +++ b/packages/compass-plugin/src/styles/_vars.scss @@ -0,0 +1 @@ +$margin: 10px !default; diff --git a/packages/compass-plugin/src/style.scss b/packages/compass-plugin/src/styles/index.scss similarity index 78% rename from packages/compass-plugin/src/style.scss rename to packages/compass-plugin/src/styles/index.scss index a23c98366..6b3caf0c6 100644 --- a/packages/compass-plugin/src/style.scss +++ b/packages/compass-plugin/src/styles/index.scss @@ -1,6 +1,5 @@ -@import '../../shared/vars'; - -$psv-compass-margin: 10px !default; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as compass; .psv-container { --psv-compass-plugin-loaded: true; @@ -8,13 +7,13 @@ $psv-compass-margin: 10px !default; .psv-compass { position: absolute; - margin: $psv-compass-margin; - z-index: $psv-ui-zindex - 1; // under map/plan + margin: compass.$margin; + z-index: psv.$ui-zindex - 1; // under map/plan cursor: default; aspect-ratio: 1; @at-root .psv--has-navbar & { - margin-bottom: calc(#{$psv-navbar-height} + #{$psv-compass-margin}); + margin-bottom: calc(#{psv.$navbar-height} + #{compass.$margin}); } canvas, diff --git a/packages/core/src/styles/_vars.scss b/packages/core/src/styles/_vars.scss new file mode 100644 index 000000000..7b4d91263 --- /dev/null +++ b/packages/core/src/styles/_vars.scss @@ -0,0 +1,119 @@ +// *** MAIN *** +$main-background-stops: #fff 0%, + #fdfdfd 16%, + #fbfbfb 33%, + #f8f8f8 49%, + #efefef 66%, + #dfdfdf 82%, + #bfbfbf 100% !default; +$main-background: radial-gradient($main-background-stops) !default; +$element-focus-outline: 2px solid #007cff !default; + +// *** LOADER *** +$loader-bg-color: rgba(61, 61, 61, 0.5) !default; +$loader-color: rgba(255, 255, 255, 0.7) !default; +$loader-width: 150px !default; +$loader-tickness: 10px !default; +$loader-border: 3px !default; +$loader-font: 600 16px sans-serif !default; + +// *** NAVBAR *** +$navbar-height: 40px !default; +$navbar-background: rgba(61, 61, 61, 0.5) !default; + +$caption-font: 16px sans-serif !default; +$caption-text-color: rgba(255, 255, 255, 0.7) !default; + +$buttons-height: 20px !default; +$buttons-padding: (($navbar-height - $buttons-height) * 0.5) !default; +$buttons-background: transparent !default; +$buttons-active-background: rgba(255, 255, 255, 0.2) !default; +$buttons-color: rgba(255, 255, 255, 0.7) !default; +$buttons-disabled-opacity: 0.5 !default; + +$buttons-hover-scale: 1.2 !default; +$buttons-hover-scale-delay: 200ms !default; + +$zoom-range-width: 80px !default; +$zoom-range-tickness: 1px !default; +$zoom-range-diameter: 7px !default; +$zoom-range-media-min-width: 600px !default; + +// *** TOOLTIP *** +$tooltip-background: rgba(61, 61, 61, 0.8) !default; +$tooltip-animate-offset: 5px !default; +$tooltip-animate-delay: 100ms !default; +$tooltip-radius: 4px !default; +$tooltip-padding: 0.5em 1em !default; +$tooltip-arrow-size: 7px !default; +$tooltip-max-width: 200px !default; + +$tooltip-text-color: rgb(255, 255, 255) !default; +$tooltip-font: 14px sans-serif !default; +$tooltip-text-shadow: 0 1px #000 !default; + +$tooltip-shadow-color: rgba(90, 90, 90, 0.7) !default; +$tooltip-shadow-offset: 3px !default; // the shadow is always at the opposite side of the arrow + +// *** PANEL *** +$panel-background: rgba(10, 10, 10, 0.7) !default; +$panel-text-color: rgb(220, 220, 220) !default; +$panel-font: 16px sans-serif !default; +$panel-width: 400px !default; +$panel-padding: 1em !default; +$panel-animate-delay: 100ms !default; + +$panel-resizer-width: 9px !default; // must be odd +$panel-resizer-background: rgba(0, 0, 0, 0.9) !default; +$panel-resizer-grip-color: #fff !default; +$panel-resizer-grip-height: 29px !default; // must be odd +$panel-close-button-size: 32px !default; +$panel-close-button-background: $panel-resizer-background !default; +$panel-close-button-color: #fff !default; +$panel-close-button-animate-delay: 300ms !default; + +$panel-title-font: 24px sans-serif !default; +$panel-title-icon-size: 24px !default; +$panel-title-margin: 24px !default; + +$panel-menu-item-height: 1.5em !default; +$panel-menu-item-padding: 0.5em 1em !default; +$panel-menu-item-active-outline: 1px !default; +$panel-menu-odd-background: rgba(255, 255, 255, 0.1) !default; +$panel-menu-even-background: transparent !default; +$panel-menu-hover-background: rgba(255, 255, 255, 0.2) !default; + +// *** NOTIFICATION *** +$notification-position-from: -$navbar-height !default; +$notification-position-to: $navbar-height * 2 !default; +$notification-animate-delay: 200ms !default; +$notification-background: $tooltip-background !default; +$notification-radius: $tooltip-radius !default; +$notification-padding: $tooltip-padding !default; +$notification-font: $tooltip-font !default; +$notification-text-color: $tooltip-text-color !default; + +// *** OVERLAY *** +$overlay-opacity: 0.8 !default; +$overlay-icon-color: rgb(48, 48, 48) !default; +$overlay-title-font: 30px sans-serif !default; +$overlay-title-color: black !default; +$overlay-text-font: 20px sans-serif !default; +$overlay-text-color: rgba(0, 0, 0, 0.8) !default; +$overlay-image-size: ( + portrait: 50%, + landscape: 33%, +) !default; + +// *** Z-INDEXES *** +$canvas-zindex: 0 !default; +$hud-zindex: 10 !default; +$polygon-marker-zindex: 20 !default; +$marker-zindex: 30 !default; +$ui-zindex: 40 !default; +$tooltip-zindex: 50 !default; +$loader-zindex: 80 !default; +$panel-zindex: 90 !default; +$navbar-zindex: 90 !default; +$notification-zindex: 100 !default; +$overlay-zindex: 110 !default; diff --git a/packages/core/src/styles/index.scss b/packages/core/src/styles/index.scss index 81e6e3f0f..b305c731a 100644 --- a/packages/core/src/styles/index.scss +++ b/packages/core/src/styles/index.scss @@ -1,12 +1,9 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:math'; -@import '../../../shared/vars'; -@import 'viewer'; -@import 'loader'; -@import 'navbar'; -@import 'zoom-range'; -@import 'notification'; -@import 'overlay'; -@import 'panel'; -@import 'tooltip'; +@forward 'vars'; +@use 'viewer'; +@use 'loader'; +@use 'navbar'; +@use 'zoom-range'; +@use 'notification'; +@use 'overlay'; +@use 'panel'; +@use 'tooltip'; diff --git a/packages/core/src/styles/loader.scss b/packages/core/src/styles/loader.scss index 357ddb3c6..9de24c776 100644 --- a/packages/core/src/styles/loader.scss +++ b/packages/core/src/styles/loader.scss @@ -1,3 +1,5 @@ +@use 'vars' as psv; + .psv-loader-container { display: flex; align-items: center; @@ -7,20 +9,20 @@ left: 0; width: 100%; height: 100%; - z-index: $psv-loader-zindex; + z-index: psv.$loader-zindex; } .psv-loader { - --psv-loader-border: #{$psv-loader-border}; - --psv-loader-tickness: #{$psv-loader-tickness}; + --psv-loader-border: #{psv.$loader-border}; + --psv-loader-tickness: #{psv.$loader-tickness}; position: relative; display: flex; justify-content: center; align-items: center; - color: $psv-loader-color; - width: $psv-loader-width; - height: $psv-loader-width; + color: psv.$loader-color; + width: psv.$loader-width; + height: psv.$loader-width; &-canvas { position: absolute; @@ -28,12 +30,12 @@ left: 0; width: 100%; height: 100%; - color: $psv-loader-bg-color; + color: psv.$loader-bg-color; z-index: -1; } &-text { - font: $psv-loader-font; + font: psv.$loader-font; text-align: center; } } diff --git a/packages/core/src/styles/navbar.scss b/packages/core/src/styles/navbar.scss index 96fc611e1..919ba2b2d 100644 --- a/packages/core/src/styles/navbar.scss +++ b/packages/core/src/styles/navbar.scss @@ -1,14 +1,17 @@ +@use 'sass:list'; +@use 'vars' as psv; + .psv-navbar { display: flex; position: absolute; - z-index: $psv-navbar-zindex; - bottom: -$psv-navbar-height; + z-index: psv.$navbar-zindex; + bottom: -#{psv.$navbar-height}; left: 0; width: 100%; - height: $psv-navbar-height; - background: $psv-navbar-background; + height: psv.$navbar-height; + background: psv.$navbar-background; transition: bottom ease-in-out 0.1s; - font: $psv-caption-font; + font: psv.$caption-font; cursor: default; &--open { @@ -23,47 +26,47 @@ .psv-button { flex: 0 0 auto; - padding: $psv-buttons-padding; + padding: psv.$buttons-padding; position: relative; cursor: pointer; - height: $psv-buttons-height; - width: $psv-buttons-height; - background: $psv-buttons-background; - color: $psv-buttons-color; + height: psv.$buttons-height; + width: psv.$buttons-height; + background: psv.$buttons-background; + color: psv.$buttons-color; &--active { - background: $psv-buttons-active-background; + background: psv.$buttons-active-background; } &--disabled { pointer-events: none; - opacity: $psv-buttons-disabled-opacity; + opacity: psv.$buttons-disabled-opacity; } &-svg { width: 100%; transform: scale(1); - transition: transform $psv-buttons-hover-scale-delay ease; + transition: transform psv.$buttons-hover-scale-delay ease; vertical-align: initial; } } .psv-button:not(.psv-button--disabled):focus-visible { - outline: $psv-element-focus-outline; - outline-offset: -#{list.nth($psv-element-focus-outline, 1)}; + outline: psv.$element-focus-outline; + outline-offset: -#{list.nth(psv.$element-focus-outline, 1)}; } .psv-container:not(.psv--is-touch) .psv-button--hover-scale:not(.psv-button--disabled):hover .psv-button-svg { - transform: scale($psv-buttons-hover-scale); + transform: scale(psv.$buttons-hover-scale); } .psv-move-button + .psv-move-button { - margin-left: -$psv-buttons-padding; + margin-left: -#{psv.$buttons-padding}; } .psv-custom-button { width: auto; - min-width: $psv-buttons-height; + min-width: psv.$buttons-height; &--no-padding { padding: 0; @@ -73,7 +76,7 @@ .psv-caption { flex: 1 1 100%; - color: $psv-caption-text-color; + color: psv.$caption-text-color; overflow: hidden; text-align: center; cursor: unset; @@ -83,7 +86,7 @@ &-content { display: inline-block; - padding: $psv-buttons-padding; + padding: psv.$buttons-padding; white-space: nowrap; } } diff --git a/packages/core/src/styles/notification.scss b/packages/core/src/styles/notification.scss index c3adacfa4..39c0cc7bf 100644 --- a/packages/core/src/styles/notification.scss +++ b/packages/core/src/styles/notification.scss @@ -1,7 +1,9 @@ +@use 'vars' as psv; + .psv-notification { position: absolute; - z-index: $psv-notification-zindex; - bottom: $psv-notification-position-from; + z-index: psv.$notification-zindex; + bottom: psv.$notification-position-from; display: flex; justify-content: center; box-sizing: border-box; @@ -10,19 +12,19 @@ opacity: 0; transition-property: opacity, bottom; transition-timing-function: ease-in-out; - transition-duration: $psv-notification-animate-delay; + transition-duration: psv.$notification-animate-delay; &-content { max-width: 50em; - background: $psv-notification-background; - border-radius: $psv-notification-radius; - padding: $psv-notification-padding; - font: $psv-notification-font; - color: $psv-notification-text-color; + background: psv.$notification-background; + border-radius: psv.$notification-radius; + padding: psv.$notification-padding; + font: psv.$notification-font; + color: psv.$notification-text-color; } &--visible { opacity: 100; - bottom: $psv-notification-position-to; + bottom: psv.$notification-position-to; } } diff --git a/packages/core/src/styles/overlay.scss b/packages/core/src/styles/overlay.scss index eedb1c708..803735109 100644 --- a/packages/core/src/styles/overlay.scss +++ b/packages/core/src/styles/overlay.scss @@ -1,39 +1,42 @@ +@use 'sass:map'; +@use 'vars' as psv; + .psv-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; - z-index: $psv-overlay-zindex; + z-index: psv.$overlay-zindex; inset: 0; - background: $psv-main-background; - opacity: $psv-overlay-opacity; + background: psv.$main-background; + opacity: psv.$overlay-opacity; cursor: default; &-image { width: 100%; text-align: center; - color: $psv-overlay-icon-color; + color: psv.$overlay-icon-color; svg { - width: map.get($psv-overlay-image-size, portrait); + width: map.get(psv.$overlay-image-size, portrait); @container psv-container (orientation: landscape) { - width: map.get($psv-overlay-image-size, landscape); + width: map.get(psv.$overlay-image-size, landscape); } } } &-title { - color: $psv-overlay-title-color; + color: psv.$overlay-title-color; margin-top: 1em; - font: $psv-overlay-title-font; + font: psv.$overlay-title-font; text-align: center; } &-text { - color: $psv-overlay-text-color; - font: $psv-overlay-text-font; + color: psv.$overlay-text-color; + font: psv.$overlay-text-font; opacity: 0.8; text-align: center; } diff --git a/packages/core/src/styles/panel.scss b/packages/core/src/styles/panel.scss index 1b76feb67..16c8d0d21 100644 --- a/packages/core/src/styles/panel.scss +++ b/packages/core/src/styles/panel.scss @@ -1,3 +1,7 @@ +@use 'sass:math'; +@use 'sass:list'; +@use 'vars' as psv; + @function make-dot-shadow($color, $w, $h) { $val: 1px 0 $color; $x: 3; @@ -18,22 +22,22 @@ .psv-panel { position: absolute; - z-index: $psv-panel-zindex; + z-index: psv.$panel-zindex; right: 0; height: 100%; - width: $psv-panel-width; - max-width: calc(100% - #{$psv-panel-resizer-width}); - background: $psv-panel-background; + width: psv.$panel-width; + max-width: calc(100% - #{psv.$panel-resizer-width}); + background: psv.$panel-background; transform: translate3d(100%, 0, 0); opacity: 0; transition-property: opacity, transform; transition-timing-function: ease-in-out; - transition-duration: $psv-panel-animate-delay; + transition-duration: psv.$panel-animate-delay; cursor: default; - margin-left: $psv-panel-resizer-width; + margin-left: psv.$panel-resizer-width; .psv--has-navbar & { - height: calc(100% - #{$psv-navbar-height}); + height: calc(100% - #{psv.$navbar-height}); } &-close-button { @@ -41,20 +45,20 @@ position: absolute; top: -1px; right: 0; - width: math.div($psv-panel-close-button-size, 5) * 3; - height: math.div($psv-panel-close-button-size, 5) * 3; - padding: math.div($psv-panel-close-button-size, 5); + width: math.div(psv.$panel-close-button-size, 5) * 3; + height: math.div(psv.$panel-close-button-size, 5) * 3; + padding: math.div(psv.$panel-close-button-size, 5); background: transparent; - color: $psv-panel-close-button-color; - transition: background $psv-panel-close-button-animate-delay ease-in-out; + color: psv.$panel-close-button-color; + transition: background psv.$panel-close-button-animate-delay ease-in-out; cursor: pointer; svg { - transition: transform $psv-panel-close-button-animate-delay ease-in-out; + transition: transform psv.$panel-close-button-animate-delay ease-in-out; } &:hover { - background: $psv-panel-close-button-background; + background: psv.$panel-close-button-background; svg { transform: scale(-1); @@ -66,27 +70,27 @@ display: none; position: absolute; top: 0; - left: -$psv-panel-resizer-width; - width: $psv-panel-resizer-width; + left: -#{psv.$panel-resizer-width}; + width: psv.$panel-resizer-width; height: 100%; - background-color: $psv-panel-resizer-background; + background-color: psv.$panel-resizer-background; cursor: col-resize; - $psv-panel-resizer-grip-width: $psv-panel-resizer-width - 4px; + $panel-resizer-grip-width: psv.$panel-resizer-width - 4px; - @if $psv-panel-resizer-grip-width > 0 { + @if $panel-resizer-grip-width > 0 { &::before { content: ''; position: absolute; top: 50%; - left: ($psv-panel-resizer-width - $psv-panel-resizer-grip-width) * 0.5 - 1px; - margin-top: (-$psv-panel-resizer-grip-height * 0.5); + left: #{psv.$panel-resizer-width - $panel-resizer-grip-width * 0.5 - 1px}; + margin-top: -#{psv.$panel-resizer-grip-height * 0.5}; width: 1px; height: 1px; box-shadow: make-dot-shadow( - $psv-panel-resizer-grip-color, - $psv-panel-resizer-grip-width, - $psv-panel-resizer-grip-height + psv.$panel-resizer-grip-color, + $panel-resizer-grip-width, + psv.$panel-resizer-grip-height ); background: transparent; } @@ -97,12 +101,12 @@ width: 100%; height: 100%; box-sizing: border-box; - color: $psv-panel-text-color; - font: $psv-panel-font; + color: psv.$panel-text-color; + font: psv.$panel-font; overflow: auto; &:not(&--no-margin) { - padding: $psv-panel-padding; + padding: psv.$panel-padding; } &--no-interaction { @@ -122,7 +126,7 @@ } } - @container psv-container (max-width: #{$psv-panel-width}) { + @container psv-container (max-width: #{psv.$panel-width}) { width: 100% !important; max-width: none; @@ -141,14 +145,14 @@ flex: none; display: flex; align-items: center; - font: $psv-panel-title-font; - margin: $psv-panel-title-margin $psv-panel-title-margin * 0.5; + font: psv.$panel-title-font; + margin: psv.$panel-title-margin psv.$panel-title-margin * 0.5; /* stylelint-disable-next-line no-descending-specificity */ svg { - width: $psv-panel-title-icon-size; - height: $psv-panel-title-icon-size; - margin-right: $psv-panel-title-margin * 0.5; + width: psv.$panel-title-icon-size; + height: psv.$panel-title-icon-size; + margin-right: psv.$panel-title-margin * 0.5; } } @@ -161,8 +165,8 @@ } &-item { - min-height: $psv-panel-menu-item-height; - padding: $psv-panel-menu-item-padding; + min-height: psv.$panel-menu-item-height; + padding: psv.$panel-menu-item-padding; cursor: pointer; display: flex; align-items: center; @@ -170,15 +174,15 @@ transition: background 0.1s ease-in-out; &--active { - outline: $psv-panel-menu-item-active-outline solid currentcolor; - outline-offset: -$psv-panel-menu-item-active-outline; + outline: psv.$panel-menu-item-active-outline solid currentcolor; + outline-offset: -#{psv.$panel-menu-item-active-outline}; } &-icon { flex: none; - height: $psv-panel-menu-item-height; - width: $psv-panel-menu-item-height; - margin-right: #{list.nth($psv-panel-menu-item-padding, 1)}; + height: psv.$panel-menu-item-height; + width: psv.$panel-menu-item-height; + margin-right: #{list.nth(psv.$panel-menu-item-padding, 1)}; img { max-width: 100%; @@ -193,28 +197,28 @@ } &:focus-visible { - outline: $psv-element-focus-outline; - outline-offset: -#{list.nth($psv-element-focus-outline, 1)}; + outline: psv.$element-focus-outline; + outline-offset: -#{list.nth(psv.$element-focus-outline, 1)}; } } &--stripped &-item { &:hover { - background: $psv-panel-menu-hover-background; + background: psv.$panel-menu-hover-background; } &:nth-child(odd), &:nth-child(odd)::before { - background: $psv-panel-menu-odd-background; + background: psv.$panel-menu-odd-background; } &:nth-child(even), &:nth-child(even)::before { - background: $psv-panel-menu-even-background; + background: psv.$panel-menu-even-background; } } } .psv-container:not(.psv--is-touch) .psv-panel-menu-item:hover { - background: $psv-panel-menu-hover-background; + background: psv.$panel-menu-hover-background; } diff --git a/packages/core/src/styles/tooltip.scss b/packages/core/src/styles/tooltip.scss index 0452ea51f..c23166e63 100644 --- a/packages/core/src/styles/tooltip.scss +++ b/packages/core/src/styles/tooltip.scss @@ -1,104 +1,106 @@ +@use 'vars' as psv; + .psv-tooltip { position: absolute; - z-index: $psv-tooltip-zindex; + z-index: psv.$tooltip-zindex; box-sizing: border-box; - max-width: $psv-tooltip-max-width; - background: $psv-tooltip-background; - border-radius: $psv-tooltip-radius; + max-width: psv.$tooltip-max-width; + background: psv.$tooltip-background; + border-radius: psv.$tooltip-radius; opacity: 0; transition-property: opacity, transform; transition-timing-function: ease-in-out; - transition-duration: $psv-tooltip-animate-delay; + transition-duration: psv.$tooltip-animate-delay; cursor: default; &-content { - color: $psv-tooltip-text-color; - font: $psv-tooltip-font; - text-shadow: $psv-tooltip-text-shadow; - padding: $psv-tooltip-padding; + color: psv.$tooltip-text-color; + font: psv.$tooltip-font; + text-shadow: psv.$tooltip-text-shadow; + padding: psv.$tooltip-padding; } &-arrow { position: absolute; height: 0; width: 0; - border: $psv-tooltip-arrow-size solid transparent; + border: psv.$tooltip-arrow-size solid transparent; } &--top-left, &--top-center, &--top-right { - transform: translate3d(0, $psv-tooltip-animate-offset, 0); + transform: translate3d(0, psv.$tooltip-animate-offset, 0); .psv-tooltip-arrow { - border-top-color: $psv-tooltip-background; + border-top-color: psv.$tooltip-background; } } &--bottom-left, &--bottom-center, &--bottom-right { - transform: translate3d(0, -$psv-tooltip-animate-offset, 0); + transform: translate3d(0, -#{psv.$tooltip-animate-offset}, 0); .psv-tooltip-arrow { - border-bottom-color: $psv-tooltip-background; + border-bottom-color: psv.$tooltip-background; } } &--left-top, &--center-left, &--left-bottom { - transform: translate3d($psv-tooltip-animate-offset, 0, 0); + transform: translate3d(psv.$tooltip-animate-offset, 0, 0); .psv-tooltip-arrow { - border-left-color: $psv-tooltip-background; + border-left-color: psv.$tooltip-background; } } &--right-top, &--center-right, &--right-bottom { - transform: translate3d(-$psv-tooltip-animate-offset, 0, 0); + transform: translate3d(-#{psv.$tooltip-animate-offset}, 0, 0); .psv-tooltip-arrow { - border-right-color: $psv-tooltip-background; + border-right-color: psv.$tooltip-background; } } &--left-top, &--top-left { - box-shadow: #{-$psv-tooltip-shadow-offset} #{-$psv-tooltip-shadow-offset} 0 $psv-tooltip-shadow-color; + box-shadow: -#{psv.$tooltip-shadow-offset} -#{psv.$tooltip-shadow-offset} 0 psv.$tooltip-shadow-color; } &--top-center { - box-shadow: 0 #{-$psv-tooltip-shadow-offset} 0 $psv-tooltip-shadow-color; + box-shadow: 0 -#{psv.$tooltip-shadow-offset} 0 psv.$tooltip-shadow-color; } &--right-top, &--top-right { - box-shadow: $psv-tooltip-shadow-offset #{-$psv-tooltip-shadow-offset} 0 $psv-tooltip-shadow-color; + box-shadow: psv.$tooltip-shadow-offset -#{psv.$tooltip-shadow-offset} 0 psv.$tooltip-shadow-color; } &--left-bottom, &--bottom-left { - box-shadow: #{-$psv-tooltip-shadow-offset} $psv-tooltip-shadow-offset 0 $psv-tooltip-shadow-color; + box-shadow: -#{psv.$tooltip-shadow-offset} psv.$tooltip-shadow-offset 0 psv.$tooltip-shadow-color; } &--bottom-center { - box-shadow: 0 $psv-tooltip-shadow-offset 0 $psv-tooltip-shadow-color; + box-shadow: 0 psv.$tooltip-shadow-offset 0 psv.$tooltip-shadow-color; } &--right-bottom, &--bottom-right { - box-shadow: $psv-tooltip-shadow-offset $psv-tooltip-shadow-offset 0 $psv-tooltip-shadow-color; + box-shadow: psv.$tooltip-shadow-offset psv.$tooltip-shadow-offset 0 psv.$tooltip-shadow-color; } &--center-left { - box-shadow: #{-$psv-tooltip-shadow-offset} 0 0 $psv-tooltip-shadow-color; + box-shadow: -#{psv.$tooltip-shadow-offset} 0 0 psv.$tooltip-shadow-color; } &--center-right { - box-shadow: $psv-tooltip-shadow-offset 0 0 $psv-tooltip-shadow-color; + box-shadow: psv.$tooltip-shadow-offset 0 0 psv.$tooltip-shadow-color; } &--visible { diff --git a/packages/core/src/styles/viewer.scss b/packages/core/src/styles/viewer.scss index 5d5859622..b9bdded88 100644 --- a/packages/core/src/styles/viewer.scss +++ b/packages/core/src/styles/viewer.scss @@ -1,3 +1,5 @@ +@use 'vars' as psv; + .psv-container { --psv-core-loaded: true; @@ -8,7 +10,7 @@ margin: 0; padding: 0; position: relative; - background: $psv-main-background; + background: psv.$main-background; overflow: hidden; * { @@ -20,7 +22,7 @@ position: absolute; top: 0; left: 0; - z-index: $psv-canvas-zindex; + z-index: psv.$canvas-zindex; transition: opacity linear 100ms; } diff --git a/packages/core/src/styles/zoom-range.scss b/packages/core/src/styles/zoom-range.scss index 10088b78b..85a86ac8b 100644 --- a/packages/core/src/styles/zoom-range.scss +++ b/packages/core/src/styles/zoom-range.scss @@ -1,34 +1,36 @@ +@use 'vars' as psv; + .psv-zoom-range { &.psv-button { - width: $psv-zoom-range-width; - height: $psv-zoom-range-tickness; - margin: $psv-buttons-padding 0; - padding: #{($psv-buttons-height - $psv-zoom-range-tickness) * 0.5} 0; - max-width: $psv-zoom-range-media-min-width; // trick for JS access + width: psv.$zoom-range-width; + height: psv.$zoom-range-tickness; + margin: psv.$buttons-padding 0; + padding: #{(psv.$buttons-height - psv.$zoom-range-tickness) * 0.5} 0; + max-width: psv.$zoom-range-media-min-width; // trick for JS access } &-line { position: relative; - width: $psv-zoom-range-width; - height: $psv-zoom-range-tickness; - background: $psv-buttons-color; + width: psv.$zoom-range-width; + height: psv.$zoom-range-tickness; + background: psv.$buttons-color; transition: all 0.3s ease; } &-handle { position: absolute; border-radius: 50%; - top: #{($psv-zoom-range-tickness - $psv-zoom-range-diameter) * 0.5}; - width: $psv-zoom-range-diameter; - height: $psv-zoom-range-diameter; - background: $psv-buttons-color; + top: #{(psv.$zoom-range-tickness - psv.$zoom-range-diameter) * 0.5}; + width: psv.$zoom-range-diameter; + height: psv.$zoom-range-diameter; + background: psv.$buttons-color; transform: scale(1); transition: transform 0.3s ease; } &:not(.psv-button--disabled):hover { .psv-zoom-range-line { - box-shadow: 0 0 2px $psv-buttons-color; + box-shadow: 0 0 2px psv.$buttons-color; } .psv-zoom-range-handle { diff --git a/packages/gallery-plugin/src/index.ts b/packages/gallery-plugin/src/index.ts index 21744b907..bf555e767 100644 --- a/packages/gallery-plugin/src/index.ts +++ b/packages/gallery-plugin/src/index.ts @@ -10,4 +10,4 @@ export * from './model'; export { events }; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/gallery-plugin/src/styles/_vars.scss b/packages/gallery-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..66a5f5c68 --- /dev/null +++ b/packages/gallery-plugin/src/styles/_vars.scss @@ -0,0 +1,12 @@ +@use '../../../core/src/styles/vars' as psv; + +$padding: 15px !default; +$border: 1px solid psv.$caption-text-color !default; +$background: psv.$navbar-background !default; +$item-radius: 5px !default; +$item-active-border: 3px solid white !default; +$title-font: psv.$caption-font !default; +$title-color: psv.$caption-text-color !default; +$title-background: rgba(0, 0, 0, 0.6) !default; +$thumb-hover-scale: 1.2 !default; +$breakpoint: 500px !default; diff --git a/packages/gallery-plugin/src/style.scss b/packages/gallery-plugin/src/styles/index.scss similarity index 58% rename from packages/gallery-plugin/src/style.scss rename to packages/gallery-plugin/src/styles/index.scss index 0d09ec980..e611b47b0 100644 --- a/packages/gallery-plugin/src/style.scss +++ b/packages/gallery-plugin/src/styles/index.scss @@ -1,38 +1,28 @@ -@import '../../shared/vars'; - -$psv-gallery-padding: 15px !default; -$psv-gallery-border: 1px solid $psv-caption-text-color !default; -$psv-gallery-background: $psv-navbar-background !default; -$psv-gallery-item-radius: 5px !default; -$psv-gallery-item-active-border: 3px solid white !default; -$psv-gallery-title-font: $psv-caption-font !default; -$psv-gallery-title-color: $psv-caption-text-color !default; -$psv-gallery-title-background: rgba(0, 0, 0, 0.6) !default; -$psv-gallery-thumb-hover-scale: 1.2 !default; -$psv-gallery-breakpoint: 500px !default; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as gallery; .psv-container { --psv-gallery-plugin-loaded: true; } .psv-gallery { - --psv-gallery-breakpoint: #{$psv-gallery-breakpoint}; + --psv-gallery-breakpoint: #{gallery.$breakpoint}; position: absolute; left: 0; bottom: 0; width: 100%; - background: $psv-gallery-background; - border-bottom: $psv-gallery-border; + background: gallery.$background; + border-bottom: gallery.$border; overflow: hidden; transition: transform ease-in-out 0.1s; transform: translateY(100%); - z-index: $psv-ui-zindex + 1; // above map/plan + z-index: psv.$ui-zindex + 1; // above map/plan cursor: default; @at-root .psv--has-navbar & { - bottom: $psv-navbar-height; - transform: translateY(calc(100% + #{$psv-navbar-height})); + bottom: psv.$navbar-height; + transform: translateY(calc(100% + #{psv.$navbar-height})); } &--open { @@ -42,19 +32,19 @@ $psv-gallery-breakpoint: 500px !default; &-container { display: flex; align-content: flex-start; - padding: $psv-gallery-padding; + padding: gallery.$padding; overflow-x: auto; } &-item { flex: none; position: relative; - border-radius: $psv-gallery-item-radius; + border-radius: gallery.$item-radius; overflow: hidden; cursor: pointer; &:not(:last-child) { - margin-right: $psv-gallery-padding; + margin-right: gallery.$padding; } &-title { @@ -68,10 +58,10 @@ $psv-gallery-breakpoint: 500px !default; width: 100%; height: 2.2em; padding: 0.5em; - background: $psv-gallery-title-background; - font: $psv-gallery-title-font; + background: gallery.$title-background; + font: gallery.$title-font; line-height: 1.2em; - color: $psv-gallery-title-color; + color: gallery.$title-color; z-index: 2; transition: height ease-in-out 0.2s; @@ -105,7 +95,7 @@ $psv-gallery-breakpoint: 500px !default; } &:hover &-thumb { - transform: scale3d($psv-gallery-thumb-hover-scale, $psv-gallery-thumb-hover-scale, 1); + transform: scale3d(gallery.$thumb-hover-scale, gallery.$thumb-hover-scale, 1); } &--active::after { @@ -116,25 +106,25 @@ $psv-gallery-breakpoint: 500px !default; width: 100%; height: 100%; box-sizing: border-box; - border: $psv-gallery-item-active-border; + border: gallery.$item-active-border; z-index: 3; } } - @container psv-container (max-width: #{$psv-gallery-breakpoint}) { + @container psv-container (max-width: #{gallery.$breakpoint}) { top: 0; &-container { flex-wrap: wrap; - height: calc(100% - #{$psv-panel-close-button-size}); - margin-top: $psv-panel-close-button-size; - padding: 0 0 0 $psv-gallery-padding; + height: calc(100% - #{psv.$panel-close-button-size}); + margin-top: psv.$panel-close-button-size; + padding: 0 0 0 gallery.$padding; overflow: hidden auto; } &-item { - width: calc(50% - #{$psv-gallery-padding}) !important; - margin-bottom: $psv-gallery-padding; + width: calc(50% - #{gallery.$padding}) !important; + margin-bottom: gallery.$padding; } .psv-panel-close-button { diff --git a/packages/map-plugin/src/index.ts b/packages/map-plugin/src/index.ts index 1418ea462..4a36b639a 100644 --- a/packages/map-plugin/src/index.ts +++ b/packages/map-plugin/src/index.ts @@ -12,4 +12,4 @@ export * from './model'; export { events }; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/map-plugin/src/styles/_vars.scss b/packages/map-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..0f00d061f --- /dev/null +++ b/packages/map-plugin/src/styles/_vars.scss @@ -0,0 +1,14 @@ +@use '../../../core/src/styles/vars' as psv; + +$margin: 10px !default; +$radius: 8px !default; +$shadow: 0 0 5px rgba(0, 0, 0, 0.7) !default; +$background: rgba(61, 61, 61, 0.7) !default; +$toolbar-font: 12px sans-serif !default; +$toolbar-background: #222 !default; +$toolbar-text-color: white !default; +$button-size: 34px !default; +$button-spacing: 3px !default; +$button-color: psv.$buttons-color !default; +$button-background: rgba(0, 0, 0, 0.5) !default; +$transition: ease-in-out 0.3s !default; diff --git a/packages/map-plugin/src/style.scss b/packages/map-plugin/src/styles/index.scss similarity index 56% rename from packages/map-plugin/src/style.scss rename to packages/map-plugin/src/styles/index.scss index ba22eb0d9..b03d0d710 100644 --- a/packages/map-plugin/src/style.scss +++ b/packages/map-plugin/src/styles/index.scss @@ -1,18 +1,6 @@ @use 'sass:math'; -@import '../../shared/vars'; - -$psv-map-margin: 10px !default; -$psv-map-radius: 8px !default; -$psv-map-shadow: 0 0 5px rgba(0, 0, 0, 0.7) !default; -$psv-map-background: rgba(61, 61, 61, 0.7) !default; -$psv-map-toolbar-font: 12px sans-serif !default; -$psv-map-toolbar-background: #222 !default; -$psv-map-toolbar-text-color: white !default; -$psv-map-button-size: 34px !default; -$psv-map-button-spacing: 3px !default; -$psv-map-button-color: $psv-buttons-color !default; -$psv-map-button-background: rgba(0, 0, 0, 0.5) !default; -$psv-map-transition: ease-in-out 0.3s !default; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as map; @function round-to($value, $precision) { @return math.div(math.round($value * $precision), $precision); @@ -24,9 +12,9 @@ $psv-map-transition: ease-in-out 0.3s !default; .psv-map { position: absolute; - margin: $psv-map-margin; - z-index: $psv-ui-zindex; - transition: all $psv-map-transition; + margin: map.$margin; + z-index: psv.$ui-zindex; + transition: all map.$transition; &__container { position: absolute; @@ -35,9 +23,9 @@ $psv-map-transition: ease-in-out 0.3s !default; width: 100%; height: 100%; z-index: -1; - background: $psv-map-background; + background: map.$background; overflow: hidden; - transition: all $psv-map-transition; + transition: all map.$transition; svg, img, @@ -49,12 +37,12 @@ $psv-map-transition: ease-in-out 0.3s !default; &--round &__container { border-radius: 50%; - box-shadow: $psv-map-shadow; + box-shadow: map.$shadow; } &--square { - border-radius: $psv-map-radius; - box-shadow: $psv-map-shadow; + border-radius: map.$radius; + box-shadow: map.$shadow; overflow: hidden; } @@ -74,13 +62,13 @@ $psv-map-transition: ease-in-out 0.3s !default; display: flex; justify-content: center; align-items: center; - font: $psv-map-toolbar-font; + font: map.$toolbar-font; padding: 0.25em; border-radius: 1.5em; - background: $psv-map-toolbar-background; - color: $psv-map-toolbar-text-color; + background: map.$toolbar-background; + color: map.$toolbar-text-color; user-select: none; - transition: opacity $psv-map-transition; + transition: opacity map.$transition; svg { height: 1em; @@ -95,17 +83,17 @@ $psv-map-transition: ease-in-out 0.3s !default; &__button { position: absolute; - width: $psv-map-button-size; + width: map.$button-size; aspect-ratio: 1; line-height: 0; - background: $psv-map-button-background; + background: map.$button-background; display: flex; justify-content: center; align-items: center; transform-origin: center; - color: $psv-map-button-color; + color: map.$button-color; cursor: pointer; - transition: all $psv-map-transition; + transition: all map.$transition; svg { width: 60%; @@ -114,29 +102,29 @@ $psv-map-transition: ease-in-out 0.3s !default; &--top-left { left: 0; top: 0; - border-bottom-right-radius: $psv-map-radius; - transform: translate(-$psv-map-button-spacing, -$psv-map-button-spacing); + border-bottom-right-radius: map.$radius; + transform: translate(-#{map.$button-spacing}, -#{map.$button-spacing}); } &--top-right { right: 0; top: 0; - border-bottom-left-radius: $psv-map-radius; - transform: translate($psv-map-button-spacing, -$psv-map-button-spacing); + border-bottom-left-radius: map.$radius; + transform: translate(map.$button-spacing, -#{map.$button-spacing}); } &--bottom-left { left: 0; bottom: 0; - border-top-right-radius: $psv-map-radius; - transform: translate(-$psv-map-button-spacing, $psv-map-button-spacing); + border-top-right-radius: map.$radius; + transform: translate(-#{map.$button-spacing}, map.$button-spacing); } &--bottom-right { right: 0; bottom: 0; - border-top-left-radius: $psv-map-radius; - transform: translate($psv-map-button-spacing, $psv-map-button-spacing); + border-top-left-radius: map.$radius; + transform: translate(map.$button-spacing, map.$button-spacing); } } @@ -154,7 +142,7 @@ $psv-map-transition: ease-in-out 0.3s !default; height: 100% !important; @at-root .psv--has-navbar & { - height: calc(100% - #{$psv-navbar-height}) !important; + height: calc(100% - #{psv.$navbar-height}) !important; } } @@ -166,29 +154,29 @@ $psv-map-transition: ease-in-out 0.3s !default; outline: 2px solid currentcolor; &--top-left { - left: $psv-map-margin; - top: $psv-map-margin; + left: map.$margin; + top: map.$margin; } &--top-right { - right: $psv-map-margin; - top: $psv-map-margin; + right: map.$margin; + top: map.$margin; } &--bottom-left { - left: $psv-map-margin; - bottom: $psv-map-margin; + left: map.$margin; + bottom: map.$margin; } &--bottom-right { - right: $psv-map-margin; - bottom: $psv-map-margin; + right: map.$margin; + bottom: map.$margin; } } &--collapsed { - width: $psv-map-button-size !important; - height: $psv-map-button-size !important; + width: map.$button-size !important; + height: map.$button-size !important; & > * { opacity: 0; @@ -216,7 +204,7 @@ $psv-map-transition: ease-in-out 0.3s !default; left: 0; @at-root .psv--has-navbar & { - bottom: #{$psv-navbar-height}; + bottom: #{psv.$navbar-height}; } } @@ -225,7 +213,7 @@ $psv-map-transition: ease-in-out 0.3s !default; right: 0; @at-root .psv--has-navbar & { - bottom: #{$psv-navbar-height}; + bottom: #{psv.$navbar-height}; } } } diff --git a/packages/markers-plugin/src/index.ts b/packages/markers-plugin/src/index.ts index edd144c81..9314e3e1e 100644 --- a/packages/markers-plugin/src/index.ts +++ b/packages/markers-plugin/src/index.ts @@ -15,4 +15,4 @@ export * from './model'; export { events }; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/markers-plugin/src/styles/_vars.scss b/packages/markers-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..cd46aad48 --- /dev/null +++ b/packages/markers-plugin/src/styles/_vars.scss @@ -0,0 +1 @@ +/* no vars */ diff --git a/packages/markers-plugin/src/style.scss b/packages/markers-plugin/src/styles/index.scss similarity index 78% rename from packages/markers-plugin/src/style.scss rename to packages/markers-plugin/src/styles/index.scss index 8cf26f055..07a202114 100644 --- a/packages/markers-plugin/src/style.scss +++ b/packages/markers-plugin/src/styles/index.scss @@ -1,4 +1,5 @@ -@import '../../shared/vars'; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as markers; .psv-container { --psv-markers-plugin-loaded: true; @@ -7,7 +8,7 @@ .psv-markers { pointer-events: none; position: absolute; - z-index: $psv-hud-zindex; + z-index: psv.$hud-zindex; width: 100%; height: 100%; @@ -17,12 +18,12 @@ left: 0; width: 100%; height: 100%; - z-index: $psv-polygon-marker-zindex; + z-index: psv.$polygon-marker-zindex; } &-css3d-container { position: absolute; - z-index: $psv-polygon-marker-zindex + 1; + z-index: psv.$polygon-marker-zindex + 1; } } @@ -34,7 +35,7 @@ position: absolute; top: 0; left: 0; - z-index: $psv-marker-zindex; + z-index: psv.$marker-zindex; overflow: visible; background-size: contain; background-repeat: no-repeat; diff --git a/packages/plan-plugin/src/index.ts b/packages/plan-plugin/src/index.ts index 3fc2e5879..ee354e9a8 100644 --- a/packages/plan-plugin/src/index.ts +++ b/packages/plan-plugin/src/index.ts @@ -12,4 +12,4 @@ export * from './model'; export { events }; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/plan-plugin/src/styles/_vars.scss b/packages/plan-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..f0d78246b --- /dev/null +++ b/packages/plan-plugin/src/styles/_vars.scss @@ -0,0 +1,7 @@ +$margin: 10px !default; +$radius: 8px !default; +$shadow: 0 0 5px rgba(0, 0, 0, 0.7) !default; +$button-size: 34px !default; +$button-background: rgba(0, 0, 0, 0.5) !default; +$button-color: white !default; +$transition: ease-in-out 0.3s !default; diff --git a/packages/plan-plugin/src/style.scss b/packages/plan-plugin/src/styles/index.scss similarity index 60% rename from packages/plan-plugin/src/style.scss rename to packages/plan-plugin/src/styles/index.scss index 9c5a049e7..f783f13c9 100644 --- a/packages/plan-plugin/src/style.scss +++ b/packages/plan-plugin/src/styles/index.scss @@ -1,13 +1,6 @@ @use 'sass:math'; -@import '../../shared/vars'; - -$psv-plan-margin: 10px !default; -$psv-plan-radius: 8px !default; -$psv-plan-shadow: 0 0 5px rgba(0, 0, 0, 0.7) !default; -$psv-plan-button-size: 34px !default; -$psv-plan-button-background: rgba(0, 0, 0, 0.5) !default; -$psv-plan-button-color: white !default; -$psv-plan-transition: ease-in-out 0.3s !default; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as plan; .psv-container { --psv-plan-plugin-loaded: true; @@ -15,17 +8,17 @@ $psv-plan-transition: ease-in-out 0.3s !default; .psv-plan { position: absolute; - margin: $psv-plan-margin; - z-index: $psv-ui-zindex; + margin: plan.$margin; + z-index: psv.$ui-zindex; overflow: hidden; - border-radius: $psv-plan-radius; - transition: all $psv-plan-transition; - box-shadow: $psv-plan-shadow; - max-width: calc(100% - #{$psv-plan-margin * 2}); - max-height: calc(100% - #{$psv-plan-margin * 2}); + border-radius: plan.$radius; + transition: all plan.$transition; + box-shadow: plan.$shadow; + max-width: calc(100% - #{plan.$margin * 2}); + max-height: calc(100% - #{plan.$margin * 2}); @at-root .psv--has-navbar & { - max-height: calc(100% - #{$psv-plan-margin * 2} - #{$psv-navbar-height}); + max-height: calc(100% - #{plan.$margin * 2} - #{psv.$navbar-height}); } &__container { @@ -35,20 +28,20 @@ $psv-plan-transition: ease-in-out 0.3s !default; width: 100%; height: 100%; z-index: 0; - transition: opacity $psv-plan-transition; + transition: opacity plan.$transition; } &__button { position: absolute; - width: $psv-plan-button-size; + width: plan.$button-size; aspect-ratio: 1; line-height: 0; - background: $psv-plan-button-background; + background: plan.$button-background; display: flex; justify-content: center; align-items: center; transform-origin: center; - color: $psv-plan-button-color; + color: plan.$button-color; cursor: pointer; svg { @@ -58,34 +51,34 @@ $psv-plan-transition: ease-in-out 0.3s !default; &--top-left { left: 0; top: 0; - border-bottom-right-radius: $psv-plan-radius; + border-bottom-right-radius: plan.$radius; } &--top-right { right: 0; top: 0; - border-bottom-left-radius: $psv-plan-radius; + border-bottom-left-radius: plan.$radius; } &--bottom-left { left: 0; bottom: 0; - border-top-right-radius: $psv-plan-radius; + border-top-right-radius: plan.$radius; } &--bottom-right { right: 0; bottom: 0; - border-top-left-radius: $psv-plan-radius; + border-top-left-radius: plan.$radius; } } &--maximized { - width: calc(100% - #{$psv-plan-margin * 2}) !important; - height: calc(100% - #{$psv-plan-margin * 2}) !important; + width: calc(100% - #{plan.$margin * 2}) !important; + height: calc(100% - #{plan.$margin * 2}) !important; @at-root .psv--has-navbar & { - height: calc(100% - #{$psv-navbar-height} - #{$psv-plan-margin * 2}) !important; + height: calc(100% - #{psv.$navbar-height} - #{plan.$margin * 2}) !important; } @container psv-container (max-width: 500px) { @@ -97,15 +90,15 @@ $psv-plan-transition: ease-in-out 0.3s !default; border-radius: 0; @at-root .psv--has-navbar & { - height: calc(100% - #{$psv-navbar-height}) !important; - max-height: calc(100% - #{$psv-navbar-height}); + height: calc(100% - #{psv.$navbar-height}) !important; + max-height: calc(100% - #{psv.$navbar-height}); } } } &--collapsed { - width: $psv-plan-button-size !important; - height: $psv-plan-button-size !important; + width: plan.$button-size !important; + height: plan.$button-size !important; & > * { opacity: 0; @@ -132,7 +125,7 @@ $psv-plan-transition: ease-in-out 0.3s !default; left: 0; @at-root .psv--has-navbar & { - bottom: #{$psv-navbar-height}; + bottom: #{psv.$navbar-height}; } } @@ -141,7 +134,7 @@ $psv-plan-transition: ease-in-out 0.3s !default; right: 0; @at-root .psv--has-navbar & { - bottom: #{$psv-navbar-height}; + bottom: #{psv.$navbar-height}; } } diff --git a/packages/settings-plugin/src/index.ts b/packages/settings-plugin/src/index.ts index 7f4dc6775..7325e90a1 100644 --- a/packages/settings-plugin/src/index.ts +++ b/packages/settings-plugin/src/index.ts @@ -10,4 +10,4 @@ export * from './model'; export { events }; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/settings-plugin/src/style.scss b/packages/settings-plugin/src/style.scss deleted file mode 100644 index 9cc3653c9..000000000 --- a/packages/settings-plugin/src/style.scss +++ /dev/null @@ -1,103 +0,0 @@ -@use 'sass:list'; -@import '../../shared/vars'; - -$psv-settings-margin: 10px !default; -$psv-settings-font: $psv-caption-font !default; -$psv-settings-item-height: $psv-panel-menu-item-height !default; -$psv-settings-item-padding: $psv-panel-menu-item-padding !default; -$psv-settings-background: $psv-panel-background !default; -$psv-settings-shadow: 0 0 5px $psv-settings-background !default; -$psv-settings-text-color: $psv-panel-text-color !default; -$psv-settings-hover-background: $psv-panel-menu-hover-background !default; -$psv-settings-badge-font: 10px / 0.9 monospace !default; -$psv-settings-badge-background: #111 !default; -$psv-settings-badge-text-color: white !default; - -.psv-container { - --psv-settings-plugin-loaded: true; -} - -.psv-settings { - position: absolute; - bottom: $psv-navbar-height; - background: $psv-settings-background; - box-shadow: $psv-settings-shadow; - font: $psv-settings-font; - color: $psv-settings-text-color; - z-index: $psv-navbar-zindex; - opacity: 0; - transition: opacity 0.1s linear; - margin: $psv-settings-margin; - - &--open { - opacity: 1; - } - - &-list { - list-style: none; - margin: 0; - padding: 0; - } -} - -.psv-settings-item { - height: $psv-settings-item-height; - padding: $psv-settings-item-padding; - display: flex; - align-items: center; - justify-content: flex-start; - cursor: pointer; - - &:hover { - background: $psv-settings-hover-background; - } - - &:focus-visible { - outline: $psv-element-focus-outline; - outline-offset: -#{list.nth($psv-element-focus-outline, 1)}; - } - - *:not(:last-child) { - margin-right: 1em; - } - - &-label { - flex: 1; - font-weight: bold; - } - - &-value { - flex: none; - } - - &-icon { - flex: none; - height: 1em; - width: 1em; - - svg { - width: 100%; - height: 100%; - vertical-align: initial; - } - } - - &--header { - border-bottom: 1px solid currentcolor; - - svg { - transform: scaleX(-1); - } - } -} - -.psv-settings-badge { - position: absolute; - top: 10%; - right: 10%; - border-radius: 0.2em; - padding: 0.2em; - background: $psv-settings-badge-background; - color: $psv-settings-badge-text-color; - font: $psv-settings-badge-font; -} diff --git a/packages/settings-plugin/src/styles/_vars.scss b/packages/settings-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..7c9f05dfe --- /dev/null +++ b/packages/settings-plugin/src/styles/_vars.scss @@ -0,0 +1,13 @@ +@use '../../../core/src/styles/vars' as psv; + +$margin: 10px !default; +$font: psv.$caption-font !default; +$item-height: psv.$panel-menu-item-height !default; +$item-padding: psv.$panel-menu-item-padding !default; +$background: psv.$panel-background !default; +$shadow: 0 0 5px $background !default; +$text-color: psv.$panel-text-color !default; +$hover-background: psv.$panel-menu-hover-background !default; +$badge-font: 10px / 0.9 monospace !default; +$badge-background: #111 !default; +$badge-text-color: white !default; diff --git a/packages/settings-plugin/src/styles/index.scss b/packages/settings-plugin/src/styles/index.scss new file mode 100644 index 000000000..8d81908aa --- /dev/null +++ b/packages/settings-plugin/src/styles/index.scss @@ -0,0 +1,92 @@ +@use 'sass:list'; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as settings; + +.psv-container { + --psv-settings-plugin-loaded: true; +} + +.psv-settings { + position: absolute; + bottom: psv.$navbar-height; + background: settings.$background; + box-shadow: settings.$shadow; + font: settings.$font; + color: settings.$text-color; + z-index: psv.$navbar-zindex; + opacity: 0; + transition: opacity 0.1s linear; + margin: settings.$margin; + + &--open { + opacity: 1; + } + + &-list { + list-style: none; + margin: 0; + padding: 0; + } +} + +.psv-settings-item { + height: settings.$item-height; + padding: settings.$item-padding; + display: flex; + align-items: center; + justify-content: flex-start; + cursor: pointer; + + &:hover { + background: settings.$hover-background; + } + + &:focus-visible { + outline: psv.$element-focus-outline; + outline-offset: -#{list.nth(psv.$element-focus-outline, 1)}; + } + + *:not(:last-child) { + margin-right: 1em; + } + + &-label { + flex: 1; + font-weight: bold; + } + + &-value { + flex: none; + } + + &-icon { + flex: none; + height: 1em; + width: 1em; + + svg { + width: 100%; + height: 100%; + vertical-align: initial; + } + } + + &--header { + border-bottom: 1px solid currentcolor; + + svg { + transform: scaleX(-1); + } + } +} + +.psv-settings-badge { + position: absolute; + top: 10%; + right: 10%; + border-radius: 0.2em; + padding: 0.2em; + background: settings.$badge-background; + color: settings.$badge-text-color; + font: settings.$badge-font; +} diff --git a/packages/shared/AbstractVideoAdapter.ts b/packages/shared/AbstractVideoAdapter.ts index 4527c0706..0243e4974 100644 --- a/packages/shared/AbstractVideoAdapter.ts +++ b/packages/shared/AbstractVideoAdapter.ts @@ -73,11 +73,11 @@ export abstract class AbstractVideoAdapter< const video = panorama.source instanceof HTMLVideoElement ? panorama.source : createVideo({ - src: panorama.source, - withCredentials: this.viewer.config.withCredentials, - muted: this.config.muted, - autoplay: false, - }); + src: panorama.source, + withCredentials: this.viewer.config.withCredentials, + muted: this.config.muted, + autoplay: false, + }); await this.__videoLoadPromise(video); diff --git a/packages/shared/_vars.scss b/packages/shared/_vars.scss deleted file mode 100644 index 92f9c0b90..000000000 --- a/packages/shared/_vars.scss +++ /dev/null @@ -1,119 +0,0 @@ -// *** MAIN *** -$psv-main-background-stops: #fff 0%, - #fdfdfd 16%, - #fbfbfb 33%, - #f8f8f8 49%, - #efefef 66%, - #dfdfdf 82%, - #bfbfbf 100% !default; -$psv-main-background: radial-gradient($psv-main-background-stops) !default; -$psv-element-focus-outline: 2px solid #007cff !default; - -// *** LOADER *** -$psv-loader-bg-color: rgba(61, 61, 61, 0.5) !default; -$psv-loader-color: rgba(255, 255, 255, 0.7) !default; -$psv-loader-width: 150px !default; -$psv-loader-tickness: 10px !default; -$psv-loader-border: 3px !default; -$psv-loader-font: 600 16px sans-serif !default; - -// *** NAVBAR *** -$psv-navbar-height: 40px !default; -$psv-navbar-background: rgba(61, 61, 61, 0.5) !default; - -$psv-caption-font: 16px sans-serif !default; -$psv-caption-text-color: rgba(255, 255, 255, 0.7) !default; - -$psv-buttons-height: 20px !default; -$psv-buttons-padding: (($psv-navbar-height - $psv-buttons-height) * 0.5) !default; -$psv-buttons-background: transparent !default; -$psv-buttons-active-background: rgba(255, 255, 255, 0.2) !default; -$psv-buttons-color: rgba(255, 255, 255, 0.7) !default; -$psv-buttons-disabled-opacity: 0.5 !default; - -$psv-buttons-hover-scale: 1.2 !default; -$psv-buttons-hover-scale-delay: 200ms !default; - -$psv-zoom-range-width: 80px !default; -$psv-zoom-range-tickness: 1px !default; -$psv-zoom-range-diameter: 7px !default; -$psv-zoom-range-media-min-width: 600px !default; - -// *** TOOLTIP *** -$psv-tooltip-background: rgba(61, 61, 61, 0.8) !default; -$psv-tooltip-animate-offset: 5px !default; -$psv-tooltip-animate-delay: 100ms !default; -$psv-tooltip-radius: 4px !default; -$psv-tooltip-padding: 0.5em 1em !default; -$psv-tooltip-arrow-size: 7px !default; -$psv-tooltip-max-width: 200px !default; - -$psv-tooltip-text-color: rgb(255, 255, 255) !default; -$psv-tooltip-font: 14px sans-serif !default; -$psv-tooltip-text-shadow: 0 1px #000 !default; - -$psv-tooltip-shadow-color: rgba(90, 90, 90, 0.7) !default; -$psv-tooltip-shadow-offset: 3px !default; // the shadow is always at the opposite side of the arrow - -// *** PANEL *** -$psv-panel-background: rgba(10, 10, 10, 0.7) !default; -$psv-panel-text-color: rgb(220, 220, 220) !default; -$psv-panel-font: 16px sans-serif !default; -$psv-panel-width: 400px !default; -$psv-panel-padding: 1em !default; -$psv-panel-animate-delay: 100ms !default; - -$psv-panel-resizer-width: 9px !default; // must be odd -$psv-panel-resizer-background: rgba(0, 0, 0, 0.9) !default; -$psv-panel-resizer-grip-color: #fff !default; -$psv-panel-resizer-grip-height: 29px !default; // must be odd -$psv-panel-close-button-size: 32px !default; -$psv-panel-close-button-background: $psv-panel-resizer-background !default; -$psv-panel-close-button-color: #fff !default; -$psv-panel-close-button-animate-delay: 300ms !default; - -$psv-panel-title-font: 24px sans-serif !default; -$psv-panel-title-icon-size: 24px !default; -$psv-panel-title-margin: 24px !default; - -$psv-panel-menu-item-height: 1.5em !default; -$psv-panel-menu-item-padding: 0.5em 1em !default; -$psv-panel-menu-item-active-outline: 1px !default; -$psv-panel-menu-odd-background: rgba(255, 255, 255, 0.1) !default; -$psv-panel-menu-even-background: transparent !default; -$psv-panel-menu-hover-background: rgba(255, 255, 255, 0.2) !default; - -// *** NOTIFICATION *** -$psv-notification-position-from: -$psv-navbar-height !default; -$psv-notification-position-to: $psv-navbar-height * 2 !default; -$psv-notification-animate-delay: 200ms !default; -$psv-notification-background: $psv-tooltip-background !default; -$psv-notification-radius: $psv-tooltip-radius !default; -$psv-notification-padding: $psv-tooltip-padding !default; -$psv-notification-font: $psv-tooltip-font !default; -$psv-notification-text-color: $psv-tooltip-text-color !default; - -// *** OVERLAY *** -$psv-overlay-opacity: 0.8 !default; -$psv-overlay-icon-color: rgb(48, 48, 48) !default; -$psv-overlay-title-font: 30px sans-serif !default; -$psv-overlay-title-color: black !default; -$psv-overlay-text-font: 20px sans-serif !default; -$psv-overlay-text-color: rgba(0, 0, 0, 0.8) !default; -$psv-overlay-image-size: ( - portrait: 50%, - landscape: 33%, -) !default; - -// *** Z-INDEXES *** -$psv-canvas-zindex: 0 !default; -$psv-hud-zindex: 10 !default; -$psv-polygon-marker-zindex: 20 !default; -$psv-marker-zindex: 30 !default; -$psv-ui-zindex: 40 !default; -$psv-tooltip-zindex: 50 !default; -$psv-loader-zindex: 80 !default; -$psv-panel-zindex: 90 !default; -$psv-navbar-zindex: 90 !default; -$psv-notification-zindex: 100 !default; -$psv-overlay-zindex: 110 !default; diff --git a/packages/video-plugin/src/index.ts b/packages/video-plugin/src/index.ts index 4568dffcd..50de99989 100644 --- a/packages/video-plugin/src/index.ts +++ b/packages/video-plugin/src/index.ts @@ -16,4 +16,4 @@ export * from './model'; export { events }; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/video-plugin/src/styles/_vars.scss b/packages/video-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..1857935e1 --- /dev/null +++ b/packages/video-plugin/src/styles/_vars.scss @@ -0,0 +1,22 @@ +@use '../../../core/src/styles/vars' as psv; + +$progressbar-height: 3px !default; +$progressbar-height-active: 5px !default; +$progressbar-container: 20px !default; +$progressbar-progress-color: psv.$buttons-color !default; +$progressbar-buffer-color: psv.$buttons-active-background !default; +$progressbar-handle-size: 9px !default; +$progressbar-handle-color: white !default; + +$volume-height: 80px !default; +$volume-width: $progressbar-height-active !default; +$volume-bar-color: $progressbar-progress-color !default; +$volume-track-color: $progressbar-buffer-color !default; +$volume-handle-size: $progressbar-handle-size !default; +$volume-handle-color: $progressbar-handle-color !default; + +$bigbutton-size: ( + portrait: 20vw, + landscape: 10vw, +) !default; +$bigbutton-color: psv.$buttons-color !default; diff --git a/packages/video-plugin/src/style.scss b/packages/video-plugin/src/styles/index.scss similarity index 53% rename from packages/video-plugin/src/style.scss rename to packages/video-plugin/src/styles/index.scss index e8228f977..39321e0a0 100644 --- a/packages/video-plugin/src/style.scss +++ b/packages/video-plugin/src/styles/index.scss @@ -1,26 +1,6 @@ @use 'sass:map'; -@import '../../shared/vars'; - -$psv-progressbar-height: 3px !default; -$psv-progressbar-height-active: 5px !default; -$psv-progressbar-container: 20px !default; -$psv-progressbar-progress-color: $psv-buttons-color !default; -$psv-progressbar-buffer-color: $psv-buttons-active-background !default; -$psv-progressbar-handle-size: 9px !default; -$psv-progressbar-handle-color: white !default; - -$psv-volume-height: 80px !default; -$psv-volume-width: $psv-progressbar-height-active !default; -$psv-volume-bar-color: $psv-progressbar-progress-color !default; -$psv-volume-track-color: $psv-progressbar-buffer-color !default; -$psv-volume-handle-size: $psv-progressbar-handle-size !default; -$psv-volume-handle-color: $psv-progressbar-handle-color !default; - -$psv-video-bigbutton-size: ( - portrait: 20vw, - landscape: 10vw, -) !default; -$psv-video-bigbutton-color: $psv-buttons-color !default; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as video; .psv-container { --psv-video-plugin-loaded: true; @@ -32,12 +12,12 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; left: 0; bottom: 0; width: 100%; - height: $psv-progressbar-container; + height: video.$progressbar-container; cursor: pointer; - z-index: $psv-navbar-zindex - 1; + z-index: psv.$navbar-zindex - 1; @at-root .psv--has-navbar & { - bottom: $psv-navbar-height; + bottom: psv.$navbar-height; } & > * { @@ -45,30 +25,30 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; left: 0; bottom: 0; width: 100%; - height: $psv-progressbar-height; + height: video.$progressbar-height; transition: height 0.2s linear; } &:hover > * { - height: $psv-progressbar-height-active; + height: video.$progressbar-height-active; } &__progress { - background-color: $psv-progressbar-progress-color; + background-color: video.$progressbar-progress-color; } &__buffer { - background-color: $psv-progressbar-buffer-color; + background-color: video.$progressbar-buffer-color; } &__handle { display: none; - height: $psv-progressbar-handle-size !important; - width: $psv-progressbar-handle-size; + height: video.$progressbar-handle-size !important; + width: video.$progressbar-handle-size; border-radius: 50%; - margin-bottom: #{- ($psv-progressbar-handle-size - $psv-progressbar-height-active) * 0.5}; - margin-left: #{- $psv-progressbar-handle-size * 0.5}; - background: $psv-progressbar-handle-color; + margin-bottom: #{- (video.$progressbar-handle-size - video.$progressbar-height-active) * 0.5}; + margin-left: #{- video.$progressbar-handle-size * 0.5}; + background: video.$progressbar-handle-color; } } @@ -85,12 +65,12 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; &__container { position: absolute; left: 0; - bottom: $psv-navbar-height; - padding: $psv-buttons-height 0; - width: $psv-navbar-height; + bottom: psv.$navbar-height; + padding: psv.$buttons-height 0; + width: psv.$navbar-height; height: 0; opacity: 0; - background: $psv-navbar-background; + background: psv.$navbar-background; transition: opacity 0.2s linear, height 0.3s step-end; @@ -102,32 +82,32 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; &__range { position: relative; - height: $psv-volume-height; + height: video.$volume-height; } &__progress, &__track { position: absolute; bottom: 0; - left: #{($psv-navbar-height - $psv-volume-width) * 0.5}; - width: $psv-volume-width; - background: $psv-volume-bar-color; + left: #{(psv.$navbar-height - video.$volume-width) * 0.5}; + width: video.$volume-width; + background: video.$volume-bar-color; } &__track { height: 100%; - background: $psv-volume-track-color; + background: video.$volume-track-color; } &__handle { position: absolute; - left: #{($psv-navbar-height - $psv-volume-width) * 0.5}; - height: $psv-volume-handle-size; - width: $psv-volume-handle-size; + left: #{(psv.$navbar-height - video.$volume-width) * 0.5}; + height: video.$volume-handle-size; + width: video.$volume-handle-size; border-radius: 50%; - margin-left: #{- ($psv-volume-handle-size - $psv-volume-width) * 0.5}; - margin-bottom: #{- $psv-volume-handle-size * 0.5}; - background: $psv-volume-handle-color; + margin-left: #{- (video.$volume-handle-size - video.$volume-width) * 0.5}; + margin-bottom: #{- video.$volume-handle-size * 0.5}; + background: video.$volume-handle-color; } } @@ -135,7 +115,7 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; position: relative; &:hover .psv-video-volume__container { - height: $psv-volume-height; + height: video.$volume-height; opacity: 1; transition-timing-function: linear, step-start; transition-delay: 0.2s; @@ -180,7 +160,7 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; display: flex; align-items: center; justify-content: center; - z-index: $psv-overlay-zindex; + z-index: psv.$overlay-zindex; pointer-events: none; } @@ -189,7 +169,7 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; border: none; background: none; padding: 0; - color: $psv-video-bigbutton-color; + color: video.$bigbutton-color; pointer-events: auto; cursor: pointer; opacity: 0; @@ -199,12 +179,12 @@ $psv-video-bigbutton-color: $psv-buttons-color !default; width 0.3s step-end; &--pause { - width: map.get($psv-video-bigbutton-size, portrait); + width: map.get(video.$bigbutton-size, portrait); opacity: 1; transition-timing-function: linear, step-start; @container psv-container (orientation: landscape) { - width: map.get($psv-video-bigbutton-size, landscape); + width: map.get(video.$bigbutton-size, landscape); } } diff --git a/packages/virtual-tour-plugin/src/index.ts b/packages/virtual-tour-plugin/src/index.ts index 207c046f4..d35c604d2 100644 --- a/packages/virtual-tour-plugin/src/index.ts +++ b/packages/virtual-tour-plugin/src/index.ts @@ -5,4 +5,4 @@ export { VirtualTourPlugin } from './VirtualTourPlugin'; export { events }; /** @internal */ -import './style.scss'; +import './styles/index.scss'; diff --git a/packages/virtual-tour-plugin/src/styles/_vars.scss b/packages/virtual-tour-plugin/src/styles/_vars.scss new file mode 100644 index 000000000..96c3918db --- /dev/null +++ b/packages/virtual-tour-plugin/src/styles/_vars.scss @@ -0,0 +1,3 @@ +$link-button-color: rgba(255, 255, 255, 0.8) !default; +$link-button-ring: rgb(97, 170, 242) !default; +$link-shadow: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) !default; diff --git a/packages/virtual-tour-plugin/src/style.scss b/packages/virtual-tour-plugin/src/styles/index.scss similarity index 68% rename from packages/virtual-tour-plugin/src/style.scss rename to packages/virtual-tour-plugin/src/styles/index.scss index aafed504b..3952c8471 100644 --- a/packages/virtual-tour-plugin/src/style.scss +++ b/packages/virtual-tour-plugin/src/styles/index.scss @@ -1,9 +1,6 @@ @use 'sass:list'; -@import '../../shared/vars'; - -$psv-virtual-tour-link-button-color: rgba(255, 255, 255, 0.8) !default; -$psv-virtual-tour-link-button-ring: rgb(97, 170, 242) !default; -$psv-virtual-tour-link-shadow: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) !default; +@use '../../../core/src/styles/vars' as psv; +@use 'vars' as virtual-tour; .psv-container { --psv-virtual-tour-plugin-loaded: true; @@ -16,25 +13,25 @@ $psv-virtual-tour-link-shadow: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) !defau line-height: normal; &:not(:last-child) { - margin-bottom: #{list.nth($psv-tooltip-padding, 1)}; + margin-bottom: #{list.nth(psv.$tooltip-padding, 1)}; } } img { display: block; - width: $psv-tooltip-max-width; - margin: 0 #{- list.nth($psv-tooltip-padding, 2)}; + width: psv.$tooltip-max-width; + margin: 0 #{- list.nth(psv.$tooltip-padding, 2)}; &:first-child { - border-radius: $psv-tooltip-radius $psv-tooltip-radius 0 0; + border-radius: psv.$tooltip-radius psv.$tooltip-radius 0 0; } &:last-child { - border-radius: 0 0 $psv-tooltip-radius $psv-tooltip-radius; + border-radius: 0 0 psv.$tooltip-radius psv.$tooltip-radius; } &:not(:last-child) { - margin-bottom: #{list.nth($psv-tooltip-padding, 1)}; + margin-bottom: #{list.nth(psv.$tooltip-padding, 1)}; } } @@ -53,10 +50,10 @@ $psv-virtual-tour-link-shadow: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) !defau .psv-virtual-tour-arrows { position: absolute; overflow: visible !important; - z-index: $psv-hud-zindex + 1; + z-index: psv.$hud-zindex + 1; bottom: 0; left: 0; - filter: $psv-virtual-tour-link-shadow; + filter: virtual-tour.$link-shadow; pointer-events: none; transition: margin ease-in-out 0.3s; @@ -75,7 +72,7 @@ $psv-virtual-tour-link-shadow: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) !defau padding: 0; border: none; background: none; - color: $psv-virtual-tour-link-button-color; + color: virtual-tour.$link-button-color; border-radius: 50%; &:hover { @@ -130,14 +127,14 @@ $psv-virtual-tour-link-shadow: drop-shadow(0 10px 2px rgba(0, 0, 0, 0.7)) !defau @keyframes psv-virtual-tour-link-button-in { 0% { - box-shadow: 0 0 0 0 rgba($psv-virtual-tour-link-button-ring, 0); + box-shadow: 0 0 0 0 rgba(virtual-tour.$link-button-ring, 0); } 20% { - box-shadow: 0 0 0 5px rgba($psv-virtual-tour-link-button-ring, 1); + box-shadow: 0 0 0 5px rgba(virtual-tour.$link-button-ring, 1); } 100% { - box-shadow: 0 0 0 20px rgba($psv-virtual-tour-link-button-ring, 0); + box-shadow: 0 0 0 20px rgba(virtual-tour.$link-button-ring, 0); } } diff --git a/yarn.lock b/yarn.lock index 7b1aba118..a45108ad1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1145,43 +1145,16 @@ resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.3.tgz#eff0245735c04a928bb19c026b58c2a56460539d" integrity sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA== -"@types/archy@^0.0.31": - version "0.0.31" - resolved "https://registry.yarnpkg.com/@types/archy/-/archy-0.0.31.tgz#01650a4641e7e1d11dbd64eda42eec9a2f829c7f" - integrity sha512-v+dxizsFVyXgD3EpFuqT9YjdEjbJmPxNf1QIX9ohZOhxh1ZF2yhqv3vYaeum9lg3VghhxS5S0a6yldN9J9lPEQ== - -"@types/debug@^4.1.5": - version "4.1.12" - resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917" - integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ== - dependencies: - "@types/ms" "*" - "@types/estree@1.0.6", "@types/estree@^1.0.6": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50" integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw== -"@types/fs-extra@^8.0.1": - version "8.1.5" - resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.5.tgz#33aae2962d3b3ec9219b5aca2555ee00274f5927" - integrity sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ== - dependencies: - "@types/node" "*" - "@types/geojson@*": version "7946.0.14" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613" integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg== -"@types/glob@^7.1.1": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb" - integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA== - dependencies: - "@types/minimatch" "*" - "@types/node" "*" - "@types/hast@^3.0.0", "@types/hast@^3.0.4": version "3.0.4" resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa" @@ -1206,18 +1179,6 @@ resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76" integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q== -"@types/lodash.debounce@^4.0.6": - version "4.0.9" - resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz#0f5f21c507bce7521b5e30e7a24440975ac860a5" - integrity sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ== - dependencies: - "@types/lodash" "*" - -"@types/lodash@*": - version "4.17.13" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.13.tgz#786e2d67cfd95e32862143abe7463a7f90c300eb" - integrity sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg== - "@types/markdown-it@^14.1.2": version "14.1.2" resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61" @@ -1238,21 +1199,11 @@ resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd" integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg== -"@types/minimatch@*": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca" - integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA== - "@types/mocha@^10.0.9": version "10.0.9" resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.9.tgz#101e9da88d2c02e5ac8952982c23b224524d662a" integrity sha512-sicdRoWtYevwxjOHNMPTl3vSfJM6oyW8o1wXeI7uww6b6xHg8eBznQDNSGBCDJmsE8UMxP05JgZRtsKbTqt//Q== -"@types/ms@*": - version "0.7.34" - resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433" - integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g== - "@types/node-forge@^1.3.0": version "1.3.11" resolved "https://registry.yarnpkg.com/@types/node-forge/-/node-forge-1.3.11.tgz#0972ea538ddb0f4d9c2fa0ec5db5724773a604da" @@ -1267,13 +1218,6 @@ dependencies: undici-types "~6.19.8" -"@types/sass@^1.16.0": - version "1.45.0" - resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.45.0.tgz#a949eb1e080ff34715e6c2040357b940bffb89bb" - integrity sha512-jn7qwGFmJHwUSphV8zZneO3GmtlgLsmhs/LQyVvQbIIa+fzGMUiHI4HXJZL3FT8MJmgXWbLGiVVY7ElvHq6vDA== - dependencies: - sass "*" - "@types/sinonjs__fake-timers@8.1.1": version "8.1.1" resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3" @@ -1984,14 +1928,6 @@ chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" - integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== - dependencies: - ansi-styles "^4.1.0" - supports-color "^7.1.0" - character-entities-html4@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b" @@ -2012,7 +1948,7 @@ check-more-types@^2.24.0: resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600" integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA== -chokidar@^3.3.1, chokidar@^3.5.3: +chokidar@^3.5.3: version "3.6.0" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b" integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== @@ -2135,7 +2071,7 @@ commander@^10.0.1: resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06" integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug== -commander@^4.0.0, commander@^4.0.1: +commander@^4.0.0: version "4.1.1" resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== @@ -3069,15 +3005,6 @@ fs-extra@^7.0.1: jsonfile "^4.0.0" universalify "^0.1.0" -fs-extra@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" - integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== - dependencies: - graceful-fs "^4.2.0" - jsonfile "^4.0.0" - universalify "^0.1.0" - fs-extra@^9.1.0: version "9.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d" @@ -3191,7 +3118,7 @@ glob@^10.3.10, glob@^10.4.5: package-json-from-dist "^1.0.0" path-scurry "^1.11.1" -glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.2.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -3253,13 +3180,6 @@ globjoin@^0.1.4: resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43" integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg== -globs@^0.1.4: - version "0.1.4" - resolved "https://registry.yarnpkg.com/globs/-/globs-0.1.4.tgz#1d13639f6174e4ae73a7f936da7d9a079f657c1c" - integrity sha512-D23dWbOq48vlOraoSigbcQV4tWrnhwk+E/Um2cMuDS3/5dwGmdFeA7L/vAvDhLFlQOTDqHcXh35m/71g2A2WzQ== - dependencies: - glob "^7.1.1" - gopd@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c" @@ -3875,11 +3795,6 @@ lodash-es@^4.17.21: resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== -lodash.debounce@^4.0.8: - version "4.0.8" - resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" - integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== - lodash.flattendeep@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" @@ -3948,16 +3863,6 @@ log-update@^4.0.0: slice-ansi "^4.0.0" wrap-ansi "^6.2.0" -loglevel-plugin-prefix@^0.8.4: - version "0.8.4" - resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644" - integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g== - -loglevel@^1.6.6: - version "1.9.2" - resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.2.tgz#c2e028d6c757720107df4e64508530db6621ba08" - integrity sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg== - loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -4737,7 +4642,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -pretty-bytes@^5.3.0, pretty-bytes@^5.6.0: +pretty-bytes@^5.6.0: version "5.6.0" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg== @@ -4995,7 +4900,7 @@ sanitize-filename@^1.6.3: dependencies: truncate-utf8-bytes "^1.0.0" -sass@*, sass@^1.23.7, sass@^1.71.1: +sass@^1.71.1: version "1.80.7" resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.7.tgz#7569334c39220f8ca62fcea38dce60f809ba345c" integrity sha512-MVWvN0u5meytrSjsU7AWsbhoXi1sc58zADXFllfZzbsBT1GHjjar6JwBINYPRrkx/zqnQ6uqbQuHgE95O+C+eQ== @@ -5006,30 +4911,6 @@ sass@*, sass@^1.23.7, sass@^1.71.1: optionalDependencies: "@parcel/watcher" "^2.4.1" -scss-bundle@^3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.1.2.tgz#8919dd7603d01a84822e8aab5210e5b0b50c548b" - integrity sha512-lvxTwCKDLgzmRWhGwJ834ggtnEhs0G9FxSJRWte+NwlshVvBcQ/kOHHkpAGDpCxIMNGz/Utl0yd/MWyQAOBhqg== - dependencies: - "@types/archy" "^0.0.31" - "@types/debug" "^4.1.5" - "@types/fs-extra" "^8.0.1" - "@types/glob" "^7.1.1" - "@types/lodash.debounce" "^4.0.6" - "@types/sass" "^1.16.0" - archy "^1.0.0" - chalk "^3.0.0" - chokidar "^3.3.1" - commander "^4.0.1" - fs-extra "^8.1.0" - globs "^0.1.4" - lodash.debounce "^4.0.8" - loglevel "^1.6.6" - loglevel-plugin-prefix "^0.8.4" - pretty-bytes "^5.3.0" - sass "^1.23.7" - tslib "^1.10.0" - selfsigned@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.4.1.tgz#560d90565442a3ed35b674034cec4e95dceb4ae0" @@ -5672,11 +5553,6 @@ tsc@^2.0.4: resolved "https://registry.yarnpkg.com/tsc/-/tsc-2.0.4.tgz#5f6499146abea5dca4420b451fa4f2f9345238f5" integrity sha512-fzoSieZI5KKJVBYGvwbVZs/J5za84f2lSTLPYf6AGiIf43tZ3GNrI1QzTLcjtyDDP4aLxd46RTZq1nQxe7+k5Q== -tslib@^1.10.0: - version "1.14.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" - integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== - tslib@^2.1.0: version "2.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"