├── .eslint.json ├── .eslintignore ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── docs ├── Gemfile ├── README.md ├── Rakefile ├── _config.yml ├── _css │ ├── _solarized.scss │ ├── _typography.scss │ ├── _variables.scss │ └── bourbon │ │ ├── _bourbon-deprecated-upcoming.scss │ │ ├── _bourbon.scss │ │ ├── addons │ │ ├── _button.scss │ │ ├── _clearfix.scss │ │ ├── _directional-values.scss │ │ ├── _ellipsis.scss │ │ ├── _font-family.scss │ │ ├── _hide-text.scss │ │ ├── _html5-input-types.scss │ │ ├── _position.scss │ │ ├── _prefixer.scss │ │ ├── _retina-image.scss │ │ ├── _size.scss │ │ ├── _timing-functions.scss │ │ ├── _triangle.scss │ │ └── _word-wrap.scss │ │ ├── css3 │ │ ├── _animation.scss │ │ ├── _appearance.scss │ │ ├── _backface-visibility.scss │ │ ├── _background-image.scss │ │ ├── _background.scss │ │ ├── _border-image.scss │ │ ├── _border-radius.scss │ │ ├── _box-sizing.scss │ │ ├── _calc.scss │ │ ├── _columns.scss │ │ ├── _filter.scss │ │ ├── _flex-box.scss │ │ ├── _font-face.scss │ │ ├── _font-feature-settings.scss │ │ ├── _hidpi-media-query.scss │ │ ├── _hyphens.scss │ │ ├── _image-rendering.scss │ │ ├── _keyframes.scss │ │ ├── _linear-gradient.scss │ │ ├── _perspective.scss │ │ ├── _placeholder.scss │ │ ├── _radial-gradient.scss │ │ ├── _transform.scss │ │ ├── _transition.scss │ │ └── _user-select.scss │ │ ├── functions │ │ ├── _assign.scss │ │ ├── _color-lightness.scss │ │ ├── _flex-grid.scss │ │ ├── _golden-ratio.scss │ │ ├── _grid-width.scss │ │ ├── _modular-scale.scss │ │ ├── _px-to-em.scss │ │ ├── _px-to-rem.scss │ │ ├── _strip-units.scss │ │ ├── _tint-shade.scss │ │ ├── _transition-property-name.scss │ │ └── _unpack.scss │ │ ├── helpers │ │ ├── _convert-units.scss │ │ ├── _gradient-positions-parser.scss │ │ ├── _is-num.scss │ │ ├── _linear-angle-parser.scss │ │ ├── _linear-gradient-parser.scss │ │ ├── _linear-positions-parser.scss │ │ ├── _linear-side-corner-parser.scss │ │ ├── _radial-arg-parser.scss │ │ ├── _radial-gradient-parser.scss │ │ ├── _radial-positions-parser.scss │ │ ├── _render-gradients.scss │ │ ├── _shape-size-stripper.scss │ │ └── _str-to-num.scss │ │ └── settings │ │ ├── _asset-pipeline.scss │ │ ├── _prefixer.scss │ │ └── _px-to-em.scss ├── _js │ ├── examples │ │ ├── .eslintrc │ │ ├── sample1.js │ │ └── sample2.js │ ├── html-jsx-lib.js │ ├── html-jsx.js │ ├── jsfiddle-integration.js │ ├── jsx-compiler.js │ └── live_editor.js ├── _layouts │ ├── default.html │ └── page.html ├── _plugins │ ├── header_links.rb │ ├── highlight_lines.rb │ └── sidebar_item.rb ├── _site │ ├── css │ │ ├── codemirror.css │ │ ├── main.css │ │ ├── react.css │ │ └── syntax.css │ ├── extractCode.js │ ├── index.html │ └── js │ │ ├── JSXTransformer.js │ │ ├── codemirror.js │ │ ├── es5-sham.min.js │ │ ├── es5-shim.min.js │ │ ├── examples │ │ ├── sample1.js │ │ └── sample2.js │ │ ├── html-jsx-lib.js │ │ ├── html-jsx.js │ │ ├── html5shiv.min.js │ │ ├── javascript.js │ │ ├── jsfiddle-integration.js │ │ ├── jsx-compiler.js │ │ ├── live_editor.js │ │ ├── marked.min.js │ │ ├── react-refresh-indicator.js │ │ └── react.js ├── css │ ├── codemirror.css │ ├── main.css │ ├── react.scss │ └── syntax.css ├── extractCode.js ├── index.md └── js │ ├── JSXTransformer.js │ ├── codemirror.js │ ├── es5-sham.min.js │ ├── es5-shim.min.js │ ├── examples │ ├── sample1.js │ └── sample2.js │ ├── html-jsx-lib.js │ ├── html-jsx.js │ ├── html5shiv.min.js │ ├── javascript.js │ ├── jsfiddle-integration.js │ ├── jsx-compiler.js │ ├── live_editor.js │ ├── marked.min.js │ ├── react-refresh-indicator.js │ └── react.js ├── gulpfile.js ├── lib ├── index.jsx └── index.less ├── package.json └── webpack.config.js /.eslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb", 3 | "rules": { 4 | "no-const-assign": 2 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/** 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | docs/.sass-cache 2 | docs/Gemfile.lock 3 | *.swp 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | language: node_js 3 | node_js: 4 | - "node" 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react refresh indicator 2 | 3 | [![David](https://img.shields.io/david/maoziliang/react-refresh-indicator.svg)](https://david-dm.org/maoziliang/react-refresh-indicator) 4 | [![David](https://img.shields.io/david/dev/maoziliang/react-refresh-indicator.svg)](https://david-dm.org/maoziliang/react-refresh-indicator#info=devDependencies) 5 | [![Travis branch](https://img.shields.io/travis/maoziliang/react-refresh-indicator/master.svg)](https://travis-ci.org/maoziliang/react-refresh-indicator) 6 | 7 | An indicator implement material ui style. 8 | 9 | Written in ES6. Maybe you should use this package with webpack + babel + babel-runtime. 10 | 11 | Perhaps you should overwrite `prefixed` method of this component by mixin to implement the autoprefix feature. The default behaviour will not autoprefix for css3 property name. 12 | 13 | [Docs](http://maoziliang.github.io/react-refresh-indicator/) 14 | -------------------------------------------------------------------------------- /docs/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'rake' 4 | 5 | # jekyll, which builds it all 6 | # 2.0 includes sass processing 7 | gem 'jekyll', '~>2.0' 8 | 9 | # Auto redirect pages 10 | gem 'jekyll-redirect-from' 11 | 12 | # JSON 13 | gem 'json' 14 | 15 | # For `rake watch` 16 | gem 'rb-fsevent' 17 | 18 | # For markdown header cleanup 19 | gem 'sanitize', '~>2.0' 20 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # React Documentation & Website 2 | 3 | We use [Jekyll](http://jekyllrb.com/) to build the site using ([mostly](http://zpao.com/posts/adding-line-highlights-to-markdown-code-fences/)) Markdown, and we host it by pushing HTML to [GitHub Pages](http://pages.github.com/). 4 | 5 | ## Installation 6 | 7 | If you are working on the site, you will want to install and run a local copy of it. 8 | 9 | ### Dependencies 10 | 11 | In order to use Jekyll, you will need to have Ruby installed. 12 | 13 | - [Ruby](http://www.ruby-lang.org/) (version >= 1.8.7) 14 | - [RubyGems](http://rubygems.org/) (version >= 1.3.7) 15 | - [Bundler](http://gembundler.com/) 16 | 17 | Mac OS X comes pre-installed with Ruby, but you may need to update RubyGems (via `gem update --system`). 18 | Otherwise, [RVM](https://rvm.io/) and [rbenv](https://github.com/sstephenson/rbenv) are popular ways to install Ruby. 19 | Once you have RubyGems and installed Bundler (via `gem install bundler`), use it to install the dependencies: 20 | 21 | ```sh 22 | $ cd react/docs 23 | $ bundle install # Might need sudo. 24 | $ npm install 25 | ``` 26 | 27 | ### Instructions 28 | 29 | The site requires React, so first make sure you've built the project (via `grunt`). 30 | 31 | Use Jekyll to serve the website locally (by default, at `http://localhost:4000`): 32 | 33 | ```sh 34 | $ cd react/docs 35 | $ bundle exec rake 36 | $ bundle exec jekyll serve -w 37 | $ open http://localhost:4000/react/ 38 | ``` 39 | 40 | We use [SASS](http://sass-lang.com/) (with [Bourbon](http://bourbon.io/)) for our CSS, and we use JSX to transform some of our JS. 41 | If you only want to modify the HTML or Markdown, you do not have to do anything because we package pre-compiled copies of the CSS and JS. 42 | If you want to modify the CSS or JS, use [Rake](http://rake.rubyforge.org/) to compile them: 43 | 44 | ```sh 45 | $ cd react/docs 46 | $ bundle exec rake watch # Automatically compiles as needed. 47 | # bundle exec rake Manually compile CSS and JS. 48 | # bundle exec rake js Manually compile JS, only. 49 | ``` 50 | 51 | ## Afterthoughts 52 | 53 | ### Updating `facebook.github.io/react` 54 | 55 | The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there, you can check it in. 56 | 57 | **Note:** This should only be done for new releases. You should create a tag corresponding to the release tag in the main repository. 58 | 59 | We also have a rake task that does the same thing (without creating commits). It expects the directory structure mentioned above. 60 | 61 | ```sh 62 | $ bundle exec rake release 63 | ``` 64 | 65 | ### Removing the Jekyll / Ruby Dependency 66 | 67 | In an ideal world, we would not be adding a Ruby dependency on part of our project. We would like to move towards a point where we are using React to render the website. 68 | -------------------------------------------------------------------------------- /docs/Rakefile: -------------------------------------------------------------------------------- 1 | require('rubygems') 2 | require('json') 3 | require('yaml') 4 | 5 | desc "generate js from jsx" 6 | task :js do 7 | system "../node_modules/.bin/babel _js --out-dir=js" 8 | end 9 | 10 | desc "watch js" 11 | task :watch do 12 | Process.spawn "../node_modules/.bin/babel _js --out-dir=js --watch" 13 | Process.waitall 14 | end 15 | 16 | desc "update version to match ../package.json" 17 | task :update_version do 18 | react_version = JSON.parse(File.read('../package.json'))['version'] 19 | site_config = YAML.load_file('_config.yml') 20 | if site_config['react_version'] != react_version 21 | site_config['react_version'] = react_version 22 | File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) } 23 | end 24 | end 25 | 26 | desc "update acknowledgements list" 27 | task :update_acknowledgements do 28 | authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')} 29 | # split into cols here because nobody knows how to use liquid 30 | # need to to_f because ruby will keep slice_size as int and round on its own 31 | slice_size = (authors.size / 3.to_f).ceil 32 | cols = authors.each_slice(slice_size).to_a 33 | File.open('_data/acknowledgements.yml', 'w+') { |f| f.write(cols.to_yaml) } 34 | end 35 | 36 | desc "build into ../../react-refresh-indicator-gh-pages" 37 | task :release => [:update_version, :default] do 38 | system "jekyll build -d ../../react-refresh-indicator-gh-pages" 39 | end 40 | 41 | task :default => [:js] 42 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: React 3 | description: React Refresh Indicator 4 | url: https://maoziliang.github.io/react-refresh-indicator 5 | baseurl: "/react-refresh-indicator" 6 | permalink: "/blog/:year/:month/:day/:title.html" 7 | paginate_path: "/blog/page:num/" 8 | relative_permalinks: true 9 | paginate: 5 10 | timezone: America/Los_Angeles 11 | highlighter: pygments 12 | defaults: 13 | - scope: 14 | path: '' 15 | type: post 16 | values: 17 | layout: post 18 | - scope: 19 | path: docs 20 | type: page 21 | values: 22 | layout: docs 23 | exclude: 24 | - Gemfile 25 | - Gemfile.lock 26 | - README.md 27 | - Rakefile 28 | - vendor/bundle 29 | markdown: redcarpet 30 | redcarpet: 31 | extensions: 32 | - fenced_code_blocks 33 | - footnotes 34 | sass: 35 | style: :compressed 36 | sass_dir: _css 37 | gems: 38 | - jekyll-redirect-from 39 | react_version: 1.0.0 40 | -------------------------------------------------------------------------------- /docs/_css/_solarized.scss: -------------------------------------------------------------------------------- 1 | html * { 2 | color-profile: sRGB; 3 | rendering-intent: auto; 4 | } 5 | .cm-s-solarized-light { 6 | background-color: #f8f5ec; 7 | color: #637c84; 8 | } 9 | .cm-s-solarized-light .emphasis { 10 | font-weight: bold; 11 | } 12 | .cm-s-solarized-light .dotted { 13 | border-bottom: 1px dotted #cb4b16; 14 | } 15 | .cm-s-solarized-light .CodeMirror-gutter { 16 | background-color: #eee8d5; 17 | border-right: 3px solid #eee8d5; 18 | } 19 | .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text { 20 | color: #93a1a1; 21 | } 22 | .cm-s-solarized-light .CodeMirror-cursor { 23 | border-left-color: #002b36 !important; 24 | } 25 | .cm-s-solarized-light .CodeMirror-matchingbracket { 26 | color: #002b36; 27 | background-color: #eee8d5; 28 | box-shadow: 0 0 10px #eee8d5; 29 | font-weight: bold; 30 | } 31 | .cm-s-solarized-light .CodeMirror-nonmatchingbracket { 32 | color: #002b36; 33 | background-color: #eee8d5; 34 | box-shadow: 0 0 10px #eee8d5; 35 | font-weight: bold; 36 | color: #dc322f; 37 | border-bottom: 1px dotted #cb4b16; 38 | } 39 | .cm-s-solarized-light span.cm-keyword { 40 | color: #268bd2; 41 | } 42 | .cm-s-solarized-light span.cm-atom { 43 | color: #2aa198; 44 | } 45 | .cm-s-solarized-light span.cm-number { 46 | color: #586e75; 47 | } 48 | .cm-s-solarized-light span.cm-def { 49 | color: #637c84; 50 | } 51 | .cm-s-solarized-light span.cm-variable { 52 | color: #637c84; 53 | } 54 | .cm-s-solarized-light span.cm-variable-2 { 55 | color: #b58900; 56 | } 57 | .cm-s-solarized-light span.cm-variable-3 { 58 | color: #cb4b16; 59 | } 60 | .cm-s-solarized-light span.cm-comment { 61 | color: #93a1a1; 62 | } 63 | .cm-s-solarized-light span.cm-property { 64 | color: #637c84; 65 | } 66 | .cm-s-solarized-light span.cm-operator { 67 | color: #657b83; 68 | } 69 | .cm-s-solarized-light span.cm-string { 70 | color: #36958e; 71 | } 72 | .cm-s-solarized-light span.cm-error { 73 | font-weight: bold; 74 | border-bottom: 1px dotted #cb4b16; 75 | } 76 | .cm-s-solarized-light span.cm-bracket { 77 | color: #cb4b16; 78 | } 79 | .cm-s-solarized-light span.cm-tag { 80 | color: #657b83; 81 | } 82 | .cm-s-solarized-light span.cm-attribute { 83 | color: #586e75; 84 | font-weight: bold; 85 | } 86 | .cm-s-solarized-light span.cm-meta { 87 | color: #268bd2; 88 | } 89 | .cm-s-solarized-dark { 90 | background-color: #002b36; 91 | color: #839496; 92 | } 93 | .cm-s-solarized-dark .emphasis { 94 | font-weight: bold; 95 | } 96 | .cm-s-solarized-dark .dotted { 97 | border-bottom: 1px dotted #cb4b16; 98 | } 99 | .cm-s-solarized-dark .CodeMirror-gutter { 100 | background-color: #073642; 101 | border-right: 3px solid #073642; 102 | } 103 | .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text { 104 | color: #586e75; 105 | } 106 | .cm-s-solarized-dark .CodeMirror-cursor { 107 | border-left-color: #fdf6e3 !important; 108 | } 109 | .cm-s-solarized-dark .CodeMirror-matchingbracket { 110 | color: #fdf6e3; 111 | background-color: #073642; 112 | box-shadow: 0 0 10px #073642; 113 | font-weight: bold; 114 | } 115 | .cm-s-solarized-dark .CodeMirror-nonmatchingbracket { 116 | color: #fdf6e3; 117 | background-color: #073642; 118 | box-shadow: 0 0 10px #073642; 119 | font-weight: bold; 120 | color: #dc322f; 121 | border-bottom: 1px dotted #cb4b16; 122 | } 123 | .cm-s-solarized-dark span.cm-keyword { 124 | color: #839496; 125 | font-weight: bold; 126 | } 127 | .cm-s-solarized-dark span.cm-atom { 128 | color: #2aa198; 129 | } 130 | .cm-s-solarized-dark span.cm-number { 131 | color: #93a1a1; 132 | } 133 | .cm-s-solarized-dark span.cm-def { 134 | color: #268bd2; 135 | } 136 | .cm-s-solarized-dark span.cm-variable { 137 | color: #cb4b16; 138 | } 139 | .cm-s-solarized-dark span.cm-variable-2 { 140 | color: #cb4b16; 141 | } 142 | .cm-s-solarized-dark span.cm-variable-3 { 143 | color: #cb4b16; 144 | } 145 | .cm-s-solarized-dark span.cm-comment { 146 | color: #586e75; 147 | } 148 | .cm-s-solarized-dark span.cm-property { 149 | color: #b58900; 150 | } 151 | .cm-s-solarized-dark span.cm-operator { 152 | color: #839496; 153 | } 154 | .cm-s-solarized-dark span.cm-string { 155 | color: #6c71c4; 156 | } 157 | .cm-s-solarized-dark span.cm-error { 158 | font-weight: bold; 159 | border-bottom: 1px dotted #cb4b16; 160 | } 161 | .cm-s-solarized-dark span.cm-bracket { 162 | color: #cb4b16; 163 | } 164 | .cm-s-solarized-dark span.cm-tag { 165 | color: #839496; 166 | } 167 | .cm-s-solarized-dark span.cm-attribute { 168 | color: #93a1a1; 169 | font-weight: bold; 170 | } 171 | .cm-s-solarized-dark span.cm-meta { 172 | color: #268bd2; 173 | } 174 | -------------------------------------------------------------------------------- /docs/_css/_typography.scss: -------------------------------------------------------------------------------- 1 | @import 'variables.scss'; 2 | 3 | $textColor: $mediumColor; 4 | $textColorLight: lighten($textColor, 20%); 5 | 6 | html { 7 | font-family: $helvetica; 8 | font-family: proxima-nova, $helvetica; 9 | color: $textColor; 10 | line-height: 1.28; 11 | } 12 | 13 | p { 14 | margin: 0 0 10px; 15 | } 16 | 17 | .subHeader { 18 | font-size: 21px; 19 | font-weight: 200; 20 | line-height: 30px; 21 | margin-bottom: 10px; 22 | } 23 | 24 | em { 25 | font-style: italic; 26 | } 27 | 28 | h1, 29 | h2, 30 | h3, 31 | h4, 32 | h5, 33 | h6 { 34 | margin: 10px 0; 35 | font-family: inherit; 36 | font-weight: bold; 37 | line-height: 20px; 38 | color: inherit; 39 | text-rendering: optimizelegibility; 40 | } 41 | 42 | h1 small, 43 | h2 small, 44 | h3 small, 45 | h4 small, 46 | h5 small, 47 | h6 small { 48 | font-weight: normal; 49 | color: $textColorLight 50 | } 51 | 52 | h1, 53 | h2, 54 | h3 { 55 | line-height: 40px; 56 | } 57 | 58 | h1 { 59 | font-size: 39px; 60 | } 61 | 62 | h2 { 63 | font-size: 31px; 64 | } 65 | 66 | h3 { 67 | font-size: 23px; 68 | } 69 | 70 | h4 { 71 | font-size: 17px; 72 | } 73 | 74 | h5 { 75 | font-size: 14px; 76 | } 77 | 78 | h6 { 79 | font-size: 11px; 80 | } 81 | 82 | h1 small { 83 | font-size: 24px; 84 | } 85 | 86 | h2 small { 87 | font-size: 18px; 88 | } 89 | 90 | h3 small { 91 | font-size: 16px; 92 | } 93 | 94 | h4 small { 95 | font-size: 14px; 96 | } 97 | 98 | ul, 99 | ol { 100 | margin: 0 0 10px 25px; 101 | padding: 0; 102 | } 103 | 104 | ul ul, 105 | ul ol, 106 | ol ol, 107 | ol ul { 108 | margin-bottom: 0; 109 | } 110 | 111 | li { 112 | line-height: 20px; 113 | } 114 | 115 | 116 | 117 | a { 118 | color: $linkColor; 119 | text-decoration: none; 120 | &:hover, 121 | &:focus { 122 | color: $linkInteract; 123 | text-decoration: underline; 124 | } 125 | &:focus { 126 | outline: thin dotted #333; 127 | outline: 5px auto -webkit-focus-ring-color; 128 | outline-offset: -2px; 129 | } 130 | } 131 | .center { 132 | text-align: center; 133 | } 134 | -------------------------------------------------------------------------------- /docs/_css/_variables.scss: -------------------------------------------------------------------------------- 1 | $primary: #cc7a6f; 2 | $linkColor: darken($primary, 9%); 3 | $linkInteract: darken($linkColor, 9%); 4 | $pageBg: #f9f9f9; 5 | 6 | $lightColor: #e9e9e9; 7 | $mediumestColor: #666; 8 | $mediumColor: #484848; 9 | $darkColor: #2d2d2d; 10 | $darkestColor: #222222; 11 | $blueColor: #61dafb; 12 | $orangeColor: complement($blueColor); 13 | 14 | $lightTextColor: #fafafa; 15 | $mediumTextColor: #aaa; 16 | $darkTextColor: $mediumColor; 17 | 18 | $buttonBlueTop: #77a3d2; 19 | $buttonBlueBottom: #4783c2; 20 | $buttonGreyTop: #9a9a9a; 21 | $buttonGreyBottom: #646464; 22 | 23 | -------------------------------------------------------------------------------- /docs/_css/bourbon/_bourbon-deprecated-upcoming.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // These mixins/functions are deprecated 3 | // They will be removed in the next MAJOR version release 4 | //************************************************************************// 5 | @mixin inline-block { 6 | display: inline-block; 7 | @warn "inline-block mixin is deprecated and will be removed in the next major version release"; 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | @import "settings/prefixer"; 3 | @import "settings/px-to-em"; 4 | @import "settings/asset-pipeline"; 5 | 6 | // Custom Helpers 7 | @import "helpers/convert-units"; 8 | @import "helpers/gradient-positions-parser"; 9 | @import "helpers/is-num"; 10 | @import "helpers/linear-angle-parser"; 11 | @import "helpers/linear-gradient-parser"; 12 | @import "helpers/linear-positions-parser"; 13 | @import "helpers/linear-side-corner-parser"; 14 | @import "helpers/radial-arg-parser"; 15 | @import "helpers/radial-positions-parser"; 16 | @import "helpers/radial-gradient-parser"; 17 | @import "helpers/render-gradients"; 18 | @import "helpers/shape-size-stripper"; 19 | @import "helpers/str-to-num"; 20 | 21 | // Custom Functions 22 | @import "functions/assign"; 23 | @import "functions/color-lightness"; 24 | @import "functions/flex-grid"; 25 | @import "functions/golden-ratio"; 26 | @import "functions/grid-width"; 27 | @import "functions/modular-scale"; 28 | @import "functions/px-to-em"; 29 | @import "functions/px-to-rem"; 30 | @import "functions/strip-units"; 31 | @import "functions/tint-shade"; 32 | @import "functions/transition-property-name"; 33 | @import "functions/unpack"; 34 | 35 | // CSS3 Mixins 36 | @import "css3/animation"; 37 | @import "css3/appearance"; 38 | @import "css3/backface-visibility"; 39 | @import "css3/background"; 40 | @import "css3/background-image"; 41 | @import "css3/border-image"; 42 | @import "css3/border-radius"; 43 | @import "css3/box-sizing"; 44 | @import "css3/calc"; 45 | @import "css3/columns"; 46 | @import "css3/filter"; 47 | @import "css3/flex-box"; 48 | @import "css3/font-face"; 49 | @import "css3/font-feature-settings"; 50 | @import "css3/hyphens"; 51 | @import "css3/hidpi-media-query"; 52 | @import "css3/image-rendering"; 53 | @import "css3/keyframes"; 54 | @import "css3/linear-gradient"; 55 | @import "css3/perspective"; 56 | @import "css3/radial-gradient"; 57 | @import "css3/transform"; 58 | @import "css3/transition"; 59 | @import "css3/user-select"; 60 | @import "css3/placeholder"; 61 | 62 | // Addons & other mixins 63 | @import "addons/button"; 64 | @import "addons/clearfix"; 65 | @import "addons/directional-values"; 66 | @import "addons/ellipsis"; 67 | @import "addons/font-family"; 68 | @import "addons/hide-text"; 69 | @import "addons/html5-input-types"; 70 | @import "addons/position"; 71 | @import "addons/prefixer"; 72 | @import "addons/retina-image"; 73 | @import "addons/size"; 74 | @import "addons/timing-functions"; 75 | @import "addons/triangle"; 76 | @import "addons/word-wrap"; 77 | 78 | // Soon to be deprecated Mixins 79 | @import "bourbon-deprecated-upcoming"; 80 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Modern micro clearfix provides an easy way to contain floats without adding additional markup. 2 | // 3 | // Example usage: 4 | // 5 | // // Contain all floats within .wrapper 6 | // .wrapper { 7 | // @include clearfix; 8 | // .content, 9 | // .sidebar { 10 | // float : left; 11 | // } 12 | // } 13 | 14 | @mixin clearfix { 15 | &:after { 16 | content:""; 17 | display:table; 18 | clear:both; 19 | } 20 | } 21 | 22 | // Acknowledgements 23 | // Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) 24 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_directional-values.scss: -------------------------------------------------------------------------------- 1 | // directional-property mixins are shorthands 2 | // for writing properties like the following 3 | // 4 | // @include margin(null 0 10px); 5 | // ------ 6 | // margin-right: 0; 7 | // margin-bottom: 10px; 8 | // margin-left: 0; 9 | // 10 | // - or - 11 | // 12 | // @include border-style(dotted null); 13 | // ------ 14 | // border-top-style: dotted; 15 | // border-bottom-style: dotted; 16 | // 17 | // ------ 18 | // 19 | // Note: You can also use false instead of null 20 | 21 | @function collapse-directionals($vals) { 22 | $output: null; 23 | 24 | $A: nth( $vals, 1 ); 25 | $B: if( length($vals) < 2, $A, nth($vals, 2)); 26 | $C: if( length($vals) < 3, $A, nth($vals, 3)); 27 | $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); 28 | 29 | @if $A == 0 { $A: 0 } 30 | @if $B == 0 { $B: 0 } 31 | @if $C == 0 { $C: 0 } 32 | @if $D == 0 { $D: 0 } 33 | 34 | @if $A == $B and $A == $C and $A == $D { $output: $A } 35 | @else if $A == $C and $B == $D { $output: $A $B } 36 | @else if $B == $D { $output: $A $B $C } 37 | @else { $output: $A $B $C $D } 38 | 39 | @return $output; 40 | } 41 | 42 | @function contains-falsy($list) { 43 | @each $item in $list { 44 | @if not $item { 45 | @return true; 46 | } 47 | } 48 | 49 | @return false; 50 | } 51 | 52 | @mixin directional-property($pre, $suf, $vals) { 53 | // Property Names 54 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 55 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 56 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 57 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 58 | $all: $pre + if($suf, "-#{$suf}", ""); 59 | 60 | $vals: collapse-directionals($vals); 61 | 62 | @if contains-falsy($vals) { 63 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 64 | 65 | @if length($vals) == 1 { 66 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 67 | } @else { 68 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 69 | } 70 | 71 | // prop: top/bottom right/left 72 | @if length($vals) == 2 { 73 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 74 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 75 | 76 | // prop: top right/left bottom 77 | } @else if length($vals) == 3 { 78 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 79 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 80 | 81 | // prop: top right bottom left 82 | } @else if length($vals) == 4 { 83 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 84 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 85 | } 86 | 87 | // prop: top/right/bottom/left 88 | } @else { 89 | #{$all}: $vals; 90 | } 91 | } 92 | 93 | @mixin margin($vals...) { 94 | @include directional-property(margin, false, $vals...); 95 | } 96 | 97 | @mixin padding($vals...) { 98 | @include directional-property(padding, false, $vals...); 99 | } 100 | 101 | @mixin border-style($vals...) { 102 | @include directional-property(border, style, $vals...); 103 | } 104 | 105 | @mixin border-color($vals...) { 106 | @include directional-property(border, color, $vals...); 107 | } 108 | 109 | @mixin border-width($vals...) { 110 | @include directional-property(border, width, $vals...); 111 | } 112 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin ellipsis($width: 100%) { 2 | display: inline-block; 3 | max-width: $width; 4 | overflow: hidden; 5 | text-overflow: ellipsis; 6 | white-space: nowrap; 7 | } 8 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text { 2 | overflow: hidden; 3 | 4 | &:before { 5 | content: ""; 6 | display: block; 7 | width: 0; 8 | height: 100%; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_html5-input-types.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Generate a variable ($all-text-inputs) with a list of all html5 3 | // input types that have a text-based input, excluding textarea. 4 | // http://diveintohtml5.org/forms.html 5 | //************************************************************************// 6 | $inputs-list: 'input[type="email"]', 7 | 'input[type="number"]', 8 | 'input[type="password"]', 9 | 'input[type="search"]', 10 | 'input[type="tel"]', 11 | 'input[type="text"]', 12 | 'input[type="url"]', 13 | 14 | // Webkit & Gecko may change the display of these in the future 15 | 'input[type="color"]', 16 | 'input[type="date"]', 17 | 'input[type="datetime"]', 18 | 'input[type="datetime-local"]', 19 | 'input[type="month"]', 20 | 'input[type="time"]', 21 | 'input[type="week"]'; 22 | 23 | // Bare inputs 24 | //************************************************************************// 25 | $all-text-inputs: assign-inputs($inputs-list); 26 | 27 | // Hover Pseudo-class 28 | //************************************************************************// 29 | $all-text-inputs-hover: assign-inputs($inputs-list, hover); 30 | 31 | // Focus Pseudo-class 32 | //************************************************************************// 33 | $all-text-inputs-focus: assign-inputs($inputs-list, focus); 34 | 35 | 36 | 37 | // You must use interpolation on the variable: 38 | // #{$all-text-inputs} 39 | // #{$all-text-inputs-hover} 40 | // #{$all-text-inputs-focus} 41 | 42 | // Example 43 | //************************************************************************// 44 | // #{$all-text-inputs}, textarea { 45 | // border: 1px solid red; 46 | // } 47 | 48 | 49 | 50 | //************************************************************************// 51 | // Generate a variable ($all-button-inputs) with a list of all html5 52 | // input types that have a button-based input, excluding button. 53 | //************************************************************************// 54 | $inputs-button-list: 'input[type="button"]', 55 | 'input[type="reset"]', 56 | 'input[type="submit"]'; 57 | 58 | // Bare inputs 59 | //************************************************************************// 60 | $all-button-inputs: assign-inputs($inputs-button-list); 61 | 62 | // Hover Pseudo-class 63 | //************************************************************************// 64 | $all-button-inputs-hover: assign-inputs($inputs-button-list, hover); 65 | 66 | // Focus Pseudo-class 67 | //************************************************************************// 68 | $all-button-inputs-focus: assign-inputs($inputs-button-list, focus); 69 | 70 | // Active Pseudo-class 71 | //************************************************************************// 72 | $all-button-inputs-active: assign-inputs($inputs-button-list, active); 73 | 74 | 75 | 76 | // You must use interpolation on the variable: 77 | // #{$all-button-inputs} 78 | // #{$all-button-inputs-hover} 79 | // #{$all-button-inputs-focus} 80 | // #{$all-button-inputs-active} 81 | 82 | // Example 83 | //************************************************************************// 84 | // #{$all-button-inputs}, button { 85 | // border: 1px solid red; 86 | // } 87 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @mixin position ($position: relative, $coordinates: null null null null) { 2 | 3 | @if type-of($position) == list { 4 | $coordinates: $position; 5 | $position: relative; 6 | } 7 | 8 | $coordinates: unpack($coordinates); 9 | 10 | $top: nth($coordinates, 1); 11 | $right: nth($coordinates, 2); 12 | $bottom: nth($coordinates, 3); 13 | $left: nth($coordinates, 4); 14 | 15 | position: $position; 16 | 17 | @if ($top and $top == auto) or (type-of($top) == number) { 18 | top: $top; 19 | } 20 | 21 | @if ($right and $right == auto) or (type-of($right) == number) { 22 | right: $right; 23 | } 24 | 25 | @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { 26 | bottom: $bottom; 27 | } 28 | 29 | @if ($left and $left == auto) or (type-of($left) == number) { 30 | left: $left; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | // Variables located in /settings/_prefixer.scss 5 | 6 | @mixin prefixer ($property, $value, $prefixes) { 7 | @each $prefix in $prefixes { 8 | @if $prefix == webkit { 9 | @if $prefix-for-webkit { 10 | -webkit-#{$property}: $value; 11 | } 12 | } 13 | @else if $prefix == moz { 14 | @if $prefix-for-mozilla { 15 | -moz-#{$property}: $value; 16 | } 17 | } 18 | @else if $prefix == ms { 19 | @if $prefix-for-microsoft { 20 | -ms-#{$property}: $value; 21 | } 22 | } 23 | @else if $prefix == o { 24 | @if $prefix-for-opera { 25 | -o-#{$property}: $value; 26 | } 27 | } 28 | @else if $prefix == spec { 29 | @if $prefix-for-spec { 30 | #{$property}: $value; 31 | } 32 | } 33 | @else { 34 | @warn "Unrecognized prefix: #{$prefix}"; 35 | } 36 | } 37 | } 38 | 39 | @mixin disable-prefix-for-all() { 40 | $prefix-for-webkit: false !global; 41 | $prefix-for-mozilla: false !global; 42 | $prefix-for-microsoft: false !global; 43 | $prefix-for-opera: false !global; 44 | $prefix-for-spec: false !global; 45 | } 46 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | @if $asset-pipeline { 11 | @if $retina-filename { 12 | background-image: image-url("#{$retina-filename}.#{$extension}"); 13 | } 14 | @else { 15 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 16 | } 17 | } 18 | 19 | @else { 20 | @if $retina-filename { 21 | background-image: url("#{$retina-filename}.#{$extension}"); 22 | } 23 | @else { 24 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 25 | } 26 | } 27 | 28 | background-size: $background-size; 29 | 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($size) { 2 | $height: nth($size, 1); 3 | $width: $height; 4 | 5 | @if length($size) > 1 { 6 | $height: nth($size, 2); 7 | } 8 | 9 | @if $height == auto or (type-of($height) == number and not unitless($height)) { 10 | height: $height; 11 | } 12 | 13 | @if $width == auto or (type-of($width) == number and not unitless($width)) { 14 | width: $width; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | $width: nth($size, 1); 6 | $height: nth($size, length($size)); 7 | 8 | $foreground-color: nth($color, 1); 9 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 10 | 11 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 12 | 13 | $width: $width / 2; 14 | $height: if(length($size) > 1, $height, $height/2); 15 | 16 | @if $direction == up { 17 | border-left: $width solid $background-color; 18 | border-right: $width solid $background-color; 19 | border-bottom: $height solid $foreground-color; 20 | 21 | } @else if $direction == right { 22 | border-top: $width solid $background-color; 23 | border-bottom: $width solid $background-color; 24 | border-left: $height solid $foreground-color; 25 | 26 | } @else if $direction == down { 27 | border-left: $width solid $background-color; 28 | border-right: $width solid $background-color; 29 | border-top: $height solid $foreground-color; 30 | 31 | } @else if $direction == left { 32 | border-top: $width solid $background-color; 33 | border-bottom: $width solid $background-color; 34 | border-right: $height solid $foreground-color; 35 | } 36 | } 37 | 38 | @else if ($direction == up-right) or ($direction == up-left) { 39 | border-top: $height solid $foreground-color; 40 | 41 | @if $direction == up-right { 42 | border-left: $width solid $background-color; 43 | 44 | } @else if $direction == up-left { 45 | border-right: $width solid $background-color; 46 | } 47 | } 48 | 49 | @else if ($direction == down-right) or ($direction == down-left) { 50 | border-bottom: $height solid $foreground-color; 51 | 52 | @if $direction == down-right { 53 | border-left: $width solid $background-color; 54 | 55 | } @else if $direction == down-left { 56 | border-right: $width solid $background-color; 57 | } 58 | } 59 | 60 | @else if ($direction == inset-up) { 61 | border-width: $height $width; 62 | border-style: solid; 63 | border-color: $background-color $background-color $foreground-color; 64 | } 65 | 66 | @else if ($direction == inset-down) { 67 | border-width: $height $width; 68 | border-style: solid; 69 | border-color: $foreground-color $background-color $background-color; 70 | } 71 | 72 | @else if ($direction == inset-right) { 73 | border-width: $width $height; 74 | border-style: solid; 75 | border-color: $background-color $background-color $background-color $foreground-color; 76 | } 77 | 78 | @else if ($direction == inset-left) { 79 | border-width: $width $height; 80 | border-style: solid; 81 | border-color: $background-color $foreground-color $background-color $background-color; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /docs/_css/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin word-wrap($wrap: break-word) { 2 | word-wrap: $wrap; 3 | 4 | @if $wrap == break-word { 5 | overflow-wrap: break-word; 6 | word-break: break-all; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 0, 3); 19 | $gradient-type: str-slice($background-str, 0, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 0, 3); 14 | $gradient-type: str-slice($border-str, 0, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Shorthand Border-radius mixins 3 | //************************************************************************// 4 | @mixin border-top-radius($radii) { 5 | @include prefixer(border-top-left-radius, $radii, spec); 6 | @include prefixer(border-top-right-radius, $radii, spec); 7 | } 8 | 9 | @mixin border-bottom-radius($radii) { 10 | @include prefixer(border-bottom-left-radius, $radii, spec); 11 | @include prefixer(border-bottom-right-radius, $radii, spec); 12 | } 13 | 14 | @mixin border-left-radius($radii) { 15 | @include prefixer(border-top-left-radius, $radii, spec); 16 | @include prefixer(border-bottom-left-radius, $radii, spec); 17 | } 18 | 19 | @mixin border-right-radius($radii) { 20 | @include prefixer(border-top-right-radius, $radii, spec); 21 | @include prefixer(border-bottom-right-radius, $radii, spec); 22 | } 23 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: null, $G4: null, 4 | $G5: null, $G6: null, 5 | $G7: null, $G8: null, 6 | $G9: null, $G10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 12 | $G1: nth($data, 1); 13 | $G2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $G1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 32 | $pos: if($pos, '#{$pos}, ', null); 33 | $pos-spec: if($pos, 'at #{$pos}', null); 34 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 38 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 39 | } 40 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition ($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } 34 | 35 | // Create lists for non-prefixed transition properties 36 | @else { 37 | $webkit: append($webkit, $list, comma); 38 | $moz: append($moz, $list, comma); 39 | $spec: append($spec, $list, comma); 40 | } 41 | } 42 | 43 | @if $needs-prefixes { 44 | -webkit-transition: $webkit; 45 | -moz-transition: $moz; 46 | transition: $spec; 47 | } 48 | @else { 49 | @if length($properties) >= 1 { 50 | @include prefixer(transition, $properties, webkit moz spec); 51 | } 52 | 53 | @else { 54 | $properties: all 0.15s ease-out 0s; 55 | @include prefixer(transition, $properties, webkit moz spec); 56 | } 57 | } 58 | } 59 | 60 | @mixin transition-property ($properties...) { 61 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 62 | -moz-transition-property: transition-property-names($properties, 'moz'); 63 | transition-property: transition-property-names($properties, false); 64 | } 65 | 66 | @mixin transition-duration ($times...) { 67 | @include prefixer(transition-duration, $times, webkit moz spec); 68 | } 69 | 70 | @mixin transition-timing-function ($motions...) { 71 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 72 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 73 | } 74 | 75 | @mixin transition-delay ($times...) { 76 | @include prefixer(transition-delay, $times, webkit moz spec); 77 | } 78 | -------------------------------------------------------------------------------- /docs/_css/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_assign.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list : (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_color-lightness.scss: -------------------------------------------------------------------------------- 1 | // Programatically determines whether a color is light or dark 2 | // Returns a boolean 3 | // More details here http://robots.thoughtbot.com/closer-look-color-lightness 4 | 5 | @function is-light($hex-color) { 6 | $-local-red: red(rgba($hex-color, 1.0)); 7 | $-local-green: green(rgba($hex-color, 1.0)); 8 | $-local-blue: blue(rgba($hex-color, 1.0)); 9 | 10 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 11 | 12 | @return $-local-lightness > .6; 13 | } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_flex-grid.scss: -------------------------------------------------------------------------------- 1 | // Flexible grid 2 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 5 | @return percentage($width / $container-width); 6 | } 7 | 8 | // Flexible gutter 9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($gutter / $container-width); 12 | } 13 | 14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. 15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. 16 | // 17 | // The calculation presumes that your column structure will be missing the last gutter: 18 | // 19 | // -- column -- gutter -- column -- gutter -- column 20 | // 21 | // $fg-column: 60px; // Column Width 22 | // $fg-gutter: 25px; // Gutter Width 23 | // $fg-max-columns: 12; // Total Columns For Main Container 24 | // 25 | // div { 26 | // width: flex-grid(4); // returns (315px / 995px) = 31.65829%; 27 | // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; 28 | // 29 | // p { 30 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 31 | // float: left; 32 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; 33 | // } 34 | // 35 | // blockquote { 36 | // float: left; 37 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 38 | // } 39 | // } -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_golden-ratio.scss: -------------------------------------------------------------------------------- 1 | @function golden-ratio($value, $increment) { 2 | @return modular-scale($value, $increment, $golden) 3 | } 4 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_grid-width.scss: -------------------------------------------------------------------------------- 1 | @function grid-width($n) { 2 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 3 | } 4 | 5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 6 | // 7 | // $gw-column: 100px; // Column Width 8 | // $gw-gutter: 40px; // Gutter Width 9 | // 10 | // div { 11 | // width: grid-width(4); // returns 520px; 12 | // margin-left: $gw-gutter; // returns 40px; 13 | // } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | @function modular-scale($value, $increment, $ratio) { 21 | $v1: nth($value, 1); 22 | $v2: nth($value, length($value)); 23 | $value: $v1; 24 | 25 | // scale $v2 to just above $v1 26 | @while $v2 > $v1 { 27 | $v2: ($v2 / $ratio); // will be off-by-1 28 | } 29 | @while $v2 < $v1 { 30 | $v2: ($v2 * $ratio); // will fix off-by-1 31 | } 32 | 33 | // check AFTER scaling $v2 to prevent double-counting corner-case 34 | $double-stranded: $v2 > $v1; 35 | 36 | @if $increment > 0 { 37 | @for $i from 1 through $increment { 38 | @if $double-stranded and ($v1 * $ratio) > $v2 { 39 | $value: $v2; 40 | $v2: ($v2 * $ratio); 41 | } @else { 42 | $v1: ($v1 * $ratio); 43 | $value: $v1; 44 | } 45 | } 46 | } 47 | 48 | @if $increment < 0 { 49 | // adjust $v2 to just below $v1 50 | @if $double-stranded { 51 | $v2: ($v2 / $ratio); 52 | } 53 | 54 | @for $i from $increment through -1 { 55 | @if $double-stranded and ($v1 / $ratio) < $v2 { 56 | $value: $v2; 57 | $v2: ($v2 / $ratio); 58 | } @else { 59 | $v1: ($v1 / $ratio); 60 | $value: $v1; 61 | } 62 | } 63 | } 64 | 65 | @return $value; 66 | } 67 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | // Srtips the units from a value. e.g. 12px -> 12 2 | 3 | @function strip-units($val) { 4 | @return ($val / ($val * 0 + 1)); 5 | } 6 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /docs/_css/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | // Convert shorthand to the 4-value syntax 2 | 3 | @function unpack($shorthand) { 4 | @if length($shorthand) == 1 { 5 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 6 | } 7 | @else if length($shorthand) == 2 { 8 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 9 | } 10 | @else if length($shorthand) == 3 { 11 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 12 | } 13 | @else { 14 | @return $shorthand; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; 7 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_is-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper for linear-gradient-parser 3 | //************************************************************************// 4 | @function _is-num($char) { 5 | $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; 6 | $index: index($values, $char); 7 | @return if($index, true, false); 8 | } 9 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: _is-num(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: null; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ) 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ) 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ) 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ) 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /docs/_css/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == '-' { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == '.' { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /docs/_css/bourbon/settings/_asset-pipeline.scss: -------------------------------------------------------------------------------- 1 | $asset-pipeline: false !default; 2 | -------------------------------------------------------------------------------- /docs/_css/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | // Variable settings for /addons/prefixer.scss 2 | $prefix-for-webkit: true !default; 3 | $prefix-for-mozilla: true !default; 4 | $prefix-for-microsoft: true !default; 5 | $prefix-for-opera: true !default; 6 | $prefix-for-spec: true !default; // required for keyframe mixin 7 | -------------------------------------------------------------------------------- /docs/_css/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /docs/_js/examples/.eslintrc: -------------------------------------------------------------------------------- 1 | --- 2 | rules: 3 | block-scoped-var: 0 4 | no-undef: 0 5 | react/react-in-jsx-scope: 0 6 | react/jsx-no-undef: 0 7 | -------------------------------------------------------------------------------- /docs/_js/examples/sample1.js: -------------------------------------------------------------------------------- 1 | var SAMPLE1_COMPONENT = ` 2 | var Sample1 = React.createClass({ 3 | render: function() { 4 | return ( 5 |
9 | 10 |
11 | ); 12 | } 13 | }); 14 | 15 | React.render(, mountNode); 16 | `; 17 | 18 | React.render( 19 | , 20 | document.getElementById('sample1') 21 | ); 22 | 23 | // The big indicator in top of the page. 24 | var percentage = 0; 25 | function renderIndicator() { 26 | var status = percentage === 100 ? "loading" : "ready"; 27 | percentage = Math.min(100, percentage + 2); 28 | React.render( 29 | , 30 | document.getElementById("indicator") 31 | ); 32 | if (status !== "loading") { 33 | setTimeout(renderIndicator, 16); 34 | } 35 | } 36 | setTimeout(renderIndicator, 800); 37 | -------------------------------------------------------------------------------- /docs/_js/examples/sample2.js: -------------------------------------------------------------------------------- 1 | var SAMPLE2_COMPONENT = ` 2 | var Sample2 = React.createClass({ 3 | getInitialState: function() { 4 | this._indicatorSize = 40; 5 | return { 6 | indicatorPercentage: 0, 7 | indicatorY: -this._indicatorSize, 8 | indicatorStatus: "hide", 9 | }; 10 | }, 11 | render: function () { 12 | return ( 13 |
25 | 32 |
33 | ); 34 | }, 35 | _handleMouseDown: function(e) { 36 | this._mouseDownY = e.pageY; 37 | this._maybePull = true; 38 | }, 39 | 40 | _handleMouseMove: function(e) { 41 | if (!this._maybePull) return; 42 | 43 | var currY = e.pageY; 44 | var offsetY = currY - this._mouseDownY; 45 | if (offsetY > 0) { 46 | offsetY = Math.min(offsetY, 100); 47 | var percentage = offsetY * 100 / 100; 48 | this.setState({ 49 | indicatorPercentage: percentage, 50 | indicatorY: offsetY - this._indicatorSize, 51 | indicatorStatus: "ready", 52 | }); 53 | if (percentage === 100) { 54 | this._pulling = true; 55 | } else { 56 | this._pulling = false; 57 | } 58 | } 59 | }, 60 | 61 | _handleMouseUp: function(e) { 62 | this._maybePull = false; 63 | 64 | if (this._pulling) { 65 | this.setState({ 66 | indicatorStatus: "loading", 67 | }); 68 | setTimeout(function(me) { 69 | me.setState({ 70 | indicatorStatus: "hide", 71 | indicatorY: -me._indicatorSize, 72 | }); 73 | }, 5000, this); 74 | } else { 75 | this.setState({ 76 | indicatorStatus: "hide", 77 | indicatorY: -this._indicatorSize, 78 | }); 79 | } 80 | } 81 | }); 82 | 83 | React.render(, mountNode); 84 | `; 85 | 86 | React.render( 87 | , 88 | document.getElementById('sample2') 89 | ); 90 | -------------------------------------------------------------------------------- /docs/_js/html-jsx-lib.js: -------------------------------------------------------------------------------- 1 | // Ideally it would be nice to just redirect, but Github Pages is very basic and 2 | // lacks that functionality. 3 | console.warn( 4 | 'html-jsx-lib.js has moved to http://reactjs.github.io/react-magic/' + 5 | 'htmltojsx.min.js. If using React-Magic, you are no longer required to ' + 6 | 'link to this file. Please delete its 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | {% if page.id == 'home' %} 34 |
35 |
36 |
RefreshIndicator
37 |
38 | {{ page.title }} 39 |
40 |
41 |
42 |
43 | {% endif %} 44 | 45 | {{ content }} 46 |
47 |
48 | 49 | 53 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /docs/_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | {{ content }} 7 |
8 | -------------------------------------------------------------------------------- /docs/_plugins/header_links.rb: -------------------------------------------------------------------------------- 1 | require 'redcarpet' 2 | require 'sanitize' 3 | 4 | # Simple converter that is probably better than RedCarpet's built in TOC id 5 | # generator (which ends up with things lik id="toc_1"... terrible). 6 | 7 | class Redcarpet::Render::HTML 8 | def header(title, level) 9 | clean_title = Sanitize.clean(title) 10 | .downcase 11 | .gsub(/\s+/, "-") 12 | .gsub(/[^A-Za-z0-9\-_.]/, "") 13 | 14 | return "#{title} #" 15 | end 16 | end 17 | 18 | -------------------------------------------------------------------------------- /docs/_plugins/highlight_lines.rb: -------------------------------------------------------------------------------- 1 | # Replace Jekyll's handling of the Redcarpet code_block (which already adds 2 | # support for highlighting, but needs support for the very non-standard 3 | # "code fences with line highlights" extension). 4 | # Since this is currently depending on Redcarpet to cooperate, we are going to 5 | # be naive, and only allow line highlighting when a language is specified. If 6 | # you don't want any syntax highlighting but want to highlight lines, then you 7 | # need to specify text as your language, like: 8 | # ```text{4} 9 | 10 | 11 | module Jekyll 12 | module Converters 13 | class Markdown 14 | class RedcarpetParser 15 | module WithPygments 16 | def block_code(code, lang) 17 | require 'pygments' 18 | lang_parts = lang && lang.split('{') 19 | lang = lang_parts && !lang_parts[0].empty? && lang_parts[0] || 'text' 20 | hl_lines = '' 21 | if lang_parts && lang_parts.size >= 2 22 | hl_lines = lang_parts[1].gsub(/[{}]/, '').split(',').map do |ln| 23 | if matches = /(\d+)-(\d+)/.match(ln) 24 | ln = Range.new(matches[1], matches[2]).to_a.join(' ') 25 | end 26 | ln 27 | end.join(' ') 28 | end 29 | output = add_code_tags( 30 | Pygments.highlight(code, :lexer => lang, 31 | :options => { :encoding => 'utf-8', :hl_lines => hl_lines }), 32 | lang 33 | ) 34 | end 35 | end 36 | end 37 | end 38 | end 39 | end 40 | -------------------------------------------------------------------------------- /docs/_plugins/sidebar_item.rb: -------------------------------------------------------------------------------- 1 | module Jekyll 2 | module SidebarItemFilter 3 | def sidebar_item_link(item) 4 | pageID = @context.registers[:page]["id"] 5 | itemID = item["id"] 6 | href = item["href"] || "/react/docs/#{itemID}.html" 7 | className = pageID == itemID ? ' class="active"' : '' 8 | 9 | return "#{item["title"]}" 10 | end 11 | end 12 | end 13 | 14 | Liquid::Template.register_filter(Jekyll::SidebarItemFilter) 15 | -------------------------------------------------------------------------------- /docs/_site/css/codemirror.css: -------------------------------------------------------------------------------- 1 | /* BASICS */ 2 | 3 | .CodeMirror { 4 | /* Set height, width, borders, and global font properties here */ 5 | font-family: monospace; 6 | } 7 | .CodeMirror-scroll { 8 | /* Set scrolling behaviour here */ 9 | overflow: auto; 10 | } 11 | 12 | /* PADDING */ 13 | 14 | .CodeMirror-lines { 15 | padding: 14px 0; /* Vertical padding around content */ 16 | } 17 | .CodeMirror pre { 18 | padding: 0 14px; /* Horizontal padding of content */ 19 | } 20 | 21 | .CodeMirror-scrollbar-filler { 22 | background-color: white; /* The little square between H and V scrollbars */ 23 | } 24 | 25 | /* GUTTER */ 26 | 27 | .CodeMirror-gutters { 28 | border-right: 1px solid #ddd; 29 | background-color: #f7f7f7; 30 | } 31 | .CodeMirror-linenumbers {} 32 | .CodeMirror-linenumber { 33 | padding: 0 3px 0 5px; 34 | min-width: 20px; 35 | text-align: right; 36 | color: #999; 37 | } 38 | 39 | /* CURSOR */ 40 | 41 | .CodeMirror div.CodeMirror-cursor { 42 | border-left: 1px solid black; 43 | } 44 | /* Shown when moving in bi-directional text */ 45 | .CodeMirror div.CodeMirror-secondarycursor { 46 | border-left: 1px solid silver; 47 | } 48 | .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { 49 | width: auto; 50 | border: 0; 51 | background: transparent; 52 | background: rgba(0, 200, 0, .4); 53 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800); 54 | } 55 | /* Kludge to turn off filter in ie9+, which also accepts rgba */ 56 | .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor:not(#nonsense_id) { 57 | filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 58 | } 59 | /* Can style cursor different in overwrite (non-insert) mode */ 60 | .CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {} 61 | 62 | /* DEFAULT THEME */ 63 | 64 | .cm-s-default .cm-keyword {color: #708;} 65 | .cm-s-default .cm-atom {color: #219;} 66 | .cm-s-default .cm-number {color: #164;} 67 | .cm-s-default .cm-def {color: #00f;} 68 | .cm-s-default .cm-variable {color: black;} 69 | .cm-s-default .cm-variable-2 {color: #05a;} 70 | .cm-s-default .cm-variable-3 {color: #085;} 71 | .cm-s-default .cm-property {color: black;} 72 | .cm-s-default .cm-operator {color: black;} 73 | .cm-s-default .cm-comment {color: #a50;} 74 | .cm-s-default .cm-string {color: #a11;} 75 | .cm-s-default .cm-string-2 {color: #f50;} 76 | .cm-s-default .cm-meta {color: #555;} 77 | .cm-s-default .cm-error {color: #f00;} 78 | .cm-s-default .cm-qualifier {color: #555;} 79 | .cm-s-default .cm-builtin {color: #30a;} 80 | .cm-s-default .cm-bracket {color: #997;} 81 | .cm-s-default .cm-tag {color: #170;} 82 | .cm-s-default .cm-attribute {color: #00c;} 83 | .cm-s-default .cm-header {color: blue;} 84 | .cm-s-default .cm-quote {color: #090;} 85 | .cm-s-default .cm-hr {color: #999;} 86 | .cm-s-default .cm-link {color: #00c;} 87 | 88 | .cm-negative {color: #d44;} 89 | .cm-positive {color: #292;} 90 | .cm-header, .cm-strong {font-weight: bold;} 91 | .cm-em {font-style: italic;} 92 | .cm-emstrong {font-style: italic; font-weight: bold;} 93 | .cm-link {text-decoration: underline;} 94 | 95 | .cm-invalidchar {color: #f00;} 96 | 97 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} 98 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} 99 | 100 | /* STOP */ 101 | 102 | /* The rest of this file contains styles related to the mechanics of 103 | the editor. You probably shouldn't touch them. */ 104 | 105 | .CodeMirror { 106 | line-height: 1; 107 | position: relative; 108 | overflow: hidden; 109 | } 110 | 111 | .CodeMirror-scroll { 112 | /* 30px is the magic margin used to hide the element's real scrollbars */ 113 | /* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */ 114 | margin-bottom: -30px; margin-right: -30px; 115 | padding-bottom: 30px; padding-right: 30px; 116 | height: 100%; 117 | outline: none; /* Prevent dragging from highlighting the element */ 118 | position: relative; 119 | } 120 | .CodeMirror-sizer { 121 | position: relative; 122 | } 123 | 124 | /* The fake, visible scrollbars. Used to force redraw during scrolling 125 | before actuall scrolling happens, thus preventing shaking and 126 | flickering artifacts. */ 127 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler { 128 | position: absolute; 129 | z-index: 6; 130 | display: none; 131 | } 132 | .CodeMirror-vscrollbar { 133 | right: 0; top: 0; 134 | overflow-x: hidden; 135 | overflow-y: scroll; 136 | } 137 | .CodeMirror-hscrollbar { 138 | bottom: 0; left: 0; 139 | overflow-y: hidden; 140 | overflow-x: scroll; 141 | } 142 | .CodeMirror-scrollbar-filler { 143 | right: 0; bottom: 0; 144 | z-index: 6; 145 | } 146 | 147 | .CodeMirror-gutters { 148 | position: absolute; left: 0; top: 0; 149 | height: 100%; 150 | z-index: 3; 151 | } 152 | .CodeMirror-gutter { 153 | height: 100%; 154 | display: inline-block; 155 | /* Hack to make IE7 behave */ 156 | *zoom:1; 157 | *display:inline; 158 | } 159 | .CodeMirror-gutter-elt { 160 | position: absolute; 161 | cursor: default; 162 | z-index: 4; 163 | } 164 | 165 | .CodeMirror-lines { 166 | cursor: text; 167 | } 168 | .CodeMirror pre { 169 | /* Reset some styles that the rest of the page might have set */ 170 | -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0; 171 | border-width: 0; 172 | background: transparent; 173 | font-family: inherit; 174 | font-size: inherit; 175 | margin: 0; 176 | white-space: pre; 177 | word-wrap: normal; 178 | line-height: inherit; 179 | color: inherit; 180 | z-index: 2; 181 | position: relative; 182 | overflow: visible; 183 | } 184 | .CodeMirror-wrap pre { 185 | word-wrap: break-word; 186 | white-space: pre-wrap; 187 | word-break: normal; 188 | } 189 | .CodeMirror-linebackground { 190 | position: absolute; 191 | left: 0; right: 0; top: 0; bottom: 0; 192 | z-index: 0; 193 | } 194 | 195 | .CodeMirror-linewidget { 196 | position: relative; 197 | z-index: 2; 198 | overflow: auto; 199 | } 200 | 201 | .CodeMirror-wrap .CodeMirror-scroll { 202 | overflow-x: hidden; 203 | } 204 | 205 | .CodeMirror-measure { 206 | position: absolute; 207 | width: 100%; height: 0px; 208 | overflow: hidden; 209 | visibility: hidden; 210 | } 211 | .CodeMirror-measure pre { position: static; } 212 | 213 | .CodeMirror div.CodeMirror-cursor { 214 | position: absolute; 215 | visibility: hidden; 216 | border-right: none; 217 | width: 0; 218 | } 219 | .CodeMirror-focused div.CodeMirror-cursor { 220 | visibility: visible; 221 | } 222 | 223 | .CodeMirror-selected { background: #d9d9d9; } 224 | .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } 225 | 226 | .cm-searching { 227 | background: #ffa; 228 | background: rgba(255, 255, 0, .4); 229 | } 230 | 231 | /* IE7 hack to prevent it from returning funny offsetTops on the spans */ 232 | .CodeMirror span { *vertical-align: text-bottom; } 233 | 234 | @media print { 235 | /* Hide the cursor when printing */ 236 | .CodeMirror div.CodeMirror-cursor { 237 | visibility: hidden; 238 | } 239 | } 240 | -------------------------------------------------------------------------------- /docs/_site/css/main.css: -------------------------------------------------------------------------------- 1 | /*****************************************************************************/ 2 | /* 3 | /* Common 4 | /* 5 | /*****************************************************************************/ 6 | 7 | /* Global Reset */ 8 | * { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | html, body { height: 100%; } 14 | 15 | body { 16 | background-color: #FFF; 17 | font: 13.34px Helvetica, Arial, sans-serif; 18 | font-size: small; 19 | text-align: center; 20 | } 21 | 22 | h1, h2, h3, h4, h5, h6 { 23 | font-size: 100%; } 24 | 25 | h1 { margin-bottom: 1em; } 26 | p { margin: 1em 0; } 27 | 28 | a { color: #00a; } 29 | a:hover { color: #000; } 30 | a:visited { color: #a0a; } 31 | 32 | table { 33 | font-size: inherit; 34 | font: 100%; 35 | } 36 | 37 | /*****************************************************************************/ 38 | /* 39 | /* Home 40 | /* 41 | /*****************************************************************************/ 42 | ul.posts { 43 | list-style-type: none; 44 | margin-bottom: 2em; 45 | } 46 | 47 | ul.posts li { 48 | line-height: 1.75em; 49 | } 50 | 51 | ul.posts span { 52 | color: #aaa; 53 | font-family: Monaco, "Courier New", monospace; 54 | font-size: 80%; 55 | } 56 | 57 | /*****************************************************************************/ 58 | /* 59 | /* Site 60 | /* 61 | /*****************************************************************************/ 62 | 63 | .site { 64 | font-size: 115%; 65 | text-align: justify; 66 | width: 42em; 67 | margin: 3em auto 2em; 68 | line-height: 1.5em; 69 | } 70 | 71 | .site .header a { 72 | font-weight: bold; 73 | text-decoration: none; 74 | } 75 | 76 | .site .header h1.title { 77 | display: inline-block; 78 | margin-bottom: 2em; 79 | } 80 | 81 | .site .header h1.title a { 82 | color: #a00; 83 | } 84 | 85 | .site .header h1.title a:hover { 86 | color: #000; 87 | } 88 | 89 | .site .header a.extra { 90 | color: #aaa; 91 | margin-left: 1em; 92 | } 93 | 94 | .site .header a.extra:hover { 95 | color: #000; 96 | } 97 | 98 | .site .meta { 99 | color: #aaa; 100 | } 101 | 102 | .site .footer { 103 | font-size: 80%; 104 | color: #666; 105 | border-top: 4px solid #eee; 106 | margin-top: 2em; 107 | overflow: hidden; 108 | } 109 | 110 | .site .footer .contact { 111 | float: left; 112 | margin-right: 3em; 113 | } 114 | 115 | .site .footer .contact a { 116 | color: #8085C1; 117 | } 118 | 119 | .site .footer .rss { 120 | margin-top: 1.1em; 121 | margin-right: -.2em; 122 | float: right; 123 | } 124 | 125 | .site .footer .rss img { 126 | border: 0; 127 | } 128 | 129 | /*****************************************************************************/ 130 | /* 131 | /* Posts 132 | /* 133 | /*****************************************************************************/ 134 | 135 | /* standard */ 136 | #post pre { 137 | border: 1px solid #ddd; 138 | background-color: #eef; 139 | padding: 0 .4em; 140 | } 141 | 142 | #post ul, #post ol { 143 | margin-left: 1.35em; 144 | } 145 | 146 | #post code { 147 | border: 1px solid #ddd; 148 | background-color: #eef; 149 | padding: 0 .2em; 150 | } 151 | 152 | #post pre code { 153 | border: none; 154 | } 155 | 156 | /* terminal */ 157 | #post pre.terminal { 158 | border: 1px solid #000; 159 | background-color: #333; 160 | color: #FFF; 161 | } 162 | 163 | #post pre.terminal code { 164 | background-color: #333; 165 | } -------------------------------------------------------------------------------- /docs/_site/css/syntax.css: -------------------------------------------------------------------------------- 1 | .highlight pre code { 2 | color: #637c84; 3 | } 4 | 5 | .highlight { 6 | color: #333333; 7 | background: #f8f5ec; 8 | } 9 | 10 | .highlight .c { 11 | color: #93a1a1; 12 | } 13 | 14 | 15 | .highlight .g { 16 | color: #637c84; 17 | } 18 | 19 | /* Generic */ 20 | 21 | .highlight .k { 22 | color: #859900; 23 | } 24 | 25 | /* Keyword */ 26 | 27 | .highlight .l { 28 | color: #637c84; 29 | } 30 | 31 | /* Literal */ 32 | 33 | .highlight .n { 34 | color: #637c84; 35 | } 36 | 37 | /* Name */ 38 | 39 | .highlight .o { 40 | color: #859900; 41 | } 42 | 43 | /* Operator */ 44 | 45 | .highlight .x { 46 | color: #cc7a6f; 47 | } 48 | 49 | /* Other */ 50 | 51 | .highlight .p { 52 | color: #637c84; 53 | } 54 | 55 | /* Punctuation */ 56 | 57 | .highlight .cm { 58 | color: #93a1a1; 59 | } 60 | 61 | /* Comment.Multiline */ 62 | 63 | .highlight .cp { 64 | color: #859900; 65 | } 66 | 67 | /* Comment.Preproc */ 68 | 69 | .highlight .c1 { 70 | color: #93a1a1; 71 | } 72 | 73 | /* Comment.Single */ 74 | 75 | .highlight .cs { 76 | color: #859900; 77 | } 78 | 79 | /* Comment.Special */ 80 | 81 | .highlight .gd { 82 | color: #36958e; 83 | } 84 | 85 | /* Generic.Deleted */ 86 | 87 | .highlight .ge { 88 | font-style: italic; 89 | color: #637c84; 90 | } 91 | 92 | /* Generic.Emph */ 93 | 94 | .highlight .gr { 95 | color: #dc322f; 96 | } 97 | 98 | /* Generic.Error */ 99 | 100 | .highlight .gh { 101 | color: #cc7a6f; 102 | } 103 | 104 | /* Generic.Heading */ 105 | 106 | .highlight .gi { 107 | color: #859900; 108 | } 109 | 110 | /* Generic.Inserted */ 111 | 112 | .highlight .go { 113 | color: #637c84; 114 | } 115 | 116 | /* Generic.Output */ 117 | 118 | .highlight .gp { 119 | color: #637c84; 120 | } 121 | 122 | /* Generic.Prompt */ 123 | 124 | .highlight .gs { 125 | font-weight: bold; 126 | color: #637c84; 127 | } 128 | 129 | /* Generic.Strong */ 130 | 131 | .highlight .gu { 132 | color: #cc7a6f; 133 | } 134 | 135 | /* Generic.Subheading */ 136 | 137 | .highlight .gt { 138 | color: #637c84; 139 | } 140 | 141 | /* Generic.Traceback */ 142 | 143 | .highlight .kc { 144 | color: #cc7a6f; 145 | } 146 | 147 | /* Keyword.Constant */ 148 | 149 | .highlight .kd { 150 | color: #268bd2; 151 | } 152 | 153 | /* Keyword.Declaration */ 154 | 155 | .highlight .kn { 156 | color: #859900; 157 | } 158 | 159 | /* Keyword.Namespace */ 160 | 161 | .highlight .kp { 162 | color: #859900; 163 | } 164 | 165 | /* Keyword.Pseudo */ 166 | 167 | .highlight .kr { 168 | color: #268bd2; 169 | } 170 | 171 | /* Keyword.Reserved */ 172 | 173 | .highlight .kt { 174 | color: #dc322f; 175 | } 176 | 177 | /* Keyword.Type */ 178 | 179 | .highlight .ld { 180 | color: #637c84; 181 | } 182 | 183 | /* Literal.Date */ 184 | 185 | .highlight .m { 186 | color: #36958e; 187 | } 188 | 189 | /* Literal.Number */ 190 | 191 | .highlight .s { 192 | color: #36958e; 193 | } 194 | 195 | /* Literal.String */ 196 | 197 | .highlight .na { 198 | color: #637c84; 199 | } 200 | 201 | /* Name.Attribute */ 202 | 203 | .highlight .nb { 204 | color: #b58900; 205 | } 206 | 207 | /* Name.Builtin */ 208 | 209 | .highlight .nc { 210 | color: #268bd2; 211 | } 212 | 213 | /* Name.Class */ 214 | 215 | .highlight .no { 216 | color: #cc7a6f; 217 | } 218 | 219 | /* Name.Constant */ 220 | 221 | .highlight .nd { 222 | color: #268bd2; 223 | } 224 | 225 | /* Name.Decorator */ 226 | 227 | .highlight .ni { 228 | color: #cc7a6f; 229 | } 230 | 231 | /* Name.Entity */ 232 | 233 | .highlight .ne { 234 | color: #cc7a6f; 235 | } 236 | 237 | /* Name.Exception */ 238 | 239 | .highlight .nf { 240 | color: #268bd2; 241 | } 242 | 243 | /* Name.Function */ 244 | 245 | .highlight .nl { 246 | color: #637c84; 247 | } 248 | 249 | /* Name.Label */ 250 | 251 | .highlight .nn { 252 | color: #637c84; 253 | } 254 | 255 | /* Name.Namespace */ 256 | 257 | .highlight .nx { 258 | color: #637c84; 259 | } 260 | 261 | /* Name.Other */ 262 | 263 | .highlight .py { 264 | color: #637c84; 265 | } 266 | 267 | /* Name.Property */ 268 | 269 | .highlight .nt { 270 | color: #268bd2; 271 | } 272 | 273 | /* Name.Tag */ 274 | 275 | .highlight .nv { 276 | color: #268bd2; 277 | } 278 | 279 | /* Name.Variable */ 280 | 281 | .highlight .ow { 282 | color: #859900; 283 | } 284 | 285 | /* Operator.Word */ 286 | 287 | .highlight .w { 288 | color: #637c84; 289 | } 290 | 291 | /* Text.Whitespace */ 292 | 293 | .highlight .mf { 294 | color: #36958e; 295 | } 296 | 297 | /* Literal.Number.Float */ 298 | 299 | .highlight .mh { 300 | color: #36958e; 301 | } 302 | 303 | /* Literal.Number.Hex */ 304 | 305 | .highlight .mi { 306 | color: #36958e; 307 | } 308 | 309 | /* Literal.Number.Integer */ 310 | 311 | .highlight .mo { 312 | color: #36958e; 313 | } 314 | 315 | /* Literal.Number.Oct */ 316 | 317 | .highlight .sb { 318 | color: #93a1a1; 319 | } 320 | 321 | /* Literal.String.Backtick */ 322 | 323 | .highlight .sc { 324 | color: #36958e; 325 | } 326 | 327 | /* Literal.String.Char */ 328 | 329 | .highlight .sd { 330 | color: #637c84; 331 | } 332 | 333 | /* Literal.String.Doc */ 334 | 335 | .highlight .s2 { 336 | color: #36958e; 337 | } 338 | 339 | /* Literal.String.Double */ 340 | 341 | .highlight .se { 342 | color: #cc7a6f; 343 | } 344 | 345 | /* Literal.String.Escape */ 346 | 347 | .highlight .sh { 348 | color: #637c84; 349 | } 350 | 351 | /* Literal.String.Heredoc */ 352 | 353 | .highlight .si { 354 | color: #36958e; 355 | } 356 | 357 | /* Literal.String.Interpol */ 358 | 359 | .highlight .sx { 360 | color: #36958e; 361 | } 362 | 363 | /* Literal.String.Other */ 364 | 365 | .highlight .sr { 366 | color: #dc322f; 367 | } 368 | 369 | /* Literal.String.Regex */ 370 | 371 | .highlight .s1 { 372 | color: #36958e; 373 | } 374 | 375 | /* Literal.String.Single */ 376 | 377 | .highlight .ss { 378 | color: #36958e; 379 | } 380 | 381 | /* Literal.String.Symbol */ 382 | 383 | .highlight .bp { 384 | color: #268bd2; 385 | } 386 | 387 | /* Name.Builtin.Pseudo */ 388 | 389 | .highlight .vc { 390 | color: #268bd2; 391 | } 392 | 393 | /* Name.Variable.Class */ 394 | 395 | .highlight .vg { 396 | color: #268bd2; 397 | } 398 | 399 | /* Name.Variable.Global */ 400 | 401 | .highlight .vi { 402 | color: #268bd2; 403 | } 404 | 405 | /* Name.Variable.Instance */ 406 | 407 | .highlight .il { 408 | color: #36958e; 409 | } 410 | -------------------------------------------------------------------------------- /docs/_site/extractCode.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var argv = require('optimist').argv; 4 | var fs = require('fs'); 5 | 6 | var CODE_SAMPLE = /```[\S]+\s*[\s\S]*?```/g; 7 | var PARTS = /```[\S]+\s*\/\/\s+(.+?)\n([\s\S]*?)```/; 8 | 9 | function truncate(s, n) { 10 | n = n || 256; 11 | if (s.length < n) { 12 | return s; 13 | } 14 | return s.substring(0, n) + '...'; 15 | } 16 | 17 | function main(dest, filenames) { 18 | if (!dest) { 19 | throw new Error('no dest provided'); 20 | } 21 | filenames.map(function(filename) { 22 | var content = fs.readFileSync(filename).toString('utf8'); 23 | var codeSamples = content.match(CODE_SAMPLE); 24 | 25 | codeSamples.map(function(codeSample) { 26 | // Do a little jank preprocessing 27 | codeSample = codeSample.replace('', ''); 28 | var extracted = codeSample.match(PARTS); 29 | if (!extracted) { 30 | throw new Error('Code sample did not match correct format in ' + filename + ': ' + truncate(codeSample)); 31 | } 32 | var codeSampleFilename = extracted[1]; 33 | var codeSampleContent = extracted[2].replace(/\*\*/g, ''); 34 | fs.writeFileSync(argv.dest + '/' + codeSampleFilename, codeSampleContent); 35 | }); 36 | }); 37 | } 38 | 39 | main(argv.dest, argv._); 40 | -------------------------------------------------------------------------------- /docs/_site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Refresh indicator in material design | React 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 |
35 |
36 |
RefreshIndicator
37 |
38 | Refresh indicator in material design 39 |
40 |
41 |
42 |
43 | 44 | 45 |
46 |

Star 47 |

48 | 49 |

David 50 | David 51 | Travis branch

52 |

Usage #

53 |

This package is written in ES6. Maybe you should use this package with webpack + babel + babel-runtime.

54 | 55 |

Perhaps you should overwrite prefixed method of this component by mixin to implement the autoprefix feature. The default behaviour will not autoprefix for css3 property name.

56 | 
$ npm install react-refresh-indicator --save
 57 | 
RefreshIndicator.propsType = {
 58 |   // size in pixel
 59 |   size: React.PropTypes.number,
 60 |   // percentage is 100 always means the user comfirm to reload.
 61 |   percentage: React.PropTypes.number,
 62 |   // RefreshIndicator position is absolute. Please give a correct positioned container.
 63 |   left: React.PropTypes.number.isRequired,
 64 |   top: React.PropTypes.number.isRequired,
 65 |   // status is an enum. It can be "ready" "loading" or "hide"
 66 |   // ready: This phase give user a chance to confirm to fetch data. Display upon the percentage prop.
 67 |   // loading: This means data fetch has began. Display a spinning animated arc.
 68 |   // hide: Finished and hide to specified left and top with animation.
 69 |   status: React.PropTypes.oneOf(["ready", "loading", "hide"]).isRequired,
 70 | };
 71 | 
 72 | RefreshIndicator.defaultProps = {
 73 |   size: 60,
 74 |   percentage: 0,
 75 | };
 76 |

Examples #

77 |
78 |
79 |
80 |

A static state indicator

81 |

82 | Render RefreshIndicator directly. You can modify the props of the component to see the change. 83 |

84 |

85 | JSX is optional and not required to use React. Try 86 | clicking on "Compiled JS" to see the raw JavaScript code produced by 87 | the JSX compiler. 88 |

89 |
90 |
91 |
92 |

A complete and complex example

93 |

94 | You can press down your mouse within the right side box. Then move down. And then release. That's all. 95 |

96 |
97 |
98 |
99 | 100 | 101 |
102 | 103 |
104 | 105 |
106 |
107 | 108 | 112 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /docs/_site/js/es5-sham.min.js: -------------------------------------------------------------------------------- 1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5-sham",definition)}else{definition()}})(function(){var call=Function.prototype.call;var prototypeOfObject=Object.prototype;var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if(!Object.getPrototypeOf){Object.getPrototypeOf=function getPrototypeOf(object){return object.__proto__||(object.constructor?object.constructor.prototype:prototypeOfObject)}}function doesGetOwnPropertyDescriptorWork(object){try{object.sentinel=0;return Object.getOwnPropertyDescriptor(object,"sentinel").value===0}catch(exception){}}if(Object.defineProperty){var getOwnPropertyDescriptorWorksOnObject=doesGetOwnPropertyDescriptorWork({});var getOwnPropertyDescriptorWorksOnDom=typeof document=="undefined"||doesGetOwnPropertyDescriptorWork(document.createElement("div"));if(!getOwnPropertyDescriptorWorksOnDom||!getOwnPropertyDescriptorWorksOnObject){var getOwnPropertyDescriptorFallback=Object.getOwnPropertyDescriptor}}if(!Object.getOwnPropertyDescriptor||getOwnPropertyDescriptorFallback){var ERR_NON_OBJECT="Object.getOwnPropertyDescriptor called on a non-object: ";Object.getOwnPropertyDescriptor=function getOwnPropertyDescriptor(object,property){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT+object)}if(getOwnPropertyDescriptorFallback){try{return getOwnPropertyDescriptorFallback.call(Object,object,property)}catch(exception){}}if(!owns(object,property)){return}var descriptor={enumerable:true,configurable:true};if(supportsAccessors){var prototype=object.__proto__;object.__proto__=prototypeOfObject;var getter=lookupGetter(object,property);var setter=lookupSetter(object,property);object.__proto__=prototype;if(getter||setter){if(getter){descriptor.get=getter}if(setter){descriptor.set=setter}return descriptor}}descriptor.value=object[property];descriptor.writable=true;return descriptor}}if(!Object.getOwnPropertyNames){Object.getOwnPropertyNames=function getOwnPropertyNames(object){return Object.keys(object)}}if(!Object.create){var createEmpty;var supportsProto=Object.prototype.__proto__===null;if(supportsProto||typeof document=="undefined"){createEmpty=function(){return{__proto__:null}}}else{createEmpty=function(){var iframe=document.createElement("iframe");var parent=document.body||document.documentElement;iframe.style.display="none";parent.appendChild(iframe);iframe.src="javascript:";var empty=iframe.contentWindow.Object.prototype;parent.removeChild(iframe);iframe=null;delete empty.constructor;delete empty.hasOwnProperty;delete empty.propertyIsEnumerable;delete empty.isPrototypeOf;delete empty.toLocaleString;delete empty.toString;delete empty.valueOf;empty.__proto__=null;function Empty(){}Empty.prototype=empty;createEmpty=function(){return new Empty};return new Empty}}Object.create=function create(prototype,properties){var object;function Type(){}if(prototype===null){object=createEmpty()}else{if(typeof prototype!=="object"&&typeof prototype!=="function"){throw new TypeError("Object prototype may only be an Object or null")}Type.prototype=prototype;object=new Type;object.__proto__=prototype}if(properties!==void 0){Object.defineProperties(object,properties)}return object}}function doesDefinePropertyWork(object){try{Object.defineProperty(object,"sentinel",{});return"sentinel"in object}catch(exception){}}if(Object.defineProperty){var definePropertyWorksOnObject=doesDefinePropertyWork({});var definePropertyWorksOnDom=typeof document=="undefined"||doesDefinePropertyWork(document.createElement("div"));if(!definePropertyWorksOnObject||!definePropertyWorksOnDom){var definePropertyFallback=Object.defineProperty,definePropertiesFallback=Object.defineProperties}}if(!Object.defineProperty||definePropertyFallback){var ERR_NON_OBJECT_DESCRIPTOR="Property description must be an object: ";var ERR_NON_OBJECT_TARGET="Object.defineProperty called on non-object: ";var ERR_ACCESSORS_NOT_SUPPORTED="getters & setters can not be defined "+"on this javascript engine";Object.defineProperty=function defineProperty(object,property,descriptor){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT_TARGET+object)}if(typeof descriptor!="object"&&typeof descriptor!="function"||descriptor===null){throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR+descriptor)}if(definePropertyFallback){try{return definePropertyFallback.call(Object,object,property,descriptor)}catch(exception){}}if(owns(descriptor,"value")){if(supportsAccessors&&(lookupGetter(object,property)||lookupSetter(object,property))){var prototype=object.__proto__;object.__proto__=prototypeOfObject;delete object[property];object[property]=descriptor.value;object.__proto__=prototype}else{object[property]=descriptor.value}}else{if(!supportsAccessors){throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED)}if(owns(descriptor,"get")){defineGetter(object,property,descriptor.get)}if(owns(descriptor,"set")){defineSetter(object,property,descriptor.set)}}return object}}if(!Object.defineProperties||definePropertiesFallback){Object.defineProperties=function defineProperties(object,properties){if(definePropertiesFallback){try{return definePropertiesFallback.call(Object,object,properties)}catch(exception){}}for(var property in properties){if(owns(properties,property)&&property!="__proto__"){Object.defineProperty(object,property,properties[property])}}return object}}if(!Object.seal){Object.seal=function seal(object){return object}}if(!Object.freeze){Object.freeze=function freeze(object){return object}}try{Object.freeze(function(){})}catch(exception){Object.freeze=function freeze(freezeObject){return function freeze(object){if(typeof object=="function"){return object}else{return freezeObject(object)}}}(Object.freeze)}if(!Object.preventExtensions){Object.preventExtensions=function preventExtensions(object){return object}}if(!Object.isSealed){Object.isSealed=function isSealed(object){return false}}if(!Object.isFrozen){Object.isFrozen=function isFrozen(object){return false}}if(!Object.isExtensible){Object.isExtensible=function isExtensible(object){if(Object(object)!==object){throw new TypeError}var name="";while(owns(object,name)){name+="?"}object[name]=true;var returnValue=owns(object,name);delete object[name];return returnValue}}}); 2 | //# sourceMappingURL=es5-sham.map -------------------------------------------------------------------------------- /docs/_site/js/examples/sample1.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var SAMPLE1_COMPONENT = "\nvar Sample1 = React.createClass({\n render: function() {\n return (\n
\n \n
\n );\n }\n});\n\nReact.render(, mountNode);\n"; 4 | 5 | React.render(React.createElement(ReactPlayground, { codeText: SAMPLE1_COMPONENT }), document.getElementById('sample1')); 6 | 7 | // The big indicator in top of the page. 8 | var percentage = 0; 9 | function renderIndicator() { 10 | var status = percentage === 100 ? "loading" : "ready"; 11 | percentage = Math.min(100, percentage + 2); 12 | React.render(React.createElement(RefreshIndicator, { status: status, left: 40, top: 5, percentage: percentage }), document.getElementById("indicator")); 13 | if (status !== "loading") { 14 | setTimeout(renderIndicator, 16); 15 | } 16 | } 17 | setTimeout(renderIndicator, 800); -------------------------------------------------------------------------------- /docs/_site/js/examples/sample2.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var SAMPLE2_COMPONENT = '\nvar Sample2 = React.createClass({\n getInitialState: function() {\n this._indicatorSize = 40;\n return {\n indicatorPercentage: 0,\n indicatorY: -this._indicatorSize,\n indicatorStatus: "hide",\n };\n },\n render: function () {\n return (\n
\n \n
\n );\n },\n _handleMouseDown: function(e) {\n this._mouseDownY = e.pageY;\n this._maybePull = true;\n },\n\n _handleMouseMove: function(e) {\n if (!this._maybePull) return;\n\n var currY = e.pageY;\n var offsetY = currY - this._mouseDownY;\n if (offsetY > 0) {\n offsetY = Math.min(offsetY, 100);\n var percentage = offsetY * 100 / 100;\n this.setState({\n indicatorPercentage: percentage,\n indicatorY: offsetY - this._indicatorSize,\n indicatorStatus: "ready",\n });\n if (percentage === 100) {\n this._pulling = true;\n } else {\n this._pulling = false;\n }\n }\n },\n\n _handleMouseUp: function(e) {\n this._maybePull = false;\n\n if (this._pulling) {\n this.setState({\n indicatorStatus: "loading",\n });\n setTimeout(function(me) {\n me.setState({\n indicatorStatus: "hide",\n indicatorY: -me._indicatorSize,\n });\n }, 5000, this);\n } else {\n this.setState({\n indicatorStatus: "hide",\n indicatorY: -this._indicatorSize,\n });\n }\n }\n});\n\nReact.render(, mountNode);\n'; 4 | 5 | React.render(React.createElement(ReactPlayground, { codeText: SAMPLE2_COMPONENT }), document.getElementById('sample2')); -------------------------------------------------------------------------------- /docs/_site/js/html-jsx-lib.js: -------------------------------------------------------------------------------- 1 | // Ideally it would be nice to just redirect, but Github Pages is very basic and 2 | // lacks that functionality. 3 | 'use strict'; 4 | 5 | console.warn('html-jsx-lib.js has moved to http://reactjs.github.io/react-magic/' + 'htmltojsx.min.js. If using React-Magic, you are no longer required to ' + 'link to this file. Please delete its 9 | 10 | [![David](https://img.shields.io/david/maoziliang/react-refresh-indicator.svg)](https://david-dm.org/maoziliang/react-refresh-indicator) 11 | [![David](https://img.shields.io/david/dev/maoziliang/react-refresh-indicator.svg)](https://david-dm.org/maoziliang/react-refresh-indicator#info=devDependencies) 12 | [![Travis branch](https://img.shields.io/travis/maoziliang/react-refresh-indicator/master.svg)](https://travis-ci.org/maoziliang/react-refresh-indicator) 13 | 14 | ## Usage 15 | This package is written in ES6. Maybe you should use this package with **webpack + babel + babel-runtime**. 16 | 17 | Perhaps you should overwrite `prefixed` method of this component by mixin to implement the autoprefix feature. The default behaviour will not autoprefix for css3 property name. 18 | 19 | ``` bash 20 | $ npm install react-refresh-indicator --save 21 | ``` 22 | ``` javascript 23 | RefreshIndicator.propsType = { 24 | // size in pixel 25 | size: React.PropTypes.number, 26 | // percentage is 100 always means the user comfirm to reload. 27 | percentage: React.PropTypes.number, 28 | // RefreshIndicator position is absolute. Please give a correct positioned container. 29 | left: React.PropTypes.number.isRequired, 30 | top: React.PropTypes.number.isRequired, 31 | // status is an enum. It can be "ready" "loading" or "hide" 32 | // ready: This phase give user a chance to confirm to fetch data. Display upon the percentage prop. 33 | // loading: This means data fetch has began. Display a spinning animated arc. 34 | // hide: Finished and hide to specified left and top with animation. 35 | status: React.PropTypes.oneOf(["ready", "loading", "hide"]).isRequired, 36 | }; 37 | 38 | RefreshIndicator.defaultProps = { 39 | size: 60, 40 | percentage: 0, 41 | }; 42 | 43 | ``` 44 | 45 | ## Examples 46 |
47 |
48 |
49 |

