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
/** @type {import('shilpcss/types').ShilpConfig} */
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;