@littlespoon/drawer/lib/DrawerBase.js

Little Spoon drawer

"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrawerContent = exports.DrawerCloseButton = exports.DrawerBase = void 0;
var button_1 = __importDefault(require("@littlespoon/button"));
var breakpoints_1 = require("@littlespoon/theme/lib/breakpoints");
var token_1 = require("@littlespoon/theme/lib/colors/token");
var utils_1 = require("@littlespoon/theme/lib/utils");
var z_index_1 = __importDefault(require("@littlespoon/theme/lib/z-index"));
var styled_components_1 = __importStar(require("styled-components"));
var Drawer_1 = require("./Drawer");
exports.DrawerBase = styled_components_1.default.div(function (props) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-content: stretch;\n    background-color: ", ";\n    border: 0;\n    border-radius: ", " ", " 0 0;\n    bottom: 0;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n    left: 0;\n    margin: 0;\n    max-height: 80%;\n    max-width: none;\n    outline: none;\n    overflow: hidden;\n    padding: ", " ", " ", ";\n    position: fixed;\n    right: 0;\n    z-index: ", ";\n    margin-bottom: ", "px;\n    transition: margin-bottom ", "ms ease-in-out;\n\n    ", "\n  "], ["\n    align-content: stretch;\n    background-color: ", ";\n    border: 0;\n    border-radius: ", " ", " 0 0;\n    bottom: 0;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: ", ";\n    left: 0;\n    margin: 0;\n    max-height: 80%;\n    max-width: none;\n    outline: none;\n    overflow: hidden;\n    padding: ", " ", " ", ";\n    position: fixed;\n    right: 0;\n    z-index: ", ";\n    margin-bottom: ", "px;\n    transition: margin-bottom ", "ms ease-in-out;\n\n    ", "\n  "])), token_1.shadeWhite, (0, utils_1.rem)(1.2), (0, utils_1.rem)(1.2), (0, utils_1.rem)(1.6), (0, utils_1.rem)(props.showCloseButton ? 6.8 : 2), (0, utils_1.rem)(2), (0, utils_1.rem)(2), z_index_1.default.drawer, props.hiddenMargin, Drawer_1.SHOW_HIDE_ANIMATION_DURATION, (0, breakpoints_1.up)(breakpoints_1.md, "\n        border-radius: 0;\n        justify-content: flex-end;\n        left: auto;\n        max-height: none;\n        max-width: ".concat((0, utils_1.rem)(48), ";\n        padding: ").concat((0, utils_1.rem)(props.showCloseButton ? 10.4 : 4), " ").concat((0, utils_1.rem)(4), " ").concat((0, utils_1.rem)(4), ";\n        top: 0;\n        width: ").concat((0, utils_1.rem)(48), ";\n        margin-bottom: 0;\n        margin-right: ").concat(props.hiddenMargin, "px;\n        transition: margin-right ").concat(Drawer_1.SHOW_HIDE_ANIMATION_DURATION, "ms ease-in-out;\n    "))); });
exports.DrawerCloseButton = (0, styled_components_1.default)(button_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border-radius: 50%;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  padding: 0;\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  width: ", ";\n\n  &:hover {\n    background-color: transparent;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border-radius: 50%;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  padding: 0;\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  width: ", ";\n\n  &:hover {\n    background-color: transparent;\n  }\n\n  ", "\n"])), (0, utils_1.rem)(3.2), (0, utils_1.rem)(2), (0, utils_1.rem)(2), (0, utils_1.rem)(3.2), (0, breakpoints_1.up)(breakpoints_1.md, "\n    right: ".concat((0, utils_1.rem)(4), ";\n    top: ").concat((0, utils_1.rem)(4), ";\n    ")));
exports.DrawerContent = styled_components_1.default.div(function (props) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-grow: ", ";\n    flex-direction: column;\n    gap: ", ";\n    outline: none;\n    overflow: auto;\n\n    ", "\n  "], ["\n    display: flex;\n    flex-grow: ", ";\n    flex-direction: column;\n    gap: ", ";\n    outline: none;\n    overflow: auto;\n\n    ", "\n  "])), props.useFullHeight ? 1 : 0, (0, utils_1.rem)(1.6), (0, breakpoints_1.up)(breakpoints_1.md, "\n  gap: ".concat((0, utils_1.rem)(3.2), ";\n  "))); });
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=DrawerBase.js.map