From: Jeremy Thomas Date: Sun, 30 Oct 2016 22:52:04 +0000 (+0000) Subject: Fix tabs X-Git-Tag: 0.3.0^2~20 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=385c412242e6f0ffc6518e930d83d2efae264c07;p=thirdparty%2Fbulma.git Fix tabs --- diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f667f66a..7a1e76648 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,8 @@ * Deprecate `.menu-nav` * Add invert outlined buttons * Fix `.nav` +* Fix `.pagination` +* Fix `.tabs` ## 0.2.2 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index abb1801d0..2860326af 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -4316,8 +4316,8 @@ a.panel-block:hover { user-select: none; align-items: stretch; display: flex; + font-size: 1rem; justify-content: space-between; - line-height: 24px; overflow: hidden; overflow-x: auto; white-space: nowrap; @@ -4334,7 +4334,7 @@ a.panel-block:hover { display: flex; justify-content: center; margin-bottom: -1px; - padding: 6px 12px; + padding: 0.5em 1em; vertical-align: top; } @@ -4362,27 +4362,27 @@ a.panel-block:hover { } .tabs ul.is-left { - padding-right: 10px; + padding-right: 0.75em; } .tabs ul.is-center { flex: none; justify-content: center; - padding-left: 10px; - padding-right: 10px; + padding-left: 0.75em; + padding-right: 0.75em; } .tabs ul.is-right { justify-content: flex-end; - padding-left: 10px; + padding-left: 0.75em; } .tabs .icon:first-child { - margin-right: 8px; + margin-right: 0.5em; } .tabs .icon:last-child { - margin-left: 8px; + margin-left: 0.5em; } .tabs.is-centered ul { @@ -4396,8 +4396,6 @@ a.panel-block:hover { .tabs.is-boxed a { border: 1px solid transparent; border-radius: 3px 3px 0 0; - padding-bottom: 5px; - padding-top: 5px; } .tabs.is-boxed a:hover { @@ -4419,8 +4417,6 @@ a.panel-block:hover { .tabs.is-toggle a { border: 1px solid #dbdbdb; margin-bottom: 0; - padding-bottom: 5px; - padding-top: 5px; position: relative; } @@ -4457,41 +4453,14 @@ a.panel-block:hover { font-size: 0.75rem; } -.tabs.is-small a { - padding: 2px 8px; -} - -.tabs.is-small.is-boxed a, .tabs.is-small.is-toggle a { - padding-bottom: 1px; - padding-top: 1px; -} - .tabs.is-medium { font-size: 1.25rem; } -.tabs.is-medium a { - padding: 10px 16px; -} - -.tabs.is-medium.is-boxed a, .tabs.is-medium.is-toggle a { - padding-bottom: 9px; - padding-top: 9px; -} - .tabs.is-large { font-size: 1.5rem; } -.tabs.is-large a { - padding: 14px 20px; -} - -.tabs.is-large.is-boxed a, .tabs.is-large.is-toggle a { - padding-bottom: 13px; - padding-top: 13px; -} - .column { display: block; flex-basis: 0; diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index d1bd30527..95cff37da 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -94,18 +94,6 @@ doc-subtab: pagination
  • 3
    • -
  • - 4 -
    • -
  • - 5 -
    • -
  • - … -
    • -
  • - 86 -
    • {% endcapture %} diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index 0faebadb1..ecd403701 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -18,17 +18,7 @@ doc-subtab: tabs The default tabs style has a single border at the bottom.

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

    Alignment

    -

    To align the tabs list, use the is-centered or is-right modifier on the .tabs container:

    - -
    -
    - -
    -
    -{% highlight html %} +{% capture tabs_centered_example %}
    -{% endhighlight %} - +{% endcapture %}
    -
    - -
    +{{tabs_centered_example}}
    - {% highlight html %} +{{tabs_centered_example}} +{% endhighlight %} + +{% capture tabs_right_example %}
    -{% endhighlight %} - -
    -

    - To have several lists aligned differently, use one of 3 modifiers on the ul: -

    - -
    - +{% endcapture %}
    -
    - - - -
    +{{tabs_right_example}}
    - {% highlight html %} -
    - - - -
    +{{tabs_right_example}} {% endhighlight %}

    Icons

    -

    You can use any of the Font Awesome icons.

    -
    -
    - -
    -
    - -{% highlight html %} +{% capture tabs_icons_example %}
    +{% endcapture %} +
    +{{tabs_icons_example}} +
    +{% highlight html %} +{{tabs_icons_example}} {% endhighlight %}
    @@ -217,19 +127,7 @@ doc-subtab: tabs

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

    - -
    -
    - -
    -
    - -{% highlight html %} +{% capture tabs_small_example %}
    -{% endhighlight %} - +{% endcapture %}
    -
    - -
    +{{tabs_small_example}}
    - {% highlight html %} +{{tabs_small_example}} +{% endhighlight %} + +{% capture tabs_medium_example %}
    -{% endhighlight %} - +{% endcapture %}
    -
    - -
    +{{tabs_medium_example}}
    - {% highlight html %} +{{tabs_medium_example}} +{% endhighlight %} + +{% capture tabs_large_example %}
    +{% endcapture %} +
    +{{tabs_large_example}} +
    +{% highlight html %} +{{tabs_large_example}} {% endhighlight %}
    @@ -290,39 +184,7 @@ doc-subtab: tabs
    If you want a more classic style with borders, just append the is-boxed modifier.
    - -
    -
    - -
    -
    - -{% highlight html %} +{% capture tabs_boxed_example %}
    +{% endcapture %} +
    +{{tabs_boxed_example}} +
    +{% highlight html %} +{{tabs_boxed_example}} {% endhighlight %}

    If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier.

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

    If you want the tabs to take up the whole width available, use is-fullwidth.

    -
    -
    - -
    -
    -{% highlight html %} +{% capture tabs_fullwidth_example %}
    +{% endcapture %} +
    +{{tabs_fullwidth_example}} +
    +{% highlight html %} +{{tabs_fullwidth_example}} {% endhighlight %}
    @@ -477,39 +301,7 @@ doc-subtab: tabs

    You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

    - -
    -
    - -
    -
    - -{% highlight html %} +{% capture tabs_centered_boxed_example %}
    -{% endhighlight %} - +{% endcapture %}
    -
    - -
    +{{tabs_centered_boxed_example}}
    - {% highlight html %} +{{tabs_centered_boxed_example}} +{% endhighlight %} + +{% capture toggle_fullwidth_example %}
    -{% endhighlight %} - +{% endcapture %}
    -
    - -
    +{{tabs_toggle_fullwidth_example}}
    - {% highlight html %} +{{tabs_toggle_fullwidth_example}} +{% endhighlight %} + +{% capture tabs_centered_boxed_medium_example %}
    -{% endhighlight %} - +{% endcapture %}
    -
    - -
    +{{tabs_centered_boxed_medium_example}}
    - {% highlight html %} +{{tabs_centered_boxed_medium_example}} +{% endhighlight %} + +{% capture tabs_toggle_fullwidth_large_example %}
    +{% endcapture %} +
    +{{tabs_toggle_fullwidth_large_example}} +
    +{% highlight html %} +{{tabs_toggle_fullwidth_large_example}} {% endhighlight %} diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index 645c88e63..e70574535 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -3,8 +3,8 @@ +unselectable align-items: stretch display: flex + font-size: $size-normal justify-content: space-between - line-height: 24px overflow: hidden overflow-x: auto white-space: nowrap @@ -15,7 +15,7 @@ display: flex justify-content: center margin-bottom: -1px - padding: 6px 12px + padding: 0.5em 1em vertical-align: top &:hover border-bottom-color: $text-strong @@ -34,20 +34,20 @@ flex-shrink: 0 justify-content: flex-start &.is-left - padding-right: 10px + padding-right: 0.75em &.is-center flex: none justify-content: center - padding-left: 10px - padding-right: 10px + padding-left: 0.75em + padding-right: 0.75em &.is-right justify-content: flex-end - padding-left: 10px + padding-left: 0.75em .icon &:first-child - margin-right: 8px + margin-right: 0.5em &:last-child - margin-left: 8px + margin-left: 0.5em // Alignment &.is-centered ul @@ -60,8 +60,6 @@ a border: 1px solid transparent border-radius: $radius $radius 0 0 - padding-bottom: 5px - padding-top: 5px &:hover background-color: $background border-bottom-color: $border @@ -79,8 +77,6 @@ a border: 1px solid $border margin-bottom: 0 - padding-bottom: 5px - padding-top: 5px position: relative &:hover background-color: $background @@ -104,28 +100,7 @@ // Sizes &.is-small font-size: $size-small - a - padding: 2px 8px - &.is-boxed, - &.is-toggle - a - padding-bottom: 1px - padding-top: 1px &.is-medium font-size: $size-medium - a - padding: 10px 16px - &.is-boxed, - &.is-toggle - a - padding-bottom: 9px - padding-top: 9px &.is-large font-size: $size-large - a - padding: 14px 20px - &.is-boxed, - &.is-toggle - a - padding-bottom: 13px - padding-top: 13px