Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Animate a disclosure chevron from its open state, not on hover
Don't rotate/flip a dropdown chevron on hover for a control that opens a modal or reveals nothing inline — a flipped chevron with no revealed content reads as a dropdown that failed to open. Drive the rotation from the actual open/expanded state.
Bad example
| 1 | .menu:hover .menu__chevron { |
| 2 | transform: rotate(180deg); /* flips on hover, but this control opens a modal — nothing pops */ |
| 3 | } |
Explanation (EN)
The chevron flips as soon as you hover, implying an inline panel is about to open. When the control instead opens a modal (or opens nothing on hover), the flipped-but-empty chevron looks broken.
Objašnjenje (HR)
Chevron se okrene čim pređeš mišem, kao da će se otvoriti inline panel. Kad kontrola zapravo otvara modal (ili se na hover ništa ne otvori), okrenut a prazan chevron izgleda slomljeno.
Good example
| 1 | /* rotate only when a panel truly expands (open-state class or scoped to real inline dropdowns) */ |
| 2 | .menu.is-open .menu__chevron { |
| 3 | transform: rotate(180deg); |
| 4 | } |
Explanation (EN)
Tie the chevron rotation to the actual open/expanded state (a class toggled with the panel), or scope hover rotation to controls that really reveal an inline dropdown.
Objašnjenje (HR)
Veži rotaciju chevrona na stvarno open/expanded stanje (klasa koja se mijenja s panelom), ili ograniči hover rotaciju na kontrole koje stvarno otvaraju inline dropdown.