jlengrand/simple-food-diary
1
0
Fork 0
mirror of https://github.com/jlengrand/simple-food-diary.git synced 2026-03-10 08:41:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds styling on click

Browse Source
This commit is contained in:
Julien Lengrand-Lambert
2021-05-26 17:08:01 +02:00
parent 849e543614
commit 9e3343abfb
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -1,4 +1,5 @@
<!doctype html>
<!-- https://coolors.co/2b2d42-8d99ae-edf2f4-ef233c-d90429 -->
<html lang="en">
<head>
@@ -15,7 +16,7 @@
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #ededed;
background-color: #EDF2F4;
}
</style>
<title>simple-food-diary</title>

15
src/diary-item.ts
View File

@@ -9,7 +9,14 @@ class DiaryItem extends LitElement{
@property({type: String}) name = "";
@property({type:String}) icon = "";
static styles = css``;
static styles = css`
.selected{
background-color: #8D99AE;
}
.unselected{
}
`;
constructor(){
super();
@@ -18,8 +25,10 @@ class DiaryItem extends LitElement{
render(){
return html`
<fa-icon class="${this.icon}"></fa-icon>
<p> ${this.name}</p>
<div class="${this.selected ? 'selected' : 'unselected'}">
<fa-icon class="${this.icon}"></fa-icon>
<p> ${this.name}</p>
</div>
`;
}
}