NTP5: Fine tuning of Apps implementation.

chrome/browser/resources/ntp_search/tile_page.css

Index: chrome/browser/resources/ntp_search/tile_page.css
diff --git a/chrome/browser/resources/ntp_search/tile_page.css b/chrome/browser/resources/ntp_search/tile_page.css
index 0492528ce383662d14b1bb74c7bec4b938c9c043..2a76fc8ad080227ba04db64351e22ab0437b2891 100644
--- a/chrome/browser/resources/ntp_search/tile_page.css
+++ b/chrome/browser/resources/ntp_search/tile_page.css
@@ -11,12 +11,17 @@
   position: relative;
 }
 
-.tile-page-content {
+.tile-page-frame {
   margin: 0 auto;
   overflow: hidden;
+  position: relative;
   width: 748px;
 }
 
+.tile-page-content {
+  overflow: hidden;
+}
+
 .tile-grid {
   display: block;
   margin: 0 auto;
@@ -84,18 +89,6 @@
 }
 
 /* -----------------------------------------------------------------------------
-   Tile Row Animation
------------------------------------------------------------------------------ */
-
-.hide-row {
-  opacity: 0;
-}
-
-.tile-grid .hide-row .tile-cell {
-  opacity: 1;
-}
-
-/* -----------------------------------------------------------------------------
    Tile Position Animation
 ----------------------------------------------------------------------------- */
 
@@ -120,3 +113,150 @@
 .animate-tile-repositioning .animate-hide-tile.target-tile {
   -webkit-transform: scale(0.5);
 }
+
+/* -----------------------------------------------------------------------------
+  Scroll Bars
+----------------------------------------------------------------------------- */
+
+.tile-page-content {
+  /* TODO(pedrosimonetti): Remove this when fixing the Apps page height. */
+  height: 92px;
+}
+
+.scrollable {
+  overflow-y: auto;
+}
+
+.scrollable .shadow-top {
+  -webkit-margin-end: 0;
+  -webkit-mask-box-image: -webkit-linear-gradient(left,
+                                                  rgba(0, 0, 0, 0.1),
+                                                  rgba(0, 0, 0, 0.8),
+                                                  rgba(0, 0, 0, 0.1));
+  background: -webkit-linear-gradient(top,
+                                      rgba(0, 0, 0, 0.2),
+                                      rgba(0, 0, 0, 0));
+  height: 6px;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
+.scrollable .shadow-top::after {
+  border-top: 1px solid rgba(0, 0, 0, 0.3);
+  content: '';
+  display: block;
+  height: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.scrollable .shadow-bottom {
+  -webkit-margin-end: 0;
+  -webkit-mask-box-image: -webkit-linear-gradient(left,
+                                                  rgba(0, 0, 0, 0.1),
+                                                  rgba(0, 0, 0, 0.8),
+                                                  rgba(0, 0, 0, 0.1));
+  background: -webkit-linear-gradient(bottom,
+                                      rgba(0, 0, 0, 0.2),
+                                      rgba(0, 0, 0, 0));
+  bottom: 0;
+  height: 4px;
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+
+.scrollable .shadow-bottom::after {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  content: '';
+  display: block;
+  height: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment {
+  display: block;
+}
+
+::-webkit-scrollbar-button:vertical:start:increment,
+::-webkit-scrollbar-button:vertical:end:decrement {
+  display: none;
+}
+
+::-webkit-scrollbar-track:vertical {
+  -webkit-border-end: 0 solid transparent;

[Dan Beam, 2012/11/30 23:41:45]

nit: same nits re: s/0 solid transparent/none/ (I think it's a bit easier to
read what's intended by "none")

[pedro (no code reviews), 2012/12/01 00:02:29]

Done.

+  -webkit-border-start: 5px solid transparent;
+  background-clip: padding-box;
+  background-color: white;
+}
+
+::-webkit-scrollbar-track:horizontal {
+  background-clip: padding-box;
+  background-color: white;
+  border-bottom: 0 solid transparent;

[Dan Beam, 2012/11/30 23:41:45]

and here

[pedro (no code reviews), 2012/12/01 00:02:29]

Done.

+  border-top: 5px solid transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),
+                      inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  background-clip: padding-box;
+  background-color: rgba(0, 0, 0, 0.2);
+  min-height: 28px;
+  padding-top: 100px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+::-webkit-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  -webkit-border-end: none;
+  -webkit-border-start: 5px solid transparent;
+  border-bottom: none;
+  border-top: none;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  border: 0 solid transparent;

[Dan Beam, 2012/11/30 23:41:45]

and here

[pedro (no code reviews), 2012/12/01 00:02:29]

Done.

+  border-top-width: 5px;
+}
+
+::-webkit-scrollbar-track:hover {
+  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+::-webkit-scrollbar-track:active {
+  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
+                      inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+  background-color: rgba(0, 0, 0, 0.05);
+}