mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
fe617082d9
Algolia adds two inline styles ```css position: relative; vertical-align: top; ``` to the element once the script inserted at the end of the page runs which super slightly moves the header. The fix is to always apply those two rules this way it doesn't jump. I did not notice it on my machine because it doesn't move when custom fonts are not being used. Test Plan: - Open two tabs: reactjs.com and localhost:4000/react - Click around on reactjs.com to prime the cache with the fonts - Switch tabs and click around on localhost (but do not force refresh!) - Now you get custom fonts loaded locally and it doesn't jump when you change tabs
928 lines
14 KiB
SCSS
928 lines
14 KiB
SCSS
---
|
|
---
|
|
@import 'bourbon/bourbon';
|
|
@import '_variables';
|
|
@import '_typography';
|
|
@import '_solarized';
|
|
|
|
@mixin code-typography {
|
|
font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
$skinnyContentWidth: 650px;
|
|
$contentWidth: 920px;
|
|
$contentPadding: 20px;
|
|
$columnWidth: 280px;
|
|
$columnGutter: 40px;
|
|
$twoColumnWidth: 2 * $columnWidth + $columnGutter;
|
|
$navHeight: 50px;
|
|
|
|
|
|
|
|
// basic reset
|
|
* {
|
|
@include box-sizing(border-box);
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
background: $pageBg;
|
|
}
|
|
|
|
|
|
|
|
.left {
|
|
float: left;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
}
|
|
|
|
|
|
.container {
|
|
padding-top: $navHeight;
|
|
min-width: $contentWidth + (2 * $contentPadding);
|
|
}
|
|
|
|
.wrap {
|
|
width: $contentWidth + (2 * $contentPadding);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.skinnyWrap {
|
|
width: $skinnyContentWidth + (2 * $contentPadding);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
hr {
|
|
height: 0;
|
|
border-top: 1px solid #ccc;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
li + li {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
// Make header navigation linkable and on the screen. Used in documentation and
|
|
// blog posts.
|
|
h1, h2, h3, h4, h5, h6 {
|
|
.anchor {
|
|
margin-top: -$navHeight;
|
|
position: absolute;
|
|
}
|
|
|
|
&:hover .hash-link {
|
|
display: inline;
|
|
}
|
|
}
|
|
.hash-link {
|
|
color: $mediumTextColor;
|
|
display: none;
|
|
}
|
|
|
|
// Main Nav
|
|
|
|
.nav-main {
|
|
@include clearfix;
|
|
background: $darkestColor;
|
|
color: $lightTextColor;
|
|
position: fixed;
|
|
top: 0;
|
|
height: $navHeight;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
|
|
width: 100%;
|
|
z-index: 100;
|
|
|
|
a {
|
|
color: $lightColor;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-site-internal {
|
|
margin: 0 0 0 20px;
|
|
}
|
|
|
|
.nav-site-external {
|
|
float: right;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-site {
|
|
li {
|
|
margin: 0;
|
|
}
|
|
|
|
li > a {
|
|
box-sizing: content-box;
|
|
padding: 0 10px;
|
|
line-height: $navHeight;
|
|
display: inline-block;
|
|
height: $navHeight;
|
|
color: #ddd;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
&.active {
|
|
color: $lightTextColor;
|
|
border-bottom: 3px solid $primary;
|
|
background: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-home {
|
|
color: #00d8ff;
|
|
font-size: 24px;
|
|
line-height: $navHeight;
|
|
height: $navHeight;
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav-logo {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
|
|
ul {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
li {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
// Hero!
|
|
|
|
.hero {
|
|
height: 300px;
|
|
// background: $darkColor url(../img/header.png) no-repeat center;
|
|
background: $darkColor;
|
|
padding-top: 50px;
|
|
color: $lightColor;
|
|
font-weight: 300;
|
|
|
|
.text {
|
|
font-size: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.minitext {
|
|
font-size: 16px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
strong {
|
|
color: $blueColor;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.buttons-unit {
|
|
margin-top: 60px;
|
|
text-align: center;
|
|
|
|
a {
|
|
color: $blueColor;
|
|
}
|
|
|
|
.button {
|
|
font-size: 24px;
|
|
background: $primary;
|
|
color: $lightTextColor;
|
|
|
|
&:active {
|
|
background: darken($primary, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Downloads
|
|
|
|
.buttons-unit.downloads {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
// Docs Nav
|
|
|
|
.nav-docs {
|
|
color: $darkColor;
|
|
font-size: 14px;
|
|
// position: fixed;
|
|
float: left;
|
|
width: 210px;
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
ul ul {
|
|
margin: 6px 0 0 20px;
|
|
}
|
|
li {
|
|
line-height: 16px;
|
|
margin: 0 0 6px;
|
|
}
|
|
h3 {
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
}
|
|
a {
|
|
color: $mediumestColor;
|
|
display: block;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: $primary;
|
|
}
|
|
|
|
&.active {
|
|
color: $primary;
|
|
}
|
|
|
|
&.external {
|
|
&:after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
padding-left: 5px;
|
|
@include retina-image('../img/external', 10px 10px);
|
|
background-position: 100% 0;
|
|
background-repeat: no-repeat;
|
|
font-size: 10px;
|
|
line-height: 1em;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-docs-section {
|
|
border-bottom: 1px solid #ccc;
|
|
border-top: 1px solid #eee;
|
|
padding: 12px 0;
|
|
|
|
&:first-child {
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.nav-blog {
|
|
li {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
// Home Page specifics
|
|
|
|
.home-section {
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.home-divider {
|
|
border-top-color: #bbb;
|
|
margin: 0 auto;
|
|
width: 400px;
|
|
}
|
|
|
|
.skinny-row {
|
|
@include clearfix;
|
|
}
|
|
|
|
.skinny-col {
|
|
float: left;
|
|
margin-left: $columnGutter;
|
|
width: ($skinnyContentWidth - $columnGutter) / 2;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.marketing-row {
|
|
@include clearfix;
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.marketing-col {
|
|
float: left;
|
|
margin-left: 40px;
|
|
width: $columnWidth;
|
|
|
|
h3 {
|
|
color: $darkColor;
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
p {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.marketing-col:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
#examples h3, .home-presentation h3 {
|
|
color: $darkColor;
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#examples {
|
|
p {
|
|
margin: 0 0 25px 0;
|
|
max-width: $twoColumnWidth;
|
|
}
|
|
|
|
.example {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
#todoExample {
|
|
font-size: 14px;
|
|
ul {
|
|
list-style-type: square;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
input {
|
|
border: 1px solid #ccc;
|
|
font: 14px proxima-nova, $helvetica;
|
|
padding: 3px;
|
|
width: 150px;
|
|
}
|
|
button {
|
|
font: 14px proxima-nova, $helvetica;
|
|
margin-left: 5px;
|
|
padding: 4px 10px;
|
|
}
|
|
}
|
|
|
|
#markdownExample {
|
|
textarea {
|
|
border: 1px solid #ccc;
|
|
font: 14px proxima-nova, $helvetica;
|
|
margin-bottom: 10px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-bottom-section {
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.docs-nextprev {
|
|
@include clearfix;
|
|
}
|
|
|
|
/* JSX Compiler */
|
|
|
|
.jsxCompiler {
|
|
margin: 0 auto;
|
|
padding-top: 20px;
|
|
width: 1220px;
|
|
|
|
label.compiler-option {
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#jsxCompiler {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.playgroundPreview {
|
|
padding: 0;
|
|
width: 600px;
|
|
word-wrap: break-word;
|
|
|
|
pre {
|
|
@include code-typography;
|
|
}
|
|
}
|
|
|
|
.playgroundError {
|
|
// The compiler view kills padding in order to render the CodeMirror code
|
|
// more nicely. For the error view, put a padding back
|
|
padding: 15px 20px;
|
|
}
|
|
}
|
|
|
|
.docs-prev {
|
|
float: left;
|
|
}
|
|
|
|
.docs-next {
|
|
float: right;
|
|
}
|
|
|
|
footer {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-top: 36px;
|
|
margin-bottom: 18px;
|
|
overflow: auto;
|
|
}
|
|
|
|
section.black content {
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
/**
|
|
* Blog
|
|
*/
|
|
|
|
.blogContent {
|
|
@include clearfix;
|
|
|
|
padding-top: 20px;
|
|
|
|
blockquote {
|
|
padding: 5px 15px;
|
|
margin: 20px 0;
|
|
background-color: #f8f5ec;
|
|
border-left: 5px solid #f7ebc6;
|
|
}
|
|
|
|
h2 > code {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
color: #555;
|
|
background-color: rgba(0,0,0,0.04);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Docs
|
|
*/
|
|
|
|
.documentationContent {
|
|
@include clearfix;
|
|
|
|
.subHeader {
|
|
font-size: 24px;
|
|
}
|
|
|
|
|
|
// H2s form documentation topic dividers. Extra space helps.
|
|
h2 {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
padding-top: 20px;
|
|
|
|
// Make a notice box out of blockquotes in the documentation:
|
|
blockquote {
|
|
padding: 15px 30px 15px 15px;
|
|
margin: 20px 0;
|
|
background-color: rgba(204, 122, 111, 0.09999999999999998);
|
|
border-left: 5px solid rgba(191, 87, 73, 0.19999999999999996);
|
|
h4 {
|
|
margin-top: 0;
|
|
}
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
// Treat first child as the title - promote to H4.
|
|
p:first-child {
|
|
font-weight: bold;
|
|
font-size: 17.5px;
|
|
line-height: 20px;
|
|
margin-top: 0;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
}
|
|
}
|
|
|
|
.docs-prevnext {
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
/* Button */
|
|
|
|
.button {
|
|
@include background(linear-gradient($buttonGreyTop, $buttonGreyBottom));
|
|
// border: 1px solid $darkestColor;
|
|
border-radius: 4px;
|
|
padding: 8px 16px;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
margin: 0 12px;
|
|
// word-spacing: -2px;
|
|
// letter-spacing: 1px;
|
|
display: inline-block;
|
|
color: $lightTextColor;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
.button {
|
|
box-shadow: 1px 3px 3px rgba(0, 0, 0, .3);
|
|
}
|
|
}
|
|
|
|
.button.blue {
|
|
@include background(linear-gradient($buttonBlueTop, $buttonBlueBottom));
|
|
}
|
|
|
|
|
|
/* Row */
|
|
|
|
.row {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.row .span4 {
|
|
width: 33.33%;
|
|
display: table-cell;
|
|
}
|
|
|
|
.row .span8 {
|
|
width: 66.66%;
|
|
display: table-cell;
|
|
}
|
|
|
|
.row .span6 {
|
|
width: 50%;
|
|
display: table-cell;
|
|
}
|
|
|
|
|
|
/* Content */
|
|
|
|
p {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.highlight {
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
figure {
|
|
text-align: center;
|
|
}
|
|
|
|
.inner-content {
|
|
float: right;
|
|
width: $skinnyContentWidth;
|
|
}
|
|
|
|
.nosidebar .inner-content {
|
|
float: none;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
// Contains .edit-page-link
|
|
@include clearfix;
|
|
}
|
|
|
|
.edit-page-link {
|
|
float: right;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: 20px;
|
|
margin-top: 17px;
|
|
}
|
|
|
|
/* Blog */
|
|
|
|
.post-list-item + .post-list-item {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
/* CodeMirror */
|
|
|
|
div.CodeMirror pre, div.CodeMirror-linenumber, code {
|
|
@include code-typography;
|
|
}
|
|
|
|
div.CodeMirror-linenumber {
|
|
text-align: right;
|
|
}
|
|
|
|
.CodeMirror, div.CodeMirror-gutters, div.highlight {
|
|
border: none;
|
|
}
|
|
|
|
/* hide the cursor. Mostly used when code's in plain JS */
|
|
.CodeMirror-readonly div.CodeMirror-cursor {
|
|
visibility: hidden;
|
|
}
|
|
|
|
small code,
|
|
li code,
|
|
p code {
|
|
color: #555;
|
|
background-color: rgba(0, 0, 0, .04);
|
|
padding: 1px 3px;
|
|
}
|
|
|
|
small a code,
|
|
li a code,
|
|
p a code {
|
|
color: inherit;
|
|
}
|
|
|
|
.cm-s-default span.cm-string-2 {
|
|
color: inherit;
|
|
}
|
|
|
|
.playground {
|
|
@include clearfix;
|
|
}
|
|
|
|
.playground-tab {
|
|
border-bottom: none !important;
|
|
border-radius: 3px 3px 0 0;
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #c2c0bc;
|
|
background-color: #f1ede4;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playgroundCode,
|
|
.playground-tab,
|
|
.playgroundPreview {
|
|
border: 1px solid rgba(16,16,16,0.1);
|
|
}
|
|
|
|
.playground-tab-active {
|
|
color: $darkestColor;
|
|
}
|
|
|
|
.playgroundCode {
|
|
border-radius: 0 3px 3px 3px;
|
|
float: left;
|
|
overflow: hidden;
|
|
width: $twoColumnWidth;
|
|
}
|
|
|
|
.playgroundPreview {
|
|
background-color: white;
|
|
border-radius: 3px;
|
|
float: right;
|
|
padding: 15px 20px;
|
|
width: $columnWidth;
|
|
}
|
|
|
|
.playgroundError {
|
|
color: darken($primary, 5%);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.MarkdownEditor textarea {
|
|
width: 100%;
|
|
height: 100px
|
|
}
|
|
|
|
.MarkdownEditor .content {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.hll {
|
|
background-color: #f7ebc6;
|
|
border-left: 5px solid #f7d87c;
|
|
display: block;
|
|
margin-left: -14px;
|
|
margin-right: -14px;
|
|
padding-left: 9px;
|
|
}
|
|
|
|
/* CodeMirror doesn't support <jsx> syntax. Instead of highlighting it
|
|
as error, just ignore it */
|
|
.highlight .javascript .err {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
.highlight {
|
|
position: relative;
|
|
margin-bottom: 14px;
|
|
padding: 30px 14px 14px;
|
|
border: none;
|
|
border-radius: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
.highlight pre {
|
|
padding: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
background-color: transparent;
|
|
border: 0;
|
|
float: left;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.highlight pre code {
|
|
/* Respect line-height defined in <code> styles above */
|
|
display: block;
|
|
|
|
/* Cancel out styles for `li code` in case we have a <pre> within an <li>. */
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.highlight pre .lineno {
|
|
display: inline-block;
|
|
width: 22px;
|
|
padding-right: 5px;
|
|
margin-right: 10px;
|
|
color: #bebec5;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Echo out a label for the example */
|
|
|
|
.highlight:after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
padding: 3px 7px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #c2c0bc;
|
|
background-color: #f1ede4;
|
|
content: "Code";
|
|
}
|
|
|
|
.downloadCenter {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.downloadSection:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 960px) {
|
|
.nav-main {
|
|
position: static;
|
|
}
|
|
.container {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.post {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.post img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.pagination {
|
|
margin-bottom: 30px;
|
|
|
|
/* Trick to get the wrapper to expand to fit floating elements */
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
.next {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
// Twitter embeds. Need to !important because they inline margin on the iframe.
|
|
div[data-twttr-id] iframe {
|
|
margin: 10px auto !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Acknowledgements */
|
|
|
|
.three-column {
|
|
@include clearfix;
|
|
}
|
|
|
|
.three-column > ul {
|
|
float: left;
|
|
margin-left: 30px;
|
|
width: 190px;
|
|
}
|
|
|
|
.three-column > ul:first-child {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
|
|
/* Algolia Doc Search */
|
|
|
|
@media screen and (max-width: 960px) {
|
|
#algolia-doc-search {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
input#algolia-doc-search {
|
|
background: transparent url('/react/img/search.png') no-repeat 10px center;
|
|
background-size: 16px 16px;
|
|
|
|
position: relative;
|
|
vertical-align: top;
|
|
margin-left: 10px;
|
|
padding: 0 10px;
|
|
padding-left: 35px;
|
|
height: 30px;
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
background-color: #333;
|
|
border-radius: 4px;
|
|
color: white;
|
|
outline: none;
|
|
width: 170px;
|
|
|
|
transition: width .2s ease;
|
|
}
|
|
|
|
input#algolia-doc-search:focus {
|
|
width: 240px;
|
|
}
|
|
|
|
.algolia-autocomplete .aa-dropdown-menu {
|
|
margin-left: -110px;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.algolia-autocomplete {
|
|
vertical-align: top;
|
|
height: 53px;
|
|
}
|
|
|
|
.algolia-docsearch-suggestion {
|
|
border-bottom-color: #c05b4d;
|
|
}
|
|
|
|
.algolia-docsearch-suggestion--category-header {
|
|
background-color: #cc7a6f;
|
|
}
|
|
|
|
.algolia-docsearch-suggestion--highlight {
|
|
color: #c05b4d;
|
|
}
|
|
|
|
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
|
|
background-color: #c05b4d;
|
|
}
|
|
|
|
.aa-cursor .algolia-docsearch-suggestion--content {
|
|
color: #c05b4d;
|
|
}
|
|
|
|
.aa-cursor .algolia-docsearch-suggestion {
|
|
background: #f1f3f5;
|
|
}
|