@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
15 lines • 6.18 kB
CSS
.dnb-button--tertiary{--button-tertiary-focus-left:-0.5rem;--button-tertiary-focus-right:-0.5rem;--button-tertiary-focus-overflow--icon-top:-0.5rem;--button-tertiary-underline-left:var(
--button-tertiary-underline-overflow
);--button-tertiary-underline-right:var(
--button-tertiary-underline-overflow
);--button-tertiary-underline-overflow:0;--button-tertiary-underline-overflow--icon:calc((var(--button-icon-gutter) + var(--button-icon-size))*-1)}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--button-color-underline,var(--button-color-underline--default));content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-button--tertiary .dnb-button__text:after{left:var(--button-tertiary-underline-left);right:var(--button-tertiary-underline-right)}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}html:not([data-whatinput=touch]) .dnb-button--tertiary:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatinput=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary.dnb-button--has-text{--button-padding-left:0;--button-padding-right:0;--button-icon-margin-top:calc((var(--button-height) - var(--button-icon-size))/2)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start}.dnb-button--tertiary.dnb-button--icon-position-top{--button-tertiary-focus-left:var(
--button-tertiary-focus-overflow--icon-top
);--button-tertiary-focus-right:var(
--button-tertiary-focus-overflow--icon-top
);border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{--button-icon-margin-top:0.5rem}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon{align-self:center}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-large,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-medium{--button-tertiary-underline-overflow--icon:var(
--button-tertiary-underline-overflow
)}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left{--button-tertiary-focus-right:-1rem;--button-tertiary-underline-left:var(
--button-tertiary-underline-overflow--icon
)}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right{--button-tertiary-focus-left:-1rem;--button-tertiary-underline-right:var(
--button-tertiary-underline-overflow--icon
)}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text){--button-tertiary-focus-left:0;--button-tertiary-focus-right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button):not(.dnb-button--control-before):not(.dnb-button--control-after).dnb-button--size-large{line-height:calc(var(--button-height) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after,.dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before{border:none;box-shadow:none}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover:not([disabled]){border:none;box-shadow:none}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{--button-color-underline:var(--button-color-underline--hover)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}