Source

styledComponents/getChevronCss.js

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var macro_1 = require("styled-components/macro");
var ROTATE_ANGLE_LEFT = -45;
var ROTATE_ANGLE_RIGHT = 135;
var ROTATE_ANGLE_UP = 45;
var ROTATE_ANGLE_DOWN = -135;
var rotate = function (direction) {
    switch (direction) {
        case 'left':
            return ROTATE_ANGLE_LEFT;
        case 'right':
            return ROTATE_ANGLE_RIGHT;
        case 'up':
            return ROTATE_ANGLE_UP;
        case 'down':
        default:
            return ROTATE_ANGLE_DOWN;
    }
};
var translate = function (direction) {
    switch (direction) {
        case 'left':
            return '0, 25%';
        case 'right':
            return '25%, 0';
        case 'up':
            return '50%, 0';
        case 'down':
        default:
            return '0, 50%';
    }
};
/**
 * Get chevron icon css
 *
 * @param {string} direction
 * @param {string} color
 * @param {number} size
 * @param {number} thickness
 * @category styledComponents
 * @module getChevronCss
 */
var getChevronCss = function (direction, color, size, thickness) {
    if (direction === void 0) { direction = 'down'; }
    if (color === void 0) { color = '#999'; }
    if (size === void 0) { size = 7; }
    if (thickness === void 0) { thickness = 1; }
    var marginRight = direction === 'up' || direction === 'down'
        ? size
        : 0;
    return (0, macro_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    content: ' ';\n    position: relative;\n    width: ", "px;\n    height: ", "px;\n    box-sizing: border-box;\n    border-top: solid ", "px ", ";\n    border-left: solid ", "px ", ";\n    transform:\n      rotate(", "deg)\n      translate(", ");\n    margin-right: ", "px;\n  "], ["\n    display: block;\n    content: ' ';\n    position: relative;\n    width: ", "px;\n    height: ", "px;\n    box-sizing: border-box;\n    border-top: solid ", "px ", ";\n    border-left: solid ", "px ", ";\n    transform:\n      rotate(", "deg)\n      translate(", ");\n    margin-right: ", "px;\n  "])), size, size, thickness, color, thickness, color, rotate(direction), translate(direction), marginRight);
};
exports.default = getChevronCss;
var templateObject_1;