@dev-tcloud/tcloud-ui 5.0.3 → 5.0.4-beta.0

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 (42) hide show
  1. package/fesm2022/dev-tcloud-tcloud-ui.mjs +7112 -6066
  2. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  3. package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +1 -1
  4. package/lib/revitalizacao/components/index.d.ts +26 -0
  5. package/lib/revitalizacao/components/tc-rev-breadcrumb/tc-rev-breadcrumb.component.d.ts +12 -0
  6. package/lib/revitalizacao/components/tc-rev-breadcrumb/tc-rev-breadcrumb.service.d.ts +16 -0
  7. package/lib/revitalizacao/components/tc-rev-button/tc-rev-button.directive.d.ts +12 -0
  8. package/lib/revitalizacao/components/tc-rev-calendar/tc-rev-calendar.component.d.ts +43 -0
  9. package/lib/revitalizacao/components/tc-rev-card/tc-rev-card.component.d.ts +5 -0
  10. package/lib/revitalizacao/components/tc-rev-card-title/tc-rev-card-title.component.d.ts +6 -0
  11. package/lib/revitalizacao/components/tc-rev-components.module.d.ts +29 -0
  12. package/lib/revitalizacao/components/tc-rev-dropdown/tc-rev-dropdown.component.d.ts +33 -0
  13. package/lib/revitalizacao/components/tc-rev-dropdown-multi-level/tc-rev-dropdown-multi-level.component.d.ts +41 -0
  14. package/lib/revitalizacao/components/tc-rev-dropdown-multi-level/tc-rev-dropdown-sub-menu/tc-rev-dropdown-sub-menu.component.d.ts +17 -0
  15. package/lib/revitalizacao/components/tc-rev-empty-content/tc-rev-empty-content.component.d.ts +5 -0
  16. package/lib/revitalizacao/components/tc-rev-faq/tc-rev-faq.component.d.ts +12 -0
  17. package/lib/revitalizacao/components/tc-rev-icon-button/tc-rev-icon-button.directive.d.ts +12 -0
  18. package/lib/revitalizacao/components/tc-rev-input/tc-rev-input.directive.d.ts +9 -0
  19. package/lib/revitalizacao/components/tc-rev-input-container/tc-rev-input-container.component.d.ts +9 -0
  20. package/lib/revitalizacao/components/tc-rev-loading/tc-rev-loading.component.d.ts +6 -0
  21. package/lib/revitalizacao/components/tc-rev-message/tc-rev-message.component.d.ts +7 -0
  22. package/lib/revitalizacao/components/tc-rev-multi-input/tc-rev-multi-input.component.d.ts +22 -0
  23. package/lib/revitalizacao/components/tc-rev-pagination/tc-rev-pagination.component.d.ts +14 -0
  24. package/lib/revitalizacao/components/tc-rev-search-input/tc-rev-search-input.component.d.ts +10 -0
  25. package/lib/revitalizacao/components/tc-rev-side-drawer/tc-rev-side-drawer.component.d.ts +17 -0
  26. package/lib/revitalizacao/components/tc-rev-tab-group/tc-rev-tab-group.component.d.ts +12 -0
  27. package/lib/revitalizacao/components/tc-rev-tab-group/tc-rev-tab-item/tc-rev-tab-item.component.d.ts +9 -0
  28. package/lib/revitalizacao/components/tc-rev-tag/tag-colors.enum.d.ts +29 -0
  29. package/lib/revitalizacao/components/tc-rev-tag/tc-rev-tag.component.d.ts +10 -0
  30. package/lib/revitalizacao/components/tc-sub-navbar/component/tc-sub-navbar-item/tc-sub-navbar-item.component.d.ts +13 -0
  31. package/lib/revitalizacao/components/tc-sub-navbar/tc-sub-navbar.component.d.ts +12 -0
  32. package/package.json +1 -1
  33. package/public-api.d.ts +1 -0
  34. package/scss/tcloud-revitalizacao/_tc-rev-border.scss +1 -1
  35. package/scss/tcloud-revitalizacao/_tc-rev-colors.scss +0 -1
  36. package/scss/tcloud-revitalizacao/_tc-rev-sizes.scss +4 -3
  37. package/scss/tcloud-revitalizacao/_tc-rev-typography.scss +1 -1
  38. package/scss/tcloud-revitalizacao/components/_tc-rev-ag-grid-table.scss +76 -0
  39. package/scss/tcloud-revitalizacao/components/_tc-rev-button.scss +74 -36
  40. package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss +95 -56
  41. package/scss/tcloud-revitalizacao/components/_tc-rev-tab-item.scss +44 -36
  42. package/scss/tcloud-revitalizacao/tc-rev-styles.scss +2 -1
