@salesforce-ux/design-system/__internal/chunked/docs/ui/utilities/padding/docs.mdx.js

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/utilities/padding/docs.mdx.js"]=function(e){function t(t){for(var l,r,n=t[0],s=t[1],p=t[2],m=0,c=[];m<n.length;m++)r=n[m],i[r]&&c.push(i[r][0]),i[r]=0;for(l in s)Object.prototype.hasOwnProperty.call(s,l)&&(e[l]=s[l]);for(d&&d(t);c.length;)c.shift()();return o.push.apply(o,p||[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],l=!0,n=1;n<a.length;n++){var s=a[n];0!==i[s]&&(l=!1)}l&&(o.splice(t--,1),e=r(r.s=a[0]))}return e}var l={},i={18:0},o=[];function r(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=l,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:a})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],s=n.push.bind(n);n.push=t,n=n.slice();for(var p=0;p<n.length;p++)t(n[p]);var d=s;return o.push([247,0]),a()}({0:function(e,t){e.exports=React},247:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var l=a(0),i=(s(l),a(7)),o=s(i),r=s(a(64)),n=s(a(10));function s(e){return e&&e.__esModule?e:{default:e}}var p=i.factories.a,d=i.factories.code,m=i.factories.h2,c=i.factories.h3,u=i.factories.li,f=i.factories.p,x=i.factories.strong,g=i.factories.table,y=i.factories.tbody,h=i.factories.td,z=i.factories.th,E=i.factories.thead,v=i.factories.tr,_=i.factories.ul,b=t.getElement=function(){return(0,l.createElement)(o.default,{},(0,l.createElement)("div",{className:"lead"},"Adjust whitespace by applying horizontal and vertical padding helpers"),f({},"The base unit of all of our spacing metrics is ",x({},"4"),"."),f({},x({},"Before using")),_({},u({},"Most components already come with spacing included. These utility classes are for added convenience in laying out components."),u({},"Classes prefixed by ",d({},"slds-p-")," are used for adding ",x({},"padding"),". Classes prefixed in ",d({},"slds-m-")," are used for adding ",p({href:"/utilities/margin"},"margin")),u({},"The directions available for the spacing classes are ",d({},"top"),", ",d({},"right"),", ",d({},"bottom"),", and ",d({},"left"),"."),u({},"You can use the ",d({},"vertical")," shortcut for both ",d({},"top")," and ",d({},"bottom"),", ",d({},"horizontal")," for both ",d({},"right")," and ",d({},"left"),", and ",d({},"around")," for all sides."),u({},"Use the ",d({},"_xxx-small")," through ",d({},"_xx-large")," scale to choose the size needed."),u({},"You can also use ",d({},"none")," as the size on any of the directions to enforce zero padding."),u({},"Where ",x({},"vertical centering")," is required, check out our ",p({href:"/utilities/media-objects"},"centered media object")," instead of applying extra ",d({},"padding")," or ",d({},"margin"),".")),m({id:"Location-Top"},"Location - Top"),(0,l.createElement)(n.default,{title:"top paddings"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"p",size:"none",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"xxx-small",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"xx-small",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"x-small",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"small",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"medium",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"large",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"x-large",position:"top"}),(0,l.createElement)(r.default,{type:"p",size:"xx-large",position:"top"}))),m({id:"Location-Left"},"Location - Left"),(0,l.createElement)(n.default,{title:"left paddings"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"p",size:"none",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"xxx-small",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"xx-small",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"x-small",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"small",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"medium",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"large",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"x-large",position:"left"}),(0,l.createElement)(r.default,{type:"p",size:"xx-large",position:"left"}))),m({id:"Location-Bottom"},"Location - Bottom"),(0,l.createElement)(n.default,{title:"bottom paddings"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"p",size:"none",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"xxx-small",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"xx-small",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"x-small",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"small",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"medium",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"large",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"x-large",position:"bottom"}),(0,l.createElement)(r.default,{type:"p",size:"xx-large",position:"bottom"}))),m({id:"Location-Right"},"Location - Right"),(0,l.createElement)(n.default,{title:"right paddings"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"p",size:"none",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"xxx-small",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"xx-small",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"x-small",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"small",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"medium",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"large",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"x-large",position:"right"}),(0,l.createElement)(r.default,{type:"p",size:"xx-large",position:"right"}))),m({id:"Location-Horizontal"},"Location - Horizontal"),(0,l.createElement)(n.default,{title:"horizontal paddings"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"p",size:"none",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"xxx-small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"xx-small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"x-small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"medium",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"large",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"x-large",position:"horizontal"}),(0,l.createElement)(r.default,{type:"p",size:"xx-large",position:"horizontal"}))),m({id:"Location-Vertical"},"Location - Vertical"),(0,l.createElement)(n.default,{title:"vertical paddings"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"p",size:"none",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"xxx-small",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"xx-small",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"x-small",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"small",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"medium",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"large",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"x-large",position:"vertical"}),(0,l.createElement)(r.default,{type:"p",size:"xx-large",position:"vertical"}))),m({id:"Location-Around"},"Location - Around"),(0,l.createElement)(n.default,{title:"around paddings"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"p",size:"none",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"xxx-small",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"xx-small",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"x-small",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"small",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"medium",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"large",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"x-large",position:"around"}),(0,l.createElement)(r.default,{type:"p",size:"xx-large",position:"around"}))),m({id:"Variable-Density-Classes"},"Variable Density Classes"),f({},"In addition to the tokens we've created to support the ",p({href:"https://developer.salesforce.com/blogs/2018/08/new-density-settings-for-the-lightning-experience-ui-in-winter-19.html"},"new density settings"),", we have also created variable density classes for both padding and margin. The tables below show how the values change between the Comfy and Compact settings."),c({id:"Around"},"Around"),g({},E({},v({},z({},"Class Name"),z({},"Comfy Value"),z({},"Compact Value"))),y({},v({},h({},d({},"slds-var-p-around_xxx-small")),h({},"0.125rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-p-around_xx-small")),h({},"0.25rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-p-around_x-small")),h({},"0.5rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-p-around_small")),h({},"0.75rem"),h({},"0.25rem")),v({},h({},d({},"slds-var-p-around_medium")),h({},"1rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-p-around_large")),h({},"1.5rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-p-around_x-large")),h({},"2rem"),h({},"1rem")),v({},h({},d({},"slds-var-p-around_xx-large")),h({},"3rem"),h({},"1.5rem")))),c({id:"Left-Right-Horizontal"},"Left, Right, Horizontal"),g({},E({},v({},z({},"Class Name"),z({},"Comfy Value"),z({},"Compact Value"))),y({},v({},h({},d({},"slds-var-p-*_xxx-small")),h({},"0.125rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-p-*_xx-small")),h({},"0.25rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-p-*_x-small")),h({},"0.5rem"),h({},"0.25rem")),v({},h({},d({},"slds-var-p-*_small")),h({},"0.75rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-p-*_medium")),h({},"1rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-p-*_large")),h({},"1.5rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-p-*_x-large")),h({},"2rem"),h({},"1rem")),v({},h({},d({},"slds-var-p-*_xx-large")),h({},"3rem"),h({},"1.5rem")))),c({id:"Top-Bottom-Vertical"},"Top, Bottom, Vertical"),g({},E({},v({},z({},"Class Name"),z({},"Comfy Value"),z({},"Compact Value"))),y({},v({},h({},d({},"slds-var-p-*_xxx-small")),h({},"0.125rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-p-*_xx-small")),h({},"0.25rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-p-*_x-small")),h({},"0.5rem"),h({},"0.25rem")),v({},h({},d({},"slds-var-p-*_small")),h({},"0.75rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-p-*_medium")),h({},"1rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-p-*_large")),h({},"1.5rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-p-*_x-large")),h({},"2rem"),h({},"1rem")),v({},h({},d({},"slds-var-p-*_xx-large")),h({},"3rem"),h({},"1.5rem")))))};t.getContents=function(){return(0,i.createTableOfContents)(b())}},6:function(e,t){e.exports=JSBeautify}});