├── .editorconfig ├── .gitignore ├── README.md ├── assets ├── coffeebreak.svg └── entypo │ ├── entypo.css │ ├── fonts │ ├── entypo.eot │ ├── entypo.svg │ ├── entypo.ttf │ └── entypo.woff │ └── icons-reference.html ├── components └── App.vue ├── index.js ├── package.json ├── router └── index.js ├── store └── index.js └── views ├── Create.vue └── Get.vue /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | dist 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | # coffeebreak ![version](https://img.shields.io/badge/version-0.2.0-brightgreen.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![notests](https://img.shields.io/badge/yet-true-ff69b4.svg) 6 | > Tool for live editing CSS written in Vue 7 | 8 | ## Screenshot 9 | 10 | 11 | ## Run coffeebreak 12 | Application is located at http://kocisov.github.io/coffeebreak/ 13 | 14 | ### Compile your own build 15 | ``` 16 | git clone https://github.com/Kocisov/coffeebreak.git 17 | cd coffeebreak 18 | npm install 19 | 20 | # for devServer with hot reload 21 | npm start 22 | # build for production 23 | npm run build 24 | ``` 25 | 26 | ## Contribution 27 | 1. Fork repo 28 | 2. Make some code 29 | 3. Pull request 30 | 4. Be happy :) 31 | 32 | All contributions are very appreciated! 33 | -------------------------------------------------------------------------------- /assets/coffeebreak.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 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 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /assets/entypo/entypo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @font-face { 4 | font-family: "entypo"; 5 | src:url("fonts/entypo.eot"); 6 | src:url("fonts/entypo.eot?#iefix") format("embedded-opentype"), 7 | url("fonts/entypo.woff") format("woff"), 8 | url("fonts/entypo.ttf") format("truetype"), 9 | url("fonts/entypo.svg#entypo") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; 12 | 13 | } 14 | 15 | [data-icon]:before { 16 | font-family: "entypo" !important; 17 | content: attr(data-icon); 18 | font-style: normal !important; 19 | font-weight: normal !important; 20 | font-variant: normal !important; 21 | text-transform: none !important; 22 | speak: none; 23 | line-height: 1; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | [class^="icon-"]:before, 29 | [class*=" icon-"]:before { 30 | font-family: "entypo" !important; 31 | font-style: normal !important; 32 | font-weight: normal !important; 33 | font-variant: normal !important; 34 | text-transform: none !important; 35 | speak: none; 36 | line-height: 1; 37 | -webkit-font-smoothing: antialiased; 38 | -moz-osx-font-smoothing: grayscale; 39 | } 40 | 41 | .icon-address:before { 42 | content: "\61"; 43 | } 44 | .icon-adjust:before { 45 | content: "\62"; 46 | } 47 | .icon-air:before { 48 | content: "\63"; 49 | } 50 | .icon-bell:before { 51 | content: "\64"; 52 | } 53 | .icon-behance:before { 54 | content: "\65"; 55 | } 56 | .icon-battery:before { 57 | content: "\66"; 58 | } 59 | .icon-camera:before { 60 | content: "\67"; 61 | } 62 | .icon-cancel:before { 63 | content: "\68"; 64 | } 65 | .icon-cancel-circled:before { 66 | content: "\69"; 67 | } 68 | .icon-ccw:before { 69 | content: "\6a"; 70 | } 71 | .icon-cc-zero:before { 72 | content: "\6b"; 73 | } 74 | .icon-cc-share:before { 75 | content: "\6c"; 76 | } 77 | .icon-cloud-thunder:before { 78 | content: "\6d"; 79 | } 80 | .icon-code:before { 81 | content: "\6e"; 82 | } 83 | .icon-cog:before { 84 | content: "\6f"; 85 | } 86 | .icon-comment:before { 87 | content: "\70"; 88 | } 89 | .icon-cd:before { 90 | content: "\71"; 91 | } 92 | .icon-cancel-squared:before { 93 | content: "\72"; 94 | } 95 | .icon-block:before { 96 | content: "\73"; 97 | } 98 | .icon-alert:before { 99 | content: "\74"; 100 | } 101 | .icon-archive:before { 102 | content: "\75"; 103 | } 104 | .icon-book:before { 105 | content: "\76"; 106 | } 107 | .icon-cc:before { 108 | content: "\77"; 109 | } 110 | .icon-chart-area:before { 111 | content: "\78"; 112 | } 113 | .icon-compass:before { 114 | content: "\79"; 115 | } 116 | .icon-credit-card:before { 117 | content: "\7a"; 118 | } 119 | .icon-chart-bar:before { 120 | content: "\41"; 121 | } 122 | .icon-cc-by:before { 123 | content: "\42"; 124 | } 125 | .icon-book-open:before { 126 | content: "\43"; 127 | } 128 | .icon-arrow-combo:before { 129 | content: "\44"; 130 | } 131 | .icon-arrows-ccw:before { 132 | content: "\45"; 133 | } 134 | .icon-bookmark:before { 135 | content: "\46"; 136 | } 137 | .icon-cc-nc:before { 138 | content: "\47"; 139 | } 140 | .icon-chart-line:before { 141 | content: "\48"; 142 | } 143 | .icon-cup:before { 144 | content: "\49"; 145 | } 146 | .icon-cw:before { 147 | content: "\4a"; 148 | } 149 | .icon-chart-pie:before { 150 | content: "\4b"; 151 | } 152 | .icon-cc-nc-eu:before { 153 | content: "\4c"; 154 | } 155 | .icon-bookmarks:before { 156 | content: "\4d"; 157 | } 158 | .icon-attach:before { 159 | content: "\4e"; 160 | } 161 | .icon-attention:before { 162 | content: "\4f"; 163 | } 164 | .icon-box:before { 165 | content: "\50"; 166 | } 167 | .icon-cc-nc-jp:before { 168 | content: "\51"; 169 | } 170 | .icon-chat:before { 171 | content: "\52"; 172 | } 173 | .icon-database:before { 174 | content: "\53"; 175 | } 176 | .icon-db-shape:before { 177 | content: "\54"; 178 | } 179 | .icon-cc-nd:before { 180 | content: "\55"; 181 | } 182 | .icon-check:before { 183 | content: "\56"; 184 | } 185 | .icon-briefcase:before { 186 | content: "\57"; 187 | } 188 | .icon-back:before { 189 | content: "\58"; 190 | } 191 | .icon-back-in-time:before { 192 | content: "\59"; 193 | } 194 | .icon-brush:before { 195 | content: "\5a"; 196 | } 197 | .icon-cc-pd:before { 198 | content: "\30"; 199 | } 200 | .icon-clipboard:before { 201 | content: "\31"; 202 | } 203 | .icon-direction:before { 204 | content: "\32"; 205 | } 206 | .icon-doc:before { 207 | content: "\33"; 208 | } 209 | .icon-cc-remix:before { 210 | content: "\34"; 211 | } 212 | .icon-clock:before { 213 | content: "\35"; 214 | } 215 | .icon-bag:before { 216 | content: "\36"; 217 | } 218 | .icon-bucket:before { 219 | content: "\37"; 220 | } 221 | .icon-basket:before { 222 | content: "\38"; 223 | } 224 | .icon-calendar:before { 225 | content: "\39"; 226 | } 227 | .icon-cc-sa:before { 228 | content: "\21"; 229 | } 230 | .icon-cloud:before { 231 | content: "\22"; 232 | } 233 | .icon-doc-landscape:before { 234 | content: "\23"; 235 | } 236 | .icon-window:before { 237 | content: "\24"; 238 | } 239 | .icon-water:before { 240 | content: "\25"; 241 | } 242 | .icon-volume:before { 243 | content: "\26"; 244 | } 245 | .icon-vkontakte:before { 246 | content: "\27"; 247 | } 248 | .icon-vimeo-circled:before { 249 | content: "\28"; 250 | } 251 | .icon-vimeo:before { 252 | content: "\29"; 253 | } 254 | .icon-video:before { 255 | content: "\2a"; 256 | } 257 | .icon-vcard:before { 258 | content: "\2b"; 259 | } 260 | .icon-users:before { 261 | content: "\2c"; 262 | } 263 | .icon-user-add:before { 264 | content: "\2d"; 265 | } 266 | .icon-user:before { 267 | content: "\2e"; 268 | } 269 | .icon-tumblr-circled:before { 270 | content: "\2f"; 271 | } 272 | .icon-twitter:before { 273 | content: "\3a"; 274 | } 275 | .icon-twitter-circled:before { 276 | content: "\3b"; 277 | } 278 | .icon-up:before { 279 | content: "\3c"; 280 | } 281 | .icon-up-bold:before { 282 | content: "\3d"; 283 | } 284 | .icon-up-circled:before { 285 | content: "\3e"; 286 | } 287 | .icon-up-dir:before { 288 | content: "\3f"; 289 | } 290 | .icon-up-open:before { 291 | content: "\40"; 292 | } 293 | .icon-up-open-big:before { 294 | content: "\5b"; 295 | } 296 | .icon-up-open-mini:before { 297 | content: "\5d"; 298 | } 299 | .icon-up-thin:before { 300 | content: "\5e"; 301 | } 302 | .icon-upload:before { 303 | content: "\5f"; 304 | } 305 | .icon-upload-cloud:before { 306 | content: "\60"; 307 | } 308 | .icon-tumblr:before { 309 | content: "\7b"; 310 | } 311 | .icon-trophy:before { 312 | content: "\7c"; 313 | } 314 | .icon-trash:before { 315 | content: "\7d"; 316 | } 317 | .icon-traffic-cone:before { 318 | content: "\7e"; 319 | } 320 | .icon-tools:before { 321 | content: "\5c"; 322 | } 323 | .icon-to-start:before { 324 | content: "\e000"; 325 | } 326 | .icon-to-end:before { 327 | content: "\e001"; 328 | } 329 | .icon-ticket:before { 330 | content: "\e002"; 331 | } 332 | .icon-thumbs-up:before { 333 | content: "\e003"; 334 | } 335 | .icon-thumbs-down:before { 336 | content: "\e004"; 337 | } 338 | .icon-thermometer:before { 339 | content: "\e005"; 340 | } 341 | .icon-target:before { 342 | content: "\e006"; 343 | } 344 | .icon-tape:before { 345 | content: "\e007"; 346 | } 347 | .icon-sound:before { 348 | content: "\e008"; 349 | } 350 | .icon-soundcloud:before { 351 | content: "\e009"; 352 | } 353 | .icon-spotify:before { 354 | content: "\e00a"; 355 | } 356 | .icon-spotify-circled:before { 357 | content: "\e00b"; 358 | } 359 | .icon-star:before { 360 | content: "\e00c"; 361 | } 362 | .icon-star-empty:before { 363 | content: "\e00d"; 364 | } 365 | .icon-stop:before { 366 | content: "\e00e"; 367 | } 368 | .icon-stumbleupon:before { 369 | content: "\e00f"; 370 | } 371 | .icon-stumbleupon-circled:before { 372 | content: "\e010"; 373 | } 374 | .icon-suitcase:before { 375 | content: "\e011"; 376 | } 377 | .icon-sweden:before { 378 | content: "\e012"; 379 | } 380 | .icon-switch:before { 381 | content: "\e013"; 382 | } 383 | .icon-tag:before { 384 | content: "\e014"; 385 | } 386 | .icon-smashing:before { 387 | content: "\e015"; 388 | } 389 | .icon-skype-circled:before { 390 | content: "\e016"; 391 | } 392 | .icon-skype:before { 393 | content: "\e017"; 394 | } 395 | .icon-sina-weibo:before { 396 | content: "\e018"; 397 | } 398 | .icon-signal:before { 399 | content: "\e019"; 400 | } 401 | .icon-shuffle:before { 402 | content: "\e01a"; 403 | } 404 | .icon-shareable:before { 405 | content: "\e01b"; 406 | } 407 | .icon-share:before { 408 | content: "\e01c"; 409 | } 410 | .icon-search:before { 411 | content: "\e01d"; 412 | } 413 | .icon-rocket:before { 414 | content: "\e01e"; 415 | } 416 | .icon-rss:before { 417 | content: "\e01f"; 418 | } 419 | .icon-right-thin:before { 420 | content: "\e020"; 421 | } 422 | .icon-record:before { 423 | content: "\e021"; 424 | } 425 | .icon-renren:before { 426 | content: "\e022"; 427 | } 428 | .icon-right-open-mini:before { 429 | content: "\e023"; 430 | } 431 | .icon-reply:before { 432 | content: "\e024"; 433 | } 434 | .icon-reply-all:before { 435 | content: "\e025"; 436 | } 437 | .icon-resize-full:before { 438 | content: "\e026"; 439 | } 440 | .icon-resize-small:before { 441 | content: "\e027"; 442 | } 443 | .icon-retweet:before { 444 | content: "\e028"; 445 | } 446 | .icon-right:before { 447 | content: "\e029"; 448 | } 449 | .icon-right-bold:before { 450 | content: "\e02a"; 451 | } 452 | .icon-right-circled:before { 453 | content: "\e02b"; 454 | } 455 | .icon-right-dir:before { 456 | content: "\e02c"; 457 | } 458 | .icon-right-open:before { 459 | content: "\e02d"; 460 | } 461 | .icon-right-open-big:before { 462 | content: "\e02e"; 463 | } 464 | .icon-rdio-circled:before { 465 | content: "\e02f"; 466 | } 467 | .icon-rdio:before { 468 | content: "\e030"; 469 | } 470 | .icon-quote:before { 471 | content: "\e031"; 472 | } 473 | .icon-publish:before { 474 | content: "\e032"; 475 | } 476 | .icon-progress-3:before { 477 | content: "\e033"; 478 | } 479 | .icon-qq:before { 480 | content: "\e034"; 481 | } 482 | .icon-progress-2:before { 483 | content: "\e035"; 484 | } 485 | .icon-progress-1:before { 486 | content: "\e036"; 487 | } 488 | .icon-progress-0:before { 489 | content: "\e037"; 490 | } 491 | .icon-print:before { 492 | content: "\e038"; 493 | } 494 | .icon-popup:before { 495 | content: "\e039"; 496 | } 497 | .icon-plus-squared:before { 498 | content: "\e03a"; 499 | } 500 | .icon-plus-circled:before { 501 | content: "\e03b"; 502 | } 503 | .icon-note-beamed:before { 504 | content: "\e03c"; 505 | } 506 | .icon-minus:before { 507 | content: "\e03d"; 508 | } 509 | .icon-minus-circled:before { 510 | content: "\e03e"; 511 | } 512 | .icon-palette:before { 513 | content: "\e03f"; 514 | } 515 | .icon-paper-plane:before { 516 | content: "\e040"; 517 | } 518 | .icon-minus-squared:before { 519 | content: "\e041"; 520 | } 521 | .icon-mixi:before { 522 | content: "\e042"; 523 | } 524 | .icon-pause:before { 525 | content: "\e043"; 526 | } 527 | .icon-paypal:before { 528 | content: "\e044"; 529 | } 530 | .icon-mobile:before { 531 | content: "\e045"; 532 | } 533 | .icon-monitor:before { 534 | content: "\e046"; 535 | } 536 | .icon-pencil:before { 537 | content: "\e047"; 538 | } 539 | .icon-phone:before { 540 | content: "\e048"; 541 | } 542 | .icon-moon:before { 543 | content: "\e049"; 544 | } 545 | .icon-mouse:before { 546 | content: "\e04a"; 547 | } 548 | .icon-picasa:before { 549 | content: "\e04b"; 550 | } 551 | .icon-picture:before { 552 | content: "\e04c"; 553 | } 554 | .icon-music:before { 555 | content: "\e04d"; 556 | } 557 | .icon-mute:before { 558 | content: "\e04e"; 559 | } 560 | .icon-pinterest:before { 561 | content: "\e04f"; 562 | } 563 | .icon-pinterest-circled:before { 564 | content: "\e050"; 565 | } 566 | .icon-network:before { 567 | content: "\e051"; 568 | } 569 | .icon-newspaper:before { 570 | content: "\e052"; 571 | } 572 | .icon-play:before { 573 | content: "\e053"; 574 | } 575 | .icon-plus:before { 576 | content: "\e054"; 577 | } 578 | .icon-note:before { 579 | content: "\e055"; 580 | } 581 | .icon-mic:before { 582 | content: "\e056"; 583 | } 584 | .icon-list-add:before { 585 | content: "\e057"; 586 | } 587 | .icon-list:before { 588 | content: "\e058"; 589 | } 590 | .icon-menu:before { 591 | content: "\e059"; 592 | } 593 | .icon-megaphone:before { 594 | content: "\e05a"; 595 | } 596 | .icon-linkedin-circled:before { 597 | content: "\e05b"; 598 | } 599 | .icon-linkedin:before { 600 | content: "\e05c"; 601 | } 602 | .icon-map:before { 603 | content: "\e05d"; 604 | } 605 | .icon-mail:before { 606 | content: "\e05e"; 607 | } 608 | .icon-link:before { 609 | content: "\e05f"; 610 | } 611 | .icon-light-up:before { 612 | content: "\e060"; 613 | } 614 | .icon-magnet:before { 615 | content: "\e061"; 616 | } 617 | .icon-loop:before { 618 | content: "\e062"; 619 | } 620 | .icon-light-down:before { 621 | content: "\e063"; 622 | } 623 | .icon-lifebuoy:before { 624 | content: "\e064"; 625 | } 626 | .icon-logout:before { 627 | content: "\e065"; 628 | } 629 | .icon-logo-db:before { 630 | content: "\e066"; 631 | } 632 | .icon-level-up:before { 633 | content: "\e067"; 634 | } 635 | .icon-level-down:before { 636 | content: "\e068"; 637 | } 638 | .icon-login:before { 639 | content: "\e069"; 640 | } 641 | .icon-lock-open:before { 642 | content: "\e06a"; 643 | } 644 | .icon-left-thin:before { 645 | content: "\e06b"; 646 | } 647 | .icon-left-open-mini:before { 648 | content: "\e06c"; 649 | } 650 | .icon-lock:before { 651 | content: "\e06d"; 652 | } 653 | .icon-location:before { 654 | content: "\e06e"; 655 | } 656 | .icon-left-open-big:before { 657 | content: "\e06f"; 658 | } 659 | .icon-key:before { 660 | content: "\e070"; 661 | } 662 | .icon-graduation-cap:before { 663 | content: "\e071"; 664 | } 665 | .icon-heart:before { 666 | content: "\e072"; 667 | } 668 | .icon-keyboard:before { 669 | content: "\e073"; 670 | } 671 | .icon-lamp:before { 672 | content: "\e074"; 673 | } 674 | .icon-heart-empty:before { 675 | content: "\e075"; 676 | } 677 | .icon-help:before { 678 | content: "\e076"; 679 | } 680 | .icon-language:before { 681 | content: "\e077"; 682 | } 683 | .icon-lastfm:before { 684 | content: "\e078"; 685 | } 686 | .icon-help-circled:before { 687 | content: "\e079"; 688 | } 689 | .icon-home:before { 690 | content: "\e07a"; 691 | } 692 | .icon-lastfm-circled:before { 693 | content: "\e07b"; 694 | } 695 | .icon-layout:before { 696 | content: "\e07c"; 697 | } 698 | .icon-hourglass:before { 699 | content: "\e07d"; 700 | } 701 | .icon-inbox:before { 702 | content: "\e07e"; 703 | } 704 | .icon-leaf:before { 705 | content: "\e07f"; 706 | } 707 | .icon-left:before { 708 | content: "\e080"; 709 | } 710 | .icon-infinity:before { 711 | content: "\e081"; 712 | } 713 | .icon-info:before { 714 | content: "\e082"; 715 | } 716 | .icon-left-bold:before { 717 | content: "\e083"; 718 | } 719 | .icon-left-circled:before { 720 | content: "\e084"; 721 | } 722 | .icon-info-circled:before { 723 | content: "\e085"; 724 | } 725 | .icon-instagrem:before { 726 | content: "\e086"; 727 | } 728 | .icon-left-dir:before { 729 | content: "\e087"; 730 | } 731 | .icon-left-open:before { 732 | content: "\e088"; 733 | } 734 | .icon-install:before { 735 | content: "\e089"; 736 | } 737 | .icon-gplus-circled:before { 738 | content: "\e08a"; 739 | } 740 | .icon-flow-branch:before { 741 | content: "\e08b"; 742 | } 743 | .icon-floppy:before { 744 | content: "\e08c"; 745 | } 746 | .icon-gplus:before { 747 | content: "\e08d"; 748 | } 749 | .icon-google-circles:before { 750 | content: "\e08e"; 751 | } 752 | .icon-flight:before { 753 | content: "\e08f"; 754 | } 755 | .icon-flickr-circled:before { 756 | content: "\e090"; 757 | } 758 | .icon-globe:before { 759 | content: "\e091"; 760 | } 761 | .icon-github-circled:before { 762 | content: "\e092"; 763 | } 764 | .icon-flickr:before { 765 | content: "\e093"; 766 | } 767 | .icon-flattr:before { 768 | content: "\e094"; 769 | } 770 | .icon-github:before { 771 | content: "\e095"; 772 | } 773 | .icon-gauge:before { 774 | content: "\e096"; 775 | } 776 | .icon-flashlight:before { 777 | content: "\e097"; 778 | } 779 | .icon-forward:before { 780 | content: "\e099"; 781 | } 782 | .icon-flash:before { 783 | content: "\e098"; 784 | } 785 | .icon-folder:before { 786 | content: "\e09a"; 787 | } 788 | .icon-flag:before { 789 | content: "\e09b"; 790 | } 791 | .icon-feather:before { 792 | content: "\e09c"; 793 | } 794 | .icon-flow-tree:before { 795 | content: "\e09d"; 796 | } 797 | .icon-flow-parallel:before { 798 | content: "\e09e"; 799 | } 800 | .icon-fast-forward:before { 801 | content: "\e09f"; 802 | } 803 | .icon-fast-backward:before { 804 | content: "\e0a0"; 805 | } 806 | .icon-flow-line:before { 807 | content: "\e0a1"; 808 | } 809 | .icon-flow-cascade:before { 810 | content: "\e0a2"; 811 | } 812 | .icon-facebook-squared:before { 813 | content: "\e0a3"; 814 | } 815 | .icon-down-thin:before { 816 | content: "\e0a4"; 817 | } 818 | .icon-doc-text:before { 819 | content: "\e0a5"; 820 | } 821 | .icon-doc-text-inv:before { 822 | content: "\e0a6"; 823 | } 824 | .icon-download:before { 825 | content: "\e0a7"; 826 | } 827 | .icon-dribbble:before { 828 | content: "\e0a8"; 829 | } 830 | .icon-docs:before { 831 | content: "\e0a9"; 832 | } 833 | .icon-dot:before { 834 | content: "\e0aa"; 835 | } 836 | .icon-dribbble-circled:before { 837 | content: "\e0ab"; 838 | } 839 | .icon-drive:before { 840 | content: "\e0ac"; 841 | } 842 | .icon-dot-2:before { 843 | content: "\e0ad"; 844 | } 845 | .icon-dot-3:before { 846 | content: "\e0ae"; 847 | } 848 | .icon-dropbox:before { 849 | content: "\e0af"; 850 | } 851 | .icon-droplet:before { 852 | content: "\e0b0"; 853 | } 854 | .icon-down:before { 855 | content: "\e0b1"; 856 | } 857 | .icon-down-bold:before { 858 | content: "\e0b2"; 859 | } 860 | .icon-erase:before { 861 | content: "\e0b3"; 862 | } 863 | .icon-evernote:before { 864 | content: "\e0b4"; 865 | } 866 | .icon-down-circled:before { 867 | content: "\e0b5"; 868 | } 869 | .icon-down-open:before { 870 | content: "\e0b6"; 871 | } 872 | .icon-down-dir:before { 873 | content: "\e0b7"; 874 | } 875 | .icon-export:before { 876 | content: "\e0b8"; 877 | } 878 | .icon-eye:before { 879 | content: "\e0b9"; 880 | } 881 | .icon-facebook:before { 882 | content: "\e0ba"; 883 | } 884 | .icon-down-open-big:before { 885 | content: "\e0bb"; 886 | } 887 | .icon-facebook-circled:before { 888 | content: "\e0bc"; 889 | } 890 | .icon-down-open-mini:before { 891 | content: "\e0bd"; 892 | } 893 | -------------------------------------------------------------------------------- /assets/entypo/fonts/entypo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kocisov/coffeebreak/3eb848804584dffeae6dc813260687e6b03c9849/assets/entypo/fonts/entypo.eot -------------------------------------------------------------------------------- /assets/entypo/fonts/entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kocisov/coffeebreak/3eb848804584dffeae6dc813260687e6b03c9849/assets/entypo/fonts/entypo.ttf -------------------------------------------------------------------------------- /assets/entypo/fonts/entypo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kocisov/coffeebreak/3eb848804584dffeae6dc813260687e6b03c9849/assets/entypo/fonts/entypo.woff -------------------------------------------------------------------------------- /assets/entypo/icons-reference.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Font Reference - Entypo 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Entypo

