├── .gitignore ├── .travis.yml ├── CHANGES.md ├── LICENSE ├── README.md ├── demo └── src │ ├── index.js │ └── style.css ├── nwb.config.js ├── package.json ├── src └── index.js ├── test └── GridForms-test.js └── vendor ├── gridforms.css └── gridforms.css.map /.gitignore: -------------------------------------------------------------------------------- 1 | /coverage 2 | /demo/dist 3 | /es6 4 | /lib 5 | /node_modules 6 | /umd 7 | npm-debug.log 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | node_js: 5 | - 4.2 6 | 7 | cache: 8 | directories: 9 | - node_modules 10 | 11 | before_install: 12 | - npm install codecov.io coveralls 13 | 14 | after_success: 15 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js 16 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js 17 | 18 | branches: 19 | only: 20 | - master 21 | -------------------------------------------------------------------------------- /CHANGES.md: -------------------------------------------------------------------------------- 1 | # 1.0.2 / 2016-01-02 2 | 3 | Added ES6 modules build in `es6/`. 4 | 5 | # 1.0.0 / 2015-11-15 6 | 7 | First release. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Jonny Buchanan 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so, 8 | subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-gridforms 2 | 3 | [![Travis][build-badge]][build] 4 | [![npm package][npm-badge]][npm] 5 | [![Coveralls][coveralls-badge]][coveralls] 6 | 7 | React components for form layout with [Gridforms](https://github.com/kumailht/gridforms). 8 | 9 | ## [Live Demo](http://insin.github.io/react-gridforms/) 10 | 11 | ## Install 12 | 13 | **Note: [Webpack](http://webpack.github.io/) is _required_ in order to use this component from npm.** 14 | 15 | ``` 16 | npm install react-gridforms 17 | ``` 18 | 19 | Browser bundles are available, which export a global `GridForms` variable and expect to find a global ``React`` variable to work with. 20 | 21 | * [react-gridforms.js](https://npmcdn.com/react-gridforms/umd/react-gridforms.js) (development version) 22 | * [react-gridforms.min.js](https://npmcdn.com/react-gridforms/umd/react-gridforms.min.js) (compressed production version) 23 | * Use [gridforms.css](https://cdn.rawgit.com/kumailht/gridforms/master/gridforms/gridforms.css) via RawGit with the browser bundle. 24 | 25 | ## Usage 26 | 27 | ```javascript 28 | var GridForms = require('react-gridforms') 29 | // or 30 | var {GridForm, Fieldset, Row, Field} = require('react-gridforms') 31 | // or 32 | import {GridForm, Fieldset, Row, Field} from 'react-gridforms' 33 | ``` 34 | 35 | Nest `
`, `` and `` components under a `` as necessary, using a `span` prop to control the relative size of each field. 36 | 37 | ```js 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | ``` 53 | 54 | Row spans will be calculated based on their Fields, so you only have to specify `span` props for fields which need more than the default of `1`. 55 | 56 | ## API 57 | 58 | All components will pass any props not documented below to the container element they render. 59 | 60 | ### `GridForm` component 61 | 62 | Renders a `
` with a `.grid-form` class by default. 63 | 64 | Prop | Default | Description 65 | ---- | ------- | ----------- 66 | `className` | | An additional class name for the element rendered by the component 67 | `component` | `'div'` | The container component to be rendered - can be a tag name or a custom React component 68 | `custom` | `false` | Flag to indicate a custom build of Gridforms is being used - when `true` the default `.grid-form` class will not be used, only the provided `className` 69 | 70 | ### `Fieldset` component 71 | 72 | Renders a `
` with a ``. 73 | 74 | Prop | Description 75 | ---- | ----------- 76 | `legend` | Contents for the ``, which will only be rendered when a `legend` prop is provided 77 | 78 | ### `Row` component 79 | 80 | Renders a `
` and calculates a GridForms `data-row-span` attribute based on the `span` props of its `Field` component children. 81 | 82 | ### `Field` component 83 | 84 | Container for an input field. 85 | 86 | Prop | Default | Description 87 | ---- | ------- | ----------- 88 | `span` | `1` | Relative size of the field compared to others in the same `Row` - can be expressed as a Number or a String 89 | 90 | ## MIT Licensed 91 | 92 | [build-badge]: https://img.shields.io/travis/insin/react-gridforms/master.svg?style=flat-square 93 | [build]: https://travis-ci.org/insin/react-gridforms 94 | 95 | [npm-badge]: https://img.shields.io/npm/v/react-gridforms.svg?style=flat-square 96 | [npm]: https://www.npmjs.org/package/react-gridforms 97 | 98 | [coveralls-badge]: https://img.shields.io/coveralls/insin/react-gridforms/master.svg?style=flat-square 99 | [coveralls]: https://coveralls.io/github/insin/react-gridforms 100 | -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import './style.css' 2 | 3 | import React from 'react' 4 | import {render} from 'react-dom' 5 | 6 | import {GridForm, Fieldset, Row, Field} from '../../src' 7 | 8 | let App = () =>
9 |

react-gridforms Demo

10 | 11 | 12 |
13 | 14 | let ProductForm = () =>
15 |

Product Form

16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 76 | 77 | 78 | 79 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 |
127 | 128 |
129 | 130 | let BankApplicationForm = () =>
131 |

Personal Bank Account Initial Application

132 | 133 |
134 | 135 | 136 | 137 | 138 | 139 | 140 |
141 | 142 |

143 | 144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 |
443 |
444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 |
483 |
484 |
485 | 486 |
487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 |
536 | 537 |

538 | 539 |
540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 |
557 | 558 |

559 | 560 |
561 | 562 | 563 | 564 |   565 |   566 | 567 | 568 | 569 | 570 |   571 |   572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 |
582 |
583 | 584 | 585 | 586 |   587 | 588 | 589 | 590 | 591 |   592 |   593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 |
611 |
612 | 613 |

614 |
615 | 616 | 617 | 618 |   619 |   620 |   621 |   622 |   623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 |   646 |   647 | 648 | 649 | 650 | 651 |   652 |   653 | 654 | 655 | 656 | 657 | 658 | 659 |   660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 |
668 |
669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 |
680 |
681 |

682 |
683 | 684 | 685 | 686 | 687 | 688 | 689 |
690 |

691 |
692 | 693 | 694 | 695 | 696 | 697 | 698 |
699 | 700 |
701 | 702 | var app = document.querySelector('#app') 703 | if (!app) { 704 | app = document.createElement('div') 705 | app.id = 'app' 706 | document.body.appendChild(app) 707 | } 708 | render(, app) 709 | -------------------------------------------------------------------------------- /demo/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: arial, sans-serif; 3 | } -------------------------------------------------------------------------------- /nwb.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | type: 'react-component', 3 | babel: { 4 | loose: 'all' 5 | }, 6 | karma: { 7 | tests: 'test/**/*-test.js', 8 | frameworks: [ 9 | require('karma-tap') 10 | ] 11 | }, 12 | // UMD build config 13 | umd: true, 14 | global: 'GridForms', 15 | externals: { 16 | 'react': 'React' 17 | }, 18 | jsNext: true 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-gridforms", 3 | "description": "React components for form layout with Gridforms", 4 | "version": "1.0.2", 5 | "main": "lib/index.js", 6 | "jsnext:main": "es6/index.js", 7 | "homepage": "https://github.com/insin/react-gridforms", 8 | "license": "MIT", 9 | "author": "Jonny Buchanan ", 10 | "scripts": { 11 | "build": "npm run lint && nwb build", 12 | "lint": "eslint src tests", 13 | "start": "nwb serve", 14 | "test": "npm run build && nwb test" 15 | }, 16 | "files": [ 17 | "es6", 18 | "lib", 19 | "umd", 20 | "vendor" 21 | ], 22 | "dependencies": { 23 | }, 24 | "peerDependencies": { 25 | "react": ">=0.14.0" 26 | }, 27 | "devDependencies": { 28 | "eslint-config-jonnybuchanan": "2.0.x", 29 | "karma-tap": "1.0.3", 30 | "nwb": "0.6.x", 31 | "react": "0.14.x", 32 | "react-addons-test-utils": "0.14.x", 33 | "react-dom": "0.14.x", 34 | "tape": "4.4.0" 35 | }, 36 | "repository": { 37 | "type": "git", 38 | "url": "https://github.com/insin/react-gridforms.git" 39 | }, 40 | "keywords": [ 41 | "react", 42 | "react-component", 43 | "responsive", 44 | "grid", 45 | "forms", 46 | "gridforms" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import '../vendor/gridforms.css' 2 | 3 | import React, {Children, PropTypes} from 'react' 4 | 5 | let classNames = (...args) => args.filter(cn => !!cn).join(' ') 6 | 7 | export let GridForm = React.createClass({ 8 | getDefaultProps() { 9 | return { 10 | component: 'form', 11 | custom: false 12 | } 13 | }, 14 | render() { 15 | let {children, className, component: Component, custom, ...props} = this.props 16 | return 17 | {children} 18 | 19 | } 20 | }) 21 | 22 | export let Fieldset = React.createClass({ 23 | render() { 24 | let {children, legend, ...props} = this.props 25 | return
26 | {legend && {legend}} 27 | {children} 28 |
29 | } 30 | }) 31 | 32 | export let Row = React.createClass({ 33 | render() { 34 | let {children, ...props} = this.props 35 | let span = 0 36 | Children.forEach(children, child => span += Number(child.props.span)) 37 | return
38 | {children} 39 |
40 | } 41 | }) 42 | 43 | export let Field = React.createClass({ 44 | propTypes: { 45 | span: PropTypes.oneOfType([ 46 | PropTypes.number, 47 | PropTypes.string 48 | ]) 49 | }, 50 | getDefaultProps() { 51 | return { 52 | span: 1 53 | } 54 | }, 55 | render() { 56 | let {children, span, ...props} = this.props 57 | return
58 | {children} 59 |
60 | } 61 | }) 62 | -------------------------------------------------------------------------------- /test/GridForms-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {findDOMNode} from 'react-dom' 3 | import test from 'tape' 4 | import {renderIntoDocument as render} from 'react-addons-test-utils' 5 | 6 | import {GridForm, Fieldset, Row, Field} from 'src/index' 7 | 8 | test('GridForm', t => { 9 | t.plan(6) 10 | 11 | let node = render() 12 | let el = findDOMNode(node) 13 | t.equal(el.tagName.toLowerCase(), 'form', 'renders a by default') 14 | t.equal(el.className, 'grid-form', 'gives its element a grid-form class by default') 15 | t.equal(el.getAttribute('action'), '/test', 'passes other props when rendering') 16 | 17 | node = render() 18 | el = findDOMNode(node) 19 | t.equal(el.tagName.toLowerCase(), 'div', 'uses a cdifferent component when given') 20 | t.equal(el.className, 'grid-form special', 'adds an additional className when given') 21 | 22 | node = render() 23 | el = findDOMNode(node) 24 | t.equal(el.className, 'my-grid-form', 'drops grid-form class when custom flag is given') 25 | }) 26 | 27 | test('Fieldset', t => { 28 | t.plan(4) 29 | 30 | let node = render(
) 31 | let el = findDOMNode(node) 32 | let legend = el.querySelector('legend') 33 | t.ok(legend, 'renders a when given a legend prop') 34 | t.equal(legend.textContent, 'Legendary', 'uses legend prop for content') 35 | t.equal(el.getAttribute('name'), 'test', 'passes other props when rendering') 36 | 37 | node = render(
) 38 | el = findDOMNode(node) 39 | t.ok(!el.querySelector('legend'), 'only renders a legend> when a legend prop is given') 40 | }) 41 | 42 | test('Row ', t => { 43 | t.plan(2) 44 | 45 | let node = render( 46 | 47 | 48 | 49 | ) 50 | t.equal(findDOMNode(node).getAttribute('data-row-span'), '6', 51 | 'sums the spans of its children and sets the total as data-row-span') 52 | t.equal(findDOMNode(node).className, 'test', 'passes other props when rendering') 53 | }) 54 | 55 | test('Field ', t => { 56 | t.plan(4) 57 | 58 | let node = render() 59 | t.equal(findDOMNode(node).getAttribute('data-field-span'), '1', 'defaults data-field-span to 1') 60 | t.equal(findDOMNode(node).className, 'test', 'passes other props when rendering') 61 | node = render() 62 | t.equal(findDOMNode(node).getAttribute('data-field-span'), '2', 'takes span as a string') 63 | node = render() 64 | t.equal(findDOMNode(node).getAttribute('data-field-span'), '2', 'takes span as a number') 65 | }) 66 | -------------------------------------------------------------------------------- /vendor/gridforms.css: -------------------------------------------------------------------------------- 1 | .grid-form *, .grid-form *:before, .grid-form *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 2 | .grid-form input[type="text"], .grid-form input[type="email"], .grid-form input[type="number"], .grid-form input[type="password"], .grid-form input[type="search"], .grid-form input[type="tel"], .grid-form input[type="url"], .grid-form input[type="color"], .grid-form input[type="date"], .grid-form input[type="datetime"], .grid-form input[type="datetime-local"], .grid-form input[type="month"], .grid-form input[type="time"], .grid-form input[type="week"], .grid-form textarea, .grid-form select { font-size: 18px; padding: 0; margin: 0; width: 100%; } 3 | .grid-form input[type="text"], .grid-form input[type="email"], .grid-form input[type="number"], .grid-form input[type="password"], .grid-form input[type="search"], .grid-form input[type="tel"], .grid-form input[type="url"], .grid-form input[type="color"], .grid-form input[type="date"], .grid-form input[type="datetime"], .grid-form input[type="datetime-local"], .grid-form input[type="month"], .grid-form input[type="time"], .grid-form input[type="week"], .grid-form textarea { border: 0; background: transparent; } 4 | .grid-form input[type="text"]::-webkit-input-placeholder, .grid-form input[type="email"]::-webkit-input-placeholder, .grid-form input[type="number"]::-webkit-input-placeholder, .grid-form input[type="password"]::-webkit-input-placeholder, .grid-form input[type="search"]::-webkit-input-placeholder, .grid-form input[type="tel"]::-webkit-input-placeholder, .grid-form input[type="url"]::-webkit-input-placeholder, .grid-form input[type="color"]::-webkit-input-placeholder, .grid-form input[type="date"]::-webkit-input-placeholder, .grid-form input[type="datetime"]::-webkit-input-placeholder, .grid-form input[type="datetime-local"]::-webkit-input-placeholder, .grid-form input[type="month"]::-webkit-input-placeholder, .grid-form input[type="time"]::-webkit-input-placeholder, .grid-form input[type="week"]::-webkit-input-placeholder, .grid-form textarea::-webkit-input-placeholder { font-weight: 100; color: #595959; } 5 | .grid-form input[type="text"]:-moz-placeholder, .grid-form input[type="email"]:-moz-placeholder, .grid-form input[type="number"]:-moz-placeholder, .grid-form input[type="password"]:-moz-placeholder, .grid-form input[type="search"]:-moz-placeholder, .grid-form input[type="tel"]:-moz-placeholder, .grid-form input[type="url"]:-moz-placeholder, .grid-form input[type="color"]:-moz-placeholder, .grid-form input[type="date"]:-moz-placeholder, .grid-form input[type="datetime"]:-moz-placeholder, .grid-form input[type="datetime-local"]:-moz-placeholder, .grid-form input[type="month"]:-moz-placeholder, .grid-form input[type="time"]:-moz-placeholder, .grid-form input[type="week"]:-moz-placeholder, .grid-form textarea:-moz-placeholder { font-weight: 100; color: #595959; } 6 | .grid-form input[type="text"]:focus, .grid-form input[type="email"]:focus, .grid-form input[type="number"]:focus, .grid-form input[type="password"]:focus, .grid-form input[type="search"]:focus, .grid-form input[type="tel"]:focus, .grid-form input[type="url"]:focus, .grid-form input[type="color"]:focus, .grid-form input[type="date"]:focus, .grid-form input[type="datetime"]:focus, .grid-form input[type="datetime-local"]:focus, .grid-form input[type="month"]:focus, .grid-form input[type="time"]:focus, .grid-form input[type="week"]:focus, .grid-form textarea:focus { outline: none; } 7 | .grid-form fieldset { border: none; padding: 0; margin: 0; } 8 | .grid-form fieldset legend { border: none; border-bottom: 4px solid #404040; color: #404040; font-size: 18px; font-weight: bold; padding-bottom: 5px; position: static; width: 100%; } 9 | .grid-form fieldset fieldset legend { border-bottom: 2px solid #404040; font-weight: normal; } 10 | .grid-form fieldset fieldset fieldset legend { border-bottom: 1px solid #404040; font-weight: normal; font-size: 15px; } 11 | .grid-form [data-row-span] { border-bottom: 1px solid #333; width: 100%; zoom: 1; } 12 | .grid-form [data-row-span]:before, .grid-form [data-row-span]:after { content: ""; display: table; } 13 | .grid-form [data-row-span]:after { clear: both; } 14 | @media only screen and (min-width: 0) and (max-width: 700px) { .grid-form [data-row-span] { border-bottom: none; } } 15 | .grid-form [data-row-span] [data-field-span] { padding: 8px; float: left; } 16 | @media only screen and (min-width: 0) and (max-width: 700px) { .grid-form [data-row-span] [data-field-span] { border-bottom: 1px solid #333; width: 100% !important; } } 17 | @media only screen and (min-width: 700px) { .grid-form [data-row-span] [data-field-span] { border-right: 1px solid #333; display: block; } } 18 | .grid-form [data-row-span] [data-field-span] label:first-child { margin-top: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; color: #333; display: block; margin-bottom: 4px; } 19 | .grid-form [data-row-span] [data-field-span] label:first-child:hover { cursor: text; } 20 | .grid-form [data-row-span] [data-field-span]:last-child { border-right: none; } 21 | .grid-form [data-row-span] [data-field-span].focus { background: #fffad4; } 22 | .grid-form [data-row-span] [data-field-span].focus label { color: #262626; } 23 | .grid-form [data-row-span] [data-field-span]:hover { background: #fffded; cursor: text; } 24 | @media print { .grid-form [data-row-span] { display: table; height: 56px; page-break-inside: avoid; } 25 | .grid-form [data-row-span] [data-field-span] { border-right: 1px solid #333333; display: table-cell; float: none; } 26 | .grid-form [data-row-span] [data-field-span].focus, .grid-form [data-row-span] [data-field-span]:hover { background: none; } 27 | .grid-form [data-row-span] [data-field-span] label:first-child { letter-spacing: 0; } } 28 | .grid-form [data-row-span="1"] > [data-field-span="1"] { width: 100%; } 29 | .grid-form [data-row-span="2"] > [data-field-span="1"] { width: 50%; } 30 | .grid-form [data-row-span="2"] > [data-field-span="2"] { width: 100%; } 31 | .grid-form [data-row-span="3"] > [data-field-span="1"] { width: 33.33333%; } 32 | .grid-form [data-row-span="3"] > [data-field-span="2"] { width: 66.66667%; } 33 | .grid-form [data-row-span="3"] > [data-field-span="3"] { width: 100%; } 34 | .grid-form [data-row-span="4"] > [data-field-span="1"] { width: 25%; } 35 | .grid-form [data-row-span="4"] > [data-field-span="2"] { width: 50%; } 36 | .grid-form [data-row-span="4"] > [data-field-span="3"] { width: 75%; } 37 | .grid-form [data-row-span="4"] > [data-field-span="4"] { width: 100%; } 38 | .grid-form [data-row-span="5"] > [data-field-span="1"] { width: 20%; } 39 | .grid-form [data-row-span="5"] > [data-field-span="2"] { width: 40%; } 40 | .grid-form [data-row-span="5"] > [data-field-span="3"] { width: 60%; } 41 | .grid-form [data-row-span="5"] > [data-field-span="4"] { width: 80%; } 42 | .grid-form [data-row-span="5"] > [data-field-span="5"] { width: 100%; } 43 | .grid-form [data-row-span="6"] > [data-field-span="1"] { width: 16.66667%; } 44 | .grid-form [data-row-span="6"] > [data-field-span="2"] { width: 33.33333%; } 45 | .grid-form [data-row-span="6"] > [data-field-span="3"] { width: 50%; } 46 | .grid-form [data-row-span="6"] > [data-field-span="4"] { width: 66.66667%; } 47 | .grid-form [data-row-span="6"] > [data-field-span="5"] { width: 83.33333%; } 48 | .grid-form [data-row-span="6"] > [data-field-span="6"] { width: 100%; } 49 | .grid-form [data-row-span="7"] > [data-field-span="1"] { width: 14.28571%; } 50 | .grid-form [data-row-span="7"] > [data-field-span="2"] { width: 28.57143%; } 51 | .grid-form [data-row-span="7"] > [data-field-span="3"] { width: 42.85714%; } 52 | .grid-form [data-row-span="7"] > [data-field-span="4"] { width: 57.14286%; } 53 | .grid-form [data-row-span="7"] > [data-field-span="5"] { width: 71.42857%; } 54 | .grid-form [data-row-span="7"] > [data-field-span="6"] { width: 85.71429%; } 55 | .grid-form [data-row-span="7"] > [data-field-span="7"] { width: 100%; } 56 | .grid-form [data-row-span="8"] > [data-field-span="1"] { width: 12.5%; } 57 | .grid-form [data-row-span="8"] > [data-field-span="2"] { width: 25%; } 58 | .grid-form [data-row-span="8"] > [data-field-span="3"] { width: 37.5%; } 59 | .grid-form [data-row-span="8"] > [data-field-span="4"] { width: 50%; } 60 | .grid-form [data-row-span="8"] > [data-field-span="5"] { width: 62.5%; } 61 | .grid-form [data-row-span="8"] > [data-field-span="6"] { width: 75%; } 62 | .grid-form [data-row-span="8"] > [data-field-span="7"] { width: 87.5%; } 63 | .grid-form [data-row-span="8"] > [data-field-span="8"] { width: 100%; } 64 | .grid-form [data-row-span="9"] > [data-field-span="1"] { width: 11.11111%; } 65 | .grid-form [data-row-span="9"] > [data-field-span="2"] { width: 22.22222%; } 66 | .grid-form [data-row-span="9"] > [data-field-span="3"] { width: 33.33333%; } 67 | .grid-form [data-row-span="9"] > [data-field-span="4"] { width: 44.44444%; } 68 | .grid-form [data-row-span="9"] > [data-field-span="5"] { width: 55.55556%; } 69 | .grid-form [data-row-span="9"] > [data-field-span="6"] { width: 66.66667%; } 70 | .grid-form [data-row-span="9"] > [data-field-span="7"] { width: 77.77778%; } 71 | .grid-form [data-row-span="9"] > [data-field-span="8"] { width: 88.88889%; } 72 | .grid-form [data-row-span="9"] > [data-field-span="9"] { width: 100%; } 73 | .grid-form [data-row-span="10"] > [data-field-span="1"] { width: 10%; } 74 | .grid-form [data-row-span="10"] > [data-field-span="2"] { width: 20%; } 75 | .grid-form [data-row-span="10"] > [data-field-span="3"] { width: 30%; } 76 | .grid-form [data-row-span="10"] > [data-field-span="4"] { width: 40%; } 77 | .grid-form [data-row-span="10"] > [data-field-span="5"] { width: 50%; } 78 | .grid-form [data-row-span="10"] > [data-field-span="6"] { width: 60%; } 79 | .grid-form [data-row-span="10"] > [data-field-span="7"] { width: 70%; } 80 | .grid-form [data-row-span="10"] > [data-field-span="8"] { width: 80%; } 81 | .grid-form [data-row-span="10"] > [data-field-span="9"] { width: 90%; } 82 | .grid-form [data-row-span="10"] > [data-field-span="10"] { width: 100%; } 83 | .grid-form [data-row-span="11"] > [data-field-span="1"] { width: 9.09091%; } 84 | .grid-form [data-row-span="11"] > [data-field-span="2"] { width: 18.18182%; } 85 | .grid-form [data-row-span="11"] > [data-field-span="3"] { width: 27.27273%; } 86 | .grid-form [data-row-span="11"] > [data-field-span="4"] { width: 36.36364%; } 87 | .grid-form [data-row-span="11"] > [data-field-span="5"] { width: 45.45455%; } 88 | .grid-form [data-row-span="11"] > [data-field-span="6"] { width: 54.54545%; } 89 | .grid-form [data-row-span="11"] > [data-field-span="7"] { width: 63.63636%; } 90 | .grid-form [data-row-span="11"] > [data-field-span="8"] { width: 72.72727%; } 91 | .grid-form [data-row-span="11"] > [data-field-span="9"] { width: 81.81818%; } 92 | .grid-form [data-row-span="11"] > [data-field-span="10"] { width: 90.90909%; } 93 | .grid-form [data-row-span="11"] > [data-field-span="11"] { width: 100%; } 94 | .grid-form [data-row-span="12"] > [data-field-span="1"] { width: 8.33333%; } 95 | .grid-form [data-row-span="12"] > [data-field-span="2"] { width: 16.66667%; } 96 | .grid-form [data-row-span="12"] > [data-field-span="3"] { width: 25%; } 97 | .grid-form [data-row-span="12"] > [data-field-span="4"] { width: 33.33333%; } 98 | .grid-form [data-row-span="12"] > [data-field-span="5"] { width: 41.66667%; } 99 | .grid-form [data-row-span="12"] > [data-field-span="6"] { width: 50%; } 100 | .grid-form [data-row-span="12"] > [data-field-span="7"] { width: 58.33333%; } 101 | .grid-form [data-row-span="12"] > [data-field-span="8"] { width: 66.66667%; } 102 | .grid-form [data-row-span="12"] > [data-field-span="9"] { width: 75%; } 103 | .grid-form [data-row-span="12"] > [data-field-span="10"] { width: 83.33333%; } 104 | .grid-form [data-row-span="12"] > [data-field-span="11"] { width: 91.66667%; } 105 | .grid-form [data-row-span="12"] > [data-field-span="12"] { width: 100%; } 106 | 107 | /*# sourceMappingURL=gridforms.css.map */ 108 | -------------------------------------------------------------------------------- /vendor/gridforms.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["gridforms.sass"], 5 | "names": [], 6 | "file": "gridforms.css" 7 | } 8 | --------------------------------------------------------------------------------