--- /dev/null
+{% 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>
.title.is-2 a
color: #242424
- padding-left: 48px
position: relative
.title.is-2 a:hover
color: #00d1b2
.title.is-2 .icon.is-medium
- left: 8px
+ left: -80px
+ opacity: 0.1
position: absolute
top: 10px
+ .fa
+ font-size: 56px
.hero .title.is-2 a
color: white
color: $text-light
&:hover
text-decoration: underline
+
+.feature-title
+ color: $text-light
+ a
+ border-bottom: 1px solid transparent
+ color: $text-strong
+ &:hover
+ border-bottom-color: $primary
.menu-list a:hover {
background-color: whitesmoke;
- color: #00d1b2;
+ color: #363636;
}
.menu-list a.is-active {
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,
.structure {
border: 1px solid #ffdd57;
html.route-index .title.is-2 a {
color: #242424;
- padding-left: 48px;
position: relative;
}
}
html.route-index .title.is-2 .icon.is-medium {
- left: 8px;
+ left: -80px;
+ opacity: 0.1;
position: absolute;
top: 10px;
}
+html.route-index .title.is-2 .icon.is-medium .fa {
+ font-size: 56px;
+}
+
html.route-index .hero .title.is-2 a {
color: white;
}
<section class="section is-medium">
<div class="container">
<h3 class="title is-2">
+ <span class="icon is-medium">
+ <i class="fa fa-pause"></i>
+ </span>
<a href="{{ site.url }}/documentation/grid/columns">
- <span class="icon is-medium">
- <i class="fa fa-pause"></i>
- </span>
Simple <strong>columns</strong>
</a>
</h3>
<section class="section is-medium">
<div class="container">
<h3 class="title is-2">
+ <span class="icon is-medium">
+ <i class="fa fa-th-large"></i>
+ </span>
<a href="{{ site.url }}/documentation/grid/tiles">
- <span class="icon is-medium">
- <i class="fa fa-th-large"></i>
- </span>
Magic <strong>tiles</strong>
</a>
</h3>
</article>
</div>
</div>
+ <div class="highlight-full">
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
</div>
{% endhighlight %}
</div>
+ </div>
</section>
<hr class="is-marginless">
<section class="section is-medium">
<div class="container">
<h3 class="title is-2">
+ <span class="icon is-medium">
+ <i class="fa fa-arrows-h"></i>
+ </span>
<a href="{{ site.url }}/documentation/components/level/">
- <span class="icon is-medium">
- <i class="fa fa-arrows-h"></i>
- </span>
Flexible <strong>horizontal level</strong>
</a>
</h3>
<div class="columns is-vcentered">
<div class="column">
<h3 class="title is-2">
+ <span class="icon is-medium">
+ <i class="fa fa-magic"></i>
+ </span>
<a href="{{ site.url }}/documentation/components/media-object/">
- <span class="icon is-medium">
- <i class="fa fa-magic"></i>
- </span>
Versatile <strong>media object</strong>
</a>
</h3>
<div class="hero-body">
<div class="container has-text-centered">
<h3 class="title is-2">
+ <span class="icon is-medium">
+ <i class="fa fa-arrows-v"></i>
+ </span>
<a href="{{ site.url }}/documentation/layout/hero/">
- <span class="icon is-medium">
- <i class="fa fa-arrows-v"></i>
- </span>
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
</a>
</h3>
<div class="columns is-vcentered">
<div class="column">
<h3 class="title is-2">
+ <span class="icon is-medium">
+ <i class="fa fa-cogs"></i>
+ </span>
<a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
- <span class="icon is-medium">
- <i class="fa fa-cogs"></i>
- </span>
Compose your element with <strong>modifier</strong> classes
</a>
</h3>
<section class="section is-medium">
<div class="container">
<h3 class="title is-2">
+ <span class="icon is-medium">
+ <i class="fa fa-asterisk"></i>
+ </span>
<a href="{{ site.url }}/documentation/elements/box/">
- <span class="icon is-medium">
- <i class="fa fa-asterisk"></i>
- </span>
And all the usual <strong>elements</strong> and <strong>components</strong>
</a>
</h3>
</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>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>
+{% include features.html %}
<hr class="is-marginless">
+$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
- font-size: $size-normal
+ font-size: $menu-size
.menu-list
line-height: 1.25
a
- border-radius: $radius-small
- color: $text
+ border-radius: $menu-item-radius
+ color: $menu-item
display: block
padding: 0.5em 0.75em
&:hover
- background-color: $background
- color: $link
+ background-color: $menu-item-hover-background
+ color: $menu-item-hover
// Modifiers
&.is-active
- background-color: $link
- color: $link-invert
+ background-color: $menu-item-active-background
+ color: $menu-item-active
li
ul
- border-left: 1px solid $border
+ border-left: 1px solid $menu-list-border
margin: 0.75em
padding-left: 0.75em
.menu-label
- color: $text-light
+ color: $menu-label
font-size: 0.8em
letter-spacing: 0.1em
text-transform: uppercase
projects / thirdparty / bulma.git / commitdiff
