rizzo-next
Version:
The next generation of Lonely Planet's style guide and pattern library.
5,466 lines • 66.7 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="<p>Lonely Planet's style guide and pattern library.</p>
">
<link href="http://fonts.googleapis.com/css?family=Nunito:300,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600italic,600,700,700italic,900,300italic,300,200italic,200" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="http://lonelyplanet.com/favicon.ico" />
<title></title>
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<nav class="side-nav">
<ul class="social">
<li><a class="github" href="https://github.com/lonelyplanet/rizzo-next">GitHub / Install</a></li>
<li><a class="twitter" href="https://twitter.com/lplabs">Twitter</a></li>
<li><a class="gitter" href="https://gitter.im/lonelyplanet/rizzo-nexgt">Gitter</a></li>
</ul>
<a class="logo-container" href="//rizzo.lonelyplanet.com">
<img alt="rizzo-next Logo" class="logo" src="https://s3.amazonaws.com/static-asset/lonelyplanet-logo.png">
</a>
<ul class="list">
<li class="title">
<a href="#mixin">
<h3 class="type-heading">mixins</h3>
</a>
</li>
<li><a href="#segment">segment</a></li>
<li><a href="#container">container</a></li>
<li><a href="#icon-before">icon-before</a></li>
<li><a href="#clearfix">clearfix</a></li>
<li><a href="#respond-to">respond-to</a></li>
<li><a href="#best-fit-padding">best-fit-padding</a></li>
<li><a href="#hardware-acceleration">hardware-acceleration</a></li>
<li><a href="#z-layer">z-layer</a></li>
<li><a href="#divider">divider</a></li>
<li><a href="#component-width">component-width</a></li>
<li><a href="#author-image">author-image</a></li>
<li><a href="#author-creds">author-creds</a></li>
<li><a href="#author-name">author-name</a></li>
<li><a href="#author-title">author-title</a></li>
<li><a href="#see-more-link">see-more-link</a></li>
<li><a href="#css-arrow-central">css-arrow-central</a></li>
<li><a href="#size">size</a></li>
<li><a href="#placeholder">placeholder</a></li>
<li><a href="#visuallyhidden">visuallyhidden</a></li>
<li><a href="#form-control">form-control</a></li>
<li><a href="#fade-edge">fade-edge</a></li>
<li><a href="#h1-props">h1-props</a></li>
<li><a href="#h3-props">h3-props</a></li>
<li><a href="#h4-props">h4-props</a></li>
<li><a href="#h5-props">h5-props</a></li>
<li><a href="#h1">h1</a></li>
<li class="title">
<a href="#function">
<h3 class="type-heading">functions</h3>
</a>
</li>
<li><a href="#percent">percent</a></li>
<li><a href="#em">em</a></li>
<li><a href="#strip-unit">strip-unit</a></li>
<li><a href="#strip-units">strip-units</a></li>
<li class="title">
<a href="#variable">
<h3 class="type-heading">variables</h3>
</a>
</li>
<li><a href="#min-width">min-width</a></li>
<li><a href="#max-width">max-width</a></li>
<li><a href="#spacing">spacing</a></li>
<li><a href="#gutter">gutter</a></li>
<li><a href="#radius">radius</a></li>
<li><a href="#color-primary">color-primary</a></li>
<li><a href="#color-text">color-text</a></li>
<li><a href="#min-1290">min-1290</a></li>
<li><a href="#min-1200">min-1200</a></li>
<li><a href="#min-1080">min-1080</a></li>
<li><a href="#min-1024">min-1024</a></li>
<li><a href="#min-960">min-960</a></li>
<li><a href="#min-840">min-840</a></li>
<li><a href="#min-768">min-768</a></li>
<li><a href="#min-720">min-720</a></li>
<li><a href="#min-600">min-600</a></li>
<li><a href="#min-560">min-560</a></li>
<li><a href="#min-480">min-480</a></li>
<li><a href="#min-360">min-360</a></li>
<li><a href="#min-320">min-320</a></li>
</ul>
</nav>
<div class="main-content">
<header class="search-bar">
<section data-role="content-wrapper">
<div class="meta-data">
<h1>Rizzo-next <span>0.9.10</span></h1>
</div>
<div class="search-form" data-role="search-form">
<input name="search" type="text" class="search-field" autocomplete="off" autofocus id="search-field" placeholder="Search documentation..." />
<ul class="suggestion-container"></ul>
</div>
</section>
</header>
<section class="main-inner">
<h1 id="mixin" class="type-title">
<span data-role="content-wrapper">
mixins
</span>
</h1>
<section class="mixins">
<article id="segment" data-name="segment" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#segment">
segment
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_base_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin segment() { ... }</code></pre>
</div>
<p><p>Use to separate components on the page.</p>
<h3 id="modifiers">Modifiers</h3>
<ul>
<li><code>--grey</code> modifier to change the background color</li>
</ul>
</p>
<p>This mixin takes no parameters.</p>
<section class="example">
<h3 class="sub-heading">Example</h3>
<pre class="code language-css"><code>.segment {
@include segment();
}</code></pre>
</section>
</div>
</article>
<article id="container" data-name="container" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#container">
container
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_base_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin container() { ... }</code></pre>
</div>
<p><p>Create a container element to wrap segments</p>
<h3 id="modifiers">Modifiers</h3>
<ul>
<li><code>--slim</code> removes the gutters</li>
<li><code>--narrow</code> smaller width</li>
<li><code>--half</code> half of the max width</li>
</ul>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="icon-before" data-name="icon-before" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#icon-before">
icon-before
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_icons_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin icon-before($uri) { ... }</code></pre>
</div>
<p><p>Use in an icon to add it to the before selector</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$uri</code>
<ul class="meta">
<span class="type-label">string</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>The icon uri to add</p>
</div>
</dd>
</dl>
</div>
</article>
<article id="clearfix" data-name="clearfix" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#clearfix">
clearfix
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin clearfix() { ... }</code></pre>
</div>
<p><p>A simple clearfix helper</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="respond-to" data-name="respond-to" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#respond-to">
respond-to
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin respond-to($screen-width, $method: 'min') { ... }</code></pre>
</div>
<p><p>Set up a media query passing a value to use for min width</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$screen-width</code>
<ul class="meta">
<span class="type-label">number</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>A value for the media query</p>
</div>
</dd>
<dt class="parameter">
<code class="name">$method</code>
<ul class="meta">
<span class="type-label">string</span>
<span class="default-label">
Default:<code>'min'</code>
</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>'min' or 'max'</p>
</div>
</dd>
</dl>
<section class="example">
<h3 class="sub-heading">Example</h3>
<pre class="code language-sass"><code>.header {
@include respond-to($min-1290) {
}
}</code></pre>
</section>
</div>
</article>
<article id="best-fit-padding" data-name="best-fit-padding" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#best-fit-padding">
best-fit-padding
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin best-fit-padding($imageWidth, $imageHeight) { ... }</code></pre>
</div>
<p><p>Providing an image width and height, provides the correct aspect ratio via padding-bottom %
This should be used with an element of a height of 0, so that the height is determined by the padding-bottom
rather than the element's height property</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$imageWidth</code>
<ul class="meta">
<span class="type-label">number</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>The width of the image</p>
</div>
</dd>
<dt class="parameter">
<code class="name">$imageHeight</code>
<ul class="meta">
<span class="type-label">number</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>The height of the image</p>
</div>
</dd>
</dl>
</div>
</article>
<article id="hardware-acceleration" data-name="hardware-acceleration" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#hardware-acceleration">
hardware-acceleration
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin hardware-acceleration() { ... }</code></pre>
</div>
<p><p>Hack to force GPU rendering (most in the community argue this should be used quite sparingly!!)</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="z-layer" data-name="z-layer" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#z-layer">
z-layer
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin z-layer() { ... }</code></pre>
</div>
<p><p>A mixin to help clean up z-index madness. Options are: <code>below</code>, <code>default</code>, <code>middle</code>, <code>top</code>, and <code>modal</code> [/doc]</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="divider" data-name="divider" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#divider">
divider
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin divider() { ... }</code></pre>
</div>
<p><p>Standard divider used between sections</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="component-width" data-name="component-width" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#component-width">
component-width
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin component-width() { ... }</code></pre>
</div>
<p><p>Sets max width and centers component</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="author-image" data-name="author-image" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#author-image">
author-image
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin author-image($mobile, $orientation: 'vertical') { ... }</code></pre>
</div>
<p><p>Style the author's image</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$mobile</code>
<ul class="meta">
<span class="type-label">boolean</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>No description available.</p>
</div>
</dd>
<dt class="parameter">
<code class="name">$orientation</code>
<ul class="meta">
<span class="type-label">string</span>
<span class="default-label">
Default:<code>'vertical'</code>
</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>'vertical' or 'horizontal'</p>
</div>
</dd>
</dl>
</div>
</article>
<article id="author-creds" data-name="author-creds" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#author-creds">
author-creds
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin author-creds($mobile) { ... }</code></pre>
</div>
<p><p>Style the author's credentials</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$mobile</code>
<ul class="meta">
<span class="type-label">boolean</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>No description available.</p>
</div>
</dd>
</dl>
</div>
</article>
<article id="author-name" data-name="author-name" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#author-name">
author-name
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin author-name($mobile) { ... }</code></pre>
</div>
<p><p>Style the author's name</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$mobile</code>
<ul class="meta">
<span class="type-label">boolean</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>No description available.</p>
</div>
</dd>
</dl>
</div>
</article>
<article id="author-title" data-name="author-title" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#author-title">
author-title
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin author-title($mobile) { ... }</code></pre>
</div>
<p><p>Style an author's Title</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$mobile</code>
<ul class="meta">
<span class="type-label">boolean</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>No description available.</p>
</div>
</dd>
</dl>
</div>
</article>
<article id="see-more-link" data-name="see-more-link" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#see-more-link">
see-more-link
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin see-more-link() { ... }</code></pre>
</div>
<p><p>Used for the see more links at the bottom of components</p>
</p>
<p>This mixin takes no parameters.</p>
<section class="example">
<h3 class="sub-heading">Example</h3>
<pre class="code language-sass"><code>.survival_guide__button-container {
@include see-more-link;
}</code></pre>
</section>
</div>
</article>
<article id="css-arrow-central" data-name="css-arrow-central" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#css-arrow-central">
css-arrow-central
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin css-arrow-central() { ... }</code></pre>
</div>
<p><p>Css arrow, currently only used in date picker</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="size" data-name="size" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#size">
size
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin size() { ... }</code></pre>
</div>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="placeholder" data-name="placeholder" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#placeholder">
placeholder
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin placeholder() { ... }</code></pre>
</div>
<p><p>Placeholder</p>
<p>Outputs vendor-prefixed placeholders for styling. Must be nested in a
rule-set.</p>
</p>
<p>This mixin takes no parameters.</p>
<section class="example">
<h3 class="sub-heading">Example</h3>
<pre class="code language-scss"><h4 class="description"><p>Usage</p>
</h4><code>input {
@include placeholder {
color: #999;
}
}</code></pre>
</section>
</div>
</article>
<article id="visuallyhidden" data-name="visuallyhidden" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#visuallyhidden">
visuallyhidden
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin visuallyhidden() { ... }</code></pre>
</div>
<p><p>Visually Hidden</p>
<p>Hide only visually, but have it available for screen readers
<a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">http://snook.ca/archives/html_and_css/hiding-content-for-accessibility</a></p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="form-control" data-name="form-control" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#form-control">
form-control
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin form-control($type: "text") { ... }</code></pre>
</div>
<p><p>Includes a form control</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$type</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="default-label">
Default:<code>"text"</code>
</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>The input type of the control; accepts "text" or "select"</p>
</div>
</dd>
</dl>
<section class="example">
<h3 class="sub-heading">Example</h3>
<pre class="code language-scss"><code>textarea,
input[type="text"] {
@include form-control;
}
select {
@include form-control("select");
}</code></pre>
</section>
</div>
</article>
<article id="fade-edge" data-name="fade-edge" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#fade-edge">
fade-edge
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin fade-edge($side, $offset: 0, $width: 3rem) { ... }</code></pre>
</div>
<p><p>Apply to a <code>:before</code> or <code>:after</code> psuedo element to create a soft fade on an
edge. Typically used to hide overflow and therefore best used with
<code>overflow: hidden;</code> and <code>white-space: nowrap;</code>.</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$side</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>left or right</p>
</div>
</dd>
<dt class="parameter">
<code class="name">$offset</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="default-label">
Default:<code>0</code>
</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>Amount of offset</p>
</div>
</dd>
<dt class="parameter">
<code class="name">$width</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="default-label">
Default:<code>3rem</code>
</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>Width of the fade</p>
</div>
</dd>
</dl>
<section class="example">
<h3 class="sub-heading">Example</h3>
<pre class="code language-scss"><code>.text {
color: #333;
font-size: 1em;
overflow: hidden;
white-space: nowrap;
width: 400px;
&:after {
@include fade-edge("right");
}
}</code></pre>
</section>
</div>
</article>
<article id="h1-props" data-name="h1-props" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#h1-props">
h1-props
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_text_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin h1-props() { ... }</code></pre>
</div>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="h3-props" data-name="h3-props" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#h3-props">
h3-props
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_text_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin h3-props() { ... }</code></pre>
</div>
<p><p>TODO: Refactor this</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="h4-props" data-name="h4-props" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#h4-props">
h4-props
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_text_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin h4-props() { ... }</code></pre>
</div>
<p><p>TODO: Refactor this</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="h5-props" data-name="h5-props" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#h5-props">
h5-props
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_text_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin h5-props() { ... }</code></pre>
</div>
<p><p>TODO: Refactor this</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
<article id="h1" data-name="h1" data-type="mixin" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#h1">
h1
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/typography/_headings_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@mixin h1() { ... }</code></pre>
</div>
<p><p>Mixin for main headers</p>
</p>
<p>This mixin takes no parameters.</p>
</div>
</article>
</section>
<h1 id="function" class="type-title">
<span data-role="content-wrapper">
functions
</span>
</h1>
<section class="functions">
<article id="percent" data-name="percent" data-type="function" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#percent">
percent
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_functions.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@function percent($target, $context) { ... }</code></pre>
</div>
<p><p>Convert a pixel value to a percentage value</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$target</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>Pixel value of element width</p>
</div>
</dd>
<dt class="parameter">
<code class="name">$context</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>Pixel value of element's container width</p>
</div>
</dd>
</dl>
<h3 class="sub-heading">Returns</h3>
<p class="item-description"><p>Percentage value</p>
String
</p>
</div>
</article>
<article id="em" data-name="em" data-type="function" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#em">
em
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_functions.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@function em($pixel, $base: 16px) { ... }</code></pre>
</div>
<p><p>Convert a pixel value to an em value</p>
<p>For a relational value, the input is calculated based on a parent value.
The default parent is 16px. The parent can be changed by passing an
optional second value.</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$pixel</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>Pixel value to convert</p>
</div>
</dd>
<dt class="parameter">
<code class="name">$base</code>
<ul class="meta">
<span class="type-label">String</span>
<span class="default-label">
Default:<code>16px</code>
</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>Base pixel value</p>
</div>
</dd>
</dl>
<h3 class="sub-heading">Returns</h3>
<p class="item-description"><p>em value</p>
String
</p>
</div>
</article>
<article id="strip-unit" data-name="strip-unit" data-type="function" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#strip-unit">
strip-unit
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_mixins.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@function strip-unit() { ... }</code></pre>
</div>
<p>This function takes no parameters.</p>
</div>
</article>
<article id="strip-units" data-name="strip-units" data-type="function" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#strip-units">
strip-units
</a>
</h2>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>@function strip-units($number) { ... }</code></pre>
</div>
<p><p>Removes units from a number string</p>
</p>
<h3 class="sub-heading">Parameters</h3>
<dl class="parameters">
<dt class="parameter">
<code class="name">$number</code>
<ul class="meta">
<span class="type-label">string</span>
<span class="required-label">Required</span>
</ul>
</dt>
<dd class="parameter-definition">
<div class="description">
<p>The string to remove units from</p>
</div>
</dd>
</dl>
</div>
</article>
</section>
<h1 id="variable" class="type-title">
<span data-role="content-wrapper">
variables
</span>
</h1>
<section class="variables">
<article id="min-width" data-name="min-width" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-width">
min-width
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-width: 32rem;</code></pre>
</div>
<p><p>Page min width</p>
</p>
</div>
</article>
<article id="max-width" data-name="max-width" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#max-width">
max-width
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$max-width: 129rem;</code></pre>
</div>
<p><p>Page max width</p>
</p>
</div>
</article>
<article id="spacing" data-name="spacing" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#spacing">
spacing
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$spacing: 1.5rem;</code></pre>
</div>
<p><p>Text and inline spacing</p>
</p>
</div>
</article>
<article id="gutter" data-name="gutter" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#gutter">
gutter
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$gutter: 3.0rem;</code></pre>
</div>
<p><p>Gutter and block level spacing</p>
</p>
</div>
</article>
<article id="radius" data-name="radius" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#radius">
radius
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$radius: .2rem;</code></pre>
</div>
<p><p>Default border radius</p>
</p>
</div>
</article>
<article id="color-primary" data-name="color-primary" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#color-primary">
color-primary
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$color-primary: $color-blue;</code></pre>
</div>
<p><p>LP Primary blue color</p>
</p>
</div>
</article>
<article id="color-text" data-name="color-text" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#color-text">
color-text
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$color-text: #474f5a;</code></pre>
</div>
<p><p>Main Text Color</p>
</p>
</div>
</article>
<article id="min-1290" data-name="min-1290" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-1290">
min-1290
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-1290: #{(1290 * 0.0625)}em;</code></pre>
</div>
<p><p>1290px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-1200" data-name="min-1200" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-1200">
min-1200
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-1200: #{(1200 * 0.0625)}em;</code></pre>
</div>
<p><p>1200px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-1080" data-name="min-1080" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-1080">
min-1080
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-1080: #{(1080 * 0.0625)}em;</code></pre>
</div>
<p><p>1080px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-1024" data-name="min-1024" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-1024">
min-1024
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-1024: #{(1024 * 0.0625)}em;</code></pre>
</div>
<p><p>1024px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-960" data-name="min-960" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-960">
min-960
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-960: #{(960 * 0.0625)}em;</code></pre>
</div>
<p><p>960px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-840" data-name="min-840" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-840">
min-840
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-840: #{(840 * 0.0625)}em;</code></pre>
</div>
<p><p>840px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-768" data-name="min-768" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-768">
min-768
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-768: #{(768 * 0.0625)}em;</code></pre>
</div>
<p><p>768px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-720" data-name="min-720" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-720">
min-720
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-720: #{(720 * 0.0625)}em;</code></pre>
</div>
<p><p>720px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-600" data-name="min-600" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-600">
min-600
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-600: #{(600 * 0.0625)}em;</code></pre>
</div>
<p><p>600px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-560" data-name="min-560" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-560">
min-560
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-560: #{(560 * 0.0625)}em;</code></pre>
</div>
<p><p>560px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-480" data-name="min-480" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-480">
min-480
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-480: #{(480 * 0.0625)}em;</code></pre>
</div>
<p><p>480px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-360" data-name="min-360" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-360">
min-360
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-360: #{(360 * 0.0625)}em;</code></pre>
</div>
<p><p>360px min width breakpoint</p>
</p>
</div>
</article>
<article id="min-320" data-name="min-320" data-type="variable" class="item"
>
<div data-role="content-wrapper">
<header class="title-bar">
<h2 class="item-title">
<a href="#min-320">
min-320
</a>
</h2>
<span class="type-label"></span>
<div class="metadata">
</div>
<a class="view-source" href="https://github.com/lonelyplanet/rizzo-next/tree/master/sass/_variables.scss">View source</a>
</header>
<div class="declaration">
<pre class="code language-scss"><code>$min-320: #{(320 * 0.0625)}em;</code></pre>
</div>
<p><p>320px min width breakpoint</p>
</p>
</div>
</article>
</section>
<footer class="footer">
<div data-role="content-wrapper" id="footer">
<a href="https://www.lonelyplanet.com"><img class="footer-logo" src="https://s3.amazonaws.com/static-asset/lonelyplanet-logo.png"/></a>
<p>Neat is maintained and funded by <a href="https://www.lonelyplanet.com">Lonely Planet</a>.</p>
<p>Documentation generated using <a href="http://sassdoc.com/">SassDoc</a>.</p>
<p>The names and logos are trademarks of Lonely Planet © <span id="year">1973-2015</span></p>
</div>
</footer>
</section>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="assets/vendor/waypoints.min.js"></script>
<script src="assets/vendor/fuse.min.js"></script>
<script src="assets/vendor/ticker.js"></script>
<script src="assets/vendor/highlight.js"></script>
<script src="assets/js/main.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '']);
_gaq.push(['_setDomainName', '']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>