[IMP] toctrees: redesign and new card component

The goal of this commit is to propose a first step towards a new
`.. card::` directive for the toctrees. This is a first design
proposition for this new card component in raw html for the fallback
page `howtos.rst`

The long term objective is to redesign the toctrees by implementing card
components, clearer toctree list design and custom html pages.

Related to task-3059229

closes odoo/documentation#3404

X-original-commit: c59663f252
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>

extensions/odoo_theme/static/scss/bootstrap_overridden.scss

@@ -103,3 +103,6 @@ $accordion-icon-transform:                  rotate(0deg) !default;
 $alert-border-width:                        3px;
 $alert-border-scale:                        0;
 $alert-border-radius:                       0 3px 3px 0;
+
+// Card
+$card-cap-bg:                               transparent;

extensions/odoo_theme/static/style.scss

@@ -1056,6 +1056,28 @@ header {
     }
 }
 
+//------------------------------------------------------------------------------
+// Cards
+//------------------------------------------------------------------------------
+
+.o_toctree_card {
+
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+
+        .card {
+            background-color: rgba($teal-100, 0.2);
+        }
+
+    }
+
+    .card {
+        transition: all 200ms;
+    }
+
+}
+
 //------------------------------------------------------------------------------
 // Content Tabs
 //------------------------------------------------------------------------------