diff options
1 files changed, 48 insertions, 48 deletions
| -rw-r--r-- | docs/experimentals.html | 96 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index aeb8e83..f85877e 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -38,7 +38,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -254,9 +254,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> @@ -407,8 +404,8 @@ <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"> <button class="date-item badge">8</button> <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Product launch event</a> - <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Lunch</a> + <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Product launch event</a> + <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Lunch</a> <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a> </div> </div> @@ -570,110 +567,110 @@ <div class="columns"> <div class="column col-12"> <div class="filter"> - <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked> - <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked> + <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-3" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-4" class="filter-tag" name="filter-radio" hidden> <div class="filter-nav"> - <label class="chip" for="tag-all">All</label> - <label class="chip" for="tag-action">Action</label> - <label class="chip" for="tag-roleplaying">Roleplaying</label> - <label class="chip" for="tag-shooter">Shooter</label> - <label class="chip" for="tag-sports">Sports</label> + <label class="chip" for="tag-0">All</label> + <label class="chip" for="tag-1">Action</label> + <label class="chip" for="tag-2">Roleplaying</label> + <label class="chip" for="tag-3">Shooter</label> + <label class="chip" for="tag-4">Sports</label> </div> <div class="filter-body columns"> - <div class="column col-4" data-tag="tag-roleplaying"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> <div class="card-header"> <div class="card-title">Fallout 4</div> <div class="card-subtitle">Roleplaying</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Halo 5</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-action"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> <div class="card-header"> <div class="card-title">Quantum Break</div> <div class="card-subtitle">Action</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">Forza Horizon 3</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-roleplaying"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> <div class="card-header"> <div class="card-title">Final Fantasy XV</div> <div class="card-subtitle">Roleplaying</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">NBA 2K17</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Battlefield 1</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-action"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> <div class="card-header"> <div class="card-title">GTA V</div> <div class="card-subtitle">Action</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">FIFA 17</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Overwatch</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Titanfall 2</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Gears of Wars 4</div> <div class="card-subtitle">Shooter</div> @@ -684,24 +681,27 @@ </div> </div> </div> + <div class="docs-note"> + <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags. <code>tag-0</code> is reserved for clearing filter (or showing all). You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.</p> + </div> <!-- filters --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-all"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-action"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-roleplaying"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-0"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-1"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-2"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-nav"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-all"</span>>All<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-action"</span>>Action<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-roleplaying"</span>>Roleplaying<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-0"</span>>All<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-1"</span>>Action<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-2"</span>>Roleplaying<<span class="tag">/label</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-body"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-action"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-1"</span>> <span class="com"><!-- Filter item content --></span> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-roleplaying"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-2"</span>> <span class="com"><!-- Filter item content --></span> <<span class="tag">/div</span>> <span class="com"><!-- Filter items --></span> |