From: Jeremy Thomas Date: Wed, 30 Aug 2017 21:21:30 +0000 (+0100) Subject: More snippets X-Git-Tag: 0.5.2~30 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=695c72c6a94dc77147b5b2e149ab50464c0dd61c;p=thirdparty%2Fbulma.git More snippets --- diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html index d1ddce086..fc8907752 100644 --- a/docs/_includes/snippet.html +++ b/docs/_includes/snippet.html @@ -1,6 +1,7 @@
diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index b685d24d2..1f7c02df6 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -58,6 +58,10 @@ .bd-snippet-code background-color: $pre-background +.bd-snippet.bd-is-clipped + .bd-snippet-code + overflow: auto + +desktop .bd-snippet.bd-is-vertical align-items: stretch @@ -161,6 +165,9 @@ $structure-invert: $danger-invert &:hover background-color: $yellow color: $yellow-invert + &:focus, + &:active + box-shadow: none .bd-expand right: 45px +tablet diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index a06174019..0a418d5f9 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -2537,46 +2537,118 @@ a.box:active { border-color: white; } +.input.is-white:focus, .input.is-white.is-focused, .input.is-white:active, .input.is-white.is-active, +.textarea.is-white:focus, +.textarea.is-white.is-focused, +.textarea.is-white:active, +.textarea.is-white.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); +} + .input.is-black, .textarea.is-black { border-color: #0a0a0a; } +.input.is-black:focus, .input.is-black.is-focused, .input.is-black:active, .input.is-black.is-active, +.textarea.is-black:focus, +.textarea.is-black.is-focused, +.textarea.is-black:active, +.textarea.is-black.is-active { + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); +} + .input.is-light, .textarea.is-light { border-color: whitesmoke; } +.input.is-light:focus, .input.is-light.is-focused, .input.is-light:active, .input.is-light.is-active, +.textarea.is-light:focus, +.textarea.is-light.is-focused, +.textarea.is-light:active, +.textarea.is-light.is-active { + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); +} + .input.is-dark, .textarea.is-dark { border-color: #363636; } +.input.is-dark:focus, .input.is-dark.is-focused, .input.is-dark:active, .input.is-dark.is-active, +.textarea.is-dark:focus, +.textarea.is-dark.is-focused, +.textarea.is-dark:active, +.textarea.is-dark.is-active { + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); +} + .input.is-primary, .textarea.is-primary { border-color: #00d1b2; } +.input.is-primary:focus, .input.is-primary.is-focused, .input.is-primary:active, .input.is-primary.is-active, +.textarea.is-primary:focus, +.textarea.is-primary.is-focused, +.textarea.is-primary:active, +.textarea.is-primary.is-active { + box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); +} + .input.is-info, .textarea.is-info { border-color: #3273dc; } +.input.is-info:focus, .input.is-info.is-focused, .input.is-info:active, .input.is-info.is-active, +.textarea.is-info:focus, +.textarea.is-info.is-focused, +.textarea.is-info:active, +.textarea.is-info.is-active { + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); +} + .input.is-success, .textarea.is-success { border-color: #23d160; } +.input.is-success:focus, .input.is-success.is-focused, .input.is-success:active, .input.is-success.is-active, +.textarea.is-success:focus, +.textarea.is-success.is-focused, +.textarea.is-success:active, +.textarea.is-success.is-active { + box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); +} + .input.is-warning, .textarea.is-warning { border-color: #ffdd57; } +.input.is-warning:focus, .input.is-warning.is-focused, .input.is-warning:active, .input.is-warning.is-active, +.textarea.is-warning:focus, +.textarea.is-warning.is-focused, +.textarea.is-warning:active, +.textarea.is-warning.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); +} + .input.is-danger, .textarea.is-danger { border-color: #ff3860; } +.input.is-danger:focus, .input.is-danger.is-focused, .input.is-danger:active, .input.is-danger.is-active, +.textarea.is-danger:focus, +.textarea.is-danger.is-focused, +.textarea.is-danger:active, +.textarea.is-danger.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); +} + .input.is-small, .textarea.is-small { border-radius: 2px; @@ -9634,6 +9706,10 @@ html.route-index #carbon { background-color: whitesmoke; } +.bd-snippet.bd-is-clipped .bd-snippet-code { + overflow: auto; +} + @media screen and (min-width: 1008px) { .bd-snippet.bd-is-vertical { align-items: stretch; @@ -9773,6 +9849,12 @@ html.route-index #carbon { color: rgba(0, 0, 0, 0.7); } +.highlight .bd-copy:focus, .highlight .bd-copy:active, +.highlight .bd-expand:focus, +.highlight .bd-expand:active { + box-shadow: none; +} + .highlight .bd-expand { right: 45px; } diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index 73c69bf99..de4f438cf 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -160,75 +160,53 @@ variables:
-
- {{breadcrumb_example}} -
+ {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_example}}{% endhighlight %} -
+ {% include anchor.html name="Alignment" %} -