package/scss/tcloud-revitalizacao/components/_tc-rev-ag-grid-table.scss ADDED
@@ -0,0 +1,76 @@
1
+ // ============================
2
+ // AG Grid Styles
3
+ // ============================
4
+
5
+ // Custom Material Theme
6
+ .ag-theme-material {
7
+ --ag-background-color: var(--c-neutral-50);
8
+ --ag-header-background-color: var(--c-neutral-100);
9
+ --ag-header-foreground-color: var(--c-neutral-700);
10
+ --ag-foreground-color: var(--c-neutral-700);
11
+ --ag-row-border-color: var(--c-neutral-300);
12
+ --ag-font-size: var(--size-14);
13
+ --ag-font-family: var(--f-family);
14
+
15
+ // ============================
16
+ // Table style
17
+ // ============================
18
+ &.tc-rev-ag-grid-table {
19
+ width: 100%;
20
+ border: 1px solid var(--c-neutral-300);
21
+ border-radius: 8px 8px 8px 8px;
22
+ overflow: hidden;
23
+ font-size: var(--size-14);
24
+
25
+ .ag-header {
26
+ background-color: #F2F6F9;
27
+ border-bottom: 1px solid var(--c-neutral-300);
28
+
29
+ .ag-header-cell-text {
30
+ font-weight: 900;
31
+ }
32
+
33
+ .ag-header-cell {
34
+ padding: 12px 16px;
35
+ font-weight: 900;
36
+ color: var(--c-neutral-700);
37
+ border-right: none;
38
+ background-color: var(--c-neutral-100);
39
+ border-radius: 8px 8px 8px 8px;
40
+
41
+ &:hover {
42
+ background-color: var(--c-neutral-50);
43
+ }
44
+ }
45
+ }
46
+ .ag-row {
47
+ background: var(--c-neutral-50);
48
+ border-bottom: 1px solid var(--c-neutral-300);
49
+
50
+ &:hover {
51
+ background-color: var(--c-neutral-50);
52
+ }
53
+
54
+ .ag-cell {
55
+ padding: 12px 16px;
56
+ line-height: 22px;
57
+ border-right: none;
58
+ color: var(--c-neutral-700);
59
+ font-size: var(--size-14);
60
+
61
+ &:last-child {
62
+ text-align: left;
63
+ }
64
+ }
65
+ }
66
+
67
+ .ag-row-odd,
68
+ .ag-row-even {
69
+ background-color: var(--c-neutral-50) !important;
70
+ }
71
+
72
+ .ag-row-selected {
73
+ background-color: var(--c-neutral-50) !important;
74
+ }
75
+ }
76
+ }
package/scss/tcloud-revitalizacao/components/_tc-rev-button.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @use 'sass:map';
2
2
 
