emotion#css TypeScript Examples

The following examples show how to use emotion#css. 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: utils.ts    From halstack-angular with Apache License 2.0 7 votes vote down vote up 
getMargins(margin) {
    return margin && typeof margin !== "object"
      ? css`
          margin: ${spaces[margin]};
        `
      : margin && margin !== null
      ? css`
          margin-left: ${spaces[margin["left"]]};
          margin-top: ${spaces[margin["top"]]};
          margin-right: ${spaces[margin["right"]]};
          margin-bottom: ${spaces[margin["bottom"]]};
        `
      : css`
          margin: 0px;
        `;
  }
Example #2
Source File: dashboard.component.tsx    From master-frontend-lemoncode with MIT License 6 votes vote down vote up 
styles = {
  container: css`
    margin: 1rem;
    display: grid;
    grid-auto-flow: row;
    grid-gap: 2rem;
    justify-content: center;
    align-items: center;
  `,
  header: css`
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
  `,
  title: css`
    font-family: Anton, san-serif;
    font-size: 3rem;
  `,
  image: css`
    width: 3rem;
    height: 3rem;
  `,
  widget: css``,
}
Example #3
Source File: RichTextControls.tsx    From Full-Stack-React-TypeScript-and-Node with MIT License 6 votes vote down vote up 
Button = React.forwardRef(
  (
    {
      className,
      active,
      reversed,
      ...props
    }: PropsWithChildren<
      {
        active: boolean;
        reversed: boolean;
      } & BaseProps
    >,
    ref:
      | MutableRefObject<HTMLSpanElement | null>
      | ((instance: HTMLSpanElement | null) => void)
      | null
  ) => (
    <span
      {...props}
      ref={ref}
      className={cx(
        className,
        css`
          cursor: pointer;
          color: ${reversed
            ? active
              ? "white"
              : "#aaa"
            : active
            ? "black"
            : "#aaa"};
        `
      )}
    />
  )
)
Example #4
Source File: PanelOptionCode.tsx    From ae3e-plotly-panel with Apache License 2.0 6 votes vote down vote up 
PanelOptionCode: React.FC<Props> = ({ value, item, onChange }) => {
  if (typeof value !== 'string') {
    value = JSON.stringify(value, null, 2);
  }
  const theme = useTheme();
  return (
    <AutoSizer
      disableHeight
      className={css`
        margin-bottom: ${theme.spacing.sm};
      `}
    >
      {({ width }) => (
        <CodeEditor
          language={item.settings?.language}
          showLineNumbers={item.settings?.language === 'javascript' ? true : false}
          value={value === 'null' ? JSON.stringify(item.settings?.initValue, null, 2) : value}
          width={width}
          height="200px"
          onBlur={(code) => {
            if (item.settings?.language === 'json' && code) {
              code = JSON.parse(code);
            }
            onChange(code);
          }}
        />
      )}
    </AutoSizer>
  );
}
Example #5
Source File: stylesheets.tsx    From animation-editor with MIT License 6 votes vote down vote up 
compileStylesheetLabelled = <T extends StylesheetFn, K = keyof ReturnType<T>>(
	stylesheet: T,
) => {
	const obj = stylesheet({ css: (...args: any[]) => args as any, keyframes });
	const newObj = Object.keys(obj).reduce<any>((newObj, key) => {
		newObj[key] = `${key} ${css(...obj[key])}`;
		return newObj;
	}, {});
	return createGetterFn<K>(newObj);
}
Example #6
Source File: styles.ts    From screenshot.rocks with MIT License 6 votes vote down vote up 
styles = (): string => {
    return css`
        position: sticky;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 0;
        background-color: #0000002b;
        color: #fff;
        a {
          text-decoration: none;
          font-weight: bold;
          color: #ffffff;
          
          &:hover {
            text-shadow: 0 1px 15px #ffffff87;
          }
          
          span {
            border-bottom: 2px solid #fe79ed;
          }
        }
`;
}
Example #7
Source File: title.component.ts    From halstack-angular with Apache License 2.0 6 votes vote down vote up 
getDynamicStyle(inputs) {
    return css`
      h1,
      h2,
      h3,
      h4 {
        font-family: Open Sans, sans-serif;
        color: ${inputs.theme === "dark" ? "#FFFFFF" : "#000000"};
      }
    `;
  }
Example #8
Source File: select.styles.ts    From master-frontend-lemoncode with MIT License 5 votes vote down vote up 
select = css`
  padding-top: ${theme.spacing(2)}px;
  padding-bottom: ${theme.spacing(2)}px;
`