design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2023-01-07 14:05:25 +01:00
parent ea0858fd27
commit 8ea7c53154
11 changed files with 2826 additions and 17430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
ts_web/elements/wcc-sidebar.ts
View File

@ -39,6 +39,21 @@ export class WccSidebar extends DeesElement {
padding: 5px;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.heading {
font-size: 24px;
text-align: center;
@ -78,13 +93,13 @@ export class WccSidebar extends DeesElement {
background: #455A64;
}
.selectOption .material-icons {
.selectOption .material-symbols-outlined {
color: #666;
display: block;
transition: all 0.2s;
}
.selectOption.selected .material-icons {
.selectOption.selected .material-symbols-outlined {
color: #000;
}
@ -106,7 +121,7 @@ export class WccSidebar extends DeesElement {
<div class="menu">
<h3>Live Websites</h3>
${this.websites.map(website => {
return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
return html`<div class="selectOption"><i class="material-symbols-outlined">ondemand_video</i><div class="text">${website}</div></div>`;
})}
<h3>Pages</h3>
${(() => {
@ -121,7 +136,7 @@ export class WccSidebar extends DeesElement {
this.selectItem('page', pageName, item);
}}
>
<i class="material-icons">insert_drive_file</i>
<i class="material-symbols-outlined">insert_drive_file</i>
<div class="text">${pageName}</div>
</div>
`;
@ -140,7 +155,7 @@ export class WccSidebar extends DeesElement {
this.selectItem('element', elementName, item);
}}
>
<i class="material-icons">featured_video</i>
<i class="material-symbols-outlined">featured_video</i>
<div class="text">${elementName}</div>
</div>
`;