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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
MobileNavigation = styled(motion.nav)`
  @media ${QUERIES.laptopAndUp} {
    display: none;
  }
`