Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Custom scrollbars for Windows based on win 8 #6305

Merged
bchintx merged 3 commits into from
Jan 9, 2014
Merged

Custom scrollbars for Windows based on win 8 #6305

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca186cd
Custom scrollbars for Windows based on win 8
TomMalbran Dec 22, 2013
7fdfee2
Added hover and active effects to the scrollbar and switched to box-s…
TomMalbran Jan 6, 2014
fbf3405
Added variables
TomMalbran Jan 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/styles/brackets_codemirror_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -131,6 +129,19 @@
background-image: url(images/scrollbar-mac-bg.png);
}
}
.platform-win & {
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: rgb(240, 240, 240);
height: 12px !important;
}
}
.platform-linux & {
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: @background-color-3;
height: 12px !important;
}
}

.CodeMirror-linenumber {
color: @accent-comment;
min-width: 2.5em;
Expand Down
30 changes: 30 additions & 0 deletions src/styles/brackets_scrollbars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,15 @@
::-webkit-scrollbar {
width: 9px;
height: 9px;
background-color: transparent;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}

::-webkit-scrollbar-thumb {
background-color: transparent;
Copy link
Member

@peterflynn peterflynn Jan 3, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this break anything on other platforms? It seems like this means the thumb will be invisible on Linux and on Macs where the mouse is plugged in, since background-color is only overridden in the .platform-win rules below.

Copy link
Contributor

@marcelgerber marcelgerber Jan 3, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't see any changes on Linux (Ubuntu):
Scrollbars in Ubuntu

Copy link
Contributor

@bchintx bchintx Jan 3, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I plugged in a mouse on my 10.8.5 laptop, and the thumb appears fine.

Copy link
Contributor Author

@TomMalbran TomMalbran Jan 5, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That line is only applied on windows. So it shouldn't affect any other platform.

Copy link
Contributor Author

@TomMalbran TomMalbran Jan 6, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, we are using box-shadow to add the background color of the scrollbar. This is done as a "hack" to make it possible to have a margin around the scrollbar. Since I used background colors for the Windows scrollbars I had to overwrite it here with transparent so that that background isn't shown on this bars. But thinking it better, maybe I could just use box-shadow on win too.

box-shadow: none;
border: none;
}
Expand Down Expand Up @@ -97,3 +99,31 @@
box-shadow: 0 0 0 5px @custom-scrollbar-thumb-inactive inset;
}
}

.platform-win {
::-webkit-scrollbar {
width: 12px;
height: 12px;
background-color: rgb(240, 240, 240);
}

::-webkit-scrollbar-thumb {
box-shadow: none;
border: none;
background-color: rgb(206, 206, 206);
}

::-webkit-scrollbar-track:vertical {
margin: 0 0 12px 0;
min-height: 20px;
}

::-webkit-scrollbar-track:horizontal {
margin: 0 12px 0 0;
min-width: 20px;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}
}