mirror of
https://github.com/logos-storage/logos-storage-marketplace-ui-components.git
synced 2026-01-11 01:43:07 +00:00
109 lines
2.6 KiB
CSS
109 lines
2.6 KiB
CSS
.button {
|
|
&.button--medium {
|
|
--codex-button-padding: 9px 10px;
|
|
}
|
|
|
|
&.button--small {
|
|
--codex-button-padding: 6px 10px;
|
|
height: 40px;
|
|
}
|
|
|
|
border-radius: 8px;
|
|
outline: none;
|
|
padding: var(--codex-button-padding);
|
|
display: flex;
|
|
place-items: center;
|
|
gap: 2px;
|
|
font-weight: 500;
|
|
position: relative;
|
|
border: none;
|
|
transition:
|
|
box-shadow 0.35s,
|
|
opacity 0.35s;
|
|
font-family: Inter;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
letter-spacing: -0.006em;
|
|
border: 1px solid transparent;
|
|
place-content: center;
|
|
|
|
&[aria-busy] {
|
|
cursor: wait;
|
|
}
|
|
|
|
&[aria-busy]::after {
|
|
content: " ";
|
|
display: block;
|
|
background-image: var(
|
|
--codex-button-loader,
|
|
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;
|
|
background-color: var(
|
|
--codex-button-background-busy,
|
|
var(--codex-background-backdrop)
|
|
);
|
|
|
|
/**
|
|
* Set full size and add border.
|
|
*/
|
|
width: calc(100% + 2px);
|
|
height: calc(100% + 2px);
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 28px;
|
|
left: -1px;
|
|
right: 0;
|
|
border-radius: var(--codex-border-radius);
|
|
}
|
|
|
|
&.button--primary:not(:disabled):hover {
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0 3px var(--codex-button-color-box-shadow, #6fcb94cc);
|
|
}
|
|
|
|
&.button--outline:not(:disabled):hover {
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0 2px var(--codex-border-color);
|
|
}
|
|
|
|
&.button--primary {
|
|
background-color: #6fcb94;
|
|
color: var(--codex-color-on-primary);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.button--primary:disabled {
|
|
background-color: var(--codex-color-disabled);
|
|
}
|
|
|
|
&.button--outline:disabled {
|
|
color: var(--codex-color-disabled);
|
|
}
|
|
|
|
&.button--outline {
|
|
color: var(--codex-color-outline, var(--codex-color-contrast));
|
|
border-color: var(--codex-border-color);
|
|
background-color: #2f2f2f;
|
|
color: #969696;
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
div {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
place-items: center;
|
|
}
|
|
}
|