@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
47 lines (45 loc) • 1.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledSeparator = exports.StyledMultiActionButton = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const StyledMultiActionButton = exports.StyledMultiActionButton = (0, _styledComponents.default)(_react.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;
}
`;
const StyledSeparator = exports.StyledSeparator = _styledComponents.default.span`
align-self: stretch;
background: ${({
$gapColor,
theme
}) => $gapColor || (theme === null || theme === void 0 ? void 0 : 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