Move z-index from style props into CSS rule-set (#952) (#955)

Hacker0x01 · Jul 15, 2017 · c179eec · c179eec
1 parent b5f9bfd
commit c179eec
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/src/popper_component.jsx b/src/popper_component.jsx
@@ -60,10 +60,9 @@ export default class PopperComponent extends React.Component {
         {
           !hidePopper &&
           <Popper
-              style={{zIndex: 1}}
+              className="react-datepicker-popper"
               modifiers={popperModifiers}
-              placement={popperPlacement}
-              className="popper">
+              placement={popperPlacement}>
             {popperComponent}
           </Popper>
         }

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -21,33 +21,41 @@
   left: 50px;
 }
 
-.popper[data-placement^="bottom"] {
-  margin-top: $datepicker__triangle-size + 2px;
-  .react-datepicker__triangle {
-    @extend %triangle-arrow-up;
+.react-datepicker-popper {
+  z-index: 1;
+
+  &[data-placement^="bottom"] {
+    margin-top: $datepicker__triangle-size + 2px;
+
+    .react-datepicker__triangle {
+      @extend %triangle-arrow-up;
+    }
   }
-}
 
-.popper[data-placement^="top"] {
-  margin-bottom: $datepicker__triangle-size - 2px;
-  .react-datepicker__triangle {
-    @extend %triangle-arrow-down;
+  &[data-placement^="top"] {
+    margin-bottom: $datepicker__triangle-size - 2px;
+
+    .react-datepicker__triangle {
+      @extend %triangle-arrow-down;
+    }
   }
-}
 
-.popper[data-placement^="right"] {
-  margin-left: $datepicker__triangle-size;
-  .react-datepicker__triangle {
-    left: auto;
-    right: 42px;
+  &[data-placement^="right"] {
+    margin-left: $datepicker__triangle-size;
+
+    .react-datepicker__triangle {
+      left: auto;
+      right: 42px;
+    }
   }
-}
 
-.popper[data-placement^="left"] {
-  margin-right: $datepicker__triangle-size;
-  .react-datepicker__triangle {
-    left: 42px;
-    right: auto;
+  &[data-placement^="left"] {
+    margin-right: $datepicker__triangle-size;
+
+    .react-datepicker__triangle {
+      left: 42px;
+      right: auto;
+    }
   }
 }