fix(components): refine ModalFooter styles on mobile

beta
sumup-oss · Jul 28, 2020 · a9cb1c6 · a9cb1c6
1 parent c04db1b
commit a9cb1c6
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 29 deletions.
diff --git 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);
+  }
+}
+
 <div
   class="circuit-8"
 >

diff --git 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
@@ -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
@@ -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);
+  }
+}
+
 <footer
   class="circuit-0"
 />