circadian-funicular

An angularized wibbly-wobbley timey-wimey CSS Radial Time Slider picker directive. Just HTML, CSS, some crazy math, and AngularJS having a playdate.

12 |

No SVG.

13 |

No canvas.

14 |

Touch friendly.

15 |

" 7 | ], 8 | "description": "An angularized wibbly-wobbley timey-wimey CSS Radial Time Slider picker directive.", 9 | "main": "index.html", 10 | "moduleType": [ 11 | "globals" 12 | ], 13 | "license": "The Unlicense", 14 | "ignore": [ 15 | "**/.*", 16 | "*codekit*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests" 21 | ], 22 | "dependencies": { 23 | "jamfu": "https://github.com/jasesmith/jamfu.git" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | main article, .main-menu ul { 2 | overflow: auto; 3 | -webkit-overflow-scrolling: touch; } 4 | 5 | .flex-row, main > header, .easy-buttons { 6 | display: -webkit-box; 7 | display: -webkit-flex; 8 | display: -ms-flexbox; 9 | display: flex; 10 | -webkit-box-orient: horizontal; 11 | -webkit-box-direction: normal; 12 | -webkit-flex-direction: row; 13 | -ms-flex-direction: row; 14 | flex-direction: row; } 15 | 16 | .flex-column, main, main article, .main-menu { 17 | display: -webkit-box; 18 | display: -webkit-flex; 19 | display: -ms-flexbox; 20 | display: flex; 21 | -webkit-box-orient: vertical; 22 | -webkit-box-direction: normal; 23 | -webkit-flex-direction: column; 24 | -ms-flex-direction: column; 25 | flex-direction: column; } 26 | 27 | .bg-air { 28 | background: transparent !important; } 29 | 30 | .bg-light { 31 | background: #E2E4E6 !important; 32 | color: #23292C !important; } 33 | .bg-light--sheer { 34 | background: rgba(226, 228, 230, 0.2) !important; } 35 | 36 | .bg-dark { 37 | background: #23292C !important; 38 | color: #f3f4f5 !important; } 39 | .bg-dark--sheer { 40 | background: rgba(35, 41, 44, 0.2) !important; } 41 | 42 | .bg-base { 43 | background: #00BCD4 !important; 44 | color: #f3f4f5 !important; } 45 | .bg-base--sheer { 46 | background: rgba(0, 188, 212, 0.2) !important; } 47 | 48 | .bg-mix { 49 | background: #5c6164 !important; 50 | color: #f3f4f5 !important; } 51 | .bg-mix--sheer { 52 | background: rgba(92, 97, 100, 0.2) !important; } 53 | 54 | .bg-mixed { 55 | background: #5c6164 !important; 56 | color: #f3f4f5 !important; 57 | mix-blend-mode: multiply; } 58 | 59 | .bg-frost { 60 | background: #5c6164 !important; 61 | color: #f3f4f5 !important; 62 | mix-blend-mode: overlay; } 63 | 64 | .bg-shade { 65 | background: #404548 !important; 66 | color: #f3f4f5 !important; } 67 | .bg-shade--sheer { 68 | background: rgba(64, 69, 72, 0.2) !important; } 69 | 70 | .bg-alert { 71 | background: #f06292 !important; 72 | color: #23292C !important; } 73 | .bg-alert--sheer { 74 | background: rgba(240, 98, 146, 0.2) !important; } 75 | 76 | .bg-warning { 77 | background: #f9a825 !important; 78 | color: #23292C !important; } 79 | .bg-warning--sheer { 80 | background: rgba(249, 168, 37, 0.2) !important; } 81 | 82 | .bg-success { 83 | background: #9ccc65 !important; 84 | color: #23292C !important; } 85 | .bg-success--sheer { 86 | background: rgba(156, 204, 101, 0.2) !important; } 87 | 88 | .bg-info { 89 | background: #26c6da !important; 90 | color: #f3f4f5 !important; } 91 | .bg-info--sheer { 92 | background: rgba(38, 198, 218, 0.2) !important; } 93 | 94 | .bg-grey-1 { 95 | background: #cfd1d3 !important; 96 | color: #23292C !important; } 97 | 98 | .bg-grey-2 { 99 | background: #bcbfc1 !important; 100 | color: #23292C !important; } 101 | 102 | .bg-grey-3 { 103 | background: #a9acae !important; 104 | color: #23292C !important; } 105 | 106 | .bg-grey-4 { 107 | background: #96999c !important; 108 | color: #23292C !important; } 109 | 110 | .bg-grey-5 { 111 | background: #838789 !important; 112 | color: #f3f4f5 !important; } 113 | 114 | .bg-grey-6 { 115 | background: #6f7476 !important; 116 | color: #f3f4f5 !important; } 117 | 118 | .bg-grey-7 { 119 | background: #5c6164 !important; 120 | color: #f3f4f5 !important; } 121 | 122 | .bg-grey-8 { 123 | background: #494e51 !important; 124 | color: #f3f4f5 !important; } 125 | 126 | .bg-grey-9 { 127 | background: #363c3f !important; 128 | color: #f3f4f5 !important; } 129 | 130 | .bg-darken { 131 | background: rgba(35, 41, 44, 0.6) !important; 132 | color: #f3f4f5 !important; } 133 | 134 | .bg-lighten { 135 | background: rgba(243, 244, 245, 0.2) !important; 136 | color: #23292C !important; } 137 | 138 | .bg-cancel { 139 | background: #008d9f !important; 140 | color: #f3f4f5 !important; } 141 | 142 | .bg-active { 143 | background: #40cddf !important; 144 | color: #23292C !important; } 145 | 146 | .fg-air { 147 | color: transparent; } 148 | 149 | .fg-light { 150 | color: #E2E4E6; } 151 | 152 | .fg-dark { 153 | color: #23292C; } 154 | 155 | .fg-base { 156 | color: #00BCD4; } 157 | 158 | .fg-mix { 159 | color: #5c6164; } 160 | 161 | .fg-shade { 162 | color: #404548; } 163 | 164 | .fg-alert { 165 | color: #f06292; } 166 | 167 | .fg-warning { 168 | color: #f9a825; } 169 | 170 | .fg-caution { 171 | color: #fdd835; } 172 | 173 | .fg-success { 174 | color: #9ccc65; } 175 | 176 | .fg-info { 177 | color: #26c6da; } 178 | 179 | .fg-cancel { 180 | color: #008d9f; } 181 | 182 | .fg-active { 183 | color: #40cddf; } 184 | 185 | .glow-alert { 186 | text-shadow: 0 0 0.6em #f06292; } 187 | 188 | .glow-warning { 189 | text-shadow: 0 0 0.6em #f9a825; } 190 | 191 | .glow-success { 192 | text-shadow: 0 0 0.6em #9ccc65; } 193 | 194 | .glow-cancel { 195 | text-shadow: 0 0 0.6em #008d9f; } 196 | 197 | .glow-active { 198 | text-shadow: 0 0 0.6em #40cddf; } 199 | 200 | .shadow-alert { 201 | box-shadow: 0 0 0.6em 0 #f06292; } 202 | 203 | .shadow-warning { 204 | box-shadow: 0 0 0.6em 0 #f9a825; } 205 | 206 | .shadow-success { 207 | box-shadow: 0 0 0.6em 0 #9ccc65; } 208 | 209 | .shadow-cancel { 210 | box-shadow: 0 0 0.6em 0 #008d9f; } 211 | 212 | .shadow-active { 213 | box-shadow: 0 0 0.6em 0 #40cddf; } 214 | 215 | .fg-deepred { 216 | color: #b31c1f !important; } 217 | .fg-deepred .tag { 218 | box-shadow: 0 0 0 1px #b31c1f !important; } 219 | .fg-deepred .tag.reversed { 220 | background: #b31c1f !important; 221 | color: #23292C !important; } 222 | 223 | .bg-deepred { 224 | background-color: #b31c1f !important; 225 | color: #f3f4f5 !important; } 226 | .bg-deepred--sheer { 227 | background: rgba(179, 28, 31, 0.2) !important; } 228 | .bg-deepred input { 229 | color: #f3f4f5; } 230 | .bg-deepred [class*="icon-"]:after, .bg-deepred [class*="icon-"]:before, .bg-deepred[class*="icon-"]:after, .bg-deepred[class*="icon-"]:before { 231 | color: #f3f4f5; 232 | border-color: currentColor; } 233 | 234 | .ui-deepred .bg-active, 235 | .ui-deepred .calendar-wrap { 236 | background: #b31c1f !important; 237 | color: #f3f4f5 !important; } 238 | .ui-deepred .fg-active { 239 | color: #b31c1f !important; } 240 | .ui-deepred input[type="checkbox"].toggle:checked { 241 | background: #b31c1f !important; } 242 | 243 | .fg-red { 244 | color: #e43336 !important; } 245 | .fg-red .tag { 246 | box-shadow: 0 0 0 1px #e43336 !important; } 247 | .fg-red .tag.reversed { 248 | background: #e43336 !important; 249 | color: #23292C !important; } 250 | 251 | .bg-red { 252 | background-color: #e43336 !important; 253 | color: #f3f4f5 !important; } 254 | .bg-red--sheer { 255 | background: rgba(228, 51, 54, 0.2) !important; } 256 | .bg-red input { 257 | color: #f3f4f5; } 258 | .bg-red [class*="icon-"]:after, .bg-red [class*="icon-"]:before, .bg-red[class*="icon-"]:after, .bg-red[class*="icon-"]:before { 259 | color: #f3f4f5; 260 | border-color: currentColor; } 261 | 262 | .ui-red .bg-active, 263 | .ui-red .calendar-wrap { 264 | background: #e43336 !important; 265 | color: #f3f4f5 !important; } 266 | .ui-red .fg-active { 267 | color: #e43336 !important; } 268 | .ui-red input[type="checkbox"].toggle:checked { 269 | background: #e43336 !important; } 270 | 271 | .fg-pink { 272 | color: #f06292 !important; } 273 | .fg-pink .tag { 274 | box-shadow: 0 0 0 1px #f06292 !important; } 275 | .fg-pink .tag.reversed { 276 | background: #f06292 !important; 277 | color: #23292C !important; } 278 | 279 | .bg-pink { 280 | background-color: #f06292 !important; 281 | color: #23292C !important; } 282 | .bg-pink--sheer { 283 | background: rgba(240, 98, 146, 0.2) !important; } 284 | .bg-pink input { 285 | color: #23292C; } 286 | .bg-pink [class*="icon-"]:after, .bg-pink [class*="icon-"]:before, .bg-pink[class*="icon-"]:after, .bg-pink[class*="icon-"]:before { 287 | color: #23292C; 288 | border-color: currentColor; } 289 | 290 | .ui-pink .bg-active, 291 | .ui-pink .calendar-wrap { 292 | background: #f06292 !important; 293 | color: #23292C !important; } 294 | .ui-pink .fg-active { 295 | color: #f06292 !important; } 296 | .ui-pink input[type="checkbox"].toggle:checked { 297 | background: #f06292 !important; } 298 | 299 | .fg-deeppink { 300 | color: #ff4081 !important; } 301 | .fg-deeppink .tag { 302 | box-shadow: 0 0 0 1px #ff4081 !important; } 303 | .fg-deeppink .tag.reversed { 304 | background: #ff4081 !important; 305 | color: #23292C !important; } 306 | 307 | .bg-deeppink { 308 | background-color: #ff4081 !important; 309 | color: #23292C !important; } 310 | .bg-deeppink--sheer { 311 | background: rgba(255, 64, 129, 0.2) !important; } 312 | .bg-deeppink input { 313 | color: #23292C; } 314 | .bg-deeppink [class*="icon-"]:after, .bg-deeppink [class*="icon-"]:before, .bg-deeppink[class*="icon-"]:after, .bg-deeppink[class*="icon-"]:before { 315 | color: #23292C; 316 | border-color: currentColor; } 317 | 318 | .ui-deeppink .bg-active, 319 | .ui-deeppink .calendar-wrap { 320 | background: #ff4081 !important; 321 | color: #23292C !important; } 322 | .ui-deeppink .fg-active { 323 | color: #ff4081 !important; } 324 | .ui-deeppink input[type="checkbox"].toggle:checked { 325 | background: #ff4081 !important; } 326 | 327 | .fg-purple { 328 | color: #ab47bc !important; } 329 | .fg-purple .tag { 330 | box-shadow: 0 0 0 1px #ab47bc !important; } 331 | .fg-purple .tag.reversed { 332 | background: #ab47bc !important; 333 | color: #23292C !important; } 334 | 335 | .bg-purple { 336 | background-color: #ab47bc !important; 337 | color: #f3f4f5 !important; } 338 | .bg-purple--sheer { 339 | background: rgba(171, 71, 188, 0.2) !important; } 340 | .bg-purple input { 341 | color: #f3f4f5; } 342 | .bg-purple [class*="icon-"]:after, .bg-purple [class*="icon-"]:before, .bg-purple[class*="icon-"]:after, .bg-purple[class*="icon-"]:before { 343 | color: #f3f4f5; 344 | border-color: currentColor; } 345 | 346 | .ui-purple .bg-active, 347 | .ui-purple .calendar-wrap { 348 | background: #ab47bc !important; 349 | color: #f3f4f5 !important; } 350 | .ui-purple .fg-active { 351 | color: #ab47bc !important; } 352 | .ui-purple input[type="checkbox"].toggle:checked { 353 | background: #ab47bc !important; } 354 | 355 | .fg-deeppurple { 356 | color: #7e57c2 !important; } 357 | .fg-deeppurple .tag { 358 | box-shadow: 0 0 0 1px #7e57c2 !important; } 359 | .fg-deeppurple .tag.reversed { 360 | background: #7e57c2 !important; 361 | color: #23292C !important; } 362 | 363 | .bg-deeppurple { 364 | background-color: #7e57c2 !important; 365 | color: #23292C !important; } 366 | .bg-deeppurple--sheer { 367 | background: rgba(126, 87, 194, 0.2) !important; } 368 | .bg-deeppurple input { 369 | color: #23292C; } 370 | .bg-deeppurple [class*="icon-"]:after, .bg-deeppurple [class*="icon-"]:before, .bg-deeppurple[class*="icon-"]:after, .bg-deeppurple[class*="icon-"]:before { 371 | color: #23292C; 372 | border-color: currentColor; } 373 | 374 | .ui-deeppurple .bg-active, 375 | .ui-deeppurple .calendar-wrap { 376 | background: #7e57c2 !important; 377 | color: #23292C !important; } 378 | .ui-deeppurple .fg-active { 379 | color: #7e57c2 !important; } 380 | .ui-deeppurple input[type="checkbox"].toggle:checked { 381 | background: #7e57c2 !important; } 382 | 383 | .fg-indigo { 384 | color: #5c6bc0 !important; } 385 | .fg-indigo .tag { 386 | box-shadow: 0 0 0 1px #5c6bc0 !important; } 387 | .fg-indigo .tag.reversed { 388 | background: #5c6bc0 !important; 389 | color: #23292C !important; } 390 | 391 | .bg-indigo { 392 | background-color: #5c6bc0 !important; 393 | color: #23292C !important; } 394 | .bg-indigo--sheer { 395 | background: rgba(92, 107, 192, 0.2) !important; } 396 | .bg-indigo input { 397 | color: #23292C; } 398 | .bg-indigo [class*="icon-"]:after, .bg-indigo [class*="icon-"]:before, .bg-indigo[class*="icon-"]:after, .bg-indigo[class*="icon-"]:before { 399 | color: #23292C; 400 | border-color: currentColor; } 401 | 402 | .ui-indigo .bg-active, 403 | .ui-indigo .calendar-wrap { 404 | background: #5c6bc0 !important; 405 | color: #23292C !important; } 406 | .ui-indigo .fg-active { 407 | color: #5c6bc0 !important; } 408 | .ui-indigo input[type="checkbox"].toggle:checked { 409 | background: #5c6bc0 !important; } 410 | 411 | .fg-blue { 412 | color: #42a5f5 !important; } 413 | .fg-blue .tag { 414 | box-shadow: 0 0 0 1px #42a5f5 !important; } 415 | .fg-blue .tag.reversed { 416 | background: #42a5f5 !important; 417 | color: #23292C !important; } 418 | 419 | .bg-blue { 420 | background-color: #42a5f5 !important; 421 | color: #23292C !important; } 422 | .bg-blue--sheer { 423 | background: rgba(66, 165, 245, 0.2) !important; } 424 | .bg-blue input { 425 | color: #23292C; } 426 | .bg-blue [class*="icon-"]:after, .bg-blue [class*="icon-"]:before, .bg-blue[class*="icon-"]:after, .bg-blue[class*="icon-"]:before { 427 | color: #23292C; 428 | border-color: currentColor; } 429 | 430 | .ui-blue .bg-active, 431 | .ui-blue .calendar-wrap { 432 | background: #42a5f5 !important; 433 | color: #23292C !important; } 434 | .ui-blue .fg-active { 435 | color: #42a5f5 !important; } 436 | .ui-blue input[type="checkbox"].toggle:checked { 437 | background: #42a5f5 !important; } 438 | 439 | .fg-lightblue { 440 | color: #29b6f6 !important; } 441 | .fg-lightblue .tag { 442 | box-shadow: 0 0 0 1px #29b6f6 !important; } 443 | .fg-lightblue .tag.reversed { 444 | background: #29b6f6 !important; 445 | color: #23292C !important; } 446 | 447 | .bg-lightblue { 448 | background-color: #29b6f6 !important; 449 | color: #23292C !important; } 450 | .bg-lightblue--sheer { 451 | background: rgba(41, 182, 246, 0.2) !important; } 452 | .bg-lightblue input { 453 | color: #23292C; } 454 | .bg-lightblue [class*="icon-"]:after, .bg-lightblue [class*="icon-"]:before, .bg-lightblue[class*="icon-"]:after, .bg-lightblue[class*="icon-"]:before { 455 | color: #23292C; 456 | border-color: currentColor; } 457 | 458 | .ui-lightblue .bg-active, 459 | .ui-lightblue .calendar-wrap { 460 | background: #29b6f6 !important; 461 | color: #23292C !important; } 462 | .ui-lightblue .fg-active { 463 | color: #29b6f6 !important; } 464 | .ui-lightblue input[type="checkbox"].toggle:checked { 465 | background: #29b6f6 !important; } 466 | 467 | .fg-cyan { 468 | color: #26c6da !important; } 469 | .fg-cyan .tag { 470 | box-shadow: 0 0 0 1px #26c6da !important; } 471 | .fg-cyan .tag.reversed { 472 | background: #26c6da !important; 473 | color: #23292C !important; } 474 | 475 | .bg-cyan { 476 | background-color: #26c6da !important; 477 | color: #f3f4f5 !important; } 478 | .bg-cyan--sheer { 479 | background: rgba(38, 198, 218, 0.2) !important; } 480 | .bg-cyan input { 481 | color: #f3f4f5; } 482 | .bg-cyan [class*="icon-"]:after, .bg-cyan [class*="icon-"]:before, .bg-cyan[class*="icon-"]:after, .bg-cyan[class*="icon-"]:before { 483 | color: #f3f4f5; 484 | border-color: currentColor; } 485 | 486 | .ui-cyan .bg-active, 487 | .ui-cyan .calendar-wrap { 488 | background: #26c6da !important; 489 | color: #f3f4f5 !important; } 490 | .ui-cyan .fg-active { 491 | color: #26c6da !important; } 492 | .ui-cyan input[type="checkbox"].toggle:checked { 493 | background: #26c6da !important; } 494 | 495 | .fg-teal { 496 | color: #26a69a !important; } 497 | .fg-teal .tag { 498 | box-shadow: 0 0 0 1px #26a69a !important; } 499 | .fg-teal .tag.reversed { 500 | background: #26a69a !important; 501 | color: #23292C !important; } 502 | 503 | .bg-teal { 504 | background-color: #26a69a !important; 505 | color: #f3f4f5 !important; } 506 | .bg-teal--sheer { 507 | background: rgba(38, 166, 154, 0.2) !important; } 508 | .bg-teal input { 509 | color: #f3f4f5; } 510 | .bg-teal [class*="icon-"]:after, .bg-teal [class*="icon-"]:before, .bg-teal[class*="icon-"]:after, .bg-teal[class*="icon-"]:before { 511 | color: #f3f4f5; 512 | border-color: currentColor; } 513 | 514 | .ui-teal .bg-active, 515 | .ui-teal .calendar-wrap { 516 | background: #26a69a !important; 517 | color: #f3f4f5 !important; } 518 | .ui-teal .fg-active { 519 | color: #26a69a !important; } 520 | .ui-teal input[type="checkbox"].toggle:checked { 521 | background: #26a69a !important; } 522 | 523 | .fg-green { 524 | color: #66bb6a !important; } 525 | .fg-green .tag { 526 | box-shadow: 0 0 0 1px #66bb6a !important; } 527 | .fg-green .tag.reversed { 528 | background: #66bb6a !important; 529 | color: #23292C !important; } 530 | 531 | .bg-green { 532 | background-color: #66bb6a !important; 533 | color: #23292C !important; } 534 | .bg-green--sheer { 535 | background: rgba(102, 187, 106, 0.2) !important; } 536 | .bg-green input { 537 | color: #23292C; } 538 | .bg-green [class*="icon-"]:after, .bg-green [class*="icon-"]:before, .bg-green[class*="icon-"]:after, .bg-green[class*="icon-"]:before { 539 | color: #23292C; 540 | border-color: currentColor; } 541 | 542 | .ui-green .bg-active, 543 | .ui-green .calendar-wrap { 544 | background: #66bb6a !important; 545 | color: #23292C !important; } 546 | .ui-green .fg-active { 547 | color: #66bb6a !important; } 548 | .ui-green input[type="checkbox"].toggle:checked { 549 | background: #66bb6a !important; } 550 | 551 | .fg-lightgreen { 552 | color: #9ccc65 !important; } 553 | .fg-lightgreen .tag { 554 | box-shadow: 0 0 0 1px #9ccc65 !important; } 555 | .fg-lightgreen .tag.reversed { 556 | background: #9ccc65 !important; 557 | color: #23292C !important; } 558 | 559 | .bg-lightgreen { 560 | background-color: #9ccc65 !important; 561 | color: #23292C !important; } 562 | .bg-lightgreen--sheer { 563 | background: rgba(156, 204, 101, 0.2) !important; } 564 | .bg-lightgreen input { 565 | color: #23292C; } 566 | .bg-lightgreen [class*="icon-"]:after, .bg-lightgreen [class*="icon-"]:before, .bg-lightgreen[class*="icon-"]:after, .bg-lightgreen[class*="icon-"]:before { 567 | color: #23292C; 568 | border-color: currentColor; } 569 | 570 | .ui-lightgreen .bg-active, 571 | .ui-lightgreen .calendar-wrap { 572 | background: #9ccc65 !important; 573 | color: #23292C !important; } 574 | .ui-lightgreen .fg-active { 575 | color: #9ccc65 !important; } 576 | .ui-lightgreen input[type="checkbox"].toggle:checked { 577 | background: #9ccc65 !important; } 578 | 579 | .fg-lime { 580 | color: #d4e157 !important; } 581 | .fg-lime .tag { 582 | box-shadow: 0 0 0 1px #d4e157 !important; } 583 | .fg-lime .tag.reversed { 584 | background: #d4e157 !important; 585 | color: #23292C !important; } 586 | 587 | .bg-lime { 588 | background-color: #d4e157 !important; 589 | color: #23292C !important; } 590 | .bg-lime--sheer { 591 | background: rgba(212, 225, 87, 0.2) !important; } 592 | .bg-lime input { 593 | color: #23292C; } 594 | .bg-lime [class*="icon-"]:after, .bg-lime [class*="icon-"]:before, .bg-lime[class*="icon-"]:after, .bg-lime[class*="icon-"]:before { 595 | color: #23292C; 596 | border-color: currentColor; } 597 | 598 | .ui-lime .bg-active, 599 | .ui-lime .calendar-wrap { 600 | background: #d4e157 !important; 601 | color: #23292C !important; } 602 | .ui-lime .fg-active { 603 | color: #d4e157 !important; } 604 | .ui-lime input[type="checkbox"].toggle:checked { 605 | background: #d4e157 !important; } 606 | 607 | .fg-yellow { 608 | color: #ffee58 !important; } 609 | .fg-yellow .tag { 610 | box-shadow: 0 0 0 1px #ffee58 !important; } 611 | .fg-yellow .tag.reversed { 612 | background: #ffee58 !important; 613 | color: #23292C !important; } 614 | 615 | .bg-yellow { 616 | background-color: #ffee58 !important; 617 | color: #23292C !important; } 618 | .bg-yellow--sheer { 619 | background: rgba(255, 238, 88, 0.2) !important; } 620 | .bg-yellow input { 621 | color: #23292C; } 622 | .bg-yellow [class*="icon-"]:after, .bg-yellow [class*="icon-"]:before, .bg-yellow[class*="icon-"]:after, .bg-yellow[class*="icon-"]:before { 623 | color: #23292C; 624 | border-color: currentColor; } 625 | 626 | .ui-yellow .bg-active, 627 | .ui-yellow .calendar-wrap { 628 | background: #ffee58 !important; 629 | color: #23292C !important; } 630 | .ui-yellow .fg-active { 631 | color: #ffee58 !important; } 632 | .ui-yellow input[type="checkbox"].toggle:checked { 633 | background: #ffee58 !important; } 634 | 635 | .fg-amber { 636 | color: #ffca28 !important; } 637 | .fg-amber .tag { 638 | box-shadow: 0 0 0 1px #ffca28 !important; } 639 | .fg-amber .tag.reversed { 640 | background: #ffca28 !important; 641 | color: #23292C !important; } 642 | 643 | .bg-amber { 644 | background-color: #ffca28 !important; 645 | color: #23292C !important; } 646 | .bg-amber--sheer { 647 | background: rgba(255, 202, 40, 0.2) !important; } 648 | .bg-amber input { 649 | color: #23292C; } 650 | .bg-amber [class*="icon-"]:after, .bg-amber [class*="icon-"]:before, .bg-amber[class*="icon-"]:after, .bg-amber[class*="icon-"]:before { 651 | color: #23292C; 652 | border-color: currentColor; } 653 | 654 | .ui-amber .bg-active, 655 | .ui-amber .calendar-wrap { 656 | background: #ffca28 !important; 657 | color: #23292C !important; } 658 | .ui-amber .fg-active { 659 | color: #ffca28 !important; } 660 | .ui-amber input[type="checkbox"].toggle:checked { 661 | background: #ffca28 !important; } 662 | 663 | .fg-deepamber { 664 | color: #f9a825 !important; } 665 | .fg-deepamber .tag { 666 | box-shadow: 0 0 0 1px #f9a825 !important; } 667 | .fg-deepamber .tag.reversed { 668 | background: #f9a825 !important; 669 | color: #23292C !important; } 670 | 671 | .bg-deepamber { 672 | background-color: #f9a825 !important; 673 | color: #23292C !important; } 674 | .bg-deepamber--sheer { 675 | background: rgba(249, 168, 37, 0.2) !important; } 676 | .bg-deepamber input { 677 | color: #23292C; } 678 | .bg-deepamber [class*="icon-"]:after, .bg-deepamber [class*="icon-"]:before, .bg-deepamber[class*="icon-"]:after, .bg-deepamber[class*="icon-"]:before { 679 | color: #23292C; 680 | border-color: currentColor; } 681 | 682 | .ui-deepamber .bg-active, 683 | .ui-deepamber .calendar-wrap { 684 | background: #f9a825 !important; 685 | color: #23292C !important; } 686 | .ui-deepamber .fg-active { 687 | color: #f9a825 !important; } 688 | .ui-deepamber input[type="checkbox"].toggle:checked { 689 | background: #f9a825 !important; } 690 | 691 | .fg-orange { 692 | color: #ff9800 !important; } 693 | .fg-orange .tag { 694 | box-shadow: 0 0 0 1px #ff9800 !important; } 695 | .fg-orange .tag.reversed { 696 | background: #ff9800 !important; 697 | color: #23292C !important; } 698 | 699 | .bg-orange { 700 | background-color: #ff9800 !important; 701 | color: #f3f4f5 !important; } 702 | .bg-orange--sheer { 703 | background: rgba(255, 152, 0, 0.2) !important; } 704 | .bg-orange input { 705 | color: #f3f4f5; } 706 | .bg-orange [class*="icon-"]:after, .bg-orange [class*="icon-"]:before, .bg-orange[class*="icon-"]:after, .bg-orange[class*="icon-"]:before { 707 | color: #f3f4f5; 708 | border-color: currentColor; } 709 | 710 | .ui-orange .bg-active, 711 | .ui-orange .calendar-wrap { 712 | background: #ff9800 !important; 713 | color: #f3f4f5 !important; } 714 | .ui-orange .fg-active { 715 | color: #ff9800 !important; } 716 | .ui-orange input[type="checkbox"].toggle:checked { 717 | background: #ff9800 !important; } 718 | 719 | .fg-deeporange { 720 | color: #ff7043 !important; } 721 | .fg-deeporange .tag { 722 | box-shadow: 0 0 0 1px #ff7043 !important; } 723 | .fg-deeporange .tag.reversed { 724 | background: #ff7043 !important; 725 | color: #23292C !important; } 726 | 727 | .bg-deeporange { 728 | background-color: #ff7043 !important; 729 | color: #23292C !important; } 730 | .bg-deeporange--sheer { 731 | background: rgba(255, 112, 67, 0.2) !important; } 732 | .bg-deeporange input { 733 | color: #23292C; } 734 | .bg-deeporange [class*="icon-"]:after, .bg-deeporange [class*="icon-"]:before, .bg-deeporange[class*="icon-"]:after, .bg-deeporange[class*="icon-"]:before { 735 | color: #23292C; 736 | border-color: currentColor; } 737 | 738 | .ui-deeporange .bg-active, 739 | .ui-deeporange .calendar-wrap { 740 | background: #ff7043 !important; 741 | color: #23292C !important; } 742 | .ui-deeporange .fg-active { 743 | color: #ff7043 !important; } 744 | .ui-deeporange input[type="checkbox"].toggle:checked { 745 | background: #ff7043 !important; } 746 | 747 | .fg-brown { 748 | color: #8d6e63 !important; } 749 | .fg-brown .tag { 750 | box-shadow: 0 0 0 1px #8d6e63 !important; } 751 | .fg-brown .tag.reversed { 752 | background: #8d6e63 !important; 753 | color: #23292C !important; } 754 | 755 | .bg-brown { 756 | background-color: #8d6e63 !important; 757 | color: #f3f4f5 !important; } 758 | .bg-brown--sheer { 759 | background: rgba(141, 110, 99, 0.2) !important; } 760 | .bg-brown input { 761 | color: #f3f4f5; } 762 | .bg-brown [class*="icon-"]:after, .bg-brown [class*="icon-"]:before, .bg-brown[class*="icon-"]:after, .bg-brown[class*="icon-"]:before { 763 | color: #f3f4f5; 764 | border-color: currentColor; } 765 | 766 | .ui-brown .bg-active, 767 | .ui-brown .calendar-wrap { 768 | background: #8d6e63 !important; 769 | color: #f3f4f5 !important; } 770 | .ui-brown .fg-active { 771 | color: #8d6e63 !important; } 772 | .ui-brown input[type="checkbox"].toggle:checked { 773 | background: #8d6e63 !important; } 774 | 775 | .fg-deepbrown { 776 | color: #795548 !important; } 777 | .fg-deepbrown .tag { 778 | box-shadow: 0 0 0 1px #795548 !important; } 779 | .fg-deepbrown .tag.reversed { 780 | background: #795548 !important; 781 | color: #23292C !important; } 782 | 783 | .bg-deepbrown { 784 | background-color: #795548 !important; 785 | color: #f3f4f5 !important; } 786 | .bg-deepbrown--sheer { 787 | background: rgba(121, 85, 72, 0.2) !important; } 788 | .bg-deepbrown input { 789 | color: #f3f4f5; } 790 | .bg-deepbrown [class*="icon-"]:after, .bg-deepbrown [class*="icon-"]:before, .bg-deepbrown[class*="icon-"]:after, .bg-deepbrown[class*="icon-"]:before { 791 | color: #f3f4f5; 792 | border-color: currentColor; } 793 | 794 | .ui-deepbrown .bg-active, 795 | .ui-deepbrown .calendar-wrap { 796 | background: #795548 !important; 797 | color: #f3f4f5 !important; } 798 | .ui-deepbrown .fg-active { 799 | color: #795548 !important; } 800 | .ui-deepbrown input[type="checkbox"].toggle:checked { 801 | background: #795548 !important; } 802 | 803 | .fg-chocolate { 804 | color: #4E342E !important; } 805 | .fg-chocolate .tag { 806 | box-shadow: 0 0 0 1px #4E342E !important; } 807 | .fg-chocolate .tag.reversed { 808 | background: #4E342E !important; 809 | color: #23292C !important; } 810 | 811 | .bg-chocolate { 812 | background-color: #4E342E !important; 813 | color: #f3f4f5 !important; } 814 | .bg-chocolate--sheer { 815 | background: rgba(78, 52, 46, 0.2) !important; } 816 | .bg-chocolate input { 817 | color: #f3f4f5; } 818 | .bg-chocolate [class*="icon-"]:after, .bg-chocolate [class*="icon-"]:before, .bg-chocolate[class*="icon-"]:after, .bg-chocolate[class*="icon-"]:before { 819 | color: #f3f4f5; 820 | border-color: currentColor; } 821 | 822 | .ui-chocolate .bg-active, 823 | .ui-chocolate .calendar-wrap { 824 | background: #4E342E !important; 825 | color: #f3f4f5 !important; } 826 | .ui-chocolate .fg-active { 827 | color: #4E342E !important; } 828 | .ui-chocolate input[type="checkbox"].toggle:checked { 829 | background: #4E342E !important; } 830 | 831 | .fg-bluegrey { 832 | color: #78909c !important; } 833 | .fg-bluegrey .tag { 834 | box-shadow: 0 0 0 1px #78909c !important; } 835 | .fg-bluegrey .tag.reversed { 836 | background: #78909c !important; 837 | color: #23292C !important; } 838 | 839 | .bg-bluegrey { 840 | background-color: #78909c !important; 841 | color: #f3f4f5 !important; } 842 | .bg-bluegrey--sheer { 843 | background: rgba(120, 144, 156, 0.2) !important; } 844 | .bg-bluegrey input { 845 | color: #f3f4f5; } 846 | .bg-bluegrey [class*="icon-"]:after, .bg-bluegrey [class*="icon-"]:before, .bg-bluegrey[class*="icon-"]:after, .bg-bluegrey[class*="icon-"]:before { 847 | color: #f3f4f5; 848 | border-color: currentColor; } 849 | 850 | .ui-bluegrey .bg-active, 851 | .ui-bluegrey .calendar-wrap { 852 | background: #78909c !important; 853 | color: #f3f4f5 !important; } 854 | .ui-bluegrey .fg-active { 855 | color: #78909c !important; } 856 | .ui-bluegrey input[type="checkbox"].toggle:checked { 857 | background: #78909c !important; } 858 | 859 | .fg-deepgrey { 860 | color: #546E7A !important; } 861 | .fg-deepgrey .tag { 862 | box-shadow: 0 0 0 1px #546E7A !important; } 863 | .fg-deepgrey .tag.reversed { 864 | background: #546E7A !important; 865 | color: #23292C !important; } 866 | 867 | .bg-deepgrey { 868 | background-color: #546E7A !important; 869 | color: #f3f4f5 !important; } 870 | .bg-deepgrey--sheer { 871 | background: rgba(84, 110, 122, 0.2) !important; } 872 | .bg-deepgrey input { 873 | color: #f3f4f5; } 874 | .bg-deepgrey [class*="icon-"]:after, .bg-deepgrey [class*="icon-"]:before, .bg-deepgrey[class*="icon-"]:after, .bg-deepgrey[class*="icon-"]:before { 875 | color: #f3f4f5; 876 | border-color: currentColor; } 877 | 878 | .ui-deepgrey .bg-active, 879 | .ui-deepgrey .calendar-wrap { 880 | background: #546E7A !important; 881 | color: #f3f4f5 !important; } 882 | .ui-deepgrey .fg-active { 883 | color: #546E7A !important; } 884 | .ui-deepgrey input[type="checkbox"].toggle:checked { 885 | background: #546E7A !important; } 886 | 887 | @-webkit-keyframes slideOutLeft { 888 | to { 889 | -webkit-transform: translate3d(-100%, 0%, 0); 890 | transform: translate3d(-100%, 0%, 0); } } 891 | 892 | @keyframes slideOutLeft { 893 | to { 894 | -webkit-transform: translate3d(-100%, 0%, 0); 895 | transform: translate3d(-100%, 0%, 0); } } 896 | @-webkit-keyframes slideOutRight { 897 | to { 898 | -webkit-transform: translate3d(100%, 0%, 0); 899 | transform: translate3d(100%, 0%, 0); } } 900 | @keyframes slideOutRight { 901 | to { 902 | -webkit-transform: translate3d(100%, 0%, 0); 903 | transform: translate3d(100%, 0%, 0); } } 904 | @-webkit-keyframes slideOutTop { 905 | to { 906 | -webkit-transform: translate3d(0%, -100%, 0); 907 | transform: translate3d(0%, -100%, 0); } } 908 | @keyframes slideOutTop { 909 | to { 910 | -webkit-transform: translate3d(0%, -100%, 0); 911 | transform: translate3d(0%, -100%, 0); } } 912 | @-webkit-keyframes slideOutBottom { 913 | to { 914 | -webkit-transform: translate3d(0%, 100%, 0); 915 | transform: translate3d(0%, 100%, 0); } } 916 | @keyframes slideOutBottom { 917 | to { 918 | -webkit-transform: translate3d(0%, 100%, 0); 919 | transform: translate3d(0%, 100%, 0); } } 920 | @-webkit-keyframes slideInRight { 921 | from { 922 | -webkit-transform: translate3d(100%, 0%, 0); 923 | transform: translate3d(100%, 0%, 0); } 924 | to { 925 | -webkit-transform: translate3d(0%, 0%, 0); 926 | transform: translate3d(0%, 0%, 0); } } 927 | @keyframes slideInRight { 928 | from { 929 | -webkit-transform: translate3d(100%, 0%, 0); 930 | transform: translate3d(100%, 0%, 0); } 931 | to { 932 | -webkit-transform: translate3d(0%, 0%, 0); 933 | transform: translate3d(0%, 0%, 0); } } 934 | @-webkit-keyframes slideInLeft { 935 | from { 936 | -webkit-transform: translate3d(-100%, 0%, 0); 937 | transform: translate3d(-100%, 0%, 0); } 938 | to { 939 | -webkit-transform: translate3d(0%, 0%, 0); 940 | transform: translate3d(0%, 0%, 0); } } 941 | @keyframes slideInLeft { 942 | from { 943 | -webkit-transform: translate3d(-100%, 0%, 0); 944 | transform: translate3d(-100%, 0%, 0); } 945 | to { 946 | -webkit-transform: translate3d(0%, 0%, 0); 947 | transform: translate3d(0%, 0%, 0); } } 948 | @-webkit-keyframes slideInTop { 949 | from { 950 | -webkit-transform: translate3d(0%, -100%, 0); 951 | transform: translate3d(0%, -100%, 0); } 952 | to { 953 | -webkit-transform: translate3d(0%, 0%, 0); 954 | transform: translate3d(0%, 0%, 0); } } 955 | @keyframes slideInTop { 956 | from { 957 | -webkit-transform: translate3d(0%, -100%, 0); 958 | transform: translate3d(0%, -100%, 0); } 959 | to { 960 | -webkit-transform: translate3d(0%, 0%, 0); 961 | transform: translate3d(0%, 0%, 0); } } 962 | @-webkit-keyframes slideInBottom { 963 | from { 964 | -webkit-transform: translate3d(0%, 100%, 0); 965 | transform: translate3d(0%, 100%, 0); } 966 | to { 967 | -webkit-transform: translate3d(0%, 0%, 0); 968 | transform: translate3d(0%, 0%, 0); } } 969 | @keyframes slideInBottom { 970 | from { 971 | -webkit-transform: translate3d(0%, 100%, 0); 972 | transform: translate3d(0%, 100%, 0); } 973 | to { 974 | -webkit-transform: translate3d(0%, 0%, 0); 975 | transform: translate3d(0%, 0%, 0); } } 976 | @-webkit-keyframes blurIn { 977 | from { 978 | -webkit-filter: blur(3em); 979 | filter: blur(3em); } 980 | to { 981 | -webkit-filter: blur(0); 982 | filter: blur(0); } } 983 | @keyframes blurIn { 984 | from { 985 | -webkit-filter: blur(3em); 986 | filter: blur(3em); } 987 | to { 988 | -webkit-filter: blur(0); 989 | filter: blur(0); } } 990 | @-webkit-keyframes blurOut { 991 | from { 992 | -webkit-filter: blur(0); 993 | filter: blur(0); } 994 | to { 995 | -webkit-filter: blur(3em); 996 | filter: blur(3em); } } 997 | @keyframes blurOut { 998 | from { 999 | -webkit-filter: blur(0); 1000 | filter: blur(0); } 1001 | to { 1002 | -webkit-filter: blur(3em); 1003 | filter: blur(3em); } } 1004 | @-webkit-keyframes fadeIn { 1005 | from { 1006 | opacity: 0; } 1007 | to { 1008 | opacity: 1; } } 1009 | @keyframes fadeIn { 1010 | from { 1011 | opacity: 0; } 1012 | to { 1013 | opacity: 1; } } 1014 | @-webkit-keyframes fadeOut { 1015 | from { 1016 | opacity: 1; } 1017 | to { 1018 | opacity: 0; } } 1019 | @keyframes fadeOut { 1020 | from { 1021 | opacity: 1; } 1022 | to { 1023 | opacity: 0; } } 1024 | @-webkit-keyframes zoomIn { 1025 | from { 1026 | -webkit-transform: scale(5); 1027 | transform: scale(5); 1028 | opacity: 0; } 1029 | to { 1030 | -webkit-transform: scale(1); 1031 | transform: scale(1); 1032 | opacity: 1; } } 1033 | @keyframes zoomIn { 1034 | from { 1035 | -webkit-transform: scale(5); 1036 | transform: scale(5); 1037 | opacity: 0; } 1038 | to { 1039 | -webkit-transform: scale(1); 1040 | transform: scale(1); 1041 | opacity: 1; } } 1042 | @-webkit-keyframes zoomOut { 1043 | from { 1044 | -webkit-transform: scale(1); 1045 | transform: scale(1); 1046 | opacity: 1; } 1047 | to { 1048 | -webkit-transform: scale(5); 1049 | transform: scale(5); 1050 | opacity: 0; } } 1051 | @keyframes zoomOut { 1052 | from { 1053 | -webkit-transform: scale(1); 1054 | transform: scale(1); 1055 | opacity: 1; } 1056 | to { 1057 | -webkit-transform: scale(5); 1058 | transform: scale(5); 1059 | opacity: 0; } } 1060 | @-webkit-keyframes zoomUp { 1061 | from { 1062 | -webkit-transform: scale(0); 1063 | transform: scale(0); 1064 | opacity: 0; } 1065 | to { 1066 | -webkit-transform: scale(1); 1067 | transform: scale(1); 1068 | opacity: 1; } } 1069 | @keyframes zoomUp { 1070 | from { 1071 | -webkit-transform: scale(0); 1072 | transform: scale(0); 1073 | opacity: 0; } 1074 | to { 1075 | -webkit-transform: scale(1); 1076 | transform: scale(1); 1077 | opacity: 1; } } 1078 | @-webkit-keyframes zoomDown { 1079 | from { 1080 | -webkit-transform: scale(1); 1081 | transform: scale(1); 1082 | opacity: 1; } 1083 | to { 1084 | -webkit-transform: scale(0); 1085 | transform: scale(0); 1086 | opacity: 0; } } 1087 | @keyframes zoomDown { 1088 | from { 1089 | -webkit-transform: scale(1); 1090 | transform: scale(1); 1091 | opacity: 1; } 1092 | to { 1093 | -webkit-transform: scale(0); 1094 | transform: scale(0); 1095 | opacity: 0; } } 1096 | @-webkit-keyframes spin { 1097 | from { 1098 | -webkit-transform: rotate(0deg); 1099 | transform: rotate(0deg); } 1100 | to { 1101 | -webkit-transform: rotate(360deg); 1102 | transform: rotate(360deg); } } 1103 | @keyframes spin { 1104 | from { 1105 | -webkit-transform: rotate(0deg); 1106 | transform: rotate(0deg); } 1107 | to { 1108 | -webkit-transform: rotate(360deg); 1109 | transform: rotate(360deg); } } 1110 | @-webkit-keyframes bgBlend { 1111 | 0% { 1112 | background-position: 50% 0%; } 1113 | 50% { 1114 | background-position: 51% 100%; } 1115 | 100% { 1116 | background-position: 50% 0%; } } 1117 | @keyframes bgBlend { 1118 | 0% { 1119 | background-position: 50% 0%; } 1120 | 50% { 1121 | background-position: 51% 100%; } 1122 | 100% { 1123 | background-position: 50% 0%; } } 1124 | @-webkit-keyframes beacon { 1125 | 0% { 1126 | box-shadow: 0 0 0 0 rgba(243, 244, 245, 0.35); } 1127 | 100% { 1128 | box-shadow: 0 0 0 2rem transparent; } } 1129 | @keyframes beacon { 1130 | 0% { 1131 | box-shadow: 0 0 0 0 rgba(243, 244, 245, 0.35); } 1132 | 100% { 1133 | box-shadow: 0 0 0 2rem transparent; } } 1134 | @-webkit-keyframes pulse { 1135 | 0% { 1136 | box-shadow: 0 0 0 0; } 1137 | 50% { 1138 | box-shadow: 0 0 1em 0; } 1139 | 100% { 1140 | box-shadow: 0 0 0 0; } } 1141 | @keyframes pulse { 1142 | 0% { 1143 | box-shadow: 0 0 0 0; } 1144 | 50% { 1145 | box-shadow: 0 0 1em 0; } 1146 | 100% { 1147 | box-shadow: 0 0 0 0; } } 1148 | @-webkit-keyframes pulseText { 1149 | 0% { 1150 | text-shadow: 0 0 0; } 1151 | 50% { 1152 | text-shadow: 0 0 .5em; } 1153 | 100% { 1154 | text-shadow: 0 0 0; } } 1155 | @keyframes pulseText { 1156 | 0% { 1157 | text-shadow: 0 0 0; } 1158 | 50% { 1159 | text-shadow: 0 0 .5em; } 1160 | 100% { 1161 | text-shadow: 0 0 0; } } 1162 | @-webkit-keyframes floating { 1163 | 0% { 1164 | -webkit-transform: translate3D(0, 0.5em, 0); 1165 | transform: translate3D(0, 0.5em, 0); } 1166 | 50% { 1167 | -webkit-transform: translate3D(0, -0.5em, 0); 1168 | transform: translate3D(0, -0.5em, 0); } 1169 | 100% { 1170 | -webkit-transform: translate3D(0, 0.5em, 0); 1171 | transform: translate3D(0, 0.5em, 0); } } 1172 | @keyframes floating { 1173 | 0% { 1174 | -webkit-transform: translate3D(0, 0.5em, 0); 1175 | transform: translate3D(0, 0.5em, 0); } 1176 | 50% { 1177 | -webkit-transform: translate3D(0, -0.5em, 0); 1178 | transform: translate3D(0, -0.5em, 0); } 1179 | 100% { 1180 | -webkit-transform: translate3D(0, 0.5em, 0); 1181 | transform: translate3D(0, 0.5em, 0); } } 1182 | @-webkit-keyframes bounce { 1183 | from, to { 1184 | bottom: 0; } 1185 | 80% { 1186 | bottom: 15vh; } } 1187 | @keyframes bounce { 1188 | from, to { 1189 | bottom: 0; } 1190 | 80% { 1191 | bottom: 15vh; } } 1192 | .ng-enter-active { 1193 | z-index: 20; } 1194 | 1195 | .ng-leave-active { 1196 | z-index: 10; } 1197 | 1198 | /* page view animations ------------------------ */ 1199 | .block { 1200 | display: block; } 1201 | 1202 | .flex { 1203 | display: -webkit-box; 1204 | display: -webkit-flex; 1205 | display: -ms-flexbox; 1206 | display: flex; } 1207 | 1208 | .flex-wrap { 1209 | -webkit-flex-wrap: wrap; 1210 | -ms-flex-wrap: wrap; 1211 | flex-wrap: wrap; } 1212 | 1213 | .flex-none { 1214 | -webkit-box-flex: 0 !important; 1215 | -webkit-flex: none !important; 1216 | -ms-flex: none !important; 1217 | flex: none !important; } 1218 | 1219 | .flex-1-1-auto { 1220 | -webkit-box-flex: 1 !important; 1221 | -webkit-flex: 1 1 auto !important; 1222 | -ms-flex: 1 1 auto !important; 1223 | flex: 1 1 auto !important; } 1224 | 1225 | .flex-1-0-auto { 1226 | -webkit-box-flex: 1 !important; 1227 | -webkit-flex: 1 0 auto !important; 1228 | -ms-flex: 1 0 auto !important; 1229 | flex: 1 0 auto !important; } 1230 | 1231 | .flex-0-1-auto { 1232 | -webkit-box-flex: 0 !important; 1233 | -webkit-flex: 0 1 auto !important; 1234 | -ms-flex: 0 1 auto !important; 1235 | flex: 0 1 auto !important; } 1236 | 1237 | .flex-0-0-auto { 1238 | -webkit-box-flex: 0 !important; 1239 | -webkit-flex: 0 0 auto !important; 1240 | -ms-flex: 0 0 auto !important; 1241 | flex: 0 0 auto !important; } 1242 | 1243 | .flex-0 { 1244 | -webkit-box-flex: 0; 1245 | -webkit-flex: 0; 1246 | -ms-flex: 0; 1247 | flex: 0; } 1248 | 1249 | .flex-1-all > *, 1250 | .flex-1 { 1251 | -webkit-box-flex: 1; 1252 | -webkit-flex: 1; 1253 | -ms-flex: 1; 1254 | flex: 1; } 1255 | 1256 | .flex-2 { 1257 | -webkit-box-flex: 2; 1258 | -webkit-flex: 2; 1259 | -ms-flex: 2; 1260 | flex: 2; } 1261 | 1262 | .flex-3 { 1263 | -webkit-box-flex: 3; 1264 | -webkit-flex: 3; 1265 | -ms-flex: 3; 1266 | flex: 3; } 1267 | 1268 | .flex-4 { 1269 | -webkit-box-flex: 4; 1270 | -webkit-flex: 4; 1271 | -ms-flex: 4; 1272 | flex: 4; } 1273 | 1274 | .flex-5 { 1275 | -webkit-box-flex: 5; 1276 | -webkit-flex: 5; 1277 | -ms-flex: 5; 1278 | flex: 5; } 1279 | 1280 | .flex-6 { 1281 | -webkit-box-flex: 6; 1282 | -webkit-flex: 6; 1283 | -ms-flex: 6; 1284 | flex: 6; } 1285 | 1286 | .flex-7 { 1287 | -webkit-box-flex: 7; 1288 | -webkit-flex: 7; 1289 | -ms-flex: 7; 1290 | flex: 7; } 1291 | 1292 | .flex-8 { 1293 | -webkit-box-flex: 8; 1294 | -webkit-flex: 8; 1295 | -ms-flex: 8; 1296 | flex: 8; } 1297 | 1298 | .flex-9 { 1299 | -webkit-box-flex: 9; 1300 | -webkit-flex: 9; 1301 | -ms-flex: 9; 1302 | flex: 9; } 1303 | 1304 | .flex-10 { 1305 | -webkit-box-flex: 10; 1306 | -webkit-flex: 10; 1307 | -ms-flex: 10; 1308 | flex: 10; } 1309 | 1310 | .flex-11 { 1311 | -webkit-box-flex: 11; 1312 | -webkit-flex: 11; 1313 | -ms-flex: 11; 1314 | flex: 11; } 1315 | 1316 | .flex-12 { 1317 | -webkit-box-flex: 12; 1318 | -webkit-flex: 12; 1319 | -ms-flex: 12; 1320 | flex: 12; } 1321 | 1322 | .justify-content-center { 1323 | -webkit-box-pack: center; 1324 | -webkit-justify-content: center; 1325 | -ms-flex-pack: center; 1326 | justify-content: center; } 1327 | 1328 | .justify-content-start { 1329 | -webkit-box-pack: start; 1330 | -webkit-justify-content: flex-start; 1331 | -ms-flex-pack: start; 1332 | justify-content: flex-start; } 1333 | 1334 | .justify-content-end { 1335 | -webkit-box-pack: end; 1336 | -webkit-justify-content: flex-end; 1337 | -ms-flex-pack: end; 1338 | justify-content: flex-end; } 1339 | 1340 | .justify-content-around { 1341 | -webkit-justify-content: space-around; 1342 | -ms-flex-pack: distribute; 1343 | justify-content: space-around; } 1344 | 1345 | .justify-content-between { 1346 | -webkit-box-pack: justify; 1347 | -webkit-justify-content: space-between; 1348 | -ms-flex-pack: justify; 1349 | justify-content: space-between; } 1350 | 1351 | .align-items-center { 1352 | -webkit-box-align: center; 1353 | -webkit-align-items: center; 1354 | -ms-flex-align: center; 1355 | align-items: center; } 1356 | 1357 | .align-items-start { 1358 | -webkit-box-align: start; 1359 | -webkit-align-items: flex-start; 1360 | -ms-flex-align: start; 1361 | align-items: flex-start; } 1362 | 1363 | .align-items-end { 1364 | -webkit-box-align: end; 1365 | -webkit-align-items: flex-end; 1366 | -ms-flex-align: end; 1367 | align-items: flex-end; } 1368 | 1369 | .align-items-stretch { 1370 | -webkit-box-align: stretch; 1371 | -webkit-align-items: stretch; 1372 | -ms-flex-align: stretch; 1373 | align-items: stretch; } 1374 | 1375 | .align-items-baseline { 1376 | -webkit-box-align: baseline; 1377 | -webkit-align-items: baseline; 1378 | -ms-flex-align: baseline; 1379 | align-items: baseline; } 1380 | 1381 | .align-self-center { 1382 | -webkit-align-self: center; 1383 | -ms-flex-item-align: center; 1384 | align-self: center; } 1385 | 1386 | .align-self-start { 1387 | -webkit-align-self: flex-start; 1388 | -ms-flex-item-align: start; 1389 | align-self: flex-start; } 1390 | 1391 | .align-self-end { 1392 | -webkit-align-self: flex-end; 1393 | -ms-flex-item-align: end; 1394 | align-self: flex-end; } 1395 | 1396 | .align-self-stretch { 1397 | -webkit-align-self: stretch; 1398 | -ms-flex-item-align: stretch; 1399 | align-self: stretch; } 1400 | 1401 | .align-self-baseline { 1402 | -webkit-align-self: baseline; 1403 | -ms-flex-item-align: baseline; 1404 | align-self: baseline; } 1405 | 1406 | .text-left { 1407 | text-align: left; } 1408 | 1409 | .text-center { 1410 | text-align: center; } 1411 | 1412 | .text-right { 1413 | text-align: right; } 1414 | 1415 | .ellipsis { 1416 | white-space: nowrap; 1417 | text-overflow: ellipsis; 1418 | overflow: auto; } 1419 | 1420 | .nowrap { 1421 | white-space: nowrap; } 1422 | 1423 | .clickless { 1424 | pointer-events: none; } 1425 | 1426 | .title-case { 1427 | text-transform: capitalize; } 1428 | 1429 | .lower-case { 1430 | text-transform: lowercase; } 1431 | 1432 | .upper-case { 1433 | text-transform: uppercase; } 1434 | 1435 | .display-none { 1436 | display: none; } 1437 | 1438 | .hidden { 1439 | visibility: hidden; } 1440 | 1441 | .shadow { 1442 | opacity: .65; } 1443 | 1444 | .ghost { 1445 | opacity: .35; } 1446 | 1447 | .vapor { 1448 | opacity: .1; } 1449 | 1450 | .sub-space, 1451 | .invisible { 1452 | opacity: 0; } 1453 | 1454 | .padless { 1455 | padding: 0; } 1456 | 1457 | .pad-half { 1458 | padding: .5em !important; } 1459 | 1460 | .pad-x-half { 1461 | padding-left: .5em !important; 1462 | padding-right: .5em !important; } 1463 | 1464 | .pad-y-half { 1465 | padding-top: .5em !important; 1466 | padding-bottom: .5em !important; } 1467 | 1468 | .pad-top-half { 1469 | padding-top: .5em !important; } 1470 | 1471 | .pad-right-half { 1472 | padding-right: .5em !important; } 1473 | 1474 | .pad-bottom-half { 1475 | padding-bottom: .5em !important; } 1476 | 1477 | .pad-left-half { 1478 | padding-left: .5em !important; } 1479 | 1480 | .pad-0 { 1481 | padding: 0 !important; } 1482 | 1483 | .pad-top-0 { 1484 | padding-top: 0 !important; } 1485 | 1486 | .pad-right-0 { 1487 | padding-right: 0 !important; } 1488 | 1489 | .pad-bottom-0 { 1490 | padding-bottom: 0 !important; } 1491 | 1492 | .pad-left-0 { 1493 | padding-left: 0 !important; } 1494 | 1495 | .pad-x-0 { 1496 | padding-left: 0 !important; 1497 | padding-right: 0 !important; } 1498 | 1499 | .pad-y-0 { 1500 | padding-top: 0 !important; 1501 | padding-bottom: 0 !important; } 1502 | 1503 | .pad-1 { 1504 | padding: 1em !important; } 1505 | 1506 | .pad-top-1 { 1507 | padding-top: 1em !important; } 1508 | 1509 | .pad-right-1 { 1510 | padding-right: 1em !important; } 1511 | 1512 | .pad-bottom-1 { 1513 | padding-bottom: 1em !important; } 1514 | 1515 | .pad-left-1 { 1516 | padding-left: 1em !important; } 1517 | 1518 | .pad-x-1 { 1519 | padding-left: 1em !important; 1520 | padding-right: 1em !important; } 1521 | 1522 | .pad-y-1 { 1523 | padding-top: 1em !important; 1524 | padding-bottom: 1em !important; } 1525 | 1526 | .pad-2 { 1527 | padding: 2em !important; } 1528 | 1529 | .pad-top-2 { 1530 | padding-top: 2em !important; } 1531 | 1532 | .pad-right-2 { 1533 | padding-right: 2em !important; } 1534 | 1535 | .pad-bottom-2 { 1536 | padding-bottom: 2em !important; } 1537 | 1538 | .pad-left-2 { 1539 | padding-left: 2em !important; } 1540 | 1541 | .pad-x-2 { 1542 | padding-left: 2em !important; 1543 | padding-right: 2em !important; } 1544 | 1545 | .pad-y-2 { 1546 | padding-top: 2em !important; 1547 | padding-bottom: 2em !important; } 1548 | 1549 | .borderless { 1550 | border: 0; } 1551 | 1552 | .border-1 { 1553 | box-shadow: 0 0 0 1px inset !important; } 1554 | 1555 | .border-2 { 1556 | box-shadow: 0 0 0 2px inset !important; } 1557 | 1558 | .nudge-left { 1559 | margin-right: 2px !important; } 1560 | 1561 | .nudge-right { 1562 | margin-left: 2px !important; } 1563 | 1564 | .nudge-top { 1565 | margin-bottom: 2px !important; } 1566 | 1567 | .nudge-bottom { 1568 | margin-top: 2px !important; } 1569 | 1570 | .rotate-0 { 1571 | -webkit-transform: rotate(0deg); 1572 | -ms-transform: rotate(0deg); 1573 | transform: rotate(0deg); } 1574 | 1575 | .rotate-15 { 1576 | -webkit-transform: rotate(15deg); 1577 | -ms-transform: rotate(15deg); 1578 | transform: rotate(15deg); } 1579 | 1580 | .rotate-30 { 1581 | -webkit-transform: rotate(30deg); 1582 | -ms-transform: rotate(30deg); 1583 | transform: rotate(30deg); } 1584 | 1585 | .rotate-45 { 1586 | -webkit-transform: rotate(45deg); 1587 | -ms-transform: rotate(45deg); 1588 | transform: rotate(45deg); } 1589 | 1590 | .rotate-60 { 1591 | -webkit-transform: rotate(60deg); 1592 | -ms-transform: rotate(60deg); 1593 | transform: rotate(60deg); } 1594 | 1595 | .rotate-75 { 1596 | -webkit-transform: rotate(75deg); 1597 | -ms-transform: rotate(75deg); 1598 | transform: rotate(75deg); } 1599 | 1600 | .rotate-90 { 1601 | -webkit-transform: rotate(90deg); 1602 | -ms-transform: rotate(90deg); 1603 | transform: rotate(90deg); } 1604 | 1605 | .rotate-105 { 1606 | -webkit-transform: rotate(105deg); 1607 | -ms-transform: rotate(105deg); 1608 | transform: rotate(105deg); } 1609 | 1610 | .rotate-120 { 1611 | -webkit-transform: rotate(120deg); 1612 | -ms-transform: rotate(120deg); 1613 | transform: rotate(120deg); } 1614 | 1615 | .rotate-135 { 1616 | -webkit-transform: rotate(135deg); 1617 | -ms-transform: rotate(135deg); 1618 | transform: rotate(135deg); } 1619 | 1620 | .rotate-150 { 1621 | -webkit-transform: rotate(150deg); 1622 | -ms-transform: rotate(150deg); 1623 | transform: rotate(150deg); } 1624 | 1625 | .rotate-165 { 1626 | -webkit-transform: rotate(165deg); 1627 | -ms-transform: rotate(165deg); 1628 | transform: rotate(165deg); } 1629 | 1630 | .rotate-180 { 1631 | -webkit-transform: rotate(180deg); 1632 | -ms-transform: rotate(180deg); 1633 | transform: rotate(180deg); } 1634 | 1635 | .rotate-195 { 1636 | -webkit-transform: rotate(195deg); 1637 | -ms-transform: rotate(195deg); 1638 | transform: rotate(195deg); } 1639 | 1640 | .rotate-210 { 1641 | -webkit-transform: rotate(210deg); 1642 | -ms-transform: rotate(210deg); 1643 | transform: rotate(210deg); } 1644 | 1645 | .rotate-225 { 1646 | -webkit-transform: rotate(225deg); 1647 | -ms-transform: rotate(225deg); 1648 | transform: rotate(225deg); } 1649 | 1650 | .rotate-240 { 1651 | -webkit-transform: rotate(240deg); 1652 | -ms-transform: rotate(240deg); 1653 | transform: rotate(240deg); } 1654 | 1655 | .rotate-255 { 1656 | -webkit-transform: rotate(255deg); 1657 | -ms-transform: rotate(255deg); 1658 | transform: rotate(255deg); } 1659 | 1660 | .rotate-270 { 1661 | -webkit-transform: rotate(270deg); 1662 | -ms-transform: rotate(270deg); 1663 | transform: rotate(270deg); } 1664 | 1665 | .rotate-285 { 1666 | -webkit-transform: rotate(285deg); 1667 | -ms-transform: rotate(285deg); 1668 | transform: rotate(285deg); } 1669 | 1670 | .rotate-300 { 1671 | -webkit-transform: rotate(300deg); 1672 | -ms-transform: rotate(300deg); 1673 | transform: rotate(300deg); } 1674 | 1675 | .rotate-315 { 1676 | -webkit-transform: rotate(315deg); 1677 | -ms-transform: rotate(315deg); 1678 | transform: rotate(315deg); } 1679 | 1680 | .rotate-330 { 1681 | -webkit-transform: rotate(330deg); 1682 | -ms-transform: rotate(330deg); 1683 | transform: rotate(330deg); } 1684 | 1685 | .rotate-345 { 1686 | -webkit-transform: rotate(345deg); 1687 | -ms-transform: rotate(345deg); 1688 | transform: rotate(345deg); } 1689 | 1690 | .rotate-360 { 1691 | -webkit-transform: rotate(360deg); 1692 | -ms-transform: rotate(360deg); 1693 | transform: rotate(360deg); } 1694 | 1695 | .animated { 1696 | -webkit-transition: all .3s ease-in-out; 1697 | transition: all .3s ease-in-out; } 1698 | 1699 | .has-pointer { 1700 | position: relative; } 1701 | .has-pointer::after { 1702 | content: ''; 1703 | border: 0 solid transparent; 1704 | position: absolute; 1705 | bottom: 0; 1706 | left: 50%; 1707 | -webkit-transform: translateX(-50%); 1708 | -ms-transform: translateX(-50%); 1709 | transform: translateX(-50%); 1710 | border-width: 0 .65rem .5rem .65rem; 1711 | border-bottom-color: #f3f4f5; } 1712 | 1713 | a, 1714 | a:visited { 1715 | color: currentColor; 1716 | text-decoration: none; } 1717 | 1718 | .small, 1719 | pre { 1720 | font-size: .7em; } 1721 | 1722 | ::-webkit-input-placeholder { 1723 | font-style: italic; 1724 | opacity: .35; } 1725 | 1726 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 1727 | display: none !important; } 1728 | 1729 | *, 1730 | *::before, 1731 | *::after { 1732 | box-sizing: border-box; } 1733 | 1734 | [ng-click], 1735 | [hm-tap], 1736 | label, 1737 | input, 1738 | textarea, 1739 | select { 1740 | cursor: pointer; 1741 | -webkit-tap-highlight-color: transparent; 1742 | -webkit-tap-highlight-color: transparent; 1743 | /* For some Androids */ } 1744 | 1745 | html, 1746 | body { 1747 | overflow: hidden; 1748 | position: relative; 1749 | margin: 0; 1750 | padding: 0; 1751 | top: 0; 1752 | left: 0; 1753 | width: 100%; 1754 | height: 100%; 1755 | font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 1756 | font-size: 5vmin; } 1757 | html.ng-animate, 1758 | body.ng-animate { 1759 | -webkit-transition: -webkit-transform 0.3s; 1760 | transition: transform 0.3s; } 1761 | 1762 | main { 1763 | position: absolute; 1764 | overflow: hidden; 1765 | top: 0; 1766 | left: 0; 1767 | width: 100%; 1768 | height: 100%; 1769 | z-index: 2; 1770 | -webkit-transition: -webkit-transform 0.3s; 1771 | transition: transform 0.3s; } 1772 | main > header { 1773 | -webkit-box-flex: 0; 1774 | -webkit-flex: 0 0 auto; 1775 | -ms-flex: 0 0 auto; 1776 | flex: 0 0 auto; 1777 | text-align: center; 1778 | padding: .5rem 1rem; 1779 | z-index: 4; 1780 | -webkit-transition: all .2s; 1781 | transition: all .2s; 1782 | font-size: 5.5vmin; } 1783 | main > header > button { 1784 | -webkit-box-flex: 0; 1785 | -webkit-flex: 0 0 auto; 1786 | -ms-flex: 0 0 auto; 1787 | flex: 0 0 auto; 1788 | padding: 0 .5em; } 1789 | main > header > button:not([class*="bg-"]) { 1790 | color: currentColor; 1791 | background: none; } 1792 | main article:not(:empty) { 1793 | -webkit-box-flex: 1; 1794 | -webkit-flex: 1 1 0px; 1795 | -ms-flex: 1 1 0px; 1796 | flex: 1 1 0px; } 1797 | main section { 1798 | padding: 0; 1799 | -webkit-box-flex: 0; 1800 | -webkit-flex: 0 0 auto; 1801 | -ms-flex: 0 0 auto; 1802 | flex: 0 0 auto; 1803 | position: relative; 1804 | font-size: 1rem; } 1805 | main footer { 1806 | box-shadow: 0 1px 0 0 rgba(226, 228, 230, 0.1) inset, 0 -1px 0 0 rgba(18, 21, 22, 0.1); 1807 | background-size: .5rem .5rem; 1808 | background-image: -webkit-linear-gradient(135deg, rgba(243, 244, 245, 0.075) 25%, transparent 25%, transparent 50%, rgba(243, 244, 245, 0.075) 50%, rgba(243, 244, 245, 0.075) 75%, transparent 75%, transparent); 1809 | background-image: linear-gradient(-45deg, rgba(243, 244, 245, 0.075) 25%, transparent 25%, transparent 50%, rgba(243, 244, 245, 0.075) 50%, rgba(243, 244, 245, 0.075) 75%, transparent 75%, transparent); } 1810 | 1811 | .main-menu { 1812 | position: absolute; 1813 | top: 0; 1814 | right: 0; 1815 | left: 3em; 1816 | bottom: 0; 1817 | z-index: 1 !important; 1818 | -webkit-transform: translate3d(100%, 0%, 0); 1819 | transform: translate3d(100%, 0%, 0); 1820 | -webkit-transition: -webkit-transform 0.3s; 1821 | transition: transform 0.3s; } 1822 | .main-menu header { 1823 | padding: .8em 1em; } 1824 | .main-menu ul { 1825 | margin: 0; 1826 | padding: .5em; 1827 | list-style: none; 1828 | -webkit-box-flex: 1; 1829 | -webkit-flex: 1; 1830 | -ms-flex: 1; 1831 | flex: 1; } 1832 | .main-menu li { 1833 | padding: .5em; 1834 | margin: .5em 0; 1835 | border-radius: 5em; } 1836 | .main-menu footer { 1837 | padding: .8em 1em; } 1838 | 1839 | .show-main-menu aside.main-menu { 1840 | -webkit-transform: translate3d(0%, 0%, 0); 1841 | transform: translate3d(0%, 0%, 0); } 1842 | .show-main-menu main { 1843 | box-shadow: 0 0 0 1vw rgba(18, 21, 22, 0.35); 1844 | -webkit-transform: translate3d(calc(-100% + 3em), 0%, 0); 1845 | transform: translate3d(calc(-100% + 3em), 0%, 0); } 1846 | 1847 | article { 1848 | display: -webkit-box; 1849 | display: -webkit-flex; 1850 | display: -ms-flexbox; 1851 | display: flex; 1852 | -webkit-box-orient: horizontal; 1853 | -webkit-box-direction: normal; 1854 | -webkit-flex-direction: row; 1855 | -ms-flex-direction: row; 1856 | flex-direction: row; 1857 | -webkit-box-flex: 0; 1858 | -webkit-flex: 0 0 auto; 1859 | -ms-flex: 0 0 auto; 1860 | flex: 0 0 auto; 1861 | -webkit-user-select: none; 1862 | -moz-user-select: none; 1863 | -ms-user-select: none; 1864 | user-select: none; } 1865 | article.bg-dark { 1866 | text-shadow: -1px -1px 0 rgba(18, 21, 22, 0.5); } 1867 | article.bg-dark header { 1868 | color: get-color("light-blue", 400); } 1869 | article.bg-dark header span ~ button { 1870 | box-shadow: -1px 0 0 0 rgba(243, 244, 245, 0.1); 1871 | background: rgba(18, 21, 22, 0.2); } 1872 | article.bg-dark button::before { 1873 | text-shadow: -1px -1px 0 rgba(18, 21, 22, 0.5); } 1874 | 1875 | .close-view { 1876 | padding: 0; 1877 | position: absolute; 1878 | z-index: 5; 1879 | height: 2.5rem; 1880 | width: 2.5rem; 1881 | line-height: 1; 1882 | border-radius: 100%; 1883 | background: rgba(226, 228, 230, 0.2); 1884 | color: #f3f4f5; } 1885 | .close-view::before, .close-view::after { 1886 | content: ''; 1887 | position: absolute; 1888 | top: 50%; 1889 | left: 50%; 1890 | padding: 1px .8em; 1891 | background: currentColor; 1892 | -webkit-transform-origin: center; 1893 | -ms-transform-origin: center; 1894 | transform-origin: center; } 1895 | .close-view::before { 1896 | -webkit-transform: translate(-50%, -50%) rotate(45deg); 1897 | -ms-transform: translate(-50%, -50%) rotate(45deg); 1898 | transform: translate(-50%, -50%) rotate(45deg); } 1899 | .close-view::after { 1900 | -webkit-transform: translate(-50%, -50%) rotate(-45deg); 1901 | -ms-transform: translate(-50%, -50%) rotate(-45deg); 1902 | transform: translate(-50%, -50%) rotate(-45deg); } 1903 | 1904 | input, 1905 | button, 1906 | .button, 1907 | textarea, 1908 | select { 1909 | font-size: 1rem; 1910 | border: 0; 1911 | line-height: 1; 1912 | -webkit-appearance: none; 1913 | -moz-appearance: none; 1914 | appearance: none; 1915 | outline: none; 1916 | -webkit-transition: all .3s; 1917 | transition: all .3s; 1918 | outline-offset: 0; 1919 | margin: 0; } 1920 | input::-moz-focus-inner, 1921 | button::-moz-focus-inner, 1922 | .button::-moz-focus-inner, 1923 | textarea::-moz-focus-inner, 1924 | select::-moz-focus-inner { 1925 | border: 0; 1926 | padding: 0; } 1927 | input.smaller, 1928 | button.smaller, 1929 | .button.smaller, 1930 | textarea.smaller, 1931 | select.smaller { 1932 | font-size: .85rem; } 1933 | input.bigger, 1934 | button.bigger, 1935 | .button.bigger, 1936 | textarea.bigger, 1937 | select.bigger { 1938 | font-size: 1.25rem; } 1939 | 1940 | select { 1941 | padding: .5em; } 1942 | 1943 | textarea::-webkit-input-placeholder { 1944 | opacity: .4; } 1945 | 1946 | .select-me { 1947 | padding: .5em; 1948 | position: relative; } 1949 | .select-me select { 1950 | width: auto; 1951 | padding: 0 0 0 1em; 1952 | background: transparent; 1953 | color: currentColor; 1954 | font-size: 1em; 1955 | text-shadow: inherit; 1956 | line-height: 1.4; } 1957 | .select-me:after { 1958 | content: ''; 1959 | display: block; 1960 | position: absolute; 1961 | pointer-events: none; 1962 | left: .5em; 1963 | top: 50%; 1964 | -webkit-transform: translateY(-50%); 1965 | -ms-transform: translateY(-50%); 1966 | transform: translateY(-50%); 1967 | border-style: solid; 1968 | border-color: transparent; 1969 | border-width: .35em .35em 0 .35em; 1970 | border-top-color: currentColor; } 1971 | 1972 | input[type="radio"], input[type="checkbox"] { 1973 | width: 1em; 1974 | height: 1em; 1975 | padding: 0; 1976 | display: inline-block; 1977 | vertical-align: middle; 1978 | color: #00BCD4; 1979 | position: relative; } 1980 | input[type="radio"]:checked, input[type="checkbox"]:checked { 1981 | background: #40cddf; } 1982 | input[type="radio"]:focus, input[type="checkbox"]:focus { 1983 | outline: none; } 1984 | input[type="radio"]:before, input[type="checkbox"]:before { 1985 | content: ''; 1986 | position: absolute; } 1987 | input[type="radio"][disabled], input[type="checkbox"][disabled] { 1988 | opacity: .35; } 1989 | input[type="radio"] { 1990 | border-radius: 2em; } 1991 | input[type="radio"]:checked:before { 1992 | background: #00BCD4; 1993 | padding: 0; 1994 | top: 25%; 1995 | left: 25%; 1996 | width: 50%; 1997 | height: 50%; 1998 | border-radius: 1em; 1999 | margin: 0; } 2000 | input[type="checkbox"]:not(.toggle) { 2001 | border-radius: .2em; 2002 | margin-right: .3em; } 2003 | input[type="checkbox"]:not(.toggle):checked:before { 2004 | -webkit-transform: rotate(-45deg); 2005 | -ms-transform: rotate(-45deg); 2006 | transform: rotate(-45deg); 2007 | border: 0 solid; 2008 | border-width: 0 0 .225em .225em; 2009 | padding: .15em .4em; 2010 | left: 20%; 2011 | top: 0%; } 2012 | input[type="checkbox"].toggle { 2013 | background: rgba(18, 21, 22, 0.3); 2014 | border-radius: 2em; 2015 | width: 2em; 2016 | height: 1em; 2017 | font-size: 1rem; 2018 | -webkit-transform: translate3d(0%, 0%, 0); 2019 | transform: translate3d(0%, 0%, 0); } 2020 | input[type="checkbox"].toggle.active-null { 2021 | background: #40cddf; } 2022 | input[type="checkbox"].toggle::before { 2023 | left: 0; 2024 | top: 50%; 2025 | width: 1em; 2026 | height: 1em; 2027 | border-radius: 2em; 2028 | background: #E2E4E6; 2029 | -webkit-transition: .2s; 2030 | transition: .2s; 2031 | -webkit-transform: translate3d(0%, -50%, 0) scale(0.8); 2032 | transform: translate3d(0%, -50%, 0) scale(0.8); } 2033 | input[type="checkbox"].toggle:checked { 2034 | background: #40cddf; } 2035 | input[type="checkbox"].toggle:checked:before { 2036 | -webkit-transform: translate3d(100%, -50%, 0) scale(0.8); 2037 | transform: translate3d(100%, -50%, 0) scale(0.8); } 2038 | input[type="checkbox"].toggle + label { 2039 | margin-left: .5em; } 2040 | input[type="range"] { 2041 | padding: 0; 2042 | border: 0; 2043 | vertical-align: middle; 2044 | border-radius: 1em; 2045 | background: rgba(18, 21, 22, 0.3); } 2046 | input[type="range"]::-webkit-slider-thumb { 2047 | -webkit-appearance: none; 2048 | width: 1em; 2049 | height: 1em; 2050 | border: none; 2051 | border-radius: 1em; 2052 | background: #E2E4E6; 2053 | background-image: none; 2054 | -webkit-transform: scale(0.8); 2055 | transform: scale(0.8); 2056 | -webkit-transition: all .3s; 2057 | transition: all .3s; } 2058 | input[type="range"]:focus::-webkit-slider-thumb, input[type="range"]:active::-webkit-slider-thumb { 2059 | -webkit-appearance: none; 2060 | background: #40cddf; 2061 | -webkit-transform: scale(1.3); 2062 | transform: scale(1.3); } 2063 | 2064 | textarea { 2065 | width: 100%; 2066 | padding: 1em; 2067 | display: block; 2068 | background: transparent; 2069 | resize: none; 2070 | line-height: 1.4; 2071 | border-radius: 0; } 2072 | 2073 | input[type="text"], 2074 | input[type="time"] { 2075 | width: 100%; 2076 | padding: .5em; 2077 | display: block; 2078 | border-radius: .2rem; } 2079 | 2080 | input[type="number"] { 2081 | -webkit-appearance: text; 2082 | width: 25%; 2083 | padding: .3em .5em; 2084 | display: inline-block; } 2085 | 2086 | input::-webkit-input-placeholder { 2087 | color: #23292C; } 2088 | 2089 | .input-button-group { 2090 | position: relative; 2091 | border-radius: .2em; } 2092 | .input-button-group *:first-child { 2093 | border-radius: .2rem 0 0 .2rem; } 2094 | .input-button-group *:last-child { 2095 | border-radius: 0 .2rem .2rem 0; } 2096 | .input-button-group * + * { 2097 | box-shadow: -1px 0 0 0 #121516; } 2098 | .input-button-group button { 2099 | padding-left: .75em; 2100 | padding-right: .75em; } 2101 | 2102 | .stealth-input { 2103 | position: relative; } 2104 | .stealth-input input { 2105 | position: absolute !important; 2106 | width: auto !important; 2107 | top: 0 !important; 2108 | left: 0 !important; 2109 | bottom: 0 !important; 2110 | right: 0 !important; 2111 | font-size: 0 !important; 2112 | padding: 0 !important; 2113 | border: 0 !important; 2114 | margin: 0 !important; 2115 | opacity: 0 !important; } 2116 | 2117 | button, 2118 | .button { 2119 | padding: 0; 2120 | position: relative; 2121 | font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 2122 | text-align: center; } 2123 | button.cancel, 2124 | .button.cancel { 2125 | background: rgba(0, 141, 159, 0.3); 2126 | color: #f3f4f5; } 2127 | button.success, 2128 | .button.success { 2129 | background: rgba(156, 204, 101, 0.1); 2130 | color: #23292C; } 2131 | button.alert, 2132 | .button.alert { 2133 | background: rgba(240, 98, 146, 0.8); 2134 | color: #23292C; } 2135 | button[data-text]:after, 2136 | .button[data-text]:after { 2137 | content: attr(data-text); 2138 | font-size: 1em; 2139 | position: absolute; 2140 | top: 50%; 2141 | left: 50%; 2142 | -webkit-transform: translate(-50%, -50%); 2143 | -ms-transform: translate(-50%, -50%); 2144 | transform: translate(-50%, -50%); } 2145 | button[disabled], 2146 | .button[disabled] { 2147 | opacity: .35; 2148 | pointer-events: none; } 2149 | button.small, 2150 | .button.small { 2151 | font-size: .7em; } 2152 | button small, 2153 | .button small { 2154 | display: block; 2155 | font-size: .7em; 2156 | opacity: .5; 2157 | padding-top: .3em; } 2158 | button.active, 2159 | .button.active { 2160 | background: #00BCD4; 2161 | color: #f3f4f5; } 2162 | button.active small, 2163 | .button.active small { 2164 | opacity: .8; } 2165 | button.action, 2166 | .button.action { 2167 | -webkit-transition: none; 2168 | transition: none; 2169 | padding: 1rem; } 2170 | button.action .fa, 2171 | .button.action .fa { 2172 | position: absolute; 2173 | top: 50%; 2174 | left: 50%; 2175 | -webkit-transform: translate(-50%, -50%); 2176 | -ms-transform: translate(-50%, -50%); 2177 | transform: translate(-50%, -50%); 2178 | text-decoration: none; } 2179 | 2180 | /* CONTEXT OVERRIDES */ 2181 | section button, 2182 | section .button, 2183 | footer button, 2184 | footer .button { 2185 | border-radius: 0; 2186 | padding: .75rem 1.25rem; } 2187 | 2188 | .flex-wrap button, 2189 | .flex-wrap .button { 2190 | margin: .1em; 2191 | padding: .5em 1em; } 2192 | 2193 | .easy-buttons { 2194 | -webkit-flex-wrap: wrap; 2195 | -ms-flex-wrap: wrap; 2196 | flex-wrap: wrap; } 2197 | .easy-buttons button, 2198 | .easy-buttons .button { 2199 | font-size: .9em; 2200 | margin: 0; 2201 | padding: .65rem 1rem; 2202 | box-shadow: 0 0 0 1px #23292C; 2203 | font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 2204 | -webkit-box-flex: 1; 2205 | -webkit-flex: 1 1 33.33334%; 2206 | -ms-flex: 1 1 33.33334%; 2207 | flex: 1 1 33.33334%; } 2208 | .easy-buttons button.weekend:not(.active) > *, 2209 | .easy-buttons .button.weekend:not(.active) > * { 2210 | opacity: .5; } 2211 | .easy-buttons input[type="range"] { 2212 | box-shadow: 0 0 0 0.1rem #23292C inset; } 2213 | 2214 | .toggle-bar { 2215 | margin: 0; } 2216 | .toggle-bar .item { 2217 | padding: .5em 0; 2218 | -webkit-box-flex: 1; 2219 | -webkit-flex: 1 0 12.5%; 2220 | -ms-flex: 1 0 12.5%; 2221 | flex: 1 0 12.5%; 2222 | line-height: 1; 2223 | text-align: center; 2224 | font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 2225 | position: relative; 2226 | box-shadow: 0 0 0 1px #23292C; } 2227 | .toggle-bar .item:empty { 2228 | padding: 0; 2229 | height: 0; } 2230 | .toggle-bar input[type="radio"], 2231 | .toggle-bar input[type="checkbox"] { 2232 | position: absolute; 2233 | opacity: 0; } 2234 | 2235 | .has-grid-picker { 2236 | position: relative; } 2237 | 2238 | .grid-picker { 2239 | position: absolute; 2240 | top: 0; 2241 | right: 0; 2242 | bottom: 0; 2243 | left: 0; 2244 | z-index: 1; 2245 | display: -webkit-box; 2246 | display: -webkit-flex; 2247 | display: -ms-flexbox; 2248 | display: flex; 2249 | -webkit-box-orient: vertical; 2250 | -webkit-box-direction: normal; 2251 | -webkit-flex-direction: column; 2252 | -ms-flex-direction: column; 2253 | flex-direction: column; 2254 | box-shadow: 0 0 1em 0.2em rgba(18, 21, 22, 0.65); } 2255 | .grid-picker .grid-picker-header { 2256 | padding: .5rem; } 2257 | .grid-picker .grid-picker-items { 2258 | box-shadow: 0 0 0 1px; 2259 | display: -webkit-box; 2260 | display: -webkit-flex; 2261 | display: -ms-flexbox; 2262 | display: flex; 2263 | -webkit-box-orient: horizontal; 2264 | -webkit-box-direction: normal; 2265 | -webkit-flex-direction: row; 2266 | -ms-flex-direction: row; 2267 | flex-direction: row; 2268 | -webkit-flex-wrap: wrap; 2269 | -ms-flex-wrap: wrap; 2270 | flex-wrap: wrap; 2271 | overflow-y: auto; 2272 | -webkit-overflow-scrolling: touch; } 2273 | .grid-picker .grid-picker-items + .grid-picker-items { 2274 | border-top: 1px solid; } 2275 | .grid-picker .item { 2276 | padding: .5em 0; 2277 | -webkit-box-flex: 1; 2278 | -webkit-flex: 1 0 12.5%; 2279 | -ms-flex: 1 0 12.5%; 2280 | flex: 1 0 12.5%; 2281 | line-height: 1; 2282 | text-align: center; 2283 | font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 2284 | position: relative; 2285 | box-shadow: 0 0 0 1px #23292C; } 2286 | .grid-picker .item.used::before { 2287 | content: ''; 2288 | display: block; 2289 | position: absolute; 2290 | right: 10%; 2291 | bottom: 10%; 2292 | border: .25em solid; 2293 | border-radius: 100%; } 2294 | .grid-picker .item.used.this-one::after { 2295 | opacity: .65; 2296 | right: 50%; 2297 | border-radius: 100%; 2298 | -webkit-transform: translateX(50%) scale(0.5); 2299 | -ms-transform: translateX(50%) scale(0.5); 2300 | transform: translateX(50%) scale(0.5); 2301 | border-color: #23292C; } 2302 | 2303 | .pillbox-bar { 2304 | display: -webkit-box; 2305 | display: -webkit-flex; 2306 | display: -ms-flexbox; 2307 | display: flex; 2308 | -webkit-box-orient: horizontal; 2309 | -webkit-box-direction: normal; 2310 | -webkit-flex-direction: row; 2311 | -ms-flex-direction: row; 2312 | flex-direction: row; } 2313 | .pillbox-bar .item { 2314 | position: relative; 2315 | text-align: center; 2316 | padding: .75em 0; 2317 | line-height: 1; 2318 | -webkit-box-flex: 1; 2319 | -webkit-flex: 1 0 12.5%; 2320 | -ms-flex: 1 0 12.5%; 2321 | flex: 1 0 12.5%; } 2322 | .pillbox-bar .item + .item { 2323 | box-shadow: -1px 0 0 0 #121516; } 2324 | .pillbox-bar input { 2325 | font-size: 1em; } 2326 | .pillbox-bar + input { 2327 | margin-left: 2px; } 2328 | .pillbox-bar + .pillbox-bar { 2329 | border-top: 1px solid #121516; } 2330 | 2331 | .pillbox-tray { 2332 | font-size: .8em; 2333 | box-shadow: 0 0 0 1px #121516; } 2334 | .pillbox-tray + .pillbox-tray { 2335 | margin-top: 1rem; } 2336 | 2337 | .priority-buttons { 2338 | position: relative; 2339 | margin: 0; 2340 | z-index: 3; } 2341 | .priority-buttons .label { 2342 | font-size: .8em; } 2343 | .priority-buttons .rank { 2344 | padding: .7em; 2345 | margin: 0; 2346 | border-radius: 0; 2347 | position: relative; 2348 | -webkit-transition: all .3s; 2349 | transition: all .3s; 2350 | -webkit-transform: scale(1, 1); 2351 | -ms-transform: scale(1, 1); 2352 | transform: scale(1, 1); 2353 | line-height: 1; 2354 | z-index: 1; 2355 | border-radius: 2em; 2356 | box-shadow: 0 0 0 2px rgba(243, 244, 245, 0.3) inset, 0 0.3em 0 0 rgba(18, 21, 22, 0.3); } 2357 | .priority-buttons .rank.active { 2358 | -webkit-transform: scale(1.65); 2359 | -ms-transform: scale(1.65); 2360 | transform: scale(1.65); 2361 | z-index: 2; } 2362 | .priority-buttons .rank-none { 2363 | background: #5a5f61; 2364 | color: #f3f4f5; } 2365 | .priority-buttons .rank-low { 2366 | background: #d1de4c; 2367 | color: #23292C; } 2368 | .priority-buttons .rank-med { 2369 | background: #18c2d7; 2370 | color: #f3f4f5; } 2371 | .priority-buttons .rank-high { 2372 | background: #fe6737; 2373 | color: #23292C; } 2374 | .priority-buttons span { 2375 | position: absolute; 2376 | top: 50%; 2377 | left: 50%; 2378 | -webkit-transform: translate(-50%, -50%) scale(0.7, 0.7); 2379 | -ms-transform: translate(-50%, -50%) scale(0.7, 0.7); 2380 | transform: translate(-50%, -50%) scale(0.7, 0.7); } 2381 | .priority-buttons input[type="radio"] { 2382 | position: absolute; 2383 | opacity: 0; 2384 | top: 0; 2385 | left: 0; } 2386 | 2387 | .drop-menu { 2388 | position: relative; } 2389 | .drop-menu .menu-label { 2390 | padding: .8em .5em; 2391 | text-align: start; } 2392 | .drop-menu .menu-items { 2393 | display: none; 2394 | -webkit-box-orient: vertical; 2395 | -webkit-box-direction: normal; 2396 | -webkit-flex-direction: column; 2397 | -ms-flex-direction: column; 2398 | flex-direction: column; 2399 | position: absolute; 2400 | text-align: center; 2401 | top: 100%; 2402 | left: -1em; 2403 | width: 75vw; 2404 | margin-top: .25rem; 2405 | font-size: .8em; 2406 | border-radius: .3rem; 2407 | box-shadow: 0 0 0 1px #5c6164, 0 0.25em 1em 0.4em rgba(18, 21, 22, 0.65); } 2408 | .drop-menu .menu-items > div { 2409 | max-height: 45vh; 2410 | position: relative; 2411 | padding: .25rem; } 2412 | .drop-menu .menu-items > div.scroller { 2413 | margin: .25rem; } 2414 | .drop-menu .menu-items > div.has-actions-row { 2415 | margin-bottom: 0; 2416 | border-radius: .3rem; 2417 | box-shadow: 0 0 0.5rem 0.1rem rgba(18, 21, 22, 0.35) inset; } 2418 | .drop-menu .menu-items.open { 2419 | display: -webkit-box; 2420 | display: -webkit-flex; 2421 | display: -ms-flexbox; 2422 | display: flex; } 2423 | .drop-menu .menu-items::before, .drop-menu .menu-items::after { 2424 | content: ''; 2425 | border: 0 solid transparent; 2426 | position: absolute; 2427 | bottom: 100%; 2428 | left: 2.5em; 2429 | -webkit-transform: translateX(-50%); 2430 | -ms-transform: translateX(-50%); 2431 | transform: translateX(-50%); 2432 | border-width: 0 .8em .7em .8em; } 2433 | .drop-menu .menu-items::before { 2434 | margin-bottom: 1px; } 2435 | .drop-menu .menu-items .item { 2436 | padding: .5rem; 2437 | -webkit-box-flex: 1; 2438 | -webkit-flex: 1 0 auto; 2439 | -ms-flex: 1 0 auto; 2440 | flex: 1 0 auto; 2441 | border-radius: .25rem; 2442 | margin: .25rem; } 2443 | .drop-menu .menu-items .scroller .item { 2444 | box-shadow: none; 2445 | text-align: start; } 2446 | 2447 | .content { 2448 | position: relative; } 2449 | .content h1 { 2450 | font-size: 13vmin; 2451 | font-weight: 100; 2452 | margin: 0 10vmin .5rem 10vmin; 2453 | text-align: center; } 2454 | .content h2 { 2455 | font-weight: 200; 2456 | margin: 0 0 .5em 0; } 2457 | .content h3 { 2458 | font-weight: 200; 2459 | margin: .2em 0; } 2460 | .content p { 2461 | margin: 0; } 2462 | .content * + p { 2463 | margin-top: 1.5em; } 2464 | .content button.action { 2465 | border-radius: 100%; 2466 | padding: 1.65em; } 2467 | 2468 | .flip-container { 2469 | -webkit-perspective: 800; 2470 | perspective: 800; } 2471 | .flip-container.flip-me .flipper { 2472 | -webkit-transform: rotateY(180deg); 2473 | transform: rotateY(180deg); } 2474 | 2475 | .flip-container, .front, .back { 2476 | width: 100vw; 2477 | text-align: center; 2478 | margin: 0 auto; } 2479 | 2480 | .flipper { 2481 | font-size: 50vmin; 2482 | height: 1em; 2483 | -webkit-transition: 0.8s cubic-bezier(1, -0.5, 0.2, 1.5); 2484 | transition: 0.8s cubic-bezier(1, -0.5, 0.2, 1.5); 2485 | -webkit-transform-style: preserve-3d; 2486 | transform-style: preserve-3d; 2487 | position: relative; } 2488 | .flipper .front, .flipper .back { 2489 | -webkit-backface-visibility: hidden; 2490 | backface-visibility: hidden; 2491 | position: absolute; 2492 | top: 0; 2493 | height: 1em; 2494 | left: 50%; 2495 | -webkit-transform: translate(-50%, 0%); 2496 | -ms-transform: translate(-50%, 0%); 2497 | transform: translate(-50%, 0%); 2498 | -webkit-box-flex: 1; 2499 | -webkit-flex: 1; 2500 | -ms-flex: 1; 2501 | flex: 1; 2502 | border-radius: 100%; } 2503 | .flipper .front { 2504 | z-index: 2; 2505 | display: -webkit-box; 2506 | display: -webkit-flex; 2507 | display: -ms-flexbox; 2508 | display: flex; 2509 | -webkit-box-align: center; 2510 | -webkit-align-items: center; 2511 | -ms-flex-align: center; 2512 | align-items: center; 2513 | -webkit-transform: translate(-50%, 0%) rotateY(0deg); 2514 | transform: translate(-50%, 0%) rotateY(0deg); } 2515 | .flipper .back { 2516 | -webkit-transform: translate(-50%, 0%) rotateY(180deg); 2517 | transform: translate(-50%, 0%) rotateY(180deg); 2518 | width: 1em; } 2519 | 2520 | .do-this { 2521 | position: absolute; 2522 | display: none; 2523 | z-index: 4; 2524 | top: 3.5em; 2525 | right: 1em; 2526 | bottom: auto; 2527 | left: auto; 2528 | padding: .5em 1em; 2529 | border-radius: 3em; 2530 | white-space: nowrap; 2531 | -webkit-box-flex: 0; 2532 | -webkit-flex: 0 0 auto; 2533 | -ms-flex: 0 0 auto; 2534 | flex: 0 0 auto; 2535 | text-align: center; 2536 | background: #40cddf; 2537 | color: #23292C; 2538 | line-height: 1; 2539 | box-shadow: 0 0.3em 2em -0.5em #121516; 2540 | opacity: .85; } 2541 | .do-this:not(.ng-animate) { 2542 | -webkit-transition: 1s; 2543 | transition: 1s; } 2544 | .do-this::before { 2545 | content: 'Start here...'; 2546 | font-style: italic; } 2547 | .do-this::after { 2548 | content: ''; 2549 | position: absolute; 2550 | bottom: 90%; 2551 | right: .5em; 2552 | border: .5em solid transparent; 2553 | border-width: 0 0 1em 1em; 2554 | border-color: transparent transparent #40cddf transparent; 2555 | -webkit-transition: 1s; 2556 | transition: 1s; } 2557 | 2558 | main.main ~ .do-this, 2559 | main.add-course ~ .do-this { 2560 | display: block; } 2561 | 2562 | .show-main-menu .do-this { 2563 | top: 12.3em; } 2564 | .show-main-menu .do-this::before { 2565 | content: 'Good! Now this...'; } 2566 | .show-main-menu .do-this::after { 2567 | right: calc(100% - 1.5em); 2568 | border-width: 0 1em 1em 0; } 2569 | 2570 | main.add-course ~ .do-this { 2571 | top: 8em; 2572 | right: 3em; } 2573 | main.add-course ~ .do-this::before { 2574 | content: 'Change colors & Add a sticker'; } 2575 | main.add-course ~ .do-this::after { 2576 | right: calc(100% - 1.5em); 2577 | border-width: 0 1em 1em 0; } 2578 | main.add-course ~ .do-this.step-2 { 2579 | top: calc(100% - 4em); 2580 | right: 1em; } 2581 | main.add-course ~ .do-this.step-2::before { 2582 | content: 'Save it here!'; } 2583 | main.add-course ~ .do-this.step-2::after { 2584 | bottom: -.8em; 2585 | right: 1em; 2586 | border-width: 0 1em 1em 0; 2587 | border-color: transparent #40cddf transparent transparent; } 2588 | 2589 | .as-sortable-placeholder { 2590 | min-height: 4em; 2591 | background-size: .5rem .5rem; 2592 | background-image: -webkit-linear-gradient(135deg, rgba(243, 244, 245, 0.05) 25%, transparent 25%, transparent 50%, rgba(243, 244, 245, 0.05) 50%, rgba(243, 244, 245, 0.05) 75%, transparent 75%, transparent); 2593 | background-image: linear-gradient(-45deg, rgba(243, 244, 245, 0.05) 25%, transparent 25%, transparent 50%, rgba(243, 244, 245, 0.05) 50%, rgba(243, 244, 245, 0.05) 75%, transparent 75%, transparent); } 2594 | 2595 | .as-sortable-helper { 2596 | opacity: .65; 2597 | font-size: .8em; 2598 | padding: 1em; 2599 | box-shadow: 0 0 1em 0 #121516; 2600 | -webkit-transform: scale(0.9); 2601 | -ms-transform: scale(0.9); 2602 | transform: scale(0.9); } 2603 | .as-sortable-helper .data { 2604 | padding: .5em; } 2605 | 2606 | .as-sortable-item { 2607 | -ms-touch-action: none; 2608 | touch-action: none; } 2609 | 2610 | .as-sortable-item-handle { 2611 | cursor: move; 2612 | cursor: -webkit-grab; 2613 | cursor: -moz-grab; } 2614 | 2615 | .as-sortable-drag { 2616 | position: absolute; 2617 | pointer-events: none; 2618 | z-index: 9999; } 2619 | 2620 | .as-sortable-hidden { 2621 | display: none !important; } 2622 | 2623 | .as-sortable-un-selectable { 2624 | -webkit-touch-callout: none; 2625 | -webkit-user-select: none; 2626 | -moz-user-select: none; 2627 | -ms-user-select: none; 2628 | user-select: none; } 2629 | 2630 | .as-sortable-drag { 2631 | position: absolute; 2632 | pointer-events: none; 2633 | z-index: 10; 2634 | opacity: .85; 2635 | padding: 0; } 2636 | .as-sortable-drag section { 2637 | width: 100% !important; 2638 | margin: 0 !important; } 2639 | .as-sortable-drag section > div { 2640 | padding: .75rem .5rem; 2641 | font-size: 1.2em; 2642 | margin: .125em; } 2643 | .as-sortable-drag section .actions { 2644 | display: none; } 2645 | .as-sortable-drag section .info .mover { 2646 | pointer-events: none; 2647 | background: none; 2648 | color: #E2E4E6; 2649 | font-size: 1em; 2650 | border-radius: 100%; 2651 | font-family: 'FontAwesome'; } 2652 | 2653 | body { 2654 | background: #00BCD4; 2655 | color: #f3f4f5; } 2656 | 2657 | main > header:not([class*="bg-"]) { 2658 | border-bottom: 0.2em solid #40cddf; } 2659 | 2660 | .view-is-loading { 2661 | position: absolute; 2662 | top: 0; 2663 | height: 33vh; 2664 | right: 0; 2665 | left: 0; 2666 | display: none; 2667 | -webkit-box-orient: horizontal; 2668 | -webkit-box-direction: normal; 2669 | -webkit-flex-direction: row; 2670 | -ms-flex-direction: row; 2671 | flex-direction: row; 2672 | -webkit-box-align: center; 2673 | -webkit-align-items: center; 2674 | -ms-flex-align: center; 2675 | align-items: center; 2676 | -webkit-box-pack: center; 2677 | -webkit-justify-content: center; 2678 | -ms-flex-pack: center; 2679 | justify-content: center; 2680 | background: rgba(35, 41, 44, 0.85); 2681 | color: #40cddf; 2682 | z-index: 100; } 2683 | .view-is-loading.active { 2684 | display: -webkit-box; 2685 | display: -webkit-flex; 2686 | display: -ms-flexbox; 2687 | display: flex; } 2688 | 2689 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /css/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../sass/_variables.scss","../sass/_colors.scss","../sass/_keyframes.scss","../sass/_transitions.scss","styles.css","../sass/_base.scss","../sass/_layout.scss","../sass/_inputs.scss","../sass/_content.scss","../sass/_flipper.scss","../sass/_helper.scss","../sass/_sortables.scss","../sass/_theme.scss","../sass/styles.scss"],"names":[],"mappings":"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","file":"styles.css"} -------------------------------------------------------------------------------- /css/time-dial.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes pulse { 2 | 0% { 3 | -webkit-transform: translate(-50%, -50%) scale(1); 4 | transform: translate(-50%, -50%) scale(1); } 5 | 51% { 6 | -webkit-transform: translate(-50%, -50%) scale(1.65); 7 | transform: translate(-50%, -50%) scale(1.65); } 8 | 100% { 9 | -webkit-transform: translate(-50%, -50%) scale(1); 10 | transform: translate(-50%, -50%) scale(1); } } 11 | @keyframes pulse { 12 | 0% { 13 | -webkit-transform: translate(-50%, -50%) scale(1); 14 | transform: translate(-50%, -50%) scale(1); } 15 | 51% { 16 | -webkit-transform: translate(-50%, -50%) scale(1.65); 17 | transform: translate(-50%, -50%) scale(1.65); } 18 | 100% { 19 | -webkit-transform: translate(-50%, -50%) scale(1); 20 | transform: translate(-50%, -50%) scale(1); } } 21 | @-webkit-keyframes pulse-alt { 22 | 0% { 23 | -webkit-transform: translate(0, 10%) scale(1); 24 | transform: translate(0, 10%) scale(1); } 25 | 51% { 26 | -webkit-transform: translate(0, 10%) scale(1.65); 27 | transform: translate(0, 10%) scale(1.65); } 28 | 100% { 29 | -webkit-transform: translate(0, 10%) scale(1); 30 | transform: translate(0, 10%) scale(1); } } 31 | @keyframes pulse-alt { 32 | 0% { 33 | -webkit-transform: translate(0, 10%) scale(1); 34 | transform: translate(0, 10%) scale(1); } 35 | 51% { 36 | -webkit-transform: translate(0, 10%) scale(1.65); 37 | transform: translate(0, 10%) scale(1.65); } 38 | 100% { 39 | -webkit-transform: translate(0, 10%) scale(1); 40 | transform: translate(0, 10%) scale(1); } } 41 | .time-dial { 42 | font-size: 300px; 43 | width: 1em; 44 | height: 1em; 45 | position: relative; 46 | line-height: 1; 47 | color: inherit; 48 | /* inherit from parent element or set explicitly: $light */ 49 | border-radius: 100%; } 50 | .time-dial::before { 51 | content: ''; 52 | position: absolute; 53 | top: 0; 54 | right: 0; 55 | bottom: 0; 56 | left: 0; 57 | -webkit-transform: scale(1.05); 58 | -ms-transform: scale(1.05); 59 | transform: scale(1.05); 60 | border: .04em solid; 61 | border-radius: 100%; } 62 | .time-dial .lcd { 63 | position: absolute; 64 | z-index: 1; 65 | top: 50%; 66 | left: 50%; 67 | -webkit-transform: translate(-50%, -50%); 68 | -ms-transform: translate(-50%, -50%); 69 | transform: translate(-50%, -50%); 70 | font-size: 80%; 71 | padding: .3em .2em; 72 | border-radius: 1em; 73 | font-family: "DIN Condensed", Impact, Helvetica, sans-serif; 74 | -webkit-user-select: none; 75 | -moz-user-select: none; 76 | -ms-user-select: none; 77 | user-select: none; 78 | pointer-events: auto; 79 | cursor: pointer; 80 | -webkit-font-smoothing: subpixel-antialiased; 81 | -webkit-transition: color 0.3s ease-out, background 0.3s ease-out, top 0.3s ease-out; 82 | transition: color 0.3s ease-out, background 0.3s ease-out, top 0.3s ease-out; } 83 | .time-dial .lcd.toggled .meridiem { 84 | -webkit-animation: pulse 0.3s ease-out; 85 | animation: pulse 0.3s ease-out; } 86 | .time-dial .lcd.toggled.Noon .meridiem, .time-dial .lcd.toggled.Midnight .meridiem { 87 | -webkit-animation: pulse-alt 0.3s ease-out; 88 | animation: pulse-alt 0.3s ease-out; } 89 | .time-dial .lcd.Noon .time, .time-dial .lcd.Midnight .time { 90 | display: none; } 91 | .time-dial .lcd.Noon .meridiem, .time-dial .lcd.Midnight .meridiem { 92 | font-size: 25%; 93 | font-family: inherit; 94 | position: relative; 95 | text-transform: capitalize; 96 | bottom: auto; 97 | left: auto; 98 | -webkit-transform: translate(0, 10%); 99 | -ms-transform: translate(0, 10%); 100 | transform: translate(0, 10%); } 101 | .time-dial .time { 102 | font-size: 35%; 103 | position: relative; } 104 | .time-dial .meridiem { 105 | font-size: 15%; 106 | font-family: "DIN Alternate", Helvetica, sans-serif; 107 | text-transform: uppercase; 108 | position: absolute; 109 | left: 50%; 110 | bottom: 10%; 111 | -webkit-transform: translate(-50%, -50%); 112 | -ms-transform: translate(-50%, -50%); 113 | transform: translate(-50%, -50%); } 114 | .time-dial .crown { 115 | position: absolute; 116 | z-index: 1; 117 | top: 0; 118 | right: 35%; 119 | bottom: 50%; 120 | left: 35%; 121 | -webkit-transform-origin: center bottom; 122 | -ms-transform-origin: center bottom; 123 | transform-origin: center bottom; 124 | pointer-events: none; 125 | font-size: 12.5%; } 126 | .time-dial .crown span { 127 | border-radius: 1em; 128 | position: absolute; 129 | top: 0; 130 | left: 50%; 131 | -webkit-transform: translate(-50%, -50%) rotate(45deg); 132 | -ms-transform: translate(-50%, -50%) rotate(45deg); 133 | transform: translate(-50%, -50%) rotate(45deg); 134 | pointer-events: auto; 135 | cursor: pointer; 136 | /* 137 | &::after { 138 | display: none; 139 | content: attr(beat); 140 | position: absolute; 141 | top: 50%; 142 | left: 50%; 143 | transform: translate(-50%, -50%) rotate(-45deg); 144 | font-size: 60%; 145 | text-transform: uppercase; 146 | } 147 | */ } 148 | .time-dial .crown.hour span { 149 | background: #00BCD4; 150 | box-shadow: 0 0 0 .15em currentColor; 151 | width: 1em; 152 | height: 1em; } 153 | .time-dial .crown.minute span { 154 | box-shadow: 0 0 0 0.15em #00BCD4; 155 | background: currentColor; 156 | width: .9em; 157 | height: .9em; } 158 | .time-dial .crown.second span { 159 | top: 1em; 160 | background: currentColor; 161 | opacity: .35; 162 | width: .5em; 163 | height: .5em; } 164 | .time-dial.active-touch .lcd { 165 | top: 0%; 166 | font-size: 45%; 167 | background: rgba(0, 0, 0, 0.05); 168 | pointer-events: none; 169 | padding: 0; 170 | z-index: 1; 171 | margin: 0 -60%; 172 | right: 50%; 173 | left: 50%; 174 | -webkit-transform: translateY(-50%); 175 | -ms-transform: translateY(-50%); 176 | transform: translateY(-50%); 177 | text-align: center; 178 | border-radius: .05em; 179 | -webkit-backdrop-filter: blur(0.1em); 180 | backdrop-filter: blur(0.1em); } 181 | .time-dial.active-touch .lcd.Noon .meridiem, .time-dial.active-touch .lcd.Midnight .meridiem { 182 | font-size: 60%; 183 | -webkit-transform: translate(0, 0); 184 | -ms-transform: translate(0, 0); 185 | transform: translate(0, 0); } 186 | .time-dial.active-touch .time::before, 187 | .time-dial.active-touch .meridiem::before { 188 | content: attr(data-title); 189 | position: absolute; 190 | -webkit-text-stroke: 0.125em #008fa1; 191 | left: 0; 192 | z-index: -1; } 193 | .time-dial.active-touch .time { 194 | display: inline-block; 195 | font-size: 60%; } 196 | .time-dial.active-touch .meridiem { 197 | display: inline-block; 198 | font-size: 35%; 199 | position: relative; 200 | bottom: auto; 201 | left: auto; 202 | -webkit-transform: translate(0, 0); 203 | -ms-transform: translate(0, 0); 204 | transform: translate(0, 0); 205 | -webkit-transition: -webkit-transform 0.3s ease-out; 206 | transition: transform 0.3s ease-out; } 207 | .time-dial.active-touch .crown { 208 | z-index: 0; } 209 | .time-dial.active-touch .crown span { 210 | background: #5d5d5f; } 211 | 212 | /* disable dragging crowns when telling time */ 213 | .time-dial.tell .lcd, 214 | .time-dial.tell .crown span { 215 | pointer-events: none; 216 | cursor: default; } 217 | 218 | /* hide second marker when setting time */ 219 | .time-dial.set .crown.second { 220 | display: none; } 221 | 222 | /* 223 | .time-dial.tell { 224 | .crown.second { 225 | transition: $timing linear; 226 | } 227 | } 228 | .time-dial.tell { 229 | .time span { 230 | animation: fadeIn alternate .5s linear infinite; 231 | } 232 | .crown { 233 | transition: $timing linear; 234 | z-index: 0; 235 | span { 236 | opacity: 0; 237 | } 238 | &::after { 239 | content: ''; 240 | position: absolute; 241 | left: 100%; 242 | background-color: $dark; //#f06292; 243 | transform: translateX(-50%); 244 | border-radius: .2em; 245 | } 246 | &.minute::after { 247 | top: 5%; 248 | height: 45%; 249 | padding: .1em; 250 | } 251 | &.hour::after { 252 | top: 15%; 253 | height: 35%; 254 | padding: .15em; 255 | } 256 | } 257 | } 258 | */ 259 | .x-ray .crown { 260 | background: rgba(93, 93, 95, 0.2); } 261 | 262 | /*# sourceMappingURL=time-dial.css.map */ -------------------------------------------------------------------------------- /css/time-dial.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../sass/time-dial.scss","time-dial.css"],"names":[],"mappings":"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","file":"time-dial.css"} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{headline}} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |

