@dev-tcloud/tcloud-ui 5.0.1 → 5.0.2-beta.1

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/README.md +106 -106
  2. package/datepicker/js/_info.txt +3 -3
  3. package/fesm2022/dev-tcloud-tcloud-ui.mjs +74 -74
  4. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  5. package/lib/_modules/tcloud-ui-datepicker/tcloud-ui-datepicker.component.d.ts +1 -1
  6. package/package.json +3 -3
  7. package/scss/components/custom/el-copy.scss +17 -17
  8. package/scss/components/custom/loading-transitions.scss +27 -27
  9. package/scss/components/custom/loading.scss +2 -2
  10. package/scss/components/custom/tab-menu.scss +58 -58
  11. package/scss/components/custom/table.scss +98 -98
  12. package/scss/components/custom/tooltip.scss +89 -89
  13. package/scss/components/custom/ui-datepicker.scss +15 -15
  14. package/scss/components/custom/validation.scss +7 -7
  15. package/scss/components/custom/variables.scss +90 -33
  16. package/scss/components/styles.scss +8 -8
  17. package/scss/tcloud/custom/alerts.scss +37 -37
  18. package/scss/tcloud/custom/buttons.scss +1004 -1003
  19. package/scss/tcloud/custom/card.scss +51 -51
  20. package/scss/tcloud/custom/colors.scss +97 -97
  21. package/scss/tcloud/custom/forms.scss +83 -81
  22. package/scss/tcloud/custom/layout.scss +5 -5
  23. package/scss/tcloud/custom/left-navigation.scss +47 -47
  24. package/scss/tcloud/custom/mixins.scss +318 -318
  25. package/scss/tcloud/custom/tcloud-prime.scss +4519 -4519
  26. package/scss/tcloud/custom/tcloud-standard.scss +121 -121
  27. package/scss/tcloud/custom/text.scss +57 -57
  28. package/scss/tcloud/custom/top-navigation.scss +59 -59
  29. package/scss/tcloud/custom/variables.scss +60 -60
  30. package/scss/tcloud/disaster-recovery/colors.scss +14 -14
  31. package/scss/tcloud/disaster-recovery/layout.scss +13 -13
  32. package/scss/tcloud/disaster-recovery/styles.scss +1 -1
  33. package/scss/tcloud/prime/cards-products.scss +331 -331
  34. package/scss/tcloud/prime/left-navigation.scss +327 -327
  35. package/scss/tcloud/prime/styles.scss +2 -2
  36. package/scss/tcloud/prime/tcloud-prime.scss +3872 -3872
  37. package/scss/tcloud/standard/left-navigation.scss +47 -47
  38. package/scss/tcloud/standard/styles.scss +2 -2
  39. package/scss/tcloud/standard/tcloud-standard.scss +125 -125
  40. package/scss/tcloud/standard/top-navigation.scss +61 -61
  41. package/scss/tcloud/styles.scss +19 -19
  42. package/scss/tcloud/tcloud-ui.scss +7 -7
@@ -1,334 +1,334 @@
1
1
  @use "../custom/mixins";
2
2
 
