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

Vimeo Design System

import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rgba } from 'polished';
import { white, blue } from '../../color/colors.esm.js';

var PanelStyled = styled.div(templateObject_1 || (templateObject_1 = __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(rgba(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 = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  transition: background 180ms ease-in-out 180ms;\n"], ["\n  background: ", ";\n  transition: background 180ms ease-in-out 180ms;\n"])), rgba(blue(500), 0.75));
var DragEdge = styled.div(templateObject_3 || (templateObject_3 = __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"])), rgba(blue(500), 0), function (p) { return p.dragging && dragging; }, dragging);
var templateObject_1, templateObject_2, templateObject_3;

export { DragEdge, PanelStyled };