@wizco/fenixds-core 1.6.2 → 1.6.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.
- package/package.json +1 -1
- package/styles/core.css +43 -0
- package/styles/scss/animations.scss +38 -13
- package/styles/scss/core.scss +1 -0
- package/styles/scss/subtabs.scss +33 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wizco/fenixds-core",
|
|
3
3
|
"description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
|
|
4
|
-
"version": "1.6.
|
|
4
|
+
"version": "1.6.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "Raul Melo Fernandez",
|
package/styles/core.css
CHANGED
|
@@ -371,6 +371,7 @@
|
|
|
371
371
|
to {
|
|
372
372
|
background-position: 500px 0; } }
|
|
373
373
|
|
|
374
|
+
.wco-skeleton:empty,
|
|
374
375
|
.wco-skeleton *:empty {
|
|
375
376
|
background: #f6f7f8;
|
|
376
377
|
background-position: -500px 0;
|
|
@@ -379,6 +380,22 @@
|
|
|
379
380
|
background-repeat: no-repeat;
|
|
380
381
|
background-size: 1000px 100%; }
|
|
381
382
|
|
|
383
|
+
@keyframes wco-spin {
|
|
384
|
+
0% {
|
|
385
|
+
transform: rotate(0deg); }
|
|
386
|
+
100% {
|
|
387
|
+
transform: rotate(360deg); } }
|
|
388
|
+
|
|
389
|
+
.wco-spinner {
|
|
390
|
+
width: 48px;
|
|
391
|
+
height: 48px;
|
|
392
|
+
border: 5px solid var(--wco-color-primary-500);
|
|
393
|
+
border-bottom-color: transparent;
|
|
394
|
+
border-radius: 50%;
|
|
395
|
+
display: inline-block;
|
|
396
|
+
box-sizing: border-box;
|
|
397
|
+
animation: wco-spin 1s linear infinite; }
|
|
398
|
+
|
|
382
399
|
button.wco-btn,
|
|
383
400
|
a.wco-btn,
|
|
384
401
|
button.btn,
|
|
@@ -1803,6 +1820,32 @@ dialog.wco-modal {
|
|
|
1803
1820
|
background-color: rgba(0, 0, 0, 0.5);
|
|
1804
1821
|
transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete, background-color 0.1s; }
|
|
1805
1822
|
|
|
1823
|
+
.wco-subtabs {
|
|
1824
|
+
display: grid;
|
|
1825
|
+
grid-auto-flow: column;
|
|
1826
|
+
grid-auto-columns: 1fr;
|
|
1827
|
+
background: #e5e5e5;
|
|
1828
|
+
border-radius: 8px;
|
|
1829
|
+
padding: 4px;
|
|
1830
|
+
width: fit-content; }
|
|
1831
|
+
.wco-subtabs > * {
|
|
1832
|
+
text-align: center;
|
|
1833
|
+
padding: 6px 12px;
|
|
1834
|
+
background: transparent;
|
|
1835
|
+
border: none;
|
|
1836
|
+
cursor: pointer;
|
|
1837
|
+
font-size: var(--wco-font-size-xs);
|
|
1838
|
+
font-weight: 500;
|
|
1839
|
+
color: var(--wco-color-neutral-700);
|
|
1840
|
+
border-radius: 6px;
|
|
1841
|
+
transition: background 0.25s ease, color 0.2s ease; }
|
|
1842
|
+
.wco-subtabs > *.wco-subtab-selected {
|
|
1843
|
+
background: white;
|
|
1844
|
+
color: var(--wco-color-neutral-900);
|
|
1845
|
+
font-weight: 600; }
|
|
1846
|
+
.wco-subtabs > *:hover:not(.wco-subtab-selected) {
|
|
1847
|
+
background: rgba(255, 255, 255, 0.4); }
|
|
1848
|
+
|
|
1806
1849
|
.m-none {
|
|
1807
1850
|
margin: var(--wco-spacing-none); }
|
|
1808
1851
|
|
|
@@ -1,16 +1,41 @@
|
|
|
1
1
|
@keyframes skeletonShine {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
to {
|
|
3
|
+
background-position: 500px 0;
|
|
4
|
+
}
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.wco-skeleton
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
.wco-skeleton:empty,
|
|
8
|
+
.wco-skeleton *:empty {
|
|
9
|
+
background: #f6f7f8;
|
|
10
|
+
background-position: -500px 0;
|
|
11
|
+
animation: skeletonShine 1s linear 0s infinite normal forwards;
|
|
12
|
+
background-image: linear-gradient(
|
|
13
|
+
135deg,
|
|
14
|
+
#f6f7f8 0%,
|
|
15
|
+
#edeef1 20%,
|
|
16
|
+
#f6f7f8 40%,
|
|
17
|
+
#f6f7f8 100%
|
|
18
|
+
);
|
|
19
|
+
background-repeat: no-repeat;
|
|
20
|
+
background-size: 1000px 100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes wco-spin {
|
|
24
|
+
0% {
|
|
25
|
+
transform: rotate(0deg);
|
|
26
|
+
}
|
|
27
|
+
100% {
|
|
28
|
+
transform: rotate(360deg);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.wco-spinner {
|
|
33
|
+
width: 48px;
|
|
34
|
+
height: 48px;
|
|
35
|
+
border: 5px solid var(--wco-color-primary-500);
|
|
36
|
+
border-bottom-color: transparent;
|
|
37
|
+
border-radius: 50%;
|
|
38
|
+
display: inline-block;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
animation: wco-spin 1s linear infinite;
|
|
41
|
+
}
|
package/styles/scss/core.scss
CHANGED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.wco-subtabs {
|
|
2
|
+
display: grid;
|
|
3
|
+
grid-auto-flow: column;
|
|
4
|
+
grid-auto-columns: 1fr;
|
|
5
|
+
background: #e5e5e5;
|
|
6
|
+
border-radius: 8px;
|
|
7
|
+
padding: 4px;
|
|
8
|
+
width: fit-content;
|
|
9
|
+
|
|
10
|
+
> * {
|
|
11
|
+
text-align: center;
|
|
12
|
+
padding: 6px 12px;
|
|
13
|
+
background: transparent;
|
|
14
|
+
border: none;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
font-size: var(--wco-font-size-xs);
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
color: var(--wco-color-neutral-700);
|
|
19
|
+
border-radius: 6px;
|
|
20
|
+
|
|
21
|
+
transition: background 0.25s ease, color 0.2s ease;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
> *.wco-subtab-selected {
|
|
25
|
+
background: white;
|
|
26
|
+
color: var(--wco-color-neutral-900);
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
> *:hover:not(.wco-subtab-selected) {
|
|
31
|
+
background: rgba(255,255,255,0.4);
|
|
32
|
+
}
|
|
33
|
+
}
|