@zonos/amino 5.1.55 → 5.1.56
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/components/layout/Layout.js +1 -1
- package/package.json +1 -1
- package/theme.scss +234 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),o=require("../input/SearchInput.js");require("./NavigationGroup.js");var a=require("../../styles/constants/theme.js");require("../../_tslib-ccfac372.js"),require("react"),require("styled-components"),require("../../icons/SearchIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../collapse/Collapse.js"),require("@mui/material/Collapse");var r={aminoLayout:"Amino_Layout-module__aminoLayout--k-8EW",contentGrid:"Amino_Layout-module__contentGrid--6ltoS",styledSidebar:"Amino_Layout-module__styledSidebar--dnwoo",sidebarContent:"Amino_Layout-module__sidebarContent--NXMVV",searchInputWrapper:"Amino_Layout-module__searchInputWrapper--JldDc",styledLogoSidebar:"Amino_Layout-module__styledLogoSidebar--MTiPe",styledSearchInput:"Amino_Layout-module__styledSearchInput--uJCBW",content:"Amino_Layout-module__content--LYUwT",header:"Amino_Layout-module__header--lID5Y",footer:"Amino_Layout-module__footer--5enlV"};!function(e,o){void 0===o&&(o={});var a=o.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===a&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}(".Amino_Layout-module__aminoLayout--k-8EW{height:100vh;overflow:hidden}.Amino_Layout-module__contentGrid--6ltoS{display:grid;grid-template-columns:var(--amino-sidebar-width) 1fr;height:var(--amino-appbar-height)}.Amino_Layout-module__styledSidebar--dnwoo{background:var(--amino-sidebar-color);border-right:var(--amino-border);box-sizing:border-box;display:grid;grid-template-rows:1fr calc(39px + var(--amino-space-24)*2);height:inherit;width:var(--amino-sidebar-width)}.Amino_Layout-module__sidebarContent--NXMVV{box-sizing:border-box;color:red;display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:var(--amino-space-16);width:100%}.Amino_Layout-module__searchInputWrapper--JldDc{margin-bottom:var(--amino-space-40)}.Amino_Layout-module__styledLogoSidebar--MTiPe{margin-bottom:var(--amino-space-24)}.Amino_Layout-module__styledSearchInput--uJCBW{border:0}.Amino_Layout-module__styledSearchInput--uJCBW svg{color:var(--amino-gray-1200)}.Amino_Layout-module__styledSearchInput--uJCBW input{background-color:var(--amino-gray-100);border:0}.Amino_Layout-module__styledSearchInput--uJCBW input ::-webkit-input-placeholder{color:var(--amino-gray-1200)}.Amino_Layout-module__styledSearchInput--uJCBW input ::placeholder{color:var(--amino-gray-1200)}.Amino_Layout-module__content--LYUwT{box-sizing:border-box;height:inherit;overflow-y:auto;padding:var(--amino-space-32)}.Amino_Layout-module__header--lID5Y{background:var(--amino-header-color);border-bottom:var(--amino-border);box-shadow:var(--amino-v3-shadow-base);box-sizing:border-box;display:flex;height:var(--amino-appbar-height);position:-webkit-sticky;position:sticky;top:0;z-index:var(--amino-appbar-elevation)}.Amino_Layout-module__footer--5enlV{box-sizing:border-box;width:var(--amino-sidebar-width)}");exports.Layout=function(t){var i=t.className,n=t.content,d=t.footer,s=t.headerContent,l=t.logoSidebar,u=t.searchInput,m=t.sidebar;return e.jsxs("main",{className:[i,r.aminoLayout].join(" "),children:[!!s&&e.jsx("header",{className:r.header,children:s}),e.jsxs("div",{className:r.contentGrid,style:{height:s?"calc(100vh - ".concat(a.theme.appbarHeight,")"):"100vh"},children:[e.jsxs("nav",{className:r.styledSidebar,children:[e.jsxs("div",{className:r.sidebarContent,children:[!!l&&e.jsx("div",{className:r.styledLogoSidebar,children:l}),!!u&&e.jsx("div",{className:r.searchInputWrapper,children:e.jsx(o.SearchInput,{className:r.styledSearchInput,onChange:u.onChange,value:u.value})}),m]}),e.jsx("div",{className:r.footer,children:d})]}),e.jsx("div",{className:r.content,children:n})]})]})};
|
package/package.json
CHANGED
package/theme.scss
ADDED
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
/** Base amino theme scss variable */
|
|
2
|
+
$amino-transition: var(--amino-transition);
|
|
3
|
+
$amino-type-scale-base: var(--amino-type-scale-base);
|
|
4
|
+
$amino-glass-0: var(--amino-glass-0);
|
|
5
|
+
$amino-glass-50: var(--amino-glass-50);
|
|
6
|
+
$amino-glass-100: var(--amino-glass-100);
|
|
7
|
+
$amino-glass-200: var(--amino-glass-200);
|
|
8
|
+
$amino-glass-300: var(--amino-glass-300);
|
|
9
|
+
$amino-glass-400: var(--amino-glass-400);
|
|
10
|
+
$amino-glass-500: var(--amino-glass-500);
|
|
11
|
+
$amino-glass-600: var(--amino-glass-600);
|
|
12
|
+
$amino-glass-700: var(--amino-glass-700);
|
|
13
|
+
$amino-glass-800: var(--amino-glass-800);
|
|
14
|
+
$amino-glass-900: var(--amino-glass-900);
|
|
15
|
+
$amino-glass-1000: var(--amino-glass-1000);
|
|
16
|
+
$amino-glass-1100: var(--amino-glass-1100);
|
|
17
|
+
$amino-glass-1200: var(--amino-glass-1200);
|
|
18
|
+
$amino-gray-0: var(--amino-gray-0);
|
|
19
|
+
$amino-gray-50: var(--amino-gray-50);
|
|
20
|
+
$amino-gray-100: var(--amino-gray-100);
|
|
21
|
+
$amino-gray-200: var(--amino-gray-200);
|
|
22
|
+
$amino-gray-300: var(--amino-gray-300);
|
|
23
|
+
$amino-gray-400: var(--amino-gray-400);
|
|
24
|
+
$amino-gray-500: var(--amino-gray-500);
|
|
25
|
+
$amino-gray-600: var(--amino-gray-600);
|
|
26
|
+
$amino-gray-700: var(--amino-gray-700);
|
|
27
|
+
$amino-gray-800: var(--amino-gray-800);
|
|
28
|
+
$amino-gray-900: var(--amino-gray-900);
|
|
29
|
+
$amino-gray-1000: var(--amino-gray-1000);
|
|
30
|
+
$amino-gray-1100: var(--amino-gray-1100);
|
|
31
|
+
$amino-gray-1200: var(--amino-gray-1200);
|
|
32
|
+
$amino-blue-100: var(--amino-blue-100);
|
|
33
|
+
$amino-blue-200: var(--amino-blue-200);
|
|
34
|
+
$amino-blue-300: var(--amino-blue-300);
|
|
35
|
+
$amino-blue-400: var(--amino-blue-400);
|
|
36
|
+
$amino-blue-500: var(--amino-blue-500);
|
|
37
|
+
$amino-blue-600: var(--amino-blue-600);
|
|
38
|
+
$amino-blue-700: var(--amino-blue-700);
|
|
39
|
+
$amino-blue-800: var(--amino-blue-800);
|
|
40
|
+
$amino-blue-900: var(--amino-blue-900);
|
|
41
|
+
$amino-blue-1000: var(--amino-blue-1000);
|
|
42
|
+
$amino-cyan-100: var(--amino-cyan-100);
|
|
43
|
+
$amino-cyan-200: var(--amino-cyan-200);
|
|
44
|
+
$amino-cyan-300: var(--amino-cyan-300);
|
|
45
|
+
$amino-cyan-400: var(--amino-cyan-400);
|
|
46
|
+
$amino-cyan-500: var(--amino-cyan-500);
|
|
47
|
+
$amino-cyan-600: var(--amino-cyan-600);
|
|
48
|
+
$amino-cyan-700: var(--amino-cyan-700);
|
|
49
|
+
$amino-cyan-800: var(--amino-cyan-800);
|
|
50
|
+
$amino-cyan-900: var(--amino-cyan-900);
|
|
51
|
+
$amino-cyan-1000: var(--amino-cyan-1000);
|
|
52
|
+
$amino-red-100: var(--amino-red-100);
|
|
53
|
+
$amino-red-200: var(--amino-red-200);
|
|
54
|
+
$amino-red-300: var(--amino-red-300);
|
|
55
|
+
$amino-red-400: var(--amino-red-400);
|
|
56
|
+
$amino-red-500: var(--amino-red-500);
|
|
57
|
+
$amino-red-600: var(--amino-red-600);
|
|
58
|
+
$amino-red-700: var(--amino-red-700);
|
|
59
|
+
$amino-red-800: var(--amino-red-800);
|
|
60
|
+
$amino-red-900: var(--amino-red-900);
|
|
61
|
+
$amino-red-1000: var(--amino-red-1000);
|
|
62
|
+
$amino-orange-100: var(--amino-orange-100);
|
|
63
|
+
$amino-orange-200: var(--amino-orange-200);
|
|
64
|
+
$amino-orange-300: var(--amino-orange-300);
|
|
65
|
+
$amino-orange-400: var(--amino-orange-400);
|
|
66
|
+
$amino-orange-500: var(--amino-orange-500);
|
|
67
|
+
$amino-orange-600: var(--amino-orange-600);
|
|
68
|
+
$amino-orange-700: var(--amino-orange-700);
|
|
69
|
+
$amino-orange-800: var(--amino-orange-800);
|
|
70
|
+
$amino-orange-900: var(--amino-orange-900);
|
|
71
|
+
$amino-orange-1000: var(--amino-orange-1000);
|
|
72
|
+
$amino-green-100: var(--amino-green-100);
|
|
73
|
+
$amino-green-200: var(--amino-green-200);
|
|
74
|
+
$amino-green-300: var(--amino-green-300);
|
|
75
|
+
$amino-green-400: var(--amino-green-400);
|
|
76
|
+
$amino-green-500: var(--amino-green-500);
|
|
77
|
+
$amino-green-600: var(--amino-green-600);
|
|
78
|
+
$amino-green-700: var(--amino-green-700);
|
|
79
|
+
$amino-green-800: var(--amino-green-800);
|
|
80
|
+
$amino-green-900: var(--amino-green-900);
|
|
81
|
+
$amino-green-1000: var(--amino-green-1000);
|
|
82
|
+
$amino-purple-100: var(--amino-purple-100);
|
|
83
|
+
$amino-purple-200: var(--amino-purple-200);
|
|
84
|
+
$amino-purple-300: var(--amino-purple-300);
|
|
85
|
+
$amino-purple-400: var(--amino-purple-400);
|
|
86
|
+
$amino-purple-500: var(--amino-purple-500);
|
|
87
|
+
$amino-purple-600: var(--amino-purple-600);
|
|
88
|
+
$amino-purple-700: var(--amino-purple-700);
|
|
89
|
+
$amino-purple-800: var(--amino-purple-800);
|
|
90
|
+
$amino-purple-900: var(--amino-purple-900);
|
|
91
|
+
$amino-purple-1000: var(--amino-purple-1000);
|
|
92
|
+
$amino-transparent-white: var(--amino-transparent-white);
|
|
93
|
+
$amino-transparent-black: var(--amino-transparent-black);
|
|
94
|
+
$amino-transparent-gray-600: var(--amino-transparent-gray-600);
|
|
95
|
+
$amino-v3-shadow-base: var(--amino-v3-shadow-base);
|
|
96
|
+
$amino-v3-shadow-medium: var(--amino-v3-shadow-medium);
|
|
97
|
+
$amino-v3-shadow-large: var(--amino-v3-shadow-large);
|
|
98
|
+
$amino-v3-shadow-xl: var(--amino-v3-shadow-xl);
|
|
99
|
+
$amino-v3-shadow-xxl: var(--amino-v3-shadow-xxl);
|
|
100
|
+
$amino-v3-shadow-inset: var(--amino-v3-shadow-inset);
|
|
101
|
+
$amino-shadow-button-primary: var(--amino-shadow-button-primary);
|
|
102
|
+
$amino-shadow-button-success: var(--amino-shadow-button-success);
|
|
103
|
+
$amino-shadow-button-danger: var(--amino-shadow-button-danger);
|
|
104
|
+
$amino-shadow-button-warning: var(--amino-shadow-button-warning);
|
|
105
|
+
$amino-button-focus-ring: var(--amino-button-focus-ring);
|
|
106
|
+
$amino-shadow-button-standard: var(--amino-shadow-button-standard);
|
|
107
|
+
$amino-shadow-button-disabled: var(--amino-shadow-button-disabled);
|
|
108
|
+
$amino-space-negative-80: var(--amino-space-negative-80);
|
|
109
|
+
$amino-space-negative-76: var(--amino-space-negative-76);
|
|
110
|
+
$amino-space-negative-72: var(--amino-space-negative-72);
|
|
111
|
+
$amino-space-negative-68: var(--amino-space-negative-68);
|
|
112
|
+
$amino-space-negative-64: var(--amino-space-negative-64);
|
|
113
|
+
$amino-space-negative-60: var(--amino-space-negative-60);
|
|
114
|
+
$amino-space-negative-56: var(--amino-space-negative-56);
|
|
115
|
+
$amino-space-negative-52: var(--amino-space-negative-52);
|
|
116
|
+
$amino-space-negative-48: var(--amino-space-negative-48);
|
|
117
|
+
$amino-space-negative-44: var(--amino-space-negative-44);
|
|
118
|
+
$amino-space-negative-40: var(--amino-space-negative-40);
|
|
119
|
+
$amino-space-negative-36: var(--amino-space-negative-36);
|
|
120
|
+
$amino-space-negative-32: var(--amino-space-negative-32);
|
|
121
|
+
$amino-space-negative-28: var(--amino-space-negative-28);
|
|
122
|
+
$amino-space-negative-24: var(--amino-space-negative-24);
|
|
123
|
+
$amino-space-negative-20: var(--amino-space-negative-20);
|
|
124
|
+
$amino-space-negative-16: var(--amino-space-negative-16);
|
|
125
|
+
$amino-space-negative-12: var(--amino-space-negative-12);
|
|
126
|
+
$amino-space-negative-8: var(--amino-space-negative-8);
|
|
127
|
+
$amino-space-negative-4: var(--amino-space-negative-4);
|
|
128
|
+
$amino-space-0: var(--amino-space-0);
|
|
129
|
+
$amino-space-4: var(--amino-space-4);
|
|
130
|
+
$amino-space-8: var(--amino-space-8);
|
|
131
|
+
$amino-space-12: var(--amino-space-12);
|
|
132
|
+
$amino-space-16: var(--amino-space-16);
|
|
133
|
+
$amino-space-20: var(--amino-space-20);
|
|
134
|
+
$amino-space-24: var(--amino-space-24);
|
|
135
|
+
$amino-space-28: var(--amino-space-28);
|
|
136
|
+
$amino-space-32: var(--amino-space-32);
|
|
137
|
+
$amino-space-36: var(--amino-space-36);
|
|
138
|
+
$amino-space-40: var(--amino-space-40);
|
|
139
|
+
$amino-space-44: var(--amino-space-44);
|
|
140
|
+
$amino-space-48: var(--amino-space-48);
|
|
141
|
+
$amino-space-52: var(--amino-space-52);
|
|
142
|
+
$amino-space-56: var(--amino-space-56);
|
|
143
|
+
$amino-space-60: var(--amino-space-60);
|
|
144
|
+
$amino-space-64: var(--amino-space-64);
|
|
145
|
+
$amino-space-68: var(--amino-space-68);
|
|
146
|
+
$amino-space-72: var(--amino-space-72);
|
|
147
|
+
$amino-space-76: var(--amino-space-76);
|
|
148
|
+
$amino-space-80: var(--amino-space-80);
|
|
149
|
+
$amino-border: var(--amino-border);
|
|
150
|
+
$amino-border-blue: var(--amino-border-blue);
|
|
151
|
+
$amino-border-red: var(--amino-border-red);
|
|
152
|
+
$amino-border-cyan: var(--amino-border-cyan);
|
|
153
|
+
$amino-border-orange: var(--amino-border-orange);
|
|
154
|
+
$amino-border-green: var(--amino-border-green);
|
|
155
|
+
$amino-border-purple: var(--amino-border-purple);
|
|
156
|
+
$amino-border-amber: var(--amino-border-amber);
|
|
157
|
+
$amino-border-transparent: var(--amino-border-transparent);
|
|
158
|
+
$amino-sidebar-color: var(--amino-sidebar-color);
|
|
159
|
+
$amino-header-color: var(--amino-header-color);
|
|
160
|
+
$amino-danger: var(--amino-danger);
|
|
161
|
+
$amino-danger-dark: var(--amino-danger-dark);
|
|
162
|
+
$amino-error: var(--amino-error);
|
|
163
|
+
$amino-primary: var(--amino-primary);
|
|
164
|
+
$amino-primary-light: var(--amino-primary-light);
|
|
165
|
+
$amino-primary-dark: var(--amino-primary-dark);
|
|
166
|
+
$amino-success: var(--amino-success);
|
|
167
|
+
$amino-success-dark: var(--amino-success-dark);
|
|
168
|
+
$amino-warning: var(--amino-warning);
|
|
169
|
+
$amino-warning-dark: var(--amino-warning-dark);
|
|
170
|
+
$amino-glow-error: var(--amino-glow-error);
|
|
171
|
+
$amino-glow-blue: var(--amino-glow-blue);
|
|
172
|
+
$amino-glow-cyan: var(--amino-glow-cyan);
|
|
173
|
+
$amino-glow-red: var(--amino-glow-red);
|
|
174
|
+
$amino-glow-orange: var(--amino-glow-orange);
|
|
175
|
+
$amino-glow-green: var(--amino-glow-green);
|
|
176
|
+
$amino-glow-purple: var(--amino-glow-purple);
|
|
177
|
+
$amino-page-background: var(--amino-page-background);
|
|
178
|
+
$amino-border-color: var(--amino-border-color);
|
|
179
|
+
$amino-hover-color: var(--amino-hover-color);
|
|
180
|
+
$amino-text-color: var(--amino-text-color);
|
|
181
|
+
$amino-text-color-secondary: var(--amino-text-color-secondary);
|
|
182
|
+
$amino-focus-button-standard: var(--amino-focus-button-standard);
|
|
183
|
+
$amino-focus-button: var(--amino-focus-button);
|
|
184
|
+
$amino-surface-color: var(--amino-surface-color);
|
|
185
|
+
$amino-surface-color-secondary: var(--amino-surface-color-secondary);
|
|
186
|
+
$amino-backdrop-color: var(--amino-backdrop-color);
|
|
187
|
+
$amino-button-primary-hover: var(--amino-button-primary-hover);
|
|
188
|
+
$amino-button-success-hover: var(--amino-button-success-hover);
|
|
189
|
+
$amino-button-danger-hover: var(--amino-button-danger-hover);
|
|
190
|
+
$amino-button-warning-hover: var(--amino-button-warning-hover);
|
|
191
|
+
$amino-button-standard-hover: var(--amino-button-standard-hover);
|
|
192
|
+
$amino-spinner-track-black: var(--amino-spinner-track-black);
|
|
193
|
+
$amino-spinner-stroke-black: var(--amino-spinner-stroke-black);
|
|
194
|
+
$amino-spinner-track-white: var(--amino-spinner-track-white);
|
|
195
|
+
$amino-spinner-stroke-white: var(--amino-spinner-stroke-white);
|
|
196
|
+
$amino-appbar-height: var(--amino-appbar-height);
|
|
197
|
+
$amino-sidebar-width: var(--amino-sidebar-width);
|
|
198
|
+
$amino-elevation-0: var(--amino-elevation-0);
|
|
199
|
+
$amino-elevation-100: var(--amino-elevation-100);
|
|
200
|
+
$amino-elevation-200: var(--amino-elevation-200);
|
|
201
|
+
$amino-elevation-300: var(--amino-elevation-300);
|
|
202
|
+
$amino-elevation-400: var(--amino-elevation-400);
|
|
203
|
+
$amino-elevation-500: var(--amino-elevation-500);
|
|
204
|
+
$amino-dialog-elevation: var(--amino-dialog-elevation);
|
|
205
|
+
$amino-toast-elevation: var(--amino-toast-elevation);
|
|
206
|
+
$amino-appbar-elevation: var(--amino-appbar-elevation);
|
|
207
|
+
$amino-size-xl: var(--amino-size-xl);
|
|
208
|
+
$amino-size-lg: var(--amino-size-lg);
|
|
209
|
+
$amino-size-md: var(--amino-size-md);
|
|
210
|
+
$amino-size-sm: var(--amino-size-sm);
|
|
211
|
+
$amino-radius-4: var(--amino-radius-4);
|
|
212
|
+
$amino-radius-6: var(--amino-radius-6);
|
|
213
|
+
$amino-radius-8: var(--amino-radius-8);
|
|
214
|
+
$amino-radius-10: var(--amino-radius-10);
|
|
215
|
+
$amino-radius-12: var(--amino-radius-12);
|
|
216
|
+
$amino-font-size-3xl: var(--amino-font-size-3xl);
|
|
217
|
+
$amino-font-size-2xl: var(--amino-font-size-2xl);
|
|
218
|
+
$amino-font-size-xl: var(--amino-font-size-xl);
|
|
219
|
+
$amino-font-size-l: var(--amino-font-size-l);
|
|
220
|
+
$amino-font-size-base-docs: var(--amino-font-size-base-docs);
|
|
221
|
+
$amino-font-size-base: var(--amino-font-size-base);
|
|
222
|
+
$amino-font-size-s: var(--amino-font-size-s);
|
|
223
|
+
$amino-font-size-xs: var(--amino-font-size-xs);
|
|
224
|
+
$amino-line-height-3xl: var(--amino-line-height-3xl);
|
|
225
|
+
$amino-line-height-2xl: var(--amino-line-height-2xl);
|
|
226
|
+
$amino-line-height-xl: var(--amino-line-height-xl);
|
|
227
|
+
$amino-line-height-l: var(--amino-line-height-l);
|
|
228
|
+
$amino-line-height-base: var(--amino-line-height-base);
|
|
229
|
+
$amino-line-height-s: var(--amino-line-height-s);
|
|
230
|
+
$amino-line-height-xs: var(--amino-line-height-xs);
|
|
231
|
+
$amino-font-sans: var(--amino-font-sans);
|
|
232
|
+
$amino-font-mono: var(--amino-font-mono);
|
|
233
|
+
$amino-font-harmonized-codes: var(--amino-font-harmonized-codes);
|
|
234
|
+
$amino-input-background: var(--amino-input-background);
|