utils#QUERIES TypeScript Examples

The following examples show how to use utils#QUERIES. 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: PoolSelection.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Wrapper = styled(Section)`
  --radius: 30px;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  @media ${QUERIES.tabletAndUp} {
    padding-top: 30px;
  }
`

Example #2

Source File: Pool.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Wrapper = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  @media ${QUERIES.tabletAndUp} {
    padding-bottom: 0;
    height: 100%;
  }
`

Example #3

Source File: Confirmation.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

SecondaryLink = styled(Link)`
  color: inherit;
  & > span:first-of-type {
    display: none;
    @media ${QUERIES.tabletAndUp} {
      display: revert;
    }
  }
  & > span {
    @media ${QUERIES.tabletAndUp} {
      display: none;
    }
  }
`

Example #4

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

FooterLink = styled.a`
  color: inherit;
  text-decoration: none;
  transition: color 100ms linear;
  display: none;

  & svg {
    width: 25px;
    height: 25px;
    & path {
      fill: currentColor;
    }
  }

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

  &:hover {
    color: var(--color-white);
  }

  @media ${QUERIES.tabletAndUp} {
    display: revert;
  }
`

Example #5

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Footer = styled.footer`
  display: flex;
  align-items: center;
  margin-top: auto;
  padding: 35px 0;
  color: hsla(${COLORS.white} / 0.5);
  @media ${QUERIES.tabletAndUp} {
    border-top: 1px solid currentColor;
  }
`

Example #6

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

BulletHeader = styled.h4`
  font-size: ${20 / 16}rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  transform: translateY(-5px);
  @media ${QUERIES.tabletAndUp} {
    font-size: ${30 / 16}rem;
    margin-bottom: 14px;
  }
`

Example #7

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Image = styled.img`
  height: 35px;
  width: 35px;
  object-fit: cover;
  margin-right: 45px;
  display: none;
  @media ${QUERIES.laptopAndUp} {
    display: revert;
  }
`

Example #8

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Bullet = styled.article`
  --bulletMarginTop: 32px;
  display: flex;
  align-items: flex-start;
  &:not(:first-of-type) {
    margin-top: var(--bulletMarginTop);
  }
  @media ${QUERIES.tabletAndUp} {
    --bulletMarginTop: 64px;
  }
`

Example #9

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

HeroHeader = styled.h1`
  color: var(--color-primary);
  // will change the font from 24px to 56px fluidly
  font-size: clamp(1.5rem, 2.9vw + 1rem, 3.5rem);
  font-weight: 700;
  line-height: 1.28;
  max-width: 65ch;
  @media ${QUERIES.tabletAndUp} {
    max-width: 1000px;
  }
`

Example #10

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Wrapper = styled.div`
  --horinzontal-padding: 20px;
  --heroHeight: 180px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 var(--horinzontal-padding);
  @media ${QUERIES.tabletAndUp} {
    --horizontal-padding: 50px;
    --heroHeight: 200px;
  }
  @media ${QUERIES.desktopAndUp} {
    --horinzontal-padding: 75px;
    --heroHeight: 240px;
  }
`

Example #11

Source File: Wallet.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Info = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-transform: capitalize;
  border-radius: var(--radius) 0 0 var(--radius);
  border: 1px solid var(--color-gray);
  padding: 5px 10px;
  white-space: nowrap;
  & > div {
    line-height: 1;
  }
  & > div:last-of-type {
    color: var(--color-gray-300);
    font-size: ${14 / 16}rem;
  }
  @media ${QUERIES.tabletAndUp} {
    padding: 10px 20px 5px;
  }
`

Example #12

Source File: Wallet.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Account = styled.div`
  background-color: var(--color-gray);
  color: var(--color-white);
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
  border: 1px solid var(--color-gray);
  @media ${QUERIES.tabletAndUp} {
    padding: 0 30px;
  }
`

Example #13

Source File: SendAction.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

SlippageDisclaimer = styled.div`
  display: flex;
  align-items: center;

  svg {
    margin-right: 15px;
    width: 26px;
  }

  @media ${QUERIES.tabletAndUp} {
    svg {
      width: 32px;
    }
  }
`

Example #14

Source File: PoolForm.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Wrapper = styled.div`
  min-height: 80%;
  flex: 1;
  background-color: var(--color-primary);
  border-radius: 12px 12px 0 0;
  padding: 0 10px;
  @media ${QUERIES.tabletAndUp} {
    padding: 0 30px;
  }
`

Example #15

Source File: Layout.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Wrapper = styled.div`
  position: relative;
  display: grid;
  padding: 0 10px;
  grid-template-columns: 1fr min(var(--central-content), 100%) 1fr;
  min-height: 100%;
  height: fit-content;
  @media ${QUERIES.tabletAndUp} {
    padding: 0 30px;
  }
`

Example #16

Source File: Layout.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

LinkFooter = styled(BaseFooter)`
  display: none;
  align-items: center;
  & svg {
    width: 25px;
    height: 25px;
  }
  @media ${QUERIES.laptopAndUp} {
    display: flex;
  }
`

Example #17

Source File: CoinSelection.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

RoundBox = styled(UnstyledBox)`
  --color: var(--color-white);
  --outline-color: var(--color-primary);
  background-color: var(--color);
  font-size: ${16 / 16}rem;
  padding: 10px 15px;
  margin-top: 16px;
  display: flex;
  @media ${QUERIES.tabletAndUp} {
    flex: 2;

    &:first-of-type {
      margin-right: 16px;
      flex: 1;
    }
  }
  &:not(:first-of-type):focus-within {
    outline: ${isSafari ? "none" : "var(--outline-color) solid 1px"};
  }
