diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 72a83615..1662d349 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -39,6 +39,9 @@ variables: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. +{% endcapture %} + +{% capture message_colors_example %}

Dark

@@ -95,6 +98,54 @@ variables:
{% endcapture %} +{% capture message_small %} +
+
+

Small message

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. +
+
+{% endcapture %} + +{% capture message_normal %} +
+
+

Normal message

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. +
+
+{% endcapture %} + +{% capture message_medium %} +
+
+

Medium message

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. +
+
+{% endcapture %} + +{% capture message_large %} +
+
+

Large message

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. +
+
+{% endcapture %} + {% capture message_body_example %}
@@ -174,6 +225,63 @@ variables:
+
+ +

+ Colors +

+ +
+
+ {{message_colors_example}} +
+
+ {% highlight html %}{{message_colors_example}}{% endhighlight %} +
+
+ +
+ +

+ Sizes +

+ +
+
+ {{message_small}} +
+
+ {% highlight html %}{{message_small}}{% endhighlight %} +
+
+ +
+
+ {{message_normal}} +
+
+ {% highlight html %}{{message_normal}}{% endhighlight %} +
+
+ +
+
+ {{message_medium}} +
+
+ {% highlight html %}{{message_medium}}{% endhighlight %} +
+
+ +
+
+ {{message_large}} +
+
+ {% highlight html %}{{message_large}}{% endhighlight %} +
+
+ {% include variables.html %} diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html index 6653e24b..9b20edb3 100644 --- a/docs/documentation/elements/box.html +++ b/docs/documentation/elements/box.html @@ -61,6 +61,12 @@ variables:

A white box to contain other elements

+ {% + include meta.html + colors=false + sizes=false + variables=true + %}
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 8feb6384..c76701b2 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -45,48 +45,25 @@ variables: value: inset 0 1px 2px rgba($black, 0.2) --- -{% include subnav-elements.html %} - -
-
-

Buttons

-

- The classic button, in different colors, sizes, and states -

- -
- {% capture button_example %} -
- Button - White - Light - Dark - Black - Link -
-
- Primary - Info - Success - Warning - Danger -
+Button {% endcapture %} -
-
-{{button_example}} -
-
-{% highlight html %} -{{button_example}} -{% endhighlight %} -
-
-
+{% capture button_colors_a_example %} +White +Light +Dark +Black +Link +{% endcapture %} -

Sizes

+{% capture button_colors_b_example %} +Primary +Info +Success +Warning +Danger +{% endcapture %} {% capture button_sizes_example %} Small @@ -94,21 +71,7 @@ variables: Medium Large {% endcapture %} -
-
-{{button_sizes_example}} -
-
-{% highlight html %} -{{button_sizes_example}} -{% endhighlight %} -
-
-
- -

Styles

-

Outlined

{% capture button_outlined_example %} Outlined Outlined @@ -116,18 +79,6 @@ variables: Outlined Outlined {% endcapture %} -
-
-{{button_outlined_example}} -
-
-{% highlight html %} -{{button_outlined_example}} -{% endhighlight %} -
-
- -

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

{% capture button_inverted_example %} Inverted @@ -135,20 +86,6 @@ variables: Inverted Inverted {% endcapture %} -
-
-
-{{button_inverted_example}} -
-
-
-{% highlight html %} -{{button_inverted_example}} -{% endhighlight %} -
-
- -

Invert Outlined (the invert color becomes the text and border colors)

{% capture button_inverted_outlined_example %} Invert Outlined @@ -156,23 +93,6 @@ variables: Invert Outlined Invert Outlined {% endcapture %} -
-
-
-{{button_inverted_outlined_example}} -
-
-
-{% highlight html %} -{{button_inverted_outlined_example}} -{% endhighlight %} -
-
- -
- -

States

-

Normal

{% capture button_normal_example %} Normal @@ -182,18 +102,6 @@ variables: Normal Normal {% endcapture %} -
-
-{{button_normal_example}} -
-
-{% highlight html %} -{{button_normal_example}} -{% endhighlight %} -
-
- -

Hover

{% capture button_hover_example %} Hover @@ -203,18 +111,6 @@ variables: Hover Hover {% endcapture %} -
-
-{{button_hover_example}} -
-
-{% highlight html %} -{{button_hover_example}} -{% endhighlight %} -
-
- -

Focus

{% capture button_focus_example %} Focus @@ -224,18 +120,6 @@ variables: Focus Focus {% endcapture %} -
-
-{{button_focus_example}} -
-
-{% highlight html %} -{{button_focus_example}} -{% endhighlight %} -
-
- -

Active

{% capture button_active_example %} Active @@ -245,18 +129,6 @@ variables: Active Active {% endcapture %} -
-
-{{button_active_example}} -
-
-{% highlight html %} -{{button_active_example}} -{% endhighlight %} -
-
- -

Loading

{% capture button_loading_example %} Loading @@ -266,46 +138,10 @@ variables: Loading Loading {% endcapture %} -
-
-{{button_loading_example}} -
-
-{% highlight html %} -{{button_loading_example}} -{% endhighlight %} -
-
- -

- Static -

{% capture button_static_example %} Static {% endcapture %} -
-
- -
-

- New! - 0.4.2 -

-

