otimus-library 0.3.47 → 0.3.49

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 +82 -74
  3. package/fesm2022/otimus-library.mjs.map +1 -1
  4. package/index.d.ts +7 -1
  5. package/package.json +1 -1
  6. package/styles/colors.scss +70 -70
  7. package/styles/components/buttons/buttons.scss +225 -225
  8. package/styles/components/buttons/buttons.shui.scss +61 -61
  9. package/styles/components/index.scss +2 -2
  10. package/styles/components/inputs/inputs.scss +248 -248
  11. package/styles/components/inputs/inputs.shui.scss +225 -225
  12. package/styles/components/table/table.scss +98 -98
  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 -47
  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';
1
+ @import './buttons/buttons.scss';
2
+ @import './tooltip.scss';
3
3
  @import './table/table.scss';
package/styles/components/inputs/inputs.scss CHANGED
@@ -1,249 +1,249 @@
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
-
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
249
  @import './inputs.shui.scss';