@dnb/eufemia/cjs/components/button/style/dnb-button.css

DNB Eufemia Design System UI Library

/*
* Button component
*
*/
/*
 * Utilities
 */
:root {
  --button-icon-size: 1rem;
  --button-height: 2.5rem;
}

.dnb-button {
  --button-color-text: var(--button-color-text--default);
  --button-color-icon: var(--button-color-icon--default);
  --button-color-bg: var(--button-color-bg--default);
  --button-color-border: var(--button-color-border--default);
  --button-color-underline: var(--button-color-underline--default);
  --button-border-inset: var(--button-border-inset--default);
  --button-border-inset--default: inset;
  --button-border-inset--hover: ;
  --button-border-inset--focus: ;
  --button-font-size: var(--font-size-basis);
  --button-font-size-small: var(--font-size-small);
  --button-icon-size--small: 0.75rem;
  --button-icon-size--medium: 1.5rem;
  --button-icon-size--large: 2rem;
  --button-icon-gutter: 0.5rem;
  --button-width: 2.5rem;
  --button-width--small: 1.5rem;
  --button-height--small: 1.5rem;
  --button-width--medium: 2rem;
  --button-height--medium: 2rem;
  --button-width--large: 3rem;
  --button-height--large: 3rem;
  --button-border-width: var(--button-border-width--default);
  --button-border-width--default: 0.0625rem;
  --button-border-width--hover: 0.125rem;
  --button-border-width--focus: 0.1875rem;
  --button-border-radius: calc(var(--button-height) / 2);
  --button-border-radius--control-button: 0.25rem;
  --button-padding-left: 0;
  --button-padding-right: 0;
  --button-padding-icon: 1rem;
  --button-padding--default: 1.5rem;
  --button-padding--small: 1rem;
  --button-padding--medium: 1rem;
  --button-padding--large: 2rem;
  --button-icon-margin-top: 0;
  --button-icon-margin-left: 0;
  --button-icon-margin-right: 0;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.dnb-button--wrap {
  overflow-wrap: break-word;
  white-space: normal;
}
.dnb-button__icon {
  margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left);
}
.dnb-button--primary, .dnb-button--secondary, .dnb-button--tertiary {
  color: var(--button-color-text, var(--button-color-text--default));
  background-color: var(--button-color-bg, var(--button-color-bg--default));
}
.dnb-button--primary .dnb-button__icon, .dnb-button--secondary .dnb-button__icon, .dnb-button--tertiary .dnb-button__icon {
  color: var(--button-color-icon, var(--button-color-icon--default));
}
html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) {
  --button-color-bg: var(--button-color-bg--hover);
  --button-color-border: var(--button-color-border--hover);
  --button-color-icon: var(--button-color-icon--hover);
  --button-color-text: var(--button-color-text--hover);
  --button-color-underline: var(--button-color-underline--hover);
  --button-border-inset: var(--button-border-inset--hover);
  --button-border-width: var(--button-border-width--hover);
  --button-input-separator-color: var(
    --button-input-separator-color--hover
  );
}
.dnb-button--primary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled], .dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled], .dnb-button--tertiary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled] {
  cursor: not-allowed;
}
.dnb-button--primary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]), .dnb-button--secondary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]), .dnb-button--tertiary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) {
  --button-color-bg: var(--button-color-bg--active);
  --button-color-border: var(--button-color-border--active);
  --button-color-icon: var(--button-color-icon--active);
  --button-color-text: var(--button-color-text--active);
  --button-color-underline: var(--button-color-underline--active);
  --button-border-inset: var(--button-border-inset--active);
  --button-border-width: var(--button-border-width--active);
  --button-input-separator-color: var(
    --button-input-separator-color--active
  );
}
html:not([data-whatinput=touch]) .dnb-button--primary:focus-visible[disabled], html:not([data-whatinput=touch]) .dnb-button--secondary:focus-visible[disabled], html:not([data-whatinput=touch]) .dnb-button--tertiary:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatinput=touch]) .dnb-button--primary:focus-visible:not([disabled]), html:not([data-whatinput=touch]) .dnb-button--secondary:focus-visible:not([disabled]), html:not([data-whatinput=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) {
  --button-color-bg: var(--token-color-background-action-focus-subtle);
  --button-color-border: var(--token-color-stroke-action-focus);
  --button-color-icon: var(--token-color-icon-action-focus);
  --button-color-text: var(--token-color-text-action-focus);
  --button-color-underline: var(--button-color-underline--focus);
  --button-border-inset: var(--button-border-inset--focus);
  --button-border-width: var(--button-border-width--focus);
  --button-input-separator-color: var(
    --button-input-separator-color--focus
  );
  outline: none;
}
.dnb-button--primary[disabled], .dnb-button--secondary[disabled], .dnb-button--tertiary[disabled] {
  --button-color-bg: var(--button-color-bg--disabled);
  --button-color-border: var(--button-color-border--disabled);
  --button-color-icon: var(--button-color-icon--disabled);
  --button-color-text: var(--button-color-text--disabled);
  --button-input-separator-color: var(
    --button-input-separator-color--disabled
  );
}
.dnb-button--primary, .dnb-button--secondary, .dnb-button--tertiary::before {
  --border-color: var(--button-color-border, var(--button-color-border--default));
  --border-width: var(--button-border-width, var(--button-border-width--default));
  box-shadow: var(--button-border-inset, var(--button-border-inset--default)) 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-button--primary {
  --button-color-bg--default: var(
    --token-color-component-button-background-action
  );
  --button-color-bg--hover: var(
    --token-color-component-button-background-action-hover
  );
  --button-color-bg--active: var(
    --token-color-background-action-pressed
  );
  --button-color-bg--disabled: var(
    --token-color-background-action-disabled
  );
  --button-color-border--hover: var(
    --token-color-component-button-stroke-action-hover
  );
  --button-color-icon--default: var(
    --token-color-component-button-icon-neutral
  );
  --button-color-icon--disabled: var(
    --token-color-component-button-icon-action-disabled
  );
  --button-color-text--default: var(
    --token-color-component-button-text-neutral
  );
  --button-color-text--disabled: var(
    --token-color-component-button-text-action-disabled
  );
}
.dnb-button--primary.dnb-button--surface-dark {
  --button-color-bg--default: var(
    --token-color-background-action-ondark
  );
  --button-color-bg--hover: var(
    --token-color-background-action-hover-ondark
  );
  --button-color-bg--active: var(
    --token-color-background-action-pressed-ondark
  );
  --button-color-bg--disabled: var(
    --token-color-background-action-disabled-ondark
  );
  --button-color-border--hover: var(
    --token-color-stroke-action-hover-ondark
  );
  --button-color-icon--default: var(
    --token-color-component-button-icon-neutral-ondark
  );
  --button-color-icon--disabled: var(
    --token-color-icon-action-disabled-ondark
  );
  --button-color-text--default: var(
    --token-color-component-button-text-neutral-ondark
  );
  --button-color-text--disabled: var(
    --token-color-text-action-disabled-ondark
  );
}
.dnb-button--primary.dnb-button__status--error {
  --button-color-bg--default: var(
    --token-color-component-button-background-action-destructive
  );
  --button-color-bg--hover: var(
    --token-color-component-button-background-action-destructive-hover
  );
  --button-color-bg--active: var(
    --token-color-component-button-background-action-destructive-pressed
  );
  --button-color-border--hover: var(
    --token-color-component-button-stroke-action-destructive-hover
  );
  --button-color-icon--default: var(
    --token-color-component-button-icon-neutral-destructive
  );
  --button-color-text--default: var(
    --token-color-component-button-text-neutral-destructive
  );
}
.dnb-button--secondary {
  --button-color-bg--default: var(--token-color-background-neutral);
  --button-color-bg--hover: var(
    --token-color-background-action-hover-subtle
  );
  --button-color-bg--active: var(
    --token-color-background-action-pressed-subtle
  );
  --button-color-bg--disabled: var(--token-color-background-neutral);
  --button-color-border--default: var(
    --token-color-component-button-stroke-action
  );
  --button-color-border--hover: var(
    --token-color-component-button-stroke-action-hover
  );
  --button-color-border--active: var(
    --token-color-stroke-action-pressed
  );
  --button-color-border--disabled: var(
    --token-color-stroke-action-disabled
  );
  --button-color-icon--default: var(
    --token-color-component-button-icon-action
  );
  --button-color-icon--hover: var(
    --token-color-component-button-icon-action-hover
  );
  --button-color-icon--active: var(--token-color-icon-action-pressed);
  --button-color-icon--disabled: var(--token-color-icon-action-disabled);
  --button-color-text--default: var(
    --token-color-component-button-text-action
  );
  --button-color-text--hover: var(
    --token-color-component-button-text-action-hover
  );
  --button-color-text--active: var(--token-color-text-action-pressed);
  --button-color-text--disabled: var(--token-color-text-action-disabled);
}
.dnb-button--secondary.dnb-button--icon-only {
  --button-color-border--default: var(--token-color-stroke-action);
  --button-color-border--hover: var(--token-color-stroke-action-hover);
  --button-color-border--active: transparent;
  --button-color-icon--default: var(--token-color-icon-action);
  --button-color-icon--hover: var(--token-color-icon-action-hover);
}
.dnb-button--secondary.dnb-button--surface-dark {
  --button-color-bg--default: transparent;
  --button-color-bg--hover: var(
    --token-color-background-action-hover-subtle-ondark
  );
  --button-color-bg--active: var(
    --token-color-background-action-pressed-subtle-ondark
  );
  --button-color-bg--disabled: transparent;
  --button-color-border--default: var(
    --token-color-stroke-action-ondark
  );
  --button-color-border--hover: var(
    --token-color-stroke-action-hover-ondark
  );
  --button-color-border--active: var(
    --token-color-stroke-action-pressed-ondark
  );
  --button-color-border--disabled: var(
    --token-color-stroke-action-disabled-ondark
  );
  --button-color-icon--default: var(--token-color-icon-action-ondark);
  --button-color-icon--hover: var(
    --token-color-icon-action-hover-ondark
  );
  --button-color-icon--active: var(
    --token-color-icon-action-pressed-ondark
  );
  --button-color-icon--disabled: var(
    --token-color-icon-action-disabled-ondark
  );
  --button-color-text--default: var(--token-color-text-action-ondark);
  --button-color-text--hover: var(
    --token-color-text-action-hover-ondark
  );
  --button-color-text--active: var(
    --token-color-text-action-pressed-ondark
  );
  --button-color-text--disabled: var(
    --token-color-text-action-disabled-ondark
  );
}
.dnb-button--secondary.dnb-button__status--error {
  --button-color-bg--default: var(--token-color-background-neutral);
  --button-color-bg--hover: var(
    --token-color-component-button-background-action-destructive-hover-subtle
  );
  --button-color-bg--active: var(
    --token-color-component-button-background-action-destructive-pressed-subtle
  );
  --button-color-border--default: var(
    --token-color-component-button-stroke-action-destructive
  );
  --button-color-border--hover: var(
    --token-color-component-button-stroke-action-destructive-hover
  );
  --button-color-border--active: var(
    --token-color-component-button-stroke-action-destructive-pressed
  );
  --button-color-icon--default: var(
    --token-color-component-button-icon-action-destructive
  );
  --button-color-icon--hover: var(
    --token-color-component-button-icon-action-destructive-hover
  );
  --button-color-icon--active: var(
    --token-color-component-button-icon-action-destructive-pressed
  );
  --button-color-text--default: var(
    --token-color-component-button-text-action-destructive
  );
  --button-color-text--hover: var(
    --token-color-component-button-text-action-destructive-hover
  );
  --button-color-text--active: var(
    --token-color-component-button-text-action-destructive-pressed
  );
}
.dnb-button--tertiary > * {
  z-index: 2;
}
.dnb-button--tertiary::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--button-tertiary-focus-left);
  bottom: 0;
  right: var(--button-tertiary-focus-right);
  background-color: inherit;
  height: inherit;
  border-radius: inherit;
}
.dnb-skeleton .dnb-button--tertiary::before {
  content: none;
}
.dnb-button--tertiary {
  --button-color-icon--default: var(--token-color-icon-action);
  --button-color-icon--hover: var(--token-color-icon-action-hover);
  --button-color-icon--active: var(--token-color-icon-action-pressed);
  --button-color-icon--disabled: var(--token-color-icon-action-disabled);
  --button-color-text--default: var(--token-color-text-action);
  --button-color-text--hover: var(--token-color-text-action-hover);
  --button-color-text--active: var(--token-color-text-action-pressed);
  --button-color-text--disabled: var(--token-color-text-action-disabled);
  --button-color-underline--default: transparent;
  --button-color-underline--hover: var(
    --token-color-background-action-hover
  );
}
.dnb-button--tertiary.dnb-button--icon-only {
  --button-color-bg--hover: var(
    --token-color-background-action-hover-subtle
  );
  --button-color-bg--active: var(
    --token-color-background-action-pressed-subtle
  );
}
.dnb-button--tertiary.dnb-button--surface-dark {
  --button-color-icon--default: var(--token-color-icon-action-ondark);
  --button-color-icon--hover: var(
    --token-color-icon-action-hover-ondark
  );
  --button-color-icon--active: var(
    --token-color-icon-action-pressed-ondark
  );
  --button-color-icon--disabled: var(
    --token-color-icon-action-disabled-ondark
  );
  --button-color-text--default: var(--token-color-text-action-ondark);
  --button-color-text--hover: var(
    --token-color-text-action-hover-ondark
  );
  --button-color-text--active: var(
    --token-color-text-action-pressed-ondark
  );
  --button-color-text--disabled: var(
    --token-color-text-action-disabled-ondark
  );
  --button-color-underline--hover: var(
    --token-color-icon-action-hover-ondark
  );
}
.dnb-button--tertiary.dnb-button__status--error {
  --button-color-icon--default: var(
    --token-color-component-button-icon-action-destructive
  );
  --button-color-icon--hover: var(
    --token-color-component-button-icon-action-destructive-hover
  );
  --button-color-icon--active: var(
    --token-color-component-button-icon-action-destructive-pressed
  );
  --button-color-text--default: var(
    --token-color-component-button-text-action-destructive
  );
  --button-color-text--hover: var(
    --token-color-component-button-text-action-destructive-hover
  );
  --button-color-text--active: var(
    --token-color-component-button-text-action-destructive-pressed
  );
  --button-color-underline--hover: var(
    --token-color-component-button-background-action-destructive-hover
  );
}
.dnb-button--icon-only.dnb-button--selected {
  --button-color-bg--default: var(
    --token-color-background-selected-subtle
  );
  --button-color-border--default: var(--token-color-stroke-selected);
  --button-color-icon--default: var(--token-color-icon-selected);
  --button-border-width--default: 0.125rem;
  --button-border-inset--default: ;
}
.dnb-button--icon-only.dnb-button--input-button {
  --button-color-bg--default: transparent;
  --button-color-bg--hover: var(--token-color-background-action);
  --button-color-bg--active: var(
    --token-color-background-action-pressed
  );
  --button-color-bg--disabled: var(
    --token-color-background-neutral-subtle
  );
  --button-color-border--default: transparent;
  --button-color-border--hover: transparent;
  --button-color-border--active: transparent;
  --button-border-inset--focus: inset;
  --button-color-icon--hover: var(
    --token-color-component-button-icon-neutral
  );
  --button-color-icon--active: var(
    --token-color-component-button-icon-neutral
  );
  --button-color-icon--disabled: var(
    --token-color-icon-action-disabled
  );
  --button-color-text--hover: var(
    --token-color-component-button-text-neutral
  );
  --button-color-text--active: var(
    --token-color-component-button-text-neutral
  );
  --button-color-text--disabled: var(
    --token-color-component-button-text-action-disabled
  );
}
.dnb-button--icon-only.dnb-button--input-button.dnb-button__status--error {
  --button-color-bg--hover: var(--token-color-background-error);
  --button-color-bg--active: var(
    --token-color-component-button-background-action-destructive-pressed
  );
  --button-color-icon--hover: var(
    --token-color-component-button-icon-neutral-destructive
  );
  --button-color-icon--active: var(
    --token-color-component-button-icon-neutral-destructive
  );
  --button-color-text--hover: var(
    --token-color-component-button-text-neutral-destructive
  );
  --button-color-text--active: var(
    --token-color-component-button-text-neutral-destructive
  );
}
.dnb-button--icon-only.dnb-button--input-button {
  --button-input-separator-color--default: var(--button-color-text);
  --button-input-separator-color--hover: var(--button-color-bg);
  --button-input-separator-color--active: var(--button-color-bg);
  --button-input-separator-color--focus: var(--button-color-border);
  --button-input-separator-color--disabled: var(
    --token-color-background-action-disabled
  );
}
.dnb-button--icon-only.dnb-button--input-button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--input-border-width);
  background-color: var(--button-input-separator-color, var(--button-input-separator-color--default));
}
.dnb-button--icon-only.dnb-button--input-button:active[disabled], html:not([data-whatintent=touch]) .dnb-button--icon-only.dnb-button--input-button:active[disabled] {
  cursor: not-allowed;
}
.dnb-button--icon-only.dnb-button--input-button:active:not([disabled])::after, html:not([data-whatintent=touch]) .dnb-button--icon-only.dnb-button--input-button:active:not([disabled])::after {
  top: var(--input-border-width);
  bottom: var(--input-border-width);
}
.dnb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  height: auto;
  padding: 0 var(--button-padding-right) 0 var(--button-padding-left);
  border: none;
  border-radius: var(--button-border-radius);
  text-align: left;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.dnb-button, .dnb-core-style .dnb-button {
  line-height: var(--button-height);
}
.dnb-button__text {
  margin: 0.5rem 0;
  font-size: var(--button-font-size);
  line-height: var(--line-height-basis);
  color: inherit;
  transform: translateY(-0.03125rem);
}
.dnb-button__text [data-os=linux] {
  transform: translateY(-0.035rem);
}
.dnb-button__alignment {
  display: inline-block;
  width: 0;
}
.dnb-button__bounding {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transform: scale(1.1, 1.4);
  background-color: transparent;
  border-radius: var(--button-border-radius);
}
.dnb-button--size-small {
  --button-height: var(--button-height--small);
  width: var(--button-width--small);
  font-size: var(--button-font-size-small);
}
.dnb-button--size-small .dnb-button__text {
  margin: 0;
}
.dnb-button--has-text.dnb-button--size-small {
  --button-padding-left: var(--button-padding--small);
  --button-padding-right: var(--button-padding--small);
}
.dnb-button--size-medium {
  --button-height: var(--button-height--medium);
  width: var(--button-width--medium);
}
.dnb-button--size-medium .dnb-button__text {
  margin: 0;
}
.dnb-button--has-text.dnb-button--size-medium {
  --button-padding-left: var(--button-padding--medium);
  --button-padding-right: var(--button-padding--medium);
}
.dnb-button--control-before.dnb-button--size-medium {
  line-height: var(--button-height);
}
.dnb-button--control-after.dnb-button--size-medium {
  line-height: var(--button-height);
}
.dnb-button--size-large {
  --button-height: var(--button-height--large);
  --button-padding-icon: 1.5rem;
  width: var(--button-width--large);
}
.dnb-button--has-text.dnb-button--size-large {
  --button-padding-left: var(--button-padding--large);
  --button-padding-right: var(--button-padding--large);
}
.dnb-button {
  /* stylelint-disable-next-line */
}
.dnb-button--has-text {
  --button-padding-left: var(--button-padding--default);
  --button-padding-right: var(--button-padding--default);
  width: auto;
}
.dnb-button--has-text.dnb-button--icon-position-left {
  --button-padding-left: var(--button-padding-icon);
  --button-icon-margin-right: var(--button-icon-gutter);
}
.dnb-button--has-text.dnb-button--icon-position-right {
  --button-padding-right: var(--button-padding-icon);
  --button-icon-margin-left: var(--button-icon-gutter);
}
.dnb-button--icon-size-small {
  --button-icon-size: var(--button-icon-size--small);
}
.dnb-button--icon-size-medium {
  --button-icon-size: var(--button-icon-size--medium);
}
.dnb-button--icon-size-large {
  --button-icon-size: var(--button-icon-size--large);
}
.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
  order: 2;
}
.dnb-button--has-text.dnb-button--has-icon .dnb-button__text {
  order: 1;
}
.dnb-button:not(.dnb-button--has-text) .dnb-button__icon {
  width: inherit;
}
.dnb-button__icon.dnb-icon svg:not([width]):not([height]) {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}
[href] > .dnb-button__icon.dnb-icon {
  line-height: var(--button-font-size);
}
.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
  order: 1;
}
.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
  order: 2;
}
.dnb-button--stretch {
  width: 100%;
}
.dnb-button--control-before {
  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
}
.dnb-button--control-after {
  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
}
.dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] {
  appearance: none;
  /* stylelint-disable-next-line */
  -moz-appearance: none;
  /* stylelint-disable-next-line */
  -webkit-appearance: none;
}
.dnb-button[disabled] {
  cursor: not-allowed;
  outline: none;
}
.dnb-button + .dnb-form-status {
  margin-top: 0.5rem;
}

/* Firefox includes a hidden border which messes up button dimensions */
button.dnb-button::-moz-focus-inner {
  border: none;
}