How to use preact-emotion - 10 common examples

background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0;
    height: 1.6em;
    color: var(--font-color);
    font-size: var(--font-size);
  }
`

const DialogClose = styled.span`
  position: absolute;
  top: 1em;
  right: 1em;
`

const Checkbox = styled.div`
  user-select: none;

  /* Base for label styling */
  [type='checkbox'] {
    position: absolute;
    left: -9999px;
  }

  label {
    position: relative;
    padding-right: 2em;
    cursor: pointer;
  }

  /* checkbox aspect */
  label:before {

}

const darkTheme = {
  backgroundColor: '#022B3A',
  fontColor: '#CACED1',
  borderColor: '#1F7A8C',
  linkColor: '#1F7A8C',
  dialogBackground: 'rgba(0, 0, 0, 0.7)'
}

const themes = {
  light: lightTheme,
  dark: darkTheme
}

const Theme = styled.div`
  --background-color: ${({ theme }) => themes[theme].backgroundColor};
  --font-color: ${({ theme }) => themes[theme].fontColor};
  --border-color: ${({ theme }) => themes[theme].borderColor};
  --link-color: ${({ theme }) => themes[theme].linkColor};

  --dialog-background: ${({ theme }) => themes[theme].dialogBackground};
  --font-size: 16px;

  font-size: var(--font-size);
  font-family: -apple-system, sans-serif;
  color: var(--font-color);
  background-color: var(--background-color);

  /* Believe me, it's ok */
  a,
  a:visited,

import { h, Component } from 'preact' // eslint-disable-line no-unused-vars
import styled from 'preact-emotion'
import { createSelector, createStructuredSelector } from 'reselect'
import { SpeakerNotes } from './SpeakerNotes'
import { Consumer } from '../controlApp'
import { PresentationFrame } from './PresentationFrame'
import { Controls } from './Controls'
import { Bookmarklet } from './Bookmarklet'

const BlocksContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: var(--blocks-height);

  & > * {
    width: 100%;
    border-top: 2px solid var(--border-color);
    overflow: scroll;
    height: calc(var(--blocks-height) / ${(props) => props.children.length});
  }
`

const BlockContainer = styled.div`
  order: ${(props) => props.order};
  flex-grow: 1;
  display: ${(props) => (props.order < 0 ? 'none' : 'block')};

/* checked mark aspect changes */
  [type='checkbox']:checked + label:after {
    border-color: var(--border-color);
  }

  [type='checkbox']:focus + label:before {
    outline: #52796f auto 5px;
  }

  /* hover style just for information */
  label:hover:before {
    background: var(--dialog-background);
  }
`

const Button = styled.button`
  display: inline-block;
  height: 2em;
  line-height: 2em;
  background: transparent;
  color: var(--font-color);
  font-size: var(--font-size);
  border: 1px solid var(--border-color);

  &:active {
    background: var(--dialog-background);
  }

  &:focus {
    outline: #52796f auto 5px;
  }
`

form *:focus {
    outline: #52796f auto 5px;
  }

  select {
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0;
    height: 1.6em;
    color: var(--font-color);
    font-size: var(--font-size);
  }
`

const DialogClose = styled.span`
  position: absolute;
  top: 1em;
  right: 1em;
`

const Checkbox = styled.div`
  user-select: none;

  /* Base for label styling */
  [type='checkbox'] {
    position: absolute;
    left: -9999px;
  }

  label {
    position: relative;

import styled, { css } from 'preact-emotion';

export const TooltipWrapper = styled('div')`
  position: relative;
`;

export const TooltipSpan = styled('span')`
  background: ${({ theme }) => `${theme.primary}80`};
  border-radius: 5px;
  color: ${({ theme }) => theme.primaryInverse};
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  position: absolute;
  width: max-content;

  ${({ pointing }) =>
    pointing === 'top left' &&
    css`

import styled, { css } from 'preact-emotion';

export const TooltipWrapper = styled('div')`
  position: relative;
`;

export const TooltipSpan = styled('span')`
  background: ${({ theme }) => `${theme.primary}80`};
  border-radius: 5px;
  color: ${({ theme }) => theme.primaryInverse};
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  position: absolute;
  width: max-content;

  ${({ pointing }) =>
    pointing === 'top left' &&
    css`
      top: -30px;
      right: 0;
    `}

import styled from 'preact-emotion'
import { createSelector, createStructuredSelector } from 'reselect'
import { throttle } from '../../utils/throttle'

const DragContainer = styled.div`
  display: flex;
  justify-content: space-between;
`

const DropArea = styled.div`
  height: calc(9em + 2px);
  width: calc(50% - 0.2em + 2px);
  border: 1px dashed var(--border-color);
`

const DeleteArea = styled(DropArea)`
  position: relative;

  ::after {
    content: 'delete';
    font-weight: bold;
    font-size: 3em;
    font-family: 'Material Icons';
    opacity: 0.3;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: -1;
  }

import { forPhoneOnly, growStyle } from 'src/shared';

export const FooterDiv = styled('div')`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  background-color: ${props => props.theme.backgroundSecondary};
  border-top: 1px solid ${props => props.theme.primary};

  ${forPhoneOnly} {
    height: 70px;
  }
`;

export const LinkA = styled('a')`
  font-size: 16px;
  font-weight: 600;
  color: ${props => props.theme.secondary};
  text-decoration: none;
  ${growStyle} ${forPhoneOnly} {
    font-size: 14px;
  }
`;

* the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

import styled from 'preact-emotion';

import { forPhoneOnly, growStyle } from 'src/shared';

export const FooterDiv = styled('div')`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  background-color: ${props => props.theme.backgroundSecondary};
  border-top: 1px solid ${props => props.theme.primary};

  ${forPhoneOnly} {
    height: 70px;
  }
`;

export const LinkA = styled('a')`
  font-size: 16px;
  font-weight: 600;
  color: ${props => props.theme.secondary};