Ajout d'une classe pour le hover des éléments d'une liste

sass/colors.scss

@@ -45,7 +45,7 @@ $pagination-hover-color: rgb(115, 151, 186);
     --input-font-color: #{$nord3};
     --input-color: #{$white};
     --input-active-color: #{$nord5};
-    
+
     --navbar-color: #{darken($white, 5%)};
 
     --box-bg-color: #F8F9FB;

sass/list.scss

@@ -30,10 +30,6 @@
                 border-right: 1px solid var(--border-color);
                 margin-right: -1px;
             }
-
-            &:hover {
-                background-color: var(--border-color);
-            }
         }
 
         .title {
@@ -50,4 +46,10 @@
             max-width: 90%;
         }
     }
+
+    &.hover {
+        .item:hover {
+            background-color: var(--border-color);
+        }
+    }
 }

views/pages/ajouter-un-album.ejs

@@ -15,7 +15,7 @@
         </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 list">
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
         <div class="item" v-if="!loading" v-for="item in items">
             <a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
             <div class="grid grid-cols-2 md:grid-cols-4">

views/pages/composants.ejs

@@ -110,7 +110,7 @@
     <p>
         Se référer à la documentation de <a href="https://www.knacss.com/doc.html#grid" target="_blank" rel="noopener noreferrer">Knacss</a>.
     </p>
-    
+
     <h2 id="boutons">Les boutons</h2>
     <div type="button" class="button">.button</div>
     <div type="button" class="button is-link">.button.is-link</div>
@@ -170,28 +170,28 @@
     </pre>
     <div class="field">
         <label for="choix1">choix 1</label>
-        <input type="radio" id="choix1" name="choix" value="choix1" checked> 
+        <input type="radio" id="choix1" name="choix" value="choix1" checked>
         <label for="choix2">choix 2</label>
         <input type="radio" id="choix2" name="choix" value="choix2">
     </div>
     <pre>
 &lt;div class="field"&gt;
     &lt;label for="choix1"&gt;choix 1&lt;/label&gt;
-    &lt;input type="radio" id="choix1" name="choix" value="choix1" checked&gt; 
+    &lt;input type="radio" id="choix1" name="choix" value="choix1" checked&gt;
     &lt;label for="choix2"&gt;choix 2&lt;/label&gt;
     &lt;input type="radio" id="choix2" name="choix" value="choix2"&gt;
 &lt;/div&gt;
     </pre>
     <div class="field">
         <label for="checkbox1">choix 1</label>
-        <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked> 
+        <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked>
         <label for="checkbox2">choix 2</label>
         <input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2">
     </div>
     <pre>
 &lt;div class="field"&gt;
     &lt;label for="checkbox1"&gt;choix 1&lt;/label&gt;
-    &lt;input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked&gt; 
+    &lt;input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked&gt;
     &lt;label for="checkbox2"&gt;choix 2&lt;/label&gt;
     &lt;input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2"&gt;
 &lt;/div&gt;
@@ -243,11 +243,11 @@
                 <label for="password">Mot de passe</label>
                 <input type="password" name="password" id="password" placeholder="********">
             </div>
-    
+
             <div class="text-right mt-10">
                 <p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
             </div>
-    
+
             <button type="submit" class="button is-primary">Connexion</button>
         </form>
     </div>
@@ -284,9 +284,9 @@
         <span></span>
     </div>
     <pre>
-&lt;button 
+&lt;button
     type="button"
-    class="button is-primary" 
+    class="button is-primary"
     onclick="showToastr('Ceci est une notification');"
 &gt;
     Afficher une notification
@@ -318,6 +318,7 @@
     <i class="icon-blind">.icon-blind</i>
 
     <h2 id="listes">Les listes</h2>
+    <h3>Liste normale</h3>
     <div class="grid grid-cols-1 md:grid-cols-2 list">
         <div class="item" v-for="item in items">
             <span class="title">
@@ -340,6 +341,29 @@
     &lt;/div&gt;
 &lt;/div&gt;
     </pre>
+    <h3>Liste avec effet au hover</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
+        <div class="item" v-for="item in items">
+            <span class="title">
+                {{ item.title }}
+            </span>
+            <div class="grid grid-cols-2 md:grid-cols-4">
+                <div>
+                    <img :src="item.thumb" :alt="item.title" />
+                </div>
+                <div class="md:col-span-3">
+                    {{ item.lorem }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <pre>
+&lt;div class="grid grid-cols-1 md:grid-cols-2 list hover"&gt;
+    &lt;div class="item"&gt;
+        Contenu
+    &lt;/div&gt;
+&lt;/div&gt;
+    </pre>
 
     <h2 id="paginations">Les paginations</h2>
     <nav class="pagination" role="navigation" aria-label="Pagination">

views/pages/mon-compte/ma-collection/index.ejs

@@ -43,7 +43,7 @@
             </select>
         </div>
     </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 list">
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
         <div class="item" v-if="!loading" v-for="item in items">
             <span class="title">
                 <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>