Alignment

For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

- -
- {{breadcrumb_centered_example}} -
- + {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %} -
- {{breadcrumb_right_example}} -
+ {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_right_example}}{% endhighlight %} -
- -

Icons

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

You can use any of the Font Awesome icons.

-
- {{breadcrumb_icons_example}} -
+ {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_icons_example}}{% endhighlight %} -
+ {% include anchor.html name="Alternative separators" %} -

Alternative separators

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

-
- {{breadcrumb_arrow_example}} -
+ {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %} -
- {{breadcrumb_bullet_example}} -
+ {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %} -
- {{breadcrumb_dot_example}} -
+ {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %} -
- {{breadcrumb_succeeds_example}} -
+ {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %} @@ -238,21 +216,15 @@ variables:

You can choose between 3 additional sizes: is-small is-medium and is-large.

-
- {{breadcrumb_small_example}} -
+ {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %} -
- {{breadcrumb_medium_example}} -
+ {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %} -
- {{breadcrumb_large_example}} -
+ {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %} diff --git a/docs/documentation/components/level.html b/docs/documentation/components/level.html index 2de194aaa..7984fdafb 100644 --- a/docs/documentation/components/level.html +++ b/docs/documentation/components/level.html @@ -5,231 +5,3 @@ doc-subtab: level --- - -{% include subnav-components.html %} - -
-
-

Level

-

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

- {% - include meta.html - colors=false - sizes=false - variables=false - %} - -
- -
-

The structure of a level is the following:

-
    -
  • - level: main container -
      -
    • level-left for the left side. This element is required, even if it is empty
      • -
    • - level-right for the right side -
        -
      • 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.

-
- -
- -
- -{% capture nav_example %} - - -{% endcapture %} -
-{{nav_example}} -
-{% highlight html %} -{{nav_example}} -{% endhighlight %} - -
- -

Centered level

-
- 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. -
-{% capture nav_centered_example %} - -{% endcapture %} -{% capture nav_centered_bis_example %} - -{% endcapture %} -
-{{nav_centered_example}} -
-{% highlight html %} -{{nav_centered_example}} -{% endhighlight %} -
-{{nav_centered_bis_example}} -
-{% highlight html %} -{{nav_centered_bis_example}} -{% endhighlight %} - -
- -

Mobile level

-
- 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. -
-{% capture nav_mobile_example %} - -{% endcapture %} -
-{{nav_mobile_example}} -
-{% highlight html %} -{{nav_mobile_example}} -{% endhighlight %} - -
-
diff --git a/docs/documentation/components/media-object.html b/docs/documentation/components/media-object.html index 3705a0420..276fd7776 100644 --- a/docs/documentation/components/media-object.html +++ b/docs/documentation/components/media-object.html @@ -5,240 +5,3 @@ doc-subtab: media-object --- - -{% include subnav-components.html %} - -
-
-

Media Object

-

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

- {% - include meta.html - colors=false - sizes=false - variables=false - %} - -
- -
-

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

