matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove rotation animations from circular buttons on hover
Build And Push Image / docker (push) Successful in 1m54s Details 

- Removed rotate(5deg) from icon buttons hover state
- Removed rotate(5deg) from FAB buttons hover state
- Removed icon-hover-rotate mixin from nav items
- Keep scale animations but remove tilt/rotation effects

Buttons now scale without rotating for cleaner interaction
This commit is contained in:
Matt 2025-08-31 16:48:53 +02:00
parent 363d3367fc
commit a85be39ffa
2 changed files with 2 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/scss/main.scss
View File

@ -719,7 +719,7 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:hover:not(:disabled) { &:hover:not(:disabled) {
@include glass-colored($monaco-red-600, 0.1, 10px); @include glass-colored($monaco-red-600, 0.1, 10px);
transform: rotate(5deg) scale(1.1); transform: scale(1.1);
} }
} }
@ -730,7 +730,7 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: $shadow-monaco; box-shadow: $shadow-monaco;
&:hover:not(:disabled) { &:hover:not(:disabled) {
transform: translateY(-3px) rotate(5deg); transform: translateY(-3px);
box-shadow: $shadow-monaco-intense; box-shadow: $shadow-monaco-intense;
} }
} }

1
layouts/member.vue
View File

@ -355,7 +355,6 @@ watch(width, (newWidth) => {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@include ripple-effect(); @include ripple-effect();
@include icon-hover-rotate(10deg);
&:hover { &:hover {
background: linear-gradient(135deg, background: linear-gradient(135deg,