mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Jeremy Thomas
GitHub
commit
9350395589
28
CHANGELOG.md
28
CHANGELOG.md
@ -1,5 +1,33 @@
|
||||
# Bulma Changelog
|
||||
|
||||
## 0.3.0
|
||||
|
||||
* Use `rem` and `em` (!)
|
||||
* Fix Font Awesome icons in buttons (!)
|
||||
* Fix message colors (!)
|
||||
* Use `{% capture %}` to ensure same display as code snippet (!)
|
||||
|
||||
* Move variables to their own file
|
||||
* Remove small tag
|
||||
* Add `:focus` state
|
||||
* Fix table
|
||||
* Remove table `.is-icon` and `.is-link`
|
||||
* Add `.content` table
|
||||
* Fix inputs with icons
|
||||
* Input icons require the `.icon` container
|
||||
* Deprecate `.media-number`
|
||||
* Fix `.level-item` height
|
||||
* Fix `.menu` spacing
|
||||
* Deprecate `.menu-nav`
|
||||
* Add invert outlined buttons
|
||||
* Fix `.nav`
|
||||
* Fix `.pagination`
|
||||
* Fix `.tabs`
|
||||
* Fix `.panel`
|
||||
* Fix `.delete`
|
||||
* Add mixins documentation
|
||||
* Add functions documentation
|
||||
|
||||
## 0.2.2
|
||||
|
||||
* Fix: remove multiple imports
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "bulma",
|
||||
"version": "0.2.3",
|
||||
"version": "0.3.0",
|
||||
"homepage": "http://bulma.io",
|
||||
"authors": [
|
||||
"jgthms <bbxdesign@gmail.com>"
|
||||
|
||||
2
bulma.sass
vendored
2
bulma.sass
vendored
@ -1,4 +1,4 @@
|
||||
/*! bulma.io v0.2.3 | MIT License | github.com/jgthms/bulma */
|
||||
/*! bulma.io v0.3.0 | MIT License | github.com/jgthms/bulma */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "sass/utilities/_all"
|
||||
|
||||
3520
css/bulma.css
vendored
3520
css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
@ -11,5 +11,6 @@ npm-debug.log
|
||||
.sass-cache
|
||||
/_sass
|
||||
/bulma
|
||||
/fontawesome
|
||||
/styles/node_modules
|
||||
_site
|
||||
|
||||
@ -8,10 +8,11 @@ description: "Bulma is an open source CSS framework based on Flexbox and built
|
||||
markdown: kramdown
|
||||
permalink: pretty
|
||||
url: http://bulma.io
|
||||
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
|
||||
|
||||
# Variables
|
||||
|
||||
documentation: "/documentation/overview/start/"
|
||||
download: https://github.com/jgthms/bulma/archive/0.2.3.zip
|
||||
download: https://github.com/jgthms/bulma/archive/0.3.0.zip
|
||||
github: https://github.com/jgthms/bulma
|
||||
version: 0.2.3
|
||||
version: 0.3.0
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-head">
|
||||
<div class="container">
|
||||
{% include header.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
|
||||
@ -14,7 +14,9 @@
|
||||
<div class="control is-grouped">
|
||||
<div class="control has-icon is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
|
||||
@ -74,7 +76,7 @@
|
||||
|
||||
.title.is-2 a {
|
||||
color: #242424;
|
||||
padding-left: 60px;
|
||||
padding-left: 48px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -82,10 +84,10 @@
|
||||
color: #00d1b2;
|
||||
}
|
||||
|
||||
.title.is-2 .icon.is-large {
|
||||
left: 0;
|
||||
.title.is-2 .icon.is-medium {
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.hero .title.is-2 a {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="{{ site.fontawesome }}">
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="{{ site.url }}/">
|
||||
{% if page.route == 'index' %}
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="{{ site.title }}">
|
||||
{% else %}
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="{{ site.title }}">
|
||||
{% endif %}
|
||||
<a class="nav-item is-brand" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -43,7 +39,7 @@
|
||||
Blog
|
||||
</a>
|
||||
|
||||
{% if page.route == 'index' %}
|
||||
{% if page.route != 'nothing' %}
|
||||
<span class="nav-item">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
@ -66,7 +62,7 @@
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="nav-item">
|
||||
<a class="button is-light is-outlined"
|
||||
<a class="button is-primary is-inverted is-outlined"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/"
|
||||
|
||||
@ -10,6 +10,9 @@
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/form/">
|
||||
Form
|
||||
</a>
|
||||
|
||||
@ -4,17 +4,23 @@
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
|
||||
Classes
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,13 +3,11 @@ layout: default
|
||||
route: documentation
|
||||
---
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-head">
|
||||
<div class="container">
|
||||
{% include header.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
|
||||
@ -10,7 +10,7 @@ route: blog
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p class="subtitle4">
|
||||
<p class="subtitle">
|
||||
{{ post.date | date_to_string }}
|
||||
</p>
|
||||
<h2 class="title">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "../bulma"
|
||||
@import "./sass/highlight"
|
||||
|
||||
// Override
|
||||
.button
|
||||
@ -20,7 +21,7 @@ body.page-grid .column > .notification
|
||||
|
||||
+tablet
|
||||
.header-item .button + .button
|
||||
margin-left: 10px
|
||||
margin-left: 0.75rem
|
||||
|
||||
// Additional
|
||||
svg
|
||||
@ -32,7 +33,10 @@ $carbon-space: 15px
|
||||
#carbon
|
||||
max-width: 340px
|
||||
min-height: 100px + ($carbon-space * 2)
|
||||
padding: $carbon-space
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
|
||||
+tablet
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
@ -40,23 +44,34 @@ $carbon-space: 15px
|
||||
|
||||
#carbonads
|
||||
text-align: left
|
||||
a:hover
|
||||
text-decoration: underline
|
||||
a,
|
||||
span
|
||||
display: block
|
||||
.carbon-wrap
|
||||
position: relative
|
||||
.carbon-img
|
||||
float: left
|
||||
height: 100px
|
||||
width: 130px
|
||||
height: 130px
|
||||
padding: 15px 0 15px 15px
|
||||
width: 145px
|
||||
img
|
||||
display: block
|
||||
height: 100px
|
||||
width: 130px
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
margin-left: 130px + $carbon-space
|
||||
line-height: 20px
|
||||
padding: 15px 15px 35px 160px
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
margin-left: $carbon-space
|
||||
left: 160px
|
||||
line-height: 20px
|
||||
padding: 0 15px 10px 0
|
||||
position: absolute
|
||||
right: 0
|
||||
|
||||
$github: #333333
|
||||
$twitter: #55acee
|
||||
@ -186,13 +201,17 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
|
||||
animation-delay: 1.2s
|
||||
|
||||
#npm
|
||||
align-items: center
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 1.4s
|
||||
background: none
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin: -10px 0 20px
|
||||
code
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
color: $link
|
||||
color: $primary
|
||||
display: inline-block
|
||||
font-size: 16px
|
||||
padding: 16px 32px
|
||||
@ -221,13 +240,13 @@ html.route-index #carbon
|
||||
background: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
padding: 20px
|
||||
padding: 1.5rem
|
||||
|
||||
#mc_embed_signup
|
||||
.control
|
||||
margin-bottom: 0
|
||||
.notification
|
||||
margin-top: 10px
|
||||
margin-top: 0.75rem
|
||||
|
||||
#social
|
||||
align-items: center
|
||||
@ -261,12 +280,12 @@ html.route-index #carbon
|
||||
border: 1px solid $warning
|
||||
border-top-right-radius: $radius
|
||||
color: $warning-invert
|
||||
padding: 15px 20px
|
||||
padding: 1.25rem 1.5rem
|
||||
position: relative
|
||||
&:not(:first-child)
|
||||
margin-top: 30px
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
margin-bottom: 1.5rem
|
||||
&:before
|
||||
background: $warning
|
||||
border-radius: $radius $radius 0 0
|
||||
@ -292,11 +311,11 @@ html.route-index #carbon
|
||||
border: 1px solid $warning
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -20px
|
||||
margin-top: -1.5rem
|
||||
pre
|
||||
max-height: 600px
|
||||
max-height: 50vh
|
||||
&:not(:last-child)
|
||||
margin-bottom: 40px
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
@ -304,7 +323,7 @@ $structure-invert: $danger-invert
|
||||
.structure
|
||||
border-color: $structure
|
||||
border-radius: $radius
|
||||
padding: 20px
|
||||
padding: 1.5rem
|
||||
&:before
|
||||
background: $structure
|
||||
color: $structure-invert
|
||||
@ -331,11 +350,11 @@ $structure-invert: $danger-invert
|
||||
padding: 3px 5px
|
||||
z-index: 2
|
||||
&.is-structure-container
|
||||
padding: 20px 10px 10px
|
||||
padding: 1.5rem 0.75rem 0.75rem
|
||||
&:after
|
||||
align-items: flex-start
|
||||
justify-content: flex-start
|
||||
padding: 5px 10px
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
.highlight
|
||||
position: relative
|
||||
@ -357,14 +376,17 @@ $structure-invert: $danger-invert
|
||||
.expand
|
||||
border-right-width: 1px
|
||||
right: 50px
|
||||
+tablet
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
||||
+tablet
|
||||
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
||||
margin-left: 20px
|
||||
margin-right: 20px
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
& + .highlight
|
||||
margin-left: 20px
|
||||
margin-right: 20px
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
|
||||
.section.is-fullwidth
|
||||
padding: 0 !important
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -13,85 +13,65 @@ doc-subtab: card
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{% capture card_example %}
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/300x225" alt="">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-32x32">
|
||||
<img src="http://placehold.it/64x64" alt="Image">
|
||||
<figure class="image" style="height: 40px; width: 40px;">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">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 href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
<small>11:09 PM - 1 Jan 2016</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/300x225" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-32x32">
|
||||
<img src="http://placehold.it/64x64" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">John Smith</p>
|
||||
<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 href="#">@bulmaio</a>.
|
||||
<a href="#">#css</a> <a href="#">#responsive</a>
|
||||
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>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{card_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<div class="card is-fullwidth">
|
||||
{% capture card_header_example %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<a class="card-header-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
|
||||
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>
|
||||
@ -102,33 +82,17 @@ doc-subtab: card
|
||||
<a class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_header_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<div class="card is-fullwidth">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<a class="card-header-icon">
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</a>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
<small>11:09 PM - 1 Jan 2016</small>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a class="card-footer-item">Save</a>
|
||||
<a class="card-footer-item">Edit</a>
|
||||
<a class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
{{card_header_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -71,46 +71,7 @@ doc-subtab: level
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<p class="control has-addons">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<p class="level-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Published</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Drafts</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Deleted</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a class="button is-success">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{% capture nav_example %}
|
||||
<!-- Main container -->
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
@ -139,122 +100,120 @@ doc-subtab: level
|
||||
<p class="level-item"><a class="button is-success">New</a></p>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{nav_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{nav_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
<h3 class="title">Centered level</h3>
|
||||
|
||||
<h3 class="title">Centered level</h3>
|
||||
<div class="content">
|
||||
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
|
||||
</div>
|
||||
|
||||
{% capture nav_centered_example %}
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
{% capture nav_centered_bis_example %}
|
||||
<nav class="level">
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Home</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
{{nav_centered_example}}
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</nav>
|
||||
{{nav_centered_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<nav class="level">
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Home</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
{{nav_centered_bis_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="level">
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Home</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
{{nav_centered_bis_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Mobile level</h3>
|
||||
<div class="content">
|
||||
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{% capture nav_mobile_example %}
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{nav_mobile_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{nav_mobile_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -21,7 +21,7 @@ doc-subtab: media-object
|
||||
<article class="media">
|
||||
<figure class="media-left structure-item" title="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content structure-item is-structure-right" title="media-content">
|
||||
@ -52,137 +52,84 @@ doc-subtab: media-object
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
{% capture media_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/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">
|
||||
<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 %}
|
||||
<div class="example">
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
</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>
|
||||
{{media_example}}
|
||||
</div>
|
||||
<nav class="level">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
</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">
|
||||
<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>
|
||||
{{media_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% capture media_bis_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a class="button is-info">Post comment</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Press enter to submit
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a class="button is-info">Post comment</a>
|
||||
{{media_bis_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Press enter to submit
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a class="button is-info">Post comment</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Press enter to submit
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
{{media_bis_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -191,11 +138,11 @@ doc-subtab: media-object
|
||||
<div class="content">
|
||||
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{% capture media_nested_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@ -212,7 +159,7 @@ doc-subtab: media-object
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="http://placehold.it/96x96">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@ -239,7 +186,7 @@ doc-subtab: media-object
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="http://placehold.it/96x96">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@ -259,7 +206,7 @@ doc-subtab: media-object
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@ -271,87 +218,12 @@ doc-subtab: media-object
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{media_nested_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Barbara Middleton</strong>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="http://placehold.it/96x96">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Sean Brown</strong>
|
||||
<br>
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="http://placehold.it/96x96">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Kayli Eunice </strong>
|
||||
<br>
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">Post comment</button>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
{{media_nested_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -13,79 +13,52 @@ doc-subtab: menu
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
{% capture menu_example %}
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a href="#">Dashboard</a></li>
|
||||
<li><a href="#">Customers</a></li>
|
||||
<li><a>Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Administration
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a href="#">Team Settings</a></li>
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
<a class="is-active" href="#">Manage Your Team</a>
|
||||
<a class="is-active">Manage Your Team</a>
|
||||
<ul>
|
||||
<li><a href="#">Members</a></li>
|
||||
<li><a href="#">Plugins</a></li>
|
||||
<li><a href="#">Add a member</a></li>
|
||||
<li><a>Members</a></li>
|
||||
<li><a>Plugins</a></li>
|
||||
<li><a>Add a member</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Invitations</a></li>
|
||||
<li><a href="#">Authentication</a></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 href="#">Payments</a></li>
|
||||
<li><a href="#">Transfers</a></li>
|
||||
<li><a href="#">Balance</a></li>
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
<li><a>Balance</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
{{menu_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a href="#">Dashboard</a></li>
|
||||
<li><a href="#">Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Administration
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a href="#">Team Settings</a></li>
|
||||
<li>
|
||||
<a class="is-active" href="#">Manage Your Team</a>
|
||||
<ul>
|
||||
<li><a href="#">Members</a></li>
|
||||
<li><a href="#">Plugins</a></li>
|
||||
<li><a href="#">Add a member</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Invitations</a></li>
|
||||
<li><a href="#">Authentication</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Transactions
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a href="#">Payments</a></li>
|
||||
<li><a href="#">Transfers</a></li>
|
||||
<li><a href="#">Balance</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
{{menu_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -15,154 +15,78 @@ doc-subtab: message
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{% capture message_example %}
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
Hello World
|
||||
<p>Hello World</p>
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-dark">
|
||||
<div class="message-header">
|
||||
<p>Dark</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>
|
||||
<article class="message is-primary">
|
||||
<div class="message-header">
|
||||
Primary
|
||||
<p>Primary</p>
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-info">
|
||||
<div class="message-header">
|
||||
Info
|
||||
<p>Info</p>
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-success">
|
||||
<div class="message-header">
|
||||
Success
|
||||
<p>Success</p>
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-warning">
|
||||
<div class="message-header">
|
||||
Warning
|
||||
<p>Warning</p>
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
Danger
|
||||
<p><strong>Danger</strong>! <a>Learn more</a></p>
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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 %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
Hello World
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque risus mi, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
|
||||
gravida purus diam, et dictum felis venenatis efficitur.
|
||||
Aenean ac eleifend lacus, 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>
|
||||
|
||||
<article class="message is-primary">
|
||||
<div class="message-header">
|
||||
Primary
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque risus mi, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
|
||||
gravida purus diam, et dictum felis venenatis efficitur.
|
||||
Aenean ac eleifend lacus, 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>
|
||||
|
||||
<article class="message is-info">
|
||||
<div class="message-header">
|
||||
Info
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque risus mi, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
|
||||
gravida purus diam, et dictum felis venenatis efficitur.
|
||||
Aenean ac eleifend lacus, 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>
|
||||
|
||||
<article class="message is-success">
|
||||
<div class="message-header">
|
||||
Success
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque risus mi, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
|
||||
gravida purus diam, et dictum felis venenatis efficitur.
|
||||
Aenean ac eleifend lacus, 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>
|
||||
|
||||
<article class="message is-warning">
|
||||
<div class="message-header">
|
||||
Warning
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque risus mi, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
|
||||
gravida purus diam, et dictum felis venenatis efficitur.
|
||||
Aenean ac eleifend lacus, 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>
|
||||
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
Danger
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque risus mi, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
|
||||
gravida purus diam, et dictum felis venenatis efficitur.
|
||||
Aenean ac eleifend lacus, 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>
|
||||
{{message_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -170,78 +94,56 @@ doc-subtab: message
|
||||
<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">
|
||||
{% capture message_body_example %}
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-dark">
|
||||
<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>
|
||||
<article class="message is-primary">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-info">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-success">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-warning">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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>
|
||||
<article class="message is-danger">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
|
||||
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 %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{message_body_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
|
||||
<article class="message is-primary">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
|
||||
<article class="message is-info">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
|
||||
<article class="message is-success">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
|
||||
<article class="message is-warning">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
|
||||
<article class="message is-danger">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
|
||||
{{message_body_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -75,7 +75,7 @@ doc-subtab: modal
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="http://placehold.it/1280x960">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close"></button>
|
||||
@ -122,7 +122,7 @@ doc-subtab: modal
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128" alt="Image">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
@ -157,7 +157,7 @@ doc-subtab: modal
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="http://placehold.it/1280x960">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close"></button>
|
||||
|
||||
@ -24,6 +24,9 @@ doc-subtab: nav
|
||||
<li><code>nav-center</code></li>
|
||||
<li><code>nav-right</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
Each nav item needs to be wrapped in a <code>nav-item</code> element.
|
||||
</p>
|
||||
<p>
|
||||
For responsiveness, <strong>2 additional</strong> classes are available:
|
||||
</p>
|
||||
@ -33,41 +36,45 @@ doc-subtab: nav
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{% capture nav_example %}
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="#">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="Bulma logo">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-center">
|
||||
<a class="nav-item" href="#">
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
|
||||
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<!-- This "nav-menu" is hidden on mobile -->
|
||||
<!-- Add the modifier "is-active" to display it on mobile -->
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item" href="#">
|
||||
<a class="nav-item">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<a class="nav-item">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
@ -78,7 +85,7 @@ doc-subtab: nav
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
<a class="button is-primary" href="#">
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
@ -87,63 +94,14 @@ doc-subtab: nav
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example is-paddingless">
|
||||
{{nav_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="#">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="Bulma logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-center">
|
||||
<a class="nav-item" href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item" href="#">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
<span class="nav-item">
|
||||
<a class="button" >
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
<a class="button is-primary" href="#">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{nav_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -156,45 +114,52 @@ doc-subtab: nav
|
||||
<li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
|
||||
<li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
|
||||
</ul>
|
||||
<p>
|
||||
To optimise the space on desktop, but also allow the mobile view to be usable, you can <strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide them with <a href="{{site.url}}/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{% capture nav_tabs_example %}
|
||||
<nav class="nav has-shadow">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-tab is-active">Card</a>
|
||||
<a class="nav-item is-tab">Level</a>
|
||||
<a class="nav-item is-tab">Media object</a>
|
||||
<a class="nav-item is-tab">Menu</a>
|
||||
<a class="nav-item is-tab">Message</a>
|
||||
<a class="nav-item is-tab">Modal</a>
|
||||
<a class="nav-item is-tab">Nav</a>
|
||||
<a class="nav-item is-tab">Pagination</a>
|
||||
<a class="nav-item is-tab">Panel</a>
|
||||
<a class="nav-item is-tab">Tabs</a>
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">About</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">About</a>
|
||||
<a class="nav-item is-tab">
|
||||
<figure class="image is-16x16" style="margin-right: 8px;">
|
||||
<img src="{{site.url}}/images/jgthms.png">
|
||||
</figure>
|
||||
Profile
|
||||
</a>
|
||||
<a class="nav-item is-tab">Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example is-paddingless">
|
||||
{{nav_tabs_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="nav has-shadow">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-tab is-active">Card</a>
|
||||
<a class="nav-item is-tab">Level</a>
|
||||
<a class="nav-item is-tab">Media object</a>
|
||||
<a class="nav-item is-tab">Menu</a>
|
||||
<a class="nav-item is-tab">Message</a>
|
||||
<a class="nav-item is-tab">Modal</a>
|
||||
<a class="nav-item is-tab">Nav</a>
|
||||
<a class="nav-item is-tab">Pagination</a>
|
||||
<a class="nav-item is-tab">Panel</a>
|
||||
<a class="nav-item is-tab">Tabs</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{{nav_tabs_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</section>
|
||||
|
||||
@ -13,63 +13,146 @@ doc-subtab: pagination
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="example">
|
||||
<nav class="pagination">
|
||||
<a class="button">Previous</a>
|
||||
<a class="button">Next page</a>
|
||||
<div class="content">
|
||||
<p>
|
||||
The pagination component consists of several elements:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="button">1</a>
|
||||
<code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
<code>pagination-list</code> which displays page items:
|
||||
<ul>
|
||||
<li>
|
||||
<code>pagination-link</code> for the page numbers
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">45</a>
|
||||
<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>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button is-primary">46</a>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">47</a>
|
||||
<a class="pagination-link">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
<a class="pagination-link is-current">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">86</a>
|
||||
<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 %}
|
||||
<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">
|
||||
<a class="button">Previous</a>
|
||||
<a class="button">Next page</a>
|
||||
<ul>
|
||||
<a class="pagination-previous is-disabled">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="button">1</a>
|
||||
<a class="pagination-link is-current">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
<a class="pagination-link">2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button is-primary">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>...</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button">86</a>
|
||||
<a class="pagination-link">3</a>
|
||||
</li>
|
||||
</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">
|
||||
<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 %}
|
||||
<div class="example">
|
||||
{{pagination_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{pagination_centered_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture pagination_right_example %}
|
||||
<nav class="pagination is-right">
|
||||
<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 %}
|
||||
<div class="example">
|
||||
{{pagination_right_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{pagination_right_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -13,92 +13,88 @@ doc-subtab: panel
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<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
|
||||
</p>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active" href="#">All</a>
|
||||
<a href="#">Public</a>
|
||||
<a href="#">Private</a>
|
||||
<a href="#">Sources</a>
|
||||
<a href="#">Forks</a>
|
||||
</p>
|
||||
<a class="panel-block is-active" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma-website</a>
|
||||
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma</a>
|
||||
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>marksheet</a>
|
||||
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>daniellowtw/infBoard</a>
|
||||
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>jgthms.github.io</a>
|
||||
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>mojs</a>
|
||||
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>grumpy-cat</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 class="column">
|
||||
{% highlight html %}
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">
|
||||
Repositories
|
||||
</p>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active" href="#">All</a>
|
||||
<a href="#">Public</a>
|
||||
<a href="#">Private</a>
|
||||
<a href="#">Sources</a>
|
||||
<a href="#">Forks</a>
|
||||
</p>
|
||||
<a class="panel-block is-active" href="#">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-book"></i>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-small" type="text" placeholder="Search">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
bulma-website
|
||||
</a>
|
||||
<a class="panel-block" href="#">
|
||||
</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" href="#">
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block" href="#">
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-code-fork"></i>
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
daniellowtw/infBoard
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block" href="#">
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
<a class="panel-block" href="#">
|
||||
<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>
|
||||
<a class="panel-block" href="#">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
grumpy-cat
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
Remember me
|
||||
@ -109,8 +105,17 @@ doc-subtab: panel
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
{{panel_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{panel_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -18,7 +18,7 @@ doc-subtab: tabs
|
||||
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{% capture tabs_example %}
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@ -27,29 +27,23 @@ doc-subtab: tabs
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{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">
|
||||
{% capture tabs_centered_example %}
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@ -58,19 +52,15 @@ doc-subtab: tabs
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{tabs_centered_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{% capture tabs_right_example %}
|
||||
<div class="tabs is-right">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@ -79,136 +69,56 @@ doc-subtab: tabs
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-right">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To have several lists aligned differently, use one of <strong>3 modifiers</strong> on the <code>ul</code>:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-left</code></li>
|
||||
<li><code>is-center</code></li>
|
||||
<li><code>is-right</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="tabs">
|
||||
<ul class="is-left">
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
<ul class="is-center">
|
||||
<li><a>Previous</a></li>
|
||||
<li><a>Up</a></li>
|
||||
<li><a>Next</a></li>
|
||||
</ul>
|
||||
<ul class="is-right">
|
||||
<li><a>Search</a></li>
|
||||
</ul>
|
||||
{{tabs_right_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs">
|
||||
<ul class="is-left">
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
<ul class="is-center">
|
||||
<li><a>Previous</a></li>
|
||||
<li><a>Up</a></li>
|
||||
<li><a>Next</a></li>
|
||||
</ul>
|
||||
<ul class="is-right">
|
||||
<li><a>Search</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{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>
|
||||
<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 %}
|
||||
<div class="example">
|
||||
<div class="tabs is-centered">
|
||||
<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>
|
||||
{{tabs_icons_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-centered">
|
||||
<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>
|
||||
{{tabs_icons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -217,8 +127,7 @@ doc-subtab: tabs
|
||||
<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">
|
||||
{% capture tabs_small_example %}
|
||||
<div class="tabs is-small">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@ -227,20 +136,15 @@ doc-subtab: tabs
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_small_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-small">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{tabs_small_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{% capture tabs_medium_example %}
|
||||
<div class="tabs is-medium">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@ -249,39 +153,29 @@ doc-subtab: tabs
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_medium_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-medium">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{tabs_medium_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_large_example %}
|
||||
<div class="tabs is-large">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="tabs is-large">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
{{tabs_large_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-large">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{tabs_large_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -290,74 +184,47 @@ doc-subtab: tabs
|
||||
<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>
|
||||
<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 %}
|
||||
<div class="example">
|
||||
<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>
|
||||
{{tabs_boxed_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<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>
|
||||
{{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">
|
||||
{% capture tabs_toggle_example %}
|
||||
<div class="tabs is-toggle">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
@ -386,43 +253,18 @@ doc-subtab: tabs
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_toggle_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-toggle">
|
||||
<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>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-film"></i></span>
|
||||
Videos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{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">
|
||||
{% capture tabs_fullwidth_example %}
|
||||
<div class="tabs is-fullwidth">
|
||||
<ul>
|
||||
<li>
|
||||
@ -445,30 +287,12 @@ doc-subtab: tabs
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="tabs is-fullwidth">
|
||||
<ul>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-angle-left"></i></span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-angle-up"></i></span>
|
||||
<span>Up</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span>Right</span>
|
||||
<span class="icon"><i class="fa fa-angle-right"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{tabs_fullwidth_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -477,8 +301,7 @@ doc-subtab: tabs
|
||||
<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">
|
||||
{% capture tabs_centered_boxed_example %}
|
||||
<div class="tabs is-centered is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
@ -507,40 +330,15 @@ doc-subtab: tabs
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_centered_boxed_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-centered 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>
|
||||
{{tabs_centered_boxed_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{% capture toggle_fullwidth_example %}
|
||||
<div class="tabs is-toggle is-fullwidth">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
@ -569,40 +367,15 @@ doc-subtab: tabs
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_toggle_fullwidth_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-toggle is-fullwidth">
|
||||
<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>
|
||||
{{tabs_toggle_fullwidth_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
{% capture tabs_centered_boxed_medium_example %}
|
||||
<div class="tabs is-centered is-boxed is-medium">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
@ -631,99 +404,49 @@ doc-subtab: tabs
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{tabs_centered_boxed_medium_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-centered is-boxed is-medium">
|
||||
<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>
|
||||
{{tabs_centered_boxed_medium_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture tabs_toggle_fullwidth_large_example %}
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-image"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-music"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-film"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-file-text-o"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-image"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-music"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-film"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-file-text-o"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{tabs_toggle_fullwidth_large_example}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-image"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-music"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-film"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fa fa-file-text-o"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{tabs_toggle_fullwidth_large_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -31,7 +31,7 @@ doc-subtab: box
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128" alt="Image">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
@ -66,7 +66,7 @@ doc-subtab: box
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128" alt="Image">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
|
||||
@ -15,8 +15,7 @@ doc-subtab: button
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% capture button_example %}
|
||||
<div class="block">
|
||||
<a class="button">Button</a>
|
||||
<a class="button is-white">White</a>
|
||||
@ -32,16 +31,14 @@ doc-subtab: button
|
||||
<a class="button is-warning">Warning</a>
|
||||
<a class="button is-danger">Danger</a>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button">Button</a>
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-info">Info</a>
|
||||
<a class="button is-success">Success</a>
|
||||
<a class="button is-warning">Warning</a>
|
||||
<a class="button is-danger">Danger</a>
|
||||
<a class="button is-link">Link</a>
|
||||
{{button_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -50,19 +47,19 @@ doc-subtab: button
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% capture button_sizes_example %}
|
||||
<a class="button is-small">Small</a>
|
||||
<a class="button">Normal</a>
|
||||
<a class="button is-medium">Medium</a>
|
||||
<a class="button is-large">Large</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button is-small">Small</a>
|
||||
<a class="button">Normal</a>
|
||||
<a class="button is-medium">Medium</a>
|
||||
<a class="button is-large">Large</a>
|
||||
{{button_sizes_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -71,43 +68,62 @@ doc-subtab: button
|
||||
|
||||
<h3 class="title">Styles</h3>
|
||||
<h4 class="subtitle">Outlined</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% capture button_outlined_example %}
|
||||
<a class="button is-outlined">Outlined</a>
|
||||
<a class="button is-primary is-outlined">Outlined</a>
|
||||
<a class="button is-info is-outlined">Outlined</a>
|
||||
<a class="button is-success is-outlined">Outlined</a>
|
||||
<a class="button is-danger is-outlined">Outlined</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_outlined_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button is-outlined">Outlined</a>
|
||||
<a class="button is-primary is-outlined">Outlined</a>
|
||||
<a class="button is-info is-outlined">Outlined</a>
|
||||
<a class="button is-success is-outlined">Outlined</a>
|
||||
<a class="button is-danger is-outlined">Outlined</a>
|
||||
{{button_outlined_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary">
|
||||
{% capture button_inverted_example %}
|
||||
<a class="button is-primary is-inverted">Inverted</a>
|
||||
<a class="button is-info is-inverted">Inverted</a>
|
||||
<a class="button is-success is-inverted">Inverted</a>
|
||||
<a class="button is-danger is-inverted">Inverted</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary">
|
||||
{{button_inverted_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button is-primary is-inverted">Inverted</a>
|
||||
<a class="button is-info is-inverted">Inverted</a>
|
||||
<a class="button is-success is-inverted">Inverted</a>
|
||||
<a class="button is-danger is-inverted">Inverted</a>
|
||||
{{button_inverted_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
|
||||
|
||||
{% capture button_inverted_outlined_example %}
|
||||
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
|
||||
<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
|
||||
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
|
||||
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-primary">
|
||||
{{button_inverted_outlined_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_inverted_outlined_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -115,79 +131,152 @@ doc-subtab: button
|
||||
<hr>
|
||||
|
||||
<h3 class="title">States</h3>
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
{% capture button_normal_example %}
|
||||
<a class="button">Normal</a>
|
||||
<a class="button is-primary">Normal</a>
|
||||
<a class="button is-info">Normal</a>
|
||||
<a class="button is-success">Normal</a>
|
||||
<a class="button is-warning">Normal</a>
|
||||
<a class="button is-danger">Normal</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="button is-loading">Loading</a>
|
||||
<a class="button is-primary is-loading">Loading</a>
|
||||
<a class="button is-info is-loading">Loading</a>
|
||||
<a class="button is-success is-loading">Loading</a>
|
||||
<a class="button is-warning is-loading">Loading</a>
|
||||
<a class="button is-danger is-loading">Loading</a>
|
||||
{{button_normal_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button is-loading">Loading</a>
|
||||
<a class="button is-primary is-loading">Loading</a>
|
||||
<a class="button is-info is-loading">Loading</a>
|
||||
<a class="button is-success is-loading">Loading</a>
|
||||
<a class="button is-warning is-loading">Loading</a>
|
||||
<a class="button is-danger is-loading">Loading</a>
|
||||
{{button_normal_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
{% capture button_hover_example %}
|
||||
<a class="button is-hovered">Hover</a>
|
||||
<a class="button is-primary is-hovered">Hover</a>
|
||||
<a class="button is-info is-hovered">Hover</a>
|
||||
<a class="button is-success is-hovered">Hover</a>
|
||||
<a class="button is-warning is-hovered">Hover</a>
|
||||
<a class="button is-danger is-hovered">Hover</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_hover_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_hover_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
{% capture button_focus_example %}
|
||||
<a class="button is-focused">Focus</a>
|
||||
<a class="button is-primary is-focused">Focus</a>
|
||||
<a class="button is-info is-focused">Focus</a>
|
||||
<a class="button is-success is-focused">Focus</a>
|
||||
<a class="button is-warning is-focused">Focus</a>
|
||||
<a class="button is-danger is-focused">Focus</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_focus_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_focus_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Active</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% capture button_active_example %}
|
||||
<a class="button is-active">Active</a>
|
||||
<a class="button is-primary is-active">Active</a>
|
||||
<a class="button is-info is-active">Active</a>
|
||||
<a class="button is-success is-active">Active</a>
|
||||
<a class="button is-warning is-active">Active</a>
|
||||
<a class="button is-danger is-active">Active</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_active_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button is-active">Active</a>
|
||||
<a class="button is-primary is-active">Active</a>
|
||||
<a class="button is-info is-active">Active</a>
|
||||
<a class="button is-success is-active">Active</a>
|
||||
<a class="button is-warning is-active">Active</a>
|
||||
<a class="button is-danger is-active">Active</a>
|
||||
{{button_active_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
{% capture button_loading_example %}
|
||||
<a class="button is-loading">Loading</a>
|
||||
<a class="button is-primary is-loading">Loading</a>
|
||||
<a class="button is-info is-loading">Loading</a>
|
||||
<a class="button is-success is-loading">Loading</a>
|
||||
<a class="button is-warning is-loading">Loading</a>
|
||||
<a class="button is-danger is-loading">Loading</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_loading_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_loading_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% capture button_disabled_example %}
|
||||
<a class="button is-disabled">Disabled</a>
|
||||
<a class="button is-primary is-disabled">Disabled</a>
|
||||
<a class="button is-info is-disabled">Disabled</a>
|
||||
<a class="button is-success is-disabled">Disabled</a>
|
||||
<a class="button is-warning is-disabled">Disabled</a>
|
||||
<a class="button is-danger is-disabled">Disabled</a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_disabled_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
<a class="button is-disabled">Disabled</a>
|
||||
<a class="button is-primary is-disabled">Disabled</a>
|
||||
<a class="button is-info is-disabled">Disabled</a>
|
||||
<a class="button is-success is-disabled">Disabled</a>
|
||||
<a class="button is-warning is-disabled">Disabled</a>
|
||||
<a class="button is-danger is-disabled">Disabled</a>
|
||||
{{button_disabled_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% capture button_fa_example %}
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-bold"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-italic"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-underline"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
@ -240,39 +329,93 @@ doc-subtab: button
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_fa_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_fa_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
</p>
|
||||
<p>
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{% capture button_only_icon_example %}
|
||||
<p class="control">
|
||||
<a class="button is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="button is-primary">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
<a class="button is-medium">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-large">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
<span>Save</span>
|
||||
</a>
|
||||
<a class="button is-danger">
|
||||
<span>Delete</span>
|
||||
<span class="icon">
|
||||
<i class="fa fa-times"></i>
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button is-danger is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fa fa-times"></i>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-header"></i>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
{{button_only_icon_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{button_only_icon_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -283,7 +426,7 @@ doc-subtab: button
|
||||
<div class="content">
|
||||
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{% capture button_group_example %}
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
@ -301,25 +444,12 @@ doc-subtab: button
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_group_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
Save changes
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
Cancel
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-danger">
|
||||
Delete post
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{{button_group_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -328,7 +458,63 @@ doc-subtab: button
|
||||
<div class="content">
|
||||
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
|
||||
</div>
|
||||
{% capture button_addons_example %}
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-center"></i>
|
||||
</span>
|
||||
<span>Center</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-right"></i>
|
||||
</span>
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{button_addons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Button group with addons</h3>
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
{% capture button_group_addons_example %}
|
||||
<div class="control is-grouped">
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-bold"></i>
|
||||
</span>
|
||||
<span>Bold</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-italic"></i>
|
||||
</span>
|
||||
<span>Italic</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-underline"></i>
|
||||
</span>
|
||||
<span>Underline</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
@ -350,27 +536,12 @@ doc-subtab: button
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{button_group_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="control has-addons">
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-center"></i>
|
||||
</span>
|
||||
<span>Center</span>
|
||||
</a>
|
||||
<a class="button">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-align-right"></i>
|
||||
</span>
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</p>
|
||||
{{button_group_addons_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -19,16 +19,16 @@ doc-subtab: content
|
||||
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
|
||||
<ul>
|
||||
<li><code><p></code> paragraphs</li>
|
||||
<li><code><ul> <ol> <dl></code> lists</li>
|
||||
<li><code><ul></code> <code><ol></code> <code><dl></code> lists</li>
|
||||
<li><code><h1></code> to <code><h6></code> headings</li>
|
||||
<li><code><blockquotes></code> quotes</li>
|
||||
<li><code><em></code> and <code><strong></code></li>
|
||||
<li><code><table> <tr> <th> <td></code> tables</li>
|
||||
<li><code><table></code> <code><tr></code> <code><th></code> <code><td></code> tables</li>
|
||||
</ul>
|
||||
<p>This <code>content</code> class can be used in <em>any</em>, whenever you just want to write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
||||
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{% capture content_example %}
|
||||
<div class="content">
|
||||
<h1>Hello World</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||
@ -58,6 +58,36 @@ doc-subtab: content
|
||||
<h4>Fourth level</h4>
|
||||
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
|
||||
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>One</th>
|
||||
<th>Two</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Three</td>
|
||||
<td>Four</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Five</td>
|
||||
<td>Six</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Seven</td>
|
||||
<td>Eight</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nine</td>
|
||||
<td>Ten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eleven</td>
|
||||
<td>Twelve</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
|
||||
<h5>Fifth level</h5>
|
||||
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
|
||||
@ -65,52 +95,35 @@ doc-subtab: content
|
||||
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example">
|
||||
{{content_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="content">
|
||||
<h1>Hello World</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||
<h2>Second level</h2>
|
||||
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
|
||||
<ul>
|
||||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
<h3>Third level</h3>
|
||||
<p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
|
||||
<ol>
|
||||
<li>Donec blandit a lorem id convallis.</li>
|
||||
<li>Cras gravida arcu at diam gravida gravida.</li>
|
||||
<li>Integer in volutpat libero.</li>
|
||||
<li>Donec a diam tellus.</li>
|
||||
<li>Aenean nec tortor orci.</li>
|
||||
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
||||
<li>Vivamus maximus ultricies pulvinar.</li>
|
||||
</ol>
|
||||
<blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
|
||||
<p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
|
||||
<p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
|
||||
<p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
|
||||
<h4>Fourth level</h4>
|
||||
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
|
||||
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
|
||||
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
|
||||
<h5>Fifth level</h5>
|
||||
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
|
||||
<h6>Sixth level</h6>
|
||||
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
|
||||
</ul>
|
||||
</div>
|
||||
{{content_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
<div class="content">
|
||||
<p>You can use the <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
||||
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="content is-small">
|
||||
<h1>Hello World</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||
<h2>Second level</h2>
|
||||
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
|
||||
<ul>
|
||||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="content is-medium">
|
||||
|
||||
105
docs/documentation/elements/delete.html
Normal file
105
docs/documentation/elements/delete.html
Normal file
@ -0,0 +1,105 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: delete
|
||||
---
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Delete</h1>
|
||||
<h2 class="subtitle">
|
||||
A versatile <strong>delete</strong> cross
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% capture cross_example %}
|
||||
<a class="delete"></a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
On its own, it's a simple circle with a cross:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{cross_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture cross_sizes_example %}
|
||||
<a class="delete is-small"></a>
|
||||
<a class="delete"></a>
|
||||
<a class="delete is-medium"></a>
|
||||
<a class="delete is-large"></a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
It comes in <strong>4 sizes</strong>:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{cross_sizes_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture cross_elements_example %}
|
||||
<div class="block">
|
||||
<span class="tag is-success">
|
||||
Hello World
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="notification is-danger">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
<article class="message is-info">
|
||||
<div class="message-header">
|
||||
Info
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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 %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_elements_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{cross_elements_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@ -30,8 +30,7 @@ doc-subtab: form
|
||||
<p>When combining several controls in a <strong>form</strong>, use the <code>.control</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{% capture form_example %}
|
||||
<label class="label">Name</label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
@ -39,13 +38,17 @@ doc-subtab: form
|
||||
<label class="label">Username</label>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
<span class="help is-success">This username is available</span>
|
||||
</p>
|
||||
<label class="label">Email</label>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-danger" type="text" placeholder="Email input" value="hello@">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-warning"></i>
|
||||
</span>
|
||||
<span class="help is-danger">This email is invalid</span>
|
||||
</p>
|
||||
<label class="label">Subject</label>
|
||||
@ -77,62 +80,23 @@ doc-subtab: form
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary">Submit</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-link">Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{form_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<label class="label">Name</label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
</p>
|
||||
<label class="label">Username</label>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
|
||||
<i class="fa fa-check"></i>
|
||||
<span class="help is-success">This username is available</span>
|
||||
</p>
|
||||
<label class="label">Email</label>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-danger" type="text" placeholder="Email input" value="hello@">
|
||||
<i class="fa fa-warning"></i>
|
||||
<span class="help is-danger">This email is invalid</span>
|
||||
</p>
|
||||
<label class="label">Subject</label>
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
<label class="label">Message</label>
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||||
</p>
|
||||
<p class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Remember me
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
Yes
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-primary">Submit</button>
|
||||
<button class="button is-link">Cancel</button>
|
||||
</p>
|
||||
{{form_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -140,8 +104,7 @@ doc-subtab: form
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Colors</h3>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{% capture colors_example %}
|
||||
<p class="control">
|
||||
<input class="input is-primary" type="text" placeholder="Primary input">
|
||||
</p>
|
||||
@ -157,33 +120,21 @@ doc-subtab: form
|
||||
<p class="control">
|
||||
<input class="input is-danger" type="text" placeholder="Danger input">
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{colors_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<p class="control">
|
||||
<input class="input is-primary" type="text" placeholder="Primary input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-info" type="text" placeholder="Info input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-success" type="text" placeholder="Success input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-warning" type="text" placeholder="Warning input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-danger" type="text" placeholder="Danger input">
|
||||
</p>
|
||||
{{colors_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{% capture sizes_example %}
|
||||
<p class="control">
|
||||
<input class="input is-small" type="text" placeholder="Small input">
|
||||
</p>
|
||||
@ -228,21 +179,15 @@ doc-subtab: form
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<h3 class="title">Sizes</h3>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<p class="control">
|
||||
<input class="input is-small" type="text" placeholder="Small input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Normal input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-medium" type="text" placeholder="Medium input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-large" type="text" placeholder="Large input">
|
||||
</p>
|
||||
{{sizes_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -250,31 +195,88 @@ doc-subtab: form
|
||||
<hr>
|
||||
|
||||
<h3 class="title">States</h3>
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
{% capture normal_example %}
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Normal input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Normal textarea"></textarea>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p class="control is-loading">
|
||||
<input class="input" type="text" placeholder="Loading input">
|
||||
</p>
|
||||
<p class="control is-loading">
|
||||
<textarea class="textarea" placeholder="Loading textarea"></textarea>
|
||||
</p>
|
||||
{{normal_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
{{normal_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
{% capture hover_example %}
|
||||
<p class="control">
|
||||
<input class="input is-hovered" type="text" placeholder="Hovered input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{hover_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
{{hover_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
{% capture focus_example %}
|
||||
<p class="control">
|
||||
<input class="input is-focused" type="text" placeholder="Focused input">
|
||||
</p>
|
||||
<p class="control">
|
||||
<textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{focus_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
{{focus_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
{% capture loading_example %}
|
||||
<p class="control is-loading">
|
||||
<input class="input" type="text" placeholder="Loading input">
|
||||
</p>
|
||||
<p class="control is-loading">
|
||||
<textarea class="textarea" placeholder="Loading textarea"></textarea>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{loading_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
{{loading_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{% capture disabled_example %}
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Disabled input" disabled>
|
||||
</p>
|
||||
@ -297,148 +299,176 @@ doc-subtab: form
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary" disabled>Submit</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" disabled>Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Disabled input" disabled>
|
||||
</p>
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
|
||||
</p>
|
||||
<p class="control">
|
||||
<label class="checkbox is-disabled">
|
||||
<input type="checkbox" disabled>
|
||||
Remember me
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<label class="radio is-disabled">
|
||||
<input type="radio" name="question" disabled>
|
||||
Yes
|
||||
</label>
|
||||
<label class="radio is-disabled">
|
||||
<input type="radio" name="question" disabled>
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-primary" disabled>Submit</button>
|
||||
<button class="button" disabled>Cancel</button>
|
||||
</p>
|
||||
{{disabled_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{% capture icons_example %}
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="password" placeholder="Password">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-lock"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-success">
|
||||
Login
|
||||
</button>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{icons_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="password" placeholder="Password">
|
||||
<i class="fa fa-lock"></i>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-success">
|
||||
Login
|
||||
</button>
|
||||
</p>
|
||||
{{icons_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture icons_sizes_example %}
|
||||
<p class="control has-icon">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p class="control has-icon">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
<p>
|
||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{icons_sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<p class="control has-icon">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<i class="fa fa-check"></i>
|
||||
</p>
|
||||
{{icons_sizes_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture icons_sizes_right_example %}
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<span class="icon">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control has-icon has-icon-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
By appending the <code>has-icon-right</code>, the icon will be placed on the right side instead.
|
||||
</p>
|
||||
</div>
|
||||
{{icons_sizes_right_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
{{icons_sizes_right_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -449,27 +479,25 @@ doc-subtab: form
|
||||
<div class="content">
|
||||
<p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{% capture addons_example %}
|
||||
<p class="control has-addons">
|
||||
<input class="input" type="text" placeholder="Find a repository">
|
||||
<a class="button is-info">
|
||||
Search
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{addons_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="control has-addons">
|
||||
<input class="input" type="text" placeholder="Find a repository">
|
||||
<a class="button is-info">
|
||||
Search
|
||||
</a>
|
||||
</p>
|
||||
{{addons_example}}
|
||||
{% endhighlight %}
|
||||
<div class="content">
|
||||
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaing space (in this case, the input):</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{% capture addons_expanded_example %}
|
||||
<p class="control has-addons">
|
||||
<span class="select">
|
||||
<select>
|
||||
@ -483,26 +511,30 @@ doc-subtab: form
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
<p class="control has-addons">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>$</option>
|
||||
<option>£</option>
|
||||
<option>€</option>
|
||||
</select>
|
||||
</span>
|
||||
<input class="input is-expanded" type="text" placeholder="Amount of money">
|
||||
<a class="button">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{addons_expanded_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="control has-addons">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>$</option>
|
||||
<option>£</option>
|
||||
<option>€</option>
|
||||
</select>
|
||||
</span>
|
||||
<input class="input is-expanded" type="text" placeholder="Amount of money">
|
||||
<a class="button">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
{{addons_expanded_example}}
|
||||
{% endhighlight %}
|
||||
<div class="content">
|
||||
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{% capture addons_center_example %}
|
||||
<p class="control has-addons has-addons-centered">
|
||||
<span class="select">
|
||||
<select>
|
||||
@ -516,23 +548,14 @@ doc-subtab: form
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{addons_center_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="control has-addons has-addons-centered">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>$</option>
|
||||
<option>£</option>
|
||||
<option>€</option>
|
||||
</select>
|
||||
</span>
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
<a class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
{{addons_center_example}}
|
||||
{% endhighlight %}
|
||||
<div class="example">
|
||||
{% capture addons_right_example %}
|
||||
<p class="control has-addons has-addons-right">
|
||||
<span class="select">
|
||||
<select>
|
||||
@ -546,30 +569,25 @@ doc-subtab: form
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{addons_right_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="control has-addons has-addons-right">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>$</option>
|
||||
<option>£</option>
|
||||
<option>€</option>
|
||||
</select>
|
||||
</span>
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
<a class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
{{addons_right_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Form group</h3>
|
||||
<div class="content">
|
||||
<p>If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
|
||||
<p>
|
||||
If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container.
|
||||
<br>
|
||||
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{% capture group_example %}
|
||||
<div class="control is-grouped">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="Find a repository">
|
||||
@ -580,22 +598,13 @@ doc-subtab: form
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{group_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="control is-grouped">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="Find a repository">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-info">
|
||||
Search
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{{group_example}}
|
||||
{% endhighlight %}
|
||||
<div class="content">
|
||||
<p>Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
@ -612,6 +621,7 @@ doc-subtab: form
|
||||
</ul>
|
||||
<p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||
</div>
|
||||
{% capture horizontal_form_example %}
|
||||
<div class="control is-horizontal">
|
||||
<div class="control-label">
|
||||
<label class="label">From</label>
|
||||
@ -645,40 +655,10 @@ doc-subtab: form
|
||||
<textarea class="textarea" placeholder="Explain how we can help you"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{{horizontal_form_example}}
|
||||
{% highlight html %}
|
||||
<div class="control is-horizontal">
|
||||
<div class="control-label">
|
||||
<label class="label">From</label>
|
||||
</div>
|
||||
<div class="control is-grouped">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="Name">
|
||||
</p>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control is-horizontal">
|
||||
<div class="control-label">
|
||||
<label class="label">Subject</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select>
|
||||
<option>General enquiry</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control is-horizontal">
|
||||
<div class="control-label">
|
||||
<label class="label">Question</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Explain how we can help you"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{{horizontal_form_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -16,23 +16,24 @@ doc-subtab: icon
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class:</p>
|
||||
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{% capture icon_example %}
|
||||
<span class="icon">
|
||||
<i class="fa fa-home"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
{{icon_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<span class="icon">
|
||||
<i class="fa fa-home"></i>
|
||||
</span>
|
||||
{{icon_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>24 x 24 pixels</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||||
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
@ -57,25 +58,25 @@ doc-subtab: icon
|
||||
<td><code>icon is-small</code></td>
|
||||
<td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
|
||||
<td>14px</td>
|
||||
<td>16x16px</td>
|
||||
<td>1rem x 1rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>icon</code></td>
|
||||
<td><span class="icon"><i class="fa fa-home"></i></span></td>
|
||||
<td>21px</td>
|
||||
<td>24x24px</td>
|
||||
<td>1.5rem x 1.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>icon is-medium</code></td>
|
||||
<td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
|
||||
<td>28px</td>
|
||||
<td>32x32px</td>
|
||||
<td>2rem x 2rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>icon is-large</code></td>
|
||||
<td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
|
||||
<td>42px</td>
|
||||
<td>48x48px</td>
|
||||
<td>3rem x 3rem</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -21,13 +21,13 @@ doc-subtab: image
|
||||
|
||||
<div class="example">
|
||||
<figure class="image is-128x128">
|
||||
<img src="http://placehold.it/128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="http://placehold.it/128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</figure>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -42,37 +42,37 @@ doc-subtab: image
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>image is-16x16</code></td>
|
||||
<td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td>
|
||||
<td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
|
||||
<td>16x16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-24x24</code></td>
|
||||
<td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td>
|
||||
<td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
|
||||
<td>24x24px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-32x32</code></td>
|
||||
<td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td>
|
||||
<td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
|
||||
<td>32x32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-48x48</code></td>
|
||||
<td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td>
|
||||
<td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
|
||||
<td>48x48px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-64x64</code></td>
|
||||
<td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td>
|
||||
<td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
|
||||
<td>64x64px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-96x96</code></td>
|
||||
<td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td>
|
||||
<td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
|
||||
<td>96x96px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-128x128</code></td>
|
||||
<td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td>
|
||||
<td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
|
||||
<td>128x128px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -86,13 +86,13 @@ doc-subtab: image
|
||||
|
||||
<div class="example">
|
||||
<figure class="image is-128x128">
|
||||
<img src="http://placehold.it/256x256">
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="http://placehold.it/256x256">
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
</figure>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -108,32 +108,32 @@ doc-subtab: image
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>image is-square</code></td>
|
||||
<td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td>
|
||||
<td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
|
||||
<td>Square (or 1by1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by1</code></td>
|
||||
<td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td>
|
||||
<td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
|
||||
<td>1 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by3</code></td>
|
||||
<td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td>
|
||||
<td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
|
||||
<td>4 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by2</code></td>
|
||||
<td><figure class="image is-3by2"><img src="http://placehold.it/480x320"></figure></td>
|
||||
<td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
|
||||
<td>3 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-16by9</code></td>
|
||||
<td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td>
|
||||
<td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
|
||||
<td>16 by 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by1</code></td>
|
||||
<td><figure class="image is-2by1"><img src="http://placehold.it/640x320"></figure></td>
|
||||
<td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
|
||||
<td>2 by 1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -13,210 +13,312 @@ doc-subtab: table
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="example">
|
||||
{% capture table_example %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Open source projects</th>
|
||||
<th>Year started</th>
|
||||
<th colspan="3">Links</th>
|
||||
<th><abbr title="Position">Pos</abbr></th>
|
||||
<th>Team</th>
|
||||
<th><abbr title="Played">Pld</abbr></th>
|
||||
<th><abbr title="Won">W</abbr></th>
|
||||
<th><abbr title="Drawn">D</abbr></th>
|
||||
<th><abbr title="Lost">L</abbr></th>
|
||||
<th><abbr title="Goals for">GF</abbr></th>
|
||||
<th><abbr title="Goals against">GA</abbr></th>
|
||||
<th><abbr title="Goal difference">GD</abbr></th>
|
||||
<th><abbr title="Points">Pts</abbr></th>
|
||||
<th>Qualification or relegation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Open source projects</th>
|
||||
<th>Year started</th>
|
||||
<th colspan="3">Links</th>
|
||||
<th><abbr title="Position">Pos</abbr></th>
|
||||
<th>Team</th>
|
||||
<th><abbr title="Played">Pld</abbr></th>
|
||||
<th><abbr title="Won">W</abbr></th>
|
||||
<th><abbr title="Drawn">D</abbr></th>
|
||||
<th><abbr title="Lost">L</abbr></th>
|
||||
<th><abbr title="Goals for">GF</abbr></th>
|
||||
<th><abbr title="Goals against">GA</abbr></th>
|
||||
<th><abbr title="Goal difference">GD</abbr></th>
|
||||
<th><abbr title="Points">Pts</abbr></th>
|
||||
<th>Qualification or relegation</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-icon">
|
||||
<i class="fa fa-android"></i>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Android</a>
|
||||
</td>
|
||||
<td>
|
||||
2003
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-globe"></i>
|
||||
</a>
|
||||
<th>1</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>23</td>
|
||||
<td>12</td>
|
||||
<td>3</td>
|
||||
<td>68</td>
|
||||
<td>36</td>
|
||||
<td>+32</td>
|
||||
<td>81</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-icon">
|
||||
<i class="fa fa-firefox"></i>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Firefox</a>
|
||||
</td>
|
||||
<td>
|
||||
2003
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-globe"></i>
|
||||
</a>
|
||||
</td>
|
||||
<th>2</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
|
||||
<td>38</td>
|
||||
<td>20</td>
|
||||
<td>11</td>
|
||||
<td>7</td>
|
||||
<td>65</td>
|
||||
<td>36</td>
|
||||
<td>+29</td>
|
||||
<td>71</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-icon">
|
||||
<i class="fa fa-linux"></i>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Linux</a>
|
||||
</td>
|
||||
<td>
|
||||
2003
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-globe"></i>
|
||||
</a>
|
||||
</td>
|
||||
<th>3</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
|
||||
<td>38</td>
|
||||
<td>19</td>
|
||||
<td>13</td>
|
||||
<td>6</td>
|
||||
<td>69</td>
|
||||
<td>35</td>
|
||||
<td>+34</td>
|
||||
<td>70</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-icon">
|
||||
<i class="fa fa-wordpress"></i>
|
||||
<th>4</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
|
||||
<td>38</td>
|
||||
<td>19</td>
|
||||
<td>9</td>
|
||||
<td>10</td>
|
||||
<td>71</td>
|
||||
<td>41</td>
|
||||
<td>+30</td>
|
||||
<td>66</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>5</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
|
||||
<td>38</td>
|
||||
<td>19</td>
|
||||
<td>9</td>
|
||||
<td>10</td>
|
||||
<td>49</td>
|
||||
<td>35</td>
|
||||
<td>+14</td>
|
||||
<td>66</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>6</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
|
||||
<td>38</td>
|
||||
<td>18</td>
|
||||
<td>9</td>
|
||||
<td>11</td>
|
||||
<td>59</td>
|
||||
<td>41</td>
|
||||
<td>+18</td>
|
||||
<td>63</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>7</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
|
||||
<td>38</td>
|
||||
<td>16</td>
|
||||
<td>14</td>
|
||||
<td>8</td>
|
||||
<td>65</td>
|
||||
<td>51</td>
|
||||
<td>+14</td>
|
||||
<td>62</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>8</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
|
||||
<td>38</td>
|
||||
<td>16</td>
|
||||
<td>12</td>
|
||||
<td>10</td>
|
||||
<td>63</td>
|
||||
<td>50</td>
|
||||
<td>+13</td>
|
||||
<td>60</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>9</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
|
||||
<td>38</td>
|
||||
<td>14</td>
|
||||
<td>9</td>
|
||||
<td>15</td>
|
||||
<td>41</td>
|
||||
<td>55</td>
|
||||
<td>−14</td>
|
||||
<td>51</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>10</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
|
||||
<td>38</td>
|
||||
<td>12</td>
|
||||
<td>14</td>
|
||||
<td>12</td>
|
||||
<td>59</td>
|
||||
<td>53</td>
|
||||
<td>+6</td>
|
||||
<td>50</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>11</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
|
||||
<td>38</td>
|
||||
<td>11</td>
|
||||
<td>14</td>
|
||||
<td>13</td>
|
||||
<td>59</td>
|
||||
<td>55</td>
|
||||
<td>+4</td>
|
||||
<td>47</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>12</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
|
||||
<td>38</td>
|
||||
<td>12</td>
|
||||
<td>11</td>
|
||||
<td>15</td>
|
||||
<td>42</td>
|
||||
<td>52</td>
|
||||
<td>−10</td>
|
||||
<td>47</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>13</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
|
||||
<td>38</td>
|
||||
<td>12</td>
|
||||
<td>9</td>
|
||||
<td>17</td>
|
||||
<td>40</td>
|
||||
<td>50</td>
|
||||
<td>−10</td>
|
||||
<td>45</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>14</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
|
||||
<td>38</td>
|
||||
<td>10</td>
|
||||
<td>13</td>
|
||||
<td>15</td>
|
||||
<td>34</td>
|
||||
<td>48</td>
|
||||
<td>−14</td>
|
||||
<td>43</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>15</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
|
||||
<td>38</td>
|
||||
<td>11</td>
|
||||
<td>9</td>
|
||||
<td>18</td>
|
||||
<td>39</td>
|
||||
<td>51</td>
|
||||
<td>−12</td>
|
||||
<td>42</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>16</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
|
||||
<td>38</td>
|
||||
<td>11</td>
|
||||
<td>9</td>
|
||||
<td>18</td>
|
||||
<td>45</td>
|
||||
<td>67</td>
|
||||
<td>−22</td>
|
||||
<td>42</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>17</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
|
||||
<td>38</td>
|
||||
<td>9</td>
|
||||
<td>12</td>
|
||||
<td>17</td>
|
||||
<td>48</td>
|
||||
<td>62</td>
|
||||
<td>−14</td>
|
||||
<td>39</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>18</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">WordPress</a>
|
||||
<td>38</td>
|
||||
<td>9</td>
|
||||
<td>10</td>
|
||||
<td>19</td>
|
||||
<td>44</td>
|
||||
<td>65</td>
|
||||
<td>−21</td>
|
||||
<td>37</td>
|
||||
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>19</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
|
||||
</td>
|
||||
<td>
|
||||
2003
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-globe"></i>
|
||||
</a>
|
||||
<td>38</td>
|
||||
<td>9</td>
|
||||
<td>7</td>
|
||||
<td>22</td>
|
||||
<td>39</td>
|
||||
<td>67</td>
|
||||
<td>−28</td>
|
||||
<td>34</td>
|
||||
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td> </tr>
|
||||
<tr>
|
||||
<th>20</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>3</td>
|
||||
<td>8</td>
|
||||
<td>27</td>
|
||||
<td>27</td>
|
||||
<td>76</td>
|
||||
<td>−49</td>
|
||||
<td>17</td>
|
||||
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example">
|
||||
{{table_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Instrument</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Instrument</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Misty Abbott</td>
|
||||
<td>Bass Guitar</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John Smith</td>
|
||||
<td>Rhythm Guitar</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Robert Mikels</td>
|
||||
<td>Lead Guitar</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Karyn Holmberg</td>
|
||||
<td>Drums</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-icon">
|
||||
<a href="#">
|
||||
<i class="fa fa-instagram"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{table_example}}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
@ -276,6 +378,14 @@ doc-subtab: table
|
||||
<td>Seven</td>
|
||||
<td>Eight</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nine</td>
|
||||
<td>Ten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eleven</td>
|
||||
<td>Twelve</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -309,6 +419,14 @@ doc-subtab: table
|
||||
<td>Seven</td>
|
||||
<td>Eight</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nine</td>
|
||||
<td>Ten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eleven</td>
|
||||
<td>Twelve</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -342,6 +460,14 @@ doc-subtab: table
|
||||
<td>Seven</td>
|
||||
<td>Eight</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nine</td>
|
||||
<td>Ten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eleven</td>
|
||||
<td>Twelve</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ doc-subtab: tag
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
By default, a <strong>tag</strong> is a 24px high label.
|
||||
By default, a <strong>tag</strong> is a 1.5rem high label.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<span class="tag">
|
||||
@ -35,14 +35,29 @@ doc-subtab: tag
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
There are <strong>6 different colors</strong> available.
|
||||
Like with buttons, there are <strong>9 different colors</strong> available.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="control">
|
||||
<span class="tag is-black">
|
||||
Black
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-dark">
|
||||
Dark
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-light">
|
||||
Light
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-white">
|
||||
White
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-primary">
|
||||
Primary
|
||||
@ -69,7 +84,10 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<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>
|
||||
@ -81,14 +99,9 @@ doc-subtab: tag
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
And <strong>3 additional</strong> sizes.
|
||||
And <strong>2 additional</strong> sizes.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="control">
|
||||
<span class="tag is-dark is-small">
|
||||
Small
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-primary is-medium">
|
||||
Medium
|
||||
@ -102,7 +115,6 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-dark is-small">Small</span>
|
||||
<span class="tag is-primary is-medium">Medium</span>
|
||||
<span class="tag is-info is-large">Large</span>
|
||||
{% endhighlight %}
|
||||
@ -114,12 +126,6 @@ doc-subtab: tag
|
||||
You can also append a <strong>delete button</strong>.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="control">
|
||||
<span class="tag is-info is-small">
|
||||
Foo
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
@ -141,10 +147,6 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-info is-small">
|
||||
Foo
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
<button class="delete is-small"></button>
|
||||
|
||||
@ -17,6 +17,7 @@ doc-subtab: columns
|
||||
<li>Add a <code>columns</code> container</li>
|
||||
<li>Add as many <code>column</code> elements as you want</li>
|
||||
</ol>
|
||||
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
|
||||
@ -44,7 +44,7 @@ doc-subtab: tiles
|
||||
<p class="title">Middle tile</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
@ -93,7 +93,7 @@ doc-subtab: tiles
|
||||
<p class="title">Middle tile</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
@ -383,7 +383,7 @@ tile is-ancestor
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
@ -490,7 +490,7 @@ tile is-ancestor
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
@ -583,7 +583,7 @@ tile is-ancestor
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,9 @@ doc-subtab: container
|
||||
<li><code>.footer</code></li>
|
||||
</ul>
|
||||
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
|
||||
<p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
|
||||
<p>On <strong>desktop</strong> (>= 1000px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
|
||||
<p>On <strong>widescreen</strong> (>= 1192px), the container will have a maximum width of <strong>1152px</strong>.</p>
|
||||
<p>The values <strong>960</strong> and <strong>1152</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -51,6 +53,7 @@ doc-subtab: container
|
||||
<p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="container is-fluid">
|
||||
@ -67,4 +70,3 @@ doc-subtab: container
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
|
||||
@ -200,15 +200,15 @@ doc-subtab: responsive-helpers
|
||||
</th>
|
||||
<th>
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>979px</code>
|
||||
Between <code>769px</code> and <code>999px</code>
|
||||
</th>
|
||||
<th>
|
||||
Desktop<br>
|
||||
Between <code>980px</code> and <code>1179px</code>
|
||||
Between <code>1000px</code> and <code>1239px</code>
|
||||
</th>
|
||||
<th>
|
||||
Widescreen<br>
|
||||
Above <code>1180px</code>
|
||||
Above <code>1240px</code>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -17,16 +17,19 @@ doc-subtab: syntax
|
||||
<div class="column">
|
||||
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||
</div>
|
||||
{% capture button_example %}
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
<div class="column">
|
||||
<p>
|
||||
<a class="button">Button</a>
|
||||
{{button_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
{{button_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -34,16 +37,19 @@ doc-subtab: syntax
|
||||
<div class="column">
|
||||
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
|
||||
</div>
|
||||
{% capture button_primary_example %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
<div class="column">
|
||||
<p>
|
||||
<a class="button is-primary">Button</a>
|
||||
{{button_primary_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
{{button_primary_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -124,18 +130,18 @@ doc-subtab: syntax
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<p class="control">
|
||||
<a class="button is-small">Button</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">Button</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-medium">Button</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-large">Button</a>
|
||||
</p>
|
||||
<a class="button is-small">
|
||||
Button
|
||||
</a>
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
27
docs/documentation/overview/functions.html
Normal file
27
docs/documentation/overview/functions.html
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: functions
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Functions</h1>
|
||||
<h2 class="subtitle">Utility functions to calculate colors and other values</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma uses 5 custom functions to help define the values and colors dynamically:</p>
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
|
||||
<li><code>removeUnit($number)</code>: removes the unit of a Sass number. So "10px" becomes "10" and "3.5rem" returns "3.5". Used for string concatenation.</li>
|
||||
<li><code>roundToEvenNumber($number)</code>: rounds a number to the closest but lower even one. So 23 becomes 22, and 7.5 returns 6.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
71
docs/documentation/overview/mixins.html
Normal file
71
docs/documentation/overview/mixins.html
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Mixins</h1>
|
||||
<h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td><code>=arrow($color)</code></td>
|
||||
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=block</code></td>
|
||||
<td>Defines a margin-bottom of 1.5rem, expect when the element is the last child. Used for almost all block elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=clearfix</code></td>
|
||||
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=center($size)</code></td>
|
||||
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=delete</code></td>
|
||||
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=fa($size, $dimensions)</code></td>
|
||||
<td>Sets the style of a Font Awesome icon container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=hamburger($dimensions)</code></td>
|
||||
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=loader</code></td>
|
||||
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overflow-touch</code></td>
|
||||
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overlay($offset: 0)</code></td>
|
||||
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=placeholder</code></td>
|
||||
<td>Sets the styles of an input placeholder.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=unselectable</code></td>
|
||||
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -47,6 +47,7 @@ doc-subtab: modular
|
||||
What if you only want the <strong>button</strong> styles instead?
|
||||
</p>
|
||||
{% highlight sass %}
|
||||
@import "bulma/sass/utilities/_all
|
||||
@import "bulma/sass/elements/button.sass"
|
||||
{% endhighlight %}
|
||||
<p>
|
||||
|
||||
@ -19,8 +19,8 @@ doc-subtab: responsiveness
|
||||
<ul>
|
||||
<li><code>mobile</code>: up to <code>768px</code></li>
|
||||
<li><code>tablet</code>: from <code>769px</code></li>
|
||||
<li><code>desktop</code>: from <code>980px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1180px</code></li>
|
||||
<li><code>desktop</code>: from <code>1000px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1192px</code></li>
|
||||
</ul>
|
||||
<p>Bulma uses 7 responsive mixins:</p>
|
||||
<ul>
|
||||
@ -34,23 +34,23 @@ doc-subtab: responsiveness
|
||||
</li>
|
||||
<li>
|
||||
<code>=tablet-only</code><br>
|
||||
from <code>769px</code> and until <code>979px</code>
|
||||
from <code>769px</code> and until <code>999px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>979px</code>
|
||||
until <code>999px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop</code><br>
|
||||
from <code>980px</code>
|
||||
from <code>1000px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop-only</code><br>
|
||||
from <code>980px</code> and until <code>1179px</code>
|
||||
from <code>1000px</code> and until <code>1191px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen</code><br>
|
||||
from <code>1180px</code>
|
||||
from <code>1192px</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
|
||||
@ -65,15 +65,15 @@ doc-subtab: responsiveness
|
||||
</th>
|
||||
<th>
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>979px</code>
|
||||
Between <code>769px</code> and <code>999px</code>
|
||||
</th>
|
||||
<th>
|
||||
Desktop<br>
|
||||
Between <code>980px</code> and <code>1179px</code>
|
||||
Between <code>1000px</code> and <code>1191px</code>
|
||||
</th>
|
||||
<th>
|
||||
Widescreen<br>
|
||||
<code>1180px</code> and above
|
||||
<code>1192px</code> and above
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -14,7 +14,9 @@ doc-subtab: start
|
||||
<hr>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">1</div>
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use <strong>NPM</strong> <em>(recommended)</em>:
|
||||
@ -26,7 +28,9 @@ npm install bulma
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">2</div>
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
|
||||
@ -37,7 +41,9 @@ npm install bulma
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">3</div>
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Download from the <strong>repository</strong>
|
||||
@ -70,7 +76,9 @@ npm install bulma
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">1</div>
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Download</strong> the source files:
|
||||
@ -83,7 +91,9 @@ npm install bulma
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">2</div>
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Set</strong> your variables:<br>
|
||||
@ -107,7 +117,9 @@ $family-primary: $family-serif // Use the new serif family
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">3</div>
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Import</strong> Bulma <em>after</em> having set your variables:<br>
|
||||
|
||||
@ -20,9 +20,9 @@ doc-subtab: variables
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
|
||||
<li><strong>font families</strong>: <code>$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif</code></li>
|
||||
<li><strong>font sizes</strong>: <code>$size-1: 48px</code></li>
|
||||
<li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li>
|
||||
<li><strong>font families</strong>: <code>$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace</code></li>
|
||||
<li><strong>font sizes</strong>: <code>$size-1: 3.5rem</code></li>
|
||||
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -40,7 +40,7 @@ doc-subtab: variables
|
||||
<li>
|
||||
<strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||
<ul>
|
||||
<li><code>$body-background: $grey-lighter</code>: the page's main background is the lighter grey</li>
|
||||
<li><code>$background: $white-ter</code>: the main background color</li>
|
||||
<li><code>$link: $primary</code>: the links use the primary color</li>
|
||||
<li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
|
||||
</ul>
|
||||
@ -174,23 +174,23 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-1</code></td>
|
||||
<td>48px</td>
|
||||
<td>3.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-2</code></td>
|
||||
<td>40px</td>
|
||||
<td>2.75rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-3</code></td>
|
||||
<td>28px</td>
|
||||
<td>2rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-4</code></td>
|
||||
<td>24px</td>
|
||||
<td>1.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-5</code></td>
|
||||
<td>18px</td>
|
||||
<td>1.25rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-6</code></td>
|
||||
@ -198,24 +198,24 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-7</code></td>
|
||||
<td>11px</td>
|
||||
<td>0.75rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-light</code></td>
|
||||
<td>300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-normal</code></td>
|
||||
<td>400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-semibold</code></td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-bold</code></td>
|
||||
<td>700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-title-normal</code></td>
|
||||
<td>300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$weight-title-bold</code></td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Breakpoints</th></tr>
|
||||
<tr>
|
||||
@ -224,11 +224,11 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$desktop</code></td>
|
||||
<td>980px</td>
|
||||
<td>1000px (960px + 40px container)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$widescreen</code></td>
|
||||
<td>1180px</td>
|
||||
<td>1192px (1152px+ 40px container)</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Miscellaneous</th></tr>
|
||||
@ -268,15 +268,11 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$light</code></td>
|
||||
<td>$grey-lighter</td>
|
||||
<td>$white-ter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$dark</code></td>
|
||||
<td>$grey-dark</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$text</code></td>
|
||||
<td>$grey-dark</td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">3. Generated variables</th></tr>
|
||||
@ -330,6 +326,10 @@ doc-subtab: variables
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Text colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$text</code></td>
|
||||
<td>$grey-dark</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$text-invert</code></td>
|
||||
<td>findColorInvert($text)</td>
|
||||
@ -378,59 +378,25 @@ doc-subtab: variables
|
||||
<td><code>$link-hover</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-hover-background</code></td>
|
||||
<td>$grey-lighter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-hover-border</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-focus</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-focus-border</code></td>
|
||||
<td>$primary</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-active</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$link-active-border</code></td>
|
||||
<td>$grey-darker</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Control colors</th></tr>
|
||||
<tr>
|
||||
<td><code>$control</code></td>
|
||||
<td>$text-strong</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-background</code></td>
|
||||
<td>$text-invert</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-border</code></td>
|
||||
<td>$border</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-hover</code></td>
|
||||
<td>$link-hover</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-hover-border</code></td>
|
||||
<td>$border-hover</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active</code></td>
|
||||
<td>$link</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active-background</code></td>
|
||||
<td>$link</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active-background-invert</code></td>
|
||||
<td>$link-invert</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$control-active-border</code></td>
|
||||
<td>$link</td>
|
||||
<td>$grey-dark</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Typography</th></tr>
|
||||
@ -448,7 +414,7 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-normal</code></td>
|
||||
<td>$size-6</td>
|
||||
<td>1rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-medium</code></td>
|
||||
@ -456,11 +422,7 @@ doc-subtab: variables
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-large</code></td>
|
||||
<td>$size-3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$size-huge</code></td>
|
||||
<td>$size-1</td>
|
||||
<td>$size-4</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">4. Lists and maps</th></tr>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 364 KiB |
BIN
docs/images/bulma-logo.png
Normal file
BIN
docs/images/bulma-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/images/jgthms.png
Normal file
BIN
docs/images/jgthms.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/images/placeholders/1280x960.png
Normal file
BIN
docs/images/placeholders/1280x960.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/images/placeholders/128x128.png
Normal file
BIN
docs/images/placeholders/128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
docs/images/placeholders/16x16.png
Normal file
BIN
docs/images/placeholders/16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/images/placeholders/24x24.png
Normal file
BIN
docs/images/placeholders/24x24.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/images/placeholders/256x256.png
Normal file
BIN
docs/images/placeholders/256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
docs/images/placeholders/300x225.png
Normal file
BIN
docs/images/placeholders/300x225.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
docs/images/placeholders/32x32.png
Normal file
BIN
docs/images/placeholders/32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/images/placeholders/480x320.png
Normal file
BIN
docs/images/placeholders/480x320.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
docs/images/placeholders/480x480.png
Normal file
BIN
docs/images/placeholders/480x480.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/images/placeholders/48x48.png
Normal file
BIN
docs/images/placeholders/48x48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
docs/images/placeholders/640x320.png
Normal file
BIN
docs/images/placeholders/640x320.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/images/placeholders/640x360.png
Normal file
BIN
docs/images/placeholders/640x360.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/images/placeholders/640x480.png
Normal file
BIN
docs/images/placeholders/640x480.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/images/placeholders/64x64.png
Normal file
BIN
docs/images/placeholders/64x64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
docs/images/placeholders/96x96.png
Normal file
BIN
docs/images/placeholders/96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@ -91,7 +91,7 @@ route: index
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/grid/columns">
|
||||
<span class="icon is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-pause"></i>
|
||||
</span>
|
||||
Simple <strong>columns</strong>
|
||||
@ -189,7 +189,7 @@ route: index
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/grid/tiles">
|
||||
<span class="icon is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</span>
|
||||
Magic <strong>tiles</strong>
|
||||
@ -214,7 +214,7 @@ route: index
|
||||
<p class="title">Middle tile</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
@ -281,7 +281,7 @@ route: index
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/components/level/">
|
||||
<span class="icon is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
</span>
|
||||
Flexible <strong>horizontal level</strong>
|
||||
@ -345,7 +345,7 @@ route: index
|
||||
<div class="column">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/components/media-object/">
|
||||
<span class="icon is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-magic"></i>
|
||||
</span>
|
||||
Versatile <strong>media object</strong>
|
||||
@ -359,7 +359,7 @@ route: index
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="http://placehold.it/128x128" alt="Image">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
@ -406,7 +406,7 @@ route: index
|
||||
<div class="container has-text-centered">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/layout/hero/">
|
||||
<span class="icon is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-arrows-v"></i>
|
||||
</span>
|
||||
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
|
||||
@ -433,7 +433,7 @@ route: index
|
||||
<div class="column">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
<span class="icon is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-cogs"></i>
|
||||
</span>
|
||||
Compose your element with <strong>modifier</strong> classes
|
||||
@ -477,7 +477,7 @@ route: index
|
||||
<div class="container">
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.url }}/documentation/elements/box/">
|
||||
<span class="icon is-large">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-asterisk"></i>
|
||||
</span>
|
||||
And all the usual <strong>elements</strong>
|
||||
@ -490,18 +490,18 @@ route: index
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/300x225" alt="">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-32x32">
|
||||
<img src="http://placehold.it/64x64" alt="Image">
|
||||
<figure class="image" style="height: 40px; width: 40px;">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">Card</p>
|
||||
<p class="title is-4">Card</p>
|
||||
<p class="subtitle is-6">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -29,21 +29,21 @@ route: templates
|
||||
<a class="box" href="{{ site.url }}/templates/everything.html">
|
||||
<h3 class="title is-4">Everything</h3>
|
||||
<h4 class="subtitle is-5">All Bulma elements on one page</h4>
|
||||
<figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
|
||||
<figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a class="box" href="{{ site.url }}/templates/business.html">
|
||||
<h3 class="title is-4">Business</h3>
|
||||
<h4 class="subtitle is-5">Classic business homepage</h4>
|
||||
<figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
|
||||
<figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a class="box" href="{{ site.url }}/templates/welcome.html">
|
||||
<h3 class="title is-4">Welcome</h3>
|
||||
<h4 class="subtitle is-5">Simple one-page introduction</h4>
|
||||
<figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
|
||||
<figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -275,7 +275,7 @@ tile is-ancestor
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
@ -382,7 +382,7 @@ tile is-ancestor
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
@ -475,7 +475,7 @@ tile is-ancestor
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://placehold.it/640x480">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "bulma",
|
||||
"version": "0.2.3",
|
||||
"version": "0.3.0",
|
||||
"homepage": "http://bulma.io",
|
||||
"author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)",
|
||||
"description": "Modern CSS framework based on Flexbox",
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
$body-background: $white-ter !default
|
||||
$body-background: $white !default
|
||||
$body-size: $size-6 !default
|
||||
|
||||
html
|
||||
background-color: $body-background
|
||||
font-size: $size-normal
|
||||
font-size: $body-size
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
min-width: 300px
|
||||
@ -31,13 +32,12 @@ pre
|
||||
-moz-osx-font-smoothing: auto
|
||||
-webkit-font-smoothing: auto
|
||||
font-family: $family-code
|
||||
line-height: 1.25
|
||||
|
||||
body
|
||||
color: $text
|
||||
font-size: 1rem
|
||||
font-weight: $weight-normal
|
||||
line-height: 1.428571428571429
|
||||
line-height: 1.5
|
||||
|
||||
// Inline
|
||||
|
||||
@ -52,16 +52,16 @@ a
|
||||
code
|
||||
background-color: $code-background
|
||||
color: $code
|
||||
font-size: 12px
|
||||
font-size: 0.8em
|
||||
font-weight: normal
|
||||
padding: 1px 2px 2px
|
||||
padding: 0.25em 0.5em 0.25em
|
||||
|
||||
hr
|
||||
background-color: $border
|
||||
border: none
|
||||
display: block
|
||||
height: 1px
|
||||
margin: 20px 0
|
||||
margin: 1.5rem 0
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
@ -71,7 +71,7 @@ input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: $size-small
|
||||
font-size: 0.8em
|
||||
|
||||
span
|
||||
font-style: inherit
|
||||
@ -86,14 +86,16 @@ strong
|
||||
pre
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
font-size: 0.8em
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
code
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
background: none
|
||||
color: inherit
|
||||
display: block
|
||||
font-size: 1em
|
||||
overflow-x: auto
|
||||
padding: 16px 20px
|
||||
padding: 1.25rem 1.5rem
|
||||
|
||||
table
|
||||
width: 100%
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "card.sass"
|
||||
@import "highlight.sass"
|
||||
@import "level.sass"
|
||||
@import "media.sass"
|
||||
@import "menu.sass"
|
||||
|
||||
@ -2,31 +2,30 @@
|
||||
align-items: stretch
|
||||
box-shadow: 0 1px 2px rgba($black, 0.1)
|
||||
display: flex
|
||||
min-height: 40px
|
||||
|
||||
.card-header-title
|
||||
align-items: flex-start
|
||||
align-items: center
|
||||
color: $text-strong
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
font-weight: bold
|
||||
padding: 10px
|
||||
font-weight: $weight-bold
|
||||
padding: 0.75rem
|
||||
|
||||
.card-header-icon
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: 40px
|
||||
padding: 0.75rem
|
||||
|
||||
.card-image
|
||||
display: block
|
||||
position: relative
|
||||
|
||||
.card-content
|
||||
padding: 20px
|
||||
padding: 1.5rem
|
||||
.title + .subtitle
|
||||
margin-top: -20px
|
||||
margin-top: -1.5rem
|
||||
|
||||
.card-footer
|
||||
border-top: 1px solid $border
|
||||
@ -36,9 +35,11 @@
|
||||
.card-footer-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
padding: 10px
|
||||
padding: 0.75rem
|
||||
&:not(:last-child)
|
||||
border-right: 1px solid $border
|
||||
|
||||
@ -48,11 +49,5 @@
|
||||
color: $text
|
||||
max-width: 100%
|
||||
position: relative
|
||||
width: 300px
|
||||
.media:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
&.is-rounded
|
||||
border-radius: $radius-large
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
@ -1,36 +1,46 @@
|
||||
.level-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
.title,
|
||||
.subtitle
|
||||
margin-bottom: 0
|
||||
// Responsiveness
|
||||
+mobile
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
.level-left,
|
||||
.level-right
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
.level-item
|
||||
&:not(:last-child)
|
||||
margin-right: 10px
|
||||
margin-right: 0.75rem
|
||||
// Modifiers
|
||||
&.is-flexible
|
||||
flex-grow: 1
|
||||
|
||||
.level-left
|
||||
align-items: center
|
||||
justify-content: flex-start
|
||||
// Responsiveness
|
||||
+mobile
|
||||
& + .level-right
|
||||
margin-top: 20px
|
||||
margin-top: 1.5rem
|
||||
+tablet
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
.level-right
|
||||
align-items: center
|
||||
justify-content: flex-end
|
||||
// Responsiveness
|
||||
+tablet
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
|
||||
.level
|
||||
+block
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
.media-number,
|
||||
.media-left,
|
||||
.media-right
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.media-number
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
display: inline-block
|
||||
font-size: $size-medium
|
||||
height: 32px
|
||||
line-height: 24px
|
||||
margin-right: 10px
|
||||
min-width: 32px
|
||||
padding: 4px 8px
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
|
||||
.media-left
|
||||
margin-right: 10px
|
||||
margin-right: 1rem
|
||||
|
||||
.media-right
|
||||
margin-left: 10px
|
||||
margin-left: 1rem
|
||||
|
||||
.media-content
|
||||
flex-basis: auto
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
text-align: left
|
||||
@ -33,29 +21,24 @@
|
||||
display: flex
|
||||
text-align: left
|
||||
.content:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 0.75rem
|
||||
.media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
display: flex
|
||||
padding-top: 10px
|
||||
padding-top: 0.75rem
|
||||
.content:not(:last-child),
|
||||
.control:not(:last-child)
|
||||
margin-bottom: 5px
|
||||
margin-bottom: 0.5rem
|
||||
.media
|
||||
padding-top: 5px
|
||||
padding-top: 0.5rem
|
||||
& + .media
|
||||
margin-top: 5px
|
||||
margin-top: 0.5rem
|
||||
& + .media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
margin-top: 10px
|
||||
padding-top: 10px
|
||||
margin-top: 1rem
|
||||
padding-top: 1rem
|
||||
// Sizes
|
||||
&.is-large
|
||||
& + .media
|
||||
margin-top: 20px
|
||||
padding-top: 20px
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&.is-large
|
||||
.media-number
|
||||
margin-right: 20px
|
||||
margin-top: 1.5rem
|
||||
padding-top: 1.5rem
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
.menu-nav
|
||||
a
|
||||
display: block
|
||||
padding: 5px 10px
|
||||
.menu
|
||||
font-size: $size-normal
|
||||
|
||||
.menu-list
|
||||
line-height: 1.25
|
||||
a
|
||||
border-radius: $radius-small
|
||||
color: $text
|
||||
display: block
|
||||
padding: 5px 10px
|
||||
padding: 0.5em 0.75em
|
||||
&:hover
|
||||
background-color: $background
|
||||
color: $link
|
||||
@ -19,14 +18,15 @@
|
||||
li
|
||||
ul
|
||||
border-left: 1px solid $border
|
||||
margin: 10px
|
||||
padding-left: 10px
|
||||
margin: 0.75em
|
||||
padding-left: 0.75em
|
||||
|
||||
.menu-label
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
font-size: 0.8em
|
||||
letter-spacing: 0.1em
|
||||
text-transform: uppercase
|
||||
&:not(:first-child)
|
||||
margin-top: 20px
|
||||
margin-top: 1em
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
|
||||
@ -1,39 +1,61 @@
|
||||
.message-body
|
||||
border: 1px solid $border
|
||||
border-radius: $radius
|
||||
padding: 12px 15px
|
||||
strong
|
||||
color: inherit
|
||||
|
||||
.message-header
|
||||
background-color: $text
|
||||
border-radius: $radius $radius 0 0
|
||||
color: $text-invert
|
||||
padding: 7px 10px
|
||||
strong
|
||||
color: inherit
|
||||
& + .message-body
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
|
||||
.message
|
||||
+block
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
font-size: $size-normal
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$lightning: max((100% - lightness($color)) - 4%, 0%)
|
||||
$darkness: max(lightness($color) - 10%, lightness($color))
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
$color-luminance: colorLuminance($color)
|
||||
$darken-percentage: $color-luminance * 70%
|
||||
$desaturate-percentage: $color-luminance * 30%
|
||||
&.is-#{$name}
|
||||
background-color: lighten($color, $lightning)
|
||||
background-color: lighten($color, $color-lightning)
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
@if (colorLuminance($color) > 0.8)
|
||||
color: desaturate(lighten(darken($color, 100%), 40%), 40%)
|
||||
@else
|
||||
color: desaturate(lighten(darken($color, 100%), 50%), 30%)
|
||||
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
||||
|
||||
.message-header
|
||||
align-items: center
|
||||
background-color: $text
|
||||
border-radius: $radius $radius 0 0
|
||||
color: $text-invert
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
line-height: 1.25
|
||||
padding: 0.5em 0.75em
|
||||
position: relative
|
||||
a,
|
||||
strong
|
||||
color: inherit
|
||||
a
|
||||
text-decoration: underline
|
||||
.delete
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin-left: 0.75em
|
||||
& + .message-body
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
border-top: none
|
||||
|
||||
.message-body
|
||||
border: 1px solid $border
|
||||
border-radius: $radius
|
||||
color: $text
|
||||
padding: 1em 1.25em
|
||||
a,
|
||||
strong
|
||||
color: inherit
|
||||
a
|
||||
text-decoration: underline
|
||||
code,
|
||||
pre
|
||||
background: $white
|
||||
pre code
|
||||
background: transparent
|
||||
|
||||
@ -61,6 +61,7 @@
|
||||
margin-right: 10px
|
||||
|
||||
.modal-card-body
|
||||
+overflow-touch
|
||||
background-color: $white
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
$nav-height: 50px !default
|
||||
$nav-height: 3.5rem !default
|
||||
|
||||
// Components
|
||||
|
||||
@ -13,20 +13,21 @@ $nav-height: 50px !default
|
||||
display: flex
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
font-size: $size-normal
|
||||
justify-content: center
|
||||
padding: 10px
|
||||
padding: 0.5rem 0.75rem
|
||||
a
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
img
|
||||
max-height: 24px
|
||||
max-height: 1.75rem
|
||||
.button + .button
|
||||
margin-left: 10px
|
||||
margin-left: 0.75rem
|
||||
.tag
|
||||
&:first-child
|
||||
margin-right: 5px
|
||||
&:last-child
|
||||
margin-left: 5px
|
||||
&:first-child:not(:last-child)
|
||||
margin-right: 0.5rem
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.5rem
|
||||
// Responsiveness
|
||||
+mobile
|
||||
justify-content: flex-start
|
||||
@ -42,15 +43,21 @@ a.nav-item
|
||||
&.is-tab
|
||||
border-bottom: 1px solid transparent
|
||||
border-top: 1px solid transparent
|
||||
padding-left: 12px
|
||||
padding-right: 12px
|
||||
padding-bottom: calc(0.5rem - 1px)
|
||||
padding-left: 1rem
|
||||
padding-right: 1rem
|
||||
padding-top: calc(0.5rem - 1px)
|
||||
&:hover
|
||||
border-bottom: 1px solid $link
|
||||
border-top: 1px solid transparent
|
||||
border-bottom-color: $primary
|
||||
border-top-color: transparent
|
||||
&.is-active
|
||||
border-bottom: 3px solid $link
|
||||
border-top: 3px solid transparent
|
||||
color: $link
|
||||
border-bottom: 3px solid $primary
|
||||
color: $primary
|
||||
padding-bottom: calc(0.5rem - 3px)
|
||||
// Responsiveness
|
||||
+desktop
|
||||
&.is-brand
|
||||
padding-left: 0
|
||||
|
||||
// Containers
|
||||
|
||||
@ -66,18 +73,22 @@ a.nav-item
|
||||
position: absolute
|
||||
.nav-item
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
padding: 10px
|
||||
padding: 0.75rem
|
||||
&.is-active
|
||||
display: block
|
||||
+tablet-only
|
||||
padding-right: 20px
|
||||
padding-right: 1.5rem
|
||||
|
||||
.nav-left
|
||||
|
||||
.nav-left,
|
||||
.nav-right
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
|
||||
.nav-left
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
@ -86,19 +97,17 @@ a.nav-item
|
||||
.nav-center
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
.nav-right
|
||||
justify-content: flex-end
|
||||
// Responsiveness
|
||||
+tablet
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: flex-end
|
||||
|
||||
// Main container
|
||||
|
||||
@ -115,26 +124,6 @@ a.nav-item
|
||||
display: flex
|
||||
min-height: $nav-height
|
||||
width: 100%
|
||||
& > .nav-left
|
||||
& > .nav-item:first-child:not(.is-tab)
|
||||
padding-left: 0
|
||||
& > .nav-right
|
||||
& > .nav-item:last-child:not(.is-tab)
|
||||
padding-right: 0
|
||||
.container > &
|
||||
& > .nav-left
|
||||
& > .nav-item:first-child:not(.is-tab)
|
||||
padding-left: 0
|
||||
& > .nav-right
|
||||
& > .nav-item:last-child:not(.is-tab)
|
||||
padding-right: 0
|
||||
// Modifiers
|
||||
&.has-shadow
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1)
|
||||
// Responsiveness
|
||||
+touch
|
||||
& > .container,
|
||||
.container > &
|
||||
& > .nav-left
|
||||
& > .nav-item.is-brand:first-child
|
||||
padding-left: 20px
|
||||
|
||||
@ -1,37 +1,133 @@
|
||||
.pagination
|
||||
$pagination: $grey-darker !default
|
||||
$pagination-background: $white !default
|
||||
$pagination-border: $grey-lighter !default
|
||||
|
||||
$pagination-hover: $link-hover !default
|
||||
$pagination-hover-border: $link-hover-border !default
|
||||
|
||||
$pagination-focus: $link-focus !default
|
||||
$pagination-focus-border: $link-focus-border !default
|
||||
|
||||
$pagination-active: $link-active !default
|
||||
$pagination-active-border: $link-active-border !default
|
||||
|
||||
$pagination-disabled: $grey !default
|
||||
$pagination-disabled-background: $grey-lighter !default
|
||||
$pagination-disabled-border: $grey-lighter !default
|
||||
|
||||
$pagination-current: $link-invert !default
|
||||
$pagination-current-background: $link !default
|
||||
$pagination-current-border: $link !default
|
||||
|
||||
$pagination-ellipsis: $grey-light !default
|
||||
|
||||
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
||||
|
||||
.pagination,
|
||||
.pagination-list
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
a
|
||||
display: block
|
||||
min-width: 32px
|
||||
padding: 3px 8px
|
||||
span
|
||||
color: $text-light
|
||||
display: block
|
||||
margin: 0 4px
|
||||
li
|
||||
margin: 0 2px
|
||||
ul
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis
|
||||
+control
|
||||
+unselectable
|
||||
font-size: 0.875rem
|
||||
padding-left: 0.5em
|
||||
padding-right: 0.5em
|
||||
justify-content: center
|
||||
// Responsiveness
|
||||
+mobile
|
||||
flex-wrap: wrap
|
||||
& > a
|
||||
width: calc(50% - 5px)
|
||||
text-align: center
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link
|
||||
border: 1px solid $pagination-border
|
||||
min-width: 2.5em
|
||||
&:hover
|
||||
border-color: $pagination-hover-border
|
||||
color: $pagination-hover
|
||||
&:focus
|
||||
border-color: $pagination-focus-border
|
||||
&:active
|
||||
box-shadow: $pagination-shadow-inset
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background: $pagination-disabled-background
|
||||
color: $pagination-disabled
|
||||
opacity: 0.5
|
||||
pointer-events: none
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
|
||||
.pagination-link
|
||||
&.is-current
|
||||
background-color: $pagination-current-background
|
||||
border-color: $pagination-current-border
|
||||
color: $pagination-current
|
||||
|
||||
.pagination-ellipsis
|
||||
color: $pagination-ellipsis
|
||||
pointer-events: none
|
||||
|
||||
.pagination-list
|
||||
li
|
||||
&:not(:first-child)
|
||||
margin-left: 10px
|
||||
margin-left: 0.375rem
|
||||
|
||||
+mobile
|
||||
.pagination
|
||||
flex-wrap: wrap
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
width: calc(50% - 0.375rem)
|
||||
.pagination-next
|
||||
margin-left: 0.75rem
|
||||
.pagination-list
|
||||
margin-top: 0.75rem
|
||||
li
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
ul
|
||||
margin-top: 10px
|
||||
flex-shrink: 1
|
||||
|
||||
+tablet
|
||||
& > a
|
||||
&:not(:first-child)
|
||||
.pagination-list
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
justify-content: flex-start
|
||||
order: 1
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
margin-left: 0.75rem
|
||||
.pagination-previous
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
.pagination
|
||||
justify-content: space-between
|
||||
&.is-centered
|
||||
.pagination-previous
|
||||
margin-left: 0
|
||||
order: 1
|
||||
.pagination-list
|
||||
justify-content: center
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
&.is-right
|
||||
.pagination-previous
|
||||
margin-left: 0
|
||||
order: 1
|
||||
.pagination-next
|
||||
order: 2
|
||||
margin-right: 0.75rem
|
||||
.pagination-list
|
||||
justify-content: flex-end
|
||||
order: 3
|
||||
|
||||
@ -1,20 +1,39 @@
|
||||
.panel-icon
|
||||
+fa(14px, 16px)
|
||||
color: $text-light
|
||||
float: left
|
||||
margin: 0 4px 0 -2px
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
.panel
|
||||
font-size: $size-normal
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.panel-heading,
|
||||
.panel-tabs,
|
||||
.panel-block
|
||||
border-bottom: 1px solid $border
|
||||
border-left: 1px solid $border
|
||||
border-right: 1px solid $border
|
||||
&:first-child
|
||||
border-top: 1px solid $border
|
||||
|
||||
.panel-heading
|
||||
background-color: $background
|
||||
border-bottom: 1px solid $border
|
||||
border-radius: 4px 4px 0 0
|
||||
border-radius: $radius $radius 0 0
|
||||
color: $text-strong
|
||||
font-size: $size-medium
|
||||
font-weight: 300
|
||||
padding: 10px
|
||||
font-size: 1.25em
|
||||
font-weight: $weight-light
|
||||
line-height: 1.25
|
||||
padding: 0.5em 0.75em
|
||||
|
||||
.panel-tabs
|
||||
align-items: flex-end
|
||||
display: flex
|
||||
font-size: 0.875em
|
||||
justify-content: center
|
||||
a
|
||||
border-bottom: 1px solid $border
|
||||
margin-bottom: -1px
|
||||
padding: 0.5em
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom-color: $link-active-border
|
||||
color: $link-active
|
||||
|
||||
.panel-list
|
||||
a
|
||||
@ -22,36 +41,34 @@
|
||||
&:hover
|
||||
color: $link
|
||||
|
||||
.panel-tabs
|
||||
display: flex
|
||||
font-size: $size-small
|
||||
padding: 5px 10px 0
|
||||
justify-content: center
|
||||
a
|
||||
border-bottom: 1px solid $border
|
||||
margin-bottom: -1px
|
||||
padding: 5px
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom-color: $link-active-border
|
||||
color: $link-active
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
|
||||
.panel-block
|
||||
align-items: center
|
||||
color: $text-strong
|
||||
display: block
|
||||
line-height: 16px
|
||||
padding: 10px
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
padding: 0.5em 0.75em
|
||||
input[type="checkbox"]
|
||||
margin-right: 0.75em
|
||||
& > .control
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
width: 100%
|
||||
&.is-active
|
||||
border-left-color: $link
|
||||
color: $link-active
|
||||
.panel-icon
|
||||
color: $link
|
||||
|
||||
a.panel-block
|
||||
a.panel-block,
|
||||
label.panel-block
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background-color: $background
|
||||
|
||||
.panel
|
||||
border: 1px solid $border
|
||||
border-radius: $radius-large
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
.panel-icon
|
||||
+fa(14px, 1em)
|
||||
color: $text-light
|
||||
margin-right: 0.75em
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
+unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
font-size: $size-normal
|
||||
justify-content: space-between
|
||||
line-height: 24px
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
@ -15,7 +15,7 @@
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: -1px
|
||||
padding: 6px 12px
|
||||
padding: 0.5em 1em
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-bottom-color: $text-strong
|
||||
@ -24,8 +24,8 @@
|
||||
display: block
|
||||
&.is-active
|
||||
a
|
||||
border-bottom-color: $link
|
||||
color: $link
|
||||
border-bottom-color: $primary
|
||||
color: $primary
|
||||
ul
|
||||
align-items: center
|
||||
border-bottom: 1px solid $border
|
||||
@ -34,20 +34,20 @@
|
||||
flex-shrink: 0
|
||||
justify-content: flex-start
|
||||
&.is-left
|
||||
padding-right: 10px
|
||||
padding-right: 0.75em
|
||||
&.is-center
|
||||
flex: none
|
||||
justify-content: center
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
padding-left: 10px
|
||||
padding-left: 0.75em
|
||||
.icon
|
||||
&:first-child
|
||||
margin-right: 8px
|
||||
margin-right: 0.5em
|
||||
&:last-child
|
||||
margin-left: 8px
|
||||
margin-left: 0.5em
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ul
|
||||
@ -60,8 +60,6 @@
|
||||
a
|
||||
border: 1px solid transparent
|
||||
border-radius: $radius $radius 0 0
|
||||
padding-bottom: 5px
|
||||
padding-top: 5px
|
||||
&:hover
|
||||
background-color: $background
|
||||
border-bottom-color: $border
|
||||
@ -79,8 +77,6 @@
|
||||
a
|
||||
border: 1px solid $border
|
||||
margin-bottom: 0
|
||||
padding-bottom: 5px
|
||||
padding-top: 5px
|
||||
position: relative
|
||||
&:hover
|
||||
background-color: $background
|
||||
@ -104,28 +100,7 @@
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
a
|
||||
padding: 2px 8px
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
padding-bottom: 1px
|
||||
padding-top: 1px
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
a
|
||||
padding: 10px 16px
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
padding-bottom: 9px
|
||||
padding-top: 9px
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
a
|
||||
padding: 14px 20px
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
padding-bottom: 13px
|
||||
padding-top: 13px
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
@import "button.sass"
|
||||
@import "content.sass"
|
||||
@import "form.sass"
|
||||
@import "icon.sass"
|
||||
@import "image.sass"
|
||||
@import "notification.sass"
|
||||
@import "progress.sass"
|
||||
@import "table.sass"
|
||||
@import "tag.sass"
|
||||
@import "title.sass"
|
||||
|
||||
@import "other.sass"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
display: block
|
||||
padding: 20px
|
||||
padding: 1.25rem
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
|
||||
@ -1,64 +1,149 @@
|
||||
$button: $grey-darker !default
|
||||
$button-background: $white !default
|
||||
$button-border: $grey-lighter !default
|
||||
|
||||
$button-hover: $link-hover !default
|
||||
$button-hover-border: $link-hover-border !default
|
||||
|
||||
$button-focus: $link-focus !default
|
||||
$button-focus-border: $link-focus-border !default
|
||||
|
||||
$button-active: $link-active !default
|
||||
$button-active-border: $link-active-border !default
|
||||
|
||||
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
||||
|
||||
@function buttonIconSpacing($button-font-size, $icon-width)
|
||||
// The rem height of the button
|
||||
// based on a height of 2.5em
|
||||
$button-height: 2.5 * $button-font-size // rem
|
||||
// The rem total horizontal padding of the button
|
||||
$button-horizontal-padding: 2 * 0.75 * $button-font-size // rem
|
||||
// For the icon center to align with the button center
|
||||
// the horizontal padding + the icon width must equal the button height
|
||||
// $button-height = $button-horizontal-padding + $icon-width + $difference
|
||||
$difference: $button-height - $button-horizontal-padding - $icon-width
|
||||
@return $difference / 2
|
||||
|
||||
=button-icon($button-font-size)
|
||||
$small-offset: buttonIconSpacing($button-font-size, 1rem)
|
||||
$normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
|
||||
$medium-offset: buttonIconSpacing($button-font-size, 2rem)
|
||||
$large-offset: buttonIconSpacing($button-font-size, 3rem)
|
||||
.icon
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: $normal-offset
|
||||
margin-right: $button-font-size / 2
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: $button-font-size / 2
|
||||
margin-right: $normal-offset
|
||||
&:first-child:last-child
|
||||
// The -1px is to account for the button 1px border
|
||||
margin-left: calc(-1px + #{$normal-offset})
|
||||
margin-right: calc(-1px + #{$normal-offset})
|
||||
&.is-small
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: $small-offset
|
||||
&:last-child:not(:first-child)
|
||||
margin-right: $small-offset
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-1px + #{$small-offset})
|
||||
margin-right: calc(-1px + #{$small-offset})
|
||||
&.is-medium
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: $medium-offset
|
||||
&:last-child:not(:first-child)
|
||||
margin-right: $medium-offset
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-1px + #{$medium-offset})
|
||||
margin-right: calc(-1px + #{$medium-offset})
|
||||
&.is-large
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: $large-offset
|
||||
&:last-child:not(:first-child)
|
||||
margin-right: $large-offset
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-1px + #{$large-offset})
|
||||
margin-right: calc(-1px + #{$large-offset})
|
||||
|
||||
// The button sizes use mixins so they can be used at different breakpoints
|
||||
=button-small
|
||||
border-radius: $radius-small
|
||||
font-size: 11px
|
||||
height: 24px
|
||||
line-height: 16px
|
||||
padding-left: 6px
|
||||
padding-right: 6px
|
||||
font-size: $size-small
|
||||
+button-icon($size-small)
|
||||
=button-medium
|
||||
font-size: 18px
|
||||
height: 40px
|
||||
padding-left: 14px
|
||||
padding-right: 14px
|
||||
font-size: $size-medium
|
||||
+button-icon($size-medium)
|
||||
=button-large
|
||||
font-size: 22px
|
||||
height: 48px
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
font-size: $size-large
|
||||
+button-icon($size-large)
|
||||
|
||||
.button
|
||||
+control
|
||||
+unselectable
|
||||
background-color: $button-background
|
||||
border: 1px solid $button-border
|
||||
color: $button
|
||||
cursor: pointer
|
||||
justify-content: center
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
strong
|
||||
color: inherit
|
||||
small
|
||||
display: block
|
||||
font-size: $size-small
|
||||
line-height: 1
|
||||
margin-top: 5px
|
||||
.icon,
|
||||
.tag
|
||||
&:first-child
|
||||
margin-left: -2px
|
||||
margin-right: 4px
|
||||
&:last-child
|
||||
margin-left: 4px
|
||||
margin-right: -2px
|
||||
+button-icon($size-normal)
|
||||
// States
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $button-hover-border
|
||||
color: $button-hover
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: $button-focus-border
|
||||
box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
|
||||
color: $button-focus
|
||||
&:active,
|
||||
&.is-active
|
||||
color: $control-hover
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.2)
|
||||
border-color: $button-active-border
|
||||
box-shadow: $button-shadow-inset
|
||||
color: $button-active
|
||||
// Colors
|
||||
&.is-link
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $text
|
||||
text-decoration: underline
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: $background
|
||||
color: $text-strong
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-width: 0
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: darken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: transparent
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
||||
color: $color-invert
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
border-color: transparent
|
||||
box-shadow: $button-shadow-inset
|
||||
color: $color-invert
|
||||
&.is-inverted
|
||||
background-color: $color-invert
|
||||
@ -71,22 +156,20 @@
|
||||
&.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
border-width: 1px
|
||||
color: $color
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-link
|
||||
&.is-inverted.is-outlined
|
||||
background-color: transparent
|
||||
border-width: 0
|
||||
color: $text
|
||||
text-decoration: underline
|
||||
border-color: $color-invert
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $background
|
||||
color: $text-strong
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
|
||||
@ -2,19 +2,14 @@
|
||||
+block
|
||||
color: $text
|
||||
// Inline
|
||||
a:not(.button)
|
||||
border-bottom: 1px solid $border
|
||||
&:visited
|
||||
color: $link-visited
|
||||
&:hover
|
||||
border-bottom-color: $link
|
||||
li + li
|
||||
margin-top: 0.25em
|
||||
// Block
|
||||
blockquote,
|
||||
p,
|
||||
ol,
|
||||
ul
|
||||
ul,
|
||||
blockquote,
|
||||
table
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
h1,
|
||||
@ -24,30 +19,36 @@
|
||||
h5,
|
||||
h6
|
||||
color: $text-strong
|
||||
font-weight: 300
|
||||
font-weight: $weight-normal
|
||||
line-height: 1.125
|
||||
margin-bottom: 20px
|
||||
h1,
|
||||
h2,
|
||||
h3
|
||||
h1
|
||||
font-size: 2em
|
||||
margin-bottom: 0.5em
|
||||
&:not(:first-child)
|
||||
margin-top: 40px
|
||||
margin-top: 1em
|
||||
h2
|
||||
font-size: 1.75em
|
||||
margin-bottom: 0.5714em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.1428em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
margin-bottom: 0.6666em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.3333em
|
||||
h4
|
||||
font-size: 1.25em
|
||||
margin-bottom: 0.8em
|
||||
h5
|
||||
font-size: 1.125em
|
||||
margin-bottom: 0.8888em
|
||||
h6
|
||||
font-size: 1em
|
||||
margin-bottom: 1em
|
||||
blockquote
|
||||
background-color: $background
|
||||
border-left: 5px solid $border
|
||||
padding: 1.5em
|
||||
h1
|
||||
font-size: 2em
|
||||
h2
|
||||
font-size: 1.75em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
h4
|
||||
font-size: 1.25em
|
||||
h5
|
||||
font-size: 1.125em
|
||||
h6
|
||||
font-size: 1em
|
||||
padding: 1.25em 1.5em
|
||||
ol
|
||||
list-style: decimal outside
|
||||
margin-left: 2em
|
||||
@ -63,12 +64,40 @@
|
||||
margin-top: 0.5em
|
||||
ul
|
||||
list-style-type: square
|
||||
table
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
border: 1px solid $border
|
||||
border-width: 0 0 1px
|
||||
padding: 0.5em 0.75em
|
||||
vertical-align: top
|
||||
th
|
||||
color: $text-strong
|
||||
text-align: left
|
||||
tr
|
||||
&:hover
|
||||
background-color: $background
|
||||
thead
|
||||
td,
|
||||
th
|
||||
border-width: 0 0 2px
|
||||
color: $text-strong
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: 2px 0 0
|
||||
color: $text-strong
|
||||
tbody
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 0
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-5
|
||||
code
|
||||
font-size: $size-6
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-4
|
||||
code
|
||||
font-size: $size-5
|
||||
font-size: $size-large
|
||||
|
||||
@ -1,18 +1,59 @@
|
||||
=form-control
|
||||
$input: $grey-darker !default
|
||||
$input-background: $white !default
|
||||
$input-border: $grey-lighter !default
|
||||
|
||||
$input-hover: $grey-darker !default
|
||||
$input-hover-border: $grey-light !default
|
||||
|
||||
$input-focus: $grey-darker !default
|
||||
$input-focus-border: $link !default
|
||||
|
||||
$input-disabled: $text-light !default
|
||||
$input-disabled-background: $background !default
|
||||
$input-disabled-border: $background !default
|
||||
|
||||
$input-arrow: $link !default
|
||||
|
||||
$input-icon: $grey-lighter !default
|
||||
$input-icon-active: $grey !default
|
||||
|
||||
$input-radius: $radius !default
|
||||
|
||||
=input
|
||||
+control
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
background-color: $input-background
|
||||
border: 1px solid $input-border
|
||||
color: $input
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $input-hover-border
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $input-focus-border
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background-color: $input-disabled-background
|
||||
border-color: $input-disabled-border
|
||||
box-shadow: none
|
||||
color: $input-disabled
|
||||
+placeholder
|
||||
color: rgba($input, 0.3)
|
||||
|
||||
.input,
|
||||
.textarea
|
||||
+form-control
|
||||
+input
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.1)
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[type="search"]
|
||||
border-radius: 290486px
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
@ -30,7 +71,7 @@
|
||||
|
||||
.textarea
|
||||
display: block
|
||||
line-height: 1.2
|
||||
line-height: 1.25
|
||||
max-height: 600px
|
||||
max-width: 100%
|
||||
min-height: 120px
|
||||
@ -40,78 +81,77 @@
|
||||
|
||||
.checkbox,
|
||||
.radio
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 16px
|
||||
display: inline-flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
position: relative
|
||||
vertical-align: top
|
||||
input
|
||||
cursor: pointer
|
||||
margin-right: 0.5em
|
||||
&:hover
|
||||
color: $control-hover
|
||||
color: $input-hover
|
||||
&.is-disabled
|
||||
color: $control-disabled
|
||||
color: $input-disabled
|
||||
pointer-events: none
|
||||
input
|
||||
pointer-events: none
|
||||
|
||||
.radio
|
||||
& + .radio
|
||||
margin-left: 10px
|
||||
margin-left: 0.5em
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
height: 32px
|
||||
height: 2.5em
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:after
|
||||
+arrow($input-arrow)
|
||||
margin-top: -0.375em
|
||||
right: 1.125em
|
||||
top: 50%
|
||||
z-index: 4
|
||||
select
|
||||
+form-control
|
||||
+input
|
||||
cursor: pointer
|
||||
display: block
|
||||
font-size: 1em
|
||||
outline: none
|
||||
padding-right: 36px
|
||||
padding-right: 2.5em
|
||||
&:hover
|
||||
border-color: $control-hover-border
|
||||
&::-ms-expand
|
||||
border-color: $input-hover-border
|
||||
&::ms-expand
|
||||
display: none
|
||||
// States
|
||||
&:hover
|
||||
&:after
|
||||
border-color: $input-hover
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&:after
|
||||
+arrow($control-active)
|
||||
margin-top: -6px
|
||||
right: 16px
|
||||
top: 50%
|
||||
&:hover
|
||||
&:after
|
||||
border-color: $control-hover
|
||||
&.is-small
|
||||
height: 24px
|
||||
select
|
||||
+control-small
|
||||
padding-right: 28px
|
||||
&.is-medium
|
||||
height: 40px
|
||||
select
|
||||
+control-medium
|
||||
padding-right: 44px
|
||||
&.is-large
|
||||
height: 48px
|
||||
select
|
||||
+control-large
|
||||
padding-right: 52px
|
||||
|
||||
.label
|
||||
color: $control
|
||||
color: $input
|
||||
display: block
|
||||
font-weight: bold
|
||||
&:not(:last-child)
|
||||
margin-bottom: 5px
|
||||
margin-bottom: 0.5em
|
||||
|
||||
.help
|
||||
display: block
|
||||
font-size: $control-size-small
|
||||
font-size: $size-small
|
||||
margin-top: 5px
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
@ -122,20 +162,20 @@
|
||||
|
||||
.control-label
|
||||
+mobile
|
||||
margin-bottom: 5px
|
||||
margin-bottom: 0.5em
|
||||
+tablet
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
margin-right: 20px
|
||||
padding-top: 7px
|
||||
margin-right: 1.5em
|
||||
padding-top: 0.5em
|
||||
text-align: right
|
||||
|
||||
.control
|
||||
position: relative
|
||||
text-align: left
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 0.75rem
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
@ -148,20 +188,26 @@
|
||||
width: auto
|
||||
&:hover
|
||||
z-index: 2
|
||||
&:active,
|
||||
&:focus
|
||||
&:focus,
|
||||
&:active
|
||||
z-index: 3
|
||||
&:first-child
|
||||
border-radius: $control-radius 0 0 $control-radius
|
||||
border-radius: $input-radius 0 0 $input-radius
|
||||
select
|
||||
border-radius: $control-radius 0 0 $control-radius
|
||||
border-radius: $input-radius 0 0 $input-radius
|
||||
&:last-child
|
||||
border-radius: 0 $control-radius $control-radius 0
|
||||
border-radius: 0 $input-radius $input-radius 0
|
||||
select
|
||||
border-radius: 0 $control-radius $control-radius 0
|
||||
border-radius: 0 $input-radius $input-radius 0
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
.select select
|
||||
&:hover
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&:active
|
||||
z-index: 3
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
@ -173,66 +219,64 @@
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
&.has-icon
|
||||
& > .fa
|
||||
+fa(14px, 24px)
|
||||
color: $control-icon
|
||||
.icon
|
||||
color: $input-icon
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 4px
|
||||
top: ($size-normal * 2.5) / 2
|
||||
z-index: 4
|
||||
.input
|
||||
&:focus + .fa
|
||||
color: $control-icon-active
|
||||
&.is-small + .fa
|
||||
font-size: 10.5px
|
||||
top: 0
|
||||
&.is-medium + .fa
|
||||
font-size: 21px
|
||||
top: 8px
|
||||
&.is-large + .fa
|
||||
font-size: 21px
|
||||
top: 12px
|
||||
&:focus
|
||||
& + .icon
|
||||
color: $input-icon-active
|
||||
&.is-small
|
||||
& + .icon
|
||||
top: ($size-small * 2.5) / 2
|
||||
&.is-medium
|
||||
& + .icon
|
||||
top: ($size-medium * 2.5) / 2
|
||||
&.is-large
|
||||
& + .icon
|
||||
top: ($size-large * 2.5) / 2
|
||||
&:not(.has-icon-right)
|
||||
& > .fa
|
||||
left: 4px
|
||||
.icon
|
||||
left: ($size-normal * 2.5) / 2
|
||||
transform: translateX(-50%) translateY(-50%)
|
||||
.input
|
||||
padding-left: 32px
|
||||
padding-left: 2.5em
|
||||
&.is-small
|
||||
padding-left: 24px
|
||||
& + .fa
|
||||
left: 0
|
||||
& + .icon
|
||||
left: ($size-small * 2.5) / 2
|
||||
&.is-medium
|
||||
padding-left: 40px
|
||||
& + .fa
|
||||
left: 8px
|
||||
& + .icon
|
||||
left: ($size-medium * 2.5) / 2
|
||||
&.is-large
|
||||
padding-left: 48px
|
||||
& + .fa
|
||||
left: 12px
|
||||
& + .icon
|
||||
left: ($size-large * 2.5) / 2
|
||||
&.has-icon-right
|
||||
& > .fa
|
||||
right: 4px
|
||||
.icon
|
||||
right: ($size-normal * 2.5) / 2
|
||||
transform: translateX(50%) translateY(-50%)
|
||||
.input
|
||||
padding-right: 32px
|
||||
padding-right: 2.5em
|
||||
&.is-small
|
||||
padding-right: 24px
|
||||
& + .fa
|
||||
right: 0
|
||||
& + .icon
|
||||
right: ($size-small * 2.5) / 2
|
||||
&.is-medium
|
||||
padding-right: 40px
|
||||
& + .fa
|
||||
right: 8px
|
||||
& + .icon
|
||||
right: ($size-medium * 2.5) / 2
|
||||
&.is-large
|
||||
padding-right: 48px
|
||||
& + .fa
|
||||
right: 12px
|
||||
& + .icon
|
||||
right: ($size-large * 2.5) / 2
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
& > .control
|
||||
flex-basis: 0
|
||||
flex-shrink: 0
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
margin-right: 10px
|
||||
margin-right: 0.75rem
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
@ -252,5 +296,5 @@
|
||||
&:after
|
||||
+loader
|
||||
position: absolute !important
|
||||
right: 8px
|
||||
top: 8px
|
||||
right: 0.75em
|
||||
top: 0.75em
|
||||
|
||||
12
sass/elements/icon.sass
Normal file
12
sass/elements/icon.sass
Normal file
@ -0,0 +1,12 @@
|
||||
.icon
|
||||
+fa(21px, 1.5rem)
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
// Sizes
|
||||
&.is-small
|
||||
+fa(14px, 1rem)
|
||||
&.is-medium
|
||||
+fa(28px, 2rem)
|
||||
&.is-large
|
||||
+fa(42px, 3rem)
|
||||
@ -1,14 +1,18 @@
|
||||
.notification
|
||||
+block
|
||||
+clearfix
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
padding: 16px 20px
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||
position: relative
|
||||
code,
|
||||
pre
|
||||
background: $white
|
||||
pre code
|
||||
background: transparent
|
||||
.delete
|
||||
border-radius: 0 $radius
|
||||
float: right
|
||||
margin: -16px -20px 0 20px
|
||||
position: absolute
|
||||
right: 0.5em
|
||||
top: 0.5em
|
||||
.title,
|
||||
.subtitle,
|
||||
.content
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
position: relative
|
||||
+desktop
|
||||
margin: 0 auto
|
||||
max-width: 960px
|
||||
max-width: $desktop - 40px // 960px
|
||||
// Modifiers
|
||||
&.is-fluid
|
||||
margin: 0 20px
|
||||
max-width: none
|
||||
+widescreen
|
||||
max-width: 1200px
|
||||
max-width: $widescreen - 40px // 1152px
|
||||
|
||||
.delete
|
||||
+delete
|
||||
@ -21,19 +21,6 @@
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
|
||||
.icon
|
||||
+fa(21px, 24px)
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
// Sizes
|
||||
&.is-small
|
||||
+fa(14px, 16px)
|
||||
&.is-medium
|
||||
+fa(28px, 32px)
|
||||
&.is-large
|
||||
+fa(42px, 48px)
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
@ -43,8 +30,7 @@
|
||||
|
||||
.highlight
|
||||
+block
|
||||
font-size: 12px
|
||||
font-weight: normal
|
||||
font-weight: $weight-normal
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
@ -56,53 +42,15 @@
|
||||
+loader
|
||||
|
||||
.number
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
display: inline-block
|
||||
font-size: $size-medium
|
||||
vertical-align: top
|
||||
|
||||
.tag
|
||||
align-items: center
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
color: $text
|
||||
display: inline-flex
|
||||
font-size: 12px
|
||||
height: 24px
|
||||
font-size: $size-medium
|
||||
height: 2em
|
||||
justify-content: center
|
||||
line-height: 16px
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
margin-right: 1.5rem
|
||||
min-width: 2.5em
|
||||
padding: 0.25rem 0.5rem
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -6px
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
height: 20px
|
||||
padding-left: 8px
|
||||
padding-right: 8px
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
padding-left: 14px
|
||||
padding-right: 14px
|
||||
&.is-large
|
||||
font-size: $size-5
|
||||
height: 40px
|
||||
line-height: 24px
|
||||
padding-left: 18px
|
||||
padding-right: 18px
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -8px
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
border: none
|
||||
border-radius: 290486px
|
||||
display: block
|
||||
height: 12px
|
||||
height: $size-normal
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
width: 100%
|
||||
@ -25,8 +25,8 @@
|
||||
background-color: $color
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 8px
|
||||
height: $size-small
|
||||
&.is-medium
|
||||
height: 16px
|
||||
height: $size-medium
|
||||
&.is-large
|
||||
height: 20px
|
||||
height: $size-large
|
||||
|
||||
@ -1,43 +1,25 @@
|
||||
$table: $text-strong !default
|
||||
$table: $grey-darker !default
|
||||
$table-background: $white !default
|
||||
$table-border: $border !default
|
||||
$table-border: $grey-lighter !default
|
||||
|
||||
$table-head: $text-light !default
|
||||
$table-head: $grey !default
|
||||
|
||||
$table-row-hover-background: $white-ter !default
|
||||
$table-row-hover-background: $white-bis !default
|
||||
$table-row-even-background: $white-bis !default
|
||||
$table-row-even-hover-background: $white-ter !default
|
||||
|
||||
.table
|
||||
background-color: $table-background
|
||||
color: $table
|
||||
margin-bottom: 20px
|
||||
margin-bottom: 1.5rem
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
border: 1px solid $table-border
|
||||
border-width: 0 0 1px
|
||||
padding: 8px 10px
|
||||
padding: 0.5em 0.75em
|
||||
vertical-align: top
|
||||
// Modifiers
|
||||
&.is-icon
|
||||
padding: 5px
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
.fa
|
||||
+fa(21px, 24px)
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
display: block
|
||||
padding: 8px 10px
|
||||
&:hover
|
||||
background-color: $link
|
||||
color: $link-invert
|
||||
&.is-narrow
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
@ -52,17 +34,17 @@ $table-row-even-background: $white-bis !default
|
||||
th
|
||||
border-width: 0 0 2px
|
||||
color: $table-head
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: 2px 0 0
|
||||
color: $table-head
|
||||
tbody
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 0
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: 2px 0 0
|
||||
color: $table-head
|
||||
// Modifiers
|
||||
&.is-bordered
|
||||
td,
|
||||
@ -76,22 +58,11 @@ $table-row-even-background: $white-bis !default
|
||||
&.is-narrow
|
||||
td,
|
||||
th
|
||||
padding: 5px 10px
|
||||
// Modifiers
|
||||
&.is-icon
|
||||
padding: 2px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 2px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px 10px
|
||||
padding: 0.25em 0.5em
|
||||
&.is-striped
|
||||
tbody
|
||||
tr
|
||||
&:nth-child(even)
|
||||
background-color: $table-row-even-background
|
||||
&:hover
|
||||
background-color: $table-row-hover-background
|
||||
background-color: $table-row-even-hover-background
|
||||
|
||||
29
sass/elements/tag.sass
Normal file
29
sass/elements/tag.sass
Normal file
@ -0,0 +1,29 @@
|
||||
.tag
|
||||
align-items: center
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
color: $text
|
||||
display: inline-flex
|
||||
font-size: $size-small
|
||||
height: 2em
|
||||
justify-content: center
|
||||
line-height: 1.5
|
||||
padding-left: 0.875em
|
||||
padding-right: 0.875em
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
.delete
|
||||
margin-left: 0.25em
|
||||
margin-right: -0.5em
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
&.is-large
|
||||
font-size: $size-medium
|
||||
@ -1,72 +1,53 @@
|
||||
$title: $grey-darker !default
|
||||
$title-size: $size-3 !default
|
||||
$title-weight: $weight-light !default
|
||||
$title-weight-bold: $weight-semibold !default
|
||||
|
||||
$subtitle: $grey-dark !default
|
||||
$subtitle-size: $size-5 !default
|
||||
$subtitle-strong: $grey-darker !default
|
||||
$subtitle-weight: $weight-light !default
|
||||
|
||||
.title,
|
||||
.subtitle
|
||||
+block
|
||||
font-weight: $weight-title-normal
|
||||
word-break: break-word
|
||||
em,
|
||||
span
|
||||
font-weight: $weight-title-normal
|
||||
a
|
||||
&:hover
|
||||
border-bottom: 1px solid
|
||||
font-weight: $title-weight
|
||||
strong
|
||||
font-weight: $weight-title-bold
|
||||
font-weight: $title-weight-bold
|
||||
.tag
|
||||
vertical-align: bottom
|
||||
vertical-align: middle
|
||||
|
||||
.title
|
||||
color: $text-strong
|
||||
font-size: $size-large
|
||||
line-height: 1
|
||||
code
|
||||
display: inline-block
|
||||
font-size: $size-large
|
||||
color: $title
|
||||
font-size: $title-size
|
||||
font-weight: $title-weight
|
||||
line-height: 1.125
|
||||
strong
|
||||
color: inherit
|
||||
& + .highlight
|
||||
margin-top: -10px
|
||||
margin-top: -0.75rem
|
||||
& + .subtitle
|
||||
margin-top: -10px
|
||||
margin-top: -1.25rem
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
// Responsiveness
|
||||
+tablet
|
||||
& + .subtitle
|
||||
margin-top: -15px
|
||||
|
||||
.subtitle
|
||||
color: $text
|
||||
font-size: $size-medium
|
||||
line-height: 1.125
|
||||
code
|
||||
border-radius: $radius
|
||||
display: inline-block
|
||||
font-size: $size-normal
|
||||
padding: 2px 3px
|
||||
vertical-align: top
|
||||
color: $subtitle
|
||||
font-size: $subtitle-size
|
||||
font-weight: $subtitle-weight
|
||||
line-height: 1.25
|
||||
strong
|
||||
color: $text-strong
|
||||
color: $subtitle-strong
|
||||
& + .title
|
||||
margin-top: -20px
|
||||
margin-top: -1.5rem
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
padding: 10px
|
||||
padding: 0.75rem
|
||||
.columns.is-mobile > &.is-narrow
|
||||
flex: none
|
||||
.columns.is-mobile > &.is-full
|
||||
@ -204,13 +204,13 @@
|
||||
margin-left: ($i / 12) * 100%
|
||||
|
||||
.columns
|
||||
margin-left: -10px
|
||||
margin-right: -10px
|
||||
margin-top: -10px
|
||||
margin-left: -0.75rem
|
||||
margin-right: -0.75rem
|
||||
margin-top: -0.75rem
|
||||
&:last-child
|
||||
margin-bottom: -10px
|
||||
margin-bottom: -0.75rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 0.75rem
|
||||
// Modifiers
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
@ -221,7 +221,7 @@
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
margin-bottom: 1.5rem
|
||||
& > .column
|
||||
margin: 0
|
||||
padding: 0
|
||||
@ -231,7 +231,7 @@
|
||||
flex-wrap: wrap
|
||||
& > .column
|
||||
max-width: 33.3333%
|
||||
padding: 10px
|
||||
padding: 0.75rem
|
||||
width: 33.3333%
|
||||
& + .column
|
||||
margin-left: 0
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
.tile
|
||||
align-items: stretch
|
||||
display: block
|
||||
flex-basis: auto
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
min-height: min-content
|
||||
// Modifiers
|
||||
&.is-ancestor
|
||||
margin-left: -10px
|
||||
margin-right: -10px
|
||||
margin-top: -10px
|
||||
margin-left: -0.75rem
|
||||
margin-right: -0.75rem
|
||||
margin-top: -0.75rem
|
||||
&:last-child
|
||||
margin-bottom: -10px
|
||||
margin-bottom: -0.75rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 0.75rem
|
||||
&.is-child
|
||||
margin: 0 !important
|
||||
&.is-parent
|
||||
padding: 10px
|
||||
padding: 0.75rem
|
||||
&.is-vertical
|
||||
flex-direction: column
|
||||
& > .tile.is-child:not(:last-child)
|
||||
margin-bottom: 20px !important
|
||||
margin-bottom: 1.5rem !important
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(.is-child)
|
||||
|
||||
@ -1,13 +1,3 @@
|
||||
.footer
|
||||
background-color: $background
|
||||
padding: 40px 20px 80px
|
||||
a
|
||||
&,
|
||||
&:visited
|
||||
color: $text
|
||||
&:hover
|
||||
color: $text-strong
|
||||
&:not(.icon)
|
||||
border-bottom: 1px solid $border
|
||||
&:hover
|
||||
border-bottom-color: $link
|
||||
padding: 3rem 1.5rem 6rem
|
||||
|
||||
@ -18,31 +18,32 @@
|
||||
display: none
|
||||
|
||||
.hero-buttons
|
||||
margin-top: 20px
|
||||
margin-top: 1.5rem
|
||||
// Responsiveness
|
||||
+mobile
|
||||
.button
|
||||
display: flex
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 0.75rem
|
||||
+tablet
|
||||
display: flex
|
||||
justify-content: center
|
||||
.button:not(:last-child)
|
||||
margin-right: 20px
|
||||
margin-right: 1.5rem
|
||||
|
||||
// Containers
|
||||
|
||||
.hero-head,
|
||||
.hero-foot
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.hero-body
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
padding: 40px 20px
|
||||
padding: 3rem 1.5rem
|
||||
// Responsiveness
|
||||
+from(1240px)
|
||||
+from($widescreen)
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
@ -66,12 +67,12 @@
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.title
|
||||
color: $color-invert
|
||||
a,
|
||||
strong
|
||||
color: inherit
|
||||
.title
|
||||
color: $color-invert
|
||||
.subtitle
|
||||
color: rgba($color-invert, 0.9)
|
||||
a,
|
||||
@ -131,13 +132,13 @@
|
||||
&.is-medium
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 120px
|
||||
padding-top: 120px
|
||||
padding-bottom: 9rem
|
||||
padding-top: 9rem
|
||||
&.is-large
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 240px
|
||||
padding-top: 240px
|
||||
padding-bottom: 18rem
|
||||
padding-top: 18rem
|
||||
&.is-fullheight
|
||||
min-height: 100vh
|
||||
.hero-body
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
.section
|
||||
background-color: $white
|
||||
padding: 40px 20px
|
||||
padding: 3rem 1.5rem
|
||||
// Responsiveness
|
||||
+desktop
|
||||
// Sizes
|
||||
&.is-medium
|
||||
padding: 120px 20px
|
||||
padding: 9rem 1.5rem
|
||||
&.is-large
|
||||
padding: 240px 20px
|
||||
padding: 18rem 1.5rem
|
||||
|
||||
@ -1,75 +1,37 @@
|
||||
$control: $text-strong !default
|
||||
$control-background: $text-invert !default
|
||||
$control-border: $border !default
|
||||
|
||||
$control-hover: $link-hover !default
|
||||
$control-hover-border: $border-hover !default
|
||||
|
||||
$control-active: $link !default
|
||||
$control-active-background: $link !default
|
||||
$control-active-background-invert: $link-invert !default
|
||||
$control-active-border: $link !default
|
||||
|
||||
$control-disabled: $border !default
|
||||
$control-disabled-background: $background !default
|
||||
|
||||
$control-radius: $radius !default
|
||||
$control-radius-small: $radius-small !default
|
||||
$control-size: $size-normal !default
|
||||
$control-size-small: $size-small !default
|
||||
|
||||
$control-icon: $grey-lighter !default
|
||||
$control-icon-active: $grey-light !default
|
||||
|
||||
=control
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
align-items: center
|
||||
background-color: $control-background
|
||||
border: 1px solid $control-border
|
||||
border: none
|
||||
border-radius: $control-radius
|
||||
color: $control
|
||||
box-shadow: none
|
||||
display: inline-flex
|
||||
font-size: $control-size
|
||||
height: 32px
|
||||
font-size: $size-normal
|
||||
height: 2.5em
|
||||
justify-content: flex-start
|
||||
line-height: 24px
|
||||
padding-left: 8px
|
||||
padding-right: 8px
|
||||
line-height: 1.5
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-color: $control-hover-border
|
||||
&:active,
|
||||
// States
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $control-active-border
|
||||
outline: none
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background-color: $control-disabled-background
|
||||
border-color: $control-disabled
|
||||
cursor: not-allowed
|
||||
pointer-events: none
|
||||
+placeholder
|
||||
color: rgba($control, 0.3)
|
||||
|
||||
// The controls sizes use mixins so they can be used at different breakpoints
|
||||
=control-small
|
||||
border-radius: $control-radius-small
|
||||
font-size: 11px
|
||||
height: 24px
|
||||
line-height: 16px
|
||||
padding-left: 6px
|
||||
padding-right: 6px
|
||||
font-size: $size-small
|
||||
=control-medium
|
||||
font-size: 18px
|
||||
height: 40px
|
||||
line-height: 32px
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
font-size: $size-medium
|
||||
=control-large
|
||||
font-size: 24px
|
||||
height: 48px
|
||||
line-height: 40px
|
||||
padding-left: 12px
|
||||
padding-right: 12px
|
||||
font-size: $size-large
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user