3
- body.tc-prime{
4
-
5
- //=================================================
6
- // Products Topologies
7
- //=================================================
8
-
9
- //====================================
10
- // Carousel
11
- //====================================
12
-
13
- .env-card-header {
14
- background: none !important;
15
- @include mixins.prime-gray-100;
16
-
17
- .fa-cog,
18
- .icon-date-create {
19
- @include mixins.prime-gray-100;
20
- }
21
-
22
- .status {
23
- color: var(--black);
24
- }
25
- }
26
-
27
- .top-id-wrap:hover .top-id,
28
- .top-id-wrap:hover i {
29
- @include mixins.prime-color;
30
- }
31
-
32
-
33
- .slick-dots li.slick-active button:before {
34
- @include mixins.prime-color;
35
- }
36
-
37
- .slick-dots {
38
-
39
- li {
40
-
41
- button:before {
42
- @include mixins.prime-bgc;
43
- }
44
-
45
- &.slick-active {
46
-
47
- button {
48
-
49
- &:before {
50
- @include mixins.prime-bgc;
51
- opacity: 1;
52
- }
53
- }
54
- }
55
- }
56
- }
57
-
58
- .slick-prev:before,
59
- .slick-next:before {
60
- @include mixins.prime-color;
61
- }
62
-
63
- .env-card-wrap {
64
-
65
- .ibox-content.selected > :after,
66
- .ibox-content:hover > :after {
67
- border-top: 13px solid var(--tc-primary) !important;
68
- }
69
-
70
- .ibox-content:hover,
71
- .ibox-content.selected {
72
- box-shadow: none !important;
73
- }
74
- }
75
-
76
-
77
- .slick-dots {
78
- display: none !important;
79
- }
80
-
81
- .ibox-content.selected > :after,
82
- .ibox-content:hover > :after {
83
- bottom: -13px !important;
84
- }
85
-
86
- .env-card-content {
87
-
88
- .wrap {
89
- flex-flow: row-reverse !important;
90
- }
91
- }
92
-
93
-
94
- .prime-topologies-header {
95
- display: block !important;
96
- }
97
-
98
- .prime-topologies-header-content {
99
- display: flex;
100
- gap: 20px;
101
- align-items: stretch;
102
- border-bottom: 1px solid var(--tc-gray-50);
103
- height: 53px;
104
- }
105
-
106
-
107
- .prime-topology-title-page {
108
- display: flex;
109
- align-items: center;
110
-
111
- h1 {
112
- font-size: 14px !important;
113
- font-weight: 500 !important;
114
- }
115
-
116
- i {
117
- margin-left: 10px;
118
- color: var(--tc-gray-100);
119
- }
120
-
121
- .header-title {
122
- background: transparent !important;
123
- }
124
-
125
- }
126
-
127
- .prime-length-wrap {
128
- display: flex;
129
- gap: 20px;
130
- align-items: center;
131
- border-left: 1px solid var(--tc-gray-50);
132
- padding-left: 20px;
133
-
134
- .tplg-legnth {
135
- font-weight: bold;
136
- }
137
- }
138
-
139
- .env-length,
140
- .header-title {
141
- display: none !important;
142
- }
143
-
144
- .help-docs {
145
- position: absolute !important;
146
- top: -171px !important;
147
- right: -15px !important;
148
-
149
- i {
150
- @include mixins.prime-color;
151
- }
152
- }
153
-
154
- .topologies-header {
155
- min-height: initial !important;
156
- margin: 20px 0 !important;
157
- }
158
-
159
- .ibox-content {
160
- margin-top: 0 !important;
161
- padding: 0 !important;
162
- border: none !important;
163
- }
164
-
165
-
166
- .slick-list .slick-slide .ibox-content.selected .env-card-header .status.error {
167
- color: red !important;
168
- }
169
-
170
- .env-card.error {
171
- .slick-list .slick-slide .ibox-content.selected .env-card-header .fa-cog {
172
- color: red !important;
173
- }
174
-
175
- }
176
-
177
- .env-card {
178
-
179
- .ibox-content {
180
- border: 3px solid var(--tc-gray-100) !important;
181
- border-radius: 5px;
182
-
183
- .env-card-header {
184
- border-bottom: 2px solid var(--tc-gray-100);
185
- }
186
-
187
- &.selected,
188
- &:hover {
189
- border-color: var(--tc-primary) !important;
190
-
191
- .env-card-header {
192
- border-bottom: 2px solid var(--tc-primary) !important;
193
-
194
- .status,
195
- .fa-cog,
196
- .icon-date-create {
197
- @include mixins.prime-color;
198
- }
199
- }
200
- }
201
-
202
- }
203
-
204
- &.error {
205
-
206
- .env-card-header {
207
- border-bottom: 2px solid var(--red) !important;
208
-
209
- .status,
210
- .icon-date-create {
211
- color: var(--red) !important;
212
- }
213
-
214
- .status{
215
- color: var(--red) !important;
216
-
217
- &.error {
218
- background-color: transparent !important;
219
- }
220
- }
221
- }
222
-
223
- .ibox-content {
224
- border-color: var(--red) !important;
225
-
226
- &.selected,
227
- &:hover
228
- {
229
-
230
- .env-card-header {
231
- border-bottom: 2px solid var(--red) !important;
232
-
233
- .fa-cog,
234
- .status,
235
- .icon-date-create {
236
- color: var(--red) !important;
237
- }
238
-
239
- i {
240
- color: var(--red) !important;
241
- }
242
-
243
- }
244
-
245
- .env-card-content {
246
-
247
- &:after {
248
- border-top-color: var(--red) !important;
249
- }
250
- }
251
- }
252
- }
253
- }
254
-
255
- &.migrating {
256
-
257
- .env-card-header {
258
- border-bottom: 2px solid var(--second) !important;
259
-
260
- .status,
261
- .icon-date-create {
262
- color: var(--second) !important;
263
- }
264
-
265
- .status{
266
- color: var(--second) !important;
267
-
268
- &.error {
269
- background-color: transparent !important;
270
- }
271
- }
272
- }
273
-
274
- .ibox-content {
275
- border-color: var(--second) !important;
276
-
277
- &.selected,
278
- &:hover
279
- {
280
-
281
- .env-card-header {
282
- border-bottom: 2px solid var(--second) !important;
283
-
284
- .fa-cog,
285
- .status,
286
- .icon-date-create {
287
- color: var(--second) !important;
288
- }
289
-
290
- i {
291
- color: var(--second) !important;
292
- }
293
-
294
- }
295
-
296
- .env-card-content {
297
-
298
- &:after {
299
- border-top-color: var(--second) !important;
300
- }
301
- }
302
- }
303
- }
304
- }
305
- }
306
-
307
-
308
-
309
- .bedge-wrap {
310
-
311
- &.wrap-footer {
312
-
313
- .label-success,
314
- .badge-success {
315
- color: var(--black) !important;
316
- font-weight: normal;
317
- }
318
- }
319
- }
320
-
321
- .internet-access-box,
322
- .legendas {
323
- background: var(--tc-gray-10) !important;
324
- }
325
-
326
- .vpn-list-box {
327
- // @include test;
328
-
329
- .vpn-box {
330
- background-color: var(--tc-gray-10) !important;
331
- }
332
- }
333
-
3
+ body.tc-prime{
4
+
5
+ //=================================================
6
+ // Products Topologies
7
+ //=================================================
8
+
9
+ //====================================
10
+ // Carousel
11
+ //====================================
12
+
13
+ .env-card-header {
14
+ background: none !important;
15
+ @include mixins.prime-gray-100;
16
+
17
+ .fa-cog,
18
+ .icon-date-create {
19
+ @include mixins.prime-gray-100;
20
+ }
21
+
22
+ .status {
23
+ color: var(--black);
24
+ }
25
+ }
26
+
27
+ .top-id-wrap:hover .top-id,
28
+ .top-id-wrap:hover i {
29
+ @include mixins.prime-color;
30
+ }
31
+
32
+
33
+ .slick-dots li.slick-active button:before {
34
+ @include mixins.prime-color;
35
+ }
36
+
37
+ .slick-dots {
38
+
39
+ li {
40
+
41
+ button:before {
42
+ @include mixins.prime-bgc;
43
+ }
44
+
45
+ &.slick-active {
46
+
47
+ button {
48
+
49
+ &:before {
50
+ @include mixins.prime-bgc;
51
+ opacity: 1;
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
57
+
58
+ .slick-prev:before,
59
+ .slick-next:before {
60
+ @include mixins.prime-color;
61
+ }
62
+
63
+ .env-card-wrap {
64
+
65
+ .ibox-content.selected > :after,
66
+ .ibox-content:hover > :after {
67
+ border-top: 13px solid var(--tc-primary) !important;
68
+ }
69
+
70
+ .ibox-content:hover,
71
+ .ibox-content.selected {
72
+ box-shadow: none !important;
73
+ }
74
+ }
75
+
76
+
77
+ .slick-dots {
78
+ display: none !important;
79
+ }
80
+
81
+ .ibox-content.selected > :after,
82
+ .ibox-content:hover > :after {
83
+ bottom: -13px !important;
84
+ }
85
+
86
+ .env-card-content {
87
+
88
+ .wrap {
89
+ flex-flow: row-reverse !important;
90
+ }
91
+ }
92
+
93
+
94
+ .prime-topologies-header {
95
+ display: block !important;
96
+ }
97
+
98
+ .prime-topologies-header-content {
99
+ display: flex;
100
+ gap: 20px;
101
+ align-items: stretch;
102
+ border-bottom: 1px solid var(--tc-gray-50);
103
+ height: 53px;
104
+ }
105
+
106
+
107
+ .prime-topology-title-page {
108
+ display: flex;
109
+ align-items: center;
110
+
111
+ h1 {
112
+ font-size: 14px !important;
113
+ font-weight: 500 !important;
114
+ }
115
+
116
+ i {
117
+ margin-left: 10px;
118
+ color: var(--tc-gray-100);
119
+ }
120
+
121
+ .header-title {
122
+ background: transparent !important;
123
+ }
124
+
125
+ }
126
+
127
+ .prime-length-wrap {
128
+ display: flex;
129
+ gap: 20px;
130
+ align-items: center;
131
+ border-left: 1px solid var(--tc-gray-50);
132
+ padding-left: 20px;
133
+
134
+ .tplg-legnth {
135
+ font-weight: bold;
136
+ }
137
+ }
138
+
139
+ .env-length,
140
+ .header-title {
141
+ display: none !important;
142
+ }
143
+
144
+ .help-docs {
145
+ position: absolute !important;
146
+ top: -171px !important;
147
+ right: -15px !important;
148
+
149
+ i {
150
+ @include mixins.prime-color;
151
+ }
152
+ }
153
+
154
+ .topologies-header {
155
+ min-height: initial !important;
156
+ margin: 20px 0 !important;
157
+ }
158
+
159
+ .ibox-content {
160
+ margin-top: 0 !important;
161
+ padding: 0 !important;
162
+ border: none !important;
163
+ }
164
+
165
+
166
+ .slick-list .slick-slide .ibox-content.selected .env-card-header .status.error {
167
+ color: red !important;
168
+ }
169
+
170
+ .env-card.error {
171
+ .slick-list .slick-slide .ibox-content.selected .env-card-header .fa-cog {
172
+ color: red !important;
173
+ }
174
+
175
+ }
176
+
177
+ .env-card {
178
+
179
+ .ibox-content {
180
+ border: 3px solid var(--tc-gray-100) !important;
181
+ border-radius: 5px;
182
+
183
+ .env-card-header {
184
+ border-bottom: 2px solid var(--tc-gray-100);
185
+ }
186
+
187
+ &.selected,
188
+ &:hover {
189
+ border-color: var(--tc-primary) !important;
190
+
191
+ .env-card-header {
192
+ border-bottom: 2px solid var(--tc-primary) !important;
193
+
194
+ .status,
195
+ .fa-cog,
196
+ .icon-date-create {
197
+ @include mixins.prime-color;
198
+ }
199
+ }
200
+ }
201
+
202
+ }
203
+
204
+ &.error {
205
+
206
+ .env-card-header {
207
+ border-bottom: 2px solid var(--red) !important;
208
+
209
+ .status,
210
+ .icon-date-create {
211
+ color: var(--red) !important;
212
+ }
213
+
214
+ .status{
215
+ color: var(--red) !important;
216
+
217
+ &.error {
218
+ background-color: transparent !important;
219
+ }
220
+ }
221
+ }
222
+
223
+ .ibox-content {
224
+ border-color: var(--red) !important;
225
+
226
+ &.selected,
227
+ &:hover
228
+ {
229
+
230
+ .env-card-header {
231
+ border-bottom: 2px solid var(--red) !important;
232
+
233
+ .fa-cog,
234
+ .status,
235
+ .icon-date-create {
236
+ color: var(--red) !important;
237
+ }
238
+
239
+ i {
240
+ color: var(--red) !important;
241
+ }
242
+
243
+ }
244
+
245
+ .env-card-content {
246
+
247
+ &:after {
248
+ border-top-color: var(--red) !important;
249
+ }
250
+ }
251
+ }
252
+ }
253
+ }
254
+
255
+ &.migrating {
256
+
257
+ .env-card-header {
258
+ border-bottom: 2px solid var(--second) !important;
259
+
260
+ .status,
261
+ .icon-date-create {
262
+ color: var(--second) !important;
263
+ }
264
+
265
+ .status{
266
+ color: var(--second) !important;
267
+
268
+ &.error {
269
+ background-color: transparent !important;
270
+ }
271
+ }
272
+ }
273
+
274
+ .ibox-content {
275
+ border-color: var(--second) !important;
276
+
277
+ &.selected,
278
+ &:hover
279
+ {
280
+
281
+ .env-card-header {
282
+ border-bottom: 2px solid var(--second) !important;
283
+
284
+ .fa-cog,
285
+ .status,
286
+ .icon-date-create {
287
+ color: var(--second) !important;
288
+ }
289
+
290
+ i {
291
+ color: var(--second) !important;
292
+ }
293
+
294
+ }
295
+
296
+ .env-card-content {
297
+
298
+ &:after {
299
+ border-top-color: var(--second) !important;
300
+ }
301
+ }
302
+ }
303
+ }
304
+ }
305
+ }
306
+
307
+
308
+
309
+ .bedge-wrap {
310
+
311
+ &.wrap-footer {
312
+
313
+ .label-success,
314
+ .badge-success {
315
+ color: var(--black) !important;
316
+ font-weight: normal;
317
+ }
318
+ }
319
+ }
320
+
321
+ .internet-access-box,
322
+ .legendas {
323
+ background: var(--tc-gray-10) !important;
324
+ }
325
+
326
+ .vpn-list-box {
327
+ // @include test;
328
+
329
+ .vpn-box {
330
+ background-color: var(--tc-gray-10) !important;
331
+ }
332
+ }
333
+
334
334
  }