@carbon/web-components 2.58.1 → 2.59.0-rc.0

package/es-custom/components/notification/actionable-notification.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification.scss.js","names":[],"sources":["../../../src/components/notification/actionable-notification.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2025\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/components/notification/index' as *;\n@use '@carbon/styles/scss/components/button';\n@use '@carbon/styles/scss/components/button/mixins' as button-mixins;\n@use '@carbon/styles/scss/components/button/vars' as button-vars;\n@use '@carbon/styles/scss/layout' as *;\n\n@include actionable-notification;\n\n:host(#{$prefix}-actionable-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: none;\n  outline: none;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not(\n        [low-contrast]\n      )[kind='tertiary']\n  )\n  button {\n  @include button-mixins.button-theme(\n    transparent,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse-hover,\n    currentColor,\n    $notification-action-tertiary-inverse-active\n  );\n\n  &:focus {\n    border-color: $focus-inverse;\n    background-color: $notification-action-tertiary-inverse;\n    box-shadow:\n      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,\n      inset 0 0 0 button-vars.$button-border-width $background-inverse;\n    color: $notification-action-tertiary-inverse-text;\n  }\n\n  &:hover {\n    color: $notification-action-tertiary-inverse-text;\n  }\n\n  &:active {\n    border-color: transparent;\n    background-color: $notification-action-tertiary-inverse-active;\n    color: $notification-action-tertiary-inverse-text;\n  }\n}\n\n:host(#{$prefix}-actionable-notification-button[low-contrast][kind='ghost'])\n  button {\n  &:hover,\n  &:active {\n    background-color: $notification-action-hover;\n  }\n\n  &:focus {\n    outline-color: $focus;\n  }\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not([low-contrast])[kind='ghost']\n  )\n  button {\n  color: $link-inverse;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button[hide-close-button][kind='ghost']\n  )\n  button {\n  margin-inline-end: $spacing-03;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline])) {\n  @include actionable-notification-toast-base;\n\n  .#{$prefix}--actionable-notification__content {\n    flex-direction: column;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[inline][low-contrast])::before,\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-actionable-notification[low-contrast]),\n:host(#{$prefix}-callout-notification[low-contrast]) {\n  @include actionable-notification-low-contrast-base;\n}\n\n:host(#{$prefix}-actionable-notification[open]) {\n  display: flex;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline]))\n  .#{$prefix}--actionable-notification__close-button {\n  position: absolute;\n}\n\n:host(#{$prefix}-actionable-notification[hide-close-button])\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon,\n  .#{$prefix}--toast-notification__icon {\n    path[data-icon-path='inner-path'] {\n      fill: $black-100;\n      opacity: 1;\n    }\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n:host(#{$prefix}-callout-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: flex;\n  outline: none;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-callout-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-callout-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-callout-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-callout-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {\n  margin-inline-end: $spacing-03;\n}\n"],"mappings":""}
+{"version":3,"file":"actionable-notification.scss.js","names":[],"sources":["../../../src/components/notification/actionable-notification.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2025\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/components/notification/index' as *;\n@use '@carbon/styles/scss/components/button';\n@use '@carbon/styles/scss/components/button/mixins' as button-mixins;\n@use '@carbon/styles/scss/components/button/vars' as button-vars;\n@use '@carbon/styles/scss/utilities/layout' as *;\n\n@include actionable-notification;\n\n:host(#{$prefix}-actionable-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: none;\n  outline: none;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not(\n        [low-contrast]\n      )[kind='tertiary']\n  )\n  button {\n  @include button-mixins.button-theme(\n    transparent,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse-hover,\n    currentColor,\n    $notification-action-tertiary-inverse-active\n  );\n\n  &:focus {\n    border-color: $focus-inverse;\n    background-color: $notification-action-tertiary-inverse;\n    box-shadow:\n      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,\n      inset 0 0 0 button-vars.$button-border-width $background-inverse;\n    color: $notification-action-tertiary-inverse-text;\n  }\n\n  &:hover {\n    color: $notification-action-tertiary-inverse-text;\n  }\n\n  &:active {\n    border-color: transparent;\n    background-color: $notification-action-tertiary-inverse-active;\n    color: $notification-action-tertiary-inverse-text;\n  }\n}\n\n:host(#{$prefix}-actionable-notification-button[low-contrast][kind='ghost'])\n  button {\n  &:hover,\n  &:active {\n    background-color: $notification-action-hover;\n  }\n\n  &:focus {\n    outline-color: $focus;\n  }\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not([low-contrast])[kind='ghost']\n  )\n  button {\n  color: $link-inverse;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button[hide-close-button][kind='ghost']\n  )\n  button {\n  margin-inline-end: $spacing-03;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline])) {\n  @include actionable-notification-toast-base;\n\n  .#{$prefix}--actionable-notification__content {\n    flex-direction: column;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[inline][low-contrast])::before,\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-actionable-notification[low-contrast]),\n:host(#{$prefix}-callout-notification[low-contrast]) {\n  @include actionable-notification-low-contrast-base;\n}\n\n:host(#{$prefix}-actionable-notification[open]) {\n  display: flex;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline]))\n  .#{$prefix}--actionable-notification__close-button {\n  position: absolute;\n}\n\n:host(#{$prefix}-actionable-notification[hide-close-button])\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon,\n  .#{$prefix}--toast-notification__icon {\n    path[data-icon-path='inner-path'] {\n      fill: $black-100;\n      opacity: 1;\n    }\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n:host(#{$prefix}-callout-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: flex;\n  outline: none;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-callout-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-callout-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-callout-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-callout-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {\n  margin-inline-end: $spacing-03;\n}\n"],"mappings":""}