mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Jeremy Thomas
GitHub
commit
cb40aa8d21
3
docs/.babelrc
Normal file
3
docs/.babelrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"presets": ["es2015-ie"]
|
||||||
|
}
|
||||||
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
@ -9,7 +9,6 @@ npm-debug.log
|
|||||||
|
|
||||||
# Folders
|
# Folders
|
||||||
.sass-cache
|
.sass-cache
|
||||||
/_sass
|
|
||||||
/bulma
|
/bulma
|
||||||
/fontawesome
|
/fontawesome
|
||||||
/styles/node_modules
|
/styles/node_modules
|
||||||
|
|||||||
@ -9,11 +9,13 @@ markdown: kramdown
|
|||||||
permalink: pretty
|
permalink: pretty
|
||||||
url: http://bulma.io
|
url: http://bulma.io
|
||||||
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
|
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
|
||||||
|
exclude: ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
|
||||||
|
|
||||||
# Variables
|
# Variables
|
||||||
|
|
||||||
documentation: "/documentation/overview/start/"
|
documentation: "/documentation/overview/start/"
|
||||||
download: https://github.com/jgthms/bulma/archive/0.4.2.zip
|
download: https://github.com/jgthms/bulma/archive/0.4.2.zip
|
||||||
github: https://github.com/jgthms/bulma
|
github: https://github.com/jgthms/bulma
|
||||||
|
twitter: https://twitter.com/jgthms
|
||||||
version: 0.4.2
|
version: 0.4.2
|
||||||
vernum: 42
|
vernum: 42
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
{% include header.html %}
|
{% include navbar.html id="BlogHero" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
|
|||||||
1
docs/_includes/bp/desktop.html
Normal file
1
docs/_includes/bp/desktop.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<span class="tag">>= 1000px</span>
|
||||||
1
docs/_includes/bp/touch.html
Normal file
1
docs/_includes/bp/touch.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<span class="tag">< 1000px</span>
|
||||||
@ -48,7 +48,7 @@
|
|||||||
<div id="about" class="content">
|
<div id="about" class="content">
|
||||||
<strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
|
<strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
|
||||||
<div class="twitter-container">
|
<div class="twitter-container">
|
||||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
<a href="{{ site.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -104,9 +104,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
|
||||||
|
<script src="{{ site.url }}/lib/main.js"></script>
|
||||||
|
|
||||||
|
{% if page.route == 'index' %}
|
||||||
|
<script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div id="fb-root"></div>
|
<div id="fb-root"></div>
|
||||||
|
|
||||||
<script>(function(d, s, id) {
|
<script async defer type="text/javascript">(function(d, s, id) {
|
||||||
var js, fjs = d.getElementsByTagName(s)[0];
|
var js, fjs = d.getElementsByTagName(s)[0];
|
||||||
if (d.getElementById(id)) return;
|
if (d.getElementById(id)) return;
|
||||||
js = d.createElement(s); js.id = id;
|
js = d.createElement(s); js.id = id;
|
||||||
@ -119,25 +126,17 @@
|
|||||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||||
|
|
||||||
<script src="{{ site.url }}/javascript/jquery-2.2.0.min.js"></script>
|
<script async defer type="text/javascript">
|
||||||
<script src="{{ site.url }}/javascript/clipboard.min.js"></script>
|
(function() {
|
||||||
<script src="{{ site.url }}/javascript/bulma.js"></script>
|
|
||||||
|
|
||||||
{% if page.route == 'index' %}
|
|
||||||
<script type="text/javascript" src="{{ site.url }}/javascript/index.js"></script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
(function($) {
|
|
||||||
window.fnames = new Array();
|
window.fnames = new Array();
|
||||||
window.ftypes = new Array();
|
window.ftypes = new Array();
|
||||||
fnames[0]='EMAIL';
|
fnames[0]='EMAIL';
|
||||||
ftypes[0]='email';
|
ftypes[0]='email';
|
||||||
}(jQuery));
|
}());
|
||||||
var $mcj = jQuery.noConflict(true);
|
// var $mcj = window.jQuery.noConflict(true);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script async defer type="text/javascript">
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
<i class="fa fa-github"></i>
|
<i class="fa fa-github"></i>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-item" href="https://twitter.com/jgthms">
|
<a class="nav-item" href="{{ site.twitter }}">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa fa-twitter"></i>
|
<i class="fa fa-twitter"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
139
docs/_includes/navbar.html
Normal file
139
docs/_includes/navbar.html
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<nav class="navbar {% if include.transparent %}is-transparent{% endif %}">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item" href="{{ site.url }}">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
|
||||||
|
<span class="icon" style="color: #333;">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
|
||||||
|
<span class="icon" style="color: #55acee;">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-burger burger" data-target="navMenu{{ include.id }}">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="navMenu{{ include.id }}" class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
|
<a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
<div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
|
||||||
|
<a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.documentation }}">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||||
|
Modifiers
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
|
||||||
|
Grid
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
|
||||||
|
Layout
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div>version <p class="has-text-info">{{ site.version }}</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
|
<a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
|
||||||
|
Blog
|
||||||
|
</a>
|
||||||
|
<div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
|
||||||
|
{% for post in site.posts limit:3 %}
|
||||||
|
<a class="navbar-item" href="{{ post.url }}">
|
||||||
|
<div class="navbar-content">
|
||||||
|
<p>
|
||||||
|
<small class="has-text-info">{{ post.date | date_to_string }}</small>
|
||||||
|
</p>
|
||||||
|
<p>{{ post.title }}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
<a class="navbar-item" href="{{ site.url }}/blog/">
|
||||||
|
More posts
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="navbar-content">
|
||||||
|
<div class="level is-mobile">
|
||||||
|
<div class="level-left">
|
||||||
|
<div class="level-item">
|
||||||
|
<strong>Stay up to date!</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="level-right">
|
||||||
|
<div class="level-item">
|
||||||
|
<a class="button is-rss is-small" href="{{ site.url }}/atom.xml">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-rss"></i>
|
||||||
|
</span>
|
||||||
|
<span>Subscribe</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
|
<a class="navbar-item" href="{{ site.github }}" target="_blank">
|
||||||
|
Github
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item" href="{{ site.twitter }}" target="_blank">
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<p class="control">
|
||||||
|
<a id="twitter"
|
||||||
|
class="button"
|
||||||
|
data-social-network="Twitter"
|
||||||
|
data-social-action="tweet"
|
||||||
|
data-social-target="{{ site.url }}"
|
||||||
|
target="_blank"
|
||||||
|
href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
<span>Tweet</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary" href="{{ site.download }}">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
@ -22,8 +22,9 @@
|
|||||||
<a class="nav-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
|
<a class="nav-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
|
||||||
Modal
|
Modal
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/nav/">
|
<a class="nav-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
|
||||||
Nav
|
Navbar
|
||||||
|
<span class="tag is-success" style="margin-left: 0.5rem;">New!</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
|
<a class="nav-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
|
||||||
Pagination
|
Pagination
|
||||||
|
|||||||
50
docs/_javascript/index.js
Normal file
50
docs/_javascript/index.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
|
const $grid = document.getElementById('grid');
|
||||||
|
const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
|
||||||
|
const $markup = document.querySelector('#markup code');
|
||||||
|
const $message = document.getElementById('message');
|
||||||
|
const $add = document.getElementById('add');
|
||||||
|
const $remove = document.getElementById('remove');
|
||||||
|
let showing = 5;
|
||||||
|
|
||||||
|
function showColumns() {
|
||||||
|
if (showing === 13) {
|
||||||
|
$message.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
$message.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
showing = Math.min(Math.max(parseInt(showing), 2), 12);
|
||||||
|
|
||||||
|
$columns.forEach($el => {
|
||||||
|
$el.style.display = 'none';
|
||||||
|
});
|
||||||
|
$columns.slice(0, showing).forEach($el => {
|
||||||
|
$el.style.display = 'block';
|
||||||
|
});
|
||||||
|
|
||||||
|
$markup.innerHTML = '<span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns"</span><span class="nt">></span>';
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '\n');
|
||||||
|
|
||||||
|
for(let i = 0; i < showing; i++) {
|
||||||
|
$markup.insertAdjacentHTML('beforeend', ' <span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>');
|
||||||
|
$markup.insertAdjacentHTML('beforeend', i + 1);
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '<span class="nt"></div></span>');
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '<span class="nt"></div></span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
$add.addEventListener('click', () => {
|
||||||
|
showing++;
|
||||||
|
showColumns();
|
||||||
|
});
|
||||||
|
|
||||||
|
$remove.addEventListener('click', () => {
|
||||||
|
showing--;
|
||||||
|
showColumns();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
115
docs/_javascript/main.js
Normal file
115
docs/_javascript/main.js
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
|
// Toggles
|
||||||
|
|
||||||
|
const $burgers = getAll('.burger');
|
||||||
|
const $fries = getAll('.fries');
|
||||||
|
|
||||||
|
if ($burgers.length > 0) {
|
||||||
|
$burgers.forEach($el => {
|
||||||
|
$el.addEventListener('click', () => {
|
||||||
|
const target = $el.dataset.target;
|
||||||
|
const $target = document.getElementById(target);
|
||||||
|
$el.classList.toggle('is-active');
|
||||||
|
$target.classList.toggle('is-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modals
|
||||||
|
|
||||||
|
const $html = document.documentElement;
|
||||||
|
const $modals = getAll('.modal');
|
||||||
|
const $modalButtons = getAll('.modal-button');
|
||||||
|
const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
|
||||||
|
|
||||||
|
if ($modalButtons.length > 0) {
|
||||||
|
$modalButtons.forEach($el => {
|
||||||
|
$el.addEventListener('click', () => {
|
||||||
|
const target = $el.dataset.target;
|
||||||
|
const $target = document.getElementById(target);
|
||||||
|
$html.classList.add('is-clipped');
|
||||||
|
$target.classList.add('is-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($modalCloses.length > 0) {
|
||||||
|
$modalCloses.forEach($el => {
|
||||||
|
$el.addEventListener('click', () => {
|
||||||
|
$html.classList.remove('is-clipped');
|
||||||
|
closeModals();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', e => {
|
||||||
|
if (e.keyCode === 27) {
|
||||||
|
$html.classList.remove('is-clipped');
|
||||||
|
closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function closeModals() {
|
||||||
|
$modals.forEach($el => {
|
||||||
|
$el.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clipboard
|
||||||
|
|
||||||
|
const $highlights = getAll('.highlight');
|
||||||
|
let itemsProcessed = 0;
|
||||||
|
|
||||||
|
if ($highlights.length > 0) {
|
||||||
|
$highlights.forEach($el => {
|
||||||
|
const copy = '<button class="copy">Copy</button>';
|
||||||
|
const expand = '<button class="expand">Expand</button>';
|
||||||
|
$el.insertAdjacentHTML('beforeend', copy);
|
||||||
|
|
||||||
|
if ($el.firstElementChild.scrollHeight > 320) {
|
||||||
|
$el.insertAdjacentHTML('beforeend', expand);
|
||||||
|
}
|
||||||
|
|
||||||
|
itemsProcessed++;
|
||||||
|
if (itemsProcessed === $highlights.length) {
|
||||||
|
addHighlightControls();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addHighlightControls() {
|
||||||
|
const $highlightButtons = getAll('.highlight .copy, .highlight .expand');
|
||||||
|
|
||||||
|
$highlightButtons.forEach($el => {
|
||||||
|
$el.addEventListener('mouseenter', () => {
|
||||||
|
$el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63';
|
||||||
|
});
|
||||||
|
|
||||||
|
$el.addEventListener('mouseleave', () => {
|
||||||
|
$el.parentNode.style.boxShadow = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const $highlightExpands = getAll('.highlight .expand');
|
||||||
|
|
||||||
|
$highlightExpands.forEach($el => {
|
||||||
|
$el.addEventListener('click', () => {
|
||||||
|
$el.parentNode.firstElementChild.style.maxHeight = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
new Clipboard('.copy', {
|
||||||
|
target: function(trigger) {
|
||||||
|
return trigger.previousSibling;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
|
||||||
|
function getAll(selector) {
|
||||||
|
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
@ -4,7 +4,7 @@ route: documentation
|
|||||||
---
|
---
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{% include header.html %}
|
{% include navbar.html id="Documentation" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
|
|||||||
5
docs/_posts/2017-07-02-new-navbar-component.md
Normal file
5
docs/_posts/2017-07-02-new-navbar-component.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: "RIP nav; long live the navbar!"
|
||||||
|
published: false
|
||||||
|
---
|
||||||
@ -39,8 +39,11 @@
|
|||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
|
|
||||||
.highlight pre
|
.highlight pre
|
||||||
max-height: 600px
|
max-height: 320px
|
||||||
margin-bottom: 0 !important
|
margin-bottom: 0 !important
|
||||||
|
padding: 1.25em 1.5em
|
||||||
|
code
|
||||||
|
padding: 0
|
||||||
|
|
||||||
$structure: $danger
|
$structure: $danger
|
||||||
$structure-invert: $danger-invert
|
$structure-invert: $danger-invert
|
||||||
@ -16,3 +16,9 @@ $twitter: #55acee
|
|||||||
background: $twitter
|
background: $twitter
|
||||||
border-color: $twitter
|
border-color: $twitter
|
||||||
color: $white
|
color: $white
|
||||||
|
|
||||||
|
+desktop
|
||||||
|
#blogDropdown
|
||||||
|
width: 16rem
|
||||||
|
.navbar-item
|
||||||
|
white-space: normal
|
||||||
@ -12,3 +12,11 @@
|
|||||||
margin-right: 8px
|
margin-right: 8px
|
||||||
width: 24px
|
width: 24px
|
||||||
|
|
||||||
|
.button.is-rss
|
||||||
|
background-color: #f26522
|
||||||
|
border-color: transparent
|
||||||
|
color: #fff
|
||||||
|
&:hover
|
||||||
|
background-color: darken(#f26522, 5%)
|
||||||
|
&:active
|
||||||
|
background-color: darken(#f26522, 10%)
|
||||||
@ -1,17 +1,21 @@
|
|||||||
@charset "utf-8"
|
@charset "utf-8"
|
||||||
|
|
||||||
@import "../bulma"
|
@import "../bulma"
|
||||||
@import "./sass/highlight"
|
@import "./_sass/highlight"
|
||||||
@import "./sass/override"
|
@import "./_sass/override"
|
||||||
@import "./sass/global"
|
@import "./_sass/global"
|
||||||
@import "./sass/index"
|
@import "./_sass/index"
|
||||||
@import "./sass/header"
|
@import "./_sass/header"
|
||||||
@import "./sass/footer"
|
@import "./_sass/footer"
|
||||||
@import "./sass/specific"
|
@import "./_sass/specific"
|
||||||
@import "./sass/example"
|
@import "./_sass/example"
|
||||||
@import "./sass/callout"
|
@import "./_sass/callout"
|
||||||
@import "./sass/bsa"
|
@import "./_sass/bsa"
|
||||||
@import "./sass/route"
|
@import "./_sass/route"
|
||||||
|
|
||||||
|
\:root
|
||||||
|
--primary: #{$primary}
|
||||||
|
--gap: 0.75rem
|
||||||
|
|
||||||
html
|
html
|
||||||
\::-moz-selection
|
\::-moz-selection
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -32,7 +32,7 @@ doc-subtab: modal
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>
|
<p>
|
||||||
<a class="button is-primary is-large modal-button" data-target="#modal">Launch example modal</a>
|
<a class="button is-primary is-large modal-button" data-target="modal">Launch example modal</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -42,7 +42,7 @@ doc-subtab: modal
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<!-- Any other Bulma elements you want -->
|
<!-- Any other Bulma elements you want -->
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close"></button>
|
<button class="modal-close is-large"></button>
|
||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
@ -66,7 +66,7 @@ doc-subtab: modal
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
|
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="button is-primary is-large modal-button" data-target="#modal-bis">Launch image modal</a>
|
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -78,7 +78,7 @@ doc-subtab: modal
|
|||||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close"></button>
|
<button class="modal-close is-large"></button>
|
||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
@ -89,7 +89,7 @@ doc-subtab: modal
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
|
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="button is-primary is-large modal-button" data-target="#modal-ter">Launch modal card</a>
|
<a class="button is-primary is-large modal-button" data-target="modal-ter">Launch modal card</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -150,7 +150,7 @@ doc-subtab: modal
|
|||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close"></button>
|
<button class="modal-close is-large"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="modal-bis" class="modal">
|
<div id="modal-bis" class="modal">
|
||||||
@ -160,7 +160,7 @@ doc-subtab: modal
|
|||||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close"></button>
|
<button class="modal-close is-large"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="modal-ter" class="modal">
|
<div id="modal-ter" class="modal">
|
||||||
|
|||||||
@ -8,6 +8,19 @@ doc-subtab: nav
|
|||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="message is-danger">
|
||||||
|
<div class="message-body">
|
||||||
|
<p>This component has been <strong>deprecated</strong> and will be deleted soon.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message is-info">
|
||||||
|
<div class="message-body">
|
||||||
|
<p>While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility, the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using <a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a> instead.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1 class="title">Nav</h1>
|
<h1 class="title">Nav</h1>
|
||||||
<h2 class="subtitle">
|
<h2 class="subtitle">
|
||||||
A responsive horizontal <strong>nav bar</strong> that can contain links, tabs, buttons, icons, and a logo
|
A responsive horizontal <strong>nav bar</strong> that can contain links, tabs, buttons, icons, and a logo
|
||||||
|
|||||||
801
docs/documentation/components/navbar.html
Normal file
801
docs/documentation/components/navbar.html
Normal file
@ -0,0 +1,801 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: components
|
||||||
|
doc-subtab: navbar
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-components.html %}
|
||||||
|
|
||||||
|
{% capture navbar_example %}
|
||||||
|
{% include navbar.html id="Example" %}
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_brand_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<!-- navbar items, navbar burger ... -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_burger_example %}
|
||||||
|
<div class="navbar-burger">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_brand_items_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item" href="{{ site.url }}">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-burger">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_menu_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<!-- navbar items, nav burger ... -->
|
||||||
|
</div>
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<!-- navbar start, navbar end -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_menu_active_example %}
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<!-- hidden on mobile -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-menu is-active">
|
||||||
|
<!-- shown on mobile -->
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_start_end_example %}
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<!-- navbar items -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
|
<!-- navbar items -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_link_example %}
|
||||||
|
<a class="navbar-item">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_brand_example %}
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_dropdown_example %}
|
||||||
|
<div class="navbar-item has-dropdown">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<!-- Other navbar items -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_dropdown_bis_example %}
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_item_other_example %}
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<p class="control">
|
||||||
|
<a id="class="button">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
<span>Tweet</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_transparent_example %}
|
||||||
|
{% include navbar.html transparent=true boxed=true id="TransparentExample" %}
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-dropdown">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_hover_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_active_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_default_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-body">
|
||||||
|
<p class="title">
|
||||||
|
Documentation
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Everything you need to <strong>create a website</strong> with Bulma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_boxed_example %}
|
||||||
|
<nav class="navbar is-transparent">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown is-boxed">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-body">
|
||||||
|
<p class="title">
|
||||||
|
Documentation
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Everything you need to <strong>create a website</strong> with Bulma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_dropdown_item_active_example %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-item has-dropdown is-active">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item is-active">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
Version {{ site.version }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-body">
|
||||||
|
<p class="title">
|
||||||
|
Documentation
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Everything you need to <strong>create a website</strong> with Bulma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture navbar_divider_example %}
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="columns" style="margin-bottom: -0.75rem !important;">
|
||||||
|
<div class="column">
|
||||||
|
<h1 class="title">Navbar</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column is-narrow">
|
||||||
|
<p class="content">
|
||||||
|
<span class="tag is-success">New!</span>
|
||||||
|
<span class="tag is-info">0.5.0</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="message is-success">
|
||||||
|
<div class="message-body">
|
||||||
|
<p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar</code> the <strong>main</strong> container
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-item</code> each <strong>single item</strong> of the navbar, which can either be a <code>a</code> or a <code>div</code>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{navbar_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar brand</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-brand</code> is the left side of the navbar. It can contain:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
a number of <code>navbar-item</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
the <code>navbar-burger</code> as last child
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{navbar_brand_items_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar burger</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-burger</code> is a hamburger menu that only appears on <strong>mobile</strong>. It has to appear as the last child of <code>navbar-brand</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
<div class="navbar-burger" style="display: flex;">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can add the modifier class <code>is-active</code> to turn it into a cross.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
<div class="navbar-burger is-active" style="display: flex;">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar menu</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-menu</code> is the <strong>counterpart</strong> of the navbar brand. As such, it must appear as a direct child of <code>navbar-brand</code>, as a sibling of <code>navbar-brand</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-start</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-end</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar start and navbar end</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
On desktop {% include bp/desktop.html %}:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-start</code> will appear on the <strong>left</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-end</code> will appear on the <strong>right</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Each of them can contain any number of <code>navbar-item</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Navbar item</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
A <code>navbar-item</code> is a repeatable element that can be:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
a navigation <strong>link</strong>
|
||||||
|
{% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a container for the <strong>brand logo</strong>
|
||||||
|
{% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
the <strong>parent</strong> of a dropdown menu
|
||||||
|
{% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a child of a <strong>navbar dropdown</strong>
|
||||||
|
{% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a container for almost <strong>anything</strong> you want, like a <code>field</code>
|
||||||
|
{% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
It can either be an anchor tag <code><a></code> or a <code><div></code>, as a <strong>direct child</strong> of either:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-brand</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-start</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-end</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-dropdown</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 id="transparent-navbar" class="title">Transparent navbar</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifer on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{navbar_transparent_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 id="dropdown-menu" class="title">Dropdown menu</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar-item</code> with the <code>has-dropdown</code> modifier
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-link</code> which contains the dropdown arrow
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the parent <code>navbar-item</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message is-success">
|
||||||
|
<p class="message-body">
|
||||||
|
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_hover_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_active_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Styles for the dropdown menu
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
By default, the <code>navbar-dropdown</code> has:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
a grey <code>border-top</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a <code>border-radius</code> at both bottom corners
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_default_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
When having a <a href="#transparent-navbar">transparent navbar</a>, it is preferable to use the boxed version of the dropdown, by using the <code>is-boxed</code> modifier.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
the grey border is <strong>removed</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a slight <strong>inner shadow</strong> is added
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
all corners are <strong>rounded</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
the hover/active state is <strong>animated</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_boxed_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Active dropdown navbar item
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="example is-paddingless">
|
||||||
|
{{ navbar_dropdown_item_active_example }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="title is-4">
|
||||||
|
Dropdown divider
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -236,12 +236,7 @@ doc-subtab: button
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p id="static-button" style="margin-bottom: 0.5rem;">
|
<h4 id="static-button" class="subtitle">
|
||||||
<span class="tag is-success">New!</span>
|
|
||||||
<span class="tag is-info">0.4.2</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h4 class="subtitle">
|
|
||||||
Static
|
Static
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
@ -252,6 +247,10 @@ doc-subtab: button
|
|||||||
<div class="column">
|
<div class="column">
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
<span class="tag is-success">New!</span>
|
||||||
|
<span class="tag is-info">0.4.2</span>
|
||||||
|
</p>
|
||||||
<p>
|
<p>
|
||||||
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/elements/form#form-addons">form addons</a>.
|
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/elements/form#form-addons">form addons</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -803,12 +803,11 @@ doc-subtab: form
|
|||||||
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p style="margin-bottom: 0.5rem;">
|
<div class="content">
|
||||||
|
<p>
|
||||||
<span class="tag is-success">New!</span>
|
<span class="tag is-success">New!</span>
|
||||||
<span class="tag is-info">0.4.2</span>
|
<span class="tag is-info">0.4.2</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1144,7 +1143,8 @@ doc-subtab: form
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
<span class="tag is-success">New!</span>
|
<span class="tag is-success">New!</span>
|
||||||
<br>
|
</p>
|
||||||
|
<p>
|
||||||
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
|
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
|
|||||||
@ -47,7 +47,8 @@ doc-subtab: table
|
|||||||
<p>
|
<p>
|
||||||
<span class="tag is-success">New!</span>
|
<span class="tag is-success">New!</span>
|
||||||
<span class="tag is-info">0.4.2</span>
|
<span class="tag is-info">0.4.2</span>
|
||||||
<br>
|
</p>
|
||||||
|
<p>
|
||||||
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,13 +3,11 @@ layout: default
|
|||||||
route: index
|
route: index
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="hero is-medium has-text-centered">
|
<div class="container">
|
||||||
<div class="hero-head">
|
{% include navbar.html id="Index" transparent=true boxed=true %}
|
||||||
<div class="container">
|
</div>
|
||||||
{% include header.html %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<section class="hero is-medium has-text-centered">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p id="b">
|
<p id="b">
|
||||||
|
|||||||
9214
docs/javascript/Chart.js
vendored
9214
docs/javascript/Chart.js
vendored
File diff suppressed because it is too large
Load Diff
7
docs/javascript/clipboard.min.js
vendored
7
docs/javascript/clipboard.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,46 +0,0 @@
|
|||||||
jQuery(document).ready(function ($) {
|
|
||||||
|
|
||||||
var $grid = $('#grid');
|
|
||||||
var $columns = $grid.children('.column');
|
|
||||||
var showing = 5;
|
|
||||||
var $markup = $('#markup code');
|
|
||||||
var $message = $('#message');
|
|
||||||
var $add = $('#add');
|
|
||||||
var $remove = $('#remove');
|
|
||||||
|
|
||||||
function showColumns() {
|
|
||||||
if (showing === 13) {
|
|
||||||
$message.show();
|
|
||||||
} else {
|
|
||||||
$message.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
showing = Math.min(Math.max(parseInt(showing), 2), 12);
|
|
||||||
|
|
||||||
$columns.hide();
|
|
||||||
$columns.slice(0, showing).show();
|
|
||||||
|
|
||||||
$markup.html('<span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns"</span><span class="nt">></span>');
|
|
||||||
$markup.append('\n');
|
|
||||||
|
|
||||||
for(i = 0; i < showing; i++) {
|
|
||||||
$markup.append(' <span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>');
|
|
||||||
$markup.append(i + 1);
|
|
||||||
$markup.append('<span class="nt"></div></span>');
|
|
||||||
$markup.append('\n');
|
|
||||||
}
|
|
||||||
|
|
||||||
$markup.append('<span class="nt"></div></span>');
|
|
||||||
}
|
|
||||||
|
|
||||||
$add.click(function() {
|
|
||||||
showing++;
|
|
||||||
showColumns();
|
|
||||||
});
|
|
||||||
|
|
||||||
$remove.click(function() {
|
|
||||||
showing--;
|
|
||||||
showColumns();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
4
docs/javascript/jquery-2.2.0.min.js
vendored
4
docs/javascript/jquery-2.2.0.min.js
vendored
File diff suppressed because one or more lines are too long
66
docs/lib/bulma.js
Normal file
66
docs/lib/bulma.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
jQuery(document).ready(function ($) {
|
||||||
|
|
||||||
|
var $toggle = $('#nav-toggle');
|
||||||
|
var $menu = $('#nav-menu');
|
||||||
|
|
||||||
|
$toggle.click(function () {
|
||||||
|
$(this).toggleClass('is-active');
|
||||||
|
$menu.toggleClass('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.modal-button').click(function () {
|
||||||
|
var target = $(this).data('target');
|
||||||
|
$('html').addClass('is-clipped');
|
||||||
|
$(target).addClass('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.modal-background, .modal-close').click(function () {
|
||||||
|
$('html').removeClass('is-clipped');
|
||||||
|
$(this).parent().removeClass('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.modal-card-head .delete, .modal-card-foot .button').click(function () {
|
||||||
|
$('html').removeClass('is-clipped');
|
||||||
|
$('#modal-ter').removeClass('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('keyup', function (e) {
|
||||||
|
if (e.keyCode == 27) {
|
||||||
|
$('html').removeClass('is-clipped');
|
||||||
|
$('.modal').removeClass('is-active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var $highlights = $('.highlight');
|
||||||
|
|
||||||
|
$highlights.each(function () {
|
||||||
|
var $el = $(this);
|
||||||
|
var copy = '<button class="copy">Copy</button>';
|
||||||
|
var expand = '<button class="expand">Expand</button>';
|
||||||
|
$el.append(copy);
|
||||||
|
|
||||||
|
if ($el.find('pre code').innerHeight() > 600) {
|
||||||
|
$el.append(expand);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var $highlightButtons = $('.highlight .copy, .highlight .expand');
|
||||||
|
|
||||||
|
$highlightButtons.hover(function () {
|
||||||
|
$(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
|
||||||
|
}, function () {
|
||||||
|
$(this).parent().css('box-shadow', 'none');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.highlight .expand').click(function () {
|
||||||
|
$(this).parent().children('pre').css('max-height', 'none');
|
||||||
|
});
|
||||||
|
|
||||||
|
new Clipboard('.copy', {
|
||||||
|
target: function target(trigger) {
|
||||||
|
return trigger.previousSibling;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
222
docs/lib/clipboard.min.js
vendored
Normal file
222
docs/lib/clipboard.min.js
vendored
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
|
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* clipboard.js v1.5.9
|
||||||
|
* https://zenorocha.github.io/clipboard.js
|
||||||
|
*
|
||||||
|
* Licensed MIT © Zeno Rocha
|
||||||
|
*/
|
||||||
|
!function (t) {
|
||||||
|
if ("object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) && "undefined" != typeof module) module.exports = t();else if ("function" == typeof define && define.amd) define([], t);else {
|
||||||
|
var e;e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : this, e.Clipboard = t();
|
||||||
|
}
|
||||||
|
}(function () {
|
||||||
|
var t, e, n;return function t(e, n, o) {
|
||||||
|
function r(c, s) {
|
||||||
|
if (!n[c]) {
|
||||||
|
if (!e[c]) {
|
||||||
|
var a = "function" == typeof require && require;if (!s && a) return a(c, !0);if (i) return i(c, !0);var l = new Error("Cannot find module '" + c + "'");throw l.code = "MODULE_NOT_FOUND", l;
|
||||||
|
}var u = n[c] = { exports: {} };e[c][0].call(u.exports, function (t) {
|
||||||
|
var n = e[c][1][t];return r(n ? n : t);
|
||||||
|
}, u, u.exports, t, e, n, o);
|
||||||
|
}return n[c].exports;
|
||||||
|
}for (var i = "function" == typeof require && require, c = 0; c < o.length; c++) {
|
||||||
|
r(o[c]);
|
||||||
|
}return r;
|
||||||
|
}({ 1: [function (t, e, n) {
|
||||||
|
var o = t("matches-selector");e.exports = function (t, e, n) {
|
||||||
|
for (var r = n ? t : t.parentNode; r && r !== document;) {
|
||||||
|
if (o(r, e)) return r;r = r.parentNode;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, { "matches-selector": 5 }], 2: [function (t, e, n) {
|
||||||
|
function o(t, e, n, o, i) {
|
||||||
|
var c = r.apply(this, arguments);return t.addEventListener(n, c, i), { destroy: function destroy() {
|
||||||
|
t.removeEventListener(n, c, i);
|
||||||
|
} };
|
||||||
|
}function r(t, e, n, o) {
|
||||||
|
return function (n) {
|
||||||
|
n.delegateTarget = i(n.target, e, !0), n.delegateTarget && o.call(t, n);
|
||||||
|
};
|
||||||
|
}var i = t("closest");e.exports = o;
|
||||||
|
}, { closest: 1 }], 3: [function (t, e, n) {
|
||||||
|
n.node = function (t) {
|
||||||
|
return void 0 !== t && t instanceof HTMLElement && 1 === t.nodeType;
|
||||||
|
}, n.nodeList = function (t) {
|
||||||
|
var e = Object.prototype.toString.call(t);return void 0 !== t && ("[object NodeList]" === e || "[object HTMLCollection]" === e) && "length" in t && (0 === t.length || n.node(t[0]));
|
||||||
|
}, n.string = function (t) {
|
||||||
|
return "string" == typeof t || t instanceof String;
|
||||||
|
}, n.fn = function (t) {
|
||||||
|
var e = Object.prototype.toString.call(t);return "[object Function]" === e;
|
||||||
|
};
|
||||||
|
}, {}], 4: [function (t, e, n) {
|
||||||
|
function o(t, e, n) {
|
||||||
|
if (!t && !e && !n) throw new Error("Missing required arguments");if (!s.string(e)) throw new TypeError("Second argument must be a String");if (!s.fn(n)) throw new TypeError("Third argument must be a Function");if (s.node(t)) return r(t, e, n);if (s.nodeList(t)) return i(t, e, n);if (s.string(t)) return c(t, e, n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");
|
||||||
|
}function r(t, e, n) {
|
||||||
|
return t.addEventListener(e, n), { destroy: function destroy() {
|
||||||
|
t.removeEventListener(e, n);
|
||||||
|
} };
|
||||||
|
}function i(t, e, n) {
|
||||||
|
return Array.prototype.forEach.call(t, function (t) {
|
||||||
|
t.addEventListener(e, n);
|
||||||
|
}), { destroy: function destroy() {
|
||||||
|
Array.prototype.forEach.call(t, function (t) {
|
||||||
|
t.removeEventListener(e, n);
|
||||||
|
});
|
||||||
|
} };
|
||||||
|
}function c(t, e, n) {
|
||||||
|
return a(document.body, t, e, n);
|
||||||
|
}var s = t("./is"),
|
||||||
|
a = t("delegate");e.exports = o;
|
||||||
|
}, { "./is": 3, delegate: 2 }], 5: [function (t, e, n) {
|
||||||
|
function o(t, e) {
|
||||||
|
if (i) return i.call(t, e);for (var n = t.parentNode.querySelectorAll(e), o = 0; o < n.length; ++o) {
|
||||||
|
if (n[o] == t) return !0;
|
||||||
|
}return !1;
|
||||||
|
}var r = Element.prototype,
|
||||||
|
i = r.matchesSelector || r.webkitMatchesSelector || r.mozMatchesSelector || r.msMatchesSelector || r.oMatchesSelector;e.exports = o;
|
||||||
|
}, {}], 6: [function (t, e, n) {
|
||||||
|
function o(t) {
|
||||||
|
var e;if ("INPUT" === t.nodeName || "TEXTAREA" === t.nodeName) t.focus(), t.setSelectionRange(0, t.value.length), e = t.value;else {
|
||||||
|
t.hasAttribute("contenteditable") && t.focus();var n = window.getSelection(),
|
||||||
|
o = document.createRange();o.selectNodeContents(t), n.removeAllRanges(), n.addRange(o), e = n.toString();
|
||||||
|
}return e;
|
||||||
|
}e.exports = o;
|
||||||
|
}, {}], 7: [function (t, e, n) {
|
||||||
|
function o() {}o.prototype = { on: function on(t, e, n) {
|
||||||
|
var o = this.e || (this.e = {});return (o[t] || (o[t] = [])).push({ fn: e, ctx: n }), this;
|
||||||
|
}, once: function once(t, e, n) {
|
||||||
|
function o() {
|
||||||
|
r.off(t, o), e.apply(n, arguments);
|
||||||
|
}var r = this;return o._ = e, this.on(t, o, n);
|
||||||
|
}, emit: function emit(t) {
|
||||||
|
var e = [].slice.call(arguments, 1),
|
||||||
|
n = ((this.e || (this.e = {}))[t] || []).slice(),
|
||||||
|
o = 0,
|
||||||
|
r = n.length;for (o; r > o; o++) {
|
||||||
|
n[o].fn.apply(n[o].ctx, e);
|
||||||
|
}return this;
|
||||||
|
}, off: function off(t, e) {
|
||||||
|
var n = this.e || (this.e = {}),
|
||||||
|
o = n[t],
|
||||||
|
r = [];if (o && e) for (var i = 0, c = o.length; c > i; i++) {
|
||||||
|
o[i].fn !== e && o[i].fn._ !== e && r.push(o[i]);
|
||||||
|
}return r.length ? n[t] = r : delete n[t], this;
|
||||||
|
} }, e.exports = o;
|
||||||
|
}, {}], 8: [function (e, n, o) {
|
||||||
|
!function (r, i) {
|
||||||
|
if ("function" == typeof t && t.amd) t(["module", "select"], i);else if ("undefined" != typeof o) i(n, e("select"));else {
|
||||||
|
var c = { exports: {} };i(c, r.select), r.clipboardAction = c.exports;
|
||||||
|
}
|
||||||
|
}(this, function (t, e) {
|
||||||
|
"use strict";
|
||||||
|
function n(t) {
|
||||||
|
return t && t.__esModule ? t : { "default": t };
|
||||||
|
}function o(t, e) {
|
||||||
|
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
|
||||||
|
}var r = n(e),
|
||||||
|
i = "function" == typeof Symbol && "symbol" == _typeof(Symbol.iterator) ? function (t) {
|
||||||
|
return typeof t === "undefined" ? "undefined" : _typeof(t);
|
||||||
|
} : function (t) {
|
||||||
|
return t && "function" == typeof Symbol && t.constructor === Symbol ? "symbol" : typeof t === "undefined" ? "undefined" : _typeof(t);
|
||||||
|
},
|
||||||
|
c = function () {
|
||||||
|
function t(t, e) {
|
||||||
|
for (var n = 0; n < e.length; n++) {
|
||||||
|
var o = e[n];o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o);
|
||||||
|
}
|
||||||
|
}return function (e, n, o) {
|
||||||
|
return n && t(e.prototype, n), o && t(e, o), e;
|
||||||
|
};
|
||||||
|
}(),
|
||||||
|
s = function () {
|
||||||
|
function t(e) {
|
||||||
|
o(this, t), this.resolveOptions(e), this.initSelection();
|
||||||
|
}return t.prototype.resolveOptions = function t() {
|
||||||
|
var e = arguments.length <= 0 || void 0 === arguments[0] ? {} : arguments[0];this.action = e.action, this.emitter = e.emitter, this.target = e.target, this.text = e.text, this.trigger = e.trigger, this.selectedText = "";
|
||||||
|
}, t.prototype.initSelection = function t() {
|
||||||
|
if (this.text && this.target) throw new Error('Multiple attributes declared, use either "target" or "text"');if (this.text) this.selectFake();else {
|
||||||
|
if (!this.target) throw new Error('Missing required attributes, use either "target" or "text"');this.selectTarget();
|
||||||
|
}
|
||||||
|
}, t.prototype.selectFake = function t() {
|
||||||
|
var e = this,
|
||||||
|
n = "rtl" == document.documentElement.getAttribute("dir");this.removeFake(), this.fakeHandler = document.body.addEventListener("click", function () {
|
||||||
|
return e.removeFake();
|
||||||
|
}), this.fakeElem = document.createElement("textarea"), this.fakeElem.style.fontSize = "12pt", this.fakeElem.style.border = "0", this.fakeElem.style.padding = "0", this.fakeElem.style.margin = "0", this.fakeElem.style.position = "fixed", this.fakeElem.style[n ? "right" : "left"] = "-9999px", this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + "px", this.fakeElem.setAttribute("readonly", ""), this.fakeElem.value = this.text, document.body.appendChild(this.fakeElem), this.selectedText = (0, r.default)(this.fakeElem), this.copyText();
|
||||||
|
}, t.prototype.removeFake = function t() {
|
||||||
|
this.fakeHandler && (document.body.removeEventListener("click"), this.fakeHandler = null), this.fakeElem && (document.body.removeChild(this.fakeElem), this.fakeElem = null);
|
||||||
|
}, t.prototype.selectTarget = function t() {
|
||||||
|
this.selectedText = (0, r.default)(this.target), this.copyText();
|
||||||
|
}, t.prototype.copyText = function t() {
|
||||||
|
var e = void 0;try {
|
||||||
|
e = document.execCommand(this.action);
|
||||||
|
} catch (n) {
|
||||||
|
e = !1;
|
||||||
|
}this.handleResult(e);
|
||||||
|
}, t.prototype.handleResult = function t(e) {
|
||||||
|
e ? this.emitter.emit("success", { action: this.action, text: this.selectedText, trigger: this.trigger, clearSelection: this.clearSelection.bind(this) }) : this.emitter.emit("error", { action: this.action, trigger: this.trigger, clearSelection: this.clearSelection.bind(this) });
|
||||||
|
}, t.prototype.clearSelection = function t() {
|
||||||
|
this.target && this.target.blur(), window.getSelection().removeAllRanges();
|
||||||
|
}, t.prototype.destroy = function t() {
|
||||||
|
this.removeFake();
|
||||||
|
}, c(t, [{ key: "action", set: function t() {
|
||||||
|
var e = arguments.length <= 0 || void 0 === arguments[0] ? "copy" : arguments[0];if (this._action = e, "copy" !== this._action && "cut" !== this._action) throw new Error('Invalid "action" value, use either "copy" or "cut"');
|
||||||
|
}, get: function t() {
|
||||||
|
return this._action;
|
||||||
|
} }, { key: "target", set: function t(e) {
|
||||||
|
if (void 0 !== e) {
|
||||||
|
if (!e || "object" !== ("undefined" == typeof e ? "undefined" : i(e)) || 1 !== e.nodeType) throw new Error('Invalid "target" value, use a valid Element');this._target = e;
|
||||||
|
}
|
||||||
|
}, get: function t() {
|
||||||
|
return this._target;
|
||||||
|
} }]), t;
|
||||||
|
}();t.exports = s;
|
||||||
|
});
|
||||||
|
}, { select: 6 }], 9: [function (e, n, o) {
|
||||||
|
!function (r, i) {
|
||||||
|
if ("function" == typeof t && t.amd) t(["module", "./clipboard-action", "tiny-emitter", "good-listener"], i);else if ("undefined" != typeof o) i(n, e("./clipboard-action"), e("tiny-emitter"), e("good-listener"));else {
|
||||||
|
var c = { exports: {} };i(c, r.clipboardAction, r.tinyEmitter, r.goodListener), r.clipboard = c.exports;
|
||||||
|
}
|
||||||
|
}(this, function (t, e, n, o) {
|
||||||
|
"use strict";
|
||||||
|
function r(t) {
|
||||||
|
return t && t.__esModule ? t : { "default": t };
|
||||||
|
}function i(t, e) {
|
||||||
|
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
|
||||||
|
}function c(t, e) {
|
||||||
|
if (!t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return !e || "object" != (typeof e === "undefined" ? "undefined" : _typeof(e)) && "function" != typeof e ? t : e;
|
||||||
|
}function s(t, e) {
|
||||||
|
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function, not " + (typeof e === "undefined" ? "undefined" : _typeof(e)));t.prototype = Object.create(e && e.prototype, { constructor: { value: t, enumerable: !1, writable: !0, configurable: !0 } }), e && (Object.setPrototypeOf ? Object.setPrototypeOf(t, e) : _defaults(t, e));
|
||||||
|
}function a(t, e) {
|
||||||
|
var n = "data-clipboard-" + t;if (e.hasAttribute(n)) return e.getAttribute(n);
|
||||||
|
}var l = r(e),
|
||||||
|
u = r(n),
|
||||||
|
f = r(o),
|
||||||
|
d = function (t) {
|
||||||
|
function e(n, o) {
|
||||||
|
i(this, e);var r = c(this, t.call(this));return r.resolveOptions(o), r.listenClick(n), r;
|
||||||
|
}return s(e, t), e.prototype.resolveOptions = function t() {
|
||||||
|
var e = arguments.length <= 0 || void 0 === arguments[0] ? {} : arguments[0];this.action = "function" == typeof e.action ? e.action : this.defaultAction, this.target = "function" == typeof e.target ? e.target : this.defaultTarget, this.text = "function" == typeof e.text ? e.text : this.defaultText;
|
||||||
|
}, e.prototype.listenClick = function t(e) {
|
||||||
|
var n = this;this.listener = (0, f.default)(e, "click", function (t) {
|
||||||
|
return n.onClick(t);
|
||||||
|
});
|
||||||
|
}, e.prototype.onClick = function t(e) {
|
||||||
|
var n = e.delegateTarget || e.currentTarget;this.clipboardAction && (this.clipboardAction = null), this.clipboardAction = new l.default({ action: this.action(n), target: this.target(n), text: this.text(n), trigger: n, emitter: this });
|
||||||
|
}, e.prototype.defaultAction = function t(e) {
|
||||||
|
return a("action", e);
|
||||||
|
}, e.prototype.defaultTarget = function t(e) {
|
||||||
|
var n = a("target", e);return n ? document.querySelector(n) : void 0;
|
||||||
|
}, e.prototype.defaultText = function t(e) {
|
||||||
|
return a("text", e);
|
||||||
|
}, e.prototype.destroy = function t() {
|
||||||
|
this.listener.destroy(), this.clipboardAction && (this.clipboardAction.destroy(), this.clipboardAction = null);
|
||||||
|
}, e;
|
||||||
|
}(u.default);t.exports = d;
|
||||||
|
});
|
||||||
|
}, { "./clipboard-action": 8, "good-listener": 4, "tiny-emitter": 7 }] }, {}, [9])(9);
|
||||||
|
});
|
||||||
51
docs/lib/index.js
Normal file
51
docs/lib/index.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
|
var $grid = document.getElementById('grid');
|
||||||
|
var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
|
||||||
|
var $markup = document.querySelector('#markup code');
|
||||||
|
var $message = document.getElementById('message');
|
||||||
|
var $add = document.getElementById('add');
|
||||||
|
var $remove = document.getElementById('remove');
|
||||||
|
var showing = 5;
|
||||||
|
|
||||||
|
function showColumns() {
|
||||||
|
if (showing === 13) {
|
||||||
|
$message.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
$message.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
showing = Math.min(Math.max(parseInt(showing), 2), 12);
|
||||||
|
|
||||||
|
$columns.forEach(function ($el) {
|
||||||
|
$el.style.display = 'none';
|
||||||
|
});
|
||||||
|
$columns.slice(0, showing).forEach(function ($el) {
|
||||||
|
$el.style.display = 'block';
|
||||||
|
});
|
||||||
|
|
||||||
|
$markup.innerHTML = '<span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns"</span><span class="nt">></span>';
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '\n');
|
||||||
|
|
||||||
|
for (var i = 0; i < showing; i++) {
|
||||||
|
$markup.insertAdjacentHTML('beforeend', ' <span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>');
|
||||||
|
$markup.insertAdjacentHTML('beforeend', i + 1);
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '<span class="nt"></div></span>');
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
$markup.insertAdjacentHTML('beforeend', '<span class="nt"></div></span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
$add.addEventListener('click', function () {
|
||||||
|
showing++;
|
||||||
|
showColumns();
|
||||||
|
});
|
||||||
|
|
||||||
|
$remove.addEventListener('click', function () {
|
||||||
|
showing--;
|
||||||
|
showColumns();
|
||||||
|
});
|
||||||
|
});
|
||||||
57
docs/lib/javascript/main.js
Normal file
57
docs/lib/javascript/main.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
|
// Navbar burger menu
|
||||||
|
|
||||||
|
var $navBurger = document.getElementById('navBurger');
|
||||||
|
var $navMenu = document.getElementById('navMenu');
|
||||||
|
|
||||||
|
if ($navBurger) {
|
||||||
|
$navBurger.addEventListener('click', function () {
|
||||||
|
$navBurger.classList.toggle('is-active');
|
||||||
|
$navMenu.classList.toggle('is-active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modals
|
||||||
|
|
||||||
|
var $html = document.documentElement;
|
||||||
|
var $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
|
||||||
|
var $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
|
||||||
|
var $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0);
|
||||||
|
|
||||||
|
if ($modalButtons.length > 0) {
|
||||||
|
$modalButtons.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
var target = $el.dataset.target;
|
||||||
|
console.log('target', target);
|
||||||
|
var $target = document.getElementById(target);
|
||||||
|
$html.classList.add('is-clipped');
|
||||||
|
$target.classList.add('is-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($modalCloses.length > 0) {
|
||||||
|
$modalCloses.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
$html.classList.remove('is-clipped');
|
||||||
|
closeModals();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', function (e) {
|
||||||
|
if (e.keyCode === 27) {
|
||||||
|
$html.classList.remove('is-clipped');
|
||||||
|
closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function closeModals() {
|
||||||
|
$modals.forEach(function ($el) {
|
||||||
|
$el.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
116
docs/lib/main.js
Normal file
116
docs/lib/main.js
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
|
// Toggles
|
||||||
|
|
||||||
|
var $burgers = getAll('.burger');
|
||||||
|
var $fries = getAll('.fries');
|
||||||
|
|
||||||
|
if ($burgers.length > 0) {
|
||||||
|
$burgers.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
var target = $el.dataset.target;
|
||||||
|
var $target = document.getElementById(target);
|
||||||
|
$el.classList.toggle('is-active');
|
||||||
|
$target.classList.toggle('is-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modals
|
||||||
|
|
||||||
|
var $html = document.documentElement;
|
||||||
|
var $modals = getAll('.modal');
|
||||||
|
var $modalButtons = getAll('.modal-button');
|
||||||
|
var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
|
||||||
|
|
||||||
|
if ($modalButtons.length > 0) {
|
||||||
|
$modalButtons.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
var target = $el.dataset.target;
|
||||||
|
var $target = document.getElementById(target);
|
||||||
|
$html.classList.add('is-clipped');
|
||||||
|
$target.classList.add('is-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($modalCloses.length > 0) {
|
||||||
|
$modalCloses.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
$html.classList.remove('is-clipped');
|
||||||
|
closeModals();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', function (e) {
|
||||||
|
if (e.keyCode === 27) {
|
||||||
|
$html.classList.remove('is-clipped');
|
||||||
|
closeModals();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function closeModals() {
|
||||||
|
$modals.forEach(function ($el) {
|
||||||
|
$el.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clipboard
|
||||||
|
|
||||||
|
var $highlights = getAll('.highlight');
|
||||||
|
var itemsProcessed = 0;
|
||||||
|
|
||||||
|
if ($highlights.length > 0) {
|
||||||
|
$highlights.forEach(function ($el) {
|
||||||
|
var copy = '<button class="copy">Copy</button>';
|
||||||
|
var expand = '<button class="expand">Expand</button>';
|
||||||
|
$el.insertAdjacentHTML('beforeend', copy);
|
||||||
|
|
||||||
|
if ($el.firstElementChild.scrollHeight > 320) {
|
||||||
|
$el.insertAdjacentHTML('beforeend', expand);
|
||||||
|
}
|
||||||
|
|
||||||
|
itemsProcessed++;
|
||||||
|
if (itemsProcessed === $highlights.length) {
|
||||||
|
addHighlightControls();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addHighlightControls() {
|
||||||
|
var $highlightButtons = getAll('.highlight .copy, .highlight .expand');
|
||||||
|
|
||||||
|
$highlightButtons.forEach(function ($el) {
|
||||||
|
$el.addEventListener('mouseenter', function () {
|
||||||
|
$el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63';
|
||||||
|
});
|
||||||
|
|
||||||
|
$el.addEventListener('mouseleave', function () {
|
||||||
|
$el.parentNode.style.boxShadow = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var $highlightExpands = getAll('.highlight .expand');
|
||||||
|
|
||||||
|
$highlightExpands.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
$el.parentNode.firstElementChild.style.maxHeight = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
new Clipboard('.copy', {
|
||||||
|
target: function target(trigger) {
|
||||||
|
return trigger.previousSibling;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
|
||||||
|
function getAll(selector) {
|
||||||
|
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
18
docs/package.json
Normal file
18
docs/package.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "bulma-docs",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.html",
|
||||||
|
"author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-cli": "^6.24.1",
|
||||||
|
"babel-preset-env": "^1.5.2",
|
||||||
|
"babel-preset-es2015-ie": "^6.7.0",
|
||||||
|
"i": "^0.3.5",
|
||||||
|
"npm": "^5.0.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "babel _javascript --out-dir lib",
|
||||||
|
"watch": "npm run build -- --watch"
|
||||||
|
}
|
||||||
|
}
|
||||||
7
docs/vendor/clipboard-1.7.1.min.js
vendored
Normal file
7
docs/vendor/clipboard-1.7.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2913
docs/yarn.lock
Normal file
2913
docs/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@ -35,6 +35,7 @@ body
|
|||||||
font-size: 1rem
|
font-size: 1rem
|
||||||
font-weight: $weight-normal
|
font-weight: $weight-normal
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
|
overflow-x: hidden
|
||||||
|
|
||||||
// Inline
|
// Inline
|
||||||
|
|
||||||
@ -68,7 +69,7 @@ input[type="radio"]
|
|||||||
vertical-align: baseline
|
vertical-align: baseline
|
||||||
|
|
||||||
small
|
small
|
||||||
font-size: 0.8em
|
font-size: 0.875em
|
||||||
|
|
||||||
span
|
span
|
||||||
font-style: inherit
|
font-style: inherit
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
@import "message.sass"
|
@import "message.sass"
|
||||||
@import "modal.sass"
|
@import "modal.sass"
|
||||||
@import "nav.sass"
|
@import "nav.sass"
|
||||||
|
@import "navbar.sass"
|
||||||
@import "pagination.sass"
|
@import "pagination.sass"
|
||||||
@import "panel.sass"
|
@import "panel.sass"
|
||||||
@import "tabs.sass"
|
@import "tabs.sass"
|
||||||
208
sass/components/navbar.sass
Normal file
208
sass/components/navbar.sass
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
$navbar-background: $white !default
|
||||||
|
$navbar-height: 3.25rem !default
|
||||||
|
|
||||||
|
$navbar-item: $grey-dark !default
|
||||||
|
$navbar-item-hover: $black !default
|
||||||
|
$navbar-item-hover-background: $background !default
|
||||||
|
$navbar-item-active: $black !default
|
||||||
|
$navbar-item-active-background: transparent !default
|
||||||
|
|
||||||
|
$navbar-dropdown-background: $white !default
|
||||||
|
$navbar-dropdown-border: $border !default
|
||||||
|
$navbar-dropdown-offset: -4px !default
|
||||||
|
$navbar-dropdown-arrow: $link !default
|
||||||
|
$navbar-dropdown-radius: $radius-large !default
|
||||||
|
$navbar-dropdown-z: 20 !default
|
||||||
|
|
||||||
|
$navbar-dropdown-item-hover: $black !default
|
||||||
|
$navbar-dropdown-item-hover-background: $background !default
|
||||||
|
$navbar-dropdown-item-active: $primary !default
|
||||||
|
$navbar-dropdown-item-active-background: $background !default
|
||||||
|
|
||||||
|
$navbar-divider-background: $border !default
|
||||||
|
|
||||||
|
.navbar
|
||||||
|
background-color: $navbar-background
|
||||||
|
min-height: $navbar-height
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.navbar-brand
|
||||||
|
align-items: stretch
|
||||||
|
height: $navbar-height
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
.navbar-burger
|
||||||
|
+hamburger($navbar-height)
|
||||||
|
margin-left: auto
|
||||||
|
|
||||||
|
.navbar-menu
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.navbar-item,
|
||||||
|
.navbar-link
|
||||||
|
color: $navbar-item
|
||||||
|
display: block
|
||||||
|
line-height: 1.5
|
||||||
|
padding: 0.5rem 1rem
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
a.navbar-item,
|
||||||
|
.navbar-link
|
||||||
|
&:hover,
|
||||||
|
&.is-active
|
||||||
|
background-color: $navbar-item-hover-background
|
||||||
|
color: $navbar-item-hover
|
||||||
|
|
||||||
|
.navbar-item
|
||||||
|
flex-grow: 0
|
||||||
|
flex-shrink: 0
|
||||||
|
img
|
||||||
|
max-height: 1.75rem
|
||||||
|
&.has-dropdown
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
.navbar-content
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 1
|
||||||
|
|
||||||
|
.navbar-link
|
||||||
|
padding-right: 2.5em
|
||||||
|
|
||||||
|
.navbar-dropdown
|
||||||
|
font-size: 0.875rem
|
||||||
|
padding-bottom: 0.5rem
|
||||||
|
padding-top: 0.5rem
|
||||||
|
.navbar-item
|
||||||
|
padding-left: 1.5rem
|
||||||
|
padding-right: 1.5rem
|
||||||
|
|
||||||
|
.navbar-divider
|
||||||
|
background-color: $navbar-divider-background
|
||||||
|
border: none
|
||||||
|
display: none
|
||||||
|
height: 1px
|
||||||
|
margin: 0.5rem 0
|
||||||
|
|
||||||
|
+touch
|
||||||
|
.navbar-brand
|
||||||
|
.navbar-item
|
||||||
|
align-items: center
|
||||||
|
display: flex
|
||||||
|
.navbar-menu
|
||||||
|
box-shadow: 0 8px 16px rgba($black, 0.1)
|
||||||
|
padding: 0.5rem 0
|
||||||
|
&.is-active
|
||||||
|
display: block
|
||||||
|
|
||||||
|
+desktop
|
||||||
|
.navbar,
|
||||||
|
.navbar-menu,
|
||||||
|
.navbar-start,
|
||||||
|
.navbar-end
|
||||||
|
align-items: stretch
|
||||||
|
display: flex
|
||||||
|
.navbar
|
||||||
|
height: $navbar-height
|
||||||
|
&.is-transparent
|
||||||
|
a.navbar-item,
|
||||||
|
.navbar-link
|
||||||
|
&:hover,
|
||||||
|
&.is-active
|
||||||
|
background-color: transparent
|
||||||
|
.navbar-item.has-dropdown
|
||||||
|
&.is-active,
|
||||||
|
&.is-hoverable:hover
|
||||||
|
.navbar-link
|
||||||
|
background-color: transparent
|
||||||
|
.navbar-dropdown
|
||||||
|
a.navbar-item
|
||||||
|
&:hover
|
||||||
|
background-color: $navbar-dropdown-item-hover-background
|
||||||
|
color: $navbar-dropdown-item-hover
|
||||||
|
&.is-active
|
||||||
|
background-color: $navbar-dropdown-item-active-background
|
||||||
|
color: $navbar-dropdown-item-active
|
||||||
|
.navbar-burger
|
||||||
|
display: none
|
||||||
|
.navbar-item,
|
||||||
|
.navbar-link
|
||||||
|
align-items: center
|
||||||
|
display: flex
|
||||||
|
.navbar-item
|
||||||
|
&.has-dropdown
|
||||||
|
align-items: stretch
|
||||||
|
&.is-active,
|
||||||
|
&.is-hoverable:hover
|
||||||
|
.navbar-dropdown
|
||||||
|
display: block
|
||||||
|
&.is-boxed
|
||||||
|
opacity: 1
|
||||||
|
pointer-events: auto
|
||||||
|
transform: translateY(0)
|
||||||
|
.navbar-link
|
||||||
|
&::after
|
||||||
|
+arrow($navbar-dropdown-arrow)
|
||||||
|
margin-top: -0.375em
|
||||||
|
right: 1.125em
|
||||||
|
top: 50%
|
||||||
|
.navbar-menu
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 0
|
||||||
|
.navbar-start
|
||||||
|
justify-content: flex-start
|
||||||
|
margin-right: auto
|
||||||
|
.navbar-end
|
||||||
|
justify-content: flex-end
|
||||||
|
margin-left: auto
|
||||||
|
.navbar-dropdown
|
||||||
|
background-color: $navbar-dropdown-background
|
||||||
|
border-bottom-left-radius: $navbar-dropdown-radius
|
||||||
|
border-bottom-right-radius: $navbar-dropdown-radius
|
||||||
|
border-top: 1px solid $navbar-dropdown-border
|
||||||
|
box-shadow: 0 8px 8px rgba($black, 0.1)
|
||||||
|
display: none
|
||||||
|
font-size: 0.875rem
|
||||||
|
left: 0
|
||||||
|
min-width: 100%
|
||||||
|
position: absolute
|
||||||
|
top: 100%
|
||||||
|
z-index: $navbar-dropdown-z
|
||||||
|
.navbar-item
|
||||||
|
padding: 0.375rem 1rem
|
||||||
|
white-space: nowrap
|
||||||
|
a.navbar-item
|
||||||
|
padding-right: 3rem
|
||||||
|
&:hover
|
||||||
|
background-color: $navbar-dropdown-item-hover-background
|
||||||
|
color: $navbar-dropdown-item-hover
|
||||||
|
&.is-active
|
||||||
|
background-color: $navbar-dropdown-item-active-background
|
||||||
|
color: $navbar-dropdown-item-active
|
||||||
|
&.is-boxed
|
||||||
|
border-radius: $navbar-dropdown-radius
|
||||||
|
border-top: none
|
||||||
|
box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||||
|
display: block
|
||||||
|
opacity: 0
|
||||||
|
pointer-events: none
|
||||||
|
top: calc(100% + (#{$navbar-dropdown-offset}))
|
||||||
|
transform: translateY(-5px)
|
||||||
|
transition-duration: $speed
|
||||||
|
transition-property: opacity, transform
|
||||||
|
.navbar-divider
|
||||||
|
display: block
|
||||||
|
.container > .navbar
|
||||||
|
margin-left: -1rem
|
||||||
|
margin-right: -1rem
|
||||||
|
// Hover/Active states
|
||||||
|
a.navbar-item,
|
||||||
|
.navbar-link
|
||||||
|
&.is-active
|
||||||
|
color: $navbar-item-active
|
||||||
|
&.is-active:not(:hover)
|
||||||
|
background-color: $navbar-item-active-background
|
||||||
|
.navbar-item.has-dropdown
|
||||||
|
&:hover,
|
||||||
|
&.is-active
|
||||||
|
.navbar-link
|
||||||
|
background-color: $navbar-item-hover-background
|
||||||
@ -54,12 +54,10 @@
|
|||||||
ol
|
ol
|
||||||
list-style: decimal outside
|
list-style: decimal outside
|
||||||
margin-left: 2em
|
margin-left: 2em
|
||||||
margin-right: 2em
|
|
||||||
margin-top: 1em
|
margin-top: 1em
|
||||||
ul
|
ul
|
||||||
list-style: disc outside
|
list-style: disc outside
|
||||||
margin-left: 2em
|
margin-left: 2em
|
||||||
margin-right: 2em
|
|
||||||
margin-top: 1em
|
margin-top: 1em
|
||||||
ul
|
ul
|
||||||
list-style-type: circle
|
list-style-type: circle
|
||||||
|
|||||||
@ -42,10 +42,6 @@
|
|||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
padding: 3rem 1.5rem
|
padding: 3rem 1.5rem
|
||||||
// Responsiveness
|
|
||||||
+from($widescreen)
|
|
||||||
padding-left: 0
|
|
||||||
padding-right: 0
|
|
||||||
|
|
||||||
// Main container
|
// Main container
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user