@beacon-interactive-systems-llc/beacon-platform-ui 17.5.0 → 17.6.1

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 (14) hide show
  1. package/package.json +1 -1
  2. package/styles/_bootstrap-datepicker.scss +103 -0
  3. package/styles/_buttons.scss +142 -161
  4. package/styles/_forms.scss +36 -25
  5. package/styles/_layout.scss +1 -8
  6. package/styles/_material-drawer.scss +28 -15
  7. package/styles/_ng-select.scss +8 -5
  8. package/styles/_ngx-datepicker.scss +2 -20
  9. package/styles/_popover.scss +20 -1
  10. package/styles/_quill.scss +5 -5
  11. package/styles/_theming.scss +1 -1
  12. package/styles/_toast.scss +26 -55
  13. package/styles/_widgets.scss +33 -0
  14. package/styles/styles.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
3
- "version": "17.5.0",
3
+ "version": "17.6.1",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^17.3.0",
6
6
  "@angular/core": "^17.3.0",
package/styles/_bootstrap-datepicker.scss ADDED
@@ -0,0 +1,103 @@
1
+ $platform_datepicker_contrasts: (
2
+ light: (
3
+ datepickerHeader: $beacon-dark-blue-400,
4
+ datepickerHeaderText: $beacon-white,
5
+ datepickerBackground: $beacon-white,
6
+ datepickerBorder: $beacon-gray-300,
7
+ datepickerText: $beacon-black,
8
+ datepickerTextMuted: $beacon-gray-300,
9
+ datepickerSelected: $beacon-cyan-500,
10
+ datepickerSelectedText: $beacon-white,
11
+ datepickerHighlighted: $beacon-gray-200
12
+ ),
13
+ dark: (
14
+ datepickerHeader: $beacon-dark-blue-600,
15
+ datepickerHeaderText: $beacon-gray-300,
16
+ datepickerBackground: $beacon-gray-700,
17
+ datepickerBorder: $beacon-gray-500,
18
+ datepickerText: $beacon-gray-300,
19
+ datepickerTextMuted: $beacon-gray-400,
20
+ datepickerSelected: $beacon-cyan-600,
21
+ datepickerSelectedText: $beacon-gray-300,
22
+ datepickerHighlighted: $beacon-gray-500
23
+ ),
24
+ highcontrast: (
25
+ datepickerHeader: $highcontrast-bright-blue-300,
26
+ datepickerHeaderText: $beacon-black,
27
+ datepickerBackground: $beacon-black,
28
+ datepickerBorder: $beacon-white,
29
+ datepickerText: $beacon-white,
30
+ datepickerTextMuted: $beacon-gray-300,
31
+ datepickerSelected: $highcontrast-bright-blue-200,
32
+ datepickerSelectedText: $beacon-black,
33
+ datepickerHighlighted: $beacon-gray-500
34
+ )
35
+ );
36
+
37
+ .bs-datepicker-head {
38
+ @include themify($platform_datepicker_contrasts) {
39
+ background: apply('datepickerHeader');
40
+ color: apply('datepickerHeaderText')
41
+ }
42
+ }
43
+
44
+ .bs-datepicker-body {
45
+ @include themify($platform_datepicker_contrasts) {
46
+ background: apply('datepickerBackground');
47
+ border: 1px solid apply('datepickerBorder') !important;
48
+ }
49
+ }
50
+
51
+ .bs-datepicker-container {
52
+ padding: 0px !important;
53
+ }
54
+
55
+ .bs-datepicker-buttons {
56
+ padding: 8px 15px;
57
+ @include themify($platform_datepicker_contrasts) {
58
+ background: apply('datepickerBackground');
59
+ .btn-today-wrapper .btn-success, .btn-clear-wrapper .btn-success {
60
+ border: none;
61
+ background: apply('datepickerHeader') !important;
62
+ color: apply('datepickerHeaderText') !important;
63
+ }
64
+ }
65
+ }
66
+
67
+ .datepicker-today {
68
+ @include themify($platform_datepicker_contrasts) {
69
+ background: apply('datepickerBackground');
70
+ border: 1px solid apply('datepickerBorder');
71
+ }
72
+ }
73
+
74
+ .bs-datepicker-body table td span {
75
+ @include themify($platform_datepicker_contrasts) {
76
+ color: apply('datepickerText');
77
+
78
+ &.is-other-month {
79
+ color: apply('datepickerTextMuted');
80
+ }
81
+
82
+ &.selected {
83
+ background: apply('datepickerSelected');
84
+ color: apply('datepickerSelectedText');
85
+ }
86
+
87
+ &.is-highlighted:not(.disabled):not(.selected) {
88
+ background: apply('datepickerHighlighted');
89
+ }
90
+ }
91
+ }
92
+
93
+ mat-icon.calendar-icon {
94
+ @include font-color--default;
95
+ font-size: 18px;
96
+ position: absolute;
97
+ right: 8px;
98
+ top: 36px;
99
+ }
100
+
101
+ input[type="time"]::-webkit-calendar-picker-indicator {
102
+ background: none;
103
+ }
package/styles/_buttons.scss CHANGED
@@ -1,77 +1,142 @@
1
1
  $platform_button_contrasts: (
2
2
  light: (
3
- buttonBlue: $beacon-dark-blue-400,
4
- buttonBlueAccent: $beacon-white,
5
- buttonCyan: $beacon-cyan-500,
6
- buttonCyanAccent: $beacon-white,
3
+ buttonBlue: $beacon-blue-200,
4
+ buttonBlueHover: $beacon-blue-300,
5
+ buttonBlueActive: $beacon-blue-100,
6
+ buttonBlueText: $beacon-white,
7
+ buttonBlueTextInvert: $beacon-gray-600,
8
+
7
9
  buttonGreen: $beacon-green-500,
8
- buttonGreenAccent: $beacon-white,
9
- buttonRed: $beacon-orange-500,
10
- buttonRedAccent: $beacon-white,
11
- buttonOrange: $beacon-orange-400,
12
- buttonOrangeAccent: $beacon-white,
13
- buttonYellow: $beacon-yellow-500,
14
- buttonYellowAccent: $beacon-black,
10
+ buttonGreenHover: $beacon-green-600,
11
+ buttonGreenActive: $beacon-green-400,
12
+ buttonGreenText: $beacon-white,
13
+ buttonGreenTextInvert: $beacon-gray-600,
14
+
15
+ buttonRed: $beacon-orange-600,
16
+ buttonRedHover: $beacon-orange-500,
17
+ buttonRedActive: $beacon-orange-400,
18
+ buttonRedText: $beacon-white,
19
+ buttonRedTextInvert: $beacon-gray-600,
20
+
15
21
  buttonAmbient: $beacon-white,
16
- buttonAmbientAccent: $beacon-gray-400,
22
+ buttonAmbientHover: $beacon-gray-200,
23
+ buttonAmbientActive: $beacon-gray-100,
24
+ buttonAmbientText: $beacon-gray-600,
25
+ buttonAmbientBorder: $beacon-gray-400,
26
+
17
27
  buttonDisabled: $beacon-gray-300,
28
+ buttonShadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16)
18
29
  ),
