Browse Source

[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
main
Almero Steyn 8 years ago
committed by Dan Abramov
parent
commit
70359d7a34
  1. 30
      docs/installation.md

30
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,

Loading…
Cancel
Save