@wizco/fenixds-core 1.0.5 → 1.0.6
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 +3 -3
- package/styles/core.css +11 -4
- package/styles/scss/button.scss +4 -2
- package/styles/scss/forms.scss +5 -1
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.0.
|
|
4
|
+
"version": "1.0.6",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "Raul Melo Fernandez",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
|
-
"@angular/common": "
|
|
14
|
-
"@angular/core": "
|
|
13
|
+
"@angular/common": "16.x",
|
|
14
|
+
"@angular/core": "16.x",
|
|
15
15
|
"node-sass": "^7.0.3"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
package/styles/core.css
CHANGED
|
@@ -356,6 +356,9 @@
|
|
|
356
356
|
transform: translateY(-50%);
|
|
357
357
|
background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93, 118, 137, 0) 44%);
|
|
358
358
|
color: var(--wco-input-color-label);
|
|
359
|
+
font-family: var(--wco-input-font);
|
|
360
|
+
font-size: var(--wco-input-size);
|
|
361
|
+
font-weight: 400;
|
|
359
362
|
padding: 0 4px;
|
|
360
363
|
margin-left: 20px;
|
|
361
364
|
transition: 100ms linear;
|
|
@@ -363,7 +366,7 @@
|
|
|
363
366
|
pointer-events: none; }
|
|
364
367
|
.form-field:has(input:focus, textarea:focus, select:focus) {
|
|
365
368
|
--wco-input-color-label: var(--wco-color-primary-700);
|
|
366
|
-
--wco-input-color-outline: var(--wco-color-primary-
|
|
369
|
+
--wco-input-color-outline: var(--wco-color-primary-700);
|
|
367
370
|
--wco-input-color-icon: var(--wco-color-primary-600);
|
|
368
371
|
--wco-input-color-text: var(--wco-color-neutral-900);
|
|
369
372
|
--wco-input-color-placeholder: var(--wco-color-neutral-600);
|
|
@@ -408,7 +411,8 @@
|
|
|
408
411
|
.form-field textarea:not(:placeholder-shown) + label,
|
|
409
412
|
.form-field input:not(:placeholder-shown) + label {
|
|
410
413
|
top: 0;
|
|
411
|
-
transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
|
|
414
|
+
transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
|
|
415
|
+
font-weight: 500; }
|
|
412
416
|
.form-field textarea:not(:focus)::placeholder,
|
|
413
417
|
.form-field input:not(:focus)::placeholder {
|
|
414
418
|
opacity: 0; }
|
|
@@ -572,9 +576,11 @@ a.btn {
|
|
|
572
576
|
position: relative;
|
|
573
577
|
border: none;
|
|
574
578
|
width: fit-content;
|
|
575
|
-
letter-spacing:
|
|
579
|
+
letter-spacing: 0.4px;
|
|
576
580
|
transition: all 300ms ease-in-out, outline 0ms linear;
|
|
577
|
-
cursor: pointer;
|
|
581
|
+
cursor: pointer;
|
|
582
|
+
text-decoration: none;
|
|
583
|
+
font-family: var(--wco-font-family); }
|
|
578
584
|
button.btn:focus-visible,
|
|
579
585
|
a.btn:focus-visible {
|
|
580
586
|
outline: 2px solid var(--btn-focus, var(--textBtn)); }
|
|
@@ -718,6 +724,7 @@ a.btn {
|
|
|
718
724
|
button.btn.btn-sm,
|
|
719
725
|
a.btn.btn-sm {
|
|
720
726
|
--btn-min-h: 32px;
|
|
727
|
+
--btn-size: 14px;
|
|
721
728
|
--btn-padding: 4px 16px; }
|
|
722
729
|
button.btn.btn-outline,
|
|
723
730
|
a.btn.btn-outline {
|
package/styles/scss/button.scss
CHANGED
|
@@ -12,10 +12,11 @@ a.btn {
|
|
|
12
12
|
position: relative;
|
|
13
13
|
border: none;
|
|
14
14
|
width: fit-content;
|
|
15
|
-
letter-spacing:
|
|
15
|
+
letter-spacing: 0.4px;
|
|
16
16
|
transition: all 300ms ease-in-out, outline 0ms linear;
|
|
17
17
|
cursor: pointer;
|
|
18
|
-
|
|
18
|
+
text-decoration: none;
|
|
19
|
+
font-family: var(--wco-font-family);
|
|
19
20
|
// &:focus-within:not(:active),
|
|
20
21
|
&:focus-visible {
|
|
21
22
|
outline: 2px solid var(--btn-focus, var(--textBtn));
|
|
@@ -195,6 +196,7 @@ a.btn {
|
|
|
195
196
|
|
|
196
197
|
&.btn-sm {
|
|
197
198
|
--btn-min-h: 32px;
|
|
199
|
+
--btn-size: 14px;
|
|
198
200
|
--btn-padding: 4px 16px;
|
|
199
201
|
}
|
|
200
202
|
|
package/styles/scss/forms.scss
CHANGED
|
@@ -79,6 +79,9 @@
|
|
|
79
79
|
transform: translateY(-50%);
|
|
80
80
|
background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93,118,137,0) 44%);
|
|
81
81
|
color: var(--wco-input-color-label);
|
|
82
|
+
font-family: var(--wco-input-font);
|
|
83
|
+
font-size: var(--wco-input-size);
|
|
84
|
+
font-weight: 400;
|
|
82
85
|
padding: 0 4px;
|
|
83
86
|
margin-left: 20px;
|
|
84
87
|
transition: 100ms linear;
|
|
@@ -90,7 +93,7 @@
|
|
|
90
93
|
/// Focus
|
|
91
94
|
&:has(input:focus, textarea:focus, select:focus) {
|
|
92
95
|
--wco-input-color-label: var(--wco-color-primary-700);
|
|
93
|
-
--wco-input-color-outline: var(--wco-color-primary-
|
|
96
|
+
--wco-input-color-outline: var(--wco-color-primary-700);
|
|
94
97
|
--wco-input-color-icon: var(--wco-color-primary-600);
|
|
95
98
|
--wco-input-color-text: var(--wco-color-neutral-900);
|
|
96
99
|
--wco-input-color-placeholder: var(--wco-color-neutral-600);
|
|
@@ -156,6 +159,7 @@
|
|
|
156
159
|
input:not(:placeholder-shown)+label {
|
|
157
160
|
top: 0;
|
|
158
161
|
transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
|
|
162
|
+
font-weight: 500;
|
|
159
163
|
}
|
|
160
164
|
|
|
161
165
|
textarea:not(:focus)::placeholder,
|