ng-configcat-publicapi-ui 6.0.2 → 6.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 (24) hide show
  1. package/package.json +1 -1
  2. package/src/css/button.scss +73 -70
  3. package/src/css/controls.scss +318 -310
  4. package/src/css/dialog.scss +50 -46
  5. package/src/css/icon.scss +11 -8
  6. package/src/css/snackbar.scss +14 -11
  7. package/src/css/table.scss +107 -104
  8. package/src/css/theme.scss +12 -7
  9. package/src/css/tooltip.scss +21 -16
  10. package/src/css/variables.scss +267 -261
  11. package/src/css/variation.scss +22 -17
  12. package/src/css/vars/auth.scss +6 -3
  13. package/src/css/vars/banner.scss +6 -3
  14. package/src/css/vars/box.scss +8 -5
  15. package/src/css/vars/config-overview.scss +6 -3
  16. package/src/css/vars/flag.scss +6 -3
  17. package/src/css/vars/header.scss +6 -3
  18. package/src/css/vars/icon.scss +11 -8
  19. package/src/css/vars/logo.scss +6 -3
  20. package/src/css/vars/notification.scss +6 -3
  21. package/src/css/vars/overview.scss +7 -4
  22. package/src/css/vars/prism.scss +7 -4
  23. package/src/css/vars/sidenav.scss +6 -3
  24. package/src/public-api.scss +105 -59
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-configcat-publicapi-ui",
3
- "version": "6.0.2",
3
+ "version": "6.0.3",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/cdk": "^22.1.1",
package/src/css/button.scss CHANGED
@@ -1,102 +1,105 @@
1
1
  @use "@angular/material" as mat;
2
2
 
