@skbkontur/db-viewer-ui/Components/Layouts/CommonLayout.styles.js

Database Viewer with custom configuration

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.jsStyles = exports.baseSize = void 0;
const Emotion_1 = require("@skbkontur/react-ui/lib/theming/Emotion");
exports.baseSize = 5;
const newBaseSize = 4;
const globalHorizontalPadding = newBaseSize * 7;
const globalVerticalPadding = newBaseSize * 10;
exports.jsStyles = {
    commonLayout(t) {
        return (0, Emotion_1.css) `
            color: ${t.textColorDefault};
            background-color: ${t.bgDefault};
            position: relative;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: ${globalVerticalPadding}px ${globalHorizontalPadding}px 0;
        `;
    },
    withArrow() {
        return (0, Emotion_1.css) `
            padding: ${globalVerticalPadding}px ${newBaseSize * 12}px 0;
        `;
    },
    topRightTools() {
        return (0, Emotion_1.css) `
            position: absolute;
            top: ${exports.baseSize}px;
            right: ${exports.baseSize}px;
            z-index: 1;
        `;
    },
    headerContent() {
        return (0, Emotion_1.css) `
            margin-top: ${3 * newBaseSize}px;
        `;
    },
    headerTitle() {
        return (0, Emotion_1.css) `
            margin: 0;
            font-weight: 700;
            font-size: 29px;
            flex-grow: 1;
            line-height: 48px;
            word-break: break-all;
            white-space: pre-wrap;
        `;
    },
    content() {
        return (0, Emotion_1.css) `
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            padding-bottom: ${globalVerticalPadding}px;
        `;
    },
    headerWrapper() {
        return (0, Emotion_1.css) `
            margin-bottom: ${5 * newBaseSize}px;
            word-break: break-all;
        `;
    },
    header() {
        return (0, Emotion_1.css) `
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: ${newBaseSize * 2}px;
            white-space: nowrap;
        `;
    },
    borderBottom(t) {
        return (0, Emotion_1.css) `
            border-bottom: 2px solid ${t.grayXLight};
        `;
    },
    backLink() {
        return (0, Emotion_1.css) `
            position: absolute;
            left: 0;
            height: ${newBaseSize * 12}px;
            width: ${newBaseSize * 12}px;
            display: flex;
            align-items: center;
            justify-content: center;
        `;
    },
    backLinkIcon(t) {
        return (0, Emotion_1.css) `
            display: block;
            color: #757575;

            &:hover {
                color: ${t.textColorDefault};
            }
        `;
    },
    loader() {
        return (0, Emotion_1.css) `
            display: flex !important;
            flex-direction: column;
            flex: 1 1 auto;
        `;
    },
};
//# sourceMappingURL=CommonLayout.styles.js.map