Skip to content

Commit

Permalink
feat(popover): m3 tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 11, 2022
1 parent 8c1b1c1 commit 1165339
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 14 deletions.
19 changes: 9 additions & 10 deletions src/shared/classes/PopoverClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ export const PopoverClasses = (props, colors, classes) => {
return {
base: {
common: cls(
'transition-transform-opacity duration-300 z-40 no-safe-areas',
'transition-transform-opacity z-40 no-safe-areas',
positionClass('fixed', classes),
size
),
ios: '',
material: '',
ios: 'duration-300',
material: 'duration-400 ease-material-in',
opened: '',
closed: {
common: 'opacity-0 pointer-events-none',
Expand All @@ -20,9 +20,9 @@ export const PopoverClasses = (props, colors, classes) => {
},
},
inner: {
common: cls('overflow-hidden relative', colors.bg),
ios: cls('rounded-xl', translucent && 'translucent'),
material: 'rounded shadow-lg',
common: cls('overflow-hidden relative'),
ios: cls('rounded-xl', translucent && 'translucent', colors.bgIos),
material: cls('rounded-[1.75rem] shadow-lg', colors.bgMaterial),
},
angleWrap: {
common: cls(angleClassName || angleClass || ''),
Expand All @@ -37,10 +37,9 @@ export const PopoverClasses = (props, colors, classes) => {
right: 'left-full',
},
angleArrow: {
common: cls(
colors.bg,
'absolute rounded w-full h-full transform rotate-45'
),
common: cls('absolute rounded w-full h-full transform rotate-45'),
ios: colors.bgIos,
material: colors.bgMaterial,
bottom: '-top-4.75',
top: 'top-4.75',
left: 'left-4.75',
Expand Down
6 changes: 3 additions & 3 deletions src/shared/classes/PopupClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export const PopupClasses = (props, colors, classes) => {
return {
base: {
common: cls(
'left-1/2 top-1/2 transition-transform transform -translate-x-1/2 duration-400 z-40 md:rounded max-w-full max-h-full overflow-hidden md:no-safe-areas',
'left-1/2 top-1/2 transition-transform transform -translate-x-1/2 z-40 max-w-full max-h-full overflow-hidden md:no-safe-areas',
colors.bg,
positionClass('fixed', classes),
size
),
ios: '',
material: 'shadow-2xl',
ios: 'duration-400 md:rounded-lg',
material: 'duration-400 md:rounded-[1.75rem]',
opened: '-translate-y-1/2',
closed: 'translate-y-full',
},
Expand Down
3 changes: 2 additions & 1 deletion src/shared/colors/PopoverColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { cls } from '../cls.js';

export const PopoverColors = (colorsProp = {}, dark) => {
return {
bg: cls('bg-popover-light', dark('dark:bg-popover-dark')),
bgIos: cls('bg-popover-light', dark('dark:bg-popover-dark')),
bgMaterial: cls('bg-md-light-surface-3', dark('dark:bg-md-dark-surface-3')),
...colorsProp,
};
};

0 comments on commit 1165339

Please sign in to comment.