Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 13:19:42 +02:00
Code Issues Releases Activity

move squircle to only to active and hover states

Browse source
This commit is contained in:
Peter Savchenko 2024-04-24 21:12:37 +03:00
parent f78b9ecff5
commit 49d2ea99e1
2 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/frontend/styles/components/sidebar.pcss
View file

@ -182,13 +182,16 @@
transition-property: background-color; transition-property: background-color;
transition-duration: 0.1s; transition-duration: 0.1s;
@apply --squircle;
&--selected { &--selected {
border-radius: 8px; border-radius: 8px;
/* border using box-shadow which doesn't increase the height */ /* border using box-shadow which doesn't increase the height */
box-shadow: 0 0 0 2px rgba(147, 166, 233, 0.5) inset; box-shadow: 0 0 0 2px rgba(147, 166, 233, 0.5) inset;
} }
&--active,
&--hover {
@apply --squircle;
}
} }
&__section-title > span, &__section-title > span,

1
src/frontend/styles/vars.pcss
View file

@ -138,6 +138,7 @@
--squircle { --squircle {
border-radius: 8px; border-radius: 8px;
@supports(-webkit-mask-box-image: url('')){ @supports(-webkit-mask-box-image: url('')){
border-radius: 0; 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%;; -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%;;