@qikdev/vue-ui 0.2.275 → 0.2.276

package/dist/style.css

@@ -1640,68 +1640,130 @@ input[data-v-4bea995b]:focus {
   bottom: 0;
   right: 0;
 }
-.basic-input-style[data-v-cf0f8f29] {
+.basic-input-style[data-v-df4b8b3a] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.content-item[data-v-cf0f8f29] {
+.content-item[data-v-df4b8b3a] {
   padding: 0.5em 0.8em;
   border-radius: 0.3em;
   cursor: pointer;
   margin-bottom: 1px;
 }
-.content-item .item-summary[data-v-cf0f8f29] {
+.content-item .item-summary[data-v-df4b8b3a] {
   opacity: 0.5;
   font-size: 0.9em;
 }
-.content-item .item-title[data-v-cf0f8f29] {
+.content-item .item-title[data-v-df4b8b3a] {
   font-weight: 500;
 }
 @media (prefers-color-scheme: light) {
-  .content-item[data-v-cf0f8f29] {
+  .content-item[data-v-df4b8b3a] {
     background: var(--bg1, #fff);
     border: 1px solid color-mix(in lab, currentColor 15%, transparent);
   }
 }
 @media (prefers-color-scheme: dark) {
-  .content-item[data-v-cf0f8f29] {
+  .content-item[data-v-df4b8b3a] {
     background: color-mix(in lab, #000 1%, transparent);
     border: 1px solid color-mix(in lab, currentColor 18%, transparent);
   }
 }
-.content-item[data-v-cf0f8f29]:last-child {
+.content-item[data-v-df4b8b3a]:last-child {
   margin-bottom: 0;
 }
-.content-item .text[data-v-cf0f8f29] {
+.content-item.deleted .text[data-v-df4b8b3a] {
+  color: var(--error, red);
+  text-decoration: line-through;
+}
+.content-item.inactive .text[data-v-df4b8b3a] {
+  opacity: 0.5;
+}
+.content-item .text[data-v-df4b8b3a] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: pre-line;
 }
-.content-item .icon-wrapper[data-v-cf0f8f29] {
+.content-item .icon-wrapper[data-v-df4b8b3a] {
   width: 25px;
   font-size: 20px;
   text-align: center;
 }
-.content-item .icon-wrapper.complete[data-v-cf0f8f29] {
+.content-item .icon-wrapper.complete[data-v-df4b8b3a] {
   color: var(--success, green);
 }
-.content-item .icon-wrapper.pending[data-v-cf0f8f29] {
+.content-item .icon-wrapper.pending[data-v-df4b8b3a] {
   color: var(--warning, orange);
 }
-.content-item .image-wrapper[data-v-cf0f8f29] {
+.content-item .image-wrapper[data-v-df4b8b3a] {
   width: 50px;
 }
-.content-item .image-wrapper.profile[data-v-cf0f8f29] {
+.content-item .image-wrapper.profile[data-v-df4b8b3a] {
   width: 40px;
   height: 40px;
   background: rgba(0, 0, 0, 0.1);
   border-radius: 100%;
 }
-.content-item[data-v-cf0f8f29]:hover {
+.content-item[data-v-df4b8b3a]:hover {
   cursor: pointer;
   background: color-mix(in lab, currentColor 2%, transparent);
 }
+.content-item .pill[data-v-df4b8b3a] {
+  border-radius: 3em;
+  padding: 0.3em 0.6em;
+  display: block;
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  font-size: 0.7em;
+  background: color-mix(in lab, currentColor 10%, transparent);
+  color: color-mix(in lab, currentColor, transparent);
+  border: 1px solid;
+}
+.content-item .pill.live[data-v-df4b8b3a],
+.content-item .pill.success[data-v-df4b8b3a],
+.content-item .pill.paid[data-v-df4b8b3a],
+.content-item .pill.active[data-v-df4b8b3a] {
+  background: #e0f3bf;
+  color: #569e2f;
+}
+@media (prefers-color-scheme: dark) {
+  .content-item .pill.live[data-v-df4b8b3a],
+  .content-item .pill.success[data-v-df4b8b3a],
+  .content-item .pill.paid[data-v-df4b8b3a],
+  .content-item .pill.active[data-v-df4b8b3a] {
+    background: none;
+  }
+}
+.content-item .pill.sandbox[data-v-df4b8b3a],
+.content-item .pill.pending[data-v-df4b8b3a],
+.content-item .pill.cancelling[data-v-df4b8b3a] {
+  background: #fbecbb;
+  color: #d17a0e;
+}
+@media (prefers-color-scheme: dark) {
+  .content-item .pill.sandbox[data-v-df4b8b3a],
+  .content-item .pill.pending[data-v-df4b8b3a],
+  .content-item .pill.cancelling[data-v-df4b8b3a] {
+    background: none;
+  }
+}
+.content-item .pill.error[data-v-df4b8b3a],
+.content-item .pill.unpaid[data-v-df4b8b3a],
+.content-item .pill.deleted[data-v-df4b8b3a],
+.content-item .pill.failed[data-v-df4b8b3a] {
+  background: #ffdddd;
+  color: #b14e4e;
+}
+@media (prefers-color-scheme: dark) {
+  .content-item .pill.error[data-v-df4b8b3a],
+  .content-item .pill.unpaid[data-v-df4b8b3a],
+  .content-item .pill.deleted[data-v-df4b8b3a],
+  .content-item .pill.failed[data-v-df4b8b3a] {
+    background: none;
+  }
+}
 .basic-input-style[data-v-38242855],
 input[data-v-38242855] {
   color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qikdev/vue-ui",
-  "version": "0.2.275",
+  "version": "0.2.276",
   "files": [
     "dist"
   ],