15 |

This font was created withFontastic

16 |

CSS mapping

17 | 1155 |

Character mapping

1156 | 2294 |
2295 | 2311 | 2312 | -------------------------------------------------------------------------------- /components/App.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 168 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { sync } from 'vuex-router-sync' 3 | import App from './components/App.vue' 4 | import router from './router' 5 | import store from './store' 6 | import './assets/entypo/entypo.css' 7 | 8 | sync(store, router) 9 | 10 | const app = new Vue({ 11 | router, 12 | store, 13 | ...App, 14 | }) 15 | 16 | app.$mount('#app') 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coffeebreak", 3 | "description": "Tool for live editing CSS written in Vue", 4 | "version": "0.2.0", 5 | "author": "kocisov", 6 | "bugs": { 7 | "url": "https://github.com/kocisov/coffeebreak/issues" 8 | }, 9 | "dependencies": { 10 | "cssbeautify": "^0.3.1", 11 | "vue-router": "^3.0.1", 12 | "vuex": "^3.0.0", 13 | "vuex-router-sync": "^5.0.0" 14 | }, 15 | "devDependencies": { 16 | "poi": "^9.3.10" 17 | }, 18 | "homepage": "https://github.com/kocisov/coffeebreak#readme", 19 | "keywords": [ 20 | "CSS", 21 | "Components", 22 | "Create", 23 | "Edit", 24 | "Javascript", 25 | "Live", 26 | "Tool", 27 | "Vue" 28 | ], 29 | "license": "MIT", 30 | "main": "index.js", 31 | "repository": { 32 | "type": "git", 33 | "url": "git+https://github.com/kocisov/coffeebreak.git" 34 | }, 35 | "scripts": { 36 | "build": "poi build", 37 | "start": "poi" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Create from '../views/Create' 4 | import Get from '../views/Get' 5 | 6 | Vue.use(Router) 7 | 8 | export default new Router({ 9 | mode: 'history', 10 | routes: [ 11 | { 12 | path: '/', 13 | component: Create, 14 | }, 15 | { 16 | path: '/get', 17 | component: Get, 18 | }, 19 | ], 20 | }) 21 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import bet from 'cssbeautify' 4 | 5 | Vue.use(Vuex) 6 | 7 | const state = { 8 | styles: [], 9 | } 10 | 11 | const mutations = { 12 | CREATE_STYLE(state, action) { 13 | state.styles.push({ 14 | name: action.name, 15 | content: action.style, 16 | }) 17 | }, 18 | CLEAR_STYLES(state) { 19 | state = { 20 | styles: [], 21 | } 22 | }, 23 | } 24 | 25 | const actions = { 26 | CREATE_STYLE(store, payload) { 27 | store.commit('CREATE_STYLE', payload) 28 | }, 29 | } 30 | 31 | const getters = { 32 | fullStyle: state => 33 | bet( 34 | `/* Generated by Coffeebreak v0.2 */ 35 | ${state.styles.map(style => `.${style.name} {${style.content}}`)}`, 36 | { 37 | indent: ' ', 38 | } 39 | ), 40 | } 41 | 42 | export default new Vuex.Store({ 43 | state, 44 | mutations, 45 | actions, 46 | getters, 47 | }) 48 | -------------------------------------------------------------------------------- /views/Create.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 119 | 120 | 165 | -------------------------------------------------------------------------------- /views/Get.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 43 | 44 | 50 | --------------------------------------------------------------------------------