@iroco/ui 0.12.0 → 0.14.0
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/lib/index.mjs.css +168 -171
- package/package.json +1 -1
- package/src/NavBar.svelte +153 -0
- package/src/Navigation.svelte +17 -13
- package/src/index.ts +1 -1
- package/src/SideBar.svelte +0 -103
package/lib/index.mjs.css
CHANGED
|
@@ -1,4 +1,110 @@
|
|
|
1
|
-
.
|
|
1
|
+
.rotate.svelte-1dns1yx {
|
|
2
|
+
animation: svelte-1dns1yx-rotation 2s; }
|
|
3
|
+
|
|
4
|
+
.linear.svelte-1dns1yx {
|
|
5
|
+
animation-timing-function: linear; }
|
|
6
|
+
|
|
7
|
+
.infinite.svelte-1dns1yx {
|
|
8
|
+
animation-iteration-count: infinite; }
|
|
9
|
+
|
|
10
|
+
@keyframes svelte-1dns1yx-rotation {
|
|
11
|
+
from {
|
|
12
|
+
transform: rotate(0deg); }
|
|
13
|
+
to {
|
|
14
|
+
transform: rotate(359deg); } }
|
|
15
|
+
|
|
16
|
+
svg.svelte-1cuxg7m {
|
|
17
|
+
overflow: visible; }
|
|
18
|
+
|
|
19
|
+
.data-table.svelte-1ju5y8t {
|
|
20
|
+
border: 1px solid #464452;
|
|
21
|
+
width: 100%; }
|
|
22
|
+
|
|
23
|
+
.data-table__header.svelte-1ju5y8t {
|
|
24
|
+
font-size: 1.5em;
|
|
25
|
+
height: 4rem; }
|
|
26
|
+
|
|
27
|
+
.data-table__header__cell.svelte-1ju5y8t {
|
|
28
|
+
border-bottom: 1px solid #464452; }
|
|
29
|
+
|
|
30
|
+
.data-table__body__cell.svelte-1ju5y8t {
|
|
31
|
+
text-align: center;
|
|
32
|
+
vertical-align: middle; }
|
|
33
|
+
|
|
34
|
+
.iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
|
|
35
|
+
color: #f2ebe3;
|
|
36
|
+
position: relative;
|
|
37
|
+
margin-top: 0.5em;
|
|
38
|
+
padding-left: 1.5em;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
-webkit-user-select: none;
|
|
41
|
+
-moz-user-select: none;
|
|
42
|
+
-ms-user-select: none;
|
|
43
|
+
user-select: none; }
|
|
44
|
+
|
|
45
|
+
.iroco-ui-radio.svelte-156c82q input.svelte-156c82q.svelte-156c82q {
|
|
46
|
+
position: absolute;
|
|
47
|
+
opacity: 0;
|
|
48
|
+
cursor: pointer; }
|
|
49
|
+
|
|
50
|
+
.radio-button-color.svelte-156c82q.svelte-156c82q.svelte-156c82q {
|
|
51
|
+
position: absolute;
|
|
52
|
+
top: 0;
|
|
53
|
+
left: 0;
|
|
54
|
+
height: 1em;
|
|
55
|
+
width: 1em;
|
|
56
|
+
background-color: #f2ebe3;
|
|
57
|
+
border-radius: 50%; }
|
|
58
|
+
|
|
59
|
+
.iroco-ui-radio.svelte-156c82q input.svelte-156c82q:checked ~ .radio-button-color.svelte-156c82q {
|
|
60
|
+
background-color: #00D692; }
|
|
61
|
+
|
|
62
|
+
input.svelte-11iawkb.svelte-11iawkb {
|
|
63
|
+
outline: none;
|
|
64
|
+
text-decoration: none;
|
|
65
|
+
font-size: 14px; }
|
|
66
|
+
|
|
67
|
+
input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
68
|
+
outline: none;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
font-size: 14px; }
|
|
71
|
+
|
|
72
|
+
.iroco-ui-input.svelte-11iawkb.svelte-11iawkb {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column; }
|
|
75
|
+
|
|
76
|
+
.iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb {
|
|
77
|
+
color: #f2ebe3;
|
|
78
|
+
background: #211D28;
|
|
79
|
+
border: 1px solid #211D28;
|
|
80
|
+
padding: 1em 1.5em;
|
|
81
|
+
text-overflow: ellipsis;
|
|
82
|
+
white-space: nowrap;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
border-radius: 0.5em; }
|
|
85
|
+
|
|
86
|
+
.iroco-ui-input.svelte-11iawkb > input.border.svelte-11iawkb {
|
|
87
|
+
border: 1px solid #f2ebe3; }
|
|
88
|
+
|
|
89
|
+
.iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb::placeholder {
|
|
90
|
+
color: rgba(242, 235, 227, 0.5); }
|
|
91
|
+
|
|
92
|
+
.iroco-ui-input.svelte-11iawkb > input.error.svelte-11iawkb {
|
|
93
|
+
border-color: #ff504d; }
|
|
94
|
+
|
|
95
|
+
.iroco-ui-input.svelte-11iawkb > input.readonlyInput.svelte-11iawkb {
|
|
96
|
+
cursor: not-allowed; }
|
|
97
|
+
|
|
98
|
+
.iroco-ui-input.svelte-11iawkb .error.svelte-11iawkb {
|
|
99
|
+
color: #ff504d; }
|
|
100
|
+
|
|
101
|
+
.iroco-ui-label.svelte-11iawkb.svelte-11iawkb {
|
|
102
|
+
color: rgba(242, 235, 227, 0.6);
|
|
103
|
+
font-weight: bold;
|
|
104
|
+
padding-bottom: 10px;
|
|
105
|
+
display: inline-block; }
|
|
106
|
+
|
|
107
|
+
.container-wide.svelte-a1s5q9 {
|
|
2
108
|
width: calc(100% - 20px);
|
|
3
109
|
max-width: 2360px;
|
|
4
110
|
margin-left: auto;
|
|
@@ -6,42 +112,42 @@
|
|
|
6
112
|
transition: max-width ease-out 200ms; }
|
|
7
113
|
|
|
8
114
|
@media all and (max-width: 2560px) {
|
|
9
|
-
.container-wide.svelte-
|
|
115
|
+
.container-wide.svelte-a1s5q9 {
|
|
10
116
|
max-width: 1620px; } }
|
|
11
117
|
|
|
12
118
|
@media all and (max-width: 1800px) {
|
|
13
|
-
.container-wide.svelte-
|
|
119
|
+
.container-wide.svelte-a1s5q9 {
|
|
14
120
|
max-width: 1280px; } }
|
|
15
121
|
|
|
16
122
|
@media all and (max-width: 1440px) {
|
|
17
|
-
.container-wide.svelte-
|
|
123
|
+
.container-wide.svelte-a1s5q9 {
|
|
18
124
|
max-width: 884px; } }
|
|
19
125
|
|
|
20
126
|
@media all and (max-width: 1024px) {
|
|
21
|
-
.container-wide.svelte-
|
|
127
|
+
.container-wide.svelte-a1s5q9 {
|
|
22
128
|
max-width: 648px; } }
|
|
23
129
|
|
|
24
130
|
@media all and (max-width: 768px) {
|
|
25
|
-
.container-wide.svelte-
|
|
131
|
+
.container-wide.svelte-a1s5q9 {
|
|
26
132
|
max-width: 496px; } }
|
|
27
133
|
|
|
28
134
|
@media all and (max-width: 596px) {
|
|
29
|
-
.container-wide.svelte-
|
|
135
|
+
.container-wide.svelte-a1s5q9 {
|
|
30
136
|
max-width: 365px; } }
|
|
31
137
|
|
|
32
138
|
@media all and (max-width: 425px) {
|
|
33
|
-
.container-wide.svelte-
|
|
139
|
+
.container-wide.svelte-a1s5q9 {
|
|
34
140
|
max-width: calc(100% - 60px); } }
|
|
35
141
|
|
|
36
142
|
@media all and (max-width: 375px) {
|
|
37
|
-
.container-wide.svelte-
|
|
143
|
+
.container-wide.svelte-a1s5q9 {
|
|
38
144
|
max-width: calc(100% - 40px); } }
|
|
39
145
|
|
|
40
146
|
@media all and (max-width: 320px) {
|
|
41
|
-
.container-wide.svelte-
|
|
147
|
+
.container-wide.svelte-a1s5q9 {
|
|
42
148
|
max-width: calc(100% - 20px); } }
|
|
43
149
|
|
|
44
|
-
.container-large.svelte-
|
|
150
|
+
.container-large.svelte-a1s5q9 {
|
|
45
151
|
width: calc(100% - 20px);
|
|
46
152
|
max-width: 1280px;
|
|
47
153
|
margin-left: auto;
|
|
@@ -49,34 +155,34 @@
|
|
|
49
155
|
transition: max-width ease-out 200ms; }
|
|
50
156
|
|
|
51
157
|
@media all and (max-width: 1440px) {
|
|
52
|
-
.container-large.svelte-
|
|
158
|
+
.container-large.svelte-a1s5q9 {
|
|
53
159
|
max-width: 884px; } }
|
|
54
160
|
|
|
55
161
|
@media all and (max-width: 1024px) {
|
|
56
|
-
.container-large.svelte-
|
|
162
|
+
.container-large.svelte-a1s5q9 {
|
|
57
163
|
max-width: 648px; } }
|
|
58
164
|
|
|
59
165
|
@media all and (max-width: 768px) {
|
|
60
|
-
.container-large.svelte-
|
|
166
|
+
.container-large.svelte-a1s5q9 {
|
|
61
167
|
max-width: 496px; } }
|
|
62
168
|
|
|
63
169
|
@media all and (max-width: 596px) {
|
|
64
|
-
.container-large.svelte-
|
|
170
|
+
.container-large.svelte-a1s5q9 {
|
|
65
171
|
max-width: 365px; } }
|
|
66
172
|
|
|
67
173
|
@media all and (max-width: 425px) {
|
|
68
|
-
.container-large.svelte-
|
|
174
|
+
.container-large.svelte-a1s5q9 {
|
|
69
175
|
max-width: calc(100% - 60px); } }
|
|
70
176
|
|
|
71
177
|
@media all and (max-width: 375px) {
|
|
72
|
-
.container-large.svelte-
|
|
178
|
+
.container-large.svelte-a1s5q9 {
|
|
73
179
|
max-width: calc(100% - 40px); } }
|
|
74
180
|
|
|
75
181
|
@media all and (max-width: 320px) {
|
|
76
|
-
.container-large.svelte-
|
|
182
|
+
.container-large.svelte-a1s5q9 {
|
|
77
183
|
max-width: calc(100% - 20px); } }
|
|
78
184
|
|
|
79
|
-
.container-medium.svelte-
|
|
185
|
+
.container-medium.svelte-a1s5q9 {
|
|
80
186
|
width: calc(100% - 20px);
|
|
81
187
|
max-width: 884px;
|
|
82
188
|
margin-left: auto;
|
|
@@ -84,30 +190,30 @@
|
|
|
84
190
|
transition: max-width ease-out 200ms; }
|
|
85
191
|
|
|
86
192
|
@media all and (max-width: 1024px) {
|
|
87
|
-
.container-medium.svelte-
|
|
193
|
+
.container-medium.svelte-a1s5q9 {
|
|
88
194
|
max-width: 648px; } }
|
|
89
195
|
|
|
90
196
|
@media all and (max-width: 768px) {
|
|
91
|
-
.container-medium.svelte-
|
|
197
|
+
.container-medium.svelte-a1s5q9 {
|
|
92
198
|
max-width: 496px; } }
|
|
93
199
|
|
|
94
200
|
@media all and (max-width: 596px) {
|
|
95
|
-
.container-medium.svelte-
|
|
201
|
+
.container-medium.svelte-a1s5q9 {
|
|
96
202
|
max-width: 365px; } }
|
|
97
203
|
|
|
98
204
|
@media all and (max-width: 425px) {
|
|
99
|
-
.container-medium.svelte-
|
|
205
|
+
.container-medium.svelte-a1s5q9 {
|
|
100
206
|
max-width: calc(100% - 60px); } }
|
|
101
207
|
|
|
102
208
|
@media all and (max-width: 375px) {
|
|
103
|
-
.container-medium.svelte-
|
|
209
|
+
.container-medium.svelte-a1s5q9 {
|
|
104
210
|
max-width: calc(100% - 40px); } }
|
|
105
211
|
|
|
106
212
|
@media all and (max-width: 320px) {
|
|
107
|
-
.container-medium.svelte-
|
|
213
|
+
.container-medium.svelte-a1s5q9 {
|
|
108
214
|
max-width: calc(100% - 20px); } }
|
|
109
215
|
|
|
110
|
-
.container-small.svelte-
|
|
216
|
+
.container-small.svelte-a1s5q9 {
|
|
111
217
|
width: calc(100% - 20px);
|
|
112
218
|
max-width: 496px;
|
|
113
219
|
margin-left: auto;
|
|
@@ -115,18 +221,18 @@
|
|
|
115
221
|
transition: max-width ease-out 200ms; }
|
|
116
222
|
|
|
117
223
|
@media all and (max-width: 425px) {
|
|
118
|
-
.container-small.svelte-
|
|
224
|
+
.container-small.svelte-a1s5q9 {
|
|
119
225
|
max-width: calc(100% - 60px); } }
|
|
120
226
|
|
|
121
227
|
@media all and (max-width: 375px) {
|
|
122
|
-
.container-small.svelte-
|
|
228
|
+
.container-small.svelte-a1s5q9 {
|
|
123
229
|
max-width: calc(100% - 40px); } }
|
|
124
230
|
|
|
125
231
|
@media all and (max-width: 320px) {
|
|
126
|
-
.container-small.svelte-
|
|
232
|
+
.container-small.svelte-a1s5q9 {
|
|
127
233
|
max-width: calc(100% - 20px); } }
|
|
128
234
|
|
|
129
|
-
.iroco-ui-button.svelte-
|
|
235
|
+
.iroco-ui-button.svelte-a1s5q9 {
|
|
130
236
|
cursor: pointer;
|
|
131
237
|
-webkit-touch-callout: none;
|
|
132
238
|
-webkit-user-select: none;
|
|
@@ -140,167 +246,34 @@
|
|
|
140
246
|
margin: 1em 0em;
|
|
141
247
|
position: relative; }
|
|
142
248
|
|
|
143
|
-
.iroco-ui-button--basic.svelte-
|
|
249
|
+
.iroco-ui-button--basic.svelte-a1s5q9 {
|
|
144
250
|
background: #f2ebe3;
|
|
145
251
|
color: #a9a29e;
|
|
146
252
|
border: 1px solid #18151E; }
|
|
147
253
|
|
|
148
|
-
.iroco-ui-button--
|
|
149
|
-
background: #18151E; }
|
|
150
|
-
|
|
151
|
-
.iroco-ui-button--success.svelte-cdmkz4 {
|
|
254
|
+
.iroco-ui-button--success.svelte-a1s5q9 {
|
|
152
255
|
background: #00D692; }
|
|
153
256
|
|
|
154
|
-
.iroco-ui-button--danger.svelte-
|
|
257
|
+
.iroco-ui-button--danger.svelte-a1s5q9 {
|
|
155
258
|
background: #ff504d;
|
|
156
259
|
color: #f2ebe3; }
|
|
157
260
|
|
|
158
|
-
.iroco-ui-button--regular.svelte-
|
|
261
|
+
.iroco-ui-button--regular.svelte-a1s5q9 {
|
|
159
262
|
padding: 1em; }
|
|
160
263
|
|
|
161
|
-
.iroco-ui-button--small.svelte-
|
|
264
|
+
.iroco-ui-button--small.svelte-a1s5q9 {
|
|
162
265
|
padding: 0.5em; }
|
|
163
266
|
|
|
164
|
-
.iroco-ui-button.svelte-
|
|
267
|
+
.iroco-ui-button.svelte-a1s5q9:active {
|
|
165
268
|
background: #f5f5f5; }
|
|
166
269
|
|
|
167
|
-
.iroco-ui-button.disabled.svelte-
|
|
270
|
+
.iroco-ui-button.disabled.svelte-a1s5q9 {
|
|
168
271
|
background-color: #f5f5f5;
|
|
169
272
|
cursor: default; }
|
|
170
273
|
|
|
171
|
-
.iroco-ui-button.rounded.svelte-
|
|
274
|
+
.iroco-ui-button.rounded.svelte-a1s5q9 {
|
|
172
275
|
border-radius: 10px; }
|
|
173
276
|
|
|
174
|
-
svg.svelte-1cuxg7m {
|
|
175
|
-
overflow: visible; }
|
|
176
|
-
|
|
177
|
-
.rotate.svelte-1dns1yx {
|
|
178
|
-
animation: svelte-1dns1yx-rotation 2s; }
|
|
179
|
-
|
|
180
|
-
.linear.svelte-1dns1yx {
|
|
181
|
-
animation-timing-function: linear; }
|
|
182
|
-
|
|
183
|
-
.infinite.svelte-1dns1yx {
|
|
184
|
-
animation-iteration-count: infinite; }
|
|
185
|
-
|
|
186
|
-
@keyframes svelte-1dns1yx-rotation {
|
|
187
|
-
from {
|
|
188
|
-
transform: rotate(0deg); }
|
|
189
|
-
to {
|
|
190
|
-
transform: rotate(359deg); } }
|
|
191
|
-
|
|
192
|
-
@use "colors";
|
|
193
|
-
@use "containers";
|
|
194
|
-
@use "fonts";
|
|
195
|
-
@use "forms";
|
|
196
|
-
@use "layouts";
|
|
197
|
-
.data-table.svelte-1ju5y8t {
|
|
198
|
-
border: 1px solid #464452;
|
|
199
|
-
width: 100%; }
|
|
200
|
-
|
|
201
|
-
.data-table__header.svelte-1ju5y8t {
|
|
202
|
-
font-size: 1.5em;
|
|
203
|
-
height: 4rem; }
|
|
204
|
-
|
|
205
|
-
.data-table__header__cell.svelte-1ju5y8t {
|
|
206
|
-
border-bottom: 1px solid #464452; }
|
|
207
|
-
|
|
208
|
-
.data-table__body__cell.svelte-1ju5y8t {
|
|
209
|
-
text-align: center;
|
|
210
|
-
vertical-align: middle; }
|
|
211
|
-
|
|
212
|
-
.alert.svelte-1oun6o6 {
|
|
213
|
-
min-height: 2em;
|
|
214
|
-
display: inline-flex;
|
|
215
|
-
align-items: center;
|
|
216
|
-
border-radius: 0.5em;
|
|
217
|
-
padding: 0 1em 0 1em;
|
|
218
|
-
font-size: 1.2em;
|
|
219
|
-
justify-content: center;
|
|
220
|
-
margin-bottom: 1em;
|
|
221
|
-
cursor: pointer; }
|
|
222
|
-
|
|
223
|
-
.alert--danger.svelte-1oun6o6 {
|
|
224
|
-
background-color: rgba(255, 80, 77, 0.5);
|
|
225
|
-
border: 1px solid #ff504d; }
|
|
226
|
-
|
|
227
|
-
.alert--success.svelte-1oun6o6 {
|
|
228
|
-
background-color: rgba(0, 214, 146, 0.5);
|
|
229
|
-
border: 1px solid #00D692; }
|
|
230
|
-
|
|
231
|
-
.iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
|
|
232
|
-
color: #f2ebe3;
|
|
233
|
-
position: relative;
|
|
234
|
-
margin-top: 0.5em;
|
|
235
|
-
padding-left: 1.5em;
|
|
236
|
-
cursor: pointer;
|
|
237
|
-
-webkit-user-select: none;
|
|
238
|
-
-moz-user-select: none;
|
|
239
|
-
-ms-user-select: none;
|
|
240
|
-
user-select: none; }
|
|
241
|
-
|
|
242
|
-
.iroco-ui-radio.svelte-156c82q input.svelte-156c82q.svelte-156c82q {
|
|
243
|
-
position: absolute;
|
|
244
|
-
opacity: 0;
|
|
245
|
-
cursor: pointer; }
|
|
246
|
-
|
|
247
|
-
.radio-button-color.svelte-156c82q.svelte-156c82q.svelte-156c82q {
|
|
248
|
-
position: absolute;
|
|
249
|
-
top: 0;
|
|
250
|
-
left: 0;
|
|
251
|
-
height: 1em;
|
|
252
|
-
width: 1em;
|
|
253
|
-
background-color: #f2ebe3;
|
|
254
|
-
border-radius: 50%; }
|
|
255
|
-
|
|
256
|
-
.iroco-ui-radio.svelte-156c82q input.svelte-156c82q:checked ~ .radio-button-color.svelte-156c82q {
|
|
257
|
-
background-color: #00D692; }
|
|
258
|
-
|
|
259
|
-
input.svelte-11iawkb.svelte-11iawkb {
|
|
260
|
-
outline: none;
|
|
261
|
-
text-decoration: none;
|
|
262
|
-
font-size: 14px; }
|
|
263
|
-
|
|
264
|
-
input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
265
|
-
outline: none;
|
|
266
|
-
text-decoration: none;
|
|
267
|
-
font-size: 14px; }
|
|
268
|
-
|
|
269
|
-
.iroco-ui-input.svelte-11iawkb.svelte-11iawkb {
|
|
270
|
-
display: flex;
|
|
271
|
-
flex-direction: column; }
|
|
272
|
-
|
|
273
|
-
.iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb {
|
|
274
|
-
color: #f2ebe3;
|
|
275
|
-
background: #211D28;
|
|
276
|
-
border: 1px solid #211D28;
|
|
277
|
-
padding: 1em 1.5em;
|
|
278
|
-
text-overflow: ellipsis;
|
|
279
|
-
white-space: nowrap;
|
|
280
|
-
overflow: hidden;
|
|
281
|
-
border-radius: 0.5em; }
|
|
282
|
-
|
|
283
|
-
.iroco-ui-input.svelte-11iawkb > input.border.svelte-11iawkb {
|
|
284
|
-
border: 1px solid #f2ebe3; }
|
|
285
|
-
|
|
286
|
-
.iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb::placeholder {
|
|
287
|
-
color: rgba(242, 235, 227, 0.5); }
|
|
288
|
-
|
|
289
|
-
.iroco-ui-input.svelte-11iawkb > input.error.svelte-11iawkb {
|
|
290
|
-
border-color: #ff504d; }
|
|
291
|
-
|
|
292
|
-
.iroco-ui-input.svelte-11iawkb > input.readonlyInput.svelte-11iawkb {
|
|
293
|
-
cursor: not-allowed; }
|
|
294
|
-
|
|
295
|
-
.iroco-ui-input.svelte-11iawkb .error.svelte-11iawkb {
|
|
296
|
-
color: #ff504d; }
|
|
297
|
-
|
|
298
|
-
.iroco-ui-label.svelte-11iawkb.svelte-11iawkb {
|
|
299
|
-
color: rgba(242, 235, 227, 0.6);
|
|
300
|
-
font-weight: bold;
|
|
301
|
-
padding-bottom: 10px;
|
|
302
|
-
display: inline-block; }
|
|
303
|
-
|
|
304
277
|
.account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
|
|
305
278
|
display: block;
|
|
306
279
|
width: 100%;
|
|
@@ -398,3 +371,27 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
398
371
|
background-color: transparent;
|
|
399
372
|
border: none;
|
|
400
373
|
color: #a9a29e; } }
|
|
374
|
+
|
|
375
|
+
@use "colors";
|
|
376
|
+
@use "containers";
|
|
377
|
+
@use "fonts";
|
|
378
|
+
@use "forms";
|
|
379
|
+
@use "layouts";
|
|
380
|
+
.alert.svelte-1oun6o6 {
|
|
381
|
+
min-height: 2em;
|
|
382
|
+
display: inline-flex;
|
|
383
|
+
align-items: center;
|
|
384
|
+
border-radius: 0.5em;
|
|
385
|
+
padding: 0 1em 0 1em;
|
|
386
|
+
font-size: 1.2em;
|
|
387
|
+
justify-content: center;
|
|
388
|
+
margin-bottom: 1em;
|
|
389
|
+
cursor: pointer; }
|
|
390
|
+
|
|
391
|
+
.alert--danger.svelte-1oun6o6 {
|
|
392
|
+
background-color: rgba(255, 80, 77, 0.5);
|
|
393
|
+
border: 1px solid #ff504d; }
|
|
394
|
+
|
|
395
|
+
.alert--success.svelte-1oun6o6 {
|
|
396
|
+
background-color: rgba(0, 214, 146, 0.5);
|
|
397
|
+
border: 1px solid #00D692; }
|
package/package.json
CHANGED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IconClose from './IconClose.svelte';
|
|
3
|
+
import type { NavigationItem } from 'definition';
|
|
4
|
+
import { createEventDispatcher } from 'svelte';
|
|
5
|
+
|
|
6
|
+
export let navigationItems: Array<NavigationItem>;
|
|
7
|
+
export let type: 'sidebar' | 'topbar';
|
|
8
|
+
|
|
9
|
+
let active: string;
|
|
10
|
+
const dispatch = createEventDispatcher();
|
|
11
|
+
|
|
12
|
+
const handleClickLink = (menuItem: NavigationItem) => {
|
|
13
|
+
active = menuItem.name;
|
|
14
|
+
if (typeof menuItem.hrefOrCallback === 'function') {
|
|
15
|
+
menuItem.hrefOrCallback();
|
|
16
|
+
return false; // to avoid calling href
|
|
17
|
+
}
|
|
18
|
+
dispatch('click_link');
|
|
19
|
+
};
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<nav data-testid={type} class="nav__{type}">
|
|
23
|
+
<button on:click class="nav__{type}__close">
|
|
24
|
+
<IconClose width="3em" height="3em" />
|
|
25
|
+
</button>
|
|
26
|
+
|
|
27
|
+
<ul class="nav__{type}__item-container">
|
|
28
|
+
{#each navigationItems as item}
|
|
29
|
+
<li class="nav__{type}__item" class:active={active === item.name}>
|
|
30
|
+
<a
|
|
31
|
+
on:click={() => handleClickLink(item)}
|
|
32
|
+
href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
|
|
33
|
+
>
|
|
34
|
+
{item.name}</a
|
|
35
|
+
>
|
|
36
|
+
</li>
|
|
37
|
+
{/each}
|
|
38
|
+
</ul>
|
|
39
|
+
</nav>
|
|
40
|
+
|
|
41
|
+
<style lang="scss">
|
|
42
|
+
@use '../scss/colors';
|
|
43
|
+
@import '../scss/containers';
|
|
44
|
+
|
|
45
|
+
.nav {
|
|
46
|
+
&__sidebar,
|
|
47
|
+
&__topbar {
|
|
48
|
+
&__item {
|
|
49
|
+
text-decoration: none;
|
|
50
|
+
font-size: 0.75em;
|
|
51
|
+
display: block;
|
|
52
|
+
}
|
|
53
|
+
&__item a {
|
|
54
|
+
color: colors.$beige;
|
|
55
|
+
font-size: 2em;
|
|
56
|
+
}
|
|
57
|
+
&__close {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&__sidebar {
|
|
63
|
+
height: 100%;
|
|
64
|
+
width: 300px;
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 4.45em;
|
|
67
|
+
left: 0;
|
|
68
|
+
overflow-x: hidden;
|
|
69
|
+
&__item-container {
|
|
70
|
+
margin: 0;
|
|
71
|
+
padding: 0;
|
|
72
|
+
width: 100%;
|
|
73
|
+
height: 100%;
|
|
74
|
+
}
|
|
75
|
+
&__item {
|
|
76
|
+
padding: 2em;
|
|
77
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
78
|
+
}
|
|
79
|
+
&__item:first-child {
|
|
80
|
+
border-top: none;
|
|
81
|
+
}
|
|
82
|
+
.active {
|
|
83
|
+
border-top: 1px solid colors.$green;
|
|
84
|
+
border-bottom: 1px solid colors.$green;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&__topbar {
|
|
89
|
+
flex-grow: 1;
|
|
90
|
+
display: flex;
|
|
91
|
+
justify-content: flex-end;
|
|
92
|
+
ul,
|
|
93
|
+
li {
|
|
94
|
+
display: inline;
|
|
95
|
+
}
|
|
96
|
+
ul {
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-grow: 1;
|
|
99
|
+
justify-content: space-around;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@include screen-tablet {
|
|
105
|
+
.nav {
|
|
106
|
+
&__sidebar,
|
|
107
|
+
&__topbar {
|
|
108
|
+
position: fixed;
|
|
109
|
+
background-color: colors.$darkBlue;
|
|
110
|
+
top: 0;
|
|
111
|
+
right: 0;
|
|
112
|
+
width: 100%;
|
|
113
|
+
padding: 0;
|
|
114
|
+
padding-top: 2em;
|
|
115
|
+
margin: 0;
|
|
116
|
+
border-right: none;
|
|
117
|
+
&__item-container {
|
|
118
|
+
padding: 0em;
|
|
119
|
+
margin-top: 2rem;
|
|
120
|
+
}
|
|
121
|
+
ul,
|
|
122
|
+
li {
|
|
123
|
+
display: block;
|
|
124
|
+
}
|
|
125
|
+
&__close {
|
|
126
|
+
display: block;
|
|
127
|
+
position: absolute;
|
|
128
|
+
right: 0;
|
|
129
|
+
top: 0;
|
|
130
|
+
background-color: transparent;
|
|
131
|
+
border: none;
|
|
132
|
+
color: colors.$darkBeige;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&__sidebar {
|
|
137
|
+
top: 0;
|
|
138
|
+
left: 0;
|
|
139
|
+
&__item:first-child {
|
|
140
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&__topbar {
|
|
145
|
+
height: 100%;
|
|
146
|
+
&__item {
|
|
147
|
+
padding: 2em;
|
|
148
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
</style>
|
package/src/Navigation.svelte
CHANGED
|
@@ -2,46 +2,51 @@
|
|
|
2
2
|
import type { NavigationItem } from './definition';
|
|
3
3
|
import IconBurger from './IconBurger.svelte';
|
|
4
4
|
import IconIrocoLogo from './IconIrocoLogo.svelte';
|
|
5
|
-
import
|
|
5
|
+
import NavBar from './NavBar.svelte';
|
|
6
6
|
|
|
7
7
|
export let navigationItems: Array<NavigationItem>;
|
|
8
|
+
export let type: 'sidebar' | 'topbar' = "topbar";
|
|
8
9
|
export let title: string;
|
|
9
10
|
|
|
10
11
|
let showMenu = false;
|
|
11
12
|
</script>
|
|
12
13
|
|
|
13
|
-
<div class="
|
|
14
|
-
<div class="
|
|
14
|
+
<div class="navigation--mobile">
|
|
15
|
+
<div class="navigation--mobile__title-container">
|
|
15
16
|
<IconIrocoLogo width="3em" height="3em" />
|
|
16
17
|
<h1>{title}</h1>
|
|
17
18
|
</div>
|
|
18
19
|
|
|
19
|
-
<button on:click={() => (showMenu = true)} class="
|
|
20
|
+
<button on:click={() => (showMenu = true)} class="navigation--mobile__button">
|
|
20
21
|
<IconBurger width="3em" height="3em" />
|
|
21
22
|
</button>
|
|
22
23
|
|
|
23
24
|
{#if showMenu}
|
|
24
|
-
<
|
|
25
|
+
<NavBar
|
|
25
26
|
on:click_link={() => (showMenu = false)}
|
|
26
27
|
on:click={() => (showMenu = false)}
|
|
27
|
-
{
|
|
28
|
+
{ type }
|
|
29
|
+
{ navigationItems }
|
|
28
30
|
/>
|
|
29
31
|
{/if}
|
|
30
32
|
</div>
|
|
31
33
|
|
|
32
|
-
<div class="
|
|
33
|
-
<div class="
|
|
34
|
+
<div class="navigation">
|
|
35
|
+
<div class="navigation__title-container">
|
|
34
36
|
<IconIrocoLogo width="3em" height="3em" />
|
|
35
37
|
<h1>{title}</h1>
|
|
36
38
|
</div>
|
|
37
|
-
<
|
|
39
|
+
<NavBar {navigationItems} { type } />
|
|
38
40
|
</div>
|
|
39
41
|
|
|
40
42
|
<style lang="scss">
|
|
41
43
|
@use '../scss/colors';
|
|
42
44
|
@import '../scss/containers';
|
|
43
|
-
.
|
|
44
|
-
display:
|
|
45
|
+
.navigation {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
align-items: center;
|
|
45
50
|
width: 100%;
|
|
46
51
|
border-bottom: 1px solid colors.$mediumGrey;
|
|
47
52
|
&--mobile {
|
|
@@ -59,7 +64,7 @@
|
|
|
59
64
|
}
|
|
60
65
|
|
|
61
66
|
@include screen-tablet {
|
|
62
|
-
.
|
|
67
|
+
.navigation {
|
|
63
68
|
display: none;
|
|
64
69
|
color: colors.$beige;
|
|
65
70
|
&--mobile {
|
|
@@ -73,7 +78,6 @@
|
|
|
73
78
|
border-bottom: 1px solid colors.$mediumGrey;
|
|
74
79
|
|
|
75
80
|
h1 {
|
|
76
|
-
font: bold;
|
|
77
81
|
font-size: 2em;
|
|
78
82
|
}
|
|
79
83
|
&__button {
|
package/src/index.ts
CHANGED
|
@@ -7,7 +7,7 @@ export { default as Icon } from './Icon.svelte'
|
|
|
7
7
|
export { default as Loader } from './Loader.svelte'
|
|
8
8
|
export { default as IconInfo } from './IconInfo.svelte'
|
|
9
9
|
export { default as IconMastodon } from './IconMastodon.svelte'
|
|
10
|
-
export { default as
|
|
10
|
+
export { default as NavBar } from './NavBar.svelte'
|
|
11
11
|
export { default as Navigation } from './Navigation.svelte'
|
|
12
12
|
export { default as DataTable } from './DataTable.svelte'
|
|
13
13
|
export { default as IconMore } from './IconMoreSign.svelte'
|
package/src/SideBar.svelte
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import IconClose from './IconClose.svelte';
|
|
3
|
-
import type { NavigationItem } from 'definition';
|
|
4
|
-
import { createEventDispatcher } from 'svelte';
|
|
5
|
-
|
|
6
|
-
export let navigationItems: Array<NavigationItem>;
|
|
7
|
-
|
|
8
|
-
let active: string;
|
|
9
|
-
const dispatch = createEventDispatcher();
|
|
10
|
-
|
|
11
|
-
const handleClickLink = (menuItem: NavigationItem) => {
|
|
12
|
-
active = menuItem.name;
|
|
13
|
-
if (typeof menuItem.hrefOrCallback === "function") {
|
|
14
|
-
menuItem.hrefOrCallback()
|
|
15
|
-
return false // to avoid calling href
|
|
16
|
-
}
|
|
17
|
-
dispatch('click_link');
|
|
18
|
-
};
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<nav data-testid="sidebar" class="account__sidebar">
|
|
22
|
-
<button on:click class="account__sidebar__close">
|
|
23
|
-
<IconClose width="3em" height="3em" />
|
|
24
|
-
</button>
|
|
25
|
-
|
|
26
|
-
<ul class="account__sidebar__item_container">
|
|
27
|
-
{#each navigationItems as item}
|
|
28
|
-
<li class="account__sidebar__item" class:active={active === item.name}>
|
|
29
|
-
<a on:click={() => handleClickLink(item)} href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback: '#'}> {item.name}</a>
|
|
30
|
-
</li>
|
|
31
|
-
{/each}
|
|
32
|
-
</ul>
|
|
33
|
-
</nav>
|
|
34
|
-
|
|
35
|
-
<style lang="scss">
|
|
36
|
-
@use '../scss/colors';
|
|
37
|
-
@import '../scss/containers';
|
|
38
|
-
|
|
39
|
-
.account__sidebar {
|
|
40
|
-
height: 100%;
|
|
41
|
-
width: 300px;
|
|
42
|
-
position: absolute;
|
|
43
|
-
overflow-x: hidden;
|
|
44
|
-
border-right: 1px solid colors.$mediumGrey;
|
|
45
|
-
&__item_container {
|
|
46
|
-
margin: 0;
|
|
47
|
-
padding: 0;
|
|
48
|
-
width: 100%;
|
|
49
|
-
height: 100%;
|
|
50
|
-
}
|
|
51
|
-
&__item {
|
|
52
|
-
padding: 2em 2em;
|
|
53
|
-
text-decoration: none;
|
|
54
|
-
font-size: 0.75em;
|
|
55
|
-
display: block;
|
|
56
|
-
border-top: 1px solid colors.$mediumGrey;
|
|
57
|
-
border-bottom: 1px solid colors.$mediumGrey a {
|
|
58
|
-
padding-left: 1em;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&__item a {
|
|
63
|
-
color: colors.$beige;
|
|
64
|
-
font-size: 2em;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&__close {
|
|
68
|
-
display: none;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.active {
|
|
72
|
-
border-top: 1px solid colors.$green;
|
|
73
|
-
border-bottom: 1px solid colors.$green;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@include screen-tablet {
|
|
78
|
-
.account__sidebar {
|
|
79
|
-
position: fixed;
|
|
80
|
-
background-color: colors.$darkBlue;
|
|
81
|
-
top: 0;
|
|
82
|
-
right: 0;
|
|
83
|
-
width: 100%;
|
|
84
|
-
padding: 0;
|
|
85
|
-
padding-top: 2em;
|
|
86
|
-
margin: 0;
|
|
87
|
-
border-right: none;
|
|
88
|
-
&__item_container {
|
|
89
|
-
padding: 0em;
|
|
90
|
-
margin-top: 2rem;
|
|
91
|
-
}
|
|
92
|
-
&__close {
|
|
93
|
-
display: block;
|
|
94
|
-
position: absolute;
|
|
95
|
-
right: 0;
|
|
96
|
-
top: 0;
|
|
97
|
-
background-color: transparent;
|
|
98
|
-
border: none;
|
|
99
|
-
color: colors.$darkBeige;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
</style>
|