@cuemath/leap 3.0.12-ays2 → 3.0.12-ays3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import t from "styled-components";
|
|
2
|
-
import
|
|
2
|
+
import a from "../../../../assets/line-icons/icons/important.js";
|
|
3
3
|
import s from "../../../../assets/line-icons/icons/lock2.js";
|
|
4
4
|
import e from "../../../ui/layout/flex-view.js";
|
|
5
5
|
import d from "../../../ui/text/text.js";
|
|
6
|
-
const
|
|
6
|
+
const b = t(e)(({ theme: o, $disabled: r }) => {
|
|
7
7
|
const { BLACK: i, BLACK_T_15: n } = o.colors;
|
|
8
8
|
return `
|
|
9
9
|
cursor: ${r ? "not-allowed" : "pointer"};
|
|
@@ -21,37 +21,13 @@ const f = t(e)(({ theme: o, $disabled: r }) => {
|
|
|
21
21
|
background: transparent;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.node-card-border > .border-path {
|
|
25
|
-
fill: none;
|
|
26
|
-
stroke: ${n};
|
|
27
|
-
stroke-width: 1.5;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.node-card-border > .border-path-animation {
|
|
31
|
-
fill: none;
|
|
32
|
-
stroke: ${i};
|
|
33
|
-
stroke-width: 1.5;
|
|
34
|
-
//* view box size 170 + 56 + 170 + 56 = 452
|
|
35
|
-
//* 452 / 2 = 226
|
|
36
|
-
stroke-dasharray: 226 226;
|
|
37
|
-
stroke-dashoffset: 0;
|
|
38
|
-
|
|
39
|
-
animation: dashmove 6s linear infinite;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@keyframes dashmove {
|
|
43
|
-
to {
|
|
44
|
-
stroke-dashoffset: -900;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
24
|
&:hover {
|
|
49
25
|
${!r && `
|
|
50
|
-
outline: 1px solid ${
|
|
26
|
+
outline: 1px solid ${i};
|
|
51
27
|
`}
|
|
52
28
|
}
|
|
53
29
|
`;
|
|
54
|
-
}),
|
|
30
|
+
}), h = t(a)(({ theme: o }) => {
|
|
55
31
|
const { layout: r } = o;
|
|
56
32
|
return `
|
|
57
33
|
width: ${r.gutter * 0.75}px;
|
|
@@ -60,19 +36,19 @@ const f = t(e)(({ theme: o, $disabled: r }) => {
|
|
|
60
36
|
top: -2.5px;
|
|
61
37
|
right: -2.5px;
|
|
62
38
|
`;
|
|
63
|
-
}),
|
|
39
|
+
}), m = t(e)(({ $bgImage: o }) => `
|
|
64
40
|
background-image: url(${o});
|
|
65
41
|
|
|
66
42
|
& .context-menu {
|
|
67
43
|
justify-self: flex-end;
|
|
68
44
|
margin-left: auto;
|
|
69
45
|
}
|
|
70
|
-
`),
|
|
46
|
+
`), f = t(e)`
|
|
71
47
|
border-radius: 50%;
|
|
72
48
|
`, $ = t(e)(() => `
|
|
73
49
|
position: relative;
|
|
74
50
|
padding: 12px 8px 12px 12px;
|
|
75
|
-
`),
|
|
51
|
+
`), I = t(e)(({ $top: o, $right: r }) => `
|
|
76
52
|
position: absolute;
|
|
77
53
|
top: ${o ?? 0}px;
|
|
78
54
|
right: ${r ?? 0}px;
|
|
@@ -87,7 +63,7 @@ const w = t(e)(({
|
|
|
87
63
|
$paddingRight: r,
|
|
88
64
|
$paddingLeft: i
|
|
89
65
|
}) => {
|
|
90
|
-
const { BLACK_1: n, WHITE_1:
|
|
66
|
+
const { BLACK_1: n, WHITE_1: p } = o.colors;
|
|
91
67
|
return `
|
|
92
68
|
position: absolute;
|
|
93
69
|
top: -10px;
|
|
@@ -98,23 +74,23 @@ const w = t(e)(({
|
|
|
98
74
|
background: ${n};
|
|
99
75
|
|
|
100
76
|
path {
|
|
101
|
-
fill: ${
|
|
77
|
+
fill: ${p};
|
|
102
78
|
}
|
|
103
79
|
`;
|
|
104
|
-
}),
|
|
80
|
+
}), W = t(d)(() => `
|
|
105
81
|
display: -webkit-box;
|
|
106
82
|
-webkit-box-orient: vertical;
|
|
107
83
|
-webkit-line-clamp: 2;
|
|
108
84
|
text-overflow: ellipsis;
|
|
109
85
|
overflow: hidden;
|
|
110
|
-
`),
|
|
86
|
+
`), k = t(e)(({ theme: o }) => `
|
|
111
87
|
cursor: pointer;
|
|
112
88
|
|
|
113
89
|
&:hover {
|
|
114
90
|
border-radius: 50%;
|
|
115
91
|
background: ${o.colors.WHITE_5};
|
|
116
92
|
}
|
|
117
|
-
`),
|
|
93
|
+
`), C = t(e)(({ theme: o, $visible: r }) => `
|
|
118
94
|
cursor: pointer;
|
|
119
95
|
|
|
120
96
|
position: absolute;
|
|
@@ -133,15 +109,15 @@ const w = t(e)(({
|
|
|
133
109
|
}
|
|
134
110
|
`);
|
|
135
111
|
export {
|
|
136
|
-
|
|
112
|
+
f as IconWrapper,
|
|
137
113
|
w as InProgressIconWrapper,
|
|
138
|
-
|
|
114
|
+
b as NodeCardContainer,
|
|
139
115
|
$ as NodeCardContentWrapper,
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
116
|
+
m as NodeCardInfoWrapper,
|
|
117
|
+
W as NodeCardTitle,
|
|
118
|
+
k as NodeKebabMenuWrapper,
|
|
119
|
+
C as NodeMenuOptionsWrapper,
|
|
120
|
+
I as SheetTagWrapper,
|
|
121
|
+
h as StyledImportantIcon
|
|
146
122
|
};
|
|
147
123
|
//# sourceMappingURL=node-card-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n $disabled: boolean;\n $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({ theme, $disabled }) => {\n const { BLACK, BLACK_T_15 } = theme.colors;\n\n return `\n cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n position: relative;\n border-image: linear-gradient(to right, ${BLACK_T_15} 0%, ${BLACK_T_15} 100%);\n\n .node-card-border {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: transparent;\n }\n\n
|
|
1
|
+
{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n $disabled: boolean;\n $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({ theme, $disabled }) => {\n const { BLACK, BLACK_T_15 } = theme.colors;\n\n return `\n cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n position: relative;\n border-image: linear-gradient(to right, ${BLACK_T_15} 0%, ${BLACK_T_15} 100%);\n\n .node-card-border {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: transparent;\n }\n\n &:hover {\n ${\n !$disabled &&\n `\n outline: 1px solid ${BLACK};\n `\n } \n }\n `;\n});\n\nconst StyledImportantIcon = styled(ImportantIcon)(({ theme }) => {\n const { layout } = theme;\n\n return `\n width: ${layout.gutter * 0.75}px;\n height: ${layout.gutter * 0.75}px;\n position: absolute;\n top: -2.5px;\n right: -2.5px;\n `;\n});\n\ninterface INodeCardInfoWrapper {\n $bgImage: string;\n}\n\nconst NodeCardInfoWrapper = styled(FlexView)<INodeCardInfoWrapper>(({ $bgImage }) => {\n return `\n background-image: url(${$bgImage});\n\n & .context-menu {\n justify-self: flex-end;\n margin-left: auto;\n }\n `;\n});\n\nconst IconWrapper = styled(FlexView)`\n border-radius: 50%;\n`;\n\nconst NodeCardContentWrapper = styled(FlexView)(() => {\n return `\n position: relative;\n padding: 12px 8px 12px 12px;\n `;\n});\n\ninterface ISheetTagWrapper {\n $top?: number;\n $right?: number;\n}\n\nconst SheetTagWrapper = styled(FlexView)<ISheetTagWrapper>(({ $top, $right }) => {\n return `\n position: absolute;\n top: ${$top ?? 0}px;\n right: ${$right ?? 0}px;\n z-index: 3;\n`;\n});\n\nconst StyledLockIcon = styled(Lock2Icon)(({}) => {\n return `\n width: 28px;\n height: 28px;\n `;\n});\n\nconst InProgressIconWrapper = styled(FlexView)<{ $paddingRight: number; $paddingLeft: number }>(({\n theme,\n $paddingRight,\n $paddingLeft,\n}) => {\n const { BLACK_1, WHITE_1 } = theme.colors;\n\n return `\n position: absolute;\n top: -10px;\n right: -10px;\n padding: 0px;\n padding-left: ${$paddingLeft}px;\n padding-right: ${$paddingRight}px;\n background: ${BLACK_1};\n\n path {\n fill: ${WHITE_1};\n }\n `;\n});\n\nconst NodeCardTitle = styled(Text)(() => {\n return `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n `;\n});\n\nconst NodeKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n return `\n cursor: pointer;\n \n &:hover {\n border-radius: 50%;\n background: ${theme.colors.WHITE_5}; \n }\n `;\n});\n\ninterface INodeOptionsMenuWrapper {\n $visible: boolean;\n}\n\nconst NodeMenuOptionsWrapper = styled(FlexView)<INodeOptionsMenuWrapper>(({ theme, $visible }) => {\n return `\n cursor: pointer;\n\n position: absolute;\n z-index: 6;\n top: calc(100% + 4px);\n left: 0;\n\n transform-origin: top;\n transform: scaleY(${$visible ? 1 : 0});\n opacity: ${$visible ? 1 : 0};\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n \n &:hover {\n border-radius: 50%;\n background: ${theme.colors.WHITE_5}; \n }\n `;\n});\n\nexport {\n NodeCardContainer,\n StyledImportantIcon,\n NodeCardInfoWrapper,\n IconWrapper,\n NodeCardContentWrapper,\n SheetTagWrapper,\n StyledLockIcon,\n InProgressIconWrapper,\n NodeCardTitle,\n NodeKebabMenuWrapper,\n NodeMenuOptionsWrapper,\n};\n"],"names":["NodeCardContainer","styled","FlexView","theme","$disabled","BLACK","BLACK_T_15","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","BLACK_1","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAYM,MAAAA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACvF,QAAM,EAAE,OAAAC,GAAO,YAAAC,MAAeH,EAAM;AAE7B,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELE,CAAU,QAAQA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAelE,CAACF,KACD;AAAA,+BACuBC,CAAK;AAAA,SAE9B;AAAA;AAAA;AAGN,CAAC,GAEKE,IAAsBN,EAAOO,CAAa,EAAE,CAAC,EAAE,OAAAL,QAAY;AACzD,QAAA,EAAE,QAAAM,EAAW,IAAAN;AAEZ,SAAA;AAAA,aACIM,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBT,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAS,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcX,EAAOC,CAAQ;AAAA;AAAA,GAI7BW,IAAyBZ,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKY,IAAkBb,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAa,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBf,EAAOgB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBjB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAgB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYnB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWiB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBtB,EAAOuB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuBxB,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKuB,IAAyBzB,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,GAAO,UAAAwB,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKXxB,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}
|