/*! * ===================================================== * Ratchet v2.0.2 (http://goratchet.com) * Copyright 2016 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * * v2.0.2 designed by @connors. * ===================================================== */ html, body { width: 100%; height: 100%; } body { position: relative !important; font: 400 14px/1.5 "Open Sans", sans-serif; color: #333; -webkit-text-size-adjust: 100%; background-color: #fff; -webkit-font-smoothing: antialiased; } .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; } .docs-header, .docs-sub-header { position: relative; background-color: #0a1855; background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #0a1855), color-stop(100%, #da0024)); background-image: -webkit-linear-gradient(45deg, #0a1855 0%, #da0024 100%); background-image: -o-linear-gradient(45deg, #0a1855 0%, #da0024 100%); background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a1855', endColorstr='#da0024', GradientType=1 ); } .docs-header { height: 100vh; min-height: 750px; } .docs-header .carbonad { position: relative !important; margin-top: 0 !important; -webkit-animation-name: fadeintext; -o-animation-name: fadeintext; animation-name: fadeintext; -webkit-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } .docs-header .version { margin-top: 15px; color: rgba(255, 255, 255, .5); text-align: center; } .docs-header-bottom { position: absolute; right: 0; bottom: 0; left: 0; } @media screen and (min-width: 768px) { .docs-header { min-height: 870px; } .docs-header .carbonad { left: 50% !important; width: 330px !important; margin-bottom: 60px !important; margin-left: -165px !important; } .docs-sub-header .carbonad { position: absolute !important; top: 50% !important; right: 15px !important; margin-top: 0 !important; -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -o-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } } .docs-masthead { position: relative; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .docs-title { position: absolute; left: 50%; z-index: 20; margin-bottom: 0; font-size: 22px; font-weight: 400; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .docs-nav .docs-nav-trigger { color: #fff; opacity: .7; } .docs-nav .docs-nav-trigger.active { opacity: 1; } .docs-nav .docs-nav-group { position: absolute; top: 40px; right: 0; left: 0; z-index: 20; height: 0; overflow: hidden; 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; font-size: 22px; } .docs-jump-menu, .docs-component-group { display: none; } .docs-title a, .docs-nav-item { color: #fff; -webkit-transition: opacity .2s linear; -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 { color: #fff; opacity: .5; } @media screen and (min-width: 768px) { .docs-title { position: static; float: left; font-weight: 300; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .docs-nav { float: right; } .docs-nav .docs-nav-trigger { display: none; } .docs-nav .docs-nav-group { position: static; display: block; height: auto; background-color: transparent; opacity: 1; } .docs-nav .docs-nav-item { position: relative; display: inline-block; padding: 0 15px; font-size: 14px; } .docs-jump-menu { position: absolute; left: 15px; display: block; color: #777; cursor: pointer; -webkit-transition: opacity .2 linear; -o-transition: opacity .2 linear; transition: opacity .2 linear; } .docs-jump-menu:hover { color: #428bca; } .docs-jump-menu:active { opacity: .5; } .docs-jump-menu .icon-list { margin-right: 3px; font-size: 16px; } .docs-jump-menu .icon-caret { position: relative; top: 4px; margin-left: -5px; } .docs-component-group { position: absolute; top: 35px; left: 15px; padding-top: 10px; padding-bottom: 10px; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .05); box-shadow: 0 0 8px rgba(0, 0, 0, .05); } .docs-component-group.active { display: block; } .docs-component-group:before, .docs-component-group:after { position: absolute; left: 30px; width: 0; height: 0; content: ''; } .docs-component-group:before { top: -11px; margin-left: -11px; border-right: 11px solid transparent; border-bottom: 11px solid rgba(0, 0, 0, .3); border-left: 11px solid transparent; } .docs-component-group:after { top: -10px; margin-left: -10px; border-right: 10px solid transparent; border-bottom: 10px solid #fff; border-left: 10px solid transparent; } .docs-component-group .docs-component-item { display: block; padding: 10px 20px; color: #777; } .docs-component-group .docs-component-item:hover { color: #fff; background-color: #428bca; } } .docs-header-content { position: relative; padding: 50px 10px; text-align: center; -webkit-animation-name: fadeintext; -o-animation-name: fadeintext; animation-name: fadeintext; -webkit-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } .docs-header-content .btn { display: block; padding: 15px 60px 16px; margin-bottom: 0; font-size: 18px; color: #0a1855; background-color: #fff; border: 0; -webkit-transition: all .2s linear; -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; } .docs-subtitle { max-width: 750px; margin: 0 auto 20px; font-size: 28px; font-weight: 300; line-height: 38px; color: #fff; } @media screen and (min-width: 768px) { .docs-header-content { top: 30%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .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; padding: 15px !important; font-size: 13px !important; line-height: 18px !important; background: transparent !important; border-top: 1px solid rgba(255, 255, 255, .1) !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; } .carbonad-img { margin: 0 !important; } .carbonad-text, .carbonad-tag { display: block !important; float: none !important; width: auto !important; height: auto !important; margin-left: 145px !important; font-family: "Open Sans", sans-serif !important; color: rgba(255, 255, 255, .65) !important; } .carbonad-text { padding-top: 0 !important; } .carbonad-tag { text-align: left !important; } .carbonad-text a, .carbonad-tag a { color: #fff !important; } .carbonad #azcarbon > img { display: none; } @media screen and (min-width: 768px) { .carbonad { width: 360px !important; border-right: 1px solid rgba(255, 255, 255, .1) !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; border-left: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 3px !important; } } .docs-sub-content { position: relative; padding: 55px 15px 65px; overflow: hidden; 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; opacity: .7; } @media screen and (min-width: 768px) { .docs-sub-content { margin-right: 380px; text-align: left; } } .docs-section { padding-top: 50px; padding-bottom: 50px; border-bottom: 1px solid #ddd; } .docs-section:last-child { border-bottom: 0; } @media screen and (min-width: 768px) { .docs-module { margin-top: 35px; } } .docs-module { padding: 20px; margin-top: 20px; border: 1px solid #ddd; border-radius: 3px; } .docs-module .btn-block { margin-bottom: 0; } .version { margin-top: 10px; margin-bottom: 0; font-size: 90%; color: #777; } .docs-footer { padding: 30px 20px; margin-top: 50px; font-size: 14px; color: #777; 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; } } .docs-footer-text { margin-top: 0; margin-bottom: 0; } @media screen and (min-width: 768px) { .docs-footer-text { width: 550px; padding-right: 0; padding-left: 0; margin: 0 auto; } } .docs-footer-links { padding-left: 0; } .docs-footer-links li { display: inline; padding-right: 3px; padding-left: 3px; } .docs-header .docs-footer { 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); } .github-btn { overflow: hidden; border: 0; } .docs-component-toolbar { position: fixed; top: 0; right: 0; bottom: auto; left: 0; z-index: 20; height: 44px; padding-top: 8px; padding-bottom: 8px; background-color: #fff; border-bottom: 1px solid #ddd; -webkit-transition: -webkit-transform .5s; -o-transition: -o-transform .5s; transition: transform .5s; -webkit-transform: translate3d(0, -55px, 0); -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; } .docs-examples { margin-top: 30px; } .example-wrap { margin-bottom: 30px; } .example-wrap .example { display: block; width: 100%; padding: 3px; overflow: hidden; border: 1px solid #ddd; border-radius: 3px; } .example-wrap .example-title { margin-top: 10px; } .example-wrap img { display: block; width: 100%; height: auto; } code { padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 90%; background-color: #f9f9f9; border-radius: 3px; } .component { padding: 50px 15px; margin-right: -15px; margin-left: -15px; border-bottom: 1px solid #ddd; } .component.no-border { border-bottom: 0; } @media screen and (min-width: 768px) { .component { border-bottom: 0; } } .component-title { margin-bottom: 10px; font-size: 24px; line-height: 34px; } .component-description { margin-bottom: 15px; font-size: 16px; } .component-example { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; line-height: 21px; } .component-example, .component-example .bar, .component-example .content { position: relative; } .component-example .bar { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .component-example .bar.bar-header-secondary { top: 0 !important; border-top: 0; } .component-example > .content-padded { margin: 15px; } .component-example > .card { margin: 15px 0 0; } .component-example > .card .control-content { padding: 15px; } .component-example > .btn, .component-example > .toggle { margin-bottom: 10px; } .component-example .slider { height: 300px; } .component-example .slider .slide { height: 300px; } .component-example .slide img { width: 100%; } .component-example .slide-text { position: absolute; top: 45%; left: 0; width: 100%; font-size: 24px; color: #fff; text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, .5); } .component-example-fullbleed, .highlight { margin-right: -15px; margin-left: -15px; } .bar-nav ~ .content { padding: 0; } .highlight pre { padding: 15px; margin-top: 15px; overflow-x: auto; font-size: 13px; color: #777; word-wrap: normal; white-space: pre; background-color: #fafafa; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .highlight pre code { padding: 0; } @media screen and (min-width: 768px) { .component, .component-example-fullbleed, .highlight { margin-right: 0; margin-left: 0; } .component { padding-right: 0; padding-left: 0; opacity: .3; -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } .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; height: 50px; margin: 3px; font-size: 24px; line-height: 50px; text-align: center; background-color: #fff; border: 1px solid #ddd; border-radius: 25px; } #modals .modal { left: 0; z-index: 50; } #push .component-example { height: 150px; overflow: hidden; } #buttonsInDevice .btn, #buttonsBadgesInDevice .btn, #buttonsWithIconsInDevice .btn { margin-top: 10px; margin-right: 100px; margin-left: 10px; } #blockButtonsInDevice .btn-block { width: 300px; margin: 10px auto; } #segmentedControlsInDevice .segmented-control { margin-top: 10px; margin-right: 10px; margin-left: 10px; } #segmentedControlsInDevice .card span { padding: 10px; } #badgesInDevice { text-align: center; } #badgesInDevice .badge { margin-top: 10px; } #formsInDevice form { margin: 10px; } #formsInDevice form.input-group { margin: 0; } #togglesInDevice .toggle { margin: 10px auto; } .toggle { cursor: pointer; } #popoversInDevice #iwindow:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 11; content: ''; background-color: rgba(0, 0, 0, .3); } @media screen and (min-width: 768px) { .popover { position: absolute; top: 72px; display: block; opacity: 1; } } #modalsInDevice #iwindow > .btn { margin: 10px; } @media screen and (min-width: 768px) { .slider .slide { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .slider .slide img { display: block; width: 100%; height: 570px; } .slider .slide-group .slide-text { position: absolute; top: 45%; left: 0; width: 100%; font-size: 24px; color: #fff; text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, .5); } } .device { display: none; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; line-height: 21px; } @media screen and (min-width: 768px) { .device { position: relative; top: 50px; display: block; width: 395px; height: 813px; margin-left: -20px; font-family: "Helvetica Neue", sans-serif; background-image: url("../img/device-sprite.png"); background-repeat: no-repeat; background-position: 0 0; -webkit-background-size: 300% 300%; background-size: 300%; -webkit-transition: background-image .1s linear; -o-transition: background-image .1s linear; transition: background-image .1s linear; } .device.device-fixed { position: fixed; right: auto; } .device .device-content { position: absolute; top: 117px; left: 37px; width: 321px; height: 569px; overflow: hidden; font-size: 17px; line-height: 21px; background-color: #fff; } .device .content, .device .bar, .device .modal { position: absolute; } .device .content { top: 44px; right: 0; bottom: 0; left: 0; } } @media screen and (min-width: 1200px) { .device { margin-left: 39px; } } hr { height: 0; margin: 10px 0 30px; clear: both; border: solid #ddd; border-width: 1px 0 0; } .column-group:before, .column-group:after { display: table; content: " "; } .column-group:after { clear: both; } .container { position: relative; padding-right: 0; padding-left: 0; margin-right: auto; margin-left: auto; } .column-group { width: auto; } .column { float: left; width: 100%; padding-right: 15px; padding-left: 15px; } .column.pull-right { float: right; } .column .column-group { margin-right: -15px; margin-left: -15px; } @media screen and (min-width: 768px) { .container { 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); border: 1px solid #929292; -webkit-transition: all; -o-transition: all; transition: all; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: .2s; -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; background-position: 0 100%, 0 0; 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; background-position: 0 100%, 0 0; border-top: 0; border-bottom: 0; } .platform-ios select, .platform-ios textarea, .platform-ios input[type="text"], .platform-ios input[type="search"], .platform-ios input[type="password"], .platform-ios input[type="datetime"], .platform-ios input[type="datetime-local"], .platform-ios input[type="date"], .platform-ios input[type="month"], .platform-ios input[type="time"], .platform-ios input[type="week"], .platform-ios input[type="number"], .platform-ios input[type="email"], .platform-ios input[type="url"], .platform-ios input[type="tel"], .platform-ios input[type="color"], .platform-ios .input-group { height: 40px; padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); } .platform-ios input[type="search"] { height: 34px; text-align: center; background-color: rgba(0, 0, 0, .1); 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,"); background-repeat: no-repeat; 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; -webkit-transition: background-color .1s linear; -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; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1; -webkit-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; -webkit-transition-property: -webkit-box-shadow, border; -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); box-shadow: 0 3px 3px rgba(0, 0, 0, .08); -webkit-transition-property: -webkit-transform, border, width; -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; animation-name: fadeOverlay; -webkit-animation-duration: .4s; -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; box-shadow: 0 0 10px transparent, -320px 0 0 transparent; } to { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1); box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1); } } .platform-ios .device { background-position: -395px 0; } .platform-ios .device .device-content { background-color: #efeff4; } .platform-android body { font-family: "Roboto", sans-serif; font-size: 18px; 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; color: #222; background-color: #cecece; border: 0; border-radius: 2px; -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; border: 0; -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; border: none; -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; border-bottom: 1px solid #b1b1b1; -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 { border-top: 1px solid #b1b1b1; border-bottom: 0; -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; font-size: 18px; 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; font-size: 18px; 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; font-weight: bold; text-transform: uppercase; background-color: transparent; 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, .platform-android .table-view-cell .navigate-right > .btn, .platform-android .table-view-cell .navigate-right > .badge, .platform-android .table-view-cell .navigate-right > .toggle, .platform-android .table-view-cell .push-left > .btn, .platform-android .table-view-cell .push-left > .badge, .platform-android .table-view-cell .push-left > .toggle, .platform-android .table-view-cell .push-right > .btn, .platform-android .table-view-cell .push-right > .badge, .platform-android .table-view-cell .push-right > .toggle, .platform-android .table-view-cell > a .navigate-left > .btn, .platform-android .table-view-cell > a .navigate-left > .badge, .platform-android .table-view-cell > a .navigate-left > .toggle, .platform-android .table-view-cell > a .navigate-right > .btn, .platform-android .table-view-cell > a .navigate-right > .badge, .platform-android .table-view-cell > a .navigate-right > .toggle, .platform-android .table-view-cell > a .push-left > .btn, .platform-android .table-view-cell > a .push-left > .badge, .platform-android .table-view-cell > a .push-left > .toggle, .platform-android .table-view-cell > a .push-right > .btn, .platform-android .table-view-cell > a .push-right > .badge, .platform-android .table-view-cell > a .push-right > .toggle { right: 15px; } .platform-android select, .platform-android textarea, .platform-android input[type="text"], .platform-android input[type="search"], .platform-android input[type="password"], .platform-android input[type="datetime"], .platform-android input[type="datetime-local"], .platform-android input[type="date"], .platform-android input[type="month"], .platform-android input[type="time"], .platform-android input[type="week"], .platform-android input[type="number"], .platform-android input[type="email"], .platform-android input[type="url"], .platform-android input[type="tel"], .platform-android input[type="color"], .platform-android .input-group { height: 40px; padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); -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; border: 0; border-radius: 2px; -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; color: #222; border-left: 1px solid #999; -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; width: 200px; margin-left: 0; border: 1px solid #9b9b9b; border-radius: 0; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2); box-shadow: 0 0 3px rgba(0, 0, 0, .2); -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; -o-transition: -o-transform .1s ease-in-out, opacity .2s ease-in-out; transition: transform .1s ease-in-out, opacity .2s ease-in-out; -webkit-transform: scale(.75); -ms-transform: scale(.75); -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; background-color: #d7d7d7; border: 2px solid #d7d7d7; border-radius: 0; } .platform-android .toggle .toggle-handle { top: 0; left: 0; width: 50px; height: 24px; background-color: #bebebe; border: 1px solid #b5b5b5; border-radius: 2px; -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; left: 11px; 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; border-color: #33b5e5; -webkit-transform: translate3d(50px, 0, 0); -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; } @-webkit-keyframes fadeintext { 0% { opacity: 0; } 100% { opacity: 1; } } .bs-callout { padding: 20px; margin: 20px 0; border-left: 3px solid #eee; } .bs-callout h4 { margin-top: 0; margin-bottom: 5px; } .bs-callout p:last-child { margin-bottom: 0; } .bs-callout code { background-color: #fff; border-radius: 3px; } .bs-callout-danger { background-color: #fdf7f7; border-color: #d9534f; } .bs-callout-danger h4 { color: #d9534f; } .bs-callout-warning { background-color: #fcf8f2; border-color: #f0ad4e; } .bs-callout-warning h4 { color: #f0ad4e; } .bs-callout-info { background-color: #f4f8fa; border-color: #5bc0de; } .bs-callout-info h4 { color: #5bc0de; } .list-group { padding-left: 0; margin-bottom: 20px; } .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .list-group .team-member { font-size: 14px; line-height: 32px; color: #555; } .list-group img { float: left; width: 32px; margin-right: 10px; border-radius: 4px; } .list-group .team-member-info { overflow: hidden; } .list-group .github-btn { float: right; width: 121px; height: 20px; margin-top: 6px; } .browser-support-table td, .browser-support-table th { padding: 5px; border: 1px solid #ddd; } .browser-support-maybe { color: #fff; background-color: #f0ad4e; } .browser-support-yes { background-color: #9c0; } .browser-support-no { background-color: #f44; }