@vuu-ui/vuu-notifications 2.1.3 → 2.1.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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var toastNotificationCss = ".vuuToastNotification {\n --toast-transition-duration: .4s;\n --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n align-items: center;;\n background: var(--vuuToast-background, var(--toast-background));\n border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n color: var(--vuuToast-foreground, var(--toast-foreground));\n column-gap: var(--salt-spacing-100);\n display: grid;\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n );\n grid-template-columns: auto;\n max-width: var(--vuuToast-maxWidth, 600px);\n min-width: var(--vuuToast-minWidth, 300px);\n opacity: 1;\n padding: var(--padding-base);\n row-gap: var(--salt-spacing-100);\n transition: opacity .4s, top;\n z-index: var(--salt-zIndex-notification);\n\n &.vuuToastNotification-hidden {\n visibility: hidden;\n }\n\n &.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withIcon {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n \"toast-content\"\n );\n }\n &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n \"toast-content close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withTransition {\n transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n }\n\n &.vuuToastNotification-transparent {\n opacity: 0;\n transition: top .2s ease-out, opacity .4s;\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n \"toast-icon toast-content\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n \"toast-icon toast-content close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-error {\n --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n }\n\n &.vuuToastNotification-success {\n --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n }\n &.vuuToastNotification-warning {\n --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-
|
|
3
|
+
var toastNotificationCss = ".vuuToastNotification {\n --toast-transition-duration: .4s;\n --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n align-items: center;;\n background: var(--vuuToast-background, var(--toast-background));\n border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n color: var(--vuuToast-foreground, var(--toast-foreground));\n column-gap: var(--salt-spacing-100);\n display: grid;\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n );\n grid-template-columns: auto;\n max-width: var(--vuuToast-maxWidth, 600px);\n min-width: var(--vuuToast-minWidth, 300px);\n opacity: 1;\n padding: var(--padding-base);\n row-gap: var(--salt-spacing-100);\n transition: opacity .4s, top;\n z-index: var(--salt-zIndex-notification);\n\n &.vuuToastNotification-hidden {\n visibility: hidden;\n }\n\n &.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withIcon {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n \"toast-content\"\n );\n }\n &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n \"toast-content close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withTransition {\n transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n }\n\n &.vuuToastNotification-transparent {\n opacity: 0;\n transition: top .2s ease-out, opacity .4s;\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n \"toast-icon toast-content\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n \"toast-icon toast-content close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-error {\n --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-error-icon, var(--vuu-svg-info-circle));\n }\n\n &.vuuToastNotification-success {\n --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n }\n &.vuuToastNotification-warning {\n --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-info-circle));\n }\n &.vuuToastNotification-info {\n --toast-background: var(--vuuToast-info-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-info-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-info-icon, var(--vuu-svg-info-circle));\n }\n\n .vuuIcon {\n --vuu-icon-color: var(--toast-foreground);\n --vuu-icon-size: 20px;\n grid-area:toast-icon;\n justify-self: center;\n }\n\n .vuuToastNotification-header {\n font-size: var(--vuuToast-header-fontSize, var(--salt-text-h3-fontSize));\n font-weight: var(--salt-text-display1-fontWeight-strong);\n grid-area: toast-header;\n justify-self: start;\n line-height: var(--salt-text-h3-lineHeight);\n margin: 0;\n white-space: nowrap;\n }\n\n .vuuToastNotification-content {\n grid-area: toast-content;\n justify-self: start;\n }\n\n .vuuToastNotification-closeButton.saltButton {\n grid-area: close-button;\n justify-self: center;\n .vuuIcon {\n --vuu-icon-size: 16px;\n }\n }\n\n}";
|
|
4
4
|
|
|
5
5
|
module.exports = toastNotificationCss;
|
|
6
6
|
//# sourceMappingURL=ToastNotification.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var toastNotificationCss = ".vuuToastNotification {\n --toast-transition-duration: .4s;\n --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n align-items: center;;\n background: var(--vuuToast-background, var(--toast-background));\n border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n color: var(--vuuToast-foreground, var(--toast-foreground));\n column-gap: var(--salt-spacing-100);\n display: grid;\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n );\n grid-template-columns: auto;\n max-width: var(--vuuToast-maxWidth, 600px);\n min-width: var(--vuuToast-minWidth, 300px);\n opacity: 1;\n padding: var(--padding-base);\n row-gap: var(--salt-spacing-100);\n transition: opacity .4s, top;\n z-index: var(--salt-zIndex-notification);\n\n &.vuuToastNotification-hidden {\n visibility: hidden;\n }\n\n &.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withIcon {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n \"toast-content\"\n );\n }\n &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n \"toast-content close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withTransition {\n transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n }\n\n &.vuuToastNotification-transparent {\n opacity: 0;\n transition: top .2s ease-out, opacity .4s;\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n \"toast-icon toast-content\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n \"toast-icon toast-content close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-error {\n --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n }\n\n &.vuuToastNotification-success {\n --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n }\n &.vuuToastNotification-warning {\n --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-
|
|
1
|
+
var toastNotificationCss = ".vuuToastNotification {\n --toast-transition-duration: .4s;\n --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n align-items: center;;\n background: var(--vuuToast-background, var(--toast-background));\n border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n color: var(--vuuToast-foreground, var(--toast-foreground));\n column-gap: var(--salt-spacing-100);\n display: grid;\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n );\n grid-template-columns: auto;\n max-width: var(--vuuToast-maxWidth, 600px);\n min-width: var(--vuuToast-minWidth, 300px);\n opacity: 1;\n padding: var(--padding-base);\n row-gap: var(--salt-spacing-100);\n transition: opacity .4s, top;\n z-index: var(--salt-zIndex-notification);\n\n &.vuuToastNotification-hidden {\n visibility: hidden;\n }\n\n &.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withIcon {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n \"toast-content\"\n );\n }\n &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n \"toast-content close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withTransition {\n transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n }\n\n &.vuuToastNotification-transparent {\n opacity: 0;\n transition: top .2s ease-out, opacity .4s;\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n \"toast-icon toast-content\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n \"toast-icon toast-content close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-error {\n --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-error-icon, var(--vuu-svg-info-circle));\n }\n\n &.vuuToastNotification-success {\n --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n }\n &.vuuToastNotification-warning {\n --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-info-circle));\n }\n &.vuuToastNotification-info {\n --toast-background: var(--vuuToast-info-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-info-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-info-icon, var(--vuu-svg-info-circle));\n }\n\n .vuuIcon {\n --vuu-icon-color: var(--toast-foreground);\n --vuu-icon-size: 20px;\n grid-area:toast-icon;\n justify-self: center;\n }\n\n .vuuToastNotification-header {\n font-size: var(--vuuToast-header-fontSize, var(--salt-text-h3-fontSize));\n font-weight: var(--salt-text-display1-fontWeight-strong);\n grid-area: toast-header;\n justify-self: start;\n line-height: var(--salt-text-h3-lineHeight);\n margin: 0;\n white-space: nowrap;\n }\n\n .vuuToastNotification-content {\n grid-area: toast-content;\n justify-self: start;\n }\n\n .vuuToastNotification-closeButton.saltButton {\n grid-area: close-button;\n justify-self: center;\n .vuuIcon {\n --vuu-icon-size: 16px;\n }\n }\n\n}";
|
|
2
2
|
|
|
3
3
|
export { toastNotificationCss as default };
|
|
4
4
|
//# sourceMappingURL=ToastNotification.css.js.map
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.1.
|
|
2
|
+
"version": "2.1.4",
|
|
3
3
|
"description": "VUU notifications - Toast, WorkspaceNotification etc",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
"@salt-ds/core": "1.54.1",
|
|
8
8
|
"@salt-ds/styles": "0.2.1",
|
|
9
9
|
"@salt-ds/window": "0.1.1",
|
|
10
|
-
"@vuu-ui/vuu-ui-controls": "2.1.
|
|
11
|
-
"@vuu-ui/vuu-utils": "2.1.
|
|
10
|
+
"@vuu-ui/vuu-ui-controls": "2.1.4",
|
|
11
|
+
"@vuu-ui/vuu-utils": "2.1.4"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|
|
14
14
|
"clsx": "^2.0.0",
|