Change :valid hack to class not-empty for inputs (also add email type) …

…mui#55
ButuzGOL · Dec 20, 2014 · 85e9faf · hai-cea · Dec 21, 2014 · 85e9faf
1 parent 3eb741f
commit 85e9faf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/src/js/input.jsx b/src/js/input.jsx
@@ -54,15 +54,18 @@ var Input = React.createClass({
       'mui-error': this.props.error !== undefined && this.props.error !== null
     }),
     placeholder = this.props.inlinePlaceholder ? this.props.placeholder : "",
+    notEmptyClass = this.state.value ? 'mui-input-not-empty' : '',
+    inputClassName = notEmptyClass,
+    textareaClassName = 'mui-input-textarea ' + notEmptyClass,
     inputElement = this.props.multiline ?
       this.props.valueLink ?
-        <textarea {...this.props} className="mui-input-textarea" placeholder={placeholder}
+        <textarea {...this.props} className={textareaClassName} placeholder={placeholder}
           rows={this.state.rows} /> :
-        <textarea {...this.props} value={this.state.value} className="mui-input-textarea"
+        <textarea {...this.props} value={this.state.value} className={textareaClassName}
           placeholder={placeholder} rows={this.state.rows} onChange={this._onTextAreaChange} /> :
         this.props.valueLink ?
-          <input {...this.props} ref="input" placeholder={placeholder} /> :
-          <input {...this.props} ref="input" value={this.state.value} placeholder={placeholder}
+          <input {...this.props} ref="input" className={inputClassName} placeholder={placeholder} /> :
+          <input {...this.props} className={inputClassName} ref="input" value={this.state.value} placeholder={placeholder}
             onChange={this._onInputChange} />
     placeholderSpan = this.props.inlinePlaceholder ? null : <span className="mui-input-placeholder"
       onClick={this._onPlaceholderClick}>{this.props.placeholder}</span>;

diff --git a/src/less/components/input.less b/src/less/components/input.less
@@ -14,7 +14,7 @@
     padding-bottom: 14px;
     width: @input-width;
 
-    &:focus, &:valid {
+    &:focus, &.mui-input-not-empty {
       outline: none;
       box-shadow: none;
       padding: 0;
@@ -53,7 +53,7 @@
       }
     }
 
-    &:not(:focus):valid {
+    &:not(:focus).mui-input-not-empty {
       &+.mui-input-placeholder {
         font-size: 13px;
         color: gray;
@@ -98,12 +98,12 @@
     box-sizing: border-box;
     padding-bottom: 14px;
 
-    &[type='text'], &[type='password'] {
+    &[type='text'], &[type='password'], &[type='email'] {
       display: block;
       width: @input-width;
     }
 
-    &:focus, &:valid {
+    &:focus, &.mui-input-not-empty {
       outline: none;
       box-shadow: none;
       &~.mui-input-placeholder {
@@ -129,7 +129,7 @@
       }
     }
 
-    &:not(:focus):valid {
+    &:not(:focus).mui-input-not-empty {
       &+.mui-input-placeholder {
         color: gray;
 
@@ -207,7 +207,7 @@
 
   &.mui-error {
     textarea {
-      &:focus, &:valid {
+      &:focus, &.mui-input-not-empty {
         &+.mui-input-placeholder {
           color: @input-error-color;
 
@@ -244,7 +244,7 @@
     }
 
     input {
-      &:focus, &:valid {
+      &:focus, &.mui-input-not-empty {
         &+.mui-input-placeholder {
           color: @input-error-color;
 
@@ -285,14 +285,14 @@
           top: -4px;
         }
 
-        &:valid {
+        &.mui-input-not-empty {
           &+.mui-input-placeholder {
             display: none;
           }
         }
       }
 
-      &:valid {
+      &.mui-input-not-empty {
         &+.mui-input-placeholder {
           display: none;
         }