styled-components/macro#css TypeScript Examples

Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
    margin: 4px;
    width: 24px;
    height: 24px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    transition: 0.2s ease all;
    border-radius: var(--border-radius);
    background: var(--secondary-background);

    svg {
        color: var(--secondary-background);
    }

    ${(props) =>
        props.contrast &&
        css`
            background: var(--primary-background);

            svg {
                color: var(--primary-background);
            }
        `}

    ${(props) =>
        props.checked &&
        css`
            background: var(--accent) !important;
        `}
`

function hamburgerTopBackward() {
  let styles = ''
  for (let i = 0; i <= 100; i += 1) {
    styles += `
        ${i}% {
          transform: translate3d(${-8 - springWobbly(i / 50) * -8}px, ${2 -
      springWobbly(i / 50) * 2}px, 0) rotate(${-45 - springWobbly(i / 50) * -45}deg) scaleX(${0.5 +
      springWobbly(i / 50) * 0.5});
        }
        `
  }
  return css`
    ${styles}
  `
}

describe('media', () => {
  it('should return media query in css', () => {
    const mediaQuery = media.small`color:red;`.join('');
    const cssVersion = css`
      @media (min-width: ${sizes.small}px) {
        color: red;
      }
    `.join('');
    expect(mediaQuery).toEqual(cssVersion);
  });
});

ImageIconBase = styled.img<IconModifiers>`
    flex-shrink: 0;
    object-fit: cover;

    ${(props) =>
        props.borderRadius &&
        css`
            border-radius: var(${props.borderRadius});
        `}

    ${(props) =>
        props.hover &&
        css`
            &:hover img {
                filter: brightness(0.8);
            }
        `}
`

TaskGroupItemCell = styled.div<{ width: number; focused: boolean }>`
  width: ${p => p.width}px;
  background: transparent;
  position: relative;

  border: 1px solid #414561;
  justify-content: space-between;
  margin-right: -1px;
  z-index: 0;
  padding: 0 8px;
  align-items: center;
  display: flex;
  height: 37px;
  overflow: hidden;
  &:hover ${DueDateRemoveButton} {
    visibility: visible;
  }
  &:hover ${TaskName} {
    ${props =>
      !props.focused &&
      css`
        background: ${props.theme.colors.bg.secondary};
        border: 1px solid ${mixin.darken(props.theme.colors.bg.secondary, 0.25)};
        border-radius: 2px;
        cursor: text;
      `}
  }
`

Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--border-radius);
    background-color: ${(props) => props.colour};

    display: grid;
    place-items: center;

    &:hover {
        border: 3px solid var(--foreground);
        transition: border ease-in-out 0.07s;
    }

    svg {
        color: white;
    }

    ${(props) =>
        props.type === "small"
            ? css`
                  width: 30px;
                  height: 30px;

                  svg {
                      /*stroke-width: 2;*/
                  }
              `
            : css`
                  width: 68px;
                  height: 68px;
              `}
`

export function MenuListItem({
  prefix,
  suffix,
  sub,
  ...menuProps
}: MenuListItemProps) {
  return sub ? (
    <Menu.SubMenu
      css={WrapperStyle}
      {...menuProps}
      title={
        <ListItem prefix={prefix} suffix={suffix}>
          {menuProps.title}
        </ListItem>
      }
    >
      {menuProps.children}
    </Menu.SubMenu>
  ) : (
    <Menu.Item css={WrapperStyle} {...menuProps}>
      <ListItem prefix={prefix} suffix={suffix}>
        {menuProps.children}
      </ListItem>
    </Menu.Item>
  );
}

function hamburgerTopForward() {
  let styles = ''
  for (let i = 0; i <= 100; i += 1) {
    styles += `
        ${i}% {
          transform: translate3d(${springWobbly(i / 50) * -8}px, ${springWobbly(i / 50) *
      2}px, 0) rotate(${springWobbly(i / 50) * -45}deg) scaleX(${1 - springWobbly(i / 50) * 0.5});
        }
        `
  }
  return css`
    ${styles}
  `
}

TaskName = styled.div<{ focused: boolean }>`
  flex: 0 1 auto;
  min-width: 1px;
  overflow: hidden;
  margin-right: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  height: 20px;
  padding: 0 1px;

  max-height: 100%;
  position: relative;
  &:hover {
    ${props =>
      !props.focused &&
      css`
        border-color: #9ca6af !important;
        border: 1px solid ${props.theme.colors.primary} !important;
      `}
  }
`

