@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
38 lines (37 loc) • 1.05 kB
JavaScript
import styled, { css } from 'styled-components';
import { motion } from 'motion/react';
import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
export const StyledHighlightSliderItem = styled.div`
overflow: hidden;
position: relative;
width: 100%;
height: 4px;
border-radius: 4px;
cursor: pointer;
${({
$shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
&:focus-visible {
${keyboardFocusHighlightingRingCss}
}
`}
`;
export const StyledHighlightSliderItemProgress = styled(motion.div)`
height: 4px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: ${({
$backgroundColor
}) => $backgroundColor};
`;
export const StyledHighlightSliderItemBackground = styled(motion.div)`
height: 4px;
width: 100%;
border-radius: 2px;
background-color: ${({
$backgroundColor
}) => $backgroundColor};
`;
//# sourceMappingURL=HighlightSliderItem.styles.js.map