@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,52 +1,52 @@
1
- // ---------------------------------
2
- // tc-card
3
- // ---------------------------------
4
-
5
- .tc-card {
6
- font-size: 13px;
7
- background: var(--white);
8
- color: var(--tc-gray-500);
9
- border-radius: 15px;
10
- box-shadow: 2px 3px 20px rgb(0 0 0 / 8%);
11
- padding: 20px;
12
- margin-bottom: 20px;
13
- }
14
-
15
- .tc-card-header {
16
- display: flex;
17
- justify-content: space-between;
18
- flex-flow: column;
19
- gap: 10px;
20
- margin-bottom: 15px;
21
- padding-bottom: 15px;
22
- border-bottom: 1px solid var(--tc-gray-200);
23
- }
24
-
25
- .tc-card-title {
26
- color: var(--tc-primary);
27
- font-size: 16px;
28
- font-weight: normal;
29
- text-transform: uppercase;
30
- margin: 0;
31
- }
32
-
33
- .tc-card-description {
34
- font-size: 11px;
35
- margin: 0;
36
- }
37
-
38
- .tc-card-footer {
39
- display: flex;
40
- align-items: center;
41
- flex-flow: row;
42
- justify-content: flex-end;
43
- gap: 20px;
44
- margin-top: 15px;
45
- padding-top: 15px;
46
- border-top: 1px solid var(--tc-gray-200);
47
-
48
- button,
49
- .tc-btn {
50
- margin: 0!important;
51
- }
1
+ // ---------------------------------
2
+ // tc-card
3
+ // ---------------------------------
4
+
5
+ .tc-card {
6
+ font-size: 13px;
7
+ background: var(--white);
8
+ color: var(--tc-gray-500);
9
+ border-radius: 15px;
10
+ box-shadow: 2px 3px 20px rgb(0 0 0 / 8%);
11
+ padding: 20px;
12
+ margin-bottom: 20px;
13
+ }
14
+
15
+ .tc-card-header {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ flex-flow: column;
19
+ gap: 10px;
20
+ margin-bottom: 15px;
21
+ padding-bottom: 15px;
22
+ border-bottom: 1px solid var(--tc-gray-200);
23
+ }
24
+
25
+ .tc-card-title {
26
+ color: var(--tc-primary);
27
+ font-size: 16px;
28
+ font-weight: normal;
29
+ text-transform: uppercase;
30
+ margin: 0;
31
+ }
32
+
33
+ .tc-card-description {
34
+ font-size: 11px;
35
+ margin: 0;
36
+ }
37
+
38
+ .tc-card-footer {
39
+ display: flex;
40
+ align-items: center;
41
+ flex-flow: row;
42
+ justify-content: flex-end;
43
+ gap: 20px;
44
+ margin-top: 15px;
45
+ padding-top: 15px;
46
+ border-top: 1px solid var(--tc-gray-200);
47
+
48
+ button,
49
+ .tc-btn {
50
+ margin: 0!important;
51
+ }
52
52
  }
@@ -1,97 +1,97 @@
1
- :root {
2
-
3
- body.tc-prime{
4
- // theme color
5
- --tc-primary: #6B48FF;
6
- --tc-primary-lighten: #886dfc;
7
-
8
- --tc-primary2: #4a29dc;
9
- --tc-complemt: #7b5ffa;
10
- --tc-complemt-2: #5B35FC;
11
- --tc-complemt-3: #8970fb;
12
-
13
- --tc-base-main: #363636;
14
- --tc-base-main-lighten: #363431;
15
-
16
- --second: #FEAC0E;
17
- --second2: #EEEEEE;
18
- --white: #fff;
19
- --black: #363636;
20
- --dark: #2f2f2f;
21
- --red: #ff5555;
22
- --green: #1E8E3E;
23
-
24
- &.tc-standard-2 {
25
- --tc-primary: #0897E9;
26
- --tc-primary-lighten: #53A8E2;
27
-
28
- --tc-primary2: #6B48FF;
29
- --tc-complemt: #53A8E2;
30
- --tc-complemt-2: #008BB2;
31
- --tc-complemt-3: #68B9E3;
32
- }
33
- }
34
-
35
- // theme color
36
- --tc-primary: #37b6c4;
37
- --tc-primary-lighten: #5ab8c2;
38
-
39
- --tc-primary2: #136e92;
40
- --tc-complemt: #0ADBE3;
41
- --tc-complemt-2: #136e92;
42
- --tc-complemt-3: #136e92;
43
-
44
- --tc-base-main: #484440;
45
- --tc-base-main-lighten: #4e4a45;
46
-
47
- --tc-base-secondary: #fafafa;
48
-
49
-
50
- // commons
51
- --orange: orange;
52
- --orange-lighten: #ffaf1a;
53
- --red :#dc0217;
54
- --azul: #1c84c6;
55
- --green: #1E8E3E;
56
- --green2: #10ba3c;
57
- --green3: #00965A;
58
- --dark-green: #037f9c;
59
- --black: #000;
60
- --white: #fff;
61
- --blue: #0897E9;
62
- --dark: #363636;
63
- --warning: orange;
64
- --danger: #D93025;
65
- --success :#1E8E3E;
66
- --complete :#039BE5;
67
- --running :#2f0cf8;
68
-
69
- --warning-lighten: #f3b137;
70
- --danger-lighten: #eb5b50;
71
-
72
- // grays
73
- --tc-gray-600: #4e4944;
74
- --tc-gray-500: #8a817b;
75
- --tc-gray-400: #cabfb5;
76
- --tc-gray-300: #d5ccc3;
77
- --tc-gray-200: #e5e3e1;
78
- --tc-gray-100: #f1f1f1;
79
- --tc-gray-50: #f8f9fa;
80
-
81
- // OLD Theme
82
- --gray: #4e4944;
83
- --cinza: #8a817b;
84
- --cinza1: #cabfb5;
85
- --cinza2: #d5ccc3;
86
- --cinza3: #e5e3e1;
87
- --cinza4: #f1f1f1;
88
- --cinza5: #f8f9fa;
89
-
90
- --verde: #37b6c4;
91
-
92
- //GoogleMap
93
- --google-map-orange: #FF9800;
94
- --google-map-blue: #0288D1;
95
- --google-map-purple: #7B1FA2;
96
- --google-map-green: #558B2F;
97
- }
1
+ :root {
2
+
3
+ body.tc-prime{
4
+ // theme color
5
+ --tc-primary: #6B48FF;
6
+ --tc-primary-lighten: #886dfc;
7
+
8
+ --tc-primary2: #4a29dc;
9
+ --tc-complemt: #7b5ffa;
10
+ --tc-complemt-2: #5B35FC;
11
+ --tc-complemt-3: #8970fb;
12
+
13
+ --tc-base-main: #363636;
14
+ --tc-base-main-lighten: #363431;
15
+
16
+ --second: #FEAC0E;
17
+ --second2: #EEEEEE;
18
+ --white: #fff;
19
+ --black: #363636;
20
+ --dark: #2f2f2f;
21
+ --red: #ff5555;
22
+ --green: #1E8E3E;
23
+
24
+ &.tc-standard-2 {
25
+ --tc-primary: #0897E9;
26
+ --tc-primary-lighten: #53A8E2;
27
+
28
+ --tc-primary2: #6B48FF;
29
+ --tc-complemt: #53A8E2;
30
+ --tc-complemt-2: #008BB2;
31
+ --tc-complemt-3: #68B9E3;
32
+ }
33
+ }
34
+
35
+ // theme color
36
+ --tc-primary: #37b6c4;
37
+ --tc-primary-lighten: #5ab8c2;
38
+
39
+ --tc-primary2: #136e92;
40
+ --tc-complemt: #0ADBE3;
41
+ --tc-complemt-2: #136e92;
42
+ --tc-complemt-3: #136e92;
43
+
44
+ --tc-base-main: #484440;
45
+ --tc-base-main-lighten: #4e4a45;
46
+
47
+ --tc-base-secondary: #fafafa;
48
+
49
+
50
+ // commons
51
+ --orange: orange;
52
+ --orange-lighten: #ffaf1a;
53
+ --red :#dc0217;
54
+ --azul: #1c84c6;
55
+ --green: #1E8E3E;
56
+ --green2: #10ba3c;
57
+ --green3: #00965A;
58
+ --dark-green: #037f9c;
59
+ --black: #000;
60
+ --white: #fff;
61
+ --blue: #0897E9;
62
+ --dark: #363636;
63
+ --warning: orange;
64
+ --danger: #D93025;
65
+ --success :#1E8E3E;
66
+ --complete :#039BE5;
67
+ --running :#2f0cf8;
68
+
69
+ --warning-lighten: #f3b137;
70
+ --danger-lighten: #eb5b50;
71
+
72
+ // grays
73
+ --tc-gray-600: #4e4944;
74
+ --tc-gray-500: #8a817b;
75
+ --tc-gray-400: #cabfb5;
76
+ --tc-gray-300: #d5ccc3;
77
+ --tc-gray-200: #e5e3e1;
78
+ --tc-gray-100: #f1f1f1;
79
+ --tc-gray-50: #f8f9fa;
80
+
81
+ // OLD Theme
82
+ --gray: #4e4944;
83
+ --cinza: #8a817b;
84
+ --cinza1: #cabfb5;
85
+ --cinza2: #d5ccc3;
86
+ --cinza3: #e5e3e1;
87
+ --cinza4: #f1f1f1;
88
+ --cinza5: #f8f9fa;
89
+
90
+ --verde: #37b6c4;
91
+
92
+ //GoogleMap
93
+ --google-map-orange: #FF9800;
94
+ --google-map-blue: #0288D1;
95
+ --google-map-purple: #7B1FA2;
96
+ --google-map-green: #558B2F;
97
+ }
@@ -1,81 +1,81 @@
1
- // ---------------------------------
2
- // Forms
3
- // ---------------------------------
4
- // ---------------------------------
5
- // Forms
6
- // ---------------------------------
7
-
8
- .tc-form-control{
9
- display: block;
10
- width: 100%;
11
- padding: .375rem .75rem;
12
- font-size: 12px;
13
- font-weight: 400;
14
- line-height: 1.5;
15
- color: #212529;
16
- background-color: #fff;
17
- background-clip: padding-box;
18
- border: 1px solid var(--tc-gray-300);;
19
- -webkit-appearance: none;
20
- -moz-appearance: none;
21
- appearance: none;
22
- border-radius: .25rem;
23
- transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
24
- height: 40px;
25
- cursor: pointer;
26
-
27
- &:focus {
28
- border-color: var(--tc-primary);
29
- box-shadow: none;
30
- }
31
-
32
- &:focus-visible {
33
- outline: 1px solid var(--tc-primary);
34
- border-radius: 3px;
35
- }
36
-
37
- &:disabled {
38
- cursor: not-allowed;
39
- opacity: 0.6;
40
- background-color: var(--tc-gray-200);
41
- }
42
- }
43
-
44
- textarea.tc-form-control{
45
- min-height: 80px;
46
- }
47
-
48
-
49
- select.tc-form-control{
50
- background-color: #fff;
51
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
52
- background-repeat: no-repeat;
53
- background-position: right .75rem center;
54
- background-size: 16px 12px;
55
-
56
- border: 1px solid var(--tc-gray-300);
57
- border-radius: 3px;
58
- color: var(--cinza);
59
- font-family: "Open Sans";
60
- height: 40px !important;
61
- padding: 0 10px;
62
-
63
- }
64
-
65
-
66
- .tc-form-group{
67
- margin-top: 10px;
68
- display: flex;
69
-
70
- input, select, textarea {
71
- margin-right: 15px;
72
- }
73
-
74
- button{
75
- align-self: end;
76
- }
77
- }
78
-
79
- .tc-group-input-table td:last-child button {
80
- color: var(--cinza);
81
- }
1
+ // ---------------------------------
2
+ // Forms
3
+ // ---------------------------------
4
+ // ---------------------------------
5
+ // Forms
6
+ // ---------------------------------
7
+
8
+ .tc-form-control{
9
+ display: block;
10
+ width: 100%;
11
+ padding: .375rem .75rem;
12
+ font-size: 12px;
13
+ font-weight: 400;
14
+ line-height: 1.5;
15
+ color: #212529;
16
+ background-color: #fff;
17
+ background-clip: padding-box;
18
+ border: 1px solid var(--tc-gray-300);;
19
+ -webkit-appearance: none;
20
+ -moz-appearance: none;
21
+ appearance: none;
22
+ border-radius: .25rem;
23
+ transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
24
+ height: 40px;
25
+ cursor: pointer;
26
+
27
+ &:focus {
28
+ border-color: var(--tc-primary);
29
+ box-shadow: none;
30
+ }
31
+
32
+ &:focus-visible {
33
+ outline: 1px solid var(--tc-primary);
34
+ border-radius: 3px;
35
+ }
36
+
37
+ &:disabled {
38
+ cursor: not-allowed;
39
+ opacity: 0.6;
40
+ background-color: var(--tc-gray-200);
41
+ }
42
+ }
43
+
44
+ textarea.tc-form-control{
45
+ min-height: 80px;
46
+ }
47
+
48
+
49
+ select.tc-form-control{
50
+ background-color: #fff;
51
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
52
+ background-repeat: no-repeat;
53
+ background-position: right .75rem center;
54
+ background-size: 16px 12px;
55
+
56
+ border: 1px solid var(--tc-gray-300);
57
+ border-radius: 3px;
58
+ color: var(--cinza);
59
+ font-family: "Open Sans";
60
+ height: 40px !important;
61
+ padding: 0 10px;
62
+
63
+ }
64
+
65
+
66
+ .tc-form-group{
67
+ margin-top: 10px;
68
+ display: flex;
69
+
70
+ input, select, textarea {
71
+ margin-right: 15px;
72
+ }
73
+
74
+ button{
75
+ align-self: end;
76
+ }
77
+ }
78
+
79
+ .tc-group-input-table td:last-child button {
80
+ color: var(--cinza);
81
+ }
@@ -1,5 +1,5 @@
1
- // ::ng-deep component {}
2
-
3
- // =============================================
4
- // Structure
5
- // =============================================
1
+ // ::ng-deep component {}
2
+
3
+ // =============================================
4
+ // Structure
5
+ // =============================================
@@ -1,48 +1,48 @@
1
-
2
- .menu-area-floating{
3
- -webkit-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
4
- -moz-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
5
- box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
6
- }
7
-
8
- .tc-prime.mini-navbar{
9
- .footer{
10
- display: none;
11
- }
12
- }
13
-
14
- .mini-navbar{
15
- #side-menu{
16
- li{
17
- padding-left: 8px;
18
- }
19
- }
20
- }
21
-
22
- .fixed-sidebar-below{
23
- margin-left: 62px !important;
24
-
25
- .navbar-fixed-top{
26
- z-index: 0;
27
- }
28
-
29
- .wrap-main{
30
- .background-page-global-internal{
31
- margin-top: 8px !important;
32
- }
33
- }
34
-
35
- }
36
-
37
- .mini-navbar{
38
- #page-wrapper{
39
- .wrap-main{
40
- .background-page-global-internal{
41
- margin-top: 70px;
42
- }
43
- }
44
- nav.navbar{
45
- padding: 0 70px 0 0 !important;
46
- }
47
- }
1
+
2
+ .menu-area-floating{
3
+ -webkit-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
4
+ -moz-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
5
+ box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
6
+ }
7
+
8
+ .tc-prime.mini-navbar{
9
+ .footer{
10
+ display: none;
11
+ }
12
+ }
13
+
14
+ .mini-navbar{
15
+ #side-menu{
16
+ li{
17
+ padding-left: 8px;
18
+ }
19
+ }
20
+ }
21
+
22
+ .fixed-sidebar-below{
23
+ margin-left: 62px !important;
24
+
25
+ .navbar-fixed-top{
26
+ z-index: 0;
27
+ }
28
+
29
+ .wrap-main{
30
+ .background-page-global-internal{
31
+ margin-top: 8px !important;
32
+ }
33
+ }
34
+
35
+ }
36
+
37
+ .mini-navbar{
38
+ #page-wrapper{
39
+ .wrap-main{
40
+ .background-page-global-internal{
41
+ margin-top: 70px;
42
+ }
43
+ }
44
+ nav.navbar{
45
+ padding: 0 70px 0 0 !important;
46
+ }
47
+ }
48
48
  }