Skip to content
Snippets Groups Projects
Commit 578aa1d1 authored by Alex Pott's avatar Alex Pott
Browse files

Issue #1978036 by echoz: Clean up css in vertical tabs.

parent 3c479060
No related branches found
No related tags found
2 merge requests!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!789Issue #3210310: Adjust Database API to remove deprecated Drupal 9 code in Drupal 10
div.vertical-tabs { .vertical-tabs {
margin-left: 0; margin-left: 0;
margin-right: 15em; margin-right: 15em;
} }
.vertical-tabs ul.vertical-tabs-list { .vertical-tabs .vertical-tabs-list {
margin-left: 0; margin-left: 0;
margin-right: -15em; margin-right: -15em;
float: right; float: right;
} }
.vertical-tabs ul.vertical-tabs-list li.selected { .vertical-tabs .vertical-tabs-list .selected {
border-left-width: 0; border-left-width: 0;
border-right-width: 1px; border-right-width: 1px;
} }
div.vertical-tabs { .vertical-tabs {
margin: 1em 0 1em 15em; /* LTR */ margin: 1em 0 1em 15em; /* LTR */
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.vertical-tabs ul.vertical-tabs-list { .vertical-tabs .vertical-tabs-list {
width: 15em; width: 15em;
list-style: none; list-style: none;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
...@@ -20,49 +20,37 @@ div.vertical-tabs { ...@@ -20,49 +20,37 @@ div.vertical-tabs {
} }
/* Layout of each tab */ /* Layout of each tab */
.vertical-tabs ul.vertical-tabs-list li { .vertical-tabs .vertical-tabs-list li {
background: #eee; background: #eee;
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: 0; border-top: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.vertical-tabs ul.vertical-tabs-list li a { .vertical-tabs .vertical-tabs-list a {
display: block; display: block;
text-decoration: none; text-decoration: none;
padding: 0.5em 0.6em; padding: 0.5em 0.6em;
} }
.vertical-tabs ul.vertical-tabs-list li a:focus strong, .vertical-tabs .vertical-tabs-list a:focus strong,
.vertical-tabs ul.vertical-tabs-list li a:active strong, .vertical-tabs .vertical-tabs-list a:active strong,
.vertical-tabs ul.vertical-tabs-list li a:hover strong { .vertical-tabs .vertical-tabs-list a:hover strong {
text-decoration: underline; text-decoration: underline;
} }
.vertical-tabs ul.vertical-tabs-list li a:hover { .vertical-tabs .vertical-tabs-list a:hover {
outline: 1px dotted; outline: 1px dotted;
} }
.vertical-tabs ul.vertical-tabs-list li.selected { .vertical-tabs .vertical-tabs-list .selected {
background-color: #fff; background-color: #fff;
border-right-width: 0; /* LTR */ border-right-width: 0; /* LTR */
} }
.vertical-tabs ul.vertical-tabs-list .selected strong { .vertical-tabs .vertical-tabs-list .selected strong {
color: #000; color: #000;
} }
.vertical-tabs ul.vertical-tabs-list .summary { .vertical-tabs .vertical-tabs-list .summary {
display: block; display: block;
} }
.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary { .vertical-tabs .vertical-tabs .vertical-tabs-list .summary {
line-height: normal; line-height: normal;
margin-bottom: 0; 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 {
max-width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
...@@ -2,19 +2,19 @@ ...@@ -2,19 +2,19 @@
/** /**
* Override of misc/vertical-tabs-rtl.css. * Override of misc/vertical-tabs-rtl.css.
*/ */
div.vertical-tabs { .vertical-tabs {
background: #fff url(images/fc-rtl.png) repeat-y right 0; background: #fff url(images/fc-rtl.png) repeat-y right 0;
} }
div.vertical-tabs .vertical-tabs-list { .vertical-tabs .vertical-tabs-list {
float: right; float: right;
margin: 0 0 -1px -100%; margin: 0 0 -1px -100%;
} }
div.vertical-tabs ul li.selected a, .vertical-tabs .selected a,
div.vertical-tabs ul li.selected a:hover, .vertical-tabs .selected a:hover,
div.vertical-tabs ul li.selected a:focus, .vertical-tabs .selected a:focus,
div.vertical-tabs ul li.selected a:active { .vertical-tabs .selected a:active {
border-left-color: #fff; border-left-color: #fff;
} }
div.vertical-tabs .vertical-tabs-panes { .vertical-tabs .vertical-tabs-panes {
margin: 0 245px 0 0; margin: 0 245px 0 0;
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/** /**
* Override of misc/vertical-tabs.css. * Override of misc/vertical-tabs.css.
*/ */
div.vertical-tabs { .vertical-tabs {
background: #fff url(images/fc.png) repeat-y 0 0; /* LTR */ background: #fff url(images/fc.png) repeat-y 0 0; /* LTR */
border: 1px solid #ccc; border: 1px solid #ccc;
margin: 10px 0; margin: 10px 0;
...@@ -13,7 +13,7 @@ div.vertical-tabs { ...@@ -13,7 +13,7 @@ div.vertical-tabs {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
div.vertical-tabs .vertical-tabs-list { .vertical-tabs .vertical-tabs-list {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
float: left; /* LTR */ float: left; /* LTR */
font-size: 1em; font-size: 1em;
...@@ -22,64 +22,52 @@ div.vertical-tabs .vertical-tabs-list { ...@@ -22,64 +22,52 @@ div.vertical-tabs .vertical-tabs-list {
padding: 0; padding: 0;
width: 240px; width: 240px;
} }
div.vertical-tabs ul li.vertical-tab-button { .vertical-tabs .vertical-tab-button {
list-style: none; list-style: none;
list-style-image: none; list-style-image: none;
margin: 0; margin: 0;
} }
div.vertical-tabs ul li.vertical-tab-button a { .vertical-tabs .vertical-tab-button a {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
display: block; display: block;
padding: 10px; padding: 10px;
} }
div.vertical-tabs ul li.first a { .vertical-tabs .first a {
border-top: 0; border-top: 0;
} }
div.vertical-tabs ul li.vertical-tab-button strong { .vertical-tabs .vertical-tab-button strong {
font-size: 0.923em; font-size: 0.923em;
} }
div.vertical-tabs ul li.vertical-tab-button .summary { .vertical-tabs .vertical-tab-button .summary {
color: #666; color: #666;
display: block; display: block;
font-size: 0.846em; font-size: 0.846em;
padding-top: 0.4em; padding-top: 0.4em;
} }
div.vertical-tabs ul li.vertical-tab-button a:hover, .vertical-tabs .vertical-tab-button a:hover,
div.vertical-tabs ul li.vertical-tab-button a:focus { .vertical-tabs .vertical-tab-button a:focus {
background: #d5d5d5; background: #d5d5d5;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
} }
div.vertical-tabs ul li.selected a, .vertical-tabs .selected a,
div.vertical-tabs ul li.selected a:hover, .vertical-tabs .selected a:hover,
div.vertical-tabs ul li.selected a:focus, .vertical-tabs .selected a:focus,
div.vertical-tabs ul li.selected a:active { .vertical-tabs .selected a:active {
background: #fff; background: #fff;
border-right-color: #fff; /* LTR */ border-right-color: #fff; /* LTR */
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
div.vertical-tabs ul li.first.selected a, .vertical-tabs .first.selected a,
div.vertical-tabs ul li.first.selected a:hover { .vertical-tabs .first.selected a:hover {
border-top: 0; border-top: 0;
} }
div.vertical-tabs ul li.selected a:focus strong { .vertical-tabs .selected a:focus strong {
text-decoration: underline; text-decoration: underline;
} }
div.vertical-tabs .vertical-tabs-panes { .vertical-tabs .vertical-tabs-panes {
margin: 0 0 0 245px; /* LTR */ margin: 0 0 0 245px; /* LTR */
} }
.vertical-tabs-pane > summary { .vertical-tabs-pane > summary {
display: none; display: none;
} }
/**
* 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 {
max-width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment