├── .gitattributes ├── .gitignore ├── .travis.yml ├── CNAME ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── _config.yml ├── bower.json ├── dist ├── css │ ├── ratchet-theme-android.css │ ├── ratchet-theme-android.min.css │ ├── ratchet-theme-ios.css │ ├── ratchet-theme-ios.min.css │ ├── ratchet.css │ ├── ratchet.min.css │ └── ratchet.min.css.map ├── fonts │ ├── ratchicons.eot │ ├── ratchicons.svg │ ├── ratchicons.ttf │ └── ratchicons.woff └── js │ ├── ratchet.js │ ├── ratchet.min.js │ └── ratchet.min.js.map ├── docs ├── LICENSE ├── _data │ └── ratchicons.yml ├── _includes │ ├── ad.html │ ├── browser-warning.html │ ├── download-module.html │ ├── footer.html │ ├── header.html │ ├── jump.html │ ├── masthead.html │ └── toolbar.html ├── _layouts │ ├── default.html │ └── home.html ├── about.html ├── assets │ ├── css │ │ ├── docs.css │ │ ├── docs.min.css │ │ ├── docs.min.css.map │ │ └── pygments-manni.css │ ├── img │ │ ├── apple-touch-icon-114x114.png │ │ ├── apple-touch-icon-57x57.png │ │ ├── apple-touch-icon-72x72.png │ │ ├── device-sprite.png │ │ ├── example-android.png │ │ ├── example-ios.png │ │ ├── example.png │ │ ├── slide-1.jpg │ │ ├── slide-2.jpg │ │ └── slide-3.jpg │ └── js │ │ ├── docs.js │ │ ├── docs.min.js │ │ └── fingerblast.js ├── components.html ├── dist │ ├── css │ │ ├── ratchet-theme-android.css │ │ ├── ratchet-theme-android.min.css │ │ ├── ratchet-theme-ios.css │ │ ├── ratchet-theme-ios.min.css │ │ ├── ratchet.css │ │ ├── ratchet.min.css │ │ └── ratchet.min.css.map │ ├── fonts │ │ ├── ratchicons.eot │ │ ├── ratchicons.svg │ │ ├── ratchicons.ttf │ │ └── ratchicons.woff │ └── js │ │ ├── ratchet.js │ │ ├── ratchet.min.js │ │ └── ratchet.min.js.map ├── examples.html ├── examples │ ├── app-android-notes │ │ ├── css │ │ │ └── app.css │ │ └── index.html │ ├── app-ios-mail │ │ ├── css │ │ │ └── app.css │ │ ├── inbox.html │ │ └── index.html │ └── app-movies │ │ ├── choose-theater.html │ │ ├── css │ │ └── app.css │ │ ├── img │ │ ├── argo.png │ │ ├── ralph.png │ │ └── skyfall.png │ │ └── index.html ├── favicon.ico ├── getting-started.html ├── index.html ├── one.html ├── robots.txt ├── sitemap.xml ├── template.html └── two.html ├── fonts ├── ratchicons.eot ├── ratchicons.svg ├── ratchicons.ttf └── ratchicons.woff ├── grunt └── ratchicons-data-generator.js ├── js ├── .jscsrc ├── .jshintrc ├── common.js ├── modals.js ├── popovers.js ├── push.js ├── segmented-controllers.js ├── sliders.js ├── tests │ ├── .jshintrc │ ├── SpecRunner.html │ ├── commonSpec.js │ ├── modalsSpec.js │ ├── sliderSpec.js │ └── vendor │ │ └── touchfaker.min.js └── toggles.js ├── package.json └── sass ├── .csscomb.json ├── .csslintrc ├── badges.scss ├── bars.scss ├── base.scss ├── buttons.scss ├── cards.scss ├── docs.scss ├── forms.scss ├── mixins.scss ├── modals.scss ├── normalize.scss ├── popovers.scss ├── push.scss ├── ratchet.scss ├── ratchicons.scss ├── segmented-controls.scss ├── sliders.scss ├── table-views.scss ├── theme-android.scss ├── theme-ios.scss ├── toggles.scss ├── type.scss └── variables.scss /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | *.css text eol=lf 3 | *.html text eol=lf 4 | *.js text eol=lf 5 | *.json text eol=lf 6 | *.md text eol=lf 7 | *.scss text eol=lf 8 | *.svg text eol=lf 9 | *.xml text eol=lf 10 | *.yml text eol=lf 11 | # Don't diff or textually merge source maps 12 | *.map binary 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _gh_pages 3 | _site 4 | .ruby-version 5 | 6 | # Numerous always-ignore extensions 7 | *.diff 8 | *.err 9 | *.orig 10 | *.log 11 | *.rej 12 | *.swo 13 | *.swp 14 | *.zip 15 | *.vi 16 | *~ 17 | 18 | # OS or Editor folders 19 | .DS_Store 20 | ._* 21 | Thumbs.db 22 | .cache 23 | .project 24 | .settings 25 | .tmproj 26 | *.esproj 27 | nbproject 28 | *.sublime-project 29 | *.sublime-workspace 30 | .idea 31 | 32 | # Komodo 33 | *.komodoproject 34 | .komodotools 35 | 36 | # Jekyll metadata 37 | docs/.jekyll-metadata 38 | 39 | # Folders to ignore 40 | node_modules 41 | bower_components 42 | .grunt 43 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | 3 | dist: trusty 4 | 5 | language: node_js 6 | 7 | git: 8 | depth: 10 9 | 10 | node_js: 11 | - "4" 12 | - "5" 13 | 14 | env: 15 | matrix: 16 | - RUBY_VERSION=2.2 17 | 18 | before_install: 19 | - rvm install $RUBY_VERSION 20 | - rvm use $RUBY_VERSION --fuzzy 21 | - export GEMDIR=$(rvm gemdir) 22 | 23 | install: 24 | - travis_retry npm install -g grunt-cli 25 | - travis_retry npm install 26 | - travis_retry gem install --no-document "jekyll:~>3.1" 27 | 28 | matrix: 29 | fast_finish: true 30 | 31 | notifications: 32 | slack: heybb:51atQXKR2rpnbohAZ0X1vNbE 33 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | goratchet.com 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Ratchet 2 | 3 | ## Types of issues 4 | 5 | The GitHub issue tracker should only be used for one of the 6 | following: 7 | 8 | + **Bugs** — when a feature of the project has been _identified as 9 | broken_. 10 | 11 | + **Feature requests** — when you ask for a _new feature_ to be added to a 12 | project. 13 | 14 | + **Contribution enquiries** — when you want to discuss whether a _new 15 | feature_ or _change_ would be accepted in a project before you begin 16 | development work on it. 17 | 18 | These are some things that don't belong in the issue tracker: 19 | 20 | + **Please avoid personal support requests.** We cannot 21 | provide personal support for implementation issues. The best place for help 22 | is generally going to be StackOverflow, Twitter, IRC, etc. 23 | 24 | + **Please avoid derailing issues.** Keep the discussion on topic and respect 25 | the opinions of others. 26 | 27 | ## Bugs 28 | 29 | A bug is a _demonstrable problem_ that is caused by the code in the 30 | repository. 31 | 32 | If you've come across a problem with the code and you're letting us know about 33 | it, _thank you_. We appreciate your time and the effort you're making to help 34 | improve the code for everyone else! 35 | 36 | Please read the following guidelines for reporting bugs: 37 | 38 | 1. **Use the GitHub issue search** — check if the issue has already been 39 | reported. If it has been, please comment on the existing issue. 40 | 41 | 2. **Check if the issue has been fixed** — the latest `master` or 42 | development branch may already contain a fix. 43 | 44 | 3. **Isolate the demonstrable problem** — make sure that the code in the 45 | project's repository is _definitely_ responsible for the issue. Create a 46 | [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an 47 | extremely simple and immediately viewable example of the issue. 48 | 49 | 4. **Include a live example** — provide a link to your reduced test case 50 | when appropriate (e.g. if the issue is related to front-end technologies). 51 | Please use [jsFiddle](http://jsfiddle.net) to host examples. 52 | 53 | Please try to be as detailed as possible in your report too. What is your 54 | environment? What steps will reproduce the issue? What browser(s) and OS 55 | experience the problem? What would you expect to be the outcome? All these 56 | details will help me and others to assess and fix any potential bugs. 57 | 58 | ### Example of a good bug report 59 | 60 | > Short and descriptive title 61 | > 62 | > A summary of the issue and the browser/OS environment in which it occurs. If 63 | > suitable, include the steps required to reproduce the bug. 64 | > 65 | > 1. This is the first step 66 | > 2. This is the second step 67 | > 3. Further steps, etc. 68 | > 69 | > `` - a link to the reduced test case 70 | > 71 | > Any other information you want to share that is relevant to the issue being 72 | > reported. This might include the lines of code that you have identified as 73 | > causing the bug, and potential solutions (and your opinions on their 74 | > merits). 75 | 76 | A good bug report shouldn't leave us needing to chase you up to get further 77 | information that is required to assess or fix the bug. 78 | 79 | ## Feature requests 80 | 81 | Feature requests are welcome! Please provide links to examples or articles that 82 | help to illustrate the specifics of a feature you're requesting. The more 83 | detail, the better. It will help us to decide whether the feature is something I 84 | agree should become part of the project. 85 | 86 | ## Contribution enquiries 87 | 88 | Contribution enquiries should take place before any significant pull request, 89 | otherwise you risk spending a lot of time working on something that we might not 90 | want to pull into the repository. 91 | 92 | In this regard, some contribution enquires may be feature requests that you 93 | would like to have a go at implementing yourself if they are wanted. Other 94 | enquiries might revolve around refactoring code or porting a project to 95 | different languages. 96 | 97 | ## Pull requests 98 | 99 | Good pull requests - patches, improvements, new features - are a fantastic 100 | help. 101 | 102 | If you've spotted any small, obvious errors and want to help out by patching it, 103 | that will be much appreciated. 104 | 105 | If your contribution involves a significant amount of work or substantial 106 | changes to any part of the project, please open a "contribution enquiry" issue 107 | first to check that the work is wanted or matches the goals of the project. 108 | 109 | All pull requests should remain focused in scope and avoid containing unrelated 110 | commits. 111 | 112 | Please follow this process; it's the best way to get your work included in the 113 | project: 114 | 115 | 1. [Fork](https://github.com/twbs/ratchet/fork) the project. 116 | 117 | 2. Clone your fork (`git clone 118 | git@github.com:/.git`). 119 | 120 | 3. Add an `upstream` remote (`git remote add upstream 121 | git://github.com//.git`). 122 | 123 | 4. Get the latest changes from upstream (e.g. `git pull upstream 124 | `). 125 | 126 | 5. Create a new topic branch to contain your feature, change, or fix (`git 127 | checkout -b `). 128 | 129 | 6. Make sure that your changes adhere to the current coding conventions used 130 | throughout the project - indentation, accurate comments, etc. 131 | 132 | 7. Commit your changes in logical chunks; use git's [interactive 133 | rebase](https://help.github.com/articles/interactive-rebase) feature to tidy 134 | up your commits before making them public. Please adhere to these [git commit 135 | message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) 136 | or your pull request is unlikely be merged into the main project. 137 | 138 | 8. Locally merge (or rebase) the upstream branch into your topic branch. 139 | 140 | 9. Push your topic branch up to your fork (`git push origin 141 | `). 142 | 143 | 10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a 144 | clear title and description. Please mention which browsers you tested in. 145 | 146 | If you have any other questions about contributing, please feel free to contact 147 | us. 148 | 149 | **Don't edit files in `dist/`.** You should edit files in `sass/` and `js/`. 150 | 151 | ## Special thanks to @necolas 152 | 153 | For writing the original [issue-guidelines](https://github.com/necolas/issue-guidelines/) from which these were adapted. 154 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 connors and other contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Ratchet](http://goratchet.com) 2 | [![GitHub Release](https://img.shields.io/github/release/twbs/ratchet.svg)](https://github.com/twbs/ratchet/releases) 3 | [![Build Status](https://img.shields.io/travis/twbs/ratchet/master.svg)](https://travis-ci.org/twbs/ratchet) 4 | [![devDependency Status](https://img.shields.io/david/dev/twbs/ratchet.svg)](https://david-dm.org/twbs/ratchet#info=devDependencies) 5 | 6 | Build mobile apps with simple HTML, CSS, and JS components. 7 | 8 | ## Table of contents 9 | 10 | * [Getting started](#getting-started) 11 | * [Documentation](#documentation) 12 | * [Support](#support) 13 | * [Contributing](#contributing) 14 | * [Troubleshooting](#troubleshooting) 15 | * [Versioning](#versioning) 16 | * [Maintainers](#maintainers) 17 | * [License](#license) 18 | 19 | ## Getting started 20 | 21 | * Clone the repo with `git clone https://github.com/twbs/ratchet.git` or just [download](http://github.com/twbs/ratchet/archive/v2.0.2.zip) the bundled CSS and JS 22 | * [Read the docs](http://goratchet.com) to learn about the components and how to get a prototype on your phone 23 | * [Check out examples](http://goratchet.com/examples/) 24 | 25 | Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the [tagged downloads](https://github.com/twbs/ratchet/tags). 26 | 27 | ### What's included 28 | 29 | Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: 30 | 31 | ``` 32 | ratchet/ 33 | ├── css/ 34 | │ ├── ratchet.css 35 | │ ├── ratchet.min.css 36 | │ ├── ratchet-theme-android.css 37 | │ ├── ratchet-theme-android.min.css 38 | │ ├── ratchet-theme-ios.css 39 | │ └── ratchet-theme-ios.min.css 40 | ├── js/ 41 | │ ├── ratchet.js 42 | │ └── ratchet.min.js 43 | └── fonts/ 44 | ├── ratchicons.eot 45 | ├── ratchicons.svg 46 | ├── ratchicons.ttf 47 | └── ratchicons.woff 48 | ``` 49 | 50 | We provide compiled CSS and JS (`ratchet.*`), as well as compiled and minified CSS and JS (`ratchet.min.*`). The Ratchicon fonts are included, as are the optional Android and iOS platform themes. 51 | 52 | ## Documentation 53 | 54 | Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at . The docs may also be run locally. 55 | 56 | ### Running documentation locally 57 | 58 | 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v3.0.x). 59 | * **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems. 60 | 2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`. 61 | 3. From the root `/ratchet` directory, run `jekyll serve` in the command line. 62 | 4. Open in your browser, and boom! 63 | 64 | Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). 65 | 66 | ### Documentation for previous releases 67 | 68 | Documentation for v1.0.2 has been made available for the time being at while folks transition to Ratchet 2. 69 | 70 | [Previous releases](https://github.com/twbs/ratchet/releases) and their documentation are also available for download. 71 | 72 | ## Support 73 | 74 | Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@GoRatchet](https://twitter.com/goratchet). 75 | 76 | ## Contributing 77 | 78 | Please file a GitHub issue to [report a bug](https://github.com/twbs/ratchet/issues). When reporting a bug, be sure to follow the [contributor guidelines](https://github.com/twbs/ratchet/blob/master/CONTRIBUTING.md). 79 | 80 | ## Troubleshooting 81 | 82 | A small list of "gotchas" is provided below for designers and developers starting to work with Ratchet. 83 | 84 | * Ratchet is designed to respond to touch events from a mobile device. In order to use mouse click events (for desktop browsing and testing), you have a few options: 85 | * Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences) 86 | * Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices) 87 | * Script tags containing JavaScript will not be executed on pages that are loaded with push.js. If you would like to attach event handlers to elements on other pages, document-level event delegation is a common solution. 88 | * Ratchet uses XHR requests to fetch additional pages inside the application. Due to security concerns, modern browsers prevent XHR requests when opening files locally (aka using the `file://` protocol); consequently, Ratchet does not work when opened directly as a file. 89 | * A common solution to this is to simply serve the files from a local server. One convenient way to achieve this is to run `python -m SimpleHTTPServer ` to serve up the files in the current directory to `http://localhost:` 90 | 91 | ## Versioning 92 | 93 | For transparency into our release cycle and in striving to maintain backward compatibility, Ratchet is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible. 94 | 95 | Releases will be numbered with the following format: 96 | 97 | `..` 98 | 99 | And constructed with the following guidelines: 100 | 101 | * Breaking backward compatibility **bumps the major** while resetting minor and patch 102 | * New additions without breaking backward compatibility **bumps the minor** while resetting the patch 103 | * Bug fixes and misc changes **bumps only the patch** 104 | 105 | For more information on SemVer, please visit . 106 | 107 | ## Maintainers 108 | 109 | Connor Sears 110 | 111 | * 112 | * 113 | 114 | 115 | Created by Connor Sears, Dave Gamache, and Jacob Thornton. 116 | 117 | 118 | ## License 119 | 120 | Ratchet is licensed under the [MIT License](http://opensource.org/licenses/MIT). 121 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Meta data 2 | name: Ratchet 3 | authors: Connor Sears 4 | description: Build mobile apps with simple HTML, CSS, and JS components. 5 | 6 | # Dependencies 7 | highlighter: rouge 8 | 9 | # Permalinks 10 | permalink: pretty 11 | 12 | # Server 13 | source: docs 14 | port: 4000 15 | url: http://goratchet.com 16 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ratchet", 3 | "description": "Build mobile apps with simple HTML, CSS, and JS components.", 4 | "keywords": [ 5 | "css", 6 | "js", 7 | "fonts", 8 | "ios", 9 | "android", 10 | "mobile", 11 | "prototype" 12 | ], 13 | "homepage": "http://goratchet.com", 14 | "main": [ 15 | "sass/ratchet.scss", 16 | "dist/css/ratchet.css", 17 | "dist/js/ratchet.js", 18 | "dist/fonts/ratchicons.eot", 19 | "dist/fonts/ratchicons.svg", 20 | "dist/fonts/ratchicons.ttf", 21 | "dist/fonts/ratchicons.woff" 22 | ], 23 | "ignore": [ 24 | "_config.yml", 25 | ".travis.yml", 26 | "CNAME", 27 | "CONTRIBUTING.md", 28 | "docs" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /dist/css/ratchet-theme-ios.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * ===================================================== 3 | * Ratchet v2.0.2 (http://goratchet.com) 4 | * Copyright 2016 Connor Sears 5 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 6 | * 7 | * v2.0.2 designed by @connors. 8 | * ===================================================== 9 | */a{color:#007aff}a:active{color:#0062cc}.content{background-color:#efeff4}.h5,.h6,h5,h6,p{color:#8f8f94}.h5,.h6,h5,h6{font-weight:400;text-transform:uppercase}.btn{color:#929292;background-color:rgba(247,247,247,.98);border:1px solid #929292;-webkit-transition:all;transition:all;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s}.btn.active,.btn:active{color:#fff;background-color:#929292}.btn-primary{color:#fff;background-color:#007aff;border:1px solid #007aff}.btn-primary.active,.btn-primary:active{background-color:#0062cc;border:1px solid #0062cc}.btn-positive{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.btn-positive.active,.btn-positive:active{background-color:#2ac845;border:1px solid #2ac845}.btn-negative{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.btn-negative.active,.btn-negative:active{background-color:#cf2d28;border:1px solid #cf2d28}.btn-link,.btn-outlined{background-color:transparent}.btn-outlined.btn-primary{color:#007aff}.btn-outlined.btn-positive{color:#4cd964}.btn-outlined.btn-negative{color:#dd524d}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff}.btn-link{color:#007aff;border:none}.bar-tab,.bar.bar-footer,.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab,.table-view{border-top:0}.btn-link.active,.btn-link:active{color:#0062cc;background-color:transparent}.btn .badge{background-color:rgba(0,0,0,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{background-color:rgba(247,247,247,.98);border-bottom:0;box-shadow:0 0 1px rgba(0,0,0,.85)}.bar.bar-header-secondary{top:44px}.bar.bar-footer-secondary{bottom:44px}.bar.bar-footer-secondary-tab{bottom:50px}.tab-item{color:#929292}.bar-nav .btn-link,.tab-item.active,.tab-item:active{color:#007aff}.bar-nav .btn-link:active{color:#007aff;opacity:.6}.badge.badge-inverted{color:#929292;background-color:transparent}.badge-primary{color:#fff;background-color:#007aff}.badge-primary.badge-inverted{color:#007aff;background-color:transparent}.badge-positive{color:#fff;background-color:#4cd964}.badge-positive.badge-inverted{color:#4cd964;background-color:transparent}.badge-negative{color:#fff;background-color:#dd524d}.badge-negative.badge-inverted{color:#dd524d;background-color:transparent}.card .table-view,.card .table-view-cell:last-child{background-image:none}.table-view{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border-bottom:0}.table-view .table-view-cell{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.table-view .table-view-cell:last-child{background-image:none}.input-group,.table-view .table-view-divider{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0}.table-view .table-view-cell>a:not(.btn):active{color:inherit}.table-view .table-view-divider{border-top:0;border-bottom:0}.input-group,input[type=text],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2)}input[type=search]{height:34px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}input[type=search]:focus{text-align:left}.input-group,select,textarea{height:auto}.input-group{padding:0;border:0}.input-group input,.input-row{background-repeat:no-repeat;background-position:15px 100%}.input-group input{background-image:url("data:image/svg+xml;utf8,");border:0}.input-group input:last-child{background-image:none}.input-row{background-image:url("data:image/svg+xml;utf8,");border-bottom:0}.input-row label+input,.input-row:last-child,.popover .table-view{background-image:none}.segmented-control{background-color:transparent;border:1px solid #929292}.segmented-control .control-item{color:#929292;border-color:#929292;-webkit-transition:background-color .1s linear;transition:background-color .1s linear}.segmented-control .control-item:active{background-color:#ebebeb}.segmented-control .control-item.active{color:#fff;background-color:#929292}.segmented-control-primary{border:1px solid #007aff}.segmented-control-primary .control-item{color:#007aff;border-color:inherit}.segmented-control-primary .control-item:active{background-color:#b3d7ff}.segmented-control-primary .control-item.active{color:#fff;background-color:#007aff}.segmented-control-positive{border:1px solid #4cd964}.segmented-control-positive .control-item{color:#4cd964;border-color:inherit}.segmented-control-positive .control-item:active{background-color:#dff8e4}.segmented-control-positive .control-item.active{color:#fff;background-color:#4cd964}.segmented-control-negative{border:1px solid #dd524d}.segmented-control-negative .control-item{color:#dd524d;border-color:inherit}.segmented-control-negative .control-item:active{background-color:#fae4e3}.segmented-control-negative .control-item.active{color:#fff;background-color:#dd524d}.popover{border-radius:12px;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out}.popover:before{border-bottom:15px solid rgba(247,247,247,.98)}.popover .bar{box-shadow:none}.popover .bar-nav{border-bottom:1px solid rgba(0,0,0,.15)}.popover .table-view{border-radius:12px}.modal,.modal.active{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.toggle{width:47px;border:2px solid #e6e6e6;box-shadow:inset 0 0 0 0 #e1e1e1;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:box-shadow,border;transition-property:box-shadow,border}.toggle .toggle-handle{border:1px solid rgba(0,0,0,.2);box-shadow:0 3px 3px rgba(0,0,0,.08);-webkit-transition-property:-webkit-transform,border,width;transition-property:transform,border,width}.toggle:before{display:none}.toggle.active{background-color:transparent;border:2px solid #4cd964;box-shadow:inset 0 0 0 13px #4cd964}.toggle.active .toggle-handle{-webkit-transform:translate3d(17px,0,0);transform:translate3d(17px,0,0);border-color:#4cd964}.content.fade{-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.content.sliding{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.content.sliding.right:not([class*=sliding-in]),.content.sliding.sliding-in{-webkit-animation-name:fadeOverlay;animation-name:fadeOverlay;-webkit-animation-duration:.4s;animation-duration:.4s}.content.sliding.right:not([class*=sliding-in]){-webkit-animation-direction:reverse;animation-direction:reverse}.content.sliding.left{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}@-webkit-keyframes fadeOverlay{from{box-shadow:0 0 10px transparent,-320px 0 0 transparent}to{box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1)}} -------------------------------------------------------------------------------- /dist/css/ratchet.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["dist/css/ratchet.css"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /dist/fonts/ratchicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/dist/fonts/ratchicons.eot -------------------------------------------------------------------------------- /dist/fonts/ratchicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/dist/fonts/ratchicons.ttf -------------------------------------------------------------------------------- /dist/fonts/ratchicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/dist/fonts/ratchicons.woff -------------------------------------------------------------------------------- /docs/_data/ratchicons.yml: -------------------------------------------------------------------------------- 1 | # This file is generated via Grunt task. **Do not edit directly.** 2 | # See the 'build-ratchicons-data' task in Gruntfile.js. 3 | 4 | - icon-back 5 | - icon-bars 6 | - icon-caret 7 | - icon-check 8 | - icon-close 9 | - icon-code 10 | - icon-compose 11 | - icon-download 12 | - icon-edit 13 | - icon-forward 14 | - icon-gear 15 | - icon-home 16 | - icon-info 17 | - icon-list 18 | - icon-more-vertical 19 | - icon-more 20 | - icon-pages 21 | - icon-pause 22 | - icon-person 23 | - icon-play 24 | - icon-plus 25 | - icon-refresh 26 | - icon-search 27 | - icon-share 28 | - icon-sound 29 | - icon-sound2 30 | - icon-sound3 31 | - icon-sound4 32 | - icon-star-filled 33 | - icon-star 34 | - icon-stop 35 | - icon-trash 36 | - icon-up-nav 37 | - icon-up 38 | - icon-right-nav 39 | - icon-right 40 | - icon-down-nav 41 | - icon-down 42 | - icon-left-nav 43 | - icon-left 44 | -------------------------------------------------------------------------------- /docs/_includes/ad.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /docs/_includes/browser-warning.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /docs/_includes/download-module.html: -------------------------------------------------------------------------------- 1 |
2 |

