From e73ce6ea0070cb1fcdadf09d2b88f40fd95a9992 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Tue, 24 Mar 2015 11:30:14 +0000
Subject: [PATCH] Issue #2408511 by joaogarin, pjbaert, rpayanm, bobrov1989:
Rewrite vertical-tabs component inline with our CSS standards
---
core/misc/vertical-tabs.css | 36 +++++++------
core/misc/vertical-tabs.js | 38 +++++++-------
.../components/vertical-tabs.component.css | 9 +++-
.../seven/css/components/vertical-tabs.css | 52 +++++++++----------
4 files changed, 70 insertions(+), 65 deletions(-)
diff --git a/core/misc/vertical-tabs.css b/core/misc/vertical-tabs.css
index c95745022a28..ec5d3c194a69 100644
--- a/core/misc/vertical-tabs.css
+++ b/core/misc/vertical-tabs.css
@@ -1,3 +1,7 @@
+/**
+ * @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;
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 89b123a7e3ad..faed095f208c 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -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;
diff --git a/core/themes/bartik/css/components/vertical-tabs.component.css b/core/themes/bartik/css/components/vertical-tabs.component.css
index 444fd9dd6e11..ce4d6cdc3d66 100644
--- a/core/themes/bartik/css/components/vertical-tabs.component.css
+++ b/core/themes/bartik/css/components/vertical-tabs.component.css
@@ -1,9 +1,14 @@
+/**
+ * @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 */
diff --git a/core/themes/seven/css/components/vertical-tabs.css b/core/themes/seven/css/components/vertical-tabs.css
index 325a3afe49a8..d42da4afa542 100644
--- a/core/themes/seven/css/components/vertical-tabs.css
+++ b/core/themes/seven/css/components/vertical-tabs.css
@@ -1,6 +1,8 @@
/**
+ * @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;
}
--
GitLab