Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
docs/documentation/elements/notification.html
View File

@@ -18,33 +18,10 @@ meta:
<div class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
</div>
{% endcapture %}
{% capture notification_colors %}
{% for color in site.data.colors.justColors %}
<div class="notification is-{{ color }}">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endfor %}
{% endcapture %}
{% capture notification_light_colors %}
{% for color in site.data.colors.justColors %}
<div class="notification is-{{ color }} is-light">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endfor %}
{% endcapture %}
{% capture notification_js_html %}
<div class="notification">
<button class="delete"></button>
@@ -55,7 +32,7 @@ meta:
{% capture notification_js_code %}
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
var $notification = $delete.parentNode;
const $notification = $delete.parentNode;
$delete.addEventListener('click', () => {
$notification.parentNode.removeChild($notification);
@@ -80,15 +57,33 @@ document.addEventListener('DOMContentLoaded', () => {
</p>
</div>
{% include elements/snippet.html content=notification_colors %}
{% for color in site.data.colors.justColors %}
{% capture foobar %}
<div class="notification is-{{ color }}">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
</div>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="Light colors" %}
{% include elements/new-tag.html version="0.8.1" %}
<div class="content">
Each color also comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
</div>
Each color now comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
{% include elements/snippet.html content=notification_light_colors %}
{% for color in site.data.colors.justColors %}
{% capture foobar %}
<div class="notification is-{{ color }} is-light">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
</div>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="JavaScript example" %}
@@ -102,4 +97,4 @@ Each color now comes in its <strong>light</strong> version. Simply append the <c
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
</div>
{% include elements/variables.html type='element' %}
{% include components/variables.html type='element' %}