Feature #586, Fix #537

CHANGELOG.md

@@ -7,6 +7,8 @@
 # Fix #272 nav-right without nav-menu
 # Fix #616 hero and notification buttons
 # Fix #607 has-addons z-index
+# Feature #586 select color modifiers
+# Fix #537 -ms-expand
 
 ## 0.4.0
 

docs/css/bulma-docs.css

@@ -2151,7 +2151,7 @@ input[type="submit"].button {
   border-color: #b5b5b5;
 }
 
-.select select::ms-expand {
+.select select::-ms-expand {
   display: none;
 }
 
@@ -2159,6 +2159,42 @@ input[type="submit"].button {
   border-color: #363636;
 }
 
+.select.is-white select {
+  border-color: white;
+}
+
+.select.is-black select {
+  border-color: #0a0a0a;
+}
+
+.select.is-light select {
+  border-color: whitesmoke;
+}
+
+.select.is-dark select {
+  border-color: #363636;
+}
+
+.select.is-primary select {
+  border-color: #00d1b2;
+}
+
+.select.is-info select {
+  border-color: #3273dc;
+}
+
+.select.is-success select {
+  border-color: #23d160;
+}
+
+.select.is-warning select {
+  border-color: #ffdd57;
+}
+
+.select.is-danger select {
+  border-color: #ff3860;
+}
+
 .select.is-small {
   border-radius: 2px;
   font-size: 0.75rem;

docs/documentation/elements/button.html

@@ -505,28 +505,6 @@ doc-subtab: button
       <p>You can group together addons as well:</p>
     </div>
 {% capture button_group_addons_example %}
-<div class="field has-addons">
-  <p class="control">
-    <a class="button is-active">
-      <span>Foo</span>
-    </a>
-  </p>
-  <p class="control">
-    <a class="button">
-      <span>Bar</span>
-    </a>
-  </p>
-  <p class="control">
-    <a class="button is-active">
-      <span>Lorem</span>
-    </a>
-  </p>
-  <p class="control">
-    <a class="button">
-      <span>Ipsum</span>
-    </a>
-  </p>
-</div>
 <div class="field has-addons">
   <p class="control">
     <a class="button">

sass/elements/form.sass

@@ -120,12 +120,17 @@ $input-radius:              $radius !default
     padding-right: 2.5em
     &:hover
       border-color: $input-hover-border
-    &::ms-expand
+    &::-ms-expand
       display: none
   // States
   &:hover
     &:after
       border-color: $input-hover
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name} select
+      border-color: $color
   // Sizes
   &.is-small
     +control-small