UNPKG

@haxtheweb/haxcms-nodejs

Version:

HAXcms single and multisite nodejs server, api, and administration

144 lines (125 loc) 4.11 kB
import"../../../vaadin-material-styles/color.js";import{html as e}from"../../../../@polymer/polymer/lib/utils/html-tag.js";const o=e`<dom-module id="material-checkbox" theme-for="vaadin-checkbox"> <template> <style> :host { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; -webkit-tap-highlight-color: transparent; } [part="label"]:not([empty]) { margin: 3px 12px 3px 6px; } [part="native-checkbox"] { opacity: 0; position: absolute; } [part="checkbox"] { display: inline-block; width: 16px; height: 16px; flex: none; margin: 4px; position: relative; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--material-secondary-text-color); pointer-events: none; line-height: 1.275; background-color: transparent; } /* IE11 only */ ::-ms-backdrop, [part="checkbox"] { line-height: 1; } /* Used for the ripple */ [part="checkbox"]::before { /* Needed to align the checkbox nicely on the baseline */ content: "\\2003"; display: inline-block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--material-disabled-text-color); transform: scale(0); opacity: 0; transition: transform 0s 0.8s, opacity 0.8s; will-change: transform, opacity; } /* Used for the checkmark */ [part="checkbox"]::after { content: ""; display: inline-block; width: 10px; height: 19px; border: 0 solid var(--material-background-color); border-width: 3px 0 0 3px; box-sizing: border-box; transform-origin: 0 0; position: absolute; top: 12px; left: 6px; transform: scale(0) rotate(-135deg); transition: transform 0.2s; } :host([indeterminate]) [part="checkbox"], :host([checked]) [part="checkbox"] { background-color: var(--material-primary-color); box-shadow: none; } :host([checked]) [part="checkbox"]::after { transform: scale(0.55) rotate(-135deg); } :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part="checkbox"] { background-color: transparent; } :host([focus-ring]) [part="checkbox"]::before, :host([active]) [part="checkbox"]::before { transition-duration: 0.08s, 0.01s; transition-delay: 0s, 0s; transform: scale(2.5); opacity: 0.15; } :host([checked]) [part="checkbox"]::before { background-color: var(--material-primary-color); } :host([indeterminate]) [part="checkbox"]::after { transform: none; opacity: 1; top: 45%; height: 10%; left: 22%; right: 22%; width: auto; border: 0; background-color: var(--material-background-color); transition: opacity 0.4s; } :host([disabled]) { pointer-events: none; color: var(--material-disabled-text-color); } :host([disabled]) ::slotted(*) { color: inherit; } :host([disabled]:not([checked]):not([indeterminate])) [part="checkbox"] { box-shadow: inset 0 0 0 2px var(--material-disabled-color); } :host([disabled][checked]) [part="checkbox"], :host([disabled][indeterminate]) [part="checkbox"] { background-color: var(--material-disabled-color); } /* Workaround for vaadin-checkbox issue: https://github.com/vaadin/vaadin-checkbox/issues/16 */ [part="native-checkbox"]:checked ~ [part="checkbox"] { opacity: 1; } /* RTL specific styles */ :host([dir="rtl"]) [part="label"]:not([empty]) { margin: 3px 6px 3px 12px; } </style> </template> </dom-module>`;document.head.appendChild(o.content);