<div class="field is-grouped">
+ {% if include.new %}
+ <div class="control">
+ <div class="tags">
+ <span class="tag is-primary">New!</span>
+ </div>
+ </div>
+ {% endif %}
+
{% if include.since %}
<div class="control">
<div class="tags has-addons">
<section class="section">
<div class="container">
- <div class="columns" style="margin-bottom: -0.75rem !important;">
- <div class="column">
- <h1 class="title">Breadcrumb</h1>
- <h2 class="subtitle">
- A simple <strong>breadcrumb</strong> component to improve your navigation experience
- </h2>
- {%
- include meta.html
- since="0.4.3"
- variables=true
- colors=false
- sizes=true
- %}
- </div>
-
- <div class="column is-narrow">
- <p class="tags has-addons">
- <span class="tag is-success">New!</span>
- <span class="tag is-info">0.4.3</span>
- </p>
- </div>
- </div>
+ <h1 class="title">Breadcrumb</h1>
+ <h2 class="subtitle">
+ A simple <strong>breadcrumb</strong> component to improve your navigation experience
+ </h2>
+ {%
+ include meta.html
+ since="0.4.3"
+ variables=true
+ colors=false
+ sizes=true
+ %}
<hr>
<hr style="margin-bottom: 0;">
- <h3 id="sizes" class="title">
+ <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
Sizes
</h3>
layout: documentation
doc-tab: components
doc-subtab: dropdown
+variables:
+- name: $dropdown-content-background-color
+ value: $white
+- name: $dropdown-content-arrow
+ value: $link
+- name: $dropdown-content-offset
+ value: 4px
+- name: $dropdown-content-radius
+ value: $radius
+- name: $dropdown-content-shadow
+ value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+- name: $dropdown-content-z
+ value: 20
+- name: $dropdown-item-color
+ value: $grey-dark
+- name: $dropdown-item-hover-color
+ value: $black
+- name: $dropdown-item-hover-background-color
+ value: $background
+- name: $dropdown-item-active-color
+ value: $primary-invert
+- name: $dropdown-item-active-background-color
+ value: $primary
+- name: $dropdown-divider-background-color
+ value: $border
---
{% capture dropdown_example %}
<section class="section">
<div class="container">
- <div class="columns" style="margin-bottom: -0.75rem !important;">
- <div class="column">
- <h1 class="title">Dropdown</h1>
- <h2 class="subtitle">
- An interactive <strong>dropdown menu</strong> for discoverable content
- </h2>
- </div>
-
- <div class="column is-narrow">
- <p class="content">
- <span class="tag is-success">New!</span>
- <span class="tag is-info">0.4.4</span>
- </p>
- </div>
- </div>
+ <h1 class="title">Dropdown</h1>
+ <h2 class="subtitle">
+ An interactive <strong>dropdown menu</strong> for discoverable content
+ </h2>
+ {%
+ include meta.html
+ new=true
+ since="0.4.4"
+ colors=false
+ sizes=false
+ variables=true
+ %}
<hr>
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
</div>
</div>
+
+ {% include variables.html %}
+
</div>
</section>
<div class="container">
<h1 class="title">Level</h1>
<h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=false
+ variables=false
+ %}
<hr>
<div class="container">
<h1 class="title">Media Object</h1>
<h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=false
+ variables=false
+ %}
<hr>
layout: documentation
doc-tab: components
doc-subtab: menu
+variables:
+- name: $menu-item-color
+ value: $text
+- name: $menu-item-radius
+ value: $radius-small
+- name: $menu-item-hover-color
+ value: $text-strong
+- name: $menu-item-hover-background-color
+ value: $background
+- name: $menu-item-active-color
+ value: $link-invert
+- name: $menu-item-active-background-color
+ value: $link
+- name: $menu-list-border-left
+ value: 1px solid $border
+- name: $menu-label-color
+ value: $text-light
---
-{% include subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Menu</h1>
- <h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
-
- <hr>
-
{% capture menu_example %}
<aside class="menu">
<p class="menu-label">
</ul>
</aside>
{% endcapture %}
-<div class="columns">
- <div class="column is-3">
-{{menu_example}}
- </div>
- <div class="column">
-{% highlight html %}
-{{menu_example}}
-{% endhighlight %}
- </div>
-</div>
+
+{% include subnav-components.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Menu</h1>
+ <h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=false
+ variables=true
+ %}
+
+ <hr>
+
+ <div class="columns">
+ <div class="column is-3">
+ {{menu_example}}
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{menu_example}}{% endhighlight %}
+ </div>
+ </div>
+
+ {% include variables.html %}
</div>
</section>
layout: documentation
doc-tab: components
doc-subtab: message
+variables:
+- name: $message-background-color
+ value: $background
+- name: $message-radius
+ value: $radius
+- name: $message-header-background-color
+ value: $text
+- name: $message-header-color
+ value: $text-invert
+- name: $message-header-padding
+ value: 0.5em 0.75em
+- name: $message-header-radius
+ value: $radius
+- name: $message-body-border
+ value: 1px solid $border
+- name: $message-body-color
+ value: $text
+- name: $message-body-padding
+ value: 1em 1.25em
+- name: $message-body-radius
+ value: $radius
+- name: $message-body-pre-background-color
+ value: $white
+- name: $message-body-pre-code-background-color
+ value: transparent
---
-{% include subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Messages</h1>
- <h2 class="subtitle">
- Colored <strong>message</strong> blocks, to emphasize part of your page
- </h2>
-
- <hr>
-
{% capture message_example %}
<article class="message">
<div class="message-header">
</div>
</article>
{% endcapture %}
-<div class="columns">
- <div class="column is-half">
-{{message_example}}
- </div>
- <div class="column is-half">
-{% highlight html %}
-{{message_example}}
-{% endhighlight %}
- </div>
-</div>
- <hr>
-
-<h3 class="subtitle">Message body only</h3>
-<div class="content">
- <p>You can <strong>omit</strong> the message header:</p>
-</div>
{% capture message_body_example %}
<article class="message">
<div class="message-body">
</div>
</article>
{% endcapture %}
-<div class="columns">
- <div class="column is-half">
-{{message_body_example}}
- </div>
- <div class="column is-half">
-{% highlight html %}
-{{message_body_example}}
-{% endhighlight %}
- </div>
-</div>
+
+{% include subnav-components.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Messages</h1>
+ <h2 class="subtitle">
+ Colored <strong>message</strong> blocks, to emphasize part of your page
+ </h2>
+ {%
+ include meta.html
+ colors=true
+ sizes=true
+ variables=true
+ %}
+
+ <hr>
+
+ <div class="columns">
+ <div class="column is-half">
+ {{message_example}}
+ </div>
+ <div class="column is-half">
+ {% highlight html %}{{message_example}}{% endhighlight %}
+ </div>
+ </div>
+
+ <hr>
+
+ <h3 class="subtitle">Message body only</h3>
+ <div class="content">
+ <p>You can <strong>omit</strong> the message header:</p>
+ </div>
+ <div class="columns">
+ <div class="column is-half">
+ {{message_body_example}}
+ </div>
+ <div class="column is-half">
+ {% highlight html %}{{message_body_example}}{% endhighlight %}
+ </div>
+ </div>
+
+ {% include variables.html %}
</div>
</section>
layout: documentation
doc-tab: components
doc-subtab: modal
+variables:
+- name: $modal-z
+ value: 20
+- name: $modal-background-background-color
+ value: rgba($black, 0.86)
+- name: $modal-content-width
+ value: 640px
+- name: $modal-content-margin-mobile
+ value: 20px
+- name: $modal-content-spacing-mobile
+ value: 160px
+- name: $modal-content-spacing-tablet
+ value: 40px
+- name: $modal-close-dimensions
+ value: 40px
+- name: $modal-close-right
+ value: 20px
+- name: $modal-close-top
+ value: 20px
+- name: $modal-card-spacing
+ value: 40px
+- name: $modal-card-head-background-color
+ value: $background
+- name: $modal-card-head-border-bottom
+ value: 1px solid $border
+- name: $modal-card-head-padding
+ value: 20px
+- name: $modal-card-head-radius
+ value: $radius-large
+- name: $modal-card-title-color
+ value: $text-strong
+- name: $modal-card-title-line-height
+ value: 1
+- name: $modal-card-title-size
+ value: $size-4
+- name: $modal-card-foot-radius
+ value: $radius-large
+- name: $modal-card-foot-border-top
+ value: 1px solid $border
+- name: $modal-card-body-background-color
+ value: $white
+- name: $modal-card-body-padding
+ value: 20px
---
+{% capture modal %}
+<div class="modal">
+ <div class="modal-background"></div>
+ <div class="modal-content">
+ <!-- Any other Bulma elements you want -->
+ </div>
+ <button class="modal-close is-large"></button>
+</div>
+{% endcapture %}
+
+{% capture image_modal %}
+<div class="modal">
+ <div class="modal-background"></div>
+ <div class="modal-content">
+ <p class="image is-4by3">
+ <img src="{{site.url}}/images/placeholders/1280x960.png">
+ </p>
+ </div>
+ <button class="modal-close is-large"></button>
+</div>
+{% endcapture %}
+
+{% capture modal_card %}
+<div class="modal">
+ <div class="modal-background"></div>
+ <div class="modal-card">
+ <header class="modal-card-head">
+ <p class="modal-card-title">Modal title</p>
+ <button class="delete"></button>
+ </header>
+ <section class="modal-card-body">
+ <!-- Content ... -->
+ </section>
+ <footer class="modal-card-foot">
+ <a class="button is-success">Save changes</a>
+ <a class="button">Cancel</a>
+ </footer>
+ </div>
+</div>
+{% endcapture %}
+
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Modal</h1>
<h2 class="subtitle">A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=false
+ variables=true
+ %}
<hr>
</p>
</div>
-{% highlight html %}
-<div class="modal">
- <div class="modal-background"></div>
- <div class="modal-content">
- <!-- Any other Bulma elements you want -->
- </div>
- <button class="modal-close is-large"></button>
-</div>
-{% endhighlight %}
+ {% highlight html %}{{ modal }}{% endhighlight %}
<div class="content">
<p>To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container</p>
</p>
</div>
-{% highlight html %}
-<div class="modal">
- <div class="modal-background"></div>
- <div class="modal-content">
- <p class="image is-4by3">
- <img src="{{site.url}}/images/placeholders/1280x960.png">
- </p>
- </div>
- <button class="modal-close is-large"></button>
-</div>
-{% endhighlight %}
+ {% highlight html %}{{ image_modal }}{% endhighlight %}
<hr>
</p>
</div>
-{% highlight html %}
-<div class="modal">
- <div class="modal-background"></div>
- <div class="modal-card">
- <header class="modal-card-head">
- <p class="modal-card-title">Modal title</p>
- <button class="delete"></button>
- </header>
- <section class="modal-card-body">
- <!-- Content ... -->
- </section>
- <footer class="modal-card-foot">
- <a class="button is-success">Save changes</a>
- <a class="button">Cancel</a>
- </footer>
- </div>
-</div>
-{% endhighlight %}
+ {% highlight html %}{{ modal_card }}{% endhighlight %}
+
+ {% include variables.html %}
</div>
</section>
layout: documentation
doc-tab: components
doc-subtab: navbar
+variables:
+- name: $navbar-background-color
+ value: $white
+- name: $navbar-height
+ value: 3.25rem
+- name: $navbar-item-color
+ value: $grey-dark
+- name: $navbar-item-hover-color
+ value: $black
+- name: $navbar-item-hover-background-color
+ value: $background
+- name: $navbar-item-active-color
+ value: $black
+- name: $navbar-item-active-background-color
+ value: transparent
+- name: $navbar-tab-hover-background-color
+ value: transparent
+- name: $navbar-tab-hover-border-bottom-color
+ value: $primary
+- name: $navbar-tab-active-color
+ value: $primary
+- name: $navbar-tab-active-background-color
+ value: transparent
+- name: $navbar-tab-active-border-bottom-color
+ value: $primary
+- name: $navbar-tab-active-border-bottom-style
+ value: solid
+- name: $navbar-tab-active-border-bottom-width
+ value: 3px
+- name: $navbar-dropdown-background-color
+ value: $white
+- name: $navbar-dropdown-border-top
+ value: 1px solid $border
+- name: $navbar-dropdown-offset
+ value: -4px
+- name: $navbar-dropdown-arrow
+ value: $link
+- name: $navbar-dropdown-radius
+ value: $radius-large
+- name: $navbar-dropdown-z
+ value: 20
+- name: $navbar-dropdown-boxed-radius
+ value: $radius-large
+- name: $navbar-dropdown-boxed-shadow
+ value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+- name: $navbar-dropdown-item-hover-color
+ value: $black
+- name: $navbar-dropdown-item-hover-background-color
+ value: $background
+- name: $navbar-dropdown-item-active-color
+ value: $primary
+- name: $navbar-dropdown-item-active-background-color
+ value: $background
+- name: $navbar-divider-background-color
+ value: $border
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
- <div class="columns" style="margin-bottom: -0.75rem !important;">
- <div class="column">
- <h1 class="title">Navbar</h1>
- <h2 class="subtitle">
- A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
- </h2>
- </div>
-
- <div class="column is-narrow">
- <p class="content">
- <span class="tag is-success">New!</span>
- <span class="tag is-info">0.4.3</span>
- </p>
-
- </div>
- </div>
+ <h1 class="title">Navbar</h1>
+ <h2 class="subtitle">
+ A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
+ </h2>
+ {%
+ include meta.html
+ new=true
+ since="0.4.3"
+ colors=false
+ sizes=false
+ variables=true
+ %}
<hr>
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
+ {% include variables.html %}
+
</div>
</section>
layout: documentation
doc-tab: components
doc-subtab: pagination
+variables:
+- name: $pagination-color
+ value: $grey-darker
+- name: $pagination-background
+ value: $white
+- name: $pagination-border-color
+ value: $grey-lighter
+- name: $pagination-margin
+ value: -0.25rem
+- name: $pagination-hover-color
+ value: $link-hover
+- name: $pagination-hover-border-color
+ value: $link-hover-border
+- name: $pagination-focus-color
+ value: $link-focus
+- name: $pagination-focus-border-color
+ value: $link-focus-border
+- name: $pagination-active-color
+ value: $link-active
+- name: $pagination-active-border-color
+ value: $link-active-border
+- name: $pagination-disabled-color
+ value: $grey
+- name: $pagination-disabled-background-color
+ value: $grey-lighter
+- name: $pagination-disabled-border-color
+ value: $grey-lighter
+- name: $pagination-current-color
+ value: $link-invert
+- name: $pagination-current-background-color
+ value: $link
+- name: $pagination-current-border-color
+ value: $link
+- name: $pagination-ellipsis-color
+ value: $grey-light
+- name: $pagination-shadow-inset
+ value: inset 0 1px 2px rgba($black, 0
---
-{% include subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Pagination</h1>
- <h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
-
- <hr>
-
- <div class="content">
- <p>
- The pagination component consists of several elements:
- </p>
- <ul>
- <li>
- <code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
- </li>
- <li>
- <code>pagination-list</code> which displays page items:
- <ul>
- <li>
- <code>pagination-link</code> for the page numbers
- </li>
- <li>
- <code>pagination-ellipsis</code> for range separators
- </li>
- </ul>
- </li>
- </ul>
- <p>
- All elements are optional so you can compose your pagination as you wish.
- </p>
- </div>
-
{% capture pagination_example %}
<nav class="pagination">
<a class="pagination-previous">Previous</a>
</ul>
</nav>
{% endcapture %}
-<div class="example">
-{{pagination_example}}
-</div>
-{% highlight html %}
-{{pagination_example}}
-{% endhighlight %}
-
- <div class="content">
- <p>
- You can disable some links if they are not active, or change the amount of page numbers available.
- </p>
- </div>
{% capture pagination_options_example %}
<nav class="pagination">
</ul>
</nav>
{% endcapture %}
-<div class="example">
-{{pagination_options_example}}
-</div>
-{% highlight html %}
-{{pagination_options_example}}
-{% endhighlight %}
-
- <div class="content">
- <p>
- By default, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
- </p>
- </div>
{% capture pagination_centered_example %}
<nav class="pagination is-centered">
</ul>
</nav>
{% endcapture %}
-<div class="example">
-{{pagination_centered_example}}
-</div>
-{% highlight html %}
-{{pagination_centered_example}}
-{% endhighlight %}
{% capture pagination_right_example %}
<nav class="pagination is-right">
</ul>
</nav>
{% endcapture %}
-<div class="example">
-{{pagination_right_example}}
-</div>
-{% highlight html %}
-{{pagination_right_example}}
-{% endhighlight %}
-
- <hr>
-
- <h2 class="title">Sizes <span class="tag is-success">New!</span></h2>
- <p class="content">
- The pagination comes in <strong>3 additional sizes</strong>.<br>
- You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
- </p>
{% capture pagination_small_example %}
<nav class="pagination is-small">
</nav>
{% endcapture %}
- <div class="example">
- {{pagination_small_example}}
- </div>
-
{% capture pagination_medium_example %}
<nav class="pagination is-medium">
<a class="pagination-previous">Previous</a>
</nav>
{% endcapture %}
- <div class="example">
- {{pagination_medium_example}}
- </div>
-
{% capture pagination_large_example %}
<nav class="pagination is-large">
<a class="pagination-previous">Previous</a>
</nav>
{% endcapture %}
+{% include subnav-components.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Pagination</h1>
+ <h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=true
+ variables=true
+ %}
+
+ <hr>
+
+ <div class="content">
+ <p>
+ The pagination component consists of several elements:
+ </p>
+ <ul>
+ <li>
+ <code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
+ </li>
+ <li>
+ <code>pagination-list</code> which displays page items:
+ <ul>
+ <li>
+ <code>pagination-link</code> for the page numbers
+ </li>
+ <li>
+ <code>pagination-ellipsis</code> for range separators
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <p>
+ All elements are optional so you can compose your pagination as you wish.
+ </p>
+ </div>
+
+ <div class="example">
+ {{pagination_example}}
+ </div>
+
+ {% highlight html %}{{pagination_example}}{% endhighlight %}
+
+ <div class="content">
+ <p>
+ You can disable some links if they are not active, or change the amount of page numbers available.
+ </p>
+ </div>
+
+ <div class="example">
+ {{pagination_options_example}}
+ </div>
+
+ {% highlight html %}{{pagination_options_example}}{% endhighlight %}
+
+ <div class="content">
+ <p>
+ By default, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
+ </p>
+ </div>
+
+ <div class="example">
+ {{pagination_centered_example}}
+ </div>
+
+ {% highlight html %}{{pagination_centered_example}}{% endhighlight %}
+
+ <div class="example">
+ {{pagination_right_example}}
+ </div>
+
+ {% highlight html %}{{pagination_right_example}}{% endhighlight %}
+
+ <hr style="margin-bottom: 0;">
+
+ <h2 id="sizes" class="title" style="padding-top: 1.5rem;">
+ Sizes
+ </h2>
+
+ <p class="content">
+ The pagination comes in <strong>3 additional sizes</strong>.<br>
+ You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
+ </p>
+
+ <div class="example">
+ {{pagination_small_example}}
+ </div>
+
+ <div class="example">
+ {{pagination_medium_example}}
+ </div>
+
<div class="example">
{{pagination_large_example}}
</div>
+ {% include variables.html %}
+
</div>
</section>
layout: documentation
doc-tab: components
doc-subtab: panel
+variables:
+- name: $panel-item-border
+ value: 1px solid $border
+- name: $panel-heading-background-color
+ value: $background
+- name: $panel-heading-color
+ value: $text-strong
+- name: $panel-heading-line-height
+ value: 1.25
+- name: $panel-heading-padding
+ value: 0.5em 0.75em
+- name: $panel-heading-radius
+ value: $radius
+- name: $panel-heading-size
+ value: 1.25em
+- name: $panel-heading-weight
+ value: $weight-light
+- name: $panel-tab-border-bottom
+ value: 1px solid $border
+- name: $panel-tab-active-border-bottom-color
+ value: $link-active-border
+- name: $panel-tab-active-color
+ value: $link-active
+- name: $panel-list-item-color
+ value: $text
+- name: $panel-list-item-hover-color
+ value: $link
+- name: $panel-block-color
+ value: $text-strong
+- name: $panel-block-hover-background-color
+ value: $background
+- name: $panel-block-active-border-left-color
+ value: $link
+- name: $panel-block-active-color
+ value: $link-active
+- name: $panel-block-active-icon-color
+ value: $link
+- name: $panel-icon-color
+ value: $text-light
---
-{% include subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Panel</h1>
- <h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
-
- <hr>
-
- <div class="content">
- <p>
- The <code>panel</code> is container for several types:
- </p>
- <ul>
- <li>
- <code>panel-heading</code> as the first child
- </li>
- <li>
- <code>panel-tabs</code> for navigation
- </li>
- <li>
- <code>panel-block</code> which can contain other elements, like:
- <ul>
- <li><code>control</code></li>
- <li><code>input</code></li>
- <li><code>button</code></li>
- <li><code>panel-icon</code></li>
- </ul>
- </li>
- </ul>
- <p>
- The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
- </p>
- </div>
-
{% capture panel_example %}
<nav class="panel">
<p class="panel-heading">
- Repositories
+ repositories
</p>
<div class="panel-block">
<p class="control has-icons-left">
- <input class="input is-small" type="text" placeholder="Search">
+ <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>
+ <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">
<span class="panel-icon">
<i class="fa fa-code-fork"></i>
</span>
- daniellowtw/infBoard
+ daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
</a>
<label class="panel-block">
<input type="checkbox">
- Remember me
+ remember me
</label>
<div class="panel-block">
<button class="button is-primary is-outlined is-fullwidth">
- Reset all filters
+ reset all filters
</button>
</div>
</nav>
{% endcapture %}
+
+{% include subnav-components.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Panel</h1>
+ <h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=false
+ variables=true
+ %}
+
+ <hr>
+
+ <div class="content">
+ <p>
+ The <code>panel</code> is container for several types:
+ </p>
+ <ul>
+ <li>
+ <code>panel-heading</code> as the first child
+ </li>
+ <li>
+ <code>panel-tabs</code> for navigation
+ </li>
+ <li>
+ <code>panel-block</code> which can contain other elements, like:
+ <ul>
+ <li><code>control</code></li>
+ <li><code>input</code></li>
+ <li><code>button</code></li>
+ <li><code>panel-icon</code></li>
+ </ul>
+ </li>
+ </ul>
+ <p>
+ The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
+ </p>
+ </div>
+
<div class="columns">
<div class="column is-4">
-{{panel_example}}
+ {{panel_example}}
</div>
<div class="column">
-{% highlight html %}
-{{panel_example}}
-{% endhighlight %}
+ {% highlight html %}{{panel_example}}{% endhighlight %}
</div>
</div>
+ {% include variables.html %}
+
</div>
</section>
layout: documentation
doc-tab: components
doc-subtab: tabs
+variables:
+- name: $tabs-border-bottom-color
+ value: $border
+- name: $tabs-border-bottom-style
+ value: solid
+- name: $tabs-border-bottom-width
+ value: 1px
+- name: $tabs-link-color
+ value: $text
+- name: $tabs-link-hover-border-bottom-color
+ value: $text-strong
+- name: $tabs-link-hover-color
+ value: $text-strong
+- name: $tabs-link-active-border-bottom-color
+ value: $primary
+- name: $tabs-link-active-color
+ value: $primary
+- name: $tabs-link-padding
+ value: 0.5em 1em
+- name: $tabs-boxed-link-radius
+ value: $radius
+- name: $tabs-boxed-link-hover-background-color
+ value: $background
+- name: $tabs-boxed-link-hover-border-bottom-color
+ value: $border
+- name: $tabs-boxed-link-active-background-color
+ value: $white
+- name: $tabs-boxed-link-active-border-color
+ value: $border
+- name: $tabs-boxed-link-active-border-bottom-color
+ value: transparent !important
+- name: $tabs-toggle-link-border-color
+ value: $border
+- name: $tabs-toggle-link-border-style
+ value: solid
+- name: $tabs-toggle-link-border-width
+ value: 1px
+- name: $tabs-toggle-link-hover-background-color
+ value: $background
+- name: $tabs-toggle-link-hover-border-color
+ value: $border-hover
+- name: $tabs-toggle-link-radius
+ value: $radius
+- name: $tabs-toggle-link-active-background-color
+ value: $primary
+- name: $tabs-toggle-link-active-border-color
+ value: $primary
+- name: $tabs-toggle-link-active-color
+ value: $primary-invert
---
-{% include subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Tabs</h1>
- <h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
-
- <hr>
-
- <div class="content">
- <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code><ul></code> list.<br>
- The <strong>default</strong> tabs style has a single border at the bottom.</p>
- </div>
-
{% capture tabs_example %}
<div class="tabs">
<ul>
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_example}}
-</div>
-{% highlight html %}
-{{tabs_example}}
-{% endhighlight %}
- <hr>
-
- <h3 class="title">Alignment</h3>
- <div class="content">
- <p>
- To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
- </p>
- </div>
{% capture tabs_centered_example %}
<div class="tabs is-centered">
<ul>
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_centered_example}}
-</div>
-{% highlight html %}
-{{tabs_centered_example}}
-{% endhighlight %}
{% capture tabs_right_example %}
<div class="tabs is-right">
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_right_example}}
-</div>
-{% highlight html %}
-{{tabs_right_example}}
-{% endhighlight %}
-
- <hr>
-
- <h3 class="title">Icons</h3>
- <div class="content">
- <p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
- </div>
{% capture tabs_icons_example %}
<div class="tabs is-centered">
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_icons_example}}
-</div>
-{% highlight html %}
-{{tabs_icons_example}}
-{% endhighlight %}
- <hr>
-
- <h3 class="title">Sizes</h3>
- <div class="content">
- <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
- </div>
{% capture tabs_small_example %}
<div class="tabs is-small">
<ul>
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_small_example}}
-</div>
-{% highlight html %}
-{{tabs_small_example}}
-{% endhighlight %}
{% capture tabs_medium_example %}
<div class="tabs is-medium">
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_medium_example}}
-</div>
-{% highlight html %}
-{{tabs_medium_example}}
-{% endhighlight %}
{% capture tabs_large_example %}
<div class="tabs is-large">
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_large_example}}
-</div>
-{% highlight html %}
-{{tabs_large_example}}
-{% endhighlight %}
-
- <hr>
- <h3 class="title">Styles</h3>
- <div class="content">
- If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
- </div>
{% capture tabs_boxed_example %}
<div class="tabs is-boxed">
<ul>
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_boxed_example}}
-</div>
-{% highlight html %}
-{{tabs_boxed_example}}
-{% endhighlight %}
- <p class="content">
- If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
- </p>
{% capture tabs_toggle_example %}
<div class="tabs is-toggle">
<ul>
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_toggle_example}}
-</div>
-{% highlight html %}
-{{tabs_toggle_example}}
-{% endhighlight %}
- <p class="content">
- If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
- </p>
{% capture tabs_fullwidth_example %}
<div class="tabs is-fullwidth">
<ul>
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_fullwidth_example}}
-</div>
-{% highlight html %}
-{{tabs_fullwidth_example}}
-{% endhighlight %}
-
- <hr>
- <h3 class="title">Combining</h3>
- <div class="content">
- <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
- </div>
{% capture tabs_centered_boxed_example %}
<div class="tabs is-centered is-boxed">
<ul>
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_centered_boxed_example}}
-</div>
-{% highlight html %}
-{{tabs_centered_boxed_example}}
-{% endhighlight %}
{% capture tabs_toggle_fullwidth_example %}
<div class="tabs is-toggle is-fullwidth">
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_toggle_fullwidth_example}}
-</div>
-{% highlight html %}
-{{tabs_toggle_fullwidth_example}}
-{% endhighlight %}
{% capture tabs_centered_boxed_medium_example %}
<div class="tabs is-centered is-boxed is-medium">
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_centered_boxed_medium_example}}
-</div>
-{% highlight html %}
-{{tabs_centered_boxed_medium_example}}
-{% endhighlight %}
{% capture tabs_toggle_fullwidth_large_example %}
<div class="tabs is-toggle is-fullwidth is-large">
</ul>
</div>
{% endcapture %}
-<div class="example">
-{{tabs_toggle_fullwidth_large_example}}
-</div>
-{% highlight html %}
-{{tabs_toggle_fullwidth_large_example}}
-{% endhighlight %}
+
+{% include subnav-components.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Tabs</h1>
+ <h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
+ {%
+ include meta.html
+ since="0.4.4"
+ colors=false
+ sizes=true
+ variables=true
+ %}
+
+ <hr>
+
+ <div class="content">
+ <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code><ul></code> list.<br>
+ The <strong>default</strong> tabs style has a single border at the bottom.</p>
+ </div>
+
+ <div class="example">
+ {{tabs_example}}
+ </div>
+ {% highlight html %}{{tabs_example}}{% endhighlight %}
+
+ <hr>
+
+ <h3 class="title">Alignment</h3>
+ <div class="content">
+ <p>
+ To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
+ </p>
+ </div>
+
+ <div class="example">
+ {{tabs_centered_example}}
+ </div>
+ {% highlight html %}{{tabs_centered_example}}{% endhighlight %}
+
+ <div class="example">
+ {{tabs_right_example}}
+ </div>
+ {% highlight html %}{{tabs_right_example}}{% endhighlight %}
+
+ <hr>
+
+ <h3 class="title">Icons</h3>
+ <div class="content">
+ <p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
+ </div>
+
+ <div class="example">
+ {{tabs_icons_example}}
+ </div>
+ {% highlight html %}{{tabs_icons_example}}{% endhighlight %}
+
+ <hr style="margin-bottom: 0;">
+
+ <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
+ Sizes
+ </h3>
+ <div class="content">
+ <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
+ </div>
+
+ <div class="example">
+ {{tabs_small_example}}
+ </div>
+ {% highlight html %}{{tabs_small_example}}{% endhighlight %}
+
+ <div class="example">
+ {{tabs_medium_example}}
+ </div>
+ {% highlight html %}{{tabs_medium_example}}{% endhighlight %}
+
+ <div class="example">
+ {{tabs_large_example}}
+ </div>
+ {% highlight html %}{{tabs_large_example}}{% endhighlight %}
+
+ <hr>
+
+ <h3 class="title">Styles</h3>
+ <div class="content">
+ If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
+ </div>
+
+ <div class="example">
+ {{tabs_boxed_example}}
+ </div>
+ {% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
+
+ <p class="content">
+ If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
+ </p>
+
+ <div class="example">
+ {{tabs_toggle_example}}
+ </div>
+ {% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
+
+ <p class="content">
+ If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
+ </p>
+
+ <div class="example">
+ {{tabs_fullwidth_example}}
+ </div>
+ {% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
+
+ <hr>
+
+ <h3 class="title">Combining</h3>
+ <div class="content">
+ <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
+ </div>
+
+ <div class="example">
+ {{tabs_centered_boxed_example}}
+ </div>
+ {% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
+
+ <div class="example">
+ {{tabs_toggle_fullwidth_example}}
+ </div>
+ {% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
+
+ <div class="example">
+ {{tabs_centered_boxed_medium_example}}
+ </div>
+ {% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
+
+ <div class="example">
+ {{tabs_toggle_fullwidth_large_example}}
+ </div>
+ {% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}
+
+ {% include variables.html %}
</div>
</section>
projects / thirdparty / bulma.git / commitdiff
