Scroll Margin

Set spacing around element (margin) for snapping or scrolling.

Usage:

@live scroll-m-*;
@live scroll-mt-*;
@live scroll-mb-*;
@live scroll-ml-*;
@live scroll-mr-*;
@live scroll-mx-*;
@live scroll-my-*;
@live scroll-mbl-*;
@live scroll-mbls-*;
@live scroll-mble-*;
@live scroll-mi-*;
@live scroll-mis-*;
@live scroll-mie-*;

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: {
				m: {
					property: "scroll-margin: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mt: {
					property: "scroll-margin-top: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mr: {
					property: "scroll-margin-right: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mb: {
					property: "scroll-margin-bottom: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				ml: {
					property: "scroll-margin-left: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mx: {
					property: `
						scroll-margin-left: <n><v><i>;
            scroll-margin-right: <n><v><i>;
          `,
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				my: {
					property: `
            scroll-margin-top: <n><v><i>;
            scroll-margin-bottom: <n><v><i>;
          `,
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mbl: {
					property: "scroll-margin-block: <n><v><i>",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mbls: {
					property: "scroll-margin-block-start: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mble: {
					property: "scroll-margin-block-end: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mi: {
					property: "scroll-margin-inline: <n><v><i>",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mis: {
					property: "scroll-margin-inline-start: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
				mie: {
					property: "scroll-margin-inline-end: <n><v><i>;",
					resolve: "spacing",
					themeKey: "spacingPixels",
					values: {},
				},
			},
		},
	},
};

export default shilpConfig;