UNPKG

@haxtheweb/haxcms-nodejs

Version:

HAXcms single and multisite nodejs server, api, and administration

98 lines (83 loc) 3.35 kB
import"../../../vaadin-lumo-styles/color.js";import"../../../vaadin-lumo-styles/spacing.js";import{html as e}from"../../../../@polymer/polymer/lib/utils/html-tag.js";const t=e`<dom-module id="lumo-grid-tree-toggle" theme-for="vaadin-grid-tree-toggle"> <template> <style> :host { --vaadin-grid-tree-toggle-level-offset: 2em; align-items: center; vertical-align: middle; margin-left: calc(var(--lumo-space-s) * -1); -webkit-tap-highlight-color: transparent; } :host(:not([leaf])) { cursor: default; } [part="toggle"] { display: inline-block; font-size: 1.5em; line-height: 1; width: 1em; height: 1em; text-align: center; color: var(--lumo-contrast-50pct); /* Increase touch target area */ padding: calc(1em / 3); margin: calc(1em / -3); } :host(:not([dir="rtl"])) [part="toggle"] { margin-right: 0; } @media (hover: hover) { :host(:hover) [part="toggle"] { color: var(--lumo-contrast-80pct); } } [part="toggle"]::before { font-family: "lumo-icons"; display: inline-block; height: 100%; } :host(:not([expanded])) [part="toggle"]::before { content: var(--lumo-icons-angle-right); } :host([expanded]) [part="toggle"]::before { content: var(--lumo-icons-angle-right); transform: rotate(90deg); } /* Experimental support for hierarchy connectors, using an unsupported selector */ :host([theme~="connectors"]) #level-spacer { position: relative; z-index: -1; font-size: 1em; height: 1.5em; } :host([theme~="connectors"]) #level-spacer::before { display: block; content: ""; margin-top: calc(var(--lumo-space-m) * -1); height: calc(var(--lumo-space-m) + 3em); background-image: linear-gradient(to right, transparent calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px), var(--lumo-contrast-10pct) calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px)); background-size: var(--vaadin-grid-tree-toggle-level-offset) var(--vaadin-grid-tree-toggle-level-offset); background-position: calc(var(--vaadin-grid-tree-toggle-level-offset) / 2 - 2px) 0; } /* RTL specific styles */ :host([dir="rtl"]) { margin-left: 0; margin-right: calc(var(--lumo-space-s) * -1); } :host([dir="rtl"]) [part="toggle"] { margin-left: 0; } :host([dir="rtl"][expanded]) [part="toggle"]::before { transform: rotate(-90deg); } :host([dir="rtl"][theme~="connectors"]) #level-spacer::before { background-image: linear-gradient(to left, transparent calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px), var(--lumo-contrast-10pct) calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px)); background-position: calc(100% - (var(--vaadin-grid-tree-toggle-level-offset) / 2 - 2px)) 0; } :host([dir="rtl"]:not([expanded])) [part="toggle"]::before, :host([dir="rtl"][expanded]) [part="toggle"]::before { content: var(--lumo-icons-angle-left); } </style> </template> </dom-module>`;document.head.appendChild(t.content);