From 255a3c5479eebb291335e4f6760d5459c3086c9d Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 11 Mar 2014 09:49:41 +0200 Subject: Switch to "grunt-sass". --- .gitignore | 1 - .travis.yml | 2 +- Gruntfile.js | 8 +++++--- package.json | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 915c39a..4066626 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,6 @@ _gh_pages _site .ruby-version -.sass-cache # Numerous always-ignore extensions *.diff diff --git a/.travis.yml b/.travis.yml index 0abe63a..d1426a7 100644 --- a/.travis.yml +++ b/.travis.yml @@ -21,7 +21,7 @@ before_install: install: - travis_retry npm install -g grunt-cli - travis_retry npm install - - travis_retry gem install --no-document "jekyll:~>3.0" "rouge:~>1.10" "sass:~>3.4" + - travis_retry gem install --no-document "jekyll:~>3.0" "rouge:~>1.10" matrix: fast_finish: true diff --git a/Gruntfile.js b/Gruntfile.js index 9e19d91..2c3c186 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -66,9 +66,11 @@ module.exports = function (grunt) { sass: { options: { - sourcemap: 'none', - style: 'expanded', - unixNewlines: true + outputStyle: 'expanded', + precision: 6, + sourceComments: false, + sourcemap: false, + style: 'expanded' }, core: { src: 'sass/ratchet.scss', diff --git a/package.json b/package.json index d1400a3..fa3f3dd 100644 --- a/package.json +++ b/package.json @@ -38,13 +38,13 @@ "grunt-contrib-cssmin": "~0.14.0", "grunt-contrib-htmlmin": "~0.6.0", "grunt-contrib-jshint": "~0.11.2", - "grunt-contrib-sass": "~0.9.2", "grunt-contrib-uglify": "~0.11.0", "grunt-contrib-watch": "~0.6.1", "grunt-csscomb": "~3.1.0", "grunt-html": "~5.0.0", "grunt-jekyll": "~0.4.2", "grunt-jscs": "~2.5.0", + "grunt-sass": "~1.1.0", "grunt-sed": "twbs/grunt-sed#v0.2.0", "load-grunt-tasks": "~3.4.0", "time-grunt": "~1.3.0" -- cgit v1.2.3 From 2de6a134bbdf8b7870d5db7db9df3ede15aed8fd Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 26 Dec 2015 09:53:32 +0200 Subject: Run `grunt`. [ci skip] --- dist/css/ratchet-theme-android.css | 55 ++++++ dist/css/ratchet-theme-ios.css | 48 ++++++ dist/css/ratchet.css | 70 ++++++++ docs/assets/css/docs.css | 286 ++++++++++++++++++++++++++++++-- docs/dist/css/ratchet-theme-android.css | 55 ++++++ docs/dist/css/ratchet-theme-ios.css | 48 ++++++ docs/dist/css/ratchet.css | 70 ++++++++ 7 files changed, 615 insertions(+), 17 deletions(-) diff --git a/dist/css/ratchet-theme-android.css b/dist/css/ratchet-theme-android.css index a6f2228..0866e71 100644 --- a/dist/css/ratchet-theme-android.css +++ b/dist/css/ratchet-theme-android.css @@ -18,6 +18,7 @@ body { a { color: #33b5e5; } + a:active { color: #1a9bcb; } @@ -57,6 +58,7 @@ a:active { -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, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25); } + .btn:active, .btn.active { color: #222; background-color: #999; @@ -70,6 +72,7 @@ a:active { background-color: #33b5e5; border: 0; } + .btn-primary:active, .btn-primary.active { color: #fff; background-color: #1a9bcb; @@ -81,6 +84,7 @@ a:active { background-color: #9c0; border: 0; } + .btn-positive:active, .btn-positive.active { color: #fff; background-color: #739900; @@ -92,6 +96,7 @@ a:active { background-color: #f44; border: 0; } + .btn-negative:active, .btn-negative.active { color: #fff; background-color: #f11; @@ -104,36 +109,44 @@ a:active { -webkit-box-shadow: none; box-shadow: none; } + .btn-outlined.btn-primary { color: #33b5e5; border: 1px solid #33b5e5; } + .btn-outlined.btn-primary:active { background-color: #33b5e5; border: 1px solid #33b5e5; } + .btn-outlined.btn-positive { color: #9c0; border: 1px solid #9c0; } + .btn-outlined.btn-positive:active { background-color: #9c0; border: 1px solid #9c0; } + .btn-outlined.btn-negative { color: #f44; border: 1px solid #f44; } + .btn-outlined.btn-negative:active { background-color: #f44; border: 1px solid #f44; } + .btn-outlined:active { background-color: #999; border: 1px solid #999; -webkit-box-shadow: none; box-shadow: none; } + .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color: #fff; -webkit-box-shadow: none; @@ -147,6 +160,7 @@ a:active { -webkit-box-shadow: none; box-shadow: none; } + .btn-link:active, .btn-link.active { color: #1a9bcb; background-color: transparent; @@ -162,9 +176,11 @@ a:active { .btn .badge { background-color: rgba(0, 0, 0, .15); } + .btn .badge.badge-inverted { background-color: transparent; } + .btn:active .badge { color: #fff; } @@ -176,15 +192,19 @@ a:active { -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, .07); } + .bar.bar-header-secondary { top: 50px; } + .bar.bar-footer-secondary { bottom: 50px; } + .bar.bar-footer-secondary-tab { bottom: 50px; } + .bar .bar-footer, .bar .bar-footer-secondary, .bar .bar-footer-secondary-tab { @@ -200,18 +220,22 @@ a:active { height: 50px; border-top: 0; } + .bar-tab .tab-item { color: #929292; } + .bar-tab .tab-item.active { color: #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5; } + .bar-tab .tab-item:active { color: #929292; background-color: #78c6e3; } + .bar-tab .tab-item .icon { top: 3px; padding-top: 0; @@ -231,6 +255,7 @@ a:active { padding-top: 10px; padding-bottom: 10px; } + .bar .btn-link { top: 0; padding: 0; @@ -238,13 +263,16 @@ a:active { line-height: 49px; color: #33b5e5; } + .bar .btn-link:active, .bar .btn-link.active { color: #1a9bcb; } + .bar .btn-link .icon { top: 2px; padding: 0; } + .bar .btn-block { top: 4px; } @@ -257,9 +285,11 @@ a:active { padding-top: 13px; padding-bottom: 13px; } + .bar .title .icon { padding: 0; } + .bar .title .icon.icon-caret { top: 10px; color: #777; @@ -278,6 +308,7 @@ a:active { color: #fff; background-color: #33b5e5; } + .badge-primary.badge-inverted { color: #33b5e5; background-color: transparent; @@ -287,6 +318,7 @@ a:active { color: #fff; background-color: #9c0; } + .badge-positive.badge-inverted { color: #9c0; background-color: transparent; @@ -296,6 +328,7 @@ a:active { color: #fff; background-color: #f44; } + .badge-negative.badge-inverted { color: #f44; background-color: transparent; @@ -310,19 +343,24 @@ a:active { .table-view { background-color: transparent; } + .table-view .table-view-cell { border-bottom: 1px solid #d9d9d9; } + .table-view .table-view-cell:last-child { background-image: none; } + .table-view .table-view-cell > a:not(.btn):active { color: inherit; background-color: #e0e0e0; } + .table-view .table-view-cell > a:not(.btn):active .icon { color: #fff; } + .table-view .table-view-divider { padding-top: 25px; font-size: 12px; @@ -433,6 +471,7 @@ textarea, -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); } + .segmented-control .control-item { padding-top: 10px; padding-bottom: 10px; @@ -441,9 +480,11 @@ textarea, -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, .2), inset 0 1px 0 rgba(255, 255, 255, .2); } + .segmented-control .control-item:first-child { border-left-width: 0; } + .segmented-control .control-item:active, .segmented-control .control-item.active { background-color: #999; } @@ -451,10 +492,12 @@ textarea, .segmented-control-primary { border: 0; } + .segmented-control-primary .control-item { color: #fff; border-color: inherit; } + .segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active { color: #fff; background-color: #33b5e5; @@ -463,10 +506,12 @@ textarea, .segmented-control-positive { border: 0; } + .segmented-control-positive .control-item { color: #fff; border-color: inherit; } + .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { color: #fff; background-color: #9c0; @@ -475,10 +520,12 @@ textarea, .segmented-control-negative { border: 0; } + .segmented-control-negative .control-item { color: #fff; border-color: inherit; } + .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { color: #fff; background-color: #f44; @@ -500,9 +547,11 @@ textarea, -o-transform: scale(.75); transform: scale(.75); } + .popover:before { display: none; } + .popover.visible { -webkit-transform: scale(1); -o-transform: scale(1); @@ -516,6 +565,7 @@ textarea, .popover .bar { border-radius: 0; } + .popover .bar-nav ~ .table-view { padding-top: 50px; } @@ -531,6 +581,7 @@ textarea, border: 2px solid #d7d7d7; border-radius: 0; } + .toggle .toggle-handle { top: 0; left: 0; @@ -542,6 +593,7 @@ textarea, -webkit-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, .3), inset 0 -1px 0 rgba(0, 0, 0, .1); } + .toggle:before { top: 1px; right: auto; @@ -549,10 +601,12 @@ textarea, z-index: 3; color: #fff; } + .toggle.active { background-color: #d7d7d7; border: 2px solid #d7d7d7; } + .toggle.active .toggle-handle { margin-right: 2px; background-color: #33b5e5; @@ -560,6 +614,7 @@ textarea, -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } + .toggle.active:before { right: 14px; left: auto; diff --git a/dist/css/ratchet-theme-ios.css b/dist/css/ratchet-theme-ios.css index bf2260d..99b86ce 100644 --- a/dist/css/ratchet-theme-ios.css +++ b/dist/css/ratchet-theme-ios.css @@ -11,6 +11,7 @@ a { color: #007aff; } + a:active { color: #0062cc; } @@ -42,6 +43,7 @@ p { -webkit-transition-duration: .2s; transition-duration: .2s; } + .btn:active, .btn.active { color: #fff; background-color: #929292; @@ -52,6 +54,7 @@ p { background-color: #007aff; border: 1px solid #007aff; } + .btn-primary:active, .btn-primary.active { background-color: #0062cc; border: 1px solid #0062cc; @@ -62,6 +65,7 @@ p { background-color: #4cd964; border: 1px solid #4cd964; } + .btn-positive:active, .btn-positive.active { background-color: #2ac845; border: 1px solid #2ac845; @@ -72,6 +76,7 @@ p { background-color: #dd524d; border: 1px solid #dd524d; } + .btn-negative:active, .btn-negative.active { background-color: #cf2d28; border: 1px solid #cf2d28; @@ -80,15 +85,19 @@ p { .btn-outlined { background-color: transparent; } + .btn-outlined.btn-primary { color: #007aff; } + .btn-outlined.btn-positive { color: #4cd964; } + .btn-outlined.btn-negative { color: #dd524d; } + .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color: #fff; } @@ -98,6 +107,7 @@ p { background-color: transparent; border: none; } + .btn-link:active, .btn-link.active { color: #0062cc; background-color: transparent; @@ -106,9 +116,11 @@ p { .btn .badge { background-color: rgba(0, 0, 0, .15); } + .btn .badge.badge-inverted { background-color: transparent; } + .btn:active .badge { color: #fff; } @@ -118,15 +130,19 @@ p { border-bottom: 0; box-shadow: 0 0 1px rgba(0, 0, 0, .85); } + .bar.bar-header-secondary { top: 44px; } + .bar.bar-footer-secondary { bottom: 44px; } + .bar.bar-footer-secondary-tab { bottom: 50px; } + .bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab { border-top: 0; } @@ -138,6 +154,7 @@ p { .tab-item { color: #929292; } + .tab-item.active, .tab-item:active { color: #007aff; } @@ -145,6 +162,7 @@ p { .bar-nav .btn-link { color: #007aff; } + .bar-nav .btn-link:active { color: #007aff; opacity: .6; @@ -159,6 +177,7 @@ p { color: #fff; background-color: #007aff; } + .badge-primary.badge-inverted { color: #007aff; background-color: transparent; @@ -168,6 +187,7 @@ p { color: #fff; background-color: #4cd964; } + .badge-positive.badge-inverted { color: #4cd964; background-color: transparent; @@ -177,6 +197,7 @@ p { color: #fff; background-color: #dd524d; } + .badge-negative.badge-inverted { color: #dd524d; background-color: transparent; @@ -197,18 +218,22 @@ p { border-top: 0; border-bottom: 0; } + .table-view .table-view-cell { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 15px 100%; border-bottom: 0; } + .table-view .table-view-cell:last-child { background-image: none; } + .table-view .table-view-cell > a:not(.btn):active { color: inherit; } + .table-view .table-view-divider { background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; @@ -292,15 +317,18 @@ textarea, background-color: transparent; border: 1px solid #929292; } + .segmented-control .control-item { color: #929292; border-color: #929292; -webkit-transition: background-color .1s linear; transition: background-color .1s linear; } + .segmented-control .control-item:active { background-color: #ebebeb; } + .segmented-control .control-item.active { color: #fff; background-color: #929292; @@ -309,13 +337,16 @@ textarea, .segmented-control-primary { border: 1px solid #007aff; } + .segmented-control-primary .control-item { color: #007aff; border-color: inherit; } + .segmented-control-primary .control-item:active { background-color: #b3d7ff; } + .segmented-control-primary .control-item.active { color: #fff; background-color: #007aff; @@ -324,13 +355,16 @@ textarea, .segmented-control-positive { border: 1px solid #4cd964; } + .segmented-control-positive .control-item { color: #4cd964; border-color: inherit; } + .segmented-control-positive .control-item:active { background-color: #dff8e4; } + .segmented-control-positive .control-item.active { color: #fff; background-color: #4cd964; @@ -339,13 +373,16 @@ textarea, .segmented-control-negative { border: 1px solid #dd524d; } + .segmented-control-negative .control-item { color: #dd524d; border-color: inherit; } + .segmented-control-negative .control-item:active { background-color: #fae4e3; } + .segmented-control-negative .control-item.active { color: #fff; background-color: #dd524d; @@ -356,6 +393,7 @@ textarea, -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; } + .popover:before { border-bottom: 15px solid rgba(247, 247, 247, .98); } @@ -377,6 +415,7 @@ textarea, -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); } + .modal.active { -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); @@ -391,24 +430,29 @@ textarea, -webkit-transition-property: box-shadow, border; transition-property: box-shadow, border; } + .toggle .toggle-handle { border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 3px 3px rgba(0, 0, 0, .08); -webkit-transition-property: -webkit-transform, border, width; transition-property: transform, border, width; } + .toggle:before { display: none; } + .toggle.active { background-color: transparent; border: 2px solid #4cd964; box-shadow: inset 0 0 0 13px #4cd964; } + .toggle.active .toggle-handle { -webkit-transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0); } + .toggle.active .toggle-handle { border-color: #4cd964; } @@ -417,20 +461,24 @@ textarea, -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } + .content.sliding { -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); } + .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { -webkit-animation-name: fadeOverlay; animation-name: fadeOverlay; -webkit-animation-duration: .4s; animation-duration: .4s; } + .content.sliding.right:not([class*="sliding-in"]) { -webkit-animation-direction: reverse; animation-direction: reverse; } + .content.sliding.left { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); diff --git a/dist/css/ratchet.css b/dist/css/ratchet.css index 410ba41..104c372 100644 --- a/dist/css/ratchet.css +++ b/dist/css/ratchet.css @@ -257,6 +257,7 @@ a { -webkit-tap-highlight-color: transparent; } + a:active { color: #3071a9; } @@ -322,6 +323,7 @@ a:active { display: table; content: " "; } + .clearfix:after { clear: both; } @@ -382,10 +384,12 @@ p { border: 1px solid #ccc; border-radius: 3px; } + .btn:active, .btn.active { color: inherit; background-color: #ccc; } + .btn:disabled, .btn.disabled { opacity: .6; } @@ -395,6 +399,7 @@ p { background-color: #428bca; border: 1px solid #428bca; } + .btn-primary:active, .btn-primary.active { color: #fff; background-color: #3071a9; @@ -406,6 +411,7 @@ p { background-color: #5cb85c; border: 1px solid #5cb85c; } + .btn-positive:active, .btn-positive.active { color: #fff; background-color: #449d44; @@ -417,6 +423,7 @@ p { background-color: #d9534f; border: 1px solid #d9534f; } + .btn-negative:active, .btn-negative.active { color: #fff; background-color: #c9302c; @@ -426,15 +433,19 @@ p { .btn-outlined { background-color: transparent; } + .btn-outlined.btn-primary { color: #428bca; } + .btn-outlined.btn-positive { color: #5cb85c; } + .btn-outlined.btn-negative { color: #d9534f; } + .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color: #fff; } @@ -446,6 +457,7 @@ p { background-color: transparent; border: 0; } + .btn-link:active, .btn-link.active { color: #3071a9; background-color: transparent; @@ -562,6 +574,7 @@ input[type="button"] { border-top: 1px solid #ddd; border-bottom: 0; } + .bar-tab .tab-item { position: relative; display: table-cell; @@ -571,15 +584,18 @@ input[type="button"] { text-align: center; vertical-align: middle; } + .bar-tab .tab-item.active, .bar-tab .tab-item:active { color: #428bca; } + .bar-tab .tab-item .badge { position: absolute; top: 3px; left: 50%; vertical-align: top; } + .bar-tab .tab-item .icon { top: 3px; width: 24px; @@ -587,6 +603,7 @@ input[type="button"] { padding-top: 0; padding-bottom: 0; } + .bar-tab .tab-item .icon ~ .tab-label { display: block; font-size: 11px; @@ -600,9 +617,11 @@ input[type="button"] { margin-top: 0; font-weight: 400; } + .bar .btn.pull-right { margin-left: 10px; } + .bar .btn.pull-left { margin-right: 10px; } @@ -615,6 +634,7 @@ input[type="button"] { color: #428bca; border: 0; } + .bar .btn-link:active, .bar .btn-link.active { color: #3071a9; } @@ -629,12 +649,15 @@ input[type="button"] { .bar .btn-nav.pull-left { margin-left: -5px; } + .bar .btn-nav.pull-left .icon-left-nav { margin-right: -3px; } + .bar .btn-nav.pull-right { margin-right: -5px; } + .bar .btn-nav.pull-right .icon-right-nav { margin-left: -3px; } @@ -646,13 +669,16 @@ input[type="button"] { padding-bottom: 10px; font-size: 24px; } + .bar .btn .icon { top: 3px; padding: 0; } + .bar .title .icon { padding: 0; } + .bar .title .icon.icon-caret { top: 4px; margin-left: -5px; @@ -677,6 +703,7 @@ input[type="button"] { background-color: rgba(0, 0, 0, .15); border-radius: 100px; } + .badge.badge-inverted { padding: 0 5px 0 0; background-color: transparent; @@ -686,6 +713,7 @@ input[type="button"] { color: #fff; background-color: #428bca; } + .badge-primary.badge-inverted { color: #428bca; } @@ -694,6 +722,7 @@ input[type="button"] { color: #fff; background-color: #5cb85c; } + .badge-positive.badge-inverted { color: #5cb85c; } @@ -702,6 +731,7 @@ input[type="button"] { color: #fff; background-color: #d9534f; } + .badge-negative.badge-inverted { color: #d9534f; } @@ -719,11 +749,13 @@ input[type="button"] { border-top: 0; border-bottom: 0; } + .card .table-view .table-view-divider:first-child { top: 0; border-top-left-radius: 6px; border-top-right-radius: 6px; } + .card .table-view .table-view-divider:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; @@ -749,9 +781,11 @@ input[type="button"] { overflow: hidden; border-bottom: 1px solid #ddd; } + .table-view-cell:last-child { border-bottom: 0; } + .table-view-cell > a:not(.btn) { position: relative; display: block; @@ -760,9 +794,11 @@ input[type="button"] { overflow: hidden; color: inherit; } + .table-view-cell > a:not(.btn):active { background-color: #eee; } + .table-view-cell p { margin-bottom: 0; } @@ -788,6 +824,7 @@ input[type="button"] { .table-view .media-object.pull-left { margin-right: 10px; } + .table-view .media-object.pull-right { margin-left: 10px; } @@ -806,6 +843,7 @@ input[type="button"] { -o-transform: translateY(-50%); transform: translateY(-50%); } + .table-view-cell .navigate-left > .btn, .table-view-cell .navigate-left > .badge, .table-view-cell .navigate-left > .toggle, @@ -946,6 +984,7 @@ select { border: 1px solid #ccc; border-radius: 3px; } + .segmented-control .control-item { display: table-cell; width: 1%; @@ -959,12 +998,15 @@ select { white-space: nowrap; border-left: 1px solid #ccc; } + .segmented-control .control-item:first-child { border-left-width: 0; } + .segmented-control .control-item:active { background-color: #eee; } + .segmented-control .control-item.active { background-color: #ccc; } @@ -972,13 +1014,16 @@ select { .segmented-control-primary { border-color: #428bca; } + .segmented-control-primary .control-item { color: #428bca; border-color: inherit; } + .segmented-control-primary .control-item:active { background-color: #cde1f1; } + .segmented-control-primary .control-item.active { color: #fff; background-color: #428bca; @@ -987,13 +1032,16 @@ select { .segmented-control-positive { border-color: #5cb85c; } + .segmented-control-positive .control-item { color: #5cb85c; border-color: inherit; } + .segmented-control-positive .control-item:active { background-color: #d8eed8; } + .segmented-control-positive .control-item.active { color: #fff; background-color: #5cb85c; @@ -1002,13 +1050,16 @@ select { .segmented-control-negative { border-color: #d9534f; } + .segmented-control-negative .control-item { color: #d9534f; border-color: inherit; } + .segmented-control-negative .control-item:active { background-color: #f9e2e2; } + .segmented-control-negative .control-item.active { color: #fff; background-color: #d9534f; @@ -1017,6 +1068,7 @@ select { .control-content { display: none; } + .control-content.active { display: block; } @@ -1041,6 +1093,7 @@ select { -ms-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } + .popover:before { position: absolute; top: -15px; @@ -1053,12 +1106,14 @@ select { border-bottom: 15px solid #fff; border-left: 15px solid transparent; } + .popover.visible { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } + .popover .bar ~ .table-view { padding-top: 44px; } @@ -1076,6 +1131,7 @@ select { .popover .btn-block { margin-bottom: 5px; } + .popover .btn-block:last-child { margin-bottom: 0; } @@ -1115,6 +1171,7 @@ select { -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } + .modal.active { height: 100%; opacity: 1; @@ -1134,6 +1191,7 @@ select { overflow: hidden; background-color: #000; } + .slider .slide-group { position: relative; font-size: 0; @@ -1142,6 +1200,7 @@ select { -o-transition: all 0s linear; transition: all 0s linear; } + .slider .slide-group .slide { display: inline-block; width: 100%; @@ -1165,6 +1224,7 @@ select { -o-transition-property: background-color, border; transition-property: background-color, border; } + .toggle .toggle-handle { position: absolute; top: -1px; @@ -1182,6 +1242,7 @@ select { -o-transition-property: -o-transform, border, width; transition-property: transform, border, width; } + .toggle:before { position: absolute; top: 3px; @@ -1191,22 +1252,26 @@ select { text-transform: uppercase; content: "Off"; } + .toggle.active { background-color: #5cb85c; border: 2px solid #5cb85c; } + .toggle.active .toggle-handle { border-color: #5cb85c; -webkit-transform: translate3d(44px, 0, 0); -ms-transform: translate3d(44px, 0, 0); transform: translate3d(44px, 0, 0); } + .toggle.active:before { right: auto; left: 15px; color: #fff; content: "On"; } + .toggle input[type="checkbox"] { display: none; } @@ -1218,9 +1283,11 @@ select { -o-transition: opacity .4s; transition: opacity .4s; } + .content.fade.in { opacity: 1; } + .content.sliding { z-index: 2; -webkit-transition: -webkit-transform .4s; @@ -1230,12 +1297,14 @@ select { -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } + .content.sliding.left { z-index: 1; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } + .content.sliding.right { z-index: 3; -webkit-transform: translate3d(100%, 0, 0); @@ -1283,6 +1352,7 @@ select { 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"); } + .icon { display: inline-block; font-family: Ratchicons; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index e596e01..7298503 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -27,28 +27,34 @@ body { .docs-content { font-size: 14px; } + @media screen and (min-width: 768px) { .docs-content { font-size: 18px; } } + .docs-content h1, .docs-content h2, .docs-content h3, .docs-content h4, .docs-content h5, .docs-content h6 { font-weight: 400; color: #222; } + .docs-content h2 { margin-bottom: .25em; font-size: 2em; } + .docs-content h3 { margin-bottom: .5em; font-size: 1.25em; } + .docs-content p { margin-bottom: 1.5em; font-size: 1em; color: #555; } + .docs-content .lead { font-size: 1.1em; color: #777; @@ -69,6 +75,7 @@ body { height: 100vh; min-height: 750px; } + .docs-header .carbonad { position: relative !important; margin-top: 0 !important; @@ -79,6 +86,7 @@ body { -o-animation-duration: 2s; animation-duration: 2s; } + .docs-header .version { margin-top: 15px; color: rgba(255, 255, 255, .5); @@ -102,7 +110,6 @@ body { margin-bottom: 60px !important; margin-left: -165px !important; } - .docs-sub-header .carbonad { position: absolute !important; top: 50% !important; @@ -114,6 +121,7 @@ body { transform: translateY(-50%) !important; } } + .docs-masthead { position: relative; padding-top: 15px; @@ -138,9 +146,11 @@ body { color: #fff; opacity: .7; } + .docs-nav .docs-nav-trigger.active { opacity: 1; } + .docs-nav .docs-nav-group { position: absolute; top: 40px; @@ -152,10 +162,12 @@ body { background-color: rgba(0, 0, 0, .9); opacity: 0; } + .docs-nav .docs-nav-group.active { height: auto; opacity: 1; } + .docs-nav .docs-nav-item { display: block; padding: 20px 15px; @@ -174,6 +186,7 @@ body { -o-transition: opacity .2s linear; transition: opacity .2s linear; } + .docs-title a:active, .docs-title a:focus, .docs-nav-item:active, .docs-nav-item:focus { @@ -191,7 +204,6 @@ body { -o-transform: translateX(0); transform: translateX(0); } - .docs-nav { float: right; } @@ -211,7 +223,6 @@ body { padding: 0 15px; font-size: 14px; } - .docs-jump-menu { position: absolute; left: 15px; @@ -237,7 +248,6 @@ body { top: 4px; margin-left: -5px; } - .docs-component-group { position: absolute; top: 35px; @@ -286,6 +296,7 @@ body { background-color: #428bca; } } + .docs-header-content { position: relative; padding: 50px 10px; @@ -297,6 +308,7 @@ body { -o-animation-duration: 2s; animation-duration: 2s; } + .docs-header-content .btn { display: block; padding: 15px 60px 16px; @@ -309,11 +321,13 @@ body { -o-transition: all .2s linear; transition: all .2s linear; } + .docs-header-content .btn:hover { background-color: #fff; -webkit-box-shadow: 0 0 50px rgba(255, 255, 255, .3); box-shadow: 0 0 50px rgba(255, 255, 255, .3); } + .docs-header-content .btn:active { opacity: .5; } @@ -338,13 +352,13 @@ body { .docs-header-content .btn { display: inline-block; } - .docs-subtitle { margin-bottom: 30px; font-size: 41px; line-height: 60px; } } + .carbonad { width: 100% !important; height: auto !important; @@ -399,6 +413,7 @@ body { border-radius: 3px !important; } } + .docs-sub-content { position: relative; padding: 55px 15px 65px; @@ -406,16 +421,19 @@ body { color: #fff; text-align: center; } + .docs-sub-content .page-title, .docs-sub-content .page-description { margin-top: 0; margin-bottom: 0; font-weight: 300; } + .docs-sub-content .page-title { margin-bottom: 5px; font-size: 40px; } + .docs-sub-content .page-description { font-size: 24px; color: #fff; @@ -428,6 +446,7 @@ body { text-align: left; } } + .docs-section { padding-top: 50px; padding-bottom: 50px; @@ -443,12 +462,14 @@ body { margin-top: 35px; } } + .docs-module { padding: 20px; margin-top: 20px; border: 1px solid #ddd; border-radius: 3px; } + .docs-module .btn-block { margin-bottom: 0; } @@ -468,19 +489,23 @@ body { text-align: center; border-top: 1px solid #ddd; } + .docs-footer .social { padding: 0 0 20px; margin: 0; list-style: none; } + .docs-footer .social li { display: inline-block; height: 20px; vertical-align: top; } + .docs-footer .social .twitter-follow-button { margin-top: 5px; } + @media screen and (min-width: 768px) { .docs-footer .social .twitter-follow-button { margin-top: 0; @@ -500,9 +525,11 @@ body { margin: 0 auto; } } + .docs-footer-links { padding-left: 0; } + .docs-footer-links li { display: inline; padding-right: 3px; @@ -513,10 +540,12 @@ body { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .1); } + .docs-header .docs-footer .docs-footer-text, .docs-header .docs-footer .docs-footer-links { color: rgba(255, 255, 255, .5); } + .docs-header .docs-footer .docs-footer-text a, .docs-header .docs-footer .docs-footer-links a { color: rgba(255, 255, 255, .8); @@ -546,15 +575,18 @@ body { -ms-transform: translate3d(0, -55px, 0); transform: translate3d(0, -55px, 0); } + .docs-component-toolbar.visible { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } + .docs-component-toolbar .segmented-control { max-width: 300px; margin: 0 auto; } + .docs-component-toolbar .segmented-control .control-item { cursor: pointer; } @@ -566,6 +598,7 @@ body { .example-wrap { margin-bottom: 30px; } + .example-wrap .example { display: block; width: 100%; @@ -574,9 +607,11 @@ body { border: 1px solid #ddd; border-radius: 3px; } + .example-wrap .example-title { margin-top: 10px; } + .example-wrap img { display: block; width: 100%; @@ -597,6 +632,7 @@ code { margin-left: -15px; border-bottom: 1px solid #ddd; } + .component.no-border { border-bottom: 0; } @@ -606,6 +642,7 @@ code { border-bottom: 0; } } + .component-title { margin-bottom: 10px; font-size: 24px; @@ -633,6 +670,7 @@ code { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } + .component-example .bar.bar-header-secondary { top: 0 !important; border-top: 0; @@ -645,6 +683,7 @@ code { .component-example > .card { margin: 15px 0 0; } + .component-example > .card .control-content { padding: 15px; } @@ -657,6 +696,7 @@ code { .component-example .slider { height: 300px; } + .component-example .slider .slide { height: 300px; } @@ -710,7 +750,6 @@ code { margin-right: 0; margin-left: 0; } - .component { padding-right: 0; padding-left: 0; @@ -722,17 +761,16 @@ code { .component.active { opacity: 1; } - .component-example { display: none; } - .highlight pre { border-right: 1px solid #ddd; border-left: 1px solid #ddd; border-radius: 3px; } } + #ratchicons .icon, #ratchiconsInDevice .icon { width: 50px; @@ -774,6 +812,7 @@ code { margin-right: 10px; margin-left: 10px; } + #segmentedControlsInDevice .card span { padding: 10px; } @@ -781,6 +820,7 @@ code { #badgesInDevice { text-align: center; } + #badgesInDevice .badge { margin-top: 10px; } @@ -788,6 +828,7 @@ code { #formsInDevice form { margin: 10px; } + #formsInDevice form.input-group { margin: 0; } @@ -819,6 +860,7 @@ code { opacity: 1; } } + #modalsInDevice #iwindow > .btn { margin: 10px; } @@ -829,13 +871,11 @@ code { cursor: -moz-grab; cursor: grab; } - .slider .slide img { display: block; width: 100%; height: 570px; } - .slider .slide-group .slide-text { position: absolute; top: 45%; @@ -847,6 +887,7 @@ code { text-shadow: 0 0 10px rgba(0, 0, 0, .5); } } + .device { display: none; font-family: "Helvetica Neue", Helvetica, sans-serif; @@ -876,7 +917,6 @@ code { position: fixed; right: auto; } - .device .device-content { position: absolute; top: 117px; @@ -888,13 +928,11 @@ code { line-height: 21px; background-color: #fff; } - .device .content, .device .bar, .device .modal { position: absolute; } - .device .content { top: 44px; right: 0; @@ -902,11 +940,13 @@ code { left: 0; } } + @media screen and (min-width: 1200px) { .device { margin-left: 39px; } } + hr { height: 0; margin: 10px 0 30px; @@ -919,6 +959,7 @@ hr { display: table; content: " "; } + .column-group:after { clear: both; } @@ -941,6 +982,7 @@ hr { padding-right: 15px; padding-left: 15px; } + .column.pull-right { float: right; } @@ -955,47 +997,50 @@ hr { max-width: 940px; padding: 0; } - .lg-units-4 { width: 33.333%; } - .lg-units-5 { width: 41.666%; } - .lg-units-7 { width: 58.333%; } - .lg-units-8 { width: 66.666%; } } + @media screen and (min-width: 1200px) { .container { max-width: 1170px; } } + .platform-ios a { color: #007aff; } + .platform-ios a:active { color: #0062cc; } + .platform-ios .content { background-color: #efeff4; } + .platform-ios .h5, .platform-ios h5, .platform-ios .h6, .platform-ios h6, .platform-ios p { color: #8f8f94; } + .platform-ios .h5, .platform-ios h5, .platform-ios .h6, .platform-ios h6 { font-weight: normal; text-transform: uppercase; } + .platform-ios .btn { color: #929292; background-color: rgba(247, 247, 247, .98); @@ -1010,138 +1055,175 @@ hr { -o-transition-duration: .2s; transition-duration: .2s; } + .platform-ios .btn:active, .platform-ios .btn.active { color: #fff; background-color: #929292; } + .platform-ios .btn-primary { color: #fff; background-color: #007aff; border: 1px solid #007aff; } + .platform-ios .btn-primary:active, .platform-ios .btn-primary.active { background-color: #0062cc; border: 1px solid #0062cc; } + .platform-ios .btn-positive { color: #fff; background-color: #4cd964; border: 1px solid #4cd964; } + .platform-ios .btn-positive:active, .platform-ios .btn-positive.active { background-color: #2ac845; border: 1px solid #2ac845; } + .platform-ios .btn-negative { color: #fff; background-color: #dd524d; border: 1px solid #dd524d; } + .platform-ios .btn-negative:active, .platform-ios .btn-negative.active { background-color: #cf2d28; border: 1px solid #cf2d28; } + .platform-ios .btn-outlined { background-color: transparent; } + .platform-ios .btn-outlined.btn-primary { color: #007aff; } + .platform-ios .btn-outlined.btn-positive { color: #4cd964; } + .platform-ios .btn-outlined.btn-negative { color: #dd524d; } + .platform-ios .btn-outlined.btn-primary:active, .platform-ios .btn-outlined.btn-positive:active, .platform-ios .btn-outlined.btn-negative:active { color: #fff; } + .platform-ios .btn-link { color: #007aff; background-color: transparent; border: none; } + .platform-ios .btn-link:active, .platform-ios .btn-link.active { color: #0062cc; background-color: transparent; } + .platform-ios .btn .badge { background-color: rgba(0, 0, 0, .15); } + .platform-ios .btn .badge.badge-inverted { background-color: transparent; } + .platform-ios .btn:active .badge { color: #fff; } + .platform-ios .bar { background-color: rgba(247, 247, 247, .98); border-bottom: 0; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85); box-shadow: 0 0 1px rgba(0, 0, 0, .85); } + .platform-ios .bar.bar-header-secondary { top: 44px; } + .platform-ios .bar.bar-footer-secondary { bottom: 44px; } + .platform-ios .bar.bar-footer-secondary-tab { bottom: 50px; } + .platform-ios .bar.bar-footer, .platform-ios .bar.bar-footer-secondary, .platform-ios .bar.bar-footer-secondary-tab { border-top: 0; } + .platform-ios .bar-tab { border-top: 0; } + .platform-ios .tab-item { color: #929292; } + .platform-ios .tab-item.active, .platform-ios .tab-item:active { color: #007aff; } + .platform-ios .bar-nav .btn-link { color: #007aff; } + .platform-ios .bar-nav .btn-link:active { color: #007aff; opacity: .6; } + .platform-ios .badge.badge-inverted { color: #929292; background-color: transparent; } + .platform-ios .badge-primary { color: #fff; background-color: #007aff; } + .platform-ios .badge-primary.badge-inverted { color: #007aff; background-color: transparent; } + .platform-ios .badge-positive { color: #fff; background-color: #4cd964; } + .platform-ios .badge-positive.badge-inverted { color: #4cd964; background-color: transparent; } + .platform-ios .badge-negative { color: #fff; background-color: #dd524d; } + .platform-ios .badge-negative.badge-inverted { color: #dd524d; background-color: transparent; } + .platform-ios .card .table-view { background-image: none; } + .platform-ios .card .table-view-cell:last-child { background-image: none; } + .platform-ios .table-view { background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; @@ -1149,18 +1231,22 @@ hr { border-top: 0; border-bottom: 0; } + .platform-ios .table-view .table-view-cell { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 15px 100%; border-bottom: 0; } + .platform-ios .table-view .table-view-cell:last-child { background-image: none; } + .platform-ios .table-view .table-view-cell > a:not(.btn):active { color: inherit; } + .platform-ios .table-view .table-view-divider { background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; @@ -1168,6 +1254,7 @@ hr { border-top: 0; border-bottom: 0; } + .platform-ios select, .platform-ios textarea, .platform-ios input[type="text"], @@ -1189,6 +1276,7 @@ hr { padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); } + .platform-ios input[type="search"] { height: 34px; text-align: center; @@ -1196,14 +1284,17 @@ hr { border: 0; border-radius: 6px; } + .platform-ios input[type="search"]:focus { text-align: left; } + .platform-ios select, .platform-ios textarea, .platform-ios .input-group { height: auto; } + .platform-ios .input-group { padding: 0; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); @@ -1211,29 +1302,35 @@ hr { background-position: 0 100%, 0 0; border: 0; } + .platform-ios .input-group input { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 15px 100%; border: 0; } + .platform-ios .input-group input:last-child { background-image: none; } + .platform-ios .input-row { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 15px 100%; border-bottom: 0; } + .platform-ios .input-row:last-child, .platform-ios .input-row label + input { background-image: none; } + .platform-ios .segmented-control { background-color: transparent; border: 1px solid #929292; } + .platform-ios .segmented-control .control-item { color: #929292; border-color: #929292; @@ -1241,84 +1338,106 @@ hr { -o-transition: background-color .1s linear; transition: background-color .1s linear; } + .platform-ios .segmented-control .control-item:active { background-color: #ebebeb; } + .platform-ios .segmented-control .control-item.active { color: #fff; background-color: #929292; } + .platform-ios .segmented-control-primary { border: 1px solid #007aff; } + .platform-ios .segmented-control-primary .control-item { color: #007aff; border-color: inherit; } + .platform-ios .segmented-control-primary .control-item:active { background-color: #b3d7ff; } + .platform-ios .segmented-control-primary .control-item.active { color: #fff; background-color: #007aff; } + .platform-ios .segmented-control-positive { border: 1px solid #4cd964; } + .platform-ios .segmented-control-positive .control-item { color: #4cd964; border-color: inherit; } + .platform-ios .segmented-control-positive .control-item:active { background-color: #dff8e4; } + .platform-ios .segmented-control-positive .control-item.active { color: #fff; background-color: #4cd964; } + .platform-ios .segmented-control-negative { border: 1px solid #dd524d; } + .platform-ios .segmented-control-negative .control-item { color: #dd524d; border-color: inherit; } + .platform-ios .segmented-control-negative .control-item:active { background-color: #fae4e3; } + .platform-ios .segmented-control-negative .control-item.active { color: #fff; background-color: #dd524d; } + .platform-ios .popover { border-radius: 12px; -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; } + .platform-ios .popover:before { border-bottom: 15px solid rgba(247, 247, 247, .98); } + .platform-ios .popover .bar { -webkit-box-shadow: none; box-shadow: none; } + .platform-ios .popover .bar-nav { border-bottom: 1px solid rgba(0, 0, 0, .15); } + .platform-ios .popover .table-view { background-image: none; border-radius: 12px; } + .platform-ios .modal { -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); -o-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); } + .platform-ios .modal.active { -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); -o-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); } + .platform-ios .toggle { width: 47px; border: 2px solid #e6e6e6; @@ -1331,6 +1450,7 @@ hr { -o-transition-property: box-shadow, border; transition-property: box-shadow, border; } + .platform-ios .toggle .toggle-handle { border: 1px solid rgba(0, 0, 0, .2); -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08); @@ -1339,33 +1459,40 @@ hr { -o-transition-property: -o-transform, border, width; transition-property: transform, border, width; } + .platform-ios .toggle:before { display: none; } + .platform-ios .toggle.active { background-color: transparent; border: 2px solid #4cd964; -webkit-box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964; } + .platform-ios .toggle.active .toggle-handle { -webkit-transform: translate3d(17px, 0, 0); -ms-transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0); } + .platform-ios .toggle.active .toggle-handle { border-color: #4cd964; } + .platform-ios .content.fade { -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } + .platform-ios .content.sliding { -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); -o-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); } + .platform-ios .content.sliding.sliding-in, .platform-ios .content.sliding.right:not([class*="sliding-in"]) { -webkit-animation-name: fadeOverlay; -o-animation-name: fadeOverlay; @@ -1374,16 +1501,19 @@ hr { -o-animation-duration: .4s; animation-duration: .4s; } + .platform-ios .content.sliding.right:not([class*="sliding-in"]) { -webkit-animation-direction: reverse; -o-animation-direction: reverse; animation-direction: reverse; } + .platform-ios .content.sliding.left { -webkit-transform: translate3d(-20%, 0, 0); -ms-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } + @-webkit-keyframes fadeOverlay { from { -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent; @@ -1394,9 +1524,11 @@ hr { box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1); } } + .platform-ios .device { background-position: -395px 0; } + .platform-ios .device .device-content { background-color: #efeff4; } @@ -1407,31 +1539,40 @@ hr { line-height: 22px; color: #222; } + .platform-android a { color: #33b5e5; } + .platform-android a:active { color: #1a9bcb; } + .platform-android .content { background-color: #f2f2f2; } + .platform-android .bar-nav ~ .content { padding-top: 50px; } + .platform-android .bar-header-secondary ~ .content { padding-top: 100px; } + .platform-android .bar-tab ~ .content { padding-top: 50px; padding-bottom: 0; } + .platform-android .bar-footer ~ .content { padding-bottom: 50px; } + .platform-android .bar-footer-secondary ~ .content { padding-bottom: 100px; } + .platform-android .btn { padding: 8px 15px; font-size: 14px; @@ -1442,6 +1583,7 @@ hr { -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, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25); } + .platform-android .btn:active, .platform-android .btn.active { color: #222; background-color: #999; @@ -1449,77 +1591,93 @@ hr { -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, .2), inset 0 1px 0 rgba(255, 255, 255, .2); } + .platform-android .btn-primary { color: #fff; background-color: #33b5e5; border: 0; } + .platform-android .btn-primary:active, .platform-android .btn-primary.active { color: #fff; background-color: #1a9bcb; border: 0; } + .platform-android .btn-positive { color: #fff; background-color: #9c0; border: 0; } + .platform-android .btn-positive:active, .platform-android .btn-positive.active { color: #fff; background-color: #739900; border: 0; } + .platform-android .btn-negative { color: #fff; background-color: #f44; border: 0; } + .platform-android .btn-negative:active, .platform-android .btn-negative.active { color: #fff; background-color: #f11; border: 0; } + .platform-android .btn-outlined { background-color: transparent; border: 1px solid #999; -webkit-box-shadow: none; box-shadow: none; } + .platform-android .btn-outlined.btn-primary { color: #33b5e5; border: 1px solid #33b5e5; } + .platform-android .btn-outlined.btn-primary:active { background-color: #33b5e5; border: 1px solid #33b5e5; } + .platform-android .btn-outlined.btn-positive { color: #9c0; border: 1px solid #9c0; } + .platform-android .btn-outlined.btn-positive:active { background-color: #9c0; border: 1px solid #9c0; } + .platform-android .btn-outlined.btn-negative { color: #f44; border: 1px solid #f44; } + .platform-android .btn-outlined.btn-negative:active { background-color: #f44; border: 1px solid #f44; } + .platform-android .btn-outlined:active { background-color: #999; border: 1px solid #999; -webkit-box-shadow: none; box-shadow: none; } + .platform-android .btn-outlined.btn-primary:active, .platform-android .btn-outlined.btn-positive:active, .platform-android .btn-outlined.btn-negative:active { color: #fff; -webkit-box-shadow: none; box-shadow: none; } + .platform-android .btn-link { color: #33b5e5; background-color: transparent; @@ -1527,25 +1685,31 @@ hr { -webkit-box-shadow: none; box-shadow: none; } + .platform-android .btn-link:active, .platform-android .btn-link.active { color: #1a9bcb; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } + .platform-android .btn-block { padding: 15px 0; font-size: 18px; } + .platform-android .btn .badge { background-color: rgba(0, 0, 0, .15); } + .platform-android .btn .badge.badge-inverted { background-color: transparent; } + .platform-android .btn:active .badge { color: #fff; } + .platform-android .bar { height: 50px; background-color: #ddd; @@ -1553,15 +1717,19 @@ hr { -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, .07); } + .platform-android .bar.bar-header-secondary { top: 50px; } + .platform-android .bar.bar-footer-secondary { bottom: 50px; } + .platform-android .bar.bar-footer-secondary-tab { bottom: 50px; } + .platform-android .bar .bar-footer, .platform-android .bar .bar-footer-secondary, .platform-android .bar .bar-footer-secondary-tab { @@ -1570,29 +1738,35 @@ hr { -webkit-box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5; } + .platform-android .bar-tab { top: 0; bottom: auto; height: 50px; border-top: 0; } + .platform-android .bar-tab .tab-item { color: #929292; } + .platform-android .bar-tab .tab-item.active { color: #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5; } + .platform-android .bar-tab .tab-item:active { color: #929292; background-color: #78c6e3; } + .platform-android .bar-tab .tab-item .icon { top: 3px; padding-top: 0; padding-bottom: 0; } + .platform-android .title { position: static; padding-left: 15px; @@ -1600,11 +1774,13 @@ hr { line-height: 49px; text-align: left; } + .platform-android .bar .btn { top: 7px; padding-top: 10px; padding-bottom: 10px; } + .platform-android .bar .btn-link { top: 0; padding: 0; @@ -1612,82 +1788,104 @@ hr { line-height: 49px; color: #33b5e5; } + .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active { color: #1a9bcb; } + .platform-android .bar .btn-link .icon { top: 2px; padding: 0; } + .platform-android .bar .btn-block { top: 4px; } + .platform-android .bar .segmented-control { top: 7px; } + .platform-android .bar .icon { padding-top: 13px; padding-bottom: 13px; } + .platform-android .bar .title .icon { padding: 0; } + .platform-android .bar .title .icon.icon-caret { top: 10px; color: #777; } + .platform-android .bar input[type="search"] { height: 35px; } + .platform-android .badge.badge-inverted { color: #999; background-color: transparent; } + .platform-android .badge-primary { color: #fff; background-color: #33b5e5; } + .platform-android .badge-primary.badge-inverted { color: #33b5e5; background-color: transparent; } + .platform-android .badge-positive { color: #fff; background-color: #9c0; } + .platform-android .badge-positive.badge-inverted { color: #9c0; background-color: transparent; } + .platform-android .badge-negative { color: #fff; background-color: #f44; } + .platform-android .badge-negative.badge-inverted { color: #f44; background-color: transparent; } + .platform-android .card { background-color: transparent; border-color: #d9d9d9; border-radius: 2px; } + .platform-android .table-view { background-color: transparent; } + .platform-android .table-view .table-view-cell { border-bottom: 1px solid #d9d9d9; } + .platform-android .table-view .table-view-cell:last-child { background-image: none; } + .platform-android .table-view .table-view-cell > a:not(.btn):active { color: inherit; background-color: #e0e0e0; } + .platform-android .table-view .table-view-cell > a:not(.btn):active .icon { color: #fff; } + .platform-android .table-view .table-view-divider { padding-top: 25px; font-size: 12px; @@ -1697,6 +1895,7 @@ hr { border-top: 0; border-bottom: 2px solid #a9a9a9; } + .platform-android .table-view-cell .navigate-left > .btn, .platform-android .table-view-cell .navigate-left > .badge, .platform-android .table-view-cell .navigate-left > .toggle, @@ -1723,6 +1922,7 @@ hr { .platform-android .table-view-cell > a .push-right > .toggle { right: 15px; } + .platform-android select, .platform-android textarea, .platform-android input[type="text"], @@ -1746,39 +1946,48 @@ hr { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1); box-shadow: 0 1px 1px rgba(0, 0, 0, .1); } + .platform-android input[type="search"] { border-radius: 2px; } + .platform-android select, .platform-android textarea, .platform-android .input-group { height: auto; } + .platform-android .input-group { padding: 0; border: 0; } + .platform-android .input-group input { border: 0; border-bottom: 1px solid #d9d9d9; -webkit-box-shadow: none; box-shadow: none; } + .platform-android .input-group input:last-child { background-image: none; } + .platform-android .input-row { height: 40px; border-bottom: 1px solid #d9d9d9; } + .platform-android .input-row label { padding-top: 10px; padding-bottom: 10px; } + .platform-android .input-row label + input { background-image: none; border-bottom: 0; } + .platform-android .segmented-control { font-size: 14px; background-color: #cecece; @@ -1787,6 +1996,7 @@ hr { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); } + .platform-android .segmented-control .control-item { padding-top: 10px; padding-bottom: 10px; @@ -1795,45 +2005,57 @@ hr { -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, .2), inset 0 1px 0 rgba(255, 255, 255, .2); } + .platform-android .segmented-control .control-item:first-child { border-left-width: 0; } + .platform-android .segmented-control .control-item:active, .platform-android .segmented-control .control-item.active { background-color: #999; } + .platform-android .segmented-control-primary { border: 0; } + .platform-android .segmented-control-primary .control-item { color: #fff; border-color: inherit; } + .platform-android .segmented-control-primary .control-item:active, .platform-android .segmented-control-primary .control-item.active { color: #fff; background-color: #33b5e5; } + .platform-android .segmented-control-positive { border: 0; } + .platform-android .segmented-control-positive .control-item { color: #fff; border-color: inherit; } + .platform-android .segmented-control-positive .control-item:active, .platform-android .segmented-control-positive .control-item.active { color: #fff; background-color: #9c0; } + .platform-android .segmented-control-negative { border: 0; } + .platform-android .segmented-control-negative .control-item { color: #fff; border-color: inherit; } + .platform-android .segmented-control-negative .control-item:active, .platform-android .segmented-control-negative .control-item.active { color: #fff; background-color: #f44; } + .platform-android .popover { top: 47px; left: 15px; @@ -1851,27 +2073,34 @@ hr { -o-transform: scale(.75); transform: scale(.75); } + .platform-android .popover:before { display: none; } + .platform-android .popover.visible { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } + .platform-android .backdrop { background-color: transparent; } + .platform-android .popover .bar { border-radius: 0; } + .platform-android .popover .bar-nav ~ .table-view { padding-top: 50px; } + .platform-android .popover .table-view { border-radius: 12px; } + .platform-android .toggle { width: 104px; height: 28px; @@ -1879,6 +2108,7 @@ hr { border: 2px solid #d7d7d7; border-radius: 0; } + .platform-android .toggle .toggle-handle { top: 0; left: 0; @@ -1890,6 +2120,7 @@ hr { -webkit-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, .3), inset 0 -1px 0 rgba(0, 0, 0, .1); } + .platform-android .toggle:before { top: 1px; right: auto; @@ -1897,10 +2128,12 @@ hr { z-index: 3; color: #fff; } + .platform-android .toggle.active { background-color: #d7d7d7; border: 2px solid #d7d7d7; } + .platform-android .toggle.active .toggle-handle { margin-right: 2px; background-color: #33b5e5; @@ -1909,71 +2142,89 @@ hr { -ms-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } + .platform-android .toggle.active:before { right: 14px; left: auto; color: #fff; } + .platform-android .navigate-left:after, .platform-android .push-left:after { content: ''; } + .platform-android .navigate-right:after, .platform-android .push-right:after { content: ''; } + .platform-android .icon-caret:before { content: '\e800'; } + .platform-android .icon-down:before, .platform-android .icon-down-nav:before { content: '\e801'; } + .platform-android .icon-download:before { content: '\e802'; } + .platform-android .icon-left:before, .platform-android .icon-left-nav:before { content: '\e803'; } + .platform-android .icon-more-vertical:before { content: '\e804'; } + .platform-android .icon-more:before { content: '\e805'; } + .platform-android .icon-right:before, .platform-android .icon-right-nav:before { content: '\e806'; } + .platform-android .icon-search:before { content: '\e807'; } + .platform-android .icon-share:before { content: '\e808'; } + .platform-android .icon-up:before, .platform-android .icon-up-nav:before { content: '\e809'; } + .platform-android .device { font-family: 'Roboto', sans-serif; background-position: -790px 0; } + .platform-android .device .device-content { font-size: 18px; line-height: 22px; background-color: #f2f2f2; } + .platform-android .device .content { top: 50px; } + .platform-android .device .popover { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } + .platform-android .bar ~ .content { padding: 0; } @@ -1986,6 +2237,7 @@ hr { opacity: 1; } } + .bs-callout { padding: 20px; margin: 20px 0; diff --git a/docs/dist/css/ratchet-theme-android.css b/docs/dist/css/ratchet-theme-android.css index a6f2228..0866e71 100644 --- a/docs/dist/css/ratchet-theme-android.css +++ b/docs/dist/css/ratchet-theme-android.css @@ -18,6 +18,7 @@ body { a { color: #33b5e5; } + a:active { color: #1a9bcb; } @@ -57,6 +58,7 @@ a:active { -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, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25); } + .btn:active, .btn.active { color: #222; background-color: #999; @@ -70,6 +72,7 @@ a:active { background-color: #33b5e5; border: 0; } + .btn-primary:active, .btn-primary.active { color: #fff; background-color: #1a9bcb; @@ -81,6 +84,7 @@ a:active { background-color: #9c0; border: 0; } + .btn-positive:active, .btn-positive.active { color: #fff; background-color: #739900; @@ -92,6 +96,7 @@ a:active { background-color: #f44; border: 0; } + .btn-negative:active, .btn-negative.active { color: #fff; background-color: #f11; @@ -104,36 +109,44 @@ a:active { -webkit-box-shadow: none; box-shadow: none; } + .btn-outlined.btn-primary { color: #33b5e5; border: 1px solid #33b5e5; } + .btn-outlined.btn-primary:active { background-color: #33b5e5; border: 1px solid #33b5e5; } + .btn-outlined.btn-positive { color: #9c0; border: 1px solid #9c0; } + .btn-outlined.btn-positive:active { background-color: #9c0; border: 1px solid #9c0; } + .btn-outlined.btn-negative { color: #f44; border: 1px solid #f44; } + .btn-outlined.btn-negative:active { background-color: #f44; border: 1px solid #f44; } + .btn-outlined:active { background-color: #999; border: 1px solid #999; -webkit-box-shadow: none; box-shadow: none; } + .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color: #fff; -webkit-box-shadow: none; @@ -147,6 +160,7 @@ a:active { -webkit-box-shadow: none; box-shadow: none; } + .btn-link:active, .btn-link.active { color: #1a9bcb; background-color: transparent; @@ -162,9 +176,11 @@ a:active { .btn .badge { background-color: rgba(0, 0, 0, .15); } + .btn .badge.badge-inverted { background-color: transparent; } + .btn:active .badge { color: #fff; } @@ -176,15 +192,19 @@ a:active { -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, .07); } + .bar.bar-header-secondary { top: 50px; } + .bar.bar-footer-secondary { bottom: 50px; } + .bar.bar-footer-secondary-tab { bottom: 50px; } + .bar .bar-footer, .bar .bar-footer-secondary, .bar .bar-footer-secondary-tab { @@ -200,18 +220,22 @@ a:active { height: 50px; border-top: 0; } + .bar-tab .tab-item { color: #929292; } + .bar-tab .tab-item.active { color: #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5; } + .bar-tab .tab-item:active { color: #929292; background-color: #78c6e3; } + .bar-tab .tab-item .icon { top: 3px; padding-top: 0; @@ -231,6 +255,7 @@ a:active { padding-top: 10px; padding-bottom: 10px; } + .bar .btn-link { top: 0; padding: 0; @@ -238,13 +263,16 @@ a:active { line-height: 49px; color: #33b5e5; } + .bar .btn-link:active, .bar .btn-link.active { color: #1a9bcb; } + .bar .btn-link .icon { top: 2px; padding: 0; } + .bar .btn-block { top: 4px; } @@ -257,9 +285,11 @@ a:active { padding-top: 13px; padding-bottom: 13px; } + .bar .title .icon { padding: 0; } + .bar .title .icon.icon-caret { top: 10px; color: #777; @@ -278,6 +308,7 @@ a:active { color: #fff; background-color: #33b5e5; } + .badge-primary.badge-inverted { color: #33b5e5; background-color: transparent; @@ -287,6 +318,7 @@ a:active { color: #fff; background-color: #9c0; } + .badge-positive.badge-inverted { color: #9c0; background-color: transparent; @@ -296,6 +328,7 @@ a:active { color: #fff; background-color: #f44; } + .badge-negative.badge-inverted { color: #f44; background-color: transparent; @@ -310,19 +343,24 @@ a:active { .table-view { background-color: transparent; } + .table-view .table-view-cell { border-bottom: 1px solid #d9d9d9; } + .table-view .table-view-cell:last-child { background-image: none; } + .table-view .table-view-cell > a:not(.btn):active { color: inherit; background-color: #e0e0e0; } + .table-view .table-view-cell > a:not(.btn):active .icon { color: #fff; } + .table-view .table-view-divider { padding-top: 25px; font-size: 12px; @@ -433,6 +471,7 @@ textarea, -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); } + .segmented-control .control-item { padding-top: 10px; padding-bottom: 10px; @@ -441,9 +480,11 @@ textarea, -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, .2), inset 0 1px 0 rgba(255, 255, 255, .2); } + .segmented-control .control-item:first-child { border-left-width: 0; } + .segmented-control .control-item:active, .segmented-control .control-item.active { background-color: #999; } @@ -451,10 +492,12 @@ textarea, .segmented-control-primary { border: 0; } + .segmented-control-primary .control-item { color: #fff; border-color: inherit; } + .segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active { color: #fff; background-color: #33b5e5; @@ -463,10 +506,12 @@ textarea, .segmented-control-positive { border: 0; } + .segmented-control-positive .control-item { color: #fff; border-color: inherit; } + .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { color: #fff; background-color: #9c0; @@ -475,10 +520,12 @@ textarea, .segmented-control-negative { border: 0; } + .segmented-control-negative .control-item { color: #fff; border-color: inherit; } + .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { color: #fff; background-color: #f44; @@ -500,9 +547,11 @@ textarea, -o-transform: scale(.75); transform: scale(.75); } + .popover:before { display: none; } + .popover.visible { -webkit-transform: scale(1); -o-transform: scale(1); @@ -516,6 +565,7 @@ textarea, .popover .bar { border-radius: 0; } + .popover .bar-nav ~ .table-view { padding-top: 50px; } @@ -531,6 +581,7 @@ textarea, border: 2px solid #d7d7d7; border-radius: 0; } + .toggle .toggle-handle { top: 0; left: 0; @@ -542,6 +593,7 @@ textarea, -webkit-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, .3), inset 0 -1px 0 rgba(0, 0, 0, .1); } + .toggle:before { top: 1px; right: auto; @@ -549,10 +601,12 @@ textarea, z-index: 3; color: #fff; } + .toggle.active { background-color: #d7d7d7; border: 2px solid #d7d7d7; } + .toggle.active .toggle-handle { margin-right: 2px; background-color: #33b5e5; @@ -560,6 +614,7 @@ textarea, -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } + .toggle.active:before { right: 14px; left: auto; diff --git a/docs/dist/css/ratchet-theme-ios.css b/docs/dist/css/ratchet-theme-ios.css index bf2260d..99b86ce 100644 --- a/docs/dist/css/ratchet-theme-ios.css +++ b/docs/dist/css/ratchet-theme-ios.css @@ -11,6 +11,7 @@ a { color: #007aff; } + a:active { color: #0062cc; } @@ -42,6 +43,7 @@ p { -webkit-transition-duration: .2s; transition-duration: .2s; } + .btn:active, .btn.active { color: #fff; background-color: #929292; @@ -52,6 +54,7 @@ p { background-color: #007aff; border: 1px solid #007aff; } + .btn-primary:active, .btn-primary.active { background-color: #0062cc; border: 1px solid #0062cc; @@ -62,6 +65,7 @@ p { background-color: #4cd964; border: 1px solid #4cd964; } + .btn-positive:active, .btn-positive.active { background-color: #2ac845; border: 1px solid #2ac845; @@ -72,6 +76,7 @@ p { background-color: #dd524d; border: 1px solid #dd524d; } + .btn-negative:active, .btn-negative.active { background-color: #cf2d28; border: 1px solid #cf2d28; @@ -80,15 +85,19 @@ p { .btn-outlined { background-color: transparent; } + .btn-outlined.btn-primary { color: #007aff; } + .btn-outlined.btn-positive { color: #4cd964; } + .btn-outlined.btn-negative { color: #dd524d; } + .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color: #fff; } @@ -98,6 +107,7 @@ p { background-color: transparent; border: none; } + .btn-link:active, .btn-link.active { color: #0062cc; background-color: transparent; @@ -106,9 +116,11 @@ p { .btn .badge { background-color: rgba(0, 0, 0, .15); } + .btn .badge.badge-inverted { background-color: transparent; } + .btn:active .badge { color: #fff; } @@ -118,15 +130,19 @@ p { border-bottom: 0; box-shadow: 0 0 1px rgba(0, 0, 0, .85); } + .bar.bar-header-secondary { top: 44px; } + .bar.bar-footer-secondary { bottom: 44px; } + .bar.bar-footer-secondary-tab { bottom: 50px; } + .bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab { border-top: 0; } @@ -138,6 +154,7 @@ p { .tab-item { color: #929292; } + .tab-item.active, .tab-item:active { color: #007aff; } @@ -145,6 +162,7 @@ p { .bar-nav .btn-link { color: #007aff; } + .bar-nav .btn-link:active { color: #007aff; opacity: .6; @@ -159,6 +177,7 @@ p { color: #fff; background-color: #007aff; } + .badge-primary.badge-inverted { color: #007aff; background-color: transparent; @@ -168,6 +187,7 @@ p { color: #fff; background-color: #4cd964; } + .badge-positive.badge-inverted { color: #4cd964; background-color: transparent; @@ -177,6 +197,7 @@ p { color: #fff; background-color: #dd524d; } + .badge-negative.badge-inverted { color: #dd524d; background-color: transparent; @@ -197,18 +218,22 @@ p { border-top: 0; border-bottom: 0; } + .table-view .table-view-cell { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 15px 100%; border-bottom: 0; } + .table-view .table-view-cell:last-child { background-image: none; } + .table-view .table-view-cell > a:not(.btn):active { color: inherit; } + .table-view .table-view-divider { background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; @@ -292,15 +317,18 @@ textarea, background-color: transparent; border: 1px solid #929292; } + .segmented-control .control-item { color: #929292; border-color: #929292; -webkit-transition: background-color .1s linear; transition: background-color .1s linear; } + .segmented-control .control-item:active { background-color: #ebebeb; } + .segmented-control .control-item.active { color: #fff; background-color: #929292; @@ -309,13 +337,16 @@ textarea, .segmented-control-primary { border: 1px solid #007aff; } + .segmented-control-primary .control-item { color: #007aff; border-color: inherit; } + .segmented-control-primary .control-item:active { background-color: #b3d7ff; } + .segmented-control-primary .control-item.active { color: #fff; background-color: #007aff; @@ -324,13 +355,16 @@ textarea, .segmented-control-positive { border: 1px solid #4cd964; } + .segmented-control-positive .control-item { color: #4cd964; border-color: inherit; } + .segmented-control-positive .control-item:active { background-color: #dff8e4; } + .segmented-control-positive .control-item.active { color: #fff; background-color: #4cd964; @@ -339,13 +373,16 @@ textarea, .segmented-control-negative { border: 1px solid #dd524d; } + .segmented-control-negative .control-item { color: #dd524d; border-color: inherit; } + .segmented-control-negative .control-item:active { background-color: #fae4e3; } + .segmented-control-negative .control-item.active { color: #fff; background-color: #dd524d; @@ -356,6 +393,7 @@ textarea, -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; } + .popover:before { border-bottom: 15px solid rgba(247, 247, 247, .98); } @@ -377,6 +415,7 @@ textarea, -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); } + .modal.active { -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); @@ -391,24 +430,29 @@ textarea, -webkit-transition-property: box-shadow, border; transition-property: box-shadow, border; } + .toggle .toggle-handle { border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 3px 3px rgba(0, 0, 0, .08); -webkit-transition-property: -webkit-transform, border, width; transition-property: transform, border, width; } + .toggle:before { display: none; } + .toggle.active { background-color: transparent; border: 2px solid #4cd964; box-shadow: inset 0 0 0 13px #4cd964; } + .toggle.active .toggle-handle { -webkit-transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0); } + .toggle.active .toggle-handle { border-color: #4cd964; } @@ -417,20 +461,24 @@ textarea, -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } + .content.sliding { -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1); } + .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { -webkit-animation-name: fadeOverlay; animation-name: fadeOverlay; -webkit-animation-duration: .4s; animation-duration: .4s; } + .content.sliding.right:not([class*="sliding-in"]) { -webkit-animation-direction: reverse; animation-direction: reverse; } + .content.sliding.left { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); diff --git a/docs/dist/css/ratchet.css b/docs/dist/css/ratchet.css index 410ba41..104c372 100644 --- a/docs/dist/css/ratchet.css +++ b/docs/dist/css/ratchet.css @@ -257,6 +257,7 @@ a { -webkit-tap-highlight-color: transparent; } + a:active { color: #3071a9; } @@ -322,6 +323,7 @@ a:active { display: table; content: " "; } + .clearfix:after { clear: both; } @@ -382,10 +384,12 @@ p { border: 1px solid #ccc; border-radius: 3px; } + .btn:active, .btn.active { color: inherit; background-color: #ccc; } + .btn:disabled, .btn.disabled { opacity: .6; } @@ -395,6 +399,7 @@ p { background-color: #428bca; border: 1px solid #428bca; } + .btn-primary:active, .btn-primary.active { color: #fff; background-color: #3071a9; @@ -406,6 +411,7 @@ p { background-color: #5cb85c; border: 1px solid #5cb85c; } + .btn-positive:active, .btn-positive.active { color: #fff; background-color: #449d44; @@ -417,6 +423,7 @@ p { background-color: #d9534f; border: 1px solid #d9534f; } + .btn-negative:active, .btn-negative.active { color: #fff; background-color: #c9302c; @@ -426,15 +433,19 @@ p { .btn-outlined { background-color: transparent; } + .btn-outlined.btn-primary { color: #428bca; } + .btn-outlined.btn-positive { color: #5cb85c; } + .btn-outlined.btn-negative { color: #d9534f; } + .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { color: #fff; } @@ -446,6 +457,7 @@ p { background-color: transparent; border: 0; } + .btn-link:active, .btn-link.active { color: #3071a9; background-color: transparent; @@ -562,6 +574,7 @@ input[type="button"] { border-top: 1px solid #ddd; border-bottom: 0; } + .bar-tab .tab-item { position: relative; display: table-cell; @@ -571,15 +584,18 @@ input[type="button"] { text-align: center; vertical-align: middle; } + .bar-tab .tab-item.active, .bar-tab .tab-item:active { color: #428bca; } + .bar-tab .tab-item .badge { position: absolute; top: 3px; left: 50%; vertical-align: top; } + .bar-tab .tab-item .icon { top: 3px; width: 24px; @@ -587,6 +603,7 @@ input[type="button"] { padding-top: 0; padding-bottom: 0; } + .bar-tab .tab-item .icon ~ .tab-label { display: block; font-size: 11px; @@ -600,9 +617,11 @@ input[type="button"] { margin-top: 0; font-weight: 400; } + .bar .btn.pull-right { margin-left: 10px; } + .bar .btn.pull-left { margin-right: 10px; } @@ -615,6 +634,7 @@ input[type="button"] { color: #428bca; border: 0; } + .bar .btn-link:active, .bar .btn-link.active { color: #3071a9; } @@ -629,12 +649,15 @@ input[type="button"] { .bar .btn-nav.pull-left { margin-left: -5px; } + .bar .btn-nav.pull-left .icon-left-nav { margin-right: -3px; } + .bar .btn-nav.pull-right { margin-right: -5px; } + .bar .btn-nav.pull-right .icon-right-nav { margin-left: -3px; } @@ -646,13 +669,16 @@ input[type="button"] { padding-bottom: 10px; font-size: 24px; } + .bar .btn .icon { top: 3px; padding: 0; } + .bar .title .icon { padding: 0; } + .bar .title .icon.icon-caret { top: 4px; margin-left: -5px; @@ -677,6 +703,7 @@ input[type="button"] { background-color: rgba(0, 0, 0, .15); border-radius: 100px; } + .badge.badge-inverted { padding: 0 5px 0 0; background-color: transparent; @@ -686,6 +713,7 @@ input[type="button"] { color: #fff; background-color: #428bca; } + .badge-primary.badge-inverted { color: #428bca; } @@ -694,6 +722,7 @@ input[type="button"] { color: #fff; background-color: #5cb85c; } + .badge-positive.badge-inverted { color: #5cb85c; } @@ -702,6 +731,7 @@ input[type="button"] { color: #fff; background-color: #d9534f; } + .badge-negative.badge-inverted { color: #d9534f; } @@ -719,11 +749,13 @@ input[type="button"] { border-top: 0; border-bottom: 0; } + .card .table-view .table-view-divider:first-child { top: 0; border-top-left-radius: 6px; border-top-right-radius: 6px; } + .card .table-view .table-view-divider:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; @@ -749,9 +781,11 @@ input[type="button"] { overflow: hidden; border-bottom: 1px solid #ddd; } + .table-view-cell:last-child { border-bottom: 0; } + .table-view-cell > a:not(.btn) { position: relative; display: block; @@ -760,9 +794,11 @@ input[type="button"] { overflow: hidden; color: inherit; } + .table-view-cell > a:not(.btn):active { background-color: #eee; } + .table-view-cell p { margin-bottom: 0; } @@ -788,6 +824,7 @@ input[type="button"] { .table-view .media-object.pull-left { margin-right: 10px; } + .table-view .media-object.pull-right { margin-left: 10px; } @@ -806,6 +843,7 @@ input[type="button"] { -o-transform: translateY(-50%); transform: translateY(-50%); } + .table-view-cell .navigate-left > .btn, .table-view-cell .navigate-left > .badge, .table-view-cell .navigate-left > .toggle, @@ -946,6 +984,7 @@ select { border: 1px solid #ccc; border-radius: 3px; } + .segmented-control .control-item { display: table-cell; width: 1%; @@ -959,12 +998,15 @@ select { white-space: nowrap; border-left: 1px solid #ccc; } + .segmented-control .control-item:first-child { border-left-width: 0; } + .segmented-control .control-item:active { background-color: #eee; } + .segmented-control .control-item.active { background-color: #ccc; } @@ -972,13 +1014,16 @@ select { .segmented-control-primary { border-color: #428bca; } + .segmented-control-primary .control-item { color: #428bca; border-color: inherit; } + .segmented-control-primary .control-item:active { background-color: #cde1f1; } + .segmented-control-primary .control-item.active { color: #fff; background-color: #428bca; @@ -987,13 +1032,16 @@ select { .segmented-control-positive { border-color: #5cb85c; } + .segmented-control-positive .control-item { color: #5cb85c; border-color: inherit; } + .segmented-control-positive .control-item:active { background-color: #d8eed8; } + .segmented-control-positive .control-item.active { color: #fff; background-color: #5cb85c; @@ -1002,13 +1050,16 @@ select { .segmented-control-negative { border-color: #d9534f; } + .segmented-control-negative .control-item { color: #d9534f; border-color: inherit; } + .segmented-control-negative .control-item:active { background-color: #f9e2e2; } + .segmented-control-negative .control-item.active { color: #fff; background-color: #d9534f; @@ -1017,6 +1068,7 @@ select { .control-content { display: none; } + .control-content.active { display: block; } @@ -1041,6 +1093,7 @@ select { -ms-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } + .popover:before { position: absolute; top: -15px; @@ -1053,12 +1106,14 @@ select { border-bottom: 15px solid #fff; border-left: 15px solid transparent; } + .popover.visible { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } + .popover .bar ~ .table-view { padding-top: 44px; } @@ -1076,6 +1131,7 @@ select { .popover .btn-block { margin-bottom: 5px; } + .popover .btn-block:last-child { margin-bottom: 0; } @@ -1115,6 +1171,7 @@ select { -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } + .modal.active { height: 100%; opacity: 1; @@ -1134,6 +1191,7 @@ select { overflow: hidden; background-color: #000; } + .slider .slide-group { position: relative; font-size: 0; @@ -1142,6 +1200,7 @@ select { -o-transition: all 0s linear; transition: all 0s linear; } + .slider .slide-group .slide { display: inline-block; width: 100%; @@ -1165,6 +1224,7 @@ select { -o-transition-property: background-color, border; transition-property: background-color, border; } + .toggle .toggle-handle { position: absolute; top: -1px; @@ -1182,6 +1242,7 @@ select { -o-transition-property: -o-transform, border, width; transition-property: transform, border, width; } + .toggle:before { position: absolute; top: 3px; @@ -1191,22 +1252,26 @@ select { text-transform: uppercase; content: "Off"; } + .toggle.active { background-color: #5cb85c; border: 2px solid #5cb85c; } + .toggle.active .toggle-handle { border-color: #5cb85c; -webkit-transform: translate3d(44px, 0, 0); -ms-transform: translate3d(44px, 0, 0); transform: translate3d(44px, 0, 0); } + .toggle.active:before { right: auto; left: 15px; color: #fff; content: "On"; } + .toggle input[type="checkbox"] { display: none; } @@ -1218,9 +1283,11 @@ select { -o-transition: opacity .4s; transition: opacity .4s; } + .content.fade.in { opacity: 1; } + .content.sliding { z-index: 2; -webkit-transition: -webkit-transform .4s; @@ -1230,12 +1297,14 @@ select { -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } + .content.sliding.left { z-index: 1; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } + .content.sliding.right { z-index: 3; -webkit-transform: translate3d(100%, 0, 0); @@ -1283,6 +1352,7 @@ select { 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"); } + .icon { display: inline-block; font-family: Ratchicons; -- cgit v1.2.3