Changed inline-blocks to flex for better centering

dreyescat · Apr 24, 2019 · 6d82fef · 6d82fef
1 parent ff05da8
commit 6d82fef
Show file tree

Hide file tree

Showing 7 changed files with 4,041 additions and 1,948 deletions.
diff --git a/lib/react-rating.js b/lib/react-rating.js
diff --git a/lib/react-rating.js.map b/lib/react-rating.js.map
diff --git a/lib/react-rating.min.js b/lib/react-rating.min.js
diff --git a/lib/react-rating.min.js.map b/lib/react-rating.min.js.map
diff --git a/src/Rating.jsx b/src/Rating.jsx
@@ -165,7 +165,7 @@ class Rating extends React.PureComponent {
     return (
       <span
         id={id}
-        style={{...style, display: 'inline-block', direction }}
+        style={{...style, display: 'flex', direction }}
         className={className}
         tabIndex={tabIndex}
         aria-label={this.props['aria-label']}

diff --git a/src/RatingSymbol.jsx b/src/RatingSymbol.jsx
@@ -35,13 +35,14 @@ class RatingSymbol extends React.PureComponent {
       display: 'inline-block',
       position: 'absolute',
       overflow: 'hidden',
+      lineHeight: 0,
       top: 0,
       [direction === 'rtl' ? 'right' : 'left']: 0,
       width: `${percent}%`
     };
     const style = {
       cursor: !readonly ? 'pointer' : 'inherit',
-      display: 'inline-block',
+      display: 'flex',
       position: 'relative'
     };