@vimeo/iris/components/Panel/Panel.style.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var polished = require('polished');
var color_colors = require('../../color/colors.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var PanelStyled = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  z-index: 3000;\n  top: 0;\n  height: 100vh;\n  min-width: 16rem;\n  background: ", ";\n  ", ";\n\n  will-change: width, transform;\n\n  width: var(--width);\n  transform: var(--transform);\n  transition: var(--transition);\n"], ["\n  position: absolute;\n  z-index: 3000;\n  top: 0;\n  height: 100vh;\n  min-width: 16rem;\n  background: ", ";\n  ", ";\n\n  will-change: width, transform;\n\n  width: var(--width);\n  transform: var(--transform);\n  transition: var(--transition);\n"])), function (p) { return p.theme.content.background; }, edge);
function edge(_a) {
    var theme = _a.theme, attach = _a.attach;
    return theme.name === 'dark'
        ? "border-".concat(side(attach), ": 1px solid ").concat(polished.rgba(color_colors.white, 0.25))
        : "box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2)";
}
function side(attach) {
    if (attach === 'left')
        return 'right';
    if (attach === 'right')
        return 'left';
}
var dragging = styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  background: ", ";\n  transition: background 180ms ease-in-out 180ms;\n"], ["\n  background: ", ";\n  transition: background 180ms ease-in-out 180ms;\n"])), polished.rgba(color_colors.blue(500), 0.75));
var DragEdge = styled__default["default"].div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  top: 0;\n  width: 2rem;\n  height: 100%;\n  position: absolute;\n  cursor: col-resize;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    width: 0.2rem;\n    background: ", ";\n    transition: background 180ms ease-in-out 0ms;\n\n    ", ";\n  }\n\n  &:hover::before {\n    ", "\n  }\n"], ["\n  top: 0;\n  width: 2rem;\n  height: 100%;\n  position: absolute;\n  cursor: col-resize;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    width: 0.2rem;\n    background: ", ";\n    transition: background 180ms ease-in-out 0ms;\n\n    ", ";\n  }\n\n  &:hover::before {\n    ", "\n  }\n"])), polished.rgba(color_colors.blue(500), 0), function (p) { return p.dragging && dragging; }, dragging);
var templateObject_1, templateObject_2, templateObject_3;

exports.DragEdge = DragEdge;
exports.PanelStyled = PanelStyled;