styled-components css TypeScript Examples

Source File: DAGContent.tsx From metaflow-ui with Apache License 2.0

6 votes

Line = css`
  &::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #d0d0d0;
    left: 50%;
  }
`

Source File: Ui.tsx From craft-extension-inspirations with MIT License

6 votes

TextColor = styled.div<{ xColor: string, hoverColor?: string }>`
  color: ${props => props.xColor};
  ${props => props.hoverColor && css`
    transition: 0.1s ease;
    &:hover {
      color: ${props.hoverColor};
    }
  `}
`

Source File: styles.ts From NextLevelWeek with MIT License

6 votes

SelectButton = styled.button<ISelectButtonProps>`
    height: 64px;
    background: #F5F8FA;
    border: 1px solid #D3E2E5;
    color: #5C8599;
    cursor: pointer;

    ${props => props.active && css`
        background: #EDFFF6;
        border: 1px solid #A1E9C5;
        color: #37C77F;
    `}

    &:first-child {
        border-radius: 20px 0px 0px 20px;
    }

    &:last-child {
        border-radius: 0 20px 20px 0;
         border-left: 0;
    }
`

Source File: base.ts From cheeseswap-interface with GNU General Public License v3.0

6 votes

mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(MEDIA_WIDTHS).reduce(
  (accumulator, size) => {
    ;(accumulator as any)[size] = (a: any, b: any, c: any) => css`
      @media (max-width: ${(MEDIA_WIDTHS as any)[size]}px) {
        ${css(a, b, c)}
      }
    `
    return accumulator
  },
  {}
) as any

Source File: Styles.ts From covidex with MIT License

6 votes

LinkStyle = css`
  cursor: pointer;
  text-decoration: none;
  color: ${({ theme }) => theme.primary};

  &:hover {
    color: ${({ theme }) => theme.secondary};
    text-decoration: underline;
  }
`

Source File: Styled.tsx From amazon-chime-sdk-smart-video-sending-demo with Apache License 2.0

6 votes

stack = css`
  display: flex;
  flex-direction: column;
  align-items: center;

  > * {
    width: 100%;
  }
`

Source File: GlobalStyles.ts From convoychat with GNU General Public License v3.0

6 votes

ScrollBarStyles = css`
  :root {
    --app-height: 100%;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: ${p => p.theme.colors.dark3} ${p => p.theme.colors.dark1};
  }

  /* Works on Chrome/Edge/Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner {
    background: ${p => p.theme.colors.dark1};
  }
  *::-webkit-scrollbar-thumb {
    background-color: ${p => p.theme.colors.dark3};
    border-radius: 20px;
    border: 2px solid ${p => p.theme.colors.dark1};
  }
`

Source File: DemoApp.tsx From ali-react-table with MIT License

6 votes

beautifulScrollbarStyleMixin = css`
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border: 1px solid #eaeaea;

    &:hover {
      background: #6e6e6e;
    }
  }

  ::-webkit-scrollbar-track {
    background: #eaeaea;
  }
`

Source File: index.tsx From sybil-interface with GNU General Public License v3.0

6 votes

mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(MEDIA_WIDTHS).reduce(
  (accumulator, size) => {
    ;(accumulator as any)[size] = (a: any, b: any, c: any) => css`
      @media (max-width: ${(MEDIA_WIDTHS as any)[size]}px) {
        ${css(a, b, c)}
      }
    `
    return accumulator
  },
  {}
) as any

Source File: styles.ts From front-entenda-direito with GNU General Public License v3.0

6 votes

toastTypeVariations = {
  info: css`
    background: #ebf8ff;
    color: #3172b7;
  `,
  success: css`
    background: #e6fffa;
    color: #2e656a;
  `,
  error: css`
    background: #fddede;
    color: #c53030;
  `,
}

Source File: styles.ts From ecoleta with MIT License

6 votes

toastTypeVariations = {
  info: css`
    color: #3172b7;
    background: #ebf8ff;
  `,
  success: css`
    color: #2e656a;
    background: #e6fffa;
  `,
  error: css`
    color: #c53030;
    background: #fddede;
  `,
}

Source File: index.tsx From interface-v2 with GNU General Public License v3.0

6 votes

mediaWidthTemplates: {
  [width in keyof typeof MEDIA_WIDTHS]: typeof css;
} = Object.keys(MEDIA_WIDTHS).reduce((accumulator, size) => {
  (accumulator as any)[size] = (a: any, b: any, c: any) => css`
    @media (max-width: ${(MEDIA_WIDTHS as any)[size]}px) {
      ${css(a, b, c)}
    }
  `;
  return accumulator;
}, {}) as any

Source File: Button.tsx From panvala with Apache License 2.0

6 votes

