mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

8
src/UIShell/HeaderAction.svelte
View file

@ -70,7 +70,7 @@
type="button"
class:bx--header__action="{true}"
class:bx--header__action--active="{isOpen}"
class:action-text="{text}"
class:bx--header__action--text="{text}"
{...$$restProps}
on:click
on:click|stopPropagation="{() => {
@ -88,7 +88,7 @@
</slot>
{/if}
<slot name="text">
{#if text}<span>{text}</span>{/if}
{#if text}<span class:bx--header__action-text="{true}">{text}</span>{/if}
</slot>
</button>
{#if isOpen}
@ -106,7 +106,7 @@
{/if}
<style>
.action-text {
:global(.bx--header__action--text) {
display: inline-flex;
align-items: center;
width: auto;
@ -123,7 +123,7 @@
color: #f4f4f4;
}
.action-text > span {
:global(.bx--header__action-text) {
margin-left: 0.75rem;
}
</style>