Merge pull request #1217 from buildo/1216-input_borderwidth_should_be

#1216: Input border width and placeholder font weight should be overridable (closes #1216)
buildo · Apr 3, 2018 · e139cfb · e139cfb
2 parents d1cb17e + 71cffd1
commit e139cfb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -69,8 +69,8 @@ export class Input extends React.PureComponent<Input.Props> {
     const isSuccess = status === 'success';
     const isFailure = status === 'failure';
     const children = this.props.children || (
-      isSuccess ? <View vAlignContent='center'><Icon icon='check-circle' /></View> :
-      isFailure ? <View vAlignContent='center'><Icon icon='times-circle' /></View> :
+      isSuccess ? <View vAlignContent='center'><Icon icon='success' /></View> :
+      isFailure ? <View vAlignContent='center'><Icon icon='error' /></View> :
       undefined
     );
 

diff --git a/src/Input/input.scss b/src/Input/input.scss
@@ -4,8 +4,10 @@ $padding-h: 12px !default;
 $font-size: 14px !default;
 $font-weight: $brc-regular !default;
 $placeholder-color: $brc-coolGrey !default;
+$placeholder-font-weight: $font-weight !default;
 $color: $brc-darkGrey !default;
 $border-color: $brc-silver !default;
+$border-width: 1px !default;
 $color-focus: $brc-darkGrey !default;
 $border-color-focus: $brc-waterBlue !default;
 $opacity-disabled: .6 !default;
@@ -16,7 +18,7 @@ $border-color-failure: $brc-alizarinCrimson !default;
 
 .input {
   input {
-    border: 1px solid $border-color;
+    border: $border-width solid $border-color;
     border-radius: 4px;
     height: $height;
     padding: 0 $padding-h;
@@ -31,6 +33,7 @@ $border-color-failure: $brc-alizarinCrimson !default;
     &:-ms-input-placeholder,
     &:-moz-placeholder {
       color: $placeholder-color;
+      font-weight: $placeholder-font-weight;
     }
 
     &:disabled {
@@ -39,7 +42,7 @@ $border-color-failure: $brc-alizarinCrimson !default;
     }
 
     &:focus {
-      border: 1px solid $border-color-focus;
+      border: $border-width solid $border-color-focus;
       outline: none;
       box-shadow: 0;
       color: $color-focus;
@@ -49,6 +52,7 @@ $border-color-failure: $brc-alizarinCrimson !default;
   &:not(.has-value) {
     input {
       color: $placeholder-color;
+      font-weight: $placeholder-font-weight;
     }
   }
 
@@ -63,7 +67,7 @@ $border-color-failure: $brc-alizarinCrimson !default;
 
   &.is-success {
     input {
-      border: 1px solid $border-color-success;
+      border: $border-width solid $border-color-success;
       color: $color-success;
     }
 
@@ -74,7 +78,7 @@ $border-color-failure: $brc-alizarinCrimson !default;
 
   &.is-failure {
     input {
-      border: 1px solid $border-color-failure;
+      border: $border-width solid $border-color-failure;
       color: $color-failure;
     }