19
30
  dark: (
20
- buttonBlue: $beacon-dark-blue-500,
21
- buttonBlueAccent: $beacon-gray-300,
22
- buttonCyan: $beacon-cyan-600,
23
- buttonCyanAccent: $beacon-gray-300,
24
- buttonGreen: $beacon-green-600,
25
- buttonGreenAccent: $beacon-gray-300,
26
- buttonRed: $beacon-orange-700,
27
- buttonRedAccent: $beacon-gray-300,
28
- buttonOrange: $beacon-orange-500,
29
- buttonOrangeAccent: $beacon-gray-300,
30
- buttonYellow: $beacon-yellow-600,
31
- buttonYellowAccent: $beacon-black,
31
+ buttonBlue: $beacon-blue-200,
32
+ buttonBlueHover: $beacon-blue-300,
33
+ buttonBlueActive: $beacon-blue-100,
34
+ buttonBlueText: $beacon-gray-300,
35
+ buttonBlueTextInvert: $beacon-gray-300,
36
+
37
+ buttonGreen: $beacon-green-650,
38
+ buttonGreenHover: $beacon-green-750,
39
+ buttonGreenActive: $beacon-green-550,
40
+ buttonGreenText: $beacon-gray-300,
41
+ buttonGreenTextInvert: $beacon-gray-300,
42
+
43
+ buttonRed: $beacon-orange-650,
44
+ buttonRedHover: $beacon-orange-750,
45
+ buttonRedActive: $beacon-orange-550,
46
+ buttonRedText: $beacon-gray-300,
47
+ buttonRedTextInvert: $beacon-gray-300,
48
+
32
49
  buttonAmbient: $beacon-black,
33
- buttonAmbientAccent: $beacon-gray-300,
34
- buttonDisabled: $beacon-gray-400
50
+ buttonAmbientHover: $beacon-black,
51
+ buttonAmbientActive: $beacon-black,
52
+ buttonAmbientText: $beacon-gray-300,
53
+ buttonAmbientBorder: $beacon-gray-300,
54
+
55
+ buttonDisabled: $beacon-gray-500,
56
+ buttonShadow: none
35
57
  ),
36
58
  highcontrast: (
37
- buttonBlue: $highcontrast-bright-blue-300,
38
- buttonBlueAccent: $beacon-black,
39
- buttonCyan: $highcontrast-bright-blue-100,
40
- buttonCyanAccent: $beacon-black,
59
+ buttonBlue: $highcontrast-bright-blue-200,
60
+ buttonBlueHover: $highcontrast-bright-blue-300,
61
+ buttonBlueActive: $highcontrast-bright-blue-100,
62
+ buttonBlueText: $beacon-black,
63
+ buttonBlueTextInvert: $beacon-white,
64
+
41
65
  buttonGreen: $highcontrast-bright-green-200,
42
- buttonGreenAccent: $beacon-black,
66
+ buttonGreenHover: $highcontrast-bright-green-300,
67
+ buttonGreenActive: $highcontrast-bright-green-100,
68
+ buttonGreenText: $beacon-black,
69
+ buttonGreenTextInvert: $beacon-white,
70
+
43
71
  buttonRed: $highcontrast-bright-orange-300,
44
- buttonRedAccent: $beacon-black,
45
- buttonOrange: $highcontrast-bright-orange-100,
46
- buttonOrangeAccent: $beacon-black,
47
- buttonYellow: $highcontrast-bright-yellow-200,
48
- buttonYellowAccent: $beacon-black,
72
+ buttonRedHover: $highcontrast-bright-orange-400,
73
+ buttonRedActive: $highcontrast-bright-orange-100,
74
+ buttonRedText: $beacon-black,
75
+ buttonRedTextInvert: $beacon-white,
76
+
49
77
  buttonAmbient: $beacon-black,
50
- buttonAmbientAccent: $beacon-white,
51
- buttonDisabled: $beacon-gray-400
78
+ buttonAmbientHover: $beacon-black,
79
+ buttonAmbientActive: $beacon-black,
80
+ buttonAmbientText: $beacon-white,
81
+ buttonAmbientBorder: $beacon-white,
82
+
83
+ buttonDisabled: $beacon-gray-500,
84
+ buttonShadow: none
52
85
  )
53
86
  );
54
87
 
