├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── blank.yml ├── .gitignore ├── .markdownlint.ignore ├── .markdownlint.json ├── .prettierignore ├── .prettierrc ├── .stylelintignore ├── .travis.yml ├── .vscode ├── extensions.json ├── launch.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── TODO.md ├── _config.yml ├── babel.config.js ├── commitlint.config.js ├── dist ├── VueCssDoodle.common.js ├── VueCssDoodle.css ├── VueCssDoodle.umd.js └── VueCssDoodle.umd.min.js ├── docs ├── android-chrome-144x144.png ├── android-chrome-96x96.png ├── apple-touch-icon-57x57-precomposed.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-60x60-precomposed.png ├── apple-touch-icon-60x60.png ├── apple-touch-icon-72x72-precomposed.png ├── apple-touch-icon-72x72.png ├── apple-touch-icon-76x76-precomposed.png ├── apple-touch-icon-76x76.png ├── apple-touch-icon-precomposed.png ├── apple-touch-icon.png ├── browserconfig.xml ├── css │ ├── app.1dec7612.css │ └── chunk-vendors.883ea51b.css ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── favicon.png ├── humans.txt ├── img │ └── lighthouse-audit.91ed377c.jpg ├── index.html ├── js │ ├── app-legacy.2d7f44cf.js │ ├── app.f68a7ff0.js │ ├── chunk-vendors-legacy.b8ca30c8.js │ └── chunk-vendors.770cc8cf.js ├── mstile-150x150.png ├── mstile-310x150.png ├── mstile-70x70.png ├── og-image.jpg ├── robots.txt ├── safari-pinned-tab.svg └── site.webmanifest ├── husky.config.js ├── jest.config.js ├── lighthouse-audit.jpg ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── android-chrome-144x144.png ├── android-chrome-96x96.png ├── apple-touch-icon-57x57-precomposed.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-60x60-precomposed.png ├── apple-touch-icon-60x60.png ├── apple-touch-icon-72x72-precomposed.png ├── apple-touch-icon-72x72.png ├── apple-touch-icon-76x76-precomposed.png ├── apple-touch-icon-76x76.png ├── apple-touch-icon-precomposed.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── favicon.png ├── humans.txt ├── index.html ├── mstile-150x150.png ├── mstile-310x150.png ├── mstile-70x70.png ├── og-image.jpg ├── robots.txt ├── safari-pinned-tab.svg └── site.webmanifest ├── renovate.json ├── src ├── VApp │ ├── VApp.vue │ ├── demo.scss │ ├── index.js │ └── style.scss ├── VueCssDoodle │ ├── VueCssDoodle.vue │ ├── index.js │ └── style.scss ├── library.js ├── main.js └── main.scss ├── stylelint.config.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.yml] 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | docs/ 3 | 4 | bower_components/ 5 | node_modules/ 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module', 6 | }, 7 | extends: [ 8 | '@nuxtjs', 9 | '@vue/prettier', 10 | 'eslint:recommended', 11 | 'plugin:nuxt/recommended', 12 | 'plugin:vue/recommended', 13 | ], 14 | plugins: [ 15 | 'standard', 16 | 'compat', 17 | 'import', 18 | 'promise', 19 | 'unicorn', 20 | ], 21 | rules: { 22 | 'indent': 'off', 23 | 'no-console': [ 24 | 'warn', 25 | { 26 | allow: [ 27 | 'info', 28 | 'error', 29 | ], 30 | } 31 | ], 32 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn', 33 | 'one-var': [ 34 | 'warn', 35 | { 36 | separateRequires: true, 37 | var: 'consecutive', 38 | let: 'consecutive', 39 | const: 'consecutive', 40 | } 41 | ], 42 | 'spaced-comment': [ 'warn', 'always' ], 43 | 'function-call-argument-newline': [ 'warn', 'always' ], 44 | 'prefer-const': 'warn', 45 | 'no-useless-rename': [ 46 | 'warn', 47 | { 48 | ignoreExport: true, 49 | }, 50 | ], 51 | 'rest-spread-spacing': [ 52 | 'warn', 53 | 'always', 54 | ], 55 | 'template-curly-spacing': [ 56 | 'warn', 57 | 'always', 58 | ], 59 | 'array-element-newline': [ 60 | 'warn', 61 | { 62 | minItems: 2, 63 | multiline: true, 64 | } 65 | ], 66 | 'array-bracket-newline': [ 67 | 'warn', 68 | { 69 | minItems: 2, 70 | multiline: true, 71 | } 72 | ], 73 | 'function-paren-newline': [ 74 | 'warn', 75 | { 76 | minItems: 1, 77 | } 78 | ], 79 | 'brace-style': [ 80 | 'warn', 81 | '1tbs', 82 | { 83 | allowSingleLine: true, 84 | } 85 | ], 86 | 'comma-style': [ 87 | 'warn', 88 | 'first', 89 | { 90 | exceptions: { 91 | ArrayExpression: true, 92 | ObjectExpression: true, 93 | } 94 | } 95 | ], 96 | 'comma-spacing': [ 97 | 'warn', 98 | { 99 | before: false, 100 | after: true, 101 | } 102 | ], 103 | quotes: [ 104 | 'warn', 105 | 'single', 106 | { 107 | avoidEscape: true, 108 | allowTemplateLiterals: true, 109 | } 110 | ], 111 | semi: [ 112 | 'warn', 113 | 'always', 114 | ], 115 | 'no-unreachable': 'warn', 116 | 'no-confusing-arrow': 'warn', 117 | 'no-constant-condition': 'warn', 118 | curly: [ 119 | 'warn', 120 | 'multi-or-nest', 121 | ], 122 | 'padding-line-between-statements': [ 123 | 'warn', 124 | { 125 | blankLine: 'always', 126 | prev: [ 127 | 'const', 128 | 'let', 129 | 'var', 130 | ], 131 | next: '*', 132 | }, 133 | { 134 | blankLine: 'any', 135 | prev: [ 136 | 'const', 137 | 'let', 138 | 'var', 139 | ], 140 | next: [ 141 | 'const', 142 | 'let', 143 | 'var', 144 | ] 145 | } 146 | ], 147 | 'no-empty': 'warn', 148 | 'no-return-await': 'warn', 149 | 'no-multiple-empty-lines': [ 150 | 'warn', 151 | { 152 | max: 1, 153 | maxEOF: 1, 154 | maxBOF: 1, 155 | } 156 | ], 157 | 'lines-around-comment': [ 158 | 'warn', 159 | { 160 | beforeBlockComment: false, 161 | afterBlockComment: false, 162 | beforeLineComment: false, 163 | afterLineComment: false, 164 | allowBlockStart: true, 165 | allowBlockEnd: true, 166 | allowObjectStart: true, 167 | allowObjectEnd: true, 168 | allowArrayStart: true, 169 | allowArrayEnd: true, 170 | } 171 | ], 172 | 'no-inner-declarations': [ 173 | 'warn', 174 | 'functions', 175 | ], 176 | 'no-tabs': 'warn', 177 | 'operator-linebreak': [ 178 | 'warn', 179 | 'before', 180 | ], 181 | 'block-spacing': [ 182 | 'warn', 183 | 'always', 184 | ], 185 | 'dot-location': [ 186 | 'warn', 187 | 'property', 188 | ], 189 | 'func-call-spacing': [ 190 | 'warn', 191 | 'never', 192 | ], 193 | 'key-spacing': [ 194 | 'warn', 195 | { 196 | beforeColon: false, 197 | } 198 | ], 199 | 'new-cap': [ 200 | 'warn', 201 | { 202 | newIsCap: true, 203 | } 204 | ], 205 | 'no-duplicate-imports': [ 206 | 'warn', 207 | { 208 | includeExports: true, 209 | } 210 | ], 211 | 'no-floating-decimal': 'warn', 212 | 'no-multi-spaces': 'warn', 213 | 'no-return-assign': [ 214 | 'warn', 215 | 'except-parens', 216 | ], 217 | 'require-await': 'warn', 218 | 'no-undef': 'warn', 219 | 'no-undef-init': 'warn', 220 | 'no-whitespace-before-property': 'warn', 221 | 'object-property-newline': [ 222 | 'warn', 223 | { 224 | allowAllPropertiesOnSameLine: false, 225 | } 226 | ], 227 | 'object-curly-newline': [ 228 | 'warn', 229 | { 230 | ObjectExpression: { 231 | multiline: true, 232 | minProperties: 1, 233 | }, 234 | ObjectPattern: { 235 | multiline: true, 236 | minProperties: 2, 237 | }, 238 | ImportDeclaration: { 239 | multiline: true, 240 | consistent: false, 241 | minProperties: 3, 242 | }, 243 | ExportDeclaration: { 244 | multiline: true, 245 | consistent: false, 246 | minProperties: 2, 247 | } 248 | } 249 | ], 250 | 'padded-blocks': [ 251 | 'warn', 252 | { 253 | switches: 'never', 254 | blocks: 'always', 255 | } 256 | ], 257 | 'yield-star-spacing': [ 258 | 'warn', 259 | 'both', 260 | ], 261 | 'one-var-declaration-per-line': [ 262 | 'warn', 263 | 'always', 264 | ], 265 | 'space-infix-ops': 'warn', 266 | 'require-atomic-updates': 'warn', 267 | 'comma-dangle': [ 268 | 'warn', 269 | { 270 | arrays: 'always-multiline', 271 | objects: 'always-multiline', 272 | exports: 'always-multiline', 273 | imports: 'always-multiline', 274 | functions: 'only-multiline', 275 | } 276 | ], 277 | 'dot-notation': 'warn', 278 | 'eqeqeq': [ 'warn', 'always' ], 279 | 'camelcase': [ 280 | 'off', 281 | { 282 | ignoreDestructuring: true, 283 | }, 284 | ], 285 | 'no-prototype-builtins': 'warn', 286 | 'no-extra-semi': 'warn', 287 | 'no-new-object': 'warn', 288 | 'no-array-constructor': 'warn', 289 | 'no-new-wrappers': 'warn', 290 | 'no-mixed-spaces-and-tabs': 'warn', 291 | 'space-before-function-paren': [ 292 | 'warn', 293 | 'never', 294 | ], 295 | 'space-before-blocks': 'warn', 296 | 'array-bracket-spacing': [ 297 | 'warn', 298 | 'always', 299 | { 300 | singleValue: true, 301 | objectsInArrays: false, 302 | arraysInArrays: true, 303 | } 304 | ], 305 | 'computed-property-spacing': [ 306 | 'warn', 307 | 'always' 308 | ], 309 | 'space-in-parens': [ 310 | 1, 311 | 'always' 312 | ], 313 | 'object-curly-spacing': [ 314 | 'warn', 315 | 'always' 316 | ], 317 | 'keyword-spacing': [ 318 | 'warn', 319 | { 320 | after: false, 321 | overrides: { 322 | const: { 323 | after: true, 324 | }, 325 | else: { 326 | before: true, 327 | after: true, 328 | }, 329 | from: { 330 | before: true, 331 | after: true, 332 | }, 333 | return: { 334 | after: true, 335 | }, 336 | default: { 337 | after: true, 338 | }, 339 | export: { 340 | after: true, 341 | }, 342 | import: { 343 | after: true, 344 | }, 345 | case: { 346 | after: true, 347 | }, 348 | try: { 349 | after: true, 350 | }, 351 | catch: { 352 | before: true, 353 | after: false, 354 | } 355 | } 356 | } 357 | ], 358 | 'arrow-parens': [ 359 | 'warn', 360 | 'as-needed' 361 | ], 362 | 'no-irregular-whitespace': 'warn', 363 | 'space-unary-ops': [ 364 | 'warn', 365 | { 366 | words: true, 367 | nonwords: true, 368 | } 369 | ], 370 | 'arrow-spacing': [ 371 | 1, 372 | { 373 | before: true, 374 | after: true, 375 | } 376 | ], 377 | 'object-shorthand': [ 378 | 'warn', 379 | 'always', 380 | ], 381 | 'no-unused-vars': [ 382 | 'warn', 383 | { 384 | vars: 'all', 385 | args: 'after-used', 386 | ignoreRestSiblings: true, 387 | caughtErrors: 'all', 388 | argsIgnorePattern: '^_', 389 | } 390 | ], 391 | 'max-len': [ 392 | 'warn', 393 | 300, 394 | 4, 395 | { 396 | ignoreUrls: true, 397 | ignoreTemplateLiterals: true, 398 | ignoreStrings: true, 399 | } 400 | ], 401 | 'max-statements': [ 402 | 'warn', 403 | 72, 404 | { 405 | ignoreTopLevelFunctions: true, 406 | } 407 | ], 408 | 'lines-between-class-members': [ 409 | 'warn', 410 | 'always', 411 | { 412 | exceptAfterSingleLine: true, 413 | } 414 | ], 415 | // Plugins 416 | // Standard 417 | 'unicorn/prefer-includes': 'warn', 418 | 'standard/computed-property-even-spacing': [ 419 | 'warn', 420 | 'always', 421 | ], 422 | 'standard/object-curly-even-spacing': [ 423 | 'warn', 424 | 'either', 425 | ], 426 | // Import 427 | 'import/order': 'warn', 428 | 'import/first': 'warn', 429 | 'import/namespace': [ 430 | 'warn', 431 | { 432 | allowComputed: true, 433 | } 434 | ], 435 | // Compat 436 | 'compat/compat': 'warn', 437 | // Vuejs 438 | 'vue/require-default-prop': 'warn', 439 | 'vue/require-prop-types': 'warn', 440 | 'vue/no-v-html': 'off', 441 | 'vue/no-unused-vars': 'warn', 442 | 'vue/no-unused-components': 'warn', 443 | 'vue/no-use-v-if-with-v-for': [ 444 | 'warn', 445 | { 446 | allowUsingIterationVar: true, 447 | } 448 | ], 449 | 'vue/component-name-in-template-casing': [ 450 | 'warn', 451 | 'kebab-case', 452 | ], 453 | 'vue/name-property-casing': [ 454 | 'warn', 455 | 'kebab-case' 456 | ], 457 | 'vue/multiline-html-element-content-newline': [ 458 | 'warn', 459 | { 460 | ignoreWhenEmpty: false, 461 | allowEmptyLines: true, 462 | } 463 | ], 464 | 'vue/attribute-hyphenation': [ 465 | 'warn', 466 | 'always' 467 | ], 468 | 'vue/max-attributes-per-line': [ 469 | 'warn', 470 | { 471 | 'singleline': 2, 472 | 'multiline': { 473 | 'max': 1, 474 | 'allowFirstLine': false 475 | } 476 | } 477 | ], 478 | 'vue/html-end-tags': 'warn', 479 | 'vue/html-indent': [ 480 | 'warn', 481 | 4 482 | ], 483 | 'vue/html-self-closing': 'warn', 484 | 'vue/attributes-order': 'warn', 485 | 'vue/html-quotes': [ 486 | 'warn', 487 | 'double' 488 | ], 489 | 'vue/order-in-components': 'warn', 490 | 'vue/html-closing-bracket-newline': [ 491 | 'warn', 492 | { 493 | singleline: 'never', 494 | multiline: 'always' 495 | } 496 | ], 497 | 'vue/html-closing-bracket-spacing': [ 498 | 'warn', 499 | { 500 | startTag: 'never', 501 | endTag: 'never', 502 | selfClosingTag: 'always' 503 | } 504 | ], 505 | 'vue/script-indent': [ 506 | 'warn', 507 | 4, 508 | { 509 | baseIndent: 1 510 | } 511 | ], 512 | }, 513 | }; 514 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | patreon: luxdamore 4 | open_collective: luca-iaconelli 5 | ko_fi: luxdamore 6 | liberapay: luxdamore 7 | issuehunt: luxdamore 8 | otechie: luxdamore 9 | custom: ['https://www.paypal.me/luxdamore'] 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/blank.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v1 12 | - name: Run a one-line script 13 | run: echo Hello, world! 14 | - name: Run a multi-line script 15 | run: | 16 | echo Add other actions to build, 17 | echo test, and deploy your project. 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Common 2 | .DS_Store 3 | .env 4 | desktop.ini 5 | node_modules/ 6 | bower_components/ 7 | 8 | # Library 9 | dist/demo.html 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | report.* 16 | *.heapsnapshot 17 | 18 | # Editor directories and files 19 | .idea 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | -------------------------------------------------------------------------------- /.markdownlint.ignore: -------------------------------------------------------------------------------- 1 | { 2 | "markdownlint.ignore": [ 3 | "CHANGELOG.md" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD013": false, 3 | "MD024": false, 4 | "MD036": false 5 | } 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | docs/ 3 | 4 | bower_components/ 5 | node_modules/ 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "bracketSpacing": true, 6 | "jsxBracketSameLine": true, 7 | "semi": true, 8 | "requirePragma": true, 9 | "insertPragma": true, 10 | "useTabs": false, 11 | "tabWidth": 4, 12 | "arrowParens": "avoid", 13 | "proseWrap": "preserve" 14 | } 15 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | docs/ 3 | 4 | bower_components/ 5 | node_modules/ 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '8' 4 | script: 5 | - npm run test 6 | - npm run publish 7 | branches: 8 | only: 9 | - master 10 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | // List of extensions which should be recommended for users of this workspace. 5 | "recommendations": [ 6 | "formulahendry.auto-close-tag", 7 | "formulahendry.auto-rename-tag", 8 | "kevinkyang.auto-comment-blocks", 9 | "dzannotti.vscode-babel-coloring", 10 | "editorconfig.editorconfig", 11 | "davidanson.vscode-markdownlint", 12 | "dbaeumer.vscode-eslint", 13 | "mohseenrm.lit-it", 14 | "mubaidr.vuejs-extension-pack", 15 | "jeremyrajan.webpack", 16 | "sysoev.language-stylus", 17 | "mikestead.dotenv", 18 | "eg2.vscode-npm-script", 19 | "wallabyjs.quokka-vscode", 20 | "mrmlnc.vscode-attrs-sorter", 21 | "wayou.vscode-todo-highlight", 22 | "jock.svg", 23 | "octref.vetur", 24 | "dariofuzinato.vue-peek", 25 | "christian-kohler.npm-intellisense", 26 | "sdras.vue-vscode-snippets", 27 | "redhat.vscode-yaml", 28 | "hookyqr.beautify", 29 | "wmaurer.change-case", 30 | "naumovs.color-highlight", 31 | "wix.vscode-import-cost", 32 | "xabikos.javascriptsnippets", 33 | "esbenp.prettier-vscode", 34 | "cssho.vscode-svgviewer", 35 | "dotjoshjohnson.xml", 36 | "cpylua.language-postcss", 37 | "donjayamanne.githistory", 38 | "eamodio.gitlens", 39 | "bradlc.vscode-tailwindcss", 40 | "kumar-harsh.graphql-for-vscode", 41 | "tombonnike.vscode-status-bar-format-toggle" 42 | ], 43 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 44 | "unwantedRecommendations": [] 45 | } 46 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "node", 6 | "request": "attach", 7 | "name": "Attach to Nuxt", 8 | "port": 9229, 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // CSS 3 | "css.validate": false, 4 | "less.validate": false, 5 | "scss.validate": false, 6 | "html.validate.styles": false, 7 | // ESLint 8 | "eslint.enable": true, 9 | "eslint.alwaysShowStatus": true, 10 | "eslint.options": { 11 | "extensions": [ 12 | ".js", 13 | ".vue" 14 | ] 15 | }, 16 | "stylelint.enable": true, 17 | // Vue 18 | "vetur.format.styleInitialIndent": true, 19 | "vetur.format.defaultFormatter.js": "prettier-eslint", 20 | "vetur.format.defaultFormatter.ts": "prettier-tslint", 21 | "prettier.singleQuote": true, 22 | "prettier.tabWidth": 4, 23 | "prettier.trailingComma": "all", 24 | "prettier.printWidth": 120, 25 | "prettier.jsxSingleQuote": true, 26 | // Colors 27 | "workbench.colorCustomizations": { 28 | "activityBar.background": "#65c89b", 29 | "activityBar.activeBorder": "#945bc4", 30 | "activityBar.foreground": "#15202b", 31 | "activityBar.inactiveForeground": "#15202b99", 32 | "activityBarBadge.background": "#945bc4", 33 | "activityBarBadge.foreground": "#e7e7e7", 34 | "titleBar.activeBackground": "#42b883", 35 | "titleBar.inactiveBackground": "#42b88399", 36 | "titleBar.activeForeground": "#15202b", 37 | "titleBar.inactiveForeground": "#15202b99", 38 | "statusBar.background": "#42b883", 39 | "statusBarItem.hoverBackground": "#359268", 40 | "statusBar.foreground": "#15202b" 41 | }, 42 | "peacock.color": "#42b883", 43 | "cSpell.words": [ 44 | "iaconelli", 45 | "lerps", 46 | "luxdamore", 47 | "otechie", 48 | "patreon", 49 | "paypal", 50 | "preload", 51 | "tympanus" 52 | ], 53 | "editor.codeActionsOnSave": { 54 | "source.fixAll.eslint": true 55 | }, 56 | "markdownlint.ignore": [ 57 | "CHANGELOG.md" 58 | ], 59 | "cSpell.ignoreWords": [ 60 | "commitlint", 61 | "hljs", 62 | "multicolumn", 63 | "navbutton" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [1.0.1](https://github.com/LuXDAmore/vue-css-doodle/compare/v1.0.0...v1.0.1) (2020-01-08) 6 | 7 | ### [0.0.7](https://github.com/LuXDAmore/vue-css-doodle/compare/v0.0.6...v0.0.7) (2020-01-08) 8 | 9 | 10 | ### Features 11 | 12 | * accessibility, added title ([a71b5c6](https://github.com/LuXDAmore/vue-css-doodle/commit/a71b5c6ba622e7a37a6d3e436ebfd8e99b67d9e8)) 13 | * webpack-lightouhse-cli ([2db2684](https://github.com/LuXDAmore/vue-css-doodle/commit/2db2684f48cc23078748edba6360b70b9a8b6b72)) 14 | 15 | ### [0.0.6](https://github.com/LuXDAmore/vue-css-doodle/compare/v0.0.5...v0.0.6) (2020-01-08) 16 | 17 | 18 | ### Features 19 | 20 | * build before release ([2096139](https://github.com/LuXDAmore/vue-css-doodle/commit/2096139d45a9e306a5b07ab40be900ac27b59c54)) 21 | * compilerOptions ([6c478f4](https://github.com/LuXDAmore/vue-css-doodle/commit/6c478f48cf4a644f52ca5b0a040274c02bc82be4)) 22 | 23 | ### [0.0.5](https://github.com/LuXDAmore/vue-css-doodle/compare/v0.0.4...v0.0.5) (2020-01-08) 24 | 25 | ### [0.0.4](https://github.com/LuXDAmore/vue-css-doodle/compare/v0.0.3...v0.0.4) (2020-01-08) 26 | 27 | 28 | ### Features 29 | 30 | * check lint before build ([1e1e7c2](https://github.com/LuXDAmore/vue-css-doodle/commit/1e1e7c29de656b2854fd04cf13c72f85dc2629ba)) 31 | 32 | ### [0.0.3](https://github.com/LuXDAmore/vue-css-doodle/compare/v0.0.2...v0.0.3) (2020-01-08) 33 | 34 | ### 0.0.2 (2020-01-08) 35 | 36 | ### Bug Fixes 37 | 38 | * css-doodle errors ([9c7ea02](https://github.com/LuXDAmore/vue-css-doodle/commit/9c7ea02e2bf5583ae07b25a9b60ab726a662db74)) 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Luca Iaconelli 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🎉 Vue Css Doodle 2 | 3 | > Porting of css-doodle to VueJs, a web component for drawing patterns with CSS 4 | 5 | [![npm version][npm-version-src]][npm-version-href] 6 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 7 | [![License][license-src]][license-href] 8 | 9 | ## Installation 10 | 11 | This package is available on npm. 12 | 13 | ```bash 14 | 15 | # Deps 16 | npm install --save @luxdamore/vue-css-doodle 17 | 18 | ``` 19 | 20 | ### Usage 21 | 22 | #### As a component 23 | 24 | ```js 25 | 26 | // Component 27 | import { VueCssDoodle } from '@luxdamore/vue-css-doodle'; 28 | import '@luxdamore/vue-css-doodle/dist/VueCssDoodle.css'; 29 | 30 | // Install 31 | Vue.component( 32 | VueCssDoodle.name, 33 | VueCssDoodle 34 | ); 35 | 36 | // Or in a .vue file 37 | export default { 38 | components: { 39 | 'vue-css-doodle': VueCssDoodle, 40 | }, 41 | }; 42 | 43 | // Add this line to your main.js 44 | Vue.config.ignoredElements = [ 'css-doodle' ]; 45 | 46 | ``` 47 | 48 | #### As a plugin 49 | 50 | ```js 51 | 52 | // Plugin 53 | import VueCssDoodle from '@luxdamore/vue-css-doodle'; 54 | import '@luxdamore/vue-css-doodle/dist/VueCssDoodle.css'; 55 | 56 | // Install 57 | Vue.use( 58 | VueCssDoodle 59 | ); 60 | 61 | ``` 62 | 63 | #### Browser's way 64 | 65 | ```html 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | ``` 99 | 100 | #### Markup 101 | 102 | ```html 103 | 104 | 105 | :doodle { 106 | @grid: 50x1 / 80%; 107 | } 108 | 109 | @place-cell: center; 110 | @size: calc(100% / @size * @i); 111 | 112 | transform: rotate(calc(@i * 5deg)); 113 | 114 | border-radius: 30%; 115 | border: 1px solid hsla( 116 | calc(10 + 4 * @i), 70%, 68%, @r.8 117 | ); 118 | 119 | 120 | ``` 121 | 122 | #### Integrations 123 | 124 | #### NuxtJS 125 | 126 | - Create a file in the `plugins` folder; 127 | - Name it `vue-css-doodle.client.js`; 128 | - Install it _as a plugin_; 129 | - Import it in the `nuxt.config.js` file as [*client side only*](https://nuxtjs.org/guide/plugins/#client-side-only). 130 | 131 | ### Options 132 | 133 | #### Slots 134 | 135 | ```bash 136 | 137 | # Available 138 | slot="default" # Add the content, it expose v-slot="{ generate }" method to refresh the doodle 139 | 140 | ``` 141 | 142 | #### Props 143 | 144 | | Attribute | Type | Default | Required | About | 145 | |:--------------------:|--------------------|:-------:|:--------:|-------------------------------------| 146 | | title | String | null | false | The title | 147 | | grid | String or Number | null | false | Value of `grid-attr` | 148 | | use | String | null | false | Value of `use-attr` | 149 | | height | String | null | false | Height of the doodle | 150 | | width | String | null | false | Width of the doodle | 151 | | mx-auto | Boolean | false | false | Add `margin-left|right-auto` to the doodle | 152 | | fit-width | Boolean | false | false | Force the doodle to fit in a `max-width` | 153 | | fit-height | Boolean | false | false | Force the doodle to fit in a `max-height` | 154 | | fill-height | Boolean | false | false | Expand the doodle to an `height of 100%` | 155 | | click-to-update | Boolean | false | false | Refresh on click | 156 | | overflow-hidden | Boolean | false | false | Add `overflow-hidden` to the container | 157 | | absolute | Boolean | false | false | Set position to `absolute` | 158 | 159 | Check the [DOCS for more information](https://css-doodle.com/#usage). 160 | ___ 161 | 162 | [npm-version-src]: https://img.shields.io/npm/v/@luxdamore/vue-css-doodle/latest.svg?style=flat-square 163 | [npm-version-href]: https://npmjs.com/package/@luxdamore/vue-css-doodle 164 | 165 | [npm-downloads-src]: https://img.shields.io/npm/dt/@luxdamore/vue-css-doodle.svg?style=flat-square 166 | [npm-downloads-href]: https://npmjs.com/package/@luxdamore/vue-css-doodle 167 | 168 | [license-src]: https://img.shields.io/npm/l/@luxdamore/vue-css-doodle.svg?style=flat-square 169 | [license-href]: https://npmjs.com/package/@luxdamore/vue-css-doodle 170 | 171 | ## 🐞 Issues 172 | 173 | Please make sure to read the [Issue Reporting Checklist](/.github/ISSUE_TEMPLATE/bug_report.md) before opening an issue. Issues not conforming to the guidelines may be closed immediately. 174 | 175 | ## 👥 Contribution 176 | 177 | Please make sure to read the [Contributing Guide](/.github/ISSUE_TEMPLATE/feature_request.md) before making a pull request. 178 | 179 | ## 📖 Changelog 180 | 181 | Details changes for each release are documented in the [**release notes**](./CHANGELOG.md). 182 | 183 | ### 📃 License 184 | 185 | [MIT License](./LICENSE) // Copyright (©) 2019-present [Luca Iaconelli](https://lucaiaconelli.it) 186 | 187 | ___ 188 | 189 | #### 💸 Are you feeling generous today? :) 190 | 191 | Do you want to share a beer? We can be good friends.. __[Paypal](https://www.paypal.me/luxdamore) // [Patreon](https://www.patreon.com/luxdamore)__ 192 | 193 | > _It's always a good day to be magnanimous - cit_ 194 | 195 | #### 💼 Hire me 196 | 197 | [![Otechie](https://api.otechie.com/consultancy/luxdamore/badge.svg)](https://otechie.com/luxdamore) 198 | 199 | [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/luxdamore) 200 | 201 | #### 💘 Inspired by 202 | 203 | A web component for drawing patterns with CSS, [css-doodle](https://css-doodle.com) 204 | 205 | > Check the [full list of doodle on Codepen](https://codepen.io/collection/XyVkpQ) 206 | 207 | ___ 208 | 209 | ##### 💡 Lighthouse 210 | 211 | ![Lighthouse audit score](./lighthouse-audit.jpg) 212 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | # TODO 2 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@vue/app', 5 | { 6 | useBuiltIns: false, 7 | }, 8 | ], 9 | ], 10 | }; 11 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ '@commitlint/config-conventional' ], 3 | }; 4 | -------------------------------------------------------------------------------- /dist/VueCssDoodle.css: -------------------------------------------------------------------------------- 1 | .vue-css-doodle--mx-auto>css-doodle[data-v-5c11e18e]{margin-right:auto;margin-left:auto}.vue-css-doodle--fill-height>css-doodle[data-v-5c11e18e]{height:100%}.vue-css-doodle--fit-width>css-doodle[data-v-5c11e18e]{max-width:100%}.vue-css-doodle--fit-height>css-doodle[data-v-5c11e18e]{max-height:100%}.vue-css-doodle--overflow-hidden[data-v-5c11e18e]{overflow:hidden}.vue-css-doodle--absolute[data-v-5c11e18e]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0} -------------------------------------------------------------------------------- /dist/VueCssDoodle.umd.min.js: -------------------------------------------------------------------------------- 1 | (function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["VueCssDoodle"]=t():e["VueCssDoodle"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s="fb15")}({1054:function(e,t,r){var n,i;(function(s){n=s,i="function"===typeof n?n.call(t,r,t,e):n,void 0===i||(e.exports=i)})((function(){"use strict";function e(e){let t=0,r=1,n=1;return{curr(r=0){return e[t+r]},end(){return e.length<=t},info(){return{index:t,col:r,line:n}},index(e){return void 0===e?t:t=e},next(){let i=e[t++];return"\n"==i?(n++,r=0):r++,i}}}function t(e){let t="",r=[],n=[],i={};while(!e.end()){let s=e.curr();if("("==s)r.push(s),t="";else if(")"==s||","==s){if(/^\-\-.+/.test(t)&&(i.name?(i.alternative||(i.alternative=[]),i.alternative.push({name:t})):i.name=t),")"==s){if("("!=r[r.length-1])throw new Error("bad match");r.pop()}","==s&&(r.length||(n.push(i),i={})),t=""}else/\s/.test(s)||(t+=s);e.next()}return r.length?[]:(i.name&&n.push(i),n)}function r(r){r=r.trim();let n=[];if(!/^var\(/.test(r))return n;let i=e(r);try{n=t(i)}catch(s){console.error(s&&s.message||"Bad variables.")}return n}function n(e){return Array.isArray(e)?e:[e]}function i(e,t="\n"){return(e||[]).join(t)}function s(e,t=1){return e[e.length-t]}function o(e){return e[0]}function l(e){return JSON.parse(JSON.stringify(e))}function u(e){let t=Array.from?Array.from(e):e.slice(),r=e.length;while(r){let e=~~(Math.random()*r--),n=t[r];t[r]=t[e],t[e]=n}return t}function a(e,t){return Array.prototype.flatMap?e.flatMap(t):e.reduce((e,r)=>e.concat(t(r)),[])}const c={func(e=""){return{type:"func",name:e,arguments:[]}},argument(){return{type:"argument",value:[]}},text(e=""){return{type:"text",value:e}},pseudo(e=""){return{type:"pseudo",selector:e,styles:[]}},cond(e=""){return{type:"cond",name:e,styles:[],arguments:[]}},rule(e=""){return{type:"rule",property:e,value:[]}},keyframes(e=""){return{type:"keyframes",name:e,steps:[]}},step(e=""){return{type:"step",name:e,styles:[]}}},h={white_space(e){return/[\s\n\t]/.test(e)},line_break(e){return/\n/.test(e)},number(e){return!isNaN(e)},pair(e){return['"',"(",")","'"].includes(e)},pair_of(e,t){return{'"':'"',"'":"'","(":")"}[e]==t}},p={"π":Math.PI,"∏":Math.PI};function f(e,{col:t,line:r}){console.error(`(at line ${r}, column ${t}) ${e}`)}function d(e){return e.trim().length?h.number(+e)?+e:e.trim():e}function y(e){return function(t,r){let n=t.index(),i="";while(!t.end()){let r=t.next();if(e(r))break;i+=r}return r&&t.index(n),i}}function g(e,t){let r=e=>/[^\w@]/.test(e);return y(r)(e,t)}function m(e){return y(e=>/[\s\{]/.test(e))(e)}function v(e,t){let r=e=>h.line_break(e)||"{"==e;return y(r)(e,t)}function b(e,t){let r,n=c.step();while(!e.end()){if("}"==(r=e.curr()))break;if(h.white_space(r))e.next();else{if(n.name.length){if(n.styles.push(C(e,t)),"}"==e.curr())break}else n.name=L(e);e.next()}}return n}function x(e,t){const r=[];let n;while(!e.end()){if("}"==(n=e.curr()))break;h.white_space(n)?e.next():(r.push(b(e,t)),e.next())}return r}function w(e,t){let r,n=c.keyframes();while(!e.end()){if("}"==(r=e.curr()))break;if(n.name.length){if("{"==r){e.next(),n.steps=x(e,t);break}e.next()}else if(g(e),n.name=m(e),!n.name.length){f("missing keyframes name",e.info());break}}return n}function _(e,t={}){e.next();while(!e.end()){let r=e.curr();if(t.inline){if("\n"==r)break}else if("*"==(r=e.curr())&&"/"==e.curr(1))break;e.next()}t.inline||(e.next(),e.next())}function k(e){let t,r="";while(!e.end()){if(":"==(t=e.curr()))break;h.white_space(t)||(r+=t),e.next()}return r}function $(e){let t,r=[],n=[],i=[],o="";while(!e.end()){if(t=e.curr(),/[\('"`]/.test(t)&&"\\"!==e.curr(-1))i.length&&"("!=t&&t===s(i)?i.pop():i.push(t),o+=t;else if("@"==t)n.length||(o=o.trimLeft()),o.length&&(n.push(c.text(o)),o=""),n.push(j(e));else if(/[,)]/.test(t))if(i.length)")"==t&&i.pop(),o+=t;else{if(o.length&&(n.length?n.push(c.text(o)):n.push(c.text(d(o))),o.startsWith("±"))){let e=o.substr(1),t=l(n);s(t).value="-"+e,r.push(z(t)),s(n).value=e}if(r.push(z(n)),[n,o]=[[],""],")"==t)break}else p[t]&&(t=p[t]),o+=t;e.next()}return r}function z(e){let t=e.map(e=>{if("text"==e.type&&"string"==typeof e.value){let t=String(e.value);t.includes("`")&&(e.value=t=t.replace(/`/g,'"')),e.value=t.replace(/\n+|\s+/g," ")}return e}),r=o(t)||{},n=s(t)||{};if("text"==r.type&&"text"==n.type){let e=o(r.value),t=s(n.value);"string"==typeof r.value&&"string"==typeof n.value&&h.pair(e)&&h.pair_of(e,t)&&(r.value=r.value.slice(1),n.value=n.value.slice(0,n.value.length-1))}return t}function S(e){let t="",r="";if(/\D$/.test(e))return{fname:e,extra:r};for(let n=e.length-1;n>=0;n--){let i=e[n];if(!/[\d.]/.test(i)){t=e.substring(0,n+1);break}r=i+r}return{fname:t,extra:r}}function j(e){let t,r=c.func(),n="@",i=!1;e.next();while(!e.end()){t=e.curr();let s=e.curr(1);if("("==t){i=!0,e.next(),r.arguments=$(e);break}if(!i&&"("!==s&&!/[0-9a-zA-Z_\-.]/.test(s)){n+=t;break}n+=t,e.next()}let{fname:s,extra:o}=S(n);return r.name=s,o.length&&r.arguments.unshift([{type:"text",value:o}]),r.position=e.info().index,r}function E(e){let t,r=c.text(),n=0,i=!0;const s=[],o=[];s[n]=[];while(!e.end())if(t=e.curr(),i&&h.white_space(t))e.next();else{if(i=!1,"\n"!=t||h.white_space(e.curr(-1)))if(","!=t||o.length){if(/[;}]/.test(t)){r.value.length&&(s[n].push(r),r=c.text());break}"@"==t?(r.value.length&&(s[n].push(r),r=c.text()),s[n].push(j(e))):h.white_space(t)&&h.white_space(e.curr(-1))||("("==t&&o.push(t),")"==t&&o.pop(),p[t]&&(t=p[t]),r.value+=t)}else r.value.length&&(s[n].push(r),r=c.text()),s[++n]=[],i=!0;else r.value+=" ";e.next()}return r.value.length&&s[n].push(r),s}function L(e){let t,r="";while(!e.end()){if("{"==(t=e.curr()))break;h.white_space(t)||(r+=t),e.next()}return r}function O(e){let t,r={name:"",arguments:[]};while(!e.end()){if("("==(t=e.curr()))e.next(),r.arguments=$(e);else{if(/[){]/.test(t))break;h.white_space(t)||(r.name+=t)}e.next()}return r}function T(e,t){let r,n=c.pseudo();while(!e.end()){if("}"==(r=e.curr()))break;if(h.white_space(r))e.next();else{if(n.selector){let r=C(e,t);if("@use"==r.property?n.styles=n.styles.concat(r.value):n.styles.push(r),"}"==e.curr())break}else n.selector=L(e);e.next()}}return n}function C(e,t){let r,n=c.rule();while(!e.end()){if(";"==(r=e.curr()))break;if(n.property.length){n.value=E(e);break}if(n.property=k(e),"@use"==n.property){n.value=N(e,t);break}e.next()}return n}function A(e,t){let r,n=c.cond();while(!e.end()){if("}"==(r=e.curr()))break;if(n.name.length)if(":"==r){let t=T(e);t.selector&&n.styles.push(t)}else if("@"!=r||v(e,!0).includes(":")){if(!h.white_space(r)){let r=C(e,t);if(r.property&&n.styles.push(r),"}"==e.curr())break}}else n.styles.push(A(e));else Object.assign(n,O(e));e.next()}return n}function M(e,t){let r="";return e&&e.get_custom_property_value&&(r=e.get_custom_property_value(t)),r}function P(e,t){e.forEach&&e.forEach(e=>{if("text"==e.type&&e.value){let n=r(e.value);e.value=n.reduce((e,r)=>{let n,i="",s="";i=M(t,r.name),!i&&r.alternative&&r.alternative.every(e=>{if(s=M(t,e.name),s)return i=s,!1});try{n=H(i,t)}catch(o){}return n&&e.push.apply(e,n),e},[])}"func"==e.type&&e.arguments&&e.arguments.forEach(e=>{P(e,t)})})}function N(e,t){e.next();let r=E(e)||[];return r.reduce((e,r)=>{P(r,t);let[n]=r;return n.value&&n.value.length&&e.push(...n.value),e},[])}function H(t,r){const n=e(t),i=[];while(!n.end()){let e=n.curr();if(h.white_space(e))n.next();else{if("/"==e&&"*"==n.curr(1))_(n);else if("/"==e&&"/"==n.curr(1))_(n,{inline:!0});else if(":"==e){let e=T(n,r);e.selector&&i.push(e)}else if("@"==e&&"@keyframes"===g(n,!0)){let e=w(n,r);i.push(e)}else if("@"!=e||v(n,!0).includes(":")){if(!h.white_space(e)){let e=C(n,r);e.property&&i.push(e)}}else{let e=A(n,r);e.name.length&&i.push(e)}n.next()}}return i}function R(e,...t){return t.reduce((e,t)=>e.apply(null,n(t)),e)}function B(e,t,r){return Math.max(t,Math.min(r,e))}function I(e,t){return e?"function"===typeof t?t():t:""}function F(e,t,r){let n=0,i=e,s=e=>e>0&&e<1?.1:1,o=arguments.length;1==o&&([e,t]=[s(e),e]),o<3&&(r=s(e));let l=[];while(r>=0&&e<=t||r<0&&e>t)if(l.push(e),e+=r,n++>=1e3)break;return l.length||l.push(i),l}function U(e,t){return Object.keys(t).forEach(r=>{e[r]=e[t[r]]}),e}function W(e){return/^[a-zA-Z]$/.test(e)}function G(e){let t=()=>e;return t.lazy=!0,t}function V(e,t){let r=[];for(let n=0;n${e}`),e.includes("xmlns")||(e=e.replace(/])/,`e.concat(t),[]);return t[~~(Math.random()*t.length)]}function re(e=""){return e+Math.random().toString(32).substr(2)}function ne(e){return(...t)=>{let r=se(t);return ie(e,r).apply(null,t)}}function ie(e,t){return(...r)=>{r=r.map(e=>Number(String(e).replace(/\D+$/g,"")));let n=e.apply(null,r);return t.length?Array.isArray(n)?n.map(e=>e+t):n+t:n}}function se(e){let t="";return e.some(e=>{let r=String(e).trim();if(!r)return"";let n=r.match(/\d(\D+)$/);return t=n?n[1]:""}),t}function oe(e){return(...t)=>{let r=t.map(e=>String(e).charCodeAt(0)),n=e.apply(null,r);return Array.isArray(n)?n.map(e=>String.fromCharCode(e)):String.fromCharCode(n)}}function le(e){const t=ce(e),r=[];while(t.length){let e=t.shift();if(/\d+/.test(e))r.push(e);else{let t=r.pop(),n=r.pop();r.push(he(e,Number(n),Number(t)))}}return r[0]}const ue={"*":3,"/":3,"%":3,"+":2,"-":2,"(":1,")":1};function ae(e){let t=String(e),r=[],n="";for(let i=0;i=ue[o]){let e=r.pop();/[()]/.test(e)||n.push(e)}r.push(o)}}while(r.length)n.push(r.pop());return n}function he(e,t,r){switch(e){case"+":return t+r;case"-":return t-r;case"*":return t*r;case"/":return t/r;case"%":return t%r}}const pe={};function fe(e,t){return(...r)=>{let n=e+r.join("-");return pe[n]?pe[n]:pe[n]=t.apply(null,r)}}function de(e){return(...t)=>e.apply(null,a(t,e=>String(e).startsWith("[")?me(e):e))}function ye(e,t){return{type:e,value:t}}function ge(e){let t=String(e),r=[],n=[];if(!t.startsWith("[")||!t.endsWith("]"))return r;for(let i=1;i{let t=ge(e);return a(t,({type:e,value:t})=>{if("char"==e)return t;let[r,n]=t,i=!1;r>n&&([r,n]=[n,r],i=!0);let s=oe(F)(r,n);return i&&s.reverse(),s})});class ve{constructor(e){this.prev=this.next=null,this.data=e}}class be{constructor(e=20){this._limit=e,this._size=0}push(e){this._size>=this._limit&&(this.root=this.root.next,this.root.prev=null);let t=new ve(e);this.root?(t.prev=this.tail,this.tail.next=t,this.tail=t):this.root=this.tail=t,this._size++}last(e=1){let t=this.tail;while(--e){if(!t.prev)break;t=t.prev}return t.data}}const{cos:xe,sin:we,sqrt:_e,pow:ke,PI:$e}=Math,ze=$e/180;function Se(e,t){"function"==typeof arguments[0]&&(t=e,e={}),t||(t=e=>[xe(e),we(e)]);let r=e.split||120,n=e.scale||1,i=ze*(e.start||0),s=e.deg?e.deg*ze:$e/(r/2),o=[];for(let l=0;l[1.1*xe(e),1.1*we(e)+.2])},rhombus(){return Se({split:4})},pentagon(){return Se({split:5,start:54})},hexgon(){return Se({split:6,start:30})},hexagon(){return Se({split:6,start:30})},heptagon(){return Se({split:7,start:-90})},octagon(){return Se({split:8,start:22.5})},star(){return Se({split:5,start:54,deg:144})},diamond(){return"polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)"},cross(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"},clover(e=3){return e=B(e,3,5),4==e&&(e=2),Se({split:240},t=>{let r=xe(e*t)*xe(t),n=xe(e*t)*we(t);return 3==e&&(r-=.2),2==e&&(r/=1.1,n/=1.1),[r,n]})},hypocycloid(e=3){e=B(e,3,6);let t=1-e;return Se({scale:1/e},r=>{let n=t*xe(r)+xe(t*(r-$e)),i=t*we(r)+we(t*(r-$e));return 3==e&&(n=1.1*n-.6,i*=1.1),[n,i]})},astroid(){return Ee.hypocycloid(4)},infinity(){return Se(e=>{let t=.7*_e(2)*xe(e),r=ke(we(e),2)+1;return[t/r,t*we(e)/r]})},heart(){return Se(e=>{let t=.75*ke(we(e),3),r=xe(1*e)*(13/18)-xe(2*e)*(5/18)-xe(3*e)/18-xe(4*e)/18;return je(1.2*t,1.1*(r+.2),180)})},bean(){return Se(e=>{let[t,r]=[ke(we(e),3),ke(xe(e),3)];return je((t+r)*xe(e)*1.3-.45,(t+r)*we(e)*1.3-.45,-90)})},bicorn(){return Se(e=>je(xe(e),ke(we(e),2)/(2+we(e))-.5,180))},drop(){return Se(e=>je(we(e),(1+we(e))*xe(e)/1.4,90))},pear(){return Se(e=>[we(e),(1+we(e))*xe(e)/1.4])},fish(){return Se(e=>[xe(e)-ke(we(e),2)/_e(2),we(2*e)/2])},whale(){return Se({split:240},e=>{let t=3.4*(ke(we(e),2)-.5)*xe(e);return je(xe(e)*t+.75,we(e)*t*1.2,180)})},bud(e=3){return e=B(e,3,10),Se({split:240},t=>[(1+.2*xe(e*t))*xe(t)*.8,(1+.2*xe(e*t))*we(t)*.8])},alien(...e){let[t=1,r=1,n=1,i=1,s=1]=e.map(e=>B(e,1,9));return Se({split:480,type:"evenodd"},e=>[.31*(xe(e*t)+xe(e*n)+xe(e*s)),.31*(we(e*r)+we(e*i)+we(e))])}},Le={index({count:e}){return t=>e},row({x:e}){return t=>e},col({y:e}){return t=>e},depth({z:e}){return t=>e},size({grid:e}){return t=>e.count},["size-row"]({grid:e}){return t=>e.x},["size-col"]({grid:e}){return t=>e.y},["size-depth"]({grid:e}){return t=>e.z},id({x:e,y:t,z:r}){return n=>D(e,t,r)},n({extra:e}){return t=>e[0]||0},N({extra:e}){return t=>e[1]||0},repeat:Oe(""),multiple:Oe(","),["multiple-with-space"]:Oe(" "),pick({context:e}){return de((...t)=>Te(e,"last_pick",te(t)))},["pick-n"]({context:e,extra:t,position:r}){let n="pn-counter"+r;return de((...r)=>{e[n]||(e[n]=0),e[n]+=1;let i=r.length,[s]=t||[],o=((void 0===s?e[n]:s)-1)%i,l=r[o];return Te(e,"last_pick",l)})},["pick-d"]({context:e,extra:t,position:r}){let n="pd-counter"+r,i="pd-values"+r;return de((...r)=>{e[n]||(e[n]=0),e[n]+=1,e[i]||(e[i]=u(r));let s=r.length,[o]=t||[],l=((void 0===o?e[n]:o)-1)%s,a=e[i][l];return Te(e,"last_pick",a)})},["last-pick"]({context:e}){return(t=1)=>{let r=e.last_pick;return r?r.last(t):""}},rand({context:e}){return(...t)=>{let r=t.every(W)?oe:ne,n=r(ee).apply(null,t);return Te(e,"last_rand",n)}},["rand-int"]({context:e}){return(...t)=>{let r=t.every(W)?oe:ne,n=parseInt(r(ee).apply(null,t));return Te(e,"last_rand",n)}},["last-rand"]({context:e}){return(t=1)=>{let r=e.last_rand;return r?r.last(t):""}},calc(){return e=>le(e)},hex(){return e=>parseInt(e).toString(16)},svg:G(e=>{if(void 0===e)return"";let t=K(e().trim());return Y(t)}),["svg-filter"]:G(e=>{if(void 0===e)return"";let t=re("filter-"),r=K(e().trim()).replace(/])/,``var(${e})`},shape(){return memo("shape-function",(e="",...t)=>(e=e.trim(),"function"===typeof Ee[e]?Ee[e](t):""))}};function Oe(e){return G((t,r)=>{if(!r||!t)return"";let n=B(t(),0,65536);return V(n,e=>r(e+1,n)).join(e)})}function Te(e,t,r){return e[t]||(e[t]=new be),e[t].push(r),r}var Ce=U(Le,{m:"multiple",ms:"multiple-with-space",r:"rand",ri:"rand-int",lr:"last-rand",p:"pick",pn:"pick-n",pd:"pick-d",lp:"last-pick",rep:"repeat",i:"index",x:"row",y:"col",z:"depth",s:"size",sx:"size-row",sy:"size-col",sz:"size-depth","size-x":"size-row","size-y":"size-col","size-z":"size-depth",multi:"multiple","pick-by-turn":"pick-n","max-row":"size-row","max-col":"size-col"});const Ae=e=>/[,，\s]/.test(e);function Me(e){while(!e.end()){if(!Ae(e.curr(1)))break;e.next()}}function Pe(t){const r=e(t),n=[],i=[];let s="";while(!r.end()){let e=r.curr();"("==e?(s+=e,i.push(e)):")"==e?(s+=e,i.length&&i.pop()):i.length?s+=e:Ae(e)?(n.push(s),s="",Me(r)):s+=e,r.next()}return s&&n.push(s),n}let Ne=[];function He(e){if(!Ne.length){let e=new Set;for(let t in document.head.style)t.startsWith("-")||e.add(t.replace(/[A-Z]/g,"-$&").toLowerCase());e.has("grid-gap")||e.add("grid-gap"),Ne=Array.from(e)}return e&&e.test?Ne.filter(t=>e.test(t)):Ne}function Re(e){let t=new RegExp(`\\-?${e}\\-?`);return He(t).map(e=>e.replace(t,"")).reduce((e,t)=>(e[t]=t,e),{})}const Be=Re("webkit"),Ie=Re("moz");function Fe(e,t){return Be[e]?`-webkit-${t} ${t}`:Ie[e]?`-moz-${t} ${t}`:t}const Ue={"4a0":[1682,2378],"2a0":[1189,1682],a0:[841,1189],a1:[594,841],a2:[420,594],a3:[297,420],a4:[210,297],a5:[148,210],a6:[105,148],a7:[74,105],a8:[52,74],a9:[37,52],a10:[26,37],b0:[1e3,1414],b1:[707,1e3],b2:[500,707],b3:[353,500],b4:[250,353],b5:[176,250],b6:[125,176],b7:[88,125],b8:[62,88],b9:[44,62],b10:[31,44],b11:[22,32],b12:[16,22],c0:[917,1297],c1:[648,917],c2:[458,648],c3:[324,458],c4:[229,324],c5:[162,229],c6:[114,162],c7:[81,114],c8:[57,81],c9:[40,57],c10:[28,40],c11:[22,32],c12:[16,22],d0:[764,1064],d1:[532,760],d2:[380,528],d3:[264,376],d4:[188,260],d5:[130,184],d6:[92,126],letter:[216,279],legal:[216,356],"junior-legal":[203,127],ledger:[279,432],tabloid:[279,432],executive:[190,254],postcard:[100,148],"business-card":[54,90],poster:[390,540]},We={portrait:"p",pt:"p",p:"p",landscape:"l",ls:"l",l:"l"},Ge="mm";function Ve(e,t){e=String(e).toLowerCase();let[r,n]=Ue[e]||[];return"p"==We[t]&&([n,r]=[r,n]),[n,r].map(e=>e+Ge)}function De(e){return!!Ue[e]}var qe={["@size"](e,{is_special_selector:t}){let[r,n=r]=Pe(e);return De(r)&&([r,n]=Ve(r,n)),`\n width: ${r};\n height: ${n};\n ${t?"":`\n --internal-cell-width: ${r};\n --internal-cell-height: ${n};\n `}\n `},["@min-size"](e){let[t,r=t]=Pe(e);return`min-width: ${t}; min-height: ${r};`},["@max-size"](e){let[t,r=t]=Pe(e);return`max-width: ${t}; max-height: ${r};`},["@place-cell"]:(()=>{let e={center:"50%",0:"0%",left:"0%",right:"100%",top:"50%",bottom:"50%"},t={center:"50%",0:"0%",top:"0%",bottom:"100%",left:"50%",right:"50%"};return r=>{let[n,i="50%"]=Pe(r);n=e[n]||n,i=t[i]||i;const s="var(--internal-cell-width, 25%)",o="var(--internal-cell-height, 25%)";return`\n position: absolute;\n left: ${n};\n top: ${i};\n width: ${s};\n height: ${o};\n margin-left: calc(${s} / -2) !important;\n margin-top: calc(${o} / -2) !important;\n grid-area: unset !important;\n `}})(),["@grid"](e,t){let[r,n]=e.split("/").map(e=>e.trim());return{grid:J(r),size:n?this["@size"](n,t):""}},["@shape"]:fe("shape-property",e=>{let[t,...r]=Pe(e),n="clip-path";if(!Ee[t])return"";let i=`${n}: ${Ee[t].apply(null,r)};`;return Fe(n,i)+"overflow: hidden;"}),["@use"](e){if(e.length>2)return e}};function Xe(e){return t=>String(e).replace(/(\d+)(n)/g,"$1*"+t).replace(/n/g,t)}function Ze(e,t,r){let n=Xe(e);for(let i=0;i<=r;++i)if(le(n(i))==t)return!0}const Je={even:e=>!!(e%2),odd:e=>!(e%2)};function Ye(e){return/^(even|odd)$/.test(e)}var Ke={at({x:e,y:t}){return(r,n)=>e==r&&t==n},nth({count:e,grid:t}){return(...r)=>r.some(r=>Ye(r)?Je[r](e-1):Ze(r,e,t.count))},row({x:e,grid:t}){return(...r)=>r.some(r=>Ye(r)?Je[r](e-1):Ze(r,e,t.x))},col({y:e,grid:t}){return(...r)=>r.some(r=>Ye(r)?Je[r](e-1):Ze(r,e,t.y))},even({count:e}){return t=>Je.even(e-1)},odd({count:e}){return t=>Je.odd(e-1)},random(){return(e=.5)=>(e>=1&&e<=0&&(e=.5),Math.random()(e[t]=()=>(...e)=>"number"===typeof Math[t]?Math[t]:Math[t].apply(null,e.map(le)),e),{});function tt(e){return/^\:(host|doodle)/.test(e)}function rt(e){return/^\:(container|parent)/.test(e)}function nt(e){return tt(e)||rt(e)}function it(e){return void 0===e||null===e}class st{constructor(e){this.tokens=e,this.rules={},this.props={},this.keyframes={},this.grid=null,this.coords=[],this.reset()}reset(){this.styles={host:"",container:"",cells:"",keyframes:""},this.coords=[];for(let e in this.rules)e.startsWith("#cell")&&delete this.rules[e]}add_rule(e,t){let r=this.rules[e];r||(r=this.rules[e]=[]),r.push.apply(r,n(t))}pick_func(e){return Ce[e]||et[e]}compose_aname(...e){return e.join("-")}compose_selector({x:e,y:t,z:r},n=""){return`#${D(e,t,r)}${n}`}compose_argument(e,t,r=[]){let n=e.map(e=>{if("text"==e.type)return e.value;if("func"==e.type){let n=this.pick_func(e.name.substr(1));if(n){t.extra=r,t.position=e.position;let i=e.arguments.map(e=>n.lazy?(...r)=>this.compose_argument(e,t,r):this.compose_argument(e,t,r));return R(n,t,i)}}});return n.length>=2?n.join(""):n[0]}compose_value(e,t){return e&&e.reduce?e.reduce((e,r)=>{switch(r.type){case"text":e+=r.value;break;case"func":{let n=r.name.substr(1),i=this.pick_func(n);if(i){t.position=r.position;let n=r.arguments.map(e=>i.lazy?(...r)=>this.compose_argument(e,t,r):this.compose_argument(e,t)),s=R(i,t,n);it(s)||(e+=s)}}}return e},""):""}compose_rule(e,t,r){let n=Object.assign({},t),i=e.property,s=e.value.reduce((e,t)=>{let r=this.compose_value(t,n);return r&&e.push(r),e},[]),o=s.join(", ");if(/^animation(\-name)?$/.test(i)&&(this.props.has_animation=!0,n.count>1)){let{count:e}=n;switch(i){case"animation-name":o=s.map(t=>this.compose_aname(t,e)).join(", ");break;case"animation":o=s.map(t=>{let r=(t||"").split(/\s+/);return r[0]=this.compose_aname(r[0],e),r.join(" ")}).join(", ")}}"content"==i&&(/["']|^none$|^(var|counter|counters|attr)\(/.test(o)||(o=`'${o}'`)),"transition"==i&&(this.props.has_transition=!0);let l=`${i}: ${o};`;if(l=Fe(i,l),"clip-path"==i&&(l+=";overflow: hidden;"),"width"!=i&&"height"!=i||nt(r)||(l+=`--internal-cell-${i}: ${o};`),qe[i]){let t=qe[i](o,{is_special_selector:nt(r)});switch(i){case"@grid":tt(r)&&(this.grid=t.grid,l=t.size||"");break;case"@place-cell":tt(r)||(l=t);case"@use":e.value.length&&this.compose(n,e.value),l=qe[i](e.value);default:l=t}}return l}compose(e,t,r){this.coords.push(e),(t||this.tokens).forEach((t,n)=>{if(t.skip)return!1;if(r&&this.grid)return!1;switch(t.type){case"rule":this.add_rule(this.compose_selector(e),this.compose_rule(t,e));break;case"pseudo":{t.selector.startsWith(":doodle")&&(t.selector=t.selector.replace(/^\:+doodle/,":host"));let r=nt(t.selector);r&&(t.skip=!0),t.selector.split(",").forEach(n=>{let i=t.styles.map(t=>this.compose_rule(t,e,n)),s=r?n:this.compose_selector(e,n);this.add_rule(s,i)});break}case"cond":{let r=Ke[t.name.substr(1)];if(r){let n=t.arguments.map(t=>this.compose_argument(t,e)),i=R(r,e,n);i&&this.compose(e,t.styles)}break}case"keyframes":this.keyframes[t.name]||(this.keyframes[t.name]=e=>`\n ${i(t.steps.map(t=>`\n ${t.name} {\n ${i(t.styles.map(t=>this.compose_rule(t,e)))}\n }\n `))}\n `)}})}output(){Object.keys(this.rules).forEach((e,t)=>{if(rt(e))this.styles.container+=`\n .container {\n ${i(this.rules[e])}\n }\n `;else{let t=tt(e)?"host":"cells";this.styles[t]+=`\n ${e} {\n ${i(this.rules[e])}\n }\n `}});let e=Object.keys(this.keyframes);return this.coords.forEach((t,r)=>{e.forEach(e=>{let n=this.compose_aname(e,t.count);this.styles.keyframes+=`\n ${I(0==r,`@keyframes ${e} {\n ${this.keyframes[e](t)}\n }`)}\n @keyframes ${n} {\n ${this.keyframes[e](t)}\n }\n `})}),{props:this.props,styles:this.styles,grid:this.grid}}}function ot(e,t){let r=new st(e),n={};r.compose({x:1,y:1,z:1,count:1,context:{},grid:{x:1,y:1,z:1,count:1}},null,!0);let{grid:i}=r.output();if(i&&(t=i),r.reset(),1==t.z)for(let s=1,o=0;s<=t.x;++s)for(let e=1;e<=t.y;++e)r.compose({x:s,y:e,z:1,count:++o,grid:t,context:n});else for(let s=1,o=0;s<=t.z;++s)r.compose({x:1,y:1,z:s,count:++o,grid:t,context:n});return r.output()}class lt extends HTMLElement{constructor(){super(),this.doodle=this.attachShadow({mode:"open"}),this.extra={get_custom_property_value:this.get_custom_property_value.bind(this)}}connectedCallback(e){setTimeout(()=>{let t,r=this.getAttribute("use")||"";if(r&&(r=`@use:${r};`),!this.innerHTML.trim()&&!r)return!1;try{let e=H(r+this.innerHTML,this.extra);this.grid_size=J(this.getAttribute("grid")),t=ot(e,this.grid_size),t.grid&&(this.grid_size=t.grid),this.build_grid(t)}catch(n){this.innerHTML="",console.error(n&&n.message||"Error in css-doodle.")}!e&&this.hasAttribute("click-to-update")&&this.addEventListener("click",e=>this.update())})}get_custom_property_value(e){return getComputedStyle(this).getPropertyValue(e).trim().replace(/^\(|\)$/g,"")}cell(e,t,r){let n=document.createElement("div");return n.id=D(e,t,r),n}build_grid(e){const{has_transition:t,has_animation:r}=e.props,{keyframes:n,host:i,container:s,cells:o}=e.styles;this.doodle.innerHTML=`\n \n \n \n \n
\n `,this.doodle.querySelector(".container").appendChild(this.html_cells()),(t||r)&&setTimeout(()=>{this.set_style(".style-cells",o)},50)}inherit_props(e){return He(/grid/).map(e=>`${e}: inherit;`).join("")}style_basic(){return`\n * {\n box-sizing: border-box;\n }\n *::after, *::before {\n box-sizing: inherit;\n }\n :host {\n display: block;\n visibility: visible;\n width: 1em;\n height: 1em;\n }\n .container {\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n ${this.inherit_props()}\n }\n .container div:empty {\n position: relative;\n line-height: 1;\n display: grid;\n place-content: center;\n }\n `}style_size(){let{x:e,y:t}=this.grid_size;return`\n :host {\n grid-template-rows: repeat(${e}, 1fr);\n grid-template-columns: repeat(${t}, 1fr);\n }\n `}html_cells(){let{x:e,y:t,z:r}=this.grid_size,n=document.createDocumentFragment();if(1==r)for(let i=1;i<=e;++i)for(let e=1;e<=t;++e)n.appendChild(this.cell(i,e,1));else{let e=null;for(let t=1;t<=r;++t){let r=this.cell(1,1,t);(e||n).appendChild(r),e=r}e=null}return n}set_style(e,t){const r=this.shadowRoot.querySelector(e);r&&(r.styleSheet?r.styleSheet.cssText=t:r.innerHTML=t)}update(e){let t=this.getAttribute("use")||"";t&&(t=`@use:${t};`),e||(e=this.innerHTML),this.innerHTML=e,this.grid_size||(this.grid_size=J(this.getAttribute("grid")));const r=ot(H(t+e,this.extra),this.grid_size);if(r.grid){let{x:e,y:t,z:n}=r.grid,{x:i,y:s,z:o}=this.grid_size;if(i!==e||s!==t||o!==n)return Object.assign(this.grid_size,r.grid),this.build_grid(r);Object.assign(this.grid_size,r.grid)}else{let r=J(this.getAttribute("grid")),{x:n,y:i,z:s}=r,{x:o,y:l,z:u}=this.grid_size;if(o!==n||l!==i||u!==s)return Object.assign(this.grid_size,r),this.build_grid(ot(H(t+e,this.extra),this.grid_size))}this.set_style(".style-keyframes",r.styles.keyframes),r.props.has_animation&&(this.set_style(".style-cells",""),this.set_style(".style-container","")),setTimeout(()=>{this.set_style(".style-container",this.style_size()+r.styles.host+r.styles.container),this.set_style(".style-cells",r.styles.cells)})}get grid(){return Object.assign({},this.grid_size)}set grid(e){this.setAttribute("grid",e),this.connectedCallback(!0)}get use(){return this.getAttribute("use")}set use(e){this.setAttribute("use",e),this.connectedCallback(!0)}static get observedAttributes(){return["grid","use"]}attributeChangedCallback(e,t,r){if(t==r)return!1;"grid"==e&&t&&(this.grid=r),"use"==e&&t&&(this.use=r)}}customElements.get("css-doodle")||customElements.define("css-doodle",lt)}))},"23f5":function(e,t,r){},"2c17":function(e,t,r){"use strict";(function(e){var n=r("f568"),i={VueCssDoodle:n["a"],installed:!1,install:function(e){i.installed||(i.installed=!0,e.config.ignoredElements=["css-doodle"],e.component(n["a"].name,n["a"]))}},s=null;"undefined"!==typeof window?s=window.Vue:"undefined"!==typeof e&&(s=e.Vue),s&&s.use(i),t["a"]=i}).call(this,r("c8ba"))},6015:function(e,t,r){"use strict";var n=r("23f5"),i=r.n(n);i.a},"62e4":function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},"98b8":function(e,t,r){(function(e){function t(e){return t="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}var r=function(e){"use strict";var r,n=Object.prototype,i=n.hasOwnProperty,s="function"===typeof Symbol?Symbol:{},o=s.iterator||"@@iterator",l=s.asyncIterator||"@@asyncIterator",u=s.toStringTag||"@@toStringTag";function a(e,t,r,n){var i=t&&t.prototype instanceof g?t:g,s=Object.create(i.prototype),o=new L(n||[]);return s._invoke=z(e,r,o),s}function c(e,t,r){try{return{type:"normal",arg:e.call(t,r)}}catch(n){return{type:"throw",arg:n}}}e.wrap=a;var h="suspendedStart",p="suspendedYield",f="executing",d="completed",y={};function g(){}function m(){}function v(){}var b={};b[o]=function(){return this};var x=Object.getPrototypeOf,w=x&&x(x(O([])));w&&w!==n&&i.call(w,o)&&(b=w);var _=v.prototype=g.prototype=Object.create(b);function k(e){["next","throw","return"].forEach((function(t){e[t]=function(e){return this._invoke(t,e)}}))}function $(e){function r(n,s,o,l){var u=c(e[n],e,s);if("throw"!==u.type){var a=u.arg,h=a.value;return h&&"object"===t(h)&&i.call(h,"__await")?Promise.resolve(h.__await).then((function(e){r("next",e,o,l)}),(function(e){r("throw",e,o,l)})):Promise.resolve(h).then((function(e){a.value=e,o(a)}),(function(e){return r("throw",e,o,l)}))}l(u.arg)}var n;function s(e,t){function i(){return new Promise((function(n,i){r(e,t,n,i)}))}return n=n?n.then(i,i):i()}this._invoke=s}function z(e,t,r){var n=h;return function(i,s){if(n===f)throw new Error("Generator is already running");if(n===d){if("throw"===i)throw s;return T()}r.method=i,r.arg=s;while(1){var o=r.delegate;if(o){var l=S(o,r);if(l){if(l===y)continue;return l}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===h)throw n=d,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=f;var u=c(e,t,r);if("normal"===u.type){if(n=r.done?d:p,u.arg===y)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n=d,r.method="throw",r.arg=u.arg)}}}function S(e,t){var n=e.iterator[t.method];if(n===r){if(t.delegate=null,"throw"===t.method){if(e.iterator["return"]&&(t.method="return",t.arg=r,S(e,t),"throw"===t.method))return y;t.method="throw",t.arg=new TypeError("The iterator does not provide a 'throw' method")}return y}var i=c(n,e.iterator,t.arg);if("throw"===i.type)return t.method="throw",t.arg=i.arg,t.delegate=null,y;var s=i.arg;return s?s.done?(t[e.resultName]=s.value,t.next=e.nextLoc,"return"!==t.method&&(t.method="next",t.arg=r),t.delegate=null,y):s:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,y)}function j(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function E(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function L(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(j,this),this.reset(!0)}function O(e){if(e){var t=e[o];if(t)return t.call(e);if("function"===typeof e.next)return e;if(!isNaN(e.length)){var n=-1,s=function t(){while(++n=0;--s){var o=this.tryEntries[s],l=o.completion;if("root"===o.tryLoc)return n("end");if(o.tryLoc<=this.prev){var u=i.call(o,"catchLoc"),a=i.call(o,"finallyLoc");if(u&&a){if(this.prev=0;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&i.call(n,"finallyLoc")&&this.prev=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),E(r),y}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var i=n.arg;E(r)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,n){return this.delegate={iterator:O(e),resultName:t,nextLoc:n},"next"===this.method&&(this.arg=r),y}},e}("object"===t(e)?e.exports:{});try{regeneratorRuntime=r}catch(n){Function("r","regeneratorRuntime = r")(r)}}).call(this,r("62e4")(e))},a34a:function(e,t,r){e.exports=r("98b8")},c8ba:function(e,t){var r;r=function(){return this}();try{r=r||new Function("return this")()}catch(n){"object"===typeof window&&(r=window)}e.exports=r},f568:function(e,t,r){"use strict";var n=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{ref:"doodle",staticClass:"vue-css-doodle",class:e.classes,style:e.style},[e._m(0)],1)},i=[function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("css-doodle",e._g(e._b({attrs:{grid:e.grid,title:e.title,use:e.use,"click-to-update":e.clickToUpdateToString}},"css-doodle",e.$attrs,!1),e.$listeners),[e._t("default",null,{generate:e.generate})],2)}],s=r("a34a"),o=r.n(s);function l(e,t,r,n,i,s,o){try{var l=e[s](o),u=l.value}catch(a){return void r(a)}l.done?t(u):Promise.resolve(u).then(n,i)}function u(e){return function(){var t=this,r=arguments;return new Promise((function(n,i){var s=e.apply(t,r);function o(e){l(s,n,i,o,u,"next",e)}function u(e){l(s,n,i,o,u,"throw",e)}o(void 0)}))}}var a=function(){return Promise.resolve().then(r.t.bind(null,"1054",7))},c={name:"vue-css-doodle",inheritAttrs:!1,props:{grid:{type:[String,Number],default:null},title:{type:String,default:null},use:{type:String,default:null},height:{type:String,default:null},width:{type:String,default:null},mxAuto:{type:Boolean,default:!1},fitWidth:{type:Boolean,default:!1},fitHeight:{type:Boolean,default:!1},fillHeight:{type:Boolean,default:!1},clickToUpdate:{type:Boolean,default:!1},absolute:{type:Boolean,default:!1},overflowHidden:{type:Boolean,default:!1}},data:function(){return{doodle:null}},computed:{classes:function(){return{"vue-css-doodle--mx-auto":this.mxAuto,"vue-css-doodle--fit-width":this.fitWidth,"vue-css-doodle--fit-height":this.fitHeight,"vue-css-doodle--fill-height":this.fillHeight,"vue-css-doodle--absolute":this.absolute,"vue-css-doodle--overflow-hidden":this.overflowHidden}},style:function(){return{width:this.width,height:this.height}},clickToUpdateToString:function(){return this.clickToUpdate?"true":null}},mounted:function(){var e=u(o.a.mark((function e(){return o.a.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,a();case 3:this.$nextTick(this.init),e.next=9;break;case 6:e.prev=6,e.t0=e["catch"](0);case 9:case"end":return e.stop()}}),e,this,[[0,6]])})));function t(){return e.apply(this,arguments)}return t}(),methods:{init:function(){this.doodle=this.$refs.doodle.firstElementChild,this.generate()},generate:function(){this.doodle.update()}}},h=c;r("6015");function p(e,t,r,n,i,s,o,l){var u,a="function"===typeof e?e.options:e;if(t&&(a.render=t,a.staticRenderFns=r,a._compiled=!0),n&&(a.functional=!0),s&&(a._scopeId="data-v-"+s),o?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},a._ssrRegister=u):i&&(u=l?function(){i.call(this,this.$root.$options.shadowRoot)}:i),u)if(a.functional){a._injectStyles=u;var c=a.render;a.render=function(e,t){return u.call(t),c(e,t)}}else{var h=a.beforeCreate;a.beforeCreate=h?[].concat(h,u):[u]}return{exports:e,options:a}}var f=p(h,n,i,!1,null,"5c11e18e",null);t["a"]=f.exports},f6fd:function(e,t){(function(e){var t="currentScript",r=e.getElementsByTagName("script");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(n){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(n.stack)||[!1])[1];for(e in r)if(r[e].src==t||"interactive"==r[e].readyState)return r[e];return null}}})})(document)},fb15:function(e,t,r){"use strict";var n;(r.r(t),"undefined"!==typeof window)&&(r("f6fd"),(n=window.document.currentScript)&&(n=n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(r.p=n[1]));var i=r("2c17");t["default"]=i["a"]}})["default"]})); -------------------------------------------------------------------------------- /docs/android-chrome-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/android-chrome-144x144.png -------------------------------------------------------------------------------- /docs/android-chrome-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/android-chrome-96x96.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-57x57-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-57x57-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-60x60-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-60x60-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-72x72-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-72x72-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-76x76-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-76x76-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | #333333 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/css/app.1dec7612.css: -------------------------------------------------------------------------------- 1 | :root{--color-start:#e74c3c;--color-end:#feca57;--color-accessible:#2c3e50;font-size:16px}body{padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);line-height:1.5}.button,.markdown-body .button,.markdown-body a,.markdown-body button,a,button{display:inline-block;margin:0 4px 4px;border:0;border-radius:3px;-webkit-transition:all .3s cubic-bezier(.455,.03,.515,.955);transition:all .3s cubic-bezier(.455,.03,.515,.955);will-change:auto}.button,.markdown-body .button,.markdown-body button,button{padding:8px 16px;color:#fff;text-decoration:none;background-image:linear-gradient(90deg,var(--color-start,#e74c3c),var(--color-end,#feca57) 51%,var(--color-start,#e74c3c));background-position:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button:hover,.markdown-body .button:hover,.markdown-body button:hover,button:hover{background-position:100%}.markdown-body a,a{color:var(--color-start,#e74c3c)}.markdown-body .hljs-attr,.markdown-body .hljs-comment,.markdown-body .hljs-meta,.markdown-body .hljs-meta-keyword{color:var(--color-accessible,#2c3e50)!important}[data-v-34844f8c]:root{--color:#333;--background-color:#fff}.app[data-v-34844f8c]{width:100%;min-height:100vh;color:var(--color,#333);background-color:var(--background-color,#fff)}.app .grid-container[data-v-34844f8c]{padding:8px;overflow:hidden}@media (min-width:768px){.app .grid-container[data-v-34844f8c]{display:grid;grid-template-areas:"left right";-ms-grid-rows:1fr;grid-template-rows:1fr;-ms-grid-columns:33% 1fr;grid-template-columns:33% 1fr}}.app .grid-container .grid-cell[data-v-34844f8c]{position:relative;padding:16px;border-radius:3px}.app .grid-container .left[data-v-34844f8c]{z-index:0;grid-area:left}.app .grid-container .right[data-v-34844f8c]{z-index:1;grid-area:right;background-color:hsla(0,0%,100%,.81)}@media (min-width:768px){.app .grid-container .left[data-v-34844f8c]{-ms-grid-row:1;-ms-grid-column:1}.app .grid-container .right[data-v-34844f8c]{-ms-grid-row:1;-ms-grid-column:2}}.app label[data-v-34844f8c]{margin-bottom:6px;line-height:1}.app section[data-v-34844f8c]{min-height:100vh;margin:0 0 16px}.app section.doodle[data-v-34844f8c]{position:relative;z-index:0;height:100%;margin:-24px}.app .controls[data-v-34844f8c]{position:absolute;z-index:1;margin:0 auto;padding:6px 8px;background-color:hsla(0,0%,100%,.72);border-radius:3px}@media (min-width:768px){.app .controls[data-v-34844f8c]{position:fixed}}.app .controls--bottom[data-v-34844f8c]{top:81%}.app .controls select[data-v-34844f8c]{width:100%}css-doodle[demo-one]{--color:@p(#feca57,#e74c3c,#feca57,#e74c3c,#feca57,#feca57);--animationDelay:@size() * @i();--ruleOne:(:doodle { @grid:30x1/18vmin; --deg:@p(-180deg,180deg,90deg,-90deg); }:container { perspective:@r(30,36)vmin; transform:translate(16px,80px); opacity:@r(.63,.8); }::after,::before { content:""; background:var(--color); @place-cell:@r(100%) @r(100%); @size:@r(9px); @shape:@p(heart,triangle,hypocycloid,circle); } @place-cell:center; @size:100%; box-shadow:@m2(0 0 54px var(--color)); background:@m100(radial-gradient(var(--color) 50%,transparent 0) @r(-18%,120%) @r(-18%,100%)/1px 1px no-repeat); will-change:transform,opacity; animation:scale-up 12s linear infinite; animation-delay:calc(-12s/var(--animationDelay)); @keyframes scale-up { 0%,95.01%,100% { transform:translateZ(0) rotateZ(0); opacity:0; } 10% { opacity:1; } 95% { transform:translateZ(@r(30,36)vmin) rotateZ(@var(--deg)); } })}css-doodle[demo-two]{--color:@p(#e63946,#f1faee,#a8dadc,#457b9d,#1d3557);--position:@r(0%,100%) @r(0%,100%);--pat-1:(linear-gradient(var(--color),@lp()) var(--position)/@r(1px) @r(15%) no-repeat);--pat-2:(linear-gradient(@pick(-180deg,-135deg,-90deg,-45deg,0deg,45deg,90deg,135deg,180deg),var(--color) 50%,transparent 0) var(--position)/@r(3%) @lr() no-repeat);--pat-3:(linear-gradient(var(--color),@lp()) var(--position)/@r(15%) 1px no-repeat);--pat-4:(radial-gradient(var(--color),@lp()) var(--position)/@r(5%) @lr() no-repeat);--pat-5:(radial-gradient(var(--color) 50%,transparent 0) var(--position)/@r(5%) @lr() no-repeat);--pat-6:(conic-gradient(from 325deg,var(--color) 0,@lp() 20%,transparent 20%,transparent 50%) var(--position)/@r(5%) @lr() no-repeat);--pat-7:(linear-gradient(@p(45deg,-45deg),transparent,transparent calc(50% - 0.2px),var(--color) calc(50% - 0.5px),@lp() calc(50% + 0.5px),transparent calc(50% + 0.2px)) var(--position)/@r(5%) @lr() no-repeat);--ruleTwo:(:doodle { @grid:1/100vmax; } background-blend-mode:color-burn; background:@m(80,var(--pat-1)),@m(80,var(--pat-2)),@m(80,var(--pat-3)),@m(80,var(--pat-4)),@m(80,var(--pat-5)),@m(80,var(--pat-6)),@m(80,var(--pat-7)) ;)}.vue-css-doodle--mx-auto>css-doodle[data-v-5c11e18e]{margin-right:auto;margin-left:auto}.vue-css-doodle--fill-height>css-doodle[data-v-5c11e18e]{height:100%}.vue-css-doodle--fit-width>css-doodle[data-v-5c11e18e]{max-width:100%}.vue-css-doodle--fit-height>css-doodle[data-v-5c11e18e]{max-height:100%}.vue-css-doodle--overflow-hidden[data-v-5c11e18e]{overflow:hidden}.vue-css-doodle--absolute[data-v-5c11e18e]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0} -------------------------------------------------------------------------------- /docs/css/chunk-vendors.883ea51b.css: -------------------------------------------------------------------------------- 1 | /*! modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:after,:before{box-sizing:border-box}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji}hr{height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}@font-face{font-family:octicons-link;src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format("woff")}.markdown-body .octicon{display:inline-block;fill:currentColor;vertical-align:text-bottom}.markdown-body .anchor{float:left;line-height:1;margin-left:-20px;padding-right:4px}.markdown-body .anchor:focus{outline:none}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#1b1f23;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body .pl-c{color:#6a737d}.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:#005cc5}.markdown-body .pl-e,.markdown-body .pl-en{color:#6f42c1}.markdown-body .pl-s .pl-s1,.markdown-body .pl-smi{color:#24292e}.markdown-body .pl-ent{color:#22863a}.markdown-body .pl-k{color:#d73a49}.markdown-body .pl-pds,.markdown-body .pl-s,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sra,.markdown-body .pl-sr .pl-sre{color:#032f62}.markdown-body .pl-smw,.markdown-body .pl-v{color:#e36209}.markdown-body .pl-bu{color:#b31d28}.markdown-body .pl-ii{background-color:#b31d28;color:#fafbfc}.markdown-body .pl-c2{background-color:#d73a49;color:#fafbfc}.markdown-body .pl-c2:before{content:"^M"}.markdown-body .pl-sr .pl-cce{color:#22863a;font-weight:700}.markdown-body .pl-ml{color:#735c0f}.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{color:#005cc5;font-weight:700}.markdown-body .pl-mi{color:#24292e;font-style:italic}.markdown-body .pl-mb{color:#24292e;font-weight:700}.markdown-body .pl-md{background-color:#ffeef0;color:#b31d28}.markdown-body .pl-mi1{background-color:#f0fff4;color:#22863a}.markdown-body .pl-mc{background-color:#ffebda;color:#e36209}.markdown-body .pl-mi2{background-color:#005cc5;color:#f6f8fa}.markdown-body .pl-mdr{color:#6f42c1;font-weight:700}.markdown-body .pl-ba{color:#586069}.markdown-body .pl-sg{color:#959da5}.markdown-body .pl-corl{color:#032f62;text-decoration:underline}.markdown-body details{display:block}.markdown-body summary{display:list-item}.markdown-body a{background-color:transparent;color:#0366d6;text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline-width:0}.markdown-body strong{font-weight:600}.markdown-body h1{margin:.67em 0;font-size:2em}.markdown-body img{border-style:none;background-color:#fff;box-sizing:content-box;max-width:100%}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:monospace,monospace;font-size:1em}.markdown-body hr{box-sizing:content-box;background:transparent;overflow:hidden;background-color:#e1e4e8;border:0;height:.25em;margin:24px 0;padding:0;border-bottom-color:#eee}.markdown-body input{font:inherit;margin:0;overflow:visible;font-family:inherit;font-size:inherit;line-height:inherit}.markdown-body [type=checkbox]{box-sizing:border-box;padding:0}.markdown-body *{box-sizing:border-box}.markdown-body a:hover{text-decoration:underline}.markdown-body hr:after,.markdown-body hr:before{content:"";display:table}.markdown-body hr:after{clear:both}.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;overflow:auto;width:100%}.markdown-body td,.markdown-body th{padding:0}.markdown-body details summary{cursor:pointer}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:24px}.markdown-body h1,.markdown-body h2{font-weight:600;border-bottom:1px solid #eaecef;padding-bottom:.3em}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h3,.markdown-body h4{font-weight:600}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:.875em}.markdown-body h5,.markdown-body h6{font-weight:600}.markdown-body h6{color:#6a737d;font-size:.85em}.markdown-body p{margin-bottom:10px;margin-top:0}.markdown-body blockquote{margin:0;border-left:.25em solid #dfe2e5;color:#6a737d;padding:0 1em}.markdown-body ol,.markdown-body ul{margin-bottom:0;margin-top:0;padding-left:2em}.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman}.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}.markdown-body dd{margin-left:0}.markdown-body code,.markdown-body pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px}.markdown-body pre{margin-bottom:0;margin-top:0;word-wrap:normal}.markdown-body input::-webkit-inner-spin-button,.markdown-body input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.markdown-body .border{border:1px solid #e1e4e8!important}.markdown-body .border-0{border:0!important}.markdown-body .border-bottom{border-bottom:1px solid #e1e4e8!important}.markdown-body .rounded-1{border-radius:3px!important}.markdown-body .bg-white{background-color:#fff!important}.markdown-body .bg-gray-light{background-color:#fafbfc!important}.markdown-body .text-gray-light{color:#6a737d!important}.markdown-body .mb-0{margin-bottom:0!important}.markdown-body .my-2{margin-bottom:8px!important;margin-top:8px!important}.markdown-body .pl-0{padding-left:0!important}.markdown-body .py-0{padding-bottom:0!important;padding-top:0!important}.markdown-body .pl-1{padding-left:4px!important}.markdown-body .pl-2{padding-left:8px!important}.markdown-body .py-2{padding-bottom:8px!important;padding-top:8px!important}.markdown-body .pl-3,.markdown-body .px-3{padding-left:16px!important}.markdown-body .px-3{padding-right:16px!important}.markdown-body .pl-4{padding-left:24px!important}.markdown-body .pl-5{padding-left:32px!important}.markdown-body .pl-6{padding-left:40px!important}.markdown-body .f6{font-size:12px!important}.markdown-body .lh-condensed{line-height:1.25!important}.markdown-body .text-bold{font-weight:600!important}.markdown-body:after,.markdown-body:before{content:"";display:table}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-bottom:16px;margin-top:0}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body kbd{font-size:11px;background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font:11px SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;line-height:10px;padding:3px 5px;vertical-align:middle}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-bottom:0;margin-top:0}.markdown-body li{word-wrap:break-all}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{font-size:1em;font-style:italic;font-weight:600;margin-top:16px;padding:0}.markdown-body dl dd{margin-bottom:16px;padding:0 16px}.markdown-body table th{font-weight:600}.markdown-body table td,.markdown-body table th{border:1px solid #dfe2e5;padding:6px 13px}.markdown-body table tr{background-color:#fff;border-top:1px solid #c6cbd1}.markdown-body table tr:nth-child(2n){background-color:#f6f8fa}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body code{background-color:rgba(27,31,35,.05);border-radius:3px;font-size:85%;margin:0;padding:.2em .4em}.markdown-body pre>code{background:transparent;border:0;font-size:100%;margin:0;padding:0;white-space:pre;word-break:normal}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{background-color:#f6f8fa;border-radius:3px;font-size:85%;line-height:1.45;overflow:auto;padding:16px}.markdown-body pre code{background-color:transparent;border:0;display:inline;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;word-wrap:normal}.markdown-body .commit-tease-sha{color:#444d56;display:inline-block;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:90%}.markdown-body .blob-wrapper{border-bottom-left-radius:3px;border-bottom-right-radius:3px;overflow-x:auto;overflow-y:hidden}.markdown-body .blob-wrapper-embedded{max-height:240px;overflow-y:auto}.markdown-body .blob-num{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(27,31,35,.3);cursor:pointer;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;min-width:50px;padding-left:10px;padding-right:10px;text-align:right;user-select:none;vertical-align:top;white-space:nowrap;width:1%}.markdown-body .blob-num:hover{color:rgba(27,31,35,.6)}.markdown-body .blob-num:before{content:attr(data-line-number)}.markdown-body .blob-code{line-height:20px;padding-left:10px;padding-right:10px;position:relative;vertical-align:top}.markdown-body .blob-code-inner{color:#24292e;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px;overflow:visible;white-space:pre;word-wrap:normal}.markdown-body .pl-token.active,.markdown-body .pl-token:hover{background:#ffea7f;cursor:pointer}.markdown-body :checked+.radio-label{border-color:#0366d6;position:relative;z-index:1}.markdown-body .tab-size[data-tab-size="1"]{-moz-tab-size:1;-o-tab-size:1;tab-size:1}.markdown-body .tab-size[data-tab-size="2"]{-moz-tab-size:2;-o-tab-size:2;tab-size:2}.markdown-body .tab-size[data-tab-size="3"]{-moz-tab-size:3;-o-tab-size:3;tab-size:3}.markdown-body .tab-size[data-tab-size="4"]{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.markdown-body .tab-size[data-tab-size="5"]{-moz-tab-size:5;-o-tab-size:5;tab-size:5}.markdown-body .tab-size[data-tab-size="6"]{-moz-tab-size:6;-o-tab-size:6;tab-size:6}.markdown-body .tab-size[data-tab-size="7"]{-moz-tab-size:7;-o-tab-size:7;tab-size:7}.markdown-body .tab-size[data-tab-size="8"]{-moz-tab-size:8;-o-tab-size:8;tab-size:8}.markdown-body .tab-size[data-tab-size="9"]{-moz-tab-size:9;-o-tab-size:9;tab-size:9}.markdown-body .tab-size[data-tab-size="10"]{-moz-tab-size:10;-o-tab-size:10;tab-size:10}.markdown-body .tab-size[data-tab-size="11"]{-moz-tab-size:11;-o-tab-size:11;tab-size:11}.markdown-body .tab-size[data-tab-size="12"]{-moz-tab-size:12;-o-tab-size:12;tab-size:12}.markdown-body .task-list-item{list-style-type:none}.markdown-body .task-list-item+.task-list-item{margin-top:3px}.markdown-body .task-list-item input{margin:0 .2em .25em -1.6em;vertical-align:middle}.markdown-body .pl-3{padding-left:16px!important}.markdown-body .pl-7{padding-left:48px!important}.markdown-body .pl-8{padding-left:64px!important}.markdown-body .pl-9{padding-left:80px!important}.markdown-body .pl-10{padding-left:96px!important}.markdown-body .pl-11{padding-left:112px!important}.markdown-body .pl-12{padding-left:128px!important}.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700} -------------------------------------------------------------------------------- /docs/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/favicon-16x16.png -------------------------------------------------------------------------------- /docs/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/favicon-32x32.png -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/favicon.png -------------------------------------------------------------------------------- /docs/humans.txt: -------------------------------------------------------------------------------- 1 | /* TEAM */ 2 | Creative developer: Luca Iaconelli 3 | Twitter: @luxdamore 4 | Instagram: @luxdamore 5 | From: Faenza, Italia 6 | 7 | /* SITE */ 8 | Language: Italian 9 | Doctype: HTML5 10 | IDE: Visual Studio Code 11 | -------------------------------------------------------------------------------- /docs/img/lighthouse-audit.91ed377c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/img/lighthouse-audit.91ed377c.jpg -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Vue CSS Doodle
-------------------------------------------------------------------------------- /docs/js/app-legacy.2d7f44cf.js: -------------------------------------------------------------------------------- 1 | (function(t){function e(e){for(var a,l,o=e[0],i=e[1],c=e[2],v=0,p=[];v")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("html")]),t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("head")]),t._v(">")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- VueCssDoodle style --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- Old way --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("rel")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"stylesheet"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.css"')]),t._v(" />")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end old way --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- New way --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("rel")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"preload"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.css"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("as")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"style"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("onload")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("\"this.rel='stylesheet'\"")]),t._v(" />")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("rel")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"preload"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.umd.min.js"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("as")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"script"')]),t._v(" />")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end new way --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end VueCssDoodle style --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("body")]),t._v(">")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!--\n Others script (ex. VueJs) and html.\n --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- VueCssDoodle script --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("src")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.umd.min.js"')]),t._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end VueCssDoodle script --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n\n")])]),a("h4",[t._v("Markup")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("vue-css-doodle")]),t._v(">")]),t._v("\n :doodle {\n @grid: 50x1 / 80%;\n }\n\n @place-cell: center;\n @size: calc(100% / @size * @i);\n\n transform: rotate(calc(@i * 5deg));\n\n border-radius: 30%;\n border: 1px solid hsla(\n calc(10 + 4 * @i), 70%, 68%, @r.8\n );\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n\n")])]),a("h4",[t._v("Integrations")]),a("h4",[t._v("NuxtJS")]),a("ul",[a("li",[t._v("Create a file in the "),a("code",{pre:!0},[t._v("plugins")]),t._v(" folder;")]),a("li",[t._v("Name it "),a("code",{pre:!0},[t._v("vue-css-doodle.client.js")]),t._v(";")]),a("li",[t._v("Install it "),a("em",[t._v("as a plugin")]),t._v(";")]),a("li",[t._v("Import it in the "),a("code",{pre:!0},[t._v("nuxt.config.js")]),t._v(" file as "),a("a",{attrs:{href:"https://nuxtjs.org/guide/plugins/#client-side-only"}},[a("em",[t._v("client side only")])]),t._v(".")])]),a("h3",[t._v("Options")]),a("h4",[t._v("Slots")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("# Available")]),t._v("\n slot="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"default"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v('# Add the content, it expose v-slot="{ generate }" method to refresh the doodle')]),t._v("\n\n")])]),a("h4",[t._v("Props")]),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"center"}},[t._v("Attribute")]),a("th",[t._v("Type")]),a("th",{staticStyle:{"text-align":"center"}},[t._v("Default")]),a("th",{staticStyle:{"text-align":"center"}},[t._v("Required")]),a("th",[t._v("About")])])]),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("title")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("The title")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("grid")]),a("td",[t._v("String or Number")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Value of "),a("code",{pre:!0},[t._v("grid-attr")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("use")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Value of "),a("code",{pre:!0},[t._v("use-attr")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("height")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Height of the doodle")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("width")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Width of the doodle")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("mx-auto")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Add "),a("code",{pre:!0},[t._v("margin-left|right-auto")]),t._v(" to the doodle")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("fit-width")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Force the doodle to fit in a "),a("code",{pre:!0},[t._v("max-width")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("fit-height")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Force the doodle to fit in a "),a("code",{pre:!0},[t._v("max-height")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("fill-height")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Expand the doodle to an "),a("code",{pre:!0},[t._v("height of 100%")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("click-to-update")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Refresh on click")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("overflow-hidden")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Add "),a("code",{pre:!0},[t._v("overflow-hidden")]),t._v(" to the container")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("absolute")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Set position to "),a("code",{pre:!0},[t._v("absolute")])])])])]),a("p",[t._v("Check the "),a("a",{attrs:{href:"https://css-doodle.com/#usage"}},[t._v("DOCS for more information")]),t._v(".")]),a("hr"),a("h2",[t._v("🐞 Issues")]),a("p",[t._v("Please make sure to read the "),a("a",{attrs:{href:"/.github/ISSUE_TEMPLATE/bug_report.md"}},[t._v("Issue Reporting Checklist")]),t._v(" before opening an issue. Issues not conforming to the guidelines may be closed immediately.")]),a("h2",[t._v("👥 Contribution")]),a("p",[t._v("Please make sure to read the "),a("a",{attrs:{href:"/.github/ISSUE_TEMPLATE/feature_request.md"}},[t._v("Contributing Guide")]),t._v(" before making a pull request.")]),a("h2",[t._v("📖 Changelog")]),a("p",[t._v("Details changes for each release are documented in the "),a("a",{attrs:{href:"./CHANGELOG.md"}},[a("strong",[t._v("release notes")])]),t._v(".")]),a("h3",[t._v("📃 License")]),a("p",[a("a",{attrs:{href:"./LICENSE"}},[t._v("MIT License")]),t._v(" // Copyright (©) 2019-present "),a("a",{attrs:{href:"https://lucaiaconelli.it"}},[t._v("Luca Iaconelli")])]),a("hr"),a("h4",[t._v("💸 Are you feeling generous today? :)")]),a("p",[t._v("Do you want to share a beer? We can be good friends… "),a("strong",[a("a",{attrs:{href:"https://www.paypal.me/luxdamore"}},[t._v("Paypal")]),t._v(" // "),a("a",{attrs:{href:"https://www.patreon.com/luxdamore"}},[t._v("Patreon")])])]),a("blockquote",[a("p",[a("em",[t._v("It’s always a good day to be magnanimous - cit")])])]),a("h4",[t._v("💼 Hire me")]),a("p",[a("a",{attrs:{href:"https://otechie.com/luxdamore"}},[a("img",{attrs:{src:"https://api.otechie.com/consultancy/luxdamore/badge.svg",alt:"Otechie"}})])]),a("p",[a("a",{attrs:{href:"https://ko-fi.com/luxdamore"}},[a("img",{attrs:{src:"https://www.ko-fi.com/img/githubbutton_sm.svg",alt:"ko-fi"}})])]),a("h4",[t._v("💘 Inspired by")]),a("p",[t._v("A web component for drawing patterns with CSS, "),a("a",{attrs:{href:"https://css-doodle.com"}},[t._v("css-doodle")])]),a("blockquote",[a("p",[t._v("Check the "),a("a",{attrs:{href:"https://codepen.io/collection/XyVkpQ"}},[t._v("full list of doodle on Codepen")])])]),a("hr"),a("h5",[t._v("💡 Lighthouse")]),a("p",[a("img",{attrs:{src:s("9007"),alt:"Lighthouse audit score"}})])])}],_=s("2877"),h={},f=Object(_["a"])(h,p,u,!1,null,null,null),m=f.exports;o.a.registerLanguage("bash",c.a),o.a.registerLanguage("javascript",v.a);var g={name:"v-app",components:{readme:m},data:function(){return{activeDoodle:null,doodles:[{text:"Inception",value:null},{text:"Picasso",value:2},{text:"Rain",value:3}]}},mounted:function(){var t=this;this.$nextTick((function(){t.initHighlight(),t.initReadmeLinks()}))},methods:{initHighlight:function(){var t=document.querySelectorAll("pre");t.forEach((function(t){return o.a.highlightBlock(t)}))},initReadmeLinks:function(){for(var t=document.querySelectorAll(".readme > article a"),e=0;e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("html")]),t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("head")]),t._v(">")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- VueCssDoodle style --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- Old way --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("rel")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"stylesheet"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.css"')]),t._v(" />")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end old way --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- New way --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("rel")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"preload"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.css"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("as")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"style"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("onload")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("\"this.rel='stylesheet'\"")]),t._v(" />")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("rel")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"preload"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("href")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.umd.min.js"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("as")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"script"')]),t._v(" />")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end new way --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end VueCssDoodle style --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("body")]),t._v(">")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!--\n Others script (ex. VueJs) and html.\n --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- VueCssDoodle script --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("src")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"https://unpkg.com/@luxdamore/vue-css-doodle@latest/dist/VueCssDoodle.umd.min.js"')]),t._v(">")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("\x3c!-- end VueCssDoodle script --\x3e")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n\n")])]),a("h4",[t._v("Markup")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("vue-css-doodle")]),t._v(">")]),t._v("\n :doodle {\n @grid: 50x1 / 80%;\n }\n\n @place-cell: center;\n @size: calc(100% / @size * @i);\n\n transform: rotate(calc(@i * 5deg));\n\n border-radius: 30%;\n border: 1px solid hsla(\n calc(10 + 4 * @i), 70%, 68%, @r.8\n );\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("")]),t._v("\n\n")])]),a("h4",[t._v("Integrations")]),a("h4",[t._v("NuxtJS")]),a("ul",[a("li",[t._v("Create a file in the "),a("code",{pre:!0},[t._v("plugins")]),t._v(" folder;")]),a("li",[t._v("Name it "),a("code",{pre:!0},[t._v("vue-css-doodle.client.js")]),t._v(";")]),a("li",[t._v("Install it "),a("em",[t._v("as a plugin")]),t._v(";")]),a("li",[t._v("Import it in the "),a("code",{pre:!0},[t._v("nuxt.config.js")]),t._v(" file as "),a("a",{attrs:{href:"https://nuxtjs.org/guide/plugins/#client-side-only"}},[a("em",[t._v("client side only")])]),t._v(".")])]),a("h3",[t._v("Options")]),a("h4",[t._v("Slots")]),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-bash"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("# Available")]),t._v("\n slot="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"default"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v('# Add the content, it expose v-slot="{ generate }" method to refresh the doodle')]),t._v("\n\n")])]),a("h4",[t._v("Props")]),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"center"}},[t._v("Attribute")]),a("th",[t._v("Type")]),a("th",{staticStyle:{"text-align":"center"}},[t._v("Default")]),a("th",{staticStyle:{"text-align":"center"}},[t._v("Required")]),a("th",[t._v("About")])])]),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("title")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("The title")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("grid")]),a("td",[t._v("String or Number")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Value of "),a("code",{pre:!0},[t._v("grid-attr")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("use")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Value of "),a("code",{pre:!0},[t._v("use-attr")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("height")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Height of the doodle")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("width")]),a("td",[t._v("String")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("null")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Width of the doodle")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("mx-auto")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Add "),a("code",{pre:!0},[t._v("margin-left|right-auto")]),t._v(" to the doodle")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("fit-width")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Force the doodle to fit in a "),a("code",{pre:!0},[t._v("max-width")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("fit-height")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Force the doodle to fit in a "),a("code",{pre:!0},[t._v("max-height")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("fill-height")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Expand the doodle to an "),a("code",{pre:!0},[t._v("height of 100%")])])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("click-to-update")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Refresh on click")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("overflow-hidden")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Add "),a("code",{pre:!0},[t._v("overflow-hidden")]),t._v(" to the container")])]),a("tr",[a("td",{staticStyle:{"text-align":"center"}},[t._v("absolute")]),a("td",[t._v("Boolean")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",{staticStyle:{"text-align":"center"}},[t._v("false")]),a("td",[t._v("Set position to "),a("code",{pre:!0},[t._v("absolute")])])])])]),a("p",[t._v("Check the "),a("a",{attrs:{href:"https://css-doodle.com/#usage"}},[t._v("DOCS for more information")]),t._v(".")]),a("hr"),a("h2",[t._v("🐞 Issues")]),a("p",[t._v("Please make sure to read the "),a("a",{attrs:{href:"/.github/ISSUE_TEMPLATE/bug_report.md"}},[t._v("Issue Reporting Checklist")]),t._v(" before opening an issue. Issues not conforming to the guidelines may be closed immediately.")]),a("h2",[t._v("👥 Contribution")]),a("p",[t._v("Please make sure to read the "),a("a",{attrs:{href:"/.github/ISSUE_TEMPLATE/feature_request.md"}},[t._v("Contributing Guide")]),t._v(" before making a pull request.")]),a("h2",[t._v("📖 Changelog")]),a("p",[t._v("Details changes for each release are documented in the "),a("a",{attrs:{href:"./CHANGELOG.md"}},[a("strong",[t._v("release notes")])]),t._v(".")]),a("h3",[t._v("📃 License")]),a("p",[a("a",{attrs:{href:"./LICENSE"}},[t._v("MIT License")]),t._v(" // Copyright (©) 2019-present "),a("a",{attrs:{href:"https://lucaiaconelli.it"}},[t._v("Luca Iaconelli")])]),a("hr"),a("h4",[t._v("💸 Are you feeling generous today? :)")]),a("p",[t._v("Do you want to share a beer? We can be good friends… "),a("strong",[a("a",{attrs:{href:"https://www.paypal.me/luxdamore"}},[t._v("Paypal")]),t._v(" // "),a("a",{attrs:{href:"https://www.patreon.com/luxdamore"}},[t._v("Patreon")])])]),a("blockquote",[a("p",[a("em",[t._v("It’s always a good day to be magnanimous - cit")])])]),a("h4",[t._v("💼 Hire me")]),a("p",[a("a",{attrs:{href:"https://otechie.com/luxdamore"}},[a("img",{attrs:{src:"https://api.otechie.com/consultancy/luxdamore/badge.svg",alt:"Otechie"}})])]),a("p",[a("a",{attrs:{href:"https://ko-fi.com/luxdamore"}},[a("img",{attrs:{src:"https://www.ko-fi.com/img/githubbutton_sm.svg",alt:"ko-fi"}})])]),a("h4",[t._v("💘 Inspired by")]),a("p",[t._v("A web component for drawing patterns with CSS, "),a("a",{attrs:{href:"https://css-doodle.com"}},[t._v("css-doodle")])]),a("blockquote",[a("p",[t._v("Check the "),a("a",{attrs:{href:"https://codepen.io/collection/XyVkpQ"}},[t._v("full list of doodle on Codepen")])])]),a("hr"),a("h5",[t._v("💡 Lighthouse")]),a("p",[a("img",{attrs:{src:s("9007"),alt:"Lighthouse audit score"}})])])}],_=s("2877"),h={},m=Object(_["a"])(h,p,u,!1,null,null,null),g=m.exports;o.a.registerLanguage("bash",c.a),o.a.registerLanguage("javascript",v.a);var f={name:"v-app",components:{readme:g},data:()=>({activeDoodle:null,doodles:[{text:"Inception",value:null},{text:"Picasso",value:2},{text:"Rain",value:3}]}),mounted(){this.$nextTick(()=>{this.initHighlight(),this.initReadmeLinks()})},methods:{initHighlight(){var t=document.querySelectorAll("pre");t.forEach(t=>o.a.highlightBlock(t))},initReadmeLinks(){for(var t=document.querySelectorAll(".readme > article a"),e=0;et(b)});P.$mount("#app")},6015:function(t,e,s){"use strict";var a=s("23f5"),l=s.n(a);l.a},9007:function(t,e,s){t.exports=s.p+"img/lighthouse-audit.91ed377c.jpg"},abe2:function(t,e,s){},d88d:function(t,e,s){},ef1f:function(t,e,s){"use strict";var a=s("2d7d"),l=s.n(a);l.a},f568:function(t,e,s){"use strict";var a=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{ref:"doodle",staticClass:"vue-css-doodle",class:t.classes,style:t.style},[t._m(0)],1)},l=[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("css-doodle",t._g(t._b({attrs:{grid:t.grid,title:t.title,use:t.use,"click-to-update":t.clickToUpdateToString}},"css-doodle",t.$attrs,!1),t.$listeners),[t._t("default",null,{generate:t.generate})],2)}];function n(t,e,s,a,l,n,r){try{var o=t[n](r),i=o.value}catch(c){return void s(c)}o.done?e(i):Promise.resolve(i).then(a,l)}function r(t){return function(){var e=this,s=arguments;return new Promise((function(a,l){var r=t.apply(e,s);function o(t){n(r,a,l,o,i,"next",t)}function i(t){n(r,a,l,o,i,"throw",t)}o(void 0)}))}}var o=()=>Promise.resolve().then(s.t.bind(null,"1054",7)),i={name:"vue-css-doodle",inheritAttrs:!1,props:{grid:{type:[String,Number],default:null},title:{type:String,default:null},use:{type:String,default:null},height:{type:String,default:null},width:{type:String,default:null},mxAuto:{type:Boolean,default:!1},fitWidth:{type:Boolean,default:!1},fitHeight:{type:Boolean,default:!1},fillHeight:{type:Boolean,default:!1},clickToUpdate:{type:Boolean,default:!1},absolute:{type:Boolean,default:!1},overflowHidden:{type:Boolean,default:!1}},data:()=>({doodle:null}),computed:{classes(){return{"vue-css-doodle--mx-auto":this.mxAuto,"vue-css-doodle--fit-width":this.fitWidth,"vue-css-doodle--fit-height":this.fitHeight,"vue-css-doodle--fill-height":this.fillHeight,"vue-css-doodle--absolute":this.absolute,"vue-css-doodle--overflow-hidden":this.overflowHidden}},style(){return{width:this.width,height:this.height}},clickToUpdateToString(){return this.clickToUpdate?"true":null}},mounted(){var t=this;return r((function*(){try{yield o(),t.$nextTick(t.init)}catch(e){0}}))()},methods:{init(){this.doodle=this.$refs.doodle.firstElementChild,this.generate()},generate(){this.doodle.update()}}},c=i,d=(s("6015"),s("2877")),v=Object(d["a"])(c,a,l,!1,null,"5c11e18e",null);e["a"]=v.exports}}); -------------------------------------------------------------------------------- /docs/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/mstile-150x150.png -------------------------------------------------------------------------------- /docs/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/mstile-310x150.png -------------------------------------------------------------------------------- /docs/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/mstile-70x70.png -------------------------------------------------------------------------------- /docs/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/docs/og-image.jpg -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | -------------------------------------------------------------------------------- /docs/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 11 | -------------------------------------------------------------------------------- /docs/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "VueCssDoodle", 3 | "short_name": "VCD", 4 | "icons": [ 5 | { 6 | "src": "android-chrome-96x96.png", 7 | "sizes": "96x96", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "android-chrome-144x144.png", 12 | "sizes": "144x144", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /husky.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | hooks: { 3 | 'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS', 4 | 'pre-commit': 'npm run lint', 5 | 'pre-push': 'npm run lint', 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: 'node', 3 | collectCoverage: true, 4 | collectCoverageFrom: [ 5 | 'lib/**/*.js', 6 | '!lib/plugin.js', 7 | ], 8 | moduleNameMapper: { 9 | '^~/(.*)$': '/lib/$1', 10 | '^~~$': '', 11 | '^@@$': '', 12 | '^@/(.*)$': '/lib/$1', 13 | }, 14 | transform: { 15 | '^.+\\.js$': 'babel-jest', 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /lighthouse-audit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/lighthouse-audit.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@luxdamore/vue-css-doodle", 3 | "version": "1.0.1", 4 | "description": "Porting of css-doodle to VueJs, a web component for drawing patterns with CSS - SSR Compatible", 5 | "author": "Luca Iaconelli (https://lucaiaconelli.it)", 6 | "contributors": [ 7 | { 8 | "name": "Luca Iaconelli (https://lucaiaconelli.it)" 9 | } 10 | ], 11 | "homepage": "https://luxdamore.github.io/vue-css-doodle", 12 | "main": "dist/VueCssDoodle.umd.min.js", 13 | "umd": "dist/VueCssDoodle.umd.min.js", 14 | "unpkg": "dist/VueCssDoodle.umd.min.js", 15 | "commonjs": "dist/VueCssDoodle.common.js", 16 | "browser": "dist/VueCssDoodle.umd.min.js", 17 | "style": "dist/VueCssDoodle.css", 18 | "keywords": [ 19 | "vuejs", 20 | "nuxtjs", 21 | "css-doodle", 22 | "effects", 23 | "css-animations", 24 | "design", 25 | "css", 26 | "doodle" 27 | ], 28 | "scripts": { 29 | "test": "echo \"Error: no test specified\" && exit 1", 30 | "serve": "vue-cli-service serve", 31 | "build:library": "vue-cli-service build --dest ./dist --target lib --name VueCssDoodle ./src/VueCssDoodle/index.js", 32 | "build:docs": "vue-cli-service build --modern --dest ./docs", 33 | "prebuild": "npm run lint", 34 | "build": "npm run build:library && npm run build:docs", 35 | "prepare": "npm run build", 36 | "check-linting": "vue-cli-service lint", 37 | "stylelint-check": "stylelint ./src/**/*.scss", 38 | "stylelint-fix": "stylelint ./src/**/*.scss --fix", 39 | "eslint-check": "eslint --ext .js,.vue .", 40 | "eslint-fix": "eslint --fix --ext .js,.vue .", 41 | "lint": "npm run eslint-check && npm run stylelint-check", 42 | "lint-fix": "npm run eslint-fix && npm run stylelint-fix", 43 | "release": "npm run build && standard-version && git push --follow-tags && npm publish", 44 | "precommit": "npm run lint" 45 | }, 46 | "dependencies": { 47 | "css-doodle": "^0.7.7", 48 | "vue": "^2.6.11" 49 | }, 50 | "devDependencies": { 51 | "@commitlint/cli": "latest", 52 | "@commitlint/config-conventional": "latest", 53 | "@nuxtjs/eslint-config": "latest", 54 | "@vue/cli-plugin-babel": "^4.1.1", 55 | "@vue/cli-plugin-eslint": "^4.1.1", 56 | "@vue/cli-service": "^4.1.1", 57 | "@vue/eslint-config-prettier": "^6.0.0", 58 | "babel-eslint": "^10.0.3", 59 | "cssnano": "^4.1.10", 60 | "eslint": "^6.7.2", 61 | "eslint-config-standard": "^14.1.0", 62 | "eslint-loader": "^3.0.3", 63 | "eslint-plugin-compat": "^3.3.0", 64 | "eslint-plugin-import": "^2.19.1", 65 | "eslint-plugin-node": "^11.0.0", 66 | "eslint-plugin-nuxt": "^0.5.0", 67 | "eslint-plugin-prettier": "^3.1.2", 68 | "eslint-plugin-promise": "^4.2.1", 69 | "eslint-plugin-standard": "^4.0.1", 70 | "eslint-plugin-unicorn": "^15.0.1", 71 | "eslint-plugin-vue": "^6.0.1", 72 | "github-markdown-css": "^3.0.1", 73 | "highlight.js": "^10.4.1", 74 | "husky": "^4.0.3", 75 | "modern-normalize": "^0.6.0", 76 | "node-sass": "^4.13.0", 77 | "postcss-combine-duplicated-selectors": "^8.0.3", 78 | "postcss-import": "^12.0.1", 79 | "postcss-loader": "^3.0.0", 80 | "postcss-preset-env": "^6.7.0", 81 | "postcss-scoped": "^0.0.0", 82 | "postcss-scss": "^2.0.0", 83 | "postcss-url": "^8.0.0", 84 | "prettier": "^1.19.1", 85 | "prettier-eslint": "^9.0.1", 86 | "prettier-stylelint": "^0.4.2", 87 | "sass-loader": "^8.0.0", 88 | "standard-version": "latest", 89 | "stylelint": "^12.0.0", 90 | "stylelint-config-rational-order": "^0.1.2", 91 | "stylelint-config-sass-guidelines": "^6.2.0", 92 | "stylelint-config-standard": "^19.0.0", 93 | "stylelint-no-unsupported-browser-features": "^4.0.0", 94 | "stylelint-order": "^4.0.0", 95 | "vue-markdown-loader": "^2.4.1", 96 | "vue-template-compiler": "^2.6.11" 97 | }, 98 | "license": "MIT", 99 | "repository": { 100 | "type": "git", 101 | "url": "git+https://github.com/LuXDAmore/vue-css-doodle.git" 102 | }, 103 | "bugs": { 104 | "url": "https://github.com/LuXDAmore/vue-css-doodle/issues" 105 | }, 106 | "files": [ 107 | "dist" 108 | ], 109 | "publishConfig": { 110 | "access": "public" 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // Exports 2 | module.exports = { 3 | parser: 'postcss-scss', 4 | syntax: 'postcss-scss', 5 | plugins: [ 6 | require( 7 | 'postcss-import', 8 | )(), 9 | require( 10 | 'postcss-url', 11 | )(), 12 | require( 13 | 'postcss-scoped', 14 | )(), 15 | require( 16 | 'postcss-preset-env', 17 | )( 18 | { 19 | stage: 2, 20 | autoprefixer: { 21 | cascade: false, 22 | grid: true, 23 | }, 24 | }, 25 | ), 26 | require( 27 | 'postcss-combine-duplicated-selectors', 28 | )( 29 | { 30 | removeDuplicatedProperties: true, 31 | }, 32 | ), 33 | require( 34 | 'cssnano', 35 | )( 36 | { 37 | preset: 'default', 38 | }, 39 | ), 40 | ], 41 | }; 42 | -------------------------------------------------------------------------------- /public/android-chrome-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/android-chrome-144x144.png -------------------------------------------------------------------------------- /public/android-chrome-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/android-chrome-96x96.png -------------------------------------------------------------------------------- /public/apple-touch-icon-57x57-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-57x57-precomposed.png -------------------------------------------------------------------------------- /public/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /public/apple-touch-icon-60x60-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-60x60-precomposed.png -------------------------------------------------------------------------------- /public/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/apple-touch-icon-72x72-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-72x72-precomposed.png -------------------------------------------------------------------------------- /public/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /public/apple-touch-icon-76x76-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-76x76-precomposed.png -------------------------------------------------------------------------------- /public/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | #333333 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/favicon.png -------------------------------------------------------------------------------- /public/humans.txt: -------------------------------------------------------------------------------- 1 | /* TEAM */ 2 | Creative developer: Luca Iaconelli 3 | Twitter: @luxdamore 4 | Instagram: @luxdamore 5 | From: Faenza, Italia 6 | 7 | /* SITE */ 8 | Language: Italian 9 | Doctype: HTML5 10 | IDE: Visual Studio Code 11 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 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 | <%= VUE_APP_TITLE %> 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 66 | 67 |
68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/mstile-150x150.png -------------------------------------------------------------------------------- /public/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/mstile-310x150.png -------------------------------------------------------------------------------- /public/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/mstile-70x70.png -------------------------------------------------------------------------------- /public/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuXDAmore/vue-css-doodle/7da04bfb00440c743520920a3049d94d9a901da7/public/og-image.jpg -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | -------------------------------------------------------------------------------- /public/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 11 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "VueCssDoodle", 3 | "short_name": "VCD", 4 | "icons": [ 5 | { 6 | "src": "android-chrome-96x96.png", 7 | "sizes": "96x96", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "android-chrome-144x144.png", 12 | "sizes": "144x144", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/VApp/VApp.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | 192 | 193 | 198 | 199 | 203 | -------------------------------------------------------------------------------- /src/VApp/demo.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable */ 2 | css-doodle { 3 | 4 | &[demo-one] { 5 | 6 | --color: @p(#feca57, #e74c3c, #feca57, #e74c3c, #feca57, #feca57); 7 | --animationDelay: @size() * @i(); 8 | 9 | --ruleOne: ( 10 | 11 | :doodle { 12 | 13 | @grid: 30x1 / 18vmin; 14 | --deg: @p(-180deg, 180deg, 90deg, -90deg); 15 | 16 | } 17 | 18 | :container { 19 | 20 | perspective: @r(30, 36)vmin; 21 | transform: translate(16px, 80px); 22 | opacity: @r(.63, .8); 23 | 24 | } 25 | 26 | ::after, 27 | ::before { 28 | 29 | content: ""; 30 | background: var(--color); 31 | @place-cell: @r(100%) @r(100%); 32 | @size: @r(9px); 33 | @shape: @p(heart, triangle, hypocycloid, circle); 34 | 35 | } 36 | 37 | @place-cell: center; 38 | @size: 100%; 39 | 40 | box-shadow: @m2(0 0 54px var(--color)); 41 | background: @m100(radial-gradient(var(--color) 50%, transparent 0) @r(-18%, 120%) @r(-18%, 100%) / 1px 1px no-repeat); 42 | 43 | will-change: transform, opacity; 44 | animation: scale-up 12s linear infinite; 45 | animation-delay: calc(-12s / var(--animationDelay)); 46 | 47 | @keyframes scale-up { 48 | 0%, 49 | 95.01%, 50 | 100% { 51 | transform: translateZ( 0 ) rotateZ( 0 ); 52 | opacity: 0; 53 | } 54 | 10% { 55 | opacity: 1; 56 | } 57 | 95% { 58 | transform: translateZ( @r(30, 36)vmin ) rotateZ(@var(--deg)); 59 | } 60 | } 61 | 62 | ); 63 | 64 | } 65 | 66 | &[demo-two] { 67 | 68 | --color: @p(#E63946, #F1FAEE, #A8DADC, #457B9D, #1D3557); 69 | --position: @r(0%, 100%) @r(0%, 100%); 70 | 71 | --pat-1: ( 72 | linear-gradient(var(--color), @lp()) 73 | var(--position) / @r(1px) @r(15%) 74 | no-repeat 75 | ); 76 | 77 | --pat-2: ( 78 | linear-gradient( 79 | @pick( -180deg, -135deg, -90deg, -45deg, 0deg, 45deg, 90deg, 135deg, 180deg ), 80 | var(--color) 50%, transparent 0 81 | ) var(--position) / @r(3%) @lr() no-repeat 82 | ); 83 | 84 | --pat-3: ( 85 | linear-gradient(var(--color), @lp()) 86 | var(--position) / @r(15%) 1px 87 | no-repeat 88 | ); 89 | 90 | --pat-4: ( 91 | radial-gradient(var(--color), @lp()) 92 | var(--position) / @r(5%) @lr() 93 | no-repeat 94 | ); 95 | 96 | --pat-5: ( 97 | radial-gradient(var(--color) 50%, transparent 0) 98 | var(--position) / @r(5%) @lr() 99 | no-repeat 100 | ); 101 | 102 | --pat-6: ( 103 | conic-gradient( 104 | from calc(145deg + 2 * 90deg), 105 | var(--color) 0, 106 | @lp() 20%, 107 | transparent 20%, 108 | transparent 50% 109 | ) 110 | var(--position) / @r(5%) @lr() 111 | no-repeat 112 | ); 113 | 114 | --pat-7: ( 115 | linear-gradient( 116 | @p(45deg, -45deg), 117 | transparent 0, 118 | transparent calc(50% - .2px), 119 | var(--color) calc(50% - .5px), 120 | @lp() calc(50% + .5px), 121 | transparent calc(50% + .2px) 122 | ) 123 | var(--position) / @r(5%) @lr() 124 | no-repeat 125 | ); 126 | 127 | --ruleTwo: ( 128 | :doodle { 129 | @grid: 1 / 100vmax; 130 | } 131 | background-blend-mode: color-burn; 132 | background: 133 | @m(80, var(--pat-1)), 134 | @m(80, var(--pat-2)), 135 | @m(80, var(--pat-3)), 136 | @m(80, var(--pat-4)), 137 | @m(80, var(--pat-5)), 138 | @m(80, var(--pat-6)), 139 | @m(80, var(--pat-7)) 140 | ; 141 | ); 142 | 143 | } 144 | } 145 | /* stylelint-enable */ 146 | -------------------------------------------------------------------------------- /src/VApp/index.js: -------------------------------------------------------------------------------- 1 | // Import vue component 2 | import component from './VApp.vue'; 3 | 4 | // To allow use as module (npm/webpack/etc.) export component 5 | export default component; 6 | -------------------------------------------------------------------------------- /src/VApp/style.scss: -------------------------------------------------------------------------------- 1 | $color: #333; 2 | $background-color: #fff; 3 | 4 | :root { 5 | 6 | --color: #{$color}; 7 | --background-color: #{$background-color}; 8 | 9 | } 10 | 11 | .app { 12 | 13 | width: 100%; 14 | 15 | min-height: 100vh; 16 | color: #{$color}; 17 | color: var( --color, #{$color} ); 18 | background-color: #{$background-color}; 19 | background-color: var( --background-color, #{$background-color} ); 20 | 21 | .grid-container { 22 | 23 | padding: 8px; 24 | overflow: hidden; 25 | 26 | @media ( min-width: 768px ) { 27 | 28 | display: grid; 29 | grid-template-areas: "left right"; 30 | grid-template-rows: 1fr; 31 | grid-template-columns: 33% 1fr; 32 | 33 | } 34 | 35 | .grid-cell { 36 | 37 | position: relative; 38 | padding: 16px; 39 | border-radius: 3px; 40 | 41 | } 42 | 43 | .left { 44 | 45 | z-index: 0; 46 | grid-area: left; 47 | 48 | } 49 | 50 | .right { 51 | 52 | z-index: 1; 53 | grid-area: right; 54 | background-color: rgba( 255, 255, 255, .81 ); 55 | 56 | } 57 | 58 | } 59 | 60 | label { 61 | 62 | margin-bottom: 6px; 63 | line-height: 1; 64 | 65 | } 66 | 67 | section { 68 | 69 | min-height: 100vh; 70 | margin: 0 0 16px; 71 | 72 | &.doodle { 73 | 74 | position: relative; 75 | z-index: 0; 76 | height: 100%; 77 | margin: -24px; 78 | 79 | } 80 | 81 | } 82 | 83 | .controls { 84 | 85 | position: absolute; 86 | z-index: 1; 87 | margin: 0 auto; 88 | padding: 6px 8px; 89 | background-color: rgba( 255, 255, 255, .72 ); 90 | border-radius: 3px; 91 | 92 | @media ( min-width: 768px ) { 93 | 94 | position: fixed; 95 | 96 | } 97 | 98 | &--bottom { 99 | 100 | top: 81%; 101 | 102 | } 103 | 104 | select { 105 | 106 | width: 100%; 107 | 108 | } 109 | 110 | } 111 | 112 | } 113 | -------------------------------------------------------------------------------- /src/VueCssDoodle/VueCssDoodle.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 161 | 162 | 167 | -------------------------------------------------------------------------------- /src/VueCssDoodle/index.js: -------------------------------------------------------------------------------- 1 | // Import vue component 2 | import component from './VueCssDoodle.vue'; 3 | 4 | const plugin = { 5 | VueCssDoodle: component, 6 | installed: false, 7 | install( 8 | Vue, 9 | ) { 10 | 11 | if( plugin.installed ) 12 | return; 13 | 14 | plugin.installed = true; 15 | 16 | Vue.config.ignoredElements = [ 'css-doodle' ]; 17 | 18 | Vue.component( 19 | component.name, 20 | component, 21 | ); 22 | 23 | }, 24 | }; 25 | 26 | // Auto install 27 | let GlobalVue = null; 28 | 29 | if( typeof window !== 'undefined' ) 30 | GlobalVue = window.Vue; 31 | else if( typeof global !== 'undefined' ) 32 | GlobalVue = global.Vue; 33 | 34 | GlobalVue && GlobalVue.use( 35 | plugin, 36 | ); 37 | 38 | // To allow use as module (npm/webpack/etc.) export component 39 | export default plugin; 40 | -------------------------------------------------------------------------------- /src/VueCssDoodle/style.scss: -------------------------------------------------------------------------------- 1 | .vue-css-doodle { 2 | 3 | &--mx-auto { 4 | 5 | > css-doodle { 6 | 7 | margin-right: auto; 8 | margin-left: auto; 9 | 10 | } 11 | 12 | } 13 | 14 | &--fill { 15 | 16 | &-height { 17 | 18 | > css-doodle { 19 | 20 | height: 100%; 21 | 22 | } 23 | 24 | } 25 | 26 | } 27 | 28 | &--fit { 29 | 30 | &-width { 31 | 32 | > css-doodle { 33 | 34 | max-width: 100%; 35 | 36 | } 37 | 38 | } 39 | 40 | &-height { 41 | 42 | > css-doodle { 43 | 44 | max-height: 100%; 45 | 46 | } 47 | 48 | } 49 | 50 | } 51 | 52 | &--overflow-hidden { 53 | 54 | overflow: hidden; 55 | 56 | } 57 | 58 | &--absolute { 59 | 60 | position: absolute; 61 | top: 0; 62 | right: 0; 63 | bottom: 0; 64 | left: 0; 65 | z-index: 0; 66 | 67 | } 68 | 69 | } 70 | -------------------------------------------------------------------------------- /src/library.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creates an instance of the design system 3 | * 4 | * @function install 5 | * @param {VueInstance} Vue Vue instance. 6 | */ 7 | 8 | const plugin = { 9 | installed: false, 10 | install( 11 | Vue, 12 | options, 13 | ) { 14 | 15 | if( plugin.installed ) 16 | return; 17 | 18 | plugin.installed = true; 19 | 20 | const OPTIONS = options; 21 | 22 | Vue.library = OPTIONS; 23 | Vue.prototype.$library = OPTIONS; 24 | 25 | }, 26 | }; 27 | 28 | export default plugin; 29 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // Vue 2 | import Vue from 'vue'; 3 | 4 | // Skeleton 5 | import 'modern-normalize/modern-normalize.css'; 6 | import 'github-markdown-css'; 7 | import './main.scss'; 8 | import VApp from './VApp'; 9 | 10 | // Component 11 | import Library from './library'; 12 | import VueCssDoodle from './VueCssDoodle'; 13 | 14 | // Install 15 | Vue.use( 16 | VueCssDoodle, 17 | ); 18 | 19 | // Library data 20 | Vue.use( 21 | Library, 22 | process.env, 23 | ); 24 | 25 | // Config 26 | const IS_DEV = process.env.NODE_ENV === 'development'; 27 | 28 | Vue.config.silent = ! IS_DEV; 29 | Vue.config.productionTip = IS_DEV; 30 | 31 | const vm = new Vue( 32 | { 33 | render: h => h( 34 | VApp, 35 | ), 36 | }, 37 | ); 38 | 39 | vm.$mount( 40 | '#app', 41 | ); 42 | -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | $color-start: #e74c3c; 2 | $color-end: #feca57; 3 | $color-accessible: #2c3e50; 4 | 5 | :root { 6 | 7 | --color-start: #{$color-start}; 8 | --color-end: #{$color-end}; 9 | --color-accessible: #{$color-accessible}; 10 | 11 | font-size: 16px; 12 | 13 | } 14 | 15 | // Skeleton 16 | body { 17 | 18 | padding-top: env( safe-area-inset-top, 0 ); 19 | padding-right: env( safe-area-inset-right, 0 ); 20 | padding-bottom: env( safe-area-inset-bottom, 0 ); 21 | padding-left: env( safe-area-inset-left, 0 ); 22 | line-height: 1.5; 23 | 24 | } 25 | 26 | .markdown-body .button, 27 | .markdown-body button, 28 | .markdown-body a, 29 | .button, 30 | button, 31 | a { 32 | 33 | display: inline-block; 34 | margin: 0 4px 4px; 35 | border: 0; 36 | 37 | border-radius: 3px; 38 | transition: all .3s cubic-bezier( .455, .03, .515, .955 ); 39 | will-change: auto; 40 | 41 | } 42 | 43 | .markdown-body .button, 44 | .markdown-body button, 45 | .button, 46 | button { 47 | 48 | padding: 8px 16px; 49 | color: #fff; 50 | text-decoration: none; 51 | background-image: linear-gradient( to right, #{$color-start} 0%, #{$color-end} 51%, #{$color-start} 100% ); 52 | background-image: linear-gradient( to right, var( --color-start, #{$color-start} ) 0%, var( --color-end, #{$color-end} ) 51%, var( --color-start, #{$color-start} ) 100% ); 53 | background-position: left center; 54 | appearance: none; 55 | 56 | &:hover { 57 | 58 | background-position: right center; 59 | 60 | } 61 | 62 | } 63 | 64 | .markdown-body a, 65 | a { 66 | 67 | color: #{$color-start}; 68 | color: var( --color-start, #{$color-start} ); 69 | 70 | } 71 | 72 | .markdown-body { 73 | 74 | .hljs-meta, 75 | .hljs-meta-keyword, 76 | .hljs-attr, 77 | .hljs-comment { 78 | 79 | color: #{$color-accessible} !important; 80 | color: var( --color-accessible, #{$color-accessible} ) !important; 81 | 82 | } 83 | 84 | } 85 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | 'stylelint-config-standard', 5 | 'stylelint-config-sass-guidelines', 6 | 'stylelint-config-rational-order', 7 | ], 8 | plugins: [ 9 | 'stylelint-scss', 10 | 'stylelint-no-unsupported-browser-features', 11 | ], 12 | // add your custom rules here 13 | defaultSeverity: 'warning', 14 | rules: { 15 | // Plugins 16 | 'plugin/no-unsupported-browser-features': [ 17 | true, 18 | { 19 | severity: 'warning', 20 | ignore: [ 21 | 'multicolumn', 22 | 'object-fit', 23 | 'calc', 24 | 'border-radius', 25 | 'user-select-none', 26 | 'pointer-events', 27 | 'background-img-opts', 28 | 'boxshadow', 29 | 'css-boxshadow', 30 | 'animation', 31 | 'css-animation', 32 | 'gradients', 33 | 'css-gradients', 34 | 'transitions', 35 | 'css-transitions', 36 | 'transform', 37 | 'will-change', 38 | 'font-unicode-range', 39 | 'transforms2d', 40 | 'transforms3d', 41 | 'viewport-units', 42 | 'css-appearance', 43 | 'css-filters', 44 | 'css3-cursors', 45 | 'css3-cursors-newer', 46 | 'outline', 47 | 'flexbox', 48 | 'fixed', 49 | 'fontface', 50 | 'css-fixed', 51 | ], 52 | }, 53 | ], 54 | // Property Order 55 | 'order/properties-order': [ 56 | [], 57 | { 58 | severity: 'warning', 59 | }, 60 | ], 61 | 'order/properties-alphabetical-order': null, 62 | 'plugin/rational-order': [ 63 | true, 64 | { 65 | severity: 'warning', 66 | }, 67 | ], 68 | // Generic 69 | 'indentation': 4, 70 | 'no-descending-specificity': null, 71 | 'selector-type-no-unknown': [ 72 | true, 73 | { 74 | ignore: [ 'custom-elements' ], 75 | ignoreTypes: [ 76 | 'css-doodle', 77 | 'v-deep', 78 | ], 79 | }, 80 | ], 81 | 'selector-pseudo-element-no-unknown': [ 82 | true, 83 | { 84 | ignorePseudoElements: [ 85 | 'v-deep', 86 | 'css-doodle', 87 | ], 88 | }, 89 | ], 90 | 'custom-property-empty-line-before': [ 91 | 'always', 92 | { 93 | except: [ 94 | 'after-comment', 95 | 'after-custom-property', 96 | ], 97 | ignore: [ 98 | 'after-comment', 99 | 'inside-single-line-block', 100 | ], 101 | }, 102 | ], 103 | 'block-closing-brace-newline-before': [ 'always-multi-line' ], 104 | 'block-closing-brace-empty-line-before': [ 'always-multi-line' ], 105 | 'string-quotes': 'double', 106 | 'media-feature-parentheses-space-inside': 'always', 107 | 'function-parentheses-space-inside': 'always', 108 | 'block-no-empty': null, 109 | 'function-url-quotes': 'always', 110 | 'max-empty-lines': [ 2 ], 111 | 'selector-max-compound-selectors': [ 9 ], 112 | 'max-nesting-depth': [ 9 ], 113 | 'at-rule-no-unknown': null, 114 | 'property-no-vendor-prefix': true, 115 | 'selector-descendant-combinator-no-non-space': true, 116 | 'unit-whitelist': [ 117 | 'vh', 118 | 'vw', 119 | 'px', 120 | 'em', 121 | 'rem', 122 | 's', 123 | 'fr', 124 | 'deg', 125 | '%', 126 | ], 127 | 'rule-empty-line-before': [ 128 | 'always', 129 | { 130 | except: [ 'after-single-line-comment' ], 131 | ignore: [ 132 | 'after-comment', 133 | 'inside-block', 134 | ], 135 | }, 136 | ], 137 | 'selector-no-qualifying-type': [ 138 | true, 139 | { 140 | ignore: [ 'class' ], 141 | }, 142 | ], 143 | 'at-rule-empty-line-before': [ 144 | 'always', 145 | { 146 | except: [ 147 | 'after-same-name', 148 | 'blockless-after-same-name-blockless', 149 | 'blockless-after-blockless', 150 | ], 151 | ignore: [ 152 | 'after-comment', 153 | 'first-nested', 154 | ], 155 | }, 156 | ], 157 | 'number-leading-zero': 'never', 158 | 'declaration-empty-line-before': [ 159 | 'always', 160 | { 161 | except: [ 162 | 'after-comment', 163 | 'after-declaration', 164 | ], 165 | ignore: [ 'after-declaration' ], 166 | }, 167 | ], 168 | 'block-opening-brace-space-before': 'always', 169 | 'selector-list-comma-newline-after': 'always', 170 | 'selector-class-pattern': [ 171 | // http://stylelint.cn/user-guide/faq/ 172 | // .your-component--primary 173 | // .your-component__container 174 | '^([a-z][a-z0-9]*)((--?|(__)?)[a-z0-9]+)*$', 175 | { 176 | resolveNestedSelectors: true, 177 | }, 178 | ], 179 | 'block-closing-brace-newline-after': [ 180 | 'always', 181 | { 182 | ignoreAtRules: [ 183 | 'if', 184 | 'else', 185 | ], 186 | }, 187 | ], 188 | 'at-rule-name-space-after': 'always', 189 | // SASS - SCSS 190 | // If - Else 191 | 'scss/at-rule-no-unknown': [ 192 | true, 193 | { 194 | ignoreAtRules: [ 195 | 'v-deep', 196 | 'css-doodle', 197 | ], 198 | }, 199 | ], 200 | 'scss/at-else-closing-brace-newline-after': 'always-last-in-chain', 201 | 'scss/at-else-closing-brace-space-after': 'always-intermediate', 202 | 'scss/at-else-empty-line-before': 'never', 203 | 'scss/at-if-closing-brace-newline-after': 'always-last-in-chain', 204 | 'scss/at-if-closing-brace-space-after': 'always-intermediate', 205 | 'scss/at-function-parentheses-space-before': 'never', 206 | }, 207 | }; 208 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const IS_DEV = process.env.NODE_ENV !== 'production' 2 | , BASE_URL = ( 3 | ! IS_DEV && process.env.BASE_URL 4 | ? process.env.BASE_URL 5 | : '/' 6 | ) 7 | ; 8 | 9 | module.exports = { 10 | publicPath: BASE_URL, 11 | lintOnSave: IS_DEV, 12 | productionSourceMap: false, 13 | configureWebpack: { 14 | output: { 15 | libraryExport: 'default', 16 | }, 17 | }, 18 | chainWebpack( 19 | config, 20 | ) { 21 | 22 | config.resolve.symlinks( 23 | false, 24 | ); 25 | 26 | config 27 | .module 28 | .rule( 29 | 'vue', 30 | ) 31 | .use( 32 | 'vue-loader', 33 | ) 34 | .loader( 35 | 'vue-loader', 36 | ) 37 | .tap( 38 | options => { 39 | 40 | options.compilerOptions.preserveWhitespace = false; 41 | options.compilerOptions.whitespace = 'condense'; 42 | 43 | return options; 44 | 45 | }, 46 | ) 47 | ; 48 | 49 | config 50 | .module 51 | .rule( 52 | 'md', 53 | ) 54 | .test( 55 | /\.md/, 56 | ) 57 | .use( 58 | 'vue-loader', 59 | ) 60 | .loader( 61 | 'vue-loader', 62 | ) 63 | .end() 64 | .use( 65 | 'vue-markdown-loader', 66 | ) 67 | .loader( 68 | 'vue-markdown-loader/lib/markdown-compiler', 69 | ) 70 | .options( 71 | { 72 | wrapper: 'article', 73 | raw: true, 74 | breaks: true, 75 | typographer: true, 76 | preventExtract: true, 77 | }, 78 | ) 79 | ; 80 | 81 | }, 82 | }; 83 | --------------------------------------------------------------------------------