Merge pull request #768 from jgthms/release/0.4.2

Release/0.4.2

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

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;

docs/documentation/elements/button.html

@@ -232,6 +232,35 @@ doc-subtab: button
   <div class="column">
 {% highlight html %}
 {{button_loading_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <p id="static-button" style="margin-bottom: 0.5rem;">
+      <span class="tag is-success">New!</span>
+      <span class="tag is-info">0.4.2</span>
+    </p>
+
+    <h4 class="subtitle">
+      Static
+    </h4>
+
+{% capture button_static_example %}
+<span class="button is-static">Static</span>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+
+    <div class="content">
+      <p>
+        You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/elements/form#form-addons">form addons</a>.
+      </p>
+    </div>
+{{button_static_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_static_example}}
 {% endhighlight %}
   </div>
 </div>

docs/documentation/elements/form.html

@@ -476,11 +476,44 @@ doc-subtab: form
       </div>
     </div>
 
+{% capture select_icons_example %}
+<div class="field">
+  <p class="control has-icons-left">
+    <span class="select">
+      <select>
+        <option selected>Country</option>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+    <span class="icon is-small is-left">
+      <i class="fa fa-globe"></i>
+    </span>
+  </p>
+</div>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-half">
+
     <div class="content">
       <p>
         <span class="tag is-success">New!</span>
         <span class="tag is-info">0.4.2</span>
       </p>
+      <p>
+        You can now append icons to <strong>select dropdowns</strong> as well.
+      </p>
+    </div>
+{{select_icons_example}}
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+{{select_icons_example}}
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="content">
       <p>
         If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
       </p>
@@ -663,7 +696,7 @@ doc-subtab: form
 
     <hr>
 
-    <h3 class="title">Form addons</h3>
+    <h3 id="form-addons" class="title">Form addons</h3>
     <div class="content">
       <p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
     </div>
@@ -687,6 +720,37 @@ doc-subtab: form
 {% endhighlight %}
     <div class="content">
       <p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
+    </div>
+
+    <p style="margin-bottom: 0.5rem;">
+      <span class="tag is-success">New!</span>
+      <span class="tag is-info">0.4.2</span>
+    </p>
+
+    <div class="content">
+      <p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
+    </div>
+
+{% capture addons_static_example %}
+<div class="field has-addons">
+  <p class="control">
+    <input class="input" type="text" placeholder="Your email">
+  </p>
+  <p class="control">
+    <a class="button is-static">
+      @gmail.com
+    </a>
+  </p>
+</div>
+{% endcapture %}
+    <div class="example">
+{{addons_static_example}}
+    </div>
+{% highlight html %}
+{{addons_static_example}}
+{% endhighlight %}
+
+    <div class="content">
       <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
     </div>
 {% capture addons_expanded_example %}

docs/sass/specific.sass

@@ -11,3 +11,4 @@
   height: 24px
   margin-right: 8px
   width: 24px
+

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,

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

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

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