A static state indicator

50 |

51 | Render RefreshIndicator directly. You can modify the props of the component to see the change. 52 |

53 |

54 | JSX is optional and not required to use React. Try 55 | clicking on "Compiled JS" to see the raw JavaScript code produced by 56 | the JSX compiler. 57 |

58 |
59 |
60 |
61 |

A complete and complex example

62 |

63 | You can press down your mouse within the right side box. Then move down. And then release. That's all. 64 |

65 |
66 |
67 |
68 | 69 | 70 |
71 | -------------------------------------------------------------------------------- /docs/js/es5-sham.min.js: -------------------------------------------------------------------------------- 1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5-sham",definition)}else{definition()}})(function(){var call=Function.prototype.call;var prototypeOfObject=Object.prototype;var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if(!Object.getPrototypeOf){Object.getPrototypeOf=function getPrototypeOf(object){return object.__proto__||(object.constructor?object.constructor.prototype:prototypeOfObject)}}function doesGetOwnPropertyDescriptorWork(object){try{object.sentinel=0;return Object.getOwnPropertyDescriptor(object,"sentinel").value===0}catch(exception){}}if(Object.defineProperty){var getOwnPropertyDescriptorWorksOnObject=doesGetOwnPropertyDescriptorWork({});var getOwnPropertyDescriptorWorksOnDom=typeof document=="undefined"||doesGetOwnPropertyDescriptorWork(document.createElement("div"));if(!getOwnPropertyDescriptorWorksOnDom||!getOwnPropertyDescriptorWorksOnObject){var getOwnPropertyDescriptorFallback=Object.getOwnPropertyDescriptor}}if(!Object.getOwnPropertyDescriptor||getOwnPropertyDescriptorFallback){var ERR_NON_OBJECT="Object.getOwnPropertyDescriptor called on a non-object: ";Object.getOwnPropertyDescriptor=function getOwnPropertyDescriptor(object,property){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT+object)}if(getOwnPropertyDescriptorFallback){try{return getOwnPropertyDescriptorFallback.call(Object,object,property)}catch(exception){}}if(!owns(object,property)){return}var descriptor={enumerable:true,configurable:true};if(supportsAccessors){var prototype=object.__proto__;object.__proto__=prototypeOfObject;var getter=lookupGetter(object,property);var setter=lookupSetter(object,property);object.__proto__=prototype;if(getter||setter){if(getter){descriptor.get=getter}if(setter){descriptor.set=setter}return descriptor}}descriptor.value=object[property];descriptor.writable=true;return descriptor}}if(!Object.getOwnPropertyNames){Object.getOwnPropertyNames=function getOwnPropertyNames(object){return Object.keys(object)}}if(!Object.create){var createEmpty;var supportsProto=Object.prototype.__proto__===null;if(supportsProto||typeof document=="undefined"){createEmpty=function(){return{__proto__:null}}}else{createEmpty=function(){var iframe=document.createElement("iframe");var parent=document.body||document.documentElement;iframe.style.display="none";parent.appendChild(iframe);iframe.src="javascript:";var empty=iframe.contentWindow.Object.prototype;parent.removeChild(iframe);iframe=null;delete empty.constructor;delete empty.hasOwnProperty;delete empty.propertyIsEnumerable;delete empty.isPrototypeOf;delete empty.toLocaleString;delete empty.toString;delete empty.valueOf;empty.__proto__=null;function Empty(){}Empty.prototype=empty;createEmpty=function(){return new Empty};return new Empty}}Object.create=function create(prototype,properties){var object;function Type(){}if(prototype===null){object=createEmpty()}else{if(typeof prototype!=="object"&&typeof prototype!=="function"){throw new TypeError("Object prototype may only be an Object or null")}Type.prototype=prototype;object=new Type;object.__proto__=prototype}if(properties!==void 0){Object.defineProperties(object,properties)}return object}}function doesDefinePropertyWork(object){try{Object.defineProperty(object,"sentinel",{});return"sentinel"in object}catch(exception){}}if(Object.defineProperty){var definePropertyWorksOnObject=doesDefinePropertyWork({});var definePropertyWorksOnDom=typeof document=="undefined"||doesDefinePropertyWork(document.createElement("div"));if(!definePropertyWorksOnObject||!definePropertyWorksOnDom){var definePropertyFallback=Object.defineProperty,definePropertiesFallback=Object.defineProperties}}if(!Object.defineProperty||definePropertyFallback){var ERR_NON_OBJECT_DESCRIPTOR="Property description must be an object: ";var ERR_NON_OBJECT_TARGET="Object.defineProperty called on non-object: ";var ERR_ACCESSORS_NOT_SUPPORTED="getters & setters can not be defined "+"on this javascript engine";Object.defineProperty=function defineProperty(object,property,descriptor){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT_TARGET+object)}if(typeof descriptor!="object"&&typeof descriptor!="function"||descriptor===null){throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR+descriptor)}if(definePropertyFallback){try{return definePropertyFallback.call(Object,object,property,descriptor)}catch(exception){}}if(owns(descriptor,"value")){if(supportsAccessors&&(lookupGetter(object,property)||lookupSetter(object,property))){var prototype=object.__proto__;object.__proto__=prototypeOfObject;delete object[property];object[property]=descriptor.value;object.__proto__=prototype}else{object[property]=descriptor.value}}else{if(!supportsAccessors){throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED)}if(owns(descriptor,"get")){defineGetter(object,property,descriptor.get)}if(owns(descriptor,"set")){defineSetter(object,property,descriptor.set)}}return object}}if(!Object.defineProperties||definePropertiesFallback){Object.defineProperties=function defineProperties(object,properties){if(definePropertiesFallback){try{return definePropertiesFallback.call(Object,object,properties)}catch(exception){}}for(var property in properties){if(owns(properties,property)&&property!="__proto__"){Object.defineProperty(object,property,properties[property])}}return object}}if(!Object.seal){Object.seal=function seal(object){return object}}if(!Object.freeze){Object.freeze=function freeze(object){return object}}try{Object.freeze(function(){})}catch(exception){Object.freeze=function freeze(freezeObject){return function freeze(object){if(typeof object=="function"){return object}else{return freezeObject(object)}}}(Object.freeze)}if(!Object.preventExtensions){Object.preventExtensions=function preventExtensions(object){return object}}if(!Object.isSealed){Object.isSealed=function isSealed(object){return false}}if(!Object.isFrozen){Object.isFrozen=function isFrozen(object){return false}}if(!Object.isExtensible){Object.isExtensible=function isExtensible(object){if(Object(object)!==object){throw new TypeError}var name="";while(owns(object,name)){name+="?"}object[name]=true;var returnValue=owns(object,name);delete object[name];return returnValue}}}); 2 | //# sourceMappingURL=es5-sham.map -------------------------------------------------------------------------------- /docs/js/examples/sample1.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var SAMPLE1_COMPONENT = "\nvar Sample1 = React.createClass({\n render: function() {\n return (\n
\n \n
\n );\n }\n});\n\nReact.render(, mountNode);\n"; 4 | 5 | React.render(React.createElement(ReactPlayground, { codeText: SAMPLE1_COMPONENT }), document.getElementById('sample1')); 6 | 7 | // The big indicator in top of the page. 8 | var percentage = 0; 9 | function renderIndicator() { 10 | var status = percentage === 100 ? "loading" : "ready"; 11 | percentage = Math.min(100, percentage + 2); 12 | React.render(React.createElement(RefreshIndicator, { status: status, left: 40, top: 5, percentage: percentage }), document.getElementById("indicator")); 13 | if (status !== "loading") { 14 | setTimeout(renderIndicator, 16); 15 | } 16 | } 17 | setTimeout(renderIndicator, 800); -------------------------------------------------------------------------------- /docs/js/examples/sample2.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var SAMPLE2_COMPONENT = '\nvar Sample2 = React.createClass({\n getInitialState: function() {\n this._indicatorSize = 40;\n return {\n indicatorPercentage: 0,\n indicatorY: -this._indicatorSize,\n indicatorStatus: "hide",\n };\n },\n render: function () {\n return (\n
\n \n
\n );\n },\n _handleMouseDown: function(e) {\n this._mouseDownY = e.pageY;\n this._maybePull = true;\n },\n\n _handleMouseMove: function(e) {\n if (!this._maybePull) return;\n\n var currY = e.pageY;\n var offsetY = currY - this._mouseDownY;\n if (offsetY > 0) {\n offsetY = Math.min(offsetY, 100);\n var percentage = offsetY * 100 / 100;\n this.setState({\n indicatorPercentage: percentage,\n indicatorY: offsetY - this._indicatorSize,\n indicatorStatus: "ready",\n });\n if (percentage === 100) {\n this._pulling = true;\n } else {\n this._pulling = false;\n }\n }\n },\n\n _handleMouseUp: function(e) {\n this._maybePull = false;\n\n if (this._pulling) {\n this.setState({\n indicatorStatus: "loading",\n });\n setTimeout(function(me) {\n me.setState({\n indicatorStatus: "hide",\n indicatorY: -me._indicatorSize,\n });\n }, 5000, this);\n } else {\n this.setState({\n indicatorStatus: "hide",\n indicatorY: -this._indicatorSize,\n });\n }\n }\n});\n\nReact.render(, mountNode);\n'; 4 | 5 | React.render(React.createElement(ReactPlayground, { codeText: SAMPLE2_COMPONENT }), document.getElementById('sample2')); -------------------------------------------------------------------------------- /docs/js/html-jsx-lib.js: -------------------------------------------------------------------------------- 1 | // Ideally it would be nice to just redirect, but Github Pages is very basic and 2 | // lacks that functionality. 3 | 'use strict'; 4 | 5 | console.warn('html-jsx-lib.js has moved to http://reactjs.github.io/react-magic/' + 'htmltojsx.min.js. If using React-Magic, you are no longer required to ' + 'link to this file. Please delete its