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

fix(ui-shell): use semantic hr in HeaderPanelDivider to render dividers (#1093)

Browse source
This commit is contained in:
metonym 2022-02-12 08:07:21 -08:00 • committed by GitHub
commit 16790daaa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/UIShell/GlobalHeader/HeaderPanelDivider.svelte
View file

@ -1,22 +1,27 @@
<li class="subject-divider"> {#if $$slots.default}
<span> <li>
<slot /> <span>
</span> <slot />
</li> </span>
</li>
{/if}
<hr class:bx--switcher__item--divider="{true}" />
<style> <style>
.subject-divider { /**
color: #525252; * Carbon does not support a divider with a subject.
padding-bottom: 4px; * We apply custom styles using the switcher subject divider
border-bottom: 1px solid #525252; * from https://carbondesignsystem.com/ as a reference.
margin: 32px 1rem 8px; */
}
.subject-divider span { li {
margin: 2rem 1rem 0;
color: #525252;
}
span {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; line-height: 1.3;
line-height: 1rem; letter-spacing: 0.02rem;
letter-spacing: 0.32px;
color: #c6c6c6; color: #c6c6c6;
} }
</style> </style>