mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add babel
This commit is contained in:
Jeremy Thomas
parent
082d05c8df
commit
5e644d861e
3
docs/.babelrc
Normal file
3
docs/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["es2015-ie"]
|
||||
}
|
||||
@ -9,6 +9,7 @@ markdown: kramdown
|
||||
permalink: pretty
|
||||
url: http://bulma.io
|
||||
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
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<!-- {% include carbon.html %} -->
|
||||
{% include carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -117,17 +117,17 @@
|
||||
}(document, 'script', 'facebook-jssdk'));</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 src="{{ site.url }}/javascript/clipboard.min.js"></script>
|
||||
<script src="{{ site.url }}/javascript/bulma.js"></script>
|
||||
<!-- <script src="{{ site.url }}/javascript/jquery-2.2.0.min.js"></script> -->
|
||||
<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 }}/javascript/index.js"></script>
|
||||
<script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript">
|
||||
<!-- <script type="text/javascript">
|
||||
(function($) {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
@ -135,7 +135,7 @@
|
||||
ftypes[0]='email';
|
||||
}(jQuery));
|
||||
var $mcj = jQuery.noConflict(true);
|
||||
</script>
|
||||
</script> -->
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="container">
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
@ -26,30 +26,30 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
<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">
|
||||
<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">
|
||||
<a class="navbar-item">
|
||||
<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">
|
||||
<a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
@ -59,11 +59,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">
|
||||
<a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div class="navbar-dropdown" data-style="width: 18rem;">
|
||||
{% for post in site.posts %}
|
||||
<div 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>
|
||||
@ -73,6 +73,9 @@
|
||||
</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">
|
||||
@ -84,7 +87,7 @@
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-warning is-small" href="{{ site.download }}">
|
||||
<a class="button is-rss is-small" href="{{ site.url }}/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
@ -97,16 +100,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item">
|
||||
More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item" href="{{ site.github }}" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
@ -137,5 +137,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -22,8 +22,9 @@
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/nav/">
|
||||
Nav
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
|
||||
Navbar
|
||||
<span class="tag is-success" style="margin-left: 0.5rem;">New!</span>
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
|
||||
Pagination
|
||||
|
||||
51
docs/_javascript/index.js
Normal file
51
docs/_javascript/index.js
Normal file
@ -0,0 +1,51 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const $grid = document.getElementById('grid');
|
||||
const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
|
||||
console.log('$columns', $columns);
|
||||
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();
|
||||
});
|
||||
|
||||
});
|
||||
56
docs/_javascript/main.js
Normal file
56
docs/_javascript/main.js
Normal file
@ -0,0 +1,56 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Navbar burger menu
|
||||
|
||||
const $navBurger = document.getElementById('navBurger');
|
||||
const $navMenu = document.getElementById('navMenu');
|
||||
|
||||
if ($navBurger) {
|
||||
$navBurger.addEventListener('click', () => {
|
||||
$navBurger.classList.toggle('is-active');
|
||||
$navMenu.classList.toggle('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
// Modals
|
||||
|
||||
const $html = document.documentElement;
|
||||
const $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
|
||||
const $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
|
||||
const $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($el => {
|
||||
$el.addEventListener('click', () => {
|
||||
const target = $el.dataset.target;
|
||||
console.log('target', 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');
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@ -3,6 +3,6 @@
|
||||
{% include head.html %}
|
||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||
{{ content }}
|
||||
<script type="text/javascript" src="{{ site.url }}/javascript/main.js"></script>
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,9 +3,7 @@ layout: default
|
||||
route: documentation
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
{% include header.html %}
|
||||
</div>
|
||||
{% include navbar.html %}
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "../bulma"
|
||||
@import "./sass/highlight"
|
||||
@import "./sass/override"
|
||||
@import "./sass/global"
|
||||
@import "./sass/index"
|
||||
@import "./sass/header"
|
||||
@import "./sass/footer"
|
||||
@import "./sass/specific"
|
||||
@import "./sass/example"
|
||||
@import "./sass/callout"
|
||||
@import "./sass/bsa"
|
||||
@import "./sass/route"
|
||||
@import "./_sass/highlight"
|
||||
@import "./_sass/override"
|
||||
@import "./_sass/global"
|
||||
@import "./_sass/index"
|
||||
@import "./_sass/header"
|
||||
@import "./_sass/footer"
|
||||
@import "./_sass/specific"
|
||||
@import "./_sass/example"
|
||||
@import "./_sass/callout"
|
||||
@import "./_sass/bsa"
|
||||
@import "./_sass/route"
|
||||
|
||||
html
|
||||
\::-moz-selection
|
||||
|
||||
@ -4395,7 +4395,12 @@ a.nav-item.is-tab.is-active {
|
||||
a.navbar-item:hover,
|
||||
.navbar-link:hover {
|
||||
background-color: whitesmoke;
|
||||
color: #363636;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
a.navbar-item.is-active,
|
||||
.navbar-link.is-active {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
@ -4435,6 +4440,10 @@ a.navbar-item:hover,
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.navbar-dropdown a.navbar-item.is-active {
|
||||
color: #00d1b2;
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: #dbdbdb;
|
||||
border: none;
|
||||
@ -4467,6 +4476,14 @@ a.navbar-item:hover,
|
||||
.navbar {
|
||||
height: 3.25rem;
|
||||
}
|
||||
.navbar.is-transparent .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-transparent .navbar-brand > a.navbar-item:hover,
|
||||
.navbar.is-transparent .navbar-start .navbar-link:hover,
|
||||
.navbar.is-transparent .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-transparent .navbar-end .navbar-link:hover,
|
||||
.navbar.is-transparent .navbar-end > a.navbar-item:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar-burger {
|
||||
display: none;
|
||||
}
|
||||
@ -4496,9 +4513,10 @@ a.navbar-item:hover,
|
||||
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
|
||||
display: block;
|
||||
}
|
||||
a.navbar-item:hover,
|
||||
.navbar-link:hover {
|
||||
background-color: transparent;
|
||||
.navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.navbar-menu {
|
||||
flex-grow: 1;
|
||||
@ -4514,20 +4532,34 @@ a.navbar-item:hover,
|
||||
}
|
||||
.navbar-dropdown {
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
|
||||
display: none;
|
||||
font-size: 0.875rem;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
position: absolute;
|
||||
top: calc(100% + (-4px));
|
||||
top: 100%;
|
||||
z-index: 20;
|
||||
}
|
||||
.navbar-dropdown .navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.navbar-dropdown.is-boxed {
|
||||
border-radius: 5px;
|
||||
border-top: none;
|
||||
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
display: block;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
top: calc(100% + (-4px));
|
||||
transform: translateY(-5px);
|
||||
transition-duration: 86ms;
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
.navbar-divider {
|
||||
display: block;
|
||||
}
|
||||
@ -7752,6 +7784,20 @@ html.route-index #carbon {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.button.is-rss {
|
||||
background-color: #f26522;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-rss:hover {
|
||||
background-color: #ed560e;
|
||||
}
|
||||
|
||||
.button.is-rss:active {
|
||||
background-color: #d54d0d;
|
||||
}
|
||||
|
||||
.example,
|
||||
.structure {
|
||||
border: 1px solid #ffdd57;
|
||||
|
||||
@ -32,7 +32,7 @@ doc-subtab: modal
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -42,7 +42,7 @@ doc-subtab: modal
|
||||
<div class="modal-content">
|
||||
<!-- Any other Bulma elements you want -->
|
||||
</div>
|
||||
<button class="modal-close"></button>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -66,7 +66,7 @@ doc-subtab: modal
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -78,7 +78,7 @@ doc-subtab: modal
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close"></button>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -89,7 +89,7 @@ doc-subtab: modal
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -150,7 +150,7 @@ doc-subtab: modal
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close"></button>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-bis" class="modal">
|
||||
@ -160,7 +160,7 @@ doc-subtab: modal
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close"></button>
|
||||
<button class="modal-close is-large"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-ter" class="modal">
|
||||
|
||||
18
docs/documentation/components/navbar.html
Normal file
18
docs/documentation/components/navbar.html
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: navbar
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Navbar</h1>
|
||||
<h2 class="subtitle">
|
||||
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
</section>
|
||||
@ -236,12 +236,7 @@ doc-subtab: button
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="static-button" style="margin-bottom: 0.5rem;">
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.2</span>
|
||||
</p>
|
||||
|
||||
<h4 class="subtitle">
|
||||
<h4 id="static-button" class="subtitle">
|
||||
Static
|
||||
</h4>
|
||||
|
||||
@ -252,6 +247,10 @@ doc-subtab: button
|
||||
<div class="column">
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.2</span>
|
||||
</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>.
|
||||
</p>
|
||||
|
||||
@ -803,12 +803,11 @@ doc-subtab: form
|
||||
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||
</div>
|
||||
|
||||
<p style="margin-bottom: 0.5rem;">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.2</span>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@ -1144,7 +1143,8 @@ doc-subtab: form
|
||||
<div class="content">
|
||||
<p>
|
||||
<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>:
|
||||
</p>
|
||||
<ul>
|
||||
|
||||
@ -47,7 +47,8 @@ doc-subtab: table
|
||||
<p>
|
||||
<span class="tag is-success">New!</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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ layout: default
|
||||
route: index
|
||||
---
|
||||
|
||||
{% include navbar.html %}
|
||||
{% include navbar.html transparent=true boxed=true %}
|
||||
|
||||
<section class="hero is-medium has-text-centered">
|
||||
<div class="hero-body">
|
||||
|
||||
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
@ -1,13 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const $navBurger = document.getElementById('navBurger');
|
||||
const $navMenu = document.getElementById('navMenu');
|
||||
|
||||
if ($navBurger) {
|
||||
$navBurger.addEventListener('click', () => {
|
||||
$navBurger.classList.toggle('is-active');
|
||||
$navMenu.classList.toggle('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
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);
|
||||
});
|
||||
52
docs/lib/index.js
Normal file
52
docs/lib/index.js
Normal file
@ -0,0 +1,52 @@
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
var $grid = document.getElementById('grid');
|
||||
var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
|
||||
console.log('$columns', $columns);
|
||||
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');
|
||||
});
|
||||
}
|
||||
});
|
||||
57
docs/lib/main.js
Normal file
57
docs/lib/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');
|
||||
});
|
||||
}
|
||||
});
|
||||
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"
|
||||
}
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
.bsa
|
||||
padding: 2rem
|
||||
|
||||
.bsa-cpc
|
||||
min-height: 1px
|
||||
|
||||
#_default_
|
||||
.default-ad
|
||||
background-color: rgba(black, 0.3)
|
||||
border-radius: 2px
|
||||
color: $white
|
||||
display: inline-block
|
||||
font-size: 10px
|
||||
font-weight: bold
|
||||
padding: 0 4px
|
||||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
& > a
|
||||
background-color: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
color: $text
|
||||
display: block
|
||||
line-height: 1.375
|
||||
margin-top: 15px
|
||||
min-height: 70px
|
||||
padding: 15px
|
||||
padding-left: 70px
|
||||
position: relative
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
||||
span
|
||||
display: block
|
||||
.default-image
|
||||
display: block
|
||||
left: 15px
|
||||
height: 40px
|
||||
position: absolute
|
||||
top: 15px
|
||||
width: 40px
|
||||
img
|
||||
display: block
|
||||
height: 40px
|
||||
width: 40px
|
||||
.default-title
|
||||
color: $text-strong
|
||||
display: inline
|
||||
font-weight: $weight-bold
|
||||
&:after
|
||||
content: " — "
|
||||
.default-description
|
||||
display: inline
|
||||
|
||||
+tablet
|
||||
.bsa
|
||||
.columns
|
||||
min-height: 120px
|
||||
#_default_
|
||||
display: flex
|
||||
justify-content: center
|
||||
position: relative
|
||||
.default-ad
|
||||
left: 100%
|
||||
margin-left: 2rem
|
||||
position: absolute
|
||||
top: 0
|
||||
& > a
|
||||
margin: 0
|
||||
&:not(:nth-child(2))
|
||||
margin-left: 2rem
|
||||
@ -1,13 +0,0 @@
|
||||
.callout
|
||||
+block
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||
position: relative
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
@ -1,126 +0,0 @@
|
||||
.example,
|
||||
.structure
|
||||
border: 1px solid $warning
|
||||
border-top-right-radius: $radius
|
||||
color: $warning-invert
|
||||
padding: 1.5rem
|
||||
position: relative
|
||||
&:not(:first-child)
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
&:before
|
||||
background: $warning
|
||||
border-radius: $radius $radius 0 0
|
||||
bottom: 100%
|
||||
content: "Example"
|
||||
display: inline-block
|
||||
font-size: 7px
|
||||
font-weight: bold
|
||||
left: -1px
|
||||
letter-spacing: 1px
|
||||
padding: 3px 5px
|
||||
position: absolute
|
||||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
+tablet
|
||||
&.is-fullwidth
|
||||
border-left: none
|
||||
border-right: none
|
||||
padding: 0
|
||||
|
||||
.example
|
||||
& + .highlight
|
||||
border: 1px solid $warning
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -1.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.highlight pre
|
||||
max-height: 600px
|
||||
margin-bottom: 0 !important
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
|
||||
.structure
|
||||
border-color: $structure
|
||||
border-radius: $radius
|
||||
padding: 1.5rem
|
||||
&:before
|
||||
background: $structure
|
||||
color: $structure-invert
|
||||
content: "Structure"
|
||||
|
||||
.structure-item
|
||||
position: relative
|
||||
&:before
|
||||
+overlay
|
||||
background: rgba($black, 0.7)
|
||||
background: $background
|
||||
border: 1px solid $border
|
||||
content: ""
|
||||
display: block
|
||||
z-index: 1
|
||||
&:after
|
||||
+overlay
|
||||
align-items: center
|
||||
content: attr(title)
|
||||
display: flex
|
||||
font-family: $family-monospace
|
||||
font-size: 11px
|
||||
justify-content: center
|
||||
padding: 3px 5px
|
||||
z-index: 2
|
||||
&.is-structure-container
|
||||
padding: 1.5rem 0.75rem 0.75rem
|
||||
&:after
|
||||
align-items: flex-start
|
||||
justify-content: flex-start
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
.highlight
|
||||
position: relative
|
||||
.copy,
|
||||
.expand
|
||||
+unselectable
|
||||
background: $white
|
||||
border: solid $border
|
||||
border-width: 0 0 1px 1px
|
||||
color: $text-light
|
||||
cursor: pointer
|
||||
outline: none
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
&:hover
|
||||
border-color: $code
|
||||
color: $code
|
||||
.expand
|
||||
border-right-width: 1px
|
||||
right: 50px
|
||||
+tablet
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
||||
+tablet
|
||||
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
& + .highlight
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
|
||||
.section.is-fullwidth
|
||||
padding: 0 !important
|
||||
.example
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
padding: 0
|
||||
& + .highlight
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
@ -1,66 +0,0 @@
|
||||
#about
|
||||
.twitter-container
|
||||
display: block
|
||||
height: 30px
|
||||
line-height: 30px
|
||||
margin-top: 5px
|
||||
small
|
||||
display: block
|
||||
margin-top: 5px
|
||||
|
||||
#mc_embed_signup
|
||||
.field
|
||||
margin-bottom: 0
|
||||
.notification
|
||||
margin-top: 0.75rem
|
||||
|
||||
#share
|
||||
form
|
||||
height: 30px
|
||||
margin-top: 10px
|
||||
|
||||
#social
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
> iframe,
|
||||
> a,
|
||||
> form,
|
||||
> div
|
||||
display: inline-block
|
||||
font-size: 11px
|
||||
height: 30px
|
||||
line-height: 30px
|
||||
margin-top: 5px
|
||||
.github-btn
|
||||
width: 160px
|
||||
.twitter-share-button
|
||||
margin-right: 10px
|
||||
min-width: 76px
|
||||
.paypal-form
|
||||
min-width: 148px
|
||||
.fb-like
|
||||
align-items: center
|
||||
display: flex
|
||||
width: 130px
|
||||
|
||||
#newsletter
|
||||
.input
|
||||
border-color: $white
|
||||
box-shadow: none
|
||||
|
||||
#sister
|
||||
ul
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
li
|
||||
display: flex
|
||||
height: 30px
|
||||
margin: 5px 1rem 0 0
|
||||
img
|
||||
height: 30px
|
||||
|
||||
#tsp
|
||||
small
|
||||
display: block
|
||||
@ -1,50 +0,0 @@
|
||||
svg
|
||||
max-height: 100%
|
||||
max-width: 100%
|
||||
|
||||
$carbon-space: 15px
|
||||
|
||||
#carbon
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 340px
|
||||
min-height: 120px + ($carbon-space * 2)
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
|
||||
+tablet
|
||||
width: 340px
|
||||
|
||||
#carbonads
|
||||
font-size: 14px
|
||||
text-align: left
|
||||
a,
|
||||
span
|
||||
display: block
|
||||
.carbon-wrap
|
||||
position: relative
|
||||
.carbon-img
|
||||
background: $background
|
||||
float: left
|
||||
height: 100px
|
||||
margin: 15px 0 15px 15px
|
||||
width: 130px
|
||||
img
|
||||
display: block
|
||||
height: 100px
|
||||
width: 130px
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
line-height: 20px
|
||||
padding: 15px 15px 35px 160px
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
left: 160px
|
||||
line-height: 20px
|
||||
padding: 0 15px 10px 0
|
||||
position: absolute
|
||||
right: 0
|
||||
@ -1,18 +0,0 @@
|
||||
$github: #333333
|
||||
$twitter: #55acee
|
||||
|
||||
#github
|
||||
color: $github
|
||||
border-color: $github
|
||||
&:hover
|
||||
background: $github
|
||||
border-color: $github
|
||||
color: $white
|
||||
|
||||
#twitter
|
||||
color: $twitter
|
||||
border-color: $twitter
|
||||
&:hover
|
||||
background: $twitter
|
||||
border-color: $twitter
|
||||
color: $white
|
||||
@ -1,126 +0,0 @@
|
||||
.highlight
|
||||
background-color: #f5f5f5
|
||||
color: #586e75
|
||||
.c
|
||||
color: #93a1a1
|
||||
.err,
|
||||
.g
|
||||
color: #586e75
|
||||
.k
|
||||
color: #859900
|
||||
.l,
|
||||
.n
|
||||
color: #586e75
|
||||
.o
|
||||
color: #859900
|
||||
.x
|
||||
color: #cb4b16
|
||||
.p
|
||||
color: #586e75
|
||||
.cm
|
||||
color: #93a1a1
|
||||
.cp
|
||||
color: #859900
|
||||
.c1
|
||||
color: #93a1a1
|
||||
.cs
|
||||
color: #859900
|
||||
.gd
|
||||
color: #2aa198
|
||||
.ge
|
||||
color: #586e75
|
||||
font-style: italic
|
||||
.gr
|
||||
color: #dc322f
|
||||
.gh
|
||||
color: #cb4b16
|
||||
.gi
|
||||
color: #859900
|
||||
.go,
|
||||
.gp
|
||||
color: #586e75
|
||||
.gs
|
||||
color: #586e75
|
||||
font-weight: bold
|
||||
.gu
|
||||
color: #cb4b16
|
||||
.gt
|
||||
color: #586e75
|
||||
.kc
|
||||
color: #cb4b16
|
||||
.kd
|
||||
color: #268bd2
|
||||
.kn,
|
||||
.kp
|
||||
color: #859900
|
||||
.kr
|
||||
color: #268bd2
|
||||
.kt
|
||||
color: #dc322f
|
||||
.ld
|
||||
color: #586e75
|
||||
.m,
|
||||
.s
|
||||
color: #2aa198
|
||||
.na
|
||||
color: #B58900
|
||||
.nb
|
||||
color: #586e75
|
||||
.nc
|
||||
color: #268bd2
|
||||
.no
|
||||
color: #cb4b16
|
||||
.nd
|
||||
color: #268bd2
|
||||
.ni,
|
||||
.ne
|
||||
color: #cb4b16
|
||||
.nf
|
||||
color: #268bd2
|
||||
.nl,
|
||||
.nn,
|
||||
.nx,
|
||||
.py
|
||||
color: #586e75
|
||||
.nt,
|
||||
.nv
|
||||
color: #268bd2
|
||||
.ow
|
||||
color: #859900
|
||||
.w
|
||||
color: #586e75
|
||||
.mf,
|
||||
.mh,
|
||||
.mi,
|
||||
.mo
|
||||
color: #2aa198
|
||||
.sb
|
||||
color: #93a1a1
|
||||
.sc
|
||||
color: #2aa198
|
||||
.sd
|
||||
color: #586e75
|
||||
.s2
|
||||
color: #2aa198
|
||||
.se
|
||||
color: #cb4b16
|
||||
.sh
|
||||
color: #586e75
|
||||
.si,
|
||||
.sx
|
||||
color: #2aa198
|
||||
.sr
|
||||
color: #dc322f
|
||||
.s1,
|
||||
.ss
|
||||
color: #2aa198
|
||||
.bp,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi
|
||||
color: #268bd2
|
||||
.il
|
||||
color: #2aa198
|
||||
|
||||
.content .highlight
|
||||
text-align: left
|
||||
@ -1,148 +0,0 @@
|
||||
@keyframes floatUp
|
||||
0%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
100%
|
||||
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes strokePath
|
||||
from
|
||||
stroke-dashoffset: 880
|
||||
to
|
||||
stroke-dashoffset: 0
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0.86)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes fadeOut
|
||||
0%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
100%
|
||||
opacity: 0
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes slideDown
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes slideUp
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
$curve: cubic-bezier(0, 0.71, 0.29, 1)
|
||||
|
||||
#b
|
||||
// animation-delay: 1s
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: floatUp
|
||||
animation-timing-function: $curve
|
||||
border-radius: 24px
|
||||
display: inline-block
|
||||
height: 240px
|
||||
margin-bottom: 40px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 240px
|
||||
svg
|
||||
+overlay
|
||||
display: block
|
||||
height: 240px
|
||||
width: 240px
|
||||
&:first-child
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeOut
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: strokePath
|
||||
animation-timing-function: $curve
|
||||
fill: none
|
||||
stroke: $turquoise
|
||||
stroke-dasharray: 880
|
||||
stroke-width: 2px
|
||||
&:last-child
|
||||
animation-delay: 1s
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeIn
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
fill: $turquoise
|
||||
+mobile
|
||||
border-radius: 16px
|
||||
height: 160px
|
||||
width: 160px
|
||||
|
||||
#bulma
|
||||
animation: slideDown 500ms both
|
||||
// animation-delay: 1s
|
||||
|
||||
#modern-framework
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 0.2s
|
||||
|
||||
#npm
|
||||
align-items: center
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 0.4s
|
||||
background: none
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin: -10px 0 20px
|
||||
code
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
color: $primary
|
||||
display: inline-block
|
||||
font-size: 16px
|
||||
padding: 16px 32px
|
||||
|
||||
#ghbtns
|
||||
animation: slideDown 500ms both
|
||||
animation-delay: 0.6s
|
||||
|
||||
html.route-index #carbon
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 0.8s
|
||||
|
||||
#download
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 1s
|
||||
|
||||
#grid
|
||||
.notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
#message
|
||||
display: none
|
||||
|
||||
#tweet
|
||||
background: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
padding: 1.5rem
|
||||
@ -1,18 +0,0 @@
|
||||
.button
|
||||
+tablet
|
||||
small
|
||||
color: $text
|
||||
left: 0
|
||||
margin-top: 10px
|
||||
position: absolute
|
||||
top: 100%
|
||||
width: 100%
|
||||
|
||||
body.page-grid .column > .notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
text-align: center
|
||||
|
||||
+tablet
|
||||
.header-item .button + .button
|
||||
margin-left: 0.75rem
|
||||
@ -1,36 +0,0 @@
|
||||
html.route-index
|
||||
.title.is-2
|
||||
position: relative
|
||||
|
||||
.title.is-2 a
|
||||
color: #242424
|
||||
padding-left: 48px
|
||||
position: relative
|
||||
|
||||
.title.is-2 a:hover
|
||||
color: #00d1b2
|
||||
|
||||
.title.is-2 .icon.is-medium
|
||||
left: 8px
|
||||
position: absolute
|
||||
top: 10px
|
||||
|
||||
.hero .title.is-2 a
|
||||
color: white
|
||||
|
||||
.hero .title.is-2 a:hover
|
||||
color: white
|
||||
|
||||
.hero.is-primary a.column,
|
||||
.hero.is-primary a.column:hover
|
||||
color: white
|
||||
|
||||
.hero.is-primary a.column:hover .title strong
|
||||
border-bottom: 1px solid
|
||||
|
||||
@media screen and (max-width: 979px)
|
||||
.title.is-2 a
|
||||
padding-left: 0
|
||||
|
||||
.title.is-2 .icon.is-medium
|
||||
display: none
|
||||
@ -1,14 +0,0 @@
|
||||
#images
|
||||
tr
|
||||
td:nth-child(2)
|
||||
width: 320px
|
||||
|
||||
.color
|
||||
border-radius: 2px
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
|
||||
display: inline-block
|
||||
float: left
|
||||
height: 24px
|
||||
margin-right: 8px
|
||||
width: 24px
|
||||
|
||||
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
@ -2,16 +2,18 @@ $navbar-background: $white !default
|
||||
$navbar-height: 3.25rem !default
|
||||
|
||||
$navbar-item: $grey-dark !default
|
||||
$navbar-item-hover: $grey-darker !default
|
||||
$navbar-item-hover: $black !default
|
||||
$navbar-item-hover-background: $background !default
|
||||
$navbar-item-desktop-hover-background: transparent !default
|
||||
$navbar-item-active: $black !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-item-hover-background: $background !default
|
||||
$navbar-dropdown-item-active: $primary !default
|
||||
|
||||
$navbar-divider-background: $border !default
|
||||
|
||||
@ -45,6 +47,8 @@ a.navbar-item,
|
||||
&:hover
|
||||
background-color: $navbar-item-hover-background
|
||||
color: $navbar-item-hover
|
||||
&.is-active
|
||||
color: $navbar-item-active
|
||||
|
||||
.navbar-item
|
||||
flex-grow: 0
|
||||
@ -68,8 +72,11 @@ a.navbar-item,
|
||||
.navbar-item
|
||||
padding-left: 1.5rem
|
||||
padding-right: 1.5rem
|
||||
a.navbar-item:hover
|
||||
a.navbar-item
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background
|
||||
&.is-active
|
||||
color: $navbar-dropdown-item-active
|
||||
|
||||
.navbar-divider
|
||||
background-color: $navbar-divider-background
|
||||
@ -97,6 +104,14 @@ a.navbar-item,
|
||||
display: flex
|
||||
.navbar
|
||||
height: $navbar-height
|
||||
&.is-transparent
|
||||
.navbar-brand,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
.navbar-link,
|
||||
& > a.navbar-item
|
||||
&:hover
|
||||
background-color: transparent
|
||||
.navbar-burger
|
||||
display: none
|
||||
.navbar-item,
|
||||
@ -115,10 +130,10 @@ a.navbar-item,
|
||||
&.is-hoverable:hover
|
||||
.navbar-dropdown
|
||||
display: block
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover
|
||||
background-color: $navbar-item-desktop-hover-background
|
||||
&.is-boxed
|
||||
opacity: 1
|
||||
pointer-events: auto
|
||||
transform: translateY(0)
|
||||
.navbar-menu
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
@ -130,18 +145,31 @@ a.navbar-item,
|
||||
margin-left: auto
|
||||
.navbar-dropdown
|
||||
background-color: $navbar-dropdown-background
|
||||
border-radius: $navbar-dropdown-radius
|
||||
box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
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: calc(100% + (#{$navbar-dropdown-offset}))
|
||||
top: 100%
|
||||
z-index: 20
|
||||
.navbar-item
|
||||
padding: 0.375rem 1rem
|
||||
white-space: nowrap
|
||||
&.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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user