Commit e73ce6ea authored by alexpott's avatar alexpott
Browse files

Issue #2408511 by joaogarin, pjbaert, rpayanm, bobrov1989: Rewrite...

Issue #2408511 by joaogarin, pjbaert, rpayanm, bobrov1989: Rewrite vertical-tabs component inline with our CSS standards
parent 58481b72
/**
* @file
* Vertical Tabs.
*/
.vertical-tabs {
margin: 1em 0 1em 15em; /* LTR */
......@@ -7,7 +11,7 @@
margin-left: 0;
margin-right: 15em;
}
.vertical-tabs-list {
.vertical-tabs__menu {
float: left; /* LTR */
width: 15em;
margin: -1px 0 -1px -15em; /* LTR */
......@@ -15,52 +19,50 @@
border-top: 1px solid #ccc;
list-style: none;
}
[dir="rtl"] .vertical-tabs-list {
[dir="rtl"] .vertical-tabs__menu {
float: right;
margin-left: 0;
margin-right: -15em;
}
.vertical-tabs-pane {
.vertical-tabs__pane {
margin: 0;
border: 0;
}
.vertical-tabs-pane > summary {
.vertical-tabs__pane > summary {
display: none;
}
/* Layout of each tab */
.vertical-tab-button {
margin: 0;
padding: 0;
/* Layout of each tab. */
.vertical-tabs__menu-item {
border: 1px solid #ccc;
border-top: 0;
background: #eee;
}
.vertical-tab-button a {
.vertical-tabs__menu-item a {
display: block;
padding: 0.5em 0.6em;
text-decoration: none;
}
.vertical-tab-button a:focus strong,
.vertical-tab-button a:active strong,
.vertical-tab-button a:hover strong {
.vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title,
.vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
.vertical-tabs__menu-item a:hover .vertical-tabs__menu-item-title {
text-decoration: underline;
}
.vertical-tab-button a:hover {
.vertical-tabs__menu-item a:hover {
outline: 1px dotted;
}
.vertical-tab-button.selected {
.vertical-tabs__menu-item.is-selected {
border-right-width: 0; /* LTR */
background-color: #fff;
}
[dir="rtl"] .vertical-tab-button.selected {
[dir="rtl"] .vertical-tabs__menu-item.is-selected {
border-left-width: 0;
border-right-width: 1px;
}
.vertical-tab-button.selected strong {
.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
color: #000;
}
.vertical-tab-button .summary {
.vertical-tabs__menu-item-summary {
display: block;
margin-bottom: 0;
line-height: normal;
......
......@@ -21,8 +21,8 @@
}
$(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () {
var $this = $(this).addClass('vertical-tabs-panes');
var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
var $this = $(this).addClass('vertical-tabs__panes');
var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
var tab_focus;
// Check if there are some details that can be converted to vertical-tabs
......@@ -32,7 +32,7 @@
}
// Create the tab column.
var tab_list = $('<ul class="vertical-tabs-list"></ul>');
var tab_list = $('<ul class="vertical-tabs__menu"></ul>');
$this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
// Transform each details into a tab.
......@@ -48,7 +48,7 @@
// prop() can't be used on browsers not supporting details element,
// the style won't apply to them if prop() is used.
.attr('open', true)
.addClass('vertical-tabs-pane')
.addClass('vertical-tabs__pane')
.data('verticalTab', vertical_tab);
if (this.id === focusID) {
tab_focus = $that;
......@@ -63,10 +63,10 @@
// element that matches the URL fragment, activate that tab.
var $locationHash = $this.find(window.location.hash);
if (window.location.hash && $locationHash.length) {
tab_focus = $locationHash.closest('.vertical-tabs-pane');
tab_focus = $locationHash.closest('.vertical-tabs__pane');
}
else {
tab_focus = $this.find('> .vertical-tabs-pane:first');
tab_focus = $this.find('> .vertical-tabs__pane:first');
}
}
if (tab_focus.length) {
......@@ -102,7 +102,7 @@
if (event.keyCode === 13) {
self.focus();
// Set focus on the first input field of the visible details/tab pane.
$(".vertical-tabs-pane :input:visible:enabled:first").trigger('focus');
$(".vertical-tabs__pane :input:visible:enabled:first").trigger('focus');
}
});
......@@ -119,17 +119,17 @@
*/
focus: function () {
this.details
.siblings('.vertical-tabs-pane')
.siblings('.vertical-tabs__pane')
.each(function () {
var tab = $(this).data('verticalTab');
tab.details.hide();
tab.item.removeClass('selected');
tab.item.removeClass('is-selected');
})
.end()
.show()
.siblings(':hidden.vertical-tabs-active-tab')
.siblings(':hidden.vertical-tabs__active-tab')
.val(this.details.attr('id'));
this.item.addClass('selected');
this.item.addClass('is-selected');
// Mark the active tab for screen readers.
$('#active-vertical-tab').remove();
this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
......@@ -153,10 +153,10 @@
// Update .first marker for items. We need recurse from parent to retain the
// actual DOM element order as jQuery implements sortOrder, but not as public
// method.
this.item.parent().children('.vertical-tab-button').removeClass('first')
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')
.filter(':visible:first').addClass('first');
// Display the details element.
this.details.removeClass('vertical-tab-hidden').show();
this.details.removeClass('vertical-tab--hidden').show();
// Focus this tab.
this.focus();
return this;
......@@ -171,12 +171,12 @@
// Update .first marker for items. We need recurse from parent to retain the
// actual DOM element order as jQuery implements sortOrder, but not as public
// method.
this.item.parent().children('.vertical-tab-button').removeClass('first')
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')
.filter(':visible:first').addClass('first');
// Hide the details element.
this.details.addClass('vertical-tab-hidden').hide();
this.details.addClass('vertical-tab--hidden').hide();
// Focus the first visible tab (if there is one).
var $firstTab = this.details.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden):first');
if ($firstTab.length) {
$firstTab.data('verticalTab').focus();
}
......@@ -203,10 +203,10 @@
*/
Drupal.theme.verticalTab = function (settings) {
var tab = {};
tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>')
tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>')
.append(tab.link = $('<a href="#"></a>')
.append(tab.title = $('<strong></strong>').text(settings.title))
.append(tab.summary = $('<span class="summary"></span>')
.append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title))
.append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')
)
);
return tab;
......
/**
* @file
* Vertical tabs component.
*/
/* Vertical Tabs Reset */
ul.vertical-tabs-list {
.vertical-tabs__menu {
margin: -1px 0 -1px -15em; /* LTR */
padding: 0;
}
[dir="rtl"] ul.vertical-tabs-list {
[dir="rtl"] .vertical-tabs__menu {
margin-left: 0;
margin-right: -15em;
/* This is required to win specificity over [dir="rtl"] .region-content ul */
......
/**
* @file
* Override of misc/vertical-tabs.css.
*/
.vertical-tabs {
position: relative;
overflow: hidden;
......@@ -9,7 +11,7 @@
border-radius: 4px;
background: #e6e5e1;
}
.vertical-tabs-list {
.vertical-tabs__menu {
float: left; /* LTR */
width: 240px;
margin: 0 -100% -1px 0; /* LTR */
......@@ -17,32 +19,29 @@
border-bottom: 1px solid #ccc;
line-height: 1;
}
[dir="rtl"] .vertical-tabs-list {
[dir="rtl"] .vertical-tabs__menu {
float: right;
margin: 0 0 -1px -100%;
}
.vertical-tab-button {
.vertical-tabs__menu-item {
position: relative;
margin: 0;
list-style: none;
list-style-image: none;
}
.vertical-tab-button.selected {
.vertical-tabs__menu-item.is-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);
}
[dir="rtl"] .vertical-tab-button.selected {
[dir="rtl"] .vertical-tabs__menu-item.is-selected {
border-left: 1px solid #fcfcfa;
border-right: none;
}
.vertical-tab-button:focus,
.vertical-tab-button:active {
.vertical-tabs__menu-item:focus,
.vertical-tabs__menu-item:active {
z-index: 2;
}
.vertical-tab-button a {
.vertical-tabs__menu-item a {
display: block;
padding: 10px 15px 15px;
border-bottom: 1px solid #b3b2ad;
......@@ -50,60 +49,59 @@
text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
text-decoration: none;
}
.vertical-tab-button:last-child a {
.vertical-tabs__menu-item:last-child a {
border-bottom: 0;
}
.vertical-tab-button.selected a,
.vertical-tab-button a:hover,
.vertical-tab-button a:focus {
.vertical-tabs__menu-item.is-selected a,
.vertical-tabs__menu-item a:hover,
.vertical-tabs__menu-item a:focus {
background: #fcfcfa;
text-shadow: none;
text-decoration: none;
}
.vertical-tab-button.selected a {
.vertical-tabs__menu-item.is-selected a {
border-bottom-color: #b3b2ad;
color: #004f80;
}
.vertical-tab-button.selected a:hover,
.vertical-tab-button.selected a:focus {
.vertical-tabs__menu-item.is-selected a:hover,
.vertical-tabs__menu-item.is-selected a:focus {
color: #007ecc;
}
[data-vertical-tabs-panes] {
background-color: #fcfcfa;
}
.vertical-tabs-panes {
.vertical-tabs__panes {
margin: 0 0 0 240px; /* LTR */
padding: 10px 15px 10px 15px;
border-left: 1px solid #a6a5a1; /* LTR */
}
[dir="rtl"] .vertical-tabs-panes {
[dir="rtl"] .vertical-tabs__panes {
margin: 0 240px 0 0;
border-left: none;
border-right: 1px solid #a6a5a1;
}
.vertical-tabs-panes:after {
.vertical-tabs__panes:after {
content: "";
display: table;
clear: both;
}
.vertical-tabs-pane {
.vertical-tabs__pane {
margin: 0;
padding: 0;
border: 0;
color: #595959;
}
.vertical-tab-button strong {
.vertical-tabs__menu-item-title {
font-size: 0.923em;
}
.vertical-tab-button .summary {
.vertical-tabs__menu-item-summary {
display: block;
padding-top: 0.4em;
color: #666;
font-size: 0.846em;
}
.vertical-tab-button.selected a:focus strong {
.vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {
text-decoration: underline;
}
.vertical-tabs-pane > summary {
.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