purist-css
Version:
Purist a complete reimagining of Yahoo's Pure to be less opinionated and more abstracted.
347 lines (298 loc) • 6.7 kB
CSS
/* ==========================================================================
#sections-core
========================================================================== */
/*
section
========================================================================== */
/**
* The skin for the section object.
*
* Usage:
*
* <div class="o-section">
* <div class="o-section__body"></div>
* </div>
*/
.o-section__body {
max-width: 90%;
padding: 1em 0;
}
@media (min-width: 80em) {
.o-section__body {
max-width: 980px;
}
}
/*
box
========================================================================== */
/**
* The box object boxes off content from the rest of the document.
*
* Usage:
*
* <div class="o-box">
* </div>
*/
.o-box {
padding: 1em;
}
/* ==========================================================================
#buttons-skin
========================================================================== */
/*
button
========================================================================== */
/**
* The skin for the button object.
*
* Usage:
*
* <input class="o-button" type="submit">
*/
.o-button {
padding: .5em 1em;
border: 1px solid transparent;
border-radius: 3px;
background-color: #313439;
color: #fff;
}
.o-button:hover {
opacity: .85;
}
.o-button:active {
opacity: 1;
}
/*
button--disabled
========================================================================== */
/**
* The skin for the disabled modifier.
*
* Usage:
*
* <input class="o-button o-button--disabled" type="submit">
*/
.o-button--disabled,
.o-button[disabled] {
opacity: .65;
}
/*
--primary
========================================================================== */
/**
* The skin for the primary modifier.
*
* Usage:
*
* <input class="o-button o-button--primary" type="submit">
*/
.o-button--primary {
background-color: #1c86f2;
}
/*
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%;
}
/* ==========================================================================
#lists-core
========================================================================== */
/*
list-stack
========================================================================== */
/**
* The skin for the list-stack object.
*
* Usage:
*
* <ul class="o-list-stack">
* <li></li>
* <li></li>
* <li></li>
* </ul>
*/
.o-list-stack > li:not(:first-child) {
padding-top: 1em;
}
/*
list-inline
========================================================================== */
/**
* The skin for the list-inline object.
*
* Usage:
*
* <ul class="o-list-inline">
* <li></li>
* <li></li>
* <li></li>
* </ul>
*/
.o-list-inline > li:not(:first-child) {
padding-left: 1em;
}
/* ==========================================================================
#tables-skin
========================================================================== */
/*
table
========================================================================== */
/**
* The skin for the table object.
*
* Usage:
*
* <table class="o-table">
* <thead>
* <tr>
* <th></th>
* <th></th>
* <th></th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td></td>
* <td></td>
* <td></td>
* </tr>
* </tbody>
* </table>
*/
.o-table th,
.o-table td {
padding: .5em 1em;
}
/*
#table--rows/cells
========================================================================== */
/**
* The skin for tha table--rows and table--cells modifier.
*
* Usage:
*
* <table class="o-table o-table--cells">
* <thead>
* <tr>
* <th></th>
* <th></th>
* <th></th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td></td>
* <td></td>
* <td></td>
* </tr>
* </tbody>
* </table>
*/
.o-table--rows td,
.o-table--cells th,
.o-table--cells td {
border-color: #e1e1e1;
}
/*
#table--zebra
========================================================================== */
/**
* The skin for the table--zebra modifier.
*
* Usage:
*
* <table class="o-table o-table--zebra">
* <thead>
* <tr>
* <th></th>
* <th></th>
* <th></th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td></td>
* <td></td>
* <td></td>
* </tr>
* </tbody>
* </table>
*/
.o-table--zebra tbody > tr:nth-child(even) {
background-color: #f8f8f8;
}