library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add more color documentation, Add light buttons to docs

Browse Source
This commit is contained in:
Jeremy Thomas 2019-10-13 18:51:12 +01:00
parent d0c84b97c9
commit d4c7731792
11 changed files with 373 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_includes/elements/new-tag.html
View File

@ -3,8 +3,8 @@
<div class="tags has-addons">
{% if tag_version_value > current_version_value %}
<span class="tag is-warning">Coming soon!</span>
<span class="tag is-danger">{{ include.version }}</span>
<span class="tag">Coming soon!</span>
<span class="tag is-warning">{{ include.version }}</span>
{% elsif tag_version_value == current_version_value %}
<span class="tag">New!</span>
<span class="tag is-success">{{ include.version }}</span>
@ -12,4 +12,4 @@
<span class="tag">Since</span>
<span class="tag is-info">{{ include.version }}</span>
{% endif %}
</div>
</div>

41
docs/bulma-dark.sass Normal file
View File

@ -0,0 +1,41 @@
@import ../sass/utilities/initial-variables.sass
// General colors
$scheme-main: $black
$scheme-main-bis: $black-bis
$scheme-main-ter: $black-ter
$scheme-invert: $white
$scheme-invert-bis: $white-bis
$scheme-invert-ter: $white-ter
$background: $black-ter
$border: $grey-darker
$border-hover: $grey-dark
$border-light: $grey-darker
$border-light-hover: $grey-dark
// Text colors
$text: $grey-light
$text-invert: $grey-darker
$text-light: $grey
$text-strong: $white
// Link colors
$link-hover: $white
$link-hover-border: $grey-dark
$link-focus: $white
$link-focus-border: $blue
$link-active: $white
$link-active-border: $grey-light
.bd-navbar
background-color: $scheme-main-bis
&.has-shadow
box-shadow: none

35
docs/bulma-dark.scss
View File

@ -1,35 +0,0 @@
@import "../sass/utilities/initial-variables.sass";
// General colors
$scheme-main: $black;
$scheme-main-bis: $black-bis;
$scheme-main-ter: $black-ter;
$scheme-invert: $white;
$scheme-invert-bis: $white-bis;
$scheme-invert-ter: $white-ter;
$background: $black-ter;
$border: $grey-darker;
$border-hover: $grey-dark;
$border-light: $grey-darker;
$border-light-hover: $grey-dark;
// Text colors
$text: $grey-light;
$text-invert: $grey-darker;
$text-light: $grey;
$text-strong: $white;
// Link colors
$link-hover: $white;
$link-hover-border: $grey-dark;
$link-focus: $white;
$link-focus-border: $blue;
$link-active: $white;
$link-active-border: $grey-light;

2
docs/bulma-docs.sass
View File

@ -24,7 +24,7 @@ $main-spacing: 3rem
$intro-width: 1080px
$sidebar-width: 10.5rem
// @import "./bulma-dark.scss"
// @import "./bulma-dark"
@import "../bulma"
%center

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

