@fluent-windows/core/Button/Button.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 {
    display: 'inline-block',
    textDecoration: 'none',
    outline: 'none',
    cursor: 'pointer',
    minWidth: 56,
    verticalAlign: 'middle',
    border: '2px solid',
    borderRadius: 2,
    textAlign: 'center',
    lineHeight: 1.5,
    transition: theme.transitions.button,
    '&:disabled': {
      color: theme.colors.standard.dark2,
      backgroundColor: theme.colors.standard.light1,
      cursor: 'not-allowed',
      pointerEvents: 'none'
    }
  };
};

var variantStandard = function variantStandard(theme) {
  return {
    color: theme.colors.black["default"],
    backgroundColor: theme.colors.white["default"],
    borderColor: theme.colors.standard["default"],
    '&:hover, &:focus': {
      borderColor: theme.colors.standard.dark1
    },
    '&:active': {
      backgroundColor: theme.colors.standard["default"],
      borderColor: theme.colors.standard.dark3
    }
  };
};

var variantPrimary = function variantPrimary(theme) {
  return {
    color: theme.colors.white["default"],
    backgroundColor: theme.colors.primary["default"],
    borderColor: theme.colors.primary["default"],
    boxShadow: theme.shadows[3],
    '&:hover, &:focus': {
      backgroundColor: theme.colors.primary.dark1,
      borderColor: theme.colors.primary.dark1
    },
    '&:active': {
      backgroundColor: theme.colors.primary.dark3,
      borderColor: theme.colors.primary.dark3,
      boxShadow: theme.shadows[4]
    }
  };
};

var sizeSmall = function sizeSmall(theme) {
  return theme.sizes.small.button;
};

var sizeMedium = function sizeMedium(theme) {
  return theme.sizes.medium.button;
};

var sizeLarge = function sizeLarge(theme) {
  return theme.sizes.large.button;
};

var block = {
  width: '100%'
};

var ghost = function ghost(theme) {
  return {
    color: 'inherit',
    backgroundColor: 'transparent',
    borderColor: theme.colors.standard.transparent1,
    '&:hover, &:focus': {
      backgroundColor: 'transparent',
      borderColor: theme.colors.standard.transparent2
    },
    '&:active': {
      backgroundColor: 'transparent',
      borderColor: theme.colors.standard.transparent3
    }
  };
};

var rounded = {
  borderRadius: 44
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    variantStandard: variantStandard(theme),
    variantPrimary: variantPrimary(theme),
    sizeSmall: sizeSmall(theme),
    sizeMedium: sizeMedium(theme),
    sizeLarge: sizeLarge(theme),
    block: block,
    ghost: ghost(theme),
    rounded: rounded
  };
};

exports.styles = styles;