/* * ===================================================== * Ratchet v2.0.0 * Copyright 2013 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); } .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; } 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; } [class*="button"] { border: 1px solid #929292; color: #929292; background-color: transparent; -webkit-transition: background-color, opacity, color; transition: background-color, opacity, color; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } [class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { color: #fff; background-color: #929292; } .button-primary { color: #007aff; border: 1px solid #007aff; } .button-primary:active, .button-primary.active, .button-primary.button-filled { background-color: #007aff; } .button-positive { color: #4cd964; border: 1px solid #4cd964; } .button-positive:active, .button-positive.active, .button-positive.button-filled { background-color: #4cd964; } .button-negative { color: #dd524d; border: 1px solid #dd524d; } .button-negative:active, .button-negative.active, .button-negative.button-filled { background-color: #dd524d; } .button-link { color: #007aff; } .button-link:active, .button-link.active { color: #007aff; } .button-link:active, .button-link.active { color: #007aff; opacity: .3; } .bar-nav [class*="button"] { color: #007aff; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .bar-nav .button-prev:before, .bar-nav .button-prev:after, .bar-nav .button-next:before, .bar-nav .button-next:after { background-color: #007aff; } [class*="badge"] { color: #929292; } [class*="badge"].badge-filled { color: #929292; } .badge-primary { color: #007aff; } .badge-primary.badge-filled { color: #fff; background-color: #007aff; } .badge-positive { color: #4cd964; } .badge-positive.badge-filled { color: #fff; background-color: #4cd964; } .badge-negative { color: #dd524d; } .badge-negative.badge-filled { color: #fff; background-color: #dd524d; } .segmented-controller { background-color: transparent; border: 1px solid #007aff; } .segmented-controller li { border-left: 1px solid #007aff; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .segmented-controller li > a { color: #007aff; } .segmented-controller li.selected { background-color: #007aff; } .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 { 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: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: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); } }