playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge pull request #431 from twbs/csslint 

Add CSSLint and CSSComb support.
pull/437/head
XhmikosR 11 years ago
parent
e336aea053 c8d8f41c8a
commit
7db2da9429
20 changed files with 1219 additions and 878 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      Gruntfile.js
  2. 152
      dist/css/ratchet-theme-android.css
  3. 2
      dist/css/ratchet-theme-android.min.css
  4. 169
      dist/css/ratchet-theme-ios.css
  5. 2
      dist/css/ratchet-theme-ios.min.css
  6. 254
      dist/css/ratchet.css
  7. 2
      dist/css/ratchet.min.css
  8. 576
      docs/assets/css/docs.css
  9. 152
      docs/dist/css/ratchet-theme-android.css
  10. 2
      docs/dist/css/ratchet-theme-android.min.css
  11. 169
      docs/dist/css/ratchet-theme-ios.css
  12. 2
      docs/dist/css/ratchet-theme-ios.min.css
  13. 254
      docs/dist/css/ratchet.css
  14. 2
      docs/dist/css/ratchet.min.css
  15. 2
      package.json
  16. 297
      sass/.csscomb.json
  17. 15
      sass/.csslintrc
  18. 1
      sass/docs.scss
  19. 2
      sass/mixins.scss
  20. 3
      sass/theme-ios.scss

39
Gruntfile.js
Unescape View File

