🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

tailwind-scrollbar-variants

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwind-scrollbar-variants - npm Package Compare versions

Comparing version

1.1.1
to
2.0.0

12

CHANGELOG.md

@@ -10,9 +10,19 @@ # Tailwind CSS Plugin - Scrollbar Variants - Changelog

## [1.1.0] - 2023-12-15
### Removed
- `scrollbar-rounded` built in class
- I recommend building this yourself to decouple it from the plugin
## [1.1.0] - 2021-06-23
### Added
- Optional configurations
## [1.0.0] - 2021-06-23
## [1.0.0] - 2021-06-23
### Added
- Initial release

212

index.js
const plugin = require("tailwindcss/plugin");
const _ = require("lodash");
module.exports = plugin.withOptions(options => {
return ({ addUtilities, addVariant, e }) => {
// Added scrollbar variant
addVariant("scrollbar", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`scrollbar${separator}${className}`)}::-webkit-scrollbar`;
});
});
module.exports = plugin.withOptions(() => ({ addUtilities, addVariant, e }) => {
// Scrollbar
addVariant("scrollbar", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.${e(`scrollbar${separator}${className}`)}::-webkit-scrollbar`
);
});
// Added scrollbar button variant
addVariant("scrollbar-button", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(
// Scrollbar button
addVariant("scrollbar-button", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.${e(
`scrollbar-button${separator}${className}`
)}::-webkit-scrollbar-button`;
});
});
)}::-webkit-scrollbar-button`
);
});
// Added scrollbar thumb variant
addVariant("scrollbar-thumb", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(
// Scrollbar thumb
addVariant("scrollbar-thumb", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.${e(
`scrollbar-thumb${separator}${className}`
)}::-webkit-scrollbar-thumb`;
});
});
)}::-webkit-scrollbar-thumb`
);
});
// Added scrollbar track variant
addVariant("scrollbar-track", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(
// Scrollbar track
addVariant("scrollbar-track", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.${e(
`scrollbar-track${separator}${className}`
)}::-webkit-scrollbar-track`;
});
});
)}::-webkit-scrollbar-track`
);
});
// Added scrollbar track piece variant
addVariant("scrollbar-track-piece", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(
// Scrollbar track piece
addVariant("scrollbar-track-piece", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.${e(
`scrollbar-track-piece${separator}${className}`
)}::-webkit-scrollbar-track-piece`;
});
});
)}::-webkit-scrollbar-track-piece`
);
});
// Added scrollbar corner variant
addVariant("scrollbar-corner", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(
// Scrollbar corner
addVariant("scrollbar-corner", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.${e(
`scrollbar-corner${separator}${className}`
)}::-webkit-scrollbar-corner`;
});
});
)}::-webkit-scrollbar-corner`
);
});
// Added scrollbar resizer variant
addVariant("scrollbar-resizer", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(
`scrollbar-resizer${separator}${className}`
)}::-webkit-resizer`;
});
});
// Add scrollbar width
addUtilities(
_.map(
["auto", "inherit", "initial", "none", "revert", "thin", "unset"],
value => {
return {
[`.${e(`scrollbar-width-${value}`)}`]: {
"scrollbar-width": value
}
};
}
)
// Scrollbar resizer
addVariant("scrollbar-resizer", ({ modifySelectors, separator }) => {
modifySelectors(
({ className }) =>
`.${e(`scrollbar-resizer${separator}${className}`)}::-webkit-resizer`
);
});
// Add overflow overlay
addUtilities({
".overflow-overlay": {
"overflow-x": "overlay",
"overflow-y": "overlay"
},
".overflow-x-overlay": {
"overflow-x": "overlay"
},
".overflow-y-overlay": {
"overflow-y": "overlay"
}
});
// Scrollbar width
addUtilities(
["auto", "inherit", "initial", "none", "revert", "thin", "unset"].map(
(v) => ({
[`.${e(`scrollbar-width-${v}`)}`]: {
"scrollbar-width": value,
},
})
)
);
const buttonDisplay = options?.button?.display ?? "none";
const buttonHeight = options?.button?.height ?? "0px";
const buttonWidth = options?.button?.width ?? "0px";
const cornerBgColor = options?.corner?.bgColor ?? "transparent";
const scollbarHeight = options?.scrollbar?.height ?? "14px";
const scrollbarScrollbarWidth =
options?.scrollbar?.scrollbarWidth ?? "thin";
const scrollbarWidth = options?.scrollbar?.width ?? "14px";
let thumbBgOpacity = options?.thumb?.bgOpacity ?? "0.15";
const thumbBorderColor = options?.thumb?.borderColor ?? "transparent";
const thumbBorderRadius = options?.thumb?.borderRadius ?? "7px";
const thumbBorderStyle = options?.thumb?.borderStyle ?? "solid";
const thumbBorderWidth = options?.thumb?.borderWidth ?? "4px";
const thumbHeight = options?.thumb?.height ?? "auto";
const thumbWidth = options?.thumb?.width ?? "auto";
// Overflow overlay
addUtilities({
".overflow-overlay": {
"overflow-x": "overlay",
"overflow-y": "overlay",
},
".overflow-x-overlay": {
"overflow-x": "overlay",
},
".overflow-y-overlay": {
"overflow-y": "overlay",
},
});
if (typeof thumbBgOpacity !== "string") {
thumbBgOpacity = thumbBgOpacity.toString();
}
// Add scrollbar class
addUtilities({
".scrollbar-rounded": {
"&::-webkit-scrollbar": {
"scrollbar-width": scrollbarScrollbarWidth,
height: scollbarHeight,
width: scrollbarWidth
},
"&::-webkit-scrollbar-thumb": {
"--tw-bg-opacity": `${thumbBgOpacity}`,
"--tw-shadow": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
height: thumbHeight,
width: thumbWidth,
"border-width": thumbBorderWidth,
"border-radius": thumbBorderRadius,
"border-style": thumbBorderStyle,
"border-color": thumbBorderColor,
"background-clip": "padding-box",
"background-color": "rgba(0, 0, 0, var(--tw-bg-opacity))",
"@media (prefers-color-scheme: dark)": {
"background-color": "rgba(255, 255, 255, var(--tw-bg-opacity))"
},
"box-shadow":
"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
},
"&::-webkit-scrollbar-button": {
width: buttonWidth,
height: buttonHeight,
display: buttonDisplay
},
"&::-webkit-scrollbar-corner": {
"background-color": cornerBgColor
}
}
});
};
if (typeof thumbBgOpacity !== "string")
thumbBgOpacity = thumbBgOpacity.toString();
});

8

package.json
{
"name": "tailwind-scrollbar-variants",
"version": "1.1.1",
"version": "2.0.0",
"description": "Adds scrollbar variants",

@@ -9,6 +9,6 @@ "main": "index.js",

"license": "MIT",
"dependencies": {
"tailwindcss": "^2.2.2",
"typescript": "^4.3.4"
"peerDependencies": {
"tailwindcss": "^3.0.0",
"typescript": "^5.0.0"
}
}

73

README.md

@@ -9,18 +9,10 @@ # Tailwind CSS Plugin - Scrollbar Variants

The built in Scrollbar class
```html
<div class="scrollbar-rounded">
...
<div>
```
The built in Overflow class
The built in Overflow class
```html
<div class="overflow-[<x|y>-]overlay">
...
<div>
<div class="overflow-[<x|y>-]overlay">...</div>
```
| Prefix | Pseudo-Element |
|-------------------------|-----------------------------------|
| ----------------------- | --------------------------------- |
| `scrollbar` | `::-webkit-scrollbar` |

@@ -38,14 +30,12 @@ | `scrollbar-button` | `::-webkit-scrollbar-button` |

Rounded scrollbar with x-axis margins
x-axis margins
```html
<div class="scrollbar-rounded scrollbar-track:mx-4">
...
<div>
<div class="scrollbar-track:mx-4">...</div>
```
Rounded scrollbar with adjusted thumb opacity
Adjusted thumb opacity
```html
<div class="scrollbar-rounded scrollbar-thumb:bg-opacity-[0.1]">
...
<div>
<div class="scrollbar-thumb:bg-opacity-[0.1]">...</div>
```

@@ -55,7 +45,6 @@

Rounded scrollbar with adjusted background color and opacity (shorthand)
Adjusted background color and opacity (shorthand)
```html
<div class="scrollbar-rounded scrollbar-thumb:bg-red-500/[0.26]">
...
<div>
<div class="scrollbar-thumb:bg-red-500/[0.26]">...</div>
```

@@ -78,39 +67,1 @@

```
<br />
## Options
Customize defaults for `scrollbar-rounded` class:
```js
module.exports = {
// ...
plugins: [
// ...
require("tailwind-scrollbar-variant")({
button: {
display: "none",
height: "0px",
width: "0px"
},
corner: {
bgColor: "transparent"
},
scrollbar: {
height: "14px",
scrollbarWidth: "thin",
width: "14px"
},
thumb: {
bgOpacity: "0.15",
borderColor: "transparent",
borderRadius: "7px",
borderStyle: "solid",
borderWidth: "4px",
height: "auto",
width: "auto"
}
}),
],
};
```