polished#size JavaScript Examples

The following examples show how to use polished#size. 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: sidebar-nav.js    From webrtc-tutorial with MIT License 6 votes vote down vote up
StyledCheckbox = styled.input({
  ...size('100%'),
  cursor: 'pointer',
  position: 'absolute',
  top: 0,
  left: 0,
  opacity: 0,
  zIndex: 1,
  [`:hover ~ ${CategoryTitle}`]: {
    opacity: colors.hoverOpacity
  },
  ':not(:checked) ~': {
    [`${CategoryTitle} svg`]: {
      transform: 'scaleY(-1)'
    },
    [StyledList]: {
      display: 'none'
    }
  }
})
Example #2
Source File: index.js    From firecamp-doc with MIT License 6 votes vote down vote up
ExpandAll = styled.button(listItemStyles, /*smallCaps,*/ {
  display: 'flex',
  alignItems: 'center',
  marginBottom: 12,
  padding: '4px 0',
  border: 0,
  fontSize: 12,
  fontWeight: 600,
  lineHeight: 1,
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  svg: {
    ...size(12),
    marginRight: 8
  }
})
Example #3
Source File: videoBox.js    From guitar-book with MIT License 6 votes vote down vote up
StyledButton = styled.button({
  display: 'flex',
  alignItems: 'center',
  width: '100%',
  padding: `12px ${horizontalPadding}px`,
  border: 0,
  fontSize: 16,
  color: colors.primary,
  lineHeight: 'calc(5/3)',
  textAlign: 'left',
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  ':hover': {
    color: '#311c87'
  },
  ':active': {
    color: '#311c87'
  },
  svg: {
    ...size(iconSize),
    marginRight: iconMargin
  }
})
Example #4
Source File: sidebar-nav.js    From guitar-book with MIT License 6 votes vote down vote up
StyledCheckbox = styled.input({
  ...size('100%'),
  cursor: 'pointer',
  position: 'absolute',
  top: 0,
  left: 0,
  opacity: 0,
  zIndex: 1,
  [`:hover ~ ${CategoryTitle}`]: {
    opacity: colors.hoverOpacity
  },
  ':not(:checked) ~': {
    [`${CategoryTitle} svg`]: {
      transform: 'scaleY(-1)'
    },
    [StyledList]: {
      display: 'none'
    }
  }
})
Example #5
Source File: sidebar-nav.js    From guitar-book with MIT License 6 votes vote down vote up
categoryTitleStyles = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '12px 0',
  color: colors.text1,
  fontWeight: 'bold',
  fontSize: 14,
  lineHeight: '15px',
  ...smallCaps,
  svg: size(10),
  '&.active': {
    color: colors.primary
  }
}
Example #6
Source File: sidebar-nav.js    From guitar-book with MIT License 6 votes vote down vote up
ExpandAll = styled.button(smallCaps, {
  display: 'flex',
  alignItems: 'center',
  marginBottom: 12,
  padding: '4px 0',
  border: 0,
  fontSize: 12,
  fontWeight: 600,
  lineHeight: 1,
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  color: 'inherit',
  ':hover': {
    opacity: colors.hoverOpacity
  },
  svg: {
    ...size(12),
    marginRight: 8
  }
})
Example #7
Source File: docset-menu.js    From guitar-book with MIT License 6 votes vote down vote up
AppIcon = styled.div({
  ...size('100%'),
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  boxShadow: [
    getBoxShadow(0.12, 1, 2),
    getBoxShadow(0.1, 2, 4),
    getBoxShadow(0.08, 5, 10),
    `inset rgba(45, 31, 102, 0.4) 0 -1px 2px`
  ].toString(),
  borderRadius: 8,
  color: indigo.lighter,
  backgroundImage: `linear-gradient(${[indigo.base, indigo.dark]})`,
  svg: {
    ...size(16),
    fill: 'currentColor'
  }
})
Example #8
Source File: sidebar-nav.js    From webrtc-tutorial with MIT License 6 votes vote down vote up
ExpandAll = styled.button(smallCaps, {
  display: 'flex',
  alignItems: 'center',
  marginBottom: 12,
  padding: 0,
  border: 0,
  fontSize: 12,
  fontWeight: 600,
  lineHeight: 1,
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  color: 'inherit',
  ':hover': {
    opacity: colors.hoverOpacity
  },
  svg: {
    ...size(12),
    marginRight: 8
  }
})
Example #9
Source File: sidebar-nav.js    From webrtc-tutorial with MIT License 6 votes vote down vote up
categoryTitleStyles = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '12px 0',
  color: colors.text1,
  fontWeight: 'bold',
  fontSize: 14,
  lineHeight: '15px',
  ...smallCaps,
  svg: size(10),
  '&.active': {
    color: colors.primary
  }
}
Example #10
Source File: search.js    From guitar-book with MIT License 6 votes vote down vote up
Hotkey = styled.div(verticalAlign, size(24), {
  border,
  borderColor: colors.text4,
  color: colors.text4,
  borderRadius,
  textAlign: 'center',
  lineHeight: 1.125,
  right: 10,
  pointerEvents: 'none'
})
Example #11
Source File: page-nav.js    From guitar-book with MIT License 6 votes vote down vote up
StyledLink = styled(Link)({
  display: 'flex',
  alignItems: 'center',
  color: 'inherit',
  textDecoration: 'none',
  svg: size(16),
  ':hover': {
    opacity: colors.hoverOpacity
  }
})
Example #12
Source File: docset-menu.js    From documentation with BSD Zero Clause License 6 votes vote down vote up
AppIcon = styled.div({
  ...size('100%'),
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  boxShadow: [
    getBoxShadow(0.12, 1, 2),
    getBoxShadow(0.1, 2, 4),
    getBoxShadow(0.08, 5, 10),
    `inset rgba(45, 31, 102, 0.4) 0 -1px 2px`
  ].toString(),
  borderRadius: 8,
  color: indigo.lighter,
  backgroundImage: `linear-gradient(${[indigo.base, indigo.dark]})`,
  svg: {
    ...size(16),
    fill: 'currentColor'
  }
})
Example #13
Source File: expansion-panel.js    From guitar-book with MIT License 6 votes vote down vote up
ListItemNumber = styled.div(size(lineItemNumberSize), {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: `1px solid ${colors.primary}`,
  borderRadius: '50%',
  fontSize: 14,
  color: colors.primary,
  textAlign: 'center',
  backgroundColor: 'white',
  position: 'absolute',
  top: 0,
  left: lineItemNumberSize / -2,
  svg: size(iconSize)
})
Example #14
Source File: expansion-panel.js    From guitar-book with MIT License 6 votes vote down vote up
StyledButton = styled.button({
  display: 'flex',
  alignItems: 'center',
  width: '100%',
  padding: `12px ${horizontalPadding}px`,
  border: 0,
  fontSize: 16,
  color: colors.primary,
  lineHeight: 'calc(5/3)',
  textAlign: 'left',
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: transparentize(0.95, 'black')
  },
  ':active': {
    backgroundColor: transparentize(0.9, 'black')
  },
  svg: {
    ...size(iconSize),
    marginRight: iconMargin
  }
})
Example #15
Source File: docset-switcher.js    From guitar-book with MIT License 6 votes vote down vote up
SocialLink = styled.a({
  color: colors.text2,
  ':hover': {
    color: colors.text3
  },
  ':not(:last-child)': {
    marginRight: 24
  },
  svg: {
    ...size(24),
    display: 'block',
    fill: 'currentColor'
  }
})
Example #16
Source File: allChordsPreview.js    From guitar-book with MIT License 6 votes vote down vote up
StyledButton = styled.button({
  display: 'flex',
  alignItems: 'center',
  width: '100%',
  padding: `12px ${horizontalPadding}px`,
  border: 0,
  fontSize: 16,
  color: colors.primary,
  lineHeight: 'calc(5/3)',
  textAlign: 'left',
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  ':hover': {
    color: '#311c87'
  },
  ':active': {
    color: '#311c87'
  },
  svg: {
    ...size(iconSize),
    marginRight: iconMargin
  }
})
Example #17
Source File: select.js    From guitar-book with MIT License 5 votes vote down vote up
Select.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object,
  size: PropTypes.string,
  value: PropTypes.string.isRequired,
  options: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired
};
Example #18
Source File: sidebar-nav.js    From webrtc-tutorial with MIT License 5 votes vote down vote up
StyledOutlinkIcon = styled(IconOutlink)(size(14), {
  verticalAlign: -1,
  marginLeft: 8,
  color: colors.text3
})
Example #19
Source File: menu.js    From documentation with BSD Zero Clause License 5 votes vote down vote up
IconWrapper = styled.div({
  ...size(28),
  flexShrink: 0,
  marginRight: 16,
})
Example #20
Source File: index.js    From firecamp-doc with MIT License 5 votes vote down vote up
StyledOutlinkIcon = styled(IconOutlink)(size(14), {
  verticalAlign: -1,
  marginLeft: 8,
  // color: colors.text3
})
Example #21
Source File: sub-pages-menu.js    From documentation with BSD Zero Clause License 5 votes vote down vote up
AppIcon = styled.div({
  ...size("100%"),
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  // padding: "2px",
  color: indigo.lighter
})
Example #22
Source File: sidebar-nav.js    From guitar-book with MIT License 5 votes vote down vote up
StyledOutlinkIcon = styled(IconOutlink)(size(14), {
  verticalAlign: -1,
  marginLeft: 8,
  color: colors.text3
})
Example #23
Source File: select.js    From guitar-book with MIT License 5 votes vote down vote up
StyledIcon = styled(IconArrowDown)(size('1em'), {
  marginLeft: 12
})
Example #24
Source File: select.js    From guitar-book with MIT License 5 votes vote down vote up
export function Select({className, style, options, value, onChange, ...props}) {
  const wrapperRef = useRef(null);
  const [open, setOpen] = useState(false);

  const optionKeys = useMemo(() => Object.keys(options), [options]);
  const labelHeight = useMemo(() => {
    switch (props.size) {
      case 'small':
        return 20;
      case 'large':
        return 27;
      default:
        return 22;
    }
  }, [props.size]);

  useClickAway(wrapperRef, () => {
    setOpen(false);
  });

  function handleClick() {
    setOpen(prevOpen => !prevOpen);
  }

  return (
    <Wrapper className={className} style={style} ref={wrapperRef}>
      <Button {...props} onClick={handleClick}>
        <LabelWrapper style={{height: labelHeight}}>
          {optionKeys.map(key => (
            <Spacer key={key}>{options[key]}</Spacer>
          ))}
          <Label>{options[value]}</Label>
        </LabelWrapper>
        <StyledIcon />
      </Button>
      {open && (
        <Menu>
          {optionKeys.map(key => {
            const text = options[key];
            return (
              <MenuItem
                key={key}
                onClick={() => {
                  onChange(key);
                  setOpen(false);
                }}
                className={key === value && 'selected'}
              >
                {text}
              </MenuItem>
            );
          })}
        </Menu>
      )}
    </Wrapper>
  );
}
Example #25
Source File: page-layout.js    From guitar-book with MIT License 5 votes vote down vote up
StyledIcon = styled(IconLayoutModule)(size(16), {
  marginLeft: 'auto'
})
Example #26
Source File: menu-button.js    From guitar-book with MIT License 5 votes vote down vote up
StyledIcon = styled(IconMenu)(size(24), {
  display: 'block',
  fill: 'currentColor'
})
Example #27
Source File: menu.js    From guitar-book with MIT License 5 votes vote down vote up
IconWrapper = styled.div({
  ...size(28),
  flexShrink: 0,
  marginRight: 16,
})
Example #28
Source File: search.js    From guitar-book with MIT License 4 votes vote down vote up
export default function Search(props) {
  const [focused, setFocused] = useState(false);
  const [value, setValue] = useState('');
  const [result, setResult] = useState([]);
  const [mouseOver, setMouseOver] = useState(false);
  const resultLimit = 10;
  const inputRef = useRef(null);

  const data = useStaticQuery(graphql`
    query {
      allFile {
        edges {
          node {
            childMdx {
              frontmatter {
                title
                description
              }
              slug
              rawBody
            }
          }
        }
      }
    }
  `);

  const nodes = data.allFile.edges
      .map(n => n.node.childMdx)
      .filter(n => n && !!n.slug);

  const search = (searchText) => {
    searchText = searchText.trim();
    if (!searchText) return [];
    let searchRegExp = new RegExp(searchText, "i");
    return nodes.map(n => {
      n.lyrics = n.rawBody.substring(n.rawBody.indexOf('<Verse text={`') + 14, n.rawBody.lastIndexOf('`}/>'));
      n.filter = {
        title: n.frontmatter.title.search(searchRegExp),
        author: n.frontmatter.description.search(searchRegExp),
        lyrics: n.lyrics.search(searchRegExp)
      };

      return n;
    }).filter(({filter: {title, author, lyrics}}) => title !== -1 || author !== -1 || lyrics !== -1)
        .sort(({filter: {title: titleA, author: authorA, lyrics: lyricsA}}, {filter: {title: titleB, author: authorB, lyrics: lyricsB}}) => {
          if(titleA !== -1 && titleB !== -1) return titleA - titleB;
          else if(titleA !== -1) return -1;
          else if(titleB !== -1) return 1;

          if(authorA !== -1 && authorB !== -1) return authorA - authorB;
          else if(authorA !== -1) return -1;
          else if(authorB !== -1) return 1;

          if(lyricsA !== -1 && lyricsB !== -1) return lyricsA - lyricsB;
          else if(lyricsA !== -1) return -1;
          else if(lyricsB !== -1) return 1;
          return 1;
        }).slice(0, resultLimit);
  };

  // focus the input when the slash key is pressed
  useKey(
    event =>
      event.keyCode === 191 && event.target.tagName.toUpperCase() !== 'INPUT',
    event => {
      event.preventDefault();
      inputRef.current.focus();
    }
  );

  function onChange(event) {
    setValue(event.target.value);
    setResult(search(event.target.value));
  }

  function onFocus() {
    setFocused(true);
  }
  function onBlur() {
    setFocused(false);
  }

  const resultsShown = (focused && value.trim()) || mouseOver;
  return (
    <>
      <Overlay visible={resultsShown} />
      <Container>
        <TextField
          type="search"
          size="large"
          inputAs={
            <input
              ref={inputRef}
              id="input"
              autoComplete="off"
              style={{
                fontSize: 16,
                boxShadow: resultsShown ? boxShadow : 'none'
              }}
            />
          }
          onFocus={onFocus}
          onBlur={onBlur}
          onChange={onChange}
          value={value}
          placeholder={`Search ${props.siteName}`}
        />
        {!focused && !value && <Hotkey>/</Hotkey>}
        {resultsShown &&
          <SuggestionBox>
            {result.length ?
              <>
                {result.map((res,index) =>
                  <Suggestion
                    key={index}
                    onMouseEnter={() => setMouseOver(true)}
                    onMouseLeave={() => setMouseOver(false)}
                    onClick={ () => {
                      navigate(`/${res.slug}/`);
                      setMouseOver(false);
                      setValue('');
                    }}
                  >
                    <Title>{res.frontmatter.title}</Title>
                    <Author>{res.frontmatter.description}</Author>
                    <Lyrics>{res.lyrics.substr(res.filter.lyrics < 0 ? 0 : res.filter.lyrics, 20)}</Lyrics>
                  </Suggestion>)}
              </>:
              <NoResultsInfo>No results found for query &quot;{value}&quot;</NoResultsInfo>
            }
          </SuggestionBox>
        }
      </Container>
    </>
  );
}
Example #29
Source File: page-layout.js    From guitar-book with MIT License 4 votes vote down vote up
export default function PageLayout(props) {
  const data = useStaticQuery(
    graphql`
      {
        site {
          siteMetadata {
            title
            siteName
          }
        }
      }
    `
  );

  const {
    sidebarRef,
    openSidebar,
    sidebarOpen,
    handleWrapperClick,
    handleSidebarNavLinkClick
  } = useResponsiveSidebar();

  const buttonRef = useRef(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const selectedLanguageState = useLocalStorage('docs-lang');

  function openMenu() {
    setMenuOpen(true);
  }

  function closeMenu() {
    setMenuOpen(false);
  }

  const {pathname} = props.location;
  const {siteName, title} = data.site.siteMetadata;
  const {
    subtitle,
    sidebarContents,
    versions,
    versionDifference,
    versionBasePath,
    defaultVersion
  } = props.pageContext;
  const {
    twitterHandle,
    youtubeUrl,
    navConfig = {},
    footerNavConfig,
    logoLink,
    menuTitle
  } = props.pluginOptions;

  const navItems = useMemo(
    () =>
      Object.entries(navConfig).map(([title, navItem]) => ({
        ...navItem,
        title
      })),
    [navConfig]
  );

  const hasNavItems = navItems.length > 0;
  const sidebarTitle = (
    <span className="title-sidebar">{subtitle || siteName}</span>
  );

  return (
    <Layout>
      <Helmet
        titleTemplate={['%s', subtitle, title].filter(Boolean).join(' - ')}
      >
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1"
        />
      </Helmet>
      <FlexWrapper onClick={handleWrapperClick}>
        <Sidebar
          responsive
          className="sidebar"
          open={sidebarOpen}
          ref={sidebarRef}
          title={siteName}
          logoLink={logoLink}
        >
          <HeaderInner>
            {hasNavItems ? (
              <ButtonWrapper ref={buttonRef}>
                <StyledButton
                  feel="flat"
                  color={colors.primary}
                  size="small"
                  onClick={openMenu}
                  style={{display: 'flex'}}
                >
                  {sidebarTitle}
                  <StyledIcon />
                </StyledButton>
              </ButtonWrapper>
            ) : (
              sidebarTitle
            )}
            {versions && versions.length > 0 && (
              <Select
                feel="flat"
                size="small"
                value={versionDifference ? versionBasePath : '/'}
                onChange={navigate}
                style={{marginLeft: 8}}
                options={versions.reduce(
                  (acc, version) => ({
                    ...acc,
                    [getVersionBasePath(version)]: getVersionLabel(version)
                  }),
                  {
                    '/': defaultVersion
                      ? getVersionLabel(defaultVersion)
                      : 'Latest'
                  }
                )}
              />
            )}
          </HeaderInner>
          {sidebarContents && (
            <SidebarNav
              contents={sidebarContents}
              pathname={pathname}
              onToggleAll={handleToggleAll}
              onToggleCategory={handleToggleCategory}
              onLinkClick={handleSidebarNavLinkClick}
            />
          )}
        </Sidebar>
        <Main>
          <Header>
            <MobileNav>
              <MenuButton onClick={openSidebar} />
            </MobileNav>
            <Search siteName={siteName} />
            <Toolbox pathname={pathname} />
          </Header>
          <SelectedLanguageContext.Provider value={selectedLanguageState}>
            <NavItemsContext.Provider value={navItems}>
              {props.children}
            </NavItemsContext.Provider>
          </SelectedLanguageContext.Provider>
        </Main>
      </FlexWrapper>
      {hasNavItems && (
        <DocsetSwitcher
          siteName={menuTitle || siteName}
          twitterUrl={twitterHandle && `https://twitter.com/${twitterHandle}`}
          youtubeUrl={youtubeUrl}
          navItems={navItems}
          footerNavConfig={footerNavConfig}
          open={menuOpen}
          buttonRef={buttonRef}
          onClose={closeMenu}
        />
      )}
    </Layout>
  );
}