make tabs vertical

_layouts/page.html

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

assets/css/style.scss

@@ -53,18 +53,45 @@ main {
   flex: 1 0 auto;
 }
 
-.tabs .indicator {
-  background-color: teal;
-}
-.tabs .tab {
-  a.active {
-    color: teal;
+.tabs-vertical {
+  .tabs {
+    height: auto;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    display: -webkit-flex;
+    display: flex;
   }
-  a:hover {
-    color: teal;
+
+  .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.active {
+        color: teal;
+      }
   }
-  a{
-    color: teal;
+
+  .indicator {
+    display: none;
   }
 }
 

widgets.html

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