UNPKG

@haxtheweb/haxcms-nodejs

Version:

HAXcms single and multisite nodejs server, api, and administration

219 lines (186 loc) 5.88 kB
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 !important; 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);