From 03c13488a627be1c8f7c0ec00a2e49ade44f6051 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 16:33:44 +0100 Subject: [PATCH] Fix tiles --- docs/_includes/snippet.html | 1 + docs/_sass/example.sass | 4 + docs/_sass/specific.sass | 3 +- docs/css/bulma-docs.css | 7 +- docs/documentation/layout/footer.html | 19 +- docs/documentation/layout/hero.html | 16 +- docs/documentation/layout/level.html | 139 ++- docs/documentation/layout/media-object.html | 103 +- docs/documentation/layout/section.html | 35 +- docs/documentation/layout/tiles.html | 986 ++++++++++---------- 10 files changed, 647 insertions(+), 666 deletions(-) diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html index d19c39e32..a9aa8ae2f 100644 --- a/docs/_includes/snippet.html +++ b/docs/_includes/snippet.html @@ -16,6 +16,7 @@ {% if include.clipped %}bd-is-clipped{% endif %} {% if include.size %}bd-is-{{ include.size }}{% endif %} {% if include.one_fifth %}bd-is-one-fifth{% endif %} + {% if include.fullwidth %}bd-is-fullwidth{% endif %} ">

{{ include.content }} diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index 9faa54196..3936522b8 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -81,6 +81,10 @@ .bd-snippet-code overflow: auto +.bd-snippet.bd-is-fullwidth + border-radius: 0 + border-width: 1px 0 + +desktop .bd-snippet.bd-is-vertical align-items: stretch diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index e67d8bc39..c48841316 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,5 +1,6 @@ .bd-typo - margin-top: 3rem + &:not(:first-child) + margin-top: 3rem .bd-has-text-rss color: $rss diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 140249547..3ea97d6bf 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10402,7 +10402,7 @@ svg { text-decoration: underline; } -.bd-typo { +.bd-typo:not(:first-child) { margin-top: 3rem; } @@ -10939,6 +10939,11 @@ svg { overflow: auto; } +.bd-snippet.bd-is-fullwidth { + border-radius: 0; + border-width: 1px 0; +} + @media screen and (min-width: 1024px) { .bd-snippet.bd-is-vertical { align-items: stretch; diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 7226647fc..410a6b7ac 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -1,12 +1,12 @@ --- title: Footer +subtitle: "A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc." layout: documentation +hide_carbon: true doc-tab: layout doc-subtab: footer --- -{% include subnav/subnav-layout.html %} - {% capture footer_example %} {% endcapture %} -

Footer

- A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc. -

+{% include layout/main-close.html show_carbon=true %} - {% include snippet.html content=footer_example horizontal=true more=true %} +{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %} - {% include variables.html %} -

+{% include layout/main-open.html %} + +{% include variables.html %} diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html index 63058c43a..f9e616d12 100644 --- a/docs/documentation/layout/hero.html +++ b/docs/documentation/layout/hero.html @@ -1,20 +1,13 @@ --- title: Hero +subtitle: "An imposing hero banner to showcase something" layout: documentation +hide_carbon: true doc-tab: layout doc-subtab: hero --- -{% include subnav/subnav-layout.html %} - -

Hero

- An imposing hero banner to showcase something -

+{% include layout/main-close.html show_carbon=true %}

@@ -31,6 +24,7 @@ doc-subtab: hero

+ {% highlight html %}

@@ -654,3 +648,5 @@ doc-subtab: hero {% include snippet.html content=heroNavbarB horizontal=true more=true %} {% include snippet.html content=heroNavbarC horizontal=true more=true %}

+ +{% include layout/main-open.html %} diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html index eeb4de7a4..0c4e746ad 100644 --- a/docs/documentation/layout/level.html +++ b/docs/documentation/layout/level.html @@ -1,5 +1,6 @@ --- title: Level +subtitle: "A multi-purpose horizontal level, which can contain almost any other element" layout: documentation doc-tab: layout doc-subtab: level @@ -118,96 +119,84 @@ doc-subtab: level {% endcapture %} -{% include subnav/subnav-layout.html %} - -

Level

A multi-purpose horizontal level, which can contain almost any other element

- -

The structure of a level is the following:

+ level: main container
- level-left for the left side
- - level: main container + level-right for the right side
  - level-left for the left side -
  - - level-right for the right side -
    - level-item for each individual element
    -
  - level-item for each individual element
-
In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.
-

- -

- 123 posts -

- -

- All -

- Published -

- Drafts -

- Deleted + + +

In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.

+ +

+ All +

+ Published +

+ Drafts +

+ Deleted +

+ + New + +

+ +

- {% include snippet.html content=nav_example horizontal=true more=true %} - - {% include anchor.html name="Centered level" %} +{% include snippet.html content=nav_example horizontal=true more=true %} -

- If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container. -

+{% include anchor.html name="Centered level" %} - {% include snippet.html content=nav_centered_example horizontal=true more=true %} +

+ If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container. +

- {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %} +{% include snippet.html content=nav_centered_example horizontal=true more=true %} - {% include anchor.html name="Mobile level" %} +{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %} -

- By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container. -

+{% include anchor.html name="Mobile level" %} - {% include snippet.html content=nav_mobile_example horizontal=true more=true %} +

+ By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container. +

+{% include snippet.html content=nav_mobile_example horizontal=true more=true %} diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html index 805ddc961..a86900234 100644 --- a/docs/documentation/layout/media-object.html +++ b/docs/documentation/layout/media-object.html @@ -1,5 +1,6 @@ --- title: Media Object +subtitle: "The famous media object prevalent in social media interfaces, but useful in any context" layout: documentation doc-tab: layout doc-subtab: media-object @@ -156,69 +157,57 @@ doc-subtab: media-object {% endcapture %} -{% include subnav/subnav-layout.html %} +

The media object is a UI element perfect for repeatable and nestable content.

Media Object

The famous media object prevalent in social media interfaces, but useful in any context

- -

The media object is a UI element perfect for repeatable and nestable content.

- -

- John Smith @johnsmith 31m -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. -

- -

- +

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

- - {% include snippet.html content=media_example horizontal=true more=true %} - -

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

- {% include snippet.html content=media_bis_example horizontal=true more=true %} +{% include snippet.html content=media_example horizontal=true more=true %} - {% include anchor.html name="Nesting" %} +

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

You can nest media objects up to 3 levels deep.

+{% include snippet.html content=media_bis_example horizontal=true more=true %} - {% include snippet.html content=media_nested_example horizontal=true more=true %} +{% include anchor.html name="Nesting" %} -

You can nest media objects up to 3 levels deep.

+ +{% include snippet.html content=media_nested_example horizontal=true more=true %} diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html index 49c6bd33c..b1b2452e8 100644 --- a/docs/documentation/layout/section.html +++ b/docs/documentation/layout/section.html @@ -1,26 +1,12 @@ --- title: Section +subtitle: "A simple container to divide your page into sections, like the one you're currently reading" layout: documentation doc-tab: layout doc-subtab: section --- -{% include subnav/subnav-layout.html %} - -

Section

- A simple container to divide your page into sections, like the one you're currently reading -

- -

Use sections as direct children of body.

- -{% highlight html %} +{% capture section_example %}

@@ -31,13 +17,16 @@ doc-subtab: section

-{% endhighlight %} +{% endcapture %} -

You can use the modifiers is-medium and is-large to change the spacing.

Use sections as direct children of body.

+ +{% highlight html %}{{ section_example }}{% endhighlight %} - {% include variables.html %} +

You can use the modifiers is-medium and is-large to change the spacing.

+{% include variables.html %} diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html index 3a295c919..6cdb413ab 100644 --- a/docs/documentation/layout/tiles.html +++ b/docs/documentation/layout/tiles.html @@ -1,80 +1,18 @@ --- title: Tiles powered by Flexbox +subtitle: "A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids" layout: documentation doc-tab: layout doc-subtab: tiles --- -{% include subnav/subnav-layout.html %} - -

Tiles

A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

- -

To build intricate 2-dimensional layouts, you only need a single element: the tile:

- -{% highlight html %} +{% capture tile_empty %}

-{% endhighlight %} - - {% include anchor.html name="Example" %} - -

Vertical...

Top tile

...tiles

Bottom tile

Middle tile

With an image

Wide tile

Aligned with the right tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall tile

With even more content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

+{% endcapture %} -{% highlight html %} +{% capture tile_default %}

@@ -120,63 +58,15 @@ doc-subtab: tiles

-{% endhighlight %} - - {% include anchor.html name="Modifiers" %} - - -

The tile element has 16 modifiers:

- 3 contextual modifiers -
- is-ancestor
- is-parent
- is-child
-
- 1 directional modifier -
- is-vertical
-
- 12 horizontal size modifiers -
- from is-1
- to is-12
-

- - {% include anchor.html name="How it works: Nesting" %} - -

Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

+{% endcapture %} -

Start with an ancestor tile that will wrap all other tiles:

-{% highlight html %} +{% capture tile_ancestor %}

-{% endhighlight %} -

+{% endcapture %} -

Add tile elements that will distribute themselves horizontally:

-{% highlight html %} +{% capture tile_horizontal %}

@@ -185,20 +75,9 @@ doc-subtab: tiles

-{% endhighlight %} -

+{% endcapture %} -

- You can resize any tile according to a 12 column grid. -
- For example, is-4 will take up 1/3 of the horizontal space: -

-{% highlight html %} +{% capture tile_resize %}

@@ -207,16 +86,9 @@ doc-subtab: tiles

-{% endhighlight %} -

+{% endcapture %} -

If you want to stack tiles vertically, add is-vertical on the parent tile:

-{% highlight html %} +{% capture tile_vertical %}

@@ -230,23 +102,9 @@ doc-subtab: tiles

-{% endhighlight %} -

+{% endcapture %} -

As soon as you want to add content to a tile, just:

add any class you want, like box
add the is-child modifier on the tile
add the is-parent modifier on the parent tile

-{% highlight html %} +{% capture tile_123 %}

@@ -262,32 +120,9 @@ doc-subtab: tiles

-{% endhighlight %} -

- -

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Three

+{% endcapture %} -{% highlight html %} +{% capture tile_lorem %}

@@ -308,37 +143,17 @@ doc-subtab: tiles

-{% endhighlight %} - - {% include anchor.html name="Nesting requirements" %} +{% endcapture %} - -

- 3 levels deep at least... -

You need at least 3 levels of hierarchy:

-{% highlight markdown %} +{% capture md_3_levels %} tile is-ancestor | ââââtile is-parent | ââââtile is-child -{% endhighlight %} -

+{% endcapture %} -

- ...but more levels if you want! -

You can, however, nest tiles deeper than that, and mix it up!

-{% highlight markdown %} +{% capture md_nesting %} tile is-ancestor | ââââtile is-vertical is-8 @@ -357,60 +172,9 @@ tile is-ancestor | ââââtile is-parent ââââtile is-child -{% endhighlight %} -

- -

Vertical tiles

Top box

Vertical tiles

Bottom box

Middle box

With an image

Wide column

Aligned with the right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall column

With even more content

+{% endcapture %} -{% highlight html %} +{% capture tile_any_content %}

@@ -440,103 +204,9 @@ tile is-ancestor

-{% endhighlight %} - - {% include anchor.html name="3 columns" %} - - -

Hello World

What is up?

Foo

Bar

Third column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Vertical tiles

Top box

Vertical tiles

Bottom box

Middle box

With an image

Wide column

Aligned with the right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall column

With even more content

Side column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Main column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+{% endcapture %} -{% highlight html %} +{% capture tile_3_columns %}

@@ -629,137 +299,9 @@ tile is-ancestor

-{% endhighlight %} - - {% include anchor.html name="4 columns" %} - - -

One

Subtitle

Two

Subtitle

Three

Subtitle

Four

Subtitle

Five

Subtitle

Six

Subtitle

Seven

Subtitle

Eight

Subtitle

Nine

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Ten

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Eleven

Subtitle

Twelve

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

Thirteen

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Fourteen

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

+{% endcapture %} -{% highlight html %} +{% capture tile_4_columns %}

@@ -886,6 +428,476 @@ tile is-ancestor

-{% endhighlight %} -

+{% endcapture %} + +

To build intricate 2-dimensional layouts, you only need a single element: the tile:

+ +{% highlight html %}{{ tile_empty }}{% endhighlight %} + +{% include anchor.html name="Example" %} + +

Vertical...

Top tile

...tiles

Bottom tile

Middle tile

With an image

Wide tile

Aligned with the right tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall tile

With even more content

+ +{% highlight html %}{{ tile_default }}{% endhighlight %} + +{% include anchor.html name="Modifiers" %} + +

The tile element has 16 modifiers:

+ 3 contextual modifiers +
- is-ancestor
- is-parent
- is-child
+
+ 1 directional modifier +
- is-vertical
+
+ 12 horizontal size modifiers +
- from is-1
- to is-12
+

+ +{% include anchor.html name="How it works: Nesting" %} + +

Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

+ +

Start with an ancestor tile that will wrap all other tiles:

+ {% highlight html %}{{ tile_ancestor }}{% endhighlight %} +

+ +

Add tile elements that will distribute themselves horizontally:

+ {% highlight html %}{{ tile_horizontal }}{% endhighlight %} +

+ +

+ You can resize any tile according to a 12 column grid. +
+ For example, is-4 will take up 1/3 of the horizontal space: +

+ {% highlight html %}{{ tile_resize }}{% endhighlight %} +

+ +

If you want to stack tiles vertically, add is-vertical on the parent tile:

+ {% highlight html %}{{ tile_vertical }}{% endhighlight %} +

+ +

As soon as you want to add content to a tile, just:

add any class you want, like box
add the is-child modifier on the tile
add the is-parent modifier on the parent tile

+ {% highlight html %}{{ tile_123 }}{% endhighlight %} +

+ +

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Three

+ +{% highlight html %}{{ tile_lorem }}{% endhighlight %} + +{% include anchor.html name="Nesting requirements" %} + +

+ 3 levels deep at least... +

You need at least 3 levels of hierarchy:

+ {% highlight markdown %}{{ md_3_levels }}{% endhighlight %} +

+ +

+ ...but more levels if you want! +

You can, however, nest tiles deeper than that, and mix it up!

+ {% highlight markdown %}{{ md_nesting }}{% endhighlight %} +

+ +

Vertical tiles

Top box

Vertical tiles

Bottom box

Middle box

With an image

Wide column

Aligned with the right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall column

With even more content

+ +{% highlight html %}{{ tile_any_content }}{% endhighlight %} + +{% include anchor.html name="3 columns" %} + +

Hello World

What is up?

Foo

Bar

Third column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Vertical tiles

Top box

Vertical tiles

Bottom box

Middle box

With an image

Wide column

Aligned with the right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall column

With even more content

Side column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Main column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+ +{% highlight html %}{{ tile_3_columns }}{% endhighlight %} + +{% include anchor.html name="4 columns" %} + +

One

Subtitle

Two

Subtitle

Three

Subtitle

Four

Subtitle

Five

Subtitle

Six

Subtitle

Seven

Subtitle

Eight

Subtitle

Nine

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Ten

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Eleven

Subtitle

Twelve

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

Thirteen

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Fourteen

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

+ +{% highlight html %}{{ tile_4_columns }}{% endhighlight %} -- 2.47.3