Browse Source

dem conflicts

pull/292/head
connors 11 years ago
parent
commit
ac62aae96c
  1. 8
      .gitattributes
  2. 4
      .gitignore
  3. 2
      CNAME
  4. 89
      Gruntfile.js
  5. 28
      README.md
  6. 20
      _config.yml
  7. 6
      bower.json
  8. 6
      dist/ratchet-theme-android.css
  9. 4
      dist/ratchet-theme-ios.css
  10. 4
      dist/ratchet.css
  11. 6
      dist/ratchet.js
  12. 9
      dist/ratchet.min.css
  13. 10
      dist/ratchet.min.js
  14. 4
      dist/template.html
  15. BIN
      dist/touch-icons/apple-touch-icon-114x114.png
  16. BIN
      dist/touch-icons/apple-touch-icon-57x57.png
  17. BIN
      dist/touch-icons/apple-touch-icon-72x72.png
  18. 1
      docs/_includes/download-module.html
  19. 4
      docs/_includes/footer.html
  20. 14
      docs/_includes/header.html
  21. 14
      docs/assets/css/docs.css
  22. BIN
      docs/assets/img/android.png
  23. BIN
      docs/assets/img/apple-touch-icon-114x114.png
  24. BIN
      docs/assets/img/apple-touch-icon-57x57.png
  25. BIN
      docs/assets/img/apple-touch-icon-72x72.png
  26. BIN
      docs/assets/img/example-android.png
  27. BIN
      docs/assets/img/example-ios.png
  28. BIN
      docs/assets/img/example.png
  29. BIN
      docs/assets/img/iphone5c.png
  30. BIN
      docs/assets/img/iphone5s.png
  31. BIN
      docs/assets/img/pattern.png
  32. BIN
      docs/assets/img/slide-1.png
  33. BIN
      docs/assets/img/slide-2.png
  34. BIN
      docs/assets/img/slide-3.png
  35. 4
      docs/assets/js/docs.js
  36. 14
      docs/components.html
  37. 6
      docs/dist/ratchet-theme-android.css
  38. 4
      docs/dist/ratchet-theme-ios.css
  39. 4
      docs/dist/ratchet.css
  40. 6
      docs/dist/ratchet.js
  41. 9
      docs/dist/ratchet.min.css
  42. 10
      docs/dist/ratchet.min.js
  43. 6
      docs/examples.html
  44. BIN
      docs/examples/app-movies/img/argo.png
  45. BIN
      docs/examples/app-movies/img/ralph.png
  46. BIN
      docs/examples/app-movies/img/skyfall.png
  47. 24
      docs/examples/app-movies/index.html
  48. 1
      docs/index.html
  49. 2
      docs/one.html
  50. 2
      docs/two.html
  51. 2
      js/push.js
  52. 12
      package.json
  53. 10
      sass/bars.scss
  54. 4
      sass/base.scss
  55. 2
      sass/buttons.scss
  56. 22
      sass/docs.scss
  57. 4
      sass/modals.scss
  58. 124
      sass/normalize.scss
  59. 2
      sass/popovers.scss
  60. 2
      sass/push.scss
  61. 4
      sass/sliders.scss
  62. 4
      sass/table-views.scss
  63. 26
      sass/theme-android.scss
  64. 16
      sass/theme-ios.scss
  65. 2
      sass/toggles.scss

8
.gitattributes vendored

@ -0,0 +1,8 @@
# Enforce Unix newlines
*.css text eol=lf
*.html text eol=lf
*.js text eol=lf
*.json text eol=lf
*.md text eol=lf
*.scss text eol=lf
*.yml text eol=lf

4
.gitignore vendored

@ -32,3 +32,7 @@ nbproject
.idea .idea
node_modules node_modules
_site _site
# grunt-html-validation
validation-report.json
validation-status.json

2
CNAME

@ -1 +1 @@
goratchet.com goratchet.com

89
Gruntfile.js

