fix(Subsection): fix subsection for safari 10

nordnet · Nov 8, 2018 · 2be18e3 · 2be18e3
1 parent 31f9711
commit 2be18e3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/components/subsection/subsection-styles.js b/src/components/subsection/subsection-styles.js
@@ -18,8 +18,6 @@ export default ({ palette, typography, mixins, transitions }) => ({
   title: {
     ...typography.secondary,
     fontSize: 20,
-    display: 'flex',
-    justifyContent: 'space-between',
     alignItems: 'center',
     lineHeight: 1.4,
     padding: [8, 0],
@@ -35,6 +33,10 @@ export default ({ palette, typography, mixins, transitions }) => ({
       cursor: 'auto',
     },
   },
+  titleContent: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
   loading: {
     cursor: 'auto',
   },

diff --git a/src/components/subsection/subsection.jsx b/src/components/subsection/subsection.jsx
@@ -49,19 +49,21 @@ class Subsection extends React.Component {
           )}
           <div className={classes.mainSection}>
             <button className={cn(classes.title, { [classes.loading]: loading })} onClick={this.handleToggle}>
-              <div className={classes.titleLeft}>
-                {CustomIcon && (
-                  <div className={cn(classes.icon, classes.mobileOnly)}>
-                    <CustomIcon />
-                  </div>
-                )}
-                <Title />
-              </div>
-              <div className={classes.titleRight}>
-                {loading && <Spinner />}
-                {!loading && (
-                  <div className={cn(classes.chevron, classes.mobileOnly)}>{toggled ? <Icon.ChevronUp /> : <Icon.ChevronDown />}</div>
-                )}
+              <div className={classes.titleContent}>
+                <div className={classes.titleLeft}>
+                  {CustomIcon && (
+                    <div className={cn(classes.icon, classes.mobileOnly)}>
+                      <CustomIcon />
+                    </div>
+                  )}
+                  <Title />
+                </div>
+                <div className={classes.titleRight}>
+                  {loading && <Spinner />}
+                  {!loading && (
+                    <div className={cn(classes.chevron, classes.mobileOnly)}>{toggled ? <Icon.ChevronUp /> : <Icon.ChevronDown />}</div>
+                  )}
+                </div>
               </div>
             </button>
             <div