@onepercentio/one-ui 0.8.1 → 0.8.2
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.
- package/dist/hooks/usePagination.d.ts +1 -0
- package/dist/hooks/usePagination.js +2 -2
- package/dist/hooks/usePagination.js.map +1 -1
- package/package.json +1 -1
- package/dist/assets/img/svg/checkbox.svg +0 -3
- package/dist/assets/styles/index.scss +0 -2
- package/dist/assets/styles/mixins.scss +0 -12
- package/dist/assets/styles/variables.scss +0 -51
- package/dist/components/AdaptiveButton/AdaptiveButton.module.scss +0 -51
- package/dist/components/AdaptiveContainer/AdaptiveContainer.module.scss +0 -51
- package/dist/components/AdaptiveDialog/AdaptiveDialog.module.scss +0 -145
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss +0 -52
- package/dist/components/AnchoredTooltip/AnchoredTooltip.module.scss +0 -62
- package/dist/components/AnimatedEntrance/AnimatedEntrance.module.scss +0 -107
- package/dist/components/Avatar/Avatar.module.scss +0 -22
- package/dist/components/Background/Background.d.ts +0 -7
- package/dist/components/Background/Background.js +0 -58
- package/dist/components/Background/Background.js.map +0 -1
- package/dist/components/Background/Background.module.scss +0 -106
- package/dist/components/Background/Background.stories.d.ts +0 -7
- package/dist/components/Background/Background.stories.js +0 -30
- package/dist/components/Background/Background.stories.js.map +0 -1
- package/dist/components/Background/ground-tile.svg +0 -9
- package/dist/components/Background/index.d.ts +0 -1
- package/dist/components/Background/index.js +0 -9
- package/dist/components/Background/index.js.map +0 -1
- package/dist/components/BucketFill/BucketFill.module.scss +0 -36
- package/dist/components/BucketFill/BucketFill.stories.module.scss +0 -3
- package/dist/components/Button/Button.module.scss +0 -42
- package/dist/components/Card/Card.module.scss +0 -12
- package/dist/components/CheckBox/CheckBox.module.scss +0 -25
- package/dist/components/Collapsable/Collapsable.module.scss +0 -34
- package/dist/components/Divider/Divider.module.scss +0 -7
- package/dist/components/EmailInput/EmailInput.module.scss +0 -0
- package/dist/components/FadeIn/FadeIn.module.scss +0 -18
- package/dist/components/FileInput/FileInput.module.scss +0 -27
- package/dist/components/FlowController/FlowController.module.scss +0 -47
- package/dist/components/Header/Header.module.scss +0 -119
- package/dist/components/HeaderCloseBtn/HeaderCloseBtn.module.scss +0 -44
- package/dist/components/InfinityScroll/InfinityScroll.module.scss +0 -30
- package/dist/components/Input/Input.module.scss +0 -69
- package/dist/components/LinkToId/LinkToId.module.scss +0 -4
- package/dist/components/Loader/Loader.module.scss +0 -40
- package/dist/components/MainGrid/MainGrid.module.scss +0 -28
- package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss +0 -179
- package/dist/components/Notification/Notification.module.scss +0 -25
- package/dist/components/Parallax/Parallax.module.scss +0 -28
- package/dist/components/PasswordInput/PasswordInput.module.scss +0 -11
- package/dist/components/PixelatedScan/PixelatedScan.module.scss +0 -86
- package/dist/components/Portal/Portal.module.scss +0 -3
- package/dist/components/ProgressBar/ProgressBar.module.scss +0 -32
- package/dist/components/ProgressTexts/ProgressTexts.module.scss +0 -37
- package/dist/components/SectionContainer/SectionContainer.module.scss +0 -30
- package/dist/components/Select/Select.module.scss +0 -46
- package/dist/components/Spacing/Spacing.module.scss +0 -13
- package/dist/components/Table/Table.module.scss +0 -76
- package/dist/components/Tabs/Tabs.module.scss +0 -22
- package/dist/components/Text/Text.module.scss +0 -77
- package/dist/components/Transition/Transition.module.scss +0 -188
- package/dist/components/Transition/TransitionContainer/TransitionContainer.d.ts +0 -4
- package/dist/components/Transition/TransitionContainer/TransitionContainer.js +0 -14
- package/dist/components/Transition/TransitionContainer/TransitionContainer.js.map +0 -1
- package/dist/components/Transition/TransitionContainer/index.d.ts +0 -1
- package/dist/components/Transition/TransitionContainer/index.js +0 -9
- package/dist/components/Transition/TransitionContainer/index.js.map +0 -1
- package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.module.scss +0 -66
- package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.module.scss +0 -5
- package/dist/context/AsyncProcessQueue.d.ts +0 -37
- package/dist/context/AsyncProcessQueue.js +0 -160
- package/dist/context/AsyncProcessQueue.js.map +0 -1
- package/dist/context/OneUIProvider.test.d.ts +0 -1
- package/dist/context/OneUIProvider.test.js +0 -45
- package/dist/context/OneUIProvider.test.js.map +0 -1
- package/dist/types.d.ts +0 -85
|
@@ -40,7 +40,7 @@ function usePagination(request, paginationId = () => "default") {
|
|
|
40
40
|
const _requestPage = (0, react_1.useCallback)(function (page, ...args) {
|
|
41
41
|
var _a;
|
|
42
42
|
const id = paginationId(...args);
|
|
43
|
-
if ((
|
|
43
|
+
if ((_a = paginationData[id]) === null || _a === void 0 ? void 0 : _a.finished)
|
|
44
44
|
return;
|
|
45
45
|
process(() => __awaiter(this, void 0, void 0, function* () {
|
|
46
46
|
const result = yield request(page, (items === null || items === void 0 ? void 0 : items[0]) === id ? items === null || items === void 0 ? void 0 : items[1] : undefined, ...args);
|
|
@@ -51,7 +51,7 @@ function usePagination(request, paginationId = () => "default") {
|
|
|
51
51
|
};
|
|
52
52
|
setItems([id, result.items]);
|
|
53
53
|
}));
|
|
54
|
-
}, [items, request
|
|
54
|
+
}, [items, request]);
|
|
55
55
|
return {
|
|
56
56
|
updateItems,
|
|
57
57
|
getNextPage: (...args) => _requestPage((currentPage[paginationId(...args)] || 0) + 1, ...args),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA0E;AAC1E,wEAAgD;AAChD,+DAAuC;AAQvC,SAAwB,aAAa,CACnC,OAA6E,EAC7E,eAAuC,GAAG,EAAE,CAAC,SAAS;IAEtD,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAO7B,EAAE,CAAC,CAAC;IACP,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC;IAEtD,MAAM,cAAc,GAAG,IAAA,cAAM,EAA0B,EAAE,CAAC,CAAC;IAC3D,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC;IAEhD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAe,CAAC;IAClD,MAAM,KAA0B,IAAA,yBAAe,GAAE,EAA3C,EAAE,OAAO,OAAkC,EAA7B,OAAO,cAArB,WAAuB,CAAoB,CAAC;IAElD,SAAS,WAAW,CAAC,EAA8C;QACjE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACrC,CAAC;IAED,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,UAAU,IAAY,EAAE,GAAG,IAAO;;QACjE,MAAM,EAAE,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;QACjC,IAAI,
|
|
1
|
+
{"version":3,"file":"usePagination.js","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
$digitalBlue: var(--digital-blue, #558eff);
|
|
2
|
-
$mediumGray: var(--medium-gray, #bababa);
|
|
3
|
-
$lightGray: var(--light-gray, #d6d6d6);
|
|
4
|
-
$spaceBlue: var(--space-blue, #0f113a);
|
|
5
|
-
$warningRed: var(--warning-red, #e84b4b);
|
|
6
|
-
$sunsetPink: var(--sunset-pink, #ff3e7d);
|
|
7
|
-
$darkestGray: var(--darkest-gray, #727272);
|
|
8
|
-
$gray: var(--gray, #0f113a);
|
|
9
|
-
$success: var(--success, lightgreen);
|
|
10
|
-
$mainBackgroundColor: var(--bg-color, white);
|
|
11
|
-
|
|
12
|
-
//FONTS
|
|
13
|
-
$mainFontFamily: var(--main-font, Roboto);
|
|
14
|
-
$secondaryFontFamily: var(--second-font, Manrope);
|
|
15
|
-
|
|
16
|
-
// Component specific variables on the format --<component>-<element>-<category>
|
|
17
|
-
$headerFillBackgroundColor: var(--header-background-color, $digitalBlue);
|
|
18
|
-
$headerBackgroundColor: var(--header-divider-bg-color, #467eea);
|
|
19
|
-
$headerTextColor: var(--header-text-color, #94b8ff);
|
|
20
|
-
$headerBrightColor: var(--header-bright-color, white);
|
|
21
|
-
|
|
22
|
-
$tableRowBgColor: var(--table-row-bg-color, white);
|
|
23
|
-
$tableRowBorderColor: var(--table-row-border-color, #bec1ca);
|
|
24
|
-
|
|
25
|
-
$buttonMinHeight: var(--button-min-height, 62px);
|
|
26
|
-
$buttonMinWidth: var(--button-min-width, 150px);
|
|
27
|
-
$buttonBorderRadius: var(--button-border-radius, 8px);
|
|
28
|
-
$buttonTextColor: var(--button-text-color, white);
|
|
29
|
-
|
|
30
|
-
$tooltipBackgroudColor: var(--tooltip-background-color, $digitalBlue);
|
|
31
|
-
|
|
32
|
-
$checkboxBaseColor: var(--checkbox-base-color, $digitalBlue);
|
|
33
|
-
|
|
34
|
-
$textDefaultColor: var(--text-default-color, $digitalBlue);
|
|
35
|
-
|
|
36
|
-
$buttonPrimaryBackgroundColor: var(--button-primary-bg-color, #1e22aa);
|
|
37
|
-
|
|
38
|
-
$fileInputBackgroundColor: var(--file-input-bg-color, #f2f6f7);
|
|
39
|
-
$fileInputBorderColor: var(--file-input-border-color, #dce1e8);
|
|
40
|
-
|
|
41
|
-
$avatarBackgroundColor: var(--avatar-bg-color, $lightGray);
|
|
42
|
-
|
|
43
|
-
$pixelatedGuideBackground: var(--pixelated-scan-bg, var(--digital-blue));
|
|
44
|
-
|
|
45
|
-
// Animation speed variables
|
|
46
|
-
$almostInstant: var(--animation--speed-almostInstant, 50ms);
|
|
47
|
-
$veryFast: var(--animation--speed-veryfast, 125ms);
|
|
48
|
-
$fast: var(--animation--speed-fast, 250ms);
|
|
49
|
-
$normal: var(--animation--speed-normal, 500ms);
|
|
50
|
-
$slow: var(--animation--speed-slow, 1s);
|
|
51
|
-
$verySlow: var(--animation--speed-veryslow, 2s);
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
.resetSection {
|
|
2
|
-
min-height: 0px;
|
|
3
|
-
transition: width 400ms;
|
|
4
|
-
transition-timing-function: linear;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
> * {
|
|
7
|
-
min-width: auto !important;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.resetButton {
|
|
12
|
-
min-width: 0px !important;
|
|
13
|
-
white-space: nowrap;
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
text-align: center;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@keyframes fadeInDelayed {
|
|
20
|
-
0% {
|
|
21
|
-
opacity: 0;
|
|
22
|
-
}
|
|
23
|
-
50% {
|
|
24
|
-
opacity: 0.1;
|
|
25
|
-
}
|
|
26
|
-
100% {
|
|
27
|
-
opacity: 1;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
@keyframes fadeOutDelayed {
|
|
31
|
-
0% {
|
|
32
|
-
opacity: 1;
|
|
33
|
-
}
|
|
34
|
-
50% {
|
|
35
|
-
opacity: 0.1;
|
|
36
|
-
}
|
|
37
|
-
100% {
|
|
38
|
-
opacity: 0;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.fadeInDelayed {
|
|
43
|
-
animation-name: fadeInDelayed;
|
|
44
|
-
animation-duration: 500ms !important;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.fadeOutAbsolute {
|
|
48
|
-
position: absolute;
|
|
49
|
-
animation-name: fadeOutDelayed;
|
|
50
|
-
animation-duration: 500ms !important;
|
|
51
|
-
}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
.resetSection {
|
|
2
|
-
min-height: 0px;
|
|
3
|
-
transition: width 400ms;
|
|
4
|
-
transition-timing-function: linear;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
> * {
|
|
7
|
-
min-width: auto !important;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.resetButton {
|
|
12
|
-
min-width: 0px !important;
|
|
13
|
-
white-space: nowrap;
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
text-align: center;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@keyframes fadeInDelayed {
|
|
20
|
-
0% {
|
|
21
|
-
opacity: 0;
|
|
22
|
-
}
|
|
23
|
-
50% {
|
|
24
|
-
opacity: 0.1;
|
|
25
|
-
}
|
|
26
|
-
100% {
|
|
27
|
-
opacity: 1;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
@keyframes fadeOutDelayed {
|
|
31
|
-
0% {
|
|
32
|
-
opacity: 1;
|
|
33
|
-
}
|
|
34
|
-
50% {
|
|
35
|
-
opacity: 0.1;
|
|
36
|
-
}
|
|
37
|
-
100% {
|
|
38
|
-
opacity: 0;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.fadeInDelayed {
|
|
43
|
-
animation-name: fadeInDelayed;
|
|
44
|
-
animation-duration: 500ms !important;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.fadeOutAbsolute {
|
|
48
|
-
position: absolute;
|
|
49
|
-
animation-name: fadeOutDelayed;
|
|
50
|
-
animation-duration: 500ms !important;
|
|
51
|
-
}
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.backdrop {
|
|
4
|
-
position: fixed;
|
|
5
|
-
top: 0px;
|
|
6
|
-
left: 0px;
|
|
7
|
-
right: 0px;
|
|
8
|
-
bottom: 0px;
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: center;
|
|
11
|
-
justify-content: center;
|
|
12
|
-
z-index: 1000;
|
|
13
|
-
transition: backdrop-filter $veryFast linear;
|
|
14
|
-
backdrop-filter: var(--adaptive-dialog-backdrop-backdrop, initial);
|
|
15
|
-
|
|
16
|
-
@media screen and (orientation: "portrait") {
|
|
17
|
-
align-items: flex-end;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
.backdrop,
|
|
21
|
-
.container {
|
|
22
|
-
animation-duration: $fast;
|
|
23
|
-
animation-fill-mode: forwards;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.open {
|
|
27
|
-
&.backdrop {
|
|
28
|
-
animation-name: backdropAppear;
|
|
29
|
-
}
|
|
30
|
-
.container {
|
|
31
|
-
animation-name: reveal;
|
|
32
|
-
}
|
|
33
|
-
@media screen and (orientation: "portrait") {
|
|
34
|
-
.container {
|
|
35
|
-
animation-timing-function: ease-in-out;
|
|
36
|
-
animation-name: slideUp;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.close {
|
|
42
|
-
&.backdrop {
|
|
43
|
-
animation-name: backdropDismiss;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.container {
|
|
47
|
-
animation-name: dismiss;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@media screen and (orientation: "portrait") {
|
|
51
|
-
.container {
|
|
52
|
-
animation-name: slideDown;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.container {
|
|
58
|
-
> .closeBtn {
|
|
59
|
-
position: absolute;
|
|
60
|
-
right: 16px;
|
|
61
|
-
top: 16px;
|
|
62
|
-
background: none;
|
|
63
|
-
border: none;
|
|
64
|
-
width: auto;
|
|
65
|
-
height: auto;
|
|
66
|
-
padding: 0px !important;
|
|
67
|
-
}
|
|
68
|
-
padding: 16px 32px;
|
|
69
|
-
position: relative;
|
|
70
|
-
width: 100%;
|
|
71
|
-
max-width: 640px;
|
|
72
|
-
background: $mainBackgroundColor;
|
|
73
|
-
backdrop-filter: var(--adaptive-dialog-backdrop, initial);
|
|
74
|
-
display: flex;
|
|
75
|
-
align-items: center;
|
|
76
|
-
justify-content: center;
|
|
77
|
-
flex-direction: column;
|
|
78
|
-
max-height: 90% !important;
|
|
79
|
-
overscroll-behavior: contain;
|
|
80
|
-
@media screen and (orientation: "portrait") {
|
|
81
|
-
min-height: initial;
|
|
82
|
-
align-items: flex-start;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
@keyframes backdropAppear {
|
|
87
|
-
0% {
|
|
88
|
-
background-color: #0000;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
100% {
|
|
92
|
-
background-color: #0005;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
@keyframes backdropDismiss {
|
|
97
|
-
0% {
|
|
98
|
-
background-color: #0005;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
100% {
|
|
102
|
-
background-color: #0000;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
@keyframes reveal {
|
|
107
|
-
0% {
|
|
108
|
-
opacity: 0;
|
|
109
|
-
}
|
|
110
|
-
100% {
|
|
111
|
-
opacity: 1;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@keyframes dismiss {
|
|
116
|
-
0% {
|
|
117
|
-
opacity: 1;
|
|
118
|
-
}
|
|
119
|
-
100% {
|
|
120
|
-
opacity: 0;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
@keyframes slideUp {
|
|
125
|
-
0% {
|
|
126
|
-
min-height: 0px;
|
|
127
|
-
transform: translateY(100%);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
100% {
|
|
131
|
-
min-height: 0px;
|
|
132
|
-
transform: translateY(0%);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
@keyframes slideDown {
|
|
137
|
-
0% {
|
|
138
|
-
transform: translateY(0%);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
100% {
|
|
142
|
-
min-height: 0px;
|
|
143
|
-
transform: translateY(100%);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
$hamburgerSize: 48;
|
|
4
|
-
$hamburgerOffset: 24;
|
|
5
|
-
|
|
6
|
-
@value hamburgerSize #{$hamburgerSize};
|
|
7
|
-
|
|
8
|
-
.hamburger {
|
|
9
|
-
position: fixed;
|
|
10
|
-
top: #{$hamburgerOffset}px;
|
|
11
|
-
left: #{$hamburgerOffset}px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.hamburger {
|
|
15
|
-
display: initial;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.hamburger,
|
|
19
|
-
.container {
|
|
20
|
-
z-index: 1000;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@media screen and (min-width: 640px) {
|
|
24
|
-
.hamburger {
|
|
25
|
-
display: none;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.container {
|
|
30
|
-
box-sizing: border-box;
|
|
31
|
-
height: 100%;
|
|
32
|
-
|
|
33
|
-
@media screen and (max-width: 639px) {
|
|
34
|
-
&.defaultPadding {
|
|
35
|
-
padding-top: #{$hamburgerSize + $hamburgerOffset * 2}px;
|
|
36
|
-
}
|
|
37
|
-
position: fixed;
|
|
38
|
-
width: 100%;
|
|
39
|
-
overflow: auto;
|
|
40
|
-
z-index: 1000;
|
|
41
|
-
left: 0;
|
|
42
|
-
|
|
43
|
-
&.open {
|
|
44
|
-
transition: transform $veryFast ease-out;
|
|
45
|
-
transform: translateX(-0%);
|
|
46
|
-
}
|
|
47
|
-
&.closed {
|
|
48
|
-
transition: transform $veryFast ease-in;
|
|
49
|
-
transform: translateX(-100%);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Some notions to take into account
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
.tooltipContainer {
|
|
8
|
-
& > div {
|
|
9
|
-
background-color: $tooltipBackgroudColor;
|
|
10
|
-
}
|
|
11
|
-
// It should not overflow the viewport (screen)
|
|
12
|
-
max-width: 100vw;
|
|
13
|
-
max-height: 100vh;
|
|
14
|
-
min-width: fit-content;
|
|
15
|
-
|
|
16
|
-
// It should be floating over some point into the viewport
|
|
17
|
-
position: fixed;
|
|
18
|
-
|
|
19
|
-
// The position will be calculated via the javascript and the context
|
|
20
|
-
|
|
21
|
-
transition: top $almostInstant, left $almostInstant;
|
|
22
|
-
z-index: 1000;
|
|
23
|
-
|
|
24
|
-
pointer-events: none;
|
|
25
|
-
|
|
26
|
-
&.open {
|
|
27
|
-
pointer-events: initial;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&::after,
|
|
31
|
-
&::before {
|
|
32
|
-
content: " ";
|
|
33
|
-
width: 0px;
|
|
34
|
-
height: 0px;
|
|
35
|
-
border: 16px solid $tooltipBackgroudColor;
|
|
36
|
-
border-top-color: transparent;
|
|
37
|
-
border-right-color: transparent;
|
|
38
|
-
transform: translateY(-16px) rotate(-45deg);
|
|
39
|
-
display: block;
|
|
40
|
-
margin: auto;
|
|
41
|
-
position: relative;
|
|
42
|
-
left: var(--anchor-indicator-offset-left, 0px);
|
|
43
|
-
z-index: -1;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&::before {
|
|
47
|
-
display: none;
|
|
48
|
-
transform: translateY(16px) rotate(135deg);
|
|
49
|
-
}
|
|
50
|
-
&.anchoredTop {
|
|
51
|
-
transform: translateY(4px);
|
|
52
|
-
}
|
|
53
|
-
&.anchoredBottom {
|
|
54
|
-
transform: translateY(-4px);
|
|
55
|
-
&::after {
|
|
56
|
-
display: none;
|
|
57
|
-
}
|
|
58
|
-
&::before {
|
|
59
|
-
display: block;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
@use 'sass:math';
|
|
2
|
-
@keyframes expand {
|
|
3
|
-
0% {
|
|
4
|
-
transform: translateX(100%);
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
35% {
|
|
8
|
-
transform: translateX(100%);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
85% {
|
|
12
|
-
transform: translateX(-5%);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
100% {
|
|
16
|
-
transform: translateX(0%);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@keyframes exiting {
|
|
21
|
-
100% {
|
|
22
|
-
transform: translateX(100%);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
65% {
|
|
26
|
-
transform: translateX(100%);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
50% {
|
|
30
|
-
opacity: 0;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
15% {
|
|
34
|
-
transform: translateX(-5%);
|
|
35
|
-
opacity: 1;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
0% {
|
|
39
|
-
transform: translateX(0%);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
$duration: 1s;
|
|
43
|
-
|
|
44
|
-
.elementExiting {
|
|
45
|
-
animation-duration: $duration !important;
|
|
46
|
-
animation-name: exiting;
|
|
47
|
-
position: absolute;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.elementEntering {
|
|
51
|
-
animation-duration: $duration !important;
|
|
52
|
-
animation-name: expand;
|
|
53
|
-
}
|
|
54
|
-
.elementExitingReverse {
|
|
55
|
-
animation-duration: $duration !important;
|
|
56
|
-
animation-name: exiting;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.elementEnteringReverse {
|
|
60
|
-
animation-duration: $duration !important;
|
|
61
|
-
animation-name: expand;
|
|
62
|
-
position: absolute;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.resetHeight {
|
|
66
|
-
transition: max-height math.div($duration, 2) $duration * 0.2;
|
|
67
|
-
min-height: initial;
|
|
68
|
-
align-items: flex-start !important;
|
|
69
|
-
> * {
|
|
70
|
-
justify-content: flex-start !important;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.maxHeight {
|
|
75
|
-
max-height: 0px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
@keyframes nothing {
|
|
79
|
-
100% {
|
|
80
|
-
transform: translateX(0%);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
0% {
|
|
84
|
-
transform: translateX(0%);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.elementShrinking {
|
|
89
|
-
animation-duration: $duration !important;
|
|
90
|
-
animation-name: nothing;
|
|
91
|
-
position: absolute;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.elementExpanding {
|
|
95
|
-
animation-duration: $duration !important;
|
|
96
|
-
animation-name: nothing;
|
|
97
|
-
}
|
|
98
|
-
.elementShrinkingReverse {
|
|
99
|
-
animation-duration: $duration !important;
|
|
100
|
-
animation-name: nothing;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.elementExpandingReverse {
|
|
104
|
-
animation-duration: $duration !important;
|
|
105
|
-
animation-name: nothing;
|
|
106
|
-
position: absolute;
|
|
107
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.container {
|
|
4
|
-
&.noImg {
|
|
5
|
-
background-color: $avatarBackgroundColor;
|
|
6
|
-
}
|
|
7
|
-
display: inline-block;
|
|
8
|
-
width: 1em;
|
|
9
|
-
height: 1em;
|
|
10
|
-
border-radius: 0.5em;
|
|
11
|
-
|
|
12
|
-
> span,
|
|
13
|
-
> img {
|
|
14
|
-
font-size: 0.4em;
|
|
15
|
-
width: inherit;
|
|
16
|
-
height: inherit;
|
|
17
|
-
text-align: center;
|
|
18
|
-
line-height: 2.5em;
|
|
19
|
-
display: block;
|
|
20
|
-
color: $digitalBlue;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
const react_1 = __importStar(require("react"));
|
|
30
|
-
const Background_module_scss_1 = __importDefault(require("./Background.module.scss"));
|
|
31
|
-
const throttle_1 = __importDefault(require("lodash/throttle"));
|
|
32
|
-
/**
|
|
33
|
-
* An animated background that represents a 3d environment and places the user into a cenario
|
|
34
|
-
**/
|
|
35
|
-
function Background({ pointTo = "north", color, }) {
|
|
36
|
-
const base = (0, react_1.useRef)(null);
|
|
37
|
-
(0, react_1.useEffect)(() => {
|
|
38
|
-
const func = (0, throttle_1.default)((e) => {
|
|
39
|
-
const razao = document.body.clientWidth / document.body.clientHeight;
|
|
40
|
-
const baseX = 1;
|
|
41
|
-
const baseY = baseX * razao;
|
|
42
|
-
const percentX = (e.x * 100) / document.body.clientWidth / 100;
|
|
43
|
-
const percentY = (e.y * 100) / document.body.clientHeight / 100;
|
|
44
|
-
const perspectiveOffsetX = baseX * percentX - baseX / 2;
|
|
45
|
-
const perspectiveOffsetY = baseY * percentY - baseY / 2;
|
|
46
|
-
base.current.style.perspectiveOrigin = `${50 - perspectiveOffsetX}% ${40 - perspectiveOffsetY}%`;
|
|
47
|
-
}, 1000 / 15);
|
|
48
|
-
window.addEventListener("mousemove", func);
|
|
49
|
-
return () => {
|
|
50
|
-
window.removeEventListener("mousemove", func);
|
|
51
|
-
};
|
|
52
|
-
}, []);
|
|
53
|
-
return (react_1.default.createElement("div", { ref: base, style: { "--halo": color }, className: `${Background_module_scss_1.default.background} ${Background_module_scss_1.default[pointTo]}` },
|
|
54
|
-
react_1.default.createElement("div", { className: Background_module_scss_1.default.ground }),
|
|
55
|
-
react_1.default.createElement("div", { className: Background_module_scss_1.default.overlay })));
|
|
56
|
-
}
|
|
57
|
-
exports.default = Background;
|
|
58
|
-
//# sourceMappingURL=Background.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Background.js","sourceRoot":"","sources":["../../../src/components/Background/Background.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,sFAA8C;AAC9C,+DAAuC;AAEvC;;IAEI;AACJ,SAAwB,UAAU,CAAC,EACjC,OAAO,GAAG,OAAO,EACjB,KAAK,GAIN;IACC,MAAM,IAAI,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC1C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,IAAA,kBAAQ,EAAC,CAAC,CAAa,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;YACrE,MAAM,KAAK,GAAG,CAAC,CAAC;YAChB,MAAM,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;YAC5B,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;YAC/D,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;YAChE,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;YACxD,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;YACxD,IAAI,CAAC,OAAQ,CAAC,KAAK,CAAC,iBAAiB,GAAG,GAAG,EAAE,GAAG,kBAAkB,KAChE,EAAE,GAAG,kBACP,GAAG,CAAC;QACN,CAAC,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;QACd,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAC3C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAChD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,uCACE,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAS,EACjC,SAAS,EAAE,GAAG,gCAAM,CAAC,UAAU,IAAI,gCAAM,CAAC,OAAO,CAAC,EAAE;QAEpD,uCAAK,SAAS,EAAE,gCAAM,CAAC,MAAM,GAAI;QACjC,uCAAK,SAAS,EAAE,gCAAM,CAAC,OAAO,GAAI,CAC9B,CACP,CAAC;AACJ,CAAC;AApCD,6BAoCC"}
|