mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
Add more specs
This commit is contained in:
Jeremy Thomas
75
docs/cyp/components/card.html
Normal file
75
docs/cyp/components/card.html
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Card
|
||||
---
|
||||
|
||||
{% capture header %}
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</header>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture content %}
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">John Smith</p>
|
||||
<p class="subtitle is-6">@johnsmith</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
||||
<a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture image %}
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture footer %}
|
||||
<footer class="card-footer">
|
||||
<a href="#" class="card-footer-item">Save</a>
|
||||
<a href="#" class="card-footer-item">Edit</a>
|
||||
<a href="#" class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
{% endcapture %}
|
||||
|
||||
<div style="width: 480px; margin: 2rem auto;">
|
||||
<div id="card" class="card">
|
||||
{{ image }}
|
||||
{{ content }}
|
||||
{{ footer }}
|
||||
</div>
|
||||
|
||||
<div id="card-only-content" class="card">
|
||||
{{ content }}
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<div id="card-header-content" class="card">
|
||||
{{ header }}
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
51
docs/cyp/components/dropdown.html
Normal file
51
docs/cyp/components/dropdown.html
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Dropdown
|
||||
---
|
||||
|
||||
{% capture dropdownTrigger %}
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
|
||||
<span>Dropdown button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdownMenu %}
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-content">
|
||||
<a href="#" class="dropdown-item">
|
||||
Dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<a href="#" class="dropdown-item is-active">
|
||||
Active dropdown item
|
||||
</a>
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
</div>
|
||||
<a href="#" class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
With a divider
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div id="dropdown" class="dropdown">
|
||||
{{ dropdownTrigger }}
|
||||
{{ dropdownMenu }}
|
||||
</div>
|
||||
|
||||
<div id="dropdown-active" class="dropdown is-active">
|
||||
{{ dropdownTrigger }}
|
||||
{{ dropdownMenu }}
|
||||
</div>
|
||||
63
docs/cyp/layout/level.html
Normal file
63
docs/cyp/layout/level.html
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Components/Level
|
||||
---
|
||||
|
||||
<nav id="level" class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
</p>
|
||||
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<p class="level-item"><strong>All</strong></p>
|
||||
<p class="level-item"><a>Published</a></p>
|
||||
<p class="level-item"><a>Drafts</a></p>
|
||||
<p class="level-item"><a>Deleted</a></p>
|
||||
<p class="level-item"><a class="button is-success">New</a></p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav id="level-centered" class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user