Paper

This file is all about creating the material for our material design. It's an attempt to provide all the 'reality', such as shadows, textures, etc.

Raised Bottom

For use in overlapping regions, a drop-shadow is useful to create a visual separation.

<section class="x__region-container--Bottom-shadow">
    <article></article>
    <article></article>
</section>

%a__paper-shadow--raised-bottom {
    box-shadow: $b__paper-shadow--raised-bottom;
}

Raised Right

For use in overlapping regions, a drop-shadow is useful to create a visual separation.

<section class="x__region-container--Right-shadow">
    <article></article>
    <article></article>
</section>

%a__paper-shadow--raised-right {
    box-shadow: $b__paper-shadow--raised-right;
}

Declined Top

For use in overlapping regions, a drop-shadow is useful to create a visual separation. This actual visual effect is the same as a Raised Bottom. As I don't believe you should mix shadow directions, there are no oposites of this effect.

<section class="x__region-container--Top-shadow">
    <article></article>
    <article></article>
</section>

%a__paper-shadow--declined-top {
    box-shadow: $b__paper-shadow--declined-top;
}

Declined Left

For use in overlapping regions, a drop-shadow is useful to create a visual separation. This visual effect equals the raised right effect. As I don't believe you should mix shadow directions, there are no oposites of this effect.

<section class="x__region-container--Left-shadow">
    <article></article>
    <article></article>
</section>

%a__paper-shadow--declined-left {
    box-shadow: $b__paper-shadow--declined-left;
}

Raised

This is used for raised components, such as buttons. You should check the raised button for it's use.

%a__paper-shadow--raised {
    box-shadow:
        0 0 ($b__shadow--size / 2) $b__shadow--color,
        0 ($b__shadow--size / 1.5) ($b__shadow--size * 1) $b__shadow--color;
}

Floating

This is used for raised components, such as buttons. You should check the floating action for it's use.

%a__paper-shadow--floating {
    box-shadow:
        0 0 ($b__shadow--size / 2) $b__shadow--color,
        0 ($b__shadow--size * 2) ($b__shadow--size * 2) $b__shadow--color;
}

Paper fibres

Because I like to give some elements a little more of a material look, this is an embedded png of paper fibres. Works best with medium dark background colours.

<section class="x__region-container--paper-fibre">
    <article></article>
    <article></article>
</section>

%a__paper-fibres {
    background-image: url('data:image/png;base64,...);
    background-repeat: repeat;
}