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

DNB Eufemia Design System UI Library

:root{--button-icon-size:1rem;--button-height:2.5rem}.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;cursor:pointer;position:relative;white-space:nowrap}.dnb-button--wrap{overflow-wrap:break-word;white-space:normal}.dnb-button{align-items:center;border:none;border-radius:var(--button-border-radius);box-shadow:none;display:inline-flex;font-size:var(--font-size-small);font-weight:var(--font-weight-regular);height:auto;justify-content:center;padding:0 var(--button-padding-right) 0 var(--button-padding-left);text-align:left;-webkit-text-decoration:none;text-decoration:none;width:var(--button-width)}.dnb-button,.dnb-core-style .dnb-button{line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:var(--button-font-size);line-height:var(--line-height-basis);margin:.5rem 0;transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;transform:scale(1.1,1.4)}.dnb-button--size-small{--button-height:var(--button-height--small);font-size:var(--button-font-size-small);width:var(--button-width--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-after.dnb-button--size-medium,.dnb-button--control-before.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--has-text{--button-padding-left:var(--button-padding--default);--button-padding-right:var(--button-padding--default);width:auto}.dnb-button__icon{margin:var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left)}.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]){height:var(--button-icon-size);width: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--reset{-webkit-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed;outline:none}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}button.dnb-button::-moz-focus-inner{border:none}