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/src/css/dialog.scss CHANGED
@@ -1,63 +1,67 @@
1
- html > body {
2
- .mat-mdc-dialog-title.draggable {
3
- cursor: grab;
4
- cursor: -moz-grab;
5
- cursor: -webkit-grab;
6
- }
1
+ /// @param {String} $scope-selector
2
+ @mixin apply-dialog-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
3
+ #{$scope-selector} {
4
+ .mat-mdc-dialog-title.draggable {
5
+ cursor: grab;
6
+ cursor: -moz-grab;
7
+ cursor: -webkit-grab;
7
8
 
8
- .mat-mdc-dialog-title.draggable:active {
9
- cursor: grabbing;
10
- cursor: -moz-grabbing;
11
- cursor: -webkit-grabbing;
12
- }
9
+ &:active {
10
+ cursor: grabbing;
11
+ cursor: -moz-grabbing;
12
+ cursor: -webkit-grabbing;
13
+ }
14
+ }
13
15
 
14
- // fix for malformed dialog titles
15
- // see: https://github.com/angular/components/issues/26539
16
- .mat-mdc-dialog-title {
17
- padding-top: 18px;
18
- &::before {
19
- display: none;
16
+ // fix for malformed dialog titles
17
+ // see: https://github.com/angular/components/issues/26539
18
+ .mat-mdc-dialog-title {
19
+ padding-top: 18px;
20
+ &::before {
21
+ display: none;
22
+ }
20
23
  }
21
- }
22
24
 
23
- .mat-mdc-dialog-container {
24
- .mat-mdc-dialog-actions {
25
- padding-left: 24px;
26
- padding-bottom: 18px;
27
- gap: 8px;
25
+ .mat-mdc-dialog-container {
26
+ .mat-mdc-dialog-actions {
27
+ padding-left: 24px;
28
+ padding-bottom: 18px;
29
+ gap: 8px;
28
30
 
29
- .mat-mdc-button-base + .mat-mdc-button-base {
30
- margin-left: unset;
31
+ .mat-mdc-button-base + .mat-mdc-button-base {
32
+ margin-left: unset;
33
+ }
31
34
  }
32
- }
33
35
 
34
- .mat-mdc-dialog-content {
35
- color: var(--panel-description-color);
36
- font-size: 13px;
37
- line-height: var(--text-line-height);
36
+ .mat-mdc-dialog-content {
37
+ color: var(--panel-description-color);
38
+ font-size: 13px;
39
+ line-height: var(--text-line-height);
38
40
 
39
- ul {
40
- padding-inline-start: 30px;
41
- margin-block-start: 6px;
42
- margin-block-end: 3px;
41
+ ul {
42
+ padding-inline-start: 30px;
43
+ margin-block-start: 6px;
44
+ margin-block-end: 3px;
45
+ }
43
46
  }
44
47
  }
45
- }
46
48
 
47
- .saving-indicator-panel .mat-mdc-dialog-container {
48
- --mat-dialog-container-shape: 16px;
49
- --mat-dialog-content-padding: 14px 20px;
49
+ .saving-indicator-panel .mat-mdc-dialog-container {
50
+ --mat-dialog-container-shape: 16px;
51
+ --mat-dialog-content-padding: 14px 20px;
50
52
 
51
- .mat-mdc-dialog-surface {
52
- box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
53
+ .mat-mdc-dialog-surface {
54
+ box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
55
+ }
53
56
  }
54
- }
55
57
 
56
- .saving-indicator-backdrop {
57
- background-color: var(--saving-indicator-backdrop-color);
58
- }
58
+ .saving-indicator-backdrop {
59
+ background-color: var(--saving-indicator-backdrop-color);
60
+ }
59
61
 
60
- .cdk-overlay-dark-backdrop {
61
- background: rgba(0, 0, 0, 0.6);
62
+ // Optional: If you want this strictly for your package, use a custom backdropClass instead.
63
+ .cdk-overlay-dark-backdrop {
64
+ background: rgba(0, 0, 0, 0.6);
65
+ }
62
66
  }
63
67
  }
package/src/css/icon.scss CHANGED
@@ -1,11 +1,14 @@
1
- html > body {
2
- // there's a bug where circular icons with small font size are cropped at the top and bottom
3
- // https://github.com/google/material-design-icons/issues/679
4
- .mat-icon.icon-transform-rotate {
5
- transform: rotate(0.03deg);
6
- }
1
+ /// @param {String} $scope-selector
2
+ @mixin apply-icon-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
3
+ #{$scope-selector} {
4
+ // there's a bug where circular icons with small font size are cropped at the top and bottom
5
+ // https://github.com/google/material-design-icons/issues/679
6
+ .mat-icon.icon-transform-rotate {
7
+ transform: rotate(0.03deg);
8
+ }
7
9
 
8
- .mat-icon.icon-transform-rotate-90 {
9
- transform: rotate(90deg);
10
+ .mat-icon.icon-transform-rotate-90 {
11
+ transform: rotate(90deg);
12
+ }
10
13
  }
11
14
  }
package/src/css/snackbar.scss CHANGED
@@ -1,16 +1,19 @@
1
- html > body {
2
- .mat-mdc-snack-bar-container {
3
- .mdc-snackbar__label {
4
- a {
5
- color: var(--notification-font-color);
6
- text-decoration: underline;
1
+ /// @param {String} $scope-selector
2
+ @mixin apply-snackbar-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
3
+ #{$scope-selector} {
4
+ .mat-mdc-snack-bar-container {
5
+ .mdc-snackbar__label {
6
+ a {
7
+ color: var(--notification-font-color);
8
+ text-decoration: underline;
9
+ }
7
10
  }
8
- }
9
11
 
10
- .mdc-snackbar__surface {
11
- background-color: transparent !important;
12
- border: unset !important;
13
- padding-right: unset !important;
12
+ .mdc-snackbar__surface {
13
+ background-color: transparent !important;
14
+ border: unset !important;
15
+ padding-right: unset !important;
16
+ }
14
17
  }
15
18
  }
16
19
  }
package/src/css/table.scss CHANGED
@@ -1,142 +1,145 @@
1
- @use '@angular/material' as mat;
1
+ @use "@angular/material" as mat;
2
+
3
+ /// @param {String} $scope-selector
4
+ @mixin apply-table-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
5
+ #{$scope-selector} {
6
+ .data-table,
7
+ .mat-mdc-table {
8
+ border-spacing: 0;
9
+ background-color: unset;
10
+
11
+ thead tr {
12
+ background-color: var(--table-header-color) !important;
13
+ height: var(--table-row-height) !important;
14
+ }
2
15
 
3
- html > body {
4
- .data-table,
5
- .mat-mdc-table {
6
- border-spacing: 0;
7
- background-color: unset;
16
+ tbody tr:not(.detail-row) {
17
+ height: var(--table-row-height) !important;
18
+ }
8
19
 
9
- thead tr {
10
- background-color: var(--table-header-color) !important;
11
- height: var(--table-row-height) !important;
12
- }
20
+ tbody tr:not(.detail-row):hover {
21
+ background-color: var(--table-row-hover-background) !important;
22
+ }
13
23
 
14
- tbody tr:not(.detail-row) {
15
- height: var(--table-row-height) !important;
16
- }
24
+ tbody tr td,
25
+ thead tr th {
26
+ padding-left: 8px !important;
27
+ padding-right: 8px !important;
28
+ font-size: 12px !important;
29
+ line-height: normal !important;
30
+ text-align: left;
31
+ }
17
32
 
18
- tbody tr:not(.detail-row):hover {
19
- background-color: var(--table-row-hover-background) !important;
20
- }
33
+ thead tr th {
34
+ color: var(--mat-table-header-headline-color) !important;
35
+ font-weight: var(--table-header-font-weight) !important;
36
+ border-top: var(--table-border) !important;
37
+ border-bottom: var(--table-border) !important;
38
+ }
21
39
 
22
- tbody tr td,
23
- thead tr th {
24
- padding-left: 8px !important;
25
- padding-right: 8px !important;
26
- font-size: 12px !important;
27
- line-height: normal !important;
28
- text-align: left;
29
- }
40
+ thead tr th:last-of-type {
41
+ border-right: var(--table-border) !important;
42
+ border-top-right-radius: var(--table-border-radius);
43
+ }
30
44
 
31
- thead tr th {
32
- color: var(--mat-table-header-headline-color) !important;
33
- font-weight: var(--table-header-font-weight) !important;
34
- border-top: var(--table-border) !important;
35
- border-bottom: var(--table-border) !important;
36
- }
45
+ thead tr th:first-of-type {
46
+ border-left: var(--table-border) !important;
47
+ border-top-left-radius: var(--table-border-radius);
48
+ }
37
49
 
38
- thead tr th:last-of-type {
39
- border-right: var(--table-border) !important;
40
- border-top-right-radius: var(--table-border-radius);
41
- }
50
+ tbody tr td:first-of-type {
51
+ border-left: var(--table-border) !important;
52
+ }
42
53
 
43
- thead tr th:first-of-type {
44
- border-left: var(--table-border) !important;
45
- border-top-left-radius: var(--table-border-radius);
46
- }
54
+ tbody tr td:last-of-type {
55
+ border-right: var(--table-border) !important;
56
+ }
47
57
 
48
- tbody tr td:first-of-type {
49
- border-left: var(--table-border) !important;
50
- }
58
+ tbody tr:not(:last-of-type) {
59
+ td {
60
+ border-bottom: 1px solid var(--table-cell-border-color);
61
+ }
62
+ }
51
63
 
52
- tbody tr td:last-of-type {
53
- border-right: var(--table-border) !important;
54
- }
64
+ tbody tr:last-of-type {
65
+ td {
66
+ border-bottom: var(--table-border) !important;
67
+ }
55
68
 
56
- tbody tr:not(:last-of-type) {
57
- td {
58
- border-bottom: 1px solid var(--table-cell-border-color);
69
+ td:first-of-type {
70
+ border-bottom-left-radius: var(--table-border-radius);
71
+ }
72
+
73
+ td:last-of-type {
74
+ border-bottom-right-radius: var(--table-border-radius);
75
+ }
59
76
  }
60
- }
61
77
 
62
- tbody tr:last-of-type {
63
- td {
64
- border-bottom: var(--table-border) !important;
78
+ tbody tr:nth-child(even) {
79
+ background-color: var(--table-even-row-color);
65
80
  }
66
81
 
67
- td:first-of-type {
68
- border-bottom-left-radius: var(--table-border-radius);
82
+ tbody tr:nth-child(odd) {
83
+ background-color: var(--table-odd-row-color);
69
84
  }
70
85
 
71
- td:last-of-type {
72
- border-bottom-right-radius: var(--table-border-radius);
86
+ .green {
87
+ color: var(--table-status-green);
73
88
  }
74
- }
75
89
 
76
- tbody tr:nth-child(even) {
77
- background-color: var(--table-even-row-color);
90
+ .red {
91
+ color: var(--table-status-red);
92
+ }
78
93
  }
79
94
 
80
- tbody tr:nth-child(odd) {
81
- background-color: var(--table-odd-row-color);
95
+ .mat-mdc-paginator-container {
96
+ @include mat.form-field-density(-5);
82
97
  }
83
98
 
84
- .green {
85
- color: var(--table-status-green);
99
+ .mat-mdc-paginator {
100
+ background-color: unset;
86
101
  }
87
102
 
88
- .red {
89
- color: var(--table-status-red);
103
+ .mat-column-actions {
104
+ width: 100px;
105
+ max-width: 100px;
106
+ min-width: 100px;
107
+ text-align: right !important;
90
108
  }
91
- }
92
-
93
- .mat-mdc-paginator-container {
94
- @include mat.form-field-density(-5);
95
- }
96
109
 
97
- .mat-mdc-paginator {
98
- background-color: unset;
99
- }
100
-
101
- .mat-column-actions {
102
- width: 100px;
103
- max-width: 100px;
104
- min-width: 100px;
105
- text-align: right !important;
106
- }
107
-
108
- .icon-column {
109
- mat-icon {
110
- color: var(--action-icon-button-color) !important;
110
+ .icon-column {
111
+ mat-icon {
112
+ color: var(--action-icon-button-color) !important;
113
+ }
111
114
  }
112
- }
113
-
114
- .center-column {
115
- text-align: center !important;
116
- }
117
115
 
118
- .mat-mdc-table {
119
116
  .center-column {
120
- .mat-sort-header-container {
121
- justify-content: center;
122
- margin-left: 18px;
123
- }
117
+ text-align: center !important;
124
118
  }
125
- }
126
119
 
127
- .icon-btn-column,
128
- .mat-column-actions {
129
- .mat-mdc-icon-button {
130
- color: var(--action-icon-button-color) !important;
120
+ .mat-mdc-table {
121
+ .center-column {
122
+ .mat-sort-header-container {
123
+ justify-content: center;
124
+ margin-left: 18px;
125
+ }
126
+ }
131
127
  }
132
128
 
133
- .mat-mdc-icon-button:disabled {
134
- opacity: var(--action-icon-button-disabled-opacity) !important;
129
+ .icon-btn-column,
130
+ .mat-column-actions {
131
+ .mat-mdc-icon-button {
132
+ color: var(--action-icon-button-color) !important;
133
+ }
134
+
135
+ .mat-mdc-icon-button:disabled {
136
+ opacity: var(--action-icon-button-disabled-opacity) !important;
137
+ }
135
138
  }
136
- }
137
139
 
138
- .scrollable {
139
- overflow-x: auto;
140
- scrollbar-width: thin;
140
+ .scrollable {
141
+ overflow-x: auto;
142
+ scrollbar-width: thin;
143
+ }
141
144
  }
142
145
  }
package/src/css/theme.scss CHANGED
@@ -1,9 +1,6 @@
1
1
  @use "@angular/material" as mat;
2
2
  @use "./vars/theme.scss";
3
3
 
4
- @include mat.elevation-classes();
5
- @include mat.app-background();
6
-
7
4
  $typography: mat.m2-define-typography-config(
8
5
  $font-family: 'Montserrat, Roboto, "Helvetica Neue", sans-serif',
9
6
  $subtitle-1: mat.m2-define-typography-level(16px, 28px, 700),
@@ -40,8 +37,16 @@ $dark-theme: mat.m2-define-dark-theme(
40
37
  )
41
38
  );
42
39
 
43
- @include mat.all-component-themes($light-theme);
44
-
45
- [data-theme="dark"] {
46
- @include mat.all-component-colors($dark-theme);
40
+ /// @param {String} $scope-selector
41
+ @mixin apply-package-core-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
42
+ #{$scope-selector} {
43
+ @include mat.elevation-classes();
44
+ @include mat.app-background();
45
+ @include mat.all-component-themes($light-theme);
46
+
47
+ &[data-theme="dark"],
48
+ [data-theme="dark"] & {
49
+ @include mat.all-component-colors($dark-theme);
50
+ }
51
+ }
47
52
  }
package/src/css/tooltip.scss CHANGED
@@ -1,25 +1,30 @@
1
- html > body {
2
- // there's a bug where tooltips are preventing the scroll on touch devices
3
- // https://github.com/angular/components/issues/25566
4
- .mat-mdc-tooltip-trigger {
5
- touch-action: auto !important;
6
- -webkit-user-drag: auto !important;
1
+ /// @param {String} $scope-selector
2
+ @mixin apply-tooltip-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
3
+ #{$scope-selector} {
4
+ // there's a bug where tooltips are preventing the scroll on touch devices
5
+ // https://github.com/angular/components/issues/25566
6
+ .mat-mdc-tooltip-trigger {
7
+ touch-action: auto !important;
8
+ -webkit-user-drag: auto !important;
9
+ }
7
10
  }
8
11
 
9
- .multiline-tooltip {
10
- white-space: pre-line;
12
+ html > body {
13
+ .multiline-tooltip {
14
+ white-space: pre-line;
11
15
 
12
- &.left-aligned {
13
- .mdc-tooltip__surface {
14
- text-align: left;
16
+ &.left-aligned {
17
+ .mdc-tooltip__surface {
18
+ text-align: left;
19
+ }
15
20
  }
16
21
  }
17
- }
18
22
 
19
- .wide-tooltip {
20
- // See also: https://stackoverflow.com/a/78637566
21
- .mdc-tooltip__surface {
22
- max-width: min(800px, 90vw) !important;
23
+ .wide-tooltip {
24
+ // See also: https://stackoverflow.com/a/78637566
25
+ .mdc-tooltip__surface {
26
+ max-width: min(800px, 90vw) !important;
27
+ }
23
28
  }
24
29
  }
25
30
  }