├── README.md ├── css ├── pageslider.css └── styles.css ├── images ├── avatar.png └── react.png ├── index.html ├── js ├── app.js ├── pageslider-react.js └── router.js └── ratchet ├── css ├── ratchet-theme-android.css ├── ratchet-theme-android.min.css ├── ratchet-theme-ios.css ├── ratchet-theme-ios.min.css ├── ratchet.css └── ratchet.min.css ├── fonts ├── ratchicons.eot ├── ratchicons.svg ├── ratchicons.ttf └── ratchicons.woff └── js ├── ratchet.js └── ratchet.min.js /README.md: -------------------------------------------------------------------------------- 1 | Micro-library to implement page transitions in a React application -------------------------------------------------------------------------------- /css/pageslider.css: -------------------------------------------------------------------------------- 1 | .pageslider-container { 2 | position: absolute; 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | } 7 | 8 | .page { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | height: 100%; 14 | -webkit-transform: translate3d(0, 0, 1px); 15 | transform: translate3d(0, 0, 0); 16 | text-align: left; 17 | } 18 | 19 | .page.left { 20 | -webkit-transform: translate3d(-100%, 0, 1px); 21 | transform: translate3d(-100%, 0, 0); 22 | } 23 | 24 | .page.center { 25 | -webkit-transform: translate3d(0, 0, 1px); 26 | transform: translate3d(0, 0, 0); 27 | } 28 | 29 | .page.right { 30 | -webkit-transform: translate3d(100%, 0, 1px); 31 | transform: translate3d(100%, 0, 0); 32 | } 33 | 34 | .page.transition { 35 | -webkit-transition-duration: .25s; 36 | transition-duration: .25s; 37 | } -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | .content > .table-view:first-child { 2 | margin-top: -2px; 3 | } 4 | 5 | .hidden { 6 | opacity: 0; 7 | } 8 | 9 | .page1 .content { 10 | background-color: #103754; 11 | } 12 | 13 | .page2 .content{ 14 | padding-top: 100px; 15 | background-color: #222222; 16 | text-align: center; 17 | } 18 | 19 | .media-object { 20 | height: 150px; 21 | width: 150px; 22 | } -------------------------------------------------------------------------------- /images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/pageslider-react/f61fcbaeabe73508d51b899437cdc866acb9d2e0/images/avatar.png -------------------------------------------------------------------------------- /images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/pageslider-react/f61fcbaeabe73508d51b899437cdc866acb9d2e0/images/react.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page Slider 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | var Header = React.createClass({ 2 | render: function () { 3 | return ( 4 |

5 | 6 |

{this.props.text}

7 |

8 | ); 9 | } 10 | }); 11 | 12 | var HomePage = React.createClass({ 13 | render: function () { 14 | return ( 15 |

16 |

17 |

18 |

Page 1
Page 2

22 |

23 |

24 | ); 25 | } 26 | }); 27 | 28 | var Page1 = React.createClass({ 29 | render: function () { 30 | return ( 31 |

32 |

33 |

34 |

35 |

37 | 38 | 39 |
Susan Smith
40 | 41 |

43 |

44 |

45 |

46 | ); 47 | } 48 | }); 49 | 50 | var Page2 = React.createClass({ 51 | render: function () { 52 | return ( 53 |

54 |

55 |

56 |

57 |

58 |

59 | ); 60 | } 61 | }); 62 | 63 | var App = React.createClass({ 64 | mixins: [PageSlider], 65 | componentDidMount: function() { 66 | router.addRoute('', function() { 67 | this.slidePage(); 68 | }.bind(this)); 69 | router.addRoute('page1', function() { 70 | this.slidePage(); 71 | }.bind(this)); 72 | router.addRoute('page2', function() { 73 | this.slidePage(); 74 | }.bind(this)); 75 | router.start(); 76 | } 77 | }); 78 | 79 | React.render(, document.body); -------------------------------------------------------------------------------- /js/pageslider-react.js: -------------------------------------------------------------------------------- 1 | var PageSlider = { 2 | getInitialState: function () { 3 | return { 4 | history: [], 5 | pages: [], 6 | animating: false 7 | } 8 | }, 9 | componentDidUpdate: function() { 10 | var skippedCurrentFrame = false, 11 | pageEl = this.getDOMNode().lastChild, 12 | pages = this.state.pages, 13 | l = pages.length, 14 | transitionEndHandler = function() { 15 | pageEl.removeEventListener('webkitTransitionEnd', transitionEndHandler); 16 | pages.shift(); 17 | this.setState({pages: pages}); 18 | }.bind(this), 19 | animate = function() { 20 | if (!skippedCurrentFrame) { 21 | skippedCurrentFrame = true; 22 | requestAnimationFrame(animate.bind(this)); 23 | } else if (l > 0) { 24 | pages[l - 1].props.position = "center transition"; 25 | this.setState({pages: pages, animating: false}); 26 | pageEl.addEventListener('webkitTransitionEnd', transitionEndHandler); 27 | } 28 | }; 29 | 30 | if (this.state.animating) { 31 | requestAnimationFrame(animate.bind(this)); 32 | } 33 | }, 34 | slidePage: function (page) { 35 | var history = this.state.history, 36 | pages = this.state.pages, 37 | l = history.length, 38 | hash = window.location.hash, 39 | position = "center"; 40 | 41 | if (l === 0) { 42 | history.push(hash); 43 | } else if (hash === history[l - 2]) { 44 | history.pop(); 45 | position = "left"; 46 | } else { 47 | history.push(hash); 48 | position = "right"; 49 | } 50 | 51 | page.props.position = position; 52 | pages.push(page); 53 | 54 | this.setState({history: history, pages: pages, animating: position!=="center"}); 55 | 56 | }, 57 | render: function () { 58 | return ( 59 |

60 | {this.state.pages} 61 |

62 | ); 63 | } 64 | }; -------------------------------------------------------------------------------- /js/router.js: -------------------------------------------------------------------------------- 1 | var router = (function () { 2 | 3 | "use strict"; 4 | 5 | var routes = []; 6 | 7 | function addRoute(route, handler) { 8 | 9 | routes.push({parts: route.split('/'), handler: handler}); 10 | } 11 | 12 | function load(route) { 13 | window.location.hash = route; 14 | } 15 | 16 | function start() { 17 | 18 | var path = window.location.hash.substr(1), 19 | parts = path.split('/'), 20 | partsLength = parts.length; 21 | 22 | for (var i = 0; i < routes.length; i++) { 23 | var route = routes[i]; 24 | if (route.parts.length === partsLength) { 25 | var params = []; 26 | for (var j = 0; j < partsLength; j++) { 27 | if (route.parts[j].substr(0, 1) === ':') { 28 | params.push(parts[j]); 29 | } else if (route.parts[j] !== parts[j]) { 30 | break; 31 | } 32 | } 33 | if (j === partsLength) { 34 | route.handler.apply(undefined, params); 35 | return; 36 | } 37 | } 38 | } 39 | } 40 | 41 | window.onhashchange = start; 42 | 43 | return { 44 | addRoute: addRoute, 45 | load: load, 46 | start: start 47 | }; 48 | 49 | }()); -------------------------------------------------------------------------------- /ratchet/css/ratchet-theme-android.css: -------------------------------------------------------------------------------- 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 | 11 | body { 12 | font-family: "Roboto", sans-serif; 13 | font-size: 18px; 14 | line-height: 22px; 15 | color: #222; 16 | } 17 | 18 | a { 19 | color: #33b5e5; 20 | } 21 | a:active { 22 | color: #1a9bcb; 23 | } 24 | 25 | .content { 26 | background-color: #f2f2f2; 27 | } 28 | 29 | .bar-nav ~ .content { 30 | padding-top: 50px; 31 | } 32 | 33 | .bar-header-secondary ~ .content { 34 | padding-top: 100px; 35 | } 36 | 37 | .bar-tab ~ .content { 38 | padding-top: 50px; 39 | padding-bottom: 0; 40 | } 41 | 42 | .bar-footer ~ .content { 43 | padding-bottom: 50px; 44 | } 45 | 46 | .bar-footer-secondary ~ .content { 47 | padding-bottom: 100px; 48 | } 49 | 50 | .btn { 51 | padding: 8px 15px; 52 | font-size: 14px; 53 | color: #222; 54 | background-color: #cecece; 55 | border: 0; 56 | border-radius: 2px; 57 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25); 58 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25); 59 | } 60 | .btn:active, .btn.active { 61 | color: #222; 62 | background-color: #999; 63 | border: 0; 64 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); 65 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); 66 | } 67 | 68 | .btn-primary { 69 | color: #fff; 70 | background-color: #33b5e5; 71 | border: 0; 72 | } 73 | .btn-primary:active, .btn-primary.active { 74 | color: #fff; 75 | background-color: #1a9bcb; 76 | border: 0; 77 | } 78 | 79 | .btn-positive { 80 | color: #fff; 81 | background-color: #9c0; 82 | border: 0; 83 | } 84 | .btn-positive:active, .btn-positive.active { 85 | color: #fff; 86 | background-color: #739900; 87 | border: 0; 88 | } 89 | 90 | .btn-negative { 91 | color: #fff; 92 | background-color: #f44; 93 | border: 0; 94 | } 95 | .btn-negative:active, .btn-negative.active { 96 | color: #fff; 97 | background-color: #f11; 98 | border: 0; 99 | } 100 | 101 | .btn-outlined { 102 | background-color: transparent; 103 | border: 1px solid #999; 104 | -webkit-box-shadow: none; 105 | box-shadow: none; 106 | } 107 | .btn-outlined.btn-primary { 108 | color: #33b5e5; 109 | border: 1px solid #33b5e5; 110 | } 111 | .btn-outlined.btn-primary:active { 112 | background-color: #33b5e5; 113 | border: 1px solid #33b5e5; 114 | } 115 | .btn-outlined.btn-positive { 116 | color: #9c0; 117 | border: 1px solid #9c0; 118 | } 119 | .btn-outlined.btn-positive:active { 120 | background-color: #9c0; 121 | border: 1px solid #9c0; 122 | } 123 | .btn-outlined.btn-negative { 124 | color: #f44; 125 | border: 1px solid #f44; 126 | } 127 | .btn-outlined.btn-negative:active { 128 | background-color: #f44; 129 | border: 1px solid #f44; 130 | } 131 | .btn-outlined:active { 132 | background-color: #999; 133 | border: 1px solid #999; 134 | -webkit-box-shadow: none; 135 | box-shadow: none; 136 | } 137 | .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { 138 | color: #fff; 139 | -webkit-box-shadow: none; 140 | box-shadow: none; 141 | } 142 | 143 | .btn-link { 144 | color: #33b5e5; 145 | background-color: transparent; 146 | border: none; 147 | -webkit-box-shadow: none; 148 | box-shadow: none; 149 | } 150 | .btn-link:active, .btn-link.active { 151 | color: #1a9bcb; 152 | background-color: transparent; 153 | -webkit-box-shadow: none; 154 | box-shadow: none; 155 | } 156 | 157 | .btn-block { 158 | padding: 15px 0; 159 | font-size: 18px; 160 | } 161 | 162 | .btn .badge { 163 | background-color: rgba(0, 0, 0, .15); 164 | } 165 | .btn .badge.badge-inverted { 166 | background-color: transparent; 167 | } 168 | .btn:active .badge { 169 | color: #fff; 170 | } 171 | 172 | .bar { 173 | height: 50px; 174 | background-color: #ddd; 175 | border-bottom: 1px solid #b1b1b1; 176 | -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07); 177 | box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07); 178 | } 179 | .bar.bar-header-secondary { 180 | top: 50px; 181 | } 182 | .bar.bar-footer-secondary { 183 | bottom: 50px; 184 | } 185 | .bar.bar-footer-secondary-tab { 186 | bottom: 50px; 187 | } 188 | .bar .bar-footer, 189 | .bar .bar-footer-secondary, 190 | .bar .bar-footer-secondary-tab { 191 | border-top: 1px solid #b1b1b1; 192 | border-bottom: 0; 193 | -webkit-box-shadow: inset 0 -2px 0 #33b5e5; 194 | box-shadow: inset 0 -2px 0 #33b5e5; 195 | } 196 | 197 | .bar-tab { 198 | top: 0; 199 | bottom: auto; 200 | height: 50px; 201 | border-top: 0; 202 | } 203 | .bar-tab .tab-item { 204 | color: #929292; 205 | } 206 | .bar-tab .tab-item.active { 207 | color: #33b5e5; 208 | -webkit-box-shadow: inset 0 -2px 0 #33b5e5; 209 | box-shadow: inset 0 -2px 0 #33b5e5; 210 | } 211 | .bar-tab .tab-item:active { 212 | color: #929292; 213 | background-color: #78c6e3; 214 | } 215 | .bar-tab .tab-item .icon { 216 | top: 3px; 217 | padding-top: 0; 218 | padding-bottom: 0; 219 | } 220 | 221 | .title { 222 | position: static; 223 | padding-left: 15px; 224 | font-size: 18px; 225 | line-height: 49px; 226 | text-align: left; 227 | } 228 | 229 | .bar .btn { 230 | top: 7px; 231 | padding-top: 10px; 232 | padding-bottom: 10px; 233 | } 234 | .bar .btn-link { 235 | top: 0; 236 | padding: 0; 237 | font-size: 18px; 238 | line-height: 49px; 239 | color: #33b5e5; 240 | } 241 | .bar .btn-link:active, .bar .btn-link.active { 242 | color: #1a9bcb; 243 | } 244 | .bar .btn-link .icon { 245 | top: 2px; 246 | padding: 0; 247 | } 248 | .bar .btn-block { 249 | top: 4px; 250 | } 251 | 252 | .bar .segmented-control { 253 | top: 7px; 254 | } 255 | 256 | .bar .icon { 257 | padding-top: 13px; 258 | padding-bottom: 13px; 259 | } 260 | .bar .title .icon { 261 | padding: 0; 262 | } 263 | .bar .title .icon.icon-caret { 264 | top: 10px; 265 | color: #777; 266 | } 267 | 268 | .bar input[type="search"] { 269 | height: 35px; 270 | } 271 | 272 | .badge.badge-inverted { 273 | color: #999; 274 | background-color: transparent; 275 | } 276 | 277 | .badge-primary { 278 | color: #fff; 279 | background-color: #33b5e5; 280 | } 281 | .badge-primary.badge-inverted { 282 | color: #33b5e5; 283 | background-color: transparent; 284 | } 285 | 286 | .badge-positive { 287 | color: #fff; 288 | background-color: #9c0; 289 | } 290 | .badge-positive.badge-inverted { 291 | color: #9c0; 292 | background-color: transparent; 293 | } 294 | 295 | .badge-negative { 296 | color: #fff; 297 | background-color: #f44; 298 | } 299 | .badge-negative.badge-inverted { 300 | color: #f44; 301 | background-color: transparent; 302 | } 303 | 304 | .card { 305 | background-color: transparent; 306 | border-color: #d9d9d9; 307 | border-radius: 2px; 308 | } 309 | 310 | .table-view { 311 | background-color: transparent; 312 | } 313 | .table-view .table-view-cell { 314 | border-bottom: 1px solid #d9d9d9; 315 | } 316 | .table-view .table-view-cell:last-child { 317 | background-image: none; 318 | } 319 | .table-view .table-view-cell > a:not(.btn):active { 320 | color: inherit; 321 | background-color: #e0e0e0; 322 | } 323 | .table-view .table-view-cell > a:not(.btn):active .icon { 324 | color: #fff; 325 | } 326 | .table-view .table-view-divider { 327 | padding-top: 25px; 328 | font-size: 12px; 329 | font-weight: bold; 330 | text-transform: uppercase; 331 | background-color: transparent; 332 | border-top: 0; 333 | border-bottom: 2px solid #a9a9a9; 334 | } 335 | 336 | .table-view-cell .navigate-left > .btn, 337 | .table-view-cell .navigate-left > .badge, 338 | .table-view-cell .navigate-left > .toggle, 339 | .table-view-cell .navigate-right > .btn, 340 | .table-view-cell .navigate-right > .badge, 341 | .table-view-cell .navigate-right > .toggle, 342 | .table-view-cell .push-left > .btn, 343 | .table-view-cell .push-left > .badge, 344 | .table-view-cell .push-left > .toggle, 345 | .table-view-cell .push-right > .btn, 346 | .table-view-cell .push-right > .badge, 347 | .table-view-cell .push-right > .toggle, 348 | .table-view-cell > a .navigate-left > .btn, 349 | .table-view-cell > a .navigate-left > .badge, 350 | .table-view-cell > a .navigate-left > .toggle, 351 | .table-view-cell > a .navigate-right > .btn, 352 | .table-view-cell > a .navigate-right > .badge, 353 | .table-view-cell > a .navigate-right > .toggle, 354 | .table-view-cell > a .push-left > .btn, 355 | .table-view-cell > a .push-left > .badge, 356 | .table-view-cell > a .push-left > .toggle, 357 | .table-view-cell > a .push-right > .btn, 358 | .table-view-cell > a .push-right > .badge, 359 | .table-view-cell > a .push-right > .toggle { 360 | right: 15px; 361 | } 362 | 363 | select, 364 | textarea, 365 | input[type="text"], 366 | input[type="search"], 367 | input[type="password"], 368 | input[type="datetime"], 369 | input[type="datetime-local"], 370 | input[type="date"], 371 | input[type="month"], 372 | input[type="time"], 373 | input[type="week"], 374 | input[type="number"], 375 | input[type="email"], 376 | input[type="url"], 377 | input[type="tel"], 378 | input[type="color"], 379 | .input-group { 380 | height: 40px; 381 | padding: 10px 15px; 382 | border: 1px solid rgba(0, 0, 0, .2); 383 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1); 384 | box-shadow: 0 1px 1px rgba(0, 0, 0, .1); 385 | } 386 | 387 | input[type="search"] { 388 | border-radius: 2px; 389 | } 390 | 391 | select, 392 | textarea, 393 | .input-group { 394 | height: auto; 395 | } 396 | 397 | .input-group { 398 | padding: 0; 399 | border: 0; 400 | } 401 | 402 | .input-group input { 403 | border: 0; 404 | border-bottom: 1px solid #d9d9d9; 405 | -webkit-box-shadow: none; 406 | box-shadow: none; 407 | } 408 | 409 | .input-group input:last-child { 410 | background-image: none; 411 | } 412 | 413 | .input-row { 414 | height: 40px; 415 | border-bottom: 1px solid #d9d9d9; 416 | } 417 | 418 | .input-row label { 419 | padding-top: 10px; 420 | padding-bottom: 10px; 421 | } 422 | 423 | .input-row label + input { 424 | background-image: none; 425 | border-bottom: 0; 426 | } 427 | 428 | .segmented-control { 429 | font-size: 14px; 430 | background-color: #cecece; 431 | border: 0; 432 | border-radius: 2px; 433 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25); 434 | box-shadow: 0 1px 1px rgba(0, 0, 0, .25); 435 | } 436 | .segmented-control .control-item { 437 | padding-top: 10px; 438 | padding-bottom: 10px; 439 | color: #222; 440 | border-left: 1px solid #999; 441 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); 442 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2); 443 | } 444 | .segmented-control .control-item:first-child { 445 | border-left-width: 0; 446 | } 447 | .segmented-control .control-item:active, .segmented-control .control-item.active { 448 | background-color: #999; 449 | } 450 | 451 | .segmented-control-primary { 452 | border: 0; 453 | } 454 | .segmented-control-primary .control-item { 455 | color: #fff; 456 | border-color: inherit; 457 | } 458 | .segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active { 459 | color: #fff; 460 | background-color: #33b5e5; 461 | } 462 | 463 | .segmented-control-positive { 464 | border: 0; 465 | } 466 | .segmented-control-positive .control-item { 467 | color: #fff; 468 | border-color: inherit; 469 | } 470 | .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { 471 | color: #fff; 472 | background-color: #9c0; 473 | } 474 | 475 | .segmented-control-negative { 476 | border: 0; 477 | } 478 | .segmented-control-negative .control-item { 479 | color: #fff; 480 | border-color: inherit; 481 | } 482 | .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { 483 | color: #fff; 484 | background-color: #f44; 485 | } 486 | 487 | .popover { 488 | top: 47px; 489 | left: 15px; 490 | width: 200px; 491 | margin-left: 0; 492 | border: 1px solid #9b9b9b; 493 | border-radius: 0; 494 | -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2); 495 | box-shadow: 0 0 3px rgba(0, 0, 0, .2); 496 | -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; 497 | -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; 498 | transition: transform .1s ease-in-out, opacity .2s ease-in-out; 499 | -webkit-transform: scale(.75); 500 | -ms-transform: scale(.75); 501 | transform: scale(.75); 502 | } 503 | .popover:before { 504 | display: none; 505 | } 506 | .popover.visible { 507 | -webkit-transform: scale(1); 508 | -ms-transform: scale(1); 509 | transform: scale(1); 510 | } 511 | 512 | .backdrop { 513 | background-color: transparent; 514 | } 515 | 516 | .popover .bar { 517 | border-radius: 0; 518 | } 519 | .popover .bar-nav ~ .table-view { 520 | padding-top: 50px; 521 | } 522 | 523 | .popover .table-view { 524 | border-radius: 12px; 525 | } 526 | 527 | .toggle { 528 | width: 104px; 529 | height: 28px; 530 | background-color: #d7d7d7; 531 | border: 2px solid #d7d7d7; 532 | border-radius: 0; 533 | } 534 | .toggle .toggle-handle { 535 | top: 0; 536 | left: 0; 537 | width: 50px; 538 | height: 24px; 539 | background-color: #bebebe; 540 | border: 1px solid #b5b5b5; 541 | border-radius: 2px; 542 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1); 543 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1); 544 | } 545 | .toggle:before { 546 | top: 1px; 547 | right: auto; 548 | left: 11px; 549 | z-index: 3; 550 | color: #fff; 551 | } 552 | .toggle.active { 553 | background-color: #d7d7d7; 554 | border: 2px solid #d7d7d7; 555 | } 556 | .toggle.active .toggle-handle { 557 | margin-right: 2px; 558 | background-color: #33b5e5; 559 | border-color: #33b5e5; 560 | -webkit-transform: translate3d(50px, 0, 0); 561 | -ms-transform: translate3d(50px, 0, 0); 562 | transform: translate3d(50px, 0, 0); 563 | } 564 | .toggle.active:before { 565 | right: 14px; 566 | left: auto; 567 | color: #fff; 568 | } 569 | 570 | .navigate-left:after, 571 | .push-left:after { 572 | content: ''; 573 | } 574 | 575 | .navigate-right:after, 576 | .push-right:after { 577 | content: ''; 578 | } 579 | 580 | .icon-caret:before { 581 | content: '\e800'; 582 | } 583 | 584 | .icon-down:before, 585 | .icon-down-nav:before { 586 | content: '\e801'; 587 | } 588 | 589 | .icon-download:before { 590 | content: '\e802'; 591 | } 592 | 593 | .icon-left:before, 594 | .icon-left-nav:before { 595 | content: '\e803'; 596 | } 597 | 598 | .icon-more-vertical:before { 599 | content: '\e804'; 600 | } 601 | 602 | .icon-more:before { 603 | content: '\e805'; 604 | } 605 | 606 | .icon-right:before, 607 | .icon-right-nav:before { 608 | content: '\e806'; 609 | } 610 | 611 | .icon-search:before { 612 | content: '\e807'; 613 | } 614 | 615 | .icon-share:before { 616 | content: '\e808'; 617 | } 618 | 619 | .icon-up:before, 620 | .icon-up-nav:before { 621 | content: '\e809'; 622 | } 623 | -------------------------------------------------------------------------------- /ratchet/css/ratchet-theme-android.min.css: -------------------------------------------------------------------------------- 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 | */body{font-family:Roboto,sans-serif;font-size:18px;line-height:22px;color:#222}a{color:#33b5e5}a:active{color:#1a9bcb}.content{background-color:#f2f2f2}.bar-nav~.content{padding-top:50px}.bar-header-secondary~.content{padding-top:100px}.bar-tab~.content{padding-top:50px;padding-bottom:0}.bar-footer~.content{padding-bottom:50px}.bar-footer-secondary~.content{padding-bottom:100px}.btn{padding:8px 15px;font-size:14px;color:#222;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.25)}.btn.active,.btn:active{color:#222;background-color:#999;border:0;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.btn-primary{color:#fff;background-color:#33b5e5;border:0}.btn-primary.active,.btn-primary:active{color:#fff;background-color:#1a9bcb;border:0}.btn-positive{color:#fff;background-color:#9c0;border:0}.btn-positive.active,.btn-positive:active{color:#fff;background-color:#739900;border:0}.btn-negative{color:#fff;background-color:#f44;border:0}.btn-negative.active,.btn-negative:active{color:#fff;background-color:#f11;border:0}.btn-outlined{background-color:transparent;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.btn-outlined.btn-primary{color:#33b5e5;border:1px solid #33b5e5}.btn-outlined.btn-primary:active{background-color:#33b5e5;border:1px solid #33b5e5}.btn-outlined.btn-positive{color:#9c0;border:1px solid #9c0}.btn-outlined.btn-positive:active{background-color:#9c0;border:1px solid #9c0}.btn-outlined.btn-negative{color:#f44;border:1px solid #f44}.btn-outlined.btn-negative:active{background-color:#f44;border:1px solid #f44}.btn-outlined:active{background-color:#999;border:1px solid #999;-webkit-box-shadow:none;box-shadow:none}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff;-webkit-box-shadow:none;box-shadow:none}.btn-link{color:#33b5e5;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.btn-link.active,.btn-link:active{color:#1a9bcb;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-block{padding:15px 0;font-size:18px}.btn .badge{background-color:rgba(0,0,0,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{height:50px;background-color:#ddd;border-bottom:1px solid #b1b1b1;-webkit-box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07);box-shadow:inset 0 -2px 0 #d2d2d2,0 3px 3px rgba(0,0,0,.07)}.bar.bar-header-secondary{top:50px}.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab{bottom:50px}.bar .bar-footer,.bar .bar-footer-secondary,.bar .bar-footer-secondary-tab{border-top:1px solid #b1b1b1;border-bottom:0;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.bar-tab{top:0;bottom:auto;height:50px;border-top:0}.bar-tab .tab-item{color:#929292}.bar-tab .tab-item.active{color:#33b5e5;-webkit-box-shadow:inset 0 -2px 0 #33b5e5;box-shadow:inset 0 -2px 0 #33b5e5}.bar-tab .tab-item:active{color:#929292;background-color:#78c6e3}.bar-tab .tab-item .icon{top:3px;padding-top:0;padding-bottom:0}.title{position:static;padding-left:15px;font-size:18px;line-height:49px;text-align:left}.bar .btn{top:7px;padding-top:10px;padding-bottom:10px}.bar .btn-link{top:0;padding:0;font-size:18px;line-height:49px;color:#33b5e5}.bar .btn-link.active,.bar .btn-link:active{color:#1a9bcb}.bar .btn-link .icon{top:2px;padding:0}.bar .btn-block{top:4px}.bar .segmented-control{top:7px}.bar .icon{padding-top:13px;padding-bottom:13px}.bar .title .icon{padding:0}.bar .title .icon.icon-caret{top:10px;color:#777}.bar input[type=search]{height:35px}.badge.badge-inverted{color:#999;background-color:transparent}.badge-primary{color:#fff;background-color:#33b5e5}.badge-primary.badge-inverted{color:#33b5e5;background-color:transparent}.badge-positive{color:#fff;background-color:#9c0}.badge-positive.badge-inverted{color:#9c0;background-color:transparent}.badge-negative{color:#fff;background-color:#f44}.badge-negative.badge-inverted{color:#f44;background-color:transparent}.card{background-color:transparent;border-color:#d9d9d9;border-radius:2px}.table-view{background-color:transparent}.table-view .table-view-cell{border-bottom:1px solid #d9d9d9}.table-view .table-view-cell:last-child{background-image:none}.table-view .table-view-cell>a:not(.btn):active{color:inherit;background-color:#e0e0e0}.table-view .table-view-cell>a:not(.btn):active .icon{color:#fff}.table-view .table-view-divider{padding-top:25px;font-size:12px;font-weight:700;text-transform:uppercase;background-color:transparent;border-top:0;border-bottom:2px solid #a9a9a9}.table-view-cell .navigate-left>.badge,.table-view-cell .navigate-left>.btn,.table-view-cell .navigate-left>.toggle,.table-view-cell .navigate-right>.badge,.table-view-cell .navigate-right>.btn,.table-view-cell .navigate-right>.toggle,.table-view-cell .push-left>.badge,.table-view-cell .push-left>.btn,.table-view-cell .push-left>.toggle,.table-view-cell .push-right>.badge,.table-view-cell .push-right>.btn,.table-view-cell .push-right>.toggle,.table-view-cell>a .navigate-left>.badge,.table-view-cell>a .navigate-left>.btn,.table-view-cell>a .navigate-left>.toggle,.table-view-cell>a .navigate-right>.badge,.table-view-cell>a .navigate-right>.btn,.table-view-cell>a .navigate-right>.toggle,.table-view-cell>a .push-left>.badge,.table-view-cell>a .push-left>.btn,.table-view-cell>a .push-left>.toggle,.table-view-cell>a .push-right>.badge,.table-view-cell>a .push-right>.btn,.table-view-cell>a .push-right>.toggle{right:15px}.input-group,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}input[type=search]{border-radius:2px}.input-group,select,textarea{height:auto}.input-group{padding:0;border:0}.input-group input{border:0;border-bottom:1px solid #d9d9d9;-webkit-box-shadow:none;box-shadow:none}.input-group input:last-child{background-image:none}.input-row{height:40px;border-bottom:1px solid #d9d9d9}.input-row label{padding-top:10px;padding-bottom:10px}.input-row label+input{background-image:none;border-bottom:0}.segmented-control{font-size:14px;background-color:#cecece;border:0;border-radius:2px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 1px 1px rgba(0,0,0,.25)}.segmented-control .control-item{padding-top:10px;padding-bottom:10px;color:#222;border-left:1px solid #999;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2)}.segmented-control .control-item:first-child{border-left-width:0}.segmented-control .control-item.active,.segmented-control .control-item:active{background-color:#999}.segmented-control-primary{border:0}.segmented-control-primary .control-item{color:#fff;border-color:inherit}.segmented-control-primary .control-item.active,.segmented-control-primary .control-item:active{color:#fff;background-color:#33b5e5}.segmented-control-positive{border:0}.segmented-control-positive .control-item{color:#fff;border-color:inherit}.segmented-control-positive .control-item.active,.segmented-control-positive .control-item:active{color:#fff;background-color:#9c0}.segmented-control-negative{border:0}.segmented-control-negative .control-item{color:#fff;border-color:inherit}.segmented-control-negative .control-item.active,.segmented-control-negative .control-item:active{color:#fff;background-color:#f44}.popover{top:47px;left:15px;width:200px;margin-left:0;border:1px solid #9b9b9b;border-radius:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-transition:-webkit-transform .1s ease-in-out,opacity .2s ease-in-out;-moz-transition:-moz-transform .1s ease-in-out,opacity .2s ease-in-out;transition:transform .1s ease-in-out,opacity .2s ease-in-out;-webkit-transform:scale(.75);-ms-transform:scale(.75);transform:scale(.75)}.popover:before{display:none}.popover.visible{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.backdrop{background-color:transparent}.popover .bar{border-radius:0}.popover .bar-nav~.table-view{padding-top:50px}.popover .table-view{border-radius:12px}.toggle{width:104px;height:28px;background-color:#d7d7d7;border:2px solid #d7d7d7;border-radius:0}.toggle .toggle-handle{top:0;left:0;width:50px;height:24px;background-color:#bebebe;border:1px solid #b5b5b5;border-radius:2px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1)}.toggle:before{top:1px;right:auto;left:11px;z-index:3;color:#fff}.toggle.active{background-color:#d7d7d7;border:2px solid #d7d7d7}.toggle.active .toggle-handle{margin-right:2px;background-color:#33b5e5;border-color:#33b5e5;-webkit-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}.toggle.active:before{right:14px;left:auto;color:#fff}.navigate-left:after,.navigate-right:after,.push-left:after,.push-right:after{content:''}.icon-caret:before{content:'\e800'}.icon-down-nav:before,.icon-down:before{content:'\e801'}.icon-download:before{content:'\e802'}.icon-left-nav:before,.icon-left:before{content:'\e803'}.icon-more-vertical:before{content:'\e804'}.icon-more:before{content:'\e805'}.icon-right-nav:before,.icon-right:before{content:'\e806'}.icon-search:before{content:'\e807'}.icon-share:before{content:'\e808'}.icon-up-nav:before,.icon-up:before{content:'\e809'} -------------------------------------------------------------------------------- /ratchet/css/ratchet-theme-ios.css: -------------------------------------------------------------------------------- 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 | 11 | a { 12 | color: #007aff; 13 | } 14 | a:active { 15 | color: #0062cc; 16 | } 17 | 18 | .content { 19 | background-color: #efeff4; 20 | } 21 | 22 | .h5, h5, 23 | .h6, h6, 24 | p { 25 | color: #8f8f94; 26 | } 27 | 28 | .h5, h5, 29 | .h6, h6 { 30 | font-weight: normal; 31 | text-transform: uppercase; 32 | } 33 | 34 | .btn { 35 | color: #929292; 36 | background-color: rgba(247, 247, 247, .98); 37 | border: 1px solid #929292; 38 | -webkit-transition: all; 39 | -moz-transition: all; 40 | transition: all; 41 | -webkit-transition-timing-function: linear; 42 | -moz-transition-timing-function: linear; 43 | transition-timing-function: linear; 44 | -webkit-transition-duration: .2s; 45 | -moz-transition-duration: .2s; 46 | transition-duration: .2s; 47 | } 48 | .btn:active, .btn.active { 49 | color: #fff; 50 | background-color: #929292; 51 | } 52 | 53 | .btn-primary { 54 | color: #fff; 55 | background-color: #007aff; 56 | border: 1px solid #007aff; 57 | } 58 | .btn-primary:active, .btn-primary.active { 59 | background-color: #0062cc; 60 | border: 1px solid #0062cc; 61 | } 62 | 63 | .btn-positive { 64 | color: #fff; 65 | background-color: #4cd964; 66 | border: 1px solid #4cd964; 67 | } 68 | .btn-positive:active, .btn-positive.active { 69 | background-color: #2ac845; 70 | border: 1px solid #2ac845; 71 | } 72 | 73 | .btn-negative { 74 | color: #fff; 75 | background-color: #dd524d; 76 | border: 1px solid #dd524d; 77 | } 78 | .btn-negative:active, .btn-negative.active { 79 | background-color: #cf2d28; 80 | border: 1px solid #cf2d28; 81 | } 82 | 83 | .btn-outlined { 84 | background-color: transparent; 85 | } 86 | .btn-outlined.btn-primary { 87 | color: #007aff; 88 | } 89 | .btn-outlined.btn-positive { 90 | color: #4cd964; 91 | } 92 | .btn-outlined.btn-negative { 93 | color: #dd524d; 94 | } 95 | .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { 96 | color: #fff; 97 | } 98 | 99 | .btn-link { 100 | color: #007aff; 101 | background-color: transparent; 102 | border: none; 103 | } 104 | .btn-link:active, .btn-link.active { 105 | color: #0062cc; 106 | background-color: transparent; 107 | } 108 | 109 | .btn .badge { 110 | background-color: rgba(0, 0, 0, .15); 111 | } 112 | .btn .badge.badge-inverted { 113 | background-color: transparent; 114 | } 115 | .btn:active .badge { 116 | color: #fff; 117 | } 118 | 119 | .bar { 120 | background-color: rgba(247, 247, 247, .98); 121 | border-bottom: 0; 122 | -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85); 123 | box-shadow: 0 0 1px rgba(0, 0, 0, .85); 124 | } 125 | .bar.bar-header-secondary { 126 | top: 44px; 127 | } 128 | .bar.bar-footer-secondary { 129 | bottom: 44px; 130 | } 131 | .bar.bar-footer-secondary-tab { 132 | bottom: 50px; 133 | } 134 | .bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab { 135 | border-top: 0; 136 | } 137 | 138 | .bar-tab { 139 | border-top: 0; 140 | } 141 | 142 | .tab-item { 143 | color: #929292; 144 | } 145 | .tab-item.active, .tab-item:active { 146 | color: #007aff; 147 | } 148 | 149 | .bar-nav .btn-link { 150 | color: #007aff; 151 | } 152 | .bar-nav .btn-link:active { 153 | color: #007aff; 154 | opacity: .6; 155 | } 156 | 157 | .badge.badge-inverted { 158 | color: #929292; 159 | background-color: transparent; 160 | } 161 | 162 | .badge-primary { 163 | color: #fff; 164 | background-color: #007aff; 165 | } 166 | .badge-primary.badge-inverted { 167 | color: #007aff; 168 | background-color: transparent; 169 | } 170 | 171 | .badge-positive { 172 | color: #fff; 173 | background-color: #4cd964; 174 | } 175 | .badge-positive.badge-inverted { 176 | color: #4cd964; 177 | background-color: transparent; 178 | } 179 | 180 | .badge-negative { 181 | color: #fff; 182 | background-color: #dd524d; 183 | } 184 | .badge-negative.badge-inverted { 185 | color: #dd524d; 186 | background-color: transparent; 187 | } 188 | 189 | .card .table-view { 190 | background-image: none; 191 | } 192 | 193 | .card .table-view-cell:last-child { 194 | background-image: none; 195 | } 196 | 197 | .table-view { 198 | background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); 199 | background-repeat: no-repeat; 200 | background-position: 0 100%, 0 0; 201 | border-top: 0; 202 | border-bottom: 0; 203 | } 204 | .table-view .table-view-cell { 205 | background-image: url("data:image/svg+xml;utf8,"); 206 | background-repeat: no-repeat; 207 | background-position: 15px 100%; 208 | border-bottom: 0; 209 | } 210 | .table-view .table-view-cell:last-child { 211 | background-image: none; 212 | } 213 | .table-view .table-view-cell > a:not(.btn):active { 214 | color: inherit; 215 | } 216 | .table-view .table-view-divider { 217 | background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); 218 | background-repeat: no-repeat; 219 | background-position: 0 100%, 0 0; 220 | border-top: 0; 221 | border-bottom: 0; 222 | } 223 | 224 | select, 225 | textarea, 226 | input[type="text"], 227 | input[type="search"], 228 | input[type="password"], 229 | input[type="datetime"], 230 | input[type="datetime-local"], 231 | input[type="date"], 232 | input[type="month"], 233 | input[type="time"], 234 | input[type="week"], 235 | input[type="number"], 236 | input[type="email"], 237 | input[type="url"], 238 | input[type="tel"], 239 | input[type="color"], 240 | .input-group { 241 | height: 40px; 242 | padding: 10px 15px; 243 | border: 1px solid rgba(0, 0, 0, .2); 244 | } 245 | 246 | input[type="search"] { 247 | height: 34px; 248 | text-align: center; 249 | background-color: rgba(0, 0, 0, .1); 250 | border: 0; 251 | border-radius: 6px; 252 | } 253 | 254 | input[type="search"]:focus { 255 | text-align: left; 256 | } 257 | 258 | select, 259 | textarea, 260 | .input-group { 261 | height: auto; 262 | } 263 | 264 | .input-group { 265 | padding: 0; 266 | background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); 267 | background-repeat: no-repeat; 268 | background-position: 0 100%, 0 0; 269 | border: 0; 270 | } 271 | 272 | .input-group input { 273 | background-image: url("data:image/svg+xml;utf8,"); 274 | background-repeat: no-repeat; 275 | background-position: 15px 100%; 276 | border: 0; 277 | } 278 | 279 | .input-group input:last-child { 280 | background-image: none; 281 | } 282 | 283 | .input-row { 284 | background-image: url("data:image/svg+xml;utf8,"); 285 | background-repeat: no-repeat; 286 | background-position: 15px 100%; 287 | border-bottom: 0; 288 | } 289 | 290 | .input-row:last-child, 291 | .input-row label + input { 292 | background-image: none; 293 | } 294 | 295 | .segmented-control { 296 | background-color: transparent; 297 | border: 1px solid #929292; 298 | } 299 | .segmented-control .control-item { 300 | color: #929292; 301 | border-color: #929292; 302 | -webkit-transition: background-color .1s linear; 303 | -moz-transition: background-color .1s linear; 304 | transition: background-color .1s linear; 305 | } 306 | .segmented-control .control-item:active { 307 | background-color: #ebebeb; 308 | } 309 | .segmented-control .control-item.active { 310 | color: #fff; 311 | background-color: #929292; 312 | } 313 | 314 | .segmented-control-primary { 315 | border: 1px solid #007aff; 316 | } 317 | .segmented-control-primary .control-item { 318 | color: #007aff; 319 | border-color: inherit; 320 | } 321 | .segmented-control-primary .control-item:active { 322 | background-color: #b3d7ff; 323 | } 324 | .segmented-control-primary .control-item.active { 325 | color: #fff; 326 | background-color: #007aff; 327 | } 328 | 329 | .segmented-control-positive { 330 | border: 1px solid #4cd964; 331 | } 332 | .segmented-control-positive .control-item { 333 | color: #4cd964; 334 | border-color: inherit; 335 | } 336 | .segmented-control-positive .control-item:active { 337 | background-color: #dff8e3; 338 | } 339 | .segmented-control-positive .control-item.active { 340 | color: #fff; 341 | background-color: #4cd964; 342 | } 343 | 344 | .segmented-control-negative { 345 | border: 1px solid #dd524d; 346 | } 347 | .segmented-control-negative .control-item { 348 | color: #dd524d; 349 | border-color: inherit; 350 | } 351 | .segmented-control-negative .control-item:active { 352 | background-color: #fae4e3; 353 | } 354 | .segmented-control-negative .control-item.active { 355 | color: #fff; 356 | background-color: #dd524d; 357 | } 358 | 359 | .popover { 360 | border-radius: 12px; 361 | -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; 362 | -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; 363 | transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out; 364 | } 365 | .popover:before { 366 | border-bottom: 15px solid rgba(247, 247, 247, .98); 367 | } 368 | 369 | .popover .bar { 370 | -webkit-box-shadow: none; 371 | box-shadow: none; 372 | } 373 | 374 | .popover .bar-nav { 375 | border-bottom: 1px solid rgba(0, 0, 0, .15); 376 | } 377 | 378 | .popover .table-view { 379 | background-image: none; 380 | border-radius: 12px; 381 | } 382 | 383 | .modal { 384 | -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); 385 | -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1); 386 | transition-timing-function: cubic-bezier(.1, .5, .1, 1); 387 | } 388 | .modal.active { 389 | -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); 390 | -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1); 391 | transition-timing-function: cubic-bezier(.1, .5, .1, 1); 392 | } 393 | 394 | .toggle { 395 | width: 47px; 396 | border: 2px solid #e6e6e6; 397 | -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; 398 | box-shadow: inset 0 0 0 0 #e1e1e1; 399 | -webkit-transition-duration: .2s; 400 | -moz-transition-duration: .2s; 401 | transition-duration: .2s; 402 | -webkit-transition-property: box-shadow, border; 403 | -moz-transition-property: box-shadow, border; 404 | transition-property: box-shadow, border; 405 | } 406 | .toggle .toggle-handle { 407 | border: 1px solid rgba(0, 0, 0, .2); 408 | -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08); 409 | box-shadow: 0 3px 3px rgba(0, 0, 0, .08); 410 | -webkit-transition-property: -webkit-transform, border, width; 411 | -moz-transition-property: -moz-transform, border, width; 412 | transition-property: transform, border, width; 413 | } 414 | .toggle:before { 415 | display: none; 416 | } 417 | .toggle.active { 418 | background-color: transparent; 419 | border: 2px solid #4cd964; 420 | -webkit-box-shadow: inset 0 0 0 13px #4cd964; 421 | box-shadow: inset 0 0 0 13px #4cd964; 422 | } 423 | .toggle.active .toggle-handle { 424 | -webkit-transform: translate3d(17px, 0, 0); 425 | -ms-transform: translate3d(17px, 0, 0); 426 | transform: translate3d(17px, 0, 0); 427 | } 428 | .toggle.active .toggle-handle { 429 | border-color: #4cd964; 430 | } 431 | 432 | .content.fade { 433 | -webkit-transition: opacity .2s ease-in-out; 434 | -moz-transition: opacity .2s ease-in-out; 435 | transition: opacity .2s ease-in-out; 436 | } 437 | .content.sliding { 438 | -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); 439 | -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1); 440 | transition-timing-function: cubic-bezier(.1, .5, .1, 1); 441 | } 442 | .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { 443 | -webkit-animation-name: fadeOverlay; 444 | -moz-animation-name: fadeOverlay; 445 | animation-name: fadeOverlay; 446 | -webkit-animation-duration: .4s; 447 | -moz-animation-duration: .4s; 448 | animation-duration: .4s; 449 | } 450 | .content.sliding.right:not([class*="sliding-in"]) { 451 | -webkit-animation-direction: reverse; 452 | -moz-animation-direction: reverse; 453 | animation-direction: reverse; 454 | } 455 | .content.sliding.left { 456 | -webkit-transform: translate3d(-20%, 0, 0); 457 | -ms-transform: translate3d(-20%, 0, 0); 458 | transform: translate3d(-20%, 0, 0); 459 | } 460 | 461 | @-webkit-keyframes fadeOverlay { 462 | from { 463 | -webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent; 464 | box-shadow: 0 0 10px transparent, -320px 0 0 transparent; 465 | } 466 | 467 | to { 468 | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1); 469 | box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1); 470 | } 471 | } 472 | -------------------------------------------------------------------------------- /ratchet/css/ratchet-theme-ios.min.css: -------------------------------------------------------------------------------- 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 | */a{color:#007aff}a:active{color:#0062cc}.content{background-color:#efeff4}.h5,.h6,h5,h6,p{color:#8f8f94}.h5,.h6,h5,h6{font-weight:400;text-transform:uppercase}.btn{color:#929292;background-color:rgba(247,247,247,.98);border:1px solid #929292;-webkit-transition:all;-moz-transition:all;transition:all;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s}.btn.active,.btn:active{color:#fff;background-color:#929292}.btn-primary{color:#fff;background-color:#007aff;border:1px solid #007aff}.btn-primary.active,.btn-primary:active{background-color:#0062cc;border:1px solid #0062cc}.btn-positive{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.btn-positive.active,.btn-positive:active{background-color:#2ac845;border:1px solid #2ac845}.btn-negative{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.btn-negative.active,.btn-negative:active{background-color:#cf2d28;border:1px solid #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-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary: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,.15)}.btn .badge.badge-inverted{background-color:transparent}.btn:active .badge{color:#fff}.bar{background-color:rgba(247,247,247,.98);border-bottom:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(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,.bar.bar-footer,.bar.bar-footer-secondary,.bar.bar-footer-secondary-tab{border-top:0}.tab-item{color:#929292}.bar-nav .btn-link,.tab-item.active,.tab-item:active{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,.card .table-view-cell:last-child{background-image:none}.table-view{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.table-view .table-view-cell{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.table-view .table-view-cell:last-child{background-image:none}.table-view .table-view-cell>a:not(.btn):active{color:inherit}.table-view .table-view-divider{background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border-top:0;border-bottom:0}.input-group,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{height:40px;padding:10px 15px;border:1px solid rgba(0,0,0,.2)}input[type=search]{height:34px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}input[type=search]:focus{text-align:left}.input-group,select,textarea{height:auto}.input-group{padding:0;background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%,0 0;border:0}.input-group input{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border:0}.input-group input:last-child{background-image:none}.input-row{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:15px 100%;border-bottom:0}.input-row label+input,.input-row:last-child{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 .1s linear;-moz-transition:background-color .1s linear;transition:background-color .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:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out}.popover:before{border-bottom:15px solid rgba(247,247,247,.98)}.popover .bar{-webkit-box-shadow:none;box-shadow:none}.popover .bar-nav{border-bottom:1px solid rgba(0,0,0,.15)}.popover .table-view{background-image:none;border-radius:12px}.modal,.modal.active{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.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-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:box-shadow,border;-moz-transition-property:box-shadow,border;transition-property:box-shadow,border}.toggle .toggle-handle{border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,.08);box-shadow:0 3px 3px rgba(0,0,0,.08);-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.toggle:before{display:none}.toggle.active{background-color:transparent;border:2px solid #4cd964;-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);border-color:#4cd964}.content.fade{-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.content.sliding{-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);-moz-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1)}.content.sliding.right:not([class*=sliding-in]),.content.sliding.sliding-in{-webkit-animation-name:fadeOverlay;-moz-animation-name:fadeOverlay;animation-name:fadeOverlay;-webkit-animation-duration:.4s;-moz-animation-duration:.4s;animation-duration:.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 transparent,-320px 0 0 transparent;box-shadow:0 0 10px transparent,-320px 0 0 transparent}to{-webkit-box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.3),-320px 0 0 rgba(0,0,0,.1)}} -------------------------------------------------------------------------------- /ratchet/css/ratchet.css: -------------------------------------------------------------------------------- 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 | 11 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 12 | html { 13 | font-family: sans-serif; 14 | -webkit-text-size-adjust: 100%; 15 | -ms-text-size-adjust: 100%; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | article, 23 | aside, 24 | details, 25 | figcaption, 26 | figure, 27 | footer, 28 | header, 29 | hgroup, 30 | main, 31 | nav, 32 | section, 33 | summary { 34 | display: block; 35 | } 36 | 37 | audio, 38 | canvas, 39 | progress, 40 | video { 41 | display: inline-block; 42 | vertical-align: baseline; 43 | } 44 | 45 | audio:not([controls]) { 46 | display: none; 47 | height: 0; 48 | } 49 | 50 | [hidden], 51 | template { 52 | display: none; 53 | } 54 | 55 | a { 56 | background: transparent; 57 | } 58 | 59 | a:active, 60 | a:hover { 61 | outline: 0; 62 | } 63 | 64 | abbr[title] { 65 | border-bottom: 1px dotted; 66 | } 67 | 68 | b, 69 | strong { 70 | font-weight: bold; 71 | } 72 | 73 | dfn { 74 | font-style: italic; 75 | } 76 | 77 | h1 { 78 | margin: .67em 0; 79 | font-size: 2em; 80 | } 81 | 82 | mark { 83 | color: #000; 84 | background: #ff0; 85 | } 86 | 87 | small { 88 | font-size: 80%; 89 | } 90 | 91 | sub, 92 | sup { 93 | position: relative; 94 | font-size: 75%; 95 | line-height: 0; 96 | vertical-align: baseline; 97 | } 98 | 99 | sup { 100 | top: -.5em; 101 | } 102 | 103 | sub { 104 | bottom: -.25em; 105 | } 106 | 107 | img { 108 | border: 0; 109 | } 110 | 111 | svg:not(:root) { 112 | overflow: hidden; 113 | } 114 | 115 | figure { 116 | margin: 1em 40px; 117 | } 118 | 119 | hr { 120 | height: 0; 121 | -moz-box-sizing: content-box; 122 | box-sizing: content-box; 123 | } 124 | 125 | pre { 126 | overflow: auto; 127 | } 128 | 129 | code, 130 | kbd, 131 | pre, 132 | samp { 133 | font-family: monospace, monospace; 134 | font-size: 1em; 135 | } 136 | 137 | button, 138 | input, 139 | optgroup, 140 | select, 141 | textarea { 142 | margin: 0; 143 | font: inherit; 144 | color: inherit; 145 | } 146 | 147 | button { 148 | overflow: visible; 149 | } 150 | 151 | button, 152 | select { 153 | text-transform: none; 154 | } 155 | 156 | button, 157 | html input[type="button"], 158 | input[type="reset"], 159 | input[type="submit"] { 160 | -webkit-appearance: button; 161 | cursor: pointer; 162 | } 163 | 164 | button[disabled], 165 | html input[disabled] { 166 | cursor: default; 167 | } 168 | 169 | button::-moz-focus-inner, 170 | input::-moz-focus-inner { 171 | padding: 0; 172 | border: 0; 173 | } 174 | 175 | input { 176 | line-height: normal; 177 | } 178 | 179 | input[type="checkbox"], 180 | input[type="radio"] { 181 | box-sizing: border-box; 182 | padding: 0; 183 | } 184 | 185 | input[type="number"]::-webkit-inner-spin-button, 186 | input[type="number"]::-webkit-outer-spin-button { 187 | height: auto; 188 | } 189 | 190 | input[type="search"] { 191 | -webkit-box-sizing: content-box; 192 | -moz-box-sizing: content-box; 193 | box-sizing: content-box; 194 | -webkit-appearance: textfield; 195 | } 196 | 197 | input[type="search"]::-webkit-search-cancel-button, 198 | input[type="search"]::-webkit-search-decoration { 199 | -webkit-appearance: none; 200 | } 201 | 202 | fieldset { 203 | padding: .35em .625em .75em; 204 | margin: 0 2px; 205 | border: 1px solid #c0c0c0; 206 | } 207 | 208 | legend { 209 | padding: 0; 210 | border: 0; 211 | } 212 | 213 | textarea { 214 | overflow: auto; 215 | } 216 | 217 | optgroup { 218 | font-weight: bold; 219 | } 220 | 221 | table { 222 | border-spacing: 0; 223 | border-collapse: collapse; 224 | } 225 | 226 | td, 227 | th { 228 | padding: 0; 229 | } 230 | 231 | * { 232 | -webkit-box-sizing: border-box; 233 | -moz-box-sizing: border-box; 234 | box-sizing: border-box; 235 | } 236 | 237 | body { 238 | position: fixed; 239 | top: 0; 240 | right: 0; 241 | bottom: 0; 242 | left: 0; 243 | font-family: "Helvetica Neue", Helvetica, sans-serif; 244 | font-size: 17px; 245 | line-height: 21px; 246 | color: #000; 247 | background-color: #fff; 248 | } 249 | 250 | a { 251 | color: #428bca; 252 | text-decoration: none; 253 | 254 | -webkit-tap-highlight-color: transparent; 255 | } 256 | a:active { 257 | color: #3071a9; 258 | } 259 | 260 | .content { 261 | position: absolute; 262 | top: 0; 263 | right: 0; 264 | bottom: 0; 265 | left: 0; 266 | overflow: auto; 267 | -webkit-overflow-scrolling: touch; 268 | background-color: #fff; 269 | } 270 | 271 | .content > * { 272 | -webkit-transform: translateZ(0); 273 | -ms-transform: translateZ(0); 274 | transform: translateZ(0); 275 | } 276 | 277 | .bar-nav ~ .content { 278 | padding-top: 44px; 279 | } 280 | 281 | .bar-header-secondary ~ .content { 282 | padding-top: 88px; 283 | } 284 | 285 | .bar-footer ~ .content { 286 | padding-bottom: 44px; 287 | } 288 | 289 | .bar-footer-secondary ~ .content { 290 | padding-bottom: 88px; 291 | } 292 | 293 | .bar-tab ~ .content { 294 | padding-bottom: 50px; 295 | } 296 | 297 | .bar-footer-secondary-tab ~ .content { 298 | padding-bottom: 94px; 299 | } 300 | 301 | .content-padded { 302 | margin: 10px; 303 | } 304 | 305 | .pull-left { 306 | float: left; 307 | } 308 | 309 | .pull-right { 310 | float: right; 311 | } 312 | 313 | .clearfix:before, .clearfix:after { 314 | display: table; 315 | content: " "; 316 | } 317 | .clearfix:after { 318 | clear: both; 319 | } 320 | 321 | h1, h2, h3, h4, h5, h6 { 322 | margin-top: 0; 323 | margin-bottom: 10px; 324 | line-height: 1; 325 | } 326 | 327 | h1, .h1 { 328 | font-size: 36px; 329 | } 330 | 331 | h2, .h2 { 332 | font-size: 30px; 333 | } 334 | 335 | h3, .h3 { 336 | font-size: 24px; 337 | } 338 | 339 | h4, .h4 { 340 | font-size: 18px; 341 | } 342 | 343 | h5, .h5 { 344 | margin-top: 20px; 345 | font-size: 14px; 346 | } 347 | 348 | h6, .h6 { 349 | margin-top: 20px; 350 | font-size: 12px; 351 | } 352 | 353 | p { 354 | margin-top: 0; 355 | margin-bottom: 10px; 356 | font-size: 14px; 357 | color: #777; 358 | } 359 | 360 | .btn { 361 | position: relative; 362 | display: inline-block; 363 | padding: 6px 8px 7px; 364 | margin-bottom: 0; 365 | font-size: 12px; 366 | font-weight: 400; 367 | line-height: 1; 368 | color: #333; 369 | text-align: center; 370 | white-space: nowrap; 371 | vertical-align: top; 372 | cursor: pointer; 373 | background-color: white; 374 | border: 1px solid #ccc; 375 | border-radius: 3px; 376 | } 377 | .btn:active, .btn.active { 378 | color: inherit; 379 | background-color: #ccc; 380 | } 381 | .btn:disabled, .btn.disabled { 382 | opacity: .6; 383 | } 384 | 385 | .btn-primary { 386 | color: #fff; 387 | background-color: #428bca; 388 | border: 1px solid #428bca; 389 | } 390 | .btn-primary:active, .btn-primary.active { 391 | color: #fff; 392 | background-color: #3071a9; 393 | border: 1px solid #3071a9; 394 | } 395 | 396 | .btn-positive { 397 | color: #fff; 398 | background-color: #5cb85c; 399 | border: 1px solid #5cb85c; 400 | } 401 | .btn-positive:active, .btn-positive.active { 402 | color: #fff; 403 | background-color: #449d44; 404 | border: 1px solid #449d44; 405 | } 406 | 407 | .btn-negative { 408 | color: #fff; 409 | background-color: #d9534f; 410 | border: 1px solid #d9534f; 411 | } 412 | .btn-negative:active, .btn-negative.active { 413 | color: #fff; 414 | background-color: #c9302c; 415 | border: 1px solid #c9302c; 416 | } 417 | 418 | .btn-outlined { 419 | background-color: transparent; 420 | } 421 | .btn-outlined.btn-primary { 422 | color: #428bca; 423 | } 424 | .btn-outlined.btn-positive { 425 | color: #5cb85c; 426 | } 427 | .btn-outlined.btn-negative { 428 | color: #d9534f; 429 | } 430 | .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { 431 | color: #fff; 432 | } 433 | 434 | .btn-link { 435 | padding-top: 6px; 436 | padding-bottom: 6px; 437 | color: #428bca; 438 | background-color: transparent; 439 | border: 0; 440 | } 441 | .btn-link:active, .btn-link.active { 442 | color: #3071a9; 443 | background-color: transparent; 444 | } 445 | 446 | .btn-block { 447 | display: block; 448 | width: 100%; 449 | padding: 15px 0; 450 | margin-bottom: 10px; 451 | font-size: 18px; 452 | } 453 | 454 | input[type="submit"], 455 | input[type="reset"], 456 | input[type="button"] { 457 | width: 100%; 458 | } 459 | 460 | .btn .badge { 461 | margin: -2px -4px -2px 4px; 462 | font-size: 12px; 463 | background-color: rgba(0, 0, 0, .15); 464 | } 465 | 466 | .btn .badge-inverted, 467 | .btn:active .badge-inverted { 468 | background-color: transparent; 469 | } 470 | 471 | .btn-primary:active .badge-inverted, 472 | .btn-positive:active .badge-inverted, 473 | .btn-negative:active .badge-inverted { 474 | color: #fff; 475 | } 476 | 477 | .btn-block .badge { 478 | position: absolute; 479 | right: 0; 480 | margin-right: 10px; 481 | } 482 | 483 | .btn .icon { 484 | font-size: inherit; 485 | } 486 | 487 | .bar { 488 | position: fixed; 489 | right: 0; 490 | left: 0; 491 | z-index: 10; 492 | height: 44px; 493 | padding-right: 10px; 494 | padding-left: 10px; 495 | background-color: white; 496 | border-bottom: 1px solid #ddd; 497 | 498 | -webkit-backface-visibility: hidden; 499 | backface-visibility: hidden; 500 | } 501 | 502 | .bar-header-secondary { 503 | top: 44px; 504 | } 505 | 506 | .bar-footer { 507 | bottom: 0; 508 | } 509 | 510 | .bar-footer-secondary { 511 | bottom: 44px; 512 | } 513 | 514 | .bar-footer-secondary-tab { 515 | bottom: 50px; 516 | } 517 | 518 | .bar-footer, 519 | .bar-footer-secondary, 520 | .bar-footer-secondary-tab { 521 | border-top: 1px solid #ddd; 522 | border-bottom: 0; 523 | } 524 | 525 | .bar-nav { 526 | top: 0; 527 | } 528 | 529 | .title { 530 | position: absolute; 531 | display: block; 532 | width: 100%; 533 | padding: 0; 534 | margin: 0 -10px; 535 | font-size: 17px; 536 | font-weight: 500; 537 | line-height: 44px; 538 | color: #000; 539 | text-align: center; 540 | white-space: nowrap; 541 | } 542 | 543 | .title a { 544 | color: inherit; 545 | } 546 | 547 | .bar-tab { 548 | bottom: 0; 549 | display: table; 550 | width: 100%; 551 | height: 50px; 552 | padding: 0; 553 | table-layout: fixed; 554 | border-top: 1px solid #ddd; 555 | border-bottom: 0; 556 | } 557 | .bar-tab .tab-item { 558 | display: table-cell; 559 | width: 1%; 560 | height: 50px; 561 | color: #929292; 562 | text-align: center; 563 | vertical-align: middle; 564 | } 565 | .bar-tab .tab-item.active, .bar-tab .tab-item:active { 566 | color: #428bca; 567 | } 568 | .bar-tab .tab-item .icon { 569 | top: 3px; 570 | width: 24px; 571 | height: 24px; 572 | padding-top: 0; 573 | padding-bottom: 0; 574 | } 575 | .bar-tab .tab-item .icon ~ .tab-label { 576 | display: block; 577 | font-size: 11px; 578 | } 579 | 580 | .bar .btn { 581 | position: relative; 582 | top: 7px; 583 | z-index: 20; 584 | padding: 6px 12px 7px; 585 | margin-top: 0; 586 | font-weight: 400; 587 | } 588 | .bar .btn.pull-right { 589 | margin-left: 10px; 590 | } 591 | .bar .btn.pull-left { 592 | margin-right: 10px; 593 | } 594 | 595 | .bar .btn-link { 596 | top: 0; 597 | padding: 0; 598 | font-size: 16px; 599 | line-height: 44px; 600 | color: #428bca; 601 | border: 0; 602 | } 603 | .bar .btn-link:active, .bar .btn-link.active { 604 | color: #3071a9; 605 | } 606 | 607 | .bar .btn-block { 608 | top: 6px; 609 | padding: 7px 0; 610 | margin-bottom: 0; 611 | font-size: 16px; 612 | } 613 | 614 | .bar .btn-nav.pull-left { 615 | margin-left: -5px; 616 | } 617 | .bar .btn-nav.pull-left .icon-left-nav { 618 | margin-right: -3px; 619 | } 620 | .bar .btn-nav.pull-right { 621 | margin-right: -5px; 622 | } 623 | .bar .btn-nav.pull-right .icon-right-nav { 624 | margin-left: -3px; 625 | } 626 | 627 | .bar .icon { 628 | position: relative; 629 | z-index: 20; 630 | padding-top: 10px; 631 | padding-bottom: 10px; 632 | font-size: 24px; 633 | } 634 | .bar .btn .icon { 635 | top: 3px; 636 | padding: 0; 637 | } 638 | .bar .title .icon { 639 | padding: 0; 640 | } 641 | .bar .title .icon.icon-caret { 642 | top: 4px; 643 | margin-left: -5px; 644 | } 645 | 646 | .bar input[type="search"] { 647 | height: 29px; 648 | margin: 6px 0; 649 | } 650 | 651 | .bar .segmented-control { 652 | top: 7px; 653 | margin: 0 auto; 654 | } 655 | 656 | .badge { 657 | display: inline-block; 658 | padding: 2px 9px 3px; 659 | font-size: 12px; 660 | line-height: 1; 661 | color: #333; 662 | background-color: rgba(0, 0, 0, .15); 663 | border-radius: 100px; 664 | } 665 | .badge.badge-inverted { 666 | padding: 0 5px 0 0; 667 | background-color: transparent; 668 | } 669 | 670 | .badge-primary { 671 | color: #fff; 672 | background-color: #428bca; 673 | } 674 | .badge-primary.badge-inverted { 675 | color: #428bca; 676 | } 677 | 678 | .badge-positive { 679 | color: #fff; 680 | background-color: #5cb85c; 681 | } 682 | .badge-positive.badge-inverted { 683 | color: #5cb85c; 684 | } 685 | 686 | .badge-negative { 687 | color: #fff; 688 | background-color: #d9534f; 689 | } 690 | .badge-negative.badge-inverted { 691 | color: #d9534f; 692 | } 693 | 694 | .card { 695 | margin: 10px; 696 | overflow: hidden; 697 | background-color: white; 698 | border: 1px solid #ddd; 699 | border-radius: 6px; 700 | } 701 | 702 | .card .table-view { 703 | margin-bottom: 0; 704 | border-top: 0; 705 | border-bottom: 0; 706 | } 707 | .card .table-view .table-view-divider:first-child { 708 | top: 0; 709 | border-top-left-radius: 6px; 710 | border-top-right-radius: 6px; 711 | } 712 | .card .table-view .table-view-divider:last-child { 713 | border-bottom-right-radius: 6px; 714 | border-bottom-left-radius: 6px; 715 | } 716 | 717 | .card .table-view-cell:last-child { 718 | border-bottom: 0; 719 | } 720 | 721 | .table-view { 722 | padding-left: 0; 723 | margin-top: 0; 724 | margin-bottom: 15px; 725 | list-style: none; 726 | background-color: #fff; 727 | border-top: 1px solid #ddd; 728 | border-bottom: 1px solid #ddd; 729 | } 730 | 731 | .table-view-cell { 732 | position: relative; 733 | padding: 11px 65px 11px 15px; 734 | overflow: hidden; 735 | border-bottom: 1px solid #ddd; 736 | } 737 | .table-view-cell:last-child { 738 | border-bottom: 0; 739 | } 740 | .table-view-cell > a:not(.btn) { 741 | position: relative; 742 | display: block; 743 | padding: inherit; 744 | margin: -11px -65px -11px -15px; 745 | overflow: hidden; 746 | color: inherit; 747 | } 748 | .table-view-cell > a:not(.btn):active { 749 | background-color: #eee; 750 | } 751 | .table-view-cell p { 752 | margin-bottom: 0; 753 | } 754 | 755 | .table-view-divider { 756 | padding-top: 6px; 757 | padding-bottom: 6px; 758 | padding-left: 15px; 759 | margin-top: -1px; 760 | margin-left: 0; 761 | font-weight: 500; 762 | color: #999; 763 | background-color: #fafafa; 764 | border-top: 1px solid #ddd; 765 | border-bottom: 1px solid #ddd; 766 | } 767 | 768 | .table-view .media, 769 | .table-view .media-body { 770 | overflow: hidden; 771 | } 772 | 773 | .table-view .media-object.pull-left { 774 | margin-right: 10px; 775 | } 776 | .table-view .media-object.pull-right { 777 | margin-left: 10px; 778 | } 779 | 780 | .table-view-cell > .btn, 781 | .table-view-cell > .badge, 782 | .table-view-cell > .toggle, 783 | .table-view-cell > a > .btn, 784 | .table-view-cell > a > .badge, 785 | .table-view-cell > a > .toggle { 786 | position: absolute; 787 | top: 50%; 788 | right: 15px; 789 | -webkit-transform: translateY(-50%); 790 | -ms-transform: translateY(-50%); 791 | transform: translateY(-50%); 792 | } 793 | .table-view-cell .navigate-left > .btn, 794 | .table-view-cell .navigate-left > .badge, 795 | .table-view-cell .navigate-left > .toggle, 796 | .table-view-cell .navigate-right > .btn, 797 | .table-view-cell .navigate-right > .badge, 798 | .table-view-cell .navigate-right > .toggle, 799 | .table-view-cell .push-left > .btn, 800 | .table-view-cell .push-left > .badge, 801 | .table-view-cell .push-left > .toggle, 802 | .table-view-cell .push-right > .btn, 803 | .table-view-cell .push-right > .badge, 804 | .table-view-cell .push-right > .toggle, 805 | .table-view-cell > a .navigate-left > .btn, 806 | .table-view-cell > a .navigate-left > .badge, 807 | .table-view-cell > a .navigate-left > .toggle, 808 | .table-view-cell > a .navigate-right > .btn, 809 | .table-view-cell > a .navigate-right > .badge, 810 | .table-view-cell > a .navigate-right > .toggle, 811 | .table-view-cell > a .push-left > .btn, 812 | .table-view-cell > a .push-left > .badge, 813 | .table-view-cell > a .push-left > .toggle, 814 | .table-view-cell > a .push-right > .btn, 815 | .table-view-cell > a .push-right > .badge, 816 | .table-view-cell > a .push-right > .toggle { 817 | right: 35px; 818 | } 819 | 820 | .content > .table-view:first-child { 821 | margin-top: 15px; 822 | } 823 | 824 | input, 825 | textarea, 826 | button, 827 | select { 828 | font-family: "Helvetica Neue", Helvetica, sans-serif; 829 | font-size: 17px; 830 | } 831 | 832 | select, 833 | textarea, 834 | input[type="text"], 835 | input[type="search"], 836 | input[type="password"], 837 | input[type="datetime"], 838 | input[type="datetime-local"], 839 | input[type="date"], 840 | input[type="month"], 841 | input[type="time"], 842 | input[type="week"], 843 | input[type="number"], 844 | input[type="email"], 845 | input[type="url"], 846 | input[type="tel"], 847 | input[type="color"] { 848 | width: 100%; 849 | height: 35px; 850 | -webkit-appearance: none; 851 | padding: 0 15px; 852 | margin-bottom: 15px; 853 | line-height: 21px; 854 | background-color: #fff; 855 | border: 1px solid #ddd; 856 | border-radius: 3px; 857 | outline: none; 858 | } 859 | 860 | input[type="search"] { 861 | -webkit-box-sizing: border-box; 862 | -moz-box-sizing: border-box; 863 | box-sizing: border-box; 864 | padding: 0 10px; 865 | font-size: 16px; 866 | border-radius: 20px; 867 | } 868 | 869 | input[type="search"]:focus { 870 | text-align: left; 871 | } 872 | 873 | textarea { 874 | height: auto; 875 | } 876 | 877 | select { 878 | height: auto; 879 | font-size: 14px; 880 | background-color: #f8f8f8; 881 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); 882 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); 883 | } 884 | 885 | .input-group { 886 | background-color: #fff; 887 | } 888 | 889 | .input-group input, 890 | .input-group textarea { 891 | margin-bottom: 0; 892 | background-color: transparent; 893 | border-top: 0; 894 | border-right: 0; 895 | border-left: 0; 896 | border-radius: 0; 897 | -webkit-box-shadow: none; 898 | box-shadow: none; 899 | } 900 | 901 | .input-row { 902 | height: 35px; 903 | overflow: hidden; 904 | border-bottom: 1px solid #ddd; 905 | } 906 | 907 | .input-row label { 908 | float: left; 909 | width: 35%; 910 | padding: 8px 15px; 911 | font-family: "Helvetica Neue", Helvetica, sans-serif; 912 | line-height: 1.1; 913 | } 914 | 915 | .input-row input { 916 | float: right; 917 | width: 65%; 918 | padding-left: 0; 919 | margin-bottom: 0; 920 | border: 0; 921 | } 922 | 923 | .segmented-control { 924 | position: relative; 925 | display: table; 926 | overflow: hidden; 927 | font-size: 12px; 928 | font-weight: 400; 929 | background-color: white; 930 | border: 1px solid #ccc; 931 | border-radius: 3px; 932 | } 933 | .segmented-control .control-item { 934 | display: table-cell; 935 | width: 1%; 936 | padding-top: 6px; 937 | padding-bottom: 7px; 938 | overflow: hidden; 939 | line-height: 1; 940 | color: #333; 941 | text-align: center; 942 | text-overflow: ellipsis; 943 | white-space: nowrap; 944 | border-left: 1px solid #ccc; 945 | } 946 | .segmented-control .control-item:first-child { 947 | border-left-width: 0; 948 | } 949 | .segmented-control .control-item:active { 950 | background-color: #eee; 951 | } 952 | .segmented-control .control-item.active { 953 | background-color: #ccc; 954 | } 955 | 956 | .segmented-control-primary { 957 | border-color: #428bca; 958 | } 959 | .segmented-control-primary .control-item { 960 | color: #428bca; 961 | border-color: inherit; 962 | } 963 | .segmented-control-primary .control-item:active { 964 | background-color: #cde1f1; 965 | } 966 | .segmented-control-primary .control-item.active { 967 | color: #fff; 968 | background-color: #428bca; 969 | } 970 | 971 | .segmented-control-positive { 972 | border-color: #5cb85c; 973 | } 974 | .segmented-control-positive .control-item { 975 | color: #5cb85c; 976 | border-color: inherit; 977 | } 978 | .segmented-control-positive .control-item:active { 979 | background-color: #d8eed8; 980 | } 981 | .segmented-control-positive .control-item.active { 982 | color: #fff; 983 | background-color: #5cb85c; 984 | } 985 | 986 | .segmented-control-negative { 987 | border-color: #d9534f; 988 | } 989 | .segmented-control-negative .control-item { 990 | color: #d9534f; 991 | border-color: inherit; 992 | } 993 | .segmented-control-negative .control-item:active { 994 | background-color: #f9e2e2; 995 | } 996 | .segmented-control-negative .control-item.active { 997 | color: #fff; 998 | background-color: #d9534f; 999 | } 1000 | 1001 | .control-content { 1002 | display: none; 1003 | } 1004 | .control-content.active { 1005 | display: block; 1006 | } 1007 | 1008 | .popover { 1009 | position: fixed; 1010 | top: 55px; 1011 | left: 50%; 1012 | z-index: 20; 1013 | display: none; 1014 | width: 280px; 1015 | margin-left: -140px; 1016 | background-color: white; 1017 | border-radius: 6px; 1018 | -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1); 1019 | box-shadow: 0 0 15px rgba(0, 0, 0, .1); 1020 | opacity: 0; 1021 | -webkit-transition: all .25s linear; 1022 | -moz-transition: all .25s linear; 1023 | transition: all .25s linear; 1024 | -webkit-transform: translate3d(0, -15px, 0); 1025 | -ms-transform: translate3d(0, -15px, 0); 1026 | transform: translate3d(0, -15px, 0); 1027 | } 1028 | .popover:before { 1029 | position: absolute; 1030 | top: -15px; 1031 | left: 50%; 1032 | width: 0; 1033 | height: 0; 1034 | margin-left: -15px; 1035 | content: ''; 1036 | border-right: 15px solid transparent; 1037 | border-bottom: 15px solid white; 1038 | border-left: 15px solid transparent; 1039 | } 1040 | .popover.visible { 1041 | opacity: 1; 1042 | -webkit-transform: translate3d(0, 0, 0); 1043 | -ms-transform: translate3d(0, 0, 0); 1044 | transform: translate3d(0, 0, 0); 1045 | } 1046 | .popover .bar ~ .table-view { 1047 | padding-top: 44px; 1048 | } 1049 | 1050 | .backdrop { 1051 | position: fixed; 1052 | top: 0; 1053 | right: 0; 1054 | bottom: 0; 1055 | left: 0; 1056 | z-index: 15; 1057 | background-color: rgba(0, 0, 0, .3); 1058 | } 1059 | 1060 | .popover .btn-block { 1061 | margin-bottom: 5px; 1062 | } 1063 | .popover .btn-block:last-child { 1064 | margin-bottom: 0; 1065 | } 1066 | 1067 | .popover .bar-nav { 1068 | border-bottom: 1px solid #ddd; 1069 | border-top-left-radius: 12px; 1070 | border-top-right-radius: 12px; 1071 | -webkit-box-shadow: none; 1072 | box-shadow: none; 1073 | } 1074 | 1075 | .popover .table-view { 1076 | max-height: 300px; 1077 | margin-bottom: 0; 1078 | overflow: auto; 1079 | -webkit-overflow-scrolling: touch; 1080 | background-color: #fff; 1081 | border-top: 0; 1082 | border-bottom: 0; 1083 | border-radius: 6px; 1084 | } 1085 | 1086 | .modal { 1087 | position: fixed; 1088 | top: 0; 1089 | z-index: 11; 1090 | width: 100%; 1091 | min-height: 100%; 1092 | overflow: hidden; 1093 | background-color: #fff; 1094 | opacity: 0; 1095 | -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; 1096 | -moz-transition: -moz-transform .25s, opacity 1ms .25s; 1097 | transition: transform .25s, opacity 1ms .25s; 1098 | -webkit-transform: translate3d(0, 100%, 0); 1099 | -ms-transform: translate3d(0, 100%, 0); 1100 | transform: translate3d(0, 100%, 0); 1101 | } 1102 | .modal.active { 1103 | height: 100%; 1104 | opacity: 1; 1105 | -webkit-transition: -webkit-transform .25s; 1106 | -moz-transition: -moz-transform .25s; 1107 | transition: transform .25s; 1108 | -webkit-transform: translate3d(0, 0, 0); 1109 | -ms-transform: translate3d(0, 0, 0); 1110 | transform: translate3d(0, 0, 0); 1111 | } 1112 | 1113 | .slider { 1114 | width: 100%; 1115 | } 1116 | 1117 | .slider { 1118 | overflow: hidden; 1119 | background-color: #000; 1120 | } 1121 | .slider .slide-group { 1122 | position: relative; 1123 | font-size: 0; 1124 | white-space: nowrap; 1125 | -webkit-transition: all 0s linear; 1126 | -moz-transition: all 0s linear; 1127 | transition: all 0s linear; 1128 | } 1129 | .slider .slide-group .slide { 1130 | display: inline-block; 1131 | width: 100%; 1132 | height: 100%; 1133 | font-size: 14px; 1134 | vertical-align: top; 1135 | } 1136 | 1137 | .toggle { 1138 | position: relative; 1139 | display: block; 1140 | width: 74px; 1141 | height: 30px; 1142 | background-color: #fff; 1143 | border: 2px solid #ddd; 1144 | border-radius: 20px; 1145 | -webkit-transition-duration: .2s; 1146 | -moz-transition-duration: .2s; 1147 | transition-duration: .2s; 1148 | -webkit-transition-property: background-color, border; 1149 | -moz-transition-property: background-color, border; 1150 | transition-property: background-color, border; 1151 | } 1152 | .toggle .toggle-handle { 1153 | position: absolute; 1154 | top: -1px; 1155 | left: -1px; 1156 | z-index: 2; 1157 | width: 28px; 1158 | height: 28px; 1159 | background-color: #fff; 1160 | border: 1px solid #ddd; 1161 | border-radius: 100px; 1162 | -webkit-transition-duration: .2s; 1163 | -moz-transition-duration: .2s; 1164 | transition-duration: .2s; 1165 | -webkit-transition-property: -webkit-transform, border, width; 1166 | -moz-transition-property: -moz-transform, border, width; 1167 | transition-property: transform, border, width; 1168 | } 1169 | .toggle:before { 1170 | position: absolute; 1171 | top: 3px; 1172 | right: 11px; 1173 | font-size: 13px; 1174 | color: #999; 1175 | text-transform: uppercase; 1176 | content: "Off"; 1177 | } 1178 | .toggle.active { 1179 | background-color: #5cb85c; 1180 | border: 2px solid #5cb85c; 1181 | } 1182 | .toggle.active .toggle-handle { 1183 | border-color: #5cb85c; 1184 | -webkit-transform: translate3d(44px, 0, 0); 1185 | -ms-transform: translate3d(44px, 0, 0); 1186 | transform: translate3d(44px, 0, 0); 1187 | } 1188 | .toggle.active:before { 1189 | right: auto; 1190 | left: 15px; 1191 | color: #fff; 1192 | content: "On"; 1193 | } 1194 | .toggle input[type="checkbox"] { 1195 | display: none; 1196 | } 1197 | 1198 | .content.fade { 1199 | left: 0; 1200 | opacity: 0; 1201 | } 1202 | .content.fade.in { 1203 | opacity: 1; 1204 | } 1205 | .content.sliding { 1206 | z-index: 2; 1207 | -webkit-transition: -webkit-transform .4s; 1208 | -moz-transition: -moz-transform .4s; 1209 | transition: transform .4s; 1210 | -webkit-transform: translate3d(0, 0, 0); 1211 | -ms-transform: translate3d(0, 0, 0); 1212 | transform: translate3d(0, 0, 0); 1213 | } 1214 | .content.sliding.left { 1215 | z-index: 1; 1216 | -webkit-transform: translate3d(-100%, 0, 0); 1217 | -ms-transform: translate3d(-100%, 0, 0); 1218 | transform: translate3d(-100%, 0, 0); 1219 | } 1220 | .content.sliding.right { 1221 | z-index: 3; 1222 | -webkit-transform: translate3d(100%, 0, 0); 1223 | -ms-transform: translate3d(100%, 0, 0); 1224 | transform: translate3d(100%, 0, 0); 1225 | } 1226 | 1227 | .navigate-left:after, 1228 | .navigate-right:after, 1229 | .push-left:after, 1230 | .push-right:after { 1231 | position: absolute; 1232 | top: 50%; 1233 | display: inline-block; 1234 | font-family: Ratchicons; 1235 | font-size: inherit; 1236 | line-height: 1; 1237 | color: #bbb; 1238 | text-decoration: none; 1239 | -webkit-transform: translateY(-50%); 1240 | -ms-transform: translateY(-50%); 1241 | transform: translateY(-50%); 1242 | 1243 | -webkit-font-smoothing: antialiased; 1244 | } 1245 | 1246 | .navigate-left:after, 1247 | .push-left:after { 1248 | left: 15px; 1249 | content: '\e822'; 1250 | } 1251 | 1252 | .navigate-right:after, 1253 | .push-right:after { 1254 | right: 15px; 1255 | content: '\e826'; 1256 | } 1257 | 1258 | @font-face { 1259 | font-family: Ratchicons; 1260 | font-style: normal; 1261 | font-weight: normal; 1262 | 1263 | src: url("../fonts/ratchicons.eot"); 1264 | src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg"); 1265 | } 1266 | .icon { 1267 | display: inline-block; 1268 | font-family: Ratchicons; 1269 | font-size: 24px; 1270 | line-height: 1; 1271 | text-decoration: none; 1272 | 1273 | -webkit-font-smoothing: antialiased; 1274 | } 1275 | 1276 | .icon-back:before { 1277 | content: '\e80a'; 1278 | } 1279 | 1280 | .icon-bars:before { 1281 | content: '\e80e'; 1282 | } 1283 | 1284 | .icon-caret:before { 1285 | content: '\e80f'; 1286 | } 1287 | 1288 | .icon-check:before { 1289 | content: '\e810'; 1290 | } 1291 | 1292 | .icon-close:before { 1293 | content: '\e811'; 1294 | } 1295 | 1296 | .icon-code:before { 1297 | content: '\e812'; 1298 | } 1299 | 1300 | .icon-compose:before { 1301 | content: '\e813'; 1302 | } 1303 | 1304 | .icon-download:before { 1305 | content: '\e815'; 1306 | } 1307 | 1308 | .icon-edit:before { 1309 | content: '\e829'; 1310 | } 1311 | 1312 | .icon-forward:before { 1313 | content: '\e82a'; 1314 | } 1315 | 1316 | .icon-gear:before { 1317 | content: '\e821'; 1318 | } 1319 | 1320 | .icon-home:before { 1321 | content: '\e82b'; 1322 | } 1323 | 1324 | .icon-info:before { 1325 | content: '\e82c'; 1326 | } 1327 | 1328 | .icon-list:before { 1329 | content: '\e823'; 1330 | } 1331 | 1332 | .icon-more-vertical:before { 1333 | content: '\e82e'; 1334 | } 1335 | 1336 | .icon-more:before { 1337 | content: '\e82f'; 1338 | } 1339 | 1340 | .icon-pages:before { 1341 | content: '\e824'; 1342 | } 1343 | 1344 | .icon-pause:before { 1345 | content: '\e830'; 1346 | } 1347 | 1348 | .icon-person:before { 1349 | content: '\e832'; 1350 | } 1351 | 1352 | .icon-play:before { 1353 | content: '\e816'; 1354 | } 1355 | 1356 | .icon-plus:before { 1357 | content: '\e817'; 1358 | } 1359 | 1360 | .icon-refresh:before { 1361 | content: '\e825'; 1362 | } 1363 | 1364 | .icon-search:before { 1365 | content: '\e819'; 1366 | } 1367 | 1368 | .icon-share:before { 1369 | content: '\e81a'; 1370 | } 1371 | 1372 | .icon-sound:before { 1373 | content: '\e827'; 1374 | } 1375 | 1376 | .icon-sound2:before { 1377 | content: '\e828'; 1378 | } 1379 | 1380 | .icon-sound3:before { 1381 | content: '\e80b'; 1382 | } 1383 | 1384 | .icon-sound4:before { 1385 | content: '\e80c'; 1386 | } 1387 | 1388 | .icon-star-filled:before { 1389 | content: '\e81b'; 1390 | } 1391 | 1392 | .icon-star:before { 1393 | content: '\e81c'; 1394 | } 1395 | 1396 | .icon-stop:before { 1397 | content: '\e81d'; 1398 | } 1399 | 1400 | .icon-trash:before { 1401 | content: '\e81e'; 1402 | } 1403 | 1404 | .icon-up-nav:before { 1405 | content: '\e81f'; 1406 | } 1407 | 1408 | .icon-up:before { 1409 | content: '\e80d'; 1410 | } 1411 | 1412 | .icon-right-nav:before { 1413 | content: '\e818'; 1414 | } 1415 | 1416 | .icon-right:before { 1417 | content: '\e826'; 1418 | } 1419 | 1420 | .icon-down-nav:before { 1421 | content: '\e814'; 1422 | } 1423 | 1424 | .icon-down:before { 1425 | content: '\e820'; 1426 | } 1427 | 1428 | .icon-left-nav:before { 1429 | content: '\e82d'; 1430 | } 1431 | 1432 | .icon-left:before { 1433 | content: '\e822'; 1434 | } 1435 | -------------------------------------------------------------------------------- /ratchet/css/ratchet.min.css: -------------------------------------------------------------------------------- 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 | *//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{position:fixed;top:0;right:0;bottom:0;left:0;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#fff}a{color:#428bca;text-decoration:none;-webkit-tap-highlight-color:transparent}a:active{color:#3071a9}.content{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:#fff}.content>*{-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.bar-nav~.content{padding-top:44px}.bar-header-secondary~.content{padding-top:88px}.bar-footer~.content{padding-bottom:44px}.bar-footer-secondary~.content{padding-bottom:88px}.bar-tab~.content{padding-bottom:50px}.bar-footer-secondary-tab~.content{padding-bottom:94px}.content-padded{margin:10px}.pull-left{float:left}.pull-right{float:right}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:10px;line-height:1}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{margin-top:20px;font-size:14px}.h6,h6{margin-top:20px;font-size:12px}p{margin-top:0;margin-bottom:10px;font-size:14px;color:#777}.btn{position:relative;display:inline-block;padding:6px 8px 7px;margin-bottom:0;font-size:12px;font-weight:400;line-height:1;color:#333;text-align:center;white-space:nowrap;vertical-align:top;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px}.btn.active,.btn:active{color:inherit;background-color:#ccc}.btn.disabled,.btn:disabled{opacity:.6}.btn-primary{color:#fff;background-color:#428bca;border:1px solid #428bca}.btn-primary.active,.btn-primary:active{color:#fff;background-color:#3071a9;border:1px solid #3071a9}.btn-positive{color:#fff;background-color:#5cb85c;border:1px solid #5cb85c}.btn-positive.active,.btn-positive:active{color:#fff;background-color:#449d44;border:1px solid #449d44}.btn-negative{color:#fff;background-color:#d9534f;border:1px solid #d9534f}.btn-negative.active,.btn-negative:active{color:#fff;background-color:#c9302c;border:1px solid #c9302c}.btn-outlined{background-color:transparent}.btn-outlined.btn-primary{color:#428bca}.btn-outlined.btn-positive{color:#5cb85c}.btn-outlined.btn-negative{color:#d9534f}.btn-outlined.btn-negative:active,.btn-outlined.btn-positive:active,.btn-outlined.btn-primary:active{color:#fff}.btn-link{padding-top:6px;padding-bottom:6px;color:#428bca;background-color:transparent;border:0}.btn-link.active,.btn-link:active{color:#3071a9;background-color:transparent}.btn-block{display:block;width:100%;padding:15px 0;margin-bottom:10px;font-size:18px}input[type=button],input[type=reset],input[type=submit]{width:100%}.btn .badge{margin:-2px -4px -2px 4px;font-size:12px;background-color:rgba(0,0,0,.15)}.btn .badge-inverted,.btn:active .badge-inverted{background-color:transparent}.btn-negative:active .badge-inverted,.btn-positive:active .badge-inverted,.btn-primary:active .badge-inverted{color:#fff}.btn-block .badge{position:absolute;right:0;margin-right:10px}.btn .icon{font-size:inherit}.bar{position:fixed;right:0;left:0;z-index:10;height:44px;padding-right:10px;padding-left:10px;background-color:#fff;border-bottom:1px solid #ddd;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bar-header-secondary{top:44px}.bar-footer{bottom:0}.bar-footer-secondary{bottom:44px}.bar-footer-secondary-tab{bottom:50px}.bar-footer,.bar-footer-secondary,.bar-footer-secondary-tab{border-top:1px solid #ddd;border-bottom:0}.bar-nav{top:0}.title{position:absolute;display:block;width:100%;padding:0;margin:0 -10px;font-size:17px;font-weight:500;line-height:44px;color:#000;text-align:center;white-space:nowrap}.title a{color:inherit}.bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:1px solid #ddd;border-bottom:0}.bar-tab .tab-item{display:table-cell;width:1%;height:50px;color:#929292;text-align:center;vertical-align:middle}.bar-tab .tab-item.active,.bar-tab .tab-item:active{color:#428bca}.bar-tab .tab-item .icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.bar-tab .tab-item .icon~.tab-label{display:block;font-size:11px}.bar .btn{position:relative;top:7px;z-index:20;padding:6px 12px 7px;margin-top:0;font-weight:400}.bar .btn.pull-right{margin-left:10px}.bar .btn.pull-left{margin-right:10px}.bar .btn-link{top:0;padding:0;font-size:16px;line-height:44px;color:#428bca;border:0}.bar .btn-link.active,.bar .btn-link:active{color:#3071a9}.bar .btn-block{top:6px;padding:7px 0;margin-bottom:0;font-size:16px}.bar .btn-nav.pull-left{margin-left:-5px}.bar .btn-nav.pull-left .icon-left-nav{margin-right:-3px}.bar .btn-nav.pull-right{margin-right:-5px}.bar .btn-nav.pull-right .icon-right-nav{margin-left:-3px}.bar .icon{position:relative;z-index:20;padding-top:10px;padding-bottom:10px;font-size:24px}.bar .btn .icon{top:3px;padding:0}.bar .title .icon{padding:0}.bar .title .icon.icon-caret{top:4px;margin-left:-5px}.bar input[type=search]{height:29px;margin:6px 0}.bar .segmented-control{top:7px;margin:0 auto}.badge{display:inline-block;padding:2px 9px 3px;font-size:12px;line-height:1;color:#333;background-color:rgba(0,0,0,.15);border-radius:100px}.badge.badge-inverted{padding:0 5px 0 0;background-color:transparent}.badge-primary{color:#fff;background-color:#428bca}.badge-primary.badge-inverted{color:#428bca}.badge-positive{color:#fff;background-color:#5cb85c}.badge-positive.badge-inverted{color:#5cb85c}.badge-negative{color:#fff;background-color:#d9534f}.badge-negative.badge-inverted{color:#d9534f}.card{margin:10px;overflow:hidden;background-color:#fff;border:1px solid #ddd;border-radius:6px}.card .table-view{margin-bottom:0;border-top:0;border-bottom:0}.card .table-view .table-view-divider:first-child{top:0;border-top-left-radius:6px;border-top-right-radius:6px}.card .table-view .table-view-divider:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.card .table-view-cell:last-child{border-bottom:0}.table-view{padding-left:0;margin-top:0;margin-bottom:15px;list-style:none;background-color:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.table-view-cell{position:relative;padding:11px 65px 11px 15px;overflow:hidden;border-bottom:1px solid #ddd}.table-view-cell:last-child{border-bottom:0}.table-view-cell>a:not(.btn){position:relative;display:block;padding:inherit;margin:-11px -65px -11px -15px;overflow:hidden;color:inherit}.table-view-cell>a:not(.btn):active{background-color:#eee}.table-view-cell p{margin-bottom:0}.table-view-divider{padding-top:6px;padding-bottom:6px;padding-left:15px;margin-top:-1px;margin-left:0;font-weight:500;color:#999;background-color:#fafafa;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.table-view .media,.table-view .media-body{overflow:hidden}.table-view .media-object.pull-left{margin-right:10px}.table-view .media-object.pull-right{margin-left:10px}.table-view-cell>.badge,.table-view-cell>.btn,.table-view-cell>.toggle,.table-view-cell>a>.badge,.table-view-cell>a>.btn,.table-view-cell>a>.toggle{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.table-view-cell .navigate-left>.badge,.table-view-cell .navigate-left>.btn,.table-view-cell .navigate-left>.toggle,.table-view-cell .navigate-right>.badge,.table-view-cell .navigate-right>.btn,.table-view-cell .navigate-right>.toggle,.table-view-cell .push-left>.badge,.table-view-cell .push-left>.btn,.table-view-cell .push-left>.toggle,.table-view-cell .push-right>.badge,.table-view-cell .push-right>.btn,.table-view-cell .push-right>.toggle,.table-view-cell>a .navigate-left>.badge,.table-view-cell>a .navigate-left>.btn,.table-view-cell>a .navigate-left>.toggle,.table-view-cell>a .navigate-right>.badge,.table-view-cell>a .navigate-right>.btn,.table-view-cell>a .navigate-right>.toggle,.table-view-cell>a .push-left>.badge,.table-view-cell>a .push-left>.btn,.table-view-cell>a .push-left>.toggle,.table-view-cell>a .push-right>.badge,.table-view-cell>a .push-right>.btn,.table-view-cell>a .push-right>.toggle{right:35px}.content>.table-view:first-child{margin-top:15px}button,input,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;height:35px;-webkit-appearance:none;padding:0 15px;margin-bottom:15px;line-height:21px;background-color:#fff;border:1px solid #ddd;border-radius:3px;outline:0}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 10px;font-size:16px;border-radius:20px}input[type=search]:focus{text-align:left}textarea{height:auto}select{height:auto;font-size:14px;background-color:#f8f8f8;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.input-group{background-color:#fff}.input-group input,.input-group textarea{margin-bottom:0;background-color:transparent;border-top:0;border-right:0;border-left:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.input-row{height:35px;overflow:hidden;border-bottom:1px solid #ddd}.input-row label{float:left;width:35%;padding:8px 15px;font-family:"Helvetica Neue",Helvetica,sans-serif;line-height:1.1}.input-row input{float:right;width:65%;padding-left:0;margin-bottom:0;border:0}.segmented-control{position:relative;display:table;overflow:hidden;font-size:12px;font-weight:400;background-color:#fff;border:1px solid #ccc;border-radius:3px}.segmented-control .control-item{display:table-cell;width:1%;padding-top:6px;padding-bottom:7px;overflow:hidden;line-height:1;color:#333;text-align:center;text-overflow:ellipsis;white-space:nowrap;border-left:1px solid #ccc}.segmented-control .control-item:first-child{border-left-width:0}.segmented-control .control-item:active{background-color:#eee}.segmented-control .control-item.active{background-color:#ccc}.segmented-control-primary{border-color:#428bca}.segmented-control-primary .control-item{color:#428bca;border-color:inherit}.segmented-control-primary .control-item:active{background-color:#cde1f1}.segmented-control-primary .control-item.active{color:#fff;background-color:#428bca}.segmented-control-positive{border-color:#5cb85c}.segmented-control-positive .control-item{color:#5cb85c;border-color:inherit}.segmented-control-positive .control-item:active{background-color:#d8eed8}.segmented-control-positive .control-item.active{color:#fff;background-color:#5cb85c}.segmented-control-negative{border-color:#d9534f}.segmented-control-negative .control-item{color:#d9534f;border-color:inherit}.segmented-control-negative .control-item:active{background-color:#f9e2e2}.segmented-control-negative .control-item.active{color:#fff;background-color:#d9534f}.control-content{display:none}.control-content.active{display:block}.popover{position:fixed;top:55px;left:50%;z-index:20;display:none;width:280px;margin-left:-140px;background-color:#fff;border-radius:6px;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1);opacity:0;-webkit-transition:all .25s linear;-moz-transition:all .25s linear;transition:all .25s linear;-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}.popover:before{position:absolute;top:-15px;left:50%;width:0;height:0;margin-left:-15px;content:'';border-right:15px solid transparent;border-bottom:15px solid #fff;border-left:15px solid transparent}.popover.visible{opacity:1;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.popover .bar~.table-view{padding-top:44px}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;background-color:rgba(0,0,0,.3)}.popover .btn-block{margin-bottom:5px}.popover .btn-block:last-child{margin-bottom:0}.popover .bar-nav{border-bottom:1px solid #ddd;border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.popover .table-view{max-height:300px;margin-bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:#fff;border-top:0;border-bottom:0;border-radius:6px}.modal{position:fixed;top:0;z-index:11;width:100%;min-height:100%;overflow:hidden;background-color:#fff;opacity:0;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;-moz-transition:-moz-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.modal.active{height:100%;opacity:1;-webkit-transition:-webkit-transform .25s;-moz-transition:-moz-transform .25s;transition:transform .25s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slider{width:100%;overflow:hidden;background-color:#000}.slider .slide-group{position:relative;font-size:0;white-space:nowrap;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;transition:all 0s linear}.slider .slide-group .slide{display:inline-block;width:100%;height:100%;font-size:14px;vertical-align:top}.toggle{position:relative;display:block;width:74px;height:30px;background-color:#fff;border:2px solid #ddd;border-radius:20px;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;-moz-transition-property:background-color,border;transition-property:background-color,border}.toggle .toggle-handle{position:absolute;top:-1px;left:-1px;z-index:2;width:28px;height:28px;background-color:#fff;border:1px solid #ddd;border-radius:100px;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,width}.toggle:before{position:absolute;top:3px;right:11px;font-size:13px;color:#999;text-transform:uppercase;content:"Off"}.toggle.active{background-color:#5cb85c;border:2px solid #5cb85c}.toggle.active .toggle-handle{border-color:#5cb85c;-webkit-transform:translate3d(44px,0,0);-ms-transform:translate3d(44px,0,0);transform:translate3d(44px,0,0)}.toggle.active:before{right:auto;left:15px;color:#fff;content:"On"}.toggle input[type=checkbox]{display:none}.content.fade{left:0;opacity:0}.content.fade.in{opacity:1}.content.sliding{z-index:2;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.content.sliding.left{z-index:1;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.content.sliding.right{z-index:3;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.navigate-left:after,.navigate-right:after,.push-left:after,.push-right:after{position:absolute;top:50%;display:inline-block;font-family:Ratchicons;font-size:inherit;line-height:1;color:#bbb;text-decoration:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased}.navigate-left:after,.push-left:after{left:15px;content:'\e822'}.navigate-right:after,.push-right:after{right:15px;content:'\e826'}@font-face{font-family:Ratchicons;font-style:normal;font-weight:400;src:url(../fonts/ratchicons.eot);src:url(../fonts/ratchicons.eot?#iefix) format("embedded-opentype"),url(../fonts/ratchicons.woff) format("woff"),url(../fonts/ratchicons.ttf) format("truetype"),url(../fonts/ratchicons.svg#svgFontName) format("svg")}.icon{display:inline-block;font-family:Ratchicons;font-size:24px;line-height:1;text-decoration:none;-webkit-font-smoothing:antialiased}.icon-back:before{content:'\e80a'}.icon-bars:before{content:'\e80e'}.icon-caret:before{content:'\e80f'}.icon-check:before{content:'\e810'}.icon-close:before{content:'\e811'}.icon-code:before{content:'\e812'}.icon-compose:before{content:'\e813'}.icon-download:before{content:'\e815'}.icon-edit:before{content:'\e829'}.icon-forward:before{content:'\e82a'}.icon-gear:before{content:'\e821'}.icon-home:before{content:'\e82b'}.icon-info:before{content:'\e82c'}.icon-list:before{content:'\e823'}.icon-more-vertical:before{content:'\e82e'}.icon-more:before{content:'\e82f'}.icon-pages:before{content:'\e824'}.icon-pause:before{content:'\e830'}.icon-person:before{content:'\e832'}.icon-play:before{content:'\e816'}.icon-plus:before{content:'\e817'}.icon-refresh:before{content:'\e825'}.icon-search:before{content:'\e819'}.icon-share:before{content:'\e81a'}.icon-sound:before{content:'\e827'}.icon-sound2:before{content:'\e828'}.icon-sound3:before{content:'\e80b'}.icon-sound4:before{content:'\e80c'}.icon-star-filled:before{content:'\e81b'}.icon-star:before{content:'\e81c'}.icon-stop:before{content:'\e81d'}.icon-trash:before{content:'\e81e'}.icon-up-nav:before{content:'\e81f'}.icon-up:before{content:'\e80d'}.icon-right-nav:before{content:'\e818'}.icon-right:before{content:'\e826'}.icon-down-nav:before{content:'\e814'}.icon-down:before{content:'\e820'}.icon-left-nav:before{content:'\e82d'}.icon-left:before{content:'\e822'} -------------------------------------------------------------------------------- /ratchet/fonts/ratchicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/pageslider-react/f61fcbaeabe73508d51b899437cdc866acb9d2e0/ratchet/fonts/ratchicons.eot -------------------------------------------------------------------------------- /ratchet/fonts/ratchicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /ratchet/fonts/ratchicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/pageslider-react/f61fcbaeabe73508d51b899437cdc866acb9d2e0/ratchet/fonts/ratchicons.ttf -------------------------------------------------------------------------------- /ratchet/fonts/ratchicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccoenraets/pageslider-react/f61fcbaeabe73508d51b899437cdc866acb9d2e0/ratchet/fonts/ratchicons.woff -------------------------------------------------------------------------------- /ratchet/js/ratchet.js: -------------------------------------------------------------------------------- 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 | /* ======================================================================== 11 | * Ratchet: modals.js v2.0.2 12 | * http://goratchet.com/components#modals 13 | * ======================================================================== 14 | * Copyright 2014 Connor Sears 15 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 16 | * ======================================================================== */ 17 | 18 | !(function () { 19 | 'use strict'; 20 | 21 | var findModals = function (target) { 22 | var i; 23 | var modals = document.querySelectorAll('a'); 24 | 25 | for (; target && target !== document; target = target.parentNode) { 26 | for (i = modals.length; i--;) { 27 | if (modals[i] === target) { 28 | return target; 29 | } 30 | } 31 | } 32 | }; 33 | 34 | var getModal = function (event) { 35 | var modalToggle = findModals(event.target); 36 | if (modalToggle && modalToggle.hash) { 37 | return document.querySelector(modalToggle.hash); 38 | } 39 | }; 40 | 41 | window.addEventListener('touchend', function (event) { 42 | var modal = getModal(event); 43 | if (modal) { 44 | if (modal && modal.classList.contains('modal')) { 45 | modal.classList.toggle('active'); 46 | } 47 | event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) 48 | } 49 | }); 50 | }()); 51 | 52 | /* ======================================================================== 53 | * Ratchet: popovers.js v2.0.2 54 | * http://goratchet.com/components#popovers 55 | * ======================================================================== 56 | * Copyright 2014 Connor Sears 57 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 58 | * ======================================================================== */ 59 | 60 | !(function () { 61 | 'use strict'; 62 | 63 | var popover; 64 | 65 | var findPopovers = function (target) { 66 | var i; 67 | var popovers = document.querySelectorAll('a'); 68 | 69 | for (; target && target !== document; target = target.parentNode) { 70 | for (i = popovers.length; i--;) { 71 | if (popovers[i] === target) { 72 | return target; 73 | } 74 | } 75 | } 76 | }; 77 | 78 | var onPopoverHidden = function () { 79 | popover.style.display = 'none'; 80 | popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); 81 | }; 82 | 83 | var backdrop = (function () { 84 | var element = document.createElement('div'); 85 | 86 | element.classList.add('backdrop'); 87 | 88 | element.addEventListener('touchend', function () { 89 | popover.addEventListener('webkitTransitionEnd', onPopoverHidden); 90 | popover.classList.remove('visible'); 91 | popover.parentNode.removeChild(backdrop); 92 | }); 93 | 94 | return element; 95 | }()); 96 | 97 | var getPopover = function (e) { 98 | var anchor = findPopovers(e.target); 99 | 100 | if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) { 101 | return; 102 | } 103 | 104 | try { 105 | popover = document.querySelector(anchor.hash); 106 | } 107 | catch (error) { 108 | popover = null; 109 | } 110 | 111 | if (popover === null) { 112 | return; 113 | } 114 | 115 | if (!popover || !popover.classList.contains('popover')) { 116 | return; 117 | } 118 | 119 | return popover; 120 | }; 121 | 122 | var showHidePopover = function (e) { 123 | var popover = getPopover(e); 124 | 125 | if (!popover) { 126 | return; 127 | } 128 | 129 | popover.style.display = 'block'; 130 | popover.offsetHeight; 131 | popover.classList.add('visible'); 132 | 133 | popover.parentNode.appendChild(backdrop); 134 | }; 135 | 136 | window.addEventListener('touchend', showHidePopover); 137 | 138 | }()); 139 | 140 | /* ======================================================================== 141 | * Ratchet: push.js v2.0.2 142 | * http://goratchet.com/components#push 143 | * ======================================================================== 144 | * inspired by @defunkt's jquery.pjax.js 145 | * Copyright 2014 Connor Sears 146 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 147 | * ======================================================================== */ 148 | 149 | /* global _gaq: true */ 150 | 151 | !(function () { 152 | 'use strict'; 153 | 154 | var noop = function () {}; 155 | 156 | 157 | // Pushstate caching 158 | // ================== 159 | 160 | var isScrolling; 161 | var maxCacheLength = 20; 162 | var cacheMapping = sessionStorage; 163 | var domCache = {}; 164 | var transitionMap = { 165 | slideIn : 'slide-out', 166 | slideOut : 'slide-in', 167 | fade : 'fade' 168 | }; 169 | 170 | var bars = { 171 | bartab : '.bar-tab', 172 | barnav : '.bar-nav', 173 | barfooter : '.bar-footer', 174 | barheadersecondary : '.bar-header-secondary' 175 | }; 176 | 177 | var cacheReplace = function (data, updates) { 178 | PUSH.id = data.id; 179 | if (updates) { 180 | data = getCached(data.id); 181 | } 182 | cacheMapping[data.id] = JSON.stringify(data); 183 | window.history.replaceState(data.id, data.title, data.url); 184 | domCache[data.id] = document.body.cloneNode(true); 185 | }; 186 | 187 | var cachePush = function () { 188 | var id = PUSH.id; 189 | 190 | var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); 191 | var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); 192 | 193 | cacheBackStack.push(id); 194 | 195 | while (cacheForwardStack.length) { 196 | delete cacheMapping[cacheForwardStack.shift()]; 197 | } 198 | while (cacheBackStack.length > maxCacheLength) { 199 | delete cacheMapping[cacheBackStack.shift()]; 200 | } 201 | 202 | window.history.pushState(null, '', cacheMapping[PUSH.id].url); 203 | 204 | cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); 205 | cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); 206 | }; 207 | 208 | var cachePop = function (id, direction) { 209 | var forward = direction === 'forward'; 210 | var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); 211 | var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); 212 | var pushStack = forward ? cacheBackStack : cacheForwardStack; 213 | var popStack = forward ? cacheForwardStack : cacheBackStack; 214 | 215 | if (PUSH.id) { 216 | pushStack.push(PUSH.id); 217 | } 218 | popStack.pop(); 219 | 220 | cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); 221 | cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); 222 | }; 223 | 224 | var getCached = function (id) { 225 | return JSON.parse(cacheMapping[id] || null) || {}; 226 | }; 227 | 228 | var getTarget = function (e) { 229 | var target = findTarget(e.target); 230 | 231 | if (!target || 232 | e.which > 1 || 233 | e.metaKey || 234 | e.ctrlKey || 235 | isScrolling || 236 | location.protocol !== target.protocol || 237 | location.host !== target.host || 238 | !target.hash && /#/.test(target.href) || 239 | target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') || 240 | target.getAttribute('data-ignore') === 'push') { return; } 241 | 242 | return target; 243 | }; 244 | 245 | 246 | // Main event handlers (touchend, popstate) 247 | // ========================================== 248 | 249 | var touchend = function (e) { 250 | var target = getTarget(e); 251 | 252 | if (!target) { 253 | return; 254 | } 255 | 256 | e.preventDefault(); 257 | 258 | PUSH({ 259 | url : target.href, 260 | hash : target.hash, 261 | timeout : target.getAttribute('data-timeout'), 262 | transition : target.getAttribute('data-transition') 263 | }); 264 | }; 265 | 266 | var popstate = function (e) { 267 | var key; 268 | var barElement; 269 | var activeObj; 270 | var activeDom; 271 | var direction; 272 | var transition; 273 | var transitionFrom; 274 | var transitionFromObj; 275 | var id = e.state; 276 | 277 | if (!id || !cacheMapping[id]) { 278 | return; 279 | } 280 | 281 | direction = PUSH.id < id ? 'forward' : 'back'; 282 | 283 | cachePop(id, direction); 284 | 285 | activeObj = getCached(id); 286 | activeDom = domCache[id]; 287 | 288 | if (activeObj.title) { 289 | document.title = activeObj.title; 290 | } 291 | 292 | if (direction === 'back') { 293 | transitionFrom = JSON.parse(direction === 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack); 294 | transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]); 295 | } else { 296 | transitionFromObj = activeObj; 297 | } 298 | 299 | if (direction === 'back' && !transitionFromObj.id) { 300 | return (PUSH.id = id); 301 | } 302 | 303 | transition = direction === 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition; 304 | 305 | if (!activeDom) { 306 | return PUSH({ 307 | id : activeObj.id, 308 | url : activeObj.url, 309 | title : activeObj.title, 310 | timeout : activeObj.timeout, 311 | transition : transition, 312 | ignorePush : true 313 | }); 314 | } 315 | 316 | if (transitionFromObj.transition) { 317 | activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); 318 | for (key in bars) { 319 | if (bars.hasOwnProperty(key)) { 320 | barElement = document.querySelector(bars[key]); 321 | if (activeObj[key]) { 322 | swapContent(activeObj[key], barElement); 323 | } else if (barElement) { 324 | barElement.parentNode.removeChild(barElement); 325 | } 326 | } 327 | } 328 | } 329 | 330 | swapContent( 331 | (activeObj.contents || activeDom).cloneNode(true), 332 | document.querySelector('.content'), 333 | transition 334 | ); 335 | 336 | PUSH.id = id; 337 | 338 | document.body.offsetHeight; // force reflow to prevent scroll 339 | }; 340 | 341 | 342 | // Core PUSH functionality 343 | // ======================= 344 | 345 | var PUSH = function (options) { 346 | var key; 347 | var xhr = PUSH.xhr; 348 | 349 | options.container = options.container || options.transition ? document.querySelector('.content') : document.body; 350 | 351 | for (key in bars) { 352 | if (bars.hasOwnProperty(key)) { 353 | options[key] = options[key] || document.querySelector(bars[key]); 354 | } 355 | } 356 | 357 | if (xhr && xhr.readyState < 4) { 358 | xhr.onreadystatechange = noop; 359 | xhr.abort(); 360 | } 361 | 362 | xhr = new XMLHttpRequest(); 363 | xhr.open('GET', options.url, true); 364 | xhr.setRequestHeader('X-PUSH', 'true'); 365 | 366 | xhr.onreadystatechange = function () { 367 | if (options._timeout) { 368 | clearTimeout(options._timeout); 369 | } 370 | if (xhr.readyState === 4) { 371 | xhr.status === 200 ? success(xhr, options) : failure(options.url); 372 | } 373 | }; 374 | 375 | if (!PUSH.id) { 376 | cacheReplace({ 377 | id : +new Date(), 378 | url : window.location.href, 379 | title : document.title, 380 | timeout : options.timeout, 381 | transition : null 382 | }); 383 | } 384 | 385 | if (options.timeout) { 386 | options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout); 387 | } 388 | 389 | xhr.send(); 390 | 391 | if (xhr.readyState && !options.ignorePush) { 392 | cachePush(); 393 | } 394 | }; 395 | 396 | 397 | // Main XHR handlers 398 | // ================= 399 | 400 | var success = function (xhr, options) { 401 | var key; 402 | var barElement; 403 | var data = parseXHR(xhr, options); 404 | 405 | if (!data.contents) { 406 | return locationReplace(options.url); 407 | } 408 | 409 | if (data.title) { 410 | document.title = data.title; 411 | } 412 | 413 | if (options.transition) { 414 | for (key in bars) { 415 | if (bars.hasOwnProperty(key)) { 416 | barElement = document.querySelector(bars[key]); 417 | if (data[key]) { 418 | swapContent(data[key], barElement); 419 | } else if (barElement) { 420 | barElement.parentNode.removeChild(barElement); 421 | } 422 | } 423 | } 424 | } 425 | 426 | swapContent(data.contents, options.container, options.transition, function () { 427 | cacheReplace({ 428 | id : options.id || +new Date(), 429 | url : data.url, 430 | title : data.title, 431 | timeout : options.timeout, 432 | transition : options.transition 433 | }, options.id); 434 | triggerStateChange(); 435 | }); 436 | 437 | if (!options.ignorePush && window._gaq) { 438 | _gaq.push(['_trackPageview']); // google analytics 439 | } 440 | if (!options.hash) { 441 | return; 442 | } 443 | }; 444 | 445 | var failure = function (url) { 446 | throw new Error('Could not get: ' + url); 447 | }; 448 | 449 | 450 | // PUSH helpers 451 | // ============ 452 | 453 | var swapContent = function (swap, container, transition, complete) { 454 | var enter; 455 | var containerDirection; 456 | var swapDirection; 457 | 458 | if (!transition) { 459 | if (container) { 460 | container.innerHTML = swap.innerHTML; 461 | } else if (swap.classList.contains('content')) { 462 | document.body.appendChild(swap); 463 | } else { 464 | document.body.insertBefore(swap, document.querySelector('.content')); 465 | } 466 | } else { 467 | enter = /in$/.test(transition); 468 | 469 | if (transition === 'fade') { 470 | container.classList.add('in'); 471 | container.classList.add('fade'); 472 | swap.classList.add('fade'); 473 | } 474 | 475 | if (/slide/.test(transition)) { 476 | swap.classList.add('sliding-in', enter ? 'right' : 'left'); 477 | swap.classList.add('sliding'); 478 | container.classList.add('sliding'); 479 | } 480 | 481 | container.parentNode.insertBefore(swap, container); 482 | } 483 | 484 | if (!transition) { 485 | complete && complete(); 486 | } 487 | 488 | if (transition === 'fade') { 489 | container.offsetWidth; // force reflow 490 | container.classList.remove('in'); 491 | var fadeContainerEnd = function () { 492 | container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); 493 | swap.classList.add('in'); 494 | swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); 495 | }; 496 | var fadeSwapEnd = function () { 497 | swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); 498 | container.parentNode.removeChild(container); 499 | swap.classList.remove('fade'); 500 | swap.classList.remove('in'); 501 | complete && complete(); 502 | }; 503 | container.addEventListener('webkitTransitionEnd', fadeContainerEnd); 504 | 505 | } 506 | 507 | if (/slide/.test(transition)) { 508 | var slideEnd = function () { 509 | swap.removeEventListener('webkitTransitionEnd', slideEnd); 510 | swap.classList.remove('sliding', 'sliding-in'); 511 | swap.classList.remove(swapDirection); 512 | container.parentNode.removeChild(container); 513 | complete && complete(); 514 | }; 515 | 516 | container.offsetWidth; // force reflow 517 | swapDirection = enter ? 'right' : 'left'; 518 | containerDirection = enter ? 'left' : 'right'; 519 | container.classList.add(containerDirection); 520 | swap.classList.remove(swapDirection); 521 | swap.addEventListener('webkitTransitionEnd', slideEnd); 522 | } 523 | }; 524 | 525 | var triggerStateChange = function () { 526 | var e = new CustomEvent('push', { 527 | detail: { state: getCached(PUSH.id) }, 528 | bubbles: true, 529 | cancelable: true 530 | }); 531 | 532 | window.dispatchEvent(e); 533 | }; 534 | 535 | var findTarget = function (target) { 536 | var i; 537 | var toggles = document.querySelectorAll('a'); 538 | 539 | for (; target && target !== document; target = target.parentNode) { 540 | for (i = toggles.length; i--;) { 541 | if (toggles[i] === target) { 542 | return target; 543 | } 544 | } 545 | } 546 | }; 547 | 548 | var locationReplace = function (url) { 549 | window.history.replaceState(null, '', '#'); 550 | window.location.replace(url); 551 | }; 552 | 553 | var extendWithDom = function (obj, fragment, dom) { 554 | var i; 555 | var result = {}; 556 | 557 | for (i in obj) { 558 | if (obj.hasOwnProperty(i)) { 559 | result[i] = obj[i]; 560 | } 561 | } 562 | 563 | Object.keys(bars).forEach(function (key) { 564 | var el = dom.querySelector(bars[key]); 565 | if (el) { 566 | el.parentNode.removeChild(el); 567 | } 568 | result[key] = el; 569 | }); 570 | 571 | result.contents = dom.querySelector(fragment); 572 | 573 | return result; 574 | }; 575 | 576 | var parseXHR = function (xhr, options) { 577 | var head; 578 | var body; 579 | var data = {}; 580 | var responseText = xhr.responseText; 581 | 582 | data.url = options.url; 583 | 584 | if (!responseText) { 585 | return data; 586 | } 587 | 588 | if (/]*>([\s\S.]*)<\/head>/i)[0]; 592 | body.innerHTML = responseText.match(/]*>([\s\S.]*)<\/body>/i)[0]; 593 | } else { 594 | head = body = document.createElement('div'); 595 | head.innerHTML = responseText; 596 | } 597 | 598 | data.title = head.querySelector('title'); 599 | var text = 'innerText' in data.title ? 'innerText' : 'textContent'; 600 | data.title = data.title && data.title[text].trim(); 601 | 602 | if (options.transition) { 603 | data = extendWithDom(data, '.content', body); 604 | } else { 605 | data.contents = body; 606 | } 607 | 608 | return data; 609 | }; 610 | 611 | 612 | // Attach PUSH event handlers 613 | // ========================== 614 | 615 | window.addEventListener('touchstart', function () { isScrolling = false; }); 616 | window.addEventListener('touchmove', function () { isScrolling = true; }); 617 | window.addEventListener('touchend', touchend); 618 | window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} }); 619 | window.addEventListener('popstate', popstate); 620 | window.PUSH = PUSH; 621 | 622 | }()); 623 | 624 | /* ======================================================================== 625 | * Ratchet: segmented-controllers.js v2.0.2 626 | * http://goratchet.com/components#segmentedControls 627 | * ======================================================================== 628 | * Copyright 2014 Connor Sears 629 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 630 | * ======================================================================== */ 631 | 632 | !(function () { 633 | 'use strict'; 634 | 635 | var getTarget = function (target) { 636 | var i; 637 | var segmentedControls = document.querySelectorAll('.segmented-control .control-item'); 638 | 639 | for (; target && target !== document; target = target.parentNode) { 640 | for (i = segmentedControls.length; i--;) { 641 | if (segmentedControls[i] === target) { 642 | return target; 643 | } 644 | } 645 | } 646 | }; 647 | 648 | window.addEventListener('touchend', function (e) { 649 | var activeTab; 650 | var activeBodies; 651 | var targetBody; 652 | var targetTab = getTarget(e.target); 653 | var className = 'active'; 654 | var classSelector = '.' + className; 655 | 656 | if (!targetTab) { 657 | return; 658 | } 659 | 660 | activeTab = targetTab.parentNode.querySelector(classSelector); 661 | 662 | if (activeTab) { 663 | activeTab.classList.remove(className); 664 | } 665 | 666 | targetTab.classList.add(className); 667 | 668 | if (!targetTab.hash) { 669 | return; 670 | } 671 | 672 | targetBody = document.querySelector(targetTab.hash); 673 | 674 | if (!targetBody) { 675 | return; 676 | } 677 | 678 | activeBodies = targetBody.parentNode.querySelectorAll(classSelector); 679 | 680 | for (var i = 0; i < activeBodies.length; i++) { 681 | activeBodies[i].classList.remove(className); 682 | } 683 | 684 | targetBody.classList.add(className); 685 | }); 686 | 687 | window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} }); 688 | }()); 689 | 690 | /* ======================================================================== 691 | * Ratchet: sliders.js v2.0.2 692 | * http://goratchet.com/components#sliders 693 | * ======================================================================== 694 | Adapted from Brad Birdsall's swipe 695 | * Copyright 2014 Connor Sears 696 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 697 | * ======================================================================== */ 698 | 699 | !(function () { 700 | 'use strict'; 701 | 702 | var pageX; 703 | var pageY; 704 | var slider; 705 | var deltaX; 706 | var deltaY; 707 | var offsetX; 708 | var lastSlide; 709 | var startTime; 710 | var resistance; 711 | var sliderWidth; 712 | var slideNumber; 713 | var isScrolling; 714 | var scrollableArea; 715 | 716 | var getSlider = function (target) { 717 | var i; 718 | var sliders = document.querySelectorAll('.slider > .slide-group'); 719 | 720 | for (; target && target !== document; target = target.parentNode) { 721 | for (i = sliders.length; i--;) { 722 | if (sliders[i] === target) { 723 | return target; 724 | } 725 | } 726 | } 727 | }; 728 | 729 | var getScroll = function () { 730 | if ('webkitTransform' in slider.style) { 731 | var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); 732 | var ret = translate3d ? translate3d[1] : 0; 733 | return parseInt(ret, 10); 734 | } 735 | }; 736 | 737 | var setSlideNumber = function (offset) { 738 | var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round'; 739 | slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length)); 740 | slideNumber += offset; 741 | slideNumber = Math.min(slideNumber, 0); 742 | slideNumber = Math.max(-(slider.children.length - 1), slideNumber); 743 | }; 744 | 745 | var onTouchStart = function (e) { 746 | slider = getSlider(e.target); 747 | 748 | if (!slider) { 749 | return; 750 | } 751 | 752 | var firstItem = slider.querySelector('.slide'); 753 | 754 | scrollableArea = firstItem.offsetWidth * slider.children.length; 755 | isScrolling = undefined; 756 | sliderWidth = slider.offsetWidth; 757 | resistance = 1; 758 | lastSlide = -(slider.children.length - 1); 759 | startTime = +new Date(); 760 | pageX = e.touches[0].pageX; 761 | pageY = e.touches[0].pageY; 762 | deltaX = 0; 763 | deltaY = 0; 764 | 765 | setSlideNumber(0); 766 | 767 | slider.style['-webkit-transition-duration'] = 0; 768 | }; 769 | 770 | var onTouchMove = function (e) { 771 | if (e.touches.length > 1 || !slider) { 772 | return; // Exit if a pinch || no slider 773 | } 774 | 775 | deltaX = e.touches[0].pageX - pageX; 776 | deltaY = e.touches[0].pageY - pageY; 777 | pageX = e.touches[0].pageX; 778 | pageY = e.touches[0].pageY; 779 | 780 | if (typeof isScrolling === 'undefined') { 781 | isScrolling = Math.abs(deltaY) > Math.abs(deltaX); 782 | } 783 | 784 | if (isScrolling) { 785 | return; 786 | } 787 | 788 | offsetX = (deltaX / resistance) + getScroll(); 789 | 790 | e.preventDefault(); 791 | 792 | resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : 793 | slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; 794 | 795 | slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; 796 | }; 797 | 798 | var onTouchEnd = function (e) { 799 | if (!slider || isScrolling) { 800 | return; 801 | } 802 | 803 | setSlideNumber( 804 | (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0 805 | ); 806 | 807 | offsetX = slideNumber * sliderWidth; 808 | 809 | slider.style['-webkit-transition-duration'] = '.2s'; 810 | slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; 811 | 812 | e = new CustomEvent('slide', { 813 | detail: { slideNumber: Math.abs(slideNumber) }, 814 | bubbles: true, 815 | cancelable: true 816 | }); 817 | 818 | slider.parentNode.dispatchEvent(e); 819 | }; 820 | 821 | window.addEventListener('touchstart', onTouchStart); 822 | window.addEventListener('touchmove', onTouchMove); 823 | window.addEventListener('touchend', onTouchEnd); 824 | 825 | }()); 826 | 827 | /* ======================================================================== 828 | * Ratchet: toggles.js v2.0.2 829 | * http://goratchet.com/components#toggles 830 | * ======================================================================== 831 | Adapted from Brad Birdsall's swipe 832 | * Copyright 2014 Connor Sears 833 | * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) 834 | * ======================================================================== */ 835 | 836 | !(function () { 837 | 'use strict'; 838 | 839 | var start = {}; 840 | var touchMove = false; 841 | var distanceX = false; 842 | var toggle = false; 843 | 844 | var findToggle = function (target) { 845 | var i; 846 | var toggles = document.querySelectorAll('.toggle'); 847 | 848 | for (; target && target !== document; target = target.parentNode) { 849 | for (i = toggles.length; i--;) { 850 | if (toggles[i] === target) { 851 | return target; 852 | } 853 | } 854 | } 855 | }; 856 | 857 | window.addEventListener('touchstart', function (e) { 858 | e = e.originalEvent || e; 859 | 860 | toggle = findToggle(e.target); 861 | 862 | if (!toggle) { 863 | return; 864 | } 865 | 866 | var handle = toggle.querySelector('.toggle-handle'); 867 | var toggleWidth = toggle.clientWidth; 868 | var handleWidth = handle.clientWidth; 869 | var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0; 870 | 871 | start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY }; 872 | touchMove = false; 873 | }); 874 | 875 | window.addEventListener('touchmove', function (e) { 876 | e = e.originalEvent || e; 877 | 878 | if (e.touches.length > 1) { 879 | return; // Exit if a pinch 880 | } 881 | 882 | if (!toggle) { 883 | return; 884 | } 885 | 886 | var handle = toggle.querySelector('.toggle-handle'); 887 | var current = e.touches[0]; 888 | var toggleWidth = toggle.clientWidth; 889 | var handleWidth = handle.clientWidth; 890 | var offset = toggleWidth - handleWidth; 891 | 892 | touchMove = true; 893 | distanceX = current.pageX - start.pageX; 894 | 895 | if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) { 896 | return; 897 | } 898 | 899 | e.preventDefault(); 900 | 901 | if (distanceX < 0) { 902 | return (handle.style.webkitTransform = 'translate3d(0,0,0)'); 903 | } 904 | if (distanceX > offset) { 905 | return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'); 906 | } 907 | 908 | handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; 909 | 910 | toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active'); 911 | }); 912 | 913 | window.addEventListener('touchend', function (e) { 914 | if (!toggle) { 915 | return; 916 | } 917 | 918 | var handle = toggle.querySelector('.toggle-handle'); 919 | var toggleWidth = toggle.clientWidth; 920 | var handleWidth = handle.clientWidth; 921 | var offset = (toggleWidth - handleWidth); 922 | var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); 923 | 924 | if (slideOn) { 925 | handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; 926 | } else { 927 | handle.style.webkitTransform = 'translate3d(0,0,0)'; 928 | } 929 | 930 | toggle.classList[slideOn ? 'add' : 'remove']('active'); 931 | 932 | e = new CustomEvent('toggle', { 933 | detail: { isActive: slideOn }, 934 | bubbles: true, 935 | cancelable: true 936 | }); 937 | 938 | toggle.dispatchEvent(e); 939 | 940 | touchMove = false; 941 | toggle = false; 942 | }); 943 | 944 | }()); 945 | -------------------------------------------------------------------------------- /ratchet/js/ratchet.min.js: -------------------------------------------------------------------------------- 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 | !function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";var a,b=function(){},c=20,d=sessionStorage,e={},f={slideIn:"slide-out",slideOut:"slide-in",fade:"fade"},g={bartab:".bar-tab",barnav:".bar-nav",barfooter:".bar-footer",barheadersecondary:".bar-header-secondary"},h=function(a,b){o.id=a.id,b&&(a=k(a.id)),d[a.id]=JSON.stringify(a),window.history.replaceState(a.id,a.title,a.url),e[a.id]=document.body.cloneNode(!0)},i=function(){var a=o.id,b=JSON.parse(d.cacheForwardStack||"[]"),e=JSON.parse(d.cacheBackStack||"[]");for(e.push(a);b.length;)delete d[b.shift()];for(;e.length>c;)delete d[e.shift()];window.history.pushState(null,"",d[o.id].url),d.cacheForwardStack=JSON.stringify(b),d.cacheBackStack=JSON.stringify(e)},j=function(a,b){var c="forward"===b,e=JSON.parse(d.cacheForwardStack||"[]"),f=JSON.parse(d.cacheBackStack||"[]"),g=c?f:e,h=c?e:f;o.id&&g.push(o.id),h.pop(),d.cacheForwardStack=JSON.stringify(e),d.cacheBackStack=JSON.stringify(f)},k=function(a){return JSON.parse(d[a]||null)||{}},l=function(b){var c=t(b.target);if(!(!c||b.which>1||b.metaKey||b.ctrlKey||a||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},m=function(a){var b=l(a);b&&(a.preventDefault(),o({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},n=function(a){var b,c,h,i,l,m,n,p,q=a.state;if(q&&d[q]){if(l=o.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),b.transition?e=v(e,".content",d):e.contents=d,e};window.addEventListener("touchstart",function(){a=!1}),window.addEventListener("touchmove",function(){a=!0}),window.addEventListener("touchend",m),window.addEventListener("click",function(a){l(a)&&a.preventDefault()}),window.addEventListener("popstate",n),window.PUSH=o}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},o=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},p=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](o()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},q=function(f){if(c=n(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,p(0),c.style["-webkit-transition-duration"]=0}},r=function(h){h.touches.length>1||!c||(d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+o(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)"))},s=function(a){c&&!l&&(p(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",q),window.addEventListener("touchmove",r),window.addEventListener("touchend",s)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); --------------------------------------------------------------------------------