JavaScript lib/css prefix Examples

Example #1

File: Segment.js Project: madou/armory-react

const Segment = ({ color, rotationOffset, centralAngle }: SegmentProps) => {
  const skew = MAX_SEGMENT_DEG - centralAngle;

  return (
    <div
      className={styles.segment}
      style={prefix('transform', `rotate(${rotationOffset}deg) skewY(${skew * -1}deg)`)}
    >
      <div
        className={styles.segmentContent}
        style={prefix('transform', `skewY(${skew}deg) rotate(-${rotationOffset}deg)`)}
      >
        <div
          className={styles.segmentBg}
          style={prefix('filter', `hue-rotate(${colorHueDegrees[color]}deg)`)}
        />
      </div>
    </div>
  );
};

Example #2

File: index.js Project: madou/armory-react

function calcBarStyles(current, max, barColor, vertical) {
  const percent = max ? Math.ceil((current / max || 0) * 100) : 0;

  return {
    width: '100%',
    backgroundColor: barColor,
    ...prefix(
      'transform',
      vertical ? `translateY(${101 - percent}%)` : `translateX(${percent - 100}%)`
    ),
  };
}

Example #3

File: Divider.js Project: madou/armory-react

const Divider = ({ rotationOffset }: { rotationOffset: number }) => (
  <div className={styles.divider} style={prefix('transform', `rotate(${rotationOffset}deg)`)} />
);