@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
1 lines • 4.4 kB
JavaScript
import"./style.js";import"./color.js";import"./typography.js";const n=document.createElement("template");n.innerHTML='<dom-module id="lumo-badge">\n <template>\n <style>\n [theme~="badge"] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);\n color: var(--lumo-primary-text-color);\n background-color: var(--lumo-primary-color-10pct);\n border-radius: var(--lumo-border-radius-s);\n font-family: var(--lumo-font-family);\n font-size: var(--lumo-font-size-s);\n line-height: 1;\n font-weight: 500;\n text-transform: initial;\n letter-spacing: initial;\n min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);\n }\n\n /* Ensure proper vertical alignment */\n [theme~="badge"]::before {\n display: inline-block;\n content: "\\2003";\n width: 0;\n }\n\n [theme~="badge"][theme~="small"] {\n font-size: var(--lumo-font-size-xxs);\n line-height: 1;\n }\n\n /* Colors */\n\n [theme~="badge"][theme~="success"] {\n color: var(--lumo-success-text-color);\n background-color: var(--lumo-success-color-10pct);\n }\n\n [theme~="badge"][theme~="error"] {\n color: var(--lumo-error-text-color);\n background-color: var(--lumo-error-color-10pct);\n }\n\n [theme~="badge"][theme~="contrast"] {\n color: var(--lumo-contrast-80pct);\n background-color: var(--lumo-contrast-5pct);\n }\n\n /* Primary */\n\n [theme~="badge"][theme~="primary"] {\n color: var(--lumo-primary-contrast-color);\n background-color: var(--lumo-primary-color);\n }\n\n [theme~="badge"][theme~="success"][theme~="primary"] {\n color: var(--lumo-success-contrast-color);\n background-color: var(--lumo-success-color);\n }\n\n [theme~="badge"][theme~="error"][theme~="primary"] {\n color: var(--lumo-error-contrast-color);\n background-color: var(--lumo-error-color);\n }\n\n [theme~="badge"][theme~="contrast"][theme~="primary"] {\n color: var(--lumo-base-color);\n background-color: var(--lumo-contrast);\n }\n\n /* Links */\n\n [theme~="badge"][href]:hover {\n text-decoration: none;\n }\n\n /* Icon */\n\n [theme~="badge"] iron-icon {\n margin: -0.25em 0;\n --iron-icon-width: 1.5em;\n --iron-icon-height: 1.5em;\n }\n\n [theme~="badge"] iron-icon:first-child {\n margin-left: -0.375em;\n }\n\n [theme~="badge"] iron-icon:last-child {\n margin-right: -0.375em;\n }\n\n [theme~="badge"][icon] {\n min-width: 0;\n padding: 0;\n font-size: 1rem;\n --iron-icon-width: var(--lumo-icon-size-m);\n --iron-icon-height: var(--lumo-icon-size-m);\n }\n\n [theme~="badge"][icon][theme~="small"] {\n --iron-icon-width: var(--lumo-icon-size-s);\n --iron-icon-height: var(--lumo-icon-size-s);\n }\n\n /* Empty */\n\n [theme~="badge"]:not([icon]):empty {\n min-width: 0;\n width: 1em;\n height: 1em;\n padding: 0;\n border-radius: 50%;\n background-color: var(--lumo-primary-color);\n }\n\n [theme~="badge"][theme~="small"]:not([icon]):empty {\n width: 0.75em;\n height: 0.75em;\n }\n\n [theme~="badge"][theme~="contrast"]:not([icon]):empty {\n background-color: var(--lumo-contrast);\n }\n\n [theme~="badge"][theme~="success"]:not([icon]):empty {\n background-color: var(--lumo-success-color);\n }\n\n [theme~="badge"][theme~="error"]:not([icon]):empty {\n background-color: var(--lumo-error-color);\n }\n\n /* Pill */\n\n [theme~="badge"][theme~="pill"] {\n --lumo-border-radius-s: 1em;\n }\n\n /* RTL specific styles */\n\n [dir="rtl"][theme~="badge"] iron-icon:first-child {\n margin-right: -0.375em;\n margin-left: 0;\n }\n\n [dir="rtl"][theme~="badge"] iron-icon:last-child {\n margin-left: -0.375em;\n margin-right: 0;\n }\n </style>\n </template>\n</dom-module>',document.head.appendChild(n.content);