@fluent-windows/core/es/Toast/Toast.styled.js

React components that inspired by Microsoft's Fluent Design System.

import { themeGet } from '@fluent-windows/styles';

const root = theme => ({
  position: 'fixed',
  zIndex: 1001,
  backgroundColor: themeGet(`colors.white.default`, 'white')(theme),
  boxShadow: themeGet(`shadows.3`, '0px 6.4px 14.4px 0px rgba(0, 0, 0, 0.132), 0px 1.2px 3.6px 0px rgba(0, 0, 0, 0.108)')(theme),
  borderRadius: 2,
  padding: '6px 16px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  width: 288,
  minWidth: 288,
  '@media screen and (min-width: 600px)': {
    '&': {
      width: 'auto',
      minWidth: 340
    }
  }
});

const baseSpace = 24;
const placementTopStart = {
  top: baseSpace,
  left: baseSpace,
  right: 'auto'
};
const placementTop = {
  top: baseSpace,
  left: '50%',
  right: 'auto',
  transform: 'translateX(-50%)'
};
const placementTopEnd = {
  top: baseSpace,
  left: 'auto',
  right: baseSpace
};
const placementBottomStart = {
  bottom: baseSpace,
  left: baseSpace,
  right: 'auto'
};
const placementBottom = {
  bottom: baseSpace,
  left: '50%',
  right: 'auto',
  transform: 'translateX(-50%)'
};
const placementBottomEnd = {
  bottom: baseSpace,
  left: 'auto',
  right: baseSpace
};
const placementCenter = {
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)'
};
const container = {
  padding: '8px 0',
  lineHeight: 1.5,
  flex: 1
};
const actions = {};
export const styles = theme => ({
  root: root(theme),
  placementTopStart,
  placementTop,
  placementTopEnd,
  placementBottomStart,
  placementBottom,
  placementBottomEnd,
  placementCenter,
  container,
  actions
});