55
- $default-button-border-radius: 6px;
88
+ @mixin button-color-styles($main-color, $hover, $active, $text, $text-invert) {
89
+ background: $main-color;
90
+ color: $text;
91
+
92
+ &:hover {
93
+ background: $hover;
94
+ }
95
+
96
+ &:active {
97
+ background: $active;
98
+ }
99
+
100
+ &--invert {
101
+ background: apply('buttonAmbient');
102
+ color: $text-invert;
103
+ border: 1px solid $main-color;
104
+
105
+ &:hover {
106
+ border-color: $hover;
107
+ }
108
+
109
+ &:active {
110
+ border-color: $active;
111
+ }
112
+
113
+ &.dashed {
114
+ border-style: dashed !important;
115
+ }
116
+ }
117
+ }
56
118
 
57
119
  button.platform-btn {
58
- height: 40px;
120
+ height: 32px;
59
121
  min-width: 48px;
60
- text-transform: uppercase;
122
+ font-size: 12px;
123
+ line-height: 12px;
124
+ border: none;
125
+ @include themify($platform_button_contrasts) {
126
+ box-shadow: apply('buttonShadow');
127
+ }
61
128
 
62
129
  &--pill {
63
- border-radius: 20px;
64
- font-size: 12px;
130
+ border-radius: 41px;
65
131
  }
66
132
 
67
133
  &--square {
68
- border-radius: $default-button-border-radius;
69
- font-size: 16px;
70
- line-height: 16px;
134
+ border-radius: 4px;
135
+ text-transform: uppercase;
71
136
  }
72
137
 
73
138
  &--height-sm {
74
- height: 32px;
139
+ height: 24px;
75
140
  }
76
141
 
77
142
  &--width-sm {
@@ -92,139 +157,55 @@ button.platform-btn {
92
157
 
93
158
  &--bg-blue {
94
159
  @include themify($platform_button_contrasts) {
95
- background: apply('buttonBlue');
96
- color: apply('buttonBlueAccent');
97
-
98
- &:hover {
99
- background: darken(apply('buttonBlue'), 5%);
100
- color: apply('buttonBlueAccent');
101
- }
102
-
103
- &:focus {
104
- background: lighten(apply('buttonBlue'), 5%);
105
- color: apply('buttonBlueAccent');
106
- }
107
- }
108
-
109
- &:disabled {
110
- @include themify($platform_button_contrasts) {
111
- background: apply('buttonDisabled');
112
- color: apply('buttonBlueAccent');
113
- }
114
- border: none;
115
- }
116
- }
117
-
118
- &--bg-cyan {
119
- @include themify($platform_button_contrasts) {
120
- background: apply('buttonCyan');
121
- color: apply('buttonCyanAccent');
122
-
123
- &:hover {
124
- background: darken(apply('buttonCyan'), 5%);
125
- color: apply('buttonCyanAccent');
126
- }
127
-
128
- &:focus {
129
- background: lighten(apply('buttonCyan'), 5%);
130
- color: apply('buttonCyanAccent');
131
- }
132
- }
133
-
134
- &:disabled {
135
- @include themify($platform_button_contrasts) {
136
- background: apply('buttonDisabled');
137
- color: apply('buttonCyanAccent');
138
- }
139
- border: none;
160
+ @include button-color-styles(apply('buttonBlue'), apply('buttonBlueHover'), apply('buttonBlueActive'), apply('buttonBlueText'), apply('buttonBlueTextInvert'));
140
161
  }
141
162
  }
142
163
 
143
164
  &--bg-green {
144
165
  @include themify($platform_button_contrasts) {
145
- background: apply('buttonGreen');
146
- color: apply('buttonGreenAccent');
147
-
148
- &:hover {
149
- background: darken(apply('buttonGreen'), 5%);
150
- color: apply('buttonGreenAccent');
151
- }
152
-
153
- &:focus {
154
- background: lighten(apply('buttonGreen'), 5%);
155
- color: apply('buttonGreenAccent');
156
- }
157
- }
158
-
159
- &:disabled {
160
- @include themify($platform_button_contrasts) {
161
- background: apply('buttonDisabled');
162
- color: apply('buttonGreenAccent');
163
- }
164
- border: none;
166
+ @include button-color-styles(apply('buttonGreen'), apply('buttonGreenHover'), apply('buttonGreenActive'), apply('buttonGreenText'), apply('buttonGreenTextInvert'));
165
167
  }
166
168
  }
167
169
 
168
170
  &--bg-red {
169
171
  @include themify($platform_button_contrasts) {
170
- background: apply('buttonRed');
171
- color: apply('buttonRedAccent');
172
-
173
- &:hover {
174
- background: darken(apply('buttonRed'), 5%);
175
- color: apply('buttonRedAccent');
176
- }
177
-
178
- &:focus {
179
- background: lighten(apply('buttonRed'), 5%);
180
- color: apply('buttonRedAccent');
181
- }
182
- }
183
-
184
- &:disabled {
185
- @include themify($platform_button_contrasts) {
186
- background: apply('buttonDisabled');
187
- color: apply('buttonRedAccent');
188
- }
189
- border: none;
172
+ @include button-color-styles(apply('buttonRed'), apply('buttonRedHover'), apply('buttonRedActive'), apply('buttonRedText'), apply('buttonRedTextInvert'));
190
173
  }
191
174
  }
192
175
 
193
176
  &--bg-ambient {
194
177
  @include themify($platform_button_contrasts) {
195
178
  background: apply('buttonAmbient');
196
- color: apply('buttonAmbientAccent');
197
- border: 1px solid apply('buttonAmbientAccent');
179
+ color: apply('buttonAmbientText');
180
+ border: 1px solid apply('buttonAmbientBorder');
198
181
 
199
182
  &:hover {
200
- background: apply('buttonAmbient');
201
- color: apply('buttonAmbientAccent');
202
- border: 1px solid apply('buttonAmbientAccent');
183
+ background: apply('buttonAmbientHover');
184
+ color: apply('buttonAmbientText');
185
+ border: 1px solid apply('buttonAmbientBorder');
203
186
  }
204
187
 
205
- &:focus {
206
- background: apply('buttonAmbient');
207
- color: apply('buttonAmbientAccent');
208
- border: 1px solid apply('buttonAmbientAccent');
188
+ &:active {
189
+ background: apply('buttonAmbientActive');
190
+ color: apply('buttonAmbientText');
191
+ border: 1px solid apply('buttonAmbientBorder');
209
192
  }
210
193
  }
194
+ }
211
195
 
212
- &:disabled {
213
- @include themify($platform_button_contrasts) {
214
- background: apply('buttonAmbient');
215
- color: apply('buttonDisabled');
216
- border: 1px solid apply('buttonDisabled');
217
- }
196
+ &:disabled {
197
+ @include themify($platform_button_contrasts) {
198
+ background: apply('buttonDisabled');
218
199
  }
219
200
  }
220
201
 
221
202
  mat-icon {
222
- font-size: 16px;
223
- height: 16px;
224
- line-height: 16px;
203
+ font-size: 12px;
204
+ height: 12px;
205
+ line-height: 12px;
225
206
  position: relative;
226
207
  top: 2px;
227
- width: 16px;
208
+ width: 12px;
228
209
  }
229
210
 
230
211
  span.text {
@@ -238,7 +219,7 @@ button.platform-btn {
238
219
  &--toggle {
239
220
  @include themify($platform_button_contrasts) {
240
221
  background-color: apply('buttonAmbient') !important;
241
- border: 1px solid apply('buttonAmbientAccent') !important;
222
+ border: 1px solid apply('buttonAmbientText') !important;
242
223
  }
243
224
  border-radius: 15px;
244
225
 
@@ -248,7 +229,7 @@ button.platform-btn {
248
229
 
249
230
  &:not(.selected) {
250
231
  @include themify($platform_button_contrasts) {
251
- color: apply('buttonAmbientAccent') !important;
232
+ color: apply('buttonAmbientText') !important;
252
233
  }
253
234
  }
254
235
  }
@@ -277,7 +258,7 @@ button.platform-btn {
277
258
 
278
259
  &.selected {
279
260
  background: apply('buttonBlue');
280
- color: apply('buttonBlueAccent');
261
+ color: apply('buttonBlueText');
281
262
  }
282
263
  }
283
264
  }
@@ -290,7 +271,7 @@ button.platform-btn {
290
271
 
291
272
  &.selected {
292
273
  background: apply('buttonOrange');
293
- color: apply('buttonOrangeAccent');
274
+ color: apply('buttonOrangeText');
294
275
  }
295
276
  }
296
277
  }
@@ -303,7 +284,7 @@ button.platform-btn {
303
284
 
304
285
  &.selected {
305
286
  background: apply('buttonGreen');
306
- color: apply('buttonGreenAccent');
287
+ color: apply('buttonGreenText');
307
288
  }
308
289
  }
309
290
  }
@@ -329,7 +310,7 @@ button.platform-btn {
329
310
  .icon-toggle-btn {
330
311
  @include themify($platform_button_contrasts) {
331
312
  background-color: apply('buttonAmbient') !important;
332
- color: apply('buttonAmbientAccent');
313
+ color: apply('buttonAmbientText');
333
314
  }
334
315
  border: none;
335
316
  border-radius: 20px !important;
@@ -341,8 +322,8 @@ button.platform-btn {
341
322
  &--selected {
342
323
  @include themify($platform_button_contrasts) {
343
324
  background-color: apply('buttonGreen') !important;
344
- color: apply('buttonGreenAccent');
345
- border: 1px solid apply('buttonGreenAccent');
325
+ color: apply('buttonGreenText');
326
+ border: 1px solid apply('buttonGreenText');
346
327
  }
347
328
  font-weight: bold;
348
329
  z-index: 100;
@@ -362,8 +343,8 @@ button.platform-btn {
362
343
  .severity-btn {
363
344
  @include themify($platform_button_contrasts) {
364
345
  background: apply('buttonAmbient');
365
- color: apply('buttonAmbientAccent');
366
- border: 1px solid apply('buttonAmbientAccent')
346
+ color: apply('buttonAmbientText');
347
+ border: 1px solid apply('buttonAmbientText')
367
348
  }
368
349
  border-radius: 5px;
369
350
  height: 32px;
package/styles/_forms.scss CHANGED
@@ -5,50 +5,66 @@ $platform_form_contrasts: (
5
5
  formText: $beacon-gray-600,
6
6
  formPlaceholderText: $beacon-gray-400,
7
7
  formInputBackground: $beacon-white,
8
- formInputBottomBorder: $beacon-dark-blue-400,
9
- formInputSurroundBorder: $beacon-gray-400,
10
- formControlFocus: $beacon-dark-blue-200,
11
- formControlFocusText: $beacon-cyan-600,
8
+ formInputBackgroundHover: $beacon-dark-blue-100,
9
+ formInputBorder: $beacon-gray-300,
10
+ formInputBorderActive: $beacon-blue-100,
11
+ formControlSelected: $beacon-dark-blue-200,
12
+ formControlSelectedText: $beacon-cyan-600,
12
13
  formInvalid: $beacon-orange-500,
13
14
  formInputDisabled: $beacon-gray-100,
14
15
  formSelectOpened: $beacon-blue-100,
16
+ formSelectOptionHover: $beacon-dark-blue-200,
15
17
  formSelectShadow: 0 0 0 0.25rem $beacon-dark-blue-700
16
18
  ),
17
19
  dark: (
18
20
  formText: $beacon-gray-300,
19
21
  formPlaceholderText: $beacon-gray-400,
20
22
  formInputBackground: $beacon-gray-600,
21
- formInputBottomBorder: $beacon-dark-blue-300,
22
- formInputSurroundBorder: $beacon-gray-400,
23
- formControlFocus: $beacon-dark-blue-400,
24
- formControlFocusText: $beacon-cyan-300,
23
+ formInputBackgroundHover: $beacon-dark-blue-500,
24
+ formInputBorder: $beacon-gray-300,
25
+ formInputBorderActive: $beacon-dark-blue-400,
26
+ formControlSelected: $beacon-dark-blue-400,
27
+ formControlSelectedText: $beacon-cyan-300,
25
28
  formInvalid: $beacon-orange-600,
26
29
  formInputDisabled: $beacon-gray-500,
27
30
  formSelectOpened: $beacon-blue-100,
31
+ formSelectOptionHover: $beacon-dark-blue-400,
28
32
  formSelectShadow: none
29
33
  ),
30
34
  highcontrast: (
31
35
  formText: $beacon-white,
32
36
  formPlaceholderText: $beacon-white,
33
37
  formInputBackground: $beacon-gray-700,
34
- formInputBottomBorder: $highcontrast-bright-yellow-200,
35
- formInputSurroundBorder: $beacon-white,
36
- formControlFocus: $highcontrast-bright-blue-200,
37
- formControlFocusText: $beacon-white,
38
+ formInputBackgroundHover: $beacon-gray-700,
39
+ formInputBorder: $beacon-white,
40
+ formInputBorderActive: $highcontrast-bright-blue-300,
41
+ formControlSelected: $highcontrast-bright-blue-200,
42
+ formControlSelectedText: $beacon-white,
38
43
  formInvalid: $highcontrast-bright-orange-300,
39
44
  formInputDisabled: $beacon-gray-600,
40
45
  formSelectOpened: $highcontrast-bright-blue-100,
46
+ formSelectOptionHover: $highcontrast-bright-blue-300,
41
47
  formSelectShadow: none
42
48
  )
43
49
  );
44
50
 
45
- @mixin form-element-borders {
51
+ @mixin form-element-border-fill {
46
52
  @include themify($platform_form_contrasts) {
47
- border-bottom: 2px solid apply('formInputBottomBorder');
48
- border-left: 1px solid apply('formInputSurroundBorder');
49
- border-radius: 3px;
50
- border-right: 1px solid apply('formInputSurroundBorder');
51
- border-top: 1px solid apply('formInputSurroundBorder');
53
+ border: 1px solid apply('formInputBorder');
54
+ border-radius: 2px;
55
+ background: apply('formInputBackground');
56
+
57
+ &:hover {
58
+ background: apply('formInputBackgroundHover');
59
+ }
60
+
61
+ &:focus {
62
+ border-color: apply('formInputBorderActive');
63
+ }
64
+
65
+ &:disabled {
66
+ background: apply('formInputDisabled');
67
+ }
52
68
  }
53
69
  }
54
70
 
@@ -84,9 +100,6 @@ $platform_form_contrasts: (
84
100
  }
85
101
 
86
102
  *.form-control:focus {
87
- @include themify($platform_form_contrasts) {
88
- border-color: apply('formControlFocus');
89
- }
90
103
  -webkit-box-shadow: none;
91
104
  box-shadow: none;
92
105
  }
@@ -103,9 +116,8 @@ $platform_form_contrasts: (
103
116
  }
104
117
 
105
118
  input.form-control {
106
- @include form-element-borders;
119
+ @include form-element-border-fill;
107
120
  @include themify($platform_form_contrasts) {
108
- background: apply('formInputBackground');
109
121
  color: apply('formText');
110
122
  @include placeholder-color(apply('formPlaceholderText'));
111
123
  }
@@ -128,9 +140,8 @@ $platform_form_contrasts: (
128
140
  }
129
141
 
130
142
  textarea.form-control {
131
- @include form-element-borders;
143
+ @include form-element-border-fill;
132
144
  @include themify($platform_form_contrasts) {
133
- background: apply('formInputBackground');
134
145
  color: apply('formText');
135
146
  }
136
147
  }
package/styles/_layout.scss CHANGED
@@ -209,7 +209,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
209
209
  }
210
210
 
211
211
  .header-text {
212
- display: inline-flex;
212
+ display: flex;
213
213
  align-items: center;
214
214
  white-space: pre-wrap;
215
215
  }
@@ -364,10 +364,3 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
364
364
  text-decoration: none;
365
365
  }
366
366
  }
367
-
368
- .pending-request-warning {
369
- position: absolute;
370
- right: 13px;
371
- top: 5px;
372
- z-index: 99;
373
- }
package/styles/_material-drawer.scss CHANGED
@@ -1,16 +1,34 @@
1
+ $platform_drawer_contrasts: (
2
+ light: (
3
+ drawerBackground: $beacon-gray-100,
4
+ drawerFooterBackground: $beacon-white,
5
+ drawerFooterShadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.10)
6
+ ),
7
+ dark: (
8
+ drawerBackground: $beacon-black,
9
+ drawerFooterBackground: $beacon-gray-600,
10
+ drawerFooterShadow: none
11
+ ),
12
+ highcontrast: (
13
+ drawerBackground: $beacon-black,
14
+ drawerFooterBackground: $beacon-gray-600,
15
+ drawerFooterShadow: none
16
+ )
17
+ );
18
+
1
19
  .drawer {
2
- @include themify($platform_contrasts) {
3
- background: apply('primaryBackground');
20
+ @include themify($platform_drawer_contrasts) {
21
+ background: apply('drawerBackground');
4
22
  }
5
23
  // hack to get opaque background to show up behind modal
6
24
  box-shadow: 0px 1px 100px -5px rgba(0,0,0,0.25), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 300px 2000px rgba(0,0,0,0.22) !important;
7
- max-height: calc(100vh - 50px);
25
+ max-height: calc(100vh);
8
26
  padding-bottom: 90px;
9
27
  z-index: 1001 !important;
10
28
  position: fixed !important;
11
29
 
12
30
  &--width-standard {
13
- width: 592px !important;
31
+ width: 590px !important;
14
32
  }
15
33
 
16
34
  &--width-double {
@@ -18,16 +36,17 @@
18
36
  }
19
37
 
20
38
  &__body {
21
- padding: 40px 70px;
39
+ padding: 32px;
22
40
  }
23
41
 
24
42
  &__footer {
25
- @include themify($platform_contrasts) {
26
- background: apply('primaryBackground');
43
+ @include themify($platform_drawer_contrasts) {
44
+ background: apply('drawerFooterBackground');
45
+ box-shadow: apply('drawerFooterShadow');
27
46
  }
28
47
  bottom: 0;
29
- height: 90px;
30
- line-height: 90px;
48
+ height: 60px;
49
+ line-height: 60px;
31
50
  position: absolute;
32
51
  width: 100%;
33
52
  left: 0;
@@ -38,12 +57,6 @@
38
57
  }
39
58
  }
40
59
 
41
- .detail-view-container {
42
- .drawer {
43
- margin-top: 50px;
44
- }
45
- }
46
-
47
60
  .drawer--with-margin-top {
48
61
  margin-top: 50px;
49
62
  }
package/styles/_ng-select.scss CHANGED
@@ -28,9 +28,8 @@ $min-dropdown-panel-width: 215px;
28
28
  .ng-select-container {
29
29
  min-height: 32px;
30
30
  height: 32px;
31
- @include form-element-borders;
31
+ @include form-element-border-fill;
32
32
  @include themify($platform_form_contrasts) {
33
- background: apply('formInputBackground') !important;
34
33
  color: apply('formText') !important;
35
34
  }
36
35
  }
@@ -40,17 +39,21 @@ $min-dropdown-panel-width: 215px;
40
39
  @include themify($platform_form_contrasts) {
41
40
  background: apply('formInputBackground') !important;
42
41
  color: apply('formText') !important;
43
- border: 1px solid apply('formInputSurroundBorder') !important;
42
+ border: 1px solid apply('formInputBorder') !important;
44
43
 
45
44
  .ng-dropdown-header {
46
- border-bottom: 1px solid apply('formInputSurroundBorder') !important;
45
+ border-bottom: 1px solid apply('formInputBorder') !important;
47
46
  }
48
47
 
49
48
  .ng-option {
50
49
  color: apply('formText') !important;
51
50
  background: apply('formInputBackground') !important;
52
51
  &.ng-option-selected {
53
- background: apply('formControlFocus') !important;
52
+ background: apply('formControlSelected') !important;
53
+ }
54
+ &:hover {
55
+ background: apply('formSelectOptionHover') !important;
56
+ @include font-weight--bold;
54
57
  }
55
58
  }
56
59
  }
package/styles/_ngx-datepicker.scss CHANGED
@@ -1,21 +1,3 @@
1
- $platform_datepicker_contrasts: (
2
- light: (
3
- datepickerBackground: $beacon-gray-100,
4
- datepickerBorder: $beacon-gray-300
5
- ),
6
- dark: (
7
- datepickerBackground: $beacon-gray-700,
8
- datepickerBorder: $beacon-gray-500
9
- ),
10
- highcontrast: (
11
- datepickerBackground: $beacon-black,
12
- datepickerBorder: $beacon-white
13
- )
14
- );
15
1
 
16
- .datepicker-today {
17
- @include themify($platform_datepicker_contrasts) {
18
- background: apply('datepickerBackground');
19
- border: 1px solid apply('datepickerBorder');
20
- }
21
- }
2
+
3
+
package/styles/_popover.scss CHANGED
@@ -1,8 +1,27 @@
1
+ $platform_popover_contrasts: (
2
+ light: (
3
+ popoverBackground: $beacon-dark-blue-50,
4
+ popoverBorder: $beacon-gray-300,
5
+ ),
6
+ dark: (
7
+ popoverBackground: $beacon-gray-700,
8
+ popoverBorder: $beacon-gray-500,
9
+ ),
10
+ highcontrast: (
11
+ popoverBackground: $beacon-black,
12
+ popoverBorder: $beacon-white,
13
+ )
14
+ );
15
+
1
16
  .popover {
17
+ @include themify($platform_popover_contrasts) {
18
+ background: apply('popoverBackground');
19
+ border: 1px solid apply('popoverBorder');
20
+ }
2
21
  position: absolute;
3
22
  max-width: 100%;
4
23
  }
5
24
 
6
25
  .popover-arrow {
7
26
  position: absolute;
8
- }
27
+ }
package/styles/_quill.scss CHANGED
@@ -3,7 +3,7 @@ quill-editor {
3
3
  .ql-toolbar {
4
4
  @include themify($platform_form_contrasts) {
5
5
  background: apply('formInputBackground') !important;
6
- border-color: apply('formInputSurroundBorder') !important;
6
+ border-color: apply('formInputBorder') !important;
7
7
  }
8
8
  border-top-left-radius: 3px;
9
9
  border-top-right-radius: 3px;
@@ -11,7 +11,7 @@ quill-editor {
11
11
 
12
12
  .ql-container {
13
13
  @include themify($platform_form_contrasts) {
14
- border-color: apply('formInputSurroundBorder') !important;
14
+ border-color: apply('formInputBorder') !important;
15
15
  }
16
16
  border-bottom-left-radius: 3px;
17
17
  border-bottom-right-radius: 3px;
@@ -19,7 +19,7 @@ quill-editor {
19
19
  .ql-editor {
20
20
  @include themify($platform_form_contrasts) {
21
21
  background: apply('formInputBackground') !important;
22
- border-color: 2px solid apply('formInputBottomBorder') !important;
22
+ border-color: 2px solid apply('formInputBorder') !important;
23
23
  }
24
24
  min-height: 100px;
25
25
  }
@@ -30,7 +30,7 @@ quill-editor {
30
30
  .ql-toolbar {
31
31
  @include themify($platform_form_contrasts) {
32
32
  background: apply('formInputBackground') !important;
33
- border-bottom: 2px solid apply('formInputSurroundBorder') !important;
33
+ border-bottom: 2px solid apply('formInputBorder') !important;
34
34
  }
35
35
  border-left: none !important;
36
36
  border-right: none !important;
@@ -59,7 +59,7 @@ quill-editor {
59
59
  .quill-editor-actions {
60
60
  @include themify($platform_form_contrasts) {
61
61
  background: apply('formInputBackground') !important;
62
- border-top: 2px solid apply('formInputSurroundBorder') !important;
62
+ border-top: 2px solid apply('formInputBorder') !important;
63
63
  }
64
64
  padding: 8px;
65
65
 
package/styles/_theming.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  $platform_contrasts: (
2
2
  light: (
3
3
  primaryBackground: $beacon-white,
4
- secondaryBackground: $beacon-gray-100,
4
+ secondaryBackground: $beacon-dark-blue-50,
5
5
  greenBackground: $beacon-green-200,
6
6
  cyanBackground: $beacon-cyan-500,
7
7
  blueBackground: $beacon-dark-blue-300,
package/styles/_toast.scss CHANGED
@@ -1,62 +1,32 @@
1
1
  $platform_notification_contrasts: (
2
2
  light: (
3
3
  notificationClose: $beacon-gray-400,
4
+ notificationBackground: $beacon-gray-100,
5
+ notificationText: $beacon-gray-700,
4
6
  notificationShadow: 0px 2px 4px $beacon-gray-300,
5
- notificationSuccess: $beacon-green-100,
6
- notificationSuccessText: $beacon-black,
7
- notificationSuccessBorder: $beacon-green-300,
8
- notificationSuccessAccent: $beacon-green-600,
9
- notificationError: $beacon-orange-100,
10
- notificationErrorText: $beacon-black,
11
- notificationErrorBorder: $beacon-orange-200,
12
- notificationErrorAccent: $beacon-orange-600,
13
- notificationInfo: $beacon-dark-blue-100,
14
- notificationInfoText: $beacon-black,
15
- notificationInfoBorder: $beacon-dark-blue-300,
7
+ notificationSuccessAccent: $beacon-green-500,
8
+ notificationErrorAccent: $beacon-orange-700,
16
9
  notificationInfoAccent: $beacon-dark-blue-600,
17
- notificationWarning: $beacon-orange-300,
18
- notificationWarningText: $beacon-black,
19
- notificationWarningBorder: $beacon-green-400,
20
10
  notificationWarningAccent: $beacon-green-500
21
11
  ),
22
12
  dark: (
23
13
  notificationClose: $beacon-gray-300,
14
+ notificationBackground: $beacon-gray-600,
15
+ notificationText: $beacon-gray-300,
24
16
  notificationShadow: none,
25
- notificationSuccess: $beacon-green-500,
26
- notificationSuccessText: $beacon-black,
27
- notificationSuccessBorder: $beacon-green-700,
28
17
  notificationSuccessAccent: $beacon-green-750,
29
- notificationError: $beacon-orange-550,
30
- notificationErrorText: $beacon-black,
31
- notificationErrorBorder: $beacon-orange-650,
32
18
  notificationErrorAccent: $beacon-orange-700,
33
- notificationInfo: $beacon-dark-blue-400,
34
- notificationInfoText: $beacon-gray-300,
35
- notificationInfoBorder: $beacon-dark-blue-600,
36
19
  notificationInfoAccent: $beacon-dark-blue-700,
37
- notificationWarning: $beacon-orange-400,
38
- notificationWarningText: $beacon-black,
39
- notificationWarningBorder: $beacon-green-500,
40
20
  notificationWarningAccent: $beacon-green-500
41
21
  ),
42
22
  highcontrast: (
43
23
  notificationClose: $beacon-black,
24
+ notificationBackground: $beacon-black,
25
+ notificationText: $beacon-white,
44
26
  notificationShadow: none,
45
- notificationSuccess: $beacon-black,
46
- notificationSuccessText: $highcontrast-bright-green-200,
47
- notificationSuccessBorder: $highcontrast-bright-green-200,
48
27
  notificationSuccessAccent: $highcontrast-bright-green-300,
49
- notificationError: $beacon-black,
50
- notificationErrorText: $highcontrast-bright-orange-300,
51
- notificationErrorBorder: $highcontrast-bright-orange-300,
52
28
  notificationErrorAccent: $highcontrast-bright-orange-400,
53
- notificationInfo: $beacon-black,
54
- notificationInfoText: $highcontrast-bright-blue-200,
55
- notificationInfoBorder: $highcontrast-bright-blue-200,
56
29
  notificationInfoAccent: $highcontrast-bright-blue-300,
57
- notificationWarning: $beacon-black,
58
- notificationWarningText: $highcontrast-bright-orange-100,
59
- notificationWarningBorder: $highcontrast-bright-orange-100,
60
30
  notificationWarningAccent: $highcontrast-bright-orange-200
61
31
  )
62
32
  );
@@ -84,7 +54,10 @@ $platform_notification_contrasts: (
84
54
  border-radius: 0;
85
55
  display: flex;
86
56
  flex-direction: column;
87
- width: 500px;
57
+ min-width: 424px;
58
+ max-width: 650px;
59
+ width: auto;
60
+ padding-right: 40px;
88
61
 
89
62
  &, &:hover {
90
63
  @include themify($platform_notification_contrasts) {
@@ -105,6 +78,8 @@ $platform_notification_contrasts: (
105
78
  @include themify($platform_notification_contrasts) {
106
79
  color: apply('notificationClose');
107
80
  }
81
+ font-size: 36px;
82
+ font-weight: lighter;
108
83
  position: absolute;
109
84
  right: 10px;
110
85
  top: 11px;
@@ -112,10 +87,9 @@ $platform_notification_contrasts: (
112
87
 
113
88
  .toast-success {
114
89
  @include themify($platform_notification_contrasts) {
115
- background-color: apply('notificationSuccess');
116
- color: apply('notificationSuccessText');
117
- border: solid 2px apply('notificationSuccessBorder');
118
- border-left: solid 3px apply('notificationSuccessAccent');
90
+ background-color: apply('notificationBackground');
91
+ color: apply('notificationText');
92
+ border-left: solid 8px apply('notificationSuccessAccent');
119
93
  }
120
94
  }
121
95
  .toast-success::before {
@@ -127,10 +101,9 @@ $platform_notification_contrasts: (
127
101
 
128
102
  .toast-error {
129
103
  @include themify($platform_notification_contrasts) {
130
- background-color: apply('notificationError');
131
- color: apply('notificationErrorText');
132
- border: solid 2px apply('notificationErrorBorder');
133
- border-left: solid 3px apply('notificationErrorAccent');
104
+ background-color: apply('notificationBackground');
105
+ color: apply('notificationText');
106
+ border-left: solid 8px apply('notificationErrorAccent');
134
107
  }
135
108
  }
136
109
  .toast-error::before {
@@ -142,10 +115,9 @@ $platform_notification_contrasts: (
142
115
 
143
116
  .toast-info {
144
117
  @include themify($platform_notification_contrasts) {
145
- background-color: apply('notificationInfo');
146
- color: apply('notificationInfoText');
147
- border: solid 2px apply('notificationInfoBorder');
148
- border-left: solid 3px apply('notificationInfoAccent');
118
+ background-color: apply('notificationBackground');
119
+ color: apply('notificationText');
120
+ border-left: solid 8px apply('notificationInfoAccent');
149
121
  }
150
122
  }
151
123
  .toast-info::before {
@@ -157,10 +129,9 @@ $platform_notification_contrasts: (
157
129
 
158
130
  .toast-warning {
159
131
  @include themify($platform_notification_contrasts) {
160
- background-color: apply('notificationWarning');
161
- color: apply('notificationWarningText');
162
- border: solid 2px apply('notificationWarningBorder');
163
- border-left: solid 3px apply('notificationWarningAccent');
132
+ background-color: apply('notificationBackground');
133
+ color: apply('notificationText');
134
+ border-left: solid 8px apply('notificationWarningAccent');
164
135
  }
165
136
  }
166
137
  .toast-warning::before {
package/styles/_widgets.scss CHANGED
@@ -4,6 +4,7 @@ $platform_widget_contrasts: (
4
4
  light: (
5
5
  widgetText: $beacon-black,
6
6
  widgetBackground: $beacon-white,
7
+ widgetBackgroundSecondary: $beacon-dark-blue-50,
7
8
  widgetBorder: $beacon-gray-300,
8
9
  widgetHighlight: $beacon-dark-blue-200,
9
10
  highlightOrange: $beacon-orange-100,
@@ -14,6 +15,7 @@ $platform_widget_contrasts: (
14
15
  dark: (
15
16
  widgetText: $beacon-gray-200,
16
17
  widgetBackground: $beacon-gray-600,
18
+ widgetBackgroundSecondary: $beacon-gray-700,
17
19
  widgetBorder: $beacon-gray-500,
18
20
  widgetHighlight: $beacon-dark-blue-500,
19
21
  highlightOrange: $beacon-orange-400,
@@ -24,6 +26,7 @@ $platform_widget_contrasts: (
24
26
  highcontrast: (
25
27
  widgetText: $beacon-white,
26
28
  widgetBackground: $beacon-black,
29
+ widgetBackgroundSecondary: $beacon-black,
27
30
  widgetBorder: $beacon-white,
28
31
  widgetHighlight: $beacon-dark-blue-600,
29
32
  highlightOrange: $highcontrast-bright-orange-100,
@@ -42,6 +45,10 @@ $platform_widget_contrasts: (
42
45
  &.highlight {
43
46
  background-color: apply('widgetHighlight') !important;
44
47
  }
48
+
49
+ &.transparent {
50
+ background: transparent !important;
51
+ }
45
52
  }
46
53
  border-radius: 3px;
47
54
  font-size: 14px;
@@ -237,4 +244,30 @@ $platform_widget_contrasts: (
237
244
  }
238
245
  }
239
246
 
247
+ .partial-border {
248
+ @include themify($platform_widget_contrasts) {
249
+ &--start {
250
+ border-left: 0.5px solid apply('widgetBorder') !important;
251
+ }
252
+ &--end {
253
+ border-right: 0.5px solid apply('widgetBorder') !important;
254
+ }
255
+ &--top {
256
+ border-top: 0.5px solid apply('widgetBorder') !important;
257
+ }
258
+ &--bottom {
259
+ border-bottom: 0.5px solid apply('widgetBorder') !important;
260
+ }
261
+ }
262
+ }
263
+
264
+ .mat-mdc-menu-panel {
265
+ @include themify($platform_widget_contrasts) {
266
+ background: apply('widgetBackground');
267
+ border: 0.5px solid apply('widgetBorder');
240
268
 
269
+ .mat-mdc-menu-item-text {
270
+ color: apply('widgetText');
271
+ }
272
+ }
273
+ }
package/styles/styles.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  // styles
9
9
  @import "apploading";
10
10
  @import "bootstrap-tabs";
11
+ @import "bootstrap-datepicker";
11
12
  @import "buttons";
12
13
  @import "calendar";
13
14
  @import "checkboxes";