Commit 2dfd1fcc authored by Dries's avatar Dries

Issue #1989488 by echoz, LewisNyman: Vertical tabs style update.

parent 60c3a75e
......@@ -3,12 +3,12 @@
margin-left: 0;
margin-right: 15em;
}
.vertical-tabs .vertical-tabs-list {
.vertical-tabs-list {
float: right;
margin-left: 0;
margin-right: -15em;
float: right;
}
.vertical-tabs .vertical-tabs-list .selected {
.vertical-tab-button.selected {
border-left-width: 0;
border-right-width: 1px;
}
......@@ -3,15 +3,15 @@
margin: 1em 0 1em 15em; /* LTR */
border: 1px solid #ccc;
}
.vertical-tabs .vertical-tabs-list {
.vertical-tabs-list {
float: left; /* LTR */
width: 15em;
list-style: none;
border-top: 1px solid #ccc;
padding: 0;
margin: -1px 0 -1px -15em; /* LTR */
float: left; /* LTR */
padding: 0;
border-top: 1px solid #ccc;
list-style: none;
}
.vertical-tabs .vertical-tabs-pane {
.vertical-tabs-pane {
margin: 0;
border: 0;
}
......@@ -20,37 +20,35 @@
}
/* Layout of each tab */
.vertical-tabs .vertical-tabs-list li {
background: #eee;
.vertical-tab-button {
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-top: 0;
padding: 0;
margin: 0;
background: #eee;
}
.vertical-tabs .vertical-tabs-list a {
.vertical-tab-button a {
display: block;
text-decoration: none;
padding: 0.5em 0.6em;
text-decoration: none;
}
.vertical-tabs .vertical-tabs-list a:focus strong,
.vertical-tabs .vertical-tabs-list a:active strong,
.vertical-tabs .vertical-tabs-list a:hover strong {
.vertical-tab-button a:focus strong,
.vertical-tab-button a:active strong,
.vertical-tab-button a:hover strong {
text-decoration: underline;
}
.vertical-tabs .vertical-tabs-list a:hover {
.vertical-tab-button a:hover {
outline: 1px dotted;
}
.vertical-tabs .vertical-tabs-list .selected {
background-color: #fff;
.vertical-tab-button.selected {
border-right-width: 0; /* LTR */
background-color: #fff;
}
.vertical-tabs .vertical-tabs-list .selected strong {
.vertical-tab-button.selected strong {
color: #000;
}
.vertical-tabs .vertical-tabs-list .summary {
.vertical-tab-button .summary {
display: block;
}
.vertical-tabs .vertical-tabs .vertical-tabs-list .summary {
line-height: normal;
margin-bottom: 0;
line-height: normal;
}
/**
* Override of misc/vertical-tabs-rtl.css.
*/
.vertical-tabs {
background: #fff url(images/fc-rtl.png) repeat-y right 0;
}
.vertical-tabs .vertical-tabs-list {
.vertical-tabs-list {
float: right;
margin: 0 0 -1px -100%;
}
.vertical-tabs .selected a,
.vertical-tabs .selected a:hover,
.vertical-tabs .selected a:focus,
.vertical-tabs .selected a:active {
border-left-color: #fff;
.vertical-tab-button.selected {
border-left: 1px solid #fcfcfa;
}
.vertical-tabs .vertical-tabs-panes {
margin: 0 245px 0 0;
.vertical-tabs-panes {
margin: 0 240px 0 0;
border-right: 1px solid #a6a5a1;
}
/**
* Override of misc/vertical-tabs.css.
*/
.vertical-tabs {
background: #fff url(images/fc.png) repeat-y 0 0; /* LTR */
border: 1px solid #ccc;
margin: 10px 0;
position: relative;
overflow: hidden;
margin: 10px 0;
border: 1px solid #bdbdbd;
border-radius: 4px;
background: #e6e5e1;
}
.vertical-tabs-pane {
border: 0;
padding: 0;
margin: 0;
}
.vertical-tabs .vertical-tabs-list {
border-bottom: 1px solid #ccc;
.vertical-tabs-list {
float: left; /* LTR */
font-size: 1em;
line-height: 1;
width: 240px;
margin: 0 -100% -1px 0; /* LTR */
padding: 0;
width: 240px;
border-bottom: 1px solid #ccc;
line-height: 1;
}
.vertical-tabs .vertical-tab-button {
.vertical-tab-button {
position: relative;
margin: 0;
list-style: none;
list-style-image: none;
margin: 0;
}
.vertical-tabs .vertical-tab-button a {
border-top: 1px solid #ccc;
display: block;
padding: 10px;
.vertical-tab-button.selected {
z-index: 1;
overflow-x: hidden;
width: 100%;
border-right: 1px solid #fcfcfa; /* LTR */
box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
}
.vertical-tabs .first a {
border-top: 0;
.vertical-tab-button:focus,
.vertical-tab-button:active {
z-index: 2;
}
.vertical-tabs .vertical-tab-button strong {
font-size: 0.923em;
}
.vertical-tabs .vertical-tab-button .summary {
color: #666;
.vertical-tab-button a {
display: block;
font-size: 0.846em;
padding-top: 0.4em;
padding: 10px 15px 15px;
border-bottom: 1px solid #b3b2ad;
background-color: #f2f2f0;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
text-decoration: none;
}
.vertical-tabs .vertical-tab-button a:hover,
.vertical-tabs .vertical-tab-button a:focus {
background: #d5d5d5;
.vertical-tab-button.last a {
border-bottom: 0;
}
.vertical-tab-button.selected a,
.vertical-tab-button a:hover,
.vertical-tab-button a:focus {
background: #fcfcfa;
text-shadow: none;
text-decoration: none;
outline: 0;
}
.vertical-tabs .selected a,
.vertical-tabs .selected a:hover,
.vertical-tabs .selected a:focus,
.vertical-tabs .selected a:active {
background: #fff;
border-right-color: #fff; /* LTR */
border-top: 1px solid #ccc;
.vertical-tab-button.selected a {
border-bottom-color: #b3b2ad;
color: #004f80;
}
.vertical-tabs .first.selected a,
.vertical-tabs .first.selected a:hover {
border-top: 0;
.vertical-tab-button.selected a:hover,
.vertical-tab-button.selected a:focus {
color: #007ecc;
}
.vertical-tabs .selected a:focus strong {
text-decoration: underline;
.vertical-tabs-panes {
margin: 0 0 0 240px; /* LTR */
padding: 10px 15px 10px 15px;
border-left: 1px solid #a6a5a1; /* LTR */
background-color: #fcfcfa;
}
.vertical-tabs .vertical-tabs-panes {
margin: 0 0 0 245px; /* LTR */
.vertical-tabs-panes:after {
content: "";
display: table;
clear: both;
}
.vertical-tabs-pane {
margin: 0;
padding: 0;
border: 0;
color: #595959;
}
.vertical-tab-button strong {
font-size: 0.923em;
}
.vertical-tab-button .summary {
display: block;
padding-top: 0.4em;
color: #666;
font-size: 0.846em;
}
.vertical-tab-button.selected a:focus strong {
text-decoration: underline;
}
.vertical-tabs-pane > summary {
display: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment