purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 12:05:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(global) Added custom scrollbar styling for platforms other than macOS and iOS

Browse Source
This commit is contained in:
Sercan Yemen 2022-05-24 14:39:02 +03:00
parent 878a6bf191
commit ea9efc3dc2
2 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/@fuse/styles/tailwind.scss
View File

@ -76,6 +76,46 @@
} }
} }
/* Style scrollbars on platforms other than MacOS and iOS */
@media only screen and (min-width: 960px) {
body:not(.os-mac) {
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar:hover {
width: 8px;
height: 8px;
background-color: rgba(0, 0, 0, 0.06);
}
::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 20px;
box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.24);
}
::-webkit-scrollbar-thumb:active {
border-radius: 20px;
box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.37);
}
&.dark {
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.24);
}
::-webkit-scrollbar-thumb:active {
box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.37);
}
}
}
}
[disabled] * { [disabled] * {
@apply text-disabled #{'!important'}; @apply text-disabled #{'!important'};
} }

7
src/app/layout/layout.component.ts
View File

@ -4,6 +4,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs'; import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs';
import { FuseConfigService } from '@fuse/services/config'; import { FuseConfigService } from '@fuse/services/config';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FusePlatformService } from '@fuse/services/platform';
import { FUSE_VERSION } from '@fuse/version'; import { FUSE_VERSION } from '@fuse/version';
import { Layout } from 'app/layout/layout.types'; import { Layout } from 'app/layout/layout.types';
import { AppConfig } from 'app/core/config/app.config'; import { AppConfig } from 'app/core/config/app.config';
@ -31,7 +32,8 @@ export class LayoutComponent implements OnInit, OnDestroy
private _renderer2: Renderer2, private _renderer2: Renderer2,
private _router: Router, private _router: Router,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _fuseMediaWatcherService: FuseMediaWatcherService private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fusePlatformService: FusePlatformService
) )
{ {
} }
@ -102,6 +104,9 @@ export class LayoutComponent implements OnInit, OnDestroy
// Set the app version // Set the app version
this._renderer2.setAttribute(this._document.querySelector('[ng-version]'), 'fuse-version', FUSE_VERSION); this._renderer2.setAttribute(this._document.querySelector('[ng-version]'), 'fuse-version', FUSE_VERSION);
// Set the OS name
this._renderer2.addClass(this._document.body, this._fusePlatformService.osName);
} }
/** /**