Merge pull request #498 from machinavn/master

Make Minimap's visible area display like Sublime Text, It's auto hide when not scrolling.

README.md

@@ -302,6 +302,60 @@ atom-text-editor {
 }
 ```
 
+#### Make Minimap Visible area display like Sublime Text 
+
+Put the following code in your user stylesheet to make your minimap look like Sublime text.
+It's more easy to view when you have code hightlight in minimap.
+
+`Default State (Hidden)`|`Hover`|`Only display Visible area when hover or click/drag event.`
+---|---|:---:
+![](https://github.com/machinavn/minimap/blob/master/resources/on-default-minimap.png?raw=true)|![](https://github.com/machinavn/minimap/blob/master/resources/on-hover-minimap.png?raw=true)|![](https://github.com/machinavn/minimap/blob/master/resources/on-scroll-minimap.png?raw=true)
+
+```css
+atom-text-editor,
+atom-text-editor::shadow,
+html {
+    atom-text-editor-minimap {
+        &::shadow {
+            .minimap-visible-area {
+                background-color: #7c7c7c;
+                // Color of Visible area.
+                opacity: 0;
+                // Default 0 when you not working with minimap
+                cursor: default;
+                // Change cursor style to pointer.
+                transition: 0.5s opacity;
+                // Better UI.
+                &:hover {
+                    opacity: 0.2;
+                } // Only display Minimap visible area when working.
+                &:active {
+                    cursor: default;
+                } // Change cursor when dragging.
+            }
+
+            }
+        }
+        &:hover::shadow {
+            .minimap-visible-area {
+                opacity: 0.2;
+                transition: opacity 1s;
+            } // When Hover to all minimap area, visible area will display. 
+        }
+
+        &:active::shadow {
+            .minimap-visible-area {
+                opacity: 0.2;
+                transition: opacity 0.5s;
+            } // Display Minimap visible area when dragging.
+        }
+    }
+}
+
+```
+
+
+
 ### ASCII Art Comments
 
 One neat trick is to use ASCII art to create huge comments visible in the minimap. This is really efficient when navigating huge files.