@beacon-interactive-systems-llc/beacon-platform-ui 17.12.2 → 17.12.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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/_material-tabs.scss +218 -208
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
3
- "version": "17.12.2",
3
+ "version": "17.12.3",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^17.3.0",
6
6
  "@angular/core": "^17.3.0",
package/styles/_material-tabs.scss CHANGED
@@ -1,208 +1,218 @@
1
- $platform_tab_contrasts: (
2
- light: (
3
- tabBackground: $beacon-gray-100,
4
- tabAccent: $beacon-cyan-600,
5
- tabBorderBottom: $beacon-cyan-600,
6
- tabLabel: $beacon-gray-500,
7
- tabLabelActive: $beacon-cyan-600
8
- ),
9
- dark: (
10
- tabBackground: $beacon-gray-500,
11
- tabAccent: $beacon-green-550,
12
- tabBorderBottom: $beacon-green-550,
13
- tabLabel: $beacon-gray-300,
14
- tabLabelActive: $beacon-green-550,
15
- ),
16
- highcontrast: (
17
- tabBackground: $beacon-gray-700,
18
- tabAccent:$highcontrast-bright-blue-200,
19
- tabBorderBottom: $highcontrast-teal-100,
20
- tabLabel: $beacon-white,
21
- tabLabelActive: $highcontrast-teal-100
22
- )
23
- );
24
-
25
- .mat-mdc-tab {
26
- @include themify($platform_tab_contrasts) {
27
- background: apply('tabBackground') !important;
28
-
29
- .mdc-tab__text-label {
30
- color: apply('tabLabel') !important;
31
- }
32
-
33
- &.mdc-tab--active .mdc-tab__text-label {
34
- color: apply('tabLabelActive') !important;
35
- }
36
-
37
- &:not(.mat-tab--active) .mdc-tab__text-label {
38
- @include font-weight--light;
39
- }
40
-
41
- .mdc-tab-indicator__content--underline {
42
- border-color: apply('tabBorderBottom') !important;
43
- }
44
- }
45
- }
46
-
47
- .tab-header-background {
48
- @include themify($platform_tab_contrasts) {
49
- background: apply('tabBackground') !important;
50
- }
51
- }
52
-
53
- // Tabs in different areas have some common styles - define for reuse in mixins
54
- $standard-tab-height: 24px;
55
- @mixin platform-tab-styles {
56
- height: $standard-tab-height;
57
- margin-right: 24px;
58
- min-width: unset;
59
- padding: 0px;
60
- }
61
-
62
- @mixin platform-tab-header-label-styles {
63
- box-shadow: none;
64
- z-index: 1001;
65
-
66
- .mat-tab-label-container {
67
- padding-left: 14px;
68
- }
69
-
70
- .mdc-tab__text-label {
71
- font-size: 14px;
72
- height: 23px;
73
- letter-spacing: 0.5px;
74
- min-width: unset;
75
- padding: 0 2px 6px 2px;
76
-
77
- mat-icon.tab-icon {
78
- font-size: 15px;
79
- height: 16px;
80
- margin-right: 4px;
81
- width: 16px;
82
- }
83
- }
84
-
85
- .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
86
- @include font-weight--semibold;
87
- opacity: 1.0;
88
- }
89
- }
90
-
91
- // Entity detail pages
92
- .detail__tabs {
93
- position: absolute;
94
- top: 128px;
95
-
96
- mat-tab-header {
97
- .mat-mdc-tab-labels .mdc-tab {
98
- @include platform-tab-styles();
99
- }
100
- }
101
-
102
- .mat-mdc-tab-group {
103
- .mat-mdc-tab-header {
104
- @include platform-tab-header-label-styles();
105
- margin-top: -74px;
106
- position: fixed !important;
107
- }
108
- }
109
-
110
- .mat-mdc-tab-body-wrapper {
111
- margin-top: -36px;
112
- min-height: 324px;
113
- }
114
- }
115
-
116
- // Notification popover
117
- .popover__tabs {
118
- mat-tab-header {
119
- @include themify($platform_tab_contrasts) {
120
- background: apply('tabBackground') !important;
121
- }
122
- width: 100%;
123
-
124
- .mat-mdc-tab-labels .mdc-tab {
125
- @include platform-tab-styles();
126
-
127
- &:first-of-type {
128
- margin-left: 12px;
129
- }
130
- }
131
- }
132
-
133
- .mat-mdc-tab-group {
134
- .mat-mdc-tab-header {
135
- @include platform-tab-header-label-styles();
136
- }
137
-
138
- .mat-mdc-tab-body-wrapper {
139
- min-height: 100px;
140
-
141
- .tab-content {
142
- max-height: 350px;
143
- overflow-y: scroll;
144
- }
145
- }
146
- }
147
- }
148
-
149
- // Notification center
150
- .widget__tabs {
151
- mat-tab-header {
152
- width: 100%;
153
-
154
- .mat-mdc-tab-labels .mdc-tab {
155
- @include platform-tab-styles();
156
- }
157
- }
158
-
159
- .mat-mdc-tab-group {
160
- .mat-mdc-tab-header {
161
- @include platform-tab-header-label-styles();
162
- margin-top: 0px !important;
163
- position: relative !important;
164
-
165
- .mat-mdc-tab {
166
- background: none !important;
167
- }
168
- }
169
-
170
- .mat-mdc-tab-body-wrapper {
171
- margin-top: 0px;
172
- min-height: unset;
173
- .tab-content {
174
- max-height: 600px;
175
- overflow-y: scroll;
176
- }
177
- }
178
- }
179
- }
180
-
181
- // relevant connector tabs
182
- .connector {
183
- mat-mdc-tab-group {
184
- mat-mdc-tab-header {
185
- padding-left: 12px !important;
186
-
187
- mat-tab-label-container {
188
- padding-left: 12px;
189
- }
190
-
191
- .mdc-tab__text-label {
192
- font-size: 12px;
193
- height: 47px;
194
- margin-right: 12px;
195
- min-width: unset;
196
- padding: 0 6px;
197
- }
198
-
199
- .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
200
- @include font-weight--bold;
201
- @include themify($platform_tab_contrasts) {
202
- color: apply('tabLabelActive') !important;
203
- }
204
- opacity: 1.0;
205
- }
206
- }
207
- }
208
- }
1
+ $platform_tab_contrasts: (
2
+ light: (
3
+ tabBackground: $beacon-gray-100,
4
+ tabAccent: $beacon-cyan-600,
5
+ tabBorderBottom: $beacon-cyan-600,
6
+ tabLabel: $beacon-gray-500,
7
+ tabLabelActive: $beacon-cyan-600
8
+ ),
9
+ dark: (
10
+ tabBackground: $beacon-gray-500,
11
+ tabAccent: $beacon-green-550,
12
+ tabBorderBottom: $beacon-green-550,
13
+ tabLabel: $beacon-gray-300,
14
+ tabLabelActive: $beacon-green-550,
15
+ ),
16
+ highcontrast: (
17
+ tabBackground: $beacon-gray-700,
18
+ tabAccent:$highcontrast-bright-blue-200,
19
+ tabBorderBottom: $highcontrast-teal-100,
20
+ tabLabel: $beacon-white,
21
+ tabLabelActive: $highcontrast-teal-100
22
+ )
23
+ );
24
+
25
+ .mat-mdc-tab {
26
+ @include themify($platform_tab_contrasts) {
27
+ background: apply('tabBackground') !important;
28
+
29
+ .mdc-tab__text-label {
30
+ color: apply('tabLabel') !important;
31
+ }
32
+
33
+ &.mdc-tab--active .mdc-tab__text-label {
34
+ color: apply('tabLabelActive') !important;
35
+ }
36
+
37
+ &:not(.mat-tab--active) .mdc-tab__text-label {
38
+ @include font-weight--light;
39
+ }
40
+
41
+ .mdc-tab-indicator__content--underline {
42
+ border-color: apply('tabBorderBottom') !important;
43
+ }
44
+ }
45
+ }
46
+
47
+ .tab-header-background {
48
+ @include themify($platform_tab_contrasts) {
49
+ background: apply('tabBackground') !important;
50
+ }
51
+ }
52
+
53
+ // Tabs in different areas have some common styles - define for reuse in mixins
54
+ $standard-tab-height: 24px;
55
+ @mixin platform-tab-styles {
56
+ height: $standard-tab-height;
57
+ margin-right: 24px;
58
+ min-width: unset;
59
+ padding: 0px;
60
+ }
61
+
62
+ @mixin platform-tab-header-label-styles {
63
+ box-shadow: none;
64
+ z-index: 1001;
65
+
66
+ .mat-tab-label-container {
67
+ padding-left: 14px;
68
+ }
69
+
70
+ .mdc-tab__text-label {
71
+ font-size: 14px;
72
+ height: 23px;
73
+ letter-spacing: 0.5px;
74
+ min-width: unset;
75
+ padding: 0 2px 6px 2px;
76
+
77
+ mat-icon.tab-icon {
78
+ font-size: 15px;
79
+ height: 16px;
80
+ margin-right: 4px;
81
+ width: 16px;
82
+ }
83
+
84
+ mat-icon.tab-error {
85
+ @include themify($platform_contrasts) {
86
+ color: apply('accentRed');
87
+ }
88
+ font-size: 8px;
89
+ position: absolute;
90
+ right: -17px;
91
+ top: -1px;
92
+ }
93
+ }
94
+
95
+ .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
96
+ @include font-weight--semibold;
97
+ opacity: 1.0;
98
+ }
99
+ }
100
+
101
+ // Entity detail pages
102
+ .detail__tabs {
103
+ position: absolute;
104
+ top: 128px;
105
+
106
+ mat-tab-header {
107
+ .mat-mdc-tab-labels .mdc-tab {
108
+ @include platform-tab-styles();
109
+ }
110
+ }
111
+
112
+ .mat-mdc-tab-group {
113
+ .mat-mdc-tab-header {
114
+ @include platform-tab-header-label-styles();
115
+ margin-top: -74px;
116
+ position: fixed !important;
117
+ }
118
+ }
119
+
120
+ .mat-mdc-tab-body-wrapper {
121
+ margin-top: -36px;
122
+ min-height: 324px;
123
+ }
124
+ }
125
+
126
+ // Notification popover
127
+ .popover__tabs {
128
+ mat-tab-header {
129
+ @include themify($platform_tab_contrasts) {
130
+ background: apply('tabBackground') !important;
131
+ }
132
+ width: 100%;
133
+
134
+ .mat-mdc-tab-labels .mdc-tab {
135
+ @include platform-tab-styles();
136
+
137
+ &:first-of-type {
138
+ margin-left: 12px;
139
+ }
140
+ }
141
+ }
142
+
143
+ .mat-mdc-tab-group {
144
+ .mat-mdc-tab-header {
145
+ @include platform-tab-header-label-styles();
146
+ }
147
+
148
+ .mat-mdc-tab-body-wrapper {
149
+ min-height: 100px;
150
+
151
+ .tab-content {
152
+ max-height: 350px;
153
+ overflow-y: scroll;
154
+ }
155
+ }
156
+ }
157
+ }
158
+
159
+ // Notification center
160
+ .widget__tabs {
161
+ mat-tab-header {
162
+ width: 100%;
163
+
164
+ .mat-mdc-tab-labels .mdc-tab {
165
+ @include platform-tab-styles();
166
+ }
167
+ }
168
+
169
+ .mat-mdc-tab-group {
170
+ .mat-mdc-tab-header {
171
+ @include platform-tab-header-label-styles();
172
+ margin-top: 0px !important;
173
+ position: relative !important;
174
+
175
+ .mat-mdc-tab {
176
+ background: none !important;
177
+ }
178
+ }
179
+
180
+ .mat-mdc-tab-body-wrapper {
181
+ margin-top: 0px;
182
+ min-height: unset;
183
+ .tab-content {
184
+ max-height: 600px;
185
+ overflow-y: scroll;
186
+ }
187
+ }
188
+ }
189
+ }
190
+
191
+ // relevant connector tabs
192
+ .connector {
193
+ mat-mdc-tab-group {
194
+ mat-mdc-tab-header {
195
+ padding-left: 12px !important;
196
+
197
+ mat-tab-label-container {
198
+ padding-left: 12px;
199
+ }
200
+
201
+ .mdc-tab__text-label {
202
+ font-size: 12px;
203
+ height: 47px;
204
+ margin-right: 12px;
205
+ min-width: unset;
206
+ padding: 0 6px;
207
+ }
208
+
209
+ .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
210
+ @include font-weight--bold;
211
+ @include themify($platform_tab_contrasts) {
212
+ color: apply('tabLabelActive') !important;
213
+ }
214
+ opacity: 1.0;
215
+ }
216
+ }
217
+ }
218
+ }