mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add show code
This commit is contained in:
Jeremy Thomas
parent
4f5cc9c0ed
commit
720ed45121
@ -103,12 +103,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
if ($highlights.length > 0) {
|
if ($highlights.length > 0) {
|
||||||
$highlights.forEach($el => {
|
$highlights.forEach($el => {
|
||||||
const copy = '<button class="button is-small bd-copy">Copy</button>';
|
const copyEl = '<button class="button is-small bd-copy">Copy</button>';
|
||||||
const expand = '<button class="button is-small bd-expand">Expand</button>';
|
const expandEl = '<button class="button is-small bd-expand">Expand</button>';
|
||||||
$el.insertAdjacentHTML('beforeend', copy);
|
$el.insertAdjacentHTML('beforeend', copyEl);
|
||||||
|
|
||||||
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||||
$el.insertAdjacentHTML('beforeend', expand);
|
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||||
|
}
|
||||||
|
|
||||||
|
const $parent = $el.parentNode;
|
||||||
|
if ($parent && $parent.className == 'bd-highlight-clipped') {
|
||||||
|
const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
|
||||||
|
$el.classList.add('bd-is-clipped');
|
||||||
|
$el.insertAdjacentHTML('beforeend', showEl);
|
||||||
}
|
}
|
||||||
|
|
||||||
itemsProcessed++;
|
itemsProcessed++;
|
||||||
@ -138,6 +145,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
$el.parentNode.firstElementChild.style.maxHeight = 'none';
|
$el.parentNode.firstElementChild.style.maxHeight = 'none';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const $highlightShows = getAll('.bd-highlight-clipped .bd-show');
|
||||||
|
|
||||||
|
$highlightShows.forEach($el => {
|
||||||
|
$el.addEventListener('click', () => {
|
||||||
|
$el.parentNode.classList.remove('bd-is-clipped');
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
new Clipboard('.bd-copy', {
|
new Clipboard('.bd-copy', {
|
||||||
|
|||||||
@ -40,6 +40,10 @@
|
|||||||
margin-top: -1.5rem
|
margin-top: -1.5rem
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
|
& + .bd-highlight-clipped
|
||||||
|
margin-top: -1.5rem
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 1.5rem
|
||||||
|
|
||||||
// Snippet
|
// Snippet
|
||||||
.bd-snippet
|
.bd-snippet
|
||||||
@ -171,6 +175,33 @@ $structure-invert: $danger-invert
|
|||||||
pre
|
pre
|
||||||
white-space: pre-wrap
|
white-space: pre-wrap
|
||||||
|
|
||||||
|
.bd-highlight-clipped
|
||||||
|
.bd-show
|
||||||
|
+overlay
|
||||||
|
align-items: center
|
||||||
|
background-color: rgba(#000, 0.9)
|
||||||
|
background-image: linear-gradient(rgba(#000, 0), rgba(#000, 0) 90%, rgba(#000, 1))
|
||||||
|
border: none
|
||||||
|
color: $white
|
||||||
|
cursor: pointer
|
||||||
|
display: none
|
||||||
|
font-size: $size-6
|
||||||
|
justify-content: center
|
||||||
|
opacity: 0.7
|
||||||
|
width: 100%
|
||||||
|
strong
|
||||||
|
color: currentColor
|
||||||
|
font-weight: $weight-semibold
|
||||||
|
&:hover
|
||||||
|
opacity: 0.8
|
||||||
|
.highlight.bd-is-clipped
|
||||||
|
height: 4em
|
||||||
|
overflow: hidden
|
||||||
|
pre
|
||||||
|
overflow: hidden
|
||||||
|
.bd-show
|
||||||
|
display: flex
|
||||||
|
|
||||||
+tablet
|
+tablet
|
||||||
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
|
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
|
||||||
margin-left: 1.5rem
|
margin-left: 1.5rem
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -427,122 +427,45 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
{% capture heroNavbarA %}
|
||||||
<div class="bd-example">
|
|
||||||
<section class="hero is-primary is-medium">
|
|
||||||
<div class="hero-head">
|
|
||||||
<header class="nav">
|
|
||||||
<div class="container">
|
|
||||||
<div class="nav-left">
|
|
||||||
<a class="nav-item">
|
|
||||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<span class="nav-toggle">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</span>
|
|
||||||
<div class="nav-right nav-menu">
|
|
||||||
<a class="nav-item is-active">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
<span class="nav-item">
|
|
||||||
<a class="button is-primary is-inverted">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-github"></i>
|
|
||||||
</span>
|
|
||||||
<span>Download</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-body">
|
|
||||||
<div class="container has-text-centered">
|
|
||||||
<p class="title">
|
|
||||||
Title
|
|
||||||
</p>
|
|
||||||
<p class="subtitle">
|
|
||||||
Subtitle
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-foot">
|
|
||||||
<nav class="tabs">
|
|
||||||
<div class="container">
|
|
||||||
<ul>
|
|
||||||
<li class="is-active">
|
|
||||||
<a>Overview</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Modifiers</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Grid</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Elements</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Components</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Layout</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}
|
|
||||||
<section class="hero is-primary is-medium">
|
<section class="hero is-primary is-medium">
|
||||||
<!-- Hero header: will stick at the top -->
|
<!-- Hero head: will stick at the top -->
|
||||||
<div class="hero-head">
|
<div class="hero-head">
|
||||||
<header class="nav">
|
<nav class="navbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="nav-left">
|
<div class="navbar-brand">
|
||||||
<a class="nav-item">
|
<a class="navbar-item">
|
||||||
<img src="images/bulma-type-white.png" alt="Logo">
|
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
<span class="navbar-burger burger" data-target="navbarMenuHeroA">
|
||||||
<span class="nav-toggle">
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
|
||||||
</span>
|
|
||||||
<div class="nav-right nav-menu">
|
|
||||||
<a class="nav-item is-active">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
<span class="nav-item">
|
|
||||||
<a class="button is-primary is-inverted">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-github"></i>
|
|
||||||
</span>
|
|
||||||
<span>Download</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="navbarMenuHeroA" class="navbar-menu">
|
||||||
|
<div class="navbar-end">
|
||||||
|
<a class="navbar-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="navbar-item">
|
||||||
|
<a class="button is-primary is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hero content: will be in the middle -->
|
<!-- Hero content: will be in the middle -->
|
||||||
@ -573,299 +496,181 @@ doc-subtab: hero
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture heroNavbarB %}
|
||||||
|
<section class="hero is-info is-large">
|
||||||
|
<div class="hero-head">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
<span class="navbar-burger burger" data-target="navbarMenuHeroB">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div id="navbarMenuHeroB" class="navbar-menu">
|
||||||
|
<div class="navbar-end">
|
||||||
|
<a class="navbar-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="navbar-item">
|
||||||
|
<a class="button is-info is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<p class="title">
|
||||||
|
Title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs is-boxed is-fullwidth">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active">
|
||||||
|
<a>Overview</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Modifiers</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Grid</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Elements</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Components</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Layout</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture heroNavbarC %}
|
||||||
|
<section class="hero is-success is-fullheight">
|
||||||
|
<!-- Hero head: will stick at the top -->
|
||||||
|
<div class="hero-head">
|
||||||
|
<header class="navbar">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item">
|
||||||
|
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div id="navbarMenuHeroC" class="navbar-menu">
|
||||||
|
<div class="navbar-end">
|
||||||
|
<a class="navbar-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="navbar-item">
|
||||||
|
<a class="button is-success is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero content: will be in the middle -->
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<h1 class="title">
|
||||||
|
Title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero footer: will stick at the bottom -->
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs is-boxed is-fullwidth">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active"><a>Overview</a></li>
|
||||||
|
<li><a>Modifiers</a></li>
|
||||||
|
<li><a>Grid</a></li>
|
||||||
|
<li><a>Elements</a></li>
|
||||||
|
<li><a>Components</a></li>
|
||||||
|
<li><a>Layout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
<section class="section is-fullwidth">
|
||||||
|
<div class="bd-example">
|
||||||
|
{{ heroNavbarA }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bd-highlight-clipped">
|
||||||
|
{% highlight html %}{{ heroNavbarA }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bd-example">
|
<div class="bd-example">
|
||||||
<section class="hero is-info is-large">
|
{{ heroNavbarB }}
|
||||||
<div class="hero-head">
|
|
||||||
<header class="nav">
|
|
||||||
<div class="container">
|
|
||||||
<div class="nav-left">
|
|
||||||
<a class="nav-item">
|
|
||||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<span class="nav-toggle">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</span>
|
|
||||||
<div class="nav-right nav-menu">
|
|
||||||
<a class="nav-item is-active">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
<span class="nav-item">
|
|
||||||
<a class="button is-info is-inverted">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-github"></i>
|
|
||||||
</span>
|
|
||||||
<span>Download</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-body">
|
|
||||||
<div class="container has-text-centered">
|
|
||||||
<p class="title">
|
|
||||||
Title
|
|
||||||
</p>
|
|
||||||
<p class="subtitle">
|
|
||||||
Subtitle
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-foot">
|
|
||||||
<nav class="tabs is-boxed is-fullwidth">
|
|
||||||
<div class="container">
|
|
||||||
<ul>
|
|
||||||
<li class="is-active">
|
|
||||||
<a>Overview</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Modifiers</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Grid</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Elements</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Components</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Layout</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}
|
<div class="bd-highlight-clipped">
|
||||||
<section class="hero is-info is-large">
|
{% highlight html %}{{ heroNavbarB }}{% endhighlight %}
|
||||||
<!-- Hero header: will stick at the top -->
|
|
||||||
<div class="hero-head">
|
|
||||||
<header class="nav">
|
|
||||||
<div class="container">
|
|
||||||
<div class="nav-left">
|
|
||||||
<a class="nav-item">
|
|
||||||
<img src="images/bulma-type-white.png" alt="Logo">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<span class="nav-toggle">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</span>
|
|
||||||
<div class="nav-right nav-menu">
|
|
||||||
<a class="nav-item is-active">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
<span class="nav-item">
|
|
||||||
<a class="button is-info is-inverted">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-github"></i>
|
|
||||||
</span>
|
|
||||||
<span>Download</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hero content: will be in the middle -->
|
<div class="bd-example">
|
||||||
<div class="hero-body">
|
{{ heroNavbarC }}
|
||||||
<div class="container has-text-centered">
|
|
||||||
<h1 class="title">
|
|
||||||
Title
|
|
||||||
</h1>
|
|
||||||
<h2 class="subtitle">
|
|
||||||
Subtitle
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hero footer: will stick at the bottom -->
|
<div class="bd-highlight-clipped">
|
||||||
<div class="hero-foot">
|
{% highlight html %}{{ heroNavbarC }}{% endhighlight %}
|
||||||
<nav class="tabs is-boxed is-fullwidth">
|
|
||||||
<div class="container">
|
|
||||||
<ul>
|
|
||||||
<li class="is-active"><a>Overview</a></li>
|
|
||||||
<li><a>Modifiers</a></li>
|
|
||||||
<li><a>Grid</a></li>
|
|
||||||
<li><a>Elements</a></li>
|
|
||||||
<li><a>Components</a></li>
|
|
||||||
<li><a>Layout</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
<div class="bd-example is-fullwidth">
|
|
||||||
<section class="hero is-success is-fullheight">
|
|
||||||
<div class="hero-head">
|
|
||||||
<header class="nav">
|
|
||||||
<div class="container">
|
|
||||||
<div class="nav-left">
|
|
||||||
<a class="nav-item">
|
|
||||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<span class="nav-toggle">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</span>
|
|
||||||
<div class="nav-right nav-menu">
|
|
||||||
<a class="nav-item is-active">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
<span class="nav-item">
|
|
||||||
<a class="button is-success is-inverted">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-github"></i>
|
|
||||||
</span>
|
|
||||||
<span>Download</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-body">
|
|
||||||
<div class="container has-text-centered">
|
|
||||||
<p class="title">
|
|
||||||
Title
|
|
||||||
</p>
|
|
||||||
<p class="subtitle">
|
|
||||||
Subtitle
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-foot">
|
|
||||||
<nav class="tabs is-boxed is-fullwidth">
|
|
||||||
<div class="container">
|
|
||||||
<ul>
|
|
||||||
<li class="is-active">
|
|
||||||
<a>Overview</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Modifiers</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Grid</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Elements</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Components</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a>Layout</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}
|
|
||||||
<section class="hero is-success is-fullheight">
|
|
||||||
<!-- Hero header: will stick at the top -->
|
|
||||||
<div class="hero-head">
|
|
||||||
<header class="nav">
|
|
||||||
<div class="container">
|
|
||||||
<div class="nav-left">
|
|
||||||
<a class="nav-item">
|
|
||||||
<img src="images/bulma-type-white.png" alt="Logo">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<span class="nav-toggle">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</span>
|
|
||||||
<div class="nav-right nav-menu">
|
|
||||||
<a class="nav-item is-active">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a class="nav-item">
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
<span class="nav-item">
|
|
||||||
<a class="button is-success is-inverted">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-github"></i>
|
|
||||||
</span>
|
|
||||||
<span>Download</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Hero content: will be in the middle -->
|
|
||||||
<div class="hero-body">
|
|
||||||
<div class="container has-text-centered">
|
|
||||||
<h1 class="title">
|
|
||||||
Title
|
|
||||||
</h1>
|
|
||||||
<h2 class="subtitle">
|
|
||||||
Subtitle
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Hero footer: will stick at the bottom -->
|
|
||||||
<div class="hero-foot">
|
|
||||||
<nav class="tabs is-boxed is-fullwidth">
|
|
||||||
<div class="container">
|
|
||||||
<ul>
|
|
||||||
<li class="is-active"><a>Overview</a></li>
|
|
||||||
<li><a>Modifiers</a></li>
|
|
||||||
<li><a>Grid</a></li>
|
|
||||||
<li><a>Elements</a></li>
|
|
||||||
<li><a>Components</a></li>
|
|
||||||
<li><a>Layout</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{% endhighlight %}
|
|
||||||
</section>
|
|
||||||
|
|||||||
@ -105,12 +105,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
if ($highlights.length > 0) {
|
if ($highlights.length > 0) {
|
||||||
$highlights.forEach(function ($el) {
|
$highlights.forEach(function ($el) {
|
||||||
var copy = '<button class="button is-small bd-copy">Copy</button>';
|
var copyEl = '<button class="button is-small bd-copy">Copy</button>';
|
||||||
var expand = '<button class="button is-small bd-expand">Expand</button>';
|
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
|
||||||
$el.insertAdjacentHTML('beforeend', copy);
|
$el.insertAdjacentHTML('beforeend', copyEl);
|
||||||
|
|
||||||
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||||
$el.insertAdjacentHTML('beforeend', expand);
|
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||||
|
}
|
||||||
|
|
||||||
|
var $parent = $el.parentNode;
|
||||||
|
if ($parent && $parent.className == 'bd-highlight-clipped') {
|
||||||
|
var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
|
||||||
|
$el.classList.add('bd-is-clipped');
|
||||||
|
$el.insertAdjacentHTML('beforeend', showEl);
|
||||||
}
|
}
|
||||||
|
|
||||||
itemsProcessed++;
|
itemsProcessed++;
|
||||||
@ -140,6 +147,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
$el.parentNode.firstElementChild.style.maxHeight = 'none';
|
$el.parentNode.firstElementChild.style.maxHeight = 'none';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var $highlightShows = getAll('.bd-highlight-clipped .bd-show');
|
||||||
|
|
||||||
|
$highlightShows.forEach(function ($el) {
|
||||||
|
$el.addEventListener('click', function () {
|
||||||
|
$el.parentNode.classList.remove('bd-is-clipped');
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
new Clipboard('.bd-copy', {
|
new Clipboard('.bd-copy', {
|
||||||
|
|||||||
@ -196,12 +196,12 @@ a.navbar-item,
|
|||||||
.navbar-link
|
.navbar-link
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: transparent
|
background-color: transparent !important
|
||||||
.navbar-item.has-dropdown
|
.navbar-item.has-dropdown
|
||||||
&.is-active,
|
&.is-active,
|
||||||
&.is-hoverable:hover
|
&.is-hoverable:hover
|
||||||
.navbar-link
|
.navbar-link
|
||||||
background-color: transparent
|
background-color: transparent !important
|
||||||
.navbar-dropdown
|
.navbar-dropdown
|
||||||
a.navbar-item
|
a.navbar-item
|
||||||
&:hover
|
&:hover
|
||||||
|
|||||||
@ -5,9 +5,8 @@
|
|||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
.nav
|
.navbar
|
||||||
background: none
|
background: none
|
||||||
box-shadow: 0 1px 0 rgba($border, 0.3)
|
|
||||||
.tabs
|
.tabs
|
||||||
ul
|
ul
|
||||||
border-bottom: none
|
border-bottom: none
|
||||||
@ -28,16 +27,17 @@
|
|||||||
a:not(.button),
|
a:not(.button),
|
||||||
strong
|
strong
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.nav
|
.navbar-menu
|
||||||
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
|
+touch
|
||||||
.nav-menu
|
|
||||||
+mobile
|
|
||||||
background-color: $color
|
background-color: $color
|
||||||
a.nav-item,
|
.navbar-item,
|
||||||
.nav-item a:not(.button)
|
.navbar-link
|
||||||
color: rgba($color-invert, 0.7)
|
color: rgba($color-invert, 0.7)
|
||||||
|
a.navbar-item,
|
||||||
|
.navbar-link
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active
|
&.is-active
|
||||||
|
background-color: darken($color, 5%)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.tabs
|
.tabs
|
||||||
a
|
a
|
||||||
@ -66,21 +66,21 @@
|
|||||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
||||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||||
+mobile
|
+mobile
|
||||||
.nav-menu
|
.navbar-menu
|
||||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
+mobile
|
// +mobile
|
||||||
.nav-toggle
|
// .nav-toggle
|
||||||
span
|
// span
|
||||||
background-color: $color-invert
|
// background-color: $color-invert
|
||||||
&:hover
|
// &:hover
|
||||||
background-color: rgba($black, 0.1)
|
// background-color: rgba($black, 0.1)
|
||||||
&.is-active
|
// &.is-active
|
||||||
span
|
// span
|
||||||
background-color: $color-invert
|
// background-color: $color-invert
|
||||||
.nav-menu
|
// .nav-menu
|
||||||
.nav-item
|
// .nav-item
|
||||||
border-top-color: rgba($color-invert, 0.2)
|
// border-top-color: rgba($color-invert, 0.2)
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
.hero-body
|
.hero-body
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user