@ddsys/material/lib/styles/button.js

<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (theme) {
  var colors = theme.colors,
      variables = theme.variables;
  var common = variables.common,
      fonts = variables.fonts;


  return [{ name: "primary", color: colors.primary }, { name: "secondary", color: colors.secondary }, { name: "success", color: colors.success }, { name: "info", color: colors.info }, { name: "warning", color: colors.warning }, { name: "danger", color: colors.danger }].reduce(function (result, style) {
    result[style.name] = {
      backgroundColor: style.color,
      color: colors.white,
      "&:hover": {
        background: (0, _color2.default)(style.color).darken(common.darken).hex()
      }
    };

    result[style.name + "Outlined"] = {
      color: style.color,
      borderColor: style.color,
      backgroundColor: "transparent",
      backgroundImage: "none",
      border: "1px solid " + style.color,
      "&:hover": {
        backgroundColor: (0, _color2.default)(style.color).alpha(0.2).string()
      },
      "&:focus": {
        boxShadow: "0 0 0 0.2rem  " + (0, _color2.default)(style.color).alpha(0.5).string(),
        outline: "transparent"
      }
    };

    return result;
  }, {
    style: {
      fontFamily: fonts.family,
      fontSize: fonts.h6 + "rem",
      fontWeight: fonts.weight.bold,
      textTransform: "none",
      minHeight: "auto",
      "&[disabled]": {
        color: colors.gray_900,
        backgroundColor: (0, _color2.default)(colors.gray_900).alpha(0.3).string(),
        borderColor: (0, _color2.default)(colors.gray_900).alpha(0.2).string(),
        cursor: "not-allowed",
        opacity: ".3"
      }
    },
    groupedContainer: {
      position: "relative",
      display: "inline-flex",
      verticalAlign: "middle"
    },
    groupedButton: {
      "&:not(:last-child)": {
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0
      },
      "&:not(:first-child)": {
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0
      },
      "&:focus": {
        backgroundColor: (0, _color2.default)(colors.gray_700).alpha(0.4).string(),
        boxShadow: "none !important",
        outline: "transparent"
      }
    },
    active: {
      backgroundColor: (0, _color2.default)(colors.gray_700).alpha(0.4).string(),
      boxShadow: "none !important",
      outline: "transparent"
    },
    large: {
      fontSize: fonts.size.large + "rem",
      padding: common.spacing / 2 + "rem " + common.spacing + "rem"
    },
    small: {
      fontSize: fonts.size.small + "rem",
      padding: common.spacing / 4 + "rem " + common.spacing / 2 + "rem"
    }
  });
};

var _color = require("color");

var _color2 = _interopRequireDefault(_color);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }