Scrollbar Fix on Mac. Fixes issue #100 (#1354)

* Fix Scrollbar appearance on webkit mac * fix linting issues
vercel · Jan 8, 2017 · ed990d4 · ed990d4
1 parent ea8a32d
commit ed990d4
Showing 1 changed file with 24 additions and 13 deletions.
diff --git a/lib/components/term.js b/lib/components/term.js
@@ -219,19 +219,30 @@ export default class Term extends Component {
         font-size: ${this.props.fontSize}px;
       }
     `;
-    const osSpecificCss = process.platform === 'win32' ?
-      `::-webkit-scrollbar {
-            width: 5px;
-          }
-          ::-webkit-scrollbar-thumb {
-            -webkit-border-radius: 10px;
-            border-radius: 10px;
-            background: ${this.props.borderColor};
-          }
-          ::-webkit-scrollbar-thumb:window-inactive {
-            background: ${this.props.borderColor};
-          }` : ''
-    ;
+    let osSpecificCss = '';
+    if (process.platform === 'win32') {
+      osSpecificCss = `::-webkit-scrollbar {
+        width: 5px;
+      }
+      ::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+        background: ${this.props.borderColor};
+      }
+      ::-webkit-scrollbar-thumb:window-inactive {
+        background: ${this.props.borderColor};
+      }`;
+    } else if (process.platform === 'darwin') {
+      osSpecificCss = `::-webkit-scrollbar {
+        width: 9px;
+        background: transparent;
+       }
+       ::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 10px;
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 0 1px ${this.props.borderColor};
+       }`;
+    }
     return URL.createObjectURL(new Blob([`
       .cursor-node[focus="false"] {
          border-width: 1px !important;