diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js index 46c99986e..2ec1c2bcf 100644 --- a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js +++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js @@ -1,10 +1,13 @@ import React, { Fragment } from 'react' import { FastField, useFormikContext } from 'formik' +import classnames from 'classnames' import Header from './header' import { Table, DefaultRow } from '../../../../../Form/table' +import './style.css' + const Row = ({ index: rowIndex, name, data, arrayHelpers }) => { columns={ columns } header={ Header } defaultItem={ Array(columns).fill('') } - className="border-top-0" + className={ classnames({ + 'table': true, + 'grid': true, + 'grid-slim': columns > 5, + 'border-top-0 border-bottom': true, + }) } /> } diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/style.css b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/style.css new file mode 100644 index 000000000..e8057e24a --- /dev/null +++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/style.css @@ -0,0 +1,23 @@ +/* Reduce padding in a grid dropdown-toggle button */ +table.grid th .input-group button.dropdown-toggle { + padding: 0.5rem 0.8rem; +} + +/* Reduce size of input group dropdown toggle, + and hide icon, if columns are very narrow. */ +table.grid.grid-slim th .input-group button.dropdown-toggle { + padding: 0.5rem; +} + +table.grid.grid-slim th .input-group button.dropdown-toggle i { + display: none; +} + +table.grid.grid-slim th .input-group button.dropdown-toggle::after { + margin-left: 0; +} + +/* Highlight active dropdown item */ +.dropdown-menu .dropdown-item.dropdown-item-active { + background-color: var(--light); +}