create a card css component

core/static/core/components/card.scss

@@ -0,0 +1,96 @@
+@import "core/static/core/colors";
+
+@mixin row-layout {
+  min-height: 100px;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  .card-image {
+    max-width: 75px;
+  }
+  .card-content {
+    flex: 1;
+    text-align: left;
+  }
+}
+
+.card {
+  background-color: $primary-neutral-light-color;
+  border-radius: 5px;
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px 10px;
+  height: fit-content;
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+
+  &:hover {
+    background-color: darken($primary-neutral-light-color, 5%);
+  }
+
+  &.selected {
+    animation: bg-in-out 1s ease;
+    background-color: rgb(216, 236, 255);
+  }
+
+  .card-image {
+    width: 100%;
+    height: 100%;
+    min-height: 70px;
+    max-height: 70px;
+    object-fit: contain;
+    border-radius: 4px;
+    line-height: 70px;
+  }
+
+  i.card-image {
+    color: black;
+    text-align: center;
+    background-color: rgba(173, 173, 173, 0.2);
+    width: 80%;
+  }
+
+  .card-content {
+    color: black;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 100%;
+
+    p {
+      font-size: 13px;
+      margin: 0;
+    }
+
+    .card-title {
+      margin: 0;
+      font-size: 15px;
+      word-break: break-word;
+    }
+  }
+
+  @keyframes bg-in-out {
+    0% {
+      background-color: white;
+    }
+    100% {
+      background-color: rgb(216, 236, 255);
+    }
+  }
+
+  @media screen and (max-width: 765px) {
+    @include row-layout
+  }
+
+  // When combined with card, card-row display the card in a row layout,
+  // whatever the size of the screen.
+  &.card-row {
+    @include row-layout
+  }
+}
+

core/static/user/user_detail.scss

@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 main {
   box-sizing: border-box;
   display: flex;
@@ -69,7 +71,7 @@ main {
         border-radius: 50%;
         justify-content: center;
         align-items: center;
-        background-color: #f2f2f2;
+        background-color: $primary-neutral-light-color;
 
         > span {
           font-size: small;

eboutic/static/eboutic/css/eboutic.css

@@ -108,28 +108,8 @@
   column-gap: 15px;
   row-gap: 15px;
 }
-#eboutic .product-button {
-  position: relative;
-  box-sizing: border-box;
-  min-height: 180px;
-  height: fit-content;
-  width: 150px;
-  padding: 15px;
-  overflow: hidden;
-  box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 5px;
-  justify-content: flex-start;
-}
 
-#eboutic .product-button.selected {
+#eboutic .card.selected::after {
-  animation: bg-in-out 1s ease;
-  background-color: rgb(216, 236, 255);
-}
-
-#eboutic .product-button.selected::after {
   content: "🛒";
   position: absolute;
   top: 5px;
@@ -144,36 +124,6 @@
   line-height: 20px;
 }
 
-#eboutic .product-button:active {
-  box-shadow: none;
-}
-
-#eboutic .product-image {
-  width: 100%;
-  height: 100%;
-  min-height: 70px;
-  max-height: 70px;
-  object-fit: contain;
-  border-radius: 4px;
-  line-height: 70px;
-  margin-bottom: 15px;
-}
-
-#eboutic i.product-image {
-  background-color: rgba(173, 173, 173, 0.2);
-}
-
-#eboutic .product-description h4 {
-  font-size: .75em;
-  word-break: break-word;
-  margin: 0 0 5px 0;
-}
-
-#eboutic .product-button p {
-  font-size: 13px;
-  margin: 0;
-}
-
 #eboutic .catalog-buttons {
   display: flex;
   justify-content: center;
@@ -207,39 +157,5 @@
     justify-content: space-around;
     flex-direction: column;
   }
-
-  #eboutic .product-group .product-button {
-    min-height: 100px;
-    width: 100%;
-    max-width: 100%;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
 }
 
-  #eboutic .product-group .product-description {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  #eboutic .product-description h4 {
-    text-align: left;
-    max-width: 90%;
-  }
-
-  #eboutic .product-image {
-    margin-bottom: 0;
-    max-width: 70px;
-  }
-}
-
-@keyframes bg-in-out {
-  0% {
-    background-color: white;
-  }
-  100% {
-    background-color: rgb(216, 236, 255);
-  }
-}

eboutic/templates/eboutic/eboutic_main.jinja

@@ -15,7 +15,8 @@
 {% endblock %}
 
 {% block additional_css %}
-  <link rel="stylesheet" href="{{ static('eboutic/css/eboutic.css') }}">
+  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
+  <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 
 {% block content %}
@@ -104,18 +105,21 @@
                 {% for p in items %}
                   <button
                     id="{{ p.id }}"
-                    class="product-button"
+                    class="card product-button clickable shadow"
                     :class="{selected: items.some((i) => i.id === {{ p.id }})}"
                     @click='addFromCatalog({{ p.id }}, {{ p.name|tojson }}, {{ p.selling_price }})'
                   >
                     {% if p.icon %}
-                      <img class="product-image" src="{{ p.icon.url }}"
+                      <img
-                           alt="image de {{ p.name }}">
+                        class="card-image"
+                        src="{{ p.icon.url }}"
+                        alt="image de {{ p.name }}"
+                      >
                     {% else %}
-                      <i class="fa-regular fa-image fa-2x product-image"></i>
+                      <i class="fa-regular fa-image fa-2x card-image"></i>
                     {% endif %}
-                    <div class="product-description">
+                    <div class="card-content">
-                      <h4>{{ p.name }}</h4>
+                      <h4 class="card-title">{{ p.name }}</h4>
                       <p>{{ p.selling_price }} €</p>
                     </div>
                   </button>

election/static/election/css/election.scss

@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 $padding: 1.5rem;
 $padding_smaller: .5rem;
 $gap: .25rem;
@@ -51,7 +53,6 @@ $min_col_width: 100px;
         min-width: $min_col_width;
 
         >a {
-          margin-left: $padding;
           width: 20px;
           height: 20px;
           text-align: center;
@@ -269,12 +270,12 @@ $min_col_width: 100px;
   border: none;
   color: black;
   text-decoration: none;
-  background-color: #f2f2f2;
+  background-color: $primary-neutral-light-color;
   padding: 0.4em;
   margin: 0.1em;
   font-size: 1.18em;
   border-radius: 5px;
-  box-shadow: #dfdfdf 0px 0px 1px;
+  box-shadow: #dfdfdf 0 0 1px;
   cursor: pointer;
 
   &:hover {

sas/static/sas/css/album.scss

@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 main {
   box-sizing: border-box;
   padding: 10px;
@@ -25,7 +27,7 @@ main {
     font-size: 1.2em;
     line-height: 1.2em;
     color: black;
-    background-color: #f2f2f2;
+    background-color: $primary-neutral-light-color;
     border-radius: 5px;
     font-weight: bold;
 
@@ -34,7 +36,7 @@ main {
     }
 
     &:disabled {
-      background-color: #f2f2f2;
+      background-color: $primary-neutral-light-color;
       color: #d4d4d4;
     }
   }

sas/static/sas/css/picture.scss

@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 #content {
   padding: 10px !important;
 }
@@ -241,7 +243,7 @@
       >div {
         >a.button {
           box-sizing: border-box;
-          background-color: #f2f2f2;
+          background-color: $primary-neutral-light-color;
           display: flex;
           justify-content: center;
           align-items: center;