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

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/utilities/margin/docs.mdx.js"]=function(e){function t(t){for(var l,r,n=t[0],s=t[1],m=t[2],c=0,p=[];c<n.length;c++)r=n[c],i[r]&&p.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);p.length;)p.shift()();return o.push.apply(o,m||[]),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={19: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 m=0;m<n.length;m++)t(n[m]);var d=s;return o.push([248,0]),a()}({0:function(e,t){e.exports=React},248: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 m=i.factories.a,d=i.factories.code,c=i.factories.h2,p=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 margin 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-m-")," are used for adding ",x({},"margins"),". Classes prefixed in ",d({},"slds-p-")," are used for adding ",m({href:"/utilities/padding"},"padding")),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 margin."),u({},"Where ",x({},"vertical centering")," is required, check out our ",m({href:"/utilities/media-objects"},"centered media object")," instead of applying extra ",d({},"margin")," or ",d({},"padding"),".")),c({id:"Location-Top"},"Location - Top"),(0,l.createElement)(n.default,{title:"top margins"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"m",size:"none",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"xxx-small",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"xx-small",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"x-small",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"small",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"medium",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"large",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"x-large",position:"top"}),(0,l.createElement)(r.default,{type:"m",size:"xx-large",position:"top"}))),c({id:"Location-Left"},"Location - Left"),(0,l.createElement)(n.default,{title:"left margins"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"m",size:"none",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"xxx-small",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"xx-small",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"x-small",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"small",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"medium",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"large",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"x-large",position:"left"}),(0,l.createElement)(r.default,{type:"m",size:"xx-large",position:"left"}))),c({id:"Location-Bottom"},"Location - Bottom"),(0,l.createElement)(n.default,{title:"bottom margins"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"m",size:"none",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"xxx-small",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"xx-small",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"x-small",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"small",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"medium",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"large",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"x-large",position:"bottom"}),(0,l.createElement)(r.default,{type:"m",size:"xx-large",position:"bottom"}))),c({id:"Location-Right"},"Location - Right"),(0,l.createElement)(n.default,{title:"right margins"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"m",size:"none",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"xxx-small",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"xx-small",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"x-small",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"small",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"medium",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"large",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"x-large",position:"right"}),(0,l.createElement)(r.default,{type:"m",size:"xx-large",position:"right"}))),c({id:"Location-Horizontal"},"Location - Horizontal"),(0,l.createElement)(n.default,{title:"horizontal margins"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"m",size:"none",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"xxx-small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"xx-small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"x-small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"small",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"medium",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"large",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"x-large",position:"horizontal"}),(0,l.createElement)(r.default,{type:"m",size:"xx-large",position:"horizontal"}))),c({id:"Location-Vertical"},"Location - Vertical"),(0,l.createElement)(n.default,{title:"vertical margins"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"m",size:"none",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"xxx-small",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"xx-small",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"x-small",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"small",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"medium",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"large",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"x-large",position:"vertical"}),(0,l.createElement)(r.default,{type:"m",size:"xx-large",position:"vertical"}))),c({id:"Location-Around"},"Location - Around"),(0,l.createElement)(n.default,{title:"around margins"},(0,l.createElement)("div",null,(0,l.createElement)(r.default,{type:"m",size:"none",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"xxx-small",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"xx-small",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"x-small",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"small",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"medium",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"large",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"x-large",position:"around"}),(0,l.createElement)(r.default,{type:"m",size:"xx-large",position:"around"}))),c({id:"Variable-Density-Classes"},"Variable Density Classes"),f({},"In addition to the tokens we've created to support the ",m({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 margin and padding. The tables below show how the values change between the Comfy and Compact settings."),p({id:"Around"},"Around"),g({},E({},v({},z({},"Class Name"),z({},"Comfy Value"),z({},"Compact Value"))),y({},v({},h({},d({},"slds-var-m-around_xxx-small")),h({},"0.125rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-m-around_xx-small")),h({},"0.25rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-m-around_x-small")),h({},"0.5rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-m-around_small")),h({},"0.75rem"),h({},"0.25rem")),v({},h({},d({},"slds-var-m-around_medium")),h({},"1rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-m-around_large")),h({},"1.5rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-m-around_x-large")),h({},"2rem"),h({},"1rem")),v({},h({},d({},"slds-var-m-around_xx-large")),h({},"3rem"),h({},"1.5rem")))),p({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-m-*_xxx-small")),h({},"0.125rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-m-*_xx-small")),h({},"0.25rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-m-*_x-small")),h({},"0.5rem"),h({},"0.25rem")),v({},h({},d({},"slds-var-m-*_small")),h({},"0.75rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-m-*_medium")),h({},"1rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-m-*_large")),h({},"1.5rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-m-*_x-large")),h({},"2rem"),h({},"1rem")),v({},h({},d({},"slds-var-m-*_xx-large")),h({},"3rem"),h({},"1.5rem")))),p({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-m-*_xxx-small")),h({},"0.125rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-m-*_xx-small")),h({},"0.25rem"),h({},"0.125rem")),v({},h({},d({},"slds-var-m-*_x-small")),h({},"0.5rem"),h({},"0.25rem")),v({},h({},d({},"slds-var-m-*_small")),h({},"0.75rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-m-*_medium")),h({},"1rem"),h({},"0.5rem")),v({},h({},d({},"slds-var-m-*_large")),h({},"1.5rem"),h({},"0.75rem")),v({},h({},d({},"slds-var-m-*_x-large")),h({},"2rem"),h({},"1rem")),v({},h({},d({},"slds-var-m-*_xx-large")),h({},"3rem"),h({},"1.5rem")))))};t.getContents=function(){return(0,i.createTableOfContents)(b())}},6:function(e,t){e.exports=JSBeautify}});