Redesign the tabs so that they look more like tabs

app/assets/stylesheets/new_design/_tabs.scss

@@ -4,19 +4,35 @@
 .tabs {
   li {
     display: inline-block;
-    margin-right: 40px;
+    line-height: 36px;
-  }
+    position: relative;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 3px 3px 0 0;
+    border: 1px solid transparent;
 
-  a {
+    a {
-    @include vertical-padding(14px);
+      display: block;
-    display: block;
+      padding-left: 20px;
-    color: $black;
+      padding-right: 20px;
-    font-size: 22px;
+      color: $black;
+    }
+
+    &.active {
+      background-color: #FFFFFF;
+      border-top: 1px solid $border-grey;
+      border-left: 1px solid $border-grey;
+      border-right: 1px solid $border-grey;
+
+      a {
+        color: $blue;
+      }
+    }
 
-    &.selected,
     &:hover {
-      border-bottom: 2px solid $blue;
+      a {
-      padding-bottom: 12px;
+        color: $blue;
+      }
     }
   }
 }

app/views/new_gestionnaire/dossiers/_header.html.haml

@@ -6,11 +6,11 @@
       %li
         = "Dossier n° #{dossier.id}"
     %ul.tabs
-      %li
+      %li{ class: ("active" if current_page?(dossier_path(dossier.procedure, dossier))) }
-        = link_to "Demande", dossier_path(dossier.procedure, dossier), class: ("selected" if current_page?(dossier_path(dossier.procedure, dossier)))
+        = link_to "Demande", dossier_path(dossier.procedure, dossier)
-      %li
+      %li{ class: current_page?(instruction_dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
-        = link_to "Instruction", instruction_dossier_path(dossier.procedure, dossier), class: current_page?(instruction_dossier_path(dossier.procedure, dossier)) ? 'selected' : nil
+        = link_to "Instruction", instruction_dossier_path(dossier.procedure, dossier)
-      %li
+      %li{ class: current_page?(messagerie_dossier_path(dossier.procedure, dossier)) ? 'active' : nil }
-        = link_to "Messagerie", messagerie_dossier_path(dossier.procedure, dossier), class: current_page?(messagerie_dossier_path(dossier.procedure, dossier)) ? 'selected' : nil
+        = link_to "Messagerie", messagerie_dossier_path(dossier.procedure, dossier)
       %li
         = link_to "Historique", "#"

app/views/root/patron.html.haml

@@ -93,8 +93,8 @@
     .container
       Titre
       %ul.tabs
-        %li
+        %li{ class: "active" }
-          = link_to "Onglet 1", "#", class: "selected"
+          = link_to "Onglet 1", "#"
         %li
           = link_to "Onglet 2", "#"
         %li