_scaffolding.scss

/*doc
---
title: Scaffolding
name: styleguide-1_0_0
category: Scaffolding
---

The mobile site is structured on a fluid gruid system, with the choice to display up to four columns.

Because mobile devices vary in screen dimensions, the grid will fill the width of the device up to 800px.

*/

/*doc
---
title: Container
name: styleguide-1_1_0
category: Scaffolding
---

First rule of fight club: everything must be inside a `.container`.

The container regulates the size and form of the content. It also keeps everything centered, grounded and balanced.

```html_example
<div class="container">
    <!-- All content goes here -->
</div>
```
*/
.container {
    width: 100%;
    margin: 0 auto;
    padding: 1px 0; /* collapsing margin fix */
    max-width: 800px;
    overflow-x: hidden;
    /* NOTE: I want to delete this, but does it break slide menu or anything else? */
    /* background-color: #fff; */
}

/*doc
---
title: Surfaces
name: styleguide-1_2_0
category: Scaffolding
---

All content on the mobile site is displayed on a surface. Surfaces set the default margins and padding, and give the page its basic shape.

Surfaces must be used with the grid system (See section 1.3). In the examples below, each surface has a `<div class="full">...</div>` inside it. This is the HTML markup for a one-column layout with the grid system. Content may not be displayed correctly if the grid system is not used.
*/

/*doc
---
title: Desk
name: styleguide-1_2_1
category: Scaffolding
---

This will have 6px padding on both sides, and its background will be the gray of the site.

Content on the desk includes the site footer, product filter buttons, or other `<aside>`-like elements.

```html_example
<div class="desk">
    <div class="full">This is the desk.</div>
</div>
```
*/
.desk {
    margin: 4px 7px;
    color: #5a5a5a;
    text-shadow: 0 1px 0 #fff;
}

/*doc
---
title: Paper
name: styleguide-1_2_2
category: Scaffolding
---

This surface is a rectangle with a white background and 6px padding on both sides.

Most of the content on the site will be on a paper surface.

```html_example
<div class="paper">
    <div class="full">This is paper.</div>
</div>
```
*/
.paper {
    background-color: #fff;
    margin: 4px 10px;
    border: 1px solid #e7e7e7;
}

/*doc
---
title: Well
name: styleguide-1_2_3
category: Scaffolding
---

The well is a surface inset into the desk.

This is useful for auxiliary content, like filter and sorting options.
When combined with CSS transitions, it looks like a panel in the desk
is opening.

```html_example
<div class="well">
    <div class="full">Don't fall in the well!</div>
</div>
```
*/
.well {
    padding: 2px 7px;
    margin: 4px 0;
    color: #5a5a5a;
    text-shadow: 0 1px 0 #eee;
    border-top: 1px solid #fbfbfb;
    border-bottom: 1px solid #fff;
    background-color: #d5d5d5;
    -webkit-box-shadow:
        inset 0 3px 4px -2px #aaa,
        inset 0 -7px 8px -8px #bbb;
    box-shadow:
        inset 0 3px 4px -2px #aaa,
        inset 0 -7px 8px -8px #bbb;
}

/*doc
---
title: Carbon
name: styleguide-1_2_4
category: Scaffolding
---

This fills the screen and has a darker background than the desk.
Use it to emphasize content.

```html_example
<div class="carbon">
    <div class="full">Pay attention.</div>
</div>
```
*/
.carbon {
    padding: 6px 7px;
    margin: 0;
    color: #5a5a5a;
    text-shadow: 0 1px 0 #eee;
    background-color: #efefef;
}

/*doc
---
title: Surface Spacing
name: styleguide-1_2_5
category: Scaffolding
parent: "container something"
---

All the surfaces have a left and right padding. However, `.paper` has
additional padding because it has a border.

There are times when you want text in neighboring surfaces to have the same
left and right padding. Add the class `z-content` to the surface element to
make sure text lines up on all surfaces.

This can be used on any surface, but it won't have any effect on `.paper`.

```html_example
<div class="carbon">
    <p>Without z-content, it looks like this</p>
</div>
<div class="desk">
    <p>Without z-content, it looks like this</p>
</div>
<div class="well">
    <p>Without z-content, it looks like this</p>
</div>
<div class="paper">
    <p>Without z-content, it looks like this</p>
</div>
```

```html_example
<div class="carbon z-content">
    <p>With z-content, it looks like this</p>
</div>
<div class="desk z-content">
    <p>With z-content, it looks like this</p>
</div>
<div class="well z-content">
    <p>With z-content, it looks like this</p>
</div>
<div class="paper z-content">
    <p>With z-content, it looks like this</p>
</div>
```
*/
.z-content {
    padding-left: 8px;
    padding-right: 8px;
}

.well.z-content,
.carbon.z-content {
    padding-left: 15px;
    padding-right: 15px;
}

/*doc
---
title: Well
name: styleguide-1_3_0
category: Scaffolding
---

The mobile site supports up to four fluid columns. The columns will fill the width of the device up to 800px. This covers all handheld devices and many small tablets.

To use the grid, create a *div* and set its class to one of the following divisions:

- full
- half
- two-thirds
- one-third
- three-quarters
- one-quarter

### Nesting

Grid elements should not be nested.

### Usage

All content should be in a grid element. Unexpected things may happen if content is placed outside of a grid element.

### Important Note

This grid system does not use floats. This is to reduce the amount of markup required on the mobile site, and to reduce reflow/repaint complexity.

Because of this, IT IS REQUIRED that there is whitespace between the grid elements. In other words, *&lt;div class="half"&gt;...&lt;/div&gt;&lt;div class="half"&gt;...&lt;/div&gt;* is BAD. *&lt;div class="half"&gt;...&lt;/div&gt; &lt;div class="half"&gt;...&lt;/div&gt;* is GOOD

It is enough to have a line break between grid elements. This notice is important if the HTML is minimized at some point.

```html_example
<div class="full">One column</div>
<div class="half">1 of 2</div> <div class="half">2 of 2</div>
<div class="one-third">1 of 3</div> <div class="one-third">2 of 3</div> <div class="one-third">3 of 3</div>
<div class="one-third">1/3</div> <div class="two-thirds">2/3</div>
<div class="one-quarter">1 of 4</div> <div class="one-quarter">2 of 4</div> <div class="one-quarter">3 of 4</div> <div class="one-quarter">4 of 4</div>
<div class="one-quarter">1/4</div> <div class="three-quarters">3/4</div>
```
> highlightgrid centergrid
*/
.full, .three-quarters, .two-thirds, .half, .one-third, .one-quarter {
    display: inline-block;
    vertical-align: top;
    margin: 0 -4px 0 0; /* Android inline-block whitespace fix */
    /* padding: 2px 0; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.full {
    width: 100%;
}

.three-quarters {
    width: 75%;
}

.two-thirds {
    width: 66.66666%;
}

.half {
    width: 50%;
}

.one-third {
    width: 33.3333%;
}

.one-quarter {
    width: 25%;
}



/*doc
---
title: Grid Content Positioning
name: styleguide-1_3_1
category: Scaffolding
---

The content inside the grid cell can be positioned by adding any of the following classes:

- .align-left - This is the default alignment
- .align-center
- .align-right

This works for any block level element.

```html_example
<div class="full align-left">
    <p>Aligned left.</p>
    <p>This is default.</p>
    <p>Not impressive.</p>
</div>
<div class="full align-center">
    <p>This must be important.</p>
    <p>It's in the middle!</p>
</div>
<div class="full align-right">
    <p>Now we're talking.</p>
    <p>Position your elements anywhere</p>
</div>
<div class="one-third align-left">Left</div> <div class="one-third align-center">Center</div> <div class="one-third align-right">Right</div>
```
> highlightgrid

*/
.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

/*doc
---
title: Grid Cell Positioning
name: styleguide-1_3_2
category: Scaffolding
---

The grid cell itself can be positioned vertically. This works when there is
more than one column.

- .align-top - This is the default alignment
- .align-middle
- .align-bottom

```html_example
<div class="one-third align-center align-top">
    <p>Fill it up</p>
    <p>Fill it up</p>
</div>
<div class="one-third align-center align-middle">
    <p>Fill it up</p>
    <p>Fill it up</p>
    <p>Fill it up</p>
    <p>Fill it up</p>
    <p>Fill it up</p>
    <p>Fill it up</p>
</div>
<div class="one-third align-right align-bottom">
    <p>Fill it up</p>
    <p>Fill it up</p>
</div>
```
*/
.align-top {
    vertical-align: top;
}

.align-middle {
    vertical-align: middle;
}

.align-bottom {
    vertical-align: bottom;
}

/*doc
---
title: Spacing
name: styleguide-1_3_4
category: Scaffolding
---

The grid elements have very little vertical space between them.

To increase the vertical space between elements, you can use *.thick* grid
elements, or give them some *.breathing-room*. *.breathing-room* gives twice
as much space as *.thick*. Be aware that *.thick* uses padding, and *breathing-room*
uses margins. Keep this in mind because this difference has implications on the design.

```html_example
<div class="paper">
    <div class="full thick">
        <div>Hello</div>
    </div>
    <div class="full thick">
        <div>Bonjour</div>
    </div>
    <hr>
    <div class="full breathing-room">
        <div>Hello</div>
    </div>
    <div class="full breathing-room">
        <div>Bonjour</div>
    </div>
</div>
```
*/
.breathing-room {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.inner-breathing-room {
    padding-top: 20px;
    padding-bottom: 20px;
}

.thick {
    padding-top: 10px;
    padding-bottom: 10px;
}

/*doc
---
title: Table Layout
name: styleguide-1_4_0
category: Scaffolding
---

On a shopping site, it's common to see data layed out as a table. This can be
achieved with the following classes:

- *.table*
- *.row*
- *.cell*

These tables can be used on any element.

**NOTE:** Unfortunately, table elements cannot be aligned with the alignment
classes. The only way to satisfactorily align them is to give them full width.
Set the class *table-full* on the table element to be able to align it.

```html_example
<div class="paper">
    <div class="table">
        <p class="row">
            <span class="cell">One Label</span>
            <span class="cell">Value</span>
        </p>
        <p class="row">
            <span class="cell">Another Label&nbsp;</span>
            <span class="cell">Value</span>
        </p>
    </div>
</div>
<!-- Different structure, same table -->
<div class="paper">
    <section class="table">
        <div class="row">
            <p class="cell">A third label&nbsp;</p>
            <p class="cell">Value</p>
        </div>
        <div class="row">
            <p class="cell">Last Label</p>
            <p class="cell">Value</p>
        </div>
    </section>
</div>
<!-- Aligned right -->
<div class="paper align-right">
    <section class="table table-full">
        <div class="row">
            <p class="cell">A third label&nbsp;</p>
            <p class="cell">Value</p>
        </div>
        <div class="row">
            <p class="cell">Last Label</p>
            <p class="cell">Value</p>
        </div>
    </section>
</div>
```
*/
.table {
    display: table;
    table-layout: fixed;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    word-break: break-word;
}

.cell:not(:last-child) {
    padding-right: 6px;
}

.table-full {
    width: 100%;
}