@wizco/fenixds-core 1.0.3 → 1.0.5

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 (8) hide show
  1. package/esm2022/lib/styles/styles.component.mjs +3 -3
  2. package/fesm2022/wizco-fenixds-core.mjs +3 -3
  3. package/package.json +1 -1
  4. package/styles/core.css +2571 -56
  5. package/styles/scss/button.scss +14 -4
  6. package/styles/scss/forms.scss +105 -64
  7. package/styles/scss/helpers.scss +4241 -0
  8. package/styles/scss/tooltip.scss +29 -8
package/styles/scss/button.scss CHANGED
@@ -15,10 +15,12 @@ a.btn {
15
15
  letter-spacing: 1.1px;
16
16
  transition: all 300ms ease-in-out, outline 0ms linear;
17
17
  cursor: pointer;
18
+
18
19
  // &:focus-within:not(:active),
19
20
  &:focus-visible {
20
21
  outline: 2px solid var(--btn-focus, var(--textBtn));
21
22
  }
23
+
22
24
  &:not([class*=" bg-"]) {
23
25
  background-color: var(--bgBtn);
24
26
  color: var(--textBtn);
@@ -79,6 +81,7 @@ a.btn {
79
81
  background-color: transparent;
80
82
  --textBtn: var(--wco-color-primary-600);
81
83
  --btn-focus: var(--wco-color-primary-600);
84
+
82
85
  &:hover {
83
86
  background-color: var(--wco-color-primary-50);
84
87
  --textBtn: var(--wco-color-primary-700);
@@ -89,15 +92,18 @@ a.btn {
89
92
  background-color: var(--wco-color-primary-50);
90
93
  }
91
94
  }
95
+
92
96
  &.btn-basic {
93
97
  box-shadow: none;
94
98
  --bgBtn: transparent;
95
99
  --textBtn: var(--wco-color-primary-600);
100
+
96
101
  &:hover {
97
102
  --textBtn: var(--wco-color-primary-700);
98
103
  --bgBtn: var(--wco-color-primary-50);
99
104
  }
100
- &:focus-visible,
105
+
106
+ &:focus-visible,
101
107
  // &:focus-within,
102
108
  &:active {
103
109
  --textBtn: var(--wco-color-primary-900);
@@ -110,6 +116,7 @@ a.btn {
110
116
  --bgBtn: var(--wco-color-secondary-100);
111
117
  --textBtn: var(--wco-color-secondary-900);
112
118
  --btn-focus: var(--wco-color-secondary-900);
119
+
113
120
  &:hover:not(.btn-outline) {
114
121
  --bgBtn: var(--wco-color-secondary-50);
115
122
  --textBtn: var(--wco-color-secondary-900);
@@ -134,7 +141,7 @@ a.btn {
134
141
  background-color: var(--wco-color-secondary-100);
135
142
  }
136
143
  }
137
-
144
+
138
145
  &.btn-basic {
139
146
  box-shadow: none;
140
147
  --bgBtn: transparent;
@@ -158,10 +165,12 @@ a.btn {
158
165
  background-color: transparent;
159
166
  --textBtn: var(--wco-color-primary-600);
160
167
  text-decoration: underline;
168
+
161
169
  &:hover:not(.btn-outline) {
162
170
  --textBtn: var(--wco-color-primary-700);
163
171
  box-shadow: none;
164
172
  }
173
+
165
174
  &:active:not(.btn-outline) {
166
175
  background-color: var(--wco-color-primary-100);
167
176
  --bgBtn: var(--wco-color-primary-900);
@@ -234,7 +243,7 @@ a.btn {
234
243
  }
235
244
  }
236
245
 
237
- &.btn-icon {
246
+ &.btn-icon {
238
247
  --btn-padding: 4px;
239
248
  min-height: var(--btn-min-h, 48px);
240
249
  min-width: var(--btn-min-h, 48px);
@@ -248,6 +257,7 @@ a.btn {
248
257
  --btn-notification-time: 2s;
249
258
  --btn-notification-count: infinite;
250
259
  --btn-notification-color: var(--bgBtn);
260
+
251
261
  &:not(.btn-outline) {
252
262
  &:before {
253
263
  outline: 2px solid var(--textBtn);
@@ -285,4 +295,4 @@ a.btn {
285
295
  }
286
296
  }
287
297
  }
288
- }
298
+ }
package/styles/scss/forms.scss CHANGED
@@ -1,78 +1,62 @@
1
+ .form-field {
2
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
3
+ --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
4
+ --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
5
+ --wco-input-color-text: var(--wco-color-primary-900, #080809);
6
+ --wco-input-color-placeholder: var(--wco-color-neutral-600, #6d747a);
7
+ --wco-input-color-bg: var(--wco-color-neutral-50, #fcfcfc);
8
+ --wco-input-radius: var(--wco-radius-sm, 4px);
9
+ --wco-input-border: var(--wco-borderwidth-thin, 1px) solid var(--wco-input-color-outline);
10
+ --wco-input-size: var(--wco-font-size-xs, 16px);
11
+ --wco-input-shadow: var(--wco-shadow-level-0, 0px 0px 0px 0px rgba(0, 0, 0, 0.2));
12
+ --wco-input-color-required: var(--wco-color-danger-600, #e00707);
13
+ --wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
14
+ --wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
15
+ --wco-input-padding: 16px;
16
+ }
17
+
18
+ .form-field * {
19
+ box-sizing: border-box;
20
+ }
21
+
1
22
  .form-field {
2
23
  display: flex;
3
24
  position: relative;
4
- --input-radius: var(--wco-radius-sm, 4px);
5
- --input-color-error: var(--wco-color-danger-500, #E00707);
6
- --input-default-color: var(--wco-color-primary-700,#004E87);
7
- --input-border: 1px solid var(--wco-color-neutral-100);
8
- --input-size: 16px;
9
- --input-shadow: 0px 0px 0px 0px transparent;
10
- accent-color: var(--input-default-color);
25
+ accent-color: var(--wco-input-color-text);
11
26
  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out;
12
27
  // input Invalid
13
28
  input:required+label::after,
14
29
  textarea:required+label::after,
15
30
  input:invalid:not(:placeholder-shown):required+label{
16
31
  content: " *";
17
- color: var(--wco-color-danger-100);
32
+ color: var(--wco-input-color-required);
18
33
  }
19
34
 
20
35
  // input custom
21
36
  .form-field__input,
22
37
  .form-field__textarea,
23
38
  .form-field__select {
24
- border: var(--input-border);
25
- border-radius: var(--input-radius);
26
- font-size: var(--input-size, 16px);
27
- box-shadow: var(--input-shadow);
28
- padding: 16px;
39
+ border: var(--wco-input-border);
40
+ border-radius: var(--wco-input-radius);
41
+ font-size: var(--wco-input-size, 16px);
42
+ box-shadow: var(--wco-input-shadow);
43
+ padding: var(--wco-input-padding, 16px);
29
44
  font-style: normal;
30
45
  font-weight: 400;
31
- line-height: 150%;
32
- color: #212223;
46
+ line-height: 1.375;
47
+ letter-spacing: 0.4px;
48
+ color: var(--wco-input-color-text);
33
49
  outline: none;
34
50
  width: 100%;
35
-
36
- // native effects
51
+ background-color: var(--wco-input-color-bg);
52
+ &::placeholder {
53
+ color: var(--wco-input-color-placeholder);
54
+ }
55
+ // native effects
37
56
  &:invalid:not(:placeholder-shown), &.form-field--error:not(:placeholder-shown) {
38
57
  --input-border: 1px solid var(--input-color-error);
39
58
  --input-shadow: 0px 2px 0px 1px var(--input-color-error);
40
59
  color: var(--input-color-error);
41
-
42
- }
43
-
44
- &.form-field--error:not(:placeholder-shown) ~ label {
45
- color: var(--input-color-error);
46
- }
47
-
48
- &:hover:not(:focus):not(:disabled):not(:invalid):not(:read-only) {
49
- border: 1px solid var(--wco-color-primary-500, var(--input-default-color));
50
- }
51
-
52
- // &:focus:not(:disabled):not(:invalid) {
53
- // --input-border: 2px solid var(--wco-color-primary-700, var(--input-default-color));;
54
- // }
55
-
56
- &:disabled {
57
- border: 1px solid #6F7276;
58
- background: var(--wco-color-neutral-100est);
59
- color: #6F7276;
60
- + label {
61
- color: var(--wco-color-neutral-700);
62
- --input-bg: var(--wco-color-neutral-100est);
63
- }
64
- }
65
-
66
- &:read-only:not(:disabled):not(select) {
67
- background: #EAEBEB;
68
- border: 1px solid #C1C3C5;
69
- color: #6F7276;
70
- &:focus {
71
- --input-border: 2px solid #C1C3C5;
72
- }
73
- + label {
74
- --input-bg: #EAEBEB;
75
- }
76
60
  }
77
61
 
78
62
  // sizes
@@ -81,11 +65,11 @@
81
65
  }
82
66
  &.input-md {
83
67
  height: 40px;
84
-
85
68
  }
86
69
  &.input-lg {
87
70
  height: 48px;
88
71
  }
72
+
89
73
  }
90
74
 
91
75
  label {
@@ -93,33 +77,85 @@
93
77
  left: 0;
94
78
  top: 50%;
95
79
  transform: translateY(-50%);
96
- background-image: linear-gradient(0deg, var(--input-bg, #fff) 44%, rgba(93,118,137,0) 44%);
97
- color: var(--input-default-color);
80
+ background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93,118,137,0) 44%);
81
+ color: var(--wco-input-color-label);
98
82
  padding: 0 4px;
99
83
  margin-left: 20px;
100
- transition: 0.1s ease-out;
84
+ transition: 100ms linear;
101
85
  transform-origin: left top;
102
86
  pointer-events: none;
103
87
  }
104
88
 
105
- textarea ~ label {
106
- top: 16px;
107
- transform: translateY(0);
89
+ //// States ////
90
+ /// Focus
91
+ &:has(input:focus, textarea:focus, select:focus) {
92
+ --wco-input-color-label: var(--wco-color-primary-700);
93
+ --wco-input-color-outline: var(--wco-color-primary-600);
94
+ --wco-input-color-icon: var(--wco-color-primary-600);
95
+ --wco-input-color-text: var(--wco-color-neutral-900);
96
+ --wco-input-color-placeholder: var(--wco-color-neutral-600);
97
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
98
+ }
99
+ /// Hover
100
+ &:hover {
101
+ --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
102
+ --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399);
103
+ }
104
+
105
+ /// Disabled
106
+ &:has(input:disabled, textarea:disabled, select:disabled) {
107
+ --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
108
+ --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
109
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
110
+ --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
111
+ --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
112
+ --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC);
113
+ }
114
+
115
+ /// View Only
116
+ &:has(
117
+ input:read-only:not(:disabled),
118
+ textarea:read-only:not(:disabled),
119
+ select:read-only:not(:disabled)
120
+ ),
121
+ .form-field--readonly:not(.form-field--disabled) {
122
+ --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
123
+ --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
124
+ --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
125
+ --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
126
+ --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC);
127
+ }
128
+
129
+ /// Error
130
+ &.form-field--error:not(:placeholder-shown) ~ label,
131
+ &.form-field--error, &:has(input:is(:placeholder-shown):invalid),
132
+ &:has(.form-field--error) {
133
+ --wco-input-color-label: var(--wco-color-danger-600, #e00707);
134
+ --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
135
+ --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
136
+ --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
137
+ --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
138
+ }
139
+
140
+
141
+ textarea~label {
142
+ top: 16px;
143
+ transform: translateY(0);
108
144
  }
109
145
 
110
146
  select[value=""]:focus+label,
111
147
  textarea:focus+label,
112
148
  input:focus+label {
113
- color: var(--input-default-color);
114
- top: 0;
115
- transform: translateY(-50%) scale(0.9) !important;
149
+ color: var(--input-default-color);
150
+ top: 0;
151
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
116
152
  }
117
153
 
118
- select:not([value=""]):valid~label,
154
+ select:not([value=""]) ~ label,
119
155
  textarea:not(:placeholder-shown)+label,
120
156
  input:not(:placeholder-shown)+label {
121
157
  top: 0;
122
- transform: translateY(-50%) scale(0.9) !important;
158
+ transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
123
159
  }
124
160
 
125
161
  textarea:not(:focus)::placeholder,
@@ -134,6 +170,7 @@
134
170
  top: 50%;
135
171
  left: 12px;
136
172
  transform: translateY(-50%);
173
+ color: var(--wco-input-color-icon);
137
174
  }
138
175
  > span ~ .form-field__input + label,
139
176
  > span ~ .form-field__select + label {
@@ -161,6 +198,9 @@
161
198
 
162
199
  /// Input com ícone no final
163
200
  &.form-field--suffixe {
201
+ label + span {
202
+ color: var(--wco-input-color-icon);
203
+ }
164
204
  > .form-field__select,
165
205
  > .form-field__input {
166
206
  padding-right: 44px;
@@ -341,3 +381,4 @@ label.form-check, .form-check {
341
381
  color: var(--wco-color-neutral-600est);
342
382
  }
343
383
  }
384
+