Add the option to style tags

README.md

@@ -58,6 +58,7 @@ services:
         logo: "/assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
         tag: "haproxy"
+        tagstyle: "is-success"
         url: "#"
   - name: "Monitoring"
     icon: "fa-heartbeat"

app.css

@@ -165,6 +165,8 @@ body {
     overflow: hidden;
     transition: all 0.2s ease-out;
     padding: 0; }
+    body .tag .tag-text {
+      display: none; }
   body .card {
     border-radius: 5px;
     border: none;
@@ -178,6 +180,8 @@ body {
       width: auto;
       color: #ffffff;
       padding: 0 0.75em; }
+      body .card:hover .tag .tag-text {
+        display: block; }
   body .card-content {
     height: 85px;
     padding: 1.3rem; }

app.css.map

@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["app.scss"],
 "names": [],
 "file": "app.css"
-}
+}

app.js

@@ -85,7 +85,9 @@ Vue.component('service', {
                         <p class="subtitle is-6">{{ item.subtitle }}</p>
                     </div>
                 </div>
-                <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
+                <div class="tag" :class="item.tagstyle" v-if="item.tag">
+                    <strong class="tag-text">#{{ item.tag }}</strong>
+                </div>
             </div>
         </a>
     </div></div>`

app.scss

@@ -212,6 +212,10 @@ body {
     overflow: hidden;
     transition: all 0.2s ease-out;
     padding: 0;
+    
+    .tag-text {
+      display: none;
+    }
   }
 
   .card {
@@ -232,6 +236,10 @@ body {
       width: auto;
       color: #ffffff;
       padding: 0 0.75em;
+      
+      .tag-text {
+        display: block;
+      }
     }
   }
 

config.yml

@@ -39,6 +39,7 @@ services:
         logo: "/assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
         tag: "haproxy"
+        tagstyle: "is-success"
         url: "#"
   - name: "Monitoring"
     icon: "fas fa-heartbeat"