73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
import { injectCssVariables } from '../../00variables.js';
|
|
|
|
export const demoFunc = () => {
|
|
injectCssVariables();
|
|
return html`
|
|
<style>
|
|
.demo-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.demo-section h3 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 0.875rem;
|
|
color: var(--dees-muted-foreground);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.demo-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-section">
|
|
<h3>Variants</h3>
|
|
<div class="demo-row">
|
|
<dees-mobile-button variant="default">Default</dees-mobile-button>
|
|
<dees-mobile-button variant="primary">Primary</dees-mobile-button>
|
|
<dees-mobile-button variant="secondary">Secondary</dees-mobile-button>
|
|
<dees-mobile-button variant="outline">Outline</dees-mobile-button>
|
|
<dees-mobile-button variant="ghost">Ghost</dees-mobile-button>
|
|
<dees-mobile-button variant="destructive">Destructive</dees-mobile-button>
|
|
<dees-mobile-button variant="link">Link</dees-mobile-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Sizes</h3>
|
|
<div class="demo-row">
|
|
<dees-mobile-button size="sm">Small</dees-mobile-button>
|
|
<dees-mobile-button size="md">Medium</dees-mobile-button>
|
|
<dees-mobile-button size="lg">Large</dees-mobile-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>States</h3>
|
|
<div class="demo-row">
|
|
<dees-mobile-button>Normal</dees-mobile-button>
|
|
<dees-mobile-button disabled>Disabled</dees-mobile-button>
|
|
<dees-mobile-button loading>Loading</dees-mobile-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Icon Buttons</h3>
|
|
<div class="demo-row">
|
|
<dees-mobile-button icon size="sm">
|
|
<dees-mobile-icon icon="plus" size="16"></dees-mobile-icon>
|
|
</dees-mobile-button>
|
|
<dees-mobile-button icon>
|
|
<dees-mobile-icon icon="settings" size="18"></dees-mobile-icon>
|
|
</dees-mobile-button>
|
|
<dees-mobile-button icon size="lg">
|
|
<dees-mobile-icon icon="menu" size="20"></dees-mobile-icon>
|
|
</dees-mobile-button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|