Add form component styling

This commit is contained in:
David Craig 2016-04-21 14:49:27 +12:00 committed by Ingo Schommer
parent 58036cd156
commit 1ad6730b9e
4 changed files with 14 additions and 4 deletions

View File

@ -5,7 +5,7 @@ class GridFieldTable extends SilverStripeComponent {
render() {
return (
<div className="container-fluid grid-field">
<div className="grid-field">
<table className="table table-hover grid-field__table">
<thead>{this.generateHeader()}</thead>
<tbody>{this.generateRows()}</tbody>

View File

@ -18,14 +18,18 @@ class Form extends SilverStripeComponent {
}
render() {
const props = Object.assign({ onSubmit: this.handleSubmit }, this.props.attributes);
const defaultFormProps = {
className: 'container-fluid form-component',
onSubmit: this.handleSubmit,
};
const formProps = Object.assign({}, this.props.attributes, defaultFormProps);
const fields = this.props.mapFieldsToComponents(this.props.fields);
const actions = this.props.mapActionsToComponents(this.props.actions);
return (
<form {...props}>
<form {...formProps}>
{fields &&
<fieldset className="form-group">
<fieldset>
{fields}
</fieldset>
}

View File

@ -0,0 +1,4 @@
.form-component {
padding-top: $spacer-y;
padding-bottom: $spacer-y;
}

View File

@ -34,6 +34,8 @@
@import "../components/HiddenField/HiddenField";
@import "../components/Label/Label";
@import "../components/Preview/Preview";
@import "../components/NorthHeader/NorthHeader";
@import "../components/Form/Form";
// Layout and sections
@import "layout";