Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 1x 1x 21x 21x 1x 1x 20x 1x 21x 18x 1x 21x 21x 21x 1x 21x 1x 21x 2x 21x 4x 21x 1x 21x 1x 21x 9x 21x 1x 1x 1x | import styled, { keyframes, css } from "styled-components";
import { isValidStyleColor, matchRgba, getRgba } from "./helpers";
export const colors = {
base: "#eee",
highlight: "#f5f5f5",
highlightTranslucent: "#f5f5f54D",
};
const getLinerGradient = (baseColor, highlightColor) => {
const isRgba = matchRgba(baseColor);
if (isRgba) {
const highlight = getRgba(baseColor, 0);
return css`
background-image: linear-gradient(90deg, ${highlight}, ${baseColor});
`;
}
return css`
background-image: linear-gradient(
90deg,
${baseColor},
${highlightColor},
${baseColor}
);
`;
};
const getRadiusStyle = ({ radius, circle }) => {
if (circle) return ``;
return css`
border-radius: ${radius ? `${radius}px` : "4px"};
`;
};
const getColorStyle = ({ color, translucent }) => {
const baseColor = isValidStyleColor(color) ? color : colors.base;
const highlightColor =
baseColor === colors.base ? colors.highlight : colors.highlightTranslucent;
return css`
opacity: ${translucent ? 0.3 : 1};
background-color: ${baseColor};
${getLinerGradient(baseColor, highlightColor)}
`;
};
const getCircularStyle = ({ circle }) =>
circle &&
css`
border-radius: 50%;
`;
const getSkeletonHeight = ({ height, circle, width }) => {
if (circle && width) {
height = width;
}
if (typeof height === "number") {
height = `${height}px`;
}
return css`
height: ${height || "100%"};
`;
};
const getSkeletonWidth = ({ width, circle, height }) => {
if (!width && circle && height) {
width = height;
}
if (typeof width === "number") {
width = `${width}px`;
}
return css`
width: ${width || "100%"};
`;
};
export const skeletonKeyframe = keyframes`
0% {
background-position: -220px 0;
}
100% {
background-position: calc(220px + 100%) 0;
}
`;
export const Line = styled.span`
&&& {
display: block;
margin: 0 0 4px 0;
background-size: 220px 100%;
background-repeat: no-repeat;
line-height: 1.5;
min-height: 16px;
animation: ${skeletonKeyframe} 1.5s ease-in-out infinite;
${getRadiusStyle}
${getCircularStyle}
${getSkeletonHeight}
${getSkeletonWidth}
${getColorStyle}
}
`;
export const Container = styled.div`
&&& {
display: flex;
align-items: center;
> span {
margin-right: 10px;
}
}
`;
|