UNPKG

infinity-forge

Version:

codie Library

github.com/CodieDigital/codiedigital-library

CodieDigital/codiedigital-library

15 lines • 6.46 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"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.UserMenuContent = exports.UserMenu = void 0; var styled_components_1 = __importDefault(require("styled-components")); exports.UserMenu = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n\n .title {\n font-size: 1.4rem;\n font-weight: 600;\n color: #111827;\n line-height: 1.2;\n }\n\n .subtext {\n font-size: 1.2rem;\n font-weight: 400;\n color: #6b7280;\n line-height: 1.2;\n }\n\n button {\n }\n\n img,\n .img {\n min-width: 100%;\n min-height: 100%;\n object-fit: cover;\n border-radius: 99999px;\n\n max-width: 40px;\n max-height: 40px;\n width: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\n border-radius: 99999px;\n padding: 0;\n border: none;\n overflow: hidden;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.1s;\n background-color: #ccc;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 1.8rem;\n color: #ffffff;\n text-transform: uppercase;\n\n &:hover {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);\n }\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n\n .title {\n font-size: 1.4rem;\n font-weight: 600;\n color: #111827;\n line-height: 1.2;\n }\n\n .subtext {\n font-size: 1.2rem;\n font-weight: 400;\n color: #6b7280;\n line-height: 1.2;\n }\n\n button {\n }\n\n img,\n .img {\n min-width: 100%;\n min-height: 100%;\n object-fit: cover;\n border-radius: 99999px;\n\n max-width: 40px;\n max-height: 40px;\n width: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\n border-radius: 99999px;\n padding: 0;\n border: none;\n overflow: hidden;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.1s;\n background-color: #ccc;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 1.8rem;\n color: #ffffff;\n text-transform: uppercase;\n\n &:hover {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);\n }\n }\n"]))); exports.UserMenuContent = (0, styled_components_1.default)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .top {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 6px 8px;\n }\n\n .separator {\n width: 100%;\n height: 1px;\n background-color: #e5e7eb;\n margin: 4px 0;\n }\n\n img,\n .img {\n object-fit: cover;\n border-radius: 99999px;\n max-width: 40px;\n max-height: 40px;\n width: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\n border-radius: 99999px;\n overflow: hidden;\n background-color: #ccc;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 1.8rem;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .title {\n font-size: 1.4rem;\n font-weight: 600;\n color: #111827;\n line-height: 1.2;\n }\n\n .subtext {\n font-size: 1.2rem;\n font-weight: 400;\n color: #6b7280;\n line-height: 1.2;\n }\n\n .options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 14px;\n width: 100%;\n padding: 6px 8px;\n transition: background-color 0.1s ease-in-out;\n border-radius: 4px;\n\n &:hover {\n background-color: #f3f4f6;\n }\n\n svg {\n width: 16px;\n height: 16px;\n stroke: currentColor;\n }\n\n &.red {\n color: #dc2626;\n\n svg {\n stroke: currentColor;\n }\n\n &:hover {\n background-color: #dc262610;\n }\n }\n }\n"], ["\n .top {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 6px 8px;\n }\n\n .separator {\n width: 100%;\n height: 1px;\n background-color: #e5e7eb;\n margin: 4px 0;\n }\n\n img,\n .img {\n object-fit: cover;\n border-radius: 99999px;\n max-width: 40px;\n max-height: 40px;\n width: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\n border-radius: 99999px;\n overflow: hidden;\n background-color: #ccc;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 1.8rem;\n color: #ffffff;\n text-transform: uppercase;\n }\n\n .title {\n font-size: 1.4rem;\n font-weight: 600;\n color: #111827;\n line-height: 1.2;\n }\n\n .subtext {\n font-size: 1.2rem;\n font-weight: 400;\n color: #6b7280;\n line-height: 1.2;\n }\n\n .options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 14px;\n width: 100%;\n padding: 6px 8px;\n transition: background-color 0.1s ease-in-out;\n border-radius: 4px;\n\n &:hover {\n background-color: #f3f4f6;\n }\n\n svg {\n width: 16px;\n height: 16px;\n stroke: currentColor;\n }\n\n &.red {\n color: #dc2626;\n\n svg {\n stroke: currentColor;\n }\n\n &:hover {\n background-color: #dc262610;\n }\n }\n }\n"]))); var templateObject_1, templateObject_2; //# sourceMappingURL=styles.js.map