- 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}} -
-
-{% highlight html %} -{{button_static_example}} -{% endhighlight %} -
-
- -

Disabled

{% capture button_disabled_example %} Disabled @@ -315,23 +151,6 @@ variables: Disabled Disabled {% endcapture %} -
-
-
{{button_disabled_example}}
-
-
-

The is-disabled CSS class has been deprecated in favor of the disabled HTML attribute. Learn more

-
-
-
-
-{% highlight html %} -{{button_disabled_example}} -{% endhighlight %} -
-
- -

With Font Awesome icons

{% capture button_fa_example %}

@@ -404,27 +223,7 @@ variables:

{% endcapture %} -
-
-{{button_fa_example}} -
-
-{% highlight html %} -{{button_fa_example}} -{% endhighlight %} -
-
-
-
-
-

- New! -

-

- 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. -

-
{% capture button_only_icon_example %}

@@ -485,21 +284,7 @@ variables:

{% endcapture %} -{{button_only_icon_example}} -
-
-{% highlight html %} -{{button_only_icon_example}} -{% endhighlight %} -
-
-
- -

Button group

-
-

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

-
{% capture button_group_example %}

@@ -519,19 +304,7 @@ variables:

{% endcapture %} -
-{{button_group_example}} -
-{% highlight html %} -{{button_group_example}} -{% endhighlight %} -
- -

Button addons

-
-

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

-
{% capture button_addons_example %}

@@ -560,19 +333,7 @@ variables:

{% endcapture %} -
-{{button_addons_example}} -
-{% highlight html %} -{{button_addons_example}} -{% endhighlight %} -
- -

Button group with addons

-
-

You can group together addons as well:

-
{% capture button_group_addons_example %}

@@ -628,12 +389,272 @@ variables:

{% endcapture %} -
-{{button_group_addons_example}} -
-{% highlight html %} -{{button_group_addons_example}} -{% endhighlight %} + +{% include subnav-elements.html %} + +
+
+

Buttons

+

+ The classic button, in different colors, sizes, and states +

+ {% + include meta.html + colors=true + sizes=true + variables=true + %} + +
+ +
+
+ {{button_example}} +
+
+ {% highlight html %}{{button_example}}{% endhighlight %} +
+
+ +
+ +

+ Colors +

+ +
+
+ {{button_colors_a_example}} +
+
+ {% highlight html %}{{button_colors_a_example}}{% endhighlight %} +
+
+ +
+
+ {{button_colors_b_example}} +
+
+ {% highlight html %}{{button_colors_b_example}}{% endhighlight %} +
+
+ +
+ +

+ Sizes +

+ +
+
+ {{button_sizes_example}} +
+
+ {% highlight html %}{{button_sizes_example}}{% endhighlight %} +
+
+ +
+ +

Styles

+

Outlined

+ +
+
+ {{button_outlined_example}} +
+
+ {% highlight html %}{{button_outlined_example}}{% endhighlight %} +
+
+ +

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

+ +
+
+
+ {{button_inverted_example}} +
+
+
+ {% highlight html %}{{button_inverted_example}}{% endhighlight %} +
+
+ +

Invert Outlined (the invert color becomes the text and border colors)

+ +
+
+
+ {{button_inverted_outlined_example}} +
+
+
+ {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %} +
+
+ +
+ +

States

+

Normal

+ +
+
+ {{button_normal_example}} +
+
+ {% highlight html %}{{button_normal_example}}{% endhighlight %} +
+
+ +

Hover

+ +
+
+ {{button_hover_example}} +
+
+ {% highlight html %}{{button_hover_example}}{% endhighlight %} +
+
+ +

Focus

+ +
+
+ {{button_focus_example}} +
+
+ {% highlight html %}{{button_focus_example}}{% endhighlight %} +
+
+ +

Active

+ +
+
+ {{button_active_example}} +
+
+ {% highlight html %}{{button_active_example}}{% endhighlight %} +
+
+ +

Loading

+ +
+
+ {{button_loading_example}} +
+
+ {% highlight html %}{{button_loading_example}}{% endhighlight %} +
+
+ +

+ Static +

+ +
+
+
+

+ New! + 0.4.2 +

+

+ 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}} +
+
+ {% highlight html %}{{button_static_example}}{% endhighlight %} +
+
+ +

Disabled

+ +
+
+
+ {{button_disabled_example}} +
+
+
+

The is-disabled CSS class has been deprecated in favor of the disabled HTML attribute. Learn more

+
+
+
+
+ {% highlight html %}{{button_disabled_example}}{% endhighlight %} +
+
+ +

With Font Awesome icons

+ +
+
+ {{button_fa_example}} +
+
+ {% highlight html %}{{button_fa_example}}{% endhighlight %} +
+
+ +
+
+
+

+ New! +

+

+ 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}} +
+
+ {% highlight html %}{{button_only_icon_example}}{% endhighlight %} +
+
+ +
+ +

Button group

+
+

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

+
+
+ {{button_group_example}} +
+ {% highlight html %}{{button_group_example}}{% endhighlight %} + +
+ +

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 %} + +
+ +

Button group with addons

+
+

You can group together addons as well:

+
+ +
+ {{button_group_addons_example}} +
+ {% highlight html %}{{button_group_addons_example}}{% endhighlight %} {% include variables.html %}