@fluent-windows/core/Select/Select.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 = {
  display: 'inline-block',
  position: 'relative',
  minWidth: 160,
  height: 32,
  font: 'inherit',
  cursor: 'pointer'
};
var disabled = {
  cursor: 'not-allowed'
};

var select = function select(theme) {
  return {
    outline: 'none',
    font: 'inherit',
    width: '100%',
    height: '100%',
    cursor: 'pointer',
    borderRadius: 2,
    border: '2px solid',
    paddingLeft: 12,
    paddingRight: 32,
    display: 'flex',
    alignItems: 'center',
    borderColor: theme.colors.standard["default"],
    transition: theme.transitions.input,
    '&:hover': {
      borderColor: theme.colors.standard.dark1
    },
    '&:active, &:focus': {
      borderColor: theme.colors.primary["default"]
    }
  };
};

var selectDisabled = function selectDisabled(theme) {
  return {
    color: theme.colors.standard.dark2,
    backgroundColor: theme.colors.standard.light1,
    cursor: 'not-allowed',
    '&:hover, &:active, &:focus': {
      borderColor: theme.colors.standard["default"]
    }
  };
};

var icon = function icon(theme) {
  return {
    width: 32,
    height: '100%',
    position: 'absolute',
    right: 0,
    top: 0,
    fontSize: 12,
    display: 'inline-flex',
    justifyContent: 'center',
    alignItems: 'center',
    // disabledIcon false
    color: theme.colors.standard.dark3,
    cursor: 'pointer'
  };
};

var disabledIcon = function disabledIcon(theme) {
  return {
    color: theme.colors.standard.dark2,
    cursor: 'not-allowed'
  };
};

var styles = function styles(theme) {
  return {
    root: root,
    disabled: disabled,
    select: select(theme),
    selectDisabled: selectDisabled(theme),
    icon: icon(theme),
    disabledIcon: disabledIcon(theme)
  };
};

exports.styles = styles;