five-for-the-future/themes/wporg-5ftf/css/objects/_pledge-form.scss
Kelly Dwan 0f675ae6c3
Create Pledge: Make form functional (#31)
This broadly enables & styles the pledge forms across the frontend and wp-admin.

- Switches field `readonly` control to a variable called `$readonly`
- Create `PledgeMeta\get_pledge_meta()` which will fetch data from `$_POST`, a pledge post, or defaults.
- Add Number of Employees field
- Update form content to match mockup:
  - fields now have help text
  - success message uses content from mockup
  - logo field is moved to the "org info" section
- Style form in theme, add some similar styles to the admin

Fixes #7, fixes #28
2019-10-08 18:29:35 -04:00

60 lines
856 B
SCSS

.pledge-form {
.form-field {
margin-bottom: ms(4);
label {
margin-bottom: ms(-5);
display: inline-block;
font-weight: 600;
font-size: 16px;
color: $color__text-input;
}
input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
textarea {
display: block;
width: 100%;
padding: ms(-5) ms(-2);
background: $color__background-input;
border: 1px solid $color__border-input;
box-shadow: none;
}
input[type="number"] {
max-width: 10em;
height: auto;
}
> p {
margin-top: ms(-5);
font-size: ms(-2);
}
}
.form-field__logo {
input {
padding: ms(-6) 0;
line-height: 1;
}
}
.form-field__agree {
label {
margin-bottom: 0;
}
}
input[type="submit"] {
display: inline-block;
height: auto;
padding: ms(-3) ms(0);
font-weight: 600;
}
}