@iroco/ui 0.14.0 → 0.15.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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 +309 -141
- 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/TextInput.svelte +3 -1
- package/src/index.ts +1 -0
package/lib/index.mjs.css
CHANGED
|
@@ -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,252 @@ 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
|
-
|
|
280
|
-
|
|
330
|
+
@use "colors";
|
|
331
|
+
@use "containers";
|
|
332
|
+
@use "fonts";
|
|
333
|
+
@use "forms";
|
|
334
|
+
@use "layouts";
|
|
335
|
+
.alert.svelte-itln7g {
|
|
336
|
+
min-height: 2em;
|
|
337
|
+
display: inline-flex;
|
|
338
|
+
align-items: center;
|
|
339
|
+
border-radius: 0.3em;
|
|
340
|
+
padding: 0 1em 0 1em;
|
|
341
|
+
font-size: 1.2em;
|
|
342
|
+
justify-content: center;
|
|
343
|
+
margin-bottom: 1em;
|
|
344
|
+
cursor: pointer; }
|
|
281
345
|
|
|
282
|
-
.
|
|
283
|
-
|
|
346
|
+
.alert--danger.svelte-itln7g {
|
|
347
|
+
background-color: rgba(255, 80, 77, 0.5);
|
|
348
|
+
border: 1px solid #ff504d; }
|
|
284
349
|
|
|
285
|
-
.
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
padding-left: 1em; }
|
|
350
|
+
.alert--success.svelte-itln7g {
|
|
351
|
+
background-color: rgba(0, 214, 146, 0.5);
|
|
352
|
+
border: 1px solid #00D692; }
|
|
289
353
|
|
|
290
|
-
.
|
|
291
|
-
|
|
354
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
355
|
+
width: calc(100% - 20px);
|
|
356
|
+
max-width: 2360px;
|
|
357
|
+
margin-left: auto;
|
|
358
|
+
margin-right: auto;
|
|
359
|
+
transition: max-width ease-out 200ms; }
|
|
360
|
+
|
|
361
|
+
@media all and (max-width: 2560px) {
|
|
362
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
363
|
+
max-width: 1620px; } }
|
|
364
|
+
|
|
365
|
+
@media all and (max-width: 1800px) {
|
|
366
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
367
|
+
max-width: 1280px; } }
|
|
368
|
+
|
|
369
|
+
@media all and (max-width: 1440px) {
|
|
370
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
371
|
+
max-width: 884px; } }
|
|
372
|
+
|
|
373
|
+
@media all and (max-width: 1024px) {
|
|
374
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
375
|
+
max-width: 648px; } }
|
|
292
376
|
|
|
293
377
|
@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
|
-
|
|
378
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
379
|
+
max-width: 496px; } }
|
|
380
|
+
|
|
381
|
+
@media all and (max-width: 596px) {
|
|
382
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
383
|
+
max-width: 365px; } }
|
|
384
|
+
|
|
385
|
+
@media all and (max-width: 425px) {
|
|
386
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
387
|
+
max-width: calc(100% - 60px); } }
|
|
388
|
+
|
|
389
|
+
@media all and (max-width: 375px) {
|
|
390
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
391
|
+
max-width: calc(100% - 40px); } }
|
|
392
|
+
|
|
393
|
+
@media all and (max-width: 320px) {
|
|
394
|
+
.container-wide.svelte-1c8sozl.svelte-1c8sozl {
|
|
395
|
+
max-width: calc(100% - 20px); } }
|
|
396
|
+
|
|
397
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
398
|
+
width: calc(100% - 20px);
|
|
399
|
+
max-width: 1280px;
|
|
400
|
+
margin-left: auto;
|
|
401
|
+
margin-right: auto;
|
|
402
|
+
transition: max-width ease-out 200ms; }
|
|
403
|
+
|
|
404
|
+
@media all and (max-width: 1440px) {
|
|
405
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
406
|
+
max-width: 884px; } }
|
|
407
|
+
|
|
408
|
+
@media all and (max-width: 1024px) {
|
|
409
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
410
|
+
max-width: 648px; } }
|
|
411
|
+
|
|
412
|
+
@media all and (max-width: 768px) {
|
|
413
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
414
|
+
max-width: 496px; } }
|
|
415
|
+
|
|
416
|
+
@media all and (max-width: 596px) {
|
|
417
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
418
|
+
max-width: 365px; } }
|
|
419
|
+
|
|
420
|
+
@media all and (max-width: 425px) {
|
|
421
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
422
|
+
max-width: calc(100% - 60px); } }
|
|
423
|
+
|
|
424
|
+
@media all and (max-width: 375px) {
|
|
425
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
426
|
+
max-width: calc(100% - 40px); } }
|
|
427
|
+
|
|
428
|
+
@media all and (max-width: 320px) {
|
|
429
|
+
.container-large.svelte-1c8sozl.svelte-1c8sozl {
|
|
430
|
+
max-width: calc(100% - 20px); } }
|
|
431
|
+
|
|
432
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
433
|
+
width: calc(100% - 20px);
|
|
434
|
+
max-width: 884px;
|
|
435
|
+
margin-left: auto;
|
|
436
|
+
margin-right: auto;
|
|
437
|
+
transition: max-width ease-out 200ms; }
|
|
438
|
+
|
|
439
|
+
@media all and (max-width: 1024px) {
|
|
440
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
441
|
+
max-width: 648px; } }
|
|
442
|
+
|
|
443
|
+
@media all and (max-width: 768px) {
|
|
444
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
445
|
+
max-width: 496px; } }
|
|
446
|
+
|
|
447
|
+
@media all and (max-width: 596px) {
|
|
448
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
449
|
+
max-width: 365px; } }
|
|
450
|
+
|
|
451
|
+
@media all and (max-width: 425px) {
|
|
452
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
453
|
+
max-width: calc(100% - 60px); } }
|
|
454
|
+
|
|
455
|
+
@media all and (max-width: 375px) {
|
|
456
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
457
|
+
max-width: calc(100% - 40px); } }
|
|
458
|
+
|
|
459
|
+
@media all and (max-width: 320px) {
|
|
460
|
+
.container-medium.svelte-1c8sozl.svelte-1c8sozl {
|
|
461
|
+
max-width: calc(100% - 20px); } }
|
|
462
|
+
|
|
463
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
464
|
+
width: calc(100% - 20px);
|
|
465
|
+
max-width: 496px;
|
|
466
|
+
margin-left: auto;
|
|
467
|
+
margin-right: auto;
|
|
468
|
+
transition: max-width ease-out 200ms; }
|
|
469
|
+
|
|
470
|
+
@media all and (max-width: 425px) {
|
|
471
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
472
|
+
max-width: calc(100% - 60px); } }
|
|
318
473
|
|
|
319
|
-
|
|
474
|
+
@media all and (max-width: 375px) {
|
|
475
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
476
|
+
max-width: calc(100% - 40px); } }
|
|
477
|
+
|
|
478
|
+
@media all and (max-width: 320px) {
|
|
479
|
+
.container-small.svelte-1c8sozl.svelte-1c8sozl {
|
|
480
|
+
max-width: calc(100% - 20px); } }
|
|
481
|
+
|
|
482
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
|
|
483
|
+
text-decoration: none;
|
|
484
|
+
font-size: 0.75em;
|
|
485
|
+
display: block; }
|
|
486
|
+
|
|
487
|
+
.nav__sidebar__item.svelte-1c8sozl a.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl a.svelte-1c8sozl {
|
|
488
|
+
color: #f2ebe3;
|
|
489
|
+
font-size: 2em; }
|
|
490
|
+
|
|
491
|
+
.nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
|
|
492
|
+
display: none; }
|
|
493
|
+
|
|
494
|
+
.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
|
|
320
495
|
height: 100%;
|
|
321
496
|
width: 300px;
|
|
322
497
|
position: absolute;
|
|
323
|
-
|
|
324
|
-
|
|
498
|
+
top: 4.45em;
|
|
499
|
+
left: 0;
|
|
500
|
+
overflow-x: hidden; }
|
|
325
501
|
|
|
326
|
-
.
|
|
502
|
+
.nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl {
|
|
327
503
|
margin: 0;
|
|
328
504
|
padding: 0;
|
|
329
505
|
width: 100%;
|
|
330
506
|
height: 100%; }
|
|
331
507
|
|
|
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; }
|
|
508
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl {
|
|
509
|
+
padding: 2em;
|
|
510
|
+
border-top: 1px solid #464452; }
|
|
344
511
|
|
|
345
|
-
.
|
|
346
|
-
|
|
512
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
|
|
513
|
+
border-top: none; }
|
|
347
514
|
|
|
348
|
-
.
|
|
515
|
+
.nav__sidebar.svelte-1c8sozl .active.svelte-1c8sozl {
|
|
349
516
|
border-top: 1px solid #00D692;
|
|
350
517
|
border-bottom: 1px solid #00D692; }
|
|
351
518
|
|
|
519
|
+
.nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
|
|
520
|
+
flex-grow: 1;
|
|
521
|
+
display: flex;
|
|
522
|
+
justify-content: flex-end; }
|
|
523
|
+
|
|
524
|
+
.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
|
|
525
|
+
display: inline; }
|
|
526
|
+
|
|
527
|
+
.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl {
|
|
528
|
+
display: flex;
|
|
529
|
+
flex-grow: 1;
|
|
530
|
+
justify-content: space-around; }
|
|
531
|
+
|
|
352
532
|
@media all and (max-width: 768px) {
|
|
353
|
-
.
|
|
533
|
+
.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
|
|
354
534
|
position: fixed;
|
|
355
535
|
background-color: #211D28;
|
|
356
536
|
top: 0;
|
|
@@ -360,38 +540,26 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
|
|
|
360
540
|
padding-top: 2em;
|
|
361
541
|
margin: 0;
|
|
362
542
|
border-right: none; }
|
|
363
|
-
.
|
|
543
|
+
.nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item-container.svelte-1c8sozl.svelte-1c8sozl {
|
|
364
544
|
padding: 0em;
|
|
365
545
|
margin-top: 2rem; }
|
|
366
|
-
.
|
|
546
|
+
.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 {
|
|
547
|
+
display: block; }
|
|
548
|
+
.nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
|
|
367
549
|
display: block;
|
|
368
550
|
position: absolute;
|
|
369
551
|
right: 0;
|
|
370
552
|
top: 0;
|
|
371
553
|
background-color: transparent;
|
|
372
554
|
border: none;
|
|
373
|
-
color: #a9a29e; }
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
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; }
|
|
555
|
+
color: #a9a29e; }
|
|
556
|
+
.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
|
|
557
|
+
top: 0;
|
|
558
|
+
left: 0; }
|
|
559
|
+
.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
|
|
560
|
+
border-top: 1px solid #464452; }
|
|
561
|
+
.nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
|
|
562
|
+
height: 100%; }
|
|
563
|
+
.nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
|
|
564
|
+
padding: 2em;
|
|
565
|
+
border-top: 1px solid #464452; } }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iroco/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.2",
|
|
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;
|