@iroco/ui 0.13.1 → 0.15.1
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/constants.scss +1 -0
- package/lib/index.js +123 -99
- package/lib/index.min.js +55 -55
- package/lib/index.mjs +123 -99
- package/lib/index.mjs.css +292 -124
- package/package.json +4 -3
- package/scss/constants.scss +1 -0
- package/src/Alert.svelte +2 -1
- package/src/Button.svelte +18 -12
- package/src/NavBar.svelte +0 -1
- package/src/TextInput.svelte +3 -1
package/lib/index.mjs.css
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
svg.svelte-1cuxg7m {
|
|
2
|
+
overflow: visible; }
|
|
3
|
+
|
|
1
4
|
.rotate.svelte-1dns1yx {
|
|
2
5
|
animation: svelte-1dns1yx-rotation 2s; }
|
|
3
6
|
|
|
@@ -13,9 +16,6 @@
|
|
|
13
16
|
to {
|
|
14
17
|
transform: rotate(359deg); } }
|
|
15
18
|
|
|
16
|
-
svg.svelte-1cuxg7m {
|
|
17
|
-
overflow: visible; }
|
|
18
|
-
|
|
19
19
|
.data-table.svelte-1ju5y8t {
|
|
20
20
|
border: 1px solid #464452;
|
|
21
21
|
width: 100%; }
|
|
@@ -59,21 +59,21 @@ svg.svelte-1cuxg7m {
|
|
|
59
59
|
.iroco-ui-radio.svelte-156c82q input.svelte-156c82q:checked ~ .radio-button-color.svelte-156c82q {
|
|
60
60
|
background-color: #00D692; }
|
|
61
61
|
|
|
62
|
-
input.svelte-
|
|
62
|
+
input.svelte-1y0402x.svelte-1y0402x {
|
|
63
63
|
outline: none;
|
|
64
64
|
text-decoration: none;
|
|
65
65
|
font-size: 14px; }
|
|
66
66
|
|
|
67
|
-
input.svelte-
|
|
67
|
+
input.svelte-1y0402x.svelte-1y0402x:focus {
|
|
68
68
|
outline: none;
|
|
69
69
|
text-decoration: none;
|
|
70
70
|
font-size: 14px; }
|
|
71
71
|
|
|
72
|
-
.iroco-ui-input.svelte-
|
|
72
|
+
.iroco-ui-input.svelte-1y0402x.svelte-1y0402x {
|
|
73
73
|
display: flex;
|
|
74
74
|
flex-direction: column; }
|
|
75
75
|
|
|
76
|
-
.iroco-ui-input.svelte-
|
|
76
|
+
.iroco-ui-input.svelte-1y0402x > input.svelte-1y0402x {
|
|
77
77
|
color: #f2ebe3;
|
|
78
78
|
background: #211D28;
|
|
79
79
|
border: 1px solid #211D28;
|
|
@@ -81,30 +81,74 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
81
81
|
text-overflow: ellipsis;
|
|
82
82
|
white-space: nowrap;
|
|
83
83
|
overflow: hidden;
|
|
84
|
-
border-radius: 0.
|
|
84
|
+
border-radius: 0.3em; }
|
|
85
85
|
|
|
86
|
-
.iroco-ui-input.svelte-
|
|
86
|
+
.iroco-ui-input.svelte-1y0402x > input.border.svelte-1y0402x {
|
|
87
87
|
border: 1px solid #f2ebe3; }
|
|
88
88
|
|
|
89
|
-
.iroco-ui-input.svelte-
|
|
89
|
+
.iroco-ui-input.svelte-1y0402x > input.svelte-1y0402x::placeholder {
|
|
90
90
|
color: rgba(242, 235, 227, 0.5); }
|
|
91
91
|
|
|
92
|
-
.iroco-ui-input.svelte-
|
|
92
|
+
.iroco-ui-input.svelte-1y0402x > input.error.svelte-1y0402x {
|
|
93
93
|
border-color: #ff504d; }
|
|
94
94
|
|
|
95
|
-
.iroco-ui-input.svelte-
|
|
95
|
+
.iroco-ui-input.svelte-1y0402x > input.readonlyInput.svelte-1y0402x {
|
|
96
96
|
cursor: not-allowed; }
|
|
97
97
|
|
|
98
|
-
.iroco-ui-input.svelte-
|
|
98
|
+
.iroco-ui-input.svelte-1y0402x .error.svelte-1y0402x {
|
|
99
99
|
color: #ff504d; }
|
|
100
100
|
|
|
101
|
-
.iroco-ui-label.svelte-
|
|
101
|
+
.iroco-ui-label.svelte-1y0402x.svelte-1y0402x {
|
|
102
102
|
color: rgba(242, 235, 227, 0.6);
|
|
103
103
|
font-weight: bold;
|
|
104
104
|
padding-bottom: 10px;
|
|
105
105
|
display: inline-block; }
|
|
106
106
|
|
|
107
|
-
.
|
|
107
|
+
.navigation.svelte-lqwgm1.svelte-lqwgm1 {
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
justify-content: space-between;
|
|
111
|
+
align-items: center;
|
|
112
|
+
width: 100%;
|
|
113
|
+
border-bottom: 1px solid #464452; }
|
|
114
|
+
|
|
115
|
+
.navigation--mobile.svelte-lqwgm1.svelte-lqwgm1 {
|
|
116
|
+
display: none; }
|
|
117
|
+
|
|
118
|
+
.navigation__title-container.svelte-lqwgm1.svelte-lqwgm1 {
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
padding-left: 1em; }
|
|
122
|
+
|
|
123
|
+
.navigation__title-container.svelte-lqwgm1 h1.svelte-lqwgm1 {
|
|
124
|
+
padding-left: 1em; }
|
|
125
|
+
|
|
126
|
+
@media all and (max-width: 768px) {
|
|
127
|
+
.navigation.svelte-lqwgm1.svelte-lqwgm1 {
|
|
128
|
+
display: none;
|
|
129
|
+
color: #f2ebe3; }
|
|
130
|
+
.navigation--mobile.svelte-lqwgm1.svelte-lqwgm1 {
|
|
131
|
+
display: flex;
|
|
132
|
+
padding: 0 1em;
|
|
133
|
+
justify-content: space-between;
|
|
134
|
+
position: fixed;
|
|
135
|
+
top: 0;
|
|
136
|
+
z-index: 1;
|
|
137
|
+
width: 100%;
|
|
138
|
+
border-bottom: 1px solid #464452; }
|
|
139
|
+
.navigation--mobile.svelte-lqwgm1 h1.svelte-lqwgm1 {
|
|
140
|
+
font-size: 2em; }
|
|
141
|
+
.navigation--mobile__button.svelte-lqwgm1.svelte-lqwgm1 {
|
|
142
|
+
background-color: transparent;
|
|
143
|
+
border: none;
|
|
144
|
+
color: #464452; }
|
|
145
|
+
.navigation--mobile__title-container.svelte-lqwgm1.svelte-lqwgm1 {
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center; }
|
|
148
|
+
.navigation--mobile__title-container.svelte-lqwgm1 h1.svelte-lqwgm1 {
|
|
149
|
+
padding-left: 0.5em; } }
|
|
150
|
+
|
|
151
|
+
.container-wide.svelte-5qkkwb {
|
|
108
152
|
width: calc(100% - 20px);
|
|
109
153
|
max-width: 2360px;
|
|
110
154
|
margin-left: auto;
|
|
@@ -112,42 +156,42 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
112
156
|
transition: max-width ease-out 200ms; }
|
|
113
157
|
|
|
114
158
|
@media all and (max-width: 2560px) {
|
|
115
|
-
.container-wide.svelte-
|
|
159
|
+
.container-wide.svelte-5qkkwb {
|
|
116
160
|
max-width: 1620px; } }
|
|
117
161
|
|
|
118
162
|
@media all and (max-width: 1800px) {
|
|
119
|
-
.container-wide.svelte-
|
|
163
|
+
.container-wide.svelte-5qkkwb {
|
|
120
164
|
max-width: 1280px; } }
|
|
121
165
|
|
|
122
166
|
@media all and (max-width: 1440px) {
|
|
123
|
-
.container-wide.svelte-
|
|
167
|
+
.container-wide.svelte-5qkkwb {
|
|
124
168
|
max-width: 884px; } }
|
|
125
169
|
|
|
126
170
|
@media all and (max-width: 1024px) {
|
|
127
|
-
.container-wide.svelte-
|
|
171
|
+
.container-wide.svelte-5qkkwb {
|
|
128
172
|
max-width: 648px; } }
|
|
129
173
|
|
|
130
174
|
@media all and (max-width: 768px) {
|
|
131
|
-
.container-wide.svelte-
|
|
175
|
+
.container-wide.svelte-5qkkwb {
|
|
132
176
|
max-width: 496px; } }
|
|
133
177
|
|
|
134
178
|
@media all and (max-width: 596px) {
|
|
135
|
-
.container-wide.svelte-
|
|
179
|
+
.container-wide.svelte-5qkkwb {
|
|
136
180
|
max-width: 365px; } }
|
|
137
181
|
|
|
138
182
|
@media all and (max-width: 425px) {
|
|
139
|
-
.container-wide.svelte-
|
|
183
|
+
.container-wide.svelte-5qkkwb {
|
|
140
184
|
max-width: calc(100% - 60px); } }
|
|
141
185
|
|
|
142
186
|
@media all and (max-width: 375px) {
|
|
143
|
-
.container-wide.svelte-
|
|
187
|
+
.container-wide.svelte-5qkkwb {
|
|
144
188
|
max-width: calc(100% - 40px); } }
|
|
145
189
|
|
|
146
190
|
@media all and (max-width: 320px) {
|
|
147
|
-
.container-wide.svelte-
|
|
191
|
+
.container-wide.svelte-5qkkwb {
|
|
148
192
|
max-width: calc(100% - 20px); } }
|
|
149
193
|
|
|
150
|
-
.container-large.svelte-
|
|
194
|
+
.container-large.svelte-5qkkwb {
|
|
151
195
|
width: calc(100% - 20px);
|
|
152
196
|
max-width: 1280px;
|
|
153
197
|
margin-left: auto;
|
|
@@ -155,34 +199,34 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
155
199
|
transition: max-width ease-out 200ms; }
|
|
156
200
|
|
|
157
201
|
@media all and (max-width: 1440px) {
|
|
158
|
-
.container-large.svelte-
|
|
202
|
+
.container-large.svelte-5qkkwb {
|
|
159
203
|
max-width: 884px; } }
|
|
160
204
|
|
|
161
205
|
@media all and (max-width: 1024px) {
|
|
162
|
-
.container-large.svelte-
|
|
206
|
+
.container-large.svelte-5qkkwb {
|
|
163
207
|
max-width: 648px; } }
|
|
164
208
|
|
|
165
209
|
@media all and (max-width: 768px) {
|
|
166
|
-
.container-large.svelte-
|
|
210
|
+
.container-large.svelte-5qkkwb {
|
|
167
211
|
max-width: 496px; } }
|
|
168
212
|
|
|
169
213
|
@media all and (max-width: 596px) {
|
|
170
|
-
.container-large.svelte-
|
|
214
|
+
.container-large.svelte-5qkkwb {
|
|
171
215
|
max-width: 365px; } }
|
|
172
216
|
|
|
173
217
|
@media all and (max-width: 425px) {
|
|
174
|
-
.container-large.svelte-
|
|
218
|
+
.container-large.svelte-5qkkwb {
|
|
175
219
|
max-width: calc(100% - 60px); } }
|
|
176
220
|
|
|
177
221
|
@media all and (max-width: 375px) {
|
|
178
|
-
.container-large.svelte-
|
|
222
|
+
.container-large.svelte-5qkkwb {
|
|
179
223
|
max-width: calc(100% - 40px); } }
|
|
180
224
|
|
|
181
225
|
@media all and (max-width: 320px) {
|
|
182
|
-
.container-large.svelte-
|
|
226
|
+
.container-large.svelte-5qkkwb {
|
|
183
227
|
max-width: calc(100% - 20px); } }
|
|
184
228
|
|
|
185
|
-
.container-medium.svelte-
|
|
229
|
+
.container-medium.svelte-5qkkwb {
|
|
186
230
|
width: calc(100% - 20px);
|
|
187
231
|
max-width: 884px;
|
|
188
232
|
margin-left: auto;
|
|
@@ -190,30 +234,30 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
190
234
|
transition: max-width ease-out 200ms; }
|
|
191
235
|
|
|
192
236
|
@media all and (max-width: 1024px) {
|
|
193
|
-
.container-medium.svelte-
|
|
237
|
+
.container-medium.svelte-5qkkwb {
|
|
194
238
|
max-width: 648px; } }
|
|
195
239
|
|
|
196
240
|
@media all and (max-width: 768px) {
|
|
197
|
-
.container-medium.svelte-
|
|
241
|
+
.container-medium.svelte-5qkkwb {
|
|
198
242
|
max-width: 496px; } }
|
|
199
243
|
|
|
200
244
|
@media all and (max-width: 596px) {
|
|
201
|
-
.container-medium.svelte-
|
|
245
|
+
.container-medium.svelte-5qkkwb {
|
|
202
246
|
max-width: 365px; } }
|
|
203
247
|
|
|
204
248
|
@media all and (max-width: 425px) {
|
|
205
|
-
.container-medium.svelte-
|
|
249
|
+
.container-medium.svelte-5qkkwb {
|
|
206
250
|
max-width: calc(100% - 60px); } }
|
|
207
251
|
|
|
208
252
|
@media all and (max-width: 375px) {
|
|
209
|
-
.container-medium.svelte-
|
|
253
|
+
.container-medium.svelte-5qkkwb {
|
|
210
254
|
max-width: calc(100% - 40px); } }
|
|
211
255
|
|
|
212
256
|
@media all and (max-width: 320px) {
|
|
213
|
-
.container-medium.svelte-
|
|
257
|
+
.container-medium.svelte-5qkkwb {
|
|
214
258
|
max-width: calc(100% - 20px); } }
|
|
215
259
|
|
|
216
|
-
.container-small.svelte-
|
|
260
|
+
.container-small.svelte-5qkkwb {
|
|
217
261
|
width: calc(100% - 20px);
|
|
218
262
|
max-width: 496px;
|
|
219
263
|
margin-left: auto;
|
|
@@ -221,18 +265,18 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
221
265
|
transition: max-width ease-out 200ms; }
|
|
222
266
|
|
|
223
267
|
@media all and (max-width: 425px) {
|
|
224
|
-
.container-small.svelte-
|
|
268
|
+
.container-small.svelte-5qkkwb {
|
|
225
269
|
max-width: calc(100% - 60px); } }
|
|
226
270
|
|
|
227
271
|
@media all and (max-width: 375px) {
|
|
228
|
-
.container-small.svelte-
|
|
272
|
+
.container-small.svelte-5qkkwb {
|
|
229
273
|
max-width: calc(100% - 40px); } }
|
|
230
274
|
|
|
231
275
|
@media all and (max-width: 320px) {
|
|
232
|
-
.container-small.svelte-
|
|
276
|
+
.container-small.svelte-5qkkwb {
|
|
233
277
|
max-width: calc(100% - 20px); } }
|
|
234
278
|
|
|
235
|
-
.iroco-ui-button.svelte-
|
|
279
|
+
.iroco-ui-button.svelte-5qkkwb {
|
|
236
280
|
cursor: pointer;
|
|
237
281
|
-webkit-touch-callout: none;
|
|
238
282
|
-webkit-user-select: none;
|
|
@@ -241,116 +285,228 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
241
285
|
-ms-user-select: none;
|
|
242
286
|
user-select: none;
|
|
243
287
|
border: none;
|
|
244
|
-
border-radius: 0.5em;
|
|
245
288
|
flex-shrink: 0;
|
|
246
289
|
margin: 1em 0em;
|
|
247
|
-
position: relative;
|
|
290
|
+
position: relative;
|
|
291
|
+
text-transform: uppercase;
|
|
292
|
+
border-radius: 0.3em; }
|
|
248
293
|
|
|
249
|
-
.iroco-ui-button--basic.svelte-
|
|
294
|
+
.iroco-ui-button--basic.svelte-5qkkwb {
|
|
250
295
|
background: #f2ebe3;
|
|
251
|
-
color: #a9a29e;
|
|
252
296
|
border: 1px solid #18151E; }
|
|
253
297
|
|
|
254
|
-
.iroco-ui-button--
|
|
298
|
+
.iroco-ui-button--dark.svelte-5qkkwb {
|
|
299
|
+
background: #18151E;
|
|
300
|
+
color: #f2ebe3; }
|
|
301
|
+
|
|
302
|
+
.iroco-ui-button--success.svelte-5qkkwb {
|
|
255
303
|
background: #00D692; }
|
|
256
304
|
|
|
257
|
-
.iroco-ui-button--danger.svelte-
|
|
258
|
-
background: #ff504d;
|
|
259
|
-
|
|
305
|
+
.iroco-ui-button--danger.svelte-5qkkwb {
|
|
306
|
+
background: #ff504d; }
|
|
307
|
+
|
|
308
|
+
.iroco-ui-button--regular.svelte-5qkkwb {
|
|
309
|
+
padding: 1em 2em; }
|
|
310
|
+
|
|
311
|
+
.iroco-ui-button--small.svelte-5qkkwb {
|
|
312
|
+
padding: 0.5em 1em; }
|
|
260
313
|
|
|
261
|
-
.iroco-ui-button--
|
|
262
|
-
|
|
314
|
+
.iroco-ui-button--basic.svelte-5qkkwb:hover, .iroco-ui-button--success.svelte-5qkkwb:hover, .iroco-ui-button--danger.svelte-5qkkwb:hover {
|
|
315
|
+
box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2); }
|
|
263
316
|
|
|
264
|
-
.iroco-ui-button--
|
|
265
|
-
|
|
317
|
+
.iroco-ui-button--dark.svelte-5qkkwb:hover {
|
|
318
|
+
box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2); }
|
|
266
319
|
|
|
267
|
-
.iroco-ui-button.svelte-
|
|
268
|
-
|
|
320
|
+
.iroco-ui-button.svelte-5qkkwb:active {
|
|
321
|
+
box-shadow: none; }
|
|
269
322
|
|
|
270
|
-
.iroco-ui-button.disabled.svelte-
|
|
323
|
+
.iroco-ui-button.disabled.svelte-5qkkwb {
|
|
271
324
|
background-color: #f5f5f5;
|
|
272
325
|
cursor: default; }
|
|
273
326
|
|
|
274
|
-
.iroco-ui-button.
|
|
275
|
-
|
|
327
|
+
.iroco-ui-button.disabled.svelte-5qkkwb:hover {
|
|
328
|
+
box-shadow: none; }
|
|
276
329
|
|
|
277
|
-
.
|
|
278
|
-
|
|
279
|
-
width:
|
|
280
|
-
|
|
330
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
331
|
+
width: calc(100% - 20px);
|
|
332
|
+
max-width: 2360px;
|
|
333
|
+
margin-left: auto;
|
|
334
|
+
margin-right: auto;
|
|
335
|
+
transition: max-width ease-out 200ms; }
|
|
281
336
|
|
|
282
|
-
|
|
283
|
-
|
|
337
|
+
@media all and (max-width: 2560px) {
|
|
338
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
339
|
+
max-width: 1620px; } }
|
|
284
340
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
padding-left: 1em; }
|
|
341
|
+
@media all and (max-width: 1800px) {
|
|
342
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
343
|
+
max-width: 1280px; } }
|
|
289
344
|
|
|
290
|
-
|
|
291
|
-
|
|
345
|
+
@media all and (max-width: 1440px) {
|
|
346
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
347
|
+
max-width: 884px; } }
|
|
348
|
+
|
|
349
|
+
@media all and (max-width: 1024px) {
|
|
350
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
351
|
+
max-width: 648px; } }
|
|
292
352
|
|
|
293
353
|
@media all and (max-width: 768px) {
|
|
294
|
-
.
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
.
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
354
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
355
|
+
max-width: 496px; } }
|
|
356
|
+
|
|
357
|
+
@media all and (max-width: 596px) {
|
|
358
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
359
|
+
max-width: 365px; } }
|
|
360
|
+
|
|
361
|
+
@media all and (max-width: 425px) {
|
|
362
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
363
|
+
max-width: calc(100% - 60px); } }
|
|
364
|
+
|
|
365
|
+
@media all and (max-width: 375px) {
|
|
366
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
367
|
+
max-width: calc(100% - 40px); } }
|
|
368
|
+
|
|
369
|
+
@media all and (max-width: 320px) {
|
|
370
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
371
|
+
max-width: calc(100% - 20px); } }
|
|
372
|
+
|
|
373
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
374
|
+
width: calc(100% - 20px);
|
|
375
|
+
max-width: 1280px;
|
|
376
|
+
margin-left: auto;
|
|
377
|
+
margin-right: auto;
|
|
378
|
+
transition: max-width ease-out 200ms; }
|
|
379
|
+
|
|
380
|
+
@media all and (max-width: 1440px) {
|
|
381
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
382
|
+
max-width: 884px; } }
|
|
383
|
+
|
|
384
|
+
@media all and (max-width: 1024px) {
|
|
385
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
386
|
+
max-width: 648px; } }
|
|
387
|
+
|
|
388
|
+
@media all and (max-width: 768px) {
|
|
389
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
390
|
+
max-width: 496px; } }
|
|
391
|
+
|
|
392
|
+
@media all and (max-width: 596px) {
|
|
393
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
394
|
+
max-width: 365px; } }
|
|
395
|
+
|
|
396
|
+
@media all and (max-width: 425px) {
|
|
397
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
398
|
+
max-width: calc(100% - 60px); } }
|
|
399
|
+
|
|
400
|
+
@media all and (max-width: 375px) {
|
|
401
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
402
|
+
max-width: calc(100% - 40px); } }
|
|
403
|
+
|
|
404
|
+
@media all and (max-width: 320px) {
|
|
405
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
406
|
+
max-width: calc(100% - 20px); } }
|
|
407
|
+
|
|
408
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
409
|
+
width: calc(100% - 20px);
|
|
410
|
+
max-width: 884px;
|
|
411
|
+
margin-left: auto;
|
|
412
|
+
margin-right: auto;
|
|
413
|
+
transition: max-width ease-out 200ms; }
|
|
414
|
+
|
|
415
|
+
@media all and (max-width: 1024px) {
|
|
416
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
417
|
+
max-width: 648px; } }
|
|
418
|
+
|
|
419
|
+
@media all and (max-width: 768px) {
|
|
420
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
421
|
+
max-width: 496px; } }
|
|
422
|
+
|
|
423
|
+
@media all and (max-width: 596px) {
|
|
424
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
425
|
+
max-width: 365px; } }
|
|
318
426
|
|
|
319
|
-
|
|
427
|
+
@media all and (max-width: 425px) {
|
|
428
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
429
|
+
max-width: calc(100% - 60px); } }
|
|
430
|
+
|
|
431
|
+
@media all and (max-width: 375px) {
|
|
432
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
433
|
+
max-width: calc(100% - 40px); } }
|
|
434
|
+
|
|
435
|
+
@media all and (max-width: 320px) {
|
|
436
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
437
|
+
max-width: calc(100% - 20px); } }
|
|
438
|
+
|
|
439
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
440
|
+
width: calc(100% - 20px);
|
|
441
|
+
max-width: 496px;
|
|
442
|
+
margin-left: auto;
|
|
443
|
+
margin-right: auto;
|
|
444
|
+
transition: max-width ease-out 200ms; }
|
|
445
|
+
|
|
446
|
+
@media all and (max-width: 425px) {
|
|
447
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
448
|
+
max-width: calc(100% - 60px); } }
|
|
449
|
+
|
|
450
|
+
@media all and (max-width: 375px) {
|
|
451
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
452
|
+
max-width: calc(100% - 40px); } }
|
|
453
|
+
|
|
454
|
+
@media all and (max-width: 320px) {
|
|
455
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
456
|
+
max-width: calc(100% - 20px); } }
|
|
457
|
+
|
|
458
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
|
|
459
|
+
text-decoration: none;
|
|
460
|
+
font-size: 0.75em;
|
|
461
|
+
display: block; }
|
|
462
|
+
|
|
463
|
+
.nav__sidebar__item.svelte-1c8sozl a.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl a.svelte-1c8sozl {
|
|
464
|
+
color: #f2ebe3;
|
|
465
|
+
font-size: 2em; }
|
|
466
|
+
|
|
467
|
+
.nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
|
|
468
|
+
display: none; }
|
|
469
|
+
|
|
470
|
+
.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
|
|
320
471
|
height: 100%;
|
|
321
472
|
width: 300px;
|
|
322
473
|
position: absolute;
|
|
323
|
-
|
|
324
|
-
|
|
474
|
+
top: 4.45em;
|
|
475
|
+
left: 0;
|
|
476
|
+
overflow-x: hidden; }
|
|
325
477
|
|
|
326
|
-
.
|
|
478
|
+
.nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl {
|
|
327
479
|
margin: 0;
|
|
328
480
|
padding: 0;
|
|
329
481
|
width: 100%;
|
|
330
482
|
height: 100%; }
|
|
331
483
|
|
|
332
|
-
.
|
|
333
|
-
padding: 2em
|
|
334
|
-
|
|
335
|
-
font-size: 0.75em;
|
|
336
|
-
display: block;
|
|
337
|
-
border-top: 1px solid #464452;
|
|
338
|
-
border-bottom: 1px solid #464452 a;
|
|
339
|
-
border-bottom-padding-left: 1em; }
|
|
340
|
-
|
|
341
|
-
.account__sidebar__item.svelte-12quws1 a.svelte-12quws1 {
|
|
342
|
-
color: #f2ebe3;
|
|
343
|
-
font-size: 2em; }
|
|
484
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl {
|
|
485
|
+
padding: 2em;
|
|
486
|
+
border-top: 1px solid #464452; }
|
|
344
487
|
|
|
345
|
-
.
|
|
346
|
-
|
|
488
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
|
|
489
|
+
border-top: none; }
|
|
347
490
|
|
|
348
|
-
.
|
|
491
|
+
.nav__sidebar.svelte-1c8sozl .active.svelte-1c8sozl {
|
|
349
492
|
border-top: 1px solid #00D692;
|
|
350
493
|
border-bottom: 1px solid #00D692; }
|
|
351
494
|
|
|
495
|
+
.nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
|
|
496
|
+
flex-grow: 1;
|
|
497
|
+
display: flex;
|
|
498
|
+
justify-content: flex-end; }
|
|
499
|
+
|
|
500
|
+
.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
|
|
501
|
+
display: inline; }
|
|
502
|
+
|
|
503
|
+
.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl {
|
|
504
|
+
display: flex;
|
|
505
|
+
flex-grow: 1;
|
|
506
|
+
justify-content: space-around; }
|
|
507
|
+
|
|
352
508
|
@media all and (max-width: 768px) {
|
|
353
|
-
.
|
|
509
|
+
.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
|
|
354
510
|
position: fixed;
|
|
355
511
|
background-color: #211D28;
|
|
356
512
|
top: 0;
|
|
@@ -360,38 +516,50 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
360
516
|
padding-top: 2em;
|
|
361
517
|
margin: 0;
|
|
362
518
|
border-right: none; }
|
|
363
|
-
.
|
|
519
|
+
.nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item-container.svelte-1c8sozl.svelte-1c8sozl {
|
|
364
520
|
padding: 0em;
|
|
365
521
|
margin-top: 2rem; }
|
|
366
|
-
.
|
|
522
|
+
.nav__sidebar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__sidebar.svelte-1c8sozl li.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
|
|
523
|
+
display: block; }
|
|
524
|
+
.nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
|
|
367
525
|
display: block;
|
|
368
526
|
position: absolute;
|
|
369
527
|
right: 0;
|
|
370
528
|
top: 0;
|
|
371
529
|
background-color: transparent;
|
|
372
530
|
border: none;
|
|
373
|
-
color: #a9a29e; }
|
|
531
|
+
color: #a9a29e; }
|
|
532
|
+
.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
|
|
533
|
+
top: 0;
|
|
534
|
+
left: 0; }
|
|
535
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
|
|
536
|
+
border-top: 1px solid #464452; }
|
|
537
|
+
.nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
|
|
538
|
+
height: 100%; }
|
|
539
|
+
.nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
|
|
540
|
+
padding: 2em;
|
|
541
|
+
border-top: 1px solid #464452; } }
|
|
374
542
|
|
|
375
543
|
@use "colors";
|
|
376
544
|
@use "containers";
|
|
377
545
|
@use "fonts";
|
|
378
546
|
@use "forms";
|
|
379
547
|
@use "layouts";
|
|
380
|
-
.alert.svelte-
|
|
548
|
+
.alert.svelte-itln7g {
|
|
381
549
|
min-height: 2em;
|
|
382
550
|
display: inline-flex;
|
|
383
551
|
align-items: center;
|
|
384
|
-
border-radius: 0.
|
|
552
|
+
border-radius: 0.3em;
|
|
385
553
|
padding: 0 1em 0 1em;
|
|
386
554
|
font-size: 1.2em;
|
|
387
555
|
justify-content: center;
|
|
388
556
|
margin-bottom: 1em;
|
|
389
557
|
cursor: pointer; }
|
|
390
558
|
|
|
391
|
-
.alert--danger.svelte-
|
|
559
|
+
.alert--danger.svelte-itln7g {
|
|
392
560
|
background-color: rgba(255, 80, 77, 0.5);
|
|
393
561
|
border: 1px solid #ff504d; }
|
|
394
562
|
|
|
395
|
-
.alert--success.svelte-
|
|
563
|
+
.alert--success.svelte-itln7g {
|
|
396
564
|
background-color: rgba(0, 214, 146, 0.5);
|
|
397
565
|
border: 1px solid #00D692; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iroco/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.1",
|
|
4
4
|
"description": "Iroco design system based on Svelte",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib/index.mjs",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"eslint-plugin-svelte3": "^3.2.1",
|
|
61
61
|
"gh-pages": "^3.2.3",
|
|
62
62
|
"husky": "^7.0.2",
|
|
63
|
-
"jest": "^
|
|
63
|
+
"jest": "^26.6.3",
|
|
64
64
|
"lint-staged": "^11.1.2",
|
|
65
65
|
"npm-watch": "^0.10.0",
|
|
66
66
|
"prettier": "^2.3.1",
|
|
@@ -74,7 +74,8 @@
|
|
|
74
74
|
"svelte": "^3.38.2",
|
|
75
75
|
"svelte-jester": "^1.7.0",
|
|
76
76
|
"svelte-preprocess": "^4.7.3",
|
|
77
|
-
"ts-jest": "^
|
|
77
|
+
"ts-jest": "^26.5.5",
|
|
78
|
+
"node-sass": "^7.0.1",
|
|
78
79
|
"typescript": "^4.3.3"
|
|
79
80
|
},
|
|
80
81
|
"peerDependencies": {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
$border-radius: 0.3em
|
package/src/Alert.svelte
CHANGED
|
@@ -11,11 +11,12 @@
|
|
|
11
11
|
|
|
12
12
|
<style lang="scss">
|
|
13
13
|
@use '../scss/colors';
|
|
14
|
+
@use '../scss/constants';
|
|
14
15
|
.alert {
|
|
15
16
|
min-height: 2em;
|
|
16
17
|
display: inline-flex;
|
|
17
18
|
align-items: center;
|
|
18
|
-
border-radius:
|
|
19
|
+
border-radius: constants.$border-radius;
|
|
19
20
|
padding: 0 1em 0 1em;
|
|
20
21
|
font-size: 1.2em;
|
|
21
22
|
justify-content: center;
|