@fluent-windows/core/Dialog/Dialog.styled.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var root = function root(theme) {
  return {
    position: 'fixed',
    top: '50%',
    left: '50%',
    zIndex: 1001,
    transform: 'translate(-50%, -50%)',
    backgroundColor: theme.colors.white["default"],
    borderRadius: 2,
    padding: '16px 24px 24px',
    width: 288,
    maxWidth: 340,
    minWidth: 288,
    '@media screen and (min-width: 600px)': {
      '&': {
        width: 'auto',
        maxWidth: 450,
        minWidth: 340
      }
    }
  };
};

var title = {
  width: '100%',
  display: 'inline-flex',
  justifyContent: 'space-between',
  overflow: 'hidden',
  '& > h6': {
    flex: 1,
    overflow: 'hidden'
  }
};
var content = {
  marginTop: 16,
  minHeight: 40
};
var actions = {
  display: 'flex',
  justifyContent: 'flex-end',
  marginTop: 16,
  '> *': {
    margin: '0 4px',
    '&:last-child': {
      marginRight: 0
    }
  }
};

var mask = function mask(theme) {
  return {
    position: 'fixed',
    top: 0,
    left: 0,
    zIndex: 1000,
    width: '100%',
    height: '100%',
    backgroundColor: theme.colors.standard.transparent2
  };
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    title: title,
    content: content,
    actions: actions,
    mask: mask(theme)
  };
};

exports.styles = styles;