infinity-forge
Version:
14 lines • 2.77 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Image = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.Image = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n min-height: inherit;\n max-height: inherit;\n width: inherit;\n min-width: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n position: relative;\n overflow: hidden;\n\n img {\n width: 100%;\n height: inherit;\n position: unset !important;\n min-height: inherit;\n max-height: inherit;\n min-width: inherit;\n max-width: inherit;\n object-fit: cover;\n object-position: center center;\n aspect-ratio: inherit;\n }\n\n &.loading {\n background-color: ", ";\n background: linear-gradient(\n 100deg,\n rgba(255, 255, 255, 0) 40%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 60%\n )\n ", ";\n background-size: 200% 100%;\n background-position-x: 180%;\n animation: 0.8s loading ease-in-out infinite;\n\n > img {\n opacity: 0;\n }\n }\n\n @keyframes loading {\n to {\n background-position-x: -20%;\n }\n }\n"], ["\n height: 100%;\n min-height: inherit;\n max-height: inherit;\n width: inherit;\n min-width: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n position: relative;\n overflow: hidden;\n\n img {\n width: 100%;\n height: inherit;\n position: unset !important;\n min-height: inherit;\n max-height: inherit;\n min-width: inherit;\n max-width: inherit;\n object-fit: cover;\n object-position: center center;\n aspect-ratio: inherit;\n }\n\n &.loading {\n background-color: ", ";\n background: linear-gradient(\n 100deg,\n rgba(255, 255, 255, 0) 40%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 60%\n )\n ", ";\n background-size: 200% 100%;\n background-position-x: 180%;\n animation: 0.8s loading ease-in-out infinite;\n\n > img {\n opacity: 0;\n }\n }\n\n @keyframes loading {\n to {\n background-position-x: -20%;\n }\n }\n"])), function (props) { return props.theme.secondaryColor + '8a'; }, function (props) { return props.theme.secondaryColor + '8a'; });
var templateObject_1;
//# sourceMappingURL=styles.js.map