/* * ===================================================== * Ratchet v2.0.0 * Copyright 2014 Connor Sears * Licensed under http://www.opensource.org/licenses/MIT * * Designed and built by @connors, @dhg, and @fat. * ===================================================== */ a { color: #007aff; } a:active { color: #0062cc; } .content { background-color: #efeff4; } .h5, h5, .h6, h6, p { color: #8f8f94; } .h5, h5, .h6, h6 { font-weight: normal; text-transform: uppercase; } .btn { border: 1px solid #929292; color: #929292; background-color: rgba(247, 247, 247, 0.98); -webkit-transition: all; -moz-transition: all; transition: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: linear; -moz-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; } .btn .badge { background-color: rgba(0, 0, 0, 0.15); } .btn .badge.badge-inverted { background-color: transparent; } .btn:active .badge { color: #fff; } .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); } .bar.bar-header-secondary { top: 44px; } .bar.bar-footer-secondary { bottom: 44px; } .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 { color: #929292; } .tab-item.active, .tab-item:active { color: #007aff; } .bar-nav .btn-link { color: #007aff; } .bar-nav .btn-link:active { color: #007aff; opacity: .6; } .badge.badge-inverted { color: #929292; background-color: transparent; } .badge-primary { color: #fff; background-color: #007aff; } .badge-primary.badge-inverted { color: #007aff; background-color: transparent; } .badge-positive { color: #fff; background-color: #4cd964; } .badge-positive.badge-inverted { color: #4cd964; background-color: transparent; } .badge-negative { color: #fff; background-color: #dd524d; } .badge-negative.badge-inverted { color: #dd524d; background-color: transparent; } .card .table-view { background-image: none; } .card .table-view-cell:last-child { background-image: none; } .table-view { 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; } .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; } 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; border: 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; } .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; } .segmented-control { background-color: transparent; border: 1px solid #929292; } .segmented-control .control-item { color: #929292; border-color: #929292; -webkit-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .segmented-control .control-item:active { background-color: #ebebeb; } .segmented-control .control-item.active { color: #fff; background-color: #929292; } .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; } .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: #dff8e3; } .segmented-control-positive .control-item.active { color: #fff; background-color: #4cd964; } .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; } .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; -moz-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:before { border-bottom: 15px solid rgba(247, 247, 247, 0.98); } .popover .bar { -webkit-box-shadow: none; box-shadow: none; } .popover .bar-nav { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .popover .table-view { border-radius: 12px; background-image: none; } .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-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); -moz-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; -moz-transition-property: box-shadow, border; transition-property: box-shadow, border; -webkit-transition-duration: 0.2s; -moz-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; -moz-transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width; } .toggle:before { display: none; } .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); -ms-transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0); } .toggle.active .toggle-handle { border-color: #4cd964; } .content.fade { -webkit-transition: opacity 0.2s ease-in-out; -moz-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); -moz-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; -moz-animation-name: fadeOverlay; animation-name: fadeOverlay; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-duration: 0.4s; } .content.slide.right:not([class*="sliding-in"]) { -webkit-animation-direction: reverse; -moz-animation-direction: reverse; animation-direction: reverse; } .content.slide.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 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); } }