@orca-fe/pocket
Version:
UI components by orca-team
81 lines (80 loc) • 1.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _jssPluginAutoPrefix = _interopRequireDefault(require("@orca-fe/jss-plugin-auto-prefix"));
var _jss = require("../utils/jss");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var prefix = 'orca-icon-button';
var darkCheckedStyle = {
color: '#ffffff',
backgroundColor: 'rgba(200, 200, 200, 0.2)'
};
var defaultCheckedStyle = {
backgroundColor: 'rgba(0, 0, 0, 0.05)'
};
var _default = exports.default = (0, _jss.createUseStyles)({
root: {
borderRadius: '8px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
border: 'none',
backgroundColor: 'transparent',
transition: 'background-color 300ms',
gap: 4,
'&:hover': defaultCheckedStyle,
'&$checked': defaultCheckedStyle,
'&:active': {
transform: 'translateY(1px)'
},
'&$autoWidth': {
width: 'auto'
}
},
autoWidth: {
padding: '0px 16px'
},
checked: {},
disabled: {
cursor: 'default',
opacity: '0.6',
pointerEvents: 'none'
},
dark: {
color: '#CCCCCC',
'&.$checked': darkCheckedStyle,
'&:hover': darkCheckedStyle
},
small: {
fontSize: '14px',
width: '25px',
minWidth: '25px',
height: '25px'
},
'x-small': {
fontSize: '12px',
width: '22px',
minWidth: '22px',
height: '22px'
},
middle: {
width: '32px',
minWidth: '32px',
height: '32px',
fontSize: '18px'
},
large: {
width: '36px',
minWidth: '36px',
height: '36px',
fontSize: '22px'
}
}, {
classNamePrefix: prefix,
plugins: [(0, _jssPluginAutoPrefix.default)({
prefix: prefix
})]
});