From: Jeremy Thomas Date: Wed, 30 Aug 2017 19:44:39 +0000 (+0100) Subject: Create snippet component X-Git-Tag: 0.5.2~33 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9b06974cd1236cc0093fa7fb34e929a158889cce;p=thirdparty%2Fbulma.git Create snippet component --- diff --git a/docs/_includes/anchor.html b/docs/_includes/anchor.html index 55e93ab70..c8f3bcb94 100644 --- a/docs/_includes/anchor.html +++ b/docs/_includes/anchor.html @@ -1,6 +1,6 @@
-

+

{{ include.name }} # diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html new file mode 100644 index 000000000..16aeddef2 --- /dev/null +++ b/docs/_includes/snippet.html @@ -0,0 +1,8 @@ +
+
+ {{ include.content }} +
+
+ {% highlight html %}{{ include.content }}{% endhighlight %} +
+
diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index b5a17adb4..dad351a5e 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -1,18 +1,13 @@ .bd-example, -.bd-structure - border: 1px solid $warning - border-top-right-radius: $radius - color: $warning-invert - padding: 1.5rem +.bd-structure, +.bd-snippet + border: 1px solid $yellow position: relative - &:not(:first-child) - margin-top: 2rem - &:not(:last-child) - margin-bottom: 1.5rem &:before - background: $warning + background: $yellow border-radius: $radius $radius 0 0 bottom: 100% + color: $yellow-invert content: "Example" display: inline-block font-size: 7px @@ -29,18 +24,56 @@ border-right: none padding: 0 +.bd-example, +.bd-structure + padding: 1.5rem + &:not(:first-child) + margin-top: 2rem + &:not(:last-child) + margin-bottom: 1.5rem + .bd-example & + .highlight - border: 1px solid $warning + border: 1px solid $yellow border-radius: 0 0 $radius $radius border-top: none margin-top: -1.5rem &:not(:last-child) margin-bottom: 1.5rem +// Snippet +.bd-snippet + +block + border: 1px solid $yellow + margin-top: 2rem + position: relative + &::before + content: "Snippet" + +tablet + align-items: stretch + display: flex + +.bd-snippet-preview, +.bd-snippet-code + +tablet + width: 50% + +.bd-snippet-preview + padding: 1.5rem + +.bd-snippet-code + background-color: $pre-background + +tablet + align-items: stretch + display: flex + flex-direction: column + .highlight + flex-grow: 1 + +// Highlight .highlight.bd-is-hovering border-radius: 2px - box-shadow: 0 0 0 3px $border + box-shadow: 0 0 0 2px $yellow .highlight pre max-height: 480px @@ -111,8 +144,8 @@ $structure-invert: $danger-invert right: 0.25rem top: 0.25rem &:hover - background-color: $text - color: $white + background-color: $yellow + color: $yellow-invert .bd-expand right: 45px +tablet diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 96b22bef9..94e973e22 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -21,6 +21,3 @@ $twitter: #55acee @import "./_sass/love" @import "./_sass/bootstrap" @import "./_sass/klmn" - -// .columns -// background-color: coral diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 034e7e430..31288afeb 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9549,29 +9549,19 @@ html.route-index #carbon { } .bd-example, -.bd-structure { +.bd-structure, +.bd-snippet { border: 1px solid #ffdd57; - border-top-right-radius: 3px; - color: rgba(0, 0, 0, 0.7); - padding: 1.5rem; position: relative; } -.bd-example:not(:first-child), -.bd-structure:not(:first-child) { - margin-top: 2rem; -} - -.bd-example:not(:last-child), -.bd-structure:not(:last-child) { - margin-bottom: 1.5rem; -} - .bd-example:before, -.bd-structure:before { +.bd-structure:before, +.bd-snippet:before { background: #ffdd57; border-radius: 3px 3px 0 0; bottom: 100%; + color: rgba(0, 0, 0, 0.7); content: "Example"; display: inline-block; font-size: 7px; @@ -9586,13 +9576,29 @@ html.route-index #carbon { @media screen and (min-width: 769px), print { .bd-example.is-fullwidth, - .bd-structure.is-fullwidth { + .bd-structure.is-fullwidth, + .bd-snippet.is-fullwidth { border-left: none; border-right: none; padding: 0; } } +.bd-example, +.bd-structure { + padding: 1.5rem; +} + +.bd-example:not(:first-child), +.bd-structure:not(:first-child) { + margin-top: 2rem; +} + +.bd-example:not(:last-child), +.bd-structure:not(:last-child) { + margin-bottom: 1.5rem; +} + .bd-example + .highlight { border: 1px solid #ffdd57; border-radius: 0 0 3px 3px; @@ -9604,9 +9610,56 @@ html.route-index #carbon { margin-bottom: 1.5rem; } +.bd-snippet { + border: 1px solid #ffdd57; + margin-top: 2rem; + position: relative; +} + +.bd-snippet:not(:last-child) { + margin-bottom: 1.5rem; +} + +.bd-snippet::before { + content: "Snippet"; +} + +@media screen and (min-width: 769px), print { + .bd-snippet { + align-items: stretch; + display: flex; + } +} + +@media screen and (min-width: 769px), print { + .bd-snippet-preview, + .bd-snippet-code { + width: 50%; + } +} + +.bd-snippet-preview { + padding: 1.5rem; +} + +.bd-snippet-code { + background-color: whitesmoke; +} + +@media screen and (min-width: 769px), print { + .bd-snippet-code { + align-items: stretch; + display: flex; + flex-direction: column; + } + .bd-snippet-code .highlight { + flex-grow: 1; + } +} + .highlight.bd-is-hovering { border-radius: 2px; - box-shadow: 0 0 0 3px #dbdbdb; + box-shadow: 0 0 0 2px #ffdd57; } .highlight pre { @@ -9706,8 +9759,8 @@ html.route-index #carbon { .highlight .bd-copy:hover, .highlight .bd-expand:hover { - background-color: #4a4a4a; - color: white; + background-color: #ffdd57; + color: rgba(0, 0, 0, 0.7); } .highlight .bd-expand { diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index c014b86be..47ad9e4a7 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -425,14 +425,7 @@ variables:

