Move yoga docs into docs folder on master branch
Summary: Move yoga docs into master branch so that pull requests are able to include doc updates as part of other changes. Reviewed By: JoelMarcey Differential Revision: D4365700 fbshipit-source-id: 2f46a88974104c454c00bcdf1257abb5c4075a68
This commit is contained in:
Emil Sjolander
committed by
Facebook Github Bot
Facebook Github Bot
parent
cd78291de5
commit
f2080e520f
521
docs/_sass/_base.scss
Normal file
521
docs/_sass/_base.scss
Normal file
@@ -0,0 +1,521 @@
|
||||
body {
|
||||
background: $secondary-bg;
|
||||
color: $text;
|
||||
font: normal #{$base-font-size}/#{$base-line-height} $base-font-family;
|
||||
height: 100vh;
|
||||
text-align: left;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
article {
|
||||
p {
|
||||
img {
|
||||
max-width: 100%;
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px dotted $primary-bg;
|
||||
color: $text;
|
||||
text-decoration: none;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 15px 30px 15px 15px;
|
||||
margin: 20px 0 0 10px;
|
||||
background-color: rgba(204, 122, 111, 0.1);
|
||||
border-left: 10px solid rgba(191, 87, 73, 0.2);
|
||||
}
|
||||
|
||||
#fb_oss a {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: $header-font-family;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.navPusher {
|
||||
border-top: $header-height + $header-ptop + $header-pbot solid $primary-bg;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.homeContainer {
|
||||
background: $primary-bg;
|
||||
color: $primary-overlay;
|
||||
|
||||
a {
|
||||
color: $primary-overlay;
|
||||
}
|
||||
|
||||
.homeSplashFade {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.homeWrapper {
|
||||
padding: 3em 10px;
|
||||
text-align: left;
|
||||
|
||||
.wrapper {
|
||||
margin: 0px auto;
|
||||
max-width: $content-width;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.projectLogo {
|
||||
img {
|
||||
height: 100px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
h1#project_title {
|
||||
font-family: $header-font-family;
|
||||
font-size: 300%;
|
||||
letter-spacing: -0.08em;
|
||||
line-height: 1em;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
h2#project_tagline {
|
||||
font-family: $header-font-family;
|
||||
font-size: 200%;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1em;
|
||||
color: $primary-overlay-special;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0px auto;
|
||||
max-width: $content-width;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.projectLogo {
|
||||
display: none;
|
||||
|
||||
img {
|
||||
height: 100px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
section#intro {
|
||||
margin: 40px 0;
|
||||
color: $primary-overlay-special;
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 24px;
|
||||
li {
|
||||
padding-bottom: 8px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.fbossFontLight {
|
||||
font-family: $base-font-family;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.fb-like {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
background: $secondary-bg;
|
||||
overflow: auto;
|
||||
|
||||
.mainWrapper {
|
||||
padding: 4vh 10px;
|
||||
text-align: left;
|
||||
|
||||
.allShareBlock {
|
||||
padding: 10px 0;
|
||||
|
||||
.pluginBlock {
|
||||
margin: 12px 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:not(.gist-meta) > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $primary-bg;
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 300%;
|
||||
line-height: 1em;
|
||||
padding: 1.4em 0 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 250%;
|
||||
line-height: 1em;
|
||||
margin-bottom: 20px;
|
||||
padding: 1.4em 0 20px;
|
||||
text-align: left;
|
||||
|
||||
& {
|
||||
border-bottom: 1px solid darken($primary-bg, 10%);
|
||||
color: darken($primary-bg, 10%);
|
||||
font-size: 22px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&.blockHeader {
|
||||
border-bottom: 1px solid white;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 150%;
|
||||
line-height: 1.2em;
|
||||
padding: 1em 0 0.8em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 130%;
|
||||
line-height: 1.2em;
|
||||
padding: 1em 0 0.8em;
|
||||
}
|
||||
|
||||
code {
|
||||
color: $primary-overlay-special;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0.8em 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 24px;
|
||||
li {
|
||||
padding-bottom: 4px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post {
|
||||
position: relative;
|
||||
|
||||
.katex {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.basicPost {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
:not(.gist-meta) > a {
|
||||
color: $primary-bg;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid $primary-bg;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid $primary-bg;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal outside none;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
padding: 1em 0;
|
||||
|
||||
h1 {
|
||||
font-size: 150%;
|
||||
line-height: 1em;
|
||||
padding: 0.4em 0 0;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
color: $primary-bg;
|
||||
font-family: $header-font-family;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.postSocialPlugins {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.docPagination {
|
||||
background: $primary-bg;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
||||
.pager {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.pagingNext {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
:not(.gist-meta) > a {
|
||||
border: none;
|
||||
color: $primary-overlay;
|
||||
display: block;
|
||||
padding: 4px 12px;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-bg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.pagerLabel {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pagerTitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.posts {
|
||||
.post {
|
||||
margin-bottom: 6vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#integrations_title {
|
||||
font-size: 250%;
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
.ytVideo {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: 53.4%; /* 16:9 */
|
||||
padding-top: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ytVideo iframe,
|
||||
.ytVideo object,
|
||||
.ytVideo embed {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 480px) {
|
||||
h1#project_title {
|
||||
font-size: 500%;
|
||||
}
|
||||
|
||||
h2#project_tagline {
|
||||
font-size: 250%;
|
||||
color: $primary-overlay-special;
|
||||
}
|
||||
|
||||
.projectLogo {
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.homeContainer .homeWrapper {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
.mainWrapper {
|
||||
.post {
|
||||
h2 {
|
||||
font-size: 180%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.docPagination {
|
||||
a {
|
||||
.pagerLabel {
|
||||
display: none;
|
||||
}
|
||||
.pagerTitle {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
.homeContainer {
|
||||
.homeWrapper {
|
||||
position: relative;
|
||||
|
||||
#inner {
|
||||
box-sizing: border-box;
|
||||
max-width: 600px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.projectLogo {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
left: 0;
|
||||
padding: 2em 20px 4em;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.mainContainer {
|
||||
.mainWrapper {
|
||||
.post {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
||||
.post-header {
|
||||
h1 {
|
||||
font-size: 250%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.posts {
|
||||
.post {
|
||||
margin-bottom: 4vh;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.homeContainer {
|
||||
.homeWrapper {
|
||||
#inner {
|
||||
max-width: 750px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1500px) {
|
||||
.homeContainer {
|
||||
.homeWrapper {
|
||||
#inner {
|
||||
max-width: 1100px;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
45
docs/_sass/_blog.scss
Normal file
45
docs/_sass/_blog.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
.blogContainer {
|
||||
.posts {
|
||||
margin-top: 60px;
|
||||
|
||||
.post {
|
||||
border: 1px solid $primary-bg;
|
||||
border-radius: 3px;
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.lonePost {
|
||||
margin-top: 60px;
|
||||
|
||||
.post {
|
||||
padding: 10px 0px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-header {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-authorName {
|
||||
color: rgba($text, 0.7);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.authorPhoto {
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
47
docs/_sass/_buttons.scss
Normal file
47
docs/_sass/_buttons.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.button {
|
||||
border: 1px solid $primary-bg;
|
||||
border-radius: 3px;
|
||||
color: $primary-bg;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2em;
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: $primary-bg;
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
|
||||
.homeContainer {
|
||||
.button {
|
||||
border-color: $homeContainer-button-color;
|
||||
border-width: 1px;
|
||||
color: $homeContainer-button-color;
|
||||
|
||||
&:hover {
|
||||
background: $homeContainer-button-color;
|
||||
color: $primary-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blockButton {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.edit-page-link {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.edit-page-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
82
docs/_sass/_footer.scss
Normal file
82
docs/_sass/_footer.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
.footerContainer {
|
||||
background: $secondary-bg;
|
||||
color: $primary-bg;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
text-align: left;
|
||||
|
||||
.footerWrapper {
|
||||
border-top: 1px solid $primary-bg;
|
||||
padding: 0;
|
||||
|
||||
.footerBlocks {
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 -20px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.footerSection {
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 25%;
|
||||
font-size: 14px;
|
||||
min-width: 275px;
|
||||
padding: 0px 20px;
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.fbOpenSourceFooter {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
max-width: 25%;
|
||||
|
||||
.facebookOSSLogoSvg {
|
||||
flex: 0 0 31px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
width: 31px;
|
||||
|
||||
path {
|
||||
fill: $primary-bg;
|
||||
}
|
||||
|
||||
.middleRing {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.innerRing {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
font-weight: 900;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
.footerSection {
|
||||
&.rightAlign {
|
||||
margin-left: auto;
|
||||
max-width: 25%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
128
docs/_sass/_gridBlock.scss
Normal file
128
docs/_sass/_gridBlock.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
.gridBlock {
|
||||
margin: -5px 0;
|
||||
padding: 10px;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.blockElement {
|
||||
padding: 5px 0;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-bottom: 1px solid rgba($primary-bg, 0.5);
|
||||
color: $primary-bg;
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gridClear {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.gridBlock.alternateColor {
|
||||
background-color: $alternate-bg;
|
||||
}
|
||||
|
||||
.gridBlock .alignCenter {
|
||||
text-align: center;
|
||||
}
|
||||
.gridBlock .alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
.gridBlock .imageAlignSide {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.blockImage {
|
||||
max-width: 150px;
|
||||
width: 50%;
|
||||
}
|
||||
.imageAlignTop .blockImage {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.imageAlignTop.alignCenter .blockImage {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.imageAlignSide .blockImage {
|
||||
flex: 0 1 100px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.imageAlignSide .blockContent {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.responsiveList .blockContent {
|
||||
position: relative;
|
||||
}
|
||||
.responsiveList .blockContent > div {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.responsiveList .blockContent::before {
|
||||
content: "\2022";
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.gridBlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.twoByGridBlock {
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 50%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.fourByGridBlock {
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 25%;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 + .gridBlock {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
.gridBlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.twoByGridBlock {
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 50%;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.fourByGridBlock {
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 25%;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
141
docs/_sass/_header.scss
Normal file
141
docs/_sass/_header.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
.fixedHeaderContainer {
|
||||
background: $primary-bg;
|
||||
color: $primary-overlay;
|
||||
height: $header-height;
|
||||
padding: $header-ptop 0 $header-pbot;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
color: $primary-overlay;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
font-family: $header-font-family;
|
||||
font-weight: 900;
|
||||
line-height: 18px;
|
||||
position: relative;
|
||||
font-size: 22px;
|
||||
color: #303846;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigationFull {
|
||||
height: 34px;
|
||||
margin-left: auto;
|
||||
|
||||
nav {
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
margin: 0 -10px;
|
||||
|
||||
li {
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $primary-overlay-special;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid $primary-overlay;
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
|
||||
&.navItemActive {
|
||||
a {
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 900px
|
||||
|
||||
|
||||
.fixedHeaderContainer {
|
||||
.navigationWrapper {
|
||||
nav {
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
top: -9px;
|
||||
|
||||
ul {
|
||||
margin: 0 -0.4em;
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
padding: 14px 0.4em;
|
||||
border: 0;
|
||||
color: $primary-overlay-special;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
|
||||
&.navItemActive {
|
||||
a {
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.navigationFull {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.navigationSlider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1200px
|
||||
|
||||
.fixedHeaderContainer {
|
||||
header {
|
||||
max-width: 1100px;
|
||||
}
|
||||
}
|
||||
|
||||
1500px
|
||||
.fixedHeaderContainer {
|
||||
header {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
68
docs/_sass/_poweredby.scss
Normal file
68
docs/_sass/_poweredby.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.poweredByContainer {
|
||||
background: $primary-bg;
|
||||
color: $primary-overlay;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
color: $primary-overlay;
|
||||
}
|
||||
|
||||
.poweredByWrapper {
|
||||
h2 {
|
||||
border-color: $primary-overlay-special;
|
||||
color: $primary-overlay-special;
|
||||
}
|
||||
}
|
||||
|
||||
.poweredByMessage {
|
||||
color: $primary-overlay-special;
|
||||
font-size: 14px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.poweredByItems {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.poweredByItem {
|
||||
box-sizing: border-box;
|
||||
flex: 1 0 50%;
|
||||
line-height: 1.1em;
|
||||
padding: 5px 10px;
|
||||
|
||||
&.itemLarge {
|
||||
flex-basis: 100%;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(4) {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 480px) {
|
||||
.itemLarge {
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.poweredByItem {
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
|
||||
&.itemLarge {
|
||||
padding-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
55
docs/_sass/_promo.scss
Normal file
55
docs/_sass/_promo.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
.promoSection {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
font-size: 125%;
|
||||
line-height: 1.6em;
|
||||
margin: -10px 0;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
|
||||
.promoRow {
|
||||
padding: 10px 0;
|
||||
|
||||
.pluginWrapper {
|
||||
display: block;
|
||||
|
||||
&.ghWatchWrapper, &.ghStarWrapper {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.pluginRowBlock {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 -2px;
|
||||
|
||||
.pluginWrapper {
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iframe.pluginIframe {
|
||||
height: 500px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.iframeContent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iframePreview {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.iframeContent {
|
||||
display: block;
|
||||
}
|
||||
.iframePreview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
323
docs/_sass/_react_docs_nav.scss
Normal file
323
docs/_sass/_react_docs_nav.scss
Normal file
@@ -0,0 +1,323 @@
|
||||
.docsNavContainer {
|
||||
background: $sidenav;
|
||||
height: 35px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.docMainWrapper {
|
||||
.wrapper {
|
||||
&.mainWrapper {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docsSliderActive {
|
||||
.docsNavContainer {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navBreadcrumb {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
font-size: 12px;
|
||||
height: 35px;
|
||||
overflow: hidden;
|
||||
padding: 5px 10px;
|
||||
|
||||
a, span {
|
||||
border: 0;
|
||||
color: $sidenav-text;
|
||||
}
|
||||
|
||||
i {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
nav.toc {
|
||||
position: relative;
|
||||
|
||||
section {
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
|
||||
.navGroups {
|
||||
display: none;
|
||||
padding: 40px 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggleNav {
|
||||
background: $sidenav;
|
||||
color: $sidenav-text;
|
||||
position: relative;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
|
||||
.navToggle {
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 18px;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
left: 8px;
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
border: 5px solid $sidenav-text;
|
||||
border-width: 5px 0;
|
||||
margin-top: -8px;
|
||||
transform: rotate(45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
i {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
background: transparent;
|
||||
border-width: 0 5px 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent $sidenav-text;
|
||||
height: 0;
|
||||
margin-top: -7px;
|
||||
opacity: 1;
|
||||
width: 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-width: 5px 5px 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navGroup {
|
||||
background: $sidenav-overlay;
|
||||
margin: 1px 0;
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
background: $sidenav-overlay;
|
||||
color: $sidenav-text;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
padding: 10px;
|
||||
transition: color 0.2s;
|
||||
|
||||
i:not(:empty) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: rgba($sidenav-text, 0.5);
|
||||
margin-right: 10px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.navGroupActive {
|
||||
background: $sidenav-active;
|
||||
color: $sidenav-text;
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
background: $sidenav-active;
|
||||
color: $primary-overlay;
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
padding-right: 24px;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
color: $sidenav-text;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 1.1em;
|
||||
margin: 2px 10px 5px;
|
||||
padding: 5px 0 2px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-bg;
|
||||
}
|
||||
|
||||
&.navItemActive {
|
||||
color: $primary-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggleNavActive {
|
||||
.navBreadcrumb {
|
||||
background: $sidenav;
|
||||
margin-bottom: 20px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
.navGroups {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navToggle {
|
||||
&::before, &::after {
|
||||
border-width: 6px 0;
|
||||
height: 0px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
i {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docsNavVisible {
|
||||
.navPusher {
|
||||
.mainContainer {
|
||||
padding-top: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
.navBreadcrumb {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
nav.toc {
|
||||
section {
|
||||
.navGroups {
|
||||
padding: 40px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.navToggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docsSliderActive {
|
||||
.mainContainer {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.docsNavVisible {
|
||||
.navPusher {
|
||||
.mainContainer {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docsNavContainer {
|
||||
background: none;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
margin: 40px 40px 0 0;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
nav.toc {
|
||||
section {
|
||||
.navGroups {
|
||||
display: block;
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggleNavActive {
|
||||
.navBreadcrumb {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docMainWrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.wrapper {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&.mainWrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navBreadcrumb {
|
||||
display: none;
|
||||
h2 {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
141
docs/_sass/_react_header_nav.scss
Normal file
141
docs/_sass/_react_header_nav.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
.navigationFull {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigationSlider {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
||||
.navSlideout {
|
||||
cursor: pointer;
|
||||
padding-top: 4px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
transition: top 0.3s;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.slidingNav {
|
||||
background: $secondary-bg;
|
||||
box-sizing: border-box;
|
||||
height: 0px;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
transition: height 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
width: 0;
|
||||
|
||||
ul {
|
||||
flex-flow: column nowrap;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
|
||||
a {
|
||||
color: $primary-bg;
|
||||
display: inline;
|
||||
margin: 3px 5px;
|
||||
padding: 2px 0px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-bottom: 2px solid $primary-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navSlideoutActive {
|
||||
.slidingNav {
|
||||
height: auto;
|
||||
padding-top: $header-height + $header-pbot;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.navSlideout {
|
||||
top: -2px;
|
||||
.menuExpand {
|
||||
span:nth-child(1) {
|
||||
background-color: $text;
|
||||
top: 16px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
span:nth-child(3) {
|
||||
background-color: $text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuExpand {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: 20px;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
background: $primary-overlay;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
flex: 0 0 4px;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: background-color 0.3s, top 0.3s, opacity 0.3s, transform 0.3s;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.navPusher {
|
||||
border-top: $header-height + $header-ptop + $header-pbot solid $primary-bg;
|
||||
position: relative;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
content: '';
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
|
||||
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
|
||||
}
|
||||
|
||||
.sliderActive &::after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.5s;
|
||||
transition: opacity 0.5s;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.navigationFull {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navigationSlider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
43
docs/_sass/_reset.scss
Normal file
43
docs/_sass/_reset.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
142
docs/_sass/_search.scss
Normal file
142
docs/_sass/_search.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
input[type="search"] {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.navSearchWrapper {
|
||||
align-self: center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 3px solid $primary-overlay-special;
|
||||
border-radius: 50%;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 6px;
|
||||
left: 15px;
|
||||
width: 6px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: $primary-overlay-special;
|
||||
content: " ";
|
||||
height: 7px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
top: 12px;
|
||||
width: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aa-dropdown-menu {
|
||||
background: $secondary-bg;
|
||||
border: 3px solid rgba($text, 0.25);
|
||||
color: $text;
|
||||
font-size: 14px;
|
||||
left: auto !important;
|
||||
line-height: 1.2em;
|
||||
right: 0 !important;
|
||||
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
background: $primary-overlay-special;
|
||||
color: $primary-bg;
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
background-color: $primary-bg;
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight,
|
||||
.algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
|
||||
color: $primary-bg;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion__secondary,
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
border-color: rgba($text, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input#search_input {
|
||||
padding-left: 25px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba($primary-overlay-special, 0.25);
|
||||
border: none;
|
||||
color: rgba($primary-overlay-special, 0);
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: background-color .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), width .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color .2s ease;
|
||||
width: 60px;
|
||||
|
||||
&:focus, &:active {
|
||||
background-color: $secondary-bg;
|
||||
color: $text;
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigationSlider {
|
||||
.navSearchWrapper {
|
||||
&::before {
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 15px;
|
||||
top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
input#search_input_react {
|
||||
box-sizing: border-box;
|
||||
padding-left: 25px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba($primary-overlay-special, 0.25);
|
||||
border: none;
|
||||
color: $text;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: background-color .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), width .2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color .2s ease;
|
||||
width: 100%;
|
||||
|
||||
&:focus, &:active {
|
||||
background-color: $primary-bg;
|
||||
color: $primary-overlay;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-inline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aa-dropdown-menu {
|
||||
background: $secondary-bg;
|
||||
border: 0px solid $secondary-bg;
|
||||
color: $text;
|
||||
font-size: 12px;
|
||||
line-height: 2em;
|
||||
max-height: 140px;
|
||||
min-width: auto;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
position: relative !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
48
docs/_sass/_slideshow.scss
Normal file
48
docs/_sass/_slideshow.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.slideshow {
|
||||
position: relative;
|
||||
|
||||
.slide {
|
||||
display: none;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&.slideActive {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: block;
|
||||
margin: -10px;
|
||||
padding: 1em 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.pager {
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
margin: 10px;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
width: 12px;
|
||||
|
||||
&.pagerActive {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-width: 4px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
docs/_sass/_syntax-highlighting.scss
Normal file
129
docs/_sass/_syntax-highlighting.scss
Normal file
@@ -0,0 +1,129 @@
|
||||
|
||||
|
||||
.rougeHighlight { background-color: $code-bg; color: #93a1a1 }
|
||||
.rougeHighlight .c { color: #586e75 } /* Comment */
|
||||
.rougeHighlight .err { color: #93a1a1 } /* Error */
|
||||
.rougeHighlight .g { color: #93a1a1 } /* Generic */
|
||||
.rougeHighlight .k { color: #859900 } /* Keyword */
|
||||
.rougeHighlight .l { color: #93a1a1 } /* Literal */
|
||||
.rougeHighlight .n { color: #93a1a1 } /* Name */
|
||||
.rougeHighlight .o { color: #859900 } /* Operator */
|
||||
.rougeHighlight .x { color: #cb4b16 } /* Other */
|
||||
.rougeHighlight .p { color: #93a1a1 } /* Punctuation */
|
||||
.rougeHighlight .cm { color: #586e75 } /* Comment.Multiline */
|
||||
.rougeHighlight .cp { color: #859900 } /* Comment.Preproc */
|
||||
.rougeHighlight .c1 { color: #72c02c; } /* Comment.Single */
|
||||
.rougeHighlight .cs { color: #859900 } /* Comment.Special */
|
||||
.rougeHighlight .gd { color: #2aa198 } /* Generic.Deleted */
|
||||
.rougeHighlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
|
||||
.rougeHighlight .gr { color: #dc322f } /* Generic.Error */
|
||||
.rougeHighlight .gh { color: #cb4b16 } /* Generic.Heading */
|
||||
.rougeHighlight .gi { color: #859900 } /* Generic.Inserted */
|
||||
.rougeHighlight .go { color: #93a1a1 } /* Generic.Output */
|
||||
.rougeHighlight .gp { color: #93a1a1 } /* Generic.Prompt */
|
||||
.rougeHighlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
|
||||
.rougeHighlight .gu { color: #cb4b16 } /* Generic.Subheading */
|
||||
.rougeHighlight .gt { color: #93a1a1 } /* Generic.Traceback */
|
||||
.rougeHighlight .kc { color: #cb4b16 } /* Keyword.Constant */
|
||||
.rougeHighlight .kd { color: #268bd2 } /* Keyword.Declaration */
|
||||
.rougeHighlight .kn { color: #859900 } /* Keyword.Namespace */
|
||||
.rougeHighlight .kp { color: #859900 } /* Keyword.Pseudo */
|
||||
.rougeHighlight .kr { color: #268bd2 } /* Keyword.Reserved */
|
||||
.rougeHighlight .kt { color: #dc322f } /* Keyword.Type */
|
||||
.rougeHighlight .ld { color: #93a1a1 } /* Literal.Date */
|
||||
.rougeHighlight .m { color: #2aa198 } /* Literal.Number */
|
||||
.rougeHighlight .s { color: #2aa198 } /* Literal.String */
|
||||
.rougeHighlight .na { color: #93a1a1 } /* Name.Attribute */
|
||||
.rougeHighlight .nb { color: #B58900 } /* Name.Builtin */
|
||||
.rougeHighlight .nc { color: #268bd2 } /* Name.Class */
|
||||
.rougeHighlight .no { color: #cb4b16 } /* Name.Constant */
|
||||
.rougeHighlight .nd { color: #268bd2 } /* Name.Decorator */
|
||||
.rougeHighlight .ni { color: #cb4b16 } /* Name.Entity */
|
||||
.rougeHighlight .ne { color: #cb4b16 } /* Name.Exception */
|
||||
.rougeHighlight .nf { color: #268bd2 } /* Name.Function */
|
||||
.rougeHighlight .nl { color: #93a1a1 } /* Name.Label */
|
||||
.rougeHighlight .nn { color: #93a1a1 } /* Name.Namespace */
|
||||
.rougeHighlight .nx { color: #93a1a1 } /* Name.Other */
|
||||
.rougeHighlight .py { color: #93a1a1 } /* Name.Property */
|
||||
.rougeHighlight .nt { color: #268bd2 } /* Name.Tag */
|
||||
.rougeHighlight .nv { color: #268bd2 } /* Name.Variable */
|
||||
.rougeHighlight .ow { color: #859900 } /* Operator.Word */
|
||||
.rougeHighlight .w { color: #93a1a1 } /* Text.Whitespace */
|
||||
.rougeHighlight .mf { color: #2aa198 } /* Literal.Number.Float */
|
||||
.rougeHighlight .mh { color: #2aa198 } /* Literal.Number.Hex */
|
||||
.rougeHighlight .mi { color: #2aa198 } /* Literal.Number.Integer */
|
||||
.rougeHighlight .mo { color: #2aa198 } /* Literal.Number.Oct */
|
||||
.rougeHighlight .sb { color: #586e75 } /* Literal.String.Backtick */
|
||||
.rougeHighlight .sc { color: #2aa198 } /* Literal.String.Char */
|
||||
.rougeHighlight .sd { color: #93a1a1 } /* Literal.String.Doc */
|
||||
.rougeHighlight .s2 { color: #2aa198 } /* Literal.String.Double */
|
||||
.rougeHighlight .se { color: #cb4b16 } /* Literal.String.Escape */
|
||||
.rougeHighlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */
|
||||
.rougeHighlight .si { color: #2aa198 } /* Literal.String.Interpol */
|
||||
.rougeHighlight .sx { color: #2aa198 } /* Literal.String.Other */
|
||||
.rougeHighlight .sr { color: #dc322f } /* Literal.String.Regex */
|
||||
.rougeHighlight .s1 { color: #2aa198 } /* Literal.String.Single */
|
||||
.rougeHighlight .ss { color: #2aa198 } /* Literal.String.Symbol */
|
||||
.rougeHighlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
|
||||
.rougeHighlight .vc { color: #268bd2 } /* Name.Variable.Class */
|
||||
.rougeHighlight .vg { color: #268bd2 } /* Name.Variable.Global */
|
||||
.rougeHighlight .vi { color: #268bd2 } /* Name.Variable.Instance */
|
||||
.rougeHighlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
|
||||
|
||||
.highlighter-rouge {
|
||||
color: darken(#72c02c, 8%);
|
||||
font: 800 12px/1.5em Hack, monospace;
|
||||
max-width: 100%;
|
||||
|
||||
.rougeHighlight {
|
||||
border-radius: 3px;
|
||||
margin: 20px 0;
|
||||
padding: 0px;
|
||||
overflow-x: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
table {
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
td {
|
||||
display: block;
|
||||
flex: 1 1;
|
||||
|
||||
&.gutter {
|
||||
border-right: 1px solid lighten($code-bg, 10%);
|
||||
color: lighten($code-bg, 15%);
|
||||
margin-right: 10px;
|
||||
max-width: 40px;
|
||||
padding-right: 10px;
|
||||
|
||||
pre {
|
||||
max-width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p > .highlighter-rouge,
|
||||
li > .highlighter-rouge,
|
||||
a > .highlighter-rouge {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.highlighter-rouge {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
47
docs/_sass/_tables.scss
Normal file
47
docs/_sass/_tables.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
table {
|
||||
background: $lightergrey;
|
||||
border: 1px solid $lightgrey;
|
||||
border-collapse: collapse;
|
||||
display:table;
|
||||
margin: 20px 0;
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid $lightgrey;
|
||||
display: table-header-group;
|
||||
}
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
tr {
|
||||
display: table-row;
|
||||
&:nth-of-type(odd) {
|
||||
background: $greyish;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border-right: 1px dotted $lightgrey;
|
||||
display: table-cell;
|
||||
font-size: 14px;
|
||||
line-height: 1.3em;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
|
||||
&:last-of-type {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
color: $green;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-family: $header-font-family;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
98
docs/_sass/_yoga.scss
Normal file
98
docs/_sass/_yoga.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
.yoga {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border: 0 solid black;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.yoga span {
|
||||
display: flex;
|
||||
color: white;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.yoga.sample {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
margin: 50px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gist {
|
||||
width: 600px;
|
||||
margin: 50px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gist .gist-meta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gist .gist-data {
|
||||
border-bottom-width: 0px !important;
|
||||
}
|
||||
|
||||
.gist .gist-file {
|
||||
border-color: #ccc !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.blockContent {
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.layoutsample {
|
||||
align-items: flex-end;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.gistsample {
|
||||
align-items: flex-start;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.imageAlignSide .blockContent {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1320px) {
|
||||
.imageAlignSide .blockContent {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layoutsample {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.gistsample {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.gridBlock .imageAlignSide {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user