mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
[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
This commit is contained in:
committed by
Dan Abramov
parent
9bb7ca5001
commit
a92128e7fb
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user