From 07510f71e12a6a057989ffb86cfacc57134a406e Mon Sep 17 00:00:00 2001 From: Angie Byron Date: Thu, 7 Oct 2010 15:54:13 +0000 Subject: #925350 by reglogge, Jacine, Jeff Burnz: Fixed Vertical tabs markup to restore RTL support and fix other bugs. --- misc/vertical-tabs-rtl.css | 8 +++--- misc/vertical-tabs.css | 62 ++++++++++++++++++++++++++-------------------- 2 files changed, 39 insertions(+), 31 deletions(-) (limited to 'misc') diff --git a/misc/vertical-tabs-rtl.css b/misc/vertical-tabs-rtl.css index b9fd4b3f9..4598c90fd 100644 --- a/misc/vertical-tabs-rtl.css +++ b/misc/vertical-tabs-rtl.css @@ -1,15 +1,15 @@ /* $Id$ */ -.vertical-tabs { +div.vertical-tabs { margin-left: 0; margin-right: 15em; } -.vertical-tabs-list { +.vertical-tabs ul.vertical-tabs-list { + margin-left: 0; margin-right: -15em; - right: 0; float: right; } -.vertical-tabs-list li.selected { +.vertical-tabs ul.vertical-tabs-list li.selected { border-left-width: 0; border-right-width: 1px; } diff --git a/misc/vertical-tabs.css b/misc/vertical-tabs.css index be18d0874..ba5db772d 100644 --- a/misc/vertical-tabs.css +++ b/misc/vertical-tabs.css @@ -1,70 +1,78 @@ /* $Id$ */ div.vertical-tabs { - margin: 1em 0 1em 15em; + margin: 1em 0 1em 15em; /* LTR */ border: 1px solid #ccc; + position: relative; /* IE6/7 */ } -div.vertical-tabs ul.vertical-tabs-list { +.vertical-tabs ul.vertical-tabs-list { width: 15em; list-style: none; list-style-image: none; /* IE6 */ border-top: 1px solid #ccc; padding: 0; position: relative; /* IE6 */ - margin: -1px -100% -1px 0; - left: -15em; - float: left; + margin: -1px 0 -1px -15em; /* LTR */ + float: left; /* LTR */ } -div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane { +.vertical-tabs fieldset.vertical-tabs-pane { margin: 0 !important; padding: 0 1em; border: 0; } -div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane legend { +.vertical-tabs legend { display: none; } /* Layout of each tab */ -div.vertical-tabs ul.vertical-tabs-list li { +.vertical-tabs ul.vertical-tabs-list li { background: #eee; border: 1px solid #ccc; border-top: 0; padding: 0; margin: 0; - height: 1%; + min-width: 0; /* IE7 */ } -div.vertical-tabs ul.vertical-tabs-list li a { +.vertical-tabs ul.vertical-tabs-list li a { display: block; text-decoration: none; padding: 0.5em 0.6em; - line-height: 1.3em; - height: 1%; } -div.vertical-tabs ul.vertical-tabs-list li a:focus strong, -div.vertical-tabs ul.vertical-tabs-list li a:active strong, -div.vertical-tabs ul.vertical-tabs-list li a:hover strong { +.vertical-tabs ul.vertical-tabs-list li a:focus strong, +.vertical-tabs ul.vertical-tabs-list li a:active strong, +.vertical-tabs ul.vertical-tabs-list li a:hover strong { text-decoration: underline; } -div.vertical-tabs ul.vertical-tabs-list li a:focus, -div.vertical-tabs ul.vertical-tabs-list li a:active { - position: relative; - z-index: 5; -} -div.vertical-tabs ul.vertical-tabs-list li a:hover { +.vertical-tabs ul.vertical-tabs-list li a:hover { outline: 1px dotted; } -div.vertical-tabs ul.vertical-tabs-list li.selected { +.vertical-tabs ul.vertical-tabs-list li.selected { background-color: #fff; - border-right-width: 0; - position: relative; + border-right-width: 0; /* LTR */ } -div.vertical-tabs ul.vertical-tabs-list span.selected strong { +.vertical-tabs ul.vertical-tabs-list .selected strong { color: #000; } -div.vertical-tabs ul.vertical-tabs-list .summary { +.vertical-tabs ul.vertical-tabs-list .summary { display: block; } -div.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary { +.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary { line-height: normal; margin-bottom: 0; } + +/** + * 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 */ +} -- cgit v1.2.3