From 2e29418c111841f1a73fd784ed10c5cc1311bd7e Mon Sep 17 00:00:00 2001 From: Alexander Chabin Date: Tue, 10 Mar 2026 10:45:31 +0500 Subject: [PATCH] Update scrollbar in modals --- features/About/AboutProjectModal.module.css | 2 - package.json | 1 - pnpm-lock.yaml | 54 --------------------- postcss.config.json | 6 --- styles/globals.css | 1 + styles/mixins/scroll.css | 39 --------------- styles/scrollbar.css | 6 +++ 7 files changed, 7 insertions(+), 102 deletions(-) delete mode 100644 styles/mixins/scroll.css create mode 100644 styles/scrollbar.css diff --git a/features/About/AboutProjectModal.module.css b/features/About/AboutProjectModal.module.css index fd3e71f8..ea1a365f 100644 --- a/features/About/AboutProjectModal.module.css +++ b/features/About/AboutProjectModal.module.css @@ -12,8 +12,6 @@ border-radius: 16px; background: #141d34; transform: translate(-50%, -50%); - - @mixin scroll; } .aboutProjectModal__content { diff --git a/package.json b/package.json index 71b81b1a..ae5d3294 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "husky": "^8.0.3", "lint-staged": "^15.5.2", "postcss-flexbugs-fixes": "^5.0.2", - "postcss-mixins": "^9.0.4", "postcss-nesting": "^12.1.5", "postcss-preset-env": "^9.6.0", "prettier": "3.6.2" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 05d0391f..2828173f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -126,9 +126,6 @@ importers: postcss-flexbugs-fixes: specifier: ^5.0.2 version: 5.0.2(postcss@8.4.49) - postcss-mixins: - specifier: ^9.0.4 - version: 9.0.4(postcss@8.4.49) postcss-nesting: specifier: ^12.1.5 version: 12.1.5(postcss@8.4.49) @@ -1725,10 +1722,6 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} - camelcase-css@2.0.1: - resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} - engines: {node: '>= 6'} - camelize@1.0.1: resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} @@ -3474,12 +3467,6 @@ packages: peerDependencies: postcss: ^8.4 - postcss-js@4.1.0: - resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==} - engines: {node: ^12 || ^14 || >= 16} - peerDependencies: - postcss: ^8.4.21 - postcss-lab-function@6.0.19: resolution: {integrity: sha512-vwln/mgvFrotJuGV8GFhpAOu9iGf3pvTBr6dLPDmUcqVD5OsQpEFyQMAFTxSxWXGEzBj6ld4pZ/9GDfEpXvo0g==} engines: {node: ^14 || ^16 || >=18} @@ -3492,12 +3479,6 @@ packages: peerDependencies: postcss: ^8.4 - postcss-mixins@9.0.4: - resolution: {integrity: sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==} - engines: {node: '>=14.0'} - peerDependencies: - postcss: ^8.2.14 - postcss-nesting@12.1.5: resolution: {integrity: sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==} engines: {node: ^14 || ^16 || >=18} @@ -3554,12 +3535,6 @@ packages: resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} engines: {node: '>=4'} - postcss-simple-vars@7.0.1: - resolution: {integrity: sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==} - engines: {node: '>=14.0'} - peerDependencies: - postcss: ^8.2.1 - postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -4139,12 +4114,6 @@ packages: stylis@4.3.2: resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} - sugarss@4.0.1: - resolution: {integrity: sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==} - engines: {node: '>=12.0'} - peerDependencies: - postcss: ^8.3.3 - supercluster@8.0.1: resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==} @@ -6511,8 +6480,6 @@ snapshots: callsites@3.1.0: {} - camelcase-css@2.0.1: {} - camelize@1.0.1: {} caniuse-lite@1.0.30001756: {} @@ -8482,11 +8449,6 @@ snapshots: postcss: 8.4.49 postcss-value-parser: 4.2.0 - postcss-js@4.1.0(postcss@8.4.49): - dependencies: - camelcase-css: 2.0.1 - postcss: 8.4.49 - postcss-lab-function@6.0.19(postcss@8.4.49): dependencies: '@csstools/css-color-parser': 2.0.5(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1) @@ -8501,14 +8463,6 @@ snapshots: postcss: 8.4.49 postcss-value-parser: 4.2.0 - postcss-mixins@9.0.4(postcss@8.4.49): - dependencies: - fast-glob: 3.3.3 - postcss: 8.4.49 - postcss-js: 4.1.0(postcss@8.4.49) - postcss-simple-vars: 7.0.1(postcss@8.4.49) - sugarss: 4.0.1(postcss@8.4.49) - postcss-nesting@12.1.5(postcss@8.4.49): dependencies: '@csstools/selector-resolve-nested': 1.1.0(postcss-selector-parser@6.1.2) @@ -8618,10 +8572,6 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 - postcss-simple-vars@7.0.1(postcss@8.4.49): - dependencies: - postcss: 8.4.49 - postcss-value-parser@4.2.0: {} postcss@8.4.31: @@ -9360,10 +9310,6 @@ snapshots: stylis@4.3.2: {} - sugarss@4.0.1(postcss@8.4.49): - dependencies: - postcss: 8.4.49 - supercluster@8.0.1: dependencies: kdbush: 4.0.2 diff --git a/postcss.config.json b/postcss.config.json index 0e8ae6ec..20904857 100644 --- a/postcss.config.json +++ b/postcss.config.json @@ -13,12 +13,6 @@ "flexbox": "no-2009" } } - ], - [ - "postcss-mixins", - { - "mixinsFiles": "styles/**/mixins/*.css" - } ] ] } diff --git a/styles/globals.css b/styles/globals.css index 1978c6d5..8ee43a14 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,4 +1,5 @@ @import './font.css'; +@import './scrollbar.css'; * { box-sizing: border-box; diff --git a/styles/mixins/scroll.css b/styles/mixins/scroll.css deleted file mode 100644 index 36f3c09d..00000000 --- a/styles/mixins/scroll.css +++ /dev/null @@ -1,39 +0,0 @@ -@define-mixin scroll $background: #1e2841, $color: #455068, $color-active: #5b677d { - & { - overflow-y: auto; - } - - /* FF */ - @supports (scrollbar-width: thin) { - & { - scrollbar-color: $color transparent; - scrollbar-width: thin; - overflow-y: auto; - padding-right: 8px; - } - } - - /* Safari, Chrome */ - @supports not (scrollbar-width: thin) { - & { - overflow-y: scroll; - padding-right: 0; - } - - &::-webkit-scrollbar { - width: 8px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 16px; - } - - &:hover::-webkit-scrollbar-thumb { - background: $color; - } - - &::-webkit-scrollbar-thumb:active { - background: $color-active; - } - } -} diff --git a/styles/scrollbar.css b/styles/scrollbar.css new file mode 100644 index 00000000..b279fe90 --- /dev/null +++ b/styles/scrollbar.css @@ -0,0 +1,6 @@ +[class^="Accordion-sc-"], +[class^="Wrapper-sc-"], +[class^="AboutProjectModal_about"] { + scrollbar-width: thin; + scrollbar-color: #455068 #141D34; +}