tp-elements/tp-pending-text
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First version

Browse Source
This commit is contained in:
trading_peter 2023-06-15 00:07:49 +02:00
parent 94da77726a
commit f0aa0ac6cf
4 changed files with 96 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1 +1 @@
# tp-element
# tp-pending-text

6
package.json
View File

@ -1,14 +1,14 @@
{
"name": "@tp/tp-element",
"name": "@tp/tp-pending-text",
"version": "0.0.1",
"description": "",
"main": "tp-element.js",
"main": "tp-pending-text.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
"url": "https://gitea.codeblob.work/tp-pending-texts/tp-pending-text.git"
},
"author": "trading_peter",
"license": "Apache-2.0",

35
tp-element.js
View File

@ -1,35 +0,0 @@
/**
@license
Copyright (c) 2022 trading_peter
This program is available under Apache License Version 2.0
*/
import { LitElement, html, css } from 'lit';
class TpElement extends LitElement {
static get styles() {
return [
css`
:host {
display: block;
}
`
];
}
render() {
const { } = this;
return html`
`;
}
static get properties() {
return { };
}
}
window.customElements.define('tp-element', TpElement);

92
tp-pending-text.js Normal file
View File

@ -0,0 +1,92 @@
/**
@license
Copyright (c) 2023 trading_peter
This program is available under Apache License Version 2.0
*/
import { LitElement, html, css } from 'lit';
class TpPendingText extends LitElement {
static get styles() {
return [
css`
:host {
display: inline-block;
--tp-pending-text-color: #039BE5;
--tp-pending-text-faded: #039ae516;
--tp-pending-text-dot-size: 5px;
}
.content {
display: flex;
flex-direction: row;
align-items: baseline;
padding-right: calc(3 * var(--tp-pending-text-dot-size) + 15px);
}
.dot-flashing {
position: relative;
right: calc(var(--tp-pending-text-dot-size)*-3);
width: var(--tp-pending-text-dot-size);
height: var(--tp-pending-text-dot-size);
border-radius: 5px;
background-color: var(--tp-pending-text-color);
color: var(--tp-pending-text-color);
animation: dot-flashing 1s infinite linear alternate;
animation-delay: 0.5s;
}
.dot-flashing::before, .dot-flashing::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
}
.dot-flashing::before {
left: calc(-5px - var(--tp-pending-text-dot-size));
width: var(--tp-pending-text-dot-size);
height: var(--tp-pending-text-dot-size);
border-radius: var(--tp-pending-text-dot-size);
background-color: var(--tp-pending-text-color);
color: var(--tp-pending-text-color);
animation: dot-flashing 1s infinite alternate;
animation-delay: 0s;
}
.dot-flashing::after {
left: calc(5px + var(--tp-pending-text-dot-size));
width: var(--tp-pending-text-dot-size);
height: var(--tp-pending-text-dot-size);
border-radius: 5px;
background-color: var(--tp-pending-text-color);
color: var(--tp-pending-text-color);
animation: dot-flashing 1s infinite alternate;
animation-delay: 1s;
}
@keyframes dot-flashing {
0% {
background-color: var(--tp-pending-text-color);
}
50%, 100% {
background-color: var(--tp-pending-text-faded);
}
}
`
];
}
render() {
return html`
<div class="content">
<div>
<slot></slot>
</div>
<div class="dot-flashing"></div>
</div>
`;
}
}
window.customElements.define('tp-pending-text', TpPendingText);