dees-catalog/ts_web/elements/dees-icon.demo.ts

56 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-09-20 16:57:54 +00:00
import { html } from '@design.estate/dees-element';
import { faIcons } from './dees-icon.js';
export const demoFunc = () => html`
<style>
.demoContainer {
width: 100%;
display: flex;
flex-wrap: wrap;
background: #111111;
padding: 10px; font-size: 30px;
}
dees-icon {
transition: color 0.02s;
color: #ffffff;
}
dees-icon:hover {
color: #e4002b;
}
.iconContainer {
display: block;
padding: 16px 16px 0px 16px;
border: 1px solid #333333;
margin-right: 8px;
margin-bottom: 8px;
}
.iconName {
font-size: 12px;
text-align: center;
color: #ccc;
background: #333333;
padding: 4px 8px;
padding-bottom: 4px;
margin-left: -16px;
margin-right: -16px;
margin-top: 16px;
}
</style>
<div class="demoContainer">
${Object.keys(faIcons).map(
(iconName) => html`
<div class="iconContainer">
<dees-icon .iconFA=${iconName as any}></dees-icon>
<div class="iconName">${iconName}</div>
</div>
`
)}
</div>
`;