@dnb/eufemia 10.76.1 → 10.77.0

package/cjs/components/button/style/dnb-button--isolated.css

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

package/cjs/components/button/style/dnb-button--isolated.min.css

@@ -0,0 +1 @@
+.eufemia-scope--10_77_0{--button-icon-size:1rem;--button-height:2.5rem}.eufemia-scope--10_77_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;align-items:center;border:none;border-radius:var(--button-border-radius);box-shadow:none;cursor:pointer;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);position:relative;text-align:left;-webkit-text-decoration:none;text-decoration:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:var(--button-width)}.eufemia-scope--10_77_0 .dnb-button--wrap{overflow-wrap:break-word;white-space:normal}.eufemia-scope--10_77_0 .dnb-button,.eufemia-scope--10_77_0 .dnb-core-style .dnb-button{line-height:var(--button-height)}.eufemia-scope--10_77_0 .dnb-button__text{color:inherit;font-size:var(--button-font-size);line-height:var(--line-height-basis);margin:.5rem 0;transform:translateY(-.03125rem)}.eufemia-scope--10_77_0 .dnb-button__text [data-os=linux]{transform:translateY(-.035rem)}.eufemia-scope--10_77_0 .dnb-button__alignment{display:inline-block;width:0}.eufemia-scope--10_77_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)}.eufemia-scope--10_77_0 .dnb-button--size-small{--button-height:var(--button-height--small);font-size:var(--button-font-size-small);width:var(--button-width--small)}.eufemia-scope--10_77_0 .dnb-button--size-small .dnb-button__text{margin:0}.eufemia-scope--10_77_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_77_0 .dnb-button--size-medium{--button-height:var(--button-height--medium);width:var(--button-width--medium)}.eufemia-scope--10_77_0 .dnb-button--size-medium .dnb-button__text{margin:0}.eufemia-scope--10_77_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_77_0 .dnb-button--control-after.dnb-button--size-medium,.eufemia-scope--10_77_0 .dnb-button--control-before.dnb-button--size-medium{line-height:var(--button-height)}.eufemia-scope--10_77_0 .dnb-button--size-large{--button-height:var(--button-height--large);--button-padding-icon:1.5rem;width:var(--button-width--large)}.eufemia-scope--10_77_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_77_0 .dnb-button--has-text{--button-padding-left:var(--button-padding--default);--button-padding-right:var(--button-padding--default);width:auto}.eufemia-scope--10_77_0 .dnb-button__icon{margin:var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left)}.eufemia-scope--10_77_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_77_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_77_0 .dnb-button--icon-size-small{--button-icon-size:var(--button-icon-size--small)}.eufemia-scope--10_77_0 .dnb-button--icon-size-medium{--button-icon-size:var(--button-icon-size--medium)}.eufemia-scope--10_77_0 .dnb-button--icon-size-large{--button-icon-size:var(--button-icon-size--large)}.eufemia-scope--10_77_0 .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{order:2}.eufemia-scope--10_77_0 .dnb-button--has-text.dnb-button--has-icon .dnb-button__text{order:1}.eufemia-scope--10_77_0 .dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.eufemia-scope--10_77_0 .dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:var(--button-icon-size);width:var(--button-icon-size)}.eufemia-scope--10_77_0 [href]>.dnb-button__icon.dnb-icon{line-height:var(--button-font-size)}.eufemia-scope--10_77_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.eufemia-scope--10_77_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{order:1}.eufemia-scope--10_77_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.eufemia-scope--10_77_0 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{order:2}.eufemia-scope--10_77_0 .dnb-button--stretch{width:100%}.eufemia-scope--10_77_0 .dnb-button--control-before{border-radius:var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button)}.eufemia-scope--10_77_0 .dnb-button--control-after{border-radius:0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0}.eufemia-scope--10_77_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]) .eufemia-scope--10_77_0 .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-button--reset:hover:not([disabled]){border:none;box-shadow:none}.eufemia-scope--10_77_0 .dnb-button--reset:not([disabled]):active,.eufemia-scope--10_77_0 .dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .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] .eufemia-scope--10_77_0 .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .eufemia-scope--10_77_0 .dnb-button--reset:not([disabled]):focus{border:none;box-shadow:none;color:inherit}.eufemia-scope--10_77_0 .dnb-button[type=button],.eufemia-scope--10_77_0 .dnb-button[type=reset],.eufemia-scope--10_77_0 .dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.eufemia-scope--10_77_0 .dnb-button[disabled]{cursor:not-allowed;outline:none}.eufemia-scope--10_77_0 .dnb-form-row--vertical .dnb-form-row__content>.dnb-button{align-self:flex-start}.eufemia-scope--10_77_0 .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.eufemia-scope--10_77_0 .dnb-button+.dnb-form-status{margin-top:.5rem}.eufemia-scope--10_77_0 button.dnb-button::-moz-focus-inner{border:none}