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

Add padding in scroll view for safari

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-15 20:11:37 +05:30
parent 871a25364d
commit 62c9e271d8
1 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,5 @@
@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;
@ -30,6 +32,12 @@
} }
} }
@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
@ -38,6 +46,7 @@
@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 {
@ -58,6 +67,8 @@
@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;
} }