@vimeo/iris/_deprecated/Grid/Grid.style.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var polished = require('polished');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var Styled = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
    var columns = _a.columns, masonry = _a.masonry, stagger = _a.stagger, gridGap = _a.gridGap;
    return styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n      width: 100%;\n      ", "\n\n      /* IE SUPPORT */\n      @supports not (display: grid) {\n        display: flex;\n        flex-wrap: wrap;\n        & > * {\n          ", ";\n        }\n      }\n\n      /* CSS GRID */\n      @supports (display: grid) {\n        display: grid;\n        grid-gap: ", ";\n        ", "\n        ", "\n      }\n    "], ["\n      width: 100%;\n      ", "\n\n      /* IE SUPPORT */\n      @supports not (display: grid) {\n        display: flex;\n        flex-wrap: wrap;\n        & > * {\n          ", ";\n        }\n      }\n\n      /* CSS GRID */\n      @supports (display: grid) {\n        display: grid;\n        grid-gap: ", ";\n        ", "\n        ", "\n      }\n    "])), stagger && staggerStyle(columns), flexItemStyle(columns, gridGap), masonry
        ? "1px ".concat(polished.rem(gridGap), " !important")
        : polished.rem(gridGap), masonry && masonryStyle, gridColumnStyle(columns));
});
var masonryStyle = styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  grid-auto-rows: 0;\n"], ["\n  grid-auto-rows: 0;\n"])));
var flexItemStyle = function (columns, gridGap) {
    var flexColumns = columns <= 12
        ? "0 1 calc(100% / ".concat(columns, ")")
        : "1 1 ".concat(polished.rem(columns - gridGap / 2));
    return styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n    flex: ", ";\n    margin: ", "px;\n    height: 'unset';\n  "], ["\n    flex: ", ";\n    margin: ", "px;\n    height: 'unset';\n  "])), flexColumns, gridGap / 2);
};
var gridColumnStyle = function (columns) {
    var gridColumns = null;
    switch (typeof columns) {
        case 'number':
            gridColumns = styled.css(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n        grid-template-columns: repeat(", ", 1fr);\n\n        @media screen and (max-width: ", ") {\n          grid-template-columns: repeat(\n            auto-fill,\n            minmax(250px, 1fr)\n          );\n        }\n      "], ["\n        grid-template-columns: repeat(", ", 1fr);\n\n        @media screen and (max-width: ", ") {\n          grid-template-columns: repeat(\n            auto-fill,\n            minmax(250px, 1fr)\n          );\n        }\n      "])), columns, polished.em(768));
            break;
        case 'object':
            if (columns.minWidth) {
                gridColumns = styled.css(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n          grid-template-columns: repeat(\n            auto-fill,\n            minmax(", "px, 1fr)\n          );\n        "], ["\n          grid-template-columns: repeat(\n            auto-fill,\n            minmax(", "px, 1fr)\n          );\n        "])), columns.minWidth);
            }
            else {
                var breakpointStyle = columns.reduce(function (acc, value) {
                    return ("\n          @media screen and (min-width: ".concat(polished.em(value[0]), ") {\n            grid-template-columns: repeat(").concat(value[1], ", 1fr);\n          }\n          ") + acc);
                }, '');
                gridColumns = styled.css(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n          grid-template-columns: repeat(", ", 1fr);\n          ", "\n        "], ["\n          grid-template-columns: repeat(", ", 1fr);\n          ", "\n        "])), columns[0][1], breakpointStyle);
            }
            break;
    }
    return gridColumns;
};
var staggerColumn = function (selector) {
    if (selector === void 0) { selector = '2n'; }
    return styled.css(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n  > *:nth-child(", ") {\n    transform: translateY(50%);\n  }\n"], ["\n  > *:nth-child(", ") {\n    transform: translateY(50%);\n  }\n"])), selector);
};
var staggerColumnOdd = function (columns) {
    return new Array(columns)
        .fill(null)
        .map(function (_, i) { return i % 2 == 1 && staggerColumn("".concat(columns, "n - ").concat(i)); });
};
var staggerStyle = function (columns) {
    return columns % 2 == 0 ? staggerColumn() : staggerColumnOdd(columns);
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

exports.Styled = Styled;
exports.flexItemStyle = flexItemStyle;
exports.gridColumnStyle = gridColumnStyle;
exports.masonryStyle = masonryStyle;