@beacon-interactive-systems-llc/beacon-platform-ui 17.12.3 → 17.12.5

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 (3) hide show
  1. package/package.json +1 -1
  2. package/styles/_global-search.scss +4 -0
  3. package/styles/_modals.scss +95 -86
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
3
- "version": "17.12.3",
3
+ "version": "17.12.5",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^17.3.0",
6
6
  "@angular/core": "^17.3.0",
package/styles/_global-search.scss CHANGED
@@ -301,6 +301,10 @@ $platform_globalsearch_contrasts: (
301
301
  width: 50%;
302
302
  }
303
303
  }
304
+
305
+ .full-width-option .platform-selection-list .platform-list-option {
306
+ width: 100%;
307
+ }
304
308
  }
305
309
 
306
310
  label {
package/styles/_modals.scss CHANGED
@@ -1,86 +1,95 @@
1
- $platform_modal_contrasts: (
2
- light: (
3
- modalBody: $beacon-gray-100,
4
- modalFooter: $beacon-gray-200
5
- ),
6
- dark: (
7
- modalBody: $beacon-black,
8
- modalFooter: $beacon-gray-600
9
- ),
10
- highcontrast: (
11
- modalBody: $beacon-black,
12
- modalFooter: $beacon-gray-600
13
- )
14
- );
15
-
16
- // ipad portrait
17
- @media (min-width: 768px) and (max-width: 768px) {
18
- .modal-dialog.modal-lg.widescreen {
19
- max-width: 700px !important;
20
- }
21
-
22
- .modal-dialog.modal-lg.fullscreen {
23
- max-width: 768px !important;
24
-
25
- .modal-body {
26
- height: 100vh;
27
- }
28
- }
29
- }
30
-
31
- // ipad landscape
32
- @media (min-width: 1024px) and (max-width: 1024px) {
33
- .modal-dialog.modal-lg.widescreen {
34
- max-width: 900px !important;
35
- }
36
-
37
- .modal-dialog.modal-lg.fullscreen {
38
- max-width: 1024px !important;
39
-
40
- .modal-body {
41
- height: 100vh;
42
- }
43
- }
44
- }
45
-
46
- @media (min-width: 1025px) {
47
- .modal-dialog.modal-lg.fullscreen {
48
- max-width: 1400px !important;
49
-
50
- .modal-body {
51
- height: 100vh;
52
- }
53
- }
54
- }
55
-
56
- .modal-header {
57
- @include font-color--dark-background;
58
- @include themify($platform_contrasts) {
59
- background-color: apply('blueDarkBackground');
60
- }
61
- }
62
-
63
- .modal-content {
64
- @include font-color--default;
65
- border-radius: 12px;
66
- }
67
-
68
- .modal-body {
69
- @include themify($platform_modal_contrasts) {
70
- background-color: apply('modalBody');
71
- }
72
- }
73
-
74
- .modal-footer {
75
- @include themify($platform_modal_contrasts) {
76
- background-color: apply('modalFooter');
77
- }
78
- border-bottom-right-radius: 5px;
79
- border-bottom-left-radius: 5px;
80
- padding: 8px 16px;
81
- border-top: none;
82
-
83
- button {
84
- margin: 0px;
85
- }
86
- }
1
+ $platform_modal_contrasts: (
2
+ light: (
3
+ modalBody: $beacon-gray-100,
4
+ modalFooter: $beacon-gray-200,
5
+ modalTimeoutBackground: linear-gradient(180deg, #071338, #475990)
6
+ ),
7
+ dark: (
8
+ modalBody: $beacon-black,
9
+ modalFooter: $beacon-gray-600,
10
+ modalTimeoutBackground: $beacon-gray-600
11
+ ),
12
+ highcontrast: (
13
+ modalBody: $beacon-black,
14
+ modalFooter: $beacon-gray-600,
15
+ modalTimeoutBackground: $beacon-gray-700
16
+ )
17
+ );
18
+
19
+ // ipad portrait
20
+ @media (min-width: 768px) and (max-width: 768px) {
21
+ .modal-dialog.modal-lg.widescreen {
22
+ max-width: 700px !important;
23
+ }
24
+
25
+ .modal-dialog.modal-lg.fullscreen {
26
+ max-width: 768px !important;
27
+
28
+ .modal-body {
29
+ height: 100vh;
30
+ }
31
+ }
32
+ }
33
+
34
+ // ipad landscape
35
+ @media (min-width: 1024px) and (max-width: 1024px) {
36
+ .modal-dialog.modal-lg.widescreen {
37
+ max-width: 900px !important;
38
+ }
39
+
40
+ .modal-dialog.modal-lg.fullscreen {
41
+ max-width: 1024px !important;
42
+
43
+ .modal-body {
44
+ height: 100vh;
45
+ }
46
+ }
47
+ }
48
+
49
+ @media (min-width: 1025px) {
50
+ .modal-dialog.modal-lg.fullscreen {
51
+ max-width: 1400px !important;
52
+
53
+ .modal-body {
54
+ height: 100vh;
55
+ }
56
+ }
57
+ }
58
+
59
+ .modal-header {
60
+ @include font-color--dark-background;
61
+ @include themify($platform_contrasts) {
62
+ background-color: apply('blueDarkBackground');
63
+ }
64
+ }
65
+
66
+ .modal-content {
67
+ @include font-color--default;
68
+ border-radius: 12px;
69
+ }
70
+
71
+ .modal-body {
72
+ @include themify($platform_modal_contrasts) {
73
+ background-color: apply('modalBody');
74
+ }
75
+ }
76
+
77
+ .modal-footer {
78
+ @include themify($platform_modal_contrasts) {
79
+ background-color: apply('modalFooter');
80
+ }
81
+ border-bottom-right-radius: 5px;
82
+ border-bottom-left-radius: 5px;
83
+ padding: 8px 16px;
84
+ border-top: none;
85
+
86
+ button {
87
+ margin: 0px;
88
+ }
89
+ }
90
+
91
+ .timeout-modal {
92
+ @include themify($platform_modal_contrasts) {
93
+ background: apply('modalTimeoutBackground') !important;
94
+ }
95
+ }