style: plus/minus icons

brown-ccv · Dec 9, 2024 · d1f8584 · d1f8584
1 parent bdfe61e
commit d1f8584
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
@@ -1,16 +1,19 @@
 <template>
   <div>
     <div
-      class="card has-background-info"
+      class="card has-background-info is-hoverable"
       :class="{ 'not-expanded': !expanded}"
     >
       <header class="card-header" @click="toggleCardState">
         <p class="card-header-title">
           {{ title }}
         </p>
         <a class="card-header-icon">
-          <span class="icon">
-            <i class="mdi mdi-menu-up mdi-24px" />
+          <span v-if="expanded === false" class="icon">
+            <i class="mdi mdi-plus mdi-24px" />
+          </span>
+          <span v-else class="icon">
+            <i class="mdi mdi-minus mdi-24px" />
           </span>
         </a>
       </header>
@@ -28,7 +31,6 @@
 export default {
   props: {
     title: String,
-    backgroundColor: String,
     expandAll: Boolean,
   },
   data() {
@@ -54,11 +56,6 @@ export default {
 
   .card-header {
     cursor: pointer;
-
-    .icon {
-      transform: rotate(180deg);
-      transition: transform 150ms ease-out;
-    }
   }
 
   .card-content {

diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
@@ -30,7 +30,7 @@
                 ]"
             /></span>
           </button>
-          <Accordion :title="humanize(s.name)" background-color="info">
+          <Accordion :title="humanize(s.name)">
             <div class="content" v-html="$md.render(s.description || '')"></div>
           </Accordion>
         </div>