hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Get rid of overcomplicated transition properties

Browse Source 
Not a single time this been useful, quite the opposite; it was very
annoying
This commit is contained in:
daudix
2024-06-15 02:18:13 +03:00
parent 5aa00a628b
commit 018fcf813c
12 changed files with 22 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
sass/_containers.scss
View File

@ -13,8 +13,7 @@
top: 0.5rem;
right: 0.5rem;
backdrop-filter: var(--blur);
transition-duration: var(--transition);
transition-property: background-color, transform;
transition: var(--transition);
cursor: pointer;
box-shadow: var(--edge-highlight);
border: none;
@ -49,7 +48,7 @@
$icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
mask-image: $icon;
transition: background-color var(--transition);
transition: var(--transition);
background-color: var(--fg-muted-4);
width: 1rem;
height: 1rem;