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