From: Jeremy Thomas Date: Fri, 28 Jul 2017 21:57:51 +0000 (+0100) Subject: Add tags X-Git-Tag: 0.5.0~16 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=24bc5ed795194b2d0d5c59ffa43b58f0b8d815d0;p=thirdparty%2Fbulma.git Add tags --- diff --git a/docs/_includes/meta.html b/docs/_includes/meta.html new file mode 100644 index 000000000..328ffbdae --- /dev/null +++ b/docs/_includes/meta.html @@ -0,0 +1,44 @@ +
+ + {% if include.since %} +
+
+ Since + {{ include.since }} +
+
+ {% endif %} + +
+
+ Colors + {% if include.colors %} + Yes + {% else %} + No + {% endif %} +
+
+ +
+
+ Sizes + {% if include.sizes %} + Yes + {% else %} + No + {% endif %} +
+
+ +
+
+ Variables + {% if include.variables %} + Yes + {% else %} + No + {% endif %} +
+
+
diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html new file mode 100644 index 000000000..c0dd3e203 --- /dev/null +++ b/docs/_includes/variables.html @@ -0,0 +1,38 @@ +
+ +

+ Variables +

+ +
+

+ You can use these variables to customize this {%if include.element %}element{% else %}component{% endif %}. Simply set one or multiple of these variables before importing Bulma. Learn how. +

+
+ + + + + + + + + + + + + + + + {% for variable in page.variables %} + + + + + {% endfor %} + +
NameDefault value
NameDefault value
+ {{ variable.name }} + + {{ variable.value }} +
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index ce38081b2..715bbebe2 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -3282,7 +3282,6 @@ input[type="submit"].button { background-color: white; color: #363636; margin-bottom: 1.5rem; - width: 100%; } .table td, @@ -3351,6 +3350,10 @@ input[type="submit"].button { border-bottom-width: 1px; } +.table.is-fullwidth { + width: 100%; +} + .table.is-narrow td, .table.is-narrow th { padding: 0.25em 0.5em; @@ -3364,18 +3367,55 @@ input[type="submit"].button { background-color: whitesmoke; } +.tags { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +.tags .tag { + margin-bottom: 0.5rem; +} + +.tags .tag:not(:last-child) { + margin-right: 0.5rem; +} + +.tags:last-child { + margin-bottom: -0.5rem; +} + +.tags:not(:last-child) { + margin-bottom: 1rem; +} + +.tags.has-addons .tag { + margin-right: 0; +} + +.tags.has-addons .tag:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.tags.has-addons .tag:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + .tag { align-items: center; background-color: whitesmoke; - border-radius: 290486px; + border-radius: 3px; color: #4a4a4a; display: inline-flex; font-size: 0.75rem; height: 2em; justify-content: center; line-height: 1.5; - padding-left: 0.875em; - padding-right: 0.875em; + padding-left: 0.75em; + padding-right: 0.75em; white-space: nowrap; } @@ -3437,6 +3477,14 @@ input[type="submit"].button { font-size: 1.25rem; } +.tag.is-rounded { + border-radius: 290486px; +} + +a.tag:hover { + text-decoration: underline; +} + .title, .subtitle { word-break: break-word; @@ -3451,12 +3499,7 @@ input[type="submit"].button { .title span, .subtitle em, .subtitle span { - font-weight: 300; -} - -.title strong, -.subtitle strong { - font-weight: 500; + font-weight: inherit; } .title .tag, @@ -3467,12 +3510,13 @@ input[type="submit"].button { .title { color: #363636; font-size: 2rem; - font-weight: 300; + font-weight: 700; line-height: 1.125; } .title strong { color: inherit; + font-weight: inherit; } .title + .highlight { @@ -3510,12 +3554,13 @@ input[type="submit"].button { .subtitle { color: #4a4a4a; font-size: 1.25rem; - font-weight: 300; + font-weight: 400; line-height: 1.25; } .subtitle strong { color: #363636; + font-weight: 600; } .subtitle:not(.is-spaced) + .title { diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index 9ba379d2d..2265dbbc3 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -2,6 +2,15 @@ layout: documentation doc-tab: components doc-subtab: breadcrumb +variables: +- name: $breadcrumb-item-color + value: $text-light +- name: $breadcrumb-item-hover-color + value: $link-hover +- name: $breadcrumb-item-active-color + value: $text-strong +- name: $breadcrumb-item-separator-color + value: $text --- {% include subnav-components.html %} @@ -136,10 +145,17 @@ doc-subtab: breadcrumb

A simple breadcrumb component to improve your navigation experience

+ {% + include meta.html + since="0.4.3" + variables=true + colors=false + sizes=true + %}
-

+

New! 0.4.3

@@ -198,60 +214,64 @@ doc-subtab: breadcrumb
-

Sizes

- +

Alternative separators

-

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

+

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

- {{breadcrumb_small_example}} + {{breadcrumb_arrow_example}}
- {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %} + {% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
- {{breadcrumb_medium_example}} + {{breadcrumb_bullet_example}}
- {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %} + {% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
- {{breadcrumb_large_example}} + {{breadcrumb_dot_example}}
- {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %} + {% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %} -
+
+ {{breadcrumb_succeeds_example}} +
+ + {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %} + +
+ +

+ Sizes +

-

Alternative separators

-

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

+

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

- {{breadcrumb_arrow_example}} + {{breadcrumb_small_example}}
- {% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %} + {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
- {{breadcrumb_bullet_example}} + {{breadcrumb_medium_example}}
- {% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %} + {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
- {{breadcrumb_dot_example}} + {{breadcrumb_large_example}}
- {% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %} - -
- {{breadcrumb_succeeds_example}} -
+ {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %} - {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %} + {% include variables.html %}
diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index b73925aa1..7ae48e52b 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -2,6 +2,21 @@ layout: documentation doc-tab: components doc-subtab: card +variables: +- name: $card-color + value: $text +- name: $card-background-color + value: $white +- name: $card-shadow + value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) +- name: $card-header-color + value: $text-strong +- name: $card-header-shadow + value: 0 1px 2px rgba($black, 0.1) +- name: $card-header-weight + value: $weight-bold +- name: $card-footer-border-top + value: 1px solid $border --- {% capture card_example %} @@ -94,6 +109,12 @@ doc-subtab: card

Card

An all-around flexible and composable component

+ {% + include meta.html + variables=true + colors=false + sizes=false + %}
@@ -166,5 +187,7 @@ doc-subtab: card
+ {% include variables.html %} + diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html index 60e466834..6653e24b5 100644 --- a/docs/documentation/elements/box.html +++ b/docs/documentation/elements/box.html @@ -2,6 +2,21 @@ layout: documentation doc-tab: elements doc-subtab: box +variables: +- name: $box-color + value: $text +- name: $box-background-color + value: $white +- name: $box-radius + value: $radius-large +- name: $box-shadow + value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) +- name: $box-padding + value: 1.25rem +- name: $box-link-hover-shadow + value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link +- name: $box-link-active-shadow + value: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link --- {% include subnav-elements.html %} @@ -67,5 +82,7 @@ doc-subtab: box {% highlight html %}{{box_example}}{% endhighlight %} + {% include variables.html %} + diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 0fba0deb5..8feb63840 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -2,6 +2,47 @@ layout: documentation doc-tab: elements doc-subtab: button +variables: +- name: $button-color + value: $grey-darker +- name: $button-background-color + value: $white +- name: $button-border-color + value: $grey-lighter +- name: $button-hover-color + value: $link-hover +- name: $button-hover-border-color + value: $link-hover-border +- name: $button-focus-color + value: $link-focus +- name: $button-focus-border-color + value: $link-focus-border +- name: $button-active-color + value: $link-active +- name: $button-active-border-color + value: $link-active-border +- name: $button-link-color + value: $text +- name: $button-link-hover-background-color + value: $background +- name: $button-link-hover-color + value: $text-strong +- name: $button-disabled-background-color + value: $white +- name: $button-disabled-border-color + value: $grey-lighter +- name: $button-disabled-shadow + value: none +- name: $button-disabled-opacity + value: 0.5 +- name: $button-static-color + value: $grey +- name: $button-static-background-color + value: $white-ter +- name: $button-static-border-color + value: $grey-lighter +- name: $button-shadow-inset + value: inset 0 1px 2px rgba($black, 0.2) --- {% include subnav-elements.html %} @@ -594,5 +635,7 @@ doc-subtab: button {{button_group_addons_example}} {% endhighlight %} + {% include variables.html %} + diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index c52a75297..522e6fbab 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -2,44 +2,53 @@ layout: documentation doc-tab: elements doc-subtab: content +variables: +- name: $content-heading-color + value: $text-strong +- name: $content-heading-weight + value: $weight-normal +- name: $content-heading-line-height + value: 1.125 +- name: $content-blockquote-background-color + value: $background +- name: $content-blockquote-border-left + value: 5px solid $border +- name: $content-blockquote-padding + value: 1.25em 1.5em +- name: $content-pre-padding + value: 1.25em 1.5em +- name: $content-table-cell-border + value: 1px solid $border +- name: $content-table-cell-border-width + value: 0 0 1px +- name: $content-table-cell-padding + value: 0.5em 0.75em +- name: $content-table-cell-heading-color + value: $text-strong +- name: $content-table-row-hover-background-color + value: $background +- name: $content-table-head-cell-border-width + value: 0 0 2px +- name: $content-table-head-cell-color + value: $text-strong +- name: $content-table-foot-cell-border-width + value: 2px 0 0 +- name: $content-table-foot-cell-color + value: $text-strong --- -{% include subnav-elements.html %} - -
-
-

Content

-

- A single class to handle WYSIWYG generated content, where only HTML tags are available -

- -
- -
-

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

-
    -
  • <p> paragraphs
    • -
  • <ul> <ol> <dl> lists
    • -
  • <h1> to <h6> headings
    • -
  • <blockquote> quotes
    • -
  • <em> and <strong>
    • -
  • <table> <tr> <th> <td> tables
    • -
-

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

-
- {% capture content_example %}

Hello World

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • Ut non enim metus.
    • -
+

Third level

Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

    @@ -107,26 +116,48 @@ doc-subtab: content

    Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.

    Fifth level
    -

    Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.

    -
    - - -
    - Figure 1: Some beautiful placeholders -
    -
    +

    Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.

    +
    + + +
    + Figure 1: Some beautiful placeholders +
    +
    Sixth level
    -

    Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.

    +

    Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.

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

Content

+

+ A single class to handle WYSIWYG generated content, where only HTML tags are available +

+ +
+ +
+

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

+
    +
  • <p> paragraphs
    • +
  • <ul> <ol> <dl> lists
    • +
  • <h1> to <h6> headings
    • +
  • <blockquote> quotes
    • +
  • <em> and <strong>
    • +
  • <table> <tr> <th> <td> tables
    • +
+

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

+
+ +
+ {{content_example}} +
+ + {% highlight html %}{{content_example}}{% endhighlight %}
@@ -176,5 +207,8 @@ doc-subtab: content
+ + {% include variables.html %} +
diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index 4b2319867..b57234e10 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -2,8 +2,24 @@ layout: documentation doc-tab: elements doc-subtab: icon +variables: +- name: $icon-dimensions + value: 1.5rem +- name: $icon-dimensions-small + value: 1rem +- name: $icon-dimensions-medium + value: 2rem +- name: $icon-dimensions-large + value: 3rem + --- +{% capture icon_example %} + + + +{% endcapture %} + {% include subnav-elements.html %}
@@ -19,18 +35,11 @@ doc-subtab: icon

Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a container:

-{% capture icon_example %} - - - -{% endcapture %}
{{icon_example}}
-{% highlight html %} -{{icon_example}} -{% endhighlight %} + {% highlight html %}{{icon_example}}{% endhighlight %}

The icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized at 21px.

@@ -80,5 +89,8 @@ doc-subtab: icon + + {% include variables.html %} +
diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index d5fa8d079..1dbc72936 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -2,6 +2,9 @@ layout: documentation doc-tab: elements doc-subtab: image +variables: +- name: $dimensions + value: 16 24 32 48 64 96 128 --- {% include subnav-elements.html %} @@ -142,5 +145,8 @@ doc-subtab: image

The .image container will take up the whole width while maintaining the perfect ratio.

+ + {% include variables.html %} + diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index a91969cf2..2c915d80e 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -2,6 +2,13 @@ layout: documentation doc-tab: elements doc-subtab: notification +variables: +- name: $notification-background-color + value: $background +- name: $notification-radius + value: $radius +- name: $notification-padding + value: 1.25rem 2.5rem 1.25rem 1.5rem --- {% include subnav-elements.html %} @@ -88,5 +95,8 @@ doc-subtab: notification {% endhighlight %} + + {% include variables.html %} + diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 2b66f0233..82bf3e607 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -2,6 +2,11 @@ layout: documentation doc-tab: elements doc-subtab: progress +variables: +- name: $progress-bar-background-color + value: $border +- name: $progress-value-background-color + value: $text --- {% include subnav-elements.html %} @@ -48,5 +53,7 @@ doc-subtab: progress 60% {% endhighlight %} + {% include variables.html element=true %} + diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 5d75f2229..4034e6ef2 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -2,57 +2,41 @@ layout: documentation doc-tab: elements doc-subtab: table +variables: +- name: $table-color + value: $grey-darker +- name: $table-background-color + value: $white +- name: $table-cell-border + value: 1px solid $grey-lighter +- name: $table-cell-border-width + value: 0 0 1px +- name: $table-cell-padding + value: 0.5em 0.75em +- name: $table-cell-heading-color + value: $text-strong +- name: $table-head-color + value: $grey +- name: $table-head-cell-border-width + value: 0 0 2px +- name: $table-head-cell-color + value: $text-strong +- name: $table-foot-cell-border-width + value: 2px 0 0 +- name: $table-foot-cell-color + value: $text-strong +- name: $table-row-hover-background-color + value: $white-bis +- name: $table-row-active-background-color + value: $primary +- name: $table-row-active-color + value: $primary-invert +- name: $table-striped-row-even-background-color + value: $white-bis +- name: $table-striped-row-even-hover-background-color + value: $white-ter --- -{% include subnav-elements.html %} - -
-
-

Tables

-

The inevitable HTML table, with special case cells

- -
- -
-

You simply need to attach a single .table CSS class on a <table> with the following structure:

-
    -
  • - table -
      -
    • - thead -
      • -
    • - tfoot -
      • -
    • - tbody -
        -
      • - tr -
          -
        • - th -
          • -
        • - td -
          • -
        -
        • -
      -
      • -
    -
    • -
-

- New! - 0.4.2 -

-

- You can set a table row as selected by appending the is-selected modifier on a <tr> -

-
- {% capture table_example %} @@ -353,13 +337,60 @@ doc-subtab: table
{% endcapture %} -
- {{table_example}} -
+{% include subnav-elements.html %} -{% highlight html %} -{{table_example}} -{% endhighlight %} +
+
+

Tables

+

The inevitable HTML table, with special case cells

+ +
+ +
+

You simply need to attach a single .table CSS class on a <table> with the following structure:

+
    +
  • + table the main container +
      +
    • + thead the optional top part of the table +
      • +
    • + tfoot the optional bottom part of the table +
      • +
    • + tbody the main content of the table +
        +
      • + tr each table row +
          +
        • + th a table cell heading +
          • +
        • + td a table cell +
          • +
        +
        • +
      +
      • +
    +
    • +
+

+ New! + 0.4.2 +

+

+ You can set a table row as selected by appending the is-selected modifier on a <tr> +

+
+ +
+ {{table_example}} +
+ + {% highlight html %}{{table_example}}{% endhighlight %}
@@ -474,13 +505,54 @@ doc-subtab: table
-

You can combine all three modifiers.

+

You can have a fullwidth table.

+
+
+ table is-fullwidth +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+ +
+
+

You can combine all four modifiers.

- table is-bordered is-striped is-narrow + table is-bordered is-striped is-narrow is-fullwidth
- +
@@ -512,5 +584,8 @@ doc-subtab: table
One
+ + {% include variables.html element=true %} +
diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index b16af93c6..f0fe2d3f5 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -2,8 +2,51 @@ layout: documentation doc-tab: elements doc-subtab: tag +variables: +- name: $tag-background-color + value: background +- name: $tag-color + value: text --- +{% capture tag %} + + Tag label + +{% endcapture %} + +{% capture tags %} +Black +Dark +Light +White +Primary +Info +Success +Warning +Danger +{% endcapture %} + +{% capture sizes %} +Medium +Large +{% endcapture %} + +{% capture delete %} + + Bar + + + + Hello + + + + World + + +{% endcapture %} + {% include subnav-elements.html %}
@@ -25,11 +68,7 @@ doc-subtab: tag
-{% highlight html %} - - Tag label - -{% endhighlight %} + {% highlight html %}{{ tag }}{% endhighlight %}
@@ -83,17 +122,7 @@ doc-subtab: tag
-{% highlight html %} -Black -Dark -Light -White -Primary -Info -Success -Warning -Danger -{% endhighlight %} + {% highlight html %}{{ tags }}{% endhighlight %}
@@ -114,10 +143,7 @@ doc-subtab: tag

-{% highlight html %} -Medium -Large -{% endhighlight %} + {% highlight html %}{{ sizes }}{% endhighlight %}
@@ -146,21 +172,10 @@ doc-subtab: tag

-{% highlight html %} - - Bar - - - - Hello - - - - World - - -{% endhighlight %} + {% highlight html %}{{ delete }}{% endhighlight %}
+ + {% include variables.html element=true %}
diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index ec40a9a3e..cebcba770 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -2,8 +2,70 @@ layout: documentation doc-tab: elements doc-subtab: title +variables: +- name: $title-color + value: $grey-darker +- name: $title-size + value: $size-3 +- name: $title-weight + value: $weight-light +- name: $title-weight-bold + value: $weight-semibold +- name: $subtitle-color + value: $grey-dark +- name: $subtitle-size + value: $size-5 +- name: $subtitle-strong + value: $grey-darker +- name: $subtitle-weight + value: $weight-light --- +{% capture default %} +

Title

+

Subtitle

+{% endcapture %} + +{% capture title_sizes %} +

Title 1

+

Title 2

+

Title 3

+

Title 4

+
Title 5
+
Title 6
+{% endcapture %} + +{% capture subtitle_sizes %} +

Subtitle 1

+

Subtitle 2

+

Subtitle 3

+

Subtitle 4

+
Subtitle 5
+
Subtitle 6
+{% endcapture %} + +{% capture combine %} +

Title 1

+

Subtitle 3

+ +

Title 2

+

Subtitle 4

+ +

Title 3

+

Subtitle 5

+{% endcapture %} + +{% capture spaced %} +

Title 1

+

Subtitle 3

+ +

Title 2

+

Subtitle 4

+ +

Title 3

+

Subtitle 5

+{% endcapture %} + {% include subnav-elements.html %}
@@ -24,10 +86,7 @@ doc-subtab: title

Subtitle

-{% highlight html %} -

Title

-

Subtitle

-{% endhighlight %} + {% highlight html %}{{ default }}{% endhighlight %}
@@ -46,14 +105,7 @@ doc-subtab: title

Title 6

-{% highlight html %} -

Title 1

-

Title 2

-

Title 3

-

Title 4

-
Title 5
-
Title 6
-{% endhighlight %} + {% highlight html %}{{ title_sizes }}{% endhighlight %}
@@ -68,14 +120,7 @@ doc-subtab: title

Subtitle 6

-{% highlight html %} -

Subtitle 1

-

Subtitle 2

-

Subtitle 3

-

Subtitle 4

-
Subtitle 5
-
Subtitle 6
-{% endhighlight %} + {% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
@@ -103,16 +148,7 @@ doc-subtab: title
-{% highlight html %} -

Title 1

-

Subtitle 3

- -

Title 2

-

Subtitle 4

- -

Title 3

-

Subtitle 5

-{% endhighlight %} + {% highlight html %}{{ combine }}{% endhighlight %}
@@ -142,17 +178,11 @@ doc-subtab: title
-{% highlight html %} -

Title 1

-

Subtitle 3

- -

Title 2

-

Subtitle 4

- -

Title 3

-

Subtitle 5

-{% endhighlight %} + {% highlight html %}{{ spaced }}{% endhighlight %}
+ + {% include variables.html element=true %} +
diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html index 719947281..407340d25 100644 --- a/docs/documentation/overview/customize.html +++ b/docs/documentation/overview/customize.html @@ -4,6 +4,32 @@ doc-tab: overview doc-subtab: customize --- +{% capture sass %} +// 1. Import the initial variables +@import "../sass/utilities/initial-variables" + +// 2. Set your own initial variables +// Update blue +$blue: #72d0eb +// Add pink and its invert +$pink: #ffb3b3 +$pink-invert: #fff +// Add a serif family +$family-serif: "Merriweather", "Georgia", serif + +// 3. Set the derived variables +// Use the new pink as the primary color +$primary: $pink +$primary-invert: $pink-invert +// Use the existing orange as the danger color +$danger: $orange +// Use the new serif family +$family-primary: $family-serif + +// 4. Import the rest of Bulma +@import "../bulma" +{% endcapture %} + {% include subnav-overview.html %}
@@ -25,9 +51,7 @@ doc-subtab: customize

Download the source files:

-{% highlight bash %} -npm install bulma -{% endhighlight %} + {% highlight bash %}npm install bulma{% endhighlight %}
or clone the repository: https://github.com/jgthms/bulma
@@ -43,32 +67,9 @@ npm install bulma

Add your own colors, set new fonts, override Bulma styles...

-{% highlight sass %} -// 1. Import the initial variables -@import "../sass/utilities/initial-variables" - -// 2. Set your own initial variables -// Update blue -$blue: #72d0eb -// Add pink and its invert -$pink: #ffb3b3 -$pink-invert: #fff -// Add a serif family -$family-serif: "Merriweather", "Georgia", serif - -// 3. Set the derived variables -// Use the new pink as the primary color -$primary: $pink -$primary-invert: $pink-invert -// Use the existing orange as the danger color -$danger: $orange -// Use the new serif family -$family-primary: $family-serif - -// 4. Import the rest of Bulma -@import "../bulma" -{% endhighlight %} -

+
+ {% highlight sass %}{{ sass }}{% endhighlight %} +
diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 44a13a207..cba22f202 100755 --- a/sass/elements/table.sass +++ b/sass/elements/table.sass @@ -24,7 +24,6 @@ $table-striped-row-even-hover-background-color: $white-ter !default background-color: $table-background-color color: $table-color margin-bottom: 1.5rem - width: 100% td, th border: $table-cell-border @@ -77,6 +76,8 @@ $table-striped-row-even-hover-background-color: $white-ter !default td, th border-bottom-width: 1px + &.is-fullwidth + width: 100% &.is-narrow td, th diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass index 38653f10f..46aa1b612 100755 --- a/sass/elements/tag.sass +++ b/sass/elements/tag.sass @@ -1,18 +1,42 @@ $tag-background-color: $background !default $tag-color: $text !default +$tag-radius: $radius !default + +.tags + align-items: center + display: flex + flex-wrap: wrap + justify-content: flex-start + .tag + margin-bottom: 0.5rem + &:not(:last-child) + margin-right: 0.5rem + &:last-child + margin-bottom: -0.5rem + &:not(:last-child) + margin-bottom: 1rem + &.has-addons + .tag + margin-right: 0 + &:not(:first-child) + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &:not(:last-child) + border-bottom-right-radius: 0 + border-top-right-radius: 0 .tag align-items: center background-color: $tag-background-color - border-radius: 290486px + border-radius: $tag-radius color: $tag-color display: inline-flex font-size: $size-small height: 2em justify-content: center line-height: 1.5 - padding-left: 0.875em - padding-right: 0.875em + padding-left: 0.75em + padding-right: 0.75em white-space: nowrap .delete margin-left: 0.25em @@ -29,3 +53,10 @@ $tag-color: $text !default font-size: $size-normal &.is-large font-size: $size-medium + // Modifiers + &.is-rounded + border-radius: 290486px + +a.tag + &:hover + text-decoration: underline diff --git a/sass/elements/title.sass b/sass/elements/title.sass index 02f9856ec..b604e8083 100755 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -1,12 +1,14 @@ $title-color: $grey-darker !default $title-size: $size-3 !default -$title-weight: $weight-light !default -$title-weight-bold: $weight-semibold !default +$title-weight: $weight-bold !default +$title-strong-color: inherit !default +$title-strong-weight: inherit !default $subtitle-color: $grey-dark !default $subtitle-size: $size-5 !default -$subtitle-strong: $grey-darker !default -$subtitle-weight: $weight-light !default +$subtitle-weight: $weight-normal !default +$subtitle-strong-color: $grey-darker !default +$subtitle-strong-weight: $weight-semibold !default .title, .subtitle @@ -14,9 +16,7 @@ $subtitle-weight: $weight-light !default word-break: break-word em, span - font-weight: $title-weight - strong - font-weight: $title-weight-bold + font-weight: inherit .tag vertical-align: middle @@ -26,7 +26,8 @@ $subtitle-weight: $weight-light !default font-weight: $title-weight line-height: 1.125 strong - color: inherit + color: $title-strong-color + font-weight: $title-strong-weight & + .highlight margin-top: -0.75rem &:not(.is-spaced) + .subtitle @@ -43,7 +44,8 @@ $subtitle-weight: $weight-light !default font-weight: $subtitle-weight line-height: 1.25 strong - color: $subtitle-strong + color: $subtitle-strong-color + font-weight: $subtitle-strong-weight &:not(.is-spaced) + .title margin-top: -1.5rem // Sizes diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass index 15c017538..2b9966672 100755 --- a/sass/utilities/initial-variables.sass +++ b/sass/utilities/initial-variables.sass @@ -38,7 +38,8 @@ $size-7: 0.75rem !default $weight-light: 300 !default $weight-normal: 400 !default -$weight-semibold: 500 !default +$weight-medium: 500 !default +$weight-semibold: 600 !default $weight-bold: 700 !default // Responsiveness