101 lines
3.1 KiB
TypeScript
101 lines
3.1 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: 1rem;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.icon-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
padding: 0.75rem;
|
||
|
|
border-radius: var(--dees-radius);
|
||
|
|
background: var(--dees-surface);
|
||
|
|
min-width: 80px;
|
||
|
|
}
|
||
|
|
.icon-label {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--dees-muted-foreground);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Common Icons</h3>
|
||
|
|
<div class="demo-row">
|
||
|
|
<div class="icon-item">
|
||
|
|
<dees-mobile-icon icon="home" size="24"></dees-mobile-icon>
|
||
|
|
<span class="icon-label">home</span>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<dees-mobile-icon icon="settings" size="24"></dees-mobile-icon>
|
||
|
|
<span class="icon-label">settings</span>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<dees-mobile-icon icon="user" size="24"></dees-mobile-icon>
|
||
|
|
<span class="icon-label">user</span>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<dees-mobile-icon icon="search" size="24"></dees-mobile-icon>
|
||
|
|
<span class="icon-label">search</span>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<dees-mobile-icon icon="menu" size="24"></dees-mobile-icon>
|
||
|
|
<span class="icon-label">menu</span>
|
||
|
|
</div>
|
||
|
|
<div class="icon-item">
|
||
|
|
<dees-mobile-icon icon="x" size="24"></dees-mobile-icon>
|
||
|
|
<span class="icon-label">x</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Sizes</h3>
|
||
|
|
<div class="demo-row">
|
||
|
|
<dees-mobile-icon icon="star" size="16"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="star" size="20"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="star" size="24"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="star" size="32"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="star" size="48"></dees-mobile-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Colors</h3>
|
||
|
|
<div class="demo-row">
|
||
|
|
<dees-mobile-icon icon="heart" size="24" color="var(--dees-danger)"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="check-circle" size="24" color="var(--dees-success)"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="alert-triangle" size="24" color="var(--dees-warning)"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="info" size="24" color="var(--dees-primary)"></dees-mobile-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Stroke Width</h3>
|
||
|
|
<div class="demo-row">
|
||
|
|
<dees-mobile-icon icon="circle" size="32" strokeWidth="1"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="circle" size="32" strokeWidth="2"></dees-mobile-icon>
|
||
|
|
<dees-mobile-icon icon="circle" size="32" strokeWidth="3"></dees-mobile-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
};
|