-
Notifications
You must be signed in to change notification settings - Fork 0
Update header and button #52
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
@@ -1,7 +1,7 @@ | |||
<svg viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg" class={$$restProps.class}> | |||
<path | |||
d="M2 20H25.625M2 11H25.625M2 2H25.625" | |||
stroke="black" | |||
stroke="currentColor" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This way the color can be set correctly for the icon
@@ -64,7 +64,7 @@ | |||
<aside>Click it!</aside> | |||
<svelte:component this={Icon} class="mb-1 h-8 w-auto stroke-black" isDemo={true} /> | |||
{:else} | |||
<svelte:component this={Icon} class="mb-1 h-8 w-auto" isDemo={true} /> | |||
<svelte:component this={Icon} class="mb-1 h-8 w-auto stroke-black" isDemo={true} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the story book view
@@ -50,7 +54,14 @@ | |||
<a {...$$restProps} {href} class={disabled ? 'pointer-events-none block' : 'pointer-events-auto block'}> | |||
<button | |||
{...$$restProps} | |||
class={`rounded-full px-f24 py-f8 text-center transition-all ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`} | |||
class={cn( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Swap to cn here so that we can just dump in the classes and have them resolve correctly
@@ -14,7 +14,7 @@ | |||
|
|||
<input type="checkbox" class="peer hidden" bind:checked={isOpen} id={toggleIdentifier} /> | |||
<OpenClose | |||
classes="cursor-pointer stroke-navy peer-checked:stroke-white peer-checked:hover:stroke-teal hover:stroke-teal flex self-center lg:hidden" | |||
classes="cursor-pointer text-navy peer-checked:text-white peer-checked:hover:text-teal hover:text-teal flex self-center lg:hidden" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Text color works better with currentColor
for browsers
@@ -1,6 +1,7 @@ | |||
export default { | |||
//Branding Colors | |||
navy: '#14313F', | |||
navyLight: '#18465E', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Finally used in a style.
Problem
Screenshots (optional):