# of issues
8
COM 204
There was a stream where I had been fetching water. A flow station was built nearby and now...
# of issues
11
ENG 203
My greatest, my only true possession was my father’s guitar. It was made of fine polished...
# of issues
5
PSY 231
Ambiguous loss is a term coined by Pauline Boss, a University of Minnesota professor, to...
Are you sure?
You cannot undo this.
Grammarly Micro Interaction Guide
1st lvl Micro Interaction
Triggers
Pointer
- On-Hover
- Off-Hover
Rules
On-Hover
Main Box:
- First apply fog effect over box content and increase shadow intensity
- Then move download and trash icons inwards from the sides
Download & Trash Icons:
- Download Icon fill to Green
- Trash Icon to Red
Off-Hover
- Rewind the effects of on-hover
Feedback
Visual
On-Hover:
Main Boxes
- Ease in shadow increase and fog effect
Download & Trash Icons
- Slide towards center from outside Main Box boundaries
- Ease in green or red fill
Off-Hover:
- All effects play in reverse
Loops & Modes
Loops
- None
Modes
- None
2nd lvl Micro Interaction
Triggers
Pointer
- On-Hover
- Off-Hover
Rules
On-Hover
Download & Trash Icons:
- Change Download Icon fill to Grammarly Green, Trash Icon to red
Rest of box
- Turn "Open" text green
- Trash Icon to Red
Red tab
- Display text bubble containing description text.
Off-Hover
All
- Rewind the effects of on-hover
Feedback
Visual
On-Hover:
- Download & Trash Icons, ease in green or red fill
- "Open" text, ease in green color.
- Red tab, fade in text bubble
Off-Hover:
- All effects play in reverse
Loops & Modes
Loops
- None
Modes
- Presence of Red Tab is based on external factor; if document contains issues.
3rd lvl Micro Interaction
Triggers
Pointer
- On-Click
Rules
On-Click
Download Icons:
- Launch default download procedures
Trash Icon
- Display trash confirmation modal
Feedback
Visual
On-Click:
- Trash Icon, fade in trash confirmation modal
Loops & Modes
Loops
- None
Modes
- None
4th lvl Micro Interaction
Triggers
Pointer
- On-Click
- On-Hover
- Off-Hover
Rules
On-Click
Cancel Button
- Close modal
Trash Button
- Delete respective box
On-Hover
Cancel & Trash Buttons:
- Change button fill to white
- Change button text color to red ot blue
Off-Hover
All
- Rewind the effects of on-hover
Feedback
Visual
On-Click:
- Cancel Button, modal fades out
- Trash Button, modal fades out, respective box disappears
Loops & Modes
Loops
- None
Modes
- None