Merge pull request #6305 from adobe/tom/win-scrollbars

Custom scrollbars for Windows based on win 8
adobe · Jan 9, 2014 · c80e4f1 · c80e4f1
2 parents ec67ab0 + fbf3405
commit c80e4f1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 7 deletions.
diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less
@@ -120,9 +120,7 @@
         background-color: @background-color-3;
         border-right: none;
     }
-    .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-        background-color: #ebebeb;
-    }
+
     .platform-mac & {
         .CodeMirror-scrollbar-filler {
             background-image: url(images/scrollbar-mac-corner.png);
@@ -131,6 +129,27 @@
             background-image: url(images/scrollbar-mac-bg.png);
         }
     }
+    .platform-win & {
+        .CodeMirror-scrollbar-filler,
+        .CodeMirror-gutter-filler {
+            background-color: @win-scrollbar-track;
+            height: 12px !important;
+        }
+        .CodeMirror-scrollbar-filler {
+            width: 12px !important;
+        }
+    }
+    .platform-linux & {
+        .CodeMirror-scrollbar-filler,
+        .CodeMirror-gutter-filler {
+            background-color: @background-color-3;
+            height: 12px !important;
+        }
+        .CodeMirror-scrollbar-filler {
+            width: 12px !important;
+        }
+    }
+
     .CodeMirror-linenumber {
         color: @accent-comment;
         min-width: 2.5em;

diff --git a/src/styles/brackets_scrollbars.less b/src/styles/brackets_scrollbars.less
@@ -32,6 +32,7 @@
     ::-webkit-scrollbar {
         width: 9px;
         height: 9px;
+        background-color: transparent;
     }
 
     ::-webkit-scrollbar-corner {
@@ -85,7 +86,7 @@
 
     ::-webkit-scrollbar-thumb {
         border-radius: 999px;
-        box-shadow: 0 0 0 4px @custom-scrollbar-thumb inset;
+        box-shadow: 0 0 0 4px @linux-scrollbar-thumb inset;
         border: 2px solid transparent;
     }
 
@@ -94,6 +95,36 @@
     }
 
     ::-webkit-scrollbar-thumb:window-inactive {
-        box-shadow: 0 0 0 5px @custom-scrollbar-thumb-inactive inset;
+        box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset;
+    }
+}
+
+.platform-win {
+    ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+        background-color: @win-scrollbar-track;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
+    }
+    ::-webkit-scrollbar-thumb:hover,
+    ::-webkit-scrollbar-thumb:focus {
+        box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
+    }
+    ::-webkit-scrollbar-thumb:active {
+        box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
+    }
+
+    ::-webkit-scrollbar-thumb:vertical {
+        min-height: 20px;
+    }
+    ::-webkit-scrollbar-thumb:horizontal {
+        min-width: 20px;
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: none;
     }
 }
diff --git a/src/styles/brackets_theme_default.less b/src/styles/brackets_theme_default.less
@@ -121,8 +121,13 @@
 @activeline-bgcolor: #ebefef;
 
 /* custom scrollbar colors */
-@custom-scrollbar-thumb: rgba(0, 0, 0, 0.24);
-@custom-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);
+@win-scrollbar-track: rgb(240, 240, 240);
+@win-scrollbar-thumb: rgb(206, 206, 206);
+@win-scrollbar-thumb-hover: rgb(166, 166, 166);
+@win-scrollbar-thumb-active: rgb(96, 96, 96);
+
+@linux-scrollbar-thumb: rgba(0, 0, 0, 0.24);
+@linux-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);
 
 /* live preview */
 @live-preview-sync-error-background: #ff5d99;