@wener/console
Version:
Base console UI toolkit
106 lines (105 loc) • 6.27 kB
JavaScript
function _object_without_properties(source, excluded) {
if (source == null) return {};
var target = {}, sourceKeys, key, i;
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
sourceKeys = Reflect.ownKeys(source);
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
return target;
}
target = _object_without_properties_loose(source, excluded);
if (Object.getOwnPropertySymbols) {
sourceKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null) return {};
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
return target;
}
function _tagged_template_literal(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
function _templateObject() {
var data = _tagged_template_literal([
"\n --size: ",
";\n position: relative;\n min-height: 180px;\n min-width: 180px;\n transform: translateX(-50%);\n display: inline-block;\n\n .container {\n ",
";\n transform-style: preserve-3d;\n perspective: 2000px;\n transform: rotateX(-30deg) rotateY(-45deg);\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n }\n\n .holder {\n ",
";\n transform-style: preserve-3d;\n transform: translate3d(0em, var(--size), calc(var(--size) * 0.5));\n\n &:nth-child(3) {\n transform: rotateY(-90deg) rotateX(90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));\n }\n\n &:first-child {\n transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));\n }\n }\n\n .box {\n ",
";\n transform-style: preserve-3d;\n animation: ani-box 6s infinite;\n width: var(--size);\n height: var(--size);\n //opacity: .9;\n\n &:before,\n &:after {\n position: absolute;\n width: 100%;\n height: 100%;\n content: '';\n }\n\n &:before {\n left: 100%;\n bottom: 0;\n transform: rotateY(90deg);\n transform-origin: 0 50%;\n }\n\n &:after {\n left: 0;\n bottom: 100%;\n transform: rotateX(90deg);\n transform-origin: 0 100%;\n }\n }\n\n .info {\n ",
";\n padding-top: 180px;\n\n .title {\n font-size: 20px;\n font-weight: 400;\n text-align: center;\n color: #212121;\n }\n\n .detail {\n font-size: 14px;\n font-weight: 200;\n text-align: center;\n }\n }\n\n @keyframes ani-box {\n 8.33% {\n transform: translate3d(-50%, -50%, 0) scaleZ(2);\n }\n 16.7% {\n transform: translate3d(-50%, -50%, calc(-1 * var(--size))) scaleZ(1);\n }\n 25% {\n transform: translate3d(-50%, -100%, calc(-1 * var(--size))) scaleY(2);\n }\n 33.3% {\n transform: translate3d(-50%, -150%, calc(-1 * var(--size))) scaleY(1);\n }\n 41.7% {\n transform: translate3d(-100%, -150%, calc(-1 * var(--size))) scaleX(2);\n }\n 50% {\n transform: translate3d(-150%, -150%, calc(-1 * var(--size))) scaleX(1);\n }\n 58.3% {\n transform: translate3d(-150%, -150%, 0) scaleZ(2);\n }\n 66.7% {\n transform: translate3d(-150%, -150%, 0) scaleZ(1);\n }\n 75% {\n transform: translate3d(-150%, -100%, 0) scaleY(2);\n }\n 83.3% {\n transform: translate3d(-150%, -50%, 0) scaleY(1);\n }\n 91.7% {\n transform: translate3d(-100%, -50%, 0) scaleX(2);\n }\n 100% {\n transform: translate3d(-50%, -50%, 0) scaleX(1);\n }\n }\n ",
"\n"
]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
import React from 'react';
import styled from '@emotion/styled';
var cbox = function(props) {
return "\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\n";
};
// background-color: ${darken(0.2, color)};
var BoxShuffleContainer = styled.div(_templateObject(), function(props) {
return props.size || '3em';
}, cbox, cbox, cbox, cbox, function(props) {
return (props.colors || [
'#1FBCD3',
'#CBE2B4',
'#F6B6CA'
]).map(function(color, i) {
return "\n .holder:nth-child(".concat(i + 1, "){\n .box{\n background-color: ").concat(color, ";\n &:before{\n background-color: color-mix(in oklab, ").concat(color, ", black 20%);\n }\n &:after{\n background-color: color-mix(in oklab, ").concat(color, ", black 10%);\n }\n }\n }\n }\n");
});
});
export var BoxShuffle = function(props) {
var title = props.title, detail = props.detail, rest = _object_without_properties(props, [
"title",
"detail"
]);
return /*#__PURE__*/ React.createElement(BoxShuffleContainer, rest, /*#__PURE__*/ React.createElement("div", {
className: "container"
}, /*#__PURE__*/ React.createElement("div", {
className: "holder"
}, /*#__PURE__*/ React.createElement("div", {
className: "box"
})), /*#__PURE__*/ React.createElement("div", {
className: "holder"
}, /*#__PURE__*/ React.createElement("div", {
className: "box"
})), /*#__PURE__*/ React.createElement("div", {
className: "holder"
}, /*#__PURE__*/ React.createElement("div", {
className: "box"
}))), /*#__PURE__*/ React.createElement("div", {
className: "info"
}, /*#__PURE__*/ React.createElement("div", {
className: "title"
}, title), /*#__PURE__*/ React.createElement("div", {
className: "detail"
}, detail)));
};