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