dot013/guz.one
1
0
Fork 0
Code Issues Pull Requests Activity

feat: scrollbar style

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-06-07 19:35:54 -03:00
parent d97ff65332
commit 149bfe3e25
4 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -6,6 +6,8 @@
"@iconify-json/solar": "^1.1.9",
"@types/node": "^20.12.12",
"@unocss/cli": "^0.60.3",
"@unocss/core": "^0.60.4",
"@unocss/preset-mini": "^0.60.4",
"@unocss/rule-utils": "^0.60.4",
"unocss": "^0.60.3"
}

4
pages/homepage.templ
View File

@@ -67,7 +67,9 @@ templ Homepage() {
{Text: "blog", Link: templ.SafeURL("#blog")},
{Text: "contact", Link: templ.SafeURL("#contact")},
})
<div class="w-screen h-screen overflow-y-scroll snap-y">
<div
class="w-screen h-screen overflow-x-hidden overflow-y-scroll snap-y scrollbar thumb-gray track-black"
>
<header
class="h-screen w-screen flex justify-center items-center snap-start"
id="about"

22
pnpm-lock.yaml generated
View File

@@ -17,6 +17,12 @@ devDependencies:
'@unocss/cli':
specifier: ^0.60.3
version: 0.60.3
'@unocss/core':
specifier: ^0.60.4
version: 0.60.4
'@unocss/preset-mini':
specifier: ^0.60.4
version: 0.60.4
'@unocss/rule-utils':
specifier: ^0.60.4
version: 0.60.4
@@ -860,6 +866,12 @@ packages:
'@unocss/core': 0.60.3
dev: true
/@unocss/extractor-arbitrary-variants@0.60.4:
resolution: {integrity: sha512-USuFGs5CLft9q7IGNdAEp1oliuUns+W7OO0Tx5qtx/oBh6pU/L93lcNNsuuGNrMU8BCmF3atx1/PEmGymgJ7VA==}
dependencies:
'@unocss/core': 0.60.4
dev: true
/@unocss/inspector@0.60.3:
resolution: {integrity: sha512-2cXAPA1yddB79mmpMXxPpSpizn4TskAsB7aSocbprOTYIU2Ff53gfkkijnLixrBvbG8xw91d9oPuI5Hm9GCyMQ==}
dependencies:
@@ -908,6 +920,14 @@ packages:
'@unocss/rule-utils': 0.60.3
dev: true
/@unocss/preset-mini@0.60.4:
resolution: {integrity: sha512-ZiHbP69vkyz0xmhqzC4B4PegwV+LPlZOBT7cRhsh0P8oPOQKYOyDRy4rAl+sJBJeIrggn1r1LgN+Z0Xvd8Ytcw==}
dependencies:
'@unocss/core': 0.60.4
'@unocss/extractor-arbitrary-variants': 0.60.4
'@unocss/rule-utils': 0.60.4
dev: true
/@unocss/preset-tagify@0.60.3:
resolution: {integrity: sha512-pzD6bgtGuIk7M1n/JQiR6EpwnVvafSTHoM70Jhf+T8MSuatDb+KFJCn3VELV2v38aikcUY5cTf95jqHQdzOAhQ==}
dependencies:
@@ -953,7 +973,7 @@ packages:
resolution: {integrity: sha512-I47/DcKQ2z12W80+Ffth0K6LzNvqcQPYRWk7KwVemVoEiGYamMV8/s+SbB26Fk9KUFjh+Ns/pGAo4iJZo0ueUQ==}
engines: {node: '>=14'}
dependencies:
'@unocss/core': 0.60.3
'@unocss/core': 0.60.4
magic-string: 0.30.10
dev: true

22
uno.config.js
View File

@@ -9,6 +9,7 @@ import {
} from 'unocss';
import { definePreset } from 'unocss';
import { variantGetParameter } from '@unocss/rule-utils';
import { colorResolver, parseColor } from '@unocss/preset-mini/utils';
import * as utils from './uno-utils.js';
@@ -61,7 +62,6 @@ const presetContainers = definePreset(
if (variant) {
const [match, rest, label] = variant;
const unit = utils.bracket(match);
console.log(match, rest, label)
/** @type {string | undefined } */
let container;
@@ -112,6 +112,26 @@ export default defineConfig({
'yellow': '#f9e2af',
},
},
rules: [
[
'scrollbar',
{
'scrollbar-color': 'var(--un-scrollbar-thumb, #ddd) var(--un-scrollbar-track, #f5f5f5)',
},
],
[
/^(?:scrollbar-)?thumb-(?:color-)?(.+)$/,
// @ts-expect-error
colorResolver('--un-scrollbar-thumb', 'scrollbar-thumb'),
{ autocomplete: 'scrollbar-thumb-$colors' },
],
[
/^(?:scrollbar-)?track-(?:color-)?(.+)$/,
// @ts-expect-error
colorResolver('--un-scrollbar-track', 'scrollbar-thumb'),
{ autocomplete: 'scrollbar-track-$colors' },
],
],
cli: {
entry: {
patterns: [