3
- html > body {
4
- .mat-mdc-icon-button.action-icon-button {
5
- color: var(--action-icon-button-color);
6
- }
7
-
8
- .mat-mdc-icon-button.action-icon-button:disabled {
9
- opacity: var(--action-icon-button-disabled-opacity);
10
- }
11
-
12
- .small-icon-button {
13
- @include mat.icon-button-density(-5);
3
+ /// @param {String} $scope-selector
4
+ @mixin apply-button-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
5
+ #{$scope-selector} {
6
+ .mat-mdc-icon-button.action-icon-button {
7
+ color: var(--action-icon-button-color);
8
+ }
14
9
 
15
- .mat-icon {
16
- padding: 0 0 0 6px !important;
10
+ .mat-mdc-icon-button.action-icon-button:disabled {
11
+ opacity: var(--action-icon-button-disabled-opacity);
17
12
  }
18
13
 
19
- .mat-mdc-icon-button {
14
+ .small-icon-button {
15
+ @include mat.icon-button-density(-5);
16
+
20
17
  .mat-icon {
21
- padding: 0 0 !important;
18
+ padding: 0 0 0 6px !important;
19
+ }
20
+
21
+ .mat-mdc-icon-button {
22
+ .mat-icon {
23
+ padding: 0 0 !important;
24
+ }
22
25
  }
23
26
  }
24
- }
25
27
 
26
- .mdc-button {
27
- white-space: nowrap;
28
- letter-spacing: normal;
29
- font-size: 13px !important;
28
+ .mdc-button {
29
+ white-space: nowrap;
30
+ letter-spacing: normal;
31
+ font-size: 13px !important;
30
32
 
31
- &:not(.mat-button-toggle-button):not(.mat-mdc-icon-button) {
32
- text-transform: uppercase;
33
- height: 34px;
33
+ &:not(.mat-button-toggle-button):not(.mat-mdc-icon-button) {
34
+ text-transform: uppercase;
35
+ height: 34px;
36
+ }
34
37
  }
35
- }
36
38
 
37
- .mat-button-toggle-label-content {
38
- line-height: 34px !important;
39
- }
39
+ .mat-button-toggle-label-content {
40
+ line-height: 34px !important;
41
+ }
40
42
 
41
- .mat-mdc-outlined-button.mat-primary:disabled {
42
- color: var(--mat-button-outlined-disabled-label-text-color) !important;
43
- }
43
+ .mat-mdc-outlined-button.mat-primary:disabled {
44
+ color: var(--mat-button-outlined-disabled-label-text-color) !important;
45
+ }
44
46
 
45
- .mat-mdc-outlined-button.mat-primary {
46
- color: var(--outlined-button-color) !important;
47
- }
47
+ .mat-mdc-outlined-button.mat-primary {
48
+ color: var(--outlined-button-color) !important;
49
+ }
48
50
 
49
- .mat-mdc-outlined-button:not(:disabled) {
50
- border-color: var(--input-border-color);
51
- color: var(--text-color);
52
- }
51
+ .mat-mdc-outlined-button:not(:disabled) {
52
+ border-color: var(--input-border-color);
53
+ color: var(--text-color);
54
+ }
53
55
 
54
- .mat-mdc-unelevated-button.mat-primary .mat-mdc-button-persistent-ripple::before {
55
- background-color: var(--primary-button-state-layer-color);
56
- }
56
+ .mat-mdc-unelevated-button.mat-primary .mat-mdc-button-persistent-ripple::before {
57
+ background-color: var(--primary-button-state-layer-color);
58
+ }
57
59
 
58
- .mat-mdc-unelevated-button.mat-warn .mat-mdc-button-persistent-ripple::before {
59
- background-color: var(--warn-button-state-layer-color);
60
- }
60
+ .mat-mdc-unelevated-button.mat-warn .mat-mdc-button-persistent-ripple::before {
61
+ background-color: var(--warn-button-state-layer-color);
62
+ }
61
63
 
62
- .mat-mdc-unelevated-button {
63
- --mat-button-filled-focus-state-layer-opacity: 0.1;
64
- }
64
+ .mat-mdc-unelevated-button {
65
+ --mat-button-filled-focus-state-layer-opacity: 0.1;
66
+ }
65
67
 
66
- .filled-outline-buttons {
67
- .mat-mdc-outlined-button:not(:disabled) {
68
- background-color: var(--input-background);
68
+ .filled-outline-buttons {
69
+ .mat-mdc-outlined-button:not(:disabled) {
70
+ background-color: var(--input-background);
71
+ }
69
72
  }
70
- }
71
73
 
72
- .mat-datepicker-toggle,
73
- .mat-timepicker-toggle {
74
- @include mat.icon-button-density(-5);
74
+ .mat-datepicker-toggle,
75
+ .mat-timepicker-toggle {
76
+ @include mat.icon-button-density(-5);
75
77
 
76
- .mat-mdc-icon-button {
77
- color: var(--action-icon-button-color);
78
+ .mat-mdc-icon-button {
79
+ color: var(--action-icon-button-color);
80
+ }
78
81
  }
79
- }
80
82
 
81
- .disabled-btn-container {
82
- display: inline-block;
83
- }
83
+ .disabled-btn-container {
84
+ display: inline-block;
85
+ }
84
86
 
85
- .mat-mdc-unelevated-button.mat-success:not(:disabled) {
86
- color: white;
87
- background-color: var(--green-button-background-color);
87
+ .mat-mdc-unelevated-button.mat-success:not(:disabled) {
88
+ color: white;
89
+ background-color: var(--green-button-background-color);
88
90
 
89
- &:hover {
90
- background-color: var(--green-button-background-hover-color);
91
+ &:hover {
92
+ background-color: var(--green-button-background-hover-color);
93
+ }
91
94
  }
92
- }
93
95
 
94
- .mat-mdc-unelevated-button.mat-applied:not(:disabled) {
95
- color: white;
96
- background-color: var(--change-request-status-applied-color);
96
+ .mat-mdc-unelevated-button.mat-applied:not(:disabled) {
97
+ color: white;
98
+ background-color: var(--change-request-status-applied-color);
97
99
 
98
- &:hover {
99
- background-color: var(--change-request-status-applied-hover-color);
100
+ &:hover {
101
+ background-color: var(--change-request-status-applied-hover-color);
102
+ }
100
103
  }
101
104
  }
102
105
  }