Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Mixin Resultant CSS $value @include sap-set-padding-all($value) padding: $value; defined by the user @include sap-set-padding-top($value) padding-block-start: $value; defined by the user @include sap-set-padding-bottom($value) padding-block-end: $value; defined by the user @include sap-set-padding-begin($value) padding-inline-start: $value; defined by the user @include sap-set-padding-end($value) padding-inline-end: $value; defined by the user @include sap-set-padding-x-equal($value) padding-inline: $value; defined by the user @include sap-set-padding-y-equal($value) padding-block: $value; defined by the user @include sap-set-padding-x($valueLeft, $valueRight) padding-inline-start: $valueLeft;padding-inline-end: $valueRight; defined by the user @include sap-set-padding-y($valueTop, $valueBottom) padding-block-start: $valueTop;padding-block-end: $valueBottom; defined by the user @include sap-padding($value, $side) based on parameters $value: tiny, small, medium, large or defined by the user $side: top, bottom, begin, end, x, y, inline, block, inline-start, inline-end, block-start, block-end

    .custom-card {
    background: var(--sapBackgroundColor);
    width: 4rem;
    height: 6rem;

    @include sap-set-padding-x(1.5rem);
    @include sap-set-padding-y(0.25rem);
    }