@ -15,7 +15,7 @@ meta:
---
{% capture button_example %}
<a class="button">Button</a>
<button class="button">Button</button>
{% endcapture %}
{% capture button_tags_example %}
@ -26,137 +26,156 @@ meta:
{% endcapture %}
{% capture button_colors_a_example %}
<a class="button is-white">White</a>
<a class="button is-light">Light</a>
<a class="button is-dark">Dark</a>
<a class="button is-black">Black</a>
<a class="button is-text">Text</a>
<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
{% endcapture %}
{% capture button_colors_b_example %}
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>
<div class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
</div>
<div class="buttons">
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
</div>
{% endcapture %}
{% capture button_light_colors_b_example %}
<div class="buttons">
<button class="button is-primary is-light">Primary</button>
<button class="button is-link is-light">Link</button>
</div>
<div class="buttons">
<button class="button is-info is-light">Info</button>
<button class="button is-success is-light">Success</button>
<button class="button is-warning is-light">Warning</button>
<button class="button is-danger is-light">Danger</button>
</div>
{% endcapture %}
{% capture button_sizes_example %}
<a class="button is-small">Small</a>
<a class="button">Default</a>
<a class="button is-normal">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>
<button class="button is-small">Small</button>
<button class="button">Default</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>
{% endcapture %}
{% capture buttons_medium_sizes_example %}
<div class="buttons are-medium">
<a class="button">All</a>
<a class="button">Medium</a>
<a class="button">Size</a>
<button class="button">All</button>
<button class="button">Medium</button>
<button class="button">Size</button>
</div>
{% endcapture %}
{% capture buttons_small_normal_sizes_example %}
<div class="buttons are-small">
<a class="button">Small</a>
<a class="button">Small</a>
<a class="button">Small</a>
<a class="button is-normal">Normal</a>
<a class="button">Small</a>
<button class="button">Small</button>
<button class="button">Small</button>
<button class="button">Small</button>
<button class="button is-normal">Normal</button>
<button class="button">Small</button>
</div>
{% endcapture %}
{% capture button_displays_example %}
<a class="button is-small is-fullwidth">Small</a>
<a class="button is-fullwidth">Normal</a>
<a class="button is-medium is-fullwidth">Medium</a>
<a class="button is-large is-fullwidth">Large</a>
<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>
{% endcapture %}
{% capture button_outlined_example %}
<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-link is-outlined">Outlined</a>
<a class="button is-info is-outlined">Outlined</a>
<a class="button is-success is-outlined">Outlined</a>
<a class="button is-danger is-outlined">Outlined</a>
<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-link is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-danger is-outlined">Outlined</button>
{% endcapture %}
{% capture button_inverted_example %}
<a class="button is-primary is-inverted">Inverted</a>
<a class="button is-link is-inverted">Inverted</a>
<a class="button is-info is-inverted">Inverted</a>
<a class="button is-success is-inverted">Inverted</a>
<a class="button is-danger is-inverted">Inverted</a>
<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-link is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>
<button class="button is-danger is-inverted">Inverted</button>
{% endcapture %}
{% capture button_inverted_outlined_example %}
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-link is-inverted is-outlined">Invert Outlined</a>
<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
<button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
<button class="button is-link is-inverted is-outlined">Invert Outlined</button>
<button class="button is-info is-inverted is-outlined">Invert Outlined</button>
<button class="button is-success is-inverted is-outlined">Invert Outlined</button>
<button class="button is-danger is-inverted is-outlined">Invert Outlined</button>
{% endcapture %}
{% capture button_rounded_example %}
<a class="button is-rounded">Rounded</a>
<a class="button is-primary is-rounded">Rounded</a>
<a class="button is-link is-rounded">Rounded</a>
<a class="button is-info is-rounded">Rounded</a>
<a class="button is-success is-rounded">Rounded</a>
<a class="button is-danger is-rounded">Rounded</a>
<button class="button is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-info is-rounded">Rounded</button>
<button class="button is-success is-rounded">Rounded</button>
<button class="button is-danger is-rounded">Rounded</button>
{% endcapture %}
{% capture button_normal_example %}
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-link">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
<a class="button is-danger">Normal</a>
<button class="button">Normal</button>
<button class="button is-primary">Normal</button>
<button class="button is-link">Normal</button>
<button class="button is-info">Normal</button>
<button class="button is-success">Normal</button>
<button class="button is-warning">Normal</button>
<button class="button is-danger">Normal</button>
{% endcapture %}
{% capture button_hover_example %}
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-link is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
<a class="button is-danger is-hovered">Hover</a>
<button class="button is-hovered">Hover</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-link is-hovered">Hover</button>
<button class="button is-info is-hovered">Hover</button>
<button class="button is-success is-hovered">Hover</button>
<button class="button is-warning is-hovered">Hover</button>
<button class="button is-danger is-hovered">Hover</button>
{% endcapture %}
{% capture button_focus_example %}
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-link is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>
<button class="button is-focused">Focus</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-link is-focused">Focus</button>
<button class="button is-info is-focused">Focus</button>
<button class="button is-success is-focused">Focus</button>
<button class="button is-warning is-focused">Focus</button>
<button class="button is-danger is-focused">Focus</button>
{% endcapture %}
{% capture button_active_example %}
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link is-active">Active</a>
<a class="button is-info is-active">Active</a>
<a class="button is-success is-active">Active</a>
<a class="button is-warning is-active">Active</a>
<a class="button is-danger is-active">Active</a>
<button class="button is-active">Active</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-link is-active">Active</button>
<button class="button is-info is-active">Active</button>
<button class="button is-success is-active">Active</button>
<button class="button is-warning is-active">Active</button>
<button class="button is-danger is-active">Active</button>
{% endcapture %}
{% capture button_loading_example %}
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
<button class="button is-loading">Loading</button>
<button class="button is-primary is-loading">Loading</button>
<button class="button is-link is-loading">Loading</button>
<button class="button is-info is-loading">Loading</button>
<button class="button is-success is-loading">Loading</button>
<button class="button is-warning is-loading">Loading</button>
<button class="button is-danger is-loading">Loading</button>
{% endcapture %}
{% capture button_static_example %}
@ -164,159 +183,159 @@ meta:
{% endcapture %}
{% capture button_disabled_example %}
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-link" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>
<button class="button" title="Disabled button" disabled>Disabled</button>
<button class="button is-primary" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>Disabled</button>
<button class="button is-info" title="Disabled button" disabled>Disabled</button>
<button class="button is-success" title="Disabled button" disabled>Disabled</button>
<button class="button is-warning" title="Disabled button" disabled>Disabled</button>
<button class="button is-danger" title="Disabled button" disabled>Disabled</button>
{% endcapture %}
{% capture button_fa_example %}
<p class="buttons">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-bold"></i>
</span>
</a>
<a class="button">
</button>
<button class="button">
<span class="icon is-small">
<i class="fas fa-italic"></i>
</span>
</a>
<a class="button">
</button>
<button class="button">
<span class="icon is-small">
<i class="fas fa-underline"></i>
</span>
</a>
</button>
</p>
<p class="buttons">
<a class="button">
<button class="button">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button is-primary">
</button>
<button class="button is-primary">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>Twitter</span>
</a>
<a class="button is-success">
</button>
<button class="button is-success">
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
<span>Save</span>
</a>
<a class="button is-danger is-outlined">
</button>
<button class="button is-danger is-outlined">
<span>Delete</span>
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
</sbuttonan>
</a>
</p>
<p class="buttons">
<a class="button is-small">
<button class="button is-small">
<span class="icon is-small">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button">
</button>
<button class="button">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button is-medium">
</button>
<button class="button is-medium">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="button is-large">
</button>
<button class="button is-large">
<span class="icon is-medium">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
</button>
</p>
{% endcapture %}
{% capture button_only_icon_example %}
<p class="buttons">
<a class="button is-small">
<button class="button is-small">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
</button>
</p>
<p class="buttons">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</a>
</button>
<button class="button">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</button>
</p>
<p class="buttons">
<a class="button is-medium">
<button class="button is-medium">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</a>
<a class="button is-medium">
</button>
<button class="button is-medium">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</button>
<button class="button is-medium">
<span class="icon is-medium">
<i class="fas fa-heading fa-2x"></i>
</span>
</a>
</button>
</p>
<p class="buttons">
<a class="button is-large">
<button class="button is-large">
<span class="icon is-small">
<i class="fas fa-heading"></i>
</span>
</a>
<a class="button is-large">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</a>
<a class="button is-large">
</button>
<button class="button is-large">
<span class="icon">
<i class="fas fa-heading fa-lg"></i>
</span>
</button>
<button class="button is-large">
<span class="icon is-medium">
<i class="fas fa-heading fa-2x"></i>
</span>
</a>
</button>
</p>
{% endcapture %}
{% capture button_group_example %}
<div class="field is-grouped">
<p class="control">
<a class="button is-link">
<button class="button is-link">
Save changes
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
Cancel
</a>
</button>
</p>
<p class="control">
<a class="button is-danger">
<button class="button is-danger">
Delete post
</a>
</button>
</p>
</div>
{% endcapture %}
@ -324,28 +343,28 @@ meta:
{% capture button_addons_example %}
<div class="field has-addons">
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-left"></i>
</span>
<span>Left</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-center"></i>
</span>
<span>Center</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-right"></i>
</span>
<span>Right</span>
</a>
</button>
</p>
</div>
{% endcapture %}
@ -353,133 +372,133 @@ meta:
{% capture button_group_addons_example %}
<div class="field has-addons">
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-bold"></i>
</span>
<span>Bold</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-italic"></i>
</span>
<span>Italic</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-underline"></i>
</span>
<span>Underline</span>
</a>
</button>
</p>
</div>
<div class="field has-addons">
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-left"></i>
</span>
<span>Left</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-center"></i>
</span>
<span>Center</span>
</a>
</button>
</p>
<p class="control">
<a class="button">
<button class="button">
<span class="icon is-small">
<i class="fas fa-align-right"></i>
</span>
<span>Right</span>
</a>
</button>
</p>
</div>
{% endcapture %}
{% capture buttons_list %}
<div class="buttons">
<span class="button is-success">Save changes</span>
<span class="button is-info">Save and continue</span>
<span class="button is-danger">Cancel</span>
<button class="button is-success">Save changes</button>
<button class="button is-info">Save and continue</button>
<button class="button is-danger">Cancel</button>
</div>
{% endcapture %}
{% capture buttons_multiple %}
<div class="buttons">
<span class="button">One</span>
<span class="button">Two</span>
<span class="button">Three</span>
<span class="button">Four</span>
<span class="button">Five</span>
<span class="button">Six</span>
<span class="button">Seven</span>
<span class="button">Eight</span>
<span class="button">Nine</span>
<span class="button">Ten</span>
<span class="button">Eleven</span>
<span class="button">Twelve</span>
<span class="button">Thirteen</span>
<span class="button">Fourteen</span>
<span class="button">Fifteen</span>
<span class="button">Sixteen</span>
<span class="button">Seventeen</span>
<span class="button">Eighteen</span>
<span class="button">Nineteen</span>
<span class="button">Twenty</span>
<button class="button">One</button>
<button class="button">Two</button>
<button class="button">Three</button>
<button class="button">Four</button>
<button class="button">Five</button>
<button class="button">Six</button>
<button class="button">Seven</button>
<button class="button">Eight</button>
<button class="button">Nine</button>
<button class="button">Ten</button>
<button class="button">Eleven</button>
<button class="button">Twelve</button>
<button class="button">Thirteen</button>
<button class="button">Fourteen</button>
<button class="button">Fifteen</button>
<button class="button">Sixteen</button>
<button class="button">Seventeen</button>
<button class="button">Eighteen</button>
<button class="button">Nineteen</button>
<button class="button">Twenty</button>
</div>
{% endcapture %}
{% capture buttons_addons %}
<div class="buttons has-addons">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_centered %}
<div class="buttons has-addons is-centered">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_right %}
<div class="buttons has-addons is-right">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_selected %}
<div class="buttons has-addons">
<span class="button is-success is-selected">Yes</span>
<span class="button">Maybe</span>
<span class="button">No</span>
<button class="button is-success is-selected">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
<div class="buttons has-addons">
<span class="button">Yes</span>
<span class="button is-info is-selected">Maybe</span>
<span class="button">No</span>
<button class="button">Yes</button>
<button class="button is-info is-selected">Maybe</button>
<button class="button">No</button>
</div>
<div class="buttons has-addons">
<span class="button">Yes</span>
<span class="button">Maybe</span>
<span class="button is-danger is-selected">No</span>
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button is-danger is-selected">No</button>
</div>
{% endcapture %}
@ -515,9 +534,25 @@ meta:
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The button is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %}
{% include elements/snippet.html wrapper="buttons" content=button_colors_b_example %}
{% include elements/snippet.html content=button_colors_b_example %}
{% include elements/new-tag.html version="0.8.0" %}
<div class="content">
<p>
Each color now comes in its <strong>light version</strong>. Simply append the modifier <code>is-light</code> to the color modifier to apply the light version of the button.
</p>
</div>
{% include elements/snippet.html content=button_light_colors_b_example %}
{% include elements/anchor.html name="Sizes" %}
@ -633,6 +668,26 @@ meta:
{% include elements/anchor.html name="States" %}
<div class="content">
<p>
Bulma styles the different <strong>states</strong> of its buttons. Each state is available as a pseudo-class and a CSS class:
</p>
<ul>
<li>
<code>:hover</code> and <code>.is-hovered</code>
</li>
<li>
<code>:focus</code> and <code>.is-focused</code>
</li>
<li>
<code>:active</code> and <code>.is-active</code>
</li>
</ul>
<p>
This allows you to obtain the style of a certain state without having to trigger it.
</p>
</div>
<h4 class="subtitle">Normal</h4>
{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}
@ -651,6 +706,12 @@ meta:
<h4 class="subtitle">Loading</h4>
<div class="content">
<p>
You can very easily turn a button into its <strong>loading</strong> version by appending the <code>.is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain its <strong>original size</strong> between its default and loading states.
</p>
</div>
<div class="columns">
<div class="column">
<div class="buttons">
@ -659,7 +720,7 @@ meta:
<div class="message is-info">
<div class="message-body">
<p>
Since the loading spinner is implemented using the <code>:after</code> pseudo-element, it is not supported by the <code>&lt;input type="submit"&gt;</code> element. Consider using <code>&lt;button type="submit"&gt;</code> instead.
Since the loading spinner is implemented using the <code>::after</code> pseudo-element, it is not supported by the <code>&lt;input&nbsp;type="submit"&gt;</code> element. Consider using <code>&lt;button&nbsp;type="submit"&gt;</code> instead.
</p>
</div>
</div>
@ -689,6 +750,12 @@ meta:
<h4 class="subtitle">Disabled</h4>
<div class="content">
<p>
Bulma supports the use of the <code>disabled</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" target="_blank">Boolean HTML attribute</a>, which prevents the user from interacting with the button.
</p>
</div>
<div class="columns">
<div class="column">
<div class="buttons">
@ -707,6 +774,12 @@ meta:
<h4 class="subtitle">With Font Awesome icons</h4>
<div class="content">
<p>
Bulma buttons can easily be enhanced by adding a <strong>Font Awesome icon</strong>. For the best results, wrap the inner text in a separate <code>&lt;span&gt;</code> element.
</p>
</div>
{% include elements/snippet.html content=button_fa_example clipped=true %}
<div class="columns">
@ -755,7 +828,7 @@ meta:
<div class="column">
<div class="content">
<p>
You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
You can create a <strong>list of buttons</strong> by using the <code>.buttons</code> container.
</p>
</div>
<div class="bd-example">

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

