nice-ui
Version:
React design system, components, and utilities
77 lines (76 loc) • 2.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tiles = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const defaultSize = 32;
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
w: defaultSize + 'px',
h: defaultSize + 'px',
trs: 'transform .1s',
cur: 'pointer',
'&:active': {
transform: 'scale(.8)',
},
});
const tileSize = 38;
const tileClass = (0, nano_theme_1.rule)({
pos: 'absolute',
bgc: nano_theme_1.lightTheme.g(0.2),
w: tileSize + '%',
h: tileSize + '%',
bdrad: '15%',
top: '50%',
left: '50%',
mar: `-${tileSize / 2}% 0 0 -${tileSize / 2}%`,
trs: 'background-color .15s,top .15s cubic-bezier(0.175, 0.885, 0.32, 1.275), left .15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
// op: .4,
[`.${blockClass.trim()}:hover &`]: {
bgc: nano_theme_1.lightTheme.g(0.4),
// op: 1,
},
});
const tile1Class = (0, nano_theme_1.rule)({
[`.${blockClass.trim()}:hover &`]: {
// bgc: theme.color2[1],
top: '25%',
left: '25%',
},
});
const tile2Class = (0, nano_theme_1.rule)({
[`.${blockClass.trim()}:hover &`]: {
// bgc: theme.color3[1],
top: '25%',
left: '75%',
},
});
const tile3Class = (0, nano_theme_1.rule)({
[`.${blockClass.trim()}:hover &`]: {
// bgc: theme.color4[1],
top: '75%',
left: '25%',
},
});
const tile4Class = (0, nano_theme_1.rule)({
[`.${blockClass.trim()}:hover &`]: {
// bgc: theme.color6[1],
top: '75%',
left: '75%',
},
});
const Tiles = ({ size, ...rest }) => {
let style = {};
if (size && size !== defaultSize) {
style = {
width: size,
height: size,
};
}
return (React.createElement("div", { ...rest, className: rest.className + blockClass, style: style },
React.createElement("div", { className: tileClass + tile1Class }),
React.createElement("div", { className: tileClass + tile2Class }),
React.createElement("div", { className: tileClass + tile3Class }),
React.createElement("div", { className: tileClass + tile4Class })));
};
exports.Tiles = Tiles;