@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
219 lines (186 loc) • 5.88 kB
JavaScript
import"../../../vaadin-material-styles/color.js";import"../../../vaadin-material-styles/font-icons.js";import"../../../vaadin-material-styles/typography.js";import"../../../vaadin-button/theme/material/vaadin-button.js";import"../../../vaadin-progress-bar/theme/material/vaadin-progress-bar.js";import{html as r}from"../../../../@polymer/polymer/lib/utils/html-tag.js";const a=r`<dom-module id="material-upload" theme-for="vaadin-upload">
<template>
<style>
:host(:not([nodrop])) {
overflow: hidden;
border: 1px dashed var(--material-divider-color);
border-radius: 4px;
padding: 8px 16px;
transition: border-color 0.6s;
position: relative;
}
[part="primary-buttons"] {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
}
/* TODO(jouni): unsupported selector (not sure why there's #addFiles element wrapping the upload button) */
[part="primary-buttons"] > * {
display: block;
flex-grow: 1;
}
[part="upload-button"] {
display: block;
margin: 0 -8px;
}
[part="drop-label"] {
text-align: center;
white-space: normal;
padding: 0 24px;
color: var(--material-secondary-text-color);
font-family: var(--material-font-family);
font-size: var(--material-small-font-size);
}
:host([dragover-valid]) {
border-color: var(--material-primary-color);
transition: border-color 0.1s;
}
:host([dragover-valid]) [part="drop-label"] {
color: var(--material-primary-text-color);
}
:host([max-files-reached]) [part='drop-label'] {
color: var(--material-disabled-text-color);
}
[part="drop-label-icon"] {
display: inline-block;
margin-right: 8px;
}
[part="drop-label-icon"]::before {
content: var(--material-icons-upload);
font-family: material-icons;
font-size: var(--material-icon-font-size);
line-height: 1;
}
/* Ripple */
:host::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
left: 50%;
pointer-events: none;
background-color: var(--material-primary-color);
opacity: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform 0s cubic-bezier(.075, .82, .165, 1), opacity 0.4s linear;
transition-delay: 0.4s, 0s;
}
:host([dragover-valid])::before {
transform: translate(-50%, -50%) scale(10);
opacity: 0.1;
transition-duration: 2s, 0.1s;
transition-delay: 0s, 0s;
}
</style>
</template>
</dom-module><dom-module id="material-upload-file" theme-for="vaadin-upload-file">
<template>
<style>
:host {
padding: 8px 0;
}
[part="row"] {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
[part="status"],
[part="error"] {
color: var(--material-secondary-text-color);
font-size: var(--material-caption-font-size);
}
[part="info"] {
display: flex;
align-items: baseline;
flex: auto;
}
[part="meta"] {
width: 0.001px;
flex: 1 1 auto;
}
[part="name"] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--material-small-font-size);
}
[part="commands"] {
display: flex;
flex: none;
font-family: material-icons;
font-size: var(--material-icon-font-size);
}
[part="done-icon"],
[part="warning-icon"] {
padding: 8px;
margin: -8px 0 -8px -8px;
font-family: material-icons;
font-size: var(--material-icon-font-size);
}
/* When both icons are hidden, let us keep space for one */
[part="done-icon"][hidden] + [part="warning-icon"][hidden] {
display: block ;
visibility: hidden;
}
[part="done-icon"],
[part="warning-icon"] {
font-size: var(--material-icon-font-size);
line-height: 1;
}
[part="start-button"],
[part="retry-button"],
[part="clear-button"] {
flex: none;
color: var(--material-secondary-text-color);
line-height: 1;
padding: 8px;
margin: -8px 0;
}
[part="clear-button"] {
margin-right: -8px;
}
[part="start-button"]:hover,
[part="retry-button"]:hover,
[part="clear-button"]:hover {
color: inherit;
}
[part="done-icon"]::before,
[part="warning-icon"]::before,
[part="start-button"]::before,
[part="retry-button"]::before,
[part="clear-button"]::before {
vertical-align: -0.05em;
}
[part="done-icon"]::before {
content: var(--material-icons-check);
color: var(--material-primary-text-color);
}
[part="warning-icon"]::before {
content: var(--material-icons-error);
color: var(--material-error-text-color);
}
[part="start-button"]::before {
content: var(--material-icons-play);
}
[part="retry-button"]::before {
content: var(--material-icons-reload);
}
[part="clear-button"]::before {
content: var(--material-icons-clear);
}
[part="error"] {
color: var(--material-error-text-color);
}
[part="progress"] {
width: auto;
margin-left: 28px;
}
[part="progress"][complete],
[part="progress"][error] {
display: none;
}
</style>
</template>
</dom-module>`;document.head.appendChild(a.content);