Fix button docs

diff --git a/docs/_data/blog/migratingv070.json b/docs/_data/blog/migratingv070.json
index 7cba93b614a5bb49c80adb938ccb62dec240f1af..b224681f9b6fed9bee7634d1730e6dc77a6d498f 100644 (file)
--- a/docs/_data/blog/migratingv070.json
+++ b/docs/_data/blog/migratingv070.json
@@ -32,7 +32,7 @@
       "changes": [
         {
           "variable": "$hr-background-color",
-          "from": "border",
+          "from": "$border",
           "to": "$background"
         },
         {
@@ -42,6 +42,16 @@
         }
       ]
     },
+    {
+      "file": "sass/elements/content.sass",
+      "changes": [
+        {
+          "variable": "$content-heading-weight",
+          "from": "$weight-normal",
+          "to": "$weight-semibold"
+        }
+      ]
+    },
     {
       "file": "sass/components/message.sass",
       "changes": [

diff --git a/docs/_includes/elements/link.html b/docs/_includes/elements/link.html
index 0ab9299b9bad84247640fc98adc6790c4369db50..952c294c19e3053a8423070c38e77370b8537aad 100644 (file)
--- a/docs/_includes/elements/link.html
+++ b/docs/_includes/elements/link.html
@@ -1,4 +1,9 @@
 <a class="bd-link" href="{{ include.url }}">
+  {% if include.surtitle %}
+    <p class="bd-link-surtitle">
+      {{ include.surtitle }}
+    </p>
+  {% endif %}
   <h2 class="bd-link-name">
     <figure class="bd-link-figure">
       {% if include.icon %}

diff --git a/docs/_includes/elements/snippet.html b/docs/_includes/elements/snippet.html
index a9aa8ae2f9af2fc52835c24f0d5c7dd99002e3ba..871fb126a172879442c2cd5d8cad6c2d4be8a039 100644 (file)
--- a/docs/_includes/elements/snippet.html
+++ b/docs/_includes/elements/snippet.html
@@ -19,7 +19,13 @@
     {% if include.fullwidth %}bd-is-fullwidth{% endif %}
     ">
     <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
-      {{ include.content }}
+      {% if include.wrapper %}
+        <div class="{{ include.wrapper }}">
+          {{ include.content }}
+        </div>
+      {% else %}
+        {{ include.content }}
+      {% endif %}
     </div>
     <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %} {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}">
       {% highlight html %}{{ include.content }}{% endhighlight %}

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
index 430bbc521f3ec704bf351efda2302aaf7dd43b2d..d7f75f8edddf493b43e8d1663745e7c4a5c608ec 100644 (file)
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@@ -73,7 +73,7 @@ breadcrumb:
         <div class="bd-content">
           <div class="columns">
             <div class="column is-offset-2 is-8">
-              <div class="content is-medium">
+              <div class="bd-post content is-medium">
                 {{ content }}
               </div>
             </div>

diff --git a/docs/_posts/2018-04-11-migration-to-v070.md b/docs/_posts/2018-04-11-migration-to-v070.md
index 02de0a7a8a0a03d68c37354b1b3f35a44ca0246d..ea21fa559a38c29ea2092cc84cbe679912f46331 100644 (file)
--- a/docs/_posts/2018-04-11-migration-to-v070.md
+++ b/docs/_posts/2018-04-11-migration-to-v070.md
@@ -7,7 +7,13 @@ name: "Migrating to v0.7.0"
 icon: "sync-alt"
 ---
 
-## Updated default values
+A new major Bulma update is out: [v0.7.0](#)!
+
+While this update is mainly focused on a massive [website redesign](#), it also includes a few bug fixes, some new features, and some variable changes.
+
+These variable changes are documented here, so you can edit or revert them if needed.
+
+{% include elements/anchor.html name="Updated default values" %}
 
 {% for item in site.data.blog.migratingv070.updated %}
   <table class="table is-bordered">
@@ -40,7 +46,7 @@ icon: "sync-alt"
   </table>
 {% endfor %}
 
-## New variables
+{% include elements/anchor.html name="New variables" %}
 
 {% for item in site.data.blog.migratingv070.new %}
   <table class="table is-bordered">
@@ -69,7 +75,7 @@ icon: "sync-alt"
   </table>
 {% endfor %}
 
-## Removed variables
+{% include elements/anchor.html name="Removed variables" %}
 
 <table class="table is-bordered">
   <thead>

diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass
index 435910f70bb3d06bbb5a7b9f9938098250ca21a1..51e76f3472a6b094260ecfb2d90d6e5cc1926ef9 100644 (file)
--- a/docs/_sass/example.sass
+++ b/docs/_sass/example.sass
@@ -59,6 +59,7 @@
 
 .bd-snippet-code
   background-color: $pre-background
+  border-radius: $radius-large
 
 .bd-snippet-code.bd-is-more.bd-is-more-clipped
   .highlight

diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index ff2f896f2d89409483ce7a5120b6696c43304aba..c4a78ca4f5706ca2ba91c18cc75e72779d18d768 100644 (file)
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -1,7 +1,9 @@
 .highlight
-  background-color: #f5f5f5
+  background-color: $pre-background
+  border-radius: $radius-large
   color: #586e75
   pre
+    background-color: transparent
     font-size: 0.875em
     line-height: 1.375
   .c

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index e68573ba665433b585279b7cb73ad10930d33cf6..b0db9f38d3045539b6204bbecf078cb29ac3619a 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -2,6 +2,12 @@
   background-color: $primary
   color: $primary-invert
 
+.bd-post
+  .table
+    font-size: 1rem
+  .bd-anchor-title
+    margin-top: 0 !important
+
 .bd-has-drawing
   position: relative
 
@@ -52,6 +58,14 @@
   &:hover
     background-color: $white-bis
 
+.bd-link-surtitle
+  float: right
+  font-size: 0.75em
+  margin-bottom: 1em
+  margin-left: 2em
+  opacity: 0.5
+  padding-top: 0.25em
+
 .bd-link-name
   line-height: 1.25
   margin-bottom: 0.25em

diff --git a/docs/blog.html b/docs/blog.html
index 94a5ddf183a83c818c5edea5efb3158c11b46723..a4589c7191dbbfffbfccabbeab66f0f0db3e197e 100644 (file)
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -38,7 +38,7 @@ breadcrumb:
         <div class="bd-content">
           <div class="bd-links">
             {% for post in site.posts %}
-              {% assign subtitle = post.date | date_to_string %}
+              {% assign date = post.date | date_to_string %}
               {% assign more = post.introduction | markdownify | strip_html %}
               {%
                 include elements/link.html
@@ -47,9 +47,9 @@ breadcrumb:
                 icon_brand=post.icon_brand
                 icon_regular=post.icon_regular
                 icon=post.icon
+                surtitle=date
                 name=post.name
                 subtitle=more
-                more=subtitle
               %}
             {% endfor %}
           </div>

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index f6ee11ccef42d7c3ad7b73f5553e9c9cb70b8a55..62c2520d228c4624e6835c08bcaa6ff180d2e927 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2655,7 +2655,7 @@ a.box:active {
 .content h5,
 .content h6 {
   color: #363636;
-  font-weight: 400;
+  font-weight: 600;
   line-height: 1.125;
 }
 
@@ -9897,11 +9897,13 @@ label.panel-block:hover {
 }
 
 .highlight {
-  background-color: #f5f5f5;
+  background-color: whitesmoke;
+  border-radius: 6px;
   color: #586e75;
 }
 
 .highlight pre {
+  background-color: transparent;
   font-size: 0.875em;
   line-height: 1.375;
 }
@@ -11183,6 +11185,14 @@ svg {
   color: #fff;
 }
 
+.bd-post .table {
+  font-size: 1rem;
+}
+
+.bd-post .bd-anchor-title {
+  margin-top: 0 !important;
+}
+
 .bd-has-drawing {
   position: relative;
 }
@@ -11257,6 +11267,15 @@ svg {
   background-color: #fafafa;
 }
 
+.bd-link-surtitle {
+  float: right;
+  font-size: 0.75em;
+  margin-bottom: 1em;
+  margin-left: 2em;
+  opacity: 0.5;
+  padding-top: 0.25em;
+}
+
 .bd-link-name {
   line-height: 1.25;
   margin-bottom: 0.25em;
@@ -11667,6 +11686,7 @@ svg {
 
 .bd-snippet-code {
   background-color: whitesmoke;
+  border-radius: 6px;
 }
 
 .bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight {

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index e57add8d8fc8d44765f96a688809e35edadfbc3d..e271e1f9ca7ce083b0796349c2a61a79fbbb8cde 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -148,7 +148,7 @@ meta:
 {% endcapture %}
 
 {% capture button_fa_example %}
-<p class="field">
+<p class="buttons">
   <a class="button">
     <span class="icon is-small">
       <i class="fas fa-bold"></i>
@@ -165,7 +165,7 @@ meta:
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button">
     <span class="icon">
       <i class="fab fa-github"></i>
@@ -191,7 +191,7 @@ meta:
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button is-small">
     <span class="icon is-small">
       <i class="fab fa-github"></i>
@@ -220,14 +220,14 @@ meta:
 {% endcapture %}
 
 {% capture button_only_icon_example %}
-<p class="field">
+<p class="buttons">
   <a class="button is-small">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
@@ -239,7 +239,7 @@ meta:
   </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button is-medium">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
@@ -256,7 +256,7 @@ meta:
     </span>
   </a>
 </p>
-<p class="field">
+<p class="buttons">
   <a class="button is-large">
     <span class="icon is-small">
       <i class="fas fa-heading"></i>
@@ -380,7 +380,7 @@ meta:
 </div>
 {% endcapture %}
 
-{% capture buttons %}
+{% capture buttons_list %}
 <div class="buttons">
   <span class="button is-success">Save changes</span>
   <span class="button is-info">Save and continue</span>
@@ -463,7 +463,7 @@ meta:
   </p>
 </div>
 
-{% include elements/snippet.html content=button_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_example %}
 
 <div class="content">
   <p>
@@ -485,30 +485,32 @@ meta:
   </ul>
 </div>
 
-{% include elements/snippet.html content=button_tags_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_tags_example %}
 
 {% include elements/anchor.html name="Colors" %}
 
-{% include elements/snippet.html content=button_colors_a_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %}
 
-{% include elements/snippet.html content=button_colors_b_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_colors_b_example %}
 
 {% include elements/anchor.html name="Sizes" %}
 
-{% include elements/snippet.html content=button_sizes_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
 
 {% include elements/anchor.html name="Styles" %}
 
 <h4 class="subtitle">Outlined</h4>
 
-{% include elements/snippet.html content=button_outlined_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_outlined_example %}
 
 <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
 
 <div class="columns">
   <div class="column">
     <div class="bd-callout is-primary">
-      {{button_inverted_example}}
+      <div class="buttons">
+        {{ button_inverted_example }}
+      </div>
     </div>
   </div>
   <div class="column">
@@ -521,11 +523,13 @@ meta:
 <div class="columns">
   <div class="column">
     <div class="bd-callout is-primary">
-      {{button_inverted_outlined_example}}
+      <div class="buttons">
+        {{ button_inverted_outlined_example }}
+      </div>
     </div>
   </div>
   <div class="column">
-    {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
+    {% highlight html %}{{ button_inverted_outlined_example }}{% endhighlight %}
   </div>
 </div>
 
@@ -534,7 +538,9 @@ meta:
 <div class="columns">
   <div class="column">
     {% include elements/new-tag.html version="0.6.2" %}
-    {{ button_rounded_example }}
+    <div class="buttons">
+      {{ button_rounded_example }}
+    </div>
   </div>
   <div class="column">
     {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
@@ -545,26 +551,26 @@ meta:
 
 <h4 class="subtitle">Normal</h4>
 
-{% include elements/snippet.html content=button_normal_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}
 
 <h4 class="subtitle">Hover</h4>
 
-{% include elements/snippet.html content=button_hover_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_hover_example %}
 
 <h4 class="subtitle">Focus</h4>
 
-{% include elements/snippet.html content=button_focus_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_focus_example %}
 
 <h4 class="subtitle">Active</h4>
 
-{% include elements/snippet.html content=button_active_example %}
+{% include elements/snippet.html wrapper="buttons" content=button_active_example %}
 
 <h4 class="subtitle">Loading</h4>
 
 <div class="columns">
   <div class="column">
-    <div class="block">
-      {{button_loading_example}}
+    <div class="buttons">
+      {{ button_loading_example }}
     </div>
     <div class="message is-info">
       <div class="message-body">
@@ -590,10 +596,10 @@ meta:
         You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
       </p>
     </div>
-    {{button_static_example}}
+    {{ button_static_example }}
   </div>
   <div class="column">
-    {% highlight html %}{{button_static_example}}{% endhighlight %}
+    {% highlight html %}{{ button_static_example }}{% endhighlight %}
   </div>
 </div>
 
@@ -601,8 +607,8 @@ meta:
 
 <div class="columns">
   <div class="column">
-    <div class="block">
-      {{button_disabled_example}}
+    <div class="buttons">
+      {{ button_disabled_example }}
     </div>
     <div class="message is-danger">
       <div class="message-body">
@@ -626,10 +632,10 @@ meta:
         If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
       </p>
     </div>
-    {{button_only_icon_example}}
+    {{ button_only_icon_example }}
   </div>
   <div class="column">
-    {% highlight html %}{{button_only_icon_example}}{% endhighlight %}
+    {% highlight html %}{{ button_only_icon_example }}{% endhighlight %}
   </div>
 </div>
 
@@ -669,11 +675,11 @@ meta:
       </p>
     </div>
     <div class="bd-example">
-      {{ buttons }}
+      {{ buttons_list }}
     </div>
   </div>
   <div class="column">
-    {% highlight html %}{{ buttons }}{% endhighlight %}
+    {% highlight html %}{{ buttons_list }}{% endhighlight %}
   </div>
 </div>
 

diff --git a/sass/elements/content.sass b/sass/elements/content.sass
index d47f31a4edd639509fa63bf78e8eb26e206a95c5..8951a824f94600f6ee34a9fe78502961296b6900 100644 (file)
--- a/sass/elements/content.sass
+++ b/sass/elements/content.sass
@@ -1,5 +1,5 @@
 $content-heading-color: $text-strong !default
-$content-heading-weight: $weight-normal !default
+$content-heading-weight: $weight-semibold !default
 $content-heading-line-height: 1.125 !default
 
 $content-blockquote-background-color: $background !default