Merged in feature/css_disable_dropdown (pull request #240)

feature/css_disable_dropdown

scm-ui-components/packages/ui-components/src/forms/DropDown.js

@@ -16,7 +16,7 @@ class DropDown extends React.Component<Props> {
   render() {
     const { options, optionValues, preselectedOption, className, disabled } = this.props;
     return (
-      <div className={classNames(className, "select")}>
+      <div className={classNames(className, "select", disabled ? "disabled": "")}>
         <select
           value={preselectedOption ? preselectedOption : ""}
           onChange={this.change}

scm-ui/styles/scm.scss

@@ -102,10 +102,12 @@ $fa-font-path: "webfonts";
   &.is-primary {
     background-color: #00d1df;
   }
-  &.is-primary:hover, &.is-primary.is-hovered {
+  &.is-primary:hover,
+  &.is-primary.is-hovered {
     background-color: #00b9c6;
   }
-  &.is-primary:active, &.is-primary.is-active {
+  &.is-primary:active,
+  &.is-primary.is-active {
     background-color: #00a1ac;
   }
   &.is-primary[disabled] {
@@ -144,7 +146,7 @@ $fa-font-path: "webfonts";
         margin-right: 0;
       }
 
-      .overlay-half-column{
+      .overlay-half-column {
         position: absolute;
         height: calc(120px - 0.5rem);
         width: calc(100% - 1.5rem);
@@ -256,6 +258,15 @@ form .field:not(.is-grouped) {
   box-shadow: none;
 }
 
+.select,
+.select:hover {
+  &:not(.is-multiple):not(.is-loading) {
+    &.disabled::after {
+      border-color: #7a7a7a;
+    }
+  }
+}
+
 // label with help-icon compensation
 .label-icon-spacing {
   margin-top: 30px;