@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.
Files changed (74) hide show
  1. package/dist/hooks/usePagination.d.ts +4 -0
  2. package/dist/hooks/usePagination.js +8 -4
  3. package/dist/hooks/usePagination.js.map +1 -1
  4. package/package.json +1 -1
  5. package/dist/assets/img/svg/checkbox.svg +0 -3
  6. package/dist/assets/styles/index.scss +0 -2
  7. package/dist/assets/styles/mixins.scss +0 -12
  8. package/dist/assets/styles/variables.scss +0 -51
  9. package/dist/components/AdaptiveButton/AdaptiveButton.module.scss +0 -51
  10. package/dist/components/AdaptiveContainer/AdaptiveContainer.module.scss +0 -51
  11. package/dist/components/AdaptiveDialog/AdaptiveDialog.module.scss +0 -145
  12. package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss +0 -52
  13. package/dist/components/AnchoredTooltip/AnchoredTooltip.module.scss +0 -62
  14. package/dist/components/AnimatedEntrance/AnimatedEntrance.module.scss +0 -107
  15. package/dist/components/Avatar/Avatar.module.scss +0 -22
  16. package/dist/components/Background/Background.d.ts +0 -7
  17. package/dist/components/Background/Background.js +0 -58
  18. package/dist/components/Background/Background.js.map +0 -1
  19. package/dist/components/Background/Background.module.scss +0 -106
  20. package/dist/components/Background/Background.stories.d.ts +0 -7
  21. package/dist/components/Background/Background.stories.js +0 -30
  22. package/dist/components/Background/Background.stories.js.map +0 -1
  23. package/dist/components/Background/ground-tile.svg +0 -9
  24. package/dist/components/Background/index.d.ts +0 -1
  25. package/dist/components/Background/index.js +0 -9
  26. package/dist/components/Background/index.js.map +0 -1
  27. package/dist/components/BucketFill/BucketFill.module.scss +0 -36
  28. package/dist/components/BucketFill/BucketFill.stories.module.scss +0 -3
  29. package/dist/components/Button/Button.module.scss +0 -42
  30. package/dist/components/Card/Card.module.scss +0 -12
  31. package/dist/components/CheckBox/CheckBox.module.scss +0 -25
  32. package/dist/components/Collapsable/Collapsable.module.scss +0 -34
  33. package/dist/components/Divider/Divider.module.scss +0 -7
  34. package/dist/components/EmailInput/EmailInput.module.scss +0 -0
  35. package/dist/components/FadeIn/FadeIn.module.scss +0 -18
  36. package/dist/components/FileInput/FileInput.module.scss +0 -27
  37. package/dist/components/FlowController/FlowController.module.scss +0 -47
  38. package/dist/components/Header/Header.module.scss +0 -119
  39. package/dist/components/HeaderCloseBtn/HeaderCloseBtn.module.scss +0 -44
  40. package/dist/components/InfinityScroll/InfinityScroll.module.scss +0 -30
  41. package/dist/components/Input/Input.module.scss +0 -69
  42. package/dist/components/LinkToId/LinkToId.module.scss +0 -4
  43. package/dist/components/Loader/Loader.module.scss +0 -40
  44. package/dist/components/MainGrid/MainGrid.module.scss +0 -28
  45. package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss +0 -179
  46. package/dist/components/Notification/Notification.module.scss +0 -25
  47. package/dist/components/Parallax/Parallax.module.scss +0 -28
  48. package/dist/components/PasswordInput/PasswordInput.module.scss +0 -11
  49. package/dist/components/PixelatedScan/PixelatedScan.module.scss +0 -86
  50. package/dist/components/Portal/Portal.module.scss +0 -3
  51. package/dist/components/ProgressBar/ProgressBar.module.scss +0 -32
  52. package/dist/components/ProgressTexts/ProgressTexts.module.scss +0 -37
  53. package/dist/components/SectionContainer/SectionContainer.module.scss +0 -30
  54. package/dist/components/Select/Select.module.scss +0 -46
  55. package/dist/components/Spacing/Spacing.module.scss +0 -13
  56. package/dist/components/Table/Table.module.scss +0 -76
  57. package/dist/components/Tabs/Tabs.module.scss +0 -22
  58. package/dist/components/Text/Text.module.scss +0 -77
  59. package/dist/components/Transition/Transition.module.scss +0 -188
  60. package/dist/components/Transition/TransitionContainer/TransitionContainer.d.ts +0 -4
  61. package/dist/components/Transition/TransitionContainer/TransitionContainer.js +0 -14
  62. package/dist/components/Transition/TransitionContainer/TransitionContainer.js.map +0 -1
  63. package/dist/components/Transition/TransitionContainer/index.d.ts +0 -1
  64. package/dist/components/Transition/TransitionContainer/index.js +0 -9
  65. package/dist/components/Transition/TransitionContainer/index.js.map +0 -1
  66. package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.module.scss +0 -66
  67. package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.module.scss +0 -5
  68. package/dist/context/AsyncProcessQueue.d.ts +0 -37
  69. package/dist/context/AsyncProcessQueue.js +0 -160
  70. package/dist/context/AsyncProcessQueue.js.map +0 -1
  71. package/dist/context/OneUIProvider.test.d.ts +0 -1
  72. package/dist/context/OneUIProvider.test.js +0 -45
  73. package/dist/context/OneUIProvider.test.js.map +0 -1
  74. 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,7 +0,0 @@
1
- import AsyncWrapper from "./Background";
2
- declare const _default: {
3
- component: typeof AsyncWrapper;
4
- title: string;
5
- };
6
- export default _default;
7
- export declare const InitialImplementation: (args: any) => JSX.Element;
@@ -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,3 +0,0 @@
1
- * {
2
- margin: 0px;
3
- }
@@ -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,12 +0,0 @@
1
- @import "../../assets/styles/index.scss";
2
-
3
- .container {
4
- background: $mainBackgroundColor;
5
- padding: 32px;
6
- max-width: 640px;
7
- width: 100%;
8
- display: flex;
9
- align-items: stretch;
10
- flex-direction: column;
11
- height: auto;
12
- }
@@ -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
- }
@@ -1,7 +0,0 @@
1
- @import "../../assets/styles/index.scss";
2
-
3
- .container {
4
- margin: 16px 0px;
5
- height: 1px;
6
- background-color: $lightGray;
7
- }
File without changes
@@ -1,18 +0,0 @@
1
- @import "../../assets/styles/index.scss";
2
-
3
- .container {
4
- opacity: 0;
5
- transition: opacity $normal;
6
- &.active {
7
- opacity: 1;
8
- }
9
- }
10
-
11
- @keyframes fadeInInit {
12
- 0% {
13
- opacity: 0;
14
- }
15
- 100% {
16
- opacity: 1;
17
- }
18
- }
@@ -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
- }