@age/quantum/Grid/sub-components/shared/media.js

Catho react components

"use strict";

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

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

var query = function query(breakpoints) {
  return Object.keys(breakpoints).reduce(function (acc, label) {
    acc[label] = function () {
      return (0, _styledComponents.css)(["@media (min-width:", "px){", ";}"], breakpoints[label].width || 0, _styledComponents.css.apply(void 0, arguments));
    };

    return acc;
  }, {});
};

exports.query = query;

var hideQueries = function hideQueries(_ref) {
  var smallWidth = _ref.small.width,
      mediumWidth = _ref.medium.width,
      largeWidth = _ref.large.width,
      xlargeWidth = _ref.xlarge.width;
  return {
    xsmall: function xsmall() {
      return "\n    @media (max-width: ".concat(smallWidth - 1, "px) {\n      display: none !important;\n    }\n  ");
    },
    small: function small() {
      return "\n    @media (min-width: ".concat(smallWidth, "px) and (max-width: ").concat(mediumWidth - 1, "px) {\n      display: none !important;\n    }\n  ");
    },
    medium: function medium() {
      return "\n    @media (min-width: ".concat(mediumWidth, "px) and (max-width: ").concat(largeWidth - 1, "px) {\n      display: none !important;\n    }\n  ");
    },
    large: function large() {
      return "\n    @media (min-width: ".concat(largeWidth, "px) and (max-width: ").concat(xlargeWidth - 1, "px) {\n      display: none !important;\n    }\n  ");
    },
    xlarge: function xlarge() {
      return "\n    @media (min-width: ".concat(xlargeWidth, "px) {\n      display: none !important;\n    }\n  ");
    }
  };
};

exports.hideQueries = hideQueries;