`

Example #18

Source File: CoinSelection.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Menu = styled.ul<MenuProps>`
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 10px;
  transform: translateY(50%);
  box-shadow: ${({ isOpen }) =>
    isOpen ? `0px 160px 8px 8px hsla(${COLORS.gray[500]} / 0.2)` : "none"};
  list-style: none;
  display: flex;
  flex-direction: column;
  z-index: 1;
  outline: none;
  pointer-events: ${({ isOpen }) => (isOpen ? "auto" : "none")};
  @media ${QUERIES.tabletAndUp} {
    transform: translateY(100%);
  }
`

Example #19

Source File: Dialog.styles.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Wrapper = styled(DialogContent)`
  position: relative;
  padding: 20px 25px;
  background-color: var(--color-primary);
  color: var(--color-gray);
  outline: none;
  border-radius: 12px;
  max-width: 440px;
  width: min(440px, calc(100% - 20px));
  top: 10%;
  overflow: auto;
  max-height: 80vh;
  @media ${QUERIES.tabletAndUp} {
    top: 17%;
  }
`

Example #20

Source File: GlobalStyles.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

variables = css`
  :root {
    /* COLORS */
    --color-gray: hsl(${COLORS.gray[500]});
    --color-gray-300: hsla(${COLORS.gray[300]});
    --color-gray-200: hsla(${COLORS.gray[200]});
    --color-gray-100: hsla(${COLORS.gray[100]});
    --color-white: hsl(${COLORS.white});
    --color-black: hsl(${COLORS.black});
    --color-primary: hsl(${COLORS.primary[500]});
    --color-primary-dark: hsl(${COLORS.primary[700]});
    --color-secondary: hsl(${COLORS.secondary[500]});
    --color-error: hsl(${COLORS.error[500]});
    --color-error-light: hsl(${COLORS.error[300]});
    --color-uma-red: hsl(${COLORS.umaRed});
    --color-purple: hsl(${COLORS.purple});
    --color-primary-transparent: hsla(${COLORS.primary[500]} / 0.4);
    --color-black-transparent: hsla(${COLORS.black} / 0.75);
    --color-white-transparent: hsla(${COLORS.white} / 0.75);
    --color-gray-transparent: rgba(45, 46, 51, 0.1);
    --color-banner: hsla(${COLORS.banner});
    /*
    Silence the warning about missing Reach Dialog styles
  */
    --reach-dialog: 1;

    /* 
    Keep a consistent width between the middle section and the headers
  */
    --central-content: 500px;
    --header-height: 60px;
    @media ${QUERIES.tabletAndUp} {
      --header-height: 100px;
    }
  }
`

Example #21

Source File: Header.styles.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Wrapper = styled.header`
  height: var(--header-height);
  padding: 0 20px;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  gap: 15px;
  align-items: center;
  background-color: var(--color-primary);
  color: var(--color-gray);
  @media ${QUERIES.tabletAndUp} {
    padding: 0 30px;
    grid-template-columns: 1fr min(100%, var(--central-content)) 1fr;
  }
`

Example #22

Source File: Header.styles.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

Navigation = styled.nav`
  height: 100%;
  display: none;
  @media ${QUERIES.laptopAndUp} {
    display: revert;
  }
  svg,
  path {
    line-height: 0 !important;
  }
`

Example #23

Source File: Layout.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

BaseFooter = styled.footer`
  position: sticky;
  bottom: 0;
  padding: 0 15px 15px;
  align-self: self-end;
  justify-self: center;
  @media ${QUERIES.laptopAndUp} {
    justify-self: start;
  }
`

Example #24

Source File: Layout.tsx From frontend-v1 with GNU Affero General Public License v3.0

6 votes

LogoFooter = styled(BaseFooter)`
  position: absolute;
  right: 10px;
  @media ${QUERIES.tabletAndUp} {
    position: sticky;
    right: revert;
    margin-left: auto;
  }
`

Example #25

Source File: Header.styles.tsx From frontend-v1 with GNU Affero General Public License v3.0

5 votes

MobileLogo = styled(UnstyledMobileLogo)`
  @media ${QUERIES.laptopAndUp} {
    display: none;
  }
`

Example #26

Source File: Header.styles.tsx From frontend-v1 with GNU Affero General Public License v3.0

5 votes

Logo = styled(UnstyledDesktopLogo)`
  display: none;
  @media ${QUERIES.laptopAndUp} {
    display: revert;
  }
`

Example #27

Source File: Header.styles.tsx From frontend-v1 with GNU Affero General Public License v3.0

5 votes

LogoLink = styled(UnstyledLink)`
  padding-left: 10px;
  @media ${QUERIES.desktopAndUp} {
    /* padding-left: 45px; */
  }
  line-height: 0;
`

Example #28

Source File: About.tsx From frontend-v1 with GNU Affero General Public License v3.0

5 votes

Body = styled.section`
  flex: 1;
  padding: 15px 0 50px;
  @media ${QUERIES.tabletAndUp} {
    padding: 55px 0 65px;
  }
`

Example #29

Source File: Header.styles.tsx From frontend-v1 with GNU Affero General Public License v3.0

5 votes

MobileNavigation = styled(motion.nav)`
  @media ${QUERIES.laptopAndUp} {
    display: none;
  }
`