1.0.0

- :after pseudo element is not longer used to style the scrollbars. This makes the process of customization much more easy. - added license. - updated readme with notes, options description and scrollbar customization example.
noeldelgado · Mar 27, 2015 · 3e401b2 · 3e401b2
1 parent 2acbd48
commit 3e401b2
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 103 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "gemini-scrollbar",
   "main": "index.js",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "homepage": "https://github.com/noeldelgado/gemini-scrollbar",
   "authors": [
     "Noel Delgado <auhcsei@gmail.com>"

diff --git a/examples/00-sidebar.html b/examples/00-sidebar.html
@@ -128,18 +128,15 @@
 
     /* gemini-scrollbar override styles */
     .gm-scrollbar.-vertical {
-      width: 10px;
+      width: 8px;
     }
-    .gm-scrollbar .thumb:after {
+    .gm-scrollbar .thumb {
       background-color: rgba(111, 87, 140, .4);
+      border-radius: 4px;
     }
-    .gm-scrollbar .thumb:hover:after {
+    .gm-scrollbar .thumb:hover {
       background-color: rgba(111, 87, 140, .6);
     }
-    .gm-scrollbar.-vertical .thumb:after {
-      width: 6px;
-      border-radius: 3px;
-    }
   </style>
 </head>
 <body>
@@ -209,4 +206,4 @@ <h1>Hi</h1>
     };
   </script>
 </body>
-</html>
+</html>
diff --git a/examples/01-body.html b/examples/01-body.html
@@ -29,8 +29,7 @@
       padding: 0;
     }
 
-    html,
-    body {
+    html {
       height: 100vh;
     }
 
@@ -106,19 +105,22 @@
     }
 
     /* gemini-scrollbar override styles */
+    .gm-scrollbar {
+      right: 0;
+    }
     .gm-scrollbar.-vertical {
-      width: 16px;
+      width: 14px;
+      top: 0;
+      bottom: 0;
       background-color: rgba(0,0,0,.05);
     }
     .gm-scrollbar .thumb {
+      border-radius: 0;
       background-color: rgba(68, 209, 234, .8);
     }
     .gm-scrollbar .thumb:hover {
       background-color: rgba(68, 209, 234, 1);
     }
-    .gm-scrollbar .thumb::after {
-      display: none;
-    }
   </style>
 </head>
 <body>
@@ -215,4 +217,4 @@ <h4>hello</h4>
     }
   </script>
 </body>
-</html>
+</html>
diff --git a/examples/03-grid.html b/examples/03-grid.html
@@ -124,25 +124,25 @@
     }
 
     /* gemini-scrollbar override styles */
-    .gm-scrollbar.-vertical {
-      width: 10px;
+    .gm-scrollbar .thumb {
+      border-radius: 4px;
     }
-    .gm-scrollbar.-vertical .thumb:after {
-      width: 6px;
-      border-radius: 3px;
+
+    .gm-scrollbar.-vertical {
+      width: 8px;
     }
 
-    .hero .gm-scrollbar .thumb:after {
+    .hero .gm-scrollbar .thumb {
       background-color: rgba(58, 255, 244, .5);
     }
-    .hero .gm-scrollbar .thumb:hover:after {
+    .hero .gm-scrollbar .thumb:hover {
       background-color: rgba(58, 255, 244, .7);
     }
 
-    .grid .gm-scrollbar .thumb:after {
+    .grid .gm-scrollbar .thumb {
       background-color: rgba(111, 87, 140, .4);
     }
-    .grid .gm-scrollbar .thumb:hover:after {
+    .grid .gm-scrollbar .thumb:hover {
       background-color: rgba(111, 87, 140, .6);
     }
   </style>
@@ -392,4 +392,4 @@
     }
   </script>
 </body>
-</html>
+</html>
diff --git a/examples/04-random-tests.html b/examples/04-random-tests.html
@@ -78,9 +78,6 @@
     #example-3 .gm-scrollbar.-vertical .thumb:hover {
       background-color: hsl(204, 100%, 60%);
     }
-    #example-3 .gm-scrollbar.-vertical .thumb:after {
-      display: none;
-    }
 
     /** ---------- 4 ---------- **/
     #example-4 {

diff --git a/gemini-scrollbar.css b/gemini-scrollbar.css
@@ -20,79 +20,60 @@ body.gm-scrollbar-disable-selection {
   height: 100%;
 }
 
-.gm-scrollbar-container.gm-autoshow .gm-scrollbar {
-  opacity: 0;
-  transition: opacity 120ms ease-out;
-}
-
-.gm-scrollbar-container.gm-autoshow:hover .gm-scrollbar,
-.gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar {
-  opacity: 1;
-  transition: opacity 340ms ease-out;
-}
-
 .gm-scrollbar {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0,0,0,0);
-  z-index: 2;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
 }
 
 .gm-scrollbar.-vertical {
-  width: 8px;
-  top: 0;
+  width: 6px;
+  top: 2px;
 }
 
 .gm-scrollbar.-horizontal {
-  height: 8px;
-  left: 0;
+  height: 6px;
+  left: 2px;
 }
 
 .gm-scrollbar .thumb {
   position: relative;
   width: 0;
   height: 0;
   cursor: pointer;
-  z-index: 1;
-}
-
-.gm-scrollbar .thumb:after {
-  content: '';
-  position: absolute;
-  border-radius: 2px;
+  border-radius: 3px;
   background-color: rgba(0,0,0,.2);
 }
 
-.gm-scrollbar .thumb:hover:after {
+.gm-scrollbar .thumb:hover {
   background-color: rgba(0,0,0,.3);
 }
 
 .gm-scrollbar.-vertical .thumb {
   width: 100%;
 }
 
-.gm-scrollbar.-vertical .thumb:after {
-  width: 4px;
-  left: 2px;
-  top: 4px;
-  bottom: 4px;
-}
-
 .gm-scrollbar.-horizontal .thumb {
   height: 100%;
 }
 
-.gm-scrollbar.-horizontal .thumb:after {
-  height: 4px;
-  top: 2px;
-  left: 4px;
-  right: 4px;
-}
-
 .gm-scrollbar-container .gm-scroll-view {
   width: 100%;
   height: 100%;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
 }
+
+/* autoshow option */
+.gm-scrollbar-container.gm-autoshow .gm-scrollbar {
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+}
+
+.gm-scrollbar-container.gm-autoshow:hover .gm-scrollbar,
+.gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar {
+  opacity: 1;
+  transition: opacity 340ms ease-out;
+}
+
diff --git a/index.js b/index.js
@@ -1,14 +1,13 @@
 /**
  * gemini-scrollbar
- * @version v0.0.3
+ * @version 1.0.0
  * @link http://noeldelgado.github.io/gemini-scrollbar/
  * @license MIT
  */
 (function() {
     var SCROLLBAR_WIDTH, CLASSNAMES;
 
     SCROLLBAR_WIDTH = (function() {
-        /* http://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript#answer-13382873 */
         var tmpElement = document.createElement("div");
         tmpElement.style.visibility = "hidden";
         tmpElement.style.width = "100px";

diff --git a/license b/license
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Noel Delgado <pixelia.me@gmail.com> (pixelia.me)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gemini-scrollbar",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "Custom scrollbars with native scrolling",
   "license": "MIT",
   "repository": "noeldelgado/gemini-scrollbar.git",