@fluentui/react-northstar/dist/commonjs/themes/teams/components/Dropdown/dropdownStyles.js

A themable React component library.

"use strict";

exports.__esModule = true;
exports.dropdownStyles = void 0;
var _Dropdown = require("../../../../components/Dropdown/Dropdown");
var _utils = require("../../../../utils");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var transparentColorStyle = {
  backgroundColor: 'transparent',
  borderColor: 'transparent',
  borderBottomColor: 'transparent'
};
var createTransparentColorStyleObj = function createTransparentColorStyleObj() {
  return Object.assign({}, transparentColorStyle, {
    ':hover': Object.assign({}, transparentColorStyle),
    ':active': Object.assign({}, transparentColorStyle),
    ':focus': Object.assign({}, transparentColorStyle, {
      ':active': Object.assign({}, transparentColorStyle)
    })
  });
};
var getWidth = function getWidth(p, v) {
  if (p.fluid) {
    return '100%';
  }
  if (p.inline) {
    return 'initial';
  }
  return v.width;
};
var dropdownStyles = {
  root: function root(_ref) {
    var p = _ref.props;
    return Object.assign({}, p.inline && {
      display: 'inline-flex'
    });
  },
  clearIndicator: function clearIndicator(_ref2) {
    var v = _ref2.variables,
      siteVariables = _ref2.theme.siteVariables;
    return Object.assign({
      alignItems: 'center',
      alignSelf: 'center',
      display: 'flex',
      justifyContent: 'center',
      cursor: 'pointer',
      userSelect: 'none',
      margin: 0,
      position: 'absolute',
      right: (0, _utils.pxToRem)(6),
      padding: (0, _utils.pxToRem)(2),
      color: v.color
    }, (0, _getBorderFocusStyles.getBorderFocusStyles)({
      variables: siteVariables
    }));
  },
  container: function container(_ref3) {
    var _Object$assign;
    var p = _ref3.props,
      v = _ref3.variables,
      siteVariables = _ref3.theme.siteVariables;
    return Object.assign({
      display: 'flex',
      flexWrap: 'wrap',
      position: 'relative',
      borderStyle: 'solid',
      borderColor: v.borderColor,
      outline: 0,
      width: getWidth(p, v),
      borderWidth: p.search ? "0 0 " + v.searchBorderBottomWidth + " 0" : v.borderWidth,
      color: v.color,
      backgroundColor: v.backgroundColor,
      borderRadius: v.containerBorderRadius
    }, p.open && p.position === 'above' && {
      borderRadius: v.openAboveContainerBorderRadius
    }, p.open && p.position === 'below' && {
      borderRadius: v.openBelowContainerBorderRadius
    }, {
      ':hover': Object.assign({
        backgroundColor: v.backgroundColorHover,
        borderColor: v.borderColorHover
      }, p.open && {
        borderColor: v.openBorderColorHover
      })
    }, p.error && {
      border: (0, _utils.pxToRem)(1) + " solid " + v.borderError,
      ':hover': {
        border: (0, _utils.pxToRem)(1) + " solid " + v.borderError
      }
    }, {
      ':active': {
        backgroundColor: v.backgroundColor
      },
      ':focus-within': {
        // when dropdown's selected items are focused
        // keep the focus border style
        borderBottomColor: v.borderColorFocus
      }
    }, p.focused && Object.assign({
      backgroundColor: v.backgroundColor
    }, p.search && {
      borderBottomColor: v.borderColorFocus
    }, !p.search && !p.open && p.isFromKeyboard && (0, _getBorderFocusStyles.getBorderFocusStyles)({
      variables: siteVariables
    })[':focus-visible']), p.inline && Object.assign({}, createTransparentColorStyleObj(), {
      alignItems: 'center'
    }), p.inverted && {
      backgroundColor: v.invertedBackgroundColor,
      ':hover': {
        backgroundColor: v.invertedBackgroundColorHover
      },
      ':active': {
        backgroundColor: v.invertedBackgroundColorHover
      },
      ':focus': {
        backgroundColor: v.invertedBackgroundColorHover
      }
    }, p.disabled && {
      backgroundColor: siteVariables.colorScheme.default.backgroundDisabled,
      borderColor: siteVariables.colorScheme.default.borderDisabled,
      userSelect: 'none',
      ':hover': {
        backgroundColor: siteVariables.colorScheme.default.backgroundDisabled
      },
      ':active': {
        backgroundColor: siteVariables.colorScheme.default.backgroundDisabled
      }
    }, (_Object$assign = {}, _Object$assign["& ." + _Dropdown.dropdownSlotClassNames.triggerButton] = Object.assign({}, p.disabled && {
      color: siteVariables.colorScheme.default.foregroundDisabled
    }), _Object$assign));
  },
  selectedItems: function selectedItems(_ref4) {
    var p = _ref4.props,
      v = _ref4.variables;
    return Object.assign({
      display: 'flex',
      flexWrap: 'wrap',
      overflowY: 'auto',
      overflowX: 'hidden',
      maxHeight: v.selectedItemsMaxHeight,
      width: '100%'
    }, p.hasToggleIndicator && {
      paddingRight: v.toggleIndicatorSize
    }, p.multiple && p.hasItemsSelected && {
      paddingTop: (0, _utils.pxToRem)(1),
      paddingBottom: (0, _utils.pxToRem)(4)
    });
  },
  triggerButton: function triggerButton(_ref5) {
    var p = _ref5.props,
      v = _ref5.variables;
    return Object.assign({
      overflow: 'hidden',
      boxShadow: 'none',
      minHeight: (0, _utils.pxToRem)(32)
    }, createTransparentColorStyleObj(), {
      margin: '0',
      justifyContent: 'left',
      padding: v.comboboxPaddingButton
    }, p.multiple && Object.assign({
      minWidth: 0,
      flex: 1
    }, p.hasItemsSelected && {
      position: 'absolute',
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
      height: '100%'
    }), createTransparentColorStyleObj(), {
      ':focus': Object.assign({
        color: v.color
      }, createTransparentColorStyleObj()),
      ':focus-visible': Object.assign({
        color: v.color
      }, transparentColorStyle, {
        ':after': {
          borderColor: 'transparent',
          borderRightWidth: 0
        },
        ':before': {
          borderColor: 'transparent',
          borderRightWidth: 0
        }
      }),
      ':active': Object.assign({
        color: v.color
      }, transparentColorStyle, {
        animationName: 'unset',
        animationDuration: 'unset'
      }),
      ':hover': Object.assign({}, transparentColorStyle, {
        color: v.color // required for HC theme
      })
    }, p.inline && {
      paddingLeft: 0,
      paddingRight: 0,
      width: 'initial'
    });
  },
  list: function list(_ref6) {
    var p = _ref6.props,
      v = _ref6.variables;
    return Object.assign({
      outline: 0,
      borderStyle: 'solid',
      borderWidth: p.open ? v.listBorderWidth : '0px',
      borderColor: v.listBorderColor,
      zIndex: v.overlayZIndex,
      maxHeight: v.listMaxHeight,
      overflowY: 'auto',
      width: getWidth(p, v),
      background: v.listBackgroundColor
    }, p.position === 'above' && {
      borderRadius: v.aboveListBorderRadius
    }, p.position === 'below' && {
      borderRadius: v.belowListBorderRadius
    }, p.open && {
      boxShadow: v.listBoxShadow,
      padding: v.listPadding
    });
  },
  toggleIndicator: function toggleIndicator(_ref7) {
    var p = _ref7.props,
      v = _ref7.variables;
    return Object.assign({
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'center',
      alignSelf: 'center',
      cursor: 'pointer'
    }, p.disabled && {
      cursor: 'default'
    }, {
      userSelect: 'none',
      margin: 0,
      position: 'absolute',
      right: (0, _utils.pxToRem)(8)
    }, p.multiple && p.hasItemsSelected && {
      top: (0, _utils.pxToRem)(8)
    }, {
      color: v.color
    }, p.disabled && {
      color: v.disabledColor
    });
  }
};
exports.dropdownStyles = dropdownStyles;
//# sourceMappingURL=dropdownStyles.js.map