Fix ellipsis and mark style (#242)

`:global(…)` doesn't work on custom elements. Here's a workaround suggested in sveltejs/svelte#2969 (comment)
nuclia · Sep 12, 2022 · 008a054 · 008a054
1 parent 4e7f410
commit 008a054
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 16 deletions.
diff --git a/libs/search-widget/src/Widget.scss b/libs/search-widget/src/Widget.scss
@@ -1,6 +1 @@
 @import "common-style";
-
-:global(mark) {
-  background-color: inherit;
-  font-weight: var(--font-weight-semi-bold);
-}
diff --git a/libs/search-widget/src/Widget.svelte b/libs/search-widget/src/Widget.svelte
@@ -20,6 +20,7 @@
   import type { KBStates, Resource } from '@nuclia/core';
   import { Observable } from 'rxjs';
   import { setupSuggestionsAndPredictions, setupTriggerSearch } from './core/search-bar';
+  import globalCss from './_video-widget/_global.scss';
 
   export let backend = 'https://nuclia.cloud/api';
   export let widgetid = '';
@@ -126,6 +127,8 @@
   };
 </script>
 
+<svelte:element this="style">{@html globalCss}</svelte:element>
+
 <div class="nuclia-widget" {style} data-version="__NUCLIA_DEV_VERSION__">
   {#if ready}
     {#if type === 'input'}

diff --git a/libs/search-widget/src/_video-widget/SearchBar.svelte b/libs/search-widget/src/_video-widget/SearchBar.svelte
@@ -9,6 +9,7 @@
   import { setLang } from '../core/i18n';
   import SearchInput from '../widgets/search-input/SearchInput.svelte';
   import { setupTriggerSearch } from '../core/search-bar';
+  import globalCss from './_global.scss';
 
   export let backend = 'https://nuclia.cloud/api';
   export let widgetid = '';
@@ -68,6 +69,7 @@
   });
 </script>
 
+<svelte:element this="style">{@html globalCss}</svelte:element>
 <div class="nuclia-widget" data-version="__NUCLIA_DEV_VERSION__">
   {#if ready}
     <SearchInput {placeholder} searchBarWidget={true} />

diff --git a/libs/search-widget/src/_video-widget/SearchResults.scss b/libs/search-widget/src/_video-widget/SearchResults.scss
@@ -13,14 +13,3 @@
   flex-direction: column;
   gap: var(--rhythm-3);
 }
-
-:global(mark) {
-  background-color: inherit;
-  font-weight: var(--font-weight-semi-bold);
-}
-
-:global(.ellipsis) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
diff --git a/libs/search-widget/src/_video-widget/SearchResults.svelte b/libs/search-widget/src/_video-widget/SearchResults.svelte
@@ -8,6 +8,7 @@
   import { _ } from '../core/i18n';
   import LoadingDots from '../components/spinner/LoadingDots.svelte';
   import VideoTile from './VideoTile.svelte';
+  import globalCss from './_global.scss';
 
   const showResults = nucliaStore().triggerSearch.pipe(map(() => true));
   const results = nucliaState().results;
@@ -43,6 +44,7 @@
   });
 </script>
 
+<svelte:element this="style">{@html globalCss}</svelte:element>
 <div class="nuclia-widget sw-video-results" data-version="__NUCLIA_DEV_VERSION__">
   {#if $showResults}
     {#if $hasSearchError}

diff --git a/libs/search-widget/src/_video-widget/_global.scss b/libs/search-widget/src/_video-widget/_global.scss
@@ -0,0 +1,10 @@
+mark {
+  background-color: inherit;
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}