function simple(component, styles) {
const comp = styled(component)(styles);
comp.create = newComp => {
return styled(newComp)(styles);
};
return comp;
}
const iconContainerFactory = (color, dimensions) =>
styled('span')({
display: 'block',
width: dimensions + 'rem',
height: dimensions + 'rem',
marginRight: '0.5rem',
'& *': {
fill: color,
},
'& > i': {
height: dimensions * 0.2 + 'rem',
},
});
}
}
};
export const Input = styled.input(styles, sizes, alignment, validation, { minHeight: 32 });
Input.styles = styles;
Input.sizes = sizes;
Input.alignment = alignment;
Input.displayName = 'Input';
export const Select = styled.select(styles, sizes, alignment, validation, {
height: 32,
userSelect: 'none',
paddingRight: 20,
});
Select.displayName = 'Select';
export const Textarea = styled(TextareaAutoResize)(styles, sizes, alignment, validation, {
minHeight: 32,
paddingTop: 5,
paddingBottom: 5,
overflow: 'visible',
});
Textarea.displayName = 'Textarea';
export const Button = styled.button(styles, sizes, alignment, validation, {
cursor: 'pointer',
userSelect: 'none',
minHeight: 32,
boxSizing: 'border-box',
});
Button.displayName = 'Button';
const LabelText = styled.div`
font-size: 0.75rem;
opacity: 0.54;
`;
const ShowAttribute = styled.span`
display: inline-block;
font-size: 0.625rem;
padding: 0.125rem 0.25rem;
color: #000;
margin-right: 0.25rem;
background: #d6d6d6;
`;
const FlexRowPaddingContainer = styled(FlexRowContainer)`
padding: 1rem;
`;
const CompanyHeader = ({ cinema }) => (
<FlexRowContainer css={{ marginBottom: "1rem" }}>
<img
alt="Sf logo"
src={sflogo}
css={{ height: "3rem", width: "auto", marginRight: "1rem" }}
/>
<FlexColumnContainer>
<HeaderText css={{ fontSize: "1rem" }}>{cinema}</HeaderText>
<LabelText>SF Bio</LabelText>
</FlexColumnContainer>
</FlexRowContainer>
import styled from "@emotion/styled"
const PlainList = styled("ul")`
list-style: none;
padding: 0;
margin: 0;
li {
display: ${props => (props.inline ? "inline-block" : "block")};
}
`
export default PlainList
CellMeasurerCache,
} from "react-virtualized";
// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import "react-virtualized/styles.css";
const cache = new CellMeasurerCache({
defaultHeight: 160,
fixedWidth: true,
});
const ListViewContainer = styled("div")({
backgroundColor: "#fff",
width: "100%",
// HACK: We are horizonally centering all content, and clipping the
// height at 80%, to work around a layout issue where the scrollbars
// are getting clipped off the right edge. This is because the html
// body element is larger than 100% for some reason...
// We should be able to fix this when we port over base.hbs.
height: "80%",
display: "flex",
alignItems: "center",
justifyContent: "center",
});
const ListViewContent = styled("div")({
marginTop: "24px",
import styled from "@emotion/styled"
import { Atoms } from "./designSystem"
export default styled("h3")`
font-size: ${Atoms.font.size.regular};
font-weight: 400;
font-style: italic;
hyphens: initial;
`
import { connect } from "react-redux";
import PropTypes from "prop-types";
import React from "react";
import styled from "@emotion/styled";
import {
isLeftSidebarExpandedSelector,
leftSidebarComponentSelector,
leftSidebarPanelConfigSelector,
setLeftSidebarExpanded,
} from "../../state/ducks/left-sidebar";
import MapLayerPanel from "./map-layer-panel";
const LeftSidebarOuterContainer = styled("section")({
position: "absolute",
zIndex: 9,
width: "250px",
height: "100%",
boxSizing: "border-box",
backgroundColor: "#fff",
lineHeight: "1rem",
boxShadow: "4px 0px 3px rgba(0,0,0,0.1)",
});
const LeftSidebarInnerContainer = styled("div")({
width: "100%",
height: "100%",
padding: "1em 1em 4em 1em",
overflow: "auto",
boxSizing: "border-box",
import PropTypes from "prop-types";
import styled from "@emotion/styled";
import { connect } from "react-redux";
import { translate } from "react-i18next";
import GeocodingField from "../form-fields/types/geocoding-field";
import { uiVisibilitySelector, layoutSelector } from "../../state/ducks/ui";
import { getMainContentAreaWidth } from "../../utils/layout-utils";
import { Mixpanel } from "../../utils/mixpanel";
const GeocodeAddressBarWrapper = styled(props => (
<form onSubmit={props.onSubmit} className={props.className}>
{props.children}
</form>
))(props => ({
display: "block",
position: "relative",
height: "42px",
backgroundColor: props.theme.brand.secondary,
boxShadow: "0 2px 0 rgba(0,0,0,0.2)",
boxSizing: "border-box",
zIndex: 9,
width: getMainContentAreaWidth({
isContentPanelVisible: props.isContentPanelVisible,
isRightSidebarVisible: props.isRightSidebarVisible,
layout: props.layout,
}),
}));
import { jsx, css } from "@emotion/core";
import { InfoModalTrigger } from "../atoms/feedback";
import { FontAwesomeIcon } from "../atoms/imagery";
import { HorizontalRule } from "../atoms/layout";
import { TinyTitle } from "../atoms/typography";
import { mapConfigSelector } from "../../state/ducks/map-config";
import {
sourcesMetadataSelector,
layerGroupsMetadataSelector,
updateLayerGroupVisibility,
sourcesMetadataPropType,
} from "../../state/ducks/map";
const MapLayerSelectorContainer = styled("div")({
display: "flex",
alignItems: "center",
paddingLeft: "16px",
paddingRight: "16px",
marginBottom: "16px",
});
const SelectableArea = styled("span")({
display: "flex",
flex: 1,
alignItems: "center",
"&:hover": {
cursor: "pointer",
},
const Header6 = ({ children, ...props }) => {
return (
<h6 className={classNames("mapseed__header6", props.classes)} {...props}>
{children}
</h6>
);
};
Header6.propTypes = {
children: PropTypes.node,
classes: PropTypes.string,
};
// Title atoms:
const LargeTitle = styled("h1")(props => ({
fontSize: "2rem",
fontFamily: props.theme.text.titleFontFamily,
margin: "16px 0 8px 0",
}));
const RegularTitle = styled("h2")(props => ({
fontSize: "1.8rem",
fontFamily: props.theme.text.titleFontFamily,
margin: "16px 0 8px 0",
}));
const SmallTitle = styled("h3")(props => ({
fontSize: "1.5rem",
fontFamily: props.theme.text.titleFontFamily,
margin: "16px 0 8px 0",
}));
const minWidth = props.theme.breakpoints[breakpoint];
if (!minWidth) {
return styles;
}
return `
@media (min-width: ${minWidth}) {
${styles};
}
`;
};
const padding = (prop, fallback) => props =>
props.theme.space[props[prop]] || props.theme.space[props[fallback]];
const Column = styled(Base)`
margin-left: ${push('right')};
margin-right: ${push('left')};
padding: ${padding('p')};
padding-top: ${padding('pt', 'py')};
padding-bottom: ${padding('pb', 'py')};
text-align: ${props => props.align};
order: ${props => props.order};
${props => BREAKPOINT_NAMES.map(column(props))};
`;
Column.propTypes = {
/** Array of 1/6, 5/6, 1/4, 3/3, 1/3, 2/3, 1/2, 1, auto */
width: PropTypes.arrayOf(
PropTypes.oneOf([
1 / 6,
import React from "react";
import Link from "gatsby-link";
import styled from "@emotion/styled";
const PostListItem = styled("div")`
a {
text-decoration: none;
color: inherit;
&:hover {
text-decoration: underline;
}
}
`;
const Meta = styled("p")`
margin: 0;
margin-top: 45px;
font-size: 0.75rem;
`;
const MainTitle = styled("h1")`
margin-top: 7px;
margin-bottom: 7px;
`;
const Title = styled("h2")`
margin-top: 7px;
margin-bottom: 7px;
`;
import React from "react"
import Img from "gatsby-image"
import styled from "@emotion/styled"
import { rhythm, options } from "../utils/typography"
import { mq, gutter } from "../utils/presets"
const Image = styled(Img)`
display: block;
float: right;
margin-bottom: ${rhythm(options.blockMarginBottom * 2)};
margin-left: ${rhythm(options.blockMarginBottom * 2)};
margin-right: -${gutter.default};
${mq.phablet} {
display: none;
}
`
const ImageDesktop = styled(Image)`
display: none;
${mq.phablet} {
display: block;
}
${mq.tablet} {
margin-right: -${gutter.tablet};
}
${mq.desktop} {
comp.create = newComp => {
return styled(newComp)(styles);
};
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import themeGet from '../util/themeGet';
import Base from './Base';
/**
* Text container with max width (`theme.page.textMaxWidth`) to avoid too wide
* text columns.
*/
const TextContainer = styled(Base)`
max-width: ${themeGet('page.textMaxWidth')};
`;
TextContainer.propTypes = {
as: PropTypes.any,
};
TextContainer.defaultProps = {
as: 'div',
};
/** @component */
export default TextContainer;
const Label = styled.label`
display: inline-block;
border-radius: 3px;
font-size: ${SMALL_FONT_SIZE};
padding: 0.5em 0;
`;
const UnstyledField = ({ children, text, ...props }) => (
<div {...props}>
<Label>{text}</Label>
<br />
{children}
</div>
);
export const FieldWithoutMaxWidth = styled(UnstyledField)`
margin-bottom: 1em;
> div {
width: 100%;
}
> input,
select {
border-radius: 4px;
border: 1px solid gray;
font-size: ${SMALL_FONT_SIZE};
padding: 0.5em 1em;
width: 100%;
}
`;
export default styled(FieldWithoutMaxWidth)`
import React from "react"
import styled from "@emotion/styled"
import { Global } from "@emotion/core"
import Atoms from "designSystem/atoms"
import H1 from "designSystem/H1"
import map from "utils/map"
import times from "utils/times"
const { useLayoutEffect, useState } = React
const StyledH1 = styled(H1)`
font-size: 8vw;
margin: 0;
margin-left: -50vw;
padding: 0;
width: 100vw;
`
export default function FourOhFour() {
const [position, setPosition] = useState({
x: 1,
y: 0.5,
})
// A function to track the current mouse position as a percentage of the viewport size
const mouseMoveListener = e => {
const { clientX, clientY } = e
const { innerWidth, innerHeight } = window
// Limit the value accuracy to speed up this effect
// }),
};
const emotionCss = css`
${cssContent}
`;
const JSSButton = injectSheet(cssObject)(props => (
<button type="button" className={props.classes.root} {...props} />
));
const WithStylesButton = withStyles(cssObject)(props => (
<button type="submit" className={props.classes.root} {...props} />
));
const EmotionButton = styledEmotion('button')(cssObject.root);
const StyledMuiButton = styledMui('button')(cssObject.root);
const StyledComponentsButton = styledComponents.button`${cssContent}`;
const useStyles = makeStyles(cssObject);
function HookButton(props) {
const classes = useStyles();
return <button type="button" className={classes.root} {...props} />;
}
const NakedButton = props => <button type="submit" {...props} />;
const EmotionCssButton = props => <button type="submit" css={emotionCss} {...props} />;
suite
.add('StyledMuiButton', () => {
const Positive = styled.strong({
color: colors.success,
fontWeight: 500,
});
const Negative = styled.strong({
color: colors.error,
fontWeight: 500,
});
const StackTrace = styled(({ trace, className }) => (
<details className={className}>
<summary>Callstack</summary>
{trace
.join('')
.trim()
.split(/\n/)
.map((traceLine, traceLineIndex) => (
// eslint-disable-next-line react/no-array-index-key
<div key={traceLineIndex}>{traceLine.trim()}</div>
))}
</details>
))({
background: 'silver',
padding: 10,
});
const Main = styled(({ msg, className }) => <section className={className}>{msg}</section>)({
padding: 10,
borderBottom: '1px solid silver',
});
const Sub = styled(({ msg, className }) => (
<section className={className}>
import React from 'react';
import format from 'date-fns/format';
import { graphql } from 'gatsby';
import { Ad } from '../components/Ad';
import { EmailSubscribe } from '../components/EmailSubscribe';
import { BlogPostHeadContent } from '../components/BlogPostHeadContent';
import Layout from '../components/Layout';
// import typography from '../utils/typography';
// import PostFooter from '../components/PostFooter';
import styled from '@emotion/styled';
// import { serifFontStack } from '../utils/typography';
import CategoryTag from '../components/CategoryTag';
import { Link } from 'gatsby';
const Title = styled('h1')({
display: 'block',
maxWidth: '100%',
});
const InfoBox = styled('div')({
fontSize: '14px',
'& > h4': {
fontSize: '20px',
marginBottom: '6px',
},
'& > h6': {
fontSize: '18px',
marginBottom: '6px',
marginTop: '12px',
},
export const Poster = styled.div`
min-width: 120px;
max-width: 120px;
background-image: url(${props => props.src}), url(${alfons});
background-size: cover;
background-repeat: no-repeat;
`;
export const Column = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
`;
export const CenterColumn = styled(Column)`
margin-left: ${largeMargin};
margin-right: ${largeMargin};
flex: 1;
align-items: flex-start;
`;
export const Content = styled.div``;
export const FaIcon = styled(FontAwesomeIcon)`
color: ${props => props.color};
font-size: 17px;
`;
export const RedButton = styled.button`
background-color: #d0021b;
font-family: ${fonts.header};
}
.ais-InfiniteHits-loadMore:hover,
.ais-InfiniteHits-loadMore:focus {
background-color: ${colors.gatsby};
color: ${colors.white};
}
.ais-InfiniteHits-loadMore[disabled] {
display: none;
}
`
/* stylelint-enable */
const StyledSkipNavLink = styled(SkipNavLink)({ ...skipLink })
// Search shows a list of "hits", and is a child of the PluginSearchBar component
class Search extends Component {
render() {
return (
<div
css={{
paddingBottom: rhythm(2.5),
[mediaQueries.md]: {
paddingBottom: 0,
},
}}
>
<div
css={{
author: "BJ Novak",
cover: "books/one-more-thing.jpg",
url: "https://amzn.to/2zQrZxm",
},
]
const list = books
.map(book => {
return {
...book,
title: book.title.replace(/ ([^ ]*)$/, "\u00A0$1"),
}
})
.sort((a, b) => strippedTitle(a.title).localeCompare(strippedTitle(b.title)))
const Library = styled("div")`
align-content: start;
place-items: start;
display: grid;
grid-gap: ${Atoms.spacing.medium};
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
`
export default function BookList() {
return (
<Library>
{list.map(({ title, author, cover, url }) => (
<Book
author={author}
cover={cover}
title={title}
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import Base from './Base';
const SIZES = ['xxl', 'xl', 'l', 'm', 's', 'xs'];
const Text = styled(Base)`
margin-top: ${props => props.theme.space[props.mt]};
margin-bottom: ${props => props.theme.space[props.mb]};
font-size: ${props => props.theme.fontSizes[props.size]};
font-weight: ${props => props.theme.fontWeights[props.fontStyle]};
font-style: ${props => props.fontStyle};
color: ${props => props.theme.colors[props.color]};
`;
Text.propTypes = {
size: PropTypes.oneOf(SIZES),
color: PropTypes.string,
fontStyle: PropTypes.oneOf(['italic']),
fontWeight: PropTypes.string,
as: PropTypes.any,
mt: PropTypes.oneOf(SIZES),
mb: PropTypes.oneOf(SIZES),
/** @ignore */
blacklist: PropTypes.array,
};
Text.defaultProps = {
size: 'm',
fontWeight: 'base',
as: 'p',
position: absolute;
background-color: ${theme.colors.black};
z-index: 1;
} */
`
const ArticleDate = styled.span`
display: block;
color: ${theme.colors.greys.l};
font-weight: 100;
font-family: ${theme.fonts.normal};
font-size: 0.75em;
text-transform: uppercase;
`
const ArticleLink = styled(UnstyledLink)`
display: flex;
flex-direction: column;
align-items: flex-start;
`
const SectionTitle = styled(Heading)`
display: inline-block;
position: relative;
color: ${theme.colors.white};
padding: 0.25em 0.5em;
background-color: ${theme.colors.black};
line-height: 1;
@media (max-width: ${theme.breakpoints[1]}) {
margin-bottom: ${theme.space[3]}px;
import { rhythm } from "../../utils/typography"
import {
colors,
space,
radii,
mediaQueries,
fontSizes,
letterSpacings,
lineHeights,
fonts,
} from "../../utils/presets"
const stripedBorderHeight = space[2]
const Container = styled(`div`)`
border: 1px solid ${colors.ui.light};
border-radius: ${radii[2]}px;
display: flex;
flex-direction: column;
margin-bottom: ${space[8]};
padding: calc(${space[8]} * 1.2);
padding-bottom: calc(${rhythm(space[8] * 1.2)} + ${stripedBorderHeight});
position: relative;
:after {
border-radius: 0 0 ${radii[2]}px ${radii[2]}px;
background: ${colors.ui.whisper}
repeating-linear-gradient(
135deg,
${colors.lemon},
/** @jsx jsx */
import React from "react";
import PropTypes from "prop-types";
import styled from "@emotion/styled";
import { css, jsx } from "@emotion/core";
import { InternalLink, SmallText } from "../atoms/typography";
const StoryChapterWrapper = styled(props => (
<InternalLink href={props.href} className={props.className}>
{props.children}
</InternalLink>
))(props => ({
display: "flex",
flexDirection: "row",
alignItems: "center",
marginLeft: "8px",
padding: "10px",
borderLeft: "2px solid transparent",
textDecoration: "none",
backgroundColor: props.isSelected ? props.theme.brand.accent : "#fff",
color: props.isSelected ? "#fff" : "#222",
"&:hover": {
cursor: "pointer",
borderLeft: `2px solid ${props.theme.brand.accent}`,
color: props.isSelected ? "#fff" : props.theme.brand.accent,
},
}));
const StoryChapterTitle = styled(props => (
import React from "react";
import PropTypes from "prop-types";
import styled from "@emotion/styled";
import { Button } from "../../atoms/buttons";
import { FontAwesomeIcon } from "../../atoms/imagery";
import emitter from "../../../utils/emitter";
import constants from "../../../constants";
const GeolocateButton = styled(props => (
<Button
color={props.color}
className={props.className}
onClick={props.onClick}
>
{props.children}
</Button>
))(() => ({
display: "flex",
alignItems: "center",
}));
const GeolocatePlaceholder = styled("span")({
paddingLeft: "8px",
textTransform: "none",
textAlign: "left",
color: "#444",
});
const GeolocateField = props => {
import React from 'react'
import styled from '@emotion/styled'
import { NavLink, UnstyledLink } from './Links'
import { Heading, Flex } from './Radicals'
import Logo from './Logo'
import theme from '../styles/theme'
const LogoTab = styled(UnstyledLink)`
background-color: ${theme.colors.black};
position: relative;
padding: 1rem 1rem 1rem 1rem;
margin-left: 0;
transition: width 200ms ease-in-out;
&:hover {
}
&::before {
content: '';
height: 100%;
width: 1rem;
left: -1rem;
top: 0;
position: absolute;
background-color: inherit;
z-index: 1;
}
`
const NavBlock = styled.nav`
display: flex;