mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add navbar component, Fix JS highlight
This commit is contained in:
Jeremy Thomas
parent
6fe8ce9795
commit
43b034e0af
@ -1,4 +1,6 @@
|
||||
{% include navbar.html %}
|
||||
<div class="container">
|
||||
{% include navbar.html %}
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
|
||||
@ -1,99 +1,97 @@
|
||||
<div class="container">
|
||||
<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>
|
||||
<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.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>
|
||||
<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 id="navBurger" class="navbar-burger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div id="navBurger" class="navbar-burger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
|
||||
Home
|
||||
<div id="navMenu" 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-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
|
||||
<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>
|
||||
<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>
|
||||
<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 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>{{ 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>
|
||||
<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">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
<p>
|
||||
<small>{{ 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 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 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>
|
||||
@ -101,41 +99,41 @@
|
||||
</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 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>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -15,15 +15,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// 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);
|
||||
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;
|
||||
console.log('target', target);
|
||||
const $target = document.getElementById(target);
|
||||
$html.classList.add('is-clipped');
|
||||
$target.classList.add('is-active');
|
||||
@ -53,4 +52,60 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
}
|
||||
|
||||
// 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 > 600) {
|
||||
$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);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -3,7 +3,9 @@ layout: default
|
||||
route: documentation
|
||||
---
|
||||
|
||||
{% include navbar.html %}
|
||||
<div class="container">
|
||||
{% include navbar.html %}
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
|
||||
6
docs/_posts/2017-07-02-new-navbar-component.md
Normal file
6
docs/_posts/2017-07-02-new-navbar-component.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: post
|
||||
title: "RIP nav; long live the navbar!"
|
||||
published: true
|
||||
introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
|
||||
---
|
||||
@ -20,8 +20,8 @@ route: blog
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<div class="content">
|
||||
{{ post.content }}
|
||||
<div class="content is-medium">
|
||||
{{ post.introduction }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
@import "./_sass/bsa"
|
||||
@import "./_sass/route"
|
||||
|
||||
\:root
|
||||
--primary: #{$primary}
|
||||
--gap: 0.75rem
|
||||
|
||||
html
|
||||
\::-moz-selection
|
||||
background: $primary
|
||||
|
||||
@ -174,7 +174,7 @@ input[type="radio"] {
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
span {
|
||||
@ -1716,14 +1716,12 @@ input[type="submit"].button {
|
||||
.content ol {
|
||||
list-style: decimal outside;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.content ul {
|
||||
list-style: disc outside;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@ -4549,6 +4547,9 @@ a.navbar-item.is-active,
|
||||
padding: 0.375rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.navbar-dropdown a.navbar-item {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
.navbar-dropdown.is-boxed {
|
||||
border-radius: 5px;
|
||||
border-top: none;
|
||||
@ -8192,6 +8193,11 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #00d1b2;
|
||||
--gap: 0.75rem;
|
||||
}
|
||||
|
||||
html ::-moz-selection {
|
||||
background: #00d1b2;
|
||||
color: #fff;
|
||||
|
||||
@ -6,19 +6,81 @@ doc-subtab: navbar
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
{% capture navbar_example %}
|
||||
{% include navbar.html %}
|
||||
{% endcapture %}
|
||||
|
||||
<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 class="message is-success">
|
||||
<div class="message-body">
|
||||
<p>The new <code>.navbar</code> replaces the old <code>.nav</code> component. You can still access its documentation <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<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>, 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 %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -3,7 +3,9 @@ layout: default
|
||||
route: index
|
||||
---
|
||||
|
||||
{% include navbar.html transparent=true boxed=true %}
|
||||
<div class="container">
|
||||
{% include navbar.html transparent=true boxed=true %}
|
||||
</div>
|
||||
|
||||
<section class="hero is-medium has-text-centered">
|
||||
<div class="hero-body">
|
||||
|
||||
@ -4,7 +4,6 @@ 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');
|
||||
|
||||
@ -17,15 +17,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
// 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);
|
||||
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;
|
||||
console.log('target', target);
|
||||
var $target = document.getElementById(target);
|
||||
$html.classList.add('is-clipped');
|
||||
$target.classList.add('is-active');
|
||||
@ -54,4 +53,60 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
$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 > 600) {
|
||||
$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);
|
||||
}
|
||||
});
|
||||
@ -69,7 +69,7 @@ input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: 0.8em
|
||||
font-size: 0.875em
|
||||
|
||||
span
|
||||
font-style: inherit
|
||||
|
||||
@ -11,6 +11,7 @@ $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-background: $background !default
|
||||
$navbar-dropdown-item-active: $primary !default
|
||||
@ -156,10 +157,12 @@ a.navbar-item,
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: 20
|
||||
z-index: $navbar-dropdown-z
|
||||
.navbar-item
|
||||
padding: 0.375rem 1rem
|
||||
white-space: nowrap
|
||||
a.navbar-item
|
||||
padding-right: 3rem
|
||||
&.is-boxed
|
||||
border-radius: $navbar-dropdown-radius
|
||||
border-top: none
|
||||
|
||||
@ -54,12 +54,10 @@
|
||||
ol
|
||||
list-style: decimal outside
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style: disc outside
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style-type: circle
|
||||
@ -67,22 +65,22 @@
|
||||
ul
|
||||
list-style-type: square
|
||||
dd
|
||||
margin-left: 2em
|
||||
figure
|
||||
text-align: center
|
||||
img
|
||||
display: inline-block
|
||||
figcaption
|
||||
font-style: italic
|
||||
pre
|
||||
margin-left: 2em
|
||||
figure
|
||||
text-align: center
|
||||
img
|
||||
display: inline-block
|
||||
figcaption
|
||||
font-style: italic
|
||||
pre
|
||||
+overflow-touch
|
||||
overflow-x: auto
|
||||
padding: 1.25em 1.5em
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
sup,
|
||||
sub
|
||||
font-size: 70%
|
||||
word-wrap: normal
|
||||
sup,
|
||||
sub
|
||||
font-size: 70%
|
||||
table
|
||||
width: 100%
|
||||
td,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user