-
- -
-
- -
-
-
- -{% capture media_example %} -
-
-

- -

-
-
-
-

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

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

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

-
- -{% capture media_bis_example %} -
-
-

- -

-
-
-
-

- -

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

Nesting

-
-

You can nest media objects up to 3 levels deep.

-
-{% capture media_nested_example %} -
-
-

- -

-
-
-
-

- Barbara Middleton -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis. -
- Like · Reply · 3 hrs -

-
- -
-
-

- -

-
-
-
-

- Sean Brown -
- Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat. -
- Like · Reply · 2 hrs -

-
- -
- Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa. -
- -
- Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor. -
-
-
- -
-
-

- -

-
-
-
-

- Kayli Eunice -
- Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat. -
- Like · Reply · 2 hrs -

-
-
-
-
-
-
-
-

- -

-
-
-
-

- -

-
-
-

- -

-
-
-
-{% endcapture %} -
-{{media_nested_example}} -
-{% highlight html %} -{{media_nested_example}} -{% endhighlight %} - -
-
diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index b55f67daf..9d2197aee 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -209,11 +209,7 @@ variables:

-
- {{pagination_example}} -
- - {% highlight html %}{{pagination_example}}{% endhighlight %} + {% include snippet.html content=pagination_example horizontal=true clipped=true %}

@@ -221,11 +217,7 @@ variables:

-
- {{pagination_options_example}} -
- - {% highlight html %}{{pagination_options_example}}{% endhighlight %} + {% include snippet.html content=pagination_options_example horizontal=true clipped=true %}

@@ -233,17 +225,9 @@ variables:

-
- {{pagination_centered_example}} -
+ {% include snippet.html content=pagination_centered_example horizontal=true clipped=true %} - {% highlight html %}{{pagination_centered_example}}{% endhighlight %} - -
- {{pagination_right_example}} -
- - {% highlight html %}{{pagination_right_example}}{% endhighlight %} + {% include snippet.html content=pagination_right_example horizontal=true clipped=true %} {% include anchor.html name="Sizes" %} @@ -252,17 +236,11 @@ variables: You only need to append the modifier is-small, is-medium, or is-large to the pagination component.

-
- {{pagination_small_example}} -
+ {% include snippet.html content=pagination_small_example horizontal=true clipped=true %} -
- {{pagination_medium_example}} -
+ {% include snippet.html content=pagination_medium_example horizontal=true clipped=true %} -
- {{pagination_large_example}} -
+ {% include snippet.html content=pagination_large_example horizontal=true clipped=true %} {% include variables.html %} diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index 282483708..5408f4b9b 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -6,1208 +6,3 @@ doc-subtab: form --- - -{% capture form_example %} -
- -

- -

-
- -
- -

- - - - - - - -

-

This username is available

-
- -
- -

- - - - - - - -

-

This email is invalid

-
- -
- -

- - - -

-
- -
- -

- -

-
- -
-

- -

-
- -
-

- - -

-
- -
-

- -

-

- -

-
-{% endcapture %} - -{% capture colors_example %} -
-

- -

-
-
-

- -

-
-
-

- -

-
-
-

- -

-
-
-

- -

-
-{% endcapture %} - -{% capture sizes_example %} -
-

- -

-
-
-

- -

-
-
-

- -

-
-
-

- -

-
-
-

- - - -

-
-
-

- - - -

-
-
-

- - - -

-
-
-

- - - -

-
-{% endcapture %} - -{% capture normal_example %} -
-

- -

-
-
-

- -

-
-{% endcapture %} - -{% capture hover_example %} -
-

- -

-
-
-

- -

-
-{% endcapture %} - -{% capture focus_example %} -
-

- -

-
-
-

- -

-
-{% endcapture %} - -{% capture loading_example %} -
-

- -

-
-
-
-
- -
-
-
-
-

- -

-
-{% endcapture %} - -{% capture loading_sizes_example %} -
-

- -

-
-
-

