From 379bcb481e5f1ab3ee03d7ce39e85aef6bd5531a Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Thu, 12 Apr 2018 00:20:58 +0100 Subject: [PATCH] Fix button docs --- docs/_data/blog/migratingv070.json | 12 +++- docs/_includes/elements/link.html | 5 ++ docs/_includes/elements/snippet.html | 8 ++- docs/_layouts/post.html | 2 +- docs/_posts/2018-04-11-migration-to-v070.md | 12 +++- docs/_sass/example.sass | 1 + docs/_sass/highlight.sass | 4 +- docs/_sass/specific.sass | 14 +++++ docs/blog.html | 4 +- docs/css/bulma-docs.css | 24 ++++++- docs/documentation/elements/button.html | 70 +++++++++++---------- sass/elements/content.sass | 2 +- 12 files changed, 114 insertions(+), 44 deletions(-) diff --git a/docs/_data/blog/migratingv070.json b/docs/_data/blog/migratingv070.json index 7cba93b6..b224681f 100644 --- 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 0ab9299b..952c294c 100644 --- a/docs/_includes/elements/link.html +++ b/docs/_includes/elements/link.html @@ -1,4 +1,9 @@ + {% if include.surtitle %} +

+ {{ include.surtitle }} +

+ {% endif %}

{% if include.icon %} diff --git a/docs/_includes/elements/snippet.html b/docs/_includes/elements/snippet.html index a9aa8ae2..871fb126 100644 --- a/docs/_includes/elements/snippet.html +++ b/docs/_includes/elements/snippet.html @@ -19,7 +19,13 @@ {% if include.fullwidth %}bd-is-fullwidth{% endif %} ">
- {{ include.content }} + {% if include.wrapper %} +
+ {{ include.content }} +
+ {% else %} + {{ include.content }} + {% endif %}
{% highlight html %}{{ include.content }}{% endhighlight %} diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 430bbc52..d7f75f8e 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -73,7 +73,7 @@ breadcrumb:
-
+
{{ content }}
diff --git a/docs/_posts/2018-04-11-migration-to-v070.md b/docs/_posts/2018-04-11-migration-to-v070.md index 02de0a7a..ea21fa55 100644 --- 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 %} @@ -40,7 +46,7 @@ icon: "sync-alt"
{% endfor %} -## New variables +{% include elements/anchor.html name="New variables" %} {% for item in site.data.blog.migratingv070.new %} @@ -69,7 +75,7 @@ icon: "sync-alt"
{% endfor %} -## Removed variables +{% include elements/anchor.html name="Removed variables" %} diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index 435910f7..51e76f34 100644 --- 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 ff2f896f..c4a78ca4 100644 --- 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 e68573ba..b0db9f38 100644 --- 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 94a5ddf1..a4589c71 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -38,7 +38,7 @@ breadcrumb:
{% 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 %}
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index f6ee11cc..62c2520d 100644 --- 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 e57add8d..e271e1f9 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -148,7 +148,7 @@ meta: {% endcapture %} {% capture button_fa_example %} -

+

@@ -165,7 +165,7 @@ meta:

-

+

@@ -191,7 +191,7 @@ meta:

-

+

@@ -220,14 +220,14 @@ meta: {% endcapture %} {% capture button_only_icon_example %} -

+

-

+

@@ -239,7 +239,7 @@ meta:

-

+

@@ -256,7 +256,7 @@ meta:

-

+

@@ -380,7 +380,7 @@ meta:

{% endcapture %} -{% capture buttons %} +{% capture buttons_list %}
Save changes Save and continue @@ -463,7 +463,7 @@ meta:

-{% include elements/snippet.html content=button_example %} +{% include elements/snippet.html wrapper="buttons" content=button_example %}

@@ -485,30 +485,32 @@ meta:

-{% 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" %}

Outlined

-{% include elements/snippet.html content=button_outlined_example %} +{% include elements/snippet.html wrapper="buttons" content=button_outlined_example %}

Inverted (the text color becomes the background color, and vice-versa)

- {{button_inverted_example}} +
+ {{ button_inverted_example }} +
@@ -521,11 +523,13 @@ meta:
- {{button_inverted_outlined_example}} +
+ {{ button_inverted_outlined_example }} +
- {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %} + {% highlight html %}{{ button_inverted_outlined_example }}{% endhighlight %}
@@ -534,7 +538,9 @@ meta:
{% include elements/new-tag.html version="0.6.2" %} - {{ button_rounded_example }} +
+ {{ button_rounded_example }} +
{% highlight html %}{{ button_rounded_example }}{% endhighlight %} @@ -545,26 +551,26 @@ meta:

Normal

-{% include elements/snippet.html content=button_normal_example %} +{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}

Hover

-{% include elements/snippet.html content=button_hover_example %} +{% include elements/snippet.html wrapper="buttons" content=button_hover_example %}

Focus

-{% include elements/snippet.html content=button_focus_example %} +{% include elements/snippet.html wrapper="buttons" content=button_focus_example %}

Active

-{% include elements/snippet.html content=button_active_example %} +{% include elements/snippet.html wrapper="buttons" content=button_active_example %}

Loading

-
- {{button_loading_example}} +
+ {{ button_loading_example }}
@@ -590,10 +596,10 @@ meta: You can create a non-interactive button by using the is-static modifier. This is useful to align a text label with an input, for example when using form addons.

- {{button_static_example}} + {{ button_static_example }}
- {% highlight html %}{{button_static_example}}{% endhighlight %} + {% highlight html %}{{ button_static_example }}{% endhighlight %}
@@ -601,8 +607,8 @@ meta:
-
- {{button_disabled_example}} +
+ {{ button_disabled_example }}
@@ -626,10 +632,10 @@ meta: If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon.

- {{button_only_icon_example}} + {{ button_only_icon_example }}
- {% highlight html %}{{button_only_icon_example}}{% endhighlight %} + {% highlight html %}{{ button_only_icon_example }}{% endhighlight %}
@@ -669,11 +675,11 @@ meta:

- {{ buttons }} + {{ buttons_list }}
- {% highlight html %}{{ buttons }}{% endhighlight %} + {% highlight html %}{{ buttons_list }}{% endhighlight %}
diff --git a/sass/elements/content.sass b/sass/elements/content.sass index d47f31a4..8951a824 100644 --- 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