Skip to content

Commit

Permalink
move squircle to only to active and hover states
Browse files Browse the repository at this point in the history
  • Loading branch information
neSpecc committed Apr 24, 2024
1 parent f78b9ec commit 49d2ea9
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 2 deletions.
7 changes: 5 additions & 2 deletions src/frontend/styles/components/sidebar.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -182,13 +182,16 @@
transition-property: background-color;
transition-duration: 0.1s;

@apply --squircle;

&--selected {
border-radius: 8px;
/* border using box-shadow which doesn't increase the height */
box-shadow: 0 0 0 2px rgba(147, 166, 233, 0.5) inset;
}

&--active,
&--hover {
@apply --squircle;
}
}

&__section-title > span,
Expand Down
1 change: 1 addition & 0 deletions src/frontend/styles/vars.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@
--squircle {
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%;;
Expand Down

0 comments on commit 49d2ea9

Please sign in to comment.