@wizco/fenixds-core 1.5.2 → 1.5.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 (4) hide show
  1. package/package.json +1 -1
  2. package/styles/core.css +48 -4
  3. package/styles/scss/forms.scss +1 -0
  4. package/styles/scss/tags.scss +79 -2
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.5.2",
4
+ "version": "1.5.3",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "author": "Raul Melo Fernandez",
package/styles/core.css CHANGED
@@ -1292,7 +1292,8 @@ label.form-check, .form-check {
1292
1292
  transition: all 0.3s;
1293
1293
  container-type: inline-size;
1294
1294
  overflow: hidden;
1295
- min-width: max-content; }
1295
+ min-width: max-content;
1296
+ position: relative; }
1296
1297
  .wco-form-upload:has(input[type="file"]:not(:disabled)):not(.wco-form-disabled):hover {
1297
1298
  border-color: var(--wco-attachment-hover-color-border);
1298
1299
  background-color: var(--wco-attachment-hover-color-bg); }
@@ -1491,6 +1492,8 @@ label.form-check, .form-check {
1491
1492
  --wco-tag-border-radius: var(--wco-radius-lg, 24px);
1492
1493
  --wco-tag-border-color: var(--wco-color-neutral-700);
1493
1494
  --wco-tag-font-size: var(--wco-font-size-xxs, 14px);
1495
+ --wco-tag-icon-size: var(--wco-icon-size-small);
1496
+ --wco-tag-icon-color: var(--wco-color-neutral-700);
1494
1497
  font-size: var(--wco-tag-font-size, 14px);
1495
1498
  color: var(--wco-tag-color, #333);
1496
1499
  background-color: var(--wco-tag-background-color, #fff);
@@ -1512,10 +1515,34 @@ label.form-check, .form-check {
1512
1515
  text-wrap: nowrap; }
1513
1516
  .wco-tag span,
1514
1517
  .wco-tag i {
1515
- --wco-tag-icon-size: var(--wco-icon-size-small);
1516
- --wco-tag-icon-color: var(--wco-color-neutral-700);
1517
1518
  color: var(--wco-tag-icon-color);
1518
- font-size: var(--wco-tag-icon-size, 14px); }
1519
+ font-size: var(--wco-tag-icon-size, 14px);
1520
+ line-height: 150%; }
1521
+ .wco-tag.tag-icon-toggle {
1522
+ position: relative;
1523
+ padding-inline-end: calc(var(--wco-spacing-xxxs) + 2px); }
1524
+ .wco-tag.tag-icon-toggle > i, .wco-tag.tag-icon-toggle > span, .wco-tag.tag-icon-toggle > button {
1525
+ position: absolute;
1526
+ right: -4px;
1527
+ height: 100%;
1528
+ opacity: 0;
1529
+ display: inline-flex;
1530
+ align-items: center;
1531
+ width: min-content;
1532
+ visibility: hidden;
1533
+ --wco-tag-icon-size: calc(var(--wco-tag-font-size) - 2px);
1534
+ transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, right 0.2s ease-in-out; }
1535
+ .wco-tag.tag-icon-toggle:has(button:last-child):hover > button {
1536
+ cursor: pointer;
1537
+ opacity: 1;
1538
+ visibility: visible;
1539
+ right: 2px; }
1540
+ .wco-tag.tag-icon-toggle:is(button, a):not(:disabled) {
1541
+ cursor: pointer; }
1542
+ .wco-tag.tag-icon-toggle:is(button, a):not(:disabled):hover i, .wco-tag.tag-icon-toggle:is(button, a):not(:disabled):hover span {
1543
+ opacity: 1;
1544
+ visibility: visible;
1545
+ right: 2px; }
1519
1546
 
1520
1547
  .tag-success {
1521
1548
  --wco-tag-color: var(--wco-color-success-700);
@@ -1558,6 +1585,23 @@ label.form-check, .form-check {
1558
1585
  .tag-disabled i {
1559
1586
  --wco-tag-icon-color: var(--wco-color-neutral-500); }
1560
1587
 
1588
+ .tag-basic {
1589
+ --wco-tag-size: 28px;
1590
+ --wco-tag-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
1591
+ --wco-tag-gap: var(--wco-spacing-quark, 4px);
1592
+ --wco-tag-color: var(--wco-color-neutral-900);
1593
+ --wco-tag-background-color: var(--wco-color-neutral-100);
1594
+ --wco-tag-border-radius: var(--wco-radius-nano, 8px);
1595
+ --wco-tag-border-color: transparent; }
1596
+ .tag-basic span, .tag-basic i {
1597
+ font-size: calc(var(--wco-tag-font-size) - 2px); }
1598
+ .tag-basic:is(button):disabled {
1599
+ --wco-tag-background-color: var(--wco-color-neutral-300); }
1600
+ .tag-basic:not(.tag-icon-toggle):has(i:last-child) {
1601
+ padding-right: var(--wco-spacing-quark); }
1602
+ .tag-basic:not(.tag-icon-toggle):has(i:first-child) {
1603
+ padding-left: var(--wco-spacing-quark); }
1604
+
1561
1605
  .wco-group-tags {
1562
1606
  display: flex;
1563
1607
  flex-wrap: wrap;
package/styles/scss/forms.scss CHANGED
@@ -612,6 +612,7 @@ label.form-check, .form-check {
612
612
  container-type: inline-size;
613
613
  overflow: hidden;
614
614
  min-width: max-content;
615
+ position: relative;
615
616
  &:has(input[type="file"]:not(:disabled)) {
616
617
  &:not(.wco-form-disabled) {
617
618
  &:hover {
package/styles/scss/tags.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  --wco-tag-border-radius: var(--wco-radius-lg, 24px);
8
8
  --wco-tag-border-color: var(--wco-color-neutral-700);
9
9
  --wco-tag-font-size: var(--wco-font-size-xxs, 14px);
10
+ --wco-tag-icon-size: var(--wco-icon-size-small);
11
+ --wco-tag-icon-color: var(--wco-color-neutral-700);
10
12
  font-size: var(--wco-tag-font-size, 14px);
11
13
  color: var(--wco-tag-color, #333);
12
14
  background-color: var(--wco-tag-background-color, #fff);
@@ -28,14 +30,60 @@
28
30
  text-wrap: nowrap;
29
31
  span,
30
32
  i {
31
- --wco-tag-icon-size: var(--wco-icon-size-small);
32
- --wco-tag-icon-color: var(--wco-color-neutral-700);
33
33
  color: var(--wco-tag-icon-color);
34
34
  font-size: var(--wco-tag-icon-size, 14px);
35
+ line-height: 150%;
36
+ }
37
+
38
+
39
+
40
+ //////////////////////////////////////
41
+ /// Comportamento do ícone hiden/show
42
+ //////////////////////////////////////
43
+ &.tag-icon-toggle {
44
+ position: relative;
45
+ padding-inline-end: calc(var(--wco-spacing-xxxs) + 2px);
46
+ > i, > span, > button {
47
+ position: absolute;
48
+ right: -4px;
49
+ height: 100%;
50
+ opacity: 0;
51
+ display: inline-flex;
52
+ align-items: center;
53
+ width: min-content;
54
+ visibility: hidden;
55
+ --wco-tag-icon-size: calc(var(--wco-tag-font-size) - 2px);
56
+ transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, right 0.2s ease-in-out;
57
+ }
58
+ &:has(button:last-child) {
59
+ &:hover {
60
+ > button {
61
+ cursor: pointer;
62
+ opacity: 1;
63
+ visibility: visible;
64
+ right: 2px;
65
+ }
66
+ }
67
+ }
68
+ &:is(button, a) {
69
+ &:not(:disabled) {
70
+ cursor: pointer;
71
+ &:hover {
72
+ i, span {
73
+ opacity: 1;
74
+ visibility: visible;
75
+ right: 2px;
76
+ }
77
+ }
78
+ }
79
+ }
35
80
  }
36
81
  }
37
82
 
38
83
  .tag {
84
+ //////////
85
+ // COLORS
86
+ //////////
39
87
  &-success {
40
88
  --wco-tag-color: var(--wco-color-success-700);
41
89
  --wco-tag-border-color: var(--wco-color-success-700);
@@ -86,6 +134,35 @@
86
134
  --wco-tag-icon-color: var(--wco-color-neutral-500);
87
135
  }
88
136
  }
137
+
138
+ //////////
139
+ // SIZES
140
+ //////////
141
+ &-basic {
142
+ --wco-tag-size: 28px;
143
+ --wco-tag-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
144
+ --wco-tag-gap: var(--wco-spacing-quark, 4px);
145
+ --wco-tag-color: var(--wco-color-neutral-900);
146
+ --wco-tag-background-color: var(--wco-color-neutral-100);
147
+ --wco-tag-border-radius: var(--wco-radius-nano, 8px);
148
+ --wco-tag-border-color: transparent;
149
+ span, i {
150
+ font-size: calc(var(--wco-tag-font-size) - 2px);
151
+ }
152
+ &:is(button) {
153
+ &:disabled {
154
+ --wco-tag-background-color: var(--wco-color-neutral-300);
155
+ }
156
+ }
157
+ &:not(.tag-icon-toggle){
158
+ &:has(i:last-child) {
159
+ padding-right: var(--wco-spacing-quark);
160
+ }
161
+ &:has(i:first-child) {
162
+ padding-left: var(--wco-spacing-quark);
163
+ }
164
+ }
165
+ }
89
166
  }
90
167
 
91
168
  .wco-group-tags {