@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
40 lines (39 loc) • 1.01 kB
JavaScript
import { motion } from 'motion/react';
import styled from 'styled-components';
export const StyledMultiActionButton = styled(motion.div)`
align-items: stretch;
display: inline-flex;
max-width: 100%;
min-width: 0;
overflow: hidden;
position: relative;
transition: width 0.2s ease;
width: fit-content;
/* Keep normal clipping, but let focus-ring paint outside while focused. */
&:focus-within {
overflow: visible;
z-index: 10;
}
`;
export const StyledSeparator = styled.span`
align-self: stretch;
background: ${({
$gapColor,
theme
}) => $gapColor || theme?.['cw-body-background'] || '#fff'};
flex: 0 0 ${({
$isHidden
}) => $isHidden ? 0 : 1}px;
opacity: ${({
$isHidden
}) => $isHidden ? 0 : 1};
overflow: hidden;
transition:
flex-basis 0.2s ease,
opacity 0.2s ease,
width 0.2s ease;
width: ${({
$isHidden
}) => $isHidden ? 0 : 1}px;
`;
//# sourceMappingURL=MultiActionButton.styles.js.map