@dnb/eufemia/es/components/button/style/dnb-button--isolated.css

DNB Eufemia Design System UI Library

/*
* Button component
*
*/
/*
 * Utilities
 */
.eufemia-scope--10_104_0 {
  --button-icon-size: 1rem;
  --button-height: 2.5rem;
}

.eufemia-scope--10_104_0 .dnb-button {
  --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: 0.0625rem;
  --button-border-width--hover: 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;
}
.eufemia-scope--10_104_0 .dnb-button--wrap {
  overflow-wrap: break-word;
  white-space: normal;
}
.eufemia-scope--10_104_0 .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;
  box-shadow: none;
}
.eufemia-scope--10_104_0 .dnb-button, .eufemia-scope--10_104_0 .dnb-core-style .dnb-button {
  line-height: var(--button-height);
}
.eufemia-scope--10_104_0 .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);
}
.eufemia-scope--10_104_0 .dnb-button__text [data-os=linux] {
  transform: translateY(-0.035rem);
}
.eufemia-scope--10_104_0 .dnb-button__alignment {
  display: inline-block;
  width: 0;
}
.eufemia-scope--10_104_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);
}
.eufemia-scope--10_104_0 .dnb-button--size-small {
  --button-height: var(--button-height--small);
  width: var(--button-width--small);
  font-size: var(--button-font-size-small);
}
.eufemia-scope--10_104_0 .dnb-button--size-small .dnb-button__text {
  margin: 0;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--size-small {
  --button-padding-left: var(--button-padding--small);
  --button-padding-right: var(--button-padding--small);
}
.eufemia-scope--10_104_0 .dnb-button--size-medium {
  --button-height: var(--button-height--medium);
  width: var(--button-width--medium);
}
.eufemia-scope--10_104_0 .dnb-button--size-medium .dnb-button__text {
  margin: 0;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--size-medium {
  --button-padding-left: var(--button-padding--medium);
  --button-padding-right: var(--button-padding--medium);
}
.eufemia-scope--10_104_0 .dnb-button--control-before.dnb-button--size-medium {
  line-height: var(--button-height);
}
.eufemia-scope--10_104_0 .dnb-button--control-after.dnb-button--size-medium {
  line-height: var(--button-height);
}
.eufemia-scope--10_104_0 .dnb-button--size-large {
  --button-height: var(--button-height--large);
  --button-padding-icon: 1.5rem;
  width: var(--button-width--large);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--size-large {
  --button-padding-left: var(--button-padding--large);
  --button-padding-right: var(--button-padding--large);
}
.eufemia-scope--10_104_0 .dnb-button {
  /* stylelint-disable-next-line */
}
.eufemia-scope--10_104_0 .dnb-button--has-text {
  --button-padding-left: var(--button-padding--default);
  --button-padding-right: var(--button-padding--default);
  width: auto;
}
.eufemia-scope--10_104_0 .dnb-button__icon {
  margin: var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--icon-position-left {
  --button-padding-left: var(--button-padding-icon);
  --button-icon-margin-right: var(--button-icon-gutter);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--icon-position-right {
  --button-padding-right: var(--button-padding-icon);
  --button-icon-margin-left: var(--button-icon-gutter);
}
.eufemia-scope--10_104_0 .dnb-button--icon-size-small {
  --button-icon-size: var(--button-icon-size--small);
}
.eufemia-scope--10_104_0 .dnb-button--icon-size-medium {
  --button-icon-size: var(--button-icon-size--medium);
}
.eufemia-scope--10_104_0 .dnb-button--icon-size-large {
  --button-icon-size: var(--button-icon-size--large);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
  order: 2;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon .dnb-button__text {
  order: 1;
}
.eufemia-scope--10_104_0 .dnb-button:not(.dnb-button--has-text) .dnb-button__icon {
  width: inherit;
}
.eufemia-scope--10_104_0 .dnb-button__icon.dnb-icon svg:not([width]):not([height]) {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}
.eufemia-scope--10_104_0 [href] > .dnb-button__icon.dnb-icon {
  line-height: var(--button-font-size);
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
  order: 1;
}
.eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .eufemia-scope--10_104_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
  order: 2;
}
.eufemia-scope--10_104_0 .dnb-button--stretch {
  width: 100%;
}
.eufemia-scope--10_104_0 .dnb-button--control-before {
  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
}
.eufemia-scope--10_104_0 .dnb-button--control-after {
  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
}
.eufemia-scope--10_104_0 .dnb-button--reset {
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  overflow: visible;
  border: none;
  border-radius: 0;
  background-color: transparent;
  -webkit-appearance: none;
          appearance: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  line-height: inherit;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--reset:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--10_104_0 .dnb-button--reset:hover:not([disabled]) {
  box-shadow: none;
  border: none;
}
.eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):focus, .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):active {
  outline: none;
}
html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):active {
  --border-color: var(--focus-ring-color);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .eufemia-scope--10_104_0 .dnb-button--reset:not([disabled]):active {
  box-shadow: none;
  color: inherit;
  border: none;
}
.eufemia-scope--10_104_0 .dnb-button[type=button], .eufemia-scope--10_104_0 .dnb-button[type=reset], .eufemia-scope--10_104_0 .dnb-button[type=submit] {
  appearance: none;
  /* stylelint-disable-next-line */
  -moz-appearance: none;
  /* stylelint-disable-next-line */
  -webkit-appearance: none;
}
.eufemia-scope--10_104_0 .dnb-button[disabled] {
  cursor: not-allowed;
  outline: none;
}
.eufemia-scope--10_104_0 .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
  align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text {
  white-space: nowrap;
}
.eufemia-scope--10_104_0 .dnb-button + .dnb-form-status {
  margin-top: 0.5rem;
}

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