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

Updated HeaderAction component with slot & scoped styling

Browse source
This commit is contained in:
Daniel Boven 2020-07-18 13:54:58 +02:00
commit f7714c721b
4 changed files with 34 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
View file

@ -3,12 +3,18 @@
export let type = undefined;
export let icon = undefined;
export let linkIsActive = undefined;
export let text = undefined;
import { cx, optional } from '../../../lib';
import { cx } from '../../../lib';
import Icon from '../../Icon/Icon.svelte';
</script>
<style>
.action-link {
text-align: center;
align-items: center;
vertical-align: middle;
justify-content: center;
padding-top: 10px;
}
.subject-divider {
color: #525252;
padding-bottom: 4px;
@ -19,8 +25,8 @@
<a
aria-label={type}
class={cx('--header__action', linkIsActive && '--header__action--active', text && '--header__action--text')}
class={cx('--header__action', linkIsActive && '--header__action--active')}
class:action-link={true}
{href}>
<Icon {...icon} />
{optional(text)}
</a>
</a>