@ -77,6 +77,24 @@ module.exports = function(grunt) {
} }
}, },
csscomb: {
options: {
config: 'sass/.csscomb.json'
},
dist: {
files: {
'dist/css/<%= pkg.name %>.css': 'dist/css/<%= pkg.name %>.css',
'dist/css/<%= pkg.name %>-theme-android.css': 'dist/css/<%= pkg.name %>-theme-android.css',
'dist/css/<%= pkg.name %>-theme-ios.css': 'dist/css/<%= pkg.name %>-theme-ios.css'
}
},
docs: {
files: {
'docs/assets/css/docs.css': 'docs/assets/css/docs.css'
}
}
},
copy: { copy: {
fonts: { fonts: {
expand: true, expand: true,
@ -107,7 +125,7 @@ module.exports = function(grunt) {
theme: { theme: {
files: { files: {
'<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.min.css': '<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.css', '<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.min.css': '<%= meta.distPath %>css/<%= pkg.name %>-theme-ios.css',
'<%= meta.distPath %>css/<%= pkg.name %>-theme-android.min.css' : '<%= meta.distPath %>css/<%= pkg.name %>-theme-android.css' '<%= meta.distPath %>css/<%= pkg.name %>-theme-android.min.css': '<%= meta.distPath %>css/<%= pkg.name %>-theme-android.css'
} }
}, },
docs: { docs: {
@ -168,6 +186,23 @@ module.exports = function(grunt) {
} }
}, },
csslint: {
options: {
csslintrc: 'sass/.csslintrc'
},
src: [
'dist/css/<%= pkg.name %>.css',
'dist/css/<%= pkg.name %>-theme-android.css',
'dist/css/<%= pkg.name %>-theme-ios.css'
],
docs: {
options: {
'ids': false
},
src: ['docs/assets/css/docs.css']
}
},
validation: { validation: {
options: { options: {
charset: 'utf-8', charset: 'utf-8',
@ -202,7 +237,7 @@ module.exports = function(grunt) {
require('load-grunt-tasks')(grunt, {scope: 'devDependencies'}); require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
// Default task(s). // Default task(s).
grunt.registerTask('dist-css', ['sass', 'cssmin']); grunt.registerTask('dist-css', ['sass', 'csscomb', 'cssmin']);
grunt.registerTask('dist-js', ['concat', 'uglify']); grunt.registerTask('dist-js', ['concat', 'uglify']);
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js', 'copy']); grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js', 'copy']);
grunt.registerTask('validate-html', ['jekyll', 'validation']); grunt.registerTask('validate-html', ['jekyll', 'validation']);

152
dist/css/ratchet-theme-android.css vendored
Unescape View File

@ -12,7 +12,7 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: #222222; color: #222;
} }
a { a {
@ -50,94 +50,94 @@ a:active {
.btn { .btn {
padding: 8px 15px; padding: 8px 15px;
font-size: 14px; font-size: 14px;
color: #222222; color: #222;
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #222222; color: #222;
background-color: #999;
border: 0; border: 0;
background-color: #999999; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 0;
background-color: #33b5e5; background-color: #33b5e5;
border: 0;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 0;
background-color: #1a9bcb; background-color: #1a9bcb;
border: 0;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
background-color: #9c0;
border: 0; border: 0;
background-color: #99cc00;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 0;
background-color: #739900; background-color: #739900;
border: 0;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
background-color: #f44;
border: 0; border: 0;
background-color: #ff4444;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
background-color: #f11;
border: 0; border: 0;
background-color: #ff1111;
} }
.btn-outlined { .btn-outlined {
border: 1px solid #999999;
background-color: transparent; background-color: transparent;
border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-outlined.btn-primary { .btn-outlined.btn-primary {
border: 1px solid #33b5e5;
color: #33b5e5; color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-primary:active { .btn-outlined.btn-primary:active {
border: 1px solid #33b5e5;
background-color: #33b5e5; background-color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-positive { .btn-outlined.btn-positive {
border: 1px solid #99cc00; color: #9c0;
color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-positive:active { .btn-outlined.btn-positive:active {
border: 1px solid #99cc00; background-color: #9c0;
background-color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-negative { .btn-outlined.btn-negative {
border: 1px solid #ff4444; color: #f44;
color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined.btn-negative:active { .btn-outlined.btn-negative:active {
border: 1px solid #ff4444; background-color: #f44;
background-color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined:active { .btn-outlined:active {
border: 1px solid #999999; background-color: #999;
background-color: #999999; border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff; color: #fff;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-link { .btn-link {
@ -145,13 +145,13 @@ a:active {
background-color: transparent; background-color: transparent;
border: none; border: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-link:active, .btn-link.active { .btn-link:active, .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
background-color: transparent; background-color: transparent;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-block { .btn-block {
@ -160,7 +160,7 @@ a:active {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -171,10 +171,10 @@ a:active {
.bar { .bar {
height: 50px; height: 50px;
background-color: #dddddd; background-color: #ddd;
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 50px; top: 50px;
@ -188,10 +188,10 @@ a:active {
.bar .bar-footer, .bar .bar-footer,
.bar .bar-footer-secondary, .bar .bar-footer-secondary,
.bar .bar-footer-secondary-tab { .bar .bar-footer-secondary-tab {
border-bottom: 0;
border-top: 1px solid #b1b1b1; border-top: 1px solid #b1b1b1;
border-bottom: 0;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5;
} }
.bar-tab { .bar-tab {
@ -206,7 +206,7 @@ a:active {
.bar-tab .tab-item.active { .bar-tab .tab-item.active {
color: #33b5e5; color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5;
} }
.bar-tab .tab-item:active { .bar-tab .tab-item:active {
color: #929292; color: #929292;
@ -234,9 +234,9 @@ a:active {
.bar .btn-link { .bar .btn-link {
top: 0; top: 0;
padding: 0; padding: 0;
color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 49px; line-height: 49px;
color: #33b5e5;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
@ -270,7 +270,7 @@ a:active {
} }
.badge.badge-inverted { .badge.badge-inverted {
color: #999999; color: #999;
background-color: transparent; background-color: transparent;
} }
@ -285,26 +285,26 @@ a:active {
.badge-positive { .badge-positive {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.badge-positive.badge-inverted { .badge-positive.badge-inverted {
color: #99cc00; color: #9c0;
background-color: transparent; background-color: transparent;
} }
.badge-negative { .badge-negative {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.badge-negative.badge-inverted { .badge-negative.badge-inverted {
color: #ff4444; color: #f44;
background-color: transparent; background-color: transparent;
} }
.card { .card {
background-color: transparent;
border-color: #d9d9d9; border-color: #d9d9d9;
border-radius: 2px; border-radius: 2px;
background-color: transparent;
} }
.table-view { .table-view {
@ -327,9 +327,9 @@ a:active {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
background-color: transparent;
border-top: 0; border-top: 0;
border-bottom: 2px solid #a9a9a9; border-bottom: 2px solid #a9a9a9;
background-color: transparent;
} }
select, select,
@ -351,9 +351,9 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
} }
input[type="search"] { input[type="search"] {
@ -375,7 +375,7 @@ textarea,
border: 0; border: 0;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.input-group input:last-child { .input-group input:last-child {
@ -396,22 +396,22 @@ textarea,
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
} }
.segmented-control .control-item { .segmented-control .control-item {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #222222; color: #222;
border-left: 1px solid #999; border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
border-left-width: 0; border-left-width: 0;
} }
.segmented-control .control-item:active, .segmented-control .control-item.active { .segmented-control .control-item:active, .segmented-control .control-item.active {
background-color: #999999; background-color: #999;
} }
.segmented-control-primary { .segmented-control-primary {
@ -435,7 +435,7 @@ textarea,
} }
.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.segmented-control-negative { .segmented-control-negative {
@ -447,7 +447,7 @@ textarea,
} }
.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.popover { .popover {
@ -457,22 +457,22 @@ textarea,
margin-left: 0; margin-left: 0;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out; transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-transform: scale(.75);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -ms-transform: scale(.75);
-webkit-transform: scale(0.75); transform: scale(.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
} }
.popover:before { .popover:before {
display: none; display: none;
} }
.popover.visible { .popover.visible {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-ms-transform: scale(1); -ms-transform: scale(1);
transform: scale(1); transform: scale(1);
} }
.backdrop { .backdrop {
@ -493,20 +493,20 @@ textarea,
.toggle { .toggle {
width: 104px; width: 104px;
height: 28px; height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7; border: 2px solid #d7d7d7;
border-radius: 0; border-radius: 0;
background-color: #d7d7d7;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
top: 0; top: 0;
left: 0; left: 0;
width: 50px; width: 50px;
height: 24px; height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 2px; border-radius: 2px;
background-color: #bebebe; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
} }
.toggle:before { .toggle:before {
top: 1px; top: 1px;
@ -516,20 +516,20 @@ textarea,
color: #fff; color: #fff;
} }
.toggle.active { .toggle.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7; background-color: #d7d7d7;
border: 2px solid #d7d7d7;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
margin-right: 2px; margin-right: 2px;
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0); -ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {
left: auto;
right: 14px; right: 14px;
left: auto;
color: #fff; color: #fff;
} }

2
dist/css/ratchet-theme-android.min.css vendored
View File

File diff suppressed because one or more lines are too long

169
dist/css/ratchet-theme-ios.css vendored
Unescape View File

@ -32,18 +32,18 @@ p {
} }
.btn { .btn {
border: 1px solid #929292;
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, .98);
border: 1px solid #929292;
-webkit-transition: all; -webkit-transition: all;
-moz-transition: all; -moz-transition: all;
transition: all; transition: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #fff; color: #fff;
@ -52,32 +52,32 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #007aff;
background-color: #007aff; background-color: #007aff;
border: 1px solid #007aff;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
border: 1px solid #0062cc;
background-color: #0062cc; background-color: #0062cc;
border: 1px solid #0062cc;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #4cd964;
background-color: #4cd964; background-color: #4cd964;
border: 1px solid #4cd964;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
border: 1px solid #2ac845;
background-color: #2ac845; background-color: #2ac845;
border: 1px solid #2ac845;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #dd524d;
background-color: #dd524d; background-color: #dd524d;
border: 1px solid #dd524d;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
border: 1px solid #cf2d28;
background-color: #cf2d28; background-color: #cf2d28;
border: 1px solid #cf2d28;
} }
.btn-outlined { .btn-outlined {
@ -107,7 +107,7 @@ p {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -117,10 +117,10 @@ p {
} }
.bar { .bar {
background-color: rgba(247, 247, 247, .98);
border-bottom: 0; border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 44px; top: 44px;
@ -195,27 +195,27 @@ p {
} }
.table-view { .table-view {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
.table-view .table-view-cell { .table-view .table-view-cell {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
background-image: none; background-image: none;
} }
.table-view .table-view-divider { .table-view .table-view-divider {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
select, select,
@ -237,13 +237,13 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
} }
input[type="search"] { input[type="search"] {
height: 34px; height: 34px;
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, .1);
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
} }
@ -260,17 +260,17 @@ textarea,
.input-group { .input-group {
padding: 0; padding: 0;
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
} }
.input-group input { .input-group input {
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
} }
.input-group input:last-child { .input-group input:last-child {
@ -278,10 +278,10 @@ textarea,
} }
.input-row { .input-row {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.input-row:last-child, .input-row:last-child,
@ -296,9 +296,9 @@ textarea,
.segmented-control .control-item { .segmented-control .control-item {
color: #929292; color: #929292;
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color .1s linear;
-moz-transition: background-color 0.1s linear; -moz-transition: background-color .1s linear;
transition: background-color 0.1s linear; transition: background-color .1s linear;
} }
.segmented-control .control-item:active { .segmented-control .control-item:active {
background-color: #ebebeb; background-color: #ebebeb;
@ -356,116 +356,113 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out; -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: transform .2s ease-in-out, opacity .2s ease-in-out; transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
.popover:before { .popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98); border-bottom: 15px solid rgba(247, 247, 247, .98);
} }
.popover .bar { .popover .bar {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, .15);
} }
.popover .table-view { .popover .table-view {
border-radius: 12px;
background-image: none; background-image: none;
border-radius: 12px;
} }
.modal { .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.modal.active { .modal.active {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.toggle { .toggle {
width: 47px; width: 47px;
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: box-shadow, border; -webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border; -moz-transition-property: box-shadow, border;
transition-property: box-shadow, border; transition-property: box-shadow, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
} }
.toggle:before { .toggle:before {
display: none; display: none;
} }
.toggle.active { .toggle.active {
border: 2px solid #4cd964;
background-color: transparent; background-color: transparent;
border: 2px solid #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964; -webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(17px, 0, 0);
-ms-transform: translate3d(17px, 0, 0); -ms-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0);
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #4cd964; border-color: #4cd964;
} }
.content.fade { .content.fade {
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; -moz-transition: opacity .2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity .2s ease-in-out;
} }
.content.sliding { .content.sliding {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay; -webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay; -moz-animation-name: fadeOverlay;
animation-name: fadeOverlay; animation-name: fadeOverlay;
-webkit-animation-duration: 0.4s; -webkit-animation-duration: .4s;
-moz-animation-duration: 0.4s; -moz-animation-duration: .4s;
animation-duration: 0.4s; animation-duration: .4s;
} }
.content.sliding.right:not([class*="sliding-in"]) { .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse; -webkit-animation-direction: reverse;
-moz-animation-direction: reverse; -moz-animation-direction: reverse;
animation-direction: reverse; animation-direction: reverse;
} }
.content.sliding.left { .content.sliding.left {
-webkit-transform: translate3d(-20%, 0, 0); -webkit-transform: translate3d(-20%, 0, 0);
-ms-transform: translate3d(-20%, 0, 0); -ms-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);
} }
@-webkit-keyframes fadeOverlay { @-webkit-keyframes fadeOverlay {
from { from {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
} }
to { to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
} }
} }

2
dist/css/ratchet-theme-ios.min.css vendored
View File

File diff suppressed because one or more lines are too long

254
dist/css/ratchet.css vendored
Unescape View File

@ -11,8 +11,8 @@
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html { html {
font-family: sans-serif; font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
} }
body { body {
@ -75,13 +75,13 @@ dfn {
} }
h1 { h1 {
margin: .67em 0;
font-size: 2em; font-size: 2em;
margin: 0.67em 0;
} }
mark { mark {
background: #ff0;
color: #000; color: #000;
background: #ff0;
} }
small { small {
@ -90,18 +90,18 @@ small {
sub, sub,
sup { sup {
position: relative;
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { sup {
top: -0.5em; top: -.5em;
} }
sub { sub {
bottom: -0.25em; bottom: -.25em;
} }
img { img {
@ -117,9 +117,9 @@ figure {
} }
hr { hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
} }
pre { pre {
@ -139,9 +139,9 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
color: inherit;
font: inherit;
margin: 0; margin: 0;
font: inherit;
color: inherit;
} }
button { button {
@ -168,8 +168,8 @@ html input[disabled] {
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
input { input {
@ -188,10 +188,10 @@ input[type="number"]::-webkit-outer-spin-button {
} }
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; -webkit-box-sizing: content-box;
box-sizing: content-box; -moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
} }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button,
@ -200,14 +200,14 @@ input[type="search"]::-webkit-search-decoration {
} }
fieldset { fieldset {
border: 1px solid #c0c0c0; padding: .35em .625em .75em;
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0;
} }
legend { legend {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
textarea { textarea {
@ -219,8 +219,8 @@ optgroup {
} }
table { table {
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse;
} }
td, td,
@ -230,8 +230,8 @@ th {
* { * {
-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;
} }
body { body {
@ -250,6 +250,7 @@ body {
a { a {
color: #428bca; color: #428bca;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
a:active { a:active {
@ -263,14 +264,14 @@ a:active {
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto; overflow: auto;
background-color: #fff;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: #fff;
} }
.content > * { .content > * {
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-ms-transform: translateZ(0); -ms-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
} }
.bar-nav ~ .content { .bar-nav ~ .content {
@ -310,8 +311,8 @@ a:active {
} }
.clearfix:before, .clearfix:after { .clearfix:before, .clearfix:after {
content: " ";
display: table; display: table;
content: " ";
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
@ -340,13 +341,13 @@ h4, .h4 {
} }
h5, .h5 { h5, .h5 {
font-size: 14px;
margin-top: 20px; margin-top: 20px;
font-size: 14px;
} }
h6, .h6 { h6, .h6 {
font-size: 12px;
margin-top: 20px; margin-top: 20px;
font-size: 12px;
} }
p { p {
@ -366,8 +367,8 @@ p {
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top;
white-space: nowrap; white-space: nowrap;
vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -383,35 +384,35 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #428bca;
background-color: #428bca; background-color: #428bca;
border: 1px solid #428bca;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 1px solid #3071a9;
background-color: #3071a9; background-color: #3071a9;
border: 1px solid #3071a9;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 1px solid #5cb85c;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 1px solid #449d44;
background-color: #449d44; background-color: #449d44;
border: 1px solid #449d44;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #d9534f;
background-color: #d9534f; background-color: #d9534f;
border: 1px solid #d9534f;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
border: 1px solid #c9302c;
background-color: #c9302c; background-color: #c9302c;
border: 1px solid #c9302c;
} }
.btn-outlined { .btn-outlined {
@ -457,9 +458,9 @@ input[type="button"] {
} }
.btn .badge { .btn .badge {
font-size: 12px;
margin: -2px -4px -2px 4px; margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15); font-size: 12px;
background-color: rgba(0, 0, 0, .15);
} }
.btn .badge-inverted, .btn .badge-inverted,
@ -491,8 +492,8 @@ input[type="button"] {
height: 44px; height: 44px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
border-bottom: 1px solid #dddddd;
background-color: white; background-color: white;
border-bottom: 1px solid #ddd;
} }
.bar-header-secondary { .bar-header-secondary {
@ -514,8 +515,8 @@ input[type="button"] {
.bar-footer, .bar-footer,
.bar-footer-secondary, .bar-footer-secondary,
.bar-footer-secondary-tab { .bar-footer-secondary-tab {
border-top: 1px solid #ddd;
border-bottom: 0; border-bottom: 0;
border-top: 1px solid #dddddd;
} }
.bar-nav { .bar-nav {
@ -541,22 +542,22 @@ input[type="button"] {
} }
.bar-tab { .bar-tab {
display: table;
bottom: 0; bottom: 0;
display: table;
width: 100%; width: 100%;
height: 50px; height: 50px;
padding: 0; padding: 0;
border-top: 1px solid #dddddd;
border-bottom: 0;
table-layout: fixed; table-layout: fixed;
border-top: 1px solid #ddd;
border-bottom: 0;
} }
.bar-tab .tab-item { .bar-tab .tab-item {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
height: 50px; height: 50px;
vertical-align: middle;
color: #929292; color: #929292;
text-align: center; text-align: center;
vertical-align: middle;
} }
.bar-tab .tab-item.active, .bar-tab .tab-item:active { .bar-tab .tab-item.active, .bar-tab .tab-item:active {
color: #428bca; color: #428bca;
@ -592,8 +593,8 @@ input[type="button"] {
top: 0; top: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
color: #428bca;
line-height: 44px; line-height: 44px;
color: #428bca;
border: 0; border: 0;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
@ -655,7 +656,7 @@ input[type="button"] {
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
color: #333; color: #333;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
border-radius: 100px; border-radius: 100px;
} }
.badge.badge-inverted { .badge.badge-inverted {
@ -688,10 +689,10 @@ input[type="button"] {
} }
.card { .card {
overflow: hidden;
margin: 10px; margin: 10px;
overflow: hidden;
background-color: white; background-color: white;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 6px; border-radius: 6px;
} }
@ -702,8 +703,8 @@ input[type="button"] {
} }
.card .table-view .table-view-divider:first-child { .card .table-view .table-view-divider:first-child {
top: 0; top: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px;
} }
.card .table-view .table-view-divider:last-child { .card .table-view .table-view-divider:last-child {
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
@ -720,15 +721,15 @@ input[type="button"] {
margin-bottom: 15px; margin-bottom: 15px;
list-style: none; list-style: none;
background-color: #fff; background-color: #fff;
border-top: 1px solid #dddddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.table-view-cell { .table-view-cell {
position: relative; position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px; padding: 11px 65px 11px 15px;
border-bottom: 1px solid #dddddd; overflow: hidden;
border-bottom: 1px solid #ddd;
} }
.table-view-cell:last-child { .table-view-cell:last-child {
border-bottom: 0; border-bottom: 0;
@ -736,9 +737,9 @@ input[type="button"] {
.table-view-cell > a:not(.btn) { .table-view-cell > a:not(.btn) {
position: relative; position: relative;
display: block; display: block;
overflow: hidden;
padding: inherit; padding: inherit;
margin: -11px -65px -11px -15px; margin: -11px -65px -11px -15px;
overflow: hidden;
color: inherit; color: inherit;
} }
.table-view-cell > a:not(.btn):active { .table-view-cell > a:not(.btn):active {
@ -754,11 +755,11 @@ input[type="button"] {
padding-left: 15px; padding-left: 15px;
margin-top: -1px; margin-top: -1px;
margin-left: 0; margin-left: 0;
color: #999;
font-weight: 500; font-weight: 500;
border-top: 1px solid #dddddd; color: #999;
border-bottom: 1px solid #dddddd;
background-color: #fafafa; background-color: #fafafa;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
} }
.table-view .media, .table-view .media,
@ -784,8 +785,8 @@ input[type="button"] {
top: 50%; top: 50%;
right: 15px; right: 15px;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
} }
.table-view-cell .navigate-left > .btn, .table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge, .table-view-cell .navigate-left > .badge,
@ -844,21 +845,21 @@ input[type="tel"],
input[type="color"] { input[type="color"] {
width: 100%; width: 100%;
height: 35px; height: 35px;
-webkit-appearance: none;
padding: 0 15px; padding: 0 15px;
margin-bottom: 15px; margin-bottom: 15px;
line-height: 21px; line-height: 21px;
background-color: #fff; background-color: #fff;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
-webkit-appearance: none;
} }
input[type="search"] { input[type="search"] {
box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
box-sizing: border-box;
} }
input[type="search"]:focus { input[type="search"]:focus {
@ -873,8 +874,8 @@ select {
height: auto; height: auto;
font-size: 14px; font-size: 14px;
background-color: #f8f8f8; background-color: #f8f8f8;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
} }
.input-group { .input-group {
@ -886,16 +887,16 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-top: 0; border-top: 0;
border-left: 0;
border-right: 0; border-right: 0;
border-left: 0;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.input-row label { .input-row label {
@ -926,15 +927,15 @@ select {
} }
.segmented-control .control-item { .segmented-control .control-item {
display: table-cell; display: table-cell;
overflow: hidden;
width: 1%; width: 1%;
padding-top: 6px; padding-top: 6px;
padding-bottom: 7px; padding-bottom: 7px;
overflow: hidden;
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
@ -1009,15 +1010,15 @@ select {
margin-left: -140px; margin-left: -140px;
background-color: white; background-color: white;
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
opacity: 0; opacity: 0;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -webkit-transition: all .25s linear;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -moz-transition: all .25s linear;
transition: all .25s linear;
-webkit-transform: translate3d(0, -15px, 0); -webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
} }
.popover:before { .popover:before {
position: absolute; position: absolute;
@ -1026,16 +1027,16 @@ select {
width: 0; width: 0;
height: 0; height: 0;
margin-left: -15px; margin-left: -15px;
content: '';
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-bottom: 15px solid white; border-bottom: 15px solid white;
border-left: 15px solid transparent; border-left: 15px solid transparent;
content: '';
} }
.popover.visible { .popover.visible {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.popover .bar ~ .table-view { .popover .bar ~ .table-view {
padding-top: 44px; padding-top: 44px;
@ -1048,7 +1049,7 @@ select {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 15; z-index: 15;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, .3);
} }
.popover .btn-block { .popover .btn-block {
@ -1059,49 +1060,49 @@ select {
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
border-top-right-radius: 12px;
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.popover .table-view { .popover .table-view {
max-height: 300px; max-height: 300px;
margin-bottom: 0; margin-bottom: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff; background-color: #fff;
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
border-radius: 6px; border-radius: 6px;
-webkit-overflow-scrolling: touch;
} }
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
opacity: 0;
z-index: 11; z-index: 11;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s; -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s; -moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s; transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.modal.active { .modal.active {
opacity: 1;
height: 100%; height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s; -webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s; -moz-transition: -moz-transform .25s;
transition: transform .25s; transition: transform .25s;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.slider { .slider {
@ -1117,31 +1118,31 @@ select {
font-size: 0; font-size: 0;
white-space: nowrap; white-space: nowrap;
-webkit-transition: all 0 linear; -webkit-transition: all 0 linear;
-moz-transition: all 0 linear; -moz-transition: all 0 linear;
transition: all 0 linear; transition: all 0 linear;
} }
.slider .slide-group .slide { .slider .slide-group .slide {
display: inline-block; display: inline-block;
vertical-align: top;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
vertical-align: top;
} }
.toggle { .toggle {
display: block;
position: relative; position: relative;
display: block;
width: 74px; width: 74px;
height: 30px; height: 30px;
background-color: #fff; background-color: #fff;
border: 2px solid #ddd; border: 2px solid #ddd;
border-radius: 20px; border-radius: 20px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border; -webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border; -moz-transition-property: background-color, border;
transition-property: background-color, border; transition-property: background-color, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
position: absolute; position: absolute;
@ -1153,31 +1154,31 @@ select {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 100px; border-radius: 100px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle:before { .toggle:before {
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 11px; right: 11px;
color: #999;
font-size: 13px; font-size: 13px;
color: #999;
text-transform: uppercase; text-transform: uppercase;
content: "Off"; content: "Off";
} }
.toggle.active { .toggle.active {
border: 2px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 2px solid #5cb85c;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #5cb85c; border-color: #5cb85c;
-webkit-transform: translate3d(44px, 0, 0); -webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0); -ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0); transform: translate3d(44px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {
right: auto; right: auto;
@ -1199,23 +1200,23 @@ select {
.content.sliding { .content.sliding {
z-index: 2; z-index: 2;
-webkit-transition: -webkit-transform .4s; -webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s; -moz-transition: -moz-transform .4s;
transition: transform .4s; transition: transform .4s;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.content.sliding.left { .content.sliding.left {
z-index: 1; z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
.content.sliding.right { .content.sliding.right {
z-index: 3; z-index: 3;
-webkit-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
.navigate-left:after, .navigate-left:after,
@ -1225,15 +1226,16 @@ select {
position: absolute; position: absolute;
top: 50%; top: 50%;
display: inline-block; display: inline-block;
color: #bbb;
font-family: Ratchicons; font-family: Ratchicons;
font-size: inherit; font-size: inherit;
text-decoration: none;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; color: #bbb;
text-decoration: none;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
} }
.navigate-left:after, .navigate-left:after,
@ -1250,18 +1252,20 @@ select {
@font-face { @font-face {
font-family: Ratchicons; font-family: Ratchicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/ratchicons.eot"); src: url("../fonts/ratchicons.eot");
src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg"); src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
font-weight: normal;
font-style: normal;
} }
.icon { .icon {
display: inline-block; display: inline-block;
font-family: Ratchicons; font-family: Ratchicons;
font-size: 24px; font-size: 24px;
text-decoration: none;
line-height: 1; line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

2
dist/css/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long

576
docs/assets/css/docs.css
View File

File diff suppressed because it is too large Load Diff

152
docs/dist/css/ratchet-theme-android.css vendored
Unescape View File

@ -12,7 +12,7 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: #222222; color: #222;
} }
a { a {
@ -50,94 +50,94 @@ a:active {
.btn { .btn {
padding: 8px 15px; padding: 8px 15px;
font-size: 14px; font-size: 14px;
color: #222222; color: #222;
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #222222; color: #222;
background-color: #999;
border: 0; border: 0;
background-color: #999999; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 0;
background-color: #33b5e5; background-color: #33b5e5;
border: 0;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 0;
background-color: #1a9bcb; background-color: #1a9bcb;
border: 0;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
background-color: #9c0;
border: 0; border: 0;
background-color: #99cc00;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 0;
background-color: #739900; background-color: #739900;
border: 0;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
background-color: #f44;
border: 0; border: 0;
background-color: #ff4444;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
background-color: #f11;
border: 0; border: 0;
background-color: #ff1111;
} }
.btn-outlined { .btn-outlined {
border: 1px solid #999999;
background-color: transparent; background-color: transparent;
border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-outlined.btn-primary { .btn-outlined.btn-primary {
border: 1px solid #33b5e5;
color: #33b5e5; color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-primary:active { .btn-outlined.btn-primary:active {
border: 1px solid #33b5e5;
background-color: #33b5e5; background-color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-positive { .btn-outlined.btn-positive {
border: 1px solid #99cc00; color: #9c0;
color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-positive:active { .btn-outlined.btn-positive:active {
border: 1px solid #99cc00; background-color: #9c0;
background-color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-negative { .btn-outlined.btn-negative {
border: 1px solid #ff4444; color: #f44;
color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined.btn-negative:active { .btn-outlined.btn-negative:active {
border: 1px solid #ff4444; background-color: #f44;
background-color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined:active { .btn-outlined:active {
border: 1px solid #999999; background-color: #999;
background-color: #999999; border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff; color: #fff;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-link { .btn-link {
@ -145,13 +145,13 @@ a:active {
background-color: transparent; background-color: transparent;
border: none; border: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-link:active, .btn-link.active { .btn-link:active, .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
background-color: transparent; background-color: transparent;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-block { .btn-block {
@ -160,7 +160,7 @@ a:active {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -171,10 +171,10 @@ a:active {
.bar { .bar {
height: 50px; height: 50px;
background-color: #dddddd; background-color: #ddd;
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 50px; top: 50px;
@ -188,10 +188,10 @@ a:active {
.bar .bar-footer, .bar .bar-footer,
.bar .bar-footer-secondary, .bar .bar-footer-secondary,
.bar .bar-footer-secondary-tab { .bar .bar-footer-secondary-tab {
border-bottom: 0;
border-top: 1px solid #b1b1b1; border-top: 1px solid #b1b1b1;
border-bottom: 0;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5;
} }
.bar-tab { .bar-tab {
@ -206,7 +206,7 @@ a:active {
.bar-tab .tab-item.active { .bar-tab .tab-item.active {
color: #33b5e5; color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5;
} }
.bar-tab .tab-item:active { .bar-tab .tab-item:active {
color: #929292; color: #929292;
@ -234,9 +234,9 @@ a:active {
.bar .btn-link { .bar .btn-link {
top: 0; top: 0;
padding: 0; padding: 0;
color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 49px; line-height: 49px;
color: #33b5e5;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
@ -270,7 +270,7 @@ a:active {
} }
.badge.badge-inverted { .badge.badge-inverted {
color: #999999; color: #999;
background-color: transparent; background-color: transparent;
} }
@ -285,26 +285,26 @@ a:active {
.badge-positive { .badge-positive {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.badge-positive.badge-inverted { .badge-positive.badge-inverted {
color: #99cc00; color: #9c0;
background-color: transparent; background-color: transparent;
} }
.badge-negative { .badge-negative {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.badge-negative.badge-inverted { .badge-negative.badge-inverted {
color: #ff4444; color: #f44;
background-color: transparent; background-color: transparent;
} }
.card { .card {
background-color: transparent;
border-color: #d9d9d9; border-color: #d9d9d9;
border-radius: 2px; border-radius: 2px;
background-color: transparent;
} }
.table-view { .table-view {
@ -327,9 +327,9 @@ a:active {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
background-color: transparent;
border-top: 0; border-top: 0;
border-bottom: 2px solid #a9a9a9; border-bottom: 2px solid #a9a9a9;
background-color: transparent;
} }
select, select,
@ -351,9 +351,9 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
} }
input[type="search"] { input[type="search"] {
@ -375,7 +375,7 @@ textarea,
border: 0; border: 0;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.input-group input:last-child { .input-group input:last-child {
@ -396,22 +396,22 @@ textarea,
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
} }
.segmented-control .control-item { .segmented-control .control-item {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #222222; color: #222;
border-left: 1px solid #999; border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
border-left-width: 0; border-left-width: 0;
} }
.segmented-control .control-item:active, .segmented-control .control-item.active { .segmented-control .control-item:active, .segmented-control .control-item.active {
background-color: #999999; background-color: #999;
} }
.segmented-control-primary { .segmented-control-primary {
@ -435,7 +435,7 @@ textarea,
} }
.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.segmented-control-negative { .segmented-control-negative {
@ -447,7 +447,7 @@ textarea,
} }
.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.popover { .popover {
@ -457,22 +457,22 @@ textarea,
margin-left: 0; margin-left: 0;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out; transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-transform: scale(.75);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -ms-transform: scale(.75);
-webkit-transform: scale(0.75); transform: scale(.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
} }
.popover:before { .popover:before {
display: none; display: none;
} }
.popover.visible { .popover.visible {
-webkit-transform: scale(1); -webkit-transform: scale(1);
-ms-transform: scale(1); -ms-transform: scale(1);
transform: scale(1); transform: scale(1);
} }
.backdrop { .backdrop {
@ -493,20 +493,20 @@ textarea,
.toggle { .toggle {
width: 104px; width: 104px;
height: 28px; height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7; border: 2px solid #d7d7d7;
border-radius: 0; border-radius: 0;
background-color: #d7d7d7;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
top: 0; top: 0;
left: 0; left: 0;
width: 50px; width: 50px;
height: 24px; height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 2px; border-radius: 2px;
background-color: #bebebe; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
} }
.toggle:before { .toggle:before {
top: 1px; top: 1px;
@ -516,20 +516,20 @@ textarea,
color: #fff; color: #fff;
} }
.toggle.active { .toggle.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7; background-color: #d7d7d7;
border: 2px solid #d7d7d7;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
margin-right: 2px; margin-right: 2px;
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0); -ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {
left: auto;
right: 14px; right: 14px;
left: auto;
color: #fff; color: #fff;
} }

2
docs/dist/css/ratchet-theme-android.min.css vendored
View File

File diff suppressed because one or more lines are too long

169
docs/dist/css/ratchet-theme-ios.css vendored
Unescape View File

@ -32,18 +32,18 @@ p {
} }
.btn { .btn {
border: 1px solid #929292;
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, .98);
border: 1px solid #929292;
-webkit-transition: all; -webkit-transition: all;
-moz-transition: all; -moz-transition: all;
transition: all; transition: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #fff; color: #fff;
@ -52,32 +52,32 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #007aff;
background-color: #007aff; background-color: #007aff;
border: 1px solid #007aff;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
border: 1px solid #0062cc;
background-color: #0062cc; background-color: #0062cc;
border: 1px solid #0062cc;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #4cd964;
background-color: #4cd964; background-color: #4cd964;
border: 1px solid #4cd964;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
border: 1px solid #2ac845;
background-color: #2ac845; background-color: #2ac845;
border: 1px solid #2ac845;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #dd524d;
background-color: #dd524d; background-color: #dd524d;
border: 1px solid #dd524d;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
border: 1px solid #cf2d28;
background-color: #cf2d28; background-color: #cf2d28;
border: 1px solid #cf2d28;
} }
.btn-outlined { .btn-outlined {
@ -107,7 +107,7 @@ p {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -117,10 +117,10 @@ p {
} }
.bar { .bar {
background-color: rgba(247, 247, 247, .98);
border-bottom: 0; border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 44px; top: 44px;
@ -195,27 +195,27 @@ p {
} }
.table-view { .table-view {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
.table-view .table-view-cell { .table-view .table-view-cell {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
background-image: none; background-image: none;
} }
.table-view .table-view-divider { .table-view .table-view-divider {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
select, select,
@ -237,13 +237,13 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
} }
input[type="search"] { input[type="search"] {
height: 34px; height: 34px;
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, .1);
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
} }
@ -260,17 +260,17 @@ textarea,
.input-group { .input-group {
padding: 0; padding: 0;
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
} }
.input-group input { .input-group input {
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
} }
.input-group input:last-child { .input-group input:last-child {
@ -278,10 +278,10 @@ textarea,
} }
.input-row { .input-row {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.input-row:last-child, .input-row:last-child,
@ -296,9 +296,9 @@ textarea,
.segmented-control .control-item { .segmented-control .control-item {
color: #929292; color: #929292;
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color .1s linear;
-moz-transition: background-color 0.1s linear; -moz-transition: background-color .1s linear;
transition: background-color 0.1s linear; transition: background-color .1s linear;
} }
.segmented-control .control-item:active { .segmented-control .control-item:active {
background-color: #ebebeb; background-color: #ebebeb;
@ -356,116 +356,113 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out; -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: transform .2s ease-in-out, opacity .2s ease-in-out; transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
.popover:before { .popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98); border-bottom: 15px solid rgba(247, 247, 247, .98);
} }
.popover .bar { .popover .bar {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, .15);
} }
.popover .table-view { .popover .table-view {
border-radius: 12px;
background-image: none; background-image: none;
border-radius: 12px;
} }
.modal { .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.modal.active { .modal.active {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.toggle { .toggle {
width: 47px; width: 47px;
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: box-shadow, border; -webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border; -moz-transition-property: box-shadow, border;
transition-property: box-shadow, border; transition-property: box-shadow, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
} }
.toggle:before { .toggle:before {
display: none; display: none;
} }
.toggle.active { .toggle.active {
border: 2px solid #4cd964;
background-color: transparent; background-color: transparent;
border: 2px solid #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964; -webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(17px, 0, 0);
-ms-transform: translate3d(17px, 0, 0); -ms-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0);
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #4cd964; border-color: #4cd964;
} }
.content.fade { .content.fade {
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; -moz-transition: opacity .2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity .2s ease-in-out;
} }
.content.sliding { .content.sliding {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay; -webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay; -moz-animation-name: fadeOverlay;
animation-name: fadeOverlay; animation-name: fadeOverlay;
-webkit-animation-duration: 0.4s; -webkit-animation-duration: .4s;
-moz-animation-duration: 0.4s; -moz-animation-duration: .4s;
animation-duration: 0.4s; animation-duration: .4s;
} }
.content.sliding.right:not([class*="sliding-in"]) { .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse; -webkit-animation-direction: reverse;
-moz-animation-direction: reverse; -moz-animation-direction: reverse;
animation-direction: reverse; animation-direction: reverse;
} }
.content.sliding.left { .content.sliding.left {
-webkit-transform: translate3d(-20%, 0, 0); -webkit-transform: translate3d(-20%, 0, 0);
-ms-transform: translate3d(-20%, 0, 0); -ms-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);
} }
@-webkit-keyframes fadeOverlay { @-webkit-keyframes fadeOverlay {
from { from {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
} }
to { to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
} }
} }

2
docs/dist/css/ratchet-theme-ios.min.css vendored
View File

File diff suppressed because one or more lines are too long

254
docs/dist/css/ratchet.css vendored
Unescape View File

@ -11,8 +11,8 @@
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html { html {
font-family: sans-serif; font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
} }
body { body {
@ -75,13 +75,13 @@ dfn {
} }
h1 { h1 {
margin: .67em 0;
font-size: 2em; font-size: 2em;
margin: 0.67em 0;
} }
mark { mark {
background: #ff0;
color: #000; color: #000;
background: #ff0;
} }
small { small {
@ -90,18 +90,18 @@ small {
sub, sub,
sup { sup {
position: relative;
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { sup {
top: -0.5em; top: -.5em;
} }
sub { sub {
bottom: -0.25em; bottom: -.25em;
} }
img { img {
@ -117,9 +117,9 @@ figure {
} }
hr { hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
} }
pre { pre {
@ -139,9 +139,9 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
color: inherit;
font: inherit;
margin: 0; margin: 0;
font: inherit;
color: inherit;
} }
button { button {
@ -168,8 +168,8 @@ html input[disabled] {
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
input { input {
@ -188,10 +188,10 @@ input[type="number"]::-webkit-outer-spin-button {
} }
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; -webkit-box-sizing: content-box;
box-sizing: content-box; -moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
} }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button,
@ -200,14 +200,14 @@ input[type="search"]::-webkit-search-decoration {
} }
fieldset { fieldset {
border: 1px solid #c0c0c0; padding: .35em .625em .75em;
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0;
} }
legend { legend {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
textarea { textarea {
@ -219,8 +219,8 @@ optgroup {
} }
table { table {
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse;
} }
td, td,
@ -230,8 +230,8 @@ th {
* { * {
-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;
} }
body { body {
@ -250,6 +250,7 @@ body {
a { a {
color: #428bca; color: #428bca;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
a:active { a:active {
@ -263,14 +264,14 @@ a:active {
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto; overflow: auto;
background-color: #fff;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: #fff;
} }
.content > * { .content > * {
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-ms-transform: translateZ(0); -ms-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
} }
.bar-nav ~ .content { .bar-nav ~ .content {
@ -310,8 +311,8 @@ a:active {
} }
.clearfix:before, .clearfix:after { .clearfix:before, .clearfix:after {
content: " ";
display: table; display: table;
content: " ";
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
@ -340,13 +341,13 @@ h4, .h4 {
} }
h5, .h5 { h5, .h5 {
font-size: 14px;
margin-top: 20px; margin-top: 20px;
font-size: 14px;
} }
h6, .h6 { h6, .h6 {
font-size: 12px;
margin-top: 20px; margin-top: 20px;
font-size: 12px;
} }
p { p {
@ -366,8 +367,8 @@ p {
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top;
white-space: nowrap; white-space: nowrap;
vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -383,35 +384,35 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #428bca;
background-color: #428bca; background-color: #428bca;
border: 1px solid #428bca;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 1px solid #3071a9;
background-color: #3071a9; background-color: #3071a9;
border: 1px solid #3071a9;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 1px solid #5cb85c;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 1px solid #449d44;
background-color: #449d44; background-color: #449d44;
border: 1px solid #449d44;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #d9534f;
background-color: #d9534f; background-color: #d9534f;
border: 1px solid #d9534f;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
border: 1px solid #c9302c;
background-color: #c9302c; background-color: #c9302c;
border: 1px solid #c9302c;
} }
.btn-outlined { .btn-outlined {
@ -457,9 +458,9 @@ input[type="button"] {
} }
.btn .badge { .btn .badge {
font-size: 12px;
margin: -2px -4px -2px 4px; margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15); font-size: 12px;
background-color: rgba(0, 0, 0, .15);
} }
.btn .badge-inverted, .btn .badge-inverted,
@ -491,8 +492,8 @@ input[type="button"] {
height: 44px; height: 44px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
border-bottom: 1px solid #dddddd;
background-color: white; background-color: white;
border-bottom: 1px solid #ddd;
} }
.bar-header-secondary { .bar-header-secondary {
@ -514,8 +515,8 @@ input[type="button"] {
.bar-footer, .bar-footer,
.bar-footer-secondary, .bar-footer-secondary,
.bar-footer-secondary-tab { .bar-footer-secondary-tab {
border-top: 1px solid #ddd;
border-bottom: 0; border-bottom: 0;
border-top: 1px solid #dddddd;
} }
.bar-nav { .bar-nav {
@ -541,22 +542,22 @@ input[type="button"] {
} }
.bar-tab { .bar-tab {
display: table;
bottom: 0; bottom: 0;
display: table;
width: 100%; width: 100%;
height: 50px; height: 50px;
padding: 0; padding: 0;
border-top: 1px solid #dddddd;
border-bottom: 0;
table-layout: fixed; table-layout: fixed;
border-top: 1px solid #ddd;
border-bottom: 0;
} }
.bar-tab .tab-item { .bar-tab .tab-item {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
height: 50px; height: 50px;
vertical-align: middle;
color: #929292; color: #929292;
text-align: center; text-align: center;
vertical-align: middle;
} }
.bar-tab .tab-item.active, .bar-tab .tab-item:active { .bar-tab .tab-item.active, .bar-tab .tab-item:active {
color: #428bca; color: #428bca;
@ -592,8 +593,8 @@ input[type="button"] {
top: 0; top: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
color: #428bca;
line-height: 44px; line-height: 44px;
color: #428bca;
border: 0; border: 0;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
@ -655,7 +656,7 @@ input[type="button"] {
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
color: #333; color: #333;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
border-radius: 100px; border-radius: 100px;
} }
.badge.badge-inverted { .badge.badge-inverted {
@ -688,10 +689,10 @@ input[type="button"] {
} }
.card { .card {
overflow: hidden;
margin: 10px; margin: 10px;
overflow: hidden;
background-color: white; background-color: white;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 6px; border-radius: 6px;
} }
@ -702,8 +703,8 @@ input[type="button"] {
} }
.card .table-view .table-view-divider:first-child { .card .table-view .table-view-divider:first-child {
top: 0; top: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px;
} }
.card .table-view .table-view-divider:last-child { .card .table-view .table-view-divider:last-child {
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
@ -720,15 +721,15 @@ input[type="button"] {
margin-bottom: 15px; margin-bottom: 15px;
list-style: none; list-style: none;
background-color: #fff; background-color: #fff;
border-top: 1px solid #dddddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.table-view-cell { .table-view-cell {
position: relative; position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px; padding: 11px 65px 11px 15px;
border-bottom: 1px solid #dddddd; overflow: hidden;
border-bottom: 1px solid #ddd;
} }
.table-view-cell:last-child { .table-view-cell:last-child {
border-bottom: 0; border-bottom: 0;
@ -736,9 +737,9 @@ input[type="button"] {
.table-view-cell > a:not(.btn) { .table-view-cell > a:not(.btn) {
position: relative; position: relative;
display: block; display: block;
overflow: hidden;
padding: inherit; padding: inherit;
margin: -11px -65px -11px -15px; margin: -11px -65px -11px -15px;
overflow: hidden;
color: inherit; color: inherit;
} }
.table-view-cell > a:not(.btn):active { .table-view-cell > a:not(.btn):active {
@ -754,11 +755,11 @@ input[type="button"] {
padding-left: 15px; padding-left: 15px;
margin-top: -1px; margin-top: -1px;
margin-left: 0; margin-left: 0;
color: #999;
font-weight: 500; font-weight: 500;
border-top: 1px solid #dddddd; color: #999;
border-bottom: 1px solid #dddddd;
background-color: #fafafa; background-color: #fafafa;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
} }
.table-view .media, .table-view .media,
@ -784,8 +785,8 @@ input[type="button"] {
top: 50%; top: 50%;
right: 15px; right: 15px;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
} }
.table-view-cell .navigate-left > .btn, .table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge, .table-view-cell .navigate-left > .badge,
@ -844,21 +845,21 @@ input[type="tel"],
input[type="color"] { input[type="color"] {
width: 100%; width: 100%;
height: 35px; height: 35px;
-webkit-appearance: none;
padding: 0 15px; padding: 0 15px;
margin-bottom: 15px; margin-bottom: 15px;
line-height: 21px; line-height: 21px;
background-color: #fff; background-color: #fff;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
-webkit-appearance: none;
} }
input[type="search"] { input[type="search"] {
box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
box-sizing: border-box;
} }
input[type="search"]:focus { input[type="search"]:focus {
@ -873,8 +874,8 @@ select {
height: auto; height: auto;
font-size: 14px; font-size: 14px;
background-color: #f8f8f8; background-color: #f8f8f8;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
} }
.input-group { .input-group {
@ -886,16 +887,16 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-top: 0; border-top: 0;
border-left: 0;
border-right: 0; border-right: 0;
border-left: 0;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.input-row label { .input-row label {
@ -926,15 +927,15 @@ select {
} }
.segmented-control .control-item { .segmented-control .control-item {
display: table-cell; display: table-cell;
overflow: hidden;
width: 1%; width: 1%;
padding-top: 6px; padding-top: 6px;
padding-bottom: 7px; padding-bottom: 7px;
overflow: hidden;
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
@ -1009,15 +1010,15 @@ select {
margin-left: -140px; margin-left: -140px;
background-color: white; background-color: white;
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
opacity: 0; opacity: 0;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -webkit-transition: all .25s linear;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -moz-transition: all .25s linear;
transition: all .25s linear;
-webkit-transform: translate3d(0, -15px, 0); -webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
} }
.popover:before { .popover:before {
position: absolute; position: absolute;
@ -1026,16 +1027,16 @@ select {
width: 0; width: 0;
height: 0; height: 0;
margin-left: -15px; margin-left: -15px;
content: '';
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-bottom: 15px solid white; border-bottom: 15px solid white;
border-left: 15px solid transparent; border-left: 15px solid transparent;
content: '';
} }
.popover.visible { .popover.visible {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.popover .bar ~ .table-view { .popover .bar ~ .table-view {
padding-top: 44px; padding-top: 44px;
@ -1048,7 +1049,7 @@ select {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 15; z-index: 15;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, .3);
} }
.popover .btn-block { .popover .btn-block {
@ -1059,49 +1060,49 @@ select {
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
border-top-right-radius: 12px;
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.popover .table-view { .popover .table-view {
max-height: 300px; max-height: 300px;
margin-bottom: 0; margin-bottom: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff; background-color: #fff;
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
border-radius: 6px; border-radius: 6px;
-webkit-overflow-scrolling: touch;
} }
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
opacity: 0;
z-index: 11; z-index: 11;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s; -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s; -moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s; transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.modal.active { .modal.active {
opacity: 1;
height: 100%; height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s; -webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s; -moz-transition: -moz-transform .25s;
transition: transform .25s; transition: transform .25s;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.slider { .slider {
@ -1117,31 +1118,31 @@ select {
font-size: 0; font-size: 0;
white-space: nowrap; white-space: nowrap;
-webkit-transition: all 0 linear; -webkit-transition: all 0 linear;
-moz-transition: all 0 linear; -moz-transition: all 0 linear;
transition: all 0 linear; transition: all 0 linear;
} }
.slider .slide-group .slide { .slider .slide-group .slide {
display: inline-block; display: inline-block;
vertical-align: top;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
vertical-align: top;
} }
.toggle { .toggle {
display: block;
position: relative; position: relative;
display: block;
width: 74px; width: 74px;
height: 30px; height: 30px;
background-color: #fff; background-color: #fff;
border: 2px solid #ddd; border: 2px solid #ddd;
border-radius: 20px; border-radius: 20px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border; -webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border; -moz-transition-property: background-color, border;
transition-property: background-color, border; transition-property: background-color, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
position: absolute; position: absolute;
@ -1153,31 +1154,31 @@ select {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 100px; border-radius: 100px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle:before { .toggle:before {
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 11px; right: 11px;
color: #999;
font-size: 13px; font-size: 13px;
color: #999;
text-transform: uppercase; text-transform: uppercase;
content: "Off"; content: "Off";
} }
.toggle.active { .toggle.active {
border: 2px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 2px solid #5cb85c;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #5cb85c; border-color: #5cb85c;
-webkit-transform: translate3d(44px, 0, 0); -webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0); -ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0); transform: translate3d(44px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {
right: auto; right: auto;
@ -1199,23 +1200,23 @@ select {
.content.sliding { .content.sliding {
z-index: 2; z-index: 2;
-webkit-transition: -webkit-transform .4s; -webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s; -moz-transition: -moz-transform .4s;
transition: transform .4s; transition: transform .4s;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.content.sliding.left { .content.sliding.left {
z-index: 1; z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
.content.sliding.right { .content.sliding.right {
z-index: 3; z-index: 3;
-webkit-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
.navigate-left:after, .navigate-left:after,
@ -1225,15 +1226,16 @@ select {
position: absolute; position: absolute;
top: 50%; top: 50%;
display: inline-block; display: inline-block;
color: #bbb;
font-family: Ratchicons; font-family: Ratchicons;
font-size: inherit; font-size: inherit;
text-decoration: none;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; color: #bbb;
text-decoration: none;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
} }
.navigate-left:after, .navigate-left:after,
@ -1250,18 +1252,20 @@ select {
@font-face { @font-face {
font-family: Ratchicons; font-family: Ratchicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/ratchicons.eot"); src: url("../fonts/ratchicons.eot");
src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg"); src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
font-weight: normal;
font-style: normal;
} }
.icon { .icon {
display: inline-block; display: inline-block;
font-family: Ratchicons; font-family: Ratchicons;
font-size: 24px; font-size: 24px;
text-decoration: none;
line-height: 1; line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

2
docs/dist/css/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
Unescape View File

@ -29,12 +29,14 @@
"grunt-contrib-clean": "~0.5.0", "grunt-contrib-clean": "~0.5.0",
"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-csslint": "~0.2.0",
"grunt-contrib-cssmin": "~0.9.0", "grunt-contrib-cssmin": "~0.9.0",
"grunt-contrib-jshint": "~0.8.0", "grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-nodeunit": "~0.3.2", "grunt-contrib-nodeunit": "~0.3.2",
"grunt-contrib-sass": "~0.7.2", "grunt-contrib-sass": "~0.7.2",
"grunt-contrib-uglify": "~0.4.0", "grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "~0.5.3", "grunt-contrib-watch": "~0.5.3",
"grunt-csscomb": "~2.0.1",
"grunt-html-validation": "~0.1.13", "grunt-html-validation": "~0.1.13",
"grunt-jekyll": "~0.4.1", "grunt-jekyll": "~0.4.1",
"grunt-sed": "~0.1.1", "grunt-sed": "~0.1.1",

297
sass/.csscomb.json
Unescape View File

@ -0,0 +1,297 @@
{
"always-semicolon": true,
"block-indent": 2,
"colon-space": [0, 1],
"color-case": "lower",
"color-shorthand": true,
"combinator-space": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"remove-empty-rulesets": true,
"rule-indent": 2,
"stick-brace": " ",
"strip-spaces": true,
"unitless-zero": true,
"vendor-prefix-align": true,
"sort-order": [
[
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"float",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"-webkit-appearance",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"overflow",
"overflow-x",
"overflow-y",
"-webkit-overflow-scrolling",
"-ms-overflow-x",
"-ms-overflow-y",
"-ms-overflow-style",
"clip",
"clear",
"font",
"font-family",
"font-size",
"font-style",
"font-weight",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"line-height",
"color",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-decoration",
"text-indent",
"text-justify",
"text-outline",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"text-transform",
"text-wrap",
"-webkit-text-size-adjust",
"-ms-text-size-adjust",
"letter-spacing",
"-ms-word-break",
"word-break",
"word-spacing",
"-ms-word-wrap",
"word-wrap",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"white-space",
"vertical-align",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"pointer-events",
"cursor",
"visibility",
"zoom",
"flex-direction",
"flex-order",
"flex-pack",
"flex-align",
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"-o-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"background",
"background-color",
"background-image",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"filter:progid:DXImageTransform.Microsoft.gradient",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"filter",
"background-repeat",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size",
"border",
"border-color",
"border-style",
"border-width",
"border-top",
"border-top-color",
"border-top-style",
"border-top-width",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-bottom",
"border-bottom-color",
"border-bottom-style",
"border-bottom-width",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"opacity",
"-ms-interpolation-mode",
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction"
]
]
}

15
sass/.csslintrc
Unescape View File

@ -0,0 +1,15 @@
{
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"fallback-colors": false,
"font-sizes": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false
}

1
sass/docs.scss
Unescape View File

@ -564,7 +564,6 @@ body {
@include transform(translate3d(0, -55px, 0)); @include transform(translate3d(0, -55px, 0));
&.visible { &.visible {
@include transform(translateY(0));
@include transform(translate3d(0, 0, 0)); @include transform(translate3d(0, 0, 0));
} }

2
sass/mixins.scss
Unescape View File

@ -112,7 +112,7 @@
} @else if $type == double { } @else if $type == double {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>"), background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>"); url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: $offset 100%, $offset 0%; background-position: $offset 100%, $offset 0;
} }
background-repeat: no-repeat; background-repeat: no-repeat;
} }

3
sass/theme-ios.scss
Unescape View File

@ -477,9 +477,6 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
@include transition(-webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out); @include transition(-webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
&:before { &:before {

Write Preview
Loading…
Cancel
Save