-
-
- {{button_example}} -
-
- {% highlight html %}{{button_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_example %}

@@ -454,59 +447,23 @@ variables:

-
-
- {{button_tags_example}} -
-
- {% highlight html %}{{button_tags_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_tags_example %} {% include anchor.html name="Colors" %} -
-
- {{button_colors_a_example}} -
-
- {% highlight html %}{{button_colors_a_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_colors_a_example %} -
-
- {{button_colors_b_example}} -
-
- {% highlight html %}{{button_colors_b_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_colors_b_example %} {% include anchor.html name="Sizes" %} -
-
- {{button_sizes_example}} -
-
- {% highlight html %}{{button_sizes_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_sizes_example %} -
+ {% include anchor.html name="Styles" %} -

Styles

Outlined

-
-
- {{button_outlined_example}} -
-
- {% highlight html %}{{button_outlined_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_outlined_example %}

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

@@ -517,7 +474,7 @@ variables:
- {% highlight html %}{{button_inverted_example}}{% endhighlight %} + {% highlight html %}{{button_inverted_example}}{% endhighlight %}
@@ -534,52 +491,23 @@ variables: -
+ {% include anchor.html name="States" %} -

States

Normal

-
-
- {{button_normal_example}} -
-
- {% highlight html %}{{button_normal_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_normal_example %}

Hover

-
-
- {{button_hover_example}} -
-
- {% highlight html %}{{button_hover_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_hover_example %}

Focus

-
-
- {{button_focus_example}} -
-
- {% highlight html %}{{button_focus_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_focus_example %}

Active

-
-
- {{button_active_example}} -
-
- {% highlight html %}{{button_active_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_active_example %}

Loading

@@ -643,14 +571,7 @@ variables:

With Font Awesome icons

-
-
- {{button_fa_example}} -
-
- {% highlight html %}{{button_fa_example}}{% endhighlight %} -
-
+ {% include snippet.html content=button_fa_example %}
@@ -669,40 +590,29 @@ variables:
-
+ {% include anchor.html name="Button group" %} -

Button group

-

If you want to group buttons together, use the is-grouped modifier on the field container:

+

If you want to group buttons together on a single line, use the is-grouped modifier on the field container:

-
- {{button_group_example}} -
- {% highlight html %}{{button_group_example}}{% endhighlight %} -
+ {% include snippet.html content=button_group_example %} + + {% include anchor.html name="Button addons" %} -

Button addons

If you want to use buttons as addons, use the has-addons modifier on the field container:

-
- {{button_addons_example}} -
- {% highlight html %}{{button_addons_example}}{% endhighlight %} + {% include snippet.html content=button_addons_example %} -
+ {% include anchor.html name="Button group with addons" %} -

Button group with addons

You can group together addons as well:

-
- {{button_group_addons_example}} -
- {% highlight html %}{{button_group_addons_example}}{% endhighlight %} + {% include snippet.html content=button_group_addons_example %} {% include variables.html %} diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 9ad7971ae..942a7d8db 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -399,9 +399,7 @@ variables: {% highlight html %}{{table_example}}{% endhighlight %} -
- -

Modifiers

+ {% include anchor.html name="Modifiers" %}
diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html index 213b28bf3..db0c57be2 100644 --- a/docs/documentation/layout/container.html +++ b/docs/documentation/layout/container.html @@ -81,7 +81,7 @@ doc-subtab: container
-

Fluid container

+

Fluid container

If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the is-fluid modifier:

@@ -96,7 +96,7 @@ doc-subtab: container
-

Breakpoint containers

+

Breakpoint containers

New! diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html index 923745abf..e5b8bb520 100644 --- a/docs/documentation/layout/media-object.html +++ b/docs/documentation/layout/media-object.html @@ -219,9 +219,8 @@ doc-subtab: media-object {% highlight html %}{{media_bis_example}}{% endhighlight %} -

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

Nesting

You can nest media objects up to 3 levels deep.

diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html index 1a5d27689..57af1f9d5 100644 --- a/docs/documentation/layout/tiles.html +++ b/docs/documentation/layout/tiles.html @@ -24,9 +24,8 @@ doc-subtab: tiles
{% endhighlight %} -
+ {% include anchor.html name="Example" %} -

Example

@@ -123,9 +122,8 @@ doc-subtab: tiles
{% endhighlight %} -
+ {% include anchor.html name="Modifiers" %} -

Modifiers

The tile element has 16 modifiers:

@@ -154,9 +152,8 @@ doc-subtab: tiles
-
+ {% include anchor.html name="How it works: Nesting" %} -

How it works: Nesting

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

@@ -313,9 +310,8 @@ doc-subtab: tiles
{% endhighlight %} -
+ {% include anchor.html name="Nesting requirements" %} -

Nesting requirements

@@ -446,9 +442,8 @@ tile is-ancestor
{% endhighlight %} -
+ {% include anchor.html name="3 columns" %} -

3 columns

@@ -636,9 +631,8 @@ tile is-ancestor
{% endhighlight %} -
+ {% include anchor.html name="4 columns" %} -

4 columns

diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index b7a7e3d5a..d32446058 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -66,9 +66,7 @@ doc-subtab: responsive-helpers

Responsive helpers

Show/hide content depending on the width of the viewport

-
- -

Show

+ {% include anchor.html name="Show" %}

@@ -186,11 +184,12 @@ doc-subtab: responsive-helpers

-

For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex - -

+

+ For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex +

+
-

Hide

+ {% include anchor.html name="Hide" %} {{ thead }} diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index a679bcd3f..79bb9e728 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -62,9 +62,7 @@ doc-subtab: typography-helpers Change the size and color of the text for one or multiple viewport width -
- -

Size

+ {% include anchor.html name="Size" %}

@@ -115,11 +113,7 @@ doc-subtab: typography-helpers

-
- -

- Responsive size -

+ {% include anchor.html name="Responsive size" %}

@@ -190,11 +184,7 @@ doc-subtab: typography-helpers

-
- -

- Colors -

+ {% include anchor.html name="Colors" %}

@@ -235,9 +225,7 @@ doc-subtab: typography-helpers -

- -

Alignment

+ {% include anchor.html name="Alignment" %}

@@ -272,15 +260,13 @@ doc-subtab: typography-helpers -

- -

Responsive Alignment

+ {% include anchor.html name="Responsive Alignment" %}

You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier.

- +

For example, here are the modifiers for .has-text-left:

@@ -364,9 +350,7 @@ doc-subtab: typography-helpers -
- -

Text transformation

+ {% include anchor.html name="Text transformation" %}

diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html index 6db63e67b..752a2c8cb 100644 --- a/docs/documentation/overview/functions.html +++ b/docs/documentation/overview/functions.html @@ -23,9 +23,7 @@ doc-subtab: functions

-
- -

The findColorInvert() function

+ {% include anchor.html name="The findColorInvert() function" %}

The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:

diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index 783a6e9a1..4b86cc59b 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -12,9 +12,8 @@ doc-subtab: responsiveness

Responsiveness

Bulma is a mobile-first framework

-
+ {% include anchor.html name="Vertical by default" %} -

Vertical by default

Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile: @@ -27,9 +26,8 @@ doc-subtab: responsiveness

For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifer.

-
+ {% include anchor.html name="Breakpoints" %} -

Breakpoints

Bulma has 5 breakpoints:

    diff --git a/docs/tiles.html b/docs/tiles.html index c7c83b5e7..15720ed52 100644 --- a/docs/tiles.html +++ b/docs/tiles.html @@ -45,9 +45,8 @@ route: tiles
-
+ {% include anchor.html name="How it works: Nesting" %} -

How it works: Nesting

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

@@ -204,9 +203,7 @@ route: tiles
{% endhighlight %} -
- -

Nesting requirements

+ {% include anchor.html name="Nesting requirements" %}
@@ -337,9 +334,7 @@ tile is-ancestor
{% endhighlight %} -
- -

3 columns

+ {% include anchor.html name="3 columns" %}
@@ -527,9 +522,7 @@ tile is-ancestor
{% endhighlight %} -
- -

4 columns

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