Scroll Padding

Set spacing inside element (padding) for snapping or scrolling.

Usage:

@live scroll-p-*;
@live scroll-pt-*;
@live scroll-pb-*;
@live scroll-pl-*;
@live scroll-pr-*;
@live scroll-px-*;
@live scroll-py-*;
@live scroll-pbl-*;
@live scroll-pbls-*;
@live scroll-pble-*;
@live scroll-pi-*;
@live scroll-pis-*;
@live scroll-pie-*;

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		live: {
			scroll: {
				p: {
					property: "scroll-padding: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pt: {
					property: "scroll-padding-top: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pr: {
					property: "scroll-padding-right: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pb: {
					property: "scroll-padding-bottom: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pl: {
					property: "scroll-padding-left: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				px: {
					property: `
						scroll-padding-left: <n><v><i>;
            scroll-padding-right: <n><v><i>;
          `,
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				py: {
					property: `
						scroll-padding-top: <n><v><i>;
            scroll-padding-bottom: <n><v><i>;
          `,
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pbl: {
					property: "scroll-padding-block: <n><v><i>",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pbls: {
					property: "scroll-padding-block-start: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pble: {
					property: "scroll-padding-block-end: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pi: {
					property: "scroll-padding-inline: <n><v><i>",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pis: {
					property: "scroll-padding-inline-start: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				pie: {
					property: "scroll-padding-inline-end: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
			},
		},
	},
};

export default shilpConfig;