@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
204 lines (171 loc) • 8.18 kB
JavaScript
import"../../../../@polymer/polymer/lib/elements/custom-style.js";import"../../../vaadin-lumo-styles/color.js";import"../../../vaadin-lumo-styles/sizing.js";import"../../../vaadin-lumo-styles/spacing.js";import"../../../vaadin-lumo-styles/style.js";import{html as r}from"../../../../@polymer/polymer/lib/utils/html-tag.js";const e=r`<dom-module id="lumo-progress-bar" theme-for="vaadin-progress-bar">
<template>
<style>
:host {
height: calc(var(--lumo-size-l) / 10);
margin: var(--lumo-space-s) 0;
}
[part="bar"] {
border-radius: var(--lumo-border-radius);
background-color: var(--lumo-contrast-10pct);
}
[part="value"] {
border-radius: var(--lumo-border-radius);
background-color: var(--lumo-primary-color);
/* Use width instead of transform to preserve border radius */
transform: none;
width: calc(var(--vaadin-progress-value) * 100%);
will-change: width;
transition: 0.1s width linear;
}
/* Indeterminate mode */
:host([indeterminate]) [part="value"] {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
width: 100%;
background-color: transparent ;
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
opacity: 0.75;
will-change: transform;
animation: vaadin-progress-indeterminate 1.6s infinite cubic-bezier(.645, .045, .355, 1);
}
@keyframes vaadin-progress-indeterminate {
0% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
}
25% {
transform: scaleX(0.4);
}
50% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
}
50.1% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
75% {
transform: scaleX(0.4);
}
100% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
}
:host(:not([aria-valuenow])) [part="value"]::before,
:host([indeterminate]) [part="value"]::before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: var(--lumo-primary-color);
will-change: opacity;
animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(.645, .045, .355, 1);
}
@keyframes vaadin-progress-pulse3 {
0% { opacity: 1; }
10% { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
50.1% { opacity: 1; }
60% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
}
/* Contrast color */
:host([theme~="contrast"]) [part="value"],
:host([theme~="contrast"]) [part="value"]::before {
background-color: var(--lumo-contrast-80pct);
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-80pct));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-60pct));
}
/* Error color */
:host([theme~="error"]) [part="value"],
:host([theme~="error"]) [part="value"]::before {
background-color: var(--lumo-error-color);
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
}
/* Primary color */
:host([theme~="success"]) [part="value"],
:host([theme~="success"]) [part="value"]::before {
background-color: var(--lumo-success-color);
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
}
/* RTL specific styles */
:host([indeterminate][dir="rtl"]) [part="value"] {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(.355, .045, .645, 1);
}
:host(:not([aria-valuenow])[dir="rtl"]) [part="value"]::before,
:host([indeterminate][dir="rtl"]) [part="value"]::before {
animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(.355, .045, .645, 1);
}
@keyframes vaadin-progress-indeterminate-rtl {
0% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
}
25% {
transform: scaleX(0.4);
}
50% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
}
50.1% {
transform: scaleX(0.015);
transform-origin: 0% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
75% {
transform: scaleX(0.4);
}
100% {
transform: scaleX(0.015);
transform-origin: 100% 0%;
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
}
}
/* Contrast color */
:host([theme~="contrast"][dir="rtl"]) [part="value"],
:host([theme~="contrast"][dir="rtl"]) [part="value"]::before {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-80pct));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-60pct));
}
/* Error color */
:host([theme~="error"][dir="rtl"]) [part="value"],
:host([theme~="error"][dir="rtl"]) [part="value"]::before {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
}
/* Primary color */
:host([theme~="success"][dir="rtl"]) [part="value"],
:host([theme~="success"][dir="rtl"]) [part="value"]::before {
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
}
</style>
</template>
</dom-module><custom-style>
<style>
@keyframes vaadin-progress-pulse3 {
0% { opacity: 1; }
10% { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
50.1% { opacity: 1; }
60% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</custom-style>`;document.head.appendChild(e.content);