34 | 35 |

36 | 37 |

38 | 39 | {{headline}} 40 |

41 | 42 |

43 | 44 |

45 | 46 |

47 |

48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /js/app.config.js: -------------------------------------------------------------------------------- 1 | (function($angular) { 2 | 'use strict'; 3 | 4 | $angular.module('app') 5 | .constant('system', { 6 | name: 'pocky', 7 | prefix: 'pocky:', 8 | version: 0.1, 9 | dateFormat: 'ddd, MMM D', 10 | dayFormat: 'dd', 11 | timeFormat: 'h:mm a' 12 | }) 13 | .config(function($stateProvider, $urlRouterProvider) { 14 | 15 | $urlRouterProvider.otherwise('/'); 16 | 17 | $stateProvider 18 | .state('main', { 19 | url: '/', 20 | templateUrl : 'views/main.html', 21 | controller : 'mainController' 22 | }); 23 | }) 24 | .config(function($provide) { 25 | // to use: call $state.forceReload(); 26 | $provide.decorator('$state', function($delegate, $stateParams) { 27 | $delegate.forceReload = function() { 28 | return $delegate.go($delegate.current, $stateParams, { 29 | reload: true, 30 | inherit: false, 31 | notify: true 32 | }); 33 | }; 34 | return $delegate; 35 | }); 36 | }); 37 | 38 | })(window.angular); 39 | -------------------------------------------------------------------------------- /js/app.config.min.js: -------------------------------------------------------------------------------- 1 | !function(t){"use strict";t.module("app").constant("system",{name:"pocky",prefix:"pocky:",version:.1,dateFormat:"ddd, MMM D",dayFormat:"dd",timeFormat:"h:mm a"}).config(function(t,n){n.otherwise("/"),t.state("main",{url:"/",templateUrl:"views/main.html",controller:"mainController"})}).config(function(t){t.decorator("$state",function(t,n){return t.forceReload=function(){return t.go(t.current,n,{reload:!0,inherit:!1,notify:!0})},t})})}(window.angular); -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | (function($angular) { 2 | 'use strict'; 3 | 4 | $angular.module('app', [ 5 | 'jamfu', 6 | 'ui.router' 7 | ]) 8 | .controller('appController', [ 9 | '$scope', '$state', '$location', '$timeout', 'system', 'AccountService', 'StorageService', 'UtilityService', function( 10 | $scope, $state, $location, $timeout, system, account, storage, utils 11 | ){ 12 | 13 | $scope.viewIsLoading = false; 14 | 15 | $scope.headline = 'Circadian Funicular'; 16 | $scope.icon = 'clock-o'; 17 | 18 | $scope.init = function(){ 19 | $scope.view = $state.current.name; 20 | $scope.preferences = account.getPreferences(); 21 | }; 22 | 23 | $scope.init(); 24 | 25 | $scope.$watch('preferences', function(n, o){ 26 | if(n && o && n !== o) { 27 | // window.console.log('watch prefs', n); 28 | storage.save(system.prefix + 'preferences', n); 29 | $scope.preferences = n; 30 | } 31 | }, true); 32 | 33 | $scope.$watch(function(){ 34 | return $state.current.name; 35 | }, function(value){ 36 | $scope.view = value; 37 | }, true); 38 | 39 | }]); 40 | 41 | })(window.angular); 42 | -------------------------------------------------------------------------------- /js/app.min.js: -------------------------------------------------------------------------------- 1 | !function(e){"use strict";e.module("app",["jamfu","ui.router"]).controller("appController",["$scope","$state","$location","$timeout","system","AccountService","StorageService","UtilityService",function(e,n,r,i,c,t,o,u){e.viewIsLoading=!1,e.headline="Circadian Funicular",e.icon="clock-o",e.init=function(){e.view=n.current.name,e.preferences=t.getPreferences()},e.init(),e.$watch("preferences",function(n,r){n&&r&&n!==r&&(o.save(c.prefix+"preferences",n),e.preferences=n)},!0),e.$watch(function(){return n.current.name},function(n){e.view=n},!0)}])}(window.angular); -------------------------------------------------------------------------------- /js/controllers/mainController.js: -------------------------------------------------------------------------------- 1 | (function($angular, $moment, _) { 2 | 'use strict'; 3 | 4 | $angular.module('app') 5 | .controller('mainController', ['$scope', '$timeout', 'StorageService', 'UtilityService', function($scope, $timeout, storage, utils){ 6 | $scope.diameter = 50; 7 | $scope.unit = 'vmin'; 8 | // $scope.mode = 'set'; 9 | $scope.xRay = false; 10 | $scope.time = $moment(); 11 | 12 | $scope.format = function(datetime){ 13 | return new Date(datetime); 14 | }; 15 | 16 | $scope.reset = function(){ 17 | $scope.diameter = 50; 18 | $scope.unit = 'vmin'; 19 | // $scope.xRay = false; 20 | $scope.time = $moment(); 21 | }; 22 | 23 | $scope.toggleMode = function(){ 24 | if($scope.mode === 'tell') { 25 | $scope.mode = 'set'; 26 | } 27 | else if($scope.mode === 'set') { 28 | $scope.time = $moment(); 29 | $scope.mode = 'tell'; 30 | } 31 | }; 32 | 33 | }]); 34 | 35 | })(window.angular, window.moment, window._); 36 | -------------------------------------------------------------------------------- /js/controllers/mainController.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t,i){"use strict";e.module("app").controller("mainController",["$scope","$timeout","StorageService","UtilityService",function(e,i,n,o){e.diameter=50,e.unit="vmin",e.xRay=!1,e.time=t(),e.format=function(e){return new Date(e)},e.reset=function(){e.diameter=50,e.unit="vmin",e.time=t()},e.toggleMode=function(){"tell"===e.mode?e.mode="set":"set"===e.mode&&(e.time=t(),e.mode="tell")}}])}(window.angular,window.moment,window._); -------------------------------------------------------------------------------- /js/directives/timeDial.js: -------------------------------------------------------------------------------- 1 | (function($angular, $moment, Hammer){ 2 | 'use strict'; 3 | 4 | $angular.module('app') 5 | .directive('timeDial', ['$timeout', '$interval', function($timeout, $interval) { 6 | // helpers 7 | var _getNumbers = function(target){ 8 | var numbers = {}; 9 | if(target) { 10 | numbers = { 11 | t: target.offsetTop, 12 | r: target.offsetLeft + target.offsetWidth, 13 | b: target.offsetTop + target.offsetHeight, 14 | l: target.offsetLeft, 15 | w: target.offsetWidth, 16 | h: target.offsetHeight, 17 | }; 18 | // find x|y center 19 | numbers.cx = (numbers.l + (numbers.w/2)); 20 | numbers.cy = (numbers.t + (numbers.h/2)); 21 | } 22 | return numbers; 23 | }; 24 | 25 | var _getDeg = function(input, b){ 26 | var barrel = _getNumbers(b); 27 | var radians = Math.atan2((input.clientY - barrel.cy), (input.clientX - barrel.cx)); 28 | var degrees = Math.round(radians * 180 / Math.PI); 29 | return degrees; 30 | }; 31 | 32 | var _rotate = function(el, degrees){ 33 | $angular.element(el).css({ 34 | transform: 'rotate(' + degrees + 'deg)' 35 | }); 36 | }; 37 | 38 | var _timeCalc = function(degree, beat){ 39 | var t = 0; 40 | var decimal = Math.PI + (1/30) * (degree % 360); 41 | 42 | decimal = decimal < 0 ? decimal + 12 : decimal; 43 | t = parseInt(decimal); 44 | 45 | if(beat === 'm') { 46 | t = parseInt(decimal * 5) % 60; 47 | } 48 | 49 | return t; 50 | }; 51 | 52 | return { 53 | restrict: 'E', 54 | replace: true, 55 | 56 | scope: { 57 | time: '=?', 58 | diameter: '=?', 59 | unit: '=?', 60 | mode: '=?' 61 | }, 62 | 63 | template: '' + 64 | '

' + 65 | '

' + 66 | '

{{format(time)|date:\'h\'}}:{{format(time)|date:\'mm\'}}

' + 67 | '

' + 68 | '

' + 69 | '

' + 70 | '

' + 71 | '

' + 72 | '

' + 73 | '', 74 | 75 | link: function(scope, element) { 76 | 77 | if(!scope.time) { 78 | scope.time = $moment(); // current time 79 | } 80 | 81 | if(!scope.mode) { 82 | scope.mode = 'set'; // current time 83 | } 84 | 85 | var crownMinute = $angular.element(element[0].querySelector('.minute')); 86 | var crownHour = $angular.element(element[0].querySelector('.hour')); 87 | var crownSecond = $angular.element(element[0].querySelector('.second')); 88 | var lcd = $angular.element(element[0].querySelector('.lcd')); 89 | 90 | var setMeridiem = function(time){ 91 | time = !time ? scope.time : time; 92 | var minute = time.minutes(); 93 | var hour = time.hours(); 94 | if(hour === 12 && minute === 0) { 95 | scope.meridiem = 'Noon'; 96 | } else if(hour === 0 && minute === 0) { 97 | scope.meridiem = 'Midnight'; 98 | } else { 99 | scope.meridiem = time.format('a'); 100 | } 101 | }; 102 | 103 | var calibrate = function(time, beat){ 104 | time = !time ? scope.time : time; 105 | var second = time.seconds(); 106 | var minute = time.minutes(); 107 | var hour = time.hours(); 108 | var degreeSecond = (second * 6); 109 | var degreeMinute = (minute * 6); 110 | var degreeHour = (hour * 30 + minute * 0.5); 111 | 112 | if(!beat || beat === 'm') { 113 | _rotate(crownMinute, degreeMinute); 114 | } 115 | if(!beat || beat === 'h') { 116 | _rotate(crownHour, degreeHour); 117 | } 118 | _rotate(crownSecond, degreeSecond); 119 | setMeridiem(time); 120 | }; 121 | 122 | var uiToggleMeridiem = function(){ 123 | if(scope.time.format('a') === 'am') { 124 | scope.time.add(12, 'hours'); 125 | } else { 126 | scope.time.subtract(12, 'hours'); 127 | } 128 | setMeridiem(scope.time); 129 | scope.toggled = true; 130 | $timeout(function(){ 131 | scope.toggled = false; 132 | }, 300); 133 | scope.$apply(); 134 | }; 135 | 136 | var uiSetCrown = function(e, beat){ 137 | var input = e.srcEvent && e.srcEvent.changedTouches ? e.srcEvent.changedTouches : e.pointers; 138 | var degrees = _getDeg(input[0], element[0]); 139 | var tick = _timeCalc(degrees, beat); 140 | var h = scope.time.hour(); 141 | 142 | if(beat === 'm') { 143 | // going forwards 144 | if(scope.prevTick === 59 && tick === 0) { 145 | scope.time.add(1, 'hour'); 146 | } 147 | 148 | // going backwards 149 | else if(scope.prevTick === 0 && tick === 59) { 150 | scope.time.subtract(1, 'hour'); 151 | } 152 | 153 | scope.time.minute(tick); 154 | } 155 | 156 | if(beat === 'h') { 157 | tick = h > 11 ? tick + 12 : tick; 158 | 159 | // going forwards 160 | if(scope.prevTick === 11 && tick === 0) { 161 | tick += 12; 162 | } 163 | else if(scope.prevTick === 23 && tick === 12) { 164 | scope.time.add(1, 'day'); 165 | tick -= 12; 166 | } 167 | 168 | // going backwards 169 | else if(scope.prevTick === 12 && tick === 23) { 170 | tick -= 12; 171 | } 172 | else if(scope.prevTick === 0 && tick === 11) { 173 | scope.time.subtract(1, 'day'); 174 | tick += 12; 175 | } 176 | 177 | scope.time.hour(tick); 178 | } 179 | 180 | scope.prevTick = tick; 181 | calibrate(); 182 | scope.$apply(); 183 | }; 184 | 185 | scope.format = function(datetime){ 186 | return new Date(datetime); 187 | }; 188 | 189 | scope.size = function(unit){ 190 | unit = !unit ? 'vmin' : unit; // vmin: viewport smallest dimension 191 | return { fontSize: scope.diameter + unit}; 192 | }; 193 | 194 | // hammer time 195 | scope.touching = false; 196 | var hammerMinute = new Hammer(crownMinute[0]); 197 | var hammerHour = new Hammer(crownHour[0]); 198 | var hammerLcd = new Hammer(lcd[0], {}); 199 | var hammerOptions = { 200 | direction: Hammer.DIRECTION_ALL, 201 | threshold: 0 202 | }; 203 | 204 | hammerMinute.get('pan').set(hammerOptions); 205 | hammerMinute.on('pan panend pancancel', function(e) { 206 | var touching = e.type === 'panend' || e.type === 'pancancel' ? false : true; 207 | scope.touching = e.srcEvent && e.srcEvent.changedTouches ? touching : false; 208 | uiSetCrown(e, 'm'); 209 | }); 210 | 211 | hammerHour.get('pan').set(hammerOptions); 212 | hammerHour.on('pan panend pancancel', function(e) { 213 | var touching = e.type === 'panend' || e.type === 'pancancel' ? false : true; 214 | scope.touching = e.srcEvent && e.srcEvent.changedTouches ? touching : false; 215 | uiSetCrown(e, 'h'); 216 | }); 217 | 218 | hammerLcd.on('tap', function() { 219 | uiToggleMeridiem(); 220 | }); 221 | 222 | var _timer = null; 223 | var _startTimer = function () { 224 | _timer = $interval(function () { 225 | scope.time = $moment(); 226 | calibrate(scope.time); 227 | }, 1000); 228 | }; 229 | var _stopTimer = function () { 230 | if ($angular.isDefined(_timer)) { 231 | $interval.cancel(_timer); 232 | } 233 | }; 234 | 235 | // scope.mode = 'tell'; 236 | scope.$watch('mode', function(mode){ 237 | if(mode === 'tell') { 238 | _startTimer(); 239 | } else { 240 | _stopTimer(); 241 | } 242 | }); 243 | 244 | // hehe... watch time... get it? 245 | scope.$watch('time', function(time){ 246 | calibrate(time); 247 | }); 248 | } 249 | }; 250 | }]); 251 | 252 | })(window.angular, window.moment, window.Hammer); 253 | -------------------------------------------------------------------------------- /js/directives/timeDial.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t,n){"use strict";e.module("app").directive("timeDial",["$timeout","$interval",function(i,a){var c=function(e){var t={};return e&&(t={t:e.offsetTop,r:e.offsetLeft+e.offsetWidth,b:e.offsetTop+e.offsetHeight,l:e.offsetLeft,w:e.offsetWidth,h:e.offsetHeight},t.cx=t.l+t.w/2,t.cy=t.t+t.h/2),t},r=function(e,t){var n=c(t),i=Math.atan2(e.clientY-n.cy,e.clientX-n.cx),a=Math.round(180*i/Math.PI);return a},o=function(t,n){e.element(t).css({transform:"rotate("+n+"deg)"})},m=function(e,t){var n=0,i=Math.PI+1/30*(e%360);return i=0>i?i+12:i,n=parseInt(i),"m"===t&&(n=parseInt(5*i)%60),n};return{restrict:"E",replace:!0,scope:{time:"=?",diameter:"=?",unit:"=?",mode:"=?"},template:'

{{format(time)|date:\'h\'}}:{{format(time)|date:\'mm\'}}

',link:function(c,s){c.time||(c.time=t()),c.mode||(c.mode="set");var d=e.element(s[0].querySelector(".minute")),u=e.element(s[0].querySelector(".hour")),l=e.element(s[0].querySelector(".second")),f=e.element(s[0].querySelector(".lcd")),p=function(e){e=e?e:c.time;var t=e.minutes(),n=e.hours();12===n&&0===t?c.meridiem="Noon":0===n&&0===t?c.meridiem="Midnight":c.meridiem=e.format("a")},h=function(e,t){e=e?e:c.time;var n=e.seconds(),i=e.minutes(),a=e.hours(),r=6*n,m=6*i,s=30*a+.5*i;t&&"m"!==t||o(d,m),t&&"h"!==t||o(u,s),o(l,r),p(e)},v=function(){"am"===c.time.format("a")?c.time.add(12,"hours"):c.time.subtract(12,"hours"),p(c.time),c.toggled=!0,i(function(){c.toggled=!1},300),c.$apply()},g=function(e,t){var n=e.srcEvent&&e.srcEvent.changedTouches?e.srcEvent.changedTouches:e.pointers,i=r(n[0],s[0]),a=m(i,t),o=c.time.hour();"m"===t&&(59===c.prevTick&&0===a?c.time.add(1,"hour"):0===c.prevTick&&59===a&&c.time.subtract(1,"hour"),c.time.minute(a)),"h"===t&&(a=o>11?a+12:a,11===c.prevTick&&0===a?a+=12:23===c.prevTick&&12===a?(c.time.add(1,"day"),a-=12):12===c.prevTick&&23===a?a-=12:0===c.prevTick&&11===a&&(c.time.subtract(1,"day"),a+=12),c.time.hour(a)),c.prevTick=a,h(),c.$apply()};c.format=function(e){return new Date(e)},c.size=function(e){return e=e?e:"vmin",{fontSize:c.diameter+e}},c.touching=!1;var w=new n(d[0]),y=new n(u[0]),T=new n(f[0],{}),E={direction:n.DIRECTION_ALL,threshold:0};w.get("pan").set(E),w.on("pan panend pancancel",function(e){var t="panend"===e.type||"pancancel"===e.type?!1:!0;c.touching=e.srcEvent&&e.srcEvent.changedTouches?t:!1,g(e,"m")}),y.get("pan").set(E),y.on("pan panend pancancel",function(e){var t="panend"===e.type||"pancancel"===e.type?!1:!0;c.touching=e.srcEvent&&e.srcEvent.changedTouches?t:!1,g(e,"h")}),T.on("tap",function(){v()});var b=null,k=function(){b=a(function(){c.time=t(),h(c.time)},1e3)},I=function(){e.isDefined(b)&&a.cancel(b)};c.$watch("mode",function(e){"tell"===e?k():I()}),c.$watch("time",function(e){h(e)})}}}])}(window.angular,window.moment,window.Hammer); -------------------------------------------------------------------------------- /js/services/account.js: -------------------------------------------------------------------------------- 1 | (function($angular, $moment, _){ 2 | 'use strict'; 3 | 4 | $angular.module('app') 5 | .factory('AccountService', ['$rootScope', 'system', 'StorageService', 'UtilityService', function($rootScope, system, storage, utils){ 6 | 7 | var _defaultPreferences = { 8 | }; 9 | 10 | var getPreferences = function(){ 11 | var preferences = storage.get(system.prefix + 'preferences'); 12 | if(_.isNull(preferences)) { 13 | preferences = $angular.copy(_defaultPreferences); 14 | storage.save(system.prefix + 'preferences', preferences); 15 | } 16 | return preferences; 17 | }; 18 | 19 | var updatePreference = function(key, value){ 20 | var preferences = getPreferences(); 21 | preferences[key] = value; 22 | // window.console.log(key, value); 23 | storage.save(system.prefix + 'preferences', preferences); 24 | return preferences; 25 | }; 26 | 27 | var updatePreferences = function(keys, values){ 28 | var preferences = getPreferences(); 29 | _.each(keys, function(key, index){ 30 | preferences[key] = values[index]; 31 | }); 32 | storage.save(system.prefix + 'preferences', preferences); 33 | return preferences; 34 | }; 35 | 36 | return { 37 | getPreferences: getPreferences, 38 | updatePreference: updatePreference, 39 | updatePreferences: updatePreferences 40 | }; 41 | 42 | }]); 43 | 44 | })(window.angular, window.moment, window._); 45 | -------------------------------------------------------------------------------- /js/services/account.min.js: -------------------------------------------------------------------------------- 1 | !function(e,r,n){"use strict";e.module("app").factory("AccountService",["$rootScope","system","StorageService","UtilityService",function(r,t,c,i){var f={},o=function(){var r=c.get(t.prefix+"preferences");return n.isNull(r)&&(r=e.copy(f),c.save(t.prefix+"preferences",r)),r},u=function(e,r){var n=o();return n[e]=r,c.save(t.prefix+"preferences",n),n},a=function(e,r){var i=o();return n.each(e,function(e,n){i[e]=r[n]}),c.save(t.prefix+"preferences",i),i};return{getPreferences:o,updatePreference:u,updatePreferences:a}}])}(window.angular,window.moment,window._); -------------------------------------------------------------------------------- /sass/_base.scss: -------------------------------------------------------------------------------- 1 | .block {display: block;} 2 | .flex {display: flex;} 3 | .flex-wrap {flex-wrap: wrap;} 4 | .flex-row {@extend %flex-row;} 5 | .flex-column {@extend %flex-column;} 6 | 7 | .flex-none {flex: none !important;} 8 | .flex-1-1-auto {flex: 1 1 auto !important;} 9 | .flex-1-0-auto {flex: 1 0 auto !important;} 10 | .flex-0-1-auto {flex: 0 1 auto !important;} 11 | .flex-0-0-auto {flex: 0 0 auto !important;} 12 | .flex-0 {flex: 0;} 13 | .flex-1-all > *, 14 | .flex-1 {flex: 1;} 15 | .flex-2 {flex: 2;} 16 | .flex-3 {flex: 3;} 17 | .flex-4 {flex: 4;} 18 | .flex-5 {flex: 5;} 19 | .flex-6 {flex: 6;} 20 | .flex-7 {flex: 7;} 21 | .flex-8 {flex: 8;} 22 | .flex-9 {flex: 9;} 23 | .flex-10 {flex: 10;} 24 | .flex-11 {flex: 11;} 25 | .flex-12 {flex: 12;} 26 | 27 | .justify-content-center {justify-content: center;} 28 | .justify-content-start {justify-content: flex-start;} 29 | .justify-content-end {justify-content: flex-end;} 30 | .justify-content-around {justify-content: space-around;} 31 | .justify-content-between {justify-content: space-between;} 32 | .align-items-center {align-items: center;} 33 | .align-items-start {align-items: flex-start;} 34 | .align-items-end {align-items: flex-end;} 35 | .align-items-stretch {align-items: stretch;} 36 | .align-items-baseline {align-items: baseline;} 37 | .align-self-center {align-self: center;} 38 | .align-self-start {align-self: flex-start;} 39 | .align-self-end {align-self: flex-end;} 40 | .align-self-stretch {align-self: stretch;} 41 | .align-self-baseline {align-self: baseline;} 42 | 43 | .text-left {text-align: left;} 44 | .text-center {text-align: center;} 45 | .text-right {text-align: right;} 46 | 47 | .ellipsis { 48 | white-space: nowrap; 49 | text-overflow: ellipsis; 50 | overflow: auto; 51 | } 52 | 53 | .nowrap {white-space: nowrap;} 54 | .clickless {pointer-events: none;} 55 | 56 | .title-case {text-transform: capitalize;} 57 | .lower-case {text-transform: lowercase;} 58 | .upper-case {text-transform: uppercase;} 59 | 60 | .display-none {display:none;} 61 | 62 | .hidden {visibility:hidden;} 63 | 64 | .shadow {opacity: .65;} 65 | .ghost {opacity: .35;} 66 | .vapor {opacity: .1;} 67 | .sub-space, 68 | .invisible {opacity: 0;} 69 | 70 | .padless {padding: 0;} 71 | .pad-half {padding: .5em !important;} 72 | .pad-x-half {padding-left: .5em !important;padding-right: .5em !important;} 73 | .pad-y-half {padding-top: .5em !important;padding-bottom: .5em !important;} 74 | .pad-top-half {padding-top: .5em !important;} 75 | .pad-right-half {padding-right: .5em !important;} 76 | .pad-bottom-half {padding-bottom: .5em !important;} 77 | .pad-left-half {padding-left: .5em !important;} 78 | 79 | .pad-0 {padding: 0 !important;} 80 | .pad-top-0 {padding-top: 0 !important;} 81 | .pad-right-0 {padding-right: 0 !important;} 82 | .pad-bottom-0 {padding-bottom: 0 !important;} 83 | .pad-left-0 {padding-left: 0 !important;} 84 | .pad-x-0 {padding-left: 0 !important;padding-right: 0 !important;} 85 | .pad-y-0 {padding-top: 0 !important;padding-bottom: 0 !important;} 86 | 87 | .pad-1 {padding: 1em !important;} 88 | .pad-top-1 {padding-top: 1em !important;} 89 | .pad-right-1 {padding-right: 1em !important;} 90 | .pad-bottom-1 {padding-bottom: 1em !important;} 91 | .pad-left-1 {padding-left: 1em !important;} 92 | .pad-x-1 {padding-left: 1em !important;padding-right: 1em !important;} 93 | .pad-y-1 {padding-top: 1em !important;padding-bottom: 1em !important;} 94 | 95 | .pad-2 {padding: 2em !important;} 96 | .pad-top-2 {padding-top: 2em !important;} 97 | .pad-right-2 {padding-right: 2em !important;} 98 | .pad-bottom-2 {padding-bottom: 2em !important;} 99 | .pad-left-2 {padding-left: 2em !important;} 100 | .pad-x-2 {padding-left: 2em !important;padding-right: 2em !important;} 101 | .pad-y-2 {padding-top: 2em !important;padding-bottom: 2em !important;} 102 | 103 | .borderless {border: 0;} 104 | 105 | .border-1 {box-shadow: 0 0 0 1px inset !important;} 106 | .border-2 {box-shadow: 0 0 0 2px inset !important;} 107 | 108 | .nudge-left { 109 | margin-right: 2px !important; 110 | } 111 | .nudge-right { 112 | margin-left: 2px !important; 113 | } 114 | .nudge-top { 115 | margin-bottom: 2px !important; 116 | } 117 | .nudge-bottom { 118 | margin-top: 2px !important; 119 | } 120 | 121 | .rotate-0 {transform: rotate(0deg);} 122 | .rotate-15 {transform: rotate(15deg);} 123 | .rotate-30 {transform: rotate(30deg);} 124 | .rotate-45 {transform: rotate(45deg);} 125 | .rotate-60 {transform: rotate(60deg);} 126 | .rotate-75 {transform: rotate(75deg);} 127 | 128 | .rotate-90 {transform: rotate(90deg);} 129 | .rotate-105 {transform: rotate(105deg);} 130 | .rotate-120 {transform: rotate(120deg);} 131 | .rotate-135 {transform: rotate(135deg);} 132 | .rotate-150 {transform: rotate(150deg);} 133 | .rotate-165 {transform: rotate(165deg);} 134 | 135 | .rotate-180 {transform: rotate(180deg);} 136 | .rotate-195 {transform: rotate(195deg);} 137 | .rotate-210 {transform: rotate(210deg);} 138 | .rotate-225 {transform: rotate(225deg);} 139 | .rotate-240 {transform: rotate(240deg);} 140 | .rotate-255 {transform: rotate(255deg);} 141 | 142 | .rotate-270 {transform: rotate(270deg);} 143 | .rotate-285 {transform: rotate(285deg);} 144 | .rotate-300 {transform: rotate(300deg);} 145 | .rotate-315 {transform: rotate(315deg);} 146 | .rotate-330 {transform: rotate(330deg);} 147 | .rotate-345 {transform: rotate(345deg);} 148 | 149 | .rotate-360 {transform: rotate(360deg);} 150 | 151 | .animated { 152 | transition: all .3s ease-in-out; 153 | } 154 | 155 | .has-pointer { 156 | position: relative; 157 | &::after { 158 | content: ''; 159 | border: 0 solid transparent; 160 | position: absolute; 161 | bottom: 0; 162 | left: 50%; 163 | transform: translateX(-50%); 164 | border-width: 0 .65rem .5rem .65rem; 165 | border-bottom-color: $lighter; 166 | } 167 | } 168 | 169 | a, 170 | a:visited { 171 | color: currentColor; 172 | text-decoration: none; 173 | } 174 | 175 | .small, 176 | pre { 177 | font-size: .7em; 178 | } 179 | 180 | ::-webkit-input-placeholder { 181 | font-style: italic; 182 | opacity:.35; 183 | } 184 | -------------------------------------------------------------------------------- /sass/_colors.scss: -------------------------------------------------------------------------------- 1 | .bg-air {background: transparent !important;} 2 | .bg-light {background: $light !important;color: set-text-color($light) !important; &--sheer {background: rgba($light, .2) !important;}} 3 | .bg-dark {background: $dark !important;color: set-text-color($dark) !important; &--sheer {background: rgba($dark, .2) !important;}} 4 | .bg-base {background: $base !important;color: set-text-color($base) !important; &--sheer {background: rgba($base, .2) !important;}} 5 | .bg-mix {background: $base-mix !important; color: set-text-color($base-mix) !important; &--sheer {background: rgba($base-mix, .2) !important;}} 6 | .bg-mixed {background: $base-mix !important; color: set-text-color($base-mix) !important; mix-blend-mode:multiply;} 7 | .bg-frost {background: $base-mix !important; color: set-text-color($base-mix) !important; mix-blend-mode:overlay;} 8 | .bg-shade {background: $base-shade !important; color: set-text-color($base-shade) !important; &--sheer {background: rgba($base-shade, .2) !important;}} 9 | .bg-alert {background: $alert !important; color: set-text-color($alert) !important; &--sheer {background: rgba($alert, .2) !important;}} 10 | .bg-warning {background: $warning !important; color: set-text-color($warning) !important; &--sheer {background: rgba($warning, .2) !important;}} 11 | .bg-success {background: $success !important; color: set-text-color($success) !important; &--sheer {background: rgba($success, .2) !important;}} 12 | .bg-info {background: $info !important; color: set-text-color($info) !important; &--sheer {background: rgba($info, .2) !important;}} 13 | 14 | .bg-grey-1 {background: $grey-1 !important; color: set-text-color($grey-1) !important;} 15 | .bg-grey-2 {background: $grey-2 !important; color: set-text-color($grey-2) !important;} 16 | .bg-grey-3 {background: $grey-3 !important; color: set-text-color($grey-3) !important;} 17 | .bg-grey-4 {background: $grey-4 !important; color: set-text-color($grey-4) !important;} 18 | .bg-grey-5 {background: $grey-5 !important; color: set-text-color($grey-5) !important;} 19 | .bg-grey-6 {background: $grey-6 !important; color: set-text-color($grey-6) !important;} 20 | .bg-grey-7 {background: $grey-7 !important; color: set-text-color($grey-7) !important;} 21 | .bg-grey-8 {background: $grey-8 !important; color: set-text-color($grey-8) !important;} 22 | .bg-grey-9 {background: $grey-9 !important; color: set-text-color($grey-9) !important;} 23 | 24 | .bg-darken {background: rgba($dark, .6) !important;color: set-text-color($dark) !important;} 25 | .bg-lighten {background: rgba($lighter, .2) !important;color: set-text-color($light) !important;} 26 | 27 | .bg-cancel {background: $cancel !important; color: set-text-color($cancel) !important;} 28 | .bg-active {background: $active !important; color: set-text-color($active) !important;} 29 | 30 | .fg-air {color: transparent;} 31 | .fg-light {color: $light;} 32 | .fg-dark {color: $dark;} 33 | .fg-base {color: $base;} 34 | .fg-mix {color: $base-mix;} 35 | .fg-shade {color: $base-shade;} 36 | .fg-alert {color: $alert;} 37 | .fg-warning {color: $warning;} 38 | .fg-caution {color: $caution;} 39 | .fg-success {color: $success;} 40 | .fg-info {color: $info;} 41 | 42 | .fg-cancel {color: $cancel;} 43 | .fg-active {color: $active;} 44 | 45 | .glow-alert {text-shadow: 0 0 .6em $alert;} 46 | .glow-warning {text-shadow: 0 0 .6em $warning;} 47 | .glow-success {text-shadow: 0 0 .6em $success;} 48 | .glow-cancel {text-shadow: 0 0 .6em $cancel;} 49 | .glow-active {text-shadow: 0 0 .6em $active;} 50 | 51 | .shadow-alert {box-shadow: 0 0 .6em 0 $alert;} 52 | .shadow-warning {box-shadow: 0 0 .6em 0 $warning;} 53 | .shadow-success {box-shadow: 0 0 .6em 0 $success;} 54 | .shadow-cancel {box-shadow: 0 0 .6em 0 $cancel;} 55 | .shadow-active {box-shadow: 0 0 .6em 0 $active;} 56 | 57 | 58 | @each $name, $hex in $colors { 59 | .fg-#{$name} { 60 | color: $hex !important; 61 | .tag { 62 | box-shadow: 0 0 0 1px $hex !important; 63 | &.reversed { 64 | background: $hex !important; 65 | color: set-text-color($light) !important; 66 | } 67 | } 68 | } 69 | .bg-#{$name} { 70 | background-color: $hex !important; 71 | color: set-text-color($hex) !important; 72 | &--sheer { 73 | background: rgba($hex, .2) !important; 74 | } 75 | input { 76 | color: set-text-color($hex); 77 | } 78 | [class*="icon-"], 79 | &[class*="icon-"] { 80 | &:after, 81 | &:before { 82 | color: set-text-color($hex); 83 | border-color: currentColor; 84 | } 85 | } 86 | } 87 | .ui-#{$name} { 88 | .bg-active, 89 | // button.active, 90 | // .button.active, 91 | .calendar-wrap { 92 | background: $hex !important; 93 | color: set-text-color($hex) !important; 94 | } 95 | .fg-active { 96 | color: $hex !important; 97 | } 98 | input[type="checkbox"].toggle:checked { 99 | background: $hex !important; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /sass/_content.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | position: relative; 3 | h1 { 4 | font-size: 13vmin; 5 | font-weight: 100; 6 | margin: 0 10vmin .5rem 10vmin; 7 | text-align: center; 8 | } 9 | h2 { 10 | font-weight: 200; 11 | margin: 0 0 .5em 0; 12 | } 13 | h3 { 14 | font-weight: 200; 15 | margin: .2em 0; 16 | } 17 | p { 18 | margin: 0; 19 | } 20 | * + p { 21 | margin-top: 1.5em; 22 | } 23 | button.action { 24 | border-radius: 100%; 25 | padding: 1.65em; 26 | + button.action { 27 | // margin-left: .5em; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /sass/_flipper.scss: -------------------------------------------------------------------------------- 1 | .flip-container { 2 | perspective: 800; 3 | &.flip-me .flipper { 4 | transform: rotateY(180deg); 5 | } 6 | } 7 | 8 | .flip-container, .front, .back { 9 | width: 100vw; 10 | text-align: center; 11 | margin: 0 auto; 12 | } 13 | 14 | .flipper { 15 | font-size: 50vmin; 16 | height: 1em; 17 | transition: .8s cubic-bezier(1, -0.5, .2, 1.5);// 1s; 18 | transform-style: preserve-3d; 19 | position: relative; 20 | .front, .back { 21 | backface-visibility: hidden; 22 | position: absolute; 23 | top: 0; 24 | height: 1em; 25 | left: 50%; 26 | transform: translate(-50%, 0%); 27 | flex: 1; 28 | border-radius: 100%; 29 | } 30 | .front { 31 | z-index: 2; 32 | display: flex; 33 | align-items: center; 34 | transform: translate(-50%, 0%) rotateY(0deg); // for firefox 31 35 | } 36 | .back { 37 | transform: translate(-50%, 0%) rotateY(180deg); 38 | width: 1em; 39 | // box-shadow: 0 0 0 .05em, 0 0 0 .05em inset, 0 .3em .5em -.1em rgba($darker, .35); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /sass/_helper.scss: -------------------------------------------------------------------------------- 1 | .do-this { 2 | position: absolute; 3 | display: none; 4 | z-index: 4; 5 | top: 3.5em; 6 | right: 1em; 7 | bottom: auto; 8 | left: auto; 9 | padding: .5em 1em; 10 | border-radius: 3em; 11 | white-space: nowrap; 12 | flex: 0 0 auto; 13 | text-align: center; 14 | background: $active; 15 | color: $dark; 16 | line-height: 1; 17 | box-shadow: 0 .3em 2em -.5em $darker; 18 | opacity: .85; 19 | &:not(.ng-animate) { 20 | transition: 1s; 21 | } 22 | &::before { 23 | content: 'Start here...'; 24 | font-style: italic; 25 | } 26 | &::after { 27 | content: ''; 28 | position: absolute; 29 | bottom: 90%; 30 | right: .5em; 31 | border: .5em solid transparent; 32 | border-width: 0 0 1em 1em; 33 | border-color: transparent transparent $active transparent; 34 | transition: 1s; 35 | } 36 | } 37 | 38 | main.main, 39 | main.add-course { 40 | ~ .do-this { 41 | display: block; 42 | } 43 | } 44 | 45 | .show-main-menu .do-this { 46 | top: 12.3em; 47 | &::before { 48 | content: 'Good! Now this...'; 49 | } 50 | &::after { 51 | right:calc(100% - 1.5em); 52 | border-width: 0 1em 1em 0; 53 | } 54 | } 55 | 56 | 57 | // main.add-course ~ .do-this { 58 | // } 59 | 60 | main.add-course ~ .do-this { 61 | top: 8em; 62 | right: 3em; 63 | &::before { 64 | content: 'Change colors & Add a sticker'; 65 | } 66 | &::after { 67 | right:calc(100% - 1.5em); 68 | border-width: 0 1em 1em 0; 69 | } 70 | &.step-2 { 71 | top: calc(100% - 4em); 72 | right: 1em; 73 | &::before { 74 | content: 'Save it here!'; 75 | } 76 | &::after { 77 | bottom: -.8em; 78 | right: 1em; 79 | border-width: 0 1em 1em 0; 80 | border-color: transparent $active transparent transparent; 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /sass/_icons.scss: -------------------------------------------------------------------------------- 1 | // [class*="icon-"] { 2 | // position:relative; 3 | // &:after, 4 | // &:before { 5 | // content: ''; 6 | // display: block; 7 | // font-family: $code-font; 8 | // position: absolute; 9 | // top: 50%; 10 | // left: 50%; 11 | // border: 0 solid $base-light; 12 | // } 13 | // } 14 | // .icon-save { 15 | // &:before { 16 | // border-width: 0 0 .2em .2em; 17 | // transform: translate(-50%, -80%) rotate(-45deg); 18 | // padding: .4em .4em 0 0; 19 | // } 20 | // &:after { 21 | // border-width:.175em; 22 | // // border-style: dotted; 23 | // padding: .6em; 24 | // border-radius: .3em; 25 | // border-top-color: transparent !important; 26 | // transform: translate(-50%, -50%); 27 | // } 28 | // } 29 | // .icon-check:after { 30 | // border-width: 0 0 .2em .2em; 31 | // transform: translate(-50%, -70%) rotate(-45deg); 32 | // padding: .25em .6em 0 0; 33 | // } 34 | // .icon-back:after { 35 | // border-width: 0 0 .2em .2em; 36 | // transform: translate(-50%, -50%) rotate(45deg); 37 | // padding: .5em .5em 0 0; 38 | // } 39 | // .icon-next:after { 40 | // border-width: 0 0 .2em .2em; 41 | // transform: translate(-50%, -50%) rotate(-135deg); 42 | // padding: .5em .5em 0 0; 43 | // } 44 | // .icon-add:after { 45 | // content: '+'; 46 | // font-size: 1.65em; 47 | // transform: translate(-50%, -50%); 48 | // } 49 | // .icon-minus:after, 50 | // .icon-cancel:after { 51 | // content: '—'; 52 | // font-size: 1.65em; 53 | // transform: translate(-50%, -50%); 54 | // } 55 | // .icon-remove:after, 56 | // .icon-close:after { 57 | // content: '+'; 58 | // font-size: 1.65em; 59 | // transform: translate(-50%, -50%) rotate(45deg); 60 | // } 61 | // .icon-critical:after { 62 | // content: '!'; 63 | // font-size: 2em; 64 | // font-weight: 600; 65 | // transform: translate(-50%, -45%) rotate(23deg); 66 | // } 67 | // .icon-recycle { 68 | // &:after { 69 | // border-width:.2em; 70 | // padding: .3em; 71 | // border-radius: 1em; 72 | // border-right-color: transparent !important; 73 | // transform: translate(-50%, -50%) rotate(15deg); 74 | // } 75 | // &:before { 76 | // border-width: 0 0 .2em .2em; 77 | // transform: translate(-5%, -100%) rotate(-93deg) scale(.8,.8); 78 | // padding: .4em .4em 0 0; 79 | // } 80 | // } 81 | // .icon-burger:after { 82 | // content: '\2261'; 83 | // font-size: 1.65em; 84 | // transform: translate(-50%, -50%); 85 | // } 86 | // .icon-calendar:after { 87 | // border-width: .3em .1em .1em .1em; 88 | // padding: .3em .4em; 89 | // transform: translate(-50%, -50%); 90 | // } 91 | -------------------------------------------------------------------------------- /sass/_inputs.scss: -------------------------------------------------------------------------------- 1 | input, 2 | button, 3 | .button, 4 | textarea, 5 | select { 6 | font-size: 1rem; 7 | border: 0; 8 | line-height: 1; 9 | -webkit-appearance: none; 10 | -moz-appearance: none; 11 | appearance:none; 12 | outline: none; 13 | transition: all .3s; 14 | outline-offset: 0; 15 | margin: 0; 16 | &::-moz-focus-inner { // Remove button padding in FF 17 | border: 0; 18 | padding: 0; 19 | } 20 | &.smaller { 21 | font-size: .85rem; 22 | } 23 | &.bigger { 24 | font-size: 1.25rem; 25 | } 26 | } 27 | 28 | select { 29 | padding: .5em; 30 | } 31 | 32 | textarea::-webkit-input-placeholder { 33 | opacity: .4; 34 | } 35 | 36 | .select-me { 37 | padding: .5em; 38 | position: relative; 39 | 40 | select { 41 | width: auto; 42 | padding: 0 0 0 1em; 43 | background: transparent; 44 | color: currentColor; 45 | font-size: 1em; 46 | text-shadow: inherit; 47 | line-height: 1.4; 48 | } 49 | &:after { 50 | content: ''; 51 | display: block; 52 | position: absolute; 53 | pointer-events: none; 54 | left: .5em; 55 | top: 50%; 56 | transform: translateY(-50%); 57 | border-style: solid; 58 | border-color: transparent; 59 | border-width: .35em .35em 0 .35em; 60 | border-top-color: currentColor; 61 | } 62 | } 63 | 64 | input { 65 | &[type="radio"], 66 | &[type="checkbox"] { 67 | width: 1em; 68 | height: 1em; 69 | padding:0; 70 | display: inline-block; 71 | vertical-align: middle; 72 | color: $base; 73 | position: relative; 74 | &:checked { 75 | background: $base-light; 76 | } 77 | &:focus { 78 | outline: none; 79 | } 80 | &:before { 81 | content: ''; 82 | position: absolute; 83 | } 84 | &[disabled] { 85 | opacity: .35; 86 | } 87 | } 88 | &[type="radio"] { 89 | border-radius: 2em; 90 | &:checked:before { 91 | background: $base; 92 | padding: 0; 93 | top: 25%; 94 | left: 25%; 95 | width: 50%; 96 | height: 50%; 97 | border-radius: 1em; 98 | margin: 0; 99 | } 100 | } 101 | &[type="checkbox"]:not(.toggle) { 102 | border-radius: .2em; 103 | margin-right:.3em; 104 | &:checked:before { 105 | transform: rotate(-45deg); 106 | border: 0 solid; 107 | border-width: 0 0 .225em .225em; 108 | padding: .15em .4em; 109 | left: 20%; 110 | top: 0%; 111 | } 112 | } 113 | &[type="checkbox"].toggle { 114 | background: rgba($darker, .3); 115 | border-radius: 2em; 116 | width: 2em; 117 | height: 1em; 118 | font-size: 1rem; 119 | transform: translate3d(0%, 0%, 0); 120 | // box-shadow: 0 0 0 2px $light; //0 1px 3px 0 $dark inset; 121 | &.active-null { 122 | background: $active; 123 | } 124 | &::before { 125 | left: 0; 126 | top: 50%; 127 | width: 1em; 128 | height: 1em; 129 | border-radius: 2em; 130 | background: $light; 131 | transition: .2s; 132 | transform: translate3d(0%, -50%, 0) scale(.8); 133 | // box-shadow: 0 1px 3px 0 $dark; 134 | } 135 | &:checked { 136 | background: $active; 137 | &:before { 138 | transform: translate3d(100%, -50%, 0) scale(.8); 139 | } 140 | } 141 | + label { 142 | margin-left: .5em; 143 | } 144 | } 145 | &[type="range"] { 146 | padding: 0; 147 | border: 0; 148 | vertical-align: middle; 149 | border-radius: 1em; 150 | background: rgba($darker, .3); 151 | &::-webkit-slider-thumb { 152 | -webkit-appearance: none; 153 | width: 1em; 154 | height: 1em; 155 | border: none; 156 | border-radius: 1em; 157 | background: $light; 158 | background-image: none; 159 | transform: scale(.8); 160 | // box-shadow: 0 0 1em 0 rgba($darker, .7); 161 | transition: all .3s; 162 | } 163 | &:focus, 164 | &:active { 165 | &::-webkit-slider-thumb { 166 | -webkit-appearance: none; 167 | background: $base-light; 168 | transform: scale(1.3); 169 | // box-shadow: 0 0 1em 0 $darker; 170 | } 171 | } 172 | } 173 | } 174 | 175 | textarea { 176 | width: 100%; 177 | padding: 1em; 178 | display: block; 179 | background: transparent; 180 | resize: none; 181 | line-height: 1.4; 182 | border-radius: 0; 183 | } 184 | 185 | input[type="text"], 186 | input[type="time"] { 187 | width: 100%; 188 | padding: .5em; 189 | display: block; 190 | border-radius: .2rem; 191 | } 192 | input[type="number"] { 193 | -webkit-appearance: text; 194 | width: 25%; 195 | padding: .3em .5em; 196 | display: inline-block; 197 | } 198 | input::-webkit-input-placeholder { 199 | color: $dark; 200 | } 201 | 202 | .input-button-group { 203 | position: relative; 204 | border-radius: .2em; 205 | *:first-child { 206 | border-radius: .2rem 0 0 .2rem; 207 | } 208 | *:last-child { 209 | border-radius: 0 .2rem .2rem 0; 210 | } 211 | * + * { 212 | // margin-left: 1px; 213 | box-shadow: -1px 0 0 0 $darker; 214 | } 215 | button { 216 | padding-left: .75em; 217 | padding-right: .75em; 218 | } 219 | } 220 | 221 | .stealth-input { 222 | position: relative; 223 | input { 224 | position: absolute !important; 225 | width: auto !important; 226 | top: 0 !important; 227 | left: 0 !important; 228 | bottom: 0 !important; 229 | right: 0 !important; 230 | font-size: 0 !important; 231 | padding: 0 !important; 232 | border: 0 !important; 233 | margin: 0 !important; 234 | opacity: 0 !important; 235 | } 236 | } 237 | 238 | button, 239 | .button { 240 | padding: 0; 241 | position: relative; 242 | font-family: $base-font; 243 | text-align: center; 244 | &.save { 245 | // background: rgba($base-dark, .35); 246 | } 247 | &.cancel { 248 | background: rgba($cancel, .3); 249 | color: set-text-color($cancel); 250 | } 251 | &.success { 252 | background: rgba($success, .1); 253 | color: set-text-color($success); 254 | } 255 | &.alert { 256 | background: rgba($alert, .8); 257 | color: set-text-color($alert); 258 | } 259 | &[data-text]:after { 260 | content: attr(data-text); 261 | font-size: 1em; 262 | position: absolute; 263 | top: 50%; 264 | left: 50%; 265 | transform: translate(-50%, -50%); 266 | } 267 | &[disabled] { 268 | opacity: .35; 269 | pointer-events: none; 270 | } 271 | &.small { 272 | font-size: .7em; 273 | } 274 | small { 275 | display: block; 276 | font-size: .7em; 277 | opacity: .5; 278 | padding-top:.3em; 279 | } 280 | &.active { 281 | background: $base; 282 | color: set-text-color($base); 283 | small { 284 | opacity: .8; 285 | } 286 | } 287 | &.action { 288 | transition: none; 289 | padding: 1rem; 290 | .fa { 291 | position: absolute; 292 | top: 50%; 293 | left: 50%; 294 | transform: translate(-50%, -50%); 295 | text-decoration: none; 296 | } 297 | } 298 | } 299 | 300 | /* CONTEXT OVERRIDES */ 301 | section, 302 | footer { 303 | button, 304 | .button { 305 | border-radius: 0; //.2rem; 306 | padding: .75rem 1.25rem; 307 | } 308 | } 309 | 310 | .flex-wrap { 311 | button, 312 | .button { 313 | margin: .1em; 314 | padding: .5em 1em; 315 | } 316 | } 317 | 318 | .easy-buttons { 319 | @extend %flex-row; 320 | flex-wrap: wrap; 321 | button, 322 | .button { 323 | font-size: .9em; 324 | margin: 0; 325 | padding: .65rem 1rem; 326 | box-shadow: 0 0 0 1px $dark; 327 | font-family: $base-font; 328 | flex: 1 1 33.33334%; 329 | &.weekend:not(.active) > * { 330 | opacity: .5; 331 | } 332 | } 333 | input[type="range"] { 334 | box-shadow: 0 0 0 .1rem $dark inset; 335 | } 336 | } 337 | 338 | .toggle-bar { 339 | margin: 0; 340 | .item { 341 | padding: .5em 0; 342 | flex: 1 0 12.5%; 343 | line-height: 1; 344 | text-align: center; 345 | font-family: $base-font; 346 | position: relative; 347 | box-shadow: 0 0 0 1px $dark; 348 | &:empty { 349 | padding: 0; 350 | height: 0; 351 | } 352 | } 353 | input[type="radio"], 354 | input[type="checkbox"] { 355 | position: absolute; 356 | opacity: 0; 357 | } 358 | } 359 | 360 | .has-grid-picker { 361 | position: relative; 362 | } 363 | .grid-picker { 364 | position: absolute; 365 | top: 0; 366 | right: 0; 367 | bottom: 0; 368 | left: 0; 369 | z-index: 1; 370 | display: flex; 371 | flex-direction: column; 372 | box-shadow: 0 0 1em .2em rgba($darker, .65); 373 | .grid-picker-header { 374 | padding: .5rem; 375 | } 376 | .grid-picker-items { 377 | box-shadow: 0 0 0 1px; 378 | display: flex; 379 | flex-direction: row; 380 | flex-wrap: wrap; 381 | @include scroller(y); 382 | + .grid-picker-items { 383 | border-top: 1px solid; 384 | } 385 | } 386 | .item { 387 | padding: .5em 0; 388 | flex: 1 0 12.5%; 389 | line-height: 1; 390 | text-align: center; 391 | font-family: $base-font; 392 | position: relative; 393 | box-shadow: 0 0 0 1px $dark; 394 | &.used { 395 | &::before { 396 | // background-color: rgba($darker, .35); 397 | // @include background-stripes(0.1); 398 | content: ''; 399 | display: block; 400 | position: absolute; 401 | // top: 0; 402 | right: 10%; 403 | bottom: 10%; 404 | // left: 0; 405 | border: .25em solid; // rgba($darker, .35); 406 | border-radius: 100%; 407 | // border-top-width: .6em; 408 | // border-bottom-width: .2em; 409 | // border-bottom-color: transparent; 410 | } 411 | &.this-one { 412 | &::after { 413 | opacity: .65; 414 | right: 50%; 415 | border-radius: 100%; 416 | transform: translateX(50%) scale(.5); 417 | border-color: $dark; 418 | } 419 | } 420 | } 421 | } 422 | // &::after { 423 | // content: ''; 424 | // border: 0 solid transparent; 425 | // position: absolute; 426 | // bottom: calc(100% + .5rem); 427 | // right: 1rem; 428 | // border-width: 0 .65rem .5rem .65rem; 429 | // } 430 | } 431 | .pillbox-bar { 432 | display: flex; 433 | flex-direction: row; 434 | .item { 435 | position: relative; 436 | text-align: center; 437 | padding: .75em 0; 438 | line-height: 1; 439 | flex: 1 0 12.5%; 440 | + .item { 441 | box-shadow: -1px 0 0 0 $darker; 442 | } 443 | } 444 | input { 445 | font-size: 1em; 446 | } 447 | + input { 448 | margin-left: 2px; 449 | } 450 | + .pillbox-bar { 451 | border-top: 1px solid $darker; 452 | // margin: 1px 0 0 0; 453 | } 454 | } 455 | 456 | .pillbox-tray { 457 | font-size: .8em; 458 | box-shadow: 0 0 0 1px $darker; 459 | + .pillbox-tray { 460 | margin-top: 1rem; 461 | } 462 | } 463 | 464 | .priority-buttons { 465 | position: relative; 466 | margin: 0; 467 | z-index: 3; 468 | .label { 469 | font-size: .8em; 470 | } 471 | .rank { 472 | padding: .7em; 473 | margin: 0; 474 | border-radius: 0; 475 | position: relative; 476 | transition: all .3s; 477 | transform: scale(1, 1); 478 | line-height: 1; 479 | z-index: 1; 480 | border-radius: 2em; 481 | box-shadow: 0 0 0 2px rgba($lighter, .3) inset, 0 .3em 0 0 rgba($darker, .3); 482 | &.active { 483 | transform: scale(1.65); 484 | z-index: 2; 485 | } 486 | } 487 | .rank-none { 488 | background: mix($rank-none, $lighter, 90%); 489 | color: set-text-color(mix($rank-none, $lighter, 90%)); 490 | } 491 | .rank-low { 492 | background: mix($rank-low, $lighter, 90%); 493 | color: set-text-color(mix($rank-low, $lighter, 90%)); 494 | } 495 | .rank-med { 496 | background: mix($rank-med, $lighter, 90%); 497 | color: set-text-color(mix($rank-med, $lighter, 90%)); 498 | } 499 | .rank-high { 500 | background: mix($rank-high, $lighter, 90%); 501 | color: set-text-color(mix($rank-high, $lighter, 90%)); 502 | } 503 | span { 504 | position: absolute; 505 | top: 50%; 506 | left: 50%; 507 | transform: translate(-50%, -50%) scale(.7, .7); 508 | } 509 | input[type="radio"] { 510 | position: absolute; 511 | opacity: 0; 512 | top: 0; 513 | left: 0; 514 | } 515 | } 516 | 517 | .drop-menu { 518 | position: relative; 519 | .menu-label { 520 | padding: .8em .5em; 521 | text-align: start; 522 | } 523 | .menu-items { 524 | display: none; 525 | flex-direction: column; 526 | position: absolute; 527 | text-align: center; 528 | top: 100%; 529 | left: -1em; 530 | width: 75vw; 531 | margin-top: .25rem; 532 | font-size: .8em; 533 | border-radius: .3rem; 534 | box-shadow: 0 0 0 1px $base-mix, 0 .25em 1em .4em rgba($darker, 0.65); 535 | > div { 536 | max-height: 45vh; 537 | position: relative; 538 | padding: .25rem; 539 | &.scroller { 540 | margin: .25rem; 541 | } 542 | &.has-actions-row { 543 | margin-bottom: 0; 544 | border-radius: .3rem; 545 | box-shadow: 0 0 .5rem .1rem rgba($darker, .35) inset; 546 | } 547 | } 548 | &.open { 549 | display: flex; 550 | } 551 | &::before, 552 | &::after { 553 | content: ''; 554 | border: 0 solid transparent; 555 | position: absolute; 556 | bottom: 100%; 557 | left: 2.5em; 558 | transform: translateX(-50%); 559 | border-width: 0 .8em .7em .8em; 560 | } 561 | &::before { 562 | margin-bottom: 1px; 563 | } 564 | .item { 565 | padding: .5rem; 566 | flex: 1 0 auto; 567 | border-radius: .25rem; 568 | margin: .25rem; 569 | } 570 | .scroller .item { 571 | box-shadow: none; 572 | text-align: start; 573 | // padding: .5em 0; 574 | } 575 | } 576 | // &.text-left .menu-items { 577 | // right: auto; 578 | // left: 2em; 579 | // width: calc(100vw - 4em); 580 | // &::after { 581 | // left: 2em; 582 | // } 583 | // } 584 | } 585 | -------------------------------------------------------------------------------- /sass/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | to { transform: translate3d(-100%, 0%, 0); } 3 | } 4 | @keyframes slideOutRight { 5 | to { transform: translate3d(100%, 0%, 0); } 6 | } 7 | @keyframes slideOutTop { 8 | to { transform: translate3d(0%, -100%, 0); } 9 | } 10 | @keyframes slideOutBottom { 11 | to { transform: translate3d(0%, 100%, 0); } 12 | } 13 | 14 | @keyframes slideInRight { 15 | from { transform:translate3d(100%, 0%, 0); } 16 | to { transform: translate3d(0%, 0%, 0); } 17 | } 18 | 19 | @keyframes slideInLeft { 20 | from { transform:translate3d(-100%, 0%, 0); } 21 | to { transform: translate3d(0%, 0%, 0); } 22 | } 23 | 24 | @keyframes slideInTop { 25 | from { transform:translate3d(0%, -100%, 0); } 26 | to { transform: translate3d(0%, 0%, 0); } 27 | } 28 | 29 | @keyframes slideInBottom { 30 | from { transform:translate3d(0%, 100%, 0); } 31 | to { transform: translate3d(0%, 0%, 0); } 32 | } 33 | 34 | @keyframes blurIn { 35 | from { filter:blur(3em); } 36 | to { filter: blur(0); } 37 | } 38 | 39 | @keyframes blurOut { 40 | from { filter:blur(0); } 41 | to { filter: blur(3em); } 42 | } 43 | 44 | @keyframes fadeIn { 45 | from { opacity: 0; } 46 | to { opacity: 1; } 47 | } 48 | 49 | @keyframes fadeOut { 50 | from { opacity: 1; } 51 | to { opacity: 0; } 52 | } 53 | 54 | @keyframes zoomIn { 55 | from { transform: scale(5); opacity: 0; } 56 | to { transform: scale(1); opacity: 1; } 57 | } 58 | 59 | @keyframes zoomOut { 60 | from { transform: scale(1); opacity: 1; } 61 | to { transform: scale(5); opacity: 0; } 62 | } 63 | 64 | @keyframes zoomUp { 65 | from { transform: scale(0); opacity: 0; } 66 | to { transform: scale(1); opacity: 1; } 67 | } 68 | 69 | @keyframes zoomDown { 70 | from { transform: scale(1); opacity: 1; } 71 | to { transform: scale(0); opacity: 0; } 72 | } 73 | 74 | @keyframes spin { 75 | from {transform: rotate(0deg);} 76 | to {transform: rotate(360deg);} 77 | } 78 | 79 | @keyframes bgBlend { 80 | 0%{background-position:50% 0%} 81 | 50%{background-position:51% 100%} 82 | 100%{background-position:50% 0%} 83 | } 84 | 85 | @keyframes beacon { 86 | 0% {box-shadow: 0 0 0 0 rgba($lighter, .35);} 87 | 100% {box-shadow: 0 0 0 2rem transparent;} 88 | } 89 | 90 | @keyframes pulse { 91 | 0% { box-shadow: 0 0 0 0; } 92 | 50% { box-shadow: 0 0 1em 0; } 93 | 100% { box-shadow: 0 0 0 0; } 94 | } 95 | 96 | @keyframes pulseText { 97 | 0% { text-shadow: 0 0 0; } 98 | 50% { text-shadow: 0 0 .5em; } 99 | 100% { text-shadow: 0 0 0; } 100 | } 101 | 102 | @keyframes floating { 103 | 0% {transform: translate3D(0,.5em,0);} 104 | 50% {transform: translate3D(0,-.5em,0);} 105 | 100% {transform: translate3D(0,.5em,0);} 106 | } 107 | 108 | @keyframes bounce { 109 | from, to { 110 | bottom: 0; 111 | } 112 | 80% { 113 | bottom: 15vh; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /sass/_layout.scss: -------------------------------------------------------------------------------- 1 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 2 | display: none !important; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | 11 | [ng-click], 12 | [hm-tap], 13 | label, 14 | input, 15 | textarea, 16 | select { 17 | cursor: pointer; 18 | -webkit-tap-highlight-color: rgba(0,0,0, 0); 19 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 20 | } 21 | 22 | html, 23 | body { 24 | overflow: hidden; 25 | position: relative; 26 | margin: 0; 27 | padding: 0; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: 100%; 32 | font-family: $base-font; 33 | font-size: 5vmin; 34 | &.ng-animate { 35 | transition: transform $framework-timing; 36 | } 37 | } 38 | 39 | main { 40 | @extend %flex-column; 41 | position: absolute; 42 | overflow: hidden; 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 100%; 47 | z-index: 2; 48 | transition: transform $framework-timing; 49 | > header { 50 | flex: 0 0 auto; 51 | @extend %flex-row; 52 | text-align: center; 53 | padding: .5rem 1rem; 54 | z-index: 4; 55 | transition: all .2s; 56 | font-size: 5.5vmin; 57 | > button { 58 | flex: 0 0 auto; 59 | padding: 0 .5em; // stretch top to bottom from flex-row header 60 | &:not([class*="bg-"]) { 61 | color: currentColor; 62 | background: none; 63 | } 64 | } 65 | } 66 | article { 67 | &:not(:empty) { 68 | flex: 1 1 0px; 69 | } 70 | @extend %flex-column; 71 | @extend %scroller; 72 | } 73 | section { 74 | padding: 0; 75 | flex: 0 0 auto; 76 | position: relative; 77 | font-size: 1rem; 78 | } 79 | footer { 80 | box-shadow: 0 1px 0 0 rgba($light, .1) inset, 0 -1px 0 0 rgba($darker, .1); 81 | @include background-stripes(0.075); 82 | } 83 | } 84 | .main-menu { 85 | position: absolute; 86 | top: 0; 87 | right: 0; 88 | left: 3em; 89 | bottom: 0; 90 | z-index: 1 !important; 91 | @extend %flex-column; 92 | transform: translate3d(100%, 0%, 0); 93 | transition: transform $framework-timing; 94 | header { 95 | padding: .8em 1em; 96 | } 97 | ul { 98 | margin: 0; 99 | padding: .5em; 100 | list-style: none; 101 | flex: 1; 102 | @extend %scroller; 103 | } 104 | li { 105 | padding: .5em; 106 | margin: .5em 0; 107 | border-radius: 5em; 108 | } 109 | footer { 110 | padding: .8em 1em; 111 | } 112 | } 113 | 114 | .show-main-menu { 115 | aside.main-menu { 116 | transform: translate3d(0%, 0%, 0); 117 | } 118 | main { 119 | box-shadow: 0 0 0 1vw rgba($darker, .35); 120 | transform: translate3d(calc(-100% + 3em), 0%, 0); 121 | } 122 | } 123 | 124 | article { 125 | display: flex; 126 | flex-direction: row; 127 | flex: 0 0 auto; 128 | user-select: none; 129 | 130 | &.bg-dark { 131 | text-shadow: -1px -1px 0 rgba($darker, .5); 132 | header { 133 | color: get-color('light-blue', 400); 134 | span ~ button { 135 | box-shadow: -1px 0 0 0 rgba($lighter, .1); 136 | background: rgba($darker, .2); 137 | } 138 | } 139 | button::before { 140 | text-shadow: -1px -1px 0 rgba($darker, .5); 141 | } 142 | } 143 | } 144 | 145 | .close-view { 146 | padding: 0; 147 | position: absolute; 148 | z-index: 5; 149 | height: 2.5rem; 150 | width: 2.5rem; 151 | line-height: 1; 152 | border-radius: 100%; 153 | background: rgba($light, .2); 154 | color: $lighter; 155 | &::before, 156 | &::after { 157 | content: ''; 158 | position: absolute; 159 | top: 50%; 160 | left: 50%; 161 | padding: 1px .8em; 162 | background: currentColor; 163 | transform-origin: center; 164 | } 165 | &::before { 166 | transform: translate(-50%, -50%) rotate(45deg); 167 | } 168 | &::after { 169 | transform: translate(-50%, -50%) rotate(-45deg); 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /sass/_sortables.scss: -------------------------------------------------------------------------------- 1 | .as-sortable-placeholder { 2 | min-height: 4em; 3 | @include background-stripes(); 4 | } 5 | 6 | .as-sortable-helper { 7 | opacity: .65; 8 | // background: $base-dark; 9 | font-size: .8em; 10 | padding: 1em; 11 | box-shadow: 0 0 1em 0 $darker; 12 | transform: scale(.9); 13 | .data { 14 | padding: .5em; 15 | } 16 | } 17 | 18 | // .as-sortable-item, .as-sortable-placeholder { 19 | // display: block; 20 | // } 21 | 22 | .as-sortable-item { 23 | -ms-touch-action: none; 24 | touch-action: none; 25 | } 26 | 27 | .as-sortable-item-handle { 28 | cursor: move; 29 | cursor: -webkit-grab; 30 | cursor: -moz-grab; 31 | } 32 | 33 | .as-sortable-placeholder { 34 | } 35 | 36 | .as-sortable-drag { 37 | position: absolute; 38 | pointer-events: none; 39 | z-index: 9999; 40 | } 41 | 42 | .as-sortable-hidden { 43 | display: none !important; 44 | } 45 | 46 | .as-sortable-un-selectable { 47 | -webkit-touch-callout: none; 48 | -webkit-user-select: none; 49 | -khtml-user-select: none; 50 | -moz-user-select: none; 51 | -ms-user-select: none; 52 | user-select: none; 53 | } 54 | 55 | .as-sortable-drag { 56 | position: absolute; 57 | pointer-events: none; 58 | z-index: 10; 59 | opacity: .85; 60 | padding: 0; 61 | section { 62 | width: 100% !important; 63 | margin: 0 !important; 64 | > div { 65 | padding: .75rem .5rem; 66 | font-size: 1.2em; 67 | margin: .125em; 68 | } 69 | .actions { 70 | display: none; 71 | } 72 | .info .mover { 73 | pointer-events: none; 74 | background: none; 75 | color: $light; 76 | font-size: 1em; 77 | border-radius: 100%; 78 | font-family: 'FontAwesome'; 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /sass/_theme.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: $base; 3 | color: set-text-color($base); 4 | } 5 | 6 | main > header:not([class*="bg-"]) { 7 | border-bottom: .2em solid $base-light; 8 | } 9 | -------------------------------------------------------------------------------- /sass/_transitions.scss: -------------------------------------------------------------------------------- 1 | .ng-enter-active {z-index: 20;} 2 | .ng-leave-active {z-index: 10;} 3 | 4 | // .ng-enter-active, 5 | // .ng-leave-active {box-shadow: 0 0 2em 0 rgba($darker, .65);} 6 | 7 | /* page view animations ------------------------ */ 8 | $animateyIn: $framework-timing both ease-in-out; 9 | $animateyOut: $framework-timing both ease-in-out; 10 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed); 2 | 3 | $base-font: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; 4 | $serif-font: serif; //Georgia, 'Times New Roman', serif; 5 | $code-font: Consolas, Monaco, 'Andale Mono', monospace; 6 | 7 | $framework-timing: .3s; 8 | 9 | $colors: ( 10 | 'deepred': #b31c1f, 11 | 'red': #e43336, 12 | 'pink': #f06292, 13 | 'deeppink': #ff4081, 14 | 'purple': #ab47bc, 15 | 'deeppurple': #7e57c2, 16 | 'indigo': #5c6bc0, 17 | 'blue': #42a5f5, 18 | 'lightblue': #29b6f6, 19 | 'cyan': #26c6da, 20 | 'teal': #26a69a, 21 | 'green': #66bb6a, 22 | 'lightgreen': #9ccc65, 23 | 'lime': #d4e157, 24 | 'yellow': #ffee58, 25 | 'amber': #ffca28, 26 | 'deepamber': #f9a825, 27 | 'orange': #ff9800, 28 | 'deeporange': #ff7043, 29 | 'brown': #8d6e63, 30 | 'deepbrown': #795548, 31 | 'chocolate': #4E342E, 32 | 'bluegrey': #78909c, 33 | 'deepgrey': #546E7A 34 | ); 35 | 36 | $dark: #23292C; 37 | $darker: mix($dark, #000, 50%); 38 | $light: #E2E4E6; 39 | $lighter: mix($light, #fff, 40%); 40 | $base: #00BCD4; 41 | $base-dark: mix(#000, $base, 25%); 42 | $base-light: mix(#fff, $base, 25%); 43 | $base-mix: mix($dark, $light, 70%); 44 | $base-shade: mix($dark, $light, 85%); 45 | 46 | $grey-1: mix($dark, $light, 10%); 47 | $grey-2: mix($dark, $light, 20%); 48 | $grey-3: mix($dark, $light, 30%); 49 | $grey-4: mix($dark, $light, 40%); 50 | $grey-5: mix($dark, $light, 50%); 51 | $grey-6: mix($dark, $light, 60%); 52 | $grey-7: mix($dark, $light, 70%); 53 | $grey-8: mix($dark, $light, 80%); 54 | $grey-9: mix($dark, $light, 90%); 55 | 56 | $rank-none: $grey-8; 57 | $rank-low: #cddc39; 58 | $rank-med: #00BCD4; 59 | $rank-high: #ff5722; 60 | 61 | // states 62 | $alert: #f06292; 63 | $warning: #f9a825; 64 | $caution: #fdd835; 65 | $success: #9ccc65; //#689F38; 66 | $info: #26c6da; 67 | $cancel: $base-dark; 68 | $active: $base-light; 69 | 70 | @mixin background-stripes($alpha:0.05, $angle:-45deg) { 71 | background-size: .5rem .5rem; 72 | background-image: linear-gradient($angle, rgba($lighter, $alpha) 25%, transparent 25%, transparent 50%, rgba($lighter, $alpha) 50%, rgba($lighter, $alpha) 75%, transparent 75%, transparent); 73 | } 74 | 75 | @mixin scroller($dir:both) { 76 | @if($dir == both) { 77 | overflow: auto; 78 | } @elseif($dir == x) { 79 | overflow-x: auto; 80 | } @elseif($dir == y) { 81 | overflow-y: auto; 82 | } 83 | -webkit-overflow-scrolling: touch; 84 | } 85 | 86 | @function set-text-color($color, $threshhold: 55%) { 87 | @if(lightness($color) > $threshhold) { 88 | @return $dark; // Lighter background, return dark color 89 | } @else { 90 | @return $lighter; // Darker background, return light color 91 | } 92 | } 93 | 94 | %scroller { 95 | @include scroller(both); 96 | } 97 | 98 | %flex-row { 99 | display: flex; 100 | flex-direction: row; 101 | } 102 | %flex-column { 103 | display: flex; 104 | flex-direction: column; 105 | } 106 | -------------------------------------------------------------------------------- /sass/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'colors'; 3 | @import 'keyframes'; 4 | @import 'transitions'; 5 | @import 'base'; 6 | @import 'layout'; 7 | @import 'inputs'; 8 | @import 'content'; 9 | 10 | @import 'flipper'; 11 | @import 'helper'; 12 | @import 'sortables'; 13 | 14 | @import 'theme'; 15 | 16 | .view-is-loading { 17 | position: absolute; 18 | top: 0; 19 | height: 33vh; 20 | right: 0; 21 | // bottom: 0; 22 | left: 0; 23 | display: none; 24 | flex-direction: row; 25 | align-items: center; 26 | justify-content: center; 27 | background: rgba($dark, .85); 28 | color: $base-light; 29 | z-index: 100; 30 | &.active { 31 | display: flex; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /sass/time-dial.scss: -------------------------------------------------------------------------------- 1 | $dark: #5d5d5f; 2 | $light: #fff; 3 | $accent-color: #00BCD4; 4 | $timing: .3s; 5 | 6 | @keyframes pulse { 7 | 0% {transform: translate(-50%, -50%) scale(1);} 8 | 51% {transform: translate(-50%, -50%) scale(1.65);} 9 | 100% {transform: translate(-50%, -50%) scale(1);} 10 | } 11 | 12 | @keyframes pulse-alt { 13 | 0% {transform: translate(0, 10%) scale(1);} 14 | 51% {transform: translate(0, 10%) scale(1.65);} 15 | 100% {transform: translate(0, 10%) scale(1);} 16 | } 17 | 18 | .time-dial { 19 | font-size: 300px; 20 | width: 1em; 21 | height: 1em; 22 | position: relative; 23 | line-height: 1; 24 | color: inherit; /* inherit from parent element or set explicitly: $light */ 25 | border-radius: 100%; 26 | &::before { 27 | content: ''; 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | bottom: 0; 32 | left: 0; 33 | transform: scale(1.05); 34 | border: .04em solid; 35 | border-radius: 100%; 36 | } 37 | .lcd { 38 | position: absolute; 39 | z-index: 1; 40 | top: 50%; 41 | left: 50%; 42 | transform: translate(-50%, -50%); 43 | font-size: 80%; 44 | padding: .3em .2em; 45 | border-radius: 1em; 46 | font-family: "DIN Condensed", Impact, Helvetica, sans-serif; 47 | user-select: none; 48 | pointer-events: auto; 49 | cursor: pointer; 50 | -webkit-font-smoothing: subpixel-antialiased; 51 | transition: 52 | color $timing ease-out, 53 | background $timing ease-out, 54 | top $timing ease-out; 55 | &.toggled { 56 | .meridiem { 57 | animation: pulse $timing ease-out; 58 | } 59 | &.Noon, 60 | &.Midnight { 61 | .meridiem { 62 | animation: pulse-alt $timing ease-out; 63 | } 64 | } 65 | } 66 | &.Noon, 67 | &.Midnight { 68 | .time { 69 | display: none; 70 | } 71 | .meridiem { 72 | font-size: 25%; 73 | font-family: inherit; 74 | position: relative; 75 | text-transform: capitalize; 76 | bottom: auto; 77 | left: auto; 78 | transform: translate(0, 10%); 79 | } 80 | } 81 | } 82 | .time { 83 | font-size: 35%; 84 | position: relative; 85 | } 86 | .meridiem { 87 | font-size: 15%; 88 | font-family: "DIN Alternate", Helvetica, sans-serif; 89 | text-transform: uppercase; 90 | position: absolute; 91 | left: 50%; 92 | bottom: 10%; 93 | transform: translate(-50%, -50%); 94 | } 95 | .crown { 96 | position: absolute; 97 | z-index: 1; 98 | top: 0; 99 | right: 35%; 100 | bottom: 50%; 101 | left: 35%; 102 | transform-origin: center bottom; 103 | pointer-events: none; 104 | font-size: 12.5%; 105 | span { 106 | border-radius: 1em; 107 | position: absolute; 108 | top: 0; 109 | left: 50%; 110 | transform: translate(-50%, -50%) rotate(45deg); 111 | pointer-events: auto; 112 | cursor: pointer; 113 | /* 114 | &::after { 115 | display: none; 116 | content: attr(beat); 117 | position: absolute; 118 | top: 50%; 119 | left: 50%; 120 | transform: translate(-50%, -50%) rotate(-45deg); 121 | font-size: 60%; 122 | text-transform: uppercase; 123 | } 124 | */ 125 | } 126 | &.hour span { 127 | background: $accent-color; 128 | box-shadow: 0 0 0 .15em currentColor; 129 | width: 1em; 130 | height: 1em; 131 | } 132 | &.minute span { 133 | box-shadow: 0 0 0 .15em $accent-color; 134 | background: currentColor; 135 | width: .9em; 136 | height: .9em; 137 | } 138 | &.second span { 139 | top: 1em; 140 | background: currentColor; 141 | opacity: .35; 142 | // box-shadow: 0 0 0 .15em currentColor; 143 | width: .5em; 144 | height: .5em; 145 | } 146 | } 147 | 148 | // TOUCH BOX 149 | &.active-touch { 150 | .lcd { 151 | top: 0%; 152 | font-size: 45%; 153 | background: rgba(#000, .05); 154 | pointer-events: none; 155 | padding: 0; 156 | z-index: 1; 157 | margin: 0 -60%; 158 | right: 50%; 159 | left: 50%; 160 | transform: translateY(-50%); 161 | text-align: center; 162 | border-radius: .05em; 163 | backdrop-filter: blur(.1em); 164 | &.Noon, 165 | &.Midnight { 166 | .meridiem { 167 | font-size: 60%; 168 | transform: translate(0, 0); 169 | } 170 | } 171 | } 172 | .time::before, 173 | .meridiem::before { 174 | content: attr(data-title); 175 | position: absolute; 176 | -webkit-text-stroke: .125em darken($accent-color, 10%); 177 | left: 0; 178 | z-index: -1; 179 | } 180 | .time { 181 | display: inline-block; 182 | font-size: 60%; 183 | } 184 | .meridiem { 185 | display: inline-block; 186 | font-size: 35%; 187 | position:relative; 188 | bottom: auto; 189 | left: auto; 190 | transform: translate(0, 0); 191 | transition: transform $timing ease-out; 192 | } 193 | .crown { 194 | z-index: 0; 195 | span { 196 | background: $dark; 197 | } 198 | } 199 | } 200 | } 201 | 202 | /* disable dragging crowns when telling time */ 203 | .time-dial.tell { 204 | .lcd, 205 | .crown span { 206 | pointer-events: none; 207 | cursor: default; 208 | } 209 | } 210 | 211 | /* hide second marker when setting time */ 212 | .time-dial.set .crown.second { 213 | display: none; 214 | } 215 | 216 | 217 | /* 218 | .time-dial.tell { 219 | .crown.second { 220 | transition: $timing linear; 221 | } 222 | } 223 | .time-dial.tell { 224 | .time span { 225 | animation: fadeIn alternate .5s linear infinite; 226 | } 227 | .crown { 228 | transition: $timing linear; 229 | z-index: 0; 230 | span { 231 | opacity: 0; 232 | } 233 | &::after { 234 | content: ''; 235 | position: absolute; 236 | left: 100%; 237 | background-color: $dark; //#f06292; 238 | transform: translateX(-50%); 239 | border-radius: .2em; 240 | } 241 | &.minute::after { 242 | top: 5%; 243 | height: 45%; 244 | padding: .1em; 245 | } 246 | &.hour::after { 247 | top: 15%; 248 | height: 35%; 249 | padding: .15em; 250 | } 251 | } 252 | } 253 | */ 254 | 255 | .x-ray .crown { 256 | background: rgba($dark, .2); 257 | } 258 | -------------------------------------------------------------------------------- /views/main.html: -------------------------------------------------------------------------------- 1 |

2 |

3 | 4 | {{format(time) | date: 'HH:mm – MMMM d'}} 5 | 6 |

7 |

8 | 9 |

10 |

11 |

12 | 13 |

14 |

15 | 16 |

17 |

18 |

19 | --------------------------------------------------------------------------------