bevel.css 0.2.0

Everything the money demo had to work around or would have been better with, apart from the file input.

Added

• Input add-ons: .input-prepend and .input-append with .add-on put a unit or fixed part of the value, such as $, MB or git@, beside a field. The add-on's place in the markup picks its side, it takes the error state's tint, and the group shrinks the field rather than widen the page.
• Pagination: .pagination joins page links into one 36px strip, with hover, focus, a current page that sinks in like a pressed button (aria-current="page" or .active) and pages you can't go to (a span, aria-disabled or .disabled). It wraps on a narrow screen.
• Wells and empty states: .well is 2.0's inset panel, and its last block drops its bottom margin. .well-empty centers a muted message and an action, for a list with nothing in it.
• Progress bars: .progress with a .bar set to a width inline, in default blue, .progress-success, .progress-warning and .progress-danger, plus .progress-striped and the animated .progress.active. The blue and red bars use the primary and danger buttons' gradients, with green and amber at the same depth, so every bar keeps 3:1 against its track. Reduced motion stops the stripes.
• Stats: .stats on a <dl> sets each <dd> as a 30px figure under a muted label, with a <small> for its unit. Add .row to set the figures side by side, and .well on each pair to put it in a panel.
• A documented pattern for confirming before deleting: a plain link to a confirmation page that says what will go and holds the one red button. No CSS; see Patterns in reference.html and demo/erase.html.
• .visually-hidden, for text only screen readers get: a field's label, or the words for an icon-only button.
• Tokens: --bv-space-7 (36px), --bv-progress-<variant>-top and -bottom, and --bv-shadow-pagination, --bv-shadow-well, --bv-shadow-progress and --bv-shadow-progress-bar.

Changed

• Headings get space around them: 9px below, and 18px above unless they start their container. A heading no longer sits on the form label or table under it. Headings in .page-header and .hero-unit keep no margin. This changes the spacing of every page with headings in its content.
• .row ends with an 18px margin, and each column, and the last block in it, drops its own, so the space after a row is always 18px. Rows whose columns ended in text or a paragraph had 0 or 9px after them and now have 18px. On a narrow screen, stacked columns that ended in a table or form sit 18px closer together.

Using it

Download bevel-0.2.0.css below, copy it into your app's static folder and link it before your own stylesheet. Upgrading from 0.1.0: copy the new file in, update the link, delete the old file and check the app; headings and rows now have space around them, so pages with headings in their content will shift.