refactor!: use :global() for custom styles (#1940)

* Prefix custom class selectors with `bx--` (primarily used in custom UI Shell components)
* Use `:global` scope so that selector names are not hashed
This commit is contained in:
metonym 2024-03-23 13:11:44 -07:00 committed by GitHub
commit d5a11489f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 70 additions and 49 deletions

View file

@ -1,8 +1,6 @@
{#if $$slots.default}
<li>
<span>
<slot />
</span>
<li class:bx--header-panel-divider={true}>
<slot />
</li>
{/if}
<hr class:bx--switcher__item--divider="{true}" />
@ -14,11 +12,8 @@
* from https://carbondesignsystem.com/ as a reference.
*/
li {
:global(.bx--header-panel-divider) {
margin: 2rem 1rem 0;
color: #525252;
}
span {
font-size: 0.75rem;
line-height: 1.3;
letter-spacing: 0.02rem;