fix: dismissable chip

Co-authored-by: Oscar Bresolin <oscareb@gmail.com>
italia · Jul 27, 2022 · df6661b · df6661b
1 parent 0f9ac18
commit df6661b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/docs/componenti/chips.md b/docs/componenti/chips.md
@@ -24,29 +24,29 @@ L'azione richiesta per l'eliminazione della chip andrà associata al `<button>`.
       <span class="chip-label">Label</span>
     </div>
     <p class="mt-4 mb-2">Testo e chiusura</p>
-    <div class="chip">
+    <div class="chip alert">
       <span class="chip-label">Label</span>
-      <button>
+      <button  data-bs-dismiss='alert'>
         <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
         <span class="visually-hidden">Elimina label</span>
       </button>
     </div>
     <p class="mt-4 mb-2">Icona, testo e chiusura</p>
-    <div class="chip">
+    <div class="chip alert">
       <svg class="icon icon-xs"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-github"></use></svg>
       <span class="chip-label">Label</span>
-      <button>
+      <button data-bs-dismiss='alert'>
         <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
         <span class="visually-hidden">Elimina label</span>
       </button>
     </div>
     <p class="mt-4 mb-2">Avatar, testo e chiusura</p>
-    <div class="chip">
+    <div class="chip alert">
       <div class="avatar size-xs">
         <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
       </div>
       <span class="chip-label">Label</span>
-      <button>
+      <button data-bs-dismiss='alert'>
         <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
         <span class="visually-hidden">Elimina label</span>
       </button>
@@ -59,29 +59,29 @@ L'azione richiesta per l'eliminazione della chip andrà associata al `<button>`.
       <span class="chip-label">Label</span>
     </div>
     <p class="mt-4 mb-2">Testo e chiusura grande</p>
-    <div class="chip chip-lg">
+    <div class="chip chip-lg alert">
       <span class="chip-label">Label</span>
-      <button>
+      <button data-bs-dismiss='alert'>
         <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
         <span class="visually-hidden">Elimina label</span>
       </button>
     </div>
     <p class="mt-4 mb-2">Icona, testo e chiusura grande</p>
-    <div class="chip chip-lg">
+    <div class="chip chip-lg alert">
       <svg class="icon icon-xs"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-github"></use></svg>
       <span class="chip-label">Label</span>
-      <button>
+      <button data-bs-dismiss='alert'>
         <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
         <span class="visually-hidden">Elimina label</span>
       </button>
     </div>
     <p class="mt-4 mb-2">Avatar, testo e chiusura grande</p>
-    <div class="chip chip-lg">
+    <div class="chip chip-lg alert">
       <div class="avatar size-xs">
         <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
       </div>
       <span class="chip-label">Label</span>
-      <button>
+      <button data-bs-dismiss='alert'>
         <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
         <span class="visually-hidden">Elimina label</span>
       </button>

diff --git a/docs/esempi/comuni/template-amministrazione.html b/docs/esempi/comuni/template-amministrazione.html
@@ -36,9 +36,9 @@ <h1>Amministrazione</h1>
         </div>
         <div id="filtri-ricerca-amministrazione">
           <h6 class="small">Filtri</h6>
-          <div class="chip chip-lg">
+          <div class="chip chip-lg alert">
             <span class="chip-label">Tutto</span>
-            <button>
+            <button data-bs-dismiss='alert'>
               <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
               <span class="visually-hidden">Elimina label</span>
             </button>

diff --git a/src/scss/custom/_chips.scss b/src/scss/custom/_chips.scss
@@ -11,6 +11,7 @@
   padding: 0 $v-gap * 2 2px $v-gap;
   transition: all 0.05s;
   margin-right: $v-gap * 0.5;
+  margin-bottom: 0;
   //label
   .chip-label {
     font-size: 0.875rem;