styled-components#CSSProperties TypeScript Examples

The following examples show how to use styled-components#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: LoginStart.tsx    From anthem with Apache License 2.0 6 votes vote down vote up 
getCardButtonStyles = (isDesktop: boolean): React.CSSProperties => {
  const dimensions = isDesktop
    ? {
        width: 190,
        height: 190,
      }
    : {
        width: 145,
        height: 145,
      };

  return {
    ...dimensions,
    margin: 12,
    borderRadius: 0,
    display: "flex",
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center",
    borderColor: COLORS.CARD_BORDER,
  };
}
Example #2
Source File: LayoutCellElement.tsx    From react-editor-kit with MIT License 6 votes vote down vote up 
LayoutCellElement = (props: RenderElementProps) => {
  const { attributes, element, children, ...rest } = props;
  let otherStyle: CSSProperties = (rest as any).style || {};
  return (
    <div
      {...attributes}
      className="rek-layout-cell"
      style={{ width: `${element.width}%`, ...otherStyle }}
      id={element.id}
    >
      {children}
    </div>
  );
}
Example #3
Source File: TextField.styles.ts    From natds-rn with ISC License 6 votes vote down vote up 
Input = styled.TextInput<InputStyleProps & CSSProperties>`
  ${({
    disabled, hasActionIcon, readonly, size, theme, multiline = false
  }: InputStyleProps) => css`
    background-color: ${readonly ? getReadonlyColor(theme) : getColorSurface(theme)};
    border-radius: ${theme.textField.borderRadius}px;
    color: ${getTextColor(disabled, theme)};
    flex-grow: 1;
    font-family: ${theme.textField.content.primary.fontFamily};
    font-size: ${theme.textField.content.fontSize}px;
    font-weight: ${theme.textField.content.primary.fontWeight};
    letter-spacing: ${theme.textField.content.letterSpacing}px;
    max-width: 100%;
    ${multiline && `line-height: ${theme.textField.content.fontSize * theme.textField.content.lineHeight}px;`};
    min-height: ${getFieldHeight(size, theme)}px;
    overflow: hidden;
    padding-left: ${getSpacingSmall(theme)}px;
    padding-right: ${hasActionIcon ? 0 : getSpacingSmall(theme)}px;
    width: 10px;
  `}
`
Example #4
Source File: MultiplierArrow.tsx    From glide-frontend with GNU General Public License v3.0 5 votes vote down vote up 
MultiplierArrow: React.FC<MultiplierArrowProps> = ({
  betAmount,
  multiplier,
  hasEntered = false,
  hasClaimed = false,
  betPosition = BetPosition.BULL,
  isDisabled = false,
  isActive = false,
}) => {
  const { t } = useTranslation()
  const upColor = getTextColor('success')(isActive, isDisabled)
  const downColor = getTextColor('failure')(isActive, isDisabled)
  const textColor = getTextColor()(isActive, isDisabled)
  const multiplierText = (
    <Box>
      <Flex justifyContent="center" height="14px">
        <Text fontSize="14px" color={textColor} bold lineHeight="14x">
          {multiplier !== undefined ? `${multiplier}x` : '-'}
        </Text>
        <Text fontSize="14px" color={textColor} lineHeight="14x" ml="4px">
          {t('Payout')}
        </Text>
      </Flex>
    </Box>
  )

  const getEnteredTag = (position: CSSProperties) => {
    if (!hasEntered) {
      return null
    }

    return (
      <EnteredTagWrapper style={position}>
        <EnteredTag amount={betAmount} hasClaimed={hasClaimed} />
      </EnteredTagWrapper>
    )
  }

  if (betPosition === BetPosition.BEAR) {
    return (
      <Box mt="-1px" position="relative">
        <ArrowWrapper>
          <RoundMultiplierDownArrow isActive={isActive} />
          {getEnteredTag({ bottom: 0, right: 0 })}
          <Content>
            {!isDisabled && multiplierText}
            <Text bold fontSize="20px" mb="8px" color={downColor} textTransform="uppercase">
              {t('Down')}
            </Text>
          </Content>
        </ArrowWrapper>
      </Box>
    )
  }

  return (
    <Box mb="-1px" position="relative">
      <ArrowWrapper>
        <RoundMultiplierUpArrow isActive={isActive} />
        {getEnteredTag({ top: 0, left: 0 })}
        <Content>
          <Text bold fontSize="20px" lineHeight="21px" color={upColor} textTransform="uppercase">
            {t('Up')}
          </Text>
          {!isDisabled && multiplierText}
        </Content>
      </ArrowWrapper>
    </Box>
  )
}
Example #5
Source File: TransactionSettings.tsx    From vvs-ui with GNU General Public License v3.0 5 votes vote down vote up 
ButtonStyles: CSSProperties = { borderRadius: 20 }
Example #6
Source File: TransactionSettings.tsx    From vvs-ui with GNU General Public License v3.0 5 votes vote down vote up 
InputStyles: CSSProperties = { borderWidth: 1, fontSize: 14, textAlign: 'center' }
Example #7
Source File: MultiplierArrow.tsx    From vvs-ui with GNU General Public License v3.0 5 votes vote down vote up 
MultiplierArrow: React.FC<MultiplierArrowProps> = ({
  betAmount,
  multiplier,
  hasEntered = false,
  hasClaimed = false,
  betPosition = BetPosition.BULL,
  isDisabled = false,
  isActive = false,
  isHouse = false,
}) => {
  const { t } = useTranslation()
  const upColor = getTextColor('success')(isActive, isDisabled, isHouse)
  const downColor = getTextColor('failure')(isActive, isDisabled, isHouse)
  const textColor = getTextColor()(isActive, isDisabled, isHouse)
  const multiplierText = (
    <Box>
      <Flex justifyContent="center" height="14px">
        <Text fontSize="14px" color={textColor} bold lineHeight="14x">
          {multiplier !== undefined ? `${multiplier}x` : '-'}
        </Text>
        <Text fontSize="14px" color={textColor} lineHeight="14x" ml="4px">
          {t('Payout')}
        </Text>
      </Flex>
    </Box>
  )

  const getEnteredTag = (position: CSSProperties) => {
    if (!hasEntered) {
      return null
    }

    return (
      <EnteredTagWrapper style={position}>
        <EnteredTag amount={betAmount} hasClaimed={hasClaimed} />
      </EnteredTagWrapper>
    )
  }

  if (betPosition === BetPosition.BEAR) {
    return (
      <Box mt="-1px" position="relative">
        <ArrowWrapper>
          <RoundMultiplierDownArrow isActive={isActive} />
          {getEnteredTag({ bottom: 0, right: 0 })}
          <Content>
            {!isDisabled && multiplierText}
            <Text bold fontSize="20px" mb="8px" color={downColor} textTransform="uppercase">
              {t('Down')}
            </Text>
          </Content>
        </ArrowWrapper>
      </Box>
    )
  }

  return (
    <Box mb="-1px" position="relative">
      <ArrowWrapper>
        <RoundMultiplierUpArrow isActive={isActive} />
        {getEnteredTag({ top: 0, left: 0 })}
        <Content>
          <Text bold fontSize="20px" lineHeight="21px" color={upColor} textTransform="uppercase">
            {t('Up')}
          </Text>
          {!isDisabled && multiplierText}
        </Content>
      </ArrowWrapper>
    </Box>
  )
}