mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-22 06:39:42 +02:00
Add button component (twig) (#188)
* Add button component * Replace old buttons with the new ones * Update icons and border radius * Update add page button * Set size small to add page btn * Update button indentation * Cleanup * icons and button component updated * upd secondary colour, page button call * Update small button padding right Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
parent
f75401d0fb
commit
f714225e20
14 changed files with 177 additions and 46 deletions
83
src/frontend/styles/components/button.pcss
Normal file
83
src/frontend/styles/components/button.pcss
Normal file
|
@ -0,0 +1,83 @@
|
|||
.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;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue