diff --git a/CHANGELOG.md b/CHANGELOG.md index c859c889..bc3a79a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Bulma Changelog +## 0.4.2 + +* Fix #728 selected row on striped table +* Fix #747 remove flex-shrink for is-expanded +* Fix #702 add icons support for select dropdown +* Fix #712 delete button as flexbox item +* Fix #759 static button + ## 0.4.1 * Fix #568 max-width container diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index d8daca6e..b59e1ed8 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1617,6 +1617,14 @@ a.box:active { position: absolute !important; } +.button.is-static { + background-color: whitesmoke; + border-color: #dbdbdb; + color: #7a7a7a; + box-shadow: none; + pointer-events: none; +} + button.button, input[type="submit"].button { line-height: 1; @@ -2308,7 +2316,6 @@ input[type="submit"].button { .field.has-addons .control.is-expanded { flex-grow: 1; - flex-shrink: 0; } .field.has-addons.has-addons-centered { @@ -2459,19 +2466,27 @@ input[type="submit"].button { padding-right: 2.25em; } -.control.has-icons-left .input:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon { +.control.has-icons-left .input:focus ~ .icon, +.control.has-icons-left .select select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, +.control.has-icons-right .select select:focus ~ .icon { color: #7a7a7a; } -.control.has-icons-left .input.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon { +.control.has-icons-left .input.is-small ~ .icon, +.control.has-icons-left .select select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, +.control.has-icons-right .select select.is-small ~ .icon { font-size: 0.75rem; } -.control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon { +.control.has-icons-left .input.is-medium ~ .icon, +.control.has-icons-left .select select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, +.control.has-icons-right .select select.is-medium ~ .icon { font-size: 1.25rem; } -.control.has-icons-left .input.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon { +.control.has-icons-left .input.is-large ~ .icon, +.control.has-icons-left .select select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, +.control.has-icons-right .select select.is-large ~ .icon { font-size: 1.5rem; } @@ -2485,7 +2500,8 @@ input[type="submit"].button { z-index: 4; } -.control.has-icons-left .input { +.control.has-icons-left .input, +.control.has-icons-left .select select { padding-left: 2.25em; } @@ -2493,7 +2509,8 @@ input[type="submit"].button { left: 0; } -.control.has-icons-right .input { +.control.has-icons-right .input, +.control.has-icons-right .select select { padding-right: 2.25em; } @@ -2904,11 +2921,11 @@ input[type="submit"].button { padding: 0.25em 0.5em; } -.table.is-striped tbody tr:nth-child(even) { +.table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: #fafafa; } -.table.is-striped tbody tr:nth-child(even):hover { +.table.is-striped tbody tr:not(.is-selected):nth-child(even):hover { background-color: whitesmoke; } @@ -3142,8 +3159,14 @@ input[type="submit"].button { border-radius: 290486px; cursor: pointer; display: inline-block; + flex-grow: 0; + flex-shrink: 0; font-size: 1rem; height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; outline: none; position: relative; vertical-align: top; @@ -3771,8 +3794,14 @@ input[type="submit"].button { border-radius: 290486px; cursor: pointer; display: inline-block; + flex-grow: 0; + flex-shrink: 0; font-size: 1rem; height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; outline: none; position: relative; vertical-align: top; diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 48ca15fd..7ba0f4e5 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -232,6 +232,35 @@ doc-subtab: button
{% highlight html %} {{button_loading_example}} +{% endhighlight %} +
+ + +

+ New! + 0.4.2 +

+ +

+ Static +

+ +{% capture button_static_example %} +Static +{% endcapture %} +
+
+ +
+

+ You can create a non-interactive button by using the is-static modifier. This is useful to align a text label with an input, for example when using form addons. +

+
+{{button_static_example}} +
+
+{% highlight html %} +{{button_static_example}} {% endhighlight %}
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index 442633fc..ce2a4a50 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -476,11 +476,44 @@ doc-subtab: form +{% capture select_icons_example %} +
+

+ + + + + + +

+
+{% endcapture %} +
+
+

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.

@@ -663,7 +696,7 @@ doc-subtab: form
-

Form addons

+

Form addons

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

@@ -687,6 +720,37 @@ doc-subtab: form {% endhighlight %}

You can attach inputs, buttons, and dropdowns only.

+
+ +

+ New! + 0.4.2 +

+ +
+

It can be useful to append a static button.

+
+ +{% capture addons_static_example %} +
+

+ +

+

+ + @gmail.com + +

+
+{% endcapture %} +
+{{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):

{% capture addons_expanded_example %} diff --git a/docs/sass/specific.sass b/docs/sass/specific.sass index 2435c72d..3b87f782 100644 --- a/docs/sass/specific.sass +++ b/docs/sass/specific.sass @@ -11,3 +11,4 @@ height: 24px margin-right: 8px width: 24px + diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 68879224..23032f92 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -11,6 +11,10 @@ $button-focus-border: $link-focus-border !default $button-active: $link-active !default $button-active-border: $link-active-border !default +$button-static: $grey !default +$button-static-background: $white-ter !default +$button-static-border: $grey-lighter !default + $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default // The button sizes use mixins so they can be used at different breakpoints @@ -178,6 +182,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default +loader +center(1em) position: absolute !important + &.is-static + background-color: $button-static-background + border-color: $button-static-border + color: $button-static + box-shadow: none + pointer-events: none // Adjustment for vertical spacing button.button, diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 0fde5194..ccc60dae 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -217,7 +217,6 @@ $input-radius: $radius !default z-index: 4 &.is-expanded flex-grow: 1 - flex-shrink: 0 &.has-addons-centered justify-content: center &.has-addons-right @@ -322,7 +321,8 @@ $input-radius: $radius !default padding-right: 2.25em &.has-icons-left, &.has-icons-right - .input + .input, + .select select &:focus & ~ .icon color: $input-icon-active @@ -341,12 +341,14 @@ $input-radius: $radius !default width: 2.25em z-index: 4 &.has-icons-left - .input + .input, + .select select padding-left: 2.25em .icon.is-left left: 0 &.has-icons-right - .input + .input, + .select select padding-right: 2.25em .icon.is-right right: 0 diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 1cdb4c23..8bbaf468 100644 --- a/sass/elements/table.sass +++ b/sass/elements/table.sass @@ -75,7 +75,7 @@ $table-row-even-hover-background: $white-ter !default padding: 0.25em 0.5em &.is-striped tbody - tr + tr:not(.is-selected) &:nth-child(even) background-color: $table-row-even-background &:hover diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index cd820150..99e64467 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -38,8 +38,14 @@ border-radius: 290486px cursor: pointer display: inline-block + flex-grow: 0 + flex-shrink: 0 font-size: $size-normal height: 20px + max-height: 20px + max-width: 20px + min-height: 20px + min-width: 20px outline: none position: relative vertical-align: top