WV-360 Fixed styling issues on tablet/desktop

wevote · Aug 21, 2024 · 0cb34ca · 0cb34ca
1 parent 6a781f8
commit 0cb34ca
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/js/common/components/Style/ScrollingStyles.jsx b/src/js/common/components/Style/ScrollingStyles.jsx
@@ -2,8 +2,8 @@ import styled from 'styled-components';
 import DesignTokenColors from './DesignTokenColors';
 
 export const BallotHorizontallyScrollingContainer = styled('div', {
-  shouldForwardProp: (prop) => !['isChosen'].includes(prop),
-})(({ isChosen }) => (`
+  shouldForwardProp: (prop) => !['isChosen', 'showLeftGradient', 'showRightGradient'].includes(prop),
+})(({ isChosen, showLeftGradient, showRightGradient }) => (`
   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
   mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
 
@@ -14,6 +14,19 @@ export const BallotHorizontallyScrollingContainer = styled('div', {
   &:hover { border: 1px solid ${DesignTokenColors.neutralUI100}; }
   ${isChosen ? `background-color: ${DesignTokenColors.confirmation50};` : ''}
 
+    /* Fade out, right side */
+  ${showRightGradient ? '-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0));' : ''}
+  ${showRightGradient ? 'mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0));' : ''} );
+
+  /* Fade out, left side */
+  ${showLeftGradient ? '-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0));' : ''}
+  ${showLeftGradient ? 'mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0));' : ''}
+
+  /* Fade out, both sides */
+  ${showLeftGradient && showRightGradient ? '-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0));' : ''}
+  ${showLeftGradient && showRightGradient ? 'mask-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0));' : ''}
+
+
   /* Make the scrollbar not be visible */
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
@@ -25,6 +38,7 @@ export const BallotHorizontallyScrollingContainer = styled('div', {
 export const BallotScrollingInnerWrapper = styled('div')`
   overflow-x: hidden;
   overflow-y: hidden;
+  display: flex;
 `;
 
 export const BallotScrollingOuterWrapper = styled('div')`