new design for procedure detail (admin)

app/assets/stylesheets/new_design/buttons.scss

@@ -318,13 +318,3 @@
   color: $blue;
 }
 
-.card-admin-action-btn {
-  width: 90px;
-  height: 36px;
-  border-radius: 30px;
-  border: solid 1px #BBBBBB;
-  background: #FFFFFF;
-  cursor: pointer;
-  padding-left: 10px;
-  padding-right: 10px;
-}

app/assets/stylesheets/new_design/card.scss

@@ -62,46 +62,3 @@
     margin-bottom: $default-spacer;
   }
 }
-
-.card-admin-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
-  grid-gap: 20px;
-  margin: auto;
-  margin-bottom: 20px;
-}
-
-.card-admin {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  width: 236px;
-  height: 200px;
-  border-radius: 4px;
-  border: solid 1px $border-grey;
-  text-align: center;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-
-  .card-admin-status-accept {
-    color: #50AA75;
-  }
-
-  .card-admin-status-todo {
-    color: #246AC5;
-  }
-
-  .card-admin-title {
-    font-weight: bold;
-    font-size: 18px;
-    margin-bottom: $default-spacer;
-  }
-
-  .card-admin-subtitle {
-    font-size: 14px;
-  }
-
-  .card-admin-action {
-    margin-top: auto;
-  }
-}

app/assets/stylesheets/new_design/card_admin.scss

@@ -0,0 +1,55 @@
+@import "colors";
+@import "constants";
+
+.card-admin {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  width: 236px;
+  height: 200px;
+  border-radius: 4px;
+  border: solid 1px $border-grey;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  .card-admin-status-accept {
+    color: #50AA75;
+  }
+
+  .card-admin-status-todo {
+    color: #246AC5;
+  }
+
+  .card-admin-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: $default-spacer;
+  }
+
+  .card-admin-subtitle {
+    font-size: 14px;
+  }
+
+  .card-admin-action {
+    margin-top: auto;
+  }
+
+  .card-admin-action-btn {
+    width: 90px;
+    height: 36px;
+    border-radius: 30px;
+    border: solid 1px #BBBBBB;
+    background: #FFFFFF;
+    cursor: pointer;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .card-admin {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

app/assets/stylesheets/new_design/procedure_grid.scss

@@ -0,0 +1,6 @@
+
+.procedure-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}

app/views/new_administrateur/procedures/show.html.haml

@@ -7,7 +7,7 @@
 
 .container
   %h2.explication-libelle{ style: "font-weight: bold; font-size: 20px; margin-bottom: 20px;" } Indispensable avant publication
-  .card-admin-list
+  .procedure-grid
     .card-admin
       %div
         %span.icon.accept
@@ -79,7 +79,7 @@
           = button_to 'Modifier', admin_procedure_groupe_instructeur_path(@procedure, @procedure.defaut_groupe_instructeur), method: :get, class: 'card-admin-action-btn', id: "instructeurs"
 
   %h2.explication-libelle{ style: "font-weight: bold; font-size: 20px; margin-bottom: 20px;" } Pour aller plus loin
-  .card-admin-list
+  .procedure-grid
     .card-admin
       - if @procedure.attestation_template.present?
         %div