michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Fix scrollbar padding for safari breaks other component styling

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-24 14:56:36 +05:30
parent 0a0b45fb8e
commit 80110d1a48
2 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/app/atoms/scroll/ScrollView.scss
View file

@ -1,9 +1,17 @@
@use '../../partials/dir';
@use '_scrollbar'; @use '_scrollbar';
@mixin paddingForSafari($padding) {
@media not all and (min-resolution:.001dpcm) {
@include dir.side(padding, 0, $padding);
}
}
.scrollbar { .scrollbar {
width: 100%; width: 100%;
height: 100%; height: 100%;
@include scrollbar.scroll; @include scrollbar.scroll;
@include paddingForSafari(var(--sp-extra-tight));
&__h { &__h {
@include scrollbar.scroll__h; @include scrollbar.scroll__h;
@ -18,5 +26,6 @@
} }
&--invisible { &--invisible {
@include scrollbar.scroll--invisible; @include scrollbar.scroll--invisible;
@include paddingForSafari(0);
} }
} }

10
src/app/atoms/scroll/_scrollbar.scss
View file

@ -1,5 +1,3 @@
@use '../../partials/dir';
.firefox-scrollbar { .firefox-scrollbar {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--bg-surface-hover) transparent; scrollbar-color: var(--bg-surface-hover) transparent;
@ -32,12 +30,6 @@
} }
} }
@mixin paddingForSafari($padding) {
@media not all and (min-resolution:.001dpcm) {
@include dir.side(padding, 0, $padding);
}
}
@mixin scroll { @mixin scroll {
overflow: hidden; overflow: hidden;
// Below code stop scroll when x-scrollable content come in timeline // Below code stop scroll when x-scrollable content come in timeline
@ -46,7 +38,6 @@
@extend .webkit-scrollbar; @extend .webkit-scrollbar;
@extend .webkit-scrollbar-track; @extend .webkit-scrollbar-track;
@extend .webkit-scrollbar-thumb; @extend .webkit-scrollbar-thumb;
@include paddingForSafari(var(--sp-extra-tight));
} }
@mixin scroll__h { @mixin scroll__h {
@ -67,7 +58,6 @@
@mixin scroll--invisible { @mixin scroll--invisible {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
@include paddingForSafari(0);
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;