purist-css
Version:
Purist a complete reimagining of Yahoo's Pure to be less opinionated and more abstracted.
802 lines (689 loc) • 16.2 kB
CSS
/* ==========================================================================
#base-core
========================================================================== */
/*
#img-fluid
========================================================================== */
/**
* The img-fluid utility is used to make images fluid.
*
* Usage:
*
* <img class="u-image-fluid">
*/
.u-image-fluid {
display: block;
height: auto;
max-width: 100%;
}
/* ==========================================================================
#sections-core
========================================================================== */
/*
section
========================================================================== */
/**
* The section object sections off content from the rest of the document.
*
* Usage:
*
* <div class="o-section">
* <div class="o-section__body"></div>
* </div>
*/
.o-section,
.o-box {
box-sizing: border-box;
}
.o-section:after,
.o-box:after {
display: table;
content: "";
clear: both;
}
.o-section__body {
margin: 0 auto;
}
/*
box
========================================================================== */
/**
* The box object boxes off content from the rest of the document.
*
* Usage:
*
* <div class="o-box">
* </div>
*/
.o-box {
display: block;
}
.o-box > :last-child {
margin-bottom: 0;
}
/* ==========================================================================
#buttons-core
========================================================================== */
/*
button
========================================================================== */
/**
* The button object applies a flat button style to buttons and hyperlinks.
*
* Usage:
*
* <input class="o-button" type="submit">
*/
.o-button {
display: inline-block;
zoom: 1;
white-space: nowrap;
vertical-align: middle;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
outline: 0;
}
.o-button::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
button--disabled
========================================================================== */
/**
* The button--disabled modifier applies a disabled state to buttons.
*
* Usage:
*
* <input class="o-button o-button--disabled" type="submit">
*/
.o-button--disabled,
.o-button[disabled] {
pointer-events: none;
}
/* ==========================================================================
#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;
}
/*
#grid
========================================================================== */
/**
* The grid object is used to create a fluid grid.
*
* Usage:
*
* <div class="o-grid">
* <div class="o-grid__item"></div>
* <div class="o-grid__item"></div>
* <div class="o-grid__item"></div>
* </div>
*/
.o-grid {
margin-left: -1.5em;
}
.o-grid:after {
display: table;
content: "";
clear: both;
}
.o-grid__item {
float: left;
padding-left: 1.5em;
box-sizing: border-box;
}
/*
#width
========================================================================== */
/**
* The width utility classes set the widths on grid items for normal displays.
*
* Usage:
*
* <div class="o-grid">
* <div class="o-grid__item u-w-1-3"></div>
* <div class="o-grid__item u-w-1-3"></div>
* <div class="o-grid__item u-w-1-3"></div>
* </div>
*/
/* Large */
.u-w-1-1 { width: 100%; }
.u-w-1-2 { width: 50%; }
.u-w-1-3 { width: 33.3%; }
.u-w-1-4 { width: 25%; }
.u-w-2-3 { width: 66.6%; }
.u-w-3-4 { width: 75%; }
.u-w-1-5 { width: 20%; }
.u-w-2-5 { width: 40%; }
.u-w-3-5 { width: 60%; }
.u-w-4-5 { width: 80%; }
/* Medium */
@media (max-width: 48em) {
.u-mw-1-1 { width: 100%; }
.u-mw-1-2 { width: 50%; }
.u-mw-1-3 { width: 33.3%; }
.u-mw-1-4 { width: 25%; }
.u-mw-2-3 { width: 66.6%; }
.u-mw-3-4 { width: 75%; }
.u-mw-hide { display: none; }
}
/* Small */
@media (max-width: 35.5em) {
.u-sw-1-1 { width: 100%; }
.u-sw-1-2 { width: 50%; }
.u-sw-1-3 { width: 33.3%; }
.u-sw-1-4 { width: 25%; }
.u-sw-2-3 { width: 66.6%; }
.u-sw-3-4 { width: 75%; }
.u-sw-hide { display: none; }
}
/* ==========================================================================
#lists-core
========================================================================== */
/*
list-stack
========================================================================== */
/**
* The list-stack object is used to create vertical lists without bullets or
* indentation.
*
* Usage:
*
* <ul class="o-list-stack">
* <li></li>
* <li></li>
* <li></li>
* </ul>
*/
.o-list-stack,
.o-list-inline {
margin-left: 0;
padding-left: 0;
list-style: none;
}
/*
list-inline
========================================================================== */
/**
* The list-inline object is used to create inline lists without bullets or
* indentation.
*
* Usage:
*
* <ul class="o-list-inline">
* <li></li>
* <li></li>
* <li></li>
* </ul>
*/
.o-list-inline > li {
display: inline-block;
}
/* ==========================================================================
#tables-core
========================================================================== */
/*
table
========================================================================== */
/**
* The table object applies common table patterns to tables.
*
* 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 {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.o-table th {
text-align: left;
}
/*
#table--rows
========================================================================== */
/**
* The table--rows modifier applies a thin border above each row.
*
* Usage:
*
* <table class="o-table o-table--rows">
* <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 {
border-top: 1px solid;
}
/*
#table--cells
========================================================================== */
/**
* The table--cells modifier applies a thin border around each cell.
*
* 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--cells th,
.o-table--cells td {
border: 1px solid;
}
/* ==========================================================================
#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;
}