/* * ===================================================== * Ratchet v2.0.0 * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton * Licensed under http://www.opensource.org/licenses/MIT * * Designed and built by @connors, @dhg, and @fat. * ===================================================== */ .content { background-color: #efeff4; } [class*="bar-"] { border-bottom: 0; background-color: rgba(247, 247, 247, 0.98); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); } [class*="bar-"].bar-header-secondary { top: 44px; } [class*="bar-"].bar-footer-secondary { bottom: 44px; } [class*="bar-"].bar-footer-secondary-tab { bottom: 50px; } .bar-tab { border-top: 0; -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); } .tab-item.active .tab-label, .tab-item.active .icon, .tab-item:active .tab-label, .tab-item:active .icon { color: #007aff; } .popover .bar-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .table-view .table-view-cell { border-bottom: 0; background-image: url("data:image/svg+xml;utf8,"); background-position: 15px 100%; background-repeat: no-repeat; } .table-view .table-view-cell:last-child { background-image: none; } .table-view .table-view-divider { border-top: 0; border-bottom: 0; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-position: 0 100%, 0 0%; background-repeat: no-repeat; } .popover .table-view { border-radius: 12px; } .card .table-view li:last-child { background-image: none; } select, textarea, input[type="text"], input[type=search], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="color"], .input-group { height: 40px; padding: 10px 15px; border: 1px solid rgba(0, 0, 0, 0.2); } input[type=search] { height: 34px; text-align: center; background-color: rgba(0, 0, 0, 0.1); border: 0; border-radius: 6px; } input[type=search]:focus { text-align: left; } select, textarea, .input-group { height: auto; } .input-group { padding: 0; } .input-group input { border: 0; background-image: url("data:image/svg+xml;utf8,"); background-position: 15px 100%; background-repeat: no-repeat; } .input-group input:last-child { background-image: none; } .input-row { border-bottom: 0; background-image: url("data:image/svg+xml;utf8,"); background-position: 15px 100%; background-repeat: no-repeat; } .input-row:last-child, .input-row label + input { background-image: none; } .btn { border: 1px solid #929292; color: #929292; background-color: rgba(247, 247, 247, 0.98); -webkit-transition: all; transition: all; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .btn:active, .btn.active { color: #fff; background-color: #929292; } .btn-primary { color: #fff; border: 1px solid #007aff; background-color: #007aff; } .btn-primary:active, .btn-primary.active { border: 1px solid #0062cc; background-color: #0062cc; } .btn-positive { color: #fff; border: 1px solid #4cd964; background-color: #4cd964; } .btn-positive:active, .btn-positive.active { border: 1px solid #2ac845; background-color: #2ac845; } .btn-negative { color: #fff; border: 1px solid #dd524d; background-color: #dd524d; } .btn-negative:active, .btn-negative.active { border: 1px solid #cf2d28; background-color: #cf2d28; } .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; } .btn-link { color: #007aff; background-color: transparent; border: none; } .btn-link:active, .btn-link.active { color: #0062cc; background-color: transparent; } .bar-nav .btn-link { color: #007aff; } .bar-nav .btn-link:active { color: #007aff; opacity: .6; } [class*="badge"].badge-inverted { color: #929292; } .badge-primary { color: #fff; background-color: #007aff; } .badge-primary.badge-inverted { color: #007aff; } .badge-positive { color: #fff; background-color: #4cd964; } .badge-positive.badge-inverted { color: #4cd964; } .badge-negative { color: #fff; background-color: #dd524d; } .badge-negative.badge-inverted { color: #dd524d; } .segmented-controller { color: #929292; background-color: transparent; border: 1px solid #929292; } .segmented-controller li { border-color: #929292; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .segmented-controller li:active { background-color: #ebebeb; } .segmented-controller li.selected { background-color: #929292; } .segmented-controller li.selected > a { color: #fff; } .segmented-controller-primary { border: 1px solid #007aff; } .segmented-controller-primary li { border-color: inherit; } .segmented-controller-primary li > a { color: #007aff; } .segmented-controller-primary li:active { background-color: #b3d7ff; } .segmented-controller-primary li.selected { background-color: #007aff; } .segmented-controller-primary li.selected > a { color: #fff; } .segmented-controller-positive { border: 1px solid #4cd964; } .segmented-controller-positive li { border-color: inherit; } .segmented-controller-positive li > a { color: #4cd964; } .segmented-controller-positive li:active { background-color: #dff8e3; } .segmented-controller-positive li.selected { background-color: #4cd964; } .segmented-controller-positive li.selected > a { color: #fff; } .segmented-controller-negative { border: 1px solid #dd524d; } .segmented-controller-negative li { border-color: inherit; } .segmented-controller-negative li > a { color: #dd524d; } .segmented-controller-negative li:active { background-color: #fae4e3; } .segmented-controller-negative li.selected { background-color: #dd524d; } .segmented-controller-negative li.selected > a { color: #fff; } .popover { border-radius: 12px; -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .popover:after { border-bottom: 15px solid rgba(247, 247, 247, 0.98); } .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); } .modal.active { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); } .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-property: box-shadow, border; transition-property: box-shadow, border; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .toggle .toggle-handle { border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); -webkit-transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width; } .toggle:before { display: none; } .toggle:active .toggle-handle { width: 35px; } .toggle.active { border: 2px solid #4cd964; background-color: transparent; -webkit-box-shadow: inset 0 0 0 13px #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:active .toggle-handle, .toggle.active .toggle-handle:active { -webkit-transform: translate3d(10px, 0, 0) !important; transform: translate3d(10px, 0, 0) !important; } .toggle.active .toggle-handle { border-color: #4cd964; } .content.fade { -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .content.slide { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); } .content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) { -webkit-animation-name: fadeOverlay; animation-name: fadeOverlay; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; } .content.slide.right:not([class*="sliding-in"]) { -webkit-animation-direction: reverse; animation-direction: reverse; } .content.slide.left { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } @-webkit-keyframes fadeOverlay { from { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); } to { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); } }