[Docs: Installation] Fix tabs responsive layout - Resubmit (#9458)

* [Docs: Installation] Fix tabs responsive layout * Move tabs a pixel down * Remove left margin on first tab * Remove the long line * Fix mobile styles
facebook · Apr 20, 2017 · a92128e · a92128e
1 parent 9bb7ca5
commit a92128e
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/docs/docs/installation.md b/docs/docs/installation.md
@@ -23,21 +23,43 @@ React is flexible and can be used in a variety of projects. You can create new a
   <style>
     .toggler li {
        display: inline-block;
+       position: relative;
+       top: 1px;
        padding: 10px;
-       margin: 2px;
+       margin: 0px 2px 0px 2px;
        border: 1px solid #05A5D1;
-       border-radius: 3px;
+       border-bottom-color: transparent;
+       border-radius: 3px 3px 0px 0px;
        color: #05A5D1;
        background-color: transparent;
        font-size: 0.99em;
        cursor: pointer;
     }
+    .toggler li:first-child {
+      margin-left: 0;
+    }
+    .toggler li:last-child {
+      margin-right: 0;
+    }
     .toggler ul {
+      display: inline-block;
       list-style-type: none;
       margin: 0;
+      border-bottom: 1px solid #05A5D1;
+      cursor: default;
     }
-    .toggler li {
-      display: inline;
+    @media screen and (max-width: 960px) {
+      .toggler li,
+      .toggler li:first-child,
+      .toggler li:last-child {
+        display: block;
+        border-bottom-color: #05A5D1;
+        border-radius: 3px;
+        margin: 2px 0px 2px 0px;
+      }
+      .toggler ul {
+        border-bottom: 0;
+      }
     }
     .display-target-fiddle .toggler .button-fiddle:focus,
     .display-target-newapp .toggler .button-newapp:focus,