make tabs vertical

_layouts/page.html

@@ -75,14 +75,10 @@
 
     <div class="container">
         <div class="section">
-
-
             <div class="row">
-                <div class="col s12 m8 offset-m2">
                 {{content}}
             </div>
         </div>
-        </div>
         <br><br>
         <div class="section">
 

assets/css/style.scss

@@ -53,21 +53,48 @@ main {
   flex: 1 0 auto;
 }
 
-.tabs .indicator {
-  background-color: teal;
+.tabs-vertical {
+  .tabs {
+    height: auto;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    display: -webkit-flex;
+    display: flex;
   }
-.tabs .tab {
-  a.active {
+
+  .tab {
+    width: 100%;
+
+    .active {
+      -moz-transition: border-color .5s ease;
+      -o-transition: border-color .5s ease;
+      -webkit-transition: border-color .5s ease;
+      transition: border-color .5s ease;
+      border-right: 3px solid teal;
+    }
+
+    :hover {
+      border-right: 3px solid #eeeeee;
+    }
+
+    a {
       color: teal;
+      :hover { color: teal; }
     }
     a:hover{
         color: teal;
     }
-  a{
+    a.active {
         color: teal;
       }
   }
 
+  .indicator {
+    display: none;
+  }
+}
+
 .widget{
   transition: all 2s linear;
 }

widgets.html

@@ -2,12 +2,17 @@
 layout: page
 ---
 
+<div class="tabs-vertical">
+    <div class="col s4 m3 l2">
         <ul class="tabs">
             {% for widget in site.widgets %}
-    <li class="tab col s2"><a href="#tab{{ widget.title }}">{{ widget.title }}</a></li>
+            <li class="tab"><a href="#tab{{ widget.title }}">{{ widget.title }}</a></li>
             {% endfor %}
         </ul>
-
+    </div>
+    <div class="col s8 m9 l6">
         {% for widget in site.widgets %}
         <div id="tab{{ widget.title }}" class="widget col s12">{{ widget.content }}</div>
         {% endfor %}
+    </div>
+</div>