Flex = styled.div<FlexProps>(
  ({ gap = "none", direction, justify, align, nowrap }) => css`
    display: flex;
    flex-direction: ${direction};
    justify-content: ${justify};
    align-items: ${align};
    flex-wrap: ${nowrap ? "no-wrap" : "wrap"};
    & > *:not(:last-child) {
      ${direction === "column"
        ? css`
            margin-bottom: ${(p) => p.theme.space[gap]}px;
          `
        : css`
            margin-right: ${(p) => p.theme.space[gap]}px;
          `}
    }
  `
)

Wrapper = styled.div<{ open: boolean }>`
  background: transparent;
  z-index: 52;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  ${({ open }) =>
    open &&
    css`
      opacity: 1;
      visibility: visible;
      transition: opacity 0.4s, visibility 0.4s;
    `}
  &::after {
    display: inline-block;
    height: 100%;
    margin-left: -0.05em;
    vertical-align: middle;
    content: '';
  }
`

function hamburgerTopForward() {
  let styles = ''
  for (let i = 0; i <= 100; i += 1) {
    styles += `
        ${i}% {
          transform: translate3d(${springWobbly(i / 50) * -8}px, ${springWobbly(i / 50) * 2}px, 0) rotate(${springWobbly(i / 50) * -45}deg) scaleX(${1 - springWobbly(i / 50) * 0.5});
        }
        `
  }
  return css`
    ${styles}
  `
}

media = (Object.keys(sizes) as Array<keyof typeof sizes>).reduce((acc, label) => {
  acc[label] = (first: any, ...interpolations: any[]) => css`
    @media (min-width: ${sizes[label]}px) {
      ${css(first, ...interpolations)}
    }
  `

  return acc
}, {} as { [key in keyof typeof sizes]: MediaFunction })

function hamburgerBottomForward() {
  let styles = ''
  for (let i = 0; i <= 100; i += 1) {
    styles += `
          ${i}% {
            transform: translate3d(${springWobbly(i / 50) * -8}px, ${springWobbly(i / 50) *
      -2}px, 0) rotate(${springWobbly(i / 50) * 45}deg) scaleX(${1 - springWobbly(i / 50) * 0.5});
          }
          `
  }
  return css`
    ${styles}
  `
}

errorColor = css`
  color: ${p => p.theme.error};
`

Base = styled.div<{ detached?: boolean }>`
    position: relative;

    > div {
        bottom: 0;
        width: 100%;
        position: absolute;
        background: var(--primary-header);
    }

    button {
        gap: 8px;
        margin: 4px;
        padding: 6px;
        border: none;
        display: flex;
        font-size: 1em;
        cursor: pointer;
        align-items: center;
        flex-direction: row;
        font-family: inherit;
        background: transparent;
        color: var(--foreground);
        width: calc(100% - 12px);
        border-radius: var(--border-radius);

        span {
            display: grid;
            place-items: center;
        }

        &.active {
            background: var(--primary-background);
        }
    }

    ${(props) =>
        props.detached &&
        css`
            bottom: 8px;

            > div {
                border-radius: var(--border-radius);
            }
        `}
`

tableStyle = css`
  .ant-card-body {
    padding: 0;
  }
`

ServerBanner = styled.div<Omit<Props, "server">>`
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    background-size: cover;
    background-repeat: norepeat;
    background-position: center center;

    ${(props) =>
        props.background
            ? css`
                  height: 120px;

                  .container {
                      background: linear-gradient(
                          0deg,
                          var(--secondary-background),
                          transparent
                      );
                  }
              `
            : css`
                  background-color: var(--secondary-header);
              `}

    .container {
        height: var(--header-height);

        display: flex;
        align-items: center;
        padding: 0 14px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        gap: 8px;

        .title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-grow: 1;
        }
    }
`

