fix(docs-infra): remove scrollbar styles for accessibility (#38852)
This commit removes the scrollbar styles so that the default styles in the browser render. This widens the webkit scroll bar. This makes it easier to grab the scrollbar using assistive technology and devices, and provides a wider target for those who have dexterity issues. By removing these styles, We will no longer have to maintain custom scrollbars specific to WebKit and they will be accessible by default. PR Close #38852
This commit is contained in:
parent
f3f6a42342
commit
dfbfabc052
|
@ -25,7 +25,6 @@
|
||||||
@import 'progress-bar';
|
@import 'progress-bar';
|
||||||
@import 'presskit';
|
@import 'presskit';
|
||||||
@import 'resources';
|
@import 'resources';
|
||||||
@import 'scrollbar';
|
|
||||||
@import 'search-results';
|
@import 'search-results';
|
||||||
@import 'select-menu';
|
@import 'select-menu';
|
||||||
@import 'table';
|
@import 'table';
|
||||||
|
|
|
@ -1,27 +0,0 @@
|
||||||
body::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {
|
|
||||||
height: 6px;
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-track, .mat-sidenav-content::-webkit-scrollbar-track {
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
body::-webkit-scrollbar-thumb, mat-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {
|
|
||||||
background-color: $mediumgray;
|
|
||||||
outline: 1px solid $darkgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results::-webkit-scrollbar, .toc-container::-webkit-scrollbar {
|
|
||||||
height: 4px;
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results::-webkit-scrollbar-track, .toc-container::-webkit-scrollbar-track {
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results::-webkit-scrollbar-thumb, .toc-container::-webkit-scrollbar-thumb {
|
|
||||||
background-color: $mediumgray;
|
|
||||||
outline: 1px solid slategrey;
|
|
||||||
}
|
|
Loading…
Reference in New Issue