Fixes: CNVS-15541
New forms CSS, built from scratch to make it easier
for Canvas developers to build responsive, accessible,
and beautifully laid-out form UIs.
The new forms CSS is:
- Responsive. Everything should scale down nicely for
smaller screen sizes.
- Accessibile out of the box. Revamped :focus styles
for the high-contrast UI.
- Browser tested on IE10/11, Firefox, Webkit and iOS
- Interoperable. All forms components should work
together in almost any configuration. Plenty of examples
are included for building all types of form UI.
- Backwards-compatible. The existing Bootstrap 2.x
forms are not affected by this commit. Everything is
scoped under new .ic- classes.
- Easy on the eye: new custom checkboxes and radio
buttons, as well as updated form message boxes for
warning, error, and success states.
QA Test Plan:
- Go to /styleguide and click on Forms CSS on the left
menu.
- Test each example.
- Please note that this work should not affect any current
forms in Canvas. Unless a form element has one of the new
.ic- classes, it won't inherit any of the new styles.
Change-Id: I9d9c2c13b6c8ce714433f47efe86343528738fbc
Reviewed-on: https://gerrit.instructure.com/46841
Tested-by: Jenkins
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
QA-Review: Nathan Rogowski <nathan@instructure.com>
8a1f723162
