diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index cc1232a038..e5bb4d97ea 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -4918,13 +4918,6 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
display: block;
width: 100%;
margin-top: 24px;
- position: -webkit-sticky;
- position: sticky;
- bottom: 0;
- margin-top: 0;
- padding-top: 24px;
- padding-bottom: 12px;
- background: #FFFFFF;
}
@media (min-width:480px) {
@@ -4950,6 +4943,29 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
}
}
+@media (max-width:479px) {
+ .circuit-7 {
+ position: -webkit-sticky;
+ position: sticky;
+ bottom: 0;
+ margin: 0 -16px;
+ padding: 16px;
+ width: calc(100% + 2 * 16px);
+ background: #FFFFFF;
+ }
+
+ .circuit-7::before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: -24px;
+ right: 0;
+ width: 100%;
+ height: 24px;
+ background: linear-gradient(transparent,#FFFFFF);
+ }
+}
+
diff --git a/src/components/Card/components/Footer/Footer.js b/src/components/Card/components/Footer/Footer.js
index fcc5759d9c..edfbaa541d 100644
--- a/src/components/Card/components/Footer/Footer.js
+++ b/src/components/Card/components/Footer/Footer.js
@@ -17,15 +17,6 @@ import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { css } from '@emotion/core';
-const alignmentStyles = ({ theme, align }) =>
- align === 'right' &&
- css`
- label: card__footer--right;
- ${theme.mq.kilo} {
- justify-content: flex-end;
- }
- `;
-
const baseStyles = ({ theme }) => css`
label: card__footer;
display: block;
@@ -39,6 +30,15 @@ const baseStyles = ({ theme }) => css`
}
`;
+const alignmentStyles = ({ theme, align }) =>
+ align === 'right' &&
+ css`
+ label: card__footer--right;
+ ${theme.mq.kilo} {
+ justify-content: flex-end;
+ }
+ `;
+
/**
* Footer used in the Card component. Used for styling and aligment
* purposes only.
diff --git a/src/components/Modal/components/ModalFooter/ModalFooter.tsx b/src/components/Modal/components/ModalFooter/ModalFooter.tsx
index 14ac9d3519..2dba9d2b97 100644
--- a/src/components/Modal/components/ModalFooter/ModalFooter.tsx
+++ b/src/components/Modal/components/ModalFooter/ModalFooter.tsx
@@ -19,12 +19,25 @@ import styled, { StyleProps } from '../../../../styles/styled';
import { CardFooter } from '../../../Card';
const footerStyles = ({ theme }: StyleProps) => css`
- position: sticky;
- bottom: 0;
- margin-top: 0;
- padding-top: ${theme.spacings.giga};
- padding-bottom: ${theme.spacings.kilo};
- background: ${theme.colors.white};
+ ${theme.mq.untilKilo} {
+ position: sticky;
+ bottom: 0;
+ margin: 0 -${theme.spacings.mega};
+ padding: ${theme.spacings.mega};
+ width: calc(100% + 2 * ${theme.spacings.mega});
+ background: ${theme.colors.white};
+
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: -${theme.spacings.giga};
+ right: 0;
+ width: 100%;
+ height: ${theme.spacings.giga};
+ background: linear-gradient(transparent, ${theme.colors.white});
+ }
+ }
`;
// FIXME: Remove any typecast once the Card has been migrated to TypeScript.
diff --git a/src/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap b/src/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap
index ef99e747d9..7f35f1a157 100644
--- a/src/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap
+++ b/src/components/Modal/components/ModalFooter/__snapshots__/ModalFooter.spec.tsx.snap
@@ -5,13 +5,6 @@ exports[`ModalFooter should render with default styles 1`] = `
display: block;
width: 100%;
margin-top: 24px;
- position: -webkit-sticky;
- position: sticky;
- bottom: 0;
- margin-top: 0;
- padding-top: 24px;
- padding-bottom: 12px;
- background: #FFFFFF;
}
@media (min-width:480px) {
@@ -37,6 +30,29 @@ exports[`ModalFooter should render with default styles 1`] = `
}
}
+@media (max-width:479px) {
+ .circuit-0 {
+ position: -webkit-sticky;
+ position: sticky;
+ bottom: 0;
+ margin: 0 -16px;
+ padding: 16px;
+ width: calc(100% + 2 * 16px);
+ background: #FFFFFF;
+ }
+
+ .circuit-0::before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: -24px;
+ right: 0;
+ width: 100%;
+ height: 24px;
+ background: linear-gradient(transparent,#FFFFFF);
+ }
+}
+