otimus-library 0.4.78 → 0.4.80

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 (23) hide show
  1. package/README.md +26 -26
  2. package/fesm2022/otimus-library.mjs +89 -89
  3. package/fesm2022/otimus-library.mjs.map +1 -1
  4. package/index.d.ts +2 -2
  5. package/package.json +1 -1
  6. package/styles/colors.scss +70 -70
  7. package/styles/components/buttons/buttons.scss +225 -226
  8. package/styles/components/buttons/buttons.shui.scss +61 -61
  9. package/styles/components/index.scss +3 -3
  10. package/styles/components/inputs/inputs.scss +250 -249
  11. package/styles/components/inputs/inputs.shui.scss +271 -271
  12. package/styles/components/table/table.scss +123 -124
  13. package/styles/components/table/table.shui.scss +50 -50
  14. package/styles/components/tooltip.scss +26 -26
  15. package/styles/fonts.scss +178 -178
  16. package/styles/grid.scss +1122 -1122
  17. package/styles/patterns/shui/colors.shui.scss +154 -154
  18. package/styles/patterns/shui/fonts.shui.scss +65 -65
  19. package/styles/patterns/shui/index.shui.scss +24 -24
  20. package/styles/patterns/shui/variables.shui.scss +23 -23
  21. package/styles/states.scss +5 -5
  22. package/styles/styles.scss +47 -48
  23. package/styles/variables.scss +47 -47
