diff options
Diffstat (limited to 'dist')
-rw-r--r-- | dist/css/ratchet-theme-android.css | 55 | ||||
-rw-r--r-- | dist/css/ratchet-theme-ios.css | 48 | ||||
-rw-r--r-- | dist/css/ratchet.css | 70 |
3 files changed, 173 insertions, 0 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,<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-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,<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-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; |