- -

-
-
-

- -

-
-
-

- -

-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-{% endcapture %} - -{% capture disabled_example %} -
-

- -

-
-
-
-
- -
-
-
-
-

- -

-
-
-

- -

-
-
-

- - -

-
-
-

- -

-

- -

-
-{% endcapture %} - -{% capture icons_example %} -
-

- - - - -

-
-
-

- - - - -

-
-
-

- -

-
-{% endcapture %} - -{% capture select_icons_example %} -
-

- - - - - - -

-
-{% endcapture %} - -{% capture has_icons_small_example %} -
- -

- - - - - - - -

-
-{% endcapture %} - -{% capture has_icons_normal_example %} -
- -

- - - - - - - -

-
- -
-

- - - - - - - -

-
-{% endcapture %} - -{% capture has_icons_medium_example %} -
- -

- - - - - - - -

-
- -
-

- - - - - - - -

-
- -
-

- - - - - - - -

-
-{% endcapture %} - -{% capture has_icons_large_example %} -
- -

- - - - - - - -

-
- -
-

- - - - - - - -

-
- -
-

- - - - - - - -

-
- -
-

- - - - - - - -

-
-{% endcapture %} - -{% capture addons_example %} -
-

- -

-

- - Search - -

-
-{% endcapture %} - -{% capture addons_static_example %} -
-

- -

-

- - @gmail.com - -

-
-{% endcapture %} - -{% capture addons_expanded_example %} -
-

- - - -

-

- -

-

- - Transfer - -

-
- -
-

- - - -

-

- -

-

- - Transfer - -

-
-{% endcapture %} - -{% capture addons_expanded_fullwidth_example %} -
-

- - - -

-

- -

-
-{% endcapture %} - -{% capture addons_center_example %} -
-

- - - -

-

- -

-

- - Transfer - -

-
-{% endcapture %} - -{% capture addons_right_example %} -
-

- - - -

-

- -

-

- - Transfer - -

-
-{% endcapture %} - -{% capture group_example %} -
-

- -

-

- - Search - -

-
-{% endcapture %} - -{% capture horizontal_form_example %} -
-
- -
-
-
-

- - - - -

-
-
-

- - - - - - - -

-

This email is correct

-
-
-
- -
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
- -
-
-
-
- - -
-
-
-
- -
-
- -
-
-
-
- -
-

- This field is required -

-
-
-
- -
-
- -
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
-{% endcapture %} - -{% capture field_label_example %} -
-
- -
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
-{% endcapture %} - -{% include subnav-elements.html %} - -
-
-

Form controls

-

- All generic form controls, designed for consistency -

- -
- -
-

The following form controls classes are supported:

-
    -
  • .label
    • -
  • .input
    • -
  • .textarea
    • -
  • .select
    • -
  • .checkbox
    • -
  • .radio
    • -
  • .button
    • -
  • .help
    • -
-

Each of them should be wrapped in a .control container.
- When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

-
- -
-
- {{form_example}} -
-
- {% highlight html %}{{form_example}}{% endhighlight %} -
-
- -
- -

Colors

-
-
- {{colors_example}} -
-
- {% highlight html %}{{colors_example}}{% endhighlight %} -
-
- -
-

Sizes

-
-
- {{sizes_example}} -
-
- {% highlight html %}{{sizes_example}}{% endhighlight %} -
-
- -
- -

States

-

Normal

-
-
- {{normal_example}} -
-
- {% highlight html %}{{normal_example}}{% endhighlight %} -
-
- -

Hover

-
-
- {{hover_example}} -
-
- {% highlight html %}{{hover_example}}{% endhighlight %} -
-
- -

Focus

-
-
- {{focus_example}} -
-
- {% highlight html %}{{focus_example}}{% endhighlight %} -
-
- -

Loading

-
-
- {{loading_example}} -
-
- {% highlight html %}{{loading_example}}{% endhighlight %} -
-
- - {% if site.vernum >= 43 %} -
-
-

