mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Add features
This commit is contained in:
Jeremy Thomas
parent
c2654bd6c6
commit
4f8658d1a3
617
docs/_includes/features.html
Normal file
617
docs/_includes/features.html
Normal file
@ -0,0 +1,617 @@
|
|||||||
|
{% capture form %}
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">Form label</label>
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="text" placeholder="Input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<p class="control">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>Select dropdown</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<p class="control">
|
||||||
|
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<p class="control">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
Checkbox
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<p class="control">
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question">
|
||||||
|
Radio
|
||||||
|
</label>
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question">
|
||||||
|
Buttons
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary">Button</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture box %}
|
||||||
|
<div class="box">
|
||||||
|
<article class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="image is-64x64">
|
||||||
|
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||||
|
<br>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<nav class="level is-mobile">
|
||||||
|
<div class="level-left">
|
||||||
|
<a class="level-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-reply"></i></span>
|
||||||
|
</a>
|
||||||
|
<a class="level-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
|
||||||
|
</a>
|
||||||
|
<a class="level-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-heart"></i></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture button %}
|
||||||
|
<div class="field is-grouped is-grouped-multiline">
|
||||||
|
<div class="control"><a class="button">Button</a></div>
|
||||||
|
<div class="control"><a class="button is-white">White</a></div>
|
||||||
|
<div class="control"><a class="button is-light">Light</a></div>
|
||||||
|
<div class="control"><a class="button is-dark">Dark</a></div>
|
||||||
|
<div class="control"><a class="button is-black">Black</a></div>
|
||||||
|
<div class="control"><a class="button is-link">Link</a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field is-grouped is-grouped-multiline">
|
||||||
|
<div class="control"><a class="button is-primary">Primary</a></div>
|
||||||
|
<div class="control"><a class="button is-info">Info</a></div>
|
||||||
|
<div class="control"><a class="button is-success">Success</a></div>
|
||||||
|
<div class="control"><a class="button is-warning">Warning</a></div>
|
||||||
|
<div class="control"><a class="button is-danger">Danger</a></div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture notification %}
|
||||||
|
<div class="notification is-primary">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur
|
||||||
|
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||||
|
consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tags %}
|
||||||
|
<span class="tag is-black">Black</span>
|
||||||
|
<span class="tag is-dark">Dark</span>
|
||||||
|
<span class="tag is-light">Light</span>
|
||||||
|
<span class="tag is-white">White</span>
|
||||||
|
<span class="tag is-primary">Primary</span>
|
||||||
|
<span class="tag is-info">Info</span>
|
||||||
|
<span class="tag is-success">Success</span>
|
||||||
|
<span class="tag is-warning">Warning</span>
|
||||||
|
<span class="tag is-danger">Danger</span>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture cards %}
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image">
|
||||||
|
<figure class="image is-4by3">
|
||||||
|
<img src="http://localhost:4000/images/placeholders/1280x960.png" alt="Image">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<figure class="image is-48x48">
|
||||||
|
<img src="http://localhost:4000/images/placeholders/96x96.png" alt="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>#css</a> <a>#responsive</a>
|
||||||
|
<br>
|
||||||
|
<small>11:09 PM - 1 Jan 2016</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column is-half">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-content">
|
||||||
|
<p class="title">
|
||||||
|
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Jeff Atwood
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<p class="card-footer-item">
|
||||||
|
<span>
|
||||||
|
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="card-footer-item">
|
||||||
|
<span>
|
||||||
|
Share on <a href="#">Facebook</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture dropdown %}
|
||||||
|
<div class="dropdown is-active">
|
||||||
|
<div class="dropdown-trigger">
|
||||||
|
<a class="button">
|
||||||
|
<span>Dropdown button</span>
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-angle-down"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<a class="dropdown-item">
|
||||||
|
Dropdown item
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item">
|
||||||
|
Other dropdown item
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item is-active">
|
||||||
|
Active dropdown item
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item">
|
||||||
|
Other item
|
||||||
|
</a>
|
||||||
|
<hr class="dropdown-divider">
|
||||||
|
<a class="dropdown-item">
|
||||||
|
With a divider
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture message %}
|
||||||
|
<article class="message is-primary">
|
||||||
|
<div class="message-header">
|
||||||
|
<p>Primary</p>
|
||||||
|
<button class="delete"></button>
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture pagination %}
|
||||||
|
<nav class="pagination">
|
||||||
|
<a class="pagination-previous">Previous</a>
|
||||||
|
<a class="pagination-next">Next page</a>
|
||||||
|
<ul class="pagination-list">
|
||||||
|
<li>
|
||||||
|
<a class="pagination-link">1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="pagination-ellipsis">…</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="pagination-link">45</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="pagination-link is-current">46</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="pagination-link">47</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="pagination-ellipsis">…</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="pagination-link">86</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture panel %}
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">
|
||||||
|
Repositories
|
||||||
|
</p>
|
||||||
|
<div class="panel-block">
|
||||||
|
<p class="control has-icons-left">
|
||||||
|
<input class="input is-small" type="text" placeholder="Search">
|
||||||
|
<span class="icon is-small is-left">
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p class="panel-tabs">
|
||||||
|
<a class="is-active">All</a>
|
||||||
|
<a>Public</a>
|
||||||
|
<a>Private</a>
|
||||||
|
<a>Sources</a>
|
||||||
|
<a>Forks</a>
|
||||||
|
</p>
|
||||||
|
<a class="panel-block is-active">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fa fa-book"></i>
|
||||||
|
</span>
|
||||||
|
bulma
|
||||||
|
</a>
|
||||||
|
<a class="panel-block">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fa fa-book"></i>
|
||||||
|
</span>
|
||||||
|
marksheet
|
||||||
|
</a>
|
||||||
|
<a class="panel-block">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fa fa-book"></i>
|
||||||
|
</span>
|
||||||
|
minireset.css
|
||||||
|
</a>
|
||||||
|
<a class="panel-block">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fa fa-book"></i>
|
||||||
|
</span>
|
||||||
|
jgthms.github.io
|
||||||
|
</a>
|
||||||
|
<a class="panel-block">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fa fa-code-fork"></i>
|
||||||
|
</span>
|
||||||
|
daniellowtw/infBoard
|
||||||
|
</a>
|
||||||
|
<a class="panel-block">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fa fa-code-fork"></i>
|
||||||
|
</span>
|
||||||
|
mojs
|
||||||
|
</a>
|
||||||
|
<label class="panel-block">
|
||||||
|
<input type="checkbox">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
<div class="panel-block">
|
||||||
|
<button class="button is-primary is-outlined is-fullwidth">
|
||||||
|
Reset all filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tabs %}
|
||||||
|
<div class="tabs is-boxed">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="fa fa-image"></i></span>
|
||||||
|
<span>Pictures</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="fa fa-music"></i></span>
|
||||||
|
<span>Music</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="fa fa-film"></i></span>
|
||||||
|
<span>Videos</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
|
||||||
|
<span>Documents</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture media %}
|
||||||
|
<article class="media">
|
||||||
|
<figure class="media-left">
|
||||||
|
<p class="image is-64x64">
|
||||||
|
<img src="http://localhost:4000/images/placeholders/128x128.png">
|
||||||
|
</p>
|
||||||
|
</figure>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||||
|
<br>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<nav class="level is-mobile">
|
||||||
|
<div class="level-left">
|
||||||
|
<a class="level-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-reply"></i></span>
|
||||||
|
</a>
|
||||||
|
<a class="level-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
|
||||||
|
</a>
|
||||||
|
<a class="level-item">
|
||||||
|
<span class="icon is-small"><i class="fa fa-heart"></i></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="media-right">
|
||||||
|
<button class="delete"></button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture menu %}
|
||||||
|
<aside class="menu">
|
||||||
|
<p class="menu-label">
|
||||||
|
General
|
||||||
|
</p>
|
||||||
|
<ul class="menu-list">
|
||||||
|
<li><a>Dashboard</a></li>
|
||||||
|
<li><a>Customers</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="menu-label">
|
||||||
|
Administration
|
||||||
|
</p>
|
||||||
|
<ul class="menu-list">
|
||||||
|
<li><a>Team Settings</a></li>
|
||||||
|
<li>
|
||||||
|
<a class="is-active">Manage Your Team</a>
|
||||||
|
<ul>
|
||||||
|
<li><a>Members</a></li>
|
||||||
|
<li><a>Plugins</a></li>
|
||||||
|
<li><a>Add a member</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a>Invitations</a></li>
|
||||||
|
<li><a>Cloud Storage Environment Settings</a></li>
|
||||||
|
<li><a>Authentication</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="menu-label">
|
||||||
|
Transactions
|
||||||
|
</p>
|
||||||
|
<ul class="menu-list">
|
||||||
|
<li><a>Payments</a></li>
|
||||||
|
<li><a>Transfers</a></li>
|
||||||
|
<li><a>Balance</a></li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
<section class="section is-medium" style="padding-top: 0;">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-2">
|
||||||
|
<h4 class="title is-4"><strong>Elements</strong></h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-10">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/form/general/">
|
||||||
|
Form
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ form }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/elements/box/">
|
||||||
|
Box
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ box }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/elements/button/">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ button }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/elements/notification/">
|
||||||
|
Notification
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ notification }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/elements/tag/">
|
||||||
|
Tags
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ tags }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section is-medium" style="padding-top: 0;">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-2">
|
||||||
|
<h4 class="title is-4"><strong>Components</strong></h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-10">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/components/card/">
|
||||||
|
Card
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ cards }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/components/dropdown/">
|
||||||
|
Dropdown
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9" style="height: 16rem;">
|
||||||
|
{{ dropdown }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/components/message/">
|
||||||
|
Message
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/components/pagination/">
|
||||||
|
Pagination
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ pagination }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/components/tabs/">
|
||||||
|
Tabs
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ tabs }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/components/media-object/">
|
||||||
|
Media object
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
{{ media }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<h4 class="subtitle is-4 feature-title">
|
||||||
|
<a href="{{ site.url }}/documentation/components/menu/">
|
||||||
|
Menu
|
||||||
|
</a>
|
||||||
|
and
|
||||||
|
<a href="{{ site.url }}/documentation/components/panel/">
|
||||||
|
Panel
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="column is-9">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
{{ menu }}
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{{ panel }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -4,16 +4,18 @@ html.route-index
|
|||||||
|
|
||||||
.title.is-2 a
|
.title.is-2 a
|
||||||
color: #242424
|
color: #242424
|
||||||
padding-left: 48px
|
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
.title.is-2 a:hover
|
.title.is-2 a:hover
|
||||||
color: #00d1b2
|
color: #00d1b2
|
||||||
|
|
||||||
.title.is-2 .icon.is-medium
|
.title.is-2 .icon.is-medium
|
||||||
left: 8px
|
left: -80px
|
||||||
|
opacity: 0.1
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 10px
|
top: 10px
|
||||||
|
.fa
|
||||||
|
font-size: 56px
|
||||||
|
|
||||||
.hero .title.is-2 a
|
.hero .title.is-2 a
|
||||||
color: white
|
color: white
|
||||||
|
|||||||
@ -25,3 +25,11 @@
|
|||||||
color: $text-light
|
color: $text-light
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
|
||||||
|
.feature-title
|
||||||
|
color: $text-light
|
||||||
|
a
|
||||||
|
border-bottom: 1px solid transparent
|
||||||
|
color: $text-strong
|
||||||
|
&:hover
|
||||||
|
border-bottom-color: $primary
|
||||||
|
|||||||
@ -4163,7 +4163,7 @@ a.dropdown-item.is-active {
|
|||||||
|
|
||||||
.menu-list a:hover {
|
.menu-list a:hover {
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
color: #00d1b2;
|
color: #363636;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-list a.is-active {
|
.menu-list a.is-active {
|
||||||
@ -8348,6 +8348,19 @@ html.route-index #carbon {
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.feature-title {
|
||||||
|
color: #7a7a7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-title a {
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-title a:hover {
|
||||||
|
border-bottom-color: #00d1b2;
|
||||||
|
}
|
||||||
|
|
||||||
.example,
|
.example,
|
||||||
.structure {
|
.structure {
|
||||||
border: 1px solid #ffdd57;
|
border: 1px solid #ffdd57;
|
||||||
@ -8702,7 +8715,6 @@ html.route-index .title.is-2 {
|
|||||||
|
|
||||||
html.route-index .title.is-2 a {
|
html.route-index .title.is-2 a {
|
||||||
color: #242424;
|
color: #242424;
|
||||||
padding-left: 48px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -8711,11 +8723,16 @@ html.route-index .title.is-2 a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
html.route-index .title.is-2 .icon.is-medium {
|
html.route-index .title.is-2 .icon.is-medium {
|
||||||
left: 8px;
|
left: -80px;
|
||||||
|
opacity: 0.1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.route-index .title.is-2 .icon.is-medium .fa {
|
||||||
|
font-size: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
html.route-index .hero .title.is-2 a {
|
html.route-index .hero .title.is-2 a {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|||||||
447
docs/index.html
447
docs/index.html
@ -88,10 +88,10 @@ route: index
|
|||||||
<section class="section is-medium">
|
<section class="section is-medium">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3 class="title is-2">
|
<h3 class="title is-2">
|
||||||
<a href="{{ site.url }}/documentation/grid/columns">
|
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<i class="fa fa-pause"></i>
|
<i class="fa fa-pause"></i>
|
||||||
</span>
|
</span>
|
||||||
|
<a href="{{ site.url }}/documentation/grid/columns">
|
||||||
Simple <strong>columns</strong>
|
Simple <strong>columns</strong>
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -190,10 +190,10 @@ route: index
|
|||||||
<section class="section is-medium">
|
<section class="section is-medium">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3 class="title is-2">
|
<h3 class="title is-2">
|
||||||
<a href="{{ site.url }}/documentation/grid/tiles">
|
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<i class="fa fa-th-large"></i>
|
<i class="fa fa-th-large"></i>
|
||||||
</span>
|
</span>
|
||||||
|
<a href="{{ site.url }}/documentation/grid/tiles">
|
||||||
Magic <strong>tiles</strong>
|
Magic <strong>tiles</strong>
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -243,6 +243,7 @@ route: index
|
|||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="highlight-full">
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<div class="tile is-ancestor">
|
<div class="tile is-ancestor">
|
||||||
<div class="tile is-vertical is-8">
|
<div class="tile is-vertical is-8">
|
||||||
@ -275,6 +276,7 @@ route: index
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr class="is-marginless">
|
<hr class="is-marginless">
|
||||||
@ -282,10 +284,10 @@ route: index
|
|||||||
<section class="section is-medium">
|
<section class="section is-medium">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3 class="title is-2">
|
<h3 class="title is-2">
|
||||||
<a href="{{ site.url }}/documentation/components/level/">
|
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<i class="fa fa-arrows-h"></i>
|
<i class="fa fa-arrows-h"></i>
|
||||||
</span>
|
</span>
|
||||||
|
<a href="{{ site.url }}/documentation/components/level/">
|
||||||
Flexible <strong>horizontal level</strong>
|
Flexible <strong>horizontal level</strong>
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -350,10 +352,10 @@ route: index
|
|||||||
<div class="columns is-vcentered">
|
<div class="columns is-vcentered">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h3 class="title is-2">
|
<h3 class="title is-2">
|
||||||
<a href="{{ site.url }}/documentation/components/media-object/">
|
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<i class="fa fa-magic"></i>
|
<i class="fa fa-magic"></i>
|
||||||
</span>
|
</span>
|
||||||
|
<a href="{{ site.url }}/documentation/components/media-object/">
|
||||||
Versatile <strong>media object</strong>
|
Versatile <strong>media object</strong>
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -411,10 +413,10 @@ route: index
|
|||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container has-text-centered">
|
<div class="container has-text-centered">
|
||||||
<h3 class="title is-2">
|
<h3 class="title is-2">
|
||||||
<a href="{{ site.url }}/documentation/layout/hero/">
|
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<i class="fa fa-arrows-v"></i>
|
<i class="fa fa-arrows-v"></i>
|
||||||
</span>
|
</span>
|
||||||
|
<a href="{{ site.url }}/documentation/layout/hero/">
|
||||||
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
|
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -438,10 +440,10 @@ route: index
|
|||||||
<div class="columns is-vcentered">
|
<div class="columns is-vcentered">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h3 class="title is-2">
|
<h3 class="title is-2">
|
||||||
<a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
|
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<i class="fa fa-cogs"></i>
|
<i class="fa fa-cogs"></i>
|
||||||
</span>
|
</span>
|
||||||
|
<a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
|
||||||
Compose your element with <strong>modifier</strong> classes
|
Compose your element with <strong>modifier</strong> classes
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -490,446 +492,17 @@ route: index
|
|||||||
<section class="section is-medium">
|
<section class="section is-medium">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3 class="title is-2">
|
<h3 class="title is-2">
|
||||||
<a href="{{ site.url }}/documentation/elements/box/">
|
|
||||||
<span class="icon is-medium">
|
<span class="icon is-medium">
|
||||||
<i class="fa fa-asterisk"></i>
|
<i class="fa fa-asterisk"></i>
|
||||||
</span>
|
</span>
|
||||||
|
<a href="{{ site.url }}/documentation/elements/box/">
|
||||||
And all the usual <strong>elements</strong> and <strong>components</strong>
|
And all the usual <strong>elements</strong> and <strong>components</strong>
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-medium" style="padding-top: 0;">
|
{% include features.html %}
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-2">
|
|
||||||
<h4 class="title is-4"><strong>Elements</strong></h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-10">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Form</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<div class="field">
|
|
||||||
<label class="label">Form label</label>
|
|
||||||
<div class="control">
|
|
||||||
<input class="input" type="text" placeholder="Input">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control">
|
|
||||||
<span class="select">
|
|
||||||
<select>
|
|
||||||
<option>Select dropdown</option>
|
|
||||||
</select>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control">
|
|
||||||
<textarea class="textarea" placeholder="Textarea"></textarea>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control">
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox">
|
|
||||||
Checkbox
|
|
||||||
</label>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control">
|
|
||||||
<label class="radio">
|
|
||||||
<input type="radio" name="question">
|
|
||||||
Radio
|
|
||||||
</label>
|
|
||||||
<label class="radio">
|
|
||||||
<input type="radio" name="question">
|
|
||||||
Buttons
|
|
||||||
</label>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<p class="control">
|
|
||||||
<a class="button is-primary">Button</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Box</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<div class="box">
|
|
||||||
<article class="media">
|
|
||||||
<div class="media-left">
|
|
||||||
<figure class="image is-64x64">
|
|
||||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="media-content">
|
|
||||||
<div class="content">
|
|
||||||
<p>
|
|
||||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
|
||||||
<br>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<nav class="level is-mobile">
|
|
||||||
<div class="level-left">
|
|
||||||
<a class="level-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-reply"></i></span>
|
|
||||||
</a>
|
|
||||||
<a class="level-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
|
|
||||||
</a>
|
|
||||||
<a class="level-item">
|
|
||||||
<span class="icon is-small"><i class="fa fa-heart"></i></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Button</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<div class="field is-grouped is-grouped-multiline">
|
|
||||||
<div class="control"><a class="button">Button</a></div>
|
|
||||||
<div class="control"><a class="button is-white">White</a></div>
|
|
||||||
<div class="control"><a class="button is-light">Light</a></div>
|
|
||||||
<div class="control"><a class="button is-dark">Dark</a></div>
|
|
||||||
<div class="control"><a class="button is-black">Black</a></div>
|
|
||||||
<div class="control"><a class="button is-link">Link</a></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field is-grouped is-grouped-multiline">
|
|
||||||
<div class="control"><a class="button is-primary">Primary</a></div>
|
|
||||||
<div class="control"><a class="button is-info">Info</a></div>
|
|
||||||
<div class="control"><a class="button is-success">Success</a></div>
|
|
||||||
<div class="control"><a class="button is-warning">Warning</a></div>
|
|
||||||
<div class="control"><a class="button is-danger">Danger</a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Notification</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<div class="notification">
|
|
||||||
<button class="delete"></button>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur
|
|
||||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
|
||||||
consectetur adipiscing elit
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Tags</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<span class="tag is-black">Black</span>
|
|
||||||
<span class="tag is-dark">Dark</span>
|
|
||||||
<span class="tag is-light">Light</span>
|
|
||||||
<span class="tag is-white">White</span>
|
|
||||||
<span class="tag is-primary">Primary</span>
|
|
||||||
<span class="tag is-info">Info</span>
|
|
||||||
<span class="tag is-success">Success</span>
|
|
||||||
<span class="tag is-warning">Warning</span>
|
|
||||||
<span class="tag is-danger">Danger</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-2">
|
|
||||||
<h4 class="title is-4"><strong>Components</strong></h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-10">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Card</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-half">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-image">
|
|
||||||
<figure class="image is-4by3">
|
|
||||||
<img src="http://localhost:4000/images/placeholders/1280x960.png" alt="Image">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="media">
|
|
||||||
<div class="media-left">
|
|
||||||
<figure class="image is-48x48">
|
|
||||||
<img src="http://localhost:4000/images/placeholders/96x96.png" alt="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>#css</a> <a>#responsive</a>
|
|
||||||
<br>
|
|
||||||
<small>11:09 PM - 1 Jan 2016</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column is-half">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-content">
|
|
||||||
<p class="title">
|
|
||||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
|
||||||
</p>
|
|
||||||
<p class="subtitle">
|
|
||||||
Jeff Atwood
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<footer class="card-footer">
|
|
||||||
<p class="card-footer-item">
|
|
||||||
<span>
|
|
||||||
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p class="card-footer-item">
|
|
||||||
<span>
|
|
||||||
Share on <a href="#">Facebook</a>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Dropdown</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9" style="height: 16rem;">
|
|
||||||
<div class="dropdown is-active">
|
|
||||||
<div class="dropdown-trigger">
|
|
||||||
<a class="button">
|
|
||||||
<span>Dropdown button</span>
|
|
||||||
<span class="icon is-small">
|
|
||||||
<i class="fa fa-angle-down"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-menu">
|
|
||||||
<div class="dropdown-content">
|
|
||||||
<a class="dropdown-item">
|
|
||||||
Dropdown item
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item">
|
|
||||||
Other dropdown item
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item is-active">
|
|
||||||
Active dropdown item
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item">
|
|
||||||
Other item
|
|
||||||
</a>
|
|
||||||
<hr class="dropdown-divider">
|
|
||||||
<a class="dropdown-item">
|
|
||||||
With a divider
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Message</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<article class="message is-primary">
|
|
||||||
<div class="message-header">
|
|
||||||
<p>Primary</p>
|
|
||||||
<button class="delete"></button>
|
|
||||||
</div>
|
|
||||||
<div class="message-body">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Pagination</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<nav class="pagination">
|
|
||||||
<a class="pagination-previous">Previous</a>
|
|
||||||
<a class="pagination-next">Next page</a>
|
|
||||||
<ul class="pagination-list">
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link">1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="pagination-ellipsis">…</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link">45</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link is-current">46</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link">47</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="pagination-ellipsis">…</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="pagination-link">86</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Panel</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-6">
|
|
||||||
<nav class="panel" style="max-width: 320px;">
|
|
||||||
<p class="panel-heading">
|
|
||||||
Repositories
|
|
||||||
</p>
|
|
||||||
<div class="panel-block">
|
|
||||||
<p class="control has-icons-left">
|
|
||||||
<input class="input is-small" type="text" placeholder="Search">
|
|
||||||
<span class="icon is-small is-left">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<p class="panel-tabs">
|
|
||||||
<a class="is-active">All</a>
|
|
||||||
<a>Public</a>
|
|
||||||
<a>Private</a>
|
|
||||||
<a>Sources</a>
|
|
||||||
<a>Forks</a>
|
|
||||||
</p>
|
|
||||||
<a class="panel-block is-active">
|
|
||||||
<span class="panel-icon">
|
|
||||||
<i class="fa fa-book"></i>
|
|
||||||
</span>
|
|
||||||
bulma
|
|
||||||
</a>
|
|
||||||
<a class="panel-block">
|
|
||||||
<span class="panel-icon">
|
|
||||||
<i class="fa fa-book"></i>
|
|
||||||
</span>
|
|
||||||
marksheet
|
|
||||||
</a>
|
|
||||||
<a class="panel-block">
|
|
||||||
<span class="panel-icon">
|
|
||||||
<i class="fa fa-book"></i>
|
|
||||||
</span>
|
|
||||||
minireset.css
|
|
||||||
</a>
|
|
||||||
<a class="panel-block">
|
|
||||||
<span class="panel-icon">
|
|
||||||
<i class="fa fa-book"></i>
|
|
||||||
</span>
|
|
||||||
jgthms.github.io
|
|
||||||
</a>
|
|
||||||
<a class="panel-block">
|
|
||||||
<span class="panel-icon">
|
|
||||||
<i class="fa fa-code-fork"></i>
|
|
||||||
</span>
|
|
||||||
daniellowtw/infBoard
|
|
||||||
</a>
|
|
||||||
<a class="panel-block">
|
|
||||||
<span class="panel-icon">
|
|
||||||
<i class="fa fa-code-fork"></i>
|
|
||||||
</span>
|
|
||||||
mojs
|
|
||||||
</a>
|
|
||||||
<label class="panel-block">
|
|
||||||
<input type="checkbox">
|
|
||||||
Remember me
|
|
||||||
</label>
|
|
||||||
<div class="panel-block">
|
|
||||||
<button class="button is-primary is-outlined is-fullwidth">
|
|
||||||
Reset all filters
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-3">
|
|
||||||
<h4 class="subtitle is-4">Tabs</h4>
|
|
||||||
</div>
|
|
||||||
<div class="column is-9">
|
|
||||||
<div class="tabs is-boxed">
|
|
||||||
<ul>
|
|
||||||
<li class="is-active">
|
|
||||||
<a>
|
|
||||||
<span class="icon is-small"><i class="fa fa-image"></i></span>
|
|
||||||
<span>Pictures</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>
|
|
||||||
<span class="icon is-small"><i class="fa fa-music"></i></span>
|
|
||||||
<span>Music</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>
|
|
||||||
<span class="icon is-small"><i class="fa fa-film"></i></span>
|
|
||||||
<span>Videos</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>
|
|
||||||
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
|
|
||||||
<span>Documents</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr class="is-marginless">
|
<hr class="is-marginless">
|
||||||
|
|
||||||
|
|||||||
@ -1,28 +1,41 @@
|
|||||||
|
$menu-size: $size-normal !default
|
||||||
|
|
||||||
|
$menu-item: $text !default
|
||||||
|
$menu-item-radius: $radius-small !default
|
||||||
|
$menu-item-hover: $text-strong !default
|
||||||
|
$menu-item-hover-background: $background !default
|
||||||
|
$menu-item-active: $link-invert !default
|
||||||
|
$menu-item-active-background: $link !default
|
||||||
|
|
||||||
|
$menu-list-border: $border !default
|
||||||
|
|
||||||
|
$menu-label: $text-light !default
|
||||||
|
|
||||||
.menu
|
.menu
|
||||||
font-size: $size-normal
|
font-size: $menu-size
|
||||||
|
|
||||||
.menu-list
|
.menu-list
|
||||||
line-height: 1.25
|
line-height: 1.25
|
||||||
a
|
a
|
||||||
border-radius: $radius-small
|
border-radius: $menu-item-radius
|
||||||
color: $text
|
color: $menu-item
|
||||||
display: block
|
display: block
|
||||||
padding: 0.5em 0.75em
|
padding: 0.5em 0.75em
|
||||||
&:hover
|
&:hover
|
||||||
background-color: $background
|
background-color: $menu-item-hover-background
|
||||||
color: $link
|
color: $menu-item-hover
|
||||||
// Modifiers
|
// Modifiers
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: $link
|
background-color: $menu-item-active-background
|
||||||
color: $link-invert
|
color: $menu-item-active
|
||||||
li
|
li
|
||||||
ul
|
ul
|
||||||
border-left: 1px solid $border
|
border-left: 1px solid $menu-list-border
|
||||||
margin: 0.75em
|
margin: 0.75em
|
||||||
padding-left: 0.75em
|
padding-left: 0.75em
|
||||||
|
|
||||||
.menu-label
|
.menu-label
|
||||||
color: $text-light
|
color: $menu-label
|
||||||
font-size: 0.8em
|
font-size: 0.8em
|
||||||
letter-spacing: 0.1em
|
letter-spacing: 0.1em
|
||||||
text-transform: uppercase
|
text-transform: uppercase
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user