3
- .tc-rev-btn--sm
4
- {
3
+ .tc-rev-btn {
5
4
  align-items: center;
6
5
  border-color: transparent;
7
6
  border-width: var(--bor-size-xs);
@@ -9,62 +8,101 @@
9
8
  border-radius: var(--bor-radius-pill);
10
9
  cursor: pointer;
11
10
  display: inline-flex;
11
+ font-family: var(--f-family);
12
12
  font-size: var(--f-size-14);
13
13
  font-weight: var(--f-weight-600);
14
14
  gap: var(--size-8);
15
15
  justify-content: center;
16
16
  line-height: var(--l-height-24);
17
- height: var(--size-38);
18
- max-height: var(--size-38);
19
- min-height: var(--size-38);
17
+ height: var(--size-40);
18
+ max-height: var(--size-40);
19
+ min-height: var(--size-40);
20
+ min-width: 6.75rem;
20
21
  padding: 0 var(--size-8);
21
22
  transition: all 200ms ease;
23
+
24
+ &-icon {
25
+ height: var(--size-40);
26
+ max-height: var(--size-40);
27
+ min-height: var(--size-40);
28
+ width: var(--size-40);
29
+ max-width: var(--size-40);
30
+ min-width: var(--size-40);
31
+ }
32
+
33
+ &:disabled
34
+ {
35
+ background-color: transparent;
36
+ border-color: transparent;
37
+ color: var(--c-neutral-600);
38
+ cursor: not-allowed;
39
+ }
40
+ }
41
+
42
+ .tc-rev-btn--sm
43
+ {
44
+ @extend .tc-rev-btn;
45
+ font-size: var(--f-size-14);
46
+ font-weight: var(--f-weight-600);
47
+ height: var(--size-40);
48
+ max-height: var(--size-40);
49
+ min-height: var(--size-40);
50
+ padding: 0 var(--size-8);
51
+ min-width: 6.75rem;
52
+
53
+ &-icon {
54
+ height: var(--size-40);
55
+ max-height: var(--size-40);
56
+ min-height: var(--size-40);
57
+ width: var(--size-40);
58
+ max-width: var(--size-40);
59
+ min-width: var(--size-40);
60
+ }
22
61
  }
23
62
 
24
63
  .tc-rev-btn--md
25
64
  {
26
- align-items: center;
27
- border-color: transparent;
28
- border-width: var(--bor-size-xs);
29
- border-style: solid;
30
- border-radius: var(--bor-radius-pill);
31
- cursor: pointer;
32
- display: inline-flex;
65
+ @extend .tc-rev-btn;
33
66
  font-size: var(--f-size-16);
34
- font-weight: var(--f-weight-600);
35
- gap: var(--size-8);
36
- justify-content: center;
37
- line-height: var(--l-height-24);
38
- height: var(--size-58);
39
- max-height: var(--size-58);
40
- min-height: var(--size-58);
67
+ height: var(--size-56);
68
+ max-height: var(--size-56);
69
+ min-height: var(--size-56);
41
70
  padding: 0 var(--size-16);
42
- transition: all 200ms ease;
71
+ min-width: 8.5rem;
72
+
73
+ &-icon {
74
+ height: var(--size-56);
75
+ max-height: var(--size-56);
76
+ min-height: var(--size-56);
77
+ width: var(--size-56);
78
+ max-width: var(--size-56);
79
+ min-width: var(--size-56);
80
+ }
43
81
  }
44
82
 
45
83
  .tc-rev-btn--lg
46
84
  {
47
- align-items: center;
48
- border-color: transparent;
49
- border-width: var(--bor-size-xs);
50
- border-style: solid;
51
- border-radius: var(--bor-radius-pill);
52
- cursor: pointer;
53
- display: inline-flex;
54
- font-size: var(--f-size-16);
55
- font-weight: var(--f-weight-600);
56
- height: var(--size-74);
57
- gap: var(--size-8);
58
- justify-content: center;
59
- line-height: var(--l-height-24);
60
- max-height: var(--size-74);
61
- min-height: var(--size-74);
85
+ @extend .tc-rev-btn;
86
+ font-size: var(--f-size-18);
87
+ height: var(--size-72);
88
+ max-height: var(--size-72);
89
+ min-height: var(--size-72);
62
90
  padding: 0 var(--size-24);
63
- transition: all 200ms ease;
91
+ min-width: 9.5rem;
92
+
93
+ &-icon {
94
+ height: var(--size-72);
95
+ max-height: var(--size-72);
96
+ min-height: var(--size-72);
97
+ width: var(--size-72);
98
+ max-width: var(--size-72);
99
+ min-width: var(--size-72);
100
+ }
64
101
  }
65
102
 
66
103
  $btn-by-colors:
67
104
  ("class": "tc-rev-btn--primary-filled", "b-color": var(--c-primary-500), "bg-color": var(--c-primary-500), "color": var(--c-neutral-50), "bg-hover": var(--c-primary-600)),
105
+ ("class": "tc-rev-btn--success-filled", "b-color": var(--c-success-500), "bg-color": var(--c-success-500), "color": var(--c-neutral-50), "bg-hover": var(--c-success-500)),
68
106
  ("class": "tc-rev-btn--light-filled", "b-color": var(--c-neutral-50), "bg-color": var(--c-neutral-50), "color": var(--c-primary-500), "bg-hover": var(--c-neutral-50)),
69
107
  ("class": "tc-rev-btn--dark-filled", "b-color": var(--c-neutral-900), "bg-color": var(--c-neutral-900), "color": var(--c-neutral-50), "bg-hover": var(--c-neutral-600)),
70
108
  ("class": "tc-rev-btn--danger-filled", "b-color": var(--c-danger-500), "bg-color": var(--c-danger-500), "color": var(--c-neutral-50), "bg-hover": var(--c-danger-500));
package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss CHANGED
@@ -1,25 +1,38 @@
1
- .tc-rev-input-control
2
- {
3
- border: 1px solid var(--c-neutral-400);
4
- border-radius: var(--bor-radius-pill);
5
- color: var(--c-neutral-900);
6
- display: inline-block;
7
- font-family: var(--f-family);
8
- font-size: var(--f-size-14);
9
- line-height: var(--l-height-20);
10
- outline: none;
11
- height: var(--size-40);
12
- transition: 200ms ease;
13
- padding: 0 var(--size-16);
1
+ .tc-rev-input-control {
2
+ border: 1px solid var(--c-neutral-400);
3
+ border-radius: var(--bor-radius-pill);
4
+ color: var(--c-neutral-900);
5
+ display: inline-block;
6
+ font-family: var(--f-family);
7
+ font-size: var(--f-size-14);
8
+ line-height: var(--l-height-20);
9
+ outline: none;
10
+ height: var(--size-40);
11
+ transition: 200ms ease;
12
+ padding: 0 var(--size-16);
13
+ max-width: 100%;
14
+
15
+ &.error {
16
+ border-color: var(--c-danger-500);
17
+ }
18
+
19
+ &:hover,
20
+ &:focus {
21
+ border-color: var(--c-primary-500);
22
+ }
23
+
24
+ &:disabled {
25
+ border-color: var(--c-neutral-400);
14
26
 
15
- &:hover, &:focus
16
- {
17
- border-color: var(--c-primary-500);
27
+ &:hover,
28
+ &:focus,
29
+ &.error {
30
+ border-color: var(--c-neutral-400);
18
31
  }
32
+ }
19
33
  }
20
34
 
21
- .tc-rev-input-label
22
- {
35
+ .tc-rev-input-label {
23
36
  font-family: var(--f-family);
24
37
  font-size: var(--f-size-14);
25
38
  font-weight: var(--f-weight-600);
@@ -28,16 +41,38 @@
28
41
  margin: 0;
29
42
  }
30
43
 
31
- .tc-rev-search-input-container
32
- {
44
+ .tc-rev-input-container {
45
+ &--row {
46
+ align-items: center;
47
+ display: flex;
48
+ gap: var(--size-8);
49
+ justify-content: flex-start;
50
+
51
+ label {
52
+ margin: 0;
53
+ }
54
+ }
55
+
56
+ &--column {
57
+ align-items: flex-start;
58
+ display: flex;
59
+ flex-direction: column;
60
+ gap: var(--size-4);
61
+
62
+ label {
63
+ margin: 0;
64
+ }
65
+ }
66
+ }
67
+
68
+ .tc-rev-search-input-container {
33
69
  position: relative;
34
70
  max-height: var(--size-40);
35
71
  min-height: var(--size-40);
36
72
  height: var(--size-40);
37
73
  min-width: 7.5rem;
38
74
 
39
- .tc-rev-search-input-control
40
- {
75
+ .tc-rev-search-input-control {
41
76
  border: 1px solid var(--c-neutral-400);
42
77
  border-radius: var(--bor-radius-pill);
43
78
  color: var(--c-neutral-900);
@@ -56,14 +91,13 @@
56
91
  width: 100%;
57
92
  z-index: 1;
58
93
 
59
- &:hover, &:focus
60
- {
61
- border-color: var(--c-primary-500);
94
+ &:hover,
95
+ &:focus {
96
+ border-color: var(--c-primary-500);
62
97
  }
63
98
  }
64
99
 
65
- .tc-rev-search-input-btn
66
- {
100
+ .tc-rev-search-input-btn {
67
101
  cursor: pointer;
68
102
  display: block;
69
103
  position: absolute;
@@ -72,25 +106,23 @@
72
106
  z-index: 2;
73
107
  font-size: var(--f-size-16);
74
108
  background-color: var(--c-primary-500);
75
- border-radius: var(--bor-radius-rounded);
109
+ border-radius: var(--bor-radius-rounded);
76
110
  border: none;
77
111
  width: var(--size-32);
78
112
  height: var(--size-32);
79
113
  color: var(--c-neutral-50);
80
114
  font-size: var(--f-size-16);
81
- }
115
+ }
82
116
  }
83
117
 
84
- .tc-rev-input-icon-container
85
- {
118
+ .tc-rev-input-icon-container {
86
119
  position: relative;
87
120
  max-height: var(--size-40);
88
121
  min-height: var(--size-40);
89
122
  height: var(--size-40);
90
123
  min-width: 7.5rem;
91
124
 
92
- .tc-rev-input-icon-control
93
- {
125
+ .tc-rev-input-icon-control {
94
126
  border: 1px solid var(--c-neutral-400);
95
127
  border-radius: var(--bor-radius-pill);
96
128
  color: var(--c-neutral-900);
@@ -109,14 +141,13 @@
109
141
  width: 100%;
110
142
  z-index: 1;
111
143
 
112
- &:hover, &:focus
113
- {
114
- border-color: var(--c-primary-500);
144
+ &:hover,
145
+ &:focus {
146
+ border-color: var(--c-primary-500);
115
147
  }
116
148
  }
117
149
 
118
- .tc-rev-input-icon
119
- {
150
+ .tc-rev-input-icon {
120
151
  align-content: center;
121
152
  display: block;
122
153
  position: absolute;
@@ -127,16 +158,16 @@
127
158
  width: var(--size-32);
128
159
  height: var(--size-32);
129
160
  text-align: center;
130
- }
161
+ }
131
162
  }
132
163
 
133
-
134
164
  // RESET RADIO INPUT START
135
- input[type=radio].tc-rev-input-control {
165
+ input[type='radio'].tc-rev-input-control {
136
166
  position: initial;
137
167
  margin: initial;
138
168
 
139
- &:after, &:before {
169
+ &:after,
170
+ &:before {
140
171
  content: '';
141
172
  position: initial;
142
173
  border-radius: initial;
@@ -162,7 +193,7 @@ input[type=radio].tc-rev-input-control {
162
193
  }
163
194
  // RESET RADIO INPUT END
164
195
 
165
- input[type="radio"].tc-rev-input-control {
196
+ input[type='radio'].tc-rev-input-control {
166
197
  appearance: none;
167
198
  -webkit-appearance: none;
168
199
  -moz-appearance: none;
@@ -178,11 +209,11 @@ input[type="radio"].tc-rev-input-control {
178
209
  position: relative;
179
210
  cursor: pointer;
180
211
 
181
- &:checked {
212
+ &:checked {
182
213
  border: 1px solid var(--c-primary-500);
183
214
  }
184
215
 
185
- &:checked::before {
216
+ &:checked::before {
186
217
  content: '';
187
218
  background-color: var(--c-primary-500);
188
219
  border-radius: var(--bor-radius-rounded);
@@ -195,11 +226,12 @@ input[type="radio"].tc-rev-input-control {
195
226
  }
196
227
  }
197
228
 
198
- input[type=checkbox].tc-rev-input-checkbox {
229
+ input[type='checkbox'].tc-rev-input-checkbox {
199
230
  position: initial;
200
231
  margin: initial;
201
232
 
202
- &:after, &:before {
233
+ &:after,
234
+ &:before {
203
235
  content: '';
204
236
  position: initial;
205
237
  border-radius: initial;
@@ -211,6 +243,7 @@ input[type=checkbox].tc-rev-input-checkbox {
211
243
  height: initial;
212
244
  width: initial;
213
245
  left: initial;
246
+ top: initial;
214
247
  margin: initial;
215
248
  border: initial;
216
249
  }
@@ -224,13 +257,17 @@ input[type=checkbox].tc-rev-input-checkbox {
224
257
 
225
258
  left: initial;
226
259
  top: initial;
227
- border: initial;
260
+ border: initial;
228
261
  border-width: initial;
229
262
  transform: initial;
230
263
  }
264
+
265
+ &:checked:after {
266
+ border-color: initial;
267
+ }
231
268
  }
232
269
 
233
- input[type=checkbox].tc-rev-input-checkbox {
270
+ input[type='checkbox'].tc-rev-input-checkbox {
234
271
  appearance: none;
235
272
  -webkit-appearance: none;
236
273
  width: 20px;
@@ -245,7 +282,7 @@ input[type=checkbox].tc-rev-input-checkbox {
245
282
  display: inline-block;
246
283
  vertical-align: middle;
247
284
 
248
- &::before {
285
+ &:before {
249
286
  content: '';
250
287
  display: block;
251
288
  width: 100%;
@@ -259,7 +296,7 @@ input[type=checkbox].tc-rev-input-checkbox {
259
296
  z-index: 1;
260
297
  }
261
298
 
262
- &::after {
299
+ &:after {
263
300
  content: '';
264
301
  display: block;
265
302
  position: absolute;
@@ -280,13 +317,15 @@ input[type=checkbox].tc-rev-input-checkbox {
280
317
  background: var(--c-primary-500);
281
318
  }
282
319
 
283
- &:checked::before {
320
+ &:checked:before {
284
321
  background: var(--c-primary-500);
285
322
  }
286
323
 
287
- &:checked::after {
324
+ &:checked:after {
288
325
  background: #fff;
289
- mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
290
- -webkit-mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
326
+ mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
327
+ no-repeat center/contain;
328
+ -webkit-mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
329
+ no-repeat center/contain;
291
330
  }
292
- }
331
+ }
package/scss/tcloud-revitalizacao/components/_tc-rev-tab-item.scss CHANGED
@@ -1,39 +1,47 @@
1
- .tc-rev-tab-item
2
- {
3
- background-color: var(--c-neutral-50);
4
- border: var(--bor-size-1) solid var(--c-neutral-400);
5
- border-radius: var(--bor-radius-8);
6
- color: var(--c-neutral-900);
7
- cursor: pointer;
8
- font-size: var(--f-size-14);
9
- height: var(--size-40);
10
- line-height: var(--l-height-20);
11
- padding: 0 var(--size-16);
12
- text-wrap: nowrap;
13
- transition: all 200ms ease;
1
+ .tc-rev-tab-item,
2
+ .tc-rev-tab-item:link {
3
+ align-items: center;
4
+ background-color: var(--c-neutral-50);
5
+ border: var(--bor-size-1) solid var(--c-neutral-400);
6
+ border-radius: var(--bor-radius-8);
7
+ color: var(--c-neutral-900);
8
+ cursor: pointer;
9
+ display: inline-flex;
10
+ font-family: var(--f-family);
11
+ font-size: var(--f-size-14);
12
+ font-weight: 600;
13
+ gap: var(--size-8);
14
+ height: var(--size-40);
15
+ line-height: var(--l-height-20);
16
+ justify-content: center;
17
+ padding: 0 var(--size-16);
18
+ text-wrap: nowrap;
19
+ transition: all 200ms ease;
14
20
 
15
- &:hover, &:focus
16
- {
17
- background-color: var(--c-neutral-200);
18
- border-color: var(--c-neutral-200);
19
- color: var(--c-primary-500);
20
- font-weight: 600;
21
- }
21
+ &:hover,
22
+ &:focus {
23
+ background-color: var(--c-neutral-200);
24
+ border-color: var(--c-neutral-200);
25
+ color: var(--c-primary-500);
26
+ font-weight: 600;
27
+ }
22
28
 
23
- &:active, &.selected, &.active
24
- {
25
- background-color: var(--c-primary-300);
26
- border-color: var(--c-primary-500);
27
- color: var(--c-primary-500);
28
- font-weight: 700;
29
- }
29
+ &:active,
30
+ &.selected,
31
+ &.active {
32
+ background-color: var(--c-primary-300);
33
+ border-color: var(--c-primary-500);
34
+ color: var(--c-primary-500);
35
+ font-weight: 600;
36
+ }
30
37
 
31
- &:disabled
32
- {
33
- background-color: var(--c-neutral-50);
34
- border-color: var(--c-neutral-50);
35
- color: var(--c-neutral-400);
36
- cursor: not-allowed;
37
- font-weight: var(--f-weight-400);
38
- }
39
- }
38
+ &:disabled,
39
+ &.disabled {
40
+ background-color: var(--c-neutral-50);
41
+ border-color: var(--c-neutral-50);
42
+ color: var(--c-neutral-400);
43
+ cursor: not-allowed;
44
+ font-weight: var(--f-weight-400);
45
+ pointer-events: none;
46
+ }
47
+ }
package/scss/tcloud-revitalizacao/tc-rev-styles.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  @use './tc-rev-shadow';
5
5
  @use './tc-rev-sizes';
6
6
  @use './tc-rev-typography';
7
+ @use './components/tc-rev-ag-grid-table';
7
8
  @use './components/tc-rev-table';
8
9
  @use './components/tc-rev-button';
9
10
  @use './components/tc-rev-input-control';
@@ -23,4 +24,4 @@
23
24
 
24
25
  .power-bi-container .report-container{
25
26
  height: 1200px;;
26
- }
27
+ }