qilin-components/bar/index.js

Components used by Qilin editor and Qilin plugins

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _styledIs = _interopRequireDefault(require("styled-is"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const Bar = _styledComponents.default.header`
  display: grid;
  grid-template-areas: "a b c";
  grid-template-columns: 1fr auto 1fr;

  margin: 0;
  padding: 0 0.5rem;

  min-height: 2rem;
  width: 100%;

  border-width: 0;
  border-style: solid;
  border-color: ${props => props.theme.border};

  background-color: ${props => props.theme.background};
  color: ${props => props.theme.foreground};

  ${(0, _styledIs.default)("header")`
    border-bottom-width: 1px;
  `};

  ${(0, _styledIs.default)("footer")`
    border-top-width: 1px;
  `};

  -webkit-app-region: drag;

  & > * {
    display: flex;

    align-items: center;
    justify-self: center;

    &:last-child {
      justify-self: end;
      grid-column-end: c;
    }

    &:first-child {
      justify-self: start;
      grid-column-end: a;
    }
  }
`;
var _default = Bar;
exports.default = _default;