@master-c8/commons/dist/Header/Header.styles.js

Platzi Master C8 commons

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WrapperMenu = exports.HeaderContent = exports.BtnGroupComp = exports.BtnGroup = void 0;

var _styles = require("@mui/material/styles");

var _react = require("@emotion/react");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var HeaderContent = (0, _styles.styled)('header')(function (_ref) {
  var theme = _ref.theme;
  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    border-bottom: 1px solid ", ";\n    display: flex;\n    height: 80px;\n    width: 100%;\n    img {\n      width: 160px;\n      @media (max-width: 560px) {\n        width: 110px;\n      }\n    }\n    .MuiContainer-root {\n      align-items: center;\n      display: flex;\n      justify-content: space-between;\n    }\n  "])), theme.palette.secondary.main);
});
exports.HeaderContent = HeaderContent;
var BtnGroupComp = (0, _styles.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  gap: 1rem;\n  align-items: center;\n  @media (max-width: 767px) {\n    gap: 0.5rem;\n  }\n"])));
exports.BtnGroupComp = BtnGroupComp;
var BtnGroup = (0, _styles.styled)('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  gap: 1rem;\n  align-items: center;\n  @media (max-width: 767px) {\n    gap: 0.5rem;\n    .btn-general {\n      padding: 8px 15px;\n      font-size: 14px;\n      white-space: nowrap;\n    }\n  }\n"])));
exports.BtnGroup = BtnGroup;
var WrapperMenu = (0, _styles.styled)('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  @media (max-width: 900px) {\n    transform: ", ";\n    transition: transform ease 0.3s;\n    background: white;\n    position: fixed;\n    top: 81px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 0 16px;\n    z-index: 2;\n  }\n"])), function (_ref2) {
  var open = _ref2.open;
  return open ? 'translateX(0%)' : 'translateX(100%)';
});
exports.WrapperMenu = WrapperMenu;