function Modal({ closeButton, close, children, header, noOverlayColor, ...rest }: IProps) {
  const closeModal = () => {
    typeof close === 'function' && close()
  }
  return (
    <Wrapper className={'dialog'} {...rest}>
      <ModalOverlay noOverlayColor={Boolean(noOverlayColor)} onClick={closeModal} />
      <div
        css={`
          box-sizing: border-box;
          display: inline-block;
          z-index: 20;
          position: relative;
          width: 65vw;
          border-radius: 2px;
          background: #fff;
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
          vertical-align: middle;
          align-self: center;
        `}
      >
        {header && (
          <div>
            <h3>
              <span>{header}</span>
            </h3>
            {closeButton && (
              <div onClick={closeModal}>
                <span>
                  <span
                    css={`
                      z-index: 20;
                      position: absolute;
                      top: 0;
                      right: 0;
                      width: 35px;
                      color: #95979c !important;
                      font-size: 20px;
                      font-weight: 700;
                      line-height: 35px;
                      text-align: center;
                      text-decoration: none;
                      text-indent: 0;
                      cursor: pointer;
                      &:hover {
                        color: #2b2e38 !important;
                      }
                    `}
                  >
                    ×
                  </span>
                </span>
              </div>
            )}
          </div>
        )}
        <div
          css={`
            max-height: 60vh;
            overflow-y: auto;
          `}
        >
          {children}
        </div>
      </div>
    </Wrapper>
  )
}

TipBase = styled.div<Props>`
    display: flex;
    padding: 12px;
    font-weight: 500;
    overflow: hidden;
    align-items: center;

    font-size: 14px;
    background: var(--primary-header);
    border-radius: var(--border-radius);
    border: 2px solid var(--secondary-header);

    a {
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
    }

    svg {
        flex-shrink: 0;
        margin-inline-end: 10px;
    }

    ${(props) =>
        props.warning &&
        css`
            color: var(--warning);
            border: 2px solid var(--warning);
            background: var(--secondary-header);
        `}

    ${(props) =>
        props.error &&
        css`
            color: white;
            border: 2px solid var(--error);
            background: var(--error);
        `}
`

InputInput = styled.input<{
  hasValue: boolean;
  hasIcon: boolean;
  width: string;
  focusBg: string;
  borderColor: string;
}>`
  width: ${(props) => props.width};
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-color: ${(props) => props.borderColor};
  background: #262c49;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
  ${(props) => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}

  &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #262c49 inset !important;
  }
  &:-webkit-autofill {
    -webkit-text-fill-color: #c2c6dc !important;
  }
  line-height: 16px;
  color: #c2c6dc;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease;
  &:focus {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid ${(props) => props.theme.colors.primary};
    background: ${(props) => props.focusBg};
  }
  &:focus ~ ${InputLabel} {
    color: ${(props) => props.theme.colors.primary};
    transform: translate(-3px, -90%);
  }
  ${(props) =>
    props.hasValue &&
    css`
      & ~ ${InputLabel} {
        color: ${props.theme.colors.primary};
        transform: translate(-3px, -90%);
      }
    `}
`

RadioBase = styled.label<BaseProps>`
    gap: 4px;
    z-index: 1;
    padding: 4px;
    display: flex;
    cursor: pointer;
    align-items: center;

    font-size: 1rem;
    font-weight: 600;
    user-select: none;
    transition: 0.2s ease all;
    border-radius: var(--border-radius);

    &:hover {
        background: var(--hover);
    }

    > input {
        display: none;
    }

    > div {
        margin: 4px;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        background: var(--foreground);
        border-radius: var(--border-radius-half);

        svg {
            color: var(--foreground);
            /*stroke-width: 2;*/
        }
    }

    ${(props) =>
        props.selected &&
        css`
            color: white;
            cursor: default;
            background: var(--accent);

            > div {
                background: white;
            }

            > div svg {
                color: var(--accent);
            }

            &:hover {
                background: var(--accent);
            }
        `}
`

StyledDropdownContent = styled.div<{ isOpen?: boolean }>`
  width: max-content;
  padding: 15px;
  border-radius: 5px;
  position: absolute;
  right: 0;
  margin-top: 5px;
  background-color: ${p => p.theme.colors.dark1};
  opacity: 0;
  pointer-events: none;
  transform: translateY(-25px);
  transition: 0.2s;
  z-index: 1;
  ${p =>
    p.isOpen &&
    css`
      opacity: 1;
      pointer-events: all;
      transform: translateY(5px);
    `}

  .dropdown__item {
    width: 100%;
    button {
      width: 100%;
    }
  }
  @media screen and (max-width: 400px) {
    .dropdown__item {
      button {
        padding: 15px 10px;
      }
    }
  }

  @media (${p => p.theme.media.tablet}) {
    position: fixed;
    left: 0;
    top: var(--app-height);
    width: 100vw;
    height: auto;
    margin: 0;
    padding: 20px;
    border-radius: 0;
    transform: ${p => (p.isOpen ? "translateY(-100%)" : "translateY(0%)")};
  }
`

