@plcmp/pl-badge
Advanced tools
+1
-1
| { | ||
| "name": "@plcmp/pl-badge", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "description": "Simple badge component.", | ||
@@ -5,0 +5,0 @@ "main": "pl-badge.js", |
+21
-11
@@ -8,2 +8,5 @@ import { PlElement, html, css } from "polylib"; | ||
| type: Boolean, reflectToAttribute: true | ||
| }, | ||
| hidden: { | ||
| type: Boolean, reflectToAttribute: true | ||
| } | ||
@@ -16,20 +19,27 @@ } | ||
| :host { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| background-color: var(--primary-base); | ||
| box-sizing: border-box; | ||
| border-radius:4px; | ||
| color: rgb(255, 255, 255); | ||
| display: flex; | ||
| font-size: 12px; | ||
| font-weight: 500; | ||
| height: 18px; | ||
| justify-content: center; | ||
| line-height: 12px; | ||
| padding: 3px 6px; | ||
| line-height: 14px; | ||
| user-select: none; | ||
| white-space: nowrap; | ||
| } | ||
| :host([pulse]) { | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
| span { | ||
| height: 16px; | ||
| background-color: var(--primary-base); | ||
| box-sizing: border-box; | ||
| border-radius:4px; | ||
| color: #ffffff; | ||
| padding: 0 4px; | ||
| white-space: nowrap; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| :host([pulse]) span { | ||
| animation: pulse 1.5s infinite; | ||
@@ -36,0 +46,0 @@ } |
2946
3.55%61
15.09%