Fix #584, Fix #571

CHANGELOG.md

@@ -20,6 +20,8 @@
 * Fix #458 select expanded
 * Fix #403 separate animations
 * Fix #637 customize Bulma
+* Fix #584 loading select
+* Fix #571 control height
 
 ## 0.4.0
 

docs/css/bulma-docs.css

@@ -691,7 +691,7 @@ a.box:active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border: none;
+  border: 1px solid transparent;
   border-radius: 3px;
   box-shadow: none;
   display: -webkit-inline-box;
@@ -703,10 +703,10 @@ a.box:active {
       -ms-flex-pack: start;
           justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: calc(0.375em - 1px);
-  padding-left: 0.625em;
+  padding-left: calc(0.625em - 1px);
-  padding-right: 0.625em;
+  padding-right: calc(0.625em - 1px);
-  padding-top: 0.375em;
+  padding-top: calc(0.375em - 1px);
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -715,7 +715,7 @@ a.box:active {
   -ms-user-select: none;
   user-select: none;
   background-color: white;
-  border: 1px solid #dbdbdb;
+  border-color: #dbdbdb;
   color: #363636;
   cursor: pointer;
   -webkit-box-pack: center;
@@ -1852,7 +1852,7 @@ input[type="submit"].button {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border: none;
+  border: 1px solid transparent;
   border-radius: 3px;
   box-shadow: none;
   display: -webkit-inline-box;
@@ -1864,14 +1864,14 @@ input[type="submit"].button {
       -ms-flex-pack: start;
           justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: calc(0.375em - 1px);
-  padding-left: 0.625em;
+  padding-left: calc(0.625em - 1px);
-  padding-right: 0.625em;
+  padding-right: calc(0.625em - 1px);
-  padding-top: 0.375em;
+  padding-top: calc(0.375em - 1px);
   position: relative;
   vertical-align: top;
   background-color: white;
-  border: 1px solid #dbdbdb;
+  border-color: #dbdbdb;
   color: #363636;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
   max-width: 100%;
@@ -2092,7 +2092,7 @@ input[type="submit"].button {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border: none;
+  border: 1px solid transparent;
   border-radius: 3px;
   box-shadow: none;
   display: -webkit-inline-box;
@@ -2104,14 +2104,14 @@ input[type="submit"].button {
       -ms-flex-pack: start;
           justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: calc(0.375em - 1px);
-  padding-left: 0.625em;
+  padding-left: calc(0.625em - 1px);
-  padding-right: 0.625em;
+  padding-right: calc(0.625em - 1px);
-  padding-top: 0.375em;
+  padding-top: calc(0.375em - 1px);
   position: relative;
   vertical-align: top;
   background-color: white;
-  border: 1px solid #dbdbdb;
+  border-color: #dbdbdb;
   color: #363636;
   cursor: pointer;
   display: block;
@@ -2167,6 +2167,10 @@ input[type="submit"].button {
   display: none;
 }
 
+.select select[disabled]:hover {
+  border-color: whitesmoke;
+}
+
 .select:hover:after {
   border-color: #363636;
 }
@@ -2220,6 +2224,10 @@ input[type="submit"].button {
   font-size: 1.5rem;
 }
 
+.select.is-disabled:after {
+  border-color: #7a7a7a;
+}
+
 .select.is-fullwidth {
   width: 100%;
 }
@@ -2228,6 +2236,26 @@ input[type="submit"].button {
   width: 100%;
 }
 
+.select.is-loading:after {
+  -webkit-animation: spinAround 500ms infinite linear;
+          animation: spinAround 500ms infinite linear;
+  border: 2px solid #dbdbdb;
+  border-radius: 290486px;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  display: block;
+  height: 1em;
+  position: relative;
+  width: 1em;
+  margin-top: 0;
+  position: absolute;
+  right: 0.625em;
+  top: 0.625em;
+  -webkit-transform: none;
+          transform: none;
+}
+
 .label {
   color: #363636;
   display: block;
@@ -2281,10 +2309,6 @@ input[type="submit"].button {
   color: #ff3860;
 }
 
-.select select {
-  line-height: 1;
-}
-
 .field:not(:last-child) {
   margin-bottom: 0.75rem;
 }
@@ -4371,7 +4395,7 @@ a.nav-item.is-tab.is-active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border: none;
+  border: 1px solid transparent;
   border-radius: 3px;
   box-shadow: none;
   display: -webkit-inline-box;
@@ -4383,10 +4407,10 @@ a.nav-item.is-tab.is-active {
       -ms-flex-pack: start;
           justify-content: flex-start;
   line-height: 1.5;
-  padding-bottom: 0.375em;
+  padding-bottom: calc(0.375em - 1px);
-  padding-left: 0.625em;
+  padding-left: calc(0.625em - 1px);
-  padding-right: 0.625em;
+  padding-right: calc(0.625em - 1px);
-  padding-top: 0.375em;
+  padding-top: calc(0.375em - 1px);
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -4429,7 +4453,7 @@ a.nav-item.is-tab.is-active {
 .pagination-previous,
 .pagination-next,
 .pagination-link {
-  border: 1px solid #dbdbdb;
+  border-color: #dbdbdb;
   min-width: 2.25em;
 }
 

docs/documentation/elements/form.html

@@ -322,6 +322,15 @@ doc-subtab: form
     <input class="input" type="text" placeholder="Loading input">
   </p>
 </div>
+<div class="field">
+  <div class="control">
+    <div class="select is-loading">
+      <select>
+        <option>Loading dropdown</option>
+      </select>
+    </div>
+  </div>
+</div>
 <div class="field">
   <p class="control is-loading">
     <textarea class="textarea" placeholder="Loading textarea"></textarea>
@@ -346,6 +355,15 @@ doc-subtab: form
     <input class="input" type="text" placeholder="Disabled input" disabled>
   </p>
 </div>
+<div class="field">
+  <div class="control">
+    <div class="select is-disabled">
+      <select disabled>
+        <option>Disabled dropdown</option>
+      </select>
+    </div>
+  </div>
+</div>
 <div class="field">
   <p class="control">
     <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>

sass/components/pagination.sass

@@ -55,7 +55,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-previous,
 .pagination-next,
 .pagination-link
-  border: 1px solid $pagination-border
+  border-color: $pagination-border
   min-width: 2.25em
   &:hover
     border-color: $pagination-hover-border

sass/elements/button.sass

@@ -26,7 +26,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   +control
   +unselectable
   background-color: $button-background
-  border: 1px solid $button-border
+  border-color: $button-border
   color: $button
   cursor: pointer
   justify-content: center

sass/elements/form.sass

@@ -22,7 +22,7 @@ $input-radius:              $radius !default
 =input
   +control
   background-color: $input-background
-  border: 1px solid $input-border
+  border-color: $input-border
   color: $input
   &:hover,
   &.is-hovered
@@ -122,6 +122,8 @@ $input-radius:              $radius !default
       border-color: $input-hover-border
     &::-ms-expand
       display: none
+    &[disabled]:hover
+      border-color: $input-disabled-border
   // States
   &:hover
     &:after
@@ -139,10 +141,21 @@ $input-radius:              $radius !default
   &.is-large
     +control-large
   // Modifiers
+  &.is-disabled
+    &:after
+      border-color: $input-disabled
   &.is-fullwidth
     width: 100%
     select
       width: 100%
+  &.is-loading
+    &:after
+      +loader
+      margin-top: 0
+      position: absolute
+      right: 0.625em
+      top: 0.625em
+      transform: none
 
 .label
   color: $input
@@ -161,9 +174,6 @@ $input-radius:              $radius !default
     &.is-#{$name}
       color: $color
 
-.select select
-  line-height: 1
-
 // Containers
 
 .field

sass/utilities/controls.sass

@@ -1,11 +1,14 @@
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
 
+$control-padding-vertical: calc(0.375em - 1px) !default
+$control-padding-horizontal: calc(0.625em - 1px) !default
+
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  border: none
+  border: 1px solid transparent
   border-radius: $control-radius
   box-shadow: none
   display: inline-flex
@@ -13,10 +16,10 @@ $control-radius-small: $radius-small !default
   height: 2.25em
   justify-content: flex-start
   line-height: 1.5
-  padding-bottom: 0.375em
+  padding-bottom: $control-padding-vertical
-  padding-left: 0.625em
+  padding-left: $control-padding-horizontal
-  padding-right: 0.625em
+  padding-right: $control-padding-horizontal
-  padding-top: 0.375em
+  padding-top: $control-padding-vertical
   position: relative
   vertical-align: top
   // States