@vimeo/iris
Version:
Vimeo Design System
65 lines (62 loc) • 6.75 kB
JavaScript
import { a as __makeTemplateObject } from '../../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rgba, darken } from 'polished';
import { inputColors, inputShape, FauxMark, Hidden, ToggleInput, SquareInput, RoundInput } from '../Shared.esm.js';
import { blue, slate, grayscale } from '../../../color/colors.esm.js';
var InputStyled = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), inputColors, inputShape);
var radii = {
radio: 50,
checkbox: 4,
toggle: 30,
};
var Faux = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n ", ";\n"])), inputColors, function (_a) {
var type = _a.type, mirror = _a.mirror;
return FauxMark(type, mirror);
}, FauxType);
var HiddenMark = styled.input.attrs(function (_a) {
var type = _a.type;
return ({
type: type === 'toggle' ? 'checkbox' : type,
toggle: type === 'toggle',
});
})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n ", ";\n"])), Hidden, fauxMarkChecked, fauxToggleChecked);
function fauxMarkChecked(_a) {
var disabled = _a.disabled;
return css(templateObject_4 || (templateObject_4 = __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, rgba(blue(500), disabled ? 0 : 1), disabled ? 0.5 : 1);
}
var ToggleIcon = styled.div(templateObject_5 || (templateObject_5 = __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' ? slate(300) : grayscale(300);
var checkedColor = theme.formats.primary;
return (toggle && css(templateObject_6 || (templateObject_6 = __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, darken(0.1, checkedColor), darken(0.1, checkedColor), Faux, 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 css(templateObject_7 || (templateObject_7 = __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 "])), RoundInput(sizes[size]));
case 'checkbox':
return css(templateObject_8 || (templateObject_8 = __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 "])), SquareInput(sizes[size]), blue(500), checkmark);
case 'toggle':
return css(templateObject_9 || (templateObject_9 = __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 "])), 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;
export { Faux, FauxType, HiddenMark, InputStyled, ToggleIcon, checkmark, nullStyle, radii };