StyledButton: any = styled(BaseButton)`
  height: 2rem;
  background-color: ${({ type }: any) => {
    if (type && BUTTON_COLORS[type]) return BUTTON_COLORS[type];
    return COLORS.white;
  }};
  color: ${({ active, disabled }: any) =>
    active ? colors.blue : disabled ? colors.greys.disabled : colors.greys.dark};

  ${({ active }: any) => {
    return (
      active &&
      css`
        box-shadow: 0px 3px 10px rgba(83, 172, 217, 0.16);
      `
    );
  }};
  padding: 0.25rem 0.75rem;
  margin: 0;
  border: none;
  border-radius: 4px;
  &:focus {
    box-shadow: 0px 3px 10px rgba(83, 172, 217, 0.16);
    outline: none;
  }
  font-size: 0.85rem;
  line-height: 1rem;
  ${color};
  ${layout};
  ${space};
`

Source File: index.tsx From metaflow-ui with Apache License 2.0

6 votes

StyledToggle = styled.div<{ active: boolean }>`
  width: 0.125rem;
  height: 1.125rem;
  background: ${(p) => p.theme.color.border.dark};
  cursor: pointer;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 50%;
    border: 0.125rem solid ${(p) => p.theme.color.text.mid};
    background: white;
    transform: translateY(-0.125rem) translateX(-0.25rem);
    transition: 0.2s transform cubic-bezier(0.44, 1.89, 0.55, 0.79), width 0.25s, 0.15s background, 0.15s border;

    ${(p) =>
      p.active &&
      css`
        border: 0.125rem solid ${(p) => p.theme.color.text.blue};
        background: ${(p) => p.theme.color.text.blue};
        transform: translateY(0.75rem) translateX(-0.25rem);
      `}
  }
`

Source File: StyledCircleMenuToggle.ts From react-circular-menu with Apache License 2.0

6 votes

StyledCircleMenuToggle = styled(CircleButton)<Props>`
  position: relative;
  flex-direction: column;
  z-index: 103;

  &:is(:hover, :focus, :active) > ${StyledCircleMenuBurgerBar} {
    background: #ffffff;
  }

  ${({ menuActive }) =>
    menuActive &&
    css`
      ${StyledCircleMenuBurgerBar}:nth-child(1) {
        transform: translate(-0.1em, 0.17em) rotateZ(-40deg);
        width: 1.2em;
      }
      ${StyledCircleMenuBurgerBar}:nth-child(2) {
        opacity: 0;
      }
      ${StyledCircleMenuBurgerBar}:nth-child(3) {
        transform: translate(-0.1em, -0.17em) rotateZ(40deg);
        width: 1.2em;
      }
    `}
`

Source File: index.tsx From metaflow-ui with Apache License 2.0

6 votes

ButtonCSS = css`
  display: flex;
  align-items: center;
  outline: 0;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0.25rem;
  border: ${(p) => p.theme.border.thinNormal};
  min-height: 1.75rem;
  transition: background 0.15s;
`

Source File: styles.ts From react-memory-game with MIT License

6 votes

Button = css`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  background: ${({ theme }): string => theme.accent};
  margin-left: 16px;
  min-width: 25%;

  &:hover {
    transform: scale(1.02);
  }
`

Source File: index.ts From copy-image-clipboard with MIT License

6 votes

Spinner = styled.div<SpinnerProps>`
  ${(props) => {
    const {
      duration = 0.5,
      color = props.theme.primaryText,
      ringColor = 'rgba(0,0,0,0.1)',
      background = 'transparent',
      size = '1em',
      thickness = 2,
    } = props
    return css`
      animation: ${rotate360} ${duration}s linear infinite;
      transform: translateZ(0);
      border-top: ${thickness}px solid ${ringColor};
      border-right: ${thickness}px solid ${ringColor};
      border-bottom: ${thickness}px solid ${ringColor};
      border-left: ${thickness}px solid ${color};
      background: ${background};
      width: ${size};
      height: ${size};
      border-radius: 50%;
    `
  }}
`

Source File: styles.ts From github-explorer with MIT License

6 votes

StyledTab = styled(Tab)`
  ${({ theme }) => css`
    cursor: pointer;
    color: ${theme.colors["gray-dark"]};
    position: relative;
    font-size: 18px;

    &.selected-tab {
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        margin-top: 10px;
        border-radius: 2px;
        background: ${theme.colors.dark};
      }
    }

    &:hover {
      color: ${lighten(0.20, theme.colors.dark)};
    }

    &:not(:last-of-type) {
      margin-right: 15px;
    }
  `};
`

Source File: Styles.ts From taskcafe with MIT License

6 votes

IconContainerWrapper = styled.div<{ disabled?: boolean }>`
  margin-right: 20px;
  position: relative;
  cursor: pointer;
  ${(props) =>
    props.disabled &&
    css`
      opacity: 0.5;
      cursor: default;
      pointer-events: none;
    `}
`

Source File: InfoItem.tsx From dxvote with GNU Affero General Public License v3.0

