Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 20:54:30 -07:00
Code Issues 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
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"> <div class="tags has-addons">
{% if tag_version_value > current_version_value %} {% if tag_version_value > current_version_value %}
<span class="tag is-warning">Coming soon!</span> <span class="tag">Coming soon!</span>
<span class="tag is-danger">{{ include.version }}</span> <span class="tag is-warning">{{ include.version }}</span>
{% elsif tag_version_value == current_version_value %} {% elsif tag_version_value == current_version_value %}
<span class="tag">New!</span> <span class="tag">New!</span>
<span class="tag is-success">{{ include.version }}</span> <span class="tag is-success">{{ include.version }}</span>
@@ -12,4 +12,4 @@
<span class="tag">Since</span> <span class="tag">Since</span>
<span class="tag is-info">{{ include.version }}</span> <span class="tag is-info">{{ include.version }}</span>
{% endif %} {% 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 $intro-width: 1080px
$sidebar-width: 10.5rem $sidebar-width: 10.5rem
// @import "./bulma-dark.scss" // @import "./bulma-dark"
@import "../bulma" @import "../bulma"
%center %center

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

@@ -15,7 +15,7 @@ meta:
--- ---
{% capture button_example %} {% capture button_example %}
<a class="button">Button</a> <button class="button">Button</button>
{% endcapture %} {% endcapture %}
{% capture button_tags_example %} {% capture button_tags_example %}
@@ -26,137 +26,156 @@ meta:
{% endcapture %} {% endcapture %}
{% capture button_colors_a_example %} {% capture button_colors_a_example %}
<a class="button is-white">White</a> <button class="button is-white">White</button>
<a class="button is-light">Light</a> <button class="button is-light">Light</button>
<a class="button is-dark">Dark</a> <button class="button is-dark">Dark</button>
<a class="button is-black">Black</a> <button class="button is-black">Black</button>
<a class="button is-text">Text</a> <button class="button is-text">Text</button>
{% endcapture %} {% endcapture %}
{% capture button_colors_b_example %} {% capture button_colors_b_example %}
<a class="button is-primary">Primary</a> <div class="buttons">
<a class="button is-link">Link</a> <button class="button is-primary">Primary</button>
<a class="button is-info">Info</a> <button class="button is-link">Link</button>
<a class="button is-success">Success</a> </div>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a> <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 %} {% endcapture %}
{% capture button_sizes_example %} {% capture button_sizes_example %}
<a class="button is-small">Small</a> <button class="button is-small">Small</button>
<a class="button">Default</a> <button class="button">Default</button>
<a class="button is-normal">Normal</a> <button class="button is-normal">Normal</button>
<a class="button is-medium">Medium</a> <button class="button is-medium">Medium</button>
<a class="button is-large">Large</a> <button class="button is-large">Large</button>
{% endcapture %} {% endcapture %}
{% capture buttons_medium_sizes_example %} {% capture buttons_medium_sizes_example %}
<div class="buttons are-medium"> <div class="buttons are-medium">
<a class="button">All</a> <button class="button">All</button>
<a class="button">Medium</a> <button class="button">Medium</button>
<a class="button">Size</a> <button class="button">Size</button>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture buttons_small_normal_sizes_example %} {% capture buttons_small_normal_sizes_example %}
<div class="buttons are-small"> <div class="buttons are-small">
<a class="button">Small</a> <button class="button">Small</button>
<a class="button">Small</a> <button class="button">Small</button>
<a class="button">Small</a> <button class="button">Small</button>
<a class="button is-normal">Normal</a> <button class="button is-normal">Normal</button>
<a class="button">Small</a> <button class="button">Small</button>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture button_displays_example %} {% capture button_displays_example %}
<a class="button is-small is-fullwidth">Small</a> <button class="button is-small is-fullwidth">Small</button>
<a class="button is-fullwidth">Normal</a> <button class="button is-fullwidth">Normal</button>
<a class="button is-medium is-fullwidth">Medium</a> <button class="button is-medium is-fullwidth">Medium</button>
<a class="button is-large is-fullwidth">Large</a> <button class="button is-large is-fullwidth">Large</button>
{% endcapture %} {% endcapture %}
{% capture button_outlined_example %} {% capture button_outlined_example %}
<a class="button is-outlined">Outlined</a> <button class="button is-outlined">Outlined</button>
<a class="button is-primary is-outlined">Outlined</a> <button class="button is-primary is-outlined">Outlined</button>
<a class="button is-link is-outlined">Outlined</a> <button class="button is-link is-outlined">Outlined</button>
<a class="button is-info is-outlined">Outlined</a> <button class="button is-info is-outlined">Outlined</button>
<a class="button is-success is-outlined">Outlined</a> <button class="button is-success is-outlined">Outlined</button>
<a class="button is-danger is-outlined">Outlined</a> <button class="button is-danger is-outlined">Outlined</button>
{% endcapture %} {% endcapture %}
{% capture button_inverted_example %} {% capture button_inverted_example %}
<a class="button is-primary is-inverted">Inverted</a> <button class="button is-primary is-inverted">Inverted</button>
<a class="button is-link is-inverted">Inverted</a> <button class="button is-link is-inverted">Inverted</button>
<a class="button is-info is-inverted">Inverted</a> <button class="button is-info is-inverted">Inverted</button>
<a class="button is-success is-inverted">Inverted</a> <button class="button is-success is-inverted">Inverted</button>
<a class="button is-danger is-inverted">Inverted</a> <button class="button is-danger is-inverted">Inverted</button>
{% endcapture %} {% endcapture %}
{% capture button_inverted_outlined_example %} {% capture button_inverted_outlined_example %}
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a> <button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
<a class="button is-link is-inverted is-outlined">Invert Outlined</a> <button class="button is-link is-inverted is-outlined">Invert Outlined</button>
<a class="button is-info is-inverted is-outlined">Invert Outlined</a> <button class="button is-info is-inverted is-outlined">Invert Outlined</button>
<a class="button is-success is-inverted is-outlined">Invert Outlined</a> <button class="button is-success is-inverted is-outlined">Invert Outlined</button>
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a> <button class="button is-danger is-inverted is-outlined">Invert Outlined</button>
{% endcapture %} {% endcapture %}
{% capture button_rounded_example %} {% capture button_rounded_example %}
<a class="button is-rounded">Rounded</a> <button class="button is-rounded">Rounded</button>
<a class="button is-primary is-rounded">Rounded</a> <button class="button is-primary is-rounded">Rounded</button>
<a class="button is-link is-rounded">Rounded</a> <button class="button is-link is-rounded">Rounded</button>
<a class="button is-info is-rounded">Rounded</a> <button class="button is-info is-rounded">Rounded</button>
<a class="button is-success is-rounded">Rounded</a> <button class="button is-success is-rounded">Rounded</button>
<a class="button is-danger is-rounded">Rounded</a> <button class="button is-danger is-rounded">Rounded</button>
{% endcapture %} {% endcapture %}
{% capture button_normal_example %} {% capture button_normal_example %}
<a class="button">Normal</a> <button class="button">Normal</button>
<a class="button is-primary">Normal</a> <button class="button is-primary">Normal</button>
<a class="button is-link">Normal</a> <button class="button is-link">Normal</button>
<a class="button is-info">Normal</a> <button class="button is-info">Normal</button>
<a class="button is-success">Normal</a> <button class="button is-success">Normal</button>
<a class="button is-warning">Normal</a> <button class="button is-warning">Normal</button>
<a class="button is-danger">Normal</a> <button class="button is-danger">Normal</button>
{% endcapture %} {% endcapture %}
{% capture button_hover_example %} {% capture button_hover_example %}
<a class="button is-hovered">Hover</a> <button class="button is-hovered">Hover</button>
<a class="button is-primary is-hovered">Hover</a> <button class="button is-primary is-hovered">Hover</button>
<a class="button is-link is-hovered">Hover</a> <button class="button is-link is-hovered">Hover</button>
<a class="button is-info is-hovered">Hover</a> <button class="button is-info is-hovered">Hover</button>
<a class="button is-success is-hovered">Hover</a> <button class="button is-success is-hovered">Hover</button>
<a class="button is-warning is-hovered">Hover</a> <button class="button is-warning is-hovered">Hover</button>
<a class="button is-danger is-hovered">Hover</a> <button class="button is-danger is-hovered">Hover</button>
{% endcapture %} {% endcapture %}
{% capture button_focus_example %} {% capture button_focus_example %}
<a class="button is-focused">Focus</a> <button class="button is-focused">Focus</button>
<a class="button is-primary is-focused">Focus</a> <button class="button is-primary is-focused">Focus</button>
<a class="button is-link is-focused">Focus</a> <button class="button is-link is-focused">Focus</button>
<a class="button is-info is-focused">Focus</a> <button class="button is-info is-focused">Focus</button>
<a class="button is-success is-focused">Focus</a> <button class="button is-success is-focused">Focus</button>
<a class="button is-warning is-focused">Focus</a> <button class="button is-warning is-focused">Focus</button>
<a class="button is-danger is-focused">Focus</a> <button class="button is-danger is-focused">Focus</button>
{% endcapture %} {% endcapture %}
{% capture button_active_example %} {% capture button_active_example %}
<a class="button is-active">Active</a> <button class="button is-active">Active</button>
<a class="button is-primary is-active">Active</a> <button class="button is-primary is-active">Active</button>
<a class="button is-link is-active">Active</a> <button class="button is-link is-active">Active</button>
<a class="button is-info is-active">Active</a> <button class="button is-info is-active">Active</button>
<a class="button is-success is-active">Active</a> <button class="button is-success is-active">Active</button>
<a class="button is-warning is-active">Active</a> <button class="button is-warning is-active">Active</button>
<a class="button is-danger is-active">Active</a> <button class="button is-danger is-active">Active</button>
{% endcapture %} {% endcapture %}
{% capture button_loading_example %} {% capture button_loading_example %}
<a class="button is-loading">Loading</a> <button class="button is-loading">Loading</button>
<a class="button is-primary is-loading">Loading</a> <button class="button is-primary is-loading">Loading</button>
<a class="button is-link is-loading">Loading</a> <button class="button is-link is-loading">Loading</button>
<a class="button is-info is-loading">Loading</a> <button class="button is-info is-loading">Loading</button>
<a class="button is-success is-loading">Loading</a> <button class="button is-success is-loading">Loading</button>
<a class="button is-warning is-loading">Loading</a> <button class="button is-warning is-loading">Loading</button>
<a class="button is-danger is-loading">Loading</a> <button class="button is-danger is-loading">Loading</button>
{% endcapture %} {% endcapture %}
{% capture button_static_example %} {% capture button_static_example %}
@@ -164,159 +183,159 @@ meta:
{% endcapture %} {% endcapture %}
{% capture button_disabled_example %} {% capture button_disabled_example %}
<a class="button" title="Disabled button" disabled>Disabled</a> <button class="button" title="Disabled button" disabled>Disabled</button>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a> <button class="button is-primary" title="Disabled button" disabled>Disabled</button>
<a class="button is-link" title="Disabled button" disabled>Disabled</a> <button class="button is-link" title="Disabled button" disabled>Disabled</button>
<a class="button is-info" title="Disabled button" disabled>Disabled</a> <button class="button is-info" title="Disabled button" disabled>Disabled</button>
<a class="button is-success" title="Disabled button" disabled>Disabled</a> <button class="button is-success" title="Disabled button" disabled>Disabled</button>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a> <button class="button is-warning" title="Disabled button" disabled>Disabled</button>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a> <button class="button is-danger" title="Disabled button" disabled>Disabled</button>
{% endcapture %} {% endcapture %}
{% capture button_fa_example %} {% capture button_fa_example %}
<p class="buttons"> <p class="buttons">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-bold"></i> <i class="fas fa-bold"></i>
</span> </span>
</a> </button>
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-italic"></i> <i class="fas fa-italic"></i>
</span> </span>
</a> </button>
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-underline"></i> <i class="fas fa-underline"></i>
</span> </span>
</a> </button>
</p> </p>
<p class="buttons"> <p class="buttons">
<a class="button"> <button class="button">
<span class="icon"> <span class="icon">
<i class="fab fa-github"></i> <i class="fab fa-github"></i>
</span> </span>
<span>GitHub</span> <span>GitHub</span>
</a> </button>
<a class="button is-primary"> <button class="button is-primary">
<span class="icon"> <span class="icon">
<i class="fab fa-twitter"></i> <i class="fab fa-twitter"></i>
</span> </span>
<span>Twitter</span> <span>Twitter</span>
</a> </button>
<a class="button is-success"> <button class="button is-success">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-check"></i> <i class="fas fa-check"></i>
</span> </span>
<span>Save</span> <span>Save</span>
</a> </button>
<a class="button is-danger is-outlined"> <button class="button is-danger is-outlined">
<span>Delete</span> <span>Delete</span>
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>
</span> </sbuttonan>
</a> </a>
</p> </p>
<p class="buttons"> <p class="buttons">
<a class="button is-small"> <button class="button is-small">
<span class="icon is-small"> <span class="icon is-small">
<i class="fab fa-github"></i> <i class="fab fa-github"></i>
</span> </span>
<span>GitHub</span> <span>GitHub</span>
</a> </button>
<a class="button"> <button class="button">
<span class="icon"> <span class="icon">
<i class="fab fa-github"></i> <i class="fab fa-github"></i>
</span> </span>
<span>GitHub</span> <span>GitHub</span>
</a> </button>
<a class="button is-medium"> <button class="button is-medium">
<span class="icon"> <span class="icon">
<i class="fab fa-github"></i> <i class="fab fa-github"></i>
</span> </span>
<span>GitHub</span> <span>GitHub</span>
</a> </button>
<a class="button is-large"> <button class="button is-large">
<span class="icon is-medium"> <span class="icon is-medium">
<i class="fab fa-github"></i> <i class="fab fa-github"></i>
</span> </span>
<span>GitHub</span> <span>GitHub</span>
</a> </button>
</p> </p>
{% endcapture %} {% endcapture %}
{% capture button_only_icon_example %} {% capture button_only_icon_example %}
<p class="buttons"> <p class="buttons">
<a class="button is-small"> <button class="button is-small">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-heading"></i> <i class="fas fa-heading"></i>
</span> </span>
</a> </button>
</p> </p>
<p class="buttons"> <p class="buttons">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-heading"></i> <i class="fas fa-heading"></i>
</span> </span>
</a> </button>
<a class="button"> <button class="button">
<span class="icon"> <span class="icon">
<i class="fas fa-heading fa-lg"></i> <i class="fas fa-heading fa-lg"></i>
</span> </span>
</a> </button>
</p> </p>
<p class="buttons"> <p class="buttons">
<a class="button is-medium"> <button class="button is-medium">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-heading"></i> <i class="fas fa-heading"></i>
</span> </span>
</a> </button>
<a class="button is-medium"> <button class="button is-medium">
<span class="icon"> <span class="icon">
<i class="fas fa-heading fa-lg"></i> <i class="fas fa-heading fa-lg"></i>
</span> </span>
</a> </button>
<a class="button is-medium"> <button class="button is-medium">
<span class="icon is-medium"> <span class="icon is-medium">
<i class="fas fa-heading fa-2x"></i> <i class="fas fa-heading fa-2x"></i>
</span> </span>
</a> </button>
</p> </p>
<p class="buttons"> <p class="buttons">
<a class="button is-large"> <button class="button is-large">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-heading"></i> <i class="fas fa-heading"></i>
</span> </span>
</a> </button>
<a class="button is-large"> <button class="button is-large">
<span class="icon"> <span class="icon">
<i class="fas fa-heading fa-lg"></i> <i class="fas fa-heading fa-lg"></i>
</span> </span>
</a> </button>
<a class="button is-large"> <button class="button is-large">
<span class="icon is-medium"> <span class="icon is-medium">
<i class="fas fa-heading fa-2x"></i> <i class="fas fa-heading fa-2x"></i>
</span> </span>
</a> </button>
</p> </p>
{% endcapture %} {% endcapture %}
{% capture button_group_example %} {% capture button_group_example %}
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control"> <p class="control">
<a class="button is-link"> <button class="button is-link">
Save changes Save changes
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button"> <button class="button">
Cancel Cancel
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button is-danger"> <button class="button is-danger">
Delete post Delete post
</a> </button>
</p> </p>
</div> </div>
{% endcapture %} {% endcapture %}
@@ -324,28 +343,28 @@ meta:
{% capture button_addons_example %} {% capture button_addons_example %}
<div class="field has-addons"> <div class="field has-addons">
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-align-left"></i> <i class="fas fa-align-left"></i>
</span> </span>
<span>Left</span> <span>Left</span>
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-align-center"></i> <i class="fas fa-align-center"></i>
</span> </span>
<span>Center</span> <span>Center</span>
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-align-right"></i> <i class="fas fa-align-right"></i>
</span> </span>
<span>Right</span> <span>Right</span>
</a> </button>
</p> </p>
</div> </div>
{% endcapture %} {% endcapture %}
@@ -353,133 +372,133 @@ meta:
{% capture button_group_addons_example %} {% capture button_group_addons_example %}
<div class="field has-addons"> <div class="field has-addons">
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-bold"></i> <i class="fas fa-bold"></i>
</span> </span>
<span>Bold</span> <span>Bold</span>
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-italic"></i> <i class="fas fa-italic"></i>
</span> </span>
<span>Italic</span> <span>Italic</span>
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-underline"></i> <i class="fas fa-underline"></i>
</span> </span>
<span>Underline</span> <span>Underline</span>
</a> </button>
</p> </p>
</div> </div>
<div class="field has-addons"> <div class="field has-addons">
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-align-left"></i> <i class="fas fa-align-left"></i>
</span> </span>
<span>Left</span> <span>Left</span>
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-align-center"></i> <i class="fas fa-align-center"></i>
</span> </span>
<span>Center</span> <span>Center</span>
</a> </button>
</p> </p>
<p class="control"> <p class="control">
<a class="button"> <button class="button">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-align-right"></i> <i class="fas fa-align-right"></i>
</span> </span>
<span>Right</span> <span>Right</span>
</a> </button>
</p> </p>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture buttons_list %} {% capture buttons_list %}
<div class="buttons"> <div class="buttons">
<span class="button is-success">Save changes</span> <button class="button is-success">Save changes</button>
<span class="button is-info">Save and continue</span> <button class="button is-info">Save and continue</button>
<span class="button is-danger">Cancel</span> <button class="button is-danger">Cancel</button>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture buttons_multiple %} {% capture buttons_multiple %}
<div class="buttons"> <div class="buttons">
<span class="button">One</span> <button class="button">One</button>
<span class="button">Two</span> <button class="button">Two</button>
<span class="button">Three</span> <button class="button">Three</button>
<span class="button">Four</span> <button class="button">Four</button>
<span class="button">Five</span> <button class="button">Five</button>
<span class="button">Six</span> <button class="button">Six</button>
<span class="button">Seven</span> <button class="button">Seven</button>
<span class="button">Eight</span> <button class="button">Eight</button>
<span class="button">Nine</span> <button class="button">Nine</button>
<span class="button">Ten</span> <button class="button">Ten</button>
<span class="button">Eleven</span> <button class="button">Eleven</button>
<span class="button">Twelve</span> <button class="button">Twelve</button>
<span class="button">Thirteen</span> <button class="button">Thirteen</button>
<span class="button">Fourteen</span> <button class="button">Fourteen</button>
<span class="button">Fifteen</span> <button class="button">Fifteen</button>
<span class="button">Sixteen</span> <button class="button">Sixteen</button>
<span class="button">Seventeen</span> <button class="button">Seventeen</button>
<span class="button">Eighteen</span> <button class="button">Eighteen</button>
<span class="button">Nineteen</span> <button class="button">Nineteen</button>
<span class="button">Twenty</span> <button class="button">Twenty</button>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture buttons_addons %} {% capture buttons_addons %}
<div class="buttons has-addons"> <div class="buttons has-addons">
<span class="button">Yes</span> <button class="button">Yes</button>
<span class="button">Maybe</span> <button class="button">Maybe</button>
<span class="button">No</span> <button class="button">No</button>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture buttons_addons_centered %} {% capture buttons_addons_centered %}
<div class="buttons has-addons is-centered"> <div class="buttons has-addons is-centered">
<span class="button">Yes</span> <button class="button">Yes</button>
<span class="button">Maybe</span> <button class="button">Maybe</button>
<span class="button">No</span> <button class="button">No</button>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture buttons_addons_right %} {% capture buttons_addons_right %}
<div class="buttons has-addons is-right"> <div class="buttons has-addons is-right">
<span class="button">Yes</span> <button class="button">Yes</button>
<span class="button">Maybe</span> <button class="button">Maybe</button>
<span class="button">No</span> <button class="button">No</button>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture buttons_addons_selected %} {% capture buttons_addons_selected %}
<div class="buttons has-addons"> <div class="buttons has-addons">
<span class="button is-success is-selected">Yes</span> <button class="button is-success is-selected">Yes</button>
<span class="button">Maybe</span> <button class="button">Maybe</button>
<span class="button">No</span> <button class="button">No</button>
</div> </div>
<div class="buttons has-addons"> <div class="buttons has-addons">
<span class="button">Yes</span> <button class="button">Yes</button>
<span class="button is-info is-selected">Maybe</span> <button class="button is-info is-selected">Maybe</button>
<span class="button">No</span> <button class="button">No</button>
</div> </div>
<div class="buttons has-addons"> <div class="buttons has-addons">
<span class="button">Yes</span> <button class="button">Yes</button>
<span class="button">Maybe</span> <button class="button">Maybe</button>
<span class="button is-danger is-selected">No</span> <button class="button is-danger is-selected">No</button>
</div> </div>
{% endcapture %} {% endcapture %}
@@ -515,9 +534,25 @@ meta:
{% include elements/anchor.html name="Colors" %} {% 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_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" %} {% include elements/anchor.html name="Sizes" %}
@@ -633,6 +668,26 @@ meta:
{% include elements/anchor.html name="States" %} {% 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> <h4 class="subtitle">Normal</h4>
{% include elements/snippet.html wrapper="buttons" content=button_normal_example %} {% include elements/snippet.html wrapper="buttons" content=button_normal_example %}
@@ -651,6 +706,12 @@ meta:
<h4 class="subtitle">Loading</h4> <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="columns">
<div class="column"> <div class="column">
<div class="buttons"> <div class="buttons">
@@ -659,7 +720,7 @@ meta:
<div class="message is-info"> <div class="message is-info">
<div class="message-body"> <div class="message-body">
<p> <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> </p>
</div> </div>
</div> </div>
@@ -689,6 +750,12 @@ meta:
<h4 class="subtitle">Disabled</h4> <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="columns">
<div class="column"> <div class="column">
<div class="buttons"> <div class="buttons">
@@ -707,6 +774,12 @@ meta:
<h4 class="subtitle">With Font Awesome icons</h4> <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 %} {% include elements/snippet.html content=button_fa_example clipped=true %}
<div class="columns"> <div class="columns">
@@ -755,7 +828,7 @@ meta:
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<p> <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> </p>
</div> </div>
<div class="bd-example"> <div class="bd-example">

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

@@ -52,10 +52,22 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
{% endcapture %} {% 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/snippet.html content=notification %}
{% include elements/anchor.html name="Colors" %} {% 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 %} {% include elements/snippet.html content=notification_colors %}
<div id="notificationJsExample" class="message is-info"> <div id="notificationJsExample" class="message is-info">
@@ -63,18 +75,12 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="message-body"> <div class="message-body">
<div class="content"> <div class="content">
<p> <p>
The Bulma package <strong>does not come with any JavaScript</strong>. 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.
<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.
</p> </p>
{% highlight html %}{{ notification_js_html }}{% endhighlight %} {% highlight html %}{{ notification_js_html }}{% endhighlight %}
{% highlight javascript %}{{ notification_js_code }}{% 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> </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> <progress class="progress is-large is-info" max="100">60%</progress>
{% endcapture %} {% 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/snippet.html content=progress %}
{% include elements/anchor.html name="Colors" %} {% 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/snippet.html content=progress_colors %}
{% include elements/anchor.html name="Sizes" %} {% 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> <button class="button is-link">Submit</button>
</div> </div>
<div class="control"> <div class="control">
<button class="button is-text">Cancel</button> <button class="button is-link is-light">Cancel</button>
</div> </div>
</div> </div>
{% endcapture %} {% endcapture %}

35
sass/components/message.sass
View File

@@ -37,34 +37,33 @@ $message-colors: $colors !default
&.is-large &.is-large
font-size: $size-large font-size: $size-large
// Colors // Colors
@each $name, $pair in $message-colors @each $name, $components in $message-colors
$color: nth($pair, 1) $color: nth($components, 1)
$color-invert: nth($pair, 2) $color-invert: nth($components, 2)
$color-light: null
$color-dark: null
$light-background: null @if length($components) >= 3
@if length($pair) > 2 $color-light: nth($components, 3)
$light-background: nth($pair, 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 @else
$color-lightning: max((100% - lightness($color)) - 2%, 0%) $color-lightning: max((100% - lightness($color)) - 2%, 0%)
$light-background: lighten($color, $color-lightning) $color-light: 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)
&.is-#{$name} &.is-#{$name}
background-color: $light-background background-color: $color-light
.message-header .message-header
background-color: $color background-color: $color
color: $color-invert color: $color-invert
.message-body .message-body
border-color: $color border-color: $color
color: $dark-color color: $color-dark
.message-header .message-header
align-items: center 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-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
.pagination .pagination
@extend %block
font-size: $size-normal font-size: $size-normal
margin: $pagination-margin margin: $pagination-margin
// Sizes // Sizes

2
sass/elements/button.sass
View File

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