+ 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.
+
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
+ 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.
+
New! 0.4.2
++ You can now append icons to select dropdowns as well. +
+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: formIf you want to attach controls together, use the has-addons modifier on the control container:
You can attach inputs, buttons, and dropdowns only.
++ New! + 0.4.2 +
+ +It can be useful to append a static button.
++ +
++ + @gmail.com + +
+Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):