diff --git a/docs/_includes/meta.html b/docs/_includes/meta.html new file mode 100644 index 00000000..328ffbda --- /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 00000000..c0dd3e20 --- /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 ce38081b..715bbebe 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 9ba379d2..2265dbbc 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,32 +214,6 @@ doc-subtab: breadcrumb
-

Sizes

- -
-

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

-
- -
- {{breadcrumb_small_example}} -
- - {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %} - -
- {{breadcrumb_medium_example}} -
- - {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %} - -
- {{breadcrumb_large_example}} -
- - {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %} - -
-

Alternative separators

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

@@ -253,5 +243,35 @@ doc-subtab: breadcrumb {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %} +
+ +

+ Sizes +

+ +
+

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

+
+ +
+ {{breadcrumb_small_example}} +
+ + {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %} + +
+ {{breadcrumb_medium_example}} +
+ + {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %} + +
+ {{breadcrumb_large_example}} +
+ + {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %} + + {% include variables.html %} +
diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index b73925aa..7ae48e52 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 60e46683..6653e24b 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 0fba0deb..8feb6384 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 c52a7529..522e6fba 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 4b231986..b57234e1 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 d5fa8d07..1dbc7293 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 a91969cf..2c915d80 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 2b66f023..82bf3e60 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 5d75f222..4034e6ef 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,13 @@ doc-subtab: table
-

You can combine all three modifiers.

+

You can have a fullwidth table.

- table is-bordered is-striped is-narrow + table is-fullwidth
- +
@@ -512,5 +543,49 @@ doc-subtab: table
One
+ +
+
+

You can combine all four modifiers.

+
+
+ table is-bordered is-striped is-narrow is-fullwidth +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+ + {% include variables.html element=true %} +
diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index b16af93c..f0fe2d3f 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 ec40a9a3..cebcba77 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 71994728..407340d2 100644 --- a/docs/documentation/overview/customize.html +++ b/docs/documentation/overview/customize.html @@ -4,46 +4,7 @@ doc-tab: overview doc-subtab: customize --- -{% include subnav-overview.html %} - -
-
-

Customizing with Sass

-

Create your own theme with a simple set of variables

- -
- -
-

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

-
- -
-
-

1

-
-
-

- Download the source files: -

-{% highlight bash %} -npm install bulma -{% endhighlight %} -
or clone the repository: https://github.com/jgthms/bulma
-
-
- -
-
-

2

-
-
-

- Set your variables -

-

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

-{% highlight sass %} +{% capture sass %} // 1. Import the initial variables @import "../sass/utilities/initial-variables" @@ -67,8 +28,48 @@ $family-primary: $family-serif // 4. Import the rest of Bulma @import "../bulma" -{% endhighlight %} +{% endcapture %} + +{% include subnav-overview.html %} + +
+
+

Customizing with Sass

+

Create your own theme with a simple set of variables

+ +
+ +
+

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

+
+ +
+
+

1

+
+
+

+ Download the source files:

+ {% highlight bash %}npm install bulma{% endhighlight %} +
or clone the repository: https://github.com/jgthms/bulma
+
+
+ +
+
+

2

+
+
+

+ Set your variables +

+

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

+
+ {% highlight sass %}{{ sass }}{% endhighlight %} +
diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 44a13a20..cba22f20 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 38653f10..46aa1b61 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 02f9856e..b604e808 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 15c01753..2b996667 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