ReplyBase = styled.div<{
    head?: boolean;
    fail?: boolean;
    preview?: boolean;
}>`
    gap: 8px;
    min-width: 0;
    display: flex;
    margin-inline-start: 30px;
    margin-inline-end: 12px;
    font-size: 0.8em;
    user-select: none;
    align-items: end;
    color: var(--secondary-foreground);

    &::before {
        content: "";
        flex-shrink: 0;
        width: 22px;
        height: 10px;
        border-inline-start: 2px solid var(--message-box);
        border-top: 2px solid var(--message-box);
        align-self: flex-end;
    }

    * {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .user {
        //margin-inline-start: 12px;
        gap: 6px;
        display: flex;
        flex-shrink: 0;
        font-weight: 600;
        overflow: visible;
        align-items: center;
        padding: 2px 0;

        span {
            cursor: pointer;
            &:hover {
                text-decoration: underline;
            }
        }
    }

    .content {
        max-height: 32px;

        gap: 4px;
        display: flex;
        padding: 2px 0;
        cursor: pointer;
        overflow: hidden;
        align-items: center;
        flex-direction: row;

        transition: filter 1s ease-in-out;
        transition: transform ease-in-out 0.1s;
        filter: brightness(1);

        > svg {
            flex-shrink: 0;
        }

        > span > p {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        &:hover {
            filter: brightness(2);
        }

        &:active {
            transform: translateY(1px);
        }

        > * {
            pointer-events: none;
        }
    }

    > svg:first-child {
        flex-shrink: 0;
        transform: scaleX(-1);
        color: var(--tertiary-foreground);
    }

    ${(props) =>
        props.fail &&
        css`
            color: var(--tertiary-foreground);
        `}

    ${(props) =>
        props.head &&
        css`
            margin-top: 12px;

            &::before {
                border-start-start-radius: 4px;
            }
        `}

    ${(props) =>
        props.preview &&
        css`
            margin-left: 0;
        `}
`

Tabs = memo(() => {
  const [operatingView, setOperatingView] = useState<null | ViewViewModel>(
    null,
  );
  const [confirmVisible, setConfirmVisible] = useState(false);
  const dispatch = useDispatch();
  const history = useHistory();
  const { editorInstance } = useContext(EditorContext);
  const orgId = useSelector(selectOrgId);
  const editingViews = useSelector(selectEditingViews);
  const id = useSelector(state =>
    selectCurrentEditingViewAttr(state, { name: 'id' }),
  ) as string;
  const t = useI18NPrefix('view.tabs');

  const redirect = useCallback(
    currentEditingViewKey => {
      if (currentEditingViewKey) {
        history.push(`/organizations/${orgId}/views/${currentEditingViewKey}`);
      } else {
        history.push(`/organizations/${orgId}/views`);
      }
    },
    [history, orgId],
  );

  const tabChange = useCallback(
    activeKey => {
      if (id !== activeKey) {
        history.push(`/organizations/${orgId}/views/${activeKey}`);
      }
    },
    [history, id, orgId],
  );

  const tabEdit = useCallback(
    (targetKey, action) => {
      const view = editingViews.find(v => v.id === targetKey);

      switch (action) {
        case 'remove':
          if (view!.touched === false) {
            dispatch(removeEditingView({ id: targetKey, resolve: redirect }));
          } else {
            setOperatingView(view!);
            setConfirmVisible(true);
          }
          break;
        default:
          break;
      }
    },
    [dispatch, editingViews, redirect],
  );

  const hideConfirm = useCallback(() => {
    setConfirmVisible(false);
  }, []);

  const removeTab = useCallback(() => {
    dispatch(removeEditingView({ id: operatingView!.id, resolve: redirect }));
    setConfirmVisible(false);
  }, [dispatch, operatingView, redirect]);

  const runTab = useCallback(() => {
    const fragment = editorInstance
      ?.getModel()
      ?.getValueInRange(editorInstance.getSelection()!);
    setConfirmVisible(false);
    dispatch(runSql({ id, isFragment: !!fragment }));
  }, [dispatch, id, editorInstance]);

  return (
    <Wrapper>
      <TabsComponent
        hideAdd
        type="editable-card"
        activeKey={id}
        onChange={tabChange}
        onEdit={tabEdit}
      >
        {editingViews.map(({ id, name, touched, stage, error }) => (
          <TabPane
            key={id}
            tab={error ? <span css={errorColor}>{name}</span> : name}
            closeIcon={
              <CloseIcon touched={touched} stage={stage} error={!!error} />
            }
          />
        ))}
      </TabsComponent>
      <Confirm
        visible={confirmVisible}
        title={t('warning')}
        icon={<InfoCircleOutlined style={{ color: ORANGE }} />}
        footer={
          <Space>
            <Button onClick={removeTab}>{t('discard')}</Button>
            <Button onClick={hideConfirm}>{t('cancel')}</Button>
            <Button onClick={runTab} type="primary">
              {t('execute')}
            </Button>
          </Space>
        }
      />
    </Wrapper>
  );
})

