UNPKG

@vimeo/iris

Version:

Vimeo Design System

github.com/vimeo/iris/tree/main

vimeo/iris

88 lines (85 loc) • 8.77 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
import { a as __makeTemplateObject, e as __spreadArray, _ as __read } from '../../tslib.es6-7f0e734f.js'; import styled, { keyframes, css } from 'styled-components'; import { rgba } from 'polished'; import { core } from '../../tokens/core.esm.js'; import { grayscale, slate } from '../../color/colors.esm.js'; import '../../tokens/color/index.esm.js'; import '../../tokens/color/background/background.esm.js'; import '../../tokens/util/readToken.esm.js'; import '../../tokens/util/clamp.esm.js'; import '../../tokens/color/format/format.esm.js'; import '../../tokens/color/format/primary.esm.js'; import '../../tokens/color/format/secondary.esm.js'; import '../../tokens/color/format/tertiary.esm.js'; import '../../tokens/color/rainbow/rainbow.esm.js'; import '../../tokens/color/rainbow/conic/index.esm.js'; import '../../tokens/color/rainbow/conic/sm.esm.js'; import '../../tokens/color/rainbow/conic/xl.esm.js'; import '../../tokens/color/rainbow/linear/index.esm.js'; import '../../tokens/color/rainbow/linear/sm.esm.js'; import '../../tokens/color/rainbow/linear/xl.esm.js'; import '../../tokens/color/livestream/livestream.esm.js'; import '../../tokens/color/status/status.esm.js'; import '../../tokens/color/status/caution.esm.js'; import '../../tokens/color/status/negative.esm.js'; import '../../tokens/color/status/positive.esm.js'; import '../../tokens/color/stroke/stroke.esm.js'; import '../../tokens/color/surface/surface.esm.js'; import '../../tokens/color/text/text.esm.js'; import '../../tokens/util/round.esm.js'; import '../../tokens/color/upsell/upsell.esm.js'; import '../../tokens/color/upsell/sm.esm.js'; import '../../tokens/color/upsell/xl.esm.js'; import '../../tokens/color/upsell/new.esm.js'; import '../../tokens/edge/edge.esm.js'; import '../../tokens/space/space.esm.js'; import '../../tokens/typography/index.esm.js'; import '../../tokens/typography/size/size.esm.js'; var Action = styled.button(templateObject_1 || (templateObject_1 = __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 rgba(theme.content.color, 0.667); }); var Toggle = styled.div(templateObject_2 || (templateObject_2 = __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.div(templateObject_3 || (templateObject_3 = __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 rgba(p.theme.content.color, 0.5); }); var fade = keyframes(templateObject_4 || (templateObject_4 = __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.div(templateObject_6 || (templateObject_6 = __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' ? rgba(theme.content.color, 0.095) : rgba(theme.content.color, 0.065)); }, function (_a) { var theme = _a.theme; return rgba(theme.content.color, 0.025); }, function (p) { return p.$height && css(templateObject_5 || (templateObject_5 = __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 rgba(theme.content.color, 0.667); }); var ItemStyled = styled.button(templateObject_7 || (templateObject_7 = __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"])), core.color.text(0), function (_a) { var theme = _a.theme; return rgba(theme.content.color, 0.05); }, core.color.text(600), function (_a) { var theme = _a.theme; return rgba(theme.content.color, 0.667); }); var MenuStyled = styled.div(templateObject_8 || (templateObject_8 = __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' ? grayscale(970) : slate(30) : 'none'; }); var SubMenu = styled.div(templateObject_10 || (templateObject_10 = __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 __spreadArray([], __read(new Array(30)), false).map(function (_, i) { return css(templateObject_9 || (templateObject_9 = __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; export { Action, Header, ItemStyled, MenuStyled, SubMenu, Toggle, Wrapper };