6 votes

InfoItemWrapper = styled(Box)`
  display: flex;
  flex: 1;
  justify-content: space-between;
  color: ${({ theme }) => theme.colors.proposalText.grey};
  margin-bottom: 1.25rem;

  ${({ clickable }) =>
    clickable &&
    css`
      cursor: pointer;

      :hover {
        color: ${({ theme }) => theme.colors.text};
      }
    `}
`

Source File: SubHeader.tsx From anchor-web-app with Apache License 2.0

6 votes

breakStyle = (breakPoints: number) => css`
  @media (max-width: ${breakPoints}px) {
    flex-direction: column;
    align-items: flex-start;

    > div {
      width: 100%;
      justify-content: flex-start;

      div:empty {
        flex: 1;
      }

      button,
      a {
        &:first-child {
          margin-left: 0;
        }
      }
    }

    > .buttons {
      margin-top: 15px;

      button,
      a {
        flex: 1;
      }
    }
  }
`

Source File: index.tsx From dxvote with GNU Affero General Public License v3.0

6 votes

DropdownContent = styled<DropdownContentProps>(Box)`
  display: ${({ show }) => (show ? 'block' : 'none')};
  border: 1px solid ${({ theme }) => theme.colors.muted};
  border-radius: ${({ theme }) => theme.radii.curved};
  padding-top: 0.25rem;
  position: absolute;
  background-color: ${({ theme }) => theme.colors.background};
  z-index: 9999;
  width: 100%;
  min-width: 200px;

  ${({ fullScreenMobile }) =>
    fullScreenMobile &&
    css`
      @media only screen and (max-width: 768px) {
        height: 100vh;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        display: ${({ show }) => (show ? 'block' : 'none')};
        border: none;
      }
    `}
`

Source File: DescriptionGrid.tsx From anchor-web-app with Apache License 2.0

6 votes

itemStyle = css`
  article {
    h4 {
      font-size: 13px;
      font-weight: 500;
      color: ${({ theme }) => theme.dimTextColor};

      &:not(:first-child) {
        margin-top: 10px;
      }

      margin-bottom: 5px;
    }

    p {
      font-size: 14px;
      line-height: 1.5;
      max-width: 90%;
      word-break: normal;
      text-align: justify;
      white-space: break-spaces;
    }
  }
`

Source File: Input.tsx From dxvote with GNU Affero General Public License v3.0

6 votes

baseInputStyles = css`
  border: 0.1rem solid ${({ theme }) => theme.colors.muted};
  border-radius: 1.5rem;
  padding: 0.5rem 0.8rem;
  background-color: transparent;
  color: ${({ theme }) => theme.colors.text};

  ::placeholder {
    color: ${({ theme }) => theme.colors.proposalText.grey};
    font-size: ${({ theme }) => theme.fontSizes.body};
    font-weight: ${({ theme }) => theme.fontWeights.regular};
  }
  :hover:enabled {
    color: ${({ theme }) => theme.colors.text};
    border-color: ${({ theme }) => theme.colors.border.hover};
  }

  :active:enabled {
    border: 0.1rem solid ${({ theme }) => theme.colors.muted};
  }
  width: -webkit-fill-available;

  :focus:enabled {
    outline: none;
    border-color: ${({ theme }) => theme.colors.text};
    color: ${({ theme }) => theme.colors.text};
  }
`

Source File: index.tsx From anchor-web-app with Apache License 2.0

6 votes

hHeavyRuler = css`
  padding: 0;
  margin: 0;

  border: 0;

  height: 5px;
  border-radius: 3px;

  ${({ theme }) =>
    pressed({
      color: theme.sectionBackgroundColor,
      distance: 1,
      intensity: theme.intensity,
    })};
`

Source File: global.ts From shippo with MIT License

6 votes

style = css`
  * {
    margin: 0;
    padding: 0;
  }

  html,
  body,
  #root {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background-color: #f5f5f9;
  }

  ul {
    list-style: none;
  }
`

Source File: styles.ts From gobarber-web with MIT License

6 votes

toastTypeVariations = {
  info: css`
    background: #ebf8ff;
    color: #3172b7;
  `,
  success: css`
    background: #e6fffa;
    color: #2e656a;
  `,
  error: css`
    background: #fddede;
    color: #c53030;
  `,
}

Source File: ConvertSymbols.tsx From anchor-web-app with Apache License 2.0

6 votes

colors = (theme: DefaultTheme) => {
  if (theme.palette.type === 'light') {
    return css`
      --color-background: white;
      --color-primitive: #38d938;
      --color-dim: #c2c2c2;
      --color-text: white;
    `;
  } else {
    return css`
      --color-background: #0c1226;
      --color-primitive: ${theme.colors.positive};
      --color-dim: #3b4350;
      --color-text: white;
    `;
  }
}

styled-components#css TypeScript Examples