ratchet-theme-ios.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. /*!
  2. * =====================================================
  3. * Ratchet v2.0.2 (http://goratchet.com)
  4. * Copyright 2014 Connor Sears
  5. * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
  6. *
  7. * v2.0.2 designed by @connors.
  8. * =====================================================
  9. */
  10. a {
  11. color: #007aff;
  12. }
  13. a:active {
  14. color: #0062cc;
  15. }
  16. .content {
  17. background-color: #efeff4;
  18. }
  19. .h5, h5,
  20. .h6, h6,
  21. p {
  22. color: #8f8f94;
  23. }
  24. .h5, h5,
  25. .h6, h6 {
  26. font-weight: normal;
  27. text-transform: uppercase;
  28. }
  29. .btn {
  30. color: #929292;
  31. background-color: rgba(247, 247, 247, .98);
  32. border: 1px solid #929292;
  33. -webkit-transition: all;
  34. -moz-transition: all;
  35. transition: all;
  36. -webkit-transition-timing-function: linear;
  37. -moz-transition-timing-function: linear;
  38. transition-timing-function: linear;
  39. -webkit-transition-duration: .2s;
  40. -moz-transition-duration: .2s;
  41. transition-duration: .2s;
  42. }
  43. .btn:active, .btn.active {
  44. color: #fff;
  45. background-color: #929292;
  46. }
  47. .btn-primary {
  48. color: #fff;
  49. background-color: #007aff;
  50. border: 1px solid #007aff;
  51. }
  52. .btn-primary:active, .btn-primary.active {
  53. background-color: #0062cc;
  54. border: 1px solid #0062cc;
  55. }
  56. .btn-positive {
  57. color: #fff;
  58. background-color: #4cd964;
  59. border: 1px solid #4cd964;
  60. }
  61. .btn-positive:active, .btn-positive.active {
  62. background-color: #2ac845;
  63. border: 1px solid #2ac845;
  64. }
  65. .btn-negative {
  66. color: #fff;
  67. background-color: #dd524d;
  68. border: 1px solid #dd524d;
  69. }
  70. .btn-negative:active, .btn-negative.active {
  71. background-color: #cf2d28;
  72. border: 1px solid #cf2d28;
  73. }
  74. .btn-outlined {
  75. background-color: transparent;
  76. }
  77. .btn-outlined.btn-primary {
  78. color: #007aff;
  79. }
  80. .btn-outlined.btn-positive {
  81. color: #4cd964;
  82. }
  83. .btn-outlined.btn-negative {
  84. color: #dd524d;
  85. }
  86. .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  87. color: #fff;
  88. }
  89. .btn-link {
  90. color: #007aff;
  91. background-color: transparent;
  92. border: none;
  93. }
  94. .btn-link:active, .btn-link.active {
  95. color: #0062cc;
  96. background-color: transparent;
  97. }
  98. .btn .badge {
  99. background-color: rgba(0, 0, 0, .15);
  100. }
  101. .btn .badge.badge-inverted {
  102. background-color: transparent;
  103. }
  104. .btn:active .badge {
  105. color: #fff;
  106. }
  107. .bar {
  108. background-color: rgba(247, 247, 247, .98);
  109. border-bottom: 0;
  110. -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
  111. box-shadow: 0 0 1px rgba(0, 0, 0, .85);
  112. }
  113. .bar.bar-header-secondary {
  114. top: 44px;
  115. }
  116. .bar.bar-footer-secondary {
  117. bottom: 44px;
  118. }
  119. .bar.bar-footer-secondary-tab {
  120. bottom: 50px;
  121. }
  122. .bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab {
  123. border-top: 0;
  124. }
  125. .bar-tab {
  126. border-top: 0;
  127. }
  128. .tab-item {
  129. color: #929292;
  130. }
  131. .tab-item.active, .tab-item:active {
  132. color: #007aff;
  133. }
  134. .bar-nav .btn-link {
  135. color: #007aff;
  136. }
  137. .bar-nav .btn-link:active {
  138. color: #007aff;
  139. opacity: .6;
  140. }
  141. .badge.badge-inverted {
  142. color: #929292;
  143. background-color: transparent;
  144. }
  145. .badge-primary {
  146. color: #fff;
  147. background-color: #007aff;
  148. }
  149. .badge-primary.badge-inverted {
  150. color: #007aff;
  151. background-color: transparent;
  152. }
  153. .badge-positive {
  154. color: #fff;
  155. background-color: #4cd964;
  156. }
  157. .badge-positive.badge-inverted {
  158. color: #4cd964;
  159. background-color: transparent;
  160. }
  161. .badge-negative {
  162. color: #fff;
  163. background-color: #dd524d;
  164. }
  165. .badge-negative.badge-inverted {
  166. color: #dd524d;
  167. background-color: transparent;
  168. }
  169. .card .table-view {
  170. background-image: none;
  171. }
  172. .card .table-view-cell:last-child {
  173. background-image: none;
  174. }
  175. .table-view {
  176. 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>");
  177. background-repeat: no-repeat;
  178. background-position: 0 100%, 0 0;
  179. border-top: 0;
  180. border-bottom: 0;
  181. }
  182. .table-view .table-view-cell {
  183. 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>");
  184. background-repeat: no-repeat;
  185. background-position: 15px 100%;
  186. border-bottom: 0;
  187. }
  188. .table-view .table-view-cell:last-child {
  189. background-image: none;
  190. }
  191. .table-view .table-view-cell > a:not(.btn):active {
  192. color: inherit;
  193. }
  194. .table-view .table-view-divider {
  195. 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>");
  196. background-repeat: no-repeat;
  197. background-position: 0 100%, 0 0;
  198. border-top: 0;
  199. border-bottom: 0;
  200. }
  201. select,
  202. textarea,
  203. input[type="text"],
  204. input[type="search"],
  205. input[type="password"],
  206. input[type="datetime"],
  207. input[type="datetime-local"],
  208. input[type="date"],
  209. input[type="month"],
  210. input[type="time"],
  211. input[type="week"],
  212. input[type="number"],
  213. input[type="email"],
  214. input[type="url"],
  215. input[type="tel"],
  216. input[type="color"],
  217. .input-group {
  218. height: 40px;
  219. padding: 10px 15px;
  220. border: 1px solid rgba(0, 0, 0, .2);
  221. }
  222. input[type="search"] {
  223. height: 34px;
  224. text-align: center;
  225. background-color: rgba(0, 0, 0, .1);
  226. border: 0;
  227. border-radius: 6px;
  228. }
  229. input[type="search"]:focus {
  230. text-align: left;
  231. }
  232. select,
  233. textarea,
  234. .input-group {
  235. height: auto;
  236. }
  237. .input-group {
  238. padding: 0;
  239. 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>");
  240. background-repeat: no-repeat;
  241. background-position: 0 100%, 0 0;
  242. border: 0;
  243. }
  244. .input-group input {
  245. 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>");
  246. background-repeat: no-repeat;
  247. background-position: 15px 100%;
  248. border: 0;
  249. }
  250. .input-group input:last-child {
  251. background-image: none;
  252. }
  253. .input-row {
  254. 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>");
  255. background-repeat: no-repeat;
  256. background-position: 15px 100%;
  257. border-bottom: 0;
  258. }
  259. .input-row:last-child,
  260. .input-row label + input {
  261. background-image: none;
  262. }
  263. .segmented-control {
  264. background-color: transparent;
  265. border: 1px solid #929292;
  266. }
  267. .segmented-control .control-item {
  268. color: #929292;
  269. border-color: #929292;
  270. -webkit-transition: background-color .1s linear;
  271. -moz-transition: background-color .1s linear;
  272. transition: background-color .1s linear;
  273. }
  274. .segmented-control .control-item:active {
  275. background-color: #ebebeb;
  276. }
  277. .segmented-control .control-item.active {
  278. color: #fff;
  279. background-color: #929292;
  280. }
  281. .segmented-control-primary {
  282. border: 1px solid #007aff;
  283. }
  284. .segmented-control-primary .control-item {
  285. color: #007aff;
  286. border-color: inherit;
  287. }
  288. .segmented-control-primary .control-item:active {
  289. background-color: #b3d7ff;
  290. }
  291. .segmented-control-primary .control-item.active {
  292. color: #fff;
  293. background-color: #007aff;
  294. }
  295. .segmented-control-positive {
  296. border: 1px solid #4cd964;
  297. }
  298. .segmented-control-positive .control-item {
  299. color: #4cd964;
  300. border-color: inherit;
  301. }
  302. .segmented-control-positive .control-item:active {
  303. background-color: #dff8e3;
  304. }
  305. .segmented-control-positive .control-item.active {
  306. color: #fff;
  307. background-color: #4cd964;
  308. }
  309. .segmented-control-negative {
  310. border: 1px solid #dd524d;
  311. }
  312. .segmented-control-negative .control-item {
  313. color: #dd524d;
  314. border-color: inherit;
  315. }
  316. .segmented-control-negative .control-item:active {
  317. background-color: #fae4e3;
  318. }
  319. .segmented-control-negative .control-item.active {
  320. color: #fff;
  321. background-color: #dd524d;
  322. }
  323. .popover {
  324. border-radius: 12px;
  325. -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
  326. -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
  327. transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
  328. }
  329. .popover:before {
  330. border-bottom: 15px solid rgba(247, 247, 247, .98);
  331. }
  332. .popover .bar {
  333. -webkit-box-shadow: none;
  334. box-shadow: none;
  335. }
  336. .popover .bar-nav {
  337. border-bottom: 1px solid rgba(0, 0, 0, .15);
  338. }
  339. .popover .table-view {
  340. background-image: none;
  341. border-radius: 12px;
  342. }
  343. .modal {
  344. -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  345. -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  346. transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  347. }
  348. .modal.active {
  349. -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  350. -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  351. transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  352. }
  353. .toggle {
  354. width: 47px;
  355. border: 2px solid #e6e6e6;
  356. -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
  357. box-shadow: inset 0 0 0 0 #e1e1e1;
  358. -webkit-transition-duration: .2s;
  359. -moz-transition-duration: .2s;
  360. transition-duration: .2s;
  361. -webkit-transition-property: box-shadow, border;
  362. -moz-transition-property: box-shadow, border;
  363. transition-property: box-shadow, border;
  364. }
  365. .toggle .toggle-handle {
  366. border: 1px solid rgba(0, 0, 0, .2);
  367. -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
  368. box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
  369. -webkit-transition-property: -webkit-transform, border, width;
  370. -moz-transition-property: -moz-transform, border, width;
  371. transition-property: transform, border, width;
  372. }
  373. .toggle:before {
  374. display: none;
  375. }
  376. .toggle.active {
  377. background-color: transparent;
  378. border: 2px solid #4cd964;
  379. -webkit-box-shadow: inset 0 0 0 13px #4cd964;
  380. box-shadow: inset 0 0 0 13px #4cd964;
  381. }
  382. .toggle.active .toggle-handle {
  383. -webkit-transform: translate3d(17px, 0, 0);
  384. -ms-transform: translate3d(17px, 0, 0);
  385. transform: translate3d(17px, 0, 0);
  386. }
  387. .toggle.active .toggle-handle {
  388. border-color: #4cd964;
  389. }
  390. .content.fade {
  391. -webkit-transition: opacity .2s ease-in-out;
  392. -moz-transition: opacity .2s ease-in-out;
  393. transition: opacity .2s ease-in-out;
  394. }
  395. .content.sliding {
  396. -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  397. -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  398. transition-timing-function: cubic-bezier(.1, .5, .1, 1);
  399. }
  400. .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
  401. -webkit-animation-name: fadeOverlay;
  402. -moz-animation-name: fadeOverlay;
  403. animation-name: fadeOverlay;
  404. -webkit-animation-duration: .4s;
  405. -moz-animation-duration: .4s;
  406. animation-duration: .4s;
  407. }
  408. .content.sliding.right:not([class*="sliding-in"]) {
  409. -webkit-animation-direction: reverse;
  410. -moz-animation-direction: reverse;
  411. animation-direction: reverse;
  412. }
  413. .content.sliding.left {
  414. -webkit-transform: translate3d(-20%, 0, 0);
  415. -ms-transform: translate3d(-20%, 0, 0);
  416. transform: translate3d(-20%, 0, 0);
  417. }
  418. @-webkit-keyframes fadeOverlay {
  419. from {
  420. -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
  421. box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
  422. }
  423. to {
  424. -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
  425. box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
  426. }
  427. }