@waasabi-ui/navbar-menu/dist/Header.styles.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Logo = exports.ListItem = exports.NavItem = exports.NavList = exports.MenuContainer = exports.LogoContainer = exports.Wrapper = void 0;

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

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

var _reactScroll = require("react-scroll");

function _templateObject7() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: auto;\n  height: 100px;\n  object-fit: contain;\n  cursor: pointer;\n\n  @media all and (min-width: 320px) and (max-width: 768px) {\n    justify-content: center;\n    align-items: center;\n    height: 100px;\n    margin: 0 auto;\n    width: auto;\n    margin-top: -30px;\n  }\n\n  @media all and (min-width: 768px) and (max-width: 1024px) {\n    margin: 0 auto;\n    width: auto;\n    margin-top: -10px;\n    padding: 0;\n  }\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 450px;\n  padding-left: 6rem;\n\n  @media all and (min-width: 320px) and (max-width: 768px) {\n    justify-content: center;\n    align-items: center;\n    padding-left: 0;\n  }\n\n  @media all and (min-width: 768px) and (max-width: 1024px) {\n    margin: 0 auto;\n    padding: 0;\n    width: 50%;\n    padding-left: 0;\n  }\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  color: ", ";\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  line-height: 22px;\n  padding: 10px 15px;\n  color: ", ";\n  font-weight: 700;\n  font-size: 13px;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  font-family: Raleway, sans-serif;\n  cursor: pointer;\n  text-decoration: none;\n  position: relative;\n\n  &:hover {\n    color: ", ";\n  }\n\n  > .active {\n    padding-bottom: 0.75rem;\n    border-bottom: 2px solid ", ";\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    border-radius: 10px;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n    visibility: hidden;\n    -webkit-transform: scaleX(0);\n    transform: scaleX(0);\n    -webkit-transition: all 0.25s cubic-bezier(1, 0.25, 0, 0.75) 0s;\n    transition: all 0.25s cubic-bezier(1, 0.25, 0, 0.75) 0s;\n  }\n\n  &:hover:before {\n    visibility: visible;\n    -webkit-transform: scaleX(1);\n    transform: scaleX(1);\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  list-style-type: none;\n  display: flex;\n  justify-content: flex-end;\n  margin: 0;\n  padding-right: 2rem;\n  height: 120px;\n  align-items: center;\n\n  @media all and (min-width: 320px) and (max-width: 768px) {\n    width: 100%;\n  }\n\n  @media all and (min-width: 768px) and (max-width: 1024px) {\n    width: 100%;\n    margin-right: 0;\n    padding: 0;\n    height: 6rem;\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n  flex-direction: row;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 15000;\n  height: 120px;\n  background-color: ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var Wrapper = _styledComponents["default"].div(_templateObject(), function (_ref) {
  var background = _ref.background;
  return background || 'transparent';
});

exports.Wrapper = Wrapper;

var MenuContainer = _styledComponents["default"].div(_templateObject2());

exports.MenuContainer = MenuContainer;

var NavList = _styledComponents["default"].ul(_templateObject3());

exports.NavList = NavList;

var ListItem = _styledComponents["default"].li(_templateObject4(), function (_ref2) {
  var color = _ref2.color;
  return color || 'white';
}, function (_ref3) {
  var color = _ref3.color;
  return color || 'white';
}, function (_ref4) {
  var color = _ref4.color;
  return color || 'white';
}, function (_ref5) {
  var color = _ref5.color;
  return color || 'white';
});

exports.ListItem = ListItem;
var NavItem = (0, _styledComponents["default"])(_reactScroll.Link)(_templateObject5(), function (_ref6) {
  var color = _ref6.color;
  return color || 'white';
});
exports.NavItem = NavItem;

var LogoContainer = _styledComponents["default"].div(_templateObject6());

exports.LogoContainer = LogoContainer;

var Logo = _styledComponents["default"].img(_templateObject7());

exports.Logo = Logo;