- New! - 0.4.3 -

-
-

- You can resize the loading spinner by appending is-small, is-medium or is-large to the control container. -

-
- {{loading_sizes_example}} -
-
- {% highlight html %}{{loading_sizes_example}}{% endhighlight %} -
-
- {% endif %} - -

Disabled

-
-
- {{disabled_example}} -
-
- {% highlight html %}{{disabled_example}}{% endhighlight %} -
-
- - -
- -

With icons

-
-

You can append one of 2 modifiers on a control:

-
    -
  • - has-icons-left -
    • -
  • - and/or has-icons-right -
    • -
-

You also need to add a modifier on the icon:

-
    -
  • - icon is-left if has-icons-left is used -
    • -
  • - icon is-right if has-icons-right is used -
    • -
-

The size of the input will define the size of the icon container.

-
-
-
- {{icons_example}} -
-
- {% highlight html %}{{icons_example}}{% endhighlight %} -
-
- -
-
-
-

- New! - 0.4.2 -

-

- You can now append icons to select dropdowns as well. -

-
- {{select_icons_example}} -
-
- {% highlight html %}{{select_icons_example}}{% endhighlight %} -
-
- -
-

- If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon. -

-
- -
-
- {{has_icons_small_example}} -
-
- {% highlight html %}{{has_icons_small_example}}{% endhighlight %} -
-
- -
-
- {{has_icons_normal_example}} -
-
- {% highlight html %}{{has_icons_normal_example}}{% endhighlight %} -
-
- -
-
- {{has_icons_medium_example}} -
-
- {% highlight html %}{{has_icons_medium_example}}{% endhighlight %} -
-
- -
-
- {{has_icons_large_example}} -
-
- {% highlight html %}{{has_icons_large_example}}{% endhighlight %} -
-
- -
- -

Form addons

-
-

If you want to attach controls together, use the has-addons modifier on the control container:

-
-
- {{addons_example}} -
- {% highlight html %}{{addons_example}}{% endhighlight %} -
-

You can attach inputs, buttons, and dropdowns only.

-
- -
-

- New! - 0.4.2 -

-

It can be useful to append a static button.

-
- -
- {{addons_static_example}} -
- {% highlight html %}{{addons_static_example}}{% endhighlight %} - -
-

Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

-
-
- {{addons_expanded_example}} -
- {% highlight html %}{{addons_expanded_example}}{% endhighlight %} - -
-

If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.

-
-
- {{addons_expanded_fullwidth_example}} -
- {% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %} - -
-

Use the has-addons-centered or the has-addons-right modifers to alter the alignment.

-
-
- {{addons_center_example}} -
- {% highlight html %}{{addons_center_example}}{% endhighlight %} -
- {{addons_right_example}} -
- {% highlight html %}{{addons_right_example}}{% endhighlight %} - -
- -

Form group

-
-

- If you want to group controls together, use the is-grouped modifier on the control container. -
- Use the is-grouped-centered or the is-grouped-right modifers to alter the alignment. -

-

- Add the is-expanded modifier on the control element you want to fill up the remaining space. -

-
-
- {{group_example}} -
- {% highlight html %}{{group_example}}{% endhighlight %} - -
- -

Horizontal form

-
-

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

-
    -
  • - field-label for the side label -
    • -
  • - field-body for the input/select/textarea container -
    • -
-

You can of course use is-grouped or has-addons for the child elements.

-
-
- {{horizontal_form_example}} -
- {% highlight html %}{{horizontal_form_example}}{% endhighlight %} - -
-

- New! -

-

- To preserve the vertical alignment of labels with each type and size of control, the .field-label comes with 4 size modifiers: -

-
    -
  • - .is-small -
    • -
  • - .is-normal for any .input or .button -
    • -
  • - .is-medium -
    • -
  • - .is-large -
    • -
