56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
|
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>
|
||
|
|
|
||
|
|
`;
|