package/styles/components/buttons/buttons.shui.scss CHANGED
@@ -1,62 +1,62 @@
1
- @use '../../variables.scss';
2
-
3
- .shui .oc.button, .shui.oc.button {
4
- border-radius: 2rem;
5
- font-size: 1.1rem;
6
-
7
- background-color: variables.$color-shui-base-1;
8
-
9
- height: 2.5rem;
10
- padding: 0 1rem;
11
-
12
- &.icon {
13
- border-radius: 50%;
14
-
15
- .material-symbols-outlined {
16
- font-size: 1.9rem;
17
- }
18
- }
19
-
20
- &.ui-8, &.p-1, &.g-1 {
21
- background-color: variables.$color-shui-ui-8;
22
- color: variables.$color-shui-ui-7;
23
- }
24
-
25
- &.tiny {
26
- height: 1.75rem;
27
- .material-symbols-outlined {
28
- font-size: 1.4rem;
29
- }
30
- }
31
-
32
- &.small{
33
- height: 2rem;
34
- .material-symbols-outlined {
35
- font-size: 1.5rem;
36
- }
37
- }
38
-
39
- &.large{
40
- height: 3rem;
41
- }
42
-
43
- &.icon{
44
- width: 2.5rem;
45
- &.tiny {
46
- width: 1.75rem;
47
- }
48
-
49
- &.small{
50
- width: 2rem ;
51
- }
52
-
53
- &.large{
54
- width: 3rem ;
55
- }
56
- }
57
-
58
- &.error{
59
- background-color: variables.$color-shui-functional-red;
60
- color: variables.$color-shui-base-0;
61
- }
1
+ @use '../../variables.scss';
2
+
3
+ .shui .oc.button, .shui.oc.button {
4
+ border-radius: 2rem;
5
+ font-size: 1.1rem;
6
+
7
+ background-color: variables.$color-shui-base-1;
8
+
9
+ height: 2.5rem;
10
+ padding: 0 1rem;
11
+
12
+ &.icon {
13
+ border-radius: 50%;
14
+
15
+ .material-symbols-outlined {
16
+ font-size: 1.9rem;
17
+ }
18
+ }
19
+
20
+ &.ui-8, &.p-1, &.g-1 {
21
+ background-color: variables.$color-shui-ui-8;
22
+ color: variables.$color-shui-ui-7;
23
+ }
24
+
25
+ &.tiny {
26
+ height: 1.75rem;
27
+ .material-symbols-outlined {
28
+ font-size: 1.4rem;
29
+ }
30
+ }
31
+
32
+ &.small{
33
+ height: 2rem;
34
+ .material-symbols-outlined {
35
+ font-size: 1.5rem;
36
+ }
37
+ }
38
+
39
+ &.large{
40
+ height: 3rem;
41
+ }
42
+
43
+ &.icon{
44
+ width: 2.5rem;
45
+ &.tiny {
46
+ width: 1.75rem;
47
+ }
48
+
49
+ &.small{
50
+ width: 2rem ;
51
+ }
52
+
53
+ &.large{
54
+ width: 3rem ;
55
+ }
56
+ }
57
+
58
+ &.error{
59
+ background-color: variables.$color-shui-functional-red;
60
+ color: variables.$color-shui-base-0;
61
+ }
62
62
  }
package/styles/components/index.scss CHANGED
@@ -1,3 +1,3 @@
1
- @import './buttons/buttons.scss';
2
- @import './tooltip.scss';
3
- @import './table/table.scss';
1
+ @use './buttons/buttons.scss';
2
+ @use './tooltip.scss';
3
+ @use './table/table.scss';
package/styles/components/inputs/inputs.scss CHANGED
@@ -1,249 +1,250 @@
1
- .oc-input-box.prefix {
2
- .material-symbols-outlined{
3
- position: absolute;
4
- left: 0;
5
- font-size: 1.5rem;
6
- user-select: none;
7
- }
8
- }
9
- .oc-input-box.suffix {
10
- .material-symbols-outlined, .oc.suffix{
11
- position: absolute;
12
- right: 0;
13
- font-size: 1.5rem;
14
- user-select: none;
15
- }
16
- .oc.suffix{
17
- position: absolute;
18
- right: 0;
19
- font-size: 1.5rem;
20
- user-select: none;
21
- }
22
- }
23
-
24
- .oc-input-box {
25
- position: relative;
26
- margin-top: .5rem;
27
-
28
- select * {
29
- background-color: variables.$color-gray-6;
30
- }
31
-
32
- label {
33
- position: absolute;
34
- left: 0;
35
- top: 0;
36
- padding: 0.5rem 0.7rem;
37
- font-size: 0.85rem;
38
- color: variables.$color-gray-3;
39
- pointer-events: none;
40
- transition: 0.3s ease;
41
- border-radius: 0.5rem;
42
- white-space: nowrap;
43
-
44
- .oc.color.error {
45
- font-weight: 700;
46
- margin-left: 0.2rem;
47
- }
48
- }
49
-
50
-
51
- &.prefix {
52
- .material-symbols-outlined,.oc.suffix{
53
- padding: .5rem .7rem;
54
- }
55
- input{
56
- padding-left: 1.75rem;
57
- }
58
- label{
59
- padding: .7rem 2.5rem;
60
- }
61
- }
62
-
63
- &.suffix {
64
- .material-symbols-outlined,.oc.suffix {
65
- padding: .5rem .7rem;
66
- }
67
- input{
68
- padding-right: 1.75rem;
69
- }
70
- label{
71
- padding: .7rem 0.7rem;
72
- }
73
- }
74
-
75
- input, textarea, select {
76
- font-size: 1rem;
77
- border-radius: 0.7rem;
78
- background-color: variables.$color-gray-6;
79
- border: 1px solid variables.$color-gray-4;
80
- outline: none;
81
- padding: 0.6rem 0.9rem;
82
- width: 100%;
83
- transition: 0.3s ease;
84
- color: variables.$color-gray-2;
85
- font-weight: 500;
86
-
87
- &:focus {
88
- border: 1px solid variables.$color-brand-g-1;
89
- box-shadow: 0px 4px 3.2px 0px rgba(0, 221, 163, 0.08);
90
- }
91
- }
92
-
93
- input:not(:placeholder-shown) ~ label,
94
- input:focus ~ label,
95
- textarea:not(:placeholder-shown) ~ label,
96
- textarea:focus ~ label,
97
- select:valid ~ label,
98
- select:focus ~ label {
99
- transform: translateY(-0.855rem) translateX(0.6rem);
100
- color: variables.$color-brand-dp-1;
101
- background-color: variables.$color-gray-6;
102
- padding: 1px 7px;
103
- font-weight: 500;
104
- }
105
-
106
- }
107
-
108
-
109
- .error {
110
- input, textarea, select {
111
- border: 1px solid variables.$color-error;
112
- box-shadow: 0px 4px 6.1px 0px rgba(161, 0, 0, 0.08);
113
- }
114
-
115
- small, label {
116
- color: variables.$color-error !important;
117
- font-weight: 600;
118
- }
119
- }
120
-
121
- .oc-input-box.small {
122
- input, textarea, select {
123
- padding: 0.3rem 0.7rem;
124
- border-radius: 0.5rem;
125
- }
126
-
127
- &.prefix {
128
- .material-symbols-outlined{
129
- padding: .35rem .7rem;
130
- font-size: 1.25rem;
131
- }
132
- label{
133
- padding: .45rem 2.5rem;
134
- }
135
- }
136
-
137
- &.suffix {
138
- .material-symbols-outlined {
139
- padding: .35rem .7rem;
140
- }
141
- label{
142
- padding: .45rem 0.7rem;
143
- }
144
- }
145
-
146
- label {
147
- padding: 0.5rem 0.7rem;
148
- }
149
- input:focus ~ label,
150
- input:not(:placeholder-shown) ~ label,
151
- textarea:focus ~ label,
152
- textarea:not(:placeholder-shown) ~ label,
153
- select:focus ~ label,
154
- select:valid ~ label {
155
- transform: translateY(-0.99rem) translateX(0.6rem);
156
- color: variables.$color-gray-2;
157
- background-color: variables.$color-white;
158
- padding: 1px 7px;
159
- font-weight: 500;
160
- }
161
- }
162
-
163
- .oc-input-box.large {
164
- input, textarea, select {
165
- padding: 1rem;
166
- border-radius: 1rem;
167
- }
168
-
169
- label {
170
- padding: 1rem 0.7rem;
171
- }
172
-
173
- &.prefix {
174
- .material-symbols-outlined{
175
- padding: 1rem .7rem;
176
- }
177
- input{
178
- padding-left: 2.5rem;
179
- }
180
- label{
181
- padding: 1.1rem 2.5rem;
182
- }
183
- }
184
-
185
- &.suffix {
186
- .material-symbols-outlined {
187
- padding: .9rem .7rem;
188
- }
189
- input{
190
- padding-right: 2.5rem;
191
- }
192
- label{
193
- padding: 1.1rem 0.7rem;
194
- }
195
- }
196
-
197
- input:focus ~ label,
198
- input:not(:placeholder-shown) ~ label,
199
- textarea:focus ~ label,
200
- textarea:not(:placeholder-shown) ~ label,
201
- select:focus ~ label,
202
- select:valid ~ label {
203
- transform: translateY(-0.77rem) translateX(0.6rem);
204
- color: variables.$color-gray-2;
205
- background-color: variables.$color-white;
206
- padding: 1px 7px;
207
- font-weight: 500;
208
- }
209
- }
210
-
211
-
212
- // Semantic-like input:
213
-
214
- /* Estilo geral do input */
215
- .semantic-input {
216
- display: inline-block;
217
- width: 100%;
218
- padding: 10px 12px;
219
- font-size: 14px;
220
- line-height: 1.5;
221
- color: #333;
222
- background-color: #fff;
223
- border: 1px solid #ccc;
224
- border-radius: 4px;
225
- box-shadow: 0 1px 2px rgba(34, 36, 38, 0.15);
226
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
227
- }
228
-
229
- /* Estilo ao passar o mouse */
230
- .semantic-input:hover {
231
- border-color: #b3b3b3;
232
- }
233
-
234
- /* Estilo ao focar */
235
- .semantic-input:focus {
236
- border-color: #85b7d9;
237
- box-shadow: 0 0 0 2px rgba(34, 36, 38, 0.15);
238
- outline: none;
239
- }
240
-
241
- /* Estilo para inputs desabilitados */
242
- .semantic-input:disabled {
243
- background-color: #f9f9f9;
244
- color: #b3b3b3;
245
- border-color: #ddd;
246
- cursor: not-allowed;
247
- }
248
-
249
- @import './inputs.shui.scss';
1
+ @use '../../variables.scss';
2
+ @use './inputs.shui.scss';
3
+
4
+ .oc-input-box.prefix {
5
+ .material-symbols-outlined{
6
+ position: absolute;
7
+ left: 0;
8
+ font-size: 1.5rem;
9
+ user-select: none;
10
+ }
11
+ }
12
+ .oc-input-box.suffix {
13
+ .material-symbols-outlined, .oc.suffix{
14
+ position: absolute;
15
+ right: 0;
16
+ font-size: 1.5rem;
17
+ user-select: none;
18
+ }
19
+ .oc.suffix{
20
+ position: absolute;
21
+ right: 0;
22
+ font-size: 1.5rem;
23
+ user-select: none;
24
+ }
25
+ }
26
+
27
+ .oc-input-box {
28
+ position: relative;
29
+ margin-top: .5rem;
30
+
31
+ select * {
32
+ background-color: variables.$color-gray-6;
33
+ }
34
+
35
+ label {
36
+ position: absolute;
37
+ left: 0;
38
+ top: 0;
39
+ padding: 0.5rem 0.7rem;
40
+ font-size: 0.85rem;
41
+ color: variables.$color-gray-3;
42
+ pointer-events: none;
43
+ transition: 0.3s ease;
44
+ border-radius: 0.5rem;
45
+ white-space: nowrap;
46
+
47
+ .oc.color.error {
48
+ font-weight: 700;
49
+ margin-left: 0.2rem;
50
+ }
51
+ }
52
+
53
+
54
+ &.prefix {
55
+ .material-symbols-outlined,.oc.suffix{
56
+ padding: .5rem .7rem;
57
+ }
58
+ input{
59
+ padding-left: 1.75rem;
60
+ }
61
+ label{
62
+ padding: .7rem 2.5rem;
63
+ }
64
+ }
65
+
66
+ &.suffix {
67
+ .material-symbols-outlined,.oc.suffix {
68
+ padding: .5rem .7rem;
69
+ }
70
+ input{
71
+ padding-right: 1.75rem;
72
+ }
73
+ label{
74
+ padding: .7rem 0.7rem;
75
+ }
76
+ }
77
+
78
+ input, textarea, select {
79
+ font-size: 1rem;
80
+ border-radius: 0.7rem;
81
+ background-color: variables.$color-gray-6;
82
+ border: 1px solid variables.$color-gray-4;
83
+ outline: none;
84
+ padding: 0.6rem 0.9rem;
85
+ width: 100%;
86
+ transition: 0.3s ease;
87
+ color: variables.$color-gray-2;
88
+ font-weight: 500;
89
+
90
+ &:focus {
91
+ border: 1px solid variables.$color-brand-g-1;
92
+ box-shadow: 0px 4px 3.2px 0px rgba(0, 221, 163, 0.08);
93
+ }
94
+ }
95
+
96
+ input:not(:placeholder-shown) ~ label,
97
+ input:focus ~ label,
98
+ textarea:not(:placeholder-shown) ~ label,
99
+ textarea:focus ~ label,
100
+ select:valid ~ label,
101
+ select:focus ~ label {
102
+ transform: translateY(-0.855rem) translateX(0.6rem);
103
+ color: variables.$color-brand-dp-1;
104
+ background-color: variables.$color-gray-6;
105
+ padding: 1px 7px;
106
+ font-weight: 500;
107
+ }
108
+
109
+ }
110
+
111
+
112
+ .error {
113
+ input, textarea, select {
114
+ border: 1px solid variables.$color-error;
115
+ box-shadow: 0px 4px 6.1px 0px rgba(161, 0, 0, 0.08);
116
+ }
117
+
118
+ small, label {
119
+ color: variables.$color-error !important;
120
+ font-weight: 600;
121
+ }
122
+ }
123
+
124
+ .oc-input-box.small {
125
+ input, textarea, select {
126
+ padding: 0.3rem 0.7rem;
127
+ border-radius: 0.5rem;
128
+ }
129
+
130
+ &.prefix {
131
+ .material-symbols-outlined{
132
+ padding: .35rem .7rem;
133
+ font-size: 1.25rem;
134
+ }
135
+ label{
136
+ padding: .45rem 2.5rem;
137
+ }
138
+ }
139
+
140
+ &.suffix {
141
+ .material-symbols-outlined {
142
+ padding: .35rem .7rem;
143
+ }
144
+ label{
145
+ padding: .45rem 0.7rem;
146
+ }
147
+ }
148
+
149
+ label {
150
+ padding: 0.5rem 0.7rem;
151
+ }
152
+ input:focus ~ label,
153
+ input:not(:placeholder-shown) ~ label,
154
+ textarea:focus ~ label,
155
+ textarea:not(:placeholder-shown) ~ label,
156
+ select:focus ~ label,
157
+ select:valid ~ label {
158
+ transform: translateY(-0.99rem) translateX(0.6rem);
159
+ color: variables.$color-gray-2;
160
+ background-color: variables.$color-white;
161
+ padding: 1px 7px;
162
+ font-weight: 500;
163
+ }
164
+ }
165
+
166
+ .oc-input-box.large {
167
+ input, textarea, select {
168
+ padding: 1rem;
169
+ border-radius: 1rem;
170
+ }
171
+
172
+ label {
173
+ padding: 1rem 0.7rem;
174
+ }
175
+
176
+ &.prefix {
177
+ .material-symbols-outlined{
178
+ padding: 1rem .7rem;
179
+ }
180
+ input{
181
+ padding-left: 2.5rem;
182
+ }
183
+ label{
184
+ padding: 1.1rem 2.5rem;
185
+ }
186
+ }
187
+
188
+ &.suffix {
189
+ .material-symbols-outlined {
190
+ padding: .9rem .7rem;
191
+ }
192
+ input{
193
+ padding-right: 2.5rem;
194
+ }
195
+ label{
196
+ padding: 1.1rem 0.7rem;
197
+ }
198
+ }
199
+
200
+ input:focus ~ label,
201
+ input:not(:placeholder-shown) ~ label,
202
+ textarea:focus ~ label,
203
+ textarea:not(:placeholder-shown) ~ label,
204
+ select:focus ~ label,
205
+ select:valid ~ label {
206
+ transform: translateY(-0.77rem) translateX(0.6rem);
207
+ color: variables.$color-gray-2;
208
+ background-color: variables.$color-white;
209
+ padding: 1px 7px;
210
+ font-weight: 500;
211
+ }
212
+ }
213
+
214
+
215
+ // Semantic-like input:
216
+
217
+ /* Estilo geral do input */
218
+ .semantic-input {
219
+ display: inline-block;
220
+ width: 100%;
221
+ padding: 10px 12px;
222
+ font-size: 14px;
223
+ line-height: 1.5;
224
+ color: #333;
225
+ background-color: #fff;
226
+ border: 1px solid #ccc;
227
+ border-radius: 4px;
228
+ box-shadow: 0 1px 2px rgba(34, 36, 38, 0.15);
229
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
230
+ }
231
+
232
+ /* Estilo ao passar o mouse */
233
+ .semantic-input:hover {
234
+ border-color: #b3b3b3;
235
+ }
236
+
237
+ /* Estilo ao focar */
238
+ .semantic-input:focus {
239
+ border-color: #85b7d9;
240
+ box-shadow: 0 0 0 2px rgba(34, 36, 38, 0.15);
241
+ outline: none;
242
+ }
243
+
244
+ /* Estilo para inputs desabilitados */
245
+ .semantic-input:disabled {
246
+ background-color: #f9f9f9;
247
+ color: #b3b3b3;
248
+ border-color: #ddd;
249
+ cursor: not-allowed;
250
+ }