diff --git a/.storybook/custom/custom.scss b/.storybook/custom/custom.scss
index ac28b3b03e..b8bf4e6907 100644
--- a/.storybook/custom/custom.scss
+++ b/.storybook/custom/custom.scss
@@ -379,6 +379,10 @@ code.docs-code-grey {
height: 100%;
}
+ &--border {
+ border: 2px solid #000000;
+ }
+
&--color-1 {
background-color: #30c5d2;
color: white;
@@ -610,3 +614,69 @@ body.sb-show-main {
height: 20rem;
}
}
+
+.docs-column-flex {
+ display: flex;
+ flex-direction: column;
+
+ &--align-start {
+ align-items: flex-start;
+ }
+}
+
+.docs-layout-margins-paddings {
+ background-color: #3d6299;
+ color: #ffffff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 4rem;
+ text-align: center;
+
+ &--color-13 {
+ background-color: #3d6299;
+ color: white;
+ border: 2px solid red;
+ }
+
+ &--color-14 {
+ background-color: #30c5d2;
+ color: white;
+ border: 2px solid black;
+ }
+
+ &--secondary-bg {
+ background-color: #dbdbdb;
+ display: inline-block;
+ }
+
+ &--padded {
+ padding: 1.5rem;
+ }
+
+ &--margin {
+ margin: 1.5rem;
+ }
+
+ // padding+width = actual width, so specifying different widths to show the backgrounds correctly
+ &--width {
+ width: 19rem; // for tiny 0.5rem each(horizontal padding)+19rem = 20rem total
+
+ &-sm {
+ width: 18rem; // for tiny 1rem each(horizontal padding)+18rem = 20rem total
+ }
+
+ &-md {
+ width: 16rem; // for tiny 2rem each(horizontal padding)+16rem = 20rem total
+ }
+
+ &-lg {
+ width: 14rem; // for tiny 3rem each(horizontal padding)+14rem = 20rem total
+ }
+ }
+}
+
+.fddocs-margin-end-none,
+[dir="rtl"] .fddocs-margin-end-none {
+ margin: 1.5rem;
+}
diff --git a/src/fundamental-styles.scss b/src/fundamental-styles.scss
index 1f872ecad2..7334e06067 100644
--- a/src/fundamental-styles.scss
+++ b/src/fundamental-styles.scss
@@ -31,6 +31,7 @@
@import "./link";
@import "./list-grid";
@import "./list";
+@import "./margins";
@import "./menu";
@import "./message-box";
@import "./message-page";
@@ -40,6 +41,7 @@
@import "./numeric-content";
@import "./object-marker";
@import "./object-status";
+@import "./paddings";
@import "./page";
@import "./pagination";
@import "./panel";
diff --git a/src/margins.scss b/src/margins.scss
new file mode 100644
index 0000000000..e783ea57d9
--- /dev/null
+++ b/src/margins.scss
@@ -0,0 +1,264 @@
+@import "./new-settings";
+@import "./mixins";
+
+$block: #{$fd-namespace}-margin;
+
+.#{$block} {
+ $fd-margin-tiny: 0.5rem;
+ $fd-margin-small: 1rem;
+ $fd-margin-medium: 2rem;
+ $fd-margin-large: 3rem;
+ $fd-margin-negative-tiny: -0.5rem;
+ $fd-margin-negative-small: -1rem;
+ $fd-margin-negative-medium: -2rem;
+ $fd-margin-negative-large: -3rem;
+ $fd-margin-responsive-vertical: 1rem;
+ $fd-margin-responsive-medium: 1rem;
+ $fd-margin-responsive-large: 2rem;
+ $fd-margin-responsive-extra-large: 3rem;
+
+ // margin
+ &--tiny {
+ margin: $fd-margin-tiny !important;
+ }
+
+ &--sm {
+ margin: $fd-margin-small !important;
+ }
+
+ &--md {
+ margin: $fd-margin-medium !important;
+ }
+
+ &--lg {
+ margin: $fd-margin-large !important;
+ }
+
+ &--none {
+ margin: 0 !important;
+ }
+
+ // margin top
+ &-top {
+ &--tiny {
+ margin-top: $fd-margin-tiny !important;
+ }
+
+ &--sm {
+ margin-top: $fd-margin-small !important;
+ }
+
+ &--md {
+ margin-top: $fd-margin-medium !important;
+ }
+
+ &--lg {
+ margin-top: $fd-margin-large !important;
+ }
+
+ &--none {
+ margin-top: 0 !important;
+ }
+ }
+
+ // margin end
+ &-end {
+ &--tiny {
+ margin-right: $fd-margin-tiny !important;
+
+ @include fd-rtl() {
+ margin-left: $fd-margin-tiny !important;
+ margin-right: 0 !important;
+ }
+ }
+
+ &--sm {
+ margin-right: $fd-margin-small !important;
+
+ @include fd-rtl() {
+ margin-left: $fd-margin-small !important;
+ margin-right: 0 !important;
+ }
+ }
+
+ &--md {
+ margin-right: $fd-margin-medium !important;
+
+ @include fd-rtl() {
+ margin-left: $fd-margin-medium !important;
+ margin-right: 0 !important;
+ }
+ }
+
+ &--lg {
+ margin-right: $fd-margin-large !important;
+
+ @include fd-rtl() {
+ margin-left: $fd-margin-large !important;
+ margin-right: 0 !important;
+ }
+ }
+
+ &--none {
+ margin-right: 0;
+
+ @include fd-rtl() {
+ margin-left: 0 !important;
+ }
+ }
+ }
+
+ // margin bottom
+ &-bottom {
+ &--tiny {
+ margin-bottom: $fd-margin-tiny !important;
+ }
+
+ &--sm {
+ margin-bottom: $fd-margin-small !important;
+ }
+
+ &--md {
+ margin-bottom: $fd-margin-medium !important;
+ }
+
+ &--lg {
+ margin-bottom: $fd-margin-large !important;
+ }
+
+ &--none {
+ margin-bottom: 0 !important;
+ }
+ }
+
+ // margin begin
+ &-begin {
+ &--tiny {
+ margin-left: $fd-margin-tiny !important;
+
+ @include fd-rtl() {
+ margin-right: $fd-margin-tiny !important;
+ margin-left: 0 !important;
+ }
+ }
+
+ &--sm {
+ margin-left: $fd-margin-small !important;
+
+ @include fd-rtl() {
+ margin-right: $fd-margin-small !important;
+ margin-left: 0 !important;
+ }
+ }
+
+ &--md {
+ margin-left: $fd-margin-medium !important;
+
+ @include fd-rtl() {
+ margin-right: $fd-margin-medium !important;
+ margin-left: 0 !important;
+ }
+ }
+
+ &--lg {
+ margin-left: $fd-margin-large !important;
+
+ @include fd-rtl() {
+ margin-right: $fd-margin-large !important;
+ margin-left: 0 !important;
+ }
+ }
+
+ &--none {
+ margin-left: 0;
+
+ @include fd-rtl() {
+ margin-right: 0 !important;
+ }
+ }
+ }
+
+ // double-sided top bottom margin
+ &-top-bottom {
+ &--tiny {
+ margin-top: $fd-margin-tiny !important;
+ margin-bottom: $fd-margin-tiny !important;
+ }
+
+ &--sm {
+ margin-top: $fd-margin-small !important;
+ margin-bottom: $fd-margin-small !important;
+ }
+
+ &--md {
+ margin-top: $fd-margin-medium !important;
+ margin-bottom: $fd-margin-medium !important;
+ }
+
+ &--lg {
+ margin-top: $fd-margin-large !important;
+ margin-bottom: $fd-margin-large !important;
+ }
+ }
+
+ // double-sided begin end margin
+ &-begin-end {
+ &--tiny {
+ margin-left: $fd-margin-tiny !important;
+ margin-right: $fd-margin-tiny !important;
+ }
+
+ &--sm {
+ margin-left: $fd-margin-small !important;
+ margin-right: $fd-margin-small !important;
+ }
+
+ &--md {
+ margin-left: $fd-margin-medium !important;
+ margin-right: $fd-margin-medium !important;
+ }
+
+ &--lg {
+ margin-left: $fd-margin-large !important;
+ margin-right: $fd-margin-large !important;
+ }
+ }
+
+ // responsive margin
+ &-responsive {
+ &--sm {
+ margin: 0 0 $fd-margin-responsive-vertical 0 !important;
+ }
+
+ &--md {
+ margin: $fd-margin-responsive-medium !important;
+ }
+
+ &--lg {
+ margin: $fd-margin-responsive-vertical $fd-margin-responsive-large !important;
+ }
+
+ &--xl {
+ margin: $fd-margin-responsive-vertical $fd-margin-responsive-extra-large !important;
+ }
+ }
+
+ // negative margins
+ &-negative-begin-end {
+ &--tiny {
+ margin: 0 $fd-margin-negative-tiny !important;
+ }
+
+ &--sm {
+ margin: 0 $fd-margin-negative-small !important;
+ }
+
+ &--md {
+ margin: 0 $fd-margin-negative-medium !important;
+ }
+
+ &--lg {
+ margin: 0 $fd-margin-negative-large !important;
+ }
+ }
+}
diff --git a/src/paddings.scss b/src/paddings.scss
new file mode 100644
index 0000000000..e7f1d4becc
--- /dev/null
+++ b/src/paddings.scss
@@ -0,0 +1,57 @@
+@import './new-settings';
+@import './mixins';
+
+$block: #{$fd-namespace}-padding;
+
+.#{$block} {
+ $fd-padding-tiny: 0.5rem;
+ $fd-padding-small: 1rem;
+ $fd-padding-medium: 2rem;
+ $fd-padding-large: 3rem;
+ $fd-padding-responsive-horizontal: 1rem;
+ $fd-padding-responsive-medium-large: 2rem;
+ $fd-padding-responsive-extra-large: 3rem;
+
+ padding: 1rem !important;
+
+ &-begin-end {
+ &--tiny {
+ padding-left: $fd-padding-tiny !important;
+ padding-right: $fd-padding-tiny !important;
+ }
+
+ &--sm {
+ padding-left: $fd-padding-small !important;
+ padding-right: $fd-padding-small !important;
+ }
+
+ &--md {
+ padding-left: $fd-padding-medium !important;
+ padding-right: $fd-padding-medium !important;
+ }
+
+ &--lg {
+ padding-left: $fd-padding-large !important;
+ padding-right: $fd-padding-large !important;
+ }
+ }
+
+ &--none {
+ padding: 0 !important;
+ }
+
+ &-responsive {
+ &--sm {
+ padding: 0 $fd-padding-responsive-horizontal !important;
+ }
+
+ &--md,
+ &--lg {
+ padding: 0 $fd-padding-responsive-medium-large !important;
+ }
+
+ &--xl {
+ padding: 0 $fd-padding-responsive-extra-large !important;
+ }
+ }
+}
diff --git a/stories/margins/__snapshots__/margins.stories.storyshot b/stories/margins/__snapshots__/margins.stories.storyshot
new file mode 100644
index 0000000000..e06071a534
--- /dev/null
+++ b/stories/margins/__snapshots__/margins.stories.storyshot
@@ -0,0 +1,827 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layouts/Margins All-Round Margin 1`] = `
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(xl)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
fd-margin
+ class with any of the following modifiers:
+
+| Element | Modifier class | Margin applied |
+| ----------------: | :------------ | :------------ |
+| Tiny | \`fd-margin--tiny\` | 0.5rem |
+| Small | \`fd-margin--sm\` | 1rem |
+| Medium | \`fd-margin--md\` | 2rem |
+| Large | \`fd-margin--lg\` | 3rem |
+`
+ }
+};
+
+export const SingleSidedMarginTop = () => `
+`;
+SingleSidedMarginTop.storyName = 'Single-Sided Margin Top';
+SingleSidedMarginTop.parameters = {
+ docs: {
+ storyDescription: `Single sided margins appear on only one of the sides of the element:
+
+- top - displayed on top of the element
+- end - displayed on the right side and in right-to-left mode on the left side of the element
+- bottom - displayed on the bottom of the element
+- begin - displayed on the left side and in right-to-left mode on the right side of the element.
+
+Use fd-margin-top or fd-margin-end or fd-margin-bottom or fd-margin-begin
+class with any of the size modifiers as mentioned above.
+`
+ }
+};
+
+export const SingleSidedMarginEnd = () => `
+`;
+SingleSidedMarginEnd.storyName = 'Single-Sided Margin End';
+
+export const SingleSidedMarginBottom = () => `
+`;
+SingleSidedMarginBottom.storyName = 'Single-Sided Margin Bottom';
+
+export const SingleSidedMarginBegin = () => `
+`;
+SingleSidedMarginBegin.storyName = 'Single-Sided Margin Begin';
+
+export const DoubleSidedMarginTopBottom = () => `
+`;
+DoubleSidedMarginTopBottom.storyName = 'Double-Sided Margin Top-Bottom';
+DoubleSidedMarginTopBottom.parameters = {
+ docs: {
+ storyDescription: `Double sided margins appear on two opposite sides of the element.
+
+- top-bottom - displayed on top and bottom of the element
+- begin-end - displayed on left and right side of the element
+
+Use fd-margin-top-bottom or fd-margin-begin-end class with any of the size modifiers as mentioned above.`
+ }
+};
+
+export const DoubleSidedMarginBeginEnd = () => `
+`;
+DoubleSidedMarginBeginEnd.storyName = 'Double-Sided Margin Begin-End';
+
+export const NoMargin = () => `
+`;
+NoMargin.parameters = {
+ docs: {
+ storyDescription: `No margin classes remove existing container margins. Use fd-margin--none or fd-margin-top--none
+ or fd-margin-end--none or fd-margin-bottom--none or fd-margin-begin--none
+ modifier classes to remove existing margin. Place the no margin classes last to make sure they will be applied.
+ In the case of fd-margin-begin--none and fd-margin-end--none, !important is not applied since we want
+ the user-specified margins(if any) to be reapplied in the RTL mode. Please note that for RTL to work correctly,
+ you must add [dir="rtl"] style on the class where these modifiers will be applied.`
+ }
+};
+
+export const ResponsiveMargin = () => `
+`;
+ResponsiveMargin.parameters = {
+ docs: {
+ storyDescription: `The responsive margins class adds a margin around an element based on the width of the container the element is in. Use fd-margin-responsive
+ class with any of the following modifiers:
+
+| Element | Modifier class |
+| ----------------: | :------------ |
+| Small | \`fd-margin-responsive--sm\` |
+| Medium | \`fd-margin-responsive--md\` |
+| Large | \`fd-margin-responsive--lg\` |
+| Extra-large | \`fd-margin-responsive--xl\` |
+`
+ }
+};
+
+export const DoubleSidedNegativeMarginBeginEnd = () => `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
fd-margin-negative-begin-end class with any of the size modifiers as mentioned above.`
+ }
+};
diff --git a/stories/paddings/__snapshots__/paddings.stories.storyshot b/stories/paddings/__snapshots__/paddings.stories.storyshot
new file mode 100644
index 0000000000..9d019b5714
--- /dev/null
+++ b/stories/paddings/__snapshots__/paddings.stories.storyshot
@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layouts/Paddings All-Round Padding 1`] = `
+
+
+
+
+
+
+
+ container
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(tiny)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(sm)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(md)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(lg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+ container(xl)
+
+
+
+
+
+
+
fd-padding
+ class to apply a padding of 1rem.`
+ }
+};
+
+export const DoubleSidedPadding = () => `
+`;
+DoubleSidedPadding.storyName = 'Double-Sided Padding';
+DoubleSidedPadding.parameters = {
+ docs: {
+ storyDescription: `Double sided paddings appear on two opposite sides of the element. Use fd-padding-begin-end
+ class with any of the following modifiers:
+
+| Element | Modifier class |
+| ----------------: | :------------ |
+| Tiny | \`fd-padding-begin-end--tiny\` |
+| Small | \`fd-padding-begin-end--sm\` |
+| Medium | \`fd-padding-begin-end--md\` |
+| Large | \`fd-padding-begin-end--lg\` |
+`
+ }
+};
+
+
+export const NoPadding = () => `
+`;
+NoPadding.parameters = {
+ docs: {
+ storyDescription: `No padding classes remove existing container paddings. Use fd-padding--none
+ modifier to remove existing padding. Place the no padding classes last to make sure they will be applied.`
+ }
+};
+
+export const ResponsivePadding = () => `
+`;
+ResponsivePadding.parameters = {
+ docs: {
+ storyDescription: `The responsive padding class adds a double sided padding inside a container based on its width. Use fd-padding-responsive
+ class with any of the following modifiers:
+
+| Element | Modifier class |
+| ----------------: | :------------ |
+| Small | \`fd-padding-responsive--sm\` |
+| Medium | \`fd-padding-responsive--md\` |
+| Large | \`fd-padding-responsive--lg\` |
+| Extra-large | \`fd-padding-responsive--xl\` |
+`
+ }
+};