@codex-storage/marketplace-ui-components/dist/assets/Button.css

Marketplace UI components for Codex decentralized storage network.

@property --codex-button-padding{syntax: "*"; inherits: false; initial-value: 9px 10px;}@property --codex-button-color{syntax: "<color>"; inherits: false; initial-value: rgb(150,150,150);}@property --codex-button-background-color{syntax: "<color>"; inherits: false; initial-value: transparent;}@property --codex-button-border-color{syntax: "<color>"; inherits: false; initial-value: rgba(47,47,47,1);}@property --codex-button-border-radius{syntax: "<length>"; inherits: false; initial-value: 8px;}.button{outline:none;padding:var(--codex-button-padding);display:flex;gap:2px;position:relative;transition:box-shadow .35s,opacity .35s;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;place-items:center;place-content:center;background-color:var(--codex-button-background-color, transparent);color:var(--codex-button-color, rgb(150, 150, 150));border:1px solid var(--codex-button-border-color);border-radius:var(--codex-button-border-radius)}.button.button--medium{--codex-button-padding: 9px 10px}.button.button--small{--codex-button-padding: 6px 10px;height:40px}.button[aria-busy]{cursor:wait}.button[aria-busy]:after{--codex-button-background-color: rgba(70, 70, 70, .75);content:" ";display:block;background-image:url('data:image/svg+xml,<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background: new 0 0 50 50" xml:space="preserve"><path fill="%23FFF" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>');position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);background-repeat:no-repeat;background-position:center;background-size:28px;left:-1px;right:0}.button.button--primary:not(:disabled):hover{cursor:pointer;box-shadow:0 0 0 3px #6fcb94cc}.button.button--outline:not(:disabled):hover{cursor:pointer;box-shadow:0 0 0 2px var(--codex-button-border-color)}.button.button--primary{--codex-button-color: rgba(0, 0, 0);--codex-button-background-color: rgb(111, 203, 148);--codex-button-border-color: rgb(151, 234, 184)}.button:disabled{cursor:not-allowed}.button.button--primary:disabled{--codex-button-border-color: rgba(111, 203, 148, .47);--codex-button-background-color: rgba(111, 203, 148, .47)}.button.button--outline:disabled{--codex-button-background-color: rgba(70, 70, 70, .75)}.button.button--outline{--codex-button-color: rgb(150, 150, 150);--codex-button-border-color: rgba(150, 150, 150, .2);--codex-button-background-color: rgb(47, 47, 47)}.button span{display:flex;align-items:center;gap:.75rem}.button div{width:20px;height:20px;display:flex;place-items:center}