-
-
- {{field_label_example}} -
- {% highlight html %}{{field_label_example}}{% endhighlight %} -
-
diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html index db85ab8db..f6ca47fc9 100644 --- a/docs/documentation/form/file.html +++ b/docs/documentation/form/file.html @@ -591,16 +591,7 @@ variables: -
-
-
- {{ file }} -
-
-
- {% highlight html %}{{ file }}{% endhighlight %} -
-
+ {% include snippet.html content=file %} {% include anchor.html name="Modifiers" %} @@ -686,29 +677,21 @@ variables: {% include anchor.html name="Colors" %} -
-
-
-

- You can style the file element by appending one of the 9 color modifiers: -

-
    - {% for color in site.colors %} -
  • - is-{{ color }} -
    • - {% endfor %} -
-
-
- {{ file_colors }} -
-
-
- {% highlight html %}{{ file_colors }}{% endhighlight %} -
+
+

+ You can style the file element by appending one of the 9 color modifiers: +

+
    + {% for color in site.colors %} +
  • + is-{{ color }} +
    • + {% endfor %} +
+ {% include snippet.html content=file_colors clipped=true %} + {% include anchor.html name="Sizes" %}
@@ -728,49 +711,13 @@ variables:
-
-
-
- {{ file_sizes }} -
-
-
- {% highlight html %}{{ file_sizes }}{% endhighlight %} -
-
+ {% include snippet.html content=file_sizes clipped=true %} -
-
-
- {{ file_sizes_name }} -
-
-
- {% highlight html %}{{ file_sizes_name }}{% endhighlight %} -
-
+ {% include snippet.html content=file_sizes_name clipped=true %} -
-
-
- {{ file_sizes_boxed }} -
-
-
- {% highlight html %}{{ file_sizes_boxed }}{% endhighlight %} -
-
+ {% include snippet.html content=file_sizes_boxed clipped=true %} -
-
-
- {{ file_sizes_boxed_name }} -
-
-
- {% highlight html %}{{ file_sizes_boxed_name }}{% endhighlight %} -
-
+ {% include snippet.html content=file_sizes_boxed_name clipped=true %} {% include anchor.html name="Alignment" %} @@ -788,27 +735,9 @@ variables:
-
-
-
- {{ file_centered }} -
-
-
- {% highlight html %}{{ file_centered }}{% endhighlight %} -
-
+ {% include snippet.html content=file_centered %} -
-
-
- {{ file_right }} -
-
-
- {% highlight html %}{{ file_right }}{% endhighlight %} -
-
+ {% include snippet.html content=file_right %} {% include anchor.html name="JavaScript" %} diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index 69c12b755..43e71de9a 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -815,16 +815,14 @@ doc-subtab: general
- {{example}} + {{ example }}
- {% highlight html %}{{example}}{% endhighlight %} + {% highlight html %}{{ example }}{% endhighlight %}
-
- -

Form field

+ {% include anchor.html name="Form field" %}

The field container is a simple container for:

@@ -835,31 +833,15 @@ doc-subtab: general
-
-
- {{field_example}} -
-
- {% highlight html %}{{field_example}}{% endhighlight %} -
-
+ {% include snippet.html content=field_example %}

This container allows form fields to be spaced consistently.

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

Form control

+ {% include anchor.html name="Form control" %}

The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:

@@ -871,37 +853,15 @@ doc-subtab: general
-
-
- {{control_input_example}} -
-
- {% highlight html %}{{control_input_example}}{% endhighlight %} -
-
+ {% include snippet.html content=control_input_example %} -
-
- {{control_select_example}} -
-
- {% highlight html %}{{control_select_example}}{% endhighlight %} -
-
+ {% include snippet.html content=control_select_example %} -
-
- {{control_button_example}} -
-
- {% highlight html %}{{control_button_example}}{% endhighlight %} -
-
+ {% include snippet.html content=control_button_example %} -
+ {% include anchor.html name="With icons" %} -

With icons

You can append one of 2 modifiers on a control:

The size of the input will define the size of the icon container.

