@dev-tcloud/tcloud-ui 5.0.2 → 5.0.3

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 (55) 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 +1 -1
  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 +57 -57
  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 +32 -32
  16. package/scss/components/styles.scss +8 -8
  17. package/scss/tcloud/custom/alerts.scss +37 -37
  18. package/scss/tcloud/custom/buttons.scss +1002 -1002
  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 +81 -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
  43. package/scss/tcloud-revitalizacao/_tc-rev-border.scss +93 -0
  44. package/scss/tcloud-revitalizacao/_tc-rev-colors.scss +74 -0
  45. package/scss/tcloud-revitalizacao/_tc-rev-opacity.scss +19 -0
  46. package/scss/tcloud-revitalizacao/_tc-rev-shadow.scss +25 -0
  47. package/scss/tcloud-revitalizacao/_tc-rev-sizes.scss +159 -0
  48. package/scss/tcloud-revitalizacao/_tc-rev-themes.scss +39 -0
  49. package/scss/tcloud-revitalizacao/_tc-rev-typography.scss +122 -0
  50. package/scss/tcloud-revitalizacao/components/_tc-rev-button.scss +172 -0
  51. package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss +292 -0
  52. package/scss/tcloud-revitalizacao/components/_tc-rev-tab-item.scss +39 -0
  53. package/scss/tcloud-revitalizacao/components/_tc-rev-table.scss +57 -0
  54. package/scss/tcloud-revitalizacao/components/_tc-rev-util.scss +24 -0
  55. package/scss/tcloud-revitalizacao/tc-rev-styles.scss +26 -0
@@ -1,122 +1,122 @@
1
- @import './colors.scss';
2
-
3
- // ===============================
4
- // T-Cloud Styles
5
- // ===============================
6
-
7
- body {
8
- font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
9
- background: var(--tc-base-main);
10
- font-size: 13px;
11
- color: #676a6c;
12
- overflow-x: hidden;
13
- }
14
-
15
- html,
16
- body {
17
- height: 100%;
18
- }
19
-
20
- a:hover {
21
- text-decoration: none!important;
22
- }
23
-
24
- // ---------------------------------------------
25
- // Card
26
- // ---------------------------------------------
27
-
28
- .card {
29
- background: #fff;
30
- color: var(--tc-gray-500);
31
- border-radius: 10px;
32
- padding: 20px;
33
- border: none;
34
- }
35
-
36
- .card-container {
37
- background: var(--white);
38
- border-radius: 20px;
39
- padding: 20px;
40
- }
41
-
42
- .card-title {
43
- color: var(--tc-primary);
44
- text-transform: uppercase;
45
- font-size: 16px;
46
- margin-top: 0;
47
- font-weight: normal;
48
- }
49
-
50
- .card.shadow {
51
- box-shadow: 2px 3px 20px rgba(var(--black), .1)!important;
52
- }
53
-
54
- .card.card-shadow {
55
- box-shadow: 2px 3px 20px rgba(var(--black), .1);
56
- }
57
-
58
- .card.margin-top {
59
- margin-top: 20px;
60
- }
61
-
62
- .card-shadow {
63
- background: var(--white);
64
- border-radius: 10px;
65
- box-shadow: 2px 3px 20px rgba(var(--black), .1);
66
- padding: 20px;
67
- margin-bottom: 20px;
68
- }
69
-
70
- .card-shadow-header {
71
- display: flex;
72
- justify-content: space-between;
73
- flex-flow: column;
74
- gap: 10px;
75
- margin-bottom: 15px;
76
- padding-bottom: 15px;
77
- border-bottom: 1px solid var(--tc-gray-200);
78
- }
79
-
80
- .card-shadow-tit {
81
- font-size: 16px;
82
- color:var(--tc-primary);
83
- text-transform: uppercase;
84
- margin: 0;
85
- }
86
-
87
- .card-shadow-subtit {
88
- font-size: 12px;
89
- }
90
-
91
- .card-shadow-content-tit {
92
- color: var(--tc-primary);
93
- margin-bottom: 20px;
94
- }
95
-
96
- .quick-filter-wrap {
97
- margin-bottom: 15px;
98
-
99
- input {
100
- margin-left: 5px;
101
- }
102
- }
103
-
104
- .tc-pipeline-report-all {
105
-
106
- .wrapper-content {
107
- padding: 10px 0;
108
- }
109
-
110
- .form-group {
111
- margin: 0 !important;
112
- padding: 0 0 10px !important;
113
- border-bottom: none!important;
114
- }
115
- }
116
-
117
- .trustcenter-container {
118
-
119
- .trust-center-prime {
120
- display: none;
121
- }
1
+ @import './colors.scss';
2
+
3
+ // ===============================
4
+ // T-Cloud Styles
5
+ // ===============================
6
+
7
+ body {
8
+ font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
9
+ background: var(--tc-base-main);
10
+ font-size: 13px;
11
+ color: #676a6c;
12
+ overflow-x: hidden;
13
+ }
14
+
15
+ html,
16
+ body {
17
+ height: 100%;
18
+ }
19
+
20
+ a:hover {
21
+ text-decoration: none!important;
22
+ }
23
+
24
+ // ---------------------------------------------
25
+ // Card
26
+ // ---------------------------------------------
27
+
28
+ .card {
29
+ background: #fff;
30
+ color: var(--tc-gray-500);
31
+ border-radius: 10px;
32
+ padding: 20px;
33
+ border: none;
34
+ }
35
+
36
+ .card-container {
37
+ background: var(--white);
38
+ border-radius: 20px;
39
+ padding: 20px;
40
+ }
41
+
42
+ .card-title {
43
+ color: var(--tc-primary);
44
+ text-transform: uppercase;
45
+ font-size: 16px;
46
+ margin-top: 0;
47
+ font-weight: normal;
48
+ }
49
+
50
+ .card.shadow {
51
+ box-shadow: 2px 3px 20px rgba(var(--black), .1)!important;
52
+ }
53
+
54
+ .card.card-shadow {
55
+ box-shadow: 2px 3px 20px rgba(var(--black), .1);
56
+ }
57
+
58
+ .card.margin-top {
59
+ margin-top: 20px;
60
+ }
61
+
62
+ .card-shadow {
63
+ background: var(--white);
64
+ border-radius: 10px;
65
+ box-shadow: 2px 3px 20px rgba(var(--black), .1);
66
+ padding: 20px;
67
+ margin-bottom: 20px;
68
+ }
69
+
70
+ .card-shadow-header {
71
+ display: flex;
72
+ justify-content: space-between;
73
+ flex-flow: column;
74
+ gap: 10px;
75
+ margin-bottom: 15px;
76
+ padding-bottom: 15px;
77
+ border-bottom: 1px solid var(--tc-gray-200);
78
+ }
79
+
80
+ .card-shadow-tit {
81
+ font-size: 16px;
82
+ color:var(--tc-primary);
83
+ text-transform: uppercase;
84
+ margin: 0;
85
+ }
86
+
87
+ .card-shadow-subtit {
88
+ font-size: 12px;
89
+ }
90
+
91
+ .card-shadow-content-tit {
92
+ color: var(--tc-primary);
93
+ margin-bottom: 20px;
94
+ }
95
+
96
+ .quick-filter-wrap {
97
+ margin-bottom: 15px;
98
+
99
+ input {
100
+ margin-left: 5px;
101
+ }
102
+ }
103
+
104
+ .tc-pipeline-report-all {
105
+
106
+ .wrapper-content {
107
+ padding: 10px 0;
108
+ }
109
+
110
+ .form-group {
111
+ margin: 0 !important;
112
+ padding: 0 0 10px !important;
113
+ border-bottom: none!important;
114
+ }
115
+ }
116
+
117
+ .trustcenter-container {
118
+
119
+ .trust-center-prime {
120
+ display: none;
121
+ }
122
122
  }
@@ -1,58 +1,58 @@
1
-
2
- // h1, h2, h3, h4, h5, h6, p {
3
- // margin: 0;
4
- // }
5
-
6
- // h2, h3, h4, h5, h6 {
7
- // margin-bottom: 20px;
8
- // }
9
-
10
- // p,
11
- // label,
12
- // ul,
13
- // dl {
14
- // font-size: 13px;
15
- // }
16
-
17
- // p,
18
- // ul,
19
- // dl,
20
- // code {
21
- // line-height: 20px;
22
- // }
23
-
24
- // .text {
25
- // margin-bottom: 20px;
26
- // }
27
-
28
- .tc-uppercase{
29
- text-transform: uppercase;
30
- }
31
-
32
- .tc-lowercase{
33
- text-transform: lowercase;
34
- }
35
-
36
- .tc-text-left{
37
- text-align: left;
38
- }
39
-
40
- .tc-text-center{
41
- text-align: center;
42
- }
43
-
44
- .tc-text-right{
45
- text-align: right;
46
- }
47
-
48
- .tc-text-primary {
49
- color: var(--tc-primary);
50
- }
51
-
52
- .tc-text-warning {
53
- color: var(--warning);
54
- }
55
-
56
- .tc-text-danger {
57
- color: var(--danger);
1
+
2
+ // h1, h2, h3, h4, h5, h6, p {
3
+ // margin: 0;
4
+ // }
5
+
6
+ // h2, h3, h4, h5, h6 {
7
+ // margin-bottom: 20px;
8
+ // }
9
+
10
+ // p,
11
+ // label,
12
+ // ul,
13
+ // dl {
14
+ // font-size: 13px;
15
+ // }
16
+
17
+ // p,
18
+ // ul,
19
+ // dl,
20
+ // code {
21
+ // line-height: 20px;
22
+ // }
23
+
24
+ // .text {
25
+ // margin-bottom: 20px;
26
+ // }
27
+
28
+ .tc-uppercase{
29
+ text-transform: uppercase;
30
+ }
31
+
32
+ .tc-lowercase{
33
+ text-transform: lowercase;
34
+ }
35
+
36
+ .tc-text-left{
37
+ text-align: left;
38
+ }
39
+
40
+ .tc-text-center{
41
+ text-align: center;
42
+ }
43
+
44
+ .tc-text-right{
45
+ text-align: right;
46
+ }
47
+
48
+ .tc-text-primary {
49
+ color: var(--tc-primary);
50
+ }
51
+
52
+ .tc-text-warning {
53
+ color: var(--warning);
54
+ }
55
+
56
+ .tc-text-danger {
57
+ color: var(--danger);
58
58
  }
@@ -1,59 +1,59 @@
1
- .tc-top-navigation{
2
-
3
- .tc-navbar-nav{
4
- margin-right: 5px !important;
5
- li{
6
- .tc-btn{
7
- margin: 5px !important;
8
- }
9
-
10
- .label-warning{
11
- margin-left: 3px;
12
- }
13
- }
14
- }
15
-
16
- .dropdown-toggle::after{
17
- display: none !important;
18
- }
19
-
20
- .navbar-collapse{
21
- &.collapse{
22
- &.show{
23
- ul{
24
- li{
25
- .tc-btn:first-child{
26
- width: 100% !important;
27
- display: flex !important;
28
- margin: 5px;
29
- justify-content: left;
30
- padding-left: 24px;
31
- }
32
- }
33
- }
34
-
35
-
36
- }
37
- }
38
- }
39
- }
40
-
41
- .tc-prime{
42
- .tc-top-navigation{
43
- ul{
44
- li > .tc-btn{
45
- border: none !important;
46
- background: transparent !important;
47
- }
48
- }
49
- }
50
- }
51
-
52
- .tc-top-navigation{
53
- .dropdown{
54
- .dropdown-menu{
55
- z-index: 2001 !important;
56
- }
57
- }
58
- }
59
-
1
+ .tc-top-navigation{
2
+
3
+ .tc-navbar-nav{
4
+ margin-right: 5px !important;
5
+ li{
6
+ .tc-btn{
7
+ margin: 5px !important;
8
+ }
9
+
10
+ .label-warning{
11
+ margin-left: 3px;
12
+ }
13
+ }
14
+ }
15
+
16
+ .dropdown-toggle::after{
17
+ display: none !important;
18
+ }
19
+
20
+ .navbar-collapse{
21
+ &.collapse{
22
+ &.show{
23
+ ul{
24
+ li{
25
+ .tc-btn:first-child{
26
+ width: 100% !important;
27
+ display: flex !important;
28
+ margin: 5px;
29
+ justify-content: left;
30
+ padding-left: 24px;
31
+ }
32
+ }
33
+ }
34
+
35
+
36
+ }
37
+ }
38
+ }
39
+ }
40
+
41
+ .tc-prime{
42
+ .tc-top-navigation{
43
+ ul{
44
+ li > .tc-btn{
45
+ border: none !important;
46
+ background: transparent !important;
47
+ }
48
+ }
49
+ }
50
+ }
51
+
52
+ .tc-top-navigation{
53
+ .dropdown{
54
+ .dropdown-menu{
55
+ z-index: 2001 !important;
56
+ }
57
+ }
58
+ }
59
+
@@ -1,60 +1,60 @@
1
- @use 'colors.scss';
2
-
3
-
4
- :root {
5
- //--font-awesome: 'Font Awesome 5 free';
6
- --font-awesome: 'Font Awesome 6 Pro';
7
- }
8
-
9
- // ==================================================
10
- // Old Colors
11
- // ==================================================
12
-
13
-
14
- // Basic Colors
15
- $navy: #1ab394; // Primary color
16
- $dark-gray: #c2c2c2; // Default color
17
- $blue: #1c84c6; // Success color
18
- $lazur: #23c6c8; // Info color
19
- $yellow: #f8ac59; // Warning color
20
- $red: #ED5565; // Danger color
21
-
22
- // Various colors
23
- $text-color: #676a6c; // Body text
24
- $gray: #f3f3f4; // Background wrapper color
25
- $light-gray: #D1DADE; // Default label, badge
26
- $label-badge-color: #5E5E5E;
27
- $light-blue:#f3f6fb;
28
-
29
- // Spinner color and margin
30
- $spin-color: $navy;
31
- $spin-margin: 0 auto;
32
-
33
- //Basics
34
- $basic-link-color: #337ab7;
35
-
36
- // IBOX colors ( default panel colors)
37
- $border-color: #e7eaec; // IBox border
38
- $ibox-title-bg:#ffffff; // IBox Background header
39
- $ibox-content-bg:#ffffff; // IBox Background content
40
-
41
- //Sidebar width
42
- $sidebar-width: 220px;
43
-
44
- // Boxed layout width
45
- $boxed-width: 1200px;
46
- $boxed-background: url('patterns/shattered.png');
47
-
48
- //Border radius for buttons
49
- $btn-border-radius: 3px;
50
-
51
- //Navigation
52
- $nav-bg: #0a85a4;
53
- $nav-profile-pattern: url("patterns/header-profile.png");
54
- $nav-text-color: var(--tc-base-secondary);
55
-
56
-
57
-
58
- @function getColorWithOpacity($color, $opacity) {
59
- @return rgba($color, $opacity);
60
- }
1
+ @use 'colors.scss';
2
+
3
+
4
+ :root {
5
+ //--font-awesome: 'Font Awesome 5 free';
6
+ --font-awesome: 'Font Awesome 6 Pro';
7
+ }
8
+
9
+ // ==================================================
10
+ // Old Colors
11
+ // ==================================================
12
+
13
+
14
+ // Basic Colors
15
+ $navy: #1ab394; // Primary color
16
+ $dark-gray: #c2c2c2; // Default color
17
+ $blue: #1c84c6; // Success color
18
+ $lazur: #23c6c8; // Info color
19
+ $yellow: #f8ac59; // Warning color
20
+ $red: #ED5565; // Danger color
21
+
22
+ // Various colors
23
+ $text-color: #676a6c; // Body text
24
+ $gray: #f3f3f4; // Background wrapper color
25
+ $light-gray: #D1DADE; // Default label, badge
26
+ $label-badge-color: #5E5E5E;
27
+ $light-blue:#f3f6fb;
28
+
29
+ // Spinner color and margin
30
+ $spin-color: $navy;
31
+ $spin-margin: 0 auto;
32
+
33
+ //Basics
34
+ $basic-link-color: #337ab7;
35
+
36
+ // IBOX colors ( default panel colors)
37
+ $border-color: #e7eaec; // IBox border
38
+ $ibox-title-bg:#ffffff; // IBox Background header
39
+ $ibox-content-bg:#ffffff; // IBox Background content
40
+
41
+ //Sidebar width
42
+ $sidebar-width: 220px;
43
+
44
+ // Boxed layout width
45
+ $boxed-width: 1200px;
46
+ $boxed-background: url('patterns/shattered.png');
47
+
48
+ //Border radius for buttons
49
+ $btn-border-radius: 3px;
50
+
51
+ //Navigation
52
+ $nav-bg: #0a85a4;
53
+ $nav-profile-pattern: url("patterns/header-profile.png");
54
+ $nav-text-color: var(--tc-base-secondary);
55
+
56
+
57
+
58
+ @function getColorWithOpacity($color, $opacity) {
59
+ @return rgba($color, $opacity);
60
+ }
@@ -1,15 +1,15 @@
1
- :root {
2
-
3
- body.tc-disaster-recovery{
4
- // theme color
5
- /*
6
- --tc-primary: var(--orange);
7
- --tc-primary-lighten: #ffba3a;
8
-
9
- --tc-primary2: #d89c2c;
10
- --tc-complemt: #ecb54e;
11
- --tc-complemt-2: #b57a0e;
12
- --tc-complemt-3: #c39643;
13
- */
14
- }
1
+ :root {
2
+
3
+ body.tc-disaster-recovery{
4
+ // theme color
5
+ /*
6
+ --tc-primary: var(--orange);
7
+ --tc-primary-lighten: #ffba3a;
8
+
9
+ --tc-primary2: #d89c2c;
10
+ --tc-complemt: #ecb54e;
11
+ --tc-complemt-2: #b57a0e;
12
+ --tc-complemt-3: #c39643;
13
+ */
14
+ }
15
15
  }
@@ -1,14 +1,14 @@
1
- body.tc-disaster-recovery {
2
-
3
- .gray-bg, .bg-muted {
4
- background-color: #ffeed9;
5
- }
6
-
7
- nav.navbar{
8
- .tcloud-name{
9
- color: #fff;
10
- }
11
- background-color: var(--orange) !important;
12
- }
13
-
1
+ body.tc-disaster-recovery {
2
+
3
+ .gray-bg, .bg-muted {
4
+ background-color: #ffeed9;
5
+ }
6
+
7
+ nav.navbar{
8
+ .tcloud-name{
9
+ color: #fff;
10
+ }
11
+ background-color: var(--orange) !important;
12
+ }
13
+
14
14
  }
@@ -1,2 +1,2 @@
1
- @use 'colors.scss';
1
+ @use 'colors.scss';
2
2
  @use 'layout.scss';