{{ enablePlugins('prettify') }}
{% set title = "Shadow" %}

{% extends "layouts/application.html" %}


{% block head %}
  <style type="text/css">
    .shadow-demo {
      display: block;
      background: #fff;
      height: 125px;
    }
  </style>
{% endblock %}


{% block content %}
  {% include "shared/page-title.html" %}

  <div class="card-panel">
    In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.
  </div>

  <div class="card-panel">
    <h4>Basic</h4>
    You can easily apply this shadow effect by adding a <code>class="z-depth-2"</code> to an HTML tag.

    <div class="row">
      <div class="col s12 m4 l2">
        <p class="z-depth-1 shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-2 shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-3 shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-4 shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-5 shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-6 shadow-demo"></p>
      </div>
    </div>
    <pre class="prettyprint linenums">
&lt;div class="col s12 m2">
  &lt;p class="z-depth-1">z-depth-1&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-2">z-depth-2&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-3">z-depth-3&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-4">z-depth-4&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-5">z-depth-5&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-6">z-depth-6&lt;/p>
&lt;/div></pre>
  </div>


  <div class="card-panel">
    <h4>Hover</h4>
    Also you can use shadow on hover. Just apply this shadow effect by adding a <code>class="z-depth-2-hover"</code> to an HTML tag.

    <div class="row">
      <div class="col s12 m4 l2">
        <p class="z-depth-1-hover shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-1 z-depth-2-hover shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-1 z-depth-3-hover shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-1 z-depth-4-hover shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-1 z-depth-5-hover shadow-demo"></p>
      </div>
      <div class="col s12 m4 l2">
        <p class="z-depth-1 z-depth-6-hover shadow-demo"></p>
      </div>
    </div>
    <pre class="prettyprint linenums">
&lt;div class="col s12 m2">
  &lt;p class="z-depth-1-hover">z-depth-1-hover&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-1 z-depth-2-hover">z-depth-2-hover&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-1 z-depth-3-hover">z-depth-3-hover&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-1 z-depth-4-hover">z-depth-4-hover&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-1 z-depth-5-hover">z-depth-5-hover&lt;/p>
&lt;/div>
&lt;div class="col s12 m2">
  &lt;p class="z-depth-1 z-depth-6-hover">z-depth-6-hover&lt;/p>
&lt;/div></pre>
  </div>

{% endblock %}