@material-ui/styles#CSSProperties TypeScript Examples

The following examples show how to use @material-ui/styles#CSSProperties. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Text.tsx    From binaural-meet with GNU General Public License v3.0 6 votes vote down vote up 
cssText: CSSProperties = {
  height: '100%',
  width: '100%',
  whiteSpace: 'pre-line',
  pointerEvents: 'auto',
  overflowY: 'auto',
  overflowX: 'visible',
  wordWrap: 'break-word',
}
Example #2
Source File: Rating.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
useStyles = makeStyles((theme: BackstageTheme) => {
  const commonCardRating: CSSProperties = {
    height: theme.spacing(3),
    width: theme.spacing(3),
    color: theme.palette.common.white,
  };

  return {
    ratingDefault: {
      ...commonCardRating,
      background: theme.palette.status.aborted,
    },
    ratingA: {
      ...commonCardRating,
      background: theme.palette.status.ok,
    },
    ratingB: {
      ...commonCardRating,
      background: lighten(theme.palette.status.ok, 0.5),
    },
    ratingC: {
      ...commonCardRating,
      background: theme.palette.status.pending,
    },
    ratingD: {
      ...commonCardRating,
      background: theme.palette.status.warning,
    },
    ratingE: {
      ...commonCardRating,
      background: theme.palette.error.main,
    },
  };
})
Example #3
Source File: Text.tsx    From binaural-meet with GNU General Public License v3.0 5 votes vote down vote up 
TextDiv: React.FC<TextDivProps> = (props:TextDivProps) => {
  const timestamp = formatTimestamp(props.text.time)    //  make formated timestamp for tooltip
  const rgb = props.text.color?.length ? props.text.color : getRandomColorRGB(props.text.name)
  const textColor = props.text.textColor?.length ? props.text.textColor : findTextColorRGB(rgb)
  const css:CSSProperties = {
    color: rgba(textColor, 1),
    backgroundColor:settings.useTransparent ? rgba(rgb, 0.5) : rgba(rgb, 1),
    padding:'0.1em',
    fontSize: 16,
    lineHeight: 1.2,
    width:'100%',
    overflow: 'clip',
    boxSizing: 'border-box',
    whiteSpace: 'pre-wrap',
    wordWrap: 'break-word',
    overflowWrap: 'break-word',
  }
  const {backgroundColor, ...cssEdit} = css
  cssEdit.backgroundColor = rgba(rgb, 1)

  return <Tooltip title={<React.Fragment>{props.text.name} <br /> {timestamp}</React.Fragment>}
  placement="left" arrow={true} suppressContentEditableWarning={true}><div>
  {props.textEditing ? <TextEdit {...props} css={cssEdit} /> :
  <div style={css}
    //  Select text by static click
    onPointerDown={()=>{ props.member.isStatic = true }}
    onPointerMove={()=>{ props.member.isStatic = false }}
    onPointerUp={(ev)=>{
      if (!props.member.isStatic){ return }
      const target = ev.target
      if (target instanceof Node){
        ev.preventDefault()
        const selection = window.getSelection()
        if (selection){
          if (selection.rangeCount && selection.getRangeAt(0).toString()){
            selection.removeAllRanges()
          }else{
            const range = document.createRange()
            range.selectNode(target)
            selection.removeAllRanges()
            selection.addRange(range)
          }
        }
      }
    }}
  >
    {props.textToShow}
  </div>}
  </div></Tooltip>
}
Example #4
Source File: server.ts    From clearflask with Apache License 2.0 5 votes vote down vote up 
cssBlurry: Record<string, string | CSSProperties> = {
  color: 'transparent',
  textShadow: '3px 0px 6px rgba(0,0,0,0.8)',
}
Example #5
Source File: Orbit.tsx    From react-planet with MIT License 5 votes vote down vote up 
orbitDefaultStyle: CSSProperties | CreateCSSProperties<{}> = {
	position: 'absolute',
	borderRadius: '100%',
	borderWidth: 2,
	borderStyle: 'dotted',
	borderColor: 'lightgrey',
	zIndex: 0,
}