jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-31 21:17:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add icon effects to ha-icon

Browse Source
This commit is contained in:
Thomas Lovén 2020-02-12 12:29:05 +01:00
parent 2c006e99f2
commit b76084c806
1 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/ha-icon.ts
View File

@ -4,6 +4,7 @@ import "@polymer/iron-icon/iron-icon";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { IronIconElement } from "@polymer/iron-icon/iron-icon";
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
const ironIconClass = customElements.get("iron-icon") as Constructor<
IronIconElement
@ -26,6 +27,96 @@ export class HaIcon extends ironIconClass {
import(/* webpackChunkName: "mdi-icons" */ "../resources/mdi-icons");
}
}
_iconChanged(icon) {
const parts = (icon || "").split(":");
if (parts.length === 3) {
this._iconEffect = parts.pop();
}
this._iconName = parts.pop();
this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
this.setAttribute("effect", this._iconEffect);
this._updateIcon();
}
_template = html`
${super._template}
<style>
:host([effect="rotate-45"]) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
:host([effect="rotate-90"]) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
:host([effect="rotate-135"]) {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
:host([effect="rotate-180"]) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
:host([effect="rotate-225"]) {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
:host([effect="rotate-270"]) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
:host([effect="rotate-315"]) {
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
:host([effect="flip-h"]) {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
:host([effect="flip-v"]) {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
:host([effect="spin"]) {
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
</style>
`;
}
declare global {