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 all commits
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
25 changes: 22 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,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;
Expand Down
35 changes: 33 additions & 2 deletions src/styles/brackets_scrollbars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
::-webkit-scrollbar {
width: 9px;
height: 9px;
background-color: transparent;
}

::-webkit-scrollbar-corner {
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}
}
9 changes: 7 additions & 2 deletions src/styles/brackets_theme_default.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down