Socket
Socket
Sign inDemoInstall

@spectrum-web-components/toast

Package Overview
Dependencies
Maintainers
5
Versions
222
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/toast - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

6

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log

## [0.7.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/toast@0.7.2...@spectrum-web-components/toast@0.7.3) (2021-02-11)
### Bug Fixes
- update to latest spectrum-css packages ([a5ca19f](https://github.com/adobe/spectrum-web-components/commit/a5ca19f67d5b3f0951667c4441d4d977bf1e0937))
## [0.7.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/toast@0.7.1...@spectrum-web-components/toast@0.7.2) (2021-02-02)

@@ -8,0 +14,0 @@

14

package.json

@@ -21,3 +21,3 @@ {

],
"version": "0.7.2",
"version": "0.7.3",
"description": "",

@@ -53,12 +53,12 @@ "main": "./src/index.js",

"devDependencies": {
"@spectrum-css/toast": "^3.0.0-beta.6"
"@spectrum-css/toast": "^3.0.0"
},
"dependencies": {
"@spectrum-web-components/base": "^0.3.2",
"@spectrum-web-components/button": "^0.11.2",
"@spectrum-web-components/icon": "^0.8.2",
"@spectrum-web-components/icons-workflow": "^0.5.2",
"@spectrum-web-components/base": "^0.3.3",
"@spectrum-web-components/button": "^0.12.0",
"@spectrum-web-components/icon": "^0.8.3",
"@spectrum-web-components/icons-workflow": "^0.5.3",
"tslib": "^2.0.0"
},
"gitHead": "7783ce454deb5a97b3d274ee1b54a24c09065ce4"
"gitHead": "975a9d6bf075d367fbc77c9b5cec4eabce66f6c0"
}

2

src/spectrum-toast.css.js

@@ -14,5 +14,5 @@ /*

const styles = css `
:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}
:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}
`;
export default styles;
//# sourceMappingURL=spectrum-toast.css.js.map

2

src/spectrum-toast.css.ts

@@ -14,4 +14,4 @@ /*

const styles = css`
:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}
:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}
`;
export default styles;

1

src/spectrum-vars.json

@@ -11,2 +11,3 @@ {

"--spectrum-toast-neutral-content-padding-right": "var(--spectrum-global-dimension-size-200)",
"--spectrum-toast-neutral-content-padding-top": "var(--spectrum-global-dimension-size-65)",
"--spectrum-toast-info-text-size": "var(--spectrum-alias-font-size-default)",

@@ -13,0 +14,0 @@ "--spectrum-toast-info-text-font-weight": "var(--spectrum-global-font-weight-bold)",

2

src/toast.css.js

@@ -14,5 +14,5 @@ /*

const styles = css `
:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}.content{line-height:1.5}:host(:not([open])){display:none}
:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}.content{line-height:1.5}:host(:not([open])){display:none}
`;
export default styles;
//# sourceMappingURL=toast.css.js.map

2

src/toast.css.ts

@@ -14,4 +14,4 @@ /*

const styles = css`
:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}.content{line-height:1.5}:host(:not([open])){display:none}
:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}.content{line-height:1.5}:host(:not([open])){display:none}
`;
export default styles;
src/spectrum-toast.css

Sorry, the diff of this file is not supported yet

src/spectrum-toast.css.js.map

Sorry, the diff of this file is not supported yet

src/toast.css.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc