@vimeo/iris/components/inputs/Input/Input.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');
var components_inputs_Shared = require('../Shared.js');
var color_colors = require('../../../color/colors.js');

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

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

var InputStyled = styled__default["default"].input(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), components_inputs_Shared.inputColors, components_inputs_Shared.inputShape);
var radii = {
    radio: 50,
    checkbox: 4,
    toggle: 30,
};
var Faux = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), components_inputs_Shared.inputColors, function (_a) {
    var type = _a.type, mirror = _a.mirror;
    return components_inputs_Shared.FauxMark(type, mirror);
}, FauxType);
var HiddenMark = styled__default["default"].input.attrs(function (_a) {
    var type = _a.type;
    return ({
        type: type === 'toggle' ? 'checkbox' : type,
        toggle: type === 'toggle',
    });
})(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), components_inputs_Shared.Hidden, fauxMarkChecked, fauxToggleChecked);
function fauxMarkChecked(_a) {
    var disabled = _a.disabled;
    return styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n    &:checked ~ ", " {\n      border: 1px solid ", ";\n\n      &:after {\n        opacity: ", ";\n        transform: scale(1.02);\n      }\n    }\n  "], ["\n    &:checked ~ ", " {\n      border: 1px solid ", ";\n\n      &:after {\n        opacity: ", ";\n        transform: scale(1.02);\n      }\n    }\n  "])), Faux, polished.rgba(color_colors.blue(500), disabled ? 0 : 1), disabled ? 0.5 : 1);
}
var ToggleIcon = styled__default["default"].div(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: 120ms ease-in-out;\n  width: calc(50% - 0.25rem);\n  height: calc(100% - 0.25rem);\n  margin: 0.125rem;\n  svg {\n    width: 65%;\n  }\n"], ["\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: 120ms ease-in-out;\n  width: calc(50% - 0.25rem);\n  height: calc(100% - 0.25rem);\n  margin: 0.125rem;\n  svg {\n    width: 65%;\n  }\n"])));
function fauxToggleChecked(_a) {
    var toggle = _a.toggle, theme = _a.theme;
    var unCheckedColor = theme.name === 'light' ? color_colors.slate(300) : color_colors.grayscale(300);
    var checkedColor = theme.formats.primary;
    return (toggle && styled.css(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n      ~ ", " {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n      &:checked ~ ", " {\n        background: ", ";\n        border: 1px solid ", ";\n        ", " {\n          transform: scale(1) translateX(calc(100% + 4px));\n        }\n        &::after {\n          transform: scale(1) translateX(calc(100% + 4px));\n        }\n      }\n\n      :hover:checked:not(:disabled) ~ ", " {\n        background: ", ";\n        border-color: ", ";\n      }\n      :hover:not(:disabled) ~ ", " {\n        background: ", ";\n        border-color: transparent;\n      }\n\n      :disabled ~ ", " {\n        opacity: 50%;\n      }\n    "], ["\n      ~ ", " {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n      &:checked ~ ", " {\n        background: ", ";\n        border: 1px solid ", ";\n        ", " {\n          transform: scale(1) translateX(calc(100% + 4px));\n        }\n        &::after {\n          transform: scale(1) translateX(calc(100% + 4px));\n        }\n      }\n\n      :hover:checked:not(:disabled) ~ ", " {\n        background: ", ";\n        border-color: ", ";\n      }\n      :hover:not(:disabled) ~ ", " {\n        background: ", ";\n        border-color: transparent;\n      }\n\n      :disabled ~ ", " {\n        opacity: 50%;\n      }\n    "])), Faux, unCheckedColor, unCheckedColor, Faux, checkedColor, checkedColor, ToggleIcon, Faux, polished.darken(0.1, checkedColor), polished.darken(0.1, checkedColor), Faux, polished.darken(0.1, unCheckedColor), Faux));
}
var sizes = {
    sm: 16,
    md: 20,
    lg: 24,
    xl: 28,
};
function FauxType(_a) {
    var type = _a.type, size = _a.size;
    switch (type) {
        case 'radio':
            return styled.css(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n        ", ";\n        &:after {\n          width: calc(100% - 0.5rem);\n          height: calc(100% - 0.5rem);\n          margin: 0.25rem;\n          border-radius: 50%;\n        }\n      "], ["\n        ", ";\n        &:after {\n          width: calc(100% - 0.5rem);\n          height: calc(100% - 0.5rem);\n          margin: 0.25rem;\n          border-radius: 50%;\n        }\n      "])), components_inputs_Shared.RoundInput(sizes[size]));
        case 'checkbox':
            return styled.css(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n        ", ";\n        &:after {\n          width: 100%;\n          height: 100%;\n          border: 1px solid ", ";\n          background-image: ", ";\n        }\n      "], ["\n        ", ";\n        &:after {\n          width: 100%;\n          height: 100%;\n          border: 1px solid ", ";\n          background-image: ", ";\n        }\n      "])), components_inputs_Shared.SquareInput(sizes[size]), color_colors.blue(500), checkmark);
        case 'toggle':
            return styled.css(templateObject_9 || (templateObject_9 = tslib_es6.__makeTemplateObject(["\n        ", ";\n        &:after {\n          width: calc(50% - 0.25rem);\n          height: calc(100% - 0.25rem);\n          margin: 0.125rem;\n          border-radius: 50%;\n        }\n      "], ["\n        ", ";\n        &:after {\n          width: calc(50% - 0.25rem);\n          height: calc(100% - 0.25rem);\n          margin: 0.125rem;\n          border-radius: 50%;\n        }\n      "])), components_inputs_Shared.ToggleInput(sizes[size]));
    }
}
function checkmark(_a) {
    var indeterminate = _a.indeterminate;
    return indeterminate
        ? "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M4 9h12a1 1 0 0 1 1 1 1 1 0 0 1-1 1H4a1 1 0 0 1-1-1 1 1 0 0 1 1-1z'/%3E%3C/svg%3E\")"
        : "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23ffffff' d='M6.667 14.39L1.306 9.22l1.388-1.44 3.973 3.83 8.639-8.33 1.388 1.44z'/%3E%3C/svg%3E\")";
}
var nullStyle = {
    margin: null,
    display: null,
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

exports.Faux = Faux;
exports.FauxType = FauxType;
exports.HiddenMark = HiddenMark;
exports.InputStyled = InputStyled;
exports.ToggleIcon = ToggleIcon;
exports.checkmark = checkmark;
exports.nullStyle = nullStyle;
exports.radii = radii;