@wizco/fenixds-core 1.3.1 → 1.4.2
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 +76 -2
- package/styles/scss/button.scss +1 -1
- package/styles/scss/core.scss +1 -1
- package/styles/scss/forms.scss +2 -1
- package/styles/scss/modal.scss +85 -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.
|
|
4
|
+
"version": "1.4.2",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "Raul Melo Fernandez",
|
package/styles/core.css
CHANGED
|
@@ -625,7 +625,7 @@ a.btn {
|
|
|
625
625
|
button.btn.btn-outline:disabled,
|
|
626
626
|
a.btn.btn-outline:disabled {
|
|
627
627
|
background-color: transparent;
|
|
628
|
-
--textBtn: var(--wco-color-neutral-
|
|
628
|
+
--textBtn: var(--wco-color-neutral-700);
|
|
629
629
|
--bgBtn: var(--wco-color-neutral-700); }
|
|
630
630
|
button.wco-btn.btn-loading,
|
|
631
631
|
a.wco-btn.btn-loading,
|
|
@@ -744,12 +744,14 @@ a.btn {
|
|
|
744
744
|
.wco-form-field input:required + label::after,
|
|
745
745
|
.wco-form-field textarea:required + label::after,
|
|
746
746
|
.wco-form-field input:invalid:not(:placeholder-shown):required + label,
|
|
747
|
+
.wco-form-field .form-field__input.multiSelect.required + label::after,
|
|
747
748
|
.form-field:has(input:required) label::after,
|
|
748
749
|
.form-field:has(select:required) label::after,
|
|
749
750
|
.form-field:has(textarea:required) label::after,
|
|
750
751
|
.form-field input:required + label::after,
|
|
751
752
|
.form-field textarea:required + label::after,
|
|
752
|
-
.form-field input:invalid:not(:placeholder-shown):required + label
|
|
753
|
+
.form-field input:invalid:not(:placeholder-shown):required + label,
|
|
754
|
+
.form-field .form-field__input.multiSelect.required + label::after {
|
|
753
755
|
content: " *";
|
|
754
756
|
color: var(--wco-input-color-required); }
|
|
755
757
|
.wco-form-field .form-field__input,
|
|
@@ -1556,6 +1558,78 @@ label.form-check, .form-check {
|
|
|
1556
1558
|
flex-wrap: wrap;
|
|
1557
1559
|
gap: var(--wco-spacing-nano, 12px); }
|
|
1558
1560
|
|
|
1561
|
+
dialog.wco-modal {
|
|
1562
|
+
--wco-modal-size: 640px;
|
|
1563
|
+
--wco-modal-padding: var(--wco-spacing-xl) var(--wco-spacing-md);
|
|
1564
|
+
--wco-modal-bg: var(--wco-color-neutral-50);
|
|
1565
|
+
--wco-modal-border-radius: var(--wco-radius-sm);
|
|
1566
|
+
--wco-modal-shadow: var(--wco-shadow-level-2);
|
|
1567
|
+
--wco-animate-modal-top: 10px;
|
|
1568
|
+
--wco-animate-modal-opacity: 0;
|
|
1569
|
+
background-color: transparent;
|
|
1570
|
+
box-shadow: none;
|
|
1571
|
+
container-name: modalWco;
|
|
1572
|
+
container-type: inline-size;
|
|
1573
|
+
border: none;
|
|
1574
|
+
place-items: center;
|
|
1575
|
+
max-width: 100vw;
|
|
1576
|
+
max-height: 100vh;
|
|
1577
|
+
width: 100%;
|
|
1578
|
+
height: 100%;
|
|
1579
|
+
display: none;
|
|
1580
|
+
transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete, transform 0.7s ease-in-out allow-discrete; }
|
|
1581
|
+
dialog.wco-modal[open] {
|
|
1582
|
+
display: grid; }
|
|
1583
|
+
dialog.wco-modal[open] main {
|
|
1584
|
+
margin: var(--wco-spacing-lg);
|
|
1585
|
+
--wco-animate-modal-top: 0;
|
|
1586
|
+
--wco-animate-modal-opacity: 1;
|
|
1587
|
+
transition: all 300ms ease-in-out allow-discrete; }
|
|
1588
|
+
@media screen and (max-width: 768px) {
|
|
1589
|
+
dialog.wco-modal[open] main {
|
|
1590
|
+
margin: 0; } }
|
|
1591
|
+
|
|
1592
|
+
@starting-style {
|
|
1593
|
+
dialog.wco-modal[open] main {
|
|
1594
|
+
--wco-animate-modal-top: 10px;
|
|
1595
|
+
--wco-animate-modal-opacity: 0; } }
|
|
1596
|
+
dialog.wco-modal > main {
|
|
1597
|
+
position: relative;
|
|
1598
|
+
min-width: var(--wco-modal-size);
|
|
1599
|
+
width: min-content;
|
|
1600
|
+
background-color: var(--wco-modal-bg);
|
|
1601
|
+
border-radius: var(--wco-modal-border-radius);
|
|
1602
|
+
box-shadow: var(--wco-modal-shadow);
|
|
1603
|
+
padding: var(--wco-modal-padding);
|
|
1604
|
+
display: flex;
|
|
1605
|
+
flex-direction: column;
|
|
1606
|
+
opacity: var(--wco-animate-modal-opacity);
|
|
1607
|
+
transform: translateY(var(--wco-animate-modal-top));
|
|
1608
|
+
transition: all 0.4s ease-in-out; }
|
|
1609
|
+
@media screen and (max-width: 768px) {
|
|
1610
|
+
dialog.wco-modal > main {
|
|
1611
|
+
--wco-modal-size: calc(100vw - var(--wco-spacing-md));
|
|
1612
|
+
--wco-modal-padding: var(--wco-spacing-xs) var(--wco-spacing-xxs); } }
|
|
1613
|
+
@media screen and (max-width: 550px) {
|
|
1614
|
+
dialog.wco-modal > main {
|
|
1615
|
+
--wco-modal-padding: var(--wco-spacing-xxxs) var(--wco-spacing-nano); } }
|
|
1616
|
+
dialog.wco-modal button.wco-modal--close {
|
|
1617
|
+
padding: var(--wco-spacing-nano);
|
|
1618
|
+
position: absolute;
|
|
1619
|
+
top: 0;
|
|
1620
|
+
right: 0;
|
|
1621
|
+
background: none;
|
|
1622
|
+
border: none;
|
|
1623
|
+
cursor: pointer;
|
|
1624
|
+
font-size: var(--wco-font-size-md);
|
|
1625
|
+
color: var(--wco-color-primary-700);
|
|
1626
|
+
transition: color 0.3s; }
|
|
1627
|
+
dialog.wco-modal button.wco-modal--close:hover {
|
|
1628
|
+
color: var(--wco-color-primary-500); }
|
|
1629
|
+
dialog.wco-modal::backdrop {
|
|
1630
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
1631
|
+
transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete, background-color 0.1s; }
|
|
1632
|
+
|
|
1559
1633
|
.m-none {
|
|
1560
1634
|
margin: var(--wco-spacing-none); }
|
|
1561
1635
|
|
package/styles/scss/button.scss
CHANGED
package/styles/scss/core.scss
CHANGED
package/styles/scss/forms.scss
CHANGED
|
@@ -34,7 +34,8 @@
|
|
|
34
34
|
&:has(textarea:required) label::after,
|
|
35
35
|
input:required+label::after,
|
|
36
36
|
textarea:required+label::after,
|
|
37
|
-
input:invalid:not(:placeholder-shown):required+label
|
|
37
|
+
input:invalid:not(:placeholder-shown):required+label,
|
|
38
|
+
.form-field__input.multiSelect.required+label::after{
|
|
38
39
|
content: " *";
|
|
39
40
|
color: var(--wco-input-color-required);
|
|
40
41
|
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
dialog.wco-modal {
|
|
2
|
+
--wco-modal-size: 640px;
|
|
3
|
+
--wco-modal-padding: var(--wco-spacing-xl) var(--wco-spacing-md);
|
|
4
|
+
--wco-modal-bg: var(--wco-color-neutral-50);
|
|
5
|
+
--wco-modal-border-radius: var(--wco-radius-sm);
|
|
6
|
+
--wco-modal-shadow: var(--wco-shadow-level-2);
|
|
7
|
+
--wco-animate-modal-top: 10px;
|
|
8
|
+
--wco-animate-modal-opacity: 0;
|
|
9
|
+
background-color: transparent;
|
|
10
|
+
box-shadow: none;
|
|
11
|
+
container-name: modalWco;
|
|
12
|
+
container-type: inline-size;
|
|
13
|
+
border: none;
|
|
14
|
+
place-items: center;
|
|
15
|
+
max-width: 100vw;
|
|
16
|
+
max-height: 100vh;
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
display: none;
|
|
20
|
+
transition:
|
|
21
|
+
display 0.7s allow-discrete,
|
|
22
|
+
overlay 0.7s allow-discrete,
|
|
23
|
+
transform 0.7s ease-in-out allow-discrete;
|
|
24
|
+
&[open] {
|
|
25
|
+
display: grid;
|
|
26
|
+
main {
|
|
27
|
+
margin: var(--wco-spacing-lg);
|
|
28
|
+
--wco-animate-modal-top: 0;
|
|
29
|
+
--wco-animate-modal-opacity: 1;
|
|
30
|
+
transition: all 300ms ease-in-out allow-discrete;
|
|
31
|
+
@media screen and (max-width: 768px){
|
|
32
|
+
margin: 0;
|
|
33
|
+
}
|
|
34
|
+
@starting-style {
|
|
35
|
+
--wco-animate-modal-top: 10px;
|
|
36
|
+
--wco-animate-modal-opacity: 0;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
> main {
|
|
41
|
+
position: relative;
|
|
42
|
+
min-width: var(--wco-modal-size);
|
|
43
|
+
width: min-content;
|
|
44
|
+
background-color: var(--wco-modal-bg);
|
|
45
|
+
border-radius: var(--wco-modal-border-radius);
|
|
46
|
+
box-shadow: var(--wco-modal-shadow);
|
|
47
|
+
padding: var(--wco-modal-padding);
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
opacity: var(--wco-animate-modal-opacity);
|
|
51
|
+
transform: translateY(var(--wco-animate-modal-top));
|
|
52
|
+
transition: all 0.4s ease-in-out;
|
|
53
|
+
@media screen and (max-width: 768px){
|
|
54
|
+
--wco-modal-size: calc(100vw - var(--wco-spacing-md));
|
|
55
|
+
--wco-modal-padding: var(--wco-spacing-xs) var(--wco-spacing-xxs);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@media screen and (max-width: 550px){
|
|
59
|
+
--wco-modal-padding: var(--wco-spacing-xxxs) var(--wco-spacing-nano);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
}
|
|
63
|
+
button.wco-modal--close {
|
|
64
|
+
padding: var(--wco-spacing-nano);
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 0;
|
|
67
|
+
right: 0;
|
|
68
|
+
background: none;
|
|
69
|
+
border: none;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
font-size: var(--wco-font-size-md);
|
|
72
|
+
color: var(--wco-color-primary-700);
|
|
73
|
+
transition: color 0.3s;
|
|
74
|
+
&:hover {
|
|
75
|
+
color: var(--wco-color-primary-500);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
&::backdrop {
|
|
79
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
80
|
+
transition:
|
|
81
|
+
display 0.1s allow-discrete,
|
|
82
|
+
overlay 0.1s allow-discrete,
|
|
83
|
+
background-color 0.1s;
|
|
84
|
+
}
|
|
85
|
+
}
|