@carbon/web-components 2.55.0 → 2.56.0-rc.0

package/es-custom/components/button/button.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.scss.js","names":[],"sources":["../../../src/components/button/button.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\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/spacing' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/components/button' as *;\n@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;\n@use '@carbon/styles/scss/components/chat-button' as *;\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/components/button/tokens' as button-tokens;\n\n@include code-snippet;\n\n:host(#{$prefix}-button),\n:host(#{$prefix}-modal-footer-button),\n:host(#{$prefix}-dialog-footer-button) {\n  @include emit-layout-tokens();\n\n  display: inline-flex;\n\n  ::slotted([slot='icon']) {\n    @extend .#{$prefix}--btn__icon;\n  }\n\n  .#{$prefix}--btn {\n    flex-grow: 1;\n    max-inline-size: 100%;\n  }\n}\n\n:host(#{$prefix}-button-skeleton) {\n  @include emit-layout-tokens();\n\n  display: inline-flex;\n}\n\n:host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),\n:host(#{$prefix}-modal-footer-button[isExpressive]) ::slotted([slot='icon']),\n:host(#{$prefix}-dialog-footer-button[isExpressive]) ::slotted([slot='icon']) {\n  block-size: rem(20px);\n  inline-size: rem(20px);\n}\n\n:host(#{$prefix}-button[pagination]),\n:host(#{$prefix}-modal-footer-button[pagination]),\n:host(#{$prefix}-dialog-footer-button[pagination]) {\n  .#{$prefix}--btn {\n    padding: 0;\n    border: none;\n    border-inline-start: 1px solid $border-subtle;\n    transition: none;\n\n    &:focus {\n      border-inline-start: 0;\n      box-shadow: none;\n      outline: $spacing-01 solid $focus;\n      outline-offset: -#{$spacing-01};\n    }\n  }\n}\n\n:host(#{$prefix}-button[pagination]:not([disabled])),\n:host(#{$prefix}-modal-footer-button[pagination]:not([disabled])),\n:host(#{$prefix}-dialog-footer-button[pagination]:not([disabled])) {\n  .#{$prefix}--btn {\n    color: $icon-primary;\n\n    &:active {\n      background-color: $layer-hover;\n    }\n  }\n}\n\n:host(#{$prefix}-button[pagination][batch-action]:not([disabled])),\n:host(#{$prefix}-modal-footer-button[pagination][batch-action]:not([disabled])),\n:host(\n    #{$prefix}-dialog-footer-button[pagination][batch-action]:not([disabled])\n  ) {\n  .#{$prefix}--btn {\n    padding: $button-padding-ghost;\n\n    &:focus {\n      outline: $spacing-01 solid $layer;\n      outline-offset: -#{$spacing-01};\n    }\n  }\n\n  :host(#{$prefix}-button[pagination][has-main-content]:not([disabled])),\n  :host(\n      #{$prefix}-modal-footer-button[pagination][has-main-content]:not(\n          [disabled]\n        )\n    ),\n  :host(\n      #{$prefix}-dialog-footer-button[pagination][has-main-content]:not(\n          [disabled]\n        )\n    ) {\n    ::slotted([slot='icon']) {\n      position: static;\n      margin-inline-start: $spacing-02;\n    }\n  }\n}\n\n:host(#{$prefix}-button) {\n  .#{$prefix}--btn--icon-only {\n    align-items: center;\n    padding-block-start: 0;\n\n    &.#{$prefix}--btn--selected,\n    &.#{$prefix}--btn--expressive {\n      padding: $spacing-03;\n    }\n  }\n  .#{$prefix}--btn--ghost:not([disabled]) ::slotted([slot='icon']) {\n    fill: $icon-primary;\n  }\n}\n\n:host(#{$prefix}-button[kind='ghost']) {\n  .#{$prefix}--btn--ghost {\n    &:hover,\n    &:active {\n      outline: none;\n    }\n\n    &:not(:focus) {\n      box-shadow: none;\n    }\n  }\n}\n\n:host(#{$prefix}-button[kind='danger-ghost']) {\n  .#{$prefix}--btn--danger-ghost {\n    &:not(:focus) {\n      box-shadow: none;\n    }\n  }\n}\n\n:host(#{$prefix}-button-set),\n:host(#{$prefix}-side-panel-button-set) {\n  @extend .#{$prefix}--btn-set;\n\n  ::slotted(#{$prefix}-button) {\n    inline-size: 100%;\n    // 196px from design kit\n    max-inline-size: rem(196px);\n  }\n  ::slotted(#{$prefix}-button:not(:first-of-type)) {\n    z-index: 1;\n    box-shadow: to-rem(-1px) 0 0 0 button-tokens.$button-separator;\n  }\n\n  ::slotted(#{$prefix}-button:focus-within) {\n    box-shadow: inherit;\n  }\n\n  ::slotted(#{$prefix}-button:not(:first-of-type)[hide-margin]) {\n    box-shadow: inherit;\n  }\n}\n\n:host(#{$prefix}-button-set[stacked]) {\n  @extend .#{$prefix}--btn-set--stacked;\n\n  ::slotted(#{$prefix}-button:not(:first-of-type)) {\n    z-index: 1;\n    box-shadow: 0 to-rem(-1px) 0 0 button-tokens.$button-separator;\n  }\n\n  ::slotted(#{$prefix}-button:focus-within) {\n    box-shadow: inherit;\n  }\n\n  ::slotted(#{$prefix}-button:not(:first-of-type)[hide-margin]) {\n    box-shadow: inherit;\n  }\n}\n\n:host(#{$prefix}-button[data-context='data-table']) {\n  .#{$prefix}--btn {\n    padding-inline: $spacing-05;\n  }\n\n  .#{$prefix}--btn__icon {\n    position: static;\n    fill: $icon-on-color;\n    margin-inline-start: $spacing-03;\n\n    .st0 {\n      fill: none;\n    }\n  }\n}\n\n:host(#{$prefix}-button.#{$prefix}--batch-summary__cancel) {\n  --divider-opacity: 1;\n\n  button.#{$prefix}--btn {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0;\n    block-size: 100%;\n    min-block-size: 100%;\n    padding-inline-end: $spacing-05;\n    padding-inline-start: $spacing-05;\n\n    &::before {\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n\n      position: absolute;\n      display: block;\n      border: none;\n      background-color: $text-on-color;\n      block-size: $spacing-05;\n      content: '';\n      inline-size: rem(1px);\n      inset-block-start: rem(15px);\n      inset-inline-start: 0;\n      opacity: var(--divider-opacity);\n      transition: opacity $duration-fast-02 motion(standard, productive);\n    }\n\n    &:hover::before {\n      opacity: 0;\n    }\n  }\n}\n\n:host(#{$prefix}-button.#{$prefix}--batch-summary__cancel[size='sm']) {\n  button.#{$prefix}--btn {\n    block-size: $spacing-07;\n    min-block-size: auto;\n    padding-block: 0.375rem;\n\n    &::before {\n      inset-block-start: rem(8px);\n    }\n  }\n}\n\n:host(#{$prefix}-button.#{$prefix}--batch-summary__cancel[size='lg']) {\n  button.#{$prefix}--btn {\n    block-size: $spacing-09;\n    min-block-size: auto;\n\n    &::before {\n      inset-block-start: rem(15px);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button.scss.js","names":[],"sources":["../../../src/components/button/button.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\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/spacing' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/components/button' as *;\n@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;\n@use '@carbon/styles/scss/components/chat-button' as *;\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/components/button/tokens' as button-tokens;\n\n@include code-snippet;\n\n:host(#{$prefix}-button),\n:host(#{$prefix}-modal-footer-button),\n:host(#{$prefix}-dialog-footer-button) {\n  @include emit-layout-tokens();\n\n  display: inline-flex;\n\n  ::slotted([slot='icon']) {\n    @extend .#{$prefix}--btn__icon;\n  }\n\n  .#{$prefix}--btn {\n    flex-grow: 1;\n    max-inline-size: 100%;\n  }\n}\n\n:host(#{$prefix}-button-skeleton) {\n  @include emit-layout-tokens();\n\n  display: inline-flex;\n}\n\n:host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),\n:host(#{$prefix}-modal-footer-button[isExpressive]) ::slotted([slot='icon']),\n:host(#{$prefix}-dialog-footer-button[isExpressive]) ::slotted([slot='icon']) {\n  block-size: rem(20px);\n  inline-size: rem(20px);\n}\n\n:host(#{$prefix}-button[pagination]),\n:host(#{$prefix}-modal-footer-button[pagination]),\n:host(#{$prefix}-dialog-footer-button[pagination]) {\n  .#{$prefix}--btn {\n    padding: 0;\n    border: none;\n    border-inline-start: 1px solid $border-subtle;\n    transition: none;\n\n    &:focus {\n      border-inline-start: 0;\n      box-shadow: none;\n      outline: $spacing-01 solid $focus;\n      outline-offset: -#{$spacing-01};\n    }\n  }\n}\n\n:host(#{$prefix}-button[pagination]:not([disabled])),\n:host(#{$prefix}-modal-footer-button[pagination]:not([disabled])),\n:host(#{$prefix}-dialog-footer-button[pagination]:not([disabled])) {\n  .#{$prefix}--btn {\n    color: $icon-primary;\n\n    &:active {\n      background-color: $layer-hover;\n    }\n  }\n}\n\n:host(#{$prefix}-button[pagination][batch-action]:not([disabled])),\n:host(#{$prefix}-modal-footer-button[pagination][batch-action]:not([disabled])),\n:host(\n    #{$prefix}-dialog-footer-button[pagination][batch-action]:not([disabled])\n  ) {\n  .#{$prefix}--btn {\n    padding: $button-padding-ghost;\n\n    &:focus {\n      outline: $spacing-01 solid $layer;\n      outline-offset: -#{$spacing-01};\n    }\n  }\n\n  :host(#{$prefix}-button[pagination][has-main-content]:not([disabled])),\n  :host(\n      #{$prefix}-modal-footer-button[pagination][has-main-content]:not(\n          [disabled]\n        )\n    ),\n  :host(\n      #{$prefix}-dialog-footer-button[pagination][has-main-content]:not(\n          [disabled]\n        )\n    ) {\n    ::slotted([slot='icon']) {\n      position: static;\n      margin-inline-start: $spacing-02;\n    }\n  }\n}\n\n:host(#{$prefix}-button) {\n  .#{$prefix}--btn--icon-only {\n    align-items: center;\n    padding-block-start: 0;\n\n    &.#{$prefix}--btn--selected,\n    &.#{$prefix}--btn--expressive {\n      padding: $spacing-03;\n    }\n  }\n  .#{$prefix}--btn--ghost:not([disabled]) ::slotted([slot='icon']) {\n    fill: $icon-primary;\n  }\n}\n\n:host(#{$prefix}-button[kind='ghost']) {\n  .#{$prefix}--btn--ghost {\n    &:hover,\n    &:active {\n      outline: none;\n    }\n\n    &:not(:focus) {\n      box-shadow: none;\n    }\n  }\n}\n\n:host(#{$prefix}-button[kind='danger-ghost']) {\n  .#{$prefix}--btn--danger-ghost {\n    &:not(:focus) {\n      box-shadow: none;\n    }\n  }\n}\n\n:host(#{$prefix}-button-set),\n:host(#{$prefix}-side-panel-button-set) {\n  @extend .#{$prefix}--btn-set;\n\n  ::slotted(#{$prefix}-button) {\n    inline-size: 100%;\n    // 196px from design kit\n    max-inline-size: rem(196px);\n  }\n  ::slotted(#{$prefix}-button:not(:first-of-type)) {\n    z-index: 1;\n    box-shadow: to-rem(-1px) 0 0 0 button-tokens.$button-separator;\n  }\n\n  ::slotted(#{$prefix}-button:focus-within) {\n    box-shadow: inherit;\n  }\n\n  ::slotted(#{$prefix}-button:not(:first-of-type)[hide-margin]) {\n    box-shadow: inherit;\n  }\n}\n\n:host(#{$prefix}-button-set[stacked]) {\n  @extend .#{$prefix}--btn-set--stacked;\n\n  ::slotted(#{$prefix}-button:not(:first-of-type)) {\n    z-index: 1;\n    box-shadow: 0 to-rem(-1px) 0 0 button-tokens.$button-separator;\n  }\n\n  ::slotted(#{$prefix}-button:focus-within) {\n    box-shadow: inherit;\n  }\n\n  ::slotted(#{$prefix}-button:not(:first-of-type)[hide-margin]) {\n    box-shadow: inherit;\n  }\n}\n\n:host(#{$prefix}-button[data-context='data-table']) {\n  .#{$prefix}--btn {\n    padding-inline: $spacing-05;\n  }\n\n  .#{$prefix}--btn__icon {\n    position: static;\n    fill: $icon-on-color;\n    margin-inline-start: $spacing-03;\n\n    .st0 {\n      fill: none;\n    }\n  }\n}\n\n:host(#{$prefix}-button.#{$prefix}--batch-summary__cancel) {\n  --divider-opacity: 1;\n\n  button.#{$prefix}--btn {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0;\n    block-size: 100%;\n    min-block-size: 100%;\n    padding-inline-end: $spacing-05;\n    padding-inline-start: $spacing-05;\n\n    &::before {\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n\n      position: absolute;\n      display: block;\n      border: none;\n      background-color: $text-on-color;\n      block-size: $spacing-05;\n      content: '';\n      inline-size: rem(1px);\n      inset-inline-start: 0;\n      opacity: var(--divider-opacity);\n      transition: opacity $duration-fast-02 motion(standard, productive);\n    }\n\n    &:hover::before {\n      opacity: 0;\n    }\n  }\n}\n"],"mappings":""}