library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve snippet

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-09 15:38:12 +01:00
parent 720ed45121
commit 70367c3b5d
22 changed files with 2121 additions and 865 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/snippet.html
View File

@ -16,10 +16,10 @@
{% if include.clipped %}bd-is-clipped{% endif %}
{% if include.size %}bd-is-{{ include.size }}{% endif %}
">
<div class="bd-snippet-preview">
<div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
{{ include.content }}
</div>
<div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %}">
<div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %} {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}">
{% highlight html %}{{ include.content }}{% endhighlight %}
</div>
</div>

13
docs/_javascript/main.js
View File

@ -107,15 +107,12 @@ document.addEventListener('DOMContentLoaded', () => {
const expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copyEl);
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
}
const $parent = $el.parentNode;
if ($parent && $parent.className == 'bd-highlight-clipped') {
if ($parent && $parent.classList.contains('bd-is-more')) {
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);
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
}
itemsProcessed++;
@ -146,11 +143,11 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
const $highlightShows = getAll('.bd-highlight-clipped .bd-show');
const $highlightShows = getAll('.highlight .bd-show');
$highlightShows.forEach($el => {
$el.addEventListener('click', () => {
$el.parentNode.classList.remove('bd-is-clipped');
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
});
});
}

54
docs/_sass/example.sass
View File

