UNPKG

@vimeo/iris

Version:

Vimeo Design System

github.com/vimeo/iris/tree/main

vimeo/iris

102 lines (95 loc) • 9.41 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
'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 tokens_core = require('../../tokens/core.js'); var color_colors = require('../../color/colors.js'); require('../../tokens/color/index.js'); require('../../tokens/color/background/background.js'); require('../../tokens/util/readToken.js'); require('../../tokens/util/clamp.js'); require('../../tokens/color/format/format.js'); require('../../tokens/color/format/primary.js'); require('../../tokens/color/format/secondary.js'); require('../../tokens/color/format/tertiary.js'); require('../../tokens/color/rainbow/rainbow.js'); require('../../tokens/color/rainbow/conic/index.js'); require('../../tokens/color/rainbow/conic/sm.js'); require('../../tokens/color/rainbow/conic/xl.js'); require('../../tokens/color/rainbow/linear/index.js'); require('../../tokens/color/rainbow/linear/sm.js'); require('../../tokens/color/rainbow/linear/xl.js'); require('../../tokens/color/livestream/livestream.js'); require('../../tokens/color/status/status.js'); require('../../tokens/color/status/caution.js'); require('../../tokens/color/status/negative.js'); require('../../tokens/color/status/positive.js'); require('../../tokens/color/stroke/stroke.js'); require('../../tokens/color/surface/surface.js'); require('../../tokens/color/text/text.js'); require('../../tokens/util/round.js'); require('../../tokens/color/upsell/upsell.js'); require('../../tokens/color/upsell/sm.js'); require('../../tokens/color/upsell/xl.js'); require('../../tokens/color/upsell/new.js'); require('../../tokens/edge/edge.js'); require('../../tokens/space/space.js'); require('../../tokens/typography/index.js'); require('../../tokens/typography/size/size.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled); var Action = styled__default["default"].button(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n position: absolute;\n top: 0.75rem;\n right: 0.5rem;\n border: 0;\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n > svg {\n width: 1.125rem;\n height: 1.125rem;\n\n * {\n fill: ", ";\n }\n }\n"], ["\n position: absolute;\n top: 0.75rem;\n right: 0.5rem;\n border: 0;\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n > svg {\n width: 1.125rem;\n height: 1.125rem;\n\n * {\n fill: ", ";\n }\n }\n"])), function (_a) { var theme = _a.theme; return polished.rgba(theme.content.color, 0.667); }); var Toggle = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n position: absolute;\n top: 0.5rem;\n left: -0.1rem;\n transition: 120ms ease-in-out;\n\n transform: ", ";\n\n &:focus {\n outline: none;\n }\n\n > svg {\n * {\n fill: ", ";\n }\n }\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n position: absolute;\n top: 0.5rem;\n left: -0.1rem;\n transition: 120ms ease-in-out;\n\n transform: ", ";\n\n &:focus {\n outline: none;\n }\n\n > svg {\n * {\n fill: ", ";\n }\n }\n"])), function (p) { return (p.open ? 'rotate(0deg)' : 'rotate(-90deg)'); }, function (_a) { var theme = _a.theme; return theme.content.color; }); var Header = styled__default["default"].div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n display: block;\n padding: 0.5rem 1.25rem;\n text-transform: uppercase;\n margin: 0.2rem 0 0;\n color: ", ";\n font-size: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.025rem;\n"], ["\n display: block;\n padding: 0.5rem 1.25rem;\n text-transform: uppercase;\n margin: 0.2rem 0 0;\n color: ", ";\n font-size: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.025rem;\n"])), function (p) { return polished.rgba(p.theme.content.color, 0.5); }); var fade = styled.keyframes(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: scale(0.99) translateX(-0.25rem);\n }\n 100% {\n opacity: 1;\n transform: scale(1) translateX(0);\n }\n"], ["\n 0% {\n opacity: 0;\n transform: scale(0.99) translateX(-0.25rem);\n }\n 100% {\n opacity: 1;\n transform: scale(1) translateX(0);\n }\n"]))); var Wrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n border-radius: 0.2rem;\n position: relative;\n background: ", ";\n\n &:hover {\n background: ", ";\n }\n\n ", "\n\n > svg {\n width: 1.125rem;\n height: 1.125rem;\n margin: 0 0.5rem 0 0;\n display: inline-block;\n\n * {\n fill: ", ";\n }\n }\n"], ["\n border-radius: 0.2rem;\n position: relative;\n background: ", ";\n\n &:hover {\n background: ", ";\n }\n\n ", "\n\n > svg {\n width: 1.125rem;\n height: 1.125rem;\n margin: 0 0.5rem 0 0;\n display: inline-block;\n\n * {\n fill: ", ";\n }\n }\n"])), function (_a) { var active = _a.active, theme = _a.theme; return active && (theme.name === 'dark' ? polished.rgba(theme.content.color, 0.095) : polished.rgba(theme.content.color, 0.065)); }, function (_a) { var theme = _a.theme; return polished.rgba(theme.content.color, 0.025); }, function (p) { return p.$height && styled.css(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n transition: 230ms ease-in-out;\n height: ", "rem;\n "], ["\n transition: 230ms ease-in-out;\n height: ", "rem;\n "])), (p.$height + 1) * 2.5 + 0.25); }, function (_a) { var theme = _a.theme; return polished.rgba(theme.content.color, 0.667); }); var ItemStyled = styled__default["default"].button(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n padding: 0.5rem 1.25rem 0.5rem 1.5rem;\n display: flex;\n flex-wrap: wrap;\n position: relative;\n align-items: center;\n line-height: 1.5rem;\n border-radius: 0.2rem;\n font-size: 0.875rem;\n width: 100%;\n background: transparent;\n color: ", ";\n border: 0;\n cursor: pointer;\n\n &:hover {\n background: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n color: ", ";\n opacity: 0.5;\n pointer-events: none;\n user-select: none;\n }\n\n > svg {\n width: 1.125rem;\n height: 1.125rem;\n margin-right: 1rem;\n\n * {\n fill: ", ";\n }\n }\n"], ["\n padding: 0.5rem 1.25rem 0.5rem 1.5rem;\n display: flex;\n flex-wrap: wrap;\n position: relative;\n align-items: center;\n line-height: 1.5rem;\n border-radius: 0.2rem;\n font-size: 0.875rem;\n width: 100%;\n background: transparent;\n color: ", ";\n border: 0;\n cursor: pointer;\n\n &:hover {\n background: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n color: ", ";\n opacity: 0.5;\n pointer-events: none;\n user-select: none;\n }\n\n > svg {\n width: 1.125rem;\n height: 1.125rem;\n margin-right: 1rem;\n\n * {\n fill: ", ";\n }\n }\n"])), tokens_core.core.color.text(0), function (_a) { var theme = _a.theme; return polished.rgba(theme.content.color, 0.05); }, tokens_core.core.color.text(600), function (_a) { var theme = _a.theme; return polished.rgba(theme.content.color, 0.667); }); var MenuStyled = styled__default["default"].div(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n display: block;\n width: 20rem;\n border-radius: 0.25rem;\n color: ", ";\n background: ", ";\n"], ["\n display: block;\n width: 20rem;\n border-radius: 0.25rem;\n color: ", ";\n background: ", ";\n"])), function (_a) { var theme = _a.theme; return theme.content.color; }, function (_a) { var theme = _a.theme, format = _a.format; return format === 'secondary' ? theme.name === 'dark' ? color_colors.grayscale(970) : color_colors.slate(30) : 'none'; }); var SubMenu = styled__default["default"].div(templateObject_10 || (templateObject_10 = tslib_es6.__makeTemplateObject(["\n width: 100%;\n padding-top: 0.25rem;\n\n > div {\n animation: ", " 120ms ease-in-out both;\n\n ", ";\n }\n"], ["\n width: 100%;\n padding-top: 0.25rem;\n\n > div {\n animation: ", " 120ms ease-in-out both;\n\n ", ";\n }\n"])), fade, function (p) { return tslib_es6.__spreadArray([], tslib_es6.__read(new Array(30)), false).map(function (_, i) { return styled.css(templateObject_9 || (templateObject_9 = tslib_es6.__makeTemplateObject(["\n &:nth-child(", ") {\n animation-delay: ", "ms;\n }\n "], ["\n &:nth-child(", ") {\n animation-delay: ", "ms;\n }\n "])), i, i * (20 + 100 / p.total)); }); }); var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10; exports.Action = Action; exports.Header = Header; exports.ItemStyled = ItemStyled; exports.MenuStyled = MenuStyled; exports.SubMenu = SubMenu; exports.Toggle = Toggle; exports.Wrapper = Wrapper;