@iroco/ui 0.9.2 → 0.9.3

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