TitlebarBase = styled.div<Props>`
    height: var(--titlebar-height);
    display: flex;
    user-select: none;
    align-items: center;

    ${(props) =>
        props.overlay &&
        css`
            position: fixed;
            width: 100%;
        `}

    .drag {
        flex-grow: 1;
        -webkit-app-region: drag;
        margin-top: 10px;
        height: 100%;
    }

    .quick {
        color: var(--secondary-foreground);

        > div,
        > div > div {
            width: var(--titlebar-height) !important;
        }

        &.disabled {
            color: var(--error);
        }

        &.unavailable {
            background: var(--error);
        }
    }

    .title {
        -webkit-app-region: drag;
        /*height: var(--titlebar-height);*/
        font-size: 16px;
        font-weight: 600;
        margin-inline-start: 10px;
        margin-top: 10px;
        gap: 6px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        z-index: 90000;
        color: var(--titlebar-logo-color);

        svg {
            margin-bottom: 10px;
        }

        svg:first-child {
            height: calc(var(--titlebar-height) / 3);
        }
    }

    .actions {
        z-index: 100;
        display: flex;
        align-items: center;
        margin-inline-start: 6px;

        div {
            width: calc(
                var(--titlebar-height) + var(--titlebar-action-padding)
            );
            height: var(--titlebar-height);

            display: grid;
            place-items: center;
            transition: 0.2s ease color;
            transition: 0.2s ease background-color;

            &:hover {
                background: var(--primary-background);
            }

            &.error:hover {
                background: var(--error);
            }
        }
    }
`

StyledChatbot = styled(WrappedChatbot)`
  height: 100%;
  width: 100%;

  /* Removes shadow around avatar */
  .rsc-ts-bot .rsc-ts-image {
    box-shadow: none;
  }

  .rsc-container {
    box-shadow: none;
    border-radius: 0;
  }

  .rsc-content {
    padding: 15px;
    height: calc(
      100% - ${props => (props.showInput ? INPUT_HEIGHT : 0)}px - 30px
    );
    @media (max-width: ${mobileBreakpoint}px) {
      padding: 10px;
      height: calc(
        100% - ${props => (props.showInput ? INPUT_HEIGHT : 0)}px - 20px
      );
    }
  }

  .rsc-ts-bubble {
    font-size: ${props => props.theme.sizes.question};
    padding: calc(${props => props.theme.sizes.question} * 0.75);
    margin-top: 4px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    @media (max-width: ${mobileBreakpoint}px) {
      max-width: 100%;
    }
  }

  .rsc-cs {
    background: none;
    box-shadow: none;
  }

  .rsc-os {
    display: flex;
    align-items: flex-end;
    flex-grow: 1;
    justify-content: center;
  }

  .rsc-os-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 15px;
  }

  .rsc-os-option-element {
    z-index: 1000001;
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-perspective: 1000;
    color: ${props => props.theme.colors.primary};
    font-size: ${props => props.theme.sizes.buttonText};
    font-family: ${props => props.theme.fontFamily};
    padding: calc(${props => props.theme.sizes.buttonText} * 0.75);
    font-weight: 500;
    background: ${props => props.theme.colors.backgroundLight};
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    min-width: 6em;
    margin: 3px;
    cursor: pointer;
    @media (max-width: ${mobileBreakpoint}px) {
      padding: 11px;
      font-size: 14px;
    }
  }

  ${props =>
    !props.showInput &&
    css`
      .rsc-footer {
        display: none;
      }
    `}
`