igniteui-theming/dist/mcp/knowledge/docs/layout/functions/pad.js

A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.

//#region src/knowledge/docs/layout/functions/pad.md?raw
var pad_default = "# The pad() function\n\nReturns a size-aware spacing value based on --ig-spacing and size flags.\n\n## Mechanism\nThe pad() function uses --is-small/medium/large (from @include sizable()) and multiplies the\nchosen size by spacing variables:\n- --ig-spacing\n- --ig-spacing-inline (optional)\n- --ig-spacing-block (optional)\n- If --ig-spacing-inline or --ig-spacing-block are not provided, they default to --ig-spacing.\n\nSpacing can be controlled based on the value of --ig-size (small/medium/large) and can be set globally or at the component level:\n- --ig-spacing-small/medium/large\n- --ig-spacing-inline-small/medium/large\n- --ig-spacing-block-small/medium/large\n\n## CSS Variable Fallback Priority\nThe system checks CSS variables in priority order (first match wins):\n\n### For inline spacing (pad-inline):\n1. Most specific: --ig-spacing-inline-small/medium/large (based on current --ig-size)\n   - If defined → Use this value\n2. Size-specific: --ig-spacing-small/medium/large (based on current --ig-size)\n   - If defined → Use this value\n3. Direction-specific: --ig-spacing-inline\n   - If defined → Use this value (applies to all sizes)\n4. Base fallback: --ig-spacing\n   - Always use this if none of the above are defined (applies to all sizes)\n\n### For block spacing (pad-block):\n1. Most specific: --ig-spacing-block-small/medium/large (based on current --ig-size)\n   - If defined → Use this value\n2. Size-specific: --ig-spacing-small/medium/large (based on current --ig-size)\n   - If defined → Use this value\n3. Direction-specific: --ig-spacing-block\n   - If defined → Use this value (applies to all sizes)\n4. Base fallback: --ig-spacing\n   - Always use this if none of the above are defined (applies to all sizes)\n\n#### Example 1: Only base spacing set\n```scss\n:root {\n  --ig-spacing: 1;\n}\n```\nResult: Both inline and block use 1 for all sizes (small/medium/large)\n\n#### Example 2: Direction-specific spacing\n```scss\n:root {\n  --ig-spacing: 1;\n  --ig-spacing-inline: 1.5;\n  --ig-spacing-block: 0.75;\n}\n```\nResult:\n- Inline uses 1.5 for all sizes\n- Block uses 0.75 for all sizes\n\n#### Example 3: Size-specific spacing\n```scss\n:root {\n  --ig-spacing: 1;\n  --ig-spacing-small: 0.5;\n  --ig-spacing-medium: 1;\n  --ig-spacing-large: 1.5;\n}\n```\nResult: Both inline and block use size-specific values:\n- Small (--ig-size: 1) → 0.5\n- Medium (--ig-size: 2) → 1\n- Large (--ig-size: 3) → 1.5\n\n#### Example 4: Fully customized (most specific wins)\n```scss\n:root {\n  --ig-spacing: 1;\n  --ig-spacing-inline: 1.2;\n  --ig-spacing-inline-large: 2;\n}\n```\nResult:\n- Inline small/medium: 1.2 (from --ig-spacing-inline)\n- Inline large: 2 (from --ig-spacing-inline-large, most specific)\n- Block all sizes: 1 (fallback to --ig-spacing)\n\n## How to configure padding in a card component using pad(), pad-inline(), and pad-block()\n```scss\n.my-card {\n  padding: pad(4px, 8px, 16px); // Set both vertical and horizontal padding (configurable via --ig-spacing)\n  margin-inline: pad-inline(4px, 8px, 16px); // Set horizontal padding only (configurable via --ig-spacing or --ig-spacing-inline)\n  margin-block: pad-block(2px, 4px, 8px); // Set vertical padding only (configurable via --ig-spacing or --ig-spacing-block)\n}\n```\n\n## Configure the spacing variable to adjust the padding size in the card\n```css\n.my-card {\n  --ig-spacing: 0.75;\n}\n```\n\n## Notes\n- Requires @include sizing() and @include sizable() in component styles.\n- Requires @include spacing() once to set spacing variables.\n";
//#endregion
export { pad_default as default };