How to use @atlaskit/theme - 10 common examples

To help you get started, we’ve selected a few @atlaskit/theme examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github atlassian / react-beautiful-dnd / stories / src / multi-drag / task.jsx View on Github external
/* avoid default outline which looks lame with the position: absolute; */
  &:focus {
    outline: none;
    border-color: ${colors.N200};
  }
`;
/* stylelint-disable block-no-empty */
const Content = styled.div``;
/* stylelint-enable */
const size: number = 30;

const SelectionCount = styled.div`
  right: -${grid}px;
  top: -${grid}px;
  color: ${colors.N0};
  background: ${colors.N200};
  border-radius: 50%;
  height: ${size}px;
  width: ${size}px;
  line-height: ${size}px;
  position: absolute;
  text-align: center;
  font-size: 0.8rem;
`;

const keyCodes = {
  enter: 13,
  escape: 27,
  arrowDown: 40,
  arrowUp: 38,
  tab: 9,
github atlassian / react-beautiful-dnd / stories / src / vertical-grouped / quote-app.jsx View on Github external
// @flow
import React, { Component } from 'react';
import styled from '@emotion/styled';
import { colors } from '@atlaskit/theme';
import { DragDropContext } from '../../../src';
import QuoteList from '../primatives/quote-list';
import { grid } from '../constants';
import { reorderQuoteMap } from '../reorder';
import type { QuoteMap } from '../types';
import type { DropResult } from '../../../src/types';

const Root = styled.div`
  background: ${colors.B200};
  display: flex;
`;

const Column = styled.div`
  background-color: ${colors.B50};

  /* make the column a scroll container */
  height: 100vh;
  overflow: auto;

  /* flexbox */
  display: flex;
  flex-direction: column;
`;

const Group = styled.div`
github atlassian / react-beautiful-dnd / stories / src / vertical-nested / quote-app.jsx View on Github external
const initialList: NestedQuoteList = {
  id: 'first-level',
  title: 'top level',
  children: [
    ...quotes.slice(0, 2),
    {
      id: 'second-level',
      title: 'second level',
      children: quotes.slice(3, 5),
    },
    ...quotes.slice(6, 9),
  ],
};

const Root = styled.div`
  background-color: ${colors.B200};
  box-sizing: border-box;
  padding: ${grid * 2}px;
  min-height: 100vh;

  /* flexbox */
  display: flex;
  justify-content: center;
  align-items: flex-start;
`;

type State = {|
  list: NestedQuoteList,
|};

export default class QuoteApp extends Component<*, State> {
  /* eslint-disable react/sort-comp */
github atlassian / react-beautiful-dnd / stories / src / multiple-horizontal / quote-app.jsx View on Github external
// @flow
import React, { Component } from 'react';
import styled from '@emotion/styled';
import { colors } from '@atlaskit/theme';
import { DragDropContext } from '../../../src';
import AuthorList from '../primatives/author-list';
import { grid } from '../constants';
import { reorderQuoteMap } from '../reorder';
import type { ReorderQuoteMapResult } from '../reorder';
import type { QuoteMap } from '../types';
import type { DropResult } from '../../../src/types';

const Root = styled.div`
  background-color: ${colors.B200};
  box-sizing: border-box;
  padding: ${grid * 2}px;
  min-height: 100vh;

  /* flexbox */
  display: flex;
  flex-direction: column;
`;

type Props = {|
  initial: QuoteMap,
|};

type State = ReorderQuoteMapResult;

export default class QuoteApp extends Component<Props, State> {
github atlassian / react-beautiful-dnd / stories / src / portal / portal-app.jsx View on Github external
|};

const portal: HTMLElement = document.createElement('div');
portal.classList.add('my-super-cool-portal');

if (!document.body) {
  throw new Error('body not ready for portal creation!');
}

document.body.appendChild(portal);

const SimpleQuote = styled.div`
  padding: ${grid}px;
  margin-bottom: ${grid}px;
  background-color: ${colors.B50};
  border: 1px solid ${colors.B200};

  /* used for positioning the after content */
  position: relative;

  /* stylelint-disable  comment-empty-line-before */
  /* add little portal indicator when in a portal */
  ${props =>
    props.inPortal
      ? `
    ::after {
      position: absolute;
      background: lightgreen;
      padding: ${grid}px;
      bottom: 0;
      right: 0;
      content: "in portal";
github atlassian / react-beautiful-dnd / stories / src / interactive-elements / interactive-elements-app.jsx View on Github external
contentEditable
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{
          __html: `
            A content editable with
            <strong>my super cool content</strong>
          `,
        }}
      />
    ),
  },
];

