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

Issue #2408511 by joaogarin, pjbaert, rpayanm, bobrov1989: Rewrite vertical-tabs component inline with our CSS standards

core/misc/vertical-tabs.css

+/**
+ * @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;

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;

core/themes/bartik/css/components/vertical-tabs.component.css

+/**
+ * @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 */

core/themes/seven/css/components/vertical-tabs.css

 /**
+ * @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;
 }