fix clearButton css (Hacker0x01#1863)

* append className instead of overriding * fix css customInput * fix css clearbutton vertically centered
p-rogas · Aug 26, 2019 · 730ebe5 · 730ebe5
1 parent d550814
commit 730ebe5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/src/index.jsx b/src/index.jsx
@@ -252,10 +252,10 @@ export default class DatePicker extends React.Component {
     this.props.openToDate
       ? this.props.openToDate
       : this.props.selectsEnd && this.props.startDate
-      ? this.props.startDate
-      : this.props.selectsStart && this.props.endDate
-      ? this.props.endDate
-      : newDate();
+        ? this.props.startDate
+        : this.props.selectsStart && this.props.endDate
+          ? this.props.endDate
+          : newDate();
 
   calcInitialState = () => {
     const defaultPreSelection = this.getPreSelection();
@@ -265,8 +265,8 @@ export default class DatePicker extends React.Component {
       minDate && isBefore(defaultPreSelection, minDate)
         ? minDate
         : maxDate && isAfter(defaultPreSelection, maxDate)
-        ? maxDate
-        : defaultPreSelection;
+          ? maxDate
+          : defaultPreSelection;
     return {
       open: this.props.startOpen || false,
       preventFocus: false,
@@ -711,8 +711,8 @@ export default class DatePicker extends React.Component {
       typeof this.props.value === "string"
         ? this.props.value
         : typeof this.state.inputValue === "string"
-        ? this.state.inputValue
-        : safeDateFormat(this.props.selected, this.props);
+          ? this.state.inputValue
+          : safeDateFormat(this.props.selected, this.props);
 
     return React.cloneElement(customInput, {
       [customInputRef]: input => {

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -547,28 +547,27 @@
   background-color: transparent;
   border: 0;
   outline: 0;
-  padding: 0;
+  padding: 0px 6px 0px 0px;
   position: absolute;
-  top: 50%;
-  right: 7px;
-  height: 16px;
-  width: 16px;
-  margin: -8px auto 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: table-cell;
+  vertical-align: middle;
 
   &::after {
     cursor: pointer;
     background-color: $datepicker__selected-color;
     color: #fff;
     border-radius: 50%;
-    position: absolute;
-    top: 0;
-    right: 0;
     height: 16px;
     width: 16px;
     padding: 2px;
     font-size: 12px;
     line-height: 1;
     text-align: center;
+    display: table-cell;
+    vertical-align: middle;
     content: "\00d7";
   }
 }