@wizco/fenixds-core 1.3.2 → 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 +72 -0
- package/styles/scss/core.scss +1 -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
|
@@ -1558,6 +1558,78 @@ label.form-check, .form-check {
|
|
|
1558
1558
|
flex-wrap: wrap;
|
|
1559
1559
|
gap: var(--wco-spacing-nano, 12px); }
|
|
1560
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
|
+
|
|
1561
1633
|
.m-none {
|
|
1562
1634
|
margin: var(--wco-spacing-none); }
|
|
1563
1635
|
|
package/styles/scss/core.scss
CHANGED
|
@@ -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
|
+
}
|