purist-css/src/forms/forms-core.css

Purist a complete reimagining of Yahoo's Pure to be less opinionated and more abstracted.

/* ==========================================================================
   #forms-core
   ========================================================================== */

/* 
   form-label
   ========================================================================== */

/**
 * The form-label element changes the margin and display on label controls.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form-label"></label>
 *         <input class="o-form-input">
 *     </div>
 * </form>
 */

.o-form__label {
	display: block;
}

/* 
   form-input
   ========================================================================== */

/**
 * The form__input element applies a flat input style to input controls.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label"></label>
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__input {
	display: inline-block;
	border: 1px solid;
	vertical-align: middle;
	box-sizing: border-box;		
}

/* 
   form--block
   ========================================================================== */

/**
 * The form--block modifier makes all input controls full-width.
 *
 * Usage:
 *
 * <form class="o-form o-form--block">
 *     <div class="o-form__item">
 *         <label class="o-form__label"></label>
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form--block .o-form__input {
 	display: block;
 	width: 100%;
 }

 /* 
   form--inline
   ========================================================================== */

/**
 * The form--inline modifier aligns labels and inputs side-by-side.
 *
 * Usage:
 *
 * <form class="o-form o-form--inline">
 *     <div class="o-form__item">
 *         <label class="o-form__label"></label>
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form--inline .o-form__label {
	display: inline-block;
}