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

Vimeo Design System

import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rem, em } from 'polished';

var Styled = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
    var columns = _a.columns, masonry = _a.masonry, stagger = _a.stagger, gridGap = _a.gridGap;
    return css(templateObject_1 || (templateObject_1 = __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(rem(gridGap), " !important")
        : rem(gridGap), masonry && masonryStyle, gridColumnStyle(columns));
});
var masonryStyle = css(templateObject_3 || (templateObject_3 = __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(rem(columns - gridGap / 2));
    return css(templateObject_4 || (templateObject_4 = __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 = css(templateObject_5 || (templateObject_5 = __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, em(768));
            break;
        case 'object':
            if (columns.minWidth) {
                gridColumns = css(templateObject_6 || (templateObject_6 = __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(em(value[0]), ") {\n            grid-template-columns: repeat(").concat(value[1], ", 1fr);\n          }\n          ") + acc);
                }, '');
                gridColumns = css(templateObject_7 || (templateObject_7 = __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 css(templateObject_8 || (templateObject_8 = __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;

export { Styled, flexItemStyle, gridColumnStyle, masonryStyle };