Ratchet

3 |

Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

4 | Download Ratchet 5 |

Currently v2.0.2

6 |
7 | 8 |
9 |

Source code

10 |

If you haven't already, download the source code for Ratchet.

11 | Download source 12 |
13 | -------------------------------------------------------------------------------- /docs/_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 14 | 15 |

Code licensed under the MIT License and the docs are licensed under CC BY 3.0. Ratchet was lovingly crafted by Connor Sears.

16 | 17 | 26 |
27 | 28 | {% comment %} 29 | Inject Twitter widgets asynchronously. Snippet snipped from Twitter's 30 | JS interface site: https://dev.twitter.com/docs/tfw-javascript 31 | 32 | * "js.async=1;" added to add async attribute to the generated script tag. 33 | {% endcomment %} 34 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /docs/_includes/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ page.title }} 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 27 | -------------------------------------------------------------------------------- /docs/_includes/jump.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Jump to 4 | 5 | 6 | 7 |
8 | Bars 9 | Typography 10 | Table views 11 | Buttons 12 | Segmented controls 13 | Badges 14 | Forms 15 | Toggles 16 | Popovers 17 | Modals 18 | Sliders 19 | Push 20 | Ratchicons 21 |
22 | -------------------------------------------------------------------------------- /docs/_includes/masthead.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | Ratchet 6 |

7 | 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /docs/_includes/toolbar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {% include jump.html %} 5 | 6 |
7 | 8 | Base 9 | 10 | 11 | iOS 12 | 13 | 14 | Android 15 | 16 |
17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include header.html %} 5 | 6 | 7 | {% include browser-warning.html %} 8 | {{ content }} 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include header.html %} 5 | 6 | 7 | {% include browser-warning.html %} 8 | {{ content }} 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/about.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: About · Ratchet 4 | --- 5 | 6 |
7 | {% include masthead.html %} 8 |
9 |
10 |

About

11 |

Learn about the project's history and meet the maintaining team.

12 |
13 | {% include ad.html %} 14 |
15 |
16 | 17 |
18 |
19 |
20 |
21 |

History

22 |

The idea for Ratchet was developed by @connors, @dhg, and @fat in mid-2012. Before it became a full fledged framework, Ratchet began as a series of HTML/CSS prototypes of the Twitter for iPhone app. These prototypes became invaluable to the process of testing new feature designs that ended up being shipped as part of the native mobile app.

23 |

As it became clear that this was the quickest and most effective way to design mobile apps, components were abstracted from these prototypes and became the framework you know today.

24 |

Released in November 2012, Ratchet quickly became one of the most popular prototyping tools on GitHub. Following that initial launch, we released v2 – a complete rewrite. With v2 we've abstracted the platform specific styles into their own theme CSS files, added an icon set called Ratchicons, and offically became part of the Bootstrap family.

25 |
26 | 27 |
28 |

Team

29 |

Ratchet is maintained by one of its creators, a couple of core contributors, and its awesome community.

30 | 31 |
32 |
33 | 34 | 35 | @connors 36 |
37 | Connor Sears 38 | @connors 39 |
40 | 41 |
42 |
43 | 44 | 45 | @mdo 46 |
47 | Mark Otto 48 | @mdo 49 |
50 | 51 |
52 |
53 | 54 |

Get involved with Ratchet development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.

