mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-20 05:39:41 +02:00
84 lines
1.8 KiB
Text
84 lines
1.8 KiB
Text
|
.docs-button {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: var(--height);
|
||
|
|
padding-left: 12px;
|
||
|
|
padding-right: 12px;
|
||
|
|
color: white;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
transition-property: background-color;
|
||
|
|
transition-duration: 0.1s;
|
||
|
|
border-radius: 8px;
|
||
|
|
|
||
|
|
@supports(-webkit-mask-box-image: url('')){
|
||
|
|
border-radius: 0;
|
||
|
|
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__icon {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-right: 4px;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--default {
|
||
|
|
--height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--small {
|
||
|
|
--height: 32px;
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--primary {
|
||
|
|
background: var(--color-button-primary);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--color-button-primary-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background: var(--color-button-primary-active);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--secondary {
|
||
|
|
background: var(--color-button-secondary);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--color-button-secondary-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background: var(--color-button-secondary-active);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--warning {
|
||
|
|
background: var(--color-button-warning);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--color-button-warning-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background: var(--color-button-warning-active);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--with-icon {
|
||
|
|
padding-left: 8px;
|
||
|
|
}
|
||
|
|
}
|