@iroco/ui 0.9.3 → 0.10.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.
Files changed (6) hide show
  1. package/lib/index.js +96 -229
  2. package/lib/index.min.js +3 -3
  3. package/lib/index.mjs +96 -229
  4. package/lib/index.mjs.css +154 -157
  5. package/package.json +1 -1
  6. package/src/Button.svelte +1 -0
package/lib/index.mjs.css CHANGED
@@ -1,3 +1,55 @@
1
+ svg.svelte-1cuxg7m {
2
+ overflow: visible; }
3
+
4
+ .rotate.svelte-1dns1yx {
5
+ animation: svelte-1dns1yx-rotation 2s; }
6
+
7
+ .linear.svelte-1dns1yx {
8
+ animation-timing-function: linear; }
9
+
10
+ .infinite.svelte-1dns1yx {
11
+ animation-iteration-count: infinite; }
12
+
13
+ @keyframes svelte-1dns1yx-rotation {
14
+ from {
15
+ transform: rotate(0deg); }
16
+ to {
17
+ transform: rotate(359deg); } }
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
+ .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
+
1
53
  .iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
2
54
  color: #f2ebe3;
3
55
  position: relative;
@@ -26,7 +78,52 @@
26
78
  .iroco-ui-radio.svelte-156c82q input.svelte-156c82q:checked ~ .radio-button-color.svelte-156c82q {
27
79
  background-color: #00D692; }
28
80
 
29
- .container-wide.svelte-ahn9t2 {
81
+ input.svelte-11iawkb.svelte-11iawkb {
82
+ outline: none;
83
+ text-decoration: none;
84
+ font-size: 14px; }
85
+
86
+ input.svelte-11iawkb.svelte-11iawkb:focus {
87
+ outline: none;
88
+ text-decoration: none;
89
+ font-size: 14px; }
90
+
91
+ .iroco-ui-input.svelte-11iawkb.svelte-11iawkb {
92
+ display: flex;
93
+ flex-direction: column; }
94
+
95
+ .iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb {
96
+ color: #f2ebe3;
97
+ background: #211D28;
98
+ border: 1px solid #211D28;
99
+ padding: 1em 1.5em;
100
+ text-overflow: ellipsis;
101
+ white-space: nowrap;
102
+ overflow: hidden;
103
+ border-radius: 0.5em; }
104
+
105
+ .iroco-ui-input.svelte-11iawkb > input.border.svelte-11iawkb {
106
+ border: 1px solid #f2ebe3; }
107
+
108
+ .iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb::placeholder {
109
+ color: rgba(242, 235, 227, 0.5); }
110
+
111
+ .iroco-ui-input.svelte-11iawkb > input.error.svelte-11iawkb {
112
+ border-color: #ff504d; }
113
+
114
+ .iroco-ui-input.svelte-11iawkb > input.readonlyInput.svelte-11iawkb {
115
+ cursor: not-allowed; }
116
+
117
+ .iroco-ui-input.svelte-11iawkb .error.svelte-11iawkb {
118
+ color: #ff504d; }
119
+
120
+ .iroco-ui-label.svelte-11iawkb.svelte-11iawkb {
121
+ color: rgba(242, 235, 227, 0.6);
122
+ font-weight: bold;
123
+ padding-bottom: 10px;
124
+ display: inline-block; }
125
+
126
+ .container-wide.svelte-hp8sdi {
30
127
  width: calc(100% - 20px);
31
128
  max-width: 2360px;
32
129
  margin-left: auto;
@@ -34,42 +131,42 @@
34
131
  transition: max-width ease-out 200ms; }
35
132
 
36
133
  @media all and (max-width: 2560px) {
37
- .container-wide.svelte-ahn9t2 {
134
+ .container-wide.svelte-hp8sdi {
38
135
  max-width: 1620px; } }
39
136
 
40
137
  @media all and (max-width: 1800px) {
41
- .container-wide.svelte-ahn9t2 {
138
+ .container-wide.svelte-hp8sdi {
42
139
  max-width: 1280px; } }
43
140
 
44
141
  @media all and (max-width: 1440px) {
45
- .container-wide.svelte-ahn9t2 {
142
+ .container-wide.svelte-hp8sdi {
46
143
  max-width: 884px; } }
47
144
 
48
145
  @media all and (max-width: 1024px) {
49
- .container-wide.svelte-ahn9t2 {
146
+ .container-wide.svelte-hp8sdi {
50
147
  max-width: 648px; } }
51
148
 
52
149
  @media all and (max-width: 768px) {
53
- .container-wide.svelte-ahn9t2 {
150
+ .container-wide.svelte-hp8sdi {
54
151
  max-width: 496px; } }
55
152
 
56
153
  @media all and (max-width: 596px) {
57
- .container-wide.svelte-ahn9t2 {
154
+ .container-wide.svelte-hp8sdi {
58
155
  max-width: 365px; } }
59
156
 
60
157
  @media all and (max-width: 425px) {
61
- .container-wide.svelte-ahn9t2 {
158
+ .container-wide.svelte-hp8sdi {
62
159
  max-width: calc(100% - 60px); } }
63
160
 
64
161
  @media all and (max-width: 375px) {
65
- .container-wide.svelte-ahn9t2 {
162
+ .container-wide.svelte-hp8sdi {
66
163
  max-width: calc(100% - 40px); } }
67
164
 
68
165
  @media all and (max-width: 320px) {
69
- .container-wide.svelte-ahn9t2 {
166
+ .container-wide.svelte-hp8sdi {
70
167
  max-width: calc(100% - 20px); } }
71
168
 
72
- .container-large.svelte-ahn9t2 {
169
+ .container-large.svelte-hp8sdi {
73
170
  width: calc(100% - 20px);
74
171
  max-width: 1280px;
75
172
  margin-left: auto;
@@ -77,34 +174,34 @@
77
174
  transition: max-width ease-out 200ms; }
78
175
 
79
176
  @media all and (max-width: 1440px) {
80
- .container-large.svelte-ahn9t2 {
177
+ .container-large.svelte-hp8sdi {
81
178
  max-width: 884px; } }
82
179
 
83
180
  @media all and (max-width: 1024px) {
84
- .container-large.svelte-ahn9t2 {
181
+ .container-large.svelte-hp8sdi {
85
182
  max-width: 648px; } }
86
183
 
87
184
  @media all and (max-width: 768px) {
88
- .container-large.svelte-ahn9t2 {
185
+ .container-large.svelte-hp8sdi {
89
186
  max-width: 496px; } }
90
187
 
91
188
  @media all and (max-width: 596px) {
92
- .container-large.svelte-ahn9t2 {
189
+ .container-large.svelte-hp8sdi {
93
190
  max-width: 365px; } }
94
191
 
95
192
  @media all and (max-width: 425px) {
96
- .container-large.svelte-ahn9t2 {
193
+ .container-large.svelte-hp8sdi {
97
194
  max-width: calc(100% - 60px); } }
98
195
 
99
196
  @media all and (max-width: 375px) {
100
- .container-large.svelte-ahn9t2 {
197
+ .container-large.svelte-hp8sdi {
101
198
  max-width: calc(100% - 40px); } }
102
199
 
103
200
  @media all and (max-width: 320px) {
104
- .container-large.svelte-ahn9t2 {
201
+ .container-large.svelte-hp8sdi {
105
202
  max-width: calc(100% - 20px); } }
106
203
 
107
- .container-medium.svelte-ahn9t2 {
204
+ .container-medium.svelte-hp8sdi {
108
205
  width: calc(100% - 20px);
109
206
  max-width: 884px;
110
207
  margin-left: auto;
@@ -112,30 +209,30 @@
112
209
  transition: max-width ease-out 200ms; }
113
210
 
114
211
  @media all and (max-width: 1024px) {
115
- .container-medium.svelte-ahn9t2 {
212
+ .container-medium.svelte-hp8sdi {
116
213
  max-width: 648px; } }
117
214
 
118
215
  @media all and (max-width: 768px) {
119
- .container-medium.svelte-ahn9t2 {
216
+ .container-medium.svelte-hp8sdi {
120
217
  max-width: 496px; } }
121
218
 
122
219
  @media all and (max-width: 596px) {
123
- .container-medium.svelte-ahn9t2 {
220
+ .container-medium.svelte-hp8sdi {
124
221
  max-width: 365px; } }
125
222
 
126
223
  @media all and (max-width: 425px) {
127
- .container-medium.svelte-ahn9t2 {
224
+ .container-medium.svelte-hp8sdi {
128
225
  max-width: calc(100% - 60px); } }
129
226
 
130
227
  @media all and (max-width: 375px) {
131
- .container-medium.svelte-ahn9t2 {
228
+ .container-medium.svelte-hp8sdi {
132
229
  max-width: calc(100% - 40px); } }
133
230
 
134
231
  @media all and (max-width: 320px) {
135
- .container-medium.svelte-ahn9t2 {
232
+ .container-medium.svelte-hp8sdi {
136
233
  max-width: calc(100% - 20px); } }
137
234
 
138
- .container-small.svelte-ahn9t2 {
235
+ .container-small.svelte-hp8sdi {
139
236
  width: calc(100% - 20px);
140
237
  max-width: 496px;
141
238
  margin-left: auto;
@@ -143,18 +240,18 @@
143
240
  transition: max-width ease-out 200ms; }
144
241
 
145
242
  @media all and (max-width: 425px) {
146
- .container-small.svelte-ahn9t2 {
243
+ .container-small.svelte-hp8sdi {
147
244
  max-width: calc(100% - 60px); } }
148
245
 
149
246
  @media all and (max-width: 375px) {
150
- .container-small.svelte-ahn9t2 {
247
+ .container-small.svelte-hp8sdi {
151
248
  max-width: calc(100% - 40px); } }
152
249
 
153
250
  @media all and (max-width: 320px) {
154
- .container-small.svelte-ahn9t2 {
251
+ .container-small.svelte-hp8sdi {
155
252
  max-width: calc(100% - 20px); } }
156
253
 
157
- .iroco-ui-button.svelte-ahn9t2 {
254
+ .iroco-ui-button.svelte-hp8sdi {
158
255
  cursor: pointer;
159
256
  -webkit-touch-callout: none;
160
257
  -webkit-user-select: none;
@@ -168,153 +265,86 @@
168
265
  margin: 1em 0em;
169
266
  position: relative; }
170
267
 
171
- .iroco-ui-button--basic.svelte-ahn9t2 {
172
- background: #f2ebe3;
173
- color: #a9a29e; }
174
-
175
- .iroco-ui-button--success.svelte-ahn9t2 {
268
+ .iroco-ui-button--basic.svelte-hp8sdi {
176
269
  background: #00D692; }
177
270
 
178
- .iroco-ui-button--danger.svelte-ahn9t2 {
271
+ .iroco-ui-button--danger.svelte-hp8sdi {
179
272
  background: #ff504d;
180
273
  color: #f2ebe3; }
181
274
 
182
- .iroco-ui-button--regular.svelte-ahn9t2 {
275
+ .iroco-ui-button--regular.svelte-hp8sdi {
183
276
  padding: 1em; }
184
277
 
185
- .iroco-ui-button--small.svelte-ahn9t2 {
278
+ .iroco-ui-button--small.svelte-hp8sdi {
186
279
  padding: 0.5em; }
187
280
 
188
- .iroco-ui-button.svelte-ahn9t2:active {
281
+ .iroco-ui-button.svelte-hp8sdi:active {
189
282
  background: #f5f5f5; }
190
283
 
191
- .iroco-ui-button.disabled.svelte-ahn9t2 {
284
+ .iroco-ui-button.disabled.svelte-hp8sdi {
192
285
  background-color: #f5f5f5;
193
286
  cursor: default; }
194
287
 
195
- .iroco-ui-button.rounded.svelte-ahn9t2 {
288
+ .iroco-ui-button.rounded.svelte-hp8sdi {
196
289
  border-radius: 10px; }
197
290
 
198
- .rotate.svelte-1dns1yx {
199
- animation: svelte-1dns1yx-rotation 2s; }
200
-
201
- .linear.svelte-1dns1yx {
202
- animation-timing-function: linear; }
203
-
204
- .infinite.svelte-1dns1yx {
205
- animation-iteration-count: infinite; }
206
-
207
- @keyframes svelte-1dns1yx-rotation {
208
- from {
209
- transform: rotate(0deg); }
210
- to {
211
- transform: rotate(359deg); } }
212
-
213
- svg.svelte-1cuxg7m {
214
- overflow: visible; }
215
-
216
- input.svelte-11iawkb.svelte-11iawkb {
217
- outline: none;
218
- text-decoration: none;
219
- font-size: 14px; }
220
-
221
- input.svelte-11iawkb.svelte-11iawkb:focus {
222
- outline: none;
223
- text-decoration: none;
224
- font-size: 14px; }
225
-
226
- .iroco-ui-input.svelte-11iawkb.svelte-11iawkb {
227
- display: flex;
228
- flex-direction: column; }
229
-
230
- .iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb {
231
- color: #f2ebe3;
232
- background: #211D28;
233
- border: 1px solid #211D28;
234
- padding: 1em 1.5em;
235
- text-overflow: ellipsis;
236
- white-space: nowrap;
237
- overflow: hidden;
238
- border-radius: 0.5em; }
239
-
240
- .iroco-ui-input.svelte-11iawkb > input.border.svelte-11iawkb {
241
- border: 1px solid #f2ebe3; }
242
-
243
- .iroco-ui-input.svelte-11iawkb > input.svelte-11iawkb::placeholder {
244
- color: rgba(242, 235, 227, 0.5); }
245
-
246
- .iroco-ui-input.svelte-11iawkb > input.error.svelte-11iawkb {
247
- border-color: #ff504d; }
248
-
249
- .iroco-ui-input.svelte-11iawkb > input.readonlyInput.svelte-11iawkb {
250
- cursor: not-allowed; }
251
-
252
- .iroco-ui-input.svelte-11iawkb .error.svelte-11iawkb {
253
- color: #ff504d; }
254
-
255
- .iroco-ui-label.svelte-11iawkb.svelte-11iawkb {
256
- color: rgba(242, 235, 227, 0.6);
257
- font-weight: bold;
258
- padding-bottom: 10px;
259
- display: inline-block; }
260
-
261
- .account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
291
+ .account__navigation.svelte-1jgfrsf.svelte-1jgfrsf {
262
292
  display: block;
263
293
  width: 100%;
264
294
  border-bottom: 1px solid #464452; }
265
295
 
266
- .account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
296
+ .account__navigation--mobile.svelte-1jgfrsf.svelte-1jgfrsf {
267
297
  display: none; }
268
298
 
269
- .account__navigation__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
299
+ .account__navigation__title-container.svelte-1jgfrsf.svelte-1jgfrsf {
270
300
  display: flex;
271
301
  align-items: center;
272
302
  padding-left: 1em; }
273
303
 
274
- .account__navigation__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
304
+ .account__navigation__title-container.svelte-1jgfrsf h1.svelte-1jgfrsf {
275
305
  padding-left: 1em; }
276
306
 
277
307
  @media all and (max-width: 768px) {
278
- .account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
308
+ .account__navigation.svelte-1jgfrsf.svelte-1jgfrsf {
279
309
  display: none;
280
310
  color: #f2ebe3; }
281
- .account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
311
+ .account__navigation--mobile.svelte-1jgfrsf.svelte-1jgfrsf {
282
312
  display: flex;
283
313
  padding: 0 1em;
284
314
  justify-content: space-between;
285
315
  position: fixed;
286
316
  top: 0;
287
- z-index: 1;
288
317
  width: 100%;
289
318
  border-bottom: 1px solid #464452; }
290
- .account__navigation--mobile.svelte-1uu9ytm h1.svelte-1uu9ytm {
319
+ .account__navigation--mobile.svelte-1jgfrsf h1.svelte-1jgfrsf {
291
320
  font: bold;
292
321
  font-size: 2em; }
293
- .account__navigation--mobile__button.svelte-1uu9ytm.svelte-1uu9ytm {
322
+ .account__navigation--mobile__button.svelte-1jgfrsf.svelte-1jgfrsf {
294
323
  background-color: transparent;
295
324
  border: none;
296
325
  color: #464452; }
297
- .account__navigation--mobile__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
326
+ .account__navigation--mobile__title-container.svelte-1jgfrsf.svelte-1jgfrsf {
298
327
  display: flex;
299
328
  align-items: center; }
300
- .account__navigation--mobile__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
329
+ .account__navigation--mobile__title-container.svelte-1jgfrsf h1.svelte-1jgfrsf {
301
330
  padding-left: 0.5em; } }
302
331
 
303
- .account__sidebar.svelte-jkys2k.svelte-jkys2k {
332
+ .account__sidebar.svelte-1rx212l.svelte-1rx212l {
304
333
  height: 100%;
305
334
  width: 300px;
306
335
  position: absolute;
307
336
  top: 70px;
337
+ z-index: 1;
308
338
  overflow-x: hidden;
309
339
  border-right: 1px solid #464452; }
310
340
 
311
- .account__sidebar__item_container.svelte-jkys2k.svelte-jkys2k {
341
+ .account__sidebar__item_container.svelte-1rx212l.svelte-1rx212l {
312
342
  margin: 0;
313
343
  padding: 0;
314
344
  width: 100%;
315
345
  height: 100%; }
316
346
 
317
- .account__sidebar__item.svelte-jkys2k.svelte-jkys2k {
347
+ .account__sidebar__item.svelte-1rx212l.svelte-1rx212l {
318
348
  padding: 2em 2em;
319
349
  text-decoration: none;
320
350
  font-size: 0.75em;
@@ -323,19 +353,19 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
323
353
  border-bottom: 1px solid #464452 a;
324
354
  border-bottom-padding-left: 1em; }
325
355
 
326
- .account__sidebar__item.svelte-jkys2k a.svelte-jkys2k {
356
+ .account__sidebar__item.svelte-1rx212l a.svelte-1rx212l {
327
357
  color: #f2ebe3;
328
358
  font-size: 2em; }
329
359
 
330
- .account__sidebar__close.svelte-jkys2k.svelte-jkys2k {
360
+ .account__sidebar__close.svelte-1rx212l.svelte-1rx212l {
331
361
  display: none; }
332
362
 
333
- .account__sidebar.svelte-jkys2k .active.svelte-jkys2k {
363
+ .account__sidebar.svelte-1rx212l .active.svelte-1rx212l {
334
364
  border-top: 1px solid #00D692;
335
365
  border-bottom: 1px solid #00D692; }
336
366
 
337
367
  @media all and (max-width: 768px) {
338
- .account__sidebar.svelte-jkys2k.svelte-jkys2k {
368
+ .account__sidebar.svelte-1rx212l.svelte-1rx212l {
339
369
  position: fixed;
340
370
  background-color: #211D28;
341
371
  top: 0;
@@ -345,10 +375,10 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
345
375
  padding-top: 2em;
346
376
  margin: 0;
347
377
  border-right: none; }
348
- .account__sidebar__item_container.svelte-jkys2k.svelte-jkys2k {
378
+ .account__sidebar__item_container.svelte-1rx212l.svelte-1rx212l {
349
379
  padding: 0em;
350
380
  margin-top: 2rem; }
351
- .account__sidebar__close.svelte-jkys2k.svelte-jkys2k {
381
+ .account__sidebar__close.svelte-1rx212l.svelte-1rx212l {
352
382
  display: block;
353
383
  position: absolute;
354
384
  right: 0;
@@ -362,36 +392,3 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
362
392
  @use "fonts";
363
393
  @use "forms";
364
394
  @use "layouts";
365
- .data-table.svelte-1ju5y8t {
366
- border: 1px solid #464452;
367
- width: 100%; }
368
-
369
- .data-table__header.svelte-1ju5y8t {
370
- font-size: 1.5em;
371
- height: 4rem; }
372
-
373
- .data-table__header__cell.svelte-1ju5y8t {
374
- border-bottom: 1px solid #464452; }
375
-
376
- .data-table__body__cell.svelte-1ju5y8t {
377
- text-align: center;
378
- vertical-align: middle; }
379
-
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "0.9.3",
3
+ "version": "0.10.0",
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
@@ -43,6 +43,7 @@
43
43
  &--basic {
44
44
  background: colors.$beige;
45
45
  color: colors.$darkBeige;
46
+ border: 1px solid colors.$nightBlue;
46
47
  }
47
48
  &--success {
48
49
  background: colors.$green;