Disable hover effect when TagList is readonly.
authorAlexandre Segura <mex.zktk@gmail.com>
Tue, 14 Mar 2017 13:18:19 +0100
changeset 424 2980c90e88ce
parent 423 729e51dd282e
child 425 7bc5febc9933
Disable hover effect when TagList is readonly.
src_js/iconolab-bundle/src/components/tagform/TagListItem.vue
--- a/src_js/iconolab-bundle/src/components/tagform/TagListItem.vue	Tue Mar 14 13:07:45 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/tagform/TagListItem.vue	Tue Mar 14 13:18:19 2017 +0100
@@ -1,6 +1,7 @@
 <template>
     <div class="tag-container">
-        <div @click="toggle" class="tag-item">
+        <div @click="toggle" class="tag-item"
+            v-bind:class="{ 'tag-item--readonly': readonly }">
             <span class="tag-title">{{ label }}</span>
             <div class="tag-item-buttons">
                 <div class="tag-item-btn tag-item-accuracy" v-bind:data-value="accuracy">
@@ -211,13 +212,13 @@
 }
 
 .tag-item {
-    cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #ccc;
 }
-.tag-item:hover {
+.tag-item:not(.tag-item--readonly):hover {
+    cursor: pointer;
     background-color: #f5f5f5;
 }