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