@iroco/ui 0.11.0 → 0.11.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/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%; }
@@ -31,6 +31,25 @@ svg.svelte-1cuxg7m {
31
31
  text-align: center;
32
32
  vertical-align: middle; }
33
33
 
34
+ .alert.svelte-1oun6o6 {
35
+ min-height: 2em;
36
+ display: inline-flex;
37
+ align-items: center;
38
+ border-radius: 0.5em;
39
+ padding: 0 1em 0 1em;
40
+ font-size: 1.2em;
41
+ justify-content: center;
42
+ margin-bottom: 1em;
43
+ cursor: pointer; }
44
+
45
+ .alert--danger.svelte-1oun6o6 {
46
+ background-color: rgba(255, 80, 77, 0.5);
47
+ border: 1px solid #ff504d; }
48
+
49
+ .alert--success.svelte-1oun6o6 {
50
+ background-color: rgba(0, 214, 146, 0.5);
51
+ border: 1px solid #00D692; }
52
+
34
53
  .iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
35
54
  color: #f2ebe3;
36
55
  position: relative;
@@ -104,7 +123,7 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
104
123
  padding-bottom: 10px;
105
124
  display: inline-block; }
106
125
 
107
- .container-wide.svelte-a1s5q9 {
126
+ .container-wide.svelte-hp8sdi {
108
127
  width: calc(100% - 20px);
109
128
  max-width: 2360px;
110
129
  margin-left: auto;
@@ -112,42 +131,42 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
112
131
  transition: max-width ease-out 200ms; }
113
132
 
114
133
  @media all and (max-width: 2560px) {
115
- .container-wide.svelte-a1s5q9 {
134
+ .container-wide.svelte-hp8sdi {
116
135
  max-width: 1620px; } }
117
136
 
118
137
  @media all and (max-width: 1800px) {
119
- .container-wide.svelte-a1s5q9 {
138
+ .container-wide.svelte-hp8sdi {
120
139
  max-width: 1280px; } }
121
140
 
122
141
  @media all and (max-width: 1440px) {
123
- .container-wide.svelte-a1s5q9 {
142
+ .container-wide.svelte-hp8sdi {
124
143
  max-width: 884px; } }
125
144
 
126
145
  @media all and (max-width: 1024px) {
127
- .container-wide.svelte-a1s5q9 {
146
+ .container-wide.svelte-hp8sdi {
128
147
  max-width: 648px; } }
129
148
 
130
149
  @media all and (max-width: 768px) {
131
- .container-wide.svelte-a1s5q9 {
150
+ .container-wide.svelte-hp8sdi {
132
151
  max-width: 496px; } }
133
152
 
134
153
  @media all and (max-width: 596px) {
135
- .container-wide.svelte-a1s5q9 {
154
+ .container-wide.svelte-hp8sdi {
136
155
  max-width: 365px; } }
137
156
 
138
157
  @media all and (max-width: 425px) {
139
- .container-wide.svelte-a1s5q9 {
158
+ .container-wide.svelte-hp8sdi {
140
159
  max-width: calc(100% - 60px); } }
141
160
 
142
161
  @media all and (max-width: 375px) {
143
- .container-wide.svelte-a1s5q9 {
162
+ .container-wide.svelte-hp8sdi {
144
163
  max-width: calc(100% - 40px); } }
145
164
 
146
165
  @media all and (max-width: 320px) {
147
- .container-wide.svelte-a1s5q9 {
166
+ .container-wide.svelte-hp8sdi {
148
167
  max-width: calc(100% - 20px); } }
149
168
 
150
- .container-large.svelte-a1s5q9 {
169
+ .container-large.svelte-hp8sdi {
151
170
  width: calc(100% - 20px);
152
171
  max-width: 1280px;
153
172
  margin-left: auto;
@@ -155,34 +174,34 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
155
174
  transition: max-width ease-out 200ms; }
156
175
 
157
176
  @media all and (max-width: 1440px) {
158
- .container-large.svelte-a1s5q9 {
177
+ .container-large.svelte-hp8sdi {
159
178
  max-width: 884px; } }
160
179
 
161
180
  @media all and (max-width: 1024px) {
162
- .container-large.svelte-a1s5q9 {
181
+ .container-large.svelte-hp8sdi {
163
182
  max-width: 648px; } }
164
183
 
165
184
  @media all and (max-width: 768px) {
166
- .container-large.svelte-a1s5q9 {
185
+ .container-large.svelte-hp8sdi {
167
186
  max-width: 496px; } }
168
187
 
169
188
  @media all and (max-width: 596px) {
170
- .container-large.svelte-a1s5q9 {
189
+ .container-large.svelte-hp8sdi {
171
190
  max-width: 365px; } }
172
191
 
173
192
  @media all and (max-width: 425px) {
174
- .container-large.svelte-a1s5q9 {
193
+ .container-large.svelte-hp8sdi {
175
194
  max-width: calc(100% - 60px); } }
176
195
 
177
196
  @media all and (max-width: 375px) {
178
- .container-large.svelte-a1s5q9 {
197
+ .container-large.svelte-hp8sdi {
179
198
  max-width: calc(100% - 40px); } }
180
199
 
181
200
  @media all and (max-width: 320px) {
182
- .container-large.svelte-a1s5q9 {
201
+ .container-large.svelte-hp8sdi {
183
202
  max-width: calc(100% - 20px); } }
184
203
 
185
- .container-medium.svelte-a1s5q9 {
204
+ .container-medium.svelte-hp8sdi {
186
205
  width: calc(100% - 20px);
187
206
  max-width: 884px;
188
207
  margin-left: auto;
@@ -190,30 +209,30 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
190
209
  transition: max-width ease-out 200ms; }
191
210
 
192
211
  @media all and (max-width: 1024px) {
193
- .container-medium.svelte-a1s5q9 {
212
+ .container-medium.svelte-hp8sdi {
194
213
  max-width: 648px; } }
195
214
 
196
215
  @media all and (max-width: 768px) {
197
- .container-medium.svelte-a1s5q9 {
216
+ .container-medium.svelte-hp8sdi {
198
217
  max-width: 496px; } }
199
218
 
200
219
  @media all and (max-width: 596px) {
201
- .container-medium.svelte-a1s5q9 {
220
+ .container-medium.svelte-hp8sdi {
202
221
  max-width: 365px; } }
203
222
 
204
223
  @media all and (max-width: 425px) {
205
- .container-medium.svelte-a1s5q9 {
224
+ .container-medium.svelte-hp8sdi {
206
225
  max-width: calc(100% - 60px); } }
207
226
 
208
227
  @media all and (max-width: 375px) {
209
- .container-medium.svelte-a1s5q9 {
228
+ .container-medium.svelte-hp8sdi {
210
229
  max-width: calc(100% - 40px); } }
211
230
 
212
231
  @media all and (max-width: 320px) {
213
- .container-medium.svelte-a1s5q9 {
232
+ .container-medium.svelte-hp8sdi {
214
233
  max-width: calc(100% - 20px); } }
215
234
 
216
- .container-small.svelte-a1s5q9 {
235
+ .container-small.svelte-hp8sdi {
217
236
  width: calc(100% - 20px);
218
237
  max-width: 496px;
219
238
  margin-left: auto;
@@ -221,18 +240,18 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
221
240
  transition: max-width ease-out 200ms; }
222
241
 
223
242
  @media all and (max-width: 425px) {
224
- .container-small.svelte-a1s5q9 {
243
+ .container-small.svelte-hp8sdi {
225
244
  max-width: calc(100% - 60px); } }
226
245
 
227
246
  @media all and (max-width: 375px) {
228
- .container-small.svelte-a1s5q9 {
247
+ .container-small.svelte-hp8sdi {
229
248
  max-width: calc(100% - 40px); } }
230
249
 
231
250
  @media all and (max-width: 320px) {
232
- .container-small.svelte-a1s5q9 {
251
+ .container-small.svelte-hp8sdi {
233
252
  max-width: calc(100% - 20px); } }
234
253
 
235
- .iroco-ui-button.svelte-a1s5q9 {
254
+ .iroco-ui-button.svelte-hp8sdi {
236
255
  cursor: pointer;
237
256
  -webkit-touch-callout: none;
238
257
  -webkit-user-select: none;
@@ -246,90 +265,86 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
246
265
  margin: 1em 0em;
247
266
  position: relative; }
248
267
 
249
- .iroco-ui-button--basic.svelte-a1s5q9 {
250
- background: #f2ebe3;
251
- color: #a9a29e;
252
- border: 1px solid #18151E; }
253
-
254
- .iroco-ui-button--success.svelte-a1s5q9 {
268
+ .iroco-ui-button--basic.svelte-hp8sdi {
255
269
  background: #00D692; }
256
270
 
257
- .iroco-ui-button--danger.svelte-a1s5q9 {
271
+ .iroco-ui-button--danger.svelte-hp8sdi {
258
272
  background: #ff504d;
259
273
  color: #f2ebe3; }
260
274
 
261
- .iroco-ui-button--regular.svelte-a1s5q9 {
275
+ .iroco-ui-button--regular.svelte-hp8sdi {
262
276
  padding: 1em; }
263
277
 
264
- .iroco-ui-button--small.svelte-a1s5q9 {
278
+ .iroco-ui-button--small.svelte-hp8sdi {
265
279
  padding: 0.5em; }
266
280
 
267
- .iroco-ui-button.svelte-a1s5q9:active {
281
+ .iroco-ui-button.svelte-hp8sdi:active {
268
282
  background: #f5f5f5; }
269
283
 
270
- .iroco-ui-button.disabled.svelte-a1s5q9 {
284
+ .iroco-ui-button.disabled.svelte-hp8sdi {
271
285
  background-color: #f5f5f5;
272
286
  cursor: default; }
273
287
 
274
- .iroco-ui-button.rounded.svelte-a1s5q9 {
288
+ .iroco-ui-button.rounded.svelte-hp8sdi {
275
289
  border-radius: 10px; }
276
290
 
277
- .account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
291
+ .account__navigation.svelte-1jgfrsf.svelte-1jgfrsf {
278
292
  display: block;
279
293
  width: 100%;
280
294
  border-bottom: 1px solid #464452; }
281
295
 
282
- .account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
296
+ .account__navigation--mobile.svelte-1jgfrsf.svelte-1jgfrsf {
283
297
  display: none; }
284
298
 
285
- .account__navigation__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
299
+ .account__navigation__title-container.svelte-1jgfrsf.svelte-1jgfrsf {
286
300
  display: flex;
287
301
  align-items: center;
288
302
  padding-left: 1em; }
289
303
 
290
- .account__navigation__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
304
+ .account__navigation__title-container.svelte-1jgfrsf h1.svelte-1jgfrsf {
291
305
  padding-left: 1em; }
292
306
 
293
307
  @media all and (max-width: 768px) {
294
- .account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
308
+ .account__navigation.svelte-1jgfrsf.svelte-1jgfrsf {
295
309
  display: none;
296
310
  color: #f2ebe3; }
297
- .account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
311
+ .account__navigation--mobile.svelte-1jgfrsf.svelte-1jgfrsf {
298
312
  display: flex;
299
313
  padding: 0 1em;
300
314
  justify-content: space-between;
301
315
  position: fixed;
302
316
  top: 0;
303
- z-index: 1;
304
317
  width: 100%;
305
318
  border-bottom: 1px solid #464452; }
306
- .account__navigation--mobile.svelte-1uu9ytm h1.svelte-1uu9ytm {
319
+ .account__navigation--mobile.svelte-1jgfrsf h1.svelte-1jgfrsf {
307
320
  font: bold;
308
321
  font-size: 2em; }
309
- .account__navigation--mobile__button.svelte-1uu9ytm.svelte-1uu9ytm {
322
+ .account__navigation--mobile__button.svelte-1jgfrsf.svelte-1jgfrsf {
310
323
  background-color: transparent;
311
324
  border: none;
312
325
  color: #464452; }
313
- .account__navigation--mobile__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
326
+ .account__navigation--mobile__title-container.svelte-1jgfrsf.svelte-1jgfrsf {
314
327
  display: flex;
315
328
  align-items: center; }
316
- .account__navigation--mobile__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
329
+ .account__navigation--mobile__title-container.svelte-1jgfrsf h1.svelte-1jgfrsf {
317
330
  padding-left: 0.5em; } }
318
331
 
319
- .account__sidebar.svelte-12quws1.svelte-12quws1 {
332
+ .account__sidebar.svelte-1rx212l.svelte-1rx212l {
320
333
  height: 100%;
321
334
  width: 300px;
322
335
  position: absolute;
336
+ top: 70px;
337
+ z-index: 1;
323
338
  overflow-x: hidden;
324
339
  border-right: 1px solid #464452; }
325
340
 
326
- .account__sidebar__item_container.svelte-12quws1.svelte-12quws1 {
341
+ .account__sidebar__item_container.svelte-1rx212l.svelte-1rx212l {
327
342
  margin: 0;
328
343
  padding: 0;
329
344
  width: 100%;
330
345
  height: 100%; }
331
346
 
332
- .account__sidebar__item.svelte-12quws1.svelte-12quws1 {
347
+ .account__sidebar__item.svelte-1rx212l.svelte-1rx212l {
333
348
  padding: 2em 2em;
334
349
  text-decoration: none;
335
350
  font-size: 0.75em;
@@ -338,19 +353,19 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
338
353
  border-bottom: 1px solid #464452 a;
339
354
  border-bottom-padding-left: 1em; }
340
355
 
341
- .account__sidebar__item.svelte-12quws1 a.svelte-12quws1 {
356
+ .account__sidebar__item.svelte-1rx212l a.svelte-1rx212l {
342
357
  color: #f2ebe3;
343
358
  font-size: 2em; }
344
359
 
345
- .account__sidebar__close.svelte-12quws1.svelte-12quws1 {
360
+ .account__sidebar__close.svelte-1rx212l.svelte-1rx212l {
346
361
  display: none; }
347
362
 
348
- .account__sidebar.svelte-12quws1 .active.svelte-12quws1 {
363
+ .account__sidebar.svelte-1rx212l .active.svelte-1rx212l {
349
364
  border-top: 1px solid #00D692;
350
365
  border-bottom: 1px solid #00D692; }
351
366
 
352
367
  @media all and (max-width: 768px) {
353
- .account__sidebar.svelte-12quws1.svelte-12quws1 {
368
+ .account__sidebar.svelte-1rx212l.svelte-1rx212l {
354
369
  position: fixed;
355
370
  background-color: #211D28;
356
371
  top: 0;
@@ -360,10 +375,10 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
360
375
  padding-top: 2em;
361
376
  margin: 0;
362
377
  border-right: none; }
363
- .account__sidebar__item_container.svelte-12quws1.svelte-12quws1 {
378
+ .account__sidebar__item_container.svelte-1rx212l.svelte-1rx212l {
364
379
  padding: 0em;
365
380
  margin-top: 2rem; }
366
- .account__sidebar__close.svelte-12quws1.svelte-12quws1 {
381
+ .account__sidebar__close.svelte-1rx212l.svelte-1rx212l {
367
382
  display: block;
368
383
  position: absolute;
369
384
  right: 0;
@@ -377,21 +392,3 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
377
392
  @use "fonts";
378
393
  @use "forms";
379
394
  @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/lib/loader.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  border-style: solid;
15
15
  border-radius: 50%;
16
16
  animation: spin 1s linear infinite;
17
+
17
18
  }
18
19
 
19
20
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "0.11.0",
3
+ "version": "0.11.1",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.mjs",
package/src/Button.svelte CHANGED
@@ -46,7 +46,7 @@
46
46
  border: 1px solid colors.$nightBlue;
47
47
  }
48
48
  &--dark {
49
- background: colors.$darkBlue;
49
+ background: colors.$nightBlue;
50
50
  }
51
51
  &--success {
52
52
  background: colors.$green;