Add an accordian effect to NTP.

BUG=53248

Review URL: http://codereview.chromium.org/3250002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@57966 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 39 insertions, 11 deletions

diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 40225de..790516a 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -3,7 +3,6 @@ html {
   background-color: $2; /* COLOR_NTP_BACKGROUND */
   background-position: $3;
   background-repeat: $5;
-  overflow: hidden;
 }
 
 html[bookmarkbarattached='true'] {
@@ -66,11 +65,6 @@ body {
   background-color: $$1; /* COLOR_NTP_SECTION */
 }
 
-#option-button {
-  background-color: $7; /* color_header_gradient_light */
-  -webkit-mask-image: url(chrome://theme/IDR_NEWTAB_MENU_MASK);
-}
-
 .miniview {
   color: $8; /* COLOR_NTP_TEXT */
 }
@@ -106,24 +100,58 @@ body {
 }
 
 .section > h2 {
+  background-color: $2; /* COLOR_NTP_BACKGROUND */
+  color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT */
+}
+
+.section:not(.hidden) > h2 {
+  background-color: transparent;
+  background-image:
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from($2), to($2)),
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from($2), to($$$1));
   color: $$9;
-  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_A);
 }
 
-.section.hidden > h2 {
-  color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT */
-  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND);
+.section:not(.hidden) + .section > h2 {
+  background-color: transparent;
+  background-image:
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from($$$1), to($2)),
+      -webkit-gradient(linear, 0% 0%, 0% 100%, from($2), to($2));
 }
 
 .section.hidden:not([noexpand]) > h2:hover {
   color: $$9;
-  background-image: url(chrome://theme/IDR_NEWTAB_SECTION_HEADER_BACKGROUND_H);
 }
 
 .section > h2 > span {
   background: $2; /* COLOR_NTP_BACKGROUND */
 }
 
+.section > h2 > .back {
+  background-image:
+      -webkit-gradient(radial, 50% -1753, 1750, 50% -1753, 1770,
+                       from($$$2), to($$$1));
+  border-top: 1px solid $$$2; /* COLOR_NTP_SECTION_HEADER_RULE */
+}
+
+.section.hidden > h2 > .back {
+  background: none;
+  border-color-top: $$$3; /* COLOR_NTP_SECTION_HEADER_RULE_LIGHT */
+}
+
+.section.hidden:hover > h2 > .back {
+  border-color-top: $$$2; /* COLOR_NTP_SECTION_HEADER_RULE */
+}
+
+.section > h2 > .settings {
+  background-color: $2; /* COLOR_NTP_BACKGROUND */
+  border-color: $2; /* COLOR_NTP_BACKGROUND */
+}
+
+.section > .miniview {
+  background: $2; /* COLOR_NTP_BACKGROUND */
+}
+
 #apps-section .app a {
   color: $8; /* COLOR_NTP_TEXT */
 }