-
-
- {{icons_example}} -
-
- {% highlight html %}{{icons_example}}{% endhighlight %} -
-
-
-
-
-

- You can append icons to select dropdowns as well. -

-
- {{select_icons_example}} -
-
- {% highlight html %}{{select_icons_example}}{% endhighlight %} -
-
+ {% include snippet.html content=icons_example clipped=true %} -
-
-
-

- If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon. -

-
- {{has_icons_small_example}} -
-
- {% highlight html %}{{has_icons_small_example}}{% endhighlight %} -
+
+

+ You can append icons to select dropdowns as well. +

-
-
- {{has_icons_normal_example}} -
-
- {% highlight html %}{{has_icons_normal_example}}{% endhighlight %} -
-
+ {% include snippet.html content=select_icons_example %} -
-
- {{has_icons_medium_example}} -
-
- {% highlight html %}{{has_icons_medium_example}}{% endhighlight %} -
+
+

+ If the control contains an icon, Bulma will make sure the icon remains centered, no matter the size of the input or of the icon. +

-
-
- {{has_icons_large_example}} -
-
- {% highlight html %}{{has_icons_large_example}}{% endhighlight %} -
-
+ {% include snippet.html content=has_icons_small_example %} -
+ {% include snippet.html content=has_icons_normal_example clipped=true %} + + {% include snippet.html content=has_icons_medium_example clipped=true %} + + {% include snippet.html content=has_icons_large_example clipped=true %} + + {% include anchor.html name="Form addons" %} -

Form addons

If you want to attach controls together, use the has-addons modifier on the field container:

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

You can attach inputs, buttons, and dropdowns only.

@@ -1009,67 +928,46 @@ doc-subtab: general

It can be useful to append a static button.

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

Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

-
- {{addons_expanded_example}} -
- {% highlight html %}{{addons_expanded_example}}{% endhighlight %} + + {% include snippet.html content=addons_expanded_example horizontal=true clipped=true %}

If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.

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

Use the has-addons-centered or the has-addons-right modifers to alter the alignment.

-
- {{addons_center_example}} -
- {% highlight html %}{{addons_center_example}}{% endhighlight %} -
- {{addons_right_example}} -
- {% highlight html %}{{addons_right_example}}{% endhighlight %} -
+ {% include snippet.html content=addons_center_example %} + + {% include snippet.html content=addons_right_example %} + + {% include anchor.html name="Form group" %} -

Form group

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

-
- {{group_example}} -
- {% highlight html %}{{group_example}}{% endhighlight %} + {% include snippet.html content=group_example %}
Use the is-grouped-centered or the is-grouped-right modifers to alter the alignment.

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

@@ -1077,10 +975,7 @@ doc-subtab: general

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

@@ -1092,20 +987,10 @@ doc-subtab: general

-
-
-
- {{group_multiline_example}} -
-
-
- {% highlight html %}{{group_multiline_example}}{% endhighlight %} -
-
+ {% include snippet.html content=group_multiline_example clipped=true %} -
+ {% include anchor.html name="Horizontal form" %} -

Horizontal form

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

    @@ -1118,10 +1003,8 @@ doc-subtab: general

You can use is-grouped or has-addons for the child elements.

-
- {{horizontal_form_example}} -
- {% highlight html %}{{horizontal_form_example}}{% endhighlight %} + + {% include snippet.html content=horizontal_form_example horizontal=true clipped=true %}

@@ -1142,9 +1025,8 @@ doc-subtab: general

-
- {{field_label_example}} -
- {% highlight html %}{{field_label_example}}{% endhighlight %} + + {% include snippet.html content=field_label_example horizontal=true clipped=true %} +
diff --git a/sass/elements/form.sass b/sass/elements/form.sass index df7f53ddb..029ed2ba9 100755 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -75,6 +75,11 @@ $help-size: $size-small !default $color: nth($pair, 1) &.is-#{$name} border-color: $color + &:focus, + &.is-focused, + &:active, + &.is-active + box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) // Sizes &.is-small +control-small