apphouse/dist/styles/defaults/misc.styles.ts

Component library for React that uses observable state management and theme-able components.

import { RgbaColor } from '../../themes/utils/color.interface';
import ColorUtils from '../../themes/utils/color.utils';

interface HalfAndHalfBackground {
  /**
   * @default 20
   */
  size?: number;
  rgbaColor?: RgbaColor;
  radius?: number | string;
  rgbaColorOther?: RgbaColor;
  /**
   * @default 45
   */
  angle?: number;
}
/**
 *
 * @param size size of background
 * @param rgbaColor color with opacity to be split in half
 * @returns
 */
export const getHalfAndHalfColorBackgroundStyles = ({
  size = 20,
  rgbaColor,
  rgbaColorOther,
  radius = '50%',
  angle = 45
}: HalfAndHalfBackground) => {
  const color = rgbaColor || {
    r: 255,
    g: 255,
    b: 255,
    a: 0
  };
  const transform = `rotate(${angle}deg)`;
  const colorOther =
    ColorUtils.toRgbaStringFromRgbaObject(rgbaColorOther) ||
    ColorUtils.toRgbaStringFromRgbaObject(color);
  const backgroundBefore = ColorUtils.toRgbaStringFromRgbaObject(color);
  const backgroundAfter = colorOther;
  const height = angle < 45 ? '100%' : '50%';
  const width = angle >= 45 ? '100%' : '50%';
  const emptyContentStyles = {
    content: "''",
    position: 'absolute',
    height,
    width
  };
  const opacityColorStyle = {
    display: 'inline-block',
    border: 0,
    width: size,
    height: size,
    borderRadius: radius,
    overflow: 'hidden',
    transform,

    ':before': {
      ...emptyContentStyles,
      background: backgroundBefore,
      top: '0px',
      right: '0px'
    },
    ':after': {
      ...emptyContentStyles,
      background: backgroundAfter,
      left: '0px'
    }
  };
  return opacityColorStyle;
};

export const MarkerStyle = {
  width: '0',
  height: '0',
  border: '25px solid transparent',
  borderBottomColor: '#333',
  position: 'relative',
  top: '-25px',
  ':after': {
    content: "''",
    position: 'absolute',
    left: '-25px',
    top: '25px',
    width: '0',
    height: '0',
    border: '25px solid transparent',
    borderTopColor: '#333'
  }
};

export const NeedHeadStyle = {
  base: {
    background: '#333',
    display: 'inline-block',
    height: '27.5px',
    position: 'relative',
    width: '50px'
  },
  ':before': {
    borderBottom: '17.5px solid #333',
    borderLeft: '25px solid transparent',
    borderRight: '25px solid transparent',
    content: "'",
    height: '0',
    left: '0',
    position: 'absolute',
    top: '-17.5px',
    width: '0'
  }
};