apphouse/dist/styles/helpers.ts

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

import { CSSProperties } from 'glamor';
import { toRems } from '../utils/units/toRems';
/**
 * This file contains style snippets that can be used to satisfy common
 * requirements.
 */

/**
 * Fill parent height style
 * If you apply this style to an element, as long as the parent element has a
 * defined height, the element will fill the parent's height.
 * NOTE: Parent must have a defined height and position must be relative.
 * Use: allowChildToFillParentHeightStyle on parent
 */
export const fillParentHeightStyle: CSSProperties = {
  position: 'absolute',
  top: 0,
  bottom: 0,
  left: 0,
  right: 0
};

/**
 * Helper to allow child to fill parent height
 * @param fixedHeight the height of the element, must be a fixed height for it to work
 * @returns CSSProperties
 */
export const getAllowChildToFillParentHeightStyle = (
  fixedHeight: string | number
): CSSProperties => ({
  position: 'relative',
  height: typeof fixedHeight === 'number' ? `${fixedHeight}px` : fixedHeight
});

export const truncateWithEllipsis = (width: number): CSSProperties => {
  return {
    width: toRems(width),
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  };
};