purist-css/src/forms/forms-skin.css

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

/* 
   form__item
   ========================================================================== */

/**
 * The skin for the form__item element.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__item:not(:last-child) {
	margin-bottom: .5em;
}

/* 
   form__label
   ========================================================================== */

/**
 * The skin for the form__label element.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__label {
	margin-bottom: .25em;
}

/* 
   form__input
   ========================================================================== */

/**
 * The skin for the form__input element.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__input {
	padding: .5em .6em;	
	border: 1px solid #d4d4d4;	
	border-radius: 3px;
}

	.o-form__input:focus {
		border: 1px solid #1c86f2;
		outline: 0;
		outline: thin dotted \9;
	}

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

/**
 * The skin for the form--inline modifier.
 *
 * Usage:
 *
 * <form class="o-form o-form--inline">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form--inline .o-form__label {
	margin-bottom: 0;
	width: 15%; 
}