@ -33,6 +33,8 @@
margin-bottom: 1.5rem
.bd-example
&.bd-is-clipped
border-top-right-radius: $radius-large
& + .highlight
border: 1px solid $yellow
border-radius: 0 0 $radius $radius
@ -40,10 +42,6 @@
margin-top: -1.5rem
&:not(:last-child)
margin-bottom: 1.5rem
& + .bd-highlight-clipped
margin-top: -1.5rem
&:not(:last-child)
margin-bottom: 1.5rem
// Snippet
.bd-snippet
@ -62,6 +60,23 @@
.bd-snippet-code
background-color: $pre-background
.bd-snippet-code.bd-is-more.bd-is-more-clipped
.highlight
height: 2em
overflow: hidden
pre
overflow: hidden
.bd-show
display: flex
.bd-snippet.bd-is-horizontal
border-radius: $radius-large
border-top-left-radius: 0
.bd-snippet-code.bd-is-more.bd-is-more-clipped
.highlight
pre
padding-top: 0.325rem
.bd-snippet.bd-is-clipped
.bd-snippet-code
overflow: auto
@ -69,6 +84,8 @@
+desktop
.bd-snippet.bd-is-vertical
align-items: stretch
border-radius: $radius-large
border-top-left-radius: 0
display: flex
justify-content: center
.bd-snippet-preview,
@ -79,6 +96,7 @@
.highlight,
.highlight pre
align-items: stretch
border-radius: 0 $radius-large $radius-large 0
display: flex
flex-direction: column
.highlight,
@ -171,36 +189,26 @@ $structure-invert: $danger-invert
box-shadow: none
.bd-expand
right: 45px
+tablet
pre
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))
background-color: rgba($background, 0.7)
border: none
color: $white
color: rgba(#000, 0.5)
cursor: pointer
display: none
font-size: $size-6
font-size: $size-small
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
background-color: rgba($yellow, 0.8)
color: rgba(#000, 0.7)
+tablet
pre
overflow: hidden
.bd-show
display: flex
white-space: pre-wrap
+tablet
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
@ -212,6 +220,10 @@ $structure-invert: $danger-invert
.section.is-fullwidth
padding: 0 !important
.bd-snippet
border-left: none
border-radius: 0
border-right: none
.bd-example
border-left: none
border-radius: 0

2635
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

2
docs/css/bulma-docs.css.map
View File

File diff suppressed because one or more lines are too long

4
docs/documentation/columns/basics.html
View File

@ -53,6 +53,8 @@ doc-subtab: basics
</div>
</div>
{% highlight html %}{{ columns }}{% endhighlight %}
<div class="highlight-full">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>
</div>
</section>

4
docs/documentation/columns/sizes.html
View File

@ -468,7 +468,9 @@ doc-subtab: sizes
</div>
</div>
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
<div class="highlight-full">
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
</div>
<div class="content">
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>

22
docs/documentation/components/breadcrumb.html
View File

@ -162,8 +162,6 @@ variables:
<hr>
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_example}}{% endhighlight %}
{% include anchor.html name="Alignment" %}
<div class="content">
@ -172,12 +170,8 @@ variables:
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_right_example}}{% endhighlight %}
{% include anchor.html name="Icons" %}
<div class="content">
@ -186,8 +180,6 @@ variables:
{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_icons_example}}{% endhighlight %}
{% include anchor.html name="Alternative separators" %}
<div class="content">
@ -196,20 +188,12 @@ variables:
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
{% include anchor.html name="Sizes" %}
<div class="content">
@ -218,16 +202,10 @@ variables:
{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
{% highlight html %}{{breadcrumb_large_example}}{% endhighlight %}
{% include variables.html %}
</div>

4
docs/documentation/components/modal.html
View File

@ -165,7 +165,9 @@ variables:
</p>
</div>
{% highlight html %}{{ modal_card }}{% endhighlight %}
<div class="highlight-full">
{% highlight html %}{{ modal_card }}{% endhighlight %}
</div>
{% include variables.html %}

10
docs/documentation/components/navbar.html
View File

@ -767,7 +767,9 @@ document.addEventListener('DOMContentLoaded', function () {
</li>
<li>
a container for almost <strong>anything</strong> you want, like a <code>field</code>
{% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
<div class="highlight-full">
{% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
</div>
</li>
</ul>
<p>
@ -800,11 +802,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="bd-example is-paddingless">
{{navbar_transparent_example}}
</div>
{% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
{% include anchor.html name="Dropdown menu" %}

14
docs/documentation/components/pagination.html
View File

@ -205,7 +205,7 @@ variables:
</p>
</div>
{% include snippet.html content=pagination_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_example horizontal=true more=true %}
<div class="content">
<p>
@ -213,7 +213,7 @@ variables:
</p>
</div>
{% include snippet.html content=pagination_options_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_options_example horizontal=true more=true %}
<div class="content">
<p>
@ -221,9 +221,9 @@ variables:
</p>
</div>
{% include snippet.html content=pagination_centered_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
{% include snippet.html content=pagination_right_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
{% include anchor.html name="Sizes" %}
@ -232,11 +232,11 @@ variables:
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
</p>
{% include snippet.html content=pagination_small_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_small_example horizontal=true more=true %}
{% include snippet.html content=pagination_medium_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
{% include snippet.html content=pagination_large_example horizontal=true clipped=true %}
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
{% include variables.html %}

30
docs/documentation/components/tabs.html
View File

@ -384,7 +384,7 @@ variables:
{% include snippet.html content=tabs_example horizontal=true %}
{% include snippet.html content=tabs_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_example horizontal=true more=true %}
{% include anchor.html name="Alignment" %}
@ -394,9 +394,9 @@ variables:
</p>
</div>
{% include snippet.html content=tabs_centered_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
{% include snippet.html content=tabs_right_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_right_example horizontal=true more=true %}
{% include anchor.html name="Icons" %}
@ -404,20 +404,20 @@ variables:
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
{% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include anchor.html name="Sizes" %}
<div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
{% include snippet.html content=tabs_small_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_small_example horizontal=true more=true %}
{% include snippet.html content=tabs_medium_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
{% include snippet.html content=tabs_large_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_large_example horizontal=true more=true %}
{% include anchor.html name="Styles" %}
@ -425,19 +425,19 @@ variables:
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
</div>
{% include snippet.html content=tabs_boxed_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
<p class="content">
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
</p>
{% include snippet.html content=tabs_toggle_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
<p class="content">
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p>
{% include snippet.html content=tabs_fullwidth_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
{% include anchor.html name="Combining" %}
@ -445,13 +445,13 @@ variables:
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
</div>
{% include snippet.html content=tabs_centered_boxed_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true clipped=true %}
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
{% include variables.html %}

2
docs/documentation/elements/box.html
View File

@ -79,7 +79,7 @@ variables:
</p>
</div>
{% include snippet.html content=box_example %}
{% include snippet.html content=box_example more=true %}
{% include variables.html %}

5
docs/documentation/elements/button.html
View File

@ -565,14 +565,11 @@ variables:
<h4 class="subtitle">With Font Awesome icons</h4>
{% include snippet.html content=button_fa_example %}
{% include snippet.html content=button_fa_example clipped=true %}
<div class="columns">
<div class="column">
<div class="content">
<p>
<span class="tag is-success">New!</span>
</p>
<p>
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
</p>

6
docs/documentation/elements/table.html
View File

@ -387,11 +387,7 @@ variables:
</p>
</div>
<div class="bd-example">
{{table_example}}
</div>
{% highlight html %}{{table_example}}{% endhighlight %}
{% include snippet.html content=table_example horizontal=true more=true %}
{% include anchor.html name="Modifiers" %}

6
docs/documentation/form/general.html
View File

@ -945,7 +945,7 @@ variables:
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
</div>
{% include snippet.html content=addons_expanded_example horizontal=true clipped=true %}
{% include snippet.html content=addons_expanded_example horizontal=true more=true %}
<div class="content">
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
@ -1011,7 +1011,7 @@ variables:
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
</div>
{% include snippet.html content=horizontal_form_example horizontal=true clipped=true %}
{% include snippet.html content=horizontal_form_example horizontal=true more=true %}
<div class="content">
<p>
@ -1033,7 +1033,7 @@ variables:
</ul>
</div>
{% include snippet.html content=field_label_example horizontal=true clipped=true %}
{% include snippet.html content=field_label_example horizontal=true more=true %}
{% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}

57
docs/documentation/layout/footer.html
View File

@ -10,6 +10,25 @@ variables:
{% include subnav-layout.html %}
{% capture footer_example %}
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
<p>
<a class="icon" href="https://github.com/jgthms/bulma">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Footer</h1>
@ -17,43 +36,7 @@ variables:
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
</h2>
<div class="bd-example">
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
<p>
<a class="icon" href="https://github.com/jgthms/bulma">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
</div>
{% highlight html %}
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
<p>
<a class="icon" href="https://github.com/jgthms/bulma">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
{% endhighlight %}
{% include snippet.html content=footer_example horizontal=true more=true %}
{% include variables.html layout=true %}
</div>

26
docs/documentation/layout/hero.html
View File

@ -650,27 +650,7 @@ doc-subtab: hero
{% 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">
{{ heroNavbarB }}
</div>
<div class="bd-highlight-clipped">
{% highlight html %}{{ heroNavbarB }}{% endhighlight %}
</div>
<div class="bd-example">
{{ heroNavbarC }}
</div>
<div class="bd-highlight-clipped">
{% highlight html %}{{ heroNavbarC }}{% endhighlight %}
</div>
{% include snippet.html content=heroNavbarA horizontal=true more=true %}
{% include snippet.html content=heroNavbarB horizontal=true more=true %}
{% include snippet.html content=heroNavbarC horizontal=true more=true %}
</section>

23
docs/documentation/layout/level.html
View File

@ -188,10 +188,7 @@ doc-subtab: level
</nav>
</div>
<div class="bd-example">
{{nav_example}}
</div>
{% highlight html %}{{nav_example}}{% endhighlight %}
{% include snippet.html content=nav_example horizontal=true more=true %}
{% include anchor.html name="Centered level" %}
@ -199,17 +196,9 @@ doc-subtab: level
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
</div>
<div class="bd-example">
{{nav_centered_example}}
</div>
{% include snippet.html content=nav_centered_example horizontal=true more=true %}
{% highlight html %}{{nav_centered_example}}{% endhighlight %}
<div class="bd-example">
{{nav_centered_bis_example}}
</div>
{% highlight html %}{{nav_centered_bis_example}}{% endhighlight %}
{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
{% include anchor.html name="Mobile level" %}
@ -217,11 +206,7 @@ doc-subtab: level
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
</div>
<div class="bd-example">
{{nav_mobile_example}}
</div>
{% highlight html %}{{nav_mobile_example}}{% endhighlight %}
{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
</div>
</section>

18
docs/documentation/layout/media-object.html
View File

@ -203,21 +203,13 @@ doc-subtab: media-object
</article>
</div>
<div class="bd-example">
{{media_example}}
</div>
{% highlight html %}{{media_example}}{% endhighlight %}
{% include snippet.html content=media_example horizontal=true more=true %}
<div class="content">
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
</div>
<div class="bd-example">
{{media_bis_example}}
</div>
{% highlight html %}{{media_bis_example}}{% endhighlight %}
{% include snippet.html content=media_bis_example horizontal=true more=true %}
{% include anchor.html name="Nesting" %}
@ -225,11 +217,7 @@ doc-subtab: media-object
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
</div>
<div class="bd-example">
{{media_nested_example}}
</div>
{% highlight html %}{{media_nested_example}}{% endhighlight %}
{% include snippet.html content=media_nested_example horizontal=true more=true %}
</div>
</section>

34
docs/documentation/modifiers/syntax.html
View File

@ -7,6 +7,18 @@ doc-subtab: syntax
{% include subnav-modifiers.html %}
{% capture button_example %}
<a class="button">
Button
</a>
{% endcapture %}
{% capture button_primary_example %}
<a class="button is-primary">
Button
</a>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Modifiers syntax</h1>
@ -18,40 +30,26 @@ doc-subtab: syntax
<div class="column">
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
</div>
{% capture button_example %}
<a class="button">
Button
</a>
{% endcapture %}
<div class="column">
<p>
{{button_example}}
</p>
</div>
<div class="column is-half">
{% highlight html %}
{{button_example}}
{% endhighlight %}
{% highlight html %}{{button_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
</div>
{% capture button_primary_example %}
<a class="button is-primary">
Button
</a>
{% endcapture %}
<div class="column">
<p>
{{button_primary_example}}
{{button_primary_example}}
</p>
</div>
<div class="column is-half">
{% highlight html %}
{{button_primary_example}}
{% endhighlight %}
{% highlight html %}{{button_primary_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
@ -85,6 +83,7 @@ doc-subtab: syntax
</p>
</div>
<div class="column is-half">
<div class="highlight-full">
{% highlight html %}
<a class="button is-primary">
Button
@ -102,6 +101,7 @@ doc-subtab: syntax
Button
</a>
{% endhighlight %}
</div>
</div>
</div>
<div class="columns">

13
docs/lib/main.js
View File

@ -109,15 +109,12 @@ document.addEventListener('DOMContentLoaded', function () {
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copyEl);
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
}
var $parent = $el.parentNode;
if ($parent && $parent.className == 'bd-highlight-clipped') {
if ($parent && $parent.classList.contains('bd-is-more')) {
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);
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
}
itemsProcessed++;
@ -148,11 +145,11 @@ document.addEventListener('DOMContentLoaded', function () {
});
});
var $highlightShows = getAll('.bd-highlight-clipped .bd-show');
var $highlightShows = getAll('.highlight .bd-show');
$highlightShows.forEach(function ($el) {
$el.addEventListener('click', function () {
$el.parentNode.classList.remove('bd-is-clipped');
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
});
});
}