set mobilePageOffset to 36 in tablet

Telefonica · Sep 20, 2023 · 83a76e9 · 83a76e9
1 parent f2d97a5
commit 83a76e9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/carousel.css.ts b/src/carousel.css.ts
@@ -113,6 +113,7 @@ export const vars = {
 export const DEFAULT_DESKTOP_GAP = 16;
 const DEFAULT_MOBILE_GAP = 8;
 const DEFAULT_MOBILE_PAGE_OFFSET = '16px';
+const DEFAULT_TABLET_PAGE_OFFSET = '36px';
 
 export const carousel = style([
     hideScrollbar,
@@ -129,6 +130,11 @@ export const carousel = style([
         },
 
         '@media': {
+            [mq.tablet]: {
+                vars: {
+                    [mobilePageOffset]: DEFAULT_TABLET_PAGE_OFFSET,
+                },
+            },
             [mq.desktopOrBigger]: {
                 vars: {
                     [gap]: String(DEFAULT_DESKTOP_GAP),

diff --git a/src/carousel.tsx b/src/carousel.tsx
@@ -16,6 +16,7 @@ import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {sprinkles} from './sprinkles.css';
 import {useDesktopContainerType} from './desktop-container-type-context';
 import {VIVO_NEW_SKIN} from './skins/constants';
+import {mobile} from './media-queries.css';
 
 import type {DesktopContainerType} from './desktop-container-type-context';
 import type {DataAttributes} from './utils/types';
@@ -376,7 +377,7 @@ const BaseCarousel: React.FC<BaseCarouselProps> = ({
     }
 
     const largePageOffset = '64px';
-    const regularPageOffset = skinName === VIVO_NEW_SKIN ? '36px' : '16px';
+    const vivoNewMobilePageOffset = '36px';
 
     return (
         <Stack space={24} dataAttributes={{'component-name': 'Carousel', ...dataAttributes}}>
@@ -401,8 +402,11 @@ const BaseCarousel: React.FC<BaseCarouselProps> = ({
                             [styles.vars.itemsPerPageDesktop]: String(itemsPerPageConfig.desktop),
                             [styles.vars.itemsPerPageTablet]: String(itemsPerPageConfig.tablet),
                             [styles.vars.itemsPerPageMobile]: String(itemsPerPageConfig.mobile),
-                            [styles.vars.mobilePageOffset]:
-                                mobilePageOffset === 'large' ? largePageOffset : regularPageOffset,
+                            ...(mobilePageOffset === 'large'
+                                ? {[styles.vars.mobilePageOffset]: largePageOffset}
+                                : skinName === VIVO_NEW_SKIN
+                                ? {[styles.vars.mobilePageOffset]: vivoNewMobilePageOffset}
+                                : {}),
                             ...(gap !== undefined ? {[styles.vars.gap]: String(gap)} : {}),
                         }),
                         scrollSnapType: free ? 'initial' : 'x mandatory',

diff --git a/src/fixed-footer-layout.css.ts b/src/fixed-footer-layout.css.ts
@@ -47,6 +47,7 @@ export const withoutFooter = sprinkles({display: 'none'});
 export const container = style({
     '@media': {
         [mq.tabletOrSmaller]: {
+            isolation: 'isolate',
             paddingBottom: footerHeight,
             background: fallbackVar(backgroundColor, skinVars.colors.background),
         },