@fluentui/react-northstar/dist/es/themes/teams/components/Button/buttonStyles.js

A themable React component library.

import _isNil from "lodash/isNil";
import { pxToRem } from '../../../../utils';
import { loaderSlotClassNames } from '../../../../components/Loader/Loader';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { faster, ultraFast } from '../../animations/durations';
export var buttonStyles = {
  root: function root(_ref) {
    var p = _ref.props,
      v = _ref.variables,
      theme = _ref.theme;
    var siteVariables = theme.siteVariables;
    var borderWidth = siteVariables.borderWidth;
    var borderFocusStyles = getBorderFocusStyles(Object.assign({
      variables: siteVariables,
      borderRadius: siteVariables.borderRadiusMedium,
      borderPadding: borderWidth
    }, p.circular && {
      borderPadding: pxToRem(4)
    }));
    return Object.assign({
      height: v.height,
      minWidth: _isNil(p.loading) ? v.minWidth : v.loadingMinWidth,
      maxWidth: v.maxWidth,
      color: v.color,
      backgroundColor: v.backgroundColor,
      borderRadius: v.borderRadius,
      display: 'inline-flex',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'relative',
      padding: v.padding,
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: faster,
      userSelect: 'none'
    }, !(p.text || p.flat || p.size === 'small') && Object.assign({}, p.primary && {
      boxShadow: v.primaryBoxShadow
    }, !p.primary && {
      boxShadow: v.boxShadow
    }), p.size === 'small' && {
      padding: v.sizeSmallPadding,
      height: v.sizeSmallHeight,
      minWidth: v.sizeSmallMinWidth
    }, !p.text && Object.assign({
      outline: 0,
      borderWidth: borderWidth,
      borderStyle: 'solid',
      borderColor: v.borderColor,
      ':hover': {
        color: v.colorHover,
        backgroundColor: v.backgroundColorHover,
        borderColor: v.borderColorHover
      }
    }, !p.disabledFocusable && {
      ':active': {
        transition: ultraFast,
        color: v.colorActive,
        backgroundColor: v.backgroundColorActive,
        borderColor: v.borderColorActive,
        boxShadow: 'none'
      }
    }, {
      ':focus': borderFocusStyles[':focus'],
      ':focus-visible': Object.assign({}, borderFocusStyles[':focus-visible'], {
        backgroundColor: v.backgroundColorFocus,
        borderColor: v.borderColorFocus,
        color: v.colorFocus,
        borderWidth: borderWidth,
        ':hover': {
          borderColor: v.borderColorHover
        }
      })
    }), p.circular && !p.text && Object.assign({
      minWidth: v.height,
      padding: 0,
      borderRadius: v.circularBorderRadius
    }, p.size === 'small' && {
      minWidth: v.sizeSmallHeight
    }), p.text && Object.assign({
      color: v.textColor,
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      padding: "0 " + pxToRem(8)
    }, getIconFillOrOutlineStyles({
      outline: true
    }), {
      ':hover': Object.assign({
        color: v.textColorHover
      }, getIconFillOrOutlineStyles({
        outline: false
      })),
      ':active': {
        color: siteVariables.colorScheme.brand.backgroundPressed
      },
      ':focus': Object.assign({
        boxShadow: 'none'
      }, borderFocusStyles[':focus']),
      ':focus-visible': borderFocusStyles[':focus-visible']
    }, p.primary && {
      color: v.textPrimaryColor
    }), p.primary && !p.text && Object.assign({
      color: v.primaryColor,
      backgroundColor: v.primaryBackgroundColor,
      borderColor: v.primaryBorderColor
    }, !p.disabledFocusable && {
      ':active': {
        transition: ultraFast,
        backgroundColor: v.primaryBackgroundColorActive,
        boxShadow: 'none'
      }
    }, {
      ':focus': borderFocusStyles[':focus'],
      ':focus-visible': Object.assign({}, borderFocusStyles[':focus-visible'], {
        backgroundColor: v.primaryBackgroundColorFocus
      }),
      ':hover': {
        color: v.primaryColorHover,
        backgroundColor: v.primaryBackgroundColorHover
      }
    }), p.inverted && Object.assign({
      backgroundColor: siteVariables.colorScheme.silver.background,
      borderColor: siteVariables.colorScheme.silver.border,
      color: siteVariables.colorScheme.silver.foreground
    }, !p.disabledFocusable && {
      ':active': {
        transition: ultraFast,
        backgroundColor: siteVariables.colorScheme.silver.backgroundPressed,
        color: siteVariables.colorScheme.silver.foregroundHover
      }
    }, {
      ':hover': {
        backgroundColor: siteVariables.colorScheme.silver.backgroundHover,
        color: siteVariables.colorScheme.silver.foregroundHover
      },
      ':focus': Object.assign({}, borderFocusStyles[':focus'], {
        boxShadow: 'none'
      }),
      ':focus-visible': Object.assign({}, borderFocusStyles[':focus-visible'], !p.disabledFocusable && {
        backgroundColor: siteVariables.colorScheme.silver.backgroundPressed,
        color: siteVariables.colorScheme.silver.foregroundHover
      })
    }), p.tinted && Object.assign({
      backgroundColor: v.tintedBackgroundColor,
      borderColor: v.tintedBorderColor,
      color: v.tintedColor
    }, !p.disabledFocusable && {
      ':active': {
        transition: ultraFast,
        backgroundColor: v.tintedBackgroundColorActive
      }
    }, {
      ':hover': {
        color: v.tintedColorHover,
        backgroundColor: v.tintedBackgroundColorHover,
        borderColor: v.tintedBorderColorHover
      },
      ':focus': {
        boxShadow: 'none'
      }
    }), p.disabled && {
      // pointer events intentionally not disabled for focusable disabled buttons
      // so that hover events work
      pointerEvents: 'none'
    }, (p.disabled || p.disabledFocusable) && Object.assign({
      cursor: 'default',
      color: v.colorDisabled,
      boxShadow: 'none',
      ':hover': {
        color: v.colorDisabled
      }
    }, p.text && {
      color: v.textColorDisabled,
      backgroundColor: 'transparent',
      ':hover': {
        color: v.textColorDisabled
      },
      ':active': {
        color: v.textColorDisabled
      }
    }, !p.text && {
      backgroundColor: v.backgroundColorDisabled,
      borderColor: v.borderColorDisabled
    }), p.fluid && {
      width: '100%',
      maxWidth: '100%'
    }, p.iconOnly && Object.assign({
      minWidth: v.height,
      padding: 0
    }, !p.inverted && !p.disabledFocusable && {
      ':hover': Object.assign({}, getIconFillOrOutlineStyles({
        outline: false
      }), {
        color: v.textColorIconOnlyHover,
        background: v.backgroundColorIconOnlyHover
      })
    }, p.size === 'small' && {
      minWidth: v.sizeSmallHeight
    }));
  },
  icon: function icon(_ref2) {
    var p = _ref2.props,
      v = _ref2.variables;
    return Object.assign({
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: v.iconSize,
      height: v.iconSize
    }, p.loading && {
      margin: 0,
      opacity: 0,
      width: 0
    }, p.hasContent && Object.assign({
      margin: "0 " + pxToRem(10) + " 0 0"
    }, p.iconPosition === 'after' && {
      margin: "0 0 0 " + pxToRem(10)
    }));
  },
  loader: function loader(_ref3) {
    var _Object$assign;
    var p = _ref3.props,
      v = _ref3.variables;
    return Object.assign((_Object$assign = {}, _Object$assign["& ." + loaderSlotClassNames.indicator] = {
      width: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize,
      height: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize
    }, _Object$assign["& ." + loaderSlotClassNames.indicator + " > svg"] = {
      width: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize,
      height: p.size === 'small' ? v.sizeSmallLoaderSvgHeight : v.loaderSvgHeight
    }, _Object$assign), p.hasContent && {
      marginRight: pxToRem(4)
    });
  }
};
//# sourceMappingURL=buttonStyles.js.map