polished#opacify TypeScript Examples

The following examples show how to use polished#opacify. 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: Table.tsx    From design-system with MIT License 6 votes vote down vote up 
ResetButton = styled.button(({ theme }) => ({
  border: 0,
  borderRadius: '3em',
  cursor: 'pointer',
  display: 'inline-block',
  overflow: 'hidden',
  padding: '3px 8px',
  transition: 'all 150ms ease-out',
  verticalAlign: 'top',
  userSelect: 'none',
  margin: 0,

  backgroundColor:
    theme.base === 'light' ? '#EAF3FC' : theme.color.border,
  boxShadow:
    theme.base === 'light'
      ? `${theme.color.border} 0 0 0 1px inset`
      : `${theme.color.darker}  0 0 0 1px inset`,
  color: theme.color.secondary,

  '&:hover': {
    background:
      theme.base === 'light'
        ? darken(0.03, '#EAF3FC')
        : opacify(0.1, theme.color.border),
  },

  '&:focus': {
    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
    outline: 'none',
  },

  svg: {
    display: 'block',
    height: 14,
    width: 14,
  },
}))
Example #2
Source File: Table.tsx    From design-system with MIT License 4 votes vote down vote up 
TableWrapper = styled.table<{
  compact?: boolean;
  inAddonPanel?: boolean;
}>(({ compact, inAddonPanel }) => ({
  '&&': {
    // Resets for cascading/system styles
    borderSpacing: 0,
    color: theme.color.defaultText,
    border: '1px solid #E5E5E5',
    backgroundColor: '#FFFFFF',
    borderRadius: '4px',
    'td, th': {
      padding: 0,
      verticalAlign: 'top',
      textOverflow: 'ellipsis',
    },
    // End Resets

    // fontSize: theme.typography.size.s2 - 1,
    lineHeight: '20px',
    textAlign: 'left',

    // Margin collapse
    marginTop: inAddonPanel ? 0 : 25,
    marginBottom: inAddonPanel ? 0 : 40,
    // boxShadow: `rgba(0, 0, 0, 0.10) 0 2px 5px 1px`,

    'thead th:first-of-type, td:first-of-type': {
      // intentionally specify thead here
      width: '25%',
    },

    'th:first-of-type, td:first-of-type': {
      paddingLeft: 20,
    },

    'th:nth-of-type(2), td:nth-of-type(2)': {
      ...(compact
        ? null
        : {
            // Description column
            width: '35%',
          }),
    },

    'td:nth-of-type(3)': {
      ...(compact
        ? null
        : {
            // Defaults column
            width: '15%',
          }),
    },

    'th:last-of-type, td:last-of-type': {
      paddingRight: 20,
      ...(compact
        ? null
        : {
            // Controls column
            width: '25%',
          }),
    },

    th: {
      color: theme.color.defaultText,
      paddingTop: 10,
      paddingBottom: 10,
      paddingLeft: 15,
      paddingRight: 15,
      fontWeight: 'bold',
    },

    td: {
      paddingTop: '10px',
      paddingBottom: '10px',
      '&:not(:first-of-type)': {
        paddingLeft: 15,
        paddingRight: 15,
      },

      '&:last-of-type': {
        paddingRight: 20,
      },
    },
    marginLeft: inAddonPanel ? 0 : 1,
    marginRight: inAddonPanel ? 0 : 1,

    tbody: {
      borderRadius: theme.appBorderRadius,

      // for safari only
      // CSS hack courtesy of https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome
      '@media not all and (min-resolution:.001dpcm)': {
        '@supports (-webkit-appearance:none)': {
          borderWidth: 1,
          borderStyle: 'solid',
          ...(inAddonPanel && {
            borderColor: 'transparent',
          }),

          ...(!inAddonPanel && {
            borderColor:
              theme.base === 'light'
                ? transparentize(
                    0.035,
                    theme.appBorderColor
                  )
                : opacify(0.05, theme.appBorderColor),
          }),
        },
      },

      tr: {
        background: 'transparent',
        overflow: 'hidden',
      },

      td: {
        background: theme.background.content,
        borderTop: '1px solid #E5E5E5',
      },
    },
  },
}))