implement left and right tabs styles

diff --git a/lib/patterns.less b/lib/patterns.less
index f1badc46d4299a75707a83845c847a8b0e62446c..1db3158313b4eb9e152f1381594598f815856b94 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -379,19 +379,71 @@
   }
 
   // Tabs on left
-  &.tabs-left .tabs {
-    float: left;
-  }
-  &.tabs-left .tabs > li {
-    float: none;
+  &.tabs-left {
+    .clearfix();
+
+    .tab-content {
+      float: left;
+    }
+    .tabs {
+      float: left;
+
+      > li {
+        float: none;
+        margin-bottom: -1px;
+        margin-right: -1px;
+        > a {
+          margin-right: 0;
+          margin-bottom: 2px;
+          .border-radius(4px 0 0 4px);
+
+          &:hover {
+            border-color: transparent;
+            border-right-color: #ddd;
+          }
+        }
+      }
+
+      > .active > a,
+      > .active > a:hover {
+        border-color: #ddd;
+        border-right-color: transparent;
+      }
+    }
   }
 
   // Tabs on right
-  &.tabs-right .tabs {
-    float: right;
-  }
-  &.tabs-right .tabs > li {
-    float: none;
+  &.tabs-right {
+    .clearfix();
+
+    .tab-content {
+      float: right;
+    }
+    .tabs {
+      float: right;
+
+      > li {
+        float: none;
+        margin-bottom: -1px;
+        margin-left: -1px;
+        > a {
+          margin-left: 0;
+          margin-bottom: 2px;
+          .border-radius(4px 0 0 4px);
+
+          &:hover {
+            border-color: transparent;
+            border-left-color: #ddd;
+          }
+        }
+      }
+
+      > .active > a,
+      > .active > a:hover {
+        border-color: #ddd;
+        border-left-color: transparent;
+      }
+    }
   }
 }