shipit
Reviewed By: danielbuechele Differential Revision: D7010371 fbshipit-source-id: 9a111010755ee134bded7500c461342b944b4d62
This commit is contained in:
Emil Sjölander
committed by
Facebook Github Bot
Facebook Github Bot
parent
82aaebfea2
commit
bdc37b0797
6
docs/.gitignore
vendored
6
docs/.gitignore
vendored
@@ -1,6 +0,0 @@
|
||||
_site/
|
||||
.sass-cache/
|
||||
.DS_STORE
|
||||
*.swo
|
||||
*.swp
|
||||
*.psd
|
||||
9
docs/404.html
Normal file
9
docs/404.html
Normal file
File diff suppressed because one or more lines are too long
9
docs/404/index.html
Normal file
9
docs/404/index.html
Normal file
File diff suppressed because one or more lines are too long
1
docs/CNAME
Normal file
1
docs/CNAME
Normal file
@@ -0,0 +1 @@
|
||||
yogalayout.com
|
||||
@@ -1,2 +0,0 @@
|
||||
source 'https://rubygems.org'
|
||||
gem 'github-pages', '~> 104'
|
||||
@@ -1,142 +0,0 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (4.2.7)
|
||||
i18n (~> 0.7)
|
||||
json (~> 1.7, >= 1.7.7)
|
||||
minitest (~> 5.1)
|
||||
thread_safe (~> 0.3, >= 0.3.4)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.4.0)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.12.2)
|
||||
colorator (1.1.0)
|
||||
ethon (0.10.1)
|
||||
ffi (>= 1.3.0)
|
||||
execjs (2.7.0)
|
||||
faraday (0.12.0.1)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.9.18)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (2.1.0)
|
||||
github-pages (104)
|
||||
activesupport (= 4.2.7)
|
||||
github-pages-health-check (= 1.2.0)
|
||||
jekyll (= 3.3.0)
|
||||
jekyll-avatar (= 0.4.2)
|
||||
jekyll-coffeescript (= 1.0.1)
|
||||
jekyll-feed (= 0.8.0)
|
||||
jekyll-gist (= 1.4.0)
|
||||
jekyll-github-metadata (= 2.2.0)
|
||||
jekyll-mentions (= 1.2.0)
|
||||
jekyll-paginate (= 1.1.0)
|
||||
jekyll-redirect-from (= 0.11.0)
|
||||
jekyll-sass-converter (= 1.3.0)
|
||||
jekyll-seo-tag (= 2.1.0)
|
||||
jekyll-sitemap (= 0.12.0)
|
||||
jekyll-swiss (= 0.4.0)
|
||||
jemoji (= 0.7.0)
|
||||
kramdown (= 1.11.1)
|
||||
liquid (= 3.0.6)
|
||||
listen (= 3.0.6)
|
||||
mercenary (~> 0.3)
|
||||
minima (= 2.0.0)
|
||||
rouge (= 1.11.1)
|
||||
terminal-table (~> 1.4)
|
||||
github-pages-health-check (1.2.0)
|
||||
addressable (~> 2.3)
|
||||
net-dns (~> 0.8)
|
||||
octokit (~> 4.0)
|
||||
public_suffix (~> 1.4)
|
||||
typhoeus (~> 0.7)
|
||||
html-pipeline (2.5.0)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
i18n (0.8.1)
|
||||
jekyll (3.3.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 3.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 1.7)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-avatar (0.4.2)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-coffeescript (1.0.1)
|
||||
coffee-script (~> 2.2)
|
||||
jekyll-feed (0.8.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-gist (1.4.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-github-metadata (2.2.0)
|
||||
jekyll (~> 3.1)
|
||||
octokit (~> 4.0, != 4.4.0)
|
||||
jekyll-mentions (1.2.0)
|
||||
activesupport (~> 4.0)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-redirect-from (0.11.0)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.3.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-seo-tag (2.1.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-sitemap (0.12.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-swiss (0.4.0)
|
||||
jekyll-watch (1.5.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
jemoji (0.7.0)
|
||||
activesupport (~> 4.0)
|
||||
gemoji (~> 2.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (>= 3.0)
|
||||
json (1.8.6)
|
||||
kramdown (1.11.1)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.6)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9.7)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.1.0)
|
||||
minima (2.0.0)
|
||||
minitest (5.10.1)
|
||||
multipart-post (2.0.0)
|
||||
net-dns (0.8.0)
|
||||
nokogiri (1.7.1)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
octokit (4.6.2)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.14.0)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (1.5.3)
|
||||
rb-fsevent (0.9.8)
|
||||
rb-inotify (0.9.8)
|
||||
ffi (>= 0.5.0)
|
||||
rouge (1.11.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.23)
|
||||
sawyer (0.8.1)
|
||||
addressable (>= 2.3.5, < 2.6)
|
||||
faraday (~> 0.8, < 1.0)
|
||||
terminal-table (1.7.3)
|
||||
unicode-display_width (~> 1.1.1)
|
||||
thread_safe (0.3.6)
|
||||
typhoeus (0.8.0)
|
||||
ethon (>= 0.8.0)
|
||||
tzinfo (1.2.3)
|
||||
thread_safe (~> 0.1)
|
||||
unicode-display_width (1.1.3)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages (~> 104)
|
||||
@@ -1,80 +0,0 @@
|
||||
## User Documentation for Yoga
|
||||
|
||||
This directory will contain the user, feature and API documentation for Yoga. The documentation will be hosted on GitHub pages.
|
||||
|
||||
### Contributing
|
||||
|
||||
See [CONTRIBUTING.md](https://github.com/facebook/yoga/blob/master/CONTRIBUTING.md) for details on how to add or modify content.
|
||||
|
||||
### Run the Site Locally
|
||||
|
||||
The requirements for running a GitHub pages site locally is described in [GitHub help](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/#requirements). The steps below summarize these steps.
|
||||
|
||||
> If you have run the site before, you can start with step 1 and then move on to step 5.
|
||||
|
||||
1. Ensure that you are in the same directory where this `README.md` exists (e.g., it could be in `yoga/docs` on `master`, in the root of a `gh-pages` branch, etc). The below RubyGems commands, etc. must be run from there.
|
||||
|
||||
1. Make sure you have Ruby and [RubyGems](https://rubygems.org/) installed.
|
||||
|
||||
> Ruby >= 2.2 is required for the gems. On the latest versions of Mac OS X, Ruby 2.0 is the
|
||||
> default. Use [Homebrew](http://brew.sh) and the `brew install ruby` command (or your
|
||||
> preferred upgrade mechanism) to install a newer version of Ruby for your Mac OS X system.
|
||||
|
||||
1. Make sure you have [Bundler](http://bundler.io/) installed.
|
||||
|
||||
```
|
||||
# may require sudo
|
||||
gem install bundler
|
||||
```
|
||||
1. Install the project's dependencies
|
||||
|
||||
```
|
||||
# run this in the 'docs' directory
|
||||
bundle install
|
||||
```
|
||||
|
||||
> If you get an error when installing `nokogiri`, you may be running into the problem described
|
||||
> in [this nokogiri issue](https://github.com/sparklemotion/nokogiri/issues/1483). You can
|
||||
> either `brew uninstall xz` (and then `brew install xz` after the bundle is installed) or
|
||||
> `xcode-select --install` (although this may not work if you have already installed command
|
||||
> line tools).
|
||||
|
||||
1. Run Jekyll's server.
|
||||
|
||||
- On first runs or for structural changes to the documentation (e.g., new sidebar menu item), do a full build.
|
||||
|
||||
```
|
||||
bundle exec jekyll serve
|
||||
```
|
||||
|
||||
- For content changes only, you can use `--incremental` for faster builds.
|
||||
|
||||
```
|
||||
bundle exec jekyll serve --incremental
|
||||
```
|
||||
|
||||
> We use `bundle exec` instead of running straight `jekyll` because `bundle exec` will always use the version of Jekyll from our `Gemfile`. Just running `jekyll` will use the system version and may not necessarily be compatible.
|
||||
|
||||
- To run using an actual IP address, you can use `--host=0.0.0.0`
|
||||
|
||||
```
|
||||
bundle exec jekyll serve --host=0.0.0.0
|
||||
```
|
||||
|
||||
This will allow you to use the IP address associated with your machine in the URL. That way you could share it with other people.
|
||||
|
||||
e.g., on a Mac, you can your IP address with something like `ifconfig | grep "inet " | grep -v 127.0.0.1`.
|
||||
|
||||
1. Either of commands in the previous step will serve up the site on your local device at http://127.0.0.1:4000/ or http://localhost:4000.
|
||||
|
||||
### Updating the Bundle
|
||||
|
||||
The site depends on Github Pages and the installed bundle is based on the `github-pages` gem.
|
||||
Occasionally that gem might get updated with new or changed functionality. If that is the case,
|
||||
you can run:
|
||||
|
||||
```
|
||||
bundle update
|
||||
```
|
||||
|
||||
to get the latest packages for the installation.
|
||||
@@ -1,17 +0,0 @@
|
||||
## Template Details
|
||||
|
||||
First, go through `_config.yml` and adjust the available settings to your project's standard. When you make changes here, you'll have to kill the `jekyll serve` instance and restart it to see those changes, but that's only the case with the config file.
|
||||
|
||||
Next, update some image assets - you'll want to update `favicon.png`, `logo.svg`, and `og_image.png` (used for Like button stories and Shares on Facbeook) in the `static` folder with your own logos.
|
||||
|
||||
Next, if you're going to have docs on your site, keep the `_docs` and `docs` folders, if not, you can safely remove them (or you can safely leave them and not include them in your navigation - Jekyll renders all of this before a client views the site anyway, so there's no performance hit from just leaving it there for a future expansion).
|
||||
|
||||
Same thing with a blog section, either keep or delete the `_posts` and `blog` folders.
|
||||
|
||||
You can customize your homepage in three parts - the first in the homepage header, which is mostly automatically derived from the elements you insert into your config file. However, you can also specify a series of 'promotional' elements in `_data/promo.yml`. You can read that file for more information.
|
||||
|
||||
The second place for your homepage is in `index.md` which contains the bulk of the main content below the header. This is all markdown if you want, but you can use HTML and Jekyll's template tags (called Liquid) in there too. Checkout this folder's index.md for an example of one common template tag that we use on our sites called gridblocks.
|
||||
|
||||
The third and last place is in the `_data/powered_by.yml` and `_data/powered_by_highlight.yml` files. Both these files combine to create a section on the homepage that is intended to show a list of companies or apps that are using your project. The `powered_by_highlight` file is a list of curated companies/apps that you want to show as a highlight at the top of this section, including their logos in whatever format you want. The `powered_by` file is a more open list that is just text links to the companies/apps and can be updated via Pull Request by the community. If you don't want these sections on your homepage, just empty out both files and leave them blank.
|
||||
|
||||
The last thing you'll want to do is setup your top level navigation bar. You can do this by editing `nav.yml` and keeping the existing title/href/category structure used there. Although the nav is responsive and fairly flexible design-wise, no more than 5 or 6 nav items is recommended.
|
||||
@@ -1,85 +0,0 @@
|
||||
# Site settings
|
||||
permalink: /blog/:year/:month/:day/:title.html
|
||||
title: YOGA
|
||||
tagline: A cross-platform layout engine
|
||||
|
||||
fbappid: "1615782811974223"
|
||||
gacode: "UA-44373548-24"
|
||||
|
||||
# baseurl determines the subpath of your site. For example if you're using an
|
||||
# organisation.github.io/reponame/ basic site URL, then baseurl would be set
|
||||
# as "/reponame" but leave blank if you have a top-level domain URL as it is
|
||||
# now set to "" by default as discussed in:
|
||||
# http://jekyllrb.com/news/2016/10/06/jekyll-3-3-is-here/
|
||||
baseurl: ""
|
||||
|
||||
# the base hostname & protocol for your site
|
||||
# If baseurl is set, then the absolute url for your site would be url/baseurl
|
||||
# This was also be set to the right thing automatically for local development
|
||||
# https://github.com/blog/2277-what-s-new-in-github-pages-with-jekyll-3-3
|
||||
# http://jekyllrb.com/news/2016/10/06/jekyll-3-3-is-here/
|
||||
url: "http://yogalayout.com"
|
||||
|
||||
# Note: There are new filters in Jekyll 3.3 to help with absolute and relative urls
|
||||
# absolute_url
|
||||
# relative_url
|
||||
# So you will see these used throughout the Jekyll code in this template.
|
||||
# no more need for | prepend: site.url | prepend: site.baseurl
|
||||
# http://jekyllrb.com/news/2016/10/06/jekyll-3-3-is-here/
|
||||
#https://github.com/blog/2277-what-s-new-in-github-pages-with-jekyll-3-3
|
||||
|
||||
# The GitHub repo for your project
|
||||
ghrepo: "facebook/yoga"
|
||||
|
||||
# Use these color settings to determine your colour scheme for the site.
|
||||
color:
|
||||
# primary should be a vivid color that reflects the project's brand
|
||||
primary: "#97dccf"
|
||||
# secondary should be a subtle light or dark color used on page backgrounds
|
||||
secondary: "#ffffff"
|
||||
# Use the following to specify whether the previous two colours are 'light'
|
||||
# or 'dark' and therefore what colors can be overlaid on them
|
||||
primary-overlay: "light"
|
||||
secondary-overlay: "light"
|
||||
|
||||
#Uncomment this if you want to enable Algolia doc search with your own values
|
||||
searchconfig:
|
||||
apikey: "48f81041f782ed6463719d8d98c94f38"
|
||||
indexname: "yoga"
|
||||
|
||||
# Blog posts are built into Jekyll by default, with the `_posts` directory.
|
||||
# Here you can specify other types of documentation. The names here are `docs`
|
||||
# and `top-level`. This means their content will be in `_docs` and `_top-level`.
|
||||
# The permalink format is also given.
|
||||
# http://ben.balter.com/2015/02/20/jekyll-collections/
|
||||
collections:
|
||||
docs:
|
||||
output: true
|
||||
permalink: /docs/:name/
|
||||
top-level:
|
||||
output: true
|
||||
permalink: :name.html
|
||||
|
||||
# DO NOT ADJUST BELOW THIS LINE UNLESS YOU KNOW WHAT YOU ARE CHANGING
|
||||
|
||||
markdown: kramdown
|
||||
kramdown:
|
||||
input: GFM
|
||||
syntax_highlighter: rouge
|
||||
|
||||
syntax_highlighter_opts:
|
||||
css_class: 'rougeHighlight'
|
||||
span:
|
||||
line_numbers: false
|
||||
block:
|
||||
line_numbers: true
|
||||
start_line: 1
|
||||
|
||||
sass:
|
||||
style: :compressed
|
||||
|
||||
redcarpet:
|
||||
extensions: [with_toc_data]
|
||||
|
||||
# Exclude these from the sites directory
|
||||
exclude: ['README.md', 'TEMPLATE-INFORMATION.md', 'CONTRIBUTING.md', 'Gemfile', 'Gemfile.lock']
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
exampleauthor:
|
||||
full_name: Example Author
|
||||
fbid: 1234
|
||||
@@ -1,2 +0,0 @@
|
||||
# Add features here if you are using:
|
||||
# {% include content/gridblocks.html data_source=site.data.features align="center" %}
|
||||
@@ -1,10 +0,0 @@
|
||||
- title: Documentation
|
||||
href: docs/
|
||||
category: api
|
||||
|
||||
- title: GitHub
|
||||
href: https://github.com/facebook/yoga
|
||||
category: external
|
||||
|
||||
# Use external for external links not associated with the paths of the current site.
|
||||
# If a category is external, site urls, for example, are not prepended to the href, etc..
|
||||
@@ -1,26 +0,0 @@
|
||||
- title: Quick Start
|
||||
items:
|
||||
- id: getting-started
|
||||
- id: learn-more
|
||||
- title: Flexbox concepts
|
||||
items:
|
||||
- id: flex-direction
|
||||
- id: justify-content
|
||||
- id: flex-wrap
|
||||
- id: alignment
|
||||
- id: flex
|
||||
- id: absolute-position
|
||||
- id: min-max-dimen
|
||||
- id: margin-padding-border
|
||||
- title: Yoga additions
|
||||
items:
|
||||
- id: aspect-ratio
|
||||
- id: rtl
|
||||
- title: API
|
||||
items:
|
||||
- id: c
|
||||
- id: yogakit
|
||||
- id: java
|
||||
- id: android
|
||||
- id: csharp
|
||||
- id: javascript
|
||||
@@ -1 +0,0 @@
|
||||
# For non-highlighted projects. See format in powered_by_highlight.yml
|
||||
@@ -1,6 +0,0 @@
|
||||
# React Native uses Yoga now. We can add a highlight later when other projects use it.
|
||||
#- title: Who Uses This Project?
|
||||
# items:
|
||||
# - name: React Native
|
||||
# url: https://facebook.github.io/react-native
|
||||
# img: static/images/react-native.png
|
||||
@@ -1,11 +0,0 @@
|
||||
# This file determines the list of promotional elements added to the header of \
|
||||
# your site's homepage.
|
||||
|
||||
- type: plugin_row
|
||||
children:
|
||||
- type: button
|
||||
href: docs/getting-started/
|
||||
text: Get Started
|
||||
- type: button
|
||||
href: docs/learn-more/
|
||||
text: Learn More
|
||||
@@ -1,103 +0,0 @@
|
||||
---
|
||||
docid: android
|
||||
title: Android
|
||||
layout: docs
|
||||
permalink: /docs/api/android/
|
||||
---
|
||||
|
||||
To include the java bindings and `.so` libraries, add to your build:
|
||||
|
||||
```java
|
||||
compile 'com.facebook.yoga:yoga:1.5.0'
|
||||
```
|
||||
|
||||
There is an easy interface to Yoga called `YogaLayout`. This is a view group that lays out its children using Yoga. We recommend looking at the sample app for details on its usage. However, as an overview you can simply define XML layouts such as:
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<YogaLayout
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:yoga="http://schemas.android.com/apk/res-auto"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
yoga:yg_alignItems="stretch"
|
||||
>
|
||||
<YogaLayout
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/sample_children_background"
|
||||
yoga:yg_marginHorizontal="10dp"
|
||||
yoga:yg_marginTop="5dp"
|
||||
yoga:yg_flexDirection="row"
|
||||
yoga:yg_alignItems="center"
|
||||
>
|
||||
<ImageView
|
||||
android:layout_width="50dp"
|
||||
android:layout_height="50dp"
|
||||
android:src="@drawable/ic_launcher"
|
||||
yoga:yg_flex="0"
|
||||
/>
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/child_1_text"
|
||||
android:textColor="@color/children_text"
|
||||
yoga:yg_flex="1"
|
||||
yoga:yg_marginStart="8dp"
|
||||
/>
|
||||
</YogaLayout>
|
||||
</YogaLayout>
|
||||
```
|
||||
|
||||
Note that there are some caveats, such as requiring the custom `YogaLayoutViewFactory` in order to have tags `YogaLayout` instead of `com.facebook.samples.yoga.YogaLayout`.
|
||||
|
||||
To include this in your project, add to your build:
|
||||
|
||||
```java
|
||||
compile 'com.facebook.yoga.android:yoga-layout:1.5.0'
|
||||
```
|
||||
|
||||
## Snapshot releases
|
||||
|
||||
> IMPORTANT: This will break and may set your house on fire. Snapshots are unsigned and automatically published by our CI system. Use them for testing purposes only.
|
||||
|
||||
If you want to live on the bleeding edge, you can use the SNAPSHOT releases
|
||||
which represent the most recent commit on `master` by adding these targets to
|
||||
your gradle config:
|
||||
|
||||
```gradle
|
||||
repositories {
|
||||
maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
|
||||
}
|
||||
|
||||
dependencies {
|
||||
compile 'com.facebook.yoga:yoga:1.5.1-SNAPSHOT'
|
||||
compile 'com.facebook.yoga.android:yoga-layout:1.5.1-SNAPSHOT'
|
||||
}
|
||||
```
|
||||
|
||||
## layout\_width and layout\_height
|
||||
|
||||
If either are set to an actual size (in px or dp etc) then this is taken as a default for `yoga:yg_height` or `yoga:ygWidth`. Otherwise they are ignored.
|
||||
|
||||
## VirtualYogaLayout
|
||||
|
||||
Sometimes you will nest `YogaLayout`s within `YogaLayout`s in order to get your layout to be perfect, but some of the `YogaLayout`s are just there to control position: they don't render or anything. If so, then they are unnecessary (since Yoga stores the view hierarchy itself) and `VirtualYogaLayout` is a ViewGroup that fixes this. It will never get drawn, but all its children will be placed appropriately.
|
||||
|
||||
## RTL locales
|
||||
|
||||
RTL locales are supported by default. That is, unless you explicitly set the `yoga:yg_direction="ltr|rtl|inherit"` attribute on a view, it will obtain the locale direction At runtime_. This means that the layout will rearrange properly, even if the locale changes while your app is running!
|
||||
|
||||
## Attributes
|
||||
|
||||
The list of all attributes can be found in [attrs.xml](https://github.com/facebook/yoga/blob/master/android/src/main/res/values/attrs.xml), but logically map from the Yoga properties.
|
||||
|
||||
## Auto margins
|
||||
|
||||
You can specify `margin_left="auto"` (or `margin_right` etc.) for auto values. This is in addition to the dimensions you can speicfy, such as `margin_left="20dp"`.
|
||||
|
||||
## Invalidation (_temporary_)
|
||||
|
||||
If you change any attribute of a view that will change its measure size, you must invalidate it. Do this by calling `YogaLayout#invalidate(View)` on any `YogaLayout` further up the tree. Obviously it is most efficient to call it on the view's parent (if it is a `YogaLayout`, but in case this is impractical, you can call it on the root of the tree.
|
||||
|
||||
This is a temporary solution. Ideally, the view should invalidate itself whenever an attribute (text, font etc.) that will alter its size changes. This will be automatic once we find a good way to hook into the Android invalidation system.
|
||||
@@ -1,280 +0,0 @@
|
||||
---
|
||||
docid: c
|
||||
title: C
|
||||
layout: docs
|
||||
permalink: /docs/api/c/
|
||||
---
|
||||
`YGNodeRef` is the main object you will be interfacing with when using Yoga in C. `YGNodeRef` is a pointer to an internal `YGNode` struct.
|
||||
|
||||
### Lifecycle
|
||||
|
||||
The following functions control the lifecycle of a `YGNodeRef`.
|
||||
|
||||
```c
|
||||
YGNodeRef YGNodeNew();
|
||||
void YGNodeReset(YGNodeRef node);
|
||||
void YGNodeFree(YGNodeRef node);
|
||||
void YGNodeFreeRecursive(YGNodeRef node);
|
||||
```
|
||||
|
||||
- `YGNodeReset` will reset a node to its initial state so it can be re-used without needing to re-allocate a new node.
|
||||
- `YGNodeFreeRecursive` is mostly used for testing and will free not only the node itself but also its children.
|
||||
|
||||
### Children
|
||||
|
||||
The following functions help manage the children of a node.
|
||||
|
||||
```c
|
||||
void YGNodeInsertChild(YGNodeRef node, YGNodeRef child, uint32_t index);
|
||||
void YGNodeRemoveChild(YGNodeRef node, YGNodeRef child);
|
||||
YGNodeRef YGNodeGetChild(YGNodeRef node, uint32_t index);
|
||||
uint32_t YGNodeGetChildCount(YGNodeRef node);
|
||||
```
|
||||
|
||||
### Style getters & setters
|
||||
|
||||
The large part of Yoga's API consists of setters and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
|
||||
|
||||
```c
|
||||
typedef enum YGDirection {
|
||||
YGDirectionInherit,
|
||||
YGDirectionLTR,
|
||||
YGDirectionRTL,
|
||||
} YGDirection;
|
||||
|
||||
void YGNodeStyleSetDirection(YGNodeRef node, YGDirection direction);
|
||||
YGDirection YGNodeStyleGetDirection(YGNodeRef node);
|
||||
|
||||
typedef enum YGFlexDirection {
|
||||
YGFlexDirectionColumn,
|
||||
YGFlexDirectionColumnReverse,
|
||||
YGFlexDirectionRow,
|
||||
YGFlexDirectionRowReverse,
|
||||
} YGFlexDirection;
|
||||
|
||||
void YGNodeStyleSetFlexDirection(YGNodeRef node,
|
||||
YGFlexDirection flexDirection);
|
||||
YGFlexDirection YGNodeStyleGetFlexDirection(YGNodeRef node);
|
||||
|
||||
typedef enum YGJustify {
|
||||
YGJustifyFlexStart,
|
||||
YGJustifyCenter,
|
||||
YGJustifyFlexEnd,
|
||||
YGJustifySpaceBetween,
|
||||
YGJustifySpaceAround,
|
||||
} YGJustify;
|
||||
|
||||
void YGNodeStyleSetJustifyContent(YGNodeRef node,
|
||||
YGJustify justifyContent);
|
||||
YGJustify YGNodeStyleGetJustifyContent(YGNodeRef node);
|
||||
|
||||
typedef enum YGAlign {
|
||||
YGAlignAuto,
|
||||
YGAlignFlexStart,
|
||||
YGAlignCenter,
|
||||
YGAlignFlexEnd,
|
||||
YGAlignStretch,
|
||||
} YGAlign;
|
||||
|
||||
void YGNodeStyleSetAlignContent(YGNodeRef node, YGAlign alignContent);
|
||||
YGAlign YGNodeStyleGetAlignContent(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetAlignItems(YGNodeRef node, YGAlign alignItems);
|
||||
YGAlign YGNodeStyleGetAlignItems(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetAlignSelf(YGNodeRef node, YGAlign alignSelf);
|
||||
YGAlign YGNodeStyleGetAlignSelf(YGNodeRef node);
|
||||
|
||||
typedef enum YGPositionType {
|
||||
YGPositionTypeRelative,
|
||||
YGPositionTypeAbsolute,
|
||||
} YGPositionType;
|
||||
|
||||
void YGNodeStyleSetPositionType(YGNodeRef node,
|
||||
YGPositionType positionType);
|
||||
YGPositionType YGNodeStyleGetPositionType(YGNodeRef node);
|
||||
|
||||
typedef enum YGWrap {
|
||||
YGWrapNoWrap,
|
||||
YGWrapWrap,
|
||||
} YGWrap;
|
||||
|
||||
void YGNodeStyleSetFlexWrap(YGNodeRef node, YGWrap flexWrap);
|
||||
YGWrap YGNodeStyleGetFlexWrap(YGNodeRef node);
|
||||
|
||||
typedef enum YGOverflow {
|
||||
YGOverflowVisible,
|
||||
YGOverflowHidden,
|
||||
YGOverflowScroll,
|
||||
} YGOverflow;
|
||||
|
||||
void YGNodeStyleSetOverflow(YGNodeRef node, YGOverflow overflow);
|
||||
YGOverflow YGNodeStyleGetOverflow(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetFlex(YGNodeRef node, float flex);
|
||||
|
||||
void YGNodeStyleSetFlexGrow(YGNodeRef node, float flexGrow);
|
||||
float YGNodeStyleGetFlexGrow(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetFlexShrink(YGNodeRef node, float flexShrink);
|
||||
float YGNodeStyleGetFlexShrink(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetFlexBasis(YGNodeRef node, float flexBasis);
|
||||
float YGNodeStyleGetFlexBasis(YGNodeRef node);
|
||||
|
||||
typedef enum YGEdge {
|
||||
YGEdgeLeft,
|
||||
YGEdgeTop,
|
||||
YGEdgeRight,
|
||||
YGEdgeBottom,
|
||||
YGEdgeStart,
|
||||
YGEdgeEnd,
|
||||
YGEdgeHorizontal,
|
||||
YGEdgeVertical,
|
||||
YGEdgeAll,
|
||||
} YGEdge;
|
||||
|
||||
void YGNodeStyleSetPosition(YGNodeRef node, YGEdge edge, float position);
|
||||
float YGNodeStyleGetPosition(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetMargin(YGNodeRef node, YGEdge edge, float margin);
|
||||
float YGNodeStyleGetMargin(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetPadding(YGNodeRef node, YGEdge edge, float padding);
|
||||
float YGNodeStyleGetPadding(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetBorder(YGNodeRef node, YGEdge edge, float border);
|
||||
float YGNodeStyleGetBorder(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetWidth(YGNodeRef node, float width);
|
||||
float YGNodeStyleGetWidth(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetHeight(YGNodeRef node, float height);
|
||||
float YGNodeStyleGetHeight(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMinWidth(YGNodeRef node, float minWidth);
|
||||
float YGNodeStyleGetMinWidth(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMinHeight(YGNodeRef node, float minHeight);
|
||||
float YGNodeStyleGetMinHeight(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMaxWidth(YGNodeRef node, float maxWidth);
|
||||
float YGNodeStyleGetMaxWidth(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMaxHeight(YGNodeRef node, float maxHeight);
|
||||
float YGNodeStyleGetMaxHeight(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetAspectRatio(YGNodeRef node, float aspectRatio);
|
||||
float YGNodeStyleGetAspectRatio(YGNodeRef node);
|
||||
```
|
||||
|
||||
### Layout results
|
||||
|
||||
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `YGNodeCalculateLayout` with the desired width and height or `YGUndefined` to perform the layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
|
||||
|
||||
```c
|
||||
void YGNodeCalculateLayout(YGNodeRef node,
|
||||
float availableWidth,
|
||||
float availableHeight,
|
||||
YGDirection parentDirection);
|
||||
float YGNodeLayoutGetLeft(YGNodeRef node);
|
||||
float YGNodeLayoutGetTop(YGNodeRef node);
|
||||
float YGNodeLayoutGetRight(YGNodeRef node);
|
||||
float YGNodeLayoutGetBottom(YGNodeRef node);
|
||||
float YGNodeLayoutGetWidth(YGNodeRef node);
|
||||
float YGNodeLayoutGetHeight(YGNodeRef node);
|
||||
YGDirection YGNodeLayoutGetDirection(YGNodeRef node);
|
||||
```
|
||||
|
||||
### Custom measurements
|
||||
|
||||
Certain nodes need the ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
|
||||
|
||||
- Call `YGNodeMarkDirty` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
|
||||
|
||||
> A measure function can only be attached to a leaf node in the hierarchy.
|
||||
|
||||
```c
|
||||
typedef enum YGMeasureMode {
|
||||
YGMeasureModeUndefined,
|
||||
YGMeasureModeExactly,
|
||||
YGMeasureModeAtMost,
|
||||
} YGMeasureMode;
|
||||
|
||||
typedef struct YGSize {
|
||||
float width;
|
||||
float height;
|
||||
} YGSize;
|
||||
|
||||
typedef YGSize (*YGMeasureFunc)(YGNodeRef node,
|
||||
float width,
|
||||
YGMeasureMode widthMode,
|
||||
float height,
|
||||
YGMeasureMode heightMode);
|
||||
|
||||
void YGNodeSetMeasureFunc(YGNodeRef node, YGMeasureFunc measureFunc);
|
||||
YGMeasureFunc YGNodeGetMeasureFunc(YGNodeRef node);
|
||||
|
||||
void YGNodeMarkDirty(YGNodeRef node);
|
||||
bool YGNodeIsDirty(YGNodeRef node);
|
||||
```
|
||||
|
||||
### Context
|
||||
|
||||
Context is important when integrating Yoga into another layout system. Context allows you to associate another object with a `YGNodeRef`. This context can then be retrieved from a `YGNodeRef` when for example its measure function is called. This is what enables Yoga to rely on the Android and iOS system implementations of text measurement in React Native.
|
||||
|
||||
```c
|
||||
void YGNodeSetContext(YGNodeRef node, void *context);
|
||||
void *YGNodeGetContext(YGNodeRef node);
|
||||
```
|
||||
|
||||
### Logging
|
||||
|
||||
Yoga will by default log to stdout and stderr. You may however customize this to instead log to your own logger.
|
||||
|
||||
```c
|
||||
typedef enum YGLogLevel {
|
||||
YGLogLevelError,
|
||||
YGLogLevelWarn,
|
||||
YGLogLevelInfo,
|
||||
YGLogLevelDebug,
|
||||
YGLogLevelVerbose,
|
||||
} YGLogLevel;
|
||||
|
||||
typedef int (*YGLogger)(YGLogLevel level, char *format, va_list args);
|
||||
void YGSetLogger(YGLogger logger);
|
||||
void YGLog(YGLogLevel level, char *message, ...);
|
||||
```
|
||||
|
||||
### Experiments
|
||||
|
||||
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
|
||||
|
||||
```c
|
||||
typedef enum YGExperimentalFeature {
|
||||
// Current experiments
|
||||
} YGExperimentalFeature;
|
||||
|
||||
void YGSetExperimentalFeatureEnabled(YGExperimentalFeature feature,
|
||||
bool enabled);
|
||||
bool YGIsExperimentalFeatureEnabled(YGExperimentalFeature feature);
|
||||
```
|
||||
|
||||
### Printing
|
||||
|
||||
Yoga has some hooks to print debug information while calculating layout. With the printing APIs you can add additional information to a node when it is printed.
|
||||
|
||||
```c
|
||||
typedef enum YGPrintOptions {
|
||||
YGPrintOptionsLayout = 1,
|
||||
YGPrintOptionsStyle = 2,
|
||||
YGPrintOptionsChildren = 4,
|
||||
} YGPrintOptions;
|
||||
|
||||
typedef void (*YGPrintFunc)(YGNodeRef node);
|
||||
|
||||
void YGNodeSetPrintFunc(YGNodeRef node, YGPrintFunc printFunc);
|
||||
YGPrintFunc YGNodeGetPrintFunc(YGNodeRef node);
|
||||
|
||||
void YGNodePrint(YGNodeRef node, YGPrintOptions options);
|
||||
```
|
||||
@@ -1,215 +0,0 @@
|
||||
---
|
||||
docid: csharp
|
||||
title: C#
|
||||
layout: docs
|
||||
permalink: /docs/api/csharp/
|
||||
---
|
||||
`YogaNode` is the main object you will be interfacing with when using Yoga in .NET. `YogaNode` is a thin [P/Invoke](https://msdn.microsoft.com/en-us/library/aa446536.aspx) wrapper around the core Yoga library.
|
||||
|
||||
### Lifecycle
|
||||
|
||||
Create a `YogaNode` via its default constructor and use `Reset` if you want to pool and re-use nodes. The native memory of a `YogaNode` will automatically be freed when the node is garbage collected.
|
||||
|
||||
```csharp
|
||||
YogaNode();
|
||||
void Reset();
|
||||
```
|
||||
|
||||
### Children
|
||||
|
||||
The following methods help manage the children of a node.
|
||||
|
||||
```csharp
|
||||
int Count { get };
|
||||
YogaNode this[int index] { get };
|
||||
void Insert(int index, YogaNode node);
|
||||
void RemoveAt(int index);
|
||||
void Clear();
|
||||
int IndexOf(YogaNode node);
|
||||
```
|
||||
|
||||
### Style getters & setters
|
||||
|
||||
The large part of Yoga's API consists of properties, setters, and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
|
||||
|
||||
```csharp
|
||||
enum YogaDirection
|
||||
{
|
||||
Inherit,
|
||||
LTR,
|
||||
RTL,
|
||||
}
|
||||
|
||||
YogaDirection StyleDirection {get, set};
|
||||
|
||||
enum YogaFlexDirection
|
||||
{
|
||||
Column,
|
||||
ColumnReverse,
|
||||
Row,
|
||||
RowReverse,
|
||||
}
|
||||
|
||||
YogaFlexDirection FlexDirection {get, set};
|
||||
|
||||
enum YogaJustify
|
||||
{
|
||||
FlexStart,
|
||||
Center,
|
||||
FlexEnd,
|
||||
SpaceBetween,
|
||||
SpaceAround,
|
||||
}
|
||||
|
||||
YogaJustify JustifyContent {get, set};
|
||||
|
||||
enum YogaAlign
|
||||
{
|
||||
Auto,
|
||||
FlexStart,
|
||||
Center,
|
||||
FlexEnd,
|
||||
Stretch,
|
||||
Baseline,
|
||||
SpaceBetween,
|
||||
SpaceAround
|
||||
}
|
||||
|
||||
YogaAlign AlignItems {get, set};
|
||||
YogaAlign AlignSelf {get, set};
|
||||
YogaAlign AlignContent {get, set};
|
||||
|
||||
enum YogaPositionType
|
||||
{
|
||||
Relative,
|
||||
Absolute,
|
||||
}
|
||||
|
||||
YogaPositionType PositionType {get, set};
|
||||
|
||||
enum YogaWrap
|
||||
{
|
||||
NoWrap,
|
||||
Wrap,
|
||||
WrapReverse
|
||||
}
|
||||
|
||||
YogaWrap Wrap {get, set};
|
||||
|
||||
enum YogaOverflow
|
||||
{
|
||||
Visible,
|
||||
Hidden,
|
||||
Scroll,
|
||||
}
|
||||
|
||||
YogaOverflow Overflow {get, set};
|
||||
|
||||
float Flex {set};
|
||||
float FlexGrow {get, set};
|
||||
float FlexShrink {get, set};
|
||||
float FlexBasis {get, set};
|
||||
|
||||
enum YogaEdge
|
||||
{
|
||||
Left,
|
||||
Top,
|
||||
Right,
|
||||
Bottom,
|
||||
Start,
|
||||
End,
|
||||
Horizontal,
|
||||
Vertical,
|
||||
All,
|
||||
}
|
||||
|
||||
float GetMargin(YogaEdge edge);
|
||||
void SetMargin(YogaEdge edge, float margin);
|
||||
|
||||
float GetPadding(YogaEdge edge);
|
||||
void SetPadding(YogaEdge edge, float padding);
|
||||
|
||||
float GetBorder(YogaEdge edge);
|
||||
void SetBorder(YogaEdge edge, float border);
|
||||
|
||||
float GetPosition(YogaEdge edge);
|
||||
void SetPosition(YogaEdge edge, float position);
|
||||
|
||||
float Width {get, set};
|
||||
float Height {get, set};
|
||||
|
||||
float MaxWidth {get, set};
|
||||
float MinWidth {get, set};
|
||||
|
||||
float MaxHeight {get, set};
|
||||
float MinHeight {get, set};
|
||||
|
||||
float AspectRatio {get, set};
|
||||
```
|
||||
|
||||
### Layout results
|
||||
|
||||
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `CalculateLayout()` perform layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
|
||||
|
||||
```csharp
|
||||
void CalculateLayout();
|
||||
float LayoutX {get};
|
||||
float LayoutY {get};
|
||||
float LayoutWidth {get};
|
||||
float LayoutHeight {get};
|
||||
YogaDirection LayoutDirection {get};
|
||||
```
|
||||
|
||||
### Custom measurements
|
||||
|
||||
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
|
||||
|
||||
- Call `MarkDirty()` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
|
||||
|
||||
> A measure function can only be attached to a leaf node in the hierarchy.
|
||||
|
||||
```csharp
|
||||
enum YogaMeasureMode
|
||||
{
|
||||
Undefined,
|
||||
Exactly,
|
||||
AtMost,
|
||||
}
|
||||
|
||||
public delegate YogaSize MeasureFunction(
|
||||
YogaNode node,
|
||||
float width,
|
||||
YogaMeasureMode widthMode,
|
||||
float height,
|
||||
YogaMeasureMode heightMode);
|
||||
|
||||
void SetMeasureFunction(MeasureFunction measureFunction);
|
||||
bool IsMeasureDefined();
|
||||
|
||||
bool IsDirty {get};
|
||||
void MarkDirty();
|
||||
```
|
||||
|
||||
### Data
|
||||
|
||||
Data is important when integrating Yoga into another layout system. Data allows you to associate another object with a `YogaNode`. This data can then be retrieved from a `YogaNode` when for example its measure function is called. This is what enables Yoga to rely on the Android system implementations of text measurement in React Native.
|
||||
|
||||
```csharp
|
||||
object Data {get, set}
|
||||
```
|
||||
|
||||
### Experiments
|
||||
|
||||
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
|
||||
|
||||
```csharp
|
||||
enum YogaExperimentalFeature {
|
||||
// Current experiments
|
||||
}
|
||||
|
||||
static void setExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature,
|
||||
boolean enabled);
|
||||
static boolean isExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature);
|
||||
```
|
||||
@@ -1,252 +0,0 @@
|
||||
---
|
||||
docid: java
|
||||
title: Java
|
||||
layout: docs
|
||||
permalink: /docs/api/java/
|
||||
---
|
||||
`YogaNode` is the main object you will be interfacing with when using Yoga in Java. `YogaNode` is a thin [JNI](https://en.wikipedia.org/wiki/Java_Native_Interface) wrapper around the core Yoga library.
|
||||
|
||||
### Lifecycle
|
||||
|
||||
Create a `YogaNode` via its default constructor and use `reset` if you want to pool and re-use nodes. The native memory of a `YogaNode` will automatically be freed when the node is garbage collected.
|
||||
|
||||
```java
|
||||
YogaNode();
|
||||
void reset();
|
||||
```
|
||||
|
||||
### Children
|
||||
|
||||
The following methods help manage the children of a node.
|
||||
|
||||
```java
|
||||
int getChildCount();
|
||||
YogaNodeType getChildAt(int i);
|
||||
void addChildAt(YogaNodeType child, int i);
|
||||
YogaNodeType removeChildAt(int i);
|
||||
YogaNodeType getParent();
|
||||
int indexOf(YogaNodeType child);
|
||||
```
|
||||
|
||||
### Style getters & setters
|
||||
|
||||
The large part of Yoga's API consists of setters and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
|
||||
|
||||
```java
|
||||
enum YogaDirection {
|
||||
INHERIT,
|
||||
LTR,
|
||||
RTL
|
||||
}
|
||||
|
||||
YogaDirection getStyleDirection();
|
||||
void setDirection(YogaDirection direction);
|
||||
|
||||
enum YogaFlexDirection {
|
||||
COLUMN,
|
||||
COLUMN_REVERSE,
|
||||
ROW,
|
||||
ROW_REVERSE
|
||||
}
|
||||
|
||||
YogaFlexDirection getFlexDirection();
|
||||
void setFlexDirection(YogaFlexDirection flexDirection);
|
||||
|
||||
enum YogaJustify {
|
||||
FLEX_START,
|
||||
CENTER,
|
||||
FLEX_END,
|
||||
SPACE_BETWEEN,
|
||||
SPACE_AROUND
|
||||
}
|
||||
|
||||
YogaJustify getJustifyContent();
|
||||
void setJustifyContent(YogaJustify justifyContent);
|
||||
|
||||
enum YogaAlign {
|
||||
AUTO,
|
||||
FLEX_START,
|
||||
CENTER,
|
||||
FLEX_END,
|
||||
STRETCH
|
||||
}
|
||||
|
||||
YogaAlign getAlignItems();
|
||||
void setAlignItems(YogaAlign alignItems);
|
||||
|
||||
YogaAlign getAlignSelf();
|
||||
void setAlignSelf(YogaAlign alignSelf);
|
||||
|
||||
YogaAlign getAlignContent();
|
||||
void setAlignContent(YogaAlign alignContent);
|
||||
|
||||
enum YogaPositionType {
|
||||
RELATIVE,
|
||||
ABSOLUTE
|
||||
}
|
||||
|
||||
YogaPositionType getPositionType();
|
||||
void setPositionType(YogaPositionType positionType);
|
||||
|
||||
enum YogaWrap {
|
||||
NO_WRAP,
|
||||
WRAP
|
||||
}
|
||||
|
||||
void setWrap(YogaWrap flexWrap);
|
||||
|
||||
enum YogaOverflow {
|
||||
VISIBLE,
|
||||
HIDDEN,
|
||||
SCROLL
|
||||
}
|
||||
|
||||
YogaOverflow getOverflow();
|
||||
void setOverflow(YogaOverflow overflow);
|
||||
|
||||
void setFlex(float flex);
|
||||
float getFlexGrow();
|
||||
void setFlexGrow(float flexGrow);
|
||||
float getFlexShrink();
|
||||
void setFlexShrink(float flexShrink);
|
||||
float getFlexBasis();
|
||||
void setFlexBasis(float flexBasis);
|
||||
|
||||
enum YogaEdge {
|
||||
LEFT,
|
||||
TOP,
|
||||
RIGHT,
|
||||
BOTTOM,
|
||||
START,
|
||||
END,
|
||||
HORIZONTAL,
|
||||
VERTICAL,
|
||||
ALL
|
||||
}
|
||||
|
||||
float getMargin(YogaEdge edge);
|
||||
void setMargin(YogaEdge edge, float margin);
|
||||
|
||||
float getPadding(YogaEdge edge);
|
||||
void setPadding(YogaEdge edge, float padding);
|
||||
|
||||
float getBorder(YogaEdge edge);
|
||||
void setBorder(YogaEdge edge, float border);
|
||||
|
||||
float getPosition(YogaEdge edge);
|
||||
void setPosition(YogaEdge edge, float position);
|
||||
|
||||
float getWidth();
|
||||
void setWidth(float width);
|
||||
|
||||
float getHeight();
|
||||
void setHeight(float height);
|
||||
|
||||
float getMaxWidth();
|
||||
void setMaxWidth(float maxWidth);
|
||||
|
||||
float getMinWidth();
|
||||
void setMinWidth(float minWidth);
|
||||
|
||||
float getMaxHeight();
|
||||
void setMaxHeight(float maxHeight);
|
||||
|
||||
float getMinHeight();
|
||||
void setMinHeight(float minHeight);
|
||||
|
||||
float getAspectRatio();
|
||||
void setAspectRatio(float aspectRatio);
|
||||
```
|
||||
|
||||
### Layout results
|
||||
|
||||
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `calculateLayout()` perform layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
|
||||
|
||||
```java
|
||||
void calculateLayout();
|
||||
float getLayoutX();
|
||||
float getLayoutY();
|
||||
float getLayoutWidth();
|
||||
float getLayoutHeight();
|
||||
YogaDirection getLayoutDirection();
|
||||
```
|
||||
|
||||
### Custom measurements
|
||||
|
||||
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
|
||||
|
||||
- Call `dirty()` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
|
||||
|
||||
> A measure function can only be attached to a leaf node in the hierarchy.
|
||||
|
||||
```java
|
||||
enum YogaMeasureMode {
|
||||
UNDEFINED,
|
||||
EXACTLY,
|
||||
AT_MOST
|
||||
}
|
||||
|
||||
interface YogaMeasureFunction {
|
||||
long measure(
|
||||
YogaNode node,
|
||||
float width,
|
||||
YogaMeasureMode widthMode,
|
||||
float height,
|
||||
YogaMeasureMode heightMode);
|
||||
}
|
||||
|
||||
class YogaMeasureOutput {
|
||||
static long make(int width, int height);
|
||||
}
|
||||
|
||||
void setMeasureFunction(YogaMeasureFunction measureFunction);
|
||||
boolean isMeasureDefined();
|
||||
|
||||
boolean isDirty();
|
||||
void dirty();
|
||||
```
|
||||
|
||||
### Data
|
||||
|
||||
Data is important when integrating Yoga into another layout system. Data allows you to associate another object with a `YogaNode`. This data can then be retrieved from a `YogaNode` when for example its measure function is called. This is what enables Yoga to rely on the Android system implementations of text measurement in React Native.
|
||||
|
||||
```java
|
||||
void setData(Object data);
|
||||
Object getData();
|
||||
```
|
||||
|
||||
### Logging
|
||||
|
||||
Yoga will by default log to stdout and stderr (or logcat on Android). You may however customize this to instead log to your own logger.
|
||||
|
||||
```java
|
||||
enum YogaLogLevel {
|
||||
ERROR,
|
||||
WARN,
|
||||
INFO,
|
||||
DEBUG,
|
||||
VERBOSE
|
||||
}
|
||||
|
||||
interface YogaLogger {
|
||||
void log(YogaLogLevel level, String message);
|
||||
}
|
||||
|
||||
void setLogger(YogaLogger logger);
|
||||
```
|
||||
|
||||
### Experiments
|
||||
|
||||
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
|
||||
|
||||
```java
|
||||
enum YogaExperimentalFeature {
|
||||
// Current experiments
|
||||
}
|
||||
|
||||
static void setExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature,
|
||||
boolean enabled);
|
||||
static boolean isExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature);
|
||||
```
|
||||
@@ -1,134 +0,0 @@
|
||||
---
|
||||
docid: javascript
|
||||
title: Javascript
|
||||
layout: docs
|
||||
permalink: /docs/api/javascript/
|
||||
---
|
||||
|
||||
The `yoga-layout` module offers two different implementations of Yoga. The first one is a native Node module, and the second one is an asm.js fallback that can be used when native compilation isn't an option - such as web browsers.
|
||||
|
||||
> Because this module is compiled from a C++ codebase, the function prototypes below will use the C++-syntax. Nevertheless, the corresponding methods all exist on the JS side, with the same arguments (`Node *` being a node object).
|
||||
|
||||
### Installing
|
||||
Installing through NPM
|
||||
```sh
|
||||
npm install yoga-layout
|
||||
```
|
||||
By default this will install the library and try to build for all platforms (node, browser asm, and standalone webpack). You may receive errors if you do not have the required platform development tools already installed. To preset the platform you'd like to build for you can set a .npmrc property first.
|
||||
```sh
|
||||
npm config set yoga-layout:platform standalone
|
||||
```
|
||||
This will now only run the standalone webpack build upon install.
|
||||
|
||||
### Build Platforms
|
||||
|
||||
| name | description |
|
||||
|----------------|-------------------------------------------------|
|
||||
| all (default) | Builds all of these platforms. |
|
||||
| browser | Builds asm js browser version. |
|
||||
| node | Builds node js version. |
|
||||
| standalone | Runs webpack. |
|
||||
| none | Does nothing. You can use the prepackaged libs. |
|
||||
|
||||
### Lifecycle
|
||||
|
||||
Create a node via `Yoga.Node.create()`, and destroy it by using its `free()` or `freeRecursive()` method. Note that unlike most objects in your Javascript applications, your nodes will not get automatically garbage collected, which means that it is especially important you keep track of them so you can free them when you no longer need them.
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/Node.hh?slice=14:17"></script>
|
||||
|
||||
### Children
|
||||
|
||||
The following methods help manage the children of a node.
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/Node.hh?slice=114:126"></script>
|
||||
|
||||
### Style getters & setters
|
||||
|
||||
The large part of Yoga's API consists of properties, setters, and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/Node.hh?slice=41:77"></script>
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/Node.hh?slice=79:112"></script>
|
||||
|
||||
### Layout results
|
||||
|
||||
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `calculateLayout()` perform layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/Node.hh?slice=142:157"></script>
|
||||
|
||||
### Custom measurements
|
||||
|
||||
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
|
||||
|
||||
- Call `markDirty()` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
|
||||
- Note that in the prototype below, `Size` is an object that contain both `width` and `height` properties.
|
||||
|
||||
> A measure function can only be attached to a leaf node in the hierarchy.
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/Node.hh?slice=128:131"></script>
|
||||
|
||||
### Experiments
|
||||
|
||||
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/global.hh?slice=3:4"></script>
|
||||
|
||||
### Example Usage
|
||||
|
||||
```javascript
|
||||
import yoga, { Node } from 'yoga-layout';
|
||||
|
||||
let rootNode = Node.create();
|
||||
rootNode.setWidth(1024);
|
||||
rootNode.setHeight(768);
|
||||
rootNode.setPadding(yoga.EDGE_ALL, 20);
|
||||
rootNode.setDisplay(yoga.DISPLAY_FLEX);
|
||||
rootNode.setFlexDirection(yoga.FLEX_DIRECTION_ROW);
|
||||
|
||||
let child1 = Node.create();
|
||||
child1.setWidth(250);
|
||||
child1.setHeight(400);
|
||||
child1.setFlex(0);
|
||||
|
||||
let child2 = Node.create();
|
||||
child2.setWidth(400);
|
||||
child2.setHeight(500);
|
||||
child2.setFlex(1);
|
||||
|
||||
rootNode.insertChild(child1, 0);
|
||||
rootNode.insertChild(child2, 1);
|
||||
|
||||
rootNode.calculateLayout(1024, 768, yoga.DIRECTION_LTR);
|
||||
|
||||
console.log(`root pos: {${rootNode.getComputedLeft()}, ${rootNode.getComputedTop()}, ${rootNode.getComputedWidth()}, ${rootNode.getComputedHeight()}}`);
|
||||
for (let i = 0, l = rootNode.getChildCount(); i < l; ++i) {
|
||||
let child = rootNode.getChild(i);
|
||||
console.log(`child ${i} pos: {${child.getComputedLeft()}, ${child.getComputedTop()}, ${child.getComputedWidth()}, ${child.getComputedHeight()}}`);
|
||||
console.log(child.getComputedLayout().toString());
|
||||
}
|
||||
|
||||
rootNode.removeChild(child1);
|
||||
rootNode.removeChild(child2);
|
||||
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes`);
|
||||
Node.destroy(child2);
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes left`);
|
||||
child1.free();
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes left`);
|
||||
rootNode.freeRecursive();
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes left`);
|
||||
|
||||
---------------------------------
|
||||
Output:
|
||||
|
||||
root pos: {0, 0, 1024, 768}
|
||||
child 0 pos: {20, 20, 250, 400}
|
||||
<Layout#20:0;20:0;250:400>
|
||||
child 1 pos: {270, 20, 734, 500}
|
||||
<Layout#270:0;20:0;734:500>
|
||||
There are 3 nodes
|
||||
There are 2 nodes left
|
||||
There are 1 nodes left
|
||||
There are 0 nodes left
|
||||
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
docid: yogakit
|
||||
title: YogaKit
|
||||
layout: docs
|
||||
permalink: /docs/api/yogakit/
|
||||
---
|
||||
|
||||
> The YogaKit API is still in rapid development. Please use it and [report issues, bugs or feedback](https://github.com/facebook/yoga/issues).
|
||||
|
||||
YogaKit is a Objective-C (and Swift-compatible) wrapper for Yoga. It allows iOS Developers to manage the layout of their views using the power of Yoga.
|
||||
|
||||
Layout configuration is done via the [YGLayout](https://github.com/facebook/yoga/blob/master/YogaKit/Source/YGLayout.h) object. YogaKit exposes `YGLayout` via a [category](https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/Category.html) on [UIView](https://developer.apple.com/reference/uikit/uiview).
|
||||
|
||||
### Lifecycle
|
||||
|
||||
As with any `UIView`, instantiate it using `-(instancetype)initWithFrame:(CGRect)frame`. YogaKit uses the frame of the parent view to determine the space that is available for children in layout.
|
||||
|
||||
### Children
|
||||
|
||||
Yoga relies on `UIView` subviews to build up its internal layout tree. However, a subview can exclude itself from layout by setting the `isIncludedInLayout` property on `YGLayout` to `NO`.
|
||||
|
||||
It is also possible to query the number of children **included** in layout via `numberOfChildren`.
|
||||
|
||||
### Layout
|
||||
To apply a layout to a view (and its' subviews) you need to call `[view.yoga applyLayoutPreservingOrigin:NO]`. This will do a layout calculation (if needed) and apply the calculated frames to every view included in the layout.
|
||||
|
||||
In the event that you need to another layout pass on a view you can mark it dirty via `[view.yoga markDirty]`.
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
docid: absolute-position
|
||||
title: Absolute positioning
|
||||
layout: docs
|
||||
permalink: /docs/absolute-position/
|
||||
---
|
||||
|
||||
The `Position` property tells Flexbox how you want your item to be positioned within its parent. There are 2 options:
|
||||
|
||||
* `Relative` (default)
|
||||
* `Absolute`
|
||||
|
||||
An item marked with `Position = Absolute` is positioned absolutely in regards to its parent. This is done through 6 properties:
|
||||
|
||||
* `Left` - controls the distance a child's left edge is from the parent's left edge
|
||||
* `Top` - controls the distance a child's top edge is from the parent's top edge
|
||||
* `Right` - controls the distance a child's right edge is from the parent's right edge
|
||||
* `Bottom` - controls the distance a child's bottom edge is from the parent's bottom edge
|
||||
* `Start` - controls the distance a child's start edge is from the parent's start edge
|
||||
* `End` - controls the distance a child's end edge is from the parent's end edge
|
||||
|
||||
Using these options you can control the size and position of an absolute item within its parent. Because absolutely positioned children don't effect their siblings layout `Position = Absolute` can be used to create overlays and stack children in the Z axis.
|
||||
|
||||
#### Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; left: 0px; top: 0px; position: absolute;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; left: 10px; top: 10px; bottom: 10px; right: 10px; position: absolute;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
docid: alignment
|
||||
title: Alignment
|
||||
layout: docs
|
||||
permalink: /docs/alignment/
|
||||
---
|
||||
|
||||
### AlignItems
|
||||
|
||||
The `AlignItems` property describes how to align children along the cross axis of their container. `AlignItems` is very similar to `JustifyContent` but instead of applying to the main axis, it applies to the cross axis. There are 4 options for `AlignItems`:
|
||||
|
||||
* `Stretch` (default)
|
||||
* `FlexStart`
|
||||
* `FlexEnd`
|
||||
* `Center`
|
||||
|
||||
The only non-obvious option of the four is `Stretch`. With `AlignItems = Stretch` you instruct children to match the size of their container in the cross axis.
|
||||
|
||||
#### AlignItems = Stretch
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = FlexStart
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-start;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = FlexEnd
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = Center
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: center;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### AlignSelf
|
||||
|
||||
The `AlignSelf` property has the same options and effect as `AlignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent.
|
||||
|
||||
This property overrides any option set by the parent via the `AlignItems` property.
|
||||
|
||||
#### AlignItems = FlexEnd; AlignSelf = FlexStart;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px; align-items: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; height: 50px; width: 50px; align-self: flex-start;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### AlignContent
|
||||
|
||||
The `AlignContent` property is used to control how multiple lines of content are aligned within a container which uses `FlexWrap = wrap`. There are 6 options:
|
||||
|
||||
* `FlexStart` (default)
|
||||
* `FlexEnd`
|
||||
* `Center`
|
||||
* `Stretch`
|
||||
* `SpaceBetween`
|
||||
* `SpaceAround`
|
||||
|
||||
#### AlignContent = FlexEnd
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px; flex-wrap: wrap; height: 300px; align-content: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
docid: flex-direction
|
||||
title: Flex direction
|
||||
layout: docs
|
||||
permalink: /docs/flex-direction/
|
||||
---
|
||||
|
||||
The `FlexDirection` property controls the direction in which children are laid out. There are 4 options, of which 2 are commonly used:
|
||||
|
||||
* `Column` (default)
|
||||
* `Row`
|
||||
* `ColumnReverse`
|
||||
* `RowReverse`
|
||||
|
||||
The `Column` option stacks children vertically from top to bottom, and the `Row` option stacks children from left to right. The `Reverse` variants of the options reverse the order. If your layout supports right-to-left direction, Yoga will automatically toggle between `Row` and `RowReverse` as necessary.
|
||||
|
||||
`FlexDirection` introduces another important aspect of Flexbox, the main and cross axes. This is important as other properties will reference which axis they operate on. Simply put, the main axis follows the `FlexDirection` and the cross axis crosses the main axis at a 90 degree angle.
|
||||
|
||||
#### FlexDirection = Row
|
||||
|
||||
In this example the main axis goes from the left to the right. The cross axis goes from the top to the bottom.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### FlexDirection = Column
|
||||
|
||||
In this example the main axis goes from the top to the bottom. The cross axis goes from the left to the right.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
docid: flex-wrap
|
||||
title: Flex wrap
|
||||
layout: docs
|
||||
permalink: /docs/flex-wrap/
|
||||
---
|
||||
|
||||
The `FlexWrap` property is set on containers and controls what happens when children overflow the size of the container along the main axis. There are 2 options:
|
||||
|
||||
* `Nowrap` (default)
|
||||
* `Wrap`
|
||||
|
||||
If a container specifies `FlexWrap = Wrap` then its children will wrap to the next line instead of overflowing. The next line will have the same `FlexDirection` as the first line and will appear next to the first line along the cross axis -- below it if using `FlexDirection = Column` and to the right if using `FlexDirection = Row`.
|
||||
|
||||
#### FlexWrap = Nowrap
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### FlexWrap = Wrap
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 300px; flex-wrap: wrap;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; margin-bottom: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,100 +0,0 @@
|
||||
---
|
||||
docid: flex
|
||||
title: Flex
|
||||
layout: docs
|
||||
permalink: /docs/flex/
|
||||
---
|
||||
|
||||
### FlexGrow
|
||||
|
||||
The `FlexGrow` property describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the `FlexGrow` values specified by its children.
|
||||
|
||||
`FlexGrow` accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the child's `FlexGrow` value.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px; flex-grow: 1;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 2;">
|
||||
<span><span>FlexGrow = 2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### FlexShrink
|
||||
|
||||
The `FlexShrink` property describes how to shrink children along the main axis in the case that the total size of the children overflow the size of the container on the main axis.
|
||||
|
||||
`FlexShrink` is very similar to `FlexGrow` and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.
|
||||
|
||||
`FlexShrink` accepts any floating point value >= 0, with 0 being the default value. A container will shrink its children weighted by the child's `FlexShrink` value.
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; margin-right: 20px; flex-shrink: 1;">
|
||||
<span><span>FlexShrink = 1</span></span>
|
||||
</div>
|
||||
<div class="yoga" style="background-color: #303846; width: 300px; height: 50px; flex-shrink: 2;">
|
||||
<span><span>FlexShrink = 2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### FlexBasis
|
||||
|
||||
The `FlexBasis` property is an axis-independent way of providing the default size of an item on the main axis. Setting the `FlexBasis` of a child is similar to setting the `Width` of that child if its parent is a container with `FlexDirection = row` or setting the `Height` of a child if its parent is a container with `FlexDirection = column`. The `FlexBasis` of an item is the default size of that item, the size of the item before any `FlexGrow` and `FlexShrink` calculations are performed.
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
docid: justify-content
|
||||
title: Justify content
|
||||
layout: docs
|
||||
permalink: /docs/justify-content/
|
||||
---
|
||||
|
||||
The `JustifyContent` property describes how to align children within the main axis of a container. For example, you can use this property to center a child horizontally within a container with `FlexDirection = Row` or vertically within a container with `FlexDirection = Column`.
|
||||
|
||||
`JustifyContent` accepts 1 of the following 5 options:
|
||||
|
||||
* `FlexStart` (default)
|
||||
* `FlexEnd`
|
||||
* `Center`
|
||||
* `SpaceBetween`
|
||||
* `SpaceAround`
|
||||
|
||||
#### JustifyContent = FlexStart
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = FlexEnd
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: flex-end;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = Center
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: center;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = SpaceBetween
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: space-between;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### JustifyContent = SpaceAround
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; justify-content: space-around;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
docid: margin-padding-border
|
||||
title: Margin, Padding, Border
|
||||
layout: docs
|
||||
permalink: /docs/margin-padding-border/
|
||||
---
|
||||
|
||||
`Margin`, `Padding` are similar but have some important differences. By applying `Margin` to an item you specify the offset a certain edge of the item should have from it's closest sibling or parent. With `Padding` on the other hand you specify the offset children should have from a certain edge on the parent. `Border` behaves nearly identically to `Padding` and is only separate from `Padding` to make it easier to implement border effect such as color. In the below illustrations the green box is a child of the dark gray box.
|
||||
|
||||
#### MarginStart = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; margin-left: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### MarginEnd = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; margin-right: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### MarginAll = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; margin: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### PaddingAll = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; padding: 50px;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### BorderWidth = 50;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; flex: 1; border-width: 50px; border-color: transparent;">
|
||||
<div style="width: 50px; height: 50px; background-color: #97dccf;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
docid: min-max-dimen
|
||||
title: Min & Max dimensions
|
||||
layout: docs
|
||||
permalink: /docs/min-max-dimen/
|
||||
---
|
||||
|
||||
Using `MinWidth`, `MinHeight`, `MaxWidth`, and `MaxHeight` gives you increased control over the final size of items in a layout. By mixing these properties with `FlexGrow`, `FlexShrink`, and `AlignItems = Stretch`, you are able to have items with dynamic size within a range which you control.
|
||||
|
||||
An example of when `Max` properties can be useful is if you are using `AlignItems = Stretch` but you know that your item won't look good after it increases past a certain point. In this case, your item will stretch to the size of its parent or until it is as big as specified in the `Max` property.
|
||||
|
||||
Same goes for the `Min` properties when using `FlexShrink`. For example, you may want children of a container to shrink to fit on one row, but if you specify a minimum width, they will break to the next line after a certain point (if you are using `FlexWrap = Wrap`).
|
||||
|
||||
Another case where `Min` and `Max` dimension constraints are useful is when using `AspectRatio`.
|
||||
|
||||
#### FlexGrow = 1; MaxWidth = 200;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; height: 50px; flex-grow: 1; max-width: 200px;">
|
||||
<span><span>FlexGrow = 1</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### AlignItems = Stretch; MaxHeight: 100;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; padding: 20px; flex-direction: row; width: 500px; height: 200px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; margin-right: 20px;"></div>
|
||||
<div class="yoga" style="background-color: #303846; width: 50px; max-height: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
docid: getting-started
|
||||
title: Getting Started
|
||||
layout: docs
|
||||
permalink: /docs/getting-started/
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
Installation of Yoga is currently a manual process. We have plans on bringing Yoga to the many available package management systems (e.g., [Yarn](https://yarnpkg.com/), [Gradle](https://gradle.org/), [Cocoapods](https://cocoapods.org/)), but we do not have a target date at this time. We would greatly appreciate [community contributions here](https://github.com/facebook/yoga/pulls).
|
||||
|
||||
### Getting the Code
|
||||
|
||||
For now we recommend including Yoga as a [git submodule](https://git-scm.com/docs/git-submodule) in your project. Once done, you can either build Yoga using Buck (detailed [below](#building-with-buck)) or integrate it into your existing build system by including the C library from the [root `yoga` directory](https://github.com/facebook/yoga/tree/master/yoga) as well as the [language bindings](https://github.com/facebook/yoga) (e.g., Java, C#) you wish to use.
|
||||
|
||||
### Running the Examples
|
||||
|
||||
#### iOS
|
||||
|
||||
Yoga ships with an [iOS example](https://github.com/facebook/yoga/tree/master/YogaKit/YogaKitSample). To get it running:
|
||||
|
||||
```sh
|
||||
$ git clone https://github.com/facebook/yoga.git
|
||||
$ cd open yoga/YogaKit/YogaKitSample/
|
||||
$ pod install
|
||||
$ open YogaKitSample.xcworkspace
|
||||
```
|
||||
|
||||
#### Android
|
||||
|
||||
Yoga ships with an [Android example too](https://github.com/facebook/yoga/tree/master/android/sample). To get it running on an attached device (or emulator):
|
||||
|
||||
```sh
|
||||
$ git clone https://github.com/facebook/yoga.git
|
||||
$ cd yoga
|
||||
$ buck install -r android/sample
|
||||
```
|
||||
|
||||
Actually, this is more than just an example, and more a layout system for Android using Yoga in general (see `YogaLayout`). For more information see the [Android API section](/yoga/docs/api/android).
|
||||
|
||||
### Building with Buck
|
||||
|
||||
Yoga uses [Buck](https://buckbuild.com/) as its build system. Buck is not required for using Yoga, but, if you already use Buck, then integrating Yoga is very simple.
|
||||
|
||||
If you are using Buck all you need to do is reference the language bindings you want to use in your `BUCK` file.
|
||||
|
||||
```sh
|
||||
deps = [
|
||||
# C
|
||||
'//path/to/submodule/yoga:yoga',
|
||||
|
||||
# Java
|
||||
'//path/to/submodule/yoga/java:jni',
|
||||
|
||||
# Objective-C
|
||||
'//path/to/submodule/yoga/YogaKit:YogaKit',
|
||||
]
|
||||
```
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
docid: learn-more
|
||||
title: Learn More
|
||||
layout: docs
|
||||
permalink: /docs/learn-more/
|
||||
---
|
||||
|
||||
Yoga is an open-source, cross-platform layout library that implements Flexbox. Yoga's focus is on creating an expressive ***layout*** library, not implementing all of CSS. Therefore, there are no plans to include support for tables, floats, or similar CSS concepts. Yoga also does not support styling properties that have no impact on layout, such as color or background properties.
|
||||
|
||||
### Yoga vs Flexbox
|
||||
|
||||
Yoga aims to be compatible with Flexbox according to the [w3 specification](https://www.w3.org/TR/css3-flexbox). However, Yoga was not developed to strictly adhere to the specification; thus, there are aspects where Yoga differs.
|
||||
|
||||
#### Default values
|
||||
|
||||
Yoga has chosen to change the default values of some properties to better fit mobile layout use cases. The following CSS block describes the differences in default values from the [Flexbox w3 specification](https://www.w3.org/TR/css3-flexbox).
|
||||
|
||||
```css
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex-shrink: 0;
|
||||
align-content: flex-start;
|
||||
|
||||
border-width: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
min-width: 0px;
|
||||
}
|
||||
```
|
||||
|
||||
We have set up a [JSFiddle](https://jsfiddle.net/emilsjolander/jckmwztt/) so you can see these default values in action.
|
||||
|
||||
#### Right-to-Left
|
||||
|
||||
We believe that Right-to-Left (RTL) should be a first class citizen when it comes to layout. Therefore, Yoga implements non-standard RTL support for margin, padding, border, and position properties. This enables specifying these properties as `start` instead of `left` and `end` instead of `right`.
|
||||
|
||||
<div class="pluginWrapper buttonWrapper">
|
||||
<a
|
||||
class="button"
|
||||
href="/yoga/docs/rtl/"
|
||||
>Learn More about RTL</a>
|
||||
</div>
|
||||
|
||||
#### Yoga-specific properties
|
||||
|
||||
The goal of Yoga is to be a library which makes layout easy. Of course, implementing Flexbox, a common and well-liked system, helps meet this goal. However, there are areas where we think Yoga can evolve beyond Flexbox and provide developers with tools not included in the [Flexbox w3 specification](https://www.w3.org/TR/css3-flexbox). Currently Yoga has added one such property, `AspectRatio`, to solve a common problem we saw in many UIs.
|
||||
|
||||
<div class="pluginWrapper buttonWrapper">
|
||||
<a
|
||||
class="button"
|
||||
href="/yoga/docs/aspect-ratio/"
|
||||
>Learn More about Aspect Ratio</a>
|
||||
</div>
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
docid: aspect-ratio
|
||||
title: Aspect ratio
|
||||
layout: docs
|
||||
permalink: /docs/aspect-ratio/
|
||||
---
|
||||
|
||||
`AspectRatio` is a property introduced by Yoga. `AspectRatio` solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to videos, images, and other media types. `AspectRatio` accepts any floating point value > 0, the default is undefined.
|
||||
|
||||
- `AspectRatio` is defined as the ratio between the width and the height of a node e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height.
|
||||
- `AspectRatio` respects the `Min` and `Max` dimensions of an item.
|
||||
- `AspectRatio` has higher priority than `FlexGrow`
|
||||
- If `AspectRatio`, `Width`, and `Height` are set then the cross dimension is overridden.
|
||||
|
||||
#### Width = 100; AspectRatio = 2;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 100px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Width = 100; AspectRatio = 0.5;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
|
||||
<div class="yoga" style="background-color: #303846; width: 100px; height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### FlexDirection = Row; FlexGrow = 1; AspectRatio = 2;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px; flex-direction: row;">
|
||||
<div class="yoga" style="background-color: #303846; flex-grow: 1; height: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### FlexDirection = Row; AlignItems = Stretch; AspectRatio = 0.5;
|
||||
|
||||
<div class="yoga" style="align-items: flex-start;">
|
||||
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px; flex-direction: row;">
|
||||
<div class="yoga" style="background-color: #303846; width: 150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,15 +0,0 @@
|
||||
---
|
||||
docid: rtl
|
||||
title: RTL
|
||||
layout: docs
|
||||
permalink: /docs/rtl/
|
||||
---
|
||||
|
||||
The web has limited support for Right-to-Left (RTL) layouts. It does a pretty good job when it comes to text alignment and text rendering, but lacks the features needed to build fully RTL compatible UIs. Therefore, Yoga has adopted `Start` and `End` values for `Margin`, `Padding`, `Border`, and `Position` properties.
|
||||
|
||||
|
||||
## Direction
|
||||
|
||||
With `Start` and `End`, you can specify these properties in your UI without having to think about whether your item will show up on the left or the right side of the screen (depending on the person's language setting). Yoga automatically handles this for you.
|
||||
|
||||
The `Direction` property controls this behavior. `Direction` defaults to `Inherit` on all nodes except the root which defaults to `LTR`. It is up to you to detect the user's preferred direction (most platforms have a standard way of doing this) and setting this direction on the root of your layout tree.
|
||||
@@ -1,28 +0,0 @@
|
||||
<!-- Pagination links - copied from http://jekyllrb.com/docs/pagination/ -->
|
||||
{% if paginator.total_pages > 1 %}
|
||||
<br />
|
||||
<div class="pagination">
|
||||
{% if paginator.previous_page %}
|
||||
<a href="{{ paginator.previous_page_path | relative_url | replace: '//', '/' }}">« Prev</a>
|
||||
{% else %}
|
||||
<span>« Prev</span>
|
||||
{% endif %}
|
||||
|
||||
{% for page in (1..paginator.total_pages) %}
|
||||
{% if page == paginator.page %}
|
||||
<em>{{ page }}</em>
|
||||
{% elsif page == 1 %}
|
||||
<a href="{{ '/blog' | relative_url }}">{{ page }}</a>
|
||||
{% else %}
|
||||
<a href="{{ site.paginate_path | relative_url | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<a href="{{ paginator.next_page_path | relative_url | replace: '//', '/' }}">Next »</a>
|
||||
{% else %}
|
||||
<span>Next »</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<br />
|
||||
{% endif %}
|
||||
@@ -1,5 +0,0 @@
|
||||
<div class="gridBlock">
|
||||
{% for item in {{include.data_source}} %}
|
||||
{% include content/items/gridblock.html item=item layout=include.layout imagealign=include.imagealign align=include.align %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -1,37 +0,0 @@
|
||||
{% if include.layout == "fourColumn" %}
|
||||
{% assign layout = "fourByGridBlock" %}
|
||||
{% else %}
|
||||
{% assign layout = "twoByGridBlock" %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.imagealign == "side" %}
|
||||
{% assign imagealign = "imageAlignSide" %}
|
||||
{% else %}
|
||||
{% if item.image %}
|
||||
{% assign imagealign = "imageAlignTop" %}
|
||||
{% else %}
|
||||
{% assign imagealign = "" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.align == "right" %}
|
||||
{% assign align = "alignRight" %}
|
||||
{% elsif include.align == "center" %}
|
||||
{% assign align = "alignCenter" %}
|
||||
{% else %}
|
||||
{% assign align = "alignLeft" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="blockElement {{ layout }} {{ imagealign }} {{ align }}">
|
||||
{% if item.image %}
|
||||
<div class="blockImage">
|
||||
<img src="/static/{{ item.image }}" alt="{{ item.title }}" title="{{ item.title }}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="blockContent">
|
||||
<h3>{{ item.title }}</h3>
|
||||
{% if item.text %}
|
||||
{{ item.text | markdownify }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
<div class="post">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{% if include.truncate %}<a href="{{ page.url | absolute_url }}">{{ page.title }}</a>{% else %}{{ page.title }}{% endif %}</h1>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
{% if include.truncate %}
|
||||
{% if page.content contains '<!--truncate-->' %}
|
||||
{{ page.content | split:'<!--truncate-->' | first }}
|
||||
<div class="read-more">
|
||||
<a href="{{ page.url | absolute_url }}" >
|
||||
...Read More
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{{ page.content }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
|
||||
|
||||
{% endif %}
|
||||
</article>
|
||||
{% include doc_paging.html %}
|
||||
</div>
|
||||
@@ -1,33 +0,0 @@
|
||||
<div class="footerContainer">
|
||||
<div id="footer_wrap" class="wrapper footerWrapper">
|
||||
<div class="footerBlocks">
|
||||
<div id="fb_oss" class="footerSection fbOpenSourceFooter">
|
||||
<svg class="facebookOSSLogoSvg" viewBox="0 0 1133.9 1133.9" x="0px" y="0px">
|
||||
<g>
|
||||
<path class="logoRing outerRing" d="M 498.3 3.7 c 153.6 88.9 307.3 177.7 461.1 266.2 c 7.6 4.4 10.3 9.1 10.3 17.8 c -0.3 179.1 -0.2 358.3 0 537.4 c 0 8.1 -2.4 12.8 -9.7 17.1 c -154.5 88.9 -308.8 178.1 -462.9 267.5 c -9 5.2 -15.5 5.3 -24.6 0.1 c -153.9 -89.2 -307.9 -178 -462.1 -266.8 C 3 838.8 0 833.9 0 825.1 c 0.3 -179.1 0.2 -358.3 0 -537.4 c 0 -8.6 2.6 -13.6 10.2 -18 C 164.4 180.9 318.4 92 472.4 3 C 477 -1.5 494.3 -0.7 498.3 3.7 Z M 48.8 555.3 c 0 79.9 0.2 159.9 -0.2 239.8 c -0.1 10 3 15.6 11.7 20.6 c 137.2 78.8 274.2 157.8 411 237.3 c 9.9 5.7 17 5.7 26.8 0.1 c 137.5 -79.8 275.2 -159.2 412.9 -238.5 c 7.4 -4.3 10.5 -8.9 10.5 -17.8 c -0.3 -160.2 -0.3 -320.5 0 -480.7 c 0 -8.8 -2.8 -13.6 -10.3 -18 C 772.1 218 633.1 137.8 494.2 57.4 c -6.5 -3.8 -11.5 -4.5 -18.5 -0.5 C 336.8 137.4 197.9 217.7 58.8 297.7 c -7.7 4.4 -10.2 9.2 -10.2 17.9 C 48.9 395.5 48.8 475.4 48.8 555.3 Z" />
|
||||
<path class="logoRing middleRing" d="M 184.4 555.9 c 0 -33.3 -1 -66.7 0.3 -100 c 1.9 -48 24.1 -86 64.7 -110.9 c 54.8 -33.6 110.7 -65.5 167 -96.6 c 45.7 -25.2 92.9 -24.7 138.6 1 c 54.4 30.6 108.7 61.5 162.2 93.7 c 44 26.5 67.3 66.8 68 118.4 c 0.9 63.2 0.9 126.5 0 189.7 c -0.7 50.6 -23.4 90.7 -66.6 116.9 c -55 33.4 -110.8 65.4 -167.1 96.5 c -43.4 24 -89 24.2 -132.3 0.5 c -57.5 -31.3 -114.2 -64 -170 -98.3 c -41 -25.1 -62.9 -63.7 -64.5 -112.2 C 183.5 621.9 184.3 588.9 184.4 555.9 Z M 232.9 556.3 c 0 29.5 0.5 59.1 -0.1 88.6 c -0.8 39.2 16.9 67.1 50.2 86.2 c 51.2 29.4 102.2 59.2 153.4 88.4 c 31.4 17.9 63.6 18.3 95 0.6 c 53.7 -30.3 107.1 -61.2 160.3 -92.5 c 29.7 -17.5 45 -44.5 45.3 -78.8 c 0.6 -61.7 0.5 -123.5 0 -185.2 c -0.3 -34.4 -15.3 -61.5 -44.9 -79 C 637.7 352.6 583 320.8 527.9 290 c -27.5 -15.4 -57.2 -16.1 -84.7 -0.7 c -56.9 31.6 -113.4 64 -169.1 97.6 c -26.4 15.9 -40.7 41.3 -41.1 72.9 C 232.6 491.9 232.9 524.1 232.9 556.3 Z" />
|
||||
<path class="logoRing innerRing" d="M 484.9 424.4 c 69.8 -2.8 133.2 57.8 132.6 132 C 617 630 558.5 688.7 484.9 689.1 c -75.1 0.4 -132.6 -63.6 -132.7 -132.7 C 352.1 485 413.4 421.5 484.9 424.4 Z M 401.3 556.7 c -3.4 37.2 30.5 83.6 83 84.1 c 46.6 0.4 84.8 -37.6 84.9 -84 c 0.1 -46.6 -37.2 -84.4 -84.2 -84.6 C 432.2 472.1 397.9 518.3 401.3 556.7 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
<h2>Facebook Open Source</h2>
|
||||
</div>
|
||||
<div class="footerSection">
|
||||
<a class="footerLink" href="https://code.facebook.com/projects/" target="_blank">Open Source Projects</a>
|
||||
<a class="footerLink" href="https://github.com/facebook/" target="_blank">GitHub</a>
|
||||
<a class="footerLink" href="https://twitter.com/fbOpenSource" target="_blank">Twitter</a>
|
||||
</div>
|
||||
<div class="footerSection rightAlign">
|
||||
<a class="footerLink" href="https://github.com/{{ site.ghrepo }}" target="_blank">Contribute to this project on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', '{{ site.gacode }}', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
@@ -1,23 +0,0 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta property="og:url" content="{{ page.url | replace:'index.html','' | absolute_url }}" />
|
||||
<meta property="og:site_name" content="{{ site.title }}"/>
|
||||
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
|
||||
<meta property="og:image" content="{{ 'static/og_image.png' | absolute_url }}" />
|
||||
<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
|
||||
|
||||
<link rel="stylesheet" href="{{ '/css/main.css' | relative_url }}" media="screen">
|
||||
<link rel="icon" href="{{ '/static/favicon.png' | relative_url }}" type="image/x-icon">
|
||||
{% if site.searchconfig %}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
||||
{% endif %}
|
||||
|
||||
<title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
|
||||
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | absolute_url }}" />
|
||||
</head>
|
||||
@@ -1,19 +0,0 @@
|
||||
<div class="headerContainer">
|
||||
<div id="header_wrap" class="wrapper headerWrapper">
|
||||
<div class="inner">
|
||||
<img class="projectLogo" src="{{ '/static/logo.svg' | relative_url }}" alt="{{ site.title }}" title="{{ site.title }}" />
|
||||
<h1 id="project_title">{{ site.title }}</h1>
|
||||
<h2 id="project_tagline" class="fbossFontLight">{{ site.tagline }}</h2>
|
||||
|
||||
<section id="intro">
|
||||
<p>{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description }}{% endif %}</p>
|
||||
</section>
|
||||
<div id="promo" class="section promoSection">
|
||||
{% for promo in site.data.promo %}
|
||||
{% include plugins/{{promo.type}}.html button_href=promo.href button_text=promo.text %}
|
||||
<div class="gridClear"></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,31 +0,0 @@
|
||||
<div class="homeContainer">
|
||||
<div class="homeSplashFade">
|
||||
<div id="home_wrap" class="wrapper homeWrapper">
|
||||
<div id="inner">
|
||||
<h2 id="project_tagline">{{ site.tagline }}</h2>
|
||||
<section id="intro">
|
||||
<!--<p>{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description }}{% endif %}</p>-->
|
||||
<p>
|
||||
Yoga is a cross-platform layout engine enabling maximum collaboration within your team by implementing an API familiar to many designers and opening it up to developers across different platforms.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Do you already know Flexbox? Then you already know Yoga.</li>
|
||||
<li>Write code in a language familiar to you - Java, C#, Objective-C, C.</li>
|
||||
<li>C under the hood so your code moves fast.</li>
|
||||
<li>Battle tested in popular frameworks like React Native.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div id="promo" class="section promoSection">
|
||||
{% for promo in site.data.promo %}
|
||||
<div class="promoRow">
|
||||
{% include plugins/{{promo.type}}.html href=promo.href text=promo.text children=promo.children %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="projectLogo">
|
||||
<img src="{{ '/static/logo.svg' | relative_url }}" alt="{{ site.title }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.2.0/katex.min.js"></script>
|
||||
@@ -1,210 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
/* global katex */
|
||||
|
||||
var findEndOfMath = function(delimiter, text, startIndex) {
|
||||
// Adapted from
|
||||
// https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
|
||||
var index = startIndex;
|
||||
var braceLevel = 0;
|
||||
|
||||
var delimLength = delimiter.length;
|
||||
|
||||
while (index < text.length) {
|
||||
var character = text[index];
|
||||
|
||||
if (braceLevel <= 0 &&
|
||||
text.slice(index, index + delimLength) === delimiter) {
|
||||
return index;
|
||||
} else if (character === "\\") {
|
||||
index++;
|
||||
} else if (character === "{") {
|
||||
braceLevel++;
|
||||
} else if (character === "}") {
|
||||
braceLevel--;
|
||||
}
|
||||
|
||||
index++;
|
||||
}
|
||||
|
||||
return -1;
|
||||
};
|
||||
|
||||
var splitAtDelimiters = function(startData, leftDelim, rightDelim, display) {
|
||||
var finalData = [];
|
||||
|
||||
for (var i = 0; i < startData.length; i++) {
|
||||
if (startData[i].type === "text") {
|
||||
var text = startData[i].data;
|
||||
|
||||
var lookingForLeft = true;
|
||||
var currIndex = 0;
|
||||
var nextIndex;
|
||||
|
||||
nextIndex = text.indexOf(leftDelim);
|
||||
if (nextIndex !== -1) {
|
||||
currIndex = nextIndex;
|
||||
finalData.push({
|
||||
type: "text",
|
||||
data: text.slice(0, currIndex)
|
||||
});
|
||||
lookingForLeft = false;
|
||||
}
|
||||
|
||||
while (true) {
|
||||
if (lookingForLeft) {
|
||||
nextIndex = text.indexOf(leftDelim, currIndex);
|
||||
if (nextIndex === -1) {
|
||||
break;
|
||||
}
|
||||
|
||||
finalData.push({
|
||||
type: "text",
|
||||
data: text.slice(currIndex, nextIndex)
|
||||
});
|
||||
|
||||
currIndex = nextIndex;
|
||||
} else {
|
||||
nextIndex = findEndOfMath(
|
||||
rightDelim,
|
||||
text,
|
||||
currIndex + leftDelim.length);
|
||||
if (nextIndex === -1) {
|
||||
break;
|
||||
}
|
||||
|
||||
finalData.push({
|
||||
type: "math",
|
||||
data: text.slice(
|
||||
currIndex + leftDelim.length,
|
||||
nextIndex),
|
||||
rawData: text.slice(
|
||||
currIndex,
|
||||
nextIndex + rightDelim.length),
|
||||
display: display
|
||||
});
|
||||
|
||||
currIndex = nextIndex + rightDelim.length;
|
||||
}
|
||||
|
||||
lookingForLeft = !lookingForLeft;
|
||||
}
|
||||
|
||||
finalData.push({
|
||||
type: "text",
|
||||
data: text.slice(currIndex)
|
||||
});
|
||||
} else {
|
||||
finalData.push(startData[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return finalData;
|
||||
};
|
||||
|
||||
var splitWithDelimiters = function(text, delimiters) {
|
||||
var data = [{type: "text", data: text}];
|
||||
for (var i = 0; i < delimiters.length; i++) {
|
||||
var delimiter = delimiters[i];
|
||||
data = splitAtDelimiters(
|
||||
data, delimiter.left, delimiter.right,
|
||||
delimiter.display || false);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
var renderMathInText = function(text, delimiters) {
|
||||
var data = splitWithDelimiters(text, delimiters);
|
||||
|
||||
var fragment = document.createDocumentFragment();
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].type === "text") {
|
||||
fragment.appendChild(document.createTextNode(data[i].data));
|
||||
} else {
|
||||
var span = document.createElement("span");
|
||||
var math = data[i].data;
|
||||
try {
|
||||
katex.render(math, span, {
|
||||
displayMode: data[i].display
|
||||
});
|
||||
} catch (e) {
|
||||
if (!(e instanceof katex.ParseError)) {
|
||||
throw e;
|
||||
}
|
||||
console.error(
|
||||
"KaTeX auto-render: Failed to parse `" + data[i].data +
|
||||
"` with ",
|
||||
e
|
||||
);
|
||||
fragment.appendChild(document.createTextNode(data[i].rawData));
|
||||
continue;
|
||||
}
|
||||
fragment.appendChild(span);
|
||||
}
|
||||
}
|
||||
|
||||
return fragment;
|
||||
};
|
||||
|
||||
var renderElem = function(elem, delimiters, ignoredTags) {
|
||||
for (var i = 0; i < elem.childNodes.length; i++) {
|
||||
var childNode = elem.childNodes[i];
|
||||
if (childNode.nodeType === 3) {
|
||||
// Text node
|
||||
var frag = renderMathInText(childNode.textContent, delimiters);
|
||||
i += frag.childNodes.length - 1;
|
||||
elem.replaceChild(frag, childNode);
|
||||
} else if (childNode.nodeType === 1) {
|
||||
// Element node
|
||||
var shouldRender = ignoredTags.indexOf(
|
||||
childNode.nodeName.toLowerCase()) === -1;
|
||||
|
||||
if (shouldRender) {
|
||||
renderElem(childNode, delimiters, ignoredTags);
|
||||
}
|
||||
}
|
||||
// Otherwise, it's something else, and ignore it.
|
||||
}
|
||||
};
|
||||
|
||||
var defaultOptions = {
|
||||
delimiters: [
|
||||
{left: "$$", right: "$$", display: true},
|
||||
{left: "\\[", right: "\\]", display: true},
|
||||
{left: "\\(", right: "\\)", display: false}
|
||||
// LaTeX uses this, but it ruins the display of normal `$` in text:
|
||||
// {left: "$", right: "$", display: false}
|
||||
],
|
||||
|
||||
ignoredTags: [
|
||||
"script", "noscript", "style", "textarea", "pre", "code"
|
||||
]
|
||||
};
|
||||
|
||||
var extend = function(obj) {
|
||||
// Adapted from underscore.js' `_.extend`. See LICENSE.txt for license.
|
||||
var source, prop;
|
||||
for (var i = 1, length = arguments.length; i < length; i++) {
|
||||
source = arguments[i];
|
||||
for (prop in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, prop)) {
|
||||
obj[prop] = source[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
var renderMathInElement = function(elem, options) {
|
||||
if (!elem) {
|
||||
throw new Error("No element provided to render");
|
||||
}
|
||||
|
||||
options = extend({}, defaultOptions, options);
|
||||
|
||||
renderElem(elem, options.delimiters, options.ignoredTags);
|
||||
};
|
||||
|
||||
renderMathInElement(document.body);
|
||||
|
||||
</script>
|
||||
@@ -1,32 +0,0 @@
|
||||
<div id="fixed_header" class="fixedHeaderContainer{% if include.alwayson %} visible{% endif %}">
|
||||
<div class="headerWrapper wrapper">
|
||||
<header>
|
||||
<a href="{{ '/' | absolute_url }}">
|
||||
<img src="{{ '/static/logo.svg' | relative_url }}">
|
||||
<h2>{{ site.title }}</h2>
|
||||
</a>
|
||||
|
||||
<div class="navigationWrapper navigationFull" id="flat_nav">
|
||||
<nav class="navigation">
|
||||
<ul>
|
||||
{% for item in site.data.nav %}
|
||||
<li class="navItem{% if page.collection == item.category or page.category == item.category %} navItemActive{% endif %}">
|
||||
{% if item.category == "external" %}
|
||||
<a href="{{ item.href }}">{{ item.title }}</a>
|
||||
{% else %}
|
||||
<a href="{{ item.href | relative_url }}">{{ item.title }}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if site.searchconfig %}
|
||||
{% include nav_search.html inputselector="search_input" %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="navigationWrapper navigationSlider" id="navigation_wrap">
|
||||
{% include nav/header_nav.html %}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,54 +0,0 @@
|
||||
<div class="docsNavContainer">
|
||||
<nav class="toc" id="doc_nav">
|
||||
<div class="toggleNav" id="collection_nav">
|
||||
<section class="navWrapper wrapper">
|
||||
<div class="navBreadcrumb wrapper">
|
||||
<div class="navToggle" id="collection_nav_toggler">
|
||||
<i></i>
|
||||
</div>
|
||||
<h2>
|
||||
<a href="{{ include.sectionpath }}">{{ include.sectiontitle }}</a>
|
||||
{% if include.currentgroup %}
|
||||
<i>›</i>
|
||||
<span>{{ include.currentgroup }}</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="navGroups">
|
||||
{% if include.type == "blog" %}
|
||||
{% assign grouptitle = "All Posts" %}
|
||||
{% assign groupitems = include.navdata %}
|
||||
{% include nav/collection_nav_group.html %}
|
||||
{% else %}
|
||||
{% for group in include.navdata %}
|
||||
{% assign grouptitle = group.title %}
|
||||
{% for item in group.items %}
|
||||
{% if item.id == page.docid %}
|
||||
{% assign currentselected = item.id %}
|
||||
{% assign currentgroup = group %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include nav/collection_nav_group.html %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<script>
|
||||
var docsevent = document.createEvent('Event');
|
||||
docsevent.initEvent('docs_slide', true, true);
|
||||
document.addEventListener('docs_slide', function (e) {
|
||||
document.body.classList.toggle('docsSliderActive');
|
||||
}, false);
|
||||
|
||||
var collectionNav = document.getElementById('collection_nav');
|
||||
var collectionNavToggler =
|
||||
document.getElementById('collection_nav_toggler');
|
||||
collectionNavToggler.addEventListener('click', function(e) {
|
||||
collectionNav.classList.toggle('toggleNavActive');
|
||||
document.dispatchEvent(docsevent);
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
<div class="navGroup navGroupActive navGroupCurrent">
|
||||
<h3><span>{{ grouptitle }}</span></h3>
|
||||
<ul>
|
||||
{% if include.data_collection %}
|
||||
{% for item in group.items %}
|
||||
{% for collectionitem in include.data_collection %}
|
||||
{% if collectionitem.docid == item.id %}
|
||||
{% assign groupitem = collectionitem %}
|
||||
{% include nav/collection_nav_group_item.html %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for groupitem in groupitems %}
|
||||
{% include nav/collection_nav_group_item.html %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
<li class="navListItem"><a class="navItem {% if item.id == currentselected %}navItemActive{% endif %}" href="{{ groupitem.url | relative_url }}">{{ groupitem.title }}</a></li>
|
||||
@@ -1,34 +0,0 @@
|
||||
<div id="header_nav">
|
||||
<div class="navSlideout">
|
||||
<i class="menuExpand" id="header_nav_expander"><span></span><span></span><span></span></i>
|
||||
</div>
|
||||
<nav class="slidingNav">
|
||||
<ul>
|
||||
{% for item in site.data.nav %}
|
||||
<li class="navItem">
|
||||
{% if item.category == "external" %}
|
||||
<a href="{{ item.href }}" target="_blank">{{ item.title }}</a>
|
||||
{% else %}
|
||||
<a href="{{ item.href | relative_url }}">{{ item.title }}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if site.searchconfig %}
|
||||
{% include nav_search.html inputselector="search_input_react" %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<script>
|
||||
var event = document.createEvent('Event');
|
||||
event.initEvent('slide', true, true);
|
||||
document.addEventListener('slide', function (e) {
|
||||
document.body.classList.toggle('sliderActive');
|
||||
}, false);
|
||||
var headerNav = document.getElementById('header_nav');
|
||||
var headerNavExpander = document.getElementById('header_nav_expander');
|
||||
headerNavExpander.addEventListener('click', function(e) {
|
||||
headerNav.classList.toggle('navSlideoutActive');
|
||||
document.dispatchEvent(event);
|
||||
}, false);
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
<li class="navSearchWrapper">
|
||||
<input id="{{ include.inputselector }}" type="search" />
|
||||
</li>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||||
<script>
|
||||
// For Algolia search
|
||||
(function() {
|
||||
// Algolia
|
||||
docsearch({
|
||||
apiKey: '{{ site.searchconfig.apikey }}',
|
||||
indexName: '{{ site.searchconfig.indexname }}',
|
||||
inputSelector: '#{{ include.inputselector }}',
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
@@ -1,3 +0,0 @@
|
||||
<div class="pluginBlock allShareBlock">
|
||||
{% include plugins/like_button.html %}{% include plugins/twitter_share.html %}{% include plugins/google_share.html %}
|
||||
</div>
|
||||
@@ -1,2 +0,0 @@
|
||||
<div class="ascii-cinema pluginBlock"></div>
|
||||
<script type="text/javascript" src="https://asciinema.org/a/{{ include.href }}.js" id="asciicast-{{ include.href }}" async data-autoplay="true" data-loop="true" data-speed="2" data-t="23"></script>
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="pluginWrapper buttonWrapper">
|
||||
<a
|
||||
class="button"
|
||||
href="{{ include.href }}"
|
||||
>{{ include.text }}</a>
|
||||
</div>
|
||||
@@ -1,4 +0,0 @@
|
||||
<div class="pluginWrapper ghStarWrapper">
|
||||
<a aria-label="Star {{ site.ghrepo }} on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/{{ site.ghrepo }}#stargazers_count" data-count-href="/{{ site.ghrepo }}/stargazers" data-style="mega" data-icon="octicon-star" href="https://github.com/{{ site.ghrepo }}" class="github-button">Star</a>
|
||||
</div>
|
||||
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
||||
@@ -1,4 +0,0 @@
|
||||
<div class="pluginWrapper ghWatchWrapper">
|
||||
<a aria-label="Watch {{ site.ghrepo }} on GitHub" data-count-aria-label="# watchers on GitHub" data-count-api="/repos/{{ site.ghrepo }}#subscribers_count" data-count-href="/{{ site.ghrepo }}/watchers" data-style="mega" data-icon="octicon-eye" href="https://github.com/{{ site.ghrepo }}" class="github-button">Watch</a>
|
||||
</div>
|
||||
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
||||
@@ -1,5 +0,0 @@
|
||||
<div class="pluginBlock">
|
||||
<div class="g-plusone" data-size="medium"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="iframeContent">
|
||||
<iframe class="pluginIframe" src="{{ include.href }}" seamless></iframe>
|
||||
</div>
|
||||
<div class="iframePreview">
|
||||
{% include plugins/button.html href=include.href text=include.text %}
|
||||
</div>
|
||||
@@ -1,18 +0,0 @@
|
||||
<div class="fb-like pluginWrapper likeButtonWrapper" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
|
||||
<script>
|
||||
window.fbAsyncInit = function() {
|
||||
FB.init({
|
||||
appId : '{{ site.fbappid }}',
|
||||
xfbml : true,
|
||||
version : 'v2.3'
|
||||
});
|
||||
};
|
||||
|
||||
(function(d, s, id){
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) {return;}
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="pluginRowBlock">
|
||||
{% for child in include.children %}
|
||||
{% include plugins/{{child.type}}.html href=child.href text=child.text %}
|
||||
<div style="width: 20px;"></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -1,34 +0,0 @@
|
||||
<div class="postSocialPlugins">
|
||||
<a
|
||||
href="https://twitter.com/share"
|
||||
class="twitter-share-button"
|
||||
data-url="{{ page.url | replace:'index.html','' | absolute_url }}"
|
||||
data-text="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}"
|
||||
data-hashtags="flowtype">Tweet</a>
|
||||
<div
|
||||
class="fb-like"
|
||||
data-href="{{ page.url | replace:'index.html','' | absolute_url }}"
|
||||
data-layout="button_count"
|
||||
data-action="like"
|
||||
data-show-faces="false"
|
||||
data-share="true"></div>
|
||||
</div>
|
||||
<script>
|
||||
window.fbAsyncInit = function() {
|
||||
FB.init({
|
||||
appId : '{{ site.fbappid }}',
|
||||
xfbml : true,
|
||||
version : 'v2.2'
|
||||
});
|
||||
};
|
||||
|
||||
(function(d, s, id){
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) {return;}
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<div class="slideshowBlock pluginWrapper" id="slideshow"></div>
|
||||
<script>
|
||||
var slideshowData = [
|
||||
{% for image in site.data.slideshow %}
|
||||
{
|
||||
id : "{{ image.id }}",
|
||||
imagesrc : "{{ image.src }}",
|
||||
tooltip : "{{ image.tooltip }}",
|
||||
href : "{{ image.link }}",
|
||||
},
|
||||
{% endfor %}
|
||||
];
|
||||
</script>
|
||||
<script src="http://fb.me/react-with-addons-0.13.1.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var Slideshow = React.createClass({displayName: "Slideshow",
|
||||
getInitialState: function() {
|
||||
return {
|
||||
currentSlide: 0,
|
||||
};
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
data: slideshowData,
|
||||
};
|
||||
},
|
||||
handleSelect: function(id) {
|
||||
var index = this.props.data.map(function (el, elIndex) {
|
||||
return (
|
||||
elIndex
|
||||
);
|
||||
});
|
||||
var currentIndex = index.indexOf(id);
|
||||
this.setState({
|
||||
currentSlide: currentIndex,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
React.createElement("div", {className: "slideshow"},
|
||||
React.createElement("div", {className: "slides"},
|
||||
this.props.data.map(this.renderSlide)
|
||||
),
|
||||
React.createElement("div", {className: "pagination"},
|
||||
this.props.data.map(this.renderPager)
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
renderSlide: function(child, index) {
|
||||
var classes = React.addons.classSet({
|
||||
'slide': true,
|
||||
'slideActive': this.state.currentSlide === index,
|
||||
});
|
||||
if (child.href) {
|
||||
return (
|
||||
React.createElement("div", {key: index, className: classes},
|
||||
React.createElement("a", {href: child.href, alt: child.tooltip, title: child.tooltip},
|
||||
React.createElement("img", {src: child.imagesrc, alt: child.tooltip, title: child.tooltip})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
return (
|
||||
React.createElement("div", {key: index, className: classes},
|
||||
React.createElement("img", {src: child.imagesrc, alt: child.tooltip})
|
||||
)
|
||||
);
|
||||
},
|
||||
renderPager: function(child, index) {
|
||||
var classes = React.addons.classSet({
|
||||
'pager': true,
|
||||
'pagerActive': this.state.currentSlide === index,
|
||||
});
|
||||
return (
|
||||
React.createElement("span", {key: index, className: classes, onClick: this.handleSelect.bind(this, index)})
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
function render(slideshowData) {
|
||||
React.render(
|
||||
React.createElement(Slideshow, {data: slideshowData}),
|
||||
document.getElementById('slideshow')
|
||||
);
|
||||
}
|
||||
render(slideshowData);
|
||||
</script>
|
||||
@@ -1,5 +0,0 @@
|
||||
<div class="pluginBlock">
|
||||
<a href="https://twitter.com/{{ include.href }}" class="twitter-follow-button pluginBlock" data-show-count="false">Follow @{{ include.href }}</a>
|
||||
</div>
|
||||
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
@@ -1,4 +0,0 @@
|
||||
<div class="pluginWrapper twitterSharePlugin">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="{{ site.title| replace: ' ', '' }}">Tweet</a>
|
||||
</div>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<div class="post">
|
||||
{% assign author = site.data.authors[page.author] %}
|
||||
<header class="post-header">
|
||||
{% if author.fbid %}
|
||||
<div class="authorPhoto">
|
||||
<img src="http://graph.facebook.com/{{ author.fbid }}/picture/" alt="{{ author.fullname }}" title="{{ author.fullname }}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if author.full_name %}
|
||||
<p class="post-authorName">{{ author.full_name }}</p>
|
||||
{% endif %}
|
||||
<h1 class="post-title">{% if include.truncate %}<a href="{{ page.url | absolute_url }}">{{ page.title }}</a>{% else %}{{ page.title }}{% endif %}</h1>
|
||||
<p class="post-meta">Posted {{ page.date | date: '%B %d, %Y' }}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
|
||||
</header>
|
||||
|
||||
<article class="post-content">
|
||||
{% if include.truncate %}
|
||||
{% if page.content contains '<!--truncate-->' %}
|
||||
{{ page.content | split:'<!--truncate-->' | first | markdownify }}
|
||||
<div class="read-more">
|
||||
<a href="{{ page.url | absolute_url}}" >
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{{ page.content | markdownify }}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
{% unless include.truncate %}
|
||||
{% include plugins/all_share.html %}
|
||||
{% endunless %}
|
||||
</article>
|
||||
</div>
|
||||
@@ -1,28 +0,0 @@
|
||||
{% if site.data.powered_by.first.items or site.data.powered_by_highlight.first.items %}
|
||||
<div class="poweredByContainer">
|
||||
<div class="wrapper mainWrapper poweredByWrapper">
|
||||
{% if site.data.powered_by_highlight.first.title %}
|
||||
<h2>{{ site.data.powered_by_highlight.first.title }}</h2>
|
||||
{% else %}
|
||||
<h2>{{ site.data.powered_by.first.title }}</h2>
|
||||
{% endif %}
|
||||
{% if site.data.powered_by_highlight.first.items %}
|
||||
<div class="poweredByItems">
|
||||
{% for item in site.data.powered_by_highlight.first.items %}
|
||||
<div class="poweredByItem itemLarge">
|
||||
<a href="{{ item.url }}" target="_blank"><img src="{{ item.img }}" alt="{{ item.name }}" /></a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="poweredByItems">
|
||||
{% for item in site.data.powered_by.first.items %}
|
||||
<div class="poweredByItem itemSmall">
|
||||
<a href="{{ item.url }}" target="_blank">{{ item.name }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="poweredByMessage">Does your app use {{ site.title }}? Add it to this list with <a href="https://github.com/{{ site.ghrepo }}/edit/gh-pages/_data/powered_by.yml" target="_blank">a pull request!</a></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -1,24 +0,0 @@
|
||||
<a
|
||||
href="https://twitter.com/share"
|
||||
class="twitter-share-button"
|
||||
data-url="http://facebook.github.io/fresco{{ page.url }}"
|
||||
data-text="Fresco | {{ page.title }}"
|
||||
data-hashtags="fresco">Tweet</a>
|
||||
<div
|
||||
class="fb-like"
|
||||
data-href="http://facebook.github.io/fresco{{ page.url }}"
|
||||
data-layout="standard"
|
||||
data-action="like"
|
||||
data-show-faces="true"
|
||||
data-share="true"></div>
|
||||
|
||||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
@@ -1 +0,0 @@
|
||||
<span class="buttonWrap {{ include.align }}"><a class="button blockButton fbossFontLight pluginBlock margin{{ include.margin }}" target="{{ include.button_target }}" href="{{ include.button_href }}">{{ include.button_text }}</a></span>
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
layout: doc_default
|
||||
---
|
||||
|
||||
<div class="mainContainer blogContainer postContainer">
|
||||
<div id="main_wrap" class="wrapper mainWrapper">
|
||||
<div class="post basicPost">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
category: blog
|
||||
layout: blog_default
|
||||
---
|
||||
|
||||
<div class="mainContainer blogContainer postContainer">
|
||||
<div id="main_wrap" class="wrapper mainWrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body class="docsNavVisible">
|
||||
{% include nav.html alwayson=true %}
|
||||
<div class="navPusher">
|
||||
<div class="docMainWrapper wrapper">
|
||||
{% include nav/collection_nav.html navdata=site.posts type="blog" sectionpath="/blog/" sectiontitle="Blog" %}
|
||||
{{ content }}
|
||||
</div>
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body>
|
||||
{% include nav.html alwayson=true %}
|
||||
<div class="navPusher">
|
||||
{{ content }}
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body class="docsNavVisible">
|
||||
{% include nav.html alwayson=true %}
|
||||
<div class="navPusher">
|
||||
<div class="docMainWrapper wrapper">
|
||||
{% include nav/collection_nav.html navdata=site.data.nav_docs type="docs" sectionpath="/yoga/docs/" sectiontitle="Docs" data_collection=site.docs %}
|
||||
{{ content }}
|
||||
</div>
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
layout: doc_default
|
||||
---
|
||||
|
||||
<div class="mainContainer documentContainer postContainer">
|
||||
<div id="main_wrap" class="wrapper mainWrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
layout: doc_page
|
||||
---
|
||||
|
||||
{% include doc.html %}
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body>
|
||||
{% include nav.html alwayson=true %}
|
||||
<div class="navPusher">
|
||||
{% include home_header.html %}
|
||||
{{ content }}
|
||||
{% include powered_by.html %}
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,3 +0,0 @@
|
||||
---
|
||||
layout: blog
|
||||
---
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="mainContainer blogContainer postContainer">
|
||||
<div id="main_wrap" class="wrapper mainWrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
collection: blog
|
||||
layout: blog
|
||||
---
|
||||
|
||||
<div class="lonePost">
|
||||
{% include post.html %}
|
||||
</div>
|
||||
@@ -1,6 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="0; {{ page.destination }}">
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="mainContainer blogContainer postContainer">
|
||||
<div id="main_wrap" class="wrapper mainWrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,521 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
@@ -1,68 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,323 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
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%;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
|
||||
|
||||
.rougeHighlight { background-color: $code-bg; color: #000 }
|
||||
.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: #795da3 } /* Name */
|
||||
.rougeHighlight .o { color: #859900 } /* Operator */
|
||||
.rougeHighlight .x { color: #cb4b16 } /* Other */
|
||||
.rougeHighlight .p { color: #000000 } /* 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: #000000 } /* 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: #0086b3 } /* Name.Label */
|
||||
.rougeHighlight .nn { color: #93a1a1 } /* Name.Namespace */
|
||||
.rougeHighlight .nx { color: #93a1a1 } /* Name.Other */
|
||||
.rougeHighlight .py { color: #93a1a1 } /* Name.Property */
|
||||
.rougeHighlight .nt { color: #63a35c } /* 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: 500 12px/1.8em "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
max-width: 100%;
|
||||
|
||||
.rougeHighlight {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
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 darken($code-bg, 10%);
|
||||
color: darken($code-bg, 25%);
|
||||
margin-left: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
.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 {
|
||||
margin: 5px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.gistsample > .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;
|
||||
}
|
||||
}
|
||||
2
docs/app-6604b0e11666fcdfcf5c.js
Normal file
2
docs/app-6604b0e11666fcdfcf5c.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/app-6604b0e11666fcdfcf5c.js.map
Normal file
1
docs/app-6604b0e11666fcdfcf5c.js.map
Normal file
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user