UNPKG

@stihl-design-system/components

Version:

Welcome to the STIHL Design System react component library.

2 lines (1 loc) 14.4 kB
.ds-link-button_root_3a4lw_1:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root_3a4lw_1:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root_3a4lw_1:focus{outline:revert;outline-offset:revert}.ds-link-button_root_3a4lw_1:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root_3a4lw_1:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-link-button_root_3a4lw_1{font-family:STIHL Contraface Digital Text Bold,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;font-weight:400;font-size:1rem;line-height:1.25;font-size-adjust:.426;padding-block-start:11px;padding-block-end:11px;padding-inline-start:23px;padding-inline-end:23px;display:inline-flex;justify-content:center;align-items:center;border-width:1px;border-style:solid;border-color:transparent;min-height:3rem;min-width:3rem;gap:8px;transform:translateZ(0);overflow-wrap:break-word;text-align:left;text-decoration:none;background-color:transparent;cursor:pointer}.ds-link-button_root_3a4lw_1{transition:background-color var(--ds-animation-duration, .1s) linear,border-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-link-button_root_3a4lw_1{transition-duration:0ms}}@media screen and (forced-colors: active){.ds-link-button_root_3a4lw_1{background-color:Canvas!important}.ds-link-button_root_3a4lw_1:hover{border-color:Highlight}}.ds-link-button_root--highlight_3a4lw_75,.ds-link-button_root--dark-highlight_3a4lw_75{background-color:#f37a1f;color:#252525}@media (hover: hover){.ds-link-button_root--highlight_3a4lw_75:hover,.ds-link-button_root--dark-highlight_3a4lw_75:hover{background-color:#e9640c}}.ds-link-button_root--highlight_3a4lw_75[aria-disabled=true],.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-link-button_root--highlight_3a4lw_75[aria-disabled=true] svg,.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--highlight_3a4lw_75[aria-disabled=true],.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--highlight_3a4lw_75[aria-disabled=true]:before,.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-highlight_3a4lw_75:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-highlight_3a4lw_75:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-highlight_3a4lw_75:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-highlight_3a4lw_75:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-highlight_3a4lw_75:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-highlight_3a4lw_75[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--filled_3a4lw_151{background-color:#252525;color:#fff}@media (hover: hover){.ds-link-button_root--filled_3a4lw_151:hover{background-color:#444}}.ds-link-button_root--filled_3a4lw_151[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-link-button_root--filled_3a4lw_151[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--filled_3a4lw_151[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--filled_3a4lw_151[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--outline_3a4lw_179{border-color:#252525;color:#252525}@media (hover: hover){.ds-link-button_root--outline_3a4lw_179:hover{background-color:#0000001a}}.ds-link-button_root--outline_3a4lw_179[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;border-color:currentColor}.ds-link-button_root--outline_3a4lw_179[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--outline_3a4lw_179[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--outline_3a4lw_179[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--ghost_3a4lw_206{color:#252525}@media (hover: hover){.ds-link-button_root--ghost_3a4lw_206:hover{background-color:#0000001a}}.ds-link-button_root--ghost_3a4lw_206[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-link-button_root--ghost_3a4lw_206[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--ghost_3a4lw_206[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--ghost_3a4lw_206[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--ghost-flush_3a4lw_231{color:#252525;padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-link-button_root--ghost-flush_3a4lw_231.ds-link-button_root--small_3a4lw_237{padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-link-button_root--ghost-flush_3a4lw_231:before{content:"";position:absolute;top:-1px;right:-12px;bottom:-1px;left:-12px}.ds-link-button_root--ghost-flush_3a4lw_231:before{transition:background-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-link-button_root--ghost-flush_3a4lw_231:before{transition-duration:0ms}}.ds-link-button_root--ghost-flush_3a4lw_231:focus,.ds-link-button_root--ghost-flush_3a4lw_231:focus-visible{outline:none}.ds-link-button_root--ghost-flush_3a4lw_231:focus:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--ghost-flush_3a4lw_231:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--ghost-flush_3a4lw_231:focus:before{outline:revert;outline-offset:revert}.ds-link-button_root--ghost-flush_3a4lw_231:focus-visible:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--ghost-flush_3a4lw_231:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--ghost-flush_3a4lw_231:hover:before{background-color:#0000001a}}@media screen and (hover: hover) and (forced-colors: active){.ds-link-button_root--ghost-flush_3a4lw_231:hover:before{background-color:transparent}}.ds-link-button_root--ghost-flush_3a4lw_231[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-link-button_root--ghost-flush_3a4lw_231[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--ghost-flush_3a4lw_231[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--ghost-flush_3a4lw_231[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-filled_3a4lw_317{background-color:#f8f8f8;color:#252525}.ds-link-button_root--dark-filled_3a4lw_317:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-filled_3a4lw_317:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-filled_3a4lw_317:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-filled_3a4lw_317:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-filled_3a4lw_317:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-filled_3a4lw_317:hover{background-color:#dadada}}.ds-link-button_root--dark-filled_3a4lw_317[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-link-button_root--dark-filled_3a4lw_317[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-filled_3a4lw_317[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-filled_3a4lw_317[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-outline_3a4lw_374{border-color:#f8f8f8;color:#fff}.ds-link-button_root--dark-outline_3a4lw_374:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-outline_3a4lw_374:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-outline_3a4lw_374:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-outline_3a4lw_374:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-outline_3a4lw_374:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-outline_3a4lw_374:hover{background-color:#ffffff26}}.ds-link-button_root--dark-outline_3a4lw_374[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80;border-color:currentColor}.ds-link-button_root--dark-outline_3a4lw_374[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-outline_3a4lw_374[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-outline_3a4lw_374[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-ghost_3a4lw_430{color:#fff}.ds-link-button_root--dark-ghost_3a4lw_430:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost_3a4lw_430:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-ghost_3a4lw_430:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-ghost_3a4lw_430:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost_3a4lw_430:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-ghost_3a4lw_430:hover{background-color:#ffffff26}}.ds-link-button_root--dark-ghost_3a4lw_430[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-link-button_root--dark-ghost_3a4lw_430[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost_3a4lw_430[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-ghost_3a4lw_430[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-ghost-flush_3a4lw_484{color:#fff}.ds-link-button_root--dark-ghost-flush_3a4lw_484:focus,.ds-link-button_root--dark-ghost-flush_3a4lw_484:focus-visible{outline:none}.ds-link-button_root--dark-ghost-flush_3a4lw_484:focus:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_3a4lw_484:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-ghost-flush_3a4lw_484:focus:before{outline:revert;outline-offset:revert}.ds-link-button_root--dark-ghost-flush_3a4lw_484:focus-visible:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_3a4lw_484:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-ghost-flush_3a4lw_484:hover:before{background-color:#ffffff26}}@media screen and (hover: hover) and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_3a4lw_484:hover:before{background-color:transparent}}.ds-link-button_root--dark-ghost-flush_3a4lw_484[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-link-button_root--dark-ghost-flush_3a4lw_484[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_3a4lw_484[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-ghost-flush_3a4lw_484[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--small_3a4lw_237{min-height:2rem;min-width:2rem;padding-block-start:5px;padding-block-end:5px;padding-inline-start:15px;padding-inline-end:15px}.ds-link-button_root--small_3a4lw_237.ds-link-button_root--ghost-flush_3a4lw_231:before{right:-8px;left:-8px}.ds-link-button_root--icon-left_3a4lw_559{flex-direction:row-reverse}.ds-link-button_root--icon-only_3a4lw_562{width:3rem;height:3rem}.ds-link-button_root--icon-only_3a4lw_562.ds-link-button_root--ghost-flush_3a4lw_231{width:1rem;height:1rem}.ds-link-button_root--icon-only-small_3a4lw_571{width:2rem;height:2rem;min-width:2rem;min-height:2rem}.ds-link-button_root--icon-only-small_3a4lw_571.ds-link-button_root--ghost-flush_3a4lw_231{width:1rem;height:1rem}.ds-link-button_label--hidden_3a4lw_582{border:0;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;text-indent:-999999px;white-space:nowrap}