#323112 by dmitrig01, kkaefer, quicksketch, frando and many many more: Now presenting... Vertical Tabs. Fantastic new UI improvement for node forms and hopefully more in the future.

3 files changed, 56 insertions, 1 deletions

diff --git a/themes/garland/fix-ie.css b/themes/garland/fix-ie.css
index 4e38597ca..03fbedb15 100644
--- a/themes/garland/fix-ie.css
+++ b/themes/garland/fix-ie.css
@@ -25,6 +25,10 @@ fieldset {
   background: none;
 }
 
+div.vertical-tabs ul.vertical-tabs-list li.first {
+  background-image: none;
+}
+
 ul.primary {
   /* Fix missing top margin */
   position: relative; /* LTR */
diff --git a/themes/garland/style-rtl.css b/themes/garland/style-rtl.css
index 2e29b6f49..fa844007d 100644
--- a/themes/garland/style-rtl.css
+++ b/themes/garland/style-rtl.css
@@ -199,6 +199,14 @@ html.js fieldset.collapsed legend a {
 }
 
 /**
+ * Vertical tabs.
+ */
+div.vertical-tabs {
+  margin-left: 5%;
+  margin-right: 15em;
+}
+
+/**
  * Syndication Block
  */
 #block-node-syndicate h2 {
diff --git a/themes/garland/style.css b/themes/garland/style.css
index 6a53434f3..55291db25 100644
--- a/themes/garland/style.css
+++ b/themes/garland/style.css
@@ -232,7 +232,7 @@ span.form-required {
   color: #ffae00;
 }
 
-span.submitted, .description {
+span.submitted, .description, .vertical-tab-button .summary {
   font-size: 0.92em;
   color: #898989;
 }
@@ -829,6 +829,12 @@ fieldset {
   background-position: 0 0;
 }
 
+/* Keep the background position at 0 for filters and vertical tabs. */
+*:first-child+html fieldset.filter-wrapper,
+*:first-child+html fieldset.vertical-tabs-pane {
+  background-position: 0 0;
+}
+
 *:first-child+html fieldset > .description, *:first-child+html fieldset .fieldset-wrapper .description {
   padding-top: 1em;
 }
@@ -853,11 +859,48 @@ html.js fieldset.collapsible legend a {
   background: url(images/menu-expanded.gif) no-repeat 0% 50%; /* LTR */
 }
 
+html.js fieldset.collapsible legend span.summary {
+  color: #898989;
+}
+
 html.js fieldset.collapsed legend a {
   background: url(images/menu-collapsed.gif) no-repeat 0% 50%; /* LTR */
 }
 
 /**
+ * Vertical tabs.
+ */
+div.vertical-tabs {
+  margin-right: 5%;
+  border-color: #d9eaf5;
+}
+
+div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane {
+  padding: 0.5em 1em;
+}
+
+div.vertical-tabs ul.vertical-tabs-list {
+  border-color: #d9eaf5;
+}
+
+div.vertical-tabs ul.vertical-tabs-list li {
+  background-color: #edf5fa;
+  border-color: #d9eaf5;
+}
+
+div.vertical-tabs ul.vertical-tabs-list li.selected {
+  background: #fff repeat-x 0 0;
+}
+
+div.vertical-tabs ul.vertical-tabs-list li.selected.first {
+  background-image: url(images/gradient-inner.png);
+}
+
+div.vertical-tabs ul.vertical-tabs-list li.selected a .title {
+  color: #494949;
+}
+
+/**
  * Syndication icons and block
  */
 #block-node-syndicate h2 {