diff options
Diffstat (limited to 'dist/ratchet-theme-ios.css')
| -rw-r--r-- | dist/ratchet-theme-ios.css | 477 |
1 files changed, 477 insertions, 0 deletions
diff --git a/dist/ratchet-theme-ios.css b/dist/ratchet-theme-ios.css new file mode 100644 index 0000000..71893b7 --- /dev/null +++ b/dist/ratchet-theme-ios.css @@ -0,0 +1,477 @@ +/* + * ===================================================== + * Ratchet v2.0.0 + * Copyright 2014 Connor Sears + * Licensed under http://www.opensource.org/licenses/MIT + * + * V2.0.0 designed by @connors. + * ===================================================== + */ + +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 .bar-footer, +.bar .bar-footer-secondary, +.bar .bar-footer-secondary-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); +} + +.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,<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-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,<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-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,<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-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,<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-position: 0 100%, 0 0%; + background-repeat: no-repeat; +} + +.input-group input { + border: 0; + 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-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,<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-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 .2s ease-in-out, opacity .2s ease-in-out; + -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out; + transition: transform .2s ease-in-out, opacity .2s ease-in-out; + -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + transition: -webkit-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-transition-property: -webkit-transform, border, width; + -moz-transition-property: -moz-transform, border, width; + transition-property: transform, border, width; + -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); +} +.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.sliding { + -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.sliding.sliding-in, .content.sliding.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.sliding.right:not([class*="sliding-in"]) { + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; + animation-direction: reverse; +} +.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 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); + } +} |