MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved styling and design of the editable image.

Browse Source
This commit is contained in:
Matt Mo 2020-10-07 08:28:10 -07:00
parent ba4cc2a422
commit e036ef1d5c
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
editable-image.js
View File

@ -26,15 +26,19 @@ class EditableImage extends IgniteElement {
mt-editable-image:hover:after { mt-editable-image:hover:after {
position: absolute; position: absolute;
font-family: 'Font Awesome 5 Duotone'; font-family: 'Font Awesome 5 Pro';
font-weight: 900; font-weight: 900;
content: '\\f332'; content: '\\f332';
color: rgba(0,0,0,0.5); color: #fff;
font-size: 2.5em; font-size: 2.2em;
display: flex;
align-items: center;
justify-content: center;
} }
mt-editable-image:hover { mt-editable-image:hover {
cursor: pointer; cursor: pointer;
filter: brightness(0.9);
} }
`; `;
} }
@ -56,7 +60,8 @@ class EditableImage extends IgniteElement {
new img() new img()
.src(this.source) .src(this.source)
.style("object-fit", this.objectFit) .style("object-fit", this.objectFit)
.style("object-position", this.objectPosition), .style("object-position", this.objectPosition)
.hide(this.source, value => { return value == null; }),
new input() new input()
.type("file") .type("file")
.style("display", "none", true) .style("display", "none", true)