@ -52,10 +52,22 @@ document.addEventListener('DOMContentLoaded', () => {
});
{% endcapture %}
<div class="content">
<p>
The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the <code>.delete</code> element.
</p>
</div>
{% include elements/snippet.html content=notification %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The notification element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html content=notification_colors %}
<div id="notificationJsExample" class="message is-info">
@ -63,18 +75,12 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="message-body">
<div class="content">
<p>
The Bulma package <strong>does not come with any JavaScript</strong>.
<br>
Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
</p>
{% highlight html %}{{ notification_js_html }}{% endhighlight %}
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
<p>
Remember, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
</p>
</div>
</div>
</div>

12
docs/documentation/elements/progress.html
View File

@ -41,10 +41,22 @@ meta:
<progress class="progress is-large is-info" max="100">60%</progress>
{% endcapture %}
<div class="content">
<p>
The Bulma progress bar is a simple CSS class that styles the native <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress" target="_blank"><code>&lt;progress&gt;</code> HTML element</a>.
</p>
</div>
{% include elements/snippet.html content=progress %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The progress bar element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html content=progress_colors %}
{% include elements/anchor.html name="Sizes" %}

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

@ -101,7 +101,7 @@ variables_keys:
<button class="button is-link">Submit</button>
</div>
<div class="control">
<button class="button is-text">Cancel</button>
<button class="button is-link is-light">Cancel</button>
</div>
</div>
{% endcapture %}

