mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-13 22:30:41 +08:00
5e26ced280
* Give docs some more room to breath * Working on the new docs * New intro * Writing installation guide * Finish tab intro. * Write intro to drawernavigator. * Add some space * Rename guide * Minimize changes * Fix links * Edits
713 lines
12 KiB
CSS
713 lines
12 KiB
CSS
body, #root, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #eee;
|
|
font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "sans-serif", "Icons16";
|
|
}
|
|
#root h3,
|
|
#root h1 {
|
|
line-height: 1.5em;
|
|
}
|
|
.main-section a,
|
|
.main-section a:hover {
|
|
color: #6b52ae;
|
|
}
|
|
.md-header:before {
|
|
display: block;
|
|
content: " ";
|
|
margin-top: -70px;
|
|
height: 70px;
|
|
visibility: hidden;
|
|
}
|
|
.md-header a {
|
|
visibility: hidden;
|
|
display: inline-block;
|
|
}
|
|
.md-header:hover a {
|
|
visibility: visible;
|
|
}
|
|
.link-header a:first-of-type {
|
|
visibility: visible;
|
|
color: #182026;
|
|
}
|
|
.nextLink {
|
|
float: right;
|
|
}
|
|
a.editLink:hover,
|
|
a.editLink {
|
|
text-align: center;
|
|
display: block;
|
|
color: #888;
|
|
}
|
|
.md-section {
|
|
margin: -25px 0 0 0;
|
|
}
|
|
.md-section img {
|
|
max-width: 100%;
|
|
}
|
|
.md-section > img {
|
|
margin: 25px 0;
|
|
}
|
|
.md-section code,
|
|
.md-section pre {
|
|
background: rgba(252, 247, 255, 0.7);
|
|
color: #182026;
|
|
}
|
|
.md-section > h1,
|
|
.md-section > h2,
|
|
.md-section > h3,
|
|
.md-section > h4 {
|
|
margin: 25px 0 0 0;
|
|
line-height: 1em;
|
|
}
|
|
.md-section > h4 {
|
|
font-size: 18px;
|
|
}
|
|
.md-section > ul,
|
|
.md-section > ol,
|
|
.md-section > pre,
|
|
.md-section > p,
|
|
.md-section > blockquote {
|
|
margin: 15px 0 0 0;
|
|
}
|
|
.md-section ul li,
|
|
.md-section ol li {
|
|
margin: 15px 0 0 0;
|
|
}
|
|
|
|
.md-section .snack {
|
|
margin: 15px 0 0 0;
|
|
}
|
|
|
|
.errorScreen {
|
|
height: 100%;
|
|
margin: 100px;
|
|
text-align: center;
|
|
}
|
|
.cta-row {
|
|
text-align: center;
|
|
margin: 20px 0 50px;
|
|
}
|
|
a.cta {
|
|
-webkit-transition: color 1s, border-color 1s, background-color 1s, -webkit-transform 1s;
|
|
transition: color 1s, border-color 1s, background-color 1s, transform 1s;
|
|
color: #2F0F33;
|
|
border-radius: 5px;
|
|
border: 3px solid #2F0F33;
|
|
border-color: #2F0F33;
|
|
background: transparent;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
padding: 15px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
a.cta:hover {
|
|
color: #6b52ae;
|
|
border-color: #6b52ae;
|
|
background: white;
|
|
}
|
|
a.cta > span.label {
|
|
line-height: 1em;
|
|
margin: 15px;
|
|
}
|
|
a.cta > span.icon {
|
|
margin-right: 15px;
|
|
margin-left: 0px;
|
|
}
|
|
a.cta:hover {
|
|
text-decoration: none;
|
|
}
|
|
#navbar {
|
|
height: 60px;
|
|
padding-top: 7px;
|
|
position: fixed;
|
|
box-shadow: none;
|
|
border-bottom: 1px solid #bbb;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
text-align: right;
|
|
}
|
|
#navbar .pt-navbar-heading {
|
|
font-size: 22px;
|
|
color: #6b52ae;
|
|
font-weight: normal;
|
|
margin: 0 12px;
|
|
}
|
|
#navbar .logo {
|
|
max-height: 36px;
|
|
}
|
|
.inner-navbar {
|
|
justify-content: space-between;
|
|
padding: 0 25px;
|
|
margin: 0 auto;
|
|
max-width: 1280px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
#navbar .navbuttons {
|
|
flex: 1;
|
|
padding-top: 15px;
|
|
margin-left: 25px;
|
|
}
|
|
#navbar .navbuttons a {
|
|
margin-right: 20px;
|
|
}
|
|
.mobile-navbuttons a,
|
|
#navbar .navbuttons a {
|
|
color: #555;
|
|
text-transform: uppercase;
|
|
font-size: 17px;
|
|
}
|
|
.mobile-navbuttons a:hover,
|
|
#navbar .navbuttons a:hover {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mobile-navbuttons a.active,
|
|
.mobile-navbuttons a.active:hover,
|
|
#navbar .navbuttons a.active,
|
|
#navbar .navbuttons a.active:hover {
|
|
color: #6b52ae; /* purple */
|
|
}
|
|
|
|
.main-app {
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: white;
|
|
}
|
|
.project-title {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.metabuttons {
|
|
display: none;
|
|
}
|
|
li:hover .metabuttons {
|
|
display: block;
|
|
}
|
|
|
|
.page-body {
|
|
flex: 1;
|
|
margin: 25px auto;
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin-top: 85px;
|
|
}
|
|
.inner-page-body {
|
|
align-self: middle;
|
|
display: flex;
|
|
flex-direction: 'row';
|
|
margin-right: 25px;
|
|
margin-left: 25px;
|
|
}
|
|
.left-sidebar {
|
|
width: 260px;
|
|
margin-right: 25px;
|
|
}
|
|
.left-sidebar,
|
|
.left-sidebar .navmenu {
|
|
width: 260px;
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1px solid #bbb;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.inner-footer {
|
|
margin: 0 auto;
|
|
max-width: 1280px;
|
|
padding: 25px;
|
|
}
|
|
img.logo {
|
|
transition: transform 1s;
|
|
}
|
|
.project-title:hover img.logo {
|
|
transform: rotate(60deg);
|
|
}
|
|
#navbar a.project-title:hover {
|
|
text-decoration: none;
|
|
}
|
|
section.sitemap {
|
|
margin: 50px auto;
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: 'row';
|
|
justify-content: space-around;
|
|
color: #333;
|
|
}
|
|
section.sitemap a {
|
|
display: block;
|
|
color: inherit;
|
|
}
|
|
section.sitemap a:hover {
|
|
display: block;
|
|
color: #111;
|
|
}
|
|
section.sitemap>div {
|
|
|
|
}
|
|
.copyright {
|
|
text-align: center;
|
|
color: rgb(50,50,50);
|
|
}
|
|
.copyright a,
|
|
.copyright a:hover {
|
|
margin: 0 10px;
|
|
color: #555;
|
|
}
|
|
|
|
.navmenu li.pt-menu-header {
|
|
padding: 5px 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
}
|
|
.navmenu li.pt-menu-header,
|
|
.navmenu li.pt-menu-header > h6 {
|
|
color: #555;
|
|
}
|
|
.navmenu li.pt-menu-header:hover,
|
|
.navmenu li.pt-menu-header:hover > h6 {
|
|
color: black;
|
|
}
|
|
.navmenu a.active,
|
|
.navmenu li.pt-menu-header.active,
|
|
.navmenu li.pt-menu-header.active h6 {
|
|
color: #6b52ae;
|
|
}
|
|
.navmenu li.pt-menu-header::before {
|
|
margin-right: 8px;
|
|
}
|
|
.navmenu a.pt-menu-item.page {
|
|
color: #333;
|
|
}
|
|
.navmenu a.pt-menu-item.page:hover {
|
|
background: inherit;
|
|
color: black;
|
|
}
|
|
.navmenu a.pt-menu-item.page.active {
|
|
color: #6b52ae;
|
|
}
|
|
.navmenu .page {
|
|
padding-left: 30px;
|
|
}
|
|
.home-container {
|
|
|
|
}
|
|
.home-body {
|
|
position: absolute;
|
|
left: 0;right:0;top:0;bottom:0;
|
|
padding-top: 60px;
|
|
z-index: 5;
|
|
}
|
|
.hero {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
padding-bottom: 200px;
|
|
min-height: 100%;
|
|
z-index: 15;
|
|
}
|
|
.hero-screen {
|
|
background-color: rgba(255,255,255,0.6);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 4;
|
|
}
|
|
.section {
|
|
background-color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-bottom: 1px solid white;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
.section h1 {
|
|
text-align: center;
|
|
margin: 60px 15px 30px;
|
|
font-family: "Helvetica Neue";
|
|
font-weight: 200;
|
|
font-size: 64px;
|
|
line-height: 64px;
|
|
color: #6b52ae;
|
|
}
|
|
.section h3 {
|
|
margin: 10px auto 45px;
|
|
max-width: 800px;
|
|
font-family: "Helvetica Neue";
|
|
font-weight: 200;
|
|
font-size: 34px;
|
|
text-align: center;
|
|
line-height: 1.5em;
|
|
}
|
|
.section-inner {
|
|
max-width: 1180px;
|
|
padding: 20px;
|
|
margin: 0 auto;
|
|
}
|
|
.code-example {
|
|
margin-bottom: 65px;
|
|
}
|
|
.code-example .code-example-section {
|
|
display: flex;
|
|
}
|
|
.code-example.alt .code-example-section {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.code-example .code-section {
|
|
flex: 1;
|
|
}
|
|
.code-example .example-section {
|
|
margin: 0 25px;
|
|
}
|
|
|
|
.code-browser-bar a {
|
|
position: relative;
|
|
top: 4px;
|
|
background-color: #F7F7F7;
|
|
margin-left: 4px;
|
|
padding: 8px 12px 8px 12px;
|
|
}
|
|
|
|
.code-browser-bar a {
|
|
color: #666;
|
|
}
|
|
.code-browser-bar a:hover {
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
.code-browser-bar a.active,
|
|
.code-browser-bar a.active:hover {
|
|
color: #6b52ae;
|
|
}
|
|
.example-section {
|
|
margin: 40px 0;
|
|
}
|
|
.example-section .buttonbar {
|
|
text-align: center;
|
|
height: 28px;
|
|
display: none;
|
|
}
|
|
.example-section a {
|
|
padding: 8px 12px 8px 12px;
|
|
color: #666;
|
|
}
|
|
.example-section a:hover {
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
.example-section a.true,
|
|
.example-section a.true:hover {
|
|
color: #6b52ae;
|
|
}
|
|
|
|
.example-section .phone {
|
|
display: flex;
|
|
}
|
|
/*
|
|
* Add some margin between text and phone graphics (do this in docs,
|
|
* not on the home page).
|
|
* The + is the adjacent sibling selector.
|
|
*/
|
|
p + .example-section .phone {
|
|
margin-top: 20px;
|
|
}
|
|
.example-section .phone-example-spacer {
|
|
flex: 1;
|
|
min-width: 20px;
|
|
}
|
|
.iphone {
|
|
background-image: url('/assets/phone-iphone.png');
|
|
background-size: contain;
|
|
padding-top: 82px;
|
|
padding-left: 26px;
|
|
width: 315px;
|
|
height: 632px;
|
|
}
|
|
.iphone img {
|
|
height: 467px
|
|
}
|
|
|
|
.android {
|
|
background-image: url('/assets/phone-android.png');
|
|
background-size: contain;
|
|
padding-top: 65px;
|
|
padding-left: 18px;
|
|
width: 312px;
|
|
height: 629px;
|
|
}
|
|
.android img {
|
|
height: 488px;
|
|
}
|
|
|
|
.section code,
|
|
.section pre {
|
|
background: #F9F9F9;
|
|
padding: 3px;
|
|
font-size: 14px;
|
|
}
|
|
.hero-bg {
|
|
position: fixed;
|
|
background-size: cover;
|
|
background-image: url('/assets/soaring-bg.jpg');
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;right:0;top:0;bottom:0;
|
|
z-index: 2;
|
|
}
|
|
.hero .logo {
|
|
margin: 0 auto;
|
|
padding: 25px;
|
|
}
|
|
.hero img {
|
|
margin: 40px auto;
|
|
width: 100%;
|
|
height: 360px;
|
|
}
|
|
.hero h1,
|
|
.hero h3 {
|
|
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
|
color: rgba(40, 0, 45, 0.9);
|
|
font-weight: 300;
|
|
text-align: center;
|
|
margin: 40px;
|
|
}
|
|
.hero h1 {
|
|
font-size: 74px;
|
|
margin-top: 80px;
|
|
}
|
|
.hero h3 {
|
|
font-size: 46px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.mobile-navbuttons {
|
|
display: none;
|
|
}
|
|
.openMenuButton {
|
|
display: none;
|
|
}
|
|
|
|
.video {
|
|
margin: 80px auto;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
margin: 80px 0;
|
|
}
|
|
|
|
.search-wrapper {
|
|
padding-top: 10px;
|
|
margin-left: 25px;
|
|
}
|
|
|
|
input#doc-search {
|
|
font-family: inherit;
|
|
padding: 0 10px 0 10px;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
border-radius: 4px;
|
|
border: 1px #bfbfbf solid;
|
|
color: inherit;
|
|
outline: none;
|
|
width: 170px;
|
|
-moz-transition: 0.5s width ease;
|
|
-ms-transition: 0.5s width ease;
|
|
-o-transition: 0.5s width ease;
|
|
-webkit-transition: 0.5s width ease;
|
|
transition: 0.5s width ease;
|
|
}
|
|
|
|
input#doc-search:focus {
|
|
width: 200px;
|
|
}
|
|
|
|
/* Bottom border of each suggestion */
|
|
.algolia-docsearch-suggestion {
|
|
border-bottom-color: #6b52ae;
|
|
}
|
|
|
|
/* Main category headers */
|
|
.algolia-docsearch-suggestion--category-header span {
|
|
background-color: #fff;
|
|
color: #6b52ae;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
|
|
color: #6b52ae;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
|
|
color: #6b52ae;
|
|
box-shadow: inset 0 -2px 0 0 rgba(107, 82, 174, 0.56)
|
|
}
|
|
|
|
/* Highlighted search terms */
|
|
.algolia-docsearch-suggestion--highlight {
|
|
color: #6b52ae;
|
|
}
|
|
|
|
/* Currently selected suggestion */
|
|
.aa-cursor .algolia-docsearch-suggestion--content {
|
|
color: #6b52ae;
|
|
}
|
|
|
|
.aa-cursor .algolia-docsearch-suggestion {
|
|
background: #EBEBFB;
|
|
}
|
|
|
|
/* For bigger screens, when displaying results in two columns */
|
|
@media (min-width: 768px) {
|
|
/* Bottom border of each suggestion */
|
|
.algolia-docsearch-suggestion {
|
|
border-bottom-color: #7671df;
|
|
}
|
|
|
|
/* Left column, with secondary category header */
|
|
.algolia-docsearch-suggestion--subcategory-column {
|
|
border-right-color: #7671df;
|
|
color: #4E4726;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 960px) {
|
|
.search-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1100px) {
|
|
.home-container .example-section .buttonbar {
|
|
display: block;
|
|
}
|
|
|
|
.home-container .example-section .phone .false {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 720px) {
|
|
.video iframe {
|
|
width: 320px;
|
|
height: 188px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 799px) {
|
|
.home-container .code-example .code-example-section {
|
|
margin-top: 45px;
|
|
flex-direction: column;
|
|
}
|
|
.home-container .example-section {
|
|
margin-top: 35px;
|
|
}
|
|
.home-container .example-section .phone {
|
|
width: 315px;
|
|
margin: 0 auto;
|
|
}
|
|
.home-container .example-section .phone .phone-example-spacer {
|
|
display: none;
|
|
}
|
|
.hero h1,
|
|
.section h1 {
|
|
font-size: 48px;
|
|
}
|
|
.section h3 {
|
|
max-width: 500px;
|
|
font-size: 26px;
|
|
}
|
|
.hero {
|
|
padding-bottom: 50px;
|
|
}
|
|
.hero img {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.main-section .example-section .buttonbar {
|
|
display: block;
|
|
}
|
|
.main-section .example-section .phone-example-spacer,
|
|
.main-section .example-section .phone .false {
|
|
display: none;
|
|
}
|
|
.main-section .example-section .phone {
|
|
width: 315px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 649px) {
|
|
.openMenuButton {
|
|
display: block;
|
|
padding: 15px;
|
|
color: #555;
|
|
cursor: pointer;
|
|
margin-right: -15px;
|
|
}
|
|
.openMenuButton.active {
|
|
color: #6b52ae;
|
|
}
|
|
.main-app .left-sidebar {
|
|
display: none;
|
|
}
|
|
.main-app.mobileMenuActive .left-sidebar {
|
|
display: block;
|
|
}
|
|
.main-app.mobileMenuActive .main-section {
|
|
display: none;
|
|
}
|
|
|
|
.main-app.mobileMenuActive .left-sidebar {
|
|
background-color: none;
|
|
}
|
|
|
|
|
|
.page-body {
|
|
margin-top: 15px;
|
|
}
|
|
.navbuttons {
|
|
display: none;
|
|
}
|
|
.mobile-navbuttons {
|
|
background-color: #FCF7FF;
|
|
display: block;
|
|
margin-top: 60px;
|
|
display: flex;
|
|
border-bottom: 1px solid #917BC4;
|
|
flex-direction: row-reverse;
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
z-index: 15;
|
|
}
|
|
|
|
.mobile-navbuttons a {
|
|
display: block;
|
|
padding: 15px;
|
|
}
|
|
#navbar {
|
|
z-index: 20;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.inner-page-body {
|
|
flex-direction: column;
|
|
}
|
|
.left-sidebar,
|
|
.left-sidebar .navmenu {
|
|
width: 100%;
|
|
}
|
|
.left-sidebar {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|