@material-ui/styles#createStyles TypeScript Examples

The following examples show how to use @material-ui/styles#createStyles. 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: ServerListItem.tsx    From shadowsocks-electron with GNU General Public License v3.0 6 votes vote down vote up 
useStyles = makeStyles((theme: Theme) => createStyles({
  wrapper: {
    transition: "all 0.3s linear",
  },
  highlight: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
  }
}))
Example #2
Source File: FetchVariationsButton.tsx    From prompts-ai with MIT License 6 votes vote down vote up 
useStyles = makeStyles(
    createStyles({
        buttonProgress: {
            color: green[500],
            position: 'absolute',
            top: '50%',
            left: '50%',
            marginTop: -12,
            marginLeft: -12,
        },
    }),
)
Example #3
Source File: ControlsFeatureButton.tsx    From Teyvat.moe with GNU General Public License v3.0 5 votes vote down vote up 
useStyles = makeStyles(
  createStyles({
    iconBorder: {
      position: 'absolute',
      top: -1,
      left: -37,
      width: 80,
      height: 80,
      /* This URL MUST start with a '/' to indicate it is an absolute URL. */
      background: ({ bgImage }: StyleProps) => `url(${bgImage}) no-repeat`,
      backgroundSize: '100% 100%',
    },
    icon: {
      position: 'absolute',
      top: '2px !important',
      left: '2px !important',
      clipPath: 'circle(35px)',
    },
    noselect: {
      // Prevent selecting the text.
      '-webkit-touch-callout': 'none' /* iOS Safari */,
      '-webkit-user-select': 'none' /* Safari */,
      '-khtml-user-select': 'none' /* Konqueror HTML */,
      '-moz-user-select': 'none' /* Firefox */,
      '-ms-user-select': 'none' /* Internet Explorer/Edge */,
      'user-select': 'none' /* Non-prefixed version, currently
                                    supported by Chrome and Opera */,
    },
    featureRoot: {
      // Position relative so the frame image can be positioned absolutely.
      position: 'relative',
      // Make space for the image.
      margin: '0 0 10px 37px',
      width: 'calc(100% - 43px)',
      height: 74,
      // Prevent the box getting squished.
      flexShrink: 0,

      border: '1px solid #d2c6bb',
      cursor: 'pointer',
      color: '#78583d',

      background: 'linear-gradient(270deg, #ffffff -95.11%, rgba(255, 255, 255, 0) 100%), #f0e9e2',

      // Align the text.
      padding: '0 8px 0 48px',

      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',

      fontSize: 18,
      boxSizing: 'border-box',
    },
    featureRootActive: {
      background:
        'linear-gradient(270deg, rgba(171, 143, 119, 0.5) -46.99%, rgba(143, 110, 76, 0.5) 198.5%), #ab8f77',
      color: '#f2f0ee',
    },
  })
)
Example #4
Source File: useContextMenu.tsx    From shadowsocks-electron with GNU General Public License v3.0 5 votes vote down vote up 
StyledMenuItem = withStyles((theme) => createStyles({
  root: {
    // minWidth: 150
  }
}))(MenuItem)