35
sass/components/message.sass
View File

@ -37,34 +37,33 @@ $message-colors: $colors !default
&.is-large
font-size: $size-large
// Colors
@each $name, $pair in $message-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
@each $name, $components in $message-colors
$color: nth($components, 1)
$color-invert: nth($components, 2)
$color-light: null
$color-dark: null
$light-background: null
@if length($pair) > 2
$light-background: nth($pair, 3)
@if length($components) >= 3
$color-light: nth($components, 3)
@if length($components) >= 4
$color-dark: nth($components, 4)
@else
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
@else
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$light-background: lighten($color, $color-lightning)
$dark-color: null
@if length($pair) > 3
$dark-color: nth($pair, 4)
@else
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
$dark-color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
$color-light: lighten($color, $color-lightning)
&.is-#{$name}
background-color: $light-background
background-color: $color-light
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
color: $dark-color
color: $color-dark
.message-header
align-items: center

1
sass/components/pagination.sass
View File

@ -30,6 +30,7 @@ $pagination-ellipsis-color: $grey-light !default
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
.pagination
@extend %block
font-size: $size-normal
margin: $pagination-margin
// Sizes

2
sass/elements/button.sass
View File

@ -207,7 +207,7 @@ $button-static-border-color: $border !default
box-shadow: none
color: $color-invert
// If light and dark colors are provided
@if length($pair) > 3
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light