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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
IconWrapper = styled.div({ ...size(28), flexShrink: 0, marginRight: 16, })
Example #20
Source File: index.js From firecamp-doc with MIT License | 5 votes |
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 |
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 |
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 |
StyledIcon = styled(IconArrowDown)(size('1em'), {
marginLeft: 12
})
Example #24
Source File: select.js From guitar-book with MIT License | 5 votes |
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 |
StyledIcon = styled(IconLayoutModule)(size(16), {
marginLeft: 'auto'
})
Example #26
Source File: menu-button.js From guitar-book with MIT License | 5 votes |
StyledIcon = styled(IconMenu)(size(24), {
display: 'block',
fill: 'currentColor'
})
Example #27
Source File: menu.js From guitar-book with MIT License | 5 votes |
IconWrapper = styled.div({ ...size(28), flexShrink: 0, marginRight: 16, })
Example #28
Source File: search.js From guitar-book with MIT License | 4 votes |
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 "{value}"</NoResultsInfo>
}
</SuggestionBox>
}
</Container>
</>
);
}
Example #29
Source File: page-layout.js From guitar-book with MIT License | 4 votes |
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>
);
}