@energycap/components 0.30.3 → 0.30.4
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.
- package/bundles/energycap-components.umd.js +8 -2
- package/bundles/energycap-components.umd.js.map +1 -1
- package/bundles/energycap-components.umd.min.js +1 -1
- package/bundles/energycap-components.umd.min.js.map +1 -1
- package/energycap-components.metadata.json +1 -1
- package/energycap-components.min.css +1 -1
- package/esm2015/lib/display/dialog/dialog-group/dialog-group.component.js +1 -1
- package/esm2015/lib/display/dialog/dialog-types.js +1 -1
- package/esm2015/lib/display/dialog/dialog.component.js +8 -2
- package/fesm2015/energycap-components.js +8 -2
- package/fesm2015/energycap-components.js.map +1 -1
- package/lib/display/dialog/dialog-types.d.ts +2 -0
- package/lib/display/dialog/dialog.component.d.ts +1 -0
- package/package.json +1 -1
- package/src/styles/_global-variables.scss +1 -0
- package/src/styles/mixins/_dialog-base.scss +2 -4
|
@@ -84,6 +84,8 @@ export interface DialogOptions {
|
|
|
84
84
|
emitResultOn?: DialogAnimationEvent;
|
|
85
85
|
/** Display the dialog as a side panel that slides in */
|
|
86
86
|
displayAsPanel?: boolean;
|
|
87
|
+
/** Set the dialog mask color to transparent. Defaults to true when dialog is displayed as a panel */
|
|
88
|
+
transparentMask?: boolean;
|
|
87
89
|
/** Align the dialog window to the top instead of centered. */
|
|
88
90
|
alignToTop?: boolean;
|
|
89
91
|
/**
|
|
@@ -30,6 +30,7 @@ export declare class DialogComponent {
|
|
|
30
30
|
fadeOut: boolean;
|
|
31
31
|
displayAsPanel: boolean;
|
|
32
32
|
alignToTop: boolean;
|
|
33
|
+
transparentMask: boolean;
|
|
33
34
|
onOverlayClick(event: MouseEvent): void;
|
|
34
35
|
/**
|
|
35
36
|
* Defines the width of the dialog (height is auto). Can be a number that will be converted to pixels, or xsmall(320px), small(480px), medium(640px), or large(1024px)
|
package/package.json
CHANGED
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
--ec-background-color-body-overlay: rgba(241, 243, 244, .7);
|
|
33
33
|
--ec-background-color-dark: rgb(26, 26, 35);
|
|
34
34
|
--ec-background-color-dialog: rgba(26, 26, 35, .5);
|
|
35
|
+
--ec-background-color-dialog-stacked: rgba(26, 26, 35, .25);
|
|
35
36
|
--ec-background-color-splash: radial-gradient(circle, rgb(73, 89, 99) 0%, rgb(22, 47, 59) 100%);
|
|
36
37
|
--ec-background-color-detail: rgba(26, 26, 35, .03);
|
|
37
38
|
--ec-background-color-disabled: rgba(26,26,35, .1);
|
|
@@ -10,8 +10,6 @@ $dialog-close-duration: 100;
|
|
|
10
10
|
$panel-open-duration: 250;
|
|
11
11
|
$panel-close-duration: 225;
|
|
12
12
|
|
|
13
|
-
$overlay-bg: var(--ec-background-color-dialog);
|
|
14
|
-
$dialog-bg: var(--ec-background-color-body);
|
|
15
13
|
$dialog-min-height: 9rem;
|
|
16
14
|
$dialog-max-width: 90vw;
|
|
17
15
|
$dialog-max-height: 90vh;
|
|
@@ -46,7 +44,7 @@ $dialog-widths: (
|
|
|
46
44
|
|
|
47
45
|
@mixin dialog-overlay {
|
|
48
46
|
align-items: center;
|
|
49
|
-
background-color:
|
|
47
|
+
background-color: var(--ec-dialog-background-color);
|
|
50
48
|
justify-content: center;
|
|
51
49
|
position: fixed;
|
|
52
50
|
z-index: var(--ec-z-index-dialog);
|
|
@@ -57,7 +55,7 @@ $dialog-widths: (
|
|
|
57
55
|
}
|
|
58
56
|
|
|
59
57
|
@mixin dialog-window {
|
|
60
|
-
background-color:
|
|
58
|
+
background-color: var(--ec-background-color-body);
|
|
61
59
|
background-clip: padding-box;
|
|
62
60
|
box-shadow: 0 0 0.625rem rgba($black, .2);
|
|
63
61
|
border-radius: var(--ec-border-radius-dialog);
|