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