55 |
56 |
57 | 58 |
59 | {% include download-module.html %} 60 |
61 |
62 | 63 |
64 | 65 | {% include footer.html %} 66 |
67 |
68 | -------------------------------------------------------------------------------- /docs/assets/css/pygments-manni.css: -------------------------------------------------------------------------------- 1 | .hll { background-color: #ffffcc } 2 | /*{ background: #f0f3f3; }*/ 3 | .c { color: #999; } /* Comment */ 4 | .err { color: #AA0000; background-color: #FFAAAA } /* Error */ 5 | .k { color: #006699; } /* Keyword */ 6 | .o { color: #555555 } /* Operator */ 7 | .cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ 8 | .cp { color: #009999 } /* Comment.Preproc */ 9 | .c1 { color: #999; } /* Comment.Single */ 10 | .cs { color: #999; } /* Comment.Special */ 11 | .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ 12 | .ge { font-style: italic } /* Generic.Emph */ 13 | .gr { color: #FF0000 } /* Generic.Error */ 14 | .gh { color: #003300; } /* Generic.Heading */ 15 | .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ 16 | .go { color: #AAAAAA } /* Generic.Output */ 17 | .gp { color: #000099; } /* Generic.Prompt */ 18 | .gs { } /* Generic.Strong */ 19 | .gu { color: #003300; } /* Generic.Subheading */ 20 | .gt { color: #99CC66 } /* Generic.Traceback */ 21 | .kc { color: #006699; } /* Keyword.Constant */ 22 | .kd { color: #006699; } /* Keyword.Declaration */ 23 | .kn { color: #006699; } /* Keyword.Namespace */ 24 | .kp { color: #006699 } /* Keyword.Pseudo */ 25 | .kr { color: #006699; } /* Keyword.Reserved */ 26 | .kt { color: #007788; } /* Keyword.Type */ 27 | .m { color: #FF6600 } /* Literal.Number */ 28 | .s { color: #d44950 } /* Literal.String */ 29 | .na { color: #4f9fcf } /* Name.Attribute */ 30 | .nb { color: #336666 } /* Name.Builtin */ 31 | .nc { color: #00AA88; } /* Name.Class */ 32 | .no { color: #336600 } /* Name.Constant */ 33 | .nd { color: #9999FF } /* Name.Decorator */ 34 | .ni { color: #999999; } /* Name.Entity */ 35 | .ne { color: #CC0000; } /* Name.Exception */ 36 | .nf { color: #CC00FF } /* Name.Function */ 37 | .nl { color: #9999FF } /* Name.Label */ 38 | .nn { color: #00CCFF; } /* Name.Namespace */ 39 | .nt { color: #2f6f9f; } /* Name.Tag */ 40 | .nv { color: #003333 } /* Name.Variable */ 41 | .ow { color: #000000; } /* Operator.Word */ 42 | .w { color: #bbbbbb } /* Text.Whitespace */ 43 | .mf { color: #FF6600 } /* Literal.Number.Float */ 44 | .mh { color: #FF6600 } /* Literal.Number.Hex */ 45 | .mi { color: #FF6600 } /* Literal.Number.Integer */ 46 | .mo { color: #FF6600 } /* Literal.Number.Oct */ 47 | .sb { color: #CC3300 } /* Literal.String.Backtick */ 48 | .sc { color: #CC3300 } /* Literal.String.Char */ 49 | .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ 50 | .s2 { color: #CC3300 } /* Literal.String.Double */ 51 | .se { color: #CC3300; } /* Literal.String.Escape */ 52 | .sh { color: #CC3300 } /* Literal.String.Heredoc */ 53 | .si { color: #AA0000 } /* Literal.String.Interpol */ 54 | .sx { color: #CC3300 } /* Literal.String.Other */ 55 | .sr { color: #33AAAA } /* Literal.String.Regex */ 56 | .s1 { color: #CC3300 } /* Literal.String.Single */ 57 | .ss { color: #FFCC33 } /* Literal.String.Symbol */ 58 | .bp { color: #336666 } /* Name.Builtin.Pseudo */ 59 | .vc { color: #003333 } /* Name.Variable.Class */ 60 | .vg { color: #003333 } /* Name.Variable.Global */ 61 | .vi { color: #003333 } /* Name.Variable.Instance */ 62 | .il { color: #FF6600 } /* Literal.Number.Integer.Long */ 63 | 64 | .css .o, 65 | .css .o + .nt, 66 | .css .nt + .nt { color: #999; } 67 | -------------------------------------------------------------------------------- /docs/assets/img/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /docs/assets/img/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /docs/assets/img/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /docs/assets/img/device-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/device-sprite.png -------------------------------------------------------------------------------- /docs/assets/img/example-android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/example-android.png -------------------------------------------------------------------------------- /docs/assets/img/example-ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/example-ios.png -------------------------------------------------------------------------------- /docs/assets/img/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/example.png -------------------------------------------------------------------------------- /docs/assets/img/slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/slide-1.jpg -------------------------------------------------------------------------------- /docs/assets/img/slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/slide-2.jpg -------------------------------------------------------------------------------- /docs/assets/img/slide-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/assets/img/slide-3.jpg -------------------------------------------------------------------------------- /docs/assets/js/docs.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery: true */ 2 | /* global FingerBlast: true */ 3 | 4 | $(function () { 5 | 'use strict'; 6 | 7 | var doc; 8 | var device; 9 | var windowWidth; 10 | var windowHeight; 11 | var pageHeight; 12 | var contentPadding; 13 | var footerHeight; 14 | var navComponentLinks; 15 | var componentsList; 16 | var componentLinks; 17 | var contentSection; 18 | var currentActive; 19 | var topCache; 20 | var win; 21 | var bod; 22 | var eventListeners; 23 | var toolbarToggle; 24 | 25 | 26 | var initialize = function () { 27 | currentActive = 0; 28 | topCache = []; 29 | win = $(window); 30 | doc = $(document); 31 | bod = $(document.body); 32 | device = device || $('.js-device'); 33 | navComponentLinks = $('.js-jump-menu'); 34 | componentsList = $('.js-component-group'); 35 | componentLinks = $('.component-example a'); 36 | contentSection = $('.component'); 37 | topCache = contentSection.map(function () { return $(this).offset().top; }); 38 | windowHeight = $(window).height() / 3; 39 | windowWidth = $(window).width(); 40 | pageHeight = $(document).height(); 41 | contentPadding = parseInt($('.docs-content').css('padding-bottom'), 10); 42 | footerHeight = $('.docs-footer').outerHeight(false); 43 | toolbarToggle = $('.js-docs-component-toolbar'); 44 | 45 | // Device placement 46 | if (windowWidth >= 768 && device.offset()) { 47 | device.initialLeft = device.offset().left; 48 | device.initialTop = device.initialTop || device.offset().top; 49 | device.dockingOffset = ($(window).height() - device.height()) / 2; 50 | } 51 | 52 | checkDesktopContent(); 53 | calculateScroll(); 54 | calculateToggle(); 55 | 56 | if (!eventListeners) { 57 | addEventListeners(); 58 | } 59 | }; 60 | 61 | var addEventListeners = function () { 62 | eventListeners = true; 63 | 64 | device.on('click', function (e) { 65 | e.preventDefault(); 66 | }); 67 | 68 | // Mobile navigation 69 | $('.js-docs-nav-trigger').on('click', function () { 70 | var nav = $('.docs-nav-group'); 71 | var trigger = $('.js-docs-nav-trigger'); 72 | 73 | trigger.toggleClass('active'); 74 | nav.toggleClass('active'); 75 | }); 76 | 77 | navComponentLinks.click(function (e) { 78 | e.stopPropagation(); 79 | e.preventDefault(); 80 | componentsList.toggleClass('active'); 81 | }); 82 | 83 | doc.on('click', function () { 84 | componentsList.removeClass('active'); 85 | }); 86 | 87 | // Platform switcher 88 | $('.platform-switch').on('click', function () { 89 | var components = $('.docs-components'); 90 | var platform = $(this).attr('data-platform'); 91 | 92 | // Set platform 93 | if (components.hasClass('platform-ios')) { 94 | components.removeClass('platform-ios'); 95 | components.addClass(platform); 96 | } else if (components.hasClass('platform-android')) { 97 | components.removeClass('platform-android'); 98 | components.addClass(platform); 99 | } else { 100 | components.addClass(platform); 101 | } 102 | 103 | // Deal with active states 104 | $(this).siblings('.active').removeClass('active'); 105 | $(this).addClass('active'); 106 | }); 107 | 108 | win.on('scroll', calculateScroll); 109 | win.on('scroll', calculateToggle); 110 | }; 111 | 112 | var checkDesktopContent = function () { 113 | windowWidth = $(window).width(); 114 | if (windowWidth <= 768) { 115 | var content = $('.content'); 116 | if (content.length > 1) { 117 | $(content[0]).remove(); 118 | } 119 | } 120 | }; 121 | 122 | var calculateScroll = function () { 123 | // if small screen don't worry about this 124 | if (windowWidth <= 768) { 125 | return; 126 | } 127 | 128 | // Save scrollTop value 129 | var contentSectionItem; 130 | var currentTop = win.scrollTop(); 131 | 132 | // exit if no device 133 | if (!device.length) { 134 | return; 135 | } 136 | 137 | if ((device.initialTop - currentTop) <= device.dockingOffset) { 138 | device[0].className = 'device device-fixed'; 139 | device.css({ top: device.dockingOffset }); 140 | } else { 141 | device[0].className = 'device'; 142 | device[0].setAttribute('style', ''); 143 | } 144 | 145 | function updateContent(content) { 146 | $('#iwindow').html(content); 147 | } 148 | 149 | // Injection of components into device 150 | for (var l = contentSection.length; l--;) { 151 | if ((topCache[l] - currentTop) < windowHeight) { 152 | if (currentActive === l) { 153 | return; 154 | } 155 | currentActive = l; 156 | bod.find('.component.active').removeClass('active'); 157 | contentSectionItem = $(contentSection[l]); 158 | contentSectionItem.addClass('active'); 159 | if (contentSectionItem.attr('id')) { 160 | device.attr('id', contentSectionItem.attr('id') + 'InDevice'); 161 | } else { 162 | device.attr('id', ''); 163 | } 164 | if (!contentSectionItem.hasClass('informational')) { 165 | updateContent(contentSectionItem.find('.highlight .language-html').text()); 166 | } 167 | break; 168 | } 169 | } 170 | 171 | }; 172 | 173 | // Toolbar toggle 174 | var calculateToggle = function () { 175 | var currentTop = win.scrollTop(); 176 | var headerHeight = $('.docs-sub-header').outerHeight(); 177 | 178 | if (currentTop >= headerHeight) { 179 | toolbarToggle.addClass('visible'); 180 | } else if (currentTop <= headerHeight) { 181 | toolbarToggle.removeClass('visible'); 182 | componentsList.removeClass('active'); 183 | } 184 | }; 185 | 186 | $(window).on('load resize', initialize); 187 | $(window).on('load', function () { 188 | if (window.FingerBlast) { 189 | new FingerBlast('.device-content'); 190 | } 191 | }); 192 | }); 193 | -------------------------------------------------------------------------------- /docs/assets/js/docs.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * ===================================================== 3 | * Ratchet v2.0.2 (http://goratchet.com) 4 | * Copyright 2016 Connor Sears 5 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 6 | * 7 | * v2.0.2 designed by @connors. 8 | * ===================================================== 9 | */ 10 | $(function(){"use strict";var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r=function(){l=0,m=[],n=$(window),a=$(document),o=$(document.body),b=b||$(".js-device"),h=$(".js-jump-menu"),i=$(".js-component-group"),j=$(".component-example a"),k=$(".component"),m=k.map(function(){return $(this).offset().top}),d=$(window).height()/3,c=$(window).width(),e=$(document).height(),f=parseInt($(".docs-content").css("padding-bottom"),10),g=$(".docs-footer").outerHeight(!1),q=$(".js-docs-component-toolbar"),c>=768&&b.offset()&&(b.initialLeft=b.offset().left,b.initialTop=b.initialTop||b.offset().top,b.dockingOffset=($(window).height()-b.height())/2),t(),u(),v(),p||s()},s=function(){p=!0,b.on("click",function(a){a.preventDefault()}),$(".js-docs-nav-trigger").on("click",function(){var a=$(".docs-nav-group"),b=$(".js-docs-nav-trigger");b.toggleClass("active"),a.toggleClass("active")}),h.click(function(a){a.stopPropagation(),a.preventDefault(),i.toggleClass("active")}),a.on("click",function(){i.removeClass("active")}),$(".platform-switch").on("click",function(){var a=$(".docs-components"),b=$(this).attr("data-platform");a.hasClass("platform-ios")?(a.removeClass("platform-ios"),a.addClass(b)):a.hasClass("platform-android")?(a.removeClass("platform-android"),a.addClass(b)):a.addClass(b),$(this).siblings(".active").removeClass("active"),$(this).addClass("active")}),n.on("scroll",u),n.on("scroll",v)},t=function(){if(c=$(window).width(),768>=c){var a=$(".content");a.length>1&&$(a[0]).remove()}},u=function(){function a(a){$("#iwindow").html(a)}if(!(768>=c)){var e,f=n.scrollTop();if(b.length){b.initialTop-f<=b.dockingOffset?(b[0].className="device device-fixed",b.css({top:b.dockingOffset})):(b[0].className="device",b[0].setAttribute("style",""));for(var g=k.length;g--;)if(m[g]-f=b?q.addClass("visible"):b>=a&&(q.removeClass("visible"),i.removeClass("active"))};$(window).on("load resize",r),$(window).on("load",function(){window.FingerBlast&&new FingerBlast(".device-content")})}),function(){"use strict";function a(a){this.element="string"==typeof a?document.querySelector(a):a,this.element&&this.listen()}a.prototype={x:NaN,y:NaN,startDistance:NaN,startAngle:NaN,mouseIsDown:!1,listen:function(){function a(a,b){var c,d,e;if(a){if("compareDocumentPosition"in b)return!!(16&b.compareDocumentPosition(a));if("contains"in b)return b!==a&&b.contains(a);for(c=b.getElementsByTagName("*"),d=0;e=c[d++];)if(e===a)return!0;return!1}}var b=this.activate.bind(this),c=this.deactivate.bind(this);this.element.addEventListener("mouseover",function(c){var d=c.relatedTarget;d===this||a(d,this)||b()}),this.element.addEventListener("mouseout",function(b){var d=b.relatedTarget;d===this||a(d,this)||c(b)})},activate:function(){this.active||(this.element.addEventListener("mousedown",this.touchStart=this.touchStart.bind(this),!0),this.element.addEventListener("mousemove",this.touchMove=this.touchMove.bind(this),!0),this.element.addEventListener("mouseup",this.touchEnd=this.touchEnd.bind(this),!0),this.element.addEventListener("click",this.click=this.click.bind(this),!0),this.active=!0)},deactivate:function(a){this.active=!1,this.mouseIsDown&&this.touchEnd(a),this.element.removeEventListener("mousedown",this.touchStart,!0),this.element.removeEventListener("mousemove",this.touchMove,!0),this.element.removeEventListener("mouseup",this.touchEnd,!0),this.element.removeEventListener("click",this.click,!0)},click:function(a){a.synthetic||(a.preventDefault(),a.stopPropagation())},touchStart:function(a){a.synthetic||/input|textarea/.test(a.target.tagName.toLowerCase())||(this.mouseIsDown=!0,a.preventDefault(),a.stopPropagation(),this.fireTouchEvents("touchstart",a))},touchMove:function(a){a.synthetic||(a.preventDefault(),a.stopPropagation(),this.move(a.clientX,a.clientY),this.mouseIsDown&&this.fireTouchEvents("touchmove",a))},touchEnd:function(a){a.synthetic||(this.mouseIsDown=!1,a.preventDefault(),a.stopPropagation(),this.fireTouchEvents("touchend",a),this.target&&(this.target.dispatchEvent(this.createMouseEvent("mouseover",a)),this.target.dispatchEvent(this.createMouseEvent("mousemove",a)),this.target.dispatchEvent(this.createMouseEvent("mousedown",a))))},fireTouchEvents:function(a,b){var c=[],d=[];if(this.target){var e="on"+a;if(e in this.target&&(console.warn("Converting `"+e+"` property to event listener.",this.target),this.target.addEventListener(a,this.target[e],!1),delete this.target[e]),this.target.hasAttribute(e)){console.warn("Converting `"+e+"` attribute to event listener.",this.target);var f=new GLOBAL.Function("event",this.target.getAttribute(e));this.target.addEventListener(a,f,!1),this.target.removeAttribute(e)}var g=this.createMouseEvent(a,b);if(c.push(g),c.length>1){var h=c[0].pageX-c[1].pageX,i=c[0].pageY-c[1].pageY,j=Math.sqrt(Math.pow(h,2)+Math.pow(i,2)),k=Math.atan2(h,i)*(180/Math.PI),l="gesturechange";"touchstart"===a&&(l="gesturestart",this.startDistance=j,this.startAngle=k),"touchend"===a&&(l="gestureend"),c.forEach(function(a){var b=this.createMouseEvent.call(a._finger,l,a);d.push(b)}.bind(this)),c.concat(d).forEach(function(a){a.scale=j/this.startDistance,a.rotation=this.startAngle-k})}c.forEach(function(a){a.touches=c.filter(function(a){return~a.type.indexOf("touch")&&"touchend"!==a.type}),a.changedTouches=c.filter(function(b){return~b.type.indexOf("touch")&&b._finger.target===a._finger.target}),a.targetTouches=a.changedTouches.filter(function(a){return~a.type.indexOf("touch")&&"touchend"!==a.type})}),c.concat(d).forEach(function(a,b){a.identifier=b,a._finger.target.dispatchEvent(a)})}},createMouseEvent:function(a,b){var c=new MouseEvent(a,{view:window,detail:b.detail,bubbles:!0,cancelable:!0,target:this.target||b.relatedTarget,clientX:this.x||b.clientX,clientY:this.y||b.clientY,screenX:this.x||b.screenX,screenY:this.y||b.screenY,ctrlKey:b.ctrlKey,shiftKey:b.shiftKey,altKey:b.altKey,metaKey:b.metaKey,button:b.button});return c.synthetic=!0,c._finger=this,c},move:function(a,b){isNaN(a)||isNaN(b)?this.target=null:(this.x=a,this.y=b,this.mouseIsDown||(this.target=document.elementFromPoint(a,b)))}},window.FingerBlast=a}(); -------------------------------------------------------------------------------- /docs/assets/js/fingerblast.js: -------------------------------------------------------------------------------- 1 | // FINGERBLAST.js 2 | // -------------- 3 | // Adapted from phantom limb by Brian Cartensen 4 | 5 | /* jshint bitwise: false */ 6 | /* global GLOBAL: true */ 7 | 8 | (function () { 9 | 10 | 'use strict'; 11 | 12 | function FingerBlast (element) { 13 | this.element = typeof element === 'string' ? document.querySelector(element) : element; 14 | 15 | if (this.element) { 16 | this.listen(); 17 | } 18 | } 19 | 20 | FingerBlast.prototype = { 21 | x: NaN, 22 | y: NaN, 23 | 24 | startDistance: NaN, 25 | startAngle: NaN, 26 | 27 | mouseIsDown: false, 28 | 29 | listen: function () { 30 | var activate = this.activate.bind(this); 31 | var deactivate = this.deactivate.bind(this); 32 | 33 | function contains (element, ancestor) { 34 | var descendants; 35 | var index; 36 | var descendant; 37 | 38 | if (!element) { 39 | return; 40 | } 41 | 42 | if ('compareDocumentPosition' in ancestor) { 43 | return !!(ancestor.compareDocumentPosition(element) & 16); 44 | } else if ('contains' in ancestor) { 45 | return ancestor !== element && ancestor.contains(element); 46 | } else { 47 | for ((descendants = ancestor.getElementsByTagName('*')), index = 0; (descendant = descendants[index++]);) { 48 | if (descendant === element) { 49 | return true; 50 | } 51 | } 52 | return false; 53 | } 54 | } 55 | 56 | this.element.addEventListener('mouseover', function (e) { 57 | var target = e.relatedTarget; 58 | if (target !== this && !contains(target, this)) { 59 | activate(); 60 | } 61 | }); 62 | 63 | this.element.addEventListener('mouseout', function (e) { 64 | var target = e.relatedTarget; 65 | if (target !== this && !contains(target, this)) { 66 | deactivate(e); 67 | } 68 | }); 69 | }, 70 | 71 | activate: function () { 72 | if (this.active) { 73 | return; 74 | } 75 | this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true); 76 | this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true); 77 | this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true); 78 | this.element.addEventListener('click', (this.click = this.click.bind(this)), true); 79 | this.active = true; 80 | }, 81 | 82 | deactivate: function (e) { 83 | this.active = false; 84 | if (this.mouseIsDown) { 85 | this.touchEnd(e); 86 | } 87 | this.element.removeEventListener('mousedown', this.touchStart, true); 88 | this.element.removeEventListener('mousemove', this.touchMove, true); 89 | this.element.removeEventListener('mouseup', this.touchEnd, true); 90 | this.element.removeEventListener('click', this.click, true); 91 | }, 92 | 93 | click: function (e) { 94 | if (e.synthetic) { 95 | return; 96 | } 97 | e.preventDefault(); 98 | e.stopPropagation(); 99 | }, 100 | 101 | touchStart: function (e) { 102 | if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) { 103 | return; 104 | } 105 | 106 | this.mouseIsDown = true; 107 | 108 | e.preventDefault(); 109 | e.stopPropagation(); 110 | 111 | this.fireTouchEvents('touchstart', e); 112 | }, 113 | 114 | touchMove: function (e) { 115 | if (e.synthetic) { 116 | return; 117 | } 118 | 119 | e.preventDefault(); 120 | e.stopPropagation(); 121 | 122 | this.move(e.clientX, e.clientY); 123 | 124 | if (this.mouseIsDown) { 125 | this.fireTouchEvents('touchmove', e); 126 | } 127 | }, 128 | 129 | touchEnd: function (e) { 130 | if (e.synthetic) { 131 | return; 132 | } 133 | 134 | this.mouseIsDown = false; 135 | 136 | e.preventDefault(); 137 | e.stopPropagation(); 138 | 139 | this.fireTouchEvents('touchend', e); 140 | 141 | if (!this.target) { 142 | return; 143 | } 144 | 145 | // Mobile Safari moves all the mouse events to fire after the touchend event. 146 | this.target.dispatchEvent(this.createMouseEvent('mouseover', e)); 147 | this.target.dispatchEvent(this.createMouseEvent('mousemove', e)); 148 | this.target.dispatchEvent(this.createMouseEvent('mousedown', e)); 149 | }, 150 | 151 | fireTouchEvents: function (eventName, originalEvent) { 152 | var events = []; 153 | var gestures = []; 154 | 155 | if (!this.target) { 156 | return; 157 | } 158 | 159 | // Convert 'ontouch*' properties and attributes to listeners. 160 | var onEventName = 'on' + eventName; 161 | 162 | if (onEventName in this.target) { 163 | console.warn('Converting `' + onEventName + '` property to event listener.', this.target); 164 | this.target.addEventListener(eventName, this.target[onEventName], false); 165 | delete this.target[onEventName]; 166 | } 167 | 168 | if (this.target.hasAttribute(onEventName)) { 169 | console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target); 170 | var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName)); 171 | this.target.addEventListener(eventName, handler, false); 172 | this.target.removeAttribute(onEventName); 173 | } 174 | 175 | // Set up a new event with the coordinates of the finger. 176 | var touch = this.createMouseEvent(eventName, originalEvent); 177 | 178 | events.push(touch); 179 | 180 | // Figure out scale and rotation. 181 | if (events.length > 1) { 182 | var x = events[0].pageX - events[1].pageX; 183 | var y = events[0].pageY - events[1].pageY; 184 | 185 | var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); 186 | var angle = Math.atan2(x, y) * (180 / Math.PI); 187 | 188 | var gestureName = 'gesturechange'; 189 | 190 | if (eventName === 'touchstart') { 191 | gestureName = 'gesturestart'; 192 | this.startDistance = distance; 193 | this.startAngle = angle; 194 | } 195 | 196 | if (eventName === 'touchend') { 197 | gestureName = 'gestureend'; 198 | } 199 | 200 | events.forEach(function (event) { 201 | var gesture = this.createMouseEvent.call(event._finger, gestureName, event); 202 | gestures.push(gesture); 203 | }.bind(this)); 204 | 205 | events.concat(gestures).forEach(function (event) { 206 | event.scale = distance / this.startDistance; 207 | event.rotation = this.startAngle - angle; 208 | }); 209 | } 210 | 211 | // Loop through the events array and fill in each touch array. 212 | events.forEach(function (touch) { 213 | touch.touches = events.filter(function (e) { 214 | return ~e.type.indexOf('touch') && e.type !== 'touchend'; 215 | }); 216 | 217 | touch.changedTouches = events.filter(function (e) { 218 | return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target; 219 | }); 220 | 221 | touch.targetTouches = touch.changedTouches.filter(function (e) { 222 | return ~e.type.indexOf('touch') && e.type !== 'touchend'; 223 | }); 224 | }); 225 | 226 | // Then fire the events. 227 | events.concat(gestures).forEach(function (event, i) { 228 | event.identifier = i; 229 | event._finger.target.dispatchEvent(event); 230 | }); 231 | }, 232 | 233 | createMouseEvent: function (eventName, originalEvent) { 234 | var e = new MouseEvent(eventName, { 235 | view : window, 236 | detail : originalEvent.detail, 237 | bubbles : true, 238 | cancelable : true, 239 | target : this.target || originalEvent.relatedTarget, 240 | clientX : this.x || originalEvent.clientX, 241 | clientY : this.y || originalEvent.clientY, 242 | screenX : this.x || originalEvent.screenX, 243 | screenY : this.y || originalEvent.screenY, 244 | ctrlKey : originalEvent.ctrlKey, 245 | shiftKey : originalEvent.shiftKey, 246 | altKey : originalEvent.altKey, 247 | metaKey : originalEvent.metaKey, 248 | button : originalEvent.button 249 | }); 250 | 251 | e.synthetic = true; 252 | e._finger = this; 253 | 254 | return e; 255 | }, 256 | 257 | move: function (x, y) { 258 | if (isNaN(x) || isNaN(y)) { 259 | this.target = null; 260 | } else { 261 | this.x = x; 262 | this.y = y; 263 | 264 | if (!this.mouseIsDown) { 265 | this.target = document.elementFromPoint(x, y); 266 | } 267 | } 268 | } 269 | }; 270 | 271 | window.FingerBlast = FingerBlast; 272 | 273 | }()); 274 | -------------------------------------------------------------------------------- /docs/dist/css/ratchet-theme-ios.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * ===================================================== 3 | * Ratchet v2.0.2 (http://goratchet.com) 4 | * Copyright 2016 Connor Sears 5 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 6 | * 7 | * v2.0.2 designed by @connors. 8 | * ===================================================== 9 | */a{color:#007aff}a:active{color:#0062cc}.content{background-color:#efeff4}.h5,.h6,h5,h6,p{color:#8f8f94}.h5,.h6,h5,h6{font-weight:400;text-transform:uppercase}.btn{color:#929292;background-color:rgba(247,247,247,.98);border:1px solid #929292;-webkit-transition:all;transition:all;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s}.btn.active,.btn:active{color:#fff;background-color:#929292}.btn-primary{color:#fff;background-color:#007aff;border:1px solid #007aff}.btn-primary.active,.btn-primary:active{background-color:#0062cc;border:1px solid #0062cc}.btn-positive{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.btn-positive.active,.btn-positive:active{background-color:#2ac845;border:1px solid #2ac845}.btn-negative{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.btn-negative.active,.btn-negative:active{background-color:#cf2d28;border:1px solid #cf2d28}.btn-link,.btn-outlined{background-color:transparent}.btn-outlined.btn-primary{color:#007aff}.btn-outlined.btn-positive{color:#4cd964}.btn-outlined.btn-negative{color:#dd524d}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff}.btn-link{color:#007aff;border:none}.bar-tab,.bar.bar-footer,.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab,.table-view{border-top:0}.btn-link.active,.btn-link:active{color:#0062cc;background-color:transparent}.btn .badge{background-color:rgba(0,0,0,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{background-color:rgba(247,247,247,.98);border-bottom:0;box-shadow:0 0 1px rgba(0,0,0,.85)}.bar.bar-header-secondary{top:44px}.bar.bar-footer-secondary{bottom:44px}.bar.bar-footer-secondary-tab{bottom:50px}.tab-item{color:#929292}.bar-nav .btn-link,.tab-item.active,.tab-item:active{color:#007aff}.bar-nav .btn-link:active{color:#007aff;opacity:.6}.badge.badge-inverted{color:#929292;background-color:transparent}.badge-primary{color:#fff;background-color:#007aff}.badge-primary.badge-inverted{color:#007aff;background-color:transparent}.badge-positive{color:#fff;background-color:#4cd964}.badge-positive.badge-inverted{color:#4cd964;background-color:transparent}.badge-negative{color:#fff;background-color:#dd524d}.badge-negative.badge-inverted{color:#dd524d;background-color:transparent}.card .table-view,.card .table-view-cell:last-child{background-image:none}.table-view{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border-bottom:0}.table-view .table-view-cell{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.table-view .table-view-cell:last-child{background-image:none}.input-group,.table-view .table-view-divider{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0}.table-view .table-view-cell>a:not(.btn):active{color:inherit}.table-view .table-view-divider{border-top:0;border-bottom:0}.input-group,input[type=text],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2)}input[type=search]{height:34px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}input[type=search]:focus{text-align:left}.input-group,select,textarea{height:auto}.input-group{padding:0;border:0}.input-group input,.input-row{background-repeat:no-repeat;background-position:15px 100%}.input-group input{background-image:url("data:image/svg+xml;utf8,");border:0}.input-group input:last-child{background-image:none}.input-row{background-image:url("data:image/svg+xml;utf8,");border-bottom:0}.input-row label+input,.input-row:last-child,.popover .table-view{background-image:none}.segmented-control{background-color:transparent;border:1px solid #929292}.segmented-control .control-item{color:#929292;border-color:#929292;-webkit-transition:background-color .1s linear;transition:background-color .1s linear}.segmented-control .control-item:active{background-color:#ebebeb}.segmented-control .control-item.active{color:#fff;background-color:#929292}.segmented-control-primary{border:1px solid #007aff}.segmented-control-primary .control-item{color:#007aff;border-color:inherit}.segmented-control-primary .control-item:active{background-color:#b3d7ff}.segmented-control-primary .control-item.active{color:#fff;background-color:#007aff}.segmented-control-positive{border:1px solid #4cd964}.segmented-control-positive .control-item{color:#4cd964;border-color:inherit}.segmented-control-positive .control-item:active{background-color:#dff8e4}.segmented-control-positive .control-item.active{color:#fff;background-color:#4cd964}.segmented-control-negative{border:1px solid #dd524d}.segmented-control-negative .control-item{color:#dd524d;border-color:inherit}.segmented-control-negative .control-item:active{background-color:#fae4e3}.segmented-control-negative .control-item.active{color:#fff;background-color:#dd524d}.popover{border-radius:12px;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out}.popover:before{border-bottom:15px solid rgba(247,247,247,.98)}.popover .bar{box-shadow:none}.popover .bar-nav{border-bottom:1px solid rgba(0,0,0,.15)}.popover .table-view{border-radius:12px}.modal,.modal.active{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.toggle{width:47px;border:2px solid #e6e6e6;box-shadow:inset 0 0 0 0 #e1e1e1;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:box-shadow,border;transition-property:box-shadow,border}.toggle .toggle-handle{border:1px solid rgba(0,0,0,.2);box-shadow:0 3px 3px rgba(0,0,0,.08);-webkit-transition-property:-webkit-transform,border,width;transition-property:transform,border,width}.toggle:before{display:none}.toggle.active{background-color:transparent;border:2px solid #4cd964;box-shadow:inset 0 0 0 13px #4cd964}.toggle.active .toggle-handle{-webkit-transform:translate3d(17px,0,0);transform:translate3d(17px,0,0);border-color:#4cd964}.content.fade{-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.content.sliding{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.content.sliding.right:not([class*=sliding-in]),.content.sliding.sliding-in{-webkit-animation-name:fadeOverlay;animation-name:fadeOverlay;-webkit-animation-duration:.4s;animation-duration:.4s}.content.sliding.right:not([class*=sliding-in]){-webkit-animation-direction:reverse;animation-direction:reverse}.content.sliding.left{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}@-webkit-keyframes fadeOverlay{from{box-shadow:0 0 10px transparent,-320px 0 0 transparent}to{box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1)}} -------------------------------------------------------------------------------- /docs/dist/css/ratchet.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["dist/css/ratchet.css"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /docs/dist/fonts/ratchicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/dist/fonts/ratchicons.eot -------------------------------------------------------------------------------- /docs/dist/fonts/ratchicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/dist/fonts/ratchicons.ttf -------------------------------------------------------------------------------- /docs/dist/fonts/ratchicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/dist/fonts/ratchicons.woff -------------------------------------------------------------------------------- /docs/examples.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Examples · Ratchet 4 | --- 5 | 6 |
7 | {% include masthead.html %} 8 |
9 |
10 |

Examples

11 |

Take a look at some of these example apps built on Ratchet.

12 |
13 | {% include ad.html %} 14 |
15 |
16 | 17 |
18 |
19 |
20 | 21 |

Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.

22 | 23 |
24 |
25 |
26 | 27 | Movie finder app example 28 | 29 |

Movie finder

30 |
31 |
32 |
33 |
34 | 35 | iOS mail app example 36 | 37 |

iOS mail app

38 |
39 |
40 |
41 |
42 | 43 | Android notes app example 44 | 45 |

Android notes app

46 |
47 |
48 |
49 |
50 | 51 |
52 | {% include download-module.html %} 53 |
54 |
55 | 56 |
57 | 58 | {% include footer.html %} 59 |
60 |
61 | -------------------------------------------------------------------------------- /docs/examples/app-android-notes/css/app.css: -------------------------------------------------------------------------------- 1 | .slider, 2 | .slider img { 3 | margin-bottom: 0; 4 | height: 150px; 5 | } 6 | -------------------------------------------------------------------------------- /docs/examples/app-android-notes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Notes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |

23 | 24 | Notes 25 | 26 |

27 | 28 |
29 | 30 |
31 | 32 | 112 |
113 | 114 | 115 | 129 | 130 | 131 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /docs/examples/app-ios-mail/css/app.css: -------------------------------------------------------------------------------- 1 | .updated-text { 2 | position: absolute; 3 | left: 0; 4 | right: 0; 5 | padding: 10px 0; 6 | font-size: 11px; 7 | text-align: center; 8 | } 9 | 10 | .table-view-cell .icon { 11 | color: #007aff; 12 | } 13 | -------------------------------------------------------------------------------- /docs/examples/app-ios-mail/inbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mail 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |

All inboxes

20 |
21 | 22 |
23 | 24 | 116 |
117 | 118 | 119 | -------------------------------------------------------------------------------- /docs/examples/app-ios-mail/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mail 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |

Mailboxes

19 |
20 | 21 |
22 | 23 | Updated just now 24 |
25 | 26 |
27 | 28 | 62 | 63 |
Other accounts
64 | 74 |
75 | 76 | 77 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /docs/examples/app-movies/choose-theater.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Movie finder 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | Back 19 | 20 |

Argo

21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
    31 |
  • Theaters nearby
    • 32 |
  • 33 | Metreon 16 34 |

    1.3 miles away

    35 | Buy Tickets 36 |
    • 37 |
  • 38 | AMC 5 39 |

    3.5 miles away

    40 | Buy Tickets 41 |
    • 42 |
  • 43 | Regal 42 44 |

    7.3 miles away

    45 | Buy Tickets 46 |
    • 47 |
  • 48 | Shorline theater 49 |

    12.5 miles away

    50 | Buy Tickets 51 |
    • 52 |
  • 53 | AMC 16 54 |

    12.2 miles away

    55 | Buy Tickets 56 |
    • 57 |
  • 58 | BW3 16 59 |

    13.4 miles away

    60 | Buy Tickets 61 |
    • 62 |
  • 63 | MC Hammer 16 64 |

    14.1 miles away

    65 | Buy Tickets 66 |
    • 67 |
  • 68 | AMC 3 69 |

    14.3 miles away

    70 | Buy Tickets 71 |
    • 72 |
  • 73 | AMC 2 74 |

    14.7 miles away

    75 | Buy Tickets 76 |
    • 77 |
  • 78 | AMC 10 79 |

    15 miles away

    80 | Buy Tickets 81 |
    • 82 |
83 |
84 | 85 | 86 | -------------------------------------------------------------------------------- /docs/examples/app-movies/css/app.css: -------------------------------------------------------------------------------- 1 | .slider { 2 | margin-bottom: 0; 3 | } 4 | .slider img { 5 | width: auto; 6 | height: 150px; 7 | } 8 | .content-padded { 9 | margin: 30px 15px 15px; 10 | } 11 | -------------------------------------------------------------------------------- /docs/examples/app-movies/img/argo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/examples/app-movies/img/argo.png -------------------------------------------------------------------------------- /docs/examples/app-movies/img/ralph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/examples/app-movies/img/ralph.png -------------------------------------------------------------------------------- /docs/examples/app-movies/img/skyfall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/examples/app-movies/img/skyfall.png -------------------------------------------------------------------------------- /docs/examples/app-movies/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Movie finder 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |

Movie finder

18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 | 28 |
29 |
30 |
31 | Argo 32 |
33 |
34 | Skyfall 35 |
36 |
37 | Wreck-It Ralph 38 |
39 |
40 |
41 | 42 | 126 |
127 | 128 | 129 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Ratchet 4 | --- 5 | 6 |
7 | {% include masthead.html %} 8 |
9 |

Build mobile apps with simple HTML‚ CSS‚ and JS components.

10 | Download Ratchet 11 |

Currently v2.0.2

12 |
13 | 14 |
15 | {% include ad.html %} 16 | {% include footer.html %} 17 |
18 |
19 | -------------------------------------------------------------------------------- /docs/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ratchet 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Push

19 |
20 |
21 |
22 | 29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | # www.robotstxt.org/ 5 | 6 | # Allow crawling of all content 7 | User-agent: * 8 | Disallow: 9 | Sitemap: {{ site.url }}/sitemap.xml 10 | -------------------------------------------------------------------------------- /docs/sitemap.xml: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | 7 | {{ site.url }}/ 8 | {{ site.time | date_to_xmlschema }} 9 | daily 10 | 1.0 11 | 12 | {% for page in site.html_pages %} 13 | {% if page.layout != "home" %} 14 | 15 | {{ site.url }}{{ page.url }} 16 | {{ site.time | date_to_xmlschema }} 17 | weekly 18 | 0.7 19 | 20 | {% endif %} 21 | {% endfor %} 22 | 23 | -------------------------------------------------------------------------------- /docs/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ratchet template page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

Ratchet

34 |
35 | 36 | 37 |
38 |

Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:

39 |
40 | 62 |
63 |
64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /docs/two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ratchet 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |

Page two

20 |
21 |
22 |
23 | 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /fonts/ratchicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/fonts/ratchicons.eot -------------------------------------------------------------------------------- /fonts/ratchicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/fonts/ratchicons.ttf -------------------------------------------------------------------------------- /fonts/ratchicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/twbs/ratchet/c662c76a369148ac8887ac1831301de15e85e90f/fonts/ratchicons.woff -------------------------------------------------------------------------------- /grunt/ratchicons-data-generator.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ratchet Grunt task for Ratchicons data generation 3 | * http://goratchet.com 4 | * Original script from Bootstrap (http://getbootstrap.com). 5 | * Bootstrap is copyright 2015 Twitter, Inc. and licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE). 6 | */ 7 | 8 | /* jshint node: true */ 9 | 10 | 'use strict'; 11 | 12 | var fs = require('fs'); 13 | 14 | module.exports = function generateRatchiconsData(grunt) { 15 | // Pass encoding, utf8, so `readFileSync` will return a string instead of a 16 | // buffer 17 | var ratchiconsFile = fs.readFileSync('sass/ratchicons.scss', 'utf8'); 18 | var ratchiconsLines = ratchiconsFile.split('\n'); 19 | 20 | // Use any line that starts with ".icon-" and capture the class name 21 | var iconClassName = /^\.(icon-[^\s]+)/; 22 | var ratchiconsData = '# This file is generated via Grunt task. **Do not edit directly.**\n' + 23 | '# See the \'build-ratchicons-data\' task in Gruntfile.js.\n\n'; 24 | var ratchiconsYml = 'docs/_data/ratchicons.yml'; 25 | for (var i = 0, len = ratchiconsLines.length; i < len; i++) { 26 | var match = ratchiconsLines[i].match(iconClassName); 27 | 28 | if (match !== null) { 29 | ratchiconsData += '- ' + match[1] + '\n'; 30 | } 31 | } 32 | 33 | // Create the `_data` directory if it doesn't already exist 34 | if (!fs.existsSync('docs/_data')) { 35 | fs.mkdirSync('docs/_data'); 36 | } 37 | 38 | try { 39 | fs.writeFileSync(ratchiconsYml, ratchiconsData); 40 | } catch (err) { 41 | grunt.fail.warn(err); 42 | } 43 | grunt.log.writeln('File ' + ratchiconsYml.cyan + ' created.'); 44 | }; 45 | -------------------------------------------------------------------------------- /js/.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "disallowEmptyBlocks": true, 3 | "disallowKeywords": ["with"], 4 | "disallowMixedSpacesAndTabs": true, 5 | "disallowMultipleLineStrings": true, 6 | "disallowMultipleVarDecl": true, 7 | "disallowQuotedKeysInObjects": "allButReserved", 8 | "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"], 9 | "disallowSpaceBeforeBinaryOperators": [","], 10 | "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"], 11 | //"disallowSpacesInFunctionDeclaration": { "beforeOpeningRoundBrace": true }, 12 | "disallowSpacesInNamedFunctionExpression": { "beforeOpeningRoundBrace": true }, 13 | "disallowSpacesInsideArrayBrackets": true, 14 | "disallowSpacesInsideParentheses": true, 15 | "disallowTrailingComma": true, 16 | "disallowTrailingWhitespace": true, 17 | //"requireBlocksOnNewline": true, 18 | "requireCamelCaseOrUpperCaseIdentifiers": true, 19 | "requireCapitalizedConstructors": true, 20 | "requireCommaBeforeLineBreak": true, 21 | "requireCurlyBraces": true, 22 | //"requireDollarBeforejQueryAssignment": true, 23 | "requireDotNotation": true, 24 | "requireLineFeedAtFileEnd": true, 25 | "requirePaddingNewLinesAfterUseStrict": true, 26 | "requirePaddingNewLinesBeforeExport": true, 27 | "requireParenthesesAroundIIFE": true, 28 | "requireSemicolons": true, 29 | "requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="], 30 | "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], 31 | "requireSpaceAfterLineComment": true, 32 | "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="], 33 | "requireSpaceBeforeBlockStatements": true, 34 | "requireSpaceBetweenArguments": true, 35 | "requireSpacesInAnonymousFunctionExpression": { "beforeOpeningCurlyBrace": true, "beforeOpeningRoundBrace": true }, 36 | "requireSpacesInConditionalExpression": true, 37 | //"requireSpacesInForStatement": true, 38 | "requireSpacesInFunction": { "beforeOpeningCurlyBrace": true }, 39 | "requireSpacesInFunctionDeclaration": { "beforeOpeningCurlyBrace": true }, 40 | "requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true }, 41 | "requireSpacesInNamedFunctionExpression": { "beforeOpeningCurlyBrace": true }, 42 | "requireSpacesInsideObjectBrackets": "allButNested", 43 | "validateAlignedFunctionParameters": true, 44 | "validateIndentation": 2, 45 | "validateLineBreaks": "LF", 46 | "validateNewlineAfterArrayElements": true, 47 | "validateParameterSeparator": ", ", 48 | "validateQuoteMarks": "'" 49 | } 50 | -------------------------------------------------------------------------------- /js/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise" : true, 3 | "browser" : true, 4 | "devel" : true, 5 | "eqeqeq" : true, 6 | "expr" : true, 7 | "forin" : true, 8 | "freeze" : true, 9 | "latedef" : false, 10 | "nonbsp" : true, 11 | "strict" : true, 12 | "undef" : true, 13 | "unused" : true 14 | } 15 | -------------------------------------------------------------------------------- /js/common.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Ratchet: common.js v2.0.2 3 | * http://goratchet.com/ 4 | * ======================================================================== 5 | * Copyright 2015 Connor Sears 6 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | !(function () { 10 | 'use strict'; 11 | 12 | // Compatible With CustomEvent 13 | if (!window.CustomEvent) { 14 | window.CustomEvent = function (type, config) { 15 | var e = document.createEvent('CustomEvent'); 16 | e.initCustomEvent(type, config.bubbles, config.cancelable, config.detail); 17 | return e; 18 | }; 19 | } 20 | 21 | // Create Ratchet namespace 22 | if (typeof window.RATCHET === 'undefined') { 23 | window.RATCHET = {}; 24 | } 25 | 26 | // Original script from http://davidwalsh.name/vendor-prefix 27 | window.RATCHET.getBrowserCapabilities = (function () { 28 | var styles = window.getComputedStyle(document.documentElement, ''); 29 | var pre = (Array.prototype.slice 30 | .call(styles) 31 | .join('') 32 | .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) 33 | )[1]; 34 | return { 35 | prefix: '-' + pre + '-', 36 | transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform' 37 | }; 38 | })(); 39 | 40 | window.RATCHET.getTransitionEnd = (function () { 41 | var el = document.createElement('ratchet'); 42 | var transEndEventNames = { 43 | WebkitTransition : 'webkitTransitionEnd', 44 | MozTransition : 'transitionend', 45 | OTransition : 'oTransitionEnd otransitionend', 46 | transition : 'transitionend' 47 | }; 48 | 49 | for (var name in transEndEventNames) { 50 | if (el.style[name] !== undefined) { 51 | return transEndEventNames[name]; 52 | } 53 | } 54 | 55 | return transEndEventNames.transition; 56 | })(); 57 | }()); 58 | -------------------------------------------------------------------------------- /js/modals.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Ratchet: modals.js v2.0.2 3 | * http://goratchet.com/components#modals 4 | * ======================================================================== 5 | * Copyright 2015 Connor Sears 6 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | !(function () { 10 | 'use strict'; 11 | 12 | var findModals = function (target) { 13 | var i; 14 | var modals = document.querySelectorAll('a'); 15 | 16 | for (; target && target !== document; target = target.parentNode) { 17 | for (i = modals.length; i--;) { 18 | if (modals[i] === target) { 19 | return target; 20 | } 21 | } 22 | } 23 | }; 24 | 25 | var getModal = function (event) { 26 | var modalToggle = findModals(event.target); 27 | if (modalToggle && modalToggle.hash) { 28 | return document.querySelector(modalToggle.hash); 29 | } 30 | }; 31 | 32 | window.addEventListener('touchend', function (event) { 33 | var modal = getModal(event); 34 | if (modal && modal.classList.contains('modal')) { 35 | var eventToDispatch = null; 36 | if (modal.classList.contains('active')) { 37 | eventToDispatch = new CustomEvent('modalClose', { 38 | bubbles: true, 39 | cancelable: true 40 | }); 41 | } 42 | else { 43 | eventToDispatch = new CustomEvent('modalOpen', { 44 | bubbles: true, 45 | cancelable: true 46 | }); 47 | } 48 | modal.dispatchEvent(eventToDispatch); 49 | modal.classList.toggle('active'); 50 | event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) 51 | } 52 | }); 53 | }()); 54 | -------------------------------------------------------------------------------- /js/popovers.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Ratchet: popovers.js v2.0.2 3 | * http://goratchet.com/components#popovers 4 | * ======================================================================== 5 | * Copyright 2015 Connor Sears 6 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | !(function () { 10 | 'use strict'; 11 | 12 | var popover; 13 | 14 | var findPopovers = function (target) { 15 | var i; 16 | var popovers = document.querySelectorAll('a'); 17 | 18 | for (; target && target !== document; target = target.parentNode) { 19 | for (i = popovers.length; i--;) { 20 | if (popovers[i] === target) { 21 | return target; 22 | } 23 | } 24 | } 25 | }; 26 | 27 | var onPopoverHidden = function () { 28 | popover.style.display = 'none'; 29 | popover.removeEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden); 30 | }; 31 | 32 | var backdrop = (function () { 33 | var element = document.createElement('div'); 34 | 35 | element.classList.add('backdrop'); 36 | 37 | element.addEventListener('touchend', function () { 38 | popover.addEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden); 39 | popover.classList.remove('visible'); 40 | popover.parentNode.removeChild(backdrop); 41 | }); 42 | 43 | return element; 44 | }()); 45 | 46 | var getPopover = function (e) { 47 | var anchor = findPopovers(e.target); 48 | 49 | if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) { 50 | return; 51 | } 52 | 53 | try { 54 | popover = document.querySelector(anchor.hash); 55 | } catch (error) { 56 | popover = null; 57 | } 58 | 59 | if (popover === null) { 60 | return; 61 | } 62 | 63 | if (!popover || !popover.classList.contains('popover')) { 64 | return; 65 | } 66 | 67 | return popover; 68 | }; 69 | 70 | var showHidePopover = function (e) { 71 | var popover = getPopover(e); 72 | 73 | if (!popover) { 74 | return; 75 | } 76 | 77 | popover.style.display = 'block'; 78 | popover.offsetHeight; 79 | popover.classList.add('visible'); 80 | 81 | popover.parentNode.appendChild(backdrop); 82 | }; 83 | 84 | window.addEventListener('touchend', showHidePopover); 85 | 86 | }()); 87 | -------------------------------------------------------------------------------- /js/segmented-controllers.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Ratchet: segmented-controllers.js v2.0.2 3 | * http://goratchet.com/components#segmentedControls 4 | * ======================================================================== 5 | * Copyright 2015 Connor Sears 6 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | !(function () { 10 | 'use strict'; 11 | 12 | var getTarget = function (target) { 13 | var i; 14 | var segmentedControls = document.querySelectorAll('.segmented-control .control-item'); 15 | 16 | for (; target && target !== document; target = target.parentNode) { 17 | for (i = segmentedControls.length; i--;) { 18 | if (segmentedControls[i] === target) { 19 | return target; 20 | } 21 | } 22 | } 23 | }; 24 | 25 | window.addEventListener('touchend', function (e) { 26 | var activeTab; 27 | var activeBodies; 28 | var targetBody; 29 | var targetTab = getTarget(e.target); 30 | var className = 'active'; 31 | var classSelector = '.' + className; 32 | 33 | if (!targetTab) { 34 | return; 35 | } 36 | 37 | activeTab = targetTab.parentNode.querySelector(classSelector); 38 | 39 | if (activeTab) { 40 | activeTab.classList.remove(className); 41 | } 42 | 43 | targetTab.classList.add(className); 44 | 45 | if (!targetTab.hash) { 46 | return; 47 | } 48 | 49 | targetBody = document.querySelector(targetTab.hash); 50 | 51 | if (!targetBody) { 52 | return; 53 | } 54 | 55 | activeBodies = targetBody.parentNode.querySelectorAll(classSelector); 56 | 57 | for (var i = 0; i < activeBodies.length; i++) { 58 | activeBodies[i].classList.remove(className); 59 | } 60 | 61 | targetBody.classList.add(className); 62 | }); 63 | 64 | window.addEventListener('click', function (e) { 65 | if (getTarget(e.target)) { 66 | e.preventDefault(); 67 | } 68 | }); 69 | 70 | }()); 71 | -------------------------------------------------------------------------------- /js/sliders.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Ratchet: sliders.js v2.0.2 3 | * http://goratchet.com/components#sliders 4 | * ======================================================================== 5 | Adapted from Brad Birdsall's swipe 6 | * Copyright 2015 Connor Sears 7 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 8 | * ======================================================================== */ 9 | 10 | !(function () { 11 | 'use strict'; 12 | 13 | var pageX; 14 | var pageY; 15 | var slider; 16 | var deltaX; 17 | var deltaY; 18 | var offsetX; 19 | var lastSlide; 20 | var startTime; 21 | var resistance; 22 | var sliderWidth; 23 | var slideNumber; 24 | var isScrolling; 25 | var scrollableArea; 26 | var startedMoving; 27 | 28 | var transformPrefix = window.RATCHET.getBrowserCapabilities.prefix; 29 | var transformProperty = window.RATCHET.getBrowserCapabilities.transform; 30 | 31 | var getSlider = function (target) { 32 | var i; 33 | var sliders = document.querySelectorAll('.slider > .slide-group'); 34 | 35 | for (; target && target !== document; target = target.parentNode) { 36 | for (i = sliders.length; i--;) { 37 | if (sliders[i] === target) { 38 | return target; 39 | } 40 | } 41 | } 42 | }; 43 | 44 | var getScroll = function () { 45 | var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/); 46 | var ret = translate3d ? translate3d[1] : 0; 47 | return parseInt(ret, 10); 48 | }; 49 | 50 | var setSlideNumber = function (offset) { 51 | var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round'; 52 | slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length)); 53 | slideNumber += offset; 54 | slideNumber = Math.min(slideNumber, 0); 55 | slideNumber = Math.max(-(slider.children.length - 1), slideNumber); 56 | }; 57 | 58 | var onTouchStart = function (e) { 59 | slider = getSlider(e.target); 60 | 61 | if (!slider) { 62 | return; 63 | } 64 | 65 | var firstItem = slider.querySelector('.slide'); 66 | 67 | scrollableArea = firstItem.offsetWidth * slider.children.length; 68 | isScrolling = undefined; 69 | sliderWidth = slider.offsetWidth; 70 | resistance = 1; 71 | lastSlide = -(slider.children.length - 1); 72 | startTime = +new Date(); 73 | pageX = e.touches[0].pageX; 74 | pageY = e.touches[0].pageY; 75 | deltaX = 0; 76 | deltaY = 0; 77 | 78 | setSlideNumber(0); 79 | 80 | slider.style[transformPrefix + 'transition-duration'] = 0; 81 | }; 82 | 83 | var onTouchMove = function (e) { 84 | if (e.touches.length > 1 || !slider) { 85 | return; // Exit if a pinch || no slider 86 | } 87 | 88 | // adjust the starting position if we just started to avoid jumpage 89 | if (!startedMoving) { 90 | pageX += (e.touches[0].pageX - pageX) - 1; 91 | } 92 | 93 | deltaX = e.touches[0].pageX - pageX; 94 | deltaY = e.touches[0].pageY - pageY; 95 | pageX = e.touches[0].pageX; 96 | pageY = e.touches[0].pageY; 97 | 98 | if (typeof isScrolling === 'undefined' && startedMoving) { 99 | isScrolling = Math.abs(deltaY) > Math.abs(deltaX); 100 | } 101 | 102 | if (isScrolling) { 103 | return; 104 | } 105 | 106 | offsetX = (deltaX / resistance) + getScroll(); 107 | 108 | e.preventDefault(); 109 | 110 | resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : 111 | slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; 112 | 113 | slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)'; 114 | 115 | // started moving 116 | startedMoving = true; 117 | }; 118 | 119 | var onTouchEnd = function (e) { 120 | if (!slider || isScrolling) { 121 | return; 122 | } 123 | 124 | // we're done moving 125 | startedMoving = false; 126 | 127 | setSlideNumber((+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0); 128 | 129 | offsetX = slideNumber * sliderWidth; 130 | 131 | slider.style[transformPrefix + 'transition-duration'] = '.2s'; 132 | slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)'; 133 | 134 | e = new CustomEvent('slide', { 135 | detail: { slideNumber: Math.abs(slideNumber) }, 136 | bubbles: true, 137 | cancelable: true 138 | }); 139 | 140 | slider.parentNode.dispatchEvent(e); 141 | }; 142 | 143 | window.addEventListener('touchstart', onTouchStart); 144 | window.addEventListener('touchmove', onTouchMove); 145 | window.addEventListener('touchend', onTouchEnd); 146 | 147 | }()); 148 | -------------------------------------------------------------------------------- /js/tests/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "devel" : true, 3 | "es3" : false, 4 | "jasmine" : true 5 | } 6 | -------------------------------------------------------------------------------- /js/tests/SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jasmine Spec Runner 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /js/tests/commonSpec.js: -------------------------------------------------------------------------------- 1 | describe('Common', function () { 2 | it('RATCHET namespace is defined', function () { 3 | expect(typeof RATCHET !== 'undefined').toBe(true); 4 | }); 5 | 6 | it('window.CustomEvent exists', function () { 7 | expect(typeof window.CustomEvent !== 'undefined').toBe(true); 8 | }); 9 | 10 | it('RATCHET.getBrowserCapabilities returns an object', function () { 11 | var result = RATCHET.getBrowserCapabilities; 12 | expect(typeof result === 'object').toBe(true); 13 | }); 14 | 15 | it('RATCHET.getTransitionEnd returns string', function () { 16 | var result = RATCHET.getTransitionEnd; 17 | expect(typeof result === 'string').toBe(true); 18 | expect(result.length > 0).toBe(true); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /js/tests/modalsSpec.js: -------------------------------------------------------------------------------- 1 | describe('Modals', function () { 2 | beforeEach(function () { 3 | var templateModal = [ 4 | 'Open modal', 5 | '' 14 | ].join(''); 15 | document.body.innerHTML += templateModal; 16 | }); 17 | 18 | afterEach(function () { 19 | var linkModal = document.getElementById('linkOpenModal'); 20 | var modal = document.getElementById('myModal'); 21 | linkModal.parentNode.removeChild(linkModal); 22 | modal.parentNode.removeChild(modal); 23 | }); 24 | 25 | it('Modal should fire modalOpen event', function (done) { 26 | window.addEventListener('modalOpen', function () { 27 | expect(true).toBe(true); 28 | done(); 29 | }); 30 | var link = document.getElementById('linkOpenModal'); 31 | var eventTouchEnd = new CustomEvent('touchend', { 32 | bubbles: true, 33 | cancelable: true 34 | }); 35 | link.dispatchEvent(eventTouchEnd); 36 | }); 37 | 38 | it('Modal should fire modalClose event', function (done) { 39 | var link = document.getElementById('linkOpenModal'); 40 | var eventTouchEnd = new CustomEvent('touchend', { 41 | bubbles: true, 42 | cancelable: true 43 | }); 44 | window.addEventListener('modalClose', function () { 45 | expect(true).toBe(true); 46 | done(); 47 | }); 48 | link.dispatchEvent(eventTouchEnd); 49 | var closeLink = document.getElementById('linkCloseModal'); 50 | closeLink.dispatchEvent(eventTouchEnd); 51 | }); 52 | }); 53 | -------------------------------------------------------------------------------- /js/tests/sliderSpec.js: -------------------------------------------------------------------------------- 1 | describe('Slider', function () { 2 | var slider = null; 3 | beforeEach(function () { 4 | var templateSlider = [ 5 | '
', 6 | '
', 7 | '
', 8 | '', 9 | '
', 10 | '
', 11 | '', 12 | '
', 13 | '
', 14 | '
' 15 | ].join(''); 16 | document.body.innerHTML += templateSlider; 17 | slider = document.getElementById('mySlider'); 18 | }); 19 | 20 | afterEach(function () { 21 | slider.parentNode.removeChild(slider); 22 | slider = null; 23 | }); 24 | 25 | it('Slider should fire slide event', function (done) { 26 | slider.addEventListener('slide', function () { 27 | expect(true).toBe(true); 28 | done(); 29 | }); 30 | TouchFaker.fakeEvent('touchstart', '#firstSlide'); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /js/tests/vendor/touchfaker.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * TouchFaker - v1.1.0 - 2015-05-21 3 | * https://github.com/Johann-S/TouchFaker 4 | * Copyright (c) 2015 Johann SERVOIRE; Licensed MIT 5 | */ 6 | !function(){"use strict";function a(a,b,c,d,e){d=d||0,e=e||0,this.identifier=b,this.target=a,this.clientX=c.clientX+d||0,this.clientY=c.clientY+e||0,this.screenX=c.screenX+d||0,this.screenY=c.screenY+e||0,this.pageX=c.pageX+d||0,this.pageY=c.pageY+e||0}function b(){var a=[];return a.item=function(a){return this[a]||null},a.identifiedTouch=function(a){return this[a+1]||null},a}function c(){for(var a=[window,document.documentElement],b=["ontouchstart","ontouchmove","ontouchcancel","ontouchend"],c=0;c2}function e(a,b,c){var d=document.createEvent("Event");d.initEvent(a,!0,!0);var e="undefined"!=typeof c?g(c):f(b);d.touches=i(e,a,b),d.targetTouches=i(e,a,b),d.changedTouches=j(e,a,b),b.dispatchEvent(d)}function f(a){var b=a.getBoundingClientRect();return{pageX:b.left,pageY:b.top}}function g(a){var b={};return b.clientX=a.hasOwnProperty("clientX")?a.clientX:0,b.clientY=a.hasOwnProperty("clientY")?a.clientY:0,b.pageX=a.hasOwnProperty("pageX")?a.pageX:0,b.pageY=a.hasOwnProperty("pageY")?a.pageY:0,b.screenX=a.hasOwnProperty("screenX")?a.screenX:0,b.screenY=a.hasOwnProperty("screenY")?a.screenY:0,b}function h(c,d){var e=new b;return e.push(new a(d,1,c,0,0)),e}function i(a,c,d){var e=new b;return"touchend"!==c&&(e=h(a,d)),e}function j(a,b,c){var d=h(a,c);return("touchstart"===b||"touchend"===b)&&d.splice(0,1),d}document.createTouch||(document.createTouch=function(b,c,d,e,f,g,h,i,j){return(void 0===i||void 0===j)&&(i=e-window.pageXOffset,j=f-window.pageYOffset),new a(c,d,{pageX:e,pageY:f,screenX:g,screenY:h,clientX:i,clientY:j})}),document.createTouchList||(document.createTouchList=function(){for(var a=new b,c=0;c 1) { 54 | return; // Exit if a pinch 55 | } 56 | 57 | if (!toggle) { 58 | return; 59 | } 60 | 61 | var handle = toggle.querySelector('.toggle-handle'); 62 | var current = e.touches[0]; 63 | var toggleWidth = toggle.clientWidth; 64 | var handleWidth = handle.clientWidth; 65 | var offset = toggleWidth - handleWidth; 66 | 67 | touchMove = true; 68 | distanceX = current.pageX - start.pageX; 69 | 70 | if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) { 71 | return; 72 | } 73 | 74 | e.preventDefault(); 75 | 76 | if (distanceX < 0) { 77 | return (handle.style[transformProperty] = 'translate3d(0,0,0)'); 78 | } 79 | if (distanceX > offset) { 80 | return (handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)'); 81 | } 82 | 83 | handle.style[transformProperty] = 'translate3d(' + distanceX + 'px,0,0)'; 84 | 85 | toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active'); 86 | }); 87 | 88 | window.addEventListener('touchend', function (e) { 89 | if (!toggle) { 90 | return; 91 | } 92 | 93 | var handle = toggle.querySelector('.toggle-handle'); 94 | var toggleWidth = toggle.clientWidth; 95 | var handleWidth = handle.clientWidth; 96 | var offset = (toggleWidth - handleWidth); 97 | var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); 98 | 99 | if (slideOn) { 100 | handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)'; 101 | } else { 102 | handle.style[transformProperty] = 'translate3d(0,0,0)'; 103 | } 104 | 105 | toggle.classList[slideOn ? 'add' : 'remove']('active'); 106 | 107 | e = new CustomEvent('toggle', { 108 | detail: { 109 | isActive: slideOn 110 | }, 111 | bubbles: true, 112 | cancelable: true 113 | }); 114 | 115 | toggle.dispatchEvent(e); 116 | 117 | touchMove = false; 118 | toggle = false; 119 | }); 120 | 121 | }()); 122 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ratchet", 3 | "description": "Build mobile apps with simple HTML, CSS, and JS components.", 4 | "version": "2.0.2", 5 | "keywords": [ 6 | "css", 7 | "fonts", 8 | "ios", 9 | "android", 10 | "mobile", 11 | "prototype" 12 | ], 13 | "homepage": "http://goratchet.com", 14 | "author": "Connor Sears", 15 | "style": "dist/css/ratchet.css", 16 | "sass": "sass/ratchet.scss", 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/twbs/ratchet.git" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/twbs/ratchet/issues" 23 | }, 24 | "license": "MIT", 25 | "scripts": { 26 | "test": "grunt test" 27 | }, 28 | "devDependencies": { 29 | "grunt": "^0.4.5", 30 | "grunt-autoprefixer": "^3.0.0", 31 | "grunt-banner": "^0.6.0", 32 | "grunt-contrib-clean": "^1.0.0", 33 | "grunt-contrib-compress": "^1.1.0", 34 | "grunt-contrib-concat": "^1.0.0", 35 | "grunt-contrib-connect": "^1.0.0", 36 | "grunt-contrib-copy": "^1.0.0", 37 | "grunt-contrib-csslint": "^1.0.0", 38 | "grunt-contrib-cssmin": "^1.0.0", 39 | "grunt-contrib-htmlmin": "^1.0.0", 40 | "grunt-contrib-jshint": "^1.0.0", 41 | "grunt-contrib-uglify": "^1.0.0", 42 | "grunt-contrib-watch": "^1.0.0", 43 | "grunt-csscomb": "^3.1.0", 44 | "grunt-html": "^6.0.0", 45 | "grunt-contrib-jasmine": "^1.0.0", 46 | "grunt-jekyll": "^0.4.2", 47 | "grunt-jscs": "^2.8.0", 48 | "grunt-sass": "^1.1.0", 49 | "grunt-sed": "twbs/grunt-sed#v0.2.0", 50 | "load-grunt-tasks": "^3.4.0", 51 | "time-grunt": "^1.3.0" 52 | }, 53 | "engines": { 54 | "node": ">=0.10.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /sass/.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "always-semicolon": true, 3 | "block-indent": 2, 4 | "color-case": "lower", 5 | "color-shorthand": true, 6 | "element-case": "lower", 7 | "eof-newline": true, 8 | "leading-zero": false, 9 | "remove-empty-rulesets": true, 10 | "space-after-colon": 1, 11 | "space-after-combinator": 1, 12 | "space-before-selector-delimiter": 0, 13 | "space-between-declarations": "\n", 14 | "space-after-opening-brace": "\n", 15 | "space-before-closing-brace": "\n", 16 | "space-before-colon": 0, 17 | "space-before-combinator": 1, 18 | "space-before-opening-brace": 1, 19 | "strip-spaces": true, 20 | "unitless-zero": true, 21 | "vendor-prefix-align": true, 22 | "sort-order": [ 23 | [ 24 | "position", 25 | "top", 26 | "right", 27 | "bottom", 28 | "left", 29 | "z-index", 30 | "display", 31 | "float", 32 | "width", 33 | "min-width", 34 | "max-width", 35 | "height", 36 | "min-height", 37 | "max-height", 38 | "-webkit-box-sizing", 39 | "-moz-box-sizing", 40 | "box-sizing", 41 | "-webkit-appearance", 42 | "padding", 43 | "padding-top", 44 | "padding-right", 45 | "padding-bottom", 46 | "padding-left", 47 | "margin", 48 | "margin-top", 49 | "margin-right", 50 | "margin-bottom", 51 | "margin-left", 52 | "overflow", 53 | "overflow-x", 54 | "overflow-y", 55 | "-webkit-overflow-scrolling", 56 | "-ms-overflow-x", 57 | "-ms-overflow-y", 58 | "-ms-overflow-style", 59 | "clip", 60 | "clear", 61 | "font", 62 | "font-family", 63 | "font-size", 64 | "font-style", 65 | "font-weight", 66 | "font-variant", 67 | "font-size-adjust", 68 | "font-stretch", 69 | "font-effect", 70 | "font-emphasize", 71 | "font-emphasize-position", 72 | "font-emphasize-style", 73 | "font-smooth", 74 | "-webkit-hyphens", 75 | "-moz-hyphens", 76 | "hyphens", 77 | "line-height", 78 | "color", 79 | "text-align", 80 | "-webkit-text-align-last", 81 | "-moz-text-align-last", 82 | "-ms-text-align-last", 83 | "text-align-last", 84 | "text-emphasis", 85 | "text-emphasis-color", 86 | "text-emphasis-style", 87 | "text-emphasis-position", 88 | "text-decoration", 89 | "text-indent", 90 | "text-justify", 91 | "text-outline", 92 | "-ms-text-overflow", 93 | "text-overflow", 94 | "text-overflow-ellipsis", 95 | "text-overflow-mode", 96 | "text-shadow", 97 | "text-transform", 98 | "text-wrap", 99 | "-webkit-text-size-adjust", 100 | "-ms-text-size-adjust", 101 | "letter-spacing", 102 | "-ms-word-break", 103 | "word-break", 104 | "word-spacing", 105 | "-ms-word-wrap", 106 | "word-wrap", 107 | "-moz-tab-size", 108 | "-o-tab-size", 109 | "tab-size", 110 | "white-space", 111 | "vertical-align", 112 | "list-style", 113 | "list-style-position", 114 | "list-style-type", 115 | "list-style-image", 116 | "pointer-events", 117 | "-ms-touch-action", 118 | "touch-action", 119 | "cursor", 120 | "visibility", 121 | "zoom", 122 | "flex-direction", 123 | "flex-order", 124 | "flex-pack", 125 | "flex-align", 126 | "table-layout", 127 | "empty-cells", 128 | "caption-side", 129 | "border-spacing", 130 | "border-collapse", 131 | "content", 132 | "quotes", 133 | "counter-reset", 134 | "counter-increment", 135 | "resize", 136 | "-webkit-user-select", 137 | "-moz-user-select", 138 | "-ms-user-select", 139 | "-o-user-select", 140 | "user-select", 141 | "nav-index", 142 | "nav-up", 143 | "nav-right", 144 | "nav-down", 145 | "nav-left", 146 | "background", 147 | "background-color", 148 | "background-image", 149 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 150 | "filter:progid:DXImageTransform.Microsoft.gradient", 151 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 152 | "filter", 153 | "background-repeat", 154 | "background-attachment", 155 | "background-position", 156 | "background-position-x", 157 | "background-position-y", 158 | "-webkit-background-clip", 159 | "-moz-background-clip", 160 | "background-clip", 161 | "background-origin", 162 | "-webkit-background-size", 163 | "-moz-background-size", 164 | "-o-background-size", 165 | "background-size", 166 | "border", 167 | "border-color", 168 | "border-style", 169 | "border-width", 170 | "border-top", 171 | "border-top-color", 172 | "border-top-style", 173 | "border-top-width", 174 | "border-right", 175 | "border-right-color", 176 | "border-right-style", 177 | "border-right-width", 178 | "border-bottom", 179 | "border-bottom-color", 180 | "border-bottom-style", 181 | "border-bottom-width", 182 | "border-left", 183 | "border-left-color", 184 | "border-left-style", 185 | "border-left-width", 186 | "border-radius", 187 | "border-top-left-radius", 188 | "border-top-right-radius", 189 | "border-bottom-right-radius", 190 | "border-bottom-left-radius", 191 | "-webkit-border-image", 192 | "-moz-border-image", 193 | "-o-border-image", 194 | "border-image", 195 | "-webkit-border-image-source", 196 | "-moz-border-image-source", 197 | "-o-border-image-source", 198 | "border-image-source", 199 | "-webkit-border-image-slice", 200 | "-moz-border-image-slice", 201 | "-o-border-image-slice", 202 | "border-image-slice", 203 | "-webkit-border-image-width", 204 | "-moz-border-image-width", 205 | "-o-border-image-width", 206 | "border-image-width", 207 | "-webkit-border-image-outset", 208 | "-moz-border-image-outset", 209 | "-o-border-image-outset", 210 | "border-image-outset", 211 | "-webkit-border-image-repeat", 212 | "-moz-border-image-repeat", 213 | "-o-border-image-repeat", 214 | "border-image-repeat", 215 | "outline", 216 | "outline-width", 217 | "outline-style", 218 | "outline-color", 219 | "outline-offset", 220 | "-webkit-box-shadow", 221 | "-moz-box-shadow", 222 | "box-shadow", 223 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 224 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 225 | "opacity", 226 | "-ms-interpolation-mode", 227 | "-webkit-transition", 228 | "-moz-transition", 229 | "-ms-transition", 230 | "-o-transition", 231 | "transition", 232 | "-webkit-transition-delay", 233 | "-moz-transition-delay", 234 | "-ms-transition-delay", 235 | "-o-transition-delay", 236 | "transition-delay", 237 | "-webkit-transition-timing-function", 238 | "-moz-transition-timing-function", 239 | "-ms-transition-timing-function", 240 | "-o-transition-timing-function", 241 | "transition-timing-function", 242 | "-webkit-transition-duration", 243 | "-moz-transition-duration", 244 | "-ms-transition-duration", 245 | "-o-transition-duration", 246 | "transition-duration", 247 | "-webkit-transition-property", 248 | "-moz-transition-property", 249 | "-ms-transition-property", 250 | "-o-transition-property", 251 | "transition-property", 252 | "-webkit-transform", 253 | "-moz-transform", 254 | "-ms-transform", 255 | "-o-transform", 256 | "transform", 257 | "-webkit-transform-origin", 258 | "-moz-transform-origin", 259 | "-ms-transform-origin", 260 | "-o-transform-origin", 261 | "transform-origin", 262 | "-webkit-animation", 263 | "-moz-animation", 264 | "-ms-animation", 265 | "-o-animation", 266 | "animation", 267 | "-webkit-animation-name", 268 | "-moz-animation-name", 269 | "-ms-animation-name", 270 | "-o-animation-name", 271 | "animation-name", 272 | "-webkit-animation-duration", 273 | "-moz-animation-duration", 274 | "-ms-animation-duration", 275 | "-o-animation-duration", 276 | "animation-duration", 277 | "-webkit-animation-play-state", 278 | "-moz-animation-play-state", 279 | "-ms-animation-play-state", 280 | "-o-animation-play-state", 281 | "animation-play-state", 282 | "-webkit-animation-timing-function", 283 | "-moz-animation-timing-function", 284 | "-ms-animation-timing-function", 285 | "-o-animation-timing-function", 286 | "animation-timing-function", 287 | "-webkit-animation-delay", 288 | "-moz-animation-delay", 289 | "-ms-animation-delay", 290 | "-o-animation-delay", 291 | "animation-delay", 292 | "-webkit-animation-iteration-count", 293 | "-moz-animation-iteration-count", 294 | "-ms-animation-iteration-count", 295 | "-o-animation-iteration-count", 296 | "animation-iteration-count", 297 | "-webkit-animation-direction", 298 | "-moz-animation-direction", 299 | "-ms-animation-direction", 300 | "-o-animation-direction", 301 | "animation-direction" 302 | ] 303 | ] 304 | } 305 | -------------------------------------------------------------------------------- /sass/.csslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "adjoining-classes": false, 3 | "box-sizing": false, 4 | "box-model": false, 5 | "compatible-vendor-prefixes": false, 6 | "fallback-colors": false, 7 | "font-sizes": false, 8 | "gradients": false, 9 | "important": false, 10 | "known-properties": false, 11 | "outline-none": false, 12 | "qualified-headings": false, 13 | "unique-headings": false, 14 | "universal-selector": false, 15 | "unqualified-attributes": false 16 | } 17 | -------------------------------------------------------------------------------- /sass/badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | .badge { 6 | display: inline-block; 7 | padding: 2px 9px 3px; 8 | font-size: 12px; 9 | line-height: 1; 10 | color: #333; 11 | background-color: rgba(0,0,0,.15); 12 | border-radius: 100px; 13 | 14 | // Inverted badges have no background. 15 | &.badge-inverted { 16 | padding: 0 5px 0 0; 17 | background-color: transparent; 18 | } 19 | } 20 | 21 | 22 | // Badge modifiers 23 | // -------------------------------------------------- 24 | 25 | // Main badge 26 | .badge-primary { 27 | color: #fff; 28 | background-color: $primary-color; 29 | 30 | &.badge-inverted { 31 | color: $primary-color; 32 | } 33 | } 34 | 35 | // Positive badge 36 | .badge-positive { 37 | color: #fff; 38 | background-color: $positive-color; 39 | 40 | &.badge-inverted { 41 | color: $positive-color; 42 | } 43 | } 44 | 45 | // Negative badge 46 | .badge-negative { 47 | color: #fff; 48 | background-color: $negative-color; 49 | 50 | &.badge-inverted { 51 | color: $negative-color; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /sass/bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Bars 3 | // -------------------------------------------------- 4 | 5 | .bar { 6 | position: fixed; 7 | right: 0; 8 | left: 0; 9 | z-index: 10; 10 | height: $bar-base-height; 11 | padding-right: $bar-side-spacing; 12 | padding-left: $bar-side-spacing; 13 | background-color: $chrome-color; 14 | border-bottom: $border-default; 15 | -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in. 16 | backface-visibility: hidden; 17 | } 18 | 19 | // Modifier class to dock any bar below .bar-nav 20 | .bar-header-secondary { 21 | top: $bar-base-height; 22 | } 23 | 24 | // Modifier class for footer bars 25 | .bar-footer { 26 | bottom: 0; 27 | } 28 | 29 | // Modifier class to dock any bar above a standard bar 30 | .bar-footer-secondary { 31 | bottom: $bar-base-height; 32 | } 33 | 34 | // Modifier class to dock any bar above a .bar-tab 35 | .bar-footer-secondary-tab { 36 | bottom: $bar-tab-height; 37 | } 38 | 39 | // Give the footers the correct border 40 | .bar-footer, 41 | .bar-footer-secondary, 42 | .bar-footer-secondary-tab { 43 | border-top: $border-default; 44 | border-bottom: 0; 45 | } 46 | 47 | 48 | // Nav bar 49 | // -------------------------------------------------- 50 | 51 | // Bar docked to top of viewport for showing page title and actions 52 | .bar-nav { 53 | top: 0; 54 | } 55 | 56 | // Centered text in the .bar-nav 57 | // 58 | // We position the absolutely to make sure the title is always centered 59 | .title { 60 | position: absolute; 61 | display: block; 62 | width: 100%; 63 | padding: 0; 64 | margin: 0 (-$bar-side-spacing); 65 | font-size: $font-size-default; 66 | font-weight: $font-weight; 67 | line-height: $bar-base-height; 68 | color: #000; 69 | text-align: center; 70 | white-space: nowrap; 71 | } 72 | // Retain specified title color 73 | .title a { 74 | color: inherit; 75 | } 76 | 77 | 78 | // Tab bar 79 | // -------------------------------------------------- 80 | 81 | // Bar docked to bottom and used for primary app navigation 82 | .bar-tab { 83 | display: table; 84 | bottom: 0; 85 | width: 100%; 86 | height: $bar-tab-height; 87 | padding: 0; 88 | table-layout: fixed; 89 | border-top: $border-default; 90 | border-bottom: 0; 91 | 92 | // Navigational tab (Nested to be more specific for the icons in tab-items) 93 | .tab-item { 94 | position: relative; 95 | display: table-cell; 96 | width: 1%; 97 | height: $bar-tab-height; 98 | color: #929292; 99 | text-align: center; 100 | vertical-align: middle; 101 | 102 | // Active states for the tab bar 103 | &.active, 104 | &:active { 105 | color: $primary-color; 106 | } 107 | 108 | // Activity badge on an icon 109 | .badge { 110 | vertical-align: top; 111 | position: absolute; 112 | top: 3px; 113 | left: 50%; 114 | } 115 | 116 | // Tab icon 117 | .icon { 118 | top: 3px; 119 | width: 24px; 120 | height: 24px; 121 | padding-top: 0; 122 | padding-bottom: 0; 123 | 124 | // Make the text smaller if it's used with an icon 125 | ~ .tab-label { 126 | display: block; 127 | font-size: 11px; 128 | } 129 | } 130 | } 131 | } 132 | 133 | // Bars with buttons 134 | // -------------------------------------------------- 135 | 136 | .bar .btn { 137 | position: relative; 138 | top: 7px; 139 | z-index: 20; // Position the buttons on top of .title 140 | padding: 6px 12px 7px; 141 | margin-top: 0; 142 | font-weight: $font-weight-light; 143 | 144 | // Give buttons that are floated left and right side margin 145 | &.pull-right { 146 | margin-left: $bar-side-spacing; 147 | } 148 | &.pull-left { 149 | margin-right: $bar-side-spacing; 150 | } 151 | } 152 | 153 | // Bars with link buttons (Line the text up with content) 154 | .bar .btn-link { 155 | top: 0; 156 | padding: 0; 157 | font-size: 16px; 158 | line-height: $bar-base-height; 159 | color: $primary-color; 160 | border: 0; 161 | 162 | &:active, 163 | &.active { 164 | color: darken($primary-color, 10%); 165 | } 166 | } 167 | 168 | // Bars with block buttons 169 | // 170 | // Add proper padding 171 | .bar .btn-block { 172 | top: 6px; 173 | padding: 7px 0; 174 | margin-bottom: 0; 175 | font-size: 16px; // Scale down font size to fit in bar. 176 | } 177 | 178 | // Nav buttons (Only applicable within bars) 179 | // 180 | // Buttons inside bars that sit closer against the viewport. 181 | .bar .btn-nav { 182 | &.pull-left { 183 | margin-left: -5px; 184 | 185 | .icon-left-nav { 186 | margin-right: -3px; 187 | } 188 | } 189 | &.pull-right { 190 | margin-right: -5px; 191 | 192 | .icon-right-nav { 193 | margin-left: -3px; 194 | } 195 | } 196 | } 197 | 198 | 199 | // Bars with Ratchicons 200 | // -------------------------------------------------- 201 | 202 | .bar { 203 | .icon { 204 | position: relative; 205 | z-index: 20; // Position the buttons on top of .title 206 | padding-top: 10px; 207 | padding-bottom: 10px; 208 | font-size: 24px; 209 | } 210 | 211 | // Vertical center the larger icons in btns. 212 | .btn .icon { 213 | top: 3px; 214 | padding: 0; 215 | } 216 | 217 | // Handle carets in the titles 218 | .title .icon { 219 | padding: 0; 220 | 221 | // Specific postioning of the caret icon within a title. Used with popover.js. 222 | &.icon-caret { 223 | top: 4px; 224 | margin-left: -5px; 225 | } 226 | } 227 | } 228 | 229 | 230 | // Bars for search forms 231 | // -------------------------------------------------- 232 | 233 | // Position/size search bar within the bar 234 | .bar input[type="search"] { 235 | height: 29px; 236 | margin: 6px 0; 237 | } 238 | 239 | 240 | // Bars with segmented controls 241 | // -------------------------------------------------- 242 | 243 | // Position the control correctly inside a bar. 244 | .bar .segmented-control { 245 | top: 7px; 246 | margin: 0 auto; 247 | } 248 | -------------------------------------------------------------------------------- /sass/base.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // -------------------------------------------------- 4 | 5 | // Use box sizing on all the things! 6 | * { 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | } 11 | 12 | // We fix position the body and scroll `.content`. 13 | body { 14 | position: fixed; 15 | top: 0; 16 | right: 0; 17 | bottom: 0; 18 | left: 0; 19 | font-family: $font-family-default; 20 | font-size: $font-size-default; 21 | line-height: $line-height-default; 22 | color: #000; 23 | background-color: #fff; 24 | } 25 | 26 | // Universal link styling 27 | a { 28 | color: $primary-color; 29 | text-decoration: none; 30 | -webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers. 31 | 32 | &:active { 33 | color: darken($primary-color, 10%); 34 | } 35 | } 36 | 37 | // Wrapper to be used around all content not in .bar-title and .bar-tab 38 | .content { 39 | position: absolute; 40 | top: 0; 41 | right: 0; 42 | bottom: 0; 43 | left: 0; 44 | overflow: auto; 45 | background-color: #fff; 46 | -webkit-overflow-scrolling: touch; 47 | } 48 | 49 | // Hack to force all relatively and absolutely positioned elements still render while scrolling 50 | // Note: This is a bug for "-webkit-overflow-scrolling: touch" 51 | .content > * { 52 | @include transform(translateZ(0)); 53 | } 54 | 55 | // Pad top/bottom of content so it doesn't hide behind bars. 56 | // Note: For these to work, content must come after both bars in the markup 57 | .bar-nav ~ .content { 58 | padding-top: $bar-base-height; 59 | } 60 | .bar-header-secondary ~ .content { 61 | padding-top: ($bar-base-height*2); 62 | } 63 | 64 | // Footer bar padding 65 | .bar-footer ~ .content { 66 | padding-bottom: $bar-base-height; 67 | } 68 | .bar-footer-secondary ~ .content { 69 | padding-bottom: ($bar-base-height*2); 70 | } 71 | 72 | // Tab bar padding 73 | .bar-tab ~ .content { 74 | padding-bottom: $bar-tab-height; 75 | } 76 | .bar-footer-secondary-tab ~ .content { 77 | padding-bottom: ($bar-tab-height+$bar-base-height); 78 | } 79 | 80 | // Utility classes 81 | .content-padded { 82 | margin: $bar-side-spacing; 83 | } 84 | .text-center { 85 | text-align: center; 86 | } 87 | .pull-left { 88 | float: left; 89 | } 90 | .pull-right { 91 | float: right; 92 | } 93 | .clearfix { 94 | @include clearfix(); 95 | } 96 | -------------------------------------------------------------------------------- /sass/buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons 3 | // -------------------------------------------------- 4 | 5 | .btn { 6 | position: relative; 7 | display: inline-block; 8 | padding: 6px 8px 7px; 9 | margin-bottom: 0; // For input.btn 10 | font-size: $button-font-size; 11 | font-weight: $font-weight-light; 12 | line-height: 1; 13 | color: #333; 14 | text-align: center; 15 | white-space: nowrap; 16 | vertical-align: top; 17 | cursor: pointer; 18 | background-color: $chrome-color; 19 | border: 1px solid #ccc; 20 | border-radius: 3px; 21 | 22 | // Active & filled button styles 23 | &:active, 24 | &.active { 25 | color: inherit; // Overriding the global style for all anchors. 26 | background-color: #ccc; 27 | } 28 | 29 | // Disabled styles & filled button active styles 30 | &:disabled, 31 | &.disabled { 32 | opacity: .6; 33 | } 34 | } 35 | 36 | 37 | // Other button types 38 | // -------------------------------------------------- 39 | 40 | // Primary button (Default color is blue) 41 | .btn-primary { 42 | color: #fff; 43 | background-color: $primary-color; 44 | border: 1px solid $primary-color; 45 | 46 | &:active, 47 | &.active { 48 | color: #fff; 49 | background-color: darken($primary-color, 10%); 50 | border: 1px solid darken($primary-color, 10%); 51 | } 52 | } 53 | 54 | // Positive button (Default color is green) 55 | .btn-positive { 56 | color: #fff; 57 | background-color: $positive-color; 58 | border: 1px solid $positive-color; 59 | 60 | &:active, 61 | &.active { 62 | color: #fff; 63 | background-color: darken($positive-color, 10%); 64 | border: 1px solid darken($positive-color, 10%); 65 | } 66 | } 67 | 68 | // Negative button (Default color is red) 69 | .btn-negative { 70 | color: #fff; 71 | background-color: $negative-color; 72 | border: 1px solid $negative-color; 73 | 74 | &:active, 75 | &.active { 76 | color: #fff; 77 | background-color: darken($negative-color, 10%); 78 | border: 1px solid darken($negative-color, 10%); 79 | } 80 | } 81 | 82 | // Outlined buttons 83 | .btn-outlined { 84 | background-color: transparent; 85 | 86 | &.btn-primary { 87 | color: $primary-color; 88 | } 89 | &.btn-positive { 90 | color: $positive-color; 91 | } 92 | &.btn-negative { 93 | color: $negative-color; 94 | } 95 | // Active states 96 | &.btn-primary:active, 97 | &.btn-positive:active, 98 | &.btn-negative:active { 99 | color: #fff; 100 | } 101 | } 102 | 103 | // Link button (Buttons that look like links) 104 | .btn-link { 105 | padding-top: 6px; 106 | padding-bottom: 6px; 107 | color: $primary-color; 108 | background-color: transparent; 109 | border: 0; 110 | 111 | &:active, 112 | &.active { 113 | color: darken($primary-color, 10%); 114 | background-color: transparent; 115 | } 116 | } 117 | 118 | // Block level buttons (full width buttons) 119 | .btn-block { 120 | display: block; 121 | width: 100%; 122 | padding: 15px 0; 123 | margin-bottom: 10px; 124 | font-size: 18px; 125 | } 126 | 127 | 128 | // Button overrides 129 | // -------------------------------------------------- 130 | 131 | input[type="submit"], 132 | input[type="reset"], 133 | input[type="button"] { 134 | width: 100%; 135 | } 136 | 137 | 138 | // Buttons with badges 139 | // -------------------------------------------------- 140 | 141 | // Generic styles for all badges within default buttons 142 | .btn .badge { 143 | margin: -2px -4px -2px 4px; 144 | font-size: 12px; 145 | background-color: rgba(0,0,0,.15); 146 | } 147 | 148 | // Buttons with inverted badges 149 | .btn .badge-inverted, 150 | .btn:active .badge-inverted { 151 | background-color: transparent; 152 | } 153 | .btn-primary:active .badge-inverted, 154 | .btn-positive:active .badge-inverted, 155 | .btn-negative:active .badge-inverted { 156 | color: #fff; 157 | } 158 | 159 | // Position badges within block level buttons 160 | // Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always 161 | // stays at the center of button 162 | .btn-block .badge { 163 | position: absolute; 164 | right: 0; 165 | margin-right: 10px; 166 | } 167 | 168 | 169 | // Buttons with Ratchicons 170 | // -------------------------------------------------- 171 | 172 | .btn .icon { 173 | font-size: inherit; 174 | } 175 | -------------------------------------------------------------------------------- /sass/cards.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Cards 3 | // -------------------------------------------------- 4 | 5 | .card { 6 | margin: $bar-side-spacing; 7 | overflow: hidden; 8 | background-color: $card-bg; 9 | border: $border-default; 10 | border-radius: $border-radius; 11 | } 12 | 13 | 14 | // Cards with table-views 15 | // -------------------------------------------------- 16 | .card .table-view { 17 | margin-bottom: 0; 18 | border-top: 0; 19 | border-bottom: 0; 20 | 21 | // Rounding first divider on carded lists and remove border on the top 22 | .table-view-divider:first-child { 23 | top: 0; 24 | border-top-left-radius: $border-radius; 25 | border-top-right-radius: $border-radius; 26 | } 27 | 28 | // Rounding last divider on carded table views 29 | .table-view-divider:last-child { 30 | border-bottom-left-radius: $border-radius; 31 | border-bottom-right-radius: $border-radius; 32 | } 33 | } 34 | // Remove the bottom border from last table cell 35 | .card .table-view-cell:last-child { 36 | border-bottom: 0; 37 | } 38 | -------------------------------------------------------------------------------- /sass/forms.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Forms 3 | // -------------------------------------------------- 4 | 5 | // Force form elements to inherit font styles 6 | input, 7 | textarea, 8 | button, 9 | select { 10 | font-family: $font-family-default; 11 | font-size: $font-size-default; 12 | } 13 | 14 | // Stretch inputs/textareas to full width and add height to maintain a consistent baseline 15 | select, 16 | textarea, 17 | input[type="text"], 18 | input[type="search"], 19 | input[type="password"], 20 | input[type="datetime"], 21 | input[type="datetime-local"], 22 | input[type="date"], 23 | input[type="month"], 24 | input[type="time"], 25 | input[type="week"], 26 | input[type="number"], 27 | input[type="email"], 28 | input[type="url"], 29 | input[type="tel"], 30 | input[type="color"] { 31 | width: 100%; 32 | height: 35px; 33 | -webkit-appearance: none; 34 | padding: 0 15px; 35 | margin-bottom: 15px; 36 | line-height: $line-height-default; 37 | background-color: #fff; 38 | border: $border-default; 39 | border-radius: 3px; 40 | outline: none; 41 | } 42 | 43 | // Rounded search input 44 | input[type="search"] { 45 | padding: 0 10px; 46 | font-size: 16px; 47 | border-radius: 20px; 48 | // Override content-box in normalize 49 | -webkit-box-sizing: border-box; 50 | -moz-box-sizing: border-box; 51 | box-sizing: border-box; 52 | } 53 | input[type="search"]:focus { 54 | text-align: left; 55 | } 56 | 57 | // Allow text area's height to grow larger than a normal input 58 | textarea { 59 | height: auto; 60 | } 61 | 62 | // Style select button to look like part of the Ratchet's style 63 | select { 64 | height: auto; 65 | font-size: 14px; 66 | background-color: #f8f8f8; 67 | @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .1)); 68 | } 69 | 70 | 71 | // Input groups (cluster multiple inputs together into a single group) 72 | // ------------------------------------------------------------------- 73 | 74 | // Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input 75 | .input-group { 76 | background-color: #fff; 77 | } 78 | .input-group input, 79 | .input-group textarea { 80 | margin-bottom: 0; 81 | background-color: transparent; 82 | border-top: 0; 83 | border-right: 0; 84 | border-left: 0; 85 | border-radius: 0; 86 | @include box-shadow(none); 87 | } 88 | 89 | // Input groups with labels 90 | // -------------------------------------------------- 91 | 92 | // To use labels with input groups, wrap a label and an input in an .input-row 93 | .input-row { 94 | overflow: hidden; 95 | height: 35px; // Matches the height of inputs. 96 | border-bottom: $border-default; 97 | } 98 | 99 | // Labels get floated left with a set percentage width 100 | .input-row label { 101 | float: left; 102 | width: 35%; 103 | padding: 8px 15px; 104 | font-family: $font-family-default; 105 | line-height: 1.1; // Put the text on the baseline. 106 | } 107 | 108 | // Actual inputs float to right of labels and also have a set percentage 109 | .input-row input { 110 | float: right; 111 | width: 65%; 112 | padding-left: 0; 113 | margin-bottom: 0; 114 | border: 0; 115 | } 116 | -------------------------------------------------------------------------------- /sass/mixins.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Mixins 3 | // -------------------------------------------------- 4 | 5 | 6 | // General 7 | // -------------------------------------------------- 8 | 9 | // Utilities 10 | // ------------------------- 11 | 12 | // Clearfix 13 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 14 | // 15 | // For modern browsers 16 | // 1. The space content is one way to avoid an Opera bug when the 17 | // contenteditable attribute is included anywhere else in the document. 18 | // Otherwise it causes space to appear at the top and bottom of elements 19 | // that are clearfixed. 20 | // 2. The use of `table` rather than `block` is only necessary if using 21 | // `:before` to contain the top-margins of child elements. 22 | @mixin clearfix() { 23 | &:before, 24 | &:after { 25 | display: table; // 2 26 | content: " "; // 1 27 | } 28 | &:after { 29 | clear: both; 30 | } 31 | } 32 | 33 | // Box shadow 34 | @mixin box-shadow($shadow...) { 35 | -webkit-box-shadow: $shadow; 36 | box-shadow: $shadow; 37 | } 38 | 39 | // Gradients 40 | @mixin linear-gradient($color-from, $color-to) { 41 | background-color: $color-from; // Old browsers 42 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $color-from), color-stop(100%, $color-to)); // Chrome, Safari4+ 43 | background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ 44 | background-image: -moz-linear-gradient(top, $color-from 0%, $color-to 100%); // FF3.6+ 45 | background-image: -ms-linear-gradient(top, $color-from 0%, $color-to 100%); // IE10+ 46 | background-image: -o-linear-gradient(top, $color-from 0%, $color-to 100%); // Opera 11.10+ 47 | background-image: linear-gradient(to bottom, $color-from 0%, $color-to 100%); // W3C 48 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=0 ); // IE6-9 49 | } 50 | @mixin directional-gradient($color-from, $color-to, $deg: 45deg) { 51 | background-color: $color-from; // Old browsers 52 | background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, $color-from), color-stop(100%, $color-to)); // Chrome, Safari4+ 53 | background-image: -webkit-linear-gradient($deg, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ 54 | background-image: -moz-linear-gradient($deg, $color-from 0%, $color-to 100%); // FF3.6+ 55 | background-image: -ms-linear-gradient($deg, $color-from 0%, $color-to 100%); // IE10+ 56 | background-image: -o-linear-gradient($deg, $color-from 0%, $color-to 100%); // Opera 11.10+ 57 | background-image: linear-gradient($deg, $color-from 0%, $color-to 100%); // W3C 58 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=1 ); // IE6-9 59 | } 60 | 61 | 62 | // Transforms 63 | // -------------------------------------------------- 64 | @mixin transform($transform...) { 65 | -webkit-transform: $transform; 66 | -ms-transform: $transform; 67 | transform: $transform; 68 | } 69 | 70 | 71 | // Transitions 72 | // -------------------------------------------------- 73 | @mixin transition($transition...) { 74 | -webkit-transition: $transition; 75 | -moz-transition: $transition; 76 | transition: $transition; 77 | } 78 | @mixin transition-property($property...) { 79 | -webkit-transition-property: $property; 80 | -moz-transition-property: $property; 81 | transition-property: $property; 82 | } 83 | @mixin transition-duration($duration...) { 84 | -webkit-transition-duration: $duration; 85 | -moz-transition-duration: $duration; 86 | transition-duration: $duration; 87 | } 88 | @mixin transition-timing-function($function...) { 89 | -webkit-transition-timing-function: $function; 90 | -moz-transition-timing-function: $function; 91 | transition-timing-function: $function; 92 | } 93 | 94 | 95 | // Animations 96 | // -------------------------------------------------- 97 | @mixin animation-name($name) { 98 | -webkit-animation-name: $name; 99 | -moz-animation-name: $name; 100 | animation-name: $name; 101 | } 102 | @mixin animation-duration($duration) { 103 | -webkit-animation-duration: $duration; 104 | -moz-animation-duration: $duration; 105 | animation-duration: $duration; 106 | } 107 | @mixin animation-direction($direction) { 108 | -webkit-animation-direction: $direction; 109 | -moz-animation-direction: $direction; 110 | animation-direction: $direction; 111 | } 112 | 113 | 114 | // Misc 115 | // -------------------------------------------------- 116 | @mixin hairline($type, $color, $offset) { 117 | @if $type == single { 118 | background-image: url("data:image/svg+xml;utf8,"); 119 | background-position: $offset 100%; 120 | 121 | } @else if $type == double { 122 | background-image: url("data:image/svg+xml;utf8,"), 123 | url("data:image/svg+xml;utf8,"); 124 | background-position: $offset 100%, $offset 0; 125 | } 126 | background-repeat: no-repeat; 127 | } 128 | -------------------------------------------------------------------------------- /sass/modals.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Modals 3 | // -------------------------------------------------- 4 | 5 | .modal { 6 | position: fixed; 7 | top: 0; 8 | z-index: 11; 9 | width: 100%; 10 | min-height: 100%; 11 | overflow: hidden; 12 | background-color: #fff; 13 | opacity: 0; 14 | -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; 15 | -moz-transition: -moz-transform .25s, opacity 1ms .25s; 16 | transition: transform .25s, opacity 1ms .25s; 17 | @include transform(translate3d(0, 100%, 0)); 18 | 19 | // Active modal 20 | &.active { 21 | height: 100%; 22 | opacity: 1; 23 | -webkit-transition: -webkit-transform .25s; 24 | -moz-transition: -moz-transform .25s; 25 | transition: transform .25s; 26 | @include transform(translate3d(0, 0, 0)); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /sass/popovers.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Popovers (to be used with popovers.js) 3 | // -------------------------------------------------- 4 | 5 | .popover { 6 | position: fixed; 7 | top: 55px; 8 | left: 50%; 9 | z-index: 20; 10 | display: none; 11 | width: 280px; 12 | margin-left: -140px; 13 | background-color: $chrome-color; 14 | border-radius: $border-radius; 15 | opacity: 0; 16 | @include box-shadow(0 0 15px rgba(0, 0, 0, .1)); 17 | @include transform(translate3d(0, -15px, 0)); 18 | @include transition(all .25s linear); 19 | 20 | // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) 21 | &:before { 22 | position: absolute; 23 | top: -15px; 24 | left: 50%; 25 | width: 0; 26 | height: 0; 27 | margin-left: -15px; 28 | content: ''; 29 | border-right: 15px solid transparent; 30 | border-bottom: 15px solid $chrome-color; 31 | border-left: 15px solid transparent; 32 | } 33 | 34 | // Popover transition 35 | // -------------------------------------------------- 36 | 37 | &.visible { 38 | opacity: 1; 39 | @include transform(translate3d(0, 0, 0)); 40 | } 41 | 42 | // Give correct spacing to the content if there is a bar inside the popover. 43 | .bar ~ .table-view { 44 | padding-top: $bar-base-height; 45 | } 46 | } 47 | 48 | // Backdrop (used as invisible touch escape) 49 | // -------------------------------------------------- 50 | 51 | .backdrop { 52 | position: fixed; 53 | top: 0; 54 | right: 0; 55 | bottom: 0; 56 | left: 0; 57 | z-index: 15; 58 | background-color: rgba(0,0,0,.3); 59 | } 60 | 61 | // Block level buttons in popovers 62 | // -------------------------------------------------- 63 | 64 | .popover .btn-block { 65 | margin-bottom: 5px; 66 | 67 | // Remove extra margin on bottom of last button 68 | &:last-child { 69 | margin-bottom: 0; 70 | } 71 | } 72 | 73 | 74 | // Popovers with nav bars 75 | // -------------------------------------------------- 76 | 77 | .popover .bar-nav { 78 | border-bottom: $border-default; 79 | border-top-left-radius: 12px; 80 | border-top-right-radius: 12px; 81 | @include box-shadow(none); 82 | } 83 | 84 | 85 | // Table views in popovers 86 | // -------------------------------------------------- 87 | 88 | .popover .table-view { 89 | max-height: 300px; 90 | margin-bottom: 0; 91 | overflow: auto; 92 | -webkit-overflow-scrolling: touch; 93 | background-color: #fff; 94 | border-top: 0; 95 | border-bottom: 0; 96 | border-radius: $border-radius; 97 | } 98 | -------------------------------------------------------------------------------- /sass/push.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Push styles (to be used with push.js) 3 | // -------------------------------------------------- 4 | 5 | .content { 6 | // Fade animation 7 | &.fade { 8 | left: 0; 9 | opacity: 0; 10 | @include transition(opacity .4s); 11 | 12 | &.in { 13 | opacity: 1; 14 | } 15 | } 16 | 17 | // Slide animation 18 | &.sliding { 19 | z-index: 2; 20 | -webkit-transition: -webkit-transform .4s; 21 | -moz-transition: -moz-transform .4s; 22 | transition: transform .4s; 23 | @include transform(translate3d(0, 0, 0)); 24 | 25 | &.left { 26 | z-index: 1; 27 | @include transform(translate3d(-100%, 0, 0)); 28 | } 29 | 30 | &.right { 31 | z-index: 3; 32 | @include transform(translate3d(100%, 0, 0)); 33 | } 34 | } 35 | } 36 | 37 | // Add chevrons to elements 38 | .navigate-left, 39 | .navigate-right, 40 | .push-left, 41 | .push-right { 42 | &:after { 43 | position: absolute; 44 | top: 50%; 45 | display: inline-block; 46 | font-family: Ratchicons; 47 | font-size: inherit; 48 | line-height: 1; 49 | color: #bbb; 50 | text-decoration: none; 51 | -webkit-font-smoothing: antialiased; 52 | @include transform(translateY(-50%)); 53 | } 54 | } 55 | .navigate-left:after, 56 | .push-left:after { 57 | left: 15px; 58 | content: '\e822'; 59 | } 60 | .navigate-right:after, 61 | .push-right:after{ 62 | right: 15px; 63 | content: '\e826'; 64 | } 65 | -------------------------------------------------------------------------------- /sass/ratchet.scss: -------------------------------------------------------------------------------- 1 | 2 | // Variables 3 | @import "variables.scss"; 4 | 5 | // Mixins 6 | @import "mixins.scss"; 7 | 8 | // Normalize & Base CSS 9 | @import "normalize.scss"; 10 | @import "base.scss"; 11 | @import "type.scss"; 12 | 13 | // Components 14 | @import "buttons.scss"; 15 | @import "bars.scss"; 16 | @import "badges.scss"; 17 | @import "cards.scss"; 18 | @import "table-views.scss"; 19 | @import "forms.scss"; 20 | @import "segmented-controls.scss"; 21 | @import "popovers.scss"; 22 | 23 | // Javascript components 24 | @import "modals.scss"; 25 | @import "sliders.scss"; 26 | @import "toggles.scss"; 27 | @import "push.scss"; 28 | 29 | // Ratchicons 30 | @import "ratchicons.scss"; 31 | -------------------------------------------------------------------------------- /sass/ratchicons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Ratchicons 3 | // -------------------------------------------------- 4 | 5 | @font-face { 6 | font-family: Ratchicons; 7 | font-weight: normal; 8 | font-style: normal; 9 | src: url('../fonts/ratchicons.eot'); 10 | src: url('../fonts/ratchicons.eot?#iefix') format('embedded-opentype'), 11 | url('../fonts/ratchicons.woff') format('woff'), 12 | url('../fonts/ratchicons.ttf') format('truetype'), 13 | url('../fonts/ratchicons.svg#svgFontName') format('svg'); 14 | } 15 | 16 | .icon { 17 | display: inline-block; 18 | font-family: Ratchicons; 19 | font-size: 24px; 20 | line-height: 1; 21 | text-decoration: none; 22 | -webkit-font-smoothing: antialiased; 23 | } 24 | 25 | .icon-back { &:before { content: '\e80a'; } } 26 | .icon-bars { &:before { content: '\e80e'; } } 27 | .icon-caret { &:before { content: '\e80f'; } } 28 | .icon-check { &:before { content: '\e810'; } } 29 | .icon-close { &:before { content: '\e811'; } } 30 | .icon-code { &:before { content: '\e812'; } } 31 | .icon-compose { &:before { content: '\e813'; } } 32 | .icon-download { &:before { content: '\e815'; } } 33 | .icon-edit { &:before { content: '\e829'; } } 34 | .icon-forward { &:before { content: '\e82a'; } } 35 | .icon-gear { &:before { content: '\e821'; } } 36 | .icon-home { &:before { content: '\e82b'; } } 37 | .icon-info { &:before { content: '\e82c'; } } 38 | .icon-list { &:before { content: '\e823'; } } 39 | .icon-more-vertical { &:before { content: '\e82e'; } } 40 | .icon-more { &:before { content: '\e82f'; } } 41 | .icon-pages { &:before { content: '\e824'; } } 42 | .icon-pause { &:before { content: '\e830'; } } 43 | .icon-person { &:before { content: '\e832'; } } 44 | .icon-play { &:before { content: '\e816'; } } 45 | .icon-plus { &:before { content: '\e817'; } } 46 | .icon-refresh { &:before { content: '\e825'; } } 47 | .icon-search { &:before { content: '\e819'; } } 48 | .icon-share { &:before { content: '\e81a'; } } 49 | .icon-sound { &:before { content: '\e827'; } } 50 | .icon-sound2 { &:before { content: '\e828'; } } 51 | .icon-sound3 { &:before { content: '\e80b'; } } 52 | .icon-sound4 { &:before { content: '\e80c'; } } 53 | .icon-star-filled { &:before { content: '\e81b'; } } 54 | .icon-star { &:before { content: '\e81c'; } } 55 | .icon-stop { &:before { content: '\e81d'; } } 56 | .icon-trash { &:before { content: '\e81e'; } } 57 | .icon-up-nav { &:before { content: '\e81f'; } } 58 | .icon-up { &:before { content: '\e80d'; } } 59 | .icon-right-nav { &:before { content: '\e818'; } } 60 | .icon-right { &:before { content: '\e826'; } } 61 | .icon-down-nav { &:before { content: '\e814'; } } 62 | .icon-down { &:before { content: '\e820'; } } 63 | .icon-left-nav { &:before { content: '\e82d'; } } 64 | .icon-left { &:before { content: '\e822'; } } 65 | -------------------------------------------------------------------------------- /sass/segmented-controls.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Segmented controllers 3 | // -------------------------------------------------- 4 | 5 | .segmented-control { 6 | position: relative; 7 | display: table; 8 | overflow: hidden; 9 | font-size: 12px; 10 | font-weight: $font-weight-light; 11 | background-color: $chrome-color; 12 | border: 1px solid #ccc; 13 | border-radius: 3px; 14 | 15 | // Section within controller 16 | .control-item { 17 | display: table-cell; 18 | width: 1%; 19 | padding-top: 6px; 20 | padding-bottom: 7px; 21 | overflow: hidden; 22 | line-height: 1; 23 | color: #333; 24 | text-align: center; 25 | text-overflow: ellipsis; 26 | white-space: nowrap; 27 | border-left: 1px solid #ccc; 28 | 29 | // Remove border-left and shadow from first section 30 | &:first-child { 31 | border-left-width: 0; 32 | } 33 | 34 | // Tap state of segmented controller 35 | &:active { 36 | background-color: #eee; 37 | } 38 | 39 | // Selected state of segmented controller 40 | &.active { 41 | background-color: #ccc; 42 | } 43 | } 44 | } 45 | 46 | // Other segmented controller types 47 | // -------------------------------------------------- 48 | 49 | // Primary 50 | .segmented-control-primary { 51 | border-color: $primary-color; 52 | 53 | .control-item { 54 | color: $primary-color; 55 | border-color: inherit; 56 | 57 | &:active { 58 | background-color: lighten($primary-color, 35%); 59 | } 60 | &.active { 61 | color: #fff; 62 | background-color: $primary-color; 63 | } 64 | } 65 | } 66 | 67 | // Positive 68 | .segmented-control-positive { 69 | border-color: $positive-color; 70 | 71 | .control-item { 72 | color: $positive-color; 73 | border-color: inherit; 74 | 75 | &:active { 76 | background-color: lighten($positive-color, 35%); 77 | } 78 | &.active { 79 | color: #fff; 80 | background-color: $positive-color; 81 | } 82 | } 83 | } 84 | 85 | // Negative 86 | .segmented-control-negative { 87 | border-color: $negative-color; 88 | 89 | .control-item { 90 | color: $negative-color; 91 | border-color: inherit; 92 | 93 | &:active { 94 | background-color: lighten($negative-color, 35%); 95 | } 96 | &.active { 97 | color: #fff; 98 | background-color: $negative-color; 99 | } 100 | } 101 | } 102 | 103 | // This is used to by the js to show and hide content tide to the segmented control. 104 | .control-content { 105 | display: none; 106 | 107 | &.active { 108 | display: block; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /sass/sliders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Slider styles (to be used with sliders.js) 3 | // -------------------------------------------------- 4 | 5 | // Width of slider 6 | .slider { 7 | width: 100%; 8 | } 9 | 10 | // Outer wrapper for slider 11 | .slider { 12 | overflow: hidden; 13 | background-color: #000; 14 | 15 | // Inner wrapper for slider (width of all slides together) 16 | .slide-group { 17 | position: relative; 18 | font-size: 0; // Remove spaces from inline-block children 19 | white-space: nowrap; 20 | @include transition(all 0s linear); 21 | 22 | // Individual slide 23 | .slide { 24 | display: inline-block; 25 | width: 100%; 26 | height: 100%; 27 | font-size: 14px; 28 | vertical-align: top; // Ensure that li always aligns to top 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /sass/table-views.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Table views 3 | // -------------------------------------------------- 4 | 5 | .table-view { 6 | padding-left: 0; 7 | margin-top: 0; 8 | margin-bottom: 15px; 9 | list-style: none; // Remove usual bullet styles from table view 10 | background-color: #fff; 11 | border-top: $border-default; 12 | border-bottom: $border-default; 13 | } 14 | 15 | // Pad each table view item and add dividers 16 | .table-view-cell { 17 | position: relative; 18 | padding: 11px 65px 11px 15px; 19 | overflow: hidden; 20 | border-bottom: $border-default; 21 | 22 | // Remove the border from the last table view item 23 | &:last-child { 24 | border-bottom: 0; 25 | } 26 | // If it's a table view of links, make sure the child takes up full table view item tap area (want to avoid selecting child buttons though) 27 | > a:not(.btn) { 28 | position: relative; 29 | display: block; 30 | padding: inherit; 31 | margin: -11px -65px -11px -15px; // Make the entire list item tappable. 32 | overflow: hidden; 33 | color: inherit; 34 | 35 | &:active { 36 | background-color: #eee; 37 | } 38 | } 39 | p { 40 | margin-bottom: 0; 41 | } 42 | } 43 | 44 | 45 | // Table view dividers 46 | // -------------------------------------------------- 47 | 48 | .table-view-divider { 49 | padding-top: 6px; 50 | padding-bottom: 6px; 51 | padding-left: 15px; 52 | margin-top: -1px; // Hides the border of the previous list item 53 | margin-left: 0; 54 | font-weight: $font-weight; 55 | color: #999; 56 | background-color: #fafafa; 57 | border-top: $border-default; 58 | border-bottom: $border-default; 59 | } 60 | 61 | 62 | // Table-views with media (images,avatars, icons) 63 | // -------------------------------------------------- 64 | 65 | .table-view .media, 66 | .table-view .media-body { 67 | overflow: hidden; 68 | } 69 | .table-view .media-object { 70 | &.pull-left { 71 | margin-right: 10px; 72 | } 73 | &.pull-right { 74 | margin-left: 10px; 75 | } 76 | } 77 | 78 | 79 | // Table-views with buttons, badges and toggles 80 | // -------------------------------------------------- 81 | .table-view-cell, 82 | .table-view-cell > a { 83 | > .btn, 84 | > .badge, 85 | > .toggle { 86 | position: absolute; 87 | top: 50%; 88 | right: 15px; 89 | @include transform(translateY(-50%)); 90 | } 91 | 92 | // If the cell has a chevron, give some more room. 93 | .navigate-left, 94 | .navigate-right, 95 | .push-left, 96 | .push-right { 97 | > .btn, 98 | > .badge, 99 | > .toggle { 100 | right: 35px; 101 | } 102 | } 103 | } 104 | 105 | // If the table view is the first component, give it extra margin on top. 106 | .content > .table-view:first-child { 107 | margin-top: 15px; 108 | } 109 | -------------------------------------------------------------------------------- /sass/toggles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Toggle styles (to be used with toggles.js) 3 | // -------------------------------------------------- 4 | 5 | .toggle { 6 | position: relative; 7 | display: block; 8 | width: 74px; 9 | height: 30px; 10 | background-color: #fff; 11 | border: 2px solid #ddd; 12 | border-radius: 20px; 13 | @include transition-property(background-color, border); 14 | @include transition-duration(.2s); 15 | 16 | // Sliding handle 17 | .toggle-handle { 18 | position: absolute; 19 | top: -1px; 20 | left: -1px; 21 | z-index: 2; 22 | width: 28px; 23 | height: 28px; 24 | background-color: #fff; 25 | border: 1px solid #ddd; 26 | border-radius: 100px; 27 | -webkit-transition-property: -webkit-transform, border, width; 28 | -moz-transition-property: -moz-transform, border, width; 29 | transition-property: transform, border, width; 30 | @include transition-duration(.2s); 31 | } 32 | &:before { 33 | position: absolute; 34 | top: 3px; 35 | right: 11px; 36 | font-size: 13px; 37 | color: #999; 38 | text-transform: uppercase; 39 | content: "Off"; 40 | } 41 | 42 | // Active state for toggle 43 | &.active { 44 | background-color: $positive-color; 45 | border: 2px solid $positive-color; 46 | 47 | .toggle-handle { 48 | border-color: $positive-color; 49 | @include transform(translate3d(44px,0,0)); 50 | } 51 | &:before { 52 | right: auto; 53 | left: 15px; 54 | color: #fff; 55 | content: "On"; 56 | } 57 | } 58 | // Hide the checkbox 59 | input[type="checkbox"] { 60 | display: none; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /sass/type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Typography 3 | // -------------------------------------------------- 4 | 5 | h1, h2, h3, h4, h5, h6 { 6 | margin-top: 0; 7 | margin-bottom: 10px; 8 | line-height: 1; 9 | } 10 | h1, .h1 { font-size: 36px; } 11 | h2, .h2 { font-size: 30px; } 12 | h3, .h3 { font-size: 24px; } 13 | h4, .h4 { font-size: 18px; } 14 | h5, .h5 { font-size: 14px; margin-top: 20px; } 15 | h6, .h6 { font-size: 12px; margin-top: 20px; } 16 | 17 | // Paragraphs 18 | p { 19 | margin-top: 0; 20 | margin-bottom: 10px; 21 | font-size: 14px; 22 | color: #777; 23 | } 24 | -------------------------------------------------------------------------------- /sass/variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | 5 | 6 | // Type 7 | // -------------------------------------------------- 8 | $font-family-default: "Helvetica Neue", Helvetica, sans-serif !default; 9 | $font-size-default: 17px !default; 10 | $font-weight: 500 !default; 11 | $font-weight-light: 400 !default; 12 | $line-height-default: 21px !default; 13 | 14 | 15 | // Colors 16 | // -------------------------------------------------- 17 | 18 | // Main theme colors 19 | $primary-color: #428bca !default; 20 | $chrome-color: #fff !default; 21 | 22 | // Action colors 23 | $default-color: #fff !default; 24 | $positive-color: #5cb85c !default; 25 | $negative-color: #d9534f !default; 26 | 27 | 28 | // Bars 29 | // -------------------------------------------------- 30 | 31 | $bar-base-height: 44px !default; 32 | $bar-tab-height: 50px !default; 33 | $bar-side-spacing: 10px !default; 34 | 35 | 36 | // Cards 37 | // -------------------------------------------------- 38 | 39 | $card-bg: #fff !default; 40 | 41 | 42 | // Buttons 43 | // -------------------------------------------------- 44 | 45 | $button-font-size: 12px !default; 46 | 47 | 48 | // Transitions 49 | // -------------------------------------------------- 50 | 51 | $timing-fuction: cubic-bezier(.1,.5,.1,1) !default; // Inspired by @c2prods 52 | 53 | 54 | // Borders 55 | // -------------------------------------------------- 56 | 57 | $border-default-width: 1px; 58 | $border-default: $border-default-width solid #ddd; 59 | $border-radius: 6px !default; 60 | --------------------------------------------------------------------------------