const List = styled.div`
  width: 250px;
  background-color: ${colors.B200};
  padding: ${grid * 2}px;
`;

const Item = styled.div`
  min-height: 80px;
  background-color: ${colors.N0};
  border: 1px solid ${colors.N100};
  padding: ${grid}px;
  margin-bottom: ${grid}px;
`;

const Container = styled.div`
  display: flex;
`;

const Controls = styled.div`
github atlassian / react-beautiful-dnd / stories / src / portal / portal-app.jsx View on Github external
quote: Quote,
|};

const portal: HTMLElement = document.createElement('div');
portal.classList.add('my-super-cool-portal');

if (!document.body) {
  throw new Error('body not ready for portal creation!');
}

document.body.appendChild(portal);

const SimpleQuote = styled.div`
  padding: ${grid}px;
  margin-bottom: ${grid}px;
  background-color: ${colors.B50};
  border: 1px solid ${colors.B200};

  /* used for positioning the after content */
  position: relative;

  /* stylelint-disable  comment-empty-line-before */
  /* add little portal indicator when in a portal */
  ${props =>
    props.inPortal
      ? `
    ::after {
      position: absolute;
      background: lightgreen;
      padding: ${grid}px;
      bottom: 0;
      right: 0;
github atlassian / react-beautiful-dnd / stories / src / vertical-grouped / quote-app.jsx View on Github external
import styled from '@emotion/styled';
import { colors } from '@atlaskit/theme';
import { DragDropContext } from '../../../src';
import QuoteList from '../primatives/quote-list';
import { grid } from '../constants';
import { reorderQuoteMap } from '../reorder';
import type { QuoteMap } from '../types';
import type { DropResult } from '../../../src/types';

const Root = styled.div`
  background: ${colors.B200};
  display: flex;
`;

const Column = styled.div`
  background-color: ${colors.B50};

  /* make the column a scroll container */
  height: 100vh;
  overflow: auto;

  /* flexbox */
  display: flex;
  flex-direction: column;
`;

const Group = styled.div`
  margin-top: ${grid * 2}px;
`;

const Title = styled.h4`
  margin: ${grid}px;
github atlassian / react-beautiful-dnd / stories / src / horizontal / author-app.jsx View on Github external
import reorder from '../reorder';
import { grid } from '../constants';

type Props = {|
  initial: Quote[],
  internalScroll?: boolean,
  isCombineEnabled?: boolean,
|};

type State = {|
  quotes: Quote[],
|};

const Root = styled.div`
  padding: ${grid}px;
  background: ${colors.B50};
`;

export default class AuthorApp extends Component<Props, State> {
  /* eslint-disable react/sort-comp */
  static defaultProps = {
    isCombineEnabled: false,
  };

  state: State = {
    quotes: this.props.initial,
  };
  /* eslint-enable react/sort-comp */

  onDragEnd = (result: DropResult) => {
    // super simple, just removing the dragging item
    if (result.combine) {
github atlassian / react-beautiful-dnd / stories / src / table / with-fixed-columns.jsx View on Github external
${props =>
    props.isDragging
      ? `
    background: ${colors.G100};

    /* maintain cell width while dragging */
    display: table;
  `
      : ''} /* stylelint-enable */;
`;