71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
|
import styled from "styled-components";
|
||
|
|
import { hexToRgb } from "utils/AppsmithUtils";
|
||
|
|
|
||
|
|
export default styled.span<{
|
||
|
|
animate?: boolean;
|
||
|
|
width?: number;
|
||
|
|
height?: number;
|
||
|
|
color?: string;
|
||
|
|
}>`
|
||
|
|
&&& {
|
||
|
|
display: block;
|
||
|
|
width: ${props => props.width || 8}px;
|
||
|
|
height: ${props => props.height || 8}px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: ${props => props.color || props.theme.colors.notification};
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 0 0 0
|
||
|
|
rgba(
|
||
|
|
${props => {
|
||
|
|
const rgb = hexToRgb(props.color || props.theme.colors.notification);
|
||
|
|
return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
||
|
|
}},
|
||
|
|
0.4
|
||
|
|
);
|
||
|
|
animation: ${props => (!!props.animate ? "pulse 2s infinite" : "")};
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0% {
|
||
|
|
box-shadow: 0 0 0 0
|
||
|
|
rgba(
|
||
|
|
${props => {
|
||
|
|
const rgb = hexToRgb(
|
||
|
|
props.color || props.theme.colors.notification,
|
||
|
|
);
|
||
|
|
return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
||
|
|
}},
|
||
|
|
0.4
|
||
|
|
);
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
box-shadow: 0 0 0 15px
|
||
|
|
rgba(
|
||
|
|
${props => {
|
||
|
|
const rgb = hexToRgb(
|
||
|
|
props.color || props.theme.colors.notification,
|
||
|
|
);
|
||
|
|
return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
||
|
|
}},
|
||
|
|
0
|
||
|
|
);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
box-shadow: 0 0 0 0
|
||
|
|
rgba(
|
||
|
|
${props => {
|
||
|
|
const rgb = hexToRgb(
|
||
|
|
props.color || props.theme.colors.notification,
|
||
|
|
);
|
||
|
|
return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
||
|
|
}},
|
||
|
|
0
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|