Better styles and titles

Author: ntdb

dist/react-datepicker.css

@@ -149,6 +149,10 @@
   background-color: transparent;
 }
 
+.datepicker__input-container {
+  position: relative;
+}
+
 .datepicker__input {
   position: relative;
   font-size: 13px;
@@ -172,27 +176,29 @@
   background-color: transparent;
   cursor: pointer;
   display: inline-block;
+  height: 0;
   outline: 0;
-  position: relative;
+  padding: 0;
   vertical-align: middle;
 }
 .close-icon:after {
   content: "\00d7";
   display: block;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
   position: absolute;
   background-color: #216ba5;
   z-index: 1;
-  right: 20px;
-  top: -4px;
+  right: 4px;
+  top: 50%;
   bottom: 0;
-  margin: auto;
+  margin: -5px auto 0;
   padding: 2px;
   border-radius: 50%;
   text-align: center;
   color: white;
   font-weight: normal;
   font-size: 10px;
   cursor: pointer;
+  line-height: 0.8;
 }

dist/react-datepicker.js

@@ -188,14 +188,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	  },
 
 	  render: function render() {
-	    var closeButton = null;
+	    var clearButton = null;
 	    if (this.props.isClearable && this.state.selected != null) {
-	      closeButton = React.createElement("button", { className: "close-icon", onClick: this.clearSelected });
+	      clearButton = React.createElement("button", { className: "close-icon", onClick: this.clearSelected });
 	    }
 
 	    return React.createElement(
 	      "div",
-	      null,
+	      { className: "datepicker__input-container", ref: "sup" },
 	      React.createElement(DateInput, {
 	        name: this.props.name,
 	        date: this.state.selected,
@@ -212,7 +212,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        disabled: this.props.disabled,
 	        className: this.props.className,
 	        title: this.props.title }),
-	      closeButton,
+	      clearButton,
 	      this.props.disabled ? null : this.calendar()
 	    );
 	  }

dist/react-datepicker.min.css

@@ -129,15 +129,15 @@ var DatePicker = React.createClass( {
   },
 
   render: function() {
-    var closeButton = null;
+    var clearButton = null;
     if ( this.props.isClearable && this.state.selected != null ) {
-      closeButton = (
+      clearButton = (
         <button className="close-icon" onClick={this.clearSelected}></button>
       );
     }
 
     return (
-      <div>
+      <div className="datepicker__input-container">
         <DateInput
           name={this.props.name}
           date={this.state.selected}
@@ -154,7 +154,7 @@ var DatePicker = React.createClass( {
           disabled={this.props.disabled}
           className={this.props.className}
           title={this.props.title} />
-        {closeButton}
+        {clearButton}
         {this.props.disabled ? null : this.calendar()}
       </div>
     );

dist/react-datepicker.min.js

@@ -125,6 +125,10 @@
   }
 }
 
+.datepicker__input-container {
+  position: relative;
+}
+
 .datepicker__input {
   position: relative;
   font-size: 13px;
@@ -150,28 +154,30 @@
   background-color: transparent;
   cursor: pointer;
   display: inline-block;
+  height: 0;
   outline: 0;
-  position: relative;
+  padding: 0;
   vertical-align: middle;
 
   &:after {
     content: "\00d7";
     display: block;
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
     position: absolute;
     background-color: $selected-color;
     z-index: 1;
-    right: 20px;
-    top: -4px;
+    right: 4px;
+    top: 50%;
     bottom: 0;
-    margin: auto;
+    margin: -5px auto 0;
     padding: 2px;
     border-radius: 50%;
     text-align: center;
     color: white;
     font-weight: normal;
     font-size: 10px;
     cursor: pointer;
+    line-height: 0.8;
   }
 }