Add more color documentation, Add light buttons to docs

diff --git a/docs/_includes/elements/new-tag.html b/docs/_includes/elements/new-tag.html
index e4c07b6f73523b05c1f4d8aea74ea67b3bfadbfa..78e027cb256996b3f6596bfb08e8ce043a7d58b8 100644 (file)
--- a/docs/_includes/elements/new-tag.html
+++ b/docs/_includes/elements/new-tag.html
@@ -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>
\ No newline at end of file
+</div>

diff --git a/docs/bulma-dark.sass b/docs/bulma-dark.sass
new file mode 100644 (file)
index 0000000..b78a58d
--- /dev/null
+++ b/docs/bulma-dark.sass
@@ -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

diff --git a/docs/bulma-dark.scss b/docs/bulma-dark.scss
deleted file mode 100644 (file)
index 92a6ec6..0000000
--- a/docs/bulma-dark.scss
+++ /dev/null
@@ -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;

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 068be23cb69db6f0b0cf88e53f0648e976e8429c..68fc72548ac81827d4a5e919c8de5c58c4cc83bb 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -24,7 +24,7 @@ $main-spacing: 3rem
 $intro-width: 1080px
 $sidebar-width: 10.5rem
 
-// @import "./bulma-dark.scss"
+// @import "./bulma-dark"
 @import "../bulma"
 
 %center

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index 3da44a8416dd007a6c950ba08e366ec73b77ba33..9a7e5515a791c80b2a32507f50c5d8790320d869 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -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">

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index ed0efaf66c819c2f7c4f4ea15fb55968521de8cc..7ded58e26bce54ac2db738a3bd808930e4675046 100644 (file)
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -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>

diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index 600585791ba844996ab1f68c6f940cf6bd69e9f8..e717ed93ad09ad4779a579b2b3c99470572ef5b9 100644 (file)
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -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" %}

diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index 17fef33e5f15d926bb76a01ad46dcff823b716f4..7763086240b53494100546aff0d2d65e49f4054e 100644 (file)
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -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 %}

diff --git a/sass/components/message.sass b/sass/components/message.sass
index d65c00c367aeaa4526bb63bcee06395bf2eaf5a9..89e4cc9a84577df0d0f54ffc9c2403d8d4452449 100644 (file)
--- a/sass/components/message.sass
+++ b/sass/components/message.sass
@@ -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

diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass
index 89badf4832af12b1d905dfb5722af1f56d8d324e..822c2e816b5d808996bf87d3d2a913c40453f41d 100644 (file)
--- a/sass/components/pagination.sass
+++ b/sass/components/pagination.sass
@@ -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

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index f266e3da23826a2ce59b6f4642982f6c87ebe3af..22078aef60b83937551086d27f6cd334c67279ab 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -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