#936620 by reglogge, aspilicious: Fixed Vertical tabs broken in Seven theme for RTL

themes/seven/template.php

@@ -104,6 +104,9 @@ function seven_css_alter(&$css) {
   if (isset($css['misc/vertical-tabs.css'])) {
     $css['misc/vertical-tabs.css']['data'] = drupal_get_path('theme', 'seven') . '/vertical-tabs.css';
   }
+  if (isset($css['misc/vertical-tabs-rtl.css'])) {
+    $css['misc/vertical-tabs-rtl.css']['data'] = drupal_get_path('theme', 'seven') . '/vertical-tabs-rtl.css';
+  }
   // Use Seven's jQuery UI theme style instead of the default one.
   if (isset($css['misc/ui/jquery.ui.theme.css'])) {
     $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'seven') . '/jquery.ui.theme.css';

themes/seven/vertical-tabs-rtl.css

+/* $Id$ */
+
+/**
+ * Override of misc/vertical-tabs-rtl.css.
+ */
+div.vertical-tabs {
+  background: #fff url(images/fc-rtl.png) repeat-y right 0;
+}
+div.vertical-tabs .vertical-tabs-list {
+  float: right;
+  margin: 0 0 -1px -100%;
+}
+div.vertical-tabs ul li.selected a,
+div.vertical-tabs ul li.selected a:hover,
+div.vertical-tabs ul li.selected a:focus,
+div.vertical-tabs ul li.selected a:active {
+  border-left-color: #fff;
+}
+div.vertical-tabs .vertical-tabs-panes {
+  margin: 0 265px 0 0;
+  padding: 10px 0 10px 15px;
+}

themes/seven/vertical-tabs.css

@@ -4,7 +4,7 @@
  * Override of misc/vertical-tabs.css.
  */
 div.vertical-tabs {
-  background: #fff url(images/fc.png) repeat-y 0 0;
+  background: #fff url(images/fc.png) repeat-y 0 0; /* LTR */
   border: 1px solid #ccc;
   margin: 10px 0;
   position: relative;
@@ -16,10 +16,10 @@ div.vertical-tabs fieldset {
 }
 div.vertical-tabs .vertical-tabs-list {
   border-bottom: 1px solid #ccc;
-  float: left;
+  float: left; /* LTR */
   font-size: 1em;
   line-height: 1;
-  margin: 0 -100% -1px 0;
+  margin: 0 -100% -1px 0; /* LTR */
   padding: 0;
   width: 240px;
 }
@@ -56,7 +56,7 @@ div.vertical-tabs ul li.selected a:hover,
 div.vertical-tabs ul li.selected a:focus,
 div.vertical-tabs ul li.selected a:active {
   background: #fff;
-  border-right-color: #fff;
+  border-right-color: #fff; /* LTR */
   border-top: 1px solid #ccc;
 }
 div.vertical-tabs ul li.first.selected a,
@@ -67,8 +67,8 @@ div.vertical-tabs ul li.selected a:focus strong {
   text-decoration: underline;
 }
 div.vertical-tabs .vertical-tabs-panes {
-  margin: 0 0 0 265px;
-  padding: 10px 15px 10px 0;
+  margin: 0 0 0 265px; /* LTR */
+  padding: 10px 15px 10px 0; /* LTR */
 }
 div.vertical-tabs .vertical-tabs-panes legend {
   display: none;
@@ -76,3 +76,19 @@ div.vertical-tabs .vertical-tabs-panes legend {
 .vertical-tabs-pane .fieldset-wrapper > div:first-child {
   padding-top: 5px;
 }
+
+/**
+ * Prevent text inputs from overflowing when container is too narrow. "width" is
+ * applied to override hardcoded cols or size attributes and used in conjunction
+ * with "box-sizing" to prevent box model issues from occurring in most browsers.
+*/
+.vertical-tabs .form-type-textfield input {
+  width: 100%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+* html .vertical-tabs .form-type-textfield,
+* html .vertical-tabs .form-textarea-wrapper {
+  width: 95%; /* IE6 */
+}