@ -20,22 +20,22 @@ module.exports = function(grunt) {
docsPath: 'docs/dist/', docsPath: 'docs/dist/',
docsAssetsPath: 'docs/assets/' docsAssetsPath: 'docs/assets/'
}, },
banner: '/*!\n' + banner: '/*!\n' +
' * =====================================================\n' + ' * =====================================================\n' +
' * Ratchet v<%= pkg.version %>\n' + ' * Ratchet v<%= pkg.version %>\n' +
' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
' * Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' + ' * Licensed under <%= pkg.license %>.\n' +
' *\n' + ' *\n' +
' * V<%= pkg.version %> designed by @connors.\n' + ' * v<%= pkg.version %> designed by @connors.\n' +
' * =====================================================\n' + ' * =====================================================\n' +
' */\n', ' */\n',
concat: { concat: {
options: {
banner: '<%= banner %>'
},
ratchet: { ratchet: {
options: {
banner: '<%= banner %>'
},
src: [ src: [
'js/modals.js', 'js/modals.js',
'js/popovers.js', 'js/popovers.js',
@ -51,11 +51,11 @@ module.exports = function(grunt) {
dest: '<%= meta.docsPath %><%= pkg.name %>.js' dest: '<%= meta.docsPath %><%= pkg.name %>.js'
} }
}, },
sass: { sass: {
options: { options: {
banner: '<%= banner %>', banner: '<%= banner %>',
style: 'expanded', style: 'expanded'
}, },
dist: { dist: {
files: { files: {
@ -77,7 +77,31 @@ module.exports = function(grunt) {
dest: 'docs/dist' dest: 'docs/dist'
} }
}, },
cssmin: {
minify: {
options: {
banner: '', // set to empty ; see bellow
keepSpecialComments: '*', // set to '*' because we already add the banner in sass
report: 'min'
},
files: {
'dist/<%= pkg.name %>.min.css': 'dist/<%= pkg.name %>.css'
}
}
},
uglify: {
options: {
banner: '<%= banner %>',
report: 'min'
},
ratchet: {
src: 'dist/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
},
watch: { watch: {
scripts: { scripts: {
files: [ files: [
@ -85,14 +109,53 @@ module.exports = function(grunt) {
], ],
tasks: ['sass'] tasks: ['sass']
} }
},
jekyll: {
docs: {}
},
validation: {
options: {
charset: 'utf-8',
doctype: 'HTML5',
failHard: true,
reset: true,
relaxerror: [
'Bad value apple-mobile-web-app-title for attribute name on element meta: Keyword apple-mobile-web-app-title is not registered.',
'Attribute ontouchstart not allowed on element body at this point.'
]
},
files: {
src: '_site/**/*.html'
}
},
sed: {
versionNumber: {
pattern: (function () {
var old = grunt.option('oldver');
return old ? RegExp.quote(old) : old;
})(),
replacement: grunt.option('newver'),
recursive: true
}
} }
}); });
// Load the plugins // Load the plugins
require('load-grunt-tasks')(grunt, {scope: 'devDependencies'}); require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
// Default task(s). // Default task(s).
grunt.registerTask('default', ['sass', 'concat', 'copy']); grunt.registerTask('dist-css', ['sass', 'cssmin']);
grunt.registerTask('build', ['sass', 'concat', 'copy']); grunt.registerTask('dist-js', ['concat', 'uglify']);
grunt.registerTask('dist', ['dist-css', 'dist-js', 'copy']);
grunt.registerTask('validate-html', ['jekyll', 'validation']);
grunt.registerTask('default', ['dist']);
grunt.registerTask('build', ['dist']);
// Version numbering task.
// grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
// This can be overzealous, so its changes should always be manually reviewed!
grunt.registerTask('change-version-number', 'sed');
}; };

28
README.md

@ -1,4 +1,4 @@
# Ratchet v2.0 [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies) # Ratchet v2.0.0 [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies)
Build mobile apps with simple HTML, CSS, and JS components. Build mobile apps with simple HTML, CSS, and JS components.
@ -6,7 +6,7 @@ Build mobile apps with simple HTML, CSS, and JS components.
- Clone the repo with `git clone https://github.com/twbs/ratchet.git` or just [download](http://github.com/twbs/ratchet/archive/v2.0.0.zip) the bundled CSS and JS - Clone the repo with `git clone https://github.com/twbs/ratchet.git` or just [download](http://github.com/twbs/ratchet/archive/v2.0.0.zip) the bundled CSS and JS
- [Read the docs](http://goratchet.com) to learn about the components and how to get a prototype on your phone - [Read the docs](http://goratchet.com) to learn about the components and how to get a prototype on your phone
- We will have example apps to check out very soon! - [Check out examples](http://goratchet.com/examples/)
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). 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).
@ -37,11 +37,27 @@ Please file a GitHub issue to [report a bug](https://github.com/twbs/ratchet/iss
A small list of "gotchas" are provided below for designers and developers starting to work with Ratchet A small list of "gotchas" are provided below for designers and developers starting to work with Ratchet
- 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: - 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:
- Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences) - Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences)
- Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices) - Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices)
- 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. - 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.
- 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. - 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.
- 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 <port>``` to serve up the files in the current directory to ```http://localhost:<port>``` - 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 <port>``` to serve up the files in the current directory to ```http://localhost:<port>```
## Versioning
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.
Releases will be numbered with the following format:
`<major>.<minor>.<patch>`
And constructed with the following guidelines:
- Breaking backward compatibility **bumps the major** while resetting minor and patch
- New additions without breaking backward compatibility **bumps the minor** while resetting the patch
- Bug fixes and misc changes **bumps only the patch**
For more information on SemVer, please visit <http://semver.org/>.
## Maintainers ## Maintainers

20
_config.yml

@ -1,12 +1,14 @@
name: Ratchet # Meta data
authors: Connor Sears name: Ratchet
description: Prototype mobile apps with simple HTML, CSS, and JS components. authors: Connor Sears
description: Prototype mobile apps with simple HTML, CSS, and JS components.
pygments: true # Dependencies
permalink: pretty pygments: true
# Permalinks
permalink: pretty
# Server # Server
source: ./docs source: ./docs
port: 4000 port: 4000
baseurl: /
url: http://localhost:4000

6
bower.json

@ -9,8 +9,6 @@
"_config.yml", "_config.yml",
"CNAME", "CNAME",
"CONTRIBUTING.md", "CONTRIBUTING.md",
"docs-assets" "docs"
], ]
"dependencies": {
}
} }

6
dist/ratchet-theme-android.css vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */
@ -467,7 +467,7 @@ textarea,
} }
.backdrop { .backdrop {
background-color: none; background-color: transparent;
} }
.popover .bar { .popover .bar {

4
dist/ratchet-theme-ios.css vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */

4
dist/ratchet.css vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */

6
dist/ratchet.js vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */
/* ---------------------------------- /* ----------------------------------
@ -131,7 +131,7 @@
'slide-out' : 'slide-in', 'slide-out' : 'slide-in',
'fade' : 'fade' 'fade' : 'fade'
}; };
var bars = { var bars = {
bartab : '.bar-tab', bartab : '.bar-tab',
barnav : '.bar-nav', barnav : '.bar-nav',

9
dist/ratchet.min.css vendored

File diff suppressed because one or more lines are too long

10
dist/ratchet.min.js vendored

File diff suppressed because one or more lines are too long

4
dist/template.html vendored

@ -52,7 +52,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="https://goratchet.com"> <a class="push-right" href="https://github.com/twbs/ratchet/">
<strong>Ratchet on Github</strong> <strong>Ratchet on Github</strong>
</a> </a>
</li> </li>
@ -71,4 +71,4 @@
</div> </div>
</body> </body>
</html> </html>

BIN
dist/touch-icons/apple-touch-icon-114x114.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
dist/touch-icons/apple-touch-icon-57x57.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
dist/touch-icons/apple-touch-icon-72x72.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

1
docs/_includes/download-module.html

@ -2,4 +2,5 @@
<h4 class="docs-module-title">Download Ratchet</h4> <h4 class="docs-module-title">Download Ratchet</h4>
<p>If you haven't already, download the source code for Ratchet.</p> <p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> <a href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
<p>Currently v2.0.0</p>
</div> </div>

4
docs/_includes/footer.html

@ -2,7 +2,7 @@
<!-- Social links --> <!-- Social links -->
<ul class="social"> <ul class="social">
<li> <li>
<iframe src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=ratchet&amp;type=watch&amp;count=true" width="100" height="20"></iframe>
</li> </li>
<li> <li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a> <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
@ -14,7 +14,7 @@
</li> </li>
</ul> </ul>
<p class="docs-footer-text">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p> <p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links"> <ul class="docs-footer-links">
<li>Currently v2.0.0</li> <li>Currently v2.0.0</li>

14
docs/_includes/header.html

@ -7,14 +7,21 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,700,500">
<link rel="stylesheet" href="../dist/ratchet.css"> <link rel="stylesheet" href="../dist/ratchet.css">
<link rel="stylesheet" href="../assets/css/docs.css"> <link rel="stylesheet" href="../assets/css/docs.css">
<link rel="stylesheet" href="../assets/css/pygments.css"> <link rel="stylesheet" href="../assets/css/pygments.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/img/apple-touch-icon-114x114.png">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../dist/ratchet.js"></script> <script src="../dist/ratchet.js"></script>
<script src="../assets/js/docs.js"></script> <script src="../assets/js/docs.js"></script>
<script src="../assets/js/fingerblast.js"></script> <script src="../assets/js/fingerblast.js"></script>
@ -23,9 +30,6 @@
<script src="//use.typekit.net/asj6ttm.js"></script> <script src="//use.typekit.net/asj6ttm.js"></script>
<script>try{Typekit.load();}catch(e){}</script> <script>try{Typekit.load();}catch(e){}</script>
<!-- Roboto -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<script> <script>
var _gaq = _gaq || []; var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']); _gaq.push(['_setAccount', 'UA-36050008-1']);

14
docs/assets/css/docs.css

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */
@ -360,6 +360,11 @@ body {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
.github-btn {
border: 0;
overflow: hidden;
}
.docs-component-toolbar { .docs-component-toolbar {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
@ -412,7 +417,6 @@ body {
} }
.docs-example-group .example-wrap .example { .docs-example-group .example-wrap .example {
display: block; display: block;
padding: 4px;
overflow: hidden; overflow: hidden;
padding: 3px; padding: 3px;
width: 100%; width: 100%;
@ -803,7 +807,7 @@ hr {
} }
.docs-footer .social .twitter-follow-button { .docs-footer .social .twitter-follow-button {
margin-top: 0px; margin-top: 0;
} }
.step-title { .step-title {
@ -1978,7 +1982,7 @@ hr {
transform: scale(1); transform: scale(1);
} }
.platform-android .backdrop { .platform-android .backdrop {
background-color: none; background-color: transparent;
} }
.platform-android .popover .bar { .platform-android .popover .bar {
border-radius: 0; border-radius: 0;

BIN
docs/assets/img/android.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 86 KiB

BIN
docs/assets/img/apple-touch-icon-114x114.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/assets/img/apple-touch-icon-57x57.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
docs/assets/img/apple-touch-icon-72x72.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
docs/assets/img/example-android.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/assets/img/example-ios.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/assets/img/example.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 266 KiB

After

Width:  |  Height:  |  Size: 254 KiB

BIN
docs/assets/img/iphone5c.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 61 KiB

BIN
docs/assets/img/iphone5s.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
docs/assets/img/pattern.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

After

Width:  |  Height:  |  Size: 91 KiB

BIN
docs/assets/img/slide-1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/assets/img/slide-2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/assets/img/slide-3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 799 KiB

4
docs/assets/js/docs.js

@ -42,7 +42,7 @@ $(function() {
if (windowWidth >= 768) { if (windowWidth >= 768) {
device.initialLeft = device.offset().left; device.initialLeft = device.offset().left;
device.initialTop = device.initialTop || device.offset().top; device.initialTop = device.initialTop || device.offset().top;
device.dockingOffset = ($(window).height() - device.height())/2; device.dockingOffset = ($(window).height() - device.height())/2;
} }
checkDesktopContent(); checkDesktopContent();
@ -65,7 +65,7 @@ $(function() {
var trigger = $('.js-docs-nav-trigger'); var trigger = $('.js-docs-nav-trigger');
trigger.toggleClass('active'); trigger.toggleClass('active');
nav.toggleClass('active'); nav.toggleClass('active');
}); });
navComponentLinks.click(function(e) { navComponentLinks.click(function(e) {

14
docs/components.html

@ -508,7 +508,7 @@ title: Components &middot; Ratchet
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="push-right">
<img class="media-object pull-left" src="http://placehold.it/42x42"> <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
@ -517,7 +517,7 @@ title: Components &middot; Ratchet
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="push-right">
<img class="media-object pull-left" src="http://placehold.it/42x42"> <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
@ -526,7 +526,7 @@ title: Components &middot; Ratchet
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="push-right">
<img class="media-object pull-left" src="http://placehold.it/42x42"> <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
@ -772,7 +772,7 @@ title: Components &middot; Ratchet
</article> </article>
<!-- Buttons --> <!-- Buttons -->
<article class="component" id="buttons"> <article class="component" id="buttonsWithIcons">
<h3 class="component-title">Buttons with icons</h3> <h3 class="component-title">Buttons with icons</h3>
<p class="component-description">Ratchicons work inside buttons too.</p> <p class="component-description">Ratchicons work inside buttons too.</p>
@ -1149,17 +1149,17 @@ document
<div class="slider" id="mySlider"> <div class="slider" id="mySlider">
<div class="slide-group"> <div class="slide-group">
<div class="slide"> <div class="slide">
<img src="../assets/img/slide-1.png"> <img src="../assets/img/slide-1.png" alt="Mountain and sky">
<span class="slide-text"> <span class="slide-text">
<span class="icon icon-left-nav"></span> <span class="icon icon-left-nav"></span>
Slide me Slide me
</span> </span>
</div> </div>
<div class="slide"> <div class="slide">
<img src="../assets/img/slide-2.png"> <img src="../assets/img/slide-2.png" alt="Giant mecha">
</div> </div>
<div class="slide"> <div class="slide">
<img src="../assets/img/slide-3.png"> <img src="../assets/img/slide-3.png" alt="Big Ben">
</div> </div>
</div> </div>
</div> </div>

6
docs/dist/ratchet-theme-android.css vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */
@ -467,7 +467,7 @@ textarea,
} }
.backdrop { .backdrop {
background-color: none; background-color: transparent;
} }
.popover .bar { .popover .bar {

4
docs/dist/ratchet-theme-ios.css vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */

4
docs/dist/ratchet.css vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */

6
docs/dist/ratchet.js vendored

@ -2,9 +2,9 @@
* ===================================================== * =====================================================
* Ratchet v2.0.0 * Ratchet v2.0.0
* Copyright 2014 Connor Sears * Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT * Licensed under MIT.
* *
* V2.0.0 designed by @connors. * v2.0.0 designed by @connors.
* ===================================================== * =====================================================
*/ */
/* ---------------------------------- /* ----------------------------------
@ -131,7 +131,7 @@
'slide-out' : 'slide-in', 'slide-out' : 'slide-in',
'fade' : 'fade' 'fade' : 'fade'
}; };
var bars = { var bars = {
bartab : '.bar-tab', bartab : '.bar-tab',
barnav : '.bar-nav', barnav : '.bar-nav',

9
docs/dist/ratchet.min.css vendored

File diff suppressed because one or more lines are too long

10
docs/dist/ratchet.min.js vendored

File diff suppressed because one or more lines are too long

6
docs/examples.html

@ -26,19 +26,19 @@ title: Examples &middot; Ratchet
<div class="docs-example-group"> <div class="docs-example-group">
<div class="example-wrap"> <div class="example-wrap">
<a class="example" href="../examples/app-movies" data-ignore="push"> <a class="example" href="../examples/app-movies" data-ignore="push">
<img src="../assets/img/example.png"> <img src="../assets/img/example.png" alt="Movie finder app example">
</a> </a>
<h5>Movie finder</h5> <h5>Movie finder</h5>
</div> </div>
<div class="example-wrap"> <div class="example-wrap">
<a class="example" href="../examples/app-ios-mail" data-ignore="push"> <a class="example" href="../examples/app-ios-mail" data-ignore="push">
<img src="../assets/img/example-ios.png"> <img src="../assets/img/example-ios.png" alt="iOS mail app example">
</a> </a>
<h5>iOS mail app</h5> <h5>iOS mail app</h5>
</div> </div>
<div class="example-wrap"> <div class="example-wrap">
<a class="example" href="../examples/app-android-notes" data-ignore="push"> <a class="example" href="../examples/app-android-notes" data-ignore="push">
<img src="../assets/img/example-android.png"> <img src="../assets/img/example-android.png" alt="Android notes app example">
</a> </a>
<h5>Android notes app</h5> <h5>Android notes app</h5>
</div> </div>

BIN
docs/examples/app-movies/img/argo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 247 KiB

BIN
docs/examples/app-movies/img/ralph.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
docs/examples/app-movies/img/skyfall.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 16 KiB

24
docs/examples/app-movies/index.html

@ -28,13 +28,13 @@
<div class="slider"> <div class="slider">
<div class="slide-group"> <div class="slide-group">
<div class="slide"> <div class="slide">
<img src="img/argo.png"> <img src="img/argo.png" alt="Argo">
</div> </div>
<div class="slide"> <div class="slide">
<img src="img/skyfall.png"> <img src="img/skyfall.png" alt="Skyfall">
</div> </div>
<div class="slide"> <div class="slide">
<img src="img/ralph.png"> <img src="img/ralph.png" alt="Wreck-It Ralph">
</div> </div>
</div> </div>
</div> </div>
@ -43,7 +43,7 @@
<li class="table-view-cell table-view-divider">Recommended movies</li> <li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body"> <div class="media-body">
Argo Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -52,7 +52,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body"> <div class="media-body">
Skyfall: 007 Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -61,7 +61,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body"> <div class="media-body">
Wreck-it Ralph Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -70,7 +70,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body"> <div class="media-body">
Argo Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -79,7 +79,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body"> <div class="media-body">
Skyfall: 007 Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -88,7 +88,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body"> <div class="media-body">
Wreck-it Ralph Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -97,7 +97,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body"> <div class="media-body">
Argo Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -106,7 +106,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body"> <div class="media-body">
Skyfall: 007 Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>
@ -115,7 +115,7 @@
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body"> <div class="media-body">
Wreck-it Ralph Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur.</p>

1
docs/index.html

@ -8,6 +8,7 @@ title: Ratchet
<div class="docs-header-content"> <div class="docs-header-content">
<p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p> <p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p>
<a data-ignore="push" href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> <a data-ignore="push" href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
<p>Currently v2.0.0</p>
</div> </div>
{% include ad.html %} {% include ad.html %}

2
docs/one.html

@ -10,7 +10,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../dist/ratchet.css"> <link rel="stylesheet" href="../dist/ratchet.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png"> <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
</head> </head>
<body ontouchstart=""> <body ontouchstart="">

2
docs/two.html

@ -10,7 +10,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../dist/ratchet.css"> <link rel="stylesheet" href="../dist/ratchet.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png"> <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
</head> </head>
<body ontouchstart=""> <body ontouchstart="">

2
js/push.js

@ -22,7 +22,7 @@
'slide-out' : 'slide-in', 'slide-out' : 'slide-in',
'fade' : 'fade' 'fade' : 'fade'
}; };
var bars = { var bars = {
bartab : '.bar-tab', bartab : '.bar-tab',
barnav : '.bar-nav', barnav : '.bar-nav',

12
package.json

@ -3,7 +3,6 @@
"description": "Build native apps with simple HTML, CSS, and JS components.", "description": "Build native apps with simple HTML, CSS, and JS components.",
"version": "2.0.0", "version": "2.0.0",
"keywords": [ "keywords": [
"ratchet",
"css", "css",
"ios", "ios",
"native", "native",
@ -20,21 +19,20 @@
"bugs": { "bugs": {
"url": "https://github.com/twbs/ratchet/issues" "url": "https://github.com/twbs/ratchet/issues"
}, },
"licenses": [ "license": "MIT",
{
"type": "MIT",
"url": "http://www.opensource.org/licenses/MIT"
}
],
"devDependencies": { "devDependencies": {
"grunt": "~0.4.2", "grunt": "~0.4.2",
"grunt-contrib-concat": "~0.3.0", "grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.5.0", "grunt-contrib-copy": "~0.5.0",
"grunt-contrib-cssmin": "~0.8.0",
"grunt-contrib-jshint": "~0.8.0", "grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-nodeunit": "~0.3.0", "grunt-contrib-nodeunit": "~0.3.0",
"grunt-contrib-sass": "~0.7.1", "grunt-contrib-sass": "~0.7.1",
"grunt-contrib-uglify": "~0.3.0",
"grunt-contrib-watch": "~0.5.3", "grunt-contrib-watch": "~0.5.3",
"grunt-html-validation": "~0.1.13",
"grunt-jekyll": "~0.4.1", "grunt-jekyll": "~0.4.1",
"grunt-sed": "~0.1.1",
"load-grunt-tasks": "~0.4.0" "load-grunt-tasks": "~0.4.0"
} }
} }

10
sass/bars.scss

@ -59,7 +59,7 @@
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0 (-$bar-side-spacing); margin: 0 (-$bar-side-spacing);
font-size: $font-size-default; font-size: $font-size-default;
font-weight: $font-weight; font-weight: $font-weight;
line-height: $bar-base-height; line-height: $bar-base-height;
@ -131,10 +131,10 @@
font-weight: $font-weight-light; font-weight: $font-weight-light;
// Give buttons that are floated left and right side margin // Give buttons that are floated left and right side margin
&.pull-right { &.pull-right {
margin-left: $bar-side-spacing; margin-left: $bar-side-spacing;
} }
&.pull-left { &.pull-left {
margin-right: $bar-side-spacing; margin-right: $bar-side-spacing;
} }
} }
@ -202,7 +202,7 @@
top: 3px; top: 3px;
padding: 0; padding: 0;
} }
// Handle carets in the titles // Handle carets in the titles
.title .icon { .title .icon {
padding: 0; padding: 0;

4
sass/base.scss

@ -3,7 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Use box sizing on all the things! // Use box sizing on all the things!
* { * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -27,7 +27,7 @@ body {
a { a {
color: $primary-color; color: $primary-color;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers. -webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers.
&:active { &:active {
color: darken($primary-color, 10%); color: darken($primary-color, 10%);

2
sass/buttons.scss

@ -78,7 +78,7 @@
} }
} }
// Outlined buttons // Outlined buttons
.btn-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;

22
sass/docs.scss

@ -272,7 +272,7 @@ body {
font-size: 14px; font-size: 14px;
} }
// Docs modules // Docs modules
.docs-module { .docs-module {
margin-top: 20px; margin-top: 20px;
padding: 20px; padding: 20px;
@ -354,6 +354,11 @@ body {
} }
} }
// Style the GitHub buttons via CSS instead of inline attributes
.github-btn {
border: 0;
overflow: hidden;
}
// Platform toggle // Platform toggle
// -------------------------------------------------- // --------------------------------------------------
@ -409,7 +414,6 @@ body {
} }
.example { .example {
display: block; display: block;
padding: 4px;
overflow: hidden; overflow: hidden;
padding: 3px; padding: 3px;
width: 100%; width: 100%;
@ -602,7 +606,7 @@ code {
margin: 10px auto; margin: 10px auto;
} }
// Popovers // Popovers
#popoversInDevice { #popoversInDevice {
#iwindow:before { #iwindow:before {
position: absolute; position: absolute;
@ -667,7 +671,7 @@ hr {
// Docs media queries // Docs media queries
// -------------------------------------------------- // --------------------------------------------------
// Tablet to desktop // Tablet to desktop
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header { .docs-header {
min-height: 870px; min-height: 870px;
@ -698,7 +702,7 @@ hr {
.docs-header-content { .docs-header-content {
top: 30%; top: 30%;
@include transform(translateY(-50%)); @include transform(translateY(-50%));
.btn { .btn {
display: inline-block; display: inline-block;
} }
@ -740,7 +744,7 @@ hr {
cursor: pointer; cursor: pointer;
@include transition(opacity .2 linear); @include transition(opacity .2 linear);
&:hover { &:hover {
color: $primary-color; color: $primary-color;
} }
&:active { &:active {
@ -816,7 +820,7 @@ hr {
// Social // Social
.docs-footer { .docs-footer {
.social .twitter-follow-button { .social .twitter-follow-button {
margin-top: 0px; margin-top: 0;
} }
} }
@ -831,7 +835,7 @@ hr {
font-size: 18px; font-size: 18px;
} }
// Docs modules // Docs modules
.docs-module { .docs-module {
margin-top: 35px; margin-top: 35px;
} }
@ -999,7 +1003,7 @@ hr {
.offset-1 { margin-left: 50%; } .offset-1 { margin-left: 50%; }
// Tablet to desktop // Tablet to desktop
// -------------------------------------------------- // --------------------------------------------------
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {

4
sass/modals.scss

@ -3,10 +3,10 @@
// -------------------------------------------------- // --------------------------------------------------
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
opacity: 0; opacity: 0;
z-index: 11; z-index: 11;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;

124
sass/normalize.scss vendored

@ -3,26 +3,26 @@
// 1. Set default font family to sans-serif. // 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling // 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom. // user zoom.
html { html {
font-family: sans-serif; // 1 font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2 -ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2 -webkit-text-size-adjust: 100%; // 2
} }
// Remove default margin. // Remove default margin.
body { body {
margin: 0; margin: 0;
} }
// HTML5 display definitions // HTML5 display definitions
// ========================================================================== // ==========================================================================
// Correct `block` display not defined in IE 8/9. // Correct `block` display not defined in IE 8/9.
article, article,
aside, aside,
@ -41,19 +41,19 @@ summary {
// 1. Correct `inline-block` display not defined in IE 8/9. // 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
audio, audio,
canvas, canvas,
progress, progress,
video { video {
display: inline-block; // 1 display: inline-block; // 1
vertical-align: baseline; // 2 vertical-align: baseline; // 2
} }
// Prevent modern browsers from displaying `audio` without controls. // Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices. // Remove excess height in iOS 5 devices.
audio:not([controls]) { audio:not([controls]) {
display: none; display: none;
@ -62,7 +62,7 @@ audio:not([controls]) {
// Address `[hidden]` styling not present in IE 8/9. // Address `[hidden]` styling not present in IE 8/9.
// Hide the `template` element in IE, Safari, and Firefox < 22. // Hide the `template` element in IE, Safari, and Firefox < 22.
[hidden], [hidden],
template { template {
@ -70,17 +70,17 @@ template {
} }
// Links // Links
// ========================================================================== // ==========================================================================
// Remove the gray background color from active links in IE 10. // Remove the gray background color from active links in IE 10.
a { a {
background: transparent; background: transparent;
} }
// Improve readability when focused and also mouse hovered in all browsers. // Improve readability when focused and also mouse hovered in all browsers.
a:active, a:active,
a:hover { a:hover {
@ -88,17 +88,17 @@ a:hover {
} }
// Text-level semantics // Text-level semantics
// ========================================================================== // ==========================================================================
// Address styling not present in IE 8/9, Safari 5, and Chrome. // Address styling not present in IE 8/9, Safari 5, and Chrome.
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
} }
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. // Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
b, b,
strong { strong {
@ -106,7 +106,7 @@ strong {
} }
// Address styling not present in Safari 5 and Chrome. // Address styling not present in Safari 5 and Chrome.
dfn { dfn {
font-style: italic; font-style: italic;
@ -114,7 +114,7 @@ dfn {
// Address variable `h1` font-size and margin within `section` and `article` // Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome. // contexts in Firefox 4+, Safari 5, and Chrome.
h1 { h1 {
font-size: 2em; font-size: 2em;
@ -122,7 +122,7 @@ h1 {
} }
// Address styling not present in IE 8/9. // Address styling not present in IE 8/9.
mark { mark {
background: #ff0; background: #ff0;
@ -130,14 +130,14 @@ mark {
} }
// Address inconsistent and variable font size in all browsers. // Address inconsistent and variable font size in all browsers.
small { small {
font-size: 80%; font-size: 80%;
} }
// Prevent `sub` and `sup` affecting `line-height` in all browsers. // Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub, sub,
sup { sup {
@ -156,34 +156,34 @@ sub {
} }
// Embedded content // Embedded content
// ========================================================================== // ==========================================================================
// Remove border when inside `a` element in IE 8/9. // Remove border when inside `a` element in IE 8/9.
img { img {
border: 0; border: 0;
} }
// Correct overflow displayed oddly in IE 9. // Correct overflow displayed oddly in IE 9.
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
// Grouping content // Grouping content
// ========================================================================== // ==========================================================================
// Address margin not present in IE 8/9 and Safari 5. // Address margin not present in IE 8/9 and Safari 5.
figure { figure {
margin: 1em 40px; margin: 1em 40px;
} }
// Address differences between Firefox and other browsers. // Address differences between Firefox and other browsers.
hr { hr {
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
@ -192,14 +192,14 @@ hr {
} }
// Contain overflow in all browsers. // Contain overflow in all browsers.
pre { pre {
overflow: auto; overflow: auto;
} }
// Address odd `em`-unit font size rendering in all browsers. // Address odd `em`-unit font size rendering in all browsers.
code, code,
kbd, kbd,
@ -210,30 +210,30 @@ samp {
} }
// Forms // Forms
// ========================================================================== // ==========================================================================
// Known limitation: by default, Chrome and Safari on OS X allow very limited // Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set. // styling of `select`, unless a `border` property is set.
// 1. Correct color not being inherited. // 1. Correct color not being inherited.
// Known issue: affects color of disabled elements. // Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited. // 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. // 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
color: inherit; // 1 color: inherit; // 1
font: inherit; // 2 font: inherit; // 2
margin: 0; // 3 margin: 0; // 3
} }
// Address `overflow` set to `hidden` in IE 8/9/10. // Address `overflow` set to `hidden` in IE 8/9/10.
button { button {
overflow: visible; overflow: visible;
@ -243,7 +243,7 @@ button {
// All other form control elements do not inherit `text-transform` values. // All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8+, and Opera // Correct `button` style inheritance in Firefox, IE 8+, and Opera
// Correct `select` style inheritance in Firefox. // Correct `select` style inheritance in Firefox.
button, button,
select { select {
@ -255,18 +255,18 @@ select {
// 2. Correct inability to style clickable `input` types in iOS. // 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type // 3. Improve usability and consistency of cursor style between image-type
// `input` and others. // `input` and others.
button, button,
html input[type="button"], // 1 html input[type="button"], // 1
input[type="reset"], input[type="reset"],
input[type="submit"] { input[type="submit"] {
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
cursor: pointer; // 3 cursor: pointer; // 3
} }
// Re-set default cursor for disabled elements. // Re-set default cursor for disabled elements.
button[disabled], button[disabled],
html input[disabled] { html input[disabled] {
@ -274,7 +274,7 @@ html input[disabled] {
} }
// Remove inner padding and border in Firefox 4+. // Remove inner padding and border in Firefox 4+.
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
@ -284,7 +284,7 @@ input::-moz-focus-inner {
// Address Firefox 4+ setting `line-height` on `input` using `!important` in // Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet. // the UA stylesheet.
input { input {
line-height: normal; line-height: normal;
@ -295,18 +295,18 @@ input {
// //
// 1. Address box sizing set to `content-box` in IE 8/9/10. // 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9/10. // 2. Remove excess padding in IE 8/9/10.
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
box-sizing: border-box; // 1 box-sizing: border-box; // 1
padding: 0; // 2 padding: 0; // 2
} }
// Fix the cursor style for Chrome's increment/decrement buttons. For certain // Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the // `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`. // decrement button to change from `default` to `text`.
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
@ -316,19 +316,19 @@ input[type="number"]::-webkit-outer-spin-button {
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. // 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome // 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
// (include `-moz` to future-proof). // (include `-moz` to future-proof).
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield; // 1 -webkit-appearance: textfield; // 1
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2 -webkit-box-sizing: content-box; // 2
box-sizing: content-box; box-sizing: content-box;
} }
// Remove inner padding and search cancel button in Safari and Chrome on OS X. // Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has // Safari (but not Chrome) clips the cancel button when the search input has
// padding (and `textfield` appearance). // padding (and `textfield` appearance).
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { input[type="search"]::-webkit-search-decoration {
@ -336,7 +336,7 @@ input[type="search"]::-webkit-search-decoration {
} }
// Define consistent border, margin, and padding. // Define consistent border, margin, and padding.
fieldset { fieldset {
border: 1px solid #c0c0c0; border: 1px solid #c0c0c0;
@ -346,15 +346,15 @@ fieldset {
// 1. Correct `color` not being inherited in IE 8/9. // 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets. // 2. Remove padding so people aren't caught out if they zero out fieldsets.
legend { legend {
border: 0; // 1 border: 0; // 1
padding: 0; // 2 padding: 0; // 2
} }
// Remove default vertical scrollbar in IE 8/9. // Remove default vertical scrollbar in IE 8/9.
textarea { textarea {
overflow: auto; overflow: auto;
@ -362,17 +362,17 @@ textarea {
// Don't inherit the `font-weight` (applied by a rule above). // Don't inherit the `font-weight` (applied by a rule above).
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
optgroup { optgroup {
font-weight: bold; font-weight: bold;
} }
// Tables // Tables
// ========================================================================== // ==========================================================================
// Remove most spacing between table cells. // Remove most spacing between table cells.
table { table {
border-collapse: collapse; border-collapse: collapse;

2
sass/popovers.scss

@ -63,7 +63,7 @@
.popover .btn-block { .popover .btn-block {
margin-bottom: 5px; margin-bottom: 5px;
// Remove extra margin on bottom of last button // Remove extra margin on bottom of last button
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;

2
sass/push.scss

@ -3,7 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
.content { .content {
// Fade animation // Fade animation
&.fade { &.fade {
left: 0; left: 0;
opacity: 0; opacity: 0;

4
sass/sliders.scss

@ -18,12 +18,12 @@
font-size: 0; // Remove spaces from inline-block children font-size: 0; // Remove spaces from inline-block children
white-space: nowrap; white-space: nowrap;
@include transition(all 0 linear); @include transition(all 0 linear);
// Individual slide // Individual slide
.slide { .slide {
display: inline-block; display: inline-block;
vertical-align: top; // Ensure that li always aligns to top vertical-align: top; // Ensure that li always aligns to top
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
} }

4
sass/table-views.scss

@ -20,7 +20,7 @@
border-bottom: $border-default; border-bottom: $border-default;
// Remove the border from the last table view item // Remove the border from the last table view item
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
// If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though) // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
@ -49,7 +49,7 @@
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
padding-left: 15px; padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item margin-top: -1px; // Hides the border of the previous list item
margin-left: 0; margin-left: 0;
color: #999; color: #999;
font-weight: $font-weight; font-weight: $font-weight;

26
sass/theme-android.scss

@ -51,7 +51,7 @@ body {
// Universal link styling // Universal link styling
a { a {
color: $primary-color; color: $primary-color;
&:active { &:active {
color: darken($primary-color, 10%); color: darken($primary-color, 10%);
} }
@ -142,7 +142,7 @@ a {
} }
} }
// Outlined buttons // Outlined buttons
.btn-outlined { .btn-outlined {
border: 1px solid $default-color; border: 1px solid $default-color;
background-color: transparent; background-color: transparent;
@ -288,7 +288,7 @@ a {
} }
} }
// Left aligned text in the .bar-nav // Left aligned text in the .bar-nav
.title { .title {
position: static; position: static;
padding-left: 15px; padding-left: 15px;
@ -328,7 +328,7 @@ a {
} }
// Bars with segmented-controls // Bars with segmented-controls
// //
// Remove standard segmented bottom margin // Remove standard segmented bottom margin
.bar .segmented-control { .bar .segmented-control {
top: 7px; top: 7px;
@ -370,7 +370,7 @@ a {
} }
// Badge modifiers // Badge modifiers
// //
// Main badge // Main badge
.badge-primary { .badge-primary {
color: #fff; color: #fff;
@ -423,7 +423,7 @@ a {
.table-view-cell { .table-view-cell {
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
// Remove the border from the last table view item // Remove the border from the last table view item
&:last-child { &:last-child {
background-image: none; background-image: none;
@ -571,7 +571,7 @@ textarea,
.control-item { .control-item {
color: #fff; color: #fff;
border-color: inherit; border-color: inherit;
&:active, &:active,
&.active { &.active {
color: #fff; color: #fff;
@ -587,7 +587,7 @@ textarea,
.control-item { .control-item {
color: #fff; color: #fff;
border-color: inherit; border-color: inherit;
&:active, &:active,
&.active { &.active {
color: #fff; color: #fff;
@ -623,7 +623,7 @@ textarea,
// Remove the popover's backdrop // Remove the popover's backdrop
.backdrop { .backdrop {
background-color: none; background-color: transparent;
} }
// Popovers with bars // Popovers with bars
@ -653,7 +653,7 @@ textarea,
border: 2px solid #d7d7d7; border: 2px solid #d7d7d7;
border-radius: 0; border-radius: 0;
background-color: #d7d7d7; background-color: #d7d7d7;
// Sliding handle // Sliding handle
.toggle-handle { .toggle-handle {
top: 0; top: 0;
@ -682,7 +682,7 @@ textarea,
margin-right: 2px; margin-right: 2px;
background-color: $primary-color; background-color: $primary-color;
border-color: $primary-color; border-color: $primary-color;
@include transform(translate3d(50px,0,0)); @include transform(translate3d(50px,0,0));
} }
&:before { &:before {
left: auto; left: auto;
@ -705,7 +705,7 @@ textarea,
} }
// Ratchicons for Android // Ratchicons for Android
// -------------------------------------------------- // --------------------------------------------------
.icon-caret:before { content: '\e800'; } .icon-caret:before { content: '\e800'; }
@ -715,7 +715,7 @@ textarea,
.icon-left:before, .icon-left:before,
.icon-left-nav:before { content: '\e803'; } .icon-left-nav:before { content: '\e803'; }
.icon-more-vertical:before { content: '\e804'; } .icon-more-vertical:before { content: '\e804'; }
.icon-more:before { content: '\e805'; } .icon-more:before { content: '\e805'; }
.icon-right:before, .icon-right:before,
.icon-right-nav:before { content: '\e806'; } .icon-right-nav:before { content: '\e806'; }
.icon-search:before { content: '\e807'; } .icon-search:before { content: '\e807'; }

16
sass/theme-ios.scss

@ -50,12 +50,12 @@ a {
// Typography // Typography
// -------------------------------------------------- // --------------------------------------------------
.h5, h5, .h5, h5,
.h6, h6, .h6, h6,
p { p {
color: #8f8f94; color: #8f8f94;
} }
.h5, h5, .h5, h5,
.h6, h6, { .h6, h6, {
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
@ -124,7 +124,7 @@ p {
} }
} }
// Outlined buttons // Outlined buttons
.btn-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;
@ -227,7 +227,7 @@ p {
// Link buttons in nav bars // Link buttons in nav bars
.btn-link { .btn-link {
color: $primary-color; color: $primary-color;
&:active { &:active {
color: $primary-color; color: $primary-color;
opacity: .6; opacity: .6;
@ -306,7 +306,7 @@ p {
.table-view-cell { .table-view-cell {
border-bottom: 0; border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with 15px offset. @include hairline(single, #c8c7cc, 15px); // Single grey border with 15px offset.
// Remove the border from the last table view item // Remove the border from the last table view item
&:last-child { &:last-child {
background-image: none; background-image: none;
@ -426,7 +426,7 @@ textarea,
.control-item { .control-item {
color: $primary-color; color: $primary-color;
border-color: inherit; border-color: inherit;
&:active { &:active {
background-color: lighten($primary-color, 35%); background-color: lighten($primary-color, 35%);
} }
@ -546,7 +546,7 @@ textarea,
@include box-shadow(inset 0 0 0 13px $positive-color); @include box-shadow(inset 0 0 0 13px $positive-color);
.toggle-handle { .toggle-handle {
@include transform(translate3d(17px,0,0)); @include transform(translate3d(17px,0,0));
} }
.toggle-handle { .toggle-handle {
@ -559,7 +559,7 @@ textarea,
// Push styles // Push styles
// -------------------------------------------------- // --------------------------------------------------
.content { .content {
// Fade animation // Fade animation
&.fade { &.fade {
@include transition(opacity .2s ease-in-out); @include transition(opacity .2s ease-in-out);
} }

2
sass/toggles.scss

@ -46,7 +46,7 @@
.toggle-handle { .toggle-handle {
border-color: $positive-color; border-color: $positive-color;
@include transform(translate3d(44px,0,0)); @include transform(translate3d(44px,0,0));
} }
&:before { &:before {
right: auto; right: auto;

Loading…
Cancel
Save