Tangible Pattern Library

Shadows 

<table class="dst-table">
    <thead>
        <tr>
            <th>CSS</th>
            <th>SCSS</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>u-shadow-level-100</code></td>
            <td><code> @include shadow(level-100)</code></td>
            <td>
                <div class="shadow u-shadow-level-100"></div>
            </td>
        </tr>
        <tr>
            <td><code>u-shadow-level-200</code></td>
            <td><code> @include shadow(level-200)</code></td>
            <td>
                <div class="shadow u-shadow-level-200"></div>
            </td>
        </tr>
        <tr>
            <td><code>u-shadow-level-300</code></td>
            <td><code> @include shadow(level-300)</code></td>
            <td>
                <div class="shadow u-shadow-level-300"></div>
            </td>
        </tr>
        <tr>
            <td><code>u-shadow-level-400</code></td>
            <td><code> @include shadow(level-400)</code></td>
            <td>
                <div class="shadow u-shadow-level-400"></div>
            </td>
        </tr>
        <tr>
            <td><code>u-shadow-level-500</code></td>
            <td><code> @include shadow(level-500)</code></td>
            <td>
                <div class="shadow u-shadow-level-500"></div>
            </td>
        </tr>
        <tr>
            <td><code>u-shadow-level-600</code></td>
            <td><code> @include shadow(level-600)</code></td>
            <td>
                <div class="shadow u-shadow-level-600"></div>
            </td>
        </tr>
        <tr>
            <td><code>u-shadow-level-700</code></td>
            <td><code> @include shadow(level-700)</code></td>
            <td>
                <div class="shadow u-shadow-level-700"></div>
            </td>
        </tr>
        <tr>
            <td><code>u-shadow-level-800</code></td>
            <td><code> @include shadow(level-800)</code></td>
            <td>
                <div class="shadow u-shadow-level-800"></div>
            </td>
        </tr>
    </tbody>
</table>
 
<table class="dst-table">
  <thead>
    <tr>
      <th>CSS</th>
      <th>SCSS</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    {% for shadow in shadows %}
    <tr>
      <td><code>{{ shadow.css }}</code></td>
      <td><code>{{ shadow.scss }}</code></td>
      <td>
        <div class="shadow {{ shadow.css }}"></div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
 
{
  "shadows": [
    {
      "scss": " @include shadow(level-100)",
      "css": "u-shadow-level-100"
    },
    {
      "scss": " @include shadow(level-200)",
      "css": "u-shadow-level-200"
    },
    {
      "scss": " @include shadow(level-300)",
      "css": "u-shadow-level-300"
    },
    {
      "scss": " @include shadow(level-400)",
      "css": "u-shadow-level-400"
    },
    {
      "scss": " @include shadow(level-500)",
      "css": "u-shadow-level-500"
    },
    {
      "scss": " @include shadow(level-600)",
      "css": "u-shadow-level-600"
    },
    {
      "scss": " @include shadow(level-700)",
      "css": "u-shadow-level-700"
    },
    {
      "scss": " @include shadow(level-800)",
      "css": "u-shadow-level-800"
    }
  ]
}

No notes defined.