@onepercentio/one-ui 0.8.0 → 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 +4 -0
- package/dist/hooks/usePagination.js +8 -4
- 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
|
@@ -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"}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
$renderResolutionWidth: 50vw;
|
|
2
|
-
$renderResolutionHeight: 50vh;
|
|
3
|
-
$blockSize: $renderResolutionWidth * 0.1;
|
|
4
|
-
|
|
5
|
-
* {
|
|
6
|
-
-webkit-font-smoothing: subpixel-antialiased;
|
|
7
|
-
outline: 1px solid transparent;
|
|
8
|
-
--primary-color: blue;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.overlay {
|
|
12
|
-
position: absolute;
|
|
13
|
-
height: $renderResolutionHeight / 10;
|
|
14
|
-
width: $renderResolutionWidth / 10;
|
|
15
|
-
transform: scale(10);
|
|
16
|
-
background: radial-gradient(
|
|
17
|
-
circle at 50% -100%,
|
|
18
|
-
rgba(33, 0, 59, 0.5),
|
|
19
|
-
rgba(33, 0, 59, 0.5) 40%,
|
|
20
|
-
rgba(66, 35, 91, 0.5) 65%,
|
|
21
|
-
#0000 80%
|
|
22
|
-
);
|
|
23
|
-
background-repeat: no-repeat;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.background {
|
|
27
|
-
overflow: hidden;
|
|
28
|
-
image-rendering: 10px 10px;
|
|
29
|
-
background-color: black;
|
|
30
|
-
image-rendering: optimizeSpeed;
|
|
31
|
-
background-repeat: no-repeat;
|
|
32
|
-
background-size: $renderResolutionWidth $renderResolutionHeight * 0.5;
|
|
33
|
-
width: $renderResolutionWidth;
|
|
34
|
-
height: $renderResolutionHeight;
|
|
35
|
-
perspective: $renderResolutionWidth * 0.9;
|
|
36
|
-
perspective-origin: 50% 40%;
|
|
37
|
-
position: absolute;
|
|
38
|
-
display: flex;
|
|
39
|
-
justify-content: center;
|
|
40
|
-
align-items: center;
|
|
41
|
-
z-index: -1;
|
|
42
|
-
transition: perspective-origin;
|
|
43
|
-
transition-duration: var(--animation-speed-transition);
|
|
44
|
-
top: 50vh - $renderResolutionHeight / 2;
|
|
45
|
-
left: 50vw - $renderResolutionWidth / 2;
|
|
46
|
-
transform: scale(100vw / $renderResolutionWidth);
|
|
47
|
-
|
|
48
|
-
& .ground {
|
|
49
|
-
transform: rotateX(90deg) translateY(50%) translateZ(-75px) rotateZ(0deg);
|
|
50
|
-
}
|
|
51
|
-
&.north .ground {
|
|
52
|
-
transform: rotateX(90deg) translateY(50%) translateZ(-75px) rotateZ(0deg)
|
|
53
|
-
rotateZ(0deg);
|
|
54
|
-
}
|
|
55
|
-
&.south .ground {
|
|
56
|
-
transform: rotateX(90deg) translateY(50%) translateZ(-75px) rotateZ(0deg)
|
|
57
|
-
rotateZ(180deg);
|
|
58
|
-
}
|
|
59
|
-
&.east .ground {
|
|
60
|
-
transform: rotateX(90deg) translateY(50%) translateZ(-75px) rotateZ(0deg)
|
|
61
|
-
rotateZ(90deg);
|
|
62
|
-
}
|
|
63
|
-
&.west .ground {
|
|
64
|
-
transform: rotateX(90deg) translateY(50%) translateZ(-75px) rotateZ(0deg)
|
|
65
|
-
rotateZ(270deg);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
$tileSize: $renderResolutionHeight * 0.075 * 1.5;
|
|
70
|
-
.ground {
|
|
71
|
-
width: $renderResolutionWidth * 3 * (100vw / $renderResolutionWidth);
|
|
72
|
-
height: $renderResolutionWidth * 3 * (100vw / $renderResolutionWidth);
|
|
73
|
-
transition: transform var(--animation-speed-transition) var(--animation-timing-transition);
|
|
74
|
-
&::before {
|
|
75
|
-
backface-visibility: hidden;
|
|
76
|
-
content: "";
|
|
77
|
-
position: absolute;
|
|
78
|
-
width: $renderResolutionWidth * 3 * (100vw / $renderResolutionWidth);
|
|
79
|
-
height: $renderResolutionWidth * 3 * (100vw / $renderResolutionWidth);
|
|
80
|
-
border-radius: 50%;
|
|
81
|
-
background: url(./ground-tile.svg);
|
|
82
|
-
background-size: $tileSize $tileSize;
|
|
83
|
-
background-position: -18px 30px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
position: absolute;
|
|
87
|
-
display: flex;
|
|
88
|
-
align-items: center;
|
|
89
|
-
justify-content: center;
|
|
90
|
-
|
|
91
|
-
&::after {
|
|
92
|
-
content: "";
|
|
93
|
-
width: $renderResolutionWidth * 3;
|
|
94
|
-
height: $renderResolutionWidth * 3;
|
|
95
|
-
transform: scale(4);
|
|
96
|
-
background: radial-gradient(
|
|
97
|
-
transparent 20%,
|
|
98
|
-
rgba(33, 0, 59, 1) 40%,
|
|
99
|
-
rgba(33, 0, 59, 0.6) 59%,
|
|
100
|
-
#0009 70%
|
|
101
|
-
);
|
|
102
|
-
// background-color: red;
|
|
103
|
-
border-radius: 50%;
|
|
104
|
-
position: absolute;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.InitialImplementation = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
|
|
9
|
-
const Loader_1 = __importDefault(require("../Loader"));
|
|
10
|
-
const Background_1 = __importDefault(require("./Background"));
|
|
11
|
-
exports.default = {
|
|
12
|
-
component: Background_1.default,
|
|
13
|
-
title: "Sky",
|
|
14
|
-
};
|
|
15
|
-
const InitialImplementation = (args) => (react_1.default.createElement(OneUIProvider_1.default, { config: {
|
|
16
|
-
component: {
|
|
17
|
-
asyncWrapper: {
|
|
18
|
-
LoadingComponent: () => react_1.default.createElement(Loader_1.default, null),
|
|
19
|
-
messages: {
|
|
20
|
-
error: {
|
|
21
|
-
title: "Exemplo de error",
|
|
22
|
-
retryBtn: "Tentar novamente",
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
} },
|
|
28
|
-
react_1.default.createElement(Background_1.default, Object.assign({}, args))));
|
|
29
|
-
exports.InitialImplementation = InitialImplementation;
|
|
30
|
-
//# sourceMappingURL=Background.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Background.stories.js","sourceRoot":"","sources":["../../../src/components/Background/Background.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gFAAwD;AACxD,uDAA+B;AAC/B,8DAAwC;AAExC,kBAAe;IACb,SAAS,EAAE,oBAAY;IACvB,KAAK,EAAE,KAAK;CACb,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,8BAAC,uBAAa,IACZ,MAAM,EAAE;QACN,SAAS,EAAE;YACT,YAAY,EAAE;gBACZ,gBAAgB,EAAE,GAAG,EAAE,CAAC,8BAAC,gBAAM,OAAG;gBAClC,QAAQ,EAAE;oBACR,KAAK,EAAE;wBACL,KAAK,EAAE,kBAAkB;wBACzB,QAAQ,EAAE,kBAAkB;qBAC7B;iBACF;aACF;SACF;KACF;IAED,8BAAC,oBAAY,oBAAK,IAAI,EAAI,CACZ,CACjB,CAAC;AAlBW,QAAA,qBAAqB,yBAkBhC"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
|
|
2
|
-
|
|
3
|
-
<defs>
|
|
4
|
-
<filter id="blur">
|
|
5
|
-
<feGaussianBlur stdDeviation="1" />
|
|
6
|
-
</filter>
|
|
7
|
-
</defs>
|
|
8
|
-
<rect width="400" height="400" stroke-width="6" stroke="#d0b9fc" fill="#0000" />
|
|
9
|
-
</svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Background';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var Background_1 = require("./Background");
|
|
8
|
-
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Background_1).default; } });
|
|
9
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Background/index.tsx"],"names":[],"mappings":";;;;;;AAAA,2CAAuC;AAA9B,sHAAA,OAAO,OAAA"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/variables.scss";
|
|
2
|
-
|
|
3
|
-
.root {
|
|
4
|
-
position: relative;
|
|
5
|
-
z-index: 1;
|
|
6
|
-
> :not(div) {
|
|
7
|
-
mix-blend-mode: color;
|
|
8
|
-
}
|
|
9
|
-
> div > * {
|
|
10
|
-
mix-blend-mode: color;
|
|
11
|
-
}
|
|
12
|
-
&::before,
|
|
13
|
-
&::after {
|
|
14
|
-
background: var(--bg);
|
|
15
|
-
width: 100%;
|
|
16
|
-
position: absolute;
|
|
17
|
-
content: " ";
|
|
18
|
-
z-index: -1;
|
|
19
|
-
transition: height $fast, background-size $fast;
|
|
20
|
-
}
|
|
21
|
-
&::before {
|
|
22
|
-
opacity: 0;
|
|
23
|
-
top: 0;
|
|
24
|
-
height: var(--fill-height);
|
|
25
|
-
}
|
|
26
|
-
&::after {
|
|
27
|
-
opacity: 0.6;
|
|
28
|
-
bottom: 0;
|
|
29
|
-
height: var(--empty-height);
|
|
30
|
-
background-size: 100% var(--bg-offset);
|
|
31
|
-
background-position: bottom;
|
|
32
|
-
}
|
|
33
|
-
.ignoreFill {
|
|
34
|
-
mix-blend-mode: multiply;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/variables.scss";
|
|
2
|
-
|
|
3
|
-
.button {
|
|
4
|
-
cursor: pointer;
|
|
5
|
-
display: block;
|
|
6
|
-
min-width: $buttonMinWidth;
|
|
7
|
-
min-height: $buttonMinHeight;
|
|
8
|
-
padding: 16px;
|
|
9
|
-
border: none;
|
|
10
|
-
transition: color $fast;
|
|
11
|
-
color: $digitalBlue;
|
|
12
|
-
border-radius: $buttonBorderRadius;
|
|
13
|
-
&:disabled {
|
|
14
|
-
cursor: initial;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
///"transparent" | "filled" | "outline";
|
|
19
|
-
|
|
20
|
-
.transparent {
|
|
21
|
-
background-color: transparent;
|
|
22
|
-
&:disabled {
|
|
23
|
-
color: $mediumGray;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.filled {
|
|
28
|
-
background-color: $buttonPrimaryBackgroundColor;
|
|
29
|
-
color: $buttonTextColor;
|
|
30
|
-
border-width: 0px;
|
|
31
|
-
&:disabled {
|
|
32
|
-
color: $mediumGray;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.outline {
|
|
37
|
-
border: 1px solid $digitalBlue;
|
|
38
|
-
background-color: transparent;
|
|
39
|
-
&:disabled {
|
|
40
|
-
color: $mediumGray;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.container {
|
|
4
|
-
display: flex;
|
|
5
|
-
line-height: 1.5em;
|
|
6
|
-
vertical-align: middle;
|
|
7
|
-
|
|
8
|
-
> span:first-child {
|
|
9
|
-
visibility: visible;
|
|
10
|
-
width: 1.5em;
|
|
11
|
-
height: 1.5em;
|
|
12
|
-
border-radius: 0.45em;
|
|
13
|
-
background-image: url("../../assets/img/svg/checkbox.svg");
|
|
14
|
-
background-color: transparent;
|
|
15
|
-
transition: background-color 250ms, border 250ms, box-shadow 250ms;
|
|
16
|
-
border: 1px solid rgb(40, 43, 53);
|
|
17
|
-
box-shadow: 0px 0px 0px -4px $digitalBlue;
|
|
18
|
-
margin-right: 0.45em;
|
|
19
|
-
}
|
|
20
|
-
> span:first-child.checked {
|
|
21
|
-
background-color: $digitalBlue;
|
|
22
|
-
border: 1px solid $digitalBlue;
|
|
23
|
-
box-shadow: 0px 0px 12px -4px $digitalBlue;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.container {
|
|
4
|
-
> .title {
|
|
5
|
-
cursor: pointer;
|
|
6
|
-
margin: 0px;
|
|
7
|
-
display: block;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.open .title::after {
|
|
12
|
-
transform: translateX(-0.5em) rotateX(180deg) rotateZ(45deg);
|
|
13
|
-
}
|
|
14
|
-
.closed .title::after {
|
|
15
|
-
transform: translateX(-0.5em) rotateX(0deg) rotateZ(45deg);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.content {
|
|
19
|
-
width: 100%;
|
|
20
|
-
max-width: 500px;
|
|
21
|
-
overflow: hidden;
|
|
22
|
-
transition: height $fast ease-in;
|
|
23
|
-
height: 0px;
|
|
24
|
-
&.float {
|
|
25
|
-
position: fixed;
|
|
26
|
-
z-index: 100;
|
|
27
|
-
background: $mainBackgroundColor;
|
|
28
|
-
overflow: auto;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.open {
|
|
33
|
-
transition: height $fast ease-out;
|
|
34
|
-
}
|
|
File without changes
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.hidden {
|
|
4
|
-
width: 0px;
|
|
5
|
-
height: 0px;
|
|
6
|
-
position: fixed;
|
|
7
|
-
opacity: 0.01;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.container {
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
flex-direction: column;
|
|
15
|
-
background-color: $fileInputBackgroundColor;
|
|
16
|
-
padding: 72px;
|
|
17
|
-
border: 1px solid;
|
|
18
|
-
border-color: $fileInputBorderColor;
|
|
19
|
-
position: relative;
|
|
20
|
-
margin-bottom: 28px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.footer {
|
|
24
|
-
position: absolute;
|
|
25
|
-
bottom: -24px;
|
|
26
|
-
left: 0px;
|
|
27
|
-
}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.container {
|
|
4
|
-
.headingImg {
|
|
5
|
-
width: 100%;
|
|
6
|
-
margin: 0px -33px;
|
|
7
|
-
}
|
|
8
|
-
height: 100%;
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
justify-content: space-between;
|
|
12
|
-
button {
|
|
13
|
-
width: 100%;
|
|
14
|
-
border-top: 1px solid $lightGray;
|
|
15
|
-
}
|
|
16
|
-
.transition {
|
|
17
|
-
margin-top: -105px;
|
|
18
|
-
height: 100%;
|
|
19
|
-
.content {
|
|
20
|
-
padding: 0px 33px 33px 33px;
|
|
21
|
-
margin-top: 105px;
|
|
22
|
-
max-height: calc(100% - 105px);
|
|
23
|
-
|
|
24
|
-
&.fullHeight {
|
|
25
|
-
margin-top: 0px;
|
|
26
|
-
max-height: 100%;
|
|
27
|
-
height: 100%;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
section {
|
|
31
|
-
border-top: 1px solid $lightGray;
|
|
32
|
-
margin: 0px -33px;
|
|
33
|
-
padding: 0px 33px;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
header {
|
|
37
|
-
margin: 55px 33px;
|
|
38
|
-
margin-bottom: 33px;
|
|
39
|
-
}
|
|
40
|
-
footer {
|
|
41
|
-
transition: opacity $fast;
|
|
42
|
-
opacity: 1;
|
|
43
|
-
}
|
|
44
|
-
footer.hidden {
|
|
45
|
-
opacity: 0;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.header {
|
|
4
|
-
position: sticky;
|
|
5
|
-
top: 0px;
|
|
6
|
-
width: 100%;
|
|
7
|
-
background-color: $headerFillBackgroundColor;
|
|
8
|
-
display: flex;
|
|
9
|
-
padding: 32px;
|
|
10
|
-
align-items: center;
|
|
11
|
-
font-family: $mainFontFamily;
|
|
12
|
-
z-index: 100;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.logo {
|
|
16
|
-
align-self: stretch;
|
|
17
|
-
display: flex;
|
|
18
|
-
align-items: center;
|
|
19
|
-
|
|
20
|
-
@media (orientation: portrait) {
|
|
21
|
-
display: none;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.option {
|
|
26
|
-
font-size: 18px;
|
|
27
|
-
line-height: 22px;
|
|
28
|
-
margin-right: 28px;
|
|
29
|
-
color: $headerTextColor;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.logoDivider {
|
|
33
|
-
margin: -32px 32px;
|
|
34
|
-
width: 1px;
|
|
35
|
-
background-color: $headerBackgroundColor;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.profile {
|
|
39
|
-
background-color: $headerBrightColor;
|
|
40
|
-
height: 36px;
|
|
41
|
-
width: 36px;
|
|
42
|
-
border-radius: 18px;
|
|
43
|
-
line-height: 36px;
|
|
44
|
-
text-align: center;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.profile,
|
|
48
|
-
.profileName {
|
|
49
|
-
margin-right: 8px;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.profileName {
|
|
53
|
-
color: $headerBrightColor;
|
|
54
|
-
|
|
55
|
-
@media (orientation: portrait) {
|
|
56
|
-
display: none;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
.headerOptions {
|
|
60
|
-
right: 0px;
|
|
61
|
-
width: fit-content;
|
|
62
|
-
margin-top: 18px;
|
|
63
|
-
z-index: 1000;
|
|
64
|
-
> * {
|
|
65
|
-
cursor: pointer;
|
|
66
|
-
backdrop-filter: var(--header-submenu-backdrop, initial);
|
|
67
|
-
padding: 12px 32px;
|
|
68
|
-
margin-bottom: 8px;
|
|
69
|
-
margin-left: 4px;
|
|
70
|
-
margin-right: 4px;
|
|
71
|
-
text-align: left;
|
|
72
|
-
border-radius: 4px;
|
|
73
|
-
font-size: 14px;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
.indicator {
|
|
77
|
-
@include iteractibleElement();
|
|
78
|
-
transition: transform $fast;
|
|
79
|
-
transform: rotateX(0deg);
|
|
80
|
-
|
|
81
|
-
&.open {
|
|
82
|
-
transform: rotateX(180deg);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
display: none;
|
|
86
|
-
@media screen and (max-width: 640px) {
|
|
87
|
-
display: initial;
|
|
88
|
-
}
|
|
89
|
-
&.withMoreOptions {
|
|
90
|
-
display: initial;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.desktopOnly {
|
|
95
|
-
@media screen and (max-width: 640px) {
|
|
96
|
-
display: none;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.mobileOnly {
|
|
101
|
-
@media screen and (min-width: 640px) {
|
|
102
|
-
display: none;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.options-right {
|
|
107
|
-
.logo {
|
|
108
|
-
margin-right: auto;
|
|
109
|
-
}
|
|
110
|
-
.sectionDivider {
|
|
111
|
-
margin-left: initial;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.options-left {
|
|
116
|
-
.sectionDivider {
|
|
117
|
-
margin-left: auto;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
@import "../../assets/styles/index.scss";
|
|
2
|
-
|
|
3
|
-
.headerButton {
|
|
4
|
-
width: 22px;
|
|
5
|
-
height: 22px;
|
|
6
|
-
position: relative;
|
|
7
|
-
opacity: 1;
|
|
8
|
-
@include iteractibleElement();
|
|
9
|
-
transition: opacity $fast, transform $fast;
|
|
10
|
-
&.pointOfNoReturn {
|
|
11
|
-
opacity: 0;
|
|
12
|
-
}
|
|
13
|
-
div {
|
|
14
|
-
transition: width $fast, top $fast, left $fast;
|
|
15
|
-
position: absolute;
|
|
16
|
-
height: 3px;
|
|
17
|
-
border-radius: 1.5px;
|
|
18
|
-
width: 22px;
|
|
19
|
-
background-color: $digitalBlue;
|
|
20
|
-
transform-origin: 1.5px 1.5px;
|
|
21
|
-
&:nth-child(1) {
|
|
22
|
-
transform: rotateZ(45deg);
|
|
23
|
-
}
|
|
24
|
-
&:nth-child(2) {
|
|
25
|
-
transform: rotateZ(-45deg);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
&.back div {
|
|
29
|
-
width: 12.5px;
|
|
30
|
-
top: 5.5px;
|
|
31
|
-
left: 0px;
|
|
32
|
-
}
|
|
33
|
-
&.close div {
|
|
34
|
-
width: 22px;
|
|
35
|
-
&:nth-child(1) {
|
|
36
|
-
top: 0px;
|
|
37
|
-
left: 0px;
|
|
38
|
-
}
|
|
39
|
-
&:nth-child(2) {
|
